/* ═══════════════════════════════════════════════
   CIVITASAI – Monitor
   Farb-Tokens und Schriften kommen aus _base.css. Diese Datei
   definiert keinen Basis-Token neu (Design-Regel 1, CONTEXT.md).

   Aufbau:
   1. Zusatz-Tokens und Kernkomponenten — unverändert übernommen aus
      Iris, 2026-09-12-monitor-design-tokens-iris.md §10, Fassung mit
      der Chip-Trefferfläche nach GL-003 §4c.
      Wer hier etwas ändert, ändert zuerst diese Datei.
   2. Layout und Seitenbausteine (Lena). Keine Farbwerte.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   MONITOR – Zusatz-Tokens
   SSOT der Basiswerte: ../_base.css + GL-003 §2a.
   Diese Datei definiert KEINEN eigenen Basis-Token neu und keinen Literal-Farbwert.
   Jeder --mon-* ist ein var()- oder color-mix()-Ausdruck ueber Basis-Tokens.
   Begruendungen und Kontrastrechnungen:
   C_PKA/Areas/beruflich/civitasai-website/2026-09-12-monitor-design-tokens-iris.md
   Kontraste gemessen nach WCAG 2.1 gegen --bg2 #f3f2ef (dunkelster Textgrund der Site).
   ═══════════════════════════════════════════════ */
:root {

  /* ── STATUS ──────────────────────────────────────────────────────────
     KEINE Hue-Kodierung. Wir verzeichnen Verfahren, wir bewerten sie nicht:
     Gruen fuer "produktiv" und Rot/Amber fuer "eingestellt" waeren eine
     Bewertung der Behoerde, die wir nirgends belegen koennen (GL-044).
     Der Zustand steckt in der FORM des Punkts (voll / halb / Ring /
     gestrichelt / Balken) und immer zusaetzlich im Wort daneben (WCAG 1.4.1).
     Fuenf Namen auf drei Tinten – Muster --border-strong, GL-003 §2f. */
  --mon-status-produktiv:    var(--text);   /* 15,69:1 – voll gefuellter Kreis */
  --mon-status-pilot:        var(--text);   /* 15,69:1 – halb gefuellter Kreis */
  --mon-status-erprobung:    var(--text2);  /*  6,81:1 – offener Ring */
  --mon-status-angekuendigt: var(--text3);  /*  4,79:1 – gestrichelter Ring */
  --mon-status-eingestellt:  var(--text3);  /*  4,79:1 – waagerechter Balken, KEIN Kreuz */
  --mon-status-label:        var(--text2);  /*  6,81:1 – Wort neben dem Punkt */

  /* ── BELEGSTAERKE ────────────────────────────────────────────────────
     Ordinal, also Fuellanzeige aus zwei Segmenten. "unbelegt" ist die
     EINZIGE Farbe der Datenanzeige: sie sagt nichts ueber das Verfahren,
     sondern ueber unsere Quellenlage (GL-044, Leitplanke 1 des Konzepts).
     "primaer" bekommt bewusst KEIN Gruen – sonst liest die Karte doch
     wieder als Ampel. */
  --mon-beleg-ink:              var(--text2);          /* 6,81:1 – Kurzwort */
  --mon-beleg-voll:             var(--text2);          /* 6,81:1 – gefuelltes Segment */
  --mon-beleg-leer:             var(--border-control); /* 3,06:1 – leeres Segment, Rahmen */
  --mon-beleg-unbelegt-ink:     var(--warn);           /* 6,37:1 auf der Amber-Flaeche */
  /* Fallback-Hexe = die in _base.css .badge-soon hartkodierten Werte.
     Antrag laeuft, --warn-bg/--warn-bd in _base.css zu fuehren (GL-003 §2a,
     spiegelbildlich zu --green-bg/--green-bd). Danach greifen die Fallbacks
     nie mehr. Ein drittes Literal waere Drift (GL-003 §2c). */
  --mon-beleg-unbelegt-flaeche: var(--warn-bg, #fef3c7);
  --mon-beleg-unbelegt-rahmen:  var(--warn-bd, #fde68a);

  /* ── KATEGORIE-CHIPS ─────────────────────────────────────────────────
     16 Werte, EINE Gestalt. Keine Farbfamilien: die 16 Werte liegen nicht
     auf einer Dimension (Technik / Verwaltungsaufgabe / Wirkungsart), eine
     Farbfamilie wuerde Verwandtschaft behaupten, die es nicht gibt – und
     kategorie ist enum-mehrfach, eine Karte traegt regelmaessig zwei Familien.
     Das Wort traegt, nicht die Farbe. Gruppierung nur in der Filterleiste,
     als beschriftete Zwischenueberschrift.
     ZWEI RAHMEN, GL-003 §2f: Etikett auf der Karte vs. Bedienelement im Filter.
     Wird ein Chip auf der Karte klickbar, wechselt er auf -bedien. Kein Mittelweg. */
  --mon-chip-flaeche:       var(--bg2);
  --mon-chip-ink:           var(--text2);          /* 6,81:1 */
  --mon-chip-rahmen:        var(--border);         /* 1,16:1 – dekorativ, NICHT bedienbar */
  --mon-chip-rahmen-bedien: var(--border-control); /* 3,06:1 – WCAG 1.4.11, Pflicht */
  --mon-chip-rahmen-hover:  var(--text2);          /* Zustand geht dunkler, nie heller */
  --mon-chip-aktiv-flaeche: var(--primary);        /* 4,86:1 gegen --bg2, Vollflaeche ohne Rahmen */
  --mon-chip-aktiv-ink:     #fff;                  /* weiss auf --primary = 5,44:1 */

  /* ── KARTOGRAMM ──────────────────────────────────────────────────────
     Sequenzielle Rampe aus GENAU ZWEI Basis-Tokens. Kein neuer Farbwert.
     Beschriftung bleibt auf allen Stufen --text: eine fuenfte, dunklere
     Stufe haette den Umschlag auf weisse Schrift erzwungen (bei ~54 %
     Mischung faellt --text auf 4,50:1 – die Reserve-Null, die GL-003 §2e
     und §2g bereits zweimal verworfen haben).
     Die ZAHL auf der Kachel ist das Datum, die Flaeche nur Scan-Hilfe:
     benachbarte Stufen trennen 1,29–1,41 in der Relativluminanz, mehr gibt
     keine fuenfstufige sequenzielle Skala her. */
  --mon-karte-0: var(--bg);                                             /* keine Eintraege, Rahmen gestrichelt */
  --mon-karte-1: color-mix(in srgb, var(--border-control) 25%, var(--bg)); /* ≈#dfdedc – Text 13,06:1 */
  --mon-karte-2: color-mix(in srgb, var(--border-control) 50%, var(--bg)); /* ≈#c4c2bf – Text  9,88:1 */
  --mon-karte-3: color-mix(in srgb, var(--border-control) 75%, var(--bg)); /* ≈#a9a6a3 – Text  7,25:1 */
  --mon-karte-4: var(--border-control);                                 /*  #8e8a86 – Text  5,13:1 */
  --mon-karte-ink:      var(--text);            /* Kuerzel + Zahl, jede Stufe */
  --mon-karte-rahmen:   var(--border-control);  /* 3,28:1 gegen die Fuge --bg */
  --mon-karte-gewaehlt: var(--primary);         /* als outline mit offset – siehe unten */

  /* ── ALTERUNG (> 180 Tage) ───────────────────────────────────────────
     Grau, nicht amber. Amber ist fuer "unbelegt" vergeben; Alterung ist
     eine Aussage ueber UNSERE Pflege, nicht ueber den Eintrag – und sie
     wird der Normalfall sein. Ein Alarmzeichen auf der halben Seite ist
     keines mehr. Unterbrochene Linie = "offen / nicht gesichert", dieselbe
     Formensprache wie der gestrichelte Ring (angekuendigt) und der
     gestrichelte Kachelrahmen (keine Eintraege). */
  --mon-alterung-ink:   var(--text3);        /* 4,79:1 */
  --mon-alterung-linie: var(--border-strong);/* 3,06:1 – Grafik, nicht bedienbar */

  /* ── NEU-MARKER ──────────────────────────────────────────────────────
     Zweite und letzte Stelle der Rubrik mit Akzentfarbe. #fdf5f5 ist der
     in GL-003 §2b bereits dokumentierte Rot-Tint, kein neuer Wert. */
  --mon-neu-ink:     var(--primary);   /* 5,06:1 auf #fdf5f5 */
  --mon-neu-flaeche: #fdf5f5;
  --mon-neu-rahmen:  var(--primary);

  /* ── FLAECHEN ────────────────────────────────────────────────────────── */
  --mon-filter-flaeche:  var(--bg2);
  --mon-hinweis-flaeche: var(--bg2);
  /* Hover-Flaeche anwaehlbarer Karten und Zeilen. Heute wertgleich mit
     --mon-neu-flaeche, aber eine eigene Rolle: "hier faehrt die Maus" ist
     nicht "das ist neu". Bewegt sich eine, darf die andere nicht mitwandern –
     dann bekommt diese hier ihren eigenen Ausdruck. Muster: --border-strong
     auf --border-control, GL-003 §2f. Nachgetragen 13.09.2026 aus dem Bau. */
  --mon-hover-flaeche:   var(--mon-neu-flaeche);
}

/* ── STATUS: Punkt + Wort ──────────────────────────────────────────────
   Der Punkt ist Scan-Hilfe, das Wort traegt die Information. */
.mon-status { display:inline-flex; align-items:center; gap:6px;
              font-size:.78rem; font-weight:500; color:var(--mon-status-label); }
.mon-status::before { content:""; flex:none; width:10px; height:10px;
                      border-radius:50%; box-sizing:border-box; }
.mon-status--produktiv::before    { background:var(--mon-status-produktiv); }
.mon-status--pilot::before        { border:1px solid var(--mon-status-pilot);
                                    background:linear-gradient(90deg,
                                      var(--mon-status-pilot) 0 50%, transparent 50% 100%); }
.mon-status--erprobung::before    { border:1.5px solid var(--mon-status-erprobung); }
.mon-status--angekuendigt::before { border:1.5px dashed var(--mon-status-angekuendigt); }
.mon-status--eingestellt::before  { height:2px; border-radius:1px;
                                    background:var(--mon-status-eingestellt); }

/* ── BELEGSTAERKE: zwei Segmente + Kurzwort ────────────────────────── */
.mon-beleg { display:inline-flex; align-items:center; gap:6px;
             font-size:.72rem; font-weight:500; color:var(--mon-beleg-ink); }
.mon-beleg-meter { display:inline-flex; gap:2px; flex:none; }
.mon-beleg-meter i { width:4px; height:11px; border-radius:1px; box-sizing:border-box;
                     border:1px solid var(--mon-beleg-leer); }
.mon-beleg-meter i[data-voll] { background:var(--mon-beleg-voll);
                                border-color:var(--mon-beleg-voll); }
.mon-beleg--unbelegt { color:var(--mon-beleg-unbelegt-ink);
                       background:var(--mon-beleg-unbelegt-flaeche);
                       border:1px solid var(--mon-beleg-unbelegt-rahmen);
                       padding:3px 10px; border-radius:4px; font-weight:700; }

/* ── KATEGORIE-CHIP ────────────────────────────────────────────────────
   .mon-chip = Etikett auf der Karte. .mon-chip--bedien = Filterleiste.
   Die Klassen sind nicht austauschbar, siehe GL-003 §2f. */
.mon-chip { display:inline-flex; align-items:center; padding:3px 10px;
            border-radius:20px; font-size:.72rem; font-weight:500;
            background:var(--mon-chip-flaeche); color:var(--mon-chip-ink);
            border:1px solid var(--mon-chip-rahmen); }
/* Der Schalter ist groesser als das Etikett – er wird mit dem Daumen getroffen,
   nicht gelesen. Geometrie aus dem Bau (Lena, 13.09.2026): 3px 10px ergaben auf
   dem Telefon rund 22px Hoehe. Kein Farbwert beruehrt. */
.mon-chip--bedien { position:relative; min-height:34px; padding:7px 13px;
                    border-color:var(--mon-chip-rahmen-bedien); cursor:pointer;
                    font-family:inherit; }
/* GL-003 §4c: 34px sichtbar ist eine Gestaltungsentscheidung, 44px Trefferhoehe
   ist Hausmass. Die Differenz holt eine farblose Deckflaeche zurueck.
   versatz = (44 − 34)/2 + 1px Rahmen = 6px. Nicht 5px – der Polsterkasten ist
   bei border-box um zweimal die Rahmenbreite kleiner als das Sichtbare, das
   sind genau die zwei Pixel, die GL-003 §4c als Fallgrube fuehrt. */
.mon-chip--bedien::after { content:""; position:absolute; left:0; right:0;
                           top:-6px; bottom:-6px; }
.mon-chip--bedien:hover { border-color:var(--mon-chip-rahmen-hover);
                          background:var(--mon-hover-flaeche); }
.mon-chip--bedien[aria-pressed="true"] { background:var(--mon-chip-aktiv-flaeche);
                                         color:var(--mon-chip-aktiv-ink);
                                         border-color:var(--mon-chip-aktiv-flaeche); }
/* Ueberstand der Deckflaeche = (44 − 34)/2 = 5px, oben und unten. Die Chips
   brechen in der Filterleiste um, also MUSS der Zeilenabstand >= 10px sein –
   darunter ueberlappen sich die Trefferflaechen zweier Reihen und ein Tipp am
   oberen Rand trifft die Reihe darueber. 12px = 2px Reserve (Lenas Praezedenz
   im Familienkalender). Der Spaltenabstand darf bei 6px bleiben: die Flaeche
   waechst nur senkrecht. */
.mon-filter-gruppe { display:flex; flex-wrap:wrap; row-gap:12px; column-gap:6px;
                     padding:5px 0; }

/* ── KARTOGRAMM ────────────────────────────────────────────────────────
   16 <button> in einem Grid, kein SVG: nativ fokussierbar, aria-pressed
   traegt den Filterzustand, Beschriftung ist echter Text, keine Pfaddaten,
   keine Lizenzfrage, 44x44 px ohne Deckflaechen-Trick (GL-003 §4c).
   Fuge >= 6px, damit der Auswahlring mit outline-offset Platz hat. */
.mon-karto { display:grid; gap:6px; max-width:440px;
             grid-template-columns:repeat(4, minmax(44px, 1fr));
             grid-template-areas:
               ".  sh hh .."
               "hb ni mv .."
               ".  st bb be"
               "nw he th sn"
               "rp .. .. .."
               "sl bw by .."; }
.mon-kachel { min-height:44px; display:flex; flex-direction:column;
              align-items:center; justify-content:center; gap:1px;
              font-family:inherit; font-size:.72rem; font-weight:600;
              cursor:pointer; border-radius:4px;
              color:var(--mon-karte-ink);
              border:1px solid var(--mon-karte-rahmen);
              background:var(--mon-karte-0); }
.mon-kachel[data-stufe="1"] { background:var(--mon-karte-1); }
.mon-kachel[data-stufe="2"] { background:var(--mon-karte-2); }
.mon-kachel[data-stufe="3"] { background:var(--mon-karte-3); }
.mon-kachel[data-stufe="4"] { background:var(--mon-karte-4); }
/* "keine Eintraege": gestrichelt, Beschriftung "—", Legende sagt "nicht erfasst".
   Eine 0 waere eine Tatsachenbehauptung ueber ein Bundesland (GL-044). */
.mon-kachel[data-stufe="leer"] { border-style:dashed; color:var(--text3); font-weight:500; }
/* Auswahl: outline statt border – kein Layoutsprung, und der Ring liegt durch
   den Versatz auf der Fuge --bg (5,20:1) statt auf der Fuellung (1,59:1).
   Die Fuellung bleibt: Auswahl und Anzahl sind zwei Informationen.
   Keine opacity auf nicht gewaehlten Kacheln – das zerstoert die Textkontraste. */
.mon-kachel[aria-pressed="true"] { outline:2px solid var(--mon-karte-gewaehlt);
                                   outline-offset:2px; }

/* ── ALTERUNGSHINWEIS ──────────────────────────────────────────────────── */
.mon-geprueft { font-size:.72rem; color:var(--text3); }
.mon-geprueft--alt { color:var(--mon-alterung-ink);
                     text-decoration:underline dotted var(--mon-alterung-linie);
                     text-underline-offset:3px; }
.mon-hinweis-alt { background:var(--mon-hinweis-flaeche);
                   border-left:2px solid var(--mon-alterung-linie);
                   padding:12px 16px; font-size:.82rem; color:var(--text2); }

/* ── NEU-MARKER ────────────────────────────────────────────────────────── */
.mon-neu { display:inline-flex; align-items:center; padding:3px 10px;
           border-radius:4px; font-size:.68rem; font-weight:700;
           letter-spacing:.04em; text-transform:uppercase;
           color:var(--mon-neu-ink); background:var(--mon-neu-flaeche);
           border:1px solid var(--mon-neu-rahmen); }


/* ═══════════════════════════════════════════════════════════════════
   AB HIER: LAYOUT UND SEITENBAUSTEINE (Lena)
   Keine Farbwerte, keine Token-Definitionen. Alles Farbige steht oben
   in Iris' Block oder kommt aus _base.css.
   ═══════════════════════════════════════════════════════════════════ */

/* Sichtbar nur für Screenreader (in _base.css gibt es dafür bisher
   nur .sr-link, das zusätzlich als Sprunglink gestaltet ist). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── SEITENKOPF ─────────────────────────────────────────────────── */
.mon-hero { border-bottom: 1px solid var(--border); background: var(--surface); padding: 56px 32px 44px; }
.mon-hero-inner { max-width: 1120px; margin: 0 auto; }
.mon-krumen { font-size: .78rem; color: var(--text3); margin-bottom: 18px; }
.mon-krumen a { color: var(--text3); text-decoration: none; }
.mon-krumen a:hover { color: var(--text2); }
.mon-krumen span { margin: 0 6px; }
.mon-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); margin-bottom: 10px; }
.mon-hero h1 {
  font-family: 'DM Serif Display', serif; font-style: normal;
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em;
  margin-bottom: 14px;
}
.mon-lead { color: var(--text2); font-size: 1.02rem; line-height: 1.7; max-width: 62ch; }

.mon-inhalt { max-width: 1120px; margin: 0 auto; padding: 0 32px 80px; }
.mon-fliess { max-width: 68ch; }
.mon-fliess p { color: var(--text2); font-size: .97rem; line-height: 1.75; margin-bottom: 16px; }
.mon-fliess h2 { font-family: 'DM Serif Display', serif; font-size: 1.5rem; letter-spacing: -.01em; color: var(--text); margin: 44px 0 14px; }
.mon-fliess a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.mon-abschnitt-titel { font-family: 'DM Serif Display', serif; font-size: 1.5rem; letter-spacing: -.01em; color: var(--text); margin: 44px 0 6px; }
.mon-hinweiszeile { color: var(--text2); font-size: .9rem; line-height: 1.7; margin-top: 14px; max-width: 68ch; }
.mon-hinweiszeile a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* ── ZÄHLER ─────────────────────────────────────────────────────── */
.mon-zaehler { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.mon-zahl { flex: 1 1 140px; min-width: 132px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); padding: 14px 16px; }
.mon-zahl dt { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }
.mon-zahl dd { font-family: 'DM Serif Display', serif; font-size: 1.7rem; line-height: 1.1; color: var(--text); }
.mon-zahl dd.mon-zahl-klein { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 500; padding-top: 6px; }

/* ── EINSTIEGE (erste Bedienebene) ──────────────────────────────── */
.mon-einstiege { display: grid; grid-template-columns: 1fr; gap: 10px; list-style: none; margin: 4px 0 34px; }
.mon-einstieg > a {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  text-decoration: none; color: inherit;
  border: 1px solid var(--border-control); border-radius: 10px;
  background: var(--surface); padding: 16px 18px;
  transition: border-color .15s, background .15s;
}
.mon-einstieg > a:hover { border-color: var(--primary); background: var(--mon-hover-flaeche); }
.mon-einstieg-frage { font-size: .97rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.mon-einstieg-was { font-size: .82rem; color: var(--text2); line-height: 1.55; }
.mon-einstieg-zahl { font-size: .74rem; color: var(--text3); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 6px; }

/* ── NACHNUTZUNGS-CLUSTER ───────────────────────────────────────── */
.mon-cluster-liste { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; }
.mon-cluster > a {
  display: block; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--border-control); border-radius: 10px;
  background: var(--surface); padding: 18px 20px;
  transition: border-color .15s, background .15s;
}
.mon-cluster > a:hover { border-color: var(--primary); background: var(--mon-hover-flaeche); }
.mon-cluster h3 { font-size: 1.02rem; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 5px; }
.mon-cluster-kurz { font-size: .88rem; color: var(--text2); line-height: 1.6; margin-bottom: 12px; }
.mon-cluster-kette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mon-cluster-art {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text2); background: var(--bg2); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 7px; line-height: 1; margin-bottom: 9px;
}
/* Verweis auf der Detailseite. Er soll auffälliger sein als „Ähnliche
   Verfahren", trägt aber keine eigene Farbe: die Betonung kommt aus der
   Fläche und dem breiten linken Rand, nicht aus einem neuen Ton. */
.mon-cluster-hinweis {
  display: block; text-decoration: none;
  border: 1px solid var(--border-control); border-left-width: 4px;
  border-radius: 8px; background: var(--bg2); padding: 15px 17px; margin: 0 0 26px;
  transition: background .15s, border-color .15s;
}
.mon-cluster-hinweis:hover { background: var(--surface); border-color: var(--primary); }
.mon-cluster-hinweis strong { display: block; font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: 4px; }
.mon-cluster-hinweis > span:last-child { font-size: .84rem; color: var(--text2); line-height: 1.6; }

/* ── FILTERLEISTE ───────────────────────────────────────────────── */
.mon-filter { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin: 20px 0 24px; }
.mon-filter > summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  font-size: .88rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 10px; min-height: 44px;
}
.mon-filter > summary::-webkit-details-marker { display: none; }
.mon-filter > summary::after { content: "▾"; color: var(--text2); font-size: .9rem; transition: transform .2s; }
.mon-filter[open] > summary::after { transform: rotate(180deg); }
.mon-filter[open] > summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.mon-filter-koerper { padding: 18px; background: var(--mon-filter-flaeche); border-radius: 0 0 10px 10px; }

.mon-suche { margin-bottom: 18px; }
.mon-suche label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 7px; }
.mon-suche input {
  width: 100%; font-family: inherit; font-size: .92rem; color: var(--text);
  background: var(--card); border: 1px solid var(--border-control); border-radius: 6px; padding: 11px 12px;
}
.mon-suche input::placeholder { color: var(--text3); }
.mon-suche input:hover { border-color: var(--text2); }

.mon-gruppen { display: grid; grid-template-columns: 1fr; gap: 18px; }
.mon-gruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.mon-gruppe legend { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); padding: 0; margin-bottom: 8px; }
/* Untergruppe der 16 Kategorien. Die Gruppierung steht beschriftet in der
   Filterleiste und nicht als Farbrätsel auf der Karte (Iris §4). */
.mon-untergruppe { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin: 12px 0 6px; }

.mon-filter-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-lt); }
.mon-treffer { font-size: .85rem; color: var(--text2); }
.mon-treffer strong { color: var(--text); }
.mon-aktivfilter { flex: 1 1 100%; font-size: .82rem; color: var(--text2); line-height: 1.6; }
.mon-aktivfilter strong { color: var(--text); font-weight: 600; }
.mon-reset {
  font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--text);
  background: var(--card); border: 1px solid var(--border-control); border-radius: 6px;
  padding: 9px 14px; cursor: pointer; min-height: 38px;
}
.mon-reset:hover { border-color: var(--text2); }

/* ── KARTOGRAMM: Rahmen, Beschriftung, Legende ──────────────────── */
.mon-karto-wrap { margin: 4px 0 26px; }
.mon-karto-kopf h2 { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 10px; }
/* Verbindlicher Wortlaut aus dem Konzept. Ohne diesen Satz behauptet die
   Einfärbung visuell etwas, das die Daten nicht hergeben (GL-044). */
.mon-karto-warnung { font-size: .82rem; line-height: 1.6; color: var(--text2); border-left: 3px solid var(--border-strong); padding: 2px 0 2px 12px; margin: 0 0 14px; max-width: 56ch; }
.mon-kachel-kuerzel { font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.mon-kachel-zahl { font-size: .68rem; font-weight: 500; font-variant-numeric: tabular-nums; }
/* build.py schreibt beim ersten Aufbau den Stufenindex aus schema.geo.stufen;
   Index 0 ist derselbe Zustand wie "leer" in Iris' Block, das JavaScript
   setzt danach "leer". Beide Schreibweisen müssen dasselbe zeigen, sonst
   flackert die Kachel beim Laden von gestrichelt auf durchgezogen. */
.mon-kachel[data-stufe="0"] { border-style: dashed; color: var(--text3); font-weight: 500; }

/* Platz im Raster nach Iris' grid-template-areas. */
.mon-kachel[data-land="SH"] { grid-area: sh; }
.mon-kachel[data-land="HH"] { grid-area: hh; }
.mon-kachel[data-land="HB"] { grid-area: hb; }
.mon-kachel[data-land="NI"] { grid-area: ni; }
.mon-kachel[data-land="MV"] { grid-area: mv; }
.mon-kachel[data-land="ST"] { grid-area: st; }
.mon-kachel[data-land="BB"] { grid-area: bb; }
.mon-kachel[data-land="BE"] { grid-area: be; }
.mon-kachel[data-land="NW"] { grid-area: nw; }
.mon-kachel[data-land="HE"] { grid-area: he; }
.mon-kachel[data-land="TH"] { grid-area: th; }
.mon-kachel[data-land="SN"] { grid-area: sn; }
.mon-kachel[data-land="RP"] { grid-area: rp; }
.mon-kachel[data-land="SL"] { grid-area: sl; }
.mon-kachel[data-land="BW"] { grid-area: bw; }
.mon-kachel[data-land="BY"] { grid-area: by; }

.mon-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: .74rem; color: var(--text3); }
.mon-legende-stufe { display: inline-flex; align-items: center; gap: 5px; }
.mon-legende i { width: 18px; height: 13px; border-radius: 2px; border: 1px solid var(--mon-karte-rahmen); display: inline-block; }
.mon-legende i[data-stufe="leer"] { background: var(--mon-karte-0); border-style: dashed; }
.mon-legende i[data-stufe="1"] { background: var(--mon-karte-1); }
.mon-legende i[data-stufe="2"] { background: var(--mon-karte-2); }
.mon-legende i[data-stufe="3"] { background: var(--mon-karte-3); }
.mon-legende i[data-stufe="4"] { background: var(--mon-karte-4); }

.mon-karto-text { margin-top: 12px; }
.mon-karto-text > summary { cursor: pointer; font-size: .8rem; color: var(--text2); min-height: 34px; display: flex; align-items: center; }
.mon-karto-text table { border-collapse: collapse; margin-top: 8px; font-size: .82rem; width: 100%; max-width: 440px; }
.mon-karto-text th, .mon-karto-text td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--border-lt); color: var(--text2); font-weight: 400; }
.mon-karto-text thead th { color: var(--text); font-weight: 600; }
.mon-karto-text td { text-align: right; font-variant-numeric: tabular-nums; }

/* ── ANSICHTSUMSCHALTER ─────────────────────────────────────────── */
.mon-werkzeugleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.mon-ansicht { display: inline-flex; border: 1px solid var(--border-control); border-radius: 6px; overflow: hidden; }
.mon-ansicht button {
  font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--text2);
  background: var(--card); border: 0; border-right: 1px solid var(--border-control);
  padding: 9px 15px; min-height: 38px; cursor: pointer;
}
.mon-ansicht button:last-child { border-right: 0; }
.mon-ansicht button:hover { color: var(--text); background: var(--bg2); }
.mon-ansicht button[aria-pressed="true"] { background: var(--bg2); color: var(--text); font-weight: 600; }
.mon-ansicht button[aria-pressed="true"]::before { content: "✓ "; }

/* ── KARTE ──────────────────────────────────────────────────────── */
.mon-liste { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; list-style: none; }
.mon-karte > a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border-control); border-radius: 10px;
  background: var(--surface); padding: 18px 20px;
  transition: border-color .15s, background .15s;
}
.mon-karte > a:hover { border-color: var(--primary); background: var(--mon-hover-flaeche); }
.mon-karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin-bottom: 6px; }
.mon-karte h3 { font-size: 1.02rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.mon-karte-traeger { font-size: .85rem; color: var(--text2); margin-bottom: 12px; }
.mon-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mon-chips-rest { font-size: .72rem; color: var(--text3); }
.mon-karte-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-lt); }
.mon-leer { border: 1px dashed var(--border-control); border-radius: 10px; padding: 28px 20px; text-align: center; color: var(--text2); font-size: .92rem; }

/* ── TABELLENANSICHT ────────────────────────────────────────────── */
.mon-tabelle-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
/* Der Bereich ist fokussierbar, damit er mit der Tastatur gescrollt
   werden kann. Dann braucht er auch einen sichtbaren Fokus. */
.mon-tabelle-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mon-tabelle { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .86rem; }
.mon-tabelle caption { text-align: left; padding: 14px 16px 0; font-size: .8rem; color: var(--text3); }
.mon-tabelle th, .mon-tabelle td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-lt); vertical-align: top; }
.mon-tabelle thead th { position: sticky; top: 0; background: var(--bg2); border-bottom: 1px solid var(--border); z-index: 1; padding: 0; }
.mon-tabelle thead th button {
  width: 100%; text-align: left; font-family: inherit; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text2);
  background: transparent; border: 0; padding: 11px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; min-height: 40px;
}
.mon-tabelle thead th button:hover { color: var(--text); }
.mon-tabelle thead th button::after { content: "↕"; color: var(--text3); font-size: .8rem; }
.mon-tabelle thead th[aria-sort="ascending"]  button::after { content: "↑"; color: var(--text); }
.mon-tabelle thead th[aria-sort="descending"] button::after { content: "↓"; color: var(--text); }
.mon-tabelle tbody tr:hover { background: var(--bg2); }
.mon-tabelle td a { color: var(--text); font-weight: 600; text-decoration: none; }
.mon-tabelle td a:hover { color: var(--red); text-decoration: underline; }
.mon-tabelle td.mon-unbekannt, .mon-daten dd.mon-unbekannt { color: var(--text3); font-style: italic; }
.mon-tabelle td.mon-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── DETAILSEITE ────────────────────────────────────────────────── */
.mon-block { margin-bottom: 34px; max-width: 900px; }
.mon-block > h2 { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text2); padding-bottom: 8px; border-bottom: 2px solid var(--text); margin-bottom: 14px; }
.mon-block p { color: var(--text2); font-size: .95rem; line-height: 1.75; margin-bottom: 12px; max-width: 68ch; }
.mon-daten { display: grid; grid-template-columns: 1fr; }
.mon-daten > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border-lt); }
.mon-daten dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.mon-daten dd { font-size: .93rem; color: var(--text); line-height: 1.6; }
.mon-verwandt { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; }
.mon-verwandt a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border-control); border-radius: 8px; padding: 12px 14px; background: var(--surface); }
.mon-verwandt a:hover { border-color: var(--primary); background: var(--mon-hover-flaeche); }
.mon-verwandt strong { display: block; font-size: .92rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.mon-verwandt span { font-size: .8rem; color: var(--text2); }
.mon-herkunft { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin: 0 0 8px; }
.mon-herkunft + .mon-verwandt { margin-bottom: 20px; }

/* ── QUELLENLISTE ───────────────────────────────────────────────── */
.mon-quellen { list-style: none; counter-reset: quelle; display: grid; gap: 14px; }
.mon-quellen li { counter-increment: quelle; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.mon-quellen li::before { content: counter(quelle); font-family: 'DM Mono', monospace; font-size: .78rem; color: var(--text3); padding-top: 2px; }
.mon-quelle-titel { font-size: .93rem; font-weight: 600; color: var(--text); line-height: 1.45; }
.mon-quelle-titel a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.mon-quelle-titel a:hover { color: var(--red); }
.mon-quelle-meta { font-size: .8rem; color: var(--text2); line-height: 1.7; margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mon-quelle-meta .mon-abruf { color: var(--text3); }

/* ── FUSSZEILE EINER DATENSEITE ─────────────────────────────────── */
.mon-fuss { margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--text); font-size: .85rem; color: var(--text2); line-height: 1.7; max-width: 68ch; }
.mon-fuss p { margin-bottom: 10px; }
.mon-fuss a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.mon-fuss code { font-family: 'DM Mono', monospace; font-size: .82rem; color: var(--text); }

/* ── KACHELN DER RUBRIKSEITE ────────────────────────────────────── */
.mon-uebersichten { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 26px 0 8px; list-style: none; }
.mon-uebersicht > a, .mon-uebersicht > div {
  display: block; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--border-control); border-radius: 10px;
  background: var(--surface); padding: 26px 24px; transition: border-color .15s, background .15s;
}
.mon-uebersicht > div { border-style: dashed; background: var(--bg2); }
.mon-uebersicht > a:hover { border-color: var(--primary); background: var(--mon-hover-flaeche); }
.mon-uebersicht h3 { font-family: 'DM Serif Display', serif; font-size: 1.35rem; letter-spacing: -.01em; color: var(--text); margin-bottom: 8px; }
.mon-uebersicht p { font-size: .9rem; color: var(--text2); line-height: 1.65; margin-bottom: 14px; }
.mon-uebersicht-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .78rem; color: var(--text3); }
.mon-pfeil { color: var(--red); font-weight: 600; font-size: .85rem; }

/* ── ÄNDERUNGSHISTORIE ──────────────────────────────────────────── */
.mon-woche { margin-bottom: 34px; }
.mon-woche > h2 { font-size: .95rem; font-weight: 600; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.mon-woche-zahl { font-size: .75rem; font-weight: 500; color: var(--text3); }
.mon-aenderungen { list-style: none; }
.mon-aenderung { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--border-lt); }
.mon-aenderung > a { font-size: .95rem; font-weight: 600; color: var(--text); text-decoration: none; }
.mon-aenderung > a:hover { color: var(--red); text-decoration: underline; }
.mon-aenderung p { font-size: .86rem; color: var(--text2); line-height: 1.65; }
.mon-aenderung time { font-size: .75rem; color: var(--text3); font-variant-numeric: tabular-nums; }
/* Art der Änderung als Wort, nicht als Farbe. Nur „neu" trägt den
   Akzent-Marker aus Iris §7, und der verfällt nach sieben Tagen. */
.mon-art { justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; line-height: 1; color: var(--text2); background: var(--bg2); }

/* ── BREITENSTUFEN ──────────────────────────────────────────────── */
@media (min-width: 640px) {
  .mon-einstiege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-cluster-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-uebersichten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-daten > div { grid-template-columns: 220px 1fr; gap: 16px; align-items: baseline; }
  .mon-aenderung { grid-template-columns: 112px 1fr; gap: 4px 14px; align-items: baseline; }
  .mon-art { grid-row: span 3; }
}
@media (min-width: 768px) {
  .mon-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .mon-einstiege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mon-gruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Zielgröße 360 px. */
@media (max-width: 639px) {
  .mon-hero { padding: 36px 16px 30px; }
  .mon-inhalt { padding: 0 16px 56px; }
  .mon-zahl { flex: 1 1 100%; }
  .mon-karte > a { padding: 15px 16px; }
  .mon-karte-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mon-filter-koerper { padding: 14px; }
  .mon-karto { max-width: 100%; }
  .mon-uebersicht > a, .mon-uebersicht > div { padding: 20px 17px; }
}

/* Legende der Belegstufen auf der Rubrikseite. */
.mon-beleg-legende { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 8px 0 16px; }

/* Das hidden-Attribut muss auch dort greifen, wo eine Komponente selbst
   ein display setzt. `ul.mon-liste` ist ein Grid, und eine Klassenregel
   gewinnt gegen das `[hidden] { display: none }` des Browsers — die
   Kartenliste blieb dadurch beim Wechsel auf die Tabelle stehen
   (gemessen headless am 13.09.2026, beide Ansichten gleichzeitig sichtbar). */
.mon-liste[hidden],
.mon-karte[hidden],
.mon-tabelle-wrap[hidden],
.mon-tabelle tr[hidden],
.mon-leer[hidden],
.mon-einstiege[hidden],
.mon-cluster-liste[hidden] { display: none; }

/* ═══════════════════════════════════════
   INHALTSTABELLE (freie Textabschnitte)
   Nicht die Verfahrenstabelle: keine klebenden Köpfe, keine Sortierknöpfe.
   Der scrollbare Rahmen ist derselbe (.mon-tabelle-wrap), damit es nur
   eine Stelle gibt, an der Fokus und Überlauf geregelt sind.
   ═══════════════════════════════════════ */
.mon-textabschnitt { margin-top: 40px; }
.mon-textabschnitt h2 {
  font-family: 'DM Serif Display', serif; font-size: 1.5rem; letter-spacing: -.01em;
  color: var(--text); margin: 0 0 14px;
}
.mon-inhaltstabelle { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .86rem; }
.mon-inhaltstabelle th, .mon-inhaltstabelle td {
  text-align: left; padding: 10px 14px; vertical-align: top;
  border-bottom: 1px solid var(--border-lt); color: var(--text2); line-height: 1.6;
}
.mon-inhaltstabelle thead th {
  background: var(--bg2); color: var(--text); font-weight: 600;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.mon-inhaltstabelle tbody tr:last-child td { border-bottom: 0; }

/* ═══════════════════════════════════════
   SONDERANSICHT SCHICHTENMODELL
   Aus Larrys Fragment übernommen. Zwei Blöcke des Fragments fehlen hier
   mit Absicht: sein eigener prefers-reduced-motion-Block (steht einmal
   für die ganze Site in _base.css, GL-003 §5b) und sein Skriptblock
   (die Ebenen hängen an derselben Filterlogik wie die Kacheln).
   ═══════════════════════════════════════ */
.monitor-schichten { margin: 4px 0 26px; }
.ms-intro { max-width: 68ch; color: var(--text2); margin: 0 0 22px; line-height: 1.7; font-size: .95rem; }
.ms-stapel { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

/* Die Fläche ist ein Bedienelement, also --border-control (GL-003 §2f,
   WCAG 1.4.11). Höhe kommt aus dem Inhalt und liegt weit über 44 px. */
.ms-lage {
  display: grid; grid-template-columns: 3.75rem 1fr auto; gap: 0 1.25rem;
  align-items: start; width: 100%; text-align: left; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border-control);
  border-radius: 4px; color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.ms-lage:hover { border-color: var(--text2); }
/* Gewählt: Rahmen UND Fläche UND aria-pressed, dazu die Klartextzeile
   in der Filterleiste. Der Innenabstand gleicht die Rahmenbreite aus,
   damit das Raster beim Auswählen nicht springt. */
.ms-lage[aria-pressed="true"] {
  border-color: var(--primary); border-width: 2px;
  padding: 15px 19px; background: var(--bg2);
}
/* Die verbindlich beschlossene Ebene trägt mehr Gewicht. Das bildet den
   Befund ab, nicht eine Vorliebe. */
.ms-lage[data-verbindlich="ja"] { background: var(--bg2); border-color: var(--text2); }
.ms-nr {
  font-family: 'DM Mono', monospace; font-size: .8125rem; font-variant-numeric: tabular-nums;
  color: var(--text3); padding-top: 3px; letter-spacing: .04em; white-space: nowrap;
}
.ms-name { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; margin: 0 0 5px; }
.ms-text { display: block; margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text2); max-width: 62ch; }
.ms-lage .badge { margin-top: 8px; display: inline-block; }
.ms-anzahl {
  font-family: 'DM Mono', monospace; font-size: .8125rem; font-variant-numeric: tabular-nums;
  color: var(--text2); white-space: nowrap; padding-top: 3px;
}
.ms-nachsatz { max-width: 68ch; margin: 22px 0 0; color: var(--text2); font-size: .9375rem; line-height: 1.7; }

/* Vierter Zustand neben badge-live / badge-soon / badge-locked aus
   _base.css. --text2 auf --bg2 = 6,81:1. An Iris: sobald eine zweite
   Seite diesen Zustand führt, gehört er nach _base.css. */
.badge-offen { background: var(--bg2); color: var(--text2); border: 1px solid var(--border); }

@media (max-width: 640px) {
  .ms-lage { grid-template-columns: 3.25rem 1fr; gap: 0 14px; padding: 14px 16px; }
  .ms-lage[aria-pressed="true"] { padding: 13px 15px; }
  .ms-anzahl { grid-column: 2; padding-top: 8px; }
}