/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf 2 — „Tageslicht"
   Jonas Vogt Fotografie · Muenster

   Haltung
   Der erste Entwurf haengt Bilder an eine dunkle Wand. Dieser hier legt sie
   auf einen Tisch am Fenster und erzaehlt dazu. Warmes Papierweiss, eine
   Serifenschrift, die man wirklich liest, und Text, der nie ohne Bild kommt
   und Bild, das nie ohne Text kommt. Gedacht fuer Familien und Paare: die
   fragen sich nicht „ist der gut", sondern „wie ist das mit dem".

   Der Radius-Vertrag
   Flaechen sind rund (20px), Fotografien sind es nicht (0px). Ein
   abgerundetes Foto sieht aus wie ein Aufkleber; eine abgerundete Karte sieht
   aus wie Papier mit weicher Kante. Diese Regel gilt ohne Ausnahme, auch bei
   den Knoepfen — die sind ganz rund, weil sie keine Bilder sind.

   Wo dieser Entwurf anders gebaut ist als 1 und 3
   · Buehne   — zwei Spalten: Text links, ein einziges Hochformat rechts.
                (1: ganzflaechiges Bild. 3: Zwoelfer-Raster mit Metaspalte.)
   · Anlaesse — sechs weiche Karten, reiner Text, Ab-Preis als Fusszeile.
                (1: Haarlinien-Zeilen. 3: nummerierte Rasterfelder.)
   · Galerie  — Bild und Text im Wechsel, dazu ein Wischstreifen fuers
                Handwerk. (1: fugenlose Ausstellungswand. 3: strenges
                Dreispalten-Raster mit Bildunterschriften.)
   · Ablauf   — senkrechte Zeitleiste mit durchgehender Linie.
                (1: fuenf Spalten nebeneinander.)
   · Pakete   — drei Karten, die mittlere hervorgehoben und angehoben.
                (1: breite Zeilen. 3: eine echte Tabelle.)
   · Fragen   — offenes Zweispalten-Raster, alle Antworten sichtbar.
                (1: Aufklapper. 3: Randspalte.)
   · Anfrage  — weisse Karte neben einer Textspalte.
                (1: eine Spalte mit Unterstrich-Feldern. 3: Formular rechts.)

   Aufbau dieser Datei
   1 Marken-Kontrakt · 2 Grundlagen · 3 Bausteine · 4 Kopf · 5 Buehne
   6 Zeile · 7 Anlaesse · 8 Wechsel · 9 Streifen · 10 Person · 11 Ablauf
   12 Pakete · 13 Fragen · 14 Anfrage · 15 Fuss · 16 Bewegung
   17 Umbrueche · 18 Rechtstexte
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · Marken-Kontrakt ──────────────────────────────────────────────────
   Alle Kontraste sind gerechnet, nicht geschaetzt. Die Zahl hinter jedem
   Wert sagt, worauf die Farbe liegen darf. Wer hier etwas aendert, rechnet
   nach — sonst faellt der Entwurf leise unter die Barrierefreiheit. */
:root{
  /* Grundflaechen — warmes Papier, kein kaltes Weiss */
  --grund:   #F6F1E9;
  --flaeche: #FFFFFF;
  --matt:    #EFE7DA;   /* zweiter Grund fuer abgesetzte Baender          */

  /* Schrift */
  --tinte:   #2A211A;   /* Ueberschriften  (Grund 14,0:1 · Weiss 15,8:1)  */
  --text:    #5A4E44;   /* Lesetext        (Grund  7,2:1 · Weiss  8,1:1)  */
  --leise:   #756658;   /* Beiwerk         (Grund  4,9:1 · Matt   4,5:1)  */
  --auf-dunkel:#FDFBF7; /* Schrift auf Ocker                              */

  /* Akzent — genau einer. Erdiges Ocker, kein Gold, kein Rot. */
  --ocker:   #9C5B39;   /* auf Grund 4,7:1 · auf Weiss 5,3:1
                           Weiss auf Ocker: 5,3:1 — beides ueber 4,5:1     */
  --ocker-matt:#F1E3D8; /* Ockerhauch fuer hervorgehobene Flaechen        */

  /* Linien */
  --linie:   #E4DCD0;   /* reine Trennlinie, nie Schrift                  */
  --haar:1px solid #E4DCD0;
  --feldrand:#8C7B65;   /* Formularrand (Grund 3,6:1 · Weiss 4,1:1)       */

  /* Schriften */
  --display:'Newsreader', Georgia, 'Times New Roman', serif;
  --schrift:'Newsreader', Georgia, 'Times New Roman', serif;
  --klein:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Mass */
  --spalte:1180px;      /* schmaler als Entwurf 1: hier wird gelesen      */
  --bogen:20px;         /* Flaechen                                       */
  --bogen-klein:14px;
  --tempo:.55s cubic-bezier(.22,.68,.36,1);
}


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

html{
  scroll-behavior:smooth;
  /* Der Kopf klebt oben. Ohne diesen Abstand schoebe ein Sprungziel seine
     Ueberschrift unter den Kopf. */
  scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--schrift);
  /* Grosser Lesetext ist in dieser Branche kein Geschmack, sondern Funktion:
     die Seite wird oft abends auf dem Sofa gelesen. */
  font-size:clamp(1.06rem, .96rem + .34vw, 1.25rem);
  line-height:1.72;
  font-weight:400;
  /* clip statt hidden: schneidet den Ueberhang ab, ohne aus dem Body einen
     eigenen Scrollbehaelter zu machen — sonst stirbt position:sticky. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--display); color:var(--tinte);
  font-weight:400; line-height:1.16; margin:0;
  letter-spacing:-.012em;
}
h1{font-size:clamp(2.5rem, 1.6rem + 3.6vw, 4.2rem)}
h2{font-size:clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem)}
h3{font-size:clamp(1.25rem, 1.05rem + .7vw, 1.6rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
em{font-style:italic; color:var(--ocker)}

a{color:inherit}
button{font:inherit; color:inherit}

/* Ein sichtbarer Fokusring, ueberall gleich. Wer mit der Tastatur unterwegs
   ist, muss jederzeit sehen koennen, wo er steht. */
:focus-visible{
  outline:2px solid var(--ocker);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}

/* Nur fuer Vorleseprogramme — sichtbar, sobald jemand hintabbt. */
.nur-vorleser{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ocker); color:var(--auf-dunkel);
  padding:12px 20px; border-radius:0 0 var(--bogen-klein) 0;
  font-family:var(--klein); font-size:.9rem; text-decoration:none;
}
.nur-vorleser:focus{left:0}

h2.nur-vorleser,h3.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; left:auto; padding:0;
}


/* ── 3 · Bausteine ───────────────────────────────────────────────────────── */

/* Entwurfs-Band — verschwindet mit dem Entwurfsstatus. */
.entwurf-band{background:var(--tinte); color:#EFE6DA; font-family:var(--klein)}
.entwurf-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  padding:9px 0; font-size:.79rem; line-height:1.5;
}
.entwurf-band b{color:#FFFFFF; font-weight:700}
.entwurf-band span{color:#CDBFAF}   /* auf #2A211A: 9,1:1 */
.entwurf-band a{color:#E8B98F; margin-left:auto; text-underline-offset:3px}

/* Rubrik — die kleine Zeile ueber jeder Ueberschrift. Serifenlos, damit sie
   sich von der Ueberschrift absetzt statt mit ihr zu verschmelzen. */
.rubrik{
  display:inline-block; font-family:var(--klein);
  font-size:.72rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ocker); margin-bottom:14px;
}

/* Knoepfe — ganz rund. Sie sind keine Bilder, also duerfen sie weich sein. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--ocker); color:var(--auf-dunkel);
  font-family:var(--klein); font-size:.95rem; font-weight:600;
  text-decoration:none; padding:14px 28px; border:1px solid var(--ocker);
  border-radius:999px; cursor:pointer;
  transition:background var(--tempo), color var(--tempo), transform var(--tempo);
}
.knopf:hover{background:#84492B; border-color:#84492B; transform:translateY(-1px)}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}
.knopf-leer{
  background:transparent; color:var(--tinte); border-color:var(--feldrand);
}
.knopf-leer:hover{background:var(--tinte); color:var(--auf-dunkel); border-color:var(--tinte)}


/* ── 4 · Kopf ─────────────────────────────────────────────────────────────
   Anders als in Entwurf 1 liegt der Kopf hier nicht ueber dem Bild, sondern
   auf dem Papier — die Buehne beginnt darunter. Deshalb hat er von Anfang an
   einen Grund und braucht kein Scroll-Skript, um lesbar zu werden. */
.kopf{
  position:sticky; top:0; z-index:40;
  background:rgba(246,241,233,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:var(--haar);
}
/* position:static, damit das aufgeklappte Menue am STICKY Kopf haengt und
   nicht an der Wrap-Breite. */
.kopf .wrap{position:static; display:flex; align-items:center; gap:22px; min-height:82px}

.marke{
  font-family:var(--display); font-size:1.75rem; color:var(--tinte);
  text-decoration:none; line-height:1; flex:none;
}
.marke small{
  display:block; font-family:var(--klein); font-size:.6rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--leise); margin-top:7px;
}

.menue{margin-left:auto; display:flex; gap:28px}
.menue a{
  font-family:var(--klein); font-size:.88rem; font-weight:500;
  text-decoration:none; color:var(--tinte); padding:8px 0; position:relative;
}
.menue a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px;
  height:1px; background:var(--ocker); transition:right var(--tempo);
}
.menue a:hover::after{right:0}

.burger{
  display:none; margin-left:auto; width:46px; height:46px;
  background:none; border:1px solid var(--linie); border-radius:999px;
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger i{display:block; width:19px; height:1.5px; background:var(--tinte); border-radius:2px}


/* ── 5 · Buehne — zwei Spalten ────────────────────────────────────────────
   Links steht, was jemand wissen muss, bevor er weiterliest. Rechts ein
   einziges Bild im Hochformat. Kein Karussell: ein Karussell sagt „wir
   konnten uns nicht entscheiden". */
.buehne{padding:clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 76px)}
.buehne-gitter{
  display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.buehne h1{margin-bottom:22px}
.buehne .lead{font-size:1.14em; color:var(--text); max-width:34ch}
.buehne-tun{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* Das Bild bleibt in seinem eigenen Seitenverhaeltnis (4:5). Nichts wird
   beschnitten — der Ausschnitt ist die Entscheidung des Fotografen, nicht
   die des Rasters. */
.buehne-bild{position:relative}
.buehne-bild img{width:100%; border-radius:0}
/* Der kleine Zettel am Bild: ein Ort und ein Licht, mehr nicht. */
.buehne-zettel{
  position:absolute; left:-18px; bottom:26px;
  background:var(--flaeche); border-radius:var(--bogen-klein);
  padding:14px 20px; box-shadow:0 12px 30px rgba(42,33,26,.13);
  font-family:var(--klein); font-size:.8rem; line-height:1.5; max-width:210px;
}
.buehne-zettel b{display:block; color:var(--tinte); font-weight:700; margin-bottom:2px}
.buehne-zettel span{color:var(--leise)}


/* ── 6 · Zeile ────────────────────────────────────────────────────────────
   Drei Zusagen, die man einhalten kann. Keine Auszeichnungen, keine Zahlen,
   die niemand nachpruefen kann. */
.zeile{background:var(--matt); border-block:var(--haar)}
.zeile ul{
  list-style:none; margin:0; padding:clamp(24px, 3vw, 38px) 0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px 36px;
}
.zeile li{display:flex; flex-direction:column; gap:3px}
.zeile b{font-family:var(--display); font-size:1.2rem; color:var(--tinte); font-weight:500}
.zeile span{font-family:var(--klein); font-size:.86rem; color:var(--leise); line-height:1.5}


/* ── 7 · Anlaesse — weiche Karten ─────────────────────────────────────────
   Reiner Text. Die Bilder kommen weiter unten und bekommen dort ihren Platz;
   hier geht es um die Frage „was davon bin ich". */
.anlaesse{padding:clamp(56px, 7vw, 108px) 0}
.abschnitt-kopf{max-width:60ch; margin-bottom:clamp(30px, 3.6vw, 52px)}
.abschnitt-kopf p{margin-top:16px; color:var(--text)}

.karten{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 1.8vw, 26px);
}
.karte{
  background:var(--flaeche); border:var(--haar); border-radius:var(--bogen);
  padding:30px 30px 24px; display:flex; flex-direction:column;
  transition:transform var(--tempo), box-shadow var(--tempo);
}
.karte:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(42,33,26,.09)}
.karte h3{margin-bottom:10px}
.karte p{font-size:.94em; color:var(--text)}
.karte .ab{
  margin-top:auto; padding-top:18px; border-top:var(--haar);
  font-family:var(--klein); font-size:.85rem; color:var(--leise);
}
.karte .ab b{color:var(--ocker); font-weight:700}


/* ── 8 · Wechsel — Bild und Text abwechselnd ──────────────────────────────
   Das Herzstueck dieses Entwurfs. Jeder Block dreht die Reihenfolge um. Das
   macht kein Skript und keine zweite Auszeichnung: die Zeilen werden im
   Raster einfach getauscht. Bilder behalten ihr Format. */
.wechsel{padding:clamp(20px, 3vw, 40px) 0 clamp(56px, 7vw, 100px)}
.wechsel-block{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 4.4vw, 64px); align-items:center;
  padding:clamp(30px, 4vw, 58px) 0;
}
.wechsel-block + .wechsel-block{border-top:var(--haar)}
/* Jeder zweite Block dreht sich. grid-column statt „direction" oder
   „order" — so bleibt die Vorlesereihenfolge Bild → Text in beiden Faellen. */
.wechsel-block:nth-child(even) .wechsel-bild{grid-column:2; grid-row:1}
.wechsel-block:nth-child(even) .wechsel-text{grid-column:1; grid-row:1}

.wechsel-bild figure{margin:0}
.wechsel-bild img{width:100%; border-radius:0}
.wechsel-bild figcaption{
  font-family:var(--klein); font-size:.8rem; color:var(--leise);
  margin-top:12px; padding-left:14px; border-left:2px solid var(--ocker);
}
.wechsel-text h3{margin-bottom:14px; font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)}
.wechsel-text p{color:var(--text)}
.wechsel-text ul{list-style:none; margin:18px 0 0; padding:0}
.wechsel-text li{
  position:relative; padding-left:24px; margin-bottom:8px;
  font-size:.94em; color:var(--text);
}
.wechsel-text li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:11px; height:1px; background:var(--ocker);
}
.wechsel-text .weiter{
  display:inline-block; margin-top:22px; font-family:var(--klein);
  font-size:.9rem; font-weight:600; color:var(--ocker);
  text-decoration:none; border-bottom:1px solid var(--ocker); padding-bottom:3px;
}
.wechsel-text .weiter:hover{color:var(--tinte); border-bottom-color:var(--tinte)}


/* ── 9 · Streifen — Handwerk zum Wischen ──────────────────────────────────
   Ein waagerechter Streifen mit Rasterschritt. Auf dem Handy wischt man ihn,
   am Rechner rollt man ihn mit gedrueckter Umschalttaste — beides ohne
   Skript. Die Bilder sind bewusst klein: sie zeigen Werkzeug, nicht Kundschaft. */
.streifen-block{background:var(--matt); border-block:var(--haar); padding:clamp(44px, 5.4vw, 76px) 0}
.streifen{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 300px);
  gap:clamp(12px, 1.4vw, 20px); margin-top:clamp(24px, 3vw, 38px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* Der Streifen darf bis an den Bildschirmrand laufen, der Text nicht.
     Deshalb wird der Wrap-Rand hier wieder herausgerechnet. */
  padding-bottom:14px;
  scrollbar-width:thin; scrollbar-color:var(--feldrand) transparent;
}
.streifen figure{margin:0; scroll-snap-align:start}
.streifen img{width:100%; border-radius:0}
.streifen figcaption{
  font-family:var(--klein); font-size:.79rem; color:var(--leise);
  margin-top:10px; line-height:1.5;
}
.streifen-hinweis{
  font-family:var(--klein); font-size:.8rem; color:var(--leise); margin-top:6px;
}


/* ── 10 · Person ──────────────────────────────────────────────────────────
   Ein Hochformat links, daneben der Text. Vorname statt Firmenname, weil die
   Besucherin wissen will, wem sie ihren Tag anvertraut. */
.person{padding:clamp(56px, 7vw, 108px) 0}
.person-gitter{
  display:grid; grid-template-columns:minmax(0, .86fr) minmax(0, 1.14fr);
  gap:clamp(30px, 4.6vw, 68px); align-items:center;
}
.person-bild img{width:100%; border-radius:0}
.person-bild figcaption{
  font-family:var(--klein); font-size:.8rem; color:var(--leise); margin-top:12px;
}
.person-bild figure{margin:0}
.person blockquote{
  margin:26px 0 0; padding:22px 26px;
  background:var(--ocker-matt); border-radius:var(--bogen);
  font-family:var(--display); font-size:1.1em; font-style:italic; color:var(--tinte);
}


/* ── 11 · Ablauf — senkrechte Zeitleiste ──────────────────────────────────
   Fuenf Schritte untereinander an einer durchgehenden Linie. Untereinander
   statt nebeneinander, weil ein Ablauf eine Reihenfolge ist und Menschen
   Reihenfolgen von oben nach unten lesen. */
.ablauf-block{background:var(--matt); border-block:var(--haar); padding:clamp(56px, 7vw, 100px) 0}
.ablauf{list-style:none; margin:clamp(26px, 3.4vw, 46px) 0 0; padding:0; position:relative; max-width:760px}
/* Die Linie liegt hinter den Punkten und endet an der Mitte des letzten
   Punktes — sonst haengt sie unten ins Leere. */
.ablauf::before{
  content:""; position:absolute; left:17px; top:14px; bottom:26px;
  width:1px; background:var(--linie);
}
.ablauf li{position:relative; padding:0 0 30px 60px}
.ablauf li:last-child{padding-bottom:0}
.ablauf li::before{
  content:counter(schritt); counter-increment:schritt;
  position:absolute; left:0; top:0;
  width:35px; height:35px; border-radius:999px;
  background:var(--flaeche); border:1px solid var(--ocker); color:var(--ocker);
  font-family:var(--klein); font-size:.85rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ablauf{counter-reset:schritt}
.ablauf h3{font-size:1.22rem; margin-bottom:6px}
.ablauf p{font-size:.94em; color:var(--text)}
.ablauf .dauer{
  font-family:var(--klein); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--leise);
  display:block; margin-bottom:4px;
}


/* ── 12 · Pakete — drei Karten, die mittlere hervorgehoben ────────────────
   „Hervorgehoben" heisst hier: der passende Umfang fuer die meisten Anlaesse.
   Nicht „meistgebucht" — das waere eine Zahl, die niemand belegen kann. */
.preise{padding:clamp(56px, 7vw, 108px) 0}
.pakete{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 28px); align-items:start;
  margin-top:clamp(28px, 3.6vw, 50px);
}
.paket{
  background:var(--flaeche); border:var(--haar); border-radius:var(--bogen);
  padding:32px 30px; display:flex; flex-direction:column; height:100%;
}
/* Die hervorgehobene Karte steht etwas hoeher und traegt einen Ockerrand.
   Kein Schlagschatten-Wettbewerb: ein Rand genuegt. */
.paket[data-hervor="1"]{
  border:1.5px solid var(--ocker); background:var(--ocker-matt);
  transform:translateY(-14px); padding-bottom:46px;
}
.paket-marke{
  display:inline-block; align-self:flex-start;
  background:var(--ocker); color:var(--auf-dunkel);
  font-family:var(--klein); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 13px; border-radius:999px; margin-bottom:16px;
}
.paket h3{margin-bottom:6px}
.paket .ab{
  font-family:var(--display); font-size:2rem; color:var(--ocker);
  line-height:1.1; margin:12px 0 4px;
}
.paket .ab small{font-family:var(--klein); font-size:.72rem; font-weight:600; color:var(--leise); display:block; margin-top:6px}
.paket ul{list-style:none; margin:20px 0 0; padding:0}
.paket li{
  position:relative; padding-left:26px; margin-bottom:10px;
  font-size:.93em; color:var(--text);
}
.paket li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:999px;
  border:1.5px solid var(--ocker);
}
.paket .knopf{margin-top:26px; width:100%}
.preis-fuss{
  margin-top:clamp(24px, 3vw, 38px); padding:22px 26px;
  background:var(--flaeche); border:var(--haar); border-radius:var(--bogen);
  font-size:.93em;
}
.preis-fuss b{color:var(--tinte); font-weight:600}


/* ── 13 · Fragen — offenes Raster ─────────────────────────────────────────
   Kein Aufklapper. Wer eine Frage hat, soll die Antwort sehen und nicht erst
   suchen muessen, hinter welchem Dreieck sie steckt. */
.fragen-block{background:var(--matt); border-block:var(--haar); padding:clamp(56px, 7vw, 100px) 0}
.fragen{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(22px, 3vw, 44px) clamp(30px, 4vw, 64px);
  margin-top:clamp(26px, 3.4vw, 46px);
}
.frage h3{font-size:1.18rem; margin-bottom:8px}
.frage p{font-size:.94em; color:var(--text)}


/* ── 14 · Anfrage — weisse Karte neben Textspalte ─────────────────────────
   Links steht, was passiert, wenn man schreibt. Rechts das Formular. Die
   Reihenfolge ist Absicht: erst die Beruhigung, dann die Eingabe. */
.anfrage{padding:clamp(56px, 7vw, 108px) 0}
.anfrage-gitter{
  display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(30px, 4.4vw, 64px); align-items:start;
}
.anfrage-wort p{color:var(--text)}
.anfrage-wort .wege{list-style:none; margin:26px 0 0; padding:0}
.anfrage-wort .wege li{margin-bottom:14px}
.anfrage-wort .wege a{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--klein); font-size:.95rem; color:var(--tinte);
  text-decoration:none; border-bottom:1px solid var(--linie); padding-bottom:3px;
}
.anfrage-wort .wege a:hover{border-bottom-color:var(--ocker); color:var(--ocker)}
.anfrage-wort .wege svg{width:19px; height:19px; fill:var(--ocker); flex:none}

.formular-karte{
  background:var(--flaeche); border:var(--haar); border-radius:var(--bogen);
  padding:clamp(26px, 3vw, 40px);
}
.feldpaar{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px}
.feld{margin-bottom:18px; display:flex; flex-direction:column}
.feld label{
  font-family:var(--klein); font-size:.82rem; font-weight:600;
  color:var(--tinte); margin-bottom:7px;
}
.feld label .pflicht{color:var(--ocker)}
/* Umrandete Felder statt Unterstriche (Entwurf 1) — auf hellem Grund ist ein
   geschlossener Rahmen leichter zu treffen. */
.feld input,.feld select,.feld textarea{
  font-family:var(--schrift); font-size:1rem; color:var(--tinte);
  background:var(--grund); border:1px solid var(--feldrand);
  border-radius:var(--bogen-klein); padding:12px 15px; width:100%;
  transition:border-color var(--tempo), background var(--tempo);
}
.feld textarea{min-height:120px; resize:vertical; line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  background:var(--flaeche); border-color:var(--ocker);
}
.feld .hilfe{font-family:var(--klein); font-size:.78rem; color:var(--leise); margin-top:6px}
.formular-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.formular-tun .knopf{flex:1 1 200px}
.versprechen{
  margin-top:20px; padding-top:18px; border-top:var(--haar);
  font-family:var(--klein); font-size:.82rem; color:var(--leise); line-height:1.6;
}
.versprechen a{color:var(--ocker)}


/* ── 15 · Fuss ───────────────────────────────────────────────────────────── */
.fuss{background:var(--tinte); color:#CDBFAF; padding:clamp(46px, 5.4vw, 76px) 0 26px}
.fuss .marke{color:#FDFBF7}
.fuss .marke small{color:#B5A797}   /* auf #2A211A: 7,4:1 */
.fuss-gitter{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px 40px;
  padding-bottom:34px; border-bottom:1px solid #45392F;
}
.fuss-gitter p{margin-top:16px; font-size:.9rem; color:#CDBFAF; line-height:1.7; max-width:38ch}
.fuss h3{
  font-family:var(--klein); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#E8B98F; margin-bottom:14px;
}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:9px; font-size:.9rem}
.fuss a{color:#CDBFAF; text-decoration:none}
.fuss a:hover{color:#FDFBF7; text-decoration:underline; text-underline-offset:3px}
.fuss-unten{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding-top:22px; font-family:var(--klein); font-size:.79rem; color:#B5A797;
}

/* Daumenleiste — nur auf dem Handy, weil der Daumen dort unten liegt. */
.daumen{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
  gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,241,233,.96); border-top:var(--haar);
  backdrop-filter:blur(10px);
}
.daumen .knopf{flex:1; padding:13px 16px; font-size:.9rem}


/* ── 16 · Bewegung ───────────────────────────────────────────────────────
   Ein ruhiges Aufblenden beim Hereinrollen, gestaffelt ueber --i. Ohne
   JavaScript ist alles sofort da — die Klasse „js" setzt das Skript selbst. */
html.js .zeig{opacity:0; translate:0 16px; transition:opacity .7s ease, translate .7s ease}
html.js .zeig[data-da="1"]{opacity:1; translate:none; transition-delay:calc(var(--i, 0) * 80ms)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
  .karte:hover,.knopf:hover{transform:none}
  .streifen{scroll-snap-type:none}
}


/* ── 17 · Umbrueche ──────────────────────────────────────────────────────
   Drei Stufen: 1080 (Menue wird eng), 840 (zwei Spalten fallen auf eine),
   620 (Handy). Ueberall minmax(0,1fr) statt 1fr — sonst zwingt ein langes
   Wort die Spalte breiter als den Bildschirm und der Balken erscheint. */

@media (max-width:1080px){
  .menue{gap:20px}
  .menue a{font-size:.83rem}
  .zeile ul{gap:20px 26px}
}

@media (max-width:900px){
  /* Der Kopfknopf verschwindet zuerst — die Daumenleiste uebernimmt ihn. */
  .kopf .knopf{display:none}
  .burger{display:flex}
  .menue{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--flaeche); border-bottom:var(--haar);
    flex-direction:column; gap:0; padding:8px 20px 18px;
    box-shadow:0 18px 34px rgba(42,33,26,.1);
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-bottom:var(--haar); font-size:1rem}
  .menue a:last-child{border-bottom:none}
  .menue a::after{display:none}
}

@media (max-width:840px){
  html{scroll-padding-top:88px}
  .buehne-gitter,
  .person-gitter,
  .anfrage-gitter{grid-template-columns:minmax(0, 1fr)}
  /* Auf einer Spalte wuerde der Zettel ueber den Rand haengen. */
  .buehne-zettel{position:static; margin-top:16px; max-width:none; box-shadow:none; border:var(--haar)}
  .buehne .lead{max-width:none}
  .karten,.pakete{grid-template-columns:repeat(2, minmax(0, 1fr))}
  /* Die hervorgehobene Karte darf bei zwei Spalten nicht mehr herausragen —
     sie stuende sonst schief neben ihrer Nachbarin. */
  .paket[data-hervor="1"]{transform:none; padding-bottom:32px}
  .wechsel-block{grid-template-columns:minmax(0, 1fr); gap:24px}
  /* Auf einer Spalte kommt immer erst das Bild, dann der Text — sonst
     wechselte die Reihenfolge scheinbar grundlos. */
  .wechsel-block:nth-child(even) .wechsel-bild,
  .wechsel-block:nth-child(even) .wechsel-text{grid-column:1; grid-row:auto}
  .fragen{grid-template-columns:minmax(0, 1fr)}
  .fuss-gitter{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width:620px){
  html{scroll-padding-top:80px}
  .wrap{width:min(100% - 32px, var(--spalte))}
  body{line-height:1.68}
  .kopf .wrap{min-height:70px}
  .marke{font-size:1.5rem}
  .zeile ul{grid-template-columns:minmax(0, 1fr); gap:16px}
  .karten,.pakete{grid-template-columns:minmax(0, 1fr)}
  .feldpaar{grid-template-columns:minmax(0, 1fr); gap:0}
  .formular-tun .knopf{flex:1 1 100%}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr); gap:28px}
  .streifen{grid-auto-columns:minmax(200px, 74vw)}
  .daumen{display:flex}
  /* Platz fuer die Daumenleiste, damit der Fuss nicht darunter verschwindet. */
  body{padding-bottom:78px}
  .ablauf li{padding-left:52px}
  .ablauf::before{left:15px}
  .ablauf li::before{width:31px; height:31px}
}


/* ── 18 · Rechtstexte (Impressum, Datenschutz) ────────────────────────────
   Derselbe warme Grund, dieselbe Serifenschrift. Die Zeile bleibt bei 68
   Zeichen: laenger wird eine Datenschutzerklaerung unlesbar, und gerade die
   soll gelesen werden. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 80px) 0 clamp(22px, 3vw, 34px)}
/* Bei 375px passt „Datenschutzerklaerung" nicht in eine Zeile. Der weiche
   Trennstrich im HTML gibt die Bruchstelle vor, hyphens ist das Netz darunter. */
.rechts-kopf h1{font-size:clamp(2.1rem, 4.4vw, 3.3rem); hyphens:auto; overflow-wrap:break-word}
.rechts-kopf .lead{margin-top:16px; max-width:56ch; font-size:1.02em}
.rechtstext{padding-bottom:clamp(54px, 6vw, 94px)}
.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.4rem, 2.3vw, 1.95rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--klein); font-size:.98rem; font-weight:700;
  margin:22px 0 8px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px; font-size:.97em}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext strong{color:var(--tinte); font-weight:600}
.rechtstext ul{margin:0 0 14px; list-style:none; padding:0}
.rechtstext ul li{color:var(--text); padding-left:24px; position:relative; margin-bottom:8px; font-size:.97em}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:11px; height:1px; background:var(--ocker);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-family:var(--klein); font-weight:700; font-size:.9rem; color:var(--tinte); margin-top:16px}
.rechtstext dd{margin:3px 0 0; color:var(--text)}
.rechtstext address{font-style:normal; color:var(--text); line-height:1.9}
.rechtstext a{color:var(--ocker); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--ocker-matt); border-radius:var(--bogen);
  padding:22px 26px; margin:24px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--tinte); font-family:var(--klein); font-size:.92rem}
.rechts-hinweis p{font-size:.93em; margin-bottom:0}
/* Bewusst „.rechtstext .zurueck" und nicht nur „.zurueck": die Regel fuer
   Links im Rechtstext weiter oben ist spezifischer als eine einzelne Klasse
   und wuerde die Schriftfarbe sonst ueberschreiben. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--klein); font-size:.9rem; font-weight:600;
  color:var(--ocker); border-bottom:1px solid var(--ocker);
  padding-bottom:4px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--tinte); border-bottom-color:var(--tinte)}