/* =========================================================
   Future Foods – Schülerlabor
   Designsystem. Alle Farben aus dem Logo und dem Titelbild.
   Wer hier oben etwas ändert, ändert die ganze App.
   ========================================================= */

@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light only;

  /* Farben */
  --ink:        #13232E;
  --ink-soft:   #3A5566;
  --ink-mute:   #8FA3AE;
  --leaf:       #51843C;
  --leaf-deep:  #3C6A2B;
  --leaf-wash:  #EDF3E9;
  --lime:       #A9D93F;
  --mist:       #F4F6F3;
  --paper:      #FFFFFF;
  --line:       #E3E8E2;
  --warn:       #C8811E;
  --warn-wash:  #FDF5E8;
  --alert:      #B3402C;

  /* Typografie */
  --display: 'Outfit', system-ui, -apple-system, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Raster */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-card: 16px;
  --r-btn: 12px;

  --shadow-1: 0 1px 2px rgba(19,35,46,.06);
  --shadow-2: 0 2px 4px rgba(19,35,46,.05), 0 12px 28px rgba(19,35,46,.09);

  --header-h: 60px;
  --footer-h: 84px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--text);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--mist);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

button, input { font-family: inherit; font-size: inherit; }

/* ---------------------------------------------------------
   App-Gerüst
   --------------------------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.kopf {
  flex: 0 0 auto;
  height: var(--header-h);
  padding: 0 var(--s5);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.kopf__logo { height: 34px; width: auto; flex: 0 0 auto; }

.kopf__kapitel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kopf__zaehler {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kopf__menue {
  margin-left: var(--s3);
  width: 44px; height: 44px;
  border: 0; background: transparent;
  border-radius: 10px;
  color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
}
.kopf__menue:active { background: var(--mist); }

.fortschritt {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 4px;
  background: var(--line);
}
.fortschritt__balken {
  height: 100%;
  background: var(--lime);
  width: 0%;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

.buehne {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s5);
}

.karte {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: var(--s6);
  animation: auf .28s cubic-bezier(.2,.7,.3,1);
}

@keyframes auf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .karte { animation: none; }
  .fortschritt__balken { transition: none; }
}

.karte__kopf { margin-bottom: var(--s5); }

.label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  margin-bottom: var(--s2);
}

h1.titel {
  font-size: 34px;
  line-height: 1.2;
  margin: 0;
}

.lead {
  font-size: 21px;
  color: var(--ink-soft);
  margin: var(--s4) 0 0;
}

/* Zweispaltiges Layout im Querformat */
.karte__koerper {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .karte__koerper.hat-medien { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------
   Anweisungen
   --------------------------------------------------------- */

.schritte { list-style: none; margin: 0; padding: 0; }

.schritt {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s3);
  padding-left: 0;
  border-radius: var(--r-btn);
  min-height: 56px;
  -webkit-user-select: none;
  user-select: none;
}
.schritt + .schritt { border-top: 1px solid var(--line); }
.schritt.hat-medium { cursor: pointer; padding-left: var(--s3); }
.schritt.hat-medium:active { background: var(--mist); }

/* Die Anweisung, deren Medium gerade auf der großen Fläche liegt */
.schritt.aktiv { background: var(--leaf-wash); }

.schritt__nr {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 0; padding: 0;
  border-radius: 999px;
  background: var(--leaf-wash);
  color: var(--leaf-deep);
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.schritt.aktiv .schritt__nr { background: #fff; }

.schritt__text { padding-top: 5px; flex: 1; }

.schritt__medium {
  flex: 0 0 auto;
  align-self: center;
  color: var(--ink-mute);
  font-size: 15px;
}
.schritt.aktiv .schritt__medium { color: var(--leaf); }

.schritt.erledigt .schritt__nr { background: var(--leaf); color: #fff; }
.schritt.erledigt .schritt__nr::after { content: '✓'; }
.schritt.erledigt .schritt__nr span { display: none; }
.schritt.erledigt .schritt__text { color: var(--ink-mute); }

/* Hinweise */
.hinweis {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s4);
  border-left: 4px solid var(--warn);
  background: var(--warn-wash);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  font-size: 19px;
}
.hinweis__wort { font-family: var(--display); font-weight: 600; color: var(--warn); }

.hinweis--tipp { border-left-color: var(--leaf); background: var(--leaf-wash); }
.hinweis--tipp .hinweis__wort { color: var(--leaf-deep); }

.hinweis--info { border-left-color: var(--ink-soft); background: var(--mist); }
.hinweis--info .hinweis__wort { color: var(--ink-soft); }

/* ---------------------------------------------------------
   Medien
   --------------------------------------------------------- */

.medien { display: grid; gap: var(--s3); align-content: start; }

/* Es ist immer genau ein Medium sichtbar; die übrigen sind hidden und
   ihre Videos pausiert. Umgeschaltet wird über den Vorschaustreifen
   oder durch Antippen der zugehörigen Anweisung. */
.medienflaeche { display: grid; }
.medium[hidden] { display: none; }

.streifen {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}
.streifen__bild {
  position: relative;
  width: 84px; height: 66px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s;
}
.streifen__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.streifen__bild.aktiv { border-color: var(--leaf); }
.streifen__bild.aktiv::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px var(--leaf);
  border-radius: 8px;
}
.streifen__play {
  position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: rgba(19,35,46,.82);
  color: #fff;
  font-size: 9px;
  display: grid; place-items: center;
}

/* Der Rahmen legt sich um das Medium herum, statt es in eine feste Fläche zu
   stellen: "width: fit-content" schrumpft ihn auf die tatsächliche Bildbreite.
   So bleibt bei hochkant aufgenommenen Bildern kein heller Streifen daneben,
   und die runden Ecken sitzen wirklich am Bild. */
.medium {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  line-height: 0;
}
/* Breite richtet sich nach der Höhe – so entstehen keine schwarzen Balken
   neben den hochkant aufgenommenen Laborvideos. */
.medium img, .medium video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(46dvh, 440px);
  border-radius: calc(var(--r-card) - 1px);
}
/* Mit Vorschaustreifen darunter etwas flacher, damit der Streifen
   im Querformat noch über der Bildschirmkante liegt. */
.medien:has(.streifen) .medium img,
.medien:has(.streifen) .medium video { max-height: min(38dvh, 360px); }

.medium__marke {
  position: absolute;
  top: var(--s3); left: var(--s3);
  background: rgba(19,35,46,.82);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Titel-, Abschnitts- und Fragebildschirm
   --------------------------------------------------------- */

.held {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
  background: var(--ink);
  /* Seitenverhältnis der Titelbilder (16:9), damit nichts weggeschnitten
     wird – das Future-Foods-Logo sitzt in der oberen rechten Ecke. */
  aspect-ratio: 16 / 9;
  max-height: min(66dvh, 620px);
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-2);
}
/* Nur das Hintergrundbild, nicht jedes Bild im Titelbereich – sonst erwischt
   die Regel auch das Lehrstuhl-Logo und bläst es auf Vollbild auf. */
.held > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.held--titel > img { object-position: center top; }
/* Hochkant ist der Kasten für den Text zu flach – Titel und Code-Feld wurden
   oben abgeschnitten. Dort wächst er mit dem Inhalt. */
@media (max-aspect-ratio: 1 / 1) {
  .held { aspect-ratio: auto; max-height: none; min-height: 58dvh; }
}
/* Kräftiger als früher: Seit das Titelbild nicht mehr beschnitten wird,
   liegt der Text über hellen Bildpartien und braucht mehr Abdeckung. */
/* Zwei Verläufe: einer von links, wo der Text steht, einer von unten.
   Oben rechts bleibt das Bild frei – dort sitzt das Future-Foods-Logo. */
.held__folie {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(19,35,46,.74) 0%,
      rgba(19,35,46,.40) 40%,
      rgba(19,35,46,0) 66%),
    linear-gradient(180deg,
      rgba(19,35,46,0) 4%,
      rgba(19,35,46,.32) 38%,
      rgba(19,35,46,.80) 74%,
      rgba(19,35,46,.92) 100%);
}
.held__text { position: relative; padding: var(--s6); color: #fff; }
.held__text .label { color: var(--lime); }
.held__text h1 { font-size: clamp(30px, 4.6vw, 52px); margin: 0; line-height: 1.12; color: #fff; }
.held__text .lead { color: rgba(255,255,255,.88); max-width: 40ch; }

.frage {
  max-width: 900px;
  margin: 0 auto;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card);
  padding: var(--s7) var(--s6);
  text-align: center;
  box-shadow: var(--shadow-2);
}
.frage h1 { font-size: clamp(28px, 4vw, 44px); margin: 0; line-height: 1.18; }
.frage .lead { color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------
   Checkpoint
   --------------------------------------------------------- */

.checkpoint {
  max-width: 820px;
  margin: 0 auto;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card);
  padding: var(--s7) var(--s6);
  text-align: center;
  box-shadow: var(--shadow-2);
}
.checkpoint__icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--s4);
  border-radius: 999px;
  background: rgba(169,217,63,.16);
  border: 2px solid var(--lime);
  display: grid; place-items: center;
  font-size: 34px;
}
.checkpoint h1 { font-size: 32px; margin: 0 0 var(--s3); }
.checkpoint .lead { color: rgba(255,255,255,.86); max-width: 38ch; margin-inline: auto; }
.checkpoint .knopf { margin-top: var(--s6); }
.checkpoint.bestaetigt .checkpoint__icon { background: var(--leaf); border-color: var(--leaf); }

/* ---------------------------------------------------------
   Tabellen
   --------------------------------------------------------- */

.tabelle-huelle { overflow-x: auto; margin-top: var(--s5); }

table.daten {
  width: 100%;
  border-collapse: collapse;
  font-size: 19px;
}
table.daten th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
table.daten td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.daten tr:last-child td { border-bottom: 0; }

.eppi {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
}
td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.einheit { color: var(--ink-mute); font-size: 16px; }

tr.abgehakt { background: var(--leaf-wash); }
tr.abgehakt .eppi { background: var(--leaf); }

.haken {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--paper);
  display: grid; place-items: center;
  font-size: 22px; color: transparent;
  cursor: pointer;
}
tr.abgehakt .haken { border-color: var(--leaf); background: var(--leaf); color: #fff; }

/* ---------------------------------------------------------
   Eingaben
   --------------------------------------------------------- */

.feld { position: relative; display: block; }
.feld input {
  width: 100%;
  min-height: 56px;
  padding: var(--s3) 68px var(--s3) var(--s4);
  border: 2px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-appearance: none;
}
.feld input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px rgba(81,132,60,.14); }
.feld input::placeholder { color: var(--ink-mute); font-weight: 400; }
.feld__einheit {
  position: absolute; right: var(--s4); top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  font-size: 17px;
  pointer-events: none;
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.kennzahl {
  background: var(--mist);
  border-radius: var(--r-btn);
  padding: var(--s4);
}
.kennzahl__wert {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kennzahl__name {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.kennzahl--gut .kennzahl__wert { color: var(--leaf-deep); }
.kennzahl--warn .kennzahl__wert { color: var(--warn); }

.rueckmeldung {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-btn);
  font-size: 19px;
  display: none;
}
.rueckmeldung.an { display: block; }
.rueckmeldung--gut  { background: var(--leaf-wash); color: var(--leaf-deep); }
.rueckmeldung--nah  { background: var(--warn-wash); color: var(--warn); }
.rueckmeldung--weit { background: #FBEDEA; color: var(--alert); }

/* Diagramm */
.diagramm {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s4);
  margin-top: var(--s5);
}
.diagramm svg { display: block; width: 100%; height: auto; }
.diagramm .achse { stroke: var(--line); stroke-width: 1.5; }
.diagramm .tick { fill: var(--ink-mute); font-size: 13px; font-family: var(--display); }
.diagramm .achsentitel { fill: var(--ink-soft); font-size: 14px; font-family: var(--display); font-weight: 600; }
.diagramm .hilfslinie { stroke: var(--ink-mute); stroke-width: 1.5; stroke-dasharray: 4 4; }
.diagramm .gerade { stroke: var(--leaf); stroke-width: 2.5; }
.diagramm .gerade--muster { stroke: var(--ink-mute); stroke-width: 2; stroke-dasharray: 6 6; }
.diagramm .punkt { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.diagramm .punkt--probe { fill: var(--ink); stroke: var(--lime); stroke-width: 3; }
.diagramm .formel { fill: var(--ink-soft); font-size: 14px; font-family: var(--display); }

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

.fuss {
  flex: 0 0 auto;
  height: var(--footer-h);
  padding: var(--s3) var(--s5);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  height: calc(var(--footer-h) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.knopf {
  min-height: 56px;
  padding: 0 var(--s6);
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  cursor: pointer;
  transition: transform .1s, background .15s;
}
.knopf:active { transform: scale(.98); }

.knopf--zweit {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  padding-inline: var(--s5);
}
.knopf--zweit:active { background: var(--mist); }

.sichern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.sichern__hinweis {
  margin: var(--s3) 0 0;
  font-size: 16px;
  color: var(--ink-soft);
}

/* Gruppenvergleich auf dem Ergebnisbildschirm */
.vergleich {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.vergleich__zeile {
  display: flex;
  gap: var(--s3);
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: var(--s2);
}
.vergleich__zeile .feld { flex: 1 1 160px; }
.vergleich__zeile .knopf--senden { flex: 1 1 auto; }

/* Beide Eingaben stehen untereinander und über die volle Spaltenbreite –
   nebeneinander wurden sie auf dem iPad so schmal, dass der Platzhalter
   abgeschnitten war. */
.vergleich__feld { margin-top: var(--s3); }
.vergleich__feld .feld { width: 100%; margin-top: 4px; }
.vergleich__name {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Gestufte Hilfen (Rechenschritt) */
.hilfen { margin-top: var(--s5); }
.hilfen__knopf { width: 100%; }
.hilfe {
  border-left: 3px solid var(--leaf);
  background: var(--leaf-wash);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
}
.hilfe__nr {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--leaf-deep);
  margin-bottom: 2px;
}
.hilfe p { margin: 0; }

/* Workshop-Code auf dem Titelbildschirm */
.codefeld { margin-top: var(--s5); max-width: 320px; }
.codefeld .feld { margin-top: var(--s2); }
.codefeld__hinweis {
  margin: var(--s2) 0 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.codefeld--hell .label { color: var(--lime); }
.codefeld--hell .codefeld__hinweis { color: rgba(255,255,255,.78); }
.knopf--senden { background: var(--ink); color: #fff; }
.knopf--senden:active { background: #0d1a22; }

.knopf--weiter { background: var(--leaf); color: #fff; margin-left: auto; min-width: 180px; }
.knopf--weiter:active { background: var(--leaf-deep); }
.knopf--zurueck { background: var(--mist); color: var(--ink-soft); padding-inline: var(--s5); }
.knopf--hell { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.knopf--gross { min-height: 64px; font-size: 21px; padding-inline: var(--s7); }
.knopf[disabled] { opacity: .4; pointer-events: none; }

.punkte { display: flex; gap: 6px; align-items: center; }
.punkte i {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line);
  display: block;
}
.punkte i.jetzt { background: var(--leaf); width: 26px; }
.punkte i.fertig { background: var(--lime); }

/* ---------------------------------------------------------
   Kapitelübersicht
   --------------------------------------------------------- */

.blende {
  position: fixed; inset: 0;
  background: rgba(19,35,46,.45);
  backdrop-filter: blur(3px);
  display: none;
  z-index: 40;
}
.blende.an { display: block; }

.menue {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: var(--paper);
  z-index: 41;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.menue.an { transform: none; }
.menue__kopf {
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.menue__liste { flex: 1; overflow-y: auto; padding: var(--s3); }
.menue__eintrag {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%;
  padding: var(--s4);
  border: 0; background: transparent;
  border-radius: var(--r-btn);
  text-align: left;
  font-size: 19px;
  color: var(--ink);
  cursor: pointer;
  min-height: 60px;
}
.menue__eintrag:active { background: var(--mist); }
.menue__eintrag.jetzt { background: var(--leaf-wash); color: var(--leaf-deep); font-weight: 600; }
.menue__nr {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink-soft);
  font-family: var(--display); font-weight: 600; font-size: 16px;
  display: grid; place-items: center;
}
.menue__eintrag.fertig .menue__nr { background: var(--leaf); color: #fff; }
/* Herkunftsangabe: Lehrstuhl-Logo und Einrichtung */
.herkunft {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}
/* Das Logo ist dunkelblau auf transparent und wäre auf dem Titelbild kaum zu
   sehen. Die weiße Platte darunter erhält die FAU-Farben, statt das Logo
   umzufärben. */
.herkunft__logo {
  height: 48px; width: auto;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 6px 9px;
  box-shadow: 0 1px 4px rgba(19,35,46,.14);
}
/* Im Kapitelmenü steht es ohnehin auf Hell – dort genügt ein feiner Rand. */
.menue__fuss .herkunft__logo {
  box-shadow: none;
  border: 1px solid var(--line);
}
.herkunft__text { font-size: 15px; line-height: 1.35; color: var(--ink-soft); }
.herkunft__text b { display: block; font-weight: 600; color: var(--ink); }

.held .herkunft__text { color: rgba(255,255,255,.82); }
.held .herkunft__text b { color: #fff; }

.menue__fuss { padding: var(--s5); border-top: 1px solid var(--line); }
.menue__fuss .herkunft { margin-top: 0; margin-bottom: var(--s4); }
.stand {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 var(--s3);
  font-variant-numeric: tabular-nums;
}
.knopf--text {
  background: transparent; color: var(--alert);
  padding: 0; min-height: 44px; font-size: 17px;
}

/* Ergebnisbildschirm */
.ergebnis__zahl {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 12vw, 104px);
  line-height: 1;
  color: var(--leaf-deep);
  /* Proportionale Ziffern: tabular-nums gibt jeder Ziffer die Breite einer
     Null – bei 100 px wirkt „12,1" dadurch auseinandergezogen. Gleiche
     Ziffernbreiten braucht man in Spalten, nicht bei einer einzelnen Zahl. */
  font-variant-numeric: proportional-nums;
}
.ergebnis__einheit { font-size: 24px; color: var(--ink-soft); font-weight: 500; }

/* Weg von der Anleitung in die gemeinsame Auswertung, nach dem Absenden. */
.auswertungslink {
  display: inline-block; margin-top: 4px;
  color: var(--leaf-deep); font-weight: 600; text-decoration: none;
}
.auswertungslink:hover { text-decoration: underline; }

/* Der selbst gerechnete Wert, direkt unter der gemessenen Zahl. */
.ergebnis__eigen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 17px;
}
.ergebnis__eigen-name { color: var(--ink-mute); }
.ergebnis__eigen-wert { font-weight: 600; }
.ergebnis__eigen-wert--leer { font-weight: 400; color: var(--ink-mute); }
.ergebnis__abgleich {
  font-size: 15px; padding: 2px 10px; border-radius: 999px;
}
.ergebnis__abgleich--gut  { background: var(--leaf-wash); color: var(--leaf-deep); }
.ergebnis__abgleich--nah  { background: var(--warn-wash); color: var(--warn); }
.ergebnis__abgleich--weit { background: #FBEDEA; color: var(--alert); }

.zusammenfassung { margin-top: var(--s6); }
.zusammenfassung dl {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s3) var(--s4);
  margin: 0;
  font-size: 19px;
}
.zusammenfassung dt { color: var(--ink-soft); }
.zusammenfassung dd { margin: 0; font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 500; }

@media print {
  .kopf, .fuss, .menue, .blende { display: none !important; }
  .buehne { overflow: visible; }
  .karte { box-shadow: none; }
}