/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 3 — „Studio & Präzision"
   Praxis Lohbach · Physiotherapie Bielefeld

   Haltung: klar, gebaut, ohne Weichzeichner. Dieser Entwurf ist fuer die
   Praxis gedacht, die auch Selbstzahler anspricht — Osteopathie, CMD,
   Leistungsdiagnostik. Er arbeitet mit harten Kanten, grossen Platten und
   viel Weissraum. Nichts ist gerundet, weil die Kante hier die Aussage ist:
   hier wird gemessen, nicht gestreichelt.

   Der Teal stammt gemessen von der einzigen Referenzseite mit echter
   Choreografie. Wichtig — und deshalb hier notiert, damit es niemand
   versehentlich anders macht: Der helle Teal `#00A09A` kommt auf dem Grund
   nur auf 3,1:1. Das reicht fuer einen Strich, eine Flaeche oder ein Icon,
   NICHT fuer Schrift. Sobald Teal Text ist, wird `--teal-tief` genommen.
   Dasselbe gilt fuer den Pfirsich: er lebt ausschliesslich auf der dunklen
   Platte, wo er 8,0:1 erreicht — auf hellem Grund waeren es 1,8:1.

   Radius 0–4px. Nicht weich (das waere Entwurf 2), nicht halbweich (das
   waere Entwurf 1).

   Aufbau, worin sich dieser Entwurf von 1 und 2 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — Bild ganzflaechig, eine harte weisse Platte darauf
                    gelegt und ueber die Kante hinausgeschoben.
                    (Entwurf 1: geteilt, Text links / Bild rechts.
                    Entwurf 2: mittiger Text ganz ohne Bild.)
     · Leistungen — EINE grosse Platte, innen zweispaltig gesetzt, die
                    Eintraege nur durch Haarlinien getrennt.
                    (Entwurf 1: nummerierte Reihe. Entwurf 2: Karten im
                    Raster.)
     · Fuer wen   — Randnotizen: schmale Marke links aussen, Text rechts.
                    (Entwurf 1: drei Spalten. Entwurf 2: breite Zeilen in
                    einer Karte.)
     · Weg        — vier Kacheln mit sehr grosser Ziffer, nebeneinander.
                    (Entwurf 1: waagerechte Bahn auf einer Linie.
                    Entwurf 2: senkrechte Zeitleiste.)
     · Kosten     — zwei Spalten in einer Platte, links Kasse, rechts
                    Selbstzahler. (Entwurf 1: Tabelle. Entwurf 2: Aufklapper.)
     · Galerie    — Mauerwerk aus drei Spalten mit unterschiedlichen Hoehen.
                    (Entwurf 1: 2x2. Entwurf 2: Wischstreifen.)
     · Fragen     — Karten im Raster. (Entwurf 1: offen zweispaltig.
                    Entwurf 2: Aufklapper.)
     · Kontakt    — Daten LINKS auf der dunklen Platte, Formular rechts.
                    (Entwurf 1: umgekehrt. Entwurf 2: Karte mittig.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Physiotherapie), Stil C.
   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:     #FBFAF7;  /* Seitengrund — Papier mit einem Hauch Waerme  */
  --flaeche:   #FFFFFF;  /* Platten, Karten, Formularfelder              */
  --matt:      #F4F5F2;  /* ruhige Kaesten, Tabellenkopf                 */

  /* Schrift und dunkle Traegerflaeche. Beides derselbe Wert: die Tinte ist
     hier zugleich die Farbe der dunklen Platten. Eine zusaetzliche
     „Fast-Schwarz-Variante" waere eine Farbe zu viel. */
  --tinte:     #1C2B2A;  /* Ueberschriften und dunkle Platten (Grund 14,1:1) */
  --text:      #5A6968;  /* Fliesstext      (Grund 5,5:1 · Weiss 5,8:1 · matt 5,3:1) */
  --leise:     #5F6E6D;  /* Meta            (Grund 5,1:1 · Weiss 5,3:1 · matt 4,9:1) */

  /* Auf der dunklen Platte */
  --hell:      #FFFFFF;  /* (auf Tinte 14,7:1)                           */
  --hell-matt: #C8D2D0;  /* Fliesstext auf Tinte (9,5:1)                 */
  --hell-leise:#B4C2C0;  /* Meta auf Tinte       (8,0:1)                 */

  /* Buntfarben. Zwei Stufen des Teal, weil die gemessene Stufe zu hell fuer
     Schrift ist — siehe Kopfkommentar. */
  --teal:      #00A09A;  /* gemessen Medwest · Striche, Flaechen, Icons  (Grund 3,1:1 — kein Text!) */
  --teal-tief: #00726E;  /* wenn Teal Text ist oder Text traegt (Weiss 5,8:1 · Grund 5,5:1) */
  --teal-hell: #A9D1CE;  /* gemessen Medwest · grosse ruhige Flaeche.
                            ACHTUNG: darauf ist NUR --tinte lesbar (8,9:1);
                            --text kaeme nur auf 3,5:1. */
  --pfirsich:  #F6AF87;  /* gemessen Medwest · ausschliesslich auf der dunklen
                            Platte (dort 8,0:1) — auf hellem Grund 1,8:1 */
  --pfirsich-tief:#A85526; /* wenn der warme Ton Text ist (Grund 5,0:1)  */

  /* Bestaetigung — der gruene Haken der Kasse. Der tiefe Teal tut das; eine
     dritte Buntfarbe waere eine zu viel. */
  --bestaetigt:#00726E;

  /* Linien */
  --linie:        #E5E7E4;
  --linie-dunkel: #374644;
  --haar:1px solid #E5E7E4;
  --rand:         #728080; /* Umriss bedienbarer Elemente (Weiss 4,1:1 · Grund 3,9:1) */

  /* Schriften. Epilogue hat leicht eigenwillige Buchstabenformen — das ist
     der Charakter, den dieser Entwurf braucht, damit die Strenge nicht kalt
     wirkt. Geologica daneben ist bei der Referenzseite gemessen worden und
     laeuft hier auf 18px. */
  --display:'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift:'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius. Die Spanne aus der Recherche: praktisch keine. */
  --kante:0;
  --rund:2px;
  --rund-gross:4px;

  --spalte:1280px;
  --tempo:.45s cubic-bezier(.2,.7,.3,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.66;
  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:700; line-height:1.08}
h1,h2{letter-spacing:-.03em}
h3{letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--teal-tief); outline-offset:3px; border-radius:0}

.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(--tinte); color:var(--hell);
  padding:10px 16px; border-radius:0;
}

/* Rubrik: gesperrte Kapitaelchen mit einer vorangestellten Ziffernmarke aus
   zwei Teal-Quadraten. Weder Strich (Entwurf 1) noch umschliessende Linien
   (Entwurf 2) — ein Raster-Zeichen. */
.rubrik{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--schrift); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--leise);
}
.rubrik::before{
  content:""; flex:none; width:16px; height:8px;
  background:
    linear-gradient(var(--teal), var(--teal)) 0 0 / 7px 8px no-repeat,
    linear-gradient(var(--teal), var(--teal)) 100% 0 / 7px 8px no-repeat;
}
.rubrik-hell{color:var(--hell-leise)}
.rubrik-hell::before{
  background:
    linear-gradient(var(--pfirsich), var(--pfirsich)) 0 0 / 7px 8px no-repeat,
    linear-gradient(var(--pfirsich), var(--pfirsich)) 100% 0 / 7px 8px no-repeat;
}

/* ── 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:16px 30px; background:var(--tinte); color:var(--hell);
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border:1px solid var(--tinte); cursor:pointer;
  border-radius:var(--kante);
  transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:var(--teal-tief); border-color:var(--teal-tief)}
.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)}

/* Der Teal-Knopf steht auf der TIEFEN Stufe. Weiss auf #00A09A waeren
   3,2:1 — deutlich zu wenig fuer eine Beschriftung. */
.knopf-teal{background:var(--teal-tief); border-color:var(--teal-tief)}
.knopf-teal:hover{background:#00534F; border-color:#00534F}

/* ── 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:78px;
}
.marke{
  font-family:var(--display); font-weight:700; font-size:1.34rem;
  color:var(--tinte); text-decoration:none; letter-spacing:-.035em;
  line-height:1.05; flex:none; text-transform:uppercase;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.62rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--leise);
  margin-top:6px;
}

.menue{margin-left:auto; display:flex; gap:0}
.menue a{
  font-size:.86rem; font-weight:500; letter-spacing:.04em;
  text-decoration:none; color:var(--text);
  padding:9px 14px; position:relative;
  transition:color var(--tempo), background var(--tempo);
}
.menue a:hover{color:var(--hell); background:var(--tinte)}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:none; border:1px solid var(--rand); border-radius:0;
  position:relative;
}
.burger i{
  position:absolute; left:12px; width:18px; height:2px; 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: Bild ganzflaechig, Platte darauf ────────────────────────────────
   Das Bild laeuft ueber die volle Breite, die Textplatte liegt hart darauf
   und ragt unten darueber hinaus. Kein Farbschleier ueber dem Foto: die
   Schrift steht auf der Platte, nicht auf dem Bild — damit haengt die
   Lesbarkeit nicht daran, wie hell das Foto zufaellig ist. */
.buehne{position:relative; padding-bottom:clamp(40px, 5vw, 76px)}
.buehne-bild{
  height:clamp(280px, 42vw, 520px); background:var(--matt);
  overflow:clip;
}
.buehne-bild img{width:100%; height:100%; object-fit:cover}
.buehne .platte{
  position:relative; margin-top:clamp(-120px, -9vw, -60px);
  background:var(--flaeche); border:var(--haar);
  padding:clamp(30px, 4vw, 60px);
  max-width:min(100%, 860px);
}
.buehne h1{font-size:clamp(2.1rem, 4.6vw, 3.6rem); margin-top:20px}
/* Der Akzent im h1 ist ein Kasten in Teal-hell HINTER der Schrift. Die
   Schrift bleibt Tinte und kommt darauf auf 8,9:1 — deutlich mehr als
   noetig. Teal als Schriftfarbe waere hier der Fehler. */
.buehne h1 em{
  font-style:normal; box-decoration-break:clone;
  background:var(--teal-hell); padding:0 .12em; margin:0 -.06em;
}
.buehne .lead{margin-top:20px; max-width:56ch; font-size:clamp(1.02rem, 1.3vw, 1.14rem)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* ── Faktenband: schmale Leiste unter der Buehne ──────────────────────────── */
.band{border-block:var(--haar); background:var(--flaeche)}
.band ul{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr))}
.band li{padding:22px clamp(16px, 2vw, 28px); border-left:var(--haar)}
.band li:first-child{padding-left:0; border-left:0}
.band b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.1rem, 1.8vw, 1.34rem); color:var(--tinte);
  line-height:1.18; letter-spacing:-.02em;
}
.band span{display:block; margin-top:7px; font-size:.88rem; color:var(--leise)}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(56px, 6.5vw, 110px) 0}
.block-kopf{max-width:68ch; margin-bottom:clamp(30px, 3.6vw, 50px)}
.block-kopf h2{font-size:clamp(1.8rem, 3.6vw, 2.9rem); margin-top:16px}
.block-kopf .lead{margin-top:16px; max-width:60ch}

/* ── Leistungen: eine Platte, innen zweispaltig ───────────────────────────── */
.platte{background:var(--flaeche); border:var(--haar)}
.leistungs-platte{
  padding:clamp(8px, 1.2vw, 16px) clamp(22px, 3vw, 46px);
  columns:2; column-gap:clamp(30px, 4vw, 64px); column-rule:var(--haar);
}
.leistungs-platte > div{
  break-inside:avoid; padding:clamp(22px, 2.4vw, 30px) 0;
  border-bottom:var(--haar);
}
/* Bei zwei Spalten sind die letzten Eintraege der ersten und der zweiten
   Spalte gemeint — die lassen sich nicht zuverlaessig treffen. Deshalb
   bekommt der letzte Eintrag der Liste die Linie weg, und in der ersten
   Spalte bleibt sie stehen. Das ist ehrlicher als ein Trick, der bei
   ungerader Anzahl bricht. */
.leistungs-platte > div:last-child{border-bottom:0}
.leistungs-platte h3{
  font-size:1.16rem; margin-bottom:9px;
  display:flex; align-items:baseline; gap:12px;
}
.leistungs-platte h3::before{
  content:""; flex:none; width:9px; height:9px; background:var(--teal);
  translate:0 -1px;
}
.leistungs-platte p{font-size:.96rem; max-width:44ch}
.marke-zahlung{
  display:inline-block; margin-top:12px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.marke-kasse{color:var(--bestaetigt)}
.marke-selbst{color:var(--pfirsich-tief)}

.hinweis-zeile{
  margin-top:26px; max-width:76ch; font-size:.95rem;
  background:var(--matt); border-left:4px solid var(--teal); padding:20px 24px;
}

/* ── Fuer wen: Randnotizen ───────────────────────────────────────────────────
   Die Marke steht aussen im Rand, der Text laeuft ruhig daneben weiter —
   wie eine Notiz an einem Befundbogen. */
.randnotizen{display:grid; gap:0}
.randnotizen > div{
  display:grid; grid-template-columns:minmax(0, 220px) minmax(0, 1fr);
  gap:10px clamp(28px, 4vw, 70px);
  padding:clamp(26px, 3vw, 38px) 0; border-top:var(--haar);
}
.randnotizen > div:last-child{border-bottom:var(--haar)}
.randnotizen .marke-rand{
  font-family:var(--schrift); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal-tief);
  padding-top:6px;
}
.randnotizen h3{font-size:1.34rem; margin-bottom:10px}
.randnotizen p{font-size:.98rem; max-width:62ch}

/* ── Weg: vier Kacheln mit grosser Ziffer ─────────────────────────────────── */
.weg{background:var(--tinte); color:var(--hell-matt); padding:clamp(56px, 6.5vw, 110px) 0}
.weg h2{color:var(--hell); font-size:clamp(1.8rem, 3.6vw, 2.9rem); margin-top:16px}
.weg .lead{margin-top:16px; max-width:60ch; color:var(--hell-matt)}

.stufen{
  list-style:none; margin-top:clamp(34px, 4vw, 58px);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px; background:var(--linie-dunkel); border:1px solid var(--linie-dunkel);
}
.stufen li{background:var(--tinte); padding:clamp(24px, 2.6vw, 34px)}
.stufen .zahl{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1;
  color:var(--pfirsich); letter-spacing:-.05em; margin-bottom:16px;
}
.stufen h3{color:var(--hell); font-size:1.1rem; margin-bottom:10px}
.stufen p{font-size:.93rem; color:var(--hell-matt)}
.stufen .dauer{
  display:block; margin-top:12px; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hell-leise);
}

.mitbringen{
  margin-top:clamp(30px, 3.4vw, 46px);
  border:1px solid var(--linie-dunkel); padding:clamp(22px, 2.6vw, 32px);
}
.mitbringen h3{color:var(--hell); font-size:1.06rem; margin-bottom:14px}
.mitbringen ul{
  list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px clamp(24px, 3vw, 46px);
}
.mitbringen li{position:relative; padding-left:24px; font-size:.94rem; color:var(--hell-matt)}
.mitbringen li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; background:var(--pfirsich);
}

/* ── Kosten: zwei Spalten in einer Platte ─────────────────────────────────── */
.kosten-platte{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  background:var(--linie); gap:1px; border:var(--haar);
}
.kosten-spalte{background:var(--flaeche); padding:clamp(26px, 3vw, 42px)}
/* Die linke Spalte ist die Kassenspalte und bekommt den ruhigen Teal-Grund.
   Darauf ist NUR die Tinte lesbar (8,9:1) — deshalb steht hier nur die
   Ueberschriftenzeile darauf und nicht der Fliesstext. */
.kosten-spalte .kopfzeile{
  background:var(--teal-hell); color:var(--tinte);
  margin:calc(-1 * clamp(26px, 3vw, 42px)) calc(-1 * clamp(26px, 3vw, 42px)) 26px;
  padding:16px clamp(26px, 3vw, 42px);
  font-family:var(--display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.01em;
}
.kosten-spalte .kopfzeile-matt{background:var(--matt)}
.kosten-spalte p{font-size:.95rem}
.kosten-spalte p + p{margin-top:12px}
.preise{margin-top:20px; 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:500; color:var(--tinte); font-size:.94rem}
.preise dd{font-size:.94rem; color:var(--text); font-variant-numeric:tabular-nums}

.kosten-recht{
  margin-top:26px; background:var(--matt); border-left:4px solid var(--teal);
  padding:22px 26px; max-width:78ch;
}
.kosten-recht h3{font-size:1.04rem; margin-bottom:10px}
.kosten-recht p{font-size:.94rem}
.kosten-recht p + p{margin-top:10px}
.kosten-recht a{color:var(--teal-tief); text-underline-offset:3px}

/* ── Galerie: Mauerwerk aus drei Spalten ─────────────────────────────────────
   Kein echtes Masonry (das braucht JavaScript oder eine Eigenschaft, die
   noch nicht ueberall da ist), sondern ein Raster mit fest gesetzten
   Bildverhaeltnissen. Sieht aus wie gemauert und bleibt vorhersehbar. */
.mauer{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(8px, 1vw, 14px);
}
.mauer figure{overflow:clip; background:var(--matt)}
.mauer img{
  width:100%; height:100%; object-fit:cover; scale:1;
  transition:scale 1s cubic-bezier(.2,.7,.3,1);
}
.mauer figure:hover img{scale:1.03}
.mauer .hoch{grid-row:span 2; aspect-ratio:3/4}
.mauer .quer{aspect-ratio:3/2}
.mauer .breit{grid-column:span 2; aspect-ratio:3/1}

/* ── Fragen: Karten im Raster ─────────────────────────────────────────────── */
.fragen-karten{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px; background:var(--linie); border:var(--haar);
}
.fragen-karten > div{background:var(--flaeche); padding:clamp(24px, 2.6vw, 34px)}
.fragen-karten h3{font-size:1.04rem; line-height:1.34; margin-bottom:12px}
.fragen-karten p{font-size:.94rem}

/* ── Kontakt: Daten links auf Dunkel, Formular rechts ─────────────────────── */
.kontakt-gitter{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  border:var(--haar); background:var(--linie); gap:1px;
}
.kontakt-daten{
  background:var(--tinte); color:var(--hell-matt);
  padding:clamp(28px, 3.2vw, 44px);
}
.kontakt-daten h2{color:var(--hell); font-size:clamp(1.6rem, 2.6vw, 2.1rem); margin-top:16px}
.kontakt-daten > p{margin-top:16px; font-size:.96rem; color:var(--hell-matt)}
.kontakt-liste{list-style:none; margin-top:26px}
.kontakt-liste li{
  display:grid; grid-template-columns:22px minmax(0, 1fr); gap:14px;
  padding:16px 0; border-top:1px solid var(--linie-dunkel);
}
.kontakt-liste li:first-child{border-top:0; padding-top:0}
.kontakt-liste svg{width:18px; height:18px; fill:var(--pfirsich); margin-top:5px}
.kontakt-liste b{display:block; font-weight:600; color:var(--hell); font-size:.98rem}
.kontakt-liste b a{text-decoration:none}
.kontakt-liste b a:hover{text-decoration:underline}
.kontakt-liste small{display:block; font-size:.86rem; color:var(--hell-leise); margin-top:4px}

.kontakt-form{background:var(--flaeche); padding:clamp(28px, 3.2vw, 44px)}
.kontakt-form h3{font-size:1.3rem; margin-bottom:6px}
.kontakt-form > p{font-size:.95rem; margin-bottom:24px; max-width:52ch}

/* Der Abstand ueber dem Formular faellt hier kleiner aus als in den anderen
   beiden Entwuerfen — die weisse Platte bringt schon eigenes Polster mit. */
.formular{margin-top:4px}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block; font-size:.76rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); 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 der
   weissen Fuellung nur 1,2:1 — man saehe das Feld praktisch nicht.
   --rand liegt bei 4,1:1 und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 15px; background:var(--flaeche);
  border:1px solid var(--rand); border-radius:var(--kante);
  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(--teal-tief); outline-offset:1px; border-color:transparent;
}
.feld textarea{min-height:128px; 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:56ch}
.form-fuss a{color:var(--teal-tief)}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--tinte); 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:.93rem}
.fuss h3{
  font-family:var(--schrift); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; 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, 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:.82rem; color:var(--hell-leise);
}

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

/* ── Sanftes Einblenden ───────────────────────────────────────────────────────
   Gerichtet, nicht gehuepft: von unten nach oben, gestaffelt ueber --i. Der
   kuerzeste Weg der drei Entwuerfe, dafuer straffer — das passt zur Kante.
   Wer Bewegung nicht vertraegt, sieht am Ende der Datei, was passiert. */
html.js .zeig{opacity:0; translate:0 14px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .5s ease calc(var(--i, 0) * 70ms),
             translate .5s cubic-bezier(.2,.7,.3,1) calc(var(--i, 0) * 70ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .stufen{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .fragen-karten{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .kontakt-gitter{grid-template-columns:1fr}
  .randnotizen > div{grid-template-columns:1fr; gap:4px}
  .randnotizen .marke-rand{padding-top:0}
}

@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); font-size:1.02rem}
  .menue a:hover{background:none; color:var(--teal-tief)}
  .kopf .knopf{display:none}
  .burger{display:block}
  .leistungs-platte{columns:1}
  .kosten-platte{grid-template-columns:1fr}
  /* Das Mauerwerk verliert die dritte Spalte; die Spannen werden
     zurueckgesetzt, sonst reissen Loecher auf. */
  .mauer{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .mauer .breit{grid-column:span 2; aspect-ratio:2/1}
  .mauer .hoch{grid-row:span 1; aspect-ratio:3/2}
}

@media (max-width:640px){
  body{font-size:17px}
  .band ul{grid-template-columns:1fr}
  .band li{padding:16px 0; border-left:0; border-top:var(--haar)}
  .band li:first-child{border-top:0}
  .stufen{grid-template-columns:1fr}
  .fragen-karten{grid-template-columns:1fr}
  .mauer{grid-template-columns:1fr}
  .mauer .breit,.mauer .hoch,.mauer .quer{grid-column:auto; grid-row:auto; aspect-ratio:3/2}
  .mitbringen ul{grid-template-columns:1fr}
  .feld-paar{grid-template-columns:1fr; gap:0}
  .fuss-gitter{grid-template-columns:1fr}
  .buehne .platte{margin-top:-40px}

  /* 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{padding:15px 10px; font-size:.88rem}
  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}
  .mauer img{scale:1 !important}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Dieselbe Kante, derselbe Teal, 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}
.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.26rem, 2vw, 1.58rem); margin-bottom:14px}
.rechtstext h3{font-size:1rem; 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; background:var(--teal);
}
.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(--teal-tief); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--matt); border-left:4px solid var(--tinte);
  padding:20px 24px; margin:26px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.93rem; 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:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinte); border-bottom:2px solid var(--teal);
  padding-bottom:5px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--teal-tief)}