/* MundArt Zahnärzte Neuruppin. Richtung „Bogen“: Schiefergrund, Rundbogen, Pillen. */

@font-face {
  font-family: "Cabin";
  src: url("../fonts/cabin-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Farben: aus Logo und Praxisfotos gemessen */
  --tief: #2E4049;
  --tief-2: #364B55;
  --schiefer: #4A636E;
  --salbei: #DFE8E2;
  --salbei-hell: #F1F5F2;
  --mint: #B9CCC0;
  --eiche: #C5A594;
  --tinte: #22323A;
  --tinte-leise: #4D5F67;
  --hell: #D5DFDA;
  --gruen: #5EB55B;
  --stern: #E2A33B;
  --weiss: #FFFFFF;

  --display: "Cabin", "Gill Sans", "Trebuchet MS", sans-serif;
  --text: "Noto Sans", "Segoe UI", system-ui, sans-serif;

  /* Maße, die das Regler-Panel (?tweak) verschieben kann. Die Faktoren --f-… stehen in tweaks.css, ohne Eintrag gilt 1. */
  --rand: calc(clamp(1rem, 6.2vw, 6rem) * var(--f-rand, 1));
  --abschnitt: calc(clamp(4rem, 9vw, 8rem) * var(--f-abschnitt, 1));
  --hero-h1: calc(clamp(2.2rem, 4.3vw, 4rem) * var(--f-hero-h1, 1));
  --bogen-breite: calc(440px * var(--f-bogen, 1));
  --kopf-oben: 26px;
  --kopf-hoehe: 74px;
  --h2: calc(clamp(1.75rem, 3vw, 2.75rem) * var(--f-h2, 1));
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 36px); scrollbar-color: var(--schiefer) var(--salbei-hell); }
body {
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--weiss);
  accent-color: var(--schiefer);
  caret-color: var(--schiefer);
}
::selection { background: var(--schiefer); color: var(--weiss); }
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: var(--h2); }
h3 { font-size: 1.35rem; }
p { max-width: 68ch; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: 0.7rem 1.2rem; background: var(--weiss); color: var(--tinte); border-radius: 999px; }
.sprung:focus { top: 1rem; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 54px; padding: 0 1.7em;
  font: 600 1rem/1 var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid var(--schiefer); border-radius: 999px; background: var(--schiefer); color: var(--weiss);
  transition: background-color 0.3s var(--weich), color 0.3s var(--weich), border-color 0.3s var(--weich), transform 0.3s var(--weich);
}
.knopf:hover { background: var(--tief); border-color: var(--tief); }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf.umriss { background: transparent; color: var(--tief); }
.knopf.umriss:hover { background: var(--schiefer); color: var(--weiss); }
.dunkel .knopf { background: var(--weiss); border-color: var(--weiss); color: var(--tief); }
.dunkel .knopf:hover { background: var(--salbei); border-color: var(--salbei); }
.dunkel .knopf.umriss { background: transparent; color: var(--weiss); }
.dunkel .knopf.umriss:hover { background: var(--weiss); color: var(--tief); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

.pfeil { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pfeil svg { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--weich); }
.pfeil:hover svg { transform: translateX(4px); }

/* Sterne */
.sterne { position: relative; display: inline-block; width: 100px; height: 20px; flex: none; }
.sterne svg { position: absolute; inset: 0; width: 100px; height: 20px; }
.sterne .leer { fill: none; stroke: var(--stern); stroke-width: 1; }
.sterne .voll { fill: var(--stern); clip-path: inset(0 6% 0 0); }   /* 4,7 von 5 */

/* Abschnitte */
.abschnitt { padding: var(--abschnitt) var(--rand); }
.dunkel { background: var(--tief); color: var(--weiss); }
.dunkel ::selection { background: var(--salbei); color: var(--tief); }
.dunkel p { color: var(--hell); }
.salbei { background: var(--salbei); }
.salbei-hell { background: var(--salbei-hell); }
.innen { max-width: 1240px; margin-inline: auto; }
.einleitung { margin-top: 1.2rem; font-size: 1.15rem; color: var(--tinte-leise); }
.dunkel .einleitung { color: var(--hell); }

/* Der Bogen: einzige Schmuckform der Seite, aus der Nische am Empfang */
.bogen { position: relative; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--salbei); }
.bogen img { width: 100%; height: 100%; object-fit: cover; }
.bogenlinie { position: relative; }
.bogenlinie::before { content: ""; position: absolute; inset: -18px -18px 0; border: 1px solid var(--schiefer); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.salbei .bogenlinie::before, .salbei-hell .bogenlinie::before, .hellgrund .bogenlinie::before { border-color: var(--mint); }

/* Kopf */
/* Das Menü bleibt beim Scrollen stehen. Die Seitenköpfe halten oben den Platz dafür frei (--kopf-oben + --kopf-hoehe). */
.kopf { position: fixed; top: var(--kopf-oben); left: calc(clamp(0.9rem, 5.6vw, 5.5rem) * var(--f-rand, 1)); right: calc(clamp(0.9rem, 5.6vw, 5.5rem) * var(--f-rand, 1)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 12px 14px 12px 32px; background: var(--salbei); color: var(--tinte); border-radius: 0; transition: top 0.5s var(--weich), box-shadow 0.5s var(--weich); }
/* Die feine Linie hält die Leiste auch über Salbei-Flächen zusammen, die dieselbe Farbe haben. */
.kopf.schwebt { top: 12px; box-shadow: 0 0 0 1px rgba(74, 99, 110, 0.4), 0 16px 36px -20px rgba(34, 50, 58, 0.55), 0 2px 6px -2px rgba(34, 50, 58, 0.18); }
.hero-seite, .seitenkopf { padding-top: calc(var(--kopf-oben) + var(--kopf-hoehe)); }
@media (prefers-reduced-motion: reduce) { .kopf { transition: none; } }
.logo img { width: 168px; height: auto; }
.nav ul { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav a { font-size: 0.94rem; font-weight: 600; text-decoration: none; padding: 0.4em 0; border-bottom: 1px solid transparent; transition: border-color 0.3s var(--weich); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.kopf .knopf { min-height: 48px; border-radius: 0; background: var(--weiss); border-color: var(--weiss); color: var(--tief); }
.kopf .knopf:hover { background: var(--tief); border-color: var(--tief); color: var(--weiss); }
.menue-knopf { display: none; }

/* Erster Bildschirm */
.hero-seite { position: relative; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.hero-seite::before { /* feine Bögen im Grund */
  content: ""; position: absolute; right: -14vw; bottom: -52vw; width: 86vw; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--tief-2); box-shadow: 0 0 0 9vw var(--tief), 0 0 0 calc(9vw + 1px) var(--tief-2); pointer-events: none;
}
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--bogen-breite); gap: clamp(2rem, 4.5vw, 4rem); padding: 0 calc(var(--rand) + 4.5rem) 0 var(--rand); min-height: 0; }
.hero-text { align-self: center; padding: 2.5rem 0 4rem; }
.hero h1 { font-size: var(--hero-h1); line-height: 1.08; }
.hero h1 span { display: block; color: var(--mint); }
.hero-text > p { margin-top: 1.4rem; max-width: 33em; font-size: 1.1rem; }
.hero .knoepfe { margin-top: 2.2rem; }
.bewertung-zeile { display: inline-flex; align-items: center; gap: 12px; margin-top: 2.4rem; color: var(--hell); text-decoration: none; font-size: 0.98rem; }
.bewertung-zeile strong { color: var(--weiss); }
.bewertung-zeile:hover span:last-child { text-decoration: underline; }
.hero-bogen { align-self: end; height: min(100%, 680px); margin-top: 36px; }
.hero-bogen .bogen { height: 100%; }
.hero-bogen img { object-position: 50% 8%; }
.hero-bogen figcaption { position: absolute; left: -18px; bottom: 28px; transform: translateX(-100%); padding-right: 22px; font-size: 0.9rem; line-height: 1.4; color: var(--mint); text-align: right; white-space: nowrap; }
.schnell { position: absolute; right: clamp(0.9rem, 3.8vw, 3.5rem); bottom: 6rem; z-index: 5; display: grid; gap: 14px; }
.schnell a { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--salbei); color: var(--tief); transition: background-color 0.3s var(--weich), transform 0.3s var(--weich); }
.schnell a:hover { background: var(--weiss); transform: translateY(-2px); }
.schnell svg { width: 24px; height: 24px; }

/* Belege und Siegel */
.belege { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.6rem var(--rand); background: var(--salbei); }
.belege ul { display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; font-weight: 600; color: var(--tief); }
.belege li { display: flex; align-items: center; gap: 0.7rem; }
.belege li::before { content: ""; width: 9px; height: 14px; border-radius: 999px 999px 0 0; background: var(--schiefer); }
.siegel { display: flex; gap: 14px; flex: none; }
.siegel img, .siegel-frei { width: 92px; height: 92px; border-radius: 50%; background: var(--weiss); }
.siegel img.siegel-dgi { background: none; }
.siegel.gross img.siegel-dgi { width: 120px; height: 120px; }
.siegel-frei { display: grid; place-items: center; padding: 10px; border: 1.5px dashed var(--schiefer); font-size: 0.72rem; line-height: 1.25; text-align: center; color: var(--tinte-leise); }

/* Team */
.team { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.team-text p { margin-top: 1.3rem; }
.team-text .pfeil { margin-top: 2rem; }
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3.5vw, 3rem); align-items: end; padding-top: 18px; }
.portrait .bogen { aspect-ratio: 4 / 5.4; }
.portrait:nth-child(2) { margin-top: 5rem; }
.portrait img { object-position: 50% 12%; }
.portrait figcaption { margin-top: 1.1rem; }
.portrait figcaption strong { display: block; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.portrait figcaption span { color: var(--tinte-leise); font-size: 0.96rem; }

/* Leistungen: vier Zeilen mit großem Verb */
.zeilen { margin-top: clamp(2.2rem, 4vw, 3.5rem); border-top: 1px solid var(--mint); }
.zeile { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 1.5rem clamp(1.5rem, 5vw, 5rem); align-items: baseline; padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; border-bottom: 1px solid var(--mint); }
.zeile h3 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); color: var(--schiefer); }
.zeile p { font-size: 1.1rem; }
.leistungen .pfeil { margin-top: 2.4rem; }

/* Schwerpunkt Implantate */
.schwerpunkt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.schwerpunkt .bild { aspect-ratio: 4 / 4.6; }
.schwerpunkt p { margin-top: 1.3rem; }
.kuerzel { display: flex; gap: 2.5rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--tief-2); }
.kuerzel div { max-width: 15rem; }
.kuerzel strong { display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--mint); }
.kuerzel span { display: block; margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.4; color: var(--hell); }
.schwerpunkt .pfeil { margin-top: 2.2rem; color: var(--weiss); }

/* Technik */
.technik { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.technik p { margin-top: 1.3rem; }
.technik-bilder { position: relative; padding-bottom: 4.5rem; }
.technik-bilder .gross { border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; }
.technik-bilder .gross img { width: 100%; height: 100%; object-fit: cover; }
.technik-bilder .klein { position: absolute; left: -2.5rem; bottom: 0; width: 34%; aspect-ratio: 4 / 5; border: 8px solid var(--weiss); border-bottom: 0; box-shadow: 0 24px 40px -24px rgb(34 50 58 / 0.45); }
.technik-bilder figcaption { position: absolute; right: 0; bottom: 1.2rem; max-width: 55%; font-size: 0.92rem; color: var(--tinte-leise); text-align: right; }

/* Praxis */
.praxis-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.8rem; border-top: 1px solid var(--mint); }
.zahlen strong { display: block; font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1; color: var(--schiefer); font-variant-numeric: tabular-nums; }
.zahlen span { display: block; margin-top: 0.6rem; color: var(--tinte-leise); }
.raeume { display: grid; grid-template-columns: 1.15fr 0.85fr 1fr; gap: clamp(1rem, 2.6vw, 2.4rem); align-items: end; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.raeume .bogen { aspect-ratio: 4 / 5; }
.raeume figure:nth-child(2) .bogen { aspect-ratio: 4 / 6.2; }
.raeume figure:nth-child(3) .bogen { aspect-ratio: 4 / 4.4; }
.raeume figcaption { margin-top: 0.9rem; font-weight: 600; color: var(--tief); }

/* Bewertungen */
.stimmen-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.note { display: flex; align-items: center; gap: 1.2rem; }
.note strong { font-family: var(--display); font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 0.9; color: var(--mint); }
.note span { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--hell); }
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.2rem); align-items: start; margin-top: clamp(2.5rem, 5vw, 4rem); }
.stimme { padding-top: 1.6rem; border-top: 1px solid var(--schiefer); }
.stimme blockquote { font-size: 1.08rem; line-height: 1.55; color: var(--weiss); }
.stimme footer { margin-top: 1.3rem; font-size: 0.92rem; color: var(--mint); }
.stimmen-ende { margin-top: 2.6rem; }
.stimmen-ende .pfeil { color: var(--weiss); }

/* Neu bei uns */
.neu { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.neu p { margin-top: 1.2rem; }
.neu-karte { padding: clamp(1.8rem, 3.5vw, 3rem); background: var(--weiss); border-radius: 28px; }
.neu-karte h3 { color: var(--tief); }
.neu-karte .tel { display: block; margin-top: 0.8rem; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; color: var(--schiefer); text-decoration: none; }
.neu-karte .tel:hover { color: var(--tief); }
.neu .knoepfe { margin-top: 2rem; }

/* Zwei Wege: Karriere und Fachkollegen */
.wege { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1rem, 2.5vw, 2rem); }
.weg { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: clamp(1.8rem, 3.5vw, 3rem); border-radius: 28px; overflow: hidden; }
.weg p { margin-top: 1rem; }
.weg .knopf, .weg .pfeil { margin-top: 1.8rem; align-self: flex-start; }
.weg-karriere { color: var(--weiss); background: var(--tief); }
.weg-karriere picture { position: absolute; inset: 0; }
.weg-karriere img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.weg-karriere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(46 64 73 / 0.97) 0%, rgb(46 64 73 / 0.82) 34%, rgb(46 64 73 / 0) 66%); }
.weg-karriere > :not(picture) { position: relative; z-index: 1; }
.weg-karriere p { color: var(--hell); }
.weg-kollegen { background: var(--salbei); }
.weg-kollegen .zeichen { position: absolute; top: clamp(1.8rem, 3.5vw, 3rem); left: clamp(1.8rem, 3.5vw, 3rem); width: 84px; aspect-ratio: 4 / 5.2; border: 1px solid var(--schiefer); border-bottom: 0; border-radius: 999px 999px 0 0; }
.weg-kollegen .zeichen::after { content: ""; position: absolute; inset: 14px 14px 0; border-radius: 999px 999px 0 0; background: var(--mint); }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); }
.zeiten { width: 100%; margin-top: 2rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { padding: 0.95rem 0; border-bottom: 1px solid var(--mint); text-align: left; font-weight: 400; vertical-align: top; }
.zeiten th { width: 9.5rem; font-weight: 600; color: var(--tief); }
.zeiten-hinweis { margin-top: 1.2rem; color: var(--tinte-leise); }
.adresse { font-style: normal; font-size: 1.15rem; line-height: 1.7; }
.adresse strong { font-family: var(--display); font-size: 1.5rem; }
.adresse a { text-decoration: none; border-bottom: 1px solid var(--mint); }
.adresse a:hover { border-bottom-color: var(--tief); }
.kontakt .knoepfe { margin-top: 2rem; }
.kontakt-karte { align-self: start; padding: clamp(1.8rem, 3.5vw, 3rem); background: var(--salbei-hell); border-radius: 28px; }

/* Fragen */
.fragen { max-width: 880px; }
.fragen details { border-bottom: 1px solid var(--mint); }
.fragen details:first-of-type { border-top: 1px solid var(--mint); margin-top: 2.2rem; }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; font-family: var(--display); font-size: 1.25rem; font-weight: 600; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
/* Aufklapp-Zeichen: ein Plus, das sich beim Öffnen zum Kreuz dreht */
.fragen summary::after, .stellen summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(var(--schiefer), var(--schiefer)) center / 100% 1.5px no-repeat, linear-gradient(var(--schiefer), var(--schiefer)) center / 1.5px 100% no-repeat; transition: transform 0.4s var(--weich); }
.fragen details[open] summary::after, .stellen details[open] summary::after { transform: rotate(45deg); }
.fragen summary:hover { color: var(--schiefer); }
.fragen details p { padding: 0 3rem 1.6rem 0; color: var(--tinte-leise); }

/* Fuß */
.fuss { padding: clamp(3rem, 6vw, 5rem) var(--rand) 2rem; background: var(--tief); color: var(--hell); }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; max-width: 1240px; margin-inline: auto; }
.fuss img { width: 190px; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss strong { color: var(--weiss); }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss li + li { margin-top: 0.5rem; }
.fuss-ende { max-width: 1240px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--tief-2); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; }

/* Bewegung: Nur die Fotobögen bewegen sich. Der Bogen im ersten Bildschirm öffnet sich beim Laden,
   die übrigen öffnen sich das letzte Stück, wenn sie ins Bild kommen. Text steht von Anfang an. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-bogen .bogen { animation: bogen-auf 1.3s var(--weich) both; }
  .js .hero-bogen::before, .js .hero-bogen figcaption { animation: einblenden 0.9s 0.7s var(--weich) both; }
  @keyframes bogen-auf { from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
  @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
  .js .rein .bogen, .js .rein.bogen { clip-path: inset(20% 0 0 0 round 999px 999px 0 0); transition: clip-path 1.2s var(--weich); }
  .js .rein.da .bogen, .js .rein.da.bogen { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
}

/* Schmale Bildschirme */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 0.5em; min-height: 46px; padding: 0 1.1em; font: 600 0.95rem/1 var(--text); color: var(--tief); background: var(--weiss); border: 0; border-radius: 0; cursor: pointer; }
  .kopf.offen { flex-wrap: wrap; max-height: calc(100svh - 24px); overflow-y: auto; box-shadow: 0 16px 36px -20px rgba(34, 50, 58, 0.55), 0 2px 6px -2px rgba(34, 50, 58, 0.18); }
  .kopf.offen .nav { display: block; flex-basis: 100%; order: 5; padding: 0.6rem 0 1rem; }
  .kopf.offen .nav ul { flex-direction: column; gap: 0; }
  .kopf.offen .nav a { display: block; padding: 0.85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--mint); }
  .kopf > .knopf { margin-left: auto; }
  .hero { padding-right: var(--rand); }
  .schnell { bottom: 1.5rem; }
}
@media (max-width: 860px) {
  body { font-size: 1rem; }
  :root { --kopf-oben: 14px; --kopf-hoehe: 62px; }
  .kopf { padding: 8px 8px 8px 20px; }
  .kopf.schwebt { top: 10px; }
  .kopf > .knopf { display: none; }
  /* Im offenen Menü steht „Termin buchen“ als letzter, voller Eintrag */
  .kopf.offen > .knopf { display: inline-flex; order: 6; flex-basis: 100%; margin: 0 12px 0.7rem 0; }
  .logo img { width: 148px; }
  .hero-seite { min-height: 0; }
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-text { padding: 2.2rem 0 1.9rem; }
  .hero-text > p { font-size: 1.02rem; margin-top: 1rem; }
  .hero .knoepfe { margin-top: 1.5rem; gap: 10px; }
  .bewertung-zeile { margin-top: 1.4rem; }
  .hero-bogen { width: min(78%, 300px); height: 400px; justify-self: center; }
  .hero-bogen.bogenlinie::before { inset: -12px -12px 0; }
  .hero-bogen figcaption { display: none; }
  .schnell a { width: 48px; height: 48px; }
  .belege { flex-direction: column; align-items: flex-start; }
  .belege ul { flex-direction: column; gap: 0.5rem; }
  .team, .schwerpunkt, .technik, .praxis-kopf, .neu, .wege, .kontakt { grid-template-columns: 1fr; }
  .portrait:nth-child(2) { margin-top: 2.5rem; }
  .zeile { grid-template-columns: 1fr; gap: 0.6rem; }
  .schwerpunkt .bild { order: 2; max-width: 420px; }
  .kuerzel { gap: 1.5rem; }
  .technik-bilder { padding-bottom: 3rem; }
  .technik-bilder .klein { left: 0.8rem; width: 38%; border-width: 5px; }
  .technik-bilder figcaption { max-width: 52%; font-size: 0.85rem; }
  .zahlen { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .raeume { grid-template-columns: 1fr 1fr; }
  .raeume figure:nth-child(3) { grid-column: 1 / -1; max-width: 70%; }
  .stimmen { grid-template-columns: 1fr; gap: 2rem; }
  .weg { min-height: 420px; }
  .weg-kollegen { min-height: 0; padding-top: 9.5rem; }
  .fragen summary { font-size: 1.1rem; }
  .fragen details p { padding-right: 0; }
  .fuss-raster { grid-template-columns: 1fr; gap: 2rem; }
}

/* Karte für Fachkollegen: das Bogenzeichen steht oben und schiebt den Text nach unten */
.weg-kollegen .zeichen { position: relative; top: auto; left: auto; flex: none; margin-bottom: auto; }
.weg-kollegen h2 { margin-top: 2.2rem; }

@media (max-width: 860px) {
  /* Karriere: Foto oben, Text darunter auf dunklem Grund */
  .weg-karriere { justify-content: flex-start; padding: 0; min-height: 0; }
  .weg-karriere picture { position: relative; inset: auto; display: block; aspect-ratio: 16 / 11; }
  .weg-karriere::after { display: none; }
  .weg-karriere h2 { margin-top: 1.6rem; }
  .weg-karriere > :not(picture) { margin-inline: 1.5rem; }
  .weg-karriere .knopf { margin-bottom: 1.6rem; width: auto; align-self: stretch; }
  .weg-kollegen { padding-top: 1.8rem; }
  /* Technik: kleiner Bogen und Bildunterschrift stehen unter dem großen Bild */
  .technik-bilder { padding-bottom: 0; }
  .technik-bilder .klein { position: relative; left: auto; bottom: auto; width: 44%; margin: -3.2rem 0 0 1rem; }
  .technik-bilder figcaption { position: static; max-width: none; margin-top: 1rem; text-align: left; font-size: 0.9rem; }
}


/* ---------- Unterseiten ---------- */

.seitenkopf { position: relative; overflow: hidden; padding-bottom: 0; }
.seitenkopf::before { content: ""; position: absolute; right: -10vw; bottom: -46vw; width: 70vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--tief-2); pointer-events: none; }
.seitentitel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 5rem); align-items: end; padding: clamp(3rem, 6vw, 5.5rem) calc(var(--rand) + 1rem) 0 var(--rand); }
.seitentitel.ohne-bild { grid-template-columns: 1fr; }
.seitentitel > div:first-child { padding-bottom: clamp(3rem, 6vw, 5rem); }
.seitentitel h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.08; max-width: 18ch; }
.seitentitel p { margin-top: 1.3rem; font-size: 1.15rem; max-width: 36em; }
.seitentitel .knoepfe { margin-top: 2rem; }
.seitentitel .bogen { height: 340px; }
.seitentitel .bogen img { object-position: 50% 20%; }

.prosa { max-width: 780px; }
.prosa h2 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.prosa h2:first-child { margin-top: 0; }
.prosa p { margin-top: 1.1rem; }
.prosa ul.punkte { margin-top: 1.2rem; }
ul.punkte li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-bottom: 1px solid var(--mint); }
ul.punkte li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 9px; height: 13px; border-radius: 999px 999px 0 0; background: var(--schiefer); }
.dunkel ul.punkte li { border-bottom-color: var(--tief-2); color: var(--hell); }
.dunkel ul.punkte li::before { background: var(--mint); }
.abschluss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Leistungen: Gruppenname links, Leistungen rechts */
.gruppe { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); gap: 1.5rem clamp(1.5rem, 5vw, 5rem); padding: clamp(2rem, 4vw, 3.2rem) 0; border-top: 1px solid var(--mint); }
.gruppe:first-of-type { border-top: 0; padding-top: 0; }
.gruppe > h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); color: var(--schiefer); position: sticky; top: calc(var(--kopf-hoehe) + 36px); align-self: start; }
.gruppe dl > div { padding: 1.15rem 0; border-bottom: 1px solid var(--mint); }
.gruppe dl > div:first-child { padding-top: 0; }
.gruppe dl > div:last-child { border-bottom: 0; }
.gruppe dt { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.gruppe dd { margin-top: 0.4rem; color: var(--tinte-leise); }
.gruppe dd .pfeil { margin-top: 0.9rem; color: var(--tief); }

/* Ablauf als Strecke */
.ablauf { position: relative; margin-top: clamp(2rem, 4vw, 3rem); counter-reset: schritt; }
.ablauf::before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 40px; width: 1px; background: var(--schiefer); }
.ablauf li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.6rem; padding-bottom: clamp(1.6rem, 3vw, 2.4rem); counter-increment: schritt; }
.ablauf li::before { content: counter(schritt); display: grid; place-items: end center; padding-bottom: 12px; width: 64px; height: 80px; border-radius: 999px 999px 0 0; background: var(--mint); color: var(--tief); font: 700 1.7rem/1 var(--display); z-index: 1; }
.ablauf li:nth-child(3)::before { background: var(--weiss); width: 64px; height: 96px; margin-top: -16px; }
.ablauf h3 { padding-top: 0.5rem; color: var(--weiss); }
.ablauf p { margin-top: 0.5rem; }

/* Team */
.arzt { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--mint); }
.arzt:first-child { border-top: 0; padding-top: 0; }
.arzt .bogen { aspect-ratio: 4 / 5.2; }
.arzt .bogen img { object-position: 50% 12%; }
.arzt h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.arzt .rolle { margin-top: 0.4rem; font-weight: 600; color: var(--schiefer); }
.arzt p { margin-top: 1rem; }
.arzt .siegel { margin-top: 1.6rem; }
.teamreihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(0.6rem, 1.4vw, 1.4rem); align-items: end; margin-top: clamp(2rem, 4vw, 3.5rem); }
.teamreihe .bogen { aspect-ratio: 4 / 5.6; }
.teamreihe img { object-position: 50% 10%; }

/* Formulare */
.formular-rahmen { max-width: 760px; padding: clamp(1.6rem, 4vw, 3.2rem); background: var(--weiss); border-radius: 28px; }
.formular fieldset { border: 0; padding: 0; min-width: 0; }
.feld { margin-top: 2rem; }
.feld:first-child { margin-top: 0; }
.feld > label, .feld legend { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--tief); padding: 0; }
.feld .freiwillig { font: 400 0.9rem var(--text); color: var(--tinte-leise); margin-left: 0.4rem; }
.feld .hinweis { margin-top: 0.35rem; font-size: 0.92rem; color: var(--tinte-leise); }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"], .feld textarea {
  width: 100%; margin-top: 0.7rem; padding: 0.9rem 1.1rem; font: inherit; color: var(--tinte);
  background: var(--salbei-hell); border: 1.5px solid var(--mint); border-radius: 14px;
  transition: border-color 0.3s var(--weich), background-color 0.3s var(--weich);
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld input:hover, .feld textarea:hover { border-color: var(--schiefer); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--tief); background: var(--weiss); box-shadow: 0 0 0 3px var(--mint); }
.feld input.kurz { max-width: 11rem; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.wahl label { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.15rem; font-weight: 600; font-size: 0.97rem; border: 1.5px solid var(--mint); border-radius: 999px; background: var(--salbei-hell); cursor: pointer; transition: background-color 0.3s var(--weich), border-color 0.3s var(--weich), color 0.3s var(--weich); }
.wahl input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.wahl label:hover { border-color: var(--schiefer); }
.wahl label:has(input:checked) { background: var(--schiefer); border-color: var(--schiefer); color: var(--weiss); }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--gruen); outline-offset: 3px; }
.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; margin-top: 2.2rem; font-size: 0.97rem; }
.zustimmung input { width: 22px; height: 22px; margin-top: 0.15rem; }
.fehler { display: none; margin-top: 0.5rem; font-size: 0.93rem; font-weight: 600; color: #A3341F; }
.hat-fehler .fehler { display: block; }
.hat-fehler input[type="text"], .hat-fehler input[type="tel"], .hat-fehler input[type="email"], .hat-fehler textarea { border-color: #A3341F; }
.falle { position: absolute; left: -9999px; }
.formular .knopf { margin-top: 2.2rem; }
.formular .knopf[disabled] { opacity: 0.6; cursor: progress; }
.status { margin-top: 1rem; font-weight: 600; color: #A3341F; }
.status:empty { display: none; }
.gesendet .formular { display: none; }
.erfolg { padding: 1rem 0; }
.erfolg h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.erfolg p { margin-top: 1rem; }
.erfolg:focus { outline: none; }
.vorab { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 760px; margin-bottom: 1.6rem; }
.vorab > div { padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--weiss); }
.vorab h2 { font-size: 1.2rem; }
.vorab p { margin-top: 0.5rem; font-size: 0.97rem; }
.vorab a { font-weight: 600; }

/* Stellen */
.stellen { margin-top: 2rem; border-top: 1px solid var(--mint); }
.stellen details { border-bottom: 1px solid var(--mint); }
.stellen summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; cursor: pointer; list-style: none; transition: color 0.3s var(--weich); }
.stellen summary::-webkit-details-marker { display: none; }
.stellen summary::after { width: 22px; height: 22px; }
.stellen summary:hover { color: var(--schiefer); }
.stellen .inhalt { padding: 0 3rem 2rem 0; }
.stellen .inhalt p + p { margin-top: 1rem; }
.stellen .inhalt .pfeil { margin-top: 1.4rem; }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.film { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tief); }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; }
.film-text { margin-top: 0.9rem; font-size: 0.92rem; color: var(--tinte-leise); }
.bildrund { border-radius: 28px; overflow: hidden; }
.bildrund img { width: 100%; height: 100%; object-fit: cover; }

.notfall { max-width: 780px; }
.notfall p { margin-top: 1.1rem; }
.notfall .knoepfe { margin-top: 1.8rem; }
.recht { max-width: 780px; }
.recht h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.recht h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.recht p { margin-top: 0.9rem; }
.recht ul { margin-top: 0.9rem; padding-left: 1.3rem; list-style: disc; }
.recht li { margin-top: 0.3rem; }
.recht .stand { margin-top: 2.4rem; color: var(--tinte-leise); }

@media (max-width: 860px) {
  .seitentitel { grid-template-columns: 1fr; padding-right: var(--rand); }
  .seitentitel > div:first-child { padding-bottom: 2.2rem; }
  .seitentitel .bogenlinie { width: min(70%, 260px); justify-self: center; }
  .seitentitel .bogenlinie::before { inset: -12px -12px 0; }
  .seitentitel .bogen { height: 260px; }
  .gruppe, .arzt, .zweispaltig, .vorab, .feld-paar { grid-template-columns: 1fr; }
  .gruppe > h2 { position: static; }
  .arzt .bogenlinie { max-width: 260px; }
  .teamreihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ablauf li { grid-template-columns: 52px minmax(0, 1fr); gap: 1.1rem; }
  .ablauf li::before { width: 52px; height: 68px; font-size: 1.4rem; }
  .ablauf li:nth-child(3)::before { width: 52px; height: 80px; margin-top: -12px; }
  .ablauf::before { left: 25px; }
  .stellen .inhalt { padding-right: 0; }
  .formular-rahmen { border-radius: 22px; }
}


/* Formularseiten: Formular links, Hinweise rechts daneben */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
.anfrage-raster .vorab { grid-template-columns: 1fr; margin: 0; position: sticky; top: calc(var(--kopf-hoehe) + 36px); max-width: 420px; }
.anfrage-raster .formular-rahmen { max-width: none; }
.feld-paar { margin-top: 2rem; row-gap: 1.6rem; }
.feld-paar .feld, .feld-paar .feld:first-child { margin-top: 0; }
.feld > label.zustimmung { display: grid; }
@media (max-width: 1080px) {
  .anfrage-raster { grid-template-columns: 1fr; }
  .anfrage-raster .vorab { position: static; max-width: none; order: -1; }
}

/* ---------- Korrekturen nach der unabhängigen Abnahme (13.10.2026) ---------- */

/* Schmale Textblöcke stehen an derselben linken Kante wie alle Überschriften, nicht mittig */
.innen.prosa, .innen.fragen, .innen.recht, .innen.notfall { max-width: 1240px; }
.innen.prosa > *, .innen.recht > *, .innen.notfall > * { max-width: 780px; }
.innen.fragen > * { max-width: 880px; }

/* Die Bogenlinie ist auf hellem Grund überall Mint */
.abschnitt:not(.dunkel) .bogenlinie::before { border-color: var(--mint); }

/* Die Kreislinien im Grund des ersten Bildschirms laufen auf schmaleren Fenstern durch den Text */
@media (max-width: 1200px) { .hero-seite::before { display: none; } }

.adresse strong { display: inline-block; line-height: 1.2; }
a[href^="mailto:"] { white-space: nowrap; }

/* Formulare */
.formular > noscript + .feld { margin-top: 0; }
.feld .freiwillig { white-space: nowrap; }
.wahl label { padding: 0.6rem 1.15rem; line-height: 1.3; border-radius: 23px; }

@media (max-width: 860px) {
  /* Das leere Bogenzeichen der Karte für Fachkollegen liest sich auf dem Handy wie ein fehlendes Bild */
  .weg-kollegen .zeichen { display: none; }
  .weg-kollegen h2 { margin-top: 0; }
}
@media (max-width: 560px) {
  .knopf { width: 100%; }
  .teamreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ablauf ohne hervorgehobenen Schritt (Zahnreinigung): alle Bögen gleich */
.ablauf.gleich li:nth-child(3)::before { background: var(--mint); height: 80px; margin-top: 0; }
@media (max-width: 860px) { .ablauf.gleich li:nth-child(3)::before { height: 68px; margin-top: 0; } }

/* Zweite Runde der Abnahme */
.kopf-telefon { display: none; }
@media (max-width: 860px) {
  .kopf.offen .kopf-telefon { display: block; order: 7; flex-basis: 100%; margin: 0 12px 1rem 0; text-align: center; font-weight: 600; text-decoration: none; }
}
/* „freiwillig“ rückt nicht ein, wenn es in die nächste Zeile umbricht */
.feld .freiwillig { display: inline-block; margin-left: 0; }
.nicht-umbrechen { white-space: nowrap; }

/* Teamreihe mit acht Porträts: am Desktop zwei Reihen zu vier, am Handy drei, drei und zwei (mittig) */
.teamreihe { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
@media (max-width: 860px) {
  .teamreihe { display: flex; flex-wrap: wrap; justify-content: center; }
  .teamreihe li { flex: 0 0 calc((100% - 2 * clamp(0.6rem, 1.4vw, 1.4rem)) / 3); }
}

/* Film in voller Breite (Karriere), mit Knopf zum Anhalten */
.film-gross { margin-top: clamp(2rem, 4vw, 3.5rem); }
.film video { display: block; }
.film-knopf { position: absolute; right: 1rem; bottom: 1rem; min-height: 42px; padding: 0 1.2em; font: 600 0.92rem/1 var(--text); color: var(--tief); background: var(--salbei); border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.3s var(--weich); }
.film-knopf:hover { background: var(--weiss); }
@media (max-width: 860px) { .film { border-radius: 22px; } .film-knopf { right: 0.7rem; bottom: 0.7rem; } }

/* Drei Porträts nebeneinander (Zahnreinigung) */
.duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem); align-items: end; width: 100%; max-width: 540px; justify-self: center; }
.duo .bogen { aspect-ratio: 4 / 5.6; }
.duo img { object-position: 50% 10%; }
@media (max-width: 860px) { .duo { max-width: 420px; justify-self: start; } }

/* Terminseite: Der Kalender des Terminanbieters sitzt als Rahmen in der Seite und lädt erst nach einem Klick */
.pfeil.zurueck:hover svg { transform: translateX(-4px); }
/* Der Kalender ist der Zweck der Seite und beginnt deshalb dicht unter dem Kopf */
.abschnitt.terminseite { padding-top: clamp(2rem, 4vw, 3.5rem); }
.buchung { margin-top: 1.6rem; background: var(--weiss); border-radius: 28px; overflow: hidden; }
.buchung-start { max-width: 760px; padding: clamp(1.6rem, 4vw, 3.2rem); }
.buchung-start h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.buchung-start p { margin-top: 1rem; }
.buchung-start .knoepfe { margin-top: 1.8rem; }
html:not(.js) .buchung-laden { display: none; }
.buchung iframe { display: block; width: 100%; height: 1760px; border: 0; }
.buchung-hilfe { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2.5rem; margin-top: 1.4rem; }
.buchung-hilfe p { font-size: 0.97rem; color: var(--tinte-leise); }
.buchung-hilfe p a { font-weight: 600; color: var(--tinte); }
.buchung-hinweise { margin: 2.4rem 0 0; }
/* Schmal stapelt der Kalender seine Felder und wird länger (am Handy gemessen: 2114 Pixel) */
@media (max-width: 860px) { .buchung { border-radius: 22px; } .buchung iframe { height: 2200px; } }
@media (max-width: 560px) {
  /* Der Kalender braucht am Handy die ganze Breite */
  .buchung.geladen { margin-inline: calc(var(--rand) * -1); border-radius: 0; }
}

/* Erklärvideo mit Ton und Bedienleiste (Zahnreinigung). Das Bild bleibt ganz sichtbar, nichts wird beschnitten. */
.film-erklaer .film video { object-fit: contain; }
/* Steht das Video allein über einem weißen Abschnitt, trägt der folgende Abschnitt den Abstand */
.abschnitt.nur-film { padding-bottom: 0; }