/* ============================================================================
   Hyperscale — Design-Tokens für Dark und Light
   ----------------------------------------------------------------------------
   EINZIGE QUELLE für jede Farbe der Website. Wer hier etwas ändert, ändert es
   auf allen Seiten. pages.css, resources.css, legal.css und die eingebetteten
   Stile der handgeschriebenen Seiten definieren KEINE Farbtoken mehr — sie
   verbrauchen nur noch, was hier steht.

   Eingebunden über:
     tools/sync-theme.py  ->  <link> auf allen Unterseiten,
                              wörtlich eingebettet in website/index.html
                              (Startseite laedt bewusst kein externes CSS)

   AUFBAU — drei Blöcke, in dieser Reihenfolge:
     1. `:root`                     Dark Premium, der Standard.
     2. `@media (prefers-color-scheme: light)` auf `:root:not([data-theme=dark])`
        Nur für den Fall ohne gespeicherte Wahl (und ohne JavaScript).
     3. `:root[data-theme="light"]` Die ausdrückliche Wahl gewinnt immer.
   Block 3 muss Block 2 wiederholen — sonst kann der Schalter nicht zurück
   nach Light, wenn das Betriebssystem auf Dark steht.

   REGEL FÜR NEUE SEITEN: keine Hex-Werte, keine rgba()-Literale im Stil einer
   Seite. Fläche, Linie, Schrift, Schatten kommen aus diesen Namen. Für eigene
   Deckkraft die *-rgb-Token benutzen: rgba(var(--accent-rgb),.18).
   ========================================================================== */

:root{
  color-scheme:dark;

  /* ---------- Grundflächen ---------- */
  --bg:#05070d;                       /* Seitengrund */
  --bg-2:#0a0f1a;                     /* abgesetztes Band (Sektionen, CTA) */
  --bg-deep:#04060b;                  /* Footer */
  --bg-rgb:5,7,13;
  --panel:rgba(255,255,255,.03);      /* Karte */
  --panel-2:rgba(255,255,255,.05);    /* Karte, eine Stufe kräftiger */
  --panel-hover:rgba(255,255,255,.055);
  --panel-solid:rgba(8,12,20,.75);    /* Kachel auf gerastertem Grund */
  --panel-raised:rgba(8,12,20,.86);   /* herausgehobene Tafel */
  --inset:rgba(255,255,255,.04);      /* Eingabefeld */
  --inset-hover:rgba(255,255,255,.08);
  --overlay:rgba(8,12,20,.97);        /* Dropdown */
  --overlay-2:rgba(8,12,20,.98);      /* zweite Menü-Ebene */
  --header-bg:rgba(5,7,13,.72);       /* Kopfzeile beim Scrollen */
  --header-solid:rgba(5,7,13,.98);    /* aufgeklapptes Menü */

  /* Deckkraft-Grundfarbe für eigene Flächen: rgba(var(--tint-rgb),.05).
     Dark hellt auf, Light dunkelt ab — beides „hebt sich vom Grund ab". */
  --tint-rgb:255,255,255;

  /* ---------- Linien ---------- */
  --panel-border:rgba(148,196,255,.10);
  --border-soft:rgba(148,196,255,.07);
  --border-strong:rgba(148,196,255,.14);
  --line-rgb:148,196,255;

  /* ---------- Schrift ---------- */
  --text:#e8eef7;
  --text-dim:#8b97ab;
  --text-bright:#ffffff;
  --on-accent:#03131c;                /* Schrift auf Cyan- und Verlaufsflächen */
  --on-accent-rgb:3,19,28;

  /* ---------- Akzent ----------
     --cyan ist der *lesbare* Akzent (Schrift, Icons, Ränder).
     --cyan-vivid ist der dekorative Marken-Cyan (Punkte, Ringe, Leuchten).
     Im Dark sind beide identisch; im Light trennen sie sich, weil #2fd6f0 auf
     Weiß mit 1,6:1 nicht als Schrift taugt, als Signalpunkt aber genau richtig ist. */
  --cyan:#2fd6f0;
  --cyan-vivid:#2fd6f0;
  --cyan-soft:rgba(47,214,240,.14);
  --accent-rgb:47,214,240;
  --indigo:#5b7cfa;
  --indigo-rgb:91,124,250;
  --violet:#8b5cf6;
  --violet-rgb:139,92,246;
  --violet-ink:#c3b5ff;
  --grad:linear-gradient(100deg,#2fd6f0 0%,#5b7cfa 60%,#8b5cf6 100%);

  /* ---------- Semantik ---------- */
  --danger:#ff8a8a;
  --danger-rgb:255,99,99;
  --warn:#ffb450;
  --warn-rgb:255,180,80;

  /* ---------- Schatten ----------
     Dark trägt Tiefe über Helligkeit, nicht über Schatten — deshalb ist
     --shadow-card hier `none`. Light kehrt das um: dort ist der blau getönte
     Schatten das, was die Karte vom Grund abhebt. */
  --shadow-card:none;
  --shadow-card-hover:none;
  --shadow-sm:0 18px 46px rgba(0,0,0,.40);
  --shadow-md:0 24px 60px rgba(0,0,0,.50);
  --shadow-lg:0 40px 100px rgba(0,0,0,.55);
  --glow-btn:0 8px 32px rgba(47,214,240,.28);
  --glow-btn-hover:0 14px 44px rgba(47,214,240,.42);
  --glow-accent:0 0 22px rgba(47,214,240,.45);
  --glow-dot:0 0 12px var(--cyan-vivid);
  --orb-glow:0 0 60px rgba(47,214,240,.55),0 0 140px rgba(59,130,246,.35),inset 0 -18px 40px rgba(3,10,25,.55);
  --hero-glow-a:rgba(47,214,240,.10);
  --hero-glow-b:rgba(91,124,250,.10);

  /* ---------- Illustrationen (res-viz) ---------- */
  --viz-dark:rgba(3,7,14,.72);
  --viz-floor:rgba(0,0,0,.45);

  /* ---------- Hero-Graph (#net, Canvas) ----------
     Das Canvas liest diese Werte zur Laufzeit aus. --net-alpha skaliert alle
     Deckkräfte: auf Weiß braucht dieselbe Linie weniger Alpha, nicht mehr. */
  --net-line-rgb:47,214,240;
  --net-hub-rgb:91,124,250;
  --net-alpha:1;

  /* ---------- Wortmarke ----------
     Das Logo-PNG ist weiß auf transparent. Im Light wird sein Alphakanal als
     Maske über dieser Farbe benutzt (siehe .logo img weiter unten). */
  --logo-ink:#e8eef7;

  /* ---------- Schalter ---------- */
  --switch-track:rgba(255,255,255,.06);
  --switch-knob:linear-gradient(140deg,#2fd6f0,#5b7cfa);

  /* ---------- Nicht farbige Token ----------
     Stehen hier, damit es genau eine Stelle gibt. Die @font-face-Regeln bleiben
     in den einbindenden Dateien: deren Pfade zu /assets/fonts/ sind relativ
     verschieden. Motion-Sprache nach motion.dev: scharfer Start, langer
     Auslauf, kurze Dauern, nur transform/opacity/clip-path. */
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --radius:20px;
  --ease-out:cubic-bezier(.25,0,0,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.18s;
  --dur-base:.28s;
  --dur-slow:.55s;
  --stagger:60ms;

  /* Dauer der Farbüberblendung beim Umschalten. Siehe `.theme-anim` unten. */
  --dur-theme:.32s;
}

/* ---------------------------------------------------------------------------
   Übergang beim Umschalten.

   Der Wechsel muss geschlossen wirken: blendet nur der Seitengrund über und
   Karten, Footer und Dropdowns springen, sieht es nach zwei Themes aus statt
   nach einem. Also alle Flächen gemeinsam.

   Deshalb ausnahmsweise ein Selektor auf `*` — aber nur, solange das Startskript
   `.theme-anim` gesetzt hat (rund 360 ms um den Klick herum), und nur für vier
   Farbeigenschaften. `transform` und `opacity` stehen bewusst NICHT darin:
   eine Kurzschreibweise mit !important auf `*` würde sonst Staffel-Verzögerungen
   und Hover-Bewegungen für die Dauer des Wechsels überschreiben.
   ------------------------------------------------------------------------ */
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after{
  transition:background-color var(--dur-theme) var(--ease-out),
             border-color var(--dur-theme) var(--ease-out),
             color var(--dur-theme) var(--ease-out),
             fill var(--dur-theme) var(--ease-out) !important;
}
@media(prefers-reduced-motion:reduce){
  .theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:none!important}
}

/* ---------------------------------------------------------------------------
   Light Premium — Off-White, Navy, Hyperscale-Blau.
   Kein aufgehelltes Dark: eigene Flächenlogik (weiße Karte auf Off-White,
   blau getönter Schatten statt Leuchten), gleiche Marke.
   Die Werte stehen einmal in --hs-light-* und werden von beiden Auslösern
   (Systemeinstellung, ausdrückliche Wahl) übernommen.
   ------------------------------------------------------------------------ */

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

    --bg:#f5f8fc;
    --bg-2:#eaf0f8;
    --bg-deep:#e7edf6;
    --bg-rgb:245,248,252;
    --panel:#ffffff;
    --panel-2:#f2f6fb;
    --panel-hover:#ffffff;
    --panel-solid:#ffffff;
    --panel-raised:#ffffff;
    --inset:#ffffff;
    --inset-hover:#eef3fa;
    --overlay:rgba(255,255,255,.98);
    --overlay-2:rgba(255,255,255,.99);
    --header-bg:rgba(245,248,252,.82);
    --header-solid:rgba(250,252,255,.99);
    --tint-rgb:17,44,86;

    --panel-border:rgba(17,44,86,.13);
    --border-soft:rgba(17,44,86,.09);
    --border-strong:rgba(17,44,86,.17);
    --line-rgb:17,44,86;

    --text:#0b1b31;
    --text-dim:#4a5b70;
    --text-bright:#05101f;
    --on-accent:#ffffff;
    --on-accent-rgb:255,255,255;

    --cyan:#0a677d;
    --cyan-vivid:#0eaecd;
    --cyan-soft:rgba(10,103,125,.06);
    --accent-rgb:10,103,125;
    --indigo:#3757d8;
    --indigo-rgb:55,87,216;
    --violet:#7136e0;
    --violet-rgb:113,54,224;
    --violet-ink:#5b21b6;
    --grad:linear-gradient(100deg,#0b6f8a 0%,#2b55cc 58%,#7c3aed 100%);

    --danger:#c0392f;
    --danger-rgb:192,57,47;
    --warn:#9a5b06;
    --warn-rgb:154,91,6;

    --shadow-card:0 1px 2px rgba(17,44,86,.05),0 10px 24px rgba(17,44,86,.06);
    --shadow-card-hover:0 2px 4px rgba(17,44,86,.06),0 18px 40px rgba(17,44,86,.10);
    --shadow-sm:0 10px 26px rgba(17,44,86,.09);
    --shadow-md:0 18px 44px rgba(17,44,86,.13);
    --shadow-lg:0 30px 70px rgba(17,44,86,.15);
    --glow-btn:0 8px 24px rgba(11,110,150,.26);
    --glow-btn-hover:0 14px 34px rgba(11,110,150,.34);
    --glow-accent:0 0 18px rgba(14,174,205,.32);
    --glow-dot:0 0 10px rgba(14,174,205,.55);
    --orb-glow:0 0 44px rgba(14,174,205,.32),0 22px 60px rgba(17,44,86,.18),inset 0 -18px 40px rgba(3,10,25,.45);
    --hero-glow-a:rgba(11,140,170,.09);
    --hero-glow-b:rgba(55,87,216,.07);

    --viz-dark:rgba(17,44,86,.10);
    --viz-floor:rgba(17,44,86,.07);

    --net-line-rgb:14,110,140;
    --net-hub-rgb:47,80,190;
    --net-alpha:1.55;

    --logo-ink:#0b1b31;

    --switch-track:rgba(17,44,86,.07);
    --switch-knob:linear-gradient(140deg,#0b6f8a,#2b55cc);
  }
}

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

  --bg:#f5f8fc;
  --bg-2:#eaf0f8;
  --bg-deep:#e7edf6;
  --bg-rgb:245,248,252;
  --panel:#ffffff;
  --panel-2:#f2f6fb;
  --panel-hover:#ffffff;
  --panel-solid:#ffffff;
  --panel-raised:#ffffff;
  --inset:#ffffff;
  --inset-hover:#eef3fa;
  --overlay:rgba(255,255,255,.98);
  --overlay-2:rgba(255,255,255,.99);
  --header-bg:rgba(245,248,252,.82);
  --header-solid:rgba(250,252,255,.99);
  --tint-rgb:17,44,86;

  --panel-border:rgba(17,44,86,.13);
  --border-soft:rgba(17,44,86,.09);
  --border-strong:rgba(17,44,86,.17);
  --line-rgb:17,44,86;

  --text:#0b1b31;
  --text-dim:#4a5b70;
  --text-bright:#05101f;
  --on-accent:#ffffff;
  --on-accent-rgb:255,255,255;

  --cyan:#0a677d;
  --cyan-vivid:#0eaecd;
  --cyan-soft:rgba(10,103,125,.06);
  --accent-rgb:10,103,125;
  --indigo:#3757d8;
  --indigo-rgb:55,87,216;
  --violet:#7136e0;
  --violet-rgb:113,54,224;
  --violet-ink:#5b21b6;
  --grad:linear-gradient(100deg,#0b6f8a 0%,#2b55cc 58%,#7c3aed 100%);

  --danger:#c0392f;
  --danger-rgb:192,57,47;
  --warn:#9a5b06;
  --warn-rgb:154,91,6;

  --shadow-card:0 1px 2px rgba(17,44,86,.05),0 10px 24px rgba(17,44,86,.06);
  --shadow-card-hover:0 2px 4px rgba(17,44,86,.06),0 18px 40px rgba(17,44,86,.10);
  --shadow-sm:0 10px 26px rgba(17,44,86,.09);
  --shadow-md:0 18px 44px rgba(17,44,86,.13);
  --shadow-lg:0 30px 70px rgba(17,44,86,.15);
  --glow-btn:0 8px 24px rgba(11,110,150,.26);
  --glow-btn-hover:0 14px 34px rgba(11,110,150,.34);
  --glow-accent:0 0 18px rgba(14,174,205,.32);
  --glow-dot:0 0 10px rgba(14,174,205,.55);
  --orb-glow:0 0 44px rgba(14,174,205,.32),0 22px 60px rgba(17,44,86,.18),inset 0 -18px 40px rgba(3,10,25,.45);
  --hero-glow-a:rgba(11,140,170,.09);
  --hero-glow-b:rgba(55,87,216,.07);

  --viz-dark:rgba(17,44,86,.10);
  --viz-floor:rgba(17,44,86,.07);

  --net-line-rgb:14,110,140;
  --net-hub-rgb:47,80,190;
  --net-alpha:1.55;

  --logo-ink:#0b1b31;

  --switch-track:rgba(17,44,86,.07);
  --switch-knob:linear-gradient(140deg,#0b6f8a,#2b55cc);
}

/* ---------------------------------------------------------------------------
   Wortmarke — hyperscale-logo.png ist weiß auf transparent (geprüft: reine
   #ffffff-Pixel, Glyphenform steckt im Alphakanal). Auf hellem Grund wäre sie
   unsichtbar.

   Kein zweites Logo-PNG und kein `filter`-Kunststück: der Alphakanal der
   vorhandenen Datei dient als Maske über einer Farbfläche. Gleiche Geometrie,
   Farbe aus dem Token, ein einziges Asset.

   Die Maske sitzt auf einem Pseudo-Element, nicht auf dem Bildelement selbst —
   dort lägen dessen weiße Pixel *über* der maskierten Fläche und das Logo bliebe
   weiß. Also: Bild unsichtbar schalten (behält seinen Platz im Layout), Maske
   darüberlegen.

   `.no-img` ausgenommen: schlägt das Laden fehl, setzt onerror diese Klasse und
   die Textfassung übernimmt — dann darf hier nichts gemalt werden.
   ------------------------------------------------------------------------ */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  :root[data-theme="light"] .logo:not(.no-img){position:relative}
  :root[data-theme="light"] .logo:not(.no-img) img{visibility:hidden}
  :root[data-theme="light"] .logo:not(.no-img)::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--logo-ink);
    -webkit-mask:url("/assets/hyperscale-logo.png") left center/contain no-repeat;
    mask:url("/assets/hyperscale-logo.png") left center/contain no-repeat;
  }
}

/* ---------------------------------------------------------------------------
   Theme-Schalter — 62×32, Schiene mit gleitendem Knopf.
   Sitzt in .nav-cta (Hauptnavigation) und in .nav der Rechtsseiten.
   Beide Symbole bleiben sichtbar; der Knopf markiert den aktiven Zustand,
   damit auf einen Blick erkennbar ist, worauf der Schalter umschaltet.
   ------------------------------------------------------------------------ */
.theme-toggle{
  position:relative;flex:none;
  display:inline-flex;align-items:center;justify-content:space-between;
  width:62px;height:32px;padding:0 7px;
  background:var(--switch-track);
  border:1px solid var(--panel-border);
  border-radius:100px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:background var(--dur-base,.28s) var(--ease-out,ease),
             border-color var(--dur-base,.28s) var(--ease-out,ease);
}
.theme-toggle:hover{border-color:rgba(var(--accent-rgb),.38)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.theme-toggle svg{
  position:relative;z-index:1;width:15px;height:15px;flex:none;
  color:var(--text-dim);
  transition:color var(--dur-base,.28s) var(--ease-out,ease);
}
/* Der Knopf liegt über dem Symbol des aktiven Modus. */
.theme-toggle::after{
  content:"";position:absolute;top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;
  background:var(--switch-knob);
  box-shadow:var(--glow-accent);
  transition:transform var(--dur-base,.28s) var(--ease-expo,cubic-bezier(.16,1,.3,1));
}
/* Dark: Knopf links über dem Mond, Mond dunkel darauf, Sonne gedimmt. */
.theme-toggle .ic-moon{color:var(--on-accent)}
:root[data-theme="light"] .theme-toggle::after{transform:translateX(30px)}
:root[data-theme="light"] .theme-toggle .ic-moon{color:var(--text-dim)}
:root[data-theme="light"] .theme-toggle .ic-sun{color:var(--on-accent)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle::after{transform:translateX(30px)}
  :root:not([data-theme="dark"]) .theme-toggle .ic-moon{color:var(--text-dim)}
  :root:not([data-theme="dark"]) .theme-toggle .ic-sun{color:var(--on-accent)}
}
@media(prefers-reduced-motion:reduce){
  .theme-toggle,.theme-toggle::after,.theme-toggle svg{transition:none}
}

/* Auf dem Handy ist die Kopfzeile fast leer, der Schalter aber nur 32 px hoch.
   Die sichtbare Schiene bleibt schlank; angetippt wird ein 44 px hoher Bereich
   darum herum. `::before` ist frei — den Knopf malt `::after`. */
@media(max-width:680px){
  .theme-toggle::before{content:"";position:absolute;inset:-6px -2px;border-radius:100px}
}

/* Die Rechtsseiten und die 404 tragen eine schlanke Kopfzeile ohne .nav-cta.
   Dort steht der Schalter direkt hinter dem Zurück-Link. */
.nav .theme-toggle{flex:none}
@media(max-width:520px){
  /* Auf schmalen Geräten weicht der Text des Zurück-Links, der Pfeil genügt. */
  .nav .back{font-size:0}
  .nav .back::before{content:"\2190";font-size:15px}
}