/* =============================================================================
   pages/home.css — Startseite.

   Reihenfolge der Stylesheets: base.css -> layout.css -> components.css -> diese Datei.
   Alle Farben, Abstaende und Kurven stammen aus den Tokens in base.css.

   Diese Datei enthaelt
   a) die Spezialkomponenten aus SPEC-01 §4.12, die nur auf der Startseite
      vorkommen: .hero, .heroBlob, .heroCard, .heroScroll, .dots;
   b) die seitenspezifischen Bausteine mit dem Praefix "home".
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Hero (SPEC-01 §4.12)
   Der Hero laeuft unter der transparenten Kopfleiste durch; layout.css hebt ihn
   dafuer um --header-h an. Der Innenabstand oben gleicht das wieder aus.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(560px,86vh,860px);
  padding-block:calc(var(--header-h) + clamp(2rem,6vw,3.5rem)) clamp(4.5rem,9vw,7rem);
  overflow:hidden;                       /* haelt die Deko-Blobs im Rahmen */
  background-image:linear-gradient(180deg,var(--sand-3) 0%,var(--sand) 46%);
}

/* Zwei Stolperfallen auf schmalen Schirmen, beide hier entschaerft:
   1. Als Flex-Kind haette .wrap die automatische Mindestbreite ihres Inhalts —
      und ein 1fr-Raster meldet dafuer seine Max-Content-Breite. min-width:0.
   2. minmax(0,1fr) statt auto, damit die Eigenbreite des Hero-Fotos (1920px)
      die Spalte nicht aufzieht. */
.hero > .wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;
  gap:clamp(2.5rem,6vw,4rem);
  align-items:center;
  width:100%;
}

.hero__text,
.hero__visual{
  min-width:0;
}

@media (min-width:900px){
  .hero > .wrap{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(2rem,5vw,4.5rem);
  }
}

/* ---- 1.1 Textspalte ---- */
.hero__text{
  display:grid;
  justify-items:start;
  gap:clamp(1.1rem,2.4vw,1.6rem);
}

.hero__text h1{
  font-size:var(--fs-hero);
  max-width:14ch;
}

.hero__text .lead{
  max-width:46ch;
}

/* Die Chipreihe nutzt die volle Spaltenbreite, sonst legt das Raster sie
   auf die Breite des breitesten Chips fest und bricht nach jedem Chip um. */
.hero__text .badgeRow{
  justify-self:stretch;
  margin-top:var(--s2);
}

/* ---- 1.2 Bildspalte ----
   Unter 760px fliessen die Infokarten als Reihe unter den Blob; darueber
   schweben sie frei ueber dem Bild. */
.hero__visual{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--s3);
  width:100%;
}

/* ---- 1.3 Bildblob ----
   Der Rand wandert (blobMorph); das Bild ist leicht ueberskaliert, damit beim
   Morphen an keiner Stelle eine Kante frei wird. */
.heroBlob{
  position:relative;
  display:block;
  flex:1 1 100%;
  width:100%;
  max-width:min(100%,30rem);
  margin-inline:auto;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:var(--blob-a);
  background-color:var(--sand-3);
  box-shadow:var(--sh-lg);
  animation:blobMorph 18s linear infinite alternate;
  will-change:border-radius;
}

.heroBlob img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.06);
}

/* Bildausschnitte: jedes Foto zeigt das, worauf es ankommt. */
.heroBlob .homeHero__img{object-position:18% 50%}
.heroBlob .homeIntro__img{object-position:16% 50%}
.heroBlob .homeGallery__img--anatomie{object-position:34% 50%}
.heroBlob .homeGallery__img--raum{object-position:50% 75%}
.heroBlob .homeGallery__img--skelett{object-position:48% 50%}

/* ---- 1.4 Schwebende Infokarten ---- */
.heroCard{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:var(--s3);
  row-gap:.1rem;
  flex:1 1 15rem;
  max-width:22rem;
  margin:0;
  padding:.8rem 1.1rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background-color:var(--paper);
  box-shadow:var(--sh-lg);
  color:var(--ink);
  text-decoration:none;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

a.heroCard:hover,
a.heroCard:focus-visible{
  box-shadow:var(--sh-xl);
  transform:translateY(-2px);
}

a.heroCard:hover .heroCard__value,
a.heroCard:focus-visible .heroCard__value{
  color:var(--clay-800);
}

a.heroCard:hover .heroCard__icon,
a.heroCard:focus-visible .heroCard__icon{
  background-color:var(--clay-100);
}

.heroCard__icon{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:var(--clay-50);
  color:var(--clay-700);
}

.heroCard--booking .heroCard__icon{
  background-color:var(--stone-50);
  color:var(--stone-700);
}

.heroCard__label{
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.heroCard__value{
  font-family:var(--font-display);
  font-size:var(--fs-base);
  font-weight:600;
  line-height:1.2;
  letter-spacing:var(--ls-tight);
  color:var(--ink);
}

/* Auf schmalen Schirmen wiederholt die Termin-Karte nur den Knopf
   "Termin anfragen" direkt daneben — darum bleibt sie dort weg. */
.heroCard--booking{
  display:none;
}

@media (min-width:760px){
  .heroCard{
    position:absolute;
    z-index:2;
    flex:0 0 auto;
    max-width:min(80%,17rem);
    animation:floatSoft 7s var(--ease-soft) infinite alternate;
  }

  .heroCard--booking{
    display:grid;
  }

  .heroCard--phone{
    inset-block-start:7%;
    inset-inline-start:-2%;
  }

  /* Deutlich hoeher als die Karte rechts unten: so stehen beide versetzt und
     stossen auch in einer schmalen Bildspalte nicht aneinander. */
  .heroCard--booking{
    inset-block-end:21%;
    inset-inline-start:-8%;
    animation-delay:-2.4s;
  }

  .heroCard--years{
    inset-block-end:1%;
    inset-inline-end:0;
    animation-delay:-4.8s;
  }
}

@media (min-width:760px) and (max-width:1099.98px){
  /* Unter der Desktopbreite ist neben dem Bild kein Platz zum Ueberstehen —
     die Karten ruecken an die Spaltenkante, sonst schneidet der Rand sie ab. */
  .heroCard--phone{inset-inline-start:0}
  .heroCard--booking{inset-inline-start:0}
}

@media (min-width:900px) and (max-width:1099.98px){
  /* Zwischen Tablet und Desktop ist die Bildspalte schmal — Karten einziehen. */
  .heroCard{
    max-width:min(92%,16.5rem);
  }
}

/* ---- 1.5 Scrollhinweis ---- */
.heroScroll{
  position:absolute;
  z-index:2;
  inset-block-end:clamp(1rem,3vw,1.75rem);
  inset-inline-start:50%;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  min-width:44px;
  min-height:44px;
  padding:.4rem .9rem;
  border-radius:var(--r-pill);
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
  transform:translateX(-50%);
  transition:color var(--t-base) var(--ease-soft);
}

.heroScroll:hover,
.heroScroll:focus-visible{
  color:var(--clay-800);
}

.heroScroll__icon{
  display:grid;
  place-items:center;
  color:var(--clay-600);
  animation:floatSoft 2.8s var(--ease-soft) infinite alternate;
}

@media (min-width:900px){
  .heroScroll{
    display:inline-flex;
  }
}


/* -----------------------------------------------------------------------------
   2. Punktnavigation (SPEC-01 §4.12)
   Ein Punkt je Hauptabschnitt, erst ab 1100px. main.js setzt .is-active.
   Die Trefferflaeche ist 44px breit, der sichtbare Punkt bleibt 8px klein.
   Die Punkte schwingen wie eine Wirbelsaeule in der Seitenansicht: home.php
   rechnet den seitlichen Versatz je Punkt aus und uebergibt ihn als --dotX.
   -------------------------------------------------------------------------- */
.dots{
  position:fixed;
  z-index:var(--z-sticky);
  inset-block-start:50%;
  inset-inline-end:clamp(.5rem,1.6vw,1.25rem);
  display:none;
  flex-direction:column;
  align-items:center;
  transform:translateY(-50%);
  transition:opacity var(--t-base) var(--ease-soft);
}

@media (min-width:1100px){
  .dots{
    display:flex;
  }
}

.dots__dot{
  display:grid;
  place-items:center;
  width:44px;
  height:40px;
  border-radius:var(--r-pill);
  text-decoration:none;
  transform:translateX(var(--dotX,0px));
}

/* Der Punkt traegt einen hellen Ring: so bleibt er auf dem Sandton genauso
   sichtbar wie ueber dem Zitat- und dem Abschlussband. */
.dots__dot::before{
  content:'';
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background-color:var(--clay-500);
  box-shadow:0 0 0 1.5px rgba(252,248,244,.72);
  opacity:.45;
  transition:
    transform var(--t-base) var(--ease-back),
    background-color var(--t-base) var(--ease-soft),
    opacity var(--t-base) var(--ease-soft);
}

.dots__dot:hover::before,
.dots__dot:focus-visible::before{
  opacity:.85;
  transform:scale(1.25);
}

.dots__dot.is-active::before{
  background-color:var(--clay-600);
  opacity:1;
  transform:scale(1.4);
}

/* Bei geoeffnetem Menue tritt die Punktnavigation zurueck — wie FAB und Ring. */
body.is-locked .dots{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Niedrige Fenster: enger stellen, damit die Spalte nicht in den
   Kontaktknopf laeuft. */
@media (max-height:760px){
  .dots__dot{
    height:32px;
  }
}


/* -----------------------------------------------------------------------------
   3. Begruessung
   -------------------------------------------------------------------------- */
.homeIntro{
  display:grid;
  grid-template-columns:minmax(0,1fr);   /* siehe Hinweis beim Hero-Raster */
  gap:clamp(2rem,5vw,3.5rem);
  align-items:center;
}

.homeIntro__visual,
.homeIntro__text{
  min-width:0;
}

@media (min-width:900px){
  .homeIntro{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(2.5rem,6vw,5rem);
  }
}

.homeIntro__portrait{
  max-width:min(100%,25rem);
  animation-delay:-6s;            /* nicht im Gleichschritt mit dem Hero-Blob */
}

.homeIntro__text{
  display:grid;
  justify-items:start;
  gap:var(--s4);
}

.homeIntro__signature{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,1rem + 1.4vw,2rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:var(--ls-tight);
  color:var(--clay-700);
}


/* -----------------------------------------------------------------------------
   4. Leistungen
   -------------------------------------------------------------------------- */
.homeServices{
  max-width:none;
}

.homeServices__item{
  margin:0;
  display:flex;
}

.homeServices__item > .card{
  width:100%;
}

/* Auf den farbigen Karten waere der Pfeil-Link in --brand-ink kaum zu lesen —
   er bekommt hier den hellen Gegenpart der jeweiligen Flaeche. */
.homeServices .card--clay .linkArrow{
  color:var(--clay-100);
}

.homeServices .card--stone .linkArrow{
  color:var(--clay-700);
}

.homeServices .card--clay:hover .linkArrow,
.homeServices .card--clay:focus-within .linkArrow,
.homeServices .card--stone:hover .linkArrow,
.homeServices .card--stone:focus-within .linkArrow{
  color:var(--clay-800);
}

.homeServices__more{
  margin-top:clamp(2.5rem,6vw,4rem);
  text-align:center;
}

/* Das versetzte Raster schiebt die zweite Karte nach unten — der Knopf
   darunter braucht deshalb etwas mehr Luft. */
@media (min-width:680px){
  .homeServices__more{
    margin-top:clamp(3.5rem,8vw,5.5rem);
  }
}


/* -----------------------------------------------------------------------------
   5. Ablauf
   -------------------------------------------------------------------------- */
/* Die Verbindungslinie soll hinter den grossen Ziffern durchlaufen, nicht
   durch die Schrittueberschriften. Darum sitzt sie hier etwas hoeher und
   flacher als im Grundmass der Komponente. */
.homeStepper .stepper__track{
  top:.2rem;
  height:3.4rem;
}

.homeStepper__cta{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  text-align:center;
}


/* -----------------------------------------------------------------------------
   6. Zahlen
   -------------------------------------------------------------------------- */
.homeStats{
  max-width:none;
}

.homeStats__item{
  margin:0;
  display:flex;
}

.homeStats__item > .card{
  width:100%;
}


/* -----------------------------------------------------------------------------
   7. Einblick in die Praxis
   -------------------------------------------------------------------------- */
.homeGallery{
  max-width:none;
}

.homeGallery__item{
  margin:0;
}

.homeGallery__blob{
  max-width:min(100%,24rem);
  box-shadow:var(--sh-md);
}

/* Jeder Blob startet an einer anderen Stelle des Morph-Zyklus. */
.homeGallery__item:nth-child(2) .homeGallery__blob{animation-delay:-5s}
.homeGallery__item:nth-child(3) .homeGallery__blob{animation-delay:-11s}

.homeGallery__caption{
  margin-top:var(--s4);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
}


/* -----------------------------------------------------------------------------
   8. Fragen und Antworten
   -------------------------------------------------------------------------- */
.homeFaq__more{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  text-align:center;
}

/* Ohne JavaScript bleibt keine Antwort verborgen. */
@media (scripting:none){
  .homeFaq .faq__a{
    grid-template-rows:1fr;
  }

  .homeFaq .faq__q > svg{
    display:none;
  }
}


/* -----------------------------------------------------------------------------
   9. Abschlussband
   Die Welle sitzt buendig an der Oberkante und traegt die Farbe des
   vorangehenden Abschnitts (--sand-2), damit der Uebergang organisch wirkt.
   -------------------------------------------------------------------------- */
.homeCta{
  padding-block-start:calc(var(--section-y) + clamp(28px,4vw,64px));
}

.homeCta > .waveTop{
  position:absolute;
  inset:0 0 auto 0;
  z-index:0;
  margin-bottom:0;
  color:var(--sand-2);
}

.homeCta__actions{
  justify-content:center;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}

.homeCta__note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:clamp(1.5rem,3vw,2rem);
  font-size:var(--fs-sm);
  color:var(--clay-100);
}

.homeCta__note svg{
  flex:0 0 auto;
  width:1.15em;
  height:1.15em;
  color:var(--clay-200);
}


/* -----------------------------------------------------------------------------
   10. Reduzierte Bewegung
   Der globale Block in base.css kuerzt alle Dauern; die dauerhaft laufenden
   Zyklen der Startseite werden hier zusaetzlich ganz angehalten.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .heroBlob,
  .heroCard,
  .heroScroll__icon{
    animation:none;
  }

  .heroBlob{
    border-radius:var(--r-2xl);
  }
}