/* ==========================================================================
   Reisen mit Kids — Startseite, Design-System v2
   Nur für index.html. style.css bleibt unangetastet für die übrigen Seiten.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/fraunces-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:500 600;
  font-display:swap;
  src:url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/inter.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/caveat-600.woff2') format('woff2');
}

:root{
  /* Markenfarben — verbindlich, keine weiteren Farbtöne */
  --coral:#f17d60;
  --petrol:#018e92;
  --sage:#88bab1;
  --cream:#f1e2d0;
  --offwhite:#fffcf4;
  --slate:#3a4747;
  --gray:#9f9f9e;

  /* Textrollen, abgeleitet aus Slate (nur Deckkraft variiert, keine neue Farbe) */
  --text-heading: var(--slate);
  --text-body: rgba(58,71,71,.88);
  --text-muted: rgba(58,71,71,.8);
  --text-on-dark: rgba(255,252,244,.82);

  /* Abstände: 8px-Raster */
  --sp-1:.25rem;  /* 4px */
  --sp-2:.5rem;   /* 8px */
  --sp-3:.75rem;  /* 12px */
  --sp-4:1rem;    /* 16px */
  --sp-5:1.5rem;  /* 24px */
  --sp-6:2rem;    /* 32px */
  --sp-7:3rem;    /* 48px */
  --sp-8:4rem;    /* 64px */
  --sp-9:6rem;    /* 96px */
  --sp-10:8rem;   /* 128px */

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-full:999px;

  --shadow-sm:0 1px 2px rgba(58,71,71,.06), 0 1px 4px rgba(58,71,71,.06);
  --shadow-md:0 8px 24px rgba(58,71,71,.09);
  --shadow-lg:0 20px 60px rgba(58,71,71,.14);

  --font-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand:"Caveat", var(--font-display);

  --container-w:1180px;
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
.home section[id]{ scroll-margin-top:calc(var(--header-h) + var(--sp-4)); }
body.home{
  margin:0;
  background:var(--offwhite);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.home .btn-label-short{ display:none; }
body.home img{max-width:100%;display:block}
body.home a{color:inherit}

.home h1,.home h2,.home h3,.home h4{
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:1.15;
  font-weight:600;
  margin:0;
}

.home :focus-visible{
  outline:2.5px solid var(--petrol);
  outline-offset:3px;
  border-radius:4px;
}

.home .container{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}

.home .visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;
}

.home .eyebrow{
  display:inline-block;
  max-width:100%;
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-heading);
}
/* Inline-block statt Flex, damit lange Eyebrows auf Mobile korrekt umbrechen:
   jede Zeile wird per text-align eigenständig zentriert statt als ein
   Flex-Item über beide Zeilen hinweg vertikal zentriert zu werden. */
.home .eyebrow::before{
  content:"";
  width:22px;height:1.5px;
  margin-right:.5em;
  background:var(--coral);
  display:inline-block;
  vertical-align:middle;
}

.home .section{ padding-block: var(--sp-9); }
.home .section--cream{ background:var(--cream); }
.home .section--slate{ background:var(--slate); color:var(--text-on-dark); }
.home .section-head{
  max-width:640px;
  margin-bottom:var(--sp-7);
}
.home .section-head.center{ margin-inline:auto; text-align:center; }
.home .section-title{ font-size:clamp(1.75rem, 3vw, 2.5rem); margin-top:var(--sp-3); }
.home .section-lead{ margin-top:var(--sp-4); font-size:1.0625rem; color:var(--text-muted); }

/* ---- Buttons -------------------------------------------------------- */
.home .btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-body);
  font-size:1.1875rem;      /* groß genug, um als WCAG-Large-Text zu gelten */
  font-weight:700;
  line-height:1.1;
  padding:.85em 1.5em;
  border-radius:var(--radius-full);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.home .btn:hover{ transform:translateY(-1px); }
.home .btn:active{ transform:translateY(0); }
.home .btn-primary{ background:var(--coral); color:#fff; box-shadow:var(--shadow-sm); }
.home .btn-primary:hover{ background:#ee6f4f; box-shadow:var(--shadow-md); }
.home .btn-secondary{ background:var(--petrol); color:#fff; }
.home .btn-secondary:hover{ background:#017377; }
.home .btn-outline{ background:transparent; color:var(--petrol); border-color:var(--petrol); }
.home .btn-outline:hover{ background:rgba(1,142,146,.08); }
.home .btn-outline.on-dark{ color:var(--offwhite); border-color:rgba(255,252,244,.5); }
.home .btn-outline.on-dark:hover{ background:rgba(255,252,244,.1); }
.home .btn-sm{ font-size:1rem; padding:.6em 1.1em; }

/* Header-CTA: zweizeiliger Guide-Button mit Mini-Cover rechts */
.home .btn-guide{ gap:.7em; padding:.4em 1em; }
.home .btn-guide-text{
  display:flex; flex-direction:column;
  text-align:left; line-height:1.2;
}
.home .btn-guide-line1{ font-size:.9375rem; font-weight:700; }
.home .btn-guide-line2{ font-size:.6875rem; font-weight:600; opacity:.92; letter-spacing:.02em; }
.home .btn-guide-cover{
  width:28px; height:38px;
  object-fit:cover; border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  flex-shrink:0;
}

.home .text-link{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-weight:600;
  color:var(--text-heading);
  text-decoration:underline;
  text-decoration-color:var(--coral);
  text-decoration-thickness:2px;
  text-underline-offset:.2em;
}
.home .text-link svg{ transition:transform .18s ease; }
.home .text-link:hover svg{ transform:translateX(3px); }

/* ---- Header ----------------------------------------------------------- */
.home .site-header{
  position:sticky; top:0; z-index:100;
  background:var(--offwhite);
  border-bottom:1px solid rgba(58,71,71,.08);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.home .site-header.is-scrolled{ box-shadow:0 1px 0 rgba(58,71,71,.08), 0 8px 24px rgba(58,71,71,.06); }
.home .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  min-height:var(--header-h);
}
.home .brand{ text-decoration:none; line-height:1.1; }
.home .brand-word{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:.01em;
  color:var(--text-heading);
  display:block;
}
.home .brand-tag{
  display:block;
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--petrol);
  margin-top:1px;
}
.home .nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  list-style:none;
  margin:0; padding:0;
}
.home .nav-links a{
  text-decoration:none;
  font-weight:600;
  font-size:.9375rem;
  color:var(--text-body);
  padding:.3em 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.home .nav-links a:hover,
.home .nav-links a[aria-current="page"]{ color:var(--petrol); border-color:var(--sage); }
.home .nav-actions{ display:flex; align-items:center; gap:var(--sp-4); }
.home .nav-insta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  transition:background-color .2s ease, transform .2s ease;
}
.home .nav-insta:hover{
  background:rgba(214,41,118,.08);
  transform:scale(1.08);
}
@media (max-width:480px){
  .home .nav-insta{ display:none; }
  .home .brand-tag{ display:none; }
  .home .btn-guide{ gap:.5em; padding:.35em .75em; }
  .home .btn-guide-line1{ font-size:.8125rem; }
  .home .btn-guide-line2{ font-size:.5625rem; }
  .home .btn-guide-cover{ width:22px; height:30px; }
}
.home .nav-toggle{
  display:none;
  background:none; border:0; padding:.4rem;
  color:var(--text-heading);
}

@media (max-width: 860px){
  .home .nav{ flex-wrap:nowrap; gap:var(--sp-2); }
  .home .brand{ min-width:0; }
  .home .brand-word{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .home .brand-tag{ font-size:.625rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .home .nav-actions{ gap:var(--sp-2); flex-shrink:0; }
  .home .nav-actions .btn{ font-size:.8125rem; padding:.65em .85em; white-space:nowrap; }
  .home .btn-label-full{ display:none; }
  .home .btn-label-short{ display:inline; }
  .home .nav-toggle{ padding:.3rem; flex-shrink:0; }
  .home .nav-links{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--offwhite);
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-2);
    padding:var(--sp-6) clamp(1.25rem,4vw,2.5rem);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .home .nav-links a{ font-size:1.125rem; padding:.6em 0; width:100%; }
  .home .nav-links.is-open{
    transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  }
  .home .nav-toggle{ display:inline-flex; }
  .home .nav-actions .btn{ font-size:.9rem; padding:.65em 1.1em; }
}

/* ---- Hero --------------------------------------------------------------- */
.home .hero{
  position:relative;
  padding-block: var(--sp-8) 0;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(136,186,177,.22), transparent 60%),
    var(--offwhite);
  overflow:clip;
  --dune-h: clamp(90px, 13vw, 170px);
}
.home .hero-inner{
  position:relative;
  padding-bottom: calc(var(--dune-h) + var(--sp-7));
}
@media (max-width:760px){
  /* Die Dünen-Grafik ist auf Mobil ausgeblendet, der Platz dafür wird nicht
     mehr gebraucht — sonst entsteht eine leere Fläche vor der nächsten Sektion. */
  .home .hero-inner{ padding-bottom: var(--sp-5); }
  .home .hero{
    background:
      radial-gradient(90% 40vh at 88% 0%, rgba(136,186,177,.3), transparent 65%),
      var(--offwhite);
  }
  /* 96px Sektionsabstand sind auf Telefonbreite zu luftig */
  .home .section{ padding-block: var(--sp-7); }
  /* .moments setzt ein eigenes padding-bottom (Zeile ~689), das die Regel
     darüber überschreiben würde — hier mit angleichen. */
  .home .section.moments{ padding-bottom: var(--sp-7); }
}
.home .hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  align-items:center;
}
@media (min-width:940px){
  .home .hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--sp-9); }
}
.home .hero-copy{ max-width:600px; position:relative; z-index:3; }
.home .hero-art{
  position:relative;
  z-index:1;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, var(--sage) 0%, var(--petrol) 100%);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.home .hero-art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
}
.home .hero-art-caption{
  position:absolute; left:var(--sp-5); bottom:var(--sp-5); right:var(--sp-5);
  background:rgba(58,71,71,.55);
  backdrop-filter:blur(6px);
  color:var(--offwhite);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--radius-md);
  font-size:.875rem;
  line-height:1.5;
}
.home .hero-art-caption strong{ display:block; font-family:var(--font-display); font-size:1.0625rem; font-weight:600; margin-bottom:.15em; }

/* Mobile: eigene Drachen-Szene im Foto entfernt (Sprite-Proportionen im schmalen
   Bildausschnitt zu instabil) — auf Mobil bleibt nur das Foto, Szene ist Desktop-only */
.home .hero-art-scene{ display:none; }

/* Szene: Düne, Gras, laufende Kinder mit Drachen */
.home .hero-scene{ position:absolute; inset:0; pointer-events:none; }
.home .dune{
  position:absolute; bottom:-1px; left:0;
  width:100%; height:var(--dune-h);
}
.home .grass{
  position:absolute;
  bottom: calc(var(--dune-h) * .42);
  width:46px; height:27px;
}
/* Szene aus der Vorlage: Drachen-Sprite oben, Kinder-Sprite unten,
   Geometrie exakt aus den freigestellten Bildern (357x889) */
.home .kite-group{
  position:absolute;
  bottom: calc(var(--dune-h) * .22);
  width: clamp(136px, 19.2vw, 240px);
  aspect-ratio: 357 / 889;
  right:4%;
}
/* Drache 13% kleiner, um den Handpunkt des Jungen skaliert (28.25%/99.38% im Sprite),
   damit das Schnur-Ende exakt in der Hand bleibt */
.home .kite-air{
  position:absolute;
  left:3.64%; top:9.29%;
  width:86.27%;
}
.home .kite-sprite{
  display:block;
  width:100%;
  height:auto;
  transform-origin:28.25% 99.38%;
}
.home .kids-sprite{
  position:absolute;
  bottom:0; left:26.61%;
  width:73.39%;
  height:auto;
}
.home .hero h1{
  font-size:clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing:-.01em;
}
.home .hero h1 .accent{ color:var(--coral); font-style:italic; }
.home .hero-lead{
  margin-top:var(--sp-5);
  font-size:clamp(1.0625rem, 1.6vw, 1.1875rem);
  color:var(--text-muted);
  max-width:46ch;
}
.home .hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-6); }

/* Foto-CTA-Karten: nur in der mobilen Ansicht sichtbar (Desktop behält die Buttons) */
.home .hero-cta-cards{ display:none; }
.home .hero-cta-card{
  display:flex; align-items:center; gap:var(--sp-2);
  flex:1; min-width:0;
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius-md);
  text-decoration:none;
}
.home .hero-cta-card:active{ background:rgba(58,71,71,.06); }
.home .hero-cta-thumb{ object-fit:cover; box-shadow:var(--shadow-sm); flex-shrink:0; }
.home .hero-cta-thumb--cover{ width:34px; height:46px; border-radius:6px; }
.home .hero-cta-thumb--round{ width:42px; height:42px; border-radius:50%; border:2.5px solid var(--offwhite); }
.home .hero-cta-text{ display:flex; flex-direction:column; line-height:1.3; }
.home .hero-cta-text strong{ color:var(--text-heading); font-size:.8125rem; }
.home .hero-cta-text small{ color:var(--text-muted); font-size:.6875rem; }
.home .hero-trust{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-7);
}
.home .hero-trust img{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; border:2.5px solid var(--offwhite);
  box-shadow:var(--shadow-sm);
}
.home .hero-trust-text{ font-size:.875rem; color:var(--text-muted); line-height:1.4; }
.home .hero-trust-text strong{ display:block; color:var(--text-heading); font-size:.9375rem; }
.home .hero-mobile-banner{
  display:none;
  width:100%;
  height:auto;
  aspect-ratio:1200/514;
  object-fit:cover;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}

@media (max-width:939px){
  .home .hero-scene{ display:none; }
  .home .hero-copy{ display:contents; }
  .home .hero-grid{ gap:var(--sp-5); }
  .home .hero-trust{ order:1; margin-top:0; }
  .home .hero .eyebrow{ order:2; }
  /* Nur im Startseiten-Hero (section.hero) werden die Buttons durch die
     Foto-Karten ersetzt. NICHT auf Unterseiten (section.page-hero), dort
     sind die hero-ctas die einzigen Kauf-Buttons. */
  .home .hero .hero-ctas{ display:none; }
  /* Reihenfolge mobil: erst das Versprechen (h1), dann das Angebot.
     Sonst sieht ein Erstbesucher Kaufkarten, bevor er weiß, worum es geht. */
  .home .hero h1{ order:3; }
  .home .hero .hero-cta-cards{
    display:flex;
    order:4;
    gap:var(--sp-2);
  }
  .home .hero-art{ order:5; }
  .home .hero-mobile-banner{ order:6; display:block; }
  .home .hero-lead{ order:7; margin-top:0; }
}

@media (prefers-reduced-motion:no-preference){
  .home [data-reveal]{
    opacity:0; transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay, 0s);
  }
  .home [data-reveal].is-visible{ opacity:1; transform:none; }

  /* Hero-Einstieg: Text steigt gestaffelt auf */
  @keyframes heroRise{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:none; }
  }
  .home .hero .eyebrow,
  .home .hero h1,
  .home .hero-lead,
  .home .hero-ctas,
  .home .hero-trust{
    opacity:0;
    animation:heroRise .85s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .home .hero h1{ animation-delay:.08s; }
  .home .hero-lead{ animation-delay:.18s; }
  .home .hero-ctas{ animation-delay:.28s; }
  .home .hero-trust{ animation-delay:.4s; }

  /* Kinder + Drachen laufen von rechts nach links aus dem Bild */
  @keyframes runAcross{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-100vw - 100%)); }
  }
  .home .kite-group{
    right:auto;
    left:100%;
    z-index:2; /* vor dem Hero-Foto, hinter dem Text (hero-copy: z 3) */
    animation:runAcross 26s linear infinite;
    will-change:transform;
  }

  /* Scherenschnitt-Lauf: sanftes Wippen im Schrittrhythmus */
  @keyframes kidsRun{
    from{ transform:translateY(0) rotate(.5deg); }
    to{ transform:translateY(-5px) rotate(-.6deg); }
  }
  .home .kids-sprite{
    transform-origin:50% 100%;
    animation:kidsRun .42s ease-in-out infinite alternate;
  }

  /* Drache steigt: klein an der Hand beim Loslaufen, volle Höhe ab der Streckenmitte.
     Gleiche Dauer wie runAcross (26s) → bleibt für immer synchron zur Laufstrecke.
     Skalierung um den Handpunkt, damit die Schnur verbunden bleibt. */
  @keyframes kiteRise{
    0%{ transform:scale(.4); }
    15%{ transform:scale(.52); }
    35%{ transform:scale(.85); }
    50%{ transform:scale(1); }
    100%{ transform:scale(1); }
  }
  .home .kite-air{
    transform-origin:28.25% 99.38%;
    animation:kiteRise 26s ease-in-out infinite;
  }

  /* Drachen wippt synchron mit den Kindern (Schnur bleibt verbunden) ... */
  @keyframes kiteBob{
    from{ transform:translateY(0); }
    to{ transform:translateY(-5px); }
  }
  .home .kite-bob{
    animation:kiteBob .42s ease-in-out infinite alternate;
  }
  /* ... und pendelt langsam um den Handpunkt statt zu schweben */
  @keyframes kiteSway{
    from{ transform:rotate(-2deg); }
    to{ transform:rotate(2.5deg); }
  }
  .home .kite-sprite{
    animation:kiteSway 3.4s ease-in-out infinite alternate;
  }
}

/* Gestaffelte Reveals pro Gruppe */
.home .funnel-track .funnel-step:nth-child(2){ --reveal-delay:.12s; }
.home .funnel-track .funnel-step:nth-child(3){ --reveal-delay:.24s; }
.home .funnel-track .funnel-step:nth-child(4){ --reveal-delay:.36s; }
/* Ablauf-Bausteine fliegen nacheinander ein */
.home .ablauf-grid .post-card:nth-child(2){ --reveal-delay:.15s; }
.home .ablauf-grid .post-card:nth-child(3){ --reveal-delay:.30s; }
.home .ablauf-grid .post-card:nth-child(4){ --reveal-delay:.45s; }
.home .ablauf-grid .post-card:nth-child(5){ --reveal-delay:.60s; }
.home .ablauf-grid .post-card:nth-child(6){ --reveal-delay:.75s; }
.home .moments-strip .moment:nth-child(2){ --reveal-delay:.08s; }
.home .moments-strip .moment:nth-child(3){ --reveal-delay:.16s; }
.home .moments-strip .moment:nth-child(4){ --reveal-delay:.24s; }
.home .moments-strip .moment:nth-child(5){ --reveal-delay:.32s; }

/* ---- Funnel / Angebote ------------------------------------------------ */
.home .funnel{ position:relative; }
.home .funnel-track{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  counter-reset:step;
}
@media (min-width:900px){ .home .funnel-track{ grid-template-columns:repeat(4,1fr); gap:var(--sp-4); } }

.home .funnel-step{
  position:relative;
  background:var(--offwhite);
  border:1.5px solid rgba(58,71,71,.1);
  border-radius:var(--radius-md);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  display:flex; flex-direction:column;
  counter-increment:step;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home .funnel-step:hover{ border-color:var(--sage); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.home .funnel-step::before{
  content:counter(step);
  position:absolute; top:-16px; left:var(--sp-5);
  width:32px; height:32px;
  background:var(--slate); color:var(--offwhite);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:.875rem;
}
/* Karten, die Alternativen sind statt Schritte: keine Nummer.
   Eine 1-2-3-4-Folge suggeriert sonst, man brauche alles nacheinander.
   Bei echten Abläufen (beratung.html "So läuft es ab") bleibt sie. */
.home .funnel-track--options .funnel-step::before{ content:none; }
.home .funnel-track--options .funnel-step{ padding-top:var(--sp-5); }

.home .funnel-step.is-featured{
  border-color:var(--coral);
  box-shadow:var(--shadow-md);
}
.home .funnel-flag{
  position:absolute; top:-14px; right:var(--sp-5);
  background:var(--coral); color:#fff;
  padding:.38em 1em;
  border-radius:var(--radius-full);
  font-size:.8125rem; font-weight:700; letter-spacing:.02em;
  line-height:1.25;
  box-shadow:0 2px 6px rgba(58,71,71,.18);
  max-width:calc(100% - 76px);   /* nie unter die Nummer laufen */
  text-align:center;
}
.home .funnel-flag--soon{
  background:var(--sage); color:var(--slate);
}
.home .funnel-step.is-featured::before{ background:var(--coral); }

/* Transparentes Hintergrundbild pro Funnel-Karte (Bild via --card-img am Element) */
.home .funnel-step::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background-image:var(--card-img, none);
  background-size:cover;
  background-position:center;
  opacity:.15;
  pointer-events:none;
}

/* Foto-Overlay liegt hinter Inhalt und Badges (sonst waescht es Text und Flags aus) */
.home .funnel-step::after{ z-index:0; }
.home .funnel-step > *{ position:relative; z-index:1; }
.home .funnel-step::before{ z-index:2; }
.home .funnel-flag{ position:absolute; z-index:2; }

/* Enge 4-Spalten-Breiten: Badge etwas kleiner, damit es die Nummer nicht beruehrt */
@media (min-width:900px) and (max-width:1000px){
  .home .funnel-flag{ font-size:.75rem; padding:.32em .8em; letter-spacing:0; }
}
.home .funnel-icon{
  width:40px; height:40px; margin-bottom:var(--sp-4);
  color:var(--petrol);
}
.home .funnel-step h3,
.home .funnel-step h2{ font-size:1.1875rem; margin-bottom:var(--sp-2); }
.home .funnel-step p{ font-size:.9375rem; color:var(--text-muted); flex-grow:1; margin:0 0 var(--sp-4); }
.home .funnel-price{
  display:flex; align-items:baseline; gap:.4em;
  font-family:var(--font-display); font-weight:600;
  font-size:1.375rem; color:var(--text-heading);
  margin-bottom:var(--sp-4);
}
.home .funnel-price small{ font-family:var(--font-body); font-weight:500; font-size:.75rem; color:var(--text-muted); }

/* Ganze Karte klickbar machen, sichtbarer Link bleibt unten (Stretched-Link-Muster) */
.home .funnel-step .text-link::after{
  content:"";
  position:absolute;
  inset:0;
}

/* ---- Momente (Foto-Band) ------------------------------------------------ */
.home .moments{ padding-bottom:var(--sp-8); }
.home .moments .section-head{ margin-bottom:var(--sp-6); }
.home .moments-strip{
  display:flex;
  gap:var(--sp-4);
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.home .moments-strip::-webkit-scrollbar{ display:none; }
.home .moment{
  margin:0;
  flex:0 0 min(64vw, 300px);
  aspect-ratio:3/4;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  scroll-snap-align:center;
}
.home .moment img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.home .moment:hover img{ transform:scale(1.06); }
.home .moment:nth-child(odd){ rotate:-1.2deg; }
.home .moment:nth-child(even){ rotate:1.2deg; margin-top:var(--sp-5); }
@media (min-width:1100px){
  .home .moments-strip{
    max-width:var(--container-w);
    margin-inline:auto;
    overflow:visible;
    justify-content:center;
  }
  .home .moment{ flex:1 1 0; min-width:0; }
  .home .moment:hover{ z-index:2; }
}

/* ---- Unterseiten: Kopfbereich ------------------------------------------- */
.home .page-hero{
  padding-block:var(--sp-8) var(--sp-7);
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(136,186,177,.2), transparent 60%),
    var(--offwhite);
}
.home .page-hero .container{ max-width:860px; text-align:center; }
.home .page-hero h1{
  font-size:clamp(2rem, 4vw, 3rem);
  letter-spacing:-.01em;
  margin-top:var(--sp-3);
}
.home .page-hero h1 .accent{ color:var(--coral); font-style:italic; }
.home .page-hero .lead{
  margin:var(--sp-4) auto 0;
  max-width:62ch;
  font-size:1.0625rem;
  color:var(--text-muted);
}
.home .page-hero .hero-ctas{ justify-content:center; }
.home .page-hero .eyebrow{ text-align:center; }

/* ---- Unterseiten: Karten-Raster ------------------------------------------ */
.home .info-grid{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; }
@media (min-width:760px){ .home .info-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .home .info-grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .home .funnel-track--3{ grid-template-columns:repeat(3,1fr); gap:var(--sp-5); } }
@media (min-width:900px){ .home .funnel-track--2{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); max-width:840px; margin-inline:auto; } }

/* ---- Häkchen-Listen & Preise --------------------------------------------- */
.home .check-list{ list-style:none; margin:0 0 var(--sp-5); padding:0; }
.home .check-list li{
  position:relative;
  padding:var(--sp-2) 0 var(--sp-2) 1.7em;
  font-size:.9375rem;
  color:var(--text-body);
  line-height:1.55;
}
.home .check-list li::before{
  content:"✓";
  position:absolute; left:0;
  color:var(--petrol); font-weight:700;
}
.home .check-list--neutral li::before{ content:"–"; color:var(--gray); }

/* ---- Ergebnis-Panel ("Was ihr danach habt") ------------------------------ */
.home .outcome-panel{
  max-width:780px;
  margin:var(--sp-7) auto 0;
  padding:clamp(1.5rem, 4vw, 2.75rem);
  background:var(--cream);
  border-radius:var(--radius-lg);
}
.home .outcome-title{
  margin-bottom:var(--sp-5);
  font-size:clamp(1.25rem, 2.4vw, 1.5rem);
}
.home .outcome-list{ list-style:none; margin:0; padding:0; }
.home .outcome-item{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-3) 0;
  font-size:1rem;
  line-height:1.5;
  color:var(--text-body);
}
.home .outcome-item + .outcome-item{ border-top:1px solid rgba(58,71,71,.12); }
.home .outcome-icon{
  flex-shrink:0;
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--offwhite);
  color:var(--petrol);
}
.home .outcome-icon svg{ width:22px; height:22px; }

/* ---- Warteliste & Platzanzeige Workshop ---------------------------------- */
.home .waitlist-panel{
  max-width:640px;
  margin-inline:auto;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  text-align:center;
  background:var(--offwhite);
  border:1.5px solid rgba(58,71,71,.15);
  border-radius:var(--radius-lg);
}
/* Wird zur Hauptaktion, sobald der Termin ausgebucht ist */
.home .waitlist-panel--primary{
  border-color:var(--petrol);
  box-shadow:var(--shadow-md);
}
.home .waitlist-title{ font-size:clamp(1.25rem, 2.4vw, 1.5rem); }
.home .waitlist-lead{
  margin:var(--sp-4) auto var(--sp-5);
  max-width:52ch;
  color:var(--text-muted);
  font-size:.9375rem;
}
.home .waitlist-form{ display:flex; justify-content:center; }
.home .waitlist-fallback{ margin:0; }
.home .workshop-ausgebucht{
  max-width:48ch;
  margin:0 auto var(--sp-4);
  font-weight:600;
  color:var(--text-heading);
}
.home .workshop-stand{
  margin:var(--sp-3) 0 0;
  font-size:.75rem;
  color:var(--text-muted);
}

/* Intro-Absatz vor den Ablauf-Bausteinen */
.home .ablauf-intro{
  max-width:62ch;
  margin:var(--sp-3) 0 var(--sp-6);
  color:var(--text-muted);
}
.home .price-line{
  font-family:var(--font-display);
  font-size:1.625rem; font-weight:600;
  color:var(--text-heading);
  margin:0 0 var(--sp-4);
}
.home .price-line small{
  font-family:var(--font-body);
  font-size:.8125rem; font-weight:500;
  color:var(--text-muted);
}

/* ---- Hinweis-Boxen -------------------------------------------------------- */
.home .note-box{
  border-left:3px solid var(--petrol);
  background:rgba(136,186,177,.16);
  padding:var(--sp-4) var(--sp-5);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.9375rem;
  color:var(--text-body);
  line-height:1.7;
  max-width:780px;
  margin:var(--sp-6) auto 0;
}
.home .note-box--coral{
  border-left-color:var(--coral);
  background:rgba(241,125,96,.1);
}

/* ---- CTA-Panel (dunkel) ---------------------------------------------------- */
.home .cta-panel{
  background:var(--slate);
  color:var(--text-on-dark);
  border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-6);
  text-align:center;
}
.home .cta-panel h2{ color:var(--offwhite); font-size:clamp(1.5rem, 2.6vw, 2rem); }
.home .cta-panel p{ max-width:56ch; margin:var(--sp-4) auto var(--sp-5); }
.home .cta-panel .btn{ margin:var(--sp-2); }

/* Einzeiler: Kennenlern-Call mit kleinem runden Foto */
.home .kennenlern-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  width:fit-content;
  margin:0 auto var(--sp-6);
  padding:var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2);
  background:var(--offwhite);
  border:1.5px solid rgba(58,71,71,.15);
  border-radius:var(--radius-full);
  text-decoration:none;
  font-weight:600;
  font-size:.9375rem;
  color:var(--text-heading);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home .kennenlern-line:hover{
  border-color:var(--coral);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.home .kennenlern-line img{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.home .kennenlern-line svg{ color:var(--coral); flex-shrink:0; }
@media (max-width:600px){
  .home .kennenlern-line{ font-size:.875rem; text-align:left; }
}

/* ---- FAQ-Akkordeon --------------------------------------------------------- */
.home .faq-group-title{
  font-size:1.375rem;
  margin:var(--sp-8) 0 var(--sp-4);
}
.home .faq-group-title:first-of-type{ margin-top:0; }
.home details.faq{
  background:var(--offwhite);
  border:1.5px solid rgba(58,71,71,.12);
  border-radius:var(--radius-md);
  margin-bottom:var(--sp-3);
  transition:border-color .2s ease;
}
.home details.faq:hover{ border-color:var(--sage); }
.home details.faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  font-size:1.0625rem;
  color:var(--text-heading);
  padding:var(--sp-4) 3.2rem var(--sp-4) var(--sp-5);
  position:relative;
}
.home details.faq summary::-webkit-details-marker{ display:none; }
.home details.faq summary::after{
  content:"+";
  position:absolute; right:var(--sp-5); top:50%;
  transform:translateY(-50%);
  color:var(--coral);
  font-size:1.625rem; font-weight:400; line-height:1;
}
.home details.faq[open] summary::after{ content:"–"; }
.home details.faq .faq-a{
  padding:0 var(--sp-5) var(--sp-5);
  font-size:.9375rem;
  color:var(--text-muted);
  line-height:1.75;
}

/* ---- Fließtext-Seiten (Über uns, Datenschutz) ------------------------------ */
.home .prose{ max-width:720px; margin-inline:auto; }
.home .prose h2{
  font-size:1.5rem;
  margin:var(--sp-7) 0 var(--sp-3);
}
.home .prose h2:first-child{ margin-top:0; }
.home .prose p{
  margin:0 0 var(--sp-4);
  font-size:1.0625rem;
  color:var(--text-body);
  line-height:1.75;
}
.home .prose em{ color:var(--text-muted); }
.home .prose h3{ font-size:1.1875rem; margin:var(--sp-6) 0 var(--sp-2); }
.home .prose table{
  width:100%;
  border-collapse:collapse;
  margin:var(--sp-5) 0;
  font-size:.9375rem;
}
.home .prose th{
  text-align:left;
  font-family:var(--font-body);
  font-weight:700;
  color:var(--text-heading);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:2px solid var(--sage);
}
.home .prose td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid rgba(58,71,71,.12);
  vertical-align:top;
}
.home .article-meta{
  display:flex;
  justify-content:center;
  gap:var(--sp-4);
  margin-top:var(--sp-4);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* Beitrags-Karten komplett klickbar (wie Funnel-Karten) */
.home .post-card .text-link::after{
  content:"";
  position:absolute;
  inset:0;
}

/* ---- Reisetipps (Beitrags-Karten) --------------------------------------- */
.home .post-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
@media (min-width:860px){ .home .post-grid{ grid-template-columns:repeat(3,1fr); } }
.home .post-card{
  position:relative;
  background:var(--offwhite);
  border:1.5px solid rgba(58,71,71,.1);
  border-radius:var(--radius-md);
  padding:var(--sp-6) var(--sp-5);
  display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home .post-card:hover{ border-color:var(--sage); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.home .post-meta{
  font-size:.75rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--petrol);
  margin:0 0 var(--sp-3);
}
.home .post-card h3,
.home .card-title{ font-size:1.1875rem; margin-bottom:var(--sp-2); }
.home .post-card p{ font-size:.9375rem; color:var(--text-muted); margin:0; flex-grow:1; }
.home .testimonial-stars{
  color:var(--coral);
  font-size:1rem;
  letter-spacing:.1em;
  margin-bottom:var(--sp-3);
}
.home .testimonial-teaser{ margin-top:var(--sp-4); }
.home .testimonial-teaser .testimonial-stars{ margin:0; font-size:.875rem; }
.home .testimonial-card p{ font-size:.9375rem; color:var(--text-body); font-style:italic; }
.home .testimonial-meta{
  margin-top:var(--sp-4);
  font-size:.8125rem;
  color:var(--text-muted);
}
.home .testimonial-meta strong{ color:var(--text-heading); }
.home .newsletter-box{
  background:var(--cream);
  border-radius:var(--radius-lg);
  padding:var(--sp-7) var(--sp-6);
  text-align:center;
  margin-top:var(--sp-8);
}
.home .newsletter-box h2{ font-size:clamp(1.375rem, 2.4vw, 1.75rem); }
.home .newsletter-box p{ max-width:52ch; margin:var(--sp-3) auto var(--sp-5); color:var(--text-muted); }
.home .newsletter-box .btn{ margin-inline:var(--sp-2); margin-top:var(--sp-2); }
.home .newsletter-form-embed{ max-width:420px; margin:var(--sp-5) auto 0; }
.home .newsletter-box .newsletter-alt{ margin-top:var(--sp-4); }

/* ---- Über uns ---------------------------------------------------------- */
.home .about-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-7);
  align-items:center;
}
@media (min-width:860px){ .home .about-grid{ grid-template-columns:.85fr 1.15fr; gap:var(--sp-9); } }
.home .about-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.home .about-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.home .about-photo:hover img{ transform:scale(1.04); }
.home .about-text p{ font-size:1.0625rem; color:var(--text-body); margin:var(--sp-4) 0 0; max-width:56ch; }
.home .about-text .btn{ margin-top:var(--sp-6); }

/* ---- Zitat -------------------------------------------------------------- */
.home .quote{
  text-align:center;
  max-width:760px;
  margin-inline:auto;
}
.home .quote blockquote{
  margin:0;
  font-family:var(--font-hand);
  font-weight:600;
  font-size:clamp(1.75rem, 3.4vw, 2.5rem);
  color:var(--text-heading);
  line-height:1.35;
}
.home .quote cite{
  display:block;
  margin-top:var(--sp-5);
  font-style:normal;
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--petrol);
}

/* ---- Footer -------------------------------------------------------------- */
.home .site-footer{ padding-block:var(--sp-8) var(--sp-6); }
.home .footer-badges{
  display:grid; grid-template-columns:1fr; gap:var(--sp-5);
  padding-bottom:var(--sp-7);
  margin-bottom:var(--sp-7);
  border-bottom:1px solid rgba(255,252,244,.15);
}
@media (min-width:760px){ .home .footer-badges{ grid-template-columns:repeat(3,1fr); } }
.home .footer-badge{ display:flex; align-items:center; gap:var(--sp-3); font-size:.9375rem; font-weight:600; }
.home .footer-badge svg{ flex-shrink:0; color:var(--sage); }
.home .footer-bottom{
  display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6);
  justify-content:space-between; align-items:flex-end;
}
.home .footer-brand{ font-family:var(--font-display); font-size:1.0625rem; font-weight:600; }
.home .footer-links{ display:flex; flex-wrap:wrap; gap:var(--sp-5); list-style:none; margin:0; padding:0; }
.home .footer-links a{ color:var(--text-on-dark); text-decoration:none; font-size:.875rem; }
.home .footer-links a:hover{ color:var(--sage); }
.home .footer-note{
  margin-top:var(--sp-6);
  font-size:.75rem;
  color:rgba(255,252,244,.5);
  line-height:1.6;
  max-width:78ch;
}

/* Ablauf-Karten: eigene Transition zurückholen.
   .post-card (Zeile ~981) deklariert ein transition-Shorthand und überschreibt
   damit das Reveal-Transition aus [data-reveal] inkl. Delay. Höhere Spezifität
   stellt Fade + gestaffelten Delay wieder her. */
@media (prefers-reduced-motion:no-preference){
  .home .ablauf-grid .post-card[data-reveal]{
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), border-color .2s ease, box-shadow .2s ease;
    transition-delay:var(--reveal-delay, 0s);
  }
}