/* =========================================================
   Ordination Dr. Denisa Weis — Entwurf im Stil von helloprimary.care
   ---------------------------------------------------------
   Aufbau und Gestaltung nach der Referenz (Vollbild-Foto im
   Hero, grosse zweifarbige Ueberschriften, schwebende Info-
   Karten, Kennzahlen-Band, Schritt-Reiter, Team-Karussell,
   FAQ im Zweispalter, farbige Abschluss-Karte im Footer).
   Farben, Schrift und Texte stammen von der bestehenden Seite.
   ========================================================= */

:host{
  /* Flaechen */
  --paper:   #FCFBF9;
  --white:   #FFFFFF;
  --panel:   #F5F4F0;
  --panel-2: #EFEDE7;

  /* Schrift */
  --ink:     #131A2B;
  --ink-2:   #3B4457;
  --muted:   #5E6879;
  --soft:    #7A8191;   /* zweiter Ton grosser Ueberschriften (nur ab ~28px) */

  --line:    rgba(19,26,43,.11);
  --line-2:  rgba(19,26,43,.2);

  /* Hausfarben der bestehenden Website */
  --accent:       #5F68B0;
  --accent-deep:  #474F8C;
  --accent-light: #838CC5;
  --accent-soft:  #EEEFF8;

  --gold:      #E8A93A;
  --gold-deep: #D2932A;
  --gold-soft: #FDF4E3;
  --gold-ink:  #2E1F04;
  --gold-text: #9A6512;   /* Gold als Schrift auf hellem Grund: 4,9:1 Kontrast (gold-deep nur 2,6:1) */

  --open:      #1C6B45;
  --open-soft: #E6F2EC;
  --shut:      #9C3B2A;
  --shut-soft: #FAEBE7;

  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Typo-Skala (Referenz: sehr grosse Titel, enge Laufweite) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lead:  clamp(16px, 1.2vw, 18px);
  --fs-h3:    clamp(19px, 1.5vw, 22px);
  --fs-h2s:   clamp(23px, 1.9vw, 28px);
  --fs-h2:    clamp(28px, 2.8vw, 40px);
  --fs-hero:  clamp(32px, 3.4vw, 50px);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --wrap: 1180px;
  --pad: clamp(18px, 4.5vw, 64px);
  --sec: clamp(40px, min(5vw, 8vh), 72px);
  --bar-h: 34px;
  --nav-h: 64px;
  --head-h: calc(var(--bar-h) + var(--nav-h));

  --ease: cubic-bezier(.22,1,.36,1);
  --shadow-card: 0 1px 2px rgba(19,26,43,.06), 0 18px 40px -18px rgba(19,26,43,.28);
  --shadow-img:  0 30px 60px -30px rgba(19,26,43,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
/* Safari: Grid-/Flex-Kinder duerfen schmaler als ihr Inhalt werden, Bilder blaehen keine Spalte auf. */
.wrap > *, [class*="grid"] > *, .vision > *, .contact > *, .faq > *, .jstep > *, .media-split > *, .split-head > *,
.post > *, .cv-cols > *, .crossband > *, .stats__row > *, .checks > li > *,
.facts-grid > *, .gallery > *, .float-media > *, .jstep__media > *, .media-split__img > *{ min-width:0; }
img, picture, figure{ max-width:100%; }
h1, h2, h3, .statement, .answer{ overflow-wrap:break-word; }
@media (max-width: 720px){ h1, h2, h3, .statement{ -webkit-hyphens:auto; hyphens:auto; } }
.pw-root{ overflow-wrap:break-word; }
.pw-root{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 16px); }
.pw-root{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-md); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
picture{ display:contents; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:calc(var(--wrap) + 2 * var(--pad)); margin:0 auto; padding:0 var(--pad); }
.wrap--narrow{ max-width:calc(820px + 2 * var(--pad)); }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-sm); }
.skip:focus{ left:12px; top:12px; }

/* ---------- Kleine Bausteine ---------- */
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px;
}

.accent-word{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:11px 22px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:var(--fs-base); font-weight:600; letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold); color:var(--gold-ink); }
.btn--gold:hover{ background:var(--gold-deep); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#232c44; }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--line:hover{ border-color:var(--ink); }
.btn--glass{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn--glass:hover{ background:rgba(255,255,255,.24); }
.btn--sm{ min-height:38px; padding:8px 16px; font-size:var(--fs-sm); }
.btn--block{ width:100%; }

.link-arrow{ font-weight:600; color:var(--accent); text-decoration:none; font-size:var(--fs-base); }
.link-arrow:hover{ text-decoration:underline; text-underline-offset:3px; }

.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  font-size:var(--fs-sm); font-weight:600; background:var(--panel); color:var(--ink-2);
}
.status__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.status.is-open{ background:var(--open-soft); color:var(--open); }
.status.is-open .status__dot{ animation:pulse 2s infinite; }
.status.is-shut{ background:var(--shut-soft); color:var(--shut); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(28,107,69,.45);} 70%{ box-shadow:0 0 0 8px rgba(28,107,69,0);} 100%{ box-shadow:0 0 0 0 rgba(28,107,69,0);} }

.tag{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:var(--fs-xs); font-weight:600; background:var(--open-soft); color:var(--open); }
.tag--private{ background:var(--accent-soft); color:var(--accent-deep); }

/* Einblenden beim Scrollen */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0s); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } .pw-root{ scroll-behavior:auto; } }

/* =========================================================
   KOPF: Hinweisleiste + Navigation (fixiert)
   ========================================================= */
.site-head{ position:fixed; inset:0 0 auto 0; z-index:60; }
.topbar{
  height:var(--bar-h); background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; padding:0 48px;
  font-size:13px; font-weight:500; position:relative;
}
.topbar a{ color:#fff; text-decoration:none; display:inline-flex; gap:8px; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar a:hover span{ text-decoration:underline; text-underline-offset:3px; }
.topbar.is-notice{ background:var(--gold); color:var(--gold-ink); }
.topbar.is-notice a, .topbar.is-notice p{ color:var(--gold-ink); }
.topbar p{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__x{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:0; font-size:20px; line-height:1; cursor:pointer; width:32px; height:32px; color:inherit; }

.nav{
  height:var(--nav-h); color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s;
}
.nav__in{ height:100%; display:flex; align-items:center; gap:28px; max-width:none; padding:0 clamp(18px, 2.6vw, 40px); }
.brand{ display:flex; align-items:center; flex:none; }
.brand__logo{ height:32px; width:auto; transition:filter .35s; }
.nav__links{ display:flex; gap:20px; font-size:var(--fs-sm); font-weight:500; }
.nav__links a{ text-decoration:none; position:relative; padding:6px 0; white-space:nowrap; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ font-weight:600; }
.nav__actions{ margin-left:auto; display:flex; align-items:center; gap:22px; }
.nav__tel{ font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap; }
.nav__actions .btn{ white-space:nowrap; }
.nav__tel:hover{ text-decoration:underline; text-underline-offset:3px; }
.nav__burger{ display:none; margin-left:auto; width:44px; height:44px; border:0; background:none; cursor:pointer; position:relative; }
.nav__burger span{ position:absolute; left:11px; right:11px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav__burger span:nth-child(1){ top:16px; } .nav__burger span:nth-child(2){ top:21px; } .nav__burger span:nth-child(3){ top:26px; }
.menu-open .nav__burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.menu-open .nav__burger span:nth-child(2){ opacity:0; }
.menu-open .nav__burger span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Ueber dunklem Foto: transparent, weisse Schrift, Logo weiss */
.on-dark .nav:not(.is-solid){ color:#fff; }
.on-dark .nav:not(.is-solid) .brand__logo{ filter:brightness(0) invert(1); }
.on-dark .nav:not(.is-solid) .btn--dark{ background:var(--gold); color:var(--gold-ink); }
.nav.is-solid{ background:rgba(252,251,249,.94); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 1px 0 var(--line); }

/* Mobiles Menue */
.menu{
  position:fixed; inset:var(--head-h) 0 0 0; z-index:55; background:var(--paper);
  padding:28px var(--pad) 40px; display:flex; flex-direction:column; gap:6px;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  overflow-y:auto;
}
.menu-open .menu{ opacity:1; transform:none; pointer-events:auto; }
.menu a:not(.btn){ font-size:30px; font-weight:600; letter-spacing:-.02em; text-decoration:none; padding:8px 0; border-bottom:1px solid var(--line); }
.menu__cta{ display:grid; gap:10px; margin-top:24px; }
.menu-open .site-head .nav{ background:var(--paper); color:var(--ink); }
.menu-open .site-head .brand__logo{ filter:none !important; }

main{ display:block; }
.page-light main{ padding-top:var(--head-h); }

/* =========================================================
   HERO mit Vollbild-Foto
   ========================================================= */
.hero{
  position:relative; min-height:min(100svh, 1200px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--ink);
}
.hero__bg{ position:absolute; inset:0; margin:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:heroZoom 2.4s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:none; } }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(19,26,43,.86) 0%, rgba(19,26,43,.55) 30%, rgba(19,26,43,.08) 62%),
    linear-gradient(90deg, rgba(19,26,43,.62) 0%, rgba(19,26,43,.3) 42%, rgba(19,26,43,0) 66%),
    linear-gradient(180deg, rgba(19,26,43,.45) 0%, rgba(19,26,43,0) 22%);
}
.hero__in{ position:relative; width:100%; padding-top:calc(var(--head-h) + 40px); padding-bottom:clamp(48px, 9vh, 110px); }
.hero__text{ max-width:620px; }
.hero .eyebrow{ color:rgba(255,255,255,.78); }
.hero__title{ font-size:var(--fs-hero); line-height:.98; letter-spacing:-.035em; font-weight:600; }
.hero__title em{ font-style:normal; color:var(--gold); }
.hero__sub{ margin-top:18px; font-size:var(--fs-lead); line-height:1.38; font-weight:500; color:rgba(255,255,255,.88); max-width:46ch; letter-spacing:-.01em; }
.hero__cta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
.hero__note{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(19,26,43,.42); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:var(--fs-sm); font-weight:500; color:rgba(255,255,255,.92); max-width:100%; }
.hero__note svg{ flex:none; opacity:.85; }
.hero__note a{ color:#fff; font-weight:600; text-decoration:none; white-space:nowrap; }
.hero__note a:hover{ text-decoration:underline; text-underline-offset:3px; }
.hero__chips{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; font-size:var(--fs-sm); font-weight:500; color:rgba(255,255,255,.82); }
.hero__chips li{ display:flex; align-items:center; gap:8px; }
.hero__chips svg{ color:var(--gold); }

/* =========================================================
   HELLER SEITENKOPF (Unterseiten)
   ========================================================= */
.pagehead{ padding:clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 48px); }
.pagehead__grid{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:48px; align-items:start; }
.pagehead h1{ font-size:var(--fs-hero); line-height:.98; letter-spacing:-.035em; }
.pagehead__lede{ font-size:var(--fs-lead); line-height:1.45; color:var(--muted); letter-spacing:-.01em; }
.pagehead__lede + .chips{ margin-top:24px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.chips li{ padding:7px 14px; border-radius:999px; background:var(--panel); font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); }
.pagehead h1 span{ color:var(--soft); }
.pagehead .hero__cta{ margin-top:28px; }

/* =========================================================
   ABSCHNITTE
   ========================================================= */
.section{ padding:var(--sec) 0; }
.section--panel{ background:var(--panel); }
.section--white{ background:var(--white); }

.big-title{ font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.035em; }
.mid-title{ font-size:var(--fs-h2s); line-height:1.12; letter-spacing:-.02em; }

.split-head{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px; align-items:end; margin-bottom:clamp(22px, 2.6vw, 36px); }
.split-head .lede{ font-size:var(--fs-md); color:var(--muted); max-width:46ch; justify-self:end; }
.lede{ font-size:var(--fs-md); color:var(--muted); line-height:1.6; }
.center-head{ text-align:center; margin:0 auto clamp(22px, 2.6vw, 36px); max-width:820px; }
.center-head .lede{ margin:16px auto 0; max-width:60ch; }

.prose p{ margin:0 0 1.05em; color:var(--ink-2); }
.prose p:last-child{ margin-bottom:0; }
.prose a{ color:var(--accent); font-weight:600; }
.prose h2{ font-size:var(--fs-h2s); margin:1.6em 0 .55em; }
.prose ul{ padding-left:1.2em; margin:0 0 1.1em; color:var(--ink-2); }
.prose li{ margin:.3em 0; }

/* ---------- Vision / Leistungen: Statement + Bild mit schwebenden Karten ---------- */
.vision{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(36px, 5vw, 80px); align-items:start; }
.statement{ font-size:clamp(21px, 1.8vw, 27px); line-height:1.24; letter-spacing:-.022em; font-weight:600; }
.statement span{ color:var(--soft); }
.vision__left{ position:sticky; top:calc(var(--head-h) + 40px); }
.vision__left .btn{ margin-top:34px; }

.float-media{ position:relative; margin:0 0 0 0; }
.float-media__img{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; box-shadow:var(--shadow-img); }
.float-media__img img{ width:100%; height:100%; object-fit:cover; }
.fcard{
  position:absolute; background:rgba(255,255,255,.96); color:var(--ink); border-radius:var(--r);
  box-shadow:var(--shadow-card); padding:13px 15px; min-width:190px; max-width:250px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.fcard__label{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); margin-bottom:8px; }
.fcard__label--muted{ color:var(--muted); }

.fcard__title{ font-weight:600; font-size:var(--fs-base); line-height:1.3; }
.fcard__text{ font-size:var(--fs-sm); color:var(--muted); line-height:1.4; margin-top:4px; }

.fcard__list{ list-style:none; display:grid; gap:9px; margin-top:4px; }
.fcard__list li{ display:flex; gap:10px; align-items:center; font-size:var(--fs-sm); font-weight:600; }
.fcard__list svg{ color:var(--accent); flex:none; }

.fcard--tl{ top:-28px; left:clamp(-64px, -4.4vw, -24px); }
.fcard--br{ bottom:-34px; right:clamp(-56px, -3.6vw, -20px); }
.fcard--bl{ bottom:-34px; left:clamp(-64px, -4.4vw, -24px); }
.fcard--tr{ top:-28px; right:clamp(-56px, -3.6vw, -20px); }

.fcard .status{ margin-top:2px; font-size:12.5px; padding:5px 11px; white-space:nowrap; }
.js .fcard{ opacity:0; transform:translateY(14px) scale(.98); transition:opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s; }
.js .in .fcard, .js .fcard.in{ opacity:1; transform:none; }

/* Zeilen mit Haken (Referenz: "A doctor who truly knows you ...") */
.checks{ list-style:none; margin-top:clamp(28px, 3vw, 40px); }
.checks > li{ display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:16px; padding:14px 0; border-top:1px solid var(--line); align-items:start; }
.checks > li:last-child{ border-bottom:1px solid var(--line); }
.check-ico{ width:24px; height:24px; border-radius:50%; border:1.6px solid var(--ink); display:grid; place-items:center; margin-top:2px; }
.check-ico svg{ width:12px; height:12px; }
.checks h3{ font-size:17px; letter-spacing:-.01em; margin-bottom:6px; }
.checks p{ color:var(--muted); font-size:var(--fs-base); }
.checks .tag{ margin-top:2px; white-space:nowrap; }
.checks__more{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; }
.checks__links{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.checks__links a{ display:inline-flex; flex-direction:column; padding:9px 14px; border-radius:var(--r-sm); background:var(--panel); text-decoration:none; font-size:var(--fs-sm); font-weight:600; line-height:1.3; }
.checks__links a span{ font-weight:400; font-size:12px; color:var(--muted); }
.checks__links a:hover{ background:var(--panel-2); }

.icon-ring{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }

/* ---------- Kennzahlen-/Zeitenband ---------- */
.stats{ background:var(--panel); padding:clamp(44px, 5vw, 72px) 0; }
.stats__head{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:30px; }
.stats__head .eyebrow{ margin:0; }
.stats__row{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); align-items:end; }
.stat{ text-align:center; padding:6px 20px; border-left:1px solid var(--line-2); }
.stat:first-child{ border-left:0; }
.stat__num{ font-size:clamp(21px, 2vw, 29px); font-weight:500; letter-spacing:-.025em; line-height:1.15; }
.stat__num small{ display:block; font-size:.62em; color:var(--muted); margin-top:4px; }
.stat__label{ margin-top:10px; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.stat__label{ max-width:28ch; margin-inline:auto; line-height:1.5; }
.stat.is-today .stat__label{ color:var(--accent); }
.stat.is-today .stat__label::before{ content:"Heute · "; }
.closures{ margin:30px auto 0; max-width:640px; text-align:center; }
.closures__head{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--shut); margin:0 0 10px; }
.closures ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:var(--fs-base); color:var(--ink-2); }
.closures b{ font-weight:600; color:var(--ink); }
.stats__info{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 36px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.stats__info a{ color:var(--ink); font-weight:600; text-decoration:none; }
.stats__info a:hover{ text-decoration:underline; text-underline-offset:3px; }
.stats__info b{ color:var(--ink); font-weight:600; }

/* ---------- Schritt-Reiter (Referenz: "Your care journey") ---------- */
.journey__title{ font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.035em; }
.journey__title em{ font-style:normal; color:var(--accent); }
.journey__tabs{ display:flex; justify-content:center; gap:clamp(14px, 2.2vw, 30px); margin:clamp(28px, 3.5vw, 48px) 0 clamp(26px, 3vw, 40px); list-style:none; flex-wrap:wrap; }
.journey__tabs button{
  background:none; border:0; padding:8px 0 12px; cursor:pointer; font-size:var(--fs-base); font-weight:600; color:var(--muted);
  border-bottom:1.5px solid transparent; display:flex; gap:8px; align-items:baseline; transition:color .25s, border-color .25s;
}
.journey__tabs button small{ font-size:11px; font-weight:500; }
.journey__tabs button[aria-selected="true"]{ color:var(--ink); border-color:var(--ink); }
.journey__tabs button:hover{ color:var(--ink); }
.jstep{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(36px, 5vw, 80px); align-items:center; max-width:960px; margin:0 auto; }
.jstep + .jstep{ margin-top:clamp(64px, 8vw, 110px); }
.jstep__media{ position:relative; }
.jstep__img{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-img); background:var(--panel); }
.jstep__img img{ width:100%; height:100%; object-fit:cover; }
.jstep__img--card{ display:grid; place-items:center; background:transparent; box-shadow:none; overflow:visible; }
.jstep__img--card .panelcard{ box-shadow:0 1px 2px rgba(19,26,43,.06), 0 30px 60px -24px rgba(19,26,43,.3); }
.jstep__num{ font-size:var(--fs-sm); font-weight:600; color:var(--accent); letter-spacing:.06em; margin-bottom:12px; display:block; }
.jstep h3{ font-size:var(--fs-h2s); letter-spacing:-.022em; margin-bottom:12px; }
.jstep__meta{ display:inline-block; margin:-4px 0 16px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
.jstep p{ color:var(--muted); font-size:var(--fs-base); max-width:46ch; }
.jstep p + p{ margin-top:12px; }
.jstep .btn{ margin-top:22px; }
.panelcard{ position:relative; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:22px 24px; width:min(330px, 84%); }
.panelcard .fcard__label{ color:var(--muted); }
.panelcard__big{ text-align:center; padding:14px 0 18px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.panelcard__big b{ display:block; font-size:44px; letter-spacing:-.04em; line-height:1; }
.panelcard__big span{ font-weight:600; font-size:var(--fs-base); }
.panelcard__rows{ list-style:none; display:grid; gap:12px; }
.panelcard__rows li{ display:grid; grid-template-columns:20px minmax(0, 1fr); gap:10px; align-items:center; font-size:var(--fs-sm); font-weight:600; }
.panelcard__rows svg{ color:var(--accent); }

/* Scroll-gesteuerte Variante (nur Desktop, nur mit JS) */
.journey--sticky .journey__track{ position:relative; height:calc(var(--steps) * 85vh + 20vh); }
.journey--sticky .journey__stage{ position:sticky; top:var(--head-h); height:calc(100vh - var(--head-h)); display:flex; flex-direction:column; justify-content:center; }
.journey--sticky .journey__tabs{ margin:0 0 clamp(26px, 4vh, 48px); }
.journey--sticky .journey__steps{ position:relative; display:grid; }
.journey--sticky .jstep{ grid-area:1 / 1; margin:0 auto; width:100%; opacity:0; visibility:hidden; pointer-events:none; transition:none; }
/* Der bisherige Schritt verschwindet sofort, der neue blendet ein — so ueberlagern sich nie zwei Schritte. */
.journey--sticky .jstep.is-active{ opacity:1; visibility:visible; pointer-events:auto; animation:jstepIn .55s var(--ease) both; }
@keyframes jstepIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .journey--sticky .jstep.is-active{ animation:none; } }
.journey--sticky .jstep__img{ aspect-ratio:auto; height:min(46vh, 380px); }

/* ---------- Team-Karussell (Referenz: "Your doctors") ---------- */
.team-sec{ background:var(--panel); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--sec) 0; overflow:hidden; }
.team-sec + .section{ background:var(--panel); padding-top:0; }
.carousel{ position:relative; }
.carousel__track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:10px max(var(--pad), calc((100vw - var(--wrap)) / 2)) 24px;
  scroll-padding-left:max(var(--pad), calc((100vw - var(--wrap)) / 2));
}
.carousel__track::-webkit-scrollbar{ display:none; }
.person{ flex:0 0 clamp(180px, 17vw, 230px); scroll-snap-align:start; text-decoration:none; color:inherit; }
.team-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 24px); }
.team-grid .person{ flex:none; }
.person__img{ aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg, #EFE7D7, #E6DCC7); position:relative; }
.person__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
a.person:hover .person__img img{ transform:scale(1.04); }

.person h3{ font-size:var(--fs-base); margin-top:14px; letter-spacing:-.005em; }
.person p{ font-size:var(--fs-sm); color:var(--muted); line-height:1.4; margin-top:2px; }
.person__more{ display:inline-block; margin-top:6px; font-size:var(--fs-sm); font-weight:600; color:var(--accent); }
.carousel__nav{ display:flex; gap:10px; justify-content:flex-end; }
.carousel__btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:transparent; cursor:pointer; display:grid; place-items:center; transition:background .2s, border-color .2s; }
.carousel__btn:hover{ background:#fff; border-color:var(--ink); }
.carousel__btn:disabled{ opacity:.35; cursor:default; background:transparent; border-color:var(--line-2); }

/* Einblicke */
/* Vier gleich breite Spalten; minmax(0,…) verhindert, dass die natuerliche Bildbreite eine Spalte aufblaeht (Safari). */
.gallery{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.gallery figure{ margin:0; min-width:0; }
.gallery__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery figcaption{ font-size:var(--fs-sm); color:var(--muted); margin-top:10px; }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(36px, 6vw, 96px); align-items:start; }
.faq__head{ position:sticky; top:calc(var(--head-h) + 40px); }
.faq__head h2{ font-size:var(--fs-h2s); letter-spacing:-.02em; line-height:1.14; }
.faq__head .lede{ margin-top:18px; max-width:34ch; }
.faq__head .lede a{ color:var(--accent); font-weight:600; }
.faq__list{ border-top:1px solid var(--line-2); }
.faq__item{ border-bottom:1px solid var(--line-2); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:17px 0; font-size:var(--fs-base); font-weight:500; letter-spacing:-.005em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__ico{ position:relative; width:14px; height:14px; flex:none; }
.faq__ico::before, .faq__ico::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:var(--ink); transform:translateY(-50%); transition:transform .3s var(--ease); }
.faq__ico::after{ transform:translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__ico::after, .pubs-toggle[open] .faq__ico::after{ transform:translateY(-50%) rotate(0deg); }
.faq__a{ padding:0 40px 20px 0; color:var(--muted); font-size:var(--fs-base); }
.faq__a a{ color:var(--accent); font-weight:600; }
.faq__a p + p{ margin-top:10px; }
.faq__a ul{ margin-top:10px; padding-left:1.2em; }
.faq__a li + li{ margin-top:4px; }

/* ---------- Kontakt ---------- */
.contact{ display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); gap:clamp(36px, 5vw, 80px); align-items:stretch; }
.contact__rows{ list-style:none; margin-top:26px; border-top:1px solid var(--line); }
.contact__rows li{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); align-items:start; }
.contact__rows b{ display:block; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px; }
.contact__rows a, .contact__rows span.v{ font-size:16.5px; font-weight:600; text-decoration:none; letter-spacing:-.01em; line-height:1.35; }
.contact__rows a:hover{ text-decoration:underline; text-underline-offset:3px; }
.contact__rows small{ display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:2px; }
.contact__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.emergency{ display:flex; gap:14px; align-items:flex-start; margin-top:26px; padding:18px 20px; border-radius:var(--r); background:var(--shut-soft); color:var(--shut); }
.emergency b{ display:block; color:var(--ink); font-size:var(--fs-base); }
.emergency p{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:2px; }
.emergency a{ color:var(--shut); font-weight:700; }
.emergency svg{ flex:none; margin-top:2px; }

.map{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:420px; height:100%; background:var(--panel); box-shadow:var(--shadow-img); }
.map__bg{ position:absolute; inset:0; }
.map__bg img{ width:100%; height:100%; object-fit:cover; }
.map__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(19,26,43,.55), rgba(19,26,43,0) 55%); }
.map .fcard{ left:24px; bottom:24px; max-width:340px; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map__addr{ font-weight:600; font-size:var(--fs-md); margin-bottom:6px; }
.map__note{ font-size:var(--fs-sm); color:var(--muted); line-height:1.45; margin-bottom:14px; }

/* ---------- Karten / Raster ---------- */

.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.box{ background:#fff; border-radius:var(--r-lg); padding:clamp(26px, 3vw, 40px); border:1px solid var(--line); }

.box h3{ font-size:var(--fs-h3); letter-spacing:-.018em; margin-bottom:12px; }
.box p{ color:var(--ink-2); }
.box p + p{ margin-top:12px; }

.box .icon-ring{ margin-bottom:22px; }

/* Wochenzeiten als Zeilen */

/* Zweispaltig: Bild + Text */
.media-split{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(36px, 5vw, 80px); align-items:center; }
.media-split--rev > :first-child{ order:2; }
.media-split__img{ position:relative; }
.media-split__img .frame{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; max-height:460px; box-shadow:var(--shadow-img); }
.media-split__img .frame img{ width:100%; height:100%; object-fit:cover; }
.media-split h2{ margin-bottom:20px; }

.note{ background:var(--gold-soft); border-radius:var(--r-lg); padding:clamp(24px, 3vw, 36px); }
.note h3{ font-size:var(--fs-h3); margin-bottom:12px; }
.note p{ color:var(--ink-2); }
.note p + p{ margin-top:12px; }

/* Kennzahlen inline */
.creds{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; margin-top:34px; border-top:1px solid var(--line); }
.creds > div{ padding:18px 0; border-bottom:1px solid var(--line); }
.creds > div:nth-child(odd){ padding-right:20px; }
.creds > div:nth-child(even){ padding-left:20px; border-left:1px solid var(--line); }
.creds b{ display:block; font-size:22px; font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.creds span{ font-size:var(--fs-sm); color:var(--muted); }

/* Preise */
.prices{ margin:26px 0 0; border-top:1px solid var(--line-2); }
.prices > div{ display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line-2); align-items:baseline; }
.prices dt{ font-weight:600; font-size:var(--fs-md); }
.prices dt span{ display:block; font-weight:400; font-size:var(--fs-sm); color:var(--muted); }
.prices dd{ margin:0; font-weight:600; font-size:var(--fs-md); text-align:right; }
.prices__free{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--open); letter-spacing:.02em; margin-top:2px; }
.prices__note{ font-size:var(--fs-sm); color:var(--muted); margin-top:16px; }

/* Lebenslauf */
.cv-cols{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(36px, 5vw, 72px); }
.cv-cols h3{ font-size:var(--fs-h3); margin-bottom:18px; }
.cv-cols h3 + .cv, .cv + .cv-note{ margin-top:0; }
.cv{ list-style:none; border-top:1px solid var(--line-2); }
.cv li{ display:grid; grid-template-columns:110px minmax(0, 1fr); gap:16px; padding:10px 0; border-bottom:1px solid var(--line-2); }
.cv time{ font-weight:600; font-size:var(--fs-sm); color:var(--accent); padding-top:2px; }
.cv p{ font-size:var(--fs-base); color:var(--ink-2); }
.cv-note{ font-size:var(--fs-base); color:var(--muted); margin:14px 0 28px; }
.pubs-toggle{ margin-top:clamp(28px, 3vw, 44px); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.pubs-toggle summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; align-items:center; padding:26px 0; font-size:var(--fs-h3); font-weight:600; letter-spacing:-.018em; }
.pubs-toggle summary::-webkit-details-marker{ display:none; }
.pubs-toggle summary small{ display:block; font-size:var(--fs-sm); font-weight:400; color:var(--muted); letter-spacing:0; margin-top:4px; }
.pubs{ padding:0 0 30px 1.4em; display:grid; gap:12px; font-size:var(--fs-sm); color:var(--ink-2); }
.pubs a{ color:var(--accent); font-weight:600; }

/* Weg (nummerierte Zeilen) */
.steps-rows{ list-style:none; border-top:1px solid var(--line-2); }
.steps-rows > li{ display:grid; grid-template-columns:80px minmax(0, .8fr) minmax(0, 1.4fr); gap:28px; padding:clamp(18px, 2vw, 26px) 0; border-bottom:1px solid var(--line-2); }
.steps-rows__n{ font-size:var(--fs-sm); font-weight:600; color:var(--accent); letter-spacing:.06em; padding-top:6px; }
.steps-rows h3{ font-size:var(--fs-h3); letter-spacing:-.018em; }
.steps-rows p{ color:var(--ink-2); }
.steps-rows p + p{ margin-top:12px; }

/* Abschluss-Band / Querverweis */
.crossband{ background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(32px, 4.5vw, 56px); display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:40px; align-items:end; }
.crossband h2{ font-size:clamp(24px, 2.4vw, 34px); letter-spacing:-.03em; line-height:1.06; }
.crossband h2 span{ color:rgba(255,255,255,.55); }
.crossband p{ color:rgba(255,255,255,.75); margin-top:18px; max-width:52ch; }
.crossband__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.crossband .btn--line{ color:#fff; border-color:rgba(255,255,255,.35); }
.crossband .btn--line:hover{ border-color:#fff; }

/* Blog */
.post{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 4vw, 56px); align-items:center; text-decoration:none; color:inherit; }
.post__img{ margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; box-shadow:var(--shadow-img); }

.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.post:hover .post__img img{ transform:scale(1.03); }
.post__meta{ display:flex; gap:12px; align-items:center; font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px; }
.post h3{ font-size:var(--fs-h2s); letter-spacing:-.022em; margin-bottom:14px; }
.post p{ color:var(--muted); margin-bottom:20px; }
.press-card{ display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:var(--r-lg); background:#fff; text-decoration:none; color:inherit; min-height:180px; transition:transform .4s var(--ease), box-shadow .4s; }
.press-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); }
.press-card__src{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.press-card h3{ font-size:19px; letter-spacing:-.02em; flex:1; }
.blog-note{ margin-top:36px; font-size:var(--fs-sm); color:var(--muted); }

/* Artikel */
.article{ padding:clamp(48px, 6vw, 90px) 0 var(--sec); }
.crumbs{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:26px; }
.crumbs a{ color:var(--accent); font-weight:600; text-decoration:none; }
.article h1{ font-size:clamp(30px, 3.4vw, 46px); line-height:1.02; letter-spacing:-.035em; }
.article__meta{ margin-top:20px; font-size:var(--fs-sm); color:var(--muted); }
.article__lede{ margin-top:22px; font-size:var(--fs-lead); line-height:1.45; color:var(--ink-2); letter-spacing:-.01em; }
.article__lede + .prose{ margin-top:clamp(28px, 3vw, 44px); padding-top:clamp(24px, 3vw, 36px); border-top:1px solid var(--line); }
.article__img{ margin:clamp(36px, 4vw, 56px) 0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/2; }
.article__img img{ width:100%; height:100%; object-fit:cover; }
.article .prose{ font-size:17px; }
.article .note{ margin:1.6em 0; }
.article .crossband{ margin-top:56px; grid-template-columns:minmax(0, 1fr); }
.article .crossband__actions{ justify-content:flex-start; }

/* Rechtstexte */
.legal{ padding:clamp(48px, 6vw, 90px) 0 var(--sec); }
.legal h1{ font-size:clamp(32px, 3.6vw, 50px); letter-spacing:-.035em; line-height:1; }
.legal .lead{ font-size:var(--fs-lead); color:var(--muted); margin:22px 0 36px; line-height:1.45; }
.legal h2{ font-size:var(--fs-h3); margin:2em 0 .6em; letter-spacing:-.018em; }
.legal h2 em{ font-style:normal; color:var(--accent); }
.legal p, .legal li{ color:var(--ink-2); }
.legal p + p{ margin-top:12px; }
.legal ul{ padding-left:1.2em; display:grid; gap:8px; }
.legal a{ color:var(--accent); font-weight:600; }
.legal .box{ margin:28px 0; }
.legal .box p + p{ margin-top:14px; }
.todo{ background:#FFF6D6; border:1px dashed #D9B23A; border-radius:var(--r); padding:16px 18px; font-size:var(--fs-sm); color:#5A4500; margin:0 0 24px; }
.todo b{ display:block; margin-bottom:4px; }

/* 404 */
.notfound{ min-height:70vh; display:flex; align-items:center; padding:var(--sec) 0; }
.notfound h1{ font-size:var(--fs-hero); line-height:.98; letter-spacing:-.035em; }
.notfound h1 span{ color:var(--soft); }
.notfound p.lede{ margin-top:22px; max-width:50ch; font-size:var(--fs-lead); }
.notfound__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }

/* =========================================================
   FUSS: farbige Abschluss-Karte (Referenz: gelbe Karte)
   ========================================================= */
.footer{ padding:12px; background:var(--paper); }
.footer__card{ background:var(--gold); color:var(--gold-ink); border-radius:var(--r-lg); padding:clamp(40px, 4.5vw, 60px) 0 24px; }
.footer__top{ display:flex; flex-wrap:wrap; gap:28px 40px; align-items:flex-end; justify-content:space-between; padding-bottom:clamp(36px, 4vw, 52px); border-bottom:1px solid rgba(46,31,4,.18); }
.footer__claim{ font-size:clamp(24px, 2.4vw, 34px); letter-spacing:-.03em; line-height:1.08; }
.footer__claim span{ color:rgba(46,31,4,.55); }
.footer__grid{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.25fr); gap:32px; padding:32px 0 34px; }
.footer__note{ margin-top:12px; font-size:var(--fs-xs) !important; line-height:1.5 !important; color:rgba(46,31,4,.7); max-width:24ch; }
.footer__grid h3{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(46,31,4,.6); margin-bottom:14px; }
.footer__grid p, .footer__grid li{ font-size:var(--fs-sm); line-height:1.65; }
.footer__grid p + p{ margin-top:10px; }
.footer__name{ font-weight:600; font-size:var(--fs-base) !important; margin-bottom:4px; }
.footer__list{ list-style:none; display:grid; gap:3px; }
.footer__grid a{ text-decoration:none; }
.footer__grid a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between; font-size:13px; padding-top:22px; border-top:1px solid rgba(46,31,4,.18); color:rgba(46,31,4,.75); }
.footer__legal nav{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.footer__legal a, .consent-reopen{ text-decoration:none; background:none; border:0; padding:0; cursor:pointer; font-size:13px; color:inherit; }
.footer__legal a:hover, .consent-reopen:hover{ text-decoration:underline; text-underline-offset:3px; color:var(--gold-ink); }

/* Handy-Leiste */
.dock{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:50; display:none; gap:8px; padding:8px;
  background:rgba(255,255,255,.96); border-radius:var(--r); box-shadow:0 20px 50px -18px rgba(19,26,43,.45);
  transform:translateY(130%); transition:transform .4s var(--ease);
}
.dock .btn{ flex:1; min-height:46px; padding:10px 12px; font-size:var(--fs-sm); white-space:nowrap; }
.dock.is-on{ transform:none; }

/* Karten-Einwilligung */
.consent{
  position:fixed; left:16px; bottom:16px; z-index:70; width:min(420px, calc(100vw - 32px));
  background:#fff; border-radius:var(--r-lg); padding:24px; box-shadow:0 30px 70px -20px rgba(19,26,43,.45);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.consent.is-on{ opacity:1; transform:none; pointer-events:auto; }
.consent h2{ font-size:19px; margin:0 0 10px; }
.consent p{ margin:0 0 18px; font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); }
.consent a{ color:var(--accent); font-weight:600; }
.consent__row{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
.consent__note{ margin:14px 0 0 !important; font-size:12.5px !important; color:var(--muted) !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Kopfzeile mit acht Punkten: Telefonnummer ab 1260px ausblenden, ab 1120px Menue-Knopf */
@media (max-width: 1260px){ .nav__tel{ display:none; } }
@media (max-width: 1120px){
  .nav__links, .nav__actions{ display:none; }
  .nav__burger{ display:block; }
}
@media (max-width: 1100px){
  .footer__grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 960px){
  :host{ --nav-h:64px; }
  .nav__links, .nav__actions{ display:none; }
  .nav__burger{ display:block; }
  .brand__logo{ height:32px; }
  .vision, .faq, .contact, .media-split, .split-head, .pagehead__grid, .crossband, .post, .cv-cols{ grid-template-columns:minmax(0, 1fr); }
  .media-split--rev > :first-child{ order:0; }
  .vision__left, .faq__head{ position:static; }
  .split-head .lede{ justify-self:start; }
  .jstep{ grid-template-columns:minmax(0, 1fr); gap:34px; }
  .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid3{ grid-template-columns:minmax(0, 1fr); }
  .crossband__actions{ justify-content:flex-start; }
  .steps-rows > li{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .map{ min-height:440px; }

  .pagehead__grid{ gap:24px; }
  .dock{ display:flex; }
  .footer{ padding-bottom:84px; }
}
@media (max-width: 720px){
  :host{ --bar-h:34px; }
  .topbar{ font-size:12px; padding:7px 44px 7px 16px; justify-content:flex-start; height:auto; min-height:var(--bar-h); line-height:1.35; }
  .topbar p, .topbar a{ white-space:normal; }
  .hero__title, .pagehead h1{ letter-spacing:-.03em; }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__bg::after{ background:linear-gradient(0deg, rgba(19,26,43,.92) 0%, rgba(19,26,43,.72) 50%, rgba(19,26,43,.35) 80%, rgba(19,26,43,.45) 100%); }
  .hero__bg img{ object-position:var(--hero-pos-m, 30% 20%) !important; }
  .stats__row{ grid-template-columns:minmax(0, 1fr); }
  .stat{ border-left:0; border-top:1px solid var(--line-2); padding:20px 0; }
  .stat:first-child{ border-top:0; }
  .checks > li{ grid-template-columns:28px minmax(0, 1fr); }
  .checks > li > .tag{ grid-column:2; justify-self:start; }

  .team-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fcard{ min-width:0; max-width:240px; padding:13px 14px; }

  .cv li{ grid-template-columns:minmax(0, 1fr); gap:4px; }
  .creds{ grid-template-columns:minmax(0, 1fr); }
  .creds > div:nth-child(even){ padding-left:0; border-left:0; }
  .footer__grid{ grid-template-columns:minmax(0, 1fr); gap:26px; }

  .prices > div{ flex-direction:column; gap:4px; }
  .consent__row{ grid-template-columns:minmax(0, 1fr); }
  .faq__a{ padding-right:0; }
}

/* Ablauf eines Besuchs (Allgemeinmedizin) */

/* Entwurfshinweis (Seiten ohne Freigabe) */
.draftbar{ background:#FFF6D6; border-bottom:1px dashed #D9B23A; color:#5A4500; font-size:13.5px; padding:10px 0; }
.draftbar b{ margin-right:4px; }
.draftbar code{ font-size:12px; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px; }
.on-dark .draftbar{ position:relative; z-index:2; margin-top:var(--head-h); }

/* Antwort zuerst (zitierbarer Einstiegsabsatz) */
.answer{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); letter-spacing:-.005em; }

/* Autorin und Stand */

/* Ablauf-Karten: flexible Spaltenzahl */

/* Fakten-Liste + Grenzen nebeneinander */
.facts-grid{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:22px; align-items:start; }
@media (max-width: 960px){ .facts-grid{ grid-template-columns:minmax(0, 1fr); } }

.faq-group + .faq-group{ margin-top:clamp(36px, 4vw, 56px); }
.faq-group h2{ font-size:var(--fs-h3); margin-bottom:14px; }

/* Blog: mehrere Beitraege, Quellenliste */
.post + .post{ margin-top:clamp(28px, 3vw, 44px); padding-top:clamp(28px, 3vw, 44px); border-top:1px solid var(--line); }
.article .sources{ font-size:var(--fs-sm); color:var(--muted); }

/* Karten auf Bildern: Platz fuer die Ueberhaenge, damit nichts an Nachbarn stoesst */
.float-media, .jstep__media, .media-split__img{ margin-bottom:40px; }   /* Platz für die Karten, die unten überstehen */
.jstep__media .fcard{ max-width:236px; }

.jstep__media .fcard__list{ gap:7px; }

/* Tablet und Handy: Karten liegen unter dem Bild und ragen nur leicht hinein —
   das Bild bleibt vollstaendig sichtbar. */
@media (max-width: 960px){
  .float-media, .jstep__media, .media-split__img{ margin-bottom:0; display:flex; flex-direction:column; }
  .fcard, .fcard--tl, .fcard--tr, .fcard--br, .fcard--bl,
  .map .fcard{ position:relative; inset:auto; transform:none; max-width:none; width:auto; min-width:0;
    margin:-26px 14px 0; align-self:stretch; }
  .fcard + .fcard{ margin-top:10px; }
  .js .fcard, .js .in .fcard{ transform:none; }
  .map{ display:flex; flex-direction:column; justify-content:flex-end; }
  .map .fcard{ margin:0 14px 14px; }
}

@media (min-width: 961px){
  /* Wo neben dem Bild Text steht, nur leicht ueberstehen; zur Seitenkante hin darf es mehr sein. */
  .float-media .fcard--tl, .float-media .fcard--bl{ left:-28px; }
  .media-split__img .fcard--br{ right:-28px; }
  .media-split__img .fcard--bl{ left:-28px; }

}
@media (min-width: 1280px){
  /* Neben den Schritt-Bildern ist viel Rand frei: Karten weiter nach aussen. */
  .jstep__media .fcard--bl{ left:-96px; }
  .jstep__media .fcard--tl{ left:-96px; }
}
@media (max-width: 960px){ .jstep__media .fcard{ max-width:none; } }

/* Seitenkopf mit Hochformat-Portrait (Über mich) */

@media (max-width: 960px){
  /* Schritt "Auswertung": Karte ohne leeren 4:3-Rahmen, volle Breite */
  .jstep__img--card{ aspect-ratio:auto; display:block; }
  .jstep__img--card .panelcard{ width:100%; }
  .prices dd{ text-align:left; }
  .journey__tabs{ gap:10px 18px; }
}

/* Autorinnen-Zeile: Initialen statt wiederholtem Foto */

/* Galerie mit drei Bildern */
.gallery--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px){ .gallery--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .gallery--3 figure:last-child{ grid-column:1 / -1; } .gallery--3 figure:last-child .gallery__img{ aspect-ratio:3/2; } }

/* Ergänzende Behandlungen */

/* Karten-Platzhalter ohne Foto */
.map__bg--plain{ background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(160deg, var(--accent-soft), var(--panel)); }
.map__bg--plain::after{ display:none; }

/* Schließzeit-Kasten auf der Startseite (aus CLOSURES in app.js) */
.closure{ background:var(--accent); color:#fff; padding:clamp(30px, 4vw, 48px) 0; text-align:center; }
.closure[hidden]{ display:none; }
.closure__in{ max-width:960px; }
.closure__title{ font-size:var(--fs-h2s); line-height:1.25; letter-spacing:-.01em; margin:0; color:#fff; text-wrap:balance; }
.closure__note{ margin:12px 0 0; font-size:var(--fs-md); }
.closure__help{ margin:14px auto 0; font-size:var(--fs-md); opacity:.95; max-width:62ch; }
.closure a{ color:#fff; font-weight:700; }

/* Autorin und Prüfdatum: eine schlichte Zeile unter dem Inhalt */
.byline{ margin-top:clamp(28px, 3vw, 40px); font-size:13px; line-height:1.5; color:var(--muted); }
.byline a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Häufige Fragen: Themen-Sprungleiste, Gruppen, Verweise von den Leistungsseiten */
.chips--links a{ color:inherit; text-decoration:none; }
.chips--links li:has(a:hover){ background:var(--accent-soft); }
.faq-group + .faq-group{ margin-top:clamp(48px, 5vw, 72px); }
.faq-group h2{ font-size:var(--fs-h2s); letter-spacing:-.02em; margin-bottom:18px; }
.faq-group__more{ margin-top:16px; font-size:var(--fs-sm); }
.faq-teaser .lede{ max-width:46ch; }
.faq-teaser .btn{ margin-top:24px; }
.faq-teaser__note{ margin-top:18px; font-size:var(--fs-sm); color:var(--muted); }
.faq-teaser__note a{ color:var(--accent); font-weight:600; }
.article__faqlink{ margin-top:clamp(36px, 4vw, 52px); padding-top:24px; border-top:1px solid var(--line); color:var(--muted); }

/* Physikalische Therapie: Hinweis unter den Behandlungen */
.therapies__note{ margin-top:clamp(28px, 3vw, 40px); max-width:72ch; color:var(--muted); }
.therapies__note b{ color:var(--ink); font-weight:600; }

/* Unterseiten-Hero (Allgemeinmedizin): Antwort-Absatz hell auf dem Foto */
.hero__sub.answer{ color:rgba(255,255,255,.88); font-size:var(--fs-lead); line-height:1.45; max-width:56ch; }
.hero--sub .hero__text{ max-width:680px; }

/* Hero mit Hochformat-Foto: Bild rechts, dunkler Grund läuft von links hinein */
.hero__tag{ margin-top:14px; font-size:var(--fs-md); font-weight:600; color:var(--gold); line-height:1.45; }
.hero__sub + .hero__cta{ margin-top:26px; }
@media (min-width: 961px){
  /* overflow:hidden: das leicht vergrößerte Foto (heroZoom) ragt sonst links über den Verlauf hinaus -> heller Strich */
  .hero--half .hero__bg{ left:auto; width:60%; overflow:hidden; }
  .hero--half .hero__bg::after{
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(19,26,43,.72) 22%, rgba(19,26,43,.2) 55%, rgba(19,26,43,0) 80%),
      linear-gradient(0deg, rgba(19,26,43,.55) 0%, rgba(19,26,43,0) 35%),
      linear-gradient(180deg, rgba(19,26,43,.45) 0%, rgba(19,26,43,0) 22%);
  }
}
.on-dark .hero + .draftbar{ margin-top:0; }

/* Startseiten-Aufbau „Text links fest, Inhalte rechts scrollen" auf Unterseiten */
.vision__lede{ margin-top:22px; max-width:44ch; }
.checks--icons > li{ grid-template-columns:44px minmax(0, 1fr); }
.checks--media > li{ grid-template-columns:clamp(96px, 10vw, 132px) minmax(0, 1fr); gap:clamp(16px, 2vw, 24px); padding:18px 0; align-items:center; }
.checks--media > li:first-child{ border-top:0; padding-top:0; }
.checks__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-img); }
.checks__img img{ width:100%; height:100%; object-fit:cover; }
.vision .checks--media, .vision > div > .checks:first-child{ margin-top:0; }
.vision > div > .therapies__note{ margin-top:28px; }
@media (max-width: 720px){
  .checks--icons > li{ grid-template-columns:44px minmax(0, 1fr); }
  .checks--media > li{ grid-template-columns:96px minmax(0, 1fr); gap:16px; align-items:start; }
}

/* Einstieg unter dem Titelbild: der Antwort-zuerst-Absatz, ruhig und gut lesbar */
.intro{ padding:clamp(56px, 7vw, 104px) 0 0; }
.intro__text{ font-size:clamp(19px, 1.55vw, 23px); line-height:1.55; color:var(--ink-2); max-width:62ch; letter-spacing:-.01em; }
.intro + .draftbar, .draftbar + .intro{ margin-top:0; }

/* Langer Text neben einem Bild: Bild oben ausrichten und beim Lesen stehen lassen */
.media-split--sticky{ align-items:start; }
@media (min-width: 961px){ .media-split--sticky .media-split__img{ position:sticky; top:calc(var(--head-h) + 40px); } }

/* Nutrigenetik: App-Bildschirme im Handy („Ihre App: Takt“) */
/* Handy wie auf der Takt-Seite (apps/takt/src/landing/landing.css .device): Rahmen, Statusleiste mit Insel,
   Home-Balken. Maße im 390-px-Raster der App, über Container-Einheiten (1cqw = 1 % der Bildschirmbreite). Das
   Bildschirmfoto sitzt zwischen Statusleiste und Home-Balken, damit die Ecken nichts abschneiden. */
.phone{ width:100%; max-width:232px; min-width:0; justify-self:center; margin:0 auto; container-type:inline-size; }
.phone__frame{ padding:9px; border-radius:calc((100cqw - 18px) * .1231 + 9px);
  background:linear-gradient(150deg, #48484a 0%, #1c1c1e 22%, #0a0a0a 60%, #3a3a3c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.4), 0 40px 70px -34px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.25); }
.phone__screen{ position:relative; container-type:inline-size; aspect-ratio:390/844; border-radius:12.31cqw; overflow:hidden; background:#F3F2F7; isolation:isolate; }
.phone__screen::before{ content:"9:41"; position:absolute; inset:0 0 auto; z-index:2; height:13.85cqw; padding-left:12.82cqw;
  font:600 4.36cqw/14.4cqw -apple-system, BlinkMacSystemFont, "Figtree", sans-serif; letter-spacing:-.01em; color:#000;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 54'%3E%3Crect x='133' y='11' width='124' height='36' rx='18' fill='%23000'/%3E%3Cg transform='translate%28286 23%29' fill='%23000'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' y='0' width='3' height='12' rx='1'/%3E%3C/g%3E%3Cpath transform='translate%28310 23%29' fill='%23000' d='M8 11.2 5.6 8.6a3.4 3.4 0 0 1 4.8 0zM3.4 6.5a6.6 6.6 0 0 1 9.2 0l-1.3 1.4a4.7 4.7 0 0 0-6.6 0zM1 4.1a10 10 0 0 1 14 0l-1.3 1.4a8.1 8.1 0 0 0-11.4 0z'/%3E%3Cg transform='translate%28332 23%29' fill='%23000'%3E%3Crect x='.5' y='.5' width='22' height='11' rx='3.2' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3Crect x='2' y='2' width='16' height='8' rx='2'/%3E%3Crect x='24' y='4' width='1.6' height='4' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, #F3F2F7; }
.phone__screen::after{ content:""; position:absolute; z-index:2; left:50%; bottom:2.05cqw; width:34.36cqw; height:1.28cqw; margin-left:-17.18cqw; border-radius:1cqw; background:rgba(0,0,0,.85); }
.phone__screen img{ position:absolute; left:0; top:13.85cqw; width:100%; height:calc(100% - 18.98cqw); object-fit:contain; object-position:center top; }
.papers__note{ margin-top:18px; font-size:13px; color:var(--muted); text-align:center; }

/* Größen am Handy: dichter, damit Abschnitte nicht über mehrere Bildschirme laufen */
@media (max-width: 720px){
  .box{ padding:20px; }
  .note{ padding:20px; }
  .prices{ margin-top:16px; }
  .prices > div{ padding:12px 0; }
  .checks > li{ padding:12px 0; gap:12px; }
  .float-media__img{ aspect-ratio:3/2; }
  .media-split__img .frame{ aspect-ratio:4/3; max-height:300px; }
  .media-split__img .frame img{ object-position:50% 25%; }
  .steps-rows > li{ padding:16px 0; }
  .split-head{ gap:12px; }
  .facts-grid{ gap:14px; }
}

/* ---------- Nutrigenetik, „Ihr Befund": Berichtseiten in den Schritt-Reitern (wie „Ablauf der Beratung") ---------- */
.jstep__img--paper{ aspect-ratio:1076/1040; background:#fff; border:1px solid var(--line); }
.jstep__img--paper img{ object-fit:contain; }
.journey--sticky .jstep__img--paper{ aspect-ratio:1076/1040; height:auto; width:min(100%, calc(min(46vh, 380px) * 1076 / 1040)); margin:0 auto; }
#befund .papers__note{ margin-top:clamp(22px, 3vh, 34px); }

/* ---------- Nutrigenetik, „Ihre App: Takt": kurz, mit zwei Handys. Die ganze Tour durch die App steht auf der
   Takt-Seite („So funktioniert's"); hier nur, was die App kann und wie man hinkommt. ---------- */
.takt-teaser{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(36px, 6vw, 96px); align-items:center; }
.takt-teaser__copy .lede{ margin-top:18px; max-width:46ch; }
.takt-teaser__list{ list-style:none; margin:clamp(22px, 3vw, 30px) 0 0; padding:0; }
.takt-teaser__list li{ display:grid; grid-template-columns:7em minmax(0, 1fr); gap:16px; padding:13px 0; border-top:1px solid var(--line); font-size:var(--fs-base); line-height:1.45; }
.takt-teaser__list li:last-child{ border-bottom:1px solid var(--line); }
.takt-teaser__list b{ font-weight:600; }
.takt-teaser__list span{ color:var(--muted); }
.takt-teaser__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px, 3vw, 32px); }
/* Zwei Handys, das vordere tiefer; beim Hereinscrollen fächern sie sich aus der Mitte auf */
.takt-teaser__phones{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; max-width:500px; width:100%; margin:0 auto; }
.takt-teaser__phones .phone{ flex:none; width:min(50%, 240px); max-width:none; margin:0; transform:rotate(-4deg); transition:transform 1.1s var(--ease) .25s; }
.takt-teaser__phones .phone--front{ position:relative; z-index:1; margin:clamp(40px, 6vw, 64px) 0 0 -10%; transform:rotate(3deg); }
.js .takt-teaser__phones:not(.in) .phone--back{ transform:translateX(30%); }
.js .takt-teaser__phones:not(.in) .phone--front{ transform:translateX(-30%); }
.takt-teaser__fine{ flex-basis:100%; margin-top:26px; text-align:center; font-size:13px; color:var(--muted); }
@media (max-width: 960px){
  .takt-teaser{ grid-template-columns:minmax(0, 1fr); }
  .takt-teaser__phones{ max-width:420px; }
}
@media (max-width: 720px){
  .takt-teaser__cta .btn{ flex:1 1 100%; }
  .takt-teaser__list li{ grid-template-columns:minmax(0, 1fr); gap:2px; padding:11px 0; }
}
@media (prefers-reduced-motion: reduce){
  .takt-teaser__phones .phone{ transition:none; }
}

/* ---------- Schritt-Reiter am Handy und Tablet (app.js initJourney, .journey--flow): die Reiter bleiben unter dem
   Kopf stehen und heben den Schritt hervor, der gerade gelesen wird. Jeder Schritt gleitet beim Hereinscrollen
   herein: das Bild zoomt sanft zurück, der Text kommt ein wenig später. (Das Aussehen der Reiter als Glas-Schalter
   steht in glass.css.) ---------- */
.journey{ --jbg:var(--paper); }
.journey.section--white{ --jbg:var(--white); }
.journey.section--panel{ --jbg:var(--panel); }
.journey--flow .journey__tabs{
  position:sticky; top:var(--head-h); z-index:5;
  flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
  margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); padding:0 var(--pad);
  background:var(--jbg); box-shadow:0 1px 0 var(--line);
}
.journey--flow .journey__tabs::-webkit-scrollbar{ display:none; }
.journey--flow .journey__tabs button{ flex:none; white-space:nowrap; }
.journey--flow .jstep{ scroll-margin-top:72px; }
.journey--flow .jstep__img img{ transform:scale(1.07); transition:transform 1.4s var(--ease); }
.journey--flow .jstep > :not(.jstep__media){ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s; }
.journey--flow .jstep.is-seen .jstep__img img{ transform:none; }
.journey--flow .jstep.is-seen > :not(.jstep__media){ opacity:1; transform:none; }

/* =========================================================
   Glas-Variante (Test) — schwebende Kopfzeile als Pille,
   Karten, Reiter und Leisten aus mattiertem Glas.
   Farben bleiben unverändert; nur Flächen, Unschärfe, Rand,
   Rundung und Schatten. Abschalten: GLASS = False in build.py.
   ========================================================= */
:host{
  --nav-h: 76px;            /* Pille 58px + Abstand oben */
  --r-lg: 26px;
  --glass:        rgba(255,255,255,.62);
  --glass-strong: rgba(252,251,249,.8);
  --glass-line:   rgba(255,255,255,.75);
  --glass-dark:   rgba(255,255,255,.08);
  --glass-dark-line: rgba(255,255,255,.18);
  --glass-blur: saturate(1.6) blur(20px);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(19,26,43,.05), 0 22px 48px -22px rgba(19,26,43,.32);
}

/* ---------- Kopfzeile: schwebende Glas-Pille ---------- */
.nav, .nav.is-solid{ background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:10px clamp(10px, 1.6vw, 22px) 0; }
.nav__in{
  height:58px; border-radius:999px; padding:0 8px 0 clamp(18px, 2vw, 26px);
  background:var(--glass-strong); border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  transition:background .35s var(--ease), border-color .35s, box-shadow .35s;
}
.nav__actions .btn{ min-height:44px; }
.nav__burger{ margin-right:2px; }
/* über dem dunklen Startfoto: dunkles Glas */
.on-dark .nav:not(.is-solid) .nav__in{
  background:var(--glass-dark); border-color:var(--glass-dark-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 22px 48px -24px rgba(0,0,0,.5);
}

/* ---------- Knöpfe als Pillen ---------- */
.btn{ border-radius:999px; }
.btn--line{ background:rgba(255,255,255,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ---------- Schwebende Info-Karten ---------- */
.fcard{
  background:var(--glass); border:1px solid var(--glass-line); border-radius:22px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow); padding:16px 18px;
}

.panelcard{
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
}

/* ---------- Reiter als Glas-Segmentschalter ---------- */
.journey__tabs{
  display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; gap:4px; padding:5px;
  border-radius:999px; background:rgba(19,26,43,.05); border:1px solid rgba(19,26,43,.06);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.journey--sticky .journey__tabs{ margin-left:auto; margin-right:auto; }
/* Handy und Tablet (.journey--flow): der Schalter bleibt unter dem Kopf stehen, mit dichterem Glas über dem Text */
.journey--flow .journey__tabs{
  top:calc(var(--head-h) + 8px); margin-left:auto; margin-right:auto; padding:5px; overflow:visible; justify-content:center;
  background:rgba(252,251,249,.84); box-shadow:0 10px 30px -14px rgba(19,26,43,.28);
}
@media (max-width: 720px){
  .journey--flow .journey__tabs{ padding:4px; justify-content:space-between; }
  .journey--flow .journey__tabs button{ flex:1 1 auto; }
}
.journey__tabs button{ border:0; border-radius:999px; padding:10px 20px; align-items:center; transition:background .3s var(--ease), color .25s, box-shadow .3s; }
.journey__tabs button[aria-selected="true"]{ background:#fff; box-shadow:0 1px 2px rgba(19,26,43,.08), 0 8px 20px -10px rgba(19,26,43,.3); }

/* ---------- Kästen und Karten ---------- */
.box{ background:rgba(255,255,255,.72); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.press-card{ border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); }
.pill:not(.status){ background:rgba(19,26,43,.05); border:1px solid rgba(19,26,43,.06); }

/* ---------- Mobiles Menü und Handy-Leiste ---------- */
.menu{ background:rgba(252,251,249,.86); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.dock{ background:var(--glass-strong); border:1px solid var(--glass-line); border-radius:999px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }

@media (max-width: 960px){
  .nav__in{ height:54px; }
  :host{ --nav-h: 70px; }
}
@media (max-width: 720px){
  .nav, .nav.is-solid{ padding:8px 10px 0; }
  .journey__tabs{ width:100%; justify-content:space-between; flex-wrap:nowrap; gap:2px; padding:4px; }
  .journey__tabs button{ padding:9px 5px; flex:1 1 auto; min-width:0; justify-content:center; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .journey__tabs button small{ display:none; }
}

/* Ohne Unschärfe (ältere Browser): deckender, damit Text lesbar bleibt */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__in, .fcard, .panelcard, .box, .dock{ background:rgba(252,251,249,.97); }
  .on-dark .nav:not(.is-solid) .nav__in{ background:rgba(19,26,43,.7); }
}

/* Nur auf den Takt-Seiten */
:host{ display:block; }
.site-head{ z-index:1000; }
.menu{ z-index:999; }
.consent-reopen{ display:none !important; }
.footer{ padding-bottom:12px !important; }   /* kein Handy-Dock auf den Takt-Seiten */
/* Erst zeigen, wenn diese Stile da sind (im Shadow Root steht davor visibility:hidden) */
.pw-root{ visibility:visible; }