/* Sideflow Design · Stylesheet · Stand 28.09.2026
   Palette C „Moos und Limette“ (Yasir, 28.09.2026). Eine Fassung, immer hell (Studio-Regel 9).
   Schriften selbst ausgeliefert: Newsreader (Display), Figtree (Text), Instrument Sans (kleine Zeilen, seit 08.10.2026 statt JetBrains Mono).
   Radien: Karten 22 px, Bilder 18 px, Knöpfe und Kapseln rund. Nichts dazwischen. */

@font-face { font-family: "Newsreader"; src: url("../schrift/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../schrift/newsreader-kursiv.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../schrift/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../schrift/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  color-scheme: light only;
  --papier: #F0F2EC;
  --papier-2: #E5E9DD;
  --papier-hell: #F8F9F5;
  --moos: #17231C;
  --moos-2: #26382B;
  --flechte: #4B574E;
  --limette: #CFE27A;
  --limette-tief: #B9CE5C;
  --moosgruen: #3F6A2A;
  --linie: rgb(23 35 28 / .12);

  --fd: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fb: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: "Instrument Sans", "Figtree", system-ui, sans-serif;

  --aus: cubic-bezier(.23, 1, .32, 1);
  --quint: cubic-bezier(.22, 1, .36, 1);
  --inaus: cubic-bezier(.77, 0, .175, 1);

  --rand: clamp(20px, 5vw, 72px);
  --breite: 1240px;
  --karte: 22px;
  --bild: 18px;

  /* Tokens für das Wow-System */
  --paper: var(--papier); --paper-2: var(--papier-2); --ink: var(--moos); --ink-2: var(--moos-2);
  --muted: var(--flechte); --akzent: var(--moosgruen); --akzent-hell: var(--limette); --ink-bg: var(--moos);
  --font-display: var(--fd); --font-body: var(--fb);
  --wow-kapsel-breite: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0; min-height: 100dvh; font: 400 17px/1.6 var(--fb); color: var(--moos);
  background: linear-gradient(172deg, var(--papier-hell) 0%, var(--papier) 38%, var(--papier-2) 100%) fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Feines Korn über allem, fest und ohne Klicks: Tiefe ohne Kosten beim Scrollen */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--fd); font-weight: 400; letter-spacing: -.02em; }
h1 em, h2 em, h3 em { font-style: italic; }
::selection { background: var(--limette); color: var(--moos); }
:focus-visible { outline: 3px solid var(--moosgruen); outline-offset: 3px; border-radius: 6px; }

.sprung { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--moos); color: var(--papier); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.sprung:focus { top: 12px; }

.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: clamp(80px, 12vw, 160px); position: relative; }
.mono { font: 500 13px/1.3 var(--fm); letter-spacing: .02em; color: var(--moosgruen); }
.leise { color: var(--flechte); }
.lesen { max-width: 62ch; }
.offen { background: color-mix(in oklab, var(--limette) 55%, transparent); border-radius: 4px; padding: 0 .3em; font: 500 .85em var(--fm); color: var(--moos); }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  font: 600 16px/1 var(--fb); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  background: var(--limette); color: var(--moos);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 10px 28px -14px rgb(63 106 42 / .7);
  transition: background-color .2s ease, box-shadow .3s var(--aus), transform .16s ease-out;
}
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--limette-tief); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 16px 34px -14px rgb(63 106 42 / .8); } }
.knopf:active { transform: scale(.97); }
.knopf--dunkel { background: var(--moos); color: var(--papier); box-shadow: 0 12px 30px -16px rgb(23 35 28 / .9); }
@media (hover: hover) and (pointer: fine) { .knopf--dunkel:hover { background: var(--moos-2); } }
.pfeil { width: 18px; height: 18px; flex: none; }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--limette-tief); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s ease; }
.textlink:hover { text-decoration-color: var(--moosgruen); }

/* ---------------------------------------------------------------- Kopf (W11 Kapselleiste) */
.wow-kapsel__innen { gap: clamp(14px, 2.4vw, 28px); padding: 8px 8px 8px 22px; }
.marke-link { display: block; color: var(--moos); --balken: var(--moosgruen); flex: none; }
.marke-link svg { height: 34px; width: auto; }
.navi { display: flex; gap: clamp(12px, 1.8vw, 26px); margin-left: auto; align-items: center; }
.navi a { font: 500 15px/1 var(--fb); text-decoration: none; padding: 8px 2px; position: relative; }
.navi a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; background: var(--moosgruen); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--aus); }
.navi a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .navi a:hover::after { transform: scaleX(1); } }
.kopf-knopf { min-height: 44px; padding: 0 20px; font-size: 15px; }
.menue-knopf { display: none; }
@media (max-width: 960px) {
  .navi { display: none; }
  .kopf-knopf { margin-left: auto; }
  .menue-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier-hell); color: var(--moos); cursor: pointer; }
  .menue-knopf svg { width: 20px; height: 20px; }
  .menue-knopf, .menue__zu { transition: transform .16s ease-out; }
  .menue-knopf:active, .menue__zu:active { transform: scale(.95); }
}
@media (max-width: 420px) { .kopf-knopf { display: none; } .menue-knopf { margin-left: auto; } }

.menue { position: fixed; inset: 0; z-index: 80; background: color-mix(in oklab, var(--papier) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; align-content: center; padding: 96px var(--rand) 48px; opacity: 0; visibility: hidden; transition: opacity .35s var(--aus), visibility 0s linear .35s; }
.menue.ist-offen { opacity: 1; visibility: visible; transition: opacity .35s var(--aus); }
.menue a { display: block; font: 400 clamp(34px, 9vw, 52px)/1.25 var(--fd); text-decoration: none; letter-spacing: -.02em; }
.menue .knopf { margin-top: 28px; font: 600 16px/1 var(--fb); width: max-content; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }   /* .menue a überschrieb display: Text klebte oben (Yasir, 08.10.2026) */
.menue__zu { position: absolute; top: 18px; right: var(--rand); width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier-hell); cursor: pointer; display: grid; place-items: center; color: var(--moos); }

/* ---------------------------------------------------------------- Hero mit 3D-Bühne */
.held { position: relative; min-height: 100dvh; padding-top: 120px; padding-bottom: 72px; overflow: clip; isolation: isolate; display: grid; align-items: center; view-timeline: --held block; }
.held__grund { position: absolute; inset: 0; z-index: -2; }
.held__grund img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: .95; }
.held__grund::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 18% 55%, rgb(248 249 245 / .92), rgb(248 249 245 / .55) 55%, transparent 80%), linear-gradient(180deg, transparent 70%, var(--papier) 100%); }
.held__licht { position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -12vw; top: -20vw; border-radius: 50%; background: radial-gradient(closest-side, rgb(207 226 122 / .38), transparent 70%); filter: blur(20px); pointer-events: none; }
.held__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.held h1 { font-size: clamp(44px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.03em; font-weight: 300; font-variation-settings: "opsz" 72; }
.held h1 em { font-weight: 400; color: var(--moosgruen); padding-right: .04em; }
.held__text p { margin-top: 26px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; max-width: 36ch; color: var(--flechte); }
.held__aktionen { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 34px; }
.wow-zeile { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.wow-zeile > span { display: inline-block; }

.buehne { position: relative; height: clamp(420px, 44vw, 620px); perspective: 1700px; perspective-origin: 40% 30%; }
.stapel { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg)) rotateZ(1deg); transition: transform .9s var(--quint); }
.fenster {
  position: absolute; width: 74%; aspect-ratio: 16 / 10.4; border-radius: var(--bild); overflow: hidden;
  background: var(--papier-hell); border: 1px solid rgb(255 255 255 / .7);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 50px 90px -40px rgb(23 35 28 / .55), 0 18px 36px -24px rgb(23 35 28 / .35);
  transform-style: preserve-3d; backface-visibility: hidden;
}
.fenster--1 { left: 26%; top: 24%; transform: translateZ(120px); z-index: 3; }
.fenster--2 { left: 12%; top: 7%; transform: translateZ(0); z-index: 2; }
.fenster--3 { left: 0; top: -9%; transform: translateZ(-120px); z-index: 1; filter: saturate(.8); }
.fenster__leiste { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgb(240 242 236 / .92); border-bottom: 1px solid var(--linie); }
.fenster__leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgb(23 35 28 / .16); }
.fenster__adresse { margin-left: 10px; flex: 1; max-width: 62%; height: 18px; border-radius: 999px; background: rgb(255 255 255 / .85); font: 500 9.5px/18px var(--fm); color: var(--flechte); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muster { position: relative; height: calc(100% - 30px); display: grid; grid-template-columns: 1fr 1.05fr; }
.muster__text { padding: 7% 7% 6%; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: var(--muster-grund, var(--papier-hell)); color: var(--muster-tinte, var(--moos)); }
.muster__name { font: 500 clamp(8px, .8vw, 11px)/1 var(--fm); letter-spacing: .06em; opacity: .7; }
.muster__titel { font: 300 clamp(15px, 2vw, 30px)/1.02 var(--fd); letter-spacing: -.02em; }
.muster__titel em { font-style: italic; }
.muster__knopf { margin-top: 6px; width: max-content; padding: .7em 1.2em; border-radius: 999px; font: 600 clamp(7px, .72vw, 10px)/1 var(--fb); background: var(--muster-akzent, var(--limette)); color: var(--muster-knopf, var(--moos)); }
.muster__bild { position: relative; overflow: hidden; }
.muster__bild img { width: 100%; height: 100%; object-fit: cover; }
.fenster--2 .muster { --muster-grund: #EAE6DD; --muster-tinte: #2A2A24; --muster-akzent: #2A2A24; --muster-knopf: #F3F0E8; }
.fenster--3 .muster { --muster-grund: #1E2B22; --muster-tinte: #EEF1E8; --muster-akzent: #CFE27A; --muster-knopf: #17231C; }
/* Glaskarte schwebt vor dem Stapel: Minimalismus mit einem gezielten Glas-Akzent */
.glas {
  background: linear-gradient(140deg, rgb(255 255 255 / .62), rgb(255 255 255 / .28));
  border: 1px solid rgb(255 255 255 / .75);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(255 255 255 / .25), 0 30px 60px -30px rgb(23 35 28 / .45);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
@media (prefers-reduced-transparency: reduce) { .glas { background: rgb(248 249 245 / .97); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.glaskarte { position: absolute; left: 4%; bottom: 2%; width: min(300px, 52%); padding: 18px 20px; border-radius: var(--karte); transform: translateZ(230px); z-index: 4; }
.glaskarte b { display: block; font: 400 clamp(17px, 1.5vw, 21px)/1.25 var(--fd); letter-spacing: -.01em; }
.glaskarte span { display: block; margin-top: 8px; font: 500 12px/1.4 var(--fm); color: var(--moosgruen); }
@media (max-width: 820px) { .glaskarte { transform: translateZ(110px); left: 0; bottom: -6%; width: 62%; padding: 12px 14px; } .glaskarte b { font-size: 15px; } .glaskarte span { font-size: 11px; } }
.buehne__notiz { position: absolute; right: 0; bottom: -34px; font: 500 12px/1 var(--fm); color: var(--flechte); }

@media (prefers-reduced-motion: no-preference) {
  .wow-js .held:not(.ist-bereit) .wow-zeile > span { transform: translateY(110%); }
  .wow-js .held:not(.ist-bereit) .wow-nach, .wow-js .held:not(.ist-bereit) .fenster, .wow-js .held:not(.ist-bereit) .glaskarte { opacity: 0; }
  .held.ist-bereit .wow-zeile > span { animation: zeile-auf 1.1s var(--quint) both; animation-delay: calc(.15s + var(--i, 0) * .09s); }
  .held.ist-bereit .wow-nach { animation: blende-auf .9s var(--aus) both; animation-delay: .75s; }
  .held.ist-bereit .fenster { animation: fenster-auf 1.4s var(--quint) both; animation-delay: calc(.35s + var(--f, 0) * .14s); }
  .held.ist-bereit .glaskarte { animation: fenster-auf 1.2s var(--quint) both; animation-delay: 1s; }
}
@keyframes zeile-auf { from { transform: translateY(110%); } }
@keyframes blende-auf { from { opacity: 0; transform: translateY(14px); } }
@keyframes fenster-auf { from { opacity: 0; translate: 0 60px; } }
/* Beim Wegscrollen fächert der Stapel auf: das vordere Fenster kommt Ihnen entgegen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
    .fenster--1 { animation: fenster-auf 1.4s var(--quint) both, faecher-1 linear both; animation-timeline: auto, --held; animation-range: normal, exit 0% exit 90%; }
    .fenster--3 { animation: fenster-auf 1.4s var(--quint) both, faecher-3 linear both; animation-timeline: auto, --held; animation-range: normal, exit 0% exit 90%; }
    .held.ist-bereit .fenster--1, .held.ist-bereit .fenster--3 { animation-delay: calc(.35s + var(--f, 0) * .14s), 0s; }
  }
}
@keyframes faecher-1 { to { transform: translateZ(260px) translateY(-40px); } }
@keyframes faecher-3 { to { transform: translateZ(-240px) translate(-30px, -60px); opacity: .4; } }

@media (max-width: 820px) {
  .held { padding-top: 104px; }
  .held__raster { grid-template-columns: 1fr; }
  .buehne { height: 74vw; margin-top: 16px; perspective: 1200px; }
  .stapel { --rx: 6deg; --ry: -10deg; }
  .fenster { width: 80%; }
  .fenster--1 { left: 20%; top: 26%; transform: translateZ(70px); }
  .fenster--3 { transform: translateZ(-70px); }
  .buehne__notiz { bottom: -28px; }
}

/* ---------------------------------------------------------------- Versprechen */
.aussage { font: 300 clamp(34px, 4.6vw, 64px)/1.08 var(--fd); letter-spacing: -.025em; max-width: 20ch; font-variation-settings: "opsz" 72; }
.aussage em { color: var(--moosgruen); }
.punkte { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 clamp(32px, 6vw, 110px); margin-top: clamp(48px, 7vw, 96px); }
.punkt { padding: 28px 0 32px; border-top: 1px solid var(--linie); }
.punkt:nth-child(2) { margin-top: 64px; }
.punkt:nth-child(4) { margin-top: 64px; }
.punkt h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; }
.punkt p { margin-top: 10px; color: var(--flechte); max-width: 40ch; }
@media (max-width: 760px) { .punkte { grid-template-columns: 1fr; } .punkt:nth-child(n) { margin-top: 0; } }

.aussage-reihe { display: grid; grid-template-columns: 1.5fr .75fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.aussage-bild { position: relative; aspect-ratio: 4 / 5; border-radius: var(--bild); overflow: hidden; box-shadow: 0 50px 90px -50px rgb(23 35 28 / .55); }
.aussage-bild img { width: 100%; height: 118%; object-fit: cover; }
.aussage-bild .glas { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 14px; font: 500 12px/1.4 var(--fm); color: var(--moos); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aussage-bild img { animation: bild-gleiten linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes bild-gleiten { from { transform: translateY(0); } to { transform: translateY(-15%); } }
@media (max-width: 760px) { .aussage-reihe { grid-template-columns: 1fr; } .aussage-bild { aspect-ratio: 16 / 11; } }

/* ---------------------------------------------------------------- Vorher / Nachher */
.vergleich-kopf { display: grid; gap: 14px; max-width: 46ch; }
.vergleich-kopf h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; }
.vergleich { position: relative; margin-top: 44px; border-radius: var(--karte); overflow: hidden; aspect-ratio: 16 / 9.2; background: #fff; box-shadow: 0 50px 100px -60px rgb(23 35 28 / .55), 0 0 0 1px var(--linie); --pos: 50%; }
.vergleich__lage { position: absolute; inset: 0; }
.vergleich__nachher { clip-path: inset(0 0 0 var(--pos)); }
.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--moos); pointer-events: none; }
.vergleich__griff::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317231C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 6px 20px -6px rgb(23 35 28 / .5), 0 0 0 4px rgb(255 255 255 / .8); }
.vergleich input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.vergleich input:focus-visible + .vergleich__griff::after { outline: 3px solid var(--moosgruen); outline-offset: 4px; }
.vergleich__schild { position: absolute; bottom: 16px; padding: 6px 12px; border-radius: 999px; font: 500 12px/1 var(--fm); background: rgb(255 255 255 / .9); color: var(--moos); pointer-events: none; }
.vergleich__schild--vorher { left: 16px; }
.vergleich__schild--nachher { right: 16px; background: var(--moos); color: var(--papier); }
/* Alte Seite: bewusst in den Mustern der frühen 2010er, zur Veranschaulichung */
.alt { height: 100%; background: #e9e9e9; font: 13px/1.4 Verdana, Geneva, sans-serif; color: #333; display: flex; flex-direction: column; }
.alt__kopf { background: linear-gradient(#6b8fb3, #45688c); color: #fff; padding: 2.2% 3%; font: bold clamp(12px, 1.8vw, 24px) "Times New Roman", serif; text-shadow: 1px 1px 0 #234; }
.alt__navi { background: #d6d6d6; border-bottom: 1px solid #aaa; padding: .8% 3%; display: flex; gap: 3%; font-size: clamp(8px, 1vw, 12px); }
.alt__navi span { color: #0645ad; text-decoration: underline; }
.alt__inhalt { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3%; padding: 3%; flex: 1; min-height: 0; }
.alt__bild { position: relative; background: #bbb; border: 3px solid #fff; box-shadow: 1px 1px 3px #888; overflow: hidden; }
.alt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(.9) brightness(1.05); }
.alt__text { font-size: clamp(8px, 1vw, 13px); }
.alt__text b { display: block; font: bold clamp(11px, 1.5vw, 18px) "Times New Roman", serif; color: #45688c; margin-bottom: 4%; }
.alt__text u { color: #0645ad; }
.neu { height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; background: linear-gradient(170deg, #F8F9F5, #EEF1E8); }
.neu__text { padding: 8% 7%; display: flex; flex-direction: column; justify-content: center; gap: 4%; }
.neu__name { font: 500 clamp(8px, .9vw, 12px)/1 var(--fm); color: var(--moosgruen); }
.neu__titel { font: 300 clamp(18px, 3.4vw, 48px)/1.02 var(--fd); letter-spacing: -.025em; }
.neu__titel em { font-style: italic; color: var(--moosgruen); }
.neu__zeile { font-size: clamp(9px, 1.1vw, 15px); color: var(--flechte); max-width: 30ch; }
.neu__knopf { width: max-content; padding: .8em 1.4em; border-radius: 999px; background: var(--limette); font: 600 clamp(8px, 1vw, 14px)/1 var(--fb); }
.neu__bild { position: relative; margin: 5% 0 5% 5%; border-radius: clamp(8px, 1.4vw, 18px); overflow: hidden; order: -1; }
.neu__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich-notiz { margin-top: 14px; font: 500 12px/1.4 var(--fm); color: var(--flechte); }

/* ---------------------------------------------------------------- Dunkle Stimmungsfläche mit Lichtkarten */
.dunkel { position: relative; color: var(--papier); isolation: isolate; overflow: clip; background: var(--moos); }
.dunkel__bild { position: absolute; inset: 0; z-index: -2; }
.dunkel__bild img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.dunkel__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgb(15 24 18 / .92) 0%, rgb(15 24 18 / .7) 45%, rgb(15 24 18 / .35) 100%), radial-gradient(60% 50% at 85% 10%, rgb(207 226 122 / .16), transparent 70%); }
.dunkel h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; max-width: 16ch; }
.dunkel h2 em { color: var(--limette); }
.dunkel .mono { color: var(--limette); }
.dunkel .lesen { color: rgb(240 242 236 / .78); margin-top: 18px; }
.licht-raster { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.licht-raster .wow-licht__karte { grid-column: span 5; min-height: 250px; display: flex; flex-direction: column; text-decoration: none; }
.licht-raster .wow-licht__karte:nth-child(2) { grid-column: span 7; }
.licht-raster .wow-licht__karte:nth-child(3) { grid-column: span 7; }
.wow-licht__karte h3 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; }
.wow-licht__karte p { margin-top: 12px; color: rgb(240 242 236 / .75); max-width: 42ch; }
.wow-licht__karte .mehr { margin-top: auto; padding-top: 24px; font: 600 15px/1 var(--fb); color: var(--limette); display: inline-flex; gap: 8px; align-items: center; }
.wow-licht__karte .mehr svg { transition: transform .35s var(--aus); }
@media (hover: hover) and (pointer: fine) { .wow-licht__karte:hover .mehr svg { transform: translateX(4px); } }
@media (max-width: 860px) { .licht-raster .wow-licht__karte:nth-child(n) { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- Ablauf (Startseite, kurz) */
.schritte { list-style: none; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; position: relative; }
.schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--linie); }
.schritte li { position: relative; padding: 0 clamp(12px, 2vw, 32px) 0 0; counter-increment: s; }
.schritte li::before { content: counter(s); position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--papier-hell); border: 1px solid var(--linie); font: 500 14px/1 var(--fm); color: var(--moosgruen); margin-bottom: 22px; }
.schritte li:first-child::before { background: var(--limette); border-color: transparent; color: var(--moos); }
.schritte h3 { font-size: 26px; line-height: 1.15; }
.schritte p { margin-top: 8px; color: var(--flechte); font-size: 16px; }
@media (max-width: 860px) {
  .schritte { grid-template-columns: 1fr; gap: 28px; }
  .schritte::before { left: 23px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .schritte li { padding-left: 72px; }
  .schritte li::before { position: absolute; left: 0; top: -6px; }
}

/* ---------------------------------------------------------------- Preis-Streifen und Schluss */
.band { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; padding: clamp(36px, 5vw, 64px); border-radius: var(--karte); background: linear-gradient(150deg, rgb(255 255 255 / .75), rgb(255 255 255 / .35)); border: 1px solid rgb(255 255 255 / .8); box-shadow: 0 40px 80px -60px rgb(23 35 28 / .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.band h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; }
.band ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.band li { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.band li:last-child { border-bottom: 0; }
.band li b { font-weight: 600; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

.schluss { text-align: center; padding-block: clamp(72px, 10vw, 130px) clamp(110px, 14vw, 180px); position: relative; overflow: clip; }
.schluss::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(207 226 122 / .35), transparent 72%); z-index: -1; }
.schluss h2 { font-size: clamp(44px, 7vw, 104px); line-height: .98; letter-spacing: -.035em; font-weight: 300; font-variation-settings: "opsz" 72; }
.schluss h2 em { color: var(--moosgruen); }
.schluss p { margin: 22px auto 34px; max-width: 44ch; color: var(--flechte); }

/* ---------------------------------------------------------------- Unterseiten: Kopf */
.seitenkopf { position: relative; padding: clamp(150px, 18vw, 220px) 0 clamp(56px, 8vw, 96px); overflow: clip; isolation: isolate; }
.seitenkopf__grund { position: absolute; inset: 0; z-index: -1; }
.seitenkopf__grund img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 20%; opacity: .7; }
.seitenkopf__grund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(248 249 245 / .95) 20%, rgb(248 249 245 / .4)), linear-gradient(180deg, transparent 60%, var(--papier)); }
.seitenkopf h1 { font-size: clamp(46px, 6.5vw, 96px); line-height: 1; letter-spacing: -.03em; font-weight: 300; max-width: 14ch; font-variation-settings: "opsz" 72; }
.seitenkopf h1 em { color: var(--moosgruen); }
.seitenkopf p { margin-top: 24px; font-size: clamp(18px, 1.5vw, 21px); color: var(--flechte); max-width: 46ch; }

/* ---------------------------------------------------------------- Leistungen (W3 Stapel) */
.wow-stapel__karte { display: grid; grid-template-columns: 1fr 1fr; background: var(--papier-hell); border: 1px solid rgb(255 255 255 / .8); box-shadow: 0 -16px 50px -24px rgb(23 35 28 / .35); }
.wow-stapel__karte:nth-child(even) { background: linear-gradient(160deg, #EEF1E8, #E3E8D8); }
.wow-stapel__karte:last-child { background: var(--moos); color: var(--papier); }
.karte__text { padding: clamp(28px, 4.5vw, 64px); display: flex; flex-direction: column; gap: 14px; }
.karte__text h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; }
.karte__text h2 em { color: var(--moosgruen); }
.wow-stapel__karte:last-child h2 em { color: var(--limette); }
.karte__text p { color: var(--flechte); max-width: 44ch; }
.wow-stapel__karte:last-child .karte__text p { color: rgb(240 242 236 / .75); }
.haken { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.haken li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.haken li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317231C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.karte__bild { position: relative; margin: 16px 16px 16px 0; border-radius: var(--bild); overflow: hidden; min-height: 260px; }
.karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .wow-stapel__karte { grid-template-columns: 1fr; min-height: 0; } .karte__bild { margin: 0 16px 16px; min-height: 220px; } }

.gruppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 48px; }
.gruppe h3 { font-size: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; }
.gruppe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--flechte); }
@media (max-width: 860px) { .gruppen { grid-template-columns: 1fr; } }
.nicht { margin-top: clamp(48px, 7vw, 80px); padding: clamp(28px, 4vw, 48px); border-radius: var(--karte); background: linear-gradient(160deg, rgb(255 255 255 / .6), rgb(255 255 255 / .2)); border: 1px solid var(--linie); }
.nicht h2 { font-size: clamp(28px, 3vw, 40px); }
.nicht ul { margin: 16px 0 0; padding-left: 1.2em; color: var(--flechte); display: grid; gap: 8px; }

/* ---------------------------------------------------------------- Ablauf-Seite */
.weg { position: relative; margin-top: 24px; padding-left: clamp(64px, 9vw, 120px); view-timeline: --weg block; }
.weg__linie { position: absolute; left: clamp(23px, 3.6vw, 44px); top: 12px; bottom: 12px; width: 2px; background: var(--linie); border-radius: 2px; }
.weg__linie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--moosgruen), var(--limette-tief)); transform-origin: top; transform: scaleY(1); border-radius: 2px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .weg__linie::after { animation: linie linear both; animation-timeline: --weg; animation-range: entry 30% exit 60%; }
  }
}
@keyframes linie { from { transform: scaleY(0); } }
.etappe { position: relative; padding: 0 0 clamp(56px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.etappe::before { content: attr(data-nr); position: absolute; left: calc(-1 * clamp(64px, 9vw, 120px) + clamp(23px, 3.6vw, 44px) - 23px); top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--papier-hell); border: 1px solid var(--linie); font: 500 14px/1 var(--fm); color: var(--moosgruen); }
.etappe h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; }
.etappe p { margin-top: 14px; color: var(--flechte); max-width: 46ch; }
.etappe__bild { border-radius: var(--bild); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 40px 70px -50px rgb(23 35 28 / .6); }
.etappe__bild img { width: 100%; height: 100%; object-fit: cover; }
.etappe__notiz { padding: 24px; border-radius: var(--karte); background: rgb(255 255 255 / .55); border: 1px solid rgb(255 255 255 / .8); font-size: 15px; color: var(--flechte); }
.etappe__notiz b { color: var(--moos); display: block; margin-bottom: 6px; font: 600 15px/1.3 var(--fb); }
@media (max-width: 820px) { .etappe { grid-template-columns: 1fr; } }
.kernsatz { font: 300 clamp(30px, 4.4vw, 60px)/1.14 var(--fd); letter-spacing: -.02em; max-width: 24ch; font-variation-settings: "opsz" 72; }

/* ---------------------------------------------------------------- Preise (dunkle Bühne) */
.preis-buehne { padding-block: clamp(150px, 18vw, 220px) clamp(90px, 12vw, 150px); }
.preis-buehne h1 { font-size: clamp(46px, 6.5vw, 96px); line-height: 1; letter-spacing: -.03em; font-weight: 300; max-width: 13ch; font-variation-settings: "opsz" 72; }
.preis-buehne h1 em { color: var(--limette); }
.preis-buehne .lesen { font-size: clamp(18px, 1.5vw, 20px); }
.preise { margin-top: clamp(44px, 6vw, 80px); grid-template-columns: repeat(3, 1fr); }
.preise .wow-licht__karte { min-height: 460px; display: flex; flex-direction: column; gap: 10px; }
.preise .wow-licht__karte:nth-child(2) { background: linear-gradient(160deg, rgb(207 226 122 / .22), rgb(255 255 255 / .05)); }
.preis { font: 300 clamp(44px, 4.4vw, 64px)/1 var(--fd); letter-spacing: -.03em; margin: 12px 0 4px; }
.preis small { font: 500 14px var(--fb); letter-spacing: 0; color: rgb(240 242 236 / .7); }
.preise .haken { color: rgb(240 242 236 / .85); font-size: 15.5px; margin-top: 10px; }
.preise .knopf { margin-top: auto; align-self: flex-start; }
.hinweis { margin-top: 28px; font-size: 14px; color: rgb(240 242 236 / .65); max-width: 70ch; }
@media (max-width: 960px) { .preise { grid-template-columns: 1fr; } .preise .wow-licht__karte { min-height: 0; } }

/* ---------------------------------------------------------------- Über mich (W2 Zoomfenster) */
.wow-zoom__vorher h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 300; letter-spacing: -.03em; }
.wow-zoom__text h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; font-weight: 300; letter-spacing: -.025em; color: #fff; max-width: 18ch; margin: 0 auto; }
.wow-zoom__text h2 em { color: var(--limette); }
.wow-zoom__text p { margin-top: 18px; color: rgb(255 255 255 / .85); }
.wow-zoom__bild::after { background: radial-gradient(55% 45% at 50% 52%, rgb(15 24 18 / .6), transparent 75%), linear-gradient(180deg, rgb(15 24 18 / .15), rgb(15 24 18 / .55)); }
.zwei-spalten { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.zwei-spalten h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.05; }
@media (max-width: 820px) { .zwei-spalten { grid-template-columns: 1fr; } }
/* Branchenseiten: Bild in festem Format statt langem Hochkant-Streifen (Yasir, 08.10.2026) */
.branche-bild { border-radius: var(--bild); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 40px 70px -50px rgb(23 35 28 / .6); }
.branche-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- FAQ */
.fragen { margin-top: 24px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--fd); letter-spacing: -.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie); background: var(--papier-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6A2A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .3s var(--aus), background-color .2s ease; }
.fragen details[open] summary::after { transform: rotate(45deg); background-color: var(--limette); }
.fragen .antwort { padding: 0 0 28px; color: var(--flechte); max-width: 64ch; }
@media (prefers-reduced-motion: no-preference) {
  .fragen details[open] .antwort { animation: antwort-auf .28s var(--aus) both; }
}
@keyframes antwort-auf { from { opacity: 0; transform: translateY(-8px); } }

/* ---------------------------------------------------------------- Kontakt */
.kontakt-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.formular { padding: clamp(24px, 4vw, 48px); border-radius: var(--karte); background: linear-gradient(160deg, rgb(255 255 255 / .85), rgb(255 255 255 / .55)); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 40px 90px -60px rgb(23 35 28 / .55); display: grid; gap: 20px; }
.feld { display: grid; gap: 8px; }
.feld label { font: 600 15px/1.2 var(--fb); }
.feld small { color: var(--flechte); font-size: 14px; }
.feld input, .feld textarea { font: 400 17px/1.4 var(--fb); color: var(--moos); background: #fff; border: 1px solid rgb(23 35 28 / .22); border-radius: 14px; padding: 14px 16px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #6B766E; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--moosgruen); box-shadow: 0 0 0 4px rgb(63 106 42 / .16); }
.feld [aria-invalid="true"] { border-color: #9B2C2C; }
.fehler { color: #8A2424; font-size: 14px; font-weight: 500; }
.zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .zweier { grid-template-columns: 1fr; } }
.zustimmung { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15px; color: var(--flechte); align-items: start; }
.zustimmung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--moosgruen); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 16px 18px; border-radius: 14px; font-weight: 500; }
.meldung--gut { background: rgb(207 226 122 / .5); }
.meldung--schlecht { background: rgb(155 44 44 / .1); color: #7A1F1F; }
.direkt { display: grid; gap: 22px; }
.direkt a { text-decoration: none; }
.direkt__eintrag { padding: 22px 24px; border-radius: var(--karte); border: 1px solid var(--linie); background: rgb(255 255 255 / .45); display: grid; gap: 4px; transition: background-color .2s ease, transform .3s var(--aus); }
@media (hover: hover) and (pointer: fine) { a.direkt__eintrag:hover { background: rgb(255 255 255 / .8); transform: translateY(-2px); } }
.direkt__eintrag b { font: 400 26px/1.2 var(--fd); }
@media (max-width: 860px) { .kontakt-raster { grid-template-columns: 1fr; } }
.wow-fenster { font-weight: 300; }

/* ---------------------------------------------------------------- Rechtliches */
.recht { max-width: 72ch; }
.recht h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 48px 0 12px; }
.recht h3 { font: 600 18px/1.3 var(--fb); letter-spacing: 0; margin: 28px 0 8px; }
.recht p, .recht li { color: #33403A; }

/* ---------------------------------------------------------------- Fuß */
.fuss { position: relative; padding: clamp(64px, 8vw, 96px) 0 40px; background: var(--moos); color: var(--papier); overflow: clip; isolation: isolate; }
.fuss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 90% 0%, rgb(207 226 122 / .14), transparent 60%), linear-gradient(160deg, #1D2C22, #121B15); }
.fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.fuss__marke svg { width: min(300px, 70vw); height: auto; }
.fuss__marke p { margin-top: 18px; color: rgb(240 242 236 / .7); max-width: 32ch; }
.fuss h2 { font: 500 13px/1 var(--fm); color: var(--limette); letter-spacing: .02em; margin-bottom: 18px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss a { text-decoration: none; color: rgb(240 242 236 / .85); }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fuss__unten { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(240 242 236 / .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: rgb(240 242 236 / .6); }
@media (max-width: 760px) { .fuss__raster { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Auftritt beim Scrollen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .auf { animation: auf linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  }
}
@keyframes auf { from { opacity: 0; transform: translateY(16px); } }

/* ---------------------------------------------------------------- Preise: Streichpreis, Rechner, Kombis */
.preis s, .band s { font-size: .5em; opacity: .55; margin-right: .2em; text-decoration-thickness: 1px; }
.band s { font-size: .85em; }
.wahl__preis s { font-size: .9em; opacity: .6; margin-right: .3em; }
.frist { font: 500 12.5px/1.3 var(--fm); color: var(--limette); margin: 2px 0 6px; }

.rechner { display: grid; gap: 28px; margin-top: 28px; }
.rechner fieldset, .funnel fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.rechner legend, .funnel legend { font: 600 15px/1.3 var(--fb); margin-bottom: 12px; padding: 0; }
.wahl-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wahl-raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .wahl-raster--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wahl-raster, .wahl-raster--drei { grid-template-columns: 1fr; } }
.wahl { position: relative; display: grid; gap: 6px; padding: 18px 20px 18px 54px; border-radius: 18px; cursor: pointer; background: rgb(255 255 255 / .6); border: 1px solid var(--linie); transition: border-color .2s ease, background-color .2s ease, transform .16s ease-out; }
.wahl:active { transform: scale(.99); }
.wahl input { position: absolute; left: 20px; top: 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--moosgruen); }
.wahl:has(input:checked) { background: #fff; border-color: var(--moosgruen); box-shadow: 0 0 0 1px var(--moosgruen), 0 14px 30px -20px rgb(23 35 28 / .5); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--moosgruen); outline-offset: 3px; }
.wahl__kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.wahl__kopf b { font: 600 16.5px/1.3 var(--fb); }
.wahl__preis { font: 500 14px/1.2 var(--fm); color: var(--moosgruen); white-space: nowrap; }
.wahl__text { font-size: 14.5px; line-height: 1.5; color: var(--flechte); }
.wahl--gross { padding: 22px 24px 22px 58px; }
.wahl--gross .wahl__kopf b { font: 400 22px/1.2 var(--fd); }
.summe { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 16px 22px; border-radius: 999px; justify-self: start; }
.summe span { font: 500 13px/1 var(--fm); color: var(--moosgruen); }
.summe b { font: 400 30px/1 var(--fd); letter-spacing: -.02em; }
.summe small { font: 500 14px/1 var(--fb); color: var(--flechte); }
.konfigurator { margin-top: 12px; display: grid; gap: 28px; }
.konfigurator > .knopf { justify-self: start; }

.kombis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.kombi { padding: clamp(24px, 3vw, 36px); border-radius: var(--karte); background: linear-gradient(160deg, rgb(255 255 255 / .8), rgb(255 255 255 / .4)); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 30px 60px -45px rgb(23 35 28 / .55); display: flex; flex-direction: column; gap: 12px; }
.kombi:nth-child(2) { background: linear-gradient(160deg, rgb(207 226 122 / .45), rgb(255 255 255 / .5)); }
.kombi h3 { font-size: 32px; }
.kombi .leise { font-size: 15px; margin: 0; }
.kombi__preis { margin-top: auto; font: 300 40px/1 var(--fd); letter-spacing: -.02em; }
.kombi__preis small { display: block; margin-top: 6px; font: 500 13px/1.3 var(--fm); color: var(--flechte); letter-spacing: 0; }
@media (max-width: 900px) { .kombis { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Funnel „Projekt starten“ */
.funnel-rahmen { max-width: 920px; }
.funnel { gap: 26px; }
.funnel__kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font: 500 13px/1 var(--fm); color: var(--moosgruen); }
.funnel__balken { flex: 1 1 160px; height: 4px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.funnel__balken i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--moosgruen), var(--limette-tief)); transform-origin: left; transform: scaleX(var(--fortschritt, .14)); transition: transform .5s var(--aus); }
.funnel__gespeichert { color: var(--flechte); }
.funnel__leeren { border: 0; background: none; padding: 6px 0; font: 500 13px/1 var(--fm); color: var(--flechte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.schritt { display: grid; gap: 22px; }
.schritt h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.02em; }
.schritt h2 em { color: var(--moosgruen); }
@media (prefers-reduced-motion: no-preference) { .schritt:not([hidden]) { animation: antwort-auf .35s var(--aus) both; } }
.weiche { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .weiche { grid-template-columns: 1fr; } }
.funnel select { font: 400 17px/1.4 var(--fb); color: var(--moos); background: #fff; border: 1px solid rgb(23 35 28 / .22); border-radius: 14px; padding: 14px 16px; width: 100%; }
.funnel__knoepfe { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; border-top: 1px solid var(--linie); }
.funnel__knoepfe [data-weiter], .funnel__knoepfe [data-senden] { margin-left: auto; }
.funnel__zurueck { border: 0; background: none; cursor: pointer; font: 600 16px/1 var(--fb); color: var(--moos); padding: 12px 0; }
.funnel-danke { padding: clamp(28px, 4vw, 48px); border-radius: var(--karte); display: grid; gap: 14px; }
.funnel-danke h2 { font-size: clamp(30px, 3.6vw, 44px); }
.funnel-danke h2 em { color: var(--moosgruen); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(23 35 28 / .22); background: #fff; font: 500 15px/1 var(--fb); transition: background-color .2s ease, border-color .2s ease, transform .16s ease-out; }
.chip:active span { transform: scale(.97); }
.chip input:checked + span { background: var(--limette); border-color: transparent; }
.chip input:focus-visible + span { outline: 3px solid var(--moosgruen); outline-offset: 3px; }

.feld label, .feld legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--moosgruen); background: #fff; color: var(--moosgruen); font: italic 600 14px/1 var(--fd); cursor: pointer; margin-left: auto; padding: 0; transition: background-color .2s ease; }
.info[aria-expanded="true"] { background: var(--moosgruen); color: #fff; }
.info::before { content: ""; position: absolute; width: 44px; height: 44px; }
.info { position: relative; }
.info-text { flex-basis: 100%; font: 400 14px/1.5 var(--fb); color: var(--flechte); background: rgb(207 226 122 / .22); border-radius: 12px; padding: 10px 14px; }

.stile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.paletten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .stile { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paletten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stil, .palette { position: relative; display: grid; gap: 6px; padding: 12px; border-radius: 16px; border: 1px solid var(--linie); background: rgb(255 255 255 / .6); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease-out; }
.stil:active, .palette:active { transform: scale(.98); }
.stil input, .palette input { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; margin: 0; accent-color: var(--moosgruen); z-index: 2; }
.stil:has(input:checked), .palette:has(input:checked) { border-color: var(--moosgruen); box-shadow: 0 0 0 1px var(--moosgruen); background: #fff; }
.stil:has(input:focus-visible), .palette:has(input:focus-visible) { outline: 3px solid var(--moosgruen); outline-offset: 3px; }
.stil b, .palette b { font: 600 15px/1.25 var(--fb); }
.stil small { font-size: 13px; line-height: 1.4; color: var(--flechte); }
.stil__bild { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.stil__bild i { position: absolute; display: block; }
.stil__bild--minimal { background: #FAFAF7; border: 1px solid #E7E7E1; }
.stil__bild--minimal i:nth-child(1) { left: 12%; top: 22%; width: 52%; height: 9%; background: #2B2B28; border-radius: 2px; }
.stil__bild--minimal i:nth-child(2) { left: 12%; top: 40%; width: 36%; height: 5%; background: #C9C9C2; border-radius: 2px; }
.stil__bild--minimal i:nth-child(3) { left: 12%; top: 62%; width: 24%; height: 12%; border: 1px solid #2B2B28; border-radius: 999px; }
.stil__bild--glas { background: radial-gradient(70% 90% at 80% 10%, #CFE27A, transparent 60%), linear-gradient(140deg, #9FC7C0, #5E7FA8); }
.stil__bild--glas i:nth-child(1) { left: 12%; top: 18%; width: 64%; height: 60%; border-radius: 10px; background: rgb(255 255 255 / .28); border: 1px solid rgb(255 255 255 / .6); backdrop-filter: blur(6px); }
.stil__bild--glas i:nth-child(2) { left: 20%; top: 30%; width: 36%; height: 7%; background: #fff; border-radius: 2px; }
.stil__bild--glas i:nth-child(3) { left: 20%; top: 56%; width: 22%; height: 11%; background: #fff; border-radius: 999px; }
.stil__bild--flach { background: #F2E9D8; }
.stil__bild--flach i:nth-child(1) { left: 0; top: 0; width: 100%; height: 34%; background: #E26D4F; }
.stil__bild--flach i:nth-child(2) { left: 12%; top: 48%; width: 34%; height: 34%; background: #2F5D8A; border-radius: 6px; }
.stil__bild--flach i:nth-child(3) { left: 54%; top: 48%; width: 34%; height: 34%; background: #F2B84B; border-radius: 6px; }
.stil__bild--mutig { background: #FFE66D; border: 3px solid #111; }
.stil__bild--mutig i:nth-child(1) { left: 10%; top: 16%; width: 70%; height: 16%; background: #111; }
.stil__bild--mutig i:nth-child(2) { left: 10%; top: 44%; width: 46%; height: 30%; background: #fff; border: 3px solid #111; box-shadow: 5px 5px 0 #111; }
.stil__bild--mutig i:nth-child(3) { left: 66%; top: 46%; width: 22%; height: 22%; background: #FF5DA2; border: 3px solid #111; border-radius: 50%; }
.palette__streifen { display: grid; grid-template-columns: repeat(4, 1fr); height: 46px; border-radius: 10px; overflow: hidden; border: 1px solid rgb(0 0 0 / .06); }

/* ---------------------------------------------------------------- Inhalte-Fragebogen */
.pflicht-kasten { padding: clamp(24px, 3vw, 36px); border-radius: var(--karte); margin-bottom: 28px; display: grid; gap: 14px; }
.pflicht-kasten h2 { font-size: clamp(26px, 2.6vw, 34px); }
.inhalte-form { gap: 30px; }
.inhalt-block { border: 0; padding: 0 0 8px; margin: 0; display: grid; gap: 16px; border-top: 1px solid var(--linie); padding-top: 26px; }
.inhalt-block legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--fd); letter-spacing: -.01em; padding: 0; margin-bottom: 4px; }
.inhalt-block legend .mono { font-size: 12px; }
.pflicht { font: 600 12px/1 var(--fb); background: var(--limette); color: var(--moos); padding: 6px 10px; border-radius: 999px; letter-spacing: 0; }
.leistung-zeile { display: grid; grid-template-columns: 1.3fr 1.6fr .8fr .7fr; gap: 10px; padding: 14px; border-radius: 16px; background: rgb(255 255 255 / .55); border: 1px solid var(--linie); margin-bottom: 10px; }
.leistung-zeile .feld label { font-size: 13px; }
@media (max-width: 760px) { .leistung-zeile { grid-template-columns: 1fr 1fr; } }
/* ---------------------------------------------------------------- Arbeiten */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.arbeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 7vw, 110px) clamp(28px, 4vw, 64px); }
.arbeit:nth-child(even) { margin-top: clamp(0px, 8vw, 120px); }
@media (max-width: 860px) { .arbeiten { grid-template-columns: 1fr; } .arbeit:nth-child(even) { margin-top: 0; } }
.arbeit__buehne { position: relative; padding: 0 7% 9% 0; }
.arbeit__fenster { border-radius: var(--bild); overflow: hidden; background: #fff; border: 1px solid rgb(255 255 255 / .8); box-shadow: 0 50px 90px -50px rgb(23 35 28 / .6), 0 0 0 1px var(--linie); outline-offset: 4px; }
.arbeit__blick { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; }
.arbeit__blick img { width: 100%; height: auto; display: block; transform: translateY(0); transition: transform 1.2s var(--aus); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .arbeit__fenster:hover .arbeit__blick img, .arbeit__fenster:focus-visible .arbeit__blick img { transform: translateY(calc(-100% + 100cqh)); transition: transform var(--laenge, 8s) cubic-bezier(.45, .05, .35, 1); }
}
.arbeit__handy { position: absolute; right: 0; bottom: 0; width: 24%; aspect-ratio: 390 / 844; border-radius: 22px; overflow: hidden; border: 5px solid var(--moos); background: var(--moos); box-shadow: 0 30px 60px -24px rgb(23 35 28 / .6); transform: rotate(2.5deg); }
.arbeit__handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.arbeit__text { margin-top: 26px; display: grid; gap: 8px; max-width: 52ch; }
.arbeit__text h2 { font-size: clamp(30px, 3vw, 42px); }
.arbeit__text .leise { margin: 0 0 6px; }

.streifen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
@media (max-width: 760px) { .streifen { grid-template-columns: 1fr; } }
.streifen__karte { position: relative; display: block; border-radius: var(--bild); overflow: hidden; aspect-ratio: 16 / 11; text-decoration: none; box-shadow: 0 40px 70px -45px rgb(23 35 28 / .6), 0 0 0 1px var(--linie); }
.streifen__karte img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--aus); }
.streifen__karte span { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 16px; border-radius: 14px; font: 400 21px/1.2 var(--fd); color: var(--moos); background: rgb(248 249 245 / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / .8); }
.streifen__karte small { display: block; margin-top: 4px; font: 500 12px/1.3 var(--fm); color: var(--moosgruen); }
@media (hover: hover) and (pointer: fine) { .streifen__karte:hover img { transform: scale(1.04); } }

/* ---------------------------------------------------------------- Funnel v2: spielerisch mit Live-Vorschau */
.spiel { position: relative; padding: clamp(110px, 12vw, 150px) 0 clamp(64px, 8vw, 110px); isolation: isolate; overflow: clip; min-height: 100dvh; }
.spiel__grund { position: absolute; inset: 0; z-index: -1; }
.spiel__grund img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.spiel__grund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(248 249 245 / .96) 30%, rgb(248 249 245 / .7)), radial-gradient(50% 60% at 85% 20%, rgb(207 226 122 / .3), transparent 70%); }
.spiel__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 960px) { .spiel__raster { grid-template-columns: 1fr; } }
.spiel__form { display: grid; gap: 22px; }
.spiel__kopf { display: flex; align-items: center; gap: 14px; }
.spiel__zurueck { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); background: var(--papier-hell); color: var(--moos); cursor: pointer; display: grid; place-items: center; transition: transform .16s ease-out; }
.spiel__zurueck:active { transform: scale(.94); }
.spiel__zurueck .pfeil { transform: rotate(180deg); }
.spiel__balken { flex: 1; height: 6px; border-radius: 6px; background: rgb(23 35 28 / .1); overflow: hidden; }
.spiel__balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--moosgruen), var(--limette-tief)); transform-origin: left; transform: scaleX(var(--fortschritt, 0)); transition: transform .6s var(--aus); }
.spiel__zaehler { flex: none; font: 500 13px/1 var(--fm); color: var(--moosgruen); min-width: 88px; text-align: right; }
.spiel__unten { display: flex; gap: 16px; align-items: center; font: 500 12.5px/1 var(--fm); color: var(--flechte); }

.frage { display: grid; gap: 20px; }
.frage h2 { font: 300 clamp(34px, 4.4vw, 58px)/1.04 var(--fd); letter-spacing: -.025em; font-variation-settings: "opsz" 72; }
.frage h2 em { color: var(--moosgruen); font-weight: 400; }
.frage__hilfe { margin: -6px 0 0; font-size: 17px; max-width: 52ch; }
.frage__fuss { display: flex; gap: 16px; align-items: center; }
/* Weiter-Knopf bleibt unten im Bild, auch bei langen Kachel-Listen (Yasir, 08.10.2026) */
.frage__fuss:has([data-weiter]) { position: sticky; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; justify-self: start; }
.frage__fuss [data-weiter] { box-shadow: 0 18px 36px -14px rgb(23 35 28 / .75), 0 0 0 6px rgb(240 242 236 / .7); }
/* ui-ux-pro-max (WCAG 2.4.11): fokussierte Kacheln nie hinter dem klebenden Knopf oder dem Vorschau-Band verschwinden lassen */
html:has([data-funnel]) { scroll-padding-bottom: 150px; }
/* Funnel eingebettet auf der Preisseite: weniger Kopfraum als als eigene Seite */
.preis-buehne + .spiel { min-height: 0; padding-top: clamp(64px, 8vw, 110px); }

/* Ablauf auf der Startseite sitzt näher am vorigen Abschnitt (Yasir, 08.10.2026) */
.abschnitt.reise--hoch { padding-top: clamp(24px, 4vw, 56px); }

/* Startseite: statt der Arbeiten nur ein Knopf zur Seite „Arbeiten“ (Yasir, 08.10.2026) */
.arbeiten-knopf { padding-block: clamp(40px, 6vw, 72px); }
.arbeiten-knopf__reihe { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding: clamp(22px, 3vw, 32px) clamp(22px, 3.4vw, 40px); border-radius: var(--karte); background: linear-gradient(120deg, rgb(255 255 255 / .82), rgb(255 255 255 / .5)); border: 1px solid var(--linie); box-shadow: 0 24px 50px -38px rgb(23 35 28 / .6); }
.arbeiten-knopf__text { margin: 0; font: 300 clamp(22px, 2.4vw, 30px)/1.2 var(--fd); letter-spacing: -.015em; max-width: 34ch; }
@media (prefers-reduced-motion: no-preference) {
  /* emil-design-eng 08.10.2026: Schrittwechsel kommt oft vor, also kurz; Staffel gedeckelt, sonst warten 17 Paletten 1,2 s */
  .frage:not([hidden]) { animation: frage-rein .32s var(--aus) both; }
  .frage:not([hidden]) .kachel { animation: frage-rein .32s var(--aus) both; animation-delay: calc(40ms + min(var(--k, 0), 8) * 30ms); }
}
@keyframes frage-rein { from { opacity: 0; transform: translateY(14px); } }
.gruende { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.gruende li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 16.5px; }
.gruende li::before { content: ""; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317231C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.gut-zu-wissen { margin: 6px 0 0; padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / .6); border: 1px solid rgb(255 255 255 / .9); font-size: 15px; line-height: 1.5; color: var(--flechte); display: grid; gap: 4px; }
.gut-zu-wissen span { font: 500 12px/1 var(--fm); color: var(--moosgruen); }

.kacheln { display: grid; gap: 12px; }
.kacheln--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln--vier { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 700px) { .kacheln--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kacheln--zwei { grid-template-columns: 1fr; } }
.kachel { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 20px; cursor: pointer; background: rgb(255 255 255 / .72); border: 1px solid rgb(23 35 28 / .1); box-shadow: 0 12px 30px -24px rgb(23 35 28 / .5); transition: transform .18s var(--aus), border-color .2s ease, box-shadow .25s ease, background-color .2s ease; }
.kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kachel b { font: 600 16.5px/1.25 var(--fb); }
.kachel small { font-size: 14px; line-height: 1.45; color: var(--flechte); }
.kachel:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .kachel:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgb(23 35 28 / .55); border-color: rgb(63 106 42 / .35); } }
.kachel:has(input:checked) { background: #fff; border-color: var(--moosgruen); box-shadow: 0 0 0 2px var(--moosgruen), 0 20px 40px -26px rgb(23 35 28 / .55); }
.kachel:has(input:checked)::after { content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317231C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (prefers-reduced-motion: no-preference) { .kachel:has(input:checked)::after { animation: haken .35s var(--aus) both; } }
@keyframes haken { from { transform: scale(.4); opacity: 0; } }
.kachel:has(input:focus-visible) { outline: 3px solid var(--moosgruen); outline-offset: 3px; }
.kachel--gross { padding: 26px 24px; }
.kachel--gross b { font: 400 26px/1.15 var(--fd); }
.kachel--bild { padding: 8px 8px 14px; }
.kachel--bild b { padding: 0 8px; }
.kachel__bild { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--aus); }
@media (hover: hover) and (pointer: fine) { .kachel--bild:hover .kachel__bild img { transform: scale(1.06); } }
.kachel__preis { margin-top: 4px; font: 500 13px/1 var(--fm); color: var(--moosgruen); }
.kachel--stil .stil__bild, .kachel--palette .palette__streifen { margin-bottom: 6px; }
.kachel--leise { background: transparent; border-style: dashed; box-shadow: none; }

.feld--gross input { font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--fd); padding: 16px 18px; }

.summe-karte { padding: clamp(20px, 3vw, 30px); border-radius: var(--karte); display: grid; gap: 12px; }
.summe-zeilen { display: grid; gap: 8px; }
.summe-zeilen div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); font-size: 15.5px; }
.summe-zeilen s { opacity: .55; margin-right: .3em; }
.summe-pflege { font-size: 15px; }
.summe-gesamt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.summe-gesamt span { font: 500 13px/1 var(--fm); color: var(--moosgruen); }
.summe-gesamt b { font: 300 44px/1 var(--fd); letter-spacing: -.02em; }
.summe-gesamt small { color: var(--flechte); font-size: 15px; }
.summe .ust, .summe-gesamt .ust { display: block; flex-basis: 100%; color: var(--flechte); font-size: 14px; margin-top: 6px; }
.summe-frist { margin: 0; font-size: 13.5px; color: var(--flechte); }

/* Live-Vorschau: die eigene Seite wächst mit jeder Antwort */
.live { position: sticky; top: 104px; display: grid; gap: 10px; }
.live__titel { margin: 0; }
.live__notiz { margin: 0; font-size: 13px; }
@media (max-width: 960px) { .live { position: relative; top: 0; order: -1; max-width: 340px; width: 100%; justify-self: center; } .live__notiz { display: none; } }
.lv { --lv-grund: #F8F9F5; --lv-flaeche: #EEF1E8; --lv-akzent: #CFE27A; --lv-tinte: #17231C; --lv-knopf-text: #17231C;
  border-radius: 18px; overflow: hidden; background: var(--lv-grund); border: 1px solid rgb(255 255 255 / .8); box-shadow: 0 50px 90px -50px rgb(23 35 28 / .6), 0 0 0 1px var(--linie);
  transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); transition: transform .8s var(--quint), background-color .5s ease; }
@media (hover: hover) and (pointer: fine) { .lv:hover { transform: none; } }
@media (max-width: 960px) { .lv { transform: none; } }
.lv__seite { position: relative; color: var(--lv-tinte); background: var(--lv-grund); transition: background-color .5s ease, color .5s ease; }
.lv__kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.lv__logo { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--fb); }
.lv__logo i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--lv-tinte); color: var(--lv-grund); font: 600 12px/1 var(--fd); font-style: normal; transition: background-color .5s ease; }
.lv__navi { display: flex; gap: 8px; align-items: center; }
.lv__navi i { width: 26px; height: 5px; border-radius: 3px; background: currentColor; opacity: .25; }
.lv__navi em { font: 500 9px/1 var(--fm); font-style: normal; opacity: .7; }
.lv__held { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; padding: 10px 16px 18px; align-items: center; }
.lv__text { display: grid; gap: 8px; align-content: center; }
.lv__ort { font: 500 10px/1 var(--fm); opacity: .7; }
.lv__h1 { font: 300 clamp(18px, 2.1vw, 26px)/1.08 var(--fd); letter-spacing: -.02em; overflow-wrap: anywhere; }
.lv__knopf { justify-self: start; padding: 7px 12px; border-radius: 999px; background: var(--lv-akzent); color: var(--lv-knopf-text); font: 600 10.5px/1 var(--fb); transition: background-color .5s ease; }
.lv__sterne { font: 500 10px/1 var(--fm); color: #B8860B; }
.lv__bild { aspect-ratio: 4 / 3.4; border-radius: 12px; overflow: hidden; background: var(--lv-flaeche); }
.lv__bild img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.lv__leiste { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--lv-flaeche); font: 500 10px/1.3 var(--fm); transition: background-color .5s ease; }
.lv__whatsapp { position: absolute; right: 12px; bottom: 42px; width: 30px; height: 30px; border-radius: 50%; background: #25D366; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .5); }
.lv__whatsapp::after { content: ""; position: absolute; inset: 9px; border-radius: 50% 50% 50% 0; background: #fff; }
/* Stile der Skizze */
.lv[data-stil="minimal"] .lv__h1 { font-weight: 300; }
.lv[data-stil="glas"] .lv__seite { background: radial-gradient(70% 80% at 85% 0%, var(--lv-akzent), transparent 60%), linear-gradient(150deg, var(--lv-grund), var(--lv-flaeche)); }
.lv[data-stil="glas"] .lv__text { padding: 12px; border-radius: 12px; background: rgb(255 255 255 / .35); border: 1px solid rgb(255 255 255 / .6); backdrop-filter: blur(8px); }
.lv[data-stil="flach"] .lv__kopf { background: var(--lv-akzent); }
.lv[data-stil="flach"] .lv__h1 { font: 700 clamp(16px, 1.9vw, 23px)/1.1 var(--fb); letter-spacing: -.01em; }
.lv[data-stil="flach"] .lv__bild { border-radius: 4px; }
.lv[data-stil="mutig"] .lv__seite { background: var(--lv-akzent); }
.lv[data-stil="mutig"] .lv__h1 { font: 800 clamp(17px, 2vw, 24px)/1.02 var(--fb); text-transform: uppercase; }
.lv[data-stil="mutig"] .lv__bild { border: 3px solid var(--lv-tinte); box-shadow: 5px 5px 0 var(--lv-tinte); border-radius: 0; }
.lv[data-stil="mutig"] .lv__knopf { border: 2px solid var(--lv-tinte); background: var(--lv-grund); box-shadow: 3px 3px 0 var(--lv-tinte); }

.danke-weg { margin: 6px 0; padding-left: 1.3em; display: grid; gap: 10px; }
.danke-weg b { font-weight: 600; }

/* ---------------------------------------------------------------- Funnel: Kacheln ruhiger, viele Stile, viele Paletten */
.spiel__form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.spiel__form legend { font: 600 15px/1.3 var(--fb); margin-bottom: 12px; padding: 0; }
.kachel--wahl { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px 20px; }
.kachel--wahl b { font-size: 16px; padding-right: 26px; }
.kachel--wahl small { font-size: 14px; }
.kachel--wahl .kachel__preis { margin-top: auto; padding-top: 8px; font-size: 14px; }
.kachel--stil, .kachel--palette, .kachel--eigen { padding: 10px 10px 14px; gap: 4px; }
.kachel--stil b, .kachel--palette b, .kachel--eigen b { font-size: 15px; padding: 0 4px; }
.kachel--stil small, .kachel--palette small, .kachel--eigen small { font-size: 13px; line-height: 1.4; padding: 0 4px; }
.kachel--stil .stil__bild, .kachel--palette .palette__streifen, .kachel--eigen .palette__streifen { margin-bottom: 6px; }
.kacheln--vier { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.palette__streifen--eigen i { background: var(--f, #ddd); }
.palette__streifen--eigen i[data-eigen="grund"] { --f: #F7F4EE; } .palette__streifen--eigen i[data-eigen="flaeche"] { --f: #E6DDD0; }
.palette__streifen--eigen i[data-eigen="akzent"] { --f: #C0572E; } .palette__streifen--eigen i[data-eigen="text"] { --f: #2A211C; }
.farbwahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .7); border: 1px solid var(--linie); }
.farbwahl label { display: grid; gap: 6px; font: 600 13px/1.2 var(--fb); }
.farbwahl input[type="color"] { width: 100%; height: 48px; border: 1px solid var(--linie); border-radius: 12px; padding: 3px; background: #fff; cursor: pointer; }
@media (max-width: 520px) { .farbwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mini-Vorschauen der neuen Stile (je vier Teile) */
.stil__bild i:nth-child(4) { display: none; }
.stil__bild--edel { background: linear-gradient(160deg, #1B1A18, #0F0E0D); }
.stil__bild--edel i:nth-child(1) { left: 14%; top: 26%; width: 50%; height: 8%; background: #D8C08A; }
.stil__bild--edel i:nth-child(2) { left: 14%; top: 42%; width: 34%; height: 4%; background: rgb(255 255 255 / .35); }
.stil__bild--edel i:nth-child(3) { left: 14%; top: 62%; width: 26%; height: 11%; border: 1px solid #D8C08A; }
.stil__bild--natur { background: #F1EADF; }
.stil__bild--natur i:nth-child(1) { right: -10%; top: -20%; width: 60%; height: 80%; border-radius: 50%; background: #C9B28A; }
.stil__bild--natur i:nth-child(2) { left: 12%; top: 30%; width: 44%; height: 9%; background: #5A4632; border-radius: 6px; }
.stil__bild--natur i:nth-child(3) { left: 12%; top: 58%; width: 28%; height: 13%; background: #7E8F72; border-radius: 999px; }
.stil__bild--verspielt { background: #FFF4E0; }
.stil__bild--verspielt i:nth-child(1) { left: 8%; top: 12%; width: 30%; height: 40%; border-radius: 50%; background: #FF7A8A; }
.stil__bild--verspielt i:nth-child(2) { left: 44%; top: 30%; width: 44%; height: 12%; border-radius: 999px; background: #3DB5A6; }
.stil__bild--verspielt i:nth-child(3) { left: 30%; top: 64%; width: 28%; height: 20%; border-radius: 12px; background: #FFC23D; transform: rotate(-8deg); }
.stil__bild--klassisch { background: #FBFAF6; border: 1px solid #E4E0D6; }
.stil__bild--klassisch i:nth-child(1) { left: 20%; top: 22%; width: 60%; height: 9%; background: #22304A; }
.stil__bild--klassisch i:nth-child(2) { left: 30%; top: 40%; width: 40%; height: 3%; background: #B89B5E; }
.stil__bild--klassisch i:nth-child(3) { left: 36%; top: 58%; width: 28%; height: 12%; background: #22304A; }
.stil__bild--retro { background: #F3DDB6; }
.stil__bild--retro i:nth-child(1) { left: 0; bottom: 0; width: 100%; height: 22%; background: #D9642B; }
.stil__bild--retro i:nth-child(2) { left: 0; bottom: 22%; width: 100%; height: 14%; background: #E8A33A; }
.stil__bild--retro i:nth-child(3) { left: 14%; top: 18%; width: 46%; height: 12%; background: #6B3A2A; border-radius: 999px; }
.stil__bild--magazin { background: #fff; border: 1px solid #E7E7E1; }
.stil__bild--magazin i:nth-child(1) { left: 8%; top: 12%; width: 84%; height: 22%; background: #111; }
.stil__bild--magazin i:nth-child(2) { left: 8%; top: 44%; width: 40%; height: 46%; background: #C9C9C2; }
.stil__bild--magazin i:nth-child(3) { left: 54%; top: 46%; width: 38%; height: 5%; background: #555; box-shadow: 0 10px 0 #999, 0 20px 0 #999; }
.stil__bild--technik { background: #0F1720; background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 12px 12px; }
.stil__bild--technik i:nth-child(1) { left: 12%; top: 24%; width: 50%; height: 8%; background: #E6EDF3; }
.stil__bild--technik i:nth-child(2) { left: 12%; top: 42%; width: 30%; height: 4%; background: #38BDF8; }
.stil__bild--technik i:nth-child(3) { right: 10%; top: 20%; width: 26%; height: 56%; border: 1px solid #38BDF8; }
.stil__bild--handgemacht { background: #FAF6EE; }
.stil__bild--handgemacht i:nth-child(1) { left: 12%; top: 22%; width: 56%; height: 10%; border-bottom: 3px solid #2B2B28; border-radius: 0 0 40% 60%; }
.stil__bild--handgemacht i:nth-child(2) { left: 14%; top: 48%; width: 40%; height: 6%; background: #D9A441; border-radius: 40% 60% 50% 40%; transform: rotate(-2deg); }
.stil__bild--handgemacht i:nth-child(3) { right: 12%; top: 30%; width: 24%; height: 40%; border: 2px dashed #2B2B28; border-radius: 12px; transform: rotate(4deg); }

/* Live-Skizze in den neuen Stilen */
.lv[data-stil="edel"] .lv__seite { background: linear-gradient(160deg, #1B1A18, #0E0D0C); color: #F4EFE6; }
.lv[data-stil="edel"] .lv__knopf { background: transparent; color: var(--lv-akzent); border: 1px solid var(--lv-akzent); }
.lv[data-stil="edel"] .lv__leiste { background: #232120; color: #F4EFE6; }
.lv[data-stil="edel"] .lv__logo i { background: var(--lv-akzent); color: #111; }
.lv[data-stil="natur"] .lv__bild { border-radius: 40% 40% 12px 12px; }
.lv[data-stil="natur"] .lv__knopf { border-radius: 999px; }
.lv[data-stil="verspielt"] .lv__h1 { font: 800 clamp(17px, 2vw, 24px)/1.05 var(--fb); }
.lv[data-stil="verspielt"] .lv__bild { border-radius: 50% 50% 24px 50%; transform: rotate(-2deg); }
.lv[data-stil="verspielt"] .lv__knopf { transform: rotate(-3deg); }
.lv[data-stil="klassisch"] .lv__text { text-align: center; justify-items: center; }
.lv[data-stil="klassisch"] .lv__h1 { font: 500 clamp(17px, 2vw, 24px)/1.15 var(--fd); }
.lv[data-stil="klassisch"] .lv__knopf { border-radius: 2px; }
.lv[data-stil="retro"] .lv__seite { background: linear-gradient(180deg, var(--lv-grund) 70%, var(--lv-akzent) 70% 82%, var(--lv-flaeche) 82%); }
.lv[data-stil="retro"] .lv__h1 { font: 700 clamp(17px, 2vw, 24px)/1.05 var(--fd); font-style: italic; }
.lv[data-stil="magazin"] .lv__held { grid-template-columns: 1fr; }
.lv[data-stil="magazin"] .lv__h1 { font: 400 clamp(22px, 2.8vw, 34px)/.98 var(--fd); letter-spacing: -.03em; }
.lv[data-stil="magazin"] .lv__bild { aspect-ratio: 16 / 7; border-radius: 0; }
.lv[data-stil="technik"] .lv__seite { background: #0F1720; color: #E6EDF3; background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 16px 16px; }
.lv[data-stil="technik"] .lv__h1 { font: 600 clamp(16px, 1.9vw, 22px)/1.1 var(--fm); letter-spacing: -.02em; }
.lv[data-stil="technik"] .lv__leiste { background: #16212C; color: #E6EDF3; }
.lv[data-stil="technik"] .lv__bild { border-radius: 2px; border: 1px solid var(--lv-akzent); }
.lv[data-stil="handgemacht"] .lv__h1 { font: 400 clamp(18px, 2.1vw, 26px)/1.1 var(--fd); font-style: italic; text-decoration: underline wavy var(--lv-akzent) 1px; text-underline-offset: 6px; }
.lv[data-stil="handgemacht"] .lv__bild { border: 2px dashed var(--lv-tinte); transform: rotate(1.5deg); }

/* ---------------------------------------------------------------- Vorher/Nachher: Szenen */
.vergleich-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.vergleich-reiter button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linie); background: rgb(255 255 255 / .7); font: 600 15px/1 var(--fb); color: var(--moos); cursor: pointer; transition: background-color .2s ease, transform .16s ease-out; }
.vergleich-reiter button:active { transform: scale(.97); }
.vergleich-reiter button[aria-selected="true"] { background: var(--moos); color: var(--papier); border-color: var(--moos); }
.vergleich-reiter + .vergleich { margin-top: 16px; }
.szene { position: absolute; inset: 0; }
.alt__block { margin: 3% 4%; padding: 3%; background: #fff; border: 1px solid #bbb; font: clamp(9px, 1.15vw, 15px)/1.5 Verdana, Geneva, sans-serif; color: #333; }
.alt__block b { display: block; font: bold clamp(12px, 1.6vw, 20px) "Times New Roman", serif; color: #45688c; margin-bottom: 2%; }
.alt__block big { font-size: 1.4em; font-weight: bold; color: #b00; }
.alt__block u { color: #0645ad; }
.alt__block i { color: #777; }
.neu--termin, .neu--preise, .neu--google, .neu--handy { display: grid; place-items: center; grid-template-columns: 1fr; }
.buchung, .preisliste { width: min(78%, 520px); display: grid; gap: clamp(6px, 1.1vw, 14px); padding: clamp(14px, 2.4vw, 30px); border-radius: clamp(10px, 1.6vw, 20px); background: rgb(255 255 255 / .8); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 30px 60px -40px rgb(23 35 28 / .55); }
.buchung__titel { font: 300 clamp(16px, 2.6vw, 34px)/1.05 var(--fd); letter-spacing: -.02em; }
.buchung__reihe, .preisliste__zeile { display: flex; justify-content: space-between; font-size: clamp(9px, 1.15vw, 15px); padding: .5em .8em; border-radius: 10px; background: #F3F5EF; }
.buchung__tage, .buchung__zeiten { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(4px, .6vw, 8px); }
.buchung__zeiten { grid-template-columns: repeat(3, 1fr); }
.buchung__tage span, .buchung__zeiten span { display: grid; place-items: center; padding: .45em 0; border-radius: 10px; border: 1px solid var(--linie); background: #fff; font: 500 clamp(8px, 1vw, 13px)/1.2 var(--fb); }
.buchung__tage b { font: 400 clamp(12px, 1.6vw, 20px)/1 var(--fd); }
.buchung__tage .an, .buchung__zeiten .an { background: var(--limette); border-color: transparent; }
.buchung__zeiten .weg { opacity: .35; text-decoration: line-through; }
.buchung__hinweis { font-size: clamp(8px, .95vw, 12.5px); color: var(--flechte); }
.buchung .neu__knopf, .preisliste .neu__knopf { justify-self: start; }
.alt--handy, .neu--handy { display: grid; place-items: center; align-content: center; gap: 2%; }
.alt--handy { background: #e9e9e9; }
.telefon { width: clamp(110px, 17vw, 210px); aspect-ratio: 9 / 18.5; border-radius: clamp(14px, 2.2vw, 28px); border: clamp(4px, .6vw, 7px) solid #1a1a1a; background: #1a1a1a; overflow: hidden; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .6); }
.telefon__schirm { height: 100%; background: #F8F9F5; display: grid; align-content: start; gap: 5%; padding-bottom: 4%; position: relative; overflow: hidden; }
.telefon__schirm--alt { background: #e9e9e9; width: 260%; transform: scale(.385); transform-origin: top left; gap: 2%; }
.telefon__schirm--alt .alt__kopf { font-size: 22px; }
.telefon__schirm--alt .alt__navi { font-size: 13px; }
.winzig { padding: 2% 3%; font: 13px/1.4 Verdana, sans-serif; color: #333; }
.mobil__bild { aspect-ratio: 4 / 3; overflow: hidden; }
.mobil__bild img { width: 100%; height: 100%; object-fit: cover; }
.mobil__titel { padding: 0 8%; font: 300 clamp(11px, 1.5vw, 19px)/1.1 var(--fd); }
.mobil__titel em { color: var(--moosgruen); }
.mobil__knopf { margin: 0 8%; padding: .6em; text-align: center; border-radius: 999px; background: var(--limette); font: 600 clamp(8px, 1vw, 12px)/1 var(--fb); }
.mobil__leiste { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--moos); color: var(--papier); font: 600 clamp(6.5px, .8vw, 10px)/1 var(--fb); }
.mobil__leiste span { padding: .9em 0; text-align: center; }
.szene-notiz { margin: 0; font: 500 clamp(9px, 1vw, 13px)/1.2 var(--fm); color: var(--flechte); }
.alt--google, .neu--google { display: grid; place-items: center; background: #fff; }
.alt--google { background: #f6f6f6; }
.suche { width: min(84%, 640px); display: grid; gap: clamp(8px, 1.4vw, 18px); font-family: Arial, Helvetica, sans-serif; }
.suche__feld { padding: .7em 1.2em; border-radius: 999px; border: 1px solid #dfe1e5; font-size: clamp(9px, 1.2vw, 15px); color: #202124; box-shadow: 0 1px 6px rgb(32 33 36 / .18); background: #fff; }
.treffer { display: grid; gap: .3em; font-size: clamp(9px, 1.15vw, 14px); }
.treffer__url { color: #202124; font-size: .9em; }
.treffer__titel { color: #1a0dab; font-size: 1.45em; }
.treffer__text { color: #4d5156; line-height: 1.5; }
.treffer__sterne { color: #e7711b; font-size: .95em; }
.treffer__links { display: flex; gap: .6em; flex-wrap: wrap; margin-top: .3em; }
.treffer__links span { padding: .4em .9em; border-radius: 999px; border: 1px solid #dadce0; color: #1a0dab; }
.preisliste__reiter { display: flex; gap: .5em; }
.preisliste__reiter span { padding: .4em .9em; border-radius: 999px; border: 1px solid var(--linie); font: 600 clamp(8px, 1vw, 13px)/1 var(--fb); background: #fff; }
.preisliste__reiter .an { background: var(--moos); color: var(--papier); }
.preisliste__zeile b { font-weight: 600; }

/* ---------------------------------------------------------------- Vorschau-Hinweis (bis zum Livegang) */
.vorschau-band { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 70; background: var(--moos); color: var(--papier); font: 500 12px/1.2 var(--fm); padding: 10px 16px; border-radius: 999px; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .5); max-width: calc(100vw - 32px); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .stapel { transform: rotateX(6deg) rotateY(-12deg); }
}

@media (max-width: 620px) { .vorschau-band { font-size: 10.5px; padding: 8px 12px; bottom: 10px; } }
/* Solange das Vorschau-Band steht, sitzt der klebende Weiter-Knopf darüber */
body:has(.vorschau-band) .frage__fuss:has([data-weiter]) { bottom: 64px; }
@media (max-width: 620px) { body:has(.vorschau-band) .frage__fuss:has([data-weiter]) { bottom: 84px; } }

/* Vorschläge aus der Wettbewerbs-Analyse (30.09.2026), nur in website_neu/ sichtbar */
.kopf-tel { margin-left: auto; font: 500 14px/1 var(--fm); white-space: nowrap; color: inherit; text-decoration: none; }
.kopf-tel + .kopf-knopf { margin-left: 0; }
@media (max-width: 1100px) { .kopf-tel { display: none; } }
.held__versprechen strong { font-weight: 650; }
.held__belege { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--flechte); }
.held__belege li::before { content: "✓"; margin-right: 8px; color: var(--moosgruen); font-weight: 700; }
.branchen-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.branche-karte { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; color: #fff; text-decoration: none; }
.branche-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.branche-karte span { position: absolute; left: 16px; bottom: 16px; right: 16px; font: 400 24px/1.1 var(--fd); text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.branche-karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(23,35,28,.65)); }
.branche-karte span { z-index: 1; }
@media (hover: hover) { .branche-karte:hover img { transform: scale(1.04); } }
@media (max-width: 860px) { .branchen-raster { grid-template-columns: repeat(2, 1fr); } }
/* Handy: Branchen als einfache Wischleiste statt 3D-Wand (Yasir, 08.10.2026) */
@media (max-width: 760px) {
  .branchen-raster { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 28px calc(var(--rand) * -1) 0; padding: 4px var(--rand) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .branchen-raster::-webkit-scrollbar { display: none; }
  .branche-karte { flex: 0 0 72%; scroll-snap-align: center; aspect-ratio: 4 / 5; box-shadow: 0 18px 40px -26px rgb(23 35 28 / .55); }
  .branche-karte span { font-size: 22px; }
  .wand .wand__boden { display: none; }
}

/* Funnel-Einstieg auf der Seite: erste Frage als ein Tipp (08.10.2026) */
.einstieg { padding-block: clamp(56px, 8vw, 104px); }
.einstieg__rahmen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 3.4vw, 44px); border-radius: var(--karte); background: linear-gradient(135deg, rgb(255 255 255 / .86), rgb(248 249 245 / .6));
  border: 1px solid var(--linie); box-shadow: 0 30px 60px -44px rgb(23 35 28 / .6); }
.einstieg__kopf h2 { font: 300 clamp(30px, 3.4vw, 46px)/1.08 var(--fd); letter-spacing: -.02em; margin: 0 0 12px; }
.einstieg__kopf h2 em { color: var(--moosgruen); font-weight: 400; }
.einstieg__kopf p { margin: 0; max-width: 44ch; }
.einstieg__wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.einstieg__wahl { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: 16px;
  font: 600 15px/1.25 var(--fb); color: var(--moos); text-decoration: none; background: #fff; border: 1px solid rgb(23 35 28 / .1);
  box-shadow: 0 10px 24px -20px rgb(23 35 28 / .55); transition: transform .16s ease-out, border-color .2s ease, background-color .2s ease; }
.einstieg__wahl .pfeil { color: var(--moosgruen); }   /* derselbe Pfeil wie in den Knöpfen statt eines CSS-Winkels */
.einstieg__wahl:active { transform: scale(.98); }
.einstieg__wahl:focus-visible { outline: 3px solid var(--moosgruen); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .einstieg__wahl:hover { border-color: var(--moosgruen); background: var(--papier-hell); } }
@media (max-width: 760px) { .einstieg__rahmen { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .einstieg__wahlen { grid-template-columns: 1fr; } }
.schluss__klein, .klein { font-size: 14px; color: var(--flechte); margin-top: 14px; }

/* Funnel-Stupser: Handy Leiste unten, Rechner Kapsel unten rechts (08.10.2026) */
.stupser { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px;
  border-radius: 999px; background: rgb(248 249 245 / .82); border: 1px solid rgb(255 255 255 / .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 44px -18px rgb(23 35 28 / .55), inset 0 1px 0 rgb(255 255 255 / .7);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s var(--aus), transform .3s var(--aus); }
.stupser.ist-da { opacity: 1; transform: none; pointer-events: auto; }
.stupser__text { display: grid; line-height: 1.2; }
.stupser__text b { font: 600 14px/1.2 var(--fb); }
.stupser__text small { font: 500 12.5px/1.2 var(--fm); color: var(--flechte); }
.stupser__knopf { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 760px) {
  .stupser { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); justify-content: space-between; }
  body .kapitel { display: none; }   /* Platz unten gehört am Handy dem Stupser */
}
@media (prefers-reduced-motion: reduce) { .stupser { transition: opacity .2s ease; transform: none; } }
@media (prefers-reduced-transparency: reduce) { .stupser { background: var(--papier-hell); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.garantie { display: grid; gap: 6px; padding: 22px 26px; border-radius: 18px; margin: 28px 0 18px; }
.garantie b { font: 400 26px/1.1 var(--fd); }

/* ===================================================================================================
   Imagefilm auf der Startseite (Yasir, 01.10.2026, Vorbild sadumedia.com)
   Film-Held: „Websites ▢ von Hand gebaut.“, das Fenster wächst beim Scrollen zum Vollbild-Film (die eine dunkle Fläche),
   darauf Logo und Play Reel. Der Reel-Player fährt von unten herein. Danach Wortstapel, Arbeiten-Bühne, Film-Schluss.
   =================================================================================================== */
.filmheld { position: relative; height: 290vh; }
.filmheld__buehne { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.filmheld__titel { position: absolute; z-index: 3; pointer-events: none; left: var(--rand); right: var(--rand); top: 50%; translate: 0 -50%;
  font: 500 clamp(54px, 9.4vw, 168px)/.92 var(--fd); letter-spacing: -.035em; }
.filmheld__zeile { display: flex; align-items: center; gap: .18em; white-space: nowrap; }
.filmheld__zeile--2 { padding-left: 1em; padding-bottom: .06em; }
.filmheld__titel em { font-style: italic; font-weight: 400; }
.filmheld__platz { display: inline-block; flex: none; width: 2.3em; height: .74em; border-radius: .16em; }
.filmheld__wort { display: inline-block; will-change: transform, opacity; }
.filmheld__fenster { position: absolute; inset: 0; background: var(--moos); clip-path: inset(40% 40% 40% 40% round 24px); will-change: clip-path; }
.filmheld__fenster video { width: 100%; height: 100%; object-fit: cover; }
.filmheld__fenster::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--schleier, 0);
  background: radial-gradient(60% 55% at 50% 48%, rgb(17 26 21 / .55), rgb(17 26 21 / .25) 60%, rgb(17 26 21 / .45)); }
.filmheld__flaeche { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.filmheld__marke { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 34px;
  opacity: var(--marke, 0); pointer-events: none; }
.filmheld__marke > svg { width: clamp(240px, 30vw, 460px); height: auto; filter: drop-shadow(0 6px 30px rgb(10 16 12 / .45)); }
.filmheld[data-voll] .filmheld__marke { pointer-events: auto; }
.reel-knopf { display: inline-flex; align-items: center; gap: 16px; border: 0; background: none; color: var(--papier); cursor: pointer;
  font: 500 13px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; padding: 8px; }
.reel-knopf i { position: relative; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--limette); transition: transform 200ms var(--aus); }
.reel-knopf i::after { content: ""; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--limette); }
@media (hover: hover) { .reel-knopf:hover i { transform: scale(1.08); } }
.reel-knopf:active i { transform: scale(.96); }
@media (max-width: 640px) { .filmheld__titel { font-size: 13.2vw; } .filmheld__zeile--2 { padding-left: 0; } .filmheld__platz { width: 1.7em; } }

/* Reel-Player: fährt von unten nach oben herein, Knöpfe als Etiketten */
.reel { position: fixed; inset: 0; z-index: 120; background: #0E1511; display: grid; grid-template-rows: auto 1fr auto; padding: 18px 22px 22px;
  translate: 0 100%; transition: translate 650ms var(--inaus); }
.reel.ist-offen { translate: 0 0; }
.reel__video { width: 100%; height: 100%; object-fit: contain; min-height: 0; background: #000; }
.reel__zu { justify-self: center; margin-bottom: 14px; }
.reel__leiste { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; margin-top: 14px; }
.reel__knopf { height: 34px; padding: 0 14px; border: 0; border-radius: 4px; background: var(--papier); color: var(--moos); cursor: pointer;
  font: 800 15px/1 var(--fb); letter-spacing: -.01em; text-transform: uppercase; transition: transform 140ms var(--aus); }
.reel__knopf:active { transform: scale(.97); }
.reel__zeit { position: relative; height: 34px; border-radius: 4px; background: rgb(240 242 236 / .12); cursor: pointer; overflow: hidden; }
.reel__zeit i { position: absolute; inset: 0 auto 0 0; width: var(--fortschritt, 0%); background: var(--limette); }
@media (max-width: 640px) { .reel { padding: 12px; } .reel__leiste { grid-template-columns: auto 1fr auto; } .reel__leiste [data-reel-voll] { display: none; } }

/* Wortstapel */
.wortstapel { padding: clamp(110px, 18vh, 200px) var(--rand) clamp(70px, 10vh, 120px); text-align: center; }
.wortstapel__wort { margin: 0; font: 500 clamp(56px, 10vw, 170px)/1.02 var(--fd); letter-spacing: -.035em; }
.wortstapel__schluss { margin: clamp(56px, 9vh, 100px) auto 0; max-width: 18ch; font: 400 clamp(30px, 4.2vw, 64px)/1.1 var(--fd); letter-spacing: -.02em; }
.wortstapel__schluss em { color: var(--moosgruen); }

/* Arbeiten-Bühne: Titel steht, Karten fahren darüber */
.arbeitsbuehne { position: relative; padding-bottom: 10vh; }
.arbeitsbuehne__titel { position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; text-align: center; padding: 0 var(--rand); }
.arbeitsbuehne__titel h2 { font: 500 clamp(52px, 8.6vw, 144px)/.96 var(--fd); letter-spacing: -.035em; }
.arbeitsbuehne__titel em { color: var(--flechte); font-weight: 400; }
.arbeitsbuehne__karten { position: relative; z-index: 1; margin-top: -30dvh; display: grid; gap: 20vh; padding: 0 var(--rand); }
.arbeitskarte { width: min(1080px, 100%); margin: 0 auto; }
.arbeitskarte:nth-child(odd) { translate: -6vw 0; } .arbeitskarte:nth-child(even) { translate: 6vw 0; }
.arbeitskarte a { display: block; text-decoration: none; }
.arbeitskarte figure { margin: 0; border-radius: var(--bild); overflow: hidden; box-shadow: 0 50px 120px rgb(23 35 28 / .26); background: var(--moos); }
.arbeitskarte img { width: 100%; height: auto; transition: transform 400ms var(--aus); }
@media (hover: hover) { .arbeitskarte a:hover img { transform: scale(1.02); } }
.arbeitskarte__unter { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 15px; color: var(--flechte); }
.arbeitskarte__unter b { color: var(--moos); font-weight: 600; }
.arbeitsbuehne__mehr { position: relative; z-index: 1; text-align: center; margin-top: 12vh; }
@media (max-width: 760px) { .arbeitskarte:nth-child(n) { translate: 0 0; } .arbeitsbuehne__karten { gap: 10vh; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .arbeitskarte figure { animation: karte-heben linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes karte-heben { from { transform: scale(.9) rotate(-1.5deg); } to { transform: none; } }
  }
}

/* Film-Schluss */
.filmschluss { padding: clamp(100px, 16vh, 180px) var(--rand) clamp(80px, 12vh, 140px); }
.filmschluss__geteilt { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 3vw, 48px);
  font: 500 clamp(38px, 5.4vw, 92px)/1 var(--fd); letter-spacing: -.03em; }
.filmschluss__r { text-align: right; } .filmschluss__r em { font-weight: 400; color: var(--moosgruen); }
.filmschluss__fenster { display: block; width: clamp(220px, 26vw, 420px); aspect-ratio: 2.39 / 1; border-radius: var(--bild); overflow: hidden; box-shadow: 0 30px 80px rgb(23 35 28 / .28); }
.filmschluss__fenster video { width: 100%; height: 100%; object-fit: cover; }
.filmschluss__knopf { display: flex; justify-content: center; margin-top: clamp(44px, 7vh, 72px); }
@media (max-width: 860px) { .filmschluss__geteilt { grid-template-columns: 1fr; text-align: center; } .filmschluss__r { text-align: center; } .filmschluss__fenster { margin: 0 auto; } }

@media (prefers-reduced-motion: reduce) {
  .filmheld { height: auto; }
  .filmheld__buehne { position: relative; height: auto; display: grid; gap: 28px; padding: 80px var(--rand); }
  .filmheld__titel { position: static; translate: none; }
  .filmheld__fenster { position: relative; aspect-ratio: 2.39 / 1; clip-path: none; border-radius: var(--bild); --marke: 1; --schleier: 1; }
  .filmheld__marke { pointer-events: auto; }
  .reel { transition: none; }
}

/* ---------- Drei kleine Effekte aus der Showcase-Auswertung (Yasir, 01.10.2026, Referenz_Showcases_2026-10-01) ---------- */

/* Kapitel-Pille: zeigt unter der Kapsel, in welchem Abschnitt man ist, mit Fortschrittspunkten */
.kapitel { position: fixed; z-index: 70; top: 92px; left: 50%; display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px;
  border-radius: 999px; font: 500 13px/1 var(--fb); color: var(--moos); opacity: 0; translate: -50% -8px; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .66), rgb(255 255 255 / .38)); border: 1px solid rgb(255 255 255 / .7);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 8px 26px rgb(23 35 28 / .10); transition: opacity 260ms var(--aus), translate 260ms var(--aus); }
.kapitel.ist-an { opacity: 1; translate: -50% 0; }
.kapitel__name { display: inline-block; min-width: 9ch; text-align: center; }
.kapitel__name sup { font: 500 10px/1 var(--fm); margin-left: 2px; color: var(--moosgruen); }
.kapitel__name.wechselt { animation: kapitel-rollen 300ms var(--aus); }
@keyframes kapitel-rollen { from { opacity: 0; transform: translateY(6px); } }
.kapitel__punkte { display: flex; gap: 5px; }
.kapitel__punkte i { width: 5px; height: 5px; border-radius: 50%; background: rgb(23 35 28 / .22); transition: background 200ms ease, transform 200ms var(--aus); }
.kapitel__punkte i.an { background: var(--moosgruen); transform: scale(1.3); }
@media (max-width: 760px) { .kapitel { top: auto; bottom: 16px; } }

/* Handnotiz an „von Hand gebaut“: Pfeil zeichnet sich, Notiz erscheint */
.filmheld__wort--r { position: relative; }
.handnotiz { position: absolute; left: 92%; bottom: 58%; display: flex; flex-direction: column; align-items: flex-start; gap: 0; pointer-events: none; }
@font-face { font-family: "Caveat"; src: url("../schrift/caveat-handnotiz.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.handnotiz__text { font: 500 clamp(20px, 1.9vw, 30px)/1 "Caveat", var(--fd); letter-spacing: 0; color: var(--moosgruen); white-space: nowrap;
  rotate: -4deg; translate: 0 -.4em; }
.handnotiz svg { width: clamp(60px, 6vw, 100px); height: auto; translate: -.35em .05em; }
.handnotiz path { stroke: var(--moosgruen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .handnotiz { view-timeline: --notiz block; }
    .handnotiz path { animation: notiz-zeichnen linear both; animation-timeline: --notiz; animation-range: entry 60% cover 45%; }
    .handnotiz path + path { animation-range: cover 38% cover 52%; }
    .handnotiz__text { animation: notiz-text linear both; animation-timeline: --notiz; animation-range: entry 70% cover 40%; }
    @keyframes notiz-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes notiz-text { from { opacity: 0; translate: 0 0; } to { opacity: 1; translate: 0 -.4em; } }
  }
}
@media (max-width: 900px) { .handnotiz { display: none; } }

/* Arbeiten-Bühne: der stehende Titel tritt zurück, sobald die Projekte darüberfahren */
.arbeitsbuehne { timeline-scope: --karten; }
.arbeitsbuehne__karten { view-timeline: --karten block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .arbeitsbuehne__titel h2 { animation: titel-zurueck linear both; animation-timeline: --karten; animation-range: entry 0% entry 45%; }
    @keyframes titel-zurueck { to { filter: blur(7px); opacity: .32; transform: scale(.94); } }
  }
}