mit
darin (FAQ-Liste).
Formatiert war nur die zweite; die Fakten liefen in Grundschrift.
Jetzt trägt .frage__a die Schrift selbst, das
erbt sie. */
.frage__a{padding:0 34px 16px 0;color:var(--ink2);font-size:15.5px;line-height:1.55;max-width:62ch}
.frage__a p{margin:0;color:inherit;font-size:inherit;line-height:inherit;max-width:none}
.frage__a .tlink{margin-top:12px}
@media(prefers-reduced-motion:reduce){.frage>summary::after{transition:none}}
/* Abschnittsueberschriften in Magenta — der Vereinsfarbe. Die
Kategoriefarben (rot, orange, lila) kennzeichnen die ART der
Veranstaltung und stehen an Kickzeilen, Chips und Bildrahmen; die
Ueberschrift ist die Stimme des Vereins und bleibt magenta.
03.11.2026: Die Farbe galt nur fuer h2. Die Kopfzeile der
Impressionen auf der Festivalseite ist ein h3 — eine Ebene tiefer,
weil sie im Rueckblick-Abschnitt steht — und war dadurch als einzige
Ueberschrift der Seite schwarz (Marcus: „steht es noch in schwarz").
Die Ebene soll die Groesse bestimmen, nicht die Farbe: Die Farbe
gilt jetzt fuer beide, die Groesse weiterhin nur fuer h2, damit die
Unterueberschrift kleiner bleibt. */
.shead h2{font-size:clamp(23.4px,3.2vw,32px)}
/* 04.11.2026 (Marcus: „in dem Lila wirkt ein bisschen billig oder
veraltet"): Abschnittsueberschriften in Tinte, die Farbe der Seite
sitzt als kurzer Strich darueber — Magenta beim Verein, Lila auf
Festivalseiten, Orange/Rot bei den Reihen. --ton kommt aus der
body-Klasse ton-* (header.php, dieselbe Weiche wie der Farbbalken).
Damit beissen sich Kicker und Ueberschrift auf der Festivalseite
nicht mehr. Die Grosse Flaeche traegt keine Signalfarbe mehr; die
Marke lebt in Strich, Kicker, Knoepfen und Links. */
body{--ton:var(--magenta)}
.ton-fest{--ton:var(--lila)}.ton-jazz{--ton:var(--orange)}.ton-einzel{--ton:var(--rot)}
.shead :is(h2,h3),.h-sec,.h2l{color:var(--ink)}
.shead h2::before,.h-sec::before,.h2l::before{content:"";display:block;width:34px;height:3px;
background:var(--ton);margin:0 0 14px}
/* Die kleine Zeile unter dem Festival-Logo ist keine Abschnittsgrenze. */
.shead--unterm-logo h2::before{display:none}
/* Der Festivalblock auf der Startseite ist eine Insel in Lila — der
Kicker darin ist es schon, der Strich soll es auch sein. */
.fest{--ton:var(--lila)}
/* Ohne Unterlinie traegt der Abstand die Trennung — 22 px, wie es auf
der Festivalseite seit 15.10.2026 als Sonderfall stand und sich dort
bewaehrt hat. Der Sonderfall ist damit die Regel und entfaellt. */
.shead,.h2l{padding-bottom:0}
.h2l{margin:0 0 22px;font-size:clamp(23.4px,3.2vw,32px)}
/* Die Ausnahmen „keine Oberlinie direkt unter einer Ueberschrift“
(.shead+.idx, +.fragen, +.facts, +.prog, +.artist, +.punkte, +.cell)
sind am 16.10.2026 entfallen: Es gibt keine Ueberschriftenlinie mehr,
unter der eine zweite stehen koennte. Bei .punkte und .faq__frage
waren sie sogar schaedlich — dort fehlte danach der erste
Zeilentrenner der Liste. */
.shead a{flex:none}
/* 03.11.2026 (Marcus: „die Textblöcke brechen in der Mitte ab"): 660 -> 860 px.
Bei 1.280 px Container blieben rechts 556 px leer — der Text sah aus,
als sei er abgeschnitten. 860 px sind rund 95 Zeichen je Zeile; lesbar
sind 50 bis 75, darüber verliert das Auge beim Zeilensprung den
Anschluss, deshalb nicht weiter.
Blocksatz geprüft und verworfen (Entscheidung Marcus): Die Wortabstände
wachsen auf das 1,5-Fache, hyphens:auto blieb im Test wirkungslos (der
Browser lädt die deutschen Trennmuster nicht), und WCAG 1.4.8 rät von
Blocksatz im Fließtext ab.
.prog (Ablauf mit Uhrzeiten) bleibt bei 660 px — eine Liste mit
Zeitspalte liest sich schmal besser als ein Absatz. */
.prose{max-width:860px}
/* Loest zwei style="" im Barrierefreiheits-Abschnitt der Abendseite ab. */
.prose__zeile{max-width:660px;color:var(--ink2)}
.prose__weg{margin:18px 0 0}
/* Der Rueckblick ist der Haupttext der Seite und steht unter einer
Ueberschrift, die ueber die ganze Breite laeuft — bei 660px wirkte er
abgeschnitten (Marcus, 15.10.2026). Jetzt in ch statt px: Die Weite
waechst mit der Schriftgroesse, die Zeile bleibt also bei jeder
Groesse gleich lang zu lesen. 76ch sind rund 820px bei 18px —
deutlich breiter, aber noch nicht die 110 Zeichen, die volle Breite
ergaebe; ab etwa 90 Zeichen findet das Auge den Zeilenanfang nicht
mehr zuverlaessig. */
#rueckblick .prose{max-width:76ch}
.prose p{color:var(--ink2)}
/* 03.11.2026 (Marcus): Der erste Absatz war als großer Einstieg gesetzt
(21 px, schwarz), während „Über den Act" daneben in 15,5 px grau stand.
Direkt untereinander sah der Unterschied aus wie ein Fehler. Jetzt
trägt der erste Absatz dieselbe Schrift wie der Rest; was ihn trägt,
ist die Überschrift darüber. */
.prose p:first-of-type{color:var(--ink2);font-size:inherit;line-height:1.6}
/* Hintergrundtext: ausgeschrieben, aber eine Stufe kleiner als der
Rueckblick (15.10.2026). Der erste Absatz wird hier NICHT vergroessert —
die Regel darueber hat dieselbe Spezifitaet (0,2,1), darum muss diese
danach stehen, sonst gewinnt die Vergroesserung. */
/* .prose--sek ist am 03.11.2026 entfallen. Sie setzte „Über den Act" auf
15,5 px, während .prose daneben mit 21 px begann — der Unterschied sah
aus wie ein Fehler (Marcus). Nachdem beide dieselbe Schrift tragen,
blieb ein Unterschied von 1 px bei genau einer Verwendung übrig. */
/* Loest style="margin:18px 0 0" an der Filzstift-Zeile ab. */
.prose__sign{margin:18px 0 0}
/* Der Kicker ueber dem Text bleibt Magenta und klein — .prose p wuerde ihn sonst uebersteuern. */
/* Hoehere Spezifitaet als .kick und als die Reihen-Klassen — muss
mitgezogen werden, sonst bliebe der Kicker im Fliesstext magenta. */
.prose p.kick{color:var(--ink);font-size:12.5px;line-height:1.4}
/* Zitat */
/* 15.10.2026: Die beiden 3-px-Linien sind weg (Marcus) — das Zitat
steht jetzt direkt hinter dem Kopf, und dort trennten sie es von
genau dem, worauf es sich bezieht. Es traegt sich selbst: Serif,
kursiv, grosse Type, viel Luft.
Zentriert und eine Stufe groesser als vorher (34-64px statt 27-54),
dafuer max-width 26ch statt 24 — sonst wird eine lange Stimme zur
Textwand. Das haengende Anfuehrungszeichen bleibt, aber als
margin-left: text-indent wuerde bei zentriertem Text die erste
Zeile gegen die anderen verschieben. */
.pull{margin:0;padding:clamp(56px,8vw,96px) 0;text-align:center}
.pull p{margin:0 auto;font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(30.6px,5.6vw,51.2px);line-height:1.06;letter-spacing:-.025em;max-width:26ch;text-wrap:balance}
.pull footer{margin-top:24px;font:600 13px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
@media(max-width:759px){
.pull{padding:var(--luft) 0}
.pull p{font-size:clamp(23.4px,7.4vw,27.2px);max-width:22ch}
}
.pull footer b{color:var(--ink)}
/* Ablauf */
.prog{list-style:none;margin:0;padding:0;max-width:660px}
.prog li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line2)}
.prog time{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prog b{display:block;font-weight:600;font-size:17px}
.prog span{display:block;font-size:15px;color:var(--ink2)}
/* Nummerierte Schritte: eine einstellige Zahl braucht keine Uhrzeit-Spalte.
96px kosteten am Handy fast ein Drittel der Textbreite. */
/* .prog--nr ist am 18.10.2026 entfallen — die nummerierte Variante der
Ablaufliste war in Wahrheit die Schrittfolge. Siehe .schrittfolge. */
/* Hinweis unter einem Knopf, der eine Datei oeffnet. */
.pdf-hinweis{margin:10px 0 0;max-width:46ch;font-size:14px;line-height:1.5;color:var(--ink2)}
/* Mitgliedsseite: der Grund fuer die Mitgliedschaft, zwischen Kopf und Spalten. */
.warum{max-width:660px;margin:0;font-size:17px;line-height:1.6;color:var(--ink2)}
/* Am Handy stehen die Konditionen im Quelltext vor dem Weg. Nebeneinander
soll der Weg aber wie bisher links stehen — deshalb hier zurueckgedreht. */
@media(min-width:780px){.mw-weg{order:1}.mw-fakten{order:2}}
/* Künstler */
.artist{display:grid;gap:22px;padding-top:4px}
.artist img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
@media(min-width:780px){.artist{grid-template-columns:250px minmax(0,1fr);gap:40px}}
.links{display:flex;flex-wrap:wrap;gap:10px 14px;margin:16px 0 0;padding:0;list-style:none}
/* Senkrechte Linkliste — bisher nur auf der Seitenuebersicht, dort mit
vier Inline-Stilen je Liste. Das kurze Tippziel ist hier Absicht: die
Zeilen stehen mit 10 px Abstand, zusammen gut 34 px, damit sitzt kein
Link im Tippbereich des naechsten. */
.liste-schlicht{list-style:none;margin:0;padding:0}
.liste-schlicht li{margin:0 0 10px}
.liste-schlicht .tlink{min-height:0}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid var(--ink);color:var(--ink);font:600 14px/1.2 var(--sans);text-decoration:none}
.links a:hover{background:var(--ink);color:#fff}
/* Index-Liste (Programm) */
/* Einladung: „Das kommt als Nächstes", wenn es genau EIN Termin ist
(15.10.2026). Die Terminliste .idx braucht mehrere Zeilen, um als
Liste zu wirken — bei einer stand sie verloren zwischen zwei Linien.
Hier stattdessen zwei Spalten mit grossem Bild, wie der Festivalblock
auf der Startseite: Bild links, Text rechts, ein Knopf in voller
Groesse. Mobile first, darum die einspaltige Form zuerst. */
/* Mitglieder-Aufruf auf der Abendseite (15.10.2026). Nicht schwarz wie
der Ticketkasten — das Feld dort ist das einzige schwarze der Seite und
bleibt dem Kartenkauf vorbehalten. Hier die ruhige Variante: heller
Grund, Magenta-Oberlinie wie bei den Abschnittsueberschriften.
Mobile first: erst untereinander, ab 820px Knopf rechts aussen —
dieselbe Schwelle wie beim Ticketkasten, damit die beiden Bloecke auf
derselben Breite umbrechen. */
/* Mitglieder-Block, Fassung vom 15.10.2026 (zweite Runde, Marcus):
Drei Vorteile in Spalten statt eines Appells. Die Spalten tragen
Haarlinien wie „Fakten zum Abend“ — keine Kacheln, weil Kacheln auf
dieser Seite Objekte markieren und das hier eine Aufzählung ist. */
.mitglied-ruf{border-top:3px solid var(--magenta);background:var(--calm);padding:26px 22px}
.mitglied-ruf__label{margin:0 0 6px;font:700 11px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--magenta-d)}
.mitglied-ruf__satz{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(21.6px,3vw,27.2px);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.mitglied-ruf__liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.mitglied-ruf__liste li{padding:15px 0;border-top:1px solid var(--line2)}
.mitglied-ruf__liste b{display:block;font-family:var(--serif);font-weight:600;font-size:17.5px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.mitglied-ruf__liste span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.mitglied-ruf__cta{margin:20px 0 0}
@media(min-width:780px){
/* Drei Spalten, senkrechte Haarlinien statt waagerechter. Die erste
Spalte beginnt ohne Linie, sonst haengt links eine im Nichts. */
.mitglied-ruf{padding:30px 34px}
.mitglied-ruf__liste{grid-template-columns:repeat(3,1fr);gap:0 26px;margin-top:24px;
border-top:1px solid var(--line2);padding-top:20px}
.mitglied-ruf__liste li{padding:0 0 0 26px;border-top:0;border-left:1px solid var(--line2)}
.mitglied-ruf__liste li:first-child{padding-left:0;border-left:0}
}
/* Zwei Vorteile (kein Gutschein gepflegt): zwei Spalten statt drei
leerer Drittel. */
@media(min-width:780px){
.mitglied-ruf__liste:has(li:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
}
.einladung{display:grid;gap:20px;padding-top:4px}
.einladung__bild{display:block;overflow:hidden;background:var(--calm2)}
.einladung__bild img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.einladung__bild:is(:hover,:focus-visible) img{transform:scale(1.04)}
.einladung__text{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.einladung__wann{margin:0;font:700 12.5px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.einladung__titel{margin:0;font-size:clamp(25.2px,4.4vw,35.2px);line-height:1.05}
.einladung__titel a{color:var(--ink);text-decoration:none}
.einladung__titel a:is(:hover,:focus-visible){color:var(--magenta)}
.einladung__cta{margin:6px 0 0}
@media(prefers-reduced-motion:reduce){.einladung__bild img{transition:none}}
@media(min-width:900px){
/* Bild links, Text rechts — und der Text sitzt auf der Mitte des
Bildes, nicht oben: sonst haengt der Knopf im Leeren. */
.einladung{grid-template-columns:minmax(0,440px) 1fr;gap:36px;align-items:center}
}
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.idx__row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"media media" "date date" "body body" "cta cta";gap:6px 18px;padding:20px 0 24px;border-bottom:1px solid var(--line2)}
.idx__date{grid-area:date;font-family:var(--serif);font-weight:600;font-size:clamp(21.6px,2.6vw,24px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.idx__date span{display:block;margin-top:5px;font:700 11.5px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink2)}
.idx__body{grid-area:body}
.idx__body .cat,.plakat .cat{font:700 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
/* Zeile ohne Datum und ohne Bild — Suchtreffer, Beitraege im Archiv und
im Blog. Ohne diese Regel haelt das Raster ab 880 px die 150-px-Spalte
fuer das Datum frei und der Text beginnt eingerueckt im Leeren. Die
beiden Regeln standen auf vier Vorlagen inline. */
.idx__row--text .idx__body{grid-column:1/-1}
.idx__body .cat--leise{color:var(--ink2)}
.idx__body h2,.idx__body h3{font-size:clamp(20.7px,3vw,24.8px)}
/* Der Titel ist das Hauptziel der Zeile. Einzeilige Titel waren 23 px hoch —
unter dem Mindestmass von 24 px; zweizeilige 41. inline-flex mit min-height
hebt beide auf 44, ohne den Umbruch zu aendern (ein Textknoten in einem
Flex-Container bricht normal um). */
.idx__body h2 a,.idx__body h3 a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.idx__body h2 a:hover,.idx__body h3 a:hover{color:var(--magenta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.idx__meta{margin:8px 0 0;font-size:15.5px;color:var(--ink2)}
.idx__media{grid-area:media;margin:0 0 12px;position:relative}
.idx__media .foto__credit{font-size:10px;padding:3px 6px;max-width:100%;text-align:right}
.idx__media img{display:block;width:100%;aspect-ratio:5/2;object-fit:cover}
.idx__cta{grid-area:cta;display:flex;align-items:center;gap:16px;margin-top:12px}
@media(min-width:880px){.idx__row{grid-template-columns:150px minmax(0,1fr) 200px auto;grid-template-areas:"date body media cta";align-items:center;padding:22px 0}
.idx__media{margin:0}.idx__media img{aspect-ratio:3/2}
.idx__cta{margin:0;justify-content:flex-end}}
.c-einzel{color:var(--rot)}.c-jazz{color:var(--orange-ink)}.c-fest{color:var(--lila)}.c-verein{color:var(--magenta)}
/* Programmseite: der naechste Termin als Plakat (07.09.2026).
Die Seite zeigt fast immer genau einen Abend — als Listenzeile wirkte
der wie ein Rest (179 px von 2098 px Seitenhoehe). Ab dem zweiten
Termin klappt die .idx-Liste darunter auf.
ACHTUNG bei Aufraeumarbeiten: Die Farbklasse wird in PHP zusammen-
gesetzt (kmt_foto( …, $pl_css, … ) ergibt 'foto foto--einzel' in
template-parts/event/plakat.php) und steht nirgends als ganzer Name
im Quelltext. Eine reine Textsuche haelt sie faelschlich fuer tot. */
/* Der naechste Termin als Zweispalter, 03.11.2026. Vorher lag hier
.plakat__foto: randlos ueber die volle Breite, ab 820 px auf 12:5
geschnitten. Bei einem 4:3-Foto blieben davon 55 Prozent der Hoehe
uebrig — der Kopf war oben ab. Jetzt dieselben Masse wie .held auf
Startseite, Abendseite, Verein und Partner: Bild links, Text rechts.
Bild, Zuschnitt (.foto--169) und Nachweis kommen aus kmt_foto() —
demselben Aufruf wie im Kopf der Abendseite. Hier steht nur noch das
Raster. */
.plakat--duo{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.plakat--duo{grid-template-columns:7fr 5fr;gap:36px}}
.plakat--duo .plakat__bild{margin:0}
.plakat--duo .plakat__innen{padding:0}
/* Eckdaten untereinander: .facts--row ist fuer die volle Breite gebaut,
in der schmalen Spalte stuenden Beschriftung und Wert uebereinander
mit einer Trennlinie dazwischen, die nirgendwo hinfuehrt. */
.plakat--duo .facts--row{display:block}
.plakat--duo .facts--row>div{display:grid;grid-template-columns:88px 1fr;gap:12px;
align-items:baseline;border-left:0;border-bottom:1px solid var(--line2);padding:12px 0}
.plakat--duo .facts--row>div:last-child{border-bottom:0}
/* Der Nachweis braucht hier keine eigene Regel: Er kommt als Ecke im
Bild aus kmt_foto(), genau wie im Kopf der Abendseite. */
/* Die Fotografen-Nennung sitzt auf dem Farbstrich unter dem Bild. */
.plakat__bild{position:relative;display:block;margin:0}
.plakat__bild .foto__credit{bottom:5px}
.plakat__innen{padding:22px 0 0}
.plakat__wann{font-family:var(--serif);font-weight:600;font-size:clamp(17.1px,2.2vw,20px);letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;margin:8px 0 0}
.plakat h2{margin:10px 0 0}
.plakat h2 a{color:var(--ink);text-decoration:none}
.plakat h2 a:hover{color:var(--magenta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.plakat__lead{max-width:58ch;font-size:clamp(16px,1.6vw,18px);line-height:1.55;color:var(--ink2);margin:14px 0 0}
/* Knopfreihen, zusammengefuehrt 03.11.2026. Es gab vier fast gleiche
Regeln — .headblock__cta, .held__cta, .plakat__cta, .naechst__tasten —
mit 12 bis 14 px Zeilen-, 18 bis 22 px Spaltenabstand und 20 bis 26 px
Luft nach oben. Unterschiede, die niemand sieht, die aber jede neue
Seite dazu verleiten, eine fuenfte Variante zu erfinden. Jetzt eine
Regel: .tasten ist der Name fuer neues Markup, die vier alten Namen
bleiben als Anker in den Vorlagen stehen. */
.tasten,.headblock__cta,.held__cta,.plakat__cta,.naechst__tasten{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
/* Eckdaten schmal halten: Polt hat nur Einlass und Ort, zwei Spalten
ueber die volle Breite sahen aus wie eine halbleere Tabelle. */
@media(min-width:760px){.plakat .facts--row{grid-template-columns:repeat(auto-fit,minmax(160px,260px))}}
/* Am Schreibtisch gedeckelt: ohne max-height waere das Foto bei 1280 px
490 px hoch und der Titel stuende unter der Bildschirmkante. */
/* Kartenstand in der Listenzeile: gleiches Aussehen wie im Kopf der
Startseite, nur kompakter. */
.idx__body .held__karten{margin-top:10px;font-size:14.5px}
/* Bildergruppe. EIN Baustein fuer jede Fotoreihe ausserhalb der grossen
Galerie (.gal mit Lupe). Zusammengefuehrt am 18.10.2026 aus .streifen
und .teamfotos: Bildrahmen, Credit-Ecke und Beschriftung waren in
beiden zeichengleich, nur Flussrichtung und Seitenverhaeltnis anders.
Ohne Modifikator liegen die Bilder im Raster (--2 / --3 nebeneinander),
mit --wisch in einer Reihe zum Wischen. */
.bilder{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 26px}
.bilder:last-child{margin-bottom:0}
.bilder figure{margin:0}
.bilder__bild{position:relative;display:block}
.bilder img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.bilder figcaption{margin:9px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
@media(min-width:760px){.bilder--2{grid-template-columns:1fr 1fr}
.bilder--3{grid-template-columns:repeat(3,1fr)}
.bilder--2 img,.bilder--3 img{aspect-ratio:4/3}}
/* Zum Wischen: ein Bild pro Anschlag am Handy, nebeneinander am
Schreibtisch. grid-template-columns muss zurueckgesetzt werden, sonst
bleibt die explizite erste Spalte aus .bilder stehen und der
Spaltenfluss beginnt erst daneben. */
.bilder--wisch{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;
padding-bottom:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.bilder--wisch figure{scroll-snap-align:start}
.bilder--wisch img{aspect-ratio:3/2}
@media(min-width:820px){.bilder--wisch{grid-auto-columns:1fr;overflow:visible;padding-bottom:0}}
/* Namen der Vorstandschaft. Zwoelf Zeilen untereinander lesen sich wie
eine Rangliste — mehrspaltig ist es eine Aufzaehlung. Die Reihenfolge
kommt aus dem Backend.
(.kopfzeile stand hier bis 18.10.2026 mit fuenf Regeln und null
Verwendungen — Rest der alten Vorstandsdarstellung, entfernt.) */
.namen-liste{list-style:none;margin:0;padding:0;display:grid;gap:0 26px;
grid-template-columns:1fr;border-top:1px solid var(--line2)}
.namen-liste li{padding:12px 0;border-bottom:1px solid var(--line2);
font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.25}
@media(min-width:560px){.namen-liste{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.namen-liste{grid-template-columns:repeat(3,1fr)}}
/* Filter */
/* Hinweis, wenn der Kategorie-Filter nichts uebrig laesst. */
/* Filterknoepfe. Seit dem Wegfall des Kategorie-Filters (07.09.2026) nur
noch die Jahres-Links auf Presse- und Archivseite — deshalb reicht
aria-current; .chip__sw, .leerfilter und .count sind mit entfallen. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 16px;background:var(--paper);border:2px solid var(--ink);color:var(--ink);font:600 14px/1.2 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer}
.chip:hover{background:var(--calm2)}
.chip[aria-current=true]{background:var(--ink);color:#fff}
/* Kacheln, Karten, Platzhalter */
.grid2{display:grid;gap:26px}
.grid3{display:grid;gap:26px}
/* 18.10.2026: Zwei Spalten als Zwischenstufe. Bisher sprang .grid3 von
einer Spalte direkt auf drei — am Tablet standen drei Kacheln
untereinander, obwohl zwei nebeneinander gepasst haetten. Die Stufe
hatte nur .leist auf der Partnerseite; jetzt haben sie alle. */
@media(min-width:620px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Zwei Spalten, die oben auf einer Linie beginnen statt mittig
ausgeglichen zu werden — Seitenuebersicht und Presseseite. Stand dort
zweimal inline. */
.grid2--oben{align-items:start}
@media(min-width:780px){.grid2{grid-template-columns:1fr 1fr;gap:40px}.grid3{grid-template-columns:repeat(3,1fr);gap:32px}}
/* 18.10.2026: .cell war bis zum Linien-Umbau NUR eine 3-px-Oberlinie.
Ohne sie standen die Kacheln auf Kontakt, FAQ, Verein, Sommerfestival
und Abendseite als Überschrift plus Absatz ohne jeden Halt im Weiß.
Jetzt derselbe ruhige Grund wie bei den Leistungskacheln der
Partnerseite (.leist__k) — Struktur ohne Strich, eine Regel für alle
Raster. Harte Kanten, kein Radius, kein Schatten. */
.cell{background:var(--calm);padding:22px 20px 20px;
display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-items:center}
/* Kachel ohne Symbol: der Titel nimmt beide Spalten. Gilt fuer die
meisten .cell im Theme — FAQ, Kontakt, Barrierefreiheit und die
Archivseiten haben keine Symbole.
03.11.2026: Die Regeln galten nur fuer h3. Auf Suche, Archiv, Blog
und im Rueckblick stand die Leermeldung als h3 direkt unter der h1 —
eine uebersprungene Ebene. Die Meldungen sind jetzt h2, darum
greifen Raster und Masse hier ueber :is(h2,h3). Beide Schreibweisen
haben dieselbe Spezifitaet wie vorher (0,2,1 bzw. 0,1,1), es
verschiebt sich also nichts in der Kaskade. Die Groesse steht mit
dabei, weil ein blankes h2 sonst den Browser-Standard (1.5em)
bekaeme und die Kachelueberschrift ploetzlich groesser waere als
die Trefferzeilen daneben. */
.cell > :is(h2,h3):first-child{grid-column:1/-1}
.cell :is(h2,h3){margin:0;font-size:clamp(17.1px,2.2vw,19.2px);letter-spacing:-.015em;line-height:1.15}
.cell__sym{display:block;width:30px;height:30px;color:var(--magenta)}
.cell > p{grid-column:1/-1;margin:11px 0 0}
.cell p{color:var(--ink2);font-size:15.5px;margin:0}
/* Die Leermeldung — „Nichts gefunden“, „Hier gibt es noch nichts zu sehen“,
„Keine Veranstaltungen gefunden“ — steht auf sieben Vorlagen in einer
.cell und war dort jedes Mal per style="max-width:660px" begrenzt. */
.cell--schmal{max-width:660px}
.dl{margin:0;font-size:16px}
.dl div{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line2)}
.dl div:last-child{border-bottom:0}
.dl dt{flex:0 0 38%;color:var(--ink2)}
.dl dd{margin:0;font-weight:600}
.map{border:2px solid var(--ink)}
.map__ph{aspect-ratio:16/10;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,#F9FAFB,#F9FAFB 9px,#F3F4F6 9px,#F3F4F6 18px)}
.map__ph p{margin:0;max-width:34ch;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink2)}
.map iframe{display:block;width:100%;aspect-ratio:16/10;border:0}
.credit{font:500 13px/1.5 var(--sans);color:var(--ink2);padding-top:10px}
/* Hinweis rechts in der Abschnittsueberschrift („wischen →“): dort
stehen die Zeilen auf einer Grundlinie, der Vorlauf von .credit
schiebt sie nach unten. */
.shead .credit{padding-top:0}
/* „In OpenStreetMap oeffnen“ war 16 px hoch — ein eigenstaendiges Ziel
unter dem Mindestmass von 24 px. Die Schriftgroesse bleibt (die Zeile
ist eine Fussnote), die Tippflaeche waechst auf 44 px. */
.credit a{display:inline-flex;align-items:center;min-height:44px}
figure{margin:0}
/* Sticky Ticketleiste */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;transform:translateY(110%);transition:transform .22s ease}
.stickybar.on{transform:none}
.stickybar__in{display:flex;align-items:center;gap:16px;min-height:72px;padding:12px var(--pad);max-width:1280px;margin:0 auto}
/* 03.11.2026: Titel und Zeile brachen am Handy auf zwei bzw. zwei Zeilen um,
die Leiste wurde 106 px hoch — ein Achtel des Bildschirms, auf dem gerade
gelesen wird. Beides jetzt einzeilig mit Auslassungspunkten; der volle
Titel steht ohnehin als Ueberschrift auf derselben Seite.
min-width:0 am Textblock ist noetig, sonst schrumpft ein Flex-Kind nicht
unter seinen Inhalt und text-overflow greift nie. */
.stickybar__in>div{min-width:0}
.stickybar b,.stickybar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar b{font-weight:600;font-size:15.5px;line-height:1.25}
.stickybar span{font-size:13.5px;color:var(--onink)}
.stickybar .btn{margin-left:auto;flex:none}
@media(prefers-reduced-motion:reduce){.stickybar{transition:none}}
body:has([data-stickybar]){padding-bottom:84px}
/* Fuß: schwarz, 4-px-Magenta-Kante; am Handy Klapplisten (10.09.2026) */
/* Abstand zum Fuss: feste 64 px standen hier und ergaben zusammen mit dem
Polster des letzten Abschnitts 100 px am Handy — mehr als die 72 px
zwischen allen anderen Bloecken. Jetzt dieselbe Zahl wie ueberall, der
Uebergang zum Fuss faellt damit nicht mehr aus der Reihe. Die 4 px
Magenta-Oberkante traegt die Abgrenzung ohnehin. */
/* „Als Nächstes“ — die Karte über dem Fuß (16.10.2026, Marcus).
Heller Streifen über die volle Breite: Er schließt den Inhalt ab und
setzt sich vom weißen Text darüber ab, ohne eine Linie zu brauchen.
Bewusst KEINE Magenta-Fläche — der CI-Guide erlaubt Magenta nur als
Akzent oder Rahmen, nicht als großen Block; hier tragen es der Kicker
in der Reihen-Farbe und der Ticketknopf.
Das Bild ist für Screenreader ausgeblendet (aria-hidden am Link) —
der Titel daneben führt zur selben Seite, zwei gleiche Ziele
hintereinander wären nur Wiederholung. */
/* Die Karte ist selbst eine .sec, traegt aber einen Grund: ohne den
unteren Innenabstand klebte ihr Text an der Unterkante der Flaeche. */
.naechst{background:var(--calm);padding-bottom:var(--sec-y)}
.naechst__innen{display:grid;gap:22px;align-items:center}
@media(min-width:860px){.naechst__innen{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:40px}}
.naechst__bild{display:block;min-width:0}
.naechst__text{min-width:0}
.naechst__t{font-size:clamp(21.6px,3.4vw,30.4px);margin:0}
.naechst__t a{color:var(--ink);text-decoration:none}
.naechst__t a:is(:hover,:focus-visible){color:var(--magenta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.naechst__u{margin:8px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(15.3px,2vw,16.8px);color:var(--ink2)}
.naechst__meta{margin:14px 0 0;font:600 15.5px/1.5 var(--sans);color:var(--ink2)}
.naechst__hin{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--ink2);max-width:46ch}
/* Ohne diese Zeile stuende zwischen dem hellen Streifen und dem dunklen
Fuss ein weisser Spalt — der Fuss bringt seinen eigenen Abstand mit. */
.naechst + .foot{margin-top:0}
.foot{background:var(--ink);color:#fff;margin-top:var(--sec-y);border-top:4px solid var(--magenta)}
/* Der Vereinsname traegt den Fuss-Anfang, seit das Zitat entfallen ist
(10.09.2026). Serif wie alle Ueberschriften der Seite. */
/* Muss .foot__cols h2 ueberstimmen — sonst kaeme der Name als gesperrte
Versalien wie die Spaltenkoepfe daher. */
.foot__cols .foot__name{margin:0 0 10px;font-family:var(--serif);font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:#fff;text-transform:none}
.foot__cols{display:grid;gap:0;padding:40px 0 24px}
.foot__ich{margin-bottom:8px}
/*
* Die drei Gruppen sind am Handy Klapplisten, ab 780 px die gewohnten
* Spalten. Grund: Der Fuss war am Handy 1.209 px hoch und seine Links
* 23 px — unter dem Mindestmass von 24 px. Zugeklappt sind es rund
* 560 px, jede Zeile ist 44 px hoch.
*
* Die Aufklapp-Zeile ist eine : ohne JavaScript bedienbar, mit
* Tastatur erreichbar, und Suchmaschinen sehen die Links auch zugeklappt.
*/
.foot__grp>summary{list-style:none;cursor:pointer}
.foot__grp>summary::-webkit-details-marker{display:none}
.foot__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-bottom:1px solid #374151}
.foot__kopf b{font:700 12px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--onink)}
.foot__grp[open] .foot__kopf b{color:#fff}
.foot__pfeil{flex:none;color:#9CA3AF;transition:transform .15s ease}
.foot__grp[open] .foot__pfeil{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.foot__pfeil{transition:none}}
.foot__grp>a{display:flex;align-items:center;min-height:44px;font-size:16px;color:#fff;text-decoration:none;border:0;border-bottom:1px solid #1F2937;padding:0}
.foot__grp>a:hover{color:#fff;border-bottom-color:#4B5563}
@media(min-width:780px){
.foot__cols{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;padding:44px 0 36px}
.foot__ich{margin-bottom:0}
/* Ab hier stehen die Gruppen offen. Die Klappzeile wird zur Ueberschrift:
kein Rahmen, kein Pfeil, nicht anklickbar — und die Links bleiben
sichtbar, auch wenn jemand per Tastatur zuklappt. */
.foot__grp>summary{pointer-events:none}
.foot__kopf{min-height:0;border:0;margin:0 0 14px}
.foot__pfeil{display:none}
.foot__grp:not([open])>a{display:flex}
.foot__grp>a{min-height:0;margin:0 0 10px;border:0;border-bottom:1px solid #4B5563;padding-bottom:2px;align-self:flex-start}
.foot__grp>a:hover{border-bottom-color:#fff}
}
/* Die Spaltenueberschriften im Fuss sind h2 — h4 direkt nach einem h2
im Inhalt waere ein Ebenensprung und verwirrt die Screenreader-Navigation. */
.foot__cols h2{margin:0 0 14px;font:700 12px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--onink)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 10px}
.foot a{color:#fff;font-size:16px;text-decoration:none;border-bottom:1px solid #4B5563;padding-bottom:2px}
.foot a:hover{color:#fff;border-bottom-color:#fff}
.foot .small{font-size:14px;line-height:1.6;color:var(--onink)}
.foot .small a{font-size:inherit}
/* Steht jetzt in der Gruppe „Service“ statt als eigener Absatz (10.09.2026):
leiser als die Links darueber, damit die Liste eine Liste bleibt. */
.foot__a11y{margin:14px 0 0;padding:0;font-size:13.5px;line-height:1.55;color:#9CA3AF}
/* Traegt jetzt die Trennlinie, die vorher ueber der Barrierefreiheits-Zeile
sass — sonst haenge das Rechtliche ohne Abgrenzung an den Spalten. */
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 24px;border-top:1px solid #374151;padding:20px 0 36px;font-size:14px;color:var(--onink)}
.foot__legal a{color:var(--onink);border:0}
/* ===== v4 Overrides ===== */
/* Eckdaten quer in einer Zeile (Variante D) */
/* So viele Spalten wie Eintraege — bei drei Eckdaten endet die Linie sonst bei 75 %. */
@media(min-width:760px){.facts--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.facts--row>div{display:block;border-bottom:1px solid var(--line2);border-left:1px solid var(--line2);padding:14px 20px 16px}
.facts--row>div:first-child{border-left:0;padding-left:0}
.facts--row dt{margin-bottom:8px}}
/* Fotos: Original, kein Overlay */
.duo{overflow:hidden}
.duo img{filter:none}
/* Filzstift: Notizen (.note) und Team-Unterschrift (.sign) sind IMMER
Magenta — die Stimme des Vereins in Vereinsfarbe (03.09.2026). */
.note{display:inline-block;font-family:'Permanent Marker',cursive;font-size:clamp(19px,2.2vw,24px);line-height:1.25;transform:rotate(-2.5deg);color:var(--magenta)}
.note--sm{font-size:17px}
.sign{display:inline-block;font-family:'Permanent Marker',cursive;font-size:clamp(18px,2vw,22px);color:var(--magenta);transform:rotate(-1.5deg)}
.und{position:relative;white-space:nowrap}
.und::after{content:"";position:absolute;left:-2px;right:-5px;bottom:-3px;height:3px;background:var(--magenta);border-radius:3px 2px 3px 2px;transform:rotate(-.7deg)}
/* Publikumsstimmen */
.voices{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media(min-width:780px){.voices{grid-template-columns:1fr 1fr 1fr}}
.voices li{border-top:3px solid var(--magenta);padding-top:14px}
.voices p{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(17.1px,2.2vw,18.4px);line-height:1.25;letter-spacing:-.015em}
.voices footer{margin-top:10px}
.duo~figcaption{background:#fff;position:relative}
.headblock{padding-top:22px}
.headblock .h-display{font-size:clamp(28.8px,4.6vw,48px)}
/* Kontaktseite: bisher als style="" im Markup. Als Klassen sind sie an
einer Stelle aenderbar und stehen anderen Seiten offen. */
.headblock--schmal{max-width:920px}
.headblock__titel{margin:20px 0 0}
.headblock__sub{margin:14px 0 0;max-width:56ch}
/* Die FAQ-Seite hatte bis 18.10.2026 eine eigene Klappliste (.faq__*).
Sie war Zeile für Zeile dieselbe wie .frage — derselbe Pfeil, dieselbe
Schrift, dieselben Abstände — nur anders benannt, weil die
Kachel-Rückverwandlung am Desktop bei .frage nicht gelten durfte.
Dafür genügt ein Modifikator. Jetzt gibt es eine Klappliste im ganzen
Theme, auf acht Vorlagen, und die FAQ-Seite ist ihre Raster-Variante.
Mobile first: hier der Klapp-Zustand (wie überall), im min-width-Block
darunter die Kachel. Ohne JavaScript bleibt alles offen, also genau
die Darstellung von vorher. */
.fragen--raster{gap:0}
/* Im Raster trennt eine Oberlinie, in der Liste eine Unterlinie — sonst
hängt am Ende des Rasters eine Linie ohne Inhalt darunter. */
.fragen--raster .frage{border-bottom:0;border-top:1px solid var(--line)}
.fragen--raster .frage:first-child{border-top:0}
@media(min-width:780px){
/* Zurück zum Kachelraster: Masse und Linien wie .cell / .grid2. */
.fragen--raster{gap:40px}
.fragen--raster .frage,.fragen--raster .frage:first-child{border-top:1px solid var(--line2);padding-top:16px}
/* Keine Klapp-Geste mehr: kein Zeiger, kein Pfeil, kein Hover. */
.fragen--raster .frage>summary{display:block;cursor:default;padding:0;min-height:0;gap:0}
.fragen--raster .frage>summary::after{display:none}
.fragen--raster .frage>summary:hover .frage__q{color:var(--ink)}
.fragen--raster .frage__q{font-size:clamp(17.1px,2.2vw,19.2px);line-height:1.15;margin:0 0 8px}
.fragen--raster .frage__a{padding:0}
}
/* Sponsoren-Dank (15.10.2026): „Danke.“ ist die Überschrift, nicht mehr
eine Kickzeile darüber. Eine Stufe größer als die übrigen
Abschnittstitel, weil das Wort die Würdigung trägt. Darunter klein die
Zeile, die zu den Logos überleitet. */
.danke{font-size:clamp(28.8px,4.6vw,43.2px);line-height:1}
.danke__zu{margin:12px 0 22px;font:500 16px/1.5 var(--sans);color:var(--ink2);max-width:46ch}
.danke__hin{margin:-10px 0 22px;font-size:15px;line-height:1.55;color:var(--ink2);max-width:58ch}
.faq__ende{max-width:620px;margin-inline:auto;text-align:center}
.faq__ende-titel{font-family:var(--serif);font-size:clamp(23.4px,3.4vw,30.4px);line-height:1.15;color:var(--magenta);margin:0;text-wrap:balance}
.faq__ende .faq__mehr{margin:14px auto 0;max-width:44ch}
.faq__ende .faq__wege{justify-content:center;margin-top:22px;gap:10px 24px}
/* Deutlich groesser als der Standard-Knopf (56px / 16-28px / 14.5px) —
er ist die einzige Handlung am Seitenende und soll das auch aussehen.
Am Handy volle Breite: dort ist ein durchgehender Knopf das klarste
Tippziel, und der Block ist ohnehin nur eine Spalte breit. */
.faq__taste{min-height:64px;padding:20px 40px;font-size:15.5px;margin-top:26px}
@media(max-width:759px){
.faq__taste{min-height:56px;padding:17px 24px;font-size:13.5px;width:100%}
}
/* Video-Platzhalter (inc/video-embed.php): laedt erst nach Klick,
vorher keine Verbindung zu YouTube/Vimeo. Eigene Styles, kein Tailwind. */
.kvideo-placeholder{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;width:100%;background:var(--ink);padding:32px 16px;text-align:center}
.kvideo-placeholder__hint{margin:0;font:500 13.5px/1.5 var(--sans);color:var(--onink);max-width:38ch}
.kvideo-placeholder__button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:0;font:600 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer}
.kvideo-placeholder__extern{font:500 12.5px/1.4 var(--sans);color:var(--onink);text-decoration:underline;text-underline-offset:3px}
.kvideo-placeholder__extern:hover{color:#fff}
/* --- Einwilligungs-Banner (Consent-Tool, inc/consent.php) ---------------
Gleicher Look wie die Seite: weisser Kasten, 3px Linie, keine Radien.
z-index 80 liegt ueber der Sticky-Ticketleiste (60), damit der Banner
nicht verdeckt wird. Unten links begrenzt, damit die Seite lesbar bleibt. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:0 12px 12px}
@media(min-width:900px){.cc{right:auto;max-width:600px;padding:0 0 20px 20px}}
.cc__box{background:var(--paper);border:3px solid var(--ink);padding:22px 20px 18px;box-shadow:0 -6px 0 rgba(17,24,39,.06);max-height:min(84vh,660px);overflow:auto;overscroll-behavior:contain}
@media(min-width:900px){.cc__box{padding:26px 26px 20px}}
.cc__titel{font-size:clamp(21px,3vw,26px);margin:0 0 10px}
.cc__text{font-size:15px;line-height:1.55;color:var(--ink2);margin:0 0 16px}
/* Kurze Fassung nur auf dem Handy (05.09.2026): der lange Text war dort
acht Zeilen und verdeckte den Ticketkasten. */
.cc__kurz{display:none}
@media(max-width:759px){.cc__lang{display:none}.cc__kurz{display:inline}}
.cc__text a{color:var(--ink);text-underline-offset:3px}
.cc__wahl{border-top:1px solid var(--line2);margin:0 0 16px}
.cc__zeile{border-bottom:1px solid var(--line);padding:12px 0}
.cc__label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.5;color:var(--ink2);cursor:pointer}
.cc__label input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--magenta)}
.cc__label b{color:var(--ink);font-weight:700}
/* Beide Knoepfe gleich gross und gleich betont — Vorgabe fuer eine
freiwillige Einwilligung (kein „Dark Pattern“). */
.cc__knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc__btn{width:100%;min-height:52px;padding:14px 18px;font-size:13.5px}
.cc__mehr{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;margin:14px 0 0;font-size:13.5px;color:var(--ink2)}
.cc__mehr a{color:var(--ink2)}
.cc__link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc__link--speichern{font-weight:700}
/* Widerruf-Knopf im Fuss: sieht aus wie die Links daneben. */
.foot__cc{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--onink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot__cc:hover{color:#fff}
/*
* Tippziele am Handy: Social, Rechtliches und der Cookie-Knopf sind
* eigenstaendige Ziele und bekommen die vollen 44 px.
*/
@media(max-width:779px){
.foot__ich .small a,.foot__legal a,.foot__cc{display:inline-flex;align-items:center;min-height:44px}
/* Am Handy sitzt der Satz in der zugeklappten Gruppe — er braucht dort
etwas Luft nach unten, sonst klebt er am Rand der Klappliste. */
.foot__a11y{margin:12px 0 4px}
/* Erst die drei Links in einer Reihe, das Copyright darunter: mit den
44-px-Zielen brach die gemischte Zeile sonst an zufaelligen Stellen. */
.foot__legal{align-items:center;gap:0 20px}
.foot__legal>span{flex:0 0 100%;order:2;margin-top:6px}
}
/* ---------------------------------------------------------------
Rueckblick: Statusband, Presseschau, Vollbild-Galerie
--------------------------------------------------------------- */
/* Statusband: sagt in einer Zeile, woran man ist. Ohne dieses Band
wirkt eine Seite ohne Ticketknopf wie ein Fehler. */
.statusband{margin:30px 0 0;padding:14px 18px;background:var(--calm2);border-left:4px solid var(--ink);font-size:15.5px;line-height:1.5;color:var(--ink2)}
.statusband b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);letter-spacing:-.02em}
.statusband--stop{background:#FDF2F2;border-left-color:var(--rot)}
.statusband--stop b{color:var(--rot)}
.statusband--warte{border-left-color:var(--line2);color:var(--ink2)}
/* Hinweis auf die Vereinskanaele. Textlinks, keine Social-Symbole — das
Programmheft-Design kennt Farbe als Strich, nicht als Flaeche. Die Links
sitzen im Satz, daher ohne 44-px-Flaeche (WCAG 2.5.8 nimmt Links im
Fliesstext aus). */
.folgen{margin:22px 0 0;font-size:15px;line-height:1.55;color:var(--ink2)}
/* Block-Fassung unter der Galerie: Satz zentriert, Knoepfe darunter. */
.folgen__satz{margin:0;text-align:center;font-size:16px;line-height:1.5;color:var(--ink2)}
.folgen:has(.folgen__tasten){margin-top:30px}
/* :not(.btn) ist Pflicht, nicht Kosmetik: „Klasse + Element“ (0,1,1)
schlaegt die reine .btn-Klasse (0,1,0) — ohne die Ausnahme bekaemen
die Kanal-Knoepfe unter der Galerie schwarze Schrift und eine
Unterstreichung. Derselbe Fehler wie beim Ticket-Knopf im Kopf. */
.folgen a:not(.btn),.statusband a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--magenta)}
.folgen a:not(.btn):hover,.statusband a:hover{color:var(--magenta-d);box-shadow:inset 0 -2px 0 var(--magenta-d)}
/* Im schwarzen Kasten muessen die Links hell sein. */
/* „Dieser Abend ist vorbei“ mit Verweis auf den naechsten Termin: der einzige
Kasten, der von hier aus weiterfuehrt — deshalb in der Vereinsfarbe. */
/*
* „Als Naechstes“ auf einer Rueckblick-Seite (Variante A3, 10.09.2026).
* Loest den Kasten „Dieser Abend ist vorbei“ ab: dieselbe Sprache — heller
* Grund, Magenta-Kante —, aber ohne die Absage als Ueberschrift, und mit
* dem Datumsblock aus der Terminliste. Rund 130 px statt 182.
*/
/* „Als Nächstes“ als Balken unter dem zweispaltigen Kopf — Entwurf 1
(„Zeitungszeile“), Entscheidung Marcus 15.10.2026.
Drei Fassungen hat es gebraucht, darum hier der Grund für jede Regel:
1. Erst ein Kasten mit linker Magentakante auf 560 px. Er sass neben den
Eckdaten DIESES Abends und las sich wie eine weitere davon.
2. Dann über die ganze Breite, mit Pfeil per margin-left:auto am rechten
Rand — auf 1.060 px rund 700 px vom Titel entfernt, ohne Bezug.
3. Dann getönte Fläche statt Linien: Ein Kasten wirkt auf einer Seite,
die mit Linien und Typografie arbeitet, aufgeklebt („billig“).
Jetzt: eine Linie, ein grosser Serif-Titel, der Pfeil unmittelbar
dahinter, das Datum als lesbarer Satz darunter. Die Linie spannt sich
über die Breite, der Inhalt bleibt links — Breite durch Gliederung,
nicht durch Strecken. */
/* Die .naechster-Regeln der Abendseite sind am 15.10.2026 entfallen —
der Hinweis steht jetzt im Header (.mast__naechst, weiter oben). */
/* Presseschau: nur Verweise. Ein eingescannter Artikel waere eine
Urheberrechtsverletzung — Text, Layout und Fotos sind geschuetzt. */
.presse{list-style:none;margin:0;padding:0;display:grid;gap:0}
.presse li{border-top:1px solid var(--line);padding:14px 0}
.presse li:last-child{border-bottom:1px solid var(--line)}
.presse__meta{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);margin-bottom:5px}
/* Traegt die Meta-Zeile die ganze Zeile — weil die Schlagzeile oben
schon gross steht —, ist sie keine Fussnote mehr: dunkler, fetter,
etwas groesser und mit mehr Luft darunter. */
.presse__meta--stark{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:0}
.presse__meta a{font:inherit;color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.presse__meta a:hover{color:var(--ink)}
.presse__titel{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(16.2px,2.1vw,17.6px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
/* Anriss: ein Satz, damit auch eine Zeile ohne Scan traegt. */
.presse__anriss{display:block;margin-top:7px;font-size:15.5px;line-height:1.5;color:var(--ink2);max-width:62ch}
/* Handlungszeile: gedruckt und online sehen absichtlich gleich aus. */
.presse__wege{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.presse__wege a{font:600 14px/1.4 var(--sans);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
/* Bildliche Vorschau: unser eigenes Foto des Abends. NIE die Zeitungsseite
— auch eine Miniatur waere eine Vervielfaeltigung des Artikels. */
.presse--bild li,.presse--scan li{display:flex;gap:18px;align-items:flex-start}
.presse__bild{flex:none;width:88px;aspect-ratio:4/3;overflow:hidden}
.presse__bild img{width:100%;height:100%;object-fit:cover;display:block}
.presse__text{min-width:0}
/* Scan eines Zeitungsartikels: Inhalt, kein Schmuck — anklickbar,
hoeher als das Foto-Format, weil eine Zeitungsseite hochkant ist. */
.presse__bild--scan{width:88px;aspect-ratio:3/4;border:1px solid var(--line2)}
.presse__bild--scan a{display:block;width:100%;height:100%;cursor:zoom-in}
.presse__bild--scan img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(min-width:700px){.presse__bild--scan{width:118px}}
.presse__urheber{display:block;margin-top:8px;font:500 12.5px/1.5 var(--sans);color:var(--ink2)}
@media(min-width:700px){.presse--bild li,.presse--scan li{gap:24px}.presse__bild{width:132px}}
.presse__jahr+.presse__jahr{margin-top:38px}
/* Festivalseite, 15.10.2026 (Marcus) — drei Stellen.
1. Presse-Jahrgaenge klappen auf. Die Jahreszahl steht in der
, darum muessen h3 und Zaehler dort in einer Zeile sitzen;
der Pfeil ist derselbe wie bei .frage und .klapp.
2. Das Festival-Logo traegt den Wiedererkennungswert — von 620 auf
880 px, Inline-Stil abgeloest.
3. Die Rueckblick-Abende standen mit auto-fit ab 190 px zu fuenft in
einer Reihe und wurden winzig. Jetzt ein festes Raster. */
.presse__jahr h3{font-size:clamp(18.9px,2.4vw,20.8px);margin:0}
details.presse__jahr{margin:0;border-top:1px solid var(--line2)}
details.presse__jahr:first-of-type{border-top:0}
details.presse__jahr>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;padding:16px 0;min-height:48px}
details.presse__jahr>summary::-webkit-details-marker{display:none}
.presse__jahr-n{font:600 13px/1.3 var(--sans);letter-spacing:.06em;color:var(--ink2)}
details.presse__jahr>summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;
border-right:2px solid var(--lila);border-bottom:2px solid var(--lila);
transform:rotate(45deg);transition:transform .15s ease;align-self:center}
details.presse__jahr[open]>summary::after{transform:rotate(225deg)}
details.presse__jahr>summary:hover h3{color:var(--lila-d)}
details.presse__jahr[open]{padding-bottom:10px}
@media(prefers-reduced-motion:reduce){details.presse__jahr>summary::after{transition:none}}
/* Festival-Logo */
/* Zweite Runde (Marcus): Das Logo laeuft ueber die ganze Breite und
steht ganz oben im Rueckblick — kein max-width mehr. Es ist dort die
eigentliche Ueberschrift des Abschnitts. */
.sf-logo{display:block;width:100%;height:auto;margin:0 0 22px}
/* Die Textzeile unter dem Logo sagt dasselbe noch einmal — fuer
Screenreach, Suchmaschinen und die Gliederung. Sie darf darum kleiner
sein als eine normale Abschnittsueberschrift. */
.shead--unterm-logo h2{font-size:clamp(17.1px,2vw,19.2px)}
/* Satz ueber den naechsten Terminen im Abschnitt „In den Jahren
dazwischen". Negativer oberer Abstand, weil die .shead schon 28 px
nach unten gibt. */
/* Rueckblick-Abende: feste Spalten statt auto-fit */
.sf-abende{grid-template-columns:1fr}
@media(min-width:560px){.sf-abende{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.sf-abende{grid-template-columns:repeat(3,1fr)}}
/* Die Abende des letzten Festivals. Bild, Datum, Name, Programmtitel —
das stand bis zum 03.11.2026 mit SECHS Inline-Stilen im Markup, und
darunter war eine 3-px-Oberlinie in Schwarz.
Genau die Linie, die am 16.10.2026 themeweit rausgeflogen ist
(Marcus: „Diese dicken schwarzen Striche ueberall rausnehmen, auch
zwischen den Bloecken."). Sie hat ueberlebt, weil sie inline stand
und nicht in dieser Datei — eine Suche nach .rule3 oder border-top
in der CSS findet so etwas nie. Jetzt traegt der Abstand allein.
Alles hier haengt unter .sf-abende und wirkt damit nur auf dieser
Seite. */
.sf-abende figure{margin:0}
.sf-abende .duo{display:block}
.sf-abende img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sf-abende figcaption{margin-top:11px}
.sf-abende .kick{display:block;margin:0 0 4px}
.sf-abende__titel{display:block;font-family:var(--serif);font-weight:600;font-size:19px;
letter-spacing:-.015em;line-height:1.25}
/* Der Name verlinkt den Abend, hatte aber keinerlei Rueckmeldung beim
Darueberfahren — als einziger Titel-Link der Website. Jetzt wie in
der Terminliste und auf dem Plakat. */
.sf-abende__titel a{color:var(--ink);text-decoration:none}
.sf-abende__titel a:hover{color:var(--magenta);text-decoration:underline;
text-decoration-thickness:2px;text-underline-offset:4px}
.sf-abende .credit{display:block;padding-top:2px}
/* Impressionen: kleine Fotowand, darf enger laufen als die Abende
darueber — dort sind drei Spalten das Maximum, hier fuellen die
Bilder die Breite. Stand als Inline-Stil am .grid3. */
/* Kopfzeile der Impressionen. Eine Ebene unter der Abschnitts-
ueberschrift, darum h3 und kein Magenta — und mit Luft nach oben, weil
die Abende-Kacheln direkt darueber enden. */
.sf-impr__kopf{margin-top:44px}
/* Stichpunkte „Das erwartet euch“ — ueberfliegbar, ohne Listenpunkte. */
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:70ch}
.punkte li{position:relative;padding:13px 0 13px 30px;border-top:1px solid var(--line);font-size:17px;line-height:1.5}
.punkte li:last-child{border-bottom:1px solid var(--line)}
.punkte li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:3px;background:var(--rot)}
.punkte--fest li::before{background:var(--lila)}
.punkte--jazz li::before{background:var(--orange)}
.punkte--verein li::before{background:var(--magenta)}
/* Vollbild-Galerie. Der Auszeichnungs-Aufbau kommt aus site.js. */
/* Gleich hohe Kacheln: Fotos vom Abend haben gemischte Formate, ohne
festes Verhaeltnis wird das Raster unruhig. */
/* Rueckblick-Galerie „Bilder vom Abend" (04.09.2026).
Bis 03.11.2026 stand hier ein Raster aus sechs Spalten, in dem jedes
Bild eine eigene Spalten- und Zeilenspanne bekam (Hochformat 1x3,
Querformat 2x2, Anker 3x3). Zwei verschiedene ZEILENhoehen in einem
Raster heisst aber: die Spalten wachsen unterschiedlich schnell, und
wo eine vorauseilt, bleibt eine Zelle offen. Gemessen an den echten
Galerien: Carmina Burana 6 freie Zellen mitten im Block,
Kammerorchester 1. Weggeregelt bekommt man das nur mit einer
einzigen Zeilenhoehe fuer alle — und das ist .gal--ras.
Die Galerie hat jetzt also zwei Formen und keine dritte:
.gal--ras gleichmaessiges Raster bei einheitlichen Formaten
.gal--mosaik ausgeglichener Zeilensatz bei gemischten
.gal selbst ist nur noch die gemeinsame Grundlage beider. */
/* Die Abfrage haengt an der Huelle, nicht am Raster: ein Container kann
seine EIGENE @container-Abfrage nicht beantworten — nur Nachfahren.
.gal--mosaik rechnet seine Reihenhoehe in cqw daraus. */
.gal-h{container-type:inline-size}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* Am Handy zeigt die Galerie erst acht Bilder (Entscheidung Marcus,
10.09.2026) — sie war dort 2.340 px hoch, ein gutes Drittel der Seite.
Ab 780 px stehen wieder alle da, dann ist der Knopf ueberfluessig. */
.gal--kurz .gal__spaet{display:none}
.gal__mehr{margin-top:18px}
@media(min-width:780px){
.gal--kurz .gal__spaet{display:block}
.gal__mehr{display:none}
}
/* Wenige Bilder: gleichmaessiges Raster statt Mosaik (Entscheidung Marcus,
04.09.2026). Kachelformat nach der Mehrheit des Abends — so verliert
nur die Minderheit etwas. */
.gal--ras{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:14px}
/* Das Rasterformat liefert single-event.php als --ras-ar (Median der
Querformate). 3/2 bleibt der Rueckfall, wenn keine Bildmasse
vorliegen — bei 16:9-Aufnahmen hiesse 3:2 acht Prozent Beschnitt
auf jeder Seite. */
.gal--ras .gal__k{aspect-ratio:var(--ras-ar,3/2)}
.gal--ras-hoch .gal__k{aspect-ratio:2/3}
@media(min-width:620px){.gal--ras{grid-template-columns:repeat(3,1fr);gap:20px}}
/* Kein Container-Query im Browser? Dann greift ein schlichtes Raster. */
@supports not (container-type:inline-size){
.gal{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.gal__k{aspect-ratio:3/2}
}
.gal[data-lightbox] a{display:block;cursor:zoom-in;width:100%;height:100%;
overflow:hidden;background:var(--calm2)}
/* Effekt „Ruhig heranholen" (Entscheidung Marcus, 04.09.2026): das Bild
waechst im Rahmen, der Rahmen bleibt stehen. */
.gal[data-lightbox] a img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .4s ease}
.gal[data-lightbox] a:is(:hover,:focus-visible) img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
.gal[data-lightbox] a img{transition:none}
.gal[data-lightbox] a:is(:hover,:focus-visible) img{transform:none}
}
/* Mosaik mit buendiger Kante — 03.11.2026 (Marcus: „die Galerie wieder
als Mosaik anordnen, aber so, dass unten auch buendig ueberall passt
und nicht irgendwie eine Luecke ist", und einen Tag spaeter fuer ALLE
Mosaikgalerien: „dass da keine Loecher sind").
Gilt seit 03.11. fuer beide Stellen im Theme: die Impressionen der
Sommerfestivalseite und die Bilder vom Abend auf den Abendseiten.
Warum das alte Raster-Mosaik Luecken liess, steht oben am .gal —
kurz: zwei verschiedene Zeilenhoehen in einem Raster lassen die
Spalten unterschiedlich schnell wachsen, und grid-auto-flow:dense
kann nur umsortieren, was passt.
Hier steht deshalb kein Raster, sondern was im Zeitungssatz eine
ausgeglichene Zeile ist: Jede Reihe ist eine Flex-Zeile, und jede
Kachel bekommt Grundbreite UND Wachstum im Verhaeltnis ihres
Seitenverhaeltnisses (--ar, aus den Bildmassen, gesetzt in der
Vorlage).
Daraus folgt beides, was gefordert war:
Breite_i = ar_i * (H + Rest/Summe(ar)) — also exakt proportional,
damit ist die Hoehe in einer Reihe fuer alle Kacheln gleich,
und jede Reihe fuellt die Breite vollstaendig aus. Auch die
letzte: keine Luecke unten.
Die Bilder werden dabei NICHT beschnitten — die Kachel nimmt das
Verhaeltnis des Bildes an. Nur wenn die letzte Reihe sehr wenige
Bilder traegt, wuerde sie sehr hoch; dagegen die Deckelung, und dann
greift object-fit:cover. */
/* Ausgeglichener Zeilensatz. --gal-zeile ist die Reihenhoehe, aus der
jede Kachel ihre Grundbreite zieht. Sie ist nicht fest gesetzt, sondern
gerechnet: genau --gal-spalten Bilder im breitesten vorkommenden Format
passen in eine Reihe. Alles schmalere passt dann von selbst, und zwar
mit mehr Bildern — darum bleibt keine Reihe mit nur einem Bild uebrig.
Ein fester Wert kann das nicht: 180 px waren bei 1000 px Fenster
richtig und bei 620 px zu hoch, dort stand dann ein Bild allein in der
Reihe. Rechengroesse ist 100cqw — die Breite der Galerie selbst, denn
der Innenabstand der .wrap aendert sich ueber die Haltepunkte;
.gal-h ist dafuer schon Abfragebehaelter.
Der Teiler ist 1.9 und nicht 1.7778 (also 16:9), obwohl 16:9 das
breiteste uebliche Format ist. Grund: eine Kamera liefert nicht exakt
16:9. Die Bilder vom Abend messen 2000x1124 — das sind 1.7794. Mit
dem exakten Teiler passten vier Kacheln dann um 0,9 px nicht mehr in
die Reihe, und Flex ruecke eine davon nach unten: bei 860 px standen
48 Bilder in 42 Reihen, also fast jedes allein. 1.9 laesst rund fuenf
Prozent Luft; die Kacheln werden dadurch kaum kleiner, aber die
Reihenzahl stimmt wieder. */
.gal--mosaik{display:flex;flex-wrap:wrap;--gal-luft:10px;--gal-spalten:2;
gap:var(--gal-luft);
--gal-zeile:calc((100cqw - (var(--gal-spalten) - 1) * var(--gal-luft))
/ (var(--gal-spalten) * 1.9))}
@media(min-width:620px){.gal--mosaik{--gal-luft:14px}}
@media(min-width:900px){.gal--mosaik{--gal-spalten:3}}
@media(min-width:1200px){.gal--mosaik{--gal-spalten:4}}
/* Rueckfall fuer Browser ohne Behaelterabfragen (Safari vor 16). Feste
Werte, bewusst niedrig gewaehlt, damit auch dort zwei Bilder je Reihe
stehen. */
@supports not (container-type:inline-size){
.gal--mosaik{--gal-zeile:calc((100vw - 50px) / 3.8)}
@media(min-width:620px){.gal--mosaik{--gal-zeile:calc((100vw - 54px) / 3.8)}}
@media(min-width:900px){.gal--mosaik{--gal-zeile:150px}}
@media(min-width:1200px){.gal--mosaik{--gal-zeile:175px}}
}
.gal--mosaik .gal__k{
flex:var(--ar,1.5) 1 calc(var(--ar,1.5) * var(--gal-zeile));
aspect-ratio:var(--ar,1.5);
min-width:0;margin:0;
/* Deckel fuer die Schlusszeile. Bleibt am Ende ein einzelnes Bild
uebrig, verteilt Flex den ganzen Rest darauf und die Kachel wuerde
so hoch wie ein Aufmacher. Der Deckel haelt sie auf 100cqw/2.4 —
die Schlusszeile ist damit an jeder Fensterbreite dasselbe ruhige
Panoramaband (2,4:1) und nicht einmal ein Riesenbild, einmal ein
duenner Streifen. Der zweite Wert fangt den anderen Fall ab: traegt
die Schlusszeile zwei Bilder, reicht 100cqw/2.4 am Desktop nicht als
Bremse — die Reihe stuende dann dreimal so hoch wie die darueber.
1,5 x Reihenhoehe haelt sie in der Flucht. Es gilt der kleinere der
beiden Werte. Normale Reihen bleiben unter beiden und damit
unberuehrt; nur in der Schlusszeile greift object-fit:cover. */
max-height:min(var(--gal-zeile) * 1.5, 100cqw / 2.4)}
.lb{position:fixed;inset:0;z-index:200;background:rgba(17,24,39,.94);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px)}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb__fig img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.lb__fig figcaption{font:500 14px/1.5 var(--sans);color:var(--onink);text-align:center;max-width:60ch}
.lb__fig figcaption:empty{display:none}
.lb button{background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;font:400 30px/1 var(--sans);width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb__x{position:absolute;top:12px;right:12px}
.lb__nav{flex:none;align-self:center}
.lb__zaehler{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--onink)}
@media(max-width:640px){.lb__nav{position:absolute;bottom:52px}.lb__nav--vor{left:12px}.lb__nav--zur{right:12px}}
/* ===============================================================
Startseite Runde 3 (03.09.2026): Held mit drei Zustaenden,
Festival-Block, Rueckblick-Karussell, „Schon bei uns“, Karten.
Mockup: Artefakt „Startseite Komplett“.
=============================================================== */
/* Gerahmtes Foto: Rahmen nur ums Bild, Vereinsfotos Magenta, Veranstaltungs-
fotos in der Reihen-Farbe. Bildunterschriften bleiben im Backend; sichtbar
ist nur der Fotografen-Credit als Ecke — und nur bei Fremdfotografen. */
.foto{position:relative;display:block;border:3px solid var(--magenta);background:var(--calm2);overflow:hidden}
.foto--fest{border-color:var(--lila)}.foto--jazz{border-color:var(--orange)}.foto--einzel{border-color:var(--rot)}.foto--verein{border-color:var(--magenta)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto--169{aspect-ratio:16/9}
/* 4:3 fuer das Vereinsfoto: Es steht neben dem Text wie das
Festivalfoto darueber — das andere Format und der Rahmen halten
die beiden Bloecke auseinander. */
.foto--43{aspect-ratio:4/3}
.foto--auf{aspect-ratio:21/9}
@media(max-width:759px){.foto--auf{aspect-ratio:16/9}}
.foto__credit{position:absolute;right:0;bottom:0;font:500 11px/1.2 var(--sans);letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px}
/* „Foto:“ vor dem Namen — im Bild ueberfluessig, vorgelesen und in der
Textfassung der Seite noetig (siehe kmt_credit_ecke()). */
.nurlese{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}
/* Bildunterschriften ausblenden (Mediathek behaelt sie). Der Fotografen-
Credit steht als Ecke im Bild (.foto__credit) — die Datenschutzerklaerung
sagt die Nennung am Bild zu. Die Festivalseite nutzt figcaption als
Textblock unter dem Bild, deshalb greift die Regel nur fuer .credit. */
body.home main figcaption,main figcaption.credit{display:none}
.foto-k{position:relative}
.foto--11{aspect-ratio:1/1}
/* Nur am Desktop: zweiter Link in der Kopfzeile (mobil zu nah am Held-Link). */
@media(max-width:759px){.nur-desktop{display:none}}
/* Held: Bild links, Text rechts — Kicker immer in der Textspalte. */
.held{display:grid;gap:22px;padding-top:22px;align-items:center}
@media(min-width:900px){.held{grid-template-columns:7fr 5fr;gap:36px}}
.held h1{font-size:clamp(27px,3.4vw,33.6px);margin:0}
.held .kick{margin:0 0 12px}
.held__meta{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--ink2)}
.held__meta b{font-weight:500;color:var(--ink)}
.held__unter{margin:10px 0 0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(18px,2.4vw,22.4px);line-height:1.2;letter-spacing:-.02em}
.held__note{margin:16px 0 0}
.held__lead{max-width:60ch;font-size:clamp(16px,1.6vw,18px);line-height:1.55;color:var(--ink2);margin:12px 0 0}
/* Einfuehrungsabsatz unter einer Ueberschrift. Derselbe Absatz war am
18.10.2026 in 17 Schreibweisen als Inline-Stil im Theme verteilt
(660px und 62ch sind bei 16px dasselbe Mass, nur anders geschrieben).
Ein Baustein, drei Groessen:
.lead Grundfall unter der Abschnittsueberschrift
.lead--gross erster Absatz eines Abschnitts, der traegt
.lead--klein Nebensatz, Hinweis, Fussnote
.lead--nach steht NACH dem Inhalt statt davor */
.lead{color:var(--ink2);max-width:62ch;line-height:1.6;margin:0 0 26px}
.lead:last-child{margin-bottom:0}
.lead--gross{font-size:clamp(16px,1.6vw,18px)}
.lead--klein{font-size:15.5px;max-width:52ch}
.lead--nach{margin:18px 0 0}
/* Als Liste: dieselbe Farbe, Breite und Laufweite wie ein Fuehrungsabsatz,
nur mit Aufzaehlungszeichen. Bisher auf der Barrierefreiheitsseite mit
fuenf Werten inline gesetzt. */
.lead--liste{padding-left:20px}
/* Fuehrungsabsatz direkt unter einer Abschnittsueberschrift. .shead traegt
22 px nach unten — das ist der Abstand zwischen zwei Bloecken, nicht der
zwischen Ueberschrift und zugehoerigem Satz. Drei Stellen holten ihn
bisher per margin:-14px zurueck, vier andere nicht; derselbe Fall sah
also unterschiedlich aus. Jetzt ueberall 8 px, ohne Zutun im Markup.
(03.11.2026) */
.shead + .lead{margin-top:-14px}
/* Kartenstand im Kopf, solange es keine Ticket-Adresse gibt. Leise Zeile
mit Kante — sie informiert, sie ruft nicht auf. */
.held__karten{margin:18px 0 0;padding:2px 0 2px 14px;border-left:3px solid var(--magenta);font-size:15px;line-height:1.5;color:var(--ink2);max-width:46ch}
.held__karten b{display:block;font:700 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
/* Eckdaten in der rechten Kopfspalte: schmalere Beschriftung, und die
Zusatzzeile steht unter dem Wert statt daneben — eine Anschrift neben
dem Ortsnamen liest sich sonst als ein Wortschwall. */
.held__daten{margin:24px 0 0}
.held__daten>div{grid-template-columns:76px 1fr;gap:12px;padding:12px 0}
.held__daten dd small{display:block;margin-left:0;margin-top:2px}
/* Kopf ohne Foto (Textseiten): eine Spalte, Ueberschrift in Schaugroesse. */
.held--text{grid-template-columns:1fr}
@media(min-width:900px){.held--text{grid-template-columns:1fr}}
.held--text .held__text{max-width:920px}
/* Der Textkopf traegt die Seite ohne Bild, darf also etwas groesser sein
als ein Kopf mit Foto (33,6 px) — aber nicht viel. Bis 03.11.2026
waren es 60 px. */
.held--text h1{font-size:clamp(27px,3.8vw,38px)}
/* Kopfbloecke ohne Foto (Runde 4): Kicker statt Rahmen-Tag. */
.headblock .kick{margin:0 0 12px}
/* Zustand 3: Aufmacher in voller Breite, Text darunter. */
.held--auf{grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.held--auf{grid-template-columns:1fr}}
.held--auf h1{font-size:clamp(27px,4vw,38.4px)}
/* Festival-Block: Foto oben ueber die volle Breite, darunter der
Programmheft-Aufbau der uebrigen Seite (.h2l, duenne Linien, Serif-
Zahlen). Bis 07.09.2026 war das ein dunkles Vollbild-Plakat mit einem
violetten Stoerer-Kaestchen (.kick--fl) — die Klasse kam auf der
ganzen Website nur an dieser einen Stelle vor und war damit ein
Fremdkoerper. Ersetzt durch den violetten Strich unter dem Foto, das
Erkennungszeichen aus dem Rueckblick-Karussell.
Die 3-px-Oberlinie trennt vom Rueckblick darueber, der ebenfalls mit
Bildern endet. */
/* Die 3-px-Oberlinie ist am 14.10.2026 entfallen: Sie trennte den
Festival-Block vom Rueckblick darueber. Zwischen beiden steht jetzt der
„Bleib dran“-Kasten und uebernimmt die Trennung. */
/* Kein eigener Aussenabstand mehr: Der Block nimmt dasselbe Polster wie
jeder .sec-Abschnitt, damit die Uebergaenge davor und danach gleich
sind wie ueberall sonst. */
.fest{background:var(--paper)}
/* 14.10.2026: Foto neben den Text statt randlos darueber. Die feste Hoehe
von 200 px ergab bei voller Fensterbreite 6,4:1 — ein Streifen, auf dem
nichts zu erkennen war. Jetzt 16:9 in halber Spaltenbreite. Die
Zentrierung des Ausschnitts steht wieder auf der Mitte; die 62 % waren
eine Notkorrektur fuer das flache Format. */
.fest__raster{display:grid;gap:24px;padding:var(--sec-y) 0}
@media(min-width:900px){
.fest__raster{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
/* Bild steht im Quelltext zuerst (Handy: oben), hier nach rechts. */
.fest__innen{order:1}
.fest__bild{order:2}
}
.fest__bild{display:block}
.fest__foto{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;
border-bottom:5px solid var(--lila);background:var(--calm2)}
.fest h2{margin-bottom:20px}
/* Im Raster soll die Ueberschrift mit der Bildoberkante fluchten. */
@media(min-width:900px){.fest__innen>:first-child{margin-top:-6px}}
.fest p{color:var(--ink2);margin:0 0 24px;max-width:56ch}
/* Jahresleiste: die Ausgaben als Zeitachse. 2028 traegt den gelben
Akzent — es ist das, worauf es hinauslaeuft; der zuletzt gelaufene
Jahrgang bleibt als ruhige Referenz daneben stehen. */
.jahre{display:flex;align-items:flex-end;flex-wrap:wrap;margin:0 0 22px;
border-top:1px solid var(--line2);padding-top:14px;font-variant-numeric:tabular-nums}
.jahre__davor,.jahre__paar{display:flex;align-items:flex-end}
.jahre__j{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1;
color:var(--ink2);padding:0 14px 0 0}
.jahre__lab{display:block;font:700 9.5px/1 var(--sans);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.jahre__pfeil{color:var(--line2);padding:0 14px 2px 0;font-size:15px}
.jahre__j--war{font-size:21px;color:var(--ink)}
.jahre__j--kommt{font-size:33px;color:var(--ink);padding-right:0;
box-shadow:inset 0 -5px 0 #F9C200}
.jahre__j--kommt .jahre__lab{color:var(--magenta)}
@media(min-width:900px){.fest__foto{height:250px}}
/* Auf schmalen Schirmen passt die Leiste nicht in eine Zeile. Statt sie
zufaellig umbrechen zu lassen: vergangene Jahrgaenge oben, das Paar
„zuletzt / naechstes Mal“ als eigene Zeile darunter. */
@media(max-width:620px){
.jahre{flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px}
.jahre>.jahre__pfeil{display:none}
.jahre__j--kommt{font-size:30px}
}
/* Rueckblick: Karussell — Desktop 5 Bilder je Seite, Handy 1 Bild volle Breite. */
.kar{position:relative}
.imp{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.imp::-webkit-scrollbar{display:none}
/* Jede Karte tragt jetzt Reihe und Titel unter dem Bild (14.10.2026).
Vorher stand der Titel nur im aria-label — Screenreader kannten ihn,
sehende Besucher nicht, und Google sah ihn gar nicht.
Die farbige Unterkante sitzt am Bildrahmen, nicht an der Karte, sonst
laege sie unter der Schrift. */
.imp__a{flex:0 0 86%;scroll-snap-align:start;display:block;text-decoration:none}
/* overflow:hidden haelt das zoomende Bild im Rahmen. Ohne das waechst es
aus der Karte heraus und wird am Rand des Wischbereichs beschnitten. */
.imp__bild{position:relative;display:block;overflow:hidden;background:var(--calm2);
border-bottom:3px solid var(--magenta)}
.imp__text{display:block;padding:10px 0 0}
.imp__reihe{display:block;font:700 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.imp__titel{display:block;margin-top:5px;font:600 15.5px/1.35 var(--sans);color:var(--ink)}
/* Beim Darueberfahren zoomt das Bild leicht und der Titel wird
unterstrichen. Die Unterkante bleibt bewusst 3 px: eine wachsende
Rahmenbreite wuerde die Karte hoeher machen und die Zeile verschieben.
Die Unterstreichung folgt dem Text (text-decoration), ein Kasten-Schatten
liefe bei zweizeiligen Titeln ueber die ganze Breite. */
.imp__a:is(:hover,:focus-visible) .imp__titel{text-decoration:underline;
text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:3px}
@media(min-width:900px){.imp__a{flex:0 0 calc((100% - 48px)/5)}}
.imp__a--fest .imp__bild{border-bottom-color:var(--lila)}
.imp__a--jazz .imp__bild{border-bottom-color:var(--orange)}
.imp__a--einzel .imp__bild{border-bottom-color:var(--rot)}
.imp__a img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
transition:transform .3s ease}
.imp__a:is(:hover,:focus-visible) img{transform:scale(1.05)}
.kar__nav{display:flex;align-items:center;gap:10px;margin-top:12px}
.kar__nav button{font:inherit;width:44px;height:44px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center}
.kar__nav button:hover{border-color:var(--magenta);color:var(--magenta)}
.kar__nav button[disabled]{opacity:.35;cursor:default}
.kar__zaehler{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--ink2);font-variant-numeric:tabular-nums;margin-left:4px}
.kar__nav .tlink{margin-left:auto}
@media(prefers-reduced-motion:reduce){.imp{scroll-behavior:auto}
.imp__a img,.imp__a:is(:hover,:focus-visible) img{transition:none;transform:none}}
/* Verein: Text links, Foto (Magenta-Rahmen) rechts, darunter drei Wege. */
.verein{display:grid;gap:22px;align-items:start;margin-top:22px}
@media(min-width:780px){.verein{grid-template-columns:1fr 1fr;gap:40px}}
.verein__prosa p{color:var(--ink2);margin:0 0 14px}
.verein__prosa .kick{margin-bottom:10px}
/* Mitmachen: ein gewichteter Block statt drei gleicher Kacheln
(15.10.2026). „Mitglied werden“ traegt Ueberschrift, Betrag und Knopf,
die beiden anderen Wege stehen als Zeilen darunter. */
/* 03.11.2026 (Marcus): Oberlinie weg. Der Abstand bleibt gleich gross —
34 px aussen plus 22 px innen trugen vorher die Linie. */
.mitmach{margin-top:34px;padding-top:22px}
.mitmach__haupt h3{margin:0 0 8px}
.mitmach__haupt p{margin:0 0 18px;max-width:46ch;color:var(--ink2);font-size:15.5px}
.mitmach__weiter{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.mitmach__weiter li{border-top:1px solid var(--line2)}
/* Pfeil direkt hinter dem Text (03.11.2026, Marcus: „die Pfeile sind viel
zu weit rechts"). Mit margin-left:auto klebte er am rechten Rand des
Containers — bei kurzen Zeilen lagen dazwischen mehrere hundert Pixel
Nichts. Die Namen fluchten weiter links, der Pfeil folgt jetzt dem
Wort statt der Spalte. */
.mitmach__weiter a{display:flex;align-items:center;gap:14px;min-height:52px;
padding:6px 0;font:600 16px/1.35 var(--sans);color:var(--ink);text-decoration:none}
.mitmach__weiter a::after{content:"\2192";color:var(--magenta);
font-weight:600;font-size:19px}
.mitmach__weiter a:is(:hover,:focus-visible){color:var(--magenta-d)}
.mitmach__weiter a:is(:hover,:focus-visible)::after{color:var(--magenta-d)}
.wege{margin-top:30px}
.wege .cell{display:flex;flex-direction:column;gap:8px}
/* Die Zelle ist ein Flex-Container — ohne align-self zoege sich der Knopf
auf die volle Spaltenbreite. Er soll so breit sein wie seine Schrift,
und unten stehen, damit die drei Handlungszeilen auf einer Linie sind. */
.wege .cell .btn,.wege .cell .tlink{align-self:flex-start;margin-top:auto}
.wege .cell .tlink{align-self:flex-start;margin-top:auto}
/* „Schon bei uns“: Name, Reihen-Kicker + Jahr, farbiger Balken links. */
.namen{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:640px){.namen{grid-template-columns:repeat(2,1fr);gap:16px 22px}}
@media(min-width:1000px){.namen{grid-template-columns:repeat(4,1fr)}}
.name{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding-left:12px;border-left:3px solid var(--magenta);text-decoration:none;color:var(--ink);min-height:56px}
.name--fest{border-left-color:var(--lila)}.name--jazz{border-left-color:var(--orange)}.name--einzel{border-left-color:var(--rot)}
.name__bild{width:56px;height:56px;object-fit:cover;display:block;background:var(--calm2)}
.name b{display:block;font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.15}
.name .kick{display:block;font-size:10px;margin:3px 0 0;white-space:nowrap}
.name:hover b{color:var(--magenta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* „Weiter geht's“: drei Karten, die Mitglieder-Karte ist die eine Magenta-Flaeche der Seite. */
/* .karten/.karte/.karte--m entfielen am 06.09.2026 mit dem Block
„Weiter geht’s“ auf der Startseite — keine Vorlage benutzt sie mehr. */
/* „Bleib dran“: eigener Kasten mit Magenta-Rahmen RUNDUM (14.10.2026,
Wunsch Marcus). Bis dahin lag er im .hinweisband — das traegt die Farbe
nur als Balken links und wird auf der Programmseite weiter so gebraucht,
deshalb eine eigene Regel statt einer Aenderung dort.
Weisser Grund, nicht --calm: Rahmen UND Flaeche waeren zwei Signale fuer
dieselbe Sache. Der CI-Guide nennt den „duennen, eleganten Rahmen“
ausdruecklich als Wiedererkennungs-Device und Magenta „nur als Akzent
oder Rahmen, keine grossflaechigen Bloecke“. */
/* 14.10.2026, zweite Runde: Rahmen weg, Satz gross. Der Kasten sollte
herausstechen — mit Rahmen UND grossem Satz waeren das zwei Signale fuer
dieselbe Sache gewesen, und der Rahmen haette die Schrift eingesperrt.
Jetzt traegt die Typografie allein: Der Satz ist groesser als jede
Abschnittsueberschrift der Seite, das Resonanz-Wort magenta und
unterstrichen. Abgegrenzt wird durch Weissraum. */
/* Zentriert — der einzige zentrierte Block der Seite, und das mit Absicht:
Alles andere steht linksbuendig im Zeitungssatz. Hier soll der Leser
anhalten, und ein Block, der aus der Fluchtlinie tritt, tut genau das.
Bei Fliesstext waere das falsch; hier sind es drei kurze Zeilen.
Die Breite ist von 24 auf 30 Zeichen gewachsen: Bei langen Act-Namen
brauchte der Satz sonst vier Zeilen, jetzt drei — und rechts bleibt
kein Loch mehr stehen. */
.dran{display:block;text-align:center}
.dran__text{margin:0}
/* Die untere Schranke traegt das Handy: Bei 375 px ergab 4vw nur 15 px,
also griff das Minimum — und 27 px standen neben 56 px hohen Knoepfen.
Der Satz sah dadurch kleiner aus als die Schaltflaechen darunter,
obwohl er die Aussage traegt. 31 px drehen das Verhaeltnis um. */
/* Die untere Schranke traegt das Handy: Bei 400 px ergaeben 6,5vw nur
26 px. 34 px sind dort deutlich mehr als jede Abschnittsueberschrift
(die stehen am Handy auf 24 px) — und genau das ist der Zweck: Der Satz
soll die groesste Schrift der Seite sein, nicht die zweitgroesste. */
.dran__satz{font-family:var(--serif);font-size:clamp(30.6px,6.5vw,36.8px);font-weight:600;
color:var(--ink);letter-spacing:-.03em;line-height:1.06;margin:0 auto;max-width:30ch;
text-wrap:balance}
.dran__satz em{font-style:normal;color:var(--magenta);text-decoration:underline;
text-decoration-color:var(--magenta);text-decoration-thickness:.07em;
text-underline-offset:.1em}
/* Fuehrt auf die Knoepfe zu: endet mit Doppelpunkt, steht nah an ihnen —
der Abstand nach oben ist groesser als der nach unten. */
.dran__hin{margin:22px auto 0;font:400 18px/1.5 var(--sans);color:var(--ink2);max-width:42ch}
/* Eine Knopfreihe, zwei Orte: „Bleib dran“ auf der Startseite und der
Kanal-Hinweis unter der Abend-Galerie (15.10.2026, Marcus: einheitlich
fuer alle Seiten). Die Werte sind unveraendert — nur der Selektor ist
erweitert, damit es eine Quelle bleibt. */
.dran__tasten,.folgen__tasten{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
/* Knopfmass im Kasten (14.10.2026 nachjustiert): Die Markenzeichen
brauchen mehr Flaeche als Buchstaben — bei 16 px waren weder die Linse
der Kamera noch das „f“ im Kreis zu erkennen. Icon jetzt 24 px, der
Knopf waechst entsprechend mit, damit das Verhaeltnis stimmt. */
.dran__tasten .btn,.folgen__tasten .btn{min-height:56px;padding:15px 22px;font-size:14px;gap:12px}
/* Weiss auf Magenta zurueckholen: .folgen a:not(.btn) laesst die Knoepfe
zwar aus, aber der Schatten der alten Textlink-Regel soll auch bei
einem kuenftigen Selektor nie greifen. */
.folgen__tasten .btn,.folgen__tasten .btn:link,.folgen__tasten .btn:visited{color:#fff;box-shadow:none}
.folgen__tasten .btn:is(:hover,:focus-visible){color:var(--magenta);box-shadow:none}
.dran__tasten .kanal__icon svg,.folgen__tasten .kanal__icon svg{height:24px}
/* Die Linkzeile rutscht am Schreibtisch nach rechts, am Handy unter den
Text. flex-wrap erledigt das, margin-left:auto greift erst, wenn beide
in eine Zeile passen. */
/* Linkzeilen-Form der Kanaele (Fuss, Abendseiten). Die Magenta-Unterkante
liegt auf dem NAMEN, nicht auf dem Link: sonst laeuft sie auch unter dem
Icon durch und sieht nach einem Fehler aus. */
.foot__kanaele .kanal,.folgen .kanal{display:inline-flex;align-items:center;gap:8px}
/* Das Icon ist ein Inline-SVG und nimmt ueber fill="currentColor" die
Schriftfarbe an — es wechselt also mit, wenn der Knopf sich umdreht.
Hoehe fest, Breite nach Seitenverhaeltnis: die Markenzeichen haben nicht
dasselbe Format. */
.kanal__icon{flex:none;display:inline-flex;align-items:center}
.kanal__icon svg{display:block;width:auto;height:1.15em}
.foot__kanaele{margin-top:14px}
/* Mobile Typo-Skala (Marcus, 03.09.2026): H1 28 · H2 24 · H3 18 · Text 15 ·
Eckdaten 14 · Filzstift 15 · Abschnittsabstand 56. Gilt auf allen Seiten —
das „vollgestopft“-Gefuehl kam von zu grossen Fraunces-Ueberschriften. */
@media(max-width:759px){
:root{--sec-y:36px}
/* Knoepfe im „Bleib dran“-Kasten: kleiner, und ohne das Wort „folgen“.
Mit ihm braeuchte jeder Knopf rund 230 px — zwei nebeneinander passen
in 335 px nutzbare Breite nicht und brechen untereinander. Ohne das
Wort sind es zusammen rund 300 px, und das Icon sagt ohnehin, worum
es geht. */
.dran__tasten .btn,.folgen__tasten .btn{min-height:48px;padding:12px 16px;font-size:12px;gap:8px}
.dran__tasten .kanal__icon svg,.folgen__tasten .kanal__icon svg{height:20px}
.kanal__zu{display:none}
.held h1,.held--auf h1,.h-display,.h-big,.headblock .h-display{font-size:28px}
.held__unter{font-size:19px}
.shead h2,.h-sec,.h2l,.fest h2,.klapp>summary h2{font-size:24px}
h3,.cell :is(h2,h3),.idx__body :is(h2,h3){font-size:18px}
body{font-size:15px}
/* .dran p stand hier und traf damit AUCH .dran__satz — der ist ein ,
und „Klasse + Element“ (0,1,1) schlaegt eine reine Klasse (0,1,0).
Der tragende Satz wurde dadurch am Handy auf 15 px gesetzt statt auf
seine 31 px. Jetzt steht hier .dran__hin, also nur der kleine
Hinfuehrungssatz. */
.held__lead,.fest p,.verein__prosa p,.cell p,.dran__hin,.prose p,.sub{font-size:15px;line-height:1.55}
.held__meta,.idx__meta{font-size:14px}
.note{font-size:15px}.note--sm{font-size:13px}
.idx__date{font-size:20px}
.facts dd{font-size:18px}
.lang{display:none}
.fest__innen{padding:32px var(--pad) 24px}
.verein{gap:24px}
.wege{gap:22px;margin-top:34px}
.dran__hin{font-size:16px;line-height:1.5}
}
/* --- Kontaktformular (inc/kontaktformular.php, 04.09.2026) -------------
Gleiche Sprache wie der Rest: harte Kanten, 3px Linien, keine Radien,
Magenta als Handlungsfarbe. Kein Fremdserver, kein Cookie. */
.kf{max-width:660px;display:grid;gap:22px}
.kf__feld{display:grid;gap:7px;margin:0}
.kf label{font:700 12px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.kf input[type=text],.kf input[type=email],.kf textarea{
font:400 17px/1.5 var(--sans);color:var(--ink);background:var(--paper);
border:3px solid var(--ink);padding:12px 14px;width:100%;min-height:52px}
.kf textarea{min-height:auto;resize:vertical}
.kf input:focus-visible,.kf textarea:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.kf__feld--fehler input,.kf__feld--fehler textarea{border-color:var(--rot)}
.kf__fehler{font:500 14.5px/1.45 var(--sans);color:var(--rot)}
/* Honigtopf: aus dem Bild geschoben statt display:none — das erkennen Bots. */
.kf__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Nachweis-Zeile: laeuft von selbst, sagt nur was passiert. */
.kf__nachweis{display:flex;align-items:center;gap:11px;margin:0;
font:500 14.5px/1.4 var(--sans);color:var(--ink2)}
.kf__nachweis__mal{flex:none;width:19px;height:19px;border:3px solid var(--line2);
border-top-color:var(--magenta);border-radius:50%;animation:kf-dreh .9s linear infinite}
.kf__nachweis[data-fertig]{color:var(--ink)}
.kf__nachweis[data-fertig] .kf__nachweis__mal{border:0;border-radius:0;animation:none;
background:var(--magenta);
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 11l5 5L18 4' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 11l5 5L18 4' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes kf-dreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.kf__nachweis__mal{animation:none;border-top-color:var(--line2)}}
.kf__fuss{display:grid;gap:14px;margin:0;justify-items:start}
.kf__klein{font:400 14px/1.5 var(--sans);color:var(--ink2);max-width:60ch}
.kf__hinweis{max-width:660px;margin:0 0 24px;padding:16px 18px;border:3px solid var(--ink);
font:500 16px/1.5 var(--sans)}
.kf__hinweis--ok{border-color:var(--magenta);color:var(--ink)}
.kf__hinweis--fehler{border-color:var(--rot);color:var(--ink)}
/* Rahmen um das Formular: Einleitung, Vorab-Hinweis, Nachsatz. Alle auf
660px wie das Formular selbst — sonst laufen die Zeilen darueber und
darunter breiter als die Eingabefelder. */
.kf__intro{max-width:660px;margin:0 0 18px;color:var(--ink2)}
.kf__vorab{max-width:660px;margin:0 0 30px;font:400 15px/1.55 var(--sans);color:var(--ink2)}
.kf__vorab a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--magenta)}
.kf__vorab a:hover{color:var(--magenta-d);box-shadow:inset 0 -2px 0 var(--magenta-d)}
.kf__huelle{max-width:660px}
.kf__nachsatz{max-width:60ch;margin-top:26px}
/* Chronik auf der Vereinsseite. Derselbe Wischstreifen wie .bilder--wisch,
aber mit Textkarten statt Bildern: je Jahr eine Karte, darin eine Zeile
je Ereignis. Farbe traegt nur die Jahreszahl — ein zweites Signal je
Karte waere im Streifen Unruhe. */
.chronik{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
margin:0 calc(var(--pad)*-1);padding:0 var(--pad);background:var(--line);
-webkit-overflow-scrolling:touch}
.chronik__jahr{flex:0 0 80%;scroll-snap-align:start;background:var(--paper);
min-width:0;padding:18px 20px 20px}
/* 03.11.2026 (Marcus: „steht ganz rechts klein im freien Raum"): .shead
verteilt mit space-between, also wurde die Zeile ans Containerende
geschoben — bei 1.280 px Breite stand sie einsam weit weg von „Woher
wir kommen". margin-right:auto zieht sie an die Überschrift heran und
schiebt den Leerraum nach rechts. */
.chronik__seit{margin-right:auto;font-size:13px;color:var(--ink2);white-space:nowrap}
.chronik__zahl{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;
letter-spacing:-.03em;color:var(--magenta);font-size:32px;line-height:1;margin:0 0 14px}
.chronik__liste{list-style:none;margin:0;padding:0}
.chronik__liste li{display:flex;gap:10px;padding:0 0 9px;font-size:14.5px;line-height:1.4}
.chronik__liste li:last-child{padding-bottom:0}
.chronik__monat{flex:none;width:5.4em;color:var(--ink2);font-size:12px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;padding-top:2px}
/* Zeile ohne Monatsangabe (2013, 2014, 2020, 2025): der Text nutzt die
ganze Breite, statt hinter einer leeren 5,4-em-Spalte zu beginnen.
Am Handy sind das 65 von 240 px nutzbarer Textbreite. */
.chronik__monat:empty{display:none}
.chronik__was{flex:1;min-width:0}
@media(min-width:820px){.chronik__jahr{flex-basis:30%}.chronik__zahl{font-size:36px}}
/* Zitat in einer Chronik-Karte. Gleiche Sprache wie die Publikumsstimmen:
Magenta-Linie oben, Serif. Es steht in einer Karte, nicht ueber dem
Streifen — ueber dem Streifen wuerde es den Vorspann doppeln. */
.chronik__zitat{margin:14px 0 0;padding:12px 0 0;border-top:3px solid var(--magenta)}
.chronik__zitat p{margin:0;font-family:var(--serif);font-weight:600;font-size:16px;
line-height:1.3;letter-spacing:-.015em}
.chronik__zitat figcaption{margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--ink2)}