/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 3 — „Klarraum"
   Praxis Lindhorst · Zahnarztpraxis Bielefeld-Schildesche

   Haltung: aufgeraeumt, mittig, gross gesetzt. Entwurf 1 ordnet mit Linien,
   Entwurf 2 mit Karten — dieser hier ordnet mit LEERE. Alles Wichtige steht
   auf der Mittelachse, die Flaechen sind grosse gerundete Platten, dazwischen
   ist viel Nichts. Wer scrollt, soll nie ueberlegen muessen, wo er als
   Naechstes hinschaut.

   Ausdruecklich HELL, obwohl die Vorbilder (Sky Dental, Aventura) dunkel
   arbeiten: die Patientinnen und Patienten einer Zahnarztpraxis sind im Schnitt
   aelter als das Publikum einer Design-Referenz. Helle Schrift auf dunklem
   Grund wird mit nachlassender Sehkraft schlechter lesbar, nicht besser. Die
   Ruhe der Vorbilder kommt hier deshalb aus Grau und Abstand, nicht aus
   Schwarz. Dunkel bleibt genau eine Flaeche: der Fuss.

   Radius 28px auf Platten, 100px auf Knoepfen. Kein Schatten: die Platte hebt
   sich durch ihre eigene Flaeche vom Grund ab, nicht durch Tiefe.

   Aufbau, worin sich dieser Entwurf von 1 und 2 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — alles mittig, das Bildband liegt darunter statt daneben.
                    (Entwurf 1: zweispaltig, Bild rechts. Entwurf 2: Bildband
                    mit vorgelagerter Karte.)
     · Zeile      — eine einzige mittige Zeile, durch Punkte getrennt.
                    (Entwurf 1: drei Spalten auf Haarlinien. Entwurf 2: drei
                    runde Kacheln.)
     · Leistungen — Aufklapper in EINER grossen Platte. Die Namen stehen
                    untereinander, die Erklaerung kommt auf Klick.
                    (Entwurf 1: nummerierte Editorial-Liste. Entwurf 2: Raster
                    aus acht Karten.)
     · Galerie    — 2x2 grosse Kacheln, ohne Bildunterschrift.
                    (Entwurf 1: zwei Spalten im Wechsel mit Unterschriften.
                    Entwurf 2: waagerechter Streifen zum Wischen.)
     · Termin     — drei gerundete Kacheln nebeneinander, Zeiten mittig
                    darunter.
                    (Entwurf 1: dunkles Band. Entwurf 2: zwei helle Karten.)
     · Fragen     — offenes zweispaltiges Raster ohne Kaesten.
                    (Entwurf 1: Aufklapper auf Haarlinien. Entwurf 2: offene
                    Karten.)
     · Kontakt    — Formular mittig in einer Platte, die Daten als Zeile
                    darunter.
                    (Entwurf 1: Formular links, Datenkarte rechts. Entwurf 2:
                    drei Karten oben, Formular darunter.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Zahnarzt), Stil C
   „Modern & Ruhig". Serifen-Headline ueber neutraler Grotesk, ein einziger
   kuehler Akzent und die sehr grossen Radien stammen aus der Auswertung von
   Sky Dental und Aventura Dental Arts — die Helligkeit ist die bewusste
   Abweichung, siehe oben.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────────
   Alles Farbige haengt an diesen Werten. Wer die Marke aendert, aendert hier
   und nirgends sonst. Die Verhaeltnisse in Klammern sind nachgerechnet. */
:root{
  /* Flaechen */
  --papier:  #EFF1F2;   /* Seitengrund — helles, neutrales Grau              */
  --karte:   #FFFFFF;   /* Platten, Formularfelder                          */
  --matt:    #E2E6E8;   /* abgesetzte Flaechen, Etiketten                   */
  --mint:    #CFE9F1;   /* die eine helle Buntflaeche                       */
  --tief:    #171A1D;   /* ausschliesslich der Fuss                         */

  /* Schrift */
  --tinte:   #171A1D;   /* Ueberschriften (Papier 15,4:1 · Weiss 17,5:1 · Matt 13,9:1 · Mint 13,8:1) */
  --text:    #4B5257;   /* Fliesstext     (Papier 7,0:1 · Weiss 7,9:1 · Matt 6,3:1 · Mint 6,3:1) */
  --leise:   #5D656A;   /* Meta           (Papier 5,2:1 · Weiss 5,9:1 · Matt 4,7:1) */
  --hell:    #EFF1F2;   /* Schrift auf Dunkel    (auf #171A1D 15,4:1)       */
  --hell-matt:#B0B7BB;  /* Fliesstext auf Dunkel (auf #171A1D  8,6:1)       */
  --hell-leise:#98A2A7; /* Meta auf Dunkel       (auf #171A1D  6,7:1)       */

  /* Der eine Akzent. Ein ruhiges, kuehles Blau — kein Signalton. */
  --blau:    #175C86;   /* Papier 6,4:1 · Weiss 7,2:1 · Matt 5,7:1 · Mint 5,7:1 */
  --blau-tief:#11486A;  /* Hover                (Weiss darauf 9,7:1)        */
  --auf-blau:#FFFFFF;   /* Schrift auf Blau     (7,2:1)                     */

  /* Linien und Umrisse. Sehr sparsam: dieser Entwurf trennt mit Abstand. */
  --linie:   #DCE1E3;
  --linie-dunkel:#2E3439;
  --haar:1px solid #DCE1E3;
  --rand:    #7C858A;   /* Umriss bedienbarer Elemente (Papier 3,3:1 · Weiss 3,8:1) */

  /* Schriften. Literata ist eine Bildschirm-Serife mit variabler optischer
     Groesse — ruhiger und offener als eine Buchserife, gut lesbar auch in
     grossen Graden. Inter Tight daneben ist eine neutrale Grotesk mit engem
     Lauf; sie traegt die vielen kurzen Beschriftungen dieses Entwurfs, ohne
     selbst aufzufallen. */
  --display:'Literata', Georgia, 'Times New Roman', serif;
  --schrift:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1180px;
  --schmal:760px;       /* die Mittelachse dieses Entwurfs                  */
  --bogen:28px;         /* der Platten-Radius                               */
  --bogen-klein:16px;   /* Formularfelder                                   */
  --pille:100px;        /* Knoepfe                                          */
  --tempo:.5s cubic-bezier(.22,.68,.36,1);
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--schrift); font-size:19px; line-height:1.7;
  color:var(--text); background:var(--papier);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--display); color:var(--tinte); font-weight:400; line-height:1.16}
h1 em,h2 em,h3 em{font-style:italic}
:focus-visible{outline:2px solid var(--blau); outline-offset:3px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
/* Die Mittelachse. Alles, was gelesen werden soll, laeuft hier durch. */
.achse{width:min(100% - 40px, var(--schmal)); margin-inline:auto; text-align:center}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.nur-vorleser:focus{
  position:fixed; top:10px; left:10px; z-index:99;
  width:auto; height:auto; clip-path:none;
  background:var(--tief); color:var(--hell); padding:10px 18px; border-radius:var(--pille);
}

/* Rubrik: hier ein kleines Etikett mit Punkt davor. Dasselbe Motiv wie in
   Entwurf 1 und 2, wieder anders gesprochen. */
.rubrik{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:500; letter-spacing:.02em; color:var(--blau);
  background:var(--karte); border-radius:var(--pille); padding:7px 18px 7px 14px;
}
.rubrik::before{
  content:""; width:7px; height:7px; border-radius:var(--pille);
  background:var(--blau); flex:none;
}

/* ── Entwurfs-Band ────────────────────────────────────────────────────────── */
.entwurf-band{
  background:#F4E58A; color:#2A2400;
  font-size:.82rem; line-height:1.45; padding:9px 0;
}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px}
.entwurf-band b{font-weight:600}
.entwurf-band span{flex:1 1 300px; min-width:0}
.entwurf-band a{color:inherit; text-underline-offset:3px}

/* ── Knoepfe ──────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; background:var(--blau); color:var(--auf-blau);
  font-size:.95rem; font-weight:500;
  text-decoration:none; border:1px solid var(--blau); border-radius:var(--pille);
  cursor:pointer; transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:var(--blau-tief); border-color:var(--blau-tief)}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}

.knopf-leer{background:var(--karte); color:var(--tinte); border-color:var(--rand)}
.knopf-leer:hover{background:var(--karte); color:var(--blau); border-color:var(--blau)}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--papier); border-bottom:1px solid transparent;
  transition:border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie)}
/* position:static, damit das aufgeklappte Menue am STICKY Kopf haengt und
   nicht an der Wrap-Breite — sonst reicht es auf dem Handy nicht bis an
   den Rand. */
.kopf .wrap{position:static; display:flex; align-items:center; gap:20px; min-height:84px}
.marke{
  font-family:var(--display); font-size:1.5rem; font-weight:400; color:var(--tinte);
  text-decoration:none; line-height:1; flex:none;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.63rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise);
  margin-top:7px;
}

.menue{margin-left:auto; display:flex; gap:26px}
.menue a{font-size:.92rem; text-decoration:none; color:var(--text); padding:6px 0}
.menue a:hover{color:var(--blau)}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:var(--karte); border:1px solid var(--rand); border-radius:var(--pille); position:relative;
}
.burger i{
  position:absolute; left:13px; width:18px; height:1.5px; background:var(--tinte);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){translate:0 6px; rotate:45deg}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){translate:0 -6px; rotate:-45deg}

/* ── Buehne: alles mittig, Bildband darunter ──────────────────────────────
   Kein Text auf dem Bild. Das Band liegt UNTER der Schrift und traegt sie
   nicht — auf einem Foto ist Kontrast nie zuverlaessig, und diese Seite muss
   auch mit muedem Auge lesbar sein. */
.buehne{padding:clamp(44px, 6vw, 96px) 0 clamp(30px, 4vw, 56px); text-align:center}
.buehne h1{
  font-size:clamp(2.4rem, 5.2vw, 4rem); letter-spacing:-.022em; margin-top:22px;
}
.buehne .lead{
  margin:22px auto 0; max-width:54ch; font-size:clamp(1.02rem, 1.2vw, 1.15rem);
}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px}
.buehne-band{
  margin-top:clamp(34px, 4.4vw, 62px);
  border-radius:var(--bogen); overflow:clip; background:var(--matt);
}
.buehne-band img{width:100%; height:100%; object-fit:cover; aspect-ratio:21/9}

/* ── Zeile: eine mittige Zeile mit Trennpunkten ───────────────────────────
   Kein Raster, keine Kacheln — nur eine Zeile. Die Punkte sind ::before auf
   allen ausser dem ersten Eintrag, damit sie beim Umbruch mitwandern. */
.zeile{padding-bottom:clamp(30px, 4vw, 56px)}
.zeile ul{
  list-style:none; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:6px 10px;
  font-size:.95rem; color:var(--leise);
}
.zeile li{display:flex; align-items:center; gap:10px}
.zeile li + li::before{
  content:""; width:5px; height:5px; border-radius:var(--pille);
  background:var(--rand); flex:none;
}
.zeile b{color:var(--tinte); font-weight:500}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(52px, 6.2vw, 104px) 0}
.block-kopf{text-align:center; margin-bottom:clamp(30px, 4vw, 54px)}
.block-kopf h2{font-size:clamp(1.95rem, 3.8vw, 2.9rem); letter-spacing:-.02em; margin-top:18px}
.block-kopf .lead{margin:18px auto 0; max-width:62ch}

/* ── Platte: die Grundform dieses Entwurfs ────────────────────────────────── */
.platte{
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(20px, 3vw, 44px);
}

/* ── Leistungen: Aufklapper in einer Platte ────────────────────────────────
   Die Abrechnungsart steht schon im geschlossenen Zustand rechts — sie ist
   die Antwort auf die haeufigste Frage und darf nicht hinter einem Klick
   verschwinden. Was dort NICHT steht, ist ein Preis: Kassenleistungen laufen
   ueber den BEMA, private Leistungen ueber die GOZ. Ein „ab 89 €" waere hier
   schlicht falsch. */
.leistungs-platte{padding-block:clamp(8px, 1.4vw, 18px)}
.leistungs-platte details{border-bottom:var(--haar)}
.leistungs-platte details:last-of-type{border-bottom:0}
.leistungs-platte summary{
  display:grid; grid-template-columns:minmax(0, 1fr) auto 22px;
  gap:10px 22px; align-items:center;
  cursor:pointer; list-style:none; padding:22px 0;
}
.leistungs-platte summary::-webkit-details-marker{display:none}
.leistungs-platte summary h3{
  font-family:var(--schrift); font-size:1.14rem; font-weight:600;
  color:var(--tinte); line-height:1.35;
}
.leistungs-platte .abrechnung{
  font-size:.82rem; font-weight:500; color:var(--blau);
  background:var(--mint); border-radius:var(--pille); padding:5px 14px;
  white-space:nowrap;
}
/* Das Pluszeichen ist zwei Striche. Beim Aufklappen dreht sich der senkrechte
   weg — keine Bilddatei, kein Zeichensatz, keine Fallstricke. */
.leistungs-platte .kreuz{position:relative; width:20px; height:20px; flex:none}
.leistungs-platte .kreuz::before,
.leistungs-platte .kreuz::after{
  content:""; position:absolute; left:0; top:9px; width:20px; height:1.5px;
  background:var(--blau); transition:rotate var(--tempo), opacity var(--tempo);
}
.leistungs-platte .kreuz::after{rotate:90deg}
.leistungs-platte details[open] .kreuz::after{rotate:0deg; opacity:0}
.leistungs-platte details p{padding:0 46px 24px 0; max-width:70ch; font-size:.97rem}

.preis-fuss{
  margin:26px auto 0; max-width:var(--schmal); font-size:.95rem; color:var(--leise);
  background:var(--matt); border-radius:var(--bogen); padding:22px 28px;
}
.preis-fuss + .preis-fuss{margin-top:14px}

/* ── Galerie: 2x2 grosse Kacheln ──────────────────────────────────────────
   Ohne Bildunterschriften — anders als Entwurf 1, der erklaert. Hier sollen
   die Bilder gross sein und sonst nichts. Die Beschreibung fuer Menschen, die
   sie nicht sehen koennen, steht im alt-Text und ist deshalb trotzdem da.

   Genau VIER Kacheln, obwohl das Bildpaket zehn Motive hat. Das ist Absicht
   und die Konsequenz aus der Haltung dieses Entwurfs: wenige Bilder, dafuer
   gross. Die uebrigen Motive tragen hier die beiden breiten Baender (Buehne
   und Praxis); Entwurf 1 und 2 zeigen dafuer alle zehn. */
.kacheln{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(16px, 2.2vw, 30px);
}
.kacheln figure{margin:0; border-radius:var(--bogen); overflow:clip; background:var(--matt)}
.kacheln img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3/2;
  scale:1; transition:scale 1.1s cubic-bezier(.22,.68,.36,1);
}
.kacheln figure:hover img{scale:1.04}

/* ── Praxis: mittig, Bild als breites Band darueber ───────────────────────── */
.praxis{text-align:center}
.praxis-bild{
  margin:0 0 clamp(30px, 4vw, 52px);
  border-radius:var(--bogen); overflow:clip; background:var(--matt);
}
.praxis-bild img{width:100%; height:100%; object-fit:cover; aspect-ratio:21/9}
.praxis-text h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing:-.02em; margin-top:18px}
.praxis-text p{margin-top:18px}
.praxis-text .unterschrift{
  margin-top:32px; padding-top:26px; border-top:var(--haar);
  font-family:var(--display); font-size:1.4rem; color:var(--tinte);
}
.praxis-text .unterschrift small{
  display:block; font-family:var(--schrift); font-size:.86rem; color:var(--leise); margin-top:7px;
}

/* ── Termin: drei Kacheln, Zeiten mittig darunter ─────────────────────────── */
.termin{padding:clamp(52px, 6.2vw, 104px) 0}
.wege{
  list-style:none; display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 26px);
}
.wege li{display:flex}
.wege a,.wege .kein-link{
  flex:1; display:block; text-align:center; text-decoration:none; color:var(--text);
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(24px, 3vw, 38px) clamp(18px, 2.4vw, 28px);
  border:1px solid transparent;
  transition:border-color var(--tempo), background var(--tempo);
}
.wege a:hover{border-color:var(--blau); background:var(--karte)}
.wege .kreis{
  width:52px; height:52px; margin:0 auto 16px; border-radius:var(--pille);
  background:var(--mint); display:grid; place-items:center;
}
.wege svg{width:21px; height:21px; fill:var(--blau)}
.wege b{
  display:block; font-family:var(--display); font-size:1.16rem; font-weight:400;
  color:var(--tinte); line-height:1.35;
}
.wege small{display:block; font-size:.87rem; color:var(--leise); margin-top:8px; line-height:1.5}

.zeiten{margin:clamp(28px, 3.4vw, 46px) auto 0; max-width:var(--schmal)}
.zeiten h3{
  font-family:var(--schrift); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leise);
  text-align:center; margin-bottom:18px;
}
.zeiten dl{margin:0}
.zeiten div{
  display:flex; justify-content:space-between; gap:20px;
  padding:13px 0; border-bottom:var(--haar); font-size:.96rem;
}
.zeiten div:first-child{border-top:var(--haar)}
.zeiten dt{color:var(--text)}
.zeiten dd{color:var(--tinte); font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.notdienst{
  margin:22px auto 0; max-width:var(--schmal); text-align:center;
  font-size:.93rem; color:var(--text);
}
.notdienst b{color:var(--tinte); font-weight:600}
.termin-tun{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(26px, 3vw, 40px)}

/* ── Fragen: offenes zweispaltiges Raster ─────────────────────────────────
   Keine Kaesten, kein Aufklapper — die Fragen stehen einfach da, in zwei
   Spalten. Wer Angst hat, soll die Antwort sehen, ohne suchen zu muessen. */
.fragen-raster{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(28px, 3.6vw, 52px) clamp(30px, 4vw, 64px);
}
.fragen-raster h3{
  font-family:var(--schrift); font-size:1.06rem; font-weight:600;
  color:var(--tinte); line-height:1.4;
}
.fragen-raster h3::before{
  content:""; display:block; width:26px; height:2px;
  background:var(--blau); margin-bottom:14px;
}
.fragen-raster p{margin-top:12px; font-size:.96rem; max-width:52ch}

/* ── Kontakt: Formular mittig in einer Platte, Daten als Zeile darunter ───── */
.formular-platte{margin-inline:auto; max-width:var(--schmal)}
.formular{margin-top:4px}
.feld-paar{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px}
.feld{margin-bottom:18px}
.feld label{
  display:block; font-size:.82rem; font-weight:600;
  color:var(--tinte); margin-bottom:8px;
}
/* Hier steht --rand und nicht --linie. Die feine Trennlinie ist zum Trennen von
   Textbloecken gedacht; als Umriss eines Eingabefeldes waere sie auf weisser
   Fuellung nur 1,2:1 — man saehe das Feld praktisch nicht. --rand liegt bei
   3,8:1 auf Weiss und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:14px 18px; background:var(--papier);
  border:1px solid var(--rand); border-radius:var(--bogen-klein); font-size:1rem;
  transition:border-color var(--tempo), background var(--tempo);
}
/* Beim Tippen muss deutlich sein, in welchem Feld man steht — ein Rand, der nur
   die Farbe wechselt, reicht dafuer nicht. Der Umriss bleibt also stehen; damit
   er nicht doppelt wirkt, wird der eigentliche Rand durchsichtig. */
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--blau); outline-offset:1px;
  border-color:transparent; background:var(--karte);
}
.feld textarea{min-height:140px; resize:vertical; line-height:1.65}
.feld select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--tinte) 50%),
                   linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:48px;
}
.formular .knopf{width:100%}
.form-fuss{margin-top:16px; font-size:.86rem; color:var(--leise)}
.form-fuss a{color:var(--blau)}
.form-fuss + .form-fuss{margin-top:10px}
/* Der Artikel-9-Hinweis ist kein Kleingedrucktes. Er bekommt deshalb eine
   eigene Flaeche statt nur eine kleinere Schrift. */
.form-warnung{
  margin-top:18px; background:var(--mint); border-radius:var(--bogen-klein);
  padding:18px 22px; font-size:.9rem; color:var(--text);
}
.form-warnung b{color:var(--tinte)}

/* Die Kontaktdaten als eine Zeile unter der Platte — dieselbe Geste wie die
   Zeile unter der Buehne, damit die Seite oben und unten gleich schliesst. */
.daten-zeile{
  list-style:none; margin-top:clamp(30px, 3.6vw, 48px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px clamp(20px, 3vw, 44px);
  font-size:.95rem;
}
.daten-zeile li{display:flex; align-items:center; gap:11px; min-width:0}
.daten-zeile svg{width:18px; height:18px; fill:var(--blau); flex:none}
.daten-zeile a{text-decoration:none; color:var(--text)}
.daten-zeile a:hover{color:var(--blau); text-decoration:underline}

/* ── Fuss ─────────────────────────────────────────────────────────────────
   Die einzige dunkle Flaeche des Entwurfs. Sie schliesst die Seite ab; alles,
   was gelesen werden MUSS, steht darueber im Hellen. */
.fuss{background:var(--tief); color:var(--hell-matt); padding:clamp(46px, 5vw, 74px) 0 0}
.fuss-gitter{
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap:32px clamp(24px, 3vw, 54px);
}
.fuss .marke{color:var(--hell)}
.fuss .marke small{color:var(--hell-leise)}
.fuss p{margin-top:16px; max-width:42ch; font-size:.93rem}
.fuss h3{
  font-family:var(--schrift); font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hell-leise); margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.93rem}
.fuss li{padding:5px 0}
.fuss li a{text-decoration:none}
.fuss li a:hover{color:var(--hell); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(36px, 4vw, 56px); padding:20px 0;
  border-top:1px solid var(--linie-dunkel);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  font-size:.84rem; color:var(--hell-leise);
}

/* ── Daumenleiste (nur Handy) ─────────────────────────────────────────────── */
.daumen{display:none}

/* ── Sanftes Einblenden ───────────────────────────────────────────────────── */
html.js .zeig{opacity:0; translate:0 18px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .6s ease calc(var(--i, 0) * 80ms),
             translate .6s cubic-bezier(.22,.68,.36,1) calc(var(--i, 0) * 80ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .wege{grid-template-columns:minmax(0, 1fr)}
  .fragen-raster{grid-template-columns:minmax(0, 1fr)}
  .buehne-band img,.praxis-bild img{aspect-ratio:16/9}
}

@media (max-width:820px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--papier); border-bottom:1px solid var(--linie);
    padding:6px 20px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-top:var(--haar); font-size:1.02rem}
  .kopf .knopf{display:none}
  .burger{display:block}
}

@media (max-width:640px){
  body{font-size:17px}
  .kacheln{grid-template-columns:minmax(0, 1fr)}
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  .buehne-band img,.praxis-bild img{aspect-ratio:4/3}
  /* Auf dem Handy hat die Abrechnung keinen Platz mehr neben dem Namen — sie
     rutscht darunter, statt den Namen zu quetschen. nowrap muss dabei weg,
     sonst kann „Festzuschuss · Heil- und Kostenplan" nicht umbrechen und
     schiebt die Zeile ueber den Rand. */
  .leistungs-platte summary{grid-template-columns:minmax(0, 1fr) 22px}
  .leistungs-platte .abrechnung{grid-row:2; grid-column:1; justify-self:start; white-space:normal}
  .leistungs-platte details p{padding-right:0}

  /* Die Daumenleiste liegt am unteren Rand — dort, wo der Daumen ohnehin ist.
     Sie ersetzt auf dem Handy den Kopfknopf. */
  .daumen{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:var(--linie); border-top:1px solid var(--linie);
  }
  .daumen .knopf{border-radius:0; padding:15px 10px; font-size:.9rem; width:auto}
  .daumen .knopf-leer{background:var(--papier)}
  body{padding-bottom:62px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Dieser Entwurf lebt von Platten und Abstand. Der Rechtstext bekommt deshalb
   keine Mittelachse — Fliesstext liest sich linksbuendig besser — wohl aber
   die Platte als Hinweiskasten. Der Lesetext bleibt bei 68 Zeichen; laenger
   wird eine Datenschutzerklaerung unlesbar, und gerade die soll gelesen
   werden. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 76px) 0 clamp(24px, 3vw, 36px)}
/* Bei 375px passt "Datenschutzerklaerung" nicht in eine Zeile. Die Bruchstelle
   gibt der weiche Trennstrich im HTML vor; hyphens/overflow-wrap sind das Netz
   darunter, falls spaeter eine andere lange Zusammensetzung dort steht. */
.rechts-kopf h1{font-size:clamp(2.1rem, 4vw, 3rem); margin-top:14px; hyphens:auto; overflow-wrap:break-word}
.rechts-kopf .lead{margin-top:16px; max-width:58ch; color:var(--text)}
.rechtstext{padding-bottom:clamp(54px, 6vw, 92px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{max-width:68ch}
.rechtstext section{border-top:var(--haar); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.3rem, 2.1vw, 1.65rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:600;
  margin:22px 0 8px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{margin:0 0 14px; list-style:none}
.rechtstext ul li{color:var(--text); padding-left:24px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:11px; height:2px; background:var(--blau);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:15px}
.rechtstext dd{margin:2px 0 0; color:var(--text)}
.rechtstext address{font-style:normal; color:var(--text); line-height:1.9}
.rechtstext a{color:var(--blau); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--mint); border-radius:var(--bogen);
  padding:22px 28px; margin:24px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}
/* Hier steht bewusst „.rechtstext .zurueck" und nicht nur „.zurueck": die Regel
   fuer Links im Rechtstext eine Zeile weiter oben ist spezifischer als eine
   einzelne Klasse und wuerde die Schriftfarbe sonst ueberschreiben. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.88rem; font-weight:500;
  color:var(--blau); background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--pille); padding:12px 26px; margin-top:38px;
  transition:border-color var(--tempo), background var(--tempo), color var(--tempo);
}
.rechtstext .zurueck:hover{background:var(--blau); border-color:var(--blau); color:var(--auf-blau)}