/* Straubinger Versicherungsmanufaktur — Design Tokens v2.0
   Gehört zu straubinger-design-system.md. Werte dort begründet.
   Alle Maße in rem: das Layout wächst mit der Nutzer-Schriftgröße mit. */

:root {
  /* ---- Farbe ------------------------------------------------------- */
  --c-marine:    #21243F;
  --c-tresor:    #161A2E;
  --c-gold:      #BDA881;   /* NUR Linien, NUR auf dunklem Grund */
  --c-messing:   #7A5F31;   /* Goldton für Text auf hellem Grund */
  --c-kanzlei:   #F0F1F4;
  --c-weiss:     #FFFFFF;
  --c-grau:      #5B5F6E;
  --c-linie:     #D9DAE0;
  --c-storno:    #A3342E;
  --c-geprueft:  #2F6B4F;

  --bg-seite:    var(--c-kanzlei);
  --bg-karte:    var(--c-weiss);
  --bg-dunkel:   var(--c-tresor);
  --text-primar: var(--c-marine);
  --text-sekund: var(--c-grau);
  --text-invers: var(--c-weiss);
  --akzent-hell: var(--c-messing);
  --akzent-dunk: var(--c-gold);

  /* ---- Material ---------------------------------------------------- */
  --mat-nav-bg:    rgba(240, 241, 244, 0.72);
  --mat-nav-blur:  blur(20px) saturate(180%);
  --mat-sheet-bg:  rgba(255, 255, 255, 0.86);
  --mat-sheet-blur: blur(30px) saturate(180%);
  --mat-dunkel-bg: rgba(22, 26, 46, 0.72);
  --scrim:         rgba(22, 26, 46, 0.28);

  --schatten-sheet: 0 -0.5rem 2.5rem rgba(22, 26, 46, 0.18);
  --schatten-nav:   0 0.125rem 1rem rgba(22, 26, 46, 0.06);

  /* ---- Typografie -------------------------------------------------- */
  --f-display: "Newsreader", Georgia, serif;
  --f-body:    "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Größe / Laufweite / Zeilenhöhe gehören zusammen — immer im Trio setzen */
  --t-xs:    0.72rem;  --ls-xs:    0.012em;  --lh-xs:   1.45;
  --t-sm:    0.83rem;  --ls-sm:    0.005em;  --lh-sm:   1.50;
  --t-base:  1.125rem; --ls-base:  0;        --lh-base: 1.60;
  --t-lg:    1.25rem;  --ls-lg:   -0.005em;  --lh-lg:   1.50;
  --t-xl:    1.56rem;  --ls-xl:   -0.010em;  --lh-xl:   1.30;
  --t-2xl:   1.94rem;  --ls-2xl:  -0.014em;  --lh-2xl:  1.20;
  --t-3xl:   2.44rem;  --ls-3xl:  -0.017em;  --lh-3xl:  1.12;
  --t-4xl:   3.06rem;  --ls-4xl:  -0.020em;  --lh-4xl:  1.06;
  --t-5xl:   3.81rem;  --ls-5xl:  -0.022em;  --lh-5xl:  1.03;

  --breite-text: 68ch;

  /* ---- Raum -------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Sektionsabstand am 2026-09-03 zweimal reduziert: erst halbiert, dann
     noch einmal um rund 30 Prozent. Es bleibt bei Werten der Abstandsskala,
     statt auf krumme Zwischengroessen auszuweichen.
     Verlauf mobil: --s-9 (6rem) -> --s-7 (3rem) -> --s-6 (2rem), also -33 %.
     Ab 48em:       --s-10 (8rem) -> --s-8 (4rem) -> --s-7 (3rem), also -25 %.
     Das Design-System nennt in Abschnitt 5 weiterhin --s-9 und --s-10. */
  --sektion-y:   var(--s-6);
  --raster-max:  68rem;
  --raster-rand: var(--s-5);
  --treffer-min: 2.75rem;  /* 44px bei Standardgröße */

  /* ---- Form: Radius kodiert Höhe über der Seite --------------------- */
  --r-sm: 3px;    /* Buttons, Felder — in der Fläche */
  --r-md: 8px;    /* Karten — auf der Fläche */
  --r-lg: 16px;   /* Sheets — über der Fläche */
  --linie-faden: 1.5px;

  /* ---- Bewegung ---------------------------------------------------- */
  /* Federn (Dämpfung / Response in s) — von straubinger-motion.js gelesen.
     Werte hier zentral, damit CSS und JS nicht auseinanderlaufen. */
  --feder-ui-daempfung:    1.0;
  --feder-ui-response:     0.35;
  --feder-sheet-daempfung: 0.8;
  --feder-sheet-response:  0.30;
  --feder-snap-daempfung:  1.0;
  --feder-snap-response:   0.30;

  /* Nicht-gestengesteuerte Übergänge dürfen CSS-Transitions bleiben */
  --e-druck:  100ms ease-out;          /* pointerdown-Feedback */
  --e-farbe:  160ms cubic-bezier(.2,0,.2,1);
  --e-ruhig:  320ms cubic-bezier(.2,0,0,1);
}

@media (min-width: 48em) {
  :root { --raster-rand: var(--s-7); --sektion-y: var(--s-7); }
}

/* ---- Basis --------------------------------------------------------- */

html {
  font-size: 100%;          /* Nutzereinstellung gewinnt. Nie überschreiben. */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-seite);
  color: var(--text-primar);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, blockquote {
  font-family: var(--f-display);
  font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); letter-spacing: var(--ls-4xl); line-height: var(--lh-4xl); }
h2 { font-size: var(--t-3xl); letter-spacing: var(--ls-3xl); line-height: var(--lh-3xl); }
h3 { font-size: var(--t-2xl); letter-spacing: var(--ls-2xl); line-height: var(--lh-2xl); }
h4 { font-size: var(--t-xl);  letter-spacing: var(--ls-xl);  line-height: var(--lh-xl);  }

@media (min-width: 64em) {
  h1 { font-size: var(--t-5xl); letter-spacing: var(--ls-5xl); line-height: var(--lh-5xl); }
}

.zahl, .marginalie, time, [data-numerisch] {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  letter-spacing: var(--ls-sm);
  line-height: var(--lh-sm);
  color: var(--akzent-hell);
}

/* ---- Material ------------------------------------------------------ */

.nav {
  background: var(--mat-nav-bg);
  backdrop-filter: var(--mat-nav-blur);
  -webkit-backdrop-filter: var(--mat-nav-blur);
  box-shadow: var(--schatten-nav);
  border-bottom: 0;                       /* Scroll-Edge statt Linie */
}

/* Weiche Kante dort, wo Inhalt unter die Leiste läuft */
.scroll-edge {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
          mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
}

.sheet {
  background: var(--mat-sheet-bg);
  backdrop-filter: var(--mat-sheet-blur);
  -webkit-backdrop-filter: var(--mat-sheet-blur);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--schatten-sheet);
  touch-action: none;                     /* Ziehen gehört uns */
  will-change: transform;
}

/* Nie zwei helle durchscheinende Flächen übereinander */
body[data-sheet="offen"] .nav {
  background: var(--c-kanzlei);
  backdrop-filter: none;
}

.scrim { background: var(--scrim); }

/* ---- Interaktion --------------------------------------------------- */

[data-press] {
  touch-action: manipulation;             /* keine 300ms-Tap-Verzögerung */
  min-block-size: var(--treffer-min);
  min-inline-size: var(--treffer-min);
  transition: transform var(--e-druck), background-color var(--e-farbe);
}
[data-press][data-gedrueckt="true"] { transform: scale(0.97); }

:focus-visible {
  outline: 2px solid var(--c-marine);
  outline-offset: 2px;
}
.auf-dunkel :focus-visible { outline-color: var(--c-gold); }

/* ---- Nutzereinstellungen ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Sanftere Entsprechung, nicht "gar nichts": Überblendung bleibt */
  .sheet { transition: opacity 200ms ease; transform: none !important; }
  .goldfaden { animation: none; stroke-dashoffset: 0; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-press] { transition: background-color var(--e-farbe); }
  [data-press][data-gedrueckt="true"] { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav   { background: var(--c-kanzlei); backdrop-filter: none; }
  .sheet { background: var(--c-weiss);   backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .nav, .sheet { border: 1px solid var(--c-marine); }
  :root { --c-grau: #3E4250; }
}

/* ---- Goldfaden ----------------------------------------------------- */

@media (min-width: 64em) {
  .goldfaden path {
    fill: none;
    stroke: var(--c-gold);
    stroke-width: var(--linie-faden);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: faden-zeichnen linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes faden-zeichnen { to { stroke-dashoffset: 0; } }

/* Ohne Scroll-Timeline-Unterstützung: Faden steht vollständig da */
@supports not (animation-timeline: scroll()) {
  .goldfaden path { stroke-dashoffset: 0; animation: none; }
}