/* ============================================================================
   afg.css — die EINE Design-Quelle des AFG-Portals.

   Ausgeliefert an zwei Stellen:
     • PHP-Seiten      → _inc/layout.php (afg_head)
     • statische .html → gate.php injiziert den <link> direkt vor </head>,
                         also NACH dem seiteneigenen <style> → gewinnt die Kaskade.

   Aufbau
     1  Schrift + Tokens (hell)          6  Formularfelder
     2  Dunkel-Tokens                    7  Portal-Rahmen (Topbar, main, Karte, Knopf …)
     3  Alt-Dialekt-Brücke               8  Navigation (früher doppelt gepflegt)
     4  Grundlagen + Lesbarkeit          9  Neue afg-*-Bausteine
     5  Prosa-Rhythmus                  10  Druck / Bewegung

   Konvention (nach dem Vorbild von assets/unterricht.css): neue Klassen tragen
   das Präfix `afg-` und kollidieren damit nicht mit den generischen .card/.grid/
   .box der Altseiten. Farben NUR über Tokens.
   ========================================================================= */

@import url('/fonts/ubuntu.css');

/* ---------- 1 · Tokens (hell) --------------------------------------------- */
:root{
  /* Marke (brand/brand-tokens.css) */
  --afg-green:#01AF51; --afg-green-2:#1FAF51; --afg-green-dark:#017A39;
  --afg-blue:#4F6BFF;  --afg-red:#D62828;     --afg-amber:#A9601A;
  --afg-violet:#6A48E0;

  /* Neutrale Rampe — von dunkelster Schrift zu hellstem Grund */
  --afg-n900:#141B18; --afg-n800:#212925; --afg-n700:#3A443F; --afg-n600:#5A655F;
  --afg-n500:#78837D; --afg-n400:#A3ADA7; --afg-n300:#C9D1CC; --afg-n200:#E3E9E5;
  --afg-n100:#EDF1EE; --afg-n50:#F4F7F5;  --afg-n0:#FFFFFF;

  /* Semantisch — diese Namen benutzt das ganze Portal seit jeher */
  --ink:var(--afg-n900); --ink-2:var(--afg-n700); --gray:var(--afg-n600);
  --mist:#ECF0F5; --white:#FFFFFF; --raise:#F6F8FB;
  --line:#E8EDEF; --line-strong:#CBD4D8; --field-border:#D6DDE1;
  --green:var(--afg-green); --green2:var(--afg-green-2);
  --blue:var(--afg-blue); --red:var(--afg-red);

  /* Akzentflächen (früher als Literale über 34 Dateien verstreut) */
  --ok-bg:#E7F8EE;   --ok-ink:#0A7B3E;   --ok-line:#B6E6C9;
  /* Schrift, die AUF dem Akzent steht. Im Hellen ist Grün dunkel, im
     Dunkeln hell — „weiß" ist deshalb nur die halbe Antwort. */
  --on-green:#FFFFFF;
  --mark-bg:#FFF2A8;  --mark-ink:#2A2400;
  --warn-bg:#FFF5D8; --warn-ink:#7A5E00; --warn-line:#EFDCA0;
  --err-bg:#FDECEC;  --err-ink:#A80D0D;  --err-line:#F6C9C9;
  --info-bg:#EEF2FF; --info-ink:#31489F; --info-line:#CDD7FB;
  --priv-bg:#EFEAFF; --priv-ink:#5B3FD6;

  /* Form */
  --radius-sm:10px; --radius:14px; --radius-lg:18px; --radius-pill:999px;
  /* Schatten tragen, was schwebt — nicht, was liegt. Bis zum 06.09.2026 hatten
     zwölf Kästen Rand UND Schatten: zwei Trennungen für eine Kante, und in der
     Summe der Eindruck von Unruhe. --shadow ist deshalb nur noch eine
     Andeutung (Karten auf farbigem Grund bleiben lesbar); die volle Tiefe hat
     --shadow-lg und gehört Menüs, Dialogen und dem großen Editor. */
  --shadow:0 1px 2px rgba(20,27,24,.04);
  --shadow-lg:0 2px 6px rgba(20,27,24,.06), 0 18px 40px -22px rgba(20,27,24,.45);

  /* Abstände — 4-px-Raster */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;
  /* Der Abstand ZWISCHEN Abschnitten. Er darf größer sein als der Abstand
     innerhalb — sonst verschwimmen sie zu einer Fläche, und genau das war
     der Eindruck: viele Kästen, wenig Ordnung. */
  --sp-abschnitt:clamp(24px, 2.4vw, 40px);

  /* Typografie — Skala im 4-px-Raster, Zeilenhöhen mitgeführt.
     Grundgröße 16→17 px (BITV/WCAG, British-Dyslexia-Empfehlung ≥16 px). */
  --afg-font:'Ubuntu',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --afg-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:12.5px;  --t-sm:14px;   --t-base:clamp(16px,.18vw + 15.4px,17px);
  --t-md:18px;    --t-lg:21px;   --t-xl:25px;
  --t-2xl:30px;   --t-3xl:36px;
  --lh-tight:1.2; --lh-snug:1.35; --lh:1.6;

  /* Lesebreite: 60–75 Zeichen sind der lesefreundliche Korridor. */
  --afg-measure:68ch;

  /* ---- Tokens der statischen Konzeptseiten (zusammengeführt 06.09.2026) ----
     Bis heute trug jede der 21 .html-Seiten ihre eigene Token-Liste — dieselben
     Namen, leicht andere Werte, kein Dunkelmodus, kein Druck. Wer hier etwas
     ändert, änderte es 21-mal oder gar nicht. Diese 18 Tokens gab es nur dort;
     jetzt stehen sie hier, damit die Seiten sie erben statt sie mitzubringen. */
  --afg-grad:linear-gradient(135deg,#1FAF51,#01AF51);
  --green-alt:#1FAF51;
  --green-s:#e6f4ec;  --green-soft:#e6f4ec;
  --blue-s:#eef1ff;   --blue-soft:#eef1ff;
  --red-s:#fde8e8;
  --amber:#FE0000;    --amber-s:#fde8e8;
  --yellow-s:#e3f5ea; --yellow-soft:#e3f5ea;
  --warnbg:#FFF4E0;   --warnink:#8a5a00;
  --critbg:#FDECEC;   --critink:#b40b0b;
  --don-track:#232a33;
  --hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --afg-breit:1100px;
  --afg-schmal:440px;

  color-scheme:light;
}

/* ---------- 2 · Tokens (dunkel) ------------------------------------------- */
/* Drei Wege, damit alles zusammenpasst: Systemeinstellung, ausdrückliche Wahl
   (data-theme) und die historische .dark-Klasse der Altseiten. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --afg-n900:#EAF0EC; --afg-n800:#D3DCD7; --afg-n700:#B3BEB8; --afg-n600:#96A29C;
    --afg-n500:#7E8A84; --afg-n400:#5E6A64; --afg-n300:#3D4844; --afg-n200:#2B3531;
    --afg-n100:#212A26; --afg-n50:#1A221F;  --afg-n0:#151C1A;

    --ink:var(--afg-n900); --ink-2:var(--afg-n700); --gray:var(--afg-n600);
    --mist:#101715; --white:#1A2220; --raise:#212A27;
    --line:#2B3733; --line-strong:#3D4B46; --field-border:#3A4741;
    /* Die zusammengeführten Konzeptseiten-Tokens, dunkel gedacht. Vorher hatten
       die 21 Seiten gar keinen Dunkelmodus — sie leuchteten hell, während das
       Portal ringsum dunkel war. */
    --green-s:#12241a;  --green-soft:#12241a;
    --blue-s:#151d33;   --blue-soft:#151d33;
    --red-s:#2e1618;    --amber-s:#2e1618;
    --yellow-s:#12241a; --yellow-soft:#12241a;
    --warnbg:#2b2313;   --warnink:#e0b866;
    --critbg:#2e1618;   --critink:#f0868b;
    --don-track:#2b3733;
    --green:#4BD68A; --green2:#5FDF9A; --blue:#8FA4FF; --red:#F07A7A;

    --ok-bg:#0F2016;   --ok-ink:#7FE0A3;   --ok-line:#1F7A48;
    --on-green:#08130D;
    --mark-bg:#4A3D00; --mark-ink:#FFE98A;
    --warn-bg:#33280F; --warn-ink:#E6B451; --warn-line:#5C4915;
    --err-bg:#331215;  --err-ink:#FFB4B4;  --err-line:#5A2126;
    --info-bg:#141B2B; --info-ink:#9DB2FF; --info-line:#2B3A72;
    --priv-bg:#20183A; --priv-ink:#B3A3FF;

    --shadow:0 1px 2px rgba(0,0,0,.35);
    --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 20px 44px -20px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"],
.dark:not([data-theme="light"]){
  --afg-n900:#EAF0EC; --afg-n800:#D3DCD7; --afg-n700:#B3BEB8; --afg-n600:#96A29C;
  --afg-n500:#7E8A84; --afg-n400:#5E6A64; --afg-n300:#3D4844; --afg-n200:#2B3531;
  --afg-n100:#212A26; --afg-n50:#1A221F;  --afg-n0:#151C1A;

  --ink:var(--afg-n900); --ink-2:var(--afg-n700); --gray:var(--afg-n600);
  --mist:#101715; --white:#1A2220; --raise:#212A27;
  --line:#2B3733; --line-strong:#3D4B46; --field-border:#3A4741;
  --green:#4BD68A; --green2:#5FDF9A; --blue:#8FA4FF; --red:#F07A7A;

  --ok-bg:#0F2016;   --ok-ink:#7FE0A3;   --ok-line:#1F7A48;
  --on-green:#08130D;
  --mark-bg:#4A3D00; --mark-ink:#FFE98A;
  --warn-bg:#33280F; --warn-ink:#E6B451; --warn-line:#5C4915;
  --err-bg:#331215;  --err-ink:#FFB4B4;  --err-line:#5A2126;
  --info-bg:#141B2B; --info-ink:#9DB2FF; --info-line:#2B3A72;
  --priv-bg:#20183A; --priv-ink:#B3A3FF;

  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 20px 44px -20px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ---------- 3 · Brücke zu den vier Alt-Dialekten --------------------------- */
/* Die 21 statischen Seiten definieren ihre Paletten selbst — in vier zueinander
   inkompatiblen Namensschemata. Wir belegen dieselben Namen mit den neuen Tokens
   neu. Die Helligkeits-Reihenfolge bleibt erhalten, deshalb kippt im Dunkelmodus
   ein Paar wie background:var(--s50) / color:var(--s900) korrekt mit.
   → Kein Eingriff in eine einzige dieser Dateien nötig. */
:root{
  /* Familie A — Graustufen s900…s50 */
  --s900:var(--afg-n900); --s800:var(--afg-n800); --s700:var(--afg-n700);
  --s600:var(--afg-n600); --s500:var(--afg-n500); --s400:var(--afg-n400);
  --s300:var(--afg-n300); --s200:var(--afg-n200); --s100:var(--afg-n100);
  --s50:var(--afg-n50);
  --r:var(--radius);

  /* Familie B — bg/surface/raise/line */
  --bg:var(--mist); --surface:var(--white); --text:var(--ink); --muted:var(--gray);
  --font:var(--afg-font);

  /* Familie C — Altbestand slate-* (plus die Notlösung --yellow) */
  --slate-900:var(--afg-n900); --slate-800:var(--afg-n800); --slate-700:var(--afg-n700);
  --slate-600:var(--afg-n600); --slate-500:var(--afg-n500); --slate-400:var(--afg-n400);
  --slate-300:var(--afg-n300); --slate-200:var(--afg-n200); --slate-100:var(--afg-n100);
  --slate-50:var(--afg-n50);
  --yellow:var(--afg-green);

  /* quer über alle Familien */
  --brand:var(--afg-green);
}

/* ---------- 4 · Grundlagen + Lesbarkeit ------------------------------------ */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--afg-font);
  font-size:var(--t-base);
  line-height:var(--lh);
  color:var(--ink);
  background:var(--mist);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{line-height:var(--lh-tight);text-wrap:balance;color:var(--ink)}
a{color:var(--green)}
a:hover{text-decoration:underline}
b,strong{font-weight:700}
small{font-size:var(--t-xs)}
code,kbd,pre{font-family:var(--afg-mono)}
hr{border:none;border-top:1px solid var(--line);margin:var(--sp-5) 0}

/* Fokus ist Pflicht (WCAG 2.4.7) — nie wegnehmen, überall sichtbar. */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* Zu klein geratene Hilfstexte auf ein lesbares Minimum heben. */
.sub,.hint,.leise,.muted,.small,.foot,.meta{font-size:max(var(--t-sm),.875em)}

/* ---------- 5 · Prosa-Rhythmus --------------------------------------------
   In ~20 Dateien löscht `*{margin:0;padding:0}` jeden Absatzabstand — Fließtext
   klebt dadurch zu einem Block zusammen. Hier gezielt zurückgeholt, begrenzt auf
   Textbereiche, damit Karten- und Kachelraster unberührt bleiben.
   (Hamburger Verständlichkeitsmodell: Gliederung ist nach Einfachheit der
   zweitstärkste Verständlichkeitsfaktor.) ------------------------------------ */
.main p, .wrap p, main p, article p, section > p, .afg-prosa p,
.card > p, .box > p, .afg-karte > p{margin-block:0 .85em}
.main p:last-child, .wrap p:last-child, .card > p:last-child,
.box > p:last-child, .afg-karte > p:last-child, .afg-prosa p:last-child{margin-bottom:0}

.main ul, .main ol, .wrap ul, .wrap ol, article ul, article ol, .afg-prosa ul, .afg-prosa ol{
  margin:0 0 .9em; padding-left:1.35em;
}
.main li, .wrap li, article li, .afg-prosa li{margin-bottom:.3em}
.main li:last-child, .wrap li:last-child, .afg-prosa li:last-child{margin-bottom:0}

.main h2, .wrap h2, article h2, .afg-prosa h2{margin:1.7em 0 .5em}
.main h3, .wrap h3, article h3, .afg-prosa h3{margin:1.4em 0 .4em}
.main h4, .wrap h4, article h4, .afg-prosa h4{margin:1.2em 0 .3em}
.main > h2:first-child, .afg-prosa > h2:first-child,
.main > h3:first-child, .afg-prosa > h3:first-child{margin-top:0}

/* Lesebreite: greift auf zusammenhängenden Fließtext, nicht auf Raster. */
.main > p, .main > ul, .main > ol, .main > blockquote,
.card > p, .box > p, .afg-karte > p,
.afg-prosa p, .afg-prosa ul, .afg-prosa ol, .afg-prosa blockquote{
  max-width:var(--afg-measure);
}
.afg-lesen{max-width:var(--afg-measure)}
.afg-voll{max-width:none}

blockquote{
  margin:0 0 1em; padding:.2em 0 .2em 1em;
  border-left:3px solid var(--line-strong); color:var(--ink-2);
}

/* Breite Inhalte scrollen in sich, nie die Seite. */
.afg-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}

/* ---------- 6 · Formularfelder --------------------------------------------
   `textarea` fehlte in der Feldregel — deshalb fielen die Notizfelder auf den
   Browser-Standard (~20 Zeichen breit, Systemschrift) zurück.

   UND `<input>` OHNE type fiel genauso durch. Eine Aufzählung von
   `input[type=text]` … trifft `<input name="ziel">` nicht: das Attribut fehlt,
   der Browser behandelt es als Text, der Selektor nicht. Acht Felder standen
   deshalb als Browser-Standard da — vier davon im Zielformular, das SCHÜLER
   ausfüllen. Wer das inline nachbaute, baute es jedes Mal etwas anders nach:
   drei Eckradien, vier Rahmenfarben, sieben Innenabstände für dasselbe Ding.
   Die Regel zählt deshalb nicht mehr auf, was ein Feld IST, sondern schließt
   aus, was keines ist. Damit greift sie auch bei `month`, `week`, `color`
   und allem, was noch kommt. -------------- */
label{display:block;font-size:var(--t-sm);font-weight:500;margin:var(--sp-4) 0 var(--sp-1)}
input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=image]):not([type=color]),
select,textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--field-border);
  border-radius:var(--radius-sm);
  font:inherit;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
}
textarea{min-height:8.5em;resize:vertical}
textarea.afg-hoch{min-height:16em}

/* Ein Feld in einer dichten Zeile — Filterleiste, Schnelleingabe. Es wurde
   dreimal von Hand gebaut (6px 9px hier, 8px dort, .85rem und .9rem für
   dasselbe). Als Variante benannt bleibt es an die Feldregel gebunden: Rahmen,
   Eckradius, Grund und Fokus kommen weiter von dort. */
.afg-feld-klein{padding:6px 9px;font-size:var(--t-sm)}
.afg-feld-auto{width:auto}
/* Ein Code, kein Wort: Ziffern gesperrt und gross, damit man sie beim
   Abtippen vom Handy nicht verzaehlt. Stand zweimal von Hand da. */
.afg-feld-code{letter-spacing:.15em;font-size:1.2rem;max-width:12ch}
/* Der Kasten, aus dem man einen Prompt herauskopiert. Er steht auf elf Seiten
   und war zweimal beschrieben: einmal mit rgba(127,127,127,…), einmal mit
   --raise. Dasselbe Ding, zwei Grautöne, je nachdem welche Seite man ansah. */
textarea.afg-feld-prompt{
  font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;
  padding:9px; background:var(--raise); border-color:var(--line);
  color:var(--ink-2); resize:vertical;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent);
}
::placeholder{color:var(--afg-n400);opacity:1}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4)}
legend{font-size:var(--t-sm);font-weight:700;padding:0 var(--sp-2)}

/* ---------- 7 · Portal-Rahmen ---------------------------------------------- */
.topbar{background:var(--white);border-bottom:1px solid var(--line)}
.topbar .in{max-width:var(--afg-breit);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar img{height:40px;width:auto}
.topbar .sep{flex:1}
.topbar .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* Der Sprunglink ist unsichtbar, bis ihn jemand mit der Tastatur erreicht.
   Kein `display:none` -- das nimmt ihn auch der Tastatur weg. */
.afg-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;
  padding:11px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:700;text-decoration:none}
.afg-skip:focus{left:0}

/* Sichtbar nur für die Sprachausgabe. Eine Überschrift steht schon über dem
   Feld — ein zweites sichtbares Label wäre Dopplung, ein fehlendes Label
   wäre Stille. */
/* DIE EINORDNUNG STEHT UNTER DER SCHREIBFLÄCHE — portalweit dieselbe Form.
   Am 10.09.2026 gemessen: von 33 Eingabeformularen ließen genau DREI zuerst
   schreiben. Alle anderen verlangten Datum, Feld, Art und Bezug, bevor man den
   ersten Satz tippen durfte — und die zugehörigen Tabellen standen auf null.
   Wer aus einem Gespräch kommt, hat den Satz im Kopf, nicht die Kategorie. */
/* Der Weg nach Craft — überall derselbe Knopf, damit „nach Craft" überall
   dasselbe heißt. Ein Formular, kein Link: Etwas nach draußen zu schicken ist
   eine Handlung. */
.craft-hinaus{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0}
.craft-hinaus-hinweis{font-size:var(--t-xs);color:var(--gray)}

.afg-einordnung{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end;
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--line)}
.afg-einordnung > button{margin-left:auto}

.afg-nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.main{max-width:var(--afg-breit);margin:34px auto;padding:0 22px 80px}
.main.afg-schmal{max-width:var(--afg-schmal)}
/* LESESPALTE ODER ARBEITSFLAECHE — das ist eine Entscheidung, keine Vorliebe.
   `lesen` gehoert auf Seiten, die man LIEST: Konzepte, Kompass, Systemkarte.
   Auf einer Seite, auf der man SCHREIBT, ist sie ein Denkfehler: Am 09.09.2026
   lief die Fokuskind-Akte auf `lesen` (780 px) und darin ein 1.5/1-Raster --
   der Editor bekam rund 440 px. Falks Befund: „das Fenster des Editors zu
   schmal und nicht wirklich eingabefreundlich".
   Fliesstext bleibt trotzdem auf Lesebreite: Das macht `.afg-md p` ueber
   --afg-measure, unabhaengig von der Seitenbreite. */
.main.afg-lesespalte{max-width:780px}

.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--line);
  padding:var(--sp-5) var(--sp-6)}
.card h1{font-size:var(--t-xl);margin-bottom:var(--sp-1)}
.card .sub{color:var(--gray);font-size:var(--t-sm);margin-bottom:var(--sp-4)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:var(--sp-5);padding:12px 16px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--green);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{background:var(--afg-green-dark);text-decoration:none}
.btn.sec{background:var(--mist);color:var(--ink);border-color:var(--line)}
.btn.sec:hover{background:var(--raise)}
.btn.small{width:auto;margin:0;padding:7px 12px;font-size:var(--t-sm)}
.btn.danger{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.msg{padding:11px 14px;border-radius:var(--radius-sm);font-size:var(--t-sm);margin-bottom:var(--sp-4);border:1px solid transparent}
.msg.err{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line)}
.msg.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.msg.info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)}

.foot{color:var(--gray);font-size:var(--t-xs);text-align:center;margin-top:var(--sp-5)}
.foot a{color:var(--gray)}
.altlinks{margin-top:var(--sp-4);font-size:var(--t-sm);text-align:center;color:var(--gray)}

.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:var(--radius-pill);background:var(--mist);color:var(--gray)}
.badge.admin{background:var(--ok-bg);color:var(--ok-ink)}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:var(--radius-pill)}
.pill.pending{background:var(--warn-bg);color:var(--warn-ink)}
.pill.active{background:var(--ok-bg);color:var(--ok-ink)}
.pill.disabled{background:var(--mist);color:var(--gray)}
.rowacts{display:flex;gap:6px;flex-wrap:wrap}

table.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--white);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
table.tbl th,table.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
table.tbl tr:last-child td{border-bottom:none}

/* ---------- 8 · Navigation -------------------------------------------------
   Früher zweimal gepflegt (layout.php ↔ assets/nav.css). Hier einmal, für
   beide Welten: `.userbar` (PHP-Topbar) und `.afg-navbar` (injiziert in .html). */
.afg-navbar{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
.afg-navbar .userbar{max-width:1360px;margin:0 auto;padding:8px 22px}

.userbar{font-size:var(--t-sm);color:var(--gray);display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px}
.userbar b{color:var(--ink)}
.userbar a{text-decoration:none;font-weight:500}
.userbar a.nl{color:var(--ink);padding:5px 9px;border-radius:8px;white-space:nowrap}
.userbar a.nl:hover{background:var(--mist);text-decoration:none}
.userbar a.nl.on{background:var(--ok-bg);color:var(--ok-ink)}
.userbar a.nl.priv{color:var(--priv-ink)}
.userbar a.nl.priv.on{background:var(--priv-bg);color:var(--priv-ink)}

.nav-dd{position:relative}
.nav-dd>summary{list-style:none;cursor:pointer;padding:5px 10px;border-radius:8px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-dd>summary:hover,.nav-dd[open]>summary{background:var(--mist)}
.nav-dd.on>summary{background:var(--ok-bg);color:var(--ok-ink)}
.nav-dd .dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:60;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;min-width:210px;display:flex;flex-direction:column;gap:2px}
.nav-dd.right .dd-menu{left:auto;right:0}
.nav-dd .dd-menu a{padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:500;white-space:nowrap}
.nav-dd .dd-menu a:hover{background:var(--mist);text-decoration:none}
.nav-dd .dd-menu a.on{background:var(--ok-bg);color:var(--ok-ink)}
.nav-dd .dd-menu .ddsep{height:1px;background:var(--line);margin:4px 2px}
.nav-dd .dd-menu .ddlabel{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:700;padding:5px 12px 2px}
@media(max-width:640px){.nav-dd .dd-menu{position:static;box-shadow:none;border:1px solid var(--line);min-width:0;margin:2px 0}}

/* Hell/Dunkel-Umschalter in der Leiste */
.afg-theme{background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  font:inherit;font-size:var(--t-sm);line-height:1;padding:5px 9px;border-radius:8px}
.afg-theme:hover{background:var(--mist)}

/* ---------- 9 · Neue Bausteine (Präfix afg-) ------------------------------- */

/* Seitenkopf: Augenbraue · Überschrift · Führungssatz */
.afg-kopf{margin:0 0 var(--sp-5)}
.afg-kopf .afg-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:var(--sp-1)}
.afg-kopf h1{font-size:var(--t-2xl);margin:0 0 var(--sp-2)}
.afg-kopf .afg-lead{font-size:var(--t-md);line-height:1.5;color:var(--ink-2);max-width:var(--afg-measure);margin:0}

/* Karte */
.afg-karte{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6);margin:0 0 var(--sp-5)}
.afg-karte > h2:first-child,.afg-karte > h3:first-child{margin-top:0}
.afg-karte.afg-flach{box-shadow:none}

/* Kachelraster */
.afg-raster{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.afg-kachel{display:block;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--kc,var(--green));
  border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);color:inherit;text-decoration:none}
.afg-kachel:hover{background:var(--raise);text-decoration:none}
.afg-kachel .k-wert{font-size:var(--t-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.afg-kachel .k-titel{font-size:var(--t-sm);color:var(--gray)}

/* Chip / Marke */
.afg-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;
  padding:2px 9px;border-radius:var(--radius-pill);background:var(--mist);color:var(--ink-2);
  border:1px solid var(--line);white-space:nowrap;text-decoration:none;vertical-align:baseline}
a.afg-chip:hover{background:var(--raise);text-decoration:none}
.afg-chip.thema{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.afg-chip.person{background:var(--priv-bg);color:var(--priv-ink);border-color:transparent}
.afg-chip.zeit{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)}
.afg-chip.ort{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}

/* Hinweiskasten */
.afg-hinweis{border:1px solid var(--line);border-left:4px solid var(--green);background:var(--white);
  border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);font-size:var(--t-sm)}
.afg-hinweis.warn{border-left-color:var(--warn-ink);background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.afg-hinweis.err{border-left-color:var(--err-ink);background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line)}
.afg-hinweis.info{border-left-color:var(--info-ink);background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)}
/* Nur die Überschrift des Kastens ist ein eigener Block — sonst zerreißt jedes
   fett gesetzte Wort im Fließtext die Zeile. */
.afg-hinweis > b:first-child{display:block;margin-bottom:2px}

/* Reiter */
.afg-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 var(--sp-4);padding:0}
.afg-tab{padding:8px 14px;border-radius:8px 8px 0 0;color:var(--ink-2);text-decoration:none;font-weight:500;
  border:1px solid transparent;border-bottom:none;margin-bottom:-1px}
.afg-tab:hover{background:var(--mist);text-decoration:none}
.afg-tab.on{background:var(--white);border-color:var(--line);color:var(--ink);font-weight:700}

/* Inhaltsverzeichnis (Sprungmarken) */
.afg-toc{background:var(--raise);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-5);font-size:var(--t-sm)}
.afg-toc b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-bottom:var(--sp-2)}
.afg-toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:var(--sp-5)}
.afg-toc li{margin-bottom:.25em;break-inside:avoid}
@media(max-width:640px){.afg-toc ol{columns:1}}
:target{scroll-margin-top:80px}

/* Zeitstrahl (Akte, Tagesblatt) */
.afg-zeitstrahl{list-style:none;margin:0;padding:0;position:relative}
.afg-zeitstrahl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.afg-zeitstrahl > li{position:relative;padding:0 0 var(--sp-4) var(--sp-6);margin:0}
.afg-zeitstrahl > li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--white);border:2px solid var(--zc,var(--green))}
.afg-zeitstrahl .z-kopf{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:2px}
.afg-zeitstrahl .z-zeit{font-size:var(--t-xs);color:var(--gray);font-variant-numeric:tabular-nums}

/* Terminzeile — früher dreifach nachgebaut (kalender, praesenz, unterricht) */
.afg-zeile{display:flex;gap:var(--sp-3);align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.afg-zeile:last-child{border-bottom:none}
.afg-zeile .z-uhr{min-width:5.4rem;flex:none;font-variant-numeric:tabular-nums;color:var(--gray);font-size:var(--t-sm)}
.afg-zeile .z-text{flex:1;min-width:0}
.afg-zeile .z-ort{color:var(--gray);font-size:var(--t-sm)}

/* Leerzustand */
.afg-leer{color:var(--gray);font-size:var(--t-sm);padding:var(--sp-4);text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius-sm)}

/* KI-Prozessberatung (bestehende Komponente, jetzt tokenbasiert) */
.ki-panel{background:linear-gradient(135deg,color-mix(in srgb,var(--priv-ink) 8%,var(--white)),color-mix(in srgb,var(--green) 8%,var(--white)));
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4);margin:0 0 var(--sp-5)}
.ki-panel.compact{padding:13px 15px}
.ki-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ki-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--priv-ink),var(--blue));color:#fff;font-size:16px}
.ki-head b{font-size:var(--t-md)}
.ki-sub{display:block;font-size:var(--t-xs);color:var(--gray)}
.ki-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ki-chip{font-size:11.5px;font-weight:700;border-radius:var(--radius-pill);padding:2px 9px;color:var(--pc,var(--ink-2));background:color-mix(in srgb,var(--pc,var(--ink-2)) 13%,var(--white));border:1px solid color-mix(in srgb,var(--pc,var(--ink-2)) 26%,var(--white));white-space:nowrap}
.ki-chip.sm{font-size:10.5px;padding:1px 7px;vertical-align:middle}
.ki-tipps{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:7px}
.ki-tipps li{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.ki-cta{font-size:var(--t-sm);color:var(--gray);border-top:1px dashed var(--line);padding-top:9px}
.ki-cta b{color:var(--priv-ink)}

/* ---------- 10 · Druck / Bewegung ------------------------------------------ */
@media print{
  .topbar,.afg-navbar,.userbar,.nav-dd,.afg-theme,.btn,.ki-panel,.afg-toc{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .main{max-width:none;margin:0;padding:0}
  .card,.afg-karte{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  a{color:#000;text-decoration:underline}
  h2,h3{break-after:avoid}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 11 · Markdown-Ausgabe (afg_md aus _inc/md.php) ----------------- */
.afg-md > *:first-child{margin-top:0}
.afg-md > *:last-child{margin-bottom:0}
.afg-md p, .afg-md ul, .afg-md ol, .afg-md blockquote{max-width:var(--afg-measure)}
.afg-md p{margin:0 0 .85em}
.afg-md ul, .afg-md ol{margin:0 0 .9em;padding-left:1.35em}
.afg-md li{margin-bottom:.3em}
.afg-md .afg-md-h2{margin:1.8em 0 .5em;font-size:var(--t-lg);color:var(--green);
  border-bottom:1px solid var(--line);padding-bottom:4px;scroll-margin-top:80px}
.afg-md .afg-md-h3{margin:1.4em 0 .35em;font-size:var(--t-md);scroll-margin-top:80px}
.afg-md .afg-md-h4,.afg-md .afg-md-h5,.afg-md .afg-md-h6{margin:1.2em 0 .3em;font-size:var(--t-base);color:var(--ink-2)}
.afg-md > .afg-md-h:first-child{margin-top:0}
.afg-md code{background:var(--raise);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.9em}
.afg-md hr{margin:1.6em 0}
.afg-md-tabelle{border-collapse:collapse;width:100%;font-size:var(--t-sm);margin:.6em 0}
.afg-md-tabelle th{text-align:left;padding:7px 10px;border-bottom:2px solid var(--green);white-space:nowrap;vertical-align:bottom}
.afg-md-tabelle td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.afg-md-aufgaben{list-style:none;padding-left:0}
.afg-md-aufgaben li{display:flex;gap:.5em;align-items:baseline}
.afg-md-aufgaben li.erledigt{color:var(--gray);text-decoration:line-through}
.afg-md-aufgaben .haken{flex:none}

/* ---------- 12 · Editor (assets/afg-editor.js) ----------------------------- */
.afg-ed{border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--white);overflow:visible}
.afg-ed:focus-within{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.afg-ed-leiste{display:flex;align-items:center;gap:3px;padding:5px 6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.afg-ed-luecke{flex:1}
.afg-ed-knopf{background:none;border:1px solid transparent;border-radius:7px;color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:var(--t-sm);line-height:1;padding:6px 9px;min-width:2rem}
.afg-ed-knopf:hover{background:var(--mist);color:var(--ink)}
.afg-ed-knopf.an{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.afg-ed-koerper{position:relative}
textarea.afg-ed-feld{border:none;border-radius:0;box-shadow:none;min-height:11em;background:transparent}
textarea.afg-ed-feld:focus{box-shadow:none;border:none;outline:none}
.afg-ed-vorschau{padding:12px 13px;min-height:11em}
.afg-ed-laedt{color:var(--gray);font-size:var(--t-sm)}
.afg-ed-fuss{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  padding:5px 10px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--gray)}
.afg-ed-fuss kbd{font-family:var(--afg-mono);background:var(--mist);border:1px solid var(--line);
  border-radius:4px;padding:0 4px}
.afg-ed-stand{color:var(--ok-ink)}
.afg-ed-entwurf{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;background:var(--warn-bg);
  color:var(--warn-ink);border-bottom:1px solid var(--warn-line);padding:7px 10px;font-size:var(--t-sm)}
.afg-ed-entwurf .afg-ed-knopf{border-color:var(--warn-line);color:inherit}

.afg-ed-menue{position:absolute;left:8px;right:8px;bottom:8px;z-index:70;max-height:16em;overflow-y:auto;
  background:var(--white);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.afg-ed-eintrag{display:flex;gap:var(--sp-3);align-items:baseline;padding:7px 11px;cursor:pointer;font-size:var(--t-sm)}
.afg-ed-eintrag b{flex:none;min-width:9rem}
.afg-ed-eintrag span{color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afg-ed-eintrag.aktiv,.afg-ed-eintrag:hover{background:var(--ok-bg);color:var(--ok-ink)}
.afg-ed-eintrag.aktiv span,.afg-ed-eintrag:hover span{color:inherit;opacity:.8}

.afg-ed.gross{position:fixed;inset:3vh 4vw;z-index:300;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.afg-ed.gross .afg-ed-koerper{flex:1;display:flex}
.afg-ed.gross textarea.afg-ed-feld,.afg-ed.gross .afg-ed-vorschau{flex:1;height:auto}

/* ---------- 13 · Feldweises Sichern (assets/afg-feld.js) ------------------- */
.afg-feld{position:relative;margin-bottom:var(--sp-3)}
.afg-feld label{margin-top:0}
.afg-feld-stand{position:absolute;right:2px;top:0;font-size:11.5px;color:var(--gray)}
.afg-feld-stand[data-art="ok"]{color:var(--ok-ink)}
.afg-feld-stand[data-art="err"]{color:var(--err-ink)}

/* ---------- 14 · Vertretungsstand (_inc/vertretung.php) -------------------- */
.vt-zeile{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.vt-zeile:last-child{border-bottom:none}
.vt-marke{flex:none;width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:5px;
  font-size:11.5px;font-weight:700;background:var(--mist);color:var(--gray)}
.vt-vertretung .vt-marke{background:var(--info-bg);color:var(--info-ink)}
.vt-entfall .vt-marke{background:var(--err-bg);color:var(--err-ink)}
.vt-raum .vt-marke{background:var(--warn-bg);color:var(--warn-ink)}
.vt-betreuung .vt-marke{background:var(--ok-bg);color:var(--ok-ink)}
.vt-wann{flex:none;min-width:6rem;font-variant-numeric:tabular-nums;color:var(--gray);font-size:var(--t-sm)}
.vt-was{flex:1;min-width:0}
.vt-entfall .vt-was b{text-decoration:line-through}

/* ---------------------------------------------------------- Kindauswahl
   Ein Feld für Förderplan, Lernentwicklungsgespräch und Beratung
   (_inc/kindwahl.php). Die Klappe darunter ist der Ausweg aus der
   Sackgasse: Wer ein Kind noch nicht hat, legt es hier an, statt die
   Seite zu verlassen. Kinder kommen bewusst nicht aus dem IServ —
   docs/iserv-schuelerdaten-entscheidung.md. */
.kw-feld { min-width: 0; }
.kw-feld > select { width: 100%; }

.kw-neu { margin-top: 8px; }
.kw-neu > summary {
  cursor: pointer; font-size: .88rem; color: var(--gray);
  padding: 4px 2px; border-radius: 6px; list-style: none;
}
.kw-neu > summary::-webkit-details-marker { display: none; }
.kw-neu > summary::before { content: "＋ "; color: var(--green); font-weight: 700; }
.kw-neu > summary:hover { color: var(--ink-2); }
.kw-neu > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.kw-neu[open] > summary { color: var(--ink-2); margin-bottom: 6px; }

.kw-neu-felder { display: flex; gap: 10px; flex-wrap: wrap; }
.kw-neu-felder > div { flex: 1 1 150px; min-width: 0; }
.kw-neu-felder label { font-size: .82rem; color: var(--gray); }
.kw-neu-felder input, .kw-neu-felder select { width: 100%; }

.kw-hinweis {
  margin: 8px 0 0; font-size: .8rem; line-height: 1.45; color: var(--gray);
  border-left: 3px solid var(--afg-n200); padding-left: 10px;
}

/* Sprungziele aus der Akte („Am Kind"): Der Vorgang, auf den verwiesen wird,
   soll nach dem Sprung sichtbar sein und sich kurz zu erkennen geben. */
.fp-plan, .leg-eintrag, .be-eintrag { scroll-margin-top: 84px; }
.fp-plan:target, .leg-eintrag:target, .be-eintrag:target {
  outline: 2px solid var(--green); outline-offset: 3px; border-radius: 10px;
}

/* ------------------------------------------------------- Was die Schule hat
   Der Bestand kommt zum Vorgang, nicht umgekehrt. Zugeklappt, weil die
   Beschwerde ausdrücklich lautete: „man muss scrollen, und bis man seine
   Sache gefunden hat, ist es sehr aufwendig". Er soll da sein, wenn man ihn
   braucht — und die Seite nicht verlängern, wenn nicht. */
.bs-block {
  margin: 0 0 var(--sp-5); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: var(--radius-sm);
  background: var(--raise); padding: 10px 14px;
}
.bs-block > summary {
  cursor: pointer; list-style: none; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap; font-size: var(--t-sm);
}
.bs-block > summary::-webkit-details-marker { display: none; }
.bs-block > summary::before { content: "📚"; }
.bs-block > summary span { color: var(--gray); font-size: var(--t-xs); }
.bs-block > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.bs-wofuer { margin: 8px 0 0; font-size: var(--t-xs); color: var(--gray); max-width: var(--afg-measure); }

.bs-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bs-liste li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line); }
.bs-liste li.karte { border-left-color: var(--green); }
.bs-titel { font-weight: 600; font-size: var(--t-sm); }
.bs-text { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5; max-width: var(--afg-measure); }
.bs-ort { font-size: 11px; color: var(--gray); font-family: var(--mono); overflow-wrap: anywhere; }
/* HERVORHEBUNG IN BEIDEN MODI. Hier stand `background:#FFF2A8; color:inherit`.
   Im Hellen ist das richtig; im Dunkeln ist `inherit` fast weiß — weiß auf
   hellgelb. Der Suchtreffer, also genau die Stelle, um die es geht, war die
   unleserlichste Stelle der Seite. `mark` steht auch in der Suche selbst,
   deshalb gilt die Regel dort ebenso. */
/* Ein Entwurf im Tagesblatt: gelesen, aber noch nicht entschieden. Bewusst
   heller als das Fällige darüber — es ist ein Angebot, keine Frist. */
.tb-entwurf{border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-3);background:var(--raise)}
.tb-entwurf-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);
  margin-bottom:var(--sp-2);font-size:var(--t-sm)}
.tb-entwurf-guete{font-family:var(--afg-mono);font-size:var(--t-xs);color:var(--gray)}
.tb-entwurf-warn{font-size:var(--t-xs);background:var(--warn-bg);color:var(--warn-ink);
  border-radius:var(--radius-pill);padding:1px 9px}
.tb-entwurf textarea{min-height:5.5em;font-size:var(--t-sm)}
.tb-entwurf-quelle{font-size:var(--t-xs);color:var(--gray);text-decoration:none;
  border-bottom:1px dotted var(--line-strong)}
.tb-entwurf-quelle:hover{color:var(--green);border-bottom-color:var(--green)}
.tb-entwurf-still{font-size:var(--t-sm);color:var(--gray);margin:0 0 var(--sp-3);
  max-width:var(--afg-measure)}
.tb-entwurf-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-2)}
.tb-entwurf-fuss select{width:auto;flex:1 1 9rem;min-width:9rem}

/* „Worüber zu reden ist" — die offenen Fragen einer Karte, jede mit einem
   Weg heraus. Abgesetzt vom Befund darüber: Das eine beschreibt, das andere
   verlangt eine Entscheidung. */
.su-diskurs{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:2px solid var(--line)}
.su-diskurs h3{margin:0;font-size:var(--t-md)}
.su-diskurs-lead{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--t-sm);color:var(--gray);
  max-width:var(--afg-measure)}
.su-diskurs ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--sp-4)}
.su-diskurs li{max-width:var(--afg-measure)}
.su-punkt-btn{margin-top:var(--sp-2);display:inline-flex}

/* Was aus dieser Karte schon geworden ist — die Rückrichtung. */
.su-schon{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);
  background:var(--ok-bg);color:var(--ok-ink);font-size:var(--t-sm);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2)}
.su-schon a{color:inherit;font-weight:600}
.su-schon-stand{font-size:var(--t-xs);opacity:.8}

mark, .bs-liste mark { background: var(--mark-bg); color: var(--mark-ink);
  border-radius: 3px; padding: 0 1px; }

/* Ein Fund aus dem Bestand in die Notiz holen. Der Knopf steht am Eintrag,
   nicht über der Liste: er tut etwas mit DIESEM Fund. */
.bs-uebernehmen { align-self: flex-start; margin-top: 3px; border: 1px solid var(--line);
  background: transparent; color: var(--gray); font: inherit; font-size: 11.5px;
  padding: 2px 9px; border-radius: var(--radius-pill); cursor: pointer; }
.bs-uebernehmen:hover { border-color: var(--green); color: var(--green); }
.bs-uebernehmen:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bs-mehr { margin: 10px 0 0; font-size: var(--t-xs); }

/* Bausteine zum Block: eine Reihe je Zeile, die Zahl rechts.
   Bewusst KEINE Kacheln — es sind bis zu zwölf Reihen, und zwölf Kacheln
   unter einem Stundenplan-Eintrag sind eine zweite Seite, keine Auskunft. */
.bs-reihenliste { list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px; }
.bs-reihenliste li { display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.bs-reihenliste li:last-child { border-bottom: 0; }
.bs-reihenliste a { flex: 1 1 auto; color: var(--ink); text-decoration: none;
  border-bottom: 1px dotted transparent; }
.bs-reihenliste a:hover { color: var(--green); border-bottom-color: var(--green); }
.bs-zahl { font-variant-numeric: tabular-nums; font-size: var(--t-xs);
  color: var(--gray); min-width: 2.5ch; text-align: right; }
.bs-jg { font-size: 11px; color: var(--gray); background: var(--afg-n100);
  padding: 0 6px; border-radius: 999px; }
.bs-erschlossen { color: var(--green); font-size: var(--t-xs); }

/* ------------------------------------------------------------------ Das RAD
   Kein eigenes Werkzeug, sondern ein Bezugspunkt an der Stelle, an der eine
   Seite ueber Verhalten, Beratung oder Ausgrenzung spricht. Ruhiger als der
   Bestandsblock daneben: Es ist eine Haltung, keine Trefferliste. */
.rad-block {
  margin: 0 0 var(--sp-5); border: 1px solid var(--line);
  border-left: 3px solid var(--afg-n400, var(--gray)); border-radius: var(--radius-sm);
  background: var(--raise); padding: 10px 14px;
}
.rad-block > summary {
  cursor: pointer; list-style: none; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap; font-size: var(--t-sm);
}
.rad-block > summary::-webkit-details-marker { display: none; }
.rad-block > summary::before { content: "◎"; color: var(--gray); }
.rad-block > summary span { color: var(--gray); font-size: var(--t-xs); }
.rad-block > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.rad-anlass { margin: 8px 0 0; font-size: var(--t-xs); color: var(--gray); max-width: var(--afg-measure); }
.rad-liste { margin: 10px 0 0; padding: 0 0 0 1.4em; display: flex; flex-direction: column; gap: 10px; }
.rad-liste li { max-width: var(--afg-measure); }
.rad-satz { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.45; }
.rad-wofuer { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5; }
.rad-hinweis { margin: 12px 0 0; font-size: var(--t-xs); color: var(--ink-2);
  line-height: 1.55; max-width: var(--afg-measure);
  border-left: 2px solid var(--line); padding-left: 10px; }
.rad-quelle { margin: 10px 0 0; font-size: 11px; color: var(--gray); }

/* ------------------------------------------------- Gegliederte lange Seiten
   Zwölf Abschnitte auf 973 Zeilen sind nicht zu viel Inhalt — sie stehen nur
   alle gleichzeitig da. Die Übersicht macht daraus zwölf Zeilen; wer liest,
   klappt auf. Ohne JavaScript greift nichts davon, und die Seite ist exakt
   wie vorher. (assets/afg-abschnitte.js) */
.afg-abschnitt-index {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 var(--sp-abschnitt, 28px); padding: 14px 16px;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius);
}
.afg-abschnitt-index a {
  font-size: var(--t-sm); padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none; line-height: 1.3;
}
.afg-abschnitt-index a:hover { border-color: var(--green); color: var(--ink); }
.afg-abschnitt-index a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.afg-abschnitt-h2 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; scroll-margin-top: 76px;
}
.afg-abschnitt-schalter {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 6px; border-radius: 8px;
  color: var(--gray); font: inherit; font-size: var(--t-xs); font-weight: 400; cursor: pointer;
}
.afg-abschnitt-schalter:hover { background: var(--mist); color: var(--ink-2); }
.afg-abschnitt-schalter:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.afg-abschnitt-schalter .pfeil { transition: transform .15s; font-size: 1rem; line-height: 1; }
.afg-abschnitt.zu .afg-abschnitt-schalter .pfeil { transform: rotate(-90deg); }
.afg-abschnitt-mass { font-variant-numeric: tabular-nums; }

.afg-abschnitt.zu .afg-abschnitt-rumpf { display: none; }
.afg-abschnitt.zu { margin-bottom: var(--sp-3); }
.afg-abschnitt.zu .afg-abschnitt-h2 { margin-bottom: 0; opacity: .82; }
.afg-abschnitt.zu:hover .afg-abschnitt-h2 { opacity: 1; }

@media print {
  /* Gedruckt wird alles — Zuklappen ist eine Bildschirmfrage. */
  .afg-abschnitt.zu .afg-abschnitt-rumpf { display: block !important; }
  .afg-abschnitt-index, .afg-abschnitt-schalter { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .afg-abschnitt-schalter .pfeil { transition: none; } }

/* ---------------------------------------------------- Quer lesen (Muster)
   92 Kästen sind 15-mal dieselben sechs Fragen. Der Bezug war immer da, die
   Seite hat ihn nur nie gesagt. Eine Zeile sagt ihn; ein Klick liest eine
   Frage über alle Einträge hinweg. (assets/afg-querschnitt.js) */
.afg-quer {
  margin: 0 0 var(--sp-abschnitt, 28px); padding: 12px 16px;
  background: var(--raise); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: var(--radius);
}
.afg-quer-satz { margin: 0 0 10px; font-size: var(--t-sm); color: var(--ink-2); max-width: var(--afg-measure); }
.afg-quer-satz b { color: var(--ink); }
.afg-quer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.afg-quer-chips button {
  font: inherit; font-size: var(--t-sm); line-height: 1.3;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
}
.afg-quer-chips button:hover { border-color: var(--green); color: var(--ink); }
.afg-quer-chips button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.afg-quer-chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.afg-quer-chips button .n { opacity: .65; font-variant-numeric: tabular-nums; }
.afg-quer-chips button[aria-pressed="true"] .n { opacity: .85; }

.blk.quer-aus { display: none; }
.quer-leer { display: none !important; }
/* Quer gelesen wird ohne Rahmen: Wer eine Frage verfolgt, will die Antworten
   untereinander sehen, nicht fünfzehn Kästen. Gemessen: Ein Eintrag war im
   Filter 324 px hoch, davon 94 px Kopfzeile und Rahmenwerk — bei fünfzehn
   Einträgen sind das über zwei Bildschirme, die nichts beantworten. */
body[data-quer]:not([data-quer=""]) .grid { display: block; }
body[data-quer]:not([data-quer=""]) .card,
body[data-quer]:not([data-quer=""]) details.prof {
  border: 0; box-shadow: none; background: none; margin: 0 0 var(--sp-3);
}
body[data-quer]:not([data-quer=""]) details.prof > summary { padding: 4px 0; cursor: default; }
body[data-quer]:not([data-quer=""]) details.prof > summary .chev { display: none; }
/* Die Kurzbeschreibung im Kopf erklärt den Eintrag — beim Querlesen weiß man
   längst, worum es geht, und sie kostet fünfzehnmal drei Zeilen. */
body[data-quer]:not([data-quer=""]) details.prof > summary .nu { display: none; }
body[data-quer]:not([data-quer=""]) .prof-body { padding: 0; }
body[data-quer]:not([data-quer=""]) .blk:not(.quer-aus) { margin-bottom: 0; }

@media print { .afg-quer { display: none; } .blk.quer-aus, .quer-leer { display: revert !important; } }

/* -------------------------------------------------- Konflikte im Tagesblatt */
.tb-konflikt { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-3);
  padding: 8px 0; align-items: baseline; }
.tb-konflikt + .tb-konflikt { border-top: 1px solid var(--line); }
.tb-konflikt .zeit { font-family: var(--mono); font-size: var(--t-xs); color: var(--gray); }
.tb-konflikt .was { font-size: var(--t-sm); color: var(--ink-2); max-width: var(--afg-measure); }
.tb-konflikt.warn { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
.tb-konflikt-quelle { margin: 10px 0 0; font-size: var(--t-xs); color: var(--gray);
  max-width: var(--afg-measure); }
@media (max-width: 560px) { .tb-konflikt { grid-template-columns: 1fr; gap: 2px; } }

/* Kontexttafel — was ueber dieses Kind schon bekannt ist.
   Neben dem Auswahlfeld, nicht darueber: Sie ist Beiwerk zur Entscheidung,
   nicht die Entscheidung. Deshalb ohne Karte, ohne Schatten, ohne Farbflaeche
   ausser dort, wo eine Erfahrung wirklich etwas aussagt. */
.kx{margin:8px 0 4px;padding:10px 0 2px;border-top:1px solid var(--line,#e4e2da);
    font-size:.86rem;max-width:64ch}
.kx-satz{margin:0 0 8px;color:var(--ink,#1c2321);line-height:1.5}
.kx-titel{margin:12px 0 4px;font-size:.7rem;font-weight:700;letter-spacing:.09em;
          text-transform:uppercase;color:var(--gray,#5c665f)}

.kx-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.kx-zahlen li{padding:4px 9px;border-radius:8px;background:var(--mist,#eef1f5);line-height:1.3}
.kx-zahlen li.leer{opacity:.55}
.kx-zahlen a{color:inherit;text-decoration:none}
.kx-zahlen a:hover{text-decoration:underline}
.kx-zahlen b{font-variant-numeric:tabular-nums}
.kx-wann{display:block;font-size:.72rem;color:var(--gray,#5c665f)}
.kx-offen{margin:8px 0 0;color:var(--red,#FE0000)}

.kx-erfahrung,.kx-fristen{margin:0;padding:0;list-style:none}
.kx-erfahrung li{padding:3px 0;line-height:1.4;border-left:3px solid transparent;padding-left:9px}
.kx-wirkung{font-size:.78rem;color:var(--gray,#5c665f)}
.kx-erfahrung li.kx-gewirkt{border-left-color:var(--brand,#01AF51)}
.kx-erfahrung li.kx-ohne   {border-left-color:var(--red,#FE0000)}
.kx-erfahrung li.kx-weg    {border-left-color:var(--blue,#4F6BFF)}
.kx-erfahrung li.kx-laeuft {border-left-color:var(--line,#e4e2da)}

.kx-fristen li{padding:3px 0 3px 9px;border-left:3px solid var(--line,#e4e2da);line-height:1.4}
.kx-fristen li.kx-warn{border-left-color:var(--red,#FE0000)}
.kx-fristen li.kx-zu{opacity:.6}
.kx-fristen a{color:inherit;text-decoration:none}
.kx-fristen a:hover{text-decoration:underline}

/* Was gerade nicht liefert — ganz oben im Tagesblatt.
   Es steht vor allem anderen, weil alles darunter aelter sein kann als heute.
   Und es steht nur da, wenn es etwas zu sagen gibt: Ein Abschnitt, der taeglich
   „alles in Ordnung" meldet, wird nach einer Woche ueberlesen. */
.tb-stoer{margin:0 0 var(--sp-4,18px)}
.tb-stoer h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tb-stoerzeile{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line,#e4e2da);
               align-items:baseline;flex-wrap:wrap}
.tb-stoerzeile:last-of-type{border-bottom:none}
.tb-stoerzeile .was{font-weight:600;flex:0 0 clamp(9rem,22%,14rem)}
.tb-stoerzeile .wie{flex:1 1 20rem;line-height:1.45;font-size:.92rem}
.tb-stoerzeile .wie .unt-leise{display:block;font-size:.8rem;margin-top:2px}
/* Die Farbe sitzt am Wort, nicht auf einer Flaeche: Eine rote Kachel schreit
   auch dann, wenn nur ein Lauf ein paar Stunden zu spaet ist. */
.tb-stoerzeile.err  .was{color:var(--red,#FE0000)}
.tb-stoerzeile.warn .was{color:var(--warn-ink,#8a5a00)}
.tb-stoerzeile.unbekannt .was{color:var(--gray,#5c665f)}
.tb-stoerfuss{margin:10px 0 0;font-size:.85rem;color:var(--gray,#5c665f)}

/* Der handschriftliche Zettel über seiner Abschrift.
   WEISSER GRUND IST PFLICHT, KEIN GESCHMACK: Craft legt Handschrift mit
   durchsichtigem Hintergrund ab. Ohne eigene Fläche wäre die Zeichnung im
   Dunkelmodus schwarz auf schwarz — also unsichtbar, ohne Fehlermeldung.
   Dieselbe Eigenschaft ließ die Texterkennung auf dem Mini anfangs null Zeilen
   finden. */
.tb-zettel{
  display:block; width:100%; max-width:100%; height:auto;
  background:#fff;                       /* absichtlich fest, siehe oben */
  border:1px solid var(--afg-linie, #DDE4DF);
  border-radius:var(--afg-radius-sm, 10px);
  margin:0 0 .6rem;
  /* Eine Handschriftseite ist hoch; ungebremst schiebt sie das Formular aus
     dem Blick. Sie bleibt scrollbar statt beschnitten. */
  max-height:22rem; object-fit:contain; object-position:top center;
}

/* ── Alle Werkzeuge: eine Tür statt vier Klappmenüs ──────────────────────
   „noch leer" ist eine Auskunft, kein Urteil. Der Eintrag bleibt anklickbar
   und an seinem Platz — man geht in ein leeres Werkzeug, um es zu füllen.
   Er tritt nur zurück, damit die gefüllten hervortreten; genau das war das
   Problem: 43 gleich aussehende Ziele, neun davon mit Inhalt. */
.wz-bilanz{color:var(--gray);font-size:var(--t-sm);margin:0 0 1.5rem}
.wz-gruppe{margin:0 0 2rem}
.wz-gruppe h2{margin:0 0 .2rem}
.wz-gruppe h3{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.08em;
  color:var(--gray);margin:1.1rem 0 .4rem}
.wz-liste{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.wz-eintrag{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:.45rem .6rem;border-radius:var(--afg-radius-sm,10px)}
.wz-eintrag:hover{background:var(--mist,#ECF0F5)}
.wz-eintrag > a{font-weight:500;text-decoration:none}
.wz-eintrag > a:hover{text-decoration:underline}
.wz-was{color:var(--gray);font-size:var(--t-sm);flex:1 1 22rem;min-width:0}
.wz-zahl{font-family:var(--afg-mono);font-size:var(--t-xs);color:var(--gray);
  font-variant-numeric:tabular-nums}
.wz-leer{font-size:var(--t-xs);color:var(--gray);border:1px solid currentColor;
  border-radius:999px;padding:0 .45rem;opacity:.75}
.wz-eintrag.ist-leer > a{font-weight:400;opacity:.72}
@media (max-width:560px){ .wz-was{flex-basis:100%} }

/* ── Interaktive Module (H5P) ────────────────────────────────────────────
   Der Abspieler bringt eigene Schriften und Farben mit. Er bekommt deshalb
   eine eigene Flaeche statt Tokens aufgedraengt: Was er innen macht, ist seine
   Sache; nach aussen fuegt er sich ein. */
.h5p-wahl{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.h5p-wahl a{padding:.35rem .8rem;border:1px solid var(--afg-linie,#DDE4DF);
  border-radius:999px;text-decoration:none;font-size:var(--t-sm)}
.h5p-wahl a.on{background:var(--afg-green,#01AF51);color:#fff;border-color:transparent}
.h5p-woher{color:var(--gray);font-size:var(--t-sm);margin:0 0 1rem}
.h5p-woher b{color:var(--ink)}
.h5p-buehne{background:#fff;border:1px solid var(--afg-linie,#DDE4DF);
  border-radius:var(--afg-radius,14px);padding:.5rem;min-height:14rem}
.h5p-fehler{color:var(--warn-ink,#9A5B08);padding:1rem;font-size:var(--t-sm)}
.h5p-leer{color:var(--gray)}