/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 1 — „Sprechstunde"
   Praxis Lindhorst · Zahnarztpraxis Bielefeld-Schildesche

   Haltung: ruhig, hell, redaktionell. Eine Zahnarztpraxis verkauft kein
   Erlebnis, sondern Verlaesslichkeit — und Verlaesslichkeit zeigt man, indem
   man nichts uebertreibt. Deshalb genau EIN Akzent (ein gedecktes
   Eukalyptus-Gruen), kaum Rundung, keine Schatten, viel Luft. Was Farbe hat,
   sind die Fotos.

   Radius 6px auf allem Flaechigen — mit genau EINER Ausnahme: der Termin-Knopf
   ist eine Vollpille (100px). Diese eine starke Rundung ist der Zeigefinger der
   Seite und darf nicht durch eine zweite entwertet werden.

   Aufbau, worin sich dieser Entwurf von 2 und 3 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — zweispaltig: Text links, hohes Bild rechts.
                    (Entwurf 2: breites Bildband mit weicher Karte, die von
                    links darueberlaeuft. Entwurf 3: alles mittig, Bildband
                    darunter.)
     · Zeile      — drei Angaben in Spalten auf Haarlinien.
                    (Entwurf 2: drei runde Kacheln. Entwurf 3: eine einzige
                    mittige Zeile mit Trennpunkten.)
     · Leistungen — durchnummerierte Editorial-Liste, Abrechnungsart rechts.
                    (Entwurf 2: Raster aus acht weichen Karten. Entwurf 3:
                    Aufklapper in einer grossen gerundeten Platte.)
     · Galerie    — zwei Spalten im Wechsel MIT Bildunterschriften.
                    (Entwurf 2: waagerechter Streifen zum Wischen. Entwurf 3:
                    2x2 grosse Kacheln.)
     · Termin     — dunkles Band, Wege als Liste, Zeiten als Tabelle.
                    (Entwurf 2: hell, Wege und Zeiten nebeneinander als Karten.
                    Entwurf 3: drei gerundete Kacheln, Zeiten mittig darunter.)
     · Fragen     — Aufklapper auf Haarlinien.
                    (Entwurf 2: offene Karten. Entwurf 3: offenes zweispaltiges
                    Raster.)
     · Kontakt    — Formular links, Datenkarte rechts.
                    (Entwurf 2: drei Kontaktkarten oben, Formular darunter.
                    Entwurf 3: Formular mittig in einer Platte, Daten als Zeile
                    darunter.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Zahnarzt), Stil A
   „Calm Clinical". Das Muster „Serifen-Headline + Sans-Body" und der Verzicht
   auf eine zweite Buntfarbe stammen aus der Auswertung von Aventura Dental
   Arts, Sky Dental und Cedar Village Dentistry.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 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:  #F6F8F7;   /* Seitengrund — sehr helles, leicht kuehles Papier */
  --karte:   #FFFFFF;   /* Karten, Formularfelder                          */
  --matt:    #E8EEEB;   /* abgesetzte Baender und Kaesten                  */
  --tief:    #12211E;   /* dunkle Baender, Termin, Fuss                    */

  /* Schrift */
  --tinte:   #12211E;   /* Ueberschriften        (auf Papier 15,6:1)       */
  --text:    #47554F;   /* Fliesstext            (Papier 7,4:1 · Weiss 7,8:1 · Matt 6,7:1) */
  --leise:   #5A6862;   /* Meta, Beschriftungen  (Papier 5,5:1 · Matt 5,0:1) */
  --hell:    #F6F8F7;   /* Schrift auf Dunkel    (auf #12211E 15,6:1)      */
  --hell-matt:#B3BEBA;  /* Fliesstext auf Dunkel (auf #12211E  8,7:1)      */
  --hell-leise:#94A29D; /* Meta auf Dunkel       (auf #12211E  6,3:1)      */

  /* Der eine Akzent. Eukalyptus-Gruen, dunkel genug fuer Fliesstext. */
  --gruen:   #1B5A4C;   /* auf Papier 7,5:1 · auf Matt 6,8:1               */
  --auf-gruen:#FFFFFF;  /* Schrift auf Gruen     (8,0:1)                   */

  /* Linien. Kein Schatten — die Haarlinie ordnet, nicht die Tiefe. */
  --linie:   #DCE3E0;
  --linie-dunkel:#2C3D38;
  --haar:1px solid #DCE3E0;
  --rand:    #7E8C87;   /* Umriss bedienbarer Elemente        (3,3:1)      */

  /* Schriften. Fraunces ist eine weiche, leicht altertuemliche Serife mit
     variabler optischer Groesse — sie nimmt der Medizin die Kaelte, ohne
     verspielt zu werden. Work Sans daneben ist bewusst neutral. */
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1240px;
  --bogen:6px;          /* der Radius dieses Entwurfs — knapp, nicht null   */
  --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.68;
  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.08}
h1 em,h2 em,h3 em{font-style:italic}
:focus-visible{outline:2px solid var(--gruen); 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 16px; border-radius:var(--bogen);
}

/* Rubrik: gesperrte Kapitaelchen in der Grotesk. Taucht ueber jeder
   Ueberschrift wieder auf — ein Motiv, ueberall dasselbe. */
.rubrik{
  display:block; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gruen);
}

/* ── 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:14px 26px; background:var(--gruen); color:var(--auf-gruen);
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; border:1px solid var(--gruen); border-radius:var(--bogen);
  cursor:pointer; transition:background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:#14483D; border-color:#14483D}
.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(--tinte); color:var(--hell); border-color:var(--tinte)}

/* Die einzige volle Rundung des ganzen Entwurfs. Sie ist der Handlung
   vorbehalten: Termin machen. Alles andere hat 6px. Wer hier eine zweite
   Pille einfuehrt, nimmt dieser genau ihre Wirkung. */
.pille{border-radius:100px; padding:13px 28px}

/* ── 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:80px}
.marke{
  font-family:var(--display); font-size:1.6rem; font-weight:400; color:var(--tinte);
  text-decoration:none; letter-spacing:-.01em; line-height:1; flex:none;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.62rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--leise);
  margin-top:6px;
}

.menue{margin-left:auto; display:flex; gap:24px}
.menue a{font-size:.92rem; text-decoration:none; color:var(--text); padding:6px 0; position:relative}
.menue a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--gruen); transition:right var(--tempo);
}
.menue a:hover{color:var(--gruen)}
.menue a:hover::after{right:0}

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:1px solid var(--rand); border-radius:var(--bogen); position:relative;
}
.burger i{
  position:absolute; left:12px; width:18px; height:1px; background:var(--tinte);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
.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: zweispaltig ──────────────────────────────────────────────────
   Text links, hohes Bild rechts. Kein Text auf dem Bild — auf einem Foto ist
   Kontrast nie zuverlaessig, und diese Seite muss auch mit muedem Auge lesbar
   sein. minmax(0,…) auf beiden Spalten, weil in der linken lange Woerter wie
   „Zahnersatz" stehen und 1fr sonst nicht unter seine min-content-Breite geht. */
.buehne{padding:clamp(38px, 5vw, 78px) 0 clamp(34px, 4vw, 62px)}
.buehne .wrap{
  display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:clamp(30px, 4vw, 66px); align-items:center;
}
.buehne h1{
  font-size:clamp(2.5rem, 5.4vw, 4.05rem); letter-spacing:-.02em; margin-top:18px;
}
.buehne .lead{margin-top:22px; max-width:46ch; font-size:clamp(1.02rem, 1.2vw, 1.14rem)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.buehne-bild{border-radius:var(--bogen); overflow:clip; background:var(--matt)}
.buehne-bild img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4}

/* ── Zeile: drei Angaben auf Haarlinien ───────────────────────────────────── */
.zeile{border-top:var(--haar); border-bottom:var(--haar)}
.zeile ul{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr))}
.zeile li{padding:22px 0 22px 24px; border-left:var(--haar)}
.zeile li:first-child{padding-left:0; border-left:0}
.zeile b{
  display:block; font-family:var(--display); font-size:clamp(1.35rem, 2.3vw, 1.9rem);
  color:var(--tinte); font-weight:400; line-height:1.1;
}
.zeile span{display:block; margin-top:8px; font-size:.88rem; color:var(--leise)}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(56px, 6.6vw, 112px) 0}
.block + .block{border-top:var(--haar)}
.block-kopf{max-width:70ch; margin-bottom:clamp(30px, 4vw, 54px)}
.block-kopf h2{font-size:clamp(1.95rem, 3.8vw, 2.9rem); letter-spacing:-.018em; margin-top:14px}
.block-kopf .lead{margin-top:18px; max-width:62ch}

/* ── Leistungen: durchnummerierte Editorial-Liste ──────────────────────────
   Kein Kaestchen. Nummer, Name, Erklaerung — und rechts NICHT ein Preis,
   sondern die Abrechnungsart. Das ist keine Sparsamkeit, sondern die Branche:
   Kassenleistungen laufen ueber den BEMA, private Leistungen ueber die GOZ.
   Ein „ab 89 €" waere hier schlicht falsch. */
.leistungs-liste{list-style:none; counter-reset:posten}
.leistungs-liste li{
  counter-increment:posten;
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  gap:6px 26px; align-items:baseline;
  padding:26px 0; border-top:var(--haar);
}
.leistungs-liste li:last-child{border-bottom:var(--haar)}
.leistungs-liste li::before{
  content:counter(posten, decimal-leading-zero);
  font-size:.82rem; font-weight:600; color:var(--gruen);
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
}
.leistungs-liste h3{
  font-family:var(--schrift); font-size:1.16rem; font-weight:600;
  color:var(--tinte); line-height:1.34; letter-spacing:-.005em;
}
.leistungs-liste .abrechnung{
  font-size:.84rem; font-weight:500; color:var(--gruen);
  text-align:right; letter-spacing:.02em;
}
.leistungs-liste p{grid-column:2 / -1; font-size:.97rem; max-width:64ch; margin-top:4px}

.preis-fuss{
  margin-top:28px; max-width:62ch; font-size:.96rem; color:var(--leise);
  padding-left:20px; border-left:2px solid var(--gruen);
}
.preis-fuss + .preis-fuss{margin-top:16px}

/* ── Galerie: zwei Spalten im Wechsel, mit Bildunterschrift ────────────────
   Anders als in Entwurf 2 und 3 stehen hier Unterschriften: dieser Entwurf
   erklaert, statt nur zu zeigen. */
.wechsel{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 34px);
  /* align-items:start, damit die kuerzere Kachel einer Reihe nicht auf die
     Hoehe der hoeheren gezogen wird — der Versatz IST der Takt der Galerie. */
  align-items:start;
}
.wechsel figure{margin:0}
.wechsel .bild{border-radius:var(--bogen); overflow:clip; background:var(--matt)}
.wechsel img{width:100%; height:100%; object-fit:cover; scale:1; transition:scale 1.1s cubic-bezier(.22,.68,.36,1)}
.wechsel figure:hover img{scale:1.03}
.wechsel figcaption{padding-top:12px; font-size:.88rem; color:var(--leise)}
/* Zwei Hoehen im Wechsel — das gibt der Galerie einen Takt, ohne dass sie
   in ein Mauerwerk zerfaellt. */
.wechsel .hoch img{aspect-ratio:3/4}
.wechsel .quer img{aspect-ratio:4/3}

/* ── Praxis: Bild links, Text rechts ──────────────────────────────────────── */
.praxis .wrap{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(28px, 4vw, 62px); align-items:start;
}
.praxis-bild{border-radius:var(--bogen); overflow:clip; background:var(--matt); margin:0}
.praxis-bild img{width:100%; height:auto}
.praxis-bild figcaption{padding:14px 4px 0; font-size:.86rem; color:var(--leise)}
.praxis-text h2{font-size:clamp(1.85rem, 3.4vw, 2.65rem); letter-spacing:-.018em; margin-top:14px}
.praxis-text p{margin-top:18px; max-width:58ch}
.praxis-text .unterschrift{
  margin-top:28px; padding-top:22px; border-top:var(--haar);
  font-family:var(--display); font-size:1.45rem; color:var(--tinte);
}
.praxis-text .unterschrift small{
  display:block; font-family:var(--schrift); font-size:.86rem; color:var(--leise); margin-top:6px;
}

/* ── Termin: dunkles Band ─────────────────────────────────────────────────── */
.termin{background:var(--tief); color:var(--hell-matt); padding:clamp(56px, 6.6vw, 112px) 0}
.termin .rubrik{color:var(--hell-leise)}
.termin h2{color:var(--hell); font-size:clamp(2rem, 4.2vw, 3.2rem); letter-spacing:-.02em; margin-top:16px}
.termin-lead{margin-top:22px; max-width:58ch}
.termin-tun{margin-top:30px}
.termin-tun .knopf{background:var(--hell); color:var(--tief); border-color:var(--hell)}
.termin-tun .knopf:hover{background:#FFFFFF; border-color:#FFFFFF}

.wege{list-style:none; margin-top:clamp(34px, 4vw, 54px); border-top:1px solid var(--linie-dunkel)}
.wege li{border-bottom:1px solid var(--linie-dunkel)}
.wege a,.wege .kein-link{
  display:grid; grid-template-columns:22px minmax(0, 1fr) auto; gap:18px; align-items:center;
  padding:20px 0; text-decoration:none; color:var(--hell-matt);
  transition:color var(--tempo), padding-left var(--tempo);
}
.wege a:hover{color:var(--hell); padding-left:8px}
.wege svg{width:20px; height:20px; fill:currentColor}
.wege b{display:block; color:var(--hell); font-weight:500; font-size:1.04rem}
.wege small{display:block; font-size:.88rem; color:var(--hell-leise); margin-top:3px}
.wege .pf{font-size:1.2rem; color:var(--hell-leise)}

.zeiten{margin-top:clamp(34px, 4vw, 52px); max-width:540px}
.zeiten dl{border-top:1px solid var(--linie-dunkel)}
.zeiten div{
  display:flex; justify-content:space-between; gap:20px;
  padding:12px 0; border-bottom:1px solid var(--linie-dunkel); font-size:.95rem;
}
.zeiten dt{color:var(--hell-matt)}
.zeiten dd{color:var(--hell); font-variant-numeric:tabular-nums; text-align:right}

/* ── Fragen: Aufklapper auf Haarlinien ────────────────────────────────────── */
.aufklapper{border-top:var(--haar)}
.aufklapper details{border-bottom:var(--haar)}
.aufklapper summary{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer; list-style:none;
  padding:22px 0; font-size:1.06rem; font-weight:600; color:var(--tinte); line-height:1.4;
}
.aufklapper summary::-webkit-details-marker{display:none}
/* Das Pluszeichen ist zwei Striche. Beim Aufklappen dreht sich der senkrechte
   weg — kein Bilddatei, kein Zeichensatz, keine Fallstricke. */
.aufklapper summary .kreuz{
  flex:none; position:relative; width:18px; height:18px; margin-top:5px; margin-left:auto;
}
.aufklapper summary .kreuz::before,
.aufklapper summary .kreuz::after{
  content:""; position:absolute; left:0; top:8px; width:18px; height:1.5px;
  background:var(--gruen); transition:rotate var(--tempo), opacity var(--tempo);
}
.aufklapper summary .kreuz::after{rotate:90deg}
.aufklapper details[open] summary .kreuz::after{rotate:0deg; opacity:0}
.aufklapper details p{padding:0 34px 24px 0; max-width:66ch; font-size:.97rem}

/* ── Kontakt: Formular links, Datenkarte rechts ───────────────────────────── */
.kontakt .wrap{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(30px, 4vw, 62px); align-items:start;
}
/* Die Ueberschrift steht hier nicht in einem .block-kopf, weil das Formular in
   derselben Spalte weiterlaeuft. Groesse deshalb eigens setzen — sonst faellt
   sie auf die Browser-Vorgabe zurueck und wirkt zu klein. */
.kontakt h2{font-size:clamp(1.85rem, 3.4vw, 2.65rem); letter-spacing:-.018em; margin-top:14px}
.kontakt .lead{margin-top:16px; max-width:52ch}
.formular{margin-top:30px}
.feld-paar{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block; font-size:.8rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--leise); 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,3:1 — man saehe das Feld praktisch nicht. --rand liegt bei
   3,3:1 und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 15px; background:var(--karte);
  border:1px solid var(--rand); border-radius:var(--bogen); font-size:1rem;
  transition:border-color 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(--gruen); outline-offset:1px; border-color:transparent;
}
.feld textarea{min-height:130px; resize:vertical; line-height:1.6}
.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% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:44px;
}
.form-fuss{margin-top:16px; font-size:.86rem; color:var(--leise); max-width:58ch}
.form-fuss a{color:var(--gruen)}
.form-fuss + .form-fuss{margin-top:10px}

.kontakt-daten{background:var(--matt); border-radius:var(--bogen); padding:clamp(24px, 3vw, 34px)}
.kontakt-daten h3{font-family:var(--display); font-size:1.6rem; margin:12px 0 20px}
.kontakt-liste{list-style:none}
.kontakt-liste li{
  display:grid; grid-template-columns:22px minmax(0, 1fr); gap:14px;
  padding:15px 0; border-top:1px solid #D3DCD8;
}
.kontakt-liste li:first-child{border-top:0; padding-top:0}
.kontakt-liste svg{width:19px; height:19px; fill:var(--gruen); margin-top:4px}
.kontakt-liste b{display:block; font-weight:600; color:var(--tinte)}
.kontakt-liste b a{text-decoration:none}
.kontakt-liste b a:hover{text-decoration:underline}
.kontakt-liste small{display:block; font-size:.87rem; color:var(--leise); margin-top:3px}

/* ── 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:.94rem}
.fuss h3{
  font-family:var(--schrift); font-size:.76rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--hell-leise); margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.94rem}
.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){
  .buehne .wrap,.praxis .wrap,.kontakt .wrap{grid-template-columns:minmax(0, 1fr)}
  .buehne-bild img{aspect-ratio:16/10}
  .buehne .lead{max-width:60ch}
}

@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}
  .menue a::after{display:none}
  .kopf .knopf{display:none}
  .burger{display:block}
}

@media (max-width:640px){
  body{font-size:17px}
  .zeile ul{grid-template-columns:minmax(0, 1fr)}
  .zeile li{padding:16px 0; border-left:0; border-top:var(--haar)}
  .zeile li:first-child{border-top:0}
  .wechsel{grid-template-columns:minmax(0, 1fr)}
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  /* Auf dem Handy hat die Abrechnungsspalte keinen Platz mehr neben dem Namen —
     sie rutscht unter die Ueberschrift statt den Text zu quetschen. */
  .leistungs-liste li{grid-template-columns:auto minmax(0, 1fr)}
  .leistungs-liste .abrechnung{grid-column:2; text-align:left; margin-top:4px}

  /* 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-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 Haarlinien und einem einzigen Gruen. Beides gilt auch
   hier: der Hinweiskasten bekommt einen Balken statt einer Warnfarbe, die
   Aufzaehlung einen Strich statt eines Punktes. 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.2rem, 4.2vw, 3.2rem); margin-top:10px; 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.7rem); 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:0; top:.62em;
  width:9px; height:1px; background:var(--gruen);
}
.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(--gruen); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--matt); border-left:3px solid var(--gruen); border-radius:0 var(--bogen) var(--bogen) 0;
  padding:20px 24px; margin:26px 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:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gruen); border-bottom:1px solid var(--gruen);
  padding-bottom:4px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--tinte); border-bottom-color:var(--tinte)}