@charset "UTF-8";
/* =============================================================================
   Compliance Learning – Datenschutz am Arbeitsplatz
   -----------------------------------------------------------------------------
   Aufbau dieser Datei
     1  Schrift
     2  Gestaltungswerte (Farbe, Typo, Raster, Tiefe)
     3  Grundlagen
     4  Bedienelemente
     5  Kopf- und Fußzeile
     6  Lernbühne: Szenenschiene, Bildschicht, Textbogen
     7  Szeneninhalte
     8  Abschlusstest
     9  Seitenbereiche und Dialoge
    10  Unterbrochen-Ansicht
    11  Größenanpassung (eine geordnete Kette, keine Überlagerungen)
    12  Druck
   ============================================================================= */


/* == 1  Schrift ============================================================ */
/*
   Es wird bewusst keine Schrift von einem fremden CDN geladen: eine
   Datenschutzschulung sollte selbst keine Daten an Dritte senden.
   Der Stack nutzt die jeweils beste Systemschrift mit vollständiger
   Abdeckung deutscher Zeichen.

   Wenn Sie eine eigene Schrift mitliefern möchten, legen Sie die
   WOFF2-Dateien unter assets/fonts/ ab und aktivieren Sie diesen Block:

   @font-face{
     font-family:"Kursschrift";
     src:url("assets/fonts/kursschrift-400.woff2") format("woff2");
     font-weight:400; font-style:normal; font-display:swap;
   }
   @font-face{
     font-family:"Kursschrift";
     src:url("assets/fonts/kursschrift-600.woff2") format("woff2");
     font-weight:600; font-style:normal; font-display:swap;
   }
   Danach "Kursschrift" als erstes Glied in --font-text eintragen.
*/


/* == 2  Gestaltungswerte =================================================== */
:root{
  /* Farbe – Aktenblau und kühles Papier, nicht das übliche Systemblau.
     Alle Textfarben erreichen auf ihrem Untergrund mindestens 4.5:1. */
  --ink:          #0d1f30;
  --ink-soft:     #46617a;
  --ink-faint:    #6d8399;
  --navy:         #0f3557;
  --navy-deep:    #082740;
  --cobalt:       #1c62a8;
  --cobalt-soft:  #e8f0f8;

  --paper:        #f1f4f8;
  --sheet:        #ffffff;
  --fill:         #e6edf4;
  --fill-deep:    #dde6ef;   /* Rahmenflaeche bei eingepassten Bildern */
  --fill-soft:    #f6f9fc;
  --rule:         #cbd9e5;
  --rule-soft:    #e2eaf2;

  --verify:       #1c6b4c;
  --verify-bg:    #eaf4ef;
  --verify-rule:  #a9d0bd;
  --caution:      #8a5712;
  --caution-bg:   #fdf3e3;
  --caution-rule: #e6cb9b;
  --alert:        #9b3a3f;
  --alert-bg:     #fbeeee;
  --alert-rule:   #ddb1b3;

  /* Typografie – eine Familie, klare Stufen */
  --font-text: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;

  --t-display: 2.5rem;   /* 40px  Szenentitel        */
  --t-title:   1.75rem;  /* 28px  Kartentitel        */
  --t-lead:    1.3125rem;/* 21px  Einleitungssatz    */
  --t-body:    1.125rem; /* 18px  Grundtext          */
  --t-small:   1rem;     /* 16px  Antworten, Notizen */
  --t-meta:    0.8125rem;/* 13px  Statusangaben      */

  /* Raster – eine Skala, keine frei erfundenen Abstände */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 40px; --s8: 56px;

  /* Radien nach Rang: Foto fast eckig, Bedienfläche weich, Merksatz gerade */
  --r-photo:  4px;
  --r-field:  6px;
  --r-card:  10px;
  --r-panel: 14px;

  /* Tiefe – blaustichig, damit sie zur Palette gehört */
  --lift-1: 0 1px 2px rgba(13,31,48,.06), 0 2px 8px rgba(13,31,48,.05);
  --lift-2: 0 2px 6px rgba(13,31,48,.07), 0 14px 34px rgba(13,31,48,.10);
  --lift-3: 0 18px 60px rgba(8,39,64,.26);

  /* Höhen */
  --read: 54ch;     /* Lesebreite des Fliesstexts */
  --media-h: 560px; /* Obergrenze der Bildhoehe */
  --media-ar: 16/9; /* Seitenverhaeltnis des Bildrahmens */
  --media-gap: 32px;/* Luft links und rechts vom Bild - beidseitig gleich */

  /* Gemeinsames Raster von Kopfzeile und Buehne.
     Linke Kante   : Logo und Szenenpunkte
     Zweite Kante  : Ueberschrift der Kopfzeile und linker Bildrand
     Beide Kanten ergeben sich aus denselben Werten, sie koennen also
     nicht auseinanderlaufen. --grid-indent muss der Summe aus
     Schienenbreite und Bildabstand entsprechen. */
  --grid-indent: calc(var(--rail-w) + var(--media-gap));
  --brand-mark:  48px;
  --brand-gap:   calc(var(--grid-indent) - var(--brand-mark));

  /* Waagerechter Rand. Kopfzeile, Buehne und Fusszeile benutzen denselben
     Wert, deshalb koennen ihre linken Kanten nicht auseinanderlaufen.
     Ist das Fenster breiter als --app-max, wandert der Rand mit, damit die
     Kopfzeile ueber die volle Breite bleibt, ihr Inhalt aber mit der
     Buehne buendig sitzt. */
  --gutter:  30px;
  /* Groesste sinnvolle Breite der Buehne: Schiene + beide Abstaende +
     Bild in voller Hoehe + Textspalte + Raender. Wird das Fenster breiter,
     waechst der Rand statt einer Luecke zwischen Bild und Text. Ohne das
     entstand bei 1600 px eine Luecke von 65 px rechts gegen 32 px links. */
  --app-max: calc(var(--rail-w) + 2 * var(--media-gap)
                  + var(--media-h) * 16 / 9 + var(--text-w) + 2 * var(--gutter));
  --edge:    max(var(--gutter), calc((100vw - var(--app-max)) / 2 + var(--gutter)));
  /* Abstand der Bildoberkante zur Kopfzeile. Bewusst knapp: jede Zeile,
     die hier verschenkt wird, fehlt unten beim Text - und nach dem Pruefen
     einer Antwort kommt die Rueckmeldung dazu. Der Block soll ohne
     Scrollen lesbar bleiben. */
  --stage-top: 26px;
  --text-w: 30rem;  /* Breite der Textspalte neben dem Bild */
  --head-h:   78px;
  --foot-h:   74px;
  --rail-w:   34px;   /* entspricht genau der Punktbreite */

  --ease: cubic-bezier(.22,.61,.36,1);
}


/* == 3  Grundlagen ========================================================= */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;   /* Rueckfall fuer Browser ohne dvh */
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.6;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}

p{margin:0}
ol,ul{margin:0;padding:0}
b,strong{font-weight:600}

svg{width:1em;height:1em;display:block;fill:none}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Zahlen laufen tabellarisch, damit Prozentwerte beim Zählen nicht zappeln */
.status__count,.status__place,.foot__place,#panelPct,.rail__num,
.result__pct,.tally b{font-variant-numeric:tabular-nums}

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

.skip-link{
  position:fixed;top:var(--s2);left:var(--s2);z-index:90;
  transform:translateY(-260%);
  padding:10px 16px;border-radius:var(--r-field);
  background:var(--navy);color:#fff;text-decoration:none;font-weight:600;
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--cobalt);
  outline-offset:2px;
  border-radius:var(--r-field);
}

.app{
  min-height:100vh;   /* Rueckfall fuer Browser ohne dvh */
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}


/* == 4  Bedienelemente ===================================================== */
.btn{
  --btn-bg:transparent; --btn-fg:var(--navy); --btn-line:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:46px;padding:0 var(--s5);
  border:1px solid var(--btn-line);border-radius:var(--r-field);
  background:var(--btn-bg);color:var(--btn-fg);
  font:inherit;font-weight:600;font-size:var(--t-small);
  cursor:pointer;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}

.btn--solid{--btn-bg:var(--navy);--btn-fg:#fff;--btn-line:var(--navy)}
.btn--ghost{--btn-line:var(--rule);--btn-bg:var(--sheet)}
.btn--quiet{--btn-bg:var(--fill);--btn-line:var(--fill)}
.btn--danger{--btn-bg:#8d3138;--btn-fg:#fff;--btn-line:#8d3138}
.btn--wide{width:100%}

.btn:disabled{opacity:.4;cursor:not-allowed}

@media (hover:hover){
  .btn--solid:not(:disabled):hover{--btn-bg:var(--navy-deep);--btn-line:var(--navy-deep)}
  .btn--ghost:not(:disabled):hover{--btn-bg:var(--fill-soft);--btn-line:var(--ink-faint)}
  .btn--quiet:not(:disabled):hover{--btn-bg:var(--cobalt-soft);--btn-line:var(--cobalt-soft)}
  .btn--danger:not(:disabled):hover{--btn-bg:#7a2a30;--btn-line:#7a2a30}
}


/* == 5  Kopf- und Fußzeile ================================================= */
.head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--s5);
  min-height:var(--head-h);
  padding:var(--s3) var(--edge);
  background:var(--sheet);
  border-bottom:1px solid var(--rule);
}

.head__brand{display:flex;align-items:center;gap:var(--brand-gap);min-width:0}
.brand__mark{
  flex:none;display:block;
  /* Das Logo steht frei, ohne farbige Kachel dahinter: es bringt eigene
     Farben mit, und die Kopfzeile ist weiss.
     Festgelegt wird die BREITE, nicht die Hoehe - an der Breite haengt die
     zweite Rasterlinie, an der auch der linke Bildrand sitzt. Die Hoehe
     ergibt sich aus dem Seitenverhaeltnis der Datei. */
  width:var(--brand-mark);height:auto;
  background:none;border-radius:0;
}
.brand__text{display:grid;min-width:0}
.brand__text strong{
  font-size:1.0625rem;letter-spacing:-.012em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__text span{
  font-size:var(--t-meta);color:var(--ink-soft);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.head__status{
  display:grid;gap:1px;justify-items:end;text-align:right;
  padding-right:var(--s5);border-right:1px solid var(--rule-soft);
}
.status__place{font-size:var(--t-small);font-weight:600;color:var(--ink)}
.status__count{font-size:var(--t-meta);color:var(--ink-soft)}

.head__tools{display:flex;gap:var(--s1)}
.tool{
  display:grid;place-items:center;gap:5px;
  min-width:66px;padding:var(--s2) var(--s3);
  border:1px solid transparent;border-radius:var(--r-field);
  background:transparent;color:var(--ink-soft);
  font:inherit;font-size:var(--t-meta);font-weight:600;
  cursor:pointer;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.tool svg{width:21px;height:21px}
.tool--quit{color:var(--ink-faint)}
@media (hover:hover){
  .tool:hover{background:var(--fill-soft);color:var(--navy)}
}

.head__menu{
  display:none;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);color:var(--ink);
  font:inherit;font-weight:600;font-size:var(--t-small);cursor:pointer;
}
.head__menu svg{width:20px;height:20px}

/* Ein dünner Lesefortschritt über die ganze Breite statt eines Widgets */
.head__bar{
  position:absolute;inset:auto 0 -1px 0;height:2px;background:var(--rule-soft);
}
.head__bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--navy),var(--cobalt));
  transition:width .4s var(--ease);
}

.foot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--s4);
  min-height:var(--foot-h);
  padding:var(--s3) var(--edge) max(var(--s3),env(safe-area-inset-bottom));
  background:var(--sheet);
  border-top:1px solid var(--rule);
}
.foot__place{
  display:grid;gap:1px;text-align:center;max-width:52ch;
}
.foot__place b{font-size:var(--t-meta);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot__place span{font-size:var(--t-meta);color:var(--ink-faint)}
#btnBack{justify-self:start}
#btnNext{justify-self:end;min-width:172px}
#btnNext svg{margin-right:-4px}
#btnBack svg{margin-left:-4px}


/* == 6  Lernbühne ========================================================== */
.stage{
  display:grid;
  /* Schiene | Bild (nimmt den freien Raum) | Textspalte (begrenzt) */
  grid-template-columns:var(--rail-w) minmax(0,1fr) minmax(26rem,var(--text-w));
  column-gap:0;
  row-gap:var(--s4);
  align-items:start;
  width:100%;
  margin:0;
  padding:var(--s6) var(--edge) var(--s5);
}
/* Die Schiene begleitet das Bild, drueckt aber nicht dagegen. Links und
   rechts vom Bild steht bewusst derselbe Abstand: die Aufnahme sitzt damit
   in einer symmetrischen Lücke und wirkt nicht eingeklemmt. */
.rail{margin-right:0}
.stage.is-single:not(.is-plain) .sheet{margin-left:var(--s5)}
/* Zusammenfassung und Abschlusstest laufen einspaltig: kein Bild, ein Bogen. */
.stage.is-single{grid-template-columns:var(--rail-w) minmax(0,1fr);max-width:1060px;margin-inline:auto}
.stage.is-single .media{display:none}
.stage.is-plain{grid-template-columns:minmax(0,1fr);max-width:1060px;margin-inline:auto}

/* Karten (Kapitelabschluss, Kursabschluss, Abschlusstest, Unterbrechung)
   folgen NICHT dem Raster der Szenenansicht. Sie stehen als Block in der
   Mitte.

   Wichtig: --edge waechst auf breiten Bildschirmen mit dem Fenster. Da
   max-width den Aussenabstand einschliesst, blieb bei 2560 px von der
   Karte nur noch ein 82 px schmaler Streifen uebrig - der Text lief dann
   ueber 1536 px Hoehe und musste gescrollt werden. Karten bekommen
   deshalb den festen Rand statt des mitwachsenden. */
.stage.is-single,.stage.is-plain{padding-left:var(--gutter);padding-right:var(--gutter)}
.stage.is-plain .media{display:none}
.rail[hidden]{display:none}

/* -- Szenenschiene: das eine auffällige Element ---------------------------
   Sie ersetzt die anonymen Punkte der bisherigen Fußzeile und trägt echte
   Information: Art der Szene, Status und Sprungziel. Feste Breite, damit
   das Bild rechts davon unter keinen Umständen wandert.
   --------------------------------------------------------------------- */
.rail{
  position:relative;
  display:grid;gap:var(--s2);
  align-content:start;
  padding-top:2px;
}
.rail::before{
  content:"";
  position:absolute;left:calc(var(--rail-w)/2 - 1px);top:14px;bottom:14px;
  width:2px;background:var(--rule-soft);border-radius:2px;
}
.rail__step{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:var(--rail-w);height:var(--rail-w);
  padding:0;border:0;background:none;
  color:var(--ink-faint);cursor:default;
}
.rail__dot{
  display:grid;place-items:center;
  width:var(--rail-w);height:var(--rail-w);border-radius:50%;
  background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--rule);
  color:var(--ink-faint);
  transition:box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
}
.rail__num{font-size:12px;font-weight:600}
.rail__dot svg{width:calc(var(--rail-w) * 0.44);height:calc(var(--rail-w) * 0.44)}

.rail__step[data-state="done"]{cursor:pointer}
.rail__step[data-state="done"] .rail__dot{
  background:var(--verify-bg);box-shadow:inset 0 0 0 2px var(--verify-rule);color:var(--verify);
}
.rail__step[data-state="visited"]{cursor:pointer}
.rail__step[data-state="visited"] .rail__dot{
  background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink-faint);color:var(--ink-soft);
}
.rail__step[data-state="current"] .rail__dot{
  background:var(--navy);
  box-shadow:inset 0 0 0 2px var(--navy), 0 1px 3px rgba(13,31,48,.28);
  color:#fff;
}
@media (hover:hover){
  .rail__step[data-state="done"]:hover .rail__dot,
  .rail__step[data-state="visited"]:hover .rail__dot{box-shadow:inset 0 0 0 2px var(--cobalt)}
}

/* -- Bildschicht ----------------------------------------------------------
   Zwei übereinanderliegende Bilder blenden über. Der Knoten selbst wird
   nie neu erzeugt, deshalb kann das Bild nicht springen oder nachladen.

   Der Rahmen hat ein festes Seitenverhältnis (16:9, das Verhältnis der
   meisten Vorlagen) statt einer festen Höhe bei beliebiger Breite. Sonst
   entsteht ein hochkant gestauchter Ausschnitt, der die Aufnahme
   beschneidet. Die Höhe bleibt innerhalb einer Bildschirmgröße konstant,
   das Bild kann also beim Szenenwechsel nicht wandern.
   --------------------------------------------------------------------- */
.media{
  position:relative;
  aspect-ratio:var(--media-ar);
  /* Kein width:100% - sonst waere die Box so breit wie die Spalte und der
     rechte Aussenabstand wuerde nach aussen gedrueckt statt zu wirken. */
  max-width:calc(var(--media-h) * 16 / 9);
  margin:0 var(--media-gap);   /* links wie rechts derselbe Abstand */
  border-radius:var(--r-photo);
  overflow:hidden;
  background:var(--fill);
  box-shadow:var(--lift-1);
}
.media__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity .32s var(--ease);
}
/* Weicht eine Vorlage stark vom Rahmenverhältnis ab, wird sie vollständig
   eingepasst statt beschnitten. Der Rahmen bleibt dabei unverändert. */
.media.fit-contain .media__img{object-fit:contain}
.media.fit-contain{background:var(--fill-deep,var(--fill))}
.media__img.is-top{opacity:1}
.media__img:not([src]){display:none}
/* Beim allerersten Aufbau soll nichts einblenden: der Kurs beginnt sofort. */
.media.no-fade .media__img{transition:none}

/* -- Textbogen ------------------------------------------------------------ */
.sheet{position:relative;min-width:0}
.sheet__scroll{outline:none}

/* Der Szenenwechsel ist einer von zwei bewussten Bewegungsmomenten. */
.sheet__scroll.is-entering{animation:enter .34s var(--ease) both}
@keyframes enter{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* -- Sprechertext: Overlay über dem Textbogen, das Bild bleibt unberührt -- */
.transcript{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;
  border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--sheet);
  box-shadow:var(--lift-2);
  overflow:hidden;
}
.transcript[hidden]{display:none}
.transcript__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--rule-soft);
  background:var(--fill-soft);
}
.transcript__head h3{font-size:1.125rem}
.transcript__close{
  display:grid;place-items:center;
  width:36px;height:36px;flex:none;
  border:0;border-radius:var(--r-field);
  background:transparent;color:var(--ink-soft);cursor:pointer;
}
.transcript__close svg{width:20px;height:20px}
@media (hover:hover){.transcript__close:hover{background:var(--fill);color:var(--navy)}}
.transcript__body{
  flex:1 1 auto;min-height:0;
  padding:var(--s5);
  overflow:auto;overscroll-behavior:contain;
  color:var(--ink-soft);line-height:1.68;
}


/* == 7  Szeneninhalte ====================================================== */
/* Registerreiter: trägt Kapitel und Art der Szene, in normaler Schreibweise
   und nicht als gesperrtes Großbuchstabenlabel. */
.tab{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s4);
  padding:5px var(--s3) 5px var(--s2);
  border-left:3px solid var(--cobalt);
  background:var(--cobalt-soft);
  color:var(--navy);
  font-size:var(--t-meta);font-weight:600;
}
.tab svg{width:15px;height:15px}

.scene__title{font-size:var(--t-display);max-width:24ch;margin-bottom:var(--s4)}
/* Fragen sind laenger als Aussagetitel und brauchen eine ruhigere Stufe. */
.scene__title--ask{font-size:2rem;max-width:32ch;line-height:1.18}
.scene__kicker{
  margin-bottom:var(--s4);padding-left:var(--s4);
  border-left:2px solid var(--rule);
  color:var(--ink);font-size:var(--t-small);
}
.scene__lead{font-size:var(--t-lead);line-height:1.5;max-width:var(--read);margin-bottom:var(--s4)}
.scene__text{color:var(--ink-soft);max-width:calc(var(--read) + 6ch);margin-bottom:var(--s4)}
.scene__text:last-child{margin-bottom:0}

/* Lernziele: eine echte Liste, keine dekorierten Karten */
.goals{list-style:none;display:grid;gap:var(--s2);margin:var(--s4) 0 var(--s5)}
.goals li{
  display:grid;grid-template-columns:22px 1fr;gap:var(--s3);
  align-items:start;font-size:var(--t-small);
}
.goals svg{width:18px;height:18px;margin-top:3px;color:var(--verify)}

/* Begriffssammlungen laufen als Wortmarken, nicht als Kartenraster:
   es sind Beispiele, keine Schritte. */
.terms{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0}
.terms span{
  padding:7px var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--fill-soft);
  font-size:var(--t-small);font-weight:600;color:var(--navy);
}

/* Hinweis im Fließtext */
.note{
  display:grid;grid-template-columns:20px 1fr;gap:var(--s3);
  margin:var(--s5) 0;padding:var(--s4) var(--s4) var(--s4) var(--s3);
  border-left:3px solid var(--caution-rule);
  background:var(--caution-bg);
  font-size:var(--t-small);color:#5f3c0b;
}
.note svg{width:18px;height:18px;margin-top:2px;color:var(--caution)}

/* -- Antworten: Einzel- und Mehrfachauswahl sind bewusst gleich gestaltet -- */
.answers{display:grid;gap:var(--s2);margin:var(--s4) 0}
.answer{
  display:grid;grid-template-columns:22px 1fr;gap:var(--s3);
  align-items:start;
  min-height:54px;padding:var(--s3) var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);
  font-size:var(--t-small);line-height:1.45;
  cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.answer input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:22px;height:22px;margin:1px 0 0;
  border:2px solid var(--ink-faint);border-radius:4px;
  background:var(--sheet) center/14px 14px no-repeat;
  cursor:pointer;
}
.answer input:checked{
  border-color:var(--navy);background-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l3.4 3.4L16 5.8'/%3E%3C/svg%3E");
}
.answer input:disabled{cursor:default}
.answer > span{padding-top:1px}

.answer.is-picked{border-color:var(--cobalt);background:var(--cobalt-soft)}
.answer.is-right{border-color:var(--verify-rule);background:var(--verify-bg)}
.answer.is-right input:checked{border-color:var(--verify);background-color:var(--verify)}
.answer.is-wrong{border-color:var(--alert-rule);background:var(--alert-bg)}
.answer.is-wrong input:checked{border-color:var(--alert);background-color:var(--alert)}
.answer.is-locked{cursor:default}
@media (hover:hover){
  .answer:not(.is-locked):not(.is-right):not(.is-wrong):hover{border-color:var(--cobalt)}
}
.answer:has(input:focus-visible){outline:2px solid var(--cobalt);outline-offset:2px}

.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* -- Rückmeldung ---------------------------------------------------------- */
.feedback{
  display:grid;grid-template-columns:24px 1fr;gap:var(--s3);
  margin-top:var(--s4);padding:var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--fill-soft);
  scroll-margin-block:120px;
}
.feedback svg{width:22px;height:22px;margin-top:1px}
.feedback h3{font-size:var(--t-small);margin-bottom:3px}
.feedback p{font-size:var(--t-small);color:var(--ink-soft)}
.feedback--ok{background:var(--verify-bg);border-color:var(--verify-rule)}
.feedback--ok svg,.feedback--ok h3{color:var(--verify)}
.feedback--ok p{color:#2f5748}
.feedback--retry{background:var(--caution-bg);border-color:var(--caution-rule)}
.feedback--retry svg,.feedback--retry h3{color:var(--caution)}
.feedback--retry p{color:#5f3c0b}
.feedback--solved{background:var(--fill-soft);border-color:var(--rule)}
.feedback--solved svg,.feedback--solved h3{color:var(--navy)}

.attempts{margin-top:var(--s3);font-size:var(--t-meta);color:var(--ink-faint)}
.hint{margin-bottom:var(--s3);font-size:var(--t-meta);color:var(--ink-soft)}

/* -- Karte für Zusammenfassung, Test, Unterbrechung ---------------------- */
.card{
  --read:60ch;
  padding:var(--s7);
  border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--sheet);
  box-shadow:var(--lift-1);
}
.card__title{font-size:var(--t-title);margin-bottom:var(--s3)}

.seal{
  display:flex;align-items:center;gap:var(--s3);
  margin-bottom:var(--s5);
}
.seal__mark{
  display:grid;place-items:center;flex:none;
  width:54px;height:54px;border-radius:50%;
  background:var(--verify-bg);color:var(--verify);
  box-shadow:inset 0 0 0 2px var(--verify-rule);
}
.seal__mark svg{width:28px;height:28px}
.seal__text{font-size:var(--t-small);color:var(--ink-soft)}
.seal__text b{display:block;color:var(--ink);font-size:var(--t-title);letter-spacing:-.015em;line-height:1.2;margin-bottom:2px}

.takeaways{list-style:none;display:grid;gap:var(--s3);margin:var(--s5) 0}
.takeaways li{
  display:grid;grid-template-columns:22px 1fr;gap:var(--s3);
  align-items:start;
}
.takeaways svg{width:18px;height:18px;margin-top:4px;color:var(--verify)}

/* Die Kernbotschaft: gerade Kanten und eine Tintenlinie, damit sie wie ein
   festgehaltener Satz wirkt und nicht wie ein weiterer Kasten. */
.keynote{
  margin-top:var(--s6);padding:var(--s5) var(--s5) var(--s5) var(--s4);
  border-left:4px solid var(--navy);
  background:var(--fill-soft);
}
.keynote span{display:block;font-size:var(--t-meta);color:var(--ink-soft);margin-bottom:var(--s1)}
.keynote strong{font-size:1.375rem;font-weight:600;line-height:1.28;color:var(--navy);letter-spacing:-.012em}


/* == 8  Abschlusstest ====================================================== */
.exam__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s3);margin-bottom:var(--s5);
  border-bottom:1px solid var(--rule-soft);
}
.exam__head h2{font-size:var(--t-title)}
.exam__of{font-size:var(--t-meta);color:var(--ink-soft);white-space:nowrap}

/* Fragenübersicht: Sprungziele mit Status, dazu die Markierungen */
.grid-nav{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin:var(--s5) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--rule-soft);
}
.grid-nav__btn{
  position:relative;
  width:38px;height:38px;
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);color:var(--ink-soft);
  font:inherit;font-weight:600;font-size:var(--t-small);
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.grid-nav__btn[data-answered="yes"]{background:var(--cobalt-soft);border-color:#b6cde3;color:var(--navy)}
.grid-nav__btn[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.grid-nav__btn[data-flagged="yes"]::after{
  content:"";position:absolute;top:-3px;right:-3px;
  width:9px;height:9px;border-radius:50%;
  background:var(--caution);box-shadow:0 0 0 2px var(--sheet);
}
.grid-nav__legend{
  flex:1 1 100%;
  font-size:var(--t-meta);color:var(--ink-faint);
}
@media (hover:hover){.grid-nav__btn:hover{border-color:var(--cobalt)}}

.exam__flag{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:38px;padding:0 var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);color:var(--ink-soft);
  font:inherit;font-size:var(--t-meta);font-weight:600;cursor:pointer;
}
.exam__flag svg{width:16px;height:16px}
.exam__flag[aria-pressed="true"]{
  background:var(--caution-bg);border-color:var(--caution-rule);color:var(--caution);
}

/* Kennzahlen auf der Startseite des Tests */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;margin:var(--s5) 0;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft);border-radius:var(--r-field);
  overflow:hidden;
}
.facts div{padding:var(--s4);background:var(--sheet)}
.facts dt{font-size:var(--t-meta);color:var(--ink-soft);margin-bottom:2px}
.facts dd{margin:0;font-size:var(--t-lead);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}

.rules{list-style:none;display:grid;gap:var(--s2);margin:var(--s4) 0 var(--s5)}
.rules li{
  display:grid;grid-template-columns:20px 1fr;gap:var(--s3);
  align-items:start;font-size:var(--t-small);color:var(--ink-soft);
}
.rules svg{width:19px;height:19px;margin-top:2px;color:var(--cobalt)}

/* Ergebnis: der zweite bewusste Bewegungsmoment */
.result{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s5)}
.result__dial{position:relative;flex:none;width:132px;height:132px}
.result__dial svg{width:132px;height:132px;transform:rotate(-90deg)}
.result__track{fill:none;stroke:var(--fill);stroke-width:11}
.result__value{
  fill:none;stroke-width:11;stroke-linecap:round;
  stroke-dasharray:var(--dash-len,0) 1000;
  animation:dial .9s var(--ease) both;
}
@keyframes dial{from{stroke-dasharray:0 1000}}
.result__pct{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
}
.result__pct b{font-size:1.75rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.result__pct small{font-size:var(--t-meta);color:var(--ink-soft)}
.result__verdict{min-width:0}
.result__verdict h2{font-size:var(--t-title);margin-bottom:var(--s2)}
.result__verdict p{color:var(--ink-soft);max-width:48ch}
.result.is-passed .result__value{stroke:var(--verify)}
.result.is-passed .result__pct b{color:var(--verify)}
.result.is-failed .result__value{stroke:var(--caution)}
.result.is-failed .result__pct b{color:var(--caution)}

.tally{
  display:flex;flex-wrap:wrap;gap:var(--s5);
  padding:var(--s4) 0;margin-bottom:var(--s5);
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-small);color:var(--ink-soft);
}
.tally b{color:var(--ink);font-weight:600}

/* Auswertung Frage für Frage */
.fold{margin:var(--s5) 0 0;border-top:1px solid var(--rule-soft);padding-top:var(--s4)}
.fold > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  cursor:pointer;list-style:none;
  font-size:var(--t-small);font-weight:600;color:var(--navy);
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{
  content:"";flex:none;
  width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transform-origin:65% 65%;
  transition:transform .2s var(--ease);
}
.fold[open] > summary::after{transform:rotate(225deg)}
.fold > summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

.review{display:grid;gap:var(--s2);margin:var(--s4) 0 0}
.review__row{
  display:grid;grid-template-columns:24px 1fr auto;gap:var(--s3);
  align-items:start;
  padding:var(--s3) var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);
}
.review__row svg{width:20px;height:20px;margin-top:2px}
.review__row--ok{border-color:var(--verify-rule);background:var(--verify-bg)}
.review__row--ok > svg{color:var(--verify)}
.review__row--no{border-color:var(--alert-rule);background:var(--alert-bg)}
.review__row--no > svg{color:var(--alert)}
.review__q{font-size:var(--t-small);font-weight:600;margin-bottom:2px}
.review__meta{font-size:var(--t-meta);color:var(--ink-soft)}
.review__solution{margin-top:var(--s2);font-size:var(--t-meta);color:var(--ink-soft)}
.review__solution b{color:var(--ink)}
.review__jump{
  align-self:center;white-space:nowrap;
  min-height:34px;padding:0 var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);color:var(--navy);
  font:inherit;font-size:var(--t-meta);font-weight:600;cursor:pointer;
}
@media (hover:hover){.review__jump:hover{background:var(--cobalt-soft);border-color:var(--cobalt)}}

.advice{
  margin:var(--s5) 0;padding:var(--s4) var(--s4) var(--s4) var(--s3);
  border-left:3px solid var(--cobalt);
  background:var(--cobalt-soft);
  font-size:var(--t-small);
}
.advice h3{font-size:var(--t-small);margin-bottom:var(--s1)}
.advice p{color:#274e73}

/* Teilnahmebestätigung am Bildschirm */
.certify{
  margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--rule-soft);
}
.certify h3{font-size:var(--t-small);margin-bottom:var(--s2)}
.certify p{font-size:var(--t-meta);color:var(--ink-soft);margin-bottom:var(--s3);max-width:60ch}


/* -- Zertifikat: Formular und Prüfansicht --------------------------------
   Zwei Schritte in derselben Kartenfläche wie der Abschlusstest. Die
   Felder liegen in einem Raster, das sich von zwei Spalten auf eine
   umstellt - dadurch entsteht auf keinem Gerät ein waagerechter Balken.
   -------------------------------------------------------------------- */
.cert__step{
  font-size:var(--t-meta);font-weight:700;color:var(--cobalt);
  letter-spacing:.04em;margin-bottom:var(--s2);
}
.cert h2{font-size:1.5rem;margin-bottom:var(--s3)}
.cert__intro{font-size:var(--t-small);color:var(--ink-soft);max-width:64ch;margin-bottom:var(--s5)}
.cert abbr{color:var(--alert);text-decoration:none;margin-left:2px}

.cert__error{
  margin-bottom:var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--alert-rule,#e0b9bb);border-radius:var(--r-field);
  background:var(--alert-bg,#fbf1f1);color:var(--alert);
  font-size:var(--t-small);font-weight:600;
}

.cert__set{border:0;padding:0;margin:0 0 var(--s6)}
.cert__set legend{
  padding:0;margin-bottom:var(--s3);
  font-size:var(--t-small);font-weight:700;color:var(--ink);
}
.fields{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.field{display:grid;gap:6px;min-width:0}
.field--short{grid-column:span 1}
.field label{
  display:flex;align-items:baseline;gap:var(--s2);
  font-size:var(--t-meta);font-weight:600;color:var(--ink-soft);
}
.field__opt{font-weight:400;color:var(--ink-faint)}
.field input{
  width:100%;min-width:0;min-height:46px;padding:0 var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);color:var(--ink);
  font:inherit;font-size:var(--t-small);
}
.field input:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.field--bad input{border-color:var(--alert);background:var(--alert-bg,#fbf1f1)}
.field__msg{font-size:var(--t-meta);color:var(--alert);font-weight:600}

.cert__proof{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  padding:var(--s5);margin-bottom:var(--s5);
  border:1px solid var(--rule);border-radius:var(--r-panel);
  background:var(--fill-soft);
}
.cert__block{min-width:0}
.cert__block h3{
  font-size:var(--t-meta);font-weight:700;color:var(--ink-soft);
  letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:var(--s2);margin-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
}
.cert__block p{font-size:var(--t-small);line-height:1.55;overflow-wrap:anywhere}
.cert__strong{font-weight:700;color:var(--ink);font-size:var(--t-body)}

.cert__auto{display:grid;gap:var(--s2);margin-bottom:var(--s6)}
.cert__auto > div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s3)}
.cert__auto dt{font-size:var(--t-meta);color:var(--ink-faint)}
.cert__auto dd{font-size:var(--t-small)}

.cert__ok{display:flex;gap:var(--s4);align-items:flex-start;margin-bottom:var(--s4)}
.cert__ok svg{width:30px;height:30px;flex:none;color:var(--verify)}
.cert__ok h2{margin-bottom:2px}
.cert__ok p{font-size:var(--t-small);color:var(--ink-soft)}
.cert__file{
  font-size:var(--t-small);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:var(--s3) var(--s4);margin-bottom:var(--s5);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--fill-soft);overflow-wrap:anywhere;
}

@media (max-width:520px){
  .cert__auto > div{grid-template-columns:minmax(0,1fr);gap:0}
}


/* == 9  Seitenbereiche und Dialoge ========================================= */
.scrim{
  position:fixed;inset:0;z-index:40;
  background:rgba(8,39,64,.34);
  opacity:0;transition:opacity .22s var(--ease);
}
.scrim.is-on{opacity:1}

.panel{
  position:fixed;inset:0 0 0 auto;z-index:50;
  display:flex;flex-direction:column;
  width:min(452px,94vw);
  background:var(--sheet);
  box-shadow:var(--lift-3);
  transform:translateX(101%);
  transition:transform .26s var(--ease);
  visibility:hidden;
}
.panel.is-on{transform:none;visibility:visible}

.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex:none;
  padding:var(--s5) var(--s5) var(--s4);
  padding-top:max(var(--s5),env(safe-area-inset-top));
  border-bottom:1px solid var(--rule-soft);
}
.panel__head h2{font-size:1.375rem}
.panel__close{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;
  border:0;border-radius:var(--r-field);
  background:transparent;color:var(--ink-soft);cursor:pointer;
}
.panel__close svg{width:21px;height:21px}
@media (hover:hover){.panel__close:hover{background:var(--fill);color:var(--navy)}}

.panel__body{
  flex:1 1 auto;min-height:0;
  padding:var(--s5);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.panel__intro{font-size:var(--t-meta);color:var(--ink-soft);margin-bottom:var(--s4)}
.panel__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex:none;
  padding:var(--s4) var(--s5);
  padding-bottom:max(var(--s4),env(safe-area-inset-bottom));
  border-top:1px solid var(--rule-soft);
  background:var(--fill-soft);
  font-size:var(--t-small);color:var(--ink-soft);
}
.panel__foot strong{font-size:var(--t-lead);color:var(--navy)}

.prose h3{font-size:var(--t-small);margin:var(--s5) 0 var(--s2)}
.prose h3:first-child{margin-top:0}
.prose p{font-size:var(--t-small);color:var(--ink-soft)}

.keys{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:var(--s3) 0 0}
.keys dt{white-space:nowrap}
.keys dd{margin:0;font-size:var(--t-small);color:var(--ink-soft)}
kbd{
  display:inline-block;min-width:24px;padding:2px 6px;
  border:1px solid var(--rule);border-bottom-width:2px;border-radius:var(--r-photo);
  background:var(--fill-soft);
  font-family:inherit;font-size:var(--t-meta);font-weight:600;text-align:center;color:var(--ink);
}

/* Kapitelliste */
.chapters{display:grid;gap:var(--s2)}
.chapter{
  display:grid;grid-template-columns:30px 1fr auto;gap:var(--s3);
  align-items:center;text-align:left;
  padding:var(--s3) var(--s4);
  border:1px solid var(--rule);border-radius:var(--r-field);
  background:var(--sheet);color:var(--ink);
  font:inherit;cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
.chapter__mark{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--fill);color:var(--ink-soft);
  font-size:var(--t-meta);font-weight:600;font-variant-numeric:tabular-nums;
}
.chapter__mark svg{width:15px;height:15px}
.chapter__text{display:grid;gap:1px;min-width:0}
.chapter__text strong{font-size:var(--t-small);font-weight:600;line-height:1.3}
.chapter__text small{font-size:var(--t-meta);color:var(--ink-soft)}
.chapter__lock{color:var(--ink-faint)}
.chapter__lock svg{width:16px;height:16px}

.chapter--done{background:var(--verify-bg);border-color:var(--verify-rule)}
.chapter--done .chapter__mark{background:#d6ebe0;color:var(--verify)}
.chapter--now{background:var(--cobalt-soft);border-color:var(--cobalt)}
.chapter--now .chapter__mark{background:var(--navy);color:#fff}
.chapter--exam{margin-top:var(--s3)}
.chapter:disabled{opacity:.55;cursor:not-allowed}
@media (hover:hover){.chapter:not(:disabled):hover{border-color:var(--cobalt)}}

/* Merkblatt */
.notes__title{font-size:var(--t-small);margin:var(--s6) 0 var(--s2)}
.notes__title:first-child{margin-top:0}
.messages{list-style:none;counter-reset:m;display:grid;gap:var(--s2)}
.messages li{
  counter-increment:m;
  display:grid;grid-template-columns:26px 1fr;gap:var(--s3);
  align-items:start;
  font-size:var(--t-small);
}
.messages li::before{
  content:counter(m);
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:var(--r-photo);
  background:var(--fill);color:var(--ink-soft);
  font-size:var(--t-meta);font-weight:600;
}
.messages li[data-open="yes"]{color:var(--ink)}
.messages li[data-open="yes"]::before{background:var(--navy);color:#fff}
.messages li[data-open="no"]{color:var(--ink-faint)}

.legal{display:grid;gap:var(--s3);margin:0}
.legal div{padding-left:var(--s3);border-left:2px solid var(--rule)}
.legal dt{font-size:var(--t-small);font-weight:600;color:var(--navy)}
.legal dd{margin:2px 0 0;font-size:var(--t-meta);color:var(--ink-soft)}
.legal dt span{display:block;font-weight:400;color:var(--ink);font-size:var(--t-meta)}

/* Menü für schmale und berührungsgesteuerte Geräte */
.menu{display:grid;gap:var(--s1);align-content:start}
.menu hr{border:0;border-top:1px solid var(--rule-soft);margin:var(--s3) 0}
.menu__item{
  display:grid;grid-template-columns:38px 1fr;gap:var(--s3);
  align-items:center;text-align:left;
  min-height:56px;padding:var(--s2) var(--s3);
  border:1px solid transparent;border-radius:var(--r-field);
  background:transparent;color:var(--ink);
  font:inherit;font-weight:600;font-size:var(--t-small);cursor:pointer;
}
.menu__item svg{
  width:36px;height:36px;padding:8px;
  border-radius:var(--r-field);
  background:var(--fill);color:var(--navy);
}
.menu__item--quit{color:#7e3036}
.menu__item--quit svg{background:var(--alert-bg);color:#8d3138}
@media (hover:hover){.menu__item:hover{background:var(--fill-soft)}}

/* Dialoge */
.dlg{
  width:min(560px,calc(100vw - 2*var(--s4)));
  max-height:calc(100dvh - 2*var(--s4));
  padding:var(--s6);
  border:0;border-radius:var(--r-panel);
  background:var(--sheet);color:var(--ink);
  box-shadow:var(--lift-3);
  overflow:auto;
}
.dlg::backdrop{background:rgba(8,39,64,.46)}
.dlg h2{font-size:var(--t-title);margin-bottom:var(--s3)}
.dlg p{color:var(--ink-soft);font-size:var(--t-small)}
.dlg__actions{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s6)}
.dlg__actions .btn{min-width:132px}

.recap{
  display:grid;gap:2px;
  margin-top:var(--s5);padding:var(--s4) var(--s4) var(--s4) var(--s3);
  border-left:3px solid var(--navy);
  background:var(--fill-soft);
}
.recap span,.recap small{font-size:var(--t-meta);color:var(--ink-soft)}
.recap strong{font-size:var(--t-lead);font-weight:600}


/* == 10  Unterbrochen-Ansicht ============================================== */
.app.is-result .foot{display:none}
.app.is-paused .foot,
.app.is-paused .rail,
.app.is-paused .head__tools,
.app.is-paused .head__menu,
.app.is-paused .head__status{visibility:hidden}

.paused{
  display:grid;place-items:center;
  min-height:min(560px,calc(100dvh - var(--head-h) - var(--foot-h) - 4*var(--s6)));
  padding:var(--s6) 0;
}
.paused .card{max-width:600px;text-align:center}
.paused .seal{justify-content:center;text-align:left}
.paused .recap{text-align:left;margin-bottom:var(--s5)}


/* == 11  Größenanpassung ===================================================
   Eine Kette von breit nach schmal. Werte werden nur einmal gesetzt, damit
   sich keine Regeln mehr gegenseitig aufheben.
   ========================================================================= */

/* -- Zweispaltige Bühne --------------------------------------------------
   Kopf, Bild und Fußzeile stehen fest, nur der Textbogen scrollt. Damit kann
   ein wachsender Text das Bild nicht mehr aus dem Blickfeld schieben, und ein
   Fokuswechsel verschiebt die Bühne nicht.

   Die Weiche hing frueher am Eingabegeraet: (hover:none) and (pointer:coarse)
   galt auf jedem iPad, auch im Querformat mit 1366 px Breite. Dort wurde also
   das Hochformat-Layout gezeigt, obwohl reichlich Platz war. Jetzt entscheidet
   der verfuegbare Raum: genug Breite, genug Hoehe und Querformat.
   -------------------------------------------------------------------- */
@media (min-width:900px) and (min-height:600px) and (orientation:landscape){
  html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
  /* dvh statt vh: auf dem iPad waere die Fusszeile sonst hinter der
     Safari-Leiste verborgen. */
  /* Die Anwendung wird an den sichtbaren Bereich geheftet.

     Vorgeschichte: Erst fehlte auf dem iPad die Kopfzeile, dann die
     Fusszeile, dann wieder die Kopfzeile. Solange die Huelle nur "so hoch
     wie der Bildschirm" ist, genuegt eine einzige Verschiebung des
     Dokuments - durch einen Fokussprung, die Bildschirmtastatur, das
     Ein- und Ausfahren der Safari-Leiste - und oben oder unten faellt
     etwas heraus. Mit overflow:hidden kommt man dann nicht zurueck.

     position:fixed loest das grundsaetzlich: Ein festgehefteter Kasten
     nimmt an einer Verschiebung des Dokuments gar nicht erst teil. Die
     Kopfzeile kann damit nicht mehr aus dem Bild wandern, egal was der
     Browser mit dem Dokument anstellt. */
  .app{
    position:fixed;
    top:0;left:0;right:0;
    height:100dvh;
  }

  /* Eine Zeile, die den freien Raum fuellt. Bild, Schiene und Textbogen
     sitzen darin mittig, deshalb entsteht kein Totraum unter dem Text. */
  .stage{height:100%;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}

  /* Schiene, Bild und Text beginnen auf einer Linie: der Bildoberkante,
     dicht unter der Kopfleiste. Die Zeile selbst hat feste Hoehe, deshalb
     liegt diese Linie in jeder Szene an derselben Stelle - das Bild kann
     sich beim Blaettern nicht bewegen. Text und Schiene duerfen nach
     unten weiter laufen als das Bild.
     --stage-top steuert den Abstand zur Kopfleiste. */
  .stage{align-items:start;padding-top:var(--stage-top)}
  .rail,.media,.sheet{align-self:start}

  .sheet{
    display:flex;flex-direction:column;
    min-height:0;max-height:100%;
  }
  .sheet__scroll{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    padding-right:var(--s3);
    scrollbar-width:thin;
    scrollbar-color:var(--rule) transparent;
  }
  .sheet__scroll::-webkit-scrollbar{width:9px}
  .sheet__scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:9px;
    border:2px solid var(--paper);background-clip:padding-box}
  .sheet__scroll::-webkit-scrollbar-track{background:transparent}

  /* Karten (Kapitelabschluss, Abschlusstest) sitzen ebenfalls mittig. */
  .stage.is-single{max-width:860px;margin-inline:auto}
  .stage.is-plain{max-width:820px;margin-inline:auto}
}

/* Querformat auf iPad-Breiten: der Rechner hat 1440 px und mehr, ein iPad
   quer nur 1133 bis 1194 px. Bei fester Textspalte von 480 px bliebe dem
   Bild zu wenig. Die Spalte wird deshalb schmaler, das Bild groesser. */
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  :root{--text-w:25rem;--media-gap:28px;--t-display:1.875rem}
  :root{--gutter:22px}
  /* In einer 400-px-Spalte braucht eine Frage in 2 rem vier Zeilen. */
  .scene__title--ask{font-size:1.5rem;max-width:none}
  .scene__title{max-width:none}
}

/* Flache Bildschirme: weniger Höhe für Kopf, Bild und Typografie */
@media (min-width:900px) and (min-height:600px) and (orientation:landscape)
       and (max-height:900px){
  :root{--media-h:500px;--head-h:72px;--foot-h:68px;--t-display:2.25rem}
  :root{--stage-top:var(--s5)}
  .stage{padding-bottom:var(--s4)}
  .card{padding:var(--s6)}
}
@media (min-width:900px) and (min-height:600px) and (orientation:landscape)
       and (max-height:800px){
  :root{--media-h:430px;--head-h:68px;--foot-h:64px;--t-display:2rem;--t-lead:1.1875rem}
  :root{--stage-top:var(--s4)}
  .stage{padding-bottom:var(--s3)}
}
@media (min-width:900px) and (min-height:600px) and (orientation:landscape)
       and (max-height:700px){
  :root{--media-h:360px}
}

/* -- Gestapelte Bühne ----------------------------------------------------
   Das genaue Gegenstueck zur Bedingung oben: zu schmal, zu flach oder
   Hochformat. Bild oben, Text darunter, feste App-Flaeche.
   -------------------------------------------------------------------- */
@media (max-width:899px),(max-height:599px),(orientation:portrait){
  :root{
    --stage-pad-x:var(--s5);
    /* Inhaltsbreite. Ohne Deckel liefe der Text auf einem iPad im Hochformat
       ueber 790 px, also rund 90 Zeichen je Zeile - etwa das Doppelte einer
       angenehmen Lesebreite. Bild und Text teilen sich denselben Deckel und
       stehen dadurch buendig uebereinander. */
    --stage-max:42rem;
    /* Die Hoehe wird aus der verfuegbaren Breite berechnet, nicht umgekehrt.
       So bekommt die Rasterzeile ein festes Mass und das Bild kann den Text
       nicht ueberlagern. Das Verhaeltnis bleibt 16:9. */
    --media-h:min(calc(var(--stage-max) * 9 / 16),
                  calc((100vw - 2 * var(--stage-pad-x)) * 9 / 16),
                  46dvh, 460px);
    /* 62ch waren fuer das Telefon gedacht, wo ohnehin die Breite begrenzt.
       Auf einem iPad im Hochformat wurde daraus die tatsaechliche Zeile mit
       rund 76 Zeichen. 50ch liegen bei etwa 60 Zeichen. */
    /* --rail-w bleibt bei der Punktbreite. Frueher stand hier 100 %, weil
       die Schiene im Hochformat waagerecht ueber die volle Breite laeuft.
       Seit --grid-indent und damit der Abstand im Markenblock daraus
       abgeleitet werden, machte der Prozentwert den Titel in der Kopfzeile
       unsichtbar. Die volle Breite wird jetzt dort gesetzt, wo sie
       hingehoert: an der Schiene selbst. */
    --read:50ch;
  }

  html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
  /* Die Anwendung wird an den sichtbaren Bereich geheftet.

     Vorgeschichte: Erst fehlte auf dem iPad die Kopfzeile, dann die
     Fusszeile, dann wieder die Kopfzeile. Solange die Huelle nur "so hoch
     wie der Bildschirm" ist, genuegt eine einzige Verschiebung des
     Dokuments - durch einen Fokussprung, die Bildschirmtastatur, das
     Ein- und Ausfahren der Safari-Leiste - und oben oder unten faellt
     etwas heraus. Mit overflow:hidden kommt man dann nicht zurueck.

     position:fixed loest das grundsaetzlich: Ein festgehefteter Kasten
     nimmt an einer Verschiebung des Dokuments gar nicht erst teil. Die
     Kopfzeile kann damit nicht mehr aus dem Bild wandern, egal was der
     Browser mit dem Dokument anstellt. */
  .app{
    position:fixed;
    top:0;left:0;right:0;
    height:100dvh;
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  /* Sicherheitszone oben (Notch, Statusleiste) */
  .head{padding-top:max(var(--s3),env(safe-area-inset-top))}

  .rail{margin-right:0}
  .media{
    aspect-ratio:auto;
    height:var(--media-h);
    width:min(100%, calc(var(--media-h) * 16 / 9));
    max-width:none;
    margin:0 auto;
  }
  .stage.is-single .sheet{margin-left:0}
  .stage{
    grid-template-columns:minmax(0,1fr);
    max-width:calc(var(--stage-max) + 2 * var(--stage-pad-x));
    gap:var(--s4);
    padding:var(--s4) var(--stage-pad-x) var(--s5);
    overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
    align-content:start;
  }
  .stage.is-single{grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto}

  /* Die Schiene legt sich waagerecht über das Bild, aber gebündelt in der
     Mitte statt über die volle Breite gespreizt. */
  .rail{
    grid-auto-flow:column;grid-auto-columns:minmax(34px,54px);
    gap:0;justify-content:center;padding:0;
    position:relative;
  }
  .rail::before{
    left:24px;right:24px;top:calc(50% - 1px);bottom:auto;
    width:auto;height:2px;
  }
  .rail__step{width:100%;height:30px}

  /* Auf schmalen Flaechen begrenzt die verfuegbare Hoehe die Bildbreite.
     Der Rahmen behaelt sein Verhaeltnis, die Aufnahme wird nicht
     beschnitten und nicht gestaucht. Ob gefuellt oder eingepasst wird,
     entscheidet dieselbe Regel wie am Rechner. */
  .transcript{position:fixed;inset:auto var(--s4) calc(var(--foot-h) + var(--s4)) var(--s4);
              max-height:min(64dvh,560px);z-index:45}

  .scene__title{max-width:none}
  :root{--gutter:22px}
  .foot__place{display:none}
  .foot{grid-template-columns:1fr 1fr}
  #btnNext{min-width:0}

  .panel{width:min(452px,94vw)}
}

/* Tablet-Format: etwas kompaktere Typografie, damit mehr Inhalt passt */
@media (min-width:681px) and (max-width:899px),
       (min-width:681px) and (max-height:599px),
       (min-width:681px) and (orientation:portrait){
  :root{--t-display:2rem;--t-title:1.5rem;--t-lead:1.1875rem}
  .scene__title--ask{font-size:1.75rem}
  .card{padding:var(--s6)}
}

/* Tablet-Hochformat: Marke, Werkzeugleiste und Kapitelstand passen nicht in
   eine Zeile - der Titel wurde sonst abgeschnitten. Der Stand rueckt deshalb
   in eine zweite Zeile, die Werkzeugleiste bleibt oben rechts. */
@media (min-width:700px) and (max-width:899px){
  .head{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s2)}
  .head__status{
    grid-column:1/-1;grid-row:2;
    justify-items:start;text-align:left;
    display:flex;align-items:baseline;gap:var(--s3);
    padding:0;border:0;
  }
}

/* Ab hier ist zu wenig Platz fuer die Werkzeugleiste im Kopf. Sie weicht
   dem Menue-Knopf, und der Kopf wird zweizeilig. Oberhalb dieser Grenze -
   also auf jedem iPad - bleibt die Leiste sichtbar und der Knopf entfaellt. */
@media (max-width:699px){
  :root{--gutter:16px}
  .head{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3)}
  .head__tools{display:none}
  .head__menu{display:inline-flex;justify-self:end}
  .head__status{
    grid-column:1/-1;grid-row:2;
    justify-items:start;text-align:left;
    display:flex;align-items:baseline;gap:var(--s3);
    padding:0;border:0;
  }
}

/* Telefon */
@media (max-width:680px){
  :root{
    --stage-pad-x:var(--s4);
    --media-h:min(calc((100vw - 2 * var(--stage-pad-x)) * 9 / 16), 42dvh, 320px);
    --t-display:1.75rem; --t-title:1.375rem; --t-lead:1.0625rem;
    --t-body:1rem; --t-small:.9375rem;
    --read:none; --foot-h:68px;
  }
  .scene__title--ask{font-size:1.5rem;max-width:none}
  .scene__title{max-width:none}

  :root{--gutter:12px}
  /* Auf dem Telefon steht der Inhalt untereinander, es gibt also keine
     zweite Rasterlinie, an der sich der Markenblock ausrichten muesste.
     Der Abstand wird deshalb hier direkt gesetzt statt abgeleitet. */
  :root{--brand-mark:36px;--brand-gap:var(--s3)}
  .brand__text strong{font-size:.9375rem}
  .brand__text span{display:none}
  .head__menu{padding:0 var(--s3)}
  .head__menu span{display:none}

  .stage{padding:var(--s3) var(--edge) var(--s4);gap:var(--s3)}
  .rail__step{height:26px}
  .rail__dot{width:22px;height:22px}
  .rail__num{font-size:11px}

  .card{padding:var(--s5) var(--s4)}
  .keynote{margin-top:var(--s5);padding:var(--s4) var(--s4) var(--s4) var(--s3)}
  .keynote strong{font-size:1.1875rem}
  .actions .btn{width:100%}

  .result{gap:var(--s4)}
  .result__dial,.result__dial svg{width:104px;height:104px}
  .result__pct b{font-size:1.5rem}

  .facts{grid-template-columns:1fr 1fr}
  .review__row{grid-template-columns:22px 1fr}
  .review__jump{grid-column:1/-1;justify-self:start;margin-top:var(--s2)}

  .transcript{inset:auto var(--s3) calc(var(--foot-h) + var(--s3)) var(--s3);max-height:66dvh}
  .foot{gap:var(--s2)}

  .dlg{padding:var(--s5) var(--s4)}
  .dlg__actions{flex-direction:column-reverse}
  .dlg__actions .btn{width:100%}
  .panel__body{padding:var(--s4)}
}

@media (max-width:380px){
  .brand__mark{display:none}
  .rail{gap:2px}
  .btn{padding:0 var(--s3)}
  #btnBack span,#btnNextLabel{font-size:.875rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* Höherer Kontrast, wenn das Betriebssystem ihn anfordert */
@media (prefers-contrast:more){
  :root{--ink-soft:#2c4459;--ink-faint:#46617a;--rule:#9fb4c8}
}


/* -- Berührungsbedienung -------------------------------------------------
   Apple nennt 44 x 44 px als kleinstes Tippziel. Die Szenenpunkte sind
   bewusst 26 px klein, damit die Schiene schmal bleibt. Die Trefferflaeche
   wird deshalb ueber ein unsichtbares Feld vergroessert, ohne dass sich am
   Aussehen oder am Platzbedarf etwas aendert.
   -------------------------------------------------------------------- */
@media (pointer:coarse){
  .rail__step{min-height:44px}
  .rail__step::after{
    content:"";
    position:absolute;left:50%;top:50%;
    width:44px;height:44px;
    transform:translate(-50%,-50%);
  }
  /* Mehr Luft zwischen den Punkten, damit sich die Trefferflaechen
     nicht ueberlappen. */
  .rail{gap:var(--s3)}

  .panel__close,.transcript__close{width:44px;height:44px}
  .grid-nav__btn{min-width:44px;min-height:44px}

  /* Kein Warten auf einen moeglichen Doppeltipp, kein graues Aufblitzen. */
  button,label,a,summary,[role="button"]{touch-action:manipulation}
  *{-webkit-tap-highlight-color:transparent}

  /* Safari zoomt Eingabefelder unter 16 px beim Antippen heran. */
  input,select,textarea{font-size:max(16px,1rem)}
}

/* -- Flache Buehne -------------------------------------------------------
   Auf Notebooks und iPads im Querformat bleiben nach Kopf- und Fusszeile
   oft nur rund 550 px Hoehe. Sobald nach dem Pruefen einer Antwort die
   Rueckmeldung dazukommt, reicht das nicht mehr - und der Nutzer muss
   scrollen, obwohl daneben ein halber Bildschirm leer ist.

   Hier wird deshalb der senkrechte Rhythmus gestrafft: engere Abstaende,
   flachere Antwortzeilen, kompaktere Kopf- und Fusszeile. Das Antwortfeld
   selbst bleibt unveraendert bei 22 x 22 px mit 4 px Radius, und Radio wie
   Checkbox sehen weiter gleich aus.
   -------------------------------------------------------------------- */
@media (orientation:landscape) and (min-width:900px) and (max-height:860px){
  :root{
    --head-h:66px;
    --foot-h:60px;
    --stage-top:14px;
  }
  .head{padding-top:var(--s2);padding-bottom:var(--s2)}
  .foot{padding-top:var(--s2);padding-bottom:max(var(--s2),env(safe-area-inset-bottom))}
  .stage{padding-bottom:var(--s3)}

  .tab{margin-bottom:var(--s3)}
  .scene__kicker{margin-bottom:var(--s3)}
  .scene__title{margin-bottom:var(--s3)}
  .scene__lead{margin-bottom:var(--s3)}
  .scene__text{margin-bottom:var(--s3)}
  .answers{gap:6px;margin:var(--s3) 0}
  .answer{min-height:46px;padding:9px var(--s4)}
  .feedback{margin-top:var(--s3)}
  .attempts{margin-top:var(--s2)}
}

/* Sehr flache Buehne: Notebooks mit 768 px und das iPad mini im
   Querformat. Noch einmal enger, damit auch dort die Rueckmeldung
   ohne Scrollen sichtbar bleibt. */
@media (orientation:landscape) and (min-width:900px) and (max-height:800px){
  :root{--head-h:58px;--foot-h:54px;--stage-top:10px}
  .head{padding-top:6px;padding-bottom:6px}
  :root{--brand-mark:36px}
  .foot{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .stage{padding-bottom:var(--s2)}
  .tab,.scene__kicker,.scene__title,.scene__lead,.scene__text{margin-bottom:var(--s2)}
  .answers{gap:5px;margin:var(--s2) 0}
  .answer{min-height:42px;padding:7px var(--s4)}
  .feedback{margin-top:var(--s2);padding:var(--s3)}
  .attempts{margin-top:6px}
}

/* == 12  Druck =============================================================
   Druckbar ist das Merkblatt, wenn es geöffnet ist. Das Zertifikat wird
   nicht gedruckt, sondern als PDF erzeugt - siehe pdfwriter.js.
   ========================================================================= */

@media print{
  @page{size:A4;margin:22mm 20mm}

  html,body{height:auto;overflow:visible;background:#fff}
  .app{position:static;height:auto}
  .app,.scrim,.dlg,.skip-link,.live,.panel__close,.panel__foot{display:none!important}

  /* Merkblatt */
  .panel{
    display:none;position:static;width:auto;box-shadow:none;transform:none;visibility:visible;
  }
  .panel.is-on{display:block}
  .panel__head{border:0;padding:0 0 6mm}
  .panel__head h2{font-size:20pt}
  .panel__body{padding:0;overflow:visible}
  .messages li[data-open="no"]{color:#000}
  .messages li::before{background:#eee!important;color:#000!important}
}