/* Atkinson Hyperlegible, selbst ausgeliefert (SIL OFL 1.1).
    Warum ausgerechnet die: Sie ist ausdruecklich fuer Menschen mit
    eingeschraenktem Sehvermoegen entworfen -- Zeichen, die sich sonst
    aehneln (I l 1, O 0, b d), sind bewusst unterschiedlich geformt. Bei
    dieser Zielgruppe ist das keine Geschmacksfrage.
    Gleicher Host, also KEIN externer Request: Die Zusage der
    Datenschutzerklaerung ("laedt nichts von fremden Servern") gilt
    unveraendert. Nur der Latin-Schnitt, das reicht fuer Deutsch --
    Umlaute und ss liegen alle in U+0000-00FF.
    font-display:swap: Der Text ist sofort lesbar, die Schrift tauscht
    nach. Besser ein Umbruchsprung als eine leere Seite. */
 @font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;
            font-display:swap;src:url(/schrift/atkinson-400.woff2) format("woff2")}
 @font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;
            font-display:swap;src:url(/schrift/atkinson-700.woff2) format("woff2")}

 @page{size:A4;margin:1.5cm 1.8cm}
 :root{
   --grund:#EFF2ED;
   --flaeche:#FAFBF8;
   --tinte:#132019;
   --leise:#586A61;
   --akzent:#1F5E4F;
   --akzent-weich:#E2EBE5;
   --signal:#A85F16;
   --linie:#D6DDD4;
   --zettel:#F6F1E4;
   --zettel-linie:#E3D9C2;
   --schatten:0 1px 2px rgba(19,32,25,.05), 0 8px 24px -16px rgba(19,32,25,.25);
 }
 @media (prefers-color-scheme: dark){
   :root:not([data-theme="light"]){
     --grund:#0E1412;
     --flaeche:#151E1A;
     --tinte:#E6EDE7;
     --leise:#94A69C;
     --akzent:#74C3A9;
     --akzent-weich:#1B2E27;
     --signal:#E0A768;
     --linie:#25302B;
     --zettel:#1C211B;
     --zettel-linie:#2C332A;
     --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
   }
 }
 :root[data-theme="dark"]{
   --grund:#0E1412;
   --flaeche:#151E1A;
   --tinte:#E6EDE7;
   --leise:#94A69C;
   --akzent:#74C3A9;
   --akzent-weich:#1B2E27;
   --signal:#E0A768;
   --linie:#25302B;
   --zettel:#1C211B;
   --zettel-linie:#2C332A;
   --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
 }

 *{box-sizing:border-box}
 body{
   margin:0;
   background:var(--grund);
   color:var(--tinte);
   font:400 17px/1.65 "Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
   -webkit-font-smoothing:antialiased;
 }
 .huelle{max-width:44rem;margin:0 auto;padding:0 1.4rem 5rem}
 .huelle>*+*,
 article>*+*{margin-top:2.6rem}

 h1,h2,h3{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
          text-wrap:balance;margin:0;letter-spacing:-.015em}
 h1{font-size:2.3rem;font-weight:800;line-height:1.08}
 h2{font-size:1.55rem;font-weight:700;line-height:1.15}
 h3{font-size:1.02rem;font-weight:700;line-height:1.3}
 p{margin:0}
 a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:.18em}
 a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
 strong{font-weight:700}

 .marke{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.72rem;
        letter-spacing:.18em;text-transform:uppercase;color:var(--leise)}
 /* Der Untertitel gehoert semantisch in die h1 (ein Dokument, eine Ueberschrift),
    sieht aber weiter aus wie die Kickerzeile darunter. */
 h1 .marke{display:block;margin-top:.5rem;font-weight:400;letter-spacing:.18em}

 header{padding-top:2.1rem;display:flex;flex-direction:column;gap:1rem}
 .schild{display:flex;align-items:center;gap:.7rem}
 .schild .punkt{width:.62rem;height:.62rem;border-radius:50%;background:var(--signal);flex:none}
 .lede{font-size:1.18rem;line-height:1.5;color:var(--tinte);max-width:34rem}
 .lede em{font-style:normal;background:var(--akzent-weich);padding:.05em .25em;border-radius:.15em}

 section{display:block}
 section>*+*{margin-top:.85rem}
 .kopf{display:flex;flex-direction:column;gap:.35rem}

 .karten{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
 .karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:3px;
        padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;
        box-shadow:var(--schatten)}
 .karte p{font-size:.95rem;color:var(--leise)}

 ol.schnur{list-style:none;margin:0;padding:0 0 0 2.1rem;position:relative}
 ol.schnur li+li{margin-top:1.5rem}
 ol.schnur::before{content:"";position:absolute;left:.42rem;top:.55rem;bottom:.55rem;
                   width:2px;background:linear-gradient(var(--linie),var(--akzent))}
 ol.schnur li{position:relative;display:block}
 ol.schnur li>*+*{margin-top:.3rem}
 ol.schnur li::before{content:"";position:absolute;left:-1.82rem;top:.5rem;
                      width:.72rem;height:.72rem;border-radius:50%;
                      background:var(--grund);border:2px solid var(--akzent)}
 ol.schnur li p{color:var(--leise);font-size:.97rem}
 ol.schnur .schritt{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.7rem;
                    letter-spacing:.16em;text-transform:uppercase;color:var(--akzent)}

 .zettel{background:var(--zettel);border:1px solid var(--zettel-linie);border-radius:2px;
         padding:1.1rem 1.2rem 1.25rem;box-shadow:var(--schatten);
         background-image:repeating-linear-gradient(var(--zettel) 0 1.55rem,var(--zettel-linie) 1.55rem 1.6rem);
         transform:rotate(-.5deg)}
 .zettel h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);
            margin-bottom:.5rem}
 .zettel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;
            font-size:.95rem;line-height:1.6}
 .zettel dt{color:var(--leise);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.8rem}
 .zettel dd{margin:0;font-variant-numeric:tabular-nums}

 ul.punkte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
 /* Zwei Spalten: Punkt, Inhalt. Der Aufzaehlungspunkt ist das ::before und
    damit das erste Grid-Element -- alle echten Kinder muessen deshalb
    ausdruecklich in Spalte 2, sonst faellt das zweite Kind in die 1,1 rem
    schmale erste Spalte und bricht nach jedem Wort um. */
 ul.punkte li{display:grid;grid-template-columns:1.1rem 1fr;
              column-gap:.75rem;row-gap:.15rem;align-items:start}
 ul.punkte li::before{grid-column:1;grid-row:1}
 ul.punkte li>*{grid-column:2}
 ul.punkte li::before{content:"";width:.55rem;height:.55rem;margin-top:.52rem;
                      background:var(--akzent);border-radius:1px}
 ul.punkte b{display:block}
 ul.punkte span{color:var(--leise);font-size:.97rem}

 table{width:100%;border-collapse:collapse;font-size:.89rem}
 .breit{overflow-x:auto}
 th,td{text-align:left;padding:.45rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}
 th{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--leise);font-weight:500}
 td:first-child{white-space:nowrap;font-weight:700}
 td:last-child{color:var(--leise)}

 .ruf{background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--signal);
      border-radius:3px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
 .platzhalter{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.9rem;
              color:var(--signal);border:1px dashed var(--signal);border-radius:2px;
              padding:.35rem .6rem;display:inline-block}
 .still{font-size:.92rem;color:var(--leise)}
 footer{border-top:1px solid var(--linie);padding-top:1.4rem;display:flex;flex-direction:column;gap:.4rem}

 @media (prefers-reduced-motion:no-preference){
   header,section,footer{animation:auf .7s cubic-bezier(.2,.7,.2,1) both}
   section:nth-of-type(1){animation-delay:.06s}
   section:nth-of-type(2){animation-delay:.12s}
   section:nth-of-type(3){animation-delay:.18s}
   @keyframes auf{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
 }
 /* --- Papier ---------------------------------------------------------------
    Alles Druckspezifische steht hier zusammen und NUR hier. Vorher standen die
    Umbruchregeln oben im Stylesheet, ohne @media print: harmlos, aber eine
    spaetere Regel weiter unten (etwa ein display:flex auf .huelle) haette sie
    ausgehebelt, und niemand haette gesehen warum. */
 @media print{
   /* Die Einblendanimation ist beim Drucken gefaehrlich: der Anfangszustand
      ist opacity 0, und ein Druck aus einem Kopflos-Browser trifft sie unter
      Umstaenden mitten im Ablauf -- dann kommen halb durchsichtige oder ganz
      leere Abschnitte aus dem Drucker. */
   header,section,footer{animation:none !important;opacity:1 !important;
                         transform:none !important}
   body{background:#fff;color:#111A15;font-size:10.5pt;line-height:1.5}
   .huelle{max-width:none;padding:0}
   .huelle>*+*{margin-top:0}
   h1{font-size:24pt}
   h2{font-size:14pt}
   h3{font-size:10.5pt}
   .lede{font-size:12pt;max-width:none}
   /* Jeder Abschnitt beginnt auf einer neuen Seite, der erste nicht. */
   section{page-break-before:always;break-before:page}
   section:first-of-type{page-break-before:avoid;break-before:avoid}
   header{page-break-before:avoid}
   footer{page-break-before:avoid;break-before:avoid}
   /* Zusammengehoerendes nicht trennen. */
   .karte,.zettel,ol.schnur li,table,tr,.ruf,.kopf{
     page-break-inside:avoid;break-inside:avoid}
   /* Eine Ueberschrift allein am Seitenfuss ist der haeufigste Druckfehler. */
   h1,h2,h3,.marke{page-break-after:avoid;break-after:avoid}
   p{orphans:3;widows:3}
   /* Schatten kosten Toner und bringen auf Papier nichts; der gedrehte
      Notizzettel steht gerade, sonst schneidet ihn der Rand an. */
   .karte,.zettel,.ruf{box-shadow:none}
   .zettel{transform:none}
   /* Verweise sind auf Papier nicht anklickbar -- also wie Text setzen. */
   a{color:inherit;text-decoration:none}
 }

 /* ---- Ergänzungen Phase 1 (Vorschau) --------------------------------- */
 /* Die Unterzeile der h1 trägt jetzt einen ganzen Satz statt eines Claims.
    Als .marke (Versalien, Mono, 0.72rem) wäre der unlesbar - besonders für
    die Zielgruppe, um die es hier geht. Also eine eigene Klasse. */
 h1 .unterzeile{display:block;margin-top:.65rem;font-size:1.16rem;font-weight:600;
                line-height:1.28;letter-spacing:normal;color:var(--leise)}
 /* Die Statuszeile. Bewusst kein Kasten, keine Farbe, kein Ausrufezeichen -
    sie soll eine Auskunft sein, kein Hinweisschild. */
 .status{font-size:.95rem;line-height:1.55;color:var(--leise);max-width:34rem;
         border-left:2px solid var(--linie);padding-left:1rem}
 @media print{ .status{border-left:1pt solid #999} }

 /* ---- Ergänzungen Phase 2 -------------------------------------------- */
 /* Navigation. Fünf Links, keine Klappmenüs, keine Hamburger-Taste: Bei
    fünf Zielen ist ein Menü, das man erst aufklappen muss, reine
    Zusatzarbeit -- besonders für die Zielgruppe. Umbrechen darf es. */
 /* Navigation. Vorher: Versalien, gesperrt, 0.74rem -- fuenf Punkte
    verschmolzen zu einer grauen Wand, in der die Wortgrenzen verschwanden.
    Auf einer Seite, die ausdruecklich eine Schrift fuer eingeschraenktes
    Sehvermoegen ausliefert, war ausgerechnet die Navigation das am
    schlechtesten lesbare Element.
    Jetzt: gemischte Schreibweise, groesser, ungesperrt, und ein sichtbarer
    Trenner zwischen den Punkten. Die Versalien bleiben den .marke-Kickern --
    das sind kurze Etiketten, keine Bedienelemente. */
 .navi{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 0;
       margin-top:1.05rem;font-size:.95rem;line-height:1.9}
 .navi a,.navi [aria-current]{padding:.1rem 0;border-bottom:1px solid transparent}
 .navi a{color:var(--leise);text-decoration:none}
 .navi a:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
 .navi [aria-current]{color:var(--tinte);border-bottom:1px solid var(--signal);font-weight:700}
 /* Der Trenner ist ein eigenes Element (aria-hidden), kein ::before am Link:
    sonst zieht die Hover-Unterstreichung ihn mit, und Vorleseprogramme lesen
    ihn vor. */
 .navi .trenner{display:inline-block;width:1px;height:.85em;margin:0 .8rem;
                background:var(--linie);vertical-align:-.06em}
 .schild a{text-decoration:none;color:var(--leise);display:flex;align-items:center;gap:.7rem}

 /* Frage-Antwort-Blöcke. <details> spart Platz, ohne etwas zu verstecken:
    Der Text steht im Markup und wird von Suchmaschinen gelesen, auch
    zugeklappt. */
 .frage{border-top:1px solid var(--linie);padding:.85rem 0}
 .frage summary{cursor:pointer;font-weight:700;list-style:none;
                display:flex;justify-content:space-between;gap:1rem}
 .frage summary::-webkit-details-marker{display:none}
 .frage summary::after{content:"+";color:var(--signal);font-weight:400;flex:none}
 .frage[open] summary::after{content:"–"}
 .frage>*+*{margin-top:.6rem}
 .frage p{color:var(--leise);font-size:.97rem;padding-top:.5rem}

 /* Ein Hinweis, der nicht schreit. Für den Satz, den man lesen soll, bevor
    man die Seite als Rechtsberatung missversteht. */
 .hinweis{border:1px solid var(--linie);border-left:3px solid var(--signal);
          border-radius:.35rem;padding:.85rem 1rem;background:var(--flaeche);
          font-size:.94rem;color:var(--leise)}
 .weiter{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.95rem}
 @media print{ .navi,.weiter{display:none} .frage{border-top:1pt solid #ccc}
               .frage summary::after{content:""} }
 /* Hoerprobe. preload="none" steht im Markup: Wer nicht drueckt, laedt nichts.
    Ein Abspieler, nicht drei -- drei nebeneinander laden niemanden zum Hoeren
    ein, man weiss nicht, wo man anfangen soll, und drueckt gar nicht. */
 .hoerprobe{background:var(--flaeche);border:1px solid var(--linie);
            border-radius:.6rem;padding:1.1rem 1.2rem;box-shadow:var(--schatten)}
 .hoerprobe>*+*{margin-top:.7rem}
 .hoerprobe audio{width:100%;max-width:32rem;display:block}
 .hoerprobe .still{margin-top:.5rem}
 @media print{ .hoerprobe audio{display:none} }