/* ============================================================================
   WebDevCore — Base- & Komponenten-CSS (base.css)
   Baut komplett auf theme.css (Tokens). Klassen werden von den Section-Blöcken
   (partials/sections/*) genutzt. Mobile-first, A11y-by-default.
   ========================================================================== */

/* Self-hosted Fonts (@font-face) leben in assets/fonts.css — von head.php VOR
   dieser Datei eingebunden. DSGVO: ausschliesslich lokale Dateien, kein externer
   Request; fehlt eine Datei, greift der System-Stack der --font-* Tokens. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Markierung in Markenfarbe (Akzent + lesbare Akzent-Schrift) */
::selection { background: var(--accent); color: var(--accent-ink); }
::-moz-selection { background: var(--accent); color: var(--accent-ink); }

main { flex: 1 0 auto; }

/* --- Typografie --- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--display-tracking, var(--tracking-tight)); font-weight: var(--display-weight, var(--weight-bold)); text-wrap: balance; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
/* Gleichmaessiger Umbruch statt einzelnem Wort in der letzten Zeile. blockquote
   dazu, weil Zitate wie Ueberschriften kurz+prominent gesetzt werden; .lead ist
   bereits kurz genug fuer das Browser-Limit von text-wrap: balance. */
blockquote, .lead { text-wrap: balance; }
/* Fliesstext ohne Schusterjungen (einzelnes Wort am Absatzende). */
p, li { text-wrap: pretty; }

/* Deutsche Silbentrennung. Ohne sie sprengen Komposita wie
 * „Grundstücksentwässerung" schmale Spalten. Braucht lang="de" (steht in head.php).
 * Nur im Fließtext — NICHT auf Überschriften: dort ist ein getrenntes Wort
 * hässlicher als eine kurze Zeile. */
p, li, dd, blockquote, .lead {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;   /* erst ab 8 Zeichen trennen, min. 4 je Teil */
}

/* Überschriften nie trennen, aber lange Wörter dürfen notfalls brechen,
 * statt aus dem Container zu laufen. */
h1, h2, h3, h4 {
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Kennzahlen und Preise: gleiche Ziffernbreite, damit Spalten fluchten. */
.stat__value, .preis, table td, .kpi { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--step--1); font-weight: var(--weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-600);
}
/* Langer Kicker (>30 Zeichen, s. render.php::eyebrow_klasse): ohne Versalien und
   mit ruhigerer Laufweite. Versalsatz nimmt der Zeile die Wortsilhouette — bei
   einer kurzen Marke ist das gewollt, bei einem halben Satz kostet es Lesbarkeit
   (und das Slop-Gate meldet es als Blocker `all-caps-body`). */
.eyebrow--lang { text-transform: none; letter-spacing: 0.02em; }
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent-2); border-radius: 2px; }
.lead { font-size: var(--step-1); color: var(--fg-muted); line-height: var(--leading-normal); }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

/* --- Layout-Primitive --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: var(--section-pad-tight); }
.section--muted { background: var(--surface-2); }
.section--accent { background: linear-gradient(160deg, var(--accent-soft), transparent 60%), var(--surface); }
.section__head { max-width: 42rem; margin-bottom: var(--space-lg); display: grid; gap: var(--space-sm); }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* Alternierende Flächen-Rotation: surface / surface-2 / accent-soft im Wechsel,
   per data-rotate am <main> oder Container aktivierbar (Default unverändert). */
[data-rotate] > .section:nth-of-type(3n+2) { background: var(--surface-2); }
[data-rotate] > .section:nth-of-type(3n+3) { background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface); }

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --- Layout-Skelette (sections[].layout) — Anti-Einheitsbreite & -geometrie --- */
.section--narrow > .container { max-width: var(--container-narrow); }
.section--wide   > .container { max-width: var(--container-wide); }
/* Vollbreit-Band: randlos-breiter Inhalt auf kräftigem Akzent-Grund. */
.section--band { background: linear-gradient(150deg, var(--accent-soft), transparent 70%), var(--surface-2); }
.section--band > .container { max-width: min(104rem, 96vw); }
/* Asymmetrischer Split: Kopf steht (sticky) links, Inhalt fließt rechts. */
.section--split > .container { display: grid; grid-template-columns: minmax(13rem, 21rem) 1fr; gap: var(--space-xl); align-items: start; }
.section--split .section__head { max-width: none; margin-bottom: 0; }
@media (min-width: 861px) {
  .section--split .section__head { position: sticky; top: 5.5rem; }
  .section--split .grid--4, .section--split .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .section--split > .container { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* --- SVG-Bausteine (selbstzeichnend, reduced-motion-/no-JS-fest) --- */
.section-divider { padding-block: var(--space-xl); }
.section-divider--tight { padding-block: var(--space-md); }
.svg-divider { color: var(--accent); width: 100%; }
.svg-divider svg { display: block; width: 100%; height: 12px; overflow: visible; opacity: .85; }
.svg-signet { position: relative; display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; color: var(--accent); }
.svg-signet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svg-signet__mark { font-weight: 750; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); }
/* Animierte Unterstreichung für Links/CTAs (zeichnet auf Hover/Fokus). */
.uline { position: relative; }
.uline::after { content: ""; position: absolute; left: 0; bottom: -.12em; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
.uline:hover::after, .uline:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .uline::after { transition: transform .35s var(--ease-out, ease); } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Asymmetrische Split-Variante (60/40) für lebendigere Layouts */
.split--offset { grid-template-columns: 1.55fr 1fr; }
.split--offset.split--flip { grid-template-columns: 1fr 1.55fr; }
@media (max-width: 860px) { .split--offset, .split--offset.split--flip { grid-template-columns: 1fr; } }

/* Bento-Raster: eine Karte spannt 2 Spalten / 2 Zeilen für rhythmische Galerien/Feature-Grids */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--space-md); }
.bento > .bento--wide { grid-column: span 2; }
.bento > .bento--tall { grid-row: span 2; }
.bento > .bento--big  { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > .bento--big { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .bento--wide, .bento > .bento--big { grid-column: span 1; }
  .bento > .bento--tall { grid-row: span 1; }
}

/* Optionaler Section-Divider per clip-path (dezent, dekorativ) */
.section--clip-top { clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%); margin-top: -1px; }
.section--clip-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2vw), 0 100%); }
@media (max-width: 600px) {
  .section--clip-top { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
  .section--clip-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
}

/* --- Buttons --- */
.btn {
  --_bg: var(--accent); --_fg: var(--accent-ink); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  padding: 0.85em 1.5em; border-radius: var(--btn-radius, var(--radius-full));
  font-size: var(--step-0); font-weight: var(--weight-semibold); line-height: 1;
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  will-change: transform;
}
/* Hover setzt --_bg, NICHT background direkt: sonst ueberfaehrt diese Regel die
   Varianten darunter (.btn--ghost/.btn--soft steuern ihre Flaeche ueber --_bg) und
   der Ghost-Button wird dunkelgruen, behaelt aber seine dunkle Schrift — 1,5:1
   Kontrast, vom Slop-Gate zu Recht als low-contrast blockiert (Teich- &
   Gartenservice Mueller, 2026-08-01). Fuer den Normalfall aendert sich nichts:
   background:var(--_bg) loest denselben Wert auf. */
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); --_bg: var(--accent-600); }
.btn:active { transform: translateY(0); }
.btn--ghost { --_bg: transparent; --_fg: var(--fg); --_bd: var(--border-strong); box-shadow: none; }
.btn--ghost:hover { --_bg: var(--accent-soft); --_bd: var(--accent); box-shadow: none; }
.btn--soft { --_bg: var(--accent-soft); --_fg: var(--accent-700); box-shadow: none; }
.btn--soft:hover { --_bg: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: none; }
.btn--lg { padding: 1em 1.9em; font-size: var(--step-1); }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* --- Cards --- */
.card {
  background: var(--surface); border: var(--card-border); border-radius: var(--radius-lg);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  display: grid; gap: var(--space-xs); align-content: start;
}
.card__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-600);
  margin-bottom: var(--space-2xs);
}
.card__icon svg { width: 1.6rem; height: 1.6rem; }
.card h3 { font-size: var(--step-1); font-weight: var(--weight-semibold); }
.card__link { color: var(--accent-600); font-weight: var(--weight-semibold); font-size: var(--step--1); display: inline-flex; gap: 0.35em; align-items: center; }
.card__link::after { content: "→"; transition: transform var(--dur-base) var(--ease); }

/* Hover-Effekte nur, wo es einen echten Zeiger gibt — auf Touch bleibt die
 * Karte ruhig statt nach dem Antippen "haengen" zu bleiben. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: var(--accent-300); }
  .card:hover .card__link::after { transform: translateX(4px); }
}

/* Auf Touch: groessere Tippflaechen statt Hover-Feinheiten. */
@media (pointer: coarse) {
  .btn, .card__link, button { min-height: 44px; }
}

/* --- Header / Nav --- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: var(--display-weight, var(--weight-bold)); font-size: var(--step-1); letter-spacing: var(--display-tracking, var(--tracking-tight)); }
.brand__mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-ink); font-size: 1.05rem; box-shadow: var(--shadow-accent); overflow: hidden; flex: none; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
/* Echtes Logo (Bild statt Buchstaben-Mark): freistehend, ohne Akzentfläche */
.brand__logo { display: block; height: 2.2rem; width: auto; max-width: 12rem; object-fit: contain; }
.site-footer .brand__logo { height: 2.4rem; }
.nav { display: flex; align-items: center; gap: clamp(var(--space-sm), 2vw, var(--space-md)); }
.nav__link { font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--fg-muted); padding: 0.4rem 0; position: relative; transition: color var(--dur-base) var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--accent); transition: width var(--dur-base) var(--ease); border-radius: 2px; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.nav-toggle span { display: block; width: 1.25rem; height: 2px; background: var(--fg); margin: 4px auto; border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); }

@media (max-width: 820px) {
  .header-actions .btn { display: none; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 4.5rem 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__link { padding: 0.9rem 0; border-bottom: 1px solid var(--border); font-size: var(--step-1); }
}

/* Kontakt ist auf Desktop schon der CTA-Button rechts — der gleichlautende
   Nav-Link wäre doppelt. Mobile (<=820px) behält ihn, dort ist der CTA versteckt. */
@media (min-width: 821px) {
  .nav .nav__link--kontakt { display: none; }
}

/* --- Header-Varianten (spec header.variant; Default classic). Nur Desktop —
   Mobile (<=820px) bleibt das Classic-Collapse-Menü. --- */
@media (min-width: 821px) {
  /* centered: Wortmarke zentriert oben, Navigation zentriert darunter, CTA rechts angedockt. */
  .site-header--centered .header-inner { position: relative; flex-direction: column; align-items: center; gap: var(--space-2xs); min-height: 0; padding-block: var(--space-sm); }
  .site-header--centered .brand { order: 1; }
  .site-header--centered .nav { order: 2; justify-content: center; flex-wrap: wrap; }
  .site-header--centered .header-actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  /* split: Navigation links · Wortmarke zentriert · Aktionen rechts (symmetrisch, premium). */
  .site-header--split .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-header--split .nav { order: 1; justify-content: flex-start; }
  .site-header--split .brand { order: 2; justify-self: center; }
  .site-header--split .header-actions { order: 3; justify-self: end; }

  /* minimal: flache Hairline (kein Blur), Nav in Versalien/getrackt, ruhig & reduziert. */
  .site-header--minimal { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header--minimal .nav__link { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step--1); font-weight: var(--weight-semibold); }
  .site-header--minimal .nav__link::after { display: none; }

  /* floating: abgesetzte, gerundete Pill mit Abstand nach oben + Schatten (modern/tech). */
  .site-header--floating { position: sticky; top: var(--space-sm); background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header--floating .header-inner { padding-inline: var(--space-lg); border-radius: var(--radius-xl); border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--shadow-lg); min-height: 3.9rem; }
}

/* --- Header-Entrance + selbstzeichnende Marken-Signatur (body[data-header-reveal],
   motionLevel>=2). Marke/Logo baut sich auf, SVG-Signatur zeichnet sich, Nav staggert ein.
   Reduced-motion: alles sofort im Endzustand (keine versteckten Inhalte). No-JS: laeuft
   rein per CSS beim Laden. --- */
.brand { position: relative; }
.brand__sig { position: absolute; left: 0; bottom: -0.3rem; width: 100%; height: 0.4rem;
  color: var(--accent); overflow: visible; opacity: 0; pointer-events: none; }
.brand__sig-path { stroke-dasharray: 240; stroke-dashoffset: 240; }
@media (prefers-reduced-motion: no-preference) {
  body[data-header-reveal] .brand__mark { animation: hdr-mark 0.7s var(--ease-out, cubic-bezier(.2,.85,.25,1)) both; }
  body[data-header-reveal] .brand__logo { animation: hdr-logo 0.9s var(--ease-out, cubic-bezier(.2,.85,.25,1)) both; }
  body[data-header-reveal] .brand > span:not(.visually-hidden):not(.brand__mark) { display: inline-block; animation: hdr-word 0.7s var(--ease-out, cubic-bezier(.2,.85,.25,1)) 0.1s both; }
  body[data-header-reveal] .brand__sig { opacity: 1; }
  body[data-header-reveal] .brand__sig-path { animation: hdr-draw 0.9s ease 0.35s both; }
  body[data-header-reveal] .nav__link { animation: hdr-nav 0.55s var(--ease-out, cubic-bezier(.2,.85,.25,1)) both; }
  body[data-header-reveal] .nav__link:nth-child(1) { animation-delay: 0.28s; }
  body[data-header-reveal] .nav__link:nth-child(2) { animation-delay: 0.34s; }
  body[data-header-reveal] .nav__link:nth-child(3) { animation-delay: 0.40s; }
  body[data-header-reveal] .nav__link:nth-child(4) { animation-delay: 0.46s; }
  body[data-header-reveal] .nav__link:nth-child(5) { animation-delay: 0.52s; }
  body[data-header-reveal] .nav__link:nth-child(6) { animation-delay: 0.58s; }
  body[data-header-reveal] .header-actions { animation: hdr-nav 0.55s var(--ease-out, cubic-bezier(.2,.85,.25,1)) 0.5s both; }
}
@keyframes hdr-mark { from { opacity: 0; transform: scale(.35) rotate(-14deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hdr-logo { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes hdr-word { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes hdr-draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes hdr-nav { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* Self-zeichnende SVG-Akzentlinie unter Section-Titeln (head.underline). currentColor=Akzent;
   motion.js zeichnet den .draw-Pfad on-view, ohne JS/reduced-motion sofort im Endzustand. */
.section__uline { display: block; width: min(8.5rem, 55%); height: 0.55rem; margin-top: 0.45rem; color: var(--accent); overflow: visible; }
.section__head--center .section__uline { margin-inline: auto; }

/* --- Footer --- */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--border); margin-top: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-lg); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); } }
/* h3, nicht h4: nach der letzten <h2> der Seite uebersprang ein <h4> die Ebene h3 —
   der Detector meldete das auf JEDER Seite (13x im AVATIS-Build). Optisch unveraendert,
   die Groesse kommt ohnehin aus --step--1. h4 bleibt als Alias stehen, damit
   bestehende Kundenordner mit altem Markup ihr Styling behalten. */
/* h2, weil die Fussleiste auf JEDER Seite steht: eine Seite ohne h2 im Inhalt
   (die 404-Seite) sprang vom h1 direkt auf das h3 der Fussspalte — gebrochene
   Gliederung, Blocker `skipped-heading`. h3/h4 bleiben als Selektoren stehen,
   damit aeltere Kundenseiten weiter passend gestylt werden. */
.footer-col h2, .footer-col h3, .footer-col h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); margin-bottom: var(--space-xs); font-weight: 600; }
.footer-col a { color: var(--fg-muted); display: block; padding: 0.2rem 0; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--accent-600); }
/* padding-top mit festem Mindestwert statt nur --space-md: der Detector misst den
   Abstand der Kinder zur sichtbaren border-top und verlangt >=8px (ideal 12-16px).
   Ueber eine Token-Variable allein war das nicht garantiert — je nach Kunden-Theme
   fiel --space-md darunter, und der Befund erschien auf JEDER Seite (16x im
   AVATIS-Build). max() haelt die Untergrenze, ohne grosszuegigere Themes zu deckeln. */
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; padding-top: max(1rem, var(--space-md)); padding-bottom: max(1rem, var(--space-md)); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--fg-subtle); }
/* Entwickler-Hinweis: eigene Klasse statt der Farbe der Seite zu erben —
   die Bildmarke traegt feste Hex-Werte (s. footer.php) und soll auch bei
   dunklen/warmen Kundenfarben lesbar bleiben. */
.footer-credit { display: inline-flex; align-items: center; gap: 0.4em; color: inherit; text-decoration: none; opacity: 0.85; transition: opacity var(--t-hover, 150ms) ease; }
.footer-credit:hover, .footer-credit:focus-visible { opacity: 1; }
.footer-credit svg { flex: none; }

/* Cookie-Einwilligung (partials/consent.php, assets/consent.js) — INFRASTRUKTUR,
   Rechtstext, nicht vom Design-Agenten umzustylen. Bewusst eine ruhige, nicht-
   blockierende Leiste (kein Vollbild-Overlay): die Seite funktioniert vollstaendig
   ohne jede Entscheidung, das ist also ausdruecklich KEIN Cookie-Wall. */
.consent-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-modal);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  padding: var(--space-md) var(--space-lg);
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner {
  max-width: var(--container-xl, 1200px); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-md);
}
.consent-banner__text { flex: 1 1 32rem; margin: 0; font-size: var(--step--1); color: var(--fg-subtle); }
.consent-banner__text a { color: inherit; text-decoration: underline; }
/* Gleiche Groesse fuer beide Aktionen — s. consent.php: "Ablehnen" darf niemals
   kleiner/unauffaelliger sein als "Akzeptieren". */
.consent-banner__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-sm); flex: 0 0 auto; }
.consent-banner__aktionen .btn { white-space: nowrap; }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-2xl), 12vw, var(--space-3xl)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(var(--hero-glow-size) at var(--hero-glow-pos), var(--accent-soft), transparent 70%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); align-items: center; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__title { font-size: var(--step-6); margin-block: var(--space-sm) var(--space-md); }
.hero__lead { max-width: 38ch; }
.hero__actions { margin-top: var(--space-lg); }
.hero__media { position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--elevation-hero); border: 1px solid var(--border); background: var(--surface-2); }
.hero__media img, .hero__media picture { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; }
.hero__media picture { display: block; }
.hero__media .hero__art { position: absolute; inset: 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); color: var(--fg-muted); font-size: var(--step--1); }
.hero__trust span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* --- Hero-Varianten (spec hero.variant; Default = split-right) --- */
/* split-left: Medien links, Text rechts */
.hero--split-left .hero__grid { grid-template-columns: 0.95fr 1.05fr; }
.hero--split-left .hero__copy { order: 2; }
.hero--split-left .hero__media { order: 1; }
/* asymmetric: 60/40 statt 50/50 */
.hero--asymmetric .hero__grid { grid-template-columns: 1.5fr 1fr; gap: clamp(var(--space-lg), 6vw, var(--space-2xl)); }
/* full-bleed: grosses Bild als Bühne, Text in einer überlagernden Karte */
.hero--full-bleed { padding-block: 0; }
/* ECHTER Full-Bleed-Hero: die Buehne (Foto) laeuft EDGE-TO-EDGE ueber die ganze
   Seitenbreite (Container-Begrenzung, Rundung, Rahmen aufgehoben) — kein "Fenster".
   Die Copy wird separat wieder aufs Seitenraster (var(--container) + var(--gutter))
   eingefangen, damit der Text buendig zum Rest der Seite sitzt. Copy liegt IM FLUSS
   (position:relative) und bestimmt die Hoehe -> der Titel kann NIE oben unter die
   sticky Navi geclippt werden, egal wie gross die Preset-Schrift ist. */
.hero--full-bleed .hero__grid { display: block; position: relative; max-width: none; padding-inline: 0; min-height: clamp(30rem, 92vh, 56rem); min-height: clamp(30rem, 92svh, 56rem); overflow: hidden; }
.hero--full-bleed .hero__stage { position: absolute; inset: 0; z-index: 0; min-height: 0; border: 0; border-radius: 0; background: var(--surface-2); }
.hero--full-bleed .hero__stage > img, .hero--full-bleed .hero__stage > picture, .hero--full-bleed .hero__stage > .hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--full-bleed .hero__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--n-950) 74%, transparent) 0%, color-mix(in srgb, var(--n-950) 40%, transparent) 42%, transparent 66%); }
.hero--full-bleed .hero__copy {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--container); margin-inline: auto;
  min-height: clamp(30rem, 92vh, 56rem);
  min-height: clamp(30rem, 92svh, 56rem);
  display: grid; align-content: center; gap: var(--space-sm);
  padding: clamp(5rem, 10vh, 7rem) var(--gutter) clamp(var(--space-lg), 6vh, var(--space-2xl));
  color: #fff;
}
.hero--full-bleed .hero__copy > * { max-width: 42rem; } /* Textspalte lesbar begrenzt, linksbuendig */
.hero--full-bleed .hero__title { font-size: clamp(2.4rem, 4.6vw, var(--step-6)); max-width: 18ch; margin-block: var(--space-2xs) var(--space-xs); }
.hero--full-bleed .hero__actions { margin-top: var(--space-md); }
.hero--full-bleed .hero__trust { margin-top: var(--space-md); }
@media (min-width: 861px) and (max-height: 820px) {
  .hero--full-bleed .hero__title { font-size: clamp(2.2rem, 3.6vw, 3.25rem); }
}
/* Sekundaerer Button MUSS auf dem dunklen Foto lesbar sein (heller Ghost statt dunklem --fg) */
.hero--full-bleed .btn--ghost { --_fg: #fff; --_bd: color-mix(in srgb, #fff 55%, transparent); }
.hero--full-bleed .btn--ghost:hover { --_bg: rgba(255, 255, 255, 0.16); --_bd: #fff; }
.hero--full-bleed .hero__copy .hero__title,
.hero--full-bleed .hero__copy .hero__lead { color: #fff; }
.hero--full-bleed .hero__copy .hero__lead { color: color-mix(in srgb, #fff 86%, transparent); }
.hero--full-bleed .hero__copy .eyebrow { color: #fff; }
.hero--full-bleed .hero__copy .eyebrow::before { background: #fff; }
.hero--full-bleed .hero__copy .hero__trust { color: color-mix(in srgb, #fff 80%, transparent); }
@media (max-width: 720px) {
  .hero--full-bleed .hero__stage::after { background: linear-gradient(180deg, color-mix(in srgb, var(--n-950) 28%, transparent), color-mix(in srgb, var(--n-950) 80%, transparent)); }
  .hero--full-bleed .hero__copy { max-width: 100%; }
}

/* --- Neue Hero-Varianten: spotlight · panorama · portrait · overlay --- */
/* spotlight: zentrierte Typo-Buehne mit Akzent-Glow, ohne Seitenmedium (bold/brand). */
.hero--spotlight { text-align: center; --hero-glow-pos: 50% 32%; --hero-glow-size: 130% 105%; }
.hero--spotlight .hero__grid { grid-template-columns: 1fr; justify-items: center; }
.hero--spotlight .hero__copy { align-items: center; max-width: 52rem; }
.hero--spotlight .hero__copy > * { margin-inline: auto; }
.hero--spotlight .hero__title { font-size: clamp(2.6rem, 5.5vw, var(--step-7, 4.25rem)); max-width: 17ch; }
.hero--spotlight .hero__lead { max-width: 48ch; }
.hero--spotlight .hero__actions, .hero--spotlight .hero__trust { justify-content: center; }

/* panorama: breites cineastisches Medienband oben, zentrierte Copy darunter. */
.hero--panorama .hero__grid { grid-template-columns: 1fr; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); }
.hero--panorama .hero__media { order: 1; aspect-ratio: 16 / 6; width: 100%; }
.hero--panorama .hero__copy { order: 2; text-align: center; align-items: center; max-width: 48rem; margin-inline: auto; }
.hero--panorama .hero__copy > * { margin-inline: auto; }
.hero--panorama .hero__lead { max-width: 48ch; }
.hero--panorama .hero__actions, .hero--panorama .hero__trust { justify-content: center; }
@media (max-width: 720px) { .hero--panorama .hero__media { aspect-ratio: 4 / 3; } }

/* portrait: dominantes Hochformat-Medium rechts, kompakte Copy links. */
.hero--portrait .hero__grid { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
.hero--portrait .hero__media { aspect-ratio: 3 / 4; }
@media (max-width: 860px) { .hero--portrait .hero__grid { grid-template-columns: 1fr; } .hero--portrait .hero__media { aspect-ratio: 4 / 3; } }

/* overlay: Full-Bleed-Foto (erbt hero--full-bleed) + Copy in einer schwebenden Glas-Karte
   unten links (statt full-height-Overlay). */
.hero--overlay .hero__grid { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.hero--overlay .hero__copy {
  min-height: 0; width: min(40rem, 100%);
  margin: 0 0 clamp(var(--space-lg), 8vh, var(--space-2xl));
  margin-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding: clamp(var(--space-md), 3vw, var(--space-xl));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--n-950) 52%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-lg);
}
.hero--overlay .hero__copy > * { max-width: 100%; }
.hero--overlay .hero__stage::after { background: linear-gradient(90deg, color-mix(in srgb, var(--n-950) 55%, transparent), transparent 62%); }
@media (max-width: 720px) { .hero--overlay .hero__copy { width: 100%; margin-left: var(--gutter); margin-right: var(--gutter); } }

/* --- Kennzahl-Chips (hero.widgets bei split/asymmetric/full-bleed: im Copy-Fluss) --- */
.hero__widgets { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.hero__widget { display: grid; gap: 0.2rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); min-width: 8.5rem; }
.hero__widget--accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.hero__widget-value { font-family: var(--font-display); font-size: var(--step-3); font-weight: var(--weight-bold); line-height: 1; color: var(--accent-600); letter-spacing: var(--tracking-tight); }
.hero__widget-label { font-size: var(--step--1); color: var(--fg-muted); }
.hero--full-bleed .hero__widgets .hero__widget { background: color-mix(in srgb, #fff 12%, transparent); border-color: color-mix(in srgb, #fff 28%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero--full-bleed .hero__widgets .hero__widget--accent { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.hero--full-bleed .hero__widgets .hero__widget-value { color: #fff; }
.hero--full-bleed .hero__widgets .hero__widget-label { color: color-mix(in srgb, #fff 82%, transparent); }

/* ---------------------------------------------------------------------------
   HUD-Ebene (hero.widgets bei full-bleed/stage) — der "Cinematic Hero"-Look:
   3-4 Glaskarten schweben absolut unten rechts UEBER der Szene, als Kinder von
   .hero__stage. Dunkles Glas (n-950 55% + blur) fuer AA-Kontrast auch auf hellem
   Bildhintergrund.
   --------------------------------------------------------------------------- */
.hero__hud {
  position: absolute; z-index: 2;
  right: var(--space-md); bottom: var(--space-md);
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--space-xs);
  width: min(15rem, 38vw);
}
.hero__hud .hero__widget:nth-child(2) { margin-right: 1rem; }
.hero__hud .hero__widget:nth-child(3) { margin-right: 0.5rem; }
.hero__hud .hero__widget:nth-child(4) { margin-right: 1.5rem; }
.hero__hud .hero__widget {
  min-width: 0;
  display: grid; gap: 0.15rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--n-950) 55%, transparent);
  border: 1px solid color-mix(in srgb, #fff 26%, transparent);
  border-top: 1px solid var(--accent-2, var(--accent));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-sm);
}
.hero__hud .hero__widget--accent { border-top-width: 2px; background: color-mix(in srgb, var(--n-950) 62%, transparent); }
.hero__hud .hero__widget--accent .hero__widget-value::before {
  content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--accent-2, var(--accent)); margin-right: 0.3em; vertical-align: 0.06em;
}
.hero__hud .hero__widget-label {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: var(--weight-medium);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  /* Immer 2 Label-Zeilen reservieren → 1- und 2-zeilige Karten werden gleich hoch. */
  line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end;
}
.hero__hud .hero__widget-value {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--display-weight, var(--weight-bold));
  color: #fff; line-height: 1.15; letter-spacing: var(--tracking-tight);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__hud .hero__widget {
    animation: hud-enter 0.7s var(--ease-out, ease-out) both, hud-float 7s ease-in-out infinite;
    animation-delay: calc(0.55s + var(--widget-i, 0) * 0.12s), calc(1.8s + var(--widget-i, 0) * 0.7s);
    will-change: transform;
  }
}
@keyframes hud-enter { from { opacity: 0; transform: translate(14px, 18px); } to { opacity: 1; transform: none; } }
@keyframes hud-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------------------------------------------------------------------------
   stage — der "Cinematic Hero": die Szene ist eine grosszuegige GERUNDETE
   BUEHNEN-KARTE im Container (nicht randlos), die Copy liegt absolut links
   vertikal zentriert DARUEBER, die HUD-Karten unten rechts. Kompakter als
   full-bleed (max 64vh) -> Falz-Garantie bei 1366x768 UND 1440x900.
   --------------------------------------------------------------------------- */
.hero--stage { padding-block: var(--space-lg) 0; }
.hero--stage .hero__grid { max-width: var(--container); padding-inline: var(--gutter); min-height: 0; overflow: visible; }
.hero--stage .hero__stage {
  position: relative; inset: auto; z-index: 0;
  min-height: clamp(28rem, 64vh, 44rem);
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  overflow: hidden;
}
.hero--stage .hero__stage::after {
  background: linear-gradient(105deg, color-mix(in srgb, var(--n-950) 72%, transparent) 0%, color-mix(in srgb, var(--n-950) 32%, transparent) 45%, transparent 70%);
}
.hero--stage .hero__copy {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 1;
  min-height: 0; width: auto; max-width: min(36rem, 58%);
  margin-inline: 0;
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  align-content: center;
}
.hero--stage .hero__title { font-size: clamp(2.2rem, 3.6vw, var(--step-5)); }
/* statement bleibt unberuehrt; split-Varianten nutzen weiter .hero__widgets-Chips. */

/* ---------------------------------------------------------------------------
   hero--light (hero.scheme = "light"): heller Kontrast-Modus fuer full-bleed/
   stage mit HELLEM Motiv. KEIN Flaechen-Waschout: der Scrim ist per mask auf die
   Textspalte begrenzt — rechts bleibt das Foto 100% lebendig; dunkle Schrift.
   --------------------------------------------------------------------------- */
.hero--light .hero__stage::after {
  background: linear-gradient(100deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 66%, transparent) 44%, transparent 66%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 min(44rem, 52%), transparent min(60rem, 72%));
  mask-image: linear-gradient(90deg, #000 0, #000 min(44rem, 52%), transparent min(60rem, 72%));
}
.hero--light .hero__copy { color: var(--fg); }
.hero--light .hero__copy .hero__title,
.hero--light .hero__copy .hero__lead { color: var(--fg); }
.hero--light .hero__copy .hero__lead { color: color-mix(in srgb, var(--fg) 86%, transparent); }
.hero--light .hero__copy .eyebrow { color: var(--accent); }
.hero--light .hero__copy .eyebrow::before { background: var(--accent); }
.hero--light .hero__copy .hero__trust { color: var(--fg); }
.hero--light .btn--ghost { --_fg: var(--fg); --_bd: var(--border-strong); }
.hero--light .btn--ghost:hover { --_bg: var(--accent-soft); --_bd: var(--accent); }
@media (max-width: 720px) {
  .hero--light .hero__stage::after {
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 94%, transparent) 100%);
    -webkit-mask-image: none;
    mask-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* === Hero-Preset „cinematic" ([data-hero-preset=cinematic]) — Film-Look-Flagship ======
   Kuratiertes Rezept auf stage-Basis: Kino-Grading (mehrschichtiger Scrim + Akzent-Aura
   + feines Filmkorn), engere Titel-Skala mit Balance, selbstzeichnender SVG-Sucherrahmen
   (hero__frame), veredelte HUD-Glaskarten und eine choreografierte Eröffnung (Foto setzt
   sich, Copy staffelt, HUD schwebt ein). Reduced-motion: sofort Endzustand; ohne JS ist
   der Rahmen fertig gezeichnet. scheme=light bleibt als Autor-Override möglich. ======== */
.hero[data-hero-preset="cinematic"] .hero__photo { filter: saturate(1.05) contrast(1.03); }
/* Kino-Bühne (Desktop): größer als die kompakte stage-Karte (74vh statt 64vh) — und
   Copy + Karte in EINER Grid-Zelle gestapelt statt Copy absolut über fixer Karte:
   die Zelle (= Karte) wächst immer mit der Copy mit, Titel/CTAs können NIE überlaufen.
   Mobil (<=860px) greift unverändert der stage-Standard-Stack (Copy im Fluss). */
@media (min-width: 861px) {
  .hero[data-hero-preset="cinematic"] .hero__grid { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .hero[data-hero-preset="cinematic"] .hero__grid > .hero__copy,
  .hero[data-hero-preset="cinematic"] .hero__grid > .hero__stage { grid-area: 1 / 1; }
  .hero[data-hero-preset="cinematic"] .hero__stage { min-height: clamp(30rem, 74vh, 48rem); }
  .hero[data-hero-preset="cinematic"] .hero__copy {
    position: relative; inset: auto; z-index: 1; justify-self: start;
    min-height: 0; width: auto; max-width: min(40rem, 62%);
    align-content: center;
    padding: clamp(var(--space-lg), 5vw, var(--space-xl));
  }
}
/* Kino-Scrim: Copy-Anker links + Letterbox-Fuß + Akzent-Aura oben rechts (nur dunkler Modus) */
.hero[data-hero-preset="cinematic"]:not(.hero--light) .hero__stage::after {
  background:
    radial-gradient(52% 44% at 86% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%),
    linear-gradient(to top, color-mix(in srgb, var(--n-950) 60%, transparent), transparent 34%),
    linear-gradient(100deg, color-mix(in srgb, var(--n-950) 80%, transparent) 0%, color-mix(in srgb, var(--n-950) 42%, transparent) 44%, color-mix(in srgb, var(--n-950) 10%, transparent) 70%, transparent 100%);
}
/* Feines Filmkorn — statisches inline-SVG-Rauschen (self-hosted, kein Request, kein JS). */
.hero[data-hero-preset="cinematic"] .hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05; mix-blend-mode: overlay;
}
/* Selbstzeichnende Sucherrahmen-Ecken (zwei fixe 28px-SVGs, hero.php emittiert sie) */
.hero[data-hero-preset="cinematic"] .hero__corner {
  position: absolute; z-index: 1; width: 28px; height: 28px;
  color: color-mix(in srgb, #fff 62%, transparent); pointer-events: none;
}
.hero[data-hero-preset="cinematic"] .hero__corner--tl { top: clamp(0.9rem, 2vw, 1.4rem); left: clamp(0.9rem, 2vw, 1.4rem); }
.hero[data-hero-preset="cinematic"] .hero__corner--br { bottom: clamp(0.9rem, 2vw, 1.4rem); right: clamp(0.9rem, 2vw, 1.4rem); }
.hero[data-hero-preset="cinematic"].hero--light .hero__corner { color: color-mix(in srgb, var(--n-950) 38%, transparent); }
/* Typo: größere, engere Kino-Headline; Kicker mit weitem Tracking; Lead eine Stufe präsenter */
.hero[data-hero-preset="cinematic"] .hero__title {
  font-size: clamp(2.4rem, 4.6vw, 4.15rem);
  max-width: 22ch; /* breiter laufen lassen als die 18ch der Basis: Kino-Headline = Breite statt Turm */
  line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero[data-hero-preset="cinematic"] .hero__copy .eyebrow { letter-spacing: 0.14em; font-weight: var(--weight-semibold); }
.hero[data-hero-preset="cinematic"] .hero__lead { font-size: var(--step-1); }
.hero[data-hero-preset="cinematic"] .btn--primary { box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 38%, transparent); }
/* HUD-Glaskarten: dichter, tieferes Glas, Akzent-Deckkante auf allen Karten */
.hero[data-hero-preset="cinematic"] .hero__hud { width: min(16.5rem, 40vw); }
.hero[data-hero-preset="cinematic"] .hero__hud .hero__widget {
  background: color-mix(in srgb, var(--n-950) 66%, transparent);
  border-color: color-mix(in srgb, #fff 20%, transparent);
  border-top: 2px solid var(--accent-2, var(--accent));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.hero[data-hero-preset="cinematic"] .hero__hud .hero__widget-value { font-size: var(--step-2); }
/* Choreografierte Eröffnung: Foto setzt sich, Scrim blendet, Copy staffelt von unten. */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero-preset="cinematic"] .hero__photo { animation: cin-settle 1.9s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
  .hero[data-hero-preset="cinematic"] .hero__stage::after { animation: cin-fade 1.1s ease-out both; }
  .hero[data-hero-preset="cinematic"] .hero__copy > .eyebrow { animation: cin-rise 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 0.15s both; }
  .hero[data-hero-preset="cinematic"] .hero__copy > .hero__title { animation: cin-fade 0.7s ease-out 0.25s both; }
  .hero[data-hero-preset="cinematic"] .hero__copy > .hero__lead { animation: cin-rise 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 0.42s both; }
  .hero[data-hero-preset="cinematic"] .hero__copy > .hero__actions { animation: cin-rise 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 0.56s both; }
  .hero[data-hero-preset="cinematic"] .hero__copy > .hero__trust { animation: cin-rise 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 0.68s both; }
}
@keyframes cin-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes cin-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cin-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  /* Mobil wird die Bühne zur kompakten Karte — Sucherrahmen-Ecken wären dort Clutter. */
  .hero[data-hero-preset="cinematic"] .hero__corner { display: none; }
}

/* === Hero-Preset „editorial" — Magazin-Look ============================================
   Foto als „Druckplatte" mit versetztem Hairline-Rahmen (outline-offset), Rubrik-Kicker
   mit auslaufender Hairline, selbstzeichnende Feder-Unterstreichung (hero__uline) unter
   der Headline, Lead mit Akzent-Randlinie. Entrance: Platte wischt in den stehenden
   Rahmen, Copy staffelt. ============================================================== */
.hero[data-hero-preset="editorial"] .hero__media {
  aspect-ratio: 4 / 3.4; border-radius: var(--radius-lg);
  outline: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 12px;
  /* Die ed-plate-Animation verdraengt die .reveal-Animation (Shorthand) — deren statisches
     opacity:0 muss hier explizit aufgehoben werden, sonst bleibt die Platte unsichtbar. */
  opacity: 1;
}
.hero[data-hero-preset="editorial"] .hero__copy .eyebrow { display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.16em; }
.hero[data-hero-preset="editorial"] .hero__copy .eyebrow::after { content: ""; flex: 0 1 5rem; height: 1px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.hero[data-hero-preset="editorial"] .hero__title { font-size: clamp(2.5rem, 4.8vw, 4.05rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.hero__uline { display: block; width: min(13rem, 62%); height: 0.8rem; margin-top: 0.5rem; color: var(--accent); overflow: visible; }
.hero[data-hero-preset="editorial"] .hero__lead { border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); padding-left: var(--space-sm); }
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero-preset="editorial"] .hero__media { animation: ed-plate 0.95s cubic-bezier(0.2, 0.85, 0.25, 1) 0.15s both; }
  .hero[data-hero-preset="editorial"] .hero__copy > .eyebrow { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.1s both; }
  .hero[data-hero-preset="editorial"] .hero__copy > .hero__lead { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s both; }
  .hero[data-hero-preset="editorial"] .hero__copy > .hero__actions { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.48s both; }
}
@keyframes ed-plate { from { clip-path: inset(0 100% 0 0 round var(--radius-lg)); } to { clip-path: inset(0 0 0 0 round var(--radius-lg)); } }

/* === Hero-Preset „statement" — Bold-Typo pur ===========================================
   Riesige, enge Headline auf ruhigem Punktraster (ins Licht maskiert), breiter selbst-
   zeichnender Marker-Swash (hero__swash) als einzige Farbgeste. Kein Bild — Haltung. == */
.hero[data-hero-preset="statement"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 13%, transparent) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 72% at 32% 30%, #000, transparent 78%);
  mask-image: radial-gradient(62% 72% at 32% 30%, #000, transparent 78%);
}
.hero[data-hero-preset="statement"] .hero__title { font-size: clamp(3rem, 7.4vw, 5.5rem); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.hero__swash { display: block; width: min(17rem, 70%); height: 1rem; margin-top: 0.6rem; color: var(--accent); overflow: visible; }
.hero[data-hero-preset="statement"] .hero__lead { font-size: var(--step-1); max-width: 50ch; }
.hero[data-hero-preset="statement"] .hero__actions { margin-top: var(--space-lg); }
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero-preset="statement"] .hero__copy > .eyebrow { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.08s both; }
  .hero[data-hero-preset="statement"] .hero__copy > .hero__title { animation: cin-fade 0.7s ease-out 0.18s both; }
  .hero[data-hero-preset="statement"] .hero__copy > .hero__lead { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.4s both; }
  .hero[data-hero-preset="statement"] .hero__copy > .hero__actions { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.54s both; }
}

/* === Hero-Preset „panorama" — Breitbild + Horizont =====================================
   Ultrabreiter Kino-Streifen (21:8) mit sanftem Fuss-Grading, darunter eine selbst-
   zeichnende Horizontlinie (hero__horizon) und zentrierte, ruhige Copy. Entrance:
   Letterbox oeffnet sich, Foto setzt sich, Linie zeichnet, Copy staffelt. ============= */
.hero[data-hero-preset="panorama"] .hero__media { aspect-ratio: 21 / 8; opacity: 1; /* s. editorial: pan-open verdraengt reveal */ }
.hero[data-hero-preset="panorama"] .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--n-950) 24%, transparent), transparent 32%);
}
.hero__horizon { display: block; width: 100%; max-width: 40rem; height: 0.5rem; margin: 0 auto var(--space-sm); color: color-mix(in srgb, var(--accent) 75%, transparent); overflow: visible; }
.hero[data-hero-preset="panorama"] .hero__copy .eyebrow { display: flex; align-items: center; justify-content: center; gap: 0.75rem; letter-spacing: 0.14em; }
.hero[data-hero-preset="panorama"] .hero__copy .eyebrow::after { content: ""; flex: 0 1 3.5rem; height: 1px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.hero[data-hero-preset="panorama"] .hero__title { font-size: clamp(2.4rem, 4.4vw, 3.9rem); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero-preset="panorama"] .hero__media { animation: pan-open 1.1s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
  .hero[data-hero-preset="panorama"] .hero__media img { animation: cin-settle 1.9s cubic-bezier(0.16, 0.84, 0.28, 1) both; }
  .hero[data-hero-preset="panorama"] .hero__copy > .eyebrow { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s both; }
  .hero[data-hero-preset="panorama"] .hero__copy > .hero__title { animation: cin-fade 0.7s ease-out 0.45s both; }
  .hero[data-hero-preset="panorama"] .hero__copy > .hero__lead { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.6s both; }
  .hero[data-hero-preset="panorama"] .hero__copy > .hero__actions { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.72s both; }
}
@keyframes pan-open { from { clip-path: inset(14% 0 14% 0 round var(--radius-xl)); } to { clip-path: inset(0 0 0 0 round var(--radius-xl)); } }

/* === Hero-Preset „spotlight" — Lichtkegel-Fokus ========================================
   Zentrierte Typo unter konzentriertem Akzent-Glow (zweischichtig: Section-Glow groesser
   + Kern-Glow hinter dem Titel), selbstzeichnender Buehnenboden-Bogen (hero__arc) als
   Lichtkegel-Fuss, CTA mit Glow-Schatten. Partikel liefert hero.atmosphere (Preset). == */
.hero[data-hero-preset="spotlight"] { --hero-glow-size: 150% 120%; }
.hero[data-hero-preset="spotlight"] .hero__copy { position: relative; }
.hero[data-hero-preset="spotlight"] .hero__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -14% -20% auto; height: 72%; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 40%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.hero[data-hero-preset="spotlight"] .hero__title { font-size: clamp(2.7rem, 5.6vw, 4.5rem); letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.hero__arc { display: block; width: min(20rem, 72%); height: 1.1rem; margin: 0.4rem auto 0; color: var(--accent); opacity: 0.85; overflow: visible; }
.hero[data-hero-preset="spotlight"] .btn--primary { box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 42%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero-preset="spotlight"] .hero__copy::before { animation: cin-fade 1.2s ease-out both; }
  .hero[data-hero-preset="spotlight"] .hero__copy > .eyebrow { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.1s both; }
  .hero[data-hero-preset="spotlight"] .hero__copy > .hero__title { animation: cin-fade 0.7s ease-out 0.2s both; }
  .hero[data-hero-preset="spotlight"] .hero__copy > .hero__lead { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.42s both; }
  .hero[data-hero-preset="spotlight"] .hero__copy > .hero__actions { animation: cin-rise 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 0.55s both; }
}

/* --- stage/full-bleed mobil: Copy als normaler Fluss UEBER der Buehnen-Karte,
       HUD kompakt als 2x2-Raster unten IN der Karte. --- */
@media (max-width: 860px) {
  .hero--stage { padding-block: var(--space-md) 0; }
  .hero--stage .hero__copy {
    position: static; max-width: 100%; padding: var(--space-md) 0;
    color: var(--fg);
  }
  .hero--stage .hero__copy .hero__title, .hero--stage .hero__copy .hero__lead { color: var(--fg); }
  .hero--stage .hero__copy .hero__lead { color: color-mix(in srgb, var(--fg) 86%, transparent); }
  .hero--stage .hero__copy .eyebrow { color: var(--accent); }
  .hero--stage .hero__copy .eyebrow::before { background: var(--accent); }
  .hero--stage .hero__copy .hero__trust { color: var(--fg-muted); }
  .hero--stage .btn--ghost { --_fg: var(--fg); --_bd: var(--border-strong); }
  .hero--stage .btn--ghost:hover { --_bg: var(--accent-soft); --_bd: var(--accent); }
  .hero--stage .hero__stage { min-height: clamp(20rem, 60vw, 28rem); }
  .hero__hud {
    right: var(--space-xs); bottom: var(--space-xs); left: var(--space-xs);
    width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs);
  }
  .hero__hud .hero__widget:nth-child(2), .hero__hud .hero__widget:nth-child(3), .hero__hud .hero__widget:nth-child(4) { margin-right: 0; }
  .hero__hud .hero__widget-value { font-size: var(--step-0); }
}

/* statement: kein Medium — die grosse Display-Headline IST die Buehne (viel Weissraum). */
.hero--statement { padding-block: clamp(var(--space-2xl), 12vh, calc(var(--space-2xl) * 1.7)); }
.hero--statement .hero__grid { display: block; max-width: min(64rem, 100%); margin-inline: auto; }
.hero--statement .hero__title { font-size: clamp(2.8rem, 8vw, calc(var(--step-6) * 1.35)); max-width: 20ch; line-height: 1.03; }
.hero--statement .hero__lead { max-width: 54ch; font-size: var(--step-1); }
@media (max-width: 860px) { .hero--statement .hero__title { font-size: clamp(2.4rem, 11vw, 4rem); } }

/* --- Stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: var(--space-md); border-radius: var(--radius-lg); }
.stat__num { font-family: var(--font-display); font-size: var(--step-5); font-weight: var(--weight-bold); line-height: 1; color: var(--accent-600); letter-spacing: var(--tracking-tight); }
.stat__label { margin-top: var(--space-2xs); color: var(--fg-muted); font-size: var(--step--1); }

/* --- Check-Liste / Leistungsumfang --- */
.checklist { display: grid; gap: var(--space-xs); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: start; }
.checklist .tick { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-600); flex: none; }
.checklist .tick svg { width: 0.95rem; height: 0.95rem; }

/* --- Ablauf / Steps --- */
.steps { counter-reset: step; display: grid; gap: var(--space-md); }
.steps--row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps--row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps--row { grid-template-columns: 1fr; } }
.step { position: relative; padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.step__num { counter-increment: step; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--step-2); color: var(--accent-2-300); }
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h4 { margin-block: var(--space-2xs) var(--space-3xs); }

/* --- Testimonials --- */
.quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-md), 3vw, var(--space-lg)); box-shadow: var(--shadow-xs); display: grid; gap: var(--space-sm); }
.quote__text { font-size: var(--step-1); line-height: var(--leading-snug); }
.quote__text::before { content: "\201C"; color: var(--accent-300); font-size: 2.4em; line-height: 0; vertical-align: -0.4em; margin-right: 0.1em; }
.quote__author { display: flex; align-items: center; gap: var(--space-xs); }
.quote__avatar { width: 2.6rem; height: 2.6rem; border-radius: var(--radius-full); background: var(--accent-soft); display: grid; place-items: center; color: var(--accent-600); font-weight: var(--weight-bold); }
.quote__name { font-weight: var(--weight-semibold); }
.quote__role { color: var(--fg-subtle); font-size: var(--step--1); }

/* --- CTA-Band --- */
.cta {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--radius-xl); padding: clamp(var(--space-xl), 6vw, var(--space-2xl)) var(--gutter);
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  color: var(--accent-ink); box-shadow: var(--shadow-lg);
}
/* Der Lichtschein liegt UNTER dem Text (z-index), nicht darueber: als spaeteres
   Geschwister malte er sich bisher ueber die Schrift und wusch sie an seiner
   hellsten Stelle bis auf 1,5:1 aus — ein Blocker `low-contrast` im nackten
   Template, auf jeder Seite mit CTA-Band. */
.cta::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(40% 80% at 80% 120%, rgba(255,255,255,0.18), transparent 70%); pointer-events: none; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: inherit; }
/* Voll deckend statt 85 %: auf dem Akzent-Verlauf ergibt der abgeschwaechte Ton
   3,3:1 — unter den 4,5:1, die WCAG AA fuer Fliesstext verlangt. Die gewuenschte
   Zuruecknahme gegenueber der Ueberschrift traegt der Schriftgrad, nicht die Deckkraft. */
.cta p { color: var(--accent-ink); max-width: 46ch; margin-inline: auto; margin-top: var(--space-sm); }
.cta .btn--ghost { --_fg: var(--accent-ink); --_bd: color-mix(in srgb, var(--accent-ink) 50%, transparent); }
.cta .btn--ghost:hover { --_bg: rgba(255,255,255,0.14); }
.cta .btn--primary { --_bg: var(--accent-ink); --_fg: var(--accent-700); }

/* --- Kontakt / Formular --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: var(--space-sm); align-content: start; }
.contact-info a { color: var(--fg); }
.contact-info .row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: start; }
.form { display: grid; gap: var(--space-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-md), 3vw, var(--space-lg)); box-shadow: var(--shadow-sm); }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--step--1); font-weight: var(--weight-medium); }
.field input, .field textarea {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0.7em 0.85em; width: 100%;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-xs); }
.field--check input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--accent); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Formularzustaende. Ohne JS nutzbar: der Serverlauf setzt die Klassen.
 * Praefix .field (nicht .feld) — das ist die Klasse des Kontaktformulars.
 * .feld gehoert zum Rechner-Baustein weiter unten. */
.field--fehler input,
.field--fehler textarea { border-color: var(--danger); }
.field__fehler { color: var(--danger); font-size: var(--step--1); margin-top: .35rem; }
.hinweis--ok   { border-left: 3px solid var(--success); padding-left: 1rem; }
.hinweis--fehler { border-left: 3px solid var(--danger); padding-left: 1rem; }

/* Doppelklick auf Absenden verhindern — ohne JS ueber :disabled nicht moeglich,
 * deshalb wenigstens visuelles Feedback. */
button[type="submit"]:active { transform: translateY(1px); }
/* Innenabstand + --fg-muted statt --fg-subtle: der Kasten traegt einen Rand UND
   eine Flaeche, sein Text sass ohne jeden Abstand darin (Blocker cramped-padding),
   und --fg-subtle auf --surface-2 ergibt 4,3:1 — knapp unter WCAG AA (Blocker
   low-contrast). Beide meldete das Slop-Gate im NACKTEN Template, jeder Build hat
   sie geerbt und in der Nacharbeit neu repariert. */
.map-static { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/9; background: var(--surface-2); display: grid; place-items: center; padding: var(--space-sm); text-align: center; color: var(--fg-muted); }

/* --- Prose (Rechtsseiten) --- */
.prose { max-width: var(--container-narrow); margin-inline: auto; }
.prose h1 { font-size: var(--step-5); margin-bottom: var(--space-md); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-lg); margin-bottom: var(--space-2xs); }
.prose p, .prose li { color: var(--fg-muted); margin-top: var(--space-xs); }
.prose a { color: var(--accent-600); text-decoration: underline; text-underline-offset: 2px; }

/* --- A11y-Helfer --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: var(--z-overlay); background: var(--accent); color: var(--accent-ink); padding: 0.7em 1.2em; border-radius: var(--radius-md); transition: top var(--dur-base) var(--ease); }
.skip-link:focus { top: var(--space-sm); }

/* --- Scroll-Reveal (Tier 1) — natives CSS scroll-driven, JS nur als Fallback ---
   Zwei sich gegenseitig ausschließende Pfade:
   (A) Moderne Browser (Chrome/Edge 115+, Safari 26+): rein CSS via
       animation-timeline: view() — KEIN JS nötig, läuft auf dem Compositor-Thread.
   (B) Firefox-Stable/Legacy (animation-timeline NICHT unterstützt): der bisherige
       JS-Pfad (main.js / <Reveal/> setzt html.js + .is-visible) übernimmt.
   In BEIDEN Fällen ist der Startzustand ohne JS sichtbar (opacity:1) und
   prefers-reduced-motion schaltet jede Bewegung komplett ab (Endzustand sofort).
   --reveal-delay staffelt Geschwister NUR im JS-Fallback (view() staffelt selbst). */
.reveal { opacity: 1; transform: none; }

/* (B) JS-Fallback: NUR wo natives scroll-driven fehlt (v. a. Firefox-Stable). Das
   versteckt den Startzustand ausschließlich bei aktivem JS (html.js) und schaltet
   bei reduced-motion ab. In modernen Browsern greift dieser Block GAR NICHT,
   sodass das clientseitige .is-visible dort folgenlos bleibt (kein Konflikt). */
@supports not (animation-timeline: view()) {
  html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition-delay: 0ms; } }
}

/* (A) Modern: CSS-only Reveal beim Eintritt ins Sichtfeld. Nur transform/opacity
   (Compositor-freundlich), nur bei prefers-reduced-motion:no-preference. Bei reduce
   bleibt .reveal schlicht sichtbar (kein versteckter Startzustand → robuster als der
   alte html.js-Trick). Longhand statt animation-Shorthand, damit animation-timeline
   nicht versehentlich zurückgesetzt wird. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 0;
      animation-name: reveal-up;
      animation-fill-mode: both;
      animation-timing-function: var(--ease-out);
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
  }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --- Tier-1 Scroll-Effekte (opt-in, rein CSS, @supports + reduced-motion gegated) ---
   Aktivierung über einen Markup-Hook; kein JS, kein externer Request. Fehlt der
   Support oder gilt reduced-motion, passiert schlicht NICHTS (Inhalt statisch, voll
   sichtbar). Werden in Phase 1C in die data-fx-/Registry-Konvention überführt. */

/* Scroll-Fortschrittsbalken: Element mit .scroll-progress (z. B. dünne Leiste unter
   dem sticky Header). Ohne Support unsichtbar (scaleX 0) statt fälschlich voll. */
.scroll-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: calc(var(--z-header) + 1); background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation-name: scroll-progress-grow;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes scroll-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sanfte Medien-Parallax: [data-parallax] auf einem Medien-Element in einem
   Clipping-Container (z. B. .hero__media, das overflow:hidden hat). Das scale(1.06)
   verhindert, dass der ±-Versatz Kanten freilegt. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-parallax] {
      animation-name: media-parallax;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
  }
}
@keyframes media-parallax { from { transform: translateY(-2.5%) scale(1.06); } to { transform: translateY(2.5%) scale(1.06); } }

/* --- Team --- */
.member { text-align: center; justify-items: center; gap: var(--space-2xs); }
.member__avatar { width: 5.5rem; height: 5.5rem; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-600); display: grid; place-items: center; overflow: hidden; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--step-3); margin-bottom: var(--space-2xs); }
.member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-weight: var(--weight-semibold); font-size: var(--step-1); }
.member__role { color: var(--accent-600); font-size: var(--step--1); font-weight: var(--weight-medium); }
.member__bio { color: var(--fg-muted); font-size: var(--step--1); max-width: 32ch; }

/* --- FAQ (Akkordeon, nativ <details>) --- */
.faq { display: grid; gap: var(--space-sm); max-width: var(--container-narrow); margin-inline: auto; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding-inline: clamp(var(--space-sm), 3vw, var(--space-lg)); transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.faq__item[open] { border-color: var(--accent-300); box-shadow: var(--shadow-xs); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-md); font-weight: var(--weight-semibold); font-size: var(--step-1); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__chevron { flex: none; width: 1.25rem; height: 1.25rem; color: var(--accent-2-600); transition: transform var(--dur-base) var(--ease); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--space-md); }
.faq__a p { max-width: 64ch; }

/* Aufklappen weich animieren — interpolate-size macht height:auto animierbar.
 * Ohne Support bleibt das native, sofortige Auf-/Zuklappen von <details>. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 280ms ease, content-visibility 280ms allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
  }
}

/* --- Preise / Pakete --- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: start; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.price { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-md), 3vw, var(--space-lg)); box-shadow: var(--shadow-xs); display: grid; gap: var(--space-sm); align-content: start; }
.price--featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.price__badge { position: absolute; top: 0; right: var(--space-md); transform: translateY(-50%); background: var(--accent); color: var(--accent-ink); font-size: var(--step--1); font-weight: var(--weight-semibold); padding: 0.3em 0.8em; border-radius: var(--radius-full); box-shadow: var(--shadow-accent); }
.price__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--step-2); }
.price__amount { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--step-5); color: var(--accent-600); line-height: 1; letter-spacing: var(--tracking-tight); }
.price__period { color: var(--fg-subtle); font-size: var(--step--1); }
.price .checklist { margin-top: var(--space-2xs); }
.price .btn { margin-top: var(--space-xs); width: 100%; }

/* --- Galerie / Referenzen --- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .gallery { grid-template-columns: 1fr; } }
.gallery__item { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.gallery__item img, .gallery__ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__cap { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-xs) var(--space-sm); font-size: var(--step--1); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.55)); }

/* Galerie-Variante: masonry (versetzte Höhen via CSS-Columns, kein JS) */
.gallery--masonry { display: block; columns: 3 16rem; column-gap: var(--space-sm); }
.gallery--masonry .gallery__item { aspect-ratio: auto; break-inside: avoid; margin-bottom: var(--space-sm); }
.gallery--masonry .gallery__item img { height: auto; }
@media (max-width: 760px) { .gallery--masonry { columns: 2 12rem; } }
@media (max-width: 460px) { .gallery--masonry { columns: 1; } }

/* Galerie-Variante: hero-plus-grid (erstes Bild gross, Rest als Raster) */
.gallery--hero-plus { grid-template-columns: repeat(4, 1fr); }
.gallery--hero-plus .gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .gallery--hero-plus { grid-template-columns: repeat(2, 1fr); }
  .gallery--hero-plus .gallery__item:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
}

/* --- Galerie-Lightbox (Stufe N): <dialog>, kein JavaScript --------------------
   Der Ausloeser ist ein <button> ohne eigenes Aussehen — das Bild darin traegt
   die Optik. Ohne JS bleibt das Bild sichtbar, nur showModal() greift nicht. */
.gallery__ausloeser {
  all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in;
}
.gallery__ausloeser img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lightbox {
  border: none; border-radius: var(--radius-lg); padding: 0; background: var(--surface);
  max-width: min(92vw, 70rem); max-height: 90vh;
  box-shadow: var(--shadow-lg);
}
.lightbox::backdrop { background: color-mix(in srgb, var(--n-950) 78%, transparent); }
.lightbox img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.lightbox__zu {
  position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 1;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none;
  background: color-mix(in srgb, var(--n-950) 55%, transparent); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox__text { padding: var(--space-sm) var(--space-md); margin: 0; color: var(--fg-muted); }

/* --- Filter-Galerie (Stufe N): Radios + :has(), kein JavaScript ---------------
   Nur die generische Pill-Optik steht hier. Die Ein-/Ausblend-Regeln je
   Kategorie (.filter:has(#…:checked) …) sind projektspezifisch und gehoeren in
   assets/project.css — siehe Kommentar in partials/sections/filter-galerie.php. */
.filter__leiste { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.filter__radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.filter__label {
  display: inline-flex; align-items: center; padding: 0.45em 1.1em;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  font-size: var(--step--1); font-weight: var(--weight-medium); cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.filter__radio:checked + .filter__label { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.filter__radio:focus-visible + .filter__label { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Kostenschaetzer (Stufe N) --- */
.rechner {
  display: grid; gap: var(--space-md); max-width: var(--container-narrow);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(var(--space-md), 3vw, var(--space-lg)); box-shadow: var(--shadow-sm);
}
.feld { display: grid; gap: 0.35rem; position: relative; }
.feld__label { font-size: var(--step--1); font-weight: var(--weight-medium); }
.feld input {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0.7em 0.85em; width: 100%;
}
.feld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.feld__einheit { font-size: var(--step--1); color: var(--fg-muted); }
.rechner__ergebnis {
  display: block; font-family: var(--font-display); font-size: var(--step-4);
  font-weight: var(--weight-bold); color: var(--accent-600);
}
.rechner__hinweis { font-size: var(--step--1); color: var(--fg-muted); margin: 0; }

/* Leistungen-Variante: alternating-rows (Text/Bild im Zickzack statt Karten-Grid) */
.leistungen-rows { display: grid; gap: clamp(var(--space-xl), 6vw, var(--space-2xl)); }
.leistungen-rows .lrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); align-items: center; }
.leistungen-rows .lrow:nth-child(even) .lrow__media { order: -1; }
.leistungen-rows .lrow__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent); box-shadow: var(--card-shadow); }
.leistungen-rows .lrow__media img, .leistungen-rows .lrow__media picture { width: 100%; height: 100%; object-fit: cover; }
.leistungen-rows .lrow__media > svg { width: 28%; height: auto; opacity: 0.5; }
.leistungen-rows .lrow__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-600); margin-bottom: var(--space-xs); }
.leistungen-rows .lrow__icon svg { width: 1.6rem; height: 1.6rem; }
@media (max-width: 800px) {
  .leistungen-rows .lrow { grid-template-columns: 1fr; gap: var(--space-md); }
  .leistungen-rows .lrow:nth-child(even) .lrow__media { order: 0; }
}

/* --- Partner / Mitgliedschaften --- */
.partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-md); }
.partner { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6em 1.1em; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: var(--fg-muted); font-weight: var(--weight-semibold); font-size: var(--step--1); box-shadow: var(--shadow-xs); }
.partner svg { width: 1.1rem; height: 1.1rem; color: var(--accent-600); }
.partner img { height: 1.5rem; width: auto; }

/* --- Preset glass-product: Glas-Karten (nur in diesem dunklen Preset) ---------
   Halbtransparente Fläche + backdrop-filter als Signatur. Rein additiv, greift nur
   bei aktivem Preset. Ohne backdrop-filter-Support bleibt die solide Fläche (kein
   Defekt, nur weniger Glas). */
:root[data-preset="glass-product"] .card,
:root[data-preset="glass-product"] .price,
:root[data-preset="glass-product"] .quote,
:root[data-preset="glass-product"] .faq__item {
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* --- Tier-3 scene-Sektion (R3F, react-only) ----------------------------------
   Poster (SSR/Pflicht) füllt die Bühne; das client-only WebGL-Canvas liegt
   transparent darüber. Ohne JS / bei reduced-motion bleibt nur der Poster. */
.scene__stage { position: relative; min-height: clamp(22rem, 48vh, 34rem); margin-top: var(--space-md); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.scene__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__poster img, .scene__poster svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene__canvas { position: absolute !important; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.scene__canvas.is-live { animation: scene-fade 1.2s ease forwards; }
@keyframes scene-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene__canvas { display: none; } }

/* --- Seitenuebergaenge zwischen echten .php-Seiten (Cross-Document View
   Transitions). Chrome 126+/Safari 18.2+; aeltere Browser navigieren normal —
   kein Fallback noetig. Greift NUR bei nutzerinitiierter Same-Origin-Navigation. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 180ms ease both; }
  ::view-transition-new(root) { animation: vt-in  260ms ease both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-0.75rem); } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(0.75rem); } }
}

/* Bei Bewegungsreduktion: schlichte Blende statt Bewegung. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}

/* Kopf + Marke bleiben beim Seitenwechsel stehen statt mitzublenden — das erzeugt
 * den SPA-Eindruck. Nur der HEADER-Schriftzug bekommt den Namen: .brand kommt
 * auch im Footer vor, und ein view-transition-name darf pro Seite nur einmal
 * vorkommen (sonst bricht die Transition komplett). */
.site-header      { view-transition-name: kopf; }
.site-header .brand { view-transition-name: marke; }

/* Registrierte Custom Property: macht den Winkel eines Verlaufs animierbar.
   Custom Properties sind normalerweise nicht interpolierbar -- @property gibt
   ihr einen Typ, und erst dann laesst sich der Verlauf WEICH drehen statt hart
   zu springen. Nutzung: .grad-shift auf ein Element mit --accent gesetzt. */
@property --grad-winkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .grad-shift {
    background: linear-gradient(var(--grad-winkel), var(--accent), var(--surface));
    transition: --grad-winkel 600ms ease;
  }
  .grad-shift:hover, .grad-shift:focus-visible { --grad-winkel: 45deg; }
}

/* --- Vorher-Nachher (Stufe N) ------------------------------------------------
   Ohne JS stehen beide Bilder untereinander (Standardfluss, .vn__bild hat kein
   Overlay-Styling). Erst html.js schaltet auf Ueberlagerung um — so bleibt die
   Sektion ohne JavaScript vollstaendig nutzbar statt halb sichtbar. */
.vn { position: relative; }
.vn__bild { margin: 0; }
.vn__label {
  position: absolute; bottom: var(--space-sm);
  background: color-mix(in srgb, var(--n-950) 65%, transparent);
  color: #fff; padding: 0.3em 0.9em; border-radius: var(--radius-full);
  font-size: var(--step--1); font-weight: var(--weight-semibold);
}
.vn__label--links { left: var(--space-sm); }
.vn__label--rechts { right: var(--space-sm); }

html.js .vn {
  --vn-pos: 50%;
  display: grid;
  isolation: isolate;
  touch-action: pan-y;                    /* vertikales Scrollen bleibt moeglich */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
html.js .vn__bild { grid-area: 1 / 1; }
html.js .vn__bild--vorher {
  clip-path: inset(0 calc(100% - var(--vn-pos)) 0 0);
}
html.js .vn__griff {
  position: absolute; inset-block: 0; left: var(--vn-pos);
  width: 2px; background: var(--surface);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18);
  translate: -50% 0; pointer-events: none;
}
html.js .vn__griff::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 2.75rem; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 2px 10px rgb(0 0 0 / .22);
}
/* Der Regler liegt unsichtbar ueber der ganzen Flaeche — Ziehen UND Tastatur. */
html.js .vn__regler {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
html.js .vn__regler:focus-visible ~ .vn__griff::after {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* --- Horizontales Laufband (Stufe N) -------------------------------------
   Basiszustand: ganz normales horizontales Scrollen mit Snap — voll nutzbar
   ohne animation-timeline-Support und ohne JavaScript. Erst darueber schaltet
   @supports auf die scroll-gekoppelte sticky-Buehne um. */
.lauf__buehne { display: flex; align-items: center; }
.lauf__bahn {
  display: flex; gap: var(--space-lg);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); width: 100%;
}
.lauf__karte { flex: 0 0 min(80vw, 32rem); scroll-snap-align: center; }
.lauf__bild { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-xs); }
.lauf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lauf { --spuren: 4; height: calc(var(--spuren) * 100vh); }
    .lauf__buehne { position: sticky; top: 0; height: 100vh; overflow: hidden; }
    .lauf__bahn {
      overflow: visible; padding-inline: 0;
      animation: lauf-pan linear both;
      animation-timeline: view();
      animation-range: contain;
    }
    @keyframes lauf-pan {
      to { transform: translateX(calc(-100% + 90vw)); }
    }
  }
}

/* Auf schmalen Bildschirmen ist horizontales Scrollen eher hinderlich als
 * hilfreich — dort bleibt es beim normalen Snap-Scrollen ohne Kopplung. */
@media (max-width: 780px) {
  .lauf { height: auto; }
  .lauf__buehne { position: static; height: auto; }
  .lauf__bahn { overflow-x: auto; animation: none; }
}