/**
 * styles.css — Hoffmann-Fiedler GbR
 *
 * Zweite Fassung, Oktober 2026. Die erste war über sieben Runden gewachsen:
 * Farbwerte wurden vier Mal überschrieben, jede Korrektur lag als neue
 * Schicht obenauf. Das hat man der Seite angesehen — Abstände von 7, 11, 14,
 * 22, 26 px nebeneinander lesen sich als handgemacht, nicht als souverän.
 * Hier gilt deshalb: EIN Satz Farbwerte, EINE Abstandsskala, EINE Typoskala.
 *
 * Die Haltung bleibt, was sich bewährt hat:
 *
 *  1. KEINE externen Schriften. Google Fonts ohne Einwilligung ist ein
 *     DSGVO-Risiko (LG München I, 20.01.2022, 3 O 17493/20). Gesetzt wird in
 *     den Systemschriften, die auf Apple-Geräten Avenir Next sind.
 *
 *  2. FOTOS FÜHREN. Ein Marktmeister glaubt Bildern, nicht Grafiken. Flächen
 *     sind ruhig — eine Fläche, eine Haarlinie, kein Glas-im-Glas. Farbe
 *     kommt aus den Geräten auf den Fotos, nicht aus dem Layout.
 *
 *  3. WARM IST BETRIEB, KALT IST GERÄT. Was ein Amt prüft und überträgt
 *     (Maße, Telefon, Unterlagen), steht in Gold und Monospace. Neonfarben
 *     gehören den Geräten — je Geschäft eine, über --akzent.
 *
 * Pitt Petruschke (PiP)
 */

/* ══════════════════════════════════════════════════════ Grundwerte */
:root {
  /* Nacht über dem Platz: leicht violett, damit das Neon der Fotos der
     hellste Punkt bleibt und die Fläche trotzdem nicht tot-schwarz wirkt */
  --grund: #0e0c16;
  --flaeche: #17142a;
  --flaeche-2: #1f1b36;
  --linie: rgba(235, 233, 219, .12);

  /* Warmes Off-White statt Reinweiß — Reinweiß auf Fast-Schwarz ermüdet */
  --text: #ebe9db;
  --text-2: rgba(235, 233, 219, .76);
  --text-3: rgba(235, 233, 219, .68);

  /* Gerätefarben, von den Fotos abgenommen */
  --pink: #ff2d95;
  --cyan: #35d6ff;
  --lime: #b9ff3d;
  --gelb: #ffd200;
  --orange: #ff8a3d;
  --violett: #9d7bff;
  --gold: #f3c657;

  /* Abstände: 4er-Raster */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --radius: 20px;
  --radius-klein: 12px;
  --max: 1200px;

  --schwung: cubic-bezier(.32, .72, 0, 1);

  --display: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", ui-sans-serif, sans-serif;
  --fliess: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.6 var(--fliess);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, figure, h1, h2, h3, ul, dl { margin: 0; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.huelle { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

.sprung {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  padding: var(--s3) var(--s4); border-radius: var(--radius-klein);
  background: var(--gelb); color: #1a1400; font-weight: 600; text-decoration: none;
}
.sprung:focus { top: var(--s4); }

/* ══════════════════════════════════════════════════════ Typografie
   Skala 13 · 15 · 17 · 20 · 28 · 44 · 64 · 96. Die Condensed-Versal erinnert
   an Kirmes-Plakate — sie bleibt den Überschriften vorbehalten. */
h1, h2 {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; line-height: .95; letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.2vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font: 700 1.25rem/1.2 var(--fliess); letter-spacing: -.005em; }

.lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 54ch; text-wrap: pretty; }
.klein { font-size: .875rem; color: var(--text-3); line-height: 1.55; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 600 .75rem/1 var(--fliess); letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--punkt, var(--gelb));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--punkt, var(--gelb)) 25%, transparent);
}

/* ══════════════════════════════════════════════════════ Knöpfe
   Knöpfe sind Schilder: Versatz-Schatten ohne Blur, beim Drücken sinkt er ein. */
.knopf {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 52px; padding: 0 var(--s5); border-radius: 999px; border: 0;
  background: var(--gelb); color: #1a1400;
  font: 650 1rem/1 var(--fliess); text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .45);
  transition: transform .18s cubic-bezier(.84, 0, .16, 1), box-shadow .18s cubic-bezier(.84, 0, .16, 1), filter .3s;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(0, 0, 0, .5); filter: brightness(1.05); }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 0 rgba(0, 0, 0, .5); }
.knopf .pfeil { font-size: 1.15em; line-height: 1; transition: transform .3s var(--schwung); }
.knopf:hover .pfeil { transform: translateX(3px); }
.knopf.still { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf.still:hover { background: rgba(235, 233, 219, .06); box-shadow: inset 0 0 0 1px rgba(235, 233, 219, .3); }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ══════════════════════════════════════════════════════ Navigation
   Schwebende Leiste. Am Handy ein Menü statt abgeschnittener Links — vorher
   fehlte dort ausgerechnet „Für Veranstalter". */
.kopf { position: fixed; inset: var(--s4) 0 auto; z-index: 50; padding: 0 var(--s4); pointer-events: none; }
.nav {
  pointer-events: auto;
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s2) var(--s2) var(--s5);
  border-radius: 999px;
  background: rgba(23, 20, 42, .78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--linie), 0 16px 40px -20px rgba(0, 0, 0, .9);
}
.marke {
  font: 700 1rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; margin-right: auto;
}
.marke i { font-style: normal; color: var(--gold); }
.marke .kurz { display: none; }

.menue { list-style: none; padding: 0; display: flex; gap: var(--s1); }
.menue a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  border-radius: 999px; text-decoration: none;
  font: 500 .9375rem/1 var(--fliess); color: var(--text-2);
  transition: color .3s, background .3s;
}
.menue a:hover { color: var(--text); background: rgba(235, 233, 219, .07); }
.menue a.hervor { background: var(--gelb); color: #1a1400; font-weight: 650; }
.menue a.hervor:hover { filter: brightness(1.06); }
.menue-knopf { display: none; }

@media (max-width: 900px) {
  /* Am Handy trägt die Leiste den Publikumsnamen „Magic Games" — den kennt
     man vom Platz (Wunsch der Familie). Der Firmenname steht im Impressum. */
  .marke .voll { display: none; }
  .marke .kurz { display: inline; }
  .nav { padding-left: var(--s4); flex-wrap: wrap; border-radius: 26px; }
  .menue-knopf {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
    border-radius: 999px; border: 0; cursor: pointer;
    background: rgba(235, 233, 219, .08); color: var(--text);
    font: 600 .9375rem/1 var(--fliess);
  }
  .menue { display: none; width: 100%; flex-direction: column; padding: var(--s2) 0 var(--s1); }
  .menue.offen { display: flex; }
  .menue a { width: 100%; padding: 0 var(--s3); font-size: 1.0625rem; }
  .menue a.hervor { justify-content: center; margin-top: var(--s2); }
}

/* ══════════════════════════════════════════════════════ Bühne */
.buehne { padding-top: clamp(112px, 15vh, 152px); }
.buehne-text h1 { margin-top: var(--s4); max-width: 22ch; }
.buehne-text h1 span { color: var(--gold); }
.buehne-unten {
  margin-top: var(--s5);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5);
}

/* Das Foto läuft über die volle Breite. Oben blendet es in den Grund über,
   damit es nicht wie ein eingeklebter Kasten wirkt. */
.buehne-bild { position: relative; margin-top: clamp(24px, 4vw, 48px); }
.buehne-bild img {
  width: 100%; height: clamp(320px, 64vh, 780px);
  object-fit: cover; object-position: 50% 58%;
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
}
.buehne-bild figcaption, .flagg-neben figcaption {
  font: 500 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--text-3);
}
.buehne-bild figcaption { position: absolute; right: clamp(20px, 4vw, 40px); bottom: 10%; }

/* Faktenleiste: die vier Antworten, die ein Marktmeister zuerst sucht. */
.fakten {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5);
  margin-top: var(--s6); padding-top: var(--s6); padding-bottom: var(--s6);
}
.fakten li { display: grid; gap: var(--s2); align-content: start; border-top: 1px solid var(--linie); padding-top: var(--s4); }
.fakten b { font: 700 2rem/1 var(--display); color: var(--gold); letter-spacing: -.01em; }
.fakten span { font-size: .9375rem; color: var(--text-2); line-height: 1.45; }
@media (max-width: 900px) { .fakten { grid-template-columns: 1fr 1fr; } }

/* ══════════════════════════════════════════════════════ Abschnitte */
.abschnitt { padding: clamp(64px, 9vw, 120px) 0; }
.kopfzeile { max-width: 62ch; }
.kopfzeile h2 { margin-top: var(--s4); }
.kopfzeile .lead { margin-top: var(--s5); }

/* ══════════════════════════════════════════════════════ Flaggschiff */
.flaggschiff { padding-top: clamp(40px, 6vw, 80px); }
/* Breiter Ausschnitt: das Original ist zur Hälfte Himmel und Schotter. */
.flagg-bild > img, .flagg-bild > .wechsler {
  width: 100%; aspect-ratio: 2 / 1; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--linie), 0 40px 100px -40px color-mix(in oklab, var(--akzent) 45%, transparent);
}
.flagg-bild > img { object-fit: cover; object-position: 50% 60%; }
/* Der große Fassadenschieber bei Magic Games: 16:9 statt 2:1, weil die
   Glücks-Scheune-Aufnahme 4:3 ist — breiter würde ihr Dach abgeschnitten. */
.flagg-bild > .wechsler { aspect-ratio: 16 / 9; }
.flagg-bild .wechsler .griff span { width: 48px; height: 48px; }
.flagg-bild .wechsler .marke-links, .flagg-bild .wechsler .marke-rechts { top: var(--s4); font-size: .75rem; padding: var(--s1) var(--s4); }
.flagg-bild .wechsler .marke-links { left: var(--s4); }
.flagg-bild .wechsler .marke-rechts { right: var(--s4); }
.flagg-raster {
  display: grid; grid-template-columns: 1.15fr .9fr .85fr; gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px); align-items: start;
}
.flagg-text h2 { margin-top: var(--s4); color: var(--akzent); }
/* Beide Gesichter gleich präsent: die Glücks Scheune in ihrem warmen
   Weihnachtslicht-Orange, nicht als graue Fußnote. */
.flagg-text h2 span { color: var(--orange); }
.flagg-text .lead { margin-top: var(--s5); }
.flagg-text .daten { margin: var(--s5) 0 var(--s6); }

.greifer-platz { display: grid; gap: var(--s3); }
.greifer { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--flaeche); }
.greifer > svg { width: 100%; height: 100%; display: block; }
.greifer-hinweis { font-size: .8125rem; color: var(--text-3); text-align: center; }

.flagg-neben { display: grid; gap: var(--s4); }
.flagg-neben img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-klein); box-shadow: 0 0 0 1px var(--linie); }
.flagg-neben figcaption { margin-top: var(--s2); }

/* Zwei Spalten bei Magic Games (kein Greifer): Text links, Nachtbilder rechts */
.flagg-raster.zwei { grid-template-columns: 1.1fr 1fr; }
.flagg-raster.zwei .flagg-neben img { aspect-ratio: 16 / 9; }

@media (max-width: 1100px) {
  .flagg-raster, .flagg-raster.zwei { grid-template-columns: 1fr 1fr; }
  .flagg-text { grid-column: 1 / -1; }
  .flagg-raster.zwei .flagg-neben { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .flagg-raster { grid-template-columns: 1fr; }
  /* Echte Fotos vor der Animation — für Veranstalter sind sie der Beweis,
     der Greifer ist ein Detail zum Ausprobieren (Gegenlesen GPT-5.5). */
  .flagg-neben { grid-template-columns: 1fr 1fr; order: 2; }
  .greifer-platz { order: 3; max-width: 320px; justify-self: center; width: 100%; }
  .flagg-bild > img, .flagg-bild > .wechsler { aspect-ratio: 4 / 3; }
  .flagg-bild .wechsler .marke-links, .flagg-bild .wechsler .marke-rechts { font-size: .625rem; padding: var(--s1) var(--s2); top: var(--s2); }
  .flagg-bild .wechsler .marke-links { left: var(--s2); }
  .flagg-bild .wechsler .marke-rechts { right: var(--s2); }
  .wechsler .zusatz { display: none; }
}

/* ══════════════════════════════════════════════════════ Datenblatt
   Warm ist Betrieb: das ist die Zeile, die ein Amt in sein Formular überträgt. */
.daten { display: grid; font-family: var(--mono); font-size: .875rem; }
.daten div { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--linie); }
.daten div:first-child { border-top: 1px solid var(--linie); }
.daten dt { color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; padding-top: 2px; }
.daten dd { margin: 0; color: var(--gold); }
.daten a { text-decoration: none; }
.daten a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .daten div { grid-template-columns: 1fr; gap: var(--s1); } }

/* ══════════════════════════════════════════════════════ Geschäfte
   Gleiches Seitenverhältnis für alle Bilder — vorher hatte jede Karte ihr
   eigenes Format, und das Raster fand keine Ruhe. */
.geschaefte {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 900px) { .geschaefte { grid-template-columns: 1fr; } }

.karte {
  display: flex; flex-direction: column;
  background: var(--flaeche); border-radius: var(--radius); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--linie);
}
.karte > .foto, .karte > .wechsler { width: 100%; aspect-ratio: 16 / 10; }
.karte > .foto { object-fit: cover; }
.karte .inhalt { padding: var(--s5) var(--s5) var(--s6); display: grid; gap: var(--s3); }
.karte h3 { color: var(--akzent); font-size: 1.5rem; }
.karte h3 span { color: var(--text-3); font-weight: 500; }
.karte .inhalt p:not(.art) { color: var(--text-2); font-size: 1rem; }
.art { font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* Fassadenwechsler: Sommerfront unten, Winterfront per clip-path darüber.
   Der Regler liegt unsichtbar über dem Bild und ist die eigentliche Bedienung —
   so geht es mit Maus, Finger und Tastatur. */
.wechsler { position: relative; overflow: hidden; --teil: 50%; }
.wechsler img { width: 100%; height: 100%; object-fit: cover; }
.wechsler .oben { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--teil)); }
.wechsler .griff { position: absolute; top: 0; bottom: 0; left: var(--teil); width: 2px; background: var(--gelb); pointer-events: none; }
.wechsler .griff span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gelb); box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
}
.wechsler .griff span::before, .wechsler .griff span::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px;
  border-top: 2px solid #1a1400; border-right: 2px solid #1a1400;
}
.wechsler .griff span::before { left: 9px; transform: translateY(-50%) rotate(-135deg); }
.wechsler .griff span::after { right: 9px; transform: translateY(-50%) rotate(45deg); }
.wechsler .marke-links, .wechsler .marke-rechts {
  position: absolute; top: var(--s3); z-index: 2; pointer-events: none;
  padding: var(--s1) var(--s3); border-radius: 999px;
  background: rgba(14, 12, 22, .78);
  font: 600 .6875rem/1.6 var(--fliess); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.wechsler .marke-links { left: var(--s3); }
.wechsler .marke-rechts { right: var(--s3); }
.wechsler input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.wechsler input:focus-visible ~ .griff span { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════ Für Veranstalter */
.veranstalter { background: linear-gradient(180deg, transparent, var(--flaeche) 18%, var(--flaeche) 82%, transparent); }
.veranstalter-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.veranstalter h2 { margin-top: var(--s4); }
.veranstalter .lead { margin: var(--s5) 0 var(--s6); }
.unterlagen {
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie);
}
.unterlagen h3 { font-size: 1.125rem; }
.unterlagen ul { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; gap: var(--s3); }
.unterlagen li { position: relative; padding-left: var(--s6); color: var(--text-2); }
.unterlagen li::before {
  content: ''; position: absolute; left: 2px; top: .3em; width: 14px; height: 8px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}
@media (max-width: 900px) { .veranstalter-raster { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════ Jahreskette
   Die Saison als durchlaufende Linie. Jeder Abschnitt trägt sein eigenes
   Kettenglied (::before) bis zum Punkt des nächsten; --folge ist dessen Farbe,
   damit jedes Glied exakt dort endet, wo das nächste beginnt. Die Zeit-Zeile
   hat feste 32 px Höhe, damit der Punkt auf allen Breiten sitzt. */
.jahreskette { margin-top: clamp(40px, 5vw, 64px); display: grid; }
.jahres-abschnitt { position: relative; padding: 0 0 var(--s6) var(--s6); }
.jahres-abschnitt::before {
  content: ''; position: absolute; left: 7px; top: 16px; width: 2px; height: 100%;
  background: linear-gradient(180deg, var(--akzent), var(--folge, var(--akzent)));
  opacity: .55; border-radius: 2px;
}
.jahres-abschnitt:last-child::before { height: 44px; background: linear-gradient(180deg, var(--akzent), transparent); }
.jahres-marke { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.jahres-marke .punkt {
  position: absolute; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--akzent) 30%, transparent);
}
.jahres-marke .zeit {
  font: 700 clamp(1.125rem, 1.6vw, 1.375rem)/32px var(--display);
  text-transform: uppercase; letter-spacing: .03em; color: var(--akzent);
}
.jahres-hinweis { font-size: .875rem; color: var(--text-3); margin: 0 0 var(--s3); }
.jahres-feste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.jahres-feste li {
  padding: var(--s2) var(--s4); border-radius: var(--radius-klein);
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie);
  font-size: .9375rem; line-height: 1.4;
}
.jahres-feste b { font-weight: 650; }
.jahres-feste .fest { color: var(--text-2); }
.jahres-feste em { display: block; font: normal .75rem/1.4 var(--mono); color: var(--gold); margin-top: 2px; }
.jahres-fussnote { margin-top: var(--s2); padding-left: var(--s6); font-size: .875rem; color: var(--text-3); max-width: 52ch; }

/* ══════════════════════════════════════════════════════ Galerie
   Streifen nebeneinander; der berührte wächst, die anderen weichen — reines
   CSS über flex-grow. Am Handy wird daraus ein Raster. */
.galerie { display: flex; gap: var(--s2); height: clamp(300px, 36vw, 460px); margin-top: clamp(40px, 5vw, 64px); }
.galerie .streifen {
  position: relative; flex: 1 1 0; min-width: 0;
  border-radius: var(--radius-klein); overflow: hidden;
  transition: flex-grow .65s var(--schwung);
}
.galerie:hover .streifen, .galerie:focus-within .streifen { flex-grow: .6; }
.galerie .streifen:hover, .galerie .streifen:focus-visible { flex-grow: 2.8; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--schwung); }
.galerie .streifen:hover img { transform: scale(1.04); }
.galerie .streifen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(14, 12, 22, .38); box-shadow: inset 0 0 0 1px var(--linie);
  transition: background .5s var(--schwung);
}
.galerie .streifen:hover::after, .galerie .streifen:focus-visible::after {
  background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--akzent) 70%, transparent);
}
.galerie .schild {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 2; max-width: calc(100% - 24px);
  padding: var(--s1) var(--s3); border-radius: 999px; background: rgba(14, 12, 22, .82);
  font: 600 .6875rem/1.6 var(--fliess); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--schwung) .1s, transform .4s var(--schwung) .1s;
}
.galerie .streifen:hover .schild, .galerie .streifen:focus-visible .schild { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .galerie { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .galerie .streifen { aspect-ratio: 4 / 3; }
  .galerie .streifen:first-child,
  .galerie .streifen:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .galerie .schild { opacity: 1; transform: none; white-space: normal; left: var(--s2); bottom: var(--s2); }
  .galerie .streifen::after { background: transparent; }
}

/* ══════════════════════════════════════════════════════ Lichtkasten */
.lichtkasten {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(14, 12, 22, .95);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--schwung), visibility 0s .4s;
}
.lichtkasten.offen { opacity: 1; visibility: visible; transition: opacity .4s var(--schwung); }
.lichtkasten figure { max-width: min(1200px, calc(100vw - 128px)); display: grid; gap: var(--s3); justify-items: center; }
.lichtkasten img {
  max-height: 80vh; width: auto; object-fit: contain; border-radius: var(--radius-klein);
  opacity: 0; transform: scale(.97); transition: opacity .4s var(--schwung), transform .5s var(--schwung);
}
.lichtkasten img.da { opacity: 1; transform: none; }
.lichtkasten figcaption { font: 600 .75rem/1 var(--fliess); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.lichtkasten button {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--flaeche-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie);
}
.lichtkasten button:hover { background: #2a2548; }
.lichtkasten button svg { width: 20px; height: 20px; }
.lichtkasten .lk-zu { top: var(--s5); right: var(--s5); }
.lichtkasten .lk-vor { left: var(--s4); top: 50%; translate: 0 -50%; }
.lichtkasten .lk-weiter { right: var(--s4); top: 50%; translate: 0 -50%; }
.lichtkasten .lk-zaehler {
  position: absolute; bottom: var(--s5); left: 50%; translate: -50% 0;
  font: 500 .75rem/1 var(--mono); color: var(--text-3);
}
@media (max-width: 820px) {
  .lichtkasten figure { max-width: calc(100vw - 24px); }
  .lichtkasten .lk-vor, .lichtkasten .lk-weiter { top: auto; bottom: var(--s4); translate: none; }
}

/* ══════════════════════════════════════════════════════ Kontakt */
.kontakt-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s5); margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }
.kontakt-karte, .kontakt-form {
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie);
}
.inhaber { font: 700 1.25rem/1.3 var(--fliess); margin-bottom: var(--s5); }
.inhaber span { display: block; font: 400 .875rem/1.5 var(--fliess); color: var(--text-3); margin-top: var(--s1); }
.kontakt-karte .klein { margin-top: var(--s5); }

label {
  display: block; margin-bottom: var(--s2);
  font: 600 .75rem/1 var(--fliess); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
input, select, textarea {
  width: 100%; margin-bottom: var(--s5); padding: var(--s3) var(--s4); min-height: 48px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  color: var(--text); font: 400 1rem/1.4 var(--fliess);
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--cyan); }
textarea { min-height: 128px; resize: vertical; }
.nachweis { margin-top: var(--s5); font-size: .9375rem; color: var(--text-2); }
.nachweis b { font-family: var(--mono); font-weight: 500; color: var(--gold); }
.kopieren {
  margin-left: var(--s2); padding: var(--s1) var(--s3); min-height: 36px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--linie); font: 500 .8125rem/1 var(--fliess);
}

/* ══════════════════════════════════════════════════════ Fuß */
.fuss { border-top: 1px solid var(--linie); padding: var(--s8) 0 var(--s7); }
.fuss-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss h2 { font: 600 .75rem/1 var(--fliess); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s4); }
.fuss p { font-size: .9375rem; color: var(--text-2); line-height: 1.7; }
.fuss a { color: var(--text); text-underline-offset: 3px; }
.platzhalter { color: var(--gelb); }
.copyright { margin-top: var(--s7); font-size: .8125rem; color: var(--text-3); }

/* ══════════════════════════════════════════════════════ Auftritt beim Scrollen
   Nur transform und opacity — kein Blur mehr, der kostete am Handy Bildrate. */
.auftritt { opacity: 0; transform: translateY(32px); }
.auftritt.da { opacity: 1; transform: none; transition: opacity .9s var(--schwung), transform .9s var(--schwung); }
.auftritt.v2.da { transition-delay: .08s; }
.auftritt.v3.da { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .auftritt { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ══════════════════════════════════════════════════════ Handy */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .kopf { inset: var(--s3) 0 auto; padding: 0 var(--s3); }
  .buehne { padding-top: 104px; }
  .knoepfe { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s4); }
  .knopf { justify-content: center; }
  .buehne-bild img { height: 56vh; object-position: 50% 60%; }
  .buehne-bild figcaption { bottom: 6%; }
  .fakten { gap: var(--s4); }
  .fakten b { font-size: 1.625rem; }
  .karte .inhalt { padding: var(--s4) var(--s4) var(--s5); }
  .jahres-abschnitt { padding-left: 28px; }
  .jahres-abschnitt::before { left: 6px; }
  .jahres-marke .punkt { width: 14px; height: 14px; }
  .jahres-fussnote { padding-left: 28px; }
}

/* ══════════════════════════════════════════════════════ Rechtstexte und 404 */
.rechtstext { max-width: 760px; padding-top: var(--s9); padding-bottom: var(--s9); }
.rechtstext h1 { margin: var(--s6) 0 var(--s7); font-size: clamp(2.25rem, 6vw, 3.5rem); }
.rechtstext h2 { font: 700 1.125rem/1.3 var(--fliess); text-transform: none; letter-spacing: 0; margin: var(--s6) 0 var(--s3); }
.rechtstext p { color: var(--text-2); margin-bottom: var(--s4); max-width: 68ch; }
.rechtstext a { color: var(--gold); }
.fehlerseite { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: var(--s5); padding: var(--s6); }
.fehlerseite h1 { font-size: clamp(3rem, 12vw, 7rem); color: var(--gold); }
.fehlerseite .knoepfe { justify-content: center; }