/* =====================================================================
   Praxis Eugen Vorat — Physiotherapie Pforzheim
   Shared Stylesheet · Teal + Navy · Fraunces + Manrope
   ===================================================================== */

/* ---------- Fonts (self-hosted, DSGVO) ---------- */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("fonts/manrope.woff2") format("woff2");
  font-weight:300 800;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --teal:#2b7a78; --teal-dark:#215f5d; --teal-soft:#e4f0ef; --teal-mist:#eef6f5;
  --navy:#12324f; --navy-2:#173d61; --navy-soft:#3a5877;
  --ink:#1d2b39; --muted:#5f7183;
  --bg:#f5f9fb; --paper:#ffffff; --line:#dbe6ee;
  --accent:#3b7bd6;                 /* Logo-Blau als dezenter Zweitton */
  --pad-x:clamp(1.15rem,5vw,4rem);
  --maxw:1200px;
  --r:16px; --r-lg:24px;
  --shadow:0 18px 40px -22px rgba(18,50,79,.35);
  --shadow-sm:6px 8px 22px -12px rgba(18,50,79,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(1rem,.55vw + .9rem,1.075rem);
  line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;
  letter-spacing:-.01em;color:var(--navy);margin:0}
p{margin:0 0 1rem}
.body-lock{overflow:hidden}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding:clamp(3.4rem,7vw,6rem) 0}
.section--tight{padding:clamp(2.6rem,5vw,4rem) 0}
.eybadge{display:inline-flex;align-items:center;gap:.5rem;font-family:"Manrope";
  font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-dark)}
.eybadge::before{content:"";width:26px;height:2px;background:var(--teal);border-radius:2px}
.eybadge{margin-bottom:.65rem}
.welcome__body .eybadge{margin-bottom:0}
.bg-navy .eybadge{color:#7fd3d0}
.bg-book .eybadge{color:rgba(255,255,255,.92)}
.bg-navy .eybadge::before,.bg-book .eybadge::before{background:currentColor}
.cta .eybadge{color:rgba(255,255,255,.92)}
.cta .eybadge::before{background:rgba(255,255,255,.92)}
.h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.lead{color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.22rem);max-width:56ch}

/* backgrounds for rhythm */
.bg-paper{background:var(--paper)}
.bg-soft{background:var(--bg)}
.bg-mist{background:var(--teal-mist)}
.bg-navy{background:var(--navy);color:#e7eef5}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy .lead{color:#a9c0d6}
/* Buchungsband: kräftiger Markenton, damit der Termin der lauteste Teil der Seite ist */
.bg-book{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff}
.bg-book h2,.bg-book h3{color:#fff}
.bg-book .lead{color:rgba(255,255,255,.92)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:"Manrope";font-weight:700;font-size:1rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.btn svg{width:1.05em;height:1.05em;fill:currentColor}
.btn--primary{background:var(--teal);color:#fff;box-shadow:0 12px 26px -12px rgba(43,122,120,.7)}
.btn--navy{background:var(--navy);color:#fff}
.btn--ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--light{background:#fff;color:var(--navy)}
.btn--onteal{background:#fff;color:var(--teal-dark)}
.btn--outline-light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.65)}

.textlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--teal-dark)}
.textlink svg{width:.85em;height:.85em;fill:currentColor}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s,background .3s}
.nav.scrolled{background:#fff;border-color:var(--line);box-shadow:0 8px 26px -20px rgba(18,50,79,.5)}
.nav__inner{max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;min-width:0;text-decoration:none;white-space:nowrap;
  font-family:"Manrope",sans-serif;font-weight:700;font-size:1rem;letter-spacing:.01em;color:#882e30}
.brand__mark{height:44px;width:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:"Fraunces";font-weight:600;font-size:1.12rem;color:var(--navy);
  letter-spacing:.01em}
.brand__sub{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-dark);margin-top:.18rem}
.nav__links{display:flex;align-items:center;gap:.35rem;flex:none}
.nav__links a{padding:.55rem .85rem;border-radius:999px;font-weight:600;font-size:.97rem;
  color:var(--navy-soft);transition:color .2s,background .2s}
.nav__links a.active{color:var(--teal-dark);background:var(--teal-soft)}
.nav__cta{margin-left:.5rem}
.nav__cta.btn{padding:.7rem 1.2rem;white-space:nowrap}

/* Burger */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;border:0;background:transparent;cursor:pointer;padding:0}
.nav-burger span{display:block;width:24px;height:2.5px;border-radius:3px;background:var(--navy);
  margin-inline:auto;transition:transform .3s var(--ease),opacity .2s}
.nav-burger.is-open span{background:#fff}
.nav-burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Off-canvas mobile menu */
.mobile-nav{position:fixed;inset:0;z-index:105;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;padding:6vh 2rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none}
.mobile-nav__links{position:static;inset:auto;background:transparent;backdrop-filter:none;
  border:0;padding:0;box-shadow:none;display:flex;flex-direction:column;gap:.4rem}
/* Nur die direkten Menuepunkte gross setzen und einblenden. Vorher traf die
   Regel auch die Telefon- und E-Mail-Zeile im Fussblock: Die erschien ohne
   Verzoegerung und damit vor den Punkten darueber, was den Aufbau springen liess. */
.mobile-nav__links > a{font-family:"Manrope",sans-serif;font-size:1.6rem;font-weight:600;color:#eaf1f7;
  letter-spacing:-.01em;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mobile-nav__links > a,.mobile-nav__meta{opacity:0;transform:translateY(12px)}
.mobile-nav.is-open .mobile-nav__links > a,
.mobile-nav.is-open .mobile-nav__meta{animation:navIn .42s var(--ease) forwards}
.mobile-nav.is-open .mobile-nav__links > a:nth-child(1){animation-delay:.04s}
.mobile-nav.is-open .mobile-nav__links > a:nth-child(2){animation-delay:.08s}
.mobile-nav.is-open .mobile-nav__links > a:nth-child(3){animation-delay:.12s}
.mobile-nav.is-open .mobile-nav__links > a:nth-child(4){animation-delay:.16s}
.mobile-nav.is-open .mobile-nav__links > a:nth-child(5){animation-delay:.20s}
.mobile-nav.is-open .mobile-nav__links > a:nth-child(6){animation-delay:.24s}
.mobile-nav.is-open .mobile-nav__meta{animation-delay:.28s}
.mobile-nav__cta{color:var(--teal)!important;border-bottom-color:transparent!important}
.mobile-nav__meta{margin-top:2rem;color:#8fa8c0;font-size:.95rem;display:flex;flex-direction:column;gap:.35rem}
.mobile-nav__meta a{color:#cfe0ee;font-family:"Manrope";font-size:.98rem;font-weight:600;
  padding:0;border:0;letter-spacing:0}
@keyframes navIn{to{opacity:1;transform:none}}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;background:#f2f5fb;
  width:100%;height:650px;margin:66px 0 0}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__bg--d{left:50%;right:auto;width:min(100%,1280px);transform:translateX(-50%);object-fit:contain;object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.hero__bg--m{display:none;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(242,245,251,.98) 0%,rgba(242,245,251,.9) 30%,rgba(242,245,251,.5) 52%,rgba(242,245,251,0) 70%)}
.hero__inner{position:relative;z-index:2;max-width:1280px;margin-inline:auto;
  padding-inline:var(--pad-x);width:100%}
.hero__copy{max-width:min(560px,92%);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__logo{width:clamp(200px,22vw,300px);height:auto;margin-bottom:1rem}
.hero__title{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--navy);
  font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.1;margin:0 0 .55rem;letter-spacing:-.01em}
.hero__sub2{font-family:"Manrope",sans-serif;font-weight:500;color:var(--navy-soft);
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.5;margin:0 0 1.4rem;max-width:42ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.hero__meta{display:flex;flex-wrap:nowrap;justify-content:center;gap:1.3rem;margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(18,50,79,.16);width:max-content;max-width:100%}
.hero__meta div{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--navy);font-size:.84rem;white-space:nowrap}
.hero__meta svg{width:1.1em;height:1.1em;fill:var(--teal);flex:none}
.hero__figure{display:none}

/* Marquee-Band (unter Hero, Pflicht-Standard) */
.marquee{background:var(--teal);color:#fff;overflow:hidden;padding:.85rem 0}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__group span{font-family:"Fraunces";font-size:clamp(1rem,1.4vw,1.2rem);font-weight:500;
  padding:0 1.6rem;position:relative;white-space:nowrap}
.marquee__group span::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =====================================================================
   SERVICES GRID
   ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.svc__media{aspect-ratio:16/11;overflow:hidden;background:var(--teal-soft)}
.svc__media img{width:100%;height:100%;object-fit:cover}
.svc__media--icon{display:flex;align-items:center;justify-content:center}
.svc__media--icon svg{width:56px;height:56px}
.svc__body{padding:1.3rem 1.5rem 1.5rem}
.svc__ico{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:.85rem}
.svc__ico svg{width:22px;height:22px}
.svc h3{font-size:1.24rem;margin-bottom:.5rem}
.svc p{color:var(--muted);font-size:.98rem;margin:0}
/* icon colours */
.ic-teal{fill:var(--teal)} .ic-blue{fill:#3b5bdb} .ic-violet{fill:#7a49c9}
.ic-red{fill:#e0344b} .ic-amber{fill:#d98a00} .ic-navy{fill:var(--navy)}

.bg-navy .svc{background:var(--navy-2);border-color:rgba(255,255,255,.08)}
.bg-navy .svc h3{color:#fff}
.bg-navy .svc p{color:#a9c0d6}
.bg-navy .svc__ico{background:rgba(255,255,255,.08)}

/* =====================================================================
   SPLIT (text + image)
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
/* Bild auf Texthöhe, damit keine Spalte übersteht */
.split--fill{align-items:stretch}
.split--fill .member__photo{height:100%;aspect-ratio:auto;min-height:420px}
.split--rev .split__media{order:-1}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:5/4}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.9rem}
.split__list--cols{grid-template-columns:repeat(2,1fr);gap:1.2rem 2.6rem;max-width:none}
.split__list li{display:flex;gap:.8rem;align-items:flex-start;font-weight:500}
.split__list svg{width:1.35em;height:1.35em;fill:var(--teal);flex:none;margin-top:.15rem}
.bg-navy .split__list svg{fill:#5fc7c4}
.bg-navy .split__list li{color:#d5e2ee}

/* =====================================================================
   HOURS + MAP
   ===================================================================== */
.info-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
/* Spalten auf gleiche Höhe ziehen (Karte füllt die Zeile) */
.info-grid--stretch{align-items:stretch}
.info-grid--stretch>*{min-width:0}
.hours{list-style:none;padding:0;margin:1.6rem 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
.hours li:last-child{border-bottom:0}
.hours li.today{color:var(--teal-dark)}
.hours .day{color:var(--navy-soft);font-weight:600}
.hours .time{font-variant-numeric:tabular-nums}
.hours .closed{color:var(--muted);font-weight:600}
.contact-lines{display:grid;gap:1rem;margin-top:1.6rem}
/* Kontaktzeilen als volle Reihe unter einem Raster, statt als Anhängsel einer Spalte */
.contact-lines--row{grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.4rem}
.contact-lines--duo{grid-template-columns:repeat(2,1fr);gap:1.6rem}
.contact-lines a,.contact-lines div{display:flex;gap:.85rem;align-items:flex-start;color:var(--navy);font-weight:600}
.contact-lines svg{width:1.3em;height:1.3em;fill:var(--teal);flex:none;margin-top:.15rem}
.contact-lines span small{display:block;font-weight:600;color:var(--muted);font-size:.82rem;margin-top:.1rem}

/* Map click-to-load */
.map{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--shadow);background:var(--teal-mist)}
/* Karte füllt die Höhe der Nachbarspalte, statt kurz vorher abzubrechen */
.map--fill{aspect-ratio:auto;height:100%;min-height:380px}
/* Breite Karte über volle Sektionsbreite; mobil wieder kompakter, sonst nur ein Streifen */
.map--wide{aspect-ratio:16/7}
.map iframe{width:100%;height:100%;border:0;display:block}
.map__consent{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1rem;padding:2rem;
  background:linear-gradient(160deg,var(--teal-mist),#dceeed)}
.map__consent svg{width:44px;height:44px;fill:var(--teal)}
.map__consent p{color:var(--navy-soft);font-size:.92rem;max-width:34ch;margin:0}

/* Online-Terminreservierung (iframe) */
.otr{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:#fff;margin-top:1.8rem}
/* Höhe an den Buchungsdialog angepasst (Schritte laufen bei ~360 bis 580px) */
.otr iframe{display:block;width:100%;height:580px;border:0}
.otr__note{font-size:.85rem;color:var(--muted);margin:1rem 0 0;max-width:70ch}
.otr__note a{color:var(--teal-dark);font-weight:600}
.bg-book .otr{box-shadow:0 26px 60px -30px rgba(0,0,0,.55);border-color:rgba(255,255,255,.35)}
.bg-book .otr__note{color:rgba(255,255,255,.85)}
.bg-book .otr__note a{color:#fff;text-decoration:underline}
.bg-book.orb::before{background:rgba(255,255,255,.09)}
@media(max-width:640px){.otr iframe{height:700px}}

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;
  text-align:center;border-radius:var(--r-lg);padding:clamp(2.6rem,5vw,4rem) clamp(1.4rem,4vw,3rem);
  position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.09);top:-120px;right:-80px}

/* ---------- Dekokreis für Sektionen (gleiches Prinzip wie im CTA-Band) ---------- */
.orb{position:relative;overflow:hidden}
.orb>*{position:relative;z-index:1}
.orb::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(240px,32vw,440px);aspect-ratio:1;border-radius:50%;
  background:rgba(43,122,120,.055)}
.bg-navy.orb::before{background:rgba(255,255,255,.05)}
.bg-soft.orb::before{background:rgba(43,122,120,.07)}
.orb--tr::before{top:-14%;right:-7%}
.orb--tl::before{top:-15%;left:-8%}
.orb--br::before{bottom:-14%;right:-7%}
.orb--bl::before{bottom:-16%;left:-8%}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);position:relative}
.cta p{color:rgba(255,255,255,.9);max-width:52ch;margin:1rem auto 2rem;position:relative}
.cta__btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;position:relative}

/* =====================================================================
   PAGE HEADER (subpages)
   ===================================================================== */
.pagehead{padding-top:clamp(7rem,11vw,9.5rem);padding-bottom:clamp(2.6rem,5vw,4rem);
  background:
    radial-gradient(90% 90% at 90% 0%,rgba(43,122,120,.12),transparent 55%),
    var(--bg)}
.pagehead h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:600;max-width:18ch}
.pagehead .lead{margin-top:1.1rem}
.crumb{font-size:.9rem;color:var(--muted);margin-bottom:1rem;font-weight:600}
.crumb a:hover{color:var(--teal-dark)}

/* Leistungen detail rows */
.lst{display:grid;gap:1.1rem}
.lst__item{display:grid;grid-template-columns:280px 1fr;gap:1.6rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow-sm);
  align-items:center}
.lst__item--noimg{grid-template-columns:64px 1fr;align-items:start}
.lst__photo{border-radius:12px;overflow:hidden;align-self:stretch;min-height:190px;background:var(--teal-soft)}
.lst__photo img{width:100%;height:100%;object-fit:cover}
.lst__ico{display:flex;align-items:flex-start;justify-content:center;padding-top:.25rem}
.lst__ico svg{width:40px;height:40px}
.lst__item h3{font-size:1.35rem;margin-bottom:.5rem}
.lst__item p{color:var(--muted);margin:0}

/* Zigzag Bild-Text-Reihen (Leistungen) */
.zz{display:flex;flex-direction:column;gap:clamp(2.4rem,5vw,4.5rem)}
.zz__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center;scroll-margin-top:90px}
a.svc{display:block;color:inherit;text-decoration:none}
.zz__media{border-radius:var(--r-lg);overflow:hidden;background:var(--teal-mist);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.zz__media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.zz__row:nth-child(even) .zz__media{order:2}
.zz__body h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:.75rem}
.zz__body p{color:var(--muted);font-size:1.06rem;line-height:1.72;margin:0}
.zz__body p + p{margin-top:.8rem}
.zz__label{font-family:"Manrope";font-weight:700;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-dark);margin:1.2rem 0 .6rem}
.zz__body ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.zz__body li{position:relative;padding-left:1.55rem;color:var(--ink);line-height:1.5}
.zz__body li::before{content:"";position:absolute;left:.2rem;top:.55em;width:7px;height:7px;
  background:var(--teal);border-radius:2px;transform:rotate(45deg)}
.zz__cta{display:inline-flex;margin-top:1.4rem}

/* Willkommen-Sektion (Team + Begrüßung) */
/* Desktop: Foto links (Herr Vorat mittig), Text rechts auf dem Navy der Karte */
.welcome{position:relative;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--navy);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.welcome__img{width:100%;height:100%;min-height:100%;object-fit:cover;object-position:50% 20%;display:block}
.welcome__box{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,2.5vw,2rem);align-content:center;
  padding:clamp(2rem,4vw,3.6rem) clamp(1.6rem,3.5vw,3.2rem)}
.welcome__box-text{display:flex;flex-direction:column;gap:.8rem;max-width:58ch;color:#fff}
.welcome__box-text h2{color:#fff}
.welcome__box-text .eybadge{margin-bottom:0}
.welcome__box-cta{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center}

/* Praxis-Foto-Galerie */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.2rem}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;
  border-radius:var(--r);display:block;box-shadow:var(--shadow-sm)}
@media(max-width:720px){.gallery{grid-template-columns:1fr}}

/* Team-Raster */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.member__photo{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--teal-soft);box-shadow:var(--shadow-sm)}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.member h3{font-size:1.2rem;margin:.9rem 0 .2rem}
.member__role{color:var(--teal-dark);font-weight:600;font-size:.95rem;margin:0}
.member__qlabel{display:block;font-family:"Manrope";font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin:.95rem 0 .5rem}
.quali-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.quali-list li{position:relative;padding-left:1.2rem;color:var(--ink);font-size:.98rem;
  font-weight:600;line-height:1.4}
.quali-list li::before{content:"";position:absolute;left:.1rem;top:.52em;width:7px;height:7px;
  background:var(--teal);border-radius:2px;transform:rotate(45deg)}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.welcome__box-text .lead{color:#fff;font-weight:600}
.welcome__box-text p{color:#fff;margin:0;font-weight:500}
.welcome__box-cta .textlink{color:#fff;text-shadow:0 1px 8px rgba(6,14,22,.8)}
.welcome__box .eybadge{color:#b7f0ed;text-shadow:0 1px 8px rgba(6,14,22,.75)}
.welcome__box .eybadge::before{background:#b7f0ed}
@media(max-width:820px){
  .zz__row{grid-template-columns:1fr;gap:1.1rem}
  .zz__row:nth-child(even) .zz__media{order:0}
  /* Mobil: Bild oben, darunter ein Panel auf dem Navy der Karte.
     Textfarben bleiben hell, sonst dunkel auf dunkel (war der Bug). */
  .welcome{border-radius:var(--r);grid-template-columns:1fr}
  .welcome__img{height:auto}
  .welcome__box{gap:1.1rem;
    padding:1.5rem 1.3rem 1.7rem;
    background:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(255,255,255,0) 4rem)}
  .welcome__box-text{max-width:none;text-shadow:none;gap:.7rem}
  .welcome__box-text h2{text-shadow:none;font-size:clamp(1.5rem,6.4vw,1.95rem)}
  .welcome__box-cta{align-items:center;justify-content:center;width:100%;margin-top:.3rem}
  .welcome__box-cta .btn{width:100%;max-width:300px;justify-content:center}
  .welcome__box-cta .textlink{text-shadow:none}
}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;counter-reset:s}
.step{position:relative;padding-top:.5rem}
.step__n{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;
  font-family:"Fraunces";font-size:1.25rem;display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem}
.step h3{font-size:1.2rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.97rem;margin:0}

/* Team cards */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.member{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.member__photo{aspect-ratio:4/5;background:
  repeating-linear-gradient(135deg,var(--teal-mist),var(--teal-mist) 14px,#e6f1f0 14px,#e6f1f0 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--teal-dark)}
.member__photo svg{width:46px;height:46px;fill:var(--teal);opacity:.7}
.member__photo span{font-size:.82rem;font-weight:700;letter-spacing:.05em}
.member__photo img{width:100%;height:100%;object-fit:cover}
.member__body{padding:1.3rem 1.4rem 1.5rem}
.member__body h3{font-size:1.25rem}
.member__role{color:var(--teal-dark);font-weight:700;font-size:.9rem;margin:.25rem 0 .6rem}
.member__body p{color:var(--muted);font-size:.95rem;margin:0}

/* Values row */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.value{background:var(--navy-2);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:1.5rem 1.4rem;
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico title" "text text";
  column-gap:.75rem;row-gap:.55rem;align-items:center}
.value__ico{grid-area:ico;margin:0;line-height:0}
.value__ico svg{width:30px;height:30px}
.value h3{grid-area:title;font-size:1.1rem;margin:0}
.value p{grid-area:text;color:var(--muted);font-size:.93rem;margin:0}
.bg-navy .value p{color:#a9c0d6}

/* =====================================================================
   CONTACT FORM
   ===================================================================== */
.form{display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-weight:700;font-size:.9rem;color:var(--navy)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;
  padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(43,122,120,.14)}
.field textarea{resize:vertical;min-height:130px}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;cursor:pointer;
  font-size:.93rem;line-height:1.55;color:var(--muted);font-weight:400}
.check input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--teal);cursor:pointer;flex:none}
.check a{color:var(--teal-dark);font-weight:600;text-decoration:underline}
.field__hint{font-size:.85rem;color:var(--muted);margin:.1rem 0 0;line-height:1.5}
.form__note{font-size:.85rem;color:var(--muted)}
.form__note a{color:var(--teal-dark);font-weight:600}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--navy);color:#b9cbdb;padding:clamp(3rem,5vw,4.5rem) 0 2rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1fr;gap:2rem}
.footer__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footer__brand img{height:46px;background:#fff;padding:5px;border-radius:10px}
.footer__brand b{font-family:"Manrope",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:#fff}
.footer p{color:#93a9be;font-size:.95rem}
.footer h2{color:#fff;font-family:"Manrope";font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer ul a,.footer__col a{color:#b9cbdb;font-size:.97rem}
.footer ul a:hover,.footer__col a:hover{color:#5fc7c4}
.footer__col a{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.6rem}
.footer__col svg{width:1.05em;height:1.05em;fill:#5fc7c4;flex:none;margin-top:.2rem}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.88rem;color:#8ba2b8}
.footer__bottom a{color:#8ba2b8}
.footer__bottom a:hover{color:#b9cbdb}

/* Antippbare Ziele auf mindestens 24px Hoehe bringen (WCAG 2.5.8).
   Ausgenommen bleiben Links, die mitten in einem Satz stehen. */
.footer ul li a,.footer__bottom a,.footer__cc,.crumb a,.embed__alt{
  display:inline-block;padding-top:4px;padding-bottom:4px}
.footer__cc{background:none;border:0;padding-inline:0;cursor:pointer;color:#8ba2b8;
  font-family:"Manrope",sans-serif;font-size:inherit;text-decoration:underline}
.footer__cc:hover{color:#b9cbdb}
.footer ul .footer__cc{color:#b9cbdb;font-size:.97rem;text-decoration:none;text-align:left;font-weight:400}
.footer ul .footer__cc:hover{color:#5fc7c4}

/* Rechtstexte der IT-Recht Kanzlei (iframe, wird vom Snippet eingesetzt) */
.legaltext{max-width:80ch}
.legaltext iframe{width:100%;border:0;display:block}
.legaltext a{color:var(--teal-dark);font-weight:600;text-decoration:underline}
.legaltext h1,.legaltext h2,.legaltext h3{margin:1.8rem 0 .6rem;font-size:1.25rem}
.legaltext h1:first-child,.legaltext h2:first-child{margin-top:0}

/* =====================================================================
   FAB (contact)
   ===================================================================== */

/* =====================================================================
   COOKIE BANNER
   ===================================================================== */
/* =====================================================================
   CONSENT (Banner, Einstellungs-Dialog, Platzhalter fuer Fremdinhalte)
   ===================================================================== */
.cc{position:fixed;left:clamp(12px,3vw,24px);bottom:clamp(12px,3vw,24px);z-index:97;
  width:min(400px,calc(100vw - 2*clamp(12px,3vw,24px)));background:#fff;
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 50px -20px rgba(18,50,79,.5);padding:1.3rem 1.4rem;
  transform:translateY(160%);transition:transform .5s var(--ease)}
.cc.show{transform:none}
.cc__title{margin:0 0 .5rem;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.15rem;color:var(--navy);line-height:1.15}
.cc p{font-size:.9rem;color:var(--muted);margin:0 0 1rem;line-height:1.55}
.cc p a{color:var(--teal-dark);font-weight:600;text-decoration:underline}
.cc__btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cc__btns .btn{padding:.72rem .9rem;font-size:.92rem;width:100%}
.cc__link{display:block;margin:.8rem auto 0;background:none;border:0;padding:.2rem;
  font-family:"Manrope",sans-serif;font-size:.86rem;font-weight:700;color:var(--muted);
  text-decoration:underline;cursor:pointer}
.cc__link:hover{color:var(--teal-dark)}

.ccm{position:fixed;inset:0;z-index:120;background:rgba(9,20,32,.55);
  display:flex;align-items:center;justify-content:center;padding:1.1rem}
.ccm[hidden]{display:none}
.ccm__panel{background:#fff;border-radius:var(--r-lg);width:min(620px,100%);
  max-height:90vh;overflow:auto;padding:clamp(1.4rem,3vw,2.1rem);
  box-shadow:0 30px 70px -25px rgba(9,20,32,.7)}
.ccm__panel h3{font-size:1.5rem;margin:0}
.ccm__intro{color:var(--muted);font-size:.93rem;margin:.6rem 0 1.2rem}
.ccm__row{display:flex;gap:1.2rem;align-items:flex-start;justify-content:space-between;
  padding:1rem 0;border-top:1px solid var(--line)}
.ccm__row b{display:block;color:var(--navy);font-size:1rem;margin-bottom:.25rem}
.ccm__row span{color:var(--muted);font-size:.88rem;line-height:1.55;display:block}
.ccm__fixed{flex:none;font-size:.8rem;font-weight:700;color:var(--teal-dark);
  background:var(--teal-soft);border-radius:999px;padding:.35rem .75rem;white-space:nowrap}
.ccm__btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.ccm__foot{margin:1rem 0 0;font-size:.85rem;color:var(--muted)}
.ccm__foot a{color:var(--teal-dark);font-weight:600;text-decoration:underline}

/* Schalter: sichtbare Checkbox statt reiner CSS-Attrappe, bleibt bedienbar per Tastatur */
.ccsw{flex:none;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer}
.ccsw input{position:absolute;opacity:0;width:1px;height:1px}
.ccsw__track{width:46px;height:26px;border-radius:999px;background:#cfdae3;
  position:relative;transition:background .22s var(--ease);flex:none}
.ccsw__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,50,79,.35);
  transition:transform .22s var(--ease)}
.ccsw input:checked + .ccsw__track{background:var(--teal)}
.ccsw input:checked + .ccsw__track::after{transform:translateX(20px)}
.ccsw input:focus-visible + .ccsw__track{outline:2px solid var(--teal-dark);outline-offset:3px}
.ccsw__txt{font-size:.82rem;font-weight:700;color:var(--navy-soft);white-space:nowrap}

/* Platzhalter, solange ein Fremdinhalt nicht freigegeben ist */
.embed{position:relative;width:100%;height:100%}
.embed iframe{width:100%;height:100%;border:0;display:block}
.embed__ph{height:100%;min-height:300px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:.7rem;
  padding:clamp(1.4rem,4vw,2.4rem);background:var(--teal-mist)}
.embed__ico svg{width:34px;height:34px;fill:var(--teal);opacity:.85}
.embed__ph h4{margin:0;font-family:"Fraunces",Georgia,serif;font-size:1.2rem;color:var(--navy)}
.embed__ph p{margin:0;max-width:44ch;color:var(--navy-soft);font-size:.92rem;line-height:1.55}
.embed__ph .btn{margin-top:.35rem}
.embed__always{display:inline-flex;align-items:center;gap:.5rem;font-size:.84rem;
  color:var(--muted);cursor:pointer}
.embed__always input{width:17px;height:17px;accent-color:var(--teal);cursor:pointer}
.embed__alt{font-size:.84rem;color:var(--teal-dark);font-weight:700;text-decoration:underline}
.map .embed{position:absolute;inset:0}
.otr .embed{min-height:520px}
.otr .embed iframe{height:580px}
@media(max-width:520px){
  .cc__btns{grid-template-columns:1fr}
  .ccm__row{flex-direction:column;gap:.7rem}
}

/* =====================================================================
   REVEAL (scroll)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* body lock when nav open: hide overlays */
body.nav-locked{overflow:hidden}
body.nav-locked .cookie,body.nav-locked .book-fab{display:none!important}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .hero__inner,.split,.info-grid{grid-template-columns:1fr}
  .contact-lines--row,.split__list--cols{grid-template-columns:repeat(2,1fr)}
  .split--fill .member__photo{min-height:0;aspect-ratio:4/5}
  /* min-height MUSS hier weg: mit aspect-ratio wird es zur Mindestbreite (380*4/3=507px) */
  .map--fill{aspect-ratio:4/3;height:auto;min-height:0}
  .split--rev .split__media{order:0}
  .hero__visual{max-width:520px;margin-inline:auto}
  .svc-grid,.steps,.team-grid{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:1.8rem 2rem}
}
/* Fünf Menüpunkte plus Button brauchen Platz: unter 1100px enger setzen */
@media(max-width:1100px){
  .nav__links{gap:.1rem}
  .nav__links a{padding:.5rem .6rem;font-size:.92rem}
  .nav__cta.btn{padding:.66rem 1rem;font-size:.94rem}
  .brand{font-size:.94rem}
}
@media(max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav-burger{display:flex;position:fixed;top:clamp(8px,1.6vw,14px);right:1.2rem;z-index:106}
}
@media(max-width:640px){
  .svc-grid,.steps,.team-grid,.values,.form__row,.footer__grid{grid-template-columns:1fr}
  .contact-lines--row,.contact-lines--duo,.split__list--cols{grid-template-columns:1fr;gap:1rem}
  .map--wide{aspect-ratio:4/3}
  .hero{height:auto;min-height:600px;max-width:none;width:100%;margin:0;overflow:hidden;
    display:flex;align-items:flex-start;padding:5.5rem 0 2.5rem;background:#f4f7fb}
  .hero__bg--d{display:none}
  .hero__bg--m{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center top;z-index:0}
  .hero::after{display:block;background:linear-gradient(180deg,rgba(244,247,251,.66) 0%,rgba(244,247,251,.42) 48%,rgba(244,247,251,.08) 100%)}
  .hero__logo{width:min(280px,74%)}
  .hero__copy{margin-inline:auto}
  .hero__cta{flex-direction:column;align-items:center;width:100%}
  .hero__cta .btn{width:min(265px,80%);justify-content:center}
  .hero__sub2{display:block}
  .hero__meta{display:none}
  .hero__figure{display:none}
  .brand__sub{display:none}
  .nav:not(.scrolled){background:transparent;backdrop-filter:none;box-shadow:none;border-bottom-color:transparent}
  .nav__inner{height:62px;padding:0 1.25rem;align-items:center}
  .nav-burger{top:0;height:62px;right:1.25rem;justify-content:center}
  .lst__item{grid-template-columns:1fr;gap:.9rem}
  .cookie{left:12px;right:12px;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .mobile-nav__links > a,.mobile-nav__meta{opacity:1;transform:none;animation:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   CTA „Online reservieren" — glühender, rotierender Rand (Aufmerksamkeit)
   ===================================================================== */
@property --glowang{syntax:"<angle>";initial-value:0deg;inherits:false}
.btn--glow{position:relative;z-index:0;animation:btnPulse 4s ease-in-out infinite}
.btn--glow::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;opacity:.75;
  background:conic-gradient(from var(--glowang),
    var(--teal), #7fcecb, var(--teal-dark), var(--teal));
  animation:btnGlow 5.5s linear infinite;
}
@keyframes btnGlow{to{--glowang:360deg}}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(43,122,120,0)}
  50%{box-shadow:0 0 11px 0 rgba(95,199,196,.32)}
}
@media (prefers-reduced-motion: reduce){
  .btn--glow{animation:none}
  .btn--glow::before{animation:none}
}

/* CTAs auf Mobil/Tablet immer zentrieren */
@media(max-width:820px){
  .welcome__actions{justify-content:center;text-align:center}
  .cta-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;text-align:center;width:100%}
  .zz__cta{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
}

/* Prozess-Schritte: Nummern mit Verbindungslinie (nur 3-spaltig / Desktop) */
@media(min-width:981px){
  .step:not(:last-child)::after{content:"";position:absolute;top:30px;
    left:22px;right:calc(-1.4rem - 22px);height:2px;background:var(--teal);opacity:.3;z-index:0}
  .step__n{position:relative;z-index:1}
}

/* =====================================================================
   Lightbox — Bilder anklickbar zum Reinzoomen
   ===================================================================== */
.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(12,26,38,.93);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);cursor:zoom-out}
.lightbox__close{position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;
  font-size:1.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion: reduce){.lightbox{transition:none}}

/* =====================================================================
   UTILITIES
   Ersetzen die frueheren style="..."-Attribute im HTML (Wartbarkeit +
   SEOptimer-Punkt "Inline-Styles vermeiden). Bewusst am Dateiende, damit
   sie gegen gleichspezifische Komponentenregeln gewinnen.
   ===================================================================== */
.u-mt-0{margin-top:0}
.u-mt-s{margin-top:.9rem}
.u-mt-m{margin-top:1rem}
.u-mt-l{margin-top:2rem}
.u-mt-xl{margin-top:2.2rem}
.u-mt-2xl{margin-top:2.4rem}
.u-mt-3xl{margin-top:2.6rem}
.u-mb-l{margin-bottom:1.8rem}
.u-mw-24{max-width:24ch}
.u-mw-52{max-width:52ch}
.u-mw-56{max-width:56ch}
.u-mw-58{max-width:58ch}
.u-mw-60{max-width:60ch}
.u-mw-62{max-width:62ch}
.u-ico-mint{fill:#5fc7c4}
.u-inline{display:inline}
.u-h2-sm{font-size:clamp(1.6rem,3vw,2.2rem)}
.u-fs-l{font-size:1.4rem}
.u-fs-m{font-size:1.2rem}
.u-center{text-align:center}
.u-flex{display:flex}
.u-wrap{flex-wrap:wrap}
.u-gap-m{gap:1rem}
.u-items-center{align-items:center}
.u-items-start{align-items:start}
.u-justify-center{justify-content:center}
.u-muted{color:var(--muted)}
.u-m-note1{margin:.7rem 0 0}
.u-m-note2{margin:.6rem 0 1.4rem}

/* Sprunglink fuer Tastatur- und Screenreader-Nutzung */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal-dark);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 10px 0;font-family:"Manrope",sans-serif;font-weight:700}
.skip:focus{left:0}

/* Sichtbarer Fokusring in Markenfarbe statt des Browser-Standards.
   Nur :focus-visible, damit Mausklicks keinen Ring hinterlassen. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,img.zoomable:focus-visible{
  outline:3px solid var(--teal-dark);outline-offset:3px;border-radius:4px}
.bg-navy a:focus-visible,.bg-book a:focus-visible,.footer a:focus-visible,
.footer button:focus-visible,.mobile-nav a:focus-visible,.welcome__box a:focus-visible{
  outline-color:#7fd3d0}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--teal-dark);outline-offset:2px}

/* Titel der Consent-Platzhalter: bewusst kein Heading-Tag, damit die
   Ueberschriften-Ebenen der Seite nicht durchbrochen werden */
.embed__title{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.2rem;line-height:1.15;color:var(--navy)}

/* Honigtopf: fuer Menschen unsichtbar, aber nicht display:none,
   damit Bots das Feld fuer echt halten */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__error{background:#fdf3ec;border-left:3px solid #c2703a;border-radius:0 10px 10px 0;
  padding:.9rem 1.2rem;margin:0 0 1.2rem;color:#8a4a1f;font-size:.95rem;line-height:1.55}

/* =====================================================================
   BUCHUNGS-PILLE
   Dauerhaft sichtbarer Aufruf zur Terminreservierung, unten rechts.
   Wer sie nicht braucht, schiebt sie an den Rand; ein Greifer holt sie
   zurueck. Die Entscheidung bleibt im Browser gespeichert.
   ===================================================================== */
.book-fab[hidden]{display:none}
.book-fab{position:fixed;right:clamp(16px,2.4vw,22px);bottom:clamp(16px,2.4vw,22px);
  z-index:96;display:flex;align-items:stretch;background:var(--teal);
  border-radius:999px;box-shadow:0 14px 30px -10px rgba(43,122,120,.7);
  transition:transform .42s var(--ease),background .25s,box-shadow .25s}
.book-fab__main{display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.1rem .95rem 1.35rem;color:#fff;font-family:"Manrope",sans-serif;
  font-size:1rem;font-weight:700;border-radius:999px 0 0 999px;transition:background .2s}
.book-fab__main:hover,.book-fab__main:focus-visible{background:rgba(255,255,255,.12)}
.book-fab__main svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.book-fab__close{display:inline-flex;align-items:center;justify-content:center;
  align-self:stretch;width:40px;padding:0;background:transparent;color:rgba(255,255,255,.85);
  border:0;border-left:1px solid rgba(255,255,255,.3);border-radius:0 999px 999px 0;
  cursor:pointer;transition:background .2s,color .2s}
.book-fab__close:hover,.book-fab__close:focus-visible{background:rgba(255,255,255,.16);color:#fff}
.book-fab__close svg{width:17px;height:17px;fill:currentColor}

/* Eingeklappt: an den rechten Rand geschoben, nur der Greifer bleibt stehen */
.book-fab.is-tucked{transform:translateX(calc(100% - 36px));background:transparent;
  box-shadow:none;border-radius:16px 0 0 16px}
.book-fab.is-tucked .book-fab__main,.book-fab.is-tucked .book-fab__close{display:none}
.book-fab.is-tucked .book-fab__handle{display:inline-flex}
.book-fab__handle{display:none;align-items:center;justify-content:flex-start;
  width:54px;height:54px;padding-left:11px;background:var(--teal);color:#fff;border:0;
  border-radius:16px 0 0 16px;cursor:pointer;box-shadow:-6px 8px 22px -8px rgba(43,122,120,.75);
  transition:background .25s,padding-left .25s}
.book-fab__handle svg{width:22px;height:22px;fill:currentColor}
.book-fab__handle:hover,.book-fab__handle:focus-visible{background:var(--teal-dark);padding-left:7px}


@media(max-width:640px){
  .book-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .book-fab__main{font-size:.94rem;padding:.8rem .9rem .8rem 1.1rem}
  .book-fab__close{width:36px}
}
@media(prefers-reduced-motion:reduce){
  .book-fab,}