/* Design-Tokens der BENTHO-Website.
   Abgeleitet aus dem Logo (Indigo + Orange) und dem Bestand von bentho-light.
   Einzige Quelle für Farben, Typografie und Abstände — keine Hex-Werte in Templates.

   ZWEI MODI
   ---------
   Die Namen der neutralen Rampe beschreiben die ROLLE, nicht die Helligkeit:
   --bt-n0 ist immer "die Seitenfläche", --bt-n800 immer "die kräftigste
   Schrift". Im hellen Modus läuft die Rampe von Weiß nach Dunkelgrau, im
   dunklen genau andersherum. Dasselbe gilt für --bt-ind-900: "die stärkste
   Markenfarbe für Überschriften", hell fast schwarzblau, dunkel fast weiß.

   Wer eine Farbe ergänzt, muß sie in BEIDEN Blöcken setzen. Alles, was nur
   in :root steht, bleibt im Dunkelmodus unverändert und fällt auf.

   Immer-Weiß (Schrift auf Markenflächen) heißt --bt-on-brand und kippt NICHT. */

:root{
  color-scheme:light;

  /* Marke */
  --bt-ind:#554f99;        /* Indigo aus dem Logowürfel */
  --bt-ind-900:#14376f;    /* Überschriften */
  --bt-ind-800:#282773;    /* Fläche dunkler Sektionen */
  --bt-ind-400:#8a86bd;
  --bt-ind-100:#e6e5f2;
  --bt-ind-50:#f3f2f9;
  /* Dritte Akzentlinie (Säule "Betreiben"). Eigenes Token, weil hier
     früher --bt-ind-900 stand - das ist die Überschriftenfarbe und wird
     im Dunkelmodus fast weiß, die Linie war dann nicht mehr erkennbar. */
  --bt-akzent-3:#14376f;
  --bt-ink:#0d0c1b;        /* Footer */
  --bt-ink-2:#1b1b2c;

  /* Handlung. Orange stammt ebenfalls aus dem Logo; der Flächenton ist
     abgedunkelt, damit weisse Schrift darauf 4,7:1 erreicht (WCAG AA). */
  --bt-cta:#d63c0b;
  --bt-cta-hover:#a82e08;
  --bt-cta-tint:#fdf1ec;
  --bt-cta-line:#f3d5c8;
  --bt-on-cta:#fff;        /* Schrift auf der CTA-Fläche */
  --bt-on-ind:#fff;        /* Schrift auf indigo gefüllten Flächen */

  /* Neutral — n0 ist die Seitenfläche, n800 die kräftigste Schrift. */
  --bt-n0:#fff;
  --bt-n50:#f8f9fb;
  --bt-n100:#f3f5f9;
  --bt-n200:#eaedf2;
  --bt-n300:#d7dce6;
  --bt-n500:#7c8496;
  --bt-n600:#5d6472;
  --bt-n800:#2b3040;

  --bt-ok:#7cb15e;
  --bt-ok-tint:#f2f8ee;
  --bt-ok-text:#38561f;

  /* Schrift auf Markenflächen (CTA-Sektion, Hero, Footer). Kippt nie —
     diese Flächen sind in beiden Modi dunkel. */
  --bt-on-brand:#fff;

  /* Schrift auf einer Fläche, die in beiden Modi HELL bleibt: die weiße
     Hover-Füllung der Ghost-Schaltflächen in dunklen Sektionen. Kippt nie,
     sonst stünde im Dunkelmodus fast-weiße Schrift auf Weiß. */
  --bt-on-light:#14376f;

  /* Fremdlogos stehen im Dunkelmodus auf einer hellen Platte, weil sie
     durchweg dunkle Tinte auf Transparenz sind und fremde Marken nicht
     eingefärbt werden dürfen. Hell ist die Platte unsichtbar. */
  --bt-logo-plate:transparent;
  --bt-logo-plate-pad:0;
  /* Im Laufband trägt jedes Logo seine eigene kleine Platte, nicht die Spur -
     sonst entsteht ein durchgehender heller Balken quer über die Seite. */
  --bt-logo-chip-pad:0;

  /* Sichtbarkeitsschalter. Damit braucht eine Regel, die im Dunkelmodus ein
     anderes Element zeigt, nicht selbst doppelt geschrieben zu werden:
     display:var(--bt-nur-hell) genügt. */
  --bt-nur-hell:block;
  --bt-nur-dunkel:none;

  /* Schlagschatten. Im Dunkelmodus trägt Schatten nicht, dort übernimmt
     eine hellere Fläche die Höhenstaffelung. */
  --bt-schatten:0 12px 24px rgba(13,12,27,.08);

  /* Typografie */
  --bt-font:'Open Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --bt-fs-body:1.0625rem;   /* 17px */
  --bt-fs-lead:1.25rem;
  --bt-lh:1.65;

  /* Raster */
  --bt-wrap:1180px;
  --bt-gutter:1.25rem;
  --bt-sec:3.5rem;          /* vertikaler Sektionsabstand, mobil */
}

/* --------------------------------------------------------- Dunkelmodus --- */
/* Die Werte sind durchgerechnet, nicht geschätzt: jede Schriftfarbe erreicht
   auf jeder Fläche mindestens 4,5:1 (WCAG AA). Geprüft wurden n800, n600,
   n500, ind, ind-900, cta und ok gegen n0, n50, n100, ind-50 und ind-800.
   Schwächster Wert: n500 auf ind-800 mit 4,76:1.

   Zwei Blöcke mit identischem Inhalt:
   - @media greift, wenn das Betriebssystem dunkel steht und der Besucher
     nichts eigenes gewählt hat. Der :not([data-theme]) davor verhindert,
     daß die Systemvorgabe eine bewußte Wahl überstimmt.
   - [data-theme="dark"] greift, wenn der Besucher den Schalter benutzt hat. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --bt-ind:#9d97d8;
    --bt-ind-900:#e6e8f5;
    --bt-ind-800:#2a2966;
    --bt-ind-400:#6f6ab0;
    --bt-ind-100:#22233c;
    --bt-ind-50:#1a1b2e;
    --bt-akzent-3:#6f6ab0;
    --bt-ink:#0a0a12;
    --bt-ink-2:#14141f;

    --bt-cta:#ff7a45;
    --bt-cta-hover:#ff9468;
    --bt-cta-tint:#1d1512;
    --bt-cta-line:#4a2a1a;
    --bt-on-cta:#200d03;
    --bt-on-ind:#12131c;

    --bt-n0:#12131c;
    --bt-n50:#171826;
    --bt-n100:#1b1d2b;
    --bt-n200:#2a2c3d;
    --bt-n300:#3a3d52;
    --bt-n500:#949cb2;
    --bt-n600:#aab2c4;
    --bt-n800:#e8eaf0;

    --bt-ok:#8ec96c;
    --bt-ok-tint:#16220f;
    --bt-ok-text:#b9dfa2;

    --bt-logo-plate:#fff;
    --bt-logo-plate-pad:.875rem;
    --bt-logo-chip-pad:.5rem .75rem;

    --bt-nur-hell:none;
    --bt-nur-dunkel:block;

    --bt-schatten:0 12px 24px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --bt-ind:#9d97d8;
  --bt-ind-900:#e6e8f5;
  --bt-ind-800:#2a2966;
  --bt-ind-400:#6f6ab0;
  --bt-ind-100:#22233c;
  --bt-ind-50:#1a1b2e;
  --bt-akzent-3:#6f6ab0;
  --bt-ink:#0a0a12;
  --bt-ink-2:#14141f;

  --bt-cta:#ff7a45;
  --bt-cta-hover:#ff9468;
  --bt-cta-tint:#1d1512;
  --bt-cta-line:#4a2a1a;
  --bt-on-cta:#200d03;
  --bt-on-ind:#12131c;

  --bt-n0:#12131c;
  --bt-n50:#171826;
  --bt-n100:#1b1d2b;
  --bt-n200:#2a2c3d;
  --bt-n300:#3a3d52;
  --bt-n500:#949cb2;
  --bt-n600:#aab2c4;
  --bt-n800:#e8eaf0;

  --bt-ok:#8ec96c;
  --bt-ok-tint:#16220f;
  --bt-ok-text:#b9dfa2;

  --bt-logo-plate:#fff;
  --bt-logo-plate-pad:.875rem;
  --bt-logo-chip-pad:.5rem .75rem;

  --bt-nur-hell:none;
  --bt-nur-dunkel:block;

  --bt-schatten:0 12px 24px rgba(0,0,0,.45);
}

@media (min-width:48em){
  :root{ --bt-gutter:2rem; --bt-sec:5rem; }
}
@media (min-width:64em){
  :root{ --bt-gutter:3rem; --bt-sec:6rem; }
}