/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 1 — „Dunkelkammer"
   Jonas Vogt · Fotograf in Muenster

   Haltung: Bei einem Fotografen IST die Website das Portfolio. Also tritt alles
   zurueck, was kein Bild ist. Der Grund ist ein warmes Fast-Schwarz (#0E0D0C,
   nie #000000 — Reinschwarz laesst dunkle Bildpartien absaufen und macht den
   Rand hart). Die Bilder haengen randlos wie an einer Ausstellungswand: ein
   Raster, ueberall derselbe schmale Spalt dazwischen, keine Rahmen, keine
   Schatten, keine Rundung. Der Abstand IST der Rahmen.

   Radius: 0px — ausnahmslos, auch an Knoepfen und Feldern. Ein Bild mit runden
   Ecken sieht aus wie ein App-Icon und nicht wie ein Abzug; und wenn das Bild
   scharfkantig ist, darf der Knopf daneben es nicht sein.

   Farbe: keine. Genau EIN gedaempfter Akzent (Messing) und der taucht nur in
   Linien, Ziffern und Unterstrichen auf — nie als Flaeche neben einem Foto,
   weil jede gesaettigte Flaeche dem Bild die Farbe stiehlt. Der Haupt-Knopf ist
   deshalb schlicht die Tinte selbst: helle Flaeche, dunkle Schrift.

   Aufbau — worin sich dieser Entwurf von 2 und 3 unterscheidet. Nicht Farbe,
   sondern Architektur:
     · Buehne   — EIN ganzflaechiges Bild, Text als Ueberlagerung unten links.
                  (Entwurf 2: zweispaltig, Text neben dem Bild. Entwurf 3:
                  Spaltenraster mit Meta-Spalte, Bildband darunter.)
     · Anlaesse — sechs grosse Typo-Zeilen auf Haarlinien, Ab-Preis rechts.
                  (Entwurf 2: sechs weiche Karten. Entwurf 3: sechs Felder im
                  strengen Raster mit Ordnungsziffer.)
     · Galerie  — randlose Ausstellungswand, 2px Spalt, Werkliste darunter.
                  (Entwurf 2: Bild und Text im Wechsel plus Wischleiste.
                  Entwurf 3: strenges Drei-Spalten-Raster mit Bildunterschrift.)
     · Pakete   — drei breite Zeilen, Ab-Preis als grosse Ziffer rechts.
                  (Entwurf 2: drei gerundete Karten, mittlere hervorgehoben.
                  Entwurf 3: eine echte Tabelle mit Kopfzeile.)
     · Anfrage  — einspaltig unter einer riesigen Ueberschrift, Felder nur mit
                  Unterstrich. (Entwurf 2: weisse Karte neben einer Textspalte.
                  Entwurf 3: Formular rechts im Zwoelfer-Raster.)

   Grundlage: Recherche-Protokoll „referenzen.md" (Fotograf), Richtung
   „Passepartout", Farbwelt dunkel. Das wortlose Bildraster stammt aus der
   Auswertung von Dirk Moeller, die dunkle Buehne aus Axel Lent Pictures — mit
   dem dort notierten Fehler ausdruecklich vermieden: dunkel entbindet nicht vom
   Antworten. Preis, Ablauf und Anfrageweg stehen auch hier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────────
   Alles Farbige haengt an diesen Werten. Die Verhaeltnisse in Klammern sind
   nachgerechnet, nicht geschaetzt. */
:root{
  /* Flaechen */
  --grund:   #0E0D0C;   /* Seitengrund — warmes Fast-Schwarz, nie #000000     */
  --flaeche: #171512;   /* abgesetzte Baender, Formularfeld-Grund             */
  --spalt:   #0E0D0C;   /* die Fuge zwischen den Bildern der Wand             */

  /* Schrift */
  --tinte:   #F3F0EB;   /* Ueberschriften   (auf Grund 17,1:1 · Flaeche 16,0:1) */
  --text:    #B0A79E;   /* Fliesstext       (auf Grund  8,2:1 · Flaeche  7,7:1) */
  --leise:   #8C8378;   /* Meta, Katalogzeilen (Grund 5,2:1 · Flaeche 4,9:1)  */
  --auf-hell:#0E0D0C;   /* Schrift auf heller Flaeche          (17,1:1)       */

  /* Der eine Akzent. Messing — nur Linien, Ziffern, Unterstriche. */
  --messing: #C9A87C;   /* auf Grund 8,7:1 · auf Flaeche 8,1:1                */

  /* Linien und Umrisse */
  --linie:   #2A2622;   /* Haarlinie zwischen Bloecken                        */
  --haar:1px solid #2A2622;
  --rand:    #8C8378;   /* Umriss/Unterstrich bedienbarer Elemente (5,2:1)    */

  /* Schriften. Instrument Serif gibt es nur in einem Schnitt — genau das ist
     der Punkt: Die Schrift KANN nicht fett werden, Hierarchie entsteht also
     ueber Groesse und Weissraum. Sie ist schmal geschnitten, was lange deutsche
     Ueberschriften auf dem Handy rettet. Manrope daneben ist bewusst ohne
     Eigensinn — sie soll nicht mitreden. */
  --display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --schrift:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1280px;
  --bogen:0px;          /* der Radius dieses Entwurfs: keiner                 */
  --tempo:.5s cubic-bezier(.22,.68,.36,1);
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--schrift); font-size:20px; line-height:1.62;
  color:var(--text); background:var(--grund);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* clip statt hidden: verhindert den waagerechten Rollbalken, ohne dass
     position:sticky im Kopf seine Verankerung verliert. */
  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.04}
h1 em,h2 em,h3 em{font-style:italic}
:focus-visible{outline:2px solid var(--messing); outline-offset:3px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.nur-vorleser:focus{
  position:fixed; top:10px; left:10px; z-index:99;
  width:auto; height:auto; clip-path:none;
  background:var(--tinte); color:var(--auf-hell); padding:10px 16px;
}

/* Rubrik: kleine gesperrte Versalien in der Grotesk — der Katalogton. Sie
   taucht ueber jeder Ueberschrift wieder auf, ueberall gleich. */
.rubrik{
  display:block; font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--messing);
}

/* ── Entwurfs-Band ────────────────────────────────────────────────────────── */
.entwurf-band{
  background:#F4E58A; color:#2A2400;
  font-size:.8rem; 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 ──────────────────────────────────────────────────────────────
   Kein bunter Knopf. Der Haupt-Knopf ist die helle Tinte selbst — ein
   farbiger Knopf neben einem Foto gewinnt den Blick und verliert den Kunden. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; background:var(--tinte); color:var(--auf-hell);
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border:1px solid var(--tinte); border-radius:var(--bogen);
  cursor:pointer; transition:background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.knopf:hover{background:#FFFFFF; border-color:#FFFFFF}
.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(--auf-hell); border-color:var(--tinte)}

/* ── Kopf ─────────────────────────────────────────────────────────────────
   Ueber der Buehne durchsichtig, damit das Bild wirklich ganz oben anfaengt.
   Erst beim Scrollen legt sich der Grund darunter. */
.kopf{
  position:sticky; top:0; z-index:40;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--tempo), border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{background:var(--grund); 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:78px}
.marke{
  font-family:var(--display); font-size:1.7rem; font-weight:400; color:var(--tinte);
  text-decoration:none; letter-spacing:0; line-height:1; 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:7px;
}
.kopf[data-gescrollt="0"] .marke small{color:#CFC7BD}

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

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:1px solid var(--rand); border-radius:0; position:relative;
}
.burger i{
  position:absolute; left:12px; width:18px; height:1px; 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: EIN ganzflaechiges Bild ──────────────────────────────────────
   Kein Karussell. Es zeigt Bild 1 genau so lange, wie noch niemand hinsieht,
   und nimmt dem Besucher danach die Kontrolle. Auch kein Ken-Burns-Zoom: eine
   wandernde Flaeche zeigt nie den Ausschnitt, den der Fotograf gewaehlt hat —
   und genau dieser Ausschnitt ist das, was verkauft wird.
   Der Kopf liegt darueber, deshalb beginnt die Buehne bei -78px. */
.buehne{
  position:relative; margin-top:-78px;
  min-height:min(94svh, 860px); display:flex; align-items:flex-end;
  padding:120px 0 clamp(34px, 5vw, 66px); overflow:clip; background:var(--flaeche);
}
.buehne-bild{position:absolute; inset:0; z-index:0}
.buehne-bild img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
/* Der Verlauf ist kein Schmuck, sondern die Bedingung dafuer, dass die Zeile
   darauf lesbar bleibt: auf einem Foto ist Kontrast sonst nie zuverlaessig. */
.buehne-schleier{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, #0E0D0C 4%, rgba(14,13,12,.86) 30%, rgba(14,13,12,.22) 68%, rgba(14,13,12,.55) 100%);
}
.buehne .wrap{position:relative; z-index:2}
.buehne h1{
  font-size:clamp(2.6rem, 7vw, 5.4rem); letter-spacing:-.01em; margin-top:16px;
  max-width:16ch;
}
.buehne .lead{margin-top:20px; max-width:46ch; color:#D9D2CA}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* ── Zeile: drei Angaben auf Haarlinien ───────────────────────────────────── */
.zeile{border-bottom:var(--haar)}
.zeile ul{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr))}
.zeile li{padding:22px 0 22px 26px; border-left:var(--haar)}
.zeile li:first-child{padding-left:0; border-left:0}
.zeile b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem, 2.4vw, 1.95rem); color:var(--tinte); line-height:1.1;
}
.zeile span{display:block; margin-top:8px; font-size:.85rem; color:var(--leise)}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(58px, 7vw, 118px) 0}
.block + .block{border-top:var(--haar)}
.block-kopf{max-width:62ch; margin-bottom:clamp(30px, 4vw, 56px)}
.block-kopf h2{font-size:clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing:-.01em; margin-top:14px}
.block-kopf .lead{margin-top:16px; max-width:58ch; font-size:1rem}

/* ── Anlaesse: grosse Typo-Zeilen auf Haarlinien ──────────────────────────
   Sortiert nach Anlass, nie nach Datum — niemand sucht „Shooting vom Maerz".
   Rechts steht ein Ab-Preis und nicht „auf Anfrage": „auf Anfrage" erzeugt
   keine Neugier, sondern Abbruch. */
.anlass-liste{list-style:none; border-top:var(--haar)}
.anlass-liste li{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  gap:4px 24px; align-items:baseline;
  padding:26px 0; border-bottom:var(--haar);
}
.anlass-liste .nr{
  font-size:.74rem; font-weight:600; color:var(--messing);
  font-variant-numeric:tabular-nums; letter-spacing:.1em;
}
.anlass-liste h3{
  font-size:clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing:-.01em; line-height:1.1;
}
.anlass-liste .ab{
  font-size:.92rem; font-weight:600; color:var(--tinte); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.anlass-liste p{grid-column:2 / -1; font-size:.94rem; max-width:60ch; margin-top:6px}

.hinweis-strich{
  margin-top:30px; max-width:62ch; font-size:.94rem; color:var(--leise);
  padding-left:20px; border-left:1px solid var(--messing);
}
.hinweis-strich + .hinweis-strich{margin-top:16px}

/* ── Galerie: die Ausstellungswand ────────────────────────────────────────
   Randlos ueber die ganze Breite, ueberall derselbe schmale Spalt. Ungleiche
   Abstaende lesen sich als Fehler, deshalb geht der Spalt auch aussen bis an
   den Rand. Kein Titel-Overlay auf dem Bild: die Beschriftung steht als
   Werkliste unter der Wand, so wie im Ausstellungsraum neben der Tuer. */
.wand-block{padding:clamp(58px, 7vw, 118px) 0 0; border-top:var(--haar)}
.wand{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(2px, .35vw, 6px); margin-top:clamp(30px, 4vw, 52px);
  background:var(--spalt);
}
/* Das Seitenverhaeltnis sitzt auf der figure, nicht auf dem Bild. Der Grund:
   als Rasterzelle wird die figure auf die Hoehe ihrer Reihe gedehnt; das Bild
   fuellt sie dann restlos aus. So bleibt die Wand fugenlos, obwohl Quer- und
   Hochformate nebeneinander haengen — und jedes Bild behaelt trotzdem
   weitgehend sein eigenes Format. Alles auf Quadrat zu zwingen waere der
   groessere Eingriff: der Beschnitt ist die Entscheidung des Fotografen. */
.wand figure{position:relative; margin:0; overflow:clip; background:var(--flaeche)}
.wand img{
  width:100%; height:100%; object-fit:cover; display:block;
  scale:1; transition:scale 1.2s cubic-bezier(.22,.68,.36,1);
}
.wand figure:hover img{scale:1.04}
.wand .quer{aspect-ratio:3/2}
.wand .hoch{aspect-ratio:4/5}
/* Eine Kachel steht ueber zwei Spalten — das gibt der Wand einen Takt, ohne
   dass sie in ein Mauerwerk mit ungleichen Abstaenden zerfaellt. */
.wand .breit{grid-column:span 2; aspect-ratio:auto}
/* Die Ordnungsziffer verweist auf die Werkliste darunter. Sie sitzt in einem
   dunklen Feld, weil eine Ziffer direkt auf dem Foto je nach Motiv verschwindet. */
.wand figcaption{
  position:absolute; left:0; bottom:0; z-index:2;
  background:rgba(14,13,12,.82); color:var(--tinte);
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  padding:6px 10px; font-variant-numeric:tabular-nums;
}
.werkliste{
  list-style:none; margin-top:clamp(26px, 3vw, 40px);
  padding-bottom:clamp(58px, 7vw, 118px);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:2px 40px; font-size:.86rem; color:var(--leise);
}
.werkliste li{display:grid; grid-template-columns:3.2em minmax(0, 1fr); gap:10px; padding:7px 0}
.werkliste b{color:var(--messing); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.08em}

/* ── Wer fotografiert: Bild links, Text rechts ────────────────────────────── */
.person .wrap{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(28px, 4vw, 64px); align-items:start;
}
.person-bild{margin:0; background:var(--flaeche)}
.person-bild img{width:100%; height:auto}
.person-bild figcaption{padding-top:12px; font-size:.84rem; color:var(--leise)}
.person-text h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing:-.01em; margin-top:14px}
.person-text p{margin-top:18px; max-width:56ch}
.person-text .signatur{
  margin-top:30px; padding-top:22px; border-top:var(--haar);
  font-family:var(--display); font-size:1.6rem; color:var(--tinte);
}
.person-text .signatur small{
  display:block; font-family:var(--schrift); font-size:.82rem; color:var(--leise); margin-top:6px;
}

/* ── Ablauf: vier Schritte in einer Reihe ─────────────────────────────────── */
.ablauf{list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0}
.ablauf li{padding:26px 20px 0 0; border-top:1px solid var(--messing)}
.ablauf b{
  display:block; font-family:var(--display); font-size:1.9rem; color:var(--messing);
  font-weight:400; line-height:1; margin-bottom:12px;
}
.ablauf h3{font-family:var(--schrift); font-size:1rem; font-weight:600; color:var(--tinte); line-height:1.35}
.ablauf p{margin-top:8px; font-size:.9rem}

/* ── Pakete: drei breite Zeilen ───────────────────────────────────────────
   Kein Kasten und keine „beliebteste Wahl"-Fahne — was am haeufigsten gebucht
   wird, ist eine Zahl, die hier niemand kennt. Hervorgehoben ist die mittlere
   Zeile allein durch den Messingstrich links; die Begruendung steht im Text. */
.pakete{list-style:none; border-top:var(--haar)}
.pakete li{
  display:grid; grid-template-columns:minmax(0, 1fr) auto;
  gap:8px 34px; align-items:start;
  padding:30px 0; border-bottom:var(--haar);
}
.pakete li[data-hervor="1"]{border-left:2px solid var(--messing); padding-left:24px}
.pakete h3{font-size:clamp(1.5rem, 2.8vw, 2.05rem); line-height:1.1}
.pakete .marker{
  display:inline-block; margin-top:10px; font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--messing);
}
.pakete .werte{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px 26px;
  margin-top:14px; font-size:.9rem; color:var(--text);
}
.pakete .werte li{display:block; padding:0; border:0}
.pakete .werte b{color:var(--tinte); font-weight:600}
.pakete .preis{
  grid-row:span 2; text-align:right; font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem); color:var(--tinte); line-height:1;
  white-space:nowrap;
}
.pakete .preis small{
  display:block; font-family:var(--schrift); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--leise); margin-bottom:8px;
}

/* ── Fragen: Aufklapper auf Haarlinien ────────────────────────────────────── */
.aufklapper{border-top:var(--haar)}
.aufklapper details{border-bottom:var(--haar)}
.aufklapper summary{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer; list-style:none;
  padding:24px 0; font-size:1.06rem; font-weight:600; color:var(--tinte); line-height:1.4;
}
.aufklapper summary::-webkit-details-marker{display:none}
/* Das Pluszeichen ist zwei Striche — keine Bilddatei, kein Zeichensatz, keine
   Fallstricke. Beim Aufklappen verschwindet der senkrechte. */
.aufklapper summary .kreuz{flex:none; position:relative; width:18px; height:18px; margin-top:6px; margin-left:auto}
.aufklapper summary .kreuz::before,
.aufklapper summary .kreuz::after{
  content:""; position:absolute; left:0; top:8px; width:18px; height:1.5px;
  background:var(--messing); transition:rotate var(--tempo), opacity var(--tempo);
}
.aufklapper summary .kreuz::after{rotate:90deg}
.aufklapper details[open] summary .kreuz::after{rotate:0deg; opacity:0}
.aufklapper details p{padding:0 36px 26px 0; max-width:66ch; font-size:.96rem}
.aufklapper details p + p{padding-top:0; margin-top:-10px}

/* ── Anfrage: einspaltig unter einer riesigen Ueberschrift ────────────────
   Fuenf Felder, nicht mehr — jedes weitere kostet messbar Abschluesse. Die
   Felder haben nur einen Unterstrich statt eines Kastens; damit sie trotzdem
   sicher zu finden sind, liegt dieser Unterstrich bei 5,2:1 und nicht auf der
   feinen Trennlinie, die mit 1,4:1 praktisch unsichtbar waere. */
.anfrage{background:var(--flaeche); padding:clamp(58px, 7vw, 118px) 0}
.anfrage h2{font-size:clamp(2.4rem, 6vw, 4.4rem); letter-spacing:-.01em; margin-top:14px; max-width:14ch}
.anfrage .lead{margin-top:20px; max-width:52ch}
.formular{margin-top:clamp(32px, 4vw, 52px); max-width:760px}
.feld-paar{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 30px}
.feld{margin-bottom:26px}
.feld label{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--leise); margin-bottom:9px;
}
.feld input,.feld select,.feld textarea{
  width:100%; padding:10px 2px; background:transparent; color:var(--tinte);
  border:0; border-bottom:1px solid var(--rand); border-radius:0; font-size:1.02rem;
  transition:border-color var(--tempo);
}
.feld input::placeholder,.feld textarea::placeholder{color:#7A7268}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-bottom-color:var(--messing)}
/* 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. */
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--messing); outline-offset:4px; border-bottom-color:var(--messing);
}
.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% - 14px) 55%, calc(100% - 8px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:34px;
}
.feld select option{background:var(--flaeche); color:var(--tinte)}
.form-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.form-fuss{margin-top:20px; font-size:.86rem; color:var(--leise); max-width:60ch}
.form-fuss a{color:var(--messing); text-underline-offset:3px}
.form-fuss + .form-fuss{margin-top:10px}
.versprechen{
  margin-top:clamp(30px, 4vw, 44px); padding-top:24px; border-top:var(--haar);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px 34px; max-width:900px;
}
.versprechen div b{display:block; color:var(--tinte); font-weight:600; font-size:.98rem; margin-bottom:5px}
.versprechen div span{display:block; font-size:.88rem; color:var(--leise)}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{border-top:var(--haar); padding:clamp(48px, 5vw, 78px) 0 0}
.fuss-gitter{
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap:34px clamp(24px, 3vw, 56px);
}
.fuss p{margin-top:16px; max-width:40ch; font-size:.92rem}
.fuss h3{
  font-family:var(--schrift); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise); margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.92rem}
.fuss li{padding:5px 0}
.fuss li a{text-decoration:none}
.fuss li a:hover{color:var(--tinte); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(36px, 4vw, 56px); padding:20px 0;
  border-top:var(--haar);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  font-size:.82rem; color:var(--leise);
}

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

/* ── Sanftes Einblenden ───────────────────────────────────────────────────
   Stufe „dezent": ein ruhiges Einblenden gibt der Seite den Takt eines
   Blaetterns. Mehr nicht — kein Parallax auf Portfolio-Bildern, weil eine
   wandernde Flaeche genau den Bildausschnitt ueberschreibt, der verkauft wird. */
html.js .zeig{opacity:0; translate:0 18px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .7s ease calc(var(--i, 0) * 80ms),
             translate .7s cubic-bezier(.22,.68,.36,1) calc(var(--i, 0) * 80ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .person .wrap{grid-template-columns:minmax(0, 1fr)}
  .ablauf{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 26px}
  .versprechen{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width:820px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--grund); border-bottom:1px solid var(--linie);
    padding:6px 20px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:14px 0; border-top:var(--haar); font-size:.92rem}
  .menue a::after{display:none}
  .kopf .knopf{display:none}
  .burger{display:block}
  .wand{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .wand .breit{grid-column:span 2}
  /* Bei zwei Spalten geht die Rechnung sonst nicht auf und unten rechts bliebe
     ein leeres Feld stehen — eine Luecke in einer Wand liest sich als Fehler.
     Die letzte Kachel nimmt deshalb beide Spalten. */
  .wand figure:last-child{grid-column:span 2; aspect-ratio:auto}
  .werkliste{grid-template-columns:minmax(0, 1fr)}
}

@media (max-width:640px){
  body{font-size:18px}
  .buehne{min-height:min(88svh, 660px)}
  .zeile ul{grid-template-columns:minmax(0, 1fr)}
  .zeile li{padding:16px 0; border-left:0; border-top:var(--haar)}
  .zeile li:first-child{border-top:0}
  /* Auf dem Handy hat der Ab-Preis keinen Platz mehr neben dem Namen — er
     rutscht unter die Ueberschrift, statt den Text zu quetschen. */
  .anlass-liste li{grid-template-columns:auto minmax(0, 1fr)}
  .anlass-liste .ab{grid-column:2; text-align:left; margin-top:6px}
  .wand{grid-template-columns:minmax(0, 1fr)}
  .wand .breit,.wand figure:last-child{grid-column:span 1; aspect-ratio:3/2}
  .ablauf{grid-template-columns:minmax(0, 1fr)}
  .ablauf li{padding-right:0}
  .pakete li{grid-template-columns:minmax(0, 1fr)}
  .pakete .preis{grid-row:auto; text-align:left; margin-top:16px}
  .pakete li[data-hervor="1"]{padding-left:18px}
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .versprechen{grid-template-columns:minmax(0, 1fr)}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}

  /* Die Daumenleiste liegt am unteren Rand — dort, wo der Daumen ohnehin ist. */
  .daumen{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:var(--linie); border-top:1px solid var(--linie);
  }
  .daumen .knopf{border-radius:0; padding:15px 10px; font-size:.86rem}
  .daumen .knopf-leer{background:var(--grund)}
  body{padding-bottom:62px}
}

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

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────
   Dieser Entwurf lebt von Haarlinien und einem einzigen Messington. Beides gilt
   auch hier: der Hinweiskasten bekommt einen Balken statt einer Warnfarbe, die
   Aufzaehlung einen Strich statt eines Punktes. Der Lesetext bleibt bei 68
   Zeichen — laenger wird eine Datenschutzerklaerung unlesbar, und gerade die
   soll gelesen werden. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 78px) 0 clamp(24px, 3vw, 36px)}
/* Bei 375px passt „Datenschutzerklaerung" nicht in eine Zeile. Die Bruchstelle
   gibt der weiche Trennstrich im HTML vor; hyphens und overflow-wrap sind das
   Netz darunter. */
.rechts-kopf h1{font-size:clamp(2.2rem, 4.6vw, 3.4rem); margin-top:10px; hyphens:auto; overflow-wrap:break-word}
.rechts-kopf .lead{margin-top:16px; max-width:58ch; font-size:1rem}
.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.9rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:600;
  margin:22px 0 8px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px; font-size:.98rem}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext strong{color:var(--tinte); font-weight:600}
.rechtstext ul{margin:0 0 14px; list-style:none}
.rechtstext ul li{color:var(--text); padding-left:22px; position:relative; margin-bottom:7px; font-size:.98rem}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:9px; height:1px; background:var(--messing);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:600; 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}
.rechtstext a{color:var(--messing); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--flaeche); border-left:2px solid var(--messing);
  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 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-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--messing); border-bottom:1px solid var(--messing);
  padding-bottom:4px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--tinte); border-bottom-color:var(--tinte)}