/* ═══════════════════════════════════════════════════════════════════════════
   dedista — v5.css · Fundament (Baustufe 1), nach SPEC-WEBSITE-V5.md
   ─────────────────────────────────────────────────────────────────────────────
   Additiv nach v3.css eingebunden, ändert dort keine einzige Regel — v3.css
   ist gesperrt, solange Arturs Sichtung des ungeprüften v4-Durchgangs läuft
   (Spec §10). Diese Datei enthält NUR §5.2–§5.5 der Spec (Farbrollen, Buttons,
   Abstände, Raster) plus die Bausteine A22 (Fußnoten) und A25
   (Medien-Platzhalter) und den Motion-Schalter aus §6.4/§6.1.
   Ausdrücklich NICHT enthalten: §5.1 Typografie (Fraunces/Geist) — das ist
   Arturs Entscheidung, keine Umsetzungsfrage. Alles hier läuft unverändert mit
   dem bestehenden Outfit.

   Achtung, Namensnähe ohne inhaltlichen Zusammenhang: `assets/v5-light.css`
   (helles Theme, body.v5-light) und `assets/v5-motion.js` (dekorativer
   Parallax/Tilt für home4/home5) sind älterer, unabhängiger Bestand — nicht
   dieselbe "v5" wie SPEC-WEBSITE-V5.md. v5-light.css wird für die
   `data-color-mode="light"`-Rolle unten weiterverwendet (überschreibt
   --bg/--surface/--t1..4, mit denen diese Datei ohnehin arbeitet); v5-motion.js
   bleibt unberührt.

   Tokens neu nur mit Präfix --v5-, wo ein Bestandstoken denselben Namen hätte.
   Alles andere aus v3.css wird weiterverwendet, nicht umbenannt.

   Lade-Reihenfolge: v3.css → mega-menu.css → v5.css. Scope-Marker für
   Seiten, die v5 nutzen: body.v5 (heute von keiner Seite getragen — Baustufe 1
   baut nur die Datei, Stufe 2/4 verdrahten sie in echte Seiten).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Bewegung (§6.1) — Bestand bleibt (--ease-out, --t-fast/-base/-slow aus
     v3.css), hier nur die vier neuen Kurven + drei neuen Dauern ergänzt. ── */
  --ease-standard:   cubic-bezier(.4,0,.2,1);
  --ease-decelerate: cubic-bezier(0,0,.2,1);
  --ease-accelerate: cubic-bezier(.4,0,1,1);
  --ease-sharp:      cubic-bezier(.4,0,.6,1);
  --t-enter: 225ms;
  --t-leave: 195ms;
  --t-complex: 375ms;

  /* ── Farbrollen (§5.2) — schliessen die fünf Bestandslöcher IM V5-LAYER.
     v3.css behält seine Literale unverändert (#7FE7A8 4×, #FF8A93 2×,
     #0e0e11 11×) — die Löcher sind in v5 geschlossen, in v3 offen, nicht
     "behoben". Siehe Spec §5.2. ── */
  --v5-success: #7FE7A8;
  --v5-error: #FF8A93;
  --v5-surface-0: #0e0e11;
  /* --v5-on-dark-* — bewusst umbenannt von --v5-on-brand-* (23.08.2026): die
     Behauptung "sitzt auf dem Markenverlauf" war falsch (geprüft gegen
     v3.css:625 — .statement liegt auf einem abgedunkelten Foto, nicht dem
     Marken-Verlauf). Der echte Markenverlauf ist z. B. .step .sn
     (v3.css:640). "on-dark" beschreibt zutreffend, wofür die Familie
     tatsächlich gebraucht wird: helle Schrift auf dunkler Fläche, gleich
     welcher Art. */
  --v5-on-dark-1: #ffffff;
  --v5-on-dark-2: rgba(255,255,255,.82);
  --v5-on-dark-3: rgba(255,255,255,.72);
  --v5-scrim: rgba(0,0,0,.55);
  --v5-elevated: 0 24px 48px -24px rgba(0,0,0,.55);

  /* ── Ist-Zustand-Tokens, benannt statt Literal — Werte bewusst noch die
     heutigen (dunkles Theme). Helle Gegenwerte kommen erst, wenn die
     Hell/Dunkel-Palette insgesamt feststeht, dann an dieser einen Stelle. ── */
  --v5-btn-primary-ink: #111;     /* kippt mit dem Farbmodus */
  --v5-btn-primary-bg: #fff;      /* kippt mit dem Farbmodus */
  --v5-on-brand-ink: #111;        /* bleibt — sitzt auf dem echten Markenverlauf, der modusunabhängig farbig bleibt */
  --v5-link-underline: rgba(196,196,196,.4); /* kippt mit dem Farbmodus */

  /* ── --sec-y-Bereinigung — NUR im v5-Layer (§5.2). Die Doppeldefinition in
     v3.css bleibt bestehen, bis die Sperre fällt; hier einmalig, mit den
     Werten der heute wirksamen (zweiten) v3.css-Definition, damit v5-Bausteine
     optisch nicht von bestehenden Abschnitten abweichen. ── */
  --v5-sec-y: clamp(52px, 29.7px + 5.71vw, 112px);
  --v5-sec-y-tight: clamp(34px, 19px + 3.85vw, 76px);

  /* ── Abstände (§5.4) — ein neuer Token, der Rest ist Bestand. ── */
  --v5-head-gap: clamp(40px, 5vw, 80px);

  /* ── Raster (§5.5) ── */
  --v5-grid-gap: 15px;

  /* ── Haupt-Umbruchpunkt (Bestand) — einzige Quelle für v5.js ──
     960px steht 19× im Code (13× min-width:960px, 5× max-width:959px in
     v3.css/mega-menu.css/v5.css, 1× hart in v5.js als matchMedia-String),
     ohne gemeinsame Quelle [gefunden 23.08.2026, Stil/Verhalten-Audit].
     CSS bleibt die Autorität — Medienabfragen können Custom Properties nicht
     auswerten, die 18 bestehenden @media-Stellen werden deshalb NICHT
     angefasst (das wäre ein Präprozessor-Umbau, kein Fund-Fix). Dieser
     Token ist ausschliesslich dafür da, dass v5.js zur Laufzeit daraus
     liest statt 959 hart zu führen. Kante: CSS schreibt min-width:960px
     ("ab 960 ist Desktop"), v5.js braucht das Gegenstück max-width — das
     ist rechnerisch IMMER (dieser Wert − 1px), nicht per Hand gepflegt. */
  --v5-bp-desktop: 960px;
}
@media (min-width:740px){
  :root{ --v5-grid-gap: 20px; }
}

/* Helles Theme (body.v5-light) kehrt den Scrim um — dort ist die
   Markenfläche die Ausnahme, nicht die Regel. */
body.v5-light{ --v5-scrim: rgba(242,242,242,.8); }

/* ═══════════════════════════════════════════════════════════════════════════
   Motion-Schalter (§6.4) — CSS-Seite. JS setzt data-motion="off"/"on" auf
   <html> (v5.js). Grosse, raumgreifende Bewegung hängt an
   html:not([data-motion="off"]); Zustands-Feedback unter ~400ms (Buttons,
   Chevrons, Fokus-Ringe) bleibt IMMER an, auch bei data-motion="off" —
   das ist die bewusste Abweichung vom Bestand (§6.4: dort ein globaler
   Kill-Switch, hier eine Trennlinie).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .v5-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .v5-explorer__media,.v5-marquee__track{animation:none!important}

  /* Cascade-Fix, kein Aufräumen: v3.css erzwingt hier global
     transition-duration:.01ms auf *,*::before,*::after (Spezifität 0,0,0 —
     ::before/::after zählen wie ein Typselektor). Jeder Klassenselektor
     schlägt das automatisch (0,1,0 > 0,0,1), auch bei !important gegen
     !important — Spezifität entscheidet zwischen zwei !important-Regeln,
     nicht die Ladereihenfolge. Dieses !important hier ist deshalb kein
     Schlamperei-Fallback, sondern das Werkzeug, das genau diesen einen
     Bestandsschalter für die v5-Bausteine unten gezielt zurückgewinnt, die
     laut Spec §6.4 als Zustands-Feedback unter 400ms erhalten bleiben sollen.
     NICHT entfernen, auch wenn es unnötig aussieht. */
  .v5-btn,.v5-btn::before,.v5-link,.v5-field{transition-duration:200ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IO-Reveal (M01/M02) — 28.08.2026 auf Squares gemessene Bewegungssprache
   umgestellt (REFERENZ-SQUARE-MOTION.md §1/§2/§6), ersetzt die alte
   0,8s/28px/scale(.98)/Start-.2-Kombination aus dem v4-Durchgang: Squares
   eigener wortweiser Hero-Eintritt ist nicht messbar (reines JS, keine
   CSS-Spur, siehe §1), aber jedes andere gemessene Muster bewegt höchstens
   4px, nie skaliert, startet bei Deckkraft 0. Dieses Element trägt genau
   den wortweisen Hero-Eintritt (index.html, .word.v5-reveal) — deshalb hier
   der nächstliegende reale Baustein: 4px, kein scale, Start-Opacity 0 (nicht
   mehr .2), 600ms + die Karten-Reveal-Kurve cubic-bezier(0,0,.2,1). Der
   200ms-Staffelschritt zwischen den Wörtern ist ABGELEITET von derselben
   Karten-Reveal-Messung, nicht am Hero selbst gemessen (nicht messbar). */
.v5-reveal{opacity:1;transform:none}
html.js:not([data-motion="off"]) .v5-reveal{
  opacity:0;transform:translateY(4px);
  transition:opacity .6s cubic-bezier(0,0,.2,1),transform .6s cubic-bezier(0,0,.2,1);
  will-change:opacity,transform}
html.js:not([data-motion="off"]) .v5-reveal.is-in{opacity:1;transform:none;will-change:auto}
html.js:not([data-motion="off"]) .v5-reveal[data-d="1"]{transition-delay:0s}
html.js:not([data-motion="off"]) .v5-reveal[data-d="2"]{transition-delay:.2s}
html.js:not([data-motion="off"]) .v5-reveal[data-d="3"]{transition-delay:.4s}
html.js:not([data-motion="off"]) .v5-reveal[data-d="4"]{transition-delay:.6s}

/* ═══════════════════════════════════════════════════════════════════════════
   §5.5 — 12-Spalten-Raster
   ═══════════════════════════════════════════════════════════════════════════ */
.v5-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--v5-grid-gap);
  width:min(var(--wrap),100% - 2*var(--gutter));
  margin-inline:auto}

/* Typische Zuweisungen aus der Referenz [gemessen], als benannte Utilities */
.v5-col--head{grid-column:2 / span 10;text-align:center}
.v5-col--full{grid-column:1 / -1}
.v5-col--hero-text{grid-column:2 / span 6}
.v5-col--hero-media{grid-column:9 / -1}
.v5-col--cta-a{grid-column:1 / span 6}
.v5-col--cta-b{grid-column:7 / span 6}
@media (min-width:960px){
  .v5-col--head{grid-column:3 / span 8}
}
@media (max-width:739px){
  .v5-grid > *{grid-column:1 / -1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §5.3 — Buttons und Interaktion
   Abweichung vom Bestand, bewusst (Spec §5.3): Hover ist eine ::before-Skalierung,
   nicht translateY auf dem Button selbst — das Label bleibt beim Hover scharf.
   translateY bleibt dem Bestand vorbehalten (Karten mit Link, .btn--*).
   ═══════════════════════════════════════════════════════════════════════════ */
.v5-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-width:120px;height:44px;padding:10px 20px;border-radius:50px;
  border:1px solid transparent;font-size:16px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate;
  transition:color .15s var(--ease-decelerate),border-color .15s var(--ease-decelerate)}
.v5-btn--sm{height:36px;padding:6px 18px;font-size:14px;min-width:0}
.v5-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transition:transform .15s var(--ease-decelerate);transform:scale(1)}
html.js:not([data-motion="off"]) .v5-btn:hover::before{transform:scale(1.05)}
.v5-btn:active{transform:translateY(5%)}
.v5-btn--primary{color:var(--v5-btn-primary-ink)}
.v5-btn--primary::before{background:var(--v5-btn-primary-bg)}
.v5-btn--secondary{color:var(--t1);border-color:var(--line-soft)}
.v5-btn--secondary::before{background:var(--surface)}
.v5-btn--on-brand{color:var(--v5-on-brand-ink)}
.v5-btn--on-brand::before{background:var(--v5-on-dark-1)}
.v5-btn[disabled],.v5-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.v5-btn[disabled]::before,.v5-btn[aria-disabled="true"]::before{transform:none!important}

.v5-btn:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:5px}

/* Textlink mit sich zurückziehender Unterstreichung (M30) */
.v5-link{display:inline;color:var(--t1);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1.5px;
  transition:background-size .3s var(--ease-decelerate)}
.v5-link:hover{background-size:0% 1.5px}
@media (hover:none){.v5-link:hover{background-size:100% 1.5px}}

/* Formularfelder — inset statt border, kein Layoutsprung beim Fokus (§5.3) */
.v5-field{width:100%;padding:14px 20px;background:var(--surface);color:var(--t1);
  font:inherit;font-size:16px;border:0;border-radius:var(--r-pill);outline:none;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .15s var(--ease-sharp)}
.v5-field:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
textarea.v5-field{border-radius:var(--r-card);resize:vertical;min-height:120px}

/* ═══════════════════════════════════════════════════════════════════════════
   A25 — Medien-Platzhalter
   ═══════════════════════════════════════════════════════════════════════════ */
.v5-media{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface-2)}
.v5-media--16x9{aspect-ratio:16/9}
.v5-media--4x3{aspect-ratio:4/3}
.v5-media--1x1{aspect-ratio:1/1}
.v5-media--portrait{aspect-ratio:3/4}
.v5-media--wide{aspect-ratio:21/9}
.v5-media--tile{aspect-ratio:73/64}
.v5-media__ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px;
  color:var(--t4);font-size:var(--fs-small,13px);
  background-image:repeating-linear-gradient(135deg,
    var(--v5-surface-0) 0 12px, var(--surface-2) 12px 24px)}
.v5-media__ph span:first-child{font-weight:500;color:var(--t3);
  text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.v5-media figcaption{margin-top:8px;font-size:var(--fs-small,13px);color:var(--t4)}

/* ═══════════════════════════════════════════════════════════════════════════
   A22 — Fußnoten
   ═══════════════════════════════════════════════════════════════════════════ */
.v5-footnotes{margin-top:var(--v5-sec-y-tight);padding-top:24px;
  border-top:1px solid var(--line)}
.v5-footnotes ol{margin:0;padding:0 0 0 1.4em;display:flex;flex-direction:column;gap:8px}
.v5-footnotes li{font-size:var(--fs-small,13px);line-height:1.5;color:var(--t4)}
.v5-footnotes li::marker{color:var(--t4)}
.v5-footnotes cite{font-style:normal;color:var(--t3)}
.v5-footnotes a{color:var(--t3);text-decoration:underline;
  text-decoration-color:var(--v5-link-underline);text-underline-offset:2px}
.v5-footnotes a:hover{color:var(--t1);text-decoration-color:currentColor}
.v5-fn-ref{font-size:.75em;vertical-align:super;color:var(--t3);text-decoration:none;
  padding:0 2px}
.v5-fn-ref:hover{color:var(--t1)}

/* ═══════════════════════════════════════════════════════════════════════════
   A07 — Content-Explorer (Baustufe 4)
   Baseline ohne JS: alle Titel, Texte und Medien stehen offen im Fluss.
   html.js aktiviert Reiter-Verhalten (≥960px) bzw. reines Akkordeon (<960px);
   die Umschaltung zwischen beiden läuft in v5.js über matchMedia, nicht über
   eine reine CSS-Medienabfrage, weil das Medium bei <960px physisch hinter
   den aktiven Reiter wandert (kein doppeltes Markup, echtes DOM-Verschieben).
   ═══════════════════════════════════════════════════════════════════════════ */
.v5-explorer__head{max-width:var(--measure);margin-bottom:var(--v5-head-gap)}
.v5-explorer__body{display:flex;flex-direction:column;gap:32px}
.v5-explorer__tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.v5-explorer__tabs>li{border-top:1px solid var(--line)}
.v5-explorer__tabs>li:last-child{border-bottom:1px solid var(--line)}
.v5-explorer__tabs button[role="tab"]{all:unset;display:block;width:100%;
  box-sizing:border-box;cursor:pointer;padding:20px 4px}
.v5-explorer__tabs h3{font-size:var(--fs-h4,19px);font-weight:500;color:var(--t2);
  transition:color .2s var(--ease-standard)}
.v5-explorer__tabs [aria-selected="true"] h3{color:var(--t1)}
.v5-explorer__text{margin-top:10px;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;max-width:var(--measure)}
.v5-explorer__text p{margin:0;color:var(--t3);font-size:var(--fs-body,16px);line-height:1.55}
.v5-explorer__media{display:flex;flex-direction:column;gap:16px}
.v5-explorer__mediaitem{margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2)}
.v5-explorer__mediaitem img{display:block;width:100%;height:auto}

html.js .v5-explorer__tabs [aria-selected="false"] .v5-explorer__text{
  display:none}
html.js .v5-explorer__mediaitem{display:none}
html.js .v5-explorer__mediaitem.is-active{display:block}
html.js:not([data-motion="off"]) .v5-explorer__mediaitem.is-active{
  animation:v5-explorer-in .3s var(--ease-standard)}
@keyframes v5-explorer-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

@media (min-width:960px){
  html.js .v5-explorer__body{display:grid;
    grid-template-columns:minmax(280px,420px) 1fr;gap:56px;align-items:start}
  html.js .v5-explorer__tabs button[role="tab"]{padding:24px 20px}
  html.js .v5-explorer__media{position:sticky;top:calc(var(--v5-head-gap) + 76px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   A06 — Statement-Band (Baustufe 4)
   .statement bleibt der bestehende, geprüfte Bestand (Bild + Scrim, ein Satz,
   ein CTA) — die Spec nennt "kein Bild, keine Handlung" als Zweck-Ideal, ihre
   eigene Bestand-Notiz verweist aber ausdrücklich auf genau dieses existierende
   .statement mit seinem heutigen Inhalt. Nicht neu gebaut, nur zwei gezielte
   Korrekturen: Schriftgrad auf --fs-h1 (Spec-Vorgabe, Bestand nutzte --fs-h2),
   Zeilenlänge auf das dafür vorgesehene Token, und die drei Weiss-Literale aus
   v3.css durch die in Baustufe 1 dafür geschaffenen Tokens ersetzt — nur hier
   in v5.css, v3.css bleibt unverändert (siehe Kopf dieser Datei). */
.statement h2{font-size:var(--fs-h1);max-width:var(--measure-h);color:var(--v5-on-dark-1)}
.statement p{color:var(--v5-on-dark-2)}
.statement .eyebrow{color:var(--v5-on-dark-3)}