/* ═════════════════════════════════════════════════════════════════════════
   Restaurant Kastanie — Entwurf 3 · „Handwerkskueche"
   ─────────────────────────────────────────────────────────────────────────
   Die Haltung
   Entwurf 1 verkauft den Abend, Entwurf 2 verkauft die Geschwindigkeit.
   Dieser hier verkauft das Produkt. Er nimmt alles weg, was nicht Zutat,
   Handgriff oder Preis ist: keine Farbflaechen, keine Schatten, keine
   Karten, die sich uebereinanderlegen. Was bleibt, ist viel Weiss, eine
   duenne Linie und eine einzige senkrechte Achse in der Mitte, an der alles
   ausgerichtet ist.

   Eine mittige Achse ist die stillste Anordnung, die es gibt — und die
   unerbittlichste: Sie funktioniert nur, wenn wenig da ist. Deshalb ist die
   Speisekarte hier eine ruhige Liste untereinander und kein Raster, und die
   Fotos sind gross und wenige statt klein und viele.

   Wo dieser Entwurf sich von 1 und 2 unterscheidet — Abschnitt fuer Abschnitt
   ─────────────────────────────────────────────────────────────────────────
   · Buehne — hier ohne Foto. Nur eine Zeile, eine grosse Ueberschrift, ein
     Strich. Das Bild kommt erst darunter als ruhiges Band. Entwurf 1 legt
     den Text ins Vollbild, Entwurf 2 auf eine weisse Karte im Bild.
   · Direkt darunter — ein einzelner Satz ueber die Kueche, mittig. Entwurf 1
     hat eine Faktenzeile, Entwurf 2 die grosse Tagesgericht-Karte.
   · Speisekarte — eine einzige Spalte, jedes Gericht mittig untereinander,
     der Preis darunter. Entwurf 1 ist zweispaltig mit Punktfuehrung,
     Entwurf 2 sind vier runde Karten.
   · Galerie — vier grosse Zutatenfotos im Quadrat, mit Bildunterschrift.
     Entwurf 1 hat ein Mosaik aus acht Bildern, Entwurf 2 eine Wischleiste.
   · Fragen — mittig untereinander, alle offen, nur durch Linien getrennt.
     Entwurf 1 klappt auf, Entwurf 2 legt sie in Karten.
   · Kontaktteil — Zeiten und Formular untereinander in einer schmalen
     mittigen Spalte. Entwurf 1 teilt in zwei Haelften, Entwurf 2 legt beides
     in eine breite Karte.
   · Kantenradius — 4px, fast nichts. Entwurf 1 hat 0px, Entwurf 2 hat 22px
     und runde Knoepfe.
   · Schriftpaarung — Newsreader (eine ruhige Lesesserife mit optischer
     Groessenachse) ueber Inter (neutral, schmal laufend). Entwurf 1 setzt
     eine schmuckvolle Display-Serife, Entwurf 2 zwei Grotesken.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── Marken-Kontrakt ───────────────────────────────────────────────────────
   Alle Farben dieses Entwurfs stehen hier. Wer die Marke wechselt, aendert
   nur diesen Block. Die Kontrastwerte dahinter sind gerechnet, nicht
   geschaetzt — WCAG verlangt fuer Fliesstext 4,5:1, fuer Bedienelemente 3:1. */
:root{
  --grund:   #FAFAF8;   /* Seitengrund — Papierweiss, minimal warm         */
  --papier:  #F1EEE6;   /* die einzige abgesetzte Flaeche                  */
  --tief:    #1A1A18;   /* Fuss                                           */

  --tinte:   #1A1A18;   /* Ueberschriften (auf Grund 16,7:1 · Papier 15,0:1) */
  --text:    #40433F;   /* Fliesstext     (auf Grund  9,6:1 · Papier  8,7:1) */
  --leise:   #6A6D68;   /* Meta, Legenden (auf Grund  5,0:1 · Papier  4,5:1) */

  --ocker:   #8A5A00;   /* der eine Akzent (auf Grund 5,7:1)               */
  --ocker-tief:#6E4800; /* gedrueckt und ueberfahren                       */
  --ocker-hell:#E0A83C; /* nur im dunklen Fuss  (auf Tief 8,2:1)           */
  --auf-ocker:#FFFFFF;  /* Schrift auf Ocker              (5,9:1)          */

  --fuss-text:#FAFAF8;  /* auf Tief 16,7:1                                 */
  --fuss-leise:#A8A8A2; /* auf Tief  7,3:1                                 */

  --linie:   #E6E4DE;   /* die duenne Linie, die hier fast alles traegt    */
  --rand:    #85847D;   /* Umriss bedienbarer Elemente (auf Grund 3,6:1)   */

  --display:'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --schrift:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1120px;
  --lesebreite:640px;   /* die mittige Achse — hier lebt fast der ganze Text */
  --luft:clamp(18px, 4vw, 34px);
  --bogen:4px;          /* der Radius dieses Entwurfs: fast keiner          */
  --tempo:.4s cubic-bezier(.3,.7,.4,1);
}


/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html:focus-within{scroll-padding-top:100px}

body{
  margin:0;
  /* „clip" statt „hidden": schneidet den Ueberhang ab, ohne einen neuen
     Scroll-Kontext zu erzeugen — sonst haengt position:sticky im Kopf. */
  overflow-x:clip;
  background:var(--grund);
  color:var(--text);
  font-family:var(--schrift);
  font-size:clamp(1rem, .96rem + .18vw, 1.08rem);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--tinte);
  line-height:1.2;
  margin:0;
  font-weight:400;      /* eine Lesesserife braucht kein Fettdruck-Gewicht */
  letter-spacing:-.005em;
}
h1{font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); line-height:1.13}
h2{font-size:clamp(1.7rem, 1.2rem + 2vw, 2.5rem)}
h3{font-size:clamp(1.12rem, 1.04rem + .4vw, 1.32rem); font-weight:500}
p{margin:0}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* Der Fokusring ist bewusst dick und hat einen Abstand — er muss auch auf
   einem Foto und auf einer Ockerflaeche zu sehen sein. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ocker);
  outline-offset:3px;
  border-radius:var(--bogen);
}

.wrap{
  width:min(var(--spalte), 100% - 2*var(--luft));
  margin-inline:auto;
}
/* Die schmale Mittelspalte — das eigentliche Geruest dieses Entwurfs. */
.achse{
  width:min(var(--lesebreite), 100% - 2*var(--luft));
  margin-inline:auto;
  text-align:center;
}

/* Nur fuer Vorleseprogramme — nicht display:none, sonst wird es nicht
   vorgelesen. */
.nur-vorleser{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
a.nur-vorleser:focus{
  position:fixed; top:12px; left:12px; z-index:120;
  width:auto; height:auto; margin:0; padding:12px 20px;
  clip-path:none; white-space:normal;
  background:var(--ocker); color:var(--auf-ocker);
  border-radius:var(--bogen); font-weight:600;
}

.rubrik{
  display:inline-block;
  font-size:.76rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocker);
}

/* Der Strich unter der Ueberschrift — statt einer Farbflaeche. */
.strich{
  display:block; width:52px; height:1px;
  background:var(--ocker); border:0;
  margin:26px auto;
}
.strich--links{margin-inline:0}

.lead{
  font-size:clamp(1.06rem, 1rem + .34vw, 1.2rem);
  line-height:1.7;
  color:var(--text);
}


/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{
  background:var(--tief); color:var(--fuss-text);
  font-size:.85rem; padding:9px 0;
}
.entwurf-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
}
.entwurf-band b{font-weight:600}
.entwurf-band span{color:var(--fuss-leise)}
.entwurf-band a{margin-left:auto; color:var(--ocker-hell); font-weight:600}


/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 27px;
  border-radius:var(--bogen);
  border:1px solid var(--ocker);
  background:var(--ocker); color:var(--auf-ocker);
  font-family:var(--schrift);
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:var(--ocker-tief); border-color:var(--ocker-tief)}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}

.knopf-leer{
  background:transparent; color:var(--tinte); border-color:var(--rand);
}
.knopf-leer:hover{background:transparent; color:var(--ocker); border-color:var(--ocker)}


/* ── Kopf ────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:60;
  background:rgba(250,250,248,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie)}
/* Wichtig: static, damit das aufgeklappte Handy-Menue am Kopf haengt und
   nicht an der Breite von .wrap. */
.kopf .wrap{
  position:static;
  display:flex; align-items:center; gap:clamp(14px, 2.2vw, 28px);
  min-height:72px;
}

.marke{
  font-family:var(--display);
  font-size:1.42rem; font-weight:500; letter-spacing:.005em;
  color:var(--tinte); text-decoration:none; line-height:1.1;
  margin-right:auto;
}
.marke small{
  display:block;
  font-family:var(--schrift);
  font-size:.68rem; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin-top:4px;
}

.menue{display:flex; gap:clamp(12px, 1.6vw, 24px)}
.menue a{
  font-size:.93rem; font-weight:400;
  color:var(--text); text-decoration:none;
  padding:8px 2px;
  border-bottom:1px solid transparent;
  transition:color var(--tempo), border-color var(--tempo);
}
.menue a:hover{color:var(--ocker); border-bottom-color:var(--ocker)}

.burger{
  display:none;
  width:44px; height:44px; padding:0;
  border:1px solid var(--rand); border-radius:var(--bogen);
  background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger i{
  display:block; width:18px; height:1px;
  background:var(--tinte);
  transition:transform var(--tempo), opacity var(--tempo);
}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}


/* ── Buehne: kein Foto, nur Text auf der Achse ───────────────────────────── */
.buehne{padding:clamp(58px, 8vw, 118px) 0 clamp(34px, 4.4vw, 58px)}
.buehne h1{margin-top:20px}
.buehne h1 em{font-style:italic; color:var(--ocker)}
.buehne .lead{margin-top:4px; max-width:52ch; margin-inline:auto}
.buehne-tun{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:32px;
}

/* Das Bildband kommt erst nach dem Text — bewusst als ruhiger Streifen,
   nicht als Buehne. Es traegt keine Schrift, deshalb braucht es auch
   keine Ueberlagerung. */
.bildband{
  margin-top:clamp(38px, 5vw, 66px);
  height:clamp(220px, 30vw, 400px);
  overflow:hidden;
}
.bildband img{width:100%; height:100%; object-fit:cover}
.bildband figcaption{
  width:min(var(--spalte), 100% - 2*var(--luft));
  margin:12px auto 0;
  font-size:.86rem; color:var(--leise); text-align:center;
}
.bildband--figur{margin:0; height:auto}
.bildband--figur .rahmen{height:clamp(220px, 30vw, 400px); overflow:hidden}


/* ── Abschnitte allgemein ────────────────────────────────────────────────── */
section[id]{padding:clamp(56px, 7vw, 104px) 0; scroll-margin-top:88px}
.band-papier{background:var(--papier)}
section + section{border-top:1px solid var(--linie)}
.band-papier + section,section + .band-papier{border-top:0}

.kopfzeile{margin-bottom:clamp(30px, 4vw, 52px)}
.kopfzeile h2{margin-top:14px}
.kopfzeile p{margin-top:18px}


/* ── Ein Satz ueber die Kueche ───────────────────────────────────────────── */
.satz{padding:clamp(46px, 6vw, 86px) 0}
.satz p{
  font-family:var(--display);
  font-size:clamp(1.3rem, 1rem + 1.5vw, 1.95rem);
  line-height:1.5; color:var(--tinte);
  text-wrap:balance;
}
.satz .quelle{
  font-family:var(--schrift);
  font-size:.88rem; color:var(--leise);
  margin-top:22px; letter-spacing:.06em; text-transform:uppercase;
}


/* ── Speisekarte: eine ruhige Liste auf der Achse ────────────────────────── */
.karte-liste{
  width:min(var(--lesebreite), 100% - 2*var(--luft));
  margin-inline:auto;
}
.karte-gruppe + .karte-gruppe{margin-top:clamp(44px, 5vw, 72px)}
.karte-gruppe > h3{
  text-align:center;
  font-family:var(--schrift);
  font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocker);
}
.karte-gruppe > p.hinweis{
  text-align:center; font-size:.92rem; color:var(--leise); margin-top:10px;
}

.gerichte{list-style:none; margin:26px 0 0; padding:0}
.gerichte > li{
  text-align:center;
  padding:24px 0;
  border-top:1px solid var(--linie);
}
.gerichte > li:first-child{border-top:0; padding-top:6px}

.gericht-name{
  font-family:var(--display);
  font-size:clamp(1.12rem, 1.04rem + .4vw, 1.32rem);
  font-weight:500; color:var(--tinte);
  line-height:1.4;
  /* balance verhindert, dass eine einzelne Silbe allein auf Zeile zwei
     landet — bei mittigem Satz faellt das besonders auf. */
  text-wrap:balance;
}
.gericht-preis{
  display:block; margin-top:7px;
  font-size:1rem; color:var(--ocker); font-weight:500;
  font-variant-numeric:tabular-nums;
}
.gericht-text{
  margin-top:10px; font-size:.97rem; color:var(--text);
  max-width:52ch; margin-inline:auto;
}
.gericht-stoffe{
  display:block; margin-top:9px;
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--leise);
}

/* Der Pflichtteil unter der Karte — Allergene, Zusatzstoffe, Preise. */
.karte-fuss{
  width:min(var(--lesebreite), 100% - 2*var(--luft));
  margin:clamp(50px, 6vw, 82px) auto 0;
  padding-top:clamp(30px, 3.4vw, 44px);
  border-top:1px solid var(--linie);
}
.karte-fuss h3{
  text-align:center;
  font-family:var(--schrift);
  font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ocker);
}
.karte-fuss p{margin-top:16px; font-size:.95rem}
.karte-fuss strong{color:var(--tinte); font-weight:600}
.legende{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  font-size:.88rem; color:var(--text);
}
.legende b{color:var(--ocker); font-weight:600; margin-right:5px}
.pruefen{
  margin-top:22px; padding:16px 20px;
  border:1px solid var(--linie); border-left:2px solid var(--ocker);
  border-radius:var(--bogen);
  background:var(--grund);
  font-size:.9rem;
}
.band-papier .pruefen{background:transparent}


/* ── Galerie: vier grosse Zutatenfotos ───────────────────────────────────── */
.zutatenbilder{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(16px, 2.4vw, 34px);
}
.zutatenbilder figure{margin:0}
.zutatenbilder img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--bogen);
}
.zutatenbilder figcaption{
  margin-top:13px; text-align:center;
  font-size:.9rem; color:var(--leise);
}


/* ── Das Haus ────────────────────────────────────────────────────────────── */
.haus-text p{margin-top:18px}
.unterschrift{
  margin-top:34px; padding-top:24px;
  border-top:1px solid var(--linie);
}
.unterschrift b{
  display:block;
  font-family:var(--display); font-size:1.14rem; font-weight:500;
  color:var(--tinte);
}
.unterschrift span{font-size:.9rem; color:var(--leise)}

/* Zwei Bilder nebeneinander, gleich hoch — der einzige Ort im Entwurf mit
   zwei Spalten Bild. */
.bildpaar{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 26px);
  margin-top:clamp(34px, 4vw, 56px);
}
.bildpaar figure{margin:0}
.bildpaar img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--bogen);
}
.bildpaar figcaption{margin-top:11px; font-size:.88rem; color:var(--leise)}


/* ── Reservierung: alles untereinander auf der Achse ─────────────────────── */
.zeiten{list-style:none; margin:0 auto; padding:0; max-width:440px}
.zeiten li{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--linie);
  font-size:.98rem; text-align:left;
}
.zeiten li:last-child{border-bottom:0}
.zeiten b{font-weight:500; color:var(--tinte)}
.zeiten span{color:var(--leise); text-align:right}

.wege{
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
}
.wege a{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--linie); border-radius:var(--bogen);
  padding:11px 19px; text-decoration:none;
  color:var(--tinte); font-size:.94rem;
  transition:border-color var(--tempo), color var(--tempo);
}
.wege a:hover{border-color:var(--ocker); color:var(--ocker)}
.wege svg{width:17px; height:17px; fill:var(--ocker); flex:none}

.formular{
  display:grid; gap:16px;
  max-width:520px; margin:clamp(38px, 4.4vw, 60px) auto 0;
  text-align:left;
}
.feld{display:grid; gap:6px}
.feld label{font-size:.86rem; font-weight:500; color:var(--tinte)}
.feld input,.feld select,.feld textarea{
  width:100%;
  font-family:inherit; font-size:1rem; color:var(--tinte);
  background:var(--grund);
  border:1px solid var(--rand);
  border-radius:var(--bogen);
  padding:12px 14px;
  transition:border-color var(--tempo);
}
.band-papier .feld input,.band-papier .feld select,.band-papier .feld textarea{
  background:var(--grund);
}
.feld textarea{min-height:104px; resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--ocker)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.zwei-felder{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;
}
.formular .knopf{justify-self:start}
.form-hinweis{font-size:.87rem; color:var(--leise)}
.form-hinweis a{color:var(--ocker)}


/* ── Fragen: mittig untereinander, alle offen ────────────────────────────── */
.fragen{
  width:min(var(--lesebreite), 100% - 2*var(--luft));
  margin-inline:auto;
}
.frage{
  padding:clamp(24px, 3vw, 36px) 0;
  border-top:1px solid var(--linie);
  text-align:center;
}
.frage:first-child{border-top:0}
.frage h3{font-family:var(--display); font-weight:500}
.frage p{margin-top:13px; font-size:.98rem; max-width:56ch; margin-inline:auto}


/* ── Kontakt ─────────────────────────────────────────────────────────────── */
.kontakt-liste{
  list-style:none; margin:clamp(30px, 3.4vw, 44px) auto 0; padding:0;
  display:grid; gap:0;
  max-width:520px; text-align:left;
}
.kontakt-liste li{
  display:flex; gap:15px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--linie);
}
.kontakt-liste li:last-child{border-bottom:0}
.kontakt-liste svg{width:19px; height:19px; fill:var(--ocker); flex:none; margin-top:6px}
.kontakt-liste b{
  display:block; font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--leise);
}
.kontakt-liste a,.kontakt-liste > li > div > span{
  color:var(--tinte); text-decoration:none; font-size:1.03rem;
}
.kontakt-liste a:hover{color:var(--ocker); text-decoration:underline}


/* ── Fuss ────────────────────────────────────────────────────────────────── */
.fuss{
  background:var(--tief); color:var(--fuss-leise);
  padding:clamp(48px, 5.6vw, 78px) 0 clamp(96px, 8vw, 46px);
}
.fuss-gitter{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap:clamp(26px, 3.4vw, 52px);
}
.fuss .marke{color:var(--fuss-text); margin-right:0}
.fuss .marke small{color:var(--fuss-leise)}
.fuss p{margin-top:16px; font-size:.93rem; max-width:38ch}
.fuss h3{
  font-family:var(--schrift);
  color:var(--fuss-text); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:15px;
}
.fuss ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fuss a{color:var(--fuss-leise); text-decoration:none; font-size:.93rem}
.fuss a:hover{color:var(--ocker-hell); text-decoration:underline}
.fuss-unten{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px 22px;
  margin-top:clamp(36px, 4vw, 54px); padding-top:22px;
  border-top:1px solid rgba(250,250,248,.14);
  font-size:.85rem;
}


/* ── Daumenleiste (nur Handy) ────────────────────────────────────────────── */
.daumen{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,250,248,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--linie);
}
.daumen .knopf{flex:1 1 0; min-width:0; padding:13px 10px; font-size:.93rem}


/* ── Einblenden beim Scrollen ────────────────────────────────────────────── */
/* Ohne JavaScript ist alles sichtbar — die Regel greift erst, wenn das
   Skript die Klasse „js" gesetzt hat. */
html.js .zeig{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease calc(var(--i, 0) * 70ms),
             transform .6s cubic-bezier(.3,.7,.4,1) calc(var(--i, 0) * 70ms);
}
html.js .zeig[data-da="1"]{opacity:1; transform:none}


/* ── Schmalere Fenster ───────────────────────────────────────────────────── */
@media (max-width:1000px){
  .fuss-gitter{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .fuss-gitter > :first-child{grid-column:1 / -1}
}

@media (max-width:820px){
  .menue{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--grund);
    border-bottom:1px solid var(--linie);
    padding:6px 0;
    display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{
    padding:14px 0; border-bottom:0;
    width:min(var(--spalte), 100% - 2*var(--luft));
    margin-inline:auto;
  }
  .burger{display:flex}
  .kopf .knopf{display:none}
}

@media (max-width:620px){
  .zutatenbilder{grid-template-columns:minmax(0, 1fr)}
  .zutatenbilder img{aspect-ratio:4/3}
  .bildpaar{grid-template-columns:minmax(0, 1fr)}
  .bildpaar img{aspect-ratio:4/3}
  .zwei-felder{grid-template-columns:minmax(0, 1fr)}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
  .fuss-unten{flex-direction:column}
  .formular .knopf{justify-self:stretch}
}

@media (max-width:520px){
  .daumen{display:flex}
  body{padding-bottom:74px}
}


/* ── Weniger Bewegung ────────────────────────────────────────────────────── */
/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt hier
   gar keine Animation — auch das sanfte Scrollen wird abgeschaltet. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js .zeig{opacity:1; transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Rechtsseiten — Impressum und Datenschutzerklaerung
   Hier verlaesst der Entwurf die mittige Achse: Rechtstexte liest man links
   ausgerichtet deutlich schneller.
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{padding:clamp(44px, 5.4vw, 78px) 0 clamp(22px, 3vw, 34px)}
.rechts-kopf h1{
  margin-top:14px;
  font-size:clamp(2rem, 4vw, 2.9rem);
  hyphens:auto; overflow-wrap:break-word;
}
.rechts-kopf .lead{margin-top:16px; max-width:58ch}

.rechtstext{padding-bottom:clamp(52px, 6vw, 88px)}
.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.28rem, 2vw, 1.65rem); margin-bottom:15px}
.rechtstext p{margin-bottom:13px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext strong{color:var(--tinte); font-weight:600}
.rechtstext em{font-style:italic}
.rechtstext ul{margin:0 0 14px; padding:0; list-style:none}
.rechtstext ul li{padding-left:20px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:2px; top:.82em;
  width:8px; height:1px; background:var(--ocker);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; color:var(--tinte); margin-top:16px}
.rechtstext dd{margin:2px 0 0}
.rechtstext address{font-style:normal; line-height:1.9}
.rechtstext a{color:var(--ocker); text-underline-offset:3px}
.rechtstext a:hover{color:var(--ocker-tief)}

.rechts-hinweis{
  border:1px solid var(--linie); border-left:2px solid var(--ocker);
  border-radius:var(--bogen);
  background:var(--papier);
  padding:20px 24px; margin-bottom:24px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.93rem; margin-bottom:0}

/* Bewusst „.rechtstext .zurueck" und nicht nur „.zurueck": die Linkfarbe der
   Rechtsseiten wuerde den Knopf sonst mitfaerben. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:30px; padding:13px 24px;
  border:1px solid var(--rand); border-radius:var(--bogen);
  color:var(--tinte); text-decoration:none; font-size:.95rem;
  transition:border-color var(--tempo), color var(--tempo);
}
.rechtstext .zurueck:hover{border-color:var(--ocker); color:var(--ocker)}