/* Kulturverein Touch – Stilblatt fuer das neue Frontend (cms.busapp)
 Flair der bisherigen Seite (Handabdruck, Verlauf grau -> Rubrikfarbe, farbige Titelbalken),
 neu aufgebaut fuer Handy, Tablet und Desktop. Keine externen Schriften. */

/* Schreibmaschinenschrift fuer Menue und Ueberschriften: Special Elite (Astigmatic, Apache-Lizenz),
 lokal unter /fonts/special-elite/ (Latein-Ausschnitt, Lizenz liegt daneben). */
@font-face {
	font-family: "Special Elite";
	src: url(/fonts/special-elite/special-elite-latin.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--rubrik: #0849a5; /* je Rubrik ueber die Klasse am body gesetzt (Seitenlayout "Rahmen …") */
	--auf-rubrik: #ffffff; /* Textfarbe auf der Rubrikfarbe */
	--start: #0849a5;
	--programm: #fecd05;
	--rueckblick: #e30613;
	--lokale: #679b33;
	--kontakt: #f08a1c;
	--verein: #cb3366;
	--newsmail: #0bb8e3;
	--grund: #eef0f3;
	--karte: #ffffff;
	--text: #222428;
	--text-leise: #5b6068;
	--linie: #d5d9df;
	--kopf-hell: #e2e4e8;
	--radius: 10px;
	--breite: 1100px;
	--schrift: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
	--schreibmaschine: "Special Elite", "Courier New", Courier, monospace;
}

body.rubrik-programm { --rubrik: var(--programm); --auf-rubrik: #1d1f22; }
body.rubrik-rueckblick { --rubrik: var(--rueckblick); }
body.rubrik-lokale { --rubrik: var(--lokale); }
body.rubrik-kontakt { --rubrik: var(--kontakt); --auf-rubrik: #1d1f22; }
body.rubrik-verein { --rubrik: var(--verein); }
body.rubrik-newsmail { --rubrik: var(--newsmail); --auf-rubrik: #1d1f22; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	/* Fusszeile auch bei kurzen Seiten ganz unten: Seite mindestens fensterhoch, main fuellt auf */
	min-height: 100vh; min-height: 100dvh;
	display: flex; flex-direction: column;
	background: var(--grund);
	color: var(--text);
	font-family: var(--schrift);
	font-size: 16px;
	line-height: 1.6;
}

/* Handabdruck als Wasserzeichen auf jeder Seite: fest im Fenster (bleibt beim Scrollen stehen) und
 UEBER Text und Karten (z-index 1), damit er durch die Textkarten scheint. Kopf, Menue und Fuss liegen
 darueber (z-index 2). main bildet bewusst KEINE eigene Ebene (z-index auto), damit die Bilder darin
 mit z-index 2 ueber der Hand liegen und unverfaelscht bleiben. Klicks gehen durch (pointer-events none).
 Die Grafik ist selbst schon hellgrau (#c0c0c0): opacity .25 ergibt ca. 6 % Abdunklung (Desktop),
 auf dem Handy .35 = ca. 9 % (siehe Handy-Block unten). */
body::before {
	content: ""; position: fixed; z-index: 1; pointer-events: none;
	top: 50%; left: 50%; width: min(640px, 82vw); aspect-ratio: 680 / 550;
	transform: translate(-50%, -50%);
	background: url(/images/layout/hand-gross.gif) no-repeat center / contain;
	opacity: .25; mix-blend-mode: multiply;
}
/* Seiten mit der grossen Einstiegs-Hand (Startseite): kein zweiter, versetzter Abdruck dahinter */
body:has(.einstieg)::before { display: none; }
body > * { position: relative; z-index: 2; }
body > main { z-index: auto; }
/* Bilder, Videos und eingebettete Inhalte liegen ueber der Hand */
main img, main video, main iframe, main object { position: relative; z-index: 2; }

img { max-width: 100%; height: auto; }
a { color: color-mix(in srgb, var(--rubrik) 70%, #000); text-underline-offset: .15em; }
a:hover { color: var(--text); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rubrik); outline-offset: 2px; }

h1, h2, h3 {
	font-family: var(--schreibmaschine); font-weight: 400; font-synthesis: none;
	line-height: 1.25; margin: 1.5em 0 .75em; hyphens: auto; overflow-wrap: break-word;
}
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
/* Am Anfang eines Blocks kein Abstand oben */
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
@media (max-width: 560px) {
	h1 { font-size: 26px; }
	h2 { font-size: 23px; }
	h3 { font-size: 21px; }
}
p, ul, dl { margin: 0 0 1em; }

.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 12px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

/* ── Kopf: Verlauf grau -> Rubrikfarbe wie bisher ───────── */
.kopf {
	background: linear-gradient(90deg, var(--kopf-hell) 0%, color-mix(in srgb, var(--rubrik) 55%, var(--kopf-hell)) 55%, var(--rubrik) 100%);
	border-bottom: 6px solid var(--rubrik);
	box-shadow: 0 4px 0 0 color-mix(in srgb, var(--rubrik) 45%, #fff);
	margin-bottom: 4px;
}
.kopf-innen {
	max-width: var(--breite); margin: 0 auto; padding: 8px 16px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 84px;
}
.kopf .hand { display: block; width: 64px; height: auto; }
.kopf .schriftzug { display: block; width: clamp(180px, 34vw, 333px); height: auto; }

/* ── Menue: Reiter in den Rubrikfarben ───────────────── */
.menue { background: #fff; border-bottom: 1px solid var(--linie); }
.menue-innen { max-width: var(--breite); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.menue li { margin: 0; }
.menue a {
	--farbe: var(--start);
	display: block; padding: 10px 14px 8px;
	border-top: 4px solid var(--farbe);
	color: var(--text); font-family: var(--schreibmaschine); font-weight: 400; font-size: 20px; text-decoration: none;
}
.menue a:hover { background: color-mix(in srgb, var(--farbe) 14%, #fff); }
.menue a.programm { --farbe: var(--programm); }
/* Aktiver Reiter: kommt aus der body-Klasse des Rahmens (Menue ist ein gemeinsamer Baustein) */
.menue a.aktiv,
body.rubrik-programm .menue a.programm, body.rubrik-rueckblick .menue a.rueckblick,
body.rubrik-lokale .menue a.lokale, body.rubrik-kontakt .menue a.kontakt,
body.rubrik-verein .menue a.verein, body.rubrik-newsmail .menue a.newsmail { background: var(--farbe); color: #fff; }
.menue a.programm.aktiv, .menue a.kontakt.aktiv, .menue a.newsmail.aktiv,
body.rubrik-programm .menue a.programm, body.rubrik-kontakt .menue a.kontakt,
body.rubrik-newsmail .menue a.newsmail { color: #1d1f22; }
.menue nav { display: contents; }
.menue a.rueckblick { --farbe: var(--rueckblick); }
.menue a.lokale { --farbe: var(--lokale); }
.menue a.kontakt { --farbe: var(--kontakt); }
.menue a.verein { --farbe: var(--verein); }
.menue a.newsmail { --farbe: var(--newsmail); }

.menue-knopf {
	display: none; margin: 8px 0; font: inherit; font-family: var(--schreibmaschine); font-size: 20px;
	background: #fff; color: var(--text); border: 2px solid var(--rubrik); border-radius: 6px;
	padding: 6px 14px; cursor: pointer;
}

@media (max-width: 760px) {
	.kopf-innen { min-height: 64px; }
	.kopf .hand { width: 46px; }
	/* Menue bleibt beim Scrollen oben stehen, Knopf und Eintraege rechtsbuendig */
	.menue { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
	html { scroll-padding-top: 64px; }
	.menue-innen { flex-direction: column; align-items: stretch; }
	.menue-knopf { display: block; align-self: flex-end; }
	.menue ul { display: none; flex-direction: column; padding-bottom: 10px; max-height: calc(100vh - 70px); overflow-y: auto; }
	.menue ul.offen { display: flex; }
	.menue a { border-top: 0; border-right: 6px solid var(--farbe); padding: 12px 14px; font-size: 22px; text-align: right; }
}

/* ── Inhalt ─────────────────────────────────────────── */
main {
	display: block; flex: 1 0 auto; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 20px 16px 40px;
}

.sektion { margin: 0 0 20px; }

/* Textkarte mit farbigem Titelbalken (erste Ueberschrift) */
.karte-text {
	background: color-mix(in srgb, var(--karte) 92%, transparent);
	border: 1px solid color-mix(in srgb, var(--rubrik) 55%, #fff);
	border-radius: var(--radius);
	padding: 0 22px 8px;
	overflow: hidden;
}
.karte-text > :first-child { margin-top: 22px; }
.karte-text > h1:first-child, .karte-text > h2:first-child {
	margin: 0 -22px 24px; padding: 10px 22px;
	background: var(--rubrik); color: var(--auf-rubrik); font-size: 26px;
}

/* Einstieg auf der Startseite: grosse Hand mit Text darin */
.einstieg {
	text-align: center; padding: 20px 0 10px;
}
.einstieg .hand-gross {
	position: relative; max-width: 560px; margin: 0 auto;
	aspect-ratio: 680 / 550;
	background: url(/images/layout/hand-gross.gif) no-repeat center / contain;
	display: flex; align-items: flex-end; justify-content: center;
}
.einstieg .hand-text { width: 52%; margin: 0 0 15% 4%; font-weight: 700; font-size: clamp(13px, 2.6vw, 17px); line-height: 1.35; }
/* Titel und Untertitel liegen ueber der (eingefaerbten) Handflaeche; Klicks gehen durch auf den Link */
.einstieg .hand-text h1 { color: var(--rueckblick); font-size: clamp(20px, 4vw, 30px); margin: 0 0 .3em; transition: color .2s; position: relative; z-index: 4; pointer-events: none; }
.einstieg .hand-text p { margin: 0 0 .4em; transition: color .2s; position: relative; z-index: 4; pointer-events: none; }
.einstieg .unter { max-width: 640px; margin: 18px auto 0; color: var(--text-leise); }

/* Finger-Navigation wie auf der alten Seite: jeder Finger fuehrt zu einer Rubrik und faerbt sich in deren
 Farbe (Zeigefinger Programm, Mittelfinger Rueckblick, Ringfinger Lokale, kleiner Finger Kontakt,
 Daumen Newsmail, Handflaeche Verein). Markup im Inhalt der Einstiegs-Sektion:
 <nav class="finger"><a class="finger-programm" href=…><img src="/images/layout/finger-programm.png" alt=""><span>Programm</span></a>…</nav>
 Lage in Prozent der Hand-Grafik (680 x 550), die Fingerbilder sind genau auf ihren Finger zugeschnitten. */
.einstieg .finger { position: absolute; inset: 0; margin: 0; }
.einstieg .finger a { position: absolute; z-index: 3; display: block; text-decoration: none; }
.einstieg .finger img {
	position: static; display: block; width: 100%; height: 100%; max-width: none;
	opacity: 0; transition: opacity .2s;
}
.einstieg .finger span {
	position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
	padding: 3px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none;
	font-family: var(--schreibmaschine); font-weight: 400; font-size: 18px; line-height: 1.3;
	background: var(--farbe); color: var(--auf-farbe, #fff);
	opacity: 0; transition: opacity .2s;
}
.einstieg .finger a:hover img, .einstieg .finger a:focus-visible img,
.einstieg .finger a:hover span, .einstieg .finger a:focus-visible span { opacity: 1; }
.einstieg .finger a:focus-visible { outline: none; }
.finger-programm { --farbe: var(--programm); --auf-farbe: #1d1f22; left: 53.82%; top: 11.64%; width: 8.68%; height: 28.73%; }
.finger-rueckblick { --farbe: var(--rueckblick); left: 63.24%; top: 10.18%; width: 14.26%; height: 30.36%; }
.finger-lokale { --farbe: var(--lokale); left: 71.76%; top: 22.18%; width: 16.62%; height: 25.82%; }
.finger-kontakt { --farbe: var(--kontakt); --auf-farbe: #1d1f22; left: 82.21%; top: 44.00%; width: 9.41%; height: 12.18%; }
.finger-newsmail { --farbe: var(--newsmail); --auf-farbe: #1d1f22; left: 25.88%; top: 38.91%; width: 8.09%; height: 15.09%; }
.finger-verein { --farbe: var(--verein); left: 32.35%; top: 44.18%; width: 39.85%; height: 48.00%; }
/* Handflaeche: Beschriftung unter der Hand statt darueber (dort stehen die Finger) */
.einstieg .finger-verein span { bottom: auto; top: calc(100% + 6px); }
/* Ist die Handflaeche pink, wird der Text darin weiss; der Schatten haelt ihn auch dort lesbar,
 wo er ueber den grauen Rand der Hand hinausragt */
.einstieg .hand-gross:has(.finger-verein:hover) .hand-text h1,
.einstieg .hand-gross:has(.finger-verein:hover) .hand-text p { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
/* Handy/Tablet ohne Maus: kein Hover – die Finger stehen von Anfang an in ihren Farben, die Handflaeche
 bleibt grau (Text darin lesbar), Antippen fuehrt zur Rubrik. Beschriftungen bleiben aus (zu eng). */
@media (hover: none) {
	.einstieg .finger a:not(.finger-verein) img { opacity: .9; }
	.einstieg .finger span { display: none; }
}

/* Kacheln (Lokale, Unterstuetzer, Rubriken) */
.kacheln { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kacheln, .kacheln-2 { grid-template-columns: 1fr; } }

.kachel {
	background: var(--karte); border: 1px solid var(--linie); border-top: 5px solid var(--rubrik);
	border-radius: var(--radius); padding: 14px 16px 10px; display: flex; flex-direction: column;
}
/* Bilder in 2er- und 3er-Kacheln: nie breiter als die Kachel, nicht zuschneiden, nicht hochskalieren
 (kleine Bilder bleiben in ihrer Groesse, grosse werden auf die Kachelbreite verkleinert) */
.kachel img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto 12px; border-radius: 6px; }
.kachel p:has(> img), .kachel p:has(> a > img) { margin-bottom: .6em; }
/* Ausnahme bewusst randlos: <img class="foto"> als erstes Element der Kachel fuellt die Kachel oben ganz aus */
.kachel > img.foto:first-child { width: calc(100% + 32px); max-width: none; margin: -14px -16px 12px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.kachel h3 { margin: .2em 0 .5em; font-size: 22px; }
.kachel h3 a { color: var(--text); text-decoration: none; }
.kachel h3 a:hover { text-decoration: underline; }
.kachel p { margin-bottom: .6em; }
.kachel > :last-child { margin-bottom: 0; }
.kachel p.mehr { margin-top: auto; font-weight: 700; }
/* Logos von Unterstuetzern: weisser Rand, nie breiter als die Kachel */
.kachel.logo img, .kachel img.logo { background: #fff; padding: 12px; border-radius: 0; }

/* Steckbrief eines Lokals: <dl class="steckbrief"> */
dl.steckbrief { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
dl.steckbrief dt { font-weight: 700; }
dl.steckbrief dd { margin: 0; }
@media (max-width: 560px) { dl.steckbrief { grid-template-columns: 1fr; gap: 0; } dl.steckbrief dd { margin-bottom: 8px; } }

/* Bilder nebeneinander im Text: <p class="bilder"><img><img></p> */
p.bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
p.bilder img { width: 100%; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 480px) { p.bilder { grid-template-columns: 1fr; } }

/* Bildergalerie der Anlass-Seiten: <p class="galerie anzahl-1|2|3"><a href="bild"><img></a>…</p>
 Plakate und Flyer werden nicht zugeschnitten; Klick oeffnet das Bild gross. */
p.galerie { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
p.galerie.anzahl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
p.galerie.anzahl-1 { grid-template-columns: minmax(0, 640px); }
p.galerie a { display: block; }
p.galerie img { display: block; width: 100%; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
@media (max-width: 760px) { p.galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } p.galerie.anzahl-1 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { p.galerie, p.galerie.anzahl-2 { grid-template-columns: 1fr; } }

/* Karte Flawil mit Legende */
.karte-flawil img { width: 100%; border: 1px solid var(--linie); border-radius: 6px; }
ol.legende { columns: 2; column-gap: 28px; padding-left: 1.6em; }
@media (max-width: 560px) { ol.legende { columns: 1; } }

/* Knoepfe: Links in <p class="aktionen"> */
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.aktionen a {
	display: inline-block; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none;
	background: var(--rubrik); color: var(--auf-rubrik); border: 2px solid var(--rubrik);
}
.aktionen a + a { background: #fff; color: var(--text); }

/* ── Agenda (Programm / Rückblick) ─────────────────── */
/* Leere Textkarte (Sektion ohne Inhalt) nicht als leeren Rahmen zeigen */
.sektion:has(> .karte-text:empty) { display: none; }
.agenda { margin: 0 0 20px; }
.agenda-modul {
	background: color-mix(in srgb, var(--karte) 92%, transparent);
	border: 1px solid color-mix(in srgb, var(--rubrik) 55%, #fff);
	border-radius: var(--radius); overflow: hidden;
}
.agenda-titel {
	margin: 0; padding: 10px 22px;
	background: var(--rubrik); color: var(--auf-rubrik); font-size: 26px;
}
.agenda-leer { margin: 0; padding: 18px 22px; }
.agenda-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.agenda-tabelle th {
	text-align: left; padding: 10px 10px 8px; font-weight: 700; font-size: 14px;
	border-bottom: 2px solid color-mix(in srgb, var(--rubrik) 55%, #fff); white-space: nowrap;
}
.agenda-sortierbar th { cursor: pointer; }
.agenda-tabelle td { padding: 7px 10px; vertical-align: top; border-bottom: 1px solid var(--linie); overflow-wrap: break-word; hyphens: auto; }
.agenda-tabelle th:first-child, .agenda-tabelle td:first-child { padding-left: 22px; }
.agenda-tabelle th:last-child, .agenda-tabelle td:last-child { padding-right: 22px; text-align: right; }
.agenda-tabelle tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rubrik) 5%, transparent); }
.agenda-zeile-link { cursor: pointer; }
.agenda-zeile-link:hover { background: color-mix(in srgb, var(--rubrik) 14%, transparent) !important; }
.agenda-wer { font-weight: 700; }
.agenda-zeit { display: block; white-space: normal; font-size: 14px; color: var(--text-leise); }
.agenda-mehr-link {
	display: inline-block; width: 26px; height: 26px; line-height: 24px; text-align: center;
	border-radius: 50%; background: var(--rubrik); color: var(--auf-rubrik); text-decoration: none; font-weight: 700;
}
/* Handy und schmales Tablet: jede Zeile als kleine Karte, Kopfzeile weg (6 Spalten passen erst ab ~900 px) */
@media (max-width: 900px) {
	.agenda-tabelle thead { display: none; }
	.agenda-tabelle, .agenda-tabelle tbody, .agenda-tabelle tr, .agenda-tabelle td { display: block; }
	.agenda-tabelle tr { position: relative; padding: 18px 52px 18px 16px; border-bottom: 6px solid color-mix(in srgb, var(--rubrik) 18%, #fff); }
	.agenda-tabelle tr:last-child { border-bottom: 0; }
	.agenda-tabelle td, .agenda-tabelle td:first-child, .agenda-tabelle td:last-child { padding: 2px 0; border: 0; text-align: left; }
	.agenda-tabelle td:empty { display: none; }
	.agenda-wann { font-weight: 700; color: var(--text); }
	.agenda-wer { font-size: 18px; font-family: var(--schreibmaschine); font-weight: 400; }
	.agenda-was, .agenda-wo, .agenda-beschreibung { font-size: 14px; }
	.agenda-was { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; opacity: .8; }
	.agenda-tabelle td.agenda-mehr { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 0; }
	.agenda-titel { font-size: 23px; }
}

/* ── Fuss ─────────────────────────────────────────── */
/* Die Fusszeile ist der Baustein "Fusszeile" (Zusaetze, Multipage); das CMS setzt ihn in <footer></footer> der Rahmen ein */
body > footer, .fuss { background: #3a3d42; color: #e3e5e8; font-size: 14px; border-top: 6px solid var(--rubrik); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 36px 16px 64px; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; line-height: 1.7; }
body > footer p, .fuss p { margin: 0; }
body > footer a, .fuss a { color: #fff; }

/* Handy: Titelbalken etwas kleiner (muss nach der Grundregel stehen) */
@media (max-width: 560px) {
	.karte-text > h1:first-child, .karte-text > h2:first-child { font-size: 23px; }
	.kachel h3 { font-size: 21px; }
}

/* Handy: Menue bleibt sticky ueber dem Inhalt (body > * setzt sonst z-index 2);
 Hand-Wasserzeichen etwas kraeftiger (kleiner, heller Bildschirm) */
@media (max-width: 760px) {
	body > .menue, .menue { z-index: 50; }
	body::before { opacity: .35; }
}

@media print {
	.menue, .menue-knopf, body::before { display: none; }
	body { background: #fff; }
	.kopf { background: none; }
}