/* =========================================================================
   Zero One IT - Themenwerte fuer Dunkel und Hell
   =========================================================================
   Diese Datei haelt ALLE farblichen Stellschrauben beider Themen an einem
   Ort. Die Seiten bringen ihren eigenen :root-Block mit den bekannten
   Dunkelwerten mit; der bleibt unangetastet. Hier stehen zwei Dinge:

   1. Die zusaetzlichen Grundtoene, die es vorher nur hartkodiert gab
      (Schatten, Schleier, Waesche, Warnfarben). Sie stehen auf :root mit
      genau den Werten, die bisher im Stylesheet standen - das Dunkelbild
      aendert sich dadurch um kein Pixel.
   2. Der komplette Hellsatz auf :root[data-theme="light"]. Das
      Attributselektor-Gewicht (0,2,0) liegt ueber dem blanken :root (0,1,0),
      deshalb gewinnt Hell unabhaengig davon, in welcher Reihenfolge die
      Seite ihre Stylesheets laedt.

   Grundsatz bei den Alphawerten: statt jeden einzelnen rgba-Aufruf zu
   verdoppeln, steht nur das Farbtripel in einer Variablen. Die Deckkraft
   bleibt an der Fundstelle. Aus
       rgba(9,13,24,.46)
   wird
       rgba(var(--grund-rgb),.46)
   und beide Themen behalten ihre eigene Abstufung, ohne dass irgendeine
   Komponente doppelt gepflegt werden muss.
   ========================================================================= */

:root{
  /* --- Grundtoene als Tripel, damit die Deckkraft an der Fundstelle bleibt --- */
  --grund-rgb:9,13,24;          /* Seitengrund; traegt Schleier und Textschatten */
  --flaeche-rgb:16,23,42;       /* --surface als Tripel */
  --hoch-rgb:26,36,56;          /* --surface-up als Tripel */
  --schatten-rgb:0,0,0;         /* Schlagschatten */
  --waesche-rgb:240,245,255;    /* feine Aufhellungen und Haarlinien auf dunklem Grund */
  --akzent-rgb:0,201,167;       /* identisch in beiden Themen, nur hier zentral */

  /* --- Abgeleitete Flaechen --- */
  --bg-tief:#070B14;            /* tiefer als --bg, fuer Verlaufsenden */
  --bg-tief-2:#0B1120;
  --schleier:rgba(3,7,14,.78);  /* Hintergrund hinter Dialogen */
  --schleier-weich:rgba(5,8,16,.7);

  /* --- Akzent in seinen Rollen --- */
  --accent-text:#00C9A7;        /* Akzent als Schriftfarbe */
  --accent-hell:#00E4C0;        /* aufgehellter Akzent, Hover und Verlaufsspitzen */
  --accent-ink:#00261F;         /* Schrift auf gefuellter Akzentflaeche */
  --accent-ink-2:#003328;

  /* --- Neutrale Zwischentoene --- */
  --gedaempft:#3D4F6A;          /* sehr zurueckgenommene Linien und Ziffern */
  --keks-scheibe:#141C30;       /* Traegerkreis des Keks-Symbols im Consent-Dialog */

  /* --- Signalfarben --- */
  --warn:#FFA94D;
  --warn-rgb:255,169,77;
  --fehler:#FF6B6B;
  --fehler-hell:#FF8B8B;
  --fehler-zart:#FFC9C9;
  --fehler-rand:#5C2B2B;
  --fehler-rgb:255,107,107;
  --fehler-hell-rgb:255,139,139;

  /* --- Bewegung des Schalters --- */
  --thema-kurve:cubic-bezier(.4,.16,.2,1);
  color-scheme:dark;
}

/* =========================================================================
   HELL - eigenstaendiges Zero One IT Tagbild
   =========================================================================
   Kein Weiss auf Schwarz umgedreht. Der Grund ist ein kuehles Off-White mit
   leichtem Blaustich, die Flaechen heben sich nach oben hin auf, bis Weiss.
   Der Akzent bleibt Teal - nur eine Spur tiefer, weil #00C9A7 auf hellem
   Grund als Schrift nur auf 2,9:1 kommt. Ueberschriften und Fliesstext
   sitzen im Marken-Navy.

   Kontraste (WCAG, auf --bg gemessen):
     --text-1  #0B1426 auf #EEF1F7 = 16,8:1
     --text-2  #53658A auf #EEF1F7 =  5,0:1
     --text-3  #59698A auf #EEF1F7 =  4,9:1
     --accent-text #00786A auf #EEF1F7 = 4,7:1
   ========================================================================= */

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

  --bg:#EEF1F7;
  --surface:#F8FAFD;
  --surface-up:#FFFFFF;
  --accent:#00A98F;
  --accent-dim:rgba(0,169,143,0.10);
  --accent-glow:rgba(0,169,143,0.07);
  --text-1:#0B1426;
  --text-2:#53658A;
  --text-3:#59698A;
  --border:#D6DEEB;
  --border-accent:rgba(0,169,143,0.34);

  --grund-rgb:238,241,247;
  --flaeche-rgb:248,250,253;
  --hoch-rgb:255,255,255;
  --schatten-rgb:25,39,66;
  --waesche-rgb:11,20,38;
  --akzent-rgb:0,169,143;

  --bg-tief:#E3E8F1;
  --bg-tief-2:#E8ECF4;
  --schleier:rgba(20,30,52,.42);
  --schleier-weich:rgba(20,30,52,.34);

  --accent-text:#00786A;
  --accent-hell:#00C0A2;
  --accent-ink:#00261F;
  --accent-ink-2:#00261F;

  --gedaempft:#93A1B8;
  --keks-scheibe:#C9D3E3;

  --warn:#A65A00;
  --warn-rgb:166,90,0;
  --fehler:#C02626;
  --fehler-hell:#A81F1F;
  --fehler-zart:#7A1616;
  --fehler-rand:#E9B9B9;
  --fehler-rgb:192,38,38;
  --fehler-hell-rgb:168,31,31;
}

/* Schatten wirken auf hellem Grund schnell schmutzig. Die Deckkraft steht
   an der Fundstelle und laesst sich dort nicht pro Thema aendern - deshalb
   nimmt Hell die Staerke global um gut die Haelfte zurueck. */
:root[data-theme="light"] body{
  --schatten-rgb:25,39,66;
}

/* =========================================================================
   TAG-/NACHT-SCHALTER
   =========================================================================
   Eine Pille mit gleitendem Knopf. Dunkel zeigt sie einen Mond, hell eine
   Sonne. Der Mond entsteht nicht als Bild, sondern als Kreis, aus dem ein
   zweiter Kreis in Spurfarbe eine Sichel schneidet - beim Wechsel faehrt
   dieser Schneidekreis heraus und der Mond wird zur vollen Sonnenscheibe.

   Die Pille ist 56x30. Die Schaltflaeche darum ist 44x44 gross, damit das
   Beruehrungsziel auch am Daumen die uebliche Mindestgroesse hat.
   ========================================================================= */

.thema-schalter{
  --spur-b:56px;
  --spur-h:30px;
  --knopf:22px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--spur-b);
  min-width:var(--spur-b);
  height:44px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}

.thema-spur{
  position:relative;
  display:block;
  width:var(--spur-b);
  height:var(--spur-h);
  border-radius:100px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 3px rgba(var(--schatten-rgb),.28);
  transition:background .45s var(--thema-kurve),
             border-color .45s var(--thema-kurve),
             box-shadow .45s var(--thema-kurve);
}

/* Der Akzentring der Vorlage: hier in Teal, und er wird nur bei Hover,
   Fokus und waehrend des Umschaltens sichtbar - im Ruhezustand bleibt der
   Schalter zurueckhaltend. */
.thema-spur::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:100px;
  border:2px solid rgba(var(--akzent-rgb),.55);
  opacity:0;
  transform:scale(.88);
  transition:opacity .3s var(--thema-kurve),transform .3s var(--thema-kurve);
  pointer-events:none;
}
.thema-schalter:hover .thema-spur::after{opacity:.6;transform:scale(1)}
.thema-schalter:focus-visible .thema-spur::after{opacity:1;transform:scale(1)}
.thema-schalter:focus-visible{outline:none}
.thema-schalter:focus-visible .thema-spur{border-color:var(--accent)}

.thema-knopf{
  position:absolute;
  top:50%;
  left:3px;
  width:var(--knopf);
  height:var(--knopf);
  margin-top:calc(var(--knopf) / -2);
  border-radius:50%;
  background:#E7EDFB;
  box-shadow:0 2px 6px rgba(var(--schatten-rgb),.45);
  overflow:hidden;
  transition:transform .55s var(--thema-kurve),
             background .45s var(--thema-kurve),
             box-shadow .45s var(--thema-kurve);
}

/* Der Schneidekreis, der aus der Scheibe eine Sichel macht. */
.thema-knopf::before{
  content:"";
  position:absolute;
  top:-28%;
  right:-32%;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--surface);
  transition:transform .55s var(--thema-kurve),background .45s var(--thema-kurve);
}

.thema-krater{
  position:absolute;
  border-radius:50%;
  background:rgba(var(--schatten-rgb),.16);
  transition:opacity .3s var(--thema-kurve);
}
.thema-krater-a{width:4px;height:4px;left:22%;top:52%}
.thema-krater-b{width:3px;height:3px;left:44%;top:72%}

/* --- Zustand HELL: Knopf rechts, Sichel weg, Scheibe wird zur Sonne --- */
.thema-schalter[aria-checked="true"] .thema-knopf{
  transform:translateX(calc(var(--spur-b) - var(--knopf) - 6px));
  background:var(--accent);
  box-shadow:0 2px 10px rgba(var(--akzent-rgb),.55),
             0 0 0 4px rgba(var(--akzent-rgb),.16);
}
.thema-schalter[aria-checked="true"] .thema-knopf::before{transform:translate(120%,-120%)}
.thema-schalter[aria-checked="true"] .thema-krater{opacity:0}
.thema-schalter[aria-checked="true"] .thema-spur{
  background:var(--surface-up);
  border-color:var(--border);
}

/* Die Pille sitzt in der Navigation neben anderen runden Elementen und
   bekommt dort denselben Abstand wie der Intern-Knopf. */
/* Die Rechtsseiten bringen keine eigene .nav-cta-Regel mit. */
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .thema-schalter{margin-right:-2px}
.mobile-nav-top .thema-schalter{margin-right:auto}

@media(prefers-reduced-motion:reduce){
  .thema-spur,.thema-spur::after,.thema-knopf,.thema-knopf::before,.thema-krater{
    transition:none !important;
  }
}

/* =========================================================================
   LOGO-PAAR
   =========================================================================
   Der Schriftzug des Logos ist weiss. Auf hellem Grund verschwindet er.
   Deshalb liegt daneben dieselbe Datei mit dem Schriftzug im Marken-Navy -
   Bildzeichen, Form und Teal bleiben unangetastet, es ist die uebliche
   Positiv-/Negativfassung eines Logos. Die Umschaltung laeuft ueber CSS
   und nicht ueber JavaScript: so blitzt beim Laden nichts auf und es
   stimmt auch, wenn kein Skript laeuft.
   ========================================================================= */
/* Die Seiten setzen .logo-img{display:block} in ihrem eigenen Stylesheet,
   und das steht im Dokument NACH dieser Datei. Bei gleichem Gewicht
   gewaenne dort die spaetere Regel und es waeren beide Logos gleichzeitig
   zu sehen. Das vorangestellte :root hebt das Gewicht auf (0,2,0) und
   entscheidet die Sache unabhaengig von der Ladereihenfolge. */
:root .logo-hell{display:none}
:root[data-theme="light"] .logo-dunkel{display:none}
:root[data-theme="light"] .logo-hell{display:block}

/* =========================================================================
   WEICHES SCROLLEN (Lenis)
   =========================================================================
   Die wenigen Regeln, die die Bibliothek braucht. Sie stehen hier statt in
   einer eigenen Datei, damit keine zusaetzliche Anfrage entsteht.

   Wichtig ist die erste: Solange Lenis laeuft, muss das native weiche
   Scrollen des Browsers aus sein. Sonst animieren zwei Mechanismen
   denselben Sprung und es ruckelt. Ohne Lenis - auf dem Telefon und bei
   reduzierter Bewegung - bleibt scroll-behavior:smooth aus dem Seitenkopf
   unveraendert in Kraft.
   ========================================================================= */
html.lenis{scroll-behavior:auto !important}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}