/* Maisto Dining — Ergänzungen nur für diese Seite (gemeinsam/site-basis.css bleibt
   unberührt). Keine Farbwerte: alles über die Tokens aus farben.css.
   Gestaltung 14.10.2026 „Blu notte & Ottone“: Messing nur als Haarlinie und Etikett,
   Ape-Rot nur im Knopf, ruhige Flächen, große Cormorant-Überschriften. */

body{ line-height: 1.6; }

/* ── Kopf: Haarlinie in Edelstahl, Marke = Wappen + MAISTO + „Dining“ (gemeinsam/site-basis.css, 15.10.2026) ── */
.kopf{ border-bottom-color: rgba(var(--zweit-rgb), .55); }
.marke{ color: var(--n-hell); padding-right: .2rem; }
.marke:hover{ color: var(--zweit); }
.kopf-tun a:not(.kopf-knopf--voll),
.menue-knopf{ border-color: rgba(var(--zweit-rgb), .6); }
.gruppe-feld{ border-top-color: var(--zweit); }

/* ── Knöpfe: Zweitknopf mit Messingrand statt Weiß/Grau ── */
.knopf{ letter-spacing: .04em; }
.knopf--linie{ border-color: rgba(var(--zweit-rgb), .7); }
.knopf--linie:hover{ border-color: var(--zweit); }
.teil--tag .knopf--linie,
.teil--tag-zweit .knopf--linie{ border-color: rgba(var(--zweit-rgb), .45); color: var(--t-schrift); }
.teil--tag .knopf--linie:hover,
.teil--tag-zweit .knopf--linie:hover{ border-color: var(--zweit-tag); }

/* ── Schrift ── */
h1 .name{ letter-spacing: -.01em; line-height: .92; }
.titel, .kopfstueck h1, .abschluss p, .beleg-band p.gross{ letter-spacing: -.01em; }
.kopfstueck h1{ font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4.75rem); line-height: .98;
  hyphens: auto; overflow-wrap: break-word; }
.eyebrow, h1 .ort{ letter-spacing: var(--sp-etikett); }
/* Auf hell: Etikett in Nachtblau, die Linie daneben als Messing-Haarlinie. */
.teil--tag .eyebrow::after, .teil--tag-zweit .eyebrow::after,
.film-band--tag .eyebrow::after{ background: rgba(var(--zweit-rgb), .45); opacity: 1; }
.eyebrow::after{ opacity: .45; }

/* Links im Band unter der Bühne (Telefon, Mail): sonst Browser-Blau auf dunklem Grund. */
.band{ border-bottom-color: rgba(var(--zweit-rgb), .3); }
.band a{ color: var(--n-hell); text-underline-offset: .18em;
  /* Eigenständige Links: Trefferfläche auf 44 px strecken, ohne das Band höher zu machen. */
  display: inline-block; padding-block: .85rem; margin-block: -.85rem; }
.band a:hover{ color: var(--zweit); }

/* ── Bühne ─────────────────────────────────────────────────────────────
   Ape-Heck (Hochformat): MAISTO-Schriftzug und Klappe im Bild, oben weniger Fassade. */
.buehne .foto img[src*="ape-heck"],
.buehne:has(img[src*="ape-heck"]) .foto .film{ object-position: 50% 68%; }
.buehne .foto img[src*="ape-weihnacht"],
.buehne:has(img[src*="ape-weihnacht"]) .foto .film{ object-position: 50% 62%; }
.buehne .foto{ border-left-color: rgba(var(--zweit-rgb), .35); }
.buehne .unter{ max-width: 34ch; }
.buehne .dazu{ max-width: 46ch; }
@media (min-width: 64em){
  .buehne .satz{ max-width: none; padding-right: clamp(2rem, 5vw, 5rem); }
  /* Kein roter Schein in die Textspalte: ruhiger, nur ein Hauch Nachtblau zum Bild. */
  .buehne .schleier{ background: linear-gradient(to right, rgba(var(--n-grund-rgb), .35) 0%, rgba(var(--n-grund-rgb), 0) 30%); }
}

/* ── Kopfstück der Unterseiten: Bild mit Messing-Haarlinie ── */
.kopfstueck{ border-bottom-color: rgba(var(--zweit-rgb), .3); }
.kopfstueck-bild img{ outline: 1px solid rgba(var(--zweit-rgb), .35); outline-offset: -1px; }
@media (min-width: 64em){
  .kopfstueck{ padding-block: clamp(3.4rem, 7vw, 6rem); }
  .kopfstueck .bahn{ grid-template-columns: minmax(0, 1fr) minmax(15rem, min(38vw, 34.5rem)); }
  .kopfstueck-bild{ min-height: 22rem; }
}

/* ── Abschnitte etwas großzügiger ── */
.teil{ padding: clamp(3.6rem, 8.5vw, 7.5rem) 0; }
.vorlauf{ max-width: 58ch; }

/* ── Zwei Spalten: Text und Bild ── */
.zwei{ display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.zwei-bild .figur img{ width: 100%; height: auto; }
@media (min-width: 64em){
  .zwei{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .zwei--hoch{ grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
.zwei--hoch .zwei-bild .figur img{ aspect-ratio: 4 / 5; object-fit: cover; }
.zwei--hoch .zwei-bild .figur img[src*="ape-heck"]{ object-position: 50% 66%; }
.figur figcaption{ font-size: var(--f-klein); }

/* ── Türen ── */
/* Drei Türen (Bausteine auf den Anlass-Seiten): drei Spalten statt vier, keine leere Spur. */
@media (min-width: 64em){
  .tueren:has(> li:nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tueren:has(> li:nth-child(3):last-child) img{ aspect-ratio: 4 / 3; }
  /* Zwei Türen (Nur für Sie / Mitten im Café, 15.10.2026): zwei Spalten statt vier, keine leeren Spuren. */
  .tueren:has(> li:nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tueren:has(> li:nth-child(2):last-child) img{ aspect-ratio: 3 / 2; }
}
.tuer h3{ border-top-color: rgba(var(--zweit-rgb), .55); }
.tuer img{ object-position: 50% 50%; }
.tuer img[src*="ape-bar-maschine"]{ object-position: 62% 50%; }
.tuer img[src*="ape-espresso-bar"]{ object-position: 70% 50%; }
.tuer img[src*="tasse-weihnacht"]{ object-position: 50% 62%; }
.tuer img[src*="barregal-glaeser"]{ object-position: 50% 40%; }

/* Telefon: Türen quer statt hochkant, sonst wird die Seite zur Rolltreppe. */
@media (max-width: 33.99em){
  .tuer img, .tuer-leer{ aspect-ratio: 3 / 2; }
}
.kopfstueck-bild img[src*="ape-siebtraeger"]{ object-position: 50% 35%; }
.kopfstueck-bild img[src*="maisto-tasse-bruehgruppe"]{ object-position: 50% 55%; }
.zwei--hoch .zwei-bild .figur img[src*="ape-espresso-bar"]{ object-position: 70% 50%; }
.anfrage-bild{ margin-top: clamp(2rem, 4vw, 3rem); max-width: 26rem; }
.anfrage-bild img{ aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 66%; }

/* ── Angebot auf der Startseite: drei Bausteine mit römischer Zahl ── */
.angebot{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); }
.angebot-tuer{ display: grid; gap: .55rem; color: inherit; text-decoration: none; }
.angebot-tuer img{ width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: opacity 200ms var(--kurve-aus); }
.angebot-tuer:hover img{ opacity: .88; }
.angebot-zahl{ margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgba(var(--zweit-rgb), .55);
  font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-zahl); line-height: 1;
  color: var(--zweit-tag); }
.angebot-tuer h3{ margin: 0; font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  font-size: var(--f-h3); line-height: 1.2; }
.angebot-tuer p{ margin: 0; font-size: var(--f-text); line-height: 1.55; color: var(--t-still); max-width: 36ch; }
.angebot-tuer .weiter{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--zweit-tag); }
.angebot-tuer:hover h3{ text-decoration: underline; text-underline-offset: .18em;
  text-decoration-color: rgba(var(--zweit-rgb), .8); }
.angebot img[src*="ape-siebtraeger"]{ object-position: 50% 40%; }
@media (min-width: 34em) and (max-width: 63.99em){
  .angebot{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angebot li:last-child{ grid-column: 1 / -1; }
  .angebot li:last-child img{ aspect-ratio: 21 / 9; }
}
@media (min-width: 64em){
  .angebot{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Breites Bild in einem dunklen oder hellen Abschnitt ── */
.beleg-bild img[src*="pasta-parmesanlaib"]{ object-position: 50% 72%; }
.beleg-bild--tag figcaption{ color: var(--t-still); }

/* ── Ablauf: vier Schritte ── */
.schritte{ list-style: none; margin: 0; padding: 0; counter-reset: schritt;
  display: grid; gap: 0; border-top: 1px solid rgba(var(--zweit-rgb), .55); }
.schritte li{ counter-increment: schritt; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: .2rem 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--t-linie); }
.schritte li::before{ content: counter(schritt, upper-roman); grid-row: 1 / span 2;
  font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-zahl); line-height: 1;
  color: var(--zweit-tag); }
.schritte h3{ margin: 0; font-family: var(--h3-familie); font-weight: var(--h3-gewicht); font-size: var(--f-h3); }
.schritte p{ margin: 0; max-width: 56ch; color: var(--t-still); }
@media (min-width: 64em){
  .schritte{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem);
    border-top: 0; }
  .schritte li{ grid-template-columns: minmax(0, 1fr); border-bottom: 0; align-content: start;
    border-top: 1px solid rgba(var(--zweit-rgb), .55); padding-top: 1.2rem; }
  .schritte li::before{ grid-row: auto; margin-bottom: .6rem; font-size: var(--f-gross); }
}

/* ── Anfrageformular in Schritten ─────────────────────────────────── */
.formular{ color-scheme: light; border-top: 2px solid rgba(var(--zweit-rgb), .7); }
.schritt{ border: 0; margin: 0; padding: .9rem 0 .2rem; min-width: 0;
  display: grid; gap: .8rem; border-top: 1px solid var(--t-linie); }
.schritt legend{ display: flex; align-items: center; gap: .6rem; padding: 0; margin-bottom: .2rem;
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--zweit-tag); }
.schritt-zahl{ display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border: 1px solid rgba(var(--zweit-rgb), .9); border-radius: 50%;
  font-family: var(--txt); font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--t-schrift); }
.wahlen{ display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl{ position: relative; display: inline-flex; }
.wahl input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span{ display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .95rem;
  border: 1px solid var(--t-linie-s); border-radius: 2px; background: var(--t-grund);
  font-size: var(--f-klein); font-weight: 600; color: var(--t-schrift); cursor: pointer;
  transition: border-color 160ms var(--kurve-aus), background-color 160ms var(--kurve-aus); }
.wahl:hover span{ border-color: var(--zweit-tag); }
.wahl input:checked + span{ background: var(--zweit-tag); border-color: var(--zweit-tag); color: var(--n-hell); }
.wahl input:focus-visible + span{ outline: 2px solid var(--akzent-tag); outline-offset: 3px; }
/* Schritt-Ansicht (assets/anfrage.js setzt .formular--js; ohne JS eine lange Seite) */
.schritt[hidden]{ display: none; }
.schritt:focus{ outline: none; }
.schritt-satz{ margin: 0; font-size: var(--f-klein); line-height: 1.5; color: var(--t-still); max-width: 52ch; }
.wahl-gruppe{ display: grid; gap: .45rem; }
.wahl-name{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.schritt-titel{ display: flex; align-items: center; gap: .6rem; margin: 0;
  font-family: var(--txt); font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--zweit-tag); }
.datenschutz-satz{ margin: .2rem 0 0; font-size: var(--f-klein); line-height: 1.55; color: var(--t-still); max-width: 60ch; }
.datenschutz-satz a{ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: rgba(var(--zweit-rgb), .9); text-underline-offset: .25em; }
.schritt-knoepfe{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.schritt-knoepfe [hidden]{ display: none; }
.schritt-leiste{ list-style: none; margin: .2rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; counter-reset: leiste; }
.schritt-leiste li{ counter-increment: leiste; padding-top: .45rem; border-top: 3px solid var(--t-linie-s);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--t-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritt-leiste li.erledigt{ border-top-color: rgba(var(--zweit-rgb), .9); }
.schritt-leiste li[data-aktiv]{ border-top-color: var(--zweit-tag); color: var(--t-schrift); }
@media (max-width: 33.99em){
  .schritt-leiste li{ font-size: 0; text-overflow: clip; }
  .schritt-leiste li::before{ content: counter(leiste); font-size: .78rem; }
}
/* Stand nur für Screenreader (aria-live); sichtbar sagt es die Leiste und die Legende. */
.schritt-stand{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.schritt-meldung{ margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--akzent);
  background: var(--t-grund); font-size: var(--f-klein); color: var(--t-schrift); }
.uebersicht{ display: grid; gap: .9rem; }
.uebersicht-gruppe{ border: 1px solid var(--t-linie); background: var(--t-grund); padding: .8rem .95rem; }
.uebersicht-kopf{ display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett); text-transform: uppercase;
  color: var(--zweit-tag); }
.uebersicht-aendern{ font: inherit; font-size: var(--f-klein); letter-spacing: 0; text-transform: none;
  color: var(--t-schrift); background: none; border: 0; padding: .5rem 0 .5rem .5rem; min-height: 2.75rem;
  text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.uebersicht dl{ display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .3rem .9rem;
  margin: .4rem 0 0; font-size: var(--f-klein); }
.uebersicht dt{ color: var(--t-still); }
.uebersicht dd{ margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.anfrage-ablauf{ margin: 1.6rem 0 0; font-size: var(--f-klein); }
.anfrage-ablauf a{ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: rgba(var(--zweit-rgb), .9); text-underline-offset: .25em;
  display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ── Abschlussband: Wappen als Wasserzeichen steht im Kern (site-basis.css „Wappen“, 15.10.2026) ── */
.abschluss{ border-top-color: rgba(var(--zweit-rgb), .3); }

/* ── Fuß ── */
.fuss{ border-top-color: rgba(var(--zweit-rgb), .35); }

/* ── Bildausschnitte (object-position), je Motiv begründet ──────────────── */
/* Kopfstück Espresso-Bar (Ausschnitt aus 093): Brühgruppen im Bild. */
.kopfstueck-bild img[src*="ape-bar-maschine"]{ object-position: 64% 50%; }
/* Kopfstück Hochzeit (093 ganz): Maschine und Mühle, ohne Milchkarton links. */
.kopfstueck-bild img[src*="ape-espresso-bar"]{ object-position: 72% 50%; }
/* Kopfstück Küche: Laib und Spaghetti in der unteren Hälfte. */
.kopfstueck-bild img[src*="pasta-parmesanlaib"]{ object-position: 50% 70%; }
.kopfstueck-bild img[src*="barregal-glaeser"]{ object-position: 50% 45%; }

/* ── Abstände ─────────────────────────────────────────────────────────── */
.fakten + .bilderband, .bilderband + .fakten{ margin-top: clamp(1.8rem, 4vw, 2.8rem); }
.bilderband + .beleg-bild{ margin-top: 0; }
.fakten b{ color: var(--zweit-tag); }

/* Danke-Seite: zwei Knöpfe im Fuß der Quittung standen ohne Abstand aneinander. */
.karte-fuss{ display: flex; flex-wrap: wrap; gap: .7rem; }

@media (prefers-reduced-motion: reduce){
  .angebot-tuer img, .wahl span{ transition: none; }
}

/* Zeile unter dem Namen: Versalien mit Sperrung brauchen mehr als 46ch, sonst bricht
   „nördlich von Berlin“ mitten im Ort um. */
.buehne h1 .ort{ max-width: 62ch; }

/* ── Startseite: sechs Formate (I–VI) ─────────────────────────────────
   Die Regel „letzte Kachel über die ganze Breite“ gilt nur für drei Kacheln. */
@media (min-width: 34em) and (max-width: 63.99em){
  .angebot--sechs li:last-child{ grid-column: auto; }
  .angebot--sechs li:last-child img{ aspect-ratio: 3 / 2; }
}
.angebot--sechs{ row-gap: clamp(2.2rem, 5vw, 3.4rem); }
.angebot img[src*="landgut-gedeckt"]{ object-position: 50% 62%; }
.angebot img[src*="pasta-parmesanlaib"]{ object-position: 50% 70%; }

/* ── Anlässe: fünf Türen — ab 64em drei oben, zwei unten (sechs Spuren) ── */
@media (min-width: 64em){
  .anlaesse-fuenf .tueren{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .anlaesse-fuenf .tueren > li{ grid-column: span 2; }
  .anlaesse-fuenf .tueren > li:nth-child(n+4){ grid-column: span 3; }
  .anlaesse-fuenf .tueren img{ aspect-ratio: 4 / 3; }
  .anlaesse-fuenf .tueren > li:nth-child(n+4) img{ aspect-ratio: 16 / 9; }
}
@media (min-width: 34em) and (max-width: 63.99em){
  .anlaesse-fuenf .tueren > li:last-child{ grid-column: 1 / -1; }
  .anlaesse-fuenf .tueren > li:last-child img{ aspect-ratio: 21 / 9; }
}
.tuer img[src*="ape-heck"]{ object-position: 50% 62%; }
.tuer img[src*="ape-espresso-bar"]{ object-position: 70% 50%; }
.tuer img[src*="landgut-gedeckt"]{ object-position: 50% 62%; }

/* ── Bildausschnitte der neuen Seiten ── */
.kopfstueck-bild img[src*="landgut-tafel"]{ object-position: 50% 60%; }
.kopfstueck-bild img[src*="landgut-tischleuchte"]{ object-position: 40% 50%; }
.kopfstueck-bild img[src*="landgut-langer-tisch"]{ object-position: 50% 60%; }
.kopfstueck-bild img[src*="pizza-margherita"]{ object-position: 50% 50%; }
.kopfstueck-bild img[src*="ape-heck"]{ object-position: 50% 66%; }
.beleg-bild img[src*="landgut-gastraum"]{ object-position: 50% 55%; }
.zwei--hoch .zwei-bild .figur img[src*="landgut-gedeckt"]{ object-position: 50% 60%; }

/* Text in zwei(): zwei Absätze untereinander */
.zwei-text .vorlauf + .vorlauf{ margin-top: 1rem; }
.teil > .bahn > .tun{ margin-top: 1.4rem; }

/* Telefon: sechs Formate untereinander — flacher, sonst wird die Startseite zur Rolltreppe. */
@media (max-width: 33.99em){
  .angebot--sechs .angebot-tuer img{ aspect-ratio: 2 / 1; }
}

/* ── Orte-Netz Berlin & Brandenburg (Bau A2, orte_netz.py) ── */
.netz-text{ margin: 0 0 1.4rem; max-width: 62ch; font-size: var(--f-text); line-height: 1.6; }
.netz-h3{ margin: 1.8rem 0 .7rem; font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  font-size: 1.05rem; letter-spacing: var(--h3-sperrung, 0); }
.netz-hinweis{ margin: 1rem 0 0; font-size: var(--f-klein); color: var(--t-still); }
.netz-weiter{ margin: 1.4rem 0 0; }
.netz-weiter a{ display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--t-schrift);
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--t-linie-s);
  text-underline-offset: .25em; }
.netz-weiter a:hover{ text-decoration-color: var(--t-schrift); }
.ortsteile{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ortsteile li{ padding: .3rem .7rem; border: 1px solid var(--t-linie); font-size: var(--f-klein);
  line-height: 1.4; color: var(--t-schrift); overflow-wrap: anywhere; }
.orte-karten{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--t-linie); }
.orte-karten li{ display: grid; gap: .15rem; padding: .85rem 0 .9rem; border-bottom: 1px solid var(--t-linie); }
.orte-karten a{ display: grid; gap: .1rem; min-height: 2.75rem; color: var(--t-schrift); text-decoration: none; }
.orte-karten a b{ font-family: var(--h3-familie); font-weight: var(--h3-gewicht); font-size: 1.05rem;
  text-decoration: underline; text-decoration-color: var(--t-linie-s); text-underline-offset: .22em; }
.orte-karten a:hover b{ text-decoration-color: var(--t-schrift); }
.orte-zahlen{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.orte-satz{ font-size: var(--f-klein); line-height: 1.5; color: var(--t-still); overflow-wrap: anywhere; }
.netz-kreis + .netz-kreis{ margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.netz-kreis .netz-text{ margin-bottom: .9rem; color: var(--t-still); }
@media (min-width: 40em){
  .orte-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em){
  .orte-karten{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Nacharbeit 14.10. (Prüfrunde Dining) ─────────────────────────────
   H1 nie mitten im Wort trennen (Land-gut, Datenschutz-erklärung): nur ­ trennt,
   Zeilen werden ausgeglichen. Lange Einzelwörter schrumpfen am Telefon statt zu brechen. */
.kopfstueck h1{ hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
/* Zwei Spalten: Text oben bündig mit dem Bild, Hochformate begrenzt (kein Leerraum
   von 200 px über und unter dem Text). */
@media (min-width: 64em){
  .zwei{ align-items: start; }
  .zwei--hoch .zwei-bild .figur img{ max-height: 36rem; }
}
/* Fuß: lange Linktexte brechen um — Abstand zwischen den Einträgen, damit zwei Links
   nicht wie einer wirken. */
.fuss ul{ gap: .6rem; }
.fuss a{ line-height: 1.35; }
/* 404: Hauptseiten als Liste (orte-karten), Namen ohne Etikettspalte. */
.wege-404 a{ align-content: center; }
.kopfstueck h1 .h1-lang{ font-size: .8em; }

/* ══ Konfigurator, Preisliste, Menügänge (BAUPLAN-4, 14.10.2026 abends) ══════════════════
   Studio-Look: weiße Karten auf Studioweiß, Haarlinien, Graphit für die Wahl, Rot nur im Knopf. */
.konfig-teil .titel{ max-width: 22ch; }
.konfig-ohne-js{ max-width: 60ch; color: var(--t-still); }
.konfig-ohne-js a{ color: var(--t-schrift); text-decoration: underline; text-underline-offset: .25em; }
.konfig-raster{ display: grid; gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.konfig{ display: grid; gap: 0; border: 0; padding: 0; background: none; }
.konfig-schritt{ border: 0; margin: 0; min-width: 0; padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  display: grid; gap: .85rem; border-top: 1px solid var(--t-linie-s); }
.konfig-schritt[hidden], [data-teil][hidden]{ display: none; }
.konfig-schritt legend{ display: flex; align-items: center; gap: .65rem; float: left; width: 100%;
  padding: 0; margin: 0 0 .35rem; font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-schrift); }
.konfig-schritt legend + *{ clear: both; }
.konfig-kopf{ margin: 1.1rem 0 0; font-family: var(--txt); font-size: var(--f-text); font-weight: 600; }
.konfig-kopf--klein{ margin-top: .2rem; font-size: var(--f-mikro); letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.konfig-satz{ margin: -.4rem 0 0; font-size: var(--f-klein); color: var(--t-still); }
.konfig-ausgebucht{ margin: .8rem 0 0; }   /* Hinweis „fast ausgebucht“ im Schritt Termin (07.11.2026) */
/* Links im Hinweis-Kasten (Kontaktblock auf anfrage.html, Livegang 07.11.2026) wie Textlinks: ohne Regel nahm Chrome
   die Standardfarbe (Kontrast 1,96 auf --t-zweit, pruefen.mjs). */
.hinweis a:not(.knopf){ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em; }
.hinweis a:not(.knopf):hover{ text-decoration-color: var(--t-schrift); }
.konfig-felder{ display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.konfig-feld--datum{ grid-column: 1 / -1; }
.konfig .feld input, .konfig .feld select, .konfig .feld textarea{ background: #fff; }
.konfig-rahmen{ margin: 0; padding: .85rem 1rem; border-left: 3px solid var(--t-schrift);
  background: #fff; font-size: var(--f-klein); line-height: 1.55; color: var(--t-schrift); max-width: 62ch; }
.konfig-schalter{ display: flex; align-items: flex-start; gap: .65rem; min-height: 2.75rem; cursor: pointer;
  font-size: var(--f-klein); font-weight: 600; line-height: 1.45; }
.konfig-schalter input{ width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; accent-color: var(--t-schrift); flex: none; }
.konfig-wahlen{ display: flex; flex-wrap: wrap; gap: .5rem; }
.konfig-wahlen--karten{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.konfig-wahl{ position: relative; display: flex; min-width: 0; }
.konfig-wahl[hidden]{ display: none; }
.konfig-wahl input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.konfig-wahl-feld{ display: grid; gap: .2rem; align-content: start; width: 100%; min-height: 2.75rem;
  padding: .6rem .9rem; border: 1px solid var(--t-linie-s); border-radius: 2px; background: #fff;
  transition: border-color 160ms var(--kurve-aus), box-shadow 160ms var(--kurve-aus); }
.konfig-wahlen:not(.konfig-wahlen--karten) .konfig-wahl-feld{ display: inline-flex; align-items: center; gap: .55rem; width: auto; }
.konfig-wahl-name{ font-size: var(--f-klein); font-weight: 600; color: var(--t-schrift); }
.konfig-wahl-text{ font-size: var(--f-mikro); line-height: 1.45; color: var(--t-still); }
.konfig-wahl-preis{ font-size: var(--f-klein); font-variant-numeric: tabular-nums; color: var(--t-schrift); }
.konfig-wahl:hover .konfig-wahl-feld{ border-color: var(--t-schrift); }
.konfig-wahl input:checked + .konfig-wahl-feld{ border-color: var(--t-schrift); box-shadow: inset 0 0 0 1px var(--t-schrift);
  background: var(--t-schrift); }
.konfig-wahl input:checked + .konfig-wahl-feld *{ color: var(--n-hell); }
.konfig-wahl input:checked + .konfig-wahl-feld .konfig-vorschlag{ border-color: rgba(var(--n-hell-rgb), .5); }
.konfig-wahl input:focus-visible + .konfig-wahl-feld{ outline: 2px solid var(--t-schrift); outline-offset: 3px; }
.konfig-wahl input:disabled + .konfig-wahl-feld{ opacity: .4; }
.konfig-vorschlag, .preis-vorschlag{ display: inline-block; justify-self: start; margin-left: .35rem;
  padding: .05rem .4rem; border: 1px dashed rgba(var(--t-schrift-rgb), .45); border-radius: 2px;
  font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-still);
  vertical-align: middle; }
.konfig-wahlen--karten .konfig-vorschlag{ margin-left: 0; }
.konfig-status{ margin: 0; font-size: var(--f-klein); font-weight: 600; color: var(--akzent-tag); }
.konfig-status:empty{ display: none; }
.konfig .hinweis{ margin: 0; background: #fff; border-left: 3px solid var(--akzent); }

/* Preis-Spalte */
.konfig-preis-spalte[hidden]{ display: none; }
.konfig-preis{ display: grid; gap: .8rem; padding: clamp(1.1rem, 2vw, 1.5rem); background: #fff;
  border: 1px solid var(--t-linie-s); }
.konfig-preis .eyebrow{ margin: 0; }
.konfig-rahmen-name{ margin: .15rem 0 0; font-weight: 600; font-size: var(--f-klein); }
.konfig-zeilen{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--t-linie); }
.konfig-zeilen li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem;
  padding: .55rem 0; border-bottom: 1px solid var(--t-linie); font-size: var(--f-klein); }
.konfig-zeile-name{ grid-column: 1; overflow-wrap: anywhere; }
.konfig-zeile-klein{ grid-column: 1; grid-row: 2; font-size: var(--f-mikro); color: var(--t-still); }
.konfig-zeile-betrag{ grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.konfig-zeile--regel{ color: var(--t-schrift); font-weight: 600; }
.konfig-zeile--leer{ color: var(--t-still); }
.konfig-gesamt{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .2rem 0 0; }
.konfig-gesamt span{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett); text-transform: uppercase; }
.konfig-gesamt strong{ font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem);
  line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.konfig-unter{ margin: -.4rem 0 0; font-size: var(--f-mikro); color: var(--t-still); }
.konfig-notizen{ list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--f-mikro);
  line-height: 1.5; color: var(--t-still); }
.konfig-notizen li{ padding-left: .9rem; position: relative; }
.konfig-notizen li::before{ content: ""; position: absolute; left: 0; top: .6em; width: .35rem; height: 1px; background: currentColor; }
.konfig-weiter{ justify-self: stretch; text-align: center; justify-content: center; }

/* Leiste unten (Telefon): Gesamtpreis immer sichtbar */
.konfig-leiste{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: .8rem;
  padding: .7rem var(--rand) calc(.7rem + env(safe-area-inset-bottom)); background: var(--n-grund); color: var(--n-hell);
  border-top: 1px solid var(--n-linie-s); }
.konfig-leiste[hidden]{ display: none; }
.konfig-leiste{ transition: opacity 200ms var(--kurve-aus), transform 200ms var(--kurve-aus), visibility 200ms; }
.konfig-leiste--weg{ opacity: 0; visibility: hidden; transform: translateY(100%); }
.konfig-leiste-text{ flex: 1; min-width: 0; font-size: var(--f-mikro); color: var(--n-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konfig-leiste-betrag{ font-family: var(--dis); font-size: 1.5rem; font-weight: var(--dis-gewicht); font-variant-numeric: tabular-nums; }
.konfig-leiste-link{ display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--n-hell);
  font-size: var(--f-klein); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 63.99em){
  body:has(.konfig-leiste:not([hidden])) .fuss{ padding-bottom: 5rem; }
}
@media (min-width: 40em){
  .konfig-felder{ grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
  .konfig-feld--datum{ grid-column: auto; }
}
@media (min-width: 64em){
  .konfig-raster{ grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); align-items: start; }
  .konfig-preis-spalte{ position: sticky; top: 5.5rem; }
  .konfig-leiste{ display: none; }
}

/* Preisliste */
.preisliste-raster{ display: grid; gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-top: .4rem; }
.preisliste-raster--eins{ grid-template-columns: minmax(0, 46rem); }
.preisliste-gruppe h3{ margin: 0 0 .5rem; font-family: var(--txt); font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still); }
.preisliste{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-linie-s); }
.preisliste li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline;
  padding: .65rem 0; border-bottom: 1px solid var(--t-linie); }
.preisliste-name{ display: grid; gap: .15rem; font-weight: 600; font-size: var(--f-klein); }
.preisliste-name small{ font-weight: 400; font-size: var(--f-mikro); line-height: 1.45; color: var(--t-still); }
.preisliste-preis{ text-align: right; font-size: var(--f-klein); font-variant-numeric: tabular-nums; white-space: nowrap; }
.preisliste-preis .preis-vorschlag{ display: block; margin: .25rem 0 0 auto; width: max-content; }

/* Menügänge I–IV */
.gaenge{ list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gang{ display: grid; gap: .45rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--t-schrift); }
.gang-zahl{ font-family: var(--dis); font-size: 2rem; line-height: 1; color: var(--t-still); }
.gang h3{ margin: 0; font-family: var(--txt); font-weight: 600; font-size: var(--f-text); }
.gang p{ margin: 0; font-size: var(--f-klein); color: var(--t-still); }
.gang-liste{ list-style: none; margin: .3rem 0 0; padding: 0; }
.gang-liste li{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .6rem; padding: .4rem 0;
  border-bottom: 1px solid var(--t-linie); font-size: var(--f-klein); }
.gang-liste .preis{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.gang-liste .preis-vorschlag{ margin-left: 0; }
/* Regeln direkt unter den Türen (Startseite): Luft dazwischen */
.tueren + .fakten, .tueren ~ .fakten{ margin-top: clamp(2rem, 4vw, 3rem); }

/* ══ Anfrage-Assistent: ein Schritt je Ansicht, Kalender, Zusammenfassung (BAUPLAN-5, 14.10.2026 abends) ═════ */
.konfig-teil{ scroll-margin-top: 5rem; }
.konfig{ scroll-margin-top: 6rem; }
.konfig-schritt{ border-top: 0; padding-top: .4rem; animation: schritt-ein 260ms var(--kurve-aus) both; }
@keyframes schritt-ein{ from{ opacity: 0; transform: translateY(.5rem); } to{ opacity: 1; transform: none; } }
.konfig-schritt legend{ font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  letter-spacing: 0; text-transform: none; line-height: 1.15; margin-bottom: .6rem; }
.konfig-schritt legend:focus{ outline: none; }
.konfig-schritt .schritt-zahl{ width: 2.1rem; height: 2.1rem; font-family: var(--txt); font-size: .8rem; font-weight: 700; }
.konfig-schritt .schritt-knoepfe{ margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--t-linie-s); }
.konfig-schritt .schritt-knoepfe [data-weiter], .konfig-schritt .schritt-knoepfe [type="submit"]{ margin-left: auto; }

/* Fortschritt: nummerierte Leiste über dem Assistenten */
.konfig-fortschritt[hidden]{ display: none; }
.konfig-fortschritt{ margin-top: clamp(1rem, 2vw, 1.6rem); }
.konfig-schritt-text{ margin: 0 0 .6rem; font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.fortschritt{ list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
.fortschritt-schritt{ min-width: 0; }
.fortschritt-knopf{ display: grid; gap: .3rem; width: 100%; min-height: 2.75rem; padding: .55rem 0 0; border: 0;
  border-top: 3px solid var(--t-linie-s); background: none; color: var(--t-still); font: inherit; text-align: left; cursor: pointer; }
.fortschritt-knopf:disabled{ cursor: default; }
.fortschritt-zahl{ font-size: var(--f-mikro); font-weight: 700; font-variant-numeric: tabular-nums; }
.fortschritt-name{ font-size: var(--f-mikro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fortschritt-schritt--fertig .fortschritt-knopf{ border-top-color: var(--zweit-tag); color: var(--t-schrift); }
.fortschritt-knopf[aria-current="step"]{ border-top-color: var(--akzent); color: var(--t-schrift); }
/* entfallender Schritt (Menü ohne Wahl): ausgeblendet, die übrigen zählen durch (Bugjagd B42) */
.fortschritt-schritt--weg{ display: none; }
.fortschritt-knopf:not(:disabled):hover{ color: var(--t-schrift); }
.fortschritt-knopf:focus-visible{ outline: 2px solid var(--t-schrift); outline-offset: 2px; }
@media (max-width: 47.99em){
  .fortschritt-name{ display: none; }
}

/* Kalender: Sa/So tragen „Café“, gewählter Tag in Graphit */
.konfig-termin{ display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.kalender{ padding: clamp(.8rem, 2vw, 1.2rem); background: #fff; border: 1px solid var(--t-linie-s); min-width: 0; }
.kal-kopf{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.kal-monat{ margin: 0; font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: 1.45rem; }
.kal-blaettern{ width: 2.75rem; height: 2.75rem; border: 1px solid var(--t-linie-s); background: none; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; color: var(--t-schrift); cursor: pointer; }
.kal-blaettern:disabled{ opacity: .3; cursor: default; }
.kal-blaettern:not(:disabled):hover{ border-color: var(--t-schrift); }
.kal-wochentage, .kal-raster{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.kal-wochentage span{ padding: .2rem 0; text-align: center; font-size: var(--f-mikro); font-weight: 600; color: var(--t-still); }
.kal-wochentage .kal-we{ color: var(--golf-tag); }
.kal-tag{ display: grid; place-items: center; align-content: center; gap: 0; min-height: 3rem; padding: .2rem 0;
  border: 1px solid transparent; border-radius: 2px; background: none; color: var(--t-schrift); font: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.kal-zahl{ font-size: var(--f-klein); font-weight: 600; }
.kal-offen{ font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--golf-tag); }
.kal-tag--offen{ background: rgba(var(--golf-rgb), .08); }
/* .formular button (site-basis.css) setzt justify-self: start — im Kalender soll der Tag seine Spalte füllen (Bugjagd B20) */
.kalender .kal-tag{ justify-self: stretch; }
/* Hochzeit: die Website nennt keinen Betrag (Bauplan 5) — Preise der Karten, Zusätze, Vorschlag-Marken und der
   Satz zur Anfahrt treten zurück (Bugjagd B23) */
.konfig--ohne-preis .konfig-wahl-preis, .konfig--ohne-preis .konfig-wahl-zusatz, .konfig--ohne-preis .konfig-vorschlag,
.konfig--ohne-preis [data-teil="anfahrt"]{ display: none; }
.kal-tag--heute .kal-zahl{ text-decoration: underline; text-underline-offset: .2em; }
.kal-tag:not(:disabled):hover{ border-color: var(--t-schrift); }
.kal-tag:disabled{ opacity: .28; cursor: default; }
.kal-tag--gewaehlt, .kal-tag--gewaehlt:hover{ background: var(--t-schrift); border-color: var(--t-schrift); color: var(--n-hell); }
.kal-tag--gewaehlt .kal-offen{ color: var(--n-hell); }
.kal-tag:focus-visible{ outline: 2px solid var(--t-schrift); outline-offset: 2px; }
.kal-legende{ list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; font-size: var(--f-klein); line-height: 1.5;
  color: var(--t-still); }
.kal-legende li{ padding-left: 1.2rem; position: relative; }
.kal-legende li::before{ content: ""; position: absolute; left: 0; top: .45em; width: .7rem; height: .7rem;
  border: 1px solid var(--t-linie-s); background: #fff; }
.kal-legende .kal-legende--offen::before{ background: rgba(var(--golf-rgb), .16); border-color: rgba(var(--golf-rgb), .4); }
.kal-legende b{ display: block; color: var(--t-schrift); }
.konfig-termin .konfig-felder{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 56em){
  .konfig-termin{ grid-template-columns: minmax(18rem, 1.1fr) minmax(0, 1fr); align-items: start; }
}

/* Auswahl-Zusätze, Unterzeilen, Euro-Feld, Zusammenfassung, Anfragenummer */
.konfig-wahl-zusatz{ font-size: var(--f-mikro); font-weight: 600; color: var(--golf-tag); }
.konfig-wahl input:checked + .konfig-wahl-feld .konfig-wahl-zusatz,
.konfig-wahl input:checked + .konfig-wahl-feld .konfig-wahl-zusatz *{ color: var(--golf-hell); }   /* auch „10–18 Uhr“ (.nb) */
.konfig-zeilen .konfig-zeile--unter{ padding-left: .9rem; font-size: var(--f-mikro); }
.konfig-feld--euro input{ max-width: 12rem; }
.konfig-zusammenfassung{ display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0 0 .6rem;
  padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--t-linie-s); font-size: var(--f-klein); }
.konfig-zusammenfassung dt{ font-weight: 600; color: var(--t-still); }
.konfig-zusammenfassung dd{ margin: 0; overflow-wrap: anywhere; }
.quittung-nummer[hidden]{ display: none; }
.quittung-nummer{ margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid var(--golf-tag); background: #fff;
  font-size: var(--f-klein); }
.quittung-nummer b{ font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.konfig-preis-inhalt{ display: contents; }
.konfig-weiter[hidden]{ display: none; }
.nb{ white-space: nowrap; }
.konfig-teil{ padding-top: clamp(1.6rem, 3.5vw, 2.8rem); }

/* ══ Für Firmen (firmen.html, firmenpost.html, firmen-danke.html, firmen-bestaetigt.html; 15.10.2026) ══════════
   firmen_seiten.py + assets/firmen.js. Preise: netto führend, brutto in Klammern (BASIS § 8 Nr. 2). */
.firmen-entwurf{ margin: 0; padding: .7rem max(1rem, calc((100vw - 76rem) / 2)); background: var(--akzent);
  color: var(--akzent-schrift); font-size: var(--f-klein); font-weight: 600; text-align: center; }
.firmen-entwurf b{ margin-right: .4rem; letter-spacing: var(--sp-etikett); text-transform: uppercase; font-size: var(--f-mikro); }
.fp b{ font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-brutto{ color: var(--t-still); font-variant-numeric: tabular-nums; white-space: nowrap; }
.firmen-fussnote, .firmen-klein{ margin: 1rem 0 0; max-width: 72ch; font-size: var(--f-mikro); line-height: 1.55; color: var(--t-still); }
.firmen-text{ margin: 0 0 1.4rem; max-width: 62ch; font-size: var(--f-text); line-height: 1.6; }
.firmen-h3{ margin: 1.4rem 0 .6rem; font-family: var(--h3-familie); font-weight: var(--h3-gewicht); font-size: var(--f-h3); }
.firmen-zwei > div > .firmen-h3:first-child{ margin-top: 0; }
.firmen-code-da{ margin: .8rem 0 0; padding: .7rem 1rem; border-left: 3px solid var(--golf-tag); background: #fff;
  font-size: var(--f-klein); max-width: 40rem; }
.firmen-code-da[hidden]{ display: none; }
.firmen-post .vorlauf{ margin-bottom: 0; }

/* Druckarten: je zwei Tüten nebeneinander, darunter der Text */
.firmen-druck{ display: grid; gap: clamp(1.8rem, 4vw, 3rem); margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.firmen-druck-bilder{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.firmen-druck-art h3{ margin: 1rem 0 .4rem; font-family: var(--h3-familie); font-weight: var(--h3-gewicht); font-size: var(--f-h3); }
.firmen-druck-art p{ margin: 0; max-width: 52ch; color: var(--t-still); }
@media (min-width: 48em){ .firmen-druck{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Staffeltabelle: ab 40em als Tabelle, darunter je Staffel ein Block mit Größe links, Preis rechts */
.staffel-rahmen{ margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.staffel{ width: 100%; border-collapse: collapse; font-size: var(--f-klein); }
.staffel caption{ caption-side: top; text-align: left; padding-bottom: .7rem; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still); }
.staffel th, .staffel td{ padding: .75rem .6rem; border-bottom: 1px solid var(--t-linie); text-align: left; vertical-align: top; }
.staffel thead th{ font-size: var(--f-mikro); letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still);
  border-bottom-color: var(--t-schrift); }
.staffel tbody th{ font-weight: 600; white-space: nowrap; }
.staffel td .fp{ display: grid; gap: .1rem; }
@media (max-width: 39.99em){
  .staffel thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .staffel, .staffel caption, .staffel tbody, .staffel tr, .staffel th, .staffel td{ display: block; }
  .staffel tr{ padding: .4rem 0 .6rem; border-bottom: 1px solid var(--t-schrift); }
  .staffel tbody th{ padding: .6rem 0 .3rem; border: 0; }
  .staffel td{ display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .6rem; padding: .35rem 0; border: 0; }
  .staffel td::before{ content: attr(data-groesse); font-weight: 600; color: var(--t-still); }
  .staffel td .fp{ display: flex; flex-wrap: wrap; gap: 0 .45rem; }
}

.firmen-zwei{ display: grid; gap: clamp(1.6rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 56em){ .firmen-zwei{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.firmen-sorten, .firmen-aufpreise, .firmen-karte-inhalt{ list-style: none; margin: 0; padding: 0; }
.firmen-sorten li, .firmen-aufpreise li{ padding: .55rem 0; border-bottom: 1px solid var(--t-linie); font-size: var(--f-klein); line-height: 1.5; }
.firmen-sorten li:first-child, .firmen-aufpreise li:first-child{ border-top: 1px solid var(--t-linie); }
.firmen-sorten span{ color: var(--t-still); }

/* Karten: Boxen und Feier-Pakete */
.firmen-karten{ list-style: none; margin: clamp(1.2rem, 2.5vw, 2rem) 0 0; padding: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 40em){ .firmen-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em){ .firmen-karten{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.firmen-karte{ display: grid; gap: .5rem; align-content: start; min-width: 0; }
.firmen-karte h3{ margin: .5rem 0 0; font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-h2, 1.8rem); line-height: 1.1; }
.firmen-karte-preis{ margin: 0; font-size: var(--f-text); }
.firmen-karte-preis .fp{ display: inline; }
.firmen-je{ color: var(--t-still); font-size: var(--f-klein); }
.firmen-karte-zusatz{ margin: 0; font-size: var(--f-klein); color: var(--t-still); }
.firmen-karte-inhalt li{ padding: .4rem 0; border-top: 1px solid var(--t-linie); font-size: var(--f-klein); line-height: 1.45; }
.firmen-karte--paket{ padding-top: 1rem; border-top: 2px solid var(--t-schrift); }
.firmen-karten--pakete{ margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.firmen-karte .figur img{ aspect-ratio: 4 / 5; object-fit: cover; }

.firmen-feier-bilder{ display: grid; gap: .8rem; margin: 0 0 clamp(1.4rem, 3vw, 2rem); }
@media (min-width: 64em){ .firmen-feier-bilder{ grid-template-columns: 3fr 2fr; align-items: start; }
  .firmen-feier-bilder .figur:last-child img{ aspect-ratio: 1 / 1; object-fit: cover; } }
.firmen-tun{ margin-top: clamp(1.4rem, 3vw, 2rem); }
.schritte + .fakten{ margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }

/* Formular */
.firmen-anfrage{ max-width: 52rem; margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.firmen-formular legend{ font-family: var(--h3-familie); font-weight: var(--h3-gewicht); font-size: var(--f-h3); margin-bottom: .5rem; }
.firmen-formular .schritt{ display: grid; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--t-linie); }
.firmen-formular .schritt[hidden]{ display: none; }
.firmen-formular .feld--haken{ margin-top: 0; }
.firmen-boxzahlen{ display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.firmen-code input{ max-width: 16rem; text-transform: uppercase; letter-spacing: .06em; }
/* .formular .hinweis setzt Rand und Grund zurück — hier mit gleicher Spezifität, weiter unten */
.formular .firmen-noch-nicht, .formular .firmen-ohne-ziel{ margin: 0; padding: .95rem 1.1rem;
  border-left: 3px solid var(--golf-tag); background: #fff; }
.firmen-ohne-ziel p + p{ margin-top: .5rem; }
.firmen-ohne-ziel a, .firmen-noch-nicht a{ color: var(--t-schrift); text-decoration: underline; text-underline-offset: .2em; }
.firmen-ohne-ziel[hidden], .firmen-noch-nicht[hidden], .firmen-ohne-js[hidden], .firmen-formular[hidden]{ display: none; }
.firmen-widerspruch strong{ font-weight: 600; }
.konfig-kundenart{ margin-top: 1.2rem; }
.konfig-kundenart[hidden]{ display: none; }
/* Nacharbeit nach Augenschein 15.10.: Preise in Faktenlisten nicht als Etikett, Haken bündig, Titel ruhiger */
.fakten .fp b{ font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--t-schrift); padding-top: 0; }
.fakten .fp-brutto{ font-size: inherit; }
.firmen-formular .schritt legend{ text-transform: none; letter-spacing: 0; color: var(--t-schrift); }
.firmen-formular .feld--haken input{ min-height: 0; padding: 0; margin: .4rem 0 0; }
.firmen-formular .feld--haken > span{ padding-block: .2rem; }
.firmen-karte h3{ font-size: clamp(1.7rem, 1.2rem + 1vw, 2.1rem); }

/* ── Schritt 2: Karten „Wie möchten Sie feiern?“ (15.10.2026, Nicola: „man kann es nicht anklicken“) ── */
.konfig-rahmen-wahl{ display: grid; gap: .6rem; margin: 0 0 1.4rem; }
.konfig-rahmen-wahl .konfig-kopf{ margin: 0; }
.konfig-rahmen-wahl .konfig-wahlen--karten{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.konfig-rahmen-wahl .konfig-wahl-feld{ gap: .3rem; padding: .85rem 1rem; }
.konfig-rahmen-wahl .konfig-satz{ margin: 0; font-size: var(--f-mikro); color: var(--t-still); }
.konfig-rahmen-wahl[hidden]{ display: none; }

/* ── Essen aus dem Album „Catering 2024–2026“ (15.10.2026) ─────────────────
   Je Motiv der Ausschnitt, in dem das Essen bleibt (geprüft 360–2560 px). */
/* Lange Platte (hoch): Tomate-Mozzarella und Schinken mit Feigen in der Mitte. */
.tuer img[src*="antipasti-platte-lang"], .angebot img[src*="antipasti-platte-lang"],
.kopfstueck-bild img[src*="antipasti-platte-lang"]{ object-position: 50% 58%; }
/* Fingerfood (sehr hoch): die drei Platten, ohne Schürzen oben. */
.tuer img[src*="fingerfood-platten"], .angebot img[src*="fingerfood-platten"],
.kopfstueck-bild img[src*="fingerfood-platten"]{ object-position: 50% 52%; }
/* Helle Platten (hoch, Nr. 96): Tomate-Mozzarella und Gemüse, ohne die Küche oben. */
.tuer img[src*="antipasti-platten-hell"], .angebot img[src*="antipasti-platten-hell"],
.kopfstueck-bild img[src*="antipasti-platten-hell"]{ object-position: 50% 62%; }
/* Platten mit Burrata (hoch, Nr. 83): Burrata und Zitrone in der Mitte. */
.tuer img[src*="antipasti-platten-burrata"], .kopfstueck-bild img[src*="antipasti-platten-burrata"]{ object-position: 50% 45%; }
/* Käse mit Kräuterpaste (hoch, Nr. 85): der bemalte Teller ganz, ohne den schwarzen Tisch oben. */
.tuer img[src*="burrata-pesto"], .kopfstueck-bild img[src*="burrata-pesto"],
.bilderband img[src*="burrata-pesto"]{ object-position: 50% 55%; }
/* Pass: Teller vorne, Hand mit Löffel oben rechts. */
.tuer img[src*="teller-anrichten-pass"], .kopfstueck-bild img[src*="teller-anrichten-pass"]{ object-position: 50% 55%; }
/* Vorspeisen in Reihen und Margherita im 21:9-Band: Mitte des Musters, der Rand der Pizza. */
.angebot img[src*="vorspeisen-loeffel"]{ object-position: 50% 45%; }
.beleg-bild img[src*="vorspeisen-loeffel"]{ object-position: 50% 42%; }
.beleg-bild img[src*="pizza-margherita"]{ object-position: 50% 45%; }
/* Pizza-Tisch: Burrata in der Mitte, Pizzen links und rechts. */
.kopfstueck-bild img[src*="pizzen-tisch"]{ object-position: 50% 45%; }
/* Standbild am Pass neben Text (Startseite): Hochformat, nicht breiter als nötig — bleibt scharf.
   Einspaltig mittig, zweispaltig Text und Bild auf gleicher Mitte (keine Leerfläche unter dem Text). */
.zwei--film .film-figur{ max-width: 28rem; margin-inline: auto; }
@media (min-width: 64em){
  .zwei--film{ grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: center; }
  .zwei--film .film-figur{ margin-right: 0; }
  /* Zweispaltig quadratisch statt 4:5: der Film wird nicht höher als nötig, über und unter dem Text bleibt
     keine große Leerfläche (Prüfung hig-M9). Ausschnitt oben angesetzt (--film-ursprung im Python), so
     bleiben Hand und Öl im Bild; unten fällt der Teller ohne Fleisch heraus. */
  .zwei--film .film-figur-bild{ aspect-ratio: 1 / 1; }
}
/* Drei Bilder im Zweierraster des Telefons ließen rechts unten ein Loch (wie im Café). */
@media (max-width: 47.99em){
  .bilderband li:nth-child(3):last-child{ grid-column: 1 / -1; }
  .bilderband li:nth-child(3):last-child img{ aspect-ratio: 3 / 2; }
  /* Breites Buffetbild am Telefon nicht 21:9 — sonst ist das Essen zu klein. */
  .beleg-bild--tag img{ aspect-ratio: 3 / 2; }
}
/* Gruppen: Dessertplatten quadratisch, oben angesetzt — hinten die Panna cotta, vorn Crème brûlée,
   Tiramisù und Johannisbeeren (die Unterschrift nennt nur, was im Ausschnitt steht; Prüfung hig-M4). */
.zwei-bild .figur img[src*="dessertplatten"]{ aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 15%; }