/* ============================================================
   KlimaCraft Kälteschein-Trainer — Design nach Spezifikation
   vom 23.09.2026 (Sheet 1 Einstieg, Sheet 2 Learning Suite).

   Designsystem laut Spec:
   Farben aus klimacraft.de, Kopfschrift Bricolage Grotesque,
   Fließtext Inter, Container 880 px, Radien 16/12/10/999.

   ABWEICHUNG, bewusst: klimacraft.de setzt in den Überschriften
   Sora ein, die Spec verlangt Bricolage Grotesque. Es steht in
   --font-kopf, damit der Wechsel eine Zeile ist.

   Kein E-Mail-Block, kein Wiederherstellen, keine Schranke —
   der Trainer speichert ausschließlich im Browser.
   ============================================================ */

/* ---------- Schriften ----------
   Dieselben Dateien wie die uebrige Website: Sora fuer Ueberschriften,
   Inter fuer den Fliesstext. Die Spezifikation nennt Bricolage Grotesque;
   als Unterseite von klimacraft.de waere das ein Bruch, deshalb Sora.
   Umschalten ist eine Zeile: --font-kopf weiter unten.
   ---------------------------------------------------------------- */

/* ---------- Marken ---------- */
#trainer{
  --t-ink:#0c1a3b; --t-text:#1e2a44; --t-muted:#5b6780;
  --t-line:#e3e8f2; --t-flaeche:#f7f9fc; --t-blau50:#f4f8ff;
  --t-blau:#2158e8; --t-blau-h:#1a47c2; --t-blau100:#dbe7ff; --t-blau-ton:#eef4ff;
  --t-orange:#f25a1f;
  --t-gruen:#16a34a; --t-gruen-d:#15803d; --t-gruen-bg:#ecfdf3;
  --t-rot:#dc2626; --t-rot-bg:#fef2f2;
  --t-amber:#b45309; --t-amber-bg:#fff4e0;
  --t-bal-rot:#e5484d; --t-bal-orange:#f59e0b; --t-bal-gruen:#16a34a;
  --t-r-karte:16px; --t-r-opt:12px; --t-r-btn:10px;
  --t-schatten:0 1px 2px #0c1a3b0f, 0 8px 24px #0c1a3b14;
  --t-schatten-hoch:0 2px 6px #0c1a3b14, 0 14px 34px #0c1a3b1f;
  --t-font-kopf:'Sora',system-ui,-apple-system,sans-serif;   /* Website-Kopfschrift */
  --t-font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Der Trainer ist ein Abschnitt der Website, kein eigenes Dokument.
     Kopfzeile, Fusszeile, Schriften und die Breite .wrap kommen aus
     style.css. Diese Datei betrifft nur noch das, was IM Trainer steht,
     und ist dafuer komplett auf #trainer eingeschraenkt. Alle Variablen
     tragen --t-, damit sie sich mit denen der Website nicht beissen. */
  display:flex; flex-direction:column; min-height:60vh;
  padding-top:118px; padding-bottom:70px;
  color:var(--t-text); font:400 16px/1.6 var(--t-font-text);
}
#trainer h1,#trainer h2,#trainer h3{font-family:var(--t-font-kopf);color:var(--t-ink);margin:0;letter-spacing:-.01em}
#trainer h1{font-weight:800;font-size:44px;line-height:1.08}
#trainer h2{font-weight:700;font-size:26px;line-height:1.2}
#trainer h3{font-weight:700;font-size:20px;line-height:1.25}
#trainer p{margin:0}
#trainer a{color:var(--t-blau);text-decoration:none}
#trainer a:hover{text-decoration:underline}
#trainer .verborgen{display:none !important}
#trainer .mini{font-size:13px;color:var(--t-muted)}
#trainer .hin{font-size:14px;color:var(--t-muted);line-height:1.55}
#trainer :focus-visible{outline:3px solid var(--t-blau100);outline-offset:2px;border-radius:6px}

/* ---------- Gerüst ---------- */
/* main trägt .wrap — eine Klasse schlägt den Elementselektor, egal in
   welcher Reihenfolge. Deshalb muss der senkrechte Abstand hier an
   main.wrap hängen, sonst greift er nie. Genau das war der Grund für
   die fehlende Luft unter der Kopfzeile. */

/* Lernkarte und Prüfungskarte stehen senkrecht mittig im Bildschirm.
   flex:1 statt einer festen Höhe: wird die Karte höher als der Platz,
   wächst der Abschnitt mit und nichts wird oben abgeschnitten. */
#trainer main>#sKarte, #trainer main>#sPruefung{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
/* Der untere Kartenabstand würde die Zentrierung um 16 px verziehen. */
#trainer #sKarte>.karte, #trainer #sPruefung>.karte{margin-bottom:0}

/* ---------- Fußzeile ---------- */

/* ---------- Karten ---------- */
#trainer .karte{background:#fff;border:1px solid var(--t-line);border-radius:var(--t-r-karte);
  box-shadow:var(--t-schatten);padding:26px;margin-bottom:16px}
#trainer .karte.eng{padding:20px}
#trainer .kh{font:700 20px var(--t-font-kopf);color:var(--t-ink);margin:0 0 4px}

/* ---------- Knöpfe ---------- */
#trainer .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px var(--t-font-text);border-radius:var(--t-r-btn);border:1.5px solid transparent;
  padding:12px 20px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;
  text-decoration:none;white-space:nowrap}
#trainer .btn:hover{text-decoration:none}
#trainer .btn-primary{background:var(--t-blau);color:#fff}
#trainer .btn-primary:hover{background:var(--t-blau-h)}
#trainer .btn-out{background:#fff;color:var(--t-ink);border-color:var(--t-line)}
#trainer .btn-out:hover{border-color:#c9d4e6;background:var(--t-blau50)}
#trainer .btn-still{background:transparent;color:var(--t-blau);border-color:transparent;padding:8px 10px}
#trainer .btn-still:hover{background:var(--t-blau50)}
#trainer .btn.sm{padding:9px 14px;font-size:14px}
#trainer .btn.gross{padding:14px 24px;font-size:16px}
#trainer .btn[disabled]{opacity:.4;cursor:not-allowed}
#trainer .btn[disabled]:hover{background:var(--t-blau)}
#trainer .btn-out[disabled]:hover{background:#fff;border-color:var(--t-line)}

/* ---------- Pills und Etiketten ---------- */
#trainer .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;
  font:600 12px var(--t-font-text);letter-spacing:.01em}
#trainer .pill.blau{background:var(--t-blau100);color:var(--t-blau)}
#trainer .pill.grau{background:#eef1f6;color:var(--t-muted)}
#trainer .pill.gruen{background:var(--t-gruen-bg);color:var(--t-gruen-d)}
#trainer .pill.rot{background:var(--t-rot-bg);color:var(--t-rot)}
#trainer .pill.amber{background:var(--t-amber-bg);color:var(--t-amber)}
#trainer .pill.ton{background:var(--t-blau-ton);color:var(--t-blau-h)}

/* ============================================================
   SHEET 1 — Einstieg
   ============================================================ */
#trainer .hero{margin-bottom:26px}
#trainer .hero h1{margin:12px 0 10px}
#trainer .hero .lead{font-size:18px;line-height:1.55;color:#46526b;max-width:72ch}
#trainer .eins-schmal h1{font-size:36px}

/* Stepper */
#trainer .stepper{display:flex;align-items:center;gap:10px;margin:0 0 20px;flex-wrap:wrap}
#trainer .stepper .st{display:flex;align-items:center;gap:8px;font:600 14px var(--t-font-text);color:var(--t-muted)}
#trainer .stepper .kr{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:700 12px var(--t-font-text);background:#e8edf6;color:var(--t-muted)}
#trainer .stepper .st.aktiv{color:var(--t-ink)}
#trainer .stepper .st.aktiv .kr{background:#fff;color:var(--t-blau);box-shadow:0 0 0 2px var(--t-blau) inset}
#trainer .stepper .st.fertig{color:var(--t-ink)}
#trainer .stepper .st.fertig .kr{background:var(--t-blau);color:#fff}
#trainer .stepper .tr{color:#aab4c6;font-size:13px}

/* Zusammenfassungszeile erledigter Schritte */
#trainer .fertigzeile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--t-line);
  border-radius:var(--t-r-opt);padding:12px 16px;margin-bottom:12px;box-shadow:var(--t-schatten)}
#trainer .fertigzeile .hk{color:var(--t-blau);font-weight:700}
#trainer .fertigzeile .tx{flex:1;font-size:14px;color:var(--t-ink);min-width:0}
#trainer .fertigzeile .tx b{font-weight:600}

/* Optionskarten */
#trainer .wahl{display:grid;gap:12px}
#trainer .wahl.zwei{grid-template-columns:1fr 1fr}
#trainer .wahl.drei{grid-template-columns:repeat(3,1fr)}
#trainer .opt{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;
  border:1.5px solid var(--t-line);border-radius:var(--t-r-opt);padding:18px;cursor:pointer;
  font-family:var(--t-font-text);transition:border-color .15s,background .15s,box-shadow .15s}
#trainer .opt:hover{border-color:var(--t-blau);background:var(--t-blau50)}
#trainer .opt:focus-visible{outline:none;border-color:var(--t-blau);background:var(--t-blau50);box-shadow:0 0 0 4px var(--t-blau100)}
#trainer .opt .tag{font:600 12px var(--t-font-text);color:var(--t-blau);text-transform:none}
#trainer .opt b{font:600 16px var(--t-font-text);color:var(--t-ink);line-height:1.35}
#trainer .opt span.tx{font-size:14px;color:var(--t-muted);line-height:1.5}
#trainer .opt .weiter{margin-top:6px;font:600 14px var(--t-font-text);color:var(--t-blau)}
#trainer .opt[disabled]{opacity:.5;cursor:not-allowed}
#trainer .opt[disabled]:hover{border-color:var(--t-line);background:#fff}

/* Zertifikatskarten */
#trainer .zertkarte{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;
  border:1.5px solid var(--t-line);border-radius:var(--t-r-opt);padding:18px;cursor:pointer;
  font-family:var(--t-font-text);transition:border-color .15s,background .15s,box-shadow .15s}
#trainer .zertkarte:hover{border-color:var(--t-blau);background:var(--t-blau50)}
#trainer .zertkarte:focus-visible{outline:none;border-color:var(--t-blau);background:var(--t-blau50);box-shadow:0 0 0 4px var(--t-blau100)}
#trainer .zertkarte .zk-kopf{display:flex;align-items:baseline;gap:10px}
#trainer .zertkarte .code{font:800 30px var(--t-font-kopf);color:var(--t-ink);line-height:1}
#trainer .zertkarte .prev{font:600 12px var(--t-font-text);color:var(--t-blau);background:var(--t-blau-ton);
  border-radius:999px;padding:4px 10px}
#trainer .zertkarte b{font:600 16px var(--t-font-text);color:var(--t-ink)}
#trainer .zertkarte .tx{font-size:14px;color:var(--t-muted);line-height:1.5}
#trainer .zertkarte .empf{position:absolute;top:-10px;left:16px;background:var(--t-blau);color:#fff;
  font:700 11px var(--t-font-text);letter-spacing:.04em;border-radius:999px;padding:4px 10px}
#trainer .zertkarte.passt{border-color:var(--t-blau);background:var(--t-blau50)}

/* Fristenrechner */
#trainer .feldreihe{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:end}
#trainer .lb{display:block;font:600 12px var(--t-font-text);color:var(--t-muted);margin-bottom:6px}
#trainer input[type=date], #trainer input[type=text], #trainer input[type=email], #trainer select{
  width:100%;font:400 15px var(--t-font-text);color:var(--t-ink);background:#fff;
  border:1.5px solid var(--t-line);border-radius:var(--t-r-opt);padding:11px 12px}
#trainer input:focus, #trainer select:focus{outline:none;border-color:var(--t-blau);box-shadow:0 0 0 4px var(--t-blau100)}
#trainer .feldfehler{font-size:13px;color:var(--t-rot);margin-top:6px}
#trainer .ergbox{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;
  animation:einblenden .2s ease-out}
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#trainer .ergfeld{background:var(--t-flaeche);border:1px solid var(--t-line);border-radius:var(--t-r-opt);padding:16px}
#trainer .ergfeld .lbl{font:600 11px var(--t-font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted)}
#trainer .ergfeld .gross{font:800 26px var(--t-font-kopf);color:var(--t-ink);margin-top:6px;line-height:1.1}
#trainer .ergfeld .rest{font-size:14px;margin-top:4px;color:var(--t-muted)}
#trainer .ergfeld .rest.knapp{color:var(--t-amber);font-weight:600}
#trainer .ergfeld .rest.weg{color:var(--t-rot);font-weight:600}
#trainer .ergfeld .sub{font-size:13px;color:var(--t-muted);margin-top:4px}
#trainer .fristquelle{font-size:13px;color:var(--t-muted);margin-top:12px;line-height:1.55}

/* Aufklapper */
#trainer details.klapp{background:#fff;border:1px solid var(--t-line);border-radius:var(--t-r-karte);
  padding:0;margin-bottom:16px;box-shadow:var(--t-schatten)}
#trainer details.klapp>summary{list-style:none;cursor:pointer;padding:18px 22px;
  font:600 15px var(--t-font-text);color:var(--t-ink);display:flex;align-items:center;gap:10px}
#trainer details.klapp>summary::-webkit-details-marker{display:none}
#trainer details.klapp>summary::after{content:'+';margin-left:auto;color:var(--t-muted);font-size:18px;font-weight:400}
#trainer details.klapp[open]>summary::after{content:'–'}
#trainer details.klapp .inhalt{padding:0 22px 20px;font-size:14px;color:var(--t-muted);line-height:1.65}

/* ============================================================
   SHEET 2.1 — Lernstand
   ============================================================ */
#trainer .ls-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
#trainer .ls-kopf .meta{font-size:14px;color:var(--t-muted);margin-bottom:4px}
#trainer .ls-kopf h1{font-size:40px}

#trainer .haupt{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
#trainer .ring{--t-p:0;width:132px;height:132px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--t-blau) calc(var(--t-p)*1%),#e8eef8 0);position:relative}
#trainer .ring::after{content:'';position:absolute;inset:11px;background:#fff;border-radius:50%;z-index:0}
/* z-index ist hier Pflicht, nicht Kosmetik: ::after wird nach dem Kind
   gemalt und hat die Prozentzahl sonst vollständig verdeckt. */
#trainer .ring .zahl{position:relative;z-index:1;font:800 32px var(--t-font-kopf);color:var(--t-ink)}
#trainer .ring .zahl i{font-style:normal;font-size:17px;font-weight:700}
#trainer .haupt .rechts{min-width:0}
#trainer .haupt h2{margin-bottom:8px}
#trainer .zahlen{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--t-muted);margin-bottom:18px}
#trainer .zahlen b{color:var(--t-ink);font-weight:600}
#trainer .haupt-akt{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Lernweg-Popover */
#trainer .wegwahl{position:relative}
/* Sah vorher aus wie ein Link und wirkte nicht bedienbar. Jetzt als
   Auswahlfeld: Rahmen, weißer Grund, Pfeil. */
#trainer .wegknopf{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1.5px solid var(--t-line);border-radius:var(--t-r-btn);padding:10px 14px;cursor:pointer;
  font:600 14px var(--t-font-text);color:var(--t-ink);transition:border-color .15s,background .15s}
#trainer .wegknopf:hover{border-color:#c9d4e6;background:var(--t-blau50)}
#trainer .wegknopf[aria-expanded="true"]{border-color:var(--t-blau);background:var(--t-blau50)}
#trainer .wegknopf .lbl{font-weight:500;color:var(--t-muted)}
#trainer .wegknopf .chev{color:var(--t-muted);font-size:12px;margin-left:2px}
#trainer .popover{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:360px;max-width:88vw;
  background:#fff;border:1px solid var(--t-line);border-radius:var(--t-r-karte);
  box-shadow:var(--t-schatten-hoch);padding:8px}
#trainer .popover[hidden]{display:none}
#trainer .wegzeile{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:none;
  border:none;border-radius:var(--t-r-opt);padding:11px 12px;cursor:pointer;font-family:var(--t-font-text)}
#trainer .wegzeile:hover{background:var(--t-flaeche)}
#trainer .wegzeile.aktiv{background:var(--t-blau50)}
#trainer .wegzeile .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid #cfd8e6;flex:none;margin-top:3px}
#trainer .wegzeile.aktiv .rd{border:4px solid var(--t-blau)}
#trainer .wegzeile .txt{flex:1;min-width:0}
#trainer .wegzeile .txt b{display:block;font:600 14px var(--t-font-text);color:var(--t-ink)}
#trainer .wegzeile .txt span{font-size:13px;color:var(--t-muted);line-height:1.45}
#trainer .wegzeile .n{font:600 13px var(--t-font-text);color:var(--t-muted);white-space:nowrap}
#trainer .wegzeile[disabled]{opacity:.45;cursor:not-allowed}
#trainer .wegzeile .themasel{margin-top:8px;width:100%}

/* Prüfungszeile */
#trainer .pruefzeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#trainer .pruefzeile .ico{width:40px;height:40px;border-radius:50%;background:var(--t-blau-ton);color:var(--t-blau);
  display:grid;place-items:center;font-size:19px;flex:none}
#trainer .pruefzeile .tx{flex:1;min-width:200px}
#trainer .pruefzeile .tx b{display:block;font:600 16px var(--t-font-text);color:var(--t-ink)}
#trainer .pruefzeile .tx span{font-size:14px;color:var(--t-muted)}

/* Themenfelder */
#trainer .tf-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
#trainer .tf-kopf .t{font:600 15px var(--t-font-text);color:var(--t-ink)}
#trainer .tf-kopf .s{font-size:13px;color:var(--t-muted)}
#trainer .tf-gitter{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
#trainer .tfzeile{display:grid;grid-template-columns:1fr 84px auto 12px;align-items:center;gap:10px;
  width:100%;background:none;border:none;border-radius:8px;padding:9px 8px;cursor:pointer;
  font-family:var(--t-font-text);text-align:left}
#trainer .tfzeile:hover{background:var(--t-flaeche)}
#trainer .tfzeile .nm{font:500 14px var(--t-font-text);color:var(--t-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#trainer .tfzeile .bahn{height:6px;border-radius:999px;background:#e8edf6;overflow:hidden}
#trainer .tfzeile .bahn i{display:block;height:100%;border-radius:999px;background:var(--t-bal-gruen)}
#trainer .tfzeile.s0 .bahn i{background:var(--t-bal-rot)}
#trainer .tfzeile.s1 .bahn i{background:var(--t-bal-orange)}
#trainer .tfzeile .wert{font:600 13px var(--t-font-text);color:var(--t-muted);min-width:40px;text-align:right}
#trainer .tfzeile .pf{color:#aab4c6}

/* ============================================================
   SHEET 2.2 / 2.3 — Fragen
   ============================================================ */
#trainer .krumen{font-size:13px;color:var(--t-muted);margin-bottom:12px}
#trainer .krumen a{color:var(--t-muted)}
#trainer .krumen a:hover{color:var(--t-blau)}
#trainer .krumen .tr{margin:0 6px;color:#c3cbdb}

#trainer .suchfeld{position:relative;margin-bottom:14px}
#trainer .suchfeld input{padding-left:38px}
#trainer .suchfeld .lupe{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--t-muted);font-size:15px}

#trainer .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#trainer .chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--t-line);
  border-radius:999px;padding:7px 13px;cursor:pointer;font:500 13px var(--t-font-text);color:var(--t-text)}
#trainer .chip:hover{border-color:#c9d4e6}
#trainer .chip.aktiv{border-color:var(--t-blau);background:var(--t-blau50);color:var(--t-ink);font-weight:600}
#trainer .chip .pt{width:8px;height:8px;border-radius:50%;background:#c3cbdb}
#trainer .chip .n{color:var(--t-muted);font-weight:600}
#trainer .chip.aktiv .n{color:var(--t-blau)}
#trainer .chip[data-f="neu"] .pt{background:var(--t-amber)}
#trainer .chip[data-f="falsch"] .pt{background:var(--t-rot)}
#trainer .chip[data-f="arbeit"] .pt{background:var(--t-blau)}
#trainer .chip[data-f="fest"] .pt{background:var(--t-gruen)}
#trainer .chip[data-f="markiert"] .pt{background:#a855f7}

#trainer .themengitter{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#trainer .themakarte{display:flex;flex-direction:column;gap:10px;text-align:left;background:#fff;
  border:1.5px solid var(--t-line);border-radius:var(--t-r-karte);padding:18px;cursor:pointer;
  font-family:var(--t-font-text);box-shadow:var(--t-schatten);transition:border-color .15s,box-shadow .15s}
#trainer .themakarte:hover{border-color:var(--t-blau);box-shadow:var(--t-schatten-hoch)}
#trainer .themakarte.blass{opacity:.4}
#trainer .themakarte b{font:600 15px var(--t-font-text);color:var(--t-ink);line-height:1.35}
#trainer .themakarte .sub{font-size:13px;color:var(--t-muted)}
#trainer .themakarte .stapel{display:flex;height:7px;border-radius:999px;overflow:hidden;background:#e8edf6}
#trainer .themakarte .stapel i{display:block;height:100%}
#trainer .themakarte .stapel .s-fest{background:var(--t-gruen)}
#trainer .themakarte .stapel .s-arbeit{background:var(--t-blau)}
#trainer .themakarte .stapel .s-falsch{background:var(--t-rot)}
#trainer .themakarte .stapel .s-neu{background:#d7dfec}
#trainer .themakarte .fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13px;color:var(--t-muted);border:none;background:none;padding:0}
#trainer .themakarte .oeffnen{color:var(--t-blau);font-weight:600}

/* Fragenliste */
#trainer .fragenkarte{background:#fff;border:1px solid var(--t-line);border-radius:var(--t-r-karte);
  box-shadow:var(--t-schatten);overflow:hidden}
#trainer .fragzeile{display:grid;grid-template-columns:auto 1fr auto 12px;align-items:center;gap:12px;
  width:100%;background:none;border:none;border-bottom:1px solid var(--line2,#eef2f8);
  padding:14px 18px;cursor:pointer;text-align:left;font-family:var(--t-font-text)}
#trainer .fragzeile:last-child{border-bottom:none}
#trainer .fragzeile:hover{background:var(--t-blau50)}
#trainer .fragzeile .st{font:600 11px var(--t-font-text);border-radius:999px;padding:3px 9px;white-space:nowrap;min-width:52px;text-align:center}
#trainer .fragzeile .st.neu{background:var(--t-amber-bg);color:var(--t-amber)}
#trainer .fragzeile .st.falsch{background:var(--t-rot-bg);color:var(--t-rot)}
#trainer .fragzeile .st.arbeit{background:var(--t-blau-ton);color:var(--t-blau-h)}
#trainer .fragzeile .st.fest{background:var(--t-gruen-bg);color:var(--t-gruen-d)}
#trainer .fragzeile .tx{font-size:14px;color:var(--t-text);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#trainer .fragzeile .ico{font-size:13px;color:var(--t-muted);white-space:nowrap}
#trainer .fragzeile .pf{color:#aab4c6}
#trainer .mehrzeile{width:100%;background:var(--t-flaeche);border:none;border-top:1px solid var(--t-line);
  padding:13px;cursor:pointer;font:600 14px var(--t-font-text);color:var(--t-blau)}
#trainer .mehrzeile:hover{background:var(--t-blau50)}
#trainer .leerhinweis{padding:26px 18px;text-align:center;color:var(--t-muted);font-size:14px}

#trainer .themakopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
#trainer .themakopf>div:first-child{flex:1 1 340px;min-width:0}
#trainer .themakopf h1{font-size:34px;margin-bottom:6px}
#trainer .themakopf .sub{font-size:14px;color:var(--t-muted)}

/* ============================================================
   SHEET 2.4 / 2.5 — Karte
   ============================================================ */
#trainer .sitzleiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
#trainer .sitzleiste .wegname{font:600 14px var(--t-font-text);color:var(--t-ink)}
#trainer .sitzleiste .sp{flex:1}
#trainer .sitzleiste .zaehler{font-size:13px;color:var(--t-muted)}
#trainer .sitzbahn{height:4px;border-radius:999px;background:#e2e9f4;overflow:hidden;margin-bottom:18px}
#trainer .sitzbahn i{display:block;height:100%;background:var(--t-blau);border-radius:999px;transition:width .2s}

#trainer .kartenlabel{font:600 11px var(--t-font-text);letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-muted);margin-bottom:10px}
#trainer .kartenfrage{font:700 24px/1.32 var(--t-font-kopf);color:var(--t-ink);margin-bottom:20px}

#trainer .antworten{display:flex;flex-direction:column;gap:10px}
#trainer .antw{display:flex;align-items:flex-start;gap:12px;text-align:left;background:#fff;
  border:1.5px solid var(--t-line);border-radius:var(--t-r-opt);padding:14px 16px;cursor:pointer;
  font:400 15px/1.5 var(--t-font-text);color:var(--t-text);transition:border-color .12s,background .12s}
#trainer .antw:hover{border-color:#b9c9e8;background:var(--t-blau50)}
#trainer .antw .bst{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--t-blau-ton);color:var(--t-blau);font:700 13px var(--t-font-text)}
#trainer .antw.gewaehlt{border-color:var(--t-blau);background:var(--t-blau50)}
#trainer .antw.gewaehlt .bst{background:var(--t-blau);color:#fff}
#trainer .antw[disabled]{cursor:default}
#trainer .antw[disabled]:hover{border-color:var(--t-line);background:#fff}
#trainer .antw.ist-richtig{border-color:var(--t-gruen);background:var(--t-gruen-bg)}
#trainer .antw.ist-richtig .bst{background:var(--t-gruen);color:#fff}
#trainer .antw.ist-richtig:hover{border-color:var(--t-gruen);background:var(--t-gruen-bg)}
#trainer .antw.ist-falsch{border-color:var(--t-rot);background:var(--t-rot-bg)}
#trainer .antw.ist-falsch .bst{background:var(--t-rot);color:#fff}
#trainer .antw.ist-falsch:hover{border-color:var(--t-rot);background:var(--t-rot-bg)}
#trainer .antw.matt{opacity:.55}
#trainer .antw .rolle{margin-left:auto;font:600 12px var(--t-font-text);color:var(--t-muted);white-space:nowrap;padding-top:4px}
#trainer .antw.ist-richtig .rolle{color:var(--t-gruen-d)}
#trainer .antw.ist-falsch .rolle{color:var(--t-rot)}

#trainer .kartenfuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;
  border-top:1px solid var(--t-line);padding-top:18px}
#trainer .kartenfuss .sp{flex:1}
#trainer .kartenfuss .tasten{font-size:12px;color:var(--t-muted)}

/* Ergebnisblock */
#trainer .ergebnisblock{margin-top:20px;animation:einblenden .2s ease-out}
#trainer .erg-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:var(--t-r-opt);
  padding:13px 16px;font:600 15px var(--t-font-text)}
#trainer .erg-kopf.gut{background:var(--t-gruen-bg);color:var(--t-gruen-d)}
#trainer .erg-kopf.schlecht{background:var(--t-rot-bg);color:var(--t-rot)}
#trainer .erg-kopf.neutral{background:var(--t-flaeche);color:var(--t-muted)}
#trainer .erg-kopf .zus{font-weight:500;font-size:13px;opacity:.85}
#trainer .tabs{display:flex;gap:6px;margin:18px 0 12px;border-bottom:1px solid var(--t-line)}
#trainer .tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:9px 4px;margin-right:16px;cursor:pointer;font:600 14px var(--t-font-text);color:var(--t-muted)}
#trainer .tab.aktiv{color:var(--t-blau);border-bottom-color:var(--t-blau)}
#trainer .tabinhalt{font-size:17px;line-height:1.65;color:var(--t-text)}
#trainer .tabinhalt .quelle{display:block;margin-top:12px;font-size:13px;color:var(--t-muted)}

/* ============================================================
   Prüfung und Ergebnis
   ============================================================ */
#trainer .pf-leiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
#trainer .pf-leiste .sp{flex:1}
#trainer .uhr{font:700 17px var(--t-font-kopf);color:var(--t-ink);background:#fff;border:1px solid var(--t-line);
  border-radius:999px;padding:6px 14px}
#trainer .uhr.knapp{color:var(--t-rot);border-color:#f5c2c2}
#trainer .er-kopf{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
#trainer .auf{border:1px solid var(--t-line);border-radius:var(--t-r-opt);padding:16px;margin-bottom:10px;background:#fff}
#trainer .auf.richtig{border-left:4px solid var(--t-gruen)}
#trainer .auf.falsch{border-left:4px solid var(--t-rot)}
#trainer .auf .kopfz{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
#trainer .auf .fr{font:600 15px var(--t-font-text);color:var(--t-ink);margin-bottom:8px}
#trainer .auf .zeile{font-size:14px;margin-bottom:4px}
#trainer .auf .erkl{font-size:14px;color:var(--t-text);margin-top:8px;line-height:1.6}
#trainer .auf .qu{font-size:12px;color:var(--t-muted);margin-top:8px}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width:960px){
  #trainer .themengitter{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
}
@media (max-width:720px){
    #trainer h1{font-size:32px}
  #trainer .ls-kopf h1{font-size:30px}
  #trainer .themakopf h1{font-size:26px}
  #trainer .eins-schmal h1{font-size:28px}
  #trainer .hero .lead{font-size:16px}
  #trainer .kartenfrage{font-size:20px}
  #trainer .karte{padding:20px}
  #trainer .wahl.zwei, #trainer .wahl.drei, #trainer .feldreihe, #trainer .ergbox, #trainer .tf-gitter, #trainer .haupt, #trainer .er-kopf{grid-template-columns:1fr}
  #trainer .haupt{justify-items:center;text-align:center}
  #trainer .haupt .rechts{text-align:left;width:100%}
  #trainer .haupt-akt{justify-content:center}
  #trainer .themengitter{grid-template-columns:1fr}
  #trainer .stepper .st{display:none}
  #trainer .stepper .st.aktiv{display:flex}
  #trainer .stepper .tr{display:none}
  #trainer .stepper::before{content:attr(data-schritt);font:600 13px var(--t-font-text);color:var(--t-muted)}
  #trainer .kartenfuss{position:sticky;bottom:0;background:#fff;margin:22px -26px -26px;padding:14px 26px;
    border-top:1px solid var(--t-line);box-shadow:0 -6px 18px #0c1a3b0f;z-index:20}
  #trainer .kartenfuss .btn{flex:1}
  #trainer .kartenfuss .tasten{display:none}
  #trainer .popover{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    border-radius:18px 18px 0 0;padding:12px;box-shadow:0 -10px 40px #0c1a3b33}
}
@media (max-width:420px){
  }
@media (prefers-reduced-motion:reduce){
}