@charset "utf-8";

/* ==========================================================================
   Tuningkonzepte — design system
   The world: the inside of a car at night. Deep blue-black surfaces, points
   of light, brushed-steel edges, one warm coral accent taken from the logo.
   ========================================================================== */

/* --- Type ---------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --ink-900: #05070c;
  --ink-850: #080b12;
  --ink-800: #0c1018;
  --ink-750: #11161f;
  --ink-700: #161c27;
  --ink-600: #1e2532;
  --line: #232b3a;
  --line-soft: #1a212c;

  /* Ink on dark */
  --paper: #f2f5f9;
  --text: #ccd5e0;
  --muted: #97a3b4;
  --faint: #808c9d;

  /* Brand */
  --navy: #0f2a3c;
  --steel: #8b97a8;
  --accent: #f05038;
  --accent-hot: #ff6a4d;
  /* Text laid on the coral and green fills. Near-black clears 5:1 on both,
     where white would sit at 3.6:1 and fail AA. */
  --on-accent: #1b0a05;
  --wa: #0e7a35;
  --wa-hot: #0b6a2d;
  --star: #bfd4ff;
  --star-warm: #ffd9a8;

  /* Type scale — fluid, clamped */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-lg: clamp(1.09rem, 1.02rem + 0.34vw, 1.3rem);
  --fs-xl: clamp(1.26rem, 1.13rem + 0.6vw, 1.6rem);
  --fs-2xl: clamp(1.5rem, 1.28rem + 1.05vw, 2.15rem);
  --fs-3xl: clamp(1.85rem, 1.45rem + 1.95vw, 3rem);
  --fs-4xl: clamp(2.3rem, 1.62rem + 2.95vw, 4.05rem);

  /* Space */
  --gap: clamp(1.15rem, 0.9rem + 1.1vw, 2rem);
  --pad-x: clamp(1.15rem, 0.6rem + 2.6vw, 3.25rem);
  --section-y: clamp(3.9rem, 3rem + 4.2vw, 6.75rem);
  --maxw: 78rem;
  --maxw-text: 42rem;

  --radius: 14px;
  --radius-sm: 10px;

  /* One shadow system: real offset + soft blur */
  --shadow-1: 0 2px 6px rgb(0 0 0 / 0.42), 0 10px 26px rgb(0 0 0 / 0.34);
  --shadow-2: 0 6px 18px rgb(0 0 0 / 0.5), 0 26px 64px rgb(0 0 0 / 0.46);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  font-variation-settings: 'wdth' 100;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
[hidden] { display: none !important; }

/* --- Browser surfaces: these ship with the design too --------------------- */
::selection { background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-850); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 99px; border: 2px solid var(--ink-850); }
::-webkit-scrollbar-thumb:hover { background: #2c3546; }
html { scrollbar-color: var(--ink-600) var(--ink-850); scrollbar-width: thin; }
:root { accent-color: var(--accent); caret-color: var(--accent); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--paper);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: 'wdth' 112;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 860; letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.024em; line-height: 1.08; }
h3 { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.02em; font-variation-settings: 'wdth' 106; }
h4 { font-size: var(--fs-lg); font-weight: 700; font-variation-settings: 'wdth' 104; }

p { margin: 0 0 1.1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.lead {
  font-size: var(--fs-lg);
  color: var(--text);
  line-height: 1.55;
  max-width: 44ch;
}

/* --- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); }
.section--raised { background: var(--ink-850); }
.section--panel { background: var(--ink-800); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 0.7rem 1.1rem;
  font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* A heading that needs a short line of context above it gets it as a
   subordinate clause underneath, never as a floating eyebrow label. */
.section-head { margin-bottom: clamp(1.9rem, 1.45rem + 1.7vw, 2.9rem); }
.section-head p { color: var(--muted); margin-top: 0.85rem; max-width: 48ch; font-size: var(--fs-base); line-height: 1.62; }
.section-head--split {
  display: grid; gap: var(--gap) clamp(1.5rem, 1rem + 2.4vw, 3.25rem); align-items: end;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
@media (max-width: 800px) { .section-head--split { grid-template-columns: 1fr; } }

/* --- Icons: drawn, single stroke weight ---------------------------------- */
.ico { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 46px; padding: 0.68rem 1.45rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.012em;
  text-decoration: none; border: 0; border-radius: 99px; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.36), 0 9px 22px rgb(240 80 56 / 0.13);
  transition: background-color 0.22s var(--ease), transform 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
.btn:hover { --btn-bg: var(--accent-hot); transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.4), 0 13px 30px rgb(240 80 56 / 0.2); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 1.05em; height: 1.05em; stroke-width: 2; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--paper);
  border: 1px solid var(--line); box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--ink-750); --btn-fg: var(--paper); border-color: #333d51;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.34), 0 10px 22px rgb(0 0 0 / 0.26); }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: var(--wa-hot); box-shadow: 0 3px 8px rgb(0 0 0 / 0.4), 0 13px 30px rgb(14 122 53 / 0.22); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Text link with a rule that draws itself on hover */
.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 24px;
  color: var(--accent); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; letter-spacing: 0.01em;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.4s var(--ease), color 0.2s var(--ease);
}
.tlink:hover { color: var(--accent-hot); background-size: 100% 1.5px; }
.tlink .ico { width: 0.95em; height: 0.95em; stroke-width: 2.1; transition: transform 0.35s var(--ease); }
.tlink:hover .ico { transform: translate(2px, -2px); }

/* --- Header -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  /* Blur here is doing a job: keeping the bar legible over moving photography. */
  .hdr { backdrop-filter: blur(14px) saturate(1.3); }
}
.hdr[data-stuck='true'] { background: color-mix(in srgb, var(--ink-900) 94%, transparent); border-bottom-color: var(--line-soft); }
.hdr__in { display: flex; align-items: center; gap: var(--gap); min-height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__a {
  font-weight: 900; font-size: 1.02rem; letter-spacing: 0.01em;
  font-variation-settings: 'wdth' 108; color: var(--paper); text-transform: uppercase;
}
.brand__b {
  font-weight: 800; font-size: 0.62rem; letter-spacing: 0.3em;
  color: var(--accent); text-transform: uppercase; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav a:not(.btn) {
  position: relative; padding: 0.55rem 0.85rem; border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav a:not(.btn):hover { color: var(--paper); background: var(--ink-750); }
.nav a[aria-current='page'] { color: var(--paper); }
.nav a[aria-current='page']::after {
  content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.15rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.hdr .btn { min-height: 42px; padding: 0.55rem 1.25rem; }
/* The drawer carries its own call to action; on desktop the bar's button is
   the only one, so the duplicate stays hidden. */
.nav > .btn { display: none; }

.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--paper); cursor: pointer;
}
.burger .ico { width: 20px; height: 20px; stroke-width: 1.9; }

@media (max-width: 1020px) {
  .burger { display: inline-flex; }
  .hdr .btn--head { display: none; }
  .nav {
    position: fixed; inset: 74px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; padding: 0.6rem var(--pad-x) 1.5rem;
    background: var(--ink-850); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav[data-open='true'] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { padding: 0.85rem 0.6rem; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a[aria-current='page']::after { left: 0.6rem; right: auto; width: 18px; bottom: 0.45rem; }
  .nav > .btn { display: inline-flex; margin-top: 1rem; justify-content: center; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-900); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgb(5 7 12 / 0.55) 0%, rgb(5 7 12 / 0.34) 32%, rgb(5 7 12 / 0.82) 78%, var(--ink-900) 100%),
    linear-gradient(to right, rgb(5 7 12 / 0.9) 0%, rgb(5 7 12 / 0.55) 42%, rgb(5 7 12 / 0.18) 100%);
}
#starfield { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero__in { padding-block: clamp(4.75rem, 3.7rem + 7.2vw, 8.25rem) clamp(3.25rem, 2.6rem + 3.6vw, 5.25rem); }
.hero h1 { max-width: 23ch; }   /* holds "bei Nacht am schönsten" on one line */
.hero h1 em {
  display: block; font-style: normal; color: var(--accent);
  /* Colour carries the emphasis; the weight already matches the line. */
}
.hero__sub { margin-top: 1.25rem; max-width: 44ch; font-size: var(--fs-lg); line-height: 1.58; color: var(--text); }
.hero .btn-row { margin-top: 1.85rem; }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.9rem;
  max-width: 52rem;
  margin-top: clamp(2.5rem, 2rem + 2.1vw, 3.6rem);
  padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--muted);
}
.hero__facts span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__facts .ico { width: 1.05em; height: 1.05em; color: var(--accent); }

/* --- Editorial service rows (homepage + /leistungen) --------------------- */
/* Deliberately not a grid of equal cards: each row alternates and the image
   carries different weight than the text beside it. */
.srow {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--line-soft);
}
.srow:first-of-type { border-top: 0; padding-top: 0; }
.srow:nth-child(even) .srow__media { order: 2; }
.srow__media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-2); background: var(--ink-800);
}
.srow__media img { width: 100%; height: 100%; object-fit: cover; }
.srow__body h2, .srow__body h3 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.028em; font-variation-settings: 'wdth' 110; }
.srow__body p { margin-top: 0.85rem; color: var(--muted); max-width: 45ch; line-height: 1.68; }
.srow__body .tlink { margin-top: 1.25rem; }
@media (max-width: 820px) {
  .srow { grid-template-columns: 1fr; }
  .srow:nth-child(even) .srow__media { order: 0; }
}

/* --- Feature list (service detail pages) --------------------------------- */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.points li { background: var(--ink-850); padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); }
.points strong { display: block; color: var(--paper); font-weight: 750; font-size: var(--fs-lg); letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.points span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
@media (min-width: 720px) { .points { grid-template-columns: 1fr 1fr; } }

/* --- Steps --------------------------------------------------------------- */
.steps { display: grid; gap: var(--gap); counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-top: 1.4rem; border-top: 2px solid var(--line); }
.step h3 { font-size: var(--fs-lg); margin-bottom: 0.55rem; }
.step p { color: var(--muted); font-size: var(--fs-sm); }
.step--on { border-top-color: var(--accent); }

/* --- Gallery ------------------------------------------------------------- */
.gfilters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.gfilters button {
  padding: 0.55rem 1.05rem; border-radius: 99px; cursor: pointer;
  background: var(--ink-800); border: 1px solid var(--line);
  color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.gfilters button:hover { color: var(--paper); border-color: #38435a; }
.gfilters button[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.ggrid {
  display: grid; gap: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
  /* portrait shots span two rows; dense packing pulls the next landscape
     shot up into the hole they leave instead of stranding a gap */
  grid-auto-flow: dense;
}
@media (min-width: 680px) { .ggrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .ggrid { grid-template-columns: repeat(4, 1fr); } }

.gitem {
  position: relative; margin: 0; padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-800);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gitem img { width: 100%; height: 100%; object-fit: cover; }
/* Feedback lives on the container, never on the image itself. */
.gitem:hover, .gitem:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.gitem figcaption {
  position: absolute; inset: auto 0 0; padding: 2.2rem 0.85rem 0.7rem;
  background: linear-gradient(to top, rgb(5 7 12 / 0.92), transparent);
  color: var(--paper); font-size: var(--fs-xs); font-weight: 600; text-align: left;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.gitem:hover figcaption, .gitem:focus-visible figcaption { opacity: 1; transform: none; }
.gitem[hidden] { display: none; }
.gitem--tall { aspect-ratio: auto; grid-row: span 2; min-height: 0; }

/* Lightbox */
/* `display` must stay tied to [open]; a bare `display: grid` overrides the UA's
   `dialog:not([open]) { display: none }` and leaves an invisible full-screen
   layer swallowing every click on the page underneath. */
.lbox {
  position: fixed; inset: 0; z-index: 120; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(3 5 9 / 0.94); border: 0;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.lbox[open] { display: grid; opacity: 1; }
.lbox:not([open]) { display: none; }
.lbox::backdrop { background: rgb(3 5 9 / 0.9); }
.lbox img { max-width: min(100%, 1200px); max-height: 78vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); object-fit: contain; }
.lbox__cap { margin-top: 1rem; color: var(--text); font-size: var(--fs-sm); text-align: center; }
.lbox__x, .lbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: var(--ink-750); border: 1px solid var(--line); color: var(--paper);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.lbox__x:hover, .lbox__nav:hover { background: var(--ink-600); transform: scale(1.06); }
.lbox__x { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; margin-top: -24px; }
.lbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; margin-top: -24px; }
.lbox .ico { width: 22px; height: 22px; stroke-width: 1.9; }

/* --- Video showcase ------------------------------------------------------ */
.vshow { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); background: #000; }
.vshow video { width: 100%; height: auto; display: block; }
.vshow__hint {
  position: absolute; left: 0.9rem; bottom: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem; border-radius: 99px;
  background: rgb(5 7 12 / 0.72); color: var(--text);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
}
@supports (backdrop-filter: blur(1px)) { .vshow__hint { backdrop-filter: blur(8px); } }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1.25rem; cursor: pointer;
  padding: 1.45rem 0; list-style: none;
  color: var(--paper); font-weight: 650;
  font-size: clamp(1.02rem, 0.99rem + 0.16vw, 1.14rem);
  letter-spacing: -0.012em; line-height: 1.45;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary:hover .ico { opacity: 1; }
.faq summary .ico {
  margin-left: auto; flex: none; width: 1.05em; height: 1.05em; margin-top: 0.15em;
  color: var(--accent); opacity: 0.85;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq__a { padding-bottom: 1.6rem; padding-right: 2.25rem; color: var(--muted); max-width: 64ch; line-height: 1.7; }
.faq__a p { margin: 0; }

/* --- Contact ------------------------------------------------------------- */
.cgrid { display: grid; gap: clamp(1.75rem, 1.2rem + 3vw, 3.5rem); }
@media (min-width: 900px) { .cgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.dl { margin: 0; display: grid; gap: 1.5rem; }
.dl > div { display: flex; gap: 0.95rem; align-items: flex-start; }
/* Ohne min-width:0 wächst die Textspalte über den Flex-Container hinaus und
   lange Labels werden auf schmalen Displays abgeschnitten. */
.dl > div > div { min-width: 0; }
.dl .ico { width: 1.3em; height: 1.3em; color: var(--accent); margin-top: 0.22em; }
.dl dt { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.3rem; }
.dl dd { margin: 0; color: var(--paper); font-size: var(--fs-lg); font-weight: 650; line-height: 1.4; }
.dl dd a { text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.dl dd a:hover { color: var(--accent); }
.dl dd small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); margin-top: 0.15rem; }
.dl dd a:has(br) { display: inline-block; }

.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours th, .hours td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); font-weight: 500; }
.hours th { padding-right: 1.25rem; white-space: nowrap; }
.hours th { color: var(--muted); font-weight: 600; }
.hours td { color: var(--paper); font-variant-numeric: tabular-nums; text-align: right; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr[data-closed='true'] td { color: var(--faint); }

/* --- Form ---------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: var(--fs-sm); font-weight: 650; color: var(--text); }
.field label .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 1rem;
  background: var(--ink-800); color: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-base);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #303a4c; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: var(--ink-750);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #e0574a; }
.field__err { font-size: var(--fs-xs); color: #ff8878; min-height: 1em; }
.field input:user-invalid ~ .field__err::before { content: attr(data-msg); }
.form__note { font-size: var(--fs-xs); color: var(--faint); max-width: 48ch; }
.form__note a { color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formstatus {
  padding: 0.9rem 1.1rem; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--line); background: var(--ink-800); color: var(--text);
}
.formstatus[data-tone='ok'] { border-color: var(--wa); color: #7ee0a4; }
.formstatus[data-tone='err'] { border-color: #e0574a; color: #ff9c8e; }
/* Während die Anfrage unterwegs ist: Knopf gesperrt, damit ein zweiter Klick
   nicht dieselbe Anfrage ein zweites Mal losschickt. */
.form button[data-busy='true'] { opacity: 0.6; cursor: progress; }
.form button[disabled] { pointer-events: none; }

/* --- Map ----------------------------------------------------------------- */
.mapcard {
  display: block; position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-800); text-decoration: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mapcard:hover { border-color: #38435a; box-shadow: var(--shadow-2); }
.mapcard iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(1) invert(0.92) contrast(0.86); }
.mapcard__bar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.1rem; border-top: 1px solid var(--line);
  color: var(--paper); font-size: var(--fs-sm); font-weight: 650;
}
.mapcard__bar .ico { color: var(--accent); }
.mapcard__bar span:last-child { margin-left: auto; color: var(--accent); }

/* --- Callout band -------------------------------------------------------- */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-800); border: 1px solid var(--line);
  padding: clamp(2rem, 1.4rem + 3.4vw, 3.75rem);
}
.band__glow {
  position: absolute; z-index: -1; inset: auto -10% -60% auto; right: -8%;
  width: min(34rem, 70%); aspect-ratio: 1;
  background: radial-gradient(circle, rgb(240 80 56 / 0.2), transparent 68%);
  pointer-events: none;
}
.band h2 { max-width: 18ch; }
.band p { color: var(--muted); margin-top: 1rem; max-width: 46ch; }
.band .btn-row { margin-top: 2rem; }

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs { font-size: var(--fs-xs); color: var(--faint); padding-top: 1.75rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--line); }
.crumbs [aria-current] { color: var(--text); }

/* --- Page head (subpages) ------------------------------------------------ */
.phead {
  position: relative;
  /* The section that follows brings its own top padding — this one only
     needs to clear the breadcrumb above it. */
  padding-block: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem) clamp(0.5rem, 0.3rem + 0.9vw, 1.5rem);
}
.phead h1 { max-width: 19ch; font-size: var(--fs-3xl); }
.phead .lead { margin-top: 1.2rem; }
.phead--media { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .phead--media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
.phead__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }

/* --- Prose (legal pages) ------------------------------------------------- */
.prose { max-width: var(--maxw-text); }
.prose h2 { font-size: var(--fs-xl); margin-top: 2.75rem; margin-bottom: 0.85rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose p, .prose li { color: var(--muted); }
.prose a { color: var(--accent); }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4rem; }
.prose address { font-style: normal; color: var(--text); }

/* --- Footer -------------------------------------------------------------- */
.ftr { background: var(--ink-850); border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 2.4rem + 3vw, 4.5rem) 2rem; }
.ftr__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
@media (min-width: 560px) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); } }
@media (min-width: 900px) { .ftr__about { grid-column: 1; } }
.ftr h2 { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.ftr a { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); transition: color 0.2s var(--ease); }
.ftr ul a, .ftr__bottom nav a, .ftr address a {
  display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px;
}
.ftr a:hover { color: var(--accent); }
.ftr__about p { color: var(--muted); font-size: var(--fs-sm); margin-top: 1rem; max-width: 34ch; }
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--faint);
}
.ftr__bottom nav { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.ftr address { font-style: normal; color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }
/* Werkstatt und Postanschrift stehen untereinander – die zweite bekommt etwas
   Luft, damit man auf einen Blick sieht, dass es zwei Adressen sind. */
.ftr address strong { color: var(--faint); font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.ftr__post { display: inline-block; margin-top: 0.7rem; }

/* --- Floating WhatsApp --------------------------------------------------- */
.wa-fab {
  position: fixed; right: clamp(0.9rem, 2.5vw, 1.6rem);
  bottom: calc(clamp(0.9rem, 2.5vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  z-index: 80; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--wa); color: #fff; text-decoration: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.42), 0 14px 34px rgb(14 122 53 / 0.34);
  transition: transform 0.25s var(--ease), background-color 0.2s var(--ease);
}
.wa-fab:hover { background: var(--wa-hot); transform: scale(1.07); }
.wa-fab svg { width: 27px; height: 27px; fill: currentColor; stroke: none; }

/* --- Motion: one authored entrance, varied per section ------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    .slide-r {
      animation: slide-r linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes slide-r {
      from { opacity: 0; transform: translateX(-22px); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* --- Print: a scroll-revealed element must never print blank ------------- */
@media print {
  .rise, .slide-r { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hdr, .wa-fab, .burger, .gfilters, .lbox { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; word-break: break-all; }
}

/* --- Utilities ----------------------------------------------------------- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--gap); }
.mt-l { margin-top: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.center-narrow { max-width: 46rem; margin-inline: auto; }

/* ==========================================================================
   Konversions-Bausteine: Checker, Konfigurator, Auswahlkarten
   Gleiche Flächen, gleiche Radien, gleiche Akzentfarbe wie der Rest der
   Seite. Keine neuen Effekte, nur neue Funktionen.
   ========================================================================== */

/* --- Gemeinsame Hülle ----------------------------------------------------- */
.chk, .cfg, .picker {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1.9vw, 2.5rem);
}
.chk__head { margin-bottom: 1.6rem; }
.chk__head h2 { font-size: var(--fs-xl); }
.chk__head p { color: var(--muted); margin-top: 0.6rem; font-size: var(--fs-sm); max-width: 54ch; }

/* --- Checker -------------------------------------------------------------- */
.chk__fields { display: grid; gap: 0.9rem; }
@media (min-width: 720px) {
  .chk__fields { grid-template-columns: repeat(3, 1fr); }
  .chk__fields--two { grid-template-columns: repeat(2, 1fr); }
}
/* Weg, der bei diesem Fahrzeug nicht offensteht: sichtbar, aber zurückgenommen. */
.chk__alt[data-off='true'] { opacity: 0.5; }
.chk__alt[data-off='true'] .num { color: var(--faint); }
.chk select:disabled { opacity: 0.45; cursor: not-allowed; }

.chk__out { margin-top: 1.5rem; }
.chk__idle {
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
  color: var(--faint); font-size: var(--fs-sm);
}
.chk__idle .ico { color: var(--faint); }

.verdict {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem;
  margin: 0; padding: 1.1rem 1.25rem;
  background: var(--ink-750); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text); line-height: 1.6; max-width: none;
}
.verdict__yes {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #7ee0a4; font-weight: 750; white-space: nowrap;
}
.verdict__yes .ico { width: 1.05em; height: 1.05em; stroke-width: 2.4; }
.verdict strong { color: var(--paper); }
.verdict--no { color: var(--muted); }
.verdict--no .ico { color: var(--accent); flex: none; margin-top: 0.2em; }
.verdict--no { align-items: flex-start; }

.chk__alts { margin-top: 1rem; display: grid; gap: 0.6rem; }
.chk__alt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
  padding: 0.75rem 1rem; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--muted);
}
.chk__alt strong { color: var(--text); font-weight: 650; }
.chk__alt .num { margin-left: auto; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }

.chk__actions { margin-top: 1.25rem; }
.chk__note { margin: 1.5rem 0 0; font-size: var(--fs-xs); color: var(--faint); max-width: 62ch; }

.chk__fallback { margin-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.chk__fallback summary {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer; list-style: none;
  padding: 1.1rem 0 0; color: var(--accent); font-weight: 650; font-size: var(--fs-sm);
}
.chk__fallback summary::-webkit-details-marker { display: none; }
.chk__fallback summary .ico { margin-left: auto; width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.chk__fallback[open] summary .ico { transform: rotate(45deg); }
.chk__fallback-body { padding-top: 1rem; display: grid; gap: 0.9rem; max-width: 34rem; }
.chk__fallback-body p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* --- Markenraster --------------------------------------------------------- */
.bgrid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 28vw, 12rem), 1fr)); }
.bcard {
  display: flex; flex-direction: column; gap: 0.2rem; min-height: 64px;
  padding: 0.85rem 1rem; text-decoration: none;
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.bcard strong { color: var(--paper); font-weight: 650; font-size: var(--fs-sm); }
.bcard span { color: var(--faint); font-size: var(--fs-xs); }
.bcard:hover { background: var(--ink-750); border-color: #333d51; transform: translateY(-1px); }
.bcard:hover strong { color: var(--accent); }

/* --- Tabellen ------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
.tbl th, .tbl td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl thead th { color: var(--faint); font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.tbl tbody th { color: var(--paper); font-weight: 650; white-space: nowrap; }
.tbl td { color: var(--muted); }
.tbl .num { text-align: right; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-best='true'] { background: var(--ink-800); }
.tbl a {
  /* Eigenständiger Link in einer Zelle, kein Link im Fliesstext – braucht
     also die volle Trefferfläche (WCAG 2.5.8). */
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--paper); text-decoration: none;
}
.tbl a:hover { color: var(--accent); }
.tag {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem;
  background: var(--accent); color: var(--on-accent);
  border-radius: 99px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.04em;
  vertical-align: 0.1em;
}

/* --- Datenblatt und Baujahr-Chips ----------------------------------------- */
.spec { display: grid; gap: 1px; margin: 0; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .spec { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .spec { grid-template-columns: repeat(4, 1fr); } }
.spec > div { background: var(--ink-850); padding: 1.1rem 1.25rem; }
.spec dt { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.35rem; }
.spec dd { margin: 0; color: var(--paper); font-weight: 650; font-size: var(--fs-lg); line-height: 1.3; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 99px;
  font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums;
}
.mt-s { margin-top: 0.75rem; }

/* --- Konfigurator --------------------------------------------------------- */
/* Die Bühne liegt oben und über die volle Breite: das Bild ist der Grund, aus
   dem jemand hier ist. Die Bedienung sitzt darunter, ab Tablet zweispaltig. */
.cfg { display: grid; gap: 0; padding: 0; overflow: hidden; }
.cfg__stage { position: relative; background: #05070c; aspect-ratio: 1500 / 844; }
/* Die Ambiente-Vorschau ist bewusst ein kleines Fenster neben der Auswahl und
   keine Bühne über die volle Breite – der Sternenhimmel bekommt den grossen
   Auftritt, das Licht in der Tür den Blick zur Kontrolle. */
.amb .cfg__stage { aspect-ratio: 21 / 9; background: #05070c; }
@media (max-width: 599px) { .amb .cfg__stage { aspect-ratio: 16 / 9; } }
@media (min-width: 940px) {
  /* Bühne über die volle Breite, darunter links Plan und die beiden Wege,
     rechts die drei Schritte bis zum Knopf. Das Panel spannt beide Zeilen,
     sonst bleibt links eine leere Fläche stehen. */
  .amb { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: start; }
  .amb > .cfg__stage { grid-column: 1 / -1; }
  .amb > .plan { grid-column: 1; border-right: 1px solid var(--line); }
  .amb > .cfg__guide { grid-column: 1; grid-row: 3; border-right: 1px solid var(--line); }
  /* In der schmalen linken Spalte stehen die beiden Wege untereinander. */
  .amb > .cfg__guide .amb__ctrl { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .amb > .cfg__panel {
    grid-column: 2; grid-row: 2 / span 2;
    grid-template-columns: minmax(0, 1fr);
  }
  .amb > .cfg__panel > .cfg__bundle, .amb > .cfg__panel > .cfg__sum { grid-column: auto; }
}
.cfg__stage canvas { display: block; width: 100%; height: 100%; }
.cfg__caption {
  position: absolute; left: 1rem; bottom: 0.9rem; margin: 0;
  padding: 0.35rem 0.75rem; border-radius: 99px;
  background: rgb(5 7 12 / 0.7); color: var(--text);
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.cfg__noscript { position: absolute; inset: auto 1rem 1rem; color: var(--muted); font-size: var(--fs-sm); }

.cfg__panel { padding: clamp(1.35rem, 1rem + 1.9vw, 2.25rem); display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 820px) {
  .cfg__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .cfg__panel > .cfg__bundle, .cfg__panel > .cfg__sum { grid-column: 1 / -1; }
}
.cfg__group { display: grid; gap: 0.55rem; }
.cfg__label { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cfg__hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.cfg select {
  width: 100%; padding: 0.8rem 1rem; font: inherit; font-size: var(--fs-base);
  background: var(--ink-800); color: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cfg select:focus { outline: none; border-color: var(--accent); background: var(--ink-750); }

.cfg__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cfg__swatch {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 42px;
  padding: 0.5rem 0.9rem; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  background: var(--ink-800); color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cfg__swatch:hover { color: var(--paper); border-color: #333d51; }
.cfg__swatch[aria-pressed='true'] { color: var(--paper); border-color: var(--accent); background: var(--ink-750); }
.cfg__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dot); flex: none; box-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
.cfg__dot[data-rgb] {
  /* dieselben Farben, die der Konfigurator durchläuft */
  background: conic-gradient(#2e6bff, #9b3bff, #ff2fa8, #ff4a60, #39ff6a, #17e3d0, #2e6bff);
}
.cfg__plus { color: var(--accent); font-weight: 700; font-size: var(--fs-xs); }

.cfg__switch, .cfg__bundle {
  /* Der Input liegt absolut und unsichtbar darin – ohne diesen Bezugspunkt
     würde er samt Fokusring irgendwo weiter oben im Dokument landen. */
  position: relative;
  display: flex; align-items: flex-start; gap: 0.9rem; cursor: pointer;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ink-800);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cfg__switch:hover, .cfg__bundle:hover { border-color: #333d51; }
.cfg__switch input, .cfg__bundle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg__switch-txt, .cfg__bundle-txt { display: grid; gap: 0.2rem; }
.cfg__switch-txt strong, .cfg__bundle-txt strong { color: var(--paper); font-weight: 650; font-size: var(--fs-sm); }
.cfg__switch-txt span, .cfg__bundle-txt span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.cfg__switch-price { margin-left: auto; color: var(--accent); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }

.cfg__switch-ui {
  position: relative; flex: none; width: 40px; height: 23px; margin-top: 0.1rem;
  background: var(--ink-600); border-radius: 99px; transition: background-color 0.25s var(--ease);
}
.cfg__switch-ui::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  background: var(--paper); border-radius: 50%; transition: transform 0.25s var(--ease);
}
.cfg__switch input:checked ~ .cfg__switch-ui { background: var(--accent); }
.cfg__switch input:checked ~ .cfg__switch-ui::after { transform: translateX(17px); }
.cfg__switch input:focus-visible ~ .cfg__switch-ui,
.cfg__bundle input:focus-visible ~ .cfg__bundle-box { outline: 2px solid var(--accent-hot); outline-offset: 3px; }

.cfg__bundle[data-on='true'], .pick[data-on='true'] { border-color: var(--accent); background: var(--ink-750); }
.cfg__bundle-box, .pick__box {
  flex: none; width: 22px; height: 22px; margin-top: 0.1rem; display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--ink-900);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cfg__bundle-box .ico, .pick__box .ico { width: 14px; height: 14px; stroke-width: 3; color: var(--on-accent); opacity: 0; transition: opacity 0.15s var(--ease); }
.cfg__bundle input:checked ~ .cfg__bundle-box, .pick input:checked ~ .pick__box { background: var(--accent); border-color: var(--accent); }
.cfg__bundle input:checked ~ .cfg__bundle-box .ico, .pick input:checked ~ .pick__box .ico { opacity: 1; }

.cfg__sum { border-top: 1px solid var(--line-soft); padding-top: 1.35rem; display: grid; gap: 1.1rem; }
.cfg__lines { margin: 0; display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.cfg__lines > div { display: flex; align-items: baseline; gap: 1rem; }
.cfg__lines dt { color: var(--muted); }
.cfg__lines dd { margin: 0 0 0 auto; color: var(--text); font-variant-numeric: tabular-nums; }
.cfg__lines s { color: var(--faint); margin-right: 0.35rem; }
.cfg__line-save dd { color: #7ee0a4; font-weight: 700; }
.cfg__total { display: grid; gap: 0.15rem; }
.cfg__total-lbl { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cfg__total strong {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 800; color: var(--paper);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cfg__total-sub { font-size: var(--fs-sm); color: var(--muted); }
.cfg__note { margin: 0; font-size: var(--fs-xs); color: var(--faint); line-height: 1.6; }

/* --- Auswahlkarten -------------------------------------------------------- */
.picker { padding: 0; border: 0; background: transparent; }
.picker__grid { display: grid; gap: 0.7rem; }
@media (min-width: 620px) { .picker__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .picker__grid { grid-template-columns: repeat(4, 1fr); } }
.pick {
  position: relative;
  display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer;
  padding: 1.1rem 1.15rem; background: var(--ink-850);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.pick:hover { border-color: #333d51; transform: translateY(-1px); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick input:focus-visible ~ .pick__box { outline: 2px solid var(--accent-hot); outline-offset: 3px; }
.pick__txt { display: grid; gap: 0.2rem; }
.pick__txt strong { color: var(--paper); font-weight: 650; font-size: var(--fs-sm); line-height: 1.35; }
.pick__txt span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }

.picker__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--line-soft);
}
.picker__count { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.picker__count strong { color: var(--paper); }
.picker__bar .btn-row { margin-left: auto; }

/* --- Bühne des Sternenhimmel-Konfigurators --------------------------------
   Foto eines fertigen Einbaus, aus dem die Fasern herausgerechnet wurden; die
   Leinwand darüber trägt den konfigurierten Himmel. Beide liegen deckungs-
   gleich, das Bild füllt die Fläche über object-fit: cover – die Leinwand
   rechnet denselben Ausschnitt nach. */
.room { position: absolute; inset: 0; overflow: hidden; }
.room picture, .room img { display: block; width: 100%; height: 100%; object-fit: cover; }
.room__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.cfg__stage { isolation: isolate; }

/* --- Richtwert-Tafel unter dem Konfigurator -------------------------------- */
.cfg__guide {
  grid-column: 1 / -1;
  padding: clamp(1.35rem, 1rem + 1.9vw, 2.25rem);
  border-top: 1px solid var(--line);
  display: grid; gap: 1rem;
}
.cfg__guide h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; }
.cfg__guide .tbl { min-width: 30rem; }

/* --- Ambientebeleuchtung: Pakete ------------------------------------------ */
.amb__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 599px) {
  .amb__tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .amb__tab:nth-child(3):last-child { grid-column: 1 / -1; }
}
.amb__tab {
  position: relative;
  flex: 1 1 8rem; display: grid; gap: 0.15rem; justify-items: start;
  padding: 0.75rem 2.1rem 0.75rem 0.9rem; cursor: pointer; font: inherit; text-align: left;
  background: var(--ink-800); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.amb__tab:hover { color: var(--paper); border-color: #333d51; }
.amb__tab[aria-pressed='true'] { color: var(--paper); border-color: var(--accent); background: var(--ink-750); }
.amb__tab-mark {
  position: absolute; top: 0.7rem; right: 0.7rem;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.amb__tab-mark .ico { width: 11px; height: 11px; stroke-width: 3.2; color: var(--on-accent); }
.amb__tab[aria-pressed='true'] .amb__tab-mark { opacity: 1; transform: none; }
.amb__tab-name { font-size: var(--fs-sm); font-weight: 650; }
.amb__tab-price { font-size: var(--fs-xs); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.amb__tab[data-avail="unklar"] .amb__tab-name::after { content: " ?"; color: var(--faint); }
.amb__summary { margin: 0.9rem 0 0.8rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.amb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.amb__list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text); font-size: var(--fs-sm); line-height: 1.5; }
.amb__list .ico { width: 1em; height: 1em; flex: none; margin-top: 0.3em; color: var(--accent); stroke-width: 2.6; }
.amb__ctrl { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .amb__ctrl { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.amb__ctrl strong { display: block; color: var(--paper); font-weight: 650; font-size: var(--fs-sm); margin-bottom: 0.3rem; }
.amb__ctrl p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }

/* --- Ambiente-Bühne: echtes Cockpit, Licht getrennt ----------------------
   Unten liegt das Foto mit ausgeschaltetem Licht, darüber dieselbe Fläche
   eingefärbt und über die Lichtmaske beschnitten. Dadurch leuchtet ein echter
   Innenraum in jeder Farbe, ohne dass er sechsmal fotografiert werden muss.
   Ohne Masken-Unterstützung bleibt nur das Foto stehen – immer noch ein
   erkennbares Cockpit. */
.cockpit { position: absolute; inset: 0; --amb: #5ac8ff; }
.cockpit picture, .cockpit img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 34%;
}
.cockpit__light {
  position: absolute; inset: 0; display: none;
  background: var(--amb);
  mix-blend-mode: screen;
  transition: background-color 0.4s var(--ease);
}
@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .cockpit__light {
    display: block;
    -webkit-mask-image: url('/assets/img/ambiente-cockpit-licht.webp');
    mask-image: url('/assets/img/ambiente-cockpit-licht.webp');
    -webkit-mask-size: cover; mask-size: cover;
    -webkit-mask-position: center 34%; mask-position: center 34%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}
/* Auf schmalen Geräten wird nichts beschnitten: das ganze Cockpit steht im
   Bild, der Rest der Fläche bleibt dunkel. Maske und Foto müssen dabei
   denselben Ausschnitt nehmen. */
@media (max-width: 599px) {
  .cockpit picture, .cockpit img { object-fit: contain; object-position: center; }
  .cockpit__light {
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
  }
}


/* --- Zonenplan: das Fahrzeug von oben -------------------------------------
   Das Foto zeigt nur den vorderen Innenraum. Welche Zonen im Paket stecken,
   ist hier zu sehen – unmissverständlich, weil jeder ein Auto von oben
   erkennt. */
.plan {
  --amb: #5ac8ff;
  padding: clamp(1.35rem, 1rem + 1.9vw, 2.25rem);
  border-top: 1px solid var(--line);
  display: grid; gap: 1.1rem; align-content: start;
}
.plan__head { font-size: var(--fs-lg); letter-spacing: -0.015em; }
.plan__stage { justify-self: center; width: min(100%, 14rem); }
.plan svg { display: block; width: 100%; height: auto; }
.plan__zone { opacity: 0; transition: opacity 0.45s var(--ease); }
.plan__lamp { fill: none; stroke: var(--amb); stroke-width: 5; stroke-linecap: round; }
.plan__lamp--blur { stroke-width: 13; opacity: 0.45; }
/* Die Dachleisten laufen dicht neben den Türleisten – dünner gezeichnet
   bleiben sie als eigene Zone erkennbar statt zu einem Rahmen zu verschmelzen. */
.plan__lamp--roof { stroke-width: 3.5; }
.plan__lamp--roof.plan__lamp--blur { stroke-width: 9; opacity: 0.32; }
.plan__wash { fill: var(--amb); opacity: 0.8; }
.plan[data-zones~='tuer']      .plan__zone[data-zone='tuer'],
.plan[data-zones~='armaturen'] .plan__zone[data-zone='armaturen'],
.plan[data-zones~='fussraum']  .plan__zone[data-zone='fussraum'],
.plan[data-zones~='tasche']    .plan__zone[data-zone='tasche'],
.plan[data-zones~='fond']      .plan__zone[data-zone='fond'],
.plan[data-zones~='dach']      .plan__zone[data-zone='dach'] { opacity: 1; }

.plan__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plan__key {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: var(--fs-sm); line-height: 1.4;
  color: var(--faint); transition: color 0.3s var(--ease);
}
.plan__chip {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--line); box-shadow: none;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.plan[data-zones~='tuer']      .plan__key[data-zone='tuer'],
.plan[data-zones~='armaturen'] .plan__key[data-zone='armaturen'],
.plan[data-zones~='fussraum']  .plan__key[data-zone='fussraum'],
.plan[data-zones~='tasche']    .plan__key[data-zone='tasche'],
.plan[data-zones~='fond']      .plan__key[data-zone='fond'],
.plan[data-zones~='dach']      .plan__key[data-zone='dach'] { color: var(--text); }
.plan[data-zones~='tuer']      .plan__key[data-zone='tuer'] .plan__chip,
.plan[data-zones~='armaturen'] .plan__key[data-zone='armaturen'] .plan__chip,
.plan[data-zones~='fussraum']  .plan__key[data-zone='fussraum'] .plan__chip,
.plan[data-zones~='tasche']    .plan__key[data-zone='tasche'] .plan__chip,
.plan[data-zones~='fond']      .plan__key[data-zone='fond'] .plan__chip,
.plan[data-zones~='dach']      .plan__key[data-zone='dach'] .plan__chip {
  background: var(--amb); box-shadow: 0 0 10px var(--amb);
}

/* Farbwechsel: dieselbe Neonpalette wie beim Sternenhimmel. */
@keyframes amb-cycle {
  0%   { --amb: #2e6bff; }
  17%  { --amb: #9b3bff; }
  34%  { --amb: #ff2fa8; }
  50%  { --amb: #ff4a60; }
  67%  { --amb: #39ff6a; }
  84%  { --amb: #17e3d0; }
  100% { --amb: #2e6bff; }
}
@property --amb { syntax: '<color>'; inherits: true; initial-value: #5ac8ff; }
.cockpit[data-rgb='true'], .plan[data-rgb='true'] { animation: amb-cycle 7.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .cockpit[data-rgb='true'], .plan[data-rgb='true'] { animation: none; }
  .plan__zone, .plan__key, .plan__chip, .cockpit__light { transition: none; }
}


/* --- Ein Element, drei Schritte -------------------------------------------
   Paket, Farbe, Fahrzeug – danach steht der Preis und der Knopf. Die Nummern
   machen aus der Liste einen Weg, an dessen Ende die Anfrage steht. */
.cfg__step { position: relative; padding-left: 2.6rem; }
.cfg__step::before {
  content: attr(data-step);
  position: absolute; left: 0; top: -0.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-750); border: 1px solid var(--line);
  color: var(--faint); font-size: var(--fs-xs); font-weight: 750;
  font-variant-numeric: tabular-nums;
}
/* Bündel und Summe stehen zwischen den Schritten – gleiche Einrückung, damit
   die linke Kante der Spalte nicht springt. */
.amb > .cfg__panel > .cfg__bundle, .amb > .cfg__panel > .cfg__sum { margin-left: 2.6rem; }
@media (max-width: 599px) {
  .cfg__step { padding-left: 2.3rem; }
  .amb > .cfg__panel > .cfg__bundle, .amb > .cfg__panel > .cfg__sum { margin-left: 2.3rem; }
}

/* Marke und Modell nebeneinander, solange Platz ist. */
.amb__car { display: grid; gap: 0.7rem; }
@media (min-width: 520px) { .amb__car { grid-template-columns: 1fr 1fr; } }
.amb__car select:disabled { opacity: 0.45; cursor: not-allowed; }

/* Ergebnis der Fahrzeugwahl: beide Fälle sind ein Ja, nur die Bedienung
   unterscheidet sich – deshalb kein Rot, nur ein anderer Akzent. */
.amb__verdict {
  padding: 0.85rem 1rem; border-radius: var(--radius-sm);
  background: var(--ink-800); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.amb__verdict .cfg__hint { margin: 0; }
.amb__verdict[data-tone='code'] { border-left-color: #7ee0a4; }
.amb__verdict[data-tone='ext'] { border-left-color: var(--steel); }
.amb__verdict-line {
  display: flex; align-items: flex-start; gap: 0.65rem; margin: 0;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); max-width: none;
}
.amb__verdict-line strong { color: var(--paper); }
.amb__verdict-line .ico { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.2em; stroke-width: 2.4; }
.amb__verdict[data-tone='code'] .amb__verdict-line .ico { color: #7ee0a4; }
.amb__verdict[data-tone='ext'] .amb__verdict-line .ico { color: var(--steel); }

.amb__free { border-top: 1px solid var(--line-soft); }
.amb__free summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  padding: 0.8rem 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600;
}
.amb__free summary::-webkit-details-marker { display: none; }
.amb__free summary .ico { width: 0.95em; height: 0.95em; transition: transform 0.3s var(--ease); }
.amb__free[open] summary .ico { transform: rotate(45deg); }
.amb__free-body { padding-bottom: 0.9rem; display: grid; gap: 0.7rem; }
.amb__free-body p { margin: 0; color: var(--faint); font-size: var(--fs-xs); }

/* Der Weg, der beim gewählten Fahrzeug offensteht, wird unten markiert. */
.amb__way { transition: opacity 0.3s var(--ease); }
.amb__way-tag { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); margin-left: 0.5rem; white-space: nowrap; }
#amb-ctrl[data-way='code'] .amb__way[data-way='code'] .amb__way-tag::before,
#amb-ctrl[data-way='ext'] .amb__way[data-way='ext'] .amb__way-tag::before { content: '· bei deinem Fahrzeug'; }
#amb-ctrl[data-way='ext'] .amb__way[data-way='code'] { opacity: 0.55; }

/* Farbpunkt in der Bildunterschrift, damit die Bühne die Wahl bestätigt. */
.cfg__caption { display: inline-flex; align-items: center; gap: 0.45rem; }
.cfg__caption-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--amb, var(--star)); box-shadow: 0 0 8px var(--amb, var(--star));
}

/* --- Hinweis im Checker: CarPlay gab es hier schon ab Werk ----------------- */
.chk__oem {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin: 1rem 0 0; padding: 0.9rem 1rem;
  background: var(--ink-800); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; max-width: none;
}
.chk__oem .ico { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.25em; color: var(--accent); }
.chk__oem strong { color: var(--paper); }

/* ==========================================================================
   Intro der Startseite
   Das Auto fährt von links herein, der Schriftzug schreibt sich daneben –
   Buchstabe für Buchstabe, von links nach rechts. Reines CSS: läuft auch ohne
   JavaScript, räumt sich selbst wieder weg und lässt sich nicht wegklicken,
   weil es nach knapp zwei Sekunden ohnehin weg ist.
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; pointer-events: none;
  padding: var(--pad-x);
  background:
    radial-gradient(120% 90% at 22% 42%, rgb(15 42 60 / 0.55), transparent 62%),
    var(--ink-900);
  animation: intro-out 0.55s var(--ease) 1.45s both;
}
.intro__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(0.9rem, 0.4rem + 2vw, 2.25rem);
  width: min(100%, 60rem);
}
.intro__car {
  grid-row: 1 / span 2;
  width: clamp(7rem, 26vw, 19rem); height: auto;
  filter: drop-shadow(0 12px 30px rgb(0 0 0 / 0.6));
  animation: intro-car 0.62s cubic-bezier(0.2, 1.25, 0.4, 1) both;
}
.intro__word {
  margin: 0; display: flex; flex-wrap: nowrap; white-space: nowrap;
  /* Kleinerer Sockel und flacherer vw-Anteil als im ersten Wurf: die Zeile
     muss auf jedem Gerät stehen bleiben, nicht nur auf den getesteten. */
  font-size: clamp(1.15rem, 0.35rem + 5vw, 4rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--paper);
}
/* Unter 640px verliert die zweispaltige Anordnung (Auto | Text) zu viel
   Breite an die Autospalte – der Name bekäme weniger als die halbe Fläche.
   Gestapelt bekommt er die volle Breite und bleibt so garantiert einzeilig. */
@media (max-width: 640px) {
  .intro__in { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 0.5rem; }
  .intro__car { grid-row: auto; width: clamp(5rem, 30vw, 8.5rem); }
  .intro__word { justify-content: center; }
}
.intro__word span {
  display: inline-block;
  animation: intro-letter 0.34s var(--ease) both;
  animation-delay: calc(0.22s + var(--i) * 0.042s);
}
.intro__sub {
  margin: 0.55rem 0 0;
  font-size: var(--fs-sm); font-weight: 650;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  animation: intro-sub 0.4s var(--ease) 0.92s both;
}
@keyframes intro-car {
  from { opacity: 0; transform: translateX(-34%) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-letter {
  from { opacity: 0; transform: translate3d(-0.45em, 0.28em, 0) rotate(-7deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes intro-sub {
  from { opacity: 0; transform: translateX(-0.8rem); letter-spacing: 0.34em; }
  to   { opacity: 1; transform: none; letter-spacing: 0.18em; }
}
@keyframes intro-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}
/* Wer weniger Bewegung verlangt, bekommt sie gar nicht erst zu sehen. */
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }