/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 2 — „Ruhe & Regeneration"
   Praxis Lohbach · Physiotherapie Bielefeld

   Haltung: warm, geduldig, erwachsen. Dieser Entwurf ist fuer die klassische
   Praxis gebaut — fuer Menschen mit Rueckenschmerzen, nach einer Operation,
   nach einer Krebsbehandlung. Er beeilt sich nicht. Der Grund ist ein warmes
   Papierweiss, die Traegerfarbe ein gedecktes Salbeigruen, und der einzige
   warme Gegenpol ist eine Terrakotta, die nur Wegmarken setzt.

   Kein Klinik-Blau, keine Wellness-Kerze, kein Stockfoto-Laecheln. Salbei
   statt Tuerkis ist die eigentliche Entscheidung: Tuerkis ist in dieser
   Branche das Slop-Signal (siehe referenzen.md), Salbei ist die gemessene
   Alternative von der einzigen Referenzseite, die ohne Karussell auskommt.

   Radius 8–12px durchgehend. Weiche Karten, aber keine Vollpille — eine
   Vollpille wirkt nach App, und hier soll nichts nach App wirken.

   Aufbau, worin sich dieser Entwurf von 1 und 3 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — mittig gesetzter Text ganz ohne Bild; das Bild kommt erst
                    darunter, als ruhiges Band aus drei Aufnahmen.
                    (Entwurf 1: geteilt, Text links / Bild rechts.
                    Entwurf 3: Bild ganzflaechig mit harter Platte darauf.)
     · Leistungen — weiche Karten im Raster, jede mit eigenem Kopf.
                    (Entwurf 1: nummerierte Reihe auf Haarlinien.
                    Entwurf 3: eine grosse Platte mit zwei Spalten.)
     · Fuer wen   — breite Zeilen untereinander in einer Karte, nicht Spalten.
                    (Entwurf 1: drei Spalten. Entwurf 3: Randnotizen.)
     · Weg        — SENKRECHTE Zeitleiste, von oben nach unten gelesen.
                    (Entwurf 1: waagerechte Bahn. Entwurf 3: vier Kacheln.)
     · Kosten     — Aufklapper, drei Faelle einzeln zu oeffnen.
                    (Entwurf 1: Tabelle. Entwurf 3: zwei Spalten in einer
                    Platte.)
     · Galerie    — waagerechter Streifen zum Wischen, mit Einrasten.
                    (Entwurf 1: 2x2 Kacheln. Entwurf 3: Mauerwerk.)
     · Fragen     — Aufklapper. (Entwurf 1: offen zweispaltig.
                    Entwurf 3: Karten.)
     · Kontakt    — eine breite Karte in der Mitte, die Daten als Zeile
                    darunter. (Entwurf 1: Formular links, Kasten rechts.
                    Entwurf 3: Daten links auf Dunkel, Formular rechts.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Physiotherapie), Stil B.
   Schriften, Farbwerte und die Radius-Spanne sind von dort uebernommen und
   nicht danebenerfunden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────────
   Alles Farbige haengt an diesen Werten. Wer die Marke aendert, aendert hier
   und nirgends sonst. Die Verhaeltnisse in Klammern sind nachgerechnet, nicht
   geschaetzt. */
:root{
  /* Flaechen */
  --grund:       #FAF9F5;  /* Seitengrund — warmes Papier, kein Reinweiss  */
  --flaeche:     #FFFFFF;  /* Karten, Formularfelder                       */
  --matt:        #F3F1EB;  /* ruhige Kaesten, geoeffnete Aufklapper        */
  --salbei-tief: #455B4F;  /* Traegerfarbe: Zeitleiste, Fuss               */

  /* Buntflaechen ohne Text. Beide sind zu hell, um Fliesstext zu tragen —
     das ist hier ausdruecklich notiert, damit es niemand versehentlich tut:
     Salbei kommt auf dem Grund auf 4,0:1, Terrakotta auf 3,8:1. Als Punkt,
     Strich oder Rahmen ist das genug (3:1 fuer Grafik), als Schrift nicht. */
  --salbei:      #65826E;  /* Punkte, Rahmen, Zierlinien   (Grund 4,0:1)   */
  --terra:       #C0663A;  /* Wegmarken auf hellem Grund   (Grund 3,8:1)   */
  --terra-hell:  #F0B995;  /* dieselbe Marke auf dem dunklen Band (4,2:1)  */

  /* Schrift */
  --tinte:       #20302A;  /* Ueberschriften    (Grund 13,1:1)             */
  --text:        #55645C;  /* Fliesstext        (Grund 5,9:1 · Weiss 6,2:1 · matt 5,5:1) */
  --leise:       #617068;  /* Meta, Beschriftung (Grund 5,0:1 · Weiss 5,2:1 · matt 4,6:1) */
  --terra-tief:  #9C4E28;  /* Terrakotta, wenn sie Text ist (Grund 5,6:1 · Weiss 5,9:1) */
  --hell:        #FFFFFF;  /* Schrift auf Salbei-tief   (7,3:1)            */
  --hell-matt:   #D7DED8;  /* Fliesstext auf Salbei-tief (5,4:1)           */
  --hell-leise:  #C9D3CB;  /* Meta auf Salbei-tief       (4,8:1)           */

  /* Bestaetigung — der gruene Haken der Kasse. Salbei-tief tut hier dieselbe
     Arbeit; eine dritte Buntfarbe waere eine zu viel. */
  --bestaetigt:  #455B4F;  /* (Grund 7,0:1)                                */

  /* Linien */
  --linie:        #E4E2DA;
  --linie-dunkel: #5F786A;
  --haar:1px solid #E4E2DA;
  --rand:         #76837C; /* Umriss bedienbarer Elemente (Weiss 4,0:1 · Grund 3,8:1) */

  /* Schriften. Newsreader ist eine ruhige Serife mit offenen Formen — sie
     klingt erwachsen, ohne nach Kanzlei zu klingen. Public Sans daneben ist
     ausdruecklich fuer Barrierefreiheit entworfen worden und laeuft auf 18px.
     Die Paarung Serife + Grotesk ist in dieser Branche selbst schon das
     Unterscheidungsmerkmal: fast alle Vorbilder kamen mit einer Schrift aus. */
  --display:'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --schrift:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius. Die Spanne aus der Recherche, als drei feste Stufen. */
  --rund-klein:8px;
  --rund:10px;
  --rund-gross:12px;

  --spalte:1180px;
  --tempo:.55s cubic-bezier(.24,.62,.34,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:18px; line-height:1.72;
  color:var(--text); background:var(--grund);
  -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.2}
h1{letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--terra-tief); outline-offset:3px; border-radius: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(--salbei-tief); color:var(--hell);
  padding:10px 16px; border-radius:var(--rund);
}

/* Rubrik: gesperrte Kapitaelchen zwischen zwei kurzen Salbeistrichen. In
   Entwurf 1 sitzt der Strich nur links — hier umschliesst er, weil dieser
   Entwurf mittig gesetzt ist und ein einseitiger Strich schief aussaehe. */
.rubrik{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--schrift); font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--leise);
}
.rubrik::before,.rubrik::after{
  content:""; width:26px; height:1px; flex:none; background:var(--salbei);
}
/* Links ausgerichtete Bloecke brauchen den rechten Strich nicht. */
.rubrik-links::after{display: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 28px; background:var(--salbei-tief); color:var(--hell);
  font-size:.96rem; font-weight:600;
  text-decoration:none; border:1px solid var(--salbei-tief); cursor:pointer;
  border-radius:var(--rund-gross);
  transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:#374A40; border-color:#374A40}
.knopf svg{width:19px; height:19px; fill:currentColor; flex:none}

.knopf-leer{background:none; color:var(--salbei-tief); border-color:var(--rand)}
.knopf-leer:hover{background:var(--salbei-tief); color:var(--hell); border-color:var(--salbei-tief)}

/* Der warme Knopf steht auf der TIEFEN Terrakotta, nicht auf der hellen:
   weiss auf #C0663A waeren 4,0:1 und damit zu wenig fuer eine Beschriftung
   in 15px. */
.knopf-warm{background:var(--terra-tief); border-color:var(--terra-tief)}
.knopf-warm:hover{background:#813F1F; border-color:#813F1F}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--grund); 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:82px;
}
.marke{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  color:var(--tinte); text-decoration:none; line-height:1.05; flex:none;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.63rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise);
  margin-top:6px;
}

.menue{margin-left:auto; display:flex; gap:26px}
.menue a{
  font-size:.94rem; font-weight:500; text-decoration:none; color:var(--text);
  padding:7px 0; border-bottom:2px solid transparent;
  transition:border-color var(--tempo), color var(--tempo);
}
.menue a:hover{color:var(--tinte); border-bottom-color:var(--salbei)}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:none; border:1px solid var(--rand); border-radius:var(--rund);
  position:relative;
}
.burger i{
  position:absolute; left:12px; width:18px; height:2px; background:var(--tinte);
  border-radius:2px;
  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: mittig, ohne Bild ────────────────────────────────────────────────
   Der Text steht allein. Das ist die Entscheidung dieses Entwurfs: wer mit
   Schmerzen auf eine Praxisseite kommt, will zuerst einen Satz lesen und
   nicht ein Foto ansehen. Das Bild kommt gleich danach — aber eben danach. */
.buehne{padding:clamp(46px, 6vw, 92px) 0 0; text-align:center}
.buehne h1{
  font-size:clamp(2.15rem, 4.4vw, 3.4rem); margin-top:22px;
  max-width:19ch; margin-inline:auto; font-weight:500;
}
/* Der Akzent im h1 ist eine Serifen-Kursive in der tiefen Terrakotta —
   5,6:1 auf dem Grund, also auch als Schrift belastbar. Kein Unterstrich:
   der waere die Handschrift von Entwurf 1. */
.buehne h1 em{font-style:italic; color:var(--terra-tief)}
.buehne .lead{
  margin:22px auto 0; max-width:56ch;
  font-size:clamp(1.04rem, 1.3vw, 1.16rem);
}
.buehne-tun{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px;
}

/* Bildband: drei Aufnahmen nebeneinander, die mittlere hoeher. Kein
   Karussell — die Branche ist voll davon (vier von fuenf Referenzseiten),
   und ein Streifen, der einfach dasteht, ist hier das Unterscheidungsmerkmal. */
.bildband{
  margin-top:clamp(38px, 5vw, 68px);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(10px, 1.4vw, 18px); align-items:end;
}
.bildband figure{
  overflow:clip; border-radius:var(--rund-gross); background:var(--matt);
  aspect-ratio:4/3;
}
.bildband figure:nth-child(2){aspect-ratio:3/4}
.bildband img{width:100%; height:100%; object-fit:cover}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(56px, 6.5vw, 104px) 0}
.block-kopf{max-width:64ch; margin:0 auto clamp(32px, 4vw, 56px); text-align:center}
.block-kopf h2{font-size:clamp(1.75rem, 3.2vw, 2.6rem); margin-top:16px}
.block-kopf .lead{margin:16px auto 0; max-width:58ch}
.block-kopf-links{margin-inline:0; text-align:left}
.block-kopf-links .lead{margin-inline:0}

/* ── Leistungen: weiche Karten ───────────────────────────────────────────── */
.karten{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 24px);
}
.karte{
  background:var(--flaeche); border:var(--haar);
  border-radius:var(--rund-gross); padding:clamp(24px, 2.6vw, 32px);
  display:flex; flex-direction:column;
}
.karte .zier{
  width:34px; height:34px; border-radius:50%;
  background:var(--salbei); opacity:.16; margin-bottom:18px; flex:none;
}
.karte h3{font-size:1.22rem; margin-bottom:10px}
.karte p{font-size:.97rem}
.karte .marke-zahlung{margin-top:auto; padding-top:18px}

/* Wer zahlt — als schlichte Zeile, nicht als Pille. Die Pille waere der Ton
   von Entwurf 3. */
.marke-zahlung{
  display:block; font-size:.8rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
}
.marke-kasse{color:var(--bestaetigt)}
.marke-selbst{color:var(--terra-tief)}

.hinweis-zeile{
  margin-top:26px; background:var(--matt); border-radius:var(--rund-gross);
  padding:20px 24px; font-size:.96rem; max-width:74ch; margin-inline:auto;
}

/* ── Fuer wen: breite Zeilen in einer Karte ───────────────────────────────── */
.wen-karte{
  background:var(--flaeche); border:var(--haar); border-radius:var(--rund-gross);
  padding:clamp(8px, 1.4vw, 18px) clamp(24px, 3vw, 40px);
}
.wen-karte > div{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:6px clamp(24px, 3vw, 46px); align-items:baseline;
  padding:clamp(22px, 2.4vw, 30px) 0; border-top:var(--haar);
}
.wen-karte > div:first-child{border-top:0}
.wen-karte h3{font-size:1.2rem}
.wen-karte p{font-size:.97rem}

/* ── Weg: senkrechte Zeitleiste ───────────────────────────────────────────────
   Von oben nach unten, weil eine Behandlung so erlebt wird — nicht
   nebeneinander wie ein Fahrplan (das ist Entwurf 1). Die Linie laeuft
   durchgehend hinter den Punkten. */
.weg{background:var(--salbei-tief); color:var(--hell-matt); padding:clamp(56px, 6.5vw, 104px) 0}
.weg .rubrik{color:var(--hell-leise)}
.weg .rubrik::before,.weg .rubrik::after{background:var(--terra-hell)}
.weg h2{color:var(--hell); font-size:clamp(1.75rem, 3.2vw, 2.6rem); margin-top:16px}
.weg .lead{margin:16px auto 0; max-width:58ch; color:var(--hell-matt)}

.zeitleiste{
  list-style:none; position:relative;
  max-width:760px; margin:clamp(38px, 4.6vw, 62px) auto 0;
  padding-left:52px;
}
.zeitleiste::before{
  content:""; position:absolute; left:15px; top:10px; bottom:10px;
  width:2px; background:var(--linie-dunkel);
}
.zeitleiste li{position:relative; padding-bottom:clamp(28px, 3.4vw, 42px)}
.zeitleiste li:last-child{padding-bottom:0}
.zeitleiste .punkt{
  position:absolute; left:-52px; top:2px;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--terra-hell); color:var(--tinte);
  font-family:var(--display); font-weight:600; font-size:.94rem;
}
.zeitleiste h3{color:var(--hell); font-size:1.24rem; margin-bottom:9px}
.zeitleiste p{font-size:.96rem; color:var(--hell-matt)}
.zeitleiste .dauer{
  display:block; margin-top:9px; font-size:.84rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hell-leise);
}

.mitbringen{
  max-width:760px; margin:clamp(34px, 4vw, 52px) auto 0;
  border:1px solid var(--linie-dunkel); border-radius:var(--rund-gross);
  padding:clamp(22px, 2.6vw, 32px);
}
.mitbringen h3{color:var(--hell); font-size:1.1rem; margin-bottom:14px}
.mitbringen ul{list-style:none; display:grid; gap:10px}
.mitbringen li{position:relative; padding-left:26px; font-size:.96rem; color:var(--hell-matt)}
.mitbringen li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:9px; height:9px; border-radius:50%; background:var(--terra-hell);
}

/* ── Aufklapper (Kosten und Fragen) ───────────────────────────────────────────
   Ein echtes <details>, kein nachgebautes. Das kann der Browser von Haus
   aus bedienen: Leertaste oeffnet, die Suche im Browser findet auch den
   zugeklappten Text. Nachgebaute Aufklapper koennen das meistens nicht. */
.aufklapper{max-width:820px; margin-inline:auto}
.aufklapper details{
  background:var(--flaeche); border:var(--haar);
  border-radius:var(--rund-gross); margin-bottom:12px; overflow:hidden;
}
.aufklapper details[open]{background:var(--matt)}
.aufklapper summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:18px;
  padding:20px clamp(20px, 2.4vw, 28px);
  font-family:var(--display); font-weight:600; font-size:1.1rem;
  color:var(--tinte); line-height:1.4;
}
.aufklapper summary::-webkit-details-marker{display:none}
/* Das Zeichen ist ein Plus, das sich zum Minus dreht — ein Pfeil waere
   mehrdeutig (nach unten? weiter?). */
.aufklapper summary::after{
  content:""; margin-left:auto; flex:none;
  width:20px; height:20px; margin-top:5px;
  background:
    linear-gradient(var(--terra-tief), var(--terra-tief)) 50% 50% / 14px 2px no-repeat,
    linear-gradient(var(--terra-tief), var(--terra-tief)) 50% 50% / 2px 14px no-repeat;
  transition:rotate var(--tempo);
}
.aufklapper details[open] summary::after{
  rotate:90deg;
  background:linear-gradient(var(--terra-tief), var(--terra-tief)) 50% 50% / 14px 2px no-repeat;
}
.aufklapper summary:hover{color:var(--terra-tief)}
.aufklapper .inhalt{padding:0 clamp(20px, 2.4vw, 28px) 24px; max-width:66ch}
.aufklapper .inhalt p{font-size:.97rem}
.aufklapper .inhalt p + p{margin-top:12px}

/* Preiszeilen im geoeffneten Aufklapper. Eine Beschreibungsliste, weil hier
   tatsaechlich Begriff und Wert gemeint sind — keine Tabelle, die ist
   Entwurf 1. */
.preise{margin:14px 0 0; border-top:var(--haar)}
.preise > div{
  display:flex; flex-wrap:wrap; gap:4px 18px; justify-content:space-between;
  padding:12px 0; border-bottom:var(--haar);
}
.preise dt{font-weight:600; color:var(--tinte); font-size:.97rem}
.preise dd{font-size:.97rem; color:var(--text); font-variant-numeric:tabular-nums}

.kosten-recht{
  max-width:820px; margin:26px auto 0; background:var(--matt);
  border-radius:var(--rund-gross); border:1px solid var(--linie);
  padding:22px clamp(20px, 2.4vw, 28px);
}
.kosten-recht h3{font-size:1.06rem; margin-bottom:10px}
.kosten-recht p{font-size:.95rem}
.kosten-recht p + p{margin-top:10px}
.kosten-recht a{color:var(--terra-tief); text-underline-offset:3px}

/* ── Galerie: Streifen zum Wischen ────────────────────────────────────────────
   Waagerecht scrollbar mit Einrasten. Bewusst KEIN Karussell mit Pfeilen
   und Automatik: es bewegt sich nur, wenn jemand schiebt. Das ist der
   Unterschied zwischen einem Streifen und dem, was die Branche macht. */
.streifen{
  display:flex; gap:clamp(12px, 1.6vw, 20px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; scrollbar-width:thin;
  /* damit die aeussersten Bilder am Rand des Lesebereichs einrasten */
  scroll-padding-inline:0;
}
.streifen figure{
  flex:0 0 clamp(260px, 34%, 400px); scroll-snap-align:start;
  border-radius:var(--rund-gross); overflow:clip; background:var(--matt);
  aspect-ratio:4/3;
}
.streifen img{width:100%; height:100%; object-fit:cover}
.streifen-hinweis{
  margin-top:12px; font-size:.86rem; color:var(--leise); text-align:center;
}

/* ── Kontakt: breite Karte in der Mitte ───────────────────────────────────── */
.kontakt-karte{
  max-width:820px; margin-inline:auto;
  background:var(--flaeche); border:var(--haar);
  border-radius:var(--rund-gross); padding:clamp(28px, 3.4vw, 46px);
}
.formular{margin-top:6px}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block; font-size:.82rem; font-weight:600; letter-spacing:.06em;
  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 der
   weissen Fuellung nur 1,3:1 — man saehe das Feld praktisch nicht.
   --rand liegt bei 4,0:1 und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 16px; background:var(--flaeche);
  border:1px solid var(--rand); border-radius:var(--rund);
  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:3px solid var(--terra-tief); outline-offset:1px; border-color:transparent;
}
.feld textarea{min-height:132px; 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% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:46px;
}
.form-fuss{margin-top:16px; font-size:.88rem; color:var(--leise)}
.form-fuss a{color:var(--terra-tief)}

/* Die Daten als Zeile UNTER der Karte — nicht als Kasten daneben.
   Vier gleich breite Felder, durch Haarlinien getrennt. */
.daten-zeile{
  max-width:1000px; margin:clamp(30px, 3.4vw, 46px) auto 0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0 clamp(20px, 2.4vw, 34px);
}
.daten-zeile > div{
  display:grid; grid-template-columns:22px minmax(0, 1fr); gap:12px;
  padding-left:clamp(20px, 2.4vw, 34px); border-left:var(--haar);
}
.daten-zeile > div:first-child{padding-left:0; border-left:0}
.daten-zeile svg{width:20px; height:20px; fill:var(--salbei); margin-top:4px}
.daten-zeile b{
  display:block; font-weight:600; color:var(--tinte); font-size:.98rem;
  line-height:1.4;
}
.daten-zeile b a{text-decoration:none}
.daten-zeile b a:hover{text-decoration:underline}
.daten-zeile small{display:block; font-size:.86rem; color:var(--leise); margin-top:4px}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--salbei-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, 52px);
}
.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:.74rem; 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, 54px); 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 ───────────────────────────────────────────────────────
   Gerichtet, nicht gehuepft: von unten nach oben, gestaffelt ueber --i. Der
   Weg ist kuerzer und die Zeit laenger als in Entwurf 1 — das ist der ganze
   Unterschied zwischen „sportlich" und „ruhig".
   Wer Bewegung nicht vertraegt, sieht am Ende der Datei, was passiert. */
html.js .zeig{opacity:0; translate:0 12px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .75s ease calc(var(--i, 0) * 90ms),
             translate .75s cubic-bezier(.24,.62,.34,1) calc(var(--i, 0) * 90ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .karten{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .daten-zeile{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 0}
  .daten-zeile > div:nth-child(odd){padding-left:0; border-left:0}
  .wen-karte > div{grid-template-columns:1fr; gap:8px}
}

@media (max-width:820px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--grund); 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); border-bottom:0; font-size:1.02rem}
  .kopf .knopf{display:none}
  .burger{display:block}
  /* Das Bildband wird zum Paar: das dritte Bild waere in dieser Breite nur
     noch ein Streifen. */
  .bildband{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .bildband figure:nth-child(2){aspect-ratio:4/3}
  .bildband figure:nth-child(3){display:none}
}

@media (max-width:640px){
  body{font-size:17px}
  .karten{grid-template-columns:1fr}
  .bildband{grid-template-columns:1fr}
  .bildband figure:nth-child(3){display:block}
  .feld-paar{grid-template-columns:1fr; gap:0}
  .daten-zeile{grid-template-columns:1fr}
  .fuss-gitter{grid-template-columns:1fr}
  .zeitleiste{padding-left:46px}
  .zeitleiste .punkt{left:-46px; width:30px; height:30px}
  .streifen figure{flex:0 0 78%}

  /* 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}
  body{padding-bottom:62px}
}

/* Die Zielgruppe hat Schmerzen, und ein Teil hat Schwindel- oder
   Migraene-Diagnosen. Das hier ist deshalb keine Kuer, sondern Pflicht:
   wer im System „weniger Bewegung" eingestellt hat, bekommt gar keine. */
@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; scroll-behavior:auto}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Dieselbe Radius-Stufe, dieselbe Terrakotta, dieselbe Haarlinie wie auf der
   Hauptseite — ein Rechtstext, der aussieht wie von einer anderen Seite,
   wirkt zugekauft. Der Lesetext bleibt bei 68 Zeichen. */
.rechts-kopf{padding:clamp(42px, 5vw, 74px) 0 clamp(22px, 3vw, 36px)}
.rechts-kopf h1{font-size:clamp(2rem, 4vw, 3rem); margin-top:14px; font-weight:500}
.rechts-kopf .lead{margin-top:16px; max-width:58ch; color:var(--text)}
/* Deutsche Rechtsbegriffe sind lang: „Datenschutzerklaerung",
   „Umsatzsteuer-Identifikationsnummer", „Verbraucherstreitbeilegungsgesetz".
   Auf einem 375px-Bildschirm passt so ein Wort in keine Zeile und wuerde sonst
   ueber den Rand hinausgeschoben — der Text waere abgeschnitten. hyphens trennt
   nach den Regeln der Sprache (lang="de" steht im html-Tag, sonst greift es
   nicht), overflow-wrap ist das Netz darunter fuer Browser ohne Trennmuster.
   Beides vererbt sich, die eine Regel auf dem Behaelter deckt alle Absaetze,
   Listen und Adressen darin ab. */
.rechts-kopf h1,.rechtstext{hyphens:auto; overflow-wrap:break-word}
.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, 2vw, 1.65rem); margin-bottom:14px}
.rechtstext h3{font-size:1.04rem; margin:22px 0 8px}
.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:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--salbei);
}
.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(--terra-tief); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--matt); border:1px solid var(--linie);
  border-radius:var(--rund-gross); 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}
.rechts-hinweis p + p{margin-top:10px}
/* 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:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--salbei-tief); border-bottom:1px solid var(--salbei);
  padding-bottom:5px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--terra-tief); border-bottom-color:var(--terra)}