/* Aufgabensteller — Hauptbuch & Beleg
   ══════════════════════════════════════════════════════════════════
   Neu gesetzt am 18.09.2026 nach der Designsprache der Plattform. Die
   vorige Fassung war nicht falsch, sondern unruhig, und zwar messbar:

     54 Schlagschatten, 64 gerundete Ecken, 27 Verläufe in den Vorlagen,
     die diese Seite lädt — die Designsprache erlaubt davon genau eine
     Form, den harten gedruckten Schatten.

     Sechs verschiedene Rahmendefinitionen in EINER Datei. Erlaubt sind
     drei Linienqualitäten, und jede trägt eine Bedeutung.

     Zehn Elemente mit eigener Fläche bei sechs Verschachtelungsebenen —
     Card in Box in Card. Das Auge findet keinen Halt, weil alles gleich
     wichtig aussieht.

   DIE HAUPTURSACHE WAR DIE SCHRIFT, UND SIE WAR VERTAUSCHT.
   ------------------------------------------------------------------
   Kontonummern und Kontonamen standen in der Serife, die Themenbeschriftung
   und der Kontext in der Monospace — genau andersherum als das System es
   meint. Und die Angabe selbst, der einzige echte Lesetext der Seite, hatte
   überhaupt keine Zuweisung und erbte, was gerade kam.

   Die Regel lautet: Serife für alles, was gelesen wird. Monospace für
   Zahlen, Konten, Labels und Knöpfe. Daran hängt der ganze Charakter.

   WAS HIER NICHT STEHT: das Hintergrundraster. Das liegt in
   css/exercise-hb-shell.css und trägt die ganze Fläche ruhig durch — der
   Inhalt liegt DARAUF, nicht in einzeln gerahmten Kästchen. */

.aufgabengenerator-page {
    /* Die Tokens der Designsprache, hier einmal lokal benannt. Rückfallwerte
       bleiben überall stehen: Der Baustein läuft auch auf der Landeseite,
       die die --hb-Tokens nicht lädt. */
    --ag-papier:      var(--hb-paper, #FBF8EF);
    --ag-flaeche:     var(--hb-card, #FCFBF7);
    --ag-tinte:       var(--hb-ink, #1A1A17);
    --ag-tinte-mitte: var(--hb-ink-mid, #3D3A33);
    --ag-grau:        var(--hb-muted, #5A554A);
    --ag-linie:       var(--hb-border, #DAD3C2);

    /* Bedeutungsfarben. Die Designsprache nennt für Saldo-Rot zwei Töne und
       verlangt, pro Umsetzung einen zu führen. Die Shell hat diese Wahl schon
       getroffen und begründet (--hb-red): die hellen Katalogtöne verfehlen auf
       Papier WCAG AA. #D9533B erreicht auf der Karte nur 3.86:1, als Knopffläche
       unter weißer Schrift 3.77:1. Also durchgehend der abgedunkelte Ton.
       Für Ocker gibt es kein Hausschild; #B5651D kommt auf 4.19:1 und taugt
       damit für Linien und Flächen (3:1 genügt), nicht für Text. Deshalb ein
       eigener Textton derselben Familie. */
    --ag-soll:        var(--hb-red, #B0492C);   /* Soll, Warnung, Primär-Akzent */
    --ag-ocker:       #B5651D;                  /* aktiv, laufend — nur Linie/Fläche */
    --ag-ocker-text:  #9A5518;                  /* derselbe Ton, textstark */
    --ag-gruen:       #1F7A4D;                  /* richtig, erledigt */

    /* MENÜKARTEN, flach in leichtem Orange. Kein Verlauf: Die Karten
       sollen auf Berührung antworten, und eine Fläche, die schon von sich
       aus changiert, macht die Antwort unsichtbar. Drei Zustände, drei
       Töne — Ruhe, Zeiger darüber, gedrückt.

       Die Töne bleiben hell, weil die Zweitfarben sonst durchfallen: auf
       einem satteren #F2D6AC lagen Lead, Nummer und Pfeil bei 3,7–4,1 : 1.
       So gerechnet gegen den DUNKELSTEN der drei (#EFCC9C): Lead 4,63,
       Nummer 4,63, Pfeil 4,88. */
    --ag-karte:        #FBE7CE;
    --ag-karte-hover:  #F5D9B4;
    --ag-karte-druck:  #EFCC9C;
    --ag-karte-linie:  #E0C49B;
    --ag-karte-text:   #5F5848;
    --ag-karte-akzent: #93381C;
    --ag-karte-marke:  #8A4A10;

    /* Gesperrt ist grau, nicht blass-orange: ein abgeschwächtes Orange
       liest sich als „fast gleich", ein anderer Farbton als „anders". */
    --ag-karte-grau:      #EDEAE1;
    --ag-karte-grau-text: #6E6757;

    --ag-serif: 'Lora', 'Source Serif 4', Georgia, serif;
    --ag-mono:  'JetBrains Mono', 'IBM Plex Mono', monospace;
}

/* ── Drei Linienqualitäten, mehr gibt es nicht ─────────────────────
   haarfein  trennt Sektionen
   kräftig   setzt DEN Akzent, unter Titeln
   doppelt   ausschliesslich für Summen und Salden */

.aufgabengenerator-page .worksheet-hero h1 {
    font-family: var(--ag-serif);
    font-weight: 500;
}

/* ── Zone: Überschrift mit kräftiger Linie, sonst nichts ───────── */

/* Das Muster teilt den Kopf in 180px | Rest — gedacht für eine kurze
   Nummer links. Hier steht links die Überschrift und brach deshalb mitten
   im Satz um, während rechts die halbe Zeile leer blieb. Zwei Blöcke,
   auseinandergeschoben. */
.aufgabengenerator-page .worksheet-zone-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ag-tinte);
}
.aufgabengenerator-page .worksheet-zone-number {
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-grau);
}
.aufgabengenerator-page .worksheet-zone-head h2 {
    font-family: var(--ag-serif);
    font-size: 20px;
    font-weight: 500;
}

/* ── Auswahl ───────────────────────────────────────────────────── */

/* KEIN eigener Rahmen. Die Zone rahmt bereits, und im Bild lagen dadurch
   drei Flächen ineinander: Zone → Auswahlpanel → Themenkasten, jede mit
   eigener Kante. Prinzip 2 der Designsprache erlaubt eine Ebene. Das Panel
   ordnet nur noch, es umschließt nicht mehr. */
.ag-auswahl {
    display: grid;
    gap: 26px;
    padding: 20px 18px 22px;
}

.ag-feld { margin: 0; padding: 0; border: 0; }

/* Kurzes Mono-Label in Versalien — so, und nur so, sind Versalien erlaubt. */
.ag-feld legend,
.ag-feld-legende {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-soll);
}
.ag-feld-hinweis {
    letter-spacing: 0;
    text-transform: none;
    color: var(--ag-grau);
}

.ag-optionen { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ein Feld mit dünnem Rahmen auf Papier. Die gewählte Option bekommt einen
   kräftigen Rahmen — keine zusätzliche verschachtelte Box. */
.ag-option {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    padding: 7px 10px;
    border: 1px solid var(--ag-linie);
    background: var(--ag-papier);
    cursor: pointer;
}
.ag-option:has(input:checked) {
    border: 2px solid var(--ag-tinte);
    padding: 6px 9px;                 /* Rahmenwachstum ausgleichen */
}
/* Der Name wird gelesen — also Serife. */
.ag-option-text {
    font-family: var(--ag-serif);
    font-size: 14px;
    color: var(--ag-tinte);
}
/* Die Zahl ist eine Zahl — also Monospace. */

.ag-leer, .ag-sperrhinweis {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ag-tinte-mitte);
}

/* Gesperrte Themenwahl: sichtbar, lesbar, offensichtlich nicht bedienbar. */
/* Gesperrt wird über die Optionen selbst gezeigt, nicht über einen Kasten
   darum. Der gestrichelte Rahmen war eine vierte Linienqualität — es gibt
   drei. */
.ag-feld.ist-gesperrt .ag-option {
    border-color: var(--ag-linie);
    border-style: dashed;
}
.ag-feld.ist-gesperrt .ag-option { cursor: default; background: transparent; }
.ag-feld.ist-gesperrt .ag-option-text { color: var(--ag-tinte-mitte); }
.ag-feld.ist-gesperrt .ag-sperrhinweis { margin-top: 10px; }


/* ── Das Buchhörnchen in der Titelbox ──────────────────────────────

   DREI SACHEN KOMMEN AUS DER SHELL und mussten alle zurückgenommen
   werden (exercise-hb-shell.css, Regeln auf
   `main > section[class*="-hero"]`):

     1. Die Titelbox ist ein Grid `minmax(0,1fr) | minmax(260px,340px)`.
        Das Hörnchen ist der zweite Block und liegt damit in der rechten
        Spalte — aber linksbündig darin. Daher die Lücke an der Kante.
        `justify-self: end` schiebt es an den Rand.
     2. Jedes Bild in einer Titelbox wird auf `max-width: 112px;
        max-height: 86px` gedeckelt. Deshalb stand die Figur klein da,
        obwohl hier 160px gesetzt waren.
     3. Dasselbe Bild bekommt dort `padding: 4px`, einen Rahmen und
        `background: #fffdf8` — das war der Kasten um das Hörnchen.

   ALLES MIT !important, und das allein genügt nicht: Die Shell-Regel
   liegt bei (0,3,5). Der Selektor unten kommt auf dieselben (0,3,5) —
   html, body, main, section, img sind fünf Elemente,
   .aufgabengenerator-page, .worksheet-hero und .ag-hoernchen drei
   Klassen. Bei Gleichstand gewinnt das später geladene Blatt.

   Die Vorlage war 1183×1330 und 1,7 MB — für ein Bild, das 160px hoch
   angezeigt wird. Sie liegt jetzt zugeschnitten als 300×335-webp mit
   36 KB daneben; die Original-PNG bleibt liegen, wo sie war. */

html body.aufgabengenerator-page main > section.worksheet-hero img.ag-hoernchen {
    justify-self: end;
    align-self: center;
    width: auto !important;
    height: 160px !important;
    max-width: none !important;
    max-height: none !important;
    /* Freigestellt heisst freigestellt: kein Rahmen, kein Hintergrund,
       keine Polsterung. Die Figur steht auf dem Papier. */
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    object-fit: contain !important;
}

/* Auf schmalen Geräten zählt die Überschrift, nicht der Schmuck. Die
   Shell legt die Titelbox dort ohnehin auf eine Spalte um. */
@media (max-width: 720px) {
    html body.aufgabengenerator-page main > section.worksheet-hero img.ag-hoernchen {
        height: 96px !important;
    }
}

/* ── Menü: das Inhaltsverzeichnis des kleinen Programms ────────────

   Fünf Karten, warm eingefärbt. Getrennt wird durch Abstand und Farbe,
   nicht durch fünf schwarze Rahmen.

   WARUM DIE VIELEN !important: exercise-hb-shell.css:2440 zwingt JEDEM
   <button> in main 8px Monospace in Versalien auf — gedacht für Übungs-
   knöpfe. Die Menüzeilen sind Buttons und liefen deshalb als
   „BUCHUNGSSÄTZE ÜBEN" in Achtpunkt, während Punkt 05 (ein <a>) als
   einziger richtig aussah. Die Regel trägt !important und die
   Spezifität (0,3,3); ohne !important ist sie von hier aus nicht zu
   erreichen. */

.ag-menue {
    display: grid;
    gap: 10px;
    padding: 18px;
}
.ag-menue-punkt {
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr) 1.4em;
    gap: 14px;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--ag-karte-linie);
    background: var(--ag-karte);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    color: var(--ag-tinte);
}
/* SICHTBARE ANTWORT AUF BERÜHRUNG. Der harte, versatzlose Druckschatten
   ist die einzige Schattenform, die die Designsprache zulässt — hier hebt
   er die Karte beim Überfahren an und setzt sie beim Klick wieder ab.
   Kein Weichzeichner, keine Farbwolke.

   Auch hier !important: exercise-hb-shell.css:2431 setzt für jeden Button
   in main `box-shadow: none !important`. */
.ag-menue-punkt:hover {
    background: var(--ag-karte-hover);
}
.ag-menue-punkt:active {
    background: var(--ag-karte-druck);
    transform: translate(2px, 2px);
}
.ag-menue-punkt:focus-visible {
    outline: 2px solid var(--ag-karte-akzent);
    outline-offset: -2px;
}

.ag-menue-nr {
    font-family: var(--ag-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--ag-karte-text);
}
.ag-menue-text { display: grid; gap: 3px; min-width: 0; }
.ag-menue-titel {
    font-family: var(--ag-serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--ag-tinte);
}
.ag-menue-lead {
    font-family: var(--ag-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ag-karte-text);
}
.ag-menue-pfeil {
    font-family: var(--ag-mono);
    font-size: 15px;
    color: var(--ag-karte-akzent);
    text-align: right;
}

/* Gesperrt heisst sichtbar und erklärt, nicht weg — aber ohne den Verlauf,
   damit der Unterschied auf einen Blick da ist. */
/* Gesperrt: deutlich ausgegraut, ohne jede Reaktion. Sichtbar bleibt es,
   damit der Grund lesbar ist — bedienbar sieht es nicht mehr aus. */
.ag-menue-punkt.ist-gesperrt {
    cursor: default;
    background: var(--ag-karte-grau);
    border-color: #DCD7CA;
}
.ag-menue-punkt.ist-gesperrt:hover,
.ag-menue-punkt.ist-gesperrt:active {
    background: var(--ag-karte-grau);
    transform: none;
}
.ag-menue-punkt.ist-gesperrt .ag-menue-titel,
.ag-menue-punkt.ist-gesperrt .ag-menue-nr,
.ag-menue-punkt.ist-gesperrt .ag-menue-lead { color: var(--ag-karte-grau-text); }
.ag-menue-punkt.ist-gesperrt .ag-menue-pfeil { color: #BDB6A6; }

.ag-menue-marke {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border: 1px solid var(--ag-karte-marke);
    font-family: var(--ag-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ag-karte-marke);
    vertical-align: 2px;
}

/* ── Ablauf: eine Frage je Bild ────────────────────────────────── */

.ag-ablauf { display: grid; gap: 20px; padding: 18px 18px 22px; }

.ag-ablauf-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    justify-content: space-between;
}

/* Zwei Rückwege, einmal, im Kopf des Programmkastens — dort, wo der
   Kopf ohnehin über jedem Fenster steht. Rechts neben der Überschrift,
   weil der Kopf schon flex mit space-between ist. */
.ag-fensterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    justify-content: flex-end;
}
.aufgabengenerator-page .worksheet-zone-head .ag-fensterleiste { flex: 0 0 auto; }

/* Gefüllte Marken in Saldo-Rot, klein gehalten: dieselbe Gestalt wie der
   Primärknopf der Seite, nur im Kleinformat. Knopf und Verweis sehen
   gleich aus — nebeneinander fällt jeder Unterschied auf. */
.ag-zurueck {
    padding: 6px 13px;
    border: 0;
    background: var(--ag-soll);
    text-decoration: none;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FBF8EF;
    cursor: pointer;
}
/* Die Antwort kommt über die Fläche, nicht über eine Unterstreichung.
   #9C3E23 unter hellem Text: 6,32 : 1. */
.ag-zurueck:hover { background: #9C3E23; }
.ag-zurueck:active { background: #8A3319; }
.ag-zurueck:focus-visible { outline: 2px solid var(--ag-tinte); outline-offset: 2px; }

/* Der Schritt-Stepper der Designsprache: zusammenhängende Mono-Segmente,
   der aktive Tinte-gefüllt, der Rest mit dünner Kante. Keine Blasen. */
.ag-stufen {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ag-stufen-punkt {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--ag-tinte);
    border-right-width: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ag-grau);
}
.ag-stufen-punkt:last-child { border-right-width: 1px; }
.ag-stufen-nr { font-size: 11px; }
.ag-stufen-punkt.ist-aktiv {
    background: var(--ag-tinte);
    color: var(--ag-papier);
}
.ag-stufen-punkt.ist-erledigt { color: var(--ag-gruen); }

.ag-schritt { display: grid; gap: 16px; }
.ag-schritt-frage {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--ag-tinte);
}
.ag-schritt-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

/* ── Abschnitte: das Gliederungsmittel ALLER Fenster ───────────────

   ANLASS `19.09.2026`: In den Fenstern stand alles im selben Abstand und
   mit demselben Gewicht untereinander — Lauftext, Tabelle, Werbekasten,
   Knopf. Das Auge fand keinen Halt, weil nichts sagte, wo ein Gedanke
   aufhört und der nächste anfängt.

   Die Designsprache sieht dafür genau zwei Mittel vor, und mehr braucht
   es nicht: eine dünne Trennlinie zwischen echten Abschnitten und ein
   kurzes Mono-Label, das den Abschnitt benennt. KEINE weiteren Rahmen —
   das Fenster hat schon einen.

   Jeder Abschnitt in jedem Fenster benutzt dieses Paar. */

.ag-abschnitt {
    display: grid;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--ag-linie);
}
/* Der erste Abschnitt schliesst an die Titelleiste an und braucht keine
   zweite Linie darunter. */
.ag-abschnitt:first-child { padding-top: 0; border-top: 0; }

/* Wer Abschnitte enthält, gibt seinen eigenen Abstand ab — sonst addiert
   sich die Lücke des Behälters auf die Polsterung des Abschnitts und
   zwischen zwei Blöcken stehen vierzig Pixel Nichts. */
.ag-schritt:has(> .ag-abschnitt),
.ag-start:has(> .ag-abschnitt),
.ag-fenster-inhalt:has(> .ag-abschnitt) { gap: 0; }

.ag-abschnitt-marke {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-grau);
}

/* Der Abschnitt, der die Handlung trägt, steht etwas weiter ab: Zwischen
   „hier ist die Erklärung" und „hier drückst du" gehört mehr Luft als
   zwischen zwei Erklärungen. */
.ag-abschnitt.ist-handlung { padding-top: 24px; }

/* Der Hauptknopf eines Fensters ist grösser als die Nebenknöpfe. Vorher
   war der primäre Weg genauso gross wie jeder andere Knopf und ging in
   der Fläche unter. */
.ag-abschnitt.ist-handlung .ag-knopf { padding: 14px 30px; }

/* ── Überblick: was hier passiert, in drei Schritten ───────────── */

.ag-start { gap: 18px; }

.ag-start-text {
    margin: 0;
    max-width: 62ch;
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ag-tinte-mitte);
}
/* Der erste Satz eines Fensters sagt, worum es geht — in Tinte und eine
   Spur grösser, damit er nicht wie eine Fussnote aussieht. */
.ag-abschnitt-lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ag-tinte);
}
.ag-start-text strong { color: var(--ag-tinte); font-weight: 500; }

/* DIE DREI SCHRITTE ALS TABELLE, nicht als Absatzfolge.

   Der erste Versuch war ein Grid `26px | 1fr` und die Zeile lautete
   `<span>1</span><strong>Thema.</strong> Woraus gezogen wird.` — der
   Text hinter dem <strong> ist ein EIGENER Grid-Eintrag (anonymer Kasten)
   und rutschte damit in die nächste Zeile, Spalte 1. Dort ist die Spalte
   26px breit, und „Woraus gezogen wird." brach in fünf Zeilen um.
   Jede Zelle ist jetzt ein eigenes Element, drei Spalten, feste Breiten. */
.ag-start-schritte {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ag-linie);
    list-style: none;
}
.ag-start-schritte li {
    display: grid;
    grid-template-columns: 30px 5.5em minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ag-linie);
}
.ag-start-schritte li:last-child { border-bottom: 0; }

.ag-start-nr {
    padding: 3px 0;
    border: 1px solid var(--ag-tinte);
    font-family: var(--ag-mono);
    font-size: 11px;
    color: var(--ag-tinte);
    text-align: center;
}
/* MONO, NICHT SERIFE. Vorher standen „Thema" und „Woraus gezogen wird."
   in derselben Schrift und derselben Grösse — zwei Spalten, die gleich
   aussahen und deshalb als eine gelesen wurden. Die Schrift trennt sie
   jetzt: Mono-Label links, Lesetext rechts. Dasselbe Prinzip wie überall
   sonst auf der Seite. */
.ag-start-wort {
    font-family: var(--ag-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ag-tinte);
}
.ag-start-was {
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ag-tinte-mitte);
}

/* ── Der Expert-Kasten: offen als Werbung, und er erklärt sich ─────

   Vorher stand hier ein Absatz, der mit der Marke „EXPERT" anfing und
   voraussetzte, dass jemand weiss, was das ist. Weiss niemand — die App
   erklärt Expert an keiner anderen Stelle, es gibt auch keine
   Preisseite. Der Kasten ist deshalb jetzt genau das: ein Werbekasten,
   der zuerst die Frage beantwortet.

   Das Hörnchen im Talar kommt aus dem Bestand (buchhoernchen_erfolg),
   zugeschnitten auf 220px und 25 KB statt 1536×1024 und 285 KB. Ein
   Emoji wäre der Designsprache fremd; das Maskottchen ist ohnehin das
   Gesicht des Hauses. */

.ag-expert {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 18px 20px;
    border: 1px solid var(--ag-ocker);
    border-left-width: 3px;
    background: #F7EFE2;
}
.ag-expert-bild {
    width: 96px;
    height: auto;
    border: 0;
}
.ag-expert-text { display: grid; gap: 10px; min-width: 0; }

.ag-expert-kicker {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-karte-marke);
}
.ag-expert-satz {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ag-karte-text);
}
.ag-expert-satz strong { color: var(--ag-tinte); font-weight: 500; }

/* Drei Zeilen, drei Häkchen — als Aufzählung lesbar, nicht als Fliesstext. */
.ag-expert-liste {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ag-expert-liste li {
    position: relative;
    padding-left: 20px;
    font-family: var(--ag-serif);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ag-karte-text);
}
.ag-expert-liste li::before {
    content: "+";
    position: absolute;
    left: 0;
    font-family: var(--ag-mono);
    font-size: 14px;
    color: var(--ag-karte-marke);
}

.ag-expert-fuss {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    line-height: 1.6;
    color: var(--ag-karte-grau-text);
}

/* Auf schmalen Geräten steht das Hörnchen über dem Text, nicht daneben. */
@media (max-width: 560px) {
    .ag-expert { grid-template-columns: 1fr; gap: 12px; }
    .ag-expert-bild { width: 76px; }
}

/* ── Umfang: zwei Karten statt acht Haken ──────────────────────────

   Dieselbe Kartensprache wie das Menü: flach, warm, mit Druckschatten
   beim Überfahren. Wer oben gelernt hat, dass sich Karten so anfühlen,
   soll das hier nicht neu lernen müssen.

   DER RADIOPUNKT BEKOMMT EINE EIGENE SPALTE. Vorher lag er als eigene
   Grid-ZEILE über dem Titel, wurde über die volle Kartenbreite gelegt
   und stand damit mittig im Nichts — dazu eine leere Zeile Höhe, die
   niemand brauchte. Jetzt: 20px-Spalte links, Titel und Beschreibung
   rechts daneben, `justify-self: start` ausdrücklich gesetzt statt auf
   Vorgaben zu bauen. */

.ag-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.ag-wahlkarte {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--ag-karte-linie);
    background: var(--ag-karte);
    cursor: pointer;
}
.ag-wahlkarte input {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 4px 0 0;
    accent-color: var(--ag-soll);
}
.ag-wahlkarte-titel {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--ag-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ag-tinte);
}
.ag-wahlkarte-lead {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--ag-serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ag-karte-text);
}

/* Dieselbe Antwort auf Berührung wie im Menü. */
.ag-wahlkarte:hover {
    background: var(--ag-karte-hover);
    box-shadow: 3px 3px 0 var(--ag-tinte);
}
.ag-wahlkarte:active {
    background: var(--ag-karte-druck);
    box-shadow: 1px 1px 0 var(--ag-tinte);
    transform: translate(2px, 2px);
}
.ag-wahlkarte:focus-within {
    outline: 2px solid var(--ag-karte-akzent);
    outline-offset: -2px;
}

/* Gewählt wird mit der kräftigen Linie gezeigt. Der Innenabstand geht um
   den Zuwachs zurück, damit die Karte nicht springt. */
.ag-wahlkarte.ist-gewaehlt {
    border: 2px solid var(--ag-tinte);
    padding: 13px 15px;
}

/* Gesperrt: grau, ohne jede Reaktion — wie Menüpunkt 02 und 03. */
.ag-wahlkarte.ist-gesperrt {
    cursor: default;
    background: var(--ag-karte-grau);
    border-color: #DCD7CA;
}
.ag-wahlkarte.ist-gesperrt:hover,
.ag-wahlkarte.ist-gesperrt:active {
    background: var(--ag-karte-grau);
    box-shadow: none;
    transform: none;
}
.ag-wahlkarte.ist-gesperrt .ag-wahlkarte-titel,
.ag-wahlkarte.ist-gesperrt .ag-wahlkarte-lead { color: var(--ag-karte-grau-text); }

.ag-themenwahl.ag-abschnitt { gap: 20px; }

/* ── Menge: abzählbare Knöpfe, kein Schieber ───────────────────── */

.ag-mengen { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-menge {
    min-width: 58px;
    padding: 12px 14px;
    border: 1px solid var(--ag-tinte);
    background: var(--ag-papier);
    font-family: var(--ag-mono);
    font-size: 16px;
    color: var(--ag-tinte);
    cursor: pointer;
}
.ag-menge:hover { background: var(--ag-flaeche); }
.ag-menge.ist-gewaehlt {
    background: var(--ag-tinte);
    color: var(--ag-papier);
}

/* ── Häufige Fragen: dieselbe Kartenform, nur ruhig ─────────────

   Vorher stand hier ein Block mit fremder Anmutung: Zeilen mit rundum
   gezogener Kante, das rote Standarddreieck von <summary> davor, eine
   andere Schriftgrösse als oben. Er sah aus wie von einer anderen Seite.
   Jetzt tragen die Fragen dieselbe Kartengeometrie wie das Menü — gleiche
   Polsterung, gleicher Titelgrad, das Zeichen rechts im selben Feld wie
   der Pfeil. Nur eingefärbt sind sie nicht: Das Menü soll das Laute
   bleiben. */

.ag-faq { display: grid; gap: 10px; padding: 18px; }

.ag-faq-punkt {
    border: 1px solid var(--ag-linie);
    background: var(--ag-flaeche);
}
.ag-faq-punkt summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.4em;
    gap: 14px;
    align-items: baseline;
    padding: 16px 18px;
    font-family: var(--ag-serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--ag-tinte);
    cursor: pointer;
    list-style: none;
}
/* Das Standarddreieck weg — in beiden Schreibweisen, sonst bleibt es in
   Safari stehen. */
.ag-faq-punkt summary::-webkit-details-marker { display: none; }
.ag-faq-punkt summary::after {
    content: "+";
    font-family: var(--ag-mono);
    font-size: 16px;
    color: var(--ag-soll);
    text-align: right;
}
.ag-faq-punkt[open] summary::after { content: "−"; }
.ag-faq-punkt summary:hover { background: var(--ag-papier); }
.ag-faq-punkt summary:focus-visible {
    outline: 2px solid var(--ag-soll);
    outline-offset: -2px;
}
.ag-faq-punkt p {
    margin: 0;
    padding: 0 18px 16px;
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ag-tinte-mitte);
}
.ag-faq-punkt p + p { padding-top: 0; }
.ag-faq-punkt p:first-of-type { padding-top: 2px; }

/* ── Knöpfe: rechteckig, Tinte-Rahmen, Mono-Label ──────────────── */

.ag-aktion { display: grid; gap: 10px; }
.ag-aktion-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

.ag-knopf,
.ag-knopf-zweit,
.ag-knopf-klein {
    font-family: var(--ag-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--ag-tinte);
    border-radius: 0;
    cursor: pointer;
}
.ag-knopf {
    padding: 10px 22px;
    font-size: 11px;
    background: var(--ag-soll);
    color: #FBF8EF;
}
.ag-knopf-zweit {
    padding: 10px 18px;
    font-size: 11px;
    background: transparent;
    color: var(--ag-tinte);
}
.ag-knopf-klein {
    padding: 5px 10px;
    font-size: 10px;
    background: transparent;
    color: var(--ag-grau);
    border-color: var(--ag-linie);
}
.ag-knopf:hover      { background: #C0392B; }
.ag-knopf-zweit:hover { background: var(--ag-papier); }
.ag-knopf[disabled], .ag-knopf-zweit[disabled] { opacity: .5; cursor: default; }

.ag-textlink {
    margin-left: 12px;
    font-family: var(--ag-serif);
    font-size: 14px;
    color: var(--ag-tinte-mitte);
}

/* ── Zeilen mit Auskunft: Vorrat, Stand, Stufe, Zähler ─────────── */

.ag-vorrat, .ag-stand, .ag-stufe, .ag-zaehler, .ag-hinweis {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 11px;
    color: var(--ag-grau);
}
.ag-stufe, .ag-zaehler { margin-top: 10px; }
.ag-satz-kopf-rechts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* ── Die Aufgabenkarte: EINE Fläche, ein Rahmen ────────────────── */

.ag-liste { display: grid; gap: 16px; margin-top: 18px; }

.ag-karte {
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--ag-linie);
    background: var(--ag-flaeche);
}
.ag-karte.ist-richtig { border-left: 2px solid var(--ag-gruen); }
.ag-karte.ist-falsch  { border-left: 2px solid var(--ag-soll); }

.ag-karte-kopf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: baseline;
}
/* Die Nummer ist der Anker: Sie sagt „hier fängt etwas Neues an", und
   zwar schon aus dem Augenwinkel. Vorher war sie so gross wie eine
   Fussnote und in Grau — beim Scrollen unsichtbar. */
.ag-karte-nummer {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 19px;
    color: var(--ag-soll);
}
.ag-karte-kontext {
    margin: 0 0 5px;
    font-family: var(--ag-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ag-ocker-text);
}
/* DER LESETEXT DER SEITE. Vorher ohne jede Zuweisung. */
.ag-karte-angabe {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ag-tinte);
}
.ag-karte-herkunft {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    color: var(--ag-grau);
}

/* ── Arbeitsfläche: Aufgaben links, Kontenplan rechts ──────────────

   Wie in den Übungen. Der Plan klebt beim Scrollen mit, sonst müsste man
   für jedes Konto wieder nach oben — bei zehn Aufgaben untereinander wären
   die unteren sonst gar nicht lösbar.

   HIER STAND `align-items: start`, MIT EINER FALSCHEN BEGRÜNDUNG: „sonst ist
   der Kasten so hoch wie die Spalte und hat nichts, woran er kleben kann."
   Das gilt, wenn das klebende Element SELBST das Rasterkind ist — dann
   braucht es ein Rasterfeld, das höher ist als es.

   Hier ist es anders: Das Rasterkind ist die Hülle `.ag-plan`, das klebende
   Element `.l6-account-plan` steckt darin. Wie weit ein klebendes Element
   wandern darf, begrenzt sein ELTERNKASTEN. Mit `start` war die Hülle nur so
   hoch wie der Plan selbst — also null Weg, und er stand fest. Die Hülle
   muss die volle Zeilenhöhe bekommen, damit der Plan darin mitlaufen kann.

   `overflow: clip` an der Zone stört nicht: Es schneidet ab, ohne einen
   Scrollbehälter zu erzeugen. Genau deshalb steht dort clip und nicht
   hidden — siehe css/exercise-worksheet-pattern.css. */

.ag-arbeitsflaeche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 24px;
    align-items: stretch;
    padding: 18px;
}
/* `align-content: start` lässt die Spalte nur so hoch werden wie ihr
   Inhalt — für die klebende Uhr darin ist das gleichgültig, weil sie am
   Scrollbereich des Fensters hängt und nicht an der Spaltenhöhe. */
.ag-arbeitsspalte { min-width: 0; display: grid; gap: 0; align-content: start; }

/* Die Hülle spannt die volle Zeilenhöhe auf — das ist der Weg, den der
   klebende Plan darin zurücklegen kann. Sie selbst ist unsichtbar. */
.ag-plan { align-self: stretch; }

/* Der Kontenplan bringt sein Aussehen aus css/exercise-worksheet-level6.css
   mit (.l6-account-plan und die .l6-Regeln darunter). Hier steht nur, was
   die Lage in DIESER Seite betrifft — die Klebehöhe hängt an unserem
   Kopfbereich, nicht an dem der Übungsseiten.

   Alles andere absichtlich nicht: Der Vertrag verbietet, die .l6-Regeln in
   einem anderen Stylesheet zu überschreiben. */
/* ── Die Ablagefläche fürs Konto ───────────────────────────────────

   Gestalt aus css/exercise-worksheet-level6.css (.l6-drop-slot,
   .l6-dropped-account). Hier steht nur, was die Zeile betrifft: Die
   Ablage ist so breit wie das frühere Eingabefeld und genauso hoch wie
   das Betragsfeld daneben. */
.ag-zeile .ag-konto {
    min-height: 40px;
    padding: 4px 6px;
    text-align: left;
}

/* ── Was an der Antwort nicht stimmt ───────────────────────────────

   Eine Zeile je eingereichter Buchungszeile, klein und ruhig. Kein
   Kasten: Die Rückmeldung sitzt schon in einem. */
.ag-befunde {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ag-befund {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--ag-linie);
}
.ag-befund:last-child { border-bottom: 0; }

.ag-befund-zeichen {
    font-family: var(--ag-mono);
    font-size: 13px;
    color: var(--ag-soll);
}
.ag-befund.ist-gut .ag-befund-zeichen { color: var(--ag-gruen); }
.ag-befund.ist-fehlt .ag-befund-zeichen { color: var(--ag-ocker-text); }

.ag-befund-text {
    font-family: var(--ag-serif);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ag-tinte-mitte);
}
.ag-befund-text strong { font-family: var(--ag-mono); font-size: 11px; letter-spacing: 1px; }

.ag-befund-wort {
    font-family: var(--ag-mono);
    font-size: 9.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ag-soll);
    white-space: nowrap;
}
.ag-befund.ist-gut .ag-befund-wort { color: var(--ag-gruen); }

.ag-rueckmeldung-fuss { margin: 10px 0 0; }

/* Das Ziel einer Ablage muss man sehen, BEVOR man loslässt. */
.ag-konto.ist-ziel {
    outline: 2px dashed var(--ag-soll);
    outline-offset: 1px;
    background: var(--ag-karte);
}


/* Schmal: der Plan wandert unter die Aufgaben und klebt nicht mehr. */
@media (max-width: 900px) {
    .ag-arbeitsflaeche { grid-template-columns: 1fr; }
    .ag-plan { position: static; max-height: none; }
}

/* Die Arbeitsfläche der Prüfung steckt schon in einem Abschnitt mit
   eigener Polsterung — eine zweite darin schöbe den Kontenplan nach
   innen und liesse rechts einen Streifen frei. */
.ag-abschnitt > .ag-arbeitsflaeche { padding: 0; }

/* ── Wo die nächste Aufgabe anfängt ────────────────────────────────

   Die Karten standen mit gleichem Abstand untereinander und ohne Kante
   dazwischen — beim Scrollen war nicht zu sehen, wo eine Aufgabe endet
   und die nächste beginnt. Eine Haarlinie zwischen den Karten plus eine
   grosse Nummer reicht; ein Rahmen je Karte wäre wieder ein Kasten zu
   viel. */

.ag-liste > .ag-karte + .ag-karte {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--ag-linie);
}

/* ── Buchungsraster: Soll | an | Haben ─────────────────────────── */

.ag-satz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-top: 14px;
    border-top: 1px solid var(--ag-linie);
}
.ag-seite-block { display: grid; gap: 7px; min-width: 0; }

/* „SOLL" in Saldo-Rot — das erkennt jeder Buchhalter sofort. */
.ag-seite-marke {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-grau);
}
.ag-seite-block:first-child .ag-seite-marke { color: var(--ag-soll); }

.ag-seite-zeilen { display: grid; gap: 6px; }
/* VERTAUSCHT AM 20.09.2026, und das ist die bessere Verteilung.

   Bis dahin bekam das Konto 5,5em und der Betrag den Rest — sinnvoll,
   solange im Kontofeld eine vierstellige Zahl stand. Seit dort die
   Ablagefläche sitzt, steht darin „2000 Forderungen aus L&L", also ein
   ganzer Name; der Betrag ist dagegen immer nur eine Zahl.

   Die 7em für den Betrag sind kein glatter Tausch der alten 5,5em: Der
   längste Betrag, der überhaupt vorkommen kann, ist „48.000,00" mit neun
   Zeichen. In Monospace sind das rund 5,4em, dazu Polsterung und Rahmen —
   mit 5,5em wäre er abgeschnitten. Nachgezählt über Pool und alle vier
   Generatoren, nicht geschätzt. */
.ag-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 7em; gap: 6px; }
.ag-zeile input {
    padding: 7px 8px;
    border: 1px solid var(--ag-linie);
    border-radius: 0;
    background: #FFFFFF;
    font-family: var(--ag-mono);
    font-size: 13px;
    color: var(--ag-tinte);
    min-width: 0;
}
.ag-betrag { text-align: right; }
.ag-zeile input:focus-visible { outline: 2px solid var(--ag-soll); outline-offset: 1px; }
.ag-zeile input[disabled] { background: var(--ag-papier); color: var(--ag-grau); }

.ag-an {
    align-self: center;
    margin: 0;
    font-family: var(--ag-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ag-grau);
}

.ag-karte-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--ag-linie);
}
.ag-zeilenhinweis {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10.5px;
    color: var(--ag-grau);
}

/* ── Rückmeldung ───────────────────────────────────────────────── */

.ag-rueckmeldung { display: grid; gap: 12px; }

/* „Richtig." ist ein Belohnungsmoment — und nur dort steht ein Stempel.
   Er wirkt, WEIL er selten ist. */
.ag-rueckmeldung.ist-richtig .ag-rueckmeldung-kopf {
    justify-self: start;
    margin: 0;
    padding: 3px 12px;
    border: 2px solid var(--ag-gruen);
    border-radius: 3px;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-gruen);
    transform: rotate(-6deg);
}
.ag-rueckmeldung.ist-falsch .ag-rueckmeldung-kopf,
.ag-rueckmeldung.ist-offen .ag-rueckmeldung-kopf {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 14px;
    color: var(--ag-tinte);
}
.ag-rueckmeldung.ist-offen { font-family: var(--ag-serif); font-size: 14px; color: var(--ag-grau); }

/* Die T-Konto-Tafel bringt ihre Gestalt aus css/tkonto-werkstatt.css mit.
   Hier steht nur, wie sie sich einfügt. */
/* DAS ERGEBNIS NIMMT DIE GANZE BREITE DER KARTE.

   Hier stand `class="tkw-flaeche ag-tkonto"`, um an die Klassenfarben zu
   kommen. `.tkw-flaeche` setzt aber weiter unten in
   css/tkonto-werkstatt.css ein ZWEISPALTIGES Raster (Arbeitsfläche links,
   Kontenplan rechts) — das T-Konto sass damit in der linken Spalte, und
   rechts blieb die halbe Karte leer. Dieselbe Falle wie beim Kontenplan
   der Seitenleiste; die Tokens und das Layout stecken in derselben Klasse.

   Die Farben kommen jetzt über `.ag-tkonto` an dieselbe Token-Regel. */
.ag-tkonto { margin: 0; width: 100%; }
.ag-tkonto .tkw-tkonto { margin-top: 0; }

/* SOLL UND HABEN STEHEN UNTER SOLL UND HABEN.

   Die Eingabezeile darüber teilt sich in Konto (Rest) und Betrag (7em).
   Das T-Konto benutzt in der Werkstatt feste 112px für die Beträge — mit
   derselben 7em-Spalte liegen die Beträge der Auswertung unter den
   Beträgen der Eingabe und die beiden Hälften unter den beiden Blöcken.

   Nur hier umgestellt, nicht in der Werkstatt: Die Übungen daneben haben
   eine andere Eingabezeile und sollen ihre Breite behalten. */
.ag-tkonto .tkw-zeile {
    grid-template-columns: minmax(0, 1fr) 7em minmax(0, 1fr) 7em;
}
.ag-tkonto-zelle { display: flex; align-items: center; padding: 7px 10px; }
.ag-tbetrag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 10px;
    font-family: var(--ag-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ag-tinte);
}

/* ── Abschluss ─────────────────────────────────────────────────── */

.ag-abschluss {
    display: grid;
    gap: 12px;
    justify-items: start;
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid var(--ag-linie);
    background: var(--ag-flaeche);
}
.ag-abschluss .task-label {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-gruen);
}
.ag-abschluss p:not(.task-label) {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.6;
}

/* ── Wiedervorlage und Stufenhinweis ───────────────────────────── */

/* Ocker heisst „läuft noch" — nicht Saldo-Rot: Rot trägt hier die falsche
   Antwort, und der Kasten ist kein Tadel. */
.ag-wiedervorlage,
.ag-werbung {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--ag-linie);
    border-left: 2px solid var(--ag-ocker);
    background: var(--ag-papier);
}
.ag-wiedervorlage-text,
.ag-werbung p {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ag-tinte);
}
.ag-werbung { display: block; }
.ag-werbung p + p { margin-top: 10px; }

/* ── Kompakte Form (Landeseite) ────────────────────────────────── */

.ag-kompakt {
    display: grid;
    gap: 18px;
    margin: 22px 0 6px;
    padding: 20px;
    border: 1px solid var(--ag-tinte);
    background: var(--ag-flaeche);
}
.ag-kompakt-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 26px;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ag-linie);
}
.ag-kompakt-leiste .ag-aktion {
    flex: 1 1 260px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: flex-end;
}

/* ── Schmaler ──────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .ag-satz { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ag-an { justify-self: start; }
    .ag-karte-kopf { grid-template-columns: auto minmax(0, 1fr); }
    .ag-karte-herkunft { grid-column: 2; }
    .ag-kompakt-leiste .ag-aktion { justify-content: flex-start; }
    .ag-auswahl, .ag-karte, .ag-kompakt { padding: 15px; }
}


/* ── Das Erbe der Shell, an einer Stelle zurückgenommen ────────────

   exercise-hb-shell.css:2426 zwingt JEDEM <button> in main auf:
   8px, Monospace, Versalien, kein Radius, kein Schatten — alles mit
   !important. Gedacht ist die Regel für die Knöpfe der Übungsseiten.

   ZWEI MAL FALSCH GEMACHT, deshalb steht die Rechnung hier:
   Ein !important allein genügt nicht. Tragen beide Regeln !important,
   entscheidet weiter die Spezifität, und die der Shell ist (0,3,4):
   html + :not(.klasse) + body + .hb-exercise-shell-page + main +
   :is(…, a[class*="back-link"]). Ein schlichtes `.ag-menue-punkt`
   liegt bei (0,1,0) und verliert — die Menükarten standen deshalb
   weiter in Achtpunkt-Versalien, und Punkt 05 (ein <a>, den die Regel
   nicht trifft) als einziger richtig. Auch die Einrückung kam daher:
   die erste Spalte misst 2.6em, und em rechnet auf die erzwungenen
   8px statt auf 17px.

   Der Präfix unten kommt auf dieselben (0,3,4) — html, body, main,
   section sind vier Elemente, .aufgabengenerator-page,
   .worksheet-stage und die Klasse in :is() drei Klassen. Bei
   Gleichstand gewinnt das später geladene Blatt, und
   aufgabengenerator.css steht in der Seite hinter der Shell.

   Alles, was der Baustein zeichnet, liegt in section.worksheet-stage —
   auch das Fragenfenster, das dorthin wandert. */

html body.aufgabengenerator-page main section.worksheet-stage .ag-menue-punkt {
    font-family: var(--ag-serif) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    /* KEINE VERSALIEN. Die Designsprache lässt sie nur für kurze
       Mono-Labels zu, nie für Fliesstext — und „Aufgaben ziehen und
       gleich buchen — Soll an Haben, mit Kontrolle." ist Fliesstext. */
    text-transform: none !important;
    border: 1px solid var(--ag-karte-linie) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body.aufgabengenerator-page main section.worksheet-stage .ag-menue-punkt:hover {
    box-shadow: 3px 3px 0 var(--ag-tinte) !important;
}
html body.aufgabengenerator-page main section.worksheet-stage .ag-menue-punkt:active {
    box-shadow: 1px 1px 0 var(--ag-tinte) !important;
}
html body.aufgabengenerator-page main section.worksheet-stage .ag-menue-punkt.ist-gesperrt,
html body.aufgabengenerator-page main section.worksheet-stage .ag-menue-punkt.ist-gesperrt:hover {
    border-color: #DCD7CA !important;
    box-shadow: none !important;
}

/* Die Mengenknöpfe tragen eine Zahl, und die soll man treffen können. */
html body.aufgabengenerator-page main section.worksheet-stage .ag-menge {
    font-family: var(--ag-mono) !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Bei den Handlungsknöpfen ist Monospace in Versalien gewollt — 8px nicht. */
html body.aufgabengenerator-page main section.worksheet-stage .ag-knopf,
html body.aufgabengenerator-page main section.worksheet-stage .ag-knopf-zweit {
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

/* Rückweg-Knopf und Rückweg-Link stehen nebeneinander und müssen
   deshalb dieselbe Grösse haben; die Regel trifft nur den Knopf. */
html body.aufgabengenerator-page main section.worksheet-stage .ag-zurueck {
    font-family: var(--ag-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ── Prüfung und Arbeitsblätter ────────────────────────────────────

   Zwei neue Fenster (Schritt G.5). Sie erben die Fensterform unten und
   bringen nur mit, was ihnen eigen ist. */

.ag-fenster-inhalt { display: grid; gap: 28px; padding: 18px 18px 22px; }

/* ── Der Hinweis vor dem Start ─────────────────────────────────────

   Gelbes Ausrufezeichen auf Ocker. Die Designsprache kennt Ocker als
   „aktiv, Achtung" — Saldo-Rot wäre hier zu viel, es bedeutet „falsch",
   und falsch ist daran nichts. */

.ag-warnung {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--ag-ocker);
    border-left: 3px solid var(--ag-ocker);
    background: #FDF6E3;
}
.ag-warnung-zeichen {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ag-ocker-text);
    background: #F7D774;
    font-family: var(--ag-mono);
    font-size: 15px;
    font-weight: 500;
    /* Tinte auf dem Gelb: 11,54 : 1. Ocker-Text käme auf 4,87 — er bestünde
       knapp, aber ein Ausrufezeichen soll man nicht lesen müssen. */
    color: var(--ag-tinte);
}
.ag-warnung-text {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ag-tinte-mitte);
}
.ag-warnung-text strong { color: var(--ag-tinte); font-weight: 500; }

/* ── Die Rückfrage vor dem Verlassen ───────────────────────────────

   Dieselbe Fensterform wie überall: gerahmtes Blatt mit hartem
   Druckschatten, kein Weichzeichner. */

.ag-frage {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(35, 32, 27, 0.55);
}
.ag-frage[hidden] { display: none; }

.ag-frage-blatt {
    display: grid;
    gap: 14px;
    width: min(460px, 100%);
    padding: 24px;
    border: 2px solid var(--ag-tinte);
    background: var(--ag-flaeche);
    box-shadow: 6px 6px 0 var(--ag-tinte);
}
.ag-frage-marke {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ag-soll);
}
.ag-frage-text {
    margin: 0;
    font-family: var(--ag-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ag-tinte-mitte);
}
.ag-frage-text strong { color: var(--ag-tinte); font-weight: 500; }
.ag-frage-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Der harmlose Knopf steht vorn. Wer schnell klickt, trifft ihn. */
    justify-content: flex-start;
}

/* ── Die Uhr im Seitenrand ─────────────────────────────────────────

   Sie hängt am Fenster (position: fixed), nicht am Textfluss. Drei
   Anläufe haben dahin geführt:

     In der Kopfzeile der Zone scrollte sie bei der dritten Aufgabe aus
     dem Bild — ausgerechnet das Element, das man in einer Prüfung
     dauernd sehen will.

     In der Arbeitsspalte blieb sie zwar stehen, schob aber die erste
     Aufgabe nach unten und stand mitten im Textfluss.

     Fest am Fenster liegt sie neben dem Rahmen, nimmt keinen Platz und
     bleibt stehen. Das geht nur, weil kein Vorfahre transform, filter
     oder perspective trägt — sonst wäre sie an dessen Kasten gefesselt
     und vom overflow-clip der Zone abgeschnitten.

   DIE RECHNUNG FÜR LEFT: Das Fenster ist 1160px breit und zentriert,
   seine linke Kante liegt also bei 50% − 580px. Die Uhr ist 84px breit
   und hält 22px Abstand — macht 50% − 686px. */

.ag-uhr {
    position: fixed;
    top: 108px;
    left: calc(50% - 686px);
    z-index: 30;
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 84px;
    padding: 9px 6px;
    border: 1px solid var(--ag-tinte);
    background: var(--ag-papier);
    color: var(--ag-tinte);
}
.ag-uhr-blatt { width: 26px; height: 26px; display: block; }
.ag-uhr-zeit {
    font-family: var(--ag-mono);
    font-size: 15px;
    /* Ziffern gleicher Breite — sonst zuckt die Anzeige im Sekundentakt. */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Die letzte Minute in Saldo-Rot, mit Fläche: Der Farbwechsel allein wäre
   für Farbenblinde kein Signal, der gefüllte Kasten ist es. */
.ag-uhr.ist-knapp {
    border-color: var(--ag-soll);
    background: var(--ag-soll);
    color: #FBF8EF;
}

/* Unter 1420px gibt es links keinen Rand mehr — dann steht die Uhr wieder
   im Fluss, oben in der Arbeitsfläche, statt über den Inhalt zu rutschen. */
@media (max-width: 1420px) {
    .ag-uhr {
        position: sticky;
        top: 90px;
        left: auto;
        justify-self: start;
        grid-auto-flow: column;
        justify-items: start;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0 auto 14px;
        max-width: 1160px;
        padding: 6px 12px;
    }
}

/* „Gemerkt." an der Prüfungskarte — leise, aber sichtbar. */
.ag-pmerker {
    margin: 0;
    font-family: var(--ag-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ag-gruen);
}

/* Ein Haken mit Beschriftung daneben, nicht darüber. */
.ag-haken {
    display: flex;
    gap: 9px;
    align-items: baseline;
    font-family: var(--ag-serif);
    font-size: 14.5px;
    color: var(--ag-tinte-mitte);
    cursor: pointer;
}
.ag-haken input { margin: 0; accent-color: var(--ag-soll); }

/* Zwei Zahlenfelder nebeneinander: Blätter × Aufgaben je Blatt. */
.ag-felder-zwei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
    gap: 12px;
}
.ag-feldchen { display: grid; gap: 5px; }
.ag-feldchen > span {
    font-family: var(--ag-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ag-grau);
}
.ag-feldchen input {
    padding: 9px 10px;
    border: 1px solid var(--ag-tinte);
    border-radius: 0;
    background: var(--ag-papier);
    font-family: var(--ag-mono);
    font-size: 16px;
    color: var(--ag-tinte);
}
.ag-feldchen input:focus-visible {
    outline: 2px solid var(--ag-soll);
    outline-offset: 1px;
}

/* Eine in der Auswertung falsche Karte trägt die Marke links, wie beim
   Üben auch. */
.ag-pruefung-zone .ag-karte.ist-falsch { border-left: 2px solid var(--ag-soll); }

/* ── Die Fenster: rechteckig, gerahmt, mit Druckschatten ───────────

   „Wie ein Fenster im Rahmen, quasi ein gefaktes Pop-up." Drei Mittel,
   mehr braucht es nicht:

     1. Begrenzte Breite und zentriert. Vorher lief der Kasten über die
        ganze Spalte, während der Text bei 62 Zeichen endete — die rechte
        Hälfte stand leer, und nichts daran sah nach Fenster aus.
     2. Ein kräftiger Rahmen (2px Tinte) statt der Haarlinie des Musters.
     3. Der harte Druckschatten. Er ist die einzige Schattenform, die die
        Designsprache zulässt (kein Weichzeichner), und genau er lässt
        eine Fläche über dem Papier liegen statt darin.

   Alle drei Fenster tragen dasselbe Mass, damit beim Wechseln nichts
   springt: Programmkasten, Aufgabensatz, Fragen. */

.aufgabengenerator-page .ag-programm,
.aufgabengenerator-page .ag-satz-zone,
.aufgabengenerator-page .ag-pruefung-zone,
.aufgabengenerator-page .ag-pdf-zone,
.aufgabengenerator-page [data-ag-faq] {
    /* 1160px statt 820: Auf einem grossen Bildschirm stand das Fenster als
       schmale Säule in viel Leere, und der Aufgabensatz braucht die Breite
       ohnehin — links die Aufgaben, rechts der Kontenplan. Der Lesetext
       bleibt schmal, dafür sorgt max-width an .ag-start-text; eine Zeile
       über 1100px liest sich nicht. */
    max-width: 1160px;
    margin-inline: auto;
    border: 2px solid var(--ag-tinte);
    box-shadow: 6px 6px 0 var(--ag-tinte);
    background: var(--ag-flaeche);
}

/* Die Kopfleiste ist die Fensterleiste: eigener Ton, kräftig abgesetzt. */
.aufgabengenerator-page .ag-programm > .worksheet-zone-head,
.aufgabengenerator-page .ag-satz-zone > .worksheet-zone-head,
.aufgabengenerator-page .ag-pruefung-zone > .worksheet-zone-head,
.aufgabengenerator-page .ag-pdf-zone > .worksheet-zone-head,
.aufgabengenerator-page [data-ag-faq] > .worksheet-zone-head {
    padding: 12px 18px;
    background: var(--ag-papier);
    border-bottom: 2px solid var(--ag-tinte);
}