/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 3 — „Übergabe"
   Marquardt Gebaeudereinigung · Hannover

   Haltung: Beweis statt Behauptung. Diese Seite argumentiert nicht, sie zeigt.
   Sehr viel Weiss, sehr grosse Fotos, alles auf einer mittigen Achse — der
   Blick faellt nach unten und nirgendwo sonst hin. Wo Entwurf 1 die Sicherheit
   der Verwaltung sucht und Entwurf 2 die Naehe des Nachbarn, sucht dieser
   Entwurf den Moment der Uebergabe: Der Raum ist fertig, Sie sehen es.

   Deshalb weisses Papier ohne Ton, nur eine einzige Farbe (ein tiefes
   Tannengruen) und eine Schrift, die sich zurueckhaelt. Keine Karten mit
   Schatten, keine Rahmen, keine Kaesten — es gibt nur Weissraum, Haarlinien
   und Bilder.

   Aufbau, worin sich dieser Entwurf von 1 und 2 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — alles mittig, Text ueber die Achse zentriert, darunter ein
                    Foto ueber die volle Fensterbreite.
                    (Entwurf 1: zweispaltig, Text links, Bild rechts.
                    Entwurf 2: Bildband mit ueberlaufender Karte.)
     · Vertrauen  — eine einzige mittige Zeile mit Trennpunkten, kein Kasten.
                    (Entwurf 1: vier Kennzahlen auf Haarlinien. Entwurf 2:
                    drei runde Kacheln.)
     · Leistungen — acht nummerierte Schritte auf der mittigen Achse, jeder mit
                    einer grossen hellen Ziffer.
                    (Entwurf 1: Raster aus acht Zellen. Entwurf 2: Liste mit
                    Ab-Preis in derselben Zeile.)
     · Beweis     — zwei Fotos ueber die volle Breite, jedes mit einer eigenen
                    Bildunterschrift. Gibt es in 1 und 2 nicht.
     · Ablauf     — vier mittige Felder mit sehr grossen Ziffern.
                    (Entwurf 1: waagerechte Viererreihe. Entwurf 2: senkrechter
                    Zeitstrahl.)
     · Galerie    — eine Dreierreihe, unter dem zweiten Beweisfoto.
                    (Entwurf 1: Dreispalten-Raster mit sechs Bildern.
                    Entwurf 2: waagerechte Wischleiste mit Unterschriften.)
     · Fragen     — offene Frage-Antwort-Paare, nichts zum Anklicken.
                    (Entwurf 1: zweispaltiges Aufklapper-Raster. Entwurf 2:
                    Aufklapper in weichen Karten.)
     · Anfrage    — schmale mittige Spalte in der SEITENMITTE, direkt nach dem
                    Ablauf. (Entwurf 1: ganz oben, zweispaltig. Entwurf 2: ganz
                    unten, weisse Karte auf Moos.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Reinigungsfirma).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 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:  #FFFFFF;   /* Seitengrund — reines Weiss, das ist der Entwurf   */
  --matt:    #F1F4F3;   /* die einzige abgesetzte Flaeche                    */
  --tief:    #12181A;   /* Fuss und dunkles Band                             */

  /* Schrift */
  --tinte:   #0F1417;   /* Ueberschriften  (Weiss 18,5:1 · Matt 16,8:1)      */
  --text:    #4A5559;   /* Fliesstext      (Weiss  7,7:1 · Matt  6,9:1)      */
  --leise:   #5C676B;   /* Meta            (Weiss  5,8:1 · Matt  5,3:1)      */

  /* Schrift auf dunklem Grund */
  --hell:       #F3F6F5;  /* auf --tief 16,5:1                               */
  --hell-matt:  #B9C3C4;  /* auf --tief  9,9:1                               */
  --hell-leise: #98A3A5;  /* auf --tief  6,9:1                               */

  /* Handlungsfarbe — eine einzige, sonst keine */
  --akzent:     #0A6B60;  /* Tannengruen (Weiss 6,4:1)                        */
  --akzent-tief:#084F47;  /* nur fuer Hover                                  */
  --auf-akzent: #FFFFFF;  /* auf --akzent 6,4:1                              */

  /* Linien */
  --linie:        #E2E7E6;  /* Haarlinie — nur zum Trennen, nie fuer Text     */
  --linie-dunkel: #2A3234;
  --haar: 1px solid #E2E7E6;
  --rand: #79868A;          /* Umriss von Eingabefeldern (Weiss 3,8:1)       */

  /* Schrift und Mass */
  --display: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --spalte:  1120px;   /* schmaler als 1 und 2 — die Achse soll halten       */
  --enge:    720px;    /* Lesebreite fuer alles Mittige                       */
  --bogen:   3px;
  --tempo:   .46s cubic-bezier(.22,.68,.36,1);
}

/* ── Grundgeruest ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--text);
  font-family:var(--schrift); font-size:17px; line-height:1.72;
  font-weight:400; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: verhindert den Querbalken bei 375px, ohne dass der
     klebende Kopf sein sticky verliert. */
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
h1,h2,h3{
  font-family:var(--display); color:var(--tinte); font-weight:600;
  line-height:1.16; letter-spacing:-.02em; margin:0;
}
p{margin:0}
ul,ol,dl{margin:0; padding:0}
a{color:var(--akzent)}
button,input,select,textarea{font:inherit; color:inherit}
button{border:0; background:none}

/* Ein Fokusring, ueberall derselbe, immer sichtbar. */
:focus-visible{outline:3px solid var(--akzent); outline-offset:2px; border-radius:2px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.eng{width:min(100% - 40px, var(--enge)); 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;
}

/* Rubrik: kleine gesperrte Versalien, mittig wie alles hier. */
.rubrik{
  display:block; font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--akzent);
}

/* ── Entwurfs-Band ────────────────────────────────────────────────────────── */
.entwurf-band{
  background:#F4E58A; color:#2A2400;   /* 12,2:1 */
  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:700}
.entwurf-band span{flex:1 1 300px; min-width:0}
.entwurf-band a{color:inherit; text-underline-offset:3px}

/* ── Knoepfe ──────────────────────────────────────────────────────────────
   Rechteckig und gesperrt beschriftet. Entwurf 1 setzt eine Pille als einzige
   Ausnahme, Entwurf 2 macht die Pille zur Regel — hier gibt es sie gar nicht. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; background:var(--akzent); color:var(--auf-akzent);
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid var(--akzent); border-radius:var(--bogen);
  cursor:pointer; transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:var(--akzent-tief); border-color:var(--akzent-tief)}
.knopf svg{width:17px; height:17px; 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)}
.knopf-hell{background:none; color:var(--hell); border-color:var(--hell-leise)}
.knopf-hell:hover{background:var(--hell); color:var(--tief); border-color:var(--hell)}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--papier); transition:border-color var(--tempo);
  border-bottom:1px solid transparent;
}
.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.34rem; font-weight:600; color:var(--tinte);
  text-decoration:none; letter-spacing:.01em; line-height:1.05; flex:none;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.6rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--leise); margin-top:6px;
}
.menue{margin-left:auto; display:flex; gap:4px}
.menue a{
  font-size:.86rem; font-weight:500; letter-spacing:.03em; text-decoration:none;
  color:var(--text); padding:9px 13px; transition:color var(--tempo);
}
.menue a:hover{color:var(--akzent)}

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  border:1px solid var(--linie); border-radius:var(--bogen); position:relative;
}
.burger i{
  position:absolute; left:13px; width:18px; height:1.5px; background:var(--tinte);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger i:nth-child(1){top: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, darunter ein Foto ueber die volle Breite ──────────────
   Kein Text liegt auf dem Bild. Erst wird gesagt, worum es geht, dann wird
   es gezeigt — in dieser Reihenfolge, weil das Bild sonst nur Dekoration
   waere. */
.buehne{padding:clamp(56px, 8vw, 120px) 0 0; text-align:center}
.buehne h1{
  font-size:clamp(2.2rem, 5.6vw, 4.1rem); margin-top:20px;
  letter-spacing:-.028em; text-wrap:balance;
}
.buehne h1 em{font-style:normal; color:var(--akzent)}
.buehne .lead{
  margin:22px auto 0; max-width:56ch;
  font-size:clamp(1.02rem, 1.3vw, 1.16rem); color:var(--text);
}
.buehne-tun{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px}
.buehne-foto{
  margin:clamp(40px, 5vw, 76px) 0 0;
  background:var(--matt); overflow:clip;
}
.buehne-foto img{width:100%; height:100%; object-fit:cover; aspect-ratio:21/9}

/* ── Vertrauenszeile: eine Zeile, Punkte als Trenner ──────────────────────
   Bewusst kein Kasten und keine Kachel. Drei pruefbare Aussagen, sonst
   nichts. Was spaeter wirklich stimmen muss, steht in eckigen Klammern. */
.zeile{padding:clamp(26px, 3vw, 40px) 0; border-bottom:var(--haar)}
.zeile ul{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:10px 28px;
  font-size:.9rem; color:var(--leise); text-align:center;
}
.zeile li{display:flex; align-items:center; gap:10px}
/* Der Trennpunkt ist reine Zier und gehoert deshalb nicht in den Textfluss
   eines Vorlesers — deshalb ::before und nicht ein Zeichen im HTML. */
.zeile li + li::before{
  content:""; width:4px; height:4px; border-radius:100px;
  background:var(--linie); flex:none; margin-right:18px;
}
.zeile svg{width:17px; height:17px; fill:var(--akzent); flex:none}
.zeile b{color:var(--tinte); font-weight:600}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(60px, 7vw, 116px) 0}
.block-kopf{text-align:center; max-width:60ch; margin:0 auto clamp(36px, 4.6vw, 66px)}
.block-kopf h2{
  font-size:clamp(1.8rem, 3.6vw, 2.9rem); margin-top:16px;
  letter-spacing:-.022em; text-wrap:balance;
}
.block-kopf .lead{margin-top:18px; color:var(--text)}

/* ── Leistungen: acht nummerierte Schritte auf der mittigen Achse ─────────
   Jede Leistung ist eine eigene Zeile auf der Achse: grosse helle Ziffer,
   darunter Titel, Text und Preisrahmen. Getrennt durch Haarlinien, sonst
   nichts. */
.schritte{list-style:none; max-width:var(--enge); margin-inline:auto}
.schritte li{
  text-align:center; padding:clamp(30px, 3.4vw, 46px) 0; border-top:var(--haar);
}
.schritte li:last-child{border-bottom:var(--haar)}
.schritte .zahl{
  display:block; font-family:var(--display); font-size:clamp(2rem, 4vw, 2.9rem);
  font-weight:600; line-height:1; color:var(--linie);
  font-variant-numeric:tabular-nums; margin-bottom:14px;
}
.schritte h3{font-size:clamp(1.14rem, 1.7vw, 1.35rem); margin-bottom:10px}
.schritte p{max-width:52ch; margin-inline:auto; font-size:.97rem}
.schritte .preis{
  display:inline-block; margin-top:14px; font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--akzent);
}
.schritte-fuss{
  max-width:62ch; margin:clamp(28px, 3vw, 40px) auto 0; text-align:center;
  font-size:.92rem; color:var(--leise);
}

/* ── Beweis: ein Foto ueber die volle Fensterbreite ───────────────────────
   Der Kern dieses Entwurfs. Kein Rahmen, keine Rundung, keine Bildunterlage —
   das Bild reicht von Kante zu Kante, die Unterschrift steht mittig darunter
   und erklaert, was man sieht. */
.beweis{padding:0}
.beweis figure{margin:0}
.beweis .voll{background:var(--matt); overflow:clip}
.beweis .voll img{width:100%; height:100%; object-fit:cover; aspect-ratio:2/1}
.beweis figcaption{
  max-width:62ch; margin:clamp(18px, 2.2vw, 28px) auto clamp(50px, 6vw, 92px);
  padding-inline:20px; text-align:center; font-size:.95rem; color:var(--leise);
}
.beweis figcaption b{display:block; color:var(--tinte); font-weight:600; margin-bottom:5px}

/* ── Ablauf: vier mittige Felder mit sehr grossen Ziffern ─────────────────── */
.ablauf{
  list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(20px, 2.6vw, 40px);
}
.ablauf li{text-align:center; padding-top:26px; border-top:2px solid var(--tinte)}
.ablauf .zahl{
  display:block; font-family:var(--display); font-size:clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight:600; line-height:1; color:var(--tinte);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.ablauf h3{font-size:1.08rem; margin:14px 0 9px}
.ablauf p{font-size:.93rem}
.ablauf-fuss{
  max-width:60ch; margin:clamp(30px, 3.4vw, 46px) auto 0; text-align:center;
  font-size:.93rem; color:var(--leise);
}

/* ── Galerie: eine Dreierreihe ────────────────────────────────────────────── */
.dreier{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.6vw, 22px);
}
.dreier figure{margin:0}
.dreier .bild{background:var(--matt); overflow:clip}
.dreier img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.dreier figcaption{padding-top:12px; font-size:.88rem; color:var(--leise); text-align:center}

/* ── Fragen: offene Paare, nichts zum Anklicken ───────────────────────────
   Kein Aufklapper. Wer eine Frage hat, soll die Antwort sehen, ohne zu
   klicken — und wer alle liest, hat in zwei Minuten alles verstanden. */
.paare{max-width:var(--enge); margin-inline:auto; list-style:none}
.paare li{padding:clamp(26px, 3vw, 38px) 0; border-top:var(--haar); text-align:center}
.paare li:last-child{border-bottom:var(--haar)}
.paare h3{font-size:1.1rem; margin-bottom:12px}
.paare p{max-width:58ch; margin-inline:auto; font-size:.96rem}

/* ── Anfrage: schmale mittige Spalte ──────────────────────────────────────
   Steht in der Seitenmitte, direkt nach dem Ablauf — an der Stelle, an der
   klar geworden ist, wie gearbeitet wird, aber noch nicht alles gelesen
   wurde. Auf mattem Grund, damit die Spalte im vielen Weiss steht. */
.anfrage{background:var(--matt); padding:clamp(60px, 7vw, 116px) 0}
.anfrage .block-kopf{margin-bottom:clamp(30px, 3.6vw, 48px)}
.formular{max-width:560px; margin-inline:auto}
.feld-paar{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px}
.feld{margin-bottom:18px}
.feld label{
  display:block; font-size:.78rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinte); margin-bottom:8px;
}
/* Hier steht --rand und nicht --linie. Die Haarlinie 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,8:1 und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 15px; background:var(--papier);
  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:3px solid var(--akzent); outline-offset:1px; border-color:transparent;
}
.feld textarea{min-height:120px; resize:vertical; line-height:1.65}
.feld select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--tinte) 50%),
                   linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:44px;
}
.form-tun{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:10px}
.form-fuss{
  margin-top:18px; font-size:.88rem; color:var(--leise);
  text-align:center; max-width:52ch; margin-inline:auto;
}
.form-fuss + .form-fuss{margin-top:9px}
.form-fuss a{color:var(--akzent)}

/* ── Kontakt: drei Angaben auf der Achse ──────────────────────────────────── */
.kontakt-achse{
  list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(22px, 3vw, 44px); text-align:center;
}
.kontakt-achse li{padding-top:24px; border-top:var(--haar)}
.kontakt-achse svg{width:20px; height:20px; fill:var(--akzent); margin-bottom:12px}
.kontakt-achse b{
  display:block; font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--tinte); margin-bottom:6px; overflow-wrap:break-word;
}
.kontakt-achse b a{text-decoration:none}
.kontakt-achse b a:hover{text-decoration:underline}
.kontakt-achse small{display:block; font-size:.88rem; color:var(--leise)}

.zeiten{max-width:520px; margin:clamp(36px, 4vw, 60px) auto 0}
.zeiten h3{
  font-family:var(--schrift); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leise);
  text-align:center; margin-bottom:12px;
}
.zeiten div{
  display:flex; justify-content:space-between; gap:20px;
  padding:12px 0; border-top:var(--haar); font-size:.94rem;
}
.zeiten div:last-child{border-bottom:var(--haar)}
.zeiten dt{color:var(--text)}
.zeiten dd{margin:0; color:var(--tinte); font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.gebiet{max-width:62ch; margin:clamp(30px, 3.4vw, 46px) auto 0; text-align:center}
.gebiet h3{
  font-family:var(--schrift); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin-bottom:10px;
}
.gebiet p{font-size:.94rem}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--tief); color:var(--hell-matt); padding:clamp(52px, 6vw, 86px) 0 0}
.fuss-gitter{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap:clamp(26px, 3.4vw, 56px);
}
.fuss .marke{color:var(--hell); font-size:1.3rem}
.fuss .marke small{color:var(--hell-leise)}
.fuss p{margin-top:16px; font-size:.92rem; max-width:44ch; color:var(--hell-matt)}
.fuss h3{
  font-family:var(--schrift); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hell-leise);
  margin-bottom:14px;
}
.fuss ul{list-style:none}
.fuss li{margin-bottom:9px; font-size:.92rem; overflow-wrap:break-word}
.fuss li a{color:var(--hell-matt); text-decoration:none; text-underline-offset:3px}
.fuss li a:hover{color:var(--hell); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(36px, 4vw, 60px); padding:22px 0;
  border-top:1px solid var(--linie-dunkel);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  font-size:.82rem; color:var(--hell-leise);
}

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

/* ── Sanftes Einblenden ───────────────────────────────────────────────────
   Nur mit JavaScript. Ohne JS steht alles sichtbar da — deshalb haengt die
   Startbedingung an html.js und nicht an der Klasse allein. */
html.js .zeig{
  opacity:0; translate:0 16px;
  transition:opacity var(--tempo), translate var(--tempo);
  transition-delay:calc(var(--i, 0) * 90ms);
}
html.js .zeig[data-da="1"]{opacity:1; translate:none}

/* ── Enger wird es hier ───────────────────────────────────────────────────── */
@media (max-width:980px){
  .ablauf{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(22px, 3vw, 36px)}
  .kontakt-achse{grid-template-columns:minmax(0, 1fr); gap:22px}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
}
@media (max-width:860px){
  .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 4px; font-size:1rem; border-top:var(--haar)}
  .kopf .knopf{display:none}
  .burger{display:block}
  .buehne-foto img{aspect-ratio:16/9}
  .beweis .voll img{aspect-ratio:3/2}
}
@media (max-width:640px){
  .wrap,.eng{width:min(100% - 32px, var(--spalte))}
  .buehne-foto img{aspect-ratio:4/3}
  .beweis .voll img{aspect-ratio:4/3}
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  /* Die Dreierreihe wird zur Zweierreihe. Ein einspaltiger Stapel aus drei
     Bildern waere auf dem Handy eine sehr lange Strecke ohne Text. */
  .dreier{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .dreier figure:first-child{grid-column:span 2}
  .zeile ul{flex-direction:column; gap:12px}
  .zeile li + li::before{display:none}

  .daumen{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:var(--papier); border-top:1px solid var(--linie); padding:10px 16px;
  }
  .daumen .knopf{padding:13px 6px; font-size:.74rem; letter-spacing:.08em}
  body{padding-bottom:74px}
}

@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) ─────────────────────────────────
   Der Rest der Seite ist mittig — ein Rechtstext ist es nicht. Fliesstext
   liest sich linksbuendig, und eine Datenschutzerklaerung soll gelesen
   werden. Die Ueberschrift bleibt auf der Achse, der Text bricht aus. */
.rechts-kopf{padding:clamp(44px, 5vw, 76px) 0 clamp(22px, 2.6vw, 34px); text-align:center}
/* 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(2rem, 4.4vw, 3.1rem); margin-top:14px; letter-spacing:-.024em;
  hyphens:auto; overflow-wrap:break-word;
}
.rechts-kopf .lead{margin:14px auto 0; max-width:56ch; color:var(--text)}
.rechtstext{padding-bottom:clamp(56px, 6vw, 96px); max-width:var(--enge); margin-inline:auto}
.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.24rem, 2vw, 1.58rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:.98rem; 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:.78em;
  width:10px; height:1.5px; background:var(--akzent);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:16px}
.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(--akzent); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--matt); border-left:3px solid var(--akzent);
  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 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:10px; text-decoration:none;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--auf-akzent); background:var(--akzent);
  border-radius:var(--bogen); padding:14px 26px; margin-top:36px;
}
.rechtstext .zurueck:hover{background:var(--akzent-tief); color:var(--auf-akzent)}