/* =============================================================================
   neu/v3/stil.css — die dritte Fassung, nach einem Dribbble-Entwurf (memobottle)

   Vermessen am 28.09.2026 aus dem Shot (ref/blueprint-memobottle-2026-09-28/):
   Seite 1440 breit, Rand 58, drei Spalten zu 441, dazwischen sichtbare Linien;
   Plus Jakarta Sans in drei Einstellungen; Grund #f5f5f5, Schwarz #141414.
   Alle Pixelwerte unten sind die bei 1440; darunter skalieren sie mit.
   ========================================================================== */

:root {
  --grund: #f5f5f5;
  --schwarz: #141414;
  --text: #1f1f1f;
  --leise: #8f8f8f;
  --leise-dunkel: #8a8a8a;
  --linie-fest: #dedede;

  --schrift: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rand: clamp(20px, 4.03vw, 72px);    /* 58 bei 1440 */
  --spalte: calc((100vw - 2 * var(--rand)) / 3);

  --g-h1:    clamp(2.25rem, 1.694rem + 2.286vw, 3.75rem);   /* 36 … 60 */
  --g-h2:    clamp(1.75rem, 1.564rem + .762vw, 2.25rem);    /* 28 … 36 */
  --g-form:  clamp(2.25rem, 1.61rem + 2.6vw, 3.625rem);     /* 36 … 58 */
  --g-riese: clamp(4.5rem, 1.99rem + 10.29vw, 11.25rem);    /* 72 … 180 */
  --g-h3:    1.25rem;
  --g-text:  .875rem;                                       /* 14 */
  --g-gross: clamp(1.25rem, 1rem + .9vw, 1.75rem);          /* 20 … 28 */
  --kopf: 83px;
}
@media (max-width: 719.9px) { :root { --g-text: .9375rem; --kopf: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopf); }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 var(--g-text) / 1.64 var(--schrift); letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
body.gesperrt { overflow: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
h1 { font-size: var(--g-h1); line-height: 1.35; }
h2 { font-size: var(--g-h2); line-height: 1.15; }
.etikett { font-size: 13px; color: #a3a3a3; letter-spacing: .01em; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Das Raster: drei Spalten zwischen zwei Rändern. .raster legt Inhalte darauf. */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--rand); }
.raster > *, .band > *, .bildfelder > *, .fuss-reihe > * { min-width: 0; }   /* kein Rasterfeld darf breiter als sein Platz werden */
.abschnitt { padding: 128px 0; }
@media (max-width: 719.9px) { .abschnitt { padding: 72px 0; } }

/* Verweis: Wort, Linie darunter, kleiner schräger Pfeil */
.verweis {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border: 0; background: none; cursor: pointer;
  font-size: var(--g-text); font-weight: 500; letter-spacing: 0; box-shadow: inset 0 -1px 0 currentColor;
  transition: gap .25s ease, opacity .2s ease;
}
.verweis:hover { gap: 14px; }
.pfeil { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.verweis-hell { color: #f5f5f5; }

/* --------------------------------------------------------------- Platzhalter
   Wo später ein Foto steht: zwei Wörter, was es zeigen soll. Mehr steht in BILDLISTE.md. */
.platz {
  position: relative; width: 100%; height: 100%; min-height: 160px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px;
  background: #e6e6e4; color: #3a3a3a; overflow: hidden;
}
.platz > span { position: relative; }
.platz-kurz { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.platz-dunkel { background: #232323; color: rgba(255,255,255,.9); }
.platz-klein { padding: 16px 18px; }
/* Randlose Plätze: die Beschriftung beginnt an der Rasterkante, nicht am Seitenrand */
.held-bild .platz, .mindsoul-bild .platz, .bildfelder-bild .platz, .band-bild > .platz, .teil-links .teil-bild .platz { padding-left: var(--rand); }

/* ------------------------------------------------------------------- Kopf */
.kopf {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--kopf);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding: 0 var(--rand);
  background: var(--grund); border-bottom: 1px solid var(--linie-fest);
}
body { padding-top: var(--kopf); }
.marke { justify-self: start; color: var(--text); }
.marke svg { display: block; height: 30px; width: auto; fill: currentColor; }
.hauptnav { justify-self: start; padding-left: 26px; }
.hauptnav ul { display: flex; gap: 26px; }
.hauptnav a { font-size: 14px; letter-spacing: .01em; white-space: nowrap; transition: opacity .2s ease; }
.hauptnav a:hover { opacity: .55; }
.kopf-rechts { justify-self: end; display: flex; align-items: center; gap: 14px; }
/* Online-Buchung (Latido) immer sichtbar im Kopf, schwarz wie der Knopf im Formular */
.kopf-buchen { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; margin-right: 6px; background: var(--text); color: var(--grund); font-size: 13px; white-space: nowrap; transition: background-color .2s ease; }
.kopf-buchen:hover { background: #4a4a4a; }
.kopf.auf-vorhang .kopf-buchen { background: #f5f5f5; color: var(--schwarz); }   /* im offenen Menü hell, sonst verschwindet er im Schwarz */
@media (max-width: 719.9px) { .kopf-buchen { height: 32px; padding: 0 12px; margin-right: 2px; font-size: 12.5px; } }
.kopf-buchen-kurz { display: none; }
@media (max-width: 429.9px) { .kopf-buchen-lang { display: none; } .kopf-buchen-kurz { display: inline; } }
@media (max-width: 359.9px) { .kopf-rechts { gap: 0; } .kopf-rechts .symbol { width: 30px; } .kopf-buchen { margin-right: 4px; } }
.symbol { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--text); padding: 0; }
.symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.schalter-linien { position: relative; width: 20px; height: 10px; display: block; }
.schalter-linien i { position: absolute; left: 0; width: 100%; height: 1.4px; background: currentColor; transition: transform .45s cubic-bezier(.16,1,.3,1), top .45s cubic-bezier(.16,1,.3,1); }
.schalter-linien i:first-child { top: 0; } .schalter-linien i:last-child { top: 8.6px; }
[aria-expanded="true"] .schalter-linien i:first-child { top: 4.3px; transform: rotate(45deg); }
[aria-expanded="true"] .schalter-linien i:last-child { top: 4.3px; transform: rotate(-45deg); }
.kopf.auf-vorhang { background: var(--schwarz); border-color: transparent; }   /* schwarz statt durchsichtig: Safari färbt die Statusleiste nach der fest stehenden Leiste oben */
.kopf.auf-vorhang .marke, .kopf.auf-vorhang .symbol, .kopf.auf-vorhang .hauptnav a { color: #f5f5f5; }
@media (max-width: 1099.9px) {
  .hauptnav { display: none; }
  .kopf { grid-template-columns: 1fr auto; }
}
@media (max-width: 719.9px) { .marke svg { height: 24px; } .kopf-rechts { gap: 4px; } }

/* ---------------------------------------------------------------- Vorhang */
.vorhang { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.vorhang[aria-hidden="false"] { pointer-events: auto; }
.vorhang-grund { position: absolute; inset: 0; transform: translateY(-110%); will-change: transform; }
.vorhang-grund svg { position: absolute; left: 0; top: 0; width: 100%; height: 110%; display: block; }
.vorhang-grund path { fill: var(--schwarz); }
.vorhang.sofort .vorhang-grund { transform: none; }
.vorhang-menue { position: absolute; inset: 0; visibility: hidden; color: #f5f5f5; padding: calc(var(--kopf) + 40px) var(--rand) 32px; overflow-y: auto; }
.vorhang-innen { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 22% minmax(240px, 26%); column-gap: 40px; grid-template-rows: 1fr auto; }
.vorhang-liste { position: relative; grid-row: 1 / 3; align-self: center; }
.vorhang-zeile { display: block; overflow: hidden; padding: .02em 0 .18em; margin-bottom: -.16em; }   /* unten Luft für g und p */
.vorhang-zeile > a { display: inline-block; font-size: clamp(2.25rem, 5vw, 4.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; transition: opacity .3s ease; }
.vorhang-punkt:focus-within .vorhang-zeile > a { opacity: 1; }
/* Das Abblenden beim Überfahren nur mit Maus und nur am Desktop: auf dem Handy blieb der
   Hover nach dem Antippen hängen, und Zeilen waren zufällig grau. */
@media (hover: hover) and (min-width: 1024px) {
  .vorhang-liste:hover .vorhang-zeile > a { opacity: .38; }
  .vorhang-liste .vorhang-punkt:hover .vorhang-zeile > a { opacity: 1; }
}
.vorhang-mehr { display: none; }
.vorhang-unter { position: absolute; left: calc(100% + 40px); top: .5rem; width: 42%; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .45s ease; }
.vorhang-punkt.gezeigt .vorhang-unter { opacity: 1; transform: none; pointer-events: auto; }
.vorhang-unter .etikett { display: block; margin-bottom: 6px; color: rgba(245,245,245,.45); }
.vorhang-unter a { display: block; padding: 2px 0; opacity: .85; }
.vorhang-unter a:hover { opacity: 1; }
/* Niedrige Fenster (Laptop, iPad quer): die Unterpunkte enger, damit auch die längste Liste
   (Menopause, elf Punkte) über der Fußzeile des Menüs endet. */
@media (min-width: 1024px) and (max-height: 860px) {
  .vorhang-unter { gap: 10px; }
  .vorhang-unter .etikett { margin-bottom: 2px; }
  .vorhang-unter a { padding: 0; }
}
.vorhang-angaben { grid-column: 3; grid-row: 2; align-self: end; padding: 32px 0; }
.vorhang-zeiten .etikett { display: block; color: rgba(245,245,245,.45); }
.vorhang-fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; color: rgba(245,245,245,.65); }
.vorhang-fuss a:hover { color: #f5f5f5; }
.vorhang-mail { margin-left: auto; }
.zeiten { margin: 12px 0 0; }
.zeiten div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.16); }
.zeiten div:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.zeiten dt { opacity: .6; }
.zeiten dd { margin: 0; text-align: right; }
.tel-hinweis { margin-top: 8px; font-size: 12px; opacity: .55; }
@media (max-width: 1023.9px) {
  .vorhang-innen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 32px; }
  .vorhang-liste { grid-row: auto; align-self: start; }
  .vorhang-zeile { display: flex; align-items: center; justify-content: space-between; }
  .vorhang-zeile > a { font-size: clamp(2rem, 9vw, 3rem); }
  /* Handy und iPad: ein Akkordeon. Die ganze Zeile klappt auf, immer nur ein Punkt ist offen,
     die anderen treten zurück; das Plus wird zum Minus. Höhe und Unterpunkte bewegt skript.js,
     ohne Skript oder bei reduzierter Bewegung klappt es sofort. */
  .vorhang-zeile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .vorhang-zeile > a { transition: opacity .4s ease; }
  .vorhang-liste.hat-offen .vorhang-punkt:not(.offen) .vorhang-zeile > a,
  .vorhang-liste.hat-offen .vorhang-punkt:not(.offen) .vorhang-mehr { opacity: .35; }
  .vorhang-mehr { position: relative; display: block; flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: #f5f5f5; cursor: pointer; transition: opacity .4s ease; }
  .vorhang-mehr::before, .vorhang-mehr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin: -.75px 0 0 -9px; background: currentColor; transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .vorhang-mehr::after { transform: rotate(90deg); }
  .vorhang-punkt.offen .vorhang-mehr::after { transform: rotate(0deg); }
  .vorhang-unter { position: static; width: auto; height: 0; overflow: hidden; gap: 22px; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .vorhang-punkt.offen .vorhang-unter { height: auto; }
  .vorhang-unter > li:first-child { padding-top: 14px; }
  .vorhang-unter > li:last-child { padding-bottom: 30px; }
  .vorhang-unter .etikett { margin-bottom: 2px; font-size: 12.5px; }
  .vorhang-unter a { padding: 8px 0; font-size: 1.0625rem; line-height: 1.35; opacity: .9; }
    .vorhang-angaben { grid-column: 1; grid-row: auto; padding: 8px 0 24px; }
}

/* ------------------------------------------------------------------ Held */
.held-kopf { padding-top: 52px; padding-bottom: 48px; row-gap: 28px; }
.held-titel { grid-column: 1 / 3; }
.held-titel h1 { margin-bottom: 26px; }
.runde { display: flex; gap: 8px; }
.rund { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--text); color: var(--grund); transition: background-color .2s ease; }
.rund:hover { background: #4a4a4a; }   /* kein Deckkraft-Übergang: der käme der GSAP-Einblendung in die Quere */
.rund svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.held-seite { grid-column: 3; align-self: end; padding: 0 0 6px 2px; }
.held-seite p { max-width: 300px; margin-bottom: 18px; color: #3a3a3a; }
.held-bild { height: clamp(360px, 42.8vw, 700px); }   /* 617 bei 1440 */
@media (max-width: 719.9px) {
  .held-kopf { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .held-titel, .held-seite { grid-column: 1; }
  .held-bild { height: 64svh; }
}

/* ----------------------------------------------------- Die Ordination (About) */
.ueber .raster { grid-template-rows: auto auto auto; column-gap: 30px; }   /* ohne Rasterlinie brauchen die zwei Plätze Luft, sonst lesen sie sich als eine L-Form */
.ueber-etikett { grid-column: 1; grid-row: 1; }
.ueber-satz { grid-column: 2; grid-row: 1; max-width: 330px; padding-left: 3px; color: #3a3a3a; }
.ueber-wort { grid-column: 1; grid-row: 2 / 4; align-self: start; padding: 42px 40px 0 0; }
.ueber-wort h2 { max-width: 330px; margin-bottom: 36px; }
.ueber-wort p { max-width: 350px; margin-bottom: 26px; color: #3a3a3a; }
.ueber-bild1 { grid-column: 2; grid-row: 2; margin-top: 40px; aspect-ratio: 441 / 347; }
.ueber-bild2 { grid-column: 3; grid-row: 2 / 4; margin-top: 139px; aspect-ratio: 441 / 377; }
@media (max-width: 1023.9px) {
  .ueber .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .ueber-etikett { grid-column: 1 / -1; margin-bottom: 16px; }
  .ueber-satz { grid-column: 1 / -1; grid-row: 2; padding: 0; }
  .ueber-wort { grid-column: 1 / -1; grid-row: 3; padding-right: 0; }
  .ueber-satz, .ueber-wort h2, .ueber-wort p { max-width: 560px; }   /* am iPad sonst eine schmale Spalte mit leerer rechter Hälfte */
  .ueber-bild1 { grid-column: 1; grid-row: 4; }
  .ueber-bild2 { grid-column: 2; grid-row: 4; margin-top: 80px; }
}
@media (max-width: 719.9px) {
  .ueber .raster { grid-template-columns: minmax(0, 1fr); }
  .ueber-bild1, .ueber-bild2 { grid-column: 1; grid-row: auto; margin-top: 24px; }
}

/* --------------------------------------------------- Reihen mit Schieber */
.reihe-kopf { align-items: end; margin-bottom: 36px; }
.reihe-kopf h2 { grid-column: 1 / 3; }
.reihe-link { grid-column: 3; justify-self: end; padding-right: calc(var(--rand) * .3); }
.reihe-kopf-drei h2 { grid-column: 1; }
.reihe-kopf-drei p { grid-column: 2; max-width: 330px; padding-left: 3px; color: #3a3a3a; }
.schieber-spur {
  display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--rand); scroll-padding: 0 var(--rand);
}
.schieber-spur::-webkit-scrollbar { display: none; }
.schieber-spur > li { flex: 0 0 calc(var(--spalte) - 29px); scroll-snap-align: start; }
.produkt-bild, .sammlung-bild { aspect-ratio: 1 / 1; }
.produkt-zeile { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.produkt-name { font-weight: 500; letter-spacing: 0; }
.produkt-rechts { color: #a8a8a8; white-space: nowrap; }
.produkt-unter { display: block; color: #a8a8a8; }
.produkt a:hover .produkt-name, .sammlung a:hover .produkt-name { opacity: .6; }
.sammlung-bild { background: #fff; }
.sammlung-bild .platz { background: #fff; }
.sammlung .produkt-name { display: block; margin-top: 14px; }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 30px; padding: 0 var(--rand); }   /* zwei Reihen: breit + schmal, dann schmal + breit */
.kachel:nth-child(1), .kachel:nth-child(4) { grid-column: span 2; }
.kachel-bild { height: clamp(280px, 32vw, 480px); }
.kachel a:hover .produkt-name { opacity: .6; }
.kachel .produkt-name { display: block; margin-top: 14px; }
.schieber-pfeile { display: flex; justify-content: center; gap: 36px; margin-top: 44px; }
.schieber-pfeile button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--text); }
.schieber-pfeile button:disabled { opacity: .25; cursor: default; }
.schieber-pfeile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1023.9px) {
  .reihe-kopf, .reihe-kopf-drei { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .reihe-kopf h2, .reihe-kopf-drei h2, .reihe-kopf-drei p, .reihe-link { grid-column: 1; justify-self: start; padding: 0; }
  .schieber-spur > li { flex-basis: 44vw; }
}
@media (max-width: 719.9px) { .schieber-spur { gap: 16px; } .schieber-spur > li { flex-basis: 78vw; } .kacheln { grid-template-columns: minmax(0, 1fr); gap: 36px; } .kachel:nth-child(n) { grid-column: 1; } .kachel-bild { height: 64vw; } }

/* ------------------------------------------------------ Das schwarze Band */
.band { display: grid; grid-template-columns: calc(var(--rand) + var(--spalte)) 1fr; min-height: 640px; background: var(--schwarz); color: #f5f5f5; }
.band-bild { position: relative; min-height: 420px; }
.band-bild > .platz { position: absolute; inset: 0; justify-content: flex-start; padding-top: 52px; }   /* Beschreibung oben, damit das Etikett unten sie nicht verdeckt */
.band-bild .platz-kurz { max-width: 52%; }   /* die Beschreibung bleibt links der Aussparung */
.band-kerbe { position: absolute; top: 0; right: 0; width: 42%; height: 18%; background: var(--schwarz); }   /* die Aussparung oben rechts */
.band-marke { position: absolute; left: 0; bottom: 0; z-index: 2; width: 42%; min-width: 250px; padding: 22px 20px 22px var(--rand); background: var(--schwarz); color: #f5f5f5; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.merkmale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 72px 56px; padding: 96px var(--rand) 96px 72px; }   /* vier gleich gebaute Felder, links bündig, oben ausgerichtet */
.merkmale li { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.merkmal-zeichen { display: inline-flex; color: #f5f5f5; margin-bottom: 22px; }
.merkmal-zeichen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.merkmale h3 { color: #f5f5f5; font-size: var(--g-h3); font-weight: 500; letter-spacing: -.01em; margin-bottom: 12px; }
.merkmale p { max-width: 34ch; color: rgba(245,245,245,.72); }
@media (max-width: 1023.9px) { .band { grid-template-columns: minmax(0, 1fr); } .band-bild { min-height: 520px; } .band-kerbe { display: none; } .merkmale { padding: 64px var(--rand); } }
@media (max-width: 719.9px) { .merkmale { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 56px var(--rand); } }

/* ------------------------------------------------------- Wahlordination */
.werte .raster { column-gap: 0; }
.werte-etikett { grid-column: 1; grid-row: 1; padding-top: 6px; }
.werte-titel { grid-column: 2 / 4; grid-row: 1; max-width: 560px; margin-bottom: 44px; }
.werte-text1 { grid-column: 2; grid-row: 2; padding-right: 22px; color: #3a3a3a; }
.werte-text2 { grid-column: 3; grid-row: 2; padding: 0 22px 0 3px; color: #3a3a3a; }
.werte-name { margin-top: 18px; color: var(--schwarz); font-weight: 500; }
.werte-text2 h3 { font-size: var(--g-h3); font-weight: 500; letter-spacing: -.01em; color: var(--schwarz); margin-bottom: 10px; }   /* der Wahlarzt-Hinweis soll auffallen (Briefing, Frage 36) */
.werte-text2 p { margin-bottom: 18px; }
.werte-bild-gross { grid-column: 2 / 4; grid-row: 3 / 5; margin-top: 60px; aspect-ratio: 883 / 470; }
.werte-bild-klein { grid-column: 1; grid-row: 4; align-self: end; margin-right: 29px; aspect-ratio: 412 / 315; }
@media (max-width: 1023.9px) {
  .werte .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .werte-etikett, .werte-titel { grid-column: 1 / -1; }
  .werte-titel { grid-row: 2; margin: 16px 0 28px; }
  .werte-text1 { grid-column: 1; grid-row: 3; padding: 0; }
  .werte-text2 { grid-column: 2; grid-row: 3; padding: 0; }
  .werte-bild-klein { grid-column: 1; grid-row: 4; margin: 40px 0 0; align-self: start; aspect-ratio: 4 / 5; }   /* am iPad nebeneinander, sonst steht das kleine Bild allein */
  .werte-bild-gross { grid-column: 2; grid-row: 4; margin-top: 40px; align-self: start; aspect-ratio: 4 / 5; }
}
@media (max-width: 719.9px) {
  .werte .raster { grid-template-columns: minmax(0, 1fr); }
  .werte-text1, .werte-text2 { grid-column: 1; grid-row: auto; margin-bottom: 16px; }
  .werte-bild-gross, .werte-bild-klein { grid-column: 1; grid-row: auto; margin-top: 24px; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------- Mind & Soul */
.mindsoul { display: grid; grid-template-columns: calc(var(--rand) + var(--spalte)) 1fr; min-height: 730px; }
.mindsoul-links { display: grid; grid-template-rows: 478fr 252fr; }
.mindsoul-bild { min-height: 300px; }
.mindsoul-wort { align-self: center; padding: 36px 36px 36px var(--rand); }
.mindsoul-wort h2 { margin-bottom: 26px; }
.mindsoul-wort p { max-width: 350px; margin-bottom: 22px; color: #3a3a3a; }
.mindsoul-gross { min-height: 420px; }
@media (max-width: 1023.9px) { .mindsoul { grid-template-columns: minmax(0, 1fr); } .mindsoul > * { min-width: 0; } .mindsoul-links { grid-template-rows: auto auto; } .mindsoul-bild { aspect-ratio: 4 / 3; min-height: 0; }   /* sonst macht die Mindesthöhe über das Seitenverhältnis eine Mindestbreite */ }

/* ------------------------------------------------- Bild mit zwei Feldern */
.bildfelder { position: relative; display: grid; grid-template-columns: calc(var(--rand) + var(--spalte)) var(--spalte) 1fr; grid-template-rows: 1fr 1fr; min-height: 690px; }
.bildfelder-bild { grid-column: 1 / -1; grid-row: 1 / -1; }
.feld { position: relative; z-index: 2; background: var(--grund); display: flex; flex-direction: column; }
.feld h2 { margin-bottom: 20px; }
[data-zahl] { font-variant-numeric: tabular-nums; }   /* gleich breite Ziffern: beim Zählen springt nichts */
.feld p { max-width: 360px; color: #3a3a3a; }
.feld-oben { grid-column: 1; grid-row: 1; padding: 44px 40px 40px var(--rand); }
.feld-unten { grid-column: 3; grid-row: 2; padding: 44px var(--rand) 40px 30px; }
.feld-unten h2 { max-width: 330px; margin-bottom: 30px; }
.feld-unten .verweis { align-self: flex-start; }
.feld-unten p { margin-bottom: 26px; }
@media (max-width: 1023.9px) {
  .bildfelder { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .bildfelder-bild { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
  .feld-oben, .feld-unten { grid-row: 2; padding: 40px var(--rand); }
  .feld-oben { grid-column: 1; padding-right: 20px; }
  .feld-unten { grid-column: 2; padding-left: 20px; }
}
@media (max-width: 719.9px) {
  .bildfelder { grid-template-columns: minmax(0, 1fr); }
  .feld-oben, .feld-unten { grid-column: 1; grid-row: auto; padding: 40px var(--rand); }
}

/* --------------------------------------------------------- Formular (dunkel) */
/* Hell und knapp: ein weißer Streifen zwischen dem grauen Inhalt und dem schwarzen Fuß.
   Am Desktop drei Felder in einer Reihe, auf dem Telefon zwei; die Nachricht ist eine Zeile
   hoch und wächst beim Tippen mit (skript.js). */
.formular { background: #fff; padding: 80px 0; }
.formular-raster { row-gap: 32px; }
.formular-wort { grid-column: 1; padding-right: 48px; }
.formular h2 { margin-bottom: 14px; }
.formular-wort > p { max-width: 340px; color: #3a3a3a; }
.formular-telefon { margin-top: 14px; font-size: 13px; color: #8f8f8f !important; }
.formular-telefon a { color: var(--text); box-shadow: inset 0 -1px 0 currentColor; white-space: nowrap; }
.ohne-umbruch { white-space: nowrap; }
.formular-innen { grid-column: 2 / 4; }
.formular-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; }
.feld-nachricht { grid-column: 1 / -1; }
/* Jedes Feld: Beschriftung fest darüber, die Eingabe in 16 px (sonst zoomt Safari am iPhone) */
.feldzeile { position: relative; display: block; padding-top: 12px; }
.feldname { display: block; font-size: 12px; color: #8f8f8f; transition: color .2s ease; }
.feldname-leise { color: #b5b5b5; }
.feldzeile:focus-within .feldname { color: var(--text); }
.feldzeile input, .feldzeile select, .feldzeile textarea {
  display: block; width: 100%; padding: 6px 0 9px; background: none; border: 0; border-radius: 0;
  color: var(--text); font: 400 1rem / 1.5 var(--schrift); letter-spacing: .01em; -webkit-appearance: none; appearance: none;
}
.feldzeile textarea { min-height: 0; overflow: hidden; resize: none; }
.feldzeile select { padding-right: 24px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%231f1f1f' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 12px 12px; }
.feldzeile select:has(option[value=""]:checked) { color: #8f8f8f; }   /* „Bitte wählen“ grau wie ein Platzhalter */
.feldzeile select option { color: var(--text); }
.feldzeile input:focus, .feldzeile select:focus, .feldzeile textarea:focus { outline: none; }
.feldlinie { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #d6d6d6; transform-origin: 0 50%; transition: background-color .2s ease; }
.feldzeile:focus-within .feldlinie { background: var(--schwarz); }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.formular-knopf { display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; border: 0; border-radius: 0; background: var(--schwarz); color: #f5f5f5;
                  font: 500 .875rem / 1 var(--schrift); letter-spacing: .01em; cursor: pointer; transition: background-color .25s ease, gap .25s ease; }
.formular-knopf:hover { background: #3a3a3a; gap: 16px; }
.formular-knopf .pfeil { width: 10px; height: 10px; opacity: 1; }
.formular-knopf:focus-visible { outline: 1px solid var(--schwarz); outline-offset: 3px; }
.formular-hinweis { max-width: 420px; font-size: 12px; line-height: 1.55; color: #8f8f8f; }
.formular-hinweis a { color: #3a3a3a; box-shadow: inset 0 -1px 0 currentColor; }
@media (max-width: 1023.9px) {
  .formular-raster { grid-template-columns: minmax(0, 1fr); }
  .formular-wort, .formular-innen { grid-column: 1; padding-right: 0; }
}
@media (max-width: 719.9px) {
  .formular { padding: 48px 0; }
  .formular-raster { row-gap: 20px; }
  .formular-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .feld-name, .feld-thema, .feld-nachricht { grid-column: 1 / -1; }
  .formular-fuss { margin-top: 22px; }
  .formular-knopf { width: 100%; justify-content: space-between; padding: 16px 20px; }
}

/* -------------------------------------------------------------------- Fuß */
/* Oben Kontakt, Ordination und Links im Raster der Seite, darunter der ganze Name
   „Dr. Christine Chung“ in einer Zeile über die volle Breite. Vorher stand der Name
   geteilt, „Chung“ oben und „Christine“ unten, ohne „Dr.“ (Andreas, 29.09.2026). */
.fuss { background: var(--schwarz); color: #f5f5f5; container-type: inline-size; padding-bottom: 20px; }
.fuss-reihe { display: grid; grid-template-columns: calc(44% - var(--rand)) 1fr auto; column-gap: 40px; padding: 72px var(--rand) 56px; }
.fuss-mitte { display: flex; flex-direction: column; gap: 6px; }
.fuss-mitte p:not(.fuss-klein) { color: rgba(245,245,245,.9); margin-bottom: 28px; }
.fuss-gross { font-size: var(--g-gross); font-weight: 400; letter-spacing: .01em; line-height: 1.5; }
.fuss-gross:hover { opacity: .7; }
.fuss-rechts { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.fuss-rechts p:nth-child(2) { margin-bottom: 24px; }
.fuss-klein { font-size: 13px; color: rgba(245,245,245,.45); margin-bottom: 8px; }
.fuss-links { display: grid; grid-template-columns: auto auto; align-content: start; column-gap: 40px; row-gap: 6px; font-size: 13px; color: rgba(245,245,245,.6); }
.fuss-links a:hover, .fuss-links button:hover { color: #f5f5f5; }
.fuss-links button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color .2s ease; }
/* Der Name ist rund 8,3 em breit; so groß, dass er die Breite zwischen den Rändern füllt */
.riese { font-size: calc((100cqi - 2 * var(--rand)) / 8.36); font-weight: 500; line-height: .98; letter-spacing: -.045em;
         color: #f5f5f5; white-space: nowrap; padding: 0 var(--rand) .16em; }   /* unten Platz für die Unterlänge des g */
@media (max-width: 1023.9px) {
  .fuss-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; padding-top: 64px; padding-bottom: 44px; }
  .fuss-links { grid-column: 1 / -1; row-gap: 12px; font-size: 14px; justify-self: start; }
}
@media (max-width: 719.9px) {
  .fuss-reihe { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .fuss-mitte p:not(.fuss-klein) { margin-bottom: 20px; color: rgba(245,245,245,.6); }
  .fuss-rechts { min-width: 0; }
  .fuss-rechts p:nth-child(2) { margin-bottom: 20px; }
}
@media (max-width: 379.9px) { .fuss-links { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================== Unterseiten
   Dieselben Mittel wie die Startseite: drei Spalten, weiße Karten auf Grau, ein
   schwarzes Band, große Bildplätze randlos. Jede Seite beginnt wie die Startseite
   mit Titel links, Vorspann rechts und einem Bild über die ganze Breite. */
.unterseite .abschnitt + .abschnitt { padding-top: 0; }

/* Kopf: Brotkrume, Titel, rechts Vorspann, Eckdaten, ein Verweis */
.brot { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13px; color: #a3a3a3; }
.brot a { transition: color .2s ease; }
.brot a:hover { color: var(--text); }
.held-unter .held-titel h1 { margin-bottom: 0; max-width: 900px; }
.beizeile { margin-top: 12px; font-size: var(--g-gross); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: #8f8f8f; }
.held-unter .held-seite { align-self: start; padding-top: 42px; }
.held-unter .held-seite p { max-width: 330px; }
.eckdaten { display: grid; gap: 12px; margin: 4px 0 26px; }
.eckdaten dt { font-size: 12.5px; color: #a3a3a3; }
.eckdaten dd { margin: 0; color: var(--text); }
main a[href^="mailto:"] { overflow-wrap: anywhere; }   /* eine lange Adresse darf in einer schmalen Karte umbrechen */
.eckdaten a, .fragen-kopf a, .karte p a, .langtext-absatz a, .frage-text a:not(.verweis) { box-shadow: inset 0 -1px 0 currentColor; }
.held-unter .held-kopf { padding-bottom: 56px; }
.held-ohne-bild .held-kopf { padding-bottom: 88px; }
.held-bild-flach { height: clamp(300px, 34vw, 560px); }
@media (max-width: 719.9px) {
  .held-unter .held-seite { padding-top: 0; }
  .held-bild-flach { height: 52svh; }
  .held-ohne-bild .held-kopf { padding-bottom: 56px; }
}
/* Unterseiten mit Bild: der Kopf ist auf allen gleich hoch, so stehen Titel, Bild und die
   Leiste der Geschwister-Seiten beim Wechseln immer an derselben Stelle. Vorher schob ein
   längerer Vorspann oder ein Kasten mit Eckdaten alles darunter um bis zu 230 px nach unten
   (Andreas, 29.09.2026). Die Höhe reicht für den längsten Kopf (Menopausenzentrum, Kosten);
   pruefen/leiste-lage.mjs meldet, wenn ein neuer Text nicht mehr hineinpasst. */
.held-unter:not(.held-ohne-bild) .held-kopf { height: 480px; align-content: start; }
@media (max-width: 1179.9px) { .held-unter:not(.held-ohne-bild) .held-kopf { height: 520px; } }
@media (max-width: 719.9px)  { .held-unter:not(.held-ohne-bild) .held-kopf { height: 640px; } }
@media (max-width: 399.9px)  { .held-unter:not(.held-ohne-bild) .held-kopf { height: 690px; } }
/* Dasselbe für Impressum und Datenschutz, die kein Bild haben */
.held-ohne-bild:has(+ .geschwister) .held-kopf { height: 304px; align-content: start; }
@media (max-width: 719.9px) { .held-ohne-bild:has(+ .geschwister) .held-kopf { height: 340px; } }

/* Die Seiten derselben Gruppe, eine Zeile unter dem Bild */
.geschwister { display: flex; align-items: baseline; gap: 32px; padding: 20px var(--rand); border-bottom: 1px solid var(--linie-fest); overflow-x: auto; scrollbar-width: none; }
.geschwister::-webkit-scrollbar { display: none; }
/* rechts weich auslaufen: zeigt, dass die Zeile weitergeht; ohne Überlauf fällt der Verlauf in den Rand */
.geschwister { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.held-ohne-bild + .geschwister { border-top: 1px solid var(--linie-fest); }
.geschwister .etikett { flex: none; white-space: nowrap; }
.geschwister ul { display: flex; gap: 26px; }
.geschwister a { display: block; white-space: nowrap; color: #8f8f8f; transition: color .2s ease; }
.geschwister a:hover, .geschwister a[aria-current] { color: var(--text); }
.geschwister a[aria-current] { font-weight: 500; }

/* Weiße Karten: Überschrift oben, Text unten */
.karte { background: #fff; padding: 30px 30px 32px; }
.karte h3 { font-size: var(--g-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.karte p { color: #3a3a3a; }
/* Karten mit Ziel: die ganze Karte ist der Link, der Titel trägt ihn (Menopausenzentrum) */
.karte:has(h3 a) { position: relative; transition: background-color .3s ease; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; }
.karte h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.16,1,.3,1); }
.karte:has(h3 a):hover h3 a, .karte h3 a:focus-visible { background-size: 100% 1px; }
.karte h3 a:focus-visible { outline: none; }
.karte:has(h3 a:focus-visible) { outline: 1px solid var(--schwarz); outline-offset: 3px; }

/* Gruppe: Überschrift, darunter Bündel mit Namen links und Karten rechts */
.gruppe-kopf { align-items: end; row-gap: 20px; margin-bottom: 56px; }
.gruppe-kopf h2 { grid-column: 1 / 3; max-width: 620px; }
.gruppe-kopf p { grid-column: 3; max-width: 360px; color: #3a3a3a; }
.buendel + .buendel { margin-top: 30px; }
/* Beschwerden: eine kompakte Liste im Raster der Seite, Linien wie bei den häufigen Fragen;
   links der Name in Kartentitel-Größe, rechts woran man es erkennt. Die ganze Zeile ist der Link. */
.beschwerden-liste { margin: 0 var(--rand); border-top: 1px solid var(--linie-fest); }
.beschwerden-liste li { border-bottom: 1px solid var(--linie-fest); }
.beschwerden-liste a, .beschwerden-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; align-items: baseline; padding: 20px 0; }
.beschwerden-name { grid-column: 1; font-size: var(--g-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.3;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.16,1,.3,1); justify-self: start; }
.beschwerden-satz { grid-column: 2 / 4; max-width: 52ch; color: #3a3a3a; }
.beschwerden-liste a:hover .beschwerden-name, .beschwerden-liste a:focus-visible .beschwerden-name { background-size: 100% 1px; }
@media (max-width: 719.9px) {
  .beschwerden-liste a, .beschwerden-zeile { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 16px 0; }
  .beschwerden-name, .beschwerden-satz { grid-column: 1; }
}
/* Drei Säulen: typografisch, ohne Karten. Je Spalte Name, was sie meint, dann die Leistungen */
.saeulen-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; padding: 0 var(--rand); }
.saeule h3 { font-size: var(--g-h2); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.saeule-was { margin: 6px 0 36px; color: #8f8f8f; }
.saeule ul { display: flex; flex-direction: column; gap: 26px; }
.saeule li > a, .saeule li > span { display: block; }
.saeule-titel { display: block; font-size: var(--g-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.saeule-satz { display: block; margin-top: 4px; max-width: 34ch; color: #3a3a3a; }
.saeule a .saeule-titel { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.16,1,.3,1); display: inline; }
.saeule a:hover .saeule-titel, .saeule a:focus-visible .saeule-titel { background-size: 100% 1px; }
.saeule li:not(:has(a)) .saeule-titel { color: #5a5a5a; }
@media (max-width: 1023.9px) {
  .saeulen-reihe { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .saeule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto 1fr; column-gap: 30px; }   /* der Mehrplatz der Liste geht in die zweite Zeile, Name und Unterzeile bleiben beisammen */
  .saeule h3, .saeule-was { grid-column: 1; }
  .saeule-was { margin: 6px 0 0; align-self: start; }
  .saeule ul { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 719.9px) {
  .saeule { display: block; }
  .saeule-was { margin: 4px 0 24px; }
}
.buendel-name { grid-column: 1; padding: 2px 30px 0 0; }
.karten { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.karten > .karte:only-child { grid-column: 1 / -1; min-height: 180px; }   /* eine Karte allein füllt die Reihe, statt eine halbe leer zu lassen */
.karten .karte, .schritte .karte { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
@media (max-width: 1023.9px) {
  .gruppe-kopf, .buendel { grid-template-columns: minmax(0, 1fr); }
  .gruppe-kopf h2, .gruppe-kopf p, .buendel-name, .karten { grid-column: 1; }
  .buendel { row-gap: 16px; }
}
@media (max-width: 719.9px) {
  .karten { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .karten .karte, .schritte .karte { min-height: 0; }
}

/* Das schwarze Band: ein Satz groß, rechts die Erklärung */
/* Zitatband: links ihr Porträt, rechts Etikett, ihr Satz groß, darunter Einordnung */
.zitatband { background: var(--schwarz); color: #f5f5f5; padding: 120px 0; }
.zitatband .raster { column-gap: 30px; align-items: center; }
.zitatband-bild { grid-column: 1; aspect-ratio: 4 / 5; }
.zitatband-rechts { grid-column: 2 / 4; padding-left: 30px; }
.zitatband:not(.mit-bild) .zitatband-rechts { grid-column: 1 / -1; padding-left: 0; }
.zitatband-etikett { color: rgba(245,245,245,.5); font-weight: 400; margin-bottom: 28px; }
.zitatband-satz { margin: 0; }
.zitatband-satz blockquote, .zitatband-aussage { margin: 0; font-size: var(--g-form); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; max-width: 20ch; }
.zitatband-satz figcaption { margin-top: 22px; font-size: 13px; color: rgba(245,245,245,.5); }
.zitatband-wort { margin-top: 44px; max-width: 420px; }
.zitatband-wort p { color: rgba(245,245,245,.72); margin-bottom: 26px; }
@media (max-width: 1023.9px) { .zitatband-rechts { padding-left: 0; } }
@media (max-width: 719.9px) {
  .zitatband { padding: 80px 0; }
  .zitatband .raster { row-gap: 40px; }
  .zitatband-bild, .zitatband-rechts { grid-column: 1 / -1; }
  .zitatband-bild { aspect-ratio: 4 / 3; }
}
.bahn { background: var(--schwarz); color: #f5f5f5; padding: 120px 0; }
.bahn .raster { align-items: end; row-gap: 36px; }
.bahn h2 { grid-column: 1 / 3; max-width: 780px; padding-right: 48px; color: #f5f5f5; font-size: var(--g-form); line-height: 1.2; }
.bahn-wort { grid-column: 3; }
.bahn-wort p { max-width: 360px; color: rgba(245,245,245,.72); }
.bahn-wort p + .verweis { margin-top: 26px; }
.bahn-wort strong { color: #f5f5f5; font-weight: 500; }
@media (max-width: 1023.9px) {
  .bahn .raster { grid-template-columns: minmax(0, 1fr); }
  .bahn h2, .bahn-wort { grid-column: 1; padding-right: 0; }
}
@media (max-width: 719.9px) { .bahn { padding: 80px 0; } }

/* Text und Bild nebeneinander, das Bild randlos bis an die Kante */
.teil { display: grid; grid-template-columns: calc(var(--rand) + var(--spalte)) minmax(0, 1fr); min-height: 640px; }
.teil-wort { grid-column: 1; grid-row: 1; align-self: center; padding: 72px 48px 72px var(--rand); }
.teil-bild { grid-column: 2; grid-row: 1; min-height: 440px; }
.teil-links { grid-template-columns: minmax(0, 1fr) calc(var(--rand) + var(--spalte)); }
.teil-links .teil-bild { grid-column: 1; }
.teil-links .teil-wort { grid-column: 2; padding: 72px var(--rand) 72px 48px; }
.teil-wort h2 { margin-bottom: 26px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }   /* lange deutsche Wörter trennen, statt ins Bild zu ragen */
.teil-wort p { max-width: 350px; margin-bottom: 18px; color: #3a3a3a; }
.teil-wort .verweis { margin-top: 10px; }
.anliegen { max-width: 380px; margin: 14px 0 8px; }
.anliegen li { padding: 13px 0; border-top: 1px solid var(--linie-fest); }
.anliegen li:last-child { border-bottom: 1px solid var(--linie-fest); }
@media (max-width: 1023.9px) {
  .teil, .teil-links { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .teil-wort, .teil-links .teil-wort { grid-column: 1; grid-row: 1; padding: 72px var(--rand) 40px; }
  .teil-bild, .teil-links .teil-bild { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; min-height: 0; }
  .teil-bild .platz { padding-left: var(--rand); }
}

/* Für wen, ohne Bild: Überschrift, Satz, Liste nebeneinander */
.fuerwen .raster { row-gap: 24px; }
.fuerwen h2 { grid-column: 1; }
.fuerwen-lead { grid-column: 2; max-width: 350px; padding-right: 30px; color: #3a3a3a; }
.fuerwen .anliegen { grid-column: 3; margin: 0; max-width: none; }
@media (max-width: 1023.9px) {
  .fuerwen .raster { grid-template-columns: minmax(0, 1fr); }
  .fuerwen h2, .fuerwen-lead, .fuerwen .anliegen { grid-column: 1; }
}

/* Zahlen: Überschrift und Satz, drei große Zahlen, ein Zitat neben dem Bild */
.zahlen-titel { grid-column: 1; grid-row: 1; padding-right: 40px; }
.zahlen-lead { grid-column: 2 / 4; grid-row: 1; max-width: 640px; font-size: var(--g-gross); line-height: 1.45; letter-spacing: -.01em; color: var(--text); }
.zahlen-reihe { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 88px 0; }
.zahlen-reihe li { padding-right: 30px; }
.zahlen-reihe b { display: block; margin-bottom: 14px; font-size: clamp(3.5rem, 2.2rem + 4.4vw, 7rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.zahlen-reihe span { display: block; max-width: 300px; color: #6e6e6e; }
.zahlen-bild { grid-column: 2 / 4; grid-row: 3; aspect-ratio: 883 / 520; }
.zitat { grid-column: 1; grid-row: 3; align-self: end; padding-right: 40px; }
.zitat blockquote { margin: 0 0 16px; font-size: var(--g-gross); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }
.zitat figcaption { margin-bottom: 22px; font-size: 13px; color: #a3a3a3; }
@media (max-width: 1023.9px) {
  .zahlen .raster { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .zahlen-titel, .zahlen-lead, .zahlen-reihe, .zahlen-bild, .zitat { grid-column: 1; grid-row: auto; }
  .zahlen-reihe { margin: 32px 0; row-gap: 32px; }
  .zitat { padding: 16px 0 0; }
}
@media (max-width: 719.9px) { .zahlen-reihe { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf: Karten in einer Reihe, beschriftet mit dem Verb */
.schritte { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0 var(--rand); list-style: none; }
@media (max-width: 1179.9px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719.9px) { .schritte { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Fragen: links der Kopf, der mitläuft, rechts die aufklappbaren Fragen */
.fragen .raster { align-items: start; }
.fragen + .fragen { padding-top: 0; }   /* Häufige Fragen: Themenblöcke folgen dicht aufeinander, ein Abschnitt statt vier */
.fragen + .fragen .fragen-liste { border-top-color: var(--linie-fest); }
.fragen-kopf { grid-column: 1; position: sticky; top: calc(var(--kopf) + 32px); padding-right: 48px; }
.fragen-kopf h2 { margin-bottom: 20px; }
.fragen-kopf p { max-width: 300px; color: #3a3a3a; }
.fragen-liste { grid-column: 2 / 4; border-top: 1px solid var(--linie-fest); }
.frage { border-bottom: 1px solid var(--linie-fest); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.005em; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover span { opacity: .6; }
.frage summary span { transition: opacity .2s ease; }
.frage-zeichen { position: relative; flex: none; width: 14px; height: 14px; }
.frage-zeichen::before, .frage-zeichen::after { content: ""; position: absolute; left: 0; top: calc(50% - .7px); width: 100%; height: 1.4px; background: currentColor; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.frage-zeichen::after { transform: rotate(90deg); }
.frage[open] .frage-zeichen::after { transform: rotate(0deg); }
.frage-text { max-width: 62ch; padding: 0 0 28px; color: #3a3a3a; }
.frage-text p + p { margin-top: 14px; }
@media (max-width: 1023.9px) {
  .fragen .raster { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .fragen-kopf, .fragen-liste { grid-column: 1; position: static; padding-right: 0; }
}

/* Rechtstexte: Überschrift links, Absätze rechts */
.langtext-raster { row-gap: 56px; }
.langtext h2 { grid-column: 1; padding-right: 40px; font-size: var(--g-h3); line-height: 1.35; }
.langtext-absatz { grid-column: 2 / 4; max-width: 640px; font-size: .9375rem; color: #3a3a3a; }
.langtext-absatz p + p { margin-top: 14px; }
.langtext-absatz a { color: var(--text); }
@media (max-width: 1023.9px) {
  .langtext-raster { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .langtext h2, .langtext-absatz { grid-column: 1; }
  .langtext h2 { margin-top: 24px; }
}

/* Weiterlesen: weiße Karten mit Pfeil */
.weiter .reihe-kopf h2 { grid-column: 1 / -1; }
.weiter .reihe-kopf-drei h2 { grid-column: 1; }   /* mit Einleitungssatz: Titel links, Satz daneben */
/* Kontakt: in den Karten ist der Weg selbst die Überschrift, Nummer und Adresse zum Antippen */
[aria-labelledby="wege-titel"] h3 a { box-shadow: inset 0 -1px 0 currentColor; overflow-wrap: anywhere; transition: opacity .2s ease; }
[aria-labelledby="wege-titel"] h3 a:hover { opacity: .6; }
.weiter-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 0 var(--rand); }
.weiter-karte { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 210px; transition: background-color .25s ease; }
.weiter-karte:hover { background: #ebebe9; }
.weiter-name { padding-right: 28px; font-size: var(--g-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.weiter-satz { max-width: 34ch; color: #6e6e6e; }
.weiter-karte .pfeil { position: absolute; top: 34px; right: 30px; width: 12px; height: 12px; transition: transform .3s ease; }
.weiter-karte:hover .pfeil { transform: translate(3px, -3px); }
@media (max-width: 1023.9px) { .weiter-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weiter-karten > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 719.9px) { .weiter-karten { grid-template-columns: minmax(0, 1fr); gap: 16px; } .weiter-karte { min-height: 150px; } }

/* Text folgt: was noch fehlt, auf grauem Grund, damit es niemand für fertig hält */
.entwurf { padding: 44px 0; background: #e9e9e7; }
.teil + .entwurf { margin-top: 96px; }   /* sonst verschmilzt das Grau mit dem Bildplatz darüber */
@media (max-width: 719.9px) { .teil + .entwurf { margin-top: 56px; } }
.entwurf .raster { row-gap: 14px; }
.entwurf .etikett { grid-column: 1; color: #8f8f8f; }
.entwurf-text { grid-column: 2 / 4; max-width: 620px; color: #4a4a4a; }
.offen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; margin-top: 28px; }
.offen-liste h3 { margin-bottom: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
@media (max-width: 1023.9px) {
  .entwurf .raster { grid-template-columns: minmax(0, 1fr); }
  .entwurf .etikett, .entwurf-text { grid-column: 1; }
}
@media (max-width: 719.9px) { .offen-liste { grid-template-columns: minmax(0, 1fr); } }

/* Presse: der Scan wie eine Karte der Startseite, daneben die Ärztekammer */
.presse-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 0 var(--rand); align-items: start; }
.presse-bild { aspect-ratio: 4 / 3; }
.presse-karte { aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 1023.9px) { .presse-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719.9px) { .presse-liste { grid-template-columns: minmax(0, 1fr); } .presse-karte { aspect-ratio: auto; min-height: 180px; } }

/* Die Räume: vier Plätze, versetzt wie in der Vorlage */
.galerie-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 0 var(--rand); }
.galerie-a { grid-column: 1 / 3; aspect-ratio: 3 / 2; align-self: end; }
.galerie-b { grid-column: 3; aspect-ratio: 4 / 5; align-self: end; }
.galerie-c { grid-column: 1; aspect-ratio: 4 / 5; align-self: start; }
.galerie-d { grid-column: 2 / 4; aspect-ratio: 3 / 2; align-self: start; }
@media (max-width: 719.9px) {
  .galerie-raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .galerie-raster > div { grid-column: 1; aspect-ratio: 4 / 3; }
}

/* Anfahrt: die Karte von Google Maps über die ganze Breite, links unten das Feld mit der Anschrift.
   Bis zur Zustimmung steht an ihrer Stelle eine graue Fläche mit „Karte laden“. */
.anfahrt { display: grid; grid-template-columns: calc(var(--rand) + var(--spalte)) minmax(0, 1fr); min-height: 620px; }
.anfahrt-flaeche { grid-column: 1 / -1; grid-row: 1; position: relative; overflow: hidden; background: #e6e6e4; }
.anfahrt-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.anfahrt-sperre { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
                  padding: 48px var(--rand) 48px calc(var(--rand) + var(--spalte) + 48px); color: #3a3a3a; }
.anfahrt-sperre p { max-width: 420px; margin-bottom: 22px; }
.anfahrt-flaeche.geladen .anfahrt-sperre { display: none; }
.anfahrt-knoepfe { display: flex; align-items: center; gap: 28px; }
.anfahrt-mehr { font-size: 13px; color: #6e6e6e; box-shadow: inset 0 -1px 0 currentColor; }
.anfahrt-feld { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; padding: 44px 40px 44px var(--rand); background: var(--grund); }
.anfahrt-feld h2 { margin-bottom: 20px; }
.anfahrt-feld p { margin-bottom: 14px; color: #3a3a3a; }
.anfahrt-feld .verweis { margin-top: 12px; }
.anfahrt + .entwurf { margin-top: 96px; }
@media (max-width: 1023.9px) {
  .anfahrt { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .anfahrt-flaeche { aspect-ratio: 4 / 3; }
  .anfahrt-sperre { padding: 32px var(--rand); }
  .anfahrt-feld { grid-row: 2; align-self: auto; padding: 40px var(--rand); }
}
@media (max-width: 719.9px) { .anfahrt-flaeche { aspect-ratio: 1 / 1; } .anfahrt + .entwurf { margin-top: 56px; } }

/* Der Hinweis zur Einwilligung: klein, unten links, schwarz; beide Knöpfe gleich gewichtet */
.einwilligung { position: fixed; z-index: 50; left: var(--rand); bottom: 24px; width: min(440px, calc(100vw - 2 * var(--rand)));
                padding: 24px 28px 26px; background: var(--schwarz); color: #f5f5f5; box-shadow: 0 18px 50px rgba(0,0,0,.18);
                opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.einwilligung.sichtbar { opacity: 1; transform: none; }
.einwilligung .etikett { margin-bottom: 8px; color: rgba(245,245,245,.5); }
.einwilligung p { font-size: 13.5px; line-height: 1.6; color: rgba(245,245,245,.8); }
.einwilligung p a { color: #f5f5f5; box-shadow: inset 0 -1px 0 currentColor; }
.einwilligung-knoepfe { display: flex; gap: 32px; margin-top: 20px; }
@media (max-width: 719.9px) { .einwilligung { left: 0; right: 0; bottom: 0; width: auto; padding: 22px var(--rand) 26px; } }
@media (prefers-reduced-motion: reduce) { .einwilligung { transition: none; } }

/* Hinweis „Website im Aufbau“ (AUFBAU_HINWEIS in stamm.py): weiß wie die Karten, in der Mitte;
   die Buchung als schwarzer Knopf wie im Formular, daneben der Verweis weiter zur Seite */
.aufbau { width: min(540px, calc(100vw - 2 * var(--rand))); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0;
          background: #fff; color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.22); overflow: auto; }
.aufbau::backdrop { background: rgba(20,20,20,.48); }
.aufbau[open] { animation: aufbau-auf .7s cubic-bezier(.16,1,.3,1); }
.aufbau[open]::backdrop { animation: aufbau-blende .4s ease; }
@keyframes aufbau-auf { from { opacity: 0; transform: translateY(18px); } }
@keyframes aufbau-blende { from { opacity: 0; } }
:root:has(.aufbau[open]) { overflow: hidden; }
.aufbau-innen { position: relative; padding: 44px 44px 36px; }
.aufbau .etikett { margin-bottom: 14px; }
.aufbau h2 { max-width: 13em; }
.aufbau-text { margin-top: 18px; max-width: 34em; line-height: 1.7; }
.aufbau-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 30px; }
.aufbau-telefon { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--linie-fest); font-size: 13px; color: #6b6b6b; }
.aufbau-telefon a { color: var(--text); box-shadow: inset 0 -1px 0 currentColor; }
.aufbau-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
            padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.aufbau-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.aufbau-x:hover { opacity: .6; }
@media (max-width: 719.9px) {
  .aufbau-innen { padding: 40px var(--rand) 28px; }
  .aufbau-knoepfe .formular-knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .aufbau[open], .aufbau[open]::backdrop { animation: none; } }

/* Formular: die Falle für Bots liegt außerhalb des Bildes; die Rückmeldung nach dem Senden */
.falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.formular-status { flex-basis: 100%; font-size: 14px; color: var(--text); }

/* ---------------------------------------------------------------- Bewegung
   Die Seite wird mit GSAP bewegt (skript.js). Bis das Skript den Held übernimmt,
   ist er verborgen; lädt es nicht, gibt eine Notbremse im Kopf der Seite nach
   3 s alles frei (.bereit). Bei reduzierter Bewegung bleibt alles sofort stehen. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.bereit) .kopf, .js:not(.bereit) .held-titel, .js:not(.bereit) .held-seite, .js:not(.bereit) .held-bild { visibility: hidden; }
}
/* Bildplätze schneiden ihren Inhalt ab, damit Aufdecken und Parallaxe keinen Rand zeigen */
.held-bild, .ueber-bild1, .ueber-bild2, .werte-bild-gross, .werte-bild-klein, .mindsoul-bild, .mindsoul-gross, .bildfelder-bild, .band-bild, .produkt-bild, .sammlung-bild, [data-aufdecken], .presse-bild { overflow: hidden; }
html, body { overflow-x: clip; }   /* Sicherheitsnetz: nichts Bewegtes darf die Seite seitlich verbreitern */
/* SplitText legt Masken um die Zeilen; darunter braucht die Schrift Platz für g, p, y */
.zeile-mask { padding-bottom: .16em; margin-bottom: -.16em; }