/* ==========================================================================
   Agilunis · base.css · Richtung K „Werkbank mit Zettel“
   Owner: wdf-design-system (Auftrag P5-DS). Abschnitte ändern diese Datei nicht.
   Inhalt: Schriften · Reset · html.js · Typografie · Links · Fokus · Raster und Abschnittstöne ·
   Buttons · Icons · Tags und Tasten · Zustandszeichen · Status-Chips · App-Fenster (Kopfzeile,
   Suche, Segment-Schalter, Tabelle, Meldung, Skelett, Ladezeichen) · Formularfelder · Aufklapper ·
   Personenzeile · Bildfläche (.media, P12-DS) · Kopfzeile · Menü · stehende Leiste · Fußzeile · Reduced Motion.
   Nur Werte aus tokens.css. Klassen und Zustände: wdf/design-system/komponenten.md
   ========================================================================== */

/* ---------- Schriften (lokal, variabel, latin + latin-ext; Quelle Google Fonts, OFL) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--f-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
address { font-style: normal; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
/* Fokus nicht verdeckt (WCAG 2.4.11, P9-7-FG): Der Scroller hält Kopfzeile (+ Haarlinie und Fokusring, --s-2)
   und unter 1024 die stehende Leiste frei. Gilt für Tab-Fokus und Ankersprünge. Sprungziele legen --s-2 drauf:
   Anker landen bei Kopfzeile + 16 px (--s-2 + --s-2). */
html { scroll-padding-block-start: calc(var(--header-h) + var(--s-2)); }
:where([id]) { scroll-margin-block-start: var(--s-2); }
@media (max-width: 1023px) {
  html { scroll-padding-block-end: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom) + var(--s-2)); }
}
::selection { background: var(--color-accent-tint); color: var(--color-text); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Hilfsklassen ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-2); z-index: var(--z-skip);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-s);
  background: var(--color-text); color: var(--color-surface);
  font-weight: var(--fw-semibold); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.nb { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.mono {
  font-family: var(--f-mono);
  font-variant-numeric: slashed-zero;
  letter-spacing: 0;
}

/* ---------- Typografie der Seite (Schibsted Grotesk) ---------- */
.display, .heading-2, .heading-3, .title { color: var(--color-text); text-wrap: balance; }
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}
.heading-2 {
  font-size: var(--fs-heading-2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
}
.heading-3 {
  font-size: var(--fs-heading-3);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-bold);
}
.title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}
/* Kontext gedämpft / Kern hell: jede Hälfte eigene Zeile (Überschriften mit Doppelpunkt) */
.dim { color: var(--color-text-subtle); }
.split > span { display: block; text-wrap: balance; }
.eyebrow {
  font-size: var(--fs-small);
  line-height: var(--lh-title);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: var(--measure-lead);
  text-wrap: pretty;
}
.lead strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.body, .prose p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose { display: grid; gap: var(--s-4); }
.prose strong, .body strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.small strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.micro {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.section-head { display: grid; gap: var(--s-3); }
.section-head .lead { margin-top: var(--s-1); }

/* Zitat (Kundenstimme kurz, Fleischmann in 40 und 80, Haußner in 20) */
.quote { padding-left: var(--s-4); border-left: 2px solid var(--color-accent-line); }
.quote p {
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-wrap: pretty;
}
.quote footer, .quote figcaption {
  margin-top: var(--s-3);
  display: grid; gap: 2px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.quote footer b, .quote figcaption b { font-weight: var(--fw-semibold); color: var(--color-text); }

/* ---------- Links ---------- */
.textlink {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 44px;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* kein Übergang der text-decoration: unter dem Zeiger übernimmt die Spur sofort (Runde 3) */
}
.textlink .icon { width: 16px; height: 16px; color: var(--color-accent); }
/* Link im Fließtext: gleiche Linie, keine Mindesthöhe */
.inline-link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .inline-link:hover { text-decoration-color: var(--color-accent); }
}
/* Knopf, der wie ein Textlink aussieht („Mehr lesen“, „Suche löschen“, „Zurück auf die Beispielwerte“) */
.btn-text {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 44px; padding: 0;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* kein Übergang der text-decoration: unter dem Zeiger übernimmt die Spur sofort (Runde 3) */
}
.btn-text .icon { width: 14px; height: 14px; }
.btn-text[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Deaktiviert: Farbe statt Deckkraft (Kontrast in style-lock.md § 2) */
.btn-text:disabled, .btn-text[aria-disabled="true"] { color: var(--color-disabled-text); text-decoration-color: var(--color-disabled-line); cursor: not-allowed; }

/* Unterstreichung wächst (Runde 3, P15-DS): bei .textlink und .btn-text (einzeilige Bedienelemente) legt sich eine
   Türkis-Linie per transform: scaleX von links über die ruhende Linie und zieht beim Verlassen nach rechts ab.
   Lage = Zeilenmitte + Grundlinie (0,34 em, gemessen für Schibsted und Geist, wdf/tmp/P15-DS-links.mjs) +
   text-underline-offset 4 px. Die ruhende Linie bleibt text-decoration (Abschnitte steuern ihre Farbe, z. B. 70).
   .inline-link im Fließtext bricht um: dort wechselt nur die Farbe der Linie (ein Pseudo-Element folgt keinem Umbruch). */
.textlink, .btn-text { position: relative; }
.textlink::after, .btn-text::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(50% + 0.34em + 4px);
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  pointer-events: none;
  transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.textlink .icon, .btn-text .icon { transition: transform var(--dur-base) var(--ease-out), translate var(--dur-hover) var(--ease-out); }
/* Drücken (auch Touch): Linie steht sofort ganz */
.textlink:active::after,
.btn-text:not(:disabled):not([aria-disabled="true"]):active::after { transform: scaleX(1); transform-origin: 0 50%; transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover::after,
  .btn-text:not(:disabled):not([aria-disabled="true"]):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  /* Unter dem Zeiger trägt eine Hintergrund-Spur die ruhende Linie (gleiche Lage wie ::after, +0,5 px wegen
     background-position-Bezug), die text-decoration tritt zurück: so liegen Spur und wachsende Linie pixelgenau übereinander. */
  .textlink:hover,
  .btn-text:not(:disabled):not([aria-disabled="true"]):hover {
    text-decoration-color: transparent;
    background-image: linear-gradient(var(--color-accent-line), var(--color-accent-line));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 calc(50% + 0.34em + 4.5px);
  }
}
/* Pfeil rückt in Pfeilrichtung, Aufklapp-Winkel in Klapprichtung (translate, getrennt von der Drehung) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .textlink:hover .icon:has(use[href="#i-arrow-right"]),
  .btn-text:not(:disabled):not([aria-disabled="true"]):hover .icon:has(use[href="#i-arrow-right"]) { translate: var(--nudge-icon) 0; }
  .textlink:hover .icon:has(use[href="#i-arrow-left"]),
  .btn-text:not(:disabled):not([aria-disabled="true"]):hover .icon:has(use[href="#i-arrow-left"]) { translate: calc(-1 * var(--nudge-icon)) 0; }
  .textlink:hover .icon:has(use[href="#i-arrow-down"]) { translate: 0 calc(var(--nudge-icon) - 1px); }
  .btn-text:not(:disabled):not([aria-disabled="true"]):not([aria-expanded="true"]):hover .icon:has(use[href="#i-caret-down"]) { translate: 0 calc(var(--nudge-icon) - 1px); }
  .btn-text[aria-expanded="true"]:not(:disabled):hover .icon:has(use[href="#i-caret-down"]) { translate: 0 calc(1px - var(--nudge-icon)); }
}

/* ---------- Fokus ---------- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
.on-paper :focus-visible { outline-color: var(--color-focus-on-paper); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Raster und Abschnitte ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.section { padding-block: var(--space-section); }
/* Abschnittstöne 1/2/3 aus dem Wireframe (data-wf-tone) — im Mockup als data-tone */
[data-tone="1"] { background: var(--color-surface); }
[data-tone="2"] { background: var(--color-surface-alt); }
[data-tone="3"] { background: var(--color-surface-inverse); }
/* Ein Trennmechanismus zwischen Abschnitten: Haarlinie an Tonwechseln */
[data-tone="2"], [data-tone="3"] { border-block: 1px solid var(--color-line); }
/* Auf Stein (Ton 3) ist „subtle“ zu schwach: gedämpfte Teile laufen dort über „muted“ */
[data-tone="3"] .dim { color: var(--color-text-muted); }
.stack { display: grid; gap: var(--space-stack); align-content: start; }
.grid-12 { display: grid; gap: var(--space-stack); }
@media (min-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}

/* ---------- Icons ---------- */
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  font-family: var(--f-page);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  --_move: var(--dur-hover);   /* Anheben/Absetzen; beim Drücken --dur-press */
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out),
    translate var(--_move) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; transition: translate var(--dur-hover) var(--ease-out); }
/* Schatten beim Anheben: eigene Ebene, nur Deckkraft wird animiert (Runde 3). Außenschatten zeichnet nie unter den Text. */
.btn::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: var(--shadow-button-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.btn:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]):active { transform: scale(var(--press-scale)); --_move: var(--dur-press); }
.btn:active::before { opacity: 0; transition-duration: var(--dur-press); }
/* Hauptaktion: einzige Türkis-Füllung der Seite */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-button);
}
.btn--primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--color-accent-pressed); }
/* Zweitaktion auf der Seite: Kontur, keine Füllung */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line-input);
}
.btn--secondary:not(:disabled):not([aria-disabled="true"]):active { background: var(--color-ui-raised); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--color-accent-hover); }
  .btn--secondary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--color-ui-window); border-color: var(--color-text-subtle); }
  .btn:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]):hover::before { opacity: 1; }
  .btn--secondary:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]):hover::before { opacity: 0.6; }
  .btn:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]):active::before { opacity: 0; }
  /* Gedrückt schlägt Hover (vorher gewann die Hover-Fläche, weil sie später steht) */
  .btn--primary:not(:disabled):not([aria-disabled="true"]):hover:active { background: var(--color-accent-pressed); }
  .btn--secondary:not(:disabled):not([aria-disabled="true"]):hover:active { background: var(--color-ui-raised); }
}
/* Anheben und Pfeil-Rücken nur mit Maus/Trackpad und ohne Reduced Motion; Drücken setzt den Knopf ab (scale 0,97) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]):hover { translate: 0 var(--lift-hover); }
  .btn:not(:disabled):not([aria-disabled="true"]):not([data-loading="true"]):active { translate: none; }
  .btn:not(:disabled):not([aria-disabled="true"]):hover .icon:has(use[href="#i-arrow-right"]),
  .btn-ui:not(:disabled):not([aria-disabled="true"]):hover .icon:has(use[href="#i-arrow-right"]) { translate: var(--nudge-icon) 0; }
  .btn:not(:disabled):not([aria-disabled="true"]):hover .icon:has(use[href="#i-arrow-left"]),
  .btn-ui:not(:disabled):not([aria-disabled="true"]):hover .icon:has(use[href="#i-arrow-left"]) { translate: calc(-1 * var(--nudge-icon)) 0; }
}
.btn--m { min-height: 48px; padding: 0 var(--s-5); }
.btn--s { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-button-s); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-disabled-surface);
  border-color: var(--color-disabled-line);
  color: var(--color-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
.btn--secondary:disabled, .btn--secondary[aria-disabled="true"] { background: transparent; }
/* Laden: Beschriftung bleibt im Fluss (keine Breitenänderung), Ladezeichen liegt darüber */
.btn[data-loading="true"] { cursor: progress; }
.btn[data-loading="true"] > * , .btn[data-loading="true"] .btn__label { opacity: 0; }
.btn[data-loading="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: wdf-spin var(--dur-spin) linear infinite;
}
/* CTA-Gruppe: Button + Mikrozeile (überall gleich) */
.cta { display: grid; gap: var(--s-2); justify-items: stretch; }
.cta .btn { width: 100%; }
@media (min-width: 768px) {
  .cta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); }
  .cta .btn { width: auto; }
}

/* ---------- Tags, Tasten ---------- */
.tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--s-2);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  font-family: var(--f-ui);
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.kbd {
  display: none;
  font-family: var(--f-mono);
  font-size: var(--fs-kbd);
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid var(--color-line-strong);
  border-radius: 4px;
  color: var(--color-text-subtle);
}
@media (min-width: 768px) { .kbd { display: inline-block; } }

/* ---------- Zustandszeichen: Form UND Farbe ----------
   gestrichelt = noch nicht da · halb = in Arbeit · voll mit Haken = erledigt · Raute = Abweichung · Ring = geprüft/nicht gewählt */
.glyph {
  --g: 14px;
  width: var(--g); height: var(--g); flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: var(--color-on-accent);
}
.glyph .icon { width: calc(var(--g) * 0.64); height: calc(var(--g) * 0.64); }
.glyph--s { --g: 12px; }
.glyph--l { --g: 18px; }
.glyph--new { border: 1.5px dashed var(--color-text-subtle); }
.glyph--doing {
  border: 1.5px solid var(--color-warn);
  padding: 2px;
  background: conic-gradient(var(--color-warn) 0 50%, transparent 50% 100%) content-box;
}
.glyph--ok { background: var(--color-accent); }
.glyph--ok-outline { border: 1.5px solid var(--color-accent); color: var(--color-accent); }
.glyph--warn {
  width: calc(var(--g) * 0.72); height: calc(var(--g) * 0.72);
  margin: calc(var(--g) * 0.14);
  border-radius: 2px;
  background: var(--color-warn);
  transform: rotate(45deg);
}
.glyph--miss { border: 1.5px dashed var(--color-miss); }
.glyph--all, .glyph--none { border: 1.5px solid var(--color-text-subtle); }
.glyph--unknown {
  border: 1.5px dashed var(--color-paper-warn);
  color: var(--color-paper-warn);
  font-family: var(--f-page);
  font-size: 11px;
  font-weight: var(--fw-bold);
  font-style: normal;
}

/* Status in Tabellen: Zeichen + Wort */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.status--done { color: var(--color-text); }

/* Markierungs-Chips (Agent 70, Prüfschritte 80): deckend, Radius 6, eine Familie */
.mark {
  position: relative; z-index: var(--z-raised);
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px 0 8px;
  border: 1px solid; border-radius: var(--r-s);
  font-family: var(--f-ui);
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  background-color: var(--color-ui-window);
}
.mark--ok {
  color: var(--color-accent); border-color: var(--color-accent-line);
  background-image: linear-gradient(var(--color-accent-tint), var(--color-accent-tint));
}
.mark--warn {
  color: var(--color-warn); border-color: var(--color-warn-line);
  background-image: linear-gradient(var(--color-warn-chip), var(--color-warn-chip));
}
.mark--miss { color: var(--color-miss); border-color: var(--color-miss-line); border-style: dashed; }
.mark--neutral { color: var(--color-text-muted); border-color: var(--color-line-strong); }
/* „Bereit für den Bau“: Status, kein Button — Radius 6, 32 px, ohne Kontur, Türkis auf Tönung */
.chip-ready {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-3) 0 10px;
  border-radius: var(--r-s);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* ==========================================================================
   App-Fenster (Software-Stimme: Geist). Alles in .ui spricht Geist, nichts außerhalb.
   ========================================================================== */
.ui {
  font-family: var(--f-ui);
  font-feature-settings: "ss01", "cv11";
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--color-text);
}
.ui-window {
  position: relative;
  background: var(--color-ui-window);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.ui-window__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--color-line);
}
.ui-window__bar .tag { margin-left: auto; }
.ui-window__title {
  font-size: var(--fs-ui-title);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.ui-window__body { padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-3); }
.ui-window__foot {
  display: grid; gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-ui-meta);
  color: var(--color-text-muted);
}
.ui-window__foot b { font-weight: var(--fw-medium); color: var(--color-text); }
.ui-window__band { background: var(--color-surface-alt); border-top: 1px solid var(--color-line); padding: var(--s-3) var(--s-4) var(--s-4); }
@media (min-width: 768px) {
  .ui-window__foot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
}

/* Knöpfe in der App: nie Türkis-Füllung */
.btn-ui {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m);
  background: var(--color-ui-overlay);
  color: var(--color-text);
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.btn-ui .icon { width: 16px; height: 16px; transition: translate var(--dur-hover) var(--ease-out); }
.btn-ui--quiet { background: transparent; border-color: var(--color-line-strong); color: var(--color-text-muted); }
.btn-ui:not(:disabled):not([aria-disabled="true"]):active { transform: scale(var(--press-scale)); background: var(--color-ui-raised); }
@media (hover: hover) and (pointer: fine) {
  .btn-ui:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--color-line-input); color: var(--color-text); background: var(--color-ui-overlay-hover); }
  .btn-ui--quiet:not(:disabled):not([aria-disabled="true"]):hover { background: var(--color-ui-raised); }
  .btn-ui:not(:disabled):not([aria-disabled="true"]):hover:active { background: var(--color-ui-raised); }
}
.btn-ui:disabled, .btn-ui[aria-disabled="true"] { background: transparent; border-color: var(--color-disabled-line); color: var(--color-disabled-text); cursor: not-allowed; }
.btn-ui[data-loading="true"] { position: relative; color: transparent; cursor: progress; }
.btn-ui[data-loading="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--color-text); border-right-color: transparent;
  animation: wdf-spin var(--dur-spin) linear infinite;
}

/* Suche (Eingabe in der App) */
.ui-search {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  background: var(--color-ui-raised);
  border: 1px solid var(--color-line-input);
  border-radius: var(--r-m);
  color: var(--color-text-subtle);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ui-search .icon { width: 16px; height: 16px; }
.ui-search input {
  flex: 1; min-width: 0; height: 42px;
  border: 0; background: transparent; outline: none;
  font-family: var(--f-ui);
  font-size: var(--fs-input);
  color: var(--color-text);
}
.ui-search input::placeholder { color: var(--color-text-subtle); opacity: 1; }
.ui-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .ui-search:hover:not(:focus-within) { border-color: var(--color-text-subtle); }
}
@media (min-width: 768px) {
  .ui-search, .ui-search input { min-height: 40px; height: 38px; }
  .ui-search { height: 40px; }
  .ui-search input { font-size: var(--fs-ui); }
}

/* Segment-Schalter (Rolle, Ohne/Mit Rollen, Zustand) */
/* Knöpfe brechen zwischen Wörtern um, statt überzulaufen (K-UI-02: 30 % längere Texte bei 390). Spalten bleiben
   1fr (Mindestbreite = längstes Wort): bei Platz gleich breit, eng geben kurze Knöpfe Breite ab („Disposition“ bei 320).
   Darum kein min-width: 0 am Knopf, sonst würden einzelne lange Wörter abgeschnitten. */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-m);
}
.seg button {
  display: flex; align-items: center; justify-content: center;   /* Punkt bleibt neben dem Text, nur der Text bricht um */
  min-height: 40px;
  padding: var(--s-1) var(--s-2);
  border: 1px solid transparent;
  border-radius: calc(var(--r-m) - 3px);
  color: var(--color-text-muted);
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  white-space: normal;
  text-wrap: balance;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.seg button[aria-pressed="true"] {
  background: var(--color-ui-raised);
  border-color: var(--color-line-strong);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
}
.seg button[aria-pressed="true"]::before {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--color-accent);
}
.seg button:not(:disabled):active { transform: scale(var(--press-scale)); }
/* Drücken (auch Touch): nicht gewählter Knopf bekommt sofort die Fläche des gewählten (Runde 3) */
.seg button:not([aria-pressed="true"]):not(:disabled):active { color: var(--color-text); background: var(--color-ui-raised); }
.seg button:disabled { color: var(--color-disabled-text); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .seg button:not([aria-pressed="true"]):not(:disabled):hover { color: var(--color-text); background: var(--color-ui-window); border-color: var(--color-line); }
  .seg button:not([aria-pressed="true"]):not(:disabled):hover:active { background: var(--color-ui-raised); border-color: var(--color-line-strong); }
}
/* Segment-Schieber (Bewegung segment-schalter, motion.js; entworfen in P8-U, nach base.css verschoben in P9-G0)
   Schieber hinter den Knöpfen: gleitet per transform unter den gewählten Knopf (--dur-base, --ease-out), setzt am
   aktuellen Wert an und ist damit unterbrechbar. Gilt für jedes .seg (Rolle in 10, Ohne/Mit Rollen in 40).
   data-thumb setzt nur motion.js (nicht unter Reduced Motion, nicht ohne JS): sonst bleibt der Hintergrundwechsel
   des Knopfs (Farbe, --dur-fast) wie in base.css. Im Modus „hohe Kontraste“ bleibt die Kontur des Knopfs. */
.seg__thumb { position: absolute; pointer-events: none; }   /* nie als Rasterspalte */
@media (forced-colors: active) { .seg__thumb { display: none; } }
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .seg[data-thumb] { position: relative; isolation: isolate; }
  .seg[data-thumb] > button { position: relative; z-index: 1; }
  .seg[data-thumb] > button[aria-pressed="true"] { background: transparent; border-color: transparent; box-shadow: none; }
  .seg__thumb {
    position: absolute; z-index: 0;
    top: 3px; bottom: 3px; left: 0;   /* Breite und Versatz misst motion.js (transform: translateX + scaleX) */
    transform-origin: 0 50%;
    background: var(--color-ui-raised);
    border: 1px solid var(--color-line-strong);
    border-radius: calc(var(--r-m) - 3px);
    box-shadow: var(--shadow-1);
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out);
  }
  /* Der Punkt am gewählten Knopf kommt mit dem Schieber an, statt zu springen */
  .seg[data-thumb] > button[aria-pressed="true"]::before { transition: opacity var(--dur-base) var(--ease-out); }
  @starting-style {
    .seg[data-thumb] > button[aria-pressed="true"]::before { opacity: 0; }
  }
}

/* Tabelle: mobil Zeile + ID darunter, ab 768 Spalten */
.ui-table { border-top: 1px solid var(--color-line); }
.ui-table__head { display: none; }
.ui-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "task status" "id status";
  column-gap: var(--s-3); row-gap: 2px;
  align-items: center;
  min-height: 56px;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--color-line);
  transition: background-color var(--dur-base) var(--ease-out);
}
.ui-table__task { grid-area: task; color: var(--color-text); }
.ui-table__id { grid-area: id; font-family: var(--f-mono); font-variant-numeric: slashed-zero; font-size: var(--fs-mono); color: var(--color-text-muted); }
.ui-table__status { grid-area: status; }
.ui-table__row--done { background: var(--color-accent-tint); }
.ui-table__empty {
  display: grid; gap: var(--s-1); justify-items: start;
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .ui-table__head, .ui-table__row {
    grid-template-columns: minmax(0, 1fr) 76px 120px;
    grid-template-areas: "task id status";
  }
  .ui-table__head {
    display: grid; column-gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--color-line);
    font-size: var(--fs-ui-colhead);
    font-weight: var(--fw-medium);
    color: var(--color-text-subtle);
  }
  .ui-table__row { min-height: 44px; }
  .ui-table__id { font-size: var(--fs-mono-l); }
}

/* Meldung (Toast): liegt über dem Fensterinhalt, verschiebt nichts */
.toast {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 10px var(--s-3);
  background: var(--color-ui-overlay);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.toast .mono { font-size: var(--fs-mono); }
.toast[data-state="hidden"] {
  opacity: 0;
  transform: translateY(var(--motion-distance-s));
  pointer-events: none;
  transition-duration: var(--dur-exit);
}
.toast-slot { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: var(--z-toast); }

/* Skelett (Laden): ruhiges Pulsieren über Deckkraft */
.skeleton {
  display: block;
  border-radius: var(--r-s);
  background: var(--color-ui-raised);
  animation: wdf-pulse var(--dur-pulse) var(--ease-in-out) infinite alternate;
}
.skeleton--line { height: 12px; }
.skeleton--block { height: 44px; border-radius: var(--r-m); }

/* Ladezeichen allein */
.spinner {
  display: inline-block; width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--color-text-muted); border-right-color: transparent;
  animation: wdf-spin var(--dur-spin) linear infinite;
}
.loading-line { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--color-text-muted); font-size: var(--fs-ui-meta); }

@keyframes wdf-spin { to { transform: rotate(360deg); } }
@keyframes wdf-pulse { from { opacity: 1; } to { opacity: 0.45; } }

/* ==========================================================================
   Formularfelder (Rechner 30, später Kontakt). Mobil immer 16 px.
   ========================================================================== */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text); }
.ui .field__label { font-family: var(--f-ui); font-size: var(--fs-ui); }
.field__hint { font-size: var(--fs-ui-meta); color: var(--color-text-muted); }
.field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-ui-meta);
  font-weight: var(--fw-medium);
  color: var(--color-error);
}
.field__error .icon { width: 16px; height: 16px; margin-top: 1px; }
.input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  background: var(--color-ui-raised);
  border: 1px solid var(--color-line-input);
  border-radius: var(--r-m);
  color: var(--color-text);
  font-family: var(--f-ui);
  font-size: var(--fs-input);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
textarea.input { min-height: 96px; padding-block: var(--s-2); line-height: var(--lh-ui); resize: vertical; }
.input::placeholder { color: var(--color-text-subtle); opacity: 1; }
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--color-error); }
.input:disabled { background: transparent; border-color: var(--color-line-strong); color: var(--color-disabled-text); cursor: not-allowed; }
.input[readonly] { background: transparent; border-style: dashed; }
@media (hover: hover) and (pointer: fine) {
  .input:not(:focus):not(:disabled):not([aria-invalid="true"]):hover { border-color: var(--color-text-subtle); }
}
/* Zahl mit Einheit (Rechner) */
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit .input { padding-right: calc(var(--s-3) + 4.5ch); text-align: right; }
.input-unit__suffix {
  position: absolute; right: var(--s-3);
  font-family: var(--f-ui); font-size: var(--fs-ui); color: var(--color-text-muted);
  pointer-events: none;
}
input[type="number"].input { -moz-appearance: textfield; }
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (min-width: 768px) {
  .ui .input { font-size: var(--fs-ui-title); min-height: 40px; }
}

/* ==========================================================================
   Aufklapper (FAQ 110, Preis-Aufklapper 100). Panel öffnet über [hidden] (ui.js); ohne JS offen.
   ========================================================================== */
.disclosure { border-bottom: 1px solid var(--color-line); }
.disclosure__heading { font-size: inherit; font-weight: inherit; }
.disclosure__btn {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; min-height: 56px;
  padding: var(--s-3) 0;
  text-align: left;
  font-family: var(--f-page);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  border-radius: var(--r-s);
}
.disclosure__icon {
  position: relative; flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  color: var(--color-text-muted);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.disclosure__icon::before, .disclosure__icon::after {
  content: ""; position: absolute;
  width: 12px; height: 1.5px; border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.disclosure__icon::after { transform: rotate(90deg); }
.disclosure__btn[aria-expanded="true"] .disclosure__icon::after { transform: rotate(0deg); }
.disclosure__btn[aria-expanded="true"] .disclosure__icon { color: var(--color-text); border-color: var(--color-line-input); }
.disclosure__btn:not(:disabled):active .disclosure__icon { transform: scale(var(--press-scale)); }
/* Zeilenfläche (Runde 3): warmes Licht hinter der ganzen Zeile, 12 px über den Text hinaus; nur Deckkraft wird animiert.
   Hover 60 %, Drücken 100 % (auch Touch). Die Zeile selbst skaliert nicht (zu breit), die Kachel schon. */
.disclosure__btn::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(-1 * var(--s-3));
  border-radius: var(--r-m);
  background: var(--color-press-wash);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.disclosure__btn:not(:disabled):active::before { opacity: 1; transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) {
  .disclosure__btn:hover .disclosure__icon { background: var(--color-ui-window); color: var(--color-text); border-color: var(--color-line-input); }
  .disclosure__btn:hover::before { opacity: 0.6; }
  .disclosure__btn:hover:active::before { opacity: 1; }
}
.disclosure__panel {
  padding: 0 calc(28px + var(--s-4)) var(--s-5) 0;
  color: var(--color-text-muted);
  max-width: var(--measure);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.disclosure__panel p + p { margin-top: var(--s-3); }
@starting-style {
  .disclosure__panel { opacity: 0; transform: translateY(-4px); }
}

/* ---------- Personenzeile (80, 120) ---------- */
.person { display: flex; align-items: center; gap: 14px; }
.person__photo {
  flex: none; width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--color-ui-raised);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-title);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__text { display: grid; gap: 1px; font-size: var(--fs-small); line-height: 1.45; }
.person__label { font-size: var(--fs-ui-meta); font-weight: var(--fw-medium); color: var(--color-text-muted); }
.person__name { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--color-text); }
.person__role { color: var(--color-text-muted); }

/* ==========================================================================
   Kopfzeile + Menü (Partial header.html)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-header-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--color-surface); }
}
/* Offenes Menü (und während des Ausgangs, .is-closing setzt ui.js): ohne Unschärfe, sonst wird die Kopfzeile
   Bezugsrahmen der fixierten Menüfläche */
.site-header.is-open, .site-header.is-closing { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header__bar {
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--header-h);
}
.site-header__logo {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-right: auto;
  border-radius: var(--r-s);
}
.site-header__logo img { height: 26px; width: auto; }
.site-header__cta { display: none; }
.site-header__menu-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; min-width: 44px;
  padding: 0 var(--s-3);
  margin-right: calc(-1 * var(--s-3));
  border-radius: var(--r-s);
  font-family: var(--f-page);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.site-header__menu-btn .icon { width: 20px; height: 20px; color: var(--color-text-muted); }
.site-header__menu-btn:active { transform: scale(var(--press-scale)); }
.site-header__menu-btn .icon--close, .site-header__menu-btn .label--close { display: none; }
.site-header.is-open .site-header__menu-btn .icon--open,
.site-header.is-open .site-header__menu-btn .label--open { display: none; }
.site-header.is-open .site-header__menu-btn .icon--close,
.site-header.is-open .site-header__menu-btn .label--close { display: inline; }

/* Navigation mobil: volle Fläche unter der Kopfzeile.
   Eingang --dur-base, Ausgang --dur-exit: display wechselt dank allow-discrete erst nach dem Ausblenden.
   Lage und Fläche stehen im Grundzustand, damit beim Ausgang nichts springt. */
.site-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
  display: none; grid-template-rows: auto 1fr auto; gap: var(--s-5); /* Ersparnis-Check · Liste · CTA */
  padding: var(--s-2) var(--page-pad) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(calc(-1 * var(--motion-distance-s)));
  transition:
    opacity var(--dur-exit) var(--ease-out),
    transform var(--dur-exit) var(--ease-out),
    display var(--dur-exit) allow-discrete;
}
.site-header.is-open .site-nav {
  display: grid;
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-base);
}
@starting-style {
  .site-header.is-open .site-nav { opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-s))); }
}
.site-nav__list { display: grid; align-content: start; }
.site-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; min-height: 56px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--f-page);
  font-size: var(--fs-menu);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
}
.site-nav__link .icon { width: 16px; height: 16px; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); }
.site-nav__group-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__link[aria-current="true"],
.site-nav__link[aria-current="page"],
.site-nav__group-btn.is-current {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.site-nav__sub { display: grid; padding: var(--s-1) 0 var(--s-2) var(--s-4); }
.site-nav__sub a {
  display: flex; align-items: center; min-height: 48px;
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--color-text-muted); text-decoration: none;
  border-radius: var(--r-s);
}
/* Lösungen-Einträge mit Kurzbeschreibung (Prinzip 21): Titel + eine Zeile Beschreibung */
.site-nav__sub a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: var(--s-2); }
.site-nav__sub-title { color: var(--color-text); }
.site-nav__sub-desc { font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: 1.35; color: var(--color-text-muted); text-wrap: pretty; }
/* Aktuelle Lösungsseite (aria-current="page", ui.js, P24-DS): Titel mit 2-px-Unterstreichung Türkis */
.site-nav__sub a[aria-current="page"] .site-nav__sub-title {
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.site-nav__sep { height: 1px; margin: var(--s-1) 0; background: var(--color-line); }

/* Ersparnis-Check (P24-DS): zweite Aktion neben der Hauptaktion, nie gefüllt.
   Mobil: hervorgehobene Zeile ganz oben im Menü (Fenster-Fläche, Zeichen auf Türkis-Tönung, Kurztext). */
.site-nav__check {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  min-height: 72px; padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
  background: var(--color-ui-window);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-l);
  color: var(--color-text); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.site-nav__check:active { transform: scale(var(--press-scale)); background: var(--color-ui-raised); }
.site-nav__check-icon, .site-header__check-icon { position: relative; display: inline-grid; place-items: center; color: var(--color-accent); }
.site-nav__check-icon { width: 40px; height: 40px; border-radius: var(--r-m); background: var(--color-accent-tint); }
.site-nav__check-icon .icon { width: 22px; height: 22px; }
/* türkiser Punkt: Hinweis „Werkzeug“, rein dekorativ */
.site-nav__check-icon::after, .site-header__check-icon::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-ui-window);
}
.site-nav__check-icon::after { top: -3px; right: -3px; width: 8px; height: 8px; }
.site-nav__check-text { display: grid; gap: 2px; min-width: 0; }
.site-nav__check-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-title); }
.site-nav__check-sub { font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.4; text-wrap: pretty; }
.site-nav__check-arrow { width: 18px; height: 18px; color: var(--color-text-muted); }
.site-nav__check[aria-current="page"] { border-color: var(--color-accent-line); }
.site-header__check { display: none; }
html:not(.js) .site-nav__check { margin-bottom: var(--s-2); }
.site-nav__cta { display: grid; gap: var(--s-2); }
html.is-menu-open { overflow: hidden; }
/* Terminbuchung offen (Scurio-Pop-up, ui.js § 9): Seite dahinter scrollt nicht */
html.is-booking-open { overflow: hidden; }

/* ==========================================================================
   Telefon (P24-DS, Komponente „telefon“, komponenten.md): Festnetz „Büro“ + Mobil mit Etikett „KI-Agent“.
   Varianten: normal (Karten, Kontaktblöcke, Impressum) · .tel-list--compact (Fußzeile: Hinweis entfällt, Etikett bleibt).
   Doppelte Klasse bei der Liste: setzt sich gegen Listenstile in Rechtstexten (.legal ul) durch.
   ========================================================================== */
.tel-list.tel-list { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; max-width: none; }
.tel-list > li { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); }
.tel-list__num {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  color: var(--color-text); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px;
  border-radius: var(--r-s);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.tel-list__num .icon { width: 16px; height: 16px; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .tel-list__num:hover { text-decoration-color: var(--color-accent); } }
.tel-list__note { font-size: var(--fs-micro); color: var(--color-text-muted); }
.tel-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 24px; padding: 0 var(--s-2);
  border: 1px solid var(--color-accent-line); border-radius: var(--r-s);
  font-family: var(--f-page); font-size: var(--fs-ui-meta); font-weight: var(--fw-semibold); line-height: 1;
  color: var(--color-accent); white-space: nowrap;
}
.tel-chip .icon { width: 12px; height: 12px; }
/* Einmaliger Puls beim ersten Erscheinen (ui.js setzt .is-seen): Ring aus Deckkraft + Größe, kein Dauerleuchten */
.tel-chip::after {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--color-accent); border-radius: inherit;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .tel-chip.is-seen::after { animation: tel-chip-pulse 1200ms var(--ease-out) 300ms 1; }
}
@keyframes tel-chip-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18, 1.5); }
}
.tel-list__hint { flex-basis: 100%; margin-top: calc(-1 * var(--s-1)); font-size: var(--fs-micro); line-height: 1.4; color: var(--color-text-muted); text-wrap: pretty; }
.tel-list--compact .tel-list__hint { display: none; }
.tel-list--compact.tel-list { gap: 0; }
/* Kontaktblock „Lieber direkt?“ in Buchungsabschnitten: setzt sich gegen die alte Zeilen-Anordnung (Punkte) durch */
.tel-block.tel-block { display: grid; gap: var(--s-2); justify-items: start; }
.tel-block.tel-block > * + *::before { content: none; }
.tel-block p { margin: 0; }
/* Text nur mit bzw. nur ohne JavaScript (z. B. „öffnet in neuem Tab“ nur, wenn der Link ohne JS wirklich einen Tab öffnet) */
html.js .nojs-only, html:not(.js) .js-only { display: none; }

/* Ohne JavaScript: Navigation als Zeile unter dem Logo, Gruppe entfällt (Lösungen stehen in der Fußzeile) */
html:not(.js) .site-header__bar { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: var(--s-2); row-gap: 0; }
html:not(.js) .site-header__menu-btn,
html:not(.js) .site-nav__group,
html:not(.js) .site-nav__cta { display: none; }
html:not(.js) .site-nav { position: static; display: block; width: 100%; padding: 0; background: none; overflow: visible; opacity: 1; transform: none; }
html:not(.js) .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
html:not(.js) .site-nav__link { min-height: 44px; border: 0; font-size: var(--fs-small); width: auto; }

@media (min-width: 1024px) {
  .site-header__logo { margin-right: var(--s-5); }
  .site-header__menu-btn { display: none; }
  .site-header__cta { display: inline-flex; }
  .site-nav, .site-header.is-open .site-nav,
  html:not(.js) .site-nav {
    position: static; display: block; width: auto;
    margin-right: auto; padding: 0;
    background: none; overflow: visible;
    opacity: 1; transform: none; transition: none;
  }
  html:not(.js) .site-header__bar { flex-wrap: nowrap; height: var(--header-h); padding-block: 0; }
  html:not(.js) .site-nav__group { display: none; }
  .site-nav__list, html:not(.js) .site-nav__list { display: flex; align-items: center; gap: var(--s-1); }
  .site-header__logo { flex-shrink: 0; }
  .site-nav__link, html:not(.js) .site-nav__link {
    width: auto; min-height: 40px; white-space: nowrap;
    padding: 0 var(--s-3);
    border: 0; border-radius: var(--r-s);
    font-size: var(--fs-small); font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .site-nav__link .icon { width: 12px; height: 12px; }
  .site-nav__link[aria-current="true"], .site-nav__link[aria-current="page"], .site-nav__group-btn.is-current { color: var(--color-text); text-underline-offset: 10px; }
  .site-nav__group { position: relative; }
  .site-nav__sub {
    position: absolute; top: calc(100% + var(--s-2)); left: calc(-1 * var(--s-2));
    z-index: var(--z-popover);
    min-width: 264px; width: 340px;
    padding: var(--s-2);
    background: var(--color-ui-window);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-popover);
    transform-origin: top left;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  @starting-style {
    .site-nav__sub { opacity: 0; transform: translateY(-4px) scale(0.98); }
  }
  .site-nav__sub a {
    min-height: 40px; padding: var(--s-2) var(--s-3);
    font-size: var(--fs-small); color: var(--color-text);
    border-radius: calc(var(--r-l) - var(--s-2));
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .site-nav__cta { display: none; }
  /* Ersparnis-Check ab 1024: Textlink vor der Hauptaktion (Zeichen + türkiser Punkt), Menü-Eintrag entfällt */
  .site-nav__check, html:not(.js) .site-nav__check { display: none; }
  .site-header__check {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 40px; padding: 0 var(--s-3); margin-right: calc(-1 * var(--s-3));
    border-radius: var(--r-s);
    font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
    color: var(--color-text); text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .site-header__check-icon .icon { width: 18px; height: 18px; }
  .site-header__check-icon::after { top: -2px; right: -3px; width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--color-surface); }
  .site-header__check:active { background: var(--color-ui-raised); }
  .site-header__check[aria-current="page"] {
    text-decoration: underline; text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px; text-underline-offset: 10px;
  }
}
/* 1024–1279: nur „Ersparnis“ sichtbar, „berechnen“ bleibt im zugänglichen Namen (Kopfzeile bricht nicht um).
   Seit „Blog“ in der Hauptnavigation steht (P31-DS): Menüpunkte mit 8 statt 12 px Innenabstand, Logo-Abstand 16 px, kein Umbruch. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__logo { margin-right: var(--s-4); }
  .site-nav__link, html:not(.js) .site-nav__link { padding: 0 var(--s-2); }
  .site-header__check-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-nav__link:hover { color: var(--color-text); background: var(--color-ui-window); }
  .site-header__check:hover { background: var(--color-ui-window); }
  .site-nav__sub a:hover { background: var(--color-ui-overlay); }
}
/* Drücken (Runde 3): Navigationslink und Gruppeneintrag bekommen kurz die erhabene Fläche, ohne Größenänderung */
@media (min-width: 1024px) {
  .site-nav__link:active { color: var(--color-text); background: var(--color-ui-raised); }
  .site-nav__sub a:active { background: var(--color-ui-raised); }
}
@media (hover: hover) and (pointer: fine) {
  .site-header__menu-btn:hover { background: var(--color-ui-window); }
}

/* ==========================================================================
   Stehende Leiste (Smartphone/Tablet bis 1023 px). Sichtbarkeit steuert ui.js.
   ========================================================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--sticky-cta-h);
  padding: var(--s-3) var(--page-pad) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--color-header-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-line-strong);
  box-shadow: var(--shadow-sticky);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.sticky-cta[data-visible="false"] {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--dur-exit);
}
/* Einblenden 150 ms verzögert, Ausblenden sofort: kein Flackern beim Scrollen über CTAs. Unter Reduced Motion ohne Verzögerung. */
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta[data-visible="true"] { transition-delay: var(--dur-fast); }
}
.sticky-cta__micro { flex: 1 1 0; min-width: 0; font-size: var(--fs-micro); line-height: 1.35; color: var(--color-text-muted); text-wrap: balance; }
.sticky-cta .btn { flex: none; }
@media (max-width: 359px) {
  .sticky-cta { gap: var(--s-2); }
  .sticky-cta .btn { padding-inline: var(--s-4); font-size: var(--fs-button-s); }
}
@media (min-width: 1024px) { .sticky-cta { display: none !important; } }
/* Ziel des CTA-Sprungs: Kalenderkarte steht 16 px unter der Kopfzeile (scroll-padding + --s-2), Button ohne Scrollen sichtbar */
#termin { scroll-margin-block-start: var(--s-2); }

/* ==========================================================================
   Fußzeile (Partial footer.html) — Ton 2
   ========================================================================== */
.site-footer {
  padding-block: var(--s-7) var(--s-5);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.site-footer__grid { display: grid; gap: var(--s-6); }
.site-footer__brand { display: grid; gap: var(--s-3); justify-items: start; max-width: 36ch; }
.site-footer__brand img { height: 26px; width: auto; }
.site-footer__brand p { line-height: 1.5; text-wrap: pretty; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.site-footer__heading { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: var(--s-1); }
.site-footer__cols ul { display: grid; }
.site-footer a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--r-s);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer address { line-height: 1.7; }
.site-footer__address > span { display: block; }
.site-footer address a {
  display: inline-block; min-height: 0;
  /* Klickfläche ≥ 24 px (WCAG 2.5.8) ohne Zeilensprung: Innenabstand, durch negativen Außenabstand ausgeglichen */
  padding-block: var(--s-1); margin-block: calc(-1 * var(--s-1));
  color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px;
}
.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-3);
  border-top: 1px solid var(--color-line);
}
.site-footer__copy { margin-left: auto; color: var(--color-text-muted); }
/* Fußzeile: Telefon (kompakt) + E-Mail in der rechten Hälfte der Anschrift */
.site-footer__reach { display: grid; justify-items: start; align-content: start; }
.site-footer address a.tel-list__num { display: inline-flex; min-height: 44px; padding-block: 0; margin-block: 0; }
/* Spalte Kontakt, unter der Anschrift (P24-DS): Ersparnis-Check (hell, Zeichen Türkis) und Instagram (dezent, einziger Social-Link) */
.site-footer__extra { display: grid; justify-items: start; margin-top: var(--s-2); }
.site-footer__extra a { gap: var(--s-2); }
.site-footer__extra .icon { width: 16px; height: 16px; }
.site-footer__check a { color: var(--color-text); }
.site-footer__check .icon { color: var(--color-accent); }
/* Aktuelle Seite (Impressum, Datenschutz): aria-current="page" setzt ui.js */
.site-footer a[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--color-text); }
}
/* Smartphone kompakt (K-PRJ-08): Linkzeilen 36 px (Trefferfläche bleibt ≥ 24 px), engere Abstände,
   Anschrift links / Telefon + E-Mail rechts. Ziel: Fußzeile bei 390 ≤ 600 px. */
@media (max-width: 767px) {
  .site-footer { padding-block: var(--s-6) var(--s-4); }
  .site-footer__grid { gap: var(--s-5); }
  .site-footer__brand { gap: var(--s-2); max-width: none; }
  .site-footer__brand a { min-height: 0; }   /* Logo 105 × 26 px */
  .site-footer__heading { margin-bottom: 0; }
  .site-footer__cols a, .site-footer__legal a, .site-footer__extra a { min-height: calc(var(--s-6) - var(--s-1)); }
  .site-footer address { line-height: 1.6; }
  .site-footer__address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .site-footer__reach { grid-column: 1 / -1; }  /* Telefon (zwei Nummern + Etikett) braucht die volle Breite */
  .site-footer__legal { margin-top: var(--s-5); padding-top: var(--s-1); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.3fr 2fr 1fr; align-items: start; gap: var(--grid-gap); }
}
/* Platz für die stehende Leiste am Seitenende nicht nötig: sie ist ab der Kalenderkarte ausgeblendet */

/* ==========================================================================
   Redaktionshinweis (Rechtsseiten). Übergang: Die Rechtsseiten sind noch Wireframe-Stubs mit eigenem
   <style> im Abschnitt (#4a3d00 auf undefiniertem --wf-note = 1,71 : 1). Diese Regel schlägt den Stub
   per Spezifität, bis ein Builder die Seiten baut; dann .rt-hint durch .note ersetzen.
   ========================================================================== */
.note, .rt .rt-hint {
  padding: var(--s-2) var(--s-3);
  background: var(--color-warn-tint);
  border: 1px solid var(--color-warn-line);
  border-radius: var(--r-s);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--color-text);      /* 14,06 : 1 auf warn-tint über Grund */
  max-width: var(--measure);
}

/* ==========================================================================
   Bildfläche (.media, data-wdf-component="media", P12-DS · Bildwelt W2)
   Rahmen beschneidet (overflow: clip), Bild darin füllt per object-fit. Für die Bewegungen aus
   wdf/motion-konzept.md § Runde 2: bild-reveal am Rahmen (clip-path, setzt motion.js), bild-tiefe am <img>
   (transform, setzt motion.js). Kein CSS versteckt das Bild vorab; ohne JS / Reduced Motion steht es sofort.
   Aufbau:
   <figure class="media media--card" data-wdf-component="media" data-wdf-motion="bild-reveal">
     <picture data-wdf-slot="…">
       <source media="(min-width: 768px)" srcset="….webp" width="…" height="…">
       <img src="…-mobile.webp" alt="…" width="…" height="…" loading="lazy" decoding="async" data-wdf-motion="bild-tiefe">
     </picture>
   </figure>
   Seitenverhältnis: mobil --media-ratio, ab 768 --media-ratio-l (gleicher Umbruch wie <source media>).
   ========================================================================== */
.media {
  --media-ratio: 2 / 1;
  --media-ratio-l: 16 / 9;
  --media-focus: 50% 50%;      /* Zuschnitt (object-position); Abschnitte dürfen es in Prozent setzen (style-lock § 15) */
  --media-fade-y: 40%;         /* Länge der weichen Kante oben/unten */
  --media-fade-x: 30%;         /* Länge der weichen Kante links/rechts */
  position: relative;
  display: block;
  aspect-ratio: var(--media-ratio);
  overflow: hidden;            /* Rückfall für Browser ohne clip */
  overflow: clip;
  border-radius: var(--r-l);
  background: var(--color-stage); /* Bild lädt / fehlt: Steinfläche, kein Springen dank aspect-ratio */
  isolation: isolate;
}
.media > picture, .media > img { position: absolute; inset: 0; }
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focus);
  transform-origin: 50% 50%;
}
@media (min-width: 768px) {
  .media { aspect-ratio: var(--media-ratio-l); }
}

/* Seitenverhältnisse mobil (Mobil-Zuschnitte sind 2:1; Bänder schneiden davon zu) */
.media--s-2x1 { --media-ratio: 2 / 1; }
.media--s-13x7 { --media-ratio: 13 / 7; }   /* Band 390 × 210 (20, 120) */
.media--s-13x5 { --media-ratio: 13 / 5; }   /* Band 390 × 150 (50) */
.media--s-none { display: none; }           /* mobil kein Bild (z. B. 90) */
/* Seitenverhältnisse ab 768 */
.media--l-16x9 { --media-ratio-l: 16 / 9; }
.media--l-16x7 { --media-ratio-l: 16 / 7; } /* Band unter dem Fließtext (20) */
.media--l-5x4 { --media-ratio-l: 5 / 4; }   /* Rasterfeld neben Karten (90) */
.media--l-4x3 { --media-ratio-l: 4 / 3; }
@media (min-width: 768px) {
  .media--s-none { display: block; }
}

/* Form: Karte (Rasterfeld neben Karten, 90) = Radius + Haarlinie wie kundenstimme · Band = bündig, ohne Radius */
.media--card { border: 1px solid var(--color-line-strong); }
.media--band { border-radius: 0; }

/* Weiche Kanten: Maske am Rahmen, das Bild gleitet bei bild-tiefe darunter. Kombinierbar.
   .media--fade-{t|b|l|r}      gilt auf allen Breiten
   .media--fade-s-{t|b|l|r}    nur unter 768 (Mobil-Zuschnitt)
   .media--fade-l-{t|b|l|r}    nur ab 768 (Desktop-Zuschnitt)
   Die Maske ist die einzige Verlaufsart neben der Hero-Bühne (style-lock Regel 7). Bündiger Rand → mit .media--band. */
.media[class*="media--fade"] {
  --_ft: #000; --_fb: #000; --_fl: #000; --_fr: #000;
  -webkit-mask-image:
    linear-gradient(to bottom, var(--_ft), #000 var(--media-fade-y), #000 calc(100% - var(--media-fade-y)), var(--_fb)),
    linear-gradient(to right, var(--_fl), #000 var(--media-fade-x), #000 calc(100% - var(--media-fade-x)), var(--_fr));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, var(--_ft), #000 var(--media-fade-y), #000 calc(100% - var(--media-fade-y)), var(--_fb)),
    linear-gradient(to right, var(--_fl), #000 var(--media-fade-x), #000 calc(100% - var(--media-fade-x)), var(--_fr));
  mask-composite: intersect;
}
.media.media--fade-t { --_ft: transparent; }
.media.media--fade-b { --_fb: transparent; }
.media.media--fade-l { --_fl: transparent; }
.media.media--fade-r { --_fr: transparent; }
@media (max-width: 767px) {
  .media.media--fade-s-t { --_ft: transparent; }
  .media.media--fade-s-b { --_fb: transparent; }
  .media.media--fade-s-l { --_fl: transparent; }
  .media.media--fade-s-r { --_fr: transparent; }
}
@media (min-width: 768px) {
  .media.media--fade-l-t { --_ft: transparent; }
  .media.media--fade-l-b { --_fb: transparent; }
  .media.media--fade-l-l { --_fl: transparent; }
  .media.media--fade-l-r { --_fr: transparent; }
}

/* Randlage: mobil über den Seitenrand auf volle Breite (Band am Abschnittsanfang, 20/50/120) */
@media (max-width: 767px) {
  .media--bleed-s {
    margin-inline: calc(-1 * var(--page-pad));
    border-radius: 0;
    border-inline: 0;
  }
}
/* ab 1024: läuft links bis an den Fensterrand (W2, 20: Regelbruch). Nur für Bilder, die an der linken
   Inhaltskante von .wrap beginnen (Spalte 1). */
@media (min-width: 1024px) {
  .media--bleed-start-l {
    margin-inline-start: calc(-1 * max(var(--page-pad), (100vw - var(--content-max)) / 2));
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 0;
  }
}

/* Bildtiefe: Übergröße nur dort, wo bild-tiefe läuft (ab 768, ohne Reduced Motion, mit JS). Steht in CSS, damit
   beim Start des Triggers nichts springt; motion.js setzt yPercent (−3 → +3) dazu. Fällt motion.js aus, bleibt
   das Bild 8 % größer im Rahmen (4 % Zuschnitt je Seite), sonst nichts. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.js .media [data-wdf-motion="bild-tiefe"] { transform: scale(var(--motion-depth-scale)); }
}

/* ==========================================================================
   Reduced Motion: Endzustände sofort, nur Deckkraft-Wechsel bleiben
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn, .btn-ui, .seg button, .site-header__menu-btn, .disclosure__icon, .disclosure__icon::after, .btn-text .icon, .textlink .icon, .btn .icon, .btn-ui .icon, .site-nav__link .icon { transition-property: background-color, border-color, color, opacity !important; }
  /* Runde 3: kein Anheben, kein Pfeil-Rücken; Unterstreichung blendet über Deckkraft ein statt zu wachsen */
  .btn, .btn .icon, .btn-ui .icon, .textlink .icon, .btn-text .icon { translate: none !important; }
  .textlink::after, .btn-text::after { transform: none !important; opacity: 0; transition-property: opacity !important; }
  .textlink:active::after, .btn-text:not(:disabled):not([aria-disabled="true"]):active::after { opacity: 1; }
  @media (hover: hover) and (pointer: fine) {
    .textlink:hover::after, .btn-text:not(:disabled):not([aria-disabled="true"]):hover::after { opacity: 1; }
  }
  .btn:active, .btn-ui:active, .seg button:active, .site-header__menu-btn:active, .disclosure__btn:active .disclosure__icon { transform: none !important; }
  .toast[data-state="hidden"], .sticky-cta[data-visible="false"] { transform: none; }
  .disclosure__panel, .site-nav, .site-header.is-open .site-nav, .site-nav__sub { transform: none !important; }
  .media img { transform: none !important; }
  .skeleton { animation: none; opacity: 0.7; }
  .spinner, .btn[data-loading="true"]::after, .btn-ui[data-loading="true"]::after { animation: none; border-right-color: currentColor; border-top-color: transparent; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .sticky-cta { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .btn, .btn-ui, .seg button[aria-pressed="true"], .mark, .chip-ready, .tag { border: 1px solid CanvasText; }
  .glyph--ok, .glyph--warn { background: CanvasText; }
  .textlink::after, .btn-text::after { background: LinkText; }
}

/* Build (design-import): Platzhalter für den Einwilligungsbanner, leer ohne Wirkung auf das Layout */
[data-consent-slot]:empty { display: none; }