/* ============================================================
   siduvia — Ergänzende Styles
   Baut auf styles.css (Tokens, Foundation) auf.
   ============================================================ */

/* -------------------- Übergänge (global) --------------------
   Zwei Dauern, drei Kurven:
     short  150ms  Farbwechsel (color, background-color, Rand-Farbe …)
     long   250ms  Bewegung und Größe (translate, width, height,
                   padding, Position …)
     ease          alle anderen Übergänge (Standard)
     ease-out      Elemente, die erscheinen (schnell los, weich
                   auslaufen) — z. B. mobiles Menü, Flyout
     ease-in       Elemente, die verschwinden (weich los, schnell weg)
                   — z. B. Menü/Flyout schließen
                   (Accordion: ease in beide Richtungen)
   Nutzung: transition: color var(--transition-short),
                        padding var(--transition-long)
   Bei „Bewegung reduzieren" im System: sofort, ohne Übergang.
   interpolate-size erlaubt Übergänge auf/von "auto" (z. B. Höhe beim
   Aufklappen) — bisher Chrome/Edge, sonst ohne Übergang.
------------------------------------------------------------- */
:root {
  --transition-duration-short: 150ms;
  --transition-duration-long: 250ms;
  --transition-easing: ease;
  --transition-easing-out: ease-out;
  --transition-easing-in: ease-in;
  --transition-short: var(--transition-duration-short) var(--transition-easing);
  --transition-long: var(--transition-duration-long) var(--transition-easing);
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration-short: 0ms;
    --transition-duration-long: 0ms;
  }
}

/* -------------------- Ecken: sanfte Rundung --------------------
   Radien 6 und 16 (Cards, Felder, Fenster …): Krümmung setzt ganz
   leicht fließend ein wie die „continuous corners" bei iOS (leichte
   Superellipse; corner-shape aus CSS Borders 4 — Browser ohne
   Unterstützung zeigen normale Rundung). Radien bleiben die Tokens.
   Pillen (100) und 2px bleiben normal rund.
------------------------------------------------------------------ */
:root {
  --corner-shape-soft: superellipse(1.15);
}

/* -------------------- Tap-Highlight (iOS/Android) --------------------
   Kein dunkles Feld beim Antippen von Links, Buttons, Inputs,
   Accordions … — Zustände zeigen die Komponenten selbst (Hover,
   Focus, Active). Wird vererbt, gilt also für alles.
------------------------------------------------------------------------ */
html {
  -webkit-tap-highlight-color: transparent;
}

/* -------------------- Controls: Text nicht auswählbar --------------------
   Buttons, Auswahlen, Regler, Menüs … — Klicken, Doppelklicken und
   langes Drücken (Touch) markieren keinen Text. Eingabefelder für Text
   bleiben auswählbar. -webkit-touch-callout: kein iOS-Kontextmenü beim
   langen Drücken (nur bei Controls, nicht bei Links).
---------------------------------------------------------------------------- */
:is(
  button, select, summary, label,
  input[type='range'], input[type='checkbox'], input[type='radio'],
  [role='button'], [role='tab'], [role='option'],
  .btn, .btn-group, .tag, .list-item, .accordion__header,
  .field__label, .range, .range__value,
  .header__nav a, .sidemenu a, .footer__nav a
) {
  -webkit-user-select: none;
  user-select: none;
}

:is(
  button, select, summary, label,
  [role='button'], [role='tab'], [role='option'],
  .btn-group, .tag, .accordion__header, .range
) {
  -webkit-touch-callout: none;
}

/* -------------------- Fluide Typografie --------------------
   Unter 375px (kleine Handys): eigene feste Stufe.
   Mobile (375–639px): feste Größen aus den Dichte-Tokens.
   Ab 640px skalieren die Headlines stufenlos per clamp() von den
   Tablet- zu den Desktop-Werten (rem-Tokens):
                 h1   h2   h3   h4   h5
     < 375px  XS 28   24   20   20   16   (fest)
     < 640px  M  32   28   24   20   16   (fest)
     640px    T  40   32   28   24   16
     1280px   D  64   40   32   24   16
   (h1 Desktop bewusst 64 statt Token 48 — Hero-Headline)
   Formel: min + (100vw - 640px) * Differenz / 640  (640 = 1280 - 640)
   Ändern sich Werte, die Differenz in der Formel mit anpassen.
   h4, h5, p, label ab Tablet fest. Nur Bildschirm — Druck behält
   die Print-Größen.
------------------------------------------------------------- */
@media screen and (max-width: 374px) {
  :root {
    --typography-font-size-h1: var(--rem-7x); /* 28 */
    --typography-font-size-h2: var(--rem-6x); /* 24 */
    --typography-font-size-h3: var(--rem-5x); /* 20 */
    --typography-font-size-h4: var(--rem-5x); /* 20 */
  }
}

@media screen and (min-width: 640px) {
  :root {
    /* h1: 40 → 64 */
    --typography-font-size-h1: clamp(var(--rem-10x), calc(var(--rem-10x) + (100vw - 640px) * 24 / 640), var(--rem-16x));
    /* h2: 32 → 40 */
    --typography-font-size-h2: clamp(var(--rem-8x), calc(var(--rem-8x) + (100vw - 640px) * 8 / 640), var(--rem-10x));
    /* h3: 28 → 32 */
    --typography-font-size-h3: clamp(var(--rem-7x), calc(var(--rem-7x) + (100vw - 640px) * 4 / 640), var(--rem-8x));
    /* h4: 24 fest */
    --typography-font-size-h4: var(--rem-6x);
  }
}

/* -------------------- Label small --------------------
   Kleine Beschriftung über Tags: <label><small>…</small></label>
   (Token label-small; Größen nur über HTML-Tags) */
label small {
  font-size: var(--typography-font-size-label-small);
}

/* -------------------- Hoch-/Tiefstellung (Fußnoten) --------------------
   Suisse Intl hat eigene Glyphen für hoch- und tiefgestellte Ziffern
   und Zeichen (OpenType sups/subs). Statt der Browser-Nachbildung
   (kleinere Schrift, angehoben → zu dünn, Zeile wird höher) die
   Glyphen der Schrift: gleiche Strichstärke, Zeilenhöhe bleibt.
   Ziffern tauscht main.js zusätzlich gegen Unicode-Zeichen (¹ ² ³ …):
   In Light und Bold fehlen bei sups die Ziffern 1–3.
------------------------------------------------------------------------- */
sup,
sub {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

sup {
  font-feature-settings: 'sups' 1;
}

sub {
  font-feature-settings: 'subs' 1;
}

/* -------------------- Listen (Aufzählungen) --------------------
   Alle Inhaltslisten (<ul>/<ol> ohne role — Menüs und Komponenten-
   Listen haben role="list" und bleiben unberührt). Kein Einzug: das
   Zeichen steht bündig links, umbrechende Zeilen fluchten mit dem Text.
   Zeichen vertikal mittig zur ersten Zeile; Abstand Zeichen → Text
   bei allen Varianten 8px (Breite je Variante = Breite des Zeichens).
     <ul>                  Punkt 4px, Primary
     <ul class="list--arrow">  Pfeil → aus der Schrift
     <ol>                  Zahl (Ziffern der Schrift)
     <ul class="list--icon">   Icon aus der Icon-Bibliothek je Eintrag:
                           <li><s-icon name="checkmark--outline"></s-icon><span>…</span></li>
------------------------------------------------------------------ */
/* registriert → an der Liste in px aufgelöst (1lh = Zeilenhöhe des
   Texts), nicht erst im Zeichen mit kleinerer Schrift */
@property --list-line {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --list-marker-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

:is(ul, ol):not([role]) {
  --list-line: 1lh;
  --list-marker-w: var(--rem-1x);
  --list-marker-gap: var(--rem-2x);

  /* Abstand zwischen den Einträgen an der Liste (nicht per Margin am
     Eintrag): halber Container-Abstand, wie in der USP-Card */
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-spacing-container-gap-1x) / 2);
  padding: 0;
  list-style: none;
}

/* Text rückt um Zeichen + Abstand ein; das Zeichen sitzt absolut links
   (Inline-Inhalte wie <sup> oder Links bleiben im Textfluss) */
:is(ul, ol):not([role]) > li {
  position: relative;
  padding-inline-start: calc(var(--list-marker-w) + var(--list-marker-gap));
}

/* Zeichen: so hoch wie die erste Zeile, Inhalt darin mittig */
:is(ul, ol):not([role]) > li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--list-marker-w);
  height: var(--list-line);
}

/* Punkt 4px, Primary */
ul:not([role]):not(.list--arrow, .list--icon) > li::before {
  content: '';
  background: radial-gradient(circle, var(--typography-color-text-primary) var(--rem-0-5x), transparent calc(var(--rem-0-5x) + 0.5px));
}

/* Pfeil (Glyphe der Schrift) */
/* Breite = Breite der Glyphe (0,8em) → Abstand zum Text wie beim Punkt */
ul.list--arrow:not([role]) {
  --list-marker-w: 0.8em;
}

ul.list--arrow:not([role]) > li::before {
  content: '→';
  justify-items: start;
  color: var(--typography-color-text-primary);
  /* Pfeil sitzt in der Glyphe etwas tief → optisch mittig zur Zeile */
  translate: 0 -0.1em;
}

/* Zahl (Ziffern der Schrift). Rechtsbündig mit Proportionalziffern →
   jede Zahl endet gleich weit vor dem Text (Abstand wie beim Punkt).
   Breite = eine Ziffer, ab 10 Einträgen zwei. */
ol:not([role]) {
  --list-marker-w: 1ch;
}

ol:not([role]):has(> li:nth-child(10)) {
  --list-marker-w: 2ch;
}

ol:not([role]) > li::before {
  content: counter(list-item);
  justify-items: end;
  color: var(--typography-color-text-primary);
}

/* Icon aus der Bibliothek: erstes Kind ist das <s-icon> */
/* Icon 16px; die Carbon-Icons haben 1px Rand in der Grafik → Icon
   1px nach links, Breite 14px = sichtbare Breite → Abstand wie beim Punkt */
ul.list--icon:not([role]) {
  --list-marker-w: calc(var(--rem-1rem) * 14 / 16);
}

ul.list--icon:not([role]) > li > s-icon:first-child {
  position: absolute;
  top: 0;
  left: calc(var(--rem-1rem) / -16);
  display: flex;
  align-items: center;
  width: var(--rem-1rem);
  height: var(--list-line);
}

/* -------------------- Maximale Inhaltsbreite --------------------
   Ab 1920px Viewport wächst der Inhalt nicht weiter, er bleibt
   zentriert. Flächen (Hero, Footer, Header) laufen weiter über die
   volle Breite — eingefärbte Sections im Inhalt nicht (s. u.).
   Begrenzt wird über den Seitenrand:
     --page-gutter = normaler Seitenrand, ab 1920px zusätzlich
                     die Hälfte des Überstands.
   100% bezieht sich auf das jeweilige Element (volle Breite).
   Safe-Area (viewport-fit=cover, iPhone im Querformat: Kamera-
   aussparung links/rechts): der Rand ist mindestens Aussparung +
   normaler Seitenrand, je Seite getrennt.
     --page-gutter-start / --page-gutter-end
------------------------------------------------------------------ */
:root {
  --page-max: 1920px;
  --page-gutter: max(
    var(--layout-spacing-container-padding),
    calc((100% - var(--page-max)) / 2 + var(--layout-spacing-container-padding))
  );
  --page-gutter-start: max(var(--page-gutter), calc(env(safe-area-inset-left, 0px) + var(--layout-spacing-container-padding)));
  --page-gutter-end: max(var(--page-gutter), calc(env(safe-area-inset-right, 0px) + var(--layout-spacing-container-padding)));
}

.grid {
  padding-inline: var(--page-gutter-start) var(--page-gutter-end);
}

/* Eingefärbte Sections im Inhalt (nicht die Heroes oben, nicht der
   Footer): Fläche nur bis zum Seitenrand der Inhaltsbreite — ab 1920px
   nicht weiter hinaus, zentriert. Seitenrand darin wieder der normale
   (100% im --page-gutter bezöge sich sonst weiter auf die volle Breite);
   start/end neu deklariert, damit sie das lokale --page-gutter nutzen. */
main > [data-theme]:not(.hero) {
  --page-gutter: var(--layout-spacing-container-padding);
  --page-gutter-start: max(var(--page-gutter), calc(env(safe-area-inset-left, 0px) + var(--layout-spacing-container-padding)));
  --page-gutter-end: max(var(--page-gutter), calc(env(safe-area-inset-right, 0px) + var(--layout-spacing-container-padding)));

  max-inline-size: var(--page-max);
  margin-inline: auto;
}

/* Safe-Area unten: Footer hält Abstand zum Home-Balken */
body > .footer {
  padding-bottom: calc(var(--layout-spacing-container-padding) + env(safe-area-inset-bottom, 0px));
}

/* Touch (Handy, Tablet): zusätzlich Luft unten — die Browser-Leiste
   (iOS Safari) liegt über dem Seitenende, der Footer reicht so bis
   ganz nach unten statt einer leeren Fläche darunter */
@media (hover: none) and (pointer: coarse) {
  body > .footer {
    padding-bottom: calc(var(--layout-spacing-container-padding) + env(safe-area-inset-bottom, 0px) + var(--layout-spacing-container-gap-4x));
  }
}

/* -------------------- Breite einer Rasterspalte --------------------
   --grid-col: Breite einer Spalte des Seitenrasters (12/6/4 Spalten),
   für Elemente, die sich an Rasterspalten ausrichten (z. B. .note).
   In vw berechnet (wie --page-gutter, max. Inhaltsbreite).
------------------------------------------------------------------- */
:root {
  --grid-cols: 12;
  --grid-col: calc(
    (min(100vw, var(--page-max)) - var(--layout-spacing-container-padding) * 2
      - var(--layout-spacing-container-gap-1x) * (var(--grid-cols) - 1)) / var(--grid-cols)
  );
}

@media (max-width: 959px) {
  :root {
    --grid-cols: 6;
  }
}

@media (max-width: 639px) {
  :root {
    --grid-cols: 4;
  }
}

/* -------------------- Flex-Layout --------------------
   Gegenstück zu .grid für Elemente in einer Reihe (Tags, Buttons,
   Icons + Text …), die ihre eigene Breite behalten und bei Platzmangel
   umbrechen. Anders als .grid ohne Seitenrand — für den Einsatz
   innerhalb von Inhalten.
     .flex-layout              Reihe, umbrechend, Gap 1x, oben bündig
   Richtung / Umbruch:
     .flex-layout--column      untereinander
     .flex-layout--nowrap      nicht umbrechen
   Ausrichtung (quer):
     .flex-layout--center      vertikal mittig
     .flex-layout--baseline    an der Textgrundlinie
   Verteilung (längs):
     .flex-layout--end         rechts bündig
     .flex-layout--between     Abstand zwischen, außen bündig
   Abstand (Tokens, Dichte-abhängig wie .stack-x):
     .flex-layout--gap-s       8px (Controls-Gap)
     (Standard)                --layout-spacing-container-gap-1x
     .flex-layout--gap-2x … --gap-4x
------------------------------------------------------------ */
.flex-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--layout-spacing-container-gap-1x);
}

.flex-layout--column   { flex-direction: column; flex-wrap: nowrap; }
.flex-layout--nowrap   { flex-wrap: nowrap; }

.flex-layout--center   { align-items: center; }
.flex-layout--baseline { align-items: baseline; }

.flex-layout--end      { justify-content: flex-end; }
.flex-layout--between  { justify-content: space-between; }

.flex-layout--gap-s    { gap: var(--controls-spacing-container-gap-large); }
.flex-layout--gap-2x   { gap: var(--layout-spacing-container-gap-2x); }
.flex-layout--gap-3x   { gap: var(--layout-spacing-container-gap-3x); }
.flex-layout--gap-4x   { gap: var(--layout-spacing-container-gap-4x); }

/* -------------------- Header-Variablen --------------------
   --header-height: Höhe des Headers = die Leiste (56px, Mobile 48px,
                    + Safe-Area).
   --header-offset: wie weit er gerade rausgeschoben ist (0 … Höhe);
                    nur an .header, .sidemenu, den sticky Rubriken
                    (.content-section__label) und .sticky-stack gesetzt
                    (Performance)
   --header-anchor: Header-Anteil im scroll-margin bei Anker-Sprüngen
   --header-offset und --header-anchor setzt main.js.
   Header-Styles: components.css
------------------------------------------------------------ */
:root {
  --header-height: calc(var(--rem-14x) + env(safe-area-inset-top, 0px));
}

@media (max-width: 639px) {
  :root {
    --header-height: calc(var(--rem-12x) + env(safe-area-inset-top, 0px));
  }
}

/* sichtbarer Teil des Headers — dort berechnet, wo --header-offset liegt */
.sidemenu,
.content-section__label,
.sticky-stack {
  --header-visible: calc(var(--header-height, 0px) - var(--header-offset, 0px));
}

/* -------- Header auf Touch-Geräten (Handy, Tablet) --------
   Desktop: Header folgt dem Scrollen 1:1 (main.js, --header-offset).
   Touch: 1:1 per JS ruckelt (v. a. iOS: Scrollen läuft getrennt vom
   JS-Thread). Stattdessen nach Richtung ein-/ausgleiten:
   runter → raus, hoch → rein, mit --transition-long. main.js setzt
   beim Richtungswechsel .is-header-hidden an <html> (selten → flüssig).
   Unter 960px fährt der Header nie aus (main.js). */
@media (hover: none) and (pointer: coarse) {
  /* einblenden: ease-out (Zustand „sichtbar"), ausblenden: ease-in */
  .header {
    translate: none;
    transition: translate var(--transition-duration-long) var(--transition-easing-out);
  }

  .sidemenu,
  .content-section__label,
  .sticky-stack {
    --header-visible: var(--header-height, 0px);
  }

  .sidemenu,
  .sidemenu nav,
  .content-section__label,
  .sticky-stack > :is(.section-head, .sticky-stack__header) {
    transition: top var(--transition-long);
  }

  html.is-header-hidden .header:not(.is-open) {
    translate: 0 -100%;
    transition-timing-function: var(--transition-easing-in);
  }

  html.is-header-hidden .sidemenu,
  html.is-header-hidden .content-section__label,
  html.is-header-hidden .sticky-stack {
    --header-visible: 0px;
  }
}

/* Offenes mobiles Menü: Seite dahinter sperren. Kein Scrollen, kein
   Gummiband — dadurch blendet iOS Safari auch seine Leisten nicht ein/
   aus, und die Menühöhe (100dvh) bleibt stabil. */
html:has(.header.is-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* -------------------- Footer-Reveal --------------------
   Der Footer klebt unten hinter dem Main-Content; beim Runterscrollen
   schiebt sich der Content nach oben weg und gibt ihn frei. Reines CSS:
   main liegt mit eigener Fläche über dem Footer (z-index), der Footer
   ist sticky am unteren Rand.
   Nur wenn der Footer ganz in den Viewport passt (sonst wäre sein
   oberer Teil nie sichtbar) — Grenze per Media Query auf die Höhe.
------------------------------------------------------------ */
main {
  position: relative;
  z-index: 1;
  background: var(--surface-color-layer-1);
}

@media (min-width: 640px) and (min-height: 720px) {
  body > .footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }
}

/* -------------------- Farbthemen auf Elementen --------------------
   <section data-theme="Grey"> … — Werte: Default, Grey, Yellow, Green, Blue
   (Groß-/Kleinschreibung wie in den Tokens). Light/Dark kommt vom body.
   Fläche und Textfarbe des Themas direkt auf das Element legen.
------------------------------------------------------------------- */
/* :where() = keine Spezifität → Komponenten mit eigener Fläche
   (Header: Menü-Fläche, Card, Tag …) behalten ihre Fläche */
:where(body [data-theme]) {
  background-color: var(--surface-color-layer-1);
  color: var(--typography-color-text-primary);
}

/* -------------------- Seitenlayout: Sidemenu + Content --------------------
   Ab 960px: Sidemenu .col-4 (Spalte 1–4), Content Spalte 5–12 (Figma),
   Sidemenu sticky daneben. Unter 960px beide volle Breite.
   Darunter: Sidemenu als horizontale Leiste, sticky unter dem Header.
   --sidemenu-height setzt main.js, --header-height kommt von oben.
--------------------------------------------------------------------------- */
.page-layout > .content {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .page-layout > .content {
    grid-column: 5 / span 8;
  }

  .sidemenu nav {
    position: sticky;
    top: calc(var(--header-visible) + var(--layout-spacing-container-gap-1x));
  }
}

@media (max-width: 959px) {
  /* Leiste über die volle Breite, auch über den Grid-Rand */
  .sidemenu {
    position: sticky;
    top: var(--header-visible);
    z-index: 50;
    margin-inline: calc(var(--page-gutter-start) * -1) calc(var(--page-gutter-end) * -1);
    padding: var(--rem-1rem) 0 var(--rem-1rem) var(--page-gutter-start);
    background: var(--surface-color-layer-1);
    overflow-x: auto;
  }

  /* Rand rechts an der Liste statt an der Leiste: Padding am Ende eines
     Scroll-Containers ignorieren manche Browser → der letzte Eintrag
     klebt sonst am Bildschirmrand */
  .sidemenu ul {
    display: flex;
    gap: var(--layout-spacing-container-gap-1x);
    width: max-content;
    padding-inline-end: var(--page-gutter-end);
    white-space: nowrap;
  }
}

/* -------------------- Sections über 12 Spalten --------------------
   Nach .page-layout: Sections ohne Sidemenu (.content-section--wide,
   components.css). Abstand wie .stack-4 im Content; oben kein zweites
   Section-Padding direkt nach .page-layout (außer eingefärbt).
--------------------------------------------------------------------- */
/* Abstand zwischen Sections: doppelt gap-4x (Desktop/Tablet 128px,
   Mobile 96px) — im Content (stack-4) und hier, ebenso nach der
   letzten Section */
.page-layout > .content > .content-section + .content-section {
  margin-block-start: calc(var(--layout-spacing-container-gap-4x) * 2);
}

.page-layout,
.page-sections {
  padding-block-end: calc(var(--layout-spacing-container-gap-4x) * 2);
}

.page-sections {
  row-gap: calc(var(--layout-spacing-container-gap-4x) * 2);
}

/* nur ohne eigene Fläche: eingefärbte Sections (data-theme) behalten
   ihr Padding oben, sonst klebt der Inhalt an der Farbkante */
.page-layout + .page-sections:not([data-theme]) {
  padding-block-start: 0;
}

/* Weiches Scrollen zu Ankern und in der Sidemenu-Leiste —
   nicht bei "Bewegung reduzieren" */
@media (prefers-reduced-motion: no-preference) {
  html,
  .sidemenu {
    scroll-behavior: smooth;
  }
}

/* Anker nicht unter Header (und Sidemenu-Leiste) verstecken */
[id] {
  scroll-margin-top: calc(var(--header-anchor, var(--header-height, 0px)) + var(--layout-spacing-container-gap-1x));
}

@media (max-width: 959px) {
  [id] {
    scroll-margin-top: calc(var(--header-anchor, var(--header-height, 0px)) + var(--sidemenu-height, 0px) + var(--layout-spacing-container-gap-1x));
  }

  /* außerhalb von .page-layout gibt es keine Sidemenu-Leiste */
  .page-sections [id] {
    scroll-margin-top: calc(var(--header-anchor, var(--header-height, 0px)) + var(--layout-spacing-container-gap-1x));
  }
}

/* -------------------- Scrollbars (nur klassische) --------------------
   .has-classic-scrollbars setzt main.js, wenn Scrollbars Platz belegen
   (v. a. Windows/Linux). Dann: schmal, rund, ohne Pfeile und Spur —
   angelehnt an macOS. Overlay-Scrollbars (macOS, iOS) bleiben nativ.
   Gilt für scrollbare Bereiche innerhalb von body (dort greifen die
   Mode-Tokens). Die Seiten-Scrollbar hängt an <html> und kann die
   body-Tokens nicht lesen → bleibt unter Windows vorerst nativ.
--------------------------------------------------------------------- */

/* Native Scrollbars (u. a. macOS) passend zum Mode einfärben —
   die Seiten-Scrollbar richtet sich nach color-scheme von <html> */
html:has(> body[data-mode='Auto']) {
  color-scheme: light dark;
}

html:has(> body[data-mode='Dark']) {
  color-scheme: dark;
}

/* Platz immer reservieren → kein Layoutsprung zwischen Seiten
   mit und ohne Scrollbar */
.has-classic-scrollbars {
  scrollbar-gutter: stable;
}

/* Chromium, Edge, Opera */
.has-classic-scrollbars ::-webkit-scrollbar {
  width: var(--rem-3x);
  height: var(--rem-3x);
  background: transparent;
}

.has-classic-scrollbars ::-webkit-scrollbar-track,
.has-classic-scrollbars ::-webkit-scrollbar-corner {
  background: transparent;
}

.has-classic-scrollbars ::-webkit-scrollbar-button {
  display: none;
}

.has-classic-scrollbars ::-webkit-scrollbar-thumb {
  background-color: var(--typography-color-text-secondary);
  background-clip: padding-box;
  border: var(--rem-0-5x) solid transparent;
  border-radius: var(--radius-border-radius-100);
}

.has-classic-scrollbars ::-webkit-scrollbar-thumb:hover {
  border-width: var(--rem-0-25x);
}

/* Firefox (kennt ::-webkit-scrollbar nicht) */
@supports not selector(::-webkit-scrollbar) {
  .has-classic-scrollbars,
  .has-classic-scrollbars * {
    scrollbar-width: thin;
    scrollbar-color: var(--typography-color-text-secondary) transparent;
  }
}