/* Farbfolge der Bloecke (Desktop: kein Block hat dieselbe Farbe wie sein Nachbar darueber/darunter):
   Kopf A | Hero A | Info H | Foto B | Line-Up D | Kacheln (Logofarben) | Flyer D | Newsletter H + Wikipedia A | Termine B |
   Adresse A + Anfahrt H | Gut zu wissen D | Fuss A   (A Akzent, D abgedunkelt, H hell, B blass) */
/* ENTWURF B - "Bauhaus-Kacheln": eigenstaendiges Design, unabhaengig von static/website/css/home.css.
   Formensprache: Block-Raster aus Rechtecken (keine abgerundeten Kaesten), der Kreis als einziges
   Rund-Element (Logo-Kreise, Countdown, Datums-Kreise, Stempel), duenne Ringlinie als Kontur,
   dazu das eigene Zeichen "Logo-Eisbaer im Kreis". Farben: nur Akzent + Abstufungen davon +
   Tinte/Weiss. Schrift: Montserrat (SIL OFL, selbst gehostet), ICEBERG-Schriftzug in Nivea Bold.
   Anregung: Blockraster mit Kreisen (CSS Zen Garden 221) - kein Code, keine Grafik daraus uebernommen.
   Flaechenrollen (Seitenfarbe und Akzentfarbe getauscht, 2026-10-07): Seite, Kopf, Hero, Flyer-Streifen, Wikipedia-Kachel,
   Adresse, Fuss und "vorbei"-Kreise = Akzentfarbe; Line-Up-Kopf, "Gut zu wissen", Marke, Zeichen-Kreis, Knoepfe und
   aktueller Termin = abgedunkelte Akzentfarbe (--a-dunkel, wie bei der Anfahrt). */
/* Nivea Bold: nur fuer den ICEBERG-Schriftzug (verbindlich, wie auf der Hauptseite) - Base-Latein, woff2 */
@font-face {
  font-family: 'Nivea'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/static/website-b/fonts/Nivea-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/static/website-b/fonts/Montserrat-latin.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;
}
@font-face {
  font-family: 'Montserrat'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/static/website-b/fonts/Montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Echte Kursive (Montserrat Italic, wght 300-800) statt der vom Browser schraeggestellten Ersatzschrift - fuer Motto, Anfahrt-Hinweise usw. */
@font-face {
  font-family: 'Montserrat'; font-weight: 300 800; font-style: italic; font-display: swap;
  src: url('/static/website-b/fonts/Montserrat-Italic-latin.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;
}
@font-face {
  font-family: 'Montserrat'; font-weight: 300 800; font-style: italic; font-display: swap;
  src: url('/static/website-b/fonts/Montserrat-Italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* --akzent kommt je Termin inline aus dem Template (events.akzentfarbe) */
  --a-dunkel: color-mix(in srgb, var(--akzent) 58%, #000);
  --a-hell: color-mix(in srgb, var(--akzent) 42%, #fff);
  --a-blass: color-mix(in srgb, var(--akzent) 13%, #fff);
  --tinte: #17171a;
  --weiss: #fff;
  --schrift: 'Montserrat', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --breit: 1440px;
  --rand: clamp(16px, 4.5vw, 48px);      /* Innenabstand der Bloecke */
  --ring: 2px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.b {
  margin: 0; background: var(--akzent); color: var(--tinte);
  font-family: var(--schrift); font-weight: 400; font-size: 1.0625rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main, .b-kopf, .b-fuss { max-width: var(--breit); margin-left: auto; margin-right: auto; }
main { background: var(--a-dunkel); }
img { max-width: 100%; }
a { color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; }

/* Ueberschriften: Punkt (Kreis) davor ist das Erkennungszeichen jedes Blocks */
h2 { font-weight: 800; font-size: clamp(1.5rem, 4.6vw, 2.2rem); line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: .55em; }
h2::before { content: ""; flex: none; width: .62em; height: .62em; border-radius: 50%; background: currentColor; }
.b-kopfzeile { padding: calc(var(--rand) * 1.1) var(--rand) calc(var(--rand) * .7); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; }
/* Kopfzeilen mit Zusatz ("Line-Up | Oktober-ICEBERG", "Gut zu wissen | FAQ"): der Zusatz steht direkt neben der Ueberschrift, groesser und durch einen
   senkrechten Strich abgesetzt. Ohne Script: Line-Up schaltet unter 480 px auf die schmale Darstellung (rechtsbuendig, klein); "FAQ" liegt in einer Zeile
   fester Hoehe (.b-kz-eine) - bricht es um, wird es abgeschnitten, also ausgeblendet. */
.b-kopfzeile-nah { justify-content: flex-start; align-items: center; column-gap: 1.6rem; }
.b-kopfzeile.b-kopfzeile-nah p { font-size: clamp(.95rem, 3vw, 1.35rem); font-weight: 700; padding-left: 1.6rem; border-left: 2px solid color-mix(in srgb, currentColor 55%, transparent); line-height: 1.6; }
.b-kopfzeile.b-kopfzeile-nah p.b-faq-hinweis { font-size: clamp(.85rem, 2.6vw, 1.15rem); }   /* FAQ-Hinweis: etwas kleiner als der Line-Up-Zusatz */
.b-kopfzeile-nah > .b-kz-eine { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.6rem; height: calc(clamp(1.5rem, 4.6vw, 2.2rem) * 1.05); overflow: hidden; }
@media (max-width: 479px) {
  #lineup .b-kopfzeile.b-kopfzeile-nah { justify-content: space-between; align-items: baseline; column-gap: 1.5rem; }
  #lineup .b-kopfzeile.b-kopfzeile-nah p { font-size: .85rem; font-weight: 600; padding-left: 0; border-left: 0; line-height: normal; }
}
.b-kopfzeile p { margin: 0; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; }

/* --- Kopf: Marke links (Tinte), Countdown als drei Kreise rechts auf Akzentflaeche --- */
.b-kopf { display: grid; grid-template-columns: auto 1fr; align-items: stretch; background: var(--akzent); color: var(--weiss); }
.b-marke {
  background: var(--a-dunkel); color: var(--weiss); text-decoration: none; padding: 0 calc(var(--rand) * .9) 0 var(--rand);
  display: flex; align-items: center; min-height: clamp(60px, 19vw, 76px);
}
/* Schriftzug in Nivea Bold; Nivea hat unter der Grundlinie viel Leerraum, darum optisch .115em tiefer (wie auf der Hauptseite).
   Groesse und Countdown-Kreise wachsen/schrumpfen mit der Breite, damit die Kopfzeile auch bei 280-330 px nicht ueberlaeuft. */
.b-marke span { font-family: 'Nivea', var(--schrift); font-weight: 700; letter-spacing: .02em; font-size: clamp(1.15rem, 7.2vw, 2.5rem); line-height: 1; position: relative; top: .115em; white-space: nowrap; }
.b-cd { display: flex; justify-content: flex-end; align-items: center; gap: clamp(3px, 1.5vw, 14px); padding: 10px var(--rand); min-width: 0; }
.b-cd-kreis {
  width: clamp(40px, 14.5vw, 66px); aspect-ratio: 1; border-radius: 50%; border: var(--ring) solid var(--weiss); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.b-cd-kreis b { font-weight: 800; font-size: clamp(1rem, 4.4vw, 1.5rem); font-variant-numeric: tabular-nums; }
.b-cd-kreis small { font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; opacity: .85; }
@media (min-width: 820px) { .b-cd-kreis small { font-size: .7rem; letter-spacing: .1em; margin-top: 4px; } }
.b-laeuft { margin: 0; align-self: center; justify-self: end; padding: 0 var(--rand); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.b-laeuft { text-align: right; line-height: 1.2; }
.b-laeuft.b-danke { font-size: clamp(.8rem, 3.8vw, 1.0625rem); }   /* "Danke fuer die Nacht!" ist laenger als "laeuft gerade!": darf auf schmalen Handys umbrechen */

/* --- Hero: grosses Datum auf Akzentflaeche, Zeichen (Eisbaer im Kreis) rechts, Info-Leiste in heller Akzentflaeche --- */
.b-hero { position: relative; background: var(--akzent); color: var(--weiss); overflow: hidden; container-type: inline-size; }
/* --fs: Schriftgroesse des Datums - "30.10." (3,04 em breit, gemessen) fuellt die Breite zwischen den Raendern, hoechstens 22 % der
   Fensterhoehe bzw. 12,5 rem (am Desktop sonst zu maechtig); "Fr" bricht davor auf die erste Zeile um. Das Zeichen rechts ist so hoch wie diese erste Zeile und endet damit,
   wo die zweite beginnt (kein Ueberlappen mit "10."). */
/* Hero-Geometrie OHNE Script. Variablen auf .b-hero (Container: 100cqw = Breite), drei Layouts:
   A) hochkant unter 820 px: Wochentag steht ueber dem Datum (zwei Zeilen, --zeilen: 2), "30.10." fuellt die Breite;
   C) quer unter 820 px (Seitenverhaeltnis ab 1:1, z.B. Handy quer): ganze Zeile "Fr 30.10." einzeilig, Schrift hoechstens 22 vh;
   B) ab 820 px: einzeilig, rechts bleiben mindestens 27 % der Breite fuer den Eisbaeren frei ("Fr 30.10." ist 4,24 em breit), weniger Luft ueber/unter.
   --fk/--fk-b (Datumsfaktor) und --w1m/--w1b (Breite der ersten Zeile in em, mobil/ganz) stehen fest im HTML (vom Server mit HarfBuzz gemessen). */
.b-hero {
  --zeilen: 2; --fkx: var(--fk, 1); --w1: var(--w1m, 1.02); --kuerzer: 0px; --runter: 0px;
  --fs: min(calc((100cqw - 2 * var(--rand)) / 2.77), 22vh, 12.5rem);
  --pad-oben: min(7cqw, 7vh); --pad-unten: min(5cqw, 6vh); --hextra: -14px;
}
@media (max-width: 819px) and (min-aspect-ratio: 1/1) {
  .b-hero {
    --zeilen: 1; --fkx: 1; --w1: var(--w1b, 4.3); --hextra: calc(var(--pad-unten) - 16px);
    --fs: min(calc((100cqw - 2 * var(--rand)) / 2.77), calc((100cqw - 2 * var(--rand)) / var(--w1b, 4.3)), 22vh, 12.5rem);
  }
}
@media (min-width: 820px) {
  .b-hero {
    --zeilen: 1; --fkx: var(--fk-b, 1); --w1: var(--w1b, 4.3); --kuerzer: 8px; --runter: 4px;
    --fs: min(calc((100cqw - 2 * var(--rand) - 27cqw) / 4.07), 22vh, 12.5rem);
    --pad-oben: min(3.2cqw, 3.5vh); --pad-unten: min(2.4cqw, 2.8vh); --hextra: calc(var(--pad-unten) - 16px);
  }
}
/* Datumsfaktor (--fkx aus --fk/--fk-b, beim Erzeugen der Seite berechnet, webapp._datum_faktoren): breitere Daten als "Fr 30.10." werden verkleinert */
.b-datum {
  position: relative; z-index: 1; margin: 0; font-weight: 800; letter-spacing: -.025em; line-height: .88;
  font-size: calc(var(--fs) * var(--fkx)); padding: var(--pad-oben) var(--rand) var(--pad-unten);  
  margin-left: -.03em;   /* Tinte von F/3 etwa buendig mit dem Seitenrand (Montserrat-Vorsprung F ca. .04 em, 3 ca. .01 em) */
}
.b-wt { display: block; }   /* hochkant: Wochentag eigene Zeile */
@media (min-width: 820px), (min-aspect-ratio: 1/1) { .b-datum { white-space: nowrap; word-spacing: -.075em; } .b-wt { display: inline; } }   /* einzeilig; enges Leerzeichen zwischen Wochentag und Datum wie am Flyer (Laufweite -100 statt -25) */
.b-info {
  position: relative; z-index: 1; list-style: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 0;
  padding: 1rem var(--rand); background: var(--a-hell); color: var(--tinte);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: clamp(.82rem, 2.9vw, 1rem);
}
.b-info li { display: flex; align-items: center; white-space: nowrap; }
.b-info li + li:not(.b-alter)::before { content: "\00b7"; font-weight: 800; margin: 0 1.3em; flex: none; }
.b-info .b-alter { margin-left: auto; padding-left: .6rem; }
.b-info .b-alter::before { display: none; }
.b-info .b-alter { border: var(--ring) solid var(--tinte); border-radius: 50%; width: 2.7em; height: 2.7em; justify-content: center; padding: 0; margin-left: auto; letter-spacing: 0; }
/* Optionaler Text ("im Monat", "Abendkasse:") nur wenn die ganze Zeile in eine Reihe passt */
.b-info .b-opt { display: none; }
/* Breit (ab 620 px): eine Zeile, Schrift waechst mit dem Fenster (ohne Zusatztexte hoechstens 1,15 rem, mit Zusatztexten ab 1000 px hoechstens 1,4 rem);
   die Teiler 42,5 und 55 entsprechen der natuerlichen Textbreite plus 18+-Kreis. */
@media (min-width: 620px) {
  .b-info { flex-wrap: nowrap; font-size: min(1.15rem, calc((100vw - 2 * var(--rand)) / 42.5)); }
  .b-info .b-alter { margin-left: auto; padding-left: 0; }
  .b-info li:nth-last-child(2) { margin-right: 1.2em; }
}
@media (min-width: 1000px) {
  .b-info { font-size: min(1.4rem, calc((100vw - 2 * var(--rand)) / 55)); }
  .b-info .b-opt { display: inline; }
}
/* Schmal (unter 620 px): "Letzter Freitag" entfaellt, der Rest (Preis, Cash Only, Uhrzeit) steht mit 18+ in einer Zeile; die Schrift richtet sich nach der Breite
   (Teiler 25 = natuerliche Textbreite in em plus 18+-Kreis), hoechstens 1,05 rem. */
@media (max-width: 619px) {
  .b-info { flex-wrap: nowrap; font-size: min(1.05rem, calc((100vw - 2 * var(--rand)) / 25)); }
  .b-info li:first-child { display: none; }
  .b-info li:nth-child(2)::before { display: none; }
  .b-info li + li:not(.b-alter)::before { margin: 0 .8em; }
  .b-info li:nth-last-child(2) { margin-right: .8em; }
  .b-info .b-alter { margin-left: auto; padding-left: 0; }
}
@media (max-width: 339px) { .b-info { font-size: .72rem; letter-spacing: .05em; } .b-info li + li::before { margin: 0 .6em; } }   /* besonders schmale Handys: Infozeile etwas kleiner, damit 18+ nicht an den Text stoesst */
/* Kartenverlosung (Gazzette): schmales Band unter der Infoleiste, nur kurz vor dem Termin sichtbar; ohne Band schliessen die Bloecke luckenlos aneinander */
.b-verlosung { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: clamp(1.1rem, 4.5vw, 1.8rem) var(--rand); background: var(--tinte); color: var(--weiss); text-decoration: none; }
.b-verlosung[hidden] { display: none; }
.b-verlosung-text { display: flex; flex-direction: column; gap: .35rem; }
.b-verlosung strong { font-weight: 800; font-size: clamp(1.4rem, 7.4vw, 2.3rem); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; }
/* Logo so hoch wie die Grossbuchstaben von "Jetzt mitmachen auf" (Montserrat-Versalhoehe .7 em), moeglichst in derselben Zeile (bricht bei Platzmangel um) */
.b-verlosung-text .b-verlosung-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5em; letter-spacing: .05em; }
.b-verlosung .gazzette-logo { display: block; height: .7em; width: auto; flex: none; }
.b-verlosung-text span { font-weight: 700; font-size: clamp(.8rem, 3.2vw, 1.05rem); letter-spacing: .07em; text-transform: uppercase; }
.b-verlosung .b-pfeil { flex: none; width: clamp(3rem, 12vw, 4rem); height: clamp(3rem, 12vw, 4rem); font-size: clamp(1.5rem, 6vw, 2rem); box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: b-verlosung-puls 2.4s ease-out infinite; }   /* flex: none - sonst wird der Kreis bei langem Text zum Oval gedrueckt */
@keyframes b-verlosung-puls { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .b-verlosung .b-pfeil { animation: none; } }
.b-verlosung:hover .b-pfeil, .b-verlosung:focus-visible .b-pfeil { background: var(--a-hell); animation: none; }
/* Zeichen: Logo-Eisbaer auf der Scholle, mittig in einem Kreis in Tinte (Schwarz) */
.b-zeichen { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; background: var(--a-dunkel); }
.b-zeichen-baer { position: absolute; left: 18%; top: 50%; width: 64%; height: 0; padding-top: 50.5%; margin-top: -25.25%; overflow: hidden; }
.b-zeichen-baer img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; }
/* Hero-Zeichen: Eisbaer (Buchstaben abgeschnitten) so gross wie moeglich, rechtsbuendig am Seitenrand, so hoch wie die erste Zeile des Datums (hochkant: bis knapp ueber
   die zweite Zeile) und hoechstens so breit wie der freie Platz rechts vom Text (--w1 = Breite der ersten Zeile in em, vom Server gemessen). Der Kreis dahinter
   fuellt am rechten Rand die ganze Flaeche zwischen Kopfzeile und Info-Leiste (gerade Kanten oben/unten/rechts, nur links bleibt die Rundung); er darf oben/rechts
   abgeschnitten werden - der Baer selbst nie. Alles per CSS berechnet (frueher Script); 7 px Luft = 14 px zu Text/Leiste, 40 px Mindesthoehe. */
.b-hero-zeichen {
  --fse: calc(var(--fs) * var(--fkx));
  --hmax: calc(var(--pad-oben) + var(--fse) * .88 + var(--hextra));
  --bmax: calc(100cqw - 2 * var(--rand) + var(--fse) * (.03 - var(--w1)) - 14px);
  --h: max(40px, calc(min(var(--hmax), var(--bmax) * 340 / 431) - var(--kuerzer)));
  position: absolute; z-index: 0; right: var(--rand); top: calc(6px + var(--runter)); height: var(--h); width: calc(var(--h) * 431 / 340);
}
.b-hero-zeichen::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--a-dunkel); transform: translate(-50%, -50%);
}
@supports (width: hypot(1px, 1px)) {
  .b-hero-zeichen::before {
    --bwalt: calc((var(--h) + var(--kuerzer)) * 431 / 340);
    --flaeche: calc(var(--pad-oben) + var(--fse) * .88 * var(--zeilen) + var(--pad-unten));
    left: calc(var(--h) * 431 / 340 - var(--bwalt) / 2);
    top: calc(var(--flaeche) / 2 - 6px - var(--runter));
    width: calc(2 * (hypot(var(--rand) + var(--bwalt) / 2, var(--flaeche) / 2) + 3px));
  }
}
.b-hero-baer { position: absolute; inset: 0; overflow: hidden; line-height: 0; }
.b-hero-baer img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; }

/* --- Knoepfe: Rechteck mit Kreis-Pfeil, keine Rundung der Flaeche --- */
.b-knopf {
  display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; background: var(--a-dunkel); color: var(--weiss);
  padding: .55rem .6rem .55rem 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .88rem;
}
.b-knopf i { font-style: normal; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--weiss); color: var(--tinte); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; }
.b-knopf:hover i, .b-knopf:focus-visible i { background: var(--a-hell); }
.b-knopf-hell { background: var(--weiss); color: var(--tinte); }
.b-knopf-hell i { background: var(--a-dunkel); color: var(--weiss); }
.b-knopf-hell:hover i { background: var(--akzent); }

/* --- Foto des Monats: Bild + Stempel (Kreis) | Text auf Papier --- */
.b-foto { display: grid; grid-template-columns: 1fr; background: var(--a-blass); }
.b-foto-bild { position: relative; margin: 0; }
.b-foto-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.b-stempel {
  position: absolute; right: var(--rand); bottom: calc(clamp(60px, 18vw, 92px) / -2); width: clamp(60px, 18vw, 92px); aspect-ratio: 1;
  border-radius: 50%; background: var(--akzent); color: var(--weiss); display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: clamp(.58rem, 2vw, .78rem); letter-spacing: .12em; line-height: 1.15; text-transform: uppercase;
  border: 3px solid var(--a-blass);
}
.b-foto-text { padding: calc(clamp(60px, 18vw, 92px) / 2 + 1.2rem) var(--rand) calc(var(--rand) * 1.1); display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.b-foto-text .b-knopf { background: var(--akzent); color: var(--weiss); }
.b-foto-text p { margin: 0; max-width: 34rem; font-size: 1.1rem; }
.b-betont { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .2em; }
@media (min-width: 820px) {
  .b-foto { grid-template-columns: 3fr 2fr; align-items: stretch; }
  .b-foto-bild img { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .b-stempel { right: calc(clamp(60px, 18vw, 92px) / -2); bottom: auto; top: var(--rand); }
  .b-foto-text { justify-content: center; padding: var(--rand) var(--rand) var(--rand) calc(clamp(60px, 18vw, 92px) / 2 + 1.4rem); }
}

/* --- Line-Up: Kacheln im Raster in den Farben der Floor-Logos, in jeder ein weisser Kreis mit dem Logo; Schrift immer weiss --- */
.b-lineup { color: var(--weiss); }
.b-floors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-floor {
  padding: clamp(18px, 4vw, 34px) clamp(12px, 3vw, 26px) clamp(22px, 4vw, 38px); text-align: center;
  background: var(--kachel, var(--a-dunkel)); color: var(--kachel-text, var(--weiss));
  --leise: color-mix(in srgb, var(--kachel-text, #fff) 74%, transparent);
}
/* Floors ohne eigene Logofarbe (kommen im Template mit --kachel/--kachel-text): Wechsel aus Tinte, hellem Akzent, Akzent */
.b-floor:nth-child(4n+2):not([style]) { --kachel: var(--a-dunkel); }
.b-floor:nth-child(4n+3):not([style]) { --kachel: var(--a-dunkel); }
.b-floor:nth-child(4n+4):not([style]) { --kachel: var(--akzent); }
.b-floors > .b-floor:last-child:nth-child(odd) { grid-column: 1 / -1; }
.b-floor-kreis {
  /* kein Kreis mehr: das Logo steht frei auf der Kachel und fuellt deren Breite; feste Hoehe, damit die Ueberschriften der Kacheln auf einer Linie bleiben */
  width: 100%; height: clamp(70px, 14vw, 112px); margin: 0 auto clamp(8px, 2vw, 12px);
  display: grid; place-items: center;
}
.b-floor-kreis img { display: block; max-width: 76%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  /* weisse Kontur um das Logo (4 Schatten ohne Weichzeichnung, nacheinander angewendet) */
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.b-floor-kreis span { color: var(--weiss); font-weight: 800; text-transform: uppercase; line-height: 1.05; text-align: center; font-size: 1.05rem; letter-spacing: .04em; }
@media (max-width: 339px) {   /* besonders schmale Handys: Line-Up einspaltig, Logos ohne feste Hoehe */
  .b-floors { grid-template-columns: 1fr; }
  .b-floor-kreis { height: auto; }
  .b-floor-kreis img { max-width: 68%; }
}
.b-floor h3 { margin: 0; font-weight: 700; font-size: clamp(.8rem, 3.6vw, 1.2rem); line-height: 1.2; letter-spacing: -.025em; }   /* Laufweite -25 wie am Flyer (webapp._LINEUP_LS, in die Messung der Musikrichtung eingerechnet) */
.b-raum { margin: .15rem 0 0; color: var(--leise); font-weight: 600; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
.b-motto { margin: .8rem 0 0; font-style: italic; color: var(--leise); line-height: 1.3; white-space: pre-line; }
.b-djs { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 18px; font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.02rem, 3.2vw, 1.25rem); line-height: 1.15; }
.b-motto-grafik { margin: .9rem 0 0; }
.b-motto-grafik img, .b-djs-grafik img { display: block; height: auto; margin: 0 auto; }
.b-grafik-link { display: block; margin: 0 auto; }
.b-grafik-link img { display: block; width: 100%; height: auto; }
.b-grafik-link:hover, .b-grafik-link:focus-visible { opacity: .85; }
.b-grafik-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.b-djs small { display: block; font-weight: 500; font-size: .78em; color: var(--leise); margin-top: .1rem; }
/* Line-Up-Schriftgroessen OHNE Script. --w-max = Breite der laengsten Musikrichtung in em (steht fest im HTML, vom Server mit HarfBuzz gemessen, Standard 11,4),
   .b-floor ist ein Container: 100cqw = Breite des Spalteninhalts. --lu = Schriftgroesse der Musikrichtung:
   - Desktop (4 Spalten) und sehr schmale Handys (1 Spalte): die laengste Musikrichtung ist mindestens so breit wie das Logo (76 % bzw. 68 % der Spaltenbreite),
     aufgerundet auf volle px;
   - zwei Spalten (340-899 px): die laengste Musikrichtung fuellt die Spaltenbreite (abgerundet, hoechstens 21 px).
   Browser ohne round(): ungerundeter Wert (s. @supports unten). DJ-, Club- und Raumgroessen folgen aus --lu. */
.b-floor { container-type: inline-size; }
.b-floors { --w-max: 11.4; --lu: calc(76cqw / var(--w-max)); }
.b-floors h3 { font-size: max(var(--lu), 15px); }
.b-floors .b-djs { font-size: max(calc(var(--lu) + 5px), 19px); }
.b-floors .b-djs small { font-size: calc(1em - 4px); }
.b-floors .b-raum { font-size: max(calc(var(--lu) * .75), .88rem); }
@media (min-width: 340px) and (max-width: 899px) {
  .b-floors { --lu: min(21px, calc(99.9cqw / var(--w-max))); }
  .b-floors h3 { font-size: var(--lu); }
  .b-floors .b-djs { font-size: max(calc(var(--lu) + 4px), clamp(1.1rem, 3.4vw, 1.375rem)); }
  .b-floors .b-raum { font-size: .88rem; }
}
@media (max-width: 339px) {
  .b-floors { --lu: calc(68cqw / var(--w-max)); }
}
/* auf volle px runden (round() gibt es in allen aktuellen Browsern; ohne gilt der ungerundete Wert) */
@supports (width: round(up, 10.5px, 1px)) {
  .b-floors { --lu: round(up, calc(76cqw / var(--w-max)), 1px); }
  @media (min-width: 340px) and (max-width: 899px) { .b-floors { --lu: min(21px, round(down, calc(99.9cqw / var(--w-max)), 1px)); } }
  @media (max-width: 339px) { .b-floors { --lu: round(up, calc(68cqw / var(--w-max)), 1px); } }
}
@media (min-width: 900px) { .b-floors { grid-template-columns: repeat(4, minmax(0, 1fr)); } .b-floors > .b-floor:last-child:nth-child(odd) { grid-column: auto; } }
.b-leer { margin: 0; padding: 0 var(--rand) var(--rand); font-style: italic; }

/* Flyer-Streifen unter den Kacheln */
.b-flyer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem clamp(14px, 3vw, 28px); padding: 1rem var(--rand); background: var(--a-dunkel); color: var(--weiss); text-decoration: none; }
.b-flyer-bilder { display: flex; gap: 8px; }
.b-flyer-bilder img { display: block; width: clamp(64px, 16vw, 120px); height: auto; border: var(--ring) solid var(--weiss); }
.b-flyer-text { font-weight: 800; font-size: clamp(1rem, 3.4vw, 1.4rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; }
.b-pfeil { font-style: normal; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--weiss); color: var(--tinte); display: grid; place-items: center; font-size: 1.3rem; }
.b-flyer:hover .b-pfeil { background: var(--a-hell); }

/* --- Newsletter | Wikipedia: zwei Kacheln --- */
.b-duo { display: grid; grid-template-columns: 1fr; }
.b-duo-kachel { padding: calc(var(--rand) * 1.1) var(--rand) calc(var(--rand) * 1.2); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.b-duo-kachel p { margin: 0; max-width: 24rem; font-size: 1.1rem; }
.b-news { background: var(--a-hell); color: var(--tinte); }
.b-news .b-knopf { background: var(--a-dunkel); color: var(--weiss); }
.b-news .b-knopf i { background: var(--weiss); color: var(--tinte); }
.b-wiki { background: var(--akzent); color: var(--weiss); }
.b-wiki .b-knopf { background: var(--weiss); color: var(--tinte); }
.b-wiki .b-knopf i { background: var(--a-dunkel); color: var(--weiss); }
.b-duo-kachel .b-knopf { margin-top: auto; }
/* Mosaik: Flyer & Plakat links (ueber beide Zeilen), Newsletter und Wikipedia rechts uebereinander; schmal alles untereinander
   (dort bleibt der Flyer ein flacher Streifen) */
@media (min-width: 700px) { .b-duo { grid-template-columns: 1fr 1fr; } }
/* Flyer-Collage: auf Handy und Desktop gleich (Bilder gross und ueberlappend, darunter Text + Pfeil) */
.b-mosaik.mit-flyer .b-flyer {
  grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; align-items: end;
  gap: 1.3rem 1rem; padding: calc(var(--rand) * 1.1) var(--rand);
}
/* Collage wie auf der bisherigen Seite: Vorderseite links unten (leicht nach links gekippt), Rueckseite rechts oben (nach rechts),
   ueberlappend mit feiner Kontur und Schatten; Klappflyer (quer + hoch) und reines Plakat haben eigene Anordnungen */
.b-mosaik.mit-flyer .b-flyer-bilder { grid-column: 1 / -1; position: relative; display: block; width: min(80%, 22rem); aspect-ratio: 1.45; }   /* schmal: nicht die ganze Breite */
.b-mosaik.mit-flyer .b-flyer-bilder img {
  position: absolute; width: 74%; height: auto; border: 1px solid rgba(255,255,255,.65); box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.b-mosaik.mit-flyer .b-flyer-bilder img:nth-child(1) { left: 0; bottom: 0; transform: rotate(-3deg); z-index: 2; }
.b-mosaik.mit-flyer .b-flyer-bilder img:nth-child(2) { right: 0; top: 0; transform: rotate(3deg); }
.b-mosaik.mit-flyer .b-flyer-bilder img:only-child { left: 13%; right: auto; top: 8%; bottom: auto; transform: rotate(-2deg); }
.b-mosaik.mit-flyer .b-flyer-bilder.quer-hoch { aspect-ratio: 1.12; }
.b-mosaik.mit-flyer .b-flyer-bilder.quer-hoch img:nth-child(1) { width: 68%; top: 50%; bottom: auto; transform: translateY(-50%) rotate(-3deg); }
.b-mosaik.mit-flyer .b-flyer-bilder.quer-hoch img:nth-child(2) { height: 100%; width: auto; }
.b-mosaik.mit-flyer .b-flyer-bilder.nur-plakat img { height: 100%; width: auto; left: 50%; right: auto; top: 0; bottom: auto; transform: translateX(-50%) rotate(-2deg); }
.b-mosaik.mit-flyer .b-flyer-text { font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
@media (min-width: 820px) {
  .b-mosaik.mit-flyer { display: grid; grid-template-columns: 1fr 1fr; }
  .b-mosaik.mit-flyer .b-duo { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .b-mosaik.mit-flyer .b-flyer-bilder { width: 100%; }
}

/* --- Termine: jeder Termin ein Kreis (Monat oben, Tag gross, Jahr unten) --- */
.b-termine { background: var(--a-blass); color: var(--tinte); padding-bottom: calc(var(--rand) * 1.2); }
.kb-saisonen { display: grid; overflow: hidden; padding: 0 var(--rand); }
.kb-saison-block { grid-area: 1 / 1; transition: transform .35s ease, opacity .35s ease; }
.kb-von-rechts, .kb-nach-rechts.kb-aktiv { transform: translateX(100%); opacity: 0; }
.kb-von-links, .kb-nach-links.kb-aktiv { transform: translateX(-100%); opacity: 0; }
.kb-von-rechts.kb-aktiv, .kb-von-links.kb-aktiv { transform: translateX(0); opacity: 1; }
.kb-saison { margin: 0 0 1.3rem; font-weight: 600; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; display: block; }
.kb-saison::before { content: none; }
.kalenderblaetter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 22px); }
@media (min-width: 520px) { .kalenderblaetter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 800px) { .kalenderblaetter { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kalenderblatt {
  aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  text-decoration: none; text-transform: uppercase; line-height: 1; text-align: center;
  border: var(--ring) solid var(--tinte); background: transparent; color: var(--tinte);
  container-type: inline-size; font-weight: 800;
}
.kb-oben { display: block; font-size: 15cqw; letter-spacing: .16em; text-indent: .16em; font-weight: 800; }
.kb-mitte { display: block; font-size: 38cqw; letter-spacing: -.02em; margin: 3cqw 0 2cqw; }
.kb-wochentag { display: block; font-size: 10.5cqw; letter-spacing: .14em; font-weight: 600; text-indent: .14em; margin-bottom: 2cqw; opacity: .7; }   /* gleiche Farbe wie die Jahreszahl (.kb-unten) */
.kb-unten { display: block; font-size: 10.5cqw; letter-spacing: .14em; text-indent: .14em; font-weight: 600; opacity: .7; }
.kb-mitte svg { width: 38cqw; height: 38cqw; fill: currentColor; display: block; margin: 2cqw auto; }
/* Echte Termine: Reihenfolge Jahr, Monat, Tag, Wochentag (Jahr und Wochentag getauscht). .kb-mitte loest sich auf, damit sich
   Wochentag und Zahl neben Monat und Jahr einordnen lassen; Pause-Kreise behalten ihren Aufbau (Monat, Zeichen, Jahr) */
.kalenderblatt:not(.pause) .kb-mitte { display: contents; }
.kalenderblatt:not(.pause) .kb-unten { order: -2; margin: 0 0 4cqw; }   /* Jahr oben */
.kalenderblatt:not(.pause) .kb-oben { order: -1; font-size: 24cqw; line-height: .78; font-weight: 800; letter-spacing: -.02em; text-indent: 0; margin-bottom: 2.8cqw; position: relative; top: -1cqw; }   /* Monat so eng und fett wie die Zahl darunter */
.kalenderblatt:not(.pause) .kb-tag { order: 0; display: block; font-size: 38cqw; line-height: .78; letter-spacing: -.02em; margin: 0; position: relative; top: -1cqw; }   /* Monat und Tag ein Stueck Richtung Jahreszahl (Bogen oben) gerueckt */
.kalenderblatt:not(.pause) .kb-wochentag { order: 1; margin: 0; }   /* Wochentag unten */
/* Wochentag ausgeschrieben und GEBOGEN am unteren Kreisrand (SVG-Textpfad #kb-bogenpfad, einmal im Seitenanfang definiert); --n = Buchstabenzahl,
   lange Namen (Donnerstag) werden etwas kleiner. Der Inhalt darueber (Jahr/Monat/Tag) rutscht per padding-bottom nach oben. */
.kalenderblatt:not(.pause) { position: relative; }   /* % statt cqw: cqw wuerde sich auf den Eltern-Container beziehen */
.kalenderblatt:not(.pause) .kb-wochentag.lang, .kalenderblatt:not(.pause) .kb-unten.bogen { position: absolute; inset: 0; margin: 0; order: 0; pointer-events: none; }
.kb-unten .kb-bogen, .kb-mitte svg.kb-bogen { display: block; width: 100%; height: 100%; margin: 0; overflow: visible; }   /* ueberschreibt .kb-mitte svg (Pause-Symbol) */
.kb-bogen text { fill: currentColor; font-family: inherit; font-weight: 600; font-size: 10px; letter-spacing: .10em; text-anchor: middle; }
/* Vier Kategorien: vergangen = grau gefuellt, aktuell = Akzentfarbe, kommend = schwarz gefuellt (Grundform), abgesagt/Pause = Ring
   (grau, wenn schon vorbei; schwarz, wenn noch bevorstehend) */
.kalenderblatt { --kb-grau: #d6d6ce; --kb-grau-text: #86867f; --kb-grau-ring: #bebeb6; }
.kalenderblatt:not(.vorbei):not(.aktuell):not(.pause) { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
.kalenderblatt.vorbei { background: var(--kb-grau); color: var(--kb-grau-text); border-color: var(--kb-grau); }
.kalenderblatt.aktuell { background: var(--akzent); color: var(--weiss); border-color: var(--akzent); }
.kalenderblatt.pause-vorbei { background: transparent; color: var(--kb-grau-text); border-color: var(--kb-grau-ring); }
/* Pause: durchgezogene Linie, alle Inhalte (Monat, Zeichen, Jahr) in derselben Farbe */
.kalenderblatt.pause { border-style: solid; }
.kalenderblatt.pause .kb-oben, .kalenderblatt.pause .kb-unten { opacity: 1; }
/* "Pause" und der Grund (z. B. "Corona") im selben Stil: gleiche Groesse, Staerke und Laufweite */
.kalenderblatt.pause .kb-oben, .kalenderblatt.pause .kb-unten { font-size: 10cqw; font-weight: 600; letter-spacing: .14em; text-indent: .14em; }
a.kalenderblatt { cursor: pointer; }
a.kalenderblatt:hover, a.kalenderblatt:focus-visible { background: var(--a-hell); color: var(--tinte); border-color: var(--a-hell); }
/* vergangene Termine mit Fotos: beim Hover in der Akzentfarbe des jeweiligen Termins (--akzent steht inline am Kreis) */
a.kalenderblatt.vorbei:hover, a.kalenderblatt.vorbei:focus-visible { background: var(--akzent); color: color-mix(in srgb, var(--akzent) 40%, #fff); border-color: var(--akzent); }
/* aktueller Termin: beim Hover aendert sich nur die Schriftfarbe (heller Akzentton), der Hintergrund bleibt */
a.kalenderblatt.aktuell:hover, a.kalenderblatt.aktuell:focus-visible { background: var(--akzent); border-color: var(--akzent); color: color-mix(in srgb, var(--akzent) 40%, #fff); }
.kb-pager { display: flex; justify-content: space-between; margin: 1.4rem 0 0; }
.kb-nav { background: none; border: 0; border-bottom: var(--ring) solid currentColor; cursor: pointer; font: inherit; font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); padding: .25rem 0; }
.kb-nav:hover { color: var(--a-dunkel); }
.hinweis { padding: 0 var(--rand); }

/* --- Adresse | Anfahrt --- */
.b-ort { display: grid; grid-template-columns: 1fr; background: var(--a-dunkel); color: var(--weiss); }
.b-ort-spalte { padding: calc(var(--rand) * 1.1) var(--rand); }
.b-ort-spalte + .b-ort-spalte { background: var(--a-hell); color: var(--tinte); }
.b-ort h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.b-ort p { margin: 0 0 .9rem; line-height: 1.35; }
.b-ort em { opacity: .75; }
.b-marke-u3, .b-marke-a23 { display: inline-grid; place-items: center; min-width: 2.7em; height: 2.7em; border-radius: 50%; font-weight: 800; font-size: .8rem; color: var(--weiss); vertical-align: middle; margin-right: .35rem; }
.b-marke-u3 { background: #e8730c; }
.b-marke-a23 { background: #1f56b5; }
@media (min-width: 700px) { .b-ort { grid-template-columns: 1fr 1fr; } }
.b-ort-baer { display: none; }
/* Breit: Adresse und Anfahrt uebereinander in der linken Haelfte, "Gut zu wissen" in der rechten (statt einer Liste, die nur ein Stueck der Breite fuellt) */
@media (min-width: 820px) {
  .b-ortwissen { display: grid; grid-template-columns: 1fr 1fr; }
  .b-ort { grid-template-columns: 1fr; background: var(--akzent); }   /* Bloecke nur so hoch wie ihr Inhalt, darunter bleibt Platz leer */
  .b-ort-spalte:first-child { background: var(--a-dunkel); }
  .b-ort { grid-template-rows: auto auto auto; align-content: start; }   /* der Logo-Kasten bleibt so hoch wie sein Inhalt, auch wenn rechts eine Frage aufklappt */
  /* dritter Kasten: Eisbaer (ohne Kreis, Buchstaben abgeschnitten) so gross wie der freie Platz erlaubt, Seitenverhaeltnis 431:340 */
  .b-ort-baer { display: flex; align-items: center; padding: 36px var(--rand); background: var(--tinte); container-type: inline-size; }
  /* Eisbaer linksbuendig, daneben Wochentag + Datum des naechsten Termins; Bild hoechstens so hoch wie der Platz, hoechstens knapp halb so breit wie der Kasten */
  /* Bild und Schriftblock gleich hoch (--hb): Bild 431:340, Block = 1,4190 em hoch (Datum 1 em + zwei Zeilen Kleinschrift .2328 em x Zeilenhoehe .9); Breite gesamt ~ 3,568 x --hb (Montserrat; Bild 1,268 + Block = Breite des breitesten Datums "04.04." 3,265 em / 1,4190) - alle Zeilen so breit wie "04.04." */
  .b-ort-baer-in { --fs: calc((100cqw - 1.4rem) / var(--tot, 5.0637)); --hb: calc(var(--fs) * var(--bh, 1.4190)); --w: calc(var(--hb) * 431 / 340);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; width: 100%; }   /* Bild linksbuendig, Schriftblock rechtsbuendig; UNTEN buendig: Grundlinie der letzten Zeile (Location · Einlass) schliesst mit der Eisscholle des Baeren ab (auch wenn der Baer niedriger als der Block ist) */
  .b-ort-baer-bild { position: relative; display: block; flex: none; width: var(--w); height: var(--hb); overflow: hidden; line-height: 0; }
  .b-ort .b-ort-datum { margin: 0; display: grid; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; font-size: calc(var(--fs) * var(--fk, 1)); color: var(--weiss); white-space: nowrap; height: calc(var(--fs) * var(--bk, 1.4190)); align-content: space-between; }   /* Block so hoch wie das Logo: Versalhoehe der ersten Zeile oben, Grundlinie der letzten unten, Rest verteilt sich auf die Zwischenraeume */
  /* Kleinzeilen (Wochentag, Location/Einlass) immer gleich gross (.2328 em). Der Server misst je Termin per HarfBuzz (webapp._kasten_masse): --dls = Zusatz-Buchstabenabstand
     des Datums (Blocksatz bei schmalen Daten, Kerning bleibt), --dl/--dr am Datum und --z1/--z3l/--z3r an den Kleinzeilen = Seitenabstaende (em der Datumsschrift),
     damit die sichtbare Tinte aller Zeilen links und rechts buendig steht */
  .b-ort-datum span:first-child, .b-ort-datum span:nth-child(3) { font-size: calc(.2328em / var(--fk, 1)); letter-spacing: .1em; line-height: .9; font-weight: 700; padding-left: .1em; }
  .b-ort-datum > span:first-child { margin-top: -.1085em; }   /* Zeilenrand -> Versalhoehe (Montserrat: Ascent .968, Descent .251, Versalhoehe .7, Zeilenhoehe .9) */
  .b-ort-datum > span:nth-child(3) { margin-bottom: -.0915em; }
  .b-ort-datum span:nth-child(3) { display: flex; justify-content: space-between; padding-left: calc(var(--z3l, .0245) / .2328 * 1em); padding-right: calc(var(--z3r, 0) / .2328 * 1em); }   /* Location links, Mittelpunkt als Trenner mittig, Einlass rechts - Zeile so breit wie das Datum */
  .b-ort-datum span:nth-child(3) span { font-size: 1em; padding: 0; letter-spacing: inherit; margin: 0; }
  .b-ort-datum > span:first-child { padding-left: calc(var(--z1, .0204) / .2328 * 1em); }
  .b-ort-datum > span:nth-child(2) { padding: 0 calc(var(--dr, 0) * 1em) 0 calc(var(--dl, 0) * 1em); letter-spacing: calc(-.02em + var(--dls, 0) * 1em); margin: calc(var(--dg, 0) * -1em) calc(var(--dls, 0) * -1em) calc(var(--dg, 0) * -1em) 0; }   /* --dg: Zeilenabstand vor/nach dem Datum verringert (em Datum) */   /* kein Zusatzabstand hinter dem letzten Zeichen */
  .b-ort-baer-bild img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; }
  .b-wissen-liste { max-width: none; }
  .b-fuss-zeichen { display: none; }   /* breit: der Eisbaer sitzt schon im Kasten ueber der Fusszeile */
}

/* --- Gut zu wissen: Zeilen mit Plus im Kreis --- */
.b-wissen { background: var(--akzent); color: var(--weiss); padding-bottom: calc(var(--rand) * 1.2); }
.b-wissen-liste { padding: 0 var(--rand); max-width: 54rem; }
.b-wissen details { border-top: var(--ring) solid rgba(255,255,255,.55); }
.b-wissen details:last-child { border-bottom: var(--ring) solid rgba(255,255,255,.55); }
.b-wissen summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.b-wissen summary::-webkit-details-marker { display: none; }
.b-wissen summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: var(--ring) solid currentColor; display: grid; place-items: center; font-weight: 600; font-size: 1.3rem; line-height: 1; padding-bottom: .1rem; }
.b-wissen details[open] summary::after { content: "–"; background: var(--weiss); color: var(--akzent); }
.b-wissen details p { margin: 0 0 1.1rem; max-width: 40rem; opacity: .95; }
.b-wissen a { text-decoration-thickness: .08em; text-underline-offset: .18em; }
.b-plan img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 0 1.2rem; }

/* --- Fuss: Zeichen, Social, Impressum --- */
.b-fuss { background: var(--akzent); color: var(--weiss); padding: calc(var(--rand) * 1.2) var(--rand); display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1.1rem; text-align: center; }
.b-fuss-zeichen-gross { width: 92px; box-sizing: border-box; background: transparent; border: var(--ring) solid var(--weiss); }   /* Ring wie die Social-Symbole (Groesse und Platz unveraendert) */
.b-social { display: flex; gap: .4rem; }
.b-social a { width: 44px; height: 44px; border-radius: 50%; border: var(--ring) solid var(--weiss); display: grid; place-items: center; color: var(--weiss); }
.b-social svg { width: 22px; height: 22px; display: block; }
.b-social a:hover, .b-social a:focus-visible { background: var(--weiss); color: var(--tinte); }
.b-impressum { margin: 0; font-size: 14px; line-height: 1.5; opacity: .85; }
/* Schmale Handys: jede Angabe in einer eigenen Zeile (E-Mail, UID, Firmenbuchnummer), ohne Middots dazwischen, damit nichts mitten im Wort umbricht */
@media (max-width: 559px) { .b-impressum .b-fz { display: block; } .b-impressum .b-mp { display: none; } .b-impressum br { display: none; } }

/* --- Lightbox (Verhalten aus website/js/home.js, Aussehen hier eigenstaendig) --- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(23,23,26,.96); color: var(--weiss); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox-inner { display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 92vw; max-height: 92vh; overflow-y: auto; }
.lightbox-info { text-align: center; max-width: 34rem; }
.lightbox-datum { margin: 0 0 .3rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 1.05rem; }
.lightbox-lineup { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.2rem; font-size: .82rem; color: rgba(255,255,255,.75); }
.lightbox-lineup .floor { font-weight: 700; color: var(--weiss); margin-right: .3rem; }
@media (max-width: 480px), (max-height: 480px) { .lightbox-lineup { display: none; } }
.lightbox.ohne-info .lightbox-info { display: none; }
.lightbox-bild { display: block; max-width: 92vw; max-height: 62vh; transition: opacity .2s; }
.lightbox-text { margin: 0; text-align: center; max-width: 30rem; font-size: .92rem; }
.lightbox-text[hidden], .lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
.lightbox-schliessen, .lightbox-prev, .lightbox-next {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; border: var(--ring) solid var(--weiss); background: transparent; color: var(--weiss);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 .15rem;
}
.lightbox-schliessen { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-schliessen:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--weiss); color: var(--tinte); }
.lightbox.laedt .lightbox-bild { opacity: .3; }
.lightbox.laedt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.3); border-top-color: var(--weiss); border-radius: 50%; animation: b-dreh .8s linear infinite; pointer-events: none; }
@keyframes b-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lightbox.laedt::after { animation: none; } .kb-saison-block { transition: none; } }

/* --- Datenschutzerklaerung: Text auf Papier, Ueberschriften mit Kreis-Punkt wie auf der Startseite --- */
main.b-recht { background: var(--papier, #ecece4); color: var(--tinte); padding: calc(var(--rand) * 1.4) var(--rand) calc(var(--rand) * 1.8); }
main.b-recht > * { max-width: 44rem; margin-left: 0; margin-right: 0; }
.b-recht h1 { margin: 1.4rem 0 .3rem; font-weight: 800; font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
.b-stand { margin: 0 0 2.2rem; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.b-recht h2 { display: flex; align-items: center; gap: .6rem; margin: 2.2rem 0 .7rem; font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.b-recht h2::before { content: ""; flex: none; width: .75em; height: .75em; border-radius: 50%; background: var(--tinte); }
.b-recht p, .b-recht li { font-size: 1rem; line-height: 1.6; }
.b-recht p { margin: 0 0 1rem; }
.b-recht ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.b-recht li { margin-bottom: .3rem; }
.b-recht a { color: var(--a-dunkel); text-decoration-thickness: .08em; text-underline-offset: .18em; font-weight: 600; }
.b-recht a:hover { color: var(--tinte); }
.b-zurueck { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.b-zurueck i { font-style: normal; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--tinte); color: var(--weiss); }
.b-zurueck:hover i { background: var(--a-dunkel); }

/* Jahr oben gebogen (Textpfad #kb-bogenpfad-oben): gleich weit gesperrt wie der Wochentag (0,10 em) */
.kb-unten.bogen .kb-bogen text { letter-spacing: .10em; }

/* --- Newsletter-Formular in der Kachel (Markup nach Infomaniak, Klassen .inf-*) --- */
/* Kompakt, damit die Kachel nicht hoeher wird als frueher (sonst wachsen Flyer- und Wikipedia-Kachel mit): Feld und Knopf nebeneinander,
   auf breiten Bildschirmen steht der Text links neben dem Formular. */
.b-nl { width: 100%; max-width: none; margin: 0; }
.b-nl .inf-falle { display: none; }
.b-nl .inf-main { display: block; }
.b-nl .inf-content { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.b-nl .inf-input { width: 100%; min-width: 0; }
.b-nl .inf-input input { width: 100%; box-sizing: border-box; height: 100%; min-height: 3rem; padding: .6em .9em; border: 2px solid transparent; border-radius: 0; background: var(--weiss); color: var(--tinte); font: inherit; font-size: 1rem; }
.b-nl .inf-input input::placeholder { color: rgba(0,0,0,.55); }
.b-nl .inf-input input:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.b-nl .inf-input.inf-error input { border-color: #b3003a; }
.b-nl .inf-message { display: block; margin-top: .35rem; color: #8a0030; font-size: .9rem; font-weight: 700; }
.b-nl button.b-knopf { border: 0; cursor: pointer; font-family: inherit; margin: 0; flex: none; }
.b-nl .inf-rgpd { margin: .1rem 0 0; font-size: .8rem; line-height: 1.35; opacity: .9; max-width: none; }
.b-nl .inf-rgpd a { color: inherit; }
@media (min-width: 1100px) {
  .b-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(18px, 2.4vw, 32px); row-gap: 1rem; align-items: start; }
  .b-news > h2 { grid-column: 1 / -1; }
  .b-news > p { grid-column: 1; }
  .b-news > .b-nl { grid-column: 2; grid-row: 2; }
}
/* Anbieter mit nur einem Knopf (mailchimp_link): alles untereinander, auch auf breiten Bildschirmen */
@media (min-width: 1100px) { .b-news.b-news-spalte { display: block; } .b-news.b-news-spalte > .b-nl { margin-top: 0; } }

/* Kacheln rechts neben dem Flyer: Wikipedia ist nur so hoch wie sein Inhalt, ein eventueller Rest geht an die Newsletter-Kachel (nicht an Wikipedia);
   der Knopf "Lesen" steht direkt unter dem Text. */
@media (min-width: 820px) { .b-mosaik.mit-flyer .b-duo { grid-template-rows: 1fr auto; } }
.b-wiki .b-knopf { margin-top: 0; }

/* "Flyer & Plakat ansehen" (Text und Pfeil) ein Stueck tiefer, mehr Luft zu den Bildern (nur im Zwei-Spalten-Layout, wo unten genug Innenabstand ist) */
@media (min-width: 820px) {
  .b-mosaik.mit-flyer .b-flyer-text, .b-mosaik.mit-flyer .b-flyer .b-pfeil { transform: translateY(.9rem); }
}

/* Newsletter-Pop-up (Meldungen der Anmeldung ohne Seitenwechsel): rechteckige Kachel in abgedunkelter Akzentfarbe, Schliessen-Kreis als einzige Rundung */
.nl-dialog { border: 0; padding: 0; width: min(32rem, calc(100vw - 2rem)); background: var(--a-dunkel); color: var(--weiss); }
.nl-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.nl-dialog-box { position: relative; padding: clamp(1.4rem, 5vw, 2.2rem); }
.nl-dialog h3 { margin: 0 2.8rem .9rem 0; font-size: clamp(1.4rem, 4.5vw, 1.9rem); line-height: 1.15; font-weight: 800; }
.nl-dialog p { margin: 0 0 .9rem; line-height: 1.5; }
.nl-dialog a { color: inherit; text-decoration: underline; }
.nl-dialog .nl-ok { margin-top: .6rem; border: 0; cursor: pointer; font-family: inherit; }
.nl-x { position: absolute; top: .9rem; right: .9rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--weiss); color: var(--tinte); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.nl-x:hover, .nl-x:focus-visible { background: var(--a-hell); }
.nl-dialog a.nl-aktion { text-decoration: none; background: var(--weiss); color: var(--tinte); margin: .6rem 0 .2rem; padding: 1rem 1.3rem 1rem 1.7rem; font-size: 1.05rem; font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.nl-dialog a.nl-aktion i { background: var(--a-dunkel); color: var(--weiss); }
.nl-dialog a.nl-aktion:hover, .nl-dialog a.nl-aktion:focus-visible { background: var(--a-blass); }
.nl-dialog .nl-klein { font-size: .85rem; opacity: .85; margin-top: .4rem; }
/* Wort nie am Bindestrich trennen (z.B. "E-Mail") */
.nb { white-space: nowrap; }
/* Newsletter-Kachel einspaltig: Absatz darf die ganze Kachelbreite nutzen */
.b-news.b-news-spalte > h2 { margin-bottom: .8rem; }
.b-news.b-news-spalte > p { max-width: none; margin: 0 calc(var(--rand) * -.5) 1.6rem 0; }   /* etwas ueber den Innenabstand hinaus: der Satz passt in eine Zeile */
.b-news.b-news-spalte .inf-rgpd { margin-top: .9rem; }