/* ==========================================================================
   Startseite v3 — vereinheitlichte Version (Kinder + Erwachsene)
   Layout-Grundlage: v2 (Mobile-FAB, Desktop-Buttons bündig).
   Wird zusätzlich zu main.css geladen, nur auf der v3-Seite (body.is-v3).

   BREAKPOINT-LOGIK:
   - ≤880px → Mobile-Design: kein Sticky-Rail, stattdessen Bottom-Left FAB-
     Menü. Desktop-Design bleibt bis zu schmaleren Fenstern aktiv (vorher 1100).
   - ≥881px → klassisches Desktop-Layout mit Rail.
   ========================================================================== */

/* Default: v3-spezifische Elemente überall versteckt.
   Werden nur im Mobile-Media-Query (body.is-v3) sichtbar. */
.v3-menu-fab,
.v3-menu{display:none}

/* === Hero: zweizeiliger H1 in gleicher grosser Schrift ==================== */
body.is-v3 .hero h1,
body.is-v3 .hero h1 .hero-subtitle{
  white-space:nowrap;
}
body.is-v3 .hero h1{
  line-height:1.65;
}
body.is-v3 .hero h1 .hero-subtitle{
  display:block;
}

/* True Mobile (≤640px): kleines Display, Content ≈ vw - 32 */
@media (max-width:640px){
  body.is-v3 .hero h1{font-size:clamp(16px, 5.8vw, 42px)}
}
/* Mittlere Viewports (641-880): Mobile-Design aber mehr Platz (kein Rail) */
@media (min-width:641px) and (max-width:880px){
  body.is-v3 .hero h1{font-size:clamp(28px, 5.5vw, 56px)}
}
/* Desktop (>880): Rail sichtbar, Content schmaler */
@media (min-width:881px){
  body.is-v3 .hero h1{font-size:clamp(34px, 3.5vw, 56px)}
}

/* === Illustrationen ausblenden (Hero-Sonne + Neugeborene-Katze) ========== */
body.is-v3 .hero-zeichnung,
body.is-v3 .neugeborene-zeichnung{display:none !important}

/* === v3: Auch Kinder-spezifische Inhalte (.only-kind) zeigen ============= */
body.is-v3 .only-kind{display:block}
body.is-v3 .person.only-kind{display:block}

/* === Notfall-Button: Text-Style wie Telefon-Button ======================= */
body.is-v3 .notfall-btn--text{
  flex-direction:column;
  align-items:flex-start;
  padding:4px 0;
  top:58px;
  font-size:13px;
  color:var(--navy);
  gap:0;
  line-height:1.2;
  text-align:left;
}
/* Exakt gleiche Schriftgrösse/-eigenschaften wie .phone-btn b
   (line-height vom Parent geerbt, damit die b-Höhe der Phone-b-Höhe entspricht
   — sonst sitzt 'Hier klicken' höher als 'Ab Montag 07:45 Uhr'). */
body.is-v3 .notfall-btn--text b{
  font-size:22px;
  display:flex;
  align-items:center;
  min-height:24px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--navy);
}
body.is-v3 .notfall-btn--text small{
  color:var(--navy-soft);
  font-size:19px;
  font-style:normal;
  font-weight:500;
  line-height:1.2;
}
body.is-v3 .notfall-btn--text:hover b,
body.is-v3 .notfall-btn--text:focus-visible b{text-decoration:underline}

@media(max-width:640px){
  /* Positionierung */
  body.is-v3 .notfall-btn--text{top:58px}
  body.is-v3 .phone-btn{top:58px;right:24px;align-items:flex-end;text-align:right}
  body.is-v3 .phone-btn .phone-icon{display:none}
  body.is-v3 .phone-btn b{gap:0;min-height:24px}
  body.is-v3 .phone-btn small{padding-left:0}

  /* ===== FIXE Header-Schriftgrössen — gegen iOS-Skalierung gesperrt =====
     -webkit-text-size-adjust:100% + feste Boxhöhe (height + max-height/overflow)
     stoppen das iOS-WebKit-Font-Boosting zuverlässig: ein Element, dessen Inhalt
     bei Vergrösserung überlaufen würde, wird vom Autosizer NICHT geboostet.
     Titelzeile = 20px (Box 24px), Statuszeile = 16px (Box 20px) — beide Seiten
     identisch und damit auf exakt gleicher Höhe. */
  body.is-v3 .notfall-btn--text b,
  body.is-v3 .phone-btn b{
    font-size:20px;height:24px;
    -webkit-text-size-adjust:100%;text-size-adjust:100%;
  }
  body.is-v3 .notfall-btn--text small,
  body.is-v3 .phone-btn small{
    font-size:16px;line-height:1.2;font-weight:500;
    height:20px;max-height:20px;overflow:hidden;
    -webkit-text-size-adjust:100%;text-size-adjust:100%;
  }
}

/* === Praxis v3: alle Intro-Absätze in einheitlicher Lauftext-Grösse ====== */
body.is-v3 .praxis-intro p{
  font-size:19px;
  line-height:1.45;
  font-weight:400;
  color:var(--ink-soft);
  margin:0 0 18px;
}
body.is-v3 .praxis-intro p:last-child{margin-bottom:24px}
body.is-v3 .leistungen-v3{margin-top:46px}
@media (min-width:720px){
  body.is-v3 .leistungen-v3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
}

/* === v3: Neugeborene-Button zentriert (Desktop + Mobile) === */
body.is-v3 #neugeborene .cta-fab--left{margin-left:auto;margin-right:auto}

/* === v3 Mobile: Kontakt-Buttons (Telefon + Feedback geben) zentrieren === */
@media (max-width:900px){
  body.is-v3 #kontakt .card > .cta-fab--inline{margin-left:auto;margin-right:auto}
}

/* === v3: Notfallkontakt links, Telefon rechts — leicht vom Rand eingerückt = */
body.is-v3 .notfall-btn{left:24px;padding-left:0}
/* Telefon rechtsbündig — Nummer + Status schlagen am rechten Rand an */
body.is-v3 .phone-btn{right:24px;padding-right:0;align-items:flex-end;text-align:right}

/* === v3: Sprachoption ganz oben rechts ================================== */
/* Schriftgrösse gleich wie 'Hier klicken' (.notfall-btn--text small): 19px / 17px Mobile */
body.is-v3 .v3-lang{
  position:fixed;
  top:14px;
  right:24px;
  z-index:52;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:19px;
  font-weight:500;
  line-height:1.2;
  color:var(--navy-soft);
}
@media (max-width:640px){
  body.is-v3 .v3-lang{font-size:17px}
}
/* WP Admin-Bar ist 32px (Desktop) / 46px (Mobile) — Top entsprechend versetzen */
body.is-v3.admin-bar .v3-lang{top:46px}
@media screen and (max-width:782px){
  body.is-v3.admin-bar .v3-lang{top:60px}
}
body.is-v3 .v3-lang-opt{
  background:none;
  border:none;
  padding:4px 2px;
  font:inherit;
  color:var(--navy-soft);
  cursor:pointer;
  transition:color .15s var(--ease-out);
}
body.is-v3 .v3-lang-opt:hover,
body.is-v3 .v3-lang-opt:focus-visible{color:var(--navy)}
body.is-v3 .v3-lang-opt.is-active{
  color:var(--navy);
  font-weight:700;
}
body.is-v3 .v3-lang-sep{color:var(--navy-soft)}

/* ==========================================================================
   Mobile-Design für v3 — gilt bis 880px
   Desktop-Layout mit Rail bleibt bis zu schmaleren Fenstern aktiv.
   ========================================================================== */
@media (max-width:880px){

  /* Sticky-Rail deaktivieren */
  body.is-v3 .rail{display:none !important}

  /* Shell-Padding: ohne Rail neutralisieren (40px je Seite statt 220/40) */
  body.is-v3 .shell{padding:24px 40px 160px 40px}

  /* === Menu-FAB (links unten, rund) ===================================== */
  body.is-v3 .v3-menu-fab{
    display:inline-flex;
    position:fixed;
    left:16px;
    bottom:14px;
    z-index:9000;
    width:52px;height:52px;
    align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--navy);color:#fff;
    box-shadow:var(--shadow);
    border:3px solid #acabc7;
    cursor:pointer;
    transition:transform .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
  }
  body.is-v3 .v3-menu-fab:hover{background:#1e2b55;border-color:#fff;transform:translateY(-2px)}
  body.is-v3 .v3-menu-fab:active{transform:scale(.94)}
  body.is-v3.has-modal-open .v3-menu-fab{display:none}

  /* === Fullscreen-Menu-Overlay ========================================== */
  body.is-v3 .v3-menu{
    display:flex;
    position:fixed;inset:0;z-index:9100;
    background:var(--navy);
    align-items:center;justify-content:center;
    opacity:0;visibility:hidden;
    transition:opacity 240ms var(--ease-out), visibility 240ms var(--ease-out);
  }
  body.is-v3 .v3-menu.is-open{opacity:1;visibility:visible}

  body.is-v3 .v3-menu-close{
    position:absolute;top:18px;right:18px;
    width:48px;height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background 160ms var(--ease-out), transform 120ms var(--ease-out);
  }
  body.is-v3 .v3-menu-close:hover{background:rgba(255,255,255,.18)}
  body.is-v3 .v3-menu-close:active{transform:scale(.94)}

  body.is-v3 .v3-menu-nav{
    display:flex;flex-direction:column;gap:28px;
    text-align:center;
    padding:24px;
  }
  body.is-v3 .v3-menu-nav a{
    color:#fff;
    font-size:28px;font-weight:700;
    text-decoration:none;line-height:1.2;
    padding:6px 0;
    transition:color 160ms var(--ease-out), transform 160ms var(--ease-out);
  }
  body.is-v3 .v3-menu-nav a:hover,
  body.is-v3 .v3-menu-nav a:focus-visible{color:var(--navy-light)}
  body.is-v3 .v3-menu-nav a:active{transform:scale(.97)}

  @media (prefers-reduced-motion:reduce){
    body.is-v3 .v3-menu,
    body.is-v3 .v3-menu-fab,
    body.is-v3 .v3-menu-nav a,
    body.is-v3 .v3-menu-close{transition:none}
  }
}

/* ==========================================================================
   True Mobile (≤640px) — Override für sehr kleine Bildschirme
   ========================================================================== */
@media (max-width:640px){
  /* Kompakteres Shell-Padding für True-Mobile (klingt nach dem 100px-Top
     des originalen Mobile-Layouts in main.css) */
  body.is-v3 .shell{padding:100px 16px 180px 16px}

  /* Hero: Margin-Hack aus v1-Mobile zurücksetzen */
  body.is-v3 .hero{margin-left:0;margin-right:0;padding:8px 0 20px}
}