:root{
  --paper:#faf5ec;        /* warmes Creme statt reinem Weiß */
  --paper-2:#f4ecdb;      /* tieferer Sandton für Wechsel-Sektionen */
  --ink:#2a241f;          /* warmes Fast-Schwarz für Überschriften/Text */
  --ink-soft:#6c6157;     /* warmer Fließtext-Grau */
  --gold:#e09900;         /* Marken-Gold */
  --gold-deep:#bd8000;    /* dunkleres Gold für Hover/Flächen */
  --gold-soft:#f7d584;    /* weiches Gold für Highlights */
  --dark:#222222;         /* dunkle Sektionen (wie Bestandsseite) */
  --red:#e23b2e;          /* Logo-Rot – nur Akzent */
  --red-deep:#c22f24;
  --line:rgba(42,36,31,.14);
  --shadow:0 18px 50px rgba(80,55,0,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Open Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.14;letter-spacing:-.005em;color:var(--ink)}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.5em}
h3{font-size:1.35rem;font-weight:600;margin-bottom:.4em}
p{color:var(--ink-soft)}
a{color:var(--gold-deep);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}
section{padding:54px 0}
.eyebrow{
  font-family:'Open Sans',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold)}
.lede{font-size:1.18rem;color:var(--ink-soft);max-width:640px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--gold);color:#fff;font-weight:700;font-size:1rem;
  padding:16px 30px;border-radius:100px;border:1.5px solid var(--gold);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:0 10px 26px rgba(189,128,0,.24);
}
.btn:hover{transform:translateY(-2px);background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:0 16px 34px rgba(189,128,0,.32)}
.btn-red{background:var(--red);border-color:var(--red);box-shadow:0 10px 26px rgba(226,59,46,.22);color:#fff}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;color:var(--ink);font-weight:600;font-size:1rem;
  padding:15px 28px;border-radius:100px;border:1.5px solid rgba(42,36,31,.28);transition:.2s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep);background:rgba(224,153,0,.06)}
/* Buttons auf dem Gold-Hero */
.btn-light{background:#fff;color:var(--red);border-color:#fff;font-weight:700;box-shadow:0 12px 30px rgba(120,80,0,.22)}
.btn-light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-arrow{transition:transform .2s}
.btn:hover .btn-arrow,.btn-light:hover .btn-arrow{transform:translateX(3px)}

/* ---------- Nav ---------- */
nav{
  position:sticky;top:0;z-index:50;background:rgba(250,245,236,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1140px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:padding .25s ease}
.brand{font-family:'Playfair Display',serif;font-weight:700;font-size:1.3rem;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:2px}
.brand img{height:40px;width:auto;display:block;transition:height .25s ease}
nav.scrolled .nav-inner{padding-top:8px;padding-bottom:8px}
nav.scrolled .brand img{height:27px}
.brand .b-red{color:var(--red)}
.brand .heart{color:var(--red);font-size:1rem;margin:0 1px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:var(--ink-soft);font-size:.94rem;font-weight:600;font-family:'Open Sans',sans-serif}
.nav-links a:hover{color:var(--gold-deep)}
.nav-cta{background:var(--red);color:#fff !important;padding:10px 20px;border-radius:100px;font-size:.9rem;font-weight:700}
.nav-cta:hover{background:var(--red-deep)}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- Hero (Gold-Band wie Bestandsseite) ---------- */
.hero{
  position:relative;padding:120px 0 168px;overflow:hidden;color:#fff;
  background:var(--gold-deep);
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(230,163,13,.85) 0%,rgba(224,153,0,.88) 45%,rgba(189,128,0,.92) 100%)}
.hero-content{position:relative;z-index:3}
.hero::after{ /* diagonaler Übergang nach Creme */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:2;
  background:var(--paper);clip-path:polygon(0 100%,100% 0,100% 100%);
}
.hero-scroll{
  position:absolute;left:50%;bottom:82px;transform:translateX(-50%);z-index:4;
  width:52px;height:52px;border:2px solid rgba(255,255,255,.75);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.7rem;line-height:1;
  text-decoration:none;background:rgba(255,255,255,.08);animation:bob 1.9s ease-in-out infinite;
}
.hero-scroll span{margin-top:-6px}
.hero-scroll:hover{border-color:#fff;background:rgba(255,255,255,.18)}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
.was-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.was-photo img{width:100%;border-radius:20px;box-shadow:var(--shadow)}
@media(max-width:820px){.was-grid{grid-template-columns:1fr;gap:32px}.hero-scroll{display:none}}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:rgba(255,255,255,.7)}
.hero h1{
  font-size:clamp(2.6rem,6vw,4.5rem);font-weight:700;color:#fff;
  max-width:16ch;margin-bottom:24px;line-height:1.08;
}
.hero h1 em{font-style:italic;font-weight:500}
.hero .lede{font-size:1.28rem;max-width:600px;margin-bottom:38px;color:rgba(255,255,255,.94)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-trust{margin-top:38px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;color:rgba(255,255,255,.9);font-size:.9rem}
.hero-trust .stars{color:#fff;letter-spacing:2px}
.hero-trust b{color:#fff;font-weight:700}

/* ---------- Two paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
.path-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 36px;
  box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;
}
.path-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(80,55,0,.16)}
.path-tag{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.path-card h3{font-size:1.6rem}
.path-card p{margin-bottom:22px}
.path-list{list-style:none;margin-bottom:26px}
.path-list li{position:relative;padding-left:28px;margin-bottom:11px;color:var(--ink-soft)}
.path-list li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
@media(max-width:820px){.paths{grid-template-columns:1fr}}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.step-num{font-family:'Playfair Display',serif;font-size:2.6rem;color:var(--gold-soft);line-height:1;margin-bottom:10px}
.step h3{color:#fff}
/* Vier Schritte in einer Zeile (Glueckskanne) */
.steps.steps-4{grid-template-columns:repeat(4,1fr);gap:22px}
.steps.steps-4 .step h3{font-size:1.12rem}
.steps.steps-4 .step-num{font-size:2.1rem}
@media(max-width:1000px){.steps.steps-4{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:560px){.steps.steps-4{grid-template-columns:1fr;gap:28px}}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:34px}}

/* ---------- Dark section ---------- */
.section-dark{background:var(--dark);color:#e9e3d8}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:rgba(255,255,255,.78)}
.section-dark .eyebrow{color:var(--gold-soft)}
.section-dark .eyebrow::before{background:var(--gold-soft)}

/* ---------- Pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.price-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column}
.price-card.featured{border:2px solid var(--gold);box-shadow:var(--shadow);position:relative}
.price-badge{position:absolute;top:-13px;left:30px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:100px}
.price-card h3{margin-bottom:4px}
.price-amount{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--gold-deep);margin:8px 0 4px}
.price-amount small{font-size:.9rem;color:var(--ink-soft);font-weight:400;font-family:'Open Sans',sans-serif}
.price-desc{font-size:.92rem;color:var(--ink-soft);margin-bottom:20px}
.price-feats{list-style:none;margin-bottom:26px;flex:1}
.price-feats li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.94rem;color:var(--ink-soft)}
.price-feats li::before{content:"✓";position:absolute;left:0;color:var(--gold-deep);font-weight:700}
.price-note{text-align:center;margin-top:26px;font-size:.9rem;color:var(--ink-soft)}
@media(max-width:820px){.prices{grid-template-columns:1fr}}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-photo{background:linear-gradient(135deg,var(--gold-soft),#e7cf9a);border-radius:20px;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:#8a6d2a;font-size:.85rem;text-align:center;padding:20px}
.story-quote{font-family:'Playfair Display',serif;font-style:italic;font-size:1.45rem;color:var(--ink);line-height:1.4;border-left:4px solid var(--gold);padding-left:22px;margin:8px 0}
.story-quote cite{display:block;font-size:.9rem;font-style:normal;color:var(--ink-soft);margin-top:12px;font-family:'Open Sans',sans-serif}
@media(max-width:820px){.story{grid-template-columns:1fr;gap:32px}}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px}
.quote .mark{font-family:'Playfair Display',serif;color:var(--gold);font-size:2.4rem;line-height:.6;display:block;margin-bottom:8px}
.quote p{font-family:'Playfair Display',serif;font-style:italic;font-size:1.08rem;color:var(--ink);line-height:1.5;margin-bottom:18px}
.quote .who{font-size:.86rem;color:var(--ink-soft);font-weight:600}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:'Playfair Display',serif;font-size:1.18rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Open Sans',sans-serif;color:var(--gold-deep);font-size:1.5rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:14px}

/* ---------- Final CTA (Gold-Band, bookend zum Hero) ---------- */
.final{text-align:center;background:linear-gradient(160deg,#e6a30d,var(--gold-deep));color:#fff}
.final h2{color:#fff;max-width:16ch;margin:0 auto .5em}
.final p{color:rgba(255,255,255,.92);max-width:520px;margin:0 auto 34px}

/* ---------- Footer ---------- */
footer{background:#1c1814;color:rgba(255,255,255,.6);padding:56px 0 40px;font-size:.9rem}
footer a{color:rgba(255,255,255,.8)}
footer a:hover{color:#fff}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;margin-bottom:34px}
.foot-brand{font-family:'Playfair Display',serif;font-size:1.35rem;color:#fff;display:flex;align-items:center;gap:2px}
.foot-brand .b-red{color:var(--red)}
.foot-brand .heart{color:var(--red);margin:0 2px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:.82rem;color:rgba(255,255,255,.45)}
.charta-strip{background:var(--paper-2);border-top:1px solid var(--line);padding:36px 0}
.charta-inner{display:flex;align-items:center;justify-content:center;gap:20px;max-width:640px;margin:0 auto}
.charta-inner img{width:62px;height:62px;border-radius:12px;flex-shrink:0;transition:opacity .2s}
.charta-inner:hover img{opacity:.85}
.charta-inner span{font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.charta-inner strong{color:var(--ink);font-weight:600}
@media(max-width:560px){.charta-inner{flex-direction:column;text-align:center;gap:14px}}

/* ---------- Video ---------- */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame .yt-lite{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.video-frame .yt-lite img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .4s ease}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:var(--gold);box-shadow:0 8px 26px rgba(0,0,0,.35);display:grid;place-items:center;transition:transform .3s ease,background .3s ease}
.yt-play::after{content:"";width:0;height:0;margin-left:7px;border-left:22px solid var(--ink);border-top:14px solid transparent;border-bottom:14px solid transparent}
.video-frame .yt-lite:hover img,.video-frame .yt-lite:focus-visible img{transform:scale(1.04);filter:brightness(.88)}
.video-frame .yt-lite:hover .yt-play,.video-frame .yt-lite:focus-visible .yt-play{transform:translate(-50%,-50%) scale(1.08);background:var(--gold-deep)}
.video-frame .yt-lite:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.video-note{margin:12px auto 0;max-width:640px;text-align:center;font-size:.78rem;line-height:1.5;color:var(--ink-soft);opacity:.72}
.video-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.video-note a:hover{color:var(--gold-deep)}
@media(max-width:600px){.yt-play{width:60px;height:60px}.yt-play::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:940px;margin:0 auto}
.video-cap{margin-top:14px;font-family:'Playfair Display',serif;font-size:1.12rem;color:var(--ink);text-align:center}
@media(max-width:820px){.video-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* ---------- Footer-Logo-Chip ---------- */
.foot-logo-pill{display:inline-block;background:var(--paper);padding:10px 16px;border-radius:12px}
.foot-logo-pill img{height:30px;width:auto;display:block}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Handy-Feinschliff ---------- */
@media(max-width:600px){
  section{padding:30px 0}
  .container,.narrow{padding:0 20px}
  .nav-inner{padding:12px 18px}
  .brand img{height:24px}
  nav.scrolled .brand img{height:21px}
  .nav-cta{padding:9px 14px;font-size:.8rem;white-space:nowrap}
  /* Handy: Video aus, Standbild (Omas Lachen) als Header-Hintergrund */
  .hero-video{display:none}
  .hero{padding:78px 0 104px;background-image:url('/assets/hero-mobile.jpg');background-size:cover;background-position:44% 24%}
  .hero-overlay{background:linear-gradient(165deg,rgba(224,153,0,.68) 0%,rgba(214,145,0,.74) 44%,rgba(189,128,0,.9) 100%)}
  .hero h1{font-size:2.15rem;line-height:1.14;margin-bottom:18px}
  .hero .lede{font-size:1.06rem;margin-bottom:26px}
  .hero-trust{gap:10px 14px;margin-top:26px;font-size:.82rem}
  .hero-scroll{display:none}
  .lede{font-size:1.06rem}
  h2{font-size:1.72rem}
  h3{font-size:1.22rem}
  .eyebrow{font-size:.72rem;letter-spacing:.14em;margin-bottom:14px}
  /* CTAs im Hero volle Breite = leicht tippbar */
  .hero-cta{gap:10px}
  .hero-cta .btn,.hero-cta .btn-outline-light{width:100%;justify-content:center}
  .btn,.btn-ghost,.btn-light,.btn-red{padding:15px 22px;font-size:.95rem}
  .path-card{padding:30px 24px}
  .path-card h3{font-size:1.4rem}
  .price-card{padding:28px 24px}
  .story{gap:26px}
  .story-quote{font-size:1.25rem;padding-left:18px}
  .video-grid{gap:20px}
  .quote p{font-size:1rem}
  .faq summary{font-size:1.06rem}
  .step-num{font-size:2.2rem}
  .charta-inner{gap:14px}
}

/* Am Handy den Trennpunkt im Vertrauensstreifen weglassen */
@media(max-width:600px){.hero-trust>span:nth-child(2){display:none}}