/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 2 — „Familienpraxis"
   Praxis Lindhorst · Zahnarztpraxis Bielefeld-Schildesche

   Haltung: warm, zugewandt, weich. Entwurf 1 beruhigt durch Zurueckhaltung —
   dieser hier beruhigt durch Freundlichkeit. Das ist ein anderer Weg zum
   selben Ziel: wer mit einem Kind zum Zahnarzt geht oder selbst Angst hat,
   soll sich nicht in einer Klinik wiederfinden, sondern in einem Raum, in dem
   man auch mal fragt.

   Deshalb hier ZWEI Buntfarben statt einer: ein warmes Terrakotta-Korall fuer
   alles Handelnde und ein ruhiges Blau fuer alles Sachliche (Abrechnungsart,
   Fachhinweise). Die Trennung ist inhaltlich, nicht dekorativ — Korall heisst
   „hier kannst du klicken", Blau heisst „das ist eine Information".

   Radius 24px auf Karten, 999px auf Knoepfen und Kacheln. Anders als in
   Entwurf 1 gibt es hier weiche Schatten: sie heben die Karten leicht an und
   machen die Flaeche greifbar. Kein Schatten ist dunkler als 8% — sonst wird
   aus „weich" schnell „schwer".

   Aufbau, worin sich dieser Entwurf von 1 und 3 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — breites Bildband ueber die volle Breite, davor eine weiche
                    Karte, die von links darueberlaeuft.
                    (Entwurf 1: zweispaltig, Text links, hohes Bild rechts.
                    Entwurf 3: alles mittig, Bildband darunter.)
     · Zeile      — drei runde Kacheln mit Kreis-Symbol.
                    (Entwurf 1: drei Spalten auf Haarlinien. Entwurf 3: eine
                    mittige Zeile mit Trennpunkten.)
     · Leistungen — Raster aus acht weichen Karten, Abrechnungsart als
                    Blau-Etikett oben in der Karte.
                    (Entwurf 1: nummerierte Editorial-Liste. Entwurf 3:
                    Aufklapper in einer grossen gerundeten Platte.)
     · Galerie    — waagerechter Streifen zum Wischen, mit scroll-snap.
                    (Entwurf 1: zwei Spalten im Wechsel. Entwurf 3: 2x2 grosse
                    Kacheln.)
     · Termin     — hell statt dunkel: Wege und Zeiten nebeneinander als zwei
                    Karten.
                    (Entwurf 1: dunkles Band. Entwurf 3: drei gerundete
                    Kacheln, Zeiten mittig darunter.)
     · Fragen     — offene Karten, nichts zum Aufklappen. Wer Angst hat, soll
                    die Antwort sehen, ohne erst danach suchen zu muessen.
                    (Entwurf 1: Aufklapper auf Haarlinien. Entwurf 3: offenes
                    zweispaltiges Raster.)
     · Kontakt    — drei Kontaktkarten oben, Formular in ganzer Breite darunter.
                    (Entwurf 1: Formular links, Datenkarte rechts. Entwurf 3:
                    Formular mittig in einer Platte.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Zahnarzt), Stil B
   „Warm & Familie". Die Kombination Lora + Poppins, das warme Korall und die
   grossen weichen Karten stammen aus der Auswertung von Cedar Village
   Dentistry. Cedars Original-Korall #F66840 traegt weisse Schrift allerdings
   nur mit 3,8:1 — zu wenig fuer Fliesstext. Es ist deshalb auf #B8431E
   abgedunkelt (5,4:1). Der Originalton lebt weiter, aber nur dort, wo er
   sicher ist: als Schrift auf dem dunklen Fuss (5,2:1).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 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:  #FDF7F3;   /* Seitengrund — warmes, sehr helles Creme            */
  --karte:   #FFFFFF;   /* Karten, Formularfelder                            */
  --matt:    #F7EAE1;   /* abgesetzte Baender, Etiketten, Kreise             */
  --tief:    #2B221D;   /* Fuss und dunkle Akzente                           */

  /* Schrift */
  --tinte:   #2B221D;   /* Ueberschriften  (Papier 14,7:1 · Weiss 15,6:1 · Matt 13,2:1) */
  --text:    #5D504A;   /* Fliesstext      (Papier 7,3:1 · Weiss 7,7:1 · Matt 6,6:1) */
  --leise:   #6E605A;   /* Meta            (Papier 5,7:1 · Weiss 6,0:1 · Matt 5,1:1) */
  --hell:    #FDF7F3;   /* Schrift auf Dunkel   (auf #2B221D 14,7:1)         */
  --hell-matt:#C3B7AF;  /* Fliesstext auf Dunkel(auf #2B221D  7,9:1)         */
  --hell-leise:#A99A93; /* Meta auf Dunkel      (auf #2B221D  5,7:1)         */

  /* Erster Akzent: Handlung. Alles, was man anfassen kann, ist korall. */
  --korall:  #B8431E;   /* Papier 5,1:1 · Weiss 5,4:1 · Matt 4,6:1           */
  --korall-tief:#963517;/* Hover-Ton              (Weiss darauf 7,5:1)       */
  --auf-korall:#FFFFFF; /* Schrift auf Korall   (5,4:1)                      */
  --korall-warm:#F66840;/* Cedars Originalton — NUR auf dunklem Grund (5,2:1)*/

  /* Zweiter Akzent: Information. Abrechnungsart, Fachhinweise, Symbole. */
  --blau:    #1B6E96;   /* Papier 5,3:1 · Weiss 5,7:1 · Matt 4,8:1           */
  --blau-matt:#E7F0F5;  /* Grund der Abrechnungs-Etiketten (Blau darauf 4,9:1) */
  --auf-blau:#FFFFFF;   /* Schrift auf Blau     (5,7:1)                      */

  /* Linien und Umrisse */
  --linie:   #EBDBD1;
  --linie-dunkel:#463A33;
  --haar:1px solid #EBDBD1;
  --rand:    #8C7C74;   /* Umriss bedienbarer Elemente   (Papier 3,8:1 · Weiss 4,0:1) */

  /* Schriften. Lora im Halbfetten ist eine warme Serife mit ruhigem Duktus —
     freundlicher als eine Didone, ernster als eine Schreibschrift. Poppins
     daneben ist geometrisch und rund; die runden Punzen nehmen die Haerte aus
     den Zahlen und passen zu den Kreisen und Pillen dieses Entwurfs. */
  --display:'Lora', 'Times New Roman', Georgia, serif;
  --schrift:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1240px;
  --bogen:24px;         /* der Karten-Radius dieses Entwurfs                  */
  --bogen-klein:14px;   /* Formularfelder, Etiketten                          */
  --pille:999px;        /* Knoepfe, Kacheln, Kreise                           */
  --tempo:.45s cubic-bezier(.22,.68,.36,1);

  /* Weiche Schatten. Zwei Stufen, mehr braucht es nicht. */
  --schatten:0 2px 4px rgba(43,34,29,.03), 0 10px 26px rgba(43,34,29,.06);
  --schatten-hoch:0 4px 8px rgba(43,34,29,.04), 0 18px 44px rgba(43,34,29,.09);
}

/* ── 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.72;
  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:600; line-height:1.14}
h1 em,h2 em,h3 em{font-style:italic; color:var(--korall)}
:focus-visible{outline:2px solid var(--korall); outline-offset:3px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.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 keine gesperrten Kapitaelchen wie in Entwurf 1, sondern ein
   kleines gefuelltes Etikett. Dasselbe Motiv, andere Sprache. */
.rubrik{
  display:inline-block; font-size:.74rem; font-weight:600;
  letter-spacing:.05em; color:var(--korall);
  background:var(--matt); border-radius:var(--pille); padding:5px 15px;
}
/* Auf den abgesetzten Baendern ist der Grund selbst schon --matt. Dort dreht
   sich das Etikett um, sonst waere es unsichtbar. */
.block-mitte .rubrik,.termin .rubrik{background:var(--karte)}

/* ── 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 ──────────────────────────────────────────────────────────────── */
/* Anders als in Entwurf 1 ist hier JEDER Knopf eine Vollpille. Dort war die
   Pille die eine Ausnahme und dadurch ein Zeigefinger; hier ist die Rundung
   die Grundhaltung, und der Zeigefinger ist stattdessen die Farbe. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; background:var(--korall); color:var(--auf-korall);
  font-size:.95rem; font-weight:500;
  text-decoration:none; border:1px solid var(--korall); border-radius:var(--pille);
  cursor:pointer; transition:background var(--tempo), border-color var(--tempo),
                             color var(--tempo), translate var(--tempo), box-shadow var(--tempo);
}
.knopf:hover{
  background:var(--korall-tief); border-color:var(--korall-tief);
  translate:0 -2px; box-shadow:var(--schatten);
}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}

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

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--papier); border-bottom:1px solid transparent;
  transition:border-color var(--tempo), box-shadow var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie); box-shadow:0 6px 20px rgba(43,34,29,.045)}
/* 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.55rem; font-weight:600; 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:.16em; text-transform:uppercase; color:var(--leise);
  margin-top:7px;
}

.menue{margin-left:auto; display:flex; gap:6px}
.menue a{
  font-size:.92rem; text-decoration:none; color:var(--text);
  padding:9px 16px; border-radius:var(--pille);
  transition:background var(--tempo), color var(--tempo);
}
.menue a:hover{background:var(--matt); color:var(--korall)}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:none; 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: Bildband mit vorgelagerter Karte ─────────────────────────────
   Das Bild laeuft ueber die volle Breite; die weisse Karte liegt davor und
   ragt links darueber hinaus. Der Text steht IN der Karte, nicht auf dem Bild
   — auf einem Foto ist Kontrast nie zuverlaessig, und diese Seite muss auch
   mit muedem Auge lesbar sein.

   Umgesetzt ist das mit einem Raster, in dem sich zwei Kinder dieselbe Zelle
   teilen; kein position:absolute. Absolut positioniert waere die Karte aus dem
   Fluss genommen, und der Abschnitt haette dann die Hoehe des Bildes statt die
   der Karte — auf schmalen Fenstern liefe der Text unten heraus. */
.buehne{padding-top:clamp(20px, 3vw, 40px)}
.buehne .wrap{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:clamp(90px, 12vw, 160px) auto;
}
/* Das Bild fuellt beide Zeilen. Seine Hoehe kommt also aus der Karte plus dem
   Streifen darueber und NICHT aus einem eigenen Seitenverhaeltnis — sonst
   koennte es die Karte unten ueberragen, sobald der Text kuerzer wird als
   gedacht. object-fit:cover schneidet den Rest mittig weg. */
.buehne-bild{
  grid-column:1; grid-row:1 / span 2;
  border-radius:var(--bogen); overflow:clip; background:var(--matt);
}
.buehne-bild img{width:100%; height:100%; object-fit:cover}
.buehne-karte{
  grid-column:1; grid-row:2;
  position:relative; z-index:2;
  background:var(--karte); border-radius:var(--bogen);
  box-shadow:var(--schatten-hoch);
  padding:clamp(28px, 4vw, 56px);
  /* Die Karte ragt links ueber das Bild hinaus und endet rechts vorher — das
     ist der Versatz, der den Abschnitt traegt. */
  margin-right:clamp(0px, 14vw, 190px);
  max-width:760px;
}
.buehne h1{
  font-size:clamp(2.2rem, 4.6vw, 3.5rem); letter-spacing:-.015em; margin-top:18px;
}
.buehne .lead{margin-top:20px; max-width:48ch; font-size:clamp(1.02rem, 1.2vw, 1.12rem)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* ── Zeile: drei runde Kacheln ────────────────────────────────────────────── */
.zeile{padding:clamp(34px, 4.4vw, 60px) 0}
.zeile ul{
  list-style:none; display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 26px);
}
.zeile li{
  background:var(--karte); border-radius:var(--pille);
  padding:20px clamp(20px, 2.4vw, 32px);
  display:flex; align-items:center; gap:18px;
  box-shadow:var(--schatten);
}
/* Der Kreis traegt kein Symbol, sondern nur Farbe — ein Icon waere hier
   Dekoration, und Dekoration muss ein Vorleseprogramm nicht vorlesen. */
.zeile .kreis{
  flex:none; width:42px; height:42px; border-radius:var(--pille);
  background:var(--matt); display:grid; place-items:center;
}
.zeile .kreis svg{width:19px; height:19px; fill:var(--korall)}
/* min-width:0, damit lange Woerter in einem Flex-Kind umbrechen duerfen —
   ohne das geht ein Flex-Item nie unter seine min-content-Breite. */
.zeile li > div{min-width:0}
.zeile b{
  display:block; font-family:var(--display); font-size:clamp(1.05rem, 1.5vw, 1.28rem);
  color:var(--tinte); font-weight:600; line-height:1.2;
}
.zeile span{display:block; margin-top:2px; font-size:.84rem; color:var(--leise); line-height:1.4}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(50px, 6vw, 100px) 0}
.block-mitte{background:var(--matt)}
.block-kopf{max-width:70ch; margin-bottom:clamp(28px, 3.6vw, 50px)}
.block-kopf h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing:-.014em; margin-top:16px}
.block-kopf .lead{margin-top:16px; max-width:62ch}

/* ── Leistungen: Raster aus acht weichen Karten ────────────────────────────
   Die Abrechnungsart steht als blaues Etikett OBEN in der Karte, nicht als
   Preis unten. Das ist keine Sparsamkeit, sondern die Branche: Kassen-
   leistungen laufen ueber den BEMA, private Leistungen ueber die GOZ. Ein
   „ab 89 €" waere hier schlicht falsch — der Betrag haengt am Befund und am
   Steigerungssatz, nicht am Werbetext. */
.karten-raster{
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:clamp(16px, 2vw, 26px);
}
.leistungs-karte{
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(24px, 2.6vw, 32px);
  box-shadow:var(--schatten);
  transition:translate var(--tempo), box-shadow var(--tempo);
}
.leistungs-karte:hover{translate:0 -3px; box-shadow:var(--schatten-hoch)}
.etikett{
  display:inline-block; font-size:.74rem; font-weight:500;
  color:var(--blau); background:var(--blau-matt); border-radius:var(--pille);
  padding:5px 14px; margin-bottom:16px;
}
.leistungs-karte h3{
  font-family:var(--schrift); font-size:1.14rem; font-weight:600;
  color:var(--tinte); line-height:1.35;
}
.leistungs-karte p{margin-top:10px; font-size:.95rem}

.preis-fuss{
  margin-top:28px; max-width:64ch; font-size:.95rem; color:var(--leise);
  background:var(--karte); border-radius:var(--bogen); padding:20px 26px;
}
.preis-fuss + .preis-fuss{margin-top:14px}
.block-mitte .preis-fuss{background:var(--papier)}

/* ── Galerie: waagerechter Streifen zum Wischen ────────────────────────────
   Statt eines Rasters ein Band, das man seitlich zieht. scroll-snap laesst es
   an jeder Kachel einrasten, damit es sich auch mit dem Daumen sauber anfuehlt.
   Die Kacheln behalten auf jeder Breite dieselbe Groesse — die Galerie ist
   damit das einzige Element der Seite, das absichtlich ueber den Rand
   hinauslaeuft. Das ist kein Ueberlauf der SEITE: der Streifen scrollt in sich
   selbst, die Seite nicht. */
.streifen{
  display:flex; gap:clamp(14px, 1.8vw, 24px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:18px;
  scrollbar-color:var(--rand) var(--matt);
  /* Alle Kacheln sind gleich HOCH und unterschiedlich BREIT — quer liegende
     Motive bekommen mehr Platz als stehende. So bleibt die Oberkante ruhig,
     und trotzdem entsteht ein Rhythmus. Ueber eine Variable, damit Hoehe und
     Breite nicht auseinanderlaufen koennen. */
  --hoehe:clamp(200px, 23vw, 290px);
}
.streifen figure{margin:0; flex:none; scroll-snap-align:start}
.streifen figure.quer{width:calc(var(--hoehe) * 4 / 3)}
.streifen figure.hoch{width:calc(var(--hoehe) * 3 / 4)}
.streifen .bild{
  height:var(--hoehe);
  border-radius:var(--bogen); overflow:clip; background:var(--matt);
  box-shadow:var(--schatten);
}
.streifen img{width:100%; height:100%; object-fit:cover}
.streifen figcaption{padding-top:12px; font-size:.87rem; color:var(--leise); line-height:1.45}
.streifen-hinweis{
  margin-top:14px; font-size:.86rem; color:var(--leise);
  display:flex; align-items:center; gap:9px;
}
.streifen-hinweis svg{width:16px; height:16px; fill:var(--korall); flex:none}

/* ── Praxis: Text links, Bild rechts (gespiegelt zu Entwurf 1) ────────────── */
.praxis .wrap{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(28px, 4vw, 62px); align-items:center;
}
.praxis-bild{
  border-radius:var(--bogen); overflow:clip; background:var(--matt); margin:0;
  box-shadow:var(--schatten);
}
.praxis-bild img{width:100%; height:auto}
.praxis-bild figcaption{padding:14px 20px 18px; font-size:.86rem; color:var(--leise); background:var(--karte)}
.praxis-text h2{font-size:clamp(1.85rem, 3.4vw, 2.6rem); letter-spacing:-.014em; margin-top:16px}
.praxis-text p{margin-top:16px; max-width:58ch}
.praxis-text .unterschrift{
  margin-top:28px; display:flex; align-items:center; gap:16px;
}
.praxis-text .unterschrift .kreis{
  flex:none; width:52px; height:52px; border-radius:var(--pille);
  background:var(--korall); color:var(--auf-korall);
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.2rem; font-weight:600;
}
.praxis-text .unterschrift b{
  display:block; font-family:var(--display); font-size:1.2rem;
  font-weight:600; color:var(--tinte); line-height:1.3;
}
.praxis-text .unterschrift small{display:block; font-size:.86rem; color:var(--leise); margin-top:2px}

/* ── Termin: hell, zwei Karten nebeneinander ──────────────────────────────
   Entwurf 1 setzt hier ein dunkles Band. Dieser Entwurf bleibt hell und stellt
   stattdessen Wege und Zeiten als zwei gleichwertige Karten nebeneinander —
   „wie erreiche ich euch" und „wann seid ihr da" sind zwei Fragen, nicht eine. */
.termin{background:var(--matt); padding:clamp(50px, 6vw, 100px) 0}
.termin-gitter{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 30px); align-items:start;
}
.termin-karte{
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(24px, 3vw, 38px); box-shadow:var(--schatten);
}
.termin-karte h3{
  font-family:var(--display); font-size:1.4rem; font-weight:600; margin-bottom:20px;
}

.wege{list-style:none}
.wege li + li{margin-top:10px}
.wege a,.wege .kein-link{
  display:grid; grid-template-columns:42px minmax(0, 1fr); gap:16px; align-items:center;
  padding:12px 14px; text-decoration:none; color:var(--text);
  border-radius:var(--bogen); transition:background var(--tempo);
}
.wege a:hover{background:var(--papier)}
.wege .kreis{
  width:42px; height:42px; border-radius:var(--pille); background:var(--matt);
  display:grid; place-items:center;
}
.wege svg{width:19px; height:19px; fill:var(--korall)}
.wege b{display:block; color:var(--tinte); font-weight:600; font-size:1.02rem}
.wege small{display:block; font-size:.86rem; color:var(--leise); margin-top:2px}

.zeiten dl{margin:0}
.zeiten div{
  display:flex; justify-content:space-between; gap:20px;
  padding:13px 0; border-bottom:var(--haar); font-size:.95rem;
}
.zeiten div:last-child{border-bottom:0}
.zeiten dt{color:var(--text)}
.zeiten dd{color:var(--tinte); font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.zeiten .notdienst{
  margin-top:20px; padding:16px 20px; background:var(--papier);
  border-radius:var(--bogen); font-size:.9rem; color:var(--text);
}
.zeiten .notdienst b{color:var(--tinte)}

.termin-tun{margin-top:clamp(26px, 3vw, 38px); display:flex; flex-wrap:wrap; gap:12px}

/* ── Fragen: offene Karten ────────────────────────────────────────────────
   Kein Aufklapper. Wer Angst vor dem Zahnarzt hat, sucht die Antwort auf
   „tut das weh" nicht hinter einem Klick — sie steht hier einfach da. */
.fragen-raster{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(16px, 2vw, 26px);
}
.frage-karte{
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(24px, 2.6vw, 32px); box-shadow:var(--schatten);
}
.frage-karte h3{
  font-family:var(--schrift); font-size:1.06rem; font-weight:600;
  color:var(--tinte); line-height:1.4;
}
.frage-karte p{margin-top:12px; font-size:.95rem}

/* ── Kontakt: drei Karten oben, Formular darunter ─────────────────────────── */
.kontakt-karten{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 24px); margin-bottom:clamp(28px, 3.4vw, 46px);
}
.kontakt-karte{
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(22px, 2.4vw, 30px); box-shadow:var(--schatten);
  text-decoration:none; color:var(--text); display:block;
  transition:translate var(--tempo), box-shadow var(--tempo);
}
a.kontakt-karte:hover{translate:0 -3px; box-shadow:var(--schatten-hoch)}
.kontakt-karte .kreis{
  width:46px; height:46px; border-radius:var(--pille); background:var(--matt);
  display:grid; place-items:center; margin-bottom:16px;
}
.kontakt-karte svg{width:20px; height:20px; fill:var(--korall)}
.kontakt-karte h3{
  font-family:var(--schrift); font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--leise); margin-bottom:8px;
}
.kontakt-karte b{
  display:block; font-family:var(--display); font-size:1.18rem;
  font-weight:600; color:var(--tinte); line-height:1.35;
}
.kontakt-karte small{display:block; font-size:.86rem; color:var(--leise); margin-top:6px}

.formular-platte{
  background:var(--karte); border-radius:var(--bogen);
  padding:clamp(26px, 3.4vw, 48px); box-shadow:var(--schatten);
}
.formular{margin-top:26px}
.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:7px;
}
/* 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
   4,0:1 auf Weiss und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:14px 17px; 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(--korall); 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% - 21px) 50%, calc(100% - 15px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:46px;
}
.form-fuss{margin-top:16px; font-size:.86rem; color:var(--leise); max-width:62ch}
.form-fuss a{color:var(--korall)}
.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(--matt); border-radius:var(--bogen);
  padding:18px 22px; font-size:.9rem; color:var(--text); max-width:64ch;
}
.form-warnung b{color:var(--tinte)}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.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:.14em; text-transform:uppercase; color:var(--korall-warm); 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:1000px){
  .praxis .wrap{grid-template-columns:minmax(0, 1fr)}
  .termin-gitter{grid-template-columns:minmax(0, 1fr)}
  .kontakt-karten{grid-template-columns:minmax(0, 1fr)}
  .buehne-karte{margin-right:0}
  .zeile ul{grid-template-columns:minmax(0, 1fr)}
}

@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:8px 20px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 16px; font-size:1.02rem}
  .kopf .knopf{display:none}
  .burger{display:block}
  /* Auf schmalen Fenstern verliert der Versatz seinen Sinn: die Karte wuerde
     das Bild fast ganz verdecken. Stattdessen steht das Bild dann sauber ueber
     der Karte, mit einer kleinen Ueberlappung als Rest der Geste. */
  .buehne .wrap{grid-template-rows:auto auto}
  .buehne-bild{grid-row:1; border-radius:var(--bogen)}
  .buehne-bild img{aspect-ratio:16/9}
  .buehne-karte{grid-row:2; margin-top:-34px; width:calc(100% - 16px); margin-inline:auto}
}

@media (max-width:640px){
  body{font-size:17px}
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  .buehne-bild img{aspect-ratio:4/3}
  .zeile li{border-radius:var(--bogen)}

  /* 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}
  .daumen .knopf:hover{translate:none; box-shadow:none}
  .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}
  .streifen{scroll-snap-type:none}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Dieser Entwurf lebt von weichen Karten und warmen Flaechen. Beides gilt auch
   hier: der Hinweiskasten ist eine Karte, die Aufzaehlung bekommt einen
   korallenen Punkt. Der Lesetext bleibt bei 68 Zeichen — laenger wird eine
   Datenschutzerklaerung unlesbar, und gerade die soll gelesen werden. */
.rechts-kopf{padding:clamp(42px, 5vw, 72px) 0 clamp(22px, 3vw, 34px)}
/* 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{padding:28px 0 4px; border-top:var(--haar)}
.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:22px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:var(--pille); background:var(--korall);
}
.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(--korall); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--karte); border-radius:var(--bogen);
  box-shadow:var(--schatten);
  padding:22px 26px; 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:.86rem; font-weight:500;
  color:var(--korall); background:var(--matt); border-radius:var(--pille);
  padding:12px 24px; margin-top:38px;
  transition:background var(--tempo), color var(--tempo);
}
.rechtstext .zurueck:hover{background:var(--korall); color:var(--auf-korall)}