@charset "utf-8";
/* ==========================================================================
   Brave Power Group — Farbrollen nach Tageszeit
   --------------------------------------------------------------------------
   Hier steht kein einziger Farbwert. Die Marke steht in brand.css (--bp-*,
   Quelle: Markenhandbuch v1.0); diese Datei ordnet den Rollen der Website
   je Tageszustand einen Markenton zu. Abstufungen, die das Handbuch nicht
   kennt, entstehen nur als Mischung zweier Markentöne (color-mix) — und
   tools/contrast.py rechnet jede davon nach.

     Rot (--bp-red, --bp-signal)   Akzent: Kicker, Kennzahlen, Links,
                                   primärer Button, feine Linien, Erlös
     Bordeaux, Nahschwarz, Dunkel  die dunkle Welt: Auftakt, Kapitel, Fuß
     Weiß, Warmgrau, Linie         alles, was gelesen wird
     Ink, Grau                     Schrift und Zweitschrift auf hell

   Vier Zustände, gesetzt als data-daytime auf <html> (daytime.js):
     ladephase    Sonnenaufgang bis 14:00 — Weiß, hellster Zustand
     wende        14:00 bis Sonnenuntergang — Warmgrau, eine Stufe dichter
     einspeisung  Sonnenuntergang +90 min — die dunkle Welt mit Bordeaux
     nacht        bis Sonnenaufgang −60 min — Nahschwarz, am ruhigsten

   Die Rollen (--paper, --text, --deep, --value, --charge …) sind dieselben
   wie zuvor, damit site.css und die Diagramme unverändert damit arbeiten.

   Gliederung
     01  Mischungen und Grundwerte
     02  Neutraler Ausgangszustand
     03  Zustand: ladephase
     04  Zustand: wende
     05  Zustand: einspeisung
     06  Zustand: nacht
     07  Variante A — nur Grund und Akzente
     08  Variante C — Raum
     09  Übergang zwischen Zuständen
     10  Entwurfsfläche /design/tageszeit
   ========================================================================== */

/* == 01  Mischungen und Grundwerte ======================================== */
/* Die einzigen abgeleiteten Töne. Jeder ist eine Mischung zweier Markentöne;
   wer hier etwas ändert, führt danach tools/contrast.py aus. */

:root {
  /* Dunkle Flächen: eine und zwei Stufen über dem Grund, ohne Rot — das
     Bordeaux bleibt dem Band-Motiv und den Platzhaltern vorbehalten. */
  --dunkel-flaeche:     color-mix(in srgb, var(--bp-dark) 88%, var(--bp-grey));
  --dunkel-flaeche-2:   color-mix(in srgb, var(--bp-dark) 80%, var(--bp-grey));
  --linie-dunkel:       color-mix(in srgb, var(--bp-on-dark-muted) 26%, var(--bp-dark));
  --linie-nacht:        color-mix(in srgb, var(--bp-on-dark-muted) 22%, var(--bp-near-black));
  --linie-warm:         color-mix(in srgb, var(--bp-grey) 16%, var(--bp-warm-grey));
  --warmgrau-2:         color-mix(in srgb, var(--bp-line) 84%, var(--bp-grey));
  --schrift-nacht:      color-mix(in srgb, var(--bp-warm-grey) 72%, var(--bp-on-dark-muted));
  /* Signalrot als Schrift auf dunklem Grund: Kicker, Links und Kennzahlen
     brauchen 4,5:1, das reine Signalrot kommt auf Nahschwarz nur auf 3,5:1.
     Als Fläche hinter weißer Schrift (Knopf) bleibt es rein. */
  --signal-hell:        color-mix(in srgb, var(--bp-signal) 78%, var(--bp-white));

  /* Dauer des Zustandswechsels während eines Besuchs. */
  --daytime-fade: 1200ms;

  /* Satz und Raum. Poppins kommt in 300, 400, 500 und 700; Variante C
     verändert nur noch den Rhythmus. */
  --weight-body: 400;
  --weight-display: 500;
  --weight-strong: 500;
  --rhythm: 1;
  --media-contrast: 1;
  --media-brightness: 1;
}

/* == 02  Neutraler Ausgangszustand ======================================== */
/* Gilt, bevor das Skript den Zustand setzt, und ohne JavaScript. Identisch
   mit der Ladephase: Die hellste Fassung ist die sichere. */

:root,
[data-daytime="neutral"],
[data-daytime="ladephase"] {
  --paper:        var(--bp-white);
  --paper-2:      var(--bp-warm-grey);
  --paper-3:      var(--bp-line);
  --deep:         var(--bp-dark);
  --deep-2:       var(--dunkel-flaeche);
  --text:         var(--bp-ink);
  --text-2:       var(--bp-grey);
  --on-deep:      var(--bp-white);
  --on-deep-2:    var(--bp-on-dark-muted);
  --line:         var(--bp-line);
  --line-strong:  var(--bp-grey);
  --line-on-deep: var(--linie-dunkel);

  --brand:            var(--bp-red);
  --brand-fill:       var(--bp-red);
  --brand-hover:      var(--bp-signal);
  --brand-on-deep:    var(--signal-hell);
  --value:            var(--bp-red);
  --value-on-deep:    var(--signal-hell);
  --charge:           var(--bp-grey);
  --charge-on-deep:   var(--bp-on-dark-muted);
  --negative:         var(--bp-bordeaux);
  --negative-on-deep: var(--bp-white);

  --focus:         var(--bp-ink);
  --focus-on-deep: var(--bp-white);

  /* Deckkraft der Flächen, die Energieaufnahme und Erlös zeigen — gegen
     ihren eigenen Grund auf mindestens 1,3:1 geprüft. */
  --charge-fill: 0.22;
  --value-fill:  0.12;
  /* Flächen in Stufenachse und Lastgang: Rot auf Weiß trägt leise, auf
     Nahschwarz erst bei doppelter Deckkraft. */
  --stg-band-fill: 0.22;
  --pk-cut-fill:   0.30;

  /* Der Auftakt der Startseite wechselt mit dem Tag zwischen hell und
     dunkel und braucht eigene Rollen. --negative-strong liegt in den
     Kurven über der Ladefläche und muss auf jedem Grund tragen. */
  --hero-bg:         var(--bp-white);
  --hero-on:         var(--bp-ink);
  --hero-on-2:       var(--bp-grey);
  --hero-value:      var(--bp-red);
  --hero-charge:     var(--bp-grey);
  --hero-line:       var(--bp-line);
  --negative-strong: var(--bp-bordeaux);

  /* Markenspur (site.css): das Symbol als Wasserzeichen. Auf Weiß im
     Warmgrau, das das Handbuch für Wasserzeichen vorsieht; in den dunklen
     Kapiteln ein Bordeaux, das sich kaum vom Grund abhebt. */
  --spur:      var(--bp-warm-grey);
  --spur-tief: color-mix(in srgb, var(--bp-bordeaux) 34%, var(--bp-dark));
}

/* == 03  Zustand: ladephase =============================================== */
/* Sonnenaufgang bis 14:00. Weiß, größte Kontrastspanne. Die Werte stehen
   oben beim neutralen Zustand — es sind dieselben. */

/* == 04  Zustand: wende =================================================== */
/* 14:00 bis Sonnenuntergang. Die Erzeugung fällt, die Preise steigen. Der
   Grund wird Warmgrau, Flächen und Linien rücken eine Stufe nach. */

[data-daytime="wende"] {
  --paper:        var(--bp-warm-grey);
  --paper-2:      var(--bp-line);
  --paper-3:      var(--warmgrau-2);
  --line:         var(--linie-warm);
  --hero-bg:      var(--bp-warm-grey);
  --hero-line:    var(--linie-warm);
  --spur:         var(--bp-line);
  --charge-fill:  0.20;
  --value-fill:   0.16;
  --stg-band-fill: 0.26;
  --pk-cut-fill:   0.34;
}

/* == 05  Zustand: einspeisung ============================================= */
/* Sonnenuntergang bis +90 Minuten. Die Abendspitze: der Speicher verdient.
   Die dunkle Welt — Nahschwarz, die Flächen eine Stufe heller; Rot nur als
   Akzent, das Bordeaux nur im Band-Motiv. */

[data-daytime="einspeisung"] {
  --paper:        var(--bp-dark);
  --paper-2:      var(--dunkel-flaeche);
  --paper-3:      var(--dunkel-flaeche-2);
  --deep:         var(--dunkel-flaeche);
  --deep-2:       var(--dunkel-flaeche-2);
  --text:         var(--bp-warm-grey);
  --text-2:       var(--bp-on-dark-muted);
  --on-deep:      var(--bp-warm-grey);
  --on-deep-2:    var(--bp-on-dark-muted);
  --line:         var(--linie-dunkel);
  --line-strong:  var(--bp-on-dark-muted);
  --line-on-deep: color-mix(in srgb, var(--bp-on-dark-muted) 30%, var(--dunkel-flaeche));

  --brand:            var(--signal-hell);
  --brand-fill:       var(--bp-signal);
  --brand-hover:      var(--bp-red);
  --brand-on-deep:    var(--signal-hell);
  --value:            var(--signal-hell);
  --value-on-deep:    var(--signal-hell);
  --charge:           var(--bp-on-dark-muted);
  --charge-on-deep:   var(--bp-on-dark-muted);
  --negative:         var(--bp-white);
  --negative-on-deep: var(--bp-white);

  --focus:         var(--bp-white);
  --focus-on-deep: var(--bp-white);

  --charge-fill: 0.26;
  --value-fill:  0.14;
  --stg-band-fill: 0.50;
  --pk-cut-fill:   0.46;

  --hero-bg:         var(--bp-near-black);
  --hero-on:         var(--bp-warm-grey);
  --hero-on-2:       var(--bp-on-dark-muted);
  --hero-value:      var(--signal-hell);
  --hero-charge:     var(--bp-on-dark-muted);
  --hero-line:       var(--linie-nacht);
  --negative-strong: var(--bp-white);

  --spur:      color-mix(in srgb, var(--bp-bordeaux) 30%, var(--bp-dark));
  --spur-tief: color-mix(in srgb, var(--bp-bordeaux) 30%, var(--dunkel-flaeche));
}

/* == 06  Zustand: nacht =================================================== */
/* Nach der Abendspitze bis kurz vor Sonnenaufgang. Nahschwarz, die Schrift
   eine Spur zurückgenommen, die Flächen wie am Abend. */

[data-daytime="nacht"] {
  --paper:        var(--bp-near-black);
  --paper-2:      var(--dunkel-flaeche);
  --paper-3:      var(--dunkel-flaeche-2);
  --deep:         var(--dunkel-flaeche);
  --deep-2:       var(--dunkel-flaeche-2);
  --text:         var(--schrift-nacht);
  --text-2:       var(--bp-on-dark-muted);
  --on-deep:      var(--schrift-nacht);
  --on-deep-2:    var(--bp-on-dark-muted);
  --line:         var(--linie-nacht);
  --line-strong:  var(--bp-on-dark-muted);
  --line-on-deep: color-mix(in srgb, var(--bp-on-dark-muted) 30%, var(--dunkel-flaeche));

  --brand:            var(--signal-hell);
  --brand-fill:       var(--bp-signal);
  --brand-hover:      var(--bp-red);
  --brand-on-deep:    var(--signal-hell);
  --value:            var(--signal-hell);
  --value-on-deep:    var(--signal-hell);
  --charge:           var(--bp-on-dark-muted);
  --charge-on-deep:   var(--bp-on-dark-muted);
  --negative:         var(--bp-white);
  --negative-on-deep: var(--bp-white);

  /* Der Fokusring bleibt auch nachts klar erkennbar — Bedienbarkeit geht
     der Ruhe vor. */
  --focus:         var(--bp-white);
  --focus-on-deep: var(--bp-white);

  --charge-fill: 0.28;
  --value-fill:  0.14;
  --stg-band-fill: 0.52;
  --pk-cut-fill:   0.48;

  --hero-bg:         var(--bp-near-black);
  --hero-on:         var(--schrift-nacht);
  --hero-on-2:       var(--bp-on-dark-muted);
  --hero-value:      var(--signal-hell);
  --hero-charge:     var(--bp-on-dark-muted);
  --hero-line:       var(--linie-nacht);
  --negative-strong: var(--bp-white);

  --spur:      color-mix(in srgb, var(--bp-bordeaux) 26%, var(--bp-near-black));
  --spur-tief: color-mix(in srgb, var(--bp-bordeaux) 26%, var(--dunkel-flaeche));
}

/* == 07  Variante A — nur Grund und Akzente =============================== */
/* Der Zustand wechselt den Grund, sonst nichts: volle Schrifthelligkeit auch
   nachts, gleiche Flächenabstufung zu jeder Tageszeit. */

[data-variant="a"][data-daytime="einspeisung"],
[data-variant="a"][data-daytime="nacht"] {
  --text:      var(--bp-warm-grey);
  --on-deep:   var(--bp-warm-grey);
  --hero-on:   var(--bp-warm-grey);
}
[data-variant="a"] {
  --charge-fill: 0.16;
  --value-fill:  0.16;
}

/* == 08  Variante C — Raum ================================================ */
/* Poppins hat keine Zwischengewichte; Variante C verändert deshalb nur noch
   Raumrhythmus und Bildbehandlung: morgens dicht, nachts weit. */

[data-variant="c"][data-daytime="ladephase"]   { --rhythm: 0.94; --media-contrast: 1.04; --media-brightness: 1; }
[data-variant="c"][data-daytime="wende"]       { --rhythm: 1;    --media-contrast: 1;    --media-brightness: 0.99; }
[data-variant="c"][data-daytime="einspeisung"] { --rhythm: 1.1;  --media-contrast: 0.94; --media-brightness: 0.92; }
[data-variant="c"][data-daytime="nacht"]       { --rhythm: 1.18; --media-contrast: 0.88; --media-brightness: 0.82; }

[data-variant="c"] body { font-weight: var(--weight-body); }
[data-variant="c"] h1,
[data-variant="c"] h2,
[data-variant="c"] h3,
[data-variant="c"] h4 { font-weight: var(--weight-display); }
[data-variant="c"] strong { font-weight: var(--weight-strong); }
[data-variant="c"] .sec { padding-block: calc(var(--sec) * var(--rhythm)); }
[data-variant="c"] p { margin-bottom: calc(var(--u) * 2 * var(--rhythm)); }
[data-variant="c"] .fig-media img,
[data-variant="c"] .fig-media video {
  filter: contrast(var(--media-contrast)) brightness(var(--media-brightness));
}

/* == 09  Übergang zwischen Zuständen ====================================== */
/* Wechselt der Zustand während eines Besuchs, gleiten Flächen und Text über
   1200 ms hinüber: spürbar, aber nicht störend. Die Klasse setzt das Skript
   erst nach dem ersten Paint — der Einstieg selbst blendet nicht auf. */

.daytime-ready body,
.daytime-ready .hdr,
.daytime-ready .ftr,
.daytime-ready .sec,
.daytime-ready .hero,
.daytime-ready .mnav,
.daytime-ready .panel,
.daytime-ready .pop {
  transition: background-color var(--daytime-fade) ease,
              color var(--daytime-fade) ease,
              border-color var(--daytime-fade) ease;
}

@media (prefers-reduced-motion: reduce) {
  .daytime-ready body,
  .daytime-ready .hdr,
  .daytime-ready .ftr,
  .daytime-ready .sec,
  .daytime-ready .hero,
  .daytime-ready .mnav,
  .daytime-ready .panel,
  .daytime-ready .pop { transition: none; }
}

/* == 10  Entwurfsfläche /design/tageszeit ================================= */
/* Gilt nur auf der Vergleichsseite. Keine Regel greift in die Website hinein. */

.sec-daytime { padding-block: calc(var(--u) * 6) var(--sec); }
.dz-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 84px;
  z-index: 10;
  background: var(--paper);
}
.dz-live {
  font-family: var(--display);
  font-size: var(--t-7);
  color: var(--text-2);
  margin: calc(var(--u) * 2) 0 0;
  max-width: none;
}
.dz-note {
  font-size: var(--t-7);
  color: var(--text-2);
  margin-top: calc(var(--u));
  max-width: 52em;
}
.dz-note strong { color: var(--text); }

.dz-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: calc(var(--u) * 2) var(--gap);
  margin: calc(var(--u) * 4) 0;
  padding: calc(var(--u) * 3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dz-swatch { display: grid; grid-template-columns: 22px 1fr; gap: calc(var(--u) * 1.5) calc(var(--u)); align-items: center; }
.dz-chip { width: 22px; height: 22px; grid-row: span 2; border: 1px solid var(--line-strong); }
.dz-chip-name { font-family: var(--display); font-size: var(--t-7); font-weight: 560; }
.dz-chip-token { font-size: 0.75rem; color: var(--text-2); }

/* Zwei Musterflächen nebeneinander: der helle Grund und die Kapitelfläche.
   So ist in jedem Zustand beides gleichzeitig zu sehen. */
.dz-sample {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--gap);
  margin-bottom: calc(var(--u) * 8);
}
.dz-pane { padding: calc(var(--u) * 4); border: 1px solid var(--line); }
.dz-pane-paper { background: var(--paper); }
.dz-pane-deep { background: var(--deep); border-color: var(--line-on-deep); }
.dz-pane-label {
  font-family: var(--display);
  font-size: var(--t-7);
  font-weight: 560;
  color: var(--text-2);
  margin-bottom: calc(var(--u) * 2);
}
.dz-pane-deep .dz-pane-label { color: var(--on-deep-2); }
.dz-pane h3 { font-size: var(--t-4); }
.dz-pane .kpis { margin-top: calc(var(--u) * 3); }
.dz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 4);
}
.dz-field { display: grid; gap: 4px; }
.dz-field span { font-family: var(--display); font-size: var(--t-7); font-weight: 560; }
.dz-field input {
  min-height: 44px;
  padding: 0 calc(var(--u) * 1.5);
  font-family: var(--serif);
  font-size: var(--t-7);
  color: var(--text);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.dz-curve { margin-top: calc(var(--u) * 3); overflow-x: auto; }
.dz-curve svg { min-width: 560px; }
.dz-need { font-family: var(--display); font-size: 0.75rem; color: var(--text-2); }
.dz-fail { color: var(--negative); font-weight: 700; }

@media (max-width: 900px) {
  .dz-bar { position: static; }
}