/* ═══════════════════════════════════════════════════════════
   BENEDIKT WALTER · WalterCoaching — Startseite 2026
   Marke: Schwarz & Gold #C9963A, Oswald + Inter (selbst gehostet).

   Leitgedanke dieser Fassung: die Zielgruppe scheitert nicht am
   Wissen, sondern am Dranbleiben. Die Seite verkauft deshalb nicht
   "den Plan", sondern die Begleitung, die ihn durchtraegt.

   Bewegung (GSAP, Lenis, WebGL) ist reine Zugabe. Alles, was Inhalt
   sichtbar macht, laeuft ohne Bibliothek - faellt eine aus, ist die
   Seite trotzdem vollstaendig lesbar.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(fonts/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Exakt die Toene der Live-Seite: neutrales Schwarz. Die vorherigen
     Werte (#13131A usw.) hatten einen leichten Blauanteil, der auf vielen
     Displays als Dunkelblau wirkte. */
  --ink:#080808; --bg-2:#0F0F0F; --surface:#141414; --surface-2:#1A1A1A;
  --text:#F4F3EE; --body:#C2C0B8; --mut:#9A9890; --faint:#6B6963;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --gold:#C9963A; --gold-hi:#E9C880; --gold-lo:#8B6914;
  --gold-bright:#FFD055;   /* Ueberschriften-Gold der Live-Seite */
  --gold-tint:rgba(201,150,58,.09); --gold-edge:rgba(201,150,58,.3);

  --t-sm: clamp(.86rem,.83rem + .15vw,.95rem);
  --t-base: clamp(1rem,.96rem + .2vw,1.08rem);
  --t-lg: clamp(1.08rem,1rem + .4vw,1.3rem);
  --t-xl: clamp(1.2rem,1.08rem + .55vw,1.55rem);
  --t-2xl: clamp(2rem,1.45rem + 2.4vw,3.6rem);
  /* Obergrenze so, dass die Hero-Zeilen am Desktop nicht dreifach brechen. */
  --t-3xl: clamp(2.35rem,1.55rem + 3.6vw,4.9rem);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --mw:1200px; --gut:clamp(18px,4vw,36px); --sec:clamp(80px,9vw,140px);
  --ease:cubic-bezier(.16,1,.3,1);
  --z-bar:60; --z-menu:80; --z-nav:90;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { background:var(--ink); color:var(--body); font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--t-base); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection { background:var(--gold); color:#0A0A0C; }
:focus-visible { outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:4px; }

.skip { position:absolute; left:12px; top:-60px; z-index:200; background:var(--gold); color:#0A0A0C;
  padding:12px 20px; border-radius:var(--r-sm); font-weight:600; transition:top .2s; }
.skip:focus { top:12px; }

.wrap { width:100%; max-width:var(--mw); margin:0 auto; padding:0 var(--gut); }
.sec { padding:var(--sec) 0; position:relative; }
.sec-alt { background:var(--bg-2); }

/* ── TYPO ─────────────────────────────────────────────────── */
h1,h2,h3 { font-family:'Oswald',sans-serif; color:var(--text); font-weight:700;
  text-transform:uppercase; letter-spacing:-.003em; text-wrap:balance;
  /* nicht enger: versale Umlaut-Punkte ragen sonst in die Zeile darueber */
  line-height:1.05; }
h1 { font-size:var(--t-3xl); }
h2 { font-size:var(--t-2xl); }
h3 { font-size:var(--t-xl); line-height:1.22; letter-spacing:.01em; }
.gold { color:var(--gold-bright); }
.grad { background:linear-gradient(96deg,#FFE08A 0%,var(--gold-bright) 45%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.eyebrow { display:inline-flex; align-items:center; gap:12px; margin-bottom:20px;
  font-family:'Oswald',sans-serif; font-size:.78rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; color:var(--gold-bright); }
.eyebrow::before { content:''; width:32px; height:1px; background:var(--gold-bright); }
.head { max-width:820px; margin-bottom:clamp(44px,5.5vw,76px); }
.head--c { margin-left:auto; margin-right:auto; text-align:center; }
.head--c .eyebrow { justify-content:center; }
.lede { color:var(--mut); font-size:var(--t-lg); line-height:1.65; max-width:62ch; margin-top:22px; }
.head--c .lede { margin-left:auto; margin-right:auto; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 30px; border-radius:100px; overflow:hidden;
  font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  transition:box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.btn svg { width:17px; height:17px; flex:none; transition:transform .35s var(--ease); }
.btn:hover svg { transform:translateX(4px); }
.btn-gold { background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo)); color:#0A0A0C;
  box-shadow:0 12px 32px -12px rgba(201,150,58,.7); }
.btn-gold:hover { box-shadow:0 18px 44px -12px rgba(201,150,58,.9); }
.btn-gold::after { content:''; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transition:transform .8s var(--ease); }
.btn-gold:hover::after { transform:translateX(130%); }
.btn-ghost { border:1px solid var(--line-2); color:var(--text); }
.btn-ghost:hover { border-color:var(--gold); background:var(--gold-tint); }
.btns { display:flex; flex-wrap:wrap; gap:12px; }

/* ── NAVIGATION ───────────────────────────────────────────── */
.nav { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:var(--z-nav);
  width:calc(100% - 2 * var(--gut)); max-width:var(--mw); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:10px 10px 10px 22px; border-radius:100px; border:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease); }
.nav.stuck .nav-in { background:rgba(15,15,15,.78); border-color:var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.logo { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.logo span { color:var(--faint); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a:not(.btn) { padding:10px 14px; border-radius:100px; font-size:var(--t-sm); color:var(--mut);
  transition:color .2s, background .2s; }
.nav-links a:not(.btn):hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-links .btn { min-height:44px; padding:0 20px; margin-left:8px; font-size:.84rem; }
.burger { display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span { width:18px; height:1.5px; background:var(--text); transition:transform .35s var(--ease), opacity .2s; }
.burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.menu { position:fixed; inset:0; z-index:var(--z-menu); background:rgba(8,8,8,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:100px var(--gut) 40px; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.menu.open { opacity:1; visibility:visible; }
.menu a { font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:clamp(1.6rem,7vw,2.4rem); letter-spacing:.03em; color:var(--text); }
.menu a.cta { color:var(--gold); }

/* ── HERO ─────────────────────────────────────────────────── */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:130px 0 80px;
  /* Statischer Goldschein ersetzt den frueheren WebGL-Nebel: aehnliche
     Stimmung, aber keine Rechenarbeit pro Bild. */
  background:
    radial-gradient(55% 60% at 78% 38%, rgba(201,150,58,.16), transparent 62%),
    radial-gradient(40% 45% at 12% 8%, rgba(201,150,58,.07), transparent 70%),
    var(--ink); }
.hero .wrap { position:relative; z-index:1; }
.hero-g { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(34px,5vw,72px); align-items:center; }
/* Eigene, kleinere Groesse: die Aussage ist zwei Saetze lang. Mit der
   allgemeinen H1-Groesse lief sie auf sechs Zeilen und schob den Button
   am Desktop unter die Falz. */
.hero h1 { margin:0 0 24px; font-size:clamp(2.1rem,1.3rem + 2.7vw,3.9rem); }
.hero h1 .l2 { display:block; }
.hero-sub { color:var(--mut); font-size:var(--t-lg); max-width:54ch; margin-bottom:36px; }
.hero-sub b { color:var(--text); font-weight:500; }

.trust { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:34px; }
.faces { display:flex; }
.faces img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--ink); margin-left:-12px; }
.faces img:first-child { margin-left:0; }
.trust-t { font-size:.86rem; color:var(--mut); line-height:1.45; }
.trust-t b { color:var(--text); font-weight:600; display:block; font-size:.95rem; }
.stars { color:var(--gold); letter-spacing:.12em; }

/* Portrait mit schwebender Bewertung: ein Gesicht im ersten Bildschirm
   schafft bei einem Personal Coach mehr Vertrauen als jede Grafik. */
.hero-pic { position:relative; }
.hero-pic .frame { position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2);
  aspect-ratio:4/5; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.hero-pic .frame img { width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.hero-pic .frame::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,8,.75) 0%, transparent 42%); }
.float { position:absolute; z-index:2; padding:16px 18px; border-radius:var(--r);
  background:rgba(20,20,20,.82); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 20px 50px -20px rgba(0,0,0,.8); }
.float-q { left:-38px; bottom:34px; max-width:260px; }
.float-q p { font-size:.86rem; color:var(--text); font-style:italic; line-height:1.5; margin:6px 0 8px; }
.float-q small { font-size:.76rem; color:var(--mut); }
.float-n { right:-22px; top:34px; text-align:center; }
.float-n b { display:block; font-family:'Oswald',sans-serif; font-size:1.8rem; line-height:1; color:var(--gold-hi); }
.float-n small { font-size:.72rem; color:var(--mut); text-transform:uppercase; letter-spacing:.1em; }

/* ── LAUFBAND ─────────────────────────────────────────────── */
.marquee { overflow:hidden; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mq-track { display:flex; width:max-content; animation:mq 38s linear infinite; }
.mq-set { display:flex; align-items:center; gap:48px; padding-right:48px; }
.mq-set span { font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.12em; color:var(--faint); white-space:nowrap; }
.mq-set i { width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
@keyframes mq { to { transform:translateX(-50%); } }

/* ── KARTEN (allgemein) ───────────────────────────────────── */
.card { position:relative; padding:clamp(26px,3vw,38px); border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface-2),var(--surface)); overflow:hidden; isolation:isolate;
  transition:border-color .35s var(--ease); }
.card:hover { border-color:var(--gold-edge); }
.card::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(201,150,58,.1), transparent 62%); }
.card:hover::before { opacity:1; }
.card-n { display:block; font-family:'Oswald',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:.16em; color:var(--gold); margin-bottom:18px; }
.card h3 { margin-bottom:12px; }
.card p { color:var(--mut); font-size:var(--t-sm); line-height:1.7; }

/* ── PROBLEM ──────────────────────────────────────────────── */
.pain { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.bridge { margin-top:clamp(40px,5vw,64px); padding:clamp(28px,4vw,48px); border-radius:var(--r-xl);
  border:1px solid var(--gold-edge); background:var(--gold-tint); text-align:center; }
.bridge p { font-family:'Oswald',sans-serif; font-weight:500; color:var(--text);
  font-size:clamp(1.25rem,1.05rem + .9vw,1.9rem); line-height:1.35; text-transform:none; max-width:36ch; margin:0 auto; }
.bridge p span { color:var(--gold); }

/* ── ERGEBNISSE ───────────────────────────────────────────── */
.rail { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:4px var(--gut) 24px; margin:0 calc(-1 * var(--gut)); }
.rail::-webkit-scrollbar { display:none; }
.tcard { flex:0 0 clamp(236px,24vw,290px); scroll-snap-align:start; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--surface); }
.tcard img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.tcard figcaption { display:flex; justify-content:space-between; align-items:baseline; padding:14px 18px 16px; }
.tcard b { font-family:'Oswald',sans-serif; font-size:1.35rem; font-weight:600; color:var(--gold-hi); }
.tcard span { font-size:.85rem; color:var(--mut); }
.rail-hint { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:10px; }
.rail-btns { display:flex; gap:8px; }
.rail-btns button { width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center;
  transition:border-color .2s, background .2s; }
.rail-btns button:hover { border-color:var(--gold); background:var(--gold-tint); }
.rail-btns svg { width:18px; height:18px; }
.note { font-size:.8rem; color:var(--faint); text-decoration:underline; text-underline-offset:3px; }
.note:hover { color:var(--gold); }

/* ── ZIELE ────────────────────────────────────────────────── */
.goals { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.goal { display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); transition:border-color .35s var(--ease), transform .45s var(--ease); }
.goal:hover { border-color:var(--gold-edge); transform:translateY(-4px); }
.goal-img { position:relative; aspect-ratio:16/10; overflow:hidden; }
.goal-img img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.goal:hover .goal-img img { transform:scale(1.05); }
.goal-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--surface) 2%, transparent 60%); }
.goal-b { padding:4px clamp(22px,2.6vw,30px) clamp(24px,2.8vw,32px); display:flex; flex-direction:column; flex:1; }
.goal-b h3 { margin-bottom:10px; }
.goal-b p { color:var(--mut); font-size:var(--t-sm); margin-bottom:18px; }
.goal-b ul { display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.goal-b li { position:relative; padding-left:26px; font-size:var(--t-sm); color:var(--body); line-height:1.5; }
.goal-b li::before { content:''; position:absolute; left:2px; top:.42em; width:12px; height:6px;
  border-left:1.8px solid var(--gold); border-bottom:1.8px solid var(--gold); transform:rotate(-45deg); }
.goal-b .go { margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:'Oswald',sans-serif; font-size:.88rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); }
.goal-b .go svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.goal:hover .go svg { transform:translateX(4px); }

/* ── SYSTEM ───────────────────────────────────────────────── */
.system { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px;
  border:1px solid var(--gold-edge); background:linear-gradient(150deg,rgba(201,150,58,.14),transparent); color:var(--gold); }
.ico svg { width:22px; height:22px; }

/* ── VORTEILE (Aufbau wie auf der Live-Seite) ─────────────── */
.benefits-g { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,64px); align-items:center; }
.benefits-img { width:100%; }
.benefits-img img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:58% 28%;
  border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.benefit-list { display:flex; flex-direction:column; gap:22px; margin-top:36px; }
.bitem { display:flex; gap:18px; align-items:flex-start; padding:22px 24px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); transition:border-color .3s var(--ease); }
.bitem:hover { border-color:var(--gold-lo); }
.bicon { width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(201,150,58,.12); border:1px solid rgba(201,150,58,.25); color:var(--gold);
  font-size:1.3rem; line-height:1; }
.bitem-title { font-weight:700; font-size:.95rem; color:var(--text); margin-bottom:5px; }
.bitem-txt { font-size:.86rem; color:var(--mut); line-height:1.65; }

/* ── ABLAUF ───────────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:s; }
.step-n { font-family:'Oswald',sans-serif; font-size:clamp(2.6rem,2rem + 2vw,3.8rem); font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(201,150,58,.5); margin-bottom:20px; }

/* ── ÜBER MICH ────────────────────────────────────────────── */
.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.about-pic { position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); }
.about-pic img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.about p { color:var(--body); margin-bottom:18px; }
.about p strong { color:var(--text); font-weight:600; }
.lics { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.lic { padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:var(--surface);
  font-size:.8rem; color:var(--mut); }

/* ── STIMMEN ──────────────────────────────────────────────── */
.quotes { columns:3; column-gap:16px; }
.quote { break-inside:avoid; margin-bottom:16px; padding:28px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface); }
.quote p { font-size:var(--t-sm); color:var(--body); font-style:italic; line-height:1.75; margin:12px 0 18px; }
.quote footer { display:flex; align-items:center; gap:12px; }
.quote footer img, .quote footer .av { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
.quote footer .av { display:grid; place-items:center; background:linear-gradient(140deg,var(--gold),var(--gold-lo));
  color:#0A0A0C; font-family:'Oswald',sans-serif; font-size:.8rem; font-weight:600; }
.quote footer b { font-family:'Oswald',sans-serif; font-weight:500; font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text); }
.rating { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:40px; }
.rating div { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:100px;
  border:1px solid var(--line); background:var(--surface); font-size:.84rem; color:var(--mut); }
.rating b { font-family:'Oswald',sans-serif; font-size:1rem; color:var(--gold); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { max-width:880px; margin:0 auto; }
.faq-i { border-bottom:1px solid var(--line); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:22px; text-align:left;
  padding:24px 2px; min-height:64px; font-family:'Oswald',sans-serif; font-size:var(--t-lg); font-weight:500;
  color:var(--text); transition:color .2s; }
.faq-q:hover { color:var(--gold); }
.faq-ic { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); position:relative;
  transition:transform .4s var(--ease), border-color .2s; }
.faq-ic::before,.faq-ic::after { content:''; position:absolute; inset:0; margin:auto; background:var(--gold); border-radius:2px; }
.faq-ic::before { width:11px; height:1.5px; } .faq-ic::after { width:1.5px; height:11px; transition:opacity .25s; }
.faq-i.open .faq-ic { transform:rotate(180deg); border-color:var(--gold); }
.faq-i.open .faq-ic::after { opacity:0; }
.faq-a { height:0; overflow:hidden; transition:height .4s var(--ease); }
.faq-a p { padding:0 2px 26px; color:var(--mut); font-size:var(--t-sm); max-width:72ch; }

/* ── ABSCHLUSS ────────────────────────────────────────────── */
.final { position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--gold-edge);
  padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px); text-align:center;
  background-image:linear-gradient(180deg,rgba(15,15,15,.9),rgba(15,15,15,.95)),
    radial-gradient(80% 120% at 50% 0%,rgba(201,150,58,.2),transparent 62%), url(img/start.webp);
  background-size:cover; background-position:center; }
.final .lede { margin:22px auto 38px; }
.final .small { margin-top:18px; font-size:.84rem; color:var(--mut); }

/* ── FUSS ─────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(56px,6vw,84px) 0 30px; margin-top:var(--sec); }
.foot-g { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(28px,4vw,54px); margin-bottom:46px; }
.foot-b p { color:var(--mut); font-size:var(--t-sm); margin:16px 0 22px; max-width:34ch; }
.socials { display:flex; gap:10px; }
.socials a { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--mut);
  transition:color .2s, border-color .2s; }
.socials a:hover { color:var(--gold); border-color:var(--gold); }
.socials svg { width:17px; height:17px; }
.fcol h4 { font-family:'Oswald',sans-serif; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--text); margin-bottom:18px; }
.fcol ul { display:flex; flex-direction:column; gap:11px; }
.fcol a { font-size:var(--t-sm); color:var(--mut); } .fcol a:hover { color:var(--gold); }
.notes { border-top:1px solid var(--line); padding-top:22px; }
.notes summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.8rem; color:var(--faint); }
.notes summary::-webkit-details-marker { display:none; }
.notes summary::after { content:'+'; color:var(--gold); font-size:1rem; }
.notes[open] summary::after { content:'–'; }
.notes p { font-size:.78rem; color:var(--faint); line-height:1.8; margin-top:14px; max-width:92ch; }
.notes p strong { color:var(--mut); }
.copy { border-top:1px solid var(--line); margin-top:22px; padding-top:22px; text-align:center; font-size:.78rem; color:var(--faint); }

/* ── MOBILE HANDLUNGSLEISTE ───────────────────────────────── */
.mcta { position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar); display:none; gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:rgba(8,8,8,.94);
  border-top:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateY(110%); transition:transform .4s var(--ease); }
.mcta.show { transform:none; }
.mcta .btn { flex:1; min-height:50px; font-size:.86rem; padding:0 14px; }
.mcta .tel { flex:0 0 54px; border-radius:100px; border:1px solid var(--line-2); display:grid; place-items:center; }
.mcta .tel svg { width:20px; height:20px; }

/* ── EINBLENDEN ───────────────────────────────────────────── */
/* Unsichtbar nur, wenn JavaScript laeuft - ohne Skript bleibt alles sichtbar. */
.js .rv { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity:1; transform:none; }

/* ── UMBRÜCHE ─────────────────────────────────────────────── */
@media (max-width:1080px) {
  .pain { grid-template-columns:repeat(2,1fr); }
  .quotes { columns:2; }
  .foot-g { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px) {
  .nav-links { display:none; } .burger { display:flex; }
  .hero-g { grid-template-columns:1fr; }
  .hero-pic { max-width:420px; margin:10px auto 0; width:100%; }
  .float-q { left:-10px; } .float-n { right:-8px; }
  .goals { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  .system { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .about { grid-template-columns:1fr; } .about-pic { max-width:460px; }
  .benefits-g { grid-template-columns:1fr; }
  .benefits-img { max-width:440px; justify-self:center; }
}
@media (max-width:640px) {
  .hero { min-height:auto; padding:118px 0 64px; }
  .pain { grid-template-columns:1fr; }
  .quotes { columns:1; }
  .foot-g { grid-template-columns:1fr; }
  .btns .btn { width:100%; }
  .mcta { display:flex; }
  body { padding-bottom:76px; }
  .float-q { max-width:220px; bottom:18px; }
  /* Am Handy stand das Portrait unter Text, Buttons und Bewertungen und
     war im ersten Bildschirm nicht zu sehen. Jetzt randlos oben, die
     Headline liegt auf dem auslaufenden Bildende. */
  .hero { padding:0 0 56px; }
  .hero-g { gap:0; }
  .hero-pic { order:-1; max-width:none; width:auto; margin:0 calc(-1 * var(--gut)); }
  .hero-pic .frame { aspect-ratio:auto; height:min(50svh,430px); border:0; border-radius:0; box-shadow:none; }
  .hero-pic .frame img { object-position:center 8%; }
  .hero-pic .frame::after { background:
    linear-gradient(to top, var(--ink) 2%, rgba(8,8,8,.6) 30%, transparent 55%),
    linear-gradient(to bottom, rgba(8,8,8,.55), transparent 22%); }
  .hero-pic .float { display:none; }
  .hero-g > div:first-child { position:relative; z-index:2; margin-top:-96px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .rv { opacity:1 !important; transform:none !important; }
  .mq-track { animation:none; }
}

/* ═══════════════════════════════════════════════════════════
   UNTERSEITEN · KALORIENRECHNER
   ═══════════════════════════════════════════════════════════ */
.calc-top { padding-top:clamp(120px,12vw,160px); }
.crumbs { font-size:.82rem; color:var(--faint); margin-bottom:26px; }
.crumbs a { color:var(--mut); } .crumbs a:hover { color:var(--gold); }
.calc-h1 { font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem); }

.calc { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
.calc-form { display:flex; flex-direction:column; gap:22px; }
.calc-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fld label, .seg-f legend { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:8px; letter-spacing:.01em; }
.seg-f { border:0; padding:0; margin:0; min-width:0; }

/* Eingaben: dunkle Flaeche, aber mit klarer Kante - sonst wirken
   Felder auf Schwarz schnell wie deaktiviert. */
.unit { position:relative; }
.unit input, .fld select {
  width:100%; min-height:54px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--ink); border:1.5px solid var(--line-2); color:var(--text);
  font:inherit; font-size:1.05rem; transition:border-color .2s, box-shadow .2s;
  -moz-appearance:textfield; -webkit-appearance:none; appearance:none; }
.unit input { padding-right:62px; }
.unit input::-webkit-outer-spin-button, .unit input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.unit span { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:.82rem; color:var(--faint); pointer-events:none; }
.fld select { cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23C9963A' stroke-width='2'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
.fld select option { background:var(--surface); color:var(--text); }
.unit input:focus, .fld select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,150,58,.22); }
.unit input[aria-invalid="true"] { border-color:#E0655A; }
.hint { font-size:.76rem; color:#E88A80; margin-top:6px; }

.seg { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:14px; background:var(--ink); border:1px solid var(--line-2); }
.seg-3 { grid-template-columns:repeat(3,1fr); }
.seg label { position:relative; cursor:pointer; }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg span { display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 10px; border-radius:10px;
  font-family:'Oswald',sans-serif; font-size:.9rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--mut);
  transition:background .2s, color .2s; text-align:center; }
.seg input:checked + span { background:linear-gradient(135deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo)); color:#0A0A0C; }
.seg input:focus-visible + span { outline:2px solid var(--gold-hi); outline-offset:2px; }
.calc-btn { align-self:stretch; }

.calc-res { position:sticky; top:96px; border-color:var(--gold-edge);
  background:radial-gradient(90% 70% at 50% 0%,rgba(201,150,58,.14),transparent 70%), linear-gradient(160deg,var(--surface-2),var(--surface)); }
.calc-res .res-full { display:none; } .calc-res.voll .res-full { display:block; } .calc-res.voll .res-empty { display:none; }
.res-empty { color:var(--mut); text-align:center; padding:46px 10px; }
.res-empty-n { font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(2.6rem,2rem + 2vw,3.6rem); line-height:1; color:var(--faint); margin-bottom:16px; }
.res-empty p { font-size:.92rem; max-width:30ch; margin:0 auto; } .res-empty b { color:var(--text); font-weight:600; }
/* Werte nach der Berechnung geändert: Ergebnis bleibt stehen, aber gedämpft. */
.res-stale { display:none; font-size:.82rem; color:var(--gold-hi); text-align:center; padding:10px 12px; margin-bottom:14px;
  border-radius:var(--r-sm); background:var(--gold-tint); border:1px solid var(--gold-edge); }
.calc-res.veraltet .res-stale { display:block; }
.calc-res.veraltet .res-full { opacity:.35; transition:opacity .25s; }
.res-main { text-align:center; padding:6px 0 4px; }
.res-n { font-family:'Oswald',sans-serif; font-weight:700; line-height:1; font-size:clamp(3.2rem,2.4rem + 3vw,4.8rem); color:var(--gold-hi); }
.res-l { font-size:.86rem; color:var(--mut); margin-top:8px; }
.res-t { font-size:.86rem; color:var(--body); text-align:center; margin:14px auto 22px; max-width:40ch; line-height:1.6; }
.res-pair { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:22px; }
.res-pair div { background:var(--surface); padding:14px 12px; text-align:center; }
.res-pair b { display:block; font-family:'Oswald',sans-serif; font-size:1.35rem; color:var(--text); }
.res-pair span { font-size:.76rem; color:var(--mut); }
.mbar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--line); margin-bottom:14px; }
.mbar i { display:block; height:100%; transition:width .5s var(--ease); }
#b-ew, .d1 { background:var(--gold); } #b-kh, .d2 { background:#8C8A84; } #b-fett, .d3 { background:#5C4A2A; }
.mrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--body); }
.mrow:last-child { border-bottom:0; }
.mrow b { margin-left:auto; font-family:'Oswald',sans-serif; font-size:1.05rem; color:var(--text); }
.dot { width:10px; height:10px; border-radius:50%; flex:none; }
.res-cta { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); text-align:center; }
.res-cta p { font-size:.86rem; color:var(--mut); margin-bottom:16px; line-height:1.6; }
.res-cta p b { color:var(--text); }
.res-cta .btn { width:100%; }
.calc-note { font-size:.78rem; color:var(--faint); line-height:1.7; margin-top:22px; max-width:90ch; }

/* Lesetext unter dem Rechner */
.prose { max-width:820px; }
.prose h2 { margin-bottom:34px; }
.prose h3 { font-size:var(--t-lg); margin:34px 0 12px; }
.prose p { color:var(--body); margin-bottom:14px; }
.prose p strong { color:var(--text); }
.formula { display:grid; gap:8px; margin:18px 0 8px; }
.formula div { padding:14px 18px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); font-size:.92rem; color:var(--text); font-variant-numeric:tabular-nums; }
.formula span { display:inline-block; min-width:78px; font-family:'Oswald',sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); }
.tbl-wrap { overflow-x:auto; margin:18px 0 12px; }
.tbl { width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th, .tbl td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.tbl th { font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--gold); }
.tbl td:last-child, .tbl th:last-child { text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }

/* Hinweis-Band auf der Startseite */
.tool-band { display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  padding:clamp(24px,3vw,36px); border-radius:var(--r-xl); border:1px solid var(--gold-edge); background:var(--gold-tint); }
.tool-band .ico { margin:0; }
.tool-band h3 { margin-bottom:6px; }
.tool-band p { color:var(--mut); font-size:var(--t-sm); }

.nav-links a[aria-current="page"] { color:var(--gold); }

@media (max-width:980px) {
  .calc { grid-template-columns:1fr; }
  .calc-res { position:static; }
  /* Das Ergebnis steht mobil unter dem Formular. Der Button ist dort der
     Weg dorthin - also gold und volle Breite statt dezent. */

  .tool-band { grid-template-columns:1fr; text-align:left; }
}
@media (max-width:560px) {
  .calc-row { grid-template-columns:1fr 1fr; }
  .calc-row .fld:first-child { grid-column:1 / -1; }
  .seg span { font-size:.8rem; letter-spacing:.03em; }
}

/* ── Ergebnis per E-Mail ─────────────────────────────────── */
.mail-box { margin-top:22px; padding:20px; border-radius:var(--r); background:var(--gold-tint); border:1px solid var(--gold-edge); }
.mail-t { font-size:.88rem; color:var(--body); line-height:1.55; margin-bottom:14px; }
.mail-t b { color:var(--text); }
.mail-row { display:grid; gap:8px; margin-bottom:12px; }
.mail-row input { width:100%; min-height:50px; padding:12px 14px; border-radius:var(--r-sm); background:var(--ink);
  border:1.5px solid var(--line-2); color:var(--text); font:inherit; font-size:1rem; }
.mail-row input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,150,58,.22); }
.mail-row input[aria-invalid="true"] { border-color:#E0655A; }
.mail-ok { display:flex; gap:10px; align-items:flex-start; font-size:.74rem; color:var(--mut); line-height:1.55; margin-bottom:14px; cursor:pointer; }
.mail-ok input { flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--gold); }
.mail-ok a { color:var(--text); }
.mail-ok.fehlt span { color:#E88A80; }
.mail-box .btn { width:100%; }
.mail-box .btn[disabled] { opacity:.6; cursor:wait; }
.mail-msg { font-size:.84rem; margin-top:12px; line-height:1.5; }
.mail-msg:empty { display:none; }
.mail-msg.ok { color:#8FD19E; } .mail-msg.err { color:#E88A80; }
.mail-box.gesendet .mail-row, .mail-box.gesendet .mail-ok, .mail-box.gesendet .btn, .mail-box.gesendet .mail-t { display:none; }
.mail-box.gesendet .mail-msg { margin-top:0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp { position:absolute; left:-9999px; height:0; overflow:hidden; }
.res-cta .btn { width:100%; }

/* ── ratedo-Siegel: exakt die Werte der Live-Seite ──────── */
:root {
  --ratedo-color-font: #121212;
  --ratedo-color-background: linear-gradient(to top, #f6faff, #fbf4ff);
  --ratedo-color-shadow: rgba(0, 0, 0, 0.12);
  --ratedo-size-border: 1px;
  --ratedo-color-border: #ddd;
  --ratedo-distance-to-bottom: 50%;
}
/* Auf dem Telefon waere das Siegel 110 px von 390 px Bildschirmbreite
   und laege mitten ueber dem Text - dort ausgeblendet. Die Bewertung
   steht mobil ohnehin im Hero und im Bewertungsabschnitt. */
@media (max-width:640px) { .ratedo-w20, .ratedo-w20Widget { display:none !important; } }

/* Kleiner Hinweis unter Buchungsbuttons: senkt die Hemmschwelle. */
.cta-micro { margin-top:14px; font-size:.82rem; color:var(--mut); letter-spacing:.01em; }
.cta-micro--left { margin-top:16px; }

/* Ergebnisse: Ueberschrift und Bilder enger, damit nach dem Klick auf
   "Ergebnisse" die Vorher-Nachher-Bilder komplett im Bild sind. */
#ergebnisse .head { margin-bottom:32px; }
#ergebnisse .lede { margin-top:14px; }
/* Breite haengt auch an der Bildschirmhoehe: auf niedrigen Laptops
   (1280 x 800) werden die Karten etwas kleiner, damit sie nach dem
   Sprung komplett sichtbar sind. */
.tcard { flex-basis:clamp(180px, min(19vw, calc((100svh - 500px) / 1.5)), 262px); }
@media (max-width:640px) { .tcard { flex-basis:clamp(220px,64vw,262px); } }