/* ===== css/fonts.css ===== */
/* ==========================================================================
   OBJEKT: Schrift – Inter (variabel, optische Größe + Stärke), lokal eingebettet
   Auf Apple-Geräten greift zuerst die Systemschrift (San Francisco).
   Keine Verbindung zu fremden Servern. Quelle: Fontsource, SIL Open Font License 1.1,
   Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter).
   Lizenztext: https://openfontlicense.org
   ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(schriften/fonts-2c295d99e2.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ===== css/schrift-marke.css ===== */
/* ==========================================================================
   OBJEKT: Markenschrift – Cormorant Garamond (SemiBold), lokal eingebettet
   Elegante Serifenschrift für den Schriftzug „Gräfin Mariza“ im Kopf.
   Keine Verbindung zu fremden Servern. Quelle: Fontsource 5.3.0,
   SIL Open Font License 1.1, Copyright 2015 The Cormorant Project Authors
   (github.com/CatharsisFonts/Cormorant). Lizenztext: https://openfontlicense.org
   Wieder eingesetzt am 26.10.2026 (Sir Richard: „die alte mit Serifen … sah da besser aus“).
   ========================================================================== */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/schrift-marke-ae062b6d5a.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== css/tokens.css ===== */
/* ==========================================================================
   OBJEKT: Design-Tokens – Gräfin Mariza
   Layout-Idee: wie apple.com – zentrierte Kacheln, große Sans-Headlines,
   viel Luft, gläserne Sticky-Navigation; Gold dort, wo Apple Blau für Links
   und Knöpfe nutzt. Bewusst ein einziger dunkler Look (kein Hell-Modus).
   Farben (Sir Richard, 25.10.2026): Grundfarbe ist das CI-Rot der Design-Guideline
   Gräfin Mariza (Web #660000; RGB-Angabe dort 128/0/0, CMYK 30/100/100/45, HKS 18 K),
   dazu analoge Ableitungen – tiefere Töne desselben Rots, ein Karmesin (Farbton
   ~345–356°) und ein warmes Zinnoberrot (~8°) für Licht in den Verläufen; als
   Kontrast Gold und Schwarz. Schrift in CI-Creme.
   ========================================================================== */
:root {
  /* Flächen */
  --grund:        #660000;   /* Seitengrund = CI-Rot (Web)               */
  --band:         #570000;   /* abgesetzte Bänder, tiefer                */
  --kachel:       #760808;   /* Kacheln und Karten: einen Ton heller als der Grund (gehoben, nicht eingesunken) */
  --kachel-hell:  #4b0000;   /* Hover, Eingabefelder, Pfeilknöpfe: tiefer als der Grund */
  --tief:         #4a000e;   /* tiefes Karmesin (Verlauf im Kopfbereich) */
  --wein:         #8c0c18;   /* Akzentfläche (Hover), Karmesinrot        */
  --wein-glut:    #c4321a;   /* Lichtkante in Verläufen, Zinnoberrot     */
  --schatten:     #2a0008;   /* Schatten in Verläufen, Abdunkeln         */
  --schwarz:      #000000;   /* Kontrast: „Die Gräfin“ (gleiches Schwarz wie der Fotohintergrund) */
  --fuss:         #2b0101;   /* Fußzeile: sehr dunkles Rot in Farbanalogie zum Grund (Farbton 0° wie #660000)
                                (Sir Richard, 26.10.2026: Schwarz wirkte wie ein Bestattungsinstitut,
                                #380000 noch zu hell, #260000 zu dunkel, #2c0000 „fast schwarz“ → #2b0101 nach seiner Vorgabe);
                                --text 17,9:1, --text-2 14,9:1, --text-3 13,4:1, Gold 11,4:1 */
  /* dieselben Farben als Kanäle für halbtransparente Verläufe: rgb(var(--…-rgb) / .4) */
  --wein-rgb:     140 12 24;
  --glut-rgb:     196 50 26;
  --schatten-rgb: 42 0 8;
  --gold-rgb:     232 196 126;

  /* Schrift */
  /* Schrift in CI-Creme – Kontrast nach WCAG 2.2 auf den Flächen
     --grund … --kachel-hell: --text ≥ 12,6:1, --text-2 ≥ 10,5:1, --text-3 ≥ 9,5:1,
     Gold ≥ 8:1; an der hellsten Verlaufsstelle (Zinnober 40 % über --grund):
     --text-3 6,7:1, Gold 5,7:1 */
  --text:         #fdfad8;   /* CI „Creme“ (Design-Guideline Gräfin Mariza) */
  --text-2:       #f1e3c7;   /* Sekundärtext, golden getönt           */
  --text-3:       #e9d7b8;   /* Tertiärtext                           */

  /* Gold */
  --gold:         #e8c47e;
  --gold-hell:    #f3d79c;
  --gold-text:    #000000;   /* Text auf Gold: Schwarz (12,6:1)        */

  --linie:        rgba(252, 245, 225, 0.14);
  --rand-feld:    #d8b98f;   /* Rahmen von Eingabefeldern, ≥ 3:1 (WCAG 1.4.11) */
  --kopf:         #560000;   /* Rot des Seitenkopfs, eine Stufe tiefer als --grund */
  --glas:         rgba(86, 0, 0, 0.94); /* Kopf mit Unschärfe; --text-2 ≥ 10:1 auch über weißem Inhalt */
  --fehler:       #ffc4bd;   /* ≥ 6:1 auch an der hellsten Verlaufsstelle */
  --erfolg:       #b5e6bc;

  /* Schriftfamilie: Systemschrift auf Apple-Geräten, sonst Inter */
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Markenschrift für den Schriftzug im Kopf: Schrift aus dem Logo (Objekt schrift-marke.css) */
  --f-marke: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;   /* Schriftzug im Kopf */

  /* Typo-Skala nach apple.com, Mobile First */
  --t-hero:   clamp(3rem, 12vw, 6.5rem);
  --t-h1:     clamp(2.5rem, 8vw, 4.5rem);
  --t-h2:     clamp(2rem, 6vw, 3.5rem);
  --t-h3:     clamp(1.5rem, 4vw, 2rem);
  --t-intro:  clamp(1.5rem, 4.4vw, 2.5rem);
  --t-sub:    clamp(1.1875rem, 3vw, 1.75rem);
  --t-eyebrow:clamp(1rem, 2.4vw, 1.3125rem);
  --t-body:   1.0625rem;
  --t-klein:  0.875rem;
  --t-mini:   0.75rem;

  /* Raum */
  --band-y:   clamp(4rem, 11vw, 8.5rem);
  --raster:   12px;
  --radius:   28px;
  --radius-s: 18px;
  --breite:   1080px;
  --breite-w: 1440px;
  --nav-h:    52px;

  color-scheme: dark;
}

/* ===== css/base.css ===== */
/* ==========================================================================
   OBJEKT: Basis – Reset, Typografie, Rahmen, Hilfsklassen
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Fläche jenseits des Seitenendes (Safari-Gummiband, kurze Seiten) in der Fußzeilenfarbe –
   sonst erschien unter der Fußzeile ein roter Streifen (Sir Richard, 27.10.2026, Seite Presse) */
html { background-color: var(--fuss); }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f);
  font-size: var(--t-body);
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  overflow-x: hidden;
  overflow-x: clip; /* clip erhält position: sticky */
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 60;
  height: env(safe-area-inset-top, 0px); background: var(--kopf);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.07; text-wrap: balance; }

.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--gold); color: var(--gold-text); padding: .5rem 1rem; border-radius: 99px; }

/* Rahmen: Innen-Wrapper trägt den Seitenrand */
.rahmen {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 734px) {
  .rahmen { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}

.band { padding-block: var(--band-y); }
.band--abgesetzt { background: var(--band); }
.band--schwarz { background: var(--schwarz); } /* „Die Gräfin“: gleiches Schwarz wie der Fotohintergrund */
.zentriert { text-align: center; }
.zentriert .unterzeile { margin-inline: auto; }

/* Typografische Rollen */
.dachzeile { font-size: var(--t-eyebrow); font-weight: 600; color: var(--gold); letter-spacing: -0.01em; margin-bottom: .5rem; }
.titel-hero { font-size: var(--t-hero); letter-spacing: -0.035em; line-height: 1.02; }
.titel-1 { font-size: var(--t-h1); }
.titel-2 { font-size: var(--t-h2); }
.titel-3 { font-size: var(--t-h3); letter-spacing: -0.02em; }
.unterzeile { text-wrap: balance; font-size: var(--t-sub); line-height: 1.3; letter-spacing: -0.012em; color: var(--text); max-width: 34ch; margin-top: .6rem; font-weight: 400; }
.unterzeile--leise { color: var(--text-2); }
.fliesstext { color: var(--text-2); max-width: 62ch; }
.fliesstext p + p { margin-top: 1em; }
.fliesstext strong { color: var(--text); font-weight: 600; }
.klein { font-size: var(--t-klein); color: var(--text-2); }

.kopfzeile { display: grid; gap: .25rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.kopfzeile--zeile { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== css/komponenten/knopf.css ===== */
/* ==========================================================================
   OBJEKT: Knöpfe und Textlinks (Apple-Muster: Pille + "Mehr erfahren ›")
   ========================================================================== */
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin-top: 1.5rem; }
.zentriert .aktionen { justify-content: center; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .65rem 1.4rem; border-radius: 980px;
  font: 500 1.0625rem/1.2 var(--f); letter-spacing: -0.022em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.knopf--gold { background: var(--gold); color: var(--gold-text); }
.knopf--gold:hover { background: var(--gold-hell); }
.knopf--rand { background: transparent; color: var(--gold); border-color: var(--gold); }
.knopf--rand:hover { background: var(--gold); color: var(--gold-text); }
.knopf--klein { min-height: 32px; padding: .35rem .95rem; font-size: .875rem; }
.knopf[aria-disabled="true"], .knopf:disabled { opacity: .45; cursor: default; pointer-events: none; }

.textlink {
  display: inline-flex; align-items: center; gap: .15em;
  color: var(--gold); text-decoration: none; font-size: 1.0625rem; font-weight: 400;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; letter-spacing: inherit;
}
.textlink::after { content: "›"; font-size: 1.2em; line-height: 1; transform: translateY(-.03em); padding-left: .1em; }
.textlink:hover { text-decoration: underline; text-underline-offset: .18em; }
.textlink--gross { font-size: var(--t-eyebrow); }

/* ===== css/komponenten/nav.css ===== */
/* ==========================================================================
   OBJEKT: Navigation – wie die lokale Produkt-Navigation auf apple.com
   Titel links, kleine Links rechts, "Buchen"-Pille; mobil mit Menüknopf (drei Striche)
   ========================================================================== */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--glas);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
}
.nav-innen { display: flex; align-items: center; gap: .75rem; height: var(--nav-h); }
.marke { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); margin-right: auto; flex: none; }
.marke img { width: 36px; height: 36px; flex: none; } /* Original-Logo unverändert als kleines Quadrat (Sir Richard, 26.10.2026) */
.marke span { font-family: var(--f-marke); font-size: 1.625rem; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap; color: var(--gold-hell); }
/* schmale Handys: Schriftzug etwas kleiner, damit er ganz in seinen Platz passt (.marke schrumpft nicht) */
@media (min-width: 360px) and (max-width: 429px) { .nav-innen { gap: .5rem; } .marke img { width: 32px; height: 32px; } .marke span { font-size: 1.4375rem; } }
/* sehr schmale Geräte (320 px): Schriftzug und Abstände kleiner, damit nichts aneinanderstößt */
@media (max-width: 359px) {
  .nav-innen { gap: .5rem; }
  .marke { gap: .375rem; }
  .marke img { width: 28px; height: 28px; }
  .marke span { font-size: 1.1875rem; }
}

.nav-links { display: none; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: .75rem; color: var(--text-2); text-decoration: none; letter-spacing: -0.01em; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { color: var(--text); }

/* Menüknopf mobil: drei Striche, geöffnet ein Kreuz */
.nav-menue {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; cursor: pointer;
  color: var(--text); border-radius: 99px;
}
.nav-menue svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.nav-menue-kreuz, .nav-menue[aria-expanded="true"] .nav-menue-striche { display: none; }
.nav-menue[aria-expanded="true"] .nav-menue-kreuz { display: block; }

.nav-ausklapp { border-top: 1px solid var(--linie); padding-block: .5rem 1.25rem; }
.nav-ausklapp ul { list-style: none; margin: 0; padding: 0; }
.nav-ausklapp a {
  display: block; padding: .8rem 0; border-bottom: 1px solid var(--linie);
  font-size: 1.0625rem; color: var(--text); text-decoration: none;
}
.nav-ausklapp li:last-child a { border-bottom: 0; }

@media (min-width: 834px) {
  .nav-links { display: flex; gap: 1.6rem; margin-right: 1.25rem; }
  .nav-menue, .nav-ausklapp { display: none !important; }
}

/* ===== css/komponenten/sozial.css ===== */
/* ==========================================================================
   OBJEKT: Sozial-Links – runde Symbol-Knöpfe zu Profilen (Instagram, später Facebook)
   Schlichte Links, keine Skripte von Drittanbietern. Profil-URLs aus daten/person.json.
   ========================================================================== */
.sozial-link {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 99px;
  color: var(--text-2); text-decoration: none; transition: color .2s, background-color .2s;
}
.sozial-link:hover { color: var(--gold-hell); background: var(--kachel-hell); }
.sozial-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sozial-link svg { width: 20px; height: 20px; }
/* Schmale Bildschirme: Kopfzeile behält Marke, Buchen und Menü; Instagram steht im Aufklappmenü */
@media (max-width: 379px) { .nav-innen .sozial-link { display: none; } }

/* ===== css/komponenten/kachel.css ===== */
/* ==========================================================================
   OBJEKT: Kacheln – Vollbreite wie auf apple.com (Querformat: komponenten/kachel-quer.css)
   Text oben zentriert, Bild unten, kein Rahmen
   ========================================================================== */
.kachel {
  position: relative; overflow: hidden; text-align: center;
  background: var(--kachel); display: grid; grid-template-rows: auto 1fr;
}
.kachel-text { padding: clamp(2.75rem, 7vw, 3.75rem) max(16px, env(safe-area-inset-left, 0px)) 1.5rem; display: grid; justify-items: center; }
.kachel .unterzeile { color: var(--text); }
.kachel-bild { align-self: end; display: grid; justify-items: center; padding-inline: 16px; }
.kachel-bild img { width: auto; max-height: 560px; border-radius: var(--radius-s) var(--radius-s) 0 0; }

.kachel--gross:has(.kachel-bild) { min-height: 580px; }
.kachel:not(:has(.kachel-bild)) .kachel-text { padding-bottom: clamp(3rem, 8vw, 4.5rem); }
.kachel--gross { background:
  radial-gradient(ellipse 70% 60% at 50% 100%, rgb(var(--wein-rgb) / .45), transparent 70%), var(--kachel); }
.kachel--gross .kachel-text { padding-top: clamp(3rem, 8vw, 4.5rem); }

.kachel-stapel { display: grid; gap: var(--raster); padding: var(--raster); }

/* ===== css/komponenten/kachel-teaser.css ===== */
/* ==========================================================================
   OBJEKT: Kachel-Teaser – Aufhänger und Kurzfakten in den Showkacheln
   Ein Satz, der neugierig macht, dann ein, zwei harte Fakten, dann die
   Knöpfe „Tickets“ und „Mehr über die Show“. Bewusst kurz, damit der
   Ticketknopf auf dem Handy nicht nach unten rutscht.
   ========================================================================== */
.kachel-aufhaenger {
  max-width: 36ch; margin: .9rem auto 0; text-wrap: balance;
  font-size: var(--t-body); line-height: 1.45; color: var(--text-2);
}
.kachel-fakten {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; justify-items: center; gap: .3rem;
  font-size: var(--t-klein); font-weight: 600; letter-spacing: .01em; color: var(--gold-hell);
}
/* Ab Tablet in einer Zeile mit Trennpunkt; mobil untereinander (kein Punkt am Zeilenanfang) */
@media (min-width: 834px) {
  .kachel-fakten { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 0; }
  .kachel-fakten li + li::before { content: "·"; margin-inline: .6rem; color: var(--gold); }
}
.kachel-fakten + .aktionen { margin-top: 1.25rem; }

/* ===== css/komponenten/kachel-quer.css ===== */
/* ==========================================================================
   OBJEKT: Querkachel – Show in voller Breite, Text und Bild nebeneinander
   Modifikator zu .kachel (komponenten/kachel.css). Mobil wie gewohnt
   untereinander (Text oben, Bild unten); ab Tablet zwei Spalten.
   .kachel--quer-umgekehrt setzt das Bild nach links, damit sich die
   Shows abwechseln.
   Breite Bildschirme (Sir Richard, 26.10.2026: „rutschen bei der Vollbilddarstellung
   sehr weit nach links“): Der Hintergrund bleibt vollbreit, der Inhalt bekommt dieselbe
   Seitenbreite wie die übrigen Sektionen (.rahmen, --breite), und die Außenkante (Text,
   bei --quer-umgekehrt das Plakat) liegt bündig mit deren Seitenrand (24 px).
   ========================================================================== */
@media (min-width: 834px) {
  .kachel--quer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto;
    align-items: center; text-align: left; min-height: 620px;
    padding-inline: max(0px, calc((100% - var(--breite)) / 2));
  }
  .kachel--quer .kachel-text { justify-items: start; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem); }
  .kachel--quer .kachel-aufhaenger { margin-inline: 0; }
  .kachel--quer .kachel-fakten { justify-content: flex-start; }
  .kachel--quer .aktionen { justify-content: flex-start; }
  .kachel--quer .kachel-bild { align-self: center; padding: clamp(2rem, 4vw, 3.5rem); }
  .kachel--quer .kachel-bild img { max-height: 540px; border-radius: var(--radius-s); }
  .kachel--quer-umgekehrt .kachel-bild { order: -1; }
}
/* Außenkante bündig mit dem Seitenrand der übrigen Sektionen (.rahmen: 24 px bzw. sicherer Bereich) – der Text bzw.
   bei --quer-umgekehrt das Plakat (Sir Richard, 27.10.2026: „genauso linksbündig wie alles andere“) */
@media (min-width: 834px) {
  .kachel--quer:not(.kachel--quer-umgekehrt) .kachel-text { padding-left: max(24px, env(safe-area-inset-left, 0px)); }
  .kachel--quer-umgekehrt .kachel-text { padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .kachel--quer-umgekehrt .kachel-bild { justify-items: start; padding-left: max(24px, env(safe-area-inset-left, 0px)); }
}

/* ===== css/komponenten/leiste.css ===== */
/* ==========================================================================
   OBJEKT: Horizontale Leiste mit Pfeilen (Galerie, Instagram, Stimmen)
   wie die "Highlights"-Leisten auf apple.com; Pause-Knopf für das automatische Laufen
   ========================================================================== */
.leiste {
  display: grid; grid-auto-flow: column; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: 4px;
  /* Symmetrisch: die Leiste ist so breit wie die Textspalte und links wie
     rechts gleich weit vom Rand entfernt */
  width: min(100% - 32px, var(--breite) - 48px); margin-inline: auto;
}
@media (min-width: 734px) { .leiste { width: min(100% - 48px, var(--breite) - 48px); } }
/* Läuft automatisch (Objekt js/komponenten/leiste-lauf.js setzt die Klasse): ohne Einrasten,
   sonst ruckelt es beim Laufen und springt beim Anhalten zurück */
.leiste.leiste--laeuft { scroll-snap-type: none; }
.leiste::-webkit-scrollbar { display: none; }
.leiste > * { scroll-snap-align: start; }
.leiste--quadrat { grid-auto-columns: clamp(220px, 62vw, 300px); }

.pfeile { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.pfeile button {
  width: 36px; height: 36px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--kachel-hell); color: var(--text); font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center; transition: background-color .2s, opacity .2s;
}
.pfeile button:hover { background: var(--wein); }
.pfeile button:disabled { opacity: .35; cursor: default; }
/* Gemischte Bildformate: Spaltenbreite folgt dem Inhalt */
.leiste--frei { grid-auto-columns: max-content; }
.pfeile .lauf-schalter { font-size: .7rem; letter-spacing: -.05em; }

/* ===== css/komponenten/dialog.css ===== */
/* ==========================================================================
   OBJEKT: Detail-Dialog ("Mehr erfahren") – natives <dialog>
   ========================================================================== */
.dialog {
  width: min(100% - 32px, 760px); max-height: min(88vh, 900px); padding: 0;
  border: 0; border-radius: var(--radius); background: var(--kachel); color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.dialog::backdrop { background: rgb(0 0 0 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dialog-innen { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem); display: grid; gap: 1.25rem; }
.dialog-zu {
  position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; z-index: 1;
  width: 36px; height: 36px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--kachel-hell); color: var(--text); font-size: 1.25rem; line-height: 1;
}
.dialog-zu:hover { background: var(--wein); }
.dialog .fakten { display: grid; gap: .75rem; margin: .5rem 0 0; }
.dialog .fakten div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--linie); }
.dialog .fakten dt { color: var(--text-2); font-size: var(--t-klein); }
.dialog .fakten dd { margin: 0; min-width: 0; }
@media (max-width: 480px) { .dialog .fakten div { grid-template-columns: 1fr; gap: .15rem; } }

/* ===== css/komponenten/formular.css ===== */
/* ==========================================================================
   OBJEKT: Formulare (Kontakt, Bewertung)
   ========================================================================== */
.formular { display: grid; gap: 1rem; }
.formular-zeile { display: grid; gap: 1rem; }
@media (min-width: 640px) { .formular-zeile--2 { grid-template-columns: 1fr 1fr; } }

.feld { display: grid; gap: .4rem; min-width: 0; align-content: start; }
.feld label, .feld legend { font-size: var(--t-klein); color: var(--text-2); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: .75rem 1rem; border-radius: 12px;
  border: 1px solid var(--rand-feld); background: var(--kachel-hell); color: var(--text);
  font: 400 1.0625rem/1.4 var(--f); letter-spacing: -0.01em;
}
.feld textarea { min-height: 150px; resize: vertical; }
/* Platzhalter hell statt Browser-Grau (Kontrast auf dem weinroten Feld) */
/* Platzhalter hell (gut lesbar), aber kursiv – so wirkt das Feld nicht schon ausgefüllt */
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-2); opacity: 1; font-style: italic; }
.feld select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4 6 8.5 10.5 4' fill='none' stroke='%23d8b26c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .3); }
/* Fehler: nicht nur über die Farbe – dickerer Rahmen und Hinweistext am Feld (formular.js) */
.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }
.feld-fehler { margin-top: .35rem; color: var(--fehler); font-size: var(--t-klein); font-weight: 500; }
.feld-fehler::before { content: "! "; content: "! " / ""; font-weight: 700; } /* Zeichen nur sichtbar, nicht vorgelesen */
.feld-hinweis { font-size: var(--t-mini); color: var(--text-3); }

.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.einwilligung { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: var(--t-klein); color: var(--text-2); }
/* Einverständnis-Kästchen im Stil der übrigen Felder: Feldgrund, Feldrand, Gold-Fokus;
   angehakt Gold mit schwarzem Haken (Haken als Bild im Stil, CSP erlaubt data:) */
.einwilligung input {
  -webkit-appearance: none; appearance: none; flex: none; cursor: pointer;
  width: 24px; height: 24px; margin: .05rem 0 0; border-radius: 7px;
  border: 1px solid var(--rand-feld); background: var(--kachel-hell);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.einwilligung input:checked {
  border-color: var(--gold);
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.einwilligung input:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .3); }
.einwilligung input[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }
/* Fokus auch im Fehlerzustand sichtbar (WCAG 2.4.7) – Fehlerrahmen bleibt, Gold-Schein kommt dazu */
.einwilligung input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--fehler), 0 0 0 4px rgb(var(--gold-rgb) / .45); }
/* Hoher Kontrast (Windows): wieder das Kästchen des Systems */
@media (forced-colors: active) { .einwilligung input { -webkit-appearance: auto; appearance: auto; } }

/* Sterne-Bewertung: echte Radio-Knöpfe in der Reihenfolge 1–5, Hervorhebung über :has() */
.sterne-wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.sterne-wahl .reihe { display: inline-flex; justify-self: start; gap: .25rem; }
.sterne-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Nicht gewählt: leerer Stern mit Goldrand; gewählt: hellgold gefüllt (Sir Richard, 26.10.2026) */
.sterne-wahl label { line-height: 0; cursor: pointer; padding: .15rem; transition: transform .15s; }
.sterne-wahl .stern {
  width: 2.25rem; height: 2.25rem; fill: transparent; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round;
  transition: fill .15s, stroke .15s;
}
/* Gewählt: alle Sterne bis einschließlich des gewählten */
.sterne-wahl label:has(~ input:checked) .stern,
.sterne-wahl input:checked + label .stern { fill: var(--gold-hell); stroke: var(--gold-hell); }
/* Beim Überfahren: Vorschau bis zum Stern unter der Maus, Rest leer */
.sterne-wahl .reihe:has(label:hover) label .stern { fill: transparent; stroke: var(--gold); }
.sterne-wahl .reihe:has(label:hover) label:has(~ label:hover) .stern,
.sterne-wahl .reihe:has(label:hover) label:hover .stern { fill: var(--gold-hell); stroke: var(--gold-hell); }
@media (forced-colors: active) {
  .sterne-wahl .stern { stroke: CanvasText; }
  .sterne-wahl label:has(~ input:checked) .stern, .sterne-wahl input:checked + label .stern { fill: Highlight; stroke: Highlight; }
}
.sterne-wahl label:hover { transform: scale(1.08); }
.sterne-wahl input:focus-visible + label { outline: 2px solid var(--gold-hell); border-radius: 6px; }

.formular-status { min-height: 1.5em; font-size: var(--t-klein); }
.formular-status[data-art="ok"] { color: var(--erfolg); }
.formular-status[data-art="fehler"] { color: var(--fehler); }
.formular-status[data-art="info"] { color: var(--gold-hell); }

.karte { background: var(--kachel); border-radius: var(--radius); padding: clamp(1.5rem, 5vw, 3rem); }

/* ===== css/komponenten/stapel.css ===== */
/* ==========================================================================
   OBJEKT: Stapel-Scrollen – Sektionen bleiben stehen, die nächste schiebt
   sich darüber. Wirkt nur, wenn js/komponenten/stapel.js die Klasse
   .stapel-an setzt (also nicht ohne JavaScript, nicht bei reduzierter Bewegung).
   ========================================================================== */
main.stapel-an > section {
  position: sticky;
  top: var(--stapel-top, 0px);
  box-shadow: 0 -24px 48px rgba(0, 0, 0, .45);
}
/* Grundfarbe nur für Sektionen ohne eigenen Hintergrund (:where = keine Spezifität) */
:where(main.stapel-an > section) { background-color: var(--grund); }
main.stapel-an > section:first-child { box-shadow: none; }
/* Abdunkeln der überdeckten Sektion */
main.stapel-an > section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--schatten); opacity: calc(var(--abdeckung, 0) * .45);
}

/* ===== css/komponenten/querlauf.css ===== */
/* ==========================================================================
   OBJEKT: Querlauf beim Scrollen (js/komponenten/querlauf.js setzt .querlauf-an)
   Die Bühne klebt unter der Navigation, die Spur wird vom Skript seitlich
   bewegt. Pfeile entfallen in diesem Zustand.
   ========================================================================== */
/* --querlauf-oben setzt das Skript (unter der Navigation oder, bei hoher Bühne, so,
   dass ihr Ende im Fenster steht); Ersatzwert inklusive oberem Sicherheitsabstand */
.querlauf-an .querlauf-buehne {
  position: sticky; top: var(--querlauf-oben, calc(var(--nav-h, 52px) + env(safe-area-inset-top, 0px)));
  padding-top: clamp(.75rem, 2.5vh, 1.5rem);
}
.querlauf-an [data-querlauf-spur] { overflow-x: hidden; scroll-snap-type: none; }
.querlauf-an .pfeile { display: none; }

/* ===== css/komponenten/bildzoom.css ===== */
/* ==========================================================================
   OBJEKT: Bild wächst beim Scrollen (js/komponenten/bildzoom.js setzt --zoom)
   ========================================================================== */
.bildzoom-an img {
  transform: scale(var(--zoom, 1)); transform-origin: var(--zoom-ursprung, 50% 50%);
  will-change: transform;
}

/* ===== css/komponenten/verlauf.css ===== */
/* ==========================================================================
   OBJEKT: Sektionsverläufe
   Jede Sektion der Seite bekommt einen dezenten Verlauf in analogen Rottönen,
   im Wechsel aus verschiedenen Richtungen. Er hebt die Sektionen voneinander
   ab – gerade beim Stapel-Scrollen, wenn sich eine über die andere schiebt.
   Licht (Zinnober, --glut-rgb) und Schatten (Karmesin, --schatten-rgb) im Wechsel.
   Kontrast geprüft: an der hellsten Stelle (Zinnober zu 40 % über --grund)
   --text-3 ≥ 6,7:1, Gold ≥ 5,7:1.
   Hero und Buchen behalten ihre eigenen Verläufe; „Die Gräfin“ (.band--schwarz) bleibt schwarz.
   ========================================================================== */
main > section.band:not(.band--schwarz),
main > section.shows {
  background-image:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgb(var(--glut-rgb) / .38), transparent 72%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgb(var(--schatten-rgb) / .35), transparent 70%);
}
main > section.band:not(.band--schwarz):nth-of-type(odd) {
  background-image:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgb(var(--glut-rgb) / .4), transparent 70%),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgb(var(--schatten-rgb) / .4), transparent 70%);
}
main > section.band:not(.band--schwarz):nth-of-type(4n) {
  background-image:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgb(var(--glut-rgb) / .4), transparent 70%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgb(var(--schatten-rgb) / .4), transparent 70%);
}

/* ===== css/sektionen/start.css ===== */
/* ==========================================================================
   OBJEKT: Startseite – Hero und Teaser-Bänder
   (Die Gräfin: sektionen/graefin.css, Kontakt: sektionen/kontakt.css)
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: 0 clamp(2.5rem, 8vw, 4rem);
  background: var(--hero-grund);
  --hero-grund: var(--grund); /* CI-Rot, an das das Foto ausläuft */
}
/* Titelbild: die Gräfin mit Federhut. Mobil steht das Foto oben in ganzer Breite,
   der Text beginnt erst darunter (überlappt nur den ausgeblendeten Rand unterhalb
   des Gesichts) – kein Logo im Gesicht, kein Abdunkeln des Gesichts. */
.hero-hintergrund { position: relative; z-index: -1; }
.hero-hintergrund img {
  width: 100%; height: auto; aspect-ratio: 2000 / 2749; max-height: 80svh;
  object-fit: cover; object-position: 50% 10%;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
/* Mobil: oberer Rand unter der Navigation etwas abgedunkelt */
.hero-hintergrund::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 18%; background: linear-gradient(180deg, rgb(var(--schatten-rgb) / .4), rgb(var(--schatten-rgb) / 0)); }
.hero-inhalt { position: relative; text-align: center; display: grid; justify-items: center; margin-top: clamp(-5.5rem, -16vw, -3rem); }
.hero-logo { width: clamp(96px, 20vw, 180px); height: auto; margin-bottom: 1rem; }
.hero .unterzeile { margin-inline: auto; max-width: 30ch; }
.hero .aktionen { justify-content: center; }
.hero .dachzeile { color: var(--gold-hell); }
.hero-naechster { margin-top: 1.5rem; font-size: var(--t-klein); color: var(--text); }
.hero-naechster a { color: var(--text); text-decoration: none; }
.hero-naechster a:hover { color: var(--gold-hell); }
.hero-naechster strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Breite oder niedrige Fenster unter 834 px (Smartphone quer, fast quadratisch):
   das Foto ist dort stark beschnitten – Ausschnitt aufs Gesicht, Ausblenden erst
   ganz unten (Gesicht nicht abdunkeln), das Logo beginnt erst unter dem Foto */
@media (max-width: 833px) and (min-aspect-ratio: 5/6) {
  .hero-hintergrund img {
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  }
  .hero-inhalt { margin-top: 1.25rem; }
}
/* Tablet hochkant: Foto niedriger, damit Name und Knöpfe im ersten Bildschirm stehen;
   Ausschnitt tiefer (weniger Hutspitze), damit das Logo unter dem Kinn bleibt.
   Nur bis Seitenverhältnis 5:6 – breiter würde der Ausschnitt das Kinn erreichen. */
@media (min-width: 600px) and (max-width: 833px) and (max-aspect-ratio: 5/6) {
  .hero-hintergrund img { max-height: 60svh; object-position: 50% 42%; }
}

/* Ab Tablet quer: volle Fensterhöhe unter der Navigation (Sir Richard, 27.10.2026: auf dem iMac
   wurde das Gesicht abgeschnitten und rutschte unter die nächste Sektion). Die Bildfläche ist höchstens
   0,91 × so breit wie hoch (das Foto selbst hat 0,73): Das Foto bleibt unverändert, beschnitten wird
   höchstens rund ein Fünftel der Fotohöhe (etwa 4 % oben, 16 % unten), das Gesicht steht immer ganz im Bild. */
@media (min-width: 834px) {
  .hero { display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: clamp(4rem, 8vw, 6rem); background: linear-gradient(90deg, var(--tief) 0%, var(--hero-grund) 60%); }
  .hero-hintergrund { position: absolute; inset: 0 0 0 auto; width: min(62%, calc((100svh - var(--nav-h)) * .91)); height: 100%; }
  .hero-hintergrund img {
    height: 100%; max-height: none; aspect-ratio: auto; object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 12%, rgba(0, 0, 0, .45) 26%, rgba(0, 0, 0, .85) 40%, #000 50%), linear-gradient(180deg, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 12%, rgba(0, 0, 0, .45) 26%, rgba(0, 0, 0, .85) 40%, #000 50%), linear-gradient(180deg, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero-hintergrund::after { content: none; }
  .hero-inhalt { text-align: left; justify-items: start; margin-top: 0; }
  .hero-inhalt > * { max-width: 34rem; }
  .hero .unterzeile { margin-inline: 0; }
  .hero .aktionen { justify-content: flex-start; }
}
/* Tablet: Foto schmaler, damit die Textspalte nicht über hellen Bildteilen liegt */
@media (min-width: 834px) and (max-width: 1099px) {
  .hero-hintergrund { width: min(52%, calc((100svh - var(--nav-h)) * .91)); }
  .hero-inhalt > * { max-width: 26rem; }
}

/* Breite Bildschirme ab 1100 px: Querformat mit KI-erweitertem Hintergrund (Sir Richard, 27.10.2026:
   „sieht ja dann doch schon deutlich besser aus“), immer in voller Höhe des Heros (Sir Richard: „wir
   brauchen die volle Höhe“ – kein roter Streifen darüber).
   Lage (Sir Richard: „lass es ein bisschen gleiten, sodass die Gräfin im dritten Viertel etwa sich
   befindet, plus minus“): Ihr Gesicht (48,6 % der Bildbreite) steht bei 60 % der Fensterbreite. Damit der
   Hut nie in die Textspalte ragt, rückt sie bei hohen Fenstern so weit nach rechts, dass der linke Hutrand
   (30,6 % der Bildbreite, also 18 % links vom Gesicht) mindestens 330 px rechts vom Textanfang liegt –
   aber nie so weit, dass die Hand (65 %, 16,4 % rechts vom Gesicht) über den rechten Fensterrand ragt.
   Die Bildbreite ergibt sich aus der Höhe: 4000 : 2233 = 1,7913 × Höhe = 179,13cqh (Container-Einheiten).
   Ausblenden: links hinter der Textspalte ins Rot (in Bezug auf .rahmen), unten wie bisher, rechts nur, wo
   der Park auf sehr breiten Bildschirmen endet. */
@media (min-width: 1100px) {
  .hero-hintergrund {
    --text-links: calc(50% - var(--breite) / 2 + max(24px, env(safe-area-inset-left, 0px)));
    inset: 0; width: auto; overflow: hidden; container-type: size;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--text-links) + 300px), rgba(0, 0, 0, .3) calc(var(--text-links) + 430px), #000 calc(var(--text-links) + 560px)), linear-gradient(180deg, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent calc(var(--text-links) + 300px), rgba(0, 0, 0, .3) calc(var(--text-links) + 430px), #000 calc(var(--text-links) + 560px)), linear-gradient(180deg, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hero-hintergrund picture { display: block; position: absolute; inset: 0; }
  .hero-hintergrund img {
    position: absolute; top: 0; left: 60%; /* ältere Browser ohne Container-Einheiten */
    width: auto; height: 100%; max-width: none; max-height: none; aspect-ratio: 4000 / 2233;
    transform: translateX(-48.6%);
    -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 94%, transparent 100%);
  }
  @supports (left: 1cqw) {
    .hero-hintergrund img { left: min(max(60cqw, 50cqw - var(--breite) / 2 + max(24px, env(safe-area-inset-left, 0px)) + 330px + 179.13cqh * .18), 100cqw - 24px - 179.13cqh * .164); }
  }
  /* Zeile „Nächster Auftritt“ schmaler, damit sie vor dem Foto endet */
  .hero-inhalt > .hero-naechster { max-width: 26rem; }
}

/* Auftritt beim Laden – ein orchestrierter Moment, startet sichtbar */
@keyframes hoch { from { transform: translateY(18px); } to { transform: none; } }
.hero-logo, .hero .titel-hero, .hero .unterzeile, .hero .aktionen { animation: hoch .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero .unterzeile { animation-delay: .08s; }
.hero .aktionen { animation-delay: .16s; }

/* Schmale Teaser-Bänder (Presse) */
.teaser { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 834px) { .teaser { grid-template-columns: 1fr auto; } }

/* ===== css/sektionen/shows.css ===== */
/* ==========================================================================
   OBJEKT: Show-Sektionen der Startseite – „Dicke Da“, „Wir sind Dicke da!“, „Samantha Claus“
   (je eine <section class="shows"> mit einer Querkachel, komponenten/kachel-quer.css)
   Sir Richard, 27.10.2026: keine Farbkästchen – der abgesetzte Kachelkasten mit 12-px-Rand
   wirkte im Schattenbereich des Stapel-Scrollens wie ein doppelter Balken. Die Shows sehen
   jetzt aus wie die übrigen Sektionen: Grundfarbe über die volle Fläche, ohne Kasten.
   ========================================================================== */
.shows { background: var(--grund); }
.shows .kachel-stapel { padding: 0; gap: 0; }
.shows .kachel { background: none; }

/* ===== css/sektionen/graefin.css ===== */
/* ==========================================================================
   OBJEKT: Sektion „Die Gräfin“ – Einleitung, Porträt, „Auf einen Blick“
   Container: #graefin (.band--schwarz). Das Porträt wächst beim Scrollen
   (Objekt bildzoom: [data-bildzoom], Ursprung über --zoom-ursprung).
   ========================================================================== */
/* großer Einleitungstext mit hell/dunkel wie bei Apple */
.graefin-text .titel-1 { margin-bottom: clamp(.75rem, 2vw, 1.25rem); }
.intro { font-family: var(--f-display); font-size: var(--t-intro); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-3); max-width: 28ch; }
.intro b { color: var(--text); font-weight: 600; }
.graefin-raster { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
/* Bild wächst beim Scrollen: mobil mittig mit Luft oben/unten,
   ab Tablet nach links in einen breiteren Spaltenabstand */
.graefin-bild { margin: 0; justify-self: center; padding-block: clamp(2.5rem, 12vw, 4.5rem); --zoom-ursprung: 50% 50%; }
.graefin-bild img { width: min(68vw, 300px); border-radius: var(--radius); }
@media (min-width: 834px) {
  .graefin-raster { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(5rem, 10vw, 8.5rem); }
  .graefin-bild { padding-block: 0; --zoom-ursprung: 100% 50%; }
  .graefin-bild img { width: min(30vw, 340px); }
}

/* Auf einen Blick: Aussage statt nackter Zahl */
.graefin-fakten { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.graefin-fakten-titel { font-size: var(--t-h3); margin-bottom: 1.5rem; }
.graefin-fakten-raster { display: grid; gap: 16px; }
@media (min-width: 834px) { .graefin-fakten-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.graefin-fakt { display: grid; gap: .5rem; align-content: start; padding: clamp(1.5rem, 4vw, 2rem); border-radius: var(--radius); background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie); } /* CI-Rot auf Schwarz (Sir Richard, 26.10.2026) */
.graefin-fakt-marke { font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.graefin-fakt-titel { font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--gold-hell); }
.graefin-fakt p:last-child { color: var(--text-2); }

/* ===== css/sektionen/kontakt.css ===== */
/* ==========================================================================
   OBJEKT: Sektion Kontakt – Formular-Band #kontakt mit Mail-Zeile darunter
   (das Formular selbst: komponenten/formular.css)
   ========================================================================== */
/* Mail-Zeile unter dem Kontaktformular */
.zentriert-zeile { justify-content: center; margin-top: 2.25rem; }
/* die Mail-Zeile bleibt lesbar stehen, bevor sich die nächste Sektion darüberschiebt */
#kontakt { padding-bottom: calc(var(--band-y) + clamp(3rem, 12vh, 7rem)); }

/* ===== css/sektionen/referenz.css ===== */
/* ==========================================================================
   OBJEKT: Referenz – „Jetzt kommt die Süße“ (Agentur Plattner)
   Sichtbarer Titel „Frühere Produktionen.“ Eigene Sektion mit eigenem
   Abstand nach oben, weil sie sich beim Stapel-Scrollen über „Die Gräfin“ schiebt.
   Bildleiste nutzt das Objekt .leiste mit Modifikator .leiste--frei
   (komponenten/leiste.css).
   ========================================================================== */
.referenz .unterzeile { max-width: 36ch; }

/* Gemischte Formate: gleiche Höhe, Breite folgt dem Bild,
   Bildunterschrift bricht auf Bildbreite um */
.referenz-bild { margin: 0; width: min-content; }
.referenz-bild img {
  height: clamp(200px, 48vw, 440px); width: auto; max-width: none;
  border-radius: var(--radius-s); background: var(--kachel);
}
.referenz-bild figcaption { margin-top: .6rem; font-size: var(--t-klein); color: var(--text-2); max-width: 34ch; }

.referenz-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.referenz-fuss .pfeile { margin-top: 0; }
.referenz-nachweis { color: var(--text-3); }

/* „Hilfe, Erna kommt!“: eigenes Slide (Sektion .referenz--erna), schiebt sich beim Stapel-Scrollen
   über „Jetzt kommt die Süße“ (Sir Richard, 26.10.2026). Ab Tablet Text links, Bild rechts. */
.referenz-eintrag { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
/* Volle Fensterhöhe unter der Navigation (Sir Richard, 27.10.2026), Inhalt senkrecht mittig */
.referenz--erna { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; }
@media (min-width: 834px) {
  .referenz-eintrag { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
}
.referenz-eintrag-text .unterzeile { max-width: 40ch; }
.referenz-eintrag-bild { margin: 0; max-width: 760px; }
.referenz-eintrag-bild img { width: 100%; border-radius: var(--radius-s); }
.referenz-eintrag-bild figcaption { margin-top: .6rem; }

.referenz-titel { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } /* mehr Luft vor „Hauptrolle ab 2019“ */
/* Querlauf (Slide and Scroll): Bilder möglichst so hoch, dass die ganze Bühne ins Fenster
   passt; nie kleiner als 280 px – dann gleitet die Überschrift beim Lauf unter die Navigation */
.querlauf-an .referenz-bild img { max-height: max(280px, calc(100svh - 580px)); }

/* ===== css/sektionen/rollen.css ===== */
/* ==========================================================================
   OBJEKT: Rollen – „Eine Gräfin. Viele Gesichter.“
   Porträtleiste vor dem Buchungsteil. Nutzt .leiste und .leiste--frei
   (komponenten/leiste.css); hier nur die Bilder selbst.
   ========================================================================== */
.rollen-bild { margin: 0; }
.rollen-bild img {
  height: clamp(320px, 92vw, 560px); width: auto; max-width: none;
  border-radius: var(--radius-s); background: var(--kachel);
}
.rollen .kopfzeile .unterzeile { max-width: 36ch; }
.rollen-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.rollen-nachweis { color: var(--text-3); }
.rollen-fuss .pfeile { margin-top: 0; }
@media (min-width: 834px) { .rollen-bild img { height: clamp(420px, 44vw, 560px); } }
/* Querlauf (Slide and Scroll): Bilder möglichst so hoch, dass die ganze Bühne ins Fenster
   passt; nie kleiner als 320 px – dann gleitet die Überschrift beim Lauf unter die Navigation */
.querlauf-an .rollen-bild img { max-height: max(320px, calc(100svh - 485px)); }

/* ===== css/sektionen/faq.css ===== */
/* ==========================================================================
   OBJEKT: Häufige Fragen – aufklappbare Antworten (natives <details>)
   Inhalte kommen aus daten/faq.json, der Build setzt sie ein.
   ========================================================================== */
.faq-liste { display: grid; gap: 0; border-top: 1px solid var(--linie); max-width: 52rem; }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.25rem; font-family: var(--f-display); font-size: clamp(1.125rem, 2.6vw, 1.375rem); font-weight: 600;
  letter-spacing: -0.015em; color: var(--text);
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center;
  background: var(--kachel-hell); color: var(--gold-hell); font-size: 1.25rem; font-weight: 400; transition: transform .25s;
}
.faq-eintrag[open] summary::after { transform: rotate(45deg); }
.faq-eintrag summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.faq-antwort { padding-bottom: 1.5rem; color: var(--text-2); max-width: 60ch; }
.faq-antwort a { color: var(--gold-hell); }

/* ===== css/sektionen/buchen.css ===== */
/* ==========================================================================
   OBJEKT: Buchen – Hauptangebot der Gräfin (Firmen, Events, Familien)
   Großes Band mit Goldschimmer, drei Anlässe, Feier-Shows
   (eigenes Objekt in komponenten/), Angebot „Maßgeschneidert“, Ablauf
   ========================================================================== */
.buchen {
  padding-block: var(--band-y);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgb(var(--gold-rgb) / .14), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgb(var(--glut-rgb) / .38), transparent 70%),
    var(--band);
  border-block: 1px solid var(--linie);
}
.buchen-kopf { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(3rem, 7vw, 5rem); }
.buchen-kopf .unterzeile { max-width: 36ch; }
.buchen-kopf .aktionen { justify-content: center; }

/* Drei Anlässe */
.anlaesse { display: grid; gap: 16px; }
@media (min-width: 834px) { .anlaesse { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.anlass {
  display: grid; gap: .75rem; align-content: start; min-width: 0;
  background: var(--kachel); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.5rem);
}
.anlass, .angebot { grid-template-columns: minmax(0, 1fr); }
.anlass .titel-3, .angebot .titel-2 { overflow-wrap: break-word; }
.anlass .titel-3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.angebot .titel-2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.anlass-zeichen { width: 40px; height: 40px; color: var(--gold); }
.anlass p { color: var(--text-2); }

/* Angebot „Maßgeschneidert“ */
.angebot {
  display: grid; gap: .6rem; align-content: start; min-width: 0;
  background: var(--kachel); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem);
}
.angebot--gold {
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, rgb(var(--gold-rgb) / .18), transparent 65%),
    var(--kachel);
}
.angebot .fliesstext { margin-top: .4rem; }

/* Ablauf in vier Schritten (echte Reihenfolge, daher nummeriert) */
/* Abgesetzte Tafel mit goldener Oberkante; Nummern mit Abstand zum Rand */
.ablauf {
  margin-top: clamp(4.5rem, 10vw, 7rem); padding: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem);
  border-radius: var(--radius); background: var(--band); box-shadow: inset 0 3px 0 var(--gold);
}
.ablauf .titel-3 { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); font-size: var(--t-h2); }
.ablauf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 2.5rem); counter-reset: none; }
@media (min-width: 834px) { .ablauf-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ablauf-liste li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; align-content: start; }
@media (min-width: 834px) { .ablauf-liste li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; } }
.ablauf-nr {
  width: 48px; height: 48px; font-size: 1.25rem; border-radius: 99px; display: grid; place-items: center;
  background: var(--gold); color: var(--gold-text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.ablauf-liste strong { display: block; color: var(--text); font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.3rem); margin-bottom: .35rem; }
.ablauf-liste p { color: var(--text-2); font-size: var(--t-body); line-height: 1.45; }

.angebot--breit { margin-top: clamp(3rem, 7vw, 4.5rem); text-align: center; justify-items: center; } /* deutlich abgesetzt von den Feier-Shows */
.angebot--breit .fliesstext { margin-inline: auto; }

/* ===== css/komponenten/feiershow.css ===== */
/* ==========================================================================
   OBJEKT: Feier-Shows – buchbare Shows für Feiern (Oktoberfest, Weihnachten,
   Geburtstag, Mitmachen). Container .feiershows mit Kopf und Raster,
   darin Karten .feiershow mit Foto und Text.
   ========================================================================== */
.feiershows { margin-top: clamp(3rem, 7vw, 4.5rem); }
.feiershows-kopf { text-align: center; display: grid; justify-items: center; margin-bottom: 2rem; }
.feiershows-raster { display: grid; gap: 16px; }
@media (min-width: 640px) { .feiershows-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .feiershows-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.feiershow {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
  background: var(--kachel); border-radius: var(--radius);
}
.feiershow-bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.feiershow-bild--mitte { object-position: 48% 50%; } /* Querformat: Bildmitte statt Kopfbereich */
.feiershow-bild--oben { object-position: 50% 4%; }  /* Kopf sehr weit oben (Haarknoten): Ausschnitt fast ganz oben ansetzen */
.feiershow-text { display: grid; gap: .5rem; align-content: start; padding: 1.5rem 1.5rem 1.75rem; }
.feiershow-text .titel-3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); overflow-wrap: break-word; }
.feiershow-text p { color: var(--text-2); }
.feiershow-text .feiershow-marke { color: var(--gold); font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Querlauf (Slide and Scroll) bis Tablet: Karten nebeneinander in einer Spur,
   js/komponenten/querlauf.js bewegt sie beim Scrollen. Ab 1068px passen alle
   vier ins Raster – dann gibt es nichts zu schieben und der Querlauf bleibt aus. */
@media (max-width: 1067px) {
  .querlauf-an .feiershows-raster { display: flex; gap: 16px; overflow-x: hidden; }
  .querlauf-an .feiershow { flex: 0 0 clamp(260px, 72vw, 340px); }
  .querlauf-an .feiershow-bild { aspect-ratio: 1; }
}

/* ===== css/komponenten/einbettung.css ===== */
/* ==========================================================================
   OBJEKT: Eingebettete Beiträge – Klick zum Laden (Instagram, Facebook)
   Karte mit lokalem Vorschaubild, darunter Plattform, Titel, Knopf
   „Beitrag laden“ und Hinweis. Nach dem Klick ersetzt js/komponenten/einbettung.js
   die Fläche durch das iframe des Beitrags.
   ========================================================================== */
.einbettungen { margin-top: clamp(2.5rem, 6vw, 4rem); }
.einbettungen > .unterzeile { margin-bottom: 2rem; }
.einbettungen-raster { display: grid; gap: 16px; margin-top: 1rem; }
@media (min-width: 640px) { .einbettungen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .einbettungen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.einbettung { display: grid; grid-template-rows: 1fr auto; gap: .6rem; min-width: 0; }
.einbettung-flaeche {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius);
  background: var(--kachel); height: 100%;
}
.einbettung-bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: filter .2s; } /* ganzes Foto des Beitrags (4:5, beitragsbilder.py) */
/* Klick aufs Foto lädt den Beitrag wie der Knopf (Sir Richard, 26.10.2026); Tastatur: über den Knopf */
.einbettung-bild[data-einbettung-laden] { cursor: pointer; }
.einbettung-bild[data-einbettung-laden]:hover { filter: brightness(1.08); }
.einbettung-schleier {
  display: grid; align-content: start; justify-items: start; gap: .6rem;
  padding: 1.25rem 1.25rem 1.5rem;
}
.einbettung-plattform { font-size: var(--t-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hell); }
.einbettung-titel { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.2; color: var(--text); }
.einbettung-knopf { margin-top: .35rem; }
.einbettung-hinweis { font-size: var(--t-mini); line-height: 1.4; color: var(--text); }
.einbettung-hinweis a { color: var(--gold-hell); }
.einbettung-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font-size: var(--t-klein); color: var(--text-2); }
.einbettung-fuss a { color: var(--gold-hell); }

/* Geladen: Karte wird breiter (Instagram braucht mind. ca. 326 px), weißer Grund wie bei Meta */
@media (min-width: 640px) { .einbettung--geladen { grid-column: span 2; } }
.einbettung--geladen .einbettung-flaeche { display: block; background: #fff; max-width: 540px; width: 100%; margin-inline: auto; }
.einbettung-rahmen { display: block; width: 100%; height: 760px; border: 0; }
.einbettung--facebook .einbettung-rahmen { height: 700px; }

/* ===== css/sektionen/termine.css ===== */
/* ==========================================================================
   OBJEKT: Termine – Segment-Filter und Liste in einer Karte
   ========================================================================== */
/* Filter als einzelne Knöpfe, ohne umschließende Pille */
.segmente {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; max-width: 100%;
}
.segment {
  min-height: 40px; padding: .45rem 1.05rem; border-radius: 999px; border: 1px solid var(--linie); cursor: pointer;
  background: transparent; color: var(--text-2); font: 500 .875rem/1.2 var(--f); letter-spacing: -0.01em;
}
.segment:hover { color: var(--text); }
.segment[aria-pressed="true"] { background: var(--text); color: var(--grund); }

.terminkarte { background: var(--kachel); border-radius: var(--radius); padding: .5rem clamp(1.25rem, 4vw, 2.5rem); }
.monat-titel { font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 1.5rem 0 .25rem; }
.termin-liste { list-style: none; margin: 0; padding: 0; }
.termin {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: .25rem 1rem; align-items: center;
  padding-block: 1.1rem; border-top: 1px solid var(--linie);
}
.termin-liste .termin:first-child { border-top: 0; }
.termin-datum { display: grid; justify-items: start; line-height: 1.05; font-variant-numeric: tabular-nums; }
.termin-datum .tag { font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.termin-datum .wt { font-size: var(--t-mini); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.termin-info { min-width: 0; }
.termin-show { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.termin-ort, .termin-zeit { font-size: var(--t-klein); color: var(--text-2); }
.termin-zusatz { font-size: var(--t-mini); color: var(--gold-hell); margin-top: .15rem; }
.termin-aktion { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .4rem; }
.termin-marke { font-size: var(--t-mini); color: var(--text-2); border: 1px solid var(--linie); padding: .2rem .55rem; border-radius: 99px; }
.termine-leer { padding: 2rem 0; color: var(--text-2); }

@media (min-width: 734px) {
  .termin { grid-template-columns: 4.5rem 1fr auto; }
  .termin-aktion { grid-column: auto; margin-top: 0; justify-content: flex-end; }
}

/* ===== css/sektionen/stimmen.css ===== */
/* ==========================================================================
   OBJEKT: Stimmen – Karten im Slider, Bewertungsformular
   ========================================================================== */
.leiste--stimmen { grid-auto-columns: clamp(280px, 82vw, 420px); align-items: stretch; }

.stimme {
  display: grid; gap: 1rem; align-content: start; min-width: 0;
  background: var(--kachel); border-radius: var(--radius); padding: 2rem 1.75rem;
}
.stimme-sterne { color: var(--gold); letter-spacing: .1em; font-size: 1.15rem; }
.stimme-text { margin: 0; }
.stimme-text p { font-family: var(--f-display); font-size: 1.3125rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; white-space: pre-line; }
.stimme-fuss { font-size: var(--t-klein); color: var(--text); font-weight: 500; }
.stimme-quelle { font-size: var(--t-mini); color: var(--text-2); margin-top: -.6rem; }
.stimme-video { width: 100%; aspect-ratio: 9 / 16; max-height: 420px; object-fit: cover; border-radius: var(--radius-s); background: var(--grund); }
.stimme--video { padding-top: 1rem; }

.aktionen--kopf { margin-top: 0; }
.band--eng { padding-block: clamp(2rem, 5vw, 3rem) var(--band-y); }

.bewertung-bereich { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 1000px) { .bewertung-bereich { grid-template-columns: .8fr 1.2fr; align-items: start; } }

.stimmen-hinweis { margin-top: 1rem; font-size: var(--t-mini); color: var(--text-2); max-width: 70ch; }

/* ===== css/sektionen/instagram.css ===== */
/* ==========================================================================
   OBJEKT: Instagram-Band – Beiträge nebeneinander
   ========================================================================== */
.insta-kachel {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-s);
  background: var(--kachel); text-decoration: none;
}
.insta-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.insta-kachel:hover img { transform: scale(1.04); }
/* Fokusrahmen nach innen, sonst schneidet ihn die Leiste oben und unten ab */
.insta-kachel:focus-visible { outline-offset: -3px; }

/* ===== css/sektionen/presse.css ===== */
/* ==========================================================================
   OBJEKT: Presse-Unterseite
   ========================================================================== */
.seitenkopf { text-align: center; padding-block: clamp(3.5rem, 10vw, 6rem) clamp(2rem, 5vw, 3rem); }
.seitenkopf .unterzeile { margin-inline: auto; max-width: 32ch; }

.presse-raster { display: grid; gap: 16px; }
@media (min-width: 834px) { .presse-raster { grid-template-columns: 1fr 1fr; } }
.presse-karte { background: var(--kachel); border-radius: var(--radius); padding: clamp(1.75rem, 5vw, 3rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.presse-karte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: var(--text-2); }
.presse-karte li { padding-left: 1.1rem; position: relative; }
.presse-karte li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 99px; background: var(--gold); }
.adresse-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.adresse { font-size: 1.1875rem; font-weight: 600; user-select: all; overflow-wrap: anywhere; min-width: 0; }

/* ===== css/sektionen/pressefotos.css ===== */
/* ==========================================================================
   OBJEKT: Pressefotos – Galerie auf presse.html (Inhalte aus daten/pressefotos.json)
   Spalten statt Raster: Hoch- und Querformat bleiben unbeschnitten.
   ========================================================================== */
.pressefotos-kopf { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pressefotos-nutzung { margin-top: .75rem; max-width: 60ch; }
.pressefotos { columns: 1; column-gap: 16px; }
@media (min-width: 600px) { .pressefotos { columns: 2; } }
@media (min-width: 834px) { .pressefotos { columns: 3; } }
/* position: relative – sonst setzt Safari (WebKit) die unsichtbaren Vorlese-Texte (.nur-sr, absolut
   positioniert) in Spalten-Layouts weit unter die Fußzeile: Die Seite wurde rund 3400 px länger, unter
   der Fußzeile folgte leere Fläche (Sir Richard, 26./27.10.2026: „nach dem Footer nochmal ein roter
   Abschnitt“, Seite Presse). */
.pressefoto { position: relative; margin: 0 0 1.5rem; break-inside: avoid; }
.pressefoto img { width: 100%; height: auto; border-radius: var(--radius-s); background: var(--kachel); }
.pressefoto figcaption { margin-top: .6rem; font-size: var(--t-klein); color: var(--text-2); line-height: 1.45; }
.pressefoto-zeile { display: block; margin-top: .3rem; color: var(--text-3); }
.pressefoto-zeile a { color: var(--gold-hell); text-underline-offset: .18em; }

/* ===== css/sektionen/recht.css ===== */
/* ==========================================================================
   OBJEKT: Rechtstexte (Impressum, Datenschutz) – schmale Lesespalte
   ========================================================================== */
.rechtstext { max-width: 720px; margin-inline: auto; padding-bottom: var(--band-y); color: var(--text-2); }
.rechtstext h2 { font-size: 1.5rem; color: var(--text); margin: 2.75rem 0 .75rem; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: anywhere; }
.rechtstext h3 { font-size: 1.1875rem; color: var(--text); margin: 1.75rem 0 .5rem; letter-spacing: -0.015em; }
.rechtstext p, .rechtstext ul, .rechtstext address { margin: 0 0 1em; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li + li { margin-top: .35rem; }
.rechtstext address { font-style: normal; color: var(--text); }
.rechtstext a { color: var(--gold); text-underline-offset: .18em; overflow-wrap: anywhere; }
.rechtstext strong { color: var(--text); font-weight: 600; }
.rechtstext .hervorgehoben { border: 1px solid var(--gold); border-radius: var(--radius-s); padding: 1.25rem 1.5rem; color: var(--text); }
.rechtstext .stand { font-size: var(--t-klein); color: var(--text-3); margin-top: 3rem; }

/* ===== css/sektionen/fuss.css ===== */
/* ==========================================================================
   OBJEKT: Fußzeile – klein und grau wie auf apple.com
   ========================================================================== */
/* position/z-index: Die Fußzeile liegt über dem Schatten der letzten Stapel-Sektion
   (stapel.css wirft 0 -24px 48px, der Weichzeichner reicht ca. 24 px nach unten) */
.fuss { position: relative; z-index: 1; background: var(--fuss); color: var(--text-2); font-size: var(--t-mini); line-height: 1.5; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.fuss a { color: var(--text-2); text-decoration: none; }
.fuss-logo { width: 180px; height: auto; margin: 1.5rem auto .75rem; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
/* Instagram in der Spalte „Kontakt“: kleines Symbol vor dem Wort, so groß wie die Schrift */
.fuss-instagram { display: inline-flex; align-items: center; gap: .4em; }
.fuss-symbol { width: 1.1em; height: 1.1em; flex: none; }
/* Link mitten im Satz (Bildnachweise) als Link erkennbar, nicht nur am Mauszeiger (WCAG 1.4.1) */
.fuss-unten p a { text-decoration: underline; text-underline-offset: .18em; }
.fuss-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--linie); }
.fuss-spalten h2 { font-family: var(--f); font-size: var(--t-mini); font-weight: 600; color: var(--text); letter-spacing: 0; margin-bottom: .5rem; }
.fuss-spalten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
@media (min-width: 834px) { .fuss-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fuss-unten { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: 1rem; }
.fuss-unten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
/* Mobil: mittig und mit mehr Rand, damit es nicht linkslastig wirkt
   (steht nach den Grundregeln, damit es sie überschreibt) */
@media (max-width: 833px) {
  .fuss .rahmen { padding-inline: max(32px, env(safe-area-inset-left, 0px)); }
  .fuss-spalten, .fuss-unten { text-align: center; justify-items: center; }
  .fuss-unten, .fuss-unten ul { justify-content: center; }
}