/* =========================================================================
   VitalPraxis Kerstin Hiemer · Layout „Zwei Wege"
   Klar, freundlich, kartenbasiert. Koralle führt, Türkis & Gold sind Gäste.
   Schriften lokal eingebunden (keine Fremdserver, DSGVO-konform).
   ========================================================================= */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dancing Script';
  src: url('../fonts/dancing-script-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Farbwelt & Design-Tokens ------------------------------------------- */
:root{
  --koralle:   #e36254;   /* Hauptfarbe, dominant */
  --koralle-d: #c74b3e;   /* dunkler für Hover/Kontrast */
  --koralle-soft: #fbeae6;/* zarte Koralle-Fläche (abgeleitet) */
  --gold:      #f6a61e;   /* Akzent Gold – Weg „Herzensbusiness" */
  --gold-d:    #cf8410;   /* dunkler Gold für Text/Hover */
  --gold-soft: #fdf1d8;   /* zarte Gold-Fläche */
  --gold-ink:  #6b4708;   /* dunkle Schrift auf Gold (Kontrast) */
  --tuerkis:   #8cbeb3;   /* Akzent Türkis – Weg „Zurück zu dir" */
  --tuerkis-d: #5c9082;   /* dunkler Türkis für Text/Hover */
  --tuerkis-soft: #e6f1ee;/* zarte Türkis-Fläche */
  --tuerkis-ink: #2f4f48; /* dunkle Schrift auf Türkis (Kontrast) */
  --creme:     #f2ebbf;   /* warmer Hintergrund */
  --creme-2:   #f7f2d9;   /* hellere Creme */
  --creme-3:   #faf6e8;   /* noch heller, sanfte Sektion */
  --text:      #505654;   /* Fließtext */
  --text-2:    #6b716e;   /* gedimmt – NUR Farbe, nie Größe */
  --weiss:     #ffffff;
  --braun:     #7a5c46;   /* Logo-Braun, dezente Deko */

  /* Formen & Schatten – weich und warm */
  --r:      20px;         /* Standard-Kartenradius */
  --r-lg:   28px;         /* große Karten */
  --r-pill: 999px;
  --shadow-soft: 0 14px 34px -18px rgba(227,98,84,.30), 0 6px 16px -10px rgba(80,86,84,.12);
  --shadow-lift: 0 26px 50px -22px rgba(227,98,84,.40), 0 10px 22px -12px rgba(80,86,84,.16);
  --shadow-card: 0 10px 28px -16px rgba(80,86,84,.20);
  --ring: 0 0 0 4px rgba(227,98,84,.28);

  --maxw: 1180px;
  --gap: clamp(1.25rem, 3.5vw, 2.5rem);
}

/* --- Reset & Basis ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.125rem;          /* 18px – harte Regel für 45+ */
  font-weight:400;
  line-height:1.7;
  color:var(--text);
  background:var(--weiss);
  overflow-x:hidden;           /* kein horizontales Scrollen */
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-weight:700; line-height:1.18; color:#3f4543; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

/* Fokus für Tastatur-Navigation – gut sichtbar */
:focus-visible{ outline:3px solid var(--koralle); outline-offset:3px; border-radius:6px; }

/* --- Bausteine ---------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); }
.section{ padding-block:clamp(3.5rem,8vw,6rem); position:relative; }
.section--creme{ background:var(--creme-3); }
.section--creme-2{ background:var(--creme-2); }

/* Dancing-Script-Akzent – nur einzelne Wörter, warm & handschriftlich */
.hand{ font-family:'Dancing Script',cursive; font-weight:700; line-height:1; }

/* Eyebrow / Kicker über Überschriften */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:1.0625rem;         /* 17px – Marker-Label, uppercase */
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--koralle); margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; border-radius:2px; }
.eyebrow.is-tuerkis{ color:var(--tuerkis-d); }
.eyebrow.is-gold{ color:var(--gold-d); }

.section-head{ max-width:44rem; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.section-head.left{ margin-inline:0; text-align:left; }
.section-title{ font-size:clamp(1.9rem,4.4vw,2.9rem); margin-bottom:.35em; }
.section-title .mark{ color:var(--koralle); }
.section-sub{ font-size:1.1875rem; color:var(--text-2); margin:0; }  /* Erklärzeile: Farbe gedimmt, NICHT verkleinert */

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-size:1.1875rem;         /* 19px, 700 => zählt als „large text" (Kontrast ok) */
  font-weight:700; line-height:1;
  min-height:60px; padding:1rem 1.9rem;
  border:2px solid transparent; border-radius:var(--r-pill);
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  will-change:transform;
}
.btn .icon{ width:22px; height:22px; flex:0 0 auto; }
.btn--coral{ background:var(--koralle); color:#fff; box-shadow:var(--shadow-soft); }
.btn--coral:hover{ background:var(--koralle-d); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.btn--ghost{ background:#fff; color:var(--koralle-d); border-color:var(--koralle); }
.btn--ghost:hover{ background:var(--koralle); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.btn--tuerkis{ background:var(--tuerkis); color:var(--tuerkis-ink); box-shadow:0 14px 30px -18px rgba(92,144,130,.6); }
.btn--tuerkis:hover{ background:var(--tuerkis-d); color:#fff; transform:translateY(-3px); box-shadow:0 22px 40px -20px rgba(92,144,130,.7); }
.btn--gold{ background:var(--gold); color:var(--gold-ink); box-shadow:0 14px 30px -18px rgba(207,132,16,.55); }
.btn--gold:hover{ background:var(--gold-d); color:#fff; transform:translateY(-3px); box-shadow:0 22px 40px -20px rgba(207,132,16,.65); }
.btn--light{ background:#fff; color:var(--koralle-d); box-shadow:var(--shadow-soft); }
.btn--light:hover{ background:var(--creme-2); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn--outline-light:hover{ background:#fff; color:var(--koralle-d); transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.btn--block{ width:100%; }

/* Text-Link mit Pfeil (dezente CTAs) */
.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; color:var(--koralle-d);
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:gap .25s ease, border-color .25s ease, color .25s ease;
}
.textlink .icon{ width:20px; height:20px; transition:transform .25s ease; }
.textlink:hover{ border-color:var(--koralle); gap:.8em; }
.textlink:hover .icon{ transform:translateX(3px); }

/* --- Icons -------------------------------------------------------------- */
.icon{ width:24px; height:24px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Icon in weichem Kreis (Karten / Säulen) */
.icon-badge{
  display:inline-grid; place-items:center;
  width:70px; height:70px; border-radius:20px;
  background:var(--koralle-soft); color:var(--koralle-d);
  transition:transform .3s ease, background-color .3s ease, color .3s ease;
}
.icon-badge .icon{ width:34px; height:34px; stroke-width:1.5; }
.icon-badge.is-tuerkis{ background:var(--tuerkis-soft); color:var(--tuerkis-d); }
.icon-badge.is-gold{ background:var(--gold-soft); color:var(--gold-d); }

/* ======================================================================
   HINWEIS-BANNER – zeitlich begrenzt, ueber data-start/data-end gesteuert
   ====================================================================== */
.banner-hinweis{ background:var(--gold); }
.banner-hinweis__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.5rem 1.2rem; padding:.7rem 1.2rem; text-align:center;
}
.banner-hinweis p{ margin:0; font-weight:700; font-size:.95rem; color:var(--gold-ink); }
.banner-hinweis__link{
  font-weight:700; font-size:.9rem; color:var(--gold-ink); text-decoration:underline;
  text-underline-offset:.2em; white-space:nowrap;
}
.banner-hinweis__close{
  background:none; border:none; cursor:pointer; color:var(--gold-ink); padding:.3rem;
  display:inline-flex; border-radius:50%; flex:0 0 auto;
}
.banner-hinweis__close:hover{ background:rgba(107,71,8,.12); }
.banner-hinweis__close .icon{ width:18px; height:18px; }
.banner-hinweis.is-hidden{ display:none; }

/* ======================================================================
   COOKIE-BANNER – Einwilligung fuer Google Analytics (Consent Mode v2)
   Zustimmen/Ablehnen bewusst gleich gross und gleich sichtbar, siehe
   CLAUDE.md. Deckt nie die ganze Seite ab, Fusszeile bleibt erreichbar.
   ====================================================================== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:#fff; border-top:1px solid rgba(80,86,84,.16);
  box-shadow:0 -12px 30px -18px rgba(80,86,84,.3);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.4rem; padding:1.1rem clamp(1rem,4vw,2rem); max-width:var(--maxw); margin:0 auto;
}
.cookie-banner__text{ flex:1 1 26rem; }
.cookie-banner__text p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--text); }
.cookie-banner__text a{ color:var(--koralle-d); font-weight:600; }
.cookie-banner__actions{ display:flex; gap:.8rem; flex:0 0 auto; flex-wrap:wrap; }
.cookie-banner__actions .btn{ padding:.75rem 1.5rem; font-size:.95rem; min-width:9rem; }
@media (max-width:600px){
  .cookie-banner__actions{ width:100%; }
  .cookie-banner__actions .btn{ flex:1 1 0; min-width:0; }
}

/* ======================================================================
   NAVIGATION – sticky, Koralle als verbindende Marke
   ====================================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(227,98,84,.14);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px; }
.nav__menu{ display:flex; align-items:center; gap:.6rem; }   /* Desktop: Links + CTA in einer Reihe */
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:42px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:.05rem; }
.nav__link{
  font-size:.875rem; font-weight:500; color:var(--text);
  padding:.5rem .6rem; border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color .2s ease, background-color .2s ease;
}
.nav__link:hover,.nav__link.is-active{ color:var(--koralle-d); background:var(--koralle-soft); }
.nav__cta{ margin-left:.3rem; }
.nav__cta .btn{ min-height:46px; padding:.6rem 1.05rem; font-size:.9375rem; white-space:nowrap; }

/* Hamburger */
.nav__toggle{
  display:none; width:52px; height:52px; border:none; border-radius:14px;
  background:var(--koralle-soft); color:var(--koralle-d); place-items:center;
}
.nav__toggle .icon{ width:28px; height:28px; }
.nav__toggle .icon-close{ display:none; }
.nav.is-open .nav__toggle .icon-open{ display:none; }
.nav.is-open .nav__toggle .icon-close{ display:block; }

@media (max-width:1080px){
  .nav__toggle{ display:grid; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%;
    background:var(--creme-3); border-bottom:1px solid rgba(227,98,84,.14);
    box-shadow:var(--shadow-card);
    display:grid; gap:.25rem;
    padding:1rem clamp(1.25rem,5vw,2.5rem) 1.5rem;
    /* eingeklappt */
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .35s ease, opacity .3s ease, visibility .3s;
  }
  .nav.is-open .nav__menu{ max-height:80vh; opacity:1; visibility:visible; }
  .nav__links{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav__link{ padding:.85rem 1rem; font-size:1.1875rem; }
  .nav__cta{ margin:.6rem 0 0; }
  .nav__cta .btn{ width:100%; min-height:58px; font-size:1.1875rem; }
}

/* ======================================================================
   HERO
   ====================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 0%, var(--creme-2) 0%, transparent 55%),
    linear-gradient(180deg, var(--creme-3) 0%, #fff 100%);
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem);
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__eyebrow{ font-size:1.125rem; letter-spacing:.16em; }
.hero__title{
  font-size:clamp(2.5rem,6.2vw,4.1rem); line-height:1.08; margin:.2em 0 .45em;
}
.hero__title .hand{ color:var(--koralle); font-size:1.18em; display:inline-block; transform:translateY(.06em); }
.hero__text{ font-size:1.25rem; color:var(--text); max-width:34rem; margin-bottom:1.9rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
/* Weg-Zuordnung schon im Hero angedeutet: Balance = Türkis-Hauch, Business = Gold-Hauch */
.hero__actions .btn--coral{ position:relative; }
.hero__way-hint{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.6rem; }
.hero__way{ display:flex; align-items:center; gap:.6rem; font-size:1.0625rem; font-weight:600; color:var(--text-2); }
.hero__dot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
.hero__dot.is-tuerkis{ background:var(--tuerkis); }
.hero__dot.is-gold{ background:var(--gold); }

/* Hero-Bild mit weicher Karte + Bögen-Deko (Logo-Motiv) */
.hero__media{ position:relative; }
.hero__portrait{
  position:relative; z-index:2;
  border-radius:32px; overflow:hidden;
  box-shadow:var(--shadow-lift);
  border:6px solid #fff;
  aspect-ratio:4/5;
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.hero__arcs{ position:absolute; z-index:1; inset:auto -6% -8% auto; width:62%; opacity:.9; pointer-events:none; }
.hero__arcs.top{ inset:-9% -4% auto auto; width:46%; }
.hero__badge{
  position:absolute; z-index:3; left:-6%; bottom:9%;
  background:#fff; border-radius:18px; padding:.85rem 1.15rem;
  box-shadow:var(--shadow-card); display:flex; align-items:center; gap:.7rem;
  max-width:16rem;
}
.hero__badge .icon-badge{ width:48px; height:48px; border-radius:14px; }
.hero__badge .icon-badge .icon{ width:26px; height:26px; }
.hero__badge span{ font-size:1.0625rem; font-weight:600; line-height:1.35; color:var(--text); }

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:26rem; margin-inline:auto; }
  .hero__text{ max-width:none; }
  .hero__badge{ left:0; }
}

/* Wellen-Trenner (Logo-Schwünge aufgegriffen) */
.wave{ display:block; width:100%; height:auto; }
.wave-wrap{ line-height:0; }

/* ======================================================================
   WEGWEISER – das Herzstück: zwei gleichwertige Wege
   ====================================================================== */
.ways{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2rem); align-items:stretch; position:relative; }
.way{
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(80,86,84,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.way:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
.way__top{ height:6px; }
.way--tuerkis .way__top{ background:linear-gradient(90deg,var(--tuerkis),#a9d1c8); }
.way--gold .way__top{ background:linear-gradient(90deg,var(--gold),#ffc75c); }
.way__media{ aspect-ratio:16/10; overflow:hidden; }
.way__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.way:hover .way__media img{ transform:scale(1.05); }
.way__body{ padding:clamp(1.5rem,3vw,2.2rem); display:flex; flex-direction:column; gap:.9rem; flex:1; }
.way__head{ display:flex; align-items:center; gap:1rem; }
.way__title{ font-size:clamp(1.5rem,3vw,1.9rem); margin:0; }
.way--tuerkis .way__title{ color:var(--tuerkis-d); }
.way--gold .way__title{ color:var(--gold-d); }
.way__text{ font-size:1.1875rem; color:var(--text); margin:0; flex:1; }
.way__foot{ margin-top:.4rem; }
/* Way-Karte ohne Foto, stattdessen grosses Icon (z. B. Download-Angebote wie der Balance-Kompass) */
.way__media--icon{ display:flex; align-items:center; justify-content:center; background:var(--creme-3); }
.way__media--icon .icon-badge{ width:96px; height:96px; border-radius:26px; }
.way__media--icon .icon-badge .icon{ width:46px; height:46px; }

/* „oder"-Knoten zwischen den Wegen */
.ways__or{
  position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:var(--koralle); color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:1.0625rem;
  box-shadow:0 10px 24px -8px rgba(227,98,84,.6), 0 0 0 8px #fff;
}
@media (max-width:820px){
  .ways{ grid-template-columns:1fr; gap:2.4rem; }
  .ways__or{ position:static; transform:none; margin:0 auto; }
}

/* ======================================================================
   ÜBER MICH – Kurzteaser mit Zahlen
   ====================================================================== */
.about__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__media{ position:relative; }
.about__media img{ border-radius:var(--r-lg); box-shadow:var(--shadow-lift); border:6px solid #fff; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; }
.about__arcs{ position:absolute; inset:-8% auto auto -8%; width:44%; z-index:-1; opacity:.85; }
.about__text{ font-size:1.25rem; color:var(--text); }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.5rem; margin:1.4rem 0 0; list-style:none; padding:0; }
.facts__item{ font-size:1.0625rem; color:var(--text-2); }
.facts__label{ color:var(--koralle-d); font-weight:700; }
@media (max-width:480px){ .facts{ grid-template-columns:1fr; } }
.stats{ display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 2.2rem; }
.stat{
  flex:1 1 8rem; background:var(--creme-3); border-radius:var(--r);
  padding:1.3rem 1.1rem; text-align:center; border:1px solid rgba(227,98,84,.12);
}
.stat__num{
  font-size:clamp(2.6rem,6vw,3.4rem); font-weight:700; line-height:1;
  color:var(--koralle); letter-spacing:-.02em; display:block;
}
.stat__label{ font-size:1.0625rem; font-weight:500; color:var(--text-2); margin-top:.35rem; }
@media (max-width:820px){
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:24rem; }
}

/* ======================================================================
   5-SÄULEN – freundliche Icon-Karten
   ====================================================================== */
.pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; }
.pillar{
  background:#fff; border-radius:var(--r); padding:1.7rem 1.2rem;
  text-align:center; box-shadow:var(--shadow-card);
  border:1px solid rgba(80,86,84,.07);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pillar:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); border-color:rgba(227,98,84,.25); }
.pillar:hover .icon-badge{ transform:scale(1.08) rotate(-3deg); background:var(--koralle); color:#fff; }
.pillar .icon-badge{ margin:0 auto 1rem; }
.pillar__title{ font-size:1.3125rem; margin:0 0 .3em; }
.pillar__text{ font-size:1.0625rem; color:var(--text-2); margin:0; line-height:1.55; }
.pillars-cta{ text-align:center; margin-top:clamp(2rem,4vw,2.8rem); }

@media (max-width:1000px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .pillars{ grid-template-columns:1fr 1fr; gap:.9rem; } }
@media (max-width:400px){ .pillars{ grid-template-columns:1fr; } }

/* --- Vertiefungs-Karten (Säule im Detail: für Alltag / für Herzensbusiness) --- */
.pillar-detail{
  background:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pillar-detail:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.pillar-detail__head{ display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; }
.pillar-detail__title{ font-size:1.4375rem; margin:0; color:var(--koralle-d); }
.pillar-detail__way{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--creme-3); border-radius:var(--r); padding:1rem 1.1rem; margin-top:.8rem;
}
.pillar-detail__way.is-gold{ background:var(--gold-soft); }
.pillar-detail__way strong{ color:var(--koralle-d); flex:0 0 auto; }
.pillar-detail__way.is-gold strong{ color:var(--gold-d); }
.pillar-detail__way p{ margin:0; font-size:1.0625rem; }

/* ======================================================================
   ANGEBOTE – drei aufsteigende Stufen
   ====================================================================== */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.6rem); align-items:stretch; }
.tier{
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.tier:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
/* dezent wachsende Betonung: Stufe 3 bekommt einen Koralle-Rahmen */
.tier--3{ border:2px solid var(--koralle); }
.tier__media{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.tier__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tier:hover .tier__media img{ transform:scale(1.05); }
.tier__badge{
  position:absolute; left:1rem; top:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  background:rgba(255,255,255,.94); color:var(--koralle-d);
  font-size:.95rem; font-weight:700; letter-spacing:.03em;
  padding:.4rem .85rem; border-radius:var(--r-pill);
  box-shadow:var(--shadow-card);
}
.tier__step{
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--koralle); color:#fff; font-size:.9rem; font-weight:700;
}
.tier__body{ padding:clamp(1.4rem,3vw,1.9rem); display:flex; flex-direction:column; gap:.8rem; flex:1; }
.tier__title{ font-size:1.4375rem; margin:0; color:#3f4543; }
.tier__title .lead-word{ display:block; font-size:1.0625rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--koralle); margin-bottom:.2rem; }
.tier__text{ font-size:1.125rem; color:var(--text); margin:0; flex:1; }
.tier__foot{ margin-top:.5rem; }

@media (max-width:900px){ .tiers{ grid-template-columns:1fr; max-width:32rem; margin-inline:auto; } .tier--3{ order:0; } }

/* ======================================================================
   TESTIMONIALS
   ====================================================================== */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.6rem); }
.quote{
  background:#fff; border-radius:var(--r-lg); padding:2rem 1.7rem 1.8rem;
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
  position:relative; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.quote:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.quote__mark{ font-family:'Dancing Script',cursive; font-size:4.5rem; line-height:.6; color:var(--koralle); opacity:.4; height:2.2rem; }
.quote__stars{ display:flex; gap:.2rem; color:var(--gold); margin-bottom:.7rem; }
.quote__stars .icon{ width:22px; height:22px; fill:var(--gold); stroke:var(--gold); stroke-width:1; }
.quote__text{ font-size:1.1875rem; color:var(--text); font-style:normal; margin:0 0 1.2rem; flex:1; }
.quote__who{ font-size:1.0625rem; font-weight:600; color:var(--tuerkis-d); display:flex; align-items:center; gap:.5rem; }
.quote__who::before{ content:""; width:22px; height:2px; background:var(--tuerkis); border-radius:2px; }

@media (max-width:900px){ .quotes{ grid-template-columns:1fr; max-width:34rem; margin-inline:auto; } }

/* ======================================================================
   PODCAST & BLOG
   ====================================================================== */
.media-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.1rem,2.5vw,1.6rem); }
.mediacard{
  display:flex; gap:1.3rem; align-items:flex-start;
  background:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
  transition:transform .3s ease, box-shadow .3s ease;
}
.mediacard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.mediacard picture{ flex:0 0 auto; display:block; }
.mediacard__title{ font-size:1.4375rem; margin:0 0 .25em; }
.mediacard__title small{ display:block; font-size:1.0625rem; font-weight:600; color:var(--text-2); letter-spacing:.02em; }
.mediacard__text{ font-size:1.125rem; color:var(--text); margin:0 0 1rem; }
.mediacard .icon-badge{ flex:0 0 auto; }

@media (max-width:760px){ .media-cards{ grid-template-columns:1fr; } }

/* ======================================================================
   NEWSLETTER
   ====================================================================== */
.news{
  background:linear-gradient(135deg,var(--koralle-soft) 0%, var(--creme-2) 100%);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(227,98,84,.16);
}
.news__grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding:clamp(1.8rem,4vw,3rem); }
.news__photo{ width:150px; height:150px; border-radius:50%; overflow:hidden; border:5px solid #fff; box-shadow:var(--shadow-card); flex:0 0 auto; }
.news__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.news__title{ font-size:clamp(1.6rem,3.5vw,2.3rem); margin:0 0 .3em; }
.news__text{ font-size:1.1875rem; color:var(--text); margin:0 0 1.3rem; max-width:32rem; }
.news__form{ display:flex; flex-wrap:wrap; gap:.8rem; }
.news__form input[type=email]{
  flex:1 1 16rem; min-height:60px; padding:.9rem 1.3rem;
  font-size:1.1875rem; font-family:inherit; color:var(--text);
  background:#fff; border:2px solid rgba(227,98,84,.25); border-radius:var(--r-pill);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.news__form input[type=email]::placeholder{ color:#9aa09d; }
.news__form input[type=email]:focus{ outline:none; border-color:var(--koralle); box-shadow:var(--ring); }
.news__note{ font-size:1rem; color:var(--text-2); margin:.9rem 0 0; }
.news__success{
  display:none; align-items:center; gap:.9rem;
  background:#fff; border-radius:var(--r); padding:1.1rem 1.3rem;
  font-size:1.1875rem; font-weight:600; color:var(--tuerkis-d);
  box-shadow:var(--shadow-card);
}
.news__success .icon-badge{ width:48px; height:48px; border-radius:14px; }
.news.is-done .news__form{ display:none; }
.news.is-done .news__note{ display:none; }
.news.is-done .news__success{ display:flex; }

@media (max-width:680px){ .news__grid{ grid-template-columns:1fr; text-align:center; justify-items:center; } .news__text{ margin-inline:auto; } .news__form{ justify-content:center; } }

/* ======================================================================
   ABSCHLUSS-CTA – warmes Koralle-Band (Akzentband, keine Vollfläche)
   ====================================================================== */
.finalcta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--koralle) 0%, var(--koralle-d) 100%);
  border-radius:var(--r-lg); padding:clamp(2.5rem,6vw,4rem);
  text-align:center; color:#fff;
  box-shadow:var(--shadow-lift);
}
.finalcta__arcs{ position:absolute; inset:auto -4% -30% -4%; width:108%; opacity:.16; pointer-events:none; }
.finalcta__title{ color:#fff; font-size:clamp(1.9rem,4.5vw,3rem); margin:0 0 .35em; position:relative; }
.finalcta__title .hand{ color:#fff; }
.finalcta__text{ font-size:1.25rem; color:rgba(255,255,255,.94); max-width:34rem; margin:0 auto 2rem; position:relative; }
.finalcta .btn{ position:relative; }

/* ======================================================================
   YOUTUBE-EINBETTUNG · Klick-zum-Laden (2-Klick-Loesung)
   Vor dem Klick nur lokale CSS-Vorschau, kein Bild/Skript von Google.
   ====================================================================== */
.yt-embed{
  position:relative; aspect-ratio:16/9; max-width:48rem; margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card);
  background:linear-gradient(135deg,var(--koralle-soft) 0%, var(--tuerkis-soft) 100%);
}
.yt-embed__play{
  position:absolute; inset:0; width:100%; height:100%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:none; padding:0;
}
.yt-embed__icon-wrap{
  width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lift);
  transition:transform .25s ease, background-color .25s ease;
}
.yt-embed__play:hover .yt-embed__icon-wrap,
.yt-embed__play:focus-visible .yt-embed__icon-wrap{ transform:scale(1.08); background:#fff; }
.yt-embed__play:focus-visible{ outline:3px solid var(--koralle); outline-offset:3px; }
.yt-embed__icon-wrap .icon{ width:32px; height:32px; color:var(--koralle); margin-left:4px; }
.yt-embed__hint{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:.7rem 1.1rem;
  font-size:.85rem; line-height:1.4; color:#fff; background:rgba(63,69,67,.6); text-align:center;
}
.yt-embed__hint a{ color:#fff; text-decoration:underline; }
.yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }
.yt-embed.is-loaded .yt-embed__play,
.yt-embed.is-loaded .yt-embed__hint{ display:none; }

/* ======================================================================
   KONTAKT / TERMINBUCHUNG
   ====================================================================== */
.contact-box{
  background:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
}
.contact-box + .contact-box{ margin-top:1.5rem; }
.contact-box__row{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.contact-box__row:last-child{ margin-bottom:0; }
.contact-box__row .icon-badge{ width:52px; height:52px; border-radius:14px; flex:0 0 auto; }
.contact-box__row .icon-badge .icon{ width:26px; height:26px; }
.contact-box__row p{ margin:0; font-size:1.125rem; }
.contact-box__row a{ color:var(--koralle-d); font-weight:600; }
.whatsapp-box{
  max-width:36rem; margin:0 auto; text-align:center;
  background:#fff; border-radius:var(--r-lg); padding:clamp(2rem,4vw,3rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
}
.whatsapp-box__icon{ width:64px; height:64px; border-radius:18px; margin:0 auto 1.25rem; }
.whatsapp-box__icon .icon{ width:32px; height:32px; }
.whatsapp-box .section-title{ margin-bottom:.75rem; }
.whatsapp-box p{ margin:0 auto 1.75rem; max-width:30rem; }
.booking-embed{
  background:#fff; border-radius:var(--r-lg); padding:clamp(1rem,3vw,1.5rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07); min-height:420px;
}
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:2rem 0; }
.step{ background:#fff; border-radius:var(--r); padding:1.3rem; box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07); }
.step__num{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--koralle-soft); color:var(--koralle-d); font-weight:700; margin-bottom:.7rem; }
.step p{ margin:0; font-size:1.0625rem; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
.step__title{ margin:0 0 .3rem; font-size:1.125rem; }

/* Zweispaltige Haken-Checkliste (z. B. "Fuer wen ist das geeignet?") */
.check-list{
  list-style:none; padding:0; margin:0 auto; max-width:44rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.6rem;
}
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1.125rem; color:var(--text); }
.check-list .icon{ width:22px; height:22px; color:var(--tuerkis-d); flex:0 0 auto; margin-top:.15rem; }
@media (max-width:640px){ .check-list{ grid-template-columns:1fr; } }

/* ======================================================================
   KONTAKTFORMULAR
   ====================================================================== */
.contact-form{
  background:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
  max-width:38rem; margin:0 auto;
}
.contact-form__row{ margin-bottom:1.2rem; }
.contact-form__row label{ display:block; font-weight:600; margin-bottom:.4rem; color:var(--text); }
.contact-form__row input[type=text],
.contact-form__row input[type=email],
.contact-form__row textarea{
  width:100%; padding:.85rem 1.1rem; font-size:1.0625rem; font-family:inherit; color:var(--text);
  background:#fff; border:2px solid rgba(80,86,84,.18); border-radius:var(--r);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form__row textarea{ resize:vertical; min-height:9rem; }
.contact-form__row input:focus,
.contact-form__row textarea:focus{ outline:none; border-color:var(--koralle); box-shadow:var(--ring); }
.contact-form__row--check{ display:flex; align-items:flex-start; gap:.7rem; }
.contact-form__row--check input[type=checkbox]{ margin-top:.3rem; width:1.2rem; height:1.2rem; flex:0 0 auto; accent-color:var(--koralle); }
.contact-form__row--check label{ font-weight:400; font-size:.95rem; color:var(--text-2); margin:0; }
.contact-form__row--check a{ color:var(--koralle-d); font-weight:600; }
/* Spam-Falle: fuer Menschen unsichtbar (nicht nur display:none, das erkennen Bots), fuer Screenreader ausgeblendet */
.contact-form__hp{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.contact-form__success{
  display:none; align-items:center; gap:.9rem;
  background:var(--tuerkis-soft); border-radius:var(--r); padding:1.2rem 1.4rem;
  font-size:1.0625rem; font-weight:600; color:var(--tuerkis-ink);
}
.contact-form__success .icon-badge{ width:44px; height:44px; border-radius:14px; flex:0 0 auto; }
.contact-form.is-done .contact-form__form{ display:none; }
.contact-form.is-done .contact-form__success{ display:flex; }
.contact-form__note{ font-size:.9rem; color:var(--text-2); margin:1rem 0 0; }

/* ======================================================================
   FAQ-AKKORDEON
   ====================================================================== */
.faq{ max-width:44rem; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.faq__item{
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow-card);
  border:1px solid rgba(80,86,84,.07); overflow:hidden;
}
.faq__q{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.2rem 1.5rem; font-weight:700; font-size:1.125rem; color:#3f4543;
  -webkit-tap-highlight-color:transparent;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__q .icon-badge{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px; transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.faq__item[open] .faq__q .icon-badge{ background:var(--koralle); color:#fff; transform:rotate(45deg); }
.faq__a{ padding:0 1.5rem 1.4rem; font-size:1.0625rem; color:var(--text); }
.faq__a p{ margin:0; }
.faq__q:focus-visible{ outline:3px solid var(--koralle); outline-offset:-3px; }

/* ======================================================================
   COUNTDOWN
   ====================================================================== */
.countdown{
  background:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-card); border:1px solid rgba(80,86,84,.07);
  max-width:34rem; margin:0 auto 2.5rem; text-align:center;
}
.countdown__label{ margin:0 0 1rem; font-size:1.0625rem; font-weight:700; color:var(--tuerkis-d); }
.countdown__grid{ display:flex; justify-content:center; gap:clamp(.6rem,2.5vw,1.4rem); }
.countdown__unit{ display:flex; flex-direction:column; align-items:center; min-width:3.6rem; }
.countdown__num{
  font-size:clamp(1.8rem,5vw,2.6rem); font-weight:700; color:#3f4543; line-height:1;
  background:var(--tuerkis-soft); border-radius:var(--r); padding:.5rem .3rem; width:100%;
  font-variant-numeric:tabular-nums;
}
.countdown__word{ font-size:.85rem; color:var(--text-2); margin-top:.4rem; text-transform:uppercase; letter-spacing:.06em; }
.countdown__date{ margin:1.2rem 0 0; font-size:1rem; color:var(--text-2); }
.countdown.is-past .countdown__grid{ display:none; }

/* ======================================================================
   BILD-GALERIE + LIGHTBOX
   ====================================================================== */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,2vw,1.1rem); }
.gallery__item{
  position:relative; border:none; padding:0; cursor:zoom-in; border-radius:var(--r);
  overflow:hidden; aspect-ratio:1/1; background:var(--creme-2);
  box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease;
}
.gallery__item:hover, .gallery__item:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.gallery__item:focus-visible{ outline:3px solid var(--koralle); outline-offset:2px; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.gallery__item:hover img{ transform:scale(1.06); }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

.lightbox{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem); background:rgba(63,69,67,.88);
}
.lightbox.is-open{ display:flex; }
.lightbox__figure{ position:relative; max-width:min(90vw,900px); max-height:88vh; margin:0; }
.lightbox__figure img{ display:block; max-width:100%; max-height:78vh; border-radius:var(--r); box-shadow:var(--shadow-lift); }
.lightbox__figure figcaption{ color:#fff; text-align:center; margin-top:.8rem; font-size:1rem; }
.lightbox__close{
  position:absolute; top:-3rem; right:0; background:rgba(255,255,255,.14); border:none; border-radius:50%;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:#fff; transition:background-color .2s ease;
}
.lightbox__close:hover{ background:rgba(255,255,255,.28); }
.lightbox__close .icon{ width:22px; height:22px; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14); border:none;
  border-radius:50%; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff; transition:background-color .2s ease;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.28); }
.lightbox__nav.is-prev{ left:clamp(-3.5rem,-6vw,-1rem); }
.lightbox__nav.is-next{ right:clamp(-3.5rem,-6vw,-1rem); }
.lightbox__nav .icon{ width:24px; height:24px; }
@media (max-width:760px){ .lightbox__nav{ display:none; } }

.contact-form__error{
  display:none; align-items:center; gap:.9rem;
  background:var(--koralle-soft); border-radius:var(--r); padding:1.2rem 1.4rem;
  font-size:1.0625rem; font-weight:600; color:var(--koralle-d); margin-bottom:1.4rem;
}
.contact-form.is-error .contact-form__error{ display:flex; }

/* ======================================================================
   FOOTER
   ====================================================================== */
.footer{ background:var(--creme-2); padding-block:clamp(3rem,6vw,4.5rem) 2rem; margin-top:0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(1.5rem,4vw,3rem); }
.footer__brand img{ width:150px; margin-bottom:1rem; }
.footer__tag{ font-size:1.125rem; color:var(--text-2); max-width:22rem; }
.footer__tag .hand{ color:var(--koralle); font-size:1.3em; }
.footer h4{ font-size:1.1875rem; color:#3f4543; margin:0 0 1rem; }
.footer__list li{ margin-bottom:.6rem; }
.footer__list a{ font-size:1.0625rem; color:var(--text); transition:color .2s ease; display:inline-flex; align-items:center; gap:.55rem; }
.footer__list a:hover{ color:var(--koralle-d); }
.footer__list a .icon{ width:20px; height:20px; color:var(--koralle); flex:0 0 auto; }
.footer__social{ display:flex; gap:.6rem; margin-top:.4rem; }
.footer__social a{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:#fff; color:var(--koralle-d); box-shadow:var(--shadow-card);
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.footer__social a:hover{ transform:translateY(-3px); background:var(--koralle); color:#fff; }
.footer__social .icon{ width:24px; height:24px; }
.footer__bottom{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem;
  border-top:1px solid rgba(122,92,70,.18);
  display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer__legal a{ font-size:1.0625rem; color:var(--text-2); }
.footer__legal a:hover{ color:var(--koralle-d); }
.footer__copy{ font-size:.95rem; color:var(--text-2); }  /* Copyright darf feiner sein */

@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } .footer__bottom{ justify-content:flex-start; } }

/* ======================================================================
   Reveal-Animationen (sanft, einladend)
   ====================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* Wer Bewegung reduziert, bekommt Ruhe statt Effekt */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .way:hover,.tier:hover,.pillar:hover,.quote:hover,.mediacard:hover,.btn:hover{ transform:none; }
}