/* KI-Mitarbeiter Masterclass
   Ein Stylesheet für alle Seiten. Farben und Maße stehen als Variablen in :root.
   Hell und dunkel wechseln je Abschnitt über die Klassen .dunkel / .hell. */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-kursiv.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Grundwerte ---------- */
:root {
  --schiefer: #141413;
  --schiefer-2: #1F1E1D;
  --schiefer-3: #262523;
  --schiefer-tief: #0E0E0D;
  --linie-dunkel: #2B2A27;
  --elfenbein: #FAF9F5;
  --elfenbein-2: #F0EEE6;
  --linie-hell: #E5E2DA;
  --weiss: #FFFFFF;
  --text-dunkel: #1F1E1D;
  --text-dunkel-2: #4A4741;
  --text-hell: #F0EEE6;
  --text-hell-2: #C9C6BD;
  --gedaempft: #8F8B82;        /* auf Dunkel */
  --gedaempft-hell: #6B675F;   /* auf Hell, AA-Kontrast */
  --terrakotta: #D97757;
  --terrakotta-hover: #E78D6E;
  --terrakotta-tief: #C15F3C;
  --terrakotta-text: #A9502F;  /* kleine Akzentschrift auf Hell, AA-Kontrast */
  --gold: #D4A27F;
  --fehler: #B3261E;

  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --rand: clamp(16px, 4vw, 48px);
  --breite: 1200px;
  --r-s: 10px;
  --r: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(.22, .7, .18, 1);
  --schatten-tief: 0 40px 90px -40px rgba(0, 0, 0, .65), 0 14px 34px -16px rgba(0, 0, 0, .4);
  --abstand: clamp(84px, 11vw, 152px);
  --korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: var(--schiefer);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--schiefer);
  color: var(--text-hell);
  font-family: var(--schrift);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; }
ul, ol { margin: 0; }
strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--terrakotta); outline-offset: 3px; border-radius: 6px; }

::selection { background: rgba(217, 119, 87, .35); color: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprunglink {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--terrakotta); color: var(--schiefer);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.sprunglink:focus { top: 12px; }

.nb { white-space: nowrap; }
.nb em { padding-right: 0; margin-right: -.03em; }

/* Symbole aus /img/symbole.svg */
.symbol {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Rahmen und Abschnitte ---------- */
.rahmen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.rahmen-schmal { max-width: calc(860px + 2 * var(--rand)); }

.abschnitt { position: relative; padding-block: var(--abstand); }
.abschnitt-eng { position: relative; padding-block: clamp(64px, 8vw, 104px); }

.dunkel, .dunkel-2 {
  --text: var(--text-hell);
  --text-2: var(--text-hell-2);
  --leise: var(--gedaempft);
  --akzent: var(--terrakotta);
  --akzent-text: var(--terrakotta);
  --linie: var(--linie-dunkel);
  --karte: var(--schiefer-2);
  --rand-knopf: rgba(240, 238, 230, .28);
  background: var(--schiefer);
  color: var(--text);
}
.dunkel-2 { background: var(--schiefer-2); --karte: var(--schiefer-3); }

.hell, .hell-2 {
  --text: var(--text-dunkel);
  --text-2: var(--text-dunkel-2);
  --leise: var(--gedaempft-hell);
  --akzent: var(--terrakotta-tief);
  --akzent-text: var(--terrakotta-text);
  --linie: var(--linie-hell);
  --karte: var(--weiss);
  --rand-knopf: rgba(31, 30, 29, .26);
  background: var(--elfenbein);
  color: var(--text);
}
.hell-2 { background: var(--elfenbein-2); }

/* Filmkorn auf dunklen Flächen */
.korn { position: relative; isolation: isolate; }
.korn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--korn); background-size: 180px 180px; opacity: .05; mix-blend-mode: overlay;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.1rem + 3.9vw, 4.35rem); letter-spacing: -0.042em; line-height: .98; }
h2 { font-size: clamp(2.05rem, 1.1rem + 3.15vw, 3.55rem); line-height: 1.03; }
h3 { font-size: clamp(1.18rem, 1.05rem + .45vw, 1.42rem); letter-spacing: -0.02em; line-height: 1.22; }

h1 em, h2 em, .akzent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: 1.1em;
  line-height: .9;
  color: var(--akzent);
  padding-right: .04em;
}
.leise-text { color: var(--leise); }

.kicker {
  display: inline-flex; align-items: center; gap: .8em;
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .85; flex: none; }
.kicker-mitte { justify-content: center; }

.titelblock { max-width: 900px; }
.titelblock-mitte { margin-inline: auto; text-align: center; }
.titelblock-mitte .kicker { justify-content: center; }
.titelblock { margin-bottom: clamp(40px, 5vw, 72px); }
.titelblock-knapp { margin-bottom: 0; }
.titelblock-knapp .kicker { margin-bottom: 1.2rem; }

.einleitung { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.55; color: var(--text-2); }

/* ---------- Knöpfe ---------- */
.knopf {
  --kh: 56px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--kh);
  padding: 0 1.65em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--terrakotta);
  color: var(--schiefer);
  font: 700 1.02rem/1.15 var(--schrift);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 30px -14px rgba(217, 119, 87, .8);
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .3s var(--ease), border-color .25s, color .2s;
}
.knopf:hover {
  background: var(--terrakotta-hover);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 20px 42px -16px rgba(217, 119, 87, .95), 0 0 0 5px rgba(217, 119, 87, .16);
}
.knopf:active { transform: translateY(0); }
.knopf:focus-visible { border-radius: 999px; }
.knopf .symbol { width: 1.15em; height: 1.15em; stroke-width: 2; transition: transform .25s var(--ease); }
.knopf:hover .symbol-pfeil { transform: translateX(4px); }
.knopf-gross { --kh: 62px; padding: 0 2em; font-size: 1.08rem; }
.knopf-klein { --kh: 44px; padding: 0 1.25em; font-size: .92rem; }
.knopf-voll { width: 100%; }

.knopf-zweit {
  background: transparent;
  color: var(--text);
  border-color: var(--rand-knopf);
  box-shadow: none;
}
.knopf-zweit:hover {
  background: rgba(127, 127, 127, .1);
  border-color: var(--text);
  box-shadow: none;
}
.knopf[disabled], .knopf.laedt { cursor: progress; opacity: .75; transform: none; }
.knopf.laedt .symbol-pfeil { display: none; }
.knopf.laedt::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: drehen .8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

.textlink {
  color: var(--akzent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.textlink:hover { text-decoration-thickness: 2px; }

/* ---------- Leiste ganz oben ---------- */
.leiste {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 20, 19, .93);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--linie-dunkel);
  color: var(--text-hell-2);
  font-size: .84rem;
  line-height: 1.4;
}
.leiste-innen {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .25rem .85rem;
  min-height: 44px;
  padding-block: 7px;
  text-align: center;
}
.leiste strong { color: var(--text-hell); font-weight: 600; }
.leiste-breit, .leiste-schmal { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .85rem; }
.leiste-schmal { display: none; }
@media (max-width: 1099px) {
  .leiste-breit { display: none; }
  .leiste-schmal { display: inline-flex; }
}
.leiste .knapp, .leiste .knapp strong { color: var(--terrakotta); }
.leiste-trenner { color: #55534D; }
.leiste-preis s { color: var(--gedaempft); text-decoration-color: var(--terrakotta); }
.leiste-link {
  display: inline-flex; align-items: center; gap: .3em;
  color: var(--terrakotta); font-weight: 700; text-decoration: none;
}
.leiste-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.leiste-link .symbol { width: 1em; height: 1em; stroke-width: 2.2; }
.live-punkt {
  position: relative; display: inline-block; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terrakotta);
  animation: puls 2.4s var(--ease) infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(217, 119, 87, .55); }
  70% { box-shadow: 0 0 0 9px rgba(217, 119, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); }
}

/* ---------- Kopf ---------- */
.kopf {
  position: relative; z-index: 40;
  background: var(--schiefer);
  border-bottom: 1px solid var(--linie-dunkel);
  color: var(--text-hell);
}
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 76px; }
.ueber-bild .kopf { background: transparent; border-bottom-color: transparent; margin-bottom: -76px; }

.marke {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--text-hell); text-decoration: none;
  font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; line-height: 1;
}
.marke img { width: 34px; height: 34px; border-radius: 9px; }
.marke em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.16em; letter-spacing: 0; color: var(--gold); }

.kopf-nav { display: flex; align-items: center; gap: 1.9rem; }
.kopf-nav a:not(.knopf) {
  color: var(--text-hell-2); text-decoration: none; font-size: .94rem; font-weight: 500;
  transition: color .2s;
}
.kopf-nav a:not(.knopf):hover { color: var(--text-hell); }

/* Seiten ohne Verkauf im Kopf (Live-Demo, Danke-Seiten) */
.seite-live .kopf-nav { display: none; }
.ohne-verkauf .kopf-nav .knopf { display: none; }

/* ---------- Hero (Verkaufsseite) ---------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(660px, 96vh, 960px);
  padding-block: 150px 64px;
  overflow: clip;
  isolation: isolate;
}
.hero-bild { position: absolute; inset: 0; z-index: -2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 38%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 20, 19, .97) 0%, rgba(20, 20, 19, .9) 28%, rgba(20, 20, 19, .5) 50%, rgba(20, 20, 19, 0) 70%),
    linear-gradient(0deg, var(--schiefer) 0%, rgba(20, 20, 19, 0) 26%),
    linear-gradient(180deg, rgba(20, 20, 19, .65) 0%, rgba(20, 20, 19, 0) 18%);
}
.hero-text { display: flex; flex-direction: column; max-width: 700px; }
.hero h1 { margin-bottom: 1.6rem; }
.hero-unterzeile {
  max-width: 34em; margin-bottom: 2.1rem;
  font-size: clamp(1.06rem, .98rem + .42vw, 1.3rem); line-height: 1.55; color: var(--text-hell-2);
}
.hero-person { display: flex; align-items: center; gap: 1rem; max-width: 33em; margin: 0 0 2.2rem; }
.hero-person picture { flex: none; width: 58px; height: 58px; }
.hero-person img {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 24%;
  border: 2px solid rgba(217, 119, 87, .7);
  box-shadow: 0 0 0 5px rgba(217, 119, 87, .12);
}
.hero-person blockquote { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--text-hell); }
.hero-person-name { display: block; margin-top: .3rem; font-size: .84rem; color: var(--gedaempft); }
.hero-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.hero-preis { margin: 1.05rem 0 0; font-size: .87rem; color: var(--gedaempft); }
.hero-preis strong { color: var(--text-hell-2); font-weight: 600; }
.vertrauen {
  display: flex; flex-wrap: wrap; gap: .7rem 1.7rem;
  margin: 2.4rem 0 0; padding: 1.4rem 0 0; list-style: none;
  border-top: 1px solid rgba(240, 238, 230, .12);
  font-size: .9rem; color: var(--text-hell-2);
}
.vertrauen li { display: inline-flex; align-items: center; gap: .5rem; }
.vertrauen .symbol { width: 18px; height: 18px; color: var(--gold); }

/* ---------- Terminal ---------- */
.terminal-abschnitt { padding-top: clamp(40px, 5vw, 72px); overflow: clip; }
.terminal-abschnitt .kicker { justify-content: center; }
.terminal-buehne { position: relative; max-width: 940px; margin: 0 auto; }
.terminal-buehne::before {
  content: ""; position: absolute; inset: -12% -8% -18%; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 46% at 50% 52%, rgba(217, 119, 87, .26), rgba(217, 119, 87, 0) 72%);
  filter: blur(10px);
}
.terminal {
  position: relative; z-index: 1;
  overflow: hidden;
  border: 1px solid #302F2B;
  border-radius: 16px;
  background: var(--schiefer-tief);
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(255, 255, 255, .04);
  font-family: var(--mono);
}
.terminal-kopf {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid #24231F;
  background: linear-gradient(#1B1A18, #151413);
}
.terminal-kopf i { width: 11px; height: 11px; border-radius: 50%; background: #3B3A36; }
.terminal-titel {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .76rem; color: var(--gedaempft); letter-spacing: .03em; white-space: nowrap;
}
.terminal-nochmal {
  margin-left: auto;
  display: grid; place-items: center;
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--gedaempft); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .3s, color .2s, border-color .2s;
}
.terminal-nochmal .symbol { width: 16px; height: 16px; }
.terminal-nochmal.da { opacity: 1; pointer-events: auto; }
.terminal-nochmal:hover { color: var(--text-hell); border-color: #34332F; }
.terminal-koerper {
  padding: clamp(20px, 3vw, 34px) clamp(18px, 3.4vw, 40px) clamp(26px, 3.6vw, 42px);
  font-size: clamp(.8rem, .72rem + .36vw, 1rem);
  line-height: 1.75;
  color: var(--text-hell);
}
.t-anhang { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.15rem; }
.t-datei {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .7rem;
  border: 1px solid #302F2B; border-radius: 8px;
  background: #181716; color: var(--text-hell-2);
  font-size: .82em;
}
.t-datei .symbol { width: 1.1em; height: 1.1em; color: var(--gold); }
.t-zeile { display: flex; gap: .85em; }
.t-prompt { flex: none; color: var(--terrakotta); font-weight: 700; }
.t-eingabe { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-rest { color: transparent; }
.t-cursor {
  display: inline-block; width: .58em; height: 1.15em; margin-right: -.58em;
  vertical-align: -.2em; background: var(--terrakotta);
  animation: blinken 1.05s steps(2, start) infinite;
}
@keyframes blinken { to { visibility: hidden; } }
.t-ergebnisse { margin: 1.35rem 0 0; padding: 0 0 0 1.75em; list-style: none; }
.t-ergebnisse li { display: flex; gap: .8em; }
.t-zeichen { flex: none; width: 1em; color: var(--gold); font-weight: 700; }
.t-fertig { margin-top: .55rem; color: var(--terrakotta); font-weight: 700; }
.t-fertig .t-name {
  color: var(--text-hell); font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(217, 119, 87, .65); text-underline-offset: 4px;
}
.t-verborgen { visibility: hidden; }

/* Ergebnis-Karte (das gebaute Werkzeug) */
.t-ergebnis {
  position: absolute; z-index: 2;
  right: -44px; bottom: -64px;
  width: 300px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--elfenbein);
  color: var(--text-dunkel);
  font-family: var(--schrift);
  box-shadow: 0 46px 90px -36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07), 0 0 60px -10px rgba(217, 119, 87, .35);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.t-ergebnis.wartet { opacity: 0; transform: translateY(18px) scale(.96); }
.t-ergebnis-kopf {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--linie-hell);
  background: var(--elfenbein-2);
  font-family: var(--mono); font-size: .66rem; color: var(--gedaempft-hell);
}
.t-ergebnis-kopf i { width: 7px; height: 7px; border-radius: 50%; background: #D3CFC4; }
.t-ergebnis-kopf span { margin-left: 6px; }
.t-ergebnis-innen { padding: 14px 16px 16px; }
.t-ergebnis-titel { margin: 0 0 12px; font-size: .92rem; font-weight: 800; letter-spacing: -0.02em; }
.t-feld { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .72rem; color: var(--gedaempft-hell); font-weight: 600; }
.t-balken { height: 22px; border-radius: 6px; background: var(--weiss); border: 1px solid var(--linie-hell); display: flex; align-items: center; padding: 0 8px; gap: 6px; }
.t-balken b { display: block; height: 5px; border-radius: 3px; background: #D9D4C7; }
.t-balken b.w1 { width: 62%; } .t-balken b.w2 { width: 38%; } .t-balken b.w3 { width: 24%; } .t-balken b.w4 { width: 50%; }
.t-balken b.akz { background: var(--terrakotta); width: 22%; }
.t-pdf {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; height: 32px; border-radius: 999px;
  background: var(--terrakotta); color: var(--schiefer); font-size: .74rem; font-weight: 700;
}
.t-pdf .symbol { width: 14px; height: 14px; stroke-width: 2; }

.aussage {
  max-width: 900px;
  margin: clamp(96px, 10vw, 136px) auto 0;
  text-align: center;
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1.28; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text-hell);
  text-wrap: balance;
}
.aussage em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--gold); letter-spacing: 0; }
.aussage .leise { color: var(--gedaempft); font-weight: 600; }

/* ---------- Problem ---------- */
.problem-raster {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.schmerz-liste { margin: 0; padding: 0; list-style: none; counter-reset: schmerz; border-top: 1px solid var(--linie); }
.schmerz-liste li {
  display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .9rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: clamp(1.05rem, .98rem + .32vw, 1.24rem); line-height: 1.5;
}
.schmerz-liste li::before {
  counter-increment: schmerz; content: counter(schmerz, decimal-leading-zero);
  padding-top: .38em;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--akzent-text);
}
.schmerz-liste li:last-child { color: var(--akzent-text); font-weight: 600; }
.problem-bild { position: sticky; top: 92px; }
.problem-bild picture {
  overflow: hidden; border-radius: var(--r-xl);
  box-shadow: 0 50px 90px -50px rgba(31, 30, 29, .55);
}
.wende {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 5vw, 80px);
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--linie);
}
.wende-titel { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.wende-text { font-size: clamp(1.1rem, 1rem + .45vw, 1.36rem); line-height: 1.55; color: var(--text-2); margin: 0; }
.wende-text em {
  font-family: var(--serif); font-style: italic; font-size: 1.32em; line-height: 1;
  color: var(--akzent); letter-spacing: 0;
}

/* ---------- Wechsel: Tresen oder Handwerker ---------- */
.wechsel-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1.12fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 36px);
  align-items: center;
}
.wechsel-bild picture { overflow: hidden; border-radius: var(--r-l); box-shadow: var(--schatten-tief); }
.vergleich {
  height: 100%;
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-l);
  background: var(--schiefer-2);
  display: flex; flex-direction: column; justify-content: center;
}
.vergleich-symbol {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: 1.3rem;
  border-radius: 15px;
}
.vergleich-symbol .symbol { width: 24px; height: 24px; }
.vergleich-rolle {
  display: block; margin-bottom: .55rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
}
.vergleich h3 { margin-bottom: .9rem; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.vergleich p { margin: 0; color: var(--text-hell-2); font-size: 1.02rem; }
.vergleich.tresen .vergleich-symbol { background: rgba(157, 179, 200, .1); color: #A9BDD1; border: 1px solid rgba(157, 179, 200, .22); }
.vergleich.tresen .vergleich-rolle { color: #93A6B9; }
.vergleich.tresen h3 { color: #DCE3EA; }
.vergleich.handwerker {
  border-color: rgba(217, 119, 87, .5);
  background: linear-gradient(165deg, rgba(217, 119, 87, .16), rgba(217, 119, 87, .04) 60%), var(--schiefer-2);
  box-shadow: 0 40px 80px -46px rgba(217, 119, 87, .55);
}
.vergleich.handwerker .vergleich-symbol { background: var(--terrakotta); color: var(--schiefer); }
.vergleich.handwerker .vergleich-rolle { color: var(--terrakotta); }
.vergleich.handwerker p { color: var(--text-hell); }

.zitat-gross { max-width: 1000px; margin: clamp(64px, 8vw, 112px) auto 0; text-align: center; }
.zitat-gross blockquote {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.15rem); line-height: 1.16; letter-spacing: -0.005em;
  color: var(--text-hell); text-wrap: balance;
}
.zitat-gross blockquote b { font-weight: 400; color: var(--terrakotta); }
.zitat-gross figcaption {
  margin-top: 1.4rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft);
}

/* ---------- Wer ich bin ---------- */
.ich-raster {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 100px); align-items: center;
}
.ich-foto { position: relative; margin: 0; }
.ich-foto picture { overflow: hidden; border-radius: var(--r-xl); box-shadow: 0 50px 90px -50px rgba(31, 30, 29, .6); }
.ich-foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.ich-foto figcaption {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: rgba(250, 249, 245, .94); color: var(--text-dunkel);
  font-size: .84rem; font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}
.ich-foto figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--terrakotta); }
.ich-text h2 { margin-bottom: 1.8rem; }
.ich-text p:not(.kicker) { font-size: clamp(1.03rem, .98rem + .22vw, 1.14rem); color: var(--text-2); }

.zahlen {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(64px, 8vw, 104px);
  border-radius: var(--r-xl);
  background: var(--schiefer); color: var(--text-hell);
}
.zahlen::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 120% at 0% 0%, rgba(217, 119, 87, .2), rgba(217, 119, 87, 0) 60%);
}
.zahl { padding: clamp(28px, 3.4vw, 46px) clamp(20px, 2.6vw, 38px); border-left: 1px solid var(--linie-dunkel); }
.zahl:first-child { border-left: 0; }
.zahl-wert {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  margin: 0;
  font-size: clamp(2.7rem, 1.6rem + 2.9vw, 4.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.zahl-einheit { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; color: var(--text-hell); }
.zahl-text { margin: .3rem 0 0; font-size: .92rem; color: var(--gedaempft); }

.belege {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none;
}
.beleg {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--linie-hell); border-radius: var(--r-l);
  background: var(--weiss);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.beleg:hover { transform: translateY(-3px); border-color: #D9D3C6; box-shadow: 0 28px 50px -34px rgba(31, 30, 29, .45); }
.beleg-nr {
  display: block; margin-bottom: 1rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--akzent-text);
}
.beleg p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--text-2); }
.beleg strong { color: var(--text-dunkel); font-size: 1.08rem; letter-spacing: -0.015em; line-height: 1.32; }
.beleg strong.zeile { display: block; margin-bottom: .5rem; }
.schaetzung { max-width: 62ch; margin: 28px auto 0; text-align: center; font-size: .94rem; color: var(--leise); }

.zitat-kasten {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(64px, 8vw, 104px);
  padding: clamp(28px, 4.5vw, 60px);
  border-radius: var(--r-xl);
  background: var(--elfenbein-2);
}
.zitat-zeichen { font-family: var(--serif); font-style: italic; font-size: clamp(5rem, 3rem + 5vw, 8rem); line-height: .62; color: var(--terrakotta); }
.zitat-kasten blockquote {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.6rem, 1.05rem + 2vw, 2.6rem); line-height: 1.18;
  color: var(--text-dunkel); text-wrap: balance;
}
.nachsatz { max-width: 64ch; margin: 1.6rem 0 0; font-size: 1.02rem; color: var(--text-2); }
.nachsatz strong { color: var(--text-dunkel); }

/* ---------- Methode ---------- */
.methode-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin: 0; padding: 0; list-style: none;
}
.methode-plus {
  z-index: 2; align-self: center;
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 -10px;
  border: 1px solid #383733; border-radius: 50%;
  background: var(--schiefer); color: var(--terrakotta);
  box-shadow: 0 0 0 6px var(--schiefer);
}
.methode-plus .symbol { width: 18px; height: 18px; stroke-width: 2.2; }
.teil {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linie-dunkel); border-radius: var(--r-l);
  background: var(--schiefer-2);
  transition: border-color .35s, transform .45s var(--ease);
}
.teil:hover { border-color: rgba(217, 119, 87, .5); transform: translateY(-4px); }
.teil-bild { position: relative; overflow: hidden; }
.teil-bild img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s var(--ease); }
.teil:hover .teil-bild img { transform: scale(1.045); }
.teil-bild::after {
  content: ""; position: absolute; inset: auto 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(0deg, var(--schiefer-2), rgba(31, 30, 29, 0));
}
.teil-text { padding: 4px clamp(22px, 2.4vw, 30px) clamp(26px, 2.8vw, 34px); }
.teil-nr { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.teil h3 { margin: .5rem 0 .85rem; font-size: clamp(1.55rem, 1.15rem + 1vw, 2rem); }
.teil p { margin: 0; color: var(--text-hell-2); }
.bild-gehirn img { object-position: 50% 38%; }
.bild-orga img { object-position: 50% 50%; }

/* ---------- Was du um 13 Uhr hast ---------- */
.ergebnis-raster {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.ergebnis-kopf { position: sticky; top: 92px; }
.uhr-gross {
  display: block; margin-top: clamp(24px, 4vw, 56px);
  font-size: clamp(4.5rem, 2rem + 9vw, 10.5rem); font-weight: 800; letter-spacing: -0.06em; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--terrakotta-tief);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.haken-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.haken-liste li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 18px 22px 18px 18px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--weiss);
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem); line-height: 1.45;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.haken-liste li:hover { transform: translateX(4px); box-shadow: 0 18px 36px -28px rgba(31, 30, 29, .5); }
.haken-kreis {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--terrakotta); color: var(--schiefer);
}
.haken-kreis .symbol { width: 20px; height: 20px; stroke-width: 2.4; }

/* ---------- Ablauf ---------- */
.ablauf-raster {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.ablauf-bild { position: sticky; top: 92px; }
.ablauf-bild picture { overflow: hidden; border-radius: var(--r-l); box-shadow: var(--schatten-tief); }
.ablauf-bild img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 50%; }
.ablauf-hinweis {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  margin-top: 18px; padding: 20px 22px;
  border: 1px solid var(--linie-dunkel); border-radius: var(--r);
  background: var(--schiefer-3); color: var(--text-hell-2); font-size: .98rem;
}
.ablauf-hinweis .symbol { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.zeitstrahl { position: relative; margin: 0; padding: 0; list-style: none; }
.zeitstrahl::before {
  content: ""; position: absolute; left: 7px; top: 12px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, var(--terrakotta), rgba(217, 119, 87, .5) 70%, rgba(217, 119, 87, .12));
}
.zeitstrahl li { position: relative; padding: 0 0 30px 46px; }
.zeitstrahl li:last-child { padding-bottom: 0; }
.zeitstrahl li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--schiefer-2); border: 2px solid var(--terrakotta);
  box-shadow: 0 0 0 5px var(--schiefer-2);
}
.zeitstrahl li.rand::before { border-color: var(--gedaempft); }
.zeit { display: block; margin-bottom: .25rem; font-family: var(--mono); font-size: .84rem; letter-spacing: .06em; color: var(--gold); }
.zeitstrahl h3 { margin-bottom: .35rem; font-size: clamp(1.12rem, 1.04rem + .3vw, 1.3rem); }
.zeitstrahl p { margin: 0; color: var(--text-hell-2); font-size: 1rem; }
.zeitstrahl li.rand h3 { color: var(--text-hell-2); }

/* ---------- Was Unternehmer bauen ---------- */
.kacheln {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.kachel {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 24px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--weiss);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.kachel:hover { transform: translateY(-3px); border-color: rgba(193, 95, 60, .45); box-shadow: 0 24px 44px -32px rgba(193, 95, 60, .6); }
.symbol-box {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--elfenbein-2); color: var(--terrakotta-tief);
}
.symbol-box .symbol { width: 22px; height: 22px; }
.kachel p { margin: 0; font-size: .96rem; line-height: 1.45; color: var(--text-2); }
.kachel strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; letter-spacing: -0.012em; color: var(--text-dunkel); }

.branchen {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 6vw, 96px); align-items: center;
  margin-top: clamp(64px, 8vw, 112px);
}
.branchen picture { overflow: hidden; border-radius: var(--r-xl); box-shadow: 0 50px 90px -50px rgba(31, 30, 29, .55); }
.branchen-text {
  margin: 0;
  font-size: clamp(1.6rem, 1.05rem + 2vw, 2.65rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.14;
  text-wrap: balance;
}
.branchen-text span { color: var(--akzent); }

/* ---------- Für wen ---------- */
.fuerwen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fuerwen-karte { padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); }
.fuerwen-karte.ja {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--schiefer); color: var(--text-hell);
  --text: var(--text-hell); --linie: rgba(240, 238, 230, .1);
}
.fuerwen-karte.ja::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 100% 0%, rgba(217, 119, 87, .22), rgba(217, 119, 87, 0) 70%);
}
.fuerwen-karte.nein { border: 1px solid #D9D4C8; background: transparent; }
.fuerwen-karte h3 { margin-bottom: 1.4rem; font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; }
.fuerwen-liste { margin: 0; padding: 0; list-style: none; }
.fuerwen-liste li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
  padding: 15px 0; border-top: 1px solid var(--linie);
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem); line-height: 1.45;
}
.fuerwen-liste .symbol { width: 22px; height: 22px; margin-top: 1px; stroke-width: 2.2; }
.ja .fuerwen-liste .symbol { color: var(--terrakotta); }
.nein .fuerwen-liste .symbol { color: var(--gedaempft-hell); }
.nein .fuerwen-liste li { color: var(--text-2); }

/* ---------- Datenschutz ---------- */
.datenschutz-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.datenschutz-kopf { position: sticky; top: 92px; }
.datenschutz-kopf h2 { margin-bottom: 1.1rem; }
.datenschutz-kopf .einleitung { max-width: 30em; margin-bottom: clamp(28px, 4vw, 48px); }
.ampel {
  display: flex; align-items: center; gap: 22px;
  width: fit-content;
  padding: 22px 30px 22px 22px;
  border-radius: var(--r-l);
  background: var(--schiefer);
  box-shadow: 0 34px 70px -40px rgba(20, 20, 19, .7);
}
.ampel-gehaeuse {
  display: grid; gap: 12px;
  padding: 12px;
  border-radius: 999px;
  background: #0B0B0A;
  border: 1px solid #2E2D29;
}
.lampe { display: block; width: 34px; height: 34px; border-radius: 50%; }
.lampe-rot { background: radial-gradient(circle at 35% 30%, #F0A487, #C15F3C 62%); box-shadow: 0 0 18px 2px rgba(217, 119, 87, .55); }
.lampe-gelb { background: radial-gradient(circle at 35% 30%, #F2D3B8, #D4A27F 62%); box-shadow: 0 0 18px 2px rgba(212, 162, 127, .5); }
.lampe-gruen { background: radial-gradient(circle at 35% 30%, #CFE3C6, #87A97C 62%); box-shadow: 0 0 18px 2px rgba(135, 169, 124, .5); }
.ampel-texte {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-hell-2);
}
.ampel-texte li { display: flex; align-items: center; height: 34px; }
.schutz-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.schutz-karte {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--linie-hell); border-radius: var(--r-l);
  background: var(--weiss);
}
.schutz-karte p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--text-2); }
.schutz-karte strong { display: block; margin-bottom: .4rem; font-size: 1.12rem; letter-spacing: -0.015em; color: var(--text-dunkel); }
.schutz-karte .symbol-box { background: #EEF3EA; color: #4F6E47; }
.ehrlich-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  max-width: 860px; margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 20px 24px; border-radius: var(--r);
  background: var(--elfenbein-2); border: 1px solid var(--linie-hell);
  font-size: 1rem; color: var(--text-2);
}
.ehrlich-zeile .symbol { width: 22px; height: 22px; margin-top: 1px; color: #4F6E47; }

/* ---------- Alles drin ---------- */
.stapel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4.5vw, 64px);
  margin: 0; padding: 0; list-style: none;
}
.stapel li {
  display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 24px 0; border-top: 1px solid var(--linie-dunkel);
}
.stapel .symbol-box { width: 50px; height: 50px; border-radius: 15px; background: rgba(212, 162, 127, .09); border: 1px solid rgba(212, 162, 127, .24); color: var(--gold); }
.stapel p { margin: 0; color: var(--text-hell-2); font-size: 1.01rem; }
.stapel strong { color: var(--text-hell); }

.stapel li.neu .symbol-box { background: rgba(217, 119, 87, .16); border-color: rgba(217, 119, 87, .45); color: var(--terrakotta); }

.anker {
  display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); align-items: start;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(28px, 4.5vw, 56px);
  border: 1px solid rgba(217, 119, 87, .32); border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(217, 119, 87, .15), rgba(212, 162, 127, .04) 70%);
}
.anker-titel { margin: 0; font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terrakotta); padding-top: .5em; }
.anker-text { margin: 0; font-size: clamp(1.12rem, 1rem + .55vw, 1.45rem); line-height: 1.5; color: var(--text-hell); }
.anker-text b { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ---------- Preise und Termine ---------- */
.wahl-label {
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 14px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--leise);
}
.wahl-label b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-dunkel); color: var(--elfenbein); font-size: .7rem; letter-spacing: 0; font-weight: 700;
}
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.wahl-label-paket { margin-top: clamp(32px, 4vw, 48px); }
.chip {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 82px; padding: 15px 14px 13px;
  border: 1.5px solid var(--linie-hell); border-radius: 15px;
  background: var(--weiss); color: var(--text-dunkel);
  text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .25s, transform .25s var(--ease), background-color .2s;
}
.chip:hover { border-color: #CFC8BA; transform: translateY(-2px); }
.chip[aria-checked="true"] {
  border-color: var(--terrakotta-tief);
  background: #FFFCFA;
  box-shadow: 0 0 0 4px rgba(193, 95, 60, .13), 0 16px 30px -22px rgba(193, 95, 60, .7);
}
.chip[aria-checked="true"]::after {
  content: ""; position: absolute; right: 12px; top: 14px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--terrakotta-tief);
}
.chip-datum { font-size: 1.04rem; font-weight: 700; letter-spacing: -0.015em; }
.chip-plaetze { font-size: .8rem; color: var(--gedaempft-hell); }
.chip-plaetze.knapp { color: var(--terrakotta-text); font-weight: 600; }
.chip-marke {
  position: absolute; top: -10px; left: 12px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--schiefer); color: var(--gold);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.chip.voll { background: var(--elfenbein-2); }
.chip.voll .chip-datum { color: var(--gedaempft-hell); text-decoration: line-through; text-decoration-color: rgba(107, 103, 95, .6); }
.chip:disabled { cursor: not-allowed; opacity: .55; transform: none; }

.founders {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center;
  margin-top: 22px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3.4vw, 40px);
  border-radius: var(--r-l);
  background: var(--schiefer); color: var(--text-hell);
}
.founders[hidden] { display: none; }
.founders::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 140% at 0% 50%, rgba(212, 162, 127, .22), rgba(212, 162, 127, 0) 70%);
}
.founders-siegel {
  display: grid; place-items: center; text-align: center;
  width: 86px; height: 86px; border-radius: 50%;
  border: 1px dashed rgba(212, 162, 127, .7);
  color: var(--gold); font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35;
}
.founders-siegel b { display: block; font-family: var(--schrift); font-size: 1.15rem; letter-spacing: -0.03em; color: var(--text-hell); text-transform: none; }
.founders h3 { margin-bottom: .45rem; color: var(--text-hell); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.founders p { margin: 0; color: var(--text-hell-2); font-size: .98rem; }

.preiskarten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  margin-top: 30px; align-items: stretch;
}
.preiskarte {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.6vw, 46px);
  border: 1px solid var(--linie-hell); border-radius: var(--r-xl);
  background: var(--weiss);
  box-shadow: 0 34px 70px -52px rgba(31, 30, 29, .55);
}
.preiskarte.vip {
  --text: var(--text-hell); --text-2: var(--text-hell-2); --leise: var(--gedaempft); --linie: var(--linie-dunkel); --akzent: var(--terrakotta); --akzent-text: var(--terrakotta);
  overflow: visible;
  border-color: #35342F;
  background: radial-gradient(70% 55% at 100% 0%, rgba(217, 119, 87, .3), rgba(217, 119, 87, 0) 70%), var(--schiefer);
  color: var(--text-hell);
  box-shadow: 0 44px 90px -46px rgba(20, 20, 19, .85), 0 0 0 1px rgba(217, 119, 87, .22);
}
.etikett {
  position: absolute; top: 0; left: clamp(28px, 3.6vw, 46px); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 7px 14px; border-radius: 999px;
  background: var(--terrakotta); color: var(--schiefer);
  font-size: .8rem; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(217, 119, 87, .8);
}
.etikett .symbol { width: 15px; height: 15px; }
.preiskarte h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); }
.preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .75rem; margin: 18px 0 2px; }
.preis-wert { font-size: clamp(3.1rem, 2.2rem + 2.6vw, 4.4rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.preis-alt { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; color: var(--leise); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--terrakotta); }
.preis-alt[hidden] { display: none; }
.preis-zusatz { font-size: .95rem; color: var(--leise); }
.preis-brutto { margin: 0; font-size: .88rem; color: var(--leise); }
.preis-hinweis { margin: .55rem 0 0; font-size: .88rem; font-weight: 600; color: var(--akzent-text); }
.preis-hinweis[hidden] { display: none; }
.leistungen {
  flex: 1;
  display: grid; align-content: start; gap: 13px;
  margin: 24px 0 30px; padding: 24px 0 0; list-style: none;
  border-top: 1px solid var(--linie);
}
.leistungen li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 1rem; line-height: 1.45; }
.leistungen .symbol { width: 20px; height: 20px; margin-top: 2px; color: var(--akzent); stroke-width: 2.2; }
.preis-meldung { margin: 12px 0 0; font-size: .9rem; color: var(--akzent-text); }
.preis-meldung:empty { display: none; }

.team-karte {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch;
  margin-top: 18px; overflow: hidden;
  border: 1px solid var(--linie-hell); border-radius: var(--r-xl);
  background: var(--weiss);
}
.team-karte picture { height: 100%; }
.team-karte img { height: 100%; min-height: 220px; object-fit: cover; object-position: 60% 40%; }
.team-text { padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.team-text p { margin: 0; }
.team-zeile { font-size: clamp(1.08rem, 1rem + .35vw, 1.26rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.45; color: var(--text-dunkel); }
.zahlung { font-size: .94rem; color: var(--text-2); }
.zahlarten { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.zahlarten li {
  padding: 5px 11px; border: 1px solid var(--linie-hell); border-radius: 999px;
  background: var(--elfenbein); font-size: .8rem; font-weight: 600; color: var(--text-dunkel-2);
}
.sicher { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--leise); }
.sicher .symbol { width: 17px; height: 17px; }

/* ---------- Garantie ---------- */
.garantie-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.garantie {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.6vw, 30px); align-items: start;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--linie-hell); border-radius: var(--r-xl);
  background: var(--weiss);
}
.siegel {
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--terrakotta); color: var(--schiefer);
  box-shadow: 0 0 0 7px rgba(217, 119, 87, .13), 0 0 0 8px rgba(217, 119, 87, .32);
}
.siegel .symbol { width: 32px; height: 32px; stroke-width: 1.9; }
.garantie h3 { margin: 6px 0 .7rem; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem); }
.garantie p { margin: 0; color: var(--text-2); font-size: 1.04rem; }

/* ---------- FAQ ---------- */
.faq-raster {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.faq-kopf { position: sticky; top: 92px; }
.faq-kopf picture { margin-top: clamp(28px, 4vw, 48px); overflow: hidden; border-radius: var(--r-l); box-shadow: 0 40px 80px -50px rgba(31, 30, 29, .55); }
.faq-kopf img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 56% 50%; }
.faq-liste { border-top: 1px solid var(--linie); }
.faq-liste details { border-bottom: 1px solid var(--linie); }
.faq-liste summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  list-style: none; cursor: pointer;
  font-size: clamp(1.02rem, .98rem + .25vw, 1.14rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.35;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary:hover { color: var(--akzent-text); }
.faq-plus {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linie); color: var(--text);
  transition: transform .35s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.faq-plus .symbol { width: 16px; height: 16px; stroke-width: 2.2; }
.faq-liste details[open] .faq-plus { transform: rotate(45deg); background: var(--terrakotta); border-color: var(--terrakotta); color: var(--schiefer); }
.faq-antwort { max-width: 64ch; padding: 0 48px 26px 0; color: var(--text-2); }

/* ---------- Schluss ---------- */
.schluss { overflow: clip; }
.schluss::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 18% 50%, rgba(217, 119, 87, .18), rgba(217, 119, 87, 0) 70%);
}
.schluss-raster {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 100px); align-items: center;
}
.schluss-foto picture { overflow: hidden; border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 60px 110px -50px rgba(217, 119, 87, .45); }
.schluss-foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 54% 30%; }
.schluss h2 { margin-bottom: 1.8rem; }
.schluss-text p { font-size: clamp(1.04rem, .99rem + .25vw, 1.18rem); color: var(--text-hell-2); }
.gruss { margin: 1.8rem 0 0; font-size: 1.1rem; color: var(--text-hell); }
.unterschrift { display: block; margin: .1rem 0 2.2rem; font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--terrakotta); }

/* ---------- Fuß ---------- */
.fuss {
  padding: 64px 0 44px;
  border-top: 1px solid var(--linie-dunkel);
  background: var(--schiefer-tief);
  color: var(--gedaempft);
  font-size: .9rem;
}
.fuss-oben {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px;
  padding-bottom: 30px; border-bottom: 1px solid var(--linie-dunkel);
}
.claim { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -0.035em; color: var(--text-hell); line-height: 1.1; }
.claim em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--terrakotta); letter-spacing: 0; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.fuss-links a, .fuss-links button {
  display: inline-block; padding: 8px 0;
  border: 0; background: none; cursor: pointer;
  color: var(--text-hell-2); font-size: .92rem; text-decoration: none;
}
.fuss-links a:hover, .fuss-links button:hover { color: var(--text-hell); text-decoration: underline; text-underline-offset: 3px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; margin-top: 26px; }
.fuss-klein { max-width: 78ch; margin: 0; font-size: .82rem; line-height: 1.65; }
.fuss-marke { display: flex; align-items: center; gap: .65rem; }

/* ---------- Klebeleiste unten (Handy) ---------- */
.klebeleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie-dunkel);
  background: rgba(20, 20, 19, .95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text-hell);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.klebeleiste.sichtbar { transform: none; }
.klebeleiste-info { flex: 1; min-width: 0; line-height: 1.3; }
.klebeleiste-termin { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.klebeleiste-detail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--gedaempft); }
.klebeleiste .knapp { color: var(--terrakotta); }
.klebeleiste-detail s { text-decoration-color: var(--terrakotta); }
.klebeleiste .knopf { --kh: 48px; flex: none; padding: 0 1.25em; font-size: .95rem; }

/* ---------- Fenster (Warteliste) ---------- */
.fenster {
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0; border-radius: var(--r-xl);
  background: var(--elfenbein); color: var(--text-dunkel);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7);
  --text: var(--text-dunkel); --text-2: var(--text-dunkel-2); --leise: var(--gedaempft-hell); --akzent: var(--terrakotta-tief); --akzent-text: var(--terrakotta-text); --linie: var(--linie-hell);
}
.fenster::backdrop { background: rgba(10, 10, 9, .66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.fenster[open] { animation: fenster-rein .4s var(--ease); }
@keyframes fenster-rein { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.fenster-innen { position: relative; padding: clamp(26px, 4.4vw, 44px); }
.fenster-zu {
  position: absolute; top: 16px; right: 16px;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--linie-hell); background: var(--weiss); color: var(--text-dunkel);
  cursor: pointer;
}
.fenster-zu:hover { border-color: var(--text-dunkel); }
.fenster-zu .symbol { width: 18px; height: 18px; stroke-width: 2; }
.fenster h2 { margin: 0 52px .8rem 0; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.fenster-text { margin-bottom: 1.6rem; color: var(--text-2); }
.fenster-danke { padding: 12px 0 4px; }
.fenster-danke .siegel { margin-bottom: 1.4rem; }
.fenster-danke p { font-size: 1.15rem; font-weight: 600; color: var(--text-dunkel); }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 14px; }
.form-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-raster .ganz { grid-column: 1 / -1; }
.feld { display: grid; gap: 6px; min-width: 0; }
.feld > label, .feld-titel { font-size: .87rem; font-weight: 600; color: var(--text); }
.optional { font-weight: 400; color: var(--leise); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular select, .formular textarea {
  width: 100%; min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid var(--linie-hell); border-radius: 12px;
  background: var(--weiss); color: var(--text-dunkel);
  font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.formular select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1E1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.formular textarea { min-height: 116px; resize: vertical; }
.formular input:hover, .formular select:hover, .formular textarea:hover { border-color: #D2CCBF; }
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: none; border-color: var(--terrakotta-tief); box-shadow: 0 0 0 4px rgba(193, 95, 60, .15);
}
.feld.ungueltig input, .feld.ungueltig select, .feld.ungueltig textarea { border-color: var(--fehler); }
.feld-fehler { font-size: .82rem; color: var(--fehler); }
.feld-fehler:empty { display: none; }
.haken-feld {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start;
  font-size: .86rem; line-height: 1.5; color: var(--text-2); cursor: pointer;
}
.haken-feld input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--terrakotta-tief); cursor: pointer; }
.haken-feld.ungueltig { color: var(--fehler); }
.haken-feld[hidden] { display: none; }
.honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-klein { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--leise); }
.form-status { margin: 0; font-size: .92rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.fehler { color: var(--fehler); }
.form-status.ok { color: #2F6B3F; }

/* Auswahlknöpfe (Termine Live-Demo, Note, Mitarbeiterzahl) */
.wahl-gruppe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wahl-gruppe legend { padding: 0; margin-bottom: 8px; font-size: .87rem; font-weight: 600; color: var(--text); }
.wahl {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 16px;
  border: 1.5px solid var(--linie-hell); border-radius: 12px;
  background: var(--weiss); color: var(--text-dunkel);
  font-size: .94rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.wahl:hover { border-color: #CFC8BA; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl:has(input:checked), .wahl.gewaehlt {
  border-color: var(--terrakotta-tief); background: #FFF8F4; box-shadow: 0 0 0 3px rgba(193, 95, 60, .14);
}
.wahl:has(input:focus-visible) { outline: 2px solid var(--terrakotta); outline-offset: 2px; }
.wahl small { display: block; font-weight: 500; font-size: .76rem; color: var(--leise); }
.wahl-termin { flex-direction: column; align-items: flex-start; padding: 10px 14px; min-width: 120px; }

/* ---------- Einwilligung (Cookie-Fenster) ---------- */
.einwilligung {
  position: fixed; z-index: 90; right: 20px; bottom: 20px;
  width: min(440px, calc(100vw - 40px));
  padding: 22px 22px 20px;
  border: 1px solid #37362F; border-radius: 22px;
  background: var(--schiefer-2); color: var(--text-hell);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .7);
  animation: fenster-rein .45s var(--ease);
}
.einwilligung[hidden] { display: none; }
.einwilligung-titel { margin: 0 0 .4rem; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.einwilligung p { font-size: .86rem; line-height: 1.55; color: var(--text-hell-2); }
.einwilligung a { color: var(--terrakotta); font-weight: 600; }
.einwilligung-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.einwilligung-knoepfe button {
  min-height: 48px; padding: 0 12px;
  border: 1px solid rgba(240, 238, 230, .32); border-radius: 999px;
  background: rgba(240, 238, 230, .07); color: var(--text-hell);
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.einwilligung-knoepfe button:hover { background: rgba(240, 238, 230, .14); border-color: rgba(240, 238, 230, .6); }

/* ---------- Unterseiten ---------- */
.seitenkopf { position: relative; overflow: clip; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); }
.seitenkopf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 85% 0%, rgba(217, 119, 87, .2), rgba(217, 119, 87, 0) 65%);
}
.seitenkopf .rahmen { position: relative; }
.seitenkopf h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); max-width: 16ch; }
.seitenkopf .einleitung { max-width: 42em; margin-top: 1.4rem; }
.seitenkopf-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.seitenkopf-bild picture { overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--schatten-tief); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

.schritte { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.schritt {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--linie); border-radius: var(--r-l);
  background: var(--karte);
}
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--schiefer); color: var(--gold);
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
}
.schritt h3, .schritt h2 { margin: 4px 0 .45rem; font-size: clamp(1.12rem, 1.04rem + .3vw, 1.3rem); }
.schritt p { margin: 0; color: var(--text-2); }

.kasten {
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--r-l);
  background: var(--elfenbein-2);
  border: 1px solid var(--linie-hell);
}
.kasten h2, .kasten h3 { margin-bottom: .6rem; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); }
.kasten p { color: var(--text-2); }
.kasten-dunkel { background: var(--schiefer); color: var(--text-hell); border-color: var(--schiefer); --text: var(--text-hell); --text-2: var(--text-hell-2); }
.kasten-akzent { background: #FFF6F1; border-color: rgba(193, 95, 60, .3); }
.zwei-kaesten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.lade-zustand { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.lade-zustand::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--terrakotta); border-right-color: transparent;
  animation: drehen .8s linear infinite;
}

.rechtstext { max-width: 780px; color: var(--text-2); }
.rechtstext h1 { margin-bottom: 2rem; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); color: var(--text); }
.rechtstext h2 { margin: 2.6rem 0 .8rem; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); color: var(--text); }
.rechtstext h3 { margin: 1.8rem 0 .5rem; font-size: 1.12rem; color: var(--text); }
.rechtstext p, .rechtstext li { line-height: 1.7; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3rem; margin: 0 0 1em; }
.rechtstext a { color: var(--akzent-text); text-underline-offset: 3px; }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .94rem; }
.rechtstext th, .rechtstext td { padding: 10px 12px; border: 1px solid var(--linie); text-align: left; vertical-align: top; }
.rechtstext address { font-style: normal; line-height: 1.7; }

.danke-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hinweis-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 16px 18px; border-radius: var(--r);
  background: rgba(217, 119, 87, .12); border: 1px solid rgba(217, 119, 87, .35);
  color: var(--text-hell);
}
.hinweis-zeile .symbol { width: 22px; height: 22px; color: var(--terrakotta); margin-top: 1px; }
.hinweis-zeile[hidden] { display: none; }

.note-reihe { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.note-reihe .wahl { min-height: 56px; padding: 0; font-size: 1.1rem; font-weight: 700; }

.leer-hinweis { padding: 18px 20px; border-radius: var(--r); background: var(--elfenbein-2); color: var(--text-2); }

/* Live-Seite */
.live-hero {
  position: relative; overflow: clip; isolation: isolate;
  padding: 132px 0 clamp(64px, 8vw, 104px);
}
.live-hero .hero-bild img { object-position: 78% 40%; }
.live-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 20, 19, .97) 0%, rgba(20, 20, 19, .9) 34%, rgba(20, 20, 19, .45) 56%, rgba(20, 20, 19, 0) 72%),
    linear-gradient(0deg, var(--schiefer) 0%, rgba(20, 20, 19, 0) 30%),
    linear-gradient(180deg, rgba(20, 20, 19, .6) 0%, rgba(20, 20, 19, 0) 16%);
}
.live-hero-text { max-width: 640px; }
.live-hero h1 { font-size: clamp(2.45rem, 1.2rem + 3.6vw, 4.1rem); margin-bottom: 1.3rem; }
.live-hero .hero-unterzeile { margin-bottom: 1.8rem; }
.anmelde-karte {
  position: relative;
  max-width: 640px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-xl);
  background: var(--elfenbein); color: var(--text-dunkel);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .05);
  --text: var(--text-dunkel); --text-2: var(--text-dunkel-2); --leise: var(--gedaempft-hell); --akzent: var(--terrakotta-tief); --akzent-text: var(--terrakotta-text); --linie: var(--linie-hell);
}
.anmelde-karte .wahl-gruppe { flex-wrap: wrap; }
.anmelde-erfolg { text-align: left; }
.anmelde-erfolg .siegel { margin-bottom: 1.2rem; }
.anmelde-erfolg h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: .6rem; }
.anmelde-erfolg p { color: var(--text-2); font-size: 1.05rem; }

.drei-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.karte-nr {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.4rem; border-radius: 14px;
  background: var(--schiefer); color: var(--gold);
  font-family: var(--mono); font-weight: 700;
}
.drei-karten li {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--linie-hell); border-radius: var(--r-l);
  background: var(--weiss);
}
.drei-karten p { margin: 0; color: var(--text-2); font-size: 1.02rem; }
.drei-karten strong { display: block; margin-bottom: .45rem; color: var(--text-dunkel); font-size: 1.18rem; letter-spacing: -0.015em; }

.person-raster { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.person-raster picture { overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--schatten-tief); }
.person-raster img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%; }
.person-raster blockquote {
  margin: 1.6rem 0 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.2;
  color: var(--terrakotta);
}

/* Live-Seite: Anmeldekarte im Hero, Person, Abschluss */
.live-hero .rahmen { position: relative; }
.live-hero .anmelde-karte { margin-top: clamp(4px, 1vw, 12px); }
.anmelde-karte .formular { gap: 16px; }
.anmelde-karte .form-raster { gap: 12px; }
.anmelde-karte .form-klein { text-align: center; }
.person-raster .einleitung { color: var(--text-2); }
.person-raster h2 { margin-bottom: 1rem; }
.zweiter-aufruf { text-align: center; overflow: clip; }
.zweiter-aufruf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 80% at 50% 100%, rgba(217, 119, 87, .25), rgba(217, 119, 87, 0) 70%);
}
.zweiter-aufruf .rahmen { position: relative; }
.aufruf-text {
  max-width: 18ch; margin: 0 auto 2rem;
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04;
  color: var(--text-hell); text-wrap: balance;
}
.aufruf-text em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--terrakotta); letter-spacing: 0; }

/* Kästen und Hinweise auf Unterseiten */
.kasten-weiss { background: var(--weiss); }
.kasten.bitte, .startklar-kasten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.kasten.bitte h2, .startklar-kasten h2 { margin-top: 4px; }
.siegel.klein { width: 54px; height: 54px; box-shadow: 0 0 0 5px rgba(217, 119, 87, .13), 0 0 0 6px rgba(217, 119, 87, .3); }
.siegel.klein .symbol { width: 24px; height: 24px; }
.startklar-kasten { margin-top: 28px; }
.startklar-kasten p { color: var(--text-hell-2); }
.zwei-kaesten { margin-top: 16px; }
.bestaetigt-text { margin-bottom: 28px; color: var(--text-dunkel); }
.hinweis-klein { margin: 26px 0 0; font-size: .95rem; color: var(--leise); }
.hell-auf-dunkel { color: var(--text-hell-2); }
.hell-auf-dunkel .textlink { color: var(--terrakotta); }
.hinweise { display: grid; gap: 10px; margin-top: 26px; }
.hinweise .hinweis-zeile { margin: 0; font-size: .96rem; }
.seitenkopf-bild-hoch picture { max-width: 380px; margin-left: auto; }
.seitenkopf-bild-hoch img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.seitenkopf .lade-zustand { min-height: 120px; color: var(--text-hell-2); }
.danke-kasten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.danke-kasten p { margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--text-dunkel); }
.schritte + .kasten, .schritte + .startklar-kasten { margin-top: 28px; }
.formular.kasten { gap: 20px; }

/* Feedback */
.feedback-formular { gap: 24px; }
.note-gruppe { display: block; }
.note-gruppe legend { margin-bottom: 12px; font-size: 1rem; }
.stimme { display: grid; gap: 16px; }
.stimme .feld > label { font-size: 1rem; }

/* Rechtstexte */
.recht-seite { min-height: 60vh; }

/* 404 */
.seite-404 {
  position: relative; overflow: clip; isolation: isolate;
  display: flex; align-items: center;
  min-height: min(86vh, 860px);
  padding-block: clamp(64px, 10vw, 120px);
}
.seite-404 .hero-bild { position: absolute; inset: 0 0 0 auto; width: min(52%, 640px); z-index: -2; }
.seite-404 .hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.seite-404::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--schiefer) 0%, var(--schiefer) 45%, rgba(20, 20, 19, .4) 70%, rgba(20, 20, 19, .1) 100%);
}
.text-404 { max-width: 620px; }
.text-404 h1 { margin-bottom: 1.2rem; }
.text-404 .einleitung { font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); color: var(--text-hell-2); }

/* ---------- Einblenden beim Scrollen ---------- */
.vor { opacity: 0; transform: translateY(24px); }
.zeigt {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 75ms);
}

/* ---------- Bildschirmgrößen ---------- */
@media (max-width: 1180px) {
  .t-ergebnis { right: -16px; }
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .kopf-nav .nav-link { display: none; }
  .problem-raster, .ich-raster, .ergebnis-raster, .ablauf-raster, .faq-raster, .schluss-raster, .branchen, .person-raster, .seitenkopf-raster, .danke-raster { grid-template-columns: minmax(0, 1fr); }
  .problem-bild, .ergebnis-kopf, .ablauf-bild, .faq-kopf, .datenschutz-kopf { position: static; }
  .datenschutz-raster { grid-template-columns: minmax(0, 1fr); }
  .problem-bild { max-width: 560px; }
  .wechsel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wechsel-bild { grid-column: 1 / -1; order: -1; max-width: 620px; justify-self: center; width: 100%; }
  .methode-raster { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .methode-plus { justify-self: center; margin: -10px 0; }
  .teil-bild img { aspect-ratio: 16 / 9; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahl:nth-child(3) { border-left: 0; }
  .zahl:nth-child(n + 3) { border-top: 1px solid var(--linie-dunkel); }
  .belege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uhr-gross { font-size: clamp(4.5rem, 2rem + 12vw, 8rem); margin-top: 1.4rem; }
  .ich-foto { max-width: 520px; }
  .branchen picture { max-width: 560px; }
  .schluss-foto { max-width: 520px; }
  .faq-kopf picture { display: none; }
  .t-ergebnis { position: relative; right: auto; bottom: auto; width: min(320px, 86%); margin: -26px -6px 0 auto; }
  .terminal-koerper { padding-bottom: 50px; }
  .drei-karten { grid-template-columns: minmax(0, 1fr); }
  .person-raster picture { max-width: 420px; }
}

@media (max-width: 1023px) {
  .hero, .live-hero { display: block; min-height: 0; padding: 0 0 52px; }
  .hero-bild { position: relative; inset: auto; height: min(104vw, 500px); }
  .hero-bild img { object-position: 50% 16%; }
  .live-hero .hero-bild { height: min(84vw, 480px); }
  .live-hero .hero-bild img { object-position: 76% 30%; }
  .hero::before, .live-hero::before {
    background:
      linear-gradient(180deg, rgba(20, 20, 19, .7) 0%, rgba(20, 20, 19, 0) 20%),
      linear-gradient(0deg, var(--schiefer) 0%, var(--schiefer) calc(100% - min(104vw, 500px) + 30px), rgba(20, 20, 19, 0) calc(100% - min(104vw, 500px) * .45));
  }
  .live-hero::before {
    background:
      linear-gradient(180deg, rgba(20, 20, 19, .7) 0%, rgba(20, 20, 19, 0) 22%),
      linear-gradient(0deg, var(--schiefer) 0%, var(--schiefer) calc(100% - min(84vw, 480px) + 20px), rgba(20, 20, 19, 0) calc(100% - min(84vw, 480px) * .4));
  }
  .hero-text { position: relative; margin-top: -124px; }
  .live-hero .live-hero-text { position: relative; margin-top: -86px; }
  .hero-knoepfe { order: 4; }
  .hero-preis { order: 5; }
  .hero-person { order: 6; margin: 2rem 0 0; }
  .vertrauen { order: 7; }
  .hero-knoepfe .knopf { flex: 1 1 auto; }
}

@media (max-width: 699px) {
  html { scroll-padding-top: 16px; }
  .leiste { position: relative; font-size: .78rem; }
  .leiste-innen { min-height: 40px; gap: .15rem .6rem; }
  .nur-breit, .leiste-breit { display: none !important; }
  .leiste-schmal { display: inline-flex; gap: .2rem .7rem; }
  .preiskarten { gap: 34px; }
  .kopf-innen { height: 64px; }
  .ueber-bild .kopf { margin-bottom: -64px; }
  .kopf-nav .knopf { display: none; }
  .marke { font-size: .95rem; }
  .marke img { width: 30px; height: 30px; }
  .wechsel-raster { grid-template-columns: minmax(0, 1fr); }
  .zahlen { border-radius: var(--r-l); }
  .zahl { padding: 24px 18px; }
  .belege { grid-template-columns: minmax(0, 1fr); }
  .kacheln { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kachel { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 16px 17px; }
  .fuerwen-raster, .preiskarten, .garantie-raster, .stapel, .zwei-kaesten, .schutz-karten { grid-template-columns: minmax(0, 1fr); }
  .ampel { padding: 16px 22px 16px 16px; gap: 16px; }
  .lampe { width: 28px; height: 28px; }
  .ampel-texte li { height: 28px; }
  .stapel li:first-child { border-top: 0; }
  .anker { grid-template-columns: minmax(0, 1fr); }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founders { grid-template-columns: minmax(0, 1fr); }
  .founders-siegel { width: 72px; height: 72px; }
  .team-karte { grid-template-columns: minmax(0, 1fr); }
  .team-karte img { min-height: 0; aspect-ratio: 16 / 9; }
  .garantie { grid-template-columns: minmax(0, 1fr); }
  .zitat-kasten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .zitat-zeichen { display: block; height: 52px; font-size: 5.5rem; line-height: .55; overflow: hidden; }
  .faq-antwort { padding-right: 0; }
  .form-raster { grid-template-columns: minmax(0, 1fr); }
  .note-reihe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fuss { padding-bottom: 120px; }
  .einwilligung { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 18px 18px 16px; }
  .einwilligung p { font-size: .82rem; }
  .wende { grid-template-columns: minmax(0, 1fr); }
  .schritt { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fenster {
    width: 100%; max-width: 100%;
    margin: auto 0 0;
    max-height: 94dvh;
    border-radius: 26px 26px 0 0;
  }
  .fenster[open] { animation: blatt-rein .45s var(--ease); }
  .t-anhang { margin-bottom: .9rem; }
  .terminal-titel { display: none; }
}
@keyframes blatt-rein { from { transform: translateY(40px); opacity: 0; } }

@media (max-width: 1023px) {
  .seitenkopf-bild-hoch picture { max-width: 340px; margin: 0; }
  .seite-404 .hero-bild { width: 100%; opacity: .35; }
  .seite-404::before { background: linear-gradient(180deg, rgba(20, 20, 19, .6), var(--schiefer) 85%); }
}
@media (max-width: 699px) {
  .kasten.bitte, .startklar-kasten, .danke-kasten { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .seitenkopf-bild-hoch { display: none; }
  .anmelde-karte { padding: 20px 16px 22px; border-radius: var(--r-l); }
  .live-hero .wahl-termin { flex: 1 1 calc(50% - 8px); min-width: 0; }
}

@media (min-width: 900px) {
  .klebeleiste { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .vor { opacity: 1; transform: none; }
  .t-ergebnis.wartet { opacity: 1; transform: none; }
}

@media print {
  .leiste, .kopf, .klebeleiste, .einwilligung, .fuss-links { display: none !important; }
  .dunkel, .dunkel-2 { background: #fff; color: #000; }
}

.rechtstext .rechts-stand { margin: -1.2rem 0 2rem; font-size: .92rem; color: var(--text-3, #8F8B82); }