/* ===================================================== Kirche bewegt! – Hennstedter Spendenlauf Pink · Beige · Ichthys · Laufschuh ===================================================== */ :root { color-scheme: light only; /* === THEME "kirche-bewegt" (Default – Pink, Spendenlauf 2025) === */ --primary: #e91e63; --primary-dark: #c2185b; --primary-light: #f8bbd0; --primary-soft: #fce4ec; --neutral-light: #f5ede0; --neutral-dark: #e8dbc3; --neutral-cream: #fbf7f0; --accent: #d4a017; --ink: #2a1e24; --ink-soft: #5a4a52; --white: #ffffff; --font-display: 'Archivo Black', 'Archivo', Impact, sans-serif; --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 6rem; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --transition: 0.25s ease; --transition-slow: 0.5s ease; --shadow-soft: 0 4px 20px rgba(42, 30, 36, 0.08); /* Shadow-Hover nutzt theme-farbigen Ring + großen Schatten */ --shadow-hover: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent), 0 18px 48px color-mix(in srgb, var(--primary) 32%, transparent); } @supports not (color: color-mix(in srgb, red, blue)) { :root { --shadow-hover: 0 0 0 4px rgba(233, 30, 99, 0.15), 0 18px 48px rgba(233, 30, 99, 0.3); } } /* Legacy-Aliase auf BODY-Ebene definiert, damit Theme-Overrides auf body[data-theme] korrekt in die Kette greifen. Wichtig: die Aliase referenzieren var(--primary) und werden am Verwendungsort aufgelöst – dadurch wirkt der Theme-Swap im gesamten Baum. */ body { --pink: var(--primary); --pink-dark: var(--primary-dark); --pink-light: var(--primary-light); --pink-soft: var(--primary-soft); --beige: var(--neutral-light); --beige-dark: var(--neutral-dark); --cream: var(--neutral-cream); --gold: var(--accent); /* Textfarbe auf primary-farbigen Flächen. Default weiß; helle Themes (sommer) überschreiben. */ --on-primary: var(--white); } /* ===================================================== Themes – via aktivierbar ===================================================== */ /* "kirche-bewegt" ist der Default (s. :root). */ /* "schwimmbad" – 4. Spendenlauf 2026, kräftiges Hellblau + Lila-Akzent */ body[data-theme="schwimmbad"] { --primary: #03a9f4; /* richtig helles, leuchtendes Blau */ --primary-dark: #0277bd; --primary-light: #81d4fa; --primary-soft: #e1f5fe; --accent: #7b1fa2; --accent-soft: #e1bee7; } /* "sommer" – Gelb (Flächen) & Lila (Texte/Buttons) */ body[data-theme="sommer"] { --primary: #f1c40f; /* Gelb = großflächige Bereiche */ --primary-dark: #d4ac0d; --primary-light: #f9e79f; --primary-soft: #fef5d0; --accent: #8e44ad; /* Lila = Hervorhebungen, Buttons */ --accent-soft: #e8daef; /* Auf gelben Primary-Flächen ist Weiß unlesbar → dunkle Schrift nutzen */ --on-primary: #2a1e24; } /* "teal" – Türkis & Korallrot */ body[data-theme="teal"] { --primary: #00acc1; --primary-dark: #00838f; --primary-light: #80deea; --primary-soft: #e0f7fa; --accent: #e53935; --accent-soft: #ffcdd2; } /* "forest" – Flaschengrün & Terrakotta */ body[data-theme="forest"] { --primary: #2e7d32; --primary-dark: #1b5e20; --primary-light: #a5d6a7; --primary-soft: #e8f5e9; --accent: #d84315; --accent-soft: #ffccbc; } /* "autumn" – Orange & Petrol */ body[data-theme="autumn"] { --primary: #ef6c00; --primary-dark: #b53d00; --primary-light: #ffcc80; --primary-soft: #fff3e0; --accent: #00695c; --accent-soft: #b2dfdb; } /* ===================================================== Theme-Akzent-Overrides: zweite Farbe prominent einsetzen Greift nur bei aktivem data-theme (Default bleibt warm-beige-pink) ===================================================== */ /* Kirchturm-Badge + Warum-Logo: Border bleibt beige (Neutralton, passt zu beiden Theme-Farben) */ body[data-theme] .hero-cta-speech { border-color: var(--accent); } body[data-theme] .hero-cta-speech::after { border-right-color: var(--accent); border-bottom-color: var(--accent); } body[data-theme] .warum-logo::after { border-color: var(--accent); opacity: 0.85; } body[data-theme] .edition-card-highlight { border-color: var(--accent); } body[data-theme] .anmeldung-wrap { box-shadow: 0 0 0 4px var(--accent), 0 12px 40px rgba(0, 0, 0, 0.18) !important; } /* === AKZENT-FARBE (2. Farbe) übernimmt alle Text-Hervorhebungen === Logik: Strukturelemente/Hintergründe = primary, Text-Aufmerksamkeit = accent */ /* Headlines (Section-Titles, Hero-H1, Subpage-Titles, H3-Cards, Warum-Titel) */ body[data-theme] .section-title, body[data-theme] .hero-h1, body[data-theme] .hero-h1 strong, body[data-theme] .subpage-title, body[data-theme] .warum-title, body[data-theme] .info-bobbel h3, body[data-theme] .fact-value, body[data-theme] .edition-card h3, body[data-theme] .kontakt-card h3, body[data-theme] .impressum-block h3, body[data-theme] .legal-content h2, body[data-theme] .legal-content h3, body[data-theme] .results-downloads h3, body[data-theme] .strecke-infos h3 { color: var(--accent); } /* Hero-Info-Kreis (Schwimmbad Hennstedt!) */ body[data-theme] .hero-info-badge { color: var(--accent); } body[data-theme] .hero-info-badge-highlight { color: var(--accent); } /* Hero-Meta-Zeilen: Wann / Wo / Strecken-Überschriften */ body[data-theme] .hero-meta-row strong { color: var(--white); /* auf Pink/Primary-Hintergrund bleibt weiß */ } body[data-theme] .hero-meta-row a { color: var(--accent); } /* Meta-Labels auf hellem Grund (fact-label, section-lead) */ body[data-theme] .fact-label, body[data-theme] .section-lead { /* bleiben ink-soft */ } /* Eyebrows und kategorische Labels */ body[data-theme] .warum-eyebrow, body[data-theme] .hero-edition, body[data-theme] .sponsor-cat, body[data-theme] .section-lead strong { color: var(--accent); } /* Semantische in Warum-Points bleiben Akzent */ body[data-theme] .warum-points li strong { color: var(--accent); } /* Primary Buttons (Jetzt anmelden CTA und Outline-White Button im Hero) werden Akzent */ body[data-theme] .btn-white { background: var(--accent); color: var(--white); } body[data-theme] .btn-white:hover { background: var(--primary-dark); color: var(--white); } body[data-theme] .btn-outline-white:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } body[data-theme] .btn-primary { background: var(--accent); } body[data-theme] .btn-primary:hover { background: var(--primary-dark); } /* Info-Bobbel-Links + Strecken-Links + generelle Pink-Links */ body[data-theme] .info-bobbel-link, body[data-theme] .edition-link, body[data-theme] a { color: var(--accent); } body[data-theme] .info-bobbel-link:hover, body[data-theme] .edition-link:hover, body[data-theme] a:hover { color: var(--primary-dark); } /* Ausnahmen: weiße Links auf primary-Sections bleiben weiß */ body[data-theme] .section-pink a, body[data-theme] .hero a, body[data-theme] .nav a { color: var(--white); } body[data-theme] .nav.scrolled a, body[data-theme] .body-subpage .nav a { color: var(--ink); } /* Footer-Brand + Footer-Links → Primary (Hellblau) */ body[data-theme] .footer-brand { color: var(--primary); } body[data-theme] .footer-links a { color: var(--primary); } body[data-theme] .footer-links a:hover { color: var(--primary-dark); } /* Icons in Fact-Cards, Info-Bobbeln, Warum-Points: default-State mit Akzent-Tint */ body[data-theme] .fact-icn-wrap, body[data-theme] .info-bobbel-icn, body[data-theme] .warum-point-icn { color: var(--accent); background: var(--accent-soft, var(--primary-soft)); } body[data-theme] .fact-card:hover .fact-icn-wrap, body[data-theme] .info-bobbel:hover .info-bobbel-icn, body[data-theme] .warum-wrap:hover .warum-point-icn { background: var(--accent); color: var(--white); } /* Edition-Card next (aktuelles Jahr 2026): Akzent als markante 2. Farbe */ body[data-theme] .edition-card-next .edition-zweck { color: var(--accent); } /* Info-Bobbel-list-fee (Startgebühr-Werte) */ body[data-theme] .info-bobbel-list-fee .info-bobbel-val strong { color: var(--accent); } /* Timeline-Dot-Highlight (animiert bei Laufstarts) + Timeline-Linie: Primary-Gradient bleibt, aber der Pulse-Outer-Ring wird Accent-soft */ body[data-theme] .run-dot-highlight { box-shadow: 0 0 0 4px var(--accent-soft, var(--primary-soft)); } body[data-theme] .run-content h3 { color: var(--accent); } body[data-theme] .run-time { color: var(--accent); } /* "Sei dabei!"-Sprechblase: Akzent-Hintergrund, kein Rahmen */ body[data-theme] .hero-cta-speech { background: var(--accent); border: 0; } body[data-theme] .hero-cta-speech::after { background: var(--accent); border: 0; } /* Card-Hover-Border (alle schrägen Hover-Karten): Accent statt Primary */ body[data-theme] .fact-card:hover, body[data-theme] .info-bobbel:hover, body[data-theme] .edition-card:hover, body[data-theme] .gallery-teaser-item:not(.gallery-teaser-cta):hover, body[data-theme] .sponsor-grid-main .sponsor-card:hover, body[data-theme] .sponsor-card-partner:hover, body[data-theme] .edition-card-next:hover, body[data-theme] .druck-index-card:hover { border-color: var(--accent); } /* Edition-Highlight Standard-Border (nicht-Hover) auch Accent */ body[data-theme] .edition-card-highlight { border-color: var(--accent); } /* Section-Title-Unterstrich in Accent */ body[data-theme] .section-title::after { background: var(--accent); } /* Shadow-Hover-Glow in Accent statt Primary (überschreibt die :root-Variable) */ body[data-theme] { --shadow-hover: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 48px color-mix(in srgb, var(--accent) 34%, transparent); } /* Zentraler SVG-Farb-Override weiter unten (nutzt --logo-hue). */ /* Nav-Logo Border im Scroll-Zustand in Akzent-Farbe */ body[data-theme] .nav.scrolled .nav-logo-wrap, body[data-theme] .body-subpage .nav-logo-wrap { border-color: var(--accent); } /* Nav-Logo im Hero-State (nicht scrolled): Border lila, Logo-Farbe lila */ body[data-theme] .nav:not(.scrolled) .nav-logo-wrap { border-color: var(--accent); } /* Themes: immer die pinke Variante anzeigen und via hue-rotate umfärben (beige-Variante off) */ body[data-theme] .nav-logo-beige { opacity: 0 !important; } body[data-theme] .nav-logo-pink { opacity: 1 !important; } body[data-theme="schwimmbad"] .nav-logo-pink, body[data-theme="sommer"] .nav-logo-pink { filter: hue-rotate(-55deg) saturate(1.3); } /* SVG-Logos (logo-secundus-dot.svg): hartkodiertes Pink (~340°) via hue-rotate in Accent drehen. Per Theme eine CSS-Variable --logo-hue setzen, alle Kirche-Logos nutzen sie. */ body[data-theme="schwimmbad"] { --logo-hue: -55deg; --logo-sat: 1.1; } body[data-theme="sommer"] { --logo-hue: -55deg; --logo-sat: 1.0; } body[data-theme="teal"] { --logo-hue: 20deg; --logo-sat: 1.3; } body[data-theme="forest"] { --logo-hue: 35deg; --logo-sat: 1.4; } body[data-theme="autumn"] { --logo-hue: 190deg; --logo-sat: 1.2; } body[data-theme] .hero-kirche-badge img, body[data-theme] .warum-logo img, body[data-theme] .nav-logo-pink, body[data-theme] .gallery-teaser-logo, body[data-theme] .druck-index-logo, body[data-theme] .urkunde-logo, body[data-theme] .poster-kirche-badge img, body[data-theme] .poster-initiative img { filter: hue-rotate(var(--logo-hue, 0deg)) saturate(var(--logo-sat, 1)); } /* Für die Bilder im Hero-Arc (SVG hart-kodiertes Pink) – Fallback ist OK, das passiert später auch hier wenn wir die SVGs dynamisch einfärben. */ /* ===================================================== SOMMER-THEME – Gelb = Fläche, Lila = Hervorhebung Sonderbehandlung: Auf gelben Flächen ist Weiß unlesbar, daher dunkle/lila Schrift. Sticky-Header bekommt Lila-Hintergrund + gelbe Links. ===================================================== */ /* 0) Buttons auf gelber Fläche: Anmelde-Button kräftig Lila + Schatten (Pop!), Outline-Button (Mehr erfahren) lila Rand + lila Schrift statt unsichtbarem Weiß */ body[data-theme="sommer"] .btn-white { background: var(--accent); color: var(--white); box-shadow: 0 6px 20px rgba(142, 68, 173, 0.45); border-color: var(--accent); } body[data-theme="sommer"] .btn-white:hover { background: var(--primary-dark); /* dunkleres Gelb */ color: var(--accent); box-shadow: 0 8px 26px rgba(142, 68, 173, 0.55); } body[data-theme="sommer"] .btn-outline-white { color: var(--accent); border-color: var(--accent); background: rgba(255,255,255,0.55); } body[data-theme="sommer"] .btn-outline-white:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } /* 1) Text auf großen gelben Flächen (Hero-Block, .section-pink, Pink-Sektionen) → dunkel */ body[data-theme="sommer"] .section-pink .section-title, body[data-theme="sommer"] .section-pink h3, body[data-theme="sommer"] .hero-meta-row strong, body[data-theme="sommer"] .hero-meta-row div span, body[data-theme="sommer"] .hero-partners-label, body[data-theme="sommer"] .section-pink .section-lead { color: var(--on-primary); } /* Links auf gelben Flächen → Lila (Accent), gut lesbar auf Gelb */ body[data-theme="sommer"] .section-pink a, body[data-theme="sommer"] .hero a, body[data-theme="sommer"] .hero-meta-row a { color: var(--accent); } /* Buttons auf gelben Flächen: weißer Button mit lila Schrift bleibt; der btn-white wird (per Theme-Regel) accent=lila mit weißer Schrift – das ist auf Gelb gut sichtbar. */ /* 2) Sticky-Header: Lila Hintergrund + gelbe Links */ body[data-theme="sommer"] .nav.scrolled { background: var(--accent); /* Lila */ } body[data-theme="sommer"] .nav.scrolled a, body[data-theme="sommer"] .nav.scrolled .nav-link { color: var(--primary); /* Gelb */ } body[data-theme="sommer"] .nav.scrolled .nav-wordmark { color: var(--primary); /* Gelb */ } body[data-theme="sommer"] .nav.scrolled .nav-wordmark em { color: var(--primary-light); } /* Sticky-Header Swoosh-Wellenlinie (oberer Rand) in Gelb statt Pink-Variable */ body[data-theme="sommer"] .nav::before { background-color: var(--accent); } /* Cream-Swoosh-Basis unter dem Lila-Header → ebenfalls lila, damit der Übergang stimmt */ body[data-theme="sommer"] .nav.scrolled::after { background-color: var(--accent); } /* 3) Kirchenlogo im Sticky-Header bleibt LILA (Accent) – nicht gelb. Das Logo wird via hue-rotate aus dem Pink-Original gedreht; für Sommer auf Lila (≈ -55deg passt). Border im Scroll-Zustand ebenfalls gelb für Kontrast. */ body[data-theme="sommer"] .nav.scrolled .nav-logo-wrap { border-color: var(--primary); /* gelber Ring um lila Logo */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--ink); line-height: 1.6; background: var(--beige); overflow-x: hidden; font-weight: 400; } img { max-width: 100%; height: auto; display: block; } a { color: var(--pink); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--pink-dark); } strong { font-weight: 700; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; } .section { padding: var(--spacing-xl) 0; position: relative; } .section-beige { background: var(--beige); --swoosh-from: var(--beige); } .section-white { background: var(--cream); --swoosh-from: var(--cream); } .section-pink { background: var(--pink); color: var(--white); --swoosh-from: var(--pink); } .section-pink .section-title, .section-pink h3 { color: var(--white); } .section-pink a { color: var(--white); text-decoration: underline; } .section-pink a:hover { color: var(--pink-soft); } .section-pink-soft { background: var(--pink-soft); --swoosh-from: var(--pink-soft); } /* Swoosh-Übergang zwischen Sektionen (oberer Rand jeder Section) */ .section, .hero { position: relative; } .section + .section::before, .hero + .section::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 70px; background-color: var(--swoosh-prev, transparent); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; mask: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; z-index: 5; pointer-events: none; } /* Vorherige Section-Farbe in Custom Prop setzen */ .section-beige + .section::before { background-color: var(--beige); } .section-white + .section::before { background-color: var(--cream); } .section-pink + .section::before { background-color: var(--pink); } .section-pink-soft + .section::before { background-color: var(--pink-soft); } .hero + .section::before { background-color: var(--pink); } .section-title { font-size: clamp(2.25rem, 6vw, 4rem); color: var(--pink); margin-bottom: var(--spacing-md); text-align: center; text-transform: uppercase; } .section-lead { font-size: 1.15rem; text-align: center; max-width: 640px; margin: 0 auto var(--spacing-lg); color: var(--ink-soft); } .section-pink .section-lead { color: var(--pink-soft); } .lead { font-size: 1.15rem; line-height: 1.7; } /* ===================================================== Navigation ===================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: all var(--transition); } .nav.nav-zoom-hidden, .nav-toggle.nav-zoom-hidden { opacity: 0 !important; pointer-events: none !important; visibility: hidden; } .nav.scrolled { background: rgba(251, 247, 240, 0.95); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(42, 30, 36, 0.1); } /* Sticky-Header Swoosh – Cream-Füllung mit pinkem oberen Rand folgt der Wellenform */ .nav::before, .nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px; pointer-events: none; transition: opacity var(--transition); opacity: 0; } /* Cream-Swoosh (base) */ .nav::after { background-color: rgba(251, 247, 240, 0.95); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; mask: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; filter: drop-shadow(0 6px 8px rgba(42, 30, 36, 0.08)); } /* Pinke Wellenlinie direkt auf oberer Kante des Cream-Swooshs (Mask-XOR zweier versetzter Pfade) */ .nav::before { background-color: var(--pink); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%, url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; -webkit-mask-composite: xor; mask: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%, url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; mask-composite: exclude; z-index: 1; } @media (max-width: 640px) { .nav::before, .nav::after { height: 22px; } } .nav.scrolled::before, .nav.scrolled::after, .body-subpage .nav::before, .body-subpage .nav::after { opacity: 1; } .nav-container { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-md); max-width: 1400px; margin: 0 auto; } .nav-brand { display: flex; align-items: center; gap: 0.6rem; } .nav-logo-wrap { position: relative; display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--beige); padding: 3px; background: transparent; transition: border-color var(--transition); } .nav-logo { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); display: block; transition: opacity var(--transition); } .nav-logo-pink { opacity: 0; } .nav-logo-beige { opacity: 1; } /* Sticky/Subpage-Zustand: Pinkes Logo + pinker Border */ .nav.scrolled .nav-logo-wrap, .body-subpage .nav-logo-wrap { border-color: var(--pink); } .nav.scrolled .nav-logo-pink, .body-subpage .nav-logo-pink { opacity: 1; } .nav.scrolled .nav-logo-beige, .body-subpage .nav-logo-beige { opacity: 0; } .nav-wordmark { font-family: var(--font-display); font-size: 1.5rem; color: var(--white); letter-spacing: -0.01em; text-transform: uppercase; transition: color var(--transition); } .nav-wordmark em { font-style: italic; color: var(--pink-light); } .nav.scrolled .nav-wordmark { color: var(--pink); } .nav.scrolled .nav-wordmark em { color: var(--pink-dark); } .body-subpage .nav-wordmark { color: var(--pink); } .body-subpage .nav-wordmark em { color: var(--pink-dark); } .nav-menu { list-style: none; display: flex; gap: var(--spacing-md); align-items: center; } .nav-link { color: var(--white); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: all var(--transition); } .nav-link:hover { color: var(--pink-light); border-bottom-color: var(--pink-light); } .nav.scrolled .nav-link { color: var(--ink); } .nav.scrolled .nav-link:hover { color: var(--pink); border-bottom-color: var(--pink); } .body-subpage .nav-link { color: var(--ink); } .body-subpage .nav-link:hover { color: var(--pink); border-bottom-color: var(--pink); } .nav-toggle { display: none; position: fixed; top: 1rem; right: 1rem; z-index: 1100; width: 44px; height: 44px; background: var(--beige); border: none; border-radius: var(--radius-sm); cursor: pointer; padding: 10px; box-shadow: var(--shadow-soft); transition: background var(--transition); } .nav-toggle span { display: block; height: 3px; background: var(--pink); margin: 4px 0; border-radius: 2px; transition: all var(--transition); } /* Sticky / Subpage: Burger wird pink mit weißen Linien */ .nav.scrolled + .nav-toggle, .body-subpage .nav-toggle { background: var(--pink); } .nav.scrolled + .nav-toggle span, .body-subpage .nav-toggle span { background: var(--white); } /* Wenn Menü offen: immer pink mit weißen Linien (über Pink-Overlay) */ .nav-toggle.active { background: var(--white) !important; } .nav-toggle.active span { background: var(--pink) !important; } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1200px) { .nav-toggle { display: block; } .nav-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--pink); flex-direction: column; justify-content: center; gap: var(--spacing-md); padding: var(--spacing-xl) var(--spacing-md); transform: translateX(100%); transition: transform var(--transition); } .nav-menu.active { transform: translateX(0); } .nav-menu .nav-link { color: var(--white); font-size: 1.5rem; } .nav-menu .nav-link:hover { color: var(--pink-soft); border-bottom-color: var(--pink-soft); } } /* ===================================================== Hero – Plakat-Style v2 Foto mit pinkem Bogen-Overlay + Kirchturm-Badge ===================================================== */ .hero { position: relative; background: var(--pink); color: var(--white); overflow: hidden; } /* Foto-Bereich mit Bogen-Overlay */ .hero-media { position: relative; width: 100%; height: min(72vh, 680px); min-height: 460px; overflow: visible; background: #1a1a1a; } .hero-media::before { /* Clip den Foto-Bereich, Badge darf rausragen */ content: ""; position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero-media-img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; } .hero-arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none; color: var(--primary); } /* Kirchturm-Badge unten auf dem Swoosh */ .hero-kirche-badge { position: absolute; z-index: 3; bottom: -2%; left: 6%; width: clamp(140px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--beige); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.25)); display: flex; align-items: center; justify-content: center; animation: badgeFloat 6s ease-in-out infinite; background: transparent; } .hero-kirche-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } @keyframes badgeFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } } /* Info-Kreis (Schwimmbad!) – größer als vorher */ .hero-info-badge { position: absolute; z-index: 4; top: 20%; right: 4%; width: clamp(150px, 17vw, 230px); aspect-ratio: 1; border-radius: 50%; background: var(--white); color: var(--pink); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transform: rotate(-6deg); font-family: var(--font-display); line-height: 1.05; font-size: clamp(0.95rem, 1.3vw, 1.2rem); transition: transform 0.2s ease, box-shadow 0.2s ease; } a.hero-info-badge:hover { transform: rotate(-6deg) scale(1.05); box-shadow: 0 14px 38px rgba(0,0,0,0.38); } .hero-info-badge-head, .hero-info-badge-highlight { color: inherit; } /* Logo-Variante: Logo trägt die Form selbst, kein weißer Kreis nötig */ .hero-info-badge-logo { background: transparent; border-radius: 0; aspect-ratio: auto; box-shadow: none; gap: 0.35rem; padding: 0.5rem; } .hero-info-badge-logo .hero-info-badge-head { background: var(--white); color: var(--pink); padding: 0.2em 0.7em; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); font-size: 0.72em; } .hero-info-badge-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.3)); } a.hero-info-badge-logo:hover { transform: rotate(-6deg) scale(1.05); box-shadow: none; } .hero-info-badge-head { font-family: var(--font-body); font-weight: 600; font-size: 0.8em; opacity: 0.85; text-transform: none; margin-bottom: 0.4em; } .hero-info-badge-highlight { font-size: 1.3em; text-transform: uppercase; line-height: 0.95; } @media (max-width: 900px) { .hero-info-badge { top: 30%; right: 3%; width: clamp(120px, 20vw, 170px); } } @media (max-width: 640px) { .hero-media { height: min(60vh, 500px); min-height: 380px; } .hero-kirche-badge { bottom: -2%; left: 4%; width: 110px; } .hero-info-badge { top: auto; bottom: 8%; right: 4%; width: clamp(96px, 28vw, 130px); padding: 0.55rem; font-size: clamp(0.65rem, 2.6vw, 0.82rem); line-height: 1; } .hero-info-badge-head { font-size: 0.78em; margin-bottom: 0.25em; } .hero-info-badge-highlight { font-size: 1.08em; line-height: 0.95; } /* Hero-Square Mobile: schmaler, Sprechblase bleibt innerhalb */ .container { padding: 0 var(--spacing-sm); } .hero-square { padding: clamp(1rem, 4vw, 1.6rem); min-height: auto; border-width: 4px; outline-offset: 3px; outline-width: 2px; margin: 0 8px; max-width: calc(100vw - 40px); } .hero-cta-speech { right: -6px; top: -16px; padding: 0.45rem 0.8rem 0.4rem; } .hero-cta-speech-head { font-size: 0.85rem; } .hero-cta-speech-sub { font-size: 0.68rem; } /* Fluid size: etwas kleiner, damit "Schwimmbads" garantiert reinpasst */ .hero-h1 { font-size: clamp(0.85rem, 3.6vw, 1.35rem); line-height: 1; letter-spacing: -0.03em; } .hero-edition { font-size: 0.95rem; } .hero-sub { font-size: 0.95rem; } .hero-partners img { height: 36px; padding: 4px 8px; } .hero-partners { gap: 0.5rem; padding: 0 1rem 1rem; } .hero-block { padding: 1rem 0 2.5rem; } .hero-block-grid { padding-top: 1rem; } .hero-meta-row .icn { width: 28px; height: 28px; } .hero-meta-row strong { font-size: 1rem; white-space: normal; } .hero-meta-row span { font-size: 0.85rem; } .hero-buttons { justify-content: center; } .hero-buttons .btn { flex: 1 1 auto; min-width: 140px; text-align: center; } } /* Hero-Arc Mobile/Desktop Umschaltung */ .hero-arc-mobile { display: none; } @media (max-width: 640px) { .hero-arc-desktop { display: none; } .hero-arc-mobile { display: block; } } /* Pink-Block unten mit Headline + Meta */ .hero-block { background: var(--pink); padding: var(--spacing-md) 0 var(--spacing-xl); position: relative; } .hero-partners { display: flex; gap: var(--spacing-md); justify-content: center; align-items: center; padding: 0 var(--spacing-md) var(--spacing-md); flex-wrap: wrap; } .hero-partners img { height: clamp(48px, 6vw, 70px); width: auto; background: var(--white); padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: 0 2px 12px rgba(0,0,0,0.12); } .hero-block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: stretch; padding-top: var(--spacing-sm); } @media (max-width: 860px) { .hero-block-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } } /* Square-Headline: weißer Block füllt komplett, pinker Text */ .hero-square { background: var(--white); border: 6px solid var(--white); outline: 2px solid rgba(255,255,255,0.5); outline-offset: 6px; border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; gap: clamp(0.8rem, 2vw, 1.5rem); color: var(--pink); box-shadow: 0 10px 30px rgba(0,0,0,0.15); min-height: 360px; } @media (min-width: 861px) { .hero-square { min-height: 420px; } } .hero-freibad-logo { display: block; width: clamp(72px, 9vw, 104px); margin-bottom: -0.3rem; transition: transform 0.2s ease; } .hero-freibad-logo img { display: block; width: 100%; height: auto; } .hero-freibad-logo:hover { transform: scale(1.06); } .hero-edition { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--pink); } .hero-sub { font-family: var(--font-body); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.2; color: var(--ink-soft); } .hero-h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 4.5rem); line-height: 0.88; text-transform: uppercase; margin: 0; letter-spacing: -0.02em; color: var(--pink); } .hero-h1 strong { font-weight: inherit; display: inline; color: var(--pink); } /* "Förderverein" kleiner als "Freibad Hennstedt" */ .hero-h1-small { display: block; font-size: 0.5em; line-height: 1; margin-bottom: 0.1em; } /* Meta-Liste */ .hero-meta { display: flex; flex-direction: column; gap: var(--spacing-sm); justify-content: center; } .hero-meta-row { display: flex; gap: 1rem; align-items: center; } .hero-meta-row .icn { width: 36px; height: 36px; flex-shrink: 0; color: var(--white); } .hero-meta-row strong { display: block; font-family: var(--font-display); font-size: clamp(0.95rem, 1.7vw, 1.4rem); line-height: 1.15; font-weight: 900; text-transform: none; letter-spacing: 0; white-space: nowrap; } .hero-meta-row span { display: block; font-size: 0.95rem; opacity: 0.9; line-height: 1.4; } .hero-meta-row a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .hero-meta-row a:hover { color: var(--pink-soft); } .hero-buttons { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: 0.5rem; } .btn { display: inline-block; padding: 0.9rem 1.8rem; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all var(--transition); cursor: pointer; border: 2px solid transparent; text-decoration: none; } .btn-white { background: var(--white); color: var(--pink); } .btn-white:hover { background: var(--pink-dark); color: var(--white); transform: translateY(-2px); } .btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); } .btn-outline-white:hover { background: var(--white); color: var(--pink); transform: translateY(-2px); } .btn-primary { background: var(--pink); color: var(--white); } .btn-primary:hover { background: var(--pink-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn-ghost { background: transparent; color: var(--pink); border-color: var(--pink); } .btn-ghost:hover { background: var(--pink); color: var(--white); transform: translateY(-2px); } /* ===================================================== About ===================================================== */ .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--spacing-lg); align-items: center; } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } /* 2x2 Fact-Grid auch auf Mobile behalten */ .about-facts { grid-template-columns: repeat(2, 1fr); } } .about-text p { margin-bottom: var(--spacing-sm); } .about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } .fact-card { background: var(--white); border-radius: var(--radius-md); padding: var(--spacing-md) var(--spacing-sm); display: flex; flex-direction: column; gap: 0.3rem; box-shadow: var(--shadow-soft); transition: all var(--transition); border: 2px solid transparent; } .fact-icn-wrap { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--pink-soft); color: var(--pink); border-radius: 50%; padding: 10px; margin-bottom: 0.4rem; transition: all var(--transition); } .fact-card:hover .fact-icn-wrap { background: var(--pink); color: var(--white); transform: rotate(-8deg) scale(1.05); } .fact-icn { width: 100%; height: 100%; color: currentColor; } .fact-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .fact-value { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; color: var(--pink); } .icn { width: 24px; height: 24px; display: inline-block; stroke-width: 2; } .icn-inline { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; stroke-width: 2; } /* ===================================================== Accordion ===================================================== */ .accordion { max-width: 800px; margin: 0 auto; } .accordion-item { background: var(--white); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); box-shadow: var(--shadow-soft); overflow: hidden; } .accordion-item summary { padding: 1.25rem 1.5rem; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--pink); list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background var(--transition); } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; transition: transform var(--transition); } .accordion-item[open] summary::after { transform: rotate(45deg); } .accordion-item summary:hover { background: var(--pink-soft); } .accordion-body { padding: 0 1.5rem 1.5rem; color: var(--ink-soft); } .accordion-body p { margin-bottom: var(--spacing-xs); } .accordion-body .timeline { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .accordion-body .timeline li { padding-left: 1.25rem; position: relative; } .accordion-body .timeline li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--pink); border-radius: 50%; } /* ===================================================== Rückblick ===================================================== */ .edition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); } .edition-card { background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); border-radius: var(--radius-md); padding: var(--spacing-md); border: 1px solid rgba(255,255,255,0.18); transition: all var(--transition); display: flex; flex-direction: column; gap: 0.5rem; } .edition-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.2); } .edition-card-highlight { background: var(--white); color: var(--ink); border-color: var(--white); } .edition-card-highlight h3 { color: var(--pink); } .edition-card-highlight .edition-zweck { color: var(--pink-dark); } .edition-card-next { background: var(--ink); border-color: var(--ink); } .edition-year { font-family: var(--font-display); font-size: 3rem; line-height: 1; opacity: 0.6; } .edition-card h3 { font-size: 1.3rem; text-transform: uppercase; } .edition-zweck { font-weight: 700; font-size: 1.05rem; color: var(--pink-light); } .edition-card-highlight a, .edition-card a { color: inherit; text-decoration: underline; font-weight: 700; margin-top: auto; padding-top: var(--spacing-sm); } .edition-card-highlight .edition-link { color: var(--pink); } /* ===================================================== Gallery ===================================================== */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; } .gallery-item { border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; position: relative; background: var(--beige-dark); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item-large { grid-column: span 2; grid-row: span 2; } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .gallery-item-large { grid-column: span 2; grid-row: span 1; } } /* ===================================================== Sponsoren ===================================================== */ .sponsor-cat { text-align: center; color: var(--pink); font-size: 1.4rem; margin: var(--spacing-lg) 0 var(--spacing-md); text-transform: uppercase; letter-spacing: 0.05em; } .sponsor-grid { display: grid; gap: var(--spacing-md); max-width: 1100px; margin: 0 auto; } .sponsor-grid-main { grid-template-columns: repeat(4, 1fr); } .sponsor-grid-main .sponsor-card { aspect-ratio: 4 / 3; background: var(--white); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; padding: 1.8rem; transition: all var(--transition); box-shadow: var(--shadow-soft); border: 2px solid transparent; } .sponsor-grid-main .sponsor-card:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--pink); box-shadow: var(--shadow-hover); } .sponsor-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: none; } .sponsor-grid-partner { grid-template-columns: repeat(4, 1fr); max-width: 800px; } .sponsor-card-partner { aspect-ratio: 1 / 1; padding: 1rem; opacity: 0.92; background: var(--white); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); border: 2px solid transparent; transition: all var(--transition); } .sponsor-card-partner:hover { opacity: 1; transform: translateY(-6px) rotate(-1deg); border-color: var(--pink); box-shadow: var(--shadow-hover); } @media (max-width: 860px) { .sponsor-grid-main, .sponsor-grid-partner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .sponsor-grid-main .sponsor-card { padding: 1rem; } .sponsor-card-partner { padding: 0.8rem; } } @media (max-width: 520px) { .sponsor-grid-main, .sponsor-grid-partner { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; max-width: 100%; } .sponsor-grid-main .sponsor-card, .sponsor-card-partner { aspect-ratio: 1 / 1; padding: 0.9rem; /* Standard-Card-Look wie Info-Bobbeln/Fact-Cards: radius-md, shadow-soft */ border-radius: var(--radius-md); box-shadow: var(--shadow-soft); border-width: 2px; } } /* ===================================================== Anmeldung ===================================================== */ .anmeldung-wrap { max-width: 860px; margin: 0 auto; } .embed-container { position: relative; overflow: hidden; max-width: 100%; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); min-height: 600px; } .embed-container iframe { position: relative; top: 0; left: 0; width: 100%; height: 100%; min-width: 600px; min-height: 600px; display: block; } @media (max-width: 600px) { .embed-container iframe { min-width: auto; } } /* ===================================================== Kontakt & Impressum ===================================================== */ .kontakt-grid, .impressum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); max-width: 1000px; margin: 0 auto; } .kontakt-card, .impressum-block { background: var(--white); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .kontakt-card h3, .impressum-block h3 { color: var(--pink); font-size: 1.1rem; margin-bottom: var(--spacing-sm); text-transform: uppercase; } .kontakt-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 0.25rem; } .kontakt-rolle { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: var(--spacing-xs); } .impressum-block p { color: var(--ink-soft); line-height: 1.7; } /* ===================================================== Footer ===================================================== */ .footer { background: var(--ink); color: var(--cream); padding: var(--spacing-lg) 0; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); } .footer-brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--pink-light); text-transform: uppercase; margin-bottom: 0.5rem; } .footer-text p { margin-bottom: 0.25rem; font-size: 0.95rem; } .footer-credits { color: rgba(255,255,255,0.6); font-size: 0.85rem !important; } .footer-links { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } .footer-links a { color: var(--cream); font-size: 0.9rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; } .footer-links a:hover { color: var(--pink-light); } /* ===================================================== Lightbox ===================================================== */ .lightbox { position: fixed; inset: 0; background: rgba(42,30,36,0.95); display: none; align-items: center; justify-content: center; z-index: 10000; padding: var(--spacing-md); } .lightbox.active { display: flex; } .lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-md); } .lightbox-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; color: var(--white); font-size: 3rem; line-height: 1; cursor: pointer; padding: 0.5rem 1rem; } /* ===================================================== Reveal Animations ===================================================== */ .reveal, .reveal-scale { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .reveal.active, .reveal-scale.active { opacity: 1; transform: none; } .reveal-scale { transform: scale(0.95); } .reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .reveal-stagger.active > * { opacity: 1; transform: none; } .reveal-stagger.active > *:nth-child(1) { transition-delay: 0s; } .reveal-stagger.active > *:nth-child(2) { transition-delay: 0.08s; } .reveal-stagger.active > *:nth-child(3) { transition-delay: 0.16s; } .reveal-stagger.active > *:nth-child(4) { transition-delay: 0.24s; } .reveal-stagger.active > *:nth-child(5) { transition-delay: 0.32s; } .reveal-stagger.active > *:nth-child(6) { transition-delay: 0.4s; } .reveal-stagger.active > *:nth-child(7) { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .reveal-scale, .reveal-stagger > * { opacity: 1; transform: none; } } /* ===================================================== Subpage (Ergebnisse) ===================================================== */ .subpage-hero { padding-top: calc(var(--spacing-xl) + 60px); padding-bottom: var(--spacing-md); background: var(--cream); } .subpage-eyebrow { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--spacing-sm); } .subpage-title { font-size: clamp(1.8rem, 6vw, 4.5rem); color: var(--pink); text-transform: uppercase; margin-bottom: var(--spacing-sm); overflow-wrap: break-word; hyphens: auto; } @media (max-width: 640px) { .subpage-title { font-size: clamp(1.6rem, 9vw, 2.6rem); line-height: 1; } } .subpage-lead { font-size: 1.15rem; color: var(--ink-soft); } /* Results */ .results-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); background: var(--white); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); margin-bottom: var(--spacing-md); } .filter-group { display: flex; flex-direction: column; gap: 0.5rem; } .filter-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .filter-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; } .chip { background: var(--beige); border: 2px solid transparent; padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--ink); transition: all var(--transition); } .chip:hover { border-color: var(--pink-light); } .chip-active { background: var(--pink); color: var(--white); border-color: var(--pink); } .search-input { padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); border: 2px solid var(--beige-dark); font-family: var(--font-body); font-size: 0.95rem; transition: border-color var(--transition); } .search-input:focus { outline: none; border-color: var(--pink); } /* Native Select – default versteckt, Desktop bleibt bei Chips */ .filter-select { display: none; } .results-meta { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: var(--spacing-sm); padding: 0 var(--spacing-xs); } .results-meta #results-count { font-weight: 700; color: var(--pink); } .results-table-wrap { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: var(--spacing-lg); } .results-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .results-table th { background: var(--beige); padding: 1rem; text-align: left; font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .results-table td { padding: 0.9rem 1rem; border-top: 1px solid var(--beige); overflow: hidden; } .results-table td.col-name { white-space: normal; overflow-wrap: anywhere; } .results-table td.col-rank, .results-table td.col-time, .results-table td.col-cat { white-space: nowrap; text-overflow: ellipsis; } .results-table tr:hover td { background: var(--pink-soft); } /* Feste Spaltenbreiten – kein Springen bei Filterwechsel */ .col-rank { width: 80px; } .col-name { width: auto; } .col-time { width: 140px; font-family: 'SF Mono', Menlo, monospace; font-weight: 700; color: var(--pink-dark); } .col-cat { width: 180px; text-align: right; font-size: 0.9rem; color: var(--ink-soft); } @media (max-width: 860px) { .col-rank { width: 60px; } .col-time { width: 110px; } .col-cat { width: 140px; } } @media (max-width: 640px) { .results-table-wrap { border-radius: var(--radius-sm); } .results-table th, .results-table td { padding: 0.55rem 0.5rem; font-size: 0.85rem; } .col-rank { width: 52px; } .col-time { width: 96px; font-size: 0.82rem; } .col-cat { display: none; } .rank-badge { min-width: 32px; height: 32px; font-size: 0.85rem; padding: 0 0.3rem; } .results-table td.col-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; /* erzwingt Ellipse innerhalb der Auto-Spalte */ } .results-table tfoot td { padding: 0.7rem 0.5rem; font-size: 0.8rem; } .results-avg-label { font-size: 0.68rem; } /* Toolbar kompakt: Dropdowns statt Chips auf Mobile, 3 in einer Reihe */ .results-toolbar { grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; padding: 0.6rem; border-radius: var(--radius-sm); } .filter-group { gap: 0.2rem; min-width: 0; } .filter-group-search { grid-column: 1 / -1; } .filter-label { font-size: 0.65rem; letter-spacing: 0.05em; } .filter-chips { display: none; } .filter-select { display: block; width: 100%; padding: 0.4rem 1.4rem 0.4rem 0.5rem; font-family: var(--font-body); font-size: 0.78rem; border: 1px solid var(--beige-dark); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .filter-select:focus { outline: none; border-color: var(--pink); } .search-input { padding: 0.45rem 0.7rem; font-size: 0.88rem; border-width: 1px; } } .results-table tfoot td { background: var(--beige); font-weight: 700; color: var(--ink); border-top: 2px solid var(--pink); font-size: 0.95rem; } .results-table tfoot td.col-time { color: var(--pink); } .results-avg-label { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; background: var(--beige); border-radius: 50%; font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); } .results-table tr[data-rank="1"] .rank-badge, .results-table tbody tr:first-child .rank-badge { background: linear-gradient(135deg, #ffd700, #b8860b); color: var(--white); } .cat-pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; margin-right: 0.4rem; } .cat-m { background: #cfe8ff; color: #0d47a1; } .cat-w { background: var(--pink-soft); color: var(--pink-dark); } .results-empty { text-align: center; padding: var(--spacing-lg); color: var(--ink-soft); font-style: italic; } .results-downloads { background: var(--white); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-soft); } .results-downloads h3 { color: var(--pink); font-size: 1.1rem; margin-bottom: var(--spacing-sm); text-transform: uppercase; } .results-downloads ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .results-downloads li a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--beige); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; transition: all var(--transition); } .results-downloads li a::before { content: "📄"; } .results-downloads li a:hover { background: var(--pink); color: var(--white); } @media (max-width: 640px) { .col-cat { display: none; } .col-name { font-weight: 600; } } /* ===================================================== Year-Switch (Ergebnisse / Impressionen) ===================================================== */ .year-switch { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center; margin-bottom: var(--spacing-md); } .year-btn { background: var(--white); border: 2px solid var(--beige-dark); border-radius: var(--radius-md); padding: 1rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; cursor: pointer; font-family: var(--font-body); color: var(--ink); transition: all var(--transition); min-width: 220px; text-align: left; -webkit-tap-highlight-color: transparent; outline: none; } .year-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } .year-btn:hover { border-color: var(--pink); transform: translateY(-2px); } .year-btn-active { background: var(--pink); border-color: var(--pink); color: var(--white); } .year-btn-year { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; } .year-btn-label { font-size: 0.85rem; font-weight: 600; opacity: 0.85; } @media (max-width: 640px) { .year-switch { gap: 0.4rem; flex-wrap: nowrap; } .year-btn { min-width: 0; flex: 1 1 0; padding: 0.5rem 0.4rem; align-items: center; text-align: center; border-radius: var(--radius-sm); border-width: 1px; } .year-btn-year { font-size: 1.1rem; } .year-btn-label { font-size: 0.65rem; line-height: 1.1; } } .results-meta-sep { opacity: 0.5; margin: 0 0.3rem; } /* First-rank gold badge via rank-1 class */ .rank-badge.rank-1 { background: linear-gradient(135deg, #ffd700, #b8860b); color: var(--white); } .rank-badge.rank-2 { background: linear-gradient(135deg, #e0e0e0, #999); color: var(--white); } .rank-badge.rank-3 { background: linear-gradient(135deg, #cd7f32, #8b4513); color: var(--white); } /* ===================================================== Gallery Teaser (Startseite) ===================================================== */ .gallery-teaser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-rows: 220px; } @media (max-width: 860px) { .gallery-teaser { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } } .gallery-teaser-item { border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--white); display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .gallery-teaser-item img:not(.gallery-teaser-logo) { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .gallery-teaser-item:hover img:not(.gallery-teaser-logo) { transform: scale(1.05); } .gallery-teaser-card { background: var(--pink-soft); flex-direction: column; gap: 0.75rem; padding: 1.5rem; text-align: center; } .gallery-teaser-logo { width: 64px; height: auto; max-height: 72px; object-fit: contain; } .gallery-teaser-caption { font-family: var(--font-display); font-size: 0.95rem; line-height: 1.2; color: var(--pink); text-transform: uppercase; } .gallery-teaser-cta { background: var(--pink); color: var(--white); flex-direction: column; gap: 0.6rem; padding: 1.5rem; text-align: center; font-weight: 700; } .gallery-teaser-cta .icn { width: 40px; height: 40px; } .gallery-teaser-cta span { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; text-transform: uppercase; } .gallery-teaser-cta:hover { background: var(--pink-dark); color: var(--white); } /* ===================================================== Strecken-Subpage ===================================================== */ .strecken-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } @media (max-width: 860px) { .strecken-grid { grid-template-columns: 1fr; } } .strecke-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; } .strecke-card header { padding: var(--spacing-md); background: var(--pink); color: var(--white); } .strecke-card header h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin-bottom: 0.2rem; text-transform: uppercase; } .strecke-card header p { font-size: 1rem; opacity: 0.95; } .strecke-map { aspect-ratio: 4 / 3; background: var(--beige); } .strecke-map iframe { width: 100%; height: 100%; border: 0; display: block; } .strecke-note { padding: var(--spacing-sm) var(--spacing-md); color: var(--ink-soft); font-size: 0.95rem; } .strecke-infos { background: var(--white); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .strecke-infos h3 { color: var(--pink); text-transform: uppercase; margin-bottom: var(--spacing-sm); font-size: 1.2rem; } .strecke-infos ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .strecke-infos li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); } .strecke-infos li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--pink); border-radius: 50%; } /* ===================================================== Impressionen Subpage ===================================================== */ .gallery-empty { grid-column: 1 / -1; padding: var(--spacing-xl); text-align: center; color: var(--ink-soft); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .results-placeholder { padding: var(--spacing-lg) var(--spacing-md); text-align: center; color: var(--ink-soft); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); max-width: 720px; margin: 0 auto; } .results-placeholder p { margin-bottom: 0.8rem; } .results-placeholder p:last-child { margin-bottom: 0; } .results-placeholder strong { color: var(--pink); font-size: 1.1rem; } /* ===================================================== Einheitliche Fließtext-Größe ===================================================== */ p, li { font-size: 1rem; line-height: 1.65; } .section p:not(.hero-eyebrow):not(.section-lead):not(.edition-zweck):not(.fact-value):not(.kontakt-name):not(.hero-edition):not(.hero-sub) { font-size: 1rem; } .about-text p, .accordion-body p, .impressum-block p, .kontakt-card p { font-size: 1rem; line-height: 1.65; } .lead { font-size: 1rem; } /* ===================================================== Speech Bubble auf Sekundus-Badge ===================================================== */ .hero-kirche-speech { position: absolute; top: -24%; left: 60%; background: var(--white); color: var(--pink); padding: 0.45rem 0.9rem; border-radius: 999px; font-family: var(--font-display); font-size: 0.95rem; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,0.2); animation: speechWiggle 4s ease-in-out infinite; transform-origin: bottom left; } .hero-kirche-speech::after { content: ""; position: absolute; bottom: -6px; left: 14px; width: 16px; height: 16px; background: var(--white); transform: rotate(45deg); border-radius: 2px; z-index: -1; } @keyframes speechWiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } /* ===================================================== Info-Bobbeln ===================================================== */ .info-bobbel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } @media (max-width: 860px) { .info-bobbel-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .info-bobbel-grid { grid-template-columns: 1fr; } } .info-bobbel { background: var(--white); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--shadow-soft); border: 2px solid transparent; transition: all var(--transition); display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; position: relative; } .info-bobbel:hover { transform: translateY(-6px) rotate(-0.5deg); border-color: var(--pink); box-shadow: var(--shadow-hover); } .info-bobbel-icn { width: 48px; height: 48px; color: var(--pink); background: var(--pink-soft); padding: 10px; border-radius: 50%; transition: all var(--transition); } .info-bobbel:hover .info-bobbel-icn { background: var(--pink); color: var(--white); transform: rotate(-8deg) scale(1.05); } .info-bobbel h3 { font-size: 1.2rem; color: var(--pink); text-transform: uppercase; letter-spacing: -0.01em; } .info-bobbel p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; } .info-bobbel-link { color: var(--pink); font-weight: 700; font-size: 0.95rem; margin-top: auto; padding-top: 0.4rem; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 0.1rem; } .info-bobbel-link:hover { color: var(--pink-dark); } /* ===================================================== Run-Timeline (Ablauf) ===================================================== */ .run-timeline { position: relative; max-width: 800px; margin: 0 auto; padding-left: clamp(80px, 12vw, 130px); } .run-timeline::before { content: ""; position: absolute; /* Dot-Mitte: padding-left − item-margin + col1 + gap + dot-radius */ left: calc(clamp(80px, 12vw, 130px) + clamp(56px, 8vw, 80px) - 34px); top: 24px; bottom: 24px; width: 3px; background: linear-gradient(to bottom, var(--pink) 0%, var(--pink-dark) 100%); border-radius: 2px; z-index: 0; transform: translateX(-1.5px); } .run-timeline-item { position: relative; z-index: 1; } .run-time { position: relative; z-index: 2; } .run-dot, .run-dot-highlight, .run-dot-finish { position: relative; z-index: 2; } .run-timeline-item { display: grid; grid-template-columns: clamp(56px, 8vw, 80px) 28px 1fr; align-items: start; gap: 0.75rem; margin-bottom: var(--spacing-md); position: relative; padding-left: 0; margin-left: -60px; } @media (max-width: 640px) { .run-timeline { padding-left: 0; max-width: 100%; } .run-timeline-item { margin-left: 0; grid-template-columns: 54px 20px 1fr; gap: 0.5rem; } /* Dot-Mitte: 54 + 8 + 10 = 72px */ .run-timeline::before { left: 72px; top: 20px; bottom: 20px; } .run-timeline .run-time { font-size: 0.95rem; padding-top: 0.4em; } .run-timeline .run-content { padding: 0.75rem 0.9rem; min-width: 0; } .run-timeline .run-content h3 { font-size: 1rem; } .run-timeline .run-content p { font-size: 0.88rem; } } .run-time { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--pink); line-height: 1; padding-top: 0.2em; text-align: right; } .run-dot { width: 18px; height: 18px; background: var(--pink); border: 3px solid var(--pink-soft); border-radius: 50%; margin: 0.4rem auto 0; position: relative; z-index: 2; box-shadow: 0 0 0 4px var(--white); } .run-dot-highlight { background: var(--white); border-color: var(--pink); width: 22px; height: 22px; margin-top: 0.3rem; box-shadow: 0 0 0 4px var(--pink-soft); animation: runPulse 2.5s ease-in-out infinite; } .run-dot-finish { background: var(--gold); border-color: var(--white); } @keyframes runPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .run-content { background: var(--white); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); transition: all var(--transition); } .run-content:hover { transform: translateX(6px); box-shadow: var(--shadow-hover); } .run-content h3 { font-size: 1.1rem; color: var(--pink); text-transform: uppercase; margin-bottom: 0.3rem; } .run-content p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; } .run-timeline-item-start .run-content { border-left: 4px solid var(--pink); } /* ===================================================== Anmelde-Formular – knallpink, Komplementär-Rahmen, weißer Titel ===================================================== */ section#anmeldung { background: var(--pink); } section#anmeldung .section-title, section#anmeldung .section-lead { color: var(--white); } section#anmeldung .section-title::after { background: var(--white); } /* Sommer: gelbe Anmeldungs-Fläche → dunkle Schrift + lila Unterstrich */ body[data-theme="sommer"] section#anmeldung .section-title, body[data-theme="sommer"] section#anmeldung .section-lead { color: var(--on-primary); } body[data-theme="sommer"] section#anmeldung .section-title::after { background: var(--accent); } .anmeldung-wrap { max-width: 860px; margin: 0 auto; padding: clamp(0.8rem, 2.5vw, 1.6rem); background: var(--pink); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); border: 4px solid var(--gold); outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 4px; } .anmeldung-wrap .embed-container { box-shadow: none; background: var(--white); border-radius: var(--radius-md); overflow: hidden; } /* ===================================================== Navigation – Burger früh, Fullscreen-Overlay ===================================================== */ @media (max-width: 1200px) { .nav-toggle { display: block !important; } .nav-menu { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--pink); flex-direction: column !important; justify-content: center; align-items: center; gap: var(--spacing-md) !important; padding: var(--spacing-xl) var(--spacing-md) !important; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1050; overflow-y: auto; } .nav-menu.active { transform: translateX(0); } .nav-menu .nav-link { color: var(--white) !important; font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.6rem) !important; text-transform: uppercase; letter-spacing: -0.01em; border-bottom: 3px solid transparent !important; padding: 0.4rem 0 !important; } .nav-menu .nav-link:hover { color: var(--pink-soft) !important; border-bottom-color: var(--pink-soft) !important; } .nav-menu.active .nav-link { animation: navSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .nav-menu.active .nav-item:nth-child(1) .nav-link { animation-delay: 0.05s; } .nav-menu.active .nav-item:nth-child(2) .nav-link { animation-delay: 0.1s; } .nav-menu.active .nav-item:nth-child(3) .nav-link { animation-delay: 0.15s; } .nav-menu.active .nav-item:nth-child(4) .nav-link { animation-delay: 0.2s; } .nav-menu.active .nav-item:nth-child(5) .nav-link { animation-delay: 0.25s; } .nav-menu.active .nav-item:nth-child(6) .nav-link { animation-delay: 0.3s; } .nav-menu.active .nav-item:nth-child(7) .nav-link { animation-delay: 0.35s; } } /* Body-Scroll sperren wenn Menü offen */ body.nav-open { overflow: hidden; } @keyframes navSlide { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* ===================================================== Subtile Movement – Background-Details ===================================================== */ .section-title { position: relative; display: inline-block; padding-bottom: 0.3em; margin-left: auto; margin-right: auto; } .section-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--pink); border-radius: 2px; } .section-pink .section-title::after { background: var(--white); } /* Title wrapper so it centers */ .section > .container > .section-title { display: block; text-align: center; } /* Fact cards subtle bob – beim Hover abschalten, damit der Schräg-Effekt greift */ .fact-card:nth-child(odd) { animation: factBob 6s ease-in-out infinite; } .fact-card:nth-child(even) { animation: factBob 6s ease-in-out 1.5s infinite; } .fact-card:hover { animation: none; transform: translateY(-6px) rotate(-1deg); border-color: var(--pink); box-shadow: var(--shadow-hover); } @keyframes factBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ===================================================== Info-Bobbel – strukturierte Key/Value-Liste ===================================================== */ .info-bobbel-list { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 0.35rem; margin: 0.2rem 0 0.4rem; padding: 0; } .info-bobbel-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--pink-soft); font-size: 0.92rem; line-height: 1.3; flex-wrap: wrap; } .info-bobbel-list li:last-child { border-bottom: 0; } .info-bobbel-list .info-bobbel-key { color: var(--ink-soft); font-weight: 500; flex-shrink: 0; } .info-bobbel-list .info-bobbel-val { color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; word-break: break-word; min-width: 0; flex: 1 1 auto; } .info-bobbel-list-fee .info-bobbel-val strong { color: var(--pink); font-family: var(--font-display); font-size: 1.1rem; } .info-bobbel-note { color: var(--ink-soft); font-size: 0.85rem; font-style: italic; margin-top: 0.1rem !important; } /* ===================================================== Anmeldung – pinke Section, Legal-Hinweis ===================================================== */ .anmeldung-legal { text-align: center; margin-top: var(--spacing-md); color: var(--white); font-size: 0.95rem; } .anmeldung-legal a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .anmeldung-legal a:hover { color: var(--pink-soft); } /* Sommer: gelbe Fläche → dunkle Legal-Schrift, lila Link */ body[data-theme="sommer"] .anmeldung-legal { color: var(--on-primary); } body[data-theme="sommer"] .anmeldung-legal a { color: var(--accent); } /* ===================================================== Legal-/Teilnahmebedingungen-Seite ===================================================== */ .legal-content { max-width: 760px; margin: 0 auto; background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); color: var(--ink); } .legal-content h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--pink); text-transform: uppercase; margin-top: 2rem; margin-bottom: 0.8rem; letter-spacing: -0.01em; } .legal-content h2:first-child { margin-top: 0; } .legal-content h3 { font-size: 1.15rem; color: var(--pink); margin-top: 1.4rem; margin-bottom: 0.4rem; } .legal-content p, .legal-content li { font-size: 1rem; line-height: 1.7; color: var(--ink); } .legal-content p { margin-bottom: 0.9rem; } .legal-content ul, .legal-content ol { margin: 0 0 1rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; } .legal-content ul li { list-style: none; position: relative; padding-left: 0.6rem; } .legal-content ul li::before { content: ""; position: absolute; left: -0.8rem; top: 0.7em; width: 7px; height: 7px; background: var(--pink); border-radius: 50%; } .legal-content a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; } .legal-content a:hover { color: var(--pink-dark); } .legal-content em { color: var(--ink-soft); } /* ===================================================== Hero Partners-Label "In Kooperation mit" (unter Header) ===================================================== */ .hero-partners-label { text-align: center; font-family: var(--font-display); color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; opacity: 0.85; margin-bottom: 0.5rem; padding-top: var(--spacing-sm); } /* ===================================================== "Sei dabei" – zweite Sprechblase am hero-square ===================================================== */ .hero-square { position: relative; } .hero-cta-speech { position: absolute; right: -14px; top: -22px; z-index: 4; background: var(--pink); color: var(--white); padding: 0.75rem 1.15rem 0.65rem; border-radius: 999px 999px 999px 4px; font-family: var(--font-display); text-transform: uppercase; line-height: 1; text-align: center; box-shadow: 0 10px 28px rgba(0,0,0,0.22); display: inline-flex; flex-direction: column; gap: 0.2rem; text-decoration: none; animation: ctaSpeechWiggle 3.5s ease-in-out infinite; transform-origin: top right; border: 2px solid var(--beige); } .hero-cta-speech::after { content: ""; position: absolute; bottom: -8px; right: 20px; width: 18px; height: 18px; background: var(--pink); transform: rotate(45deg); border-right: 2px solid var(--beige); border-bottom: 2px solid var(--beige); border-radius: 2px; z-index: -1; } .hero-cta-speech-head { font-size: 1.1rem; letter-spacing: 0.01em; color: var(--white); } .hero-cta-speech-sub { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; color: var(--white); letter-spacing: 0.03em; text-transform: none; opacity: 0.95; } .hero-cta-speech:hover { color: var(--white); animation-play-state: paused; transform: translateY(-2px) rotate(-4deg) scale(1.03); } @keyframes ctaSpeechWiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @media (max-width: 640px) { .hero-cta-speech { right: -8px; top: -18px; padding: 0.55rem 0.9rem 0.5rem; } .hero-cta-speech-head { font-size: 0.95rem; } .hero-cta-speech-sub { font-size: 0.72rem; } } /* ===================================================== Warum-Sektion – Initiative der Kirchengemeinde ===================================================== */ .warum-wrap { display: grid; grid-template-columns: clamp(140px, 18vw, 220px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; max-width: 1000px; margin: 0 auto; background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); position: relative; } .warum-wrap::before { content: ""; position: absolute; inset: -6px; background: var(--pink); border-radius: calc(var(--radius-lg) + 6px); z-index: -1; opacity: 0.08; } @media (max-width: 720px) { .warum-wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: clamp(1.2rem, 5vw, 2rem); } .warum-logo { max-width: 88px; } .warum-logo::after { inset: -8px; } .warum-title { font-size: clamp(1.6rem, 7vw, 2.4rem); } .warum-points li { grid-template-columns: 44px 1fr; gap: 0.7rem; } .warum-point-icn { width: 40px; height: 40px; padding: 8px; } } @media (max-width: 480px) { .warum-logo { max-width: 70px; } .warum-logo::after { inset: -6px; } } .warum-logo { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--beige); display: flex; align-items: center; justify-content: center; max-width: 220px; position: relative; transition: transform var(--transition-slow); background: transparent; } .warum-logo::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed var(--pink-light); opacity: 0.7; animation: warumRotate 30s linear infinite; } @keyframes warumRotate { to { transform: rotate(360deg); } } .warum-wrap:hover .warum-logo { transform: rotate(-6deg); } .warum-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .warum-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--pink-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; } .warum-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--pink); text-transform: uppercase; line-height: 1; margin-bottom: 0.8rem; letter-spacing: -0.01em; } .warum-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; color: var(--ink); margin-bottom: var(--spacing-md); max-width: 600px; } @media (max-width: 720px) { .warum-lead { margin-left: auto; margin-right: auto; } } .warum-points { list-style: none; display: grid; gap: var(--spacing-sm); padding: 0; } .warum-points li { display: grid; grid-template-columns: 52px 1fr; gap: 0.9rem; align-items: start; text-align: left; } @media (max-width: 720px) { .warum-points li { text-align: left; } } .warum-point-icn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--pink-soft); color: var(--pink); border-radius: 50%; padding: 10px; flex-shrink: 0; transition: all var(--transition); } .warum-wrap:hover .warum-point-icn { background: var(--pink); color: var(--white); } .warum-point-icn .icn { width: 100%; height: 100%; } .warum-points li strong { display: block; font-family: var(--font-display); color: var(--pink); font-size: 1.1rem; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 0.2rem; line-height: 1.15; } .warum-points li span { color: var(--ink); font-size: 0.98rem; line-height: 1.55; } /* ===================================================== Shared "schräg hoch" Hover-Effekt ===================================================== */ .fact-card, .gallery-teaser-item, .edition-card { transition: all var(--transition); border: 2px solid transparent; } .fact-card:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--pink); box-shadow: var(--shadow-hover); } .gallery-teaser-item:not(.gallery-teaser-cta):hover { transform: translateY(-6px) rotate(-1.5deg); border-color: var(--pink); box-shadow: var(--shadow-hover); z-index: 2; } .gallery-teaser-cta:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-hover); } /* ===================================================== Rückblick – weiße Karten + Hover-Schräg, besser lesbar ===================================================== */ .edition-card { background: var(--white); backdrop-filter: none; color: var(--ink); border: 2px solid transparent; box-shadow: var(--shadow-soft); } .edition-card h3 { color: var(--pink); } .edition-card .edition-zweck { color: var(--pink-dark); } .edition-card .edition-year { color: var(--pink); opacity: 1; } .edition-card p { color: var(--ink); } .edition-card a, .edition-card .edition-link { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; } .edition-card:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--white); box-shadow: 0 16px 44px rgba(0,0,0,0.22); background: var(--white); } /* Aktuelles Jahr (2026) kontrastiert: dunkel mit weißem Text */ .edition-card-next { background: var(--ink); color: var(--white); border-color: var(--ink); } .edition-card-next h3 { color: var(--white); } .edition-card-next .edition-zweck { color: var(--pink-light); } .edition-card-next .edition-year { color: var(--pink-light); } .edition-card-next p { color: var(--white); } .edition-card-next a, .edition-card-next .edition-link { color: var(--white); } /* 2026: keine Farbänderung beim Hover, nur Schräg + Border + Glow (via shared .edition-card:hover) */ .edition-card-next:hover { background: var(--ink); color: var(--white); border-color: var(--pink); } .edition-card-next:hover h3, .edition-card-next:hover .edition-zweck, .edition-card-next:hover .edition-year, .edition-card-next:hover p, .edition-card-next:hover a { color: inherit; } .edition-card-next:hover h3 { color: var(--white); } .edition-card-next:hover .edition-zweck, .edition-card-next:hover .edition-year { color: var(--pink-light); } /* Highlight (Vorjahr/Rekord) bleibt weiß, bekommt nur stärkeren Pink-Outline */ .edition-card-highlight { border-color: var(--pink); } /* ===================================================== Sponsor-Partner: vollständiger Schräg-Effekt ===================================================== */ .sponsor-card-partner { transition: all var(--transition); } .sponsor-card-partner:hover { transform: translateY(-6px) rotate(-1.5deg); border-color: var(--pink); box-shadow: var(--shadow-hover); opacity: 1; } /* Timeline-Linie wird oben im Run-Timeline-Block berechnet (Dot-Mitte) */ /* ===================================================== Anmeldung: weißer innerer Rahmen statt Gold-Border ===================================================== */ .anmeldung-wrap { padding: clamp(0.5rem, 1.5vw, 1rem) !important; background: var(--pink) !important; border: 0 !important; outline: 0 !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important; } .anmeldung-wrap .embed-container { background: var(--white); border-radius: var(--radius-md); overflow: hidden; padding: clamp(0.5rem, 1.2vw, 1rem); border: 6px solid var(--white); box-shadow: inset 0 0 0 2px var(--pink-soft); } /* ===================================================== Scroll-to-Top-Button (Mobile + Desktop, alle Orientierungen) ===================================================== */ .scroll-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--pink); color: var(--white); border: 2px solid var(--white); cursor: pointer; box-shadow: 0 6px 20px rgba(42,30,36,0.2); display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transform: translateY(10px); pointer-events: none; transition: all var(--transition); } .scroll-top svg { width: 22px; height: 22px; } .scroll-top.scroll-top-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-top:hover { background: var(--pink-dark); transform: translateY(-3px); } @media (min-width: 768px) { .scroll-top { right: 1.5rem; bottom: 1.5rem; width: 54px; height: 54px; } .scroll-top svg { width: 24px; height: 24px; } } /* ===================================================== Mobile Landscape: Nav/Burger funktionieren auch im Querformat ===================================================== */ @media (max-height: 500px) and (orientation: landscape) { .nav-container { padding: 0.5rem 1rem; } .nav-wordmark { font-size: 1.1rem; } .nav-logo-wrap { width: 32px; height: 32px; padding: 2px; } .nav-toggle { top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; padding: 8px; } .nav-menu { height: 100vh; height: 100dvh; padding: 1rem !important; justify-content: flex-start !important; padding-top: 3.5rem !important; overflow-y: auto; } .nav-menu .nav-link { font-size: 1.1rem !important; padding: 0.3rem 0 !important; } .hero-media { height: 100vh; height: 100dvh; min-height: 320px; } } /* Sponsoren Landscape / schmale Screens ≤520px: 3-Spalten, dichter */ @media (max-height: 500px) and (orientation: landscape) { .sponsor-grid-main, .sponsor-grid-partner { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .sponsor-grid-main .sponsor-card, .sponsor-card-partner { aspect-ratio: 4 / 3; padding: 0.6rem; } } /* ===================================================== TEMPORÄRER Theme-Switcher (zum Entscheiden) – leicht entfernbar ===================================================== */ .theme-switcher { position: fixed; right: 18px; bottom: 18px; z-index: 2000; font-family: var(--font-body); } .theme-switcher-toggle { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--pink); color: #fff; font-size: 1.4rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform 0.2s ease; } .theme-switcher-toggle:hover { transform: scale(1.08); } .theme-switcher-panel { position: absolute; right: 0; bottom: 62px; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.28); padding: 0.8rem; width: 220px; display: none; flex-direction: column; gap: 0.3rem; } .theme-switcher-panel.open { display: flex; } .theme-switcher-title { font-size: 0.85rem; font-weight: 700; color: #2a1e24; margin-bottom: 0.4rem; text-align: center; } .theme-swatch { display: flex; align-items: center; gap: 0.6rem; border: 2px solid transparent; background: #f5f5f5; border-radius: 9px; padding: 0.5rem 0.7rem; font-size: 0.85rem; font-weight: 600; color: #2a1e24; cursor: pointer; text-align: left; transition: all 0.15s ease; } .theme-swatch span { width: 28px; height: 18px; border-radius: 5px; flex-shrink: 0; background: linear-gradient(90deg, var(--sw1) 0 50%, var(--sw2) 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); } .theme-swatch:hover { background: #ececec; } .theme-swatch-active { border-color: #2a1e24; background: #fff; } /* Eigene-Farben-Bereich */ .theme-custom { border-top: 1px solid #eee; margin-top: 0.5rem; padding-top: 0.2rem; } .theme-custom-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: #2a1e24; padding: 0.35rem 0.2rem; } .theme-custom-row span { flex: 1; } .theme-custom-row input[type="color"] { width: 34px; height: 28px; border: 1px solid #ccc; border-radius: 6px; padding: 0; cursor: pointer; background: none; } .theme-custom-row code { font-size: 0.7rem; color: #666; width: 60px; text-align: right; } .theme-custom-apply { width: 100%; margin-top: 0.5rem; background: #2a1e24; color: #fff; border: none; border-radius: 8px; padding: 0.55rem; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .theme-custom-apply:hover { background: #000; } .theme-custom-hint { font-size: 0.68rem; color: #888; margin-top: 0.45rem; line-height: 1.3; }