/* ==========================================================================
   Redaktion — Oberflaeche der Content-Fabrik

   HELL, EINE EINZIGE WELT. Kein Dunkelmodus: Ausdrueckliche Vorgabe. Damit
   Formularelemente, Bildlaufleisten und Auswahlfelder mitziehen und nicht in
   der Systemfarbe erscheinen, steht `color-scheme: light` -- das ist der
   Schalter dafuer, nicht die Hintergrundfarbe.

   KEINE WEBFONTS. Die CSP dieser Seite erlaubt keine externen Quellen, und
   Google Fonts ist in Deutschland abmahnfaehig. Die Freundlichkeit kommt aus
   `ui-rounded` (auf macOS SF Pro Rounded), das kostet kein einziges Byte.

   SIGNATUR: Die Navigation ist die Fliessstrecke. Fuenf nummerierte Stufen,
   durch Linien verbunden, jede mit eigener Farbe -- und dieselbe Farbe
   erscheint ueberall wieder, wo ein Zustand angezeigt wird. Wer eine
   amberfarbene Marke sieht, weiss ohne Lesen: das wartet noch.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Grund: sehr helles, minimal warmes Weiss -- nicht Creme, nicht Grau */
  --paper:#FAFBFA;
  --surface:#FFFFFF;
  --surface-2:#F1F4F2;

  /* Text: sehr dunkel fuer hohen Kontrast (16,9:1 auf Weiss) */
  --ink:#14181C;
  --ink-2:#454F57;
  --ink-3:#6C767E;

  /* Linien bewusst sichtbar, keine Haarlinien -- "kontrastreich" gilt auch
     fuer Struktur, nicht nur fuer Text. */
  --line:#C9D0D4;
  --line-soft:#E1E6E4;

  /* Die fuenf Stufen. Reihenfolge = Weg durch die Fabrik. */
  --s1:#2A63C4;  --s1-bg:#E7EFFB;   /* Ideen        — Rohstoff  */
  --s2:#7237B8;  --s2-bg:#F0E8FA;   /* Build        — Umformung */
  --s3:#0B7D62;  --s3-bg:#DFF2ED;   /* Videos       — gemacht   */
  --s4:#A66A00;  --s4-bg:#FBEFD8;   /* Queue        — wartet    */
  --s5:#1B7038;  --s5-bg:#E1F1E5;   /* Veroeffentl. — fertig    */

  --bad:#B3261E;  --bad-bg:#FBE7E5;
  --focus:#2A63C4;

  --radius:10px;
  --radius-s:6px;
  --schatten:0 1px 2px rgba(20,24,28,.06), 0 6px 16px -10px rgba(20,24,28,.22);

  --sans:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display",
         -apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --text:-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",
         Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 15.5px/1.6 var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--s1)}
.mono{font-family:var(--mono);font-size:.82em;letter-spacing:-.01em}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:4px;
}

/* ---------- Kopf: die Fliessstrecke ------------------------------------ */
.top{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:.7rem 1.5rem;display:flex;align-items:center;gap:1.75rem;
  flex-wrap:wrap;position:sticky;top:0;z-index:20;
}
.mark{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;
  color:var(--ink);font-family:var(--sans);font-weight:700;
  font-size:1.02rem;letter-spacing:-.015em;white-space:nowrap;
}
.mark-dot{
  width:.85rem;height:.85rem;border-radius:50%;
  background:conic-gradient(var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s1));
}

.rail{display:flex;align-items:stretch;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}

.stage{
  position:relative;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;text-decoration:none;color:var(--ink-2);
  border-radius:var(--radius-s);white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:.94rem;
  transition:background .12s ease,color .12s ease;
}
.stage + .stage{margin-left:1.5rem}
/* Verbindungslinie: macht aus fuenf Reitern eine Strecke. */
.stage + .stage::before{
  content:"";position:absolute;left:-1.25rem;top:50%;
  width:1rem;height:2px;background:var(--line);border-radius:2px;
}
.stage:hover{background:var(--surface-2);color:var(--ink)}

.stage-n{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  width:1.3rem;height:1.3rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-3);
}
.stage-c{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  padding:.1rem .4rem;border-radius:999px;
  background:var(--surface-2);color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.stage[data-s="1"].on{background:var(--s1-bg);color:var(--s1)}
.stage[data-s="2"].on{background:var(--s2-bg);color:var(--s2)}
.stage[data-s="3"].on{background:var(--s3-bg);color:var(--s3)}
.stage[data-s="4"].on{background:var(--s4-bg);color:var(--s4)}
.stage[data-s="5"].on{background:var(--s5-bg);color:var(--s5)}
/* NICHT `background: currentColor` zusammen mit `color: weiss` in derselben
   Regel: currentColor loest gegen die NEUE Farbe auf, also gegen Weiss --
   die Marke wird weiss auf weiss und verschwindet. Deshalb je Stufe
   ausgeschrieben. */
.stage[data-s="1"].on .stage-n,.stage[data-s="1"].on .stage-c{background:var(--s1);color:#fff}
.stage[data-s="2"].on .stage-n,.stage[data-s="2"].on .stage-c{background:var(--s2);color:#fff}
.stage[data-s="3"].on .stage-n,.stage[data-s="3"].on .stage-c{background:var(--s3);color:#fff}
.stage[data-s="4"].on .stage-n,.stage[data-s="4"].on .stage-c{background:var(--s4);color:#fff}
.stage[data-s="5"].on .stage-n,.stage[data-s="5"].on .stage-c{background:var(--s5);color:#fff}

.abmelden{margin-left:auto}
.abmelden .btn{color:var(--ink-3)}

/* ---------- Seitenrumpf ------------------------------------------------- */
main{max-width:80rem;margin:0 auto;padding:2rem 1.5rem 6rem}
.kopf{margin:0 0 1.6rem;max-width:44rem}
h1{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,1.95rem);line-height:1.15;
  letter-spacing:-.025em;margin:0 0 .35rem;text-wrap:balance;
}
.sub{color:var(--ink-2);margin:0;font-size:1rem}
h2{
  font-family:var(--sans);font-weight:700;font-size:1.12rem;
  letter-spacing:-.015em;margin:2.2rem 0 .8rem;
}
h2 .neben{font:400 .84rem/1.5 var(--mono);color:var(--ink-3);margin-left:.5rem}

/* ---------- Meldungen --------------------------------------------------- */
.flash{
  padding:.75rem 1rem;border-radius:var(--radius-s);margin:0 0 1rem;
  font-weight:500;border:1px solid transparent;
}
.flash.ok{background:var(--s5-bg);color:var(--s5);border-color:var(--s5)}
.flash.fehler{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}

/* ---------- Flaechen ---------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--schatten);
}
.polster{padding:1.4rem}
.werkzeuge{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 1.2rem}

/* ---------- Formulare --------------------------------------------------- */
input[type=search],input[type=text],input[type=email],input[type=password],
textarea,select{
  font:inherit;width:100%;padding:.55rem .7rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);
}
textarea{line-height:1.55;resize:vertical}
input::placeholder{color:var(--ink-3)}
.feld{margin:0 0 1.05rem}
.feld > label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.82rem;
  color:var(--ink-2);margin:0 0 .3rem;
}
.feld .hinweis{display:block;font-weight:400;color:var(--ink-3);font-size:.8rem}

.wahl{
  display:flex;gap:.65rem;align-items:flex-start;padding:.6rem .7rem;
  border:1px solid var(--line-soft);border-radius:var(--radius-s);
  margin:0 0 .5rem;cursor:pointer;
}
.wahl:hover{background:var(--surface-2)}
.wahl input{width:auto;margin-top:.2rem;accent-color:var(--s1)}
.wahl:has(input:disabled){opacity:.5;cursor:not-allowed}

/* ---------- Schaltflaechen ---------------------------------------------- */
.btn{
  font:600 .93rem/1 var(--sans);display:inline-flex;align-items:center;
  gap:.4rem;padding:.58rem .95rem;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease;
}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn.primaer{background:var(--s1);border-color:var(--s1);color:#fff}
.btn.primaer:hover{background:#1E4FA6;border-color:#1E4FA6}
.btn.gefahr{color:var(--bad);border-color:var(--line)}
.btn.gefahr:hover{background:var(--bad-bg);border-color:var(--bad)}
.btn.klein{padding:.32rem .6rem;font-size:.85rem}

/* ---------- Tabellen ---------------------------------------------------- */
.rollen{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font:600 .74rem/1.6 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);padding:.7rem .9rem;
  border-bottom:2px solid var(--line);background:var(--surface-2);
  white-space:nowrap;
}
td{padding:.85rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.hook{font-weight:600;font-size:1rem;line-height:1.4;color:var(--ink)}
.neben{color:var(--ink-3);font-size:.84rem}

/* ---------- Marken (Zustaende) ------------------------------------------ */
.marke{
  display:inline-block;font:600 .76rem/1.5 var(--sans);
  padding:.13rem .48rem;border-radius:999px;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);
}
.marke.s1{background:var(--s1-bg);color:var(--s1)}
.marke.s2{background:var(--s2-bg);color:var(--s2)}
.marke.s3{background:var(--s3-bg);color:var(--s3)}
.marke.s4{background:var(--s4-bg);color:var(--s4)}
.marke.s5{background:var(--s5-bg);color:var(--s5)}
.marke.schlecht{background:var(--bad-bg);color:var(--bad)}

/* ---------- Leere Zustaende: Einladung, keine Meldung -------------------- */
.leer{padding:3rem 1.5rem;text-align:center;color:var(--ink-2)}
.leer strong{display:block;font-family:var(--sans);font-size:1.05rem;
  color:var(--ink);margin:0 0 .3rem}

/* ---------- Anordnung --------------------------------------------------- */
.zwei{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:1.5rem}
@media (max-width:62rem){.zwei{grid-template-columns:1fr}}
video{width:100%;max-width:280px;border-radius:var(--radius-s);
  background:var(--ink);display:block}
/* In Tabellen ueber die HOEHE begrenzen. Clips sind 9:16 -- eine
   Breitenangabe ergibt eine sehr hohe Zelle, und die Zeile wird unlesbar. */
td video{max-height:5.5rem;width:auto;max-width:none}

.bloecke{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}
.bloecke li{
  display:grid;grid-template-columns:6rem 1fr;gap:.85rem;
  padding:.5rem .7rem;border-radius:var(--radius-s);background:var(--surface-2);
}
.bloecke li.wegweiser{
  background:transparent;border:1px dashed var(--line);
  color:var(--ink-3);font-style:italic;
}
.bloecke .k{font:500 .72rem/1.9 var(--mono);color:var(--ink-3)}

/* ---------- Anmeldung --------------------------------------------------- */
.anmelden{max-width:23rem;margin:12vh auto;padding:2rem}
.anmelden .mark{margin:0 0 1.5rem}
.anmelden h1{font-size:1.5rem;margin-bottom:.3rem}
.anmelden .sub{font-size:.95rem;margin-bottom:1.5rem}

@media (max-width:40rem){
  .top{padding:.6rem .9rem;gap:1rem}
  main{padding:1.4rem .9rem 4rem}
  .stage{padding:.45rem .6rem;font-size:.88rem}
  .stage + .stage{margin-left:1rem}
  .stage + .stage::before{left:-.85rem;width:.7rem}
  .stage-t{display:none}
  .bloecke li{grid-template-columns:1fr;gap:.15rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}