/* =========================================================
   pure smile — Praxisgemeinschaft für Zahnheilkunde
   Modernes, dynamisches Redesign · "Elegantes Blau"
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Blaupalette */
  --navy-900: #16323a;
  --navy-800: #1e4551;
  --navy-700: #2a5561;
  /* Akzentfamilie an das Logo angepasst: Türkis/Mint (ersetzt das frühere Blau) */
  --blue-600: #007f88;
  --blue-500: #00b3bd;
  --blue-400: #3ec0c4;
  --blue-200: #acd9d6;
  --sky-100: #e7f4f2;
  --sky-50:   #f1f8f7;

  /* Markenfarben aus dem Logo (Türkis/Mint) */
  --teal-600: #007f88;
  --teal-500: #00b3bd;
  --mint-400: #66c4c4;
  --mint-300: #acd9d6;

  --ink: #44494d;
  --slate: #6b7176;
  --slate-light: #8e9498;
  --line: #e2ebea;
  --white: #ffffff;

  --grad-hero: linear-gradient(135deg, #16323a 0%, #24505a 42%, #007f88 100%);
  --grad-accent: linear-gradient(135deg, #2e5a64 0%, #007f88 100%);
  --grad-soft: linear-gradient(180deg, #f1f8f7 0%, #ffffff 100%);

  --shadow-sm: 0 2px 10px rgba(68, 73, 77, .07);
  --shadow-md: 0 12px 40px rgba(68, 73, 77, .12);
  --shadow-lg: 0 30px 70px rgba(68, 73, 77, .20);
  --shadow-blue: 0 18px 40px rgba(0, 127, 136, .30);

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --container: 1440px;   /* 21.09.2026: von 1200 auf 1440 - Zeilen waren mit 52 Zeichen am unteren Rand des gut lesbaren Bereichs (45-75), jetzt 64 */
  --ease: cubic-bezier(.22, 1, .36, 1);

  --font-head: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--navy-800); }

::selection { background: var(--blue-400); color: #fff; }

/* ---------- Layout Helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

.section { position: relative; padding: clamp(70px, 9vw, 130px) 0; }
.section--tint { background: var(--grad-soft); }
.section--navy { background: var(--navy-800); color: #dbe6f5; }

.section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head.left { text-align: left; margin-inline: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-600);
  padding: 7px 16px; border-radius: 999px;
  background: var(--sky-100); border: 1px solid #c7ece8;
}
.section--navy .eyebrow { background: rgba(53,192,181,.16); border-color: rgba(53,192,181,.34); color: var(--blue-200); }

.section-title { font-size: clamp(1.9rem, 4vw, 3rem); margin: 22px 0 16px; }
.section--navy .section-title { color: #fff; }
.section-sub { font-size: 1.08rem; color: var(--slate); }
.section--navy .section-sub { color: #b9cbe4; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: 15px 30px; border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0,127,136,.40); }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--blue-600); border: 1.5px solid #cfe1fa; }
.btn--outline:hover { background: var(--sky-100); transform: translateY(-3px); }

/* =========================================================
   TOP UTILITY BAR
   ========================================================= */
.topbar {
  background: var(--navy-900); color: #cfe0f5;
  font-size: .82rem; letter-spacing: .01em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; padding-block: 6px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .25s; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--blue-400); }
.topbar__group { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.topbar__note { color: #7d97b8; }
@media (max-width: 760px) { .topbar__note { display: none; } }

/* =========================================================
   NAVBAR
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow .4s var(--ease), background .4s, border-color .4s, padding .4s;
}
.nav.scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); background: rgba(255,255,255,.92); }
.nav .container { display: flex; align-items: center; justify-content: space-between; min-height: 80px; transition: min-height .4s var(--ease); }
.nav.scrolled .container { min-height: 68px; }

.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); }
.brand__mark {
  width: 46px; height: 46px; border-radius: 13px; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  flex-shrink: 0; overflow: hidden;
}
.brand__mark img { width: 32px; height: 32px; object-fit: contain; }
.brand__text { line-height: 1.05; }
.brand__name { font-weight: 700; font-size: 1.28rem; color: var(--navy-800); letter-spacing: -.01em; white-space: nowrap; }
.brand__name span { color: var(--teal-600); }
.brand__sub { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-light); font-family: var(--font-body); font-weight: 600; }

.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--navy-700);
  padding: 10px 15px; border-radius: 10px; position: relative; transition: color .25s, background .25s; white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 6px; height: 2px;
  background: var(--blue-500); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--blue-600); }
.nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); }

.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__phone { display: none; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600; color: var(--navy-800); font-size: .95rem; }
.nav__phone svg { width: 17px; height: 17px; color: var(--blue-600); }

.nav__burger { display: none; width: 46px; height: 46px; border-radius: 12px; background: var(--sky-100); place-items: center; }
.nav__burger span { display: block; width: 20px; height: 2px; background: var(--navy-800); border-radius: 2px; position: relative; transition: .3s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy-800); border-radius: 2px; transition: .3s; }
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav__burger.open span { background: transparent; }
.nav__burger.open span::before { top: 0; transform: rotate(45deg); }
.nav__burger.open span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1200px) {
  .nav__phone { display: none; }
}
@media (max-width: 600px) {
  .nav__cta .btn--primary { display: none; }
}
@media (max-width: 1020px) {
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 84vw);
    flex-direction: column; align-items: stretch; gap: 6px;
    background: #fff; padding: 100px 24px 40px; box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .45s var(--ease); z-index: 90;
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { font-size: 1.1rem; padding: 14px 16px; border-radius: 12px; }
  .nav__links a::after { display: none; }
  .nav__links a:hover { background: var(--sky-100); }
  .nav__burger { display: grid; }
}

.nav-overlay { position: fixed; inset: 0; background: rgba(22,50,58,.45); opacity: 0; visibility: hidden; transition: .4s; z-index: 80; }
.nav-overlay.open { opacity: 1; visibility: visible; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; background: var(--grad-hero); color: #fff; overflow: hidden; padding: clamp(70px, 11vw, 140px) 0 clamp(90px, 12vw, 150px); }
.hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }

/* Bewegte Bilderschau (Ken Burns + Crossfade) */
.hero__slideshow { position: absolute; inset: 0; z-index: 0;
  /* Überblendung beim Umschalten auf 3D: dieselbe Dauer wie das Einblenden des Canvas (.hero__3d),
     damit Foto und Zahnlandschaft ineinander übergehen statt hart zu schneiden. visibility springt
     erst NACH der Blende, damit die Ken-Burns-Animation danach keine Rechenzeit mehr kostet. */
  transition: opacity 1.8s ease, visibility 0s linear 1.8s; }
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1.8s var(--ease);
  will-change: opacity, transform;
}
.hero__slide.active { opacity: 1; animation: kenburns 9s ease-out forwards; }
.hero__slide.kb-a.active { animation-name: kenburns; }
.hero__slide.kb-b.active { animation-name: kenburns2; }
@keyframes kenburns  { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.16) translate(-1.5%, -1.5%); } }
@keyframes kenburns2 { from { transform: scale(1.16) translate(1.5%, 1%);  } to { transform: scale(1.06) translate(0,0); } }
/* Einzelbild statt Karussell: sehr langsamer, endlos hin- und herwandernder Zoom */
.hero__slide:only-child.active { animation: kenburns-solo 32s ease-in-out infinite alternate; }
@keyframes kenburns-solo { from { transform: scale(1.04) translate(0,0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide:only-child.active { animation: none; transform: scale(1.04); }
}
/* Im Hochformat schneidet "cover" so stark zu, dass mittig nur die leere Wand
   übrig bleibt – daher den Ausschnitt auf den Gang verschieben. */
@media (max-width: 700px) {
  .hero__slide { background-position: 72% center; }
}

/* Blaues Overlay für Kontrast & eleganten Look */
.hero__overlay { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(22,50,58,.80) 0%, rgba(22,50,58,.50) 34%, rgba(68,73,77,.20) 66%, rgba(68,73,77,.05) 100%),
    linear-gradient(180deg, rgba(22,50,58,.20) 0%, rgba(22,50,58,.08) 45%, rgba(22,50,58,.42) 100%);
}
.hero__grid-lines { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 70%); }

.hero .container { position: relative; z-index: 2; }
.hero__content { max-width: 760px; }

/* Slideshow-Steuerung (Punkte + Standort-Label) */
.hero__ui { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero__dots { display: flex; gap: 10px; }
.hero__dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .4s var(--ease), background .3s; padding: 0; }
.hero__dot.active { width: 30px; background: #fff; }
.hero__caption { display: inline-flex; align-items: center; gap: 9px; color: #eaf3ff; font-size: .84rem; font-family: var(--font-head); font-weight: 500; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
.hero__caption svg { width: 15px; height: 15px; color: var(--blue-200); }
.hero__caption span { transition: opacity .4s; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px;
  background: rgba(47,176,166,.20); border: 1px solid rgba(53,192,181,.55);
  font-family: var(--font-head); font-weight: 600; font-size: .88rem; letter-spacing: .04em; margin-bottom: 26px;
  backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(47,176,166,.18);
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-400); box-shadow: 0 0 0 0 rgba(47,176,166,.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,176,166,.6);} 70% { box-shadow: 0 0 0 12px rgba(47,176,166,0);} 100% { box-shadow: 0 0 0 0 rgba(47,176,166,0);} }

.hero h1 { font-size: clamp(1.72rem, 6vw, 4rem); color: #fff; margin-bottom: 22px; overflow-wrap: break-word; hyphens: manual; }
.hero h1 .accent { background: linear-gradient(120deg, #7fded4, #ffffff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__lead { font-size: clamp(1.12rem, 2vw, 1.4rem); color: #cfe0f5; font-weight: 500; max-width: 520px; margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }

.hero__stats { display: flex; gap: 34px; flex-wrap: wrap; }
.hero__stat .num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; }
.hero__stat .num .plus { color: var(--blue-200); }
.hero__stat .num .of { font-size: 1rem; font-weight: 500; color: var(--blue-200); letter-spacing: .01em; }
.hero__stat .lbl { font-size: .82rem; color: #a9c2e0; margin-top: 6px; letter-spacing: .02em; }
.hero__stat + .hero__stat { padding-left: 34px; border-left: 1px solid rgba(255,255,255,.15); }
/* Öffnungstage-Zähler: eigene volle Zeile unter den drei Kennzahlen (Wert kommt aus js/main.js) */
.hero__stat.hero__stat--open { flex-basis: 100%; padding-left: 0; border-left: 0; margin-top: 4px; }

/* Hero visual — floating card */
.hero__visual { position: relative; height: 100%; min-height: 420px; }
.hero__card {
  position: absolute; background: rgba(255,255,255,.97); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px;
}
.hero__card--main {
  inset: 20px 0 40px 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: linear-gradient(160deg, #ffffff, #ecf8f6);
  animation: floaty 7s ease-in-out infinite;
}
.hero__tooth { width: 92px; height: 92px; border-radius: 24px; background: var(--grad-accent); display: grid; place-items: center; box-shadow: var(--shadow-blue); }
.hero__tooth svg { width: 52px; height: 52px; color: #fff; }
.hero__card--main h3 { font-size: 1.35rem; color: var(--navy-800); }
.hero__card--main p { color: var(--slate); font-size: .96rem; }

.hero__pill {
  position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--shadow-md);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 600; color: var(--navy-800); font-family: var(--font-head);
}
.hero__pill svg { width: 20px; height: 20px; color: var(--blue-600); }
.hero__pill--1 { top: 0; right: 0; animation: floaty 6s ease-in-out infinite; }
.hero__pill--2 { bottom: 0; right: 30px; animation: floaty 8s ease-in-out .6s infinite; }
.hero__pill--2 .ico { width: 30px; height: 30px; border-radius: 9px; background: #e9fbf2; color: #12b57a; display: grid; place-items: center; }
.hero__pill--2 .ico svg { color: #12b57a; width: 18px; height: 18px; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero__wave svg { width: 100%; height: auto; display: block; }

@media (max-width: 520px) {
  .hero__stat + .hero__stat { padding-left: 0; border-left: none; }
  .hero__stats { gap: 20px; }
  .hero__ui { margin-top: 30px; }
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust .container { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 5vw, 60px); padding-block: 26px; }
.trust__item { display: flex; align-items: center; gap: 12px; color: var(--slate); font-weight: 500; font-size: .95rem; }
.trust__item svg { width: 22px; height: 22px; color: var(--blue-600); flex-shrink: 0; }

/* =========================================================
   ÜBER UNS
   ========================================================= */
/* Bildspalte etwas breiter: das Querformat-Bild braucht mehr Fläche, damit es
   neben dem langen Textblock nicht verloren wirkt. */
/* (Der frühere „Über uns"-Block – Bilderrahmen + Wertekarten – wurde am 2026-09-04 durch die Kapitel-Erzählung ersetzt, siehe Block ÜBER UNS DUNKEL am Dateiende.) */

/* =========================================================
   ÄRZTE
   ========================================================= */
.docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.doc-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex; flex-direction: column;
}
.doc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.doc-card__photo { aspect-ratio: 4/5; background: linear-gradient(150deg, #1e4551, #00b3bd); position: relative; overflow: hidden; }
.doc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.doc-card__tag { position: absolute; top: 16px; left: 16px; z-index: 2; background: rgba(255,255,255,.92); color: var(--blue-600); font-family: var(--font-head); font-weight: 600; font-size: .78rem; padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.doc-card__body { padding: 30px 30px 34px; flex: 1; display: flex; flex-direction: column; }
.doc-card__body h3 { font-size: 1.5rem; margin-bottom: 4px; }
.doc-card__role { color: var(--blue-600); font-family: var(--font-head); font-weight: 600; font-size: .95rem; margin-bottom: 16px; }
.doc-card__body p { color: var(--slate); margin-bottom: 12px; }   /* 20 → 12 px (20.09.2026): Trennstrich sitzt näher am Vorstellungstext */
.doc-card__cv { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 0; }
.doc-card__cv li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate); font-size: .9rem; margin-bottom: 10px; }
.doc-card__cv li svg { width: 18px; height: 18px; color: var(--blue-500); flex-shrink: 0; margin-top: 3px; }
/* Ausklappbarer Zusatztext */
/* margin-top:auto schiebt den Zusatzblock samt Knopf ans untere Ende der Karte – dadurch steht
   „Mehr erfahren" auf allen Ärzt:innen-Karten einer Reihe auf derselben Höhe, egal wie lang der
   Lebenslauf darüber ist. Der Karteninhalt ist eine Flex-Spalte (.doc-card__body), das trägt das. */
.doc-card__more { max-height: 0; overflow: hidden; margin-top: auto; transition: max-height .5s var(--ease); }
/* Notnagel-Wert: die tatsächliche Höhe setzt js/main.js beim Öffnen als inline max-height
   (gemessener scrollHeight). Am Handy wurden sonst die letzten Mitgliedschaften abgeschnitten. */
.doc-card.open .doc-card__more { max-height: 1600px; }
.doc-card__more .doc-card__cv { margin-top: 14px; }
.doc-more-toggle { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue-600); font-family: var(--font-head); font-weight: 600; font-size: .88rem; }
.doc-more-toggle svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.doc-card.open .doc-more-toggle svg { transform: rotate(180deg); }
.doc-more-toggle .txt-more::after { content: "Mehr erfahren"; }
.doc-card.open .doc-more-toggle .txt-more::after { content: "Weniger anzeigen"; }
@media (max-width: 800px) { .docs__grid { grid-template-columns: 1fr; } }

/* Jobsharing-Partner */
.docs__partners { margin-top: clamp(40px, 5vw, 60px); }
.docs__partners-head { text-align: center; margin-bottom: 28px; }
.docs__partners-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-top: 10px; }
.docs__partners-head p { color: var(--slate); margin-top: 8px; }
.partners__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 26px); max-width: 820px; margin: 0 auto; }
.partner-card {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.partner-card__avatar {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 16px;
  display: grid; place-items: center; color: #fff; background: var(--grad-accent); box-shadow: var(--shadow-blue);
}
.partner-card__avatar svg { width: 28px; height: 28px; }
.partner-card__info h4 { font-size: 1.12rem; margin-bottom: 3px; }
.partner-card__role { color: var(--teal-600); font-family: var(--font-head); font-weight: 600; font-size: .88rem; }
@media (max-width: 620px) { .partners__grid { grid-template-columns: 1fr; } }

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.serv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.serv-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  position: relative; overflow: hidden; cursor: default;
}
.serv-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--sky-50); transition: transform .5s var(--ease); z-index: 0; }
.serv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.serv-card:hover::after { transform: scale(2.4); }
.serv-card > * { position: relative; z-index: 1; }
.serv-card__ico { width: 52px; height: 52px; border-radius: 14px; background: var(--grad-accent); display: grid; place-items: center; margin-bottom: 18px; box-shadow: var(--shadow-blue); }
.serv-card__ico svg { width: 34px; height: 34px; color: #fff; } /* Inline-SVG-Icons (Veneers) gleich groß wie die PNGs */
.serv-card__ico img { width: 34px; height: 34px; object-fit: contain; }
.serv-card h3 { font-size: 1.16rem; margin-bottom: 10px; line-height: 1.3; }
.serv-card p { color: var(--slate); font-size: .93rem; margin: 0; }

/* Expand/collapse long service text – eingeklappt genau 2 Zeilen */
.serv-card__text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.serv-card.open .serv-card__text p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.serv-toggle { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue-600); font-family: var(--font-head); font-weight: 600; font-size: .88rem; }
.serv-toggle svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.serv-card.open .serv-toggle svg { transform: rotate(180deg); }
.serv-toggle .txt-more::after { content: "Mehr lesen"; }
.serv-card.open .serv-toggle .txt-more::after { content: "Weniger anzeigen"; }

@media (max-width: 900px) { .serv__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .serv__grid { grid-template-columns: 1fr; } }

/* =========================================================
   TEAM
   ========================================================= */
.team__lead { max-width: 640px; margin: 0 auto clamp(40px,5vw,60px); text-align: center; color: var(--slate); }
/* Team-Filter (Chips) */
.team__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 38px; }
.team-chip {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: #cfe0f5;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  padding: 9px 18px; border-radius: 999px;
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.team-chip:hover { border-color: rgba(102,196,196,.6); color: #fff; transform: translateY(-2px); }
.team-chip.is-active { background: var(--grad-accent); color: #fff; border-color: transparent; box-shadow: var(--shadow-blue); }
.team-chip__n { font-size: .75rem; opacity: .65; margin-left: 3px; }
.team-chip.is-active .team-chip__n { opacity: .9; }

.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
  padding: 24px; text-align: center; transition: transform .4s var(--ease), background .4s, border-color .4s;
  position: relative; overflow: hidden;
}
.section--navy .team-card:hover { transform: translateY(-6px); background: rgba(53,192,181,.14); border-color: rgba(53,192,181,.4); }
.team-card__avatar {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: #fff;
  background: var(--grad-accent); box-shadow: var(--shadow-blue);
}
/* Portrait dauerhaft im Vordergrund; Name + Funktion erscheinen bei Hover (Desktop) / im Blickfeld (mobil) */
.team-card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  border-radius: inherit; z-index: 0; opacity: 0; transform: scale(1.04);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.team-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top, rgba(6,18,34,.92) 0%, rgba(6,18,34,.55) 42%, rgba(6,18,34,.15) 100%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.team-card__avatar, .team-card h4, .team-card p { position: relative; z-index: 2; }
.team-card__avatar { transition: opacity .4s var(--ease), transform .4s var(--ease); }

/* Karten MIT Foto: Portrait als Hochformat-Rahmen, immer sichtbar */
.team-card.has-photo {
  padding: 0; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end;
}
.team-card.has-photo .team-card__avatar { display: none; }
.team-card.has-photo .team-card__photo { opacity: 1; transform: scale(1); }
.team-card.has-photo h4, .team-card.has-photo p {
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.team-card.has-photo h4 { padding: 0 14px; }
.team-card.has-photo p  { padding: 4px 14px 18px; }
/* Hover (Desktop) / im Blickfeld (mobil): Foto leicht zoomen, Verlauf + Text einblenden */
.team-card.has-photo:hover .team-card__photo,
.team-card.has-photo.is-active .team-card__photo { transform: scale(1.05); }
.team-card.has-photo:hover::after,
.team-card.has-photo.is-active::after { opacity: 1; }
.team-card.has-photo:hover h4, .team-card.has-photo.is-active h4,
.team-card.has-photo:hover p,  .team-card.has-photo.is-active p { opacity: 1; transform: none; }

/* Ausblenden über die Filter-Chips.
   ACHTUNG: Diese Regel braucht die höhere Spezifität (".team__grid" davor) UND
   muss nach ".team-card.has-photo" stehen – sonst gewinnt dessen "display:flex"
   und der Filter bleibt bei allen Karten MIT Foto wirkungslos. */
.team__grid .team-card.is-hidden { display: none; }
.team-card h4 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.team-card__note { color: var(--mint-300); font-weight: 500; font-size: .82em; white-space: nowrap; }
.team-card p { color: #a9c2e0; font-size: .84rem; line-height: 1.5; margin: 0; }
@media (max-width: 980px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .team__grid { grid-template-columns: 1fr; } }

/* =========================================================
   ZUKUNFTSPROJEKT JOHANOVUM
   ========================================================= */
.joh-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); margin-left: 2px; box-shadow: 0 0 0 0 rgba(23,168,157,.6); animation: pulse 2.4s infinite; }
.joh__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 4vw, 54px); align-items: center; }
.joh__text > p { color: var(--slate); font-size: 1.05rem; margin-bottom: 28px; }
.joh__text strong { color: var(--navy-800); font-weight: 700; }
.joh__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.joh-stat {
  flex: 1 1 140px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.joh-stat strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--teal-600); line-height: 1.1; }
.joh-stat span { font-size: .84rem; color: var(--slate); }
.joh__badge {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  color: var(--teal-600); background: var(--sky-100); border: 1px solid #c7ece8; padding: 8px 16px; border-radius: 999px;
}

.joh__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.joh-shot { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; box-shadow: var(--shadow-sm); background: var(--sky-100); }
.joh-shot--hero { aspect-ratio: 4/3; height: 100%; }
.joh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.joh-shot:hover img { transform: scale(1.06); }
@media (max-width: 800px) {
  .joh__grid { grid-template-columns: 1fr; }
  .joh__gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .joh__gallery { grid-template-columns: 1fr; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px); background: rgba(6, 20, 38, .93); backdrop-filter: blur(4px);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: lb-in .28s ease; object-fit: contain;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.lightbox__close, .lightbox__nav {
  position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: 18px; right: 20px; width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2.2rem; line-height: 1; }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
@media (max-width: 620px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.8rem; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* =========================================================
   BEWERTUNGEN
   ========================================================= */
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.review-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px;
  box-shadow: var(--shadow-sm); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.review-card__quote { font-family: var(--font-head); font-size: 4rem; line-height: .6; color: var(--blue-200); height: 30px; }
.review-card__stars { display: flex; gap: 3px; margin: 16px 0 18px; }
.review-card__stars svg { width: 20px; height: 20px; color: #ffb400; }
.review-card p { color: var(--slate); font-size: .96rem; margin-bottom: 22px; }
.review-card__author { display: flex; align-items: center; gap: 14px; }
.review-card__author .av { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-hero); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 700; }
.review-card__author strong { display: block; font-family: var(--font-head); color: var(--navy-800); font-size: .98rem; }
.review-card__author small { color: var(--slate-light); font-size: .82rem; }
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* =========================================================
   OFFENE STELLEN
   ========================================================= */
.jobs__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin-inline: auto; }
.job-card {
  display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.job-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #cfe1fa; }
.job-card__ico { width: 56px; height: 56px; border-radius: 16px; background: var(--sky-100); display: grid; place-items: center; flex-shrink: 0; }
.job-card__ico svg { width: 28px; height: 28px; color: var(--blue-600); }
.job-card__body { flex: 1; min-width: 0; }
.job-card__body h3, .job-card__body p { overflow-wrap: anywhere; }
.job-card__body h3 { font-size: 1.15rem; margin-bottom: 4px; }
.job-card__body p { color: var(--slate); font-size: .88rem; display: flex; align-items: center; gap: 6px; margin: 0; }
.job-card__body p svg { width: 15px; height: 15px; color: var(--blue-500); }
.job-card__arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--sky-100); display: grid; place-items: center; flex-shrink: 0; transition: background .3s, transform .3s; }
.job-card__arrow svg { width: 20px; height: 20px; color: var(--blue-600); transition: color .3s; }
.job-card:hover .job-card__arrow { background: var(--grad-accent); transform: rotate(-45deg); }
.job-card:hover .job-card__arrow svg { color: #fff; }
@media (max-width: 680px) { .jobs__wrap { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 60px); align-items: start; }

.info-block + .info-block { margin-top: 26px; }
.info-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.info-card h3 { font-size: 1.15rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.info-card h3 svg { width: 22px; height: 22px; color: var(--blue-600); }
.info-list li { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; color: var(--slate); font-size: .95rem; }
.info-list li svg { width: 19px; height: 19px; color: var(--blue-500); flex-shrink: 0; margin-top: 3px; }
.info-list a:hover { color: var(--blue-600); }

.hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.hours-row:last-child { border-bottom: none; }
.hours-row .day { color: var(--slate); font-weight: 500; }
.hours-row .time { font-family: var(--font-head); color: var(--navy-800); font-weight: 500; font-size: .88rem; text-align: right; }

.langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.langs span { background: var(--sky-100); color: var(--blue-600); font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; font-family: var(--font-head); }

/* Standort-Karten */
.maps { margin-top: clamp(44px, 6vw, 72px); }
.maps__head { text-align: center; margin-bottom: 30px; }
.maps__head h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 10px; }
.maps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.map-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.map-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.map-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.map-card__bar strong { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--navy-800); }
.map-card__bar span { display: block; margin-top: 3px; font-size: .85rem; color: var(--slate); }
.map-card__route {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: var(--sky-100); color: var(--blue-600); font-family: var(--font-head); font-weight: 600;
  font-size: .85rem; padding: 9px 16px; border-radius: 999px; transition: background .25s, color .25s, transform .25s;
}
.map-card__route svg { width: 16px; height: 16px; }
.map-card__route:hover { background: var(--blue-500); color: #fff; transform: translateY(-2px); }
.map-card__frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border-top: 1px solid var(--line); background: var(--sky-100); }
.map-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }
.map-card__open {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; background: rgba(255,255,255,.94); color: var(--blue-600);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; padding: 7px 14px; border-radius: 999px;
  box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); transition: background .25s, color .25s;
}
.map-card__open:hover { background: var(--blue-500); color: #fff; }
@media (max-width: 860px) { .maps__grid { grid-template-columns: 1fr; } }

/* Contact form */
/* Sprungziel „Termin online anfragen" aus dem Willkommens-Pop-up: landet direkt auf dem Formular.
   Der Abstand haelt die sticky Navigationsleiste (81 px) frei, sonst verdeckt sie die Ueberschrift. */
#kontaktForm { scroll-margin-top: 104px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); box-shadow: var(--shadow-md); }
.form-card h3 { font-size: 1.4rem; margin-bottom: 6px; }
.form-card > p { color: var(--slate); margin-bottom: 26px; font-size: .96rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 500; font-size: .84rem; color: var(--navy-800); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .96rem; color: var(--ink); background: var(--sky-50);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .25s, box-shadow .25s, background .25s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px rgba(23,168,157,.15); }
.field[hidden] { display: none; }
.form-card .btn { width: 100%; margin-top: 22px; }
.form-note { text-align: center; margin-top: 14px; font-size: .82rem; color: var(--slate-light); }
.form-success { display: none; align-items: center; gap: 12px; background: #e9fbf2; color: #0f9e69; border-radius: 12px; padding: 14px 18px; margin-top: 18px; font-weight: 500; font-size: .92rem; }
.form-success.show { display: flex; }
.form-success svg { width: 22px; height: 22px; flex-shrink: 0; }
.form-error { display: none; align-items: center; gap: 12px; background: #fdecec; color: #d3423e; border-radius: 12px; padding: 14px 18px; margin-top: 18px; font-weight: 500; font-size: .92rem; }
.form-error.show { display: flex; }
.form-error svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .info-card h3 { font-size: 1rem; } }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band { background: var(--grad-hero); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(53,192,181,.4), transparent 70%); top: -200px; right: -100px; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 18px; }
.cta-band p { color: #cfe0f5; font-size: 1.1rem; max-width: 560px; margin: 0 auto 34px; }
.cta-band .hero__actions { justify-content: center; margin-bottom: 0; }

/* =========================================================
   WILLKOMMENS-POP-UP (gleicher Look wie das CTA-Band)
   ========================================================= */
.welcome {
  position: fixed; inset: 0; z-index: 1900; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px); background: rgba(6, 20, 38, .6); backdrop-filter: blur(4px);
}
.welcome.is-open { display: flex; }
.welcome__card {
  position: relative; overflow: hidden; width: min(640px, 100%); text-align: center;
  background: var(--grad-hero); color: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 52px) clamp(32px, 5vw, 48px);
  animation: lb-in .32s ease;
}
.welcome__card::before { content: ""; position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(53,192,181,.45), transparent 70%); top: -180px; right: -120px; pointer-events: none; }
.welcome__card > * { position: relative; z-index: 1; }
.welcome__card .eyebrow { margin-bottom: 14px; background: rgba(53,192,181,.16); border-color: rgba(53,192,181,.34); color: var(--blue-200); }
.welcome__card h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 14px; }
.welcome__card p { color: #cfe0f5; font-size: 1.05rem; max-width: 460px; margin: 0 auto 28px; }
.welcome__card .hero__actions { justify-content: center; margin-bottom: 0; }
.welcome__close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s ease;
}
.welcome__close:hover { background: rgba(255,255,255,.26); }
body.welcome-open { overflow: hidden; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--navy-900); color: #9db4d1; padding: 70px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer .brand__name { color: #fff; }
.footer__about { margin: 20px 0; font-size: .93rem; max-width: 320px; line-height: 1.7; }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: background .3s, transform .3s; }
.footer__social a:hover { background: var(--blue-600); transform: translateY(-3px); }
.footer__social svg { width: 18px; height: 18px; color: #fff; }
.footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer__col li { margin-bottom: 11px; }
.footer__col a, .footer__col p { color: #9db4d1; font-size: .93rem; transition: color .25s; }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 24px; font-size: .85rem; }
.footer__bottom a { color: #9db4d1; transition: color .25s; }
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; gap: 20px; }
/* Partnerzeile oben in der Fußzeile (29.09.2026) */
.footer__partners { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 32px; margin-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__partners-label { color: #fff; font-weight: 600; font-size: 1rem; }
.footer__partners ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer__partners a { color: #9db4d1; font-size: .93rem; transition: color .25s; }
.footer__partners a:hover { color: #fff; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* =========================================================
   SCROLL REVEAL & MISC
   ========================================================= */
/* Nur wenn JavaScript aktiv ist, werden Abschnitte zunächst ausgeblendet (Absicherung gegen leere Seite bei JS-Fehler) */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-accent); z-index: 200; transition: width .1s linear; }

/* Back to top */
.to-top { position: fixed; right: 24px; bottom: 24px; width: 50px; height: 50px; border-radius: 50%; background: var(--navy-800); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(20px); transition: .4s var(--ease); z-index: 90; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue-600); transform: translateY(-4px); }
.to-top svg { width: 22px; height: 22px; }

/* Floating WhatsApp */
.wa-float { position: fixed; left: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.45); z-index: 90; transition: transform .3s; }
.wa-float:hover { transform: scale(1.08) translateY(-3px); }
.wa-float svg { width: 30px; height: 30px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* =========================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================= */
.legal-nav { position: static; background: #fff; border-bottom: 1px solid var(--line); }
.legal { max-width: 840px; }
.legal__back { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-600); font-family: var(--font-head); font-weight: 600; font-size: .92rem; margin-bottom: 24px; }
.legal__back svg { width: 18px; height: 18px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 8px; }
.legal__lead { color: var(--slate); margin-bottom: 34px; }
.legal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.legal-card h2 { font-size: 1.18rem; margin-bottom: 14px; color: var(--navy-800); }
.legal-card h3 { font-size: 1rem; margin: 16px 0 6px; color: var(--navy-700); }
.legal-card p { color: var(--slate); margin-bottom: 12px; line-height: 1.75; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card a { color: var(--blue-600); }
.legal-card ul { margin: 0 0 12px; padding-left: 4px; }
.legal-card ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--slate); line-height: 1.7; margin-bottom: 8px; }
.legal-card ul li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--teal-500); }
.legal-row { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.legal-row:last-child { border-bottom: 0; }
.legal-row span:first-child { min-width: 200px; font-family: var(--font-head); font-weight: 600; color: var(--navy-800); font-size: .92rem; }
.legal-row span:last-child { color: var(--slate); }
.legal-note { font-size: .85rem; color: var(--slate-light); margin-top: 10px; }

/* =========================================================
   KIPP-EFFEKT AUF KARTEN (js/main.js, Block „Kipp-Effekt")
   ========================================================= */
/* Karten neigen sich zur Maus (Klasse setzt js/main.js nur auf Maus-Geräten).
   --lift = die bisherige Hover-Anhebung der jeweiligen Karte. */
.tilt-on {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, -6px)) !important;
  transition: transform .15s ease-out, box-shadow .4s var(--ease), border-color .4s !important;
  will-change: transform;
}
.doc-card.tilt-on, .review-card.tilt-on, .value-card.tilt-on { --lift: -8px; }
.job-card.tilt-on { --lift: -5px; }
@media (prefers-reduced-motion: reduce) {
  .tilt-on { transform: none !important; }
}

/* =========================================================
   3D-HEADER „ZAHNLANDSCHAFT" (js/hero3d.js, Daten assets/3d/molaren.bin)
   Klasse .hero--3d setzt das Skript erst, wenn Modell + WebGL bereit sind –
   vorher/ohne JS bleibt der Foto-Header.
   ========================================================= */
.hero__3d {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.8s ease;
  /* links (Text) und unten (Welle) ausblenden */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 30%, #000 58%), linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 30%, #000 58%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__3d.is-ready { opacity: 1; }
.hero--3d { background: linear-gradient(135deg, #122c34 0%, #1c414b 50%, #2a6570 100%); }
.hero--3d .hero__slideshow { opacity: 0; visibility: hidden; }
.hero--3d .hero__grid-lines { display: none; }
.hero--3d .hero__overlay {
  background:
    radial-gradient(ellipse 60% 70% at 72% 45%, rgba(31,179,167,.16), transparent 70%),
    linear-gradient(180deg, rgba(4,18,31,.0) 0%, rgba(4,18,31,.35) 100%);
}
@media (max-width: 640px) {
  .hero__3d { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 60%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 60%, transparent 100%); }
}

/* =========================================================
   ÜBER UNS – DUNKLES KAPITEL (2026-09-04, Stil wie der 3D-Header)
   Festes Bildfeld links, Kapitel rechts ziehen vorbei; Leitlinien als Liste.
   ========================================================= */
.about--dark {
  background: linear-gradient(180deg, #0f3d5c 0%, #0a2947 26%, #08203c 100%);
  color: #dbe6f5; padding-top: clamp(30px, 4vw, 60px);
}
.about--dark h2, .about--dark h3 { color: #fff; }

/* Kauflächen-Silhouette am Header-Ende (nur im 3D-Modus sichtbar, Pfad kommt aus js/hero3d.js) */
.hero__ridge { display: none; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 9vw, 140px); z-index: 2; }
.hero__ridge #ridgeFill { fill: #0f3d5c; }
.hero__ridge #ridgeLine { fill: none; stroke: #6fcec4; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .9; filter: drop-shadow(0 0 6px rgba(102,196,196,.7)); }
.hero--3d .hero__ridge { display: block; }
.hero--3d .hero__wave { display: none; }

/* Kleiner Vorspann mit Linie (ersetzt die Pillen-Eyebrow im dunklen Teil) */
.eyebrow-line {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-head); font-weight: 500; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mint-300);
}
.eyebrow-line::before { content: ""; width: 34px; height: 1px; background: var(--mint-400); flex-shrink: 0; }
.eyebrow-line b { font-weight: 600; color: #fff; letter-spacing: .1em; }

/* Kapitel-Erzählung */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.story__media { position: sticky; top: 96px; height: calc(100vh - 128px); min-height: 420px; max-height: 760px; }
.story__frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background: #071a30; }
.story__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); filter: saturate(.85) brightness(.88);
  transition: opacity 1.1s ease, transform 1.4s ease;
}
.story__img.is-active { opacity: 1; transform: scale(1); }
.story__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,50,58,0) 55%, rgba(22,50,58,.75) 100%); pointer-events: none; }
.story__loc {
  position: absolute; left: 24px; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #d4ece9;
}
.story__loc i { width: 28px; height: 1px; background: var(--mint-400); }
.story__chapters { display: flex; flex-direction: column; }
.story__chapter {
  min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0;
  opacity: .22; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease;
}
.story__chapter.is-active { opacity: 1; transform: none; }
.story__chapter:first-child { padding-top: 2vh; }
.story__key {
  font-family: var(--font-head); font-weight: 400; letter-spacing: -.012em; line-height: 1.22;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem); color: #fff; margin: 20px 0 22px;
}
.story__chapter p { color: #b9cbe4; font-size: 1.02rem; line-height: 1.75; max-width: 540px; margin-bottom: 16px; }
.story__chapter p.story__key { max-width: 620px; }
.story__chapter .signature { font-family: var(--font-head); font-weight: 600; color: var(--mint-300); font-size: 1.1rem; margin-top: 6px; }

/* Leitlinien-Liste */
.principles { margin-top: clamp(60px, 8vw, 110px); }
.principles__head { margin-bottom: 26px; }
.principles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.principle {
  display: grid; grid-template-columns: 72px 1fr 1.7fr; gap: 28px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.12); position: relative;
}
.principle::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--mint-400), rgba(102,196,196,0));
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .25s;
}
.principle.in::after { transform: scaleX(1); }
.principle__num { font-family: var(--font-head); font-weight: 500; font-size: .9rem; letter-spacing: .12em; color: var(--mint-400); }
.principle h3 { font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.7rem); margin: 0; letter-spacing: -.01em; transition: color .3s, transform .45s var(--ease); }
.principle p { margin: 0; color: #a9bfd9; font-size: .98rem; line-height: 1.7; }
.principle:hover h3 { color: var(--mint-300); transform: translateX(6px); }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 28px; }
  .story__media { position: static; height: auto; min-height: 0; aspect-ratio: 16/10; }
  .story__chapter { min-height: 0; padding: 26px 0; opacity: 1; transform: none; }
  .story__chapter:first-child { padding-top: 0; }
  .principle { grid-template-columns: 52px 1fr; gap: 12px 20px; padding: 24px 0; }
  .principle p { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .story__img, .story__chapter, .principle::after, .principle h3 { transition: none; }
  .story__chapter { opacity: 1; transform: none; }
}

/* Vertrauens-Leiste zwischen Header und „Über uns": dunkel, damit das Kapitel durchläuft (2026-09-04) */
.trust { background: #0f3d5c; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.trust__item { color: #cfe0f5; }
.trust__item svg { color: var(--mint-400); }
@media (max-width: 640px) { .story__loc { font-size: .66rem; letter-spacing: .1em; left: 16px; bottom: 14px; } }

/* =========================================================
   VERLAUFSBAND (2026-09-04): kein harter Schnitt nach „Über uns" –
   Ärzt:innen + Leistungen liegen auf EINEM Verlauf von Dunkelblau
   über hellere Blautöne bis zum hellen Logo-Mint.
   ========================================================= */
.fade-band {
  /* Stopps in Pixeln, damit die Übergänge auf jeder Bildschirmgröße gleich lang bleiben */
  background: linear-gradient(180deg,
    #08203c 0px,                 /* = Ende „Über uns" */
    #0f3a5e 650px,
    #1f6688 1300px,
    #3d8fa8 1900px,
    #a9dbd9 2450px,
    #d9f2ef 3000px,
    #f2fbfa 3700px,              /* helles Logo-Mint (--sky-50) */
    #f2fbfa calc(100% - 820px),
    #d3e6ec calc(100% - 600px),
    #7fa6bd calc(100% - 400px),
    #33587a calc(100% - 200px),
    #0c2b4e 100%);               /* = Team-Sektion (--navy-800), langer weicher Übergang */
}
.fade-band .section { background: transparent; }
/* Ärzt:innen-Kopf steht noch auf dunklem Grund -> helle Schrift */
#aerzte .section-title { color: #fff; }
#aerzte .section-sub { color: #cfe0f5; }
#aerzte .section-head .eyebrow { background: rgba(53,192,181,.16); border-color: rgba(53,192,181,.34); color: var(--blue-200); }

/* Weiche Kanten zwischen dunklen und hellen Sektionen (2026-09-04) */
.soft-top { padding-top: calc(clamp(70px, 9vw, 130px) + 90px); }
.soft-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; background: linear-gradient(180deg, var(--navy-800) 0%, rgba(68,73,77,0) 100%); pointer-events: none; }
.soft-bottom { padding-bottom: calc(clamp(70px, 9vw, 130px) + 90px); }
.soft-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(22,50,58,0) 0%, #08203c 100%); pointer-events: none; }
.soft-top > .container, .soft-bottom > .container { position: relative; z-index: 1; }
/* CTA-Band: senkrechter Verlauf Navy -> Türkis -> Navy, läuft weich in den Footer */
.cta-band { background: linear-gradient(180deg, #08203c 0%, #0b3350 40%, #0d4a5f 62%, #0a3049 84%, #08203c 100%); }

/* =========================================================
   STIL-DURCHZUG (2026-09-04): leichtere Überschriften, Vorspann mit
   Linie statt Pille auf der ganzen Seite, helle Sektionen ohne Kanten.
   ========================================================= */
/* Überschriften: Titel leichter (500), Karten-Titel 600 */
h1, h2 { font-weight: 500; letter-spacing: -.02em; }
h3, h4 { font-weight: 600; }
.hero h1 { font-weight: 500; }
.hero h1 .accent { font-weight: 600; }
.section-title { font-weight: 500; }
.hero__stat .num { font-weight: 600; }

/* Eyebrow: überall Linie + gesperrte Versalien, keine Pille mehr */
.eyebrow, .section--navy .eyebrow, .welcome__card .eyebrow, #aerzte .section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-head); font-weight: 500; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.eyebrow { color: var(--teal-600); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--teal-500); flex-shrink: 0; }
.section--navy .eyebrow, .welcome__card .eyebrow, #aerzte .section-head .eyebrow { color: var(--mint-300); }
.section--navy .eyebrow::before, .welcome__card .eyebrow::before, #aerzte .section-head .eyebrow::before { background: var(--mint-400); }
.eyebrow .joh-pulse { margin-left: 2px; }

/* Helle Sektionen: Mint-Hauch nur in der Mitte, Ränder weiß -> keine Kante zu weißen Nachbarn */
.section--tint { background: linear-gradient(180deg, #ffffff 0%, var(--sky-50) 50%, #ffffff 100%); }

/* „Über uns", zweites Bild (Behandlungsraum Ordination 2): Ausschnitt weiter rechts, Behandlungsstuhl im Bild */
.story__img:nth-child(2) { object-position: 82% center; }

/* Kauflächen-Silhouette am Header-Ende auf Wunsch AUS (2026-09-04) – stattdessen weicher Verlauf in „Über uns".
   Wieder einschalten: diese zwei Regeln entfernen. */
.hero--3d .hero__ridge { display: none; }
.hero--3d::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,69,81,0) 0%, #1e4551 100%); }

/* =========================================================
   ZUKUNFTSPROJEKT JOHANOVUM – Kapitel-Stil, hell (2026-09-04)
   ========================================================= */
#johanovum .joh__head { max-width: 860px; margin-bottom: clamp(30px, 4vw, 48px); }
#johanovum .joh__key {
  font-weight: 400; letter-spacing: -.015em; line-height: 1.16;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem); color: var(--navy-800); margin: 20px 0 20px;
}
#johanovum .joh__lead { color: var(--slate); font-size: 1.05rem; line-height: 1.75; max-width: 680px; margin: 0; }

/* Kennzahlen als Zeile mit dünnen Trennlinien */
#johanovum .joh__facts {
  list-style: none; margin: 0 0 clamp(30px, 4vw, 48px); padding: 22px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  border-top: 1px solid rgba(68,73,77,.12); border-bottom: 1px solid rgba(68,73,77,.12);
}
#johanovum .joh__facts li { display: flex; flex-direction: column; gap: 6px; padding: 6px 40px 6px 0; margin-right: 40px; border-right: 1px solid rgba(68,73,77,.12); }
#johanovum .joh__facts li strong { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--navy-800); letter-spacing: -.02em; }
#johanovum .joh__facts li span { font-family: var(--font-head); font-weight: 500; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600); }
#johanovum .joh__facts li.joh__facts-status { margin-left: auto; margin-right: 0; padding-right: 0; border-right: 0; }
#johanovum .joh__facts-status .eyebrow { gap: 10px; }
#johanovum .joh__facts-status .joh-pulse { margin: 0; }

/* Fotos: rahmenlos, enges Raster, Titelbild 2×2, zwei Breitbilder unten */
#johanovum .joh__gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 8px; margin-top: 0; }
#johanovum .joh-shot { border-radius: 0; box-shadow: none; aspect-ratio: 4/3; height: auto; background: #dfe9ee; }
#johanovum .joh-shot--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }
#johanovum .joh-shot--wide { grid-column: span 2; aspect-ratio: 8/3; }
#johanovum .joh-shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal-500);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
#johanovum .joh-shot:hover::after { transform: scaleX(1); }
#johanovum .joh-shot img { filter: saturate(.92); transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .4s; }
#johanovum .joh-shot:hover img { transform: scale(1.04); filter: saturate(1); }

/* Partner-Zeile */
#johanovum .joh__partners {
  margin: 28px 0 0; font-family: var(--font-head); font-weight: 500; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-light);
}
#johanovum .joh__partners span { color: var(--teal-600); margin-right: 14px; }
#johanovum .joh__partners span::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--teal-500); vertical-align: middle; margin-left: 14px; }

@media (max-width: 900px) {
  #johanovum .joh__gallery { grid-template-columns: repeat(2, 1fr); }
  #johanovum .joh-shot--hero { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; height: auto; }
  #johanovum .joh-shot--wide { grid-column: span 1; aspect-ratio: 4/3; }
}
@media (max-width: 640px) {
  #johanovum .joh__facts li { padding-right: 22px; margin-right: 22px; }
  #johanovum .joh__facts li.joh__facts-status { flex-basis: 100%; margin-top: 14px; }
}
@media (max-width: 640px) {
  #johanovum .joh__facts { gap: 18px 0; }
  #johanovum .joh__facts li { flex: 1 1 46%; border-right: 0; margin-right: 0; padding-right: 8px; }
}

/* =========================================================
   FEINSCHLIFF (2026-09-05): ruhige Karten, Bewertungen ohne Kästchen,
   Formular mit Unterlinien. Steht bewusst am ENDE der Datei, damit die
   Regeln bei gleicher Spezifität gegen die älteren Blöcke gewinnen.
   ========================================================= */

/* 1) EINE Karten-Grammatik für alle hellen Karten: dünner Rand, kein Schatten,
      beim Hover nur eine türkise Linie am unteren Rand – kein Hochschweben mehr. */
.serv-card, .job-card, .info-card, .map-card, .form-card, .doc-card {
  box-shadow: none; border: 1px solid rgba(68,73,77,.11); border-radius: 16px;
  position: relative; overflow: hidden;
}
.doc-card { border-radius: var(--radius-lg); } /* Ärzt:innen behalten die große Rundung */
.serv-card:hover, .job-card:hover, .info-card:hover, .map-card:hover, .doc-card:hover {
  transform: none; box-shadow: none; border-color: rgba(23,168,157,.45);
}
.serv-card::before, .job-card::before, .info-card::before, .map-card::before, .doc-card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal-500);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: 3; pointer-events: none;
}
.serv-card:hover::before, .job-card:hover::before, .info-card:hover::before, .map-card:hover::before, .doc-card:hover::before { transform: scaleX(1); }
.serv-card::after { display: none; } /* der wachsende Mint-Kreis in der Ecke entfällt */
/* Kipp-Effekt bleibt (3°), aber ohne Anheben */
.doc-card.tilt-on, .serv-card.tilt-on, .job-card.tilt-on, .value-card.tilt-on { --lift: 0px; }
/* Icons flach: einfarbiges Türkis statt Verlauf + Leuchtschatten (die Icons sind weiß, brauchen also einen satten Grund) */
.serv-card__ico { background: var(--teal-500); box-shadow: none; border-radius: 12px; }
.job-card:hover .job-card__arrow { background: var(--teal-500); }
.job-card:hover { border-color: rgba(23,168,157,.45); }

/* 2) BEWERTUNGEN ohne Kästchen: drei Zitate nebeneinander, durch dünne Linien getrennt.
      Texte und Bezeichnungen (Patient/Patientin) sind unverändert. */
.reviews__grid { gap: 0; }
.review-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 8px clamp(22px, 3vw, 44px); border-left: 1px solid rgba(68,73,77,.12);
  display: flex; flex-direction: column;
}
.review-card:first-child { border-left: 0; padding-left: 0; }
.review-card:last-child { padding-right: 0; }
.review-card:hover { transform: none; box-shadow: none; }
.review-card.tilt-on { transform: none !important; }
.review-card__quote { font-weight: 300; font-size: 5.2rem; line-height: .7; height: 44px; color: var(--mint-300); }
.review-card__stars { margin: 10px 0 18px; gap: 2px; }
.review-card__stars svg { width: 15px; height: 15px; }
.review-card p { font-size: .98rem; line-height: 1.75; color: var(--slate); margin-bottom: 26px; flex: 1; }
.review-card__author { border-top: 1px solid rgba(68,73,77,.12); padding-top: 16px; gap: 0; }
.review-card__author .av { display: none; }
.review-card__author strong { font-weight: 500; font-size: 1rem; color: var(--navy-800); }
.review-card__author small {
  display: block; margin-top: 4px; font-family: var(--font-head); font-weight: 500;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-600);
}
@media (max-width: 900px) {
  .review-card { border-left: 0; padding: 28px 0; border-top: 1px solid rgba(68,73,77,.12); }
  .review-card:first-child { border-top: 0; padding-top: 0; }
}

/* 3) KONTAKT-FORMULAR: Felder mit Unterlinie statt Kasten, kleine gesperrte Beschriftung,
      Absenden-Knopf kompakt wie im Header. */
.field { --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); gap: 4px; }
.form-grid { gap: 22px 28px; }
.field label { font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(68,73,77,.22); border-radius: 0;
  padding: 10px 2px 12px; font-size: 1rem; color: var(--ink);
}
.field textarea { min-height: 84px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background-image: var(--chev); background-repeat: no-repeat; background-position: right 4px center; background-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus {
  background-color: transparent; border-color: var(--teal-500); box-shadow: 0 1px 0 0 var(--teal-500);
}
.field select:focus { background-image: var(--chev); background-repeat: no-repeat; background-position: right 4px center; background-size: 14px; } /* die alte Fokus-Regel setzt "background" als Kurzform zurück -> ohne diese Angaben wird der Pfeil über die ganze Zeile gekachelt */
.form-card .btn { width: auto; margin-top: 30px; }
.form-note { text-align: left; }
.form-card { padding: clamp(28px, 4vw, 40px); }

/* =========================================================
   UMBAU (2026-09-05): Ärzt:innen direkt nach dem Header, „Über uns" hell
   im Johanovum-Aufbau, Header dunkler, Verlauf schneller ins Türkis,
   Gitter blendet nach den Behandlerkarten aus, Bewerbungs-Karte im Team.
   ========================================================= */
/* Header: dunklerer Start, läuft unten in die Farbe des Verlaufsbands */
.hero--3d { background: linear-gradient(135deg, #122c34 0%, #1c414b 50%, #2a6570 100%); }
.hero--3d::after { background: linear-gradient(180deg, rgba(30,69,81,0) 0%, #1e4551 100%); }

/* Verlaufsband = Vertrauens-Leiste + Ärzt:innen: schnell von Dunkelblau ins helle Türkis/Mint (Stopps in px) */
.fade-band {
  position: relative;
  background: linear-gradient(180deg,
    #0b2f4d 0px, #0f4568 380px, #166f80 800px, #3aa39f 1200px, #9fdcd6 1600px, #e4f6f3 2000px,
    #f2fbfa 2300px, #f2fbfa calc(100% - 240px), #ffffff 100%);
}
.fade-band > * { position: relative; z-index: 1; }
.fade-band .trust { background: transparent; border-top: 0; border-bottom-color: rgba(255,255,255,.1); }
/* Gitter unter dem Header: auf Wunsch wieder AUS (2026-09-05). Regel bleibt zum Reaktivieren stehen, nur "display: none" entfernen. */
.fade-band::before {
  content: ""; display: none; position: absolute; left: 0; right: 0; top: 0; height: 2400px; max-height: 100%; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(102,196,196,.30) 1px, transparent 1px), linear-gradient(90deg, rgba(102,196,196,.30) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0, rgba(0,0,0,.75) 1100px, rgba(0,0,0,.35) 1800px, transparent 2400px);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0, rgba(0,0,0,.75) 1100px, rgba(0,0,0,.35) 1800px, transparent 2400px);
}

/* „Über uns" hell – Aufbau wie Johanovum */
.about-light .about__head { max-width: 860px; margin-bottom: clamp(30px, 4vw, 48px); }
.about-light .about__key { font-weight: 400; letter-spacing: -.015em; line-height: 1.16; font-size: clamp(1.8rem, 3.4vw, 2.9rem); color: var(--navy-800); margin: 20px 0 20px; }
.about-light .about__lead { color: var(--slate); font-size: 1.05rem; line-height: 1.75; max-width: 720px; margin: 0; }
.about-light .about__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px);
  padding: clamp(26px, 3vw, 40px) 0; margin-bottom: clamp(30px, 4vw, 48px);
  border-top: 1px solid rgba(68,73,77,.12); border-bottom: 1px solid rgba(68,73,77,.12);
}
.about-light .about__cols .eyebrow { margin-bottom: 14px; }
.about-light .about__cols p { color: var(--slate); font-size: 1rem; line-height: 1.75; margin: 0 0 12px; }
.about-light .signature { font-family: var(--font-head); font-weight: 600; color: var(--teal-600); }
/* Fotos rahmenlos, enges Raster: Titelbild 2×2, vier kleine, zwei Breitbilder */
.about-light .about__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.about-light .joh-shot { border-radius: 0; box-shadow: none; aspect-ratio: 4/3; height: auto; background: #dfe9ee; }
.about-light .joh-shot--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }
.about-light .joh-shot--wide { grid-column: span 2; aspect-ratio: 8/3; }
.about-light .joh-shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal-500);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: 2;
}
.about-light .joh-shot:hover::after { transform: scaleX(1); }
.about-light .joh-shot img { filter: saturate(.92); transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .4s; }
.about-light .joh-shot:hover img { transform: scale(1.04); filter: saturate(1); }
/* Drei Rahmen der Praxis-Galerie wechseln ihr Bild (js/main.js, Block „Praxis-Galerie").
   Dafür muss opacity mit überblendet werden; die 0.45s müssen zu BLENDE_MS im Skript passen. */
.about-light .about__gallery .joh-shot img { transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .4s, opacity .45s ease; }
.about-light .joh-shot figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1; pointer-events: none;
  font-family: var(--font-head); font-weight: 500; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s;
}
.about-light .joh-shot:hover figcaption { opacity: 1; transform: none; }
.about-light .about__locs { margin: 28px 0 0; font-family: var(--font-head); font-weight: 500; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-light); }
.about-light .about__locs span { color: var(--teal-600); margin-right: 14px; }
.about-light .about__locs span::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--teal-500); vertical-align: middle; margin-left: 14px; }
/* Leitlinien-Liste in hell */
.about-light .principles { margin-top: clamp(50px, 6vw, 90px); }
.about-light .principles__list { border-top-color: rgba(68,73,77,.12); }
.about-light .principle { border-bottom-color: rgba(68,73,77,.12); }
.about-light .principle::after { background: linear-gradient(90deg, var(--teal-500), rgba(23,168,157,0)); }
.about-light .principle__num { color: var(--teal-600); }
.about-light .principle h3 { color: var(--navy-800); }
.about-light .principle p { color: var(--slate); }
.about-light .principle:hover h3 { color: var(--teal-600); }
@media (max-width: 900px) {
  .about-light .about__gallery { grid-template-columns: repeat(2, 1fr); }
  .about-light .joh-shot--hero { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; height: auto; }
  .about-light .joh-shot--wide { grid-column: span 1; aspect-ratio: 4/3; }
}
@media (max-width: 700px) { .about-light .about__cols { grid-template-columns: 1fr; } }

/* Leistungen laufen unten weich in die Team-Sektion (Navy-800 statt Navy-900) */
.soft-bottom--team::after { background: linear-gradient(180deg, rgba(68,73,77,0) 0%, #0c2b4e 100%); }

/* Team: Bewerbungs-Karte („Hier könnte dein Bild sein") */
.team-card--cta {
  aspect-ratio: 4/5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; border: 1px dashed rgba(102,196,196,.5); background: rgba(53,192,181,.05);
}
.section--navy .team-card--cta:hover { transform: none; background: rgba(53,192,181,.12); border-color: var(--mint-400); }
.team-card--cta .team-card__plus, .team-card--cta .team-card__go { position: relative; z-index: 2; }
.team-card--cta .team-card__plus {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--mint-400); display: grid; place-items: center;
  color: var(--mint-300); font-family: var(--font-head); font-weight: 300; font-size: 2rem; line-height: 1;
  transition: transform .4s var(--ease), background .3s;
}
.team-card--cta:hover .team-card__plus { transform: rotate(90deg); background: rgba(102,196,196,.15); }
.team-card--cta h4 { margin: 6px 0 0; font-weight: 500; }
.team-card--cta p { color: var(--mint-300); }
.team-card--cta .team-card__go {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; color: #fff;
  font-family: var(--font-head); font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
}
.team-card--cta .team-card__go::after { content: "→"; }
@media (max-width: 440px) { .team-card--cta { aspect-ratio: auto; min-height: 220px; } }
/* Team auf Türkis-Verlauf statt flachem Navy (2026-09-05, Wunsch: „das Türkis, das hinter den Behandlern ist").
   Übergänge: Leistungen blenden unten ins Türkis, Johanovum blendet oben aus dem Türkis – kein harter Schnitt. */
#team.section--navy { background: linear-gradient(180deg, #145f72 0%, #1a7d86 55%, #229590 100%); }
.soft-bottom--team::after { background: linear-gradient(180deg, rgba(20,95,114,0) 0%, #145f72 100%); height: 300px; }
#johanovum.soft-top::before { background: linear-gradient(180deg, #229590 0%, rgba(34,149,144,0) 100%); height: 300px; }
.soft-bottom--team { padding-bottom: calc(clamp(70px, 9vw, 130px) + 150px); }
#johanovum.soft-top { padding-top: calc(clamp(70px, 9vw, 130px) + 150px); }
/* Bewerbungs-Karte wieder HOCHKANT wie die anderen Karten (2026-09-05, Wunsch) – Text-Block zentriert */
.team-card--cta .team-card__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Logo-Schriftzug: „smile" in derselben Farbe wie „pure" (2026-09-05, Wunsch) – im Footer damit weiß */
.brand__name span { color: inherit; }

/* =========================================================
   LEISTUNGEN: Kategorie-Chips + kompakte Karten am Handy (2026-09-06)
   ========================================================= */
.serv__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -10px 0 34px; }
/* Chips auf hellem Grund (die Team-Chips sind für dunklen Grund gemacht) */
.serv-chip { color: var(--slate); background: #fff; border-color: rgba(68,73,77,.16); box-shadow: none; }
.serv-chip:hover { color: var(--navy-800); border-color: var(--teal-500); transform: none; }
.serv-chip.is-active { background: var(--teal-500); color: #fff; border-color: var(--teal-500); box-shadow: none; }
.serv-chip .team-chip__n { opacity: .6; }
.serv__grid .serv-card.is-hidden { display: none; }

@media (max-width: 620px) {
  .serv__filter { justify-content: flex-start; gap: 8px; margin-bottom: 22px; }
  .serv-chip { font-size: .82rem; padding: 8px 14px; }
  .serv__grid { gap: 10px; }
  /* Karte = eine Zeile: Icon · Titel · Pfeil. Text + „Mehr lesen" erst nach dem Antippen. */
  .serv-card { display: grid; grid-template-columns: 40px 1fr 18px; column-gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
  .serv-card__ico { width: 40px; height: 40px; margin: 0; border-radius: 10px; }
  .serv-card__ico img, .serv-card__ico svg { width: 26px; height: 26px; }
  .serv-card h3 { font-size: 1rem; margin: 0; line-height: 1.3; }
  .serv-card::after {
    content: ""; display: block; position: static; grid-column: 3; grid-row: 1; width: 18px; height: 18px; border-radius: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
    transform: none; transition: transform .35s var(--ease);
  }
  .serv-card:hover::after { transform: none; }
  .serv-card.open::after { transform: rotate(180deg); }
  .serv-card__text { grid-column: 1 / -1; display: none; margin-top: 10px; }
  .serv-card.open .serv-card__text { display: block; }
  .serv-card.open .serv-card__text p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  .serv-toggle { grid-column: 1 / -1; display: none; margin-top: 6px; }
  .serv-card.open .serv-toggle { display: inline-flex; }
}

/* =========================================================
   DURCHGEHENDER VERLAUF (2026-09-07, Wunsch: „von ganz oben bis ganz unten
   dunkelblau → türkis → weiß"). Umgesetzt als KETTE: jede Sektion hat einen
   eigenen Verlauf, dessen Anfangsfarbe exakt die Endfarbe der Sektion davor ist –
   so bleibt es auf jeder Bildschirmgröße nahtlos (ein einziger Body-Verlauf
   würde am Handy an den falschen Stellen umschlagen).
   Kette: Header #0b2f4d → Ärzt:innen schnell ins Türkis #145f72 → #1a7d86
   → Über uns → #1e8a8b → Leistungen → #229590 → Team → #27a49c → Johanovum blendet
   ins Weiß → Bewertungen/Kontakt/Jobs hell → CTA-Band + Footer navy (wie gehabt).
   Rückbau: Klassen in index.html zurück (ueber-uns/leistungen wieder section--tint,
   Leistungen wieder soft-bottom soft-bottom--team) und diesen Block löschen.
   ========================================================= */
/* 1) Vertrauens-Leiste + Ärzt:innen: Dunkelblau nur kurz, dann Türkis */
.fade-band {
  background: linear-gradient(180deg,
    #1e4551 0px, #2a5561 400px, #38636d 900px, #3a7480 1400px, #2f8b94 100%);
}
/* 2) Über uns auf Türkis */
#ueber-uns.section--navy { background: linear-gradient(180deg, #2f8b94 0%, #159aa4 100%); color: #e6f2f6; }
#ueber-uns .about__key { color: #fff; }
#ueber-uns .about__lead { color: rgba(255,255,255,.86); }
#ueber-uns .about__cols { border-top-color: rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.18); }
#ueber-uns .about__cols p { color: rgba(255,255,255,.88); }
#ueber-uns .signature { color: var(--mint-300); }
#ueber-uns .joh-shot::after { background: var(--mint-300); }
#ueber-uns .about__locs { color: rgba(255,255,255,.72); }
#ueber-uns .about__locs span { color: var(--mint-300); }
#ueber-uns .about__locs span::after { background: var(--mint-400); }
#ueber-uns .principles__list { border-top-color: rgba(255,255,255,.18); }
#ueber-uns .principle { border-bottom-color: rgba(255,255,255,.18); }
#ueber-uns .principle::after { background: linear-gradient(90deg, var(--mint-300), rgba(167,229,223,0)); }
#ueber-uns .principle__num { color: var(--mint-300); }
#ueber-uns .principle h3 { color: #fff; }
#ueber-uns .principle p { color: rgba(255,255,255,.82); }
#ueber-uns .principle:hover h3 { color: var(--mint-300); }
/* 3) Leistungen auf Türkis – Karten bleiben weiß, Chips wie im Team (für dunklen Grund) */
#leistungen.section--navy { background: linear-gradient(180deg, #159aa4 0%, #00aab4 100%); color: #e6f2f6; }
#leistungen .serv-chip { color: #e6f2f6; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
#leistungen .serv-chip:hover { color: #fff; border-color: var(--mint-300); }
#leistungen .serv-chip.is-active { background: #fff; color: var(--navy-800); border-color: #fff; }
#leistungen .serv-card { border-color: rgba(255,255,255,.35); }
/* 4) Team: etwas heller weiter, 5) Johanovum blendet aus dem Türkis ins Weiß */
#team.section--navy { background: linear-gradient(180deg, #00aab4 0%, #00b0ba 55%, #00b3bd 100%); }
#johanovum.soft-top::before { background: linear-gradient(180deg, #00b3bd 0%, rgba(0,179,189,0) 100%); height: 360px; }
/* 6) Seitenende ebenfalls HELL (2026-09-07, Wunsch „das Ende bitte auch hell"):
   Jobs ohne Navy-Ausblendung (Klasse soft-bottom in index.html entfernt),
   CTA-Band weiß → Logo-Mint, Footer Logo-Mint mit dunkler Schrift. */
.cta-band { background: linear-gradient(180deg, #ffffff 0%, #f2fbfa 100%); color: var(--ink); }
.cta-band::before { background: radial-gradient(circle, rgba(102,196,196,.28), transparent 70%); }
.cta-band h2 { color: var(--navy-800); }
.cta-band p { color: var(--slate); }
.cta-band .btn--ghost { background: transparent; color: var(--navy-800); border: 1.5px solid rgba(68,73,77,.28); backdrop-filter: none; }
.cta-band .btn--ghost:hover { background: #fff; border-color: var(--teal-500); color: var(--navy-800); }
.footer { background: #f2fbfa; color: var(--slate); border-top: 1px solid rgba(68,73,77,.08); }
.footer__grid { border-bottom-color: rgba(68,73,77,.1); }
.footer .brand__name { color: var(--navy-800); }
.footer__social a { background: #fff; border: 1px solid rgba(68,73,77,.12); }
.footer__social a:hover { background: var(--teal-500); border-color: var(--teal-500); }
.footer__social svg { color: var(--teal-600); }
.footer__social a:hover svg { color: #fff; }
.footer__col h4 { color: var(--navy-800); }
.footer__col a, .footer__col p, .footer__bottom a, .footer__bottom { color: var(--slate); }
.footer__col a:hover, .footer__bottom a:hover { color: var(--teal-600); }
/* 7) Unterer Teil nicht reinweiß, sondern leichtes Türkis (2026-09-07, Wunsch) –
   ab Johanovum bis zum Footer eine Fläche in --tint-teal; der Footer minimal kräftiger.
   Der Leuchtfleck des alten dunklen CTA-Bands (.cta-band::before) ist aus. */
:root { --tint-teal: #e7f5f3; --tint-teal-deep: #daeeec; }
#johanovum.section--tint, #bewertungen.section, #faq.section, #kontakt.section--tint, #jobs.section { background: var(--tint-teal); }
#johanovum.soft-top::before { background: linear-gradient(180deg, #00b3bd 0%, rgba(0,179,189,0) 100%); }
.cta-band { background: var(--tint-teal); }
.cta-band::before { display: none; }
.footer { background: var(--tint-teal-deep); border-top-color: rgba(68,73,77,.06); }
.footer__social a { background: #fff; }

/* =========================================================
   FLIESSTEXT +2 px (2026-09-07, Wunsch: „Fließtexte um 2 px vergrößern,
   Überschriften und Unterschriften gleich lassen"). Nur Absatztexte;
   section-sub, Eyebrows, Chips, Labels, Buttons bleiben unverändert.
   Umrechnung bei 16 px Grundschrift: 1 px = 0,0625 rem.
   ========================================================= */
.doc-card__body p, .doc-card__more p { font-size: 1.125rem; }    /* 16 → 18 px */
.doc-card__cv li { font-size: 1.025rem; }                        /* 14,4 → 16,4 px */
.serv-card p { font-size: 1.055rem; }                            /* 14,9 → 16,9 px */
.about-light .about__lead { font-size: 1.175rem; }               /* 16,8 → 18,8 px */
.about-light .about__cols p { font-size: 1.125rem; }             /* 16 → 18 px */
.principle p { font-size: 1.105rem; }                            /* 15,7 → 17,7 px */
#johanovum .joh__lead, .joh__text > p { font-size: 1.175rem; }   /* 16,8 → 18,8 px */
.review-card p { font-size: 1.105rem; }                          /* 15,7 → 17,7 px */
.cta-band p { font-size: 1.225rem; }                             /* 17,6 → 19,6 px */
.footer__about { font-size: 1.055rem; }                          /* 14,9 → 16,9 px */
.info-card p { font-size: 1.125rem; }                            /* 16 → 18 px */

/* =========================================================
   GOOGLE MAPS: Zwei-Klick-Lösung (2026-09-07). Die Karte wird erst nach
   „Karte laden" eingebunden (js/main.js baut dann das iframe ein); Zustimmung
   gilt für beide Karten und für die laufende Sitzung (sessionStorage ps-maps-ok).
   ========================================================= */
.map-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; background: linear-gradient(180deg, #eaf7f5 0%, #dff2ef 100%);
}
.map-consent p { margin: 0; max-width: 360px; font-size: .9rem; line-height: 1.55; color: var(--slate); }
.map-consent__btn { padding: 11px 20px; font-size: .9rem; }
.map-consent__more { font-size: .82rem; color: var(--teal-600); text-decoration: underline; }

/* =========================================================
   MOBIL-MENÜ-FIX (2026-09-07): backdrop-filter auf .nav machte die Leiste zum
   „Containing Block" für die position:fixed-Schublade – die weiße Schublade war
   dadurch nur so hoch wie die Leiste, die Menüpunkte hingen unlesbar über dem
   dunklen Header. Blur + Hintergrund liegen jetzt auf .nav::before, .nav selbst
   hat keinen Filter mehr → die Schublade füllt wieder den ganzen Bildschirm.
   ========================================================= */
.nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background .4s;
}
.nav.scrolled { background: transparent; }
.nav.scrolled::before { background: rgba(255,255,255,.92); }
.legal-nav { background: #fff; }
.legal-nav::before { display: none; }
/* Schließen-X (Burger) bleibt über der geöffneten Schublade sichtbar */
.nav__burger { position: relative; z-index: 95; }

/* =========================================================
   ÄRZT:INNEN-KARTEN AM HANDY EINGEKLAPPT (2026-09-07, Wunsch): unter 700 px zeigt
   die Karte nur Foto, Name und Untertitel; Vorstellungstext + Lebenslauf (+ Zusatz-
   fakten) klappen erst über „Mehr erfahren" auf. Dafür hat jetzt jede Karte den
   Knopf; bei Karten ohne Zusatzfakten (.doc-more-toggle--mobile) ist er am Desktop
   unsichtbar, weil dort ohnehin alles offen steht.
   ========================================================= */
.doc-more-toggle--mobile { display: none; }
@media (max-width: 700px) {
  .doc-card__body { padding: 22px 22px 24px; }
  .doc-card__role { margin-bottom: 0; }
  .doc-card:not(.open) .doc-card__body > p,
  .doc-card:not(.open) .doc-card__body > .doc-card__cv { display: none; }
  .doc-card.open .doc-card__body > p { margin-top: 16px; }
  .doc-more-toggle, .doc-more-toggle--mobile { display: inline-flex; margin-top: 14px; }
}

/* Standorte-Zeile unter „Über uns" (2026-09-07): am Handy ohne „Ordination 1/2", eine Adresse pro Zeile */
.about__locs .loc, .about__locs .loc__sep { font-style: normal; }
.about__locs .loc__name { font-weight: inherit; }
@media (max-width: 700px) {
  .about__locs > span { display: block; margin-bottom: 6px; }
  .about__locs .loc { display: block; margin-top: 4px; }
  .about__locs .loc__name, .about__locs .loc__sep { display: none; }
}

/* =========================================================
   TEAM AM HANDY ALS ICON-RASTER (2026-09-07, Wunsch): unter 700 px werden die
   Team-Karten zu runden Foto-Icons (5 pro Reihe, nur Bild); ein Tipp zeigt Name +
   Funktion in einer Sprechblase (js/main.js „Team am Handy"). Karten ohne Foto
   zeigen ihre Initialen im Kreis. Die Bewerbungs-Karte wird eine schmale Zeile
   über die volle Breite. Desktop/Tablet unverändert (Hochformat-Karten).
   ========================================================= */
@media (max-width: 700px) {
  #team .team__grid { position: relative; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; }
  #team .team__grid .team-card, #team .team__grid .team-card.has-photo {
    aspect-ratio: 1 / 1; padding: 0; border-radius: 50%; overflow: hidden; display: block; min-height: 0;
    border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); box-shadow: none;
    transition: border-color .25s, box-shadow .25s;
  }
  #team .team__grid .team-card.is-hidden { display: none; }   /* Filter-Chips müssen weiter greifen */
  #team .team-card h4, #team .team-card p, #team .team-card::after { display: none; }
  #team .team-card__photo, #team .team-card.has-photo .team-card__photo,
  #team .team-card.has-photo.is-active .team-card__photo { opacity: 1; transform: none; object-position: center 22%; }
  #team .team-card__avatar { width: 100%; height: 100%; margin: 0; border-radius: 50%; font-size: 1rem; box-shadow: none; }
  #team .team-card.is-picked { border-color: var(--mint-300); box-shadow: 0 0 0 3px rgba(167,229,223,.35); }
  /* Bewerbungs-Karte: eine Zeile über die volle Breite */
  #team .team__grid .team-card--cta {
    grid-column: 1 / -1; aspect-ratio: auto; border-radius: 14px; display: flex; flex-direction: row; align-items: center;
    gap: 14px; padding: 12px 16px; text-align: left; border: 1px dashed rgba(167,229,223,.6); background: rgba(53,192,181,.08); margin-top: 6px;
  }
  #team .team-card--cta .team-card__plus { width: 40px; height: 40px; font-size: 1.5rem; flex-shrink: 0; }
  #team .team-card--cta .team-card__text { align-items: flex-start; gap: 2px; }
  #team .team-card--cta h4, #team .team-card--cta p { display: block; margin: 0; font-size: .95rem; }
  #team .team-card--cta p { font-size: .82rem; }
  #team .team-card--cta .team-card__go { display: none; }
  /* Sprechblase mit Name + Funktion */
  .team__bubble {
    position: absolute; z-index: 5; display: none; max-width: 260px; padding: 10px 14px; border-radius: 12px;
    background: #0b2f4d; color: #fff; box-shadow: var(--shadow-md); font-size: .9rem; line-height: 1.35; pointer-events: none;
  }
  .team__bubble.show { display: block; }
  .team__bubble strong { display: block; font-family: var(--font-head); font-weight: 600; }
  .team__bubble span { display: block; color: var(--mint-300); font-size: .8rem; margin-top: 2px; }
  .team__bubble::before {
    content: ""; position: absolute; top: -6px; left: var(--arrow, 50%); margin-left: -6px;
    border: 6px solid transparent; border-top: 0; border-bottom-color: #0b2f4d;
  }
}
@media (max-width: 340px) { #team .team__grid { grid-template-columns: repeat(3, 1fr); } }
/* Die Sprechblase ist ein Kind des Grids – außerhalb des Handy-Modus darf sie keine Rasterzelle belegen */
.team__bubble { display: none; }

/* =========================================================
   BEWERTUNGEN + KONTAKT AM HANDY (2026-09-07, Wunsch):
   – Bewertungen: nur Sterne + Name, der Text klappt über „Mehr erfahren" auf.
   – Kontakt: Reihenfolge pure-smile-Karte → Termin anfragen → Telefonzeiten → Parken
     (die beiden Spalten-Wrapper werden per display:contents aufgelöst, Karten per order).
   ========================================================= */
.review-toggle { display: none; }
@media (max-width: 700px) {
  .review-card__quote { display: none; }
  .review-card:not(.open) > p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 0;
  }
  .review-card__author { border-top: 0; padding-top: 0; margin-top: 14px; }
  .review-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; align-self: flex-start;
    color: var(--teal-600); font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  }
  .review-toggle svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
  .review-card.open .review-toggle svg { transform: rotate(180deg); }
  .review-toggle .txt-more::after { content: "Mehr erfahren"; }
  .review-card.open .review-toggle .txt-more::after { content: "Weniger anzeigen"; }
  .review-card.open > p { margin-top: 14px; margin-bottom: 0; }
}
@media (max-width: 860px) {
  .contact__grid { gap: 22px; }
  .contact__grid > .reveal { display: contents; }
  .contact__grid .info-card:nth-of-type(1) { order: 1; }
  .contact__grid .form-card { order: 2; }
  .contact__grid .info-card:nth-of-type(2) { order: 3; }
  .contact__grid .info-card:nth-of-type(3) { order: 4; }
  .contact__grid .info-card { margin-bottom: 0; }
}

/* =========================================================
   MOBIL-DURCHGANG TEIL 2 (2026-09-08): Johanovum → Footer.
   Vier Sachen, die am Handy nicht gepasst haben:
   1) Karten-Zustimmung: Text + Button + Link waren höher als der 16:10-Rahmen,
      dadurch lag die Pille „In Google Maps öffnen" über „Mehr erfahren".
      → Rahmen am Handy 4:3, kompaktere Zustimmung, Pille erst wieder sichtbar,
        wenn die Karte geladen ist (die Route-Schaltfläche darüber bleibt).
   2) Job-Karten: „overflow-wrap: anywhere" hat mitten im Wort getrennt
      („Zahnmedizini-sche/r"). → Silbentrennung statt Buchstabenbruch,
      Symbol und Pfeil kleiner, damit der Titel Platz hat.
   3) Bewertungen: eingeklappt war gar kein Text zu sehen (nur Sterne + Name).
      → drei Zeilen Vorschau, der Rest klappt weiterhin auf.  (oben geändert)
   4) Adresse in der Kontaktkarte: beide Ordinationen standen in einer Zeile
      zusammengeschoben. → eine Ordination pro Zeile.  (index.html)
   ========================================================= */
@media (max-width: 620px) {
  /* 1) Karten-Zustimmung */
  .map-card__frame { aspect-ratio: 4 / 3; }
  .map-consent { padding: 18px 16px; gap: 10px; }
  .map-consent p { font-size: .82rem; line-height: 1.5; }
  .map-consent__btn { padding: 10px 18px; font-size: .86rem; }
  .map-card__frame:has(.map-consent) .map-card__open { display: none; }

  /* 2) Job-Karten */
  .job-card { gap: 14px; padding: 18px; }
  .job-card__ico { width: 44px; height: 44px; border-radius: 13px; }
  .job-card__ico svg { width: 22px; height: 22px; }
  .job-card__arrow { width: 36px; height: 36px; }
  .job-card__arrow svg { width: 17px; height: 17px; }
  .job-card__body h3 { font-size: 1rem; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
  .job-card__body p { font-size: .82rem; align-items: flex-start; overflow-wrap: break-word; }
  .job-card__body p svg { margin-top: 3px; flex-shrink: 0; }
}

/* =========================================================
   FEINSCHLIFF 11.09.2026 (Wunsch nach Durchsicht der Vorschau).
   Steht bewusst in style.css und nicht in einer Vorschaudatei, damit die
   Punkte in BEIDEN Fassungen gelten – auch wenn der umgedrehte Verlauf
   am Ende verworfen wird.
   ========================================================= */

/* 1) Kennzahl „94 % der Werktage": kein Farbwechsel mehr innerhalb der Zeile.
   Das Prozentzeichen und der Nachsatz stehen jetzt in derselben Farbe wie
   die Zahl. Die „+" bei „7+ Sprachen" und „30+" behalten ihren Akzent. */
.hero__stat--open .num .plus, .hero__stat--open .num .of { color: inherit; }

/* 2) Fließtext dunkler für bessere Lesbarkeit.
   --slate traegt fast alle Absaetze auf hellem Grund. */
:root {
  --slate: #545c61;        /* vorher #6B7176 */
  --slate-light: #757c80;  /* vorher #8E9498 */
}

/* 3) Mitlaufende Kopfleiste 2 px groesser: .95rem = 15,2 px -> 17,2 px */
.nav__links a { font-size: 1.075rem; }

/* 4) Untertitel ueber den Ueberschriften („Ihre Behandler:innen", „Unser Team",
   „Leistungen" …) 2 px groesser: .76rem = 12,16 px -> 14,16 px.
   Betrifft beide Bauformen, die Pille und die Variante mit Strich. */
.eyebrow, .section--navy .eyebrow, .welcome__card .eyebrow,
#aerzte .section-head .eyebrow, .eyebrow-line { font-size: .885rem; }

/* 6) Leistungs-Filterknoepfe im Stil des Knopfs „Unsere Leistungen" im
   Kopfbereich (.btn--ghost): durchscheinende Fuellung, 1,5 px Rand, weiche
   Unschaerfe dahinter, gleiche Schriftgroesse und -staerke wie der Knopf.
   Nur die Innenabstaende sind kleiner als beim Knopf (12/24 statt 15/30) –
   bei sieben Kategorien nebeneinander wuerde die Reihe sonst drei Zeilen
   hoch. Ausgewaehlt bleibt gefuellt, damit der Zustand ablesbar ist.
   11.09. nachgezogen: die Filterknoepfe im TEAM bekommen denselben Stil.
   In der hellen Fassung bleibt das Team dunkel, deshalb gilt dort weiterhin
   diese Variante – nur Leistungen wird in vorschau-invers.css umgefaerbt. */
#leistungen .serv-chip, #team .team-chip {
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: 12px 24px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
#leistungen .serv-chip:hover, #team .team-chip:hover {
  background: rgba(255,255,255,.16); color: #fff;
  border-color: rgba(255,255,255,.35); transform: translateY(-3px);
}
#leistungen .serv-chip.is-active, #team .team-chip.is-active {
  background: #fff; color: var(--navy-800); border-color: #fff;
  backdrop-filter: none; box-shadow: var(--shadow-sm);
}

/* 8) Weisses Kaestchen hinter der Bildmarke entfernt (11.09.2026).
   Es war nur noetig, solange das Logo ein JPG mit eingebranntem weissem
   Hintergrund war. Die SVG ist durchscheinend, die Marke steht jetzt direkt
   auf dem Grund und darf dadurch etwas groesser sein. Gilt fuer Kopf- und
   Fusszeile gleichermassen. Zurueckbauen: diesen Block loeschen. */
.brand__mark {
  width: auto; height: auto; border-radius: 0;
  background: none; box-shadow: none; border: 0; overflow: visible;
}
.brand__mark img { width: 38px; height: 32px; object-fit: contain; }

/* =========================================================
   VERLAUF UMGEDREHT – oben HELL, unten DUNKEL (11.09.2026, freigegeben:
   „ich würde gerne den umgedrehten Verlauf weiter verfolgen").
   Bis 11.09. lief die Seite andersherum. Dieser Block steht bewusst am
   DATEIENDE und überschreibt die ältere Kette im Block „DURCHGEHENDER
   VERLAUF" weiter oben. Wer dort etwas ändert und keine Wirkung sieht:
   die maßgebliche Regel steht hier unten.

   Kette von oben nach unten:
     Kopf        #FFFFFF -> #F1F8F7 -> #DCEFEC
     Band        #E7F5F3 -> #CDE9E5 -> #A6D9D5 -> #7FCBCA -> #5BC0C3
     Über uns    #5BC0C3 -> #2FB0B9
     Leistungen  #2FB0B9 -> #00A0AA
     Team        #00A0AA -> #0E8A95 -> #1C7480
     ab Johanovum bis Fußzeile  #1E4551, Fußzeile #16323A

   Schriftregel: bis einschließlich Leistungen steht der Text dunkel
   (#16323A auf #5BC0C3 ergibt 5,6:1), ab dem Team weiß. Die Inhalte im
   unteren Teil sitzen in weißen Karten, die behalten dunkle Schrift –
   Ausnahmen sind die durchsichtigen Bewertungskarten und die Eckdaten
   im Johanovum, die brauchen helle Schrift.
   ========================================================= */

/* ---------- 1) Kopfzeile und Kopfbereich ---------- */
.topbar { background: #dcefec; color: #3d4649; }
.topbar a:hover { color: #16323a; }
.topbar svg { color: #007f88; }
.topbar__note { color: #6b7176; }

.hero--3d { background: linear-gradient(160deg, #ffffff 0%, #f1f8f7 45%, #dcefec 100%); }
.hero--3d::after { background: linear-gradient(180deg, rgba(231,245,243,0) 0%, #e7f5f3 100%); }
.hero h1 { color: #16323a; }
.hero h1 .accent { background: linear-gradient(120deg, #007f88, #16323a); -webkit-background-clip: text; background-clip: text; }
.hero__lead { color: #3d4649; }
.hero__stat .num { color: #16323a; }
.hero__stat:not(.hero__stat--open) .num .plus, .hero__stat:not(.hero__stat--open) .num .of { color: #007f88; }
.hero__stat--open .num .plus, .hero__stat--open .num .of { color: inherit; }
.hero__stat .lbl { color: #545c61; }
.hero__stat + .hero__stat { border-left-color: rgba(22,50,58,.16); }
.eyebrow-line b { color: #16323a; }
.eyebrow-line::before { background: #007f88; }

/* ---------- 2) Vertrauens-Leiste + AErzt:innen ---------- */
.fade-band {
  background: linear-gradient(180deg,
    #e7f5f3 0px, #cde9e5 400px, #a6d9d5 900px, #7fcbca 1400px, #5bc0c3 100%);
}
.fade-band .trust { border-bottom-color: rgba(22,50,58,.14); }
.trust__item { color: #2a5561; }
.trust__item svg { color: #007f88; }

/* ---------- 3) Ueber uns: heller Grund, dunkle Schrift ---------- */
#ueber-uns.section--navy { background: linear-gradient(180deg, #5bc0c3 0%, #2fb0b9 100%); color: #16323a; }
#ueber-uns .about__key { color: #16323a; }
#ueber-uns .about__lead { color: #16323a; }
#ueber-uns .about__cols { border-top-color: rgba(22,50,58,.20); border-bottom-color: rgba(22,50,58,.20); }
#ueber-uns .about__cols p { color: #16323a; }
#ueber-uns .signature { color: #0a3a42; }
#ueber-uns .joh-shot::after { background: #0a3a42; }
#ueber-uns .about__locs { color: #16323a; }
#ueber-uns .about__locs span { color: #0a3a42; }
#ueber-uns .about__locs span::after { background: #007f88; }
#ueber-uns .principles__list { border-top-color: rgba(22,50,58,.20); }
#ueber-uns .principle { border-bottom-color: rgba(22,50,58,.20); }
#ueber-uns .principle::after { background: linear-gradient(90deg, #0a3a42, rgba(10,58,66,0)); }
#ueber-uns .principle__num { color: #0a3a42; }
#ueber-uns .principle h3 { color: #16323a; }
#ueber-uns .principle p { color: #16323a; }
#ueber-uns .principle:hover h3 { color: #0a3a42; }
#ueber-uns .eyebrow-line b { color: #16323a; }
#ueber-uns .eyebrow-line::before { background: #0a3a42; }

/* ---------- 4) Leistungen: mittlerer Grund, dunkle Schrift, Karten weiss ---------- */
#leistungen.section--navy { background: linear-gradient(180deg, #2fb0b9 0%, #00a0aa 100%); color: #123c44; }
#leistungen .section-sub { color: rgba(18,60,68,.86); }
/* Filterknoepfe: derselbe Stil wie der helle Knopf „Unsere Leistungen" oben */
#leistungen .serv-chip { background: rgba(255,255,255,.55); color: #16323a; border-color: rgba(22,50,58,.28); }
#leistungen .serv-chip:hover { background: #fff; color: #0d4a52; border-color: #007f88; }
#leistungen .serv-chip.is-active { background: #123c44; color: #fff; border-color: #123c44; box-shadow: none; }
#leistungen .serv-card { border-color: rgba(255,255,255,.55); }

/* ---------- 5) Team: hier kippt es ins Dunkle ---------- */
#team.section--navy { background: linear-gradient(180deg, #00a0aa 0%, #0e8a95 55%, #1c7480 100%); color: #fff; }
#team .section-sub { color: rgba(255,255,255,.86); }

/* ---------- 6) ab Johanovum bis Footer: dunkel ---------- */
:root { --tint-teal: #1e4551; --tint-teal-deep: #16323a; }
#johanovum.soft-top::before { background: linear-gradient(180deg, #1c7480 0%, rgba(30,69,81,0) 100%); }

#johanovum.section--tint, #bewertungen.section, #faq.section, #kontakt.section--tint, #jobs.section { color: #eaf3f2; }
#johanovum .section-title, #bewertungen .section-title, #faq .section-title, #kontakt .section-title, #jobs .section-title { color: #fff; }
#johanovum .section-sub, #bewertungen .section-sub, #faq .section-sub, #kontakt .section-sub, #jobs .section-sub { color: rgba(255,255,255,.80); }
#johanovum .eyebrow-line b, #bewertungen .eyebrow-line b, #faq .eyebrow-line b, #kontakt .eyebrow-line b, #jobs .eyebrow-line b { color: #fff; }
#johanovum .eyebrow-line::before, #bewertungen .eyebrow-line::before, #faq .eyebrow-line::before, #kontakt .eyebrow-line::before, #jobs .eyebrow-line::before { background: #66c4c4; }
#johanovum .joh__lead, #johanovum .joh__text > p { color: rgba(255,255,255,.86); }
#johanovum .joh__text strong { color: #fff; }
#johanovum .joh__facts { border-top-color: rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.18); }
#johanovum .joh__facts li { border-right-color: rgba(255,255,255,.18); color: rgba(255,255,255,.86); }
#johanovum .joh__badge { color: #eafaf8; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }

.cta-band { background: #1e4551; color: #eaf3f2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.36); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #66c4c4; color: #fff; }

.footer { background: #16323a; color: rgba(255,255,255,.76); border-top-color: rgba(255,255,255,.10); }
.footer__grid { border-bottom-color: rgba(255,255,255,.14); }
.footer .brand__name { color: #fff; }
.footer .brand__name span { color: #66c4c4; }
.footer__col h4 { color: #fff; }
.footer__col a, .footer__col p, .footer__bottom a, .footer__bottom { color: rgba(255,255,255,.76); }
.footer__col a:hover, .footer__bottom a:hover { color: #66c4c4; }
.footer__social a { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.footer__social svg { color: #acd9d6; }
.footer__social a:hover { background: #66c4c4; border-color: #66c4c4; }
.footer__social a:hover svg { color: #16323a; }

/* ---------- Nachtrag: Ueberschriften und Marken der oberen Abschnitte ----------
   Diese Regeln waren im Original fuer dunklen Grund gesetzt (weisse bzw. sehr
   helle Schrift) und werden auf hellem Grund unlesbar. */
#aerzte .section-title { color: #16323a; }
#aerzte .section-sub { color: rgba(22,50,58,.80); }
#aerzte .section-head .eyebrow { color: #0d4a52; background: rgba(0,127,136,.12); border-color: rgba(0,127,136,.30); }
#aerzte .section-head .eyebrow::before { background: #007f88; }

#ueber-uns .section-title { color: #16323a; }
#ueber-uns .section-sub { color: #16323a; }
#leistungen .section-title { color: #123c44; }

#ueber-uns .eyebrow, #leistungen .eyebrow { color: #0a3a42; }
#ueber-uns .eyebrow::before, #leistungen .eyebrow::before { background: #007f88; }

/* Team bleibt dunkel, dort gilt weiterhin die helle Schrift aus style.css. */

/* Der Schleier ueber dem Kopfbereich war fuer dunklen Grund gebaut (dunkles
   Band nach unten). Auf hellem Grund wird daraus ein heller Schleier, sonst
   liegt ein grauer Film ueber dem Bild. */
.hero--3d .hero__overlay {
  background:
    radial-gradient(ellipse 60% 70% at 72% 45%, rgba(0,179,189,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(231,245,243,.55) 100%);
}

/* Der helle Umriss-Knopf war fuer dunklen Grund gedacht (weisse Schrift,
   weisser Rand) und verschwindet auf hellem Grund. */
.hero .btn--ghost, .welcome .btn--ghost {
  background: rgba(255,255,255,.55); color: #16323a; border-color: rgba(22,50,58,.28);
}
.hero .btn--ghost:hover { background: #fff; border-color: #007f88; color: #0d4a52; }
.welcome .btn--ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.35); }

/* ---------- Nachtrag 2: unterer, jetzt dunkler Teil ----------
   Der Abschnittsfarbe wegen erben auch die WEISSEN Karten die helle Schrift.
   Die bekommen ihre dunkle Schrift hier zurueck. Umgekehrt sind Bewertungen
   und die Eckdaten im Johanovum durchsichtig, die brauchen helle Schrift. */

/* weisse Karten: dunkle Schrift behalten */
#kontakt .info-card, #kontakt .form-card, #kontakt .map-card, #jobs .job-card { color: var(--ink); }

/* Marken ueber den Ueberschriften */
#johanovum .eyebrow, #bewertungen .eyebrow, #faq .eyebrow, #kontakt .eyebrow, #jobs .eyebrow, .cta-band .eyebrow { color: #66c4c4; }
#johanovum .eyebrow::before, #bewertungen .eyebrow::before, #faq .eyebrow::before, #kontakt .eyebrow::before, #jobs .eyebrow::before { background: #66c4c4; }

/* Johanovum: Titel, Eckdaten */
#johanovum .joh__key { color: #fff; }
#johanovum .joh__facts li strong, #johanovum .joh-stat strong { color: #66c4c4; }
#johanovum .joh__facts li span, #johanovum .joh-stat span { color: rgba(255,255,255,.72); }

/* Kontakt: die Ueberschrift ueber den Karten steht frei auf dem Grund,
   die Ueberschriften IN den Karten bleiben dunkel (Regel danach gewinnt). */
#kontakt h3 { color: #fff; }
#kontakt .info-card h3, #kontakt .form-card h3, #kontakt .map-card h3 { color: var(--navy-800); }
#kontakt .info-card h3 svg, #kontakt .form-card h3 svg { color: var(--teal-600); }

/* Bewertungen: die Karten sind durchsichtig, nur ein feiner Rahmen */
#bewertungen .review-card { border-color: rgba(255,255,255,.22); }
#bewertungen .review-card p { color: rgba(255,255,255,.86); }
#bewertungen .review-card__author strong { color: #fff; }
#bewertungen .review-card__author small { color: #66c4c4; }

/* Stellen: Ueberschrift in der weissen Karte */
#jobs .job-card__body h3 { color: var(--navy-800); }
#johanovum .joh__partners { color: rgba(255,255,255,.70); }
#johanovum .joh__partners span { color: #66c4c4; }

/* ---------- Nachtrag 11.09.2026: Kontrast im Team ----------
   Vier Beschriftungen standen noch in hellem Mint bzw. hellem Blaugrau auf
   dem Tuerkis und kamen nur auf 2,3 bis 2,7 zu 1. Sie stammen aus der Zeit
   vor der Umkehrung. Jetzt in Weiss wie die Namen darueber.
   Grenze des Machbaren: der Abschnitt beginnt oben mit #00A0AA, dort erreicht
   selbst reines Weiss nur rund 3,2 zu 1. Weiter unten, wo der Grund nach
   #1C7480 laeuft, sind es ueber 5. Fuer 4,5 durchgaengig muesste der Verlauf
   im Team dunkler beginnen – das wuerde aber die nahtlose Naht zu den
   Leistungen brechen, die genau auf #00A0AA endet. Bewusst nicht gemacht. */
#team .eyebrow { color: #fff; }
#team .team-card p { color: #fff; }
#team .team-card__note { color: #fff; }
#team .team-card--cta .team-card__plus { color: #fff; border-color: rgba(255,255,255,.7); }

/* =========================================================
   NOTDIENST-HINWEIS (13.09.2026)
   Kleine Karte unten rechts, erscheint ab Freitagmittag und an Feiertagen.
   Bewusst kein Modal: sie soll informieren, nicht den Weg versperren.
   Sitzt über dem Nach-oben-Knopf; am Handy über die volle Breite unten.
   ========================================================= */
.notdienst {
  position: fixed; right: 24px; bottom: 150px; z-index: 95;  /* 14.09.2026 höher gesetzt: lag vorher auf der USP-Zeile */
  width: min(330px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 20px 20px 18px;
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.notdienst.is-open { opacity: 1; transform: none; }
.notdienst strong { display: block; font-family: var(--font-head); font-size: 1.02rem; color: var(--navy-800); margin-bottom: 8px; padding-right: 18px; }
.notdienst p { font-size: .9rem; line-height: 1.5; color: var(--slate); margin-bottom: 14px; }
.notdienst p strong { display: inline; font-size: inherit; font-family: inherit; color: inherit; margin: 0; padding: 0; }
.notdienst__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notdienst__actions .btn { padding: 9px 14px; font-size: .85rem; }
.notdienst__actions .btn svg { width: 15px; height: 15px; }
.notdienst__close {
  position: absolute; top: 8px; right: 10px; width: 28px; height: 28px;
  border: 0; background: none; color: var(--slate); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.notdienst__close:hover { background: var(--sky-100); color: var(--navy-800); }
@media (max-width: 700px) {
  .notdienst { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 16px 16px 14px; }
}

/* ---- Notdienst-Hinweis: drei Aufmachungen ----
   Umschalten = im index.html am <aside id="notdienst"> die Zusatzklasse tauschen:
   notdienst--rot (Standard) · notdienst--mint · notdienst--navy.
   Der Punkt neben der Überschrift pulst langsam statt zu blinken: echtes Blinken ist
   anstrengend zu lesen und für lichtempfindliche Menschen ein Problem. Wer im System
   „Bewegung reduzieren" eingestellt hat, sieht ohnehin keine Animation (Regel ganz unten). */
.notdienst__punkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline; background: currentColor;
  animation: notdienst-puls 1.8s ease-in-out infinite;
}
@keyframes notdienst-puls {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}

/* Rot: das international verstandene Notfallsignal, sonst bleibt die Karte wie sie ist */
.notdienst--rot { border: 2px solid #d64550; }
.notdienst--rot strong { color: #c02b38; }
.notdienst--rot .notdienst__punkt { color: #d64550; }

/* Mint: bleibt ganz in der Hausfarbe, der Rahmen atmet dezent mit */
.notdienst--mint { border: 2px solid var(--teal-500, #1aa0aa); animation: notdienst-rahmen 2.6s ease-in-out infinite; }
.notdienst--mint .notdienst__punkt { color: var(--teal-500, #1aa0aa); }
@keyframes notdienst-rahmen {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(26,160,170,.45); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 9px rgba(26,160,170,0); }
}

/* Navy: dunkle Karte, hebt sich durch den Kontrast ab statt durch Farbe */
.notdienst--navy { background: var(--navy-800); border: 2px solid var(--navy-800); }
.notdienst--navy strong { color: #fff; }
.notdienst--navy p { color: #c6d6e6; }
.notdienst--navy p strong { color: #fff; }
.notdienst--navy .notdienst__punkt { color: var(--mint-300, #6fe3d4); }
.notdienst--navy .notdienst__close { color: #9fb4c9; }
.notdienst--navy .notdienst__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.notdienst--navy .btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.notdienst--navy .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* Der zweite Knopf war auf der weißen Karte kaum zu sehen – Rahmen und Schrift kräftiger. */
.notdienst .btn--ghost { border: 1px solid var(--line); color: var(--navy-800); background: #fff; }
.notdienst .btn--ghost:hover { background: var(--sky-100); }
.notdienst--navy .btn--ghost { background: transparent; }
/* Muss nach der Regel darüber stehen, sonst erbt die dunkle Variante die dunkle Schrift. */
.notdienst--navy .btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.notdienst--navy .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* =========================================================
   BARRIEREFREIHEIT (13.09.2026)
   Geprüft an der laufenden Seite, nicht geschätzt. Behoben wurden:
   sichtbare Tastatur-Markierung, drei Kontraste knapp unter der Grenze,
   Sprunglink über die Navigation hinweg.
   ========================================================= */

/* 1) Tastatur-Markierung. Vorher war gar keine zu sehen (outline: none) – wer ohne Maus
      arbeitet, wusste nicht, wo er ist. Das ist der häufigste echte Mangel überhaupt.
      :focus-visible zeigt den Rahmen nur bei Tastaturbedienung, nicht bei Mausklick. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--navy-800);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Weiß nur dort, wo der Grund wirklich dunkel ist. Kopfbereich und Leistungen sehen dunkel aus,
   sind es aber nicht: heller Verlauf bzw. mittleres Türkis – dort liest sich Navy besser.
   Am 13.09.2026 an der laufenden Seite nachgemessen, nicht geschätzt. */
.footer a:focus-visible, .footer button:focus-visible,
.welcome a:focus-visible, .welcome button:focus-visible,
.notdienst--navy a:focus-visible, .notdienst--navy button:focus-visible,
.lightbox button:focus-visible {
  outline-color: #fff;
}

/* 2) Kontraste: drei Stellen lagen mit 4,14–4,24 knapp unter den geforderten 4,5
      (kleiner Text). Jetzt 4,8 bis 6,1 – gemessen, nicht geschätzt. */
.topbar__note { color: #5c6368; }
.langs span { color: #00757e; }
.map-card__route, .map-card__open { color: #00757e; }

/* 3) Sprunglink: erste Station für Tastatur und Screenreader, springt über Kopfzeile
      und Navigation hinweg direkt in den Inhalt. Sichtbar nur, wenn er den Fokus hat. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy-800); color: #fff; padding: 12px 18px;
  border-radius: 0 0 10px 0; font-family: var(--font-head); font-weight: 600; font-size: .95rem;
}
.skip-link:focus { left: 0; }

/* =========================================================
   HÄUFIGE FRAGEN (FAQ)  – eingebaut 14.09.2026
   Bewusst native <details>/<summary> statt der eigenen Akkordeon-Logik:
   klappt ohne JavaScript auf, ist für Tastatur und Screenreader von Haus aus
   richtig ausgezeichnet (kein aria-Nachbau nötig) und die Antworten stehen
   vollständig im HTML – nur so liest Google sie. Pfeil dreht sich über [open].
   ========================================================= */
.faq__list { max-width: 900px; margin: 0 auto; }
.faq__group { font-family: var(--font-head); font-size: 1.15rem; color: var(--blue-600); margin: 36px 0 14px; }
.faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq__item:hover { box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.faq__item > summary {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.45;
  color: var(--navy-800); list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }   /* Dreieck von Safari/Chrome weg */
.faq__item > summary::marker { content: ""; }                     /* dasselbe für Firefox */
.faq__item > summary svg { width: 20px; height: 20px; margin-left: auto; flex-shrink: 0; color: var(--blue-500); transition: transform .35s var(--ease); }
.faq__item[open] > summary { color: var(--blue-600); }
.faq__item[open] > summary svg { transform: rotate(180deg); }
.faq__answer { padding: 0 24px 22px; color: var(--slate); font-size: 1.055rem; }  /* wie .serv-card p */
.faq__answer p + p { margin-top: 14px; }
.faq__answer a { color: var(--blue-600); font-weight: 600; }
@media (max-width: 620px) {
  .faq__item > summary { padding: 16px 18px; gap: 12px; font-size: 1.05rem; }
  .faq__answer { padding: 0 18px 18px; }
  .faq__group { margin: 28px 0 12px; }
}

/* Der FAQ-Block sitzt im dunklen Band (ab Johanovum bis Fußzeile, siehe Abschnitt 6).
   Die Karten bleiben weiß mit dunkler Schrift wie im Kontaktbereich; nur die
   Gruppenüberschriften stehen direkt auf dem dunklen Grund und brauchen helle Schrift. */
#faq .faq__group { color: #8fd7d4; }

/* =========================================================
   BEWERTUNGEN ALS LAUFBAND (14.09.2026)
   Die Karten laufen endlos von links nach rechts. Die Spur wird in js/main.js
   einmal dupliziert (die Kopie ist aria-hidden, damit Screenreader jede Bewertung
   nur einmal vorlesen); die Animation schiebt sie von -50 % auf 0 – dadurch ist
   der Übergang nahtlos, egal wie viele Karten es sind.
   Laufrichtung umdrehen: in @keyframes bewertungen-lauf „from" und „to" tauschen.
   Tempo: --lauf-dauer (mehr Karten = längere Dauer, sonst wird es hektisch).
   ========================================================= */
.reviews__marquee {
  --lauf-dauer: 70s;
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.reviews__marquee .reviews__grid {
  display: flex; grid-template-columns: none; width: max-content; gap: 0;
  animation: bewertungen-lauf var(--lauf-dauer) linear infinite;
}
.reviews__marquee:hover .reviews__grid,
.reviews__marquee:focus-within .reviews__grid { animation-play-state: paused; }
@keyframes bewertungen-lauf { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Im Laufband haben alle Karten dieselbe Breite und jede ihren Trennstrich –
   die Ausnahmen für erste/letzte Karte würden im Kreislauf als Lücke auffallen. */
.reviews__marquee .review-card { flex: 0 0 clamp(280px, 26vw, 380px); width: clamp(280px, 26vw, 380px); }
.reviews__marquee .review-card:first-child { border-left: 1px solid rgba(255,255,255,.14); padding-left: clamp(22px, 3vw, 44px); }
.reviews__marquee .review-card:last-child { padding-right: clamp(22px, 3vw, 44px); }
#bewertungen .reviews__marquee .review-card { border-left-color: rgba(255,255,255,.14); }
/* Lange Bewertungen abschneiden, damit die Karten gleich hoch bleiben.
   Wer alles lesen will, folgt dem Google-Link darunter. */
.reviews__marquee .review-card p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden;
}
.reviews__more { text-align: center; margin-top: 34px; }
.reviews__more a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: .98rem; }
.reviews__more a svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.reviews__more a:hover svg { transform: translateX(4px); }
#bewertungen .reviews__more a { color: #66c4c4; }
@media (prefers-reduced-motion: reduce) {
  .reviews__marquee .reviews__grid { animation: none; }
  .reviews__marquee { overflow-x: auto; }   /* dann von Hand schiebbar */
}
@media (max-width: 900px) {
  .reviews__marquee .reviews__grid { max-width: none; margin-inline: 0; }
}

/* Feste Zeilenumbrüche im Kopftext (Wunsch 14.09.2026): Umbruch VOR „St. Johann" und
   VOR „vom ersten Zahn". Nur am Desktop – am Handy ist die Spalte so schmal, dass
   feste Umbrüche zerrissen aussehen; dort bricht der Browser selbst um.
   Das geschützte Leerzeichen in „St.&nbsp;Johann" bleibt in jedem Fall bestehen. */
@media (max-width: 900px) { .br-lead { display: none; } }

/* =========================================================
   TEMPO AM HANDY (20.09.2026): Der Kopfbereich zieht am Telefon eine kleinere
   Fassung des Fotos (900 statt 1672 Pixel breit, 51 statt 183 KB). Das Bild steht
   als Inline-Stil in der index.html, deshalb braucht es hier !important.
   Wird das Kopfbild getauscht, muss auch `o2-gang-m.jpg` neu erzeugt werden –
   Rezept im README unter „Tempo am Handy".
   ========================================================= */
@media (max-width: 800px) {
  .hero__slide.kb-a { background-image: url("../assets/images/hero/o2-gang-m.jpg") !important; }
}

/* =========================================================
   SEITLICHE SCROLL-EFFEKTE (2026-09-28, Wunsch: „dynamischer, auch seitlich")
   Die Klassen setzt js/main.js (Blöcke „Seitliche Einblendung" und
   „Waagrechte Laufstrecke + Aufwischen der Fotos").
   ========================================================= */
/* A) Karten von links/rechts statt von unten; Überschriften leicht von links */
.js .reveal.from-left    { transform: translateX(-90px); }
.js .reveal.from-right   { transform: translateX(90px); }
.js .reveal.from-left-s  { transform: translateX(-36px); }
.js .reveal.from-left, .js .reveal.from-right { transition-duration: 1s; }
.js .reveal.from-left.in, .js .reveal.from-right.in, .js .reveal.from-left-s.in { transform: none; }
@media (max-width: 700px) {
  .js .reveal.from-left  { transform: translateX(-40px); }
  .js .reveal.from-right { transform: translateX(40px); }
}

/* C) Fotoraster: Bilder wie ein Vorhang von der Seite aufdecken */
.js .wipe.reveal { opacity: 1; transform: none; }
.js .wipe .joh-shot { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.js .wipe .joh-shot.wipe--rechts { clip-path: inset(0 0 0 100%); }
.js .wipe.in .joh-shot { clip-path: inset(0 0 0 0); }
.js .wipe:not(.in) .joh-shot img { transform: scale(1.15); }

/* B) „Über uns"-Galerie als waagrechte Laufstrecke (nur Desktop ab 1024 px) */
.lauf__balken { display: none; }
.lauf--an { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.lauf--an .lauf__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding-top: 64px;                                   /* Platz für die Navigation */
}
.lauf--an .about__gallery {
  display: flex; gap: 8px; width: max-content; padding-inline: var(--lauf-rand, 24px);
  will-change: transform;
}
.js .lauf--an .about__gallery.reveal, .lauf--an .about__gallery {
  transform: translateX(var(--lauf-x, 0px)); transition: opacity .8s var(--ease);
}
.lauf--an .about__gallery .joh-shot {
  flex: none; width: auto; height: min(58vh, 540px); aspect-ratio: 4/3; grid-column: auto; grid-row: auto;
}
.lauf--an .about__gallery .joh-shot--hero { aspect-ratio: 4/3; height: min(58vh, 540px); }
.lauf--an .about__gallery .joh-shot--wide { aspect-ratio: 16/9; }
.lauf--an .lauf__balken { display: block; margin-inline: var(--lauf-rand, 24px); height: 2px; background: rgba(22,50,58,.12); }
.lauf--an .lauf__balken span { display: block; height: 100%; background: var(--teal-500); transform-origin: left; transform: scaleX(var(--lauf-p, 0)); }

@media (prefers-reduced-motion: reduce) {
  .js .wipe .joh-shot { clip-path: none !important; transition: none; }
  .js .wipe .joh-shot img { transform: none; }
}
/* Fortschrittslinie auf dem Türkis von „Über uns" in der dunklen Akzentfarbe des Abschnitts */
#ueber-uns .lauf__balken { background: rgba(10,58,66,.18); }
#ueber-uns .lauf__balken span { background: #0a3a42; }