/* Leitstand 08:14 × Burgund & Gold. Component layer; every value comes from tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--surface-base); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-variant-numeric: tabular-nums; hyphens: auto; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
main, .site-footer { overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-heading); margin: 0; hyphens: manual; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--type-headline-lg-weight); letter-spacing: var(--type-headline-lg-tracking); }
h3 { font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); font-weight: var(--type-headline-md-weight); letter-spacing: var(--type-headline-md-tracking); }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--primary-container); outline-offset: 3px; border-radius: var(--radius-sm); }
.panel :focus-visible:not(.audit-card *), .site-footer :focus-visible { outline-color: var(--accent-gold-bright); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 24px; height: 24px; flex: none; display: block; }
.mono { font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line); font-weight: var(--type-mono-weight); }
.lead { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.skip { position: absolute; left: var(--space-sm); top: -80px; z-index: 100; background: var(--primary-container); color: var(--on-primary-container); padding: 12px var(--space-sm); border-radius: var(--radius); }
.skip:focus { top: var(--space-xs); }

/* Key visual 3: label with connecting line */
.lbl {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-sm);
  font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line);
  font-weight: var(--type-label-uppercase-weight); letter-spacing: var(--type-label-uppercase-tracking);
  text-transform: uppercase; color: var(--tertiary);
}
.lbl .icon { width: 20px; height: 20px; }
.lbl--conn { position: relative; }
.lbl--conn::before {
  content: ""; position: absolute; left: 9.5px; bottom: calc(100% - 1px); width: 1px;
  height: var(--conn-h, calc(var(--sec-gap) + 1px)); background: var(--accent-gold-pdf);
}
.lbl--dark { color: var(--accent-gold-bright); }
.lbl--plain { display: block; margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--type-mono-size); }
.lbl--champ { color: var(--on-tertiary-fixed-variant); }

/* Placeholders stay visible */
.ph { font-family: var(--font-label); border-bottom: 1px dashed currentColor; }
.ph--lg { font-size: var(--type-headline-sm-size); font-weight: 600; color: var(--text-heading); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px var(--space-md);
  background: var(--secondary-container); color: var(--on-secondary); border: 0; border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--type-button-size); line-height: var(--type-button-line); font-weight: var(--type-button-weight);
  text-decoration: none; cursor: pointer; transition: background var(--ease), transform var(--ease);
}
.btn:hover { background: var(--secondary); }
.btn .icon { width: 20px; height: 20px; transition: transform var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--sm { min-height: 48px; padding: 10px 18px; }
.btn--full { width: 100%; }
.btn--dark { background: var(--accent-gold-bright); color: var(--anchor-deep); }
.btn--dark:hover { background: var(--tertiary-fixed-dim); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 28px; padding: 4px 12px;
  border-radius: var(--radius-full); font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line); font-weight: 500; hyphens: manual;
}
.pt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; box-shadow: var(--glow-point); }
.chip--tag { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed-variant); }
.chip--warn { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed-variant); }
.chip--err { background: var(--error-container); color: var(--on-error-container); }
.chip--ask { background: var(--secondary-fixed); color: var(--on-secondary-fixed-variant); }
.chip--ok { background: var(--anchor-deep); color: var(--inverse-on-surface); }
.chip--ok .pt { color: var(--accent-gold-bright); }
.chip--dark { color: var(--inverse-on-surface); box-shadow: inset 0 0 0 1px var(--accent-gold-bright); border-radius: var(--radius-lg); padding: 8px 14px; align-items: flex-start; }
.chip--dark .pt { color: var(--accent-gold-bright); margin-top: 4px; }

/* ---------- Icon container ---------- */
.ic {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm);
  background: var(--tint-rose); color: var(--primary);
}
.num {
  font-family: var(--font-label); font-size: var(--type-numeral-sm-size); line-height: var(--type-numeral-sm-line);
  letter-spacing: var(--type-numeral-sm-tracking); font-weight: var(--type-numeral-sm-weight); color: var(--accent-gold-pdf);
  transition: color var(--ease);
}
.kick {
  display: block; margin-bottom: 4px; font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line);
  font-weight: 500; letter-spacing: 0; color: var(--tertiary);
}

/* ---------- Modules ---------- */
.mod {
  background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card); padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

/* ---------- Sections ---------- */
:root { --sec-gap: var(--space-section-gap); }
.sec { padding-block: var(--sec-gap); }
.sec--rose { background: var(--surface-base); } /* früher tint-rose, auf Wunsch weiß */
/* sec--champ entfaellt: Champagner (#f4ecd8) wird nicht mehr als Abschnittsfarbe verwendet. */
/* Panel-Abschnitte standen bündig am vorherigen Abschnitt. Mit dem Wechsel der
   Abschnittsfarben brauchen sie denselben Abstand wie alle anderen. */
.sec--panel { padding-top: var(--sec-gap); }
/* align-items: start statt end: sonst rutscht der Überschriften-Block nach unten, wenn der
   Lead-Text höher ist, und die Verbindungslinie am Label erreicht die Abschnittskante nicht. */
.sec-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-md) var(--space-xl); align-items: start; margin-bottom: var(--space-lg); }
.sec-head > * { min-width: 0; }

/* Key visual 2: instrument panel */
.panel {
  background-color: var(--anchor-deep);
  background-image: radial-gradient(rgba(217,185,110,0.09) 1px, transparent 1.5px);
  background-size: 28px 28px;
  border-radius: var(--radius-xl); box-shadow: var(--panel-edge), var(--shadow-panel);
  color: var(--surface-dim);
}
.panel h1, .panel h2, .panel h3:not(.audit-card *) { color: var(--inverse-on-surface); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-base); border-bottom: 1px solid var(--line-greige); }
.header-row { display: flex; align-items: center; gap: var(--space-md); min-height: 72px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--text-heading); text-decoration: none;
  font-weight: 700; font-size: var(--type-headline-md-size); letter-spacing: -0.015em; line-height: 1; min-height: 48px; margin-right: auto;
}
.brand .icon { color: var(--primary); width: 26px; height: 26px; }
.brand--dark { color: var(--inverse-on-surface); }
.brand--dark .icon { color: var(--accent-gold-bright); }
.nav { display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--text-heading); font-weight: 500; text-decoration: none; border-radius: var(--radius); transition: color var(--ease), background var(--ease); }
.nav a:hover { color: var(--primary); background: var(--tint-rose); }
.burger {
  display: none; width: 48px; height: 48px; place-items: center; padding: 0; background: var(--surface-base); color: var(--text-heading);
  border: 1px solid var(--line-greige); border-radius: var(--radius); cursor: pointer;
}
.burger-close { display: none; }
.burger[aria-expanded="true"] .burger-close { display: block; }
.burger[aria-expanded="true"] .burger-open { display: none; }
.mnav {
  position: fixed; inset: 0; z-index: 40; background: var(--surface-base); padding: 96px var(--space-margin-mobile) var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-md); overflow-y: auto;
}
.mnav nav { display: grid; }
.mnav nav a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line-greige); color: var(--text-heading); font-size: var(--type-headline-md-size); font-weight: 600; text-decoration: none; }

/* ---------- 2 Hero ---------- */
.hero { padding: var(--space-sm) var(--space-sm) 0; }
.hero-panel { max-width: calc(var(--container-max) + 2 * var(--space-xl)); margin-inline: auto; overflow: hidden; display: flex; flex-direction: column; }
.hero-wall { order: -1; position: relative; }
.hero-map { height: clamp(320px, 42vh, 420px); }
.nm { display: block; width: 100%; height: 100%; }
.nm-line { fill: none; stroke: var(--accent-gold-bright); stroke-width: 1; stroke-opacity: .34; vector-effect: non-scaling-stroke; }
.nm-pulse { fill: none; stroke: var(--accent-gold-bright); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2.5 97.5; stroke-dashoffset: 100; animation: pulse var(--dur-pulse) linear infinite; animation-delay: var(--d, 0s); }
@keyframes pulse { to { stroke-dashoffset: 0; } }
.nm-node { fill: var(--anchor-deep); stroke: var(--accent-gold-bright); stroke-width: 1.5; }
.nm-node--in { fill: var(--accent-gold-bright); }
.nm-hub { fill: var(--inverse-surface); stroke: var(--accent-gold-bright); stroke-width: 1.5; }
.nm-ring { fill: none; stroke: var(--accent-gold-bright); stroke-opacity: .4; }
.nm-halo { fill: none; stroke: var(--accent-gold-bright); stroke-opacity: .2; stroke-dasharray: 3 6; }
.nm-word { fill: var(--inverse-on-surface); font-family: var(--font-body); font-weight: 600; }
.hero-console {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-md) var(--space-xl); align-items: end;
  padding: var(--space-lg); border-top: 1px solid var(--panel-line);
}
.hero-console > * { min-width: 0; }
.hero-over { color: var(--accent-gold-bright); margin-bottom: var(--space-sm); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--type-display-lg-weight); letter-spacing: var(--type-display-lg-tracking); }
h1 span { display: block; }
h1 span:nth-child(3) { color: var(--accent-gold-bright); }
.hero-side { display: grid; gap: var(--space-sm); justify-items: start; }
.hero-side .lead { font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--inverse-on-surface); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 6px var(--space-sm); color: var(--inverse-on-surface); }
.hero-notes li { display: inline-flex; align-items: center; gap: 8px; }
.hero-notes li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold-bright); box-shadow: var(--glow-point); }

/* ---------- 3 Für wen ---------- */
.aud { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--space-lg); position: relative; }
.aud li { position: relative; padding: var(--space-md) var(--space-md) 0 0; border-top: 1px solid var(--accent-gold-pdf); min-width: 0; }
.aud li::before { content: ""; position: absolute; top: -7px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-base); border: 1.5px solid var(--tertiary); }
.aud li:last-child { padding-right: 0; }
.aud h3 { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); margin: var(--space-sm) 0 var(--space-xs); }

/* ---------- 4 Das Muster ---------- */
.pat-head { max-width: 860px; }
.pat-head .lead { margin-top: var(--space-sm); max-width: var(--space-container-narrow); }
.pat { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); align-items: start; margin-top: var(--space-lg); padding-top: var(--space-md); }
.pat li {
  position: relative; background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card); padding: var(--space-md); box-shadow: var(--shadow-card); min-width: 0;
}
.pat li:nth-child(2) { margin-top: var(--space-lg); }
.pat li:nth-child(3) { margin-top: var(--space-sm); }
.pat li:nth-child(4) { margin-top: var(--space-xl); border-color: var(--accent-gold-pdf); }
/* Dashed stub with a loose node: these locations are not connected yet. */
.pat li::before { content: ""; position: absolute; left: var(--space-md); bottom: 100%; height: 22px; border-left: 1px dashed var(--outline); }
.pat li::after { content: ""; position: absolute; left: calc(var(--space-md) - 5px); bottom: calc(100% + 22px); width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--surface-base); }
.pat p { color: var(--text-heading); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 500; }
.pat-key {
  margin-top: var(--space-xl); padding-left: var(--space-md); border-left: 3px solid var(--primary); max-width: 1020px;
  font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: var(--type-headline-lg-tracking); color: var(--text-heading); hyphens: manual; text-wrap: pretty;
}

/* ---------- 5 Symptome ---------- */
.ledger { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-greige); border: 1px solid var(--line-greige); border-radius: var(--radius-card); overflow: hidden; }
.ledger article { background: var(--surface-base); padding: var(--space-lg); min-width: 0; }
.ledger h3 { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.ledger article:hover .num { color: var(--primary); }

/* ---------- 6 Rechner ---------- */
.calc { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); padding: var(--space-xl); align-items: stretch; }
.calc > * { min-width: 0; }
.calc .lead { margin: var(--space-sm) 0 var(--space-lg); color: var(--inverse-on-surface); }
.ctrl { background: var(--inverse-surface); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); margin-top: var(--space-sm); }
.ctrl label { display: block; font-weight: 500; color: var(--inverse-on-surface); margin-bottom: var(--space-xs); }
.ctrl-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: var(--space-xs); }
.ctrl-row input {
  width: 100%; min-width: 0; height: 52px; text-align: center; background: var(--anchor-deep); color: var(--inverse-on-surface);
  border: 1.5px solid var(--outline); border-radius: var(--radius-input);
  font-family: var(--font-label); font-size: var(--type-headline-md-size); font-weight: 500;
}
.step { width: 48px; height: 52px; display: grid; place-items: center; padding: 0; background: var(--anchor-deep); color: var(--accent-gold-bright); border: 1px solid var(--panel-line); border-radius: var(--radius); cursor: pointer; transition: background var(--ease); }
.step:hover { background: var(--secondary); }
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: var(--space-xs) 0 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--accent-gold-pdf); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--accent-gold-pdf); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--accent-gold-bright); border: 0; box-shadow: var(--glow-point); }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-gold-bright); border: 0; box-shadow: var(--glow-point); }
.calc-out { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); align-items: flex-start; }
.calc-fit { width: 100%; container-type: inline-size; --chars: 9; }
.big {
  display: block; white-space: nowrap; color: var(--accent-gold-bright); font-family: var(--font-label); font-weight: var(--type-numeral-weight);
  letter-spacing: var(--type-numeral-tracking); line-height: 1.1;
  font-size: min(var(--type-numeral-size), calc(100cqi / (var(--chars) * 0.6)));
}
.raster { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-height: 112px; overflow: hidden; }
.raster i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold-bright); opacity: .75; }
.calc-say { color: var(--inverse-on-surface); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); max-width: 620px; }

/* ---------- 7 System ---------- */
.sys-head { max-width: 960px; }
.sys-head .lead { margin-top: var(--space-sm); color: var(--text-heading); }
.dash { margin-top: var(--space-lg); }
.dash-card { background: var(--surface-base); border-radius: var(--radius-xl); box-shadow: var(--shadow-hover); overflow: hidden; }
.dash-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--line-greige); }
.dash-time { font-family: var(--font-label); font-size: var(--fs-h1); line-height: 1; font-weight: 500; letter-spacing: var(--type-numeral-tracking); color: var(--text-heading); }
.dash-time span { font-size: var(--type-headline-sm-size); letter-spacing: 0; color: var(--on-surface-variant); }
.dash-body { display: grid; grid-template-columns: 5fr 7fr; }
.dash-body > * { min-width: 0; }
.dash-map { position: relative; background: var(--tint-rose); padding: var(--space-sm); }
.dash-map svg { display: block; width: 100%; height: auto; }
.dash-map span { position: absolute; font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line); font-weight: 500; color: var(--text-heading); hyphens: manual; }
.dm-lines path { stroke: var(--line-greige); stroke-width: 1.5; }
.dm-nodes circle { fill: var(--surface-base); stroke: var(--tertiary); stroke-width: 1.5; }
.dm-ring { stroke: var(--accent-gold-pdf); stroke-dasharray: 3 5; }
.dm-hub { fill: var(--anchor-deep); }
.dash-list { display: grid; grid-auto-rows: 1fr; padding: var(--space-xs) var(--space-lg); }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); flex-wrap: wrap; min-height: 76px; padding-block: 10px; border-bottom: 1px solid var(--line-greige); }
.dash-list li:last-child { border-bottom: 0; }
.dash-city { color: var(--text-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); font-weight: 600; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.pillars li { position: relative; background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card); padding: var(--space-md); box-shadow: var(--shadow-card); min-width: 0; }
.pillars h3 { margin: var(--space-sm) 0 var(--space-xs); }

/* ---------- 8 Bausteine ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.bento > * { min-width: 0; }
.bento h3 { margin: var(--space-sm) 0 var(--space-xs); }

/* ---------- 9 Erwartungen ---------- */
.exp { display: grid; grid-template-columns: 8fr 4fr; gap: var(--space-lg); align-items: start; }
.exp > * { min-width: 0; }
.exp-table { padding: var(--space-md) var(--space-lg) var(--space-sm); }
.exp-table .chip { border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
th, td { text-align: left; padding: 18px var(--space-sm) 18px 0; border-bottom: 1px solid var(--line-greige); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th { font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line); font-weight: 500; color: var(--tertiary); padding-block: 10px; }
tbody th { color: var(--text-heading); font-weight: 600; }
tbody td { font-family: var(--font-label); font-size: var(--type-mono-size); font-weight: 500; }
tbody td:last-child { color: var(--primary); font-weight: 600; }
.exp-not h3 { margin-bottom: var(--space-sm); }
.exp-not li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-block: var(--space-sm); border-top: 1px solid var(--line-greige); }
.exp-not .icon { color: var(--primary); margin-top: 1px; }
.exp-not strong { color: var(--text-heading); }

/* ---------- 10 Vorgehen ---------- */
.stairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: start; margin-top: var(--space-xl); }
.stairs li { position: relative; min-width: 0; transition: box-shadow var(--ease), transform var(--ease); }
.stairs li:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.stairs li:nth-child(2) { margin-top: 64px; }
.stairs li:nth-child(3) { margin-top: 128px; }
/* elbow from one phase down into the next */
.stairs li:not(:last-child)::after {
  content: ""; position: absolute; top: 40px; left: 100%; width: var(--space-md); height: 64px;
  border-top: 1px solid var(--accent-gold-pdf); border-right: 1px solid var(--accent-gold-pdf); border-top-right-radius: var(--radius);
}
.stairs h3 { margin: var(--space-sm) 0 var(--space-xs); }
.dur { display: block; font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line); font-weight: 500; letter-spacing: 0; color: var(--on-surface-variant); margin-top: 4px; }

/* ---------- 11 Gründer ---------- */
.found { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; }
.found > * { min-width: 0; }
/* Key visual 8: image frame */
.frame { background: var(--surface-base); border-radius: var(--radius-card); padding: var(--space-xs); box-shadow: var(--shadow-card); }
.frame img { border-radius: var(--radius-md); width: 100%; }
.frame figcaption { padding: 10px 6px 4px; color: var(--on-surface-variant); }
.found-text p:not(.lbl) { color: var(--text-heading); margin-top: var(--space-sm); }
.found-text h2 { margin-bottom: var(--space-md); }
.found-text p.found-note { color: var(--on-tertiary-fixed-variant); margin-top: var(--space-md); }
.found-side { width: min(420px, 62%); margin: var(--space-md) 0 0 calc(-1 * var(--space-xl) - 40px); position: relative; }

/* ---------- 12 FAQ ---------- */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-xl); }
.faq > * { min-width: 0; }
.faq-list details { border-bottom: 1px solid var(--line-greige); }
.faq-list details:first-child { border-top: 1px solid var(--line-greige); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); min-height: 72px; padding-block: var(--space-xs);
  cursor: pointer; list-style: none; color: var(--text-heading); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 600; hyphens: manual;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { transition: transform var(--ease); }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details[open] .ic { color: var(--on-primary); background: var(--primary); }
.faq-list details p { padding: 0 60px var(--space-md) 0; }

/* ---------- 13 Audit ---------- */
.audit { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); padding: var(--space-xl); }
.audit > * { min-width: 0; }
.audit-info h3 { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); color: var(--accent-gold-bright); }
.gets { display: grid; gap: 12px; }
.gets li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--inverse-on-surface); }
.gets .icon { color: var(--accent-gold-bright); }
.audit-card { background: var(--surface-base); color: var(--text-body); border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: var(--shadow-card); }
.audit-intro { color: var(--text-heading); margin-bottom: var(--space-md); }
.steps { display: grid; grid-template-columns: 1fr auto; max-width: 180px; margin-bottom: var(--space-sm); }
.steps li { position: relative; height: 14px; }
.steps li:first-child::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--accent-gold-pdf); }
.steps li::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-base); border: 1.5px solid var(--tertiary); }
.steps li:last-child { width: 14px; }
.steps li.on::after { background: var(--tertiary); }
.step-title { font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line); font-weight: 500; color: var(--tertiary); margin-bottom: var(--space-md); }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); }
.field { min-width: 0; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-heading); }
.field input, .field select {
  width: 100%; height: 52px; padding: 0 14px; background-color: var(--surface-base); color: var(--text-heading);
  border: 1.5px solid var(--outline); border-radius: var(--radius-input); font: inherit;
}
.field input:focus, .field select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px var(--secondary-fixed); }
.field [aria-invalid="true"] { border-color: var(--error); }
.err { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line); color: var(--on-error-container); hyphens: manual; }
.err::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--error); }
.err--box { margin-top: var(--space-sm); }
.consent { margin: var(--space-md) 0; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--tertiary); cursor: pointer; }
.form-note { margin-top: 12px; text-align: center; }
#audit-thanks { outline: 0; margin-bottom: var(--space-xs); }
.cal-ph {
  margin-top: var(--space-md); display: grid; justify-items: center; gap: var(--space-xs); text-align: center;
  padding: var(--space-lg) var(--space-md); background: var(--tint-rose); border: 1.5px dashed var(--outline); border-radius: var(--radius-card);
}
.cal-ph .ic { background: var(--surface-base); }

/* ---------- 14 Footer ---------- */
.site-footer { background: var(--inverse-surface); color: var(--inverse-on-surface); padding-block: var(--space-xl) var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: var(--space-lg); }
.footer-grid > * { min-width: 0; }
.site-footer h2.lbl { margin-bottom: var(--space-xs); }
.site-footer a:not(.brand) { color: var(--inverse-on-surface); display: inline-flex; align-items: center; min-height: 48px; }
.footer-base { margin-top: var(--space-md); }
.footer-base p { padding-top: var(--space-sm); border-top: 1px solid var(--panel-line); color: var(--surface-dim); }

/* ---------- Motion: status halo, reduced motion ---------- */
.dash-list .pt { animation: halo var(--dur-glow) ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 7px rgba(217,185,110,0.08); } }
@media (prefers-reduced-motion: reduce) {
  .nm-pulse { display: none; }
  .dash-list .pt { animation: none; }
  .btn, .btn .icon, .stairs li, .num { transition: none; }
  .stairs li:hover { transform: none; }
  .btn:hover .icon { transform: none; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1180px) {
  }
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header-row { gap: var(--space-xs); }
  .audit, .calc { gap: var(--space-lg); padding: var(--space-lg); }
}
@media (max-width: 899px) {
  .sec-head, .hero-console, .calc, .audit, .found, .faq, .exp, .dash-body { grid-template-columns: minmax(0, 1fr); }
  .hero-wall { order: 0; }
  /* Der Abschnittskopf blieb auf dem Handy zweispaltig: die Ueberschrift brach in der 7fr-Spalte
     um, waehrend die 5fr-Spalte nur den Lead-Text trug. Betrifft jeden Abschnitt der Seite. */
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .hero-console { border-top: 0; }
  .hero-wall { border-top: 1px solid var(--panel-line); }
  .aud { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .aud li:nth-child(2n) { padding-right: 0; }
  .pat { grid-template-columns: repeat(2, 1fr); }
  .ledger article { padding: var(--space-md); }
  .bento > .mod { grid-column: span 12; }
    .stairs { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-lg); }
  .stairs li:nth-child(n) { margin-top: 0; }
  .stairs li:not(:last-child)::after { top: 100%; left: 32px; width: 1px; height: var(--space-md); border: 0; border-left: 1px solid var(--accent-gold-pdf); border-radius: 0; }
  .found-side { width: 100%; margin-left: 0; }
  .found-lead { max-width: 520px; }
  .found .lbl--conn::before { display: none; }
          .pillars { grid-template-columns: minmax(0, 1fr); }
  .dash-map { padding: var(--space-xs); }
}
@media (max-width: 767px) {
  :root { --sec-gap: var(--space-section-gap-mobile); }
  .container { padding-inline: var(--space-margin-mobile); }
  html { scroll-padding-top: 84px; }
  .hero { padding: var(--space-xs) var(--space-xs) 0; }
  .hero-console, .audit, .calc { padding: var(--space-md) 20px; }
  .hero-map { height: 280px; }
  .btn { width: 100%; }
  .header-cta { width: auto; }
  .aud { grid-template-columns: minmax(0, 1fr); }
  .aud li { padding-right: 0; }
  .pat { grid-template-columns: minmax(0, 1fr); }
  .pat li:nth-child(n) { margin-top: 0; }
  .pat li + li { margin-top: var(--space-md); }
  .pat { gap: var(--space-lg); }
  .pat li + li { margin-top: 0; }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .dash-bar, .dash-list { padding-inline: 20px; }
  .dash-list li { min-height: 64px; }
    .exp-table { padding: var(--space-md) 20px var(--space-xs); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table, tbody, tr, tbody th, tbody td { display: block; }
  tbody tr { padding-block: var(--space-sm); border-bottom: 1px solid var(--line-greige); }
  tbody tr:last-child { border-bottom: 0; }
  tbody th, tbody td { padding: 0; border: 0; }
  tbody th { margin-bottom: var(--space-xs); }
  tbody td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); padding-block: 2px; text-align: right; }
  tbody td::before { content: attr(data-label); text-align: left; font-weight: 400; color: var(--on-surface-variant); font-size: var(--type-label-uppercase-size); }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .audit-card { padding: var(--space-md) 20px; }
  .faq { gap: var(--space-md); }
  .faq-list details p { padding-right: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .chip { border-radius: var(--radius-lg); }
}

/* ====================================================================
   Positionierung v2: Quiz im Hero, Erklärfilm, Daten, Kontrolle.
   Komponenten nur aus tokens.css; keine festen Farben.
   ==================================================================== */

/* ---------- 2 Hero mit Quiz ---------- */
.hero-console--quiz { grid-template-columns: 6fr 6fr; align-items: start; }
.hero-console--quiz .hero-head .lead { color: var(--inverse-on-surface); margin-top: var(--space-md); max-width: 46ch; }
.hero-console--quiz .hero-side { justify-items: stretch; }
.hero-trust {
  display: flex; align-items: center; gap: 10px; margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--panel-line); color: var(--surface-dim);
}
.hero-trust .icon { color: var(--accent-gold-bright); width: 20px; height: 20px; flex: none; }

/* ---------- Quiz ---------- */
.quiz { width: 100%; display: grid; gap: var(--space-md); }
.quiz-bar { display: flex; align-items: center; gap: var(--space-sm); }
.quiz-bar .step-title { margin: 0; }
.quiz-dots { display: flex; gap: 6px; }
.quiz-dots li { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tertiary); }
.quiz-dots li.on { background: var(--tertiary); }
.quiz-intro { color: var(--text-heading); }
.quiz-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz-q {
  display: block; padding: 0; margin-bottom: var(--space-md); color: var(--text-heading);
  font-family: var(--font-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line);
  font-weight: 600; letter-spacing: var(--type-headline-md-tracking); hyphens: manual; text-wrap: balance;
}
.quiz-opts { display: grid; gap: 10px; }
.quiz-opts--tight { gap: 8px; }
.opt {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; min-height: 52px; padding: 13px var(--space-sm);
  background: var(--surface-base); border: 1.5px solid var(--outline-variant); border-radius: var(--radius-input);
  color: var(--text-heading); cursor: pointer; transition: border-color var(--ease), background var(--ease);
}
.opt:hover { border-color: var(--tertiary); background: var(--surface-container-low); }
.opt input {
  appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--outline); border-radius: 50%;
  background: var(--surface-base); cursor: pointer;
}
.opt input:checked { border-color: var(--primary); border-width: 6px; }
.opt:has(input:checked) { border-color: var(--primary); background: var(--surface-container-low); }
.opt input:focus-visible { outline: 3px solid var(--primary-container); outline-offset: 3px; }
.quiz-extra { margin-top: var(--space-sm); }
.quiz-aside { margin-top: var(--space-sm); }
.quiz-aside a { font-family: var(--font-label); font-size: var(--type-mono-size); }

.quiz-result {
  margin-top: var(--space-md); padding: var(--space-md); background: var(--anchor-deep);
  border-radius: var(--radius-card); display: grid; gap: var(--space-xs);
}
.quiz-result .lbl--plain { color: var(--accent-gold-bright); }
.quiz-sum {
  font-family: var(--font-label); font-size: var(--type-numeral-sm-size); line-height: var(--type-numeral-sm-line);
  letter-spacing: var(--type-numeral-sm-tracking); font-weight: 500; color: var(--inverse-on-surface);
}
.quiz-note { color: var(--surface-dim); }
.quiz-say { color: var(--inverse-on-surface); margin-top: var(--space-xs); }
.quiz-result .btn { margin-top: var(--space-xs); }
.quiz-recap { margin-bottom: var(--space-md); color: var(--on-surface-variant); }
.link-btn {
  background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.quiz-notes { display: flex; flex-wrap: wrap; gap: 6px var(--space-sm); color: var(--on-surface-variant); margin-left: auto; }
.quiz-notes li { display: inline-flex; align-items: center; gap: 8px; }
.quiz-notes li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tertiary); }
.quiz #quiz-thanks { outline: 0; margin-bottom: var(--space-xs); }

/* ---------- 3 Erklärfilm ---------- */
.film { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-lg); align-items: start; }
.film > * { min-width: 0; }
.film-box {
  position: relative; aspect-ratio: 16 / 9; background: var(--anchor-deep); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.film-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-facade { position: absolute; inset: 0; display: grid; place-items: center; }
.film-art { position: absolute; inset: 0; overflow: hidden; }
.film-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(217,185,110,0.16) 1px, transparent 1.5px);
  background-size: 28px 28px;
}
.film-hub {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid var(--panel-line);
  box-shadow: 0 0 0 40px rgba(217,185,110,0.05);
}
.film-over {
  position: relative; display: grid; justify-items: center; gap: var(--space-xs); text-align: center;
  padding: var(--space-md); max-width: 46ch;
}
.film-over .ph--lg { color: var(--inverse-on-surface); }
.film-over .mono { color: var(--surface-dim); }
.film-play { margin-top: var(--space-sm); background: var(--accent-gold-bright); color: var(--anchor-deep); }
.film-play:hover { background: var(--tertiary-fixed-dim); }
.film-play .icon { width: 22px; height: 22px; }
.film-play:hover .icon { transform: none; }
.film-consent { color: var(--surface-dim); font-size: var(--type-mono-size); line-height: var(--type-mono-line); max-width: 44ch; }
.film-consent a { color: var(--accent-gold-bright); }
.film-sum { display: grid; gap: var(--space-sm); justify-items: start; }
.film-sum h3 { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
.btn--ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.btn--ghost:hover { background: var(--tint-rose); color: var(--primary); }

/* ---------- 6 Woher wir das wissen ---------- */
.orig { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; }
.orig > * { min-width: 0; }
.orig-text { display: grid; gap: var(--space-sm); max-width: 68ch; }
.orig-text p { color: var(--text-heading); }
.orig-key {
  margin: var(--space-sm) 0; padding-left: var(--space-md); border-left: 3px solid var(--primary);
  font-family: var(--font-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line);
  font-weight: 600; color: var(--text-heading); hyphens: manual; text-wrap: pretty;
}

/* ---------- 7 Rechner: Übergabe ins Quiz ---------- */
.calc-note { color: var(--surface-dim); }

/* ---------- 8 Ihre Daten ---------- */
.ledger--three { grid-template-columns: repeat(3, 1fr); }
.ai { margin-top: var(--space-md); display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-md); padding: var(--space-lg); }
.ai > * { min-width: 0; }
.ai h3 { margin-bottom: var(--space-sm); }
.ai p + p { margin-top: var(--space-sm); }
.ai 
/* ---------- 9 Was wir übernehmen ---------- */

/* ---------- 10 Warum es funktioniert ---------- */
.dash figcaption { padding: var(--space-sm) 0 0; color: var(--on-surface-variant); }
.pillars h3 { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }

/* ---------- 13 Vier Phasen ---------- */
/* Vier Phasen: keine Treppe, keine Winkel. Die Karten stehen auf einer Höhe, dazwischen
   eine gerade Linie mit Pfeilspitze. Die gewinkelten Verbinder der Dreier-Variante liefen
   hinter die nächste Karte und sahen abgeschnitten aus. */
.stairs--four { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.stairs--four li:nth-child(n) { margin-top: 0; }  /* schlaegt .stairs li:nth-child(2|3) */
.stairs--four li { display: flex; flex-direction: column; }
.stairs--four li:not(:last-child)::after {
  content: ""; position: absolute; top: 46px; left: 100%; width: var(--space-md); height: 1px;
  background: var(--accent-gold-pdf); border: 0; border-radius: 0;
}
.stairs--four li:not(:last-child)::before {
  content: ""; position: absolute; top: 42px; left: calc(100% + var(--space-md) - 5px);
  border-left: 5px solid var(--accent-gold-pdf); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.stairs--four h3 { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }

/* ---------- 14 Gründer ---------- */
.found-text p.found-qual {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--surface-base);
  border-radius: var(--radius); box-shadow: var(--shadow-card); color: var(--text-heading);
}

/* ---------- 16 Abschluss-CTA ---------- */
.audit-end { display: grid; gap: var(--space-md); align-content: start; }
.audit-end p { color: var(--text-heading); }
.audit-end .form-note { color: var(--on-surface-variant); }

/* ---------- Footer ---------- */
.footer-claim { margin-top: var(--space-xs); color: var(--surface-dim); max-width: 32ch; }

/* ---------- Breakpoints v2 ---------- */
@media (max-width: 1180px) {
  .stairs--four { grid-template-columns: repeat(2, 1fr); }
  .stairs--four li:not(:last-child)::after,
  .stairs--four li:not(:last-child)::before { display: none; }
}
@media (max-width: 1080px) {
  .hero-console--quiz { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .film { grid-template-columns: minmax(0, 1fr); }
  .ledger--three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .orig, .ai { grid-template-columns: minmax(0, 1fr); }
  .ledger--three { grid-template-columns: minmax(0, 1fr); }
  .orig .lbl--conn::before { display: none; }
  .quiz-result { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 767px) {
  .stairs--four { grid-template-columns: minmax(0, 1fr); }
  .stairs--four li:nth-child(n) { margin-top: 0; }
  .ai { padding: var(--space-md); }
  .film-over { padding: var(--space-sm); }
  .film-hub { width: 150px; height: 150px; }
  .quiz-q { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
  .quiz-foot { flex-direction: column; align-items: stretch; }
  .quiz-notes { margin-left: 0; }
  .link-btn { width: auto; justify-self: start; }
  .film-sum .btn, .audit-end .btn { width: 100%; }
}

/* --- Korrekturen nach Sichtprüfung v2 --- */
.audit-end { align-self: start; }
.audit-end .audit-intro { margin-bottom: 0; }
@media (max-width: 767px) {
  .hero h1 span { hyphens: auto; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 36px; line-height: 1.08; }
}
.quiz[data-at="6"] .quiz-notes, .quiz[data-at="7"] .quiz-notes { display: none; }

/* --- v3: H1 einzeilig, Hero ohne Netzkarte, Quiz-Kopf mit sichtbarem Ergebnis --- */

/* H1: jede Zeile bleibt eine Zeile. Die Schrift skaliert mit der Spalte, nicht mit dem Fenster,
   damit die längste Zeile ("Ein Ansprechpartner.") immer hineinpasst. */
.hero-head { container-type: inline-size; }
.hero h1 { font-size: min(9.1cqw, 72px); }
.hero h1 span { white-space: nowrap; hyphens: manual; }

/* Hero ohne Netzkarte: der Panel-Rand übernimmt die Begrenzung. */
.hero-console--quiz { border-top: 0; padding-block: var(--space-xl); align-items: center; }

/* Quiz-Kopf: was am Ende herauskommt, steht vor der ersten Frage. */
.quiz-head { padding-bottom: var(--space-md); border-bottom: 1px solid var(--outline-variant); }
.quiz-head .lbl { color: var(--tertiary); margin-bottom: var(--space-xs); }
.quiz-title {
  font-family: var(--font-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line);
  font-weight: 600; letter-spacing: var(--type-headline-md-tracking); color: var(--text-heading); margin-bottom: var(--space-xs);
  hyphens: manual; text-wrap: balance;
}
.quiz-sub { color: var(--text-body); }
.quiz-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--space-md); }
.quiz-path li { position: relative; padding: 24px var(--space-xs) 0 0; min-width: 0; }
.quiz-path li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--accent-gold-pdf); }
.quiz-path li:last-child::before { display: none; }
.quiz-path li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-base); border: 1.5px solid var(--tertiary);
}
.quiz-path .quiz-station { display: block; color: var(--text-heading); font-weight: 600; font-size: var(--type-mono-size); line-height: 18px; hyphens: manual; }
.quiz-path .quiz-station-sub { display: block; color: var(--on-surface-variant); }
/* Aktuelle Station mitführen */
.quiz[data-at="6"] .quiz-path li[data-at-station="6"]::after,
.quiz[data-at="7"] .quiz-path li[data-at-station="7"]::after,
.quiz-path li[data-at-station="1"]::after { background: var(--tertiary); }
.quiz[data-at="6"] .quiz-path li[data-at-station="1"]::after,
.quiz[data-at="7"] .quiz-path li[data-at-station="1"]::after { background: var(--surface-base); }
.quiz > .step-title { margin: 0; }

@media (max-width: 899px) {
  .hero-console--quiz { padding-block: var(--space-lg); }
}
@media (max-width: 767px) {
  .quiz-path { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .quiz-path li { padding: 0 0 var(--space-sm) 26px; }
  .quiz-path li:last-child { padding-bottom: 0; }
  .quiz-path li::before { top: 2px; bottom: -2px; left: 6px; right: auto; width: 1px; height: auto; }
  .quiz-path li:last-child::before { display: none; }
  .quiz-path li::after { top: 1px; }
}
/* Die Basisregel hellt h1/h2 im Panel auf; die helle Quiz-Karte braucht die dunkle Schrift zurück. */
.panel .audit-card h2, .panel .audit-card h3 { color: var(--text-heading); }

/* Sekundärer CTA im Hero: Linie statt Fläche, damit das Quiz der einzige harte CTA bleibt. */
.btn--line { background: transparent; color: var(--inverse-on-surface); box-shadow: inset 0 0 0 1.5px var(--panel-line); }
.btn--line:hover { background: rgba(217,185,110,0.12); color: var(--inverse-on-surface); }
.btn--line .icon { color: var(--accent-gold-bright); }
.hero-more { margin-top: var(--space-md); }
.hero-more:hover .icon { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .hero-more:hover .icon { transform: none; } }

/* ====================================================================
   v5: Gründer (drei Layouts), Stimmen, Variantenseite
   ==================================================================== */
.anchor { display: block; height: 0; }
.mono-badge {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--surface-base); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--accent-gold-pdf);
  font-family: var(--font-label); font-size: var(--type-mono-size); font-weight: 600; letter-spacing: 0.04em;
}
.crew-role { color: var(--on-tertiary-fixed-variant); margin-bottom: var(--space-xs); }

/* V1 Reihe */
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.crew > li { min-width: 0; padding: var(--space-lg); }
.crew h3 { margin: var(--space-sm) 0 2px; font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); }
.crew-shot { margin-top: var(--space-lg); width: min(560px, 100%); }
.crew-shot figcaption { padding-top: var(--space-xs); }
#gru-v1 .found-note { margin-top: var(--space-md); color: var(--on-tertiary-fixed-variant); }

/* V2 Porträt und Liste */
.crew-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; }
.crew-split > * { min-width: 0; }
.crew-side .lead { margin: var(--space-sm) 0 var(--space-lg); }
.crew-side h2 { margin-bottom: var(--space-sm); }
.crew-list { display: grid; }
.crew-list li { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--line-greige); }
.crew-list h3 { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); margin-bottom: 2px; }
.crew-side .found-note { margin-top: var(--space-md); color: var(--on-tertiary-fixed-variant); }

/* V3 Leitstand-Panel */
.crew-panel { padding: var(--space-xl); }
.crew-panel-head { max-width: 72ch; }
.crew-panel-head h2 { margin: var(--space-xs) 0 var(--space-sm); }
.crew-panel-head .lead { color: var(--inverse-on-surface); }
.crew-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--space-xl); }
.crew-nodes li { position: relative; padding: var(--space-lg) var(--space-md) 0 0; min-width: 0; color: var(--surface-dim); }
.crew-nodes li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--accent-gold-bright); opacity: .45; }
.crew-nodes li:last-child::before { display: none; }
.crew-nodes li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--anchor-deep); border: 1.5px solid var(--accent-gold-bright); box-shadow: var(--glow-point);
}
.crew-nodes h3 { color: var(--inverse-on-surface); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); margin-bottom: 2px; }
.crew-nodes .crew-role { color: var(--accent-gold-bright); }
.crew-panel-foot { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-md); align-items: center; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--panel-line); }
.crew-panel-foot p { color: var(--surface-dim); }
.crew-thumb { padding: 6px; }
.crew-panel .ph { color: var(--accent-gold-bright); }

/* Stimmen */
.voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.voice {
  position: relative; min-width: 0; background: var(--surface-base); border: 1px solid var(--line-greige);
  border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: var(--shadow-card);
}
.voice-kicker { color: var(--tertiary); margin-bottom: var(--space-sm); }
.voice blockquote {
  margin: 0 0 var(--space-md); padding-left: var(--space-md); border-left: 3px solid var(--primary);
  font-family: var(--font-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line);
  font-weight: 500; color: var(--text-heading); hyphens: manual; text-wrap: pretty;
}
.voice figcaption { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-sm); align-items: center; }
.voice figcaption strong { display: block; color: var(--text-heading); }
.voice figcaption .mono { display: block; color: var(--on-surface-variant); }
.voices-note { margin-top: var(--space-md); color: var(--on-surface-variant); }

/* Variantenseite */
.var-mark { background: var(--inverse-surface); color: var(--inverse-on-surface); padding-block: 10px; }
.var-mark p { color: var(--accent-gold-bright); }

@media (max-width: 1080px) {
  .crew { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .crew, .crew-nodes, .voices, .crew-split { grid-template-columns: minmax(0, 1fr); }
  .crew-split { gap: var(--space-lg); }
  .crew-lead { max-width: 520px; }
  .crew-nodes li { padding: 0 0 var(--space-lg) 30px; }
  .crew-nodes li:last-child { padding-bottom: 0; }
  .crew-nodes li::before { top: 2px; bottom: -2px; left: 7px; right: auto; width: 1px; height: auto; }
  .crew-nodes li::after { top: 0; }
  .crew-panel-foot { grid-template-columns: minmax(0, 1fr); }
  #gru-v2 .lbl--conn::before, #gru-v1 .lbl--conn::before { display: none; }
}
@media (max-width: 767px) {
  .crew > li { padding: var(--space-md); }
  .crew-panel { padding: var(--space-md) 20px; }
  .voice { padding: var(--space-md); }
  .voice blockquote { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
}


/* Gründer auf Weiß; der Film darüber ist ebenfalls weiß, deshalb eine Haarlinie als Trennung. */
.sec--white { background: var(--surface-base); border-top: 1px solid var(--outline-variant); }

/* Referenzband: Logos tragen, keine Kastenoptik, keine Zierlinie links. */
.refs { margin-top: var(--space-xl); padding-block: var(--space-lg); border-top: 1px solid var(--line-greige); border-bottom: 1px solid var(--line-greige); }
.refs-label { color: var(--tertiary); text-transform: uppercase; letter-spacing: var(--type-label-uppercase-tracking); margin-bottom: var(--space-md); }
.refs-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.refs-logos li { display: grid; place-items: center; }
.refs-logos img {
  height: 44px; width: auto; max-width: 140px; object-fit: contain;
}
.refs-line { margin-top: var(--space-md); color: var(--text-heading); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); max-width: 78ch; }
.refs-line strong { color: var(--primary); font-weight: 600; }
.refs--dark { border-color: var(--panel-line); }
.refs--dark .refs-label { color: var(--accent-gold-bright); }
.refs--dark .refs-line { color: var(--inverse-on-surface); }
.refs--dark .refs-line strong { color: var(--accent-gold-bright); }
.refs--dark .refs-logos img { filter: grayscale(1) brightness(0) invert(1); opacity: .7; }
.refs--dark .refs-logos li:hover img { filter: grayscale(1) brightness(0) invert(1); opacity: 1; }
@media (max-width: 899px) {
  /* Umbruch auf mehrere Reihen: zentriert statt verteilt, sonst steht die letzte Reihe schief. */
  .refs-logos { justify-content: center; gap: var(--space-md) var(--space-lg); }
}
@media (max-width: 767px) {
  .refs-logos img { height: 32px; max-width: 104px; }
  .refs { margin-top: var(--space-lg); padding-block: var(--space-md); }
}
.refs-line { text-wrap: pretty; }

/* ====================================================================
   5 Der Vorsprung (KI-Hook) und 6 Wem gehören die Daten
   ==================================================================== */
.edge { padding: var(--space-xl); }
.edge-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--space-xl); }
.edge-points li { position: relative; padding: var(--space-lg) var(--space-md) 0 0; min-width: 0; color: var(--surface-dim); }
.edge-points li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--accent-gold-bright); opacity: .4; }
.edge-points li:last-child::before { display: none; }
.edge-points li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--anchor-deep); border: 1.5px solid var(--accent-gold-bright); box-shadow: var(--glow-point);
}
.edge-points h3 { color: var(--inverse-on-surface); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); margin-bottom: var(--space-xs); }

.ledger--four { grid-template-columns: repeat(4, 1fr); }
.ledger--four article { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.data-close { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.data-close .pat-key { margin-top: 0; }
.data-step { display: flex; align-items: flex-start; gap: 10px; color: var(--on-surface-variant); }
.data-step .icon { width: 20px; height: 20px; flex: none; color: var(--tertiary); margin-top: 1px; }

@media (max-width: 1080px) {
  .ledger--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .edge-points, .edge-foot, .edge-head { grid-template-columns: minmax(0, 1fr); }
  .edge h2 { max-width: none; }
  .edge-points li { padding: 0 0 var(--space-lg) 30px; }
  .edge-points li:last-child { padding-bottom: 0; }
  .edge-points li::before { top: 2px; bottom: -2px; left: 7px; right: auto; width: 1px; height: auto; }
  .edge-points li::after { top: 0; }
  }
@media (max-width: 767px) {
  .edge { padding: var(--space-md) 20px; }
  .ledger--four { grid-template-columns: minmax(0, 1fr); }
  .ledger--four article { padding: var(--space-md); }
}

/* ====================================================================
   Typo-Normalisierung: vier Stufen auf der ganzen Seite, Minimum 15px.
   Die Tokens werden hier zentral überschrieben, damit jede Regel, die
   var(--type-*) nutzt, automatisch der Skala folgt.

     S  15px  Labels, Mono, Bildunterschriften, Feinhinweise
     M  17px  Fließtext, Buttons, Formulare
     L  21px  Lead, H3, Zwischenüberschriften, Zitate
     XL fluid H2 und große Aussagen
     dazu zwei Sonderrollen: H1 im Hero und die Zahl im Rechner.
   ==================================================================== */
:root {
  --t-s: 15px;   --t-s-line: 22px;
  --t-m: 17px;   --t-m-line: 28px;
  --t-l: 21px;   --t-l-line: 30px;

  /* S */
  --type-label-uppercase-size: var(--t-s);
  --type-label-uppercase-line: var(--t-s-line);
  --type-mono-size: var(--t-s);
  --type-mono-line: var(--t-s-line);

  /* M */
  --type-body-size: var(--t-m);
  --type-body-line: var(--t-m-line);
  --fs-body: var(--t-m);
  --lh-body: var(--t-m-line);
  --type-button-size: var(--t-m);
  --type-button-line: 24px;

  /* L */
  --type-body-lg-size: var(--t-l);
  --type-body-lg-line: var(--t-l-line);
  --type-headline-sm-size: var(--t-l);
  --type-headline-sm-line: var(--t-l-line);
  --type-headline-md-size: var(--t-l);
  --type-headline-md-line: var(--t-l-line);

  /* XL */
  --fs-h2: clamp(28px, 3vw, 40px);
}
@media (max-width: 767px) {
  :root { --t-l: 19px; --t-l-line: 28px; }
}

/* Vorsprung: der Hook ist die Überschrift. Nur vier Größen im Abschnitt. */
.edge .lbl { margin-bottom: var(--space-md); }
.edge-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-lg) var(--space-xl); align-items: start; }
.edge-head > * { min-width: 0; }
.edge-hook {
  margin: 0 0 var(--space-lg); max-width: 20ch; color: var(--inverse-on-surface); text-wrap: balance; hyphens: manual;
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: var(--type-headline-lg-tracking);
}
.edge-lead {
  color: var(--inverse-on-surface); max-width: 46ch;
  font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line);
}
.edge-take { color: var(--surface-dim); align-self: start; }
@media (max-width: 899px) {
  .edge-head { grid-template-columns: minmax(0, 1fr); }
  .edge-hook { max-width: none; }
}

/* Ausreißer in die Skala holen: Ziffern und die Uhrzeit folgen der XL-Stufe.
   Als eigene Display-Rolle bleibt nur die Zahl im Rechner und die H1 im Hero. */
.num { font-size: var(--fs-h2); line-height: 1.1; }
.dash-time { font-size: var(--fs-h2); line-height: 1.1; }
.quiz-sum { font-size: var(--fs-h2); line-height: 1.15; }

/* Leistungsraster: fünf gleich große Karten, eine breite mit der Einschränkung,
   dazu die Onboarding-Karte mit dem Pfad. */
.bento .card { grid-column: span 4; }
.bento .card h3 { margin: var(--space-sm) 0 var(--space-xs); }
@media (max-width: 1080px) {
  .bento .card { grid-column: span 6; }
}
@media (max-width: 899px) {
  .bento .card { grid-column: span 12; }
}
.bento .card--half { grid-column: span 6; }
@media (max-width: 1080px) { .bento .card--half { grid-column: span 6; } }
@media (max-width: 899px) { .bento .card--half { grid-column: span 12; } }

/* ====================================================================
   Das System dahinter: drei minimale Layouts
   ==================================================================== */

/* V1 Liste */
.sysrows { display: grid; }
.sysrows li { display: grid; grid-template-columns: 56px 5fr 7fr; gap: var(--space-md) var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--line-greige); }
.sysrows li:last-child { border-bottom: 1px solid var(--line-greige); }
.sysrows-num { color: var(--tertiary); }
.sysrows h3 { font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); }
.sysrows-key { margin-top: var(--space-lg); color: var(--text-heading); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); max-width: 62ch; }

/* V2 Diagramm */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-xl); align-items: center; margin-top: var(--space-lg); }
.flow-col { display: grid; gap: var(--space-md); justify-items: end; text-align: right; }
.flow-col li { position: relative; padding-right: var(--space-lg); color: var(--text-heading); font-weight: 600; }
.flow-col li::after { content: ""; position: absolute; right: 0; top: 0.65em; width: var(--space-md); height: 1px; background: var(--accent-gold-pdf); }
.flow-col--out { justify-items: start; text-align: left; }
.flow-col--out li { padding: 0 0 0 var(--space-lg); }
.flow-col--out li::after { right: auto; left: 0; }
.flow-col .mono { display: block; color: var(--on-surface-variant); font-weight: 400; }
.flow-core {
  display: grid; place-items: center; width: 168px; height: 168px; border-radius: 50%;
  background: var(--anchor-deep); box-shadow: 0 0 0 10px var(--surface-container-low);
}
.flow-core-label { color: var(--accent-gold-bright); }

/* V3 Drei Sätze */
.sysplain-h { margin-bottom: var(--space-xl); }
.sysplain { display: grid; gap: var(--space-lg); counter-reset: s; max-width: 42ch; }
.sysplain li {
  counter-increment: s; position: relative; padding-left: var(--space-xl); color: var(--text-body);
  font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 400; text-wrap: balance; hyphens: manual;
}
.sysplain li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0.45em; font-family: var(--font-label); font-size: var(--t-s); font-weight: 500; color: var(--tertiary); }
.sysplain strong { color: var(--text-heading); font-weight: 600; }
.sysplain-note { margin-top: var(--space-xl); max-width: 62ch; }

@media (max-width: 899px) {
  .sysrows li { grid-template-columns: 40px minmax(0, 1fr); }
  .sysrows li > p { grid-column: 2; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: center; }
  .flow-col, .flow-col--out { justify-items: start; text-align: left; }
  .flow-col li { padding: 0 0 0 var(--space-lg); }
  .flow-col li::after { right: auto; left: 0; }
  .sysplain { max-width: none; }
}
/* Der Vorsprung schließt direkt an den Daten-Abschnitt an, ohne Abstand nach oben. */
#vorsprung { padding-top: 0; }

/* Abschnitts-CTA: derselbe Weg zum Quiz am Ende jedes Abschnitts, zurückhaltend gesetzt. */
.sec-cta { margin-top: var(--space-xl); }
.panel .sec-cta { margin-top: var(--space-lg); }
@media (max-width: 767px) { .sec-cta { margin-top: var(--space-lg); } .sec-cta .btn { width: 100%; } }

/* ====================================================================
   12 Budget-Rechner, kompakt: eine Zeile Rechnung, keine Schieberegler.
   ==================================================================== */
.calc2 { display: grid; justify-items: start; gap: var(--space-xs); max-width: 62ch; }
/* Die Rechenzeile steht auf der XL-Stufe: sie ist der Einstieg, nicht die Fußnote zum Ergebnis. */
.calc2-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-family: var(--font-heading); font-size: var(--fs-h2); line-height: 1.25; font-weight: 500; color: var(--text-heading); }
.calc2-field { display: inline-flex; align-items: baseline; gap: 8px; cursor: text; }
.calc2-field input {
  width: auto; min-width: 2.5ch; field-sizing: content; padding: 2px 2px 4px; background: transparent; color: var(--primary);
  border: 0; border-bottom: 3px solid var(--accent-gold-pdf); border-radius: 0;
  font-family: var(--font-label); font-size: var(--fs-h2); line-height: 1.2; font-weight: 600; text-align: center;
}
.calc2-field input:focus { outline: 0; border-bottom-color: var(--primary); background: var(--surface-container-low); }
.calc2-op { color: var(--on-surface-variant); }
.calc2-eq { color: var(--tertiary); margin-top: var(--space-md); }
.calc2-sum {
  font-family: var(--font-label); font-size: clamp(42px, 5.6vw, 72px); line-height: 1.05; font-weight: 500;
  letter-spacing: var(--type-numeral-tracking); color: var(--primary);
}
.calc2-say { margin-top: var(--space-sm); color: var(--text-body); }
.calc2 .btn { margin-top: var(--space-md); }

}
@media (max-width: 767px) {
  .calc2-line { gap: 6px var(--space-xs); }
  .calc2 .btn { width: 100%; }
}
/* Zwei Spalten: links Einordnung, rechts die Rechnung */
.calc-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-lg) var(--space-xl); align-items: start; }
.calc-split > * { min-width: 0; }
.calc-intro h2 { margin-bottom: var(--space-sm); }

/* Grafik: wohin das Budget ohne zentrales System fließt (prospekt-v2.pdf, Seite 8).
   Aufbau von oben nach unten: Marke, Verteilschiene, Standorte, externe Agenturen.
   Das Raster hat keine Spaltenlücke, damit die Oberkanten der Spalten eine
   durchgehende Schiene ergeben; der Abstand liegt im Innenabstand der Spalten. */
.loss { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--line-greige); }
.loss-title { font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); margin-bottom: var(--space-lg); }

/* Marke über der Schiene, mit Abgang nach unten */
.loss-top { display: flex; justify-content: center; }
.loss-hub {
  position: relative; display: inline-grid; place-items: center; padding: 11px var(--space-lg);
  background: var(--anchor-deep); color: var(--inverse-on-surface); border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--accent-gold-bright);
  font-family: var(--font-label); font-size: var(--t-s); font-weight: 600; white-space: nowrap;
}
.loss-hub::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--space-md); background: var(--accent-gold-pdf); }

.loss-cols { display: grid; grid-template-columns: repeat(3, 1fr) minmax(40px, auto) repeat(3, 1fr); column-gap: 0; margin-top: var(--space-md); }
.loss-cols > li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: var(--space-lg) 6px 0; min-width: 0; }
/* durchgehende Schiene aus den Oberkanten */
.loss-cols > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent-gold-pdf); }
.loss-cols > li:first-child::before { left: 50%; }
.loss-cols > li:last-child::before { right: 50%; }
/* Abgang von der Schiene zur Münze */
.loss-cols > li:not(.loss-mid)::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--space-lg); background: var(--accent-gold-pdf); }
.loss-coin {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-base); box-shadow: inset 0 0 0 1.5px var(--accent-gold-pdf);
  color: var(--accent-gold-pdf); font-family: var(--font-label); font-size: var(--t-s); font-weight: 600;
}
.loss-site, .loss-ext {
  width: 100%; text-align: center; padding: 10px 6px; border-radius: var(--radius);
  font-family: var(--font-label); font-size: var(--t-s); line-height: 18px; hyphens: manual;
}
.loss-site { background: var(--surface-container); color: var(--text-heading); font-weight: 600; }
/* Pfeil vom Standort hinaus zur Agentur */
.loss-arrow { position: relative; display: block; width: 1px; height: 20px; background: var(--outline); }
.loss-arrow::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--outline);
}
/* außerhalb des Netzwerks: gestrichelt und zurückgenommen */
.loss-ext { background: transparent; border: 1px dashed var(--outline); color: var(--on-surface-variant); }
.loss-mid { padding-top: var(--space-lg); }
.loss-dots { color: var(--outline); align-self: center; padding-top: 30px; }
.loss-out { margin-top: var(--space-sm); text-align: center; color: var(--on-surface-variant); }
.loss figcaption { margin-top: var(--space-lg); color: var(--on-surface-variant); max-width: 70ch; }

@media (max-width: 1080px) { .loss-site, .loss-ext { padding-inline: 4px; } }
@media (max-width: 899px) {
  .calc-split { grid-template-columns: minmax(0, 1fr); }
  .loss-cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); column-gap: var(--space-md); margin-top: var(--space-lg); }
  .loss-cols > li { padding: 0; }
  .loss-cols > li::before, .loss-cols > li::after { display: none; }
  .loss-hub::after { display: none; }
  .loss-cols > .loss-mid { display: none; }  /* .loss-mid allein verliert gegen .loss-cols > li */
}

/* ====================================================================
   Nutzen-Tabs: zwei Sichten (Zentrale / Standort) auf dasselbe System.
   Drei Layouts im Vergleich: nutzen-varianten.html.
   Gemeinsame Teile: .tabbar / .tabsplit (Umschalter), .shot (Screenshot-Rahmen),
   .gains (Ergebnisliste). Die Varianten unterscheiden sich nur in der Anordnung.
   ==================================================================== */

/* ---- Umschalter als Segmentleiste (V1, V2) ---- */
.tabbar {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--space-lg);
  background: var(--surface-container-low); border: 1px solid var(--line-greige); border-radius: var(--radius-full);
}
.tabbar button {
  appearance: none; min-height: 48px; padding: 11px var(--space-md); border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-body); cursor: pointer;
  font-family: var(--font-body); font-size: var(--type-button-size); line-height: var(--type-button-line); font-weight: 600;
  transition: background var(--ease), color var(--ease);
}
.tabbar button:hover { color: var(--text-heading); }
.tabbar button[aria-selected="true"] { background: var(--anchor-deep); color: var(--inverse-on-surface); }

/* ---- Umschalter als Frage mit zwei Flaechen (V3) ---- */
.tabsplit { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.tabsplit button {
  appearance: none; display: grid; gap: 4px; text-align: left; padding: var(--space-md); cursor: pointer;
  background: transparent; color: var(--surface-dim); border: 0; border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px var(--panel-line); transition: background var(--ease), box-shadow var(--ease);
}
.tabsplit button:hover { background: rgba(217,185,110,0.08); }
.tabsplit button[aria-selected="true"] { background: rgba(217,185,110,0.14); box-shadow: inset 0 0 0 1.5px var(--accent-gold-bright); }
.tabsplit-t { font-family: var(--font-heading); font-size: var(--t-l); line-height: var(--t-l-line); font-weight: 600; color: var(--inverse-on-surface); }
.tabsplit-s { font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); color: var(--surface-dim); }

/* ---- Screenshot-Rahmen ----
   .shots fasst mehrere Rahmen plus eine gemeinsame Bildunterschrift zusammen; die Unterschrift
   steht ausserhalb von .shot, weil der Rahmen overflow:hidden hat. */
.shots { display: grid; gap: var(--space-md); }
.shots figcaption { color: var(--on-surface-variant); font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); max-width: 80ch; }
.shot { border: 1px solid var(--line-greige); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-base); box-shadow: var(--shadow-card); }
.shot-bar { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-sm); border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.shot-bar p { color: var(--on-surface-variant); }
.shot-dots { flex: none; width: 36px; height: 8px; background-image: radial-gradient(circle, var(--outline) 3px, transparent 3.5px); background-size: 12px 8px; }
.shot-area {
  display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 16 / 10; padding: var(--space-md);
  background: var(--surface-container-low); box-shadow: inset 0 0 0 1px var(--outline-variant);
}
.shot-area .mono { color: var(--on-surface-variant); }
.shot img { width: 100%; height: auto; }
/* im dunklen Panel: Rahmen in Gold, Flaeche bleibt hell wie der echte Screenshot */
.shot--dark { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent-gold-bright), var(--shadow-card); }

/* ---- Ergebnisliste ---- */
.gains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-xl); }
.gains > li { border-top: 1px solid var(--line-greige); padding: var(--space-md) 0; min-width: 0; }
.gains h3 { font-size: var(--t-l); line-height: var(--t-l-line); margin-bottom: 4px; }
.gains p { color: var(--text-body); }
.gains--one { grid-template-columns: minmax(0, 1fr); }
.gains--one > li:first-child { border-top: 0; padding-top: 0; }
/* V3: nur Kurzzeilen, auf dunklem Grund */
.gains--bare > li {
  border-top-color: var(--panel-line); padding: 14px 0 14px var(--space-md); position: relative;
  color: var(--inverse-on-surface); font-family: var(--font-heading); font-size: var(--t-l); line-height: var(--t-l-line); font-weight: 400; text-wrap: balance;
}
/* Strich auf der Mitte der ersten Zeile: 14px Innenabstand + halbe Zeilenhoehe */
.gains--bare > li::before { content: ""; position: absolute; left: 0; top: 29px; width: 8px; height: 1px; background: var(--accent-gold-bright); }

/* ---- V1: gestapelt ----
   Der Screenshot laeuft nicht ueber die volle Containerbreite: 1320px im Format 16:10 waeren
   fast 800px hoch und wuerden den Abschnitt erschlagen. */
#nutzen-v1 .shots { max-width: 1000px; margin-bottom: var(--space-lg); }
#nutzen-v1 .shot-area { aspect-ratio: 16 / 9; }

/* ---- V2: zwei Spalten, Screenshot bleibt stehen ---- */
.nut2-head { max-width: 72ch; margin-bottom: var(--space-lg); }
.nut2-head h2 { margin-bottom: var(--space-sm); }
.nut2-head .tabbar { margin: var(--space-lg) 0 0; }
.nut2 { display: grid; grid-template-columns: 6fr 6fr; gap: var(--space-xl); align-items: start; }
.nut2 > * { min-width: 0; }
.nut2-shot { min-width: 0; }

/* ---- V3: dunkles Panel ---- */
.nut3 { padding: var(--space-xl); display: grid; gap: var(--space-xl); }
.nut3-head { max-width: 76ch; }
.nut3-head h2 { margin-bottom: var(--space-md); }
.nut3-ask { color: var(--accent-gold-bright); }
.nut3 .shots figcaption { color: var(--surface-dim); }
.nut3-body { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; }
.nut3-body > * { min-width: 0; }
/* einspaltig: in der schmalen Spalte zerfallen zwei Spalten in drei-Zeilen-Fragmente */
.nut3-body .gains--bare { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1080px) {
  .nut2 { gap: var(--space-lg); }
  .nut3 { padding: var(--space-lg); gap: var(--space-lg); }
}
@media (max-width: 899px) {
  .gains { grid-template-columns: minmax(0, 1fr); }
  .nut2, .nut3-body { grid-template-columns: minmax(0, 1fr); }
  .nut3-body .shot { order: -1; }
}
@media (max-width: 767px) {
  .tabbar { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; border-radius: var(--radius-card); }
  .tabbar button { padding-inline: var(--space-xs); border-radius: var(--radius); }
  .tabsplit { grid-template-columns: minmax(0, 1fr); }
  .shot-area { aspect-ratio: 4 / 3; }
}

/* ====================================================================
   Für wen: drei Layouts (fuer-wen-varianten.html)
   Gemeinsam: .vh (nur für Screenreader), .chip--lead (Hauptzielgruppe), .ic--dark,
   Vorteilslisten mit Häkchen in tertiary (auf Dunkel accent-gold-bright).
   ==================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chip--lead { color: var(--inverse-on-surface); box-shadow: inset 0 0 0 1px var(--accent-gold-bright); }
.chip--lead .pt { color: var(--accent-gold-bright); }
.ic--dark { background: var(--inverse-surface); color: var(--accent-gold-bright); }
.fw1-usp > li, .fw2-usp > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.fw1-usp .icon, .fw2-usp .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--tertiary); }
.fw1-usp h4, .fw2-usp h4 { font-size: var(--t-m); line-height: var(--t-m-line); font-weight: 600; color: var(--text-heading); margin: 0; }
.fw1-usp p, .fw2-usp p { color: var(--text-body); }

/* ---- V1: Raster aus vier Spalten ---- */
.fw1 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.fw1-card {
  display: flex; flex-direction: column; gap: var(--space-md); min-width: 0;
  background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md); box-shadow: var(--shadow-card);
}
.fw1-card--lead {
  grid-column: span 2; padding: var(--space-lg);
  background-color: var(--anchor-deep);
  background-image: radial-gradient(rgba(217,185,110,0.09) 1px, transparent 1.5px); background-size: 28px 28px;
  border: 0; box-shadow: var(--panel-edge), var(--shadow-panel); color: var(--surface-dim);
}
.fw1-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.fw1-card h3 { font-size: var(--t-l); line-height: var(--t-l-line); }
.fw1-card--lead h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--inverse-on-surface); }
.fw1-k { font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); font-weight: 500; color: var(--tertiary); margin-bottom: 4px; }
.fw1-intro { display: grid; gap: var(--space-sm); }
.fw1-card--lead .fw1-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.fw1-card--lead .fw1-k { color: var(--accent-gold-bright); }
.fw1-card--lead .fw1-intro p:not(.fw1-k) { color: var(--inverse-on-surface); }
.fw1-usp { display: grid; gap: var(--space-sm); border-top: 1px solid var(--line-greige); padding-top: var(--space-md); }
.fw1-usp--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); border-top-color: var(--panel-line); }
.fw1-card--lead .fw1-usp .icon { color: var(--accent-gold-bright); }
.fw1-card--lead .fw1-usp h4 { color: var(--inverse-on-surface); }
.fw1-card--lead .fw1-usp p { color: var(--surface-dim); }

/* ---- V2: Umschalter mit Lagebild ---- */
.fw2 { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-md); align-items: start; }
.fw2 > * { min-width: 0; }
.fw2-tabs { display: grid; gap: var(--space-xs); }
.fw2-tabs button {
  display: grid; gap: 6px; text-align: left; width: 100%; padding: var(--space-md); cursor: pointer;
  background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card);
  font: inherit; color: var(--text-body); transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.fw2-tabs button:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.fw2-tabs button[aria-selected="true"] { background: var(--anchor-deep); border-color: var(--anchor-deep); color: var(--surface-dim); box-shadow: var(--panel-edge), var(--shadow-card); }
.fw2-tabs button[aria-selected="true"]:focus-visible { outline-color: var(--primary); }
.fw2-tab-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 28px; }
.fw2-tab-n { color: var(--tertiary); }
.fw2-tab-t { font-family: var(--font-heading); font-size: var(--t-l); line-height: var(--t-l-line); font-weight: 600; color: var(--text-heading); }
.fw2-tab-s { font-size: var(--t-s); line-height: var(--t-s-line); }
.fw2-tabs button[aria-selected="true"] .fw2-tab-n { color: var(--accent-gold-bright); }
.fw2-tabs button[aria-selected="true"] .fw2-tab-t { color: var(--inverse-on-surface); }
.fw2-panel { padding: var(--space-lg); }
.fw2-top { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-lg); align-items: start; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--line-greige); margin-bottom: var(--space-lg); }
.fw2-top > * { min-width: 0; }
.fw2-fig { margin: 0; background: var(--tint-rose); border-radius: var(--radius-md); padding: var(--space-sm); }
.fw2-fig figcaption { color: var(--on-surface-variant); margin-top: var(--space-xs); }
.fw2-map { display: block; width: 100%; height: auto; }
.fw-l { fill: none; stroke: var(--line-greige); stroke-width: 1.5; }
.fw-l--loose { stroke-dasharray: 4 5; }
.fw-l--peer { stroke: var(--accent-gold-pdf); stroke-opacity: .55; }
.fw-l--firm { stroke: var(--tertiary); stroke-opacity: .6; stroke-width: 2; }
.fw-n { fill: var(--surface-base); stroke: var(--tertiary); stroke-width: 1.5; }
.fw-n--own { fill: var(--tertiary); }
.fw-hub { fill: var(--anchor-deep); }
.fw-ring { fill: none; stroke: var(--accent-gold-pdf); stroke-width: 1; }
.fw2-intro h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: var(--space-sm); }
.fw2-k { font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); font-weight: 500; color: var(--tertiary); margin: var(--space-sm) 0 4px; }
.fw2-usp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }

/* ---- V3: Vergleichsmatrix ---- */
.fw3-wrap { padding: var(--space-xs) var(--space-lg) var(--space-md); }
.fw3 { margin: 0; table-layout: fixed; }
.fw3-c0 { width: 34%; } .fw3-c1 { width: 26%; } .fw3-c2, .fw3-c3 { width: 20%; }
.fw3 th, .fw3 td { padding: 14px var(--space-sm); }
.fw3 thead th, .fw3 thead td { vertical-align: bottom; padding-block: var(--space-md); border-bottom: 1.5px solid var(--text-heading); }
.fw3-name { display: block; font-family: var(--font-heading); font-size: var(--t-l); line-height: var(--t-l-line); font-weight: 600; color: var(--text-heading); hyphens: manual; }
.fw3 thead .fw3-lead { background: var(--anchor-deep); border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom-color: var(--anchor-deep); }
.fw3 thead .fw3-lead .fw3-name { color: var(--inverse-on-surface); margin-top: var(--space-xs); }
.fw3-corner p { color: var(--tertiary); }
.fw3 tbody th { font-weight: 500; color: var(--text-heading); }
.fw3 tbody td { text-align: center; vertical-align: middle; }
.fw3 tbody .fw3-lead { background: var(--tint-rose); box-shadow: inset 1px 0 0 var(--accent-gold-pdf), inset -1px 0 0 var(--accent-gold-pdf); }
.fw3 tbody tr:last-child .fw3-lead { box-shadow: inset 1px 0 0 var(--accent-gold-pdf), inset -1px 0 0 var(--accent-gold-pdf), inset 0 -1px 0 var(--accent-gold-pdf); }
.fw3 tbody td, .fw3 tbody td:last-child { font-family: var(--font-body); font-weight: 400; color: var(--text-body); }
.fw3 .fw3-text td { text-align: left; vertical-align: top; font-size: var(--t-s); line-height: var(--t-s-line); color: var(--text-body); }
.fw3 .fw3-text th { font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); color: var(--tertiary); }
.fw3 .fw3-group th { padding-top: var(--space-lg); font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); font-weight: 500; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; color: var(--tertiary); }
.fw3-yes { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tertiary-fixed); color: var(--on-tertiary-fixed-variant); }
.fw3-yes .icon { width: 18px; height: 18px; }
.fw3-lead .fw3-yes { background: var(--tertiary); color: var(--on-tertiary); }
.fw3-no { color: var(--outline); font-family: var(--font-label); }

@media (max-width: 1180px) {
  .fw1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw1-card--lead { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .fw2 { grid-template-columns: minmax(0, 1fr); }
  .fw2-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fw2-tab-s { display: none; }
}
@media (max-width: 899px) {
  .fw2-top { grid-template-columns: minmax(0, 1fr); }
  .fw2-usp { grid-template-columns: minmax(0, 1fr); }
  .fw3-wrap { padding: var(--space-xs) 20px var(--space-sm); }
  .fw3 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fw3, .fw3 tbody, .fw3 tr, .fw3 tbody th, .fw3 tbody td { display: block; }
  .fw3 tbody tr { padding-block: var(--space-sm); border-bottom: 1px solid var(--line-greige); }
  .fw3 tbody th, .fw3 tbody td, .fw3 tbody .fw3-lead, .fw3 tbody tr:last-child .fw3-lead { padding: 0; border: 0; box-shadow: none; background: none; }
  .fw3 tbody th { margin-bottom: var(--space-xs); }
  .fw3 tbody td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding-block: 3px; text-align: right; }
  .fw3 tbody td::before { content: attr(data-label); text-align: left; font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); color: var(--on-surface-variant); }
  .fw3 tbody td.fw3-lead::before { color: var(--text-heading); font-weight: 600; }
  .fw3 .fw3-text td { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: var(--space-xs); }
  .fw3 .fw3-group { border-bottom: 0; padding-bottom: 0; }
  .fw3 .fw3-group th { padding-top: var(--space-md); margin: 0; }
  .fw3-yes { width: 28px; height: 28px; }
}
@media (max-width: 767px) {
  .fw1 { grid-template-columns: minmax(0, 1fr); }
  .fw1-card, .fw1-card--lead { padding: var(--space-md) 20px; }
  .fw1-card--lead .fw1-intro, .fw1-usp--two { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .fw2-tabs { grid-template-columns: minmax(0, 1fr); }
  .fw2-tab-s { display: block; }
  .fw2-panel { padding: var(--space-md) 20px; }
}
@media (prefers-reduced-motion: reduce) { .fw2-tabs button { transition: none; } .fw2-tabs button:hover { transform: none; } }

/* ---- V1 minimal: nur Warum-Satz und Vorteilsliste ---- */
.fw1-why { color: var(--text-body); }
.fw1-card--lead .fw1-why { color: var(--inverse-on-surface); font-size: var(--t-l); line-height: var(--t-l-line); max-width: 40ch; }
.fw1-list { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--line-greige); }
.fw1-list > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 12px; border-bottom: 1px solid var(--line-greige); font-weight: 600; color: var(--text-heading); }
.fw1-list .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--tertiary); }
.fw1-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); border-top-color: var(--panel-line); }
.fw1-card--lead .fw1-list > li { color: var(--inverse-on-surface); border-bottom-color: var(--panel-line); }
.fw1-card--lead .fw1-list .icon { color: var(--accent-gold-bright); }
.fw1--min .fw1-card { gap: var(--space-sm); }
.fw1--min .fw1-list { margin-top: var(--space-sm); }
@media (max-width: 767px) { .fw1-list--two { grid-template-columns: minmax(0, 1fr); } }

/* ---- V4: aufklappende Spalten ----
   .fw4 ist ein Size-Container. Jeder Body wird in der Breite der offenen Spalte gesetzt
   (100cqw minus zwei Streifen und zwei Abstände), auch in geschlossenen Spalten. So haben alle
   Spalten die Höhe des längsten Inhalts, und der Abschnitt springt beim Wechseln nicht. */
.fw4 { --fw4-strip: 40px; --fw4-gap: var(--space-xs); container-type: inline-size; display: flex; gap: var(--fw4-gap); }
.fw4-col {
  position: relative; flex: 0 0 var(--fw4-strip); min-width: 0; overflow: hidden;
  background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card);
  transition: flex-grow .45s ease, flex-basis .45s ease, background var(--ease);
}
.fw4-col.is-open { flex: 1 1 0; box-shadow: var(--shadow-card); }
.fw4-strip {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) 0; border: 0; background: var(--tint-rose); cursor: pointer; font: inherit; color: var(--text-heading);
  transition: background var(--ease);
}
.fw4-strip:hover, .fw4-strip:focus-visible { background: var(--surface-container-high); }
.fw4-strip:focus-visible { outline-offset: -4px; }
.fw4-col.is-open .fw4-strip { display: none; }
.fw4-strip-n { font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); color: var(--tertiary); }
.fw4-strip-t {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-family: var(--font-heading); font-size: var(--t-m); line-height: 1; font-weight: 600;
}
.fw4-body {
  width: calc(100cqw - 2 * (var(--fw4-strip) + var(--fw4-gap))); padding: var(--space-lg);
  display: grid; gap: var(--space-md); align-content: start;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.fw4-col.is-open .fw4-body { opacity: 1; visibility: visible; transition: opacity .35s ease .15s, visibility 0s; }
.fw4-head { display: flex; align-items: center; gap: var(--space-sm); }
.fw4-n { color: var(--tertiary); }
.fw4-body h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); outline: none; }
.fw4-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: 960px; }
.fw4-k { font-family: var(--font-label); font-size: var(--t-s); line-height: var(--t-s-line); font-weight: 500; color: var(--tertiary); margin-bottom: 4px; }
.fw4-intro p:not(.fw4-k) { color: var(--text-heading); }
.fw4-usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line-greige); }
.fw4-usp > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.fw4-usp .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--tertiary); }
.fw4-usp h4 { font-size: var(--t-m); line-height: var(--t-m-line); font-weight: 600; color: var(--text-heading); margin: 0; }
.fw4-usp p { color: var(--text-body); }

@media (max-width: 1180px) { .fw4-usp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .fw4-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Unter 900px: Akkordeon. Leisten waagerecht, nur die offene Spalte zeigt ihren Inhalt. */
@media (max-width: 899px) {
  .fw4 { flex-direction: column; }
  .fw4-col, .fw4-col.is-open { flex: none; transition: none; }
  .fw4-strip { position: static; flex-direction: row; justify-content: flex-start; width: 100%; min-height: 56px; padding: 12px 20px; text-align: left; }
  .fw4-strip-t { writing-mode: horizontal-tb; transform: none; white-space: normal; line-height: var(--t-m-line); }
  .fw4-body { width: auto; padding: var(--space-md) 20px; display: none; }
  .fw4-col.is-open .fw4-body { display: grid; }
  .fw4-intro, .fw4-usp { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { .fw4-col, .fw4-body, .fw4-col.is-open .fw4-body { transition: none; } }

/* ---- V5: minimal, vier Spalten, Fließtext ---- */
.fw5 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.fw5-card {
  display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0;
  background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md); box-shadow: var(--shadow-card);
}
.fw5-card--wide { grid-column: span 2; padding-inline: var(--space-lg); }
.fw5-card .ic { margin-bottom: var(--space-xs); }
.fw5-card h3 { font-size: var(--t-l); line-height: var(--t-l-line); }
.fw5-card p { color: var(--text-body); }
.fw5-card--wide p { max-width: 62ch; }
@media (max-width: 1180px) {
  .fw5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw5-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .fw5 { grid-template-columns: minmax(0, 1fr); }
  .fw5-card, .fw5-card--wide { padding: var(--space-md) 20px; }
}

/* ---- V6: wie V5, drei gleich breite Spalten ---- */
.fw5--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fw5--three .fw5-card--wide { grid-column: auto; padding-inline: var(--space-md); }
@media (max-width: 1080px) { .fw5--three { grid-template-columns: minmax(0, 1fr); } .fw5--three .fw5-card p { max-width: 62ch; } }

/* V6: Icon ohne Fläche oben rechts, Name links daneben */
.fw6-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.fw6-head h3 { min-width: 0; }
.fw6-ic { flex: none; color: var(--primary); margin-top: 3px; }
.fw6-ic .icon { width: 24px; height: 24px; }
/* V6: gleicher Innenabstand oben, unten und seitlich */
.fw5--three .fw5-card, .fw5--three .fw5-card--wide { padding: var(--space-md); }
@media (max-width: 767px) { .fw5--three .fw5-card, .fw5--three .fw5-card--wide { padding: 20px; } }

/* ---- V7: Lagebild je Karte ---- */
.fw7 .fw7-fig { background: var(--tint-rose); border-radius: var(--radius-md); padding: var(--space-sm); margin-bottom: var(--space-xs); }
.fw7-map { display: block; width: 100%; height: auto; max-height: 180px; }

/* V7: auf dem Handy je Karte ein eigener Button statt eines Buttons unter dem Abschnitt */
.fw7-cta { display: none; }
@media (max-width: 767px) {
  .fw7-cta { display: inline-flex; margin-top: var(--space-xs); }
  .fw7-sec-cta { display: none; }
}
/* Header-Button auf dem Handy: langes Label, daher kleinere Schrift und weniger Innenabstand */
@media (max-width: 767px) {
  .header-cta { font-size: var(--t-s); line-height: 20px; padding: 8px 12px; text-align: center; }
}

/* Handy: Header-Button wandert als feste Leiste an den unteren Rand und erscheint erst,
   wenn die Seite über die Höhe des Headers hinaus gescrollt ist. Liegt unter dem Menü (z-index 40). */
.mcta { display: none; }
@media (max-width: 767px) {
  .header-cta { display: none; }
  .mcta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px var(--space-margin-mobile) calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-base); border-top: 1px solid var(--line-greige);
    box-shadow: 0 -10px 28px -14px rgba(43,15,24,0.16);
    transform: translateY(110%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .mcta.is-on { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .mcta, .mcta.is-on { transition: none; } }

/* Buttons, die umbrechen: beide Zeilen möglichst gleich lang */
.btn { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.btn-t { min-width: 0; text-wrap: balance; }

/* ---- V8: Lagebilder wie von Hand gezeichnet, eine Farbe (anchor-deep wie Tinte) ---- */
.fw8 .fw8-l, .fw8 .fw-l--peer, .fw8 .fw-l--firm { stroke: var(--anchor-deep); stroke-opacity: 1; fill: none; stroke-linecap: round; }
.fw8 .fw-l--loose { stroke-dasharray: 3 6; }
.fw8-ring { fill: none; stroke: var(--anchor-deep); stroke-linecap: round; stroke-linejoin: round; }
.fw8-fill { fill: var(--surface-base); }
.fw8-dot, .fw8-hub { fill: var(--anchor-deep); }

/* ---- V7: Lagebilder in einer Farbe (anchor-deep), präzise gezeichnet ---- */
.fw7 .fw-l, .fw7 .fw-l--peer, .fw7 .fw-l--firm { stroke: var(--anchor-deep); stroke-opacity: 1; stroke-width: 1.5; }
.fw7 .fw-l--loose { stroke-dasharray: 3 6; }
.fw7 .fw-n { fill: var(--surface-base); stroke: var(--anchor-deep); }
.fw7 .fw-n--own { fill: var(--anchor-deep); }
.fw7 .fw-hub { fill: var(--anchor-deep); }

/* ==========================================================================
   Daten-Rad: "Ihre Daten wissen mehr als jede Agentur" (system-rad-v1 bis v5)
   Achse am rechten Rand des Abschnitts, die linke Radhälfte ist sichtbar.
   --pw = Blattbreite, wächst mit der Bildschirmbreite. --wr setzt das Skript (Radius in px).
   ========================================================================== */
.sysw { position: relative; overflow: clip; --pw: clamp(220px, 21vw, 400px); }
.sysw-in { position: relative; z-index: 2; display: flex; align-items: center; min-height: calc(var(--pw) * 2.8); pointer-events: none; }
.sysw-in > * { pointer-events: auto; }
.sysw-text { width: 100%; max-width: min(620px, 46%); }
.sysw-text h2 { margin: 0; }
.sysw-text .lead { margin-top: var(--space-sm); color: var(--text-heading); }
.sysw-stage { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 58%; }
.wheel { position: absolute; right: 0; top: 50%; width: 0; height: 0; }
.petal {
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--pw); margin: 0; translate: -50% -50%;
  transform-origin: center; will-change: transform, opacity; opacity: 0;
}
.petal-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint-rose); }
.petal-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.petal-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0;
  padding: var(--space-xs) 4px 2px; font-family: var(--font-label); font-size: 13px; line-height: 18px; color: var(--on-surface-variant);
}
.petal-cap span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.petal-tag { flex: none; padding: 1px 8px; border-radius: var(--radius-full); background: var(--tertiary-fixed); color: var(--on-tertiary-fixed-variant); }
.wheel-spoke { position: absolute; right: 0; top: 0; z-index: 1; width: var(--wr, 300px); height: 1px; transform-origin: 100% 50%; opacity: 0;
  background: repeating-linear-gradient(to left, var(--accent-gold-pdf) 0 6px, transparent 6px 12px); }
.wheel-hub { position: absolute; z-index: 3; border-radius: var(--radius-full); translate: 50% -50%; right: 0; top: 0; }
.wheel-toggle {
  position: absolute; z-index: 4; right: var(--space-md); bottom: var(--space-md);
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-greige); border-radius: var(--radius-full); background: var(--surface-base); color: var(--text-heading);
  font-family: var(--font-label); font-size: 13px; cursor: pointer; box-shadow: var(--shadow-card);
}
.wheel-toggle .icon { width: 20px; height: 20px; color: var(--primary); }
.wheel-toggle:hover { border-color: var(--accent-gold-pdf); }
.sysw-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.sysw-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--space-sm); }
.sysw-list h3 { margin: 0; font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); grid-column: 2; }
.sysw-list .ic { grid-row: span 2; }
.sysw-list p { margin: 0; grid-column: 2; }
.sysw .sec-cta { margin-top: var(--space-lg); }

/* V1 Blüte: Modulrahmen als Blätter, kippen mit, Speichen zur Achse */
.sysw--v1 .petal, .sysw--v2 .petal {
  padding: var(--space-xs); background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.sysw--v1 .petal-media, .sysw--v2 .petal-media, .sysw--v3 .petal-media { border-radius: var(--radius-md); }
.sysw--v1 .wheel-hub { width: 112px; height: 112px; background: var(--anchor-deep); box-shadow: var(--panel-edge), 0 0 0 10px var(--tint-rose); }
.sysw--v1 .wheel-hub::after { content: ""; position: absolute; left: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--accent-gold-bright); box-shadow: var(--glow-point); }

/* V2 Riesenrad: Blätter bleiben aufrecht, Drehung in Schritten, vorderes Blatt groß, Anzeige links */
.sysw--v2 .wheel-track { position: absolute; right: calc(var(--wr, 300px) * -1); top: calc(var(--wr, 300px) * -1); width: calc(var(--wr, 300px) * 2); height: calc(var(--wr, 300px) * 2);
  border: 1px dashed var(--line-greige); border-radius: 50%; }
.sysw--v2 .wheel-hub { width: 64px; height: 64px; background: var(--surface-base); border: 1px solid var(--line-greige); box-shadow: inset 0 0 0 10px var(--tint-rose); }
.sysw--v2 .petal { transition: box-shadow var(--ease), border-color var(--ease); }
.sysw--v2 .petal.is-front { z-index: 3; border-color: var(--accent-gold-pdf); box-shadow: var(--shadow-hover); }
.sysw-ticker { margin-top: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-card); background: var(--tint-rose); border-left: 3px solid var(--accent-gold-pdf); }
.sysw-ticker .kick { display: flex; align-items: center; gap: 8px; }
.sysw-ticker .pt { width: 8px; height: 8px; color: var(--primary); }
.sysw-ticker-t { margin: 0; font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 600; color: var(--text-heading); }
.sysw-ticker p[data-s] { margin: 4px 0 0; }
.sysw-rows { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.sysw-rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--line-greige); }
.sysw-rows li:last-child { border-bottom: 1px solid var(--line-greige); }
.sysw-rows .num { grid-row: span 2; font-size: 22px; line-height: 28px; }
.sysw-rows h3 { margin: 0; font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
.sysw-rows p { margin: 0; grid-column: 2; }

/* V3 Konsole: dunkles Panel, das bis an den rechten Bildschirmrand reicht */
.sysw--v3 { overflow: visible; }
.sysw-bleed { position: relative; overflow: clip; border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  margin-left: max(var(--gutter), calc((100% - var(--container-max)) / 2)); }
.sysw--v3 .sysw-in { padding: var(--space-xl) var(--space-lg); }
.sysw--v3 .sysw-text .lead { color: var(--inverse-on-surface); }
.sysw--v3 .sysw-list p { color: var(--surface-dim); }
.sysw--v3 .sysw-list .ic { background: var(--inverse-surface); color: var(--accent-gold-bright); }
.sysw--v3 .petal { padding: var(--space-xs); background: var(--inverse-surface); border-radius: var(--radius-lg); box-shadow: var(--panel-edge), 0 24px 50px -24px rgba(43,15,24,0.6); }
.sysw--v3 .petal-cap { color: var(--accent-gold-bright); }
.sysw--v3 .petal-tag { background: transparent; color: var(--inverse-on-surface); box-shadow: inset 0 0 0 1px var(--accent-gold-bright); }
.sysw--v3 .wheel-spoke { background: repeating-linear-gradient(to left, var(--accent-gold-bright) 0 6px, transparent 6px 12px); }
.sysw--v3 .wheel-hub { width: 96px; height: 96px; background: var(--inverse-surface); box-shadow: inset 0 0 0 1px var(--panel-line), 0 0 0 14px rgba(217,185,110,0.08), 0 0 0 30px rgba(217,185,110,0.05); }
.sysw--v3 .wheel-hub::after { content: ""; position: absolute; left: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--accent-gold-bright); box-shadow: var(--glow-point); }
.sysw--v3 .wheel-toggle { background: var(--inverse-surface); color: var(--inverse-on-surface); border-color: var(--panel-line); }
.sysw--v3 .wheel-toggle .icon { color: var(--accent-gold-bright); }

/* V4 Blütenblätter: ovale Blätter um eine goldene Mitte */
.sysw--v4 .petal { border-radius: 50%; overflow: hidden; border: 3px solid var(--surface-base); box-shadow: var(--shadow-card); background: var(--surface-base); }
.sysw--v4 .petal-media { aspect-ratio: 1.7 / 1; }
.sysw--v4 .wheel-hub { width: max(128px, calc(var(--pw) * 0.62)); height: max(128px, calc(var(--pw) * 0.62)); background: var(--accent-gold-bright);
  box-shadow: 0 0 0 6px var(--surface-base), 0 0 0 7px var(--line-greige), var(--shadow-card); display: flex; align-items: center; }
.sysw--v4 .wheel-hub span { width: 50%; padding-left: var(--space-sm); font-family: var(--font-label); font-size: 13px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--anchor-deep); }
.sysw-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.sysw-legend li { color: var(--text-heading); background: var(--tint-rose); }
.sysw-legend .pt { width: 8px; height: 8px; color: var(--accent-gold-pdf); }
.sysw-checks { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.sysw-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; }
.sysw-checks .icon { color: var(--tertiary); margin-top: 3px; grid-row: span 2; }
.sysw-checks strong { color: var(--text-heading); font-weight: 600; }
.sysw-checks p { margin: 0; grid-column: 2; }

/* V5 Messrad: Skala mit umlaufender Schrift in der Mitte, Blätter als schmale Rahmen */
.sysw--v5 .petal { padding: 6px; background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); }
.sysw--v5 .petal-media { border-radius: var(--radius-md); }
.sysw--v5 .wheel-dial { position: absolute; z-index: 1; width: calc(var(--pw) * 1.6); height: calc(var(--pw) * 1.6); right: calc(var(--pw) * -0.8); top: calc(var(--pw) * -0.8);
  animation: wheel-dial 140s linear infinite reverse; }
.sysw--v5 .dial-t { stroke: var(--line-greige); stroke-width: 0.8; }
.sysw--v5 .dial-t--major { stroke: var(--accent-gold-pdf); stroke-width: 1.2; }
.sysw--v5 .dial-txt { font-family: var(--font-label); font-size: 7.4px; letter-spacing: 0.12em; fill: var(--tertiary); }
.sysw--v5 .wheel-hub { width: calc(var(--pw) * 0.6); height: calc(var(--pw) * 0.6); background: var(--anchor-deep); box-shadow: var(--panel-edge); }
.sysw--v5 .wheel-hub::after { content: ""; position: absolute; left: 22%; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--accent-gold-bright); box-shadow: var(--glow-point); }
@keyframes wheel-dial { to { transform: rotate(360deg); } }
.wheels-paused .wheel-dial { animation-play-state: paused; }
.sysw-mods { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.sysw-mods li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px var(--space-sm); padding: var(--space-md); background: var(--surface-base);
  border: 1px solid var(--line-greige); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.sysw-mods .num { grid-row: span 2; font-size: 22px; line-height: 28px; }
.sysw-mods h3 { margin: 0; font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
.sysw-mods p { margin: 0; grid-column: 2; }

/* Unter 900px: Text oben, das Rad als Band darunter, Achse weiter am rechten Rand */
@media (max-width: 899px) {
  .sysw { --pw: clamp(150px, 42vw, 260px); }
  .sysw-in { display: block; min-height: 0; }
  .sysw-text { max-width: none; }
  .sysw-stage { position: relative; width: auto; height: calc(var(--pw) * 2.7); margin-top: var(--space-md); }
  .sysw .sec-cta { margin-top: var(--space-md); }
  .sysw--v3 .sysw-in { padding: var(--space-lg) var(--space-md) 0; }
  .sysw-bleed { margin-left: var(--space-margin-mobile); }
  .petal-tag { display: none; }
  .petal-cap { font-size: 12px; padding-top: 6px; }
  .sysw--v1 .wheel-hub { width: 80px; height: 80px; }
  .sysw--v1 .wheel-hub::after { left: 14px; }
  .wheel-toggle { right: var(--space-margin-mobile); bottom: var(--space-sm); }
  .sysw--v4 .wheel-hub span { padding-left: 12px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) { .sysw--v5 .wheel-dial { animation: none; } .sysw--v2 .petal { transition: none; } }

/* V2: vier Blätter gleichzeitig (Ruhelage ±22,5° und ±67,5°), daher mehr Höhe */
/* Text oben bündig (Label-Linie reicht bis zur Abschnittskante); die Abschnittshöhe kommt nur
   aus dem Text. Das Rad passt sich per --pw-fit (Skript, data-fit) an diese Höhe an. */
.sysw--v2 .sysw-in { min-height: 0; align-items: flex-start; }
.sysw--v2 .petal { width: min(var(--pw), var(--pw-fit, 9999px)); }
/* Desktop: das Rad ist 60px höher als der Abschnitt und darf je 30px über Ober- und Unterkante
   hinausragen. Seitlich bleibt der Abschnitt beschnitten (kein waagrechtes Scrollen). */
@media (min-width: 900px) { .sysw--v2 { overflow-x: clip; overflow-y: visible; z-index: 1; } }
@media (max-width: 899px) {
  .sysw--v2 { --pw: clamp(160px, 46vw, 280px); }
  .sysw--v2 .sysw-stage { height: calc(var(--pw) * 3.7); }
  .sysw--v2 .petal-cap span:first-child { white-space: normal; font-size: 11px; line-height: 15px; }
}

/* H1 seit 06.11.: dritte Zeile "für Multi-Standort-Unternehmen" ist länger als die anderen und darf
   am Bindestrich umbrechen; die ersten beiden Zeilen bleiben einzeilig. */
.hero h1 span:nth-child(3) { white-space: normal; hyphens: manual; text-wrap: balance; }

/* ====================================================================
   Leistungen-Scroller V1–V3 (Vergleich: leistungen-varianten.html)
   .ls-track ist der Scroll-Container (CSS-Snap, Wischen, Pfeiltasten), .ls-list ist max-content
   breit und trägt die Seitenränder. --ls-side ist der Abstand der Container-Achse vom Rand des
   Abschnitts; die Prozentwerte beziehen sich dort, wo die Variable eingesetzt wird, auf die Breite
   der Schiene (= Abschnittsbreite). So steht die erste Karte auf der Achse, die Schiene läuft
   rechts bis an den Bildschirmrand. Skript: "Leistungen-Scroller" in src/scripts.html.
   ==================================================================== */
.ls {
  --ls-gut: var(--gutter);
  --ls-side: max(var(--ls-gut), calc((100% - var(--container-max)) / 2 + var(--ls-gut)));
  --ls-side-vw: max(var(--ls-gut), calc((100vw - var(--container-max)) / 2 + var(--ls-gut)));
  --ls-gap: var(--space-md);
}
.ls-track {
  position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--ls-side); scrollbar-width: none;
}
.ls-track::-webkit-scrollbar { display: none; }
.ls-track:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
.ls-track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.ls-list { display: flex; gap: var(--ls-gap); width: max-content; padding: var(--space-xs) var(--ls-side) var(--space-md); }

/* Karte (Modul) */
.ls-card {
  position: relative; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-base); border: 1px solid var(--line-greige); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: transform var(--ease), box-shadow var(--ease);
}
.ls-card img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* Key Visual 8: Bild im Modulrahmen, innen Radius md */
.ls-media { position: relative; aspect-ratio: 4 / 3; margin: var(--space-xs) var(--space-xs) 0; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-container-high); }
.ls-media--team img { object-position: 50% 30%; }
.ls--v2 .ls-card--cta > img { object-position: 42% 30%; }
.ls-body { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; padding: var(--space-md); }
.ls-teaser { color: var(--text-heading); font-weight: 500; }
.ls-card--cta .btn { margin-top: auto; align-self: flex-start; }
.ls-card--cta .ls-body > p { margin-bottom: var(--space-sm); }

/* "Mehr lesen": echter Schalter mit aria-expanded, auf allen Geräten */
.ls-more {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--primary); cursor: pointer;
  font-family: var(--font-label); font-size: var(--type-mono-size); line-height: var(--type-mono-line); font-weight: 500;
}
.ls-more .icon { width: 18px; height: 18px; transition: transform var(--ease); }
.ls-more[aria-expanded="true"] .icon { transform: rotate(45deg); }

/* Steuerung: Zähler, Fortschritt, Pfeile */
.ls-ctrl { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.ls-count { flex: none; color: var(--on-surface-variant); }
.ls-count [data-ls-cur] { color: var(--text-heading); }
.ls-bar { position: relative; flex: 1; min-width: 48px; height: 2px; overflow: hidden; border-radius: var(--radius-full); background: var(--line-greige); }
.ls-bar span { position: absolute; inset: 0; background: var(--primary); transform-origin: left center; transform: scaleX(var(--ls-p, 0.17)); transition: transform var(--ease); }
.ls-arrows { display: flex; flex: none; gap: var(--space-xs); }
.ls-arrow {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-button);
  background: var(--surface-base); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); cursor: pointer;
  transition: background var(--ease), color var(--ease), opacity var(--ease);
}
.ls-arrow .icon { width: 20px; height: 20px; }
.ls-arrow--prev .icon { transform: scaleX(-1); }
.ls-arrow:hover { background: var(--primary); color: var(--on-primary); }
.ls-arrow[aria-disabled="true"] { opacity: 0.4; cursor: default; background: transparent; color: var(--primary); }

@media (hover: hover) and (pointer: fine) {
  .ls-track { cursor: grab; }
  .ls--v1 .ls-card:hover, .ls--v3 .ls-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
}

/* ---------- V1: Bild oben ---------- */
.ls--v1 .ls-card { width: clamp(280px, 26vw, 380px); }
/* Volltext als helle Fläche über dem Bild (gleiche Lage und Form wie das Bild): die Karte bleibt
   so kompakt wie mit Teaser, nichts springt. Im DOM steht der Text hinter dem Teaser. */
.ls--v1 .ls-full {
  position: absolute; z-index: 1; top: var(--space-xs); left: var(--space-xs); right: var(--space-xs); aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end; padding: var(--space-md); overflow: auto;
  border-radius: var(--radius-md); background: var(--tint-rose); color: var(--text-heading);
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.ls--v1 .ls-card.is-open .ls-full { visibility: visible; opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .ls--v1 .ls-card:hover .ls-full { visibility: visible; opacity: 1; transform: none; }
}

/* ---------- V2: Overlay ---------- */
.ls--v2 .ls-card { width: clamp(260px, 22vw, 330px); aspect-ratio: 3 / 4; justify-content: flex-end; border: 0; background: var(--anchor-deep); }
.ls--v2 .ls-card > img { position: absolute; inset: 0; }
.ls--v2 .ls-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ease);
  background: color-mix(in srgb, var(--anchor-deep) 60%, transparent);
}
.ls-ov {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-xl) var(--space-md) var(--space-sm);
  background: linear-gradient(to top, var(--anchor-deep) 0%, color-mix(in srgb, var(--anchor-deep) 94%, transparent) 45%, color-mix(in srgb, var(--anchor-deep) 60%, transparent) 75%, transparent 100%);
}
.ls--v2 .ls-card--cta .btn { padding-inline: var(--space-sm); }
.ls--v2 h3 { color: var(--inverse-on-surface); }
.ls--v2 .ls-more { color: var(--accent-gold-bright); }
.ls--v2 .ls-teaser { color: var(--inverse-on-surface); }
.ls--v2 .ls-full, .ls--v2 .ls-ov > p { color: var(--surface-dim); }
.ls--v2 .ls-card--cta .ls-ov { padding-bottom: var(--space-md); }
.ls--v2 :focus-visible { outline-color: var(--accent-gold-bright); }
.ls--v2 .ls-track:focus-visible { outline-color: var(--primary-container); }
.ls-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--ease), opacity var(--ease), visibility var(--ease); }
.ls-fold > p { min-height: 0; overflow: hidden; }
.ls-fold--full { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.ls--v2 .ls-card.is-open::after { opacity: 1; }
.ls-card.is-open .ls-fold--full { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.ls-card.is-open .ls-fold--teaser { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ls--v2 .ls-card:hover::after { opacity: 1; }
  .ls-card:hover .ls-fold--full { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .ls-card:hover .ls-fold--teaser { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
}
.ls--v2 .ls-more { margin-top: 0; }
.ls-head-ctrl { display: flex; align-items: center; gap: var(--space-md); justify-self: end; align-self: end; }
.ls-bar--wide { flex: none; width: 100%; margin-top: var(--space-sm); }

/* ---------- V3: Split-Schiene ---------- */
.ls3 { display: grid; grid-template-columns: clamp(260px, 25vw, 360px) minmax(0, 1fr); gap: var(--space-xl); padding-left: var(--ls-side); }
.ls3-head { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); min-width: 0; padding-block: var(--space-xs) var(--space-md); }
.ls3-cta { margin-top: var(--space-md); }
.ls-intro { margin-top: var(--space-sm); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.ls3-head .ls-ctrl { margin-top: 0; gap: var(--space-sm); }
.ls--v3 .ls-track { scroll-padding-inline: 0; }
.ls--v3 .ls-list { padding-inline: 0 var(--ls-side-vw); }
.ls--v3 .ls-card { width: clamp(400px, 36vw, 520px); }
.ls--v3 .ls-media { aspect-ratio: 16 / 10; }
.ls--v3 .ls-teaser { margin-bottom: 2px; }

@media (max-width: 899px) {
  .ls-head-ctrl { justify-self: start; }
  .ls3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-left: 0; }
  .ls3-head { padding: 0 var(--ls-side); gap: var(--space-md); }
  .ls--v3 .ls-track { scroll-padding-inline: var(--ls-side); }
  .ls--v3 .ls-list { padding-inline: var(--ls-side); }
  .ls--v3 .ls-card { width: clamp(300px, 62vw, 460px); }
}
@media (max-width: 767px) {
  .ls { --ls-gut: var(--space-margin-mobile); --ls-gap: 12px; }
  /* ca. 1,15 Karten sichtbar */
  .ls--v1 .ls-card, .ls--v2 .ls-card, .ls--v3 .ls-card { width: calc(100vw - 2 * var(--space-margin-mobile) - 40px); }
  .ls-card h3 { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
  .ls-body { padding: var(--space-sm) var(--space-sm) var(--space-xs); }
  .ls-ov { padding-inline: var(--space-sm); }
  .ls--v1 .ls-full { padding: var(--space-sm); }
  .ls-full { font-size: 15px; line-height: 22px; }
  .ls-ctrl { gap: var(--space-sm); }
  .ls-card--cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-card, .ls--v1 .ls-full, .ls-fold, .ls-bar span, .ls-more .icon, .ls-arrow, .ls--v2 .ls-card::after { transition: none; }
  .ls-card:hover { transform: none; }
}

/* Hero-Quiz: nach dem Start bleibt im Kopf nur der Titel */
.quiz[data-started] .quiz-head > :not(.quiz-title) { display: none; }
.quiz[data-started] .quiz-head { padding-bottom: var(--space-sm); }
.quiz-fwd { margin-left: auto; }
@media (max-width: 767px) { .quiz-fwd { order: -1; margin-left: 0; } }

/* Hero mobil, nach dem Muster meta.maxweber.group: Überschrift, kurzer Text, sofort die erste Frage.
   Erklärung und Etappen-Pfad im Quiz-Kopf entfallen, die Etappen stehen als Liste unter dem Quiz. */
.hero-checks { display: none; }
@media (max-width: 767px) {
  .hero-more, .hero-trust { display: none; }
  .quiz-head .quiz-sub, .quiz-head .quiz-path { display: none; }
  .quiz-head { padding-bottom: var(--space-sm); }
  .hero-checks { display: grid; gap: 10px; margin-top: var(--space-xs); padding: 0 var(--space-xs); }
  .hero-checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--inverse-on-surface); font-weight: 600; font-size: 15px; line-height: 22px; }
  .hero-checks .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--accent-gold-bright); }
}

/* Abschnitte mit Verbindungslinie am Label: Kante oben. Die Linie reicht bis an diese Kante;
   die genaue Länge misst ein Skript (--conn-h), der Fallback gilt für Abschnitte ohne Versatz. */
.sec:has(.lbl--conn) { border-top: 1px solid var(--outline-variant); }