/* ── Der Stil des informativen Teils ──────────────────────────────────────
   Ergaenzt style.css. Der gemeinsame Titelblock (.seitenkopf) und die
   Filterleiste (.it-leiste) stehen dort, weil Regie und informativer Teil sie
   teilen - hier steht nur, was zwoelf Adressen auf einer Seite zusaetzlich
   brauchen.

   Hier stand "und der blaue Kasten (.wk-box)". Den gibt es seit dem
   17. September nicht mehr, und ein Verweis auf ein Element, das nirgends
   steht, schickt die naechste Sitzung auf die Suche danach. */

    /* Eigenständige Seite: sie erbt die Farben und die Schrift aus style.css,
       bringt aber ihr eigenes Gerüst mit. Kein Socket, kein Zustand, keine
       Abhängigkeit vom Workshop - das ist der Zweck der Seite. */
    body { background: var(--bg-secondary); }
    /* ── Der Rand der Spalte ── ──
       Als Merkmal, weil die Titelkarte gegen ihn rechnet (siehe .seitenkopf in
       style.css). Zwei Zahlen, die zusammengehoeren und an zwei Stellen
       stehen, sind zwei Zahlen, die jemand einzeln aendert. */
    /* ── Die Gruppen der FAQs: Name links, Fragen rechts ── ──
       Dasselbe Muster wie die Monatsmarke bei den Terminen und der Buchstabe
       im Glossar: eine 108 Pixel breite Marke, daneben der Inhalt. Sie klebt
       hier NICHT, anders als dort - die Gruppen sind kurz, und eine Marke, die
       laenger klebt als ihre Gruppe lang ist, steht neben fremdem Inhalt.

       Bei schmalen Fenstern bricht die Marke ueber die Fragen, deshalb
       flex-wrap und eine Mindestbreite am Inhalt. */
    .it-faq-gruppe {
      display: flex; flex-wrap: wrap; gap: 0 24px; margin-bottom: 26px;
    }
    /* "Verwaltungspraxis" ist breiter als 108 Pixel und lief in die Fragen
       hinein (gemeldet am 6. Oktober, mit Bild). Die Marke trennt jetzt an
       der Silbe (lang="de" steht am Dokument), und was dann noch zu breit
       ist, bricht hart um. Die Breite bleibt: sie ist die Kante, an der
       Monat, Buchstabe und Thema auf allen Seiten stehen. */
    .it-gruppe-marke {
      width: 108px; flex-shrink: 0; padding-top: 18px; min-width: 0;
      hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere;
      font-weight: 700; font-size: .8125rem; color: var(--text-label);
    }
    .it-faq-fragen { flex: 1; min-width: 260px; display: flex; flex-direction: column; }

    /* ── Eine gemeinsame Innenkante, keine zentrierte Spalte ── ──
       Hier stand "max-width: 900px; margin: 0 auto" mit 51 Pixeln Rand. Die
       Vorgabe vom 20. September setzt es anders: der Inhalt fuellt die Breite
       bis zum rechten Fensterrand, und nichts bekommt auf Seitenebene eine
       max-width. Begrenzt wird nur FLIESSTEXT, ueber 68ch - der Container nie.

       Der Grund ist der Unterschied zwischen Lesbarkeit und Platz: eine
       Zeitleiste, eine Kartenreihe oder eine Tabelle wird durch eine
       Textbreite nicht besser, nur schmaler. Ein Absatz schon.

       --seiten-rand ist die Innenkante und wird von .seitenkopf, .it-leiste
       und .it-fuss fuer ihre randlosen Linien mitbenutzt: sie ziehen sich um
       genau diesen Wert nach aussen und holen ihn als Innenabstand zurueck. */
    .it-wrap {
      --seiten-rand: var(--inhalt-rand);
      padding: 0 var(--seiten-rand) 48px;
    }
    /* ── Die Meldeleiste steht unten, auch wenn die Seite kurz ist ── ──
       Dieselbe Regel wie in der Regie (.wie-seite in regie.css): sticky
       klebt erst, wenn unter der Leiste noch Inhalt kommt, und auf einer
       kurzen Seite, etwa mit abgewaehlten Filtern, stand sie mitten im
       Fenster. Der Bereich ist darum mindestens fensterhoch, und der
       Hinweissatz schiebt sich und die Leiste ans Ende.

       Und unten kein Innenabstand, wo die Leiste steht: sie schliesst am
       Fensterrand ab und nicht 48 Pixel darueber. Seiten ohne Leiste
       (Ueber, Impressum, Datenschutz) behalten ihn. */
    .it-wrap {
      display: flex; flex-direction: column;
      min-height: calc(100vh - var(--haftkante, 61px));
    }
    .it-wrap > .it-fuss { margin-top: auto; }
    .it-wrap:has(> .it-meldeleiste:not([hidden])) { padding-bottom: 0; }
    /* ── Ohne Spalte gibt es nichts, wovon Abstand zu halten waere ── ──
       Die 64 Pixel haben genau einen Grund: links die Trennlinie der
       Menuespalte, rechts derselbe Abstand, damit es nicht schief aussieht.
       Steht keine Spalte da, gibt es keine Linie - und auf einem Handy mit
       375 Pixeln blieben von der Textbreite 247 uebrig.

       Es bleibt bei EINER Innenkante, sie ist nur nicht ueberall gleich gross:
       Titelblock, Filterleiste und Fusszeile rechnen weiter gegen
       --seiten-rand und ziehen mit. Ein zweiter Wert daneben waere die Sorte
       Paar, die auseinanderlaeuft - deshalb steht hier dieselbe Eigenschaft
       und keine neue.

       An der KLASSE und nicht an einer Media Query: die Schwelle von 900
       Pixeln steht in messen() in leiste.js, und eine zweite Stelle mit
       derselben Zahl ist eine, die auseinanderlaeuft. Die Klasse deckt
       ausserdem den zweiten Fall mit ab, den eine Media Query nicht sieht:
       eine losgelassene Spalte auf einem breiten Schirm. */
    body:not(.oeff-spalte-da) .it-wrap {
      --seiten-rand: 20px;
    }

    /* ── Und der Fliesstext laeuft mit ── ──
       Hier stand eine Liste von vierzehn Textkoerpern mit "max-width: 68ch" -
       die eine Stelle, an der die Vorgabe doch begrenzt. Sie ist weg, weil der
       Betreiber sie am 20. September gesehen und abgelehnt hat: "die saetze
       werden nicht gestreckt".

       Der Einwand, der zu der Liste gefuehrt hatte, gilt weiter und ist nicht
       widerlegt: gemessen auf /ueber bei 1440 Pixeln sind die Absaetze 1225
       Pixel breit, also weit ueber 150 Zeichen je Zeile. Er ist ueberstimmt,
       nicht entkraeftet - und er steht hier, damit die naechste Sitzung nicht
       glaubt, an diese Frage habe niemand gedacht.

       Was den Ausschlag gab, war nicht die Zeilenlaenge, sondern die Kante:
       der Erklaersatz endete bei zwei Dritteln, die Chipleiste darunter lief
       bis zum Fensterrand. Zwei verschiedene Kanten uebereinander sehen nicht
       nach Absicht aus. */

    /* Eingebettet in die Regie: kein eigener Seitenkopf, keine Sprungmarken,
       kein Fussbereich. Das alles steht dort schon drumherum. */
    /* Titel und Erlaeuterung stehen in der Regie schon im Kopf der Ansicht.
       Der Block hier noch einmal waere derselbe Satz zweimal untereinander. */
    body.eingebettet .seitenkopf,
    body.eingebettet .it-nav,
    body.eingebettet .it-fuss { display: none; }
    /* "max-width: none" stand hier und hob die 900 Pixel der Spalte auf. Die
       gibt es nicht mehr, also hob es nichts mehr auf - eine Zeile, die auf
       eine Grenze zeigt, schickt die naechste Sitzung auf die Suche danach. */
    body.eingebettet .it-wrap { --seiten-rand: 24px; padding: 20px var(--seiten-rand) 40px; }
    body.eingebettet .it-abschnitt { margin-bottom: 0; }


    /* Sprungmarken oben: auf einem Handy ist die Seite lang, und wer einen
       Begriff sucht, will nicht scrollen. */
    .it-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 34px; }
    .it-nav a {
      padding: 8px 16px; border-radius: 999px;
      border: 1px solid var(--border); background: var(--surface);
      font-size: .82rem; font-weight: 700; color: var(--text-secondary);
      text-decoration: none; transition: var(--transition);
    }
    .it-nav a:hover { border-color: var(--lpz-base); color: var(--lpz-base); }
    /* Wo man ist: gefuellt statt umrandet. Ohne das sehen alle sieben Punkte
       gleich aus, und die Leiste sagt nur, was es gibt - nicht, wo man steht. */
    .it-nav a.aktiv {
      background: var(--lpz-base); border-color: var(--lpz-base); color: var(--auf-akzent);
    }

    .it-abschnitt { margin-bottom: 48px; scroll-margin-top: 20px; }
    /* Ein Pruefdatum unter einer Liste - bei den Demos, wo es um fremde
       Dienste geht, die sich jederzeit aendern koennen. */
    .it-stand { margin-top: 14px; font-size: .8rem; color: var(--text-muted); }

    /* Ueberzeile, Frage, Erlaeuterung stehen jetzt unter .seitenkopf in
       style.css - ein Regelsatz fuer alle Seiten, siehe dort. */

    .it-gruppe-titel {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .09em; color: var(--lpz-base);
      margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light);
    }


    /* Der Kalender-Knopf ist ein Umriss und keine Flaeche - er ist ein Angebot
       neben der Veranstaltung, nicht der Hauptweg.

       .it-termin-fuss stand hier und fasste Quelle und Kalender in eine Zeile.
       Seit dem 21. September steht die Quelle im Text und der Knopf rechts
       daneben, also gibt es die Zeile nicht mehr. Eine Regel ohne Element
       schickt die naechste Sitzung auf die Suche danach. */
    .it-termin-kalender {
      padding: 6px 13px; border-radius: 999px;
      background: var(--surface); border: 1px solid var(--border-bedien);
      font-family: inherit; font-size: var(--gr-meta); font-weight: 700;
      color: var(--text); cursor: pointer;
      transition: border-color .15s, color .15s;
    }
    .it-termin-kalender:hover { border-color: var(--akzent); color: var(--akzent); }

    /* ── Ein Begriff im Fliesstext ── ──
       Blaue Schrift und eine gepunktete Unterlinie, wie in der Vorgabe
       (HANDOFF, Abschnitt 9). Kein Knopf-Aussehen: er steht mitten im Satz,
       und eine Pille darin risse die Zeile auseinander. Die gepunktete Linie
       sagt trotzdem "hier ist mehr" und unterscheidet ihn von einem Link, der
       die Seite verlaesst. */
    .it-begriff-zeiger {
      background: none; border: none; padding: 0;
      font: inherit; color: var(--akzent); cursor: help;
      text-decoration: underline dotted; text-underline-offset: 3px;
    }
    .it-begriff-zeiger:hover { color: var(--akzent-hover); text-decoration-style: solid; }

    /* Die Karte dazu. Sie liegt ueber dem Inhalt, weil daneben auf einem Handy
       kein Platz ist. */
    .it-begriff-karte {
      position: fixed; z-index: 260; width: min(320px, calc(100vw - 16px));
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 16px;
      box-shadow: 0 8px 24px rgba(16, 20, 24, .10);
    }
    .it-begriff-karte-kopf { display: flex; align-items: baseline; gap: 8px; }
    .it-begriff-karte-name { font-size: var(--gr-text); font-weight: 700; color: var(--text-stark); }
    .it-begriff-karte-kurz {
      font-family: var(--schrift-mono); font-size: var(--gr-meta); color: var(--text-muted);
    }
    .it-begriff-karte-zu {
      margin-left: auto; background: none; border: none; cursor: pointer;
      font-size: 1.2rem; line-height: 1; color: var(--text-muted); padding: 0 2px;
    }
    .it-begriff-karte-zu:hover { color: var(--text-stark); }
    .it-begriff-karte-text {
      margin: 8px 0 10px; font-size: var(--gr-meta); line-height: 1.55;
      color: var(--text-secondary);
    }
    .it-begriff-karte-mehr { font-size: var(--gr-meta); font-weight: 700; color: var(--akzent); }

    /* ── Der Ausklapper ── ──
       Die Vorgabe (HANDOFF, Abschnitt 6.5): ein Knopf ueber die volle Breite,
       Titel und Zaehler links, das Zeichen rechts, darunter derselbe
       Listenbaustein.

       Ein <details> und kein eigener Knopf mit Umschalter: der Browser kann
       das, er sagt es einem Vorleseprogramm richtig, und er behaelt den
       Zustand beim Suchen im Text. Ein nachgebauter Umschalter waere drei
       Zeilen Code fuer etwas, das schon da ist, und zwei davon waeren die
       Stellen, an denen aria-expanded vergessen wird.

       Die Zahl steht in Mono: sie ist eine Angabe, kein Wort. */
    .it-ausklapper { margin-top: 12px; }
    .it-ausklapper-kopf {
      list-style: none; cursor: pointer;
      display: flex; align-items: baseline; gap: 10px;
      padding: 16px 18px; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border);
      transition: border-color .15s;
    }
    .it-ausklapper-kopf::-webkit-details-marker { display: none; }
    .it-ausklapper-kopf:hover { border-color: var(--border-bedien-hover); }
    .it-ausklapper-titel { font-size: var(--gr-text); font-weight: 700; color: var(--text-stark); }
    .it-ausklapper-was { font-size: var(--gr-meta); color: var(--text-meta); }
    .it-ausklapper-zahl {
      margin-left: auto; font-family: var(--schrift-mono);
      font-size: var(--gr-meta); color: var(--text-muted);
    }
    /* Das Zeichen rechts, aus dem Zustand des <details>. Kein eigenes Element:
       ein Pfeil, den man nur ansieht, ist kein Inhalt. */
    .it-ausklapper-kopf::after {
      content: "\25be"; margin-left: 12px; color: var(--text-muted);
      transition: transform .15s;
    }
    .it-ausklapper[open] .it-ausklapper-kopf::after { transform: rotate(180deg); }
    .it-ausklapper-inhalt { padding-top: 4px; }
    @media (prefers-reduced-motion: reduce) {
      .it-ausklapper-kopf::after { transition: none; }
    }

    /* ── Das Grundmuster aller Inhaltslisten ── ──
       Die Gestaltungsvorgabe ist hier ausdruecklich: "kein <ul>, keine Karten,
       sondern article-Reihen mit padding: 22px 0 und 1px-Trennlinie"
       (HANDOFF, Abschnitt 2). Vorher war jeder Eintrag eine weisse Karte mit
       Rahmen, Radius und Schatten beim Ueberfahren.

       Der Grund, warum das besser ist, steht nicht in der Vorgabe, aber er
       traegt sie: ein Rahmen sagt "hier ist ein eigenes Ding". Bei sechzehn
       Meldungen untereinander sagen sechzehn Rahmen sechzehnmal dasselbe, und
       das Auge zaehlt Kaesten statt zu lesen. Eine Trennlinie sagt nur
       "hier faengt die naechste an" - das ist die ganze Auskunft, die eine
       Liste braucht.

       Die Vorgabe loest die letzte Linie mit einer Hilfsmethode in JavaScript
       ("addRow"), weil sie keine Stilblaetter hat. Wir haben welche, also
       macht es :last-child - eine Regel statt einer Schleife.

       Der Anker bleibt ein Block und faerbt beim Ueberfahren nur den Titel:
       eine ganze Reihe einzufaerben waere wieder eine Karte, nur ohne Rahmen. */
    .it-reihe {
      display: block; text-decoration: none;
      padding: 22px 0;
      border-bottom: 1px solid var(--border-light);
      background: none; border-radius: 0;
    }
    .it-reihe:last-child { border-bottom: none; }
    /* .it-news-titel steht hier nicht mehr: die Meldungszeile ist seit dem
       21. September ein <article> mit zwei Verweisen darin, also greift
       a.it-reihe:hover nie. Der Titel bringt sein eigenes :hover mit. */
    a.it-reihe:hover .it-pub-titel,
    a.it-reihe:hover .it-lsp-titel,
    a.it-reihe:hover .it-demo-titel { color: var(--akzent-hover); text-decoration: underline; }

    /* Eine Veröffentlichung: Titel als Link, darunter wer und wann, dann zwei
       Sätze - was drinsteht und warum es einen angeht. Das Zweite ist der
       eigentliche Wert: eine Linkliste hat jede Behörde. */
    .it-pub { transition: color .15s; }
    .it-pub-titel {
      font-size: 1.05rem; font-weight: 700; color: var(--lpz-base); line-height: 1.35;
    }
    .it-pub-meta {
      margin-top: 3px; font-size: .78rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary);
    }
    .it-pub-was { margin-top: 10px; font-size: .92rem; line-height: 1.55; color: var(--text); }
    .it-pub-warum {
      margin-top: 6px; font-size: .88rem; line-height: 1.55; color: var(--text-secondary);
    }

    /* Demos: dieselbe Karte wie eine Veroeffentlichung, aber sie fuehrt nicht
       zum Lesen, sondern zum Ausprobieren. Deshalb der Knopf mit dem QR-Code -
       die Dienste laufen auf dem Handy, nicht auf dem Rechner, vor dem man
       gerade sitzt. Der Warnsatz steht mit rotem Rand, weil es fremde
       Testdienste sind, die morgen abgeschaltet sein koennen. */
    .it-demo { display: flex; flex-direction: column; align-items: flex-start; }
    .it-demo-titel {
      font-size: 1.05rem; font-weight: 700; color: var(--lpz-base);
      line-height: 1.35; text-decoration: none;
    }
    .it-demo-titel:hover { text-decoration: underline; }
    .it-demo-was { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: var(--text); }
    /* ── Der Warnsatz traegt die Warnfarbe, nicht Fettschrift ── ──
       Er stand mit orangem Balken da, dann fett in der Textfarbe. Fett allein
       liest sich wie Betonung und nicht wie Vorsicht - und worum es geht, ist
       Vorsicht: fremde Testdienste, die morgen abgeschaltet sein koennen.

       Kein Kasten drumherum, so die Vorgabe vom 21. September. Ein Kasten je
       Eintrag waeren vier Kaesten auf einer Seite mit vier Eintraegen, und
       dann faellt keiner mehr auf. */
    .it-demo-unsicher {
      margin-top: 6px; font-size: 1.03125rem; line-height: 1.5;
      color: var(--lpz-orange-text); text-wrap: pretty;
    }
    /* Die Aufwand-Kennzeichnung: rechtwinklig (Radius 3) und neutral, dieselbe
       Form wie das Status-Schild bei den Pilotprojekten. Nicht als Chip: ein
       Chip sieht aus wie die Filter darueber, und man klickt darauf. */
    .it-demo-aufwand {
      align-self: flex-start; margin-top: 10px;
      display: inline-block;
      font-size: .72rem; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-secondary);
      background: var(--bg-secondary); border: 1px solid var(--border);
      border-radius: 3px; padding: 3px 9px;
    }

    /* Large Scale Pilots: eine Karte je Pilot, wie bei den Demos. Der
       Unterschied steht oben rechts - ob der Pilot noch laeuft. Ein
       abgeschlossenes Konsortium anzuschreiben ist die haeufigste
       Enttaeuschung an diesem Thema, deshalb ist der Zustand kein Nebensatz,
       sondern eine Marke neben dem Namen. */
    .it-lsp { }
    .it-lsp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
    .it-lsp-titel {
      font-size: 1.05rem; font-weight: 800; color: var(--lpz-base);
      line-height: 1.35; text-decoration: none;
    }
    .it-lsp-titel:hover { text-decoration: underline; }
    .it-lsp-name { font-size: .84rem; color: var(--text-muted); }
    /* Laufend ist die Ausnahme und faellt auf, abgeschlossen ist der
       Normalfall und bleibt still. */
    /* ── Die Status-Marke ist eckig ── ──
       Die Gestaltungsvorgabe unterscheidet die Radien nach Bedeutung: 999px
       gehoert Chips und Knoepfen, "3-4px" den Status-Marken, und sie sagt
       auch warum - "absichtlich eckig, damit sie nicht wie Buttons wirken"
       (HANDOFF, Abschnitt 2).

       Hier war die Marke rund wie ein Chip. Neben einer Reihe echter
       Filter-Chips, die man anklickt, sah "Abgeschlossen" aus wie einer davon:
       man klickt darauf und es passiert nichts. Eckig sagt: das ist eine
       Angabe, kein Angebot. */
    .it-lsp-marke {
      margin-left: auto; font-size: .71875rem; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 3px;
      background: var(--bg-tertiary); border: none;
      color: var(--text-muted); white-space: nowrap;
    }
    .it-lsp-marke.laeuft {
      background: var(--akzent-flaeche); color: var(--akzent);
    }
    /* Der Satz, der sagt, worum es geht und warum das eine Kommune angeht.
       Er steht vorn und fett, wie im Beispiel der Vorgabe vom 6. Oktober:
       wer nur ihn liest, weiss, ob er weiterlesen muss. */
    .it-lsp-erklaerung {
      margin: 8px 0 0; font-size: var(--gr-text); line-height: 1.55;
      font-weight: 700; color: var(--text); text-wrap: pretty;
    }
    /* Beschriftung ueber dem Wert, nicht daneben: "Anwendungsfaelle" ist
       lang, und eine Spalte dafuer liesse die kurzen Werte weit rechts
       stehen. Die Beschriftung klein und in Mono, wie im Beispiel. */
    .it-lsp-angaben { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
    .it-lsp-angabe dt {
      font-family: var(--schrift-mono); font-size: var(--gr-meta);
      color: var(--text-muted);
    }
    .it-lsp-angabe dd {
      margin: 1px 0 0; font-size: var(--gr-text); line-height: 1.55;
      color: var(--text-secondary); text-wrap: pretty;
    }
    .it-lsp-angabe dd a { color: var(--lpz-base); font-weight: 700; }
    .it-lsp-quelle { margin-top: 4px; font-size: .84rem; }
    .it-lsp-quelle a { color: var(--lpz-base); font-weight: 700; }

    /* ── News: das Datum fuehrt, und zwar als Spalte ── ──
       Bei einer Nachricht ist das Wann die erste Frage. Es stand als erste
       Zeile ueber dem Titel; dort bildet es keine Spalte, und genau als
       Spalte liest man die Daten einer Liste aus sechzehn Meldungen ab.

       108 Pixel, dieselbe Marke wie der Monat bei den Terminen, der Buchstabe
       im Glossar und das Thema in den FAQs. Eine Zahl fuer vier Stellen. */
    .it-news {
      display: flex; flex-wrap: wrap; gap: 8px 24px;
      transition: color .15s;
    }
    /* In Mono und nicht als Versalien-Schild: es ist eine Datenangabe, und in
       Mono stehen die Ziffern von Zeile zu Zeile untereinander. */
    .it-news-datum {
      width: 108px; flex-shrink: 0;
      font-family: var(--schrift-mono);
      font-size: var(--gr-meta); font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em; color: var(--text-label);
    }
    .it-news-text { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 6px; }
    /* Der Titel einer Meldung ist BLAU, nicht schwarz. Er ist ein Verweis:
       jede Meldung fuehrt auf die Seite, von der sie stammt. Schwarz waere
       die Farbe eines Textes, den man hier liest - und dann klickt niemand. */
    .it-news-titel {
      margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3;
      color: var(--akzent);
    }
    .it-news-titel a { color: inherit; text-decoration: none; }
    .it-news-titel a:hover { text-decoration: underline; }
    .it-news-was {
      margin: 0; font-size: 1.125rem; line-height: 1.58;
      color: var(--text-secondary); text-wrap: pretty;
    }
    .it-news-warum {
      margin: 0; font-size: var(--gr-text); line-height: 1.55;
      color: var(--text-muted); text-wrap: pretty;
    }
    /* Die Quellzeile traegt einen eigenen Verweis. Deshalb ist die Zeile ein
       <article> und kein <a>: ein Link im Link ist kein gueltiges Markup. */
    .it-news-quelle { font-size: .84375rem; color: var(--text-label); }
    .it-news-quelle a { color: var(--akzent); text-decoration: none; }
    .it-news-quelle a:hover { text-decoration: underline; }

    /* ── Termine: Monatsgruppen, kein Kaertchen ── ──
       Hier lief eine senkrechte Zeitschiene mit einem Punkt je Termin, und der
       naechste Termin sass in einem Kasten mit blauem Rahmen. Die Vorgabe vom
       21. September nimmt beides heraus und gliedert ueber Abstand und die
       Monatslinie.

       Der Grund gegen die Linie: sie sagte "es gibt eine Reihenfolge", und das
       sagt eine datierte Liste ohnehin. Sie sagte nicht, in welchem Monat man
       gerade liest - genau das braucht, wer einen Termin einplanen will.

       Der Grund gegen das Kaertchen: es hob den naechsten Termin hervor, indem
       es ihn aus der Liste HERAUSNAHM. Die Marke in der Titelzeile sagt
       dasselbe, ohne die Spalte zu verlassen. */
    .it-monat {
      display: flex; flex-wrap: wrap; gap: 8px 24px;
      padding: 22px 0; border-bottom: 1px solid var(--border-light);
    }
    .it-monat.letzte { border-bottom: 0; }
    /* Sie klebt, anders als die Gruppenmarke der FAQs: eine Monatsgruppe ist
       lang genug, dass man beim Scrollen vergisst, in welchem Monat man ist.
       Die Kante ist gemessen (siehe leisteMessen), nicht die 76 der Vorgabe.

       Ohne Zuschlag, auch nicht um der Luft willen: in einem Streifen, in dem
       nichts klebt, laeuft der Inhalt beim Scrollen sichtbar durch. Derselbe
       Fehler wie bei haftkanteMessen, wo einmal "Kopfhoehe + 14" stand. */
    .it-monat-marke {
      position: sticky; top: calc(var(--haftkante, 60px) + var(--it-leiste-hoehe, 76px));
      align-self: flex-start; padding-top: 2px;
    }
    .it-monat-liste { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 22px; }

    /* Der Kalender-Knopf sitzt rechts und rutscht unter den Text, sobald dem
       links weniger als 340 Pixel bleiben. */
    .it-termin {
      display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start;
    }
    .it-termin-text { flex: 1; min-width: 340px; display: flex; flex-direction: column; gap: 6px; }

    /* Das Datum zuerst, in Mono und grau: beim Ueberfliegen einer Monatsliste
       zaehlt der Tag und nicht der Titel. Vorher stand hier eine blaue
       Versalzeile, die wie eine Rubrik aussah. */
    .it-termin-wann {
      font-family: var(--schrift-mono); font-size: var(--gr-meta);
      font-variant-numeric: tabular-nums; color: var(--text-label);
    }

    /* nowrap und nicht wrap: die Marke soll nicht allein auf eine neue Zeile
       fallen. Schrumpfen darf der Titel (flex: 0 1 auto mit min-width: 0),
       denn er bricht intern um.

       flex-start und nicht baseline, obwohl die Vorgabe baseline nennt: ein
       Titel ueber zwei Zeilen richtet seine erste Grundlinie aus, und die
       Marke stand dann mitten im Titel - gemessen bei "OOC #29 - EAA
       Providers: Issuing 101", wo sie zwischen den beiden Zeilen hing. Oben
       ausgerichtet steht sie neben dem Titelblock, wo sie hingehoert. */
    .it-termin-zeile {
      display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 4px 9px;
    }
    .it-termin-titel {
      margin: 0; flex: 0 1 auto; min-width: 0;
      font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--text);
    }
    .it-termin-titel a { color: var(--akzent); text-decoration: none; }
    .it-termin-titel a:hover { text-decoration: underline; }
    .it-termin-marke {
      flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
      font-size: .72rem; font-weight: 700; letter-spacing: .04em;
      color: #fff; background: var(--akzent); border: 1px solid var(--akzent);
      border-radius: 3px; padding: 2px 8px; margin-top: 3px;
    }
    /* Im dunklen Schema hellt --akzent auf #58a6ff auf. Weiss darauf kommt auf
       2,5:1, und das bei 11,5 Pixel fett - also dunkle Schrift. Beide Formen,
       wie style.css es vormacht: die Media Query fuer die Systemeinstellung,
       das Attribut fuer die Wahl am Knopf. */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .it-termin-marke { color: #0b1117; }
    }
    :root[data-theme="dark"] .it-termin-marke { color: #0b1117; }
    /* Drei Textzeilen in abnehmender Staerke: Titel, Metazeile, Quelle. */
    .it-termin-was { font-size: 1.03125rem; line-height: 1.5; color: var(--text-secondary); }
    .it-termin-quelle { font-size: .84375rem; color: var(--text-label); }

    /* Vorbei: zurueckgestuft, aber nicht ueber opacity - das nimmt jeder Zeile
       darin den Kontrast, im dunklen Schema bis auf 2,6:1. */
    .it-termin.vorbei .it-termin-titel,
    .it-termin.vorbei .it-termin-titel a { color: var(--text-secondary); font-weight: 600; }
    .it-termin.vorbei .it-termin-was { color: var(--text-muted); }

    /* Bereichsfilter: eine Reihe Chips. Die Zahl dahinter sagt, wie viel
       dahintersteckt - ein leerer Filter ist sonst eine Sackgasse, die man
       erst nach dem Klick bemerkt. */
    /* Die Filter-Chips, die Listen-Zeile und die Sortierung stehen in
       style.css: die Regie benutzt sie fuer die Vernetzung, und sie laedt
       infothek.css nicht. Dieselbe Ueberlegung wie beim blauen Kasten - was
       beide Teile brauchen, steht einmal und dort. */

    /* Glossar: Suchfeld, dann Begriffe. Die Suche filtert sofort, ohne Knopf -
       niemand tippt einen Begriff und drückt dann noch Enter. */
    /* Suche + Buchstabenreihe bleiben oben stehen (sticky), damit man beim
       Blaettern durch die Begriffe jederzeit suchen und springen kann. */
    /* ── Die Namensformen neben dem Begriff ── ──
       Blau und fett, nicht grau und kursiv. Sie waren das einmal und wurden
       uebersehen: die englische Entsprechung ist fuer jemanden, der eine
       englische Spezifikation neben sich liegen hat, die wichtigste Angabe der
       Zeile.

       Kuerzel in Mono ("mono"), Begriffe in der Fliesschrift: ein Kuerzel
       liest man Zeichen fuer Zeichen, und genau dafuer ist die Monoschrift in
       dieser Plattform da. */
    .it-begriff-form {
      font-size: 1.0625rem; font-weight: 700; color: var(--akzent);
      /* Wie beim Begriff daneben: ohne die beiden sprengt ein langes Wort
         ("Senior Officials Group Information Systems Security") die Reihe.
         probe-responsiv.js haelt es fest. */
      min-width: 0; overflow-wrap: anywhere;
    }
    .it-begriff-form.mono {
      font-family: var(--schrift-mono); font-size: .9375rem; font-weight: 500;
      white-space: nowrap;
    }
    /* Die Quelle steht klein unter der Erklaerung. Kurzform und verlinkt, kein
       Volltitel: "eIDAS 2.0, Art. 5a" sagt einem Rechtsamt genug, um
       nachzuschlagen. */
    .it-begriff-quelle {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
      font-size: .84375rem; margin-top: 2px;
    }
    .it-begriff-quelle > span { color: var(--text-label); }
    .it-begriff-quelle a { font-weight: 700; color: var(--text-secondary); }
    .it-begriff-quelle a:hover { color: var(--text-stark); }

    /* ── Das Register: eckig und Mono, nicht rund wie ein Chip ── ──
       Es wird bewusst anders gesetzt als die Chips der anderen Seiten. Ein
       Chip waehlt einen Inhalt aus, ein Buchstabe springt in eine Liste - und
       die Frage, ob der Schalter rechts ("A bis Z") dasselbe tut, war der
       Grund, aus dem die Leiste im September einmal ganz verschwunden ist.
       Verschiedene Form, verschiedene Stelle, verschiedene Sache. */
    .it-abc {
      display: flex; flex-wrap: wrap; gap: 6px;
      flex: 1 1 240px; min-width: 240px;
    }
    .it-abc-knopf {
      min-width: 32px;
      font-family: var(--schrift-mono); font-size: .8125rem; font-weight: 500;
      color: var(--text-secondary);
      background: var(--flaeche-still, #eef1f5); border: none; border-radius: 8px;
      padding: 6px 9px; cursor: pointer;
      transition: background-color .15s, color .15s;
    }
    .it-abc-knopf:hover { color: var(--text-stark); }
    .it-abc-knopf.aktiv { background: var(--signal); color: var(--signal-text); }
    /* ".it-suche-schmal" stand hier und ist nach style.css gewandert: die
       Regie laedt infothek.css nicht, und ihre Werkzeug-Auslage braucht
       dasselbe Feld. Dieselbe Lage wie bei den Filter-Chips und der
       Titelkarte, beide aus demselben Grund schon einmal umgezogen. */

    .it-glossar-fix {
      position: sticky; top: 0; z-index: 20;
      background: var(--bg-secondary);
      padding: 12px 0 10px; margin-bottom: 8px;
    }
    .it-glossar-fix .it-suche { margin-bottom: 12px; }
    .it-suche { margin-bottom: 18px; }
    .it-suche input {
      width: 100%; padding: 13px 16px; border-radius: 12px;
      border: 1px solid var(--border); background: var(--bg); color: var(--text);
      font-family: inherit; font-size: 1rem;
    }
    .it-suche input:focus { outline: none; border-color: var(--lpz-base); }
    .it-treffer { margin-top: 8px; font-size: .8rem; color: var(--text-muted); }

    /* Buchstabenreihe ueber dem Glossar. Klein und ruhig: sie ist ein Register,
       kein Bedienelement, das um Aufmerksamkeit bittet. */
    /* Die Regeln der Buchstabenleiste sind mit ihr weg. Eine Regel ohne
       Element schickt die naechste Sitzung auf die Suche danach. */

    /* Buchstaben-Ueberschrift ueber jeder Gruppe. Sie ist das Ziel des Sprungs
       und braucht Luft darueber, damit sie nicht unter der Fensterkante klebt. */
    /* Der Rueckweg aus dem Glossar in die FAQ. Klein und blau, ueber dem
       Titelblock: er ist kein Teil der Seite, sondern ein Hinweis, wie man
       hergekommen ist. */
    .it-zurueck {
      display: inline-block; margin: 0 0 10px;
      font-size: .875rem; font-weight: 700; color: var(--lpz-base);
      text-decoration: none; cursor: pointer;
    }
    .it-zurueck:hover { text-decoration: underline; }
    .it-zurueck[hidden] { display: none; }

    .it-buchstabe {
      font-size: 1.1rem; font-weight: 800; color: var(--lpz-base);
      margin: 22px 0 10px; padding-bottom: 4px;
      border-bottom: 1px solid var(--border-light);
      scroll-margin-top: 120px;
    }
    .it-buchstabe:first-child { margin-top: 0; }

    .it-begriff { }
    /* ── Begriff, Kuerzel, Englisch in einer Zeile ── ──
       "min-width: 0" an beiden Kindern, und das ist kein Zierrat: ein
       Flex-Kind hat von sich aus "min-width: auto" und kann deshalb NICHT
       unter die Breite seines laengsten Wortes schrumpfen. "Anonymous
       Credentials" schob damit bei 320 Pixeln Fensterbreite bis 335 hinaus,
       und die ganze Seite liess sich seitlich schieben. Der Umbruch im Wort
       kommt dazu, weil ein einzelner langer Fachbegriff sonst dasselbe tut. */
    .it-begriff-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
    .it-begriff-name {
      font-size: 1.25rem; font-weight: 700; color: var(--text-stark);
      min-width: 0; overflow-wrap: anywhere;
    }
    /* Hier stand ".it-begriff-kurz": eine graue Versalienzeile neben dem
       Begriff, fuer das eine Feld "kurz", das es nicht mehr gibt. Was dort
       stand, verteilt sich seit dem 20. September auf bis zu drei
       Namensformen - siehe .it-begriff-form weiter oben. */
    .it-begriff-text { margin-top: 8px; font-size: .92rem; line-height: 1.6; color: var(--text-secondary); }
    /* ── Der Leerzustand ── ──
       Die Vorgabe (HANDOFF, Abschnitt 6.4) beschreibt ihn als weisse Karte,
       zentriert, mit einer fetten Zeile und einer Erklaerzeile darunter. Der
       gestrichelte Rahmen bleibt ihm: er ist das Zeichen fuer "hier koennte
       etwas stehen" und unterscheidet ihn von einer Karte, in der wirklich
       etwas steht.

       Zwei Zeilen und nicht eine: die fette sagt, WAS los ist, die zweite,
       was man tun kann. Ein einzelner Satz muss beides leisten und leistet
       meist nur das erste - und dann steht der Leser vor einer leeren Liste
       und weiss nicht, ob er etwas falsch gemacht hat. */
    .it-leer {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; min-height: 200px;
      padding: 32px 24px; text-align: center;
      background: var(--surface);
      border: 1px dashed #c9ced6; border-radius: 12px;
      color: var(--text-muted); font-size: var(--gr-text);
    }
    .it-leer-was { font-weight: 700; font-size: var(--gr-eintrag); color: var(--text-stark); }
    .it-leer-tun { max-width: 46ch; line-height: 1.55; }
    /* Nur die News haben ihn. Ein Vollknopf und kein Umriss: er ist das
       Einzige, was man in einem leeren Zustand tun kann, und ein Umriss in
       einem gestrichelten Kasten sieht aus wie noch ein Rahmen. */
    .it-leer-knopf {
      margin-top: 6px;
      font-family: inherit; font-size: var(--gr-meta); font-weight: 700;
      color: #fff; background: var(--akzent); border: 1px solid var(--akzent);
      border-radius: 999px; padding: 8px 16px; cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .it-leer-knopf:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .it-leer-knopf { color: #0b1117; }
    }
    :root[data-theme="dark"] .it-leer-knopf { color: #0b1117; }

    /* Häufige Fragen: Frage anklicken, Antwort klappt auf. Acht ausgeschriebene
       Antworten untereinander waeren eine Textwand, und wer eine Frage hat,
       sucht eine bestimmte. */
    /* ── Keine Kaertchen, eine Linie zwischen den Fragen ── ──
       Hier war jede Frage ein weisses Kaertchen mit Rahmen und Radius 14. Die
       Vorgabe vom 20. September macht daraus eine Liste: Trennlinie zwischen
       den Fragen, die letzte ohne. Der Grund ist die Gruppe darum - sieben
       Gruppen mit je ein bis drei Kaertchen sind zwei Gliederungen
       uebereinander, und die Kaertchen gewinnen optisch gegen die
       Gruppennamen, die die eigentliche Ordnung tragen. */
    .it-faq { border-bottom: 1px solid var(--border-light); }
    .it-faq:last-child { border-bottom: none; }
    .it-faq-frage {
      list-style: none; cursor: pointer;
      padding: 16px 0; font-size: 1.03125rem; font-weight: 700; color: var(--text-stark);
      display: flex; align-items: baseline; gap: 14px;
    }
    .it-faq-frage::-webkit-details-marker { display: none; }
    /* Der Pfeil steht RECHTS und dreht sich beim Aufklappen. Er stand links
       als Plus und Minus; die Vorgabe nennt das Dreieck, und es sagt mehr:
       ein Plus koennte auch "hinzufuegen" heissen. */
    .it-faq-frage::after {
      content: "\25be"; order: 2; flex-shrink: 0;
      color: var(--text-secondary); font-size: .875rem;
    }
    .it-faq[open] .it-faq-frage::after { content: "\25b4"; }
    .it-faq-frage > * { flex: 1; min-width: 0; }
    .it-faq-frage:hover { color: var(--lpz-base); }
    .it-faq-antwort { padding: 0 0 18px; }
    /* Die Antwort ist GROESSER gesetzt als die Frage: sie ist der Lesetext,
       die Frage nur ihre Aufschrift. */
    .it-faq-antwort p { font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary); }
    .it-faq-link { margin-top: 8px; }
    .it-faq-link a { color: var(--lpz-base); font-weight: 700; }

    /* Anschrift am Ende des Über-Teils. Eine Zeile je Angabe, ohne Kursive:
       eine Adresse liest man von oben nach unten. */
    .it-anschrift {
      display: flex; flex-direction: column; gap: 2px;
      margin-top: 24px; padding-top: 18px;
      border-top: 1px solid var(--border-light);
      font-style: normal; font-size: .9rem; color: var(--text-secondary);
    }
    /* Adresse und E-Mail sind zwei Angaben mit Beschriftung. Beide beginnen an
       derselben Kante, damit man von "Adresse" zu "E-Mail" nach unten liest und
       nicht nach links sucht. */
    .it-anschrift-zeilen { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
    .it-anschrift-kontakt { display: flex; flex-direction: column; gap: 3px; }
    .it-anschrift-zeile { display: flex; flex-direction: column; gap: 2px; }
    .it-anschrift-art {
      font-size: .74rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary);
    }
    .it-anschrift a { color: var(--lpz-base); }

    /* Über: Fließtext, dazu die Logos. Keine Karten, es ist ein Absatz und
       keine Liste. */
    /* Die Abschnitte der Textseiten stehen mit Abstand untereinander, und
       die Ueberschrift klebt an ihrem Absatz statt in der Mitte zu haengen. */
    .it-ueber { display: flex; flex-direction: column; gap: 4px; }
    .it-ueber > div + div { margin-top: 26px; }
    .it-ueber > .it-ueber-ein + .it-ueber-ein,
    .it-ueber > div + .it-ueber-ein { margin-top: 0; }
    .it-ueber-titel {
      margin: 0 0 6px; font-size: 1.1875rem; font-weight: 700;
      line-height: 1.3; color: var(--text-stark);
    }
    .it-ueber-titel-h3 { font-size: 1.0625rem; }
    /* Eine untergeordnete Ueberschrift braucht Luft nach oben, sonst klebt sie
       am Absatz darueber und sieht aus, als gehoere sie zu ihm. */
    .it-ueber > .it-ueber-ein { margin-top: 18px; }
    .it-ueber p { font-size: .95rem; line-height: 1.65; color: var(--text); margin-bottom: 14px; }
    .it-ueber a { color: var(--lpz-base); }
    .it-ueber-link { display: block; margin-top: -6px; margin-bottom: 14px; font-size: .92rem; }
    /* Eingerueckt: der Absatz haengt am darueber. Nur durch den Einzug, ohne
       Linie - der Einzug allein sagt die Stufe schon. */
    .it-ueber-ein { margin-left: 26px; }
    /* Der Wortlaut der Nennung: zum Markieren und Kopieren, nicht zum Klicken. */
    .it-wortlaut {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      margin: -4px 0 16px; padding: 12px 14px;
      background: var(--bg-secondary); border: 1px solid var(--border);
      border-radius: 10px;
    }
    .it-wortlaut code {
      flex: 1; min-width: 220px;
      font-family: var(--schrift-mono);
      font-size: .86rem; line-height: 1.5; color: var(--text);
      /* Auswaehlbar und umbruchfaehig: die Zeile ist lang, und auf einem Handy
         soll sie nicht seitlich verschwinden. */
      user-select: all; word-break: break-word;
    }
    .it-wortlaut-kopie {
      flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
      border: 1px solid var(--border); background: var(--surface);
      font: inherit; font-size: .8rem; font-weight: 700;
      color: var(--text-secondary); cursor: pointer; transition: var(--transition);
    }
    .it-wortlaut-kopie:hover { border-color: var(--lpz-base); color: var(--lpz-base); }

    /* ── Zwei Logos, je 200 mal 72, 40 Pixel dazwischen ── ──
       Vorgabe vom 4. Oktober. Die Flaeche ist fest und das Bild passt sich
       hinein (object-fit: contain): ein Wappen und eine Wortmarke haben ganz
       verschiedene Seitenverhaeltnisse, und mit einer festen Flaeche stehen
       sie trotzdem gleich gross da. Auf schmalen Fenstern untereinander. */
    .it-logos { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; margin-top: 18px; }
    @media (max-width: 600px) { .it-logos { flex-direction: column; align-items: flex-start; gap: 16px; } }
    .it-logo {
      padding: 16px 22px; border-radius: 12px;
      /* Immer weiss, auch im dunklen Schema: die Marken sind schwarz gezeichnet
         und waeren auf dunklem Grund nicht zu sehen. Ein Logo ist keine
         Oberflaeche, die man umfaerben darf. */
      background: #ffffff; border: 1px solid var(--border-light);
      display: flex; align-items: center; justify-content: center;
    }
    /* Hier standen zwei Grenzen (Hoehe 76, Breite 260), weil ein Wappen von
       der Hoehe und eine Wortmarke von der Breite begrenzt wird. Die feste
       Flaeche mit object-fit loest dasselbe mit einer Zahl. max-width: 100%
       bleibt: gemessen bei 320 Pixeln stand ein festes Logo sonst ueber den
       Rand hinaus. */
    .it-logo img { width: 200px; height: 72px; max-width: 100%; object-fit: contain; display: block; }
    /* Fehlt die Datei, steht der Name da. Ein leerer Kasten waere schlimmer als
       ein ehrlicher Platzhalter. */
    .it-logo-platz { display: none; font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
    .it-logo.fehlt { border-style: dashed; background: transparent; }
    .it-logo.fehlt img { display: none; }
    .it-logo.fehlt .it-logo-platz { display: block; }

    .it-offen {
      margin-bottom: 22px; padding: 14px 18px; border-radius: 6px;
      border: 1px solid var(--lpz-orange); background: var(--lpz-orange-lightest);
      color: var(--text); font-size: .9rem; line-height: 1.55;
    }
    .it-offen strong { display: block; margin-bottom: 3px; color: var(--lpz-orange-text); }

    /* Die Linie laeuft von Fensterkante zu Fensterkante, der Text bleibt auf
       der Innenkante: das ist das Muster der Vorgabe, dieselben Werte wie am
       Titelblock. Der Abstand nach unten sitzt an .it-wrap und nicht hier -
       sonst haetten Seiten ohne Fusszeile unten keine Luft. */
    /* Die Fusszeile steht in style.css, aus demselben Grund wie der
       Melde-Dialog: die Werkzeuge-Ansicht der Regie hat dieselbe, und die
       Regie laedt infothek.css nicht. */

    /* ── Teilen im Seitenkopf ── */
    /*
       Der Knopf sitzt rechts oben im Kopf, auf Hoehe des Titels - so wie in der
       Regie neben der blauen Abschnittszeile. Absolut positioniert und nicht als
       Flex-Nachbar des Titels: der Titel darf ueber die ganze Breite umbrechen,
       und ein Knopf in derselben Zeile haette ihm bei langen Fragen den Platz
       genommen.

       position: relative steht hier und nicht bei .seitenkopf in style.css:
       diese Datei laedt nur der informative Teil. Die Wissensseite benutzt
       dieselbe Klasse und soll sich davon nichts einfangen.

       Er klappt mit dem Kopf ein (max-height am .seitenkopf, overflow: hidden)
       und ist damit weg, sobald gescrollt wird - dieselbe Bewegung wie der Rest
       des Kopfes. */
    .seitenkopf { position: relative; }
    /* Platz fuer den Knopf, damit der Titel nicht darunter laeuft. Bei den
       heutigen zehn Fragen bliebe bei 375 Pixeln noch 34 Pixel Luft - das ist
       kein Abstand, das ist Glueck. Eine Frage mehr, und die letzte Zeile
       verschwindet halb hinter dem Knopf, ohne dass eine Probe anschlaegt. */

    /* Auf der Hoehe zwischen Ueberzeile und Frage. Gemessen stand die Mitte des
       Knopfes bei 161 und das Band zwischen den beiden bei 119: der Knopf sass
       neben der Frage und sah aus wie etwas, das zu ihr gehoert. Er gehoert
       zur Seite, und die Seite fangt mit der Ueberzeile an.
       top: 0 statt einer gerechneten Zahl - der Knopf ist 38 hoch, seine Mitte
       liegt damit einen Pixel unter der Bandmitte. Naeher als jede Zahl, die
       beim naechsten Schriftwechsel falsch wird. */
    /* ── Der Teilen-Knopf ── ──
       Kein "position: absolute" mehr: er ist das rechte Kind der Flex-Reihe,
       die die Titelkarte ist. Absolut lag er in der Ecke, und die Ueberschrift
       brauchte dafuer einen rechten Innenabstand - zwei Zahlen, die
       zusammenpassen mussten und es bei jeder Schriftaenderung neu tun.

       Und er traegt sein Wort. Ein Zeichen allein sagt nicht, was passiert:
       drei verbundene Punkte heissen auf dem einen Geraet "teilen", auf dem
       anderen "Netzwerk". Die Vorlage schreibt "Teilen" daneben, und das ist
       auch die barrierefreie Loesung - ein Knopf, dessen Name man sieht,
       braucht kein aria-label, das etwas anderes sagt als die Oberflaeche. */
    .seitenkopf-teilen {
      flex-shrink: 0; margin-top: -2px;
      display: inline-flex; align-items: center; gap: 8px;
      border-radius: 999px; padding: 8px 15px;
      background: var(--surface); border: 1px solid var(--border-bedien);
      font-family: inherit; font-size: .84375rem; font-weight: 700;
      color: var(--text-secondary); cursor: pointer;
      transition: border-color .15s, color .15s;
    }
    .seitenkopf-teilen:hover { border-color: var(--border-bedien-hover); color: var(--text-stark); }
    /* Kurz nach dem Klick. Kein Text daneben: der Knopf ist 38 Pixel breit, und
       ein Wort haette den Titel verschoben. Was passiert ist, sagt der
       Tooltip - und fuer ein Vorleseprogramm das aria-label. */
    .seitenkopf-teilen.kopiert { border-color: var(--akzent); color: var(--akzent); }

    @media (max-width: 640px) {
      /* Hier stand ".it-wrap { --seiten-rand: 16px; padding: 26px ... 60px }".
         Beides ist weg, und zwar aus zwei Gruenden.

         Die 16 Pixel waren eine zweite Innenkante. Die Vorgabe kennt genau
         eine, und alles rechnet gegen sie: Titelblock, Filterleiste und
         Fusszeile ziehen sich um --seiten-rand nach aussen. Ein zweiter Wert
         unterhalb von 640 Pixeln heisst nicht "etwas enger", sondern dass
         diese drei auf dem Handy gegen eine andere Zahl rechnen als der
         Inhalt - genau die Sorte Paar, die auseinanderlaeuft.

         Die 26 Pixel oben und 60 unten waren die Reste der zentrierten
         Spalte. Oben faengt jetzt der Titelblock an, und der bringt seine
         zwei Pixel selbst mit; unten stehen 48 an einer Stelle. */
      /* Der Knopf rutscht auf die Hoehe der Bereichszeile, wo noch Platz ist. */
      .seitenkopf-teilen { padding: 7px 12px; }
    }


    /* Im Suchblock des Glossars steht die Zeile dichter: dort folgt gleich das
       Alphabet zum Hinspringen, und zwei volle Abstaende hintereinander
       liessen die Suche vom Register abreissen. */
    .it-leiste-glossar { margin-bottom: 6px; }

/* ── Meilensteine ────────────────────────────────────────────────────────── */
/*
   Eine Zeitleiste, keine Liste mit Aufzaehlungszeichen: der senkrechte Strich
   traegt die Aussage, dass die Etappen aufeinander folgen. Deshalb <ol> und
   nicht <ul> - fuer ein Vorleseprogramm ist die Reihenfolge der Inhalt.
*/

/* Die Legende klebt unter dem Kopf, mit denselben Werten wie die Filterreihen
   der anderen Seiten (.it-leiste). Wer in der Mitte der Liste steht, braucht
   sie dort und nicht nur am Anfang. */
.ms-legende {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 22px;
  position: sticky; top: var(--haftkante, 58px); z-index: 130;
  background: var(--bg-secondary);
  box-shadow: 0 1px 0 var(--border);
  /* Dieselben Werte wie .it-leiste, und aus demselben Grund: sie haftet, liegt
     beim Scrollen also ueber dem Inhalt, und ihr Grund muss die ganze Breite
     decken. Endete er an der Innenkante, liefe die Zeitleiste in den zwanzig
     Pixeln daneben unter ihr durch. */
  margin: 0 calc(-1 * var(--seiten-rand)) 34px;
  padding: 12px var(--seiten-rand);
}
.ms-legende-teil { display: inline-flex; align-items: baseline; gap: 8px; }
.ms-legende-wort {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
}
/* Hier stand hinter jedem Wort ein Satz ("Liegt hinter uns."). Seit dem
   6. Oktober nur noch das Wort: vier Saetze in einer klebenden Leiste waren
   eine zweite Liste ueber der ersten. Die Erklaerung steht weiter in
   meilensteine.js (erklaerung), falls sie anderswo gebraucht wird. */

.ms-liste { list-style: none; margin: 0; padding: 0; }
/* ── Die Linie gehoert der Etappe, nicht der Liste ── ──
   Hier lief EIN Strich ueber die ganze Liste (.ms-liste::before, top 8 bis
   bottom 8). Das sieht richtig aus, solange alle Etappen gleich hoch sind:
   die letzte hat aber keinen Innenabstand nach unten, und der Strich lief
   deshalb vom letzten Punkt bis ans Ende ihres Textes - also ins Leere.

   Je Etappe eine eigene Linie, und die der letzten ist durchsichtig. So die
   Vorgabe vom 21. September, und sie hat recht: eine Linie verbindet zwei
   Punkte, und hinter dem letzten gibt es keinen zweiten mehr. */
.ms-etappe { position: relative; padding: 0 0 26px 30px; }
.ms-etappe:last-child { padding-bottom: 0; }
.ms-etappe::before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: -2px;
  width: 1px; background: var(--border);
}
.ms-etappe:last-child::before { background: none; }
/* ── Hohl fuer Kommendes, gefuellt fuer Erledigtes ── ──
   Vorher war jeder Punkt gefuellt und unterschied sich nur in der Farbe. Ein
   gefuellter Punkt liest sich als "abgehakt" - damit sahen die Fristen, die
   noch bevorstehen, aus wie die, die vorbei sind. Die Farbe bleibt, sie sagt
   die Art; die Fuellung sagt den Zeitpunkt. */
.ms-punkt {
  width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  background: var(--surface); border: 2px solid var(--border);
  flex-shrink: 0; display: inline-block;
}
.ms-etappe > .ms-punkt { position: absolute; left: 0; top: 5px; }

.ms-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ms-datum {
  font-family: var(--schrift-mono); font-size: .82rem; font-weight: 500;
  color: var(--text-secondary);
}
.ms-zustand {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.ms-titel { margin: 4px 0 4px; font-size: 1.05rem; line-height: 1.35; }
.ms-folge { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text-secondary); }

/* Die vier Zustaende. Die Farbe ist nie das einzige Merkmal: daneben steht
   immer das Wort, sonst waere die Seite fuer Farbenblinde eine Liste ohne
   Unterscheidung. */
/* Gruen, Blau, Rot, Dunkelgrau: dieselben vier wie in der Zeitschiene der
   Regie (.tl-item in regie.css). Hier standen Grau, Blau, Orange, Grau -
   zwei Zustaende in derselben Farbe, die sich nur in der Fuellung
   unterschieden. */
.ms-done .ms-punkt { background: var(--lpz-green); border-color: var(--lpz-green); }
.ms-upcoming .ms-punkt { border-color: var(--lpz-base); }
.ms-urgent .ms-punkt { border-color: var(--lpz-danger); }
.ms-future .ms-punkt { border-color: var(--text-secondary); }
/* In der Legende steht derselbe Punkt, und dort soll er die FARBE zeigen und
   nicht den Zeitpunkt: alle vier nebeneinander, halb hohl und halb gefuellt,
   waeren eine Legende mit einer zweiten Bedeutung, die sie nicht erklaert. */
.ms-legende-teil .ms-punkt { background: currentColor; border-color: currentColor; }
.ms-legende-teil.ms-done { color: var(--lpz-green); }
.ms-legende-teil.ms-upcoming { color: var(--lpz-base); }
.ms-legende-teil.ms-urgent { color: var(--lpz-danger); }
.ms-legende-teil.ms-future { color: var(--text-secondary); }
/* Das Wort traegt die Farbe seines Punktes. */
.ms-legende-teil .ms-legende-wort { color: inherit; }
.ms-done .ms-zustand { color: var(--lpz-green); }
.ms-upcoming .ms-zustand { color: var(--lpz-base); }
.ms-urgent .ms-zustand { color: var(--lpz-danger); }
.ms-future .ms-zustand { color: var(--text-secondary); }
.ms-upcoming .ms-titel { color: var(--lpz-base); }

/* ── Melde-Dialog ────────────────────────────────────────────────────────── */
/*
   Ein Feld, eine Adresse, ein Haekchen. Er liegt ueber der Seite und nicht
   daneben: wer "Ja" gedrueckt hat, soll nicht erst scrollen, um zu sehen, was
   passiert ist.
*/

/* Der Melde-Dialog steht nicht mehr hier, sondern in style.css: seit die
   Werkzeuge-Ansicht ihn auch bekommt, teilen ihn der informative Teil und die
   Regie - und die laedt infothek.css nicht. Dieselbe Lage wie bei den Chips
   der Vernetzung, die aus demselben Grund umgezogen sind. */

/* ── Zwei Wege aus einer Glossarsuche ── ──
   "Begriff vorschlagen" ist der laute: er steht im Leerzustand, wenn das
   Glossar nichts hat (Vorgabe "Seite Glossar", Abschnitt 7). Nicht
   .it-leer-knopf: der setzt Filter zurueck, und es soll bei einem bleiben
   (siehe probe-aufbau.js). Dieser hier meldet etwas.

   Der Satz zur Plattformsuche ist der leise: ein Link-Knopf. Erst das
   Glossar, dann der Rest. */
.it-leer-vorschlag {
  margin-top: 12px; font-family: var(--schrift); font-size: .9375rem; font-weight: 700;
  color: #fff; background: var(--akzent); border: 1px solid var(--akzent-hover);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
}
.it-leer-vorschlag:hover { background: var(--akzent-hover); }
.it-plattform-weiter { margin: 18px 0 0; }
.it-plattform-suche {
  font-family: inherit; font-size: var(--gr-text); font-weight: 700;
  color: var(--lpz-base); background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
/* Im dunklen Schema hellt --akzent auf, weiss darauf traegt nicht. Derselbe
   Fall wie beim geschlossenen Filter-Knopf in style.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .it-leer-vorschlag { color: #0b1117; }
}
:root[data-theme="dark"] .it-leer-vorschlag { color: #0b1117; }