/* ================================================================
AWO Ortsverein Berghofen, gemeinsames Stylesheet
================================================================ */
/* ── Local Font (DSGVO-konform, kein Google-Request) ─────────── */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(fonts/inter-latin.woff2) format('woff2');
}
/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
color: var(--foreground);
background: var(--background);
line-height: 1.65;
}
/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
/* Das Rot der Logodatei, die auf jeder Seite im Kopf steht
(logo-awo-berghofen-400.png). Bis zum 11.08.2026 stand hier #E2001A,
waehrend die Logos #E4041B trugen: vier Rots auf einer Seite. */
--primary: #E4041B;
--on-primary: #FFFFFF;
--foreground: #1a1a1a;
--background: #ffffff;
--card: #ffffff;
--card-fg: #1a1a1a;
--muted: #f6f6f6;
--muted-fg: #595959; /* B1: Kontrast von 4,3:1 auf 5,0:1 erhöht → WCAG AA konform */
--border: #e0e0e0;
--ring: #E4041B;
--shadow-sm: 0 2px 8px rgba(0,0,0,.07);
--shadow-md: 0 6px 24px rgba(0,0,0,.10);
--radius: 6px;
/* Chevron nach rechts als Maske, damit ::after-Pfeile ohne Inline-SVG
auskommen. Die Farbe kommt aus background, die Form aus der Maske. */
--pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
/* Textvariante der Markenfarbe. Die Flaeche (--primary) bleibt #E4041B,
sonst verlieren weisse Beschriftungen auf roten Buttons ihren Kontrast. */
--primary-ink: #E4041B;
/* Die drei Bereichsfarben (--col-bb/-kf/-hf) fuer Buergerbuero, Kulturforum
und Heimatforum sind am 15.08.2026 entfallen: Die Raumnamen stehen nicht
mehr auf der Seite, damit hatten die Farben nichts mehr zu kennzeichnen. */
}
/* ── Skip Link (Accessibility) ─────────────────────────────────── */
.skip-link {
position: absolute;
min-height: 44px;
display: inline-flex;
align-items: center;
top: -100%;
left: 1rem;
background: var(--primary);
color: var(--on-primary);
padding: .5rem 1rem;
border-radius: var(--radius);
font-size: .9rem;
font-weight: 600;
z-index: 9999;
text-decoration: none;
}
.skip-link:focus {
top: 1rem;
}
/* ── Focus States (Accessibility) ──────────────────────────────── */
:focus-visible {
outline: 3px solid var(--ring);
outline-offset: 2px;
border-radius: 2px;
}
a:focus:not(:focus-visible) { outline: none; }
/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
h2 { font-size: clamp(1.4rem, 4vw, 1.75rem); color: var(--primary-ink); }
p { margin-bottom: .85rem; }
address { font-style: normal; }
a { color: var(--primary-ink); text-decoration: none; transition: color .2s; }
a:hover { text-decoration: underline; }
/* Links im Fliesstext zusaetzlich unterstreichen: Farbe allein reicht als
Unterscheidungsmerkmal nicht (WCAG 1.4.1). Navigation und Buttons bleiben glatt. */
.content p a, .content li a, .lead a,
.detail-text a,
.news-item p a,
.ehrenamt-box p a,
/* dd steht in keiner der Regeln oben. Ohne diesen Selektor waeren die Links im
FAQ auf /kontakt allein durch ihre Farbe zu erkennen, und das reicht nicht
(WCAG 1.4.1). Am 15.08.2026 mit dem FAQ-Block dazugekommen. */
.faq dd a {
text-decoration: underline;
text-underline-offset: .15em;
}
/* ── Layout ────────────────────────────────────────────────────── */
.container { max-width: 980px; margin: 0 auto; padding: 0 1.25rem; }
/* 3rem statt 4rem seit dem 15.08.2026: Zwischen zwei Abschnitten standen
vorher 4rem + 4rem, also 128 px, und die Uebergaenge lasen sich als Luecke
statt als Themenwechsel. */
.section { padding: 3rem 0; scroll-margin-top: 64px; }
/* Sicherung: Stossen doch einmal zwei Abschnitte mit gleichem Grund
aufeinander, fehlt die Kante, die den Abstand begruendet. Dann faellt das
obere Polster weg. Die Seiten sind so gebaut, dass Weiss und Ton sich
abwechseln; diese Regel faengt den Rueckfall ab. */
.section:not(.section--alt) + .section:not(.section--alt),
.section--alt + .section--alt { padding-top: 0; }
[id].hero { scroll-margin-top: 0; }
.section--alt { background: var(--muted); }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header p { color: var(--muted-fg); font-size: 1.05rem; margin-top: .5rem; }
/* ── HEADER ────────────────────────────────────────────────────── */
header {
background: rgba(255,255,255,.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 2px solid var(--primary);
position: sticky;
top: 0;
z-index: 100;
}
.header-bar {
display: flex;
align-items: center;
/* Logo links, Navigation rechts daneben. Bis zum 11.08.2026 stand hier
justify-content: center, dadurch hing das Logo mitten in der Leiste und
die erste Stelle, an der das Auge landet, war leer. */
justify-content: flex-start;
max-width: 980px;
margin: 0 auto;
padding: 0 1.25rem;
height: 80px;
}
.header-home {
display: flex;
align-items: center;
min-height: 44px;
flex-shrink: 0;
text-decoration: none;
margin-right: 1.5rem;
}
.header-logo {
height: 72px;
width: auto;
}
.header-logo--dark { display: none; }
.burger-btn {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
/* Mindestens 44x44 px Zielflaeche (WCAG 2.2), vorher 40x40. */
padding: .625rem;
min-width: 44px;
min-height: 44px;
margin-left: auto;
color: var(--foreground);
}
.burger-btn svg { width: 24px; height: 24px; }
.header-links {
display: flex;
align-items: center;
gap: .15rem;
}
.header-links a {
font-size: 1rem;
font-weight: 500;
color: var(--foreground);
/* Die Navigationslinks kamen mit .4rem Polster auf 39 px Hoehe. Das
Projekt verlangt 44 px Zielflaeche; min-height plus inline-flex loest
das unabhaengig von Schriftgroesse und Zeilenhoehe, waehrend mehr
Polster nur beim aktuellen Schriftgrad passt. */
display: inline-flex;
align-items: center;
min-height: 44px;
padding: .4rem .85rem;
border-radius: 20px;
white-space: nowrap;
text-decoration: none;
transition: background .2s, color .2s;
opacity: .85;
}
.header-links a:hover {
opacity: 1;
color: var(--primary-ink);
text-decoration: none;
}
.header-links a[aria-current="page"] {
opacity: 1;
color: var(--foreground);
font-weight: 700;
}
/* ── NAV DROPDOWN ─────────────────────────────────────────────── */
.nav-dropdown {
position: relative;
display: flex;
align-items: center;
}
.nav-dropdown > a::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-left: .35rem;
vertical-align: .15em;
transition: transform .2s;
}
.nav-dropdown:hover > a::after,
.nav-dropdown:focus-within > a::after {
transform: rotate(-135deg);
}
/* Der Aufklapp-Knopf gehoert dem Handy. Am Desktop oeffnet der Hover, dort
zeichnet der Link selbst den Pfeil (Regel oben). */
.nav-dropdown-toggle {
display: none;
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
}
.nav-dropdown-menu {
visibility: hidden;
opacity: 0;
position: absolute;
top: calc(100% + .5rem);
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: rgba(255,255,255,.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius);
box-shadow: 0 12px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
min-width: 220px;
padding: .75rem 0;
z-index: 200;
transition: opacity .25s, transform .25s, visibility .25s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Am Desktop klappt das Untermenue per :focus-within auf, also ohne Zustand in
JavaScript. Escape konnte es deshalb nicht schliessen: Wer mit der Tastatur
navigiert, hatte es offen, solange der Fokus in der Gruppe stand, und keine
Moeglichkeit, es wegzubekommen. Diese Klasse setzt nav.js bei Escape; sie
faellt weg, sobald der Fokus die Gruppe verlaesst oder die Maus sie betritt.
MUSS HINTER den beiden Regeln oben stehen, die Spezifitaet ist gleich. */
.nav-dropdown.is-dismissed .nav-dropdown-menu {
visibility: hidden;
opacity: 0;
transform: translateX(-50%) translateY(-8px);
}
.nav-dropdown-menu a {
display: block;
font-size: .9rem;
font-weight: 400;
color: #1a1a1a;
padding: .65rem 1.5rem;
text-decoration: none;
opacity: 1;
border-radius: 0;
white-space: nowrap;
transition: background .15s, color .15s, padding-left .15s;
}
.nav-dropdown-menu a:hover {
background: rgba(228,4,27,.06);
color: var(--primary-ink);
padding-left: 1.75rem;
}
/* ── HERO COMPACT ─────────────────────────────────────────────── */
.hero--compact {
max-height: 560px;
}
.hero--compact .hero-img {
max-height: 560px;
object-fit: cover;
object-position: center 40%;
}
.hero--compact .hero-overlay {
background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
}
/* ── HERO PROMINENT (Startseite) ──────────────────────────────── */
.hero--prominent .hero-img {
aspect-ratio: 16 / 9;
/* Auf schmalen Viewports ergäbe 16:9 nur rund 220 px Höhe, der Textblock
braucht aber knapp 300 px. Ohne diese Mindesthöhe ragt die Überschrift
unter die Navigation und der Slogan auf den weißen Seitenhintergrund. */
min-height: 440px;
object-fit: cover;
object-position: center 85%;
}
/* Der Rahmen hat genau das Seitenverhaeltnis der Bilddatei (1920 auf 1190),
deshalb wird hier gar nichts beschnitten: Turmspitze und Gebaeudefuss sind
vollstaendig zu sehen.
Moeglich wurde das durch den Zuschnitt des Fotos, nicht durch den Rahmen.
Die Aufnahme war 1920 auf 1371 und zeigte unter dem Haus einen breiten,
leeren Vorplatz. Der ist am 15.08.2026 herausgeschnitten worden; damit ist
das Bild von 1,40:1 auf 1,61:1 gewachsen und der Hero von 914 auf 793 px
bei 1280 px Fensterbreite geschrumpft, ohne dass etwas vom Haus fehlt.
**Wer das Foto tauscht, muss diesen Wert mitziehen**, sonst schneidet der
Rahmen wieder. Kein `object-position` noetig, es gibt keinen Ueberstand. */
.hero--steigerturm .hero-img {
aspect-ratio: 1920 / 1190;
/* Die 440 px Mindesthoehe der Startseite haben hier nichts zu suchen: Sie
machen den Rahmen auf dem Handy hochkant, waehrend das Foto quer liegt,
und schneiden dann seitlich 29 Prozent weg. Auf der Startseite sind sie
noetig, weil dort Fliesstext und Slogan im Hero stehen; hier tragen nur
Eyebrow und Ueberschrift, zusammen 104 px. Ohne die Mindesthoehe ist der
Hero auf einem 390-px-Geraet 242 px hoch und zeigt das Bild vollstaendig. */
min-height: 0;
}
.hero--prominent .hero-overlay {
/* Zwei Ebenen: der Verlauf von oben hält die Kopfzeile lesbar, die weiche
Ellipse dunkelt gezielt die Textzone in der Bildmitte ab. Ohne sie liegt
die weiße Überschrift auf hellem Himmel und Mauerwerk teils unter 3:1. */
background:
radial-gradient(ellipse 52% 32% at 50% 50%, rgba(0,0,0,.66) 0%, rgba(0,0,0,.56) 34%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.06) 90%, transparent 100%),
linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 55%, transparent 100%);
}
/* Die Ellipse der Startseite muss dort einen Fliesstext und den Slogan tragen
und dunkelt entsprechend kraeftig ab. Auf /steigerturm stehen nur Eyebrow und
Ueberschrift, beide mit Schattenkante: Mit den Werten der Startseite lag das
Foto in der Bildmitte sichtbar zu dunkel.
MUSS HINTER .hero--prominent .hero-overlay STEHEN. Beide Selektoren haben
dieselbe Spezifitaet (0,2,0), es entscheidet allein die Reihenfolge. Stand
diese Regel davor, blieb sie am 15.08.2026 wirkungslos, und zwar lautlos:
Die Seite sah unveraendert aus, kein Werkzeug meldet so etwas.
Nach jedem Bildwechsel den Kontrast ueber den tatsaechlichen Glyphpixeln
neu messen, nicht schaetzen. */
.hero--steigerturm .hero-overlay {
background:
radial-gradient(ellipse 54% 30% at 50% 46%, rgba(0,0,0,.46) 0%, rgba(0,0,0,.40) 36%, rgba(0,0,0,.26) 60%, rgba(0,0,0,.11) 80%, rgba(0,0,0,.03) 92%, transparent 100%),
linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 55%, transparent 100%);
}
.hero--prominent .hero-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
left: 0; right: 0;
}
.hero--prominent h1 {
font-size: clamp(2.5rem, 7.5vw, 4.2rem);
text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 3px 18px rgba(0,0,0,.55);
margin-bottom: 1.5rem;
}
.hero--prominent .hero-eyebrow {
font-size: 1.15rem;
letter-spacing: .12em;
margin-bottom: 1.5rem;
}
.hero--prominent .landing-intro {
/* Stand bis zum 15.08.2026 auf rgba(255,255,255,.9) und ohne Schattenkante
und kam damit auf 3,6:1 bei 390 px und 4,0:1 bei 1280 px, also unter die
4,5:1, die das Projekt fuer Lesetext setzt. Der Absatz sitzt unterhalb
der Ellipsenmitte, wo das Foto wieder heller wird. Volldeckend plus
Schatten bringt ihn auf ueber 9:1. */
color: #ffffff;
text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.5);
max-width: 640px;
margin: 0 auto;
font-size: clamp(1.2rem, 1.8vw, 1.4rem);
font-weight: 600;
line-height: 1.7;
margin-bottom: 2rem;
}
/* Der Slogan ist eine Aussage, keine Schaltflaeche. Bis zum 11.08.2026 stand
er als weisser Kasten mit border-radius 20px und Fettschrift im Hero und sah
damit aus wie der einzige Knopf, der sich nicht druecken laesst. Jetzt liegt
er als heller Text direkt auf dem abgedunkelten Bild. */
.hero--prominent .slogan {
display: block;
width: fit-content;
max-width: 100%;
color: #ffffff;
margin: 0 auto;
padding: .5rem 3rem;
font-size: 1.4rem;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 14px rgba(0,0,0,.55);
/* Der Slogan sitzt unterhalb der Ellipse des Hero-Overlays, dort ist das
Foto hell (Mauerwerk, Himmel). Weisse Schrift kam ohne Hilfe auf 1,5:1.
Statt eines Kastens dunkelt hier ein Schleier, der zu allen Seiten
ausblendet: keine Kante, kein Radius, kein Knopf. */
background: radial-gradient(ellipse 95% 82% at 50% 50%,
rgba(0,0,0,.68) 0%,
rgba(0,0,0,.64) 48%,
rgba(0,0,0,.42) 72%,
rgba(0,0,0,.16) 88%,
rgba(0,0,0,0) 100%);
}
.hero--compact .hero-content {
padding-top: 1.5rem;
}
.hero--compact h1 {
font-size: clamp(1.7rem, 5vw, 2.4rem);
margin-bottom: 0;
}
/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
position: relative;
overflow: hidden;
}
.hero-img {
display: block;
width: 100%;
height: auto;
border-radius: 0 0 12px 12px;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 40%, transparent 100%);
border-radius: 0 0 12px 12px;
}
.hero-content {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 2;
color: var(--on-primary);
padding-top: 2.5rem;
}
.hero-eyebrow {
font-size: 1rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: .75rem;
/* Bis zum 15.08.2026 stand hier opacity: .9 und kein Textschatten. Beides
zusammen kostete Kontrast: Die Zeile liegt oberhalb der Ellipsenmitte,
wo das Foto am hellsten ist, und ist mit 18,4 px bei Gewicht 600 keine
Grossschrift, muss also die vollen 4,5:1 erreichen. Sie kam auf 3,6:1.
Volldeckend plus Schattenkante bringt sie auf 7,7:1. */
text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.5);
}
.hero-content h1 {
font-size: clamp(1.85rem, 5.5vw, 3rem);
font-weight: 800;
line-height: 1.15;
text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 14px rgba(0,0,0,.5);
margin-bottom: .75rem;
}
.slogan {
font-size: 1.3rem;
font-weight: 600;
/* Kein opacity mehr: der Text liegt auf einem Foto und braucht vollen
Kontrast, den Halt gibt der Schatten. */
color: #ffffff;
text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 14px rgba(0,0,0,.55);
margin-bottom: 1.5rem;
}
.hero-btn {
display: inline-block;
padding: .75rem 1.75rem;
border-radius: var(--radius);
font-size: .95rem;
font-weight: 700;
text-decoration: none;
transition: transform .2s, box-shadow .2s;
min-height: 44px;
}
.hero-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,.25);
text-decoration: none;
}
.hero-btn--primary {
background: var(--primary);
color: var(--on-primary);
box-shadow: 0 4px 14px rgba(228,4,27,.4);
}
/* ── LANDING HERO ─────────────────────────────────────────────── */
.landing-intro {
max-width: 640px;
margin: 0 auto;
font-size: 1rem;
color: var(--muted-fg);
line-height: 1.7;
}
/* .news-grid, .news-card und .news-more sind am 06.08.2026 entfallen: Die
Startseite hatte zwei Sektionen mit denselben Terminen untereinander,
geblieben ist "Nächste Termine". .news-date nutzt weiterhin /aktuelles. */
.news-date {
font-size: .95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--primary-ink);
display: block;
margin-bottom: .4rem;
}
/* News list (archive page) */
.news-list { margin-top: 1rem; }
.news-item {
padding: 1.25rem 0;
border-bottom: 1px solid var(--border);
}
.news-item:first-child { border-top: 1px solid var(--border); }
.news-item h3 {
font-size: 1.05rem;
color: var(--foreground);
margin-bottom: .4rem;
}
.news-item p {
font-size: .9rem;
color: var(--muted-fg);
line-height: 1.65;
margin-bottom: 0;
}
.news-item a { color: var(--primary-ink); }
/* ── ORTSKARTEN ────────────────────────────────────────────────────
Die beiden Einstiegskarten der Startseite. Bis zum 11.08.2026 waren das
Flip-Cards: Das Foto drehte beim Ueberfahren weg und gab erst dann Adresse
und Beschreibung frei, auf Touch-Geraeten war das Foto nie zu sehen.
Jetzt steht beides untereinander, auf jedem Geraet gleich. */
.ort-karte {
display: block;
text-decoration: none;
color: inherit;
background: var(--card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border-top: 2px solid rgba(228,4,27,.25);
transition: transform .2s ease, box-shadow .2s ease;
height: 100%;
}
.ort-karte:hover,
.ort-karte:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.ort-karte-bild {
width: 100%;
/* height: auto ist noetig, sonst gewinnt das height-Attribut am ![]()
und aspect-ratio bleibt wirkungslos. */
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
/* Das Steigerturm-Foto ist 1,61:1 und wird im 16:9-Rahmen der Karte oben und
unten um rund 10 Prozent beschnitten. Mittig gerahmt fiele die Turmspitze
weg, also das Erkennungszeichen des Hauses. Der Wert holt den Ausschnitt
nach oben; der leere Vorplatz unten fehlt dann, was hier nicht stoert. */
.ort-karte-bild--steigerturm { object-position: center 30%; }
.ort-karte-text {
padding: 1.25rem 1.5rem 1.5rem;
}
.ort-karte-text .label {
font-size: .875rem;
font-weight: 700;
color: var(--primary-ink);
margin: 0 0 .35rem;
}
.ort-karte-text h3 {
font-size: 1.15rem;
margin: 0 0 .5rem;
}
.ort-karte-adresse {
font-size: .9rem;
font-weight: 600;
color: var(--foreground);
margin: 0 0 .5rem;
}
.ort-karte-text p {
font-size: .9rem;
color: var(--muted-fg);
line-height: 1.65;
margin-bottom: 0;
}
/* ── CLICKABLE INFO CARD ──────────────────────────────────────── */
/* .termin-zeile gehoert hier NICHT hinein. Der Selektor a.termin-zeile haette
Spezifitaet (0,1,1) und schluege das display: grid der Komponente weiter
unten (0,1,0), unabhaengig von der Reihenfolge. Ergebnis waere ein Stapel
statt zweier Spalten: die Tageszahl mittig ueber dem Titel. Am 16.08.2026
genau so passiert. Farbe und Unterstreichung setzt .termin-zeile selbst. */
a.info-card--link {
text-decoration: none;
color: inherit;
display: block;
cursor: pointer;
}
a.info-card--link:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.info-card-arrow {
display: inline-block;
margin-top: .75rem;
font-size: .875rem;
font-weight: 700;
color: var(--primary-ink);
}
/* ── SCHEDULE GRID ─────────────────────────────────────────────── */
/* Monthly extras bar */
/* ── MONATLICHE ANGEBOTE ───────────────────────────────────────── */
/* Zweispaltiges Raster statt Flex-Umbruch. Bis zum 17.08.2026 standen hier vier
Eintraege in einer umbrechenden Reihe; mit dem Zuwachs auf sechs (Yoga und
Bewegte Entspannung sind aus dem Tagesprogramm hierher gewandert) brach sie
ungleichmaessig, erst zwei nebeneinander, dann einzeln. Das Raster stellt
gleich lange Spalten, unabhaengig von der Textlaenge. */
.schedule-monthly {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.1rem 1.25rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .35rem 1.75rem;
align-items: start;
margin-top: 1.25rem;
}
/* Die Beschriftung sitzt ueber beiden Spalten, nicht in der ersten. */
.schedule-monthly .monthly-label { grid-column: 1 / -1; margin-bottom: .3rem; }
@media (max-width: 780px) {
.schedule-monthly { grid-template-columns: 1fr; }
}
.schedule-monthly .monthly-label {
font-size: .875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted-fg);
}
.monthly-item a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Titel in Zeile eins, Zeitangabe immer in Zeile zwei. Als Flex-Zeile stand die
Zeit bei kurzen Titeln daneben und bei langen darunter, in derselben Liste also
uneinheitlich. Das Raster erzwingt beide Zeilen unabhaengig von der Textlaenge;
der Punkt bleibt dabei auf der Hoehe des Titels. */
.monthly-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: .4rem;
font-size: .95rem;
color: var(--foreground);
}
.monthly-item .monthly-dot { grid-row: 1; align-self: center; }
.monthly-item a { grid-column: 2; grid-row: 1; }
.monthly-item .mtime { grid-column: 2; grid-row: 2; }
.monthly-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--primary);
flex-shrink: 0;
}
.mtime {
font-size: .875rem;
color: var(--muted-fg);
margin-left: .15rem;
}
/* ── ROAD TIMELINE ─────────────────────────────────────────────── */
/* ── DETAIL CARDS ──────────────────────────────────────────────── */
.detail-card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
overflow: hidden;
scroll-margin-top: 80px;
}
/* Die Karten sind native /. Damit findet die Browsersuche
auch in zugeklappten Karten, und die Aufklapp-Logik braucht kein JavaScript.
Der native Marker wird ersetzt durch das eigene .detail-expand-icon. */
.detail-card-top {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem 1.25rem;
border-top: 2px solid rgba(228,4,27,.25);
cursor: pointer;
transition: background .15s;
list-style: none;
}
.detail-card-top::-webkit-details-marker { display: none; }
.detail-card-top::marker { content: ""; }
.detail-card-top:hover { background: rgba(0,0,0,.015); }
/* Hell getönter Grund statt Vollrot mit Schatten: Auf /steigerturm stehen
zwölf dieser Kreise untereinander, auf /treff drei. Als Vollflächen wirken
sie wuchtig, dieselbe Zurücknahme wie beim Tagesprogramm. */
.detail-icon-circle {
width: 46px; height: 46px;
flex-shrink: 0;
background: rgba(228,4,27,.09);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.detail-icon-circle svg {
width: 22px; height: 22px;
stroke: #b00017;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.detail-title-wrap { flex: 1; }
.detail-title-wrap h3 {
font-size: 1.2rem;
color: var(--foreground);
margin-bottom: .5rem;
}
/* Die Chips im Kartenkopf sind am 16.08.2026 entfallen, aus demselben Grund
wie bei den Terminen: Auf beiden Seiten standen zusammen 49 Stueck in drei
Farbwelten, darunter 13-mal dieselbe Adresse auf einer Seite, die nur von
diesem einen Haus handelt. Der Kartenkopf traegt jetzt eine Zeile, alles
Weitere steht im aufgeklappten Teil. */
.detail-wann {
margin: .2rem 0 0;
font-size: .97rem;
font-weight: 600;
color: var(--muted-fg);
}
/* Kursleitung, Kosten und Anmeldung, frueher Chips im Kopf. Sie stehen jetzt
als erste Zeile im Koerper, also dort, wo man ohnehin nachliest. */
.detail-eckdaten {
margin: 0 0 .9rem;
font-size: .97rem;
font-weight: 600;
color: var(--foreground);
}
.detail-body {
padding: 0 1.75rem 1.75rem;
}
.detail-expand-icon {
margin-left: auto;
flex-shrink: 0;
transition: transform .25s;
color: var(--muted-fg);
}
.detail-expand-icon svg {
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.detail-card[open] .detail-expand-icon {
transform: rotate(180deg);
}
/* Die Einleitungszeile steht seit dem 11.08.2026 im Kartenkopf statt im
zugeklappten Koerper. Vorher sah man von 17 Karten nur Ueberschrift und
Chips und musste raten, was sich dahinter verbirgt. Sie traegt bewusst
weniger Gewicht als die Ueberschrift, damit der Kopf nicht zweimal schreit. */
.detail-lead {
font-size: .95rem;
font-weight: 400;
color: var(--muted-fg);
line-height: 1.6;
margin: .55rem 0 0;
max-width: 62ch;
}
.detail-text {
/* 1rem statt .95rem: der Fliesstext der Karten ist der laengste Lesetext
der Seite und das Publikum ist ueberwiegend aelter. */
font-size: 1rem;
color: #4a4a4a;
line-height: 1.7;
}
.detail-text p:last-child { margin-bottom: 0; }
.detail-text ul { margin: .4rem 0 .9rem 1.1rem; }
.detail-text li { margin-bottom: .45rem; color: #4a4a4a; }
.detail-text li strong { color: var(--foreground); }
/* ── EHRENAMT ──────────────────────────────────────────────────── */
.ehrenamt-box {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 2.5rem;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.ehrenamt-icon {
width: 64px; height: 64px;
background: rgba(228,4,27,.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.ehrenamt-icon svg {
width: 28px; height: 28px;
stroke: var(--primary);
fill: none;
stroke-width: 2;
}
.ehrenamt-box h3 {
font-size: 1.3rem;
color: var(--foreground);
margin-bottom: 1rem;
}
.ehrenamt-box p {
font-size: .95rem;
color: #4a4a4a;
line-height: 1.7;
text-align: left;
}
.ehrenamt-box p + p { margin-top: .9rem; }
.ehrenamt-list {
list-style: none;
padding: 0;
margin: 1rem 0 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
}
.ehrenamt-list li {
background: var(--muted);
padding: .4rem 1rem;
border-radius: 20px;
font-size: .875rem;
font-weight: 600;
color: var(--foreground);
}
.ehrenamt-cta {
display: inline-block;
background: var(--primary);
color: var(--on-primary);
padding: .75rem 2rem;
border-radius: var(--radius);
font-size: .95rem;
font-weight: 700;
text-decoration: none;
transition: transform .2s, box-shadow .2s;
min-height: 44px;
}
.ehrenamt-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(228,4,27,.35);
text-decoration: none;
}
/* ── EHRENAMT HERO ─────────────────────────────────────────────── */
.ehrenamt-hero {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
min-height: 340px;
background: var(--card);
}
.ehrenamt-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ehrenamt-hero-content {
padding: 2rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.ehrenamt-hero-content h2,
.ehrenamt-hero-content h3 {
font-size: 1.3rem;
color: var(--foreground);
margin-bottom: .75rem;
}
.ehrenamt-hero-content p {
font-size: .9rem;
color: var(--muted-fg);
line-height: 1.65;
margin-bottom: .75rem;
}
.ehrenamt-hero-content .ehrenamt-list {
justify-content: flex-start;
margin: .5rem 0 1.25rem;
}
.ehrenamt-hero-content .ehrenamt-cta {
align-self: flex-start;
}
/* Einspaltige Variante, wenn (noch) kein Bild danebensteht. */
/* Kooperationsblock auf /steigerturm. Hebt sich von den Angebotskarten ab,
weil er inhaltlich etwas anderes ist: nicht ein Angebot der AWO, sondern die
Erklaerung, wem das Haus gehoert. Am 17.08.2026 eingefuehrt, vorher trug er
.ehrenamt-hero--single und sah aus wie jede andere Karte. */
.kooperation {
max-width: 720px;
margin: 0 auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.5rem 1.75rem 1.75rem;
}
.kooperation-kopf {
display: flex;
align-items: center;
gap: .9rem;
margin-bottom: .9rem;
}
.kooperation-kopf h3 { margin: 0; font-size: 1.15rem; }
.kooperation-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(228,4,27,.09);
color: #b00017;
}
.kooperation-icon svg { width: 23px; height: 23px; }
.kooperation p { margin: 0; line-height: 1.7; color: var(--muted-fg); }
.ehrenamt-hero--single {
grid-template-columns: 1fr;
min-height: 0;
}
/* ── FOOTER ────────────────────────────────────────────────────── */
footer {
background: var(--card);
color: var(--foreground);
border-top: 3px solid var(--primary);
padding: 3rem 0 0;
font-size: .88rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2.5rem;
align-items: start;
}
/* Der Footer ist eine eigene Landmark: h2 statt h4 vermeidet den
Ueberschriften-Sprung, die Optik bleibt bewusst klein. */
footer h2 {
color: var(--foreground);
margin-bottom: .75rem;
font-size: 1.05rem;
font-weight: 700;
}
footer p { margin-bottom: .45rem; color: #4a4a4a; }
footer a { color: #4a4a4a; }
footer a:hover { color: var(--primary-ink); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: #4a4a4a; font-size: .9rem; }
.footer-links a:hover { color: var(--primary-ink); }
.footer-social {
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem 0;
border-top: 1px solid var(--border);
max-width: 980px;
margin: 0 auto;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(228,4,27,.08);
color: var(--primary-ink);
transition: background .2s, color .2s, transform .2s;
}
.footer-social a:hover {
background: var(--primary);
color: var(--on-primary);
transform: translateY(-2px);
text-decoration: none;
}
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-bottom a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 .35rem;
}
.footer-bottom {
border-top: 1px solid var(--border);
padding: 1rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: .875rem;
color: var(--muted-fg);
max-width: 980px;
margin: 0 auto;
}
.footer-bottom a { color: var(--muted-fg); margin-left: 1.5rem; }
.footer-bottom a:hover { color: var(--foreground); }
/* ── BRAND HEART (AWO-Herz mit Menschen) ───────────────────────── */
.brand-heart {
display: block;
width: 80px;
height: auto;
margin: 0 auto;
}
.brand-heart--md { width: 200px; margin: -2rem auto 0; }
.brand-heart--xl { width: 280px; }
/* ── BACK TO TOP ───────────────────────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 44px; height: 44px;
background: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transition: opacity .25s, visibility .25s, transform .2s;
z-index: 90;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-2px); }
.back-to-top svg {
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
}
/* ── SUBPAGE CONTENT ───────────────────────────────────────────── */
.content { padding: 3rem 0 4rem; }
.content h1 {
font-size: 1.75rem;
color: var(--primary-ink);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
display: inline-block;
position: relative;
padding-bottom: .5rem;
}
.content h1::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 48px; height: 3px;
background: var(--primary);
border-radius: 2px;
}
.content h2 {
font-size: 1.25rem;
color: var(--foreground);
margin: 2.5rem 0 .75rem;
}
.content p {
font-size: .95rem;
color: #4a4a4a;
line-height: 1.75;
margin-bottom: .85rem;
}
.lead {
font-size: 1.15rem;
font-weight: 600;
color: #222;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.back-link {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: 3rem;
font-size: .88rem;
color: var(--muted-fg);
transition: color .2s;
min-height: 44px;
}
.back-link:hover { color: var(--primary-ink); text-decoration: none; }
/* Info-Karten (Über-uns) */
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.info-card {
background: var(--card);
border: 1px solid var(--border);
border-top: 4px solid var(--primary);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
transition: transform .2s, box-shadow .2s;
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.info-card h3 {
font-size: 1.05rem;
color: var(--foreground);
margin-bottom: .5rem;
}
.info-card p { font-size: .9rem; color: #4a4a4a; margin-bottom: .4rem; }
.info-card .label {
font-size: .875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--primary-ink);
margin-bottom: .3rem;
}
.anfahrt {
background: var(--muted);
border-radius: var(--radius);
padding: 1.5rem;
margin-top: 1.5rem;
}
.anfahrt h3 { font-size: 1rem; color: var(--foreground); margin-bottom: .5rem; }
.anfahrt p { font-size: .9rem; color: #4a4a4a; }
/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 780px) {
.ehrenamt-hero { grid-template-columns: 1fr; }
.ehrenamt-hero-img { max-height: 240px; }
.ehrenamt-hero-content { padding: 1.5rem; }
/* Auf schmalen Viewports bricht die Überschrift auf mehr Zeilen um und der
Textblock wird höher als die Ellipse oben. Deshalb hier großflächiger. */
.hero--prominent .hero-overlay {
background:
radial-gradient(ellipse 98% 40% at 50% 50%, rgba(0,0,0,.66) 0%, rgba(0,0,0,.56) 34%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.06) 90%, transparent 100%),
linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 55%, transparent 100%);
}
/* Muss hier wiederholt werden: Die Regel oben hat dieselbe Spezifitaet und
steht frueher, ohne diese Zeilen faellt der Steigerturm-Hero auf dem
Handy auf die dunklen Werte der Startseite zurueck. Etwas kraeftiger als
am Desktop, weil die Ueberschrift hier auf zwei Zeilen umbricht. */
.hero--steigerturm .hero-overlay {
background:
radial-gradient(ellipse 98% 38% at 50% 48%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.45) 36%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.13) 80%, rgba(0,0,0,.04) 92%, transparent 100%),
linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 55%, transparent 100%);
}
.footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.footer-bottom {
flex-direction: column;
gap: .5rem;
text-align: center;
}
.footer-bottom a { margin-left: 0; margin-right: 1rem; }
.detail-card-top {
flex-direction: column;
align-items: flex-start;
gap: .9rem;
}
.detail-icon-circle { width: 46px; height: 46px; }
.detail-icon-circle svg { width: 20px; height: 20px; }
.info-grid { grid-template-columns: 1fr; }
.header-bar { height: 52px; position: relative; }
.header-logo { height: 48px; }
.hero--prominent .hero-eyebrow { display: none; }
.hero--prominent h1 { margin-bottom: .75rem; }
.hero--prominent .landing-intro { font-size: 1rem; margin-bottom: 1.25rem; }
.hero--prominent .slogan { font-size: 1.05rem; padding: .4rem 1.6rem; }
.header-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--background);
border-top: 2px solid var(--primary);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
padding: .75rem 0;
z-index: 150;
}
.header-links.is-open { display: flex; }
.header-links a {
font-size: .95rem;
padding: .7rem 1.5rem;
border-radius: 0;
}
.header-links a:hover { background: var(--muted); }
.nav-dropdown { flex-direction: column; align-items: stretch; position: relative; }
/* Am Link keinen Pfeil mehr: er navigiert, er klappt nicht auf. */
.nav-dropdown > a::after { content: none; }
/* Der Link endet dort, wo der Knopf beginnt. Ohne dieses Polster lag der
Knopf ueber den letzten 56 px des Wortes "Steigerturm": ein Tipp auf das
Wortende klappte auf, statt zu navigieren. Am 11.08.2026 nachgemessen. */
.nav-dropdown > a { margin-right: 56px; }
/* Der Knopf ist 56 mal 44 px, damit er auch mit unsicherer Feinmotorik
sicher zu treffen ist. */
.nav-dropdown-toggle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
width: 56px;
height: 44px;
}
.nav-dropdown-toggle::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .2s ease;
}
.nav-dropdown.is-open > .nav-dropdown-toggle::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.nav-dropdown-menu {
position: static;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
min-width: 0;
padding: 0;
display: none;
}
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }
.nav-dropdown:hover .nav-dropdown-menu { display: none; }
.nav-dropdown.is-open:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
font-size: .88rem;
/* 44 px Mindesthoehe wie jede andere Zielflaeche. Mit .55rem waren es 41. */
padding: .72rem 1.5rem .72rem 2.5rem;
color: var(--muted-fg);
}
.nav-dropdown-menu a:hover { padding-left: 2.5rem; }
.burger-btn { display: flex; }
.hero--compact, .hero--compact .hero-img { max-height: 360px; }
.ehrenamt-hero { min-height: auto; }
/* Road timeline → vertical on mobile */
}
@media (max-width: 520px) {
.hero-content { padding-top: 1.5rem; }
.header-logo { height: 38px; }
.ehrenamt-box { padding: 1.5rem; }
.hero--compact, .hero--compact .hero-img { max-height: 260px; }
}
/* ── INLINE-CSS AUSGELAGERT (D2) ─────────────────────────────── */
.teaser-text {
max-width: 720px;
margin: 0 auto;
text-align: center;
font-size: .95rem;
color: var(--muted-fg);
line-height: 1.7;
}
.teaser-cta { text-align: center; margin-top: 1.5rem; }
.hero-btn--sm { font-size: .88rem; padding: .6rem 1.5rem; }
/* ── ANGEBOTSVERZEICHNIS ───────────────────────────────────────── */
/* Die Einleitungssaetze stehen hier bewusst offen und nicht zugeklappt:
Das ist die Seite, auf der die Suche nach "Pflege" oder "Rente" greifen soll. */
/* Dieselbe Lesebreite wie die Liste darunter, damit beide Bloecke auf einer
Kante stehen. Auf dieser Seite wird links ausgerichtet, nicht zentriert: Die
Ueberschrift traegt ihren roten Strich links, ein mittiger Block darunter
saehe daneben aus. Auf der Startseite ist es umgekehrt, dort ist der ganze
Abschnitt mittig. */
.angebot-hinweis {
/* Dieselbe Breite UND dieselbe Achse wie der Block darueber. In den
Abschnitten von /steigerturm und /treff sind die Info-Kacheln mittig
(info-grid--narrow), der Hinweis muss also auch mittig stehen; ohne
margin auto sass er 110 px weiter links und die Seite sah schief aus.
Auf /angebote ist es umgekehrt, siehe .content .angebot-hinweis. */
max-width: 720px;
background: var(--muted);
border-left: 4px solid var(--primary);
border-radius: var(--radius);
padding: 1rem 1.25rem;
/* auto in der Mitte, nicht 0: Die Kurzschreibweise steht hier hinter allem
anderen und wuerde einzelne margin-left-Angaben davor zuruecksetzen. */
margin: 1.5rem auto 2rem;
}
.angebot-hinweis p { margin: 0; }
/* Textseiten (main.content, also /angebote) tragen ihre Ueberschrift mit rotem
Strich links; dort bleibt auch der Hinweis an der linken Kante. */
.content .angebot-hinweis { margin-left: 0; }
/* Auf Lesebreite begrenzt und mittig, wie die Terminliste der Startseite.
Bei voller Containerbreite lief der Beschreibungstext auf rund 93 Zeichen je
Zeile; komfortabel sind 60 bis 75. Mit 720 px Kartenbreite und 1,5rem Polster
bleiben rund 72 Zeichen. Am 17.08.2026 nachgemessen. */
.angebot-liste {
display: grid;
gap: 1.25rem;
max-width: 720px;
}
/* Der ganze Eintrag ist anklickbar, ohne Verweistext darunter. Bis zum
17.08.2026 endete jeder der 16 Eintraege mit "Alle Angaben und Kontakt",
also sechzehnmal derselbe Satz auf einer Seite. Geloest ueber ein ::after am
Titellink statt ueber ein um alles: So bleibt der Linkname der Titel des
Angebots, und ein Screenreader liest nicht den ganzen Absatz vor. */
.angebot {
position: relative;
transition: border-color .2s, box-shadow .2s;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.25rem 1.5rem 1.35rem;
}
.angebot h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.angebot h3 a {
color: var(--foreground);
display: inline-block;
min-height: 44px;
line-height: 1.35;
}
.angebot h3 a:hover { color: var(--primary-ink); }
.angebot h3 a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius);
}
.angebot:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
/* Kein underline im Hover: Der Pfeil am Titel und der rote Rahmen der Karte
sagen bereits, dass der Eintrag ein Verweis ist. Eine dritte Markierung ist
doppelt. Fliesstext-Links bleiben davon unberuehrt, die brauchen sie. */
.angebot:hover h3 a,
.angebot h3 a:hover { color: var(--primary-ink); text-decoration: none; }
/* Der Pfeil ersetzt den frueheren Verweistext und sagt, dass es weitergeht. */
.angebot h3 a .pfeil { display: none; }
.angebot h3::after {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
margin-left: .4rem;
vertical-align: -.08em;
background: var(--primary-ink);
-webkit-mask: var(--pfeil) center / contain no-repeat;
mask: var(--pfeil) center / contain no-repeat;
}
/* Bis zum 16.08.2026 war das eine Reihe Chips, deshalb flex mit gap. Jetzt
eine Zeile aus Zeitangabe und Ort, durch Mittelpunkt getrennt. */
.angebot-wann {
margin: 0 0 .6rem;
font-size: .97rem;
font-weight: 600;
color: var(--muted-fg);
}
.angebot-lead { margin: 0 0 .6rem; color: var(--foreground); }
/* ── KONTAKTSEITE ──────────────────────────────────────────────── */
/* Telefonnummer und E-Mail sind die betriebswichtigsten Angaben der Seite.
Sie stehen als zwei antippbare Zeilen da, ohne Beschriftung darueber und
ohne Erlaeuterung darunter: Das Symbol sagt, was es ist. Bis zum 15.08.2026
war jede der beiden eine Karte aus Ueberschrift, Wert und Absatz. */
.kontaktwege {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
gap: .75rem;
margin: 1.25rem 0 1.75rem;
}
.kontaktweg {
display: flex;
align-items: center;
gap: .9rem;
padding: .9rem 1.15rem;
min-height: 44px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
color: var(--primary-ink);
font-size: 1.2rem;
font-weight: 700;
transition: border-color .2s, box-shadow .2s;
}
.kontaktweg:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
text-decoration: none;
}
/* Hell getoenter Grund mit rotem Symbol, nicht vollrot: Die Flaeche ist hier
Schmuck, keine Schaltflaeche. Gleiche Behandlung wie .detail-icon-circle. */
.kontaktweg-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(228,4,27,.09);
color: #b00017;
}
.kontaktweg-icon svg { width: 21px; height: 21px; }
/* Die Adresse ist 25 Zeichen lang und muss auf 390 px umbrechen duerfen. */
.kontaktweg-wert { overflow-wrap: anywhere; }
/* Haeufige Fragen: Frage und Antwort statt Stichwort und Doppelpunkt.
Der rote Streifen links greift den Balken der .info-card auf, liegt aber
an der Seite, damit die beiden Bausteine unterscheidbar bleiben. */
.faq {
display: grid;
gap: .7rem;
margin: 1.25rem 0 0;
}
/* Weisser Grund mit Rahmen, nicht --muted: Auf dem getoenten Grund kommt die
Linkfarbe #E4041B nur auf 4,49:1 und reisst damit die 4,5:1, die das Projekt
setzt. Auf Weiss sind es 4,85:1. Nachgerechnet am 15.08.2026. */
.faq-item {
padding: 1.05rem 1.25rem;
background: var(--card);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius) var(--radius) 0;
}
.faq dt {
font-weight: 700;
font-size: 1.05rem;
color: var(--foreground);
margin-bottom: .3rem;
}
.faq dd {
margin: 0;
line-height: 1.65;
color: var(--foreground);
}
.info-grid--narrow { max-width: 720px; margin: 0 auto; }
.info-grid--narrow .info-card ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.info-grid--narrow .info-card li { margin-bottom: .5rem; }
.treff-back { text-align: center; margin-top: 2rem; }
/* 404 page */
.error-page { text-align: center; padding: 5rem 1.25rem; }
.error-page h1 { font-size: 4rem; color: var(--primary-ink); margin-bottom: .5rem; }
.error-page p { font-size: 1.15rem; color: var(--foreground); margin-bottom: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-25 { margin-top: 2.5rem; }
/* Lange URLs und E-Mail-Adressen in Fließtexten (z.B. Datenschutz) dürfen
die Zeile umbrechen, sonst scrollt die Seite auf dem Handy seitlich. */
.content a, .detail-text a { overflow-wrap: anywhere; }
.pb-2 { padding-bottom: 2rem; }
/* ── TAGESPROGRAMM ─────────────────────────────────────────────────
Warme Kartenfassung mit den Icon-Kreisen der Seite, gegliedert in
Vormittag, Mittag/Nachmittag und Abend. Die Raumzuordnung steht als
farbiger Punkt plus ausgeschriebenem Namen, oben erklärt sie eine
Legende. Vorgänger waren ein Raster nach Räumen (Uhrzeit lief mobil
rückwärts) sowie drei zu grobe Listenfassungen.
────────────────────────────────────────────────────────────────── */
.tagesprogramm {
/* eigene, warme Zusatztoken; alles andere kommt aus styles.css */
--tp-surface: #FBF7F3;
--tp-card: #ffffff;
--tp-border: #ebe2da;
--tp-line: rgba(228,4,27,.22);
--tp-title: #1a1a1a;
--tp-meta: #5a5044;
--tp-note-bg: #fdf3d8;
--tp-note-fg: #6d5100;
--tp-tint: rgba(228,4,27,.08);
--tp-icon-bg: rgba(228,4,27,.09);
--tp-icon-fg: #b00017;
background: var(--tp-surface);
padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2rem);
}
.tp-inner { max-width: 980px; margin: 0 auto; }
/* ── Kopf ─────────────────────────────────────────────────────── */
.tp-head { margin-bottom: 1.5rem; }
.tp-eyebrow {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .875rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--primary-ink);
margin-bottom: .5rem;
}
.tp-eyebrow svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-head h2 {
font-size: clamp(1.75rem, 5.2vw, 2.4rem);
font-weight: 800;
letter-spacing: -.015em;
color: var(--tp-title);
margin-bottom: .3rem;
}
.tp-sub {
font-size: 1.06rem;
font-weight: 500;
color: var(--tp-meta);
margin: 0;
max-width: 46ch;
text-wrap: balance;
}
/* Die Raum-Legende (Bürgerbüro, Kulturforum, Heimatforum) samt Farbpunkten
und den Klassen .tp--bb/.tp--kf/.tp--hf ist am 15.08.2026 entfallen, siehe
Kommentar in src/steigerturm.html. Mit ihr fielen .tp-legend, .tp-dot und
.tp-room weg; die Karten nennen jetzt Uhrzeit, Titel und Person. */
/* ── Tageskapitel ─────────────────────────────────────────────── */
.tp-chapter + .tp-chapter { margin-top: 2.4rem; }
.tp-chapter-head {
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.tp-chapter-icon {
width: 40px; height: 40px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--tp-tint);
display: inline-flex;
align-items: center;
justify-content: center;
}
.tp-chapter-icon svg {
width: 21px; height: 21px;
stroke: var(--primary-ink);
fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tp-chapter-head h3 {
font-size: 1.22rem;
font-weight: 800;
color: var(--tp-title);
letter-spacing: -.01em;
}
.tp-chapter-span {
font-size: .95rem;
font-weight: 600;
color: var(--tp-meta);
font-variant-numeric: tabular-nums;
}
.tp-rule {
flex: 1 1 60px;
height: 2px;
min-width: 40px;
border-radius: 2px;
background: linear-gradient(90deg, var(--tp-line), rgba(228,4,27,0));
}
/* ── Kartenraster ─────────────────────────────────────────────── */
.tp-list {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .9rem;
}
/* Bleibt in einem Kapitel eine Karte allein in der letzten Reihe,
laeuft sie ueber die volle Breite. Kein Loch im Raster. */
.tp-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tp-list > li:last-child:nth-child(odd) .tp-meta {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: .25rem 1.1rem;
}
.tp-card {
display: flex;
align-items: flex-start;
gap: 1rem;
height: 100%;
padding: 1.15rem 1.15rem 1.2rem;
background: var(--tp-card);
border: 1px solid var(--tp-border);
border-radius: 16px;
box-shadow: var(--shadow-sm);
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.tp-card:hover {
text-decoration: none;
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(228,4,27,.38);
}
a.tp-card:hover { text-decoration: none; }
a.tp-card:hover .tp-title { color: var(--primary-ink); }
a.tp-card:hover .tp-go { transform: translateX(3px); opacity: 1; }
/* Icon-Kreis: Bildmarke der Seite */
/* Leise Variante: heller Grund, rotes Symbol. Vollrote Kreise mit Schatten
und Ring wirken bei zehn Karten nebeneinander zu laut. Das Muster gibt es
auf der Seite schon bei .ehrenamt-icon. */
.tp-icon {
width: 42px; height: 42px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--tp-icon-bg);
display: inline-flex;
align-items: center;
justify-content: center;
}
.tp-icon svg {
width: 21px; height: 21px;
stroke: var(--tp-icon-fg);
fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.tp-body { flex: 1 1 auto; min-width: 0; }
/* Uhrzeit: die meistgesuchte Information, zuerst und in Markenfarbe */
.tp-time {
display: block;
font-size: 1.02rem;
font-weight: 800;
color: var(--primary-ink);
font-variant-numeric: tabular-nums;
letter-spacing: .005em;
line-height: 1.3;
margin-bottom: .18rem;
}
.tp-title {
display: block;
font-size: 1.14rem;
font-weight: 700;
line-height: 1.35;
color: var(--tp-title);
letter-spacing: -.008em;
margin-bottom: .5rem;
text-wrap: balance;
}
.tp-meta {
display: flex;
flex-direction: column;
gap: .22rem;
font-size: .95rem;
line-height: 1.45;
color: var(--tp-meta);
}
.tp-person { font-weight: 500; }
.tp-note {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: .35rem;
margin-top: .45rem;
padding: .22rem .7rem;
border-radius: 20px;
background: var(--tp-note-bg);
color: var(--tp-note-fg);
font-size: .875rem;
font-weight: 700;
line-height: 1.4;
}
.tp-note svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-go {
flex: 0 0 auto;
align-self: center;
margin-left: .2rem;
opacity: .55;
color: var(--primary-ink);
transition: transform .18s ease, opacity .18s ease;
}
.tp-go svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Abschlusszeile */
.tp-foot {
display: flex;
align-items: flex-start;
gap: .6rem;
margin-top: 2.2rem;
padding-top: 1.2rem;
border-top: 1px solid var(--tp-border);
font-size: .95rem;
font-weight: 500;
color: var(--tp-meta);
}
.tp-foot svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: .18rem; stroke: var(--primary-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 72ch statt 62: Der Satz braucht 618 px und passte damit nicht in die 607 px
von 62ch, brach also nach dem zweiten Wort der zweiten Haelfte um und liess
rechts 370 px frei. Er steht jetzt in einer Zeile. Wer den Text aendert,
messe die Breite nach, statt die Begrenzung weiter aufzuziehen: Ab etwa
75 Zeichen wird eine Zeile unbequem zu lesen. */
.tp-foot p { margin: 0; max-width: 72ch; }
/* ── Mobil ────────────────────────────────────────────────────── */
@media (max-width: 780px) {
.tp-list { grid-template-columns: 1fr; gap: .8rem; }
.tp-list > li:last-child:nth-child(odd) .tp-meta {
flex-direction: column;
align-items: flex-start;
flex-wrap: nowrap;
gap: .22rem;
}
.tp-card { padding: 1rem; gap: .85rem; border-radius: 14px; }
.tp-icon { width: 46px; height: 46px; box-shadow: 0 3px 10px rgba(228,4,27,.28), 0 0 0 4px var(--tp-tint); }
.tp-icon svg { width: 22px; height: 22px; }
.tp-time { font-size: 1rem; }
.tp-title { font-size: 1.06rem; }
.tp-chapter-head { gap: .6rem; }
.tp-chapter-head h3 { font-size: 1.12rem; }
.tp-rule { display: none; }
.tp-chapter-span { flex-basis: 100%; margin-left: 3.1rem; margin-top: -.55rem; }
.tp-go { display: none; }
}
/* ── Dark Mode ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
.tagesprogramm {
--tp-surface: #1c1a19;
--tp-card: #262322;
--tp-border: #3c3734;
--tp-line: rgba(255,107,107,.30);
--tp-title: #f0ece9;
--tp-meta: #b3a89f;
--tp-note-bg: #3b3220;
--tp-note-fg: #f4d68a;
--tp-tint: rgba(255,107,107,.12);
--tp-icon-bg: rgba(255,107,107,.16);
--tp-icon-fg: #ff8f84;
}
a.tp-card:hover { border-color: rgba(255,107,107,.45); }
}
/* Bewegung reduzieren */
/* ── FLYER: Teaser und Einblendung ─────────────────────────────
Der Teaser nimmt die Bildsprache des Hinweiskastens auf (heller Grund,
roter Streifen links), damit er als Hinweis gelesen wird und nicht als
Werbebanner. Die Einblendung selbst ist ein natives