/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 2 — „Warm & Nah"
   Nordfeld · Friseursalon Bielefeld

   Haltung: der Gegenentwurf zu 1. Wo Entwurf 1 kuehl und redaktionell ist,
   ist dieser warm und zugewandt. Sandfarbenes Papier, weiche Karten mit
   sichtbarer Rundung, eine einzige warme Buntfarbe (Korall) — und eine
   Antiqua mit klassischen Proportionen statt einer Zeitungsserife.

   Zur Korallfarbe, weil das der haeufigste Fehler in dieser Branche ist:
   #F28A70 hat auf hellem Grund nur 2,3:1. Sie taugt deshalb NUR als
   Flaeche, mit dunkler Schrift darauf (6,8:1). Fuer Korall als SCHRIFT gibt
   es einen zweiten, dunkleren Wert. Wer das vermischt, baut eine Seite, die
   huebsch aussieht und nicht lesbar ist.

   Aufbau, worin sich dieser Entwurf von 1 und 3 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne     — geteilt: Text links, ein gerundetes Foto rechts.
                    (1: Bild als Band oben, Textplatte darueber.
                     3: mittig, Bildband darunter.)
     · Leistungen — weiche Karten im Raster, Preis als Pille.
                    (1: Menuekarte auf Haarlinien. 3: zwei Spalten in EINER
                     grossen Platte.)
     · Galerie    — waagerechter Streifen zum Wischen, mit Einrastpunkten.
                    (1: Mauerwerk aus drei Spalten. 3: 2x2 Kacheln.)
     · Buchung    — zweispaltig: Wege links, Oeffnungszeiten als Karte rechts.
                    (1: eine riesige Ueberschrift, die selbst der Link ist.
                     3: drei gerundete Kacheln.)
     · Fragen     — Aufklapper, eine Frage nach der anderen.
                    (1: offen und zweispaltig. 3: gerundete Karten.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Friseur), Stil B.
   Palette gemessen bei Il Colorista und Brzozowski.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ────────────────────────────────────────────────────────*/
:root{
  /* Flaechen */
  --papier:  #FBF7F4;   /* Seitengrund — Sandpapier, kein Weiss            */
  --karte:   #FFFFFF;   /* Karten, Felder                                  */
  --blass:   #FDEEE9;   /* Korall auf 8 % — Baender, Merker                */
  --dunkel:  #2A2321;   /* Fuss                                            */

  /* Schrift */
  --tinte:   #1F1F1F;   /* Ueberschriften        (auf Papier 15,5:1)       */
  --text:    #414141;   /* Fliesstext            (Papier 9,6:1 · Weiss 10,3:1) */
  --leise:   #6B6B6B;   /* Meta   (Papier 5,0:1 · Weiss 5,3:1 · Blass 4,7:1)  */
  --hell:    #FBF7F4;   /* Schrift auf Dunkel    (auf #2A2321 14,5:1)      */
  --hell-matt:#B9AEA8;  /* Fliesstext auf Dunkel (auf #2A2321  7,1:1)      */
  --hell-leise:#9A908A; /* Meta auf Dunkel       (auf #2A2321  5,0:1)      */

  /* Die eine Buntfarbe — in zwei Rollen, siehe Kopfkommentar. */
  --korall:      #F28A70;   /* FLAECHE. Darauf immer --tinte.  (6,8:1)     */
  --korall-hell: #F5A490;   /* Flaeche bei Hover                           */
  --korall-t:    #B14A2E;   /* SCHRIFT auf hellem Grund.
                               (Papier 5,1:1 · Weiss 5,4:1 · Blass 4,8:1)  */

  /* Linien und Kanten */
  --linie:   #E6DFD9;
  --haar:1px solid #E6DFD9;
  --rand:    #8C8C8C;   /* Umriss bedienbarer Elemente        (3,2:1)      */

  /* Rundung. Konsequent weich, aber nicht beliebig: EIN Wert fuer Karten,
     EIN Wert fuer Bilder, Vollpille fuer alles Bedienbare. */
  --rund:12px;
  --rund-bild:16px;
  --pille:45px;

  /* Schriften. Marcellus ist eine ruhige Antiqua mit roemischen
     Proportionen — freundlich, ohne betulich zu sein. Karla daneben ist
     eine Grotesk mit leicht eigenwilligen Formen, laeuft auf 18px. */
  --display:'Marcellus', 'Times New Roman', Georgia, serif;
  --schrift:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1240px;
  --tempo:.4s cubic-bezier(.25,.6,.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.7;
  color:var(--text); background:var(--papier);
  -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:400; line-height:1.14}
:focus-visible{outline:2px solid var(--korall-t); outline-offset:3px; border-radius:4px}

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

.rubrik{
  display:inline-block; font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--korall-t);
}

/* ── 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:700}
.entwurf-band span{flex:1 1 300px; min-width:0}
.entwurf-band a{color:inherit; text-underline-offset:3px}

/* ── Knoepfe ──────────────────────────────────────────────────────────────── */
/* Alles Bedienbare ist eine Vollpille. Das ist die Formsprache dieses
   Entwurfs — im Gegensatz zu Entwurf 1, wo Rundung die Ausnahme ist. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--pille);
  background:var(--korall); color:var(--tinte);
  font-size:.96rem; font-weight:600; text-decoration:none;
  border:1px solid var(--korall); cursor:pointer;
  transition:background var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:var(--korall-hell); border-color:var(--korall-hell)}
.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(--karte); border-color:var(--tinte)}

.knopf-dunkel{background:var(--dunkel); border-color:var(--dunkel); color:var(--hell)}
.knopf-dunkel:hover{background:#3A302D; border-color:#3A302D}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--papier); transition:box-shadow var(--tempo);
}
.kopf[data-gescrollt="1"]{box-shadow:0 1px 0 var(--linie)}
/* position:static, damit das Menue auf dem Handy am STICKY Kopf haengt und
   ueber die volle Breite aufklappt. */
.kopf .wrap{position:static; display:flex; align-items:center; gap:20px; min-height:80px}

.marke{
  font-family:var(--display); font-size:1.68rem; color:var(--tinte);
  text-decoration:none; line-height:1; flex:none;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.63rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise); margin-top:6px;
}

.menue{margin-left:auto; display:flex; gap:8px}
.menue a{
  font-size:.94rem; text-decoration:none; color:var(--text);
  padding:9px 14px; border-radius:var(--pille);
  transition:background var(--tempo), color var(--tempo);
}
.menue a:hover{background:var(--blass); color:var(--tinte)}

.burger{
  display:none; width:46px; height:46px; margin-left:auto;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--pille);
  position:relative;
}
.burger i{
  position:absolute; left:13px; width:19px; height:1.5px; background:var(--tinte);
  border-radius:2px;
  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: geteilt ──────────────────────────────────────────────────────── */
.buehne{padding:clamp(34px, 4.6vw, 76px) 0 clamp(30px, 4vw, 60px)}
.buehne .wrap{
  display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:clamp(30px, 4vw, 64px); align-items:center;
}
.buehne h1{
  font-size:clamp(2.5rem, 5.4vw, 4.1rem); letter-spacing:-.012em; margin-top:16px;
}
.buehne .lead{margin-top:22px; max-width:48ch; font-size:clamp(1.02rem, 1.2vw, 1.14rem)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.buehne-bild{border-radius:var(--rund-bild); overflow:clip; background:var(--blass)}
.buehne-bild img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}

/* ── Zusagen: drei Versprechen ───────────────────────────────────────────────── */
.zusagen{background:var(--blass); padding:clamp(22px, 2.6vw, 34px) 0}
.zusagen ul{
  list-style:none; display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px clamp(20px, 3vw, 44px);
}
.zusagen li{display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start}
.zusagen svg{width:22px; height:22px; fill:var(--korall-t); margin-top:5px}
.zusagen b{display:block; font-weight:600; color:var(--tinte)}
.zusagen span{display:block; font-size:.92rem; color:var(--leise); margin-top:2px}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(56px, 6.6vw, 108px) 0}
.block-kopf{max-width:62ch; margin-bottom:clamp(30px, 3.6vw, 52px)}
.block-kopf h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); margin-top:12px}
.block-kopf .lead{margin-top:16px; max-width:58ch}

/* ── Leistungen: weiche Karten ────────────────────────────────────────────── */
.karten{
  list-style:none; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}
.karten li{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  padding:26px 26px 28px; display:flex; flex-direction:column;
  translate:0 0; transition:translate var(--tempo), border-color var(--tempo);
}
.karten li:hover{translate:0 -3px; border-color:var(--korall)}
.karten h3{font-size:1.34rem; margin-bottom:10px}
.karten p{font-size:.96rem; flex:1}
/* Der Preis sitzt als Pille am Kartenboden — margin-top:auto haelt ihn dort,
   auch wenn die Texte unterschiedlich lang sind. */
.karten .preis{
  margin-top:18px; align-self:flex-start;
  background:var(--blass); color:var(--korall-t); border-radius:var(--pille);
  padding:7px 16px; font-size:.92rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.preis-fuss{
  margin-top:26px; max-width:62ch; font-size:.96rem; color:var(--leise);
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  padding:20px 24px;
}

/* ── Galerie: Streifen zum Wischen ────────────────────────────────────────── */
/* Bewusst KEIN Raster. Der Streifen ist breiter als der Bildschirm, die letzte
   sichtbare Karte wird angeschnitten — daran erkennt man ohne Beschriftung,
   dass es seitlich weitergeht. Der Hinweis darunter sagt es zusaetzlich. */
.wischen{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(76vw, 380px);
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:20px;
  padding-bottom:14px;
  /* Am Schreibtisch bleibt der Streifen in der Spalte; die angeschnittene
     Karte reicht dort als Zeichen. Auf dem Handy laeuft er bis an den
     Bildschirmrand — das steht weiter unten im Handy-Block. Bewusst ohne vw
     gerechnet: vw zaehlt die Scrollleiste mit und liesse die Seite
     waagerecht ueberlaufen. */
  margin-right:0;
  scrollbar-width:thin;
}
.wischen figure{
  scroll-snap-align:start; border-radius:var(--rund-bild); overflow:clip;
  background:var(--blass);
}
.wischen img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.wisch-hinweis{
  margin-top:16px; font-size:.9rem; color:var(--leise);
  display:flex; align-items:center; gap:8px;
}

/* ── Team ─────────────────────────────────────────────────────────────────── */
/* Gespiegelt zu Entwurf 1: dort steht das Portraet links, hier rechts. */
.team .wrap{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(28px, 4vw, 64px); align-items:center;
}
.team-bild{border-radius:var(--rund-bild); overflow:clip; background:var(--blass)}
.team-bild img{width:100%; height:auto}
.team-text h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); margin-top:12px}
.team-text p{margin-top:18px; max-width:56ch}
.team-text .unterschrift{
  margin-top:26px; display:flex; align-items:center; gap:14px;
}
/* Nur der Strich, nicht der Name. Die Regel muss auf die Klasse zeigen — ein
   blosses "span" traefe auch die Huelle um Name und Titel und quetschte sie
   auf 44 Pixel zusammen. */
.team-text .unterschrift .strich{
  width:44px; height:1px; background:var(--korall); flex:none;
}
.team-text .unterschrift b{font-family:var(--display); font-weight:400; font-size:1.3rem; color:var(--tinte)}
.team-text .unterschrift small{display:block; font-size:.88rem; color:var(--leise)}

/* ── Buchung: Wege links, Zeiten als Karte rechts ─────────────────────────── */
.buchung{background:var(--blass)}
.buchung .wrap{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(28px, 4vw, 60px); align-items:start;
}
.buchung h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); margin-top:12px}
.buchung .lead{margin-top:16px; max-width:52ch}
.wege{list-style:none; margin-top:28px; display:grid; gap:12px}
.wege a,.wege .kein-link{
  display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  padding:16px 20px; text-decoration:none;
  transition:border-color var(--tempo), translate var(--tempo);
}
.wege a:hover{border-color:var(--korall); translate:0 -2px}
.wege .kreis{
  width:44px; height:44px; border-radius:50%; background:var(--blass);
  display:grid; place-items:center;
}
.wege svg{width:20px; height:20px; fill:var(--korall-t)}
.wege b{display:block; color:var(--tinte); font-weight:600}
.wege small{display:block; font-size:.9rem; color:var(--leise); margin-top:2px}
.wege .pf{font-size:1.15rem; color:var(--leise)}

.zeiten-karte{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  padding:clamp(22px, 2.6vw, 30px);
}
.zeiten-karte h3{font-size:1.3rem; margin:10px 0 16px}
.zeiten-karte dl{font-size:.96rem}
.zeiten-karte div{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-top:var(--haar);
}
.zeiten-karte dt{color:var(--text)}
.zeiten-karte dd{color:var(--tinte); font-weight:600; font-variant-numeric:tabular-nums}
.zeiten-karte p{margin-top:18px; font-size:.9rem; color:var(--leise)}

/* ── Fragen: Aufklapper ───────────────────────────────────────────────────── */
.aufklapper{display:grid; gap:10px; max-width:900px}
.aufklapper details{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  overflow:clip;
}
.aufklapper summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 22px; cursor:pointer; list-style:none;
  font-weight:600; color:var(--tinte); font-size:1.04rem;
}
.aufklapper summary::-webkit-details-marker{display:none}
/* Das Zeichen ist ein Plus, das sich beim Oeffnen zum Minus dreht — mit
   zwei Strichen gebaut, damit keine Schriftart noetig ist. */
.aufklapper summary .zeichen{
  position:relative; width:16px; height:16px; flex:none;
}
.aufklapper summary .zeichen::before,
.aufklapper summary .zeichen::after{
  content:""; position:absolute; left:0; top:7.5px; width:16px; height:1.5px;
  background:var(--korall-t); border-radius:2px; transition:rotate var(--tempo);
}
.aufklapper summary .zeichen::after{rotate:90deg}
.aufklapper details[open] summary .zeichen::after{rotate:0deg}
.aufklapper details[open] summary{border-bottom:var(--haar)}
.aufklapper .antwort{padding:16px 22px 22px; font-size:.98rem; max-width:70ch}

/* ── Kontakt ──────────────────────────────────────────────────────────────── */
.kontakt .wrap{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(28px, 4vw, 60px); align-items:start;
}
.kontakt h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); margin-top:12px}
.kontakt .lead{margin-top:16px; max-width:52ch}
.formular{
  margin-top:28px; background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rund); padding:clamp(22px, 2.6vw, 32px);
}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block; font-size:.88rem; font-weight:600; color:var(--tinte); margin-bottom:7px;
}
/* Hier steht --rand und nicht --linie. Die feine Trennlinie ist zum Trennen
   von Textbloecken gedacht; als Umriss eines Eingabefeldes ist sie zu schwach
   — auf der hellen Fuellung waeren das 1,3:1, man saehe das Feld praktisch
   nicht. --rand liegt bei 3,2:1 und ist genau dafuer da. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 16px; background:var(--papier);
  border:1px solid var(--rand); border-radius:10px; 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:2px solid var(--korall-t); outline-offset:1px; border-color:transparent;
}
.feld textarea{min-height:130px; resize:vertical; line-height:1.6}
.feld select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--tinte) 50%),
                   linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:46px;
}
.form-fuss{margin-top:16px; font-size:.88rem; color:var(--leise); max-width:56ch}
.form-fuss a{color:var(--korall-t)}

.kontakt-daten{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund);
  padding:clamp(22px, 2.6vw, 32px);
}
.kontakt-daten h3{font-size:1.44rem; margin:10px 0 18px}
.kontakt-liste{list-style:none}
.kontakt-liste li{
  display:grid; grid-template-columns:22px 1fr; gap:14px;
  padding:14px 0; border-top:var(--haar);
}
.kontakt-liste li:first-child{border-top:0; padding-top:0}
.kontakt-liste svg{width:19px; height:19px; fill:var(--korall-t); margin-top:5px}
.kontakt-liste b{display:block; font-weight:600; color:var(--tinte)}
/* Der Link fuellt die Zeile, damit man ihn mit dem Daumen sicher trifft. Als
   reiner Inline-Text waere die Trefferflaeche nur so hoch wie die Zeile. */
.kontakt-liste b a{display:block; padding:5px 0; margin:-5px 0; text-decoration:none}
.kontakt-liste b a:hover{text-decoration:underline}
.kontakt-liste small{display:block; font-size:.89rem; color:var(--leise); margin-top:2px}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--dunkel); color:var(--hell-matt); padding:clamp(44px, 5vw, 74px) 0 0}
.fuss-gitter{
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap:30px clamp(24px, 3vw, 54px);
}
.fuss .marke{color:var(--hell)}
.fuss .marke small{color:var(--hell-leise)}
.fuss p{margin-top:16px; max-width:40ch; font-size:.94rem}
.fuss h3{
  font-family:var(--schrift); font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hell-leise);
  margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.94rem}
/* Die 7 Pixel stehen zweimal da, und das mit Absicht: am Listenpunkt sorgen
   sie fuer den gleichen Zeilenabstand bei Eintraegen ohne Link (der Anschrift),
   am Link ziehen sie die Trefferflaeche auf dieselbe Hoehe. Der negative
   Aussenabstand hebt die Polsterung des Listenpunkts dabei wieder auf, damit
   nichts doppelt zaehlt. Sonst stuenden im Fuss lauter 18 Pixel hohe Ziele
   uebereinander — auf dem Handy trifft man da staendig daneben. */
.fuss li{padding:7px 0}
.fuss li a{display:block; margin:-7px 0; padding:7px 0; text-decoration:none}
.fuss li a:hover{color:var(--hell); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(34px, 4vw, 54px); padding:20px 0;
  border-top:1px solid #453B37;
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  font-size:.84rem; color:var(--hell-leise);
}
.fuss-unten a{display:inline-block; padding:6px 0}

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

/* ── Sanftes Einblenden ───────────────────────────────────────────────────── */
/* Stufe 1: kuerzerer Weg als in Entwurf 1, dafuer etwas laenger. Der
   Unterschied ist klein und trotzdem spuerbar — dieser Entwurf soll ruhiger
   wirken, nicht schneller. */
html.js .zeig{opacity:0; translate:0 12px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .65s ease calc(var(--i, 0) * 75ms),
             translate .65s cubic-bezier(.25,.6,.3,1) calc(var(--i, 0) * 75ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .buehne .wrap,.team .wrap,.buchung .wrap,.kontakt .wrap{grid-template-columns:1fr}
  .buehne-bild img{aspect-ratio:16/10}
  .team-bild{max-width:420px}
  .zusagen ul{grid-template-columns:1fr; gap:12px}
}

@media (max-width:820px){
  .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:14px 12px; border-top:var(--haar); border-radius:0; font-size:1.02rem}
  .kopf .knopf{display:none}
  .burger{display:block}
}

@media (max-width:640px){
  body{font-size:17px}
  .feld-paar{grid-template-columns:1fr; gap:0}
  .fuss-gitter{grid-template-columns:1fr}
  /* Hier laeuft der Streifen bis an den Bildschirmrand: die Spalte hat auf
     dem Handy genau 20 px Luft nach aussen, die holt der negative Rand
     zurueck. Deshalb steht hier -20px und keine Rechnung. */
  .wischen{grid-auto-columns:82vw; margin-right:-20px}

  .daumen{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:var(--papier); border-top:1px solid var(--linie);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .daumen .knopf{padding:13px 10px; font-size:.92rem}
  body{padding-bottom:78px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
  .wischen{scroll-behavior:auto}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Dieser Entwurf ist der weiche der drei — also bekommen auch die
   Pflichtseiten Rundung, Karte und die warme Buntfarbe. Der Hinweiskasten
   ist eine blasse Korallflaeche mit farbigem Balken links; die Aufzaehlung
   bekommt einen Punkt in Korall statt eines Strichs. Der Lesetext bleibt bei
   68 Zeichen — ein Rechtstext ueber die volle Breite von 1240 px liest sich
   sonst wie ein Formular. */
.rechts-kopf{padding:clamp(40px, 5vw, 74px) 0 clamp(22px, 3vw, 36px)}
.rechts-kopf h1{font-size:clamp(2.1rem, 4.2vw, 3.2rem); margin-top:10px}
.rechts-kopf .lead{margin-top:16px; max-width:56ch; 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(52px, 6vw, 92px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{
  max-width:68ch;
}
.rechtstext section{border-top:var(--haar); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.3rem, 2.1vw, 1.7rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:700;
  margin:22px 0 8px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px; text-wrap:pretty}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{margin:0 0 14px; list-style:none}
.rechtstext ul li{color:var(--text); padding-left:20px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:2px; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--korall);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:700; 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}
/* Korall als Schrift immer im dunklen Wert — siehe Kopfkommentar. */
.rechtstext a{color:var(--korall-t); text-underline-offset:3px}

.rechts-hinweis{
  background:var(--blass); border-left:4px solid var(--korall);
  border-radius:0 var(--rund) var(--rund) 0;
  padding:20px 24px; margin:26px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte)}
.rechts-hinweis p{font-size:.94rem; margin-bottom:0}

/* Der Rueckweg sieht aus wie die Knoepfe der Seite: Vollpille, warme
   Flaeche, dunkle Schrift darauf. */
/* 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 —
   der Knopf haette dann Schrift und Flaeche in derselben Farbe. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.95rem; font-weight:700; color:var(--tinte);
  background:var(--korall); border-radius:var(--pille);
  padding:13px 26px; margin-top:38px;
  transition:background var(--tempo);
}
.rechtstext .zurueck:hover{background:var(--korall-hell)}