/* 3dmensional.de – Stil „Studio“
   Werte aus konzept/designsystem/tokens.json, Regeln in konzept/designsystem/README.md.
   Nur heller Modus. Bewegung nur mit transform und opacity; ohne JavaScript und bei
   „prefers-reduced-motion: reduce“ ist alles sofort sichtbar. Laufband, Filme und Bühne laufen trotzdem. */

/* ------------------------------------------------------------------ Werte */
:root{
  color-scheme:light;
  --paper:#faf8f5;
  --surface:#ffffff;
  --sunk:#f2efe9;
  --line:#e4dfd6;
  --line-strong:#8a8f93;
  --ink:#1d262c;
  --ink-muted:#566068;
  --petrol:#008baa;
  --petrol-tief:#006e87;
  --petrol-dunkel:#00566b;
  --petrol-hell:#5cc3d9;
  --petrol-soft:#e2f1f4;
  --on-petrol:#ffffff;
  --on-ink:#faf8f5;
  --on-ink-muted:#b4c0c7;
  --fehler:#b3261e;
  --fehler-soft:#fbeae8;
  --erfolg:#1b6b45;
  --erfolg-soft:#e6f3ec;

  --display:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px; --r-pill:999px;
  --schatten-karte:0 1px 2px rgba(29,38,44,.04),0 8px 24px rgba(29,38,44,.06);
  --schatten-schwebend:0 2px 6px rgba(29,38,44,.06),0 24px 56px rgba(29,38,44,.14);

  --dauer:700ms; --dauer-kurz:220ms;
  --kurve:cubic-bezier(.2,.7,.2,1);
  --weg:28px; --staffel:80ms;

  --rand:16px; --max:1240px; --kopf-h:68px;
  --abschnitt:clamp(72px,10vw,136px);
}
@media (min-width:700px){:root{--rand:40px; --kopf-h:84px}}

/* ------------------------------------------------------------------ Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--kopf-h) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.6 var(--body); overflow-wrap:break-word; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:var(--petrol-tief); text-underline-offset:.18em; text-decoration-thickness:.08em}
a:hover{color:var(--petrol-dunkel)}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.022em; margin:0; text-wrap:balance}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em; padding-left:1.25em}
strong,b{font-weight:600}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--petrol-tief); outline-offset:3px; border-radius:6px}
::selection{background:var(--petrol-tief); color:var(--on-petrol)}
[hidden]{display:none !important}

.wrap{width:100%; max-width:calc(var(--max) + 2 * var(--rand)); margin-inline:auto; padding-inline:max(var(--rand),env(safe-area-inset-left)) max(var(--rand),env(safe-area-inset-right))}
.nw,.zahl{white-space:nowrap}
.zahl{font-variant-numeric:tabular-nums}
.nur-vorleser{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.sprung{position:absolute; left:16px; top:-80px; z-index:100; background:var(--ink); color:var(--on-ink); padding:12px 18px; border-radius:var(--r-pill); font-weight:600; text-decoration:none}
.sprung:focus{top:12px; color:var(--on-ink)}

/* Schriftgrade */
.display-xl{font-size:clamp(2.75rem,6.4vw,5.75rem); line-height:1; letter-spacing:-.03em}
.display-l{font-size:clamp(2.375rem,5.2vw,4.25rem); line-height:1.04; letter-spacing:-.028em}
h2,.heading-l{font-size:clamp(2rem,4.2vw,3.25rem)}
h3,.heading-m{font-size:clamp(1.4rem,2.2vw,1.75rem); line-height:1.15; letter-spacing:-.015em}
h4,.heading-s{font-size:1.1875rem; line-height:1.25; letter-spacing:-.01em}
.lead{font-size:clamp(1.125rem,1.5vw,1.3125rem); line-height:1.55; color:var(--ink-muted); max-width:36em}
.klein{font-size:.9375rem; line-height:1.5}
.gedaempft{color:var(--ink-muted)}
.label{display:inline-flex; align-items:center; gap:10px; font:600 .8125rem/1.3 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--petrol-tief); margin:0}
.label::before{content:""; width:10px; height:10px; flex:none; background:var(--petrol); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ------------------------------------------------------------------ Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px; border:0; border-radius:var(--r-pill); font:600 1rem/1 var(--body); text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dauer-kurz) ease,color var(--dauer-kurz) ease,box-shadow var(--dauer-kurz) ease,transform var(--dauer-kurz) var(--kurve)}
.btn:active{transform:scale(.97)}
.btn--haupt{background:var(--petrol-tief); color:var(--on-petrol)}
.btn--haupt:hover{background:var(--petrol-dunkel); color:var(--on-petrol)}
.btn--neben{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--neben:hover{background:var(--ink); color:var(--on-ink)}
.btn--hell{background:var(--surface); color:var(--ink)}
.btn--hell:hover{background:var(--petrol-soft); color:var(--ink)}
.btn--klein{min-height:46px; padding:0 20px; font-size:.9375rem}
.btn--pfeil::after,.mehr::after{content:""; width:18px; height:18px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--dauer-kurz) var(--kurve)}
.btn--pfeil:hover::after,.mehr:hover::after,a:hover>.mehr::after{transform:translateX(4px)}
.mehr--aussen::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mehr--aussen:hover::after{transform:translate(2px,-2px)}
.aktionen{display:flex; flex-wrap:wrap; gap:12px}
.mehr{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; text-decoration:none; color:var(--petrol-tief)}
.chip{display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font:600 .875rem/1 var(--body); white-space:nowrap}
.chip--sunk{background:var(--sunk)}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
a.chip{text-decoration:none; transition:background-color var(--dauer-kurz) ease}
a.chip:hover{background:var(--petrol-soft); color:var(--ink)}
.sprungliste{margin-top:28px}
.sprungliste .chip{min-height:44px; padding:0 18px; font-size:.9375rem}
.aktionen--unten{margin-top:clamp(24px,3vw,40px)}

/* ------------------------------------------------------------------ Icons
   Satz aus konzept/designsystem/ikonen/, auf der Seite über assets/ikonen/ikonen.svg. */
.ikon{width:24px; height:24px; flex:none; color:inherit}
.ikon-feld{display:grid; place-items:center; width:52px; height:52px; flex:none; border-radius:var(--r-m); background:var(--petrol-soft); color:var(--petrol-tief); margin-bottom:6px}
.ikon-feld .ikon{width:26px; height:26px}
.karte--petrol .ikon-feld,.kachel--haupt .ikon-feld{background:var(--surface)}
.abschnitt--dunkel .ikon-feld{background:rgba(250,248,245,.1); color:var(--petrol-hell)}

/* ------------------------------------------------------------------ Kopf */
.kopf{position:sticky; top:0; z-index:50; background:rgba(250,248,245,.93); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); transition:transform 420ms var(--kurve),box-shadow var(--dauer-kurz) ease}
.kopf--weg{transform:translateY(-101%)}
.kopf--schatten{box-shadow:0 1px 0 var(--line)}
.kopf__innen{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--kopf-h)}
.marke{display:inline-flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; color:var(--ink); flex:none}
.marke__zeichen{height:38px; width:auto; overflow:visible}
.marke__wort{height:15px; width:auto; color:var(--ink)}
@media (min-width:700px){.marke__zeichen{height:42px}.marke__wort{height:17px}.marke{gap:13px}}
.marke__zeichen polygon{transition:transform 480ms var(--kurve)}
.marke:hover .w0{transform:translateY(-4px)}
.marke:hover .w1{transform:translateY(-9px); transition-delay:50ms}
.marke:hover .w2{transform:translateY(-14px); transition-delay:100ms}
.marke--negativ .marke__wort{color:var(--on-ink)}

.nav{display:none; align-items:center; gap:2px; padding:4px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface)}
.nav>a,.nav__mehr{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 17px; border-radius:var(--r-pill); color:var(--ink); font:600 .9375rem/1 var(--body); text-decoration:none; white-space:nowrap; transition:background-color var(--dauer-kurz) ease}
.nav>a:hover,.nav__mehr:hover,.nav__gruppe:focus-within .nav__mehr{background:var(--sunk); color:var(--ink)}
.nav a[aria-current="page"]{background:var(--petrol-soft); color:var(--ink)}
.pfeil-unten{width:16px; height:16px; transition:transform var(--dauer-kurz) var(--kurve)}
.nav__gruppe{position:relative}
.nav__gruppe:hover .pfeil-unten,.nav__gruppe:focus-within .pfeil-unten{transform:rotate(180deg)}
.nav__feld{position:absolute; left:-4px; top:100%; width:348px; padding:8px; margin-top:12px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--schatten-schwebend); display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top left; transition:opacity var(--dauer-kurz) ease,transform var(--dauer-kurz) var(--kurve),visibility 0s linear var(--dauer-kurz)}
.nav__feld::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}
.nav__gruppe:hover .nav__feld,.nav__gruppe:focus-within .nav__feld{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.nav__feld a{display:grid; gap:3px; padding:13px 16px; border-radius:var(--r-m); text-decoration:none; color:var(--ink)}
.nav__feld a:hover,.nav__feld a[aria-current="page"]{background:var(--petrol-soft)}
.nav__feld b{font:600 1rem/1.3 var(--display); letter-spacing:-.01em}
.nav__feld span{font-size:.875rem; line-height:1.4; color:var(--ink-muted)}
.kopf__aktion{display:none}

.menue{position:static}
.menue summary{list-style:none; display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px 0 16px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); font:600 .9375rem/1 var(--body); cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none}
.menue summary::-webkit-details-marker{display:none}
.menue__linien{position:relative; width:18px; height:12px; flex:none}
.menue__linien i{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--ink); transition:transform 320ms var(--kurve),top 320ms var(--kurve)}
.menue__linien i:first-child{top:1px}
.menue__linien i:last-child{top:9px}
.menue[open] .menue__linien i:first-child{top:5px; transform:rotate(45deg)}
.menue[open] .menue__linien i:last-child{top:5px; transform:rotate(-45deg)}
.menue__feld{position:absolute; left:var(--rand); right:var(--rand); top:calc(100% + 4px); max-height:calc(100dvh - var(--kopf-h) - 24px); overflow:auto; overscroll-behavior:contain; padding:10px; border-radius:var(--r-l); background:var(--surface); box-shadow:var(--schatten-schwebend); display:grid; gap:10px}
.menue[open]::before{content:""; position:absolute; left:0; right:0; top:100%; height:100dvh; background:rgba(29,38,44,.32)}
@media (prefers-reduced-motion:no-preference){.menue[open]::before{animation:einblenden 320ms ease both}}
.menue__feld nav{display:grid}
.menue__feld nav a{display:flex; align-items:center; min-height:54px; padding:0 16px; border-radius:var(--r-m); color:var(--ink); font:600 1.25rem/1.2 var(--display); letter-spacing:-.01em; text-decoration:none}
.menue__feld nav a:hover,.menue__feld nav a[aria-current="page"]{background:var(--petrol-soft)}
@media (prefers-reduced-motion:no-preference){
  .menue[open] .menue__feld{animation:menue-auf 320ms var(--kurve) both}
  .menue[open] .menue__feld nav a,.menue[open] .menue__feld>.btn{animation:menue-punkt 420ms var(--kurve) both}
  .menue[open] .menue__feld nav a:nth-child(2){animation-delay:40ms}
  .menue[open] .menue__feld nav a:nth-child(3){animation-delay:80ms}
  .menue[open] .menue__feld nav a:nth-child(4){animation-delay:120ms}
  .menue[open] .menue__feld nav a:nth-child(5){animation-delay:160ms}
  .menue[open] .menue__feld nav a:nth-child(6){animation-delay:200ms}
  .menue[open] .menue__feld>.btn{animation-delay:240ms}
}
@keyframes menue-auf{from{opacity:0; transform:translateY(-10px) scale(.98)}to{opacity:1; transform:none}}
@keyframes menue-punkt{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (min-width:1000px){
  .nav{display:flex}
  .kopf__aktion{display:inline-flex}
  .menue{display:none}
}

/* Lesefortschritt (nur wo der Browser Scroll-Zeitleisten kann) */
.fortschritt{display:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .fortschritt{display:block; position:fixed; left:0; right:0; top:0; height:3px; z-index:60; background:var(--petrol); transform-origin:0 50%; transform:scaleX(0); animation:fortschritt linear both; animation-timeline:scroll(root block); pointer-events:none}
  }
}
@keyframes fortschritt{to{transform:scaleX(1)}}

/* ------------------------------------------------------------------ Abschnitte */
.abschnitt{padding-block:var(--abschnitt)}
.abschnitt--hell{background:var(--surface)}
.abschnitt--sunk{background:var(--sunk)}
.abschnitt--dunkel{background:var(--ink); color:var(--on-ink)}
.abschnitt--dunkel .label{color:var(--petrol-hell)}
.abschnitt--dunkel .label::before{background:var(--petrol-hell)}
.abschnitt--dunkel .lead,.abschnitt--dunkel .gedaempft{color:var(--on-ink-muted)}
.abschnitt--dunkel a{color:var(--petrol-hell)}
.abschnitt--dunkel :focus-visible{outline-color:var(--petrol-hell)}
.abschnitt--knapp{padding-block:clamp(48px,6vw,80px)}
.abschnitt--oben-knapp{padding-top:0}
.kopfzeile{max-width:780px; margin-bottom:clamp(36px,5vw,64px)}
.kopfzeile h2,.kopfzeile h1{margin-top:14px}
.kopfzeile .lead{margin-top:18px}
.kopfzeile--mitte{margin-inline:auto; text-align:center}
.kopfzeile--mitte .lead{margin-inline:auto}
.kopfzeile--reihe{display:grid; gap:20px; max-width:none}
@media (min-width:900px){.kopfzeile--reihe{grid-template-columns:1fr auto; align-items:end}}

/* ------------------------------------------------------------------ Einstieg (Startseite) */
.hero{padding-block:clamp(20px,3vw,40px) clamp(56px,7vw,104px); overflow:clip}
.hero__raster{display:grid; gap:clamp(32px,5vw,64px); align-items:center}
@media (min-width:1000px){.hero__raster{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.hero h1{margin:18px 0 24px}
.hero .lead{margin-bottom:32px}
.claim{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:40px 0 0; font:600 1rem/1 var(--display); color:var(--ink-muted)}
.claim li{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.claim li::before{content:""; width:9px; height:9px; background:var(--petrol); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

.buehne{position:relative; border-radius:var(--r-xl); background:var(--petrol-soft); overflow:hidden; aspect-ratio:1/1.22; isolation:isolate}
@media (min-width:560px){.buehne{aspect-ratio:1/1.04}}
.buehne::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 78% 8%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%)}
.buehne__bild{position:absolute; left:4%; top:1%; width:92%; height:74%; overflow:visible}
@media (min-width:560px){.buehne__bild{top:2%; height:84%}}
.buehne__marken{position:absolute; left:16px; right:16px; bottom:16px; display:flex; flex-wrap:wrap; gap:8px}
.buehne__marken .chip{min-height:40px; padding:0 16px; box-shadow:var(--schatten-karte)}
@media (min-width:700px){.buehne__marken{left:24px; right:24px; bottom:24px}}
/* Die Bühne druckt auch bei reduzierter Bewegung (Entscheidung vom 30.09.2026, wie Laufband und Filme) */
.buehne .schicht{opacity:0; animation:schicht 520ms var(--kurve) both; animation-delay:calc(var(--i) * 120ms + 500ms)}
.buehne__schatten{opacity:0; animation:einblenden 1.6s ease both; animation-delay:700ms}
.buehne__duese{animation:duese 2600ms cubic-bezier(.3,0,.2,1) both,duese-ruhe 5s ease-in-out 3200ms infinite alternate}
.buehne__mass{opacity:0; animation:einblenden 900ms ease both; animation-delay:2500ms}
.buehne__marken .chip{opacity:0; animation:hoch 700ms var(--kurve) both; animation-delay:1500ms}
.buehne__marken .chip+.chip{animation-delay:1620ms}
.buehne--ruht *{animation-play-state:paused !important}
@keyframes schicht{from{opacity:0; transform:translateY(-14px)}to{opacity:1; transform:none}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes hoch{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes duese{0%{transform:translateY(244px); opacity:0}12%{opacity:1}100%{transform:none; opacity:1}}
@keyframes duese-ruhe{from{transform:none}to{transform:translateY(-16px)}}

/* Laufband */
.laufband{overflow:hidden; padding-block:22px; border-block:1px solid var(--line); background:var(--surface)}
.laufband__spur{display:flex; width:max-content; gap:0}
.laufband ul{display:flex; flex:none; list-style:none; margin:0; padding:0}
.laufband li{display:flex; align-items:center; gap:28px; padding-right:28px; font:600 clamp(1.25rem,2.4vw,1.75rem)/1 var(--display); letter-spacing:-.015em; white-space:nowrap; color:var(--ink)}
.laufband li::after{content:""; width:11px; height:11px; background:var(--petrol); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* läuft auch bei reduzierter Bewegung (Entscheidung vom 30.09.2026); Überfahren oder Antippen hält es an */
.laufband__spur{animation:laufband 38s linear infinite}
.laufband:hover .laufband__spur,.laufband:active .laufband__spur{animation-play-state:paused}
@keyframes laufband{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ Zahlen */
.zahlen{display:grid; gap:1px; background:rgba(250,248,245,.14); border-radius:var(--r-l); overflow:hidden; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.zahlen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zahl-karte{background:var(--ink); padding:clamp(20px,3vw,36px) clamp(16px,2.4vw,32px); display:flex; flex-direction:column; gap:10px}
.zahl-karte b{font:700 clamp(2.25rem,5vw,4rem)/1 var(--display); letter-spacing:-.03em; color:var(--petrol-hell); font-variant-numeric:tabular-nums; white-space:nowrap}
.zahl-karte span{font-size:.9375rem; line-height:1.45; color:var(--on-ink-muted)}
.quelle{margin-top:20px; font-size:.875rem; color:var(--on-ink-muted); max-width:70ch}
.quelle--oben{margin-top:16px}
.zahlen--unten{margin-top:clamp(40px,6vw,72px)}
.abschnitt:not(.abschnitt--dunkel) .quelle{color:var(--ink-muted)}

/* ------------------------------------------------------------------ Leistungen */
.leistungen{display:grid; gap:16px}
@media (min-width:760px){.leistungen{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}}
@media (min-width:1100px){.leistungen{grid-template-columns:repeat(12,minmax(0,1fr))}
  .leistungen>.kachel--haupt{grid-column:span 6; grid-row:span 3}
  .leistungen>.kachel{grid-column:span 6}
  .leistungen>.kachel--drittel{grid-column:span 4}
}
.kachel{position:relative; display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.6vw,32px); border-radius:var(--r-l); background:var(--paper); color:var(--ink); text-decoration:none; overflow:hidden; isolation:isolate;
  transition:transform 420ms var(--kurve),box-shadow 420ms var(--kurve),background-color var(--dauer-kurz) ease}
.abschnitt:not(.abschnitt--hell) .kachel{background:var(--surface)}
a.kachel:hover{color:var(--ink); transform:translateY(-4px); box-shadow:var(--schatten-schwebend)}
.kachel--haupt{background:var(--petrol-soft) !important}
.kachel__titel{font-size:clamp(1.5rem,2.4vw,1.875rem); white-space:nowrap}
.kachel--haupt .kachel__titel{font-size:clamp(2rem,3.6vw,2.75rem)}
.kachel p:not(.label){margin:0; color:var(--ink-muted); max-width:34em}
.kachel--haupt p:not(.label){color:var(--ink); font-size:1.125rem}
.kachel__bild{width:100%; max-width:240px; height:auto; margin:-10px auto -4px; transition:transform 600ms var(--kurve)}
.kachel--haupt .kachel__bild{max-width:440px; margin-block:4px 8px}
.kachel--reihe .kachel__bild{order:-1}
a.kachel:hover .kachel__bild{transform:translateY(-6px) scale(1.03)}
.kachel .mehr{margin-top:auto; padding-top:6px}
.kachel--reihe{gap:8px}
/* Bild neben dem Text nur, wo die Kachel breit genug ist: einspaltig ab 560 px und im Zwölferraster ab 1100 px;
   zwischen 760 und 1099 px stehen zwei Kacheln nebeneinander, da bleibt das Bild oben */
@media (min-width:560px) and (max-width:759px), (min-width:1100px){
  .kachel--reihe{display:grid; grid-template-columns:minmax(0,1fr) 190px; grid-template-rows:auto auto auto; align-content:center; column-gap:16px; row-gap:10px}
  .kachel--reihe>*{grid-column:1}
  .kachel--reihe>.kachel__bild{grid-column:2; grid-row:1/span 3; align-self:center; margin:0; max-width:190px; order:0}
  .kachel--reihe .mehr{margin-top:0}
}
.hinweis-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:20px; padding:18px clamp(18px,2.4vw,28px); border-radius:var(--r-l); background:var(--paper); color:var(--ink-muted)}
.abschnitt:not(.abschnitt--hell) .hinweis-zeile{background:var(--surface)}
.hinweis-zeile b{color:var(--ink)}
.hinweis-zeile p{margin:0}
.hinweis-zeile--spalten{justify-content:space-between; margin-top:clamp(28px,4vw,48px)}
.hinweis-zeile .aktionen{gap:4px 28px}

/* ------------------------------------------------------------------ Ablauf */
.ablauf{position:relative; list-style:none; margin:0; padding:0; display:grid; gap:0}
.schritt{position:relative; padding:0 0 36px 64px}
.schritt:last-child{padding-bottom:0}
.schritt__nr{position:absolute; left:0; top:-2px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--petrol-tief); color:var(--on-petrol); font:700 .9375rem/1 var(--display); z-index:1}
.schritt::before,.schritt::after{content:""; position:absolute; left:21px; top:42px; bottom:-2px; width:2px; background:var(--line)}
.schritt::after{background:var(--petrol-tief); transform-origin:50% 0}
.schritt:last-child::before,.schritt:last-child::after{display:none}
.schritt__titel{font-size:1.375rem; white-space:nowrap; margin-bottom:8px}
.schritt p{margin:0; color:var(--ink-muted)}
@media (min-width:1000px){
  .ablauf{grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px}
  .schritt{padding:72px 0 0}
  .schritt__nr{top:0}
  .schritt::before,.schritt::after{left:52px; right:-24px; top:21px; bottom:auto; width:auto; height:2px; transform-origin:0 50%}
}
@media (prefers-reduced-motion:no-preference){
  .js .ablauf .schritt__nr{transition:background-color 500ms ease,color 500ms ease,box-shadow 500ms ease,transform 600ms var(--kurve); transition-delay:calc(var(--i,0) * 260ms + 250ms)}
  .js .ablauf .schritt::after{transition:transform 700ms var(--kurve); transition-delay:calc(var(--i,0) * 260ms + 450ms)}
  .js .ablauf:not(.ist-da) .schritt__nr{background:var(--surface); color:var(--petrol-tief); box-shadow:inset 0 0 0 1.5px var(--line); transform:scale(.86)}
  .js .ablauf:not(.ist-da) .schritt::after{transform:scaleY(0)}
  @media (min-width:1000px){.js .ablauf:not(.ist-da) .schritt::after{transform:scaleX(0)}}
}

.preis{margin-top:clamp(40px,6vw,72px); border-radius:var(--r-l); background:var(--sunk); padding:clamp(24px,3.4vw,44px); display:grid; gap:24px}
.abschnitt--sunk .preis{background:var(--surface)}
@media (min-width:1000px){.preis{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:48px}}
.preis h3,.preis h2{margin-bottom:12px}
.preis--oben{margin-top:0}
.preis p{color:var(--ink-muted)}
.faktoren{list-style:none; margin:0; padding:0; display:grid; gap:0}
.faktoren li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 14px; padding:14px 0; border-top:1px solid var(--line)}
.faktoren .ikon{grid-row:1/span 2; color:var(--petrol-tief); margin-top:-1px}
.faktoren span{grid-column:2}
.faktoren li:first-child{border-top:0; padding-top:0}
.faktoren b{font:600 1.0625rem/1.3 var(--display)}
.faktoren span{color:var(--ink-muted); font-size:.9375rem; line-height:1.5}
@media (min-width:700px){.faktoren li{grid-template-columns:28px 196px minmax(0,1fr); gap:14px; align-items:start}.faktoren .ikon{grid-row:auto}.faktoren span{grid-column:3}}

/* ------------------------------------------------------------------ Materialien */
.materialien{display:grid; gap:16px}
@media (min-width:640px){.materialien{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.materialien{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}}
.material{display:flex; flex-direction:column; gap:14px; padding:clamp(20px,2.2vw,28px); border-radius:var(--r-l); background:var(--surface)}
.abschnitt--hell .material{background:var(--paper)}
.material__kopf{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.material__kopf h3{font-size:1.75rem}
.material__kopf span{display:inline-flex; align-items:center; gap:6px; font-size:.875rem; color:var(--ink-muted); white-space:nowrap}
.material__kopf .ikon{width:20px; height:20px; color:var(--petrol-tief)}
.material dl{margin:0; display:grid; gap:10px}
.material dt{font:600 .8125rem/1.3 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--petrol-tief)}
.material dd{margin:2px 0 0; font-size:.9375rem; line-height:1.5; color:var(--ink-muted)}
.skala{display:grid; gap:9px; margin-top:auto; padding-top:6px}
.skala div{display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:12px; font-size:.875rem; color:var(--ink-muted)}
.skala i{display:block; height:6px; border-radius:6px; background:var(--line); overflow:hidden; position:relative}
.skala i::after{content:""; position:absolute; inset:0; border-radius:6px; background:var(--petrol); transform-origin:0 50%; transform:scaleX(var(--w,0))}
.js .skala i::after{transform:scaleX(0); transition:transform 1100ms var(--kurve) 200ms}
.js .ist-da .skala i::after,.js .skala.ist-da i::after{transform:scaleX(var(--w,0))}
@media (prefers-reduced-motion:reduce){.js .skala i::after{transform:scaleX(var(--w,0)); transition:none}}

/* ------------------------------------------------------------------ Portfolio */
.stuecke{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.stuecke{grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px}
  .stuecke>.stueck:nth-child(1){grid-column:span 5; grid-row:span 2}
  .stuecke>.stueck:nth-child(n+2){grid-column:span 7}
  .stuecke>.stueck:nth-child(1) .stueck__bild{aspect-ratio:auto; height:100%}
  .stuecke>.stueck:nth-child(n+2) .stueck__bild{aspect-ratio:2/1}
}
@media (max-width:999px){.stuecke:not(.stuecke--raster)>.stueck:first-child{grid-column:1/-1}.stuecke:not(.stuecke--raster)>.stueck:first-child .stueck__bild{aspect-ratio:4/3}}
.stuecke--raster{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.stuecke--raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stuecke--raster>.stueck:nth-child(n){grid-column:auto; grid-row:auto}
  .stuecke--raster>.stueck:nth-child(n) .stueck__bild{aspect-ratio:4/3; height:auto}
}
.stueck{margin:0; display:flex; flex-direction:column; min-width:0}
.stueck__bild{position:relative; flex:1 1 auto; border-radius:var(--r-l); overflow:hidden; aspect-ratio:1; background:var(--sunk); isolation:isolate}
.stueck__bild img{width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--kurve)}
/* Filme: stumm, in Schleife, autoplay ohne Bedienleiste; laufen nur im Bild, Antippen hält sie an (assets/js/seite.js). Beim Datensparen bleibt das Vorschaubild mit Bedienleiste. */
.stueck__bild video,.duo__bild video,.karte__bild video,.seitenkopf__foto video{display:block; width:100%; height:100%; object-fit:cover; background:var(--ink); cursor:pointer}
video[data-film]:focus-visible{outline:3px solid var(--petrol-hell); outline-offset:-4px}
.stueck:hover .stueck__bild img{transform:scale(1.045)}
.stueck figcaption{flex:none; padding:14px 4px 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 14px}
.stueck figcaption b{font:700 1.0625rem/1.3 var(--display); letter-spacing:-.01em}
.stueck figcaption span{font-size:.875rem; color:var(--ink-muted)}
.stueck .urheber a{display:inline; min-height:0; text-decoration:underline; text-underline-offset:3px}
.stueck .urheber a::after{content:none}
.stueck .urheber{display:block; padding-top:6px}
.stueck figcaption:has(.urheber){padding-top:14px; align-items:flex-start}
.stueck:has(.urheber) .stueck__bild{flex:none}
.stueck a{display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none}
.stueck figcaption:has(a){padding-top:4px; align-items:center}
.abschnitt--dunkel .stueck figcaption span{color:var(--on-ink-muted)}
.abschnitt--dunkel .stueck__bild{background:#2a343b}
.stueck a::after{content:""; position:absolute; inset:0; z-index:2}
.stueck{position:relative}

.stueck__bild--hoch{aspect-ratio:3/4}
.stueck__bild--quer{aspect-ratio:4/3}
.stueck__bild--breit{aspect-ratio:2/1}
.stueck__marke{position:absolute; left:12px; top:12px; z-index:3}
/* Bildstreifen: auf dem Handy seitlich zu wischen, ab 700 px nebeneinander */
.streifen{display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--rand) * -1); padding-inline:var(--rand); scroll-padding-inline:var(--rand)}
.streifen::-webkit-scrollbar{display:none}
.streifen>*{scroll-snap-align:start}
@media (min-width:700px){.streifen{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; overflow:visible; margin-inline:0; padding-inline:0}
  .streifen--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kopfzeile--folge{margin-top:clamp(56px,8vw,104px)}
.streifen--4 figcaption{flex-direction:column; align-items:flex-start; gap:2px}

/* ------------------------------------------------------------------ Bild neben Text */
.duo{display:grid; gap:clamp(28px,5vw,72px); align-items:center}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}.duo--gedreht>:first-child{order:2}}
.duo__bild{border-radius:var(--r-xl); overflow:hidden; background:var(--sunk); aspect-ratio:1}
.duo__bild img{width:100%; height:100%; object-fit:cover}
.duo h2{margin:14px 0 18px}
.duo .aktionen{margin-top:28px}
.duo h3{margin-bottom:14px}
.werk+.werk{margin-top:clamp(56px,8vw,112px)}
.werk .datenblatt{margin-top:24px; max-width:520px}
.werk .aktionen{margin-top:18px; gap:4px 28px}
.duo--abstand{margin-top:clamp(40px,6vw,80px)}
.duo__bild--quer{aspect-ratio:4/3}
.duo__bild--hoch{aspect-ratio:3/4}
.duo__bild--film{aspect-ratio:1080/662}

/* ------------------------------------------------------------------ Fragen */
.fragen{display:grid; gap:10px; max-width:860px}
.frage{border-radius:var(--r-m); background:var(--surface); transition:box-shadow var(--dauer-kurz) ease}
.abschnitt--hell .frage{background:var(--paper)}
.frage[open]{box-shadow:var(--schatten-karte)}
.frage summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:12px 20px 12px 22px; cursor:pointer; font:600 1.125rem/1.3 var(--display); letter-spacing:-.01em; -webkit-tap-highlight-color:transparent}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:""; flex:none; width:32px; height:32px; border-radius:50%; background:var(--sunk) no-repeat center/18px 18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%231d262c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition:transform 360ms var(--kurve)}
.frage[open] summary::after{transform:rotate(135deg)}
.frage__antwort{padding:0 22px 22px; color:var(--ink-muted); max-width:46em}
@media (prefers-reduced-motion:no-preference){.frage[open] .frage__antwort{animation:hoch 420ms var(--kurve) both}}

/* ------------------------------------------------------------------ Aufruf */
.aufruf{position:relative; border-radius:var(--r-xl); background:var(--petrol-tief); color:var(--on-petrol); padding:clamp(32px,6vw,88px) clamp(22px,5vw,80px); overflow:hidden; isolation:isolate; display:grid; gap:28px}
.aufruf h2{font-size:clamp(2rem,4.6vw,3.75rem); max-width:14em}
.aufruf p{font-size:clamp(1.0625rem,1.4vw,1.25rem); max-width:32em; color:var(--on-petrol); margin:0}
.aufruf :focus-visible{outline-color:var(--on-petrol)}
.aufruf__zier{position:absolute; right:-4%; bottom:-22%; width:min(46%,420px); height:auto; z-index:-1; opacity:.9}
@media (max-width:699px){.aufruf__zier{width:38%; right:-6%; bottom:-10%; opacity:.5}.aufruf{padding-bottom:88px}}

/* ------------------------------------------------------------------ Seitenkopf der Unterseiten */
.seitenkopf{padding-block:clamp(28px,5vw,72px) clamp(40px,6vw,88px)}
.seitenkopf__raster{display:grid; gap:clamp(24px,4vw,56px); align-items:center}
@media (min-width:1000px){.seitenkopf__raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.seitenkopf h1{margin:16px 0 22px; max-width:15em}
.seitenkopf--knapp{padding-bottom:clamp(28px,4vw,48px)}
.seitenkopf--allein{padding-block:clamp(48px,9vw,128px)}
.seitenkopf .haken--liste{margin-top:24px; max-width:44em}
.seitenkopf__foto--quadrat{aspect-ratio:1}
.seitenkopf .aktionen{margin-top:30px}
.seitenkopf__bild{border-radius:var(--r-xl); background:var(--petrol-soft); padding:clamp(12px,3vw,32px); display:grid; place-items:center}
.seitenkopf__bild img{width:100%; max-width:460px}
.seitenkopf__foto{border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3; background:var(--sunk)}
.seitenkopf__foto img{width:100%; height:100%; object-fit:cover}
.pfad{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 6px; padding:0; font-size:.875rem; color:var(--ink-muted)}
.pfad a{color:var(--ink-muted)}
.pfad li+li::before{content:"/"; margin-right:6px; color:var(--line-strong)}

/* ------------------------------------------------------------------ Karten, Listen, Tabellen */
.karten{display:grid; gap:16px}
@media (min-width:700px){.karten{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}}
@media (min-width:1100px){.karten--3{grid-template-columns:repeat(3,minmax(0,1fr))}.karten--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.karten--abstand{margin-top:clamp(32px,5vw,56px)}
.karte{display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2.4vw,30px); border-radius:var(--r-l); background:var(--surface)}
.abschnitt--hell .karte{background:var(--paper)}
.karte h3{font-size:1.375rem}
.karte p{margin:0; color:var(--ink-muted)}
.karte--petrol{background:var(--petrol-soft) !important}
.karte--petrol p{color:var(--ink)}
.karte ul{margin:0; color:var(--ink-muted)}
.haken,.kreuze{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.haken li,.kreuze li{position:relative; padding-left:32px; color:var(--ink-muted)}
.haken li::before,.kreuze li::before{content:""; position:absolute; left:0; top:.18em; width:22px; height:22px; border-radius:50%; background:var(--petrol-soft) no-repeat center/15px 15px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23006e87' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.kreuze li.ist-grund{color:var(--ink); font-weight:600}
.kreuze li::before{background-color:var(--sunk); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='%23566068' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.karte--petrol .haken li::before{background-color:var(--surface)}
.karte .mehr{margin-top:auto}
.karte__fuss{margin-top:auto !important; padding-top:8px}
.karte>.werbung{align-self:flex-start; margin-bottom:4px}
.karte--bild{padding:12px 12px clamp(22px,2.4vw,30px)}
.karte--bild>:not(.karte__bild){padding-inline:clamp(10px,1.4vw,18px)}
.karte__bild{border-radius:calc(var(--r-l) - 8px); overflow:hidden; aspect-ratio:16/10; background:var(--sunk); margin-bottom:10px}
.karte__bild img{width:100%; height:100%; object-fit:cover}
@media (min-width:1100px){.karten--4 .karte__bild{aspect-ratio:4/5}}
.zaehlliste{list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:z}
.zaehlliste li{position:relative; padding-left:40px; counter-increment:z; color:var(--ink)}
.zaehlliste li::before{content:counter(z); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--petrol-tief); font:700 .875rem/1 var(--display)}
aside{display:grid; gap:16px}
.breitbild{margin:0 0 clamp(20px,3vw,32px)}
.breitbild__bild{border-radius:var(--r-l); overflow:hidden; aspect-ratio:2/1; background:var(--sunk)}
.breitbild img{width:100%; height:100%; object-fit:cover}
.breitbild figcaption{margin-top:10px; font-size:.875rem; color:var(--ink-muted)}

.tabelle-huelle{border-radius:var(--r-l); background:var(--surface); overflow:hidden}
.abschnitt--hell .tabelle-huelle{background:var(--paper)}
.tabelle th,.tabelle td{text-align:left; vertical-align:top; padding:16px 20px; border-top:1px solid var(--line); font-size:.9375rem; line-height:1.5}
.tabelle thead th{border-top:0; font:600 .8125rem/1.3 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--petrol-tief); white-space:nowrap; background:var(--sunk)}
.tabelle tbody th{font:700 1.125rem/1.3 var(--display); white-space:nowrap}
.tabelle td{color:var(--ink-muted)}
@media (max-width:899px){
  .tabelle thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle th,.tabelle td{display:block}
  .tabelle tr{padding:20px; border-top:1px solid var(--line)}
  .tabelle tr:first-child{border-top:0}
  .tabelle th,.tabelle td{padding:0; border:0}
  .tabelle tbody th{font-size:1.375rem; margin-bottom:10px}
  .tabelle td{display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding-top:10px}
  .tabelle td::before{content:attr(data-kopf); font:600 .8125rem/1.3 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--petrol-tief)}
}
.fussnote{margin-top:18px; font-size:.875rem; line-height:1.5; color:var(--ink-muted); max-width:70ch}

.datenblatt{margin:0; display:grid; gap:0}
.datenblatt div{display:grid; gap:2px; padding:14px 0; border-top:1px solid var(--line)}
.datenblatt div:first-child{border-top:0; padding-top:0}
.datenblatt dt{font-size:.875rem; color:var(--ink-muted)}
.datenblatt dd{margin:0; font:600 1.0625rem/1.45 var(--display)}
.datenblatt--luft{margin-top:28px}
.duo .quelle,.duo .fussnote{margin-top:14px}
@media (min-width:560px){.datenblatt div{grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:baseline}}

.platzhalter{position:relative; display:grid; place-items:center; align-content:center; gap:6px; min-height:220px; padding:24px; border-radius:var(--r-l); border:2px dashed var(--line-strong); background:var(--sunk); color:var(--ink-muted); text-align:center; font-size:.9375rem}
.platzhalter b{font:700 1rem/1.3 var(--display); color:var(--ink)}
.platzhalter-text{background:var(--petrol-soft); border-radius:6px; padding:1px 8px; font-weight:600; color:var(--ink)}

/* ------------------------------------------------------------------ Lesetext (Rechtliches, lange Texte) */
.text{max-width:46em}
.text h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:2.2em 0 .6em}
.text h2:first-child{margin-top:0}
.text h3{font-size:1.25rem; margin:1.8em 0 .5em}
.text p,.text li{color:var(--ink)}
.text ul,.text ol{display:grid; gap:6px}
.text address{font-style:normal; margin:0 0 1em}
.stand{font-size:.875rem; color:var(--ink-muted)}
.kasten{border-radius:var(--r-l); background:var(--petrol-soft); padding:clamp(20px,2.4vw,28px); margin:0 0 28px}
.kasten--sunk{background:var(--sunk)}
.kasten p{color:var(--ink)}
.kasten--frei{margin-bottom:0}
/* Verweisliste der Empfehlungen: je Eintrag Name, ein Satz, gekennzeichneter Verweis */
.verweise{list-style:none; margin:0; padding:0; display:grid; gap:12px}
@media (min-width:700px){.verweise{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}}
@media (min-width:1100px){.verweise{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}}
.verweis{display:flex; flex-direction:column; gap:6px; padding:12px 12px 8px; border-radius:var(--r-l); background:var(--surface)}
.verweis>:not(.verweis__bild){margin-inline:clamp(8px,1.2vw,14px)}
.verweis__bild{display:grid; place-items:center; height:112px; margin-bottom:10px; border-radius:calc(var(--r-l) - 8px); overflow:hidden; background:var(--petrol-soft); color:var(--petrol-tief)}
.verweis__bild .ikon{width:60px; height:60px}
.verweis__bild--foto{height:auto; aspect-ratio:16/10; background:var(--sunk)}
.verweis__bild img{width:100%; height:100%; object-fit:cover}
.abschnitt--hell .verweis{background:var(--paper)}
/* Auf dem Handy Zeichnung links neben Titel und Text, sonst wird die Liste mit 39 Karten sehr lang */
@media (max-width:699px){
  .verweis{display:grid; grid-template-columns:100px minmax(0,1fr); column-gap:14px; row-gap:4px; align-items:start; padding:12px 14px 12px 12px}
  .verweis>.verweis__bild{grid-column:1; grid-row:1/span 2; height:auto; aspect-ratio:1; margin:0}
  .verweis>:not(.verweis__bild){grid-column:2; margin-inline:0}
  .verweis>h3{margin-top:4px}
  .verweis>.mehr{grid-column:1/span 2}
}
.verweis h3{font-size:1.1875rem; line-height:1.3}
.verweis p{margin:0; font-size:.9375rem; line-height:1.5; color:var(--ink-muted)}
.verweis .mehr{margin-top:auto; align-self:flex-start}
.hinweis-zeile--oben{margin-top:0}
.abschnitt--unten-knapp{padding-bottom:0}
.werbung{display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:var(--r-pill); background:var(--ink); color:var(--on-ink); font:600 .8125rem/1 var(--body); letter-spacing:.04em; white-space:nowrap}

/* ------------------------------------------------------------------ Formular */
.formular{display:grid; gap:clamp(28px,4vw,40px)}
.formular fieldset{border:0; margin:0; padding:0; min-width:0; display:grid; gap:18px}
.formular legend{padding:0; margin-bottom:18px; font:700 1.375rem/1.2 var(--display); letter-spacing:-.015em}
.formular legend span{display:inline-grid; place-items:center; width:32px; height:32px; margin-right:10px; border-radius:50%; background:var(--petrol-soft); color:var(--petrol-tief); font-size:.9375rem; vertical-align:2px}
.feldreihe{display:grid; gap:18px}
@media (min-width:700px){.feldreihe{grid-template-columns:repeat(2,minmax(0,1fr))}.feldreihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feld{display:grid; gap:7px; align-content:start; min-width:0}
.feld label,.feld__titel{font:600 .9375rem/1.3 var(--body)}
.feld small{font-size:.875rem; line-height:1.45; color:var(--ink-muted)}
.feld input,.feld select,.feld textarea{width:100%; min-height:54px; padding:14px 16px; border:1.5px solid var(--line-strong); border-radius:var(--r-m); background:var(--surface); color:var(--ink); font:400 1.0625rem/1.4 var(--body); -webkit-appearance:none; appearance:none; transition:border-color var(--dauer-kurz) ease,box-shadow var(--dauer-kurz) ease}
.feld textarea{min-height:150px; resize:vertical}
.feld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231d262c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--ink)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--petrol-tief); outline-offset:2px; border-color:var(--petrol-tief)}
.feld input:focus:not(:focus-visible),.feld select:focus:not(:focus-visible),.feld textarea:focus:not(:focus-visible){outline:0; border-color:var(--petrol-tief); box-shadow:0 0 0 4px var(--petrol-soft)}
.feld .feld__fehler{margin:0}
.feld--fehler input,.feld--fehler select,.feld--fehler textarea{border-color:var(--fehler)}
.feld__fehler{font-size:.875rem; font-weight:600; color:var(--fehler)}
.auswahl{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.auswahl label{position:relative; display:block; cursor:pointer}
.auswahl input{position:absolute; opacity:0; width:1px; height:1px}
.auswahl span{display:flex; align-items:center; gap:10px; min-height:54px; height:100%; padding:10px 16px; border:1.5px solid var(--line-strong); border-radius:var(--r-m); background:var(--surface); font:600 .9375rem/1.3 var(--body); transition:border-color var(--dauer-kurz) ease,background-color var(--dauer-kurz) ease}
.auswahl span::before{content:""; flex:none; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-strong); transition:box-shadow var(--dauer-kurz) ease}
.auswahl label:hover span{border-color:var(--ink)}
.auswahl input:checked+span{border-color:var(--petrol-tief); background:var(--petrol-soft)}
.auswahl input:checked+span::before{box-shadow:inset 0 0 0 6px var(--petrol-tief)}
.auswahl input:focus-visible+span{outline:3px solid var(--petrol-tief); outline-offset:3px}
.haekchen{display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px; align-items:start; min-height:44px; padding:6px 0; cursor:pointer; font-size:.9375rem; line-height:1.5}
.haekchen input{width:24px; height:24px; margin:1px 0 0; accent-color:var(--petrol-tief)}
.ablage{position:relative; display:grid; justify-items:center; gap:6px; padding:clamp(22px,3vw,36px) 20px; border:2px dashed var(--line-strong); border-radius:var(--r-l); background:var(--surface); text-align:center; cursor:pointer; transition:border-color var(--dauer-kurz) ease,background-color var(--dauer-kurz) ease}
.ablage:hover,.ablage--ueber{border-color:var(--petrol-tief); background:var(--petrol-soft)}
.ablage:focus-within{outline:3px solid var(--petrol-tief); outline-offset:3px}
.ablage input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.ablage b{font:700 1.125rem/1.3 var(--display)}
.ablage span{font-size:.875rem; color:var(--ink-muted); max-width:36em}
.ablage__bild{width:40px; height:40px; color:var(--petrol-tief)}
.dateien{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.dateien li{display:flex; align-items:center; gap:4px; border-radius:var(--r-m); background:var(--sunk); font-size:.9375rem; transition:background-color var(--dauer-kurz) ease,box-shadow var(--dauer-kurz) ease}
.dateien li span{color:var(--ink-muted); white-space:nowrap}
.dateien li b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.dateien li.zu-gross{background:var(--fehler-soft); color:var(--fehler)}
.dateien li.zu-gross span{color:var(--fehler)}
.dateien li.ist-aktiv{background:var(--petrol-soft); box-shadow:inset 0 0 0 1.5px var(--petrol-tief)}
.datei__wahl{flex:1; min-width:0; display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 8px 6px 14px; border:0; border-radius:var(--r-m); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.datei__wahl .ikon{width:22px; height:22px; color:var(--petrol-tief)}
.datei__wahl b{flex:1}
.datei__weg{display:grid; place-items:center; flex:none; width:44px; height:44px; margin-right:2px; border:0; border-radius:50%; background:none; color:var(--ink-muted); cursor:pointer; transition:background-color var(--dauer-kurz) ease,color var(--dauer-kurz) ease}
.datei__weg:hover{background:var(--surface); color:var(--fehler)}
.datei__weg .ikon{width:20px; height:20px}
/* Vorschau: feste Größe, damit nichts springt, wenn eine andere Datei an der Reihe ist */
.vorschau{display:grid; gap:10px}
.vorschau__buehne{position:relative; aspect-ratio:4/3; border-radius:var(--r-l); background:var(--sunk); overflow:hidden; isolation:isolate}
@media (max-width:519px){.vorschau__buehne{aspect-ratio:1/1}.vorschau__zustand{padding-inline:58px}.vorschau__zustand b{font-size:1rem}}
.vorschau__buehne:focus-visible{outline:3px solid var(--petrol-tief); outline-offset:3px}
.vorschau__leinwand{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab}   /* ein Finger scrollt die Seite, zwei Finger drehen und zoomen */
.vorschau__leinwand:active{cursor:grabbing}
.vorschau__zustand{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; padding:24px 64px; text-align:center; background:var(--sunk)}
.vorschau__zustand[hidden]{display:none}
.vorschau__zustand .ikon{width:40px; height:40px; color:var(--petrol-tief)}
.vorschau__zustand b{font:700 1.0625rem/1.3 var(--display); max-width:24em}
.vorschau__zustand span{font-size:.875rem; color:var(--ink-muted); max-width:30em}
.vorschau__zustand--warnung .ikon,.vorschau__zustand--warnung b{color:var(--fehler)}
.vorschau__zustand--laedt .ikon{animation:vorschau-atmen 1.4s ease-in-out infinite alternate}
@keyframes vorschau-atmen{from{opacity:.35}to{opacity:1}}
.vorschau__zaehler,.vorschau__mass{position:absolute; left:12px; box-shadow:var(--schatten-karte); pointer-events:none; font-variant-numeric:tabular-nums}
.vorschau__zaehler{top:12px}
.vorschau__mass{bottom:12px}
.vorschau__knopf{position:absolute; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:var(--schatten-karte); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color var(--dauer-kurz) ease,transform var(--dauer-kurz) var(--kurve)}
.vorschau__knopf:hover{background:var(--petrol-soft)}
.vorschau__knopf:active{transform:scale(.94)}
.vorschau__knopf[hidden]{display:none}
.vorschau__knopf .ikon{width:22px; height:22px}
.vorschau__knopf--oben{top:8px; right:8px}
.vorschau__knopf--zurueck,.vorschau__knopf--weiter{top:50%; margin-top:-22px}
.vorschau__knopf--zurueck{left:8px}
.vorschau__knopf--zurueck .ikon{transform:scaleX(-1)}
.vorschau__knopf--weiter{right:8px}
.vorschau__bedienung{margin:0; min-height:1.5em}
@media (prefers-reduced-motion:reduce){.vorschau__zustand--laedt .ikon{animation:none}}
.falle{position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.meldung{border-radius:var(--r-l); padding:20px 24px; font-weight:600}
.meldung--gut{background:var(--erfolg-soft); color:var(--erfolg)}
.meldung--fehler{background:var(--fehler-soft); color:var(--fehler)}
.meldung p{font-weight:400; color:var(--ink); margin:6px 0 0}
.formular__ende{display:grid; gap:16px; justify-items:start}
.btn[disabled]{opacity:.55; cursor:progress}
.balken{width:100%; max-width:360px; height:6px; border-radius:6px; background:var(--line); overflow:hidden}
.balken i{display:block; height:100%; width:100%; background:var(--petrol-tief); transform-origin:0 50%; transform:scaleX(0); transition:transform 200ms linear}
.anfrage-raster{display:grid; gap:clamp(28px,5vw,64px); align-items:start}
@media (min-width:1000px){.anfrage-raster{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}.anfrage-raster aside{position:sticky; top:calc(var(--kopf-h) + 24px)}}
.formular-karte{border-radius:var(--r-xl); background:var(--surface); padding:clamp(20px,4vw,48px); box-shadow:var(--schatten-karte)}

/* ------------------------------------------------------------------ Fuß */
.fuss{background:var(--ink); color:var(--on-ink-muted); padding-block:clamp(48px,7vw,88px) 28px; font-size:.9375rem}
.fuss :focus-visible{outline-color:var(--petrol-hell)}
.fuss a{color:var(--on-ink); text-decoration:none}
.fuss a:hover{color:var(--petrol-hell)}
.fuss__oben{display:grid; gap:36px 24px; grid-template-columns:repeat(2,minmax(0,1fr))}
.fuss__marke{grid-column:1/-1}
.fuss__marke p{margin:0 0 12px; line-height:1.55}
.fuss__claim{font:600 1.125rem/1.3 var(--display); color:var(--on-ink); margin-top:14px !important}
.fuss__post{display:inline-flex; align-items:center; min-height:44px; font-weight:600}
@media (min-width:1000px){.fuss__oben{grid-template-columns:1.6fr 1fr 1fr 1fr}.fuss__marke{grid-column:auto}}
.fuss .label{color:var(--on-ink-muted); margin-bottom:8px; font-family:var(--body)}
.fuss .label::before{background:var(--petrol-hell)}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li a{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap}
.fuss__unten{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px; margin-top:clamp(36px,5vw,64px); padding-top:20px; border-top:1px solid rgba(250,248,245,.16)}
.fuss__unten p{margin:0}
.fuss__unten ul{display:flex; flex-wrap:wrap; gap:0 22px}
/* Bewegung anhalten: hält Laufband, Bühne und Filme an (assets/js/seite.js); ohne Skript ausgeblendet */
.ruhe-schalter{display:none; align-items:center; min-height:44px; padding:0 16px; border:1px solid rgba(250,248,245,.35); border-radius:var(--r-pill); background:transparent; color:var(--on-ink); font:600 .875rem/1 var(--body); cursor:pointer}
.js .ruhe-schalter{display:inline-flex}
.ruhe-schalter:hover,.ruhe-schalter[aria-pressed="true"]{background:rgba(250,248,245,.12)}
.ruhe .laufband__spur,.ruhe .buehne *{animation-play-state:paused !important}
@media (max-width:999px){html.menue-offen{overflow:hidden}}

/* ------------------------------------------------------------------ Einblenden beim Scrollen
   Die Klasse .js setzt assets/js/start.js im <head>. Ohne sie ist alles sichtbar. */
@media (prefers-reduced-motion:no-preference){
  .js [data-ein],.js [data-ein-folge]>*{opacity:0; transform:translateY(var(--weg)); transition:opacity var(--dauer) ease,transform var(--dauer) var(--kurve); transition-delay:calc(var(--i,0) * var(--staffel)); will-change:opacity,transform}
  .js [data-ein="zoom"]{transform:scale(.94)}
  .js [data-ein="ruhig"]{transform:none}
  .js [data-ein].ist-da,.js [data-ein-folge].ist-da>*,.js [data-ein-folge]>.ist-da{opacity:1; transform:none}
  .js .ist-fertig{will-change:auto}
  .js .ohne-weg,.js .ohne-weg>*,.js .ohne-weg .wort>span,.js .ohne-weg img{transition:none !important}
  /* Überschrift Wort für Wort */
  .js [data-zeilen] .wort{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em}
  .js [data-zeilen] .wort>span{display:inline-block; transform:translateY(112%); transition:transform 900ms var(--kurve); transition-delay:calc(var(--i,0) * 70ms + 80ms)}
  .js [data-zeilen].ist-da .wort>span{transform:none}
  /* Bilder: leichtes Heranfahren */
  .js [data-ein="bild"]{transform:none}
  .js [data-ein="bild"] img{transform:scale(1.12); transition:transform 1400ms var(--kurve)}
  .js [data-ein="bild"].ist-da img{transform:scale(1)}
  .js .stueck:hover [data-ein="bild"].ist-da img{transform:scale(1.045); transition-duration:900ms}
}

/* Übergang zwischen den Seiten, wo der Browser es kann */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:seite-raus 180ms ease both}
  ::view-transition-new(root){animation:seite-rein 320ms var(--kurve) both}
}
@keyframes seite-raus{to{opacity:0}}
@keyframes seite-rein{from{opacity:0; transform:translateY(10px)}}

/* ------------------------------------------------------------------ Druck */
@media print{
  .kopf,.fuss,.laufband,.aufruf,.fortschritt,.menue,.ruhe-schalter{display:none !important}
  body{background:#fff}
  .abschnitt{padding-block:24px}
  /* Einblendungen beim Scrollen gibt es im Druck nicht: alles sofort sichtbar */
  .js [data-ein],.js [data-ein-folge]>*,.js [data-zeilen] .wort>span,.js [data-ein="bild"] img{opacity:1 !important; transform:none !important; transition:none !important}
  .frage,.karte,.stueck,.kachel{break-inside:avoid}
}