/* ==========================================================================
   BAILOS — Gestaltungs-Tokens
   Angelegt 06.08.2026 · Welle 1 des Redesigns

   WICHTIG — diese Datei aendert absichtlich NICHTS am heutigen Aussehen.
   Sie enthaelt ausschliesslich:
     1. Variablen unter :root, alle mit dem Praefix --b-
     2. Klassen, alle mit dem Praefix .b-
   Kein einziger Element-Selektor. Kein bestehender Klassenname wird
   getroffen (147 vorhandene Namen wurden dagegen geprueft).
   Bestehende Inline-Stile bleiben unberuehrt, bis eine Seite bewusst
   umgestellt wird.

   Die Farbwerte sind KEINE neuen Farben. Es sind die Werte, die heute schon
   in der Website stehen, jetzt nur benannt. Gemessen mit
   bailos-redesign/tools/ist-werte.mjs, Kontraste geprueft mit
   tools/ist-kontraste.mjs.
   ========================================================================== */

:root {
  /* ── Gruende ─────────────────────────────────────────────────────────── */
  --b-grund:        #0A1F44;   /* Seitengrund, 333× im Bestand              */
  --b-grund-tief:   #071633;   /* Karten und gesenkte Flaechen, 647×        */

  /* ── Schrift ─────────────────────────────────────────────────────────── */
  --b-text:         #EEF3F8;   /* Fliesstext,  1666× · 14,56:1 auf Grund    */
  --b-text-leise:   #8FA6C2;   /* gedaempft,   1453× ·  6,50:1              */
  --b-text-still:   #6A8ABA;   /* Randnotizen,  630× ·  4,61:1              */

  /* ── Signale. Bedeutung, nicht Dekoration. ───────────────────────────── */
  --b-teal:         #00E0D0;   /* eigenes Netz, aktiv · 1212× ·  9,73:1     */
  --b-teal-tief:    #00C4C4;   /* Linien und Raender    ·  495× ·  7,50:1   */
  --b-teal-hell:    #7BF0E6;   /* Hover                 ·   90×             */
  --b-amber:        #FFB020;   /* Handlung              ·  672× ·  8,89:1   */
  --b-amber-hell:   #FFC44D;   /* Hover                 ·  291×             */
  --b-blau:         #5A8CFF;   /* TMS-Umfang            ·  261× ·  5,13:1   */
  --b-blau-hell:    #9DB9FF;   /* TMS, hell             ·  249× ·  8,37:1   */

  /* Rost = Problem-Signal. ACHTUNG: der Bestandswert #C9614F misst nur
     4,11:1 auf dem Seitengrund und liegt damit unter der Lesbarkeitsschwelle.
     Ersatz mit identischem Farbton steht bereit: #D16855 (4,51:1).
     In Welle 2 hier eine Zeile tauschen, dann gilt es ueberall. */
  --b-rost:         #C9614F;
  --b-rost-geprueft:#D16855;

  /* ── Raender. Eine Familie, sieben Deckungen im Bestand. ─────────────── */
  --b-rand-leise:   rgba(143,166,194,0.12);
  --b-rand:         rgba(143,166,194,0.18);
  --b-rand-klar:    rgba(143,166,194,0.28);
  --b-rand-stark:   rgba(143,166,194,0.45);
  --b-rand-teal:    rgba(0,196,196,0.42);
  --b-rand-blau:    rgba(90,140,255,0.42);
  --b-rand-amber:   rgba(255,176,32,0.42);

  /* ── Schriftgroessen ─────────────────────────────────────────────────────
     Der Bestand kennt 27 verschiedene Groessen, davon 2.527 Vorkommen
     zwischen 13 und 16 px. Sieben fast gleiche Stufen — deshalb wirkt die
     Seite flach, egal wie gut der Text ist. Diese Leiter hat acht Stufen mit
     echtem Abstand. Sie wird in Welle 2 angewandt, hier steht sie nur bereit.

     Fuenf feste Stufen reichen; alles darueber ist Displaygroesse und laeuft
     ueber clamp(), das mitwaechst und deshalb unangetastet bleibt.

       heute                              wird     Rolle
       9,5 / 10 / 10,5 / 11 / 11,5   ->   11       Kleinstschrift, Marken
       12 / 12,5 / 13                ->   12,5     Hilfstext, Fusszeile
       13,5 / 14 / 14,5              ->   14       Fliesstext, Listen
       15 / 15,5 / 16 / 16,5         ->   16       Vorspann, Navigation
       17 bis 24                     ->   22       Zwischenueberschrift

     Der Gewinn liegt nicht in den Werten, sondern im Wegfall der Zwischen-
     stufen: li stand auf 13 UND 15, p auf 13,5 / 14 / 15 / 15,5. Vier
     Groessen fuer dieselbe Rolle koennen keine Rangfolge ergeben.          */
  --b-t-2xs: 11px;
  --b-t-xs:  12.5px;
  --b-t-s:   14px;
  --b-t-m:   16px;
  --b-t-l:   22px;

  /* ── Ecken. Der Bestand kennt acht Radien (1,2,5,6,7,8,9,12). Drei reichen. */
  --b-r-klein: 2px;
  --b-r:       6px;
  --b-r-rund:  999px;

  /* ── Tiefe. Versatz und Weichzeichnung, nie ein farbloser Schein. ────── */
  --b-schatten:       0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.22);
  --b-schatten-hoch:  0 2px 4px rgba(0,0,0,0.34), 0 8px 24px rgba(0,0,0,0.28);

  /* ── Bewegung ────────────────────────────────────────────────────────── */
  --b-schnell: .12s ease;
  --b-ruhig:   .5s cubic-bezier(.16,1,.3,1);
}

/* ══════════════════════════════════════════════════════════════════════════
   Bauteile. Alle mit b- vorne, damit sie nichts Bestehendes treffen.
   Sie wirken erst, wenn eine Seite sie im Markup benutzt.
   ══════════════════════════════════════════════════════════════════════════ */

/* Zahlen richten sich aus, wo gezaehlt oder gerechnet wird. */
.b-zahl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ── Zustands-Plakette: Form UND Farbe, nie nur Farbe ─────────────────── */
.b-plakette {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--b-r-rund); white-space: nowrap;
  font-size: var(--b-t-2xs); font-weight: 600;
  border: 1px solid transparent;
}
.b-plakette::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.b-plakette[data-ton="netz"]  { color: var(--b-teal); background: rgba(0,224,208,0.10);  border-color: rgba(0,224,208,0.34); }
.b-plakette[data-ton="tms"]   { color: var(--b-blau-hell); background: rgba(90,140,255,0.12); border-color: rgba(90,140,255,0.34); }
.b-plakette[data-ton="tat"]   { color: var(--b-amber); background: rgba(255,176,32,0.10); border-color: rgba(255,176,32,0.34); }
.b-plakette[data-ton="still"] { color: var(--b-text-still); background: rgba(143,166,194,0.10); border-color: var(--b-rand); }

/* ── Knoepfe ─────────────────────────────────────────────────────────── */
.b-knopf {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 16px; border-radius: var(--b-r); cursor: pointer;
  font-size: var(--b-t-s); font-weight: 600; text-decoration: none;
  border: 1px solid var(--b-rand-klar);
  background: transparent; color: var(--b-text);
  transition: background var(--b-schnell), border-color var(--b-schnell);
}
.b-knopf:hover { background: rgba(143,166,194,0.10); border-color: var(--b-rand-stark); }
.b-knopf--tat  { background: var(--b-amber); border-color: var(--b-amber); color: var(--b-grund-tief); font-weight: 700; }
.b-knopf--tat:hover { background: var(--b-amber-hell); border-color: var(--b-amber-hell); color: var(--b-grund-tief); }
.b-knopf--leise { border-color: transparent; color: var(--b-text-leise); }
.b-knopf--leise:hover { color: var(--b-text); }

/* ── Schiene: nummerierte Stationen als Bedienelement ────────────────── */
.b-schiene { position: relative; display: grid; gap: 0; }
.b-schiene::before {
  content: ""; position: absolute; top: 19px; left: 6%; right: 6%;
  height: 2px; background: var(--b-rand-klar); border-radius: 1px;
}
/* Die Fuellung liegt in voller Breite und wird beschnitten. Kein width-
   Uebergang: der wuerde bei jedem Bild das Layout neu rechnen lassen. */
.b-schiene::after {
  content: ""; position: absolute; top: 19px; left: 6%; right: 6%; height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--b-teal) 0%, var(--b-teal) 26%,
              var(--b-blau) 42%, var(--b-blau) 78%, var(--b-amber) 100%);
  clip-path: inset(0 calc((1 - var(--b-fortschritt, 0)) * 100%) 0 0);
  transition: clip-path var(--b-ruhig);
}
.b-halt {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
  display: grid; justify-items: center; gap: 9px; padding: 0 4px;
  color: var(--b-text-still); font: inherit; text-align: center;
}
.b-ring {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--b-grund); border: 1.5px solid var(--b-rand-klar);
  color: var(--b-text-still);
  font-family: 'JetBrains Mono', monospace; font-size: var(--b-t-xs); font-weight: 700;
  transition: border-color var(--b-schnell), color var(--b-schnell), background var(--b-schnell);
}
.b-halt[data-erledigt="ja"] .b-ring { border-color: var(--b-ton); color: var(--b-ton); }
.b-halt[aria-current="step"] .b-ring {
  border-color: var(--b-ton); background: var(--b-ton); color: var(--b-grund);
}

/* ── Beleg: der Vorgang, der Felder ansammelt ────────────────────────── */
.b-beleg {
  border: 1px solid var(--b-rand); border-radius: var(--b-r);
  background: var(--b-grund-tief); overflow: hidden;
}
.b-felder {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
  gap: 1px; background: var(--b-rand); margin: 0;
}
.b-feld {
  background: var(--b-grund-tief); padding: 10px 14px; min-height: 56px;
  display: grid; align-content: center; gap: 2px;
}
.b-feld dt { font-size: var(--b-t-2xs); color: var(--b-text-still); }
.b-feld dd { margin: 0; font-size: var(--b-t-s); font-weight: 600; color: var(--b-text); line-height: 1.3; }
.b-feld--neu { position: relative; }
.b-feld--neu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 2px 0 0 var(--b-ton, var(--b-teal));
}

/* ── Liste statt Karten ──────────────────────────────────────────────── */
.b-liste {
  background: var(--b-grund-tief); border: 1px solid var(--b-rand);
  border-radius: var(--b-r); overflow: hidden;
}
.b-zeile {
  display: grid; align-items: center; gap: 14px;
  padding: 11px 14px; border-top: 1px solid var(--b-rand);
  transition: background var(--b-schnell);
}
.b-liste > .b-zeile:first-child { border-top: 0; }
.b-zeile:hover { background: rgba(143,166,194,0.06); }

/* ── Grundsatz: wer entscheidet was ───────────────────────────────────────
   Fuer die Human-in-command-Aussage. Vorher waren das zwei Absaetze mit
   fetten Einleitungen und eine Zeile erfundener Beispielfragen in
   Anfuehrungszeichen. Jetzt eine Definitionsliste: links wer, rechts was.
   Nutzt die Rollenmarken SIE / KI, die es auf workflows.html schon gibt. */
.b-grundsatz {
  margin: 28px 0 0; max-width: 70ch;
  border: 1px solid var(--b-rand); border-radius: var(--b-r);
  background: var(--b-grund-tief);
}
.b-satz {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 5px 16px; align-items: baseline;
  padding: 17px 20px 18px;
}
.b-satz + .b-satz { border-top: 1px solid var(--b-rand); }
.b-satz-titel {
  grid-column: 2; margin: 0;
  font-size: var(--b-t-m); font-weight: 700; color: var(--b-text); line-height: 1.25;
}
.b-satz-text {
  grid-column: 2; margin: 0;
  font-size: var(--b-t-s); line-height: 1.62; color: var(--b-text-leise);
}
.b-wer {
  grid-row: span 2; grid-column: 1; align-self: start; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 0; width: 46px; border-radius: var(--b-r-klein);
  font-size: var(--b-t-2xs); font-weight: 700; letter-spacing: .3px;
  border: 1px solid currentColor;
}
.b-wer--sie { color: var(--b-amber);  background: rgba(255,176,32,0.10); }
.b-wer--ki  { color: var(--b-teal);   background: rgba(0,224,208,0.10); }

@media (max-width: 560px) {
  .b-satz { grid-template-columns: minmax(0, 1fr); }
  .b-wer { grid-row: auto; grid-column: 1; justify-self: start; margin: 0 0 6px; }
  .b-satz-titel, .b-satz-text { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .b-schiene::after, .b-ring, .b-knopf, .b-zeile { transition: none; }
}