/* ============================================================================
   HOSTARO — Werkstatt (Creme/Petrol)
   Kalk-Hell als Fläche, Petrol als Ink, Marken-Grün als Signal, Orange als
   Energie-Akzent. Keine runden Ecken, keine Deko-Symbole, keine
   Gedankenstriche. Grosse Typo, echte Tiefe, viel Bewegung. Mobile-first.

   Token-Rollen: --surface = Fläche, --ink = Text, --brand = Marken-Grün.
   In dunklen Sektionen (.sec--deep) werden die Rollen lokal invertiert.
   ============================================================================ */

:root {
  --surface:      #ECE7DB;   /* Basis-Fläche (Kalk) / Ink auf Akzent = hell */
  --surface-2:    #E7E1D3;   /* angehobene Fläche */
  --surface-3:    #DFD8C7;   /* Karte / Hover */
  --surface-lo:   #E9E3D6;
  --surface-deep: #E3DCCD;   /* abgesetztes Band (Footer/Preis) */

  --ink:   #11302A;      /* Petrol-Ink = primärer Text */
  --ink-2: rgba(17,48,42,.82);  /* Body-Text: jetzt AA (>=4.5:1) auf Kalk und gehobenen Flächen */
  --ink-3: rgba(17,48,42,.70);  /* gedämpft, aber lesbar (AA >=4.5:1 auf allen hellen Flächen); Hints/Placeholder/Deko */

  --brand:    #1E6B3C;      /* Marken-Grün: Linie, Links, Finale, aktiv */
  --brand-2:  #2A8B4F;
  --brand-dp: #14502C;
  --orange:  #E2551E;      /* warmer CTA-/Energie-Akzent */

  --line:   rgba(17,48,42,.16);
  --line-2: rgba(17,48,42,.30);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;

  --disp: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Mono-Labels entfernt (de-slop); Preiszahl nutzt Bricolage-Tabellenziffern */

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --col: 1440px; /* B1: Inhalt bleibt auf grossen Monitoren (1920px+) zentriert */
  --pad: clamp(20px, 5vw, 72px);
}

/* ---------------------------------------------------------------- RESET --- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--surface); overflow-x: hidden; }
html.js { scroll-behavior: auto; } /* Lenis uebernimmt das Smoothing */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--body);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.62;
  font-weight: 420;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
/* B5: Robustheit gegen Überlauf langer Wörter und gesprengte Flex/Grid-Spalten */
.disp, .d-hero, .d-1, .d-2, .d-3, h1, h2, h3 { overflow-wrap: break-word; }
.hero__grid > *, .hero__foot > *, .story__cols > *, .lpanel > *, .lx__item > *, .px__step > *, .ft__grid > *, .contact__grid > * { min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--brand); color: var(--surface); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ TYPOGRAFIE --- */
.disp { font-family: var(--disp); font-weight: 600; line-height: .96; letter-spacing: -.025em; }
.d-hero { font-size: clamp(2.9rem, 10.5vw, 10.5rem); font-weight: 700; }
.d-1    { font-size: clamp(2.3rem, 7.5vw, 6.6rem); font-weight: 600; }
.d-2    { font-size: clamp(1.9rem, 5vw, 4rem); font-weight: 600; }
.d-3    { font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.white  { color: var(--ink); }
.brand  { color: var(--brand); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.5; font-weight: 440; max-width: 24em; color: var(--ink-2); }
.body-lg { font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.62; color: var(--ink-2); }

.annot { font-family: var(--body); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.annot--brand { color: var(--brand); }
.annot--w { color: var(--ink); }
.annot-line { display: inline-flex; align-items: center; gap: 12px; }
.annot-line::before { content: ""; width: 38px; height: 2px; background: var(--orange); }
.mono { font-family: var(--mono); }
.bignum { font-family: var(--mono); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; color: var(--brand); }

/* --------------------------------------------------------------- LAYOUT --- */
.wrap { max-width: var(--col); margin-inline: auto; padding-inline: var(--pad); width: 100%; }
.sec { position: relative; padding-block: clamp(82px, 13vw, 190px); }
.sec--hi   { background: #E4DBC7; }
.sec--lo   { background: #E7E0D1; }
/* Fix 2: echter dunkler Block. Tokens lokal auf "hell auf dunkel" umgestellt,
   damit Text, Akzente, Bullets und CTA hier von selbst lesbar werden. */
.sec--deep { background: #112E27; color: #ECE7DB;
  --ink:   #ECE7DB;
  --ink-2: rgba(236,231,219,.74);
  --ink-3: rgba(236,231,219,.55);
  --line:    rgba(236,231,219,.18);
  --line-2:  rgba(236,231,219,.30);
  --brand:    #6BCB86;   /* helles Grün als Akzent/CTA auf dunklem Grund */
  --surface:   #112E27;   /* "Ink auf Akzent" bleibt dunkel (Text auf grünem CTA) */
}

/* kinetische Typo (Maske) */
.kin { display: block; overflow: hidden; padding-bottom: .04em; }
.kin > span { display: block; will-change: transform; }

/* ----------------------------------------------------------------- BTN --- */
/* Fix 1: EIN Primär-CTA = Grün (Kalk-Text 5.3:1, besteht AA). Orange ist nur noch Signal. */
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; padding: 20px 30px; border: 2px solid var(--brand); background: var(--brand); color: var(--surface); transition: background .3s var(--ease-io), color .3s, transform .25s var(--ease); }
.btn .arr { width: 26px; height: 2px; background: currentColor; position: relative; transition: width .3s var(--ease); }
.btn .arr::after { content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) { .btn:hover { background: transparent; color: var(--brand); } .btn:hover .arr { width: 42px; } }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn--ghost:hover { background: var(--ink); color: var(--surface); box-shadow: none; } }
/* btn--w jetzt identisch zum Primär-CTA (Grün), damit alle CTAs gleich aussehen */
.btn--w { background: var(--brand); border-color: var(--brand); color: var(--surface); }
@media (hover: hover) { .btn--w:hover { background: transparent; color: var(--brand); } }

/* ============================================================= INTRO ====== */
/* dunkler Lade-Moment (hartkodiert, unabhängig vom hellen Token-Set) */
.intro { position: fixed; inset: 0; z-index: 9999; background: #11302A; display: grid; place-items: center; }
.intro__word { font-family: var(--disp); font-weight: 700; font-size: clamp(3rem, 13vw, 9rem); letter-spacing: -.04em; color: #ECE7DB; }
.intro__word span { color: var(--orange); }
.intro__bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--orange); width: 0; }
.no-js .intro { display: none; }
.intro.done { pointer-events: none; }

/* ============================================================== HEADER ===== */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 200; padding: 22px 0; transition: background .4s var(--ease-io), padding .4s; }
.hd.small { padding: 12px 0; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hd__in { display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -.04em; color: var(--ink); display: inline-flex; align-items: baseline; }
.logo b { color: var(--orange); display: inline-block; }
@media (hover: hover) { .logo:hover b { animation: dothop .55s var(--ease); } }
@keyframes dothop { 0% { transform: none; } 38% { transform: translateY(-.3em); } 72% { transform: translateY(0) scaleY(.78); } 100% { transform: none; } }
.nav { display: flex; gap: 32px; }
.nav a { font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
@media (hover: hover) { .nav a:hover::after { transform: scaleX(1); } }
.nav a[aria-current="page"] { color: var(--brand); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd__cta { display: flex; align-items: center; gap: 22px; }
.hd__cta .x { font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hd__cta .x.brand { color: var(--brand); }
.burger { display: none; width: 48px; height: 48px; position: relative; z-index: 210; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s, background .3s; }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { bottom: 19px; }
.burger[aria-expanded="true"] span { background: var(--surface); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 205; background: var(--brand); color: var(--surface); display: flex; flex-direction: column; justify-content: center; padding: var(--pad); overflow-y: auto; transform: translateY(-100%); visibility: hidden; pointer-events: none; transition: transform .55s var(--ease-io), visibility 0s linear .55s; }
.mnav.open { transform: none; visibility: visible; pointer-events: auto; transition: transform .55s var(--ease-io), visibility 0s linear 0s; }
.mnav a { font-family: var(--disp); font-weight: 600; font-size: clamp(2rem, 10vw, 3.6rem); letter-spacing: -.03em; padding: 12px 0; color: var(--surface); border-bottom: 2px solid rgba(6,35,26,.2); }
.mnav a:last-child { border-bottom: none; }

/* ================================================================ HERO ===== */
/* Teil A: fluider Top-Abstand klärt die fixe Nav (~73px) + 60px Tablet bis 80px Desktop, damit die Headline nie unter die Nav läuft */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-top: clamp(132px, calc(8vw + 40px), 172px); padding-bottom: clamp(36px, 8vh, 88px); overflow: hidden; background: var(--surface); }
.hero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 72% 22%, #F3EFE5 0%, #ECE7DB 46%, #E3DCCD 100%); }
/* Teil A: Eyebrow jetzt im normalen Fluss über der Headline (nicht mehr absolut) */
.hero__annotTop { z-index: 3; }
.hero__grid { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vh, 48px); }
.hero h1 { color: var(--ink); }
.hero h1 .ln1 { color: var(--ink); }
.hero h1 .ln2 { color: var(--brand); }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.hero__lead { max-width: 30em; }
.hero__cue { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__cue i { width: 2px; height: 46px; background: var(--orange); transform-origin: top; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ====================================================== HERO 3D BAUPLAN ==== */
/* Ebenen-Stapel in echter CSS-Perspektive: eine Website "baut sich auf".
   GSAP dreht die Bühne (Auto-Rotation + Maus-Tilt), Scroll hebt die Ebenen
   auseinander (--lift). Ohne JS / mit reduced-motion: statisch gekippt. */
.h3d { position: absolute; z-index: 1; top: clamp(120px, 16vh, 180px); right: calc(var(--pad) * .6); width: min(430px, 34vw); aspect-ratio: 1; perspective: 1100px; pointer-events: none; }
/* Achsen getrennt, damit GSAP sauber animieren kann: Buehne kippt (X), der
   innere Teller dreht (Z). Kombinierte X+Z-Transforms dekomponiert GSAP falsch. */
.h3d__stage { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: rotateX(56deg); }
.h3d__spin { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: rotateZ(-38deg); }
.h3d__plane { position: absolute; inset: 8%; border: 2px solid var(--ink); transform-style: preserve-3d; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.h3d__plane.p1 { transform: translateZ(calc(var(--lift, 1) * 0px)); opacity: .9; }
.h3d__plane.p2 { transform: translateZ(calc(var(--lift, 1) * 56px)); opacity: .68; }
.h3d__plane.p3 { transform: translateZ(calc(var(--lift, 1) * 112px)); opacity: .5; }
.h3d__plane.p4 { transform: translateZ(calc(var(--lift, 1) * 168px)); opacity: .34; border-color: var(--brand); }
.h3d__plane .n { position: absolute; width: 9px; height: 9px; background: var(--brand); }
.h3d__plane .n.tl { left: -5px; top: -5px; } .h3d__plane .n.tr { right: -5px; top: -5px; }
.h3d__plane .n.bl { left: -5px; bottom: -5px; } .h3d__plane .n.br { right: -5px; bottom: -5px; }
.h3d__plane.p1 .n.br { background: var(--orange); width: 13px; height: 13px; right: -7px; bottom: -7px; }
/* Inhalt der untersten Ebene: angedeutete Seitenstruktur */
.h3d__plane.p1::before { content: ""; position: absolute; left: 10%; top: 14%; width: 44%; height: 7%; background: var(--ink); opacity: .75; }
.h3d__plane.p1::after { content: ""; position: absolute; left: 10%; top: 30%; width: 62%; height: 3px; background: var(--ink); opacity: .4; box-shadow: 0 14px 0 rgba(17,48,42,.4), 0 28px 0 rgba(17,48,42,.4); }
.h3d__plane.p2::before { content: ""; position: absolute; left: 10%; bottom: 12%; width: 30%; height: 13%; background: var(--brand); opacity: .8; }
/* Boden-Raster unter dem Stapel */
.h3d__grid { position: absolute; inset: -14%; transform: translateZ(-40px); background:
  repeating-linear-gradient(0deg, var(--line) 0 2px, transparent 2px 15%),
  repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 15%); opacity: .6; }
@media (max-width: 900px) { .h3d { top: clamp(96px, 13vh, 150px); right: 4vw; width: min(300px, 44vw); opacity: .72; } }

/* =============================================================== SPINE ===== */
.narrative { position: relative; }
/* Problem 2: Abstand Linie zu Text = clamp(24px Mobile .. 40px Desktop). Linie sitzt bei (pad + 18px). */
.narrative .wrap { padding-left: calc(var(--pad) + 18px + clamp(24px, 4vw, 40px)); }
.spine { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2; pointer-events: none;
  left: max(calc(var(--pad) + 18px), calc((100% - var(--col)) / 2 + var(--pad) + 18px)); }
.spine__track { position: absolute; inset: 0; background: var(--line); }
.spine__draw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--brand); transform: scaleY(var(--p, 0)); transform-origin: top; }
.spine__bug { position: absolute; left: -7px; width: 16px; height: 16px; background: var(--orange); top: calc(var(--p, 0) * 100%); transform: translateY(-50%); transition: top .08s linear; }
.spine__node { position: absolute; left: -5px; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--ink); transform: translateY(-50%); transition: background .45s var(--ease), border-color .45s var(--ease); }
.spine__node.on { background: var(--brand); border-color: var(--brand); }
.beat .annot-line { transition: color .5s var(--ease); }
.beat--on .annot-line { color: var(--brand); }
@media (max-width: 720px) { .narrative .wrap { padding-left: calc(var(--pad) + 42px); } } /* = 24px Abstand zur Linie */

/* ========================================================= STORY / EMPATHIE  */
.story__grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 46px); }
.story h2 { color: var(--ink); }
.story h2 em { font-style: normal; color: var(--brand); }
.story__big { max-width: 16em; }
.story__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 4vw, 64px); margin-top: clamp(34px, 5vw, 70px); }
.story__cols p { max-width: 34ch; }
@media (max-width: 760px) { .story__cols { grid-template-columns: 1fr; } }

/* ============================================================== LEVELS ====== */
/* Fix: kein em-max-width mehr auf dem DIV (em war relativ zur kleinen Container-Schrift = ~306px und quetschte die grosse h2 wortweise) */
.levels__head { margin-bottom: clamp(38px, 6vw, 78px); }
/* Einheitliche, grosszügige Headline-Breite für alle nummerierten Sektionen: 2–3 Zeilen statt Wort-pro-Zeile */
.narrative .d-1 { max-width: clamp(600px, 65vw, 1100px); overflow-wrap: break-word; hyphens: auto; }
/* Fallback (Mobile, reduced motion, kein JS): gestapelte Liste wie gehabt */
.levels__stage { position: relative; }
.levels__visual { display: none; }
.lpanel { display: grid; grid-template-columns: clamp(70px, 11vw, 150px) 1fr; gap: clamp(22px, 4vw, 56px); align-items: start; padding-block: clamp(32px, 5vw, 62px); border-top: 2px solid var(--line-2); }
.lpanel:last-child { border-bottom: 2px solid var(--line-2); }
.lpanel__no { font-family: var(--mono); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--brand); letter-spacing: .1em; padding-top: 10px; }
.lpanel h3 { color: var(--ink); }
.level__lead { color: var(--brand); font-family: var(--disp); font-weight: 500; font-size: clamp(1.05rem, 1.8vw, 1.5rem); margin: 14px 0 16px; max-width: 24em; }
.level__list { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.level__list span { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); position: relative; padding-left: 18px; }
.level__list span::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--brand); }
@media (max-width: 680px) { .lpanel { grid-template-columns: 1fr; gap: 12px; } .lpanel__no { padding-top: 0; } }

/* Gepinnte Szene: JS setzt .levels--pinned nur auf Desktop mit Motion + GSAP.
   Die Treppe links wächst Stufe um Stufe, rechts wechseln die Texte. */
.levels--pinned .levels__pin { min-height: 100svh; display: flex; align-items: center; }
.levels--pinned .levels__stage { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 110px); align-items: center; width: 100%; }
.levels--pinned .levels__visual { display: block; position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1.05; }
.levels--pinned .lsteps { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: clamp(12px, 1.6vw, 22px); }
.levels--pinned .stepbar { flex: 1; position: relative; border: 2px solid var(--ink); overflow: hidden; }
.levels--pinned .stepbar.s1 { height: 32%; }
.levels--pinned .stepbar.s2 { height: 60%; }
.levels--pinned .stepbar.s3 { height: 88%; }
.levels--pinned .stepbar i { position: absolute; inset: 0; background: var(--brand); transform: scaleY(0); transform-origin: bottom; }
.levels--pinned .levels__nums { position: absolute; top: 0; left: 0; height: 12%; }
.levels--pinned .lnum { position: absolute; left: 0; top: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); opacity: 0; }
.levels--pinned .levels__panels { position: relative; min-height: clamp(280px, 38vh, 420px); }
.levels--pinned .lpanel { position: absolute; inset: 0; border: none !important; padding: 0; grid-template-columns: 1fr; gap: 0; opacity: 0; visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
.levels--pinned .lpanel__no { display: none; }
.levels--pinned .lpanel h3 { font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.025em; }


/* =============================================================== MENSCH ===== */
.human__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: end; }
.human h2 { color: var(--ink); max-width: 12em; }
.human h2 em { font-style: normal; color: var(--brand); }
.human__photo { position: relative; aspect-ratio: 3/4; border: 2px solid var(--line-2); overflow: hidden; background: var(--surface-3); }
.human__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.human__photo .annot { display: block; color: var(--ink-3); }
.human__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(16px,2.2vw,24px); background: linear-gradient(to top, rgba(3,20,14,.86) 0%, rgba(3,20,14,.5) 55%, transparent 100%); }
@media (max-width: 820px) { .human__grid { grid-template-columns: 1fr; } }

/* ============================================================== KONTAKT ===== */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact h2 { color: var(--ink); max-width: 11em; }
.contact__meta { margin-top: clamp(30px, 4vw, 50px); border-top: 2px solid var(--line-2); }
.contact__row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 2px solid var(--line-2); font-family: var(--mono); font-size: .9rem; }
.contact__row .k { letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.contact__row .v { font-weight: 700; color: var(--ink); }
.contact__row .v a { color: var(--brand); }
.contact__row.ph .v { color: var(--ink-3); font-weight: 400; }
.form { display: grid; border: 2px solid var(--ink); }
.field { display: grid; border-bottom: 2px solid var(--ink); }
.field:last-of-type { border-bottom: none; }
.field label { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 16px 20px 0; }
.field input, .field textarea, .field select { width: 100%; padding: 8px 20px 18px; border: none; background: transparent; font-size: 1.1rem; font-family: var(--body); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: rgba(30,107,60,.08); }
.form__send { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; background: var(--brand); }
.form__hint { font-family: var(--mono); font-size: .76rem; color: var(--surface); }
.form__send .btn { border-color: var(--surface); background: var(--surface); color: var(--ink); }
@media (hover: hover) { .form__send .btn:hover { background: transparent; color: var(--surface); box-shadow: none; } }
.form__ok { display: none; padding: 18px 20px; background: var(--brand); color: var(--surface); font-family: var(--mono); font-size: .9rem; line-height: 1.5; }
.form__ok.show { display: block; }
.form__err { display: none; padding: 18px 20px; background: var(--orange); color: #fff; font-family: var(--mono); font-size: .9rem; line-height: 1.5; }
.form__err.show { display: block; }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } }

/* =============================================================== FINALE ===== */
.finale { background: var(--brand); color: var(--surface); padding-block: clamp(78px, 14vw, 180px); overflow: hidden; }
.finale__word { font-family: var(--disp); font-weight: 700; font-size: clamp(3.4rem, 25vw, 22rem); line-height: .8; letter-spacing: -.05em; display: flex; color: var(--surface); }
.finale__word span { display: inline-block; will-change: transform; }
.finale__word .dot { color: var(--orange); }

/* =============================================================== FOOTER ===== */
.ft { background: var(--surface-deep); color: var(--ink-2); padding-block: clamp(48px, 7vw, 88px) 36px; }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: clamp(28px, 5vw, 70px); }
.ft .logo { color: var(--ink); font-size: 1.7rem; margin-bottom: 16px; }
.ft__tag { max-width: 30ch; font-size: .96rem; line-height: 1.6; }
.ft h4 { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
.ft ul { display: grid; gap: 12px; }
.ft ul a, .ft ul li { font-size: .96rem; color: var(--ink-2); }
@media (hover: hover) { .ft ul a:hover { color: var(--brand); } }
.ft__ph { color: var(--ink-3) !important; }
.ft__bottom { margin-top: clamp(38px, 6vw, 68px); padding-top: 24px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
@media (hover: hover) { .ft__bottom a:hover { color: var(--brand); } }

/* =============================================================== SUBPAGE ==== */
.phead { padding-top: clamp(132px, 19vh, 230px); padding-bottom: clamp(40px, 6vw, 88px); }

/* Rechtsseiten (Impressum, Datenschutz) */
.prose { max-width: 62ch; }
.prose h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.08; color: var(--ink); margin: clamp(36px, 4vw, 56px) 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul { margin-top: 12px; display: grid; gap: 10px; }
.prose li { position: relative; padding-left: 22px; color: var(--ink-2); }
.prose li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--brand); }
.prose a { color: var(--brand); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .addr { font-style: normal; color: var(--ink); line-height: 1.7; }
.phead .annot-line { margin-bottom: 26px; }
.phead .lead { margin-top: 26px; }

.lx { border-top: 2px solid var(--line-2); }
/* Fix 5: dekorative Nummerierung entfernt (keine echte Reihenfolge), 2-Spalten-Layout */
.lx__item { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(18px,4vw,60px); padding-block: clamp(34px,5vw,66px); border-bottom: 2px solid var(--line-2); align-items: start; }
.lx__no { display: none; }
.lx h2 { color: var(--ink); }
.lx__lead { color: var(--brand); font-family: var(--disp); font-weight: 500; font-size: clamp(1.05rem,1.6vw,1.4rem); margin-top: 12px; }
.lx__body p { max-width: 40ch; color: var(--ink-2); } .lx__body p + p { margin-top: 14px; }
.lx__foryou { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line); max-width: 42ch; }
.lx__foryou b { display: block; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 7px; }
.lx__foryou span { color: var(--ink); }
@media (max-width: 820px) { .lx__item { grid-template-columns: 1fr; gap: 12px; } .lx__no { padding-top: 0; } }

.pcompare { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); margin-top: clamp(38px,6vw,72px); }
.pcompare__col { padding: clamp(24px,3vw,44px); }
.pcompare__col + .pcompare__col { border-left: 2px solid var(--ink); }
.pcompare__col.us { background: var(--brand); color: var(--surface); }
.pcompare__lbl { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; color: var(--ink-2); }
.pcompare__col.us .pcompare__lbl { color: var(--surface); }
.pcompare ul { display: grid; gap: 14px; }
.pcompare li { font-family: var(--body); font-size: 1.02rem; position: relative; padding-left: 22px; color: var(--ink-2); }
.pcompare__col.us li { color: var(--surface); }
.pcompare li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; }
.pcompare__col.them li::before { background: var(--ink-3); }
.pcompare__col.us li::before { background: var(--surface); }
@media (max-width: 720px) { .pcompare { grid-template-columns: 1fr; } .pcompare__col + .pcompare__col { border-left: none; border-top: 2px solid var(--ink); } }

.px { display: grid; border-top: 2px solid var(--line-2); margin-top: clamp(34px,5vw,64px); }
.px__step { display: grid; grid-template-columns: clamp(64px,9vw,120px) 1fr; gap: clamp(18px,4vw,56px); padding-block: clamp(32px,5vw,60px); border-bottom: 2px solid var(--line-2); }
.px__no { font-family: var(--mono); font-weight: 700; font-size: clamp(1.6rem,3vw,2.6rem); color: var(--brand); }
.px h3 { color: var(--ink); margin-bottom: 12px; }
.px p { max-width: 56ch; color: var(--ink-2); }
.px__ex { margin-top: 18px; padding: 16px 20px; border: 2px solid var(--line-2); font-family: var(--mono); font-size: .86rem; color: var(--ink-2); }
.px__ex b { color: var(--brand); }
@media (max-width: 680px) { .px__step { grid-template-columns: 1fr; gap: 10px; } }

.about__lead { font-family: var(--disp); font-weight: 500; font-size: clamp(1.55rem,3.4vw,2.6rem); line-height: 1.18; letter-spacing: -.02em; color: var(--ink); max-width: 18ch; }
.about__lead em { font-style: normal; color: var(--brand); }
.about__cols { columns: 2; column-gap: 64px; margin-top: clamp(34px,5vw,60px); }
.about__cols p { break-inside: avoid; margin-bottom: 18px; max-width: 38ch; color: var(--ink-2); }
@media (max-width: 720px) { .about__cols { columns: 1; } }
.vals { display: grid; grid-template-columns: repeat(3,1fr); border: 2px solid var(--line-2); margin-top: clamp(42px,6vw,80px); }
.val { padding: clamp(24px,3vw,40px); }
.val + .val { border-left: 2px solid var(--line-2); }
.val__no { font-family: var(--mono); font-weight: 700; color: var(--brand); font-size: .9rem; letter-spacing: .1em; }
.val h3 { color: var(--ink); margin: 16px 0 10px; }
.val p { color: var(--ink-2); }
@media (max-width: 720px) { .vals { grid-template-columns: 1fr; } .val + .val { border-left: none; border-top: 2px solid var(--line-2); } }

/* ============================================================ GRÜNDER ====== */
/* Werkstatt-Karten: 2px-Rahmen, eckig (radius global 0), kein Glasmorphismus. */
.founders__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(34px, 5vw, 64px); align-items: stretch; }
.founder-card { display: flex; flex-direction: column; border: 2px solid var(--line-2); background: var(--surface-2); padding: clamp(20px, 3vw, 32px); }
.founder-card__image { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 2px solid var(--line-2); margin-bottom: clamp(18px, 2.5vw, 26px); background: var(--surface-3); }
.founder-card__name { font-family: var(--disp); font-weight: 600; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.04; letter-spacing: -.025em; color: var(--ink); }
.founder-card__role { font-family: var(--mono); font-size: clamp(.8rem, 1.2vw, .95rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 10px 0 16px; }
.founder-card__bio { color: var(--ink-2); font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.66; max-width: 44ch; }
@media (max-width: 767px) { .founders__grid { grid-template-columns: 1fr; } }

/* ========================================================= HERO USP ======== */
/* Klarheit-Fix: in 5 Sek sagt der Hero, was es ist und was es kostet. */
.hero__usp { font-family: var(--disp); font-weight: 500; font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); max-width: 20em; }
.hero__usp b { color: var(--brand); font-weight: 600; }

/* ============================================================ INFOBOX ======= */
/* Trust-, Proof- und Exit-Boxen. Bordiert, keine runden Ecken, kein Icon. */
.infobox { border: 2px solid var(--line-2); padding: clamp(24px, 3vw, 40px); }
.infobox__lbl { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.infobox h3 { font-family: var(--disp); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); margin-bottom: 20px; }
.infobox p { color: var(--ink-2); max-width: 46ch; }
.infobox__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 36px; margin-top: 6px; }
.infobox__list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 1.02rem; }
.infobox__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--brand); }
@media (max-width: 620px) { .infobox__list { grid-template-columns: 1fr; } }

/* ============================================================ NEXTSTEPS ===== */
/* Verbindlicher nächster Schritt (Ablauf, Kontakt): nummerierte Sicherheit. */
.nextsteps { list-style: none; display: grid; gap: 14px; margin-top: clamp(26px, 3.5vw, 44px); max-width: 44em; counter-reset: ns; }
.nextsteps li { position: relative; padding-left: 46px; color: var(--ink); font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.5; }
.nextsteps li::before { counter-increment: ns; content: counter(ns, decimal-leading-zero); position: absolute; left: 0; top: .05em; font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--brand); border: 2px solid var(--line-2); width: 32px; height: 32px; display: grid; place-items: center; }

/* ================================================================ FAQ ======= */
.faq { border-top: 2px solid var(--line-2); margin-top: clamp(30px, 4vw, 56px); }
.faq__item { border-bottom: 2px solid var(--line-2); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.6vw, 30px) 0; font-family: var(--disp); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sign { position: relative; flex: none; width: 18px; height: 18px; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: var(--brand); }
.faq__sign::before { left: 0; right: 0; top: 8px; height: 2px; }
.faq__sign::after { top: 0; bottom: 0; left: 8px; width: 2px; transition: transform .3s var(--ease); }
.faq__item[open] .faq__sign::after { transform: scaleY(0); }
.faq__a { padding: 0 0 clamp(22px, 2.6vw, 30px); max-width: 64ch; color: var(--ink-2); }
.faq__a p + p { margin-top: 12px; }

/* ============================================================ FINALE-CTA ==== */
/* Conversion-Fix: der grosse hostaro.-Block traegt jetzt einen klaren CTA. */
.finale__cta { max-width: 26em; margin-bottom: clamp(44px, 7vw, 96px); }
.finale__head { font-family: var(--disp); font-weight: 600; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; color: var(--surface); }
.finale__sub { margin: 18px 0 32px; color: rgba(236,231,219,.82); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 32ch; }
.finale .btn { background: var(--surface); border-color: var(--surface); color: var(--brand); }
@media (hover: hover) { .finale .btn:hover { background: transparent; color: var(--surface); } }

/* ============================================================ MENSCH-NAME === */
.human__name { display: block; font-family: var(--disp); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.02em; color: #F2EFE4; }
.human__role { display: block; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,239,228,.82); margin-top: 6px; }

/* =============================================================== REVEAL ===== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .kin > span { transform: none; }

/* ============================================================ RESPONSIVE ==== */
@media (max-width: 980px) {
  .human__grid, .contact__grid { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav, .hd__cta .x { display: none; }
  .burger { display: block; }
  .ft__grid { grid-template-columns: 1fr; }
  .hero { align-items: flex-end; padding-top: clamp(92px, 22vw, 116px); }
  .hero__cue { display: none; }
}

/* ========================================================= REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .kin > span { transform: none !important; }
  .hero__cue i { animation: none; }
  .h3d__stage { transform: rotateX(56deg) !important; }
  .h3d__spin { transform: rotateZ(-38deg) !important; }
  .spine__draw { transform: scaleY(1) !important; }
  .intro { display: none !important; }
  .price-card:hover { transform: none !important; }
}

/* ============================================ PAKETE / PREIS (v10) === */
.pricing { padding-block: clamp(56px, 9vw, 120px); }
.pricing__lead { color: var(--ink-2); max-width: 42em; margin-top: clamp(18px, 2.5vw, 28px); }

/* Paket-Karten: eckiges Grid mit Trennlinien statt Gap (Werkstatt-Look) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 64px);
  border: 2px solid #11302A;
}
.price-card {
  display: flex; flex-direction: column;
  background: #ECE7DB; color: #11302A;
  padding: clamp(22px, 2.2vw, 32px);
  position: relative;
}
.price-card + .price-card { border-left: 2px solid #11302A; }

/* Empfohlen-Karte: dunkel, grün gerahmt */
.price-card--featured { background: #11302A; color: #ECE7DB; outline: 2px solid #6BCB86; outline-offset: -2px; z-index: 1; }

.price-card__badge {
  align-self: flex-start;
  font-family: var(--body); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: #6BCB86; color: #11302A;
  padding: 6px 12px; margin-bottom: 18px;
}
.price-card__tier {
  font-family: var(--body); font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #1E6B3C; margin: 0 0 14px;
}
.price-card--featured .price-card__tier { color: #6BCB86; }
.price-card__claim {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 22px;
}
.price-card__rule { height: 2px; background: rgba(17,48,42,.16); margin: 0 0 22px; }
.price-card--featured .price-card__rule { background: rgba(236,231,219,.2); }

.price-card__price { display: flex; align-items: baseline; gap: 8px; }
.price-card__amount {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.price-card__per { font-size: .95rem; font-weight: 600; opacity: .75; }

/* Abo (wiederkehrend) vs. Setup (einmalig) klar getrennt */
.price-block__lbl { font-family: var(--body); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(17,48,42,.70); margin: 0 0 10px; }
.price-card--featured .price-block__lbl { color: rgba(236,231,219,.55); }
.price-block__alt { font-family: var(--body); font-size: .85rem; font-weight: 600; color: rgba(17,48,42,.70); margin: 10px 0 0; }
.price-card--featured .price-block__alt { color: rgba(236,231,219,.72); }
.price-block--setup { margin-top: 20px; padding-top: 20px; border-top: 2px solid rgba(17,48,42,.16); }
.price-card--featured .price-block--setup { border-top-color: rgba(236,231,219,.2); }
.price-block__setup-amount { display: block; font-family: var(--disp); font-weight: 700; font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-block__note { font-family: var(--body); font-size: .82rem; font-weight: 600; color: rgba(17,48,42,.70); margin: 8px 0 0; }
.price-card--featured .price-block__note { color: rgba(236,231,219,.72); }

.price-card__plus {
  font-family: var(--body); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin: 24px 0 0; color: rgba(17,48,42,.70);
}
.price-card--featured .price-card__plus { color: rgba(236,231,219,.6); }
.price-card__list { display: grid; gap: 11px; margin: 22px 0 0; }
.price-card__plus + .price-card__list { margin-top: 14px; }
.price-card__list li {
  position: relative; padding-left: 22px;
  font-family: var(--body); font-size: .96rem; line-height: 1.4;
}
.price-card__list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; background: #1E6B3C;
}
.price-card--featured .price-card__list li::before { background: #6BCB86; }

.price-card__ideal {
  font-family: var(--body); font-style: italic; font-size: .9rem; line-height: 1.45;
  color: rgba(17,48,42,.70); margin: 24px 0 0;
}
.price-card--featured .price-card__ideal { color: rgba(236,231,219,.7); }
.price-card__cta { margin-top: auto; padding-top: 28px; }
.price-card__cta .btn { width: 100%; justify-content: space-between; }

@media (hover: hover) {
  .price-card { transition: transform .2s var(--ease), outline-color .2s var(--ease); }
  .price-card:hover { transform: translateY(-4px); outline: 2px solid #6BCB86; outline-offset: -2px; z-index: 2; }
}

/* Tablet: 2x2 */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card { border-left: none; border-top: none; }
  .price-card:nth-child(even) { border-left: 2px solid #11302A; }
  .price-card:nth-child(n+3) { border-top: 2px solid #11302A; }
}
/* Mobile: einspaltig, Empfohlen zuerst */
@media (max-width: 767px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { border-left: none; border-top: 2px solid #11302A; }
  .price-card:nth-child(even) { border-left: none; }
  .price-card--featured { order: -1; border-top: none; }
}

/* Konditionen-Hinweis: drei Spalten mit Trennern */
.conditions { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(30px, 4vw, 52px); border: 2px solid var(--line-2); }
.conditions__col { padding: clamp(22px, 3vw, 44px); }
.conditions__col + .conditions__col { border-left: 2px solid var(--line-2); }
.conditions__lbl { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }
.conditions__txt { color: var(--ink-2); font-size: .96rem; line-height: 1.5; margin: 0; max-width: 34ch; }
@media (max-width: 767px) {
  .conditions { grid-template-columns: 1fr; }
  .conditions__col + .conditions__col { border-left: none; border-top: 2px solid var(--line-2); }
}

/* Marktvergleichs-Tabelle */
.comparison { margin-top: clamp(60px, 9vw, 120px); }
.comparison__hint { display: none; font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.comparison__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.comparison-table th, .comparison-table td { text-align: left; padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.6vw, 22px); border-bottom: 2px solid var(--line); vertical-align: top; font-family: var(--body); font-size: .92rem; line-height: 1.35; color: var(--ink-2); }
.comparison-table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--line-2); }
.comparison-table tbody th { font-weight: 600; color: var(--ink); }
.comparison-table .is-hostaro { background: rgba(107,203,134,.14); color: var(--ink); font-weight: 600; }
.comparison-table thead th.is-hostaro { color: var(--brand); }
.comparison-table tr.total th, .comparison-table tr.total td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); }
.comparison__note { color: var(--ink-3); font-size: .8rem; line-height: 1.5; margin: 16px 0 0; max-width: 78ch; }
@media (max-width: 767px) { .comparison__hint { display: block; } }

/* Abschluss-CTA der Preis-Sektion */
.pricing-cta { margin-top: clamp(56px, 8vw, 100px); }
.pricing-cta__head { font-family: var(--disp); font-weight: 600; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; max-width: 16em; margin: 0 0 26px; }

/* Preis-Teaser auf der Startseite */
.ptease { margin-top: clamp(30px, 4vw, 52px); }
.ptease__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--line-2); }
.ptease__item { padding: clamp(18px, 2vw, 28px); }
.ptease__item + .ptease__item { border-left: 2px solid var(--line-2); }
.ptease__tier { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin: 0 0 10px; }
.ptease__price { font-family: var(--disp); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ptease__per { display: block; font-family: var(--body); font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.ptease__cta { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 767px) {
  .ptease__grid { grid-template-columns: 1fr 1fr; }
  .ptease__item { border-left: none; border-top: none; }
  .ptease__item:nth-child(even) { border-left: 2px solid var(--line-2); }
  .ptease__item:nth-child(n+3) { border-top: 2px solid var(--line-2); }
}

/* ============================================ PAKET-FINDER (v10) ===== */
.finder { max-width: 720px; margin-top: clamp(34px, 5vw, 60px); }
.finder__progress { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 3vw, 36px); }
.finder__count { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.finder__bar { flex: 1; height: 3px; background: var(--line); position: relative; overflow: hidden; }
.finder__bar > span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--brand); transition: width .35s var(--ease); }

.finder__q { font-family: var(--disp); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 clamp(22px, 3vw, 32px); max-width: 16em; }
.finder__options { display: grid; gap: 12px; }
.finder__opt { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px); background: var(--surface-2); border: 2px solid var(--line-2); color: var(--ink); font-family: var(--body); font-size: clamp(.98rem, 1.6vw, 1.08rem); font-weight: 500; line-height: 1.35; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.finder__opt::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid var(--line-2); transition: background .2s, border-color .2s; }
.finder__opt[aria-pressed="true"] { border-color: var(--brand); }
.finder__opt[aria-pressed="true"]::before { background: var(--brand); border-color: var(--brand); }
.finder__opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) { .finder__opt:hover { border-color: var(--brand); background: var(--surface-3); } .finder__opt:hover::before { border-color: var(--brand); } }

.finder__nav { margin-top: clamp(20px, 3vw, 28px); }
.finder__back { background: none; border: none; font-family: var(--body); font-size: .9rem; font-weight: 600; color: var(--ink-3); cursor: pointer; padding: 8px 0; }
.finder__back:hover { color: var(--brand); }

.finder__result-lbl { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }
.finder__result-card { border: 2px solid var(--ink); padding: clamp(26px, 3.5vw, 44px); background: var(--surface-2); }
.finder__result-tier { font-family: var(--body); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin: 0; }
.finder__result-name { font-family: var(--disp); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.03em; margin: 8px 0 0; }
.finder__result-claim { font-family: var(--body); font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); margin: 14px 0 0; max-width: 34em; }
.finder__result-price { font-family: var(--body); font-size: 1rem; color: var(--ink); margin: 22px 0 0; }
.finder__result-price b { font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums; }
.finder__result-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3.5vw, 36px); }
.finder__restart { margin-top: clamp(22px, 3vw, 30px); background: none; border: none; font-family: var(--mono); font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.finder__restart:hover { color: var(--brand); }

/* Skip-Link: unsichtbar bis Tastatur-Fokus */
.skip{position:fixed;top:-100px;left:0;z-index:10000;background:#11302A;color:#ECE7DB;padding:14px 22px;font-weight:600;text-decoration:none}
.skip:focus{top:0}

/* ================================================== VIEW TRANSITIONS ======= */
/* Weiche Seitenwechsel innerhalb hostaro.ch: Header bleibt stehen, der
   Inhalt blendet kurz. Browser ohne Support ignorieren das komplett. */
@view-transition { navigation: auto; }
.hd { view-transition-name: header; }
::view-transition-old(root) { animation: vt-out .26s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .34s var(--ease-io) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================ PROZESS HORIZONTAL =========== */
/* JS setzt .pxh--pinned nur auf Desktop mit Motion + GSAP. Die 4 Schritte
   fahren dann als gepinnte horizontale Sequenz durch, mit wachsender Linie
   und orangem Bug. Fallback = vertikale Liste wie gehabt. */
.pxh__line { display: none; }
.pxh--pinned .pxh__pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.pxh--pinned .px { display: flex; align-items: stretch; border-top: none; margin-top: 0; width: max-content; }
.pxh--pinned .px__step { flex: 0 0 min(720px, 74vw); border-bottom: none; border-left: 2px solid var(--line-2); padding-block: 0; padding-inline: clamp(28px, 3.5vw, 64px); }
.pxh--pinned .px__step:first-child { border-left: none; padding-left: 0; }
.pxh--pinned .pxh__line { display: block; position: relative; height: 2px; background: var(--line); margin-top: clamp(34px, 5vw, 60px); }
.pxh--pinned .pxh__line i { position: absolute; inset: 0; background: var(--brand); transform: scaleX(var(--px, 0)); transform-origin: left; }
.pxh--pinned .pxh__line b { position: absolute; top: 50%; left: calc(var(--px, 0) * 100%); width: 16px; height: 16px; background: var(--orange); transform: translate(-50%, -50%); }
.pxh--pinned .px__step h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -.025em; }
.pxh--pinned .px__no { font-size: clamp(2.2rem, 4vw, 3.6rem); color: var(--brand); }