/* ═══════════════════════════════════════════════════════════════════════
   FIRMENEVENT — ORGANISATIONS-STRECKE · gemeinsames Stylesheet
   Angelegt 21.09.2026

   Vier Seiten teilen sich diese Datei:
     /firmenevent/veranstalter/            01 Ueberblick
     /firmenevent/veranstalter/ablauf/     02 Der Abend bei Ihnen
     /firmenevent/veranstalter/technik/    03 Technik & Raum
     /firmenevent/veranstalter/unterlagen/ 04 Unterlagen & Kontakt

   WOHER DAS AUSSEHEN KOMMT. Nicht aus der Fleischwolf-Veranstalterstrecke
   (die ist dunkel, Plakatschrift, Kreide) — sondern aus /firmenevent/
   selbst: Creme-Grund, Lato fuer Ueberschriften, Open Sans fuer Text,
   dunkle Navileiste, Gold als Akzent, Rot als Handlungsfarbe. Die Tokens
   unten sind 1:1 aus template.html der Firmenevent-Seite uebernommen,
   damit beide Seiten wie ein Haus wirken.

   WOHER DER AUFBAU KOMMT. Aus der Fleischwolf-Strecke: kurze
   Einstiegsseite, drei Tueren dahinter, oben durchgehend die
   Streckennavigation, jede Anforderung als Karte mit Aufklapper
   ("Warum"), damit die Seite kurz aussieht und trotzdem alles enthaelt.

   TONLAGE. Diese Seiten sind zugleich Bewerbung. Es darf nichts wie eine
   Forderungsliste klingen. Reihenfolge deshalb immer: erst was der
   Kuenstler mitbringt, dann was das Haus ohnehin hat, zuletzt und klein,
   was von der Firma gebraucht wird. Alle Negativforderungen positiv
   formuliert.

   ⛔ MITTIGKEIT. Ueberschriften, Augenbrauen, Bildzeilen und Kastentitel
   stehen auf ALLEN Breiten mittig — das ist Grundregel, nicht Media
   Query. Nepo, 14.09.2026, zwoelfmal in einer Session eingefordert.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Lato';src:url(fonts/Lato-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(fonts/Lato-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(fonts/Lato-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url(fonts/Lato-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/OpenSans-var.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --dark:#1a1a1a;
  --cream:#f0ebe3;
  --cream2:#e9e2d7;
  --red:#8b2432;
  --red2:#a62b3d;
  --gold:#d4af37;
  /* ⛔ 25.09.2026, Nepo-Auftrag „Kontrast auf hellem Grund": das alte
     #b9932c mass als Text auf weiss/creme/sand nur 2,2–2,9:1 (Augenbraue,
     Kasten-Titel, Stationszeit). Gedunkelt auf #78591a: 5,0–6,5:1 auf allen
     drei hellen Baendern. Als gestrichelter Rahmen (.orientierung) weiterhin
     gut sichtbar. */
  --gold-warm:#78591a;
  /* 25.09.2026: Ersatz fuer die bisherigen rgba(255,255,255,.35–.62)-Grautoene
     auf dunklem Grund (Navi-Rueckweg, Streckennav, Fusszeile) — die lagen
     zwischen 3,2:1 und 6,9:1, Nepo verlangt auf dunklem Grund mindestens 7:1.
     --nebel misst 7,5:1 gegen --dark. */
  --nebel:#aaaaaa;
  --green:#2c5530;
  --white:#ffffff;
  --mid:#555555;
  --dim:#888888;
  --border:#e8e2d8;
  --border2:#d8cfc0;

  --fh:'Lato',Arial,sans-serif;
  --fb:'Open Sans',Arial,sans-serif;

  --nav-h:68px;
  --max:1080px;
  --eng:820px;
  --ease:cubic-bezier(.22,.68,0,1.2);
}

/* ── Grundlage ───────────────────────────────────────────────────────
   ⛔ `html body` statt `body`: Das Theme wird NACH diesem Stylesheet
   geladen und gewinnt sonst jede Regel gleicher Spezifitaet — am
   12.09.2026 auf der Fleischwolf-Strecke live gemessen. Jede tragende
   Flaeche bekommt ausserdem ihren eigenen Hintergrund. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px!important;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html body{background:var(--cream);color:var(--dark)}
body{
  font-family:var(--fb);
  font-size:clamp(1rem,.3vw + .94rem,1.06rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-top:var(--nav-h);
}
img{display:block;max-width:100%}
a{color:var(--red);text-decoration:none}
strong,b{font-weight:700;color:var(--dark)}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.4em}
h1,h2,h3,h4{font-family:var(--fh);font-weight:900;line-height:1.08;color:var(--dark);text-wrap:balance;text-align:center}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ═══ KOPFLEISTE ════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(26,26,26,.96);
  border-bottom:1px solid rgba(212,175,55,.14);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.nav__zeile{
  height:var(--nav-h);
  display:flex;align-items:center;gap:14px;
  padding:0 clamp(16px,4vw,48px);
}
.nav__logo{flex-shrink:0;display:block;line-height:0}
.nav__logo img{
  width:46px;height:46px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(212,175,55,.35);
  transition:box-shadow .25s,transform .25s;
}
.nav__logo:hover img{box-shadow:0 0 0 2px var(--gold);transform:rotate(-4deg) scale(1.04)}
.nav__rueck{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.06em;color:var(--nebel);
  transition:color .2s;
}
.nav__rueck:hover{color:var(--gold)}
/* ⛔ Nepo, 24.09.2026: „Das Vorgespraech, das zu vereinbaren ist, kommt
   eigentlich auch nicht wieder hin. Das hast du bei der eine-Stunde-Seite
   besser geloest." Dort steht in der Kopfleiste nur Marke und Rueckweg;
   der Kontakt kommt EINMAL, am Ende der Strecke. Die Klasse bleibt als
   Rueckfallebene stehen, wird aber von keiner Seite mehr benutzt. */
.nav__rueck{margin-left:auto}
.nav__knopf{
  display:none;width:42px;height:42px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.22);border-radius:4px;
  background:rgba(255,255,255,.05);
  align-items:center;justify-content:center;gap:4px;flex-direction:column;
  cursor:pointer;
}
.nav__knopf span{display:block;width:18px;height:2px;background:#fff;transition:transform .25s,opacity .2s}
.nav__knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__knopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Die Strecke: vier Stationen, immer sichtbar, aktuelle hervorgehoben. */
.strecke{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  padding:0 clamp(12px,3vw,40px);
}
.strecke a{
  display:flex;align-items:center;gap:8px;
  padding:9px 15px;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--nebel);
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.strecke a i{
  font-style:normal;font-size:.82rem;
  color:var(--gold);
}
.strecke a:hover{color:rgba(255,255,255,.9)}
.strecke a[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold)}
.strecke a[aria-current="page"] i{opacity:1}

/* Der Anfrage-Knopf bleibt auf JEDER Breite in der Leiste — er ist der
   Grund, warum diese Seiten existieren. Platz dafuer entsteht, indem die
   langen Wortteile (.lang) verschwinden, nicht der Knopf. */
@media (max-width:900px){
  .nav__knopf{display:flex}
  .nav__zeile{gap:10px;padding:0 14px}
  .nav__cta{margin-left:auto;padding:8px 13px;font-size:.7rem;letter-spacing:.05em}
  .nav__rueck{font-size:.74rem}
  .lang{display:none}
  .nav__auf{
    display:none;flex-direction:column;
    padding:0 clamp(16px,4vw,48px);
    border-top:1px solid rgba(255,255,255,.1);
    max-height:calc(100vh - var(--nav-h));overflow:auto;
  }
  .nav.offen .nav__auf{display:flex}
  .strecke{flex-direction:column;background:none;border:0;padding:8px 0}
  .strecke a{
    border-bottom:1px solid rgba(255,255,255,.07);
    border-left:2px solid transparent;
    padding:12px 4px;font-size:.8rem;
  }
  .strecke a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.07);border-left-color:var(--gold)}
}
@media (min-width:901px){
  .nav__auf{display:contents}
}

/* ═══ HERO DER UNTERSEITEN ══════════════════════════════════════════ */
.hero{position:relative;isolation:isolate;background:var(--dark);overflow:hidden}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* ⛔ Der Schleier gilt fuer GENAU dieses Foto. Wird das Bild getauscht,
   wird er neu beurteilt — nicht mitgeschleppt. Der Kontrast fuer die
   Schrift kommt zusaetzlich aus text-shadow, damit er einen Bildwechsel
   ueberlebt. */
.hero__schleier{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,18,18,.86) 0%,rgba(18,18,18,.72) 45%,rgba(18,18,18,.9) 100%);
}
.hero__innen{
  max-width:var(--eng);margin:0 auto;
  padding:clamp(54px,9vw,96px) clamp(16px,5vw,40px);
  text-align:center;
}
.hero__kicker{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.hero__titel{
  font-size:clamp(2.1rem,6vw,3.5rem);
  color:var(--white);letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
  margin-bottom:14px;
}
.hero__titel em{font-style:normal;color:var(--gold)}
.hero__satz{
  color:rgba(255,255,255,.84);
  font-size:clamp(1rem,.5vw + .92rem,1.14rem);
  max-width:min(56ch,100%);
  margin:0 auto;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

/* ═══ AKZENTBALKEN ══════════════════════════════════════════════════ */
.akzent{height:4px;background:linear-gradient(90deg,var(--red) 0%,var(--gold) 50%,var(--red) 100%)}

/* ═══ BAENDER ═══════════════════════════════════════════════════════ */
.band{padding:clamp(48px,7vw,88px) clamp(16px,5vw,40px)}
.band--weiss{background:var(--white)}
.band--creme{background:var(--cream)}
.band--sand{background:var(--cream2)}
.band--dunkel{background:var(--dark);color:rgba(255,255,255,.82)}
.band--dunkel h2,.band--dunkel h3,.band--dunkel strong,.band--dunkel b{color:var(--white)}
.innen{max-width:var(--max);margin:0 auto}
.innen--eng{max-width:var(--eng)}

.augenbraue{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-warm);text-align:center;margin-bottom:12px;
}
.band--dunkel .augenbraue{color:var(--gold)}
.h2{font-size:clamp(1.6rem,3.6vw,2.5rem);margin-bottom:18px}
.h2 em{font-style:normal;color:var(--red)}
.band--dunkel .h2 em{color:var(--gold)}
.h3{font-size:clamp(1.2rem,2.2vw,1.55rem);margin:40px 0 16px}
.lead{
  text-align:center;color:var(--mid);
  font-size:clamp(1.04rem,.6vw + .94rem,1.2rem);
  max-width:min(64ch,100%);
  margin:0 auto 26px;
}
.band--dunkel .lead{color:rgba(255,255,255,.75)}
.fliess{max-width:min(70ch,100%);margin:0 auto 1.1em;color:var(--mid)}
.fliess strong{color:var(--dark)}
.band--dunkel .fliess{color:rgba(255,255,255,.78)}

/* ═══ KARTEN ════════════════════════════════════════════════════════
   ⛔ align-items:start — ohne das streckt eine geoeffnete Karte ihre
   Nachbarn mit, und deren Aufklapper rutscht nach unten weg
   (Fleischwolf, Runde 20). Und: minmax(0,1fr), nie 1fr — sonst wird die
   Spalte so breit wie ihr min-content und die Seite scrollt waagrecht. */
/* ⛔ Nepo, 24.09.2026: „Die Kacheln muessen alle so gross sein wie die
   laengste." Deshalb `stretch` statt `start` — und jede Kachel ist selbst
   eine Spalte, damit ihr Inhalt oben bleibt, wenn sie gestreckt wird.
   Der Aufklapper haengt bewusst NICHT per margin-top:auto am Kachelboden
   (Fleischwolf Runde 20): er gehoert direkt unter seinen Text, sonst
   wandert er weg, sobald ein Nachbar aufklappt. */
.karten{
  display:grid;gap:18px;align-items:stretch;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:8px;
}
@media (min-width:700px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Vier Karten im Dreierraster ergeben 3+1. Nepo: nie drei in einer Reihe
   und dann eine allein. `karten--paar` haelt sie bei 2+2. */
@media (min-width:1000px){.karten--paar{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ⛔ Drei Kacheln im Zweierraster ergeben 2+1 — eine steht allein in der
   zweiten Reihe. Gemessen 24.09.2026 bei 768 px. Dreiergruppen springen
   deshalb direkt von einer auf drei Spalten und ueberspringen zwei. */
/* Doppelt benannt, damit die Regel die spaeter stehende .dl-Regel
   sicher schlaegt — Spezifitaet statt Reihenfolge. */
@media (min-width:700px){
  .karten.karten--drei,.dl.dl--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.karte{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:4px;
  padding:26px 22px 20px;
  text-align:center;
  box-shadow:0 1px 3px rgba(26,26,26,.04);
}
.band--weiss .karte{background:var(--cream);border-color:var(--border2)}
.karte svg{
  width:30px;height:30px;margin:0 auto 12px;
  fill:none;stroke:var(--red);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.karte > b{
  display:block;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);margin-bottom:6px;
}
.karte > strong{
  display:block;
  font-family:var(--fh);font-size:1.28rem;font-weight:900;
  color:var(--dark);margin-bottom:9px;line-height:1.2;
}
.karte > span{display:block;color:var(--mid);font-size:.95rem;line-height:1.62}

/* ── Aufklapper „Warum" ────────────────────────────────────────────── */
.warum{margin-top:14px;text-align:left}
.warum > summary{
  list-style:none;cursor:pointer;
  display:block;text-align:center;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);
  padding:7px 0;
  border-top:1px solid var(--border2);
  transition:color .2s;
}
.warum > summary::-webkit-details-marker{display:none}
/* Das Zeichen steht HINTER dem letzten Wort, nicht am rechten Kartenrand:
   bei zweizeiligen Titeln sass es sonst allein in der Ecke. */
.warum > summary::after{content:" +";font-size:1rem}
.warum[open] > summary::after{content:" –"}
.warum > summary:hover{color:var(--red2)}
.warum > *:not(summary){
  font-size:.93rem;color:var(--mid);line-height:1.68;text-align:left;
}
.warum p:last-child{margin-bottom:0}
.warum--breit{max-width:min(70ch,100%);margin-inline:auto}

/* Kleine Schrittliste innerhalb eines Aufklappers */
.schritte{list-style:none;padding:0;margin:.4em 0 0}
.schritte li{
  margin-bottom:.8em;padding-left:14px;
  border-left:2px solid var(--gold);
}
.schritte li b{
  display:block;font-family:var(--fh);font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--dark);
}
.schritte li span{display:block;color:var(--mid);font-size:.93rem}

/* ═══ KASTEN / HINWEIS ══════════════════════════════════════════════ */
.kasten{
  background:var(--white);
  border:1px solid var(--border2);
  border-left:4px solid var(--gold);
  border-radius:4px;
  padding:20px 22px;
  margin:28px auto 0;
  max-width:var(--eng);
  color:var(--mid);
}
.band--weiss .kasten{background:var(--cream)}
.kasten strong{color:var(--dark)}
.kasten p:last-child{margin-bottom:0}
.kasten__t{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-warm);text-align:center;margin-bottom:8px;
}
.kasten--ruhig{border-left-color:var(--border2)}
.hinweis-menue{
  margin-top:12px;font-size:.87rem;color:var(--mid);
  border-top:1px dashed var(--border2);padding-top:9px;
}

/* ═══ BILDER ════════════════════════════════════════════════════════ */
figure{margin:0}
figcaption{
  text-align:center;font-size:.84rem;color:var(--mid);
  line-height:1.5;margin-top:8px;
}
figcaption em{font-style:normal;display:block;font-size:.78rem;opacity:.85}
.bildknopf{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:3px;overflow:hidden;line-height:0;
}
.bildknopf img{width:100%;height:auto;transition:transform .4s var(--ease)}
.bildknopf:hover img{transform:scale(1.02)}

/* ═══ ERKLAERFILME (v11, 25.09.2026) ═══════════════════════════════════
   Uebertragen aus dem Fleischwolf-Plugin (.film/.filmbuehne), Optik auf
   die FE-Tokens umgestellt — keine palettenfremden Farben. Ein Film steht
   jeweils oben in seinem Abschnitt, vor dem Text, mittig; `.filmbuehne`
   begrenzt die Breite auf --eng (820px), so wie dort --medienbreite (880px).
   ⛔ Handy zuerst: minmax(0,1fr) statt max-content, kein margin-top:auto —
   dieselbe Regel wie bei .karten (s.o.). Titel/Unterzeile/Avatar-Satz sind
   mittig gesetzt (Nepo-Vorgabe), nicht linksbuendig wie im Fleischwolf-Original. */
.filmbuehne{margin:0 auto 28px;width:min(var(--eng),100%)}
.film{
  display:block;width:100%;max-width:100%;
  background:var(--white);border:1px solid var(--border);border-radius:4px;
  padding:0 0 16px;margin:0;text-align:center;cursor:pointer;
  box-shadow:0 1px 3px rgba(26,26,26,.04);
  transition:border-color .2s,box-shadow .2s;
  font-family:var(--fb);color:var(--mid);
}
.film:hover,.film:focus-visible{border-color:var(--gold);box-shadow:0 2px 8px rgba(26,26,26,.08)}
.film:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ⛔ `display:block` ist Pflicht: `.film__bild` ist ein <span>, ohne Block-
   Kontext bleibt es inline und `aspect-ratio`/`inset:0` des Abspielknopfs
   greifen ins Leere (gleicher Fehler wie im Fleischwolf-Original, dort
   bereits von Nepo per Screenshot gemeldet — hier gleich richtig gesetzt). */
.film__bild{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark)}
.film__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.film:hover .film__bild img,.film:focus-visible .film__bild img{transform:scale(1.02)}
/* Abspielknopf als reines CSS-Dreieck (kein Glyph, kein SVG noetig) —
   dieselbe Technik wie im Fleischwolf-Original. */
.film__play{position:absolute;inset:0;display:grid;place-items:center}
.film__play span{
  width:52px;aspect-ratio:1;border-radius:50%;
  background:rgba(139,36,50,.92); /* var(--red) mit Alpha, Wert fest wegen rgba() */
  display:grid;place-items:center;border:2px solid var(--white);
  transition:background .2s;
}
.film:hover .film__play span,.film:focus-visible .film__play span{background:var(--red)}
.film__play span::after{
  content:"";border-left:16px solid var(--white);
  border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;
}
.film > span:last-child{display:block;padding:14px 18px 0}
/* Kontrast gegen var(--white) gemessen (25.09.2026): --dark 17.4:1,
   --mid 7.46:1 — beide klar ueber AA (4.5:1) und AAA (7:1) fuer Fliesstext.
   --dim (3.54:1) faellt fuer Fliesstext unter AA und wird hier NICHT
   verwendet, anders als --dark/--mid. */
.film__t{
  display:block;font-family:var(--fh);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:.98rem;color:var(--dark);margin-bottom:5px;line-height:1.3;
}
.film__u{display:block;color:var(--mid);font-size:.9rem;line-height:1.55;max-width:46ch;margin-inline:auto}
.film__avatar{
  display:block;margin-top:8px;font-size:.82rem;color:var(--mid);
  font-style:italic;line-height:1.55;max-width:46ch;margin-inline:auto;
}

.grossbild{max-width:760px;margin:0 auto 26px}
.bildduo{
  display:grid;gap:18px;align-items:start;
  grid-template-columns:minmax(0,1fr);
  margin:0 auto 28px;max-width:var(--max);
}
@media (min-width:700px){.bildduo{grid-template-columns:repeat(2,minmax(0,1fr))}}

.collage{
  display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:12px 0 6px;border-radius:3px;overflow:hidden;
}
.collage img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.collage__zeile{text-align:center;font-size:.82rem;color:var(--mid);margin:0}

/* ═══ STATIONEN (Der Abend) ═════════════════════════════════════════ */
.stationen{max-width:var(--eng);margin:0 auto;border-top:1px solid var(--border2)}
.station{border-bottom:1px solid var(--border2)}
.station > summary{
  list-style:none;cursor:pointer;
  display:grid;gap:4px 16px;align-items:baseline;
  grid-template-columns:minmax(0,1fr);
  padding:18px 34px 18px 0;
  position:relative;
}
.station > summary::-webkit-details-marker{display:none}
.station > summary::after{
  content:"";position:absolute;right:6px;top:24px;
  width:9px;height:9px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .25s;
}
.station[open] > summary::after{transform:rotate(-135deg)}
.station__zeit{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-warm);
}
.station__titel{
  font-family:var(--fh);font-size:clamp(1.08rem,1.8vw,1.3rem);font-weight:900;
  color:var(--dark);line-height:1.22;text-align:left;
}
.station__unter{display:block;font-size:.9rem;font-weight:400;color:var(--mid);margin-top:3px}
.station__inhalt{padding:0 0 22px;color:var(--mid)}
.station__inhalt p:last-child{margin-bottom:0}
@media (min-width:760px){
  .station > summary{grid-template-columns:150px minmax(0,1fr)}
  .station__zeit{padding-top:5px}
}

/* ═══ GEWERKE (Technik) ═════════════════════════════════════════════ */
.umschalter{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:0 auto 22px;max-width:var(--eng);
}
.umschalter button{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:11px 18px;border-radius:3px;cursor:pointer;
  border:1px solid var(--border2);background:var(--white);color:var(--mid);
  transition:background .2s,color .2s,border-color .2s;
}
.umschalter button[aria-pressed="true"]{
  background:var(--dark);color:var(--white);border-color:var(--dark);
}
.umschalter button:hover{border-color:var(--gold)}
.umschalter__erklaerung{
  text-align:center;font-size:.88rem;color:var(--mid);
  max-width:min(60ch,100%);margin:0 auto 26px;
}

.gewerke{max-width:var(--eng);margin:0 auto;border-top:1px solid var(--border2)}
.gewerk{border-bottom:1px solid var(--border2)}
.gewerk > summary{
  list-style:none;cursor:pointer;
  padding:16px 34px 16px 0;position:relative;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.gewerk > summary::-webkit-details-marker{display:none}
.gewerk > summary::after{
  content:"";position:absolute;right:6px;top:22px;
  width:9px;height:9px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .25s;
}
.gewerk[open] > summary::after{transform:rotate(-135deg)}
.wer{
  flex:0 0 auto;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;white-space:nowrap;
}
.wer--haus{background:rgba(44,85,48,.12);color:var(--green)}
.wer--kuenstler{background:rgba(139,36,50,.1);color:var(--red)}
.gewerk__t{
  font-family:var(--fh);font-size:clamp(1.02rem,1.6vw,1.2rem);font-weight:900;
  color:var(--dark);text-align:left;line-height:1.24;
}
.gewerk__u{display:block;font-size:.88rem;font-weight:400;color:var(--mid);margin-top:2px}
.gewerk__inhalt{padding:0 0 20px;color:var(--mid)}
.gewerk__inhalt ul{padding-left:1.1em}
.gewerk__inhalt li{font-size:.94rem}
.gewerk__inhalt p:last-child{margin-bottom:0}
/* Der Umschalter blendet Zeilen um, statt sie zu entfernen. */
[data-fall="haus"] .nur-ohne,[data-fall="ohne"] .nur-haus{display:none}

.fachlich{
  background:var(--cream);border:1px solid var(--border2);border-radius:3px;
  padding:14px 16px;margin:12px 0 0;font-size:.9rem;
}
.band--weiss .fachlich{background:var(--cream)}
.fachlich__t{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mid);
  margin-bottom:6px;text-align:center;
}

/* ═══ DOWNLOADS ═════════════════════════════════════════════════════ */
.dl{
  display:grid;gap:14px;align-items:stretch;
  grid-template-columns:minmax(0,1fr);
  max-width:var(--max);margin:0 auto;
}
@media (min-width:760px){.dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dl-karte{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border);border-radius:4px;
  padding:20px 20px 18px;text-align:center;color:inherit;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.band--weiss .dl-karte{background:var(--cream);border-color:var(--border2)}
a.dl-karte:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(26,26,26,.07)}
.dl-karte b{
  font-family:var(--fh);font-size:1.06rem;font-weight:900;color:var(--dark);
  margin-bottom:7px;
}
.dl-karte span{font-size:.92rem;color:var(--mid);line-height:1.6}
.dl-karte i{
  font-style:normal;margin-top:12px;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}

/* ═══ KONTAKT ═══════════════════════════════════════════════════════
   ⛔ 25.09.2026, Nepo: „Mach den Button deutlicher, er ist momentan weiss,
   da erkennt man ihn nicht so." Die Mail-Kachel ist raus (nur noch der
   Termin-Link uebrig) — deshalb kein Zweispalten-Raster mehr, das haette
   das einzelne Element halbbreit links stehen lassen. Stattdessen eine
   mittig zentrierte Handlungsflaeche in der Rot-Akzentfarbe, wie
   .knopf--rot. Weiss auf --red gemessen: 8,76:1. */
.kontakt{
  display:flex;flex-direction:column;align-items:center;
  max-width:380px;margin:0 auto;
}
.kontakt a{
  display:block;width:100%;padding:18px 24px;border-radius:4px;text-align:center;
  background:var(--red);border:1px solid var(--red);
  font-family:var(--fh);font-weight:700;color:var(--white);
  transition:background .2s,border-color .2s,transform .2s;
}
.kontakt a:hover{background:var(--red2);border-color:var(--red2);transform:translateY(-2px)}
.kontakt a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.kontakt a small{
  display:block;font-family:var(--fb);font-weight:400;font-size:.82rem;
  color:var(--white);opacity:.9;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;
}
.kontakt a span{display:block;font-size:1.05rem;letter-spacing:.02em}

/* ═══ KNOEPFE ═══════════════════════════════════════════════════════ */
.knopf{
  display:inline-block;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:14px 28px;border-radius:3px;cursor:pointer;border:0;
  transition:background .2s,transform .18s,color .2s,border-color .2s;
}
.knopf--rot{background:var(--red);color:var(--white)}
.knopf--rot:hover{background:var(--red2);transform:translateY(-2px)}
.knopf--leer{background:none;color:var(--dark);border:1px solid var(--border2)}
.band--dunkel .knopf--leer{color:var(--white);border-color:rgba(255,255,255,.3)}
.knopf--leer:hover{border-color:var(--gold);transform:translateY(-2px)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* ═══ WEITER / ZURUECK ══════════════════════════════════════════════ */
.weiter{
  display:grid;gap:12px;align-items:stretch;
  grid-template-columns:minmax(0,1fr);
  max-width:var(--eng);margin:40px auto 0;
}
@media (min-width:700px){.weiter--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.weiter a{
  display:flex;flex-direction:column;justify-content:center;
  padding:18px 20px;border-radius:4px;
  background:var(--white);border:1px solid var(--border2);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.band--weiss .weiter a{background:var(--cream)}
.weiter a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(26,26,26,.07)}
.weiter i{
  display:block;font-style:normal;
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:5px;
}
.weiter b{display:block;font-family:var(--fh);font-size:1.06rem;font-weight:900;color:var(--dark)}
.weiter--vor{text-align:right}
.weiter--vor i{text-align:right}
.abkuerzung{
  display:block;max-width:var(--eng);margin:12px auto 0;
  padding:12px 18px;border-radius:4px;text-align:center;
  border:1px dashed var(--border2);background:none;
  transition:border-color .2s}
.abkuerzung:hover{border-color:var(--gold)}
.abkuerzung i{
  display:block;font-style:normal;font-family:var(--fh);
  font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);margin-bottom:3px;
}
.abkuerzung b{font-family:var(--fh);font-size:.95rem;color:var(--red)}

/* ═══ LEUCHTKASTEN ══════════════════════════════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;flex-direction:column;
  background:rgba(12,12,12,.94);padding:clamp(12px,4vw,40px);
}
.lb.offen{display:flex}
.lb__rahmen{position:relative;max-width:min(1100px,100%);max-height:78vh;display:flex}
.lb__bild{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:3px}
/* ── Film im selben Rahmen (v11, 25.09.2026) ──────────────────────────
   Zweite Inhaltsart im Leuchtkasten, neben dem Bild. `data-modus` ist ein
   NEUES Attribut an #lb, unabhaengig von der Klasse `.offen` (die regelt
   nur auf/zu, nicht mehr). veranstalter.js setzt data-modus="video" beim
   Oeffnen eines Films und raeumt es beim Schliessen wieder ab — die
   bestehende Bild-Logik (lbAuf/lbZu, .offen) bleibt unveraendert.
   ⛔ .lb__video existiert erst, wenn die vier HTML-Seiten im Leuchtkasten
   ein <div class="lb__video">{PLAYER}</div> tragen (Markup im Bericht) —
   bis dahin ist dieser Block wirkungslos, aber harmlos. */
.lb__video{display:none;width:min(900px,100%);aspect-ratio:16/9;background:#000}
.lb__video iframe{width:100%;height:100%;border:0;display:block}
.lb[data-modus="video"] .lb__bild{display:none}
.lb[data-modus="video"] .lb__video{display:block}
/* Hochkant-Reel (data-vid-hoch am Filmknopf, aus data-hoch): schmales
   9:16-Fenster statt der 16:9-Breitwand. */
.lb[data-modus="video"][data-hoch] .lb__video{
  aspect-ratio:9/16;width:min(400px,88vw,calc((100svh - 120px) * 9 / 16));
}
.lb__zu{
  position:absolute;top:8px;right:8px;z-index:2;
  font-family:var(--fh);font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--white);
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);
  border-radius:3px;padding:8px 12px;cursor:pointer;
}
.lb__zu:hover{background:var(--red)}
/* ⛔ Fotonennung gehoert in die Vergroesserung, nicht nur unter das Bild. */
.lb__u{
  color:rgba(255,255,255,.8);text-align:center;font-size:.9rem;
  margin:16px auto 0;max-width:min(62ch,100%);
}
.lb__u em{font-style:normal;display:block;font-size:.82rem;color:var(--nebel);margin-top:3px}
/* Die Bildunterschrift gehoert nur zum Bild — im Video-Modus bleibt sie
   leer (JS raeumt sie in lbZu() ohnehin ab) und wird zusaetzlich per CSS
   verborgen, falls doch einmal Text stehen bliebe. */
.lb[data-modus="video"] .lb__u{display:none}

/* ═══ FUSS ══════════════════════════════════════════════════════════ */
/* ⛔ Nepo, 24.09.2026: „Unten hast du auf der letzten Seite den Footer
   auch nicht abgetrennt vom kurzen Weg." Der Kontaktabschnitt und die
   Fussleiste liefen ineinander. Jetzt traegt die Fussleiste eine eigene
   Goldkante — und der Abschnitt davor ist hell, nicht dunkel. */
.fuss{
  background:var(--dark);color:var(--nebel);
  padding:44px 20px 36px;text-align:center;
  border-top:3px solid var(--gold);
}
.fuss__logo img{width:58px;height:58px;border-radius:50%;margin:0 auto 14px;opacity:.9}
.fuss__gold{width:44px;height:2px;background:var(--gold);margin:0 auto 14px}
.fuss__rolle{
  font-family:var(--fh);font-size:.82rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--nebel);margin-bottom:18px;
}
.fuss__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:14px}
.fuss__links a{
  font-family:var(--fh);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:var(--nebel);transition:color .2s;
}
.fuss__links a:hover{color:var(--gold)}
.fuss__c{font-size:.82rem;color:var(--nebel)}

/* ═══ SANFTES EINBLENDEN ════════════════════════════════════════════
   ⛔ Nichts startet unsichtbar, was ohne JavaScript unsichtbar bliebe:
   `.rv` bekommt seine Transparenz erst, wenn das Skript sie setzt. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s var(--ease)}
.js .rv.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ═══ NACH OBEN ═════════════════════════════════════════════════════
   ⛔ 25.09.2026, Nepo: der Pfeil hebt sich ganz unten (über dem dunklen
   Fuss) nicht vom Hintergrund ab — dort ist die Kreisfläche (--dark)
   genauso dunkel wie der Grund dahinter. Ein Goldrahmen macht die Kante
   sichtbar: gegen --dark gemessen 8,3:1, weit über den geforderten 3:1
   für den Rand. Auf hellen Baendern traegt schon die dunkle Fuellflaeche
   genug Kontrast (14–17:1), der Rahmen ist dort nur ein zusaetzlicher
   Akzent. */
.hoch{
  position:fixed;right:18px;bottom:18px;z-index:800;
  width:44px;height:44px;border-radius:50%;
  border:2px solid var(--gold);cursor:pointer;
  background:var(--dark);color:var(--gold);font-size:1.2rem;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .2s;
}
.hoch.da{opacity:.92;pointer-events:auto}
.hoch:hover{transform:translateY(-2px);opacity:1}

/* ═══ DRUCK ═════════════════════════════════════════════════════════
   Eine Datei, nicht zwei: Die Technikseite soll sich ausdrucken und an
   den Haustechniker weiterreichen lassen. Alle Aufklapper gehen dabei
   auf, die dunklen Flaechen werden weiss. */
@media print{
  .nav,.hoch,.lb,.weiter,.abkuerzung,.umschalter,.knopfzeile,.fuss__links{display:none!important}
  html body{background:#fff;color:#000}
  body{padding-top:0;font-size:10.5pt;line-height:1.45}
  .band{padding:12pt 0;background:#fff!important;color:#000!important}
  .band--dunkel h2,.band--dunkel h3,.band--dunkel strong{color:#000!important}
  .hero{background:#fff}
  .hero__bild,.hero__schleier{display:none}
  .hero__innen{padding:0 0 8pt;text-align:left}
  .hero__titel,.hero__kicker,.hero__satz{color:#000;text-shadow:none;text-align:left}
  /* Im Druck ist das kein Kopfbild mehr, sondern eine Dokumentzeile:
     links, klein, ohne Luft. Sonst bleibt die erste Seite halb leer. */
  .hero__kicker{font-size:8pt;letter-spacing:.14em;margin-bottom:2pt}
  .hero__titel{font-size:15pt;margin-bottom:3pt;line-height:1.15}
  .hero__satz{font-size:9.5pt;max-width:none;margin:0}
  .akzent{display:none}
  .augenbraue{font-size:8pt;margin-bottom:2pt;text-align:left}
  .h2{font-size:13pt;margin-bottom:5pt;text-align:left}
  .lead,.umschalter__erklaerung{font-size:9.5pt;max-width:none;margin:0 0 8pt;text-align:left}
  .fliess{max-width:none;margin-bottom:.6em}
  .gewerk__t{font-size:11pt}
  .gewerk__u{font-size:9pt}
  .gewerk > summary{padding:8pt 0 4pt}
  .gewerk__inhalt{padding-bottom:8pt}
  .fachlich{background:#f6f3ee!important;border:.5pt solid #ccc;padding:6pt 8pt}
  .kasten{border-left:2pt solid #8b2432;background:#fff!important;padding:8pt 10pt;max-width:none}
  .innen,.innen--eng{max-width:none}
  /* Fotos raus, Skizzen bleiben: Grundriss, Monitorwege und Buehnenelemente
     sind genau das, wofuer dieses Blatt gedruckt wird. */
  .collage,.collage__zeile,.bildduo{display:none!important}
  .grossbild:not(.druckbar){display:none!important}
  .druckbar{display:block!important;max-width:95mm;margin:6pt 0;page-break-inside:avoid}
  .druckbar .bildknopf{display:block!important;cursor:default}
  .druckbar figcaption{display:block!important;text-align:left;font-size:8pt;margin-top:3pt}
  .nur-druck{display:block!important}

  details > summary{list-style:none}
  details > summary::after{display:none!important}
  /* ⛔ Kein page-break-inside:avoid auf ganze Gewerke: Ein Block, der nicht
     mehr auf die Seite passt, wandert dann komplett auf die naechste und
     laesst eine halbe Seite leer. Gemessen 21.09.2026: 8 statt 5 Seiten.
     Zusammengehalten wird nur, was klein ist. */
  .gewerk > summary,.station > summary{page-break-after:avoid;break-after:avoid}
  .fachlich,.druckbar,.warum{page-break-inside:avoid}
  .kasten{page-break-inside:avoid}
  .gewerk__inhalt,.station__inhalt,.warum > *:not(summary){display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}
.nur-druck{display:none}
/* Briefkopf der Papierfassung — siehe @media print weiter oben. */
.druckkopf{border-bottom:2pt solid #8b2432;padding-bottom:6pt;margin-bottom:12pt}
.druckkopf__marke{font-family:var(--fh);font-weight:900;font-size:18pt;letter-spacing:-.02em;margin:0 0 2pt;text-align:left}
.druckkopf__marke span{color:#8b2432}
.druckkopf__titel{font-family:var(--fh);font-weight:700;font-size:12pt;margin:0 0 4pt;text-align:left}
.druckkopf__zeile{font-size:8.5pt;line-height:1.35;color:#444;margin:0;text-align:left}
/* 24.09.2026: Kontaktzeile ohne Telefon — die Links stehen schon als Adresse da,
   die Druck-Regel haengt sonst die URL ein zweites Mal an. */
.druckkopf__zeile a{color:inherit;text-decoration:underline}
.druckkopf__zeile a::after{content:none!important}

/* ═══ RUNDE 2 · 24.09.2026 ══════════════════════════════════════════
   Nepo, 09:30: „das mit den Kacheln nach wie vor nicht geloest …
   sowohl im ausgeklappten Zustand der Unterpunkte als auch im
   eingeklappten Zustand." Drei Bausteine, alle drei noetig:
   1. grid-auto-rows:1fr — ALLE Reihen eines Rasters werden so hoch wie
      die hoechste Kachel, nicht nur die Kacheln einer Reihe. Das gilt
      auch in der Einspalten-Fassung am Handy.
   2. Die Aufklapper eines Rasters gehen gemeinsam auf und zu
      (veranstalter.js, „Warum im Gleichschritt"). Sonst streckt eine
      geoeffnete Kachel mit 1fr alle anderen auf ihre Hoehe.
   3. Jede Kachel traegt oben ein Foto im selben Format — kein Leerraum
      mehr, und die Kacheln sehen in jeder Reihe gleich aus.
   ⛔ Zusaetzlich war v02 nie bei Nepo angekommen: Das Stylesheet hing
   an ?v=1, der Browser hielt die alte Fassung. Seit Runde 2 setzt die
   PHP den Zeitstempel der Datei ein ({{VER}}). */
/* ⛔ Nepo, 25.09.2026: gleich hoch nur INNERHALB einer Reihe — „immer nur so
   lang wie das längste, wenn sie nebeneinander sind". grid-auto-rows:1fr hat
   alle Reihen auf die hoechste Kachel der ganzen Seite gezogen; am Handy (eine
   Spalte) standen dadurch lange Leerflaechen unter kurzen Kacheln. Jetzt:
   stretch gleicht die Reihe aus, auto laesst jede Reihe ihre eigene Hoehe. */
.karten,.dl{grid-auto-rows:auto}

.kartenbild{margin:-26px -22px 16px;overflow:hidden;border-radius:4px 4px 0 0}
.kartenbild .bildknopf{border-radius:0;position:relative}
.kartenbild img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.lupe-zeichen{
  position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(26,26,26,.62);display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.lupe-zeichen svg{width:16px!important;height:16px!important;margin:0!important;stroke:#fff!important;fill:none;stroke-width:2!important}
.kartenbild figcaption{margin:6px 12px 0;font-size:.74rem;line-height:1.4}
.karte--bild > svg{display:none}

/* Die Zeile unter „Von Ihnen kommen drei Dinge": genauso breit wie das
   Kachelraster darueber, mittig, ohne seitliche Goldkante — sie soll
   wie der Abschluss der drei Kacheln wirken, nicht wie ein Einschub. */
.nachsatz{
  max-width:var(--max);margin:18px auto 0;padding:16px 22px;
  border-top:2px solid var(--gold);border-bottom:1px solid var(--border2);
  text-align:center;color:var(--mid);font-size:.97rem;line-height:1.65;
}
.nachsatz p{margin:0 auto;max-width:min(78ch,100%)}
.nachsatz strong{color:var(--dark)}

/* Einzelbilder in der Kachel „Der Raum": jedes einzeln vergroesserbar. */
.collage .bildknopf{height:100%}
.collage .bildknopf img{aspect-ratio:16/9;object-fit:cover;height:100%}

/* ═══ FUENF ANGABEN ═══════════════════════════════════════════════
   Nepo: „Fuenf Angaben … koennte man auch grafisch noch schoener machen."
   Nummerierte Kacheln mit grosser Ziffer; alle gleich hoch. Fuenf ist
   ungerade: Am Rechner eine Spalte pro Angabe (fuenf nebeneinander ab
   1000 px), dazwischen eine Spalte — nie 2+2+1 oder 3+2. */
.angaben{
  list-style:none;padding:0;margin:0 auto;max-width:var(--max);
  display:grid;gap:14px;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;
  counter-reset:angabe;
}
@media (min-width:1000px){.angaben{grid-template-columns:repeat(5,minmax(0,1fr))}}
.angaben li{
  counter-increment:angabe;margin:0;
  background:var(--cream);border:1px solid var(--border2);border-top:3px solid var(--red);
  border-radius:4px;padding:18px 16px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.angaben li::before{
  content:counter(angabe);
  font-family:var(--fh);font-weight:900;font-size:1.35rem;line-height:1;
  color:var(--white);background:var(--red);
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.angaben b{
  display:block;font-family:var(--fh);font-size:.95rem;font-weight:900;
  color:var(--dark);line-height:1.25;margin-bottom:6px;
}
.angaben span{display:block;color:var(--mid);font-size:.9rem;line-height:1.55}

/* Hinweis „grobe Orientierung" auf der Technikseite und im PDF. */
.orientierung{
  max-width:var(--eng);margin:22px auto 0;padding:12px 18px;
  background:var(--white);border:1px dashed var(--gold-warm);border-radius:4px;
  text-align:center;font-size:.92rem;color:var(--mid);
}
.orientierung strong{color:var(--dark)}
.band--weiss .orientierung{background:var(--cream)}

/* GEMA-Link: klar als Verweis nach aussen erkennbar. */
.aussenlink{border-bottom:1px solid currentColor}

@media print{
  /* Nepo: „ganz am Ende hast du irgendwie so einen dunklen Footer …
     Das sieht ueberhaupt nicht schoen aus." Die Fussleiste gehoert nicht
     aufs Papier — der Briefkopf traegt den Absender. */
  .fuss,.akzent,.hoch{display:none!important}
  .kartenbild,.lupe-zeichen{display:none!important}
  /* Skizzen mittig und kleiner: vorher linksbuendig in voller Breite,
     das Blatt kam auf 7 Seiten. */
  .druckbar{max-width:78mm!important;margin:8pt auto!important}
  .druckbar figcaption{text-align:center!important}
  .innen,.innen--eng{max-width:none}
  .orientierung{display:block;max-width:none;margin:6pt 0 10pt;padding:6pt 10pt;
    border:1pt solid #b9932c;background:#fbf8f2!important;font-size:9pt;text-align:left}
  .h2{border-bottom:1pt solid #d8cfc0;padding-bottom:3pt}
  .gewerk{border-bottom:.5pt solid #d8cfc0}
  .gewerk__t{color:#1a1a1a}
  .wer{border:.5pt solid #999!important}
  .fachlich ul{margin-bottom:4pt}
  .fachlich li{margin-bottom:1.5pt}
  .druckfuss{display:block!important;margin-top:14pt;padding-top:6pt;border-top:1.5pt solid #8b2432;
    font-size:8pt;color:#555;text-align:center}
}
.druckfuss{display:none}

/* Fotonennung IM Bild statt darunter: sonst beginnen Kacheln mit und ohne
   Nennung auf unterschiedlicher Hoehe. Sie bleibt sichtbar auf der Seite
   und steht zusaetzlich in der Vergroesserung (data-foto). */
.kartenbild{position:relative}
.kartenbild figcaption{
  position:absolute;left:0;bottom:0;margin:0;padding:10px 10px 6px;
  font-size:.82rem;line-height:1.2;color:rgba(255,255,255,.88);text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
  pointer-events:none;right:44px;
}

/* Die vier Raumbilder stehen als eigene Leiste unter dem Raster — in der
   Kachel hatten sie ausgeklappt alle Kacheln auf ihre Hoehe gezogen. */
.bildleiste{
  display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:var(--max);margin:26px auto 0;
}
@media (min-width:760px){.bildleiste{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bildleiste .bildknopf img{aspect-ratio:3/2;object-fit:cover;height:auto}
.bildleiste__zeile{text-align:center;font-size:.84rem;color:var(--mid);margin:8px auto 0}
@media print{.bildleiste,.bildleiste__zeile{display:none!important}}
@media print{
  /* Gold auf Weiss ist auf Papier kaum lesbar — Akzente werden rot. */
  .hero__titel em,.h2 em{color:#8b2432!important}
  .augenbraue,.hero__kicker{color:#8b2432!important}
  /* Den Umschalter gibt es auf Papier nicht, also auch nicht seine Erklaerung.
     Stattdessen steht die gewaehlte Fassung als markierte Zeile da. */
  .umschalter__erklaerung{display:none!important}
  [data-fall-text]{border-left:2.5pt solid #8b2432;padding:3pt 0 3pt 8pt!important;color:#1a1a1a!important;font-weight:600}
}
/* Fotonennung mittig — wie jede Bildzeile auf diesen Seiten. */
.kartenbild figcaption{text-align:center;left:0;right:0;padding:12px 44px 6px}

/* ═══ RUNDE 3 · 24.09.2026, 10:17 ═══════════════════════════════════ */
/* Drei Raumbilder: einspaltig am Handy, ab 560 px drei nebeneinander —
   nie 2+1. */
.bildleiste--drei{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.bildleiste.bildleiste--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Seite 01 unten: Nepo — der Weg „der Reihe nach“ gehoert nach rechts, dort
   schaut man hin; die Abkuerzung links. Am Handy steht der Hauptweg oben. */
@media (max-width:699px){.weiter--haupt-rechts .weiter--vor{order:-1}}

/* Pfeile und Smiley als Inline-SVG (Nepo 25.09.2026: „manche Smiley riesig").
   Lato und Open Sans kennen ← → und 🙂 nicht; der Mac holt sie aus Apple
   Symbols bzw. Apple Color Emoji, die deutlich groesser laufen. */
.pf{display:inline-block;width:.95em;height:.95em;margin-left:.32em;vertical-align:-.14em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pf--l{margin-left:0;margin-right:.32em}
/* doppelt benannt: .karte svg (Kachel-Symbole, 30 px, Farbe) darf den Smiley im Text nicht treffen */
.karte svg.smiley,svg.smiley{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin:0 0 0 .1em;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.karte svg.smiley circle[r=".35"],svg.smiley circle[r=".35"]{fill:currentColor;stroke-width:1}

/* v14, 27.09.2026: Vor der Zustimmung steht im Video-Fenster Borlabs' Karte statt des
   Films — sie braucht ihre eigene Hoehe, nicht das feste 16:9 (Muster Hauptseite). */
.lb[data-modus="video"] .lb__video:has(._brlbs-content-blocker, [class*="brlbs"]){aspect-ratio:auto;height:auto;min-height:240px;width:100%;max-height:80vh;overflow:auto;background:#1a1a1a;border-radius:4px;padding-top:20px}

/* v16, 27.09.2026 — Nepo (Screenshot Handy): „im Gegensatz zur alten Seite, wo es über die ganze
   Seite lädt, ist es hier jetzt kleiner“. Maße wie der Fleischwolf-Leuchtkasten, NUR im Video-Modus
   (Bild-Modus unverändert): Rahmen so breit wie möglich (höchstens 1180 px, nie höher als der
   Bildschirm), Schließen-Knopf ÜBER dem Film statt darauf. */
.lb[data-modus="video"] .lb__rahmen{
  width:min(1180px,100%,calc((100svh - 100px) * 16 / 9));max-width:none;max-height:none;
  flex:0 0 auto;display:block;margin-top:44px}
.lb[data-modus="video"] .lb__video{width:100%}
.lb[data-modus="video"] .lb__zu{top:-44px;right:0}
.lb[data-modus="video"][data-hoch] .lb__rahmen{width:min(400px,88vw,calc((100svh - 120px) * 9 / 16))}
.lb[data-modus="video"][data-hoch] .lb__video{width:100%}