/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 1 — „Eisenwerk"
   Studio Weberei · Fitnessstudio in Kassel-Bettenhausen

   Haltung: sehr dunkel, harter Kontrast, kein einziger runder Winkel. Diese
   Fassung ist fuer das Studio gebaut, das ernsthaftes Training verkauft —
   Freihantel, lange Oeffnungszeiten, Leute die wissen was sie tun. Der Grund
   ist warmes Anthrazit (#0F0D0B) und nicht Schwarz: Schwarz plus Neon ist das
   Bodybuilder-Klischee, warmes Anthrazit traegt Fotos besser und wirkt nach
   Hantelgummi statt nach Werbeplakat.

   Radius durchgehend 0px. Keine Ausnahme, auch nicht beim Knopf — die
   Kantigkeit IST die Aussage dieses Entwurfs.

   Aufbau, worin sich dieser Entwurf von 2 und 3 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne   — Vollbild-Foto mit schwerer Verlaufs-Ueberlagerung, Text
                  darauf, Versalien.
                  (Entwurf 2: hell, Text links neben zwei weichen Bildkarten.
                  Entwurf 3: alles mittig, riesige Ziffer, Bildband darunter.)
     · Tarife   — eine nuechterne Tabelle mit Kopfzeile und Zeilenrastern.
                  (Entwurf 2: drei breite Aufklapper-Zeilen. Entwurf 3: drei
                  aufrecht stehende Platten nebeneinander.)
     · Kursplan — Tagesbloecke untereinander auf Haarlinien.
                  (Entwurf 2: echtes Wochenraster mit sechs Spalten.
                  Entwurf 3: mittige Liste mit grosser Uhrzeit links.)
     · Rundgang — dreispaltiges Raster, randlos, ohne Bildunterschrift.
                  (Entwurf 2: waagerechte Wischleiste. Entwurf 3: grosse
                  durchnummerierte Kacheln.)
     · Kontakt  — Formular in einem umrandeten Kasten, Daten als Leiste
                  darunter.
                  (Entwurf 2: drei Kontaktkarten oben, Formular darunter.
                  Entwurf 3: Formular mittig in einer Platte.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Fitnessstudio), Linie
   „Eisen". Die Kombination dunkler Grund + genau ein warmer Signalakzent +
   Radius 0 stammt aus der Auswertung von Spree Intense Fitness und Phive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────────
   Alles Farbige haengt an diesen Werten. Die Verhaeltnisse in Klammern sind
   nachgerechnet (WCAG-Formel), nicht geschaetzt. */
:root{
  /* Flaechen */
  --grund:    #0F0D0B;   /* Seitengrund — warmes Anthrazit, kein Schwarz    */
  --flaeche:  #1A1613;   /* Karten, Tabelle, Formular                       */
  --flaeche-2:#221D19;   /* abgesetzte Zeile, Hover                         */

  /* Schrift */
  --tinte:    #F5F2ED;   /* Ueberschriften   (auf Grund 17,4:1 · Flaeche 16,1:1) */
  --text:     #A8A199;   /* Fliesstext       (auf Grund  7,6:1 · Flaeche  7,0:1) */
  --leise:    #8C857D;   /* Meta, Beschriftung (auf Grund 5,3:1 · Flaeche 4,9:1) */

  /* Der eine Akzent. „Hantelorange", hell genug fuer Fliesstext auf Dunkel. */
  --signal:   #FF7F33;   /* auf Grund 7,7:1                                 */
  --auf-signal:#0F0D0B;  /* Schrift auf Orange (7,7:1)                      */
  --ja:       #34B36B;   /* „inklusive", „monatlich kuendbar" (Grund 7,2:1) */

  /* Linien und Umrisse */
  --linie:    #2B2521;   /* Trennlinien — nie fuer Text                     */
  --rand:     #6B6157;   /* Umriss bedienbarer Elemente (Grund 3,2:1)       */

  /* Schriften. Archivo Black ist eine breite, schwere Grotesk — Hallen-
     beschriftung, Gewichtsscheibe, Trikotnummer. Sie traegt Versalien, ohne
     zu verklumpen. Inter daneben ist bewusst neutral und in 17px gesetzt,
     weil ein grosser Teil der Zielgruppe ueber 50 ist.
     Bewusst NICHT Bebas Neue — die Flyer-Schrift jedes zweiten Studios. */
  --display:'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --schrift:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1240px;
  --tempo:.42s 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:17px; 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}
/* Archivo Black in Versalien ist sehr breit. Ein deutsches Wort wie
   „PRAeVENTIONSKURSE" passt auf einem 375px-Bildschirm in keine Zeile und
   schiebt die ganze Seite nach rechts. hyphens trennt es nach den Regeln der
   Sprache (lang="de" steht im html-Tag), overflow-wrap ist das Netz darunter. */
h1,h2,h3{
  font-family:var(--display); color:var(--tinte); font-weight:400;
  line-height:1.02; text-transform:uppercase; letter-spacing:-.01em;
  hyphens:auto; overflow-wrap:break-word;
}
:focus-visible{outline:2px solid var(--signal); 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(--signal); color:var(--auf-signal); padding:10px 16px; font-weight:600;
}

/* Rubrik: gesperrte Versalien in der Textschrift. Ein Motiv, ueberall
   dasselbe — ueber jeder Ueberschrift und in jeder Fusszeile. */
.rubrik{
  display:block; font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--signal);
}

/* Alle Zahlenkolonnen fluchten. Die Hauptaufgabe dieser Seite ist der
   Preisvergleich — dafuer muessen Ziffern gleich breit sein. */
.zahl,table,.plan-zeit,.tarif-tab td{font-variant-numeric:tabular-nums}

/* ── Entwurfs-Band ────────────────────────────────────────────────────────── */
.entwurf-band{
  background:var(--signal); color:var(--auf-signal);
  font-size:.82rem; line-height:1.45; padding:9px 0; font-weight:500;
}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px}
.entwurf-band b{font-weight:700}
.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(--signal); color:var(--auf-signal);
  font-size:.86rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--signal); border-radius:0;
  cursor:pointer; transition:background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:#FF9557; border-color:#FF9557}
.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(--grund); border-color:var(--tinte)}

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

.menue{margin-left:auto; display:flex; gap:22px}
.menue a{
  font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; color:var(--text); padding:6px 0; position:relative;
}
.menue a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--signal); transition:right var(--tempo);
}
.menue a:hover{color:var(--tinte)}
.menue a:hover::after{right:0}

/* Der Oeffnungs-Chip ist laut Recherche die meistgesuchte Einzelinformation
   der Branche — deshalb steht er im Kopf und nicht im Impressum. */
.chip-offen{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ja); border:1px solid var(--linie); padding:8px 12px;
}
.chip-offen i{width:7px; height:7px; background:var(--ja); flex:none}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:none; border:1px solid var(--rand); position:relative;
}
.burger i{
  position:absolute; left:13px; width:18px; height:2px; 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: Vollbild mit Ueberlagerung ───────────────────────────────────────
   Text steht hier auf dem Foto — das geht nur, weil die Ueberlagerung auf der
   Textseite praktisch deckend ist (Farbe des Grundes bei 96 % Deckung). Auf
   dem Handy wird die Ueberlagerung ganzflaechig, dort gibt es keine freie
   Bildseite mehr. Der gemessene Kontrast bleibt dadurch in jeder Breite
   derselbe wie auf dem Grund. */
.buehne{position:relative; isolation:isolate; min-height:min(86vh, 760px); display:flex; align-items:flex-end}
.buehne-foto{position:absolute; inset:0; z-index:-2; background:var(--grund)}
.buehne-foto img{width:100%; height:100%; object-fit:cover}
.buehne::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, var(--grund) 0%, rgba(15,13,11,.96) 42%, rgba(15,13,11,.55) 78%, rgba(15,13,11,.72) 100%),
    linear-gradient(to top, var(--grund) 2%, rgba(15,13,11,0) 46%);
}
.buehne .wrap{padding:clamp(90px, 12vw, 150px) 0 clamp(40px, 5vw, 66px)}
/* Die Spalte wird in Pixeln begrenzt, nicht in ch: ch misst in der Schrift des
   Elements — hier also im schmalen Inter, waehrend die Ueberschrift in der sehr
   breiten Archivo Black steht. Mit 30ch war die Spalte rund 255px breit und ein
   Wort wie „TRAINIEREN" wurde mitten durchgetrennt. 680px fasst das laengste
   Wort dieser Ueberschrift in einer Zeile. */
.buehne-text{max-width:min(100%, 680px)}
.buehne h1{
  font-size:clamp(2.4rem, 6vw, 4.6rem); margin-top:20px;
  letter-spacing:-.02em; overflow-wrap:break-word; hyphens:auto;
}
.buehne h1 span{color:var(--signal); display:block}
.buehne .lead{
  margin-top:22px; max-width:44ch; font-size:clamp(1.02rem, 1.3vw, 1.14rem);
  text-transform:none;
}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* Drei Chips: Oeffnung · Flaeche · Laufzeit. Die Laufzeit-Aussage gehoert
   laut Recherche nach oben — sie ist das staerkste Argument gegen die Ketten. */
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.chips li{
  border:1px solid var(--linie); background:rgba(26,22,19,.86);
  padding:11px 15px; font-size:.83rem; min-width:0;
}
.chips b{display:block; color:var(--tinte); font-weight:600; font-size:.94rem}
.chips small{display:block; color:var(--leise); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; margin-top:3px}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(58px, 6.6vw, 108px) 0}
.block + .block{border-top:1px solid var(--linie)}
.block-kopf{max-width:70ch; margin-bottom:clamp(30px, 4vw, 52px)}
.block-kopf h2{font-size:clamp(1.95rem, 4.4vw, 3.1rem); margin-top:14px}
.block-kopf .lead{margin-top:18px; max-width:62ch}

/* ── Tarife: nuechterne Tabelle ───────────────────────────────────────────────
   Eine echte <table>, weil es echte tabellarische Daten sind: drei Tarife
   gegen acht Merkmale. Der Rollbehaelter ist bewusst NUR um die Tabelle
   gelegt — die Seite selbst rollt nie waagerecht. */
.tab-roll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--linie)}
.tarif-tab{width:100%; min-width:640px; border-collapse:collapse; background:var(--flaeche)}
.tarif-tab caption{
  caption-side:top; text-align:left; padding:0 0 14px;
  font-size:.86rem; color:var(--leise);
}
.tarif-tab th,.tarif-tab td{
  padding:16px 18px; text-align:left; border-bottom:1px solid var(--linie);
  vertical-align:top; font-size:.95rem;
}
.tarif-tab thead th{
  background:var(--grund); color:var(--tinte);
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:0; line-height:1.15; border-bottom:2px solid var(--signal);
}
.tarif-tab thead th small{
  display:block; font-family:var(--schrift); font-weight:500; font-size:.76rem;
  letter-spacing:.12em; color:var(--leise); margin-top:7px;
}
.tarif-tab tbody th{
  font-weight:600; color:var(--tinte); width:230px; background:var(--flaeche-2);
}
.tarif-tab tr:last-child th,.tarif-tab tr:last-child td{border-bottom:0}
.tarif-tab .gross{
  font-family:var(--display); font-size:1.25rem; color:var(--tinte); text-transform:uppercase;
}
.tarif-tab .ja{color:var(--ja); font-weight:600}
.tarif-tab .nein{color:var(--leise)}
.tarif-tab td small{display:block; font-size:.8rem; color:var(--leise); margin-top:4px}
.tarif-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* Die Preis-Fussnote ist kein Kleingedrucktes: sie erklaert, warum hier drei
   Zeilen pro Tarif stehen und nicht eine. */
.preis-fuss{
  margin-top:26px; max-width:66ch; font-size:.94rem; color:var(--leise);
  padding-left:20px; border-left:2px solid var(--signal);
}
.preis-fuss + .preis-fuss{margin-top:16px}
.preis-fuss b{color:var(--tinte)}

/* ── Ausstattung: Liste mit Haarlinien ────────────────────────────────────── */
.aus-liste{list-style:none; counter-reset:posten; border-top:1px solid var(--linie)}
.aus-liste li{
  counter-increment:posten;
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px 24px;
  padding:24px 0; border-bottom:1px solid var(--linie);
}
.aus-liste li::before{
  content:counter(posten, decimal-leading-zero);
  font-size:.8rem; font-weight:700; color:var(--signal); letter-spacing:.08em;
  font-variant-numeric:tabular-nums; padding-top:5px;
}
.aus-liste h3{font-size:1.15rem; line-height:1.2}
.aus-liste p{grid-column:2; font-size:.95rem; max-width:62ch; margin-top:8px}

/* ── Kursplan: Tagesbloecke auf Haarlinien ────────────────────────────────── */
.plan{border-top:1px solid var(--linie)}
.plan-tag{
  display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px 26px;
  padding:20px 0; border-bottom:1px solid var(--linie); align-items:start;
}
.plan-tag > h3{font-size:1.1rem; padding-top:3px}
.plan-kurse{list-style:none; display:flex; flex-wrap:wrap; gap:10px}
.plan-kurse li{
  display:flex; align-items:baseline; gap:10px; min-width:0;
  border:1px solid var(--linie); background:var(--flaeche); padding:10px 14px;
}
.plan-zeit{color:var(--signal); font-weight:700; font-size:.9rem; flex:none}
.plan-name{color:var(--tinte); font-size:.92rem; min-width:0}
.plan-kurse li.frei{border-style:dashed; background:none}
.plan-kurse li.frei .plan-name{color:var(--leise)}
.plan-fuss{margin-top:24px; font-size:.92rem; color:var(--leise); max-width:64ch}

/* ── Fuer wen: vier Spalten ───────────────────────────────────────────────── */
.wenn{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:1px; background:var(--linie); border:1px solid var(--linie)}
.wenn > div{background:var(--flaeche); padding:26px 22px}
.wenn h3{font-size:1.05rem; margin-bottom:12px}
.wenn p{font-size:.93rem}

/* ── Rundgang: dreispaltiges Raster, randlos ──────────────────────────────── */
.raster{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px}
.raster img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; filter:saturate(.9)}
.raster a,.raster .kachel{display:block; background:var(--flaeche); overflow:clip}
.raster .breit{grid-column:span 2}
.raster .breit img{aspect-ratio:3/1}

/* ── Team ─────────────────────────────────────────────────────────────────── */
.team{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:20px}
.team article{border:1px solid var(--linie); background:var(--flaeche); padding:24px}
.team h3{font-size:1.1rem}
.team .rolle{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); margin-top:9px}
.team p{font-size:.93rem; margin-top:12px}

/* ── Fragen: Aufklapper ───────────────────────────────────────────────────── */
.aufklapper{border-top:1px solid var(--linie)}
.aufklapper details{border-bottom:1px solid var(--linie)}
.aufklapper summary{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer; list-style:none;
  padding:22px 0; font-size:1.02rem; font-weight:600; color:var(--tinte); line-height:1.4;
}
.aufklapper summary::-webkit-details-marker{display:none}
/* Das Pluszeichen sind zwei Striche. Beim Aufklappen dreht sich der senkrechte
   weg — keine 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:2px;
  background:var(--signal); 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:68ch; font-size:.96rem}
.aufklapper details p + p{padding-top:0; margin-top:-10px; padding-bottom:24px}

/* ── Kontakt: Formular im Kasten, Daten als Leiste ────────────────────────── */
.kontakt-gitter{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 4vw, 56px); align-items:start}
.formular-kasten{border:1px solid var(--linie); background:var(--flaeche); padding:clamp(22px, 3vw, 34px)}
.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:.74rem; font-weight:700; letter-spacing:.13em;
  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 nur
   1,3:1 — man saehe das Feld praktisch nicht. --rand liegt bei 3,2:1. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 15px; background:var(--grund);
  border:1px solid var(--rand); border-radius:0; font-size:1rem; color:var(--tinte);
  transition:border-color var(--tempo);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--signal); 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:.85rem; color:var(--leise); max-width:58ch}
.form-fuss a{color:var(--signal); text-underline-offset:3px}
.form-fuss + .form-fuss{margin-top:10px}

.kontakt-liste{list-style:none; border-top:1px solid var(--linie)}
.kontakt-liste li{
  display:grid; grid-template-columns:22px minmax(0, 1fr); gap:14px;
  padding:17px 0; border-bottom:1px solid var(--linie);
}
.kontakt-liste svg{width:19px; height:19px; fill:var(--signal); 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:.86rem; color:var(--leise); margin-top:3px}
.zeiten{margin-top:26px}
.zeiten h3{font-size:1rem; margin-bottom:12px}
.zeiten dl{border-top:1px solid var(--linie)}
.zeiten div{
  display:flex; justify-content:space-between; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--linie); font-size:.93rem;
}
.zeiten dd{color:var(--tinte); font-variant-numeric:tabular-nums; text-align:right}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie); padding:clamp(46px, 5vw, 72px) 0 0}
.fuss-gitter{display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap:32px clamp(24px, 3vw, 52px)}
.fuss p{margin-top:16px; max-width:42ch; font-size:.92rem}
.fuss h3{
  font-family:var(--schrift); font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--leise); margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.92rem}
.fuss li{padding:5px 0}
.fuss li a{text-decoration:none}
.fuss li a:hover{color:var(--tinte); text-decoration:underline}
/* Der Kuendigungs-Hinweis steht bewusst im Fuss und bewusst als Hinweis,
   nicht als Knopf: den Knopf nach § 312k BGB braucht nur, wer online
   abschliessen laesst. Details siehe PLATZHALTER.md. */
.fuss-kuendigung{
  margin-top:clamp(30px, 4vw, 46px); border:1px solid var(--linie);
  padding:18px 20px; font-size:.9rem; max-width:none;
}
.fuss-kuendigung b{color:var(--tinte)}
.fuss-unten{
  margin-top:26px; padding:20px 0; border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  font-size:.82rem; color:var(--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) * 75ms),
             translate .6s cubic-bezier(.22,.68,.36,1) calc(var(--i, 0) * 75ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .kontakt-gitter{grid-template-columns:minmax(0, 1fr)}
  .raster{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .raster .breit{grid-column:span 2}
}

@media (max-width:860px){
  .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:14px 0; border-top:1px solid var(--linie); font-size:.92rem}
  .menue a::after{display:none}
  .kopf .knopf,.chip-offen{display:none}
  .burger{display:block}
  /* Auf schmalen Geraeten deckt die Ueberlagerung das ganze Bild — sonst
     stuende der Text stellenweise auf hellem Foto. */
  .buehne::before{background:linear-gradient(to top, var(--grund) 12%, rgba(15,13,11,.9) 62%, rgba(15,13,11,.82) 100%)}
  .buehne{min-height:0}
}

@media (max-width:640px){
  body{font-size:16px}
  .plan-tag{grid-template-columns:minmax(0, 1fr); gap:12px}
  .plan-kurse li{width:100%}
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  .raster{grid-template-columns:minmax(0, 1fr)}
  .raster .breit{grid-column:span 1}
  .raster .breit img{aspect-ratio:3/2}
  .buehne .wrap{padding-top:52px}

  /* Die Daumenleiste liegt dort, wo der Daumen ohnehin ist. Sie ersetzt auf
     dem Handy den Kopfknopf.

     minmax(0, 1fr) statt 1fr: der Vorgabewert einer Rasterspalte ist auto —
     also mindestens so breit wie ihr laengstes Wort. „WHATSAPP" in Versalien,
     gesperrt, mit Zeichen davor ist breiter als die halbe Handybreite; mit
     1fr waere die Leiste ueber den rechten Bildschirmrand hinausgewachsen.
     Die 0 als Minimum erlaubt der Spalte, schmaler zu werden als ihr Inhalt. */
  .daumen{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 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{
    min-width:0; padding:15px 8px; font-size:.76rem; letter-spacing:.08em;
  }
  .daumen .knopf-leer{background:var(--grund)}
  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 harten Kanten und einem einzigen Orange. 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. */
.rechts-kopf h1{font-size:clamp(2rem, 4.6vw, 3.1rem); margin-top:12px; hyphens:auto; overflow-wrap:break-word}
.rechts-kopf .lead{margin-top:16px; max-width:58ch}
/* Rechtstexte sind voller langer Woerter — „Betriebshaftpflichtversicherung",
   „Verbraucherstreitbeilegungsgesetz". In der breiten Archivo Black passt so
   eine Ueberschrift auf dem Handy in keine Zeile und schiebt die Seite nach
   rechts. hyphens trennt sauber nach den Regeln der Sprache (lang="de" steht
   im html-Tag), overflow-wrap ist das Netz darunter. */
.rechtstext{padding-bottom:clamp(54px, 6vw, 92px); hyphens:auto; overflow-wrap:break-word}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{max-width:68ch}
.rechtstext section{border-top:1px solid var(--linie); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.25rem, 2.2vw, 1.65rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:600; text-transform:none;
  margin:22px 0 8px; color:var(--tinte); letter-spacing:0;
}
.rechtstext p{margin-bottom:13px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{margin:0 0 14px; list-style:none}
.rechtstext ul li{padding-left:22px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{content:""; position:absolute; left:0; top:.68em; width:10px; height:2px; background:var(--signal)}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:15px}
.rechtstext dd{margin:2px 0 0}
.rechtstext address{font-style:normal; line-height:1.9}
.rechtstext strong{color:var(--tinte)}
.rechtstext a{color:var(--signal); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--flaeche); border-left:3px solid var(--signal);
  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}
/* Hier steht bewusst „.rechtstext .zurueck" und nicht nur „.zurueck": die
   Regel fuer Links im Rechtstext 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; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--signal); border-bottom:2px solid var(--signal);
  padding-bottom:5px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--tinte); border-bottom-color:var(--tinte)}