/* ============================================================================
   unterHUNDs Prüfungstrainer
   Stylesheet

   Übernommen aus dem Sachkunde-Trainer, damit beide Werkzeuge dieselbe
   Handschrift haben: warmes Cremeweiss, gruene Kopfzeile mit orangefarbener
   Kante, kraeftige dunkle Rahmen, Pillen als Kennzeichen.

   Dazugekommen ist Abschnitt 16 - vier Kleinigkeiten, die dieses Werkzeug
   zusaetzlich braucht: die Kennzeichnung des Demoumfangs auf den Kacheln,
   der Hinweis unter der Modusauswahl und die Verweise rechts in der
   Kopfzeile. Alles Uebrige ist unveraendert, damit ein spaeterer Abgleich
   mit skt.css moeglich bleibt.

   Aufbau
     1  Farben und Grundwerte        9  Auswertung
     2  Grundgeruest                10  Uebersicht und Kacheln
     3  Kopfzeile                   11  Anmeldung
     4  Karten                      12  Verwaltung
     5  Fortschritt                 13  Angebot
     6  Formulare und Schalter      14  Fuss und Handy
     7  Meldungen                   15  Fortschritt zuruecksetzen
     8  Frage                       16  Nur im Pruefungstrainer
                                 17  Schriften
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1  Farben und Grundwerte
   --------------------------------------------------------------------------- */

:root{
  color-scheme: light dark;

  /* Marke - identisch zum eingebetteten Trainer */
  --gruen:        #008a00;
  --gruen-tief:   #006b00;
  --gruen-hell:   #e9f5e6;
  --gruen-kante:  #7fbb7f;

  --gold:         #f5a623;
  --gold-hell:    #fdf0d8;
  --gold-tief:    #8a5a05;

  /* Flaechen */
  --papier:       #ffffff;
  --karte:        #fff7e8;   /* warmes Creme wie im Blogtrainer */
  --karte-hoch:   #ffffff;
  --linie:        #d8cdb6;
  --linie-stark:  #7a7a7a;   /* die kraeftigen Rahmen des Vorbilds */

  /* Schrift */
  --tinte:        #111111;
  --tinte-leise:  #4d4d4d;
  --tinte-still:  #6f6f6f;

  /* Zustaende */
  --richtig:      #087a22;
  --richtig-hell: #e9f8ed;
  --falsch:       #b3261e;
  --falsch-hell:  #fff0ee;

  /* Masse - eckiger als zuvor, passend zum Vorbild */
  --radius:       10px;
  --radius-klein: 8px;
  --schatten:     0 2px 10px rgba(0,0,0,.08);
  --schatten-hoch:0 4px 18px rgba(0,0,0,.14);

  --spalte:       700px;
  --spalte-weit:  1050px;   /* wie .wrap im Blogtrainer */

  --sicher-unten: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root{
    /* Die warme Note bleibt: gedaempftes Braungruen statt Neutralschwarz,
       damit auch im Dunkeln dieselbe Handschrift erkennbar ist. */
    --gruen:        #46b846;
    --gruen-tief:   #6bcf6b;
    --gruen-hell:   #16291a;
    --gruen-kante:  #2f4a30;

    --gold:         #f0b03a;
    --gold-hell:    #2c2312;
    --gold-tief:    #f3c66f;

    --papier:       #14120e;
    --karte:        #201d17;
    --karte-hoch:   #292520;
    --linie:        #3a352c;
    --linie-stark:  #55503f;

    --tinte:        #f2ede2;
    --tinte-leise:  #b3aa98;
    --tinte-still:  #8d8574;

    --richtig:      #4fbf5e;
    --richtig-hell: #16291a;
    --falsch:       #e8735c;
    --falsch-hell:  #2e1815;

    --schatten:     0 2px 10px rgba(0,0,0,.5);
    --schatten-hoch:0 4px 18px rgba(0,0,0,.65);
  }
}


/* ---------------------------------------------------------------------------
   2  Grundgeruest
   --------------------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }

html{ scroll-padding-top:80px; -webkit-text-size-adjust:100% }

/* Volle Hoehe aufspannen, damit der Fuss am unteren Rand sitzt und nicht
   bei kurzen Seiten mitten im Bild haengt. dvh statt vh: Auf dem Telefon
   aendert sich die sichtbare Hoehe beim Ein- und Ausblenden der
   Browserleisten, vh rechnet dort mit dem groesseren Wert und erzeugt
   einen Sprung. */
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--papier);
  color:var(--tinte);
  font-family:'Source Sans 3',Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Der Inhalt nimmt den verbleibenden Platz ein */
main{ flex:1 0 auto }

a{ color:var(--gruen-tief); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:2px }

/* Die Ueberschriften des Vorbilds sind sehr fett und eng gesetzt.
   Bricolage bei 700 trifft das, ohne so gedrungen zu wirken wie Arial Black. */
h1,h2,h3{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-weight:700; line-height:1.1; letter-spacing:-.02em;
  margin:0 0 12px; text-wrap:balance;
}
h1{ font-size:clamp(1.7rem,5vw,2.3rem) }
h2{ font-size:clamp(1.4rem,4vw,1.8rem) }
h3{ font-size:1.15rem }

p{ margin:0 0 14px }
p:last-child{ margin-bottom:0 }
strong,b{ font-weight:700 }

:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:3px }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

.container{
  width:100%;
  max-width:var(--spalte-weit);
  margin:0 auto;
  padding:18px max(18px,env(safe-area-inset-right,0px))
          56px max(18px,env(safe-area-inset-left,0px));
}
.container.narrow{ max-width:var(--spalte) }

.subline{ color:var(--tinte-leise); margin:-4px 0 20px; font-weight:600 }
.muted{ color:var(--tinte-leise) }
.mini-note{ color:var(--tinte-leise); font-size:.92em; line-height:1.5; margin-top:10px }

/* Bereichsueberschrift im Stil der Pillen: klein, fett, dunkel gerahmt */
.module-section-title{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--tinte-leise);
  margin:34px 0 14px;
  display:flex; align-items:center; gap:12px;
}
.module-section-title::after{ content:""; flex:1; height:2px; background:var(--linie) }

.eyebrow{
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--gruen-tief); margin:0 0 8px;
}

/* Pille - das Kennzeichen aus dem Blogtrainer */
.pill{
  display:inline-block; background:var(--papier);
  border:1px solid var(--linie-stark); border-radius:999px;
  padding:6px 12px; font-weight:700; font-size:.85rem;
}


/* ---------------------------------------------------------------------------
   3  Kopfzeile
   --------------------------------------------------------------------------- */

/* Gruen mit kraeftiger orangefarbener Unterkante - das auffaelligste
   Merkmal des Blogtrainers und damit das wichtigste Bindeglied. */
.uh-header{
  background:var(--gruen);
  border-bottom:6px solid var(--gold);
  position:sticky; top:0; z-index:60;
}
@media (prefers-color-scheme: dark){
  .uh-header{ background:#0d4a0d }
}
.uh-header-inner{
  display:flex; justify-content:center; align-items:center; gap:16px;
  height:76px; padding:0 14px;
}
.uh-banner,.uh-logo{ height:54px; width:auto }

.topline{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 0 18px; font-size:.95rem; font-weight:700;
}
.topline a{ color:var(--gruen-tief) }
.topline .count{ color:var(--tinte-leise); font-variant-numeric:tabular-nums }


/* ---------------------------------------------------------------------------
   4  Karten
   --------------------------------------------------------------------------- */

.card{
  background:var(--karte);
  border:1px solid var(--linie-stark);
  border-radius:var(--radius);
  padding:20px;
  margin:0 0 16px;
  box-shadow:var(--schatten);
}
.card h2,.card h3{ margin-top:0 }

.split{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.split>div:first-child{ min-width:0; flex:1 1 220px }

.big{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-size:1.5rem; font-weight:700; margin:0;
}
.score{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-size:2.6rem; font-weight:700; color:var(--gruen-tief);
  margin:6px 0 14px; font-variant-numeric:tabular-nums;
}


/* ---------------------------------------------------------------------------
   5  Fortschritt
   --------------------------------------------------------------------------- */

.ring{
  width:92px; height:92px; flex:0 0 92px;
  border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--gruen) calc(var(--p,0)*1%), var(--linie) 0);
}
.ring::before{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--karte) }
.ring span{
  position:relative; font-weight:700; color:var(--gruen-tief);
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* Balken mit dunklem Rahmen wie im Blogtrainer */
.progress-wrap{
  position:relative; width:100%; height:14px;
  background:#eee; border:1px solid var(--linie-stark);
  border-radius:999px; overflow:hidden;
}
@media (prefers-color-scheme: dark){ .progress-wrap{ background:#2a251d } }
.progress-bar{
  height:100%; width:0; background:var(--gruen);
  transition:width .35s ease;
}
.progress-wrap.big{ height:18px }

.progress-wrap.scale{
  background:linear-gradient(90deg,
    var(--falsch) 0%, var(--falsch) 50%,
    var(--gold) 50%, var(--gold) 75%,
    var(--gruen) 75%, var(--gruen) 100%);
}
.progress-wrap.scale .progress-mask{
  position:absolute; inset:0; left:0; background:#eee; transition:left .35s ease;
}
@media (prefers-color-scheme: dark){ .progress-wrap.scale .progress-mask{ background:#2a251d } }

.progress-row{ display:flex; align-items:center; gap:12px; margin-top:14px }
.progress-row .progress-wrap{ flex:1 }
.progress-value{
  font-size:.88rem; font-weight:700; color:var(--gruen-tief);
  min-width:44px; text-align:right; font-variant-numeric:tabular-nums;
}

.quote-row{ display:flex; align-items:center; gap:14px; max-width:360px; margin:20px auto 8px }
.quote-row .progress-wrap{ flex:1 }
.quote-row .progress-value{ font-size:1rem }

/* Kennzahlen - weisse Kaesten mit dunklem Rahmen, wie .stat im Vorbild */
.stat-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px }
.stat-tile{
  background:var(--papier); border:1px solid var(--linie-stark);
  border-radius:var(--radius-klein); padding:14px 10px; text-align:center;
  font-weight:700;
}
.stat-tile .num{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-size:1.8rem; font-weight:700; color:var(--gruen-tief);
  line-height:1.1; font-variant-numeric:tabular-nums; display:block;
}
.stat-tile .lbl{ font-size:.8rem; color:var(--tinte-leise); margin-top:2px; font-weight:700 }


/* ---------------------------------------------------------------------------
   6  Formulare und Schalter
   --------------------------------------------------------------------------- */

label{ font-weight:700; display:block; font-size:.9rem }

select,
input[type=number],input[type=text],input[type=email],input[type=password]{
  display:block; width:100%;
  padding:11px 12px; margin-top:6px;
  border:1px solid var(--linie-stark);
  border-radius:6px;
  background:var(--papier); color:var(--tinte);
  font-family:inherit; font-size:16px;
}
select:focus,input:focus{
  outline:none; border-color:var(--gruen);
  box-shadow:0 0 0 3px var(--gruen-hell);
}

.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; align-items:end }
.form-grid .btn{ grid-column:1/-1; justify-self:start }
.span-all{ grid-column:1/-1 }

.check{ grid-column:1/-1; display:flex; align-items:center; gap:11px; font-weight:400 }
.check input{ width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:var(--gruen); cursor:pointer }
.check label{ cursor:pointer; font-weight:400; margin:0 }

/* Knoepfe: satt gruen, kraeftig, eckig - wie im Blogtrainer */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border:0; border-radius:7px;
  background:var(--gruen); color:#fff;
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-weight:700; font-size:16px;
  min-height:46px; cursor:pointer; touch-action:manipulation;
  transition:background .15s ease, transform .1s ease;
}
.btn:hover{ background:var(--gruen-tief); text-decoration:none }
.btn:active{ transform:translateY(1px) }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }

/* Orange als zweite Stufe - im Vorbild .secondary */
.btn.secondary{
  background:var(--gold); color:#111;
}
.btn.secondary:hover{ background:#dd930f }

/* Umrandet als dritte Stufe - im Vorbild .ghost */
.btn.ghost{
  background:var(--papier); color:var(--gruen-tief);
  border:2px solid var(--gruen);
}
.btn.ghost:hover{ background:var(--gruen-hell) }

.btn.danger{ background:var(--falsch); color:#fff }
.btn.danger:hover{ background:#8e1e17 }
.btn.full{ width:100% }


/* ---------------------------------------------------------------------------
   7  Meldungen
   --------------------------------------------------------------------------- */

.notice{
  border:1px solid var(--linie-stark);
  border-left:6px solid;
  border-radius:var(--radius-klein);
  padding:14px 16px; margin:0 0 16px;
  font-size:.97em; line-height:1.5;
  background:var(--karte);
}
.notice.ok{ border-left-color:var(--gruen); color:var(--gruen-tief) }
.notice.warn{ border-left-color:var(--gold); color:var(--gold-tief) }
.notice a{ font-weight:700; text-decoration:underline; text-underline-offset:2px }
.notice.ok a{ color:var(--gruen-tief) }
.notice.warn a{ color:var(--gold-tief) }
.notice .btn{ margin-top:12px }


/* ---------------------------------------------------------------------------
   8  Frage
   --------------------------------------------------------------------------- */

.question h1{ font-size:clamp(1.35rem,4.4vw,1.7rem); margin:0 0 6px }
.thema{ margin:0 0 16px; color:var(--tinte-leise); font-size:.9rem; font-weight:700 }

.frage-bild{ margin:0 0 18px; text-align:center }
.frage-bild img{
  width:min(454px,100%); height:auto; display:block; margin:0 auto;
  border-radius:var(--radius-klein);
  border:1px solid var(--linie-stark); background:var(--papier);
}

.typ-marke{
  display:inline-block; margin:0 0 14px; padding:6px 12px;
  border-radius:999px; background:var(--gold-hell);
  border:1px solid var(--gold); color:var(--gold-tief);
  font-size:.8rem; font-weight:700;
}

/* Antwortoptionen im Raster des Vorbilds: Marke, Buchstabe, Text */
.answers{ display:grid; gap:8px; margin:0 0 20px }
.answers label{ display:block; cursor:pointer; position:relative }
.answers input{ position:absolute; opacity:0; pointer-events:none }
.answers span{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--linie-stark);
  border-radius:var(--radius-klein);
  background:var(--papier);
  line-height:1.4;
  transition:border-color .12s ease, background .12s ease;
}
.answers b{
  display:grid; place-items:center;
  flex:0 0 30px; height:30px; border-radius:6px;
  background:var(--gruen-hell); color:var(--gruen-tief);
  border:1px solid var(--gruen-kante);
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-size:14px; font-weight:700;
}
.answers input[type=radio]+span b{ border-radius:50% }

.answers label:hover span{ outline:2px solid var(--gold); outline-offset:-1px }
.answers input:checked+span{ border-color:var(--gruen); background:var(--gruen-hell) }
.answers input:checked+span b{ background:var(--gruen); border-color:var(--gruen); color:#fff; font-size:0 }
.answers input:checked+span b::after{ content:"✓"; font-size:16px; line-height:1 }
.answers input:focus-visible+span{ outline:3px solid var(--gold); outline-offset:2px }

form.leer .answers::before{
  content:"Bitte mindestens eine Antwort auswählen.";
  display:block; color:var(--falsch); font-weight:700;
  font-size:.9rem; margin-bottom:4px;
}
form.leer .answers{ outline:2px solid var(--falsch); outline-offset:8px; border-radius:var(--radius-klein) }

.aktionsleiste{ margin-top:4px }
.aktionsleiste .btn{ width:100% }


/* ---------------------------------------------------------------------------
   9  Auswertung

   Vier Zustaende, vier Formen. Die Form traegt die Bedeutung, die Farbe
   verstaerkt sie nur - so bleibt die Auswertung auch fuer Farbenblinde
   lesbar. Genau das unterscheidet den Vollzugang vom Blogtrainer.
   --------------------------------------------------------------------------- */

.feedback{ border-top:6px solid var(--gruen) }
.feedback.correct{ border-top-color:var(--richtig) }
.feedback.wrong{ border-top-color:var(--falsch) }

.feedback h2{ display:flex; align-items:center; gap:10px; margin:0 0 4px; font-size:1.35rem }
.feedback h2::before{
  content:""; flex:0 0 28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:16px; font-weight:700; color:#fff;
}
.feedback.correct h2::before{ content:"✓"; background:var(--richtig) }
.feedback.wrong h2::before{ content:"!"; background:var(--falsch) }

.answer-block{
  position:relative;
  background:var(--papier);
  border:1px solid var(--linie-stark);
  border-left:6px solid var(--linie-stark);
  border-radius:var(--radius-klein);
  padding:13px 15px 13px 50px;
  margin:10px 0;
}
.answer-block::before{
  content:""; position:absolute; left:14px; top:14px;
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--linie-stark);
  display:grid; place-items:center;
  font-size:13px; font-weight:700; line-height:1;
}

.answer-block.right{ border-left-color:var(--richtig); background:var(--richtig-hell) }
.answer-block.right::before{ content:"✓"; background:var(--richtig); border-color:var(--richtig); color:#fff }

/* Richtig, aber uebersehen: gestrichelte Kante und hohle Marke */
.answer-block.right:not(.gewaehlt){ border-left-style:dashed }
.answer-block.right:not(.gewaehlt)::before{ background:var(--papier); color:var(--richtig) }

/* Die eigene Falschauswahl: kraeftig umrandet, Flaeche aber weiss.
   Ein farbiger Grund unter laengerem Text kostet Lesbarkeit, und genau
   dieser Text - die Begruendung - ist der Teil, der gelesen werden soll. */
.answer-block.wrong.gewaehlt{
  background:var(--karte-hoch);
  border:2px solid var(--falsch);
  border-left:6px solid var(--falsch);
}
.answer-block.wrong.gewaehlt::before{ content:"✕"; background:var(--falsch); border-color:var(--falsch); color:#fff }

/* Falsch und zu Recht ausgelassen: zurueckhaltend, da war nichts zu lernen */
.answer-block.wrong:not(.gewaehlt){ opacity:.7 }

.answer-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; margin-bottom:4px; color:var(--tinte-leise);
}
.answer-block.right .answer-label{ color:var(--richtig) }
.answer-block.wrong.gewaehlt .answer-label{ color:var(--falsch) }

.answer-text{ margin:0; line-height:1.45 }
.answer-block.right .answer-text,
.answer-block.wrong.gewaehlt .answer-text{ font-weight:700 }

.answer-reason{
  margin:9px 0 0; padding-top:9px;
  border-top:1px solid var(--linie);
  color:var(--tinte-leise); font-size:.93em; line-height:1.5;
}
.answer-reason:empty{ display:none }

/* Erklaerung: weisse Flaeche statt getoenter.
   Hier stehen regelmaessig mehrere Absaetze - der laengste Fliesstext des
   ganzen Werkzeugs. Auf Creme gelesen ermuedet das, und die Toenung trug
   keine Bedeutung. Die goldene Kante links bleibt als Kennzeichen. */
.explanation{
  background:var(--karte-hoch);
  border:1px solid var(--linie);
  border-left:5px solid var(--gold);
  border-radius:var(--radius-klein);
  padding:15px 17px; line-height:1.6; margin:18px 0;
  color:var(--tinte);
}
.explanation::before{
  content:"Zum Hintergrund"; display:block;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--gold-tief); margin-bottom:7px;
}

.result{ text-align:center; padding:32px 20px }
.result h1{ margin:0 0 8px }
.result-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px }
.result-actions form{ margin:0 }


/* ---------------------------------------------------------------------------
   10  Uebersicht und Kacheln
   --------------------------------------------------------------------------- */

.module-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px; margin:0 0 18px;
}
.module-box{
  display:flex; flex-direction:column;
  /* Grid streckt alle Kacheln einer Reihe ohnehin auf gleiche Hoehe.
     Die Mindesthoehe sorgt dafuer, dass auch eine Reihe aus lauter
     einzeiligen Titeln nicht flacher ausfaellt als die daruber. */
  min-height:196px;
  background:var(--karte);
  border:1px solid var(--linie-stark);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--schatten);
  transition:box-shadow .15s ease, transform .15s ease;
}
.module-box:hover{ box-shadow:var(--schatten-hoch); transform:translateY(-2px) }
@media (hover:none){ .module-box:hover{ transform:none; box-shadow:var(--schatten) } }
.module-box h3{ margin:0 0 5px }
.module-box .box-meta{ color:var(--tinte-leise); font-size:.9em; font-weight:600 }
/* Der Knopf traegt das margin-top:auto, nicht der Fortschrittsbalken.
   Sonst stehen die Knoepfe einer Reihe auf verschiedenen Hoehen, sobald
   ein Balken fehlt - im Demomodus wird naemlich keiner angezeigt. */
.module-box .progress-row{ padding-top:12px }
.module-box .box-start{ margin-top:auto; padding-top:12px }
.module-box .btn{ font-size:15px; min-height:42px; padding:9px 16px }


/* ---------------------------------------------------------------------------
   11  Anmeldung
   --------------------------------------------------------------------------- */

.auth-card{ max-width:430px; margin:32px auto }
.auth-card h2{ text-align:center; margin-bottom:18px }
.auth-card label{ margin-bottom:15px; display:block }
.auth-card .btn{ width:100%; margin-top:8px }
.auth-links{ text-align:center; margin-top:18px; font-size:.94em; color:var(--tinte-leise) }
.auth-links a{ font-weight:700 }

.pw-feld{ position:relative }
.pw-feld input{ padding-right:50px }
.pw-zeigen{
  position:absolute; right:5px; bottom:5px;
  width:38px; height:38px; padding:0;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--tinte-leise); border-radius:6px; font-size:18px; line-height:1;
}
.pw-zeigen:hover{ background:var(--gruen-hell); color:var(--gruen-tief) }

.widerruf{
  background:var(--gold-hell);
  border:1px solid var(--gold);
  border-radius:var(--radius-klein);
  padding:15px 17px; margin:18px 0;
}
.widerruf label{
  display:flex; align-items:flex-start; gap:11px;
  font-weight:400; font-size:.94rem; line-height:1.45;
  color:var(--gold-tief); cursor:pointer;
}
.widerruf input{ width:21px; height:21px; flex:0 0 21px; margin:2px 0 0; accent-color:var(--gruen); cursor:pointer }
.widerruf a{ color:var(--gold-tief); font-weight:700; text-decoration:underline }


/* ---------------------------------------------------------------------------
   12  Verwaltung
   --------------------------------------------------------------------------- */

.card table{ width:100%; border-collapse:collapse; font-size:.93rem }
.card table th{
  text-align:left; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--tinte-leise); font-weight:700;
  padding:0 10px 9px 0; border-bottom:2px solid var(--linie-stark);
}
.card table td{ padding:11px 10px 11px 0; border-bottom:1px solid var(--linie); vertical-align:top }
.card table tr:last-child td{ border-bottom:none }

details.card summary{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-weight:700; cursor:pointer; color:var(--gruen-tief);
  list-style:none; display:flex; align-items:center; gap:8px;
}
details.card summary::-webkit-details-marker{ display:none }
details.card summary::before{ content:"▸"; transition:transform .15s ease; display:inline-block }
details.card[open] summary::before{ transform:rotate(90deg) }

.erklaerung p{ line-height:1.55; color:var(--tinte-leise); margin:12px 0 0 }
.erklaerung p strong{ color:var(--tinte) }

.danger summary{ color:var(--falsch) }
.danger form{ display:flex; gap:10px; margin-top:14px; align-items:center; flex-wrap:wrap }
.danger select{ margin-top:0; max-width:260px }


/* ---------------------------------------------------------------------------
   13  Angebot

   Gruen gefuellt mit orangefarbener Unterkante - dieselbe Kombination wie
   die Kopfzeile, damit es als Teil derselben Sprache gelesen wird.
   --------------------------------------------------------------------------- */

.angebot{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  background:var(--gruen);
  border-bottom:6px solid var(--gold);
  border-radius:var(--radius);
  padding:22px 24px; margin:0 0 20px;
  box-shadow:var(--schatten-hoch);
}
@media (prefers-color-scheme: dark){ .angebot{ background:#0d4a0d } }

.angebot-text{ flex:1 1 260px; min-width:0 }
.angebot .eyebrow{ color:#fff; opacity:.8; margin-bottom:5px }
.angebot-titel{
  font-family:'Bricolage Grotesque','Source Sans 3',Arial,sans-serif;
  font-size:1.4rem; font-weight:700; color:#fff; margin:0 0 7px; line-height:1.15;
}
.angebot-note{ color:#fff; opacity:.9; font-size:.95rem; line-height:1.45; margin:0 }

.angebot .btn{
  flex:0 0 auto; background:var(--gold); color:#111;
  font-size:16px; padding:13px 26px;
}
.angebot .btn:hover{ background:#dd930f }


/* ---------------------------------------------------------------------------
   14  Fuss und Handy
   --------------------------------------------------------------------------- */

.uh-footer{
  flex:0 0 auto;
  border-top:6px solid var(--gold);
  background:var(--karte);
  margin-top:44px;
  padding:24px max(18px,env(safe-area-inset-right,0px))
          calc(28px + var(--sicher-unten)) max(18px,env(safe-area-inset-left,0px));
  text-align:center;
}
.uh-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:12px }
.uh-footer-links a{ color:var(--tinte-leise); font-size:.9rem; font-weight:700 }
.uh-footer-links a:hover{ color:var(--gruen-tief) }
.uh-footer-note{ color:var(--tinte-still); font-size:.84rem; line-height:1.55; max-width:520px; margin:0 auto }


@media (max-width:640px){
  body{ font-size:16px }
  .container{ padding:14px 14px 88px }

  .uh-header{ border-bottom-width:4px }
  .uh-header-inner{ height:58px; gap:10px }
  .uh-banner,.uh-logo{ height:38px }

  .card{ padding:16px 14px }
  .module-grid{ grid-template-columns:1fr; gap:10px }
  .form-grid{ grid-template-columns:1fr }
  .form-grid .btn{ justify-self:stretch; width:100% }

  .stat-tiles{ gap:8px }
  .stat-tile{ padding:11px 5px }
  .stat-tile .num{ font-size:1.4rem }
  .stat-tile .lbl{ font-size:.7rem }

  .ring{ width:74px; height:74px; flex-basis:74px }
  .split{ align-items:flex-start }

  .answer-block{ padding:12px 13px 12px 46px }
  .answer-block::before{ left:13px }

  .result-actions{ flex-direction:column }
  .result-actions .btn,.result-actions form{ width:100% }

  .angebot{ padding:18px 16px }
  .angebot .btn{ width:100% }

  .danger form{ display:block }
  .danger select{ margin-bottom:10px; max-width:none }
  .danger .btn{ width:100% }

  .card table{ font-size:.87rem }
  .card table td,.card table th{ padding-right:6px }

  /* Handlungsleiste im Daumenbereich */
  .aktionsleiste.klebend{
    position:sticky; bottom:0; z-index:40;
    margin:0 -14px; padding:12px 14px calc(12px + var(--sicher-unten));
    background:var(--papier);
    border-top:1px solid var(--linie);
  }
}

@media (max-width:360px){
  .answers span{ padding:11px 11px; gap:9px }
  .answers b{ flex-basis:26px; height:26px }
}


/* ---------------------------------------------------------------------------
   15  Fortschritt zuruecksetzen

   Sitzt jetzt direkt an der Fortschrittskarte statt zugeklappt am Seitenende.
   Zugeklappt bleibt es trotzdem - es ist eine seltene und folgenreiche
   Handlung, die nicht neben dem Startknopf stehen soll.
   --------------------------------------------------------------------------- */

.zuruecksetzen{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--linie);
}
.zuruecksetzen summary{
  cursor:pointer; font-size:.9rem; font-weight:700; color:var(--tinte-leise);
  list-style:none; display:inline-flex; align-items:center; gap:7px;
}
.zuruecksetzen summary::-webkit-details-marker{ display:none }
.zuruecksetzen summary::before{ content:"▸"; display:inline-block; transition:transform .15s ease }
.zuruecksetzen[open] summary::before{ transform:rotate(90deg) }
.zuruecksetzen summary:hover{ color:var(--falsch) }
.zuruecksetzen form{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px;
}
.zuruecksetzen select{ margin-top:0; max-width:260px }

/* Fusszeile: die Kontaktadresse soll auffindbar sein, nicht dekorativ */
.uh-footer-note a{ color:var(--gruen-tief); font-weight:700 }

@media (max-width:640px){
  .zuruecksetzen form{ display:block }
  .zuruecksetzen select{ max-width:none; margin-bottom:10px }
  .zuruecksetzen .btn{ width:100% }
}


/* ---------------------------------------------------------------------------
   16  Nur im Pruefungstrainer

   Vier Ergaenzungen, die der Sachkunde-Trainer nicht braucht. Bewusst am
   Ende und in einem eigenen Abschnitt: So bleibt der Rest zeilengleich zu
   skt.css und laesst sich bei einer Aenderung dort einfach abgleichen.
   --------------------------------------------------------------------------- */

/* Kachel im Demoumfang. Nicht ausgegraut - was hier steht, ist spielbar,
   nur eben nicht vollstaendig. Die goldene Kante ist dieselbe wie am
   Angebotsblock, damit beides als derselbe Hinweis gelesen wird. */
.module-box.demo{ border-color:var(--gold) }
.module-box .box-demo{
  display:inline-block; align-self:flex-start; margin-top:6px;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:var(--gold-tief); background:var(--gold-hell);
  border:1px solid var(--gold); border-radius:999px; padding:2px 10px;
}

/* Themen ohne vollstaendige Vorbereitung - ein Befund fuer den Betreiber,
   fuer Lernende ohne Belang. Deshalb leise. */
.module-box .box-warn{ color:var(--gold-tief); font-size:.82rem; margin-top:4px }

/* Erklaerung unter der Modusauswahl. Sitzt dicht am Feld, auf das sie
   sich bezieht, deshalb der negative Abstand nach oben. */
.modus-hinweis{
  grid-column:1/-1; margin-top:-6px;
  color:var(--tinte-leise); font-size:.9rem; line-height:1.45;
}

/* Verweise rechts in der Kopfzeile: Anmelden, Vollzugang, Abmelden. */
.topline .rechts{ display:flex; gap:16px; align-items:center; font-size:.95rem }
@media (max-width:640px){
  .topline .rechts{ gap:12px; font-size:.9rem }
}

/* Navigation als Pillen statt Textlinks.
   Auf dem Telefon sind Woerter in Fliesstextgroesse keine brauchbaren
   Tippziele - eine Pille mit Innenabstand schon. Welche Pillen erscheinen,
   entscheidet die Seite nach Zugangsstand; hier steht nur das Aussehen. */
.navpills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end }
.navpills a{
  display:inline-block; background:var(--papier);
  border:1px solid var(--linie-stark); border-radius:999px;
  padding:7px 14px; font-weight:700; font-size:.85rem; color:var(--tinte);
  transition:background .15s ease, border-color .15s ease;
}
.navpills a:hover{ background:var(--gruen-hell); border-color:var(--gruen) }
/* Die eine Pille, die etwas kostet oder etwas bringt - genau eine je Seite. */
.navpills a.wichtig{ background:var(--gruen); border-color:var(--gruen); color:#fff }
.navpills a.wichtig:hover{ background:var(--gruen-tief) }
.navpills a.leise{ color:var(--tinte-leise) }
@media (max-width:640px){
  .navpills{ justify-content:flex-start }
  .navpills a{ font-size:.82rem; padding:8px 13px }
}

/* Kopfzeile mit Pillen: der Markenname darf umbrechen, die Pillen nicht. */
.topline.mit-pillen{ align-items:flex-start; gap:12px }
.topline.mit-pillen .marke{ color:var(--tinte-leise); font-size:.9rem; padding-top:6px }
@media (max-width:640px){
  .topline.mit-pillen{ flex-direction:column }
  .topline.mit-pillen .marke{ padding-top:0 }
}


/* ---------------------------------------------------------------------------
   17  Schriften

   Lokal ausgeliefert aus /fonts/, nicht von Google geladen. Das Einbinden
   von Google Fonts ueber deren Server uebertraegt die IP-Adresse jedes
   Besuchers in die USA - nach dem Urteil des LG Muenchen I vom 20.01.2022
   (Az. 3 O 17493/20) ohne Einwilligung ein Verstoss. Lokal ausgeliefert
   stellt sich die Frage gar nicht erst.

   Eingebunden sind nur die vier Schnitte, die diese Datei tatsaechlich
   anspricht: Source Sans 3 in 400, 600 und 700 fuer den Fliesstext,
   Bricolage Grotesque in 700 fuer Ueberschriften, Kacheltitel und die
   grossen Zahlen.

   font-display:swap sorgt dafuer, dass der Text sofort in der Ersatzschrift
   erscheint statt unsichtbar zu bleiben, bis die Datei geladen ist. Auf
   einer Mobilverbindung sind das schnell zwei Sekunden leere Seite.
   --------------------------------------------------------------------------- */

@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/source-sans-3-v19-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2');
}

/* Sperrhinweis unter der Modusauswahl.
   Weisse Flaeche mit goldenem Rahmen: Der Kasten sitzt auf einer
   cremefarbenen Karte - ein getoenter Hinweis darauf verschwindet, egal
   wie kraeftig die Kante ist. Das Schloss macht in einem Wimpernschlag
   klar, worum es geht; der Text erklaert es dann in Ruhe. */
.modus-sperre{
  grid-column:1/-1; position:relative;
  background:var(--karte-hoch);
  border:2px solid var(--gold);
  border-radius:var(--radius-klein);
  padding:15px 18px 15px 52px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.modus-sperre::before{
  content:"🔒"; position:absolute; left:16px; top:15px;
  font-size:19px; line-height:1;
}
.modus-sperre .marke{
  display:inline-block; margin-bottom:7px;
  background:var(--gold-hell); border:1px solid var(--gold);
  border-radius:999px; padding:2px 11px;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold-tief);
}
.modus-sperre p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--tinte) }
.modus-sperre p.klein{ margin-top:8px; font-size:.88rem; color:var(--tinte-leise) }
.modus-sperre a{ color:var(--gruen); font-weight:700; text-decoration:underline }
.modus-sperre a:hover{ color:var(--gruen-tief) }

@media (max-width:640px){
  .modus-sperre{ padding:13px 14px 13px 46px }
  .modus-sperre::before{ left:14px; top:14px; font-size:17px }
}

/* Kacheltitel: Umbruch nur zwischen Woertern.
   Ohne balance kippt der Browser bei drei Zeilen gern ein einzelnes Wort
   in die letzte - "und Rasseunterschiede" allein sieht nach Fehler aus. */
.module-box h3{ text-wrap:balance; hyphens:none; overflow-wrap:normal }

/* Abstand ueber der Demo-Pille, damit sie nicht am Text klebt */
.module-box .box-demo{ margin-top:8px }