/* UpgradeWerkstatt, Oberflaeche.

   Farben aus dem Werkzeug-Look (DATENANWENDUNG-BAUKASTEN.md):
   Sonnenblume #FFC500 als Akzent, Mandarine #FF7A00 fuer die zweite Ebene
   und das Ueberfahren, Anthrazit #232B2F, Hellgrau #F1F2F3 als Text,
   Grau #6B7376, Rot #E02020 NUR fuer Fehler.

   Dark-first bleibt (plan.md Abschnitt 9). Es ist die Palette des
   Werkzeug-Looks, nur auf dunklem Grund statt auf weissem.

   Zwei Regeln aus dem Baukasten tragen hier besonders:
   - Radius 0 im *-Block, damit es auch fuer Knoepfe und Felder gilt.
   - Waagerechte Linie oben, 4px, auf jeder Flaeche. Das ist die
     Handschrift. Hier steigt ihre Farbe mit der Stufe: Grau fuer das, was
     schon da ist, Sonnenblume fuer die Stufen, Mandarine fuer ganz oben.

   Grau #6B7376 ist im Baukasten fuer Beschriftungen auf WEISS gedacht. Auf
   dunklem Grund traegt es als Text nicht, zu wenig Kontrast. Deshalb steht
   es hier fuer Linien, ruhende Punkte und die unterste Stufe, waehrend der
   Zweitzeilen-Text ein abgedunkeltes Hellgrau ist. */

@font-face {
  font-family: 'Bebas Neue';
  src: url('schriften/bebas-neue.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('schriften/dm-sans-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('schriften/dm-sans-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('schriften/dm-sans-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --sonne: #FFC500;
  --mandarine: #FF7A00;
  --anthrazit: #232B2F;
  --grund: #171D21;          /* Anthrazit, eine Stufe tiefer */
  --tiefer: #10161A;
  --hell: #F1F2F3;
  --grau: #6B7376;
  --leise: rgba(241, 242, 243, .60);
  --fluester: rgba(241, 242, 243, .38);
  --linie: rgba(241, 242, 243, .09);
  --linie-stark: rgba(241, 242, 243, .16);
  --fehler: #E02020;
  --display: 'Bebas Neue', Impact, sans-serif;
  --text: 'DM Sans', -apple-system, Segoe UI, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --einzug: 26px;
}

* { box-sizing: border-box; border-radius: 0; margin: 0; padding: 0; }

/* Der hidden-Schalter muss IMMER gewinnen. Ohne diese Zeile schlaegt jede
   eigene display-Regel das eingebaute Verhalten des Browsers, und ein
   Element mit hidden bleibt sichtbar. Genau das ist am 26.08.2026 auf der
   Live-Seite passiert: Das Zugangswort-Feld stand in der Tuer, obwohl gar
   keins hinterlegt war, weil label { display: block } staerker war als
   [hidden] { display: none }. Wer diese Regel entfernt, holt den Fehler
   zurueck. */
[hidden] { display: none !important; }

body {
  background: var(--grund);
  color: var(--hell);
  font-family: var(--text);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.sonnenlinie { height: 4px; background: var(--sonne); position: sticky; top: 0; z-index: 30; }

h1, h2, h3, .ziffer {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: .98;
}
h1 { font-size: 62px; }
h2 { font-size: 44px; }
h3 { font-size: 26px; }

/* Eine Zeile als Umriss statt als Flaeche. Gibt der Typografie Tiefe,
   ohne dass eine weitere Farbe dazukommt. */
.umriss { color: transparent; -webkit-text-stroke: 1px rgba(241, 242, 243, .55); }

.overline {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: var(--fluester);
  font-weight: 500;
}
.overline b { color: var(--mandarine); font-weight: 500; }

a { color: var(--mandarine); }
a:hover { color: var(--sonne); }

/* ---------- Kopf ---------- */

header {
  border-bottom: 1px solid var(--linie);
  background: var(--tiefer);
  padding: 36px 36px 28px;
  display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap;
}
/* Der Schriftzug ist eine Zeichnung, kein Text: das Wort steht als Umriss
   in der SVG-Datei. Erzeugt von motor/marke_bauen.py, nicht von Hand
   aendern. Die h1 traegt ihn, damit Vorlesegeraete den Namen finden.

   Seit 26.08.2026 stehen Wort und Schriftzug NEBENEINANDER, das Zeichen
   ist damit rund 6,6 zu 1 statt vorher 3 zu 1. Die Breite hier muss also
   viel groesser sein als frueher, sonst wird die Schrift winzig. Wer die
   Marke neu baut und das Verhaeltnis aendert, muss diese Werte mitziehen. */
.marke { flex: 1 1 auto; min-width: 300px; }
.marke h1 { margin: 0; line-height: 0; }
.marke h1 img { width: 520px; max-width: 100%; height: auto; display: block; }
.marke .claim { color: var(--leise); font-size: 15px; margin-top: 18px; max-width: 62ch; }
.marke .claim b { color: var(--hell); font-weight: 500; }

/* Reiter statt Schalter. Ruhiger und moderner. */
.modus { display: flex; gap: 26px; }
.modus button, .kopf-knopf {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  font-family: var(--text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 6px 0 9px; cursor: pointer; color: var(--fluester);
}
.modus button:hover { color: var(--hell); }
.modus button[aria-pressed="true"] { color: var(--hell); border-bottom-color: var(--sonne); }
.kopf-knopf:hover { color: var(--mandarine); border-bottom-color: var(--mandarine); }

/* ---------- Aufteilung ---------- */

.spalten { display: grid; grid-template-columns: minmax(370px, 460px) 1fr; align-items: start; }
.links {
  border-right: 1px solid var(--linie);
  background: var(--tiefer);
  padding: 34px 30px 46px;
  position: sticky; top: 4px;
  max-height: calc(100vh - 4px); overflow-y: auto;
}
.rechts { padding: 38px 42px 96px; min-width: 0; }

@media (max-width: 1000px) {
  :root { --einzug: 0px; }
  .spalten { grid-template-columns: 1fr; }
  .links { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--linie); }
  h1 { font-size: 46px; }
  .marke h1 img { width: 100%; max-width: 420px; }
  h2 { font-size: 32px; }
  .rechts { padding: 28px 22px 70px; }
}

/* ---------- Die Schritt-Ziffern als Umriss ---------- */

fieldset { border: 0; margin-bottom: 42px; }

.schritt-kopf {
  display: flex; align-items: center; gap: 22px;
  padding-bottom: 18px; margin-bottom: 28px;
  border-bottom: 1px solid var(--linie);
}
/* Haarlinie statt dicker Kontur: eine dicke Outline wirkt billig, eine
   duenne wirkt gezeichnet. Dafuer darf die Ziffer groesser werden. */
.ziffer {
  font-size: 94px; line-height: .68; flex: none;
  color: transparent;
  -webkit-text-stroke: 1px var(--sonne);
  letter-spacing: .02em;
}
/* Die Schraegstriche sitzen hochgestellt und ebenfalls als Haarlinie.
   Vorher waren sie massiv und haben die Ziffer erschlagen. */
.ziffer i {
  font-style: normal; color: transparent;
  -webkit-text-stroke: 1px var(--mandarine);
  font-size: .46em; vertical-align: .78em; margin-right: 5px;
}
.schritt-kopf h3 { margin-top: 4px; }

label { display: block; margin-bottom: 20px; }
label .name {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--hell); margin-bottom: 6px;
}
label .hilfe {
  display: block; font-size: 12px; color: var(--leise); margin-bottom: 8px; line-height: 1.45;
}
.dazu { font-size: 11px; color: var(--fluester); font-weight: 400; }

input[type="text"], textarea {
  width: 100%;
  background: var(--anthrazit);
  color: var(--hell);
  border: 1px solid transparent;
  border-top: 2px solid var(--linie-stark);
  font-family: var(--text); font-size: 14px;
  padding: 12px 14px;
  transition: border-color .12s, background .12s;
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--fluester); }
input[type="text"]:focus, textarea:focus {
  outline: none; background: #2B343A;
  border-color: var(--linie); border-top-color: var(--sonne);
}
textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
.pflicht { color: var(--mandarine); }

.ablage {
  border: 1px dashed var(--linie-stark);
  border-top: 4px solid var(--sonne);
  background: var(--anthrazit);
  padding: 28px 18px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
}
.ablage:hover, .ablage.drueber { background: #2B343A; border-color: var(--mandarine); border-top-color: var(--sonne); }
.ablage .gross { font-size: 14px; font-weight: 500; }
.ablage .klein { font-size: 12px; color: var(--leise); }
.ablage.hat-datei { border-style: solid; border-color: var(--linie-stark); border-top-color: var(--sonne); }

.knopf {
  background: var(--sonne); color: var(--anthrazit);
  border: 0; font-family: var(--text); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 18px 22px; cursor: pointer; width: 100%;
}
.knopf:hover { background: var(--mandarine); color: #fff; }
.knopf:disabled { background: #394247; color: var(--fluester); cursor: not-allowed; }

.knopf-zweit {
  background: transparent; color: var(--hell);
  border: 1px solid var(--linie-stark);
  font-family: var(--text); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 13px 20px; cursor: pointer;
}
.knopf-zweit:hover { border-color: var(--mandarine); color: var(--mandarine); }

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

.meldung { padding: 15px 17px; font-size: 14px; margin-bottom: 22px; }
.meldung.fehler { border-top: 4px solid var(--fehler); background: rgba(224, 32, 32, .09); }
.meldung.hinweis { border-top: 4px solid var(--sonne); background: rgba(255, 197, 0, .09); }

/* ---------- Leerzustand ---------- */

.buehne { max-width: 1020px; }
.buehne h2 { margin: 10px 0 16px; }
.buehne .fuehrt { color: var(--leise); max-width: 60ch; font-size: 16px; }

.treppenbild { width: 100%; height: auto; display: block; margin: 30px 0 36px; }

.versprechen { margin-top: 54px; }
.regelgitter {
  display: grid; gap: 1px; background: var(--linie);
  border: 1px solid var(--linie);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}
@media (max-width: 1250px) { .regelgitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .regelgitter { grid-template-columns: 1fr; } }
.regel { background: var(--anthrazit); padding: 20px; border-top: 3px solid var(--sonne); }
/* Wechselnd statt spaltenweise: sonst entsteht ein senkrechter Streifen,
   der nach System aussieht, wo keins ist. */
.regel:nth-child(even) { border-top-color: var(--mandarine); }
.regel strong { display: block; font-size: 14px; margin-bottom: 5px; }
.regel span { font-size: 13px; color: var(--leise); line-height: 1.5; }

/* ---------- Leitplanken-Badges ---------- */

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 32px; }
.badge {
  border: 1px solid var(--linie); background: var(--anthrazit);
  border-top: 3px solid var(--grau);
  padding: 9px 14px; font-size: 12px; color: var(--fluester);
  cursor: default;
}
.badge.aktiv { border-top-color: var(--sonne); color: var(--hell); }

/* ---------- Ergebnis: die Stufen steigen ---------- */

.stufe {
  background: var(--anthrazit);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--sonne);
  padding: 28px 30px 30px;
  margin-bottom: 22px;
  margin-left: calc(var(--n, 0) * var(--einzug));
}
.stufe.oben { border-top-color: var(--mandarine); }
.stufe.nebenbei { border-top-color: var(--grau); }
.stufe.traegt-nicht, .stufe.rot { border-top-color: var(--fehler); }

.stufe .kopfzeile {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.stufe .art {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--anthrazit); background: var(--sonne); padding: 5px 10px; font-weight: 700;
}
.stufe.oben .art { background: var(--mandarine); color: #fff; }
.stufe.traegt-nicht .art { background: var(--fehler); color: #fff; }
.stufe .preis { font-family: var(--mono); font-size: 15px; color: var(--sonne); margin-left: auto; }
.stufe.oben .preis { color: var(--mandarine); }

.feld { margin-top: 22px; }
/* Die Platzierung ist die Antwort auf "wo baue ich das ein". Sie steht
   deshalb abgesetzt statt als weiterer Fliesstext. */
.platz {
  border-left: 2px solid var(--mandarine);
  padding-left: 12px; color: var(--hell);
}
.feld .overline { margin-bottom: 8px; }
.feld ul { margin: 0; padding-left: 0; list-style: none; }
.feld li { margin-bottom: 6px; padding-left: 20px; position: relative; }
.feld li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 9px; height: 2px; background: var(--mandarine);
}

.copy {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  background: var(--tiefer); border: 1px solid var(--linie);
  border-top: 3px solid var(--linie-stark);
  padding: 18px 20px; white-space: pre-wrap;
}

.warnung {
  border-top: 4px solid var(--fehler); background: rgba(224, 32, 32, .08);
  padding: 14px 16px; margin-top: 20px; font-size: 14px;
}

/* ---------- Der Trockenlauf-Balken ---------- */

/* Deutlich, aber nicht in Rot: Ein Beispiel ist kein Fehler. Gestreift,
   damit auf einen Blick klar ist, dass hier nichts gerechnet wurde. */
.probe {
  border-top: 4px solid var(--sonne);
  background: repeating-linear-gradient(
    -45deg, rgba(255,197,0,.10) 0 12px, rgba(255,197,0,.04) 12px 24px);
  padding: 14px 18px; margin-bottom: 26px; font-size: 14px;
}
.probe strong { color: var(--sonne); font-weight: 500; }

/* ---------- Der Fernunterrichts-Blick ---------- */

/* Bewusst NICHT in Rot. Rot ist markenweit allein den Fehlern
   vorbehalten, und ein Punkt zum Pruefen ist kein Fehler. Die Farbe ist
   deshalb Mandarine, die zweite Ebene, wie bei der Platzierung. */
.fern {
  border-top: 4px solid var(--mandarine);
  background: rgba(255, 122, 0, .07);
  padding: 14px 16px; margin-top: 20px; font-size: 14px;
}
.fern.ruhig {
  border-top-color: var(--linie-stark);
  background: transparent; color: var(--leise);
}
.fern .overline { margin-bottom: 8px; }
.fern p { margin: 0; }
.fern .schraube { margin-top: 10px; }
.fern .schraube strong { color: var(--hell); font-weight: 500; }

/* Der Vorbehalt steht schon in der Ueberschrift jeder einzelnen Stufe,
   damit er auch dann mitliest, wenn jemand nur eine Stufe anschaut. */
.kein-rat {
  margin-left: 10px; padding: 2px 7px;
  border: 1px solid var(--linie-stark); color: var(--leise);
  letter-spacing: .1em;
}

/* Der feste Vorbehalt unter den Stufen. Ruhig gehalten, aber mit der
   Linie oben, die in dieser Oberflaeche jede eigene Flaeche traegt. */
.fern-fuss {
  border-top: 4px solid var(--mandarine);
  background: var(--tiefer); border-bottom: 1px solid var(--linie);
  padding: 22px 24px; margin-top: 34px;
}
/* Voller Textkontrast, nicht der gedaempfte Ton der Nebentexte. Ein
   Vorbehalt, der wie Kleingedrucktes aussieht, wird ueberlesen, und genau
   das darf hier nicht passieren. */
.fern-fuss p {
  margin: 10px 0 0; font-size: 14px; color: var(--hell); max-width: 78ch;
}

/* Der Pruefpunkt ist eine Handlung, kein Hintergrundwissen. Deshalb
   abgesetzt, mit der Mandarine-Kante wie die Platzierung: beides sind
   Dinge, die der Nutzer TUT. */
.pruefpunkt {
  margin-top: 18px; padding: 14px 16px;
  border-left: 3px solid var(--mandarine); background: var(--grund);
}
.pruefpunkt strong {
  display: block; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mandarine); margin-bottom: 8px;
}
.pruefpunkt p { margin: 0; }

/* ---------- Speicher-Hinweis ---------- */

.sichern {
  border: 1px solid var(--linie); border-top: 4px solid var(--sonne);
  background: var(--anthrazit);
  padding: 24px 26px; margin-bottom: 30px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.sichern .text { flex: 1 1 320px; }
.sichern .text strong { display: block; font-size: 16px; margin-bottom: 5px; }
.sichern .text span { font-size: 13.5px; color: var(--leise); }
.sichern .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Bruecke ---------- */

.bruecke {
  border-top: 4px solid var(--mandarine); background: var(--anthrazit);
  margin-top: 46px; padding: 28px 30px 30px;
}
.bruecke p { color: var(--leise); margin: 10px 0 20px; max-width: 62ch; }

/* ---------- Warten ---------- */

.warten { padding: 64px 0; max-width: 620px; }
.warten .stufen-lauf { display: flex; align-items: flex-end; gap: 10px; height: 104px; margin: 30px 0 24px; }
.warten .stufen-lauf i {
  display: block; width: 50px; background: var(--sonne);
  animation: steigen 1.6s ease-in-out infinite;
}
.warten .stufen-lauf i:nth-child(1) { height: 28%; animation-delay: 0s; background: var(--grau); }
.warten .stufen-lauf i:nth-child(2) { height: 52%; animation-delay: .18s; }
.warten .stufen-lauf i:nth-child(3) { height: 76%; animation-delay: .36s; }
.warten .stufen-lauf i:nth-child(4) { height: 100%; animation-delay: .54s; background: var(--mandarine); }
@keyframes steigen { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.warten p { color: var(--leise); max-width: 52ch; }

/* ---------- Einstellungen ---------- */

.vorhang {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .76);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px; z-index: 50; overflow-y: auto;
}
.kasten {
  background: var(--tiefer); border: 1px solid var(--linie);
  border-top: 4px solid var(--sonne);
  padding: 34px; max-width: 580px; width: 100%;
}
.tuer-marke { width: 100%; max-width: 400px; height: auto; display: block; margin-bottom: 26px; }
.kasten h2 { margin-bottom: 10px; font-size: 34px; }
.kasten .zeile { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.zugang-stand { font-size: 13px; color: var(--leise); }
.zugang-stand.gut { color: var(--sonne); }

.fuss {
  border-top: 1px solid var(--linie); background: var(--tiefer);
  padding: 24px 36px; color: var(--fluester); font-size: 12.5px;
}