/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf 3 — „Kontaktbogen"
   Jonas Vogt Fotografie · Muenster

   Haltung
   Der Kontaktbogen ist das aelteste Werkzeug der Fotografie: alle Aufnahmen
   im gleichen Rahmen, nummeriert, nuechtern, zum Vergleichen. Genau so ist
   dieser Entwurf gebaut. Weisses Papier, eine Grotesk ohne Anlauf, ein
   strenges Zwoelferraster, sichtbare Haarlinien statt Karten. Gedacht fuer
   Auftraggeber, die Business-Portraets oder Produktbilder einkaufen und dabei
   vergleichen: Umfang, Dauer, Lieferzeit, Preis.

   Der Radius-Vertrag
   Null. Ueberall. Ein Kontaktbogen hat keine runden Ecken, ein Passepartout
   auch nicht. Wo dieser Entwurf trennt, trennt er mit einer 1px-Linie.

   Wo dieser Entwurf anders gebaut ist als 1 und 2
   · Buehne   — Zwoelferraster: Ueberschrift links, Metaspalte rechts, darunter
                ein durchgehendes Bildband. (1: ganzflaechiges Bild.
                2: zwei Spalten Text/Bild.)
   · Anlaesse — sechs nummerierte Rasterfelder mit Haarlinien, wie ein
                Datenblatt. (1: Typo-Zeilen. 2: weiche Karten.)
   · Galerie  — Kontaktbogen: drei Spalten, gleiche Zellenhoehe, jedes Bild
                mit Nummer und technischer Zeile. (1: fugenlose Wand.
                2: Bild und Text im Wechsel.)
   · Ablauf   — Beschreibungsliste: Schritt links, Erklaerung rechts.
                (1: fuenf Spalten. 2: senkrechte Zeitleiste.)
   · Pakete   — eine echte <table>. Drei Angebote, sieben Zeilen, zum
                Zeilenvergleich. (1: breite Zeilen. 2: drei Karten.)
   · Fragen   — Randspalte: Frage schmal links, Antwort breit rechts.
                (1: Aufklapper. 2: offenes Zweispalten-Raster.)
   · Anfrage  — Formular rechts im Raster, Text links stehend.
                (1: eine Spalte. 2: weisse Karte neben Textspalte.)

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


/* ── 1 · Marken-Kontrakt ──────────────────────────────────────────────────
   Alle Kontraste sind gerechnet, nicht geschaetzt. Wer hier etwas aendert,
   rechnet nach. */
:root{
  /* Grundflaechen */
  --grund:   #FFFFFF;
  --matt:    #F0EFEC;   /* abgesetzte Baender — warmes Papiergrau        */
  --tief:    #111111;   /* Fuss und Bildbeschriftung                     */

  /* Schrift */
  --tinte:   #111111;   /* Ueberschriften (Weiss 18,9:1 · Matt 16,4:1)   */
  --text:    #4A4A48;   /* Lesetext       (Weiss  8,9:1 · Matt  7,7:1)   */
  --leise:   #686864;   /* Beiwerk        (Weiss  5,6:1 · Matt  4,9:1)   */
  --auf-tief:#FFFFFF;   /* Schrift auf Tief (18,9:1)                     */

  /* Akzent — genau einer. Zinnoberrot, wie der Stift auf dem Kontaktbogen,
     mit dem man den ausgewaehlten Rahmen umkringelt. */
  --rot:     #A82C1E;   /* auf Weiss 6,9:1 · auf Matt 6,0:1
                           Weiss auf Rot: 6,9:1 — beides ueber 4,5:1      */

  /* Linien */
  --linie:   #DEDDD9;
  --haar:1px solid #DEDDD9;
  --feldrand:#8A8A85;   /* Formularrand (Weiss 3,5:1 — ueber 3:1)        */

  /* Schriften */
  --display:'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --schrift:'Inter Tight', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Mass */
  --spalte:1320px;
  --gasse:clamp(14px, 1.5vw, 26px);
  --bogen:0px;          /* siehe Radius-Vertrag oben                     */
  --tempo:.35s cubic-bezier(.3,.7,.4,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:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--schrift);
  font-size:clamp(1rem, .94rem + .22vw, 1.13rem);
  line-height:1.62;
  /* 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;
  /* Ziffern gleich breit: in einer Preistabelle muessen Spalten fluchten. */
  font-variant-numeric:tabular-nums;
}

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

h1,h2,h3,h4{
  font-family:var(--display); color:var(--tinte);
  font-weight:600; line-height:1.08; margin:0;
  letter-spacing:-.028em;
}
h1{font-size:clamp(2.5rem, 1.4rem + 4.2vw, 4.6rem); font-weight:700}
h2{font-size:clamp(1.8rem, 1.2rem + 2.1vw, 2.8rem)}
h3{font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

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

/* Ein sichtbarer Fokusring, ueberall gleich. */
:focus-visible{outline:2px solid var(--rot); outline-offset:2px}

.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(--rot); color:#FFFFFF;
  padding:12px 20px; font-size:.9rem; text-decoration:none; font-weight:600;
}
.nur-vorleser:focus{left:0}

/* Dieselbe Klasse, aber als Ueberschrift oder Tabellenkopf: die soll nur
   vorgelesen und nie sichtbar werden — deshalb wegschneiden statt
   wegschieben. */
h2.nur-vorleser,h3.nur-vorleser,span.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; left:auto; padding:0;
  background:none; color:inherit;
}


/* ── 3 · Raster ───────────────────────────────────────────────────────────
   Zwoelf Spalten, eine Gasse. Alles auf dieser Seite sitzt in diesem Raster —
   auch das, was danach aussieht, als sei es frei gesetzt. minmax(0,1fr) statt
   1fr, weil „1fr" in Wahrheit „minmax(auto,1fr)" heisst: ein langes Wort
   koennte die Spalte sonst breiter machen als den Bildschirm. */
.raster{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gasse);
}
.s3{grid-column:span 3}
.s4{grid-column:span 4}
.s5{grid-column:span 5}
.s6{grid-column:span 6}
.s7{grid-column:span 7}
.s8{grid-column:span 8}
.s12{grid-column:span 12}
/* Rechtsbuendige Metaspalte: beginnt bei Spalte 9 und laeuft bis zum Rand. */
.meta-spalte{grid-column:9 / 13}


/* ── 4 · Bausteine ───────────────────────────────────────────────────────── */

/* Entwurfs-Band — verschwindet mit dem Entwurfsstatus. */
.entwurf-band{background:var(--tief); color:#C9C8C4}
.entwurf-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  padding:9px 0; font-size:.78rem; line-height:1.5;
}
.entwurf-band b{color:#FFFFFF; font-weight:600}
.entwurf-band span{color:#C9C8C4}   /* auf #111111: 11,3:1 */
.entwurf-band a{color:#E8877A; margin-left:auto; text-underline-offset:3px}

/* Rubrik — nummerierte Abschnittsmarke. Der Kontaktbogen zaehlt mit. */
.rubrik{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--rot);
  margin-bottom:16px;
}
.rubrik::before{content:""; width:26px; height:2px; background:var(--rot); flex:none}

/* Knoepfe — rechteckig, weil hier nichts rund ist. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--tinte); color:var(--auf-tief);
  font-family:var(--display); font-size:.88rem; font-weight:600;
  letter-spacing:.01em; text-decoration:none;
  padding:15px 28px; border:1px solid var(--tinte); border-radius:var(--bogen);
  cursor:pointer; transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:var(--rot); border-color:var(--rot)}
.knopf svg{width:17px; height:17px; fill:currentColor; flex:none}
.knopf-leer{background:transparent; color:var(--tinte); border-color:var(--feldrand)}
.knopf-leer:hover{background:var(--tinte); color:var(--auf-tief); border-color:var(--tinte)}

/* Abschnittskopf — ueberall gleich aufgebaut: Rubrik, Ueberschrift, ein
   Absatz. Mehr braucht ein Datenblatt nicht. */
.abschnitt{padding:clamp(52px, 6vw, 104px) 0}
.abschnitt-kopf{margin-bottom:clamp(28px, 3.4vw, 52px)}
.abschnitt-kopf h2{max-width:20ch}
.abschnitt-kopf p{margin-top:16px; max-width:56ch; color:var(--text)}


/* ── 5 · Kopf ─────────────────────────────────────────────────────────────
   Weisser Grund von Anfang an, feine Linie unten. Kein Schweben ueber dem
   Bild wie in Entwurf 1 — dieser Entwurf hat kein Bild ganz oben. */
.kopf{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  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:24px; min-height:76px}

.marke{
  font-family:var(--display); font-size:1.15rem; font-weight:700;
  letter-spacing:-.02em; color:var(--tinte); text-decoration:none;
  line-height:1.2; flex:none;
}
.marke small{
  display:block; font-size:.63rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin-top:3px;
}

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

.burger{
  display:none; margin-left:auto; width:44px; height:44px;
  background:none; border:1px solid var(--linie); 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)}


/* ── 6 · Buehne — Raster mit Metaspalte ───────────────────────────────────
   Links die Ueberschrift, rechts vier Angaben, die ein Auftraggeber sucht,
   bevor er weiterliest. Darunter ein durchgehendes Bildband. Kein Bild hinter
   Schrift: Schrift auf Foto ist immer ein Kontrast-Kompromiss. */
.buehne{padding:clamp(44px, 5vw, 88px) 0 0}
.buehne-kopf{align-items:end; padding-bottom:clamp(28px, 3.4vw, 48px)}
.buehne h1{margin-bottom:20px}
.buehne .lead{font-size:1.1em; max-width:44ch; color:var(--text)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

.meta-liste{list-style:none; margin:0; padding:0; border-top:2px solid var(--tinte)}
.meta-liste li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:var(--haar);
}
.meta-liste dt,.meta-liste .schild{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--leise); flex:none;
}
.meta-liste .wert{
  font-family:var(--display); font-size:.95rem; font-weight:600;
  color:var(--tinte); text-align:right;
}

/* Das Bildband laeuft ueber alle zwoelf Spalten. Bewusst flach beschnitten:
   ein Band, kein Bild — die Bilder kommen im Kontaktbogen weiter unten. */
.buehne-band{position:relative}
.buehne-band img{width:100%; aspect-ratio:12/5; object-fit:cover}
.buehne-band figcaption{
  position:absolute; left:0; bottom:0;
  background:var(--tief); color:var(--auf-tief);
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:8px 14px;
}
.buehne-band figure{margin:0}


/* ── 7 · Kennzahlen ───────────────────────────────────────────────────────
   Vier Angaben nebeneinander, oben abgeschnitten von einer krachenden Linie.
   Nur Zahlen, die man einhalten kann — keine Auszeichnungen, keine
   Jahreszahlen, keine Zufriedenheitswerte. */
.kennzahlen{background:var(--matt); border-block:var(--haar); padding:clamp(26px, 3vw, 44px) 0}
.kennzahl{border-top:2px solid var(--tinte); padding-top:14px}
.kennzahl b{
  display:block; font-family:var(--display); font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight:700; color:var(--tinte); line-height:1.1; letter-spacing:-.02em;
}
.kennzahl span{display:block; font-size:.86rem; color:var(--leise); margin-top:6px; line-height:1.5}


/* ── 8 · Anlaesse — nummerierte Rasterfelder ──────────────────────────────
   Ein Datenblatt, kein Kartenstapel. Die Felder haengen an gemeinsamen
   Linien; die Nummer steht gross und blass darueber wie auf einem Negativ. */
.felder{border-top:2px solid var(--tinte)}
.feld-zeile{border-bottom:var(--haar); padding:0}
.feld-block{padding:26px 0 28px; display:flex; flex-direction:column; height:100%}
/* Senkrechte Trennlinien im Raster: sie sitzen am linken Rand jedes Feldes
   ausser dem ersten der Zeile. Bei einer Spalte werden sie unten abgeschaltet. */
.feld-block{position:relative}
.feld-block::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--gasse) / -2); width:1px; background:var(--linie);
}
.feld-block[data-erste="1"]::before{display:none}

.feld-nr{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; color:var(--rot); margin-bottom:10px;
}
.feld-block h3{margin-bottom:8px}
.feld-block p{font-size:.94em; color:var(--text)}
.feld-block .ab{
  margin-top:auto; padding-top:16px;
  font-family:var(--display); font-size:.86rem; font-weight:600; color:var(--tinte);
}
.feld-block .ab em{font-style:normal; color:var(--leise); font-weight:500}


/* ── 9 · Kontaktbogen — die Galerie ───────────────────────────────────────
   Drei Spalten, alle Zellen gleich hoch, jede Aufnahme mit Nummer und einer
   nuechternen Zeile darunter. Die sechs Bilder liegen alle im Format 3:2 und
   werden deshalb NICHT beschnitten — der Rahmen passt sich dem Bild an, nicht
   umgekehrt. */
.bogen{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2vw, 34px) var(--gasse);
}
.bogen figure{margin:0}
.bogen img{width:100%; aspect-ratio:3/2; object-fit:cover; border:var(--haar)}
.bogen figcaption{display:flex; gap:12px; margin-top:11px}
.bogen .nr{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  color:var(--rot); flex:none; padding-top:2px;
}
.bogen .was{font-size:.88rem; color:var(--text); line-height:1.5}
.bogen .was b{display:block; font-family:var(--display); font-weight:600; color:var(--tinte)}
.bogen-fuss{
  margin-top:clamp(22px, 2.6vw, 36px); padding-top:18px; border-top:var(--haar);
  font-size:.88rem; color:var(--leise); max-width:70ch;
}


/* ── 10 · Studio — zwei Hochformate ───────────────────────────────────────
   Beide Bilder liegen im Format 4:5 und stehen deshalb ohne Beschnitt
   nebeneinander. */
.studio-block{background:var(--matt); border-block:var(--haar); padding:clamp(52px, 6vw, 96px) 0}
.studio-paar figure{margin:0}
.studio-paar img{width:100%}
.studio-paar figcaption{
  font-size:.86rem; color:var(--leise); margin-top:11px; line-height:1.5;
  padding-left:12px; border-left:2px solid var(--rot);
}


/* ── 11 · Person ─────────────────────────────────────────────────────────
   Text links, Bild rechts — genau andersherum als in Entwurf 2. */
.person-text p{color:var(--text)}
.person-daten{list-style:none; margin:26px 0 0; padding:0; border-top:var(--haar)}
.person-daten li{
  display:flex; gap:16px; padding:11px 0; border-bottom:var(--haar); font-size:.92rem;
}
.person-daten b{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--leise);
  flex:none; width:130px; padding-top:3px;
}
.person-bild figure{margin:0}
.person-bild img{width:100%}
.person-bild figcaption{font-size:.86rem; color:var(--leise); margin-top:11px}


/* ── 12 · Ablauf — Beschreibungsliste ─────────────────────────────────────
   Schritt links, Erklaerung rechts, dazwischen eine Linie. Das ist die
   nuechternste Form, in der man eine Reihenfolge aufschreiben kann. */
.ablauf{margin:0; border-top:2px solid var(--tinte)}
.ablauf .schritt{
  display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
  gap:var(--gasse); padding:24px 0; border-bottom:var(--haar);
}
.ablauf dt{display:flex; gap:14px; align-items:baseline}
.ablauf .nr{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  color:var(--rot); flex:none;
}
.ablauf dt h3{font-size:1.15rem}
.ablauf dd{margin:0}
.ablauf dd p{font-size:.95em; color:var(--text)}
.ablauf .dauer{
  display:block; font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--leise); margin-top:8px;
}


/* ── 13 · Preistabelle ────────────────────────────────────────────────────
   Eine echte <table>, weil hier wirklich verglichen wird: drei Angebote,
   gleiche Zeilen, Blick nach rechts. Ein Kartenstapel kann das nicht.
   Auf dem Handy klappt die Tabelle in drei Bloecke um — siehe Umbrueche. */
.tabelle-rahmen{overflow-x:auto; margin-top:clamp(24px, 3vw, 40px)}
table.preise{
  width:100%; min-width:680px; border-collapse:collapse; text-align:left;
}
table.preise caption{
  caption-side:top; text-align:left; font-size:.88rem; color:var(--leise);
  padding-bottom:14px;
}
table.preise th,table.preise td{
  padding:15px 18px 15px 0; border-bottom:var(--haar); vertical-align:top;
  font-size:.95rem;
}
table.preise thead th{
  border-bottom:2px solid var(--tinte); padding-bottom:16px;
  font-family:var(--display); vertical-align:bottom;
}
table.preise thead th .name{
  display:block; font-size:1.2rem; font-weight:700; color:var(--tinte);
  letter-spacing:-.02em; margin-bottom:4px;
}
table.preise thead th .wofuer{
  display:block; font-family:var(--schrift); font-size:.85rem; font-weight:400;
  color:var(--leise); line-height:1.45; margin-bottom:12px;
}
table.preise thead th .ab{
  display:block; font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--rot);
}
table.preise thead th .ab small{
  display:block; font-family:var(--schrift); font-size:.72rem; font-weight:400;
  color:var(--leise); margin-top:4px;
}
table.preise tbody th{
  font-family:var(--display); font-size:.75rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--leise);
  width:200px;
}
table.preise td{color:var(--text)}
/* Die hervorgehobene Spalte bekommt einen Grund und einen Randstrich — keine
   Krone, kein „meistgebucht": das waere eine Zahl, die niemand belegen kann. */
table.preise .hervor{background:var(--matt); padding-left:18px}
table.preise thead .hervor{border-bottom-color:var(--rot)}
.tabelle-marke{
  display:inline-block; background:var(--rot); color:#FFFFFF;
  font-family:var(--display); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; margin-bottom:10px;
}
table.preise tfoot td{border-bottom:none; padding-top:20px}
table.preise .knopf{width:100%; padding:12px 16px; font-size:.83rem}
.preis-fuss{
  margin-top:clamp(20px, 2.4vw, 32px); padding-top:18px; border-top:var(--haar);
  font-size:.9rem; color:var(--text); max-width:78ch;
}
.preis-fuss b{color:var(--tinte); font-weight:600}


/* ── 14 · Fragen — Randspalte ─────────────────────────────────────────────
   Frage schmal links, Antwort breit rechts. Alles sichtbar, nichts
   zugeklappt: wer eine Frage hat, soll nicht erst raten muessen, hinter
   welchem Dreieck sie steckt. */
.fragen{border-top:2px solid var(--tinte)}
.fragen .frage{
  display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
  gap:var(--gasse); padding:24px 0; border-bottom:var(--haar);
}
.fragen h3{font-size:1.08rem; line-height:1.35}
.fragen p{font-size:.95em; color:var(--text)}
.fragen a{color:var(--rot); text-underline-offset:3px}


/* ── 15 · Anfrage — Formular rechts im Raster ─────────────────────────── */
.anfrage-wort p{color:var(--text)}
.anfrage-wort .wege{list-style:none; margin:26px 0 0; padding:0; border-top:var(--haar)}
.anfrage-wort .wege li{border-bottom:var(--haar)}
.anfrage-wort .wege a{
  display:flex; align-items:center; gap:12px; padding:13px 0;
  font-size:.95rem; color:var(--tinte); text-decoration:none;
}
.anfrage-wort .wege a:hover{color:var(--rot)}
.anfrage-wort .wege svg{width:18px; height:18px; fill:var(--rot); flex:none}

.formular{border-top:2px solid var(--tinte); padding-top:24px}
.feldpaar{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gasse)}
.feld{margin-bottom:18px; display:flex; flex-direction:column}
.feld label{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--leise); margin-bottom:8px;
}
.feld label .pflicht{color:var(--rot)}
/* Geschlossene 1px-Rahmen, kein Rundungsradius. */
.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);
  padding:12px 14px; width:100%;
  transition:border-color var(--tempo), box-shadow var(--tempo);
}
.feld textarea{min-height:118px; resize:vertical; line-height:1.55}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--rot); box-shadow:inset 0 0 0 1px var(--rot);
}
.feld .hilfe{font-size:.8rem; color:var(--leise); margin-top:6px}
.formular-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px}
.formular-tun .knopf{flex:1 1 190px}
.versprechen{
  margin-top:18px; padding-top:16px; border-top:var(--haar);
  font-size:.83rem; color:var(--leise); line-height:1.6;
}
.versprechen a{color:var(--rot)}


/* ── 16 · Fuss ───────────────────────────────────────────────────────────── */
.fuss{background:var(--tief); color:#C9C8C4; padding:clamp(44px, 5vw, 74px) 0 24px}
.fuss .marke{color:#FFFFFF}
.fuss .marke small{color:#9A9A96}   /* auf #111111: 6,7:1 */
.fuss-gitter{padding-bottom:32px; border-bottom:1px solid #333331}
.fuss-gitter p{margin-top:14px; font-size:.88rem; color:#C9C8C4; line-height:1.65; max-width:36ch}
.fuss h3{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:#E8877A; margin-bottom:13px;
}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:8px; font-size:.88rem}
.fuss a{color:#C9C8C4; text-decoration:none}
.fuss a:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px}
.fuss-unten{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding-top:20px; font-size:.78rem; color:#9A9A96;
}

/* Daumenleiste — nur auf dem Handy. */
.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(255,255,255,.97); border-top:1px solid var(--linie);
  backdrop-filter:blur(8px);
}
.daumen .knopf{flex:1; padding:13px 14px; font-size:.85rem}


/* ── 17 · Bewegung ───────────────────────────────────────────────────────
   Sehr zurueckhaltend: ein kurzes Aufblenden, kein Verschieben quer zur
   Leserichtung. Ohne JavaScript ist alles sofort da. */
html.js .zeig{opacity:0; translate:0 12px; transition:opacity .5s ease, translate .5s ease}
html.js .zeig[data-da="1"]{opacity:1; translate:none; transition-delay:calc(var(--i, 0) * 60ms)}

@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}
}


/* ── 18 · Umbrueche ──────────────────────────────────────────────────────
   Das Zwoelferraster faellt in zwei Stufen: bei 1024px auf sechs Spalten,
   bei 640px auf eine. Alle span-Klassen werden dabei mitgezogen — sonst
   ragte ein „span 8" ueber ein Sechserraster hinaus und erzeugte genau den
   waagerechten Balken, den es nicht geben darf. */

@media (max-width:1180px){
  .menue{gap:19px}
  .menue a{font-size:.8rem}
}

@media (max-width:1024px){
  .raster{grid-template-columns:repeat(6, minmax(0, 1fr))}
  .s3{grid-column:span 3}
  .s4,.s5{grid-column:span 6}
  .s6,.s7,.s8,.s12{grid-column:span 6}
  .meta-spalte{grid-column:span 6}
  .buehne-kopf{align-items:start}
  .bogen{grid-template-columns:repeat(2, minmax(0, 1fr))}
  /* Bei zwei Spalten stimmt „erste Spalte" nicht mehr — die Trennlinien
     werden deshalb ueber die Zeilen-Regel unten neu gesetzt. */
  .feld-block::before{display:none}
  .feld-zeile{border-bottom:var(--haar)}
}

@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(--grund); border-bottom:var(--haar);
    flex-direction:column; gap:0; padding:6px 20px 16px;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-bottom:var(--haar); font-size:.98rem}
  .menue a:last-child{border-bottom:none}
  .menue a::after{display:none}
  .buehne-band img{aspect-ratio:16/9}
}

@media (max-width:640px){
  html{scroll-padding-top:82px}
  .wrap{width:min(100% - 32px, var(--spalte))}
  .raster{grid-template-columns:minmax(0, 1fr)}
  .s3,.s4,.s5,.s6,.s7,.s8,.s12,.meta-spalte{grid-column:span 1}
  .bogen{grid-template-columns:minmax(0, 1fr)}
  .feldpaar{grid-template-columns:minmax(0, 1fr); gap:0}
  .formular-tun .knopf{flex:1 1 100%}
  .ablauf .schritt,.fragen .frage{grid-template-columns:minmax(0, 1fr); gap:10px}
  .person-daten li{flex-direction:column; gap:2px}
  .person-daten b{width:auto}
  .buehne-band img{aspect-ratio:4/3}
  .buehne h1{font-size:clamp(2.1rem, 8vw, 2.9rem)}
  .daumen{display:flex}
  /* Platz fuer die Daumenleiste, damit der Fuss nicht darunter verschwindet. */
  body{padding-bottom:76px}
  /* Die Preistabelle bleibt eine Tabelle und wird waagerecht gerollt. Das ist
     ehrlicher als sie in Karten umzubauen: der Vergleich Zeile fuer Zeile ist
     der ganze Sinn dieser Darstellung. Der Hinweis dazu steht im HTML. */
  table.preise{min-width:600px}
  table.preise th,table.preise td{padding:12px 14px 12px 0; font-size:.9rem}
  table.preise tbody th{width:150px}
}


/* ── 19 · Rechtstexte (Impressum, Datenschutz) ────────────────────────────
   Dasselbe Papier, dieselben Haarlinien. Der Lesetext bleibt bei 68 Zeichen:
   laenger wird eine Datenschutzerklaerung unlesbar, und gerade die soll
   gelesen werden. */
.rechts-kopf{padding:clamp(42px, 5vw, 76px) 0 clamp(22px, 2.8vw, 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.4rem); hyphens:auto; overflow-wrap:break-word}
.rechts-kopf .lead{margin-top:16px; max-width:58ch; font-size:1.02em}
.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:28px 0 4px}
.rechtstext section:first-of-type{border-top:2px solid var(--tinte)}
.rechtstext h2{font-size:clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--display); font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  margin:24px 0 9px; color:var(--tinte);
}
.rechtstext p{color:var(--text); margin-bottom:13px; font-size:.96em}
.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:22px; position:relative; margin-bottom:8px; font-size:.96em}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:10px; height:2px; background:var(--rot);
}
.rechtstext dl{margin:0}
.rechtstext dt{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--leise); margin-top:16px;
}
.rechtstext dd{margin:3px 0 0; color:var(--text)}
.rechtstext address{font-style:normal; color:var(--text); line-height:1.85}
.rechtstext a{color:var(--rot); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--matt); border-left:3px solid var(--rot);
  padding:20px 24px; margin:22px 0 28px;
}
.rechts-hinweis b{
  display:block; margin-bottom:6px; color:var(--tinte);
  font-family:var(--display); font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.rechts-hinweis p{font-size:.92em; 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(--display); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--rot); border-bottom:2px solid var(--rot);
  padding-bottom:4px; margin-top:36px;
}
.rechtstext .zurueck:hover{color:var(--tinte); border-bottom-color:var(--tinte)}