/* ============================================================ main.css – Judo Webseite Keine Inline-Styles im HTML (CSP-konform) ============================================================ */ /* ── CSS-Variablen ─────────────────────────────────────────── */ :root { --c-bg: #e9caa9; --c-nav: #4b2e1e; --c-nav-border: #2f1c12; --c-text: #222; --c-heading: #2b1d14; /* Oberflächen (Karten, Panels) */ --c-surface: #fff; /* Text auf grundsätzlich dunklen Flächen (Hero, Badges) */ --c-light-text: #fff; /* Nav-/Aktions-Buttons: EIGENE Farbe, unabhängig von --c-surface, damit sie sich im Dunkelmodus klar vom Hintergrund abheben (siehe Dunkelmodus-Block unten) */ --c-btn-bg: #fff; --c-btn-text: #222; --c-btn-hover: #f2d2a9; --c-input-bg: #fff; --c-badge: #4b2e1e; --c-shadow: rgba(0, 0, 0, 0.15); --c-cal-btn: #7b0000; --c-cal-btn-hv: #a00000; --r-card: 16px; --r-btn: 10px; --ease: 0.25s ease; /* Schriftgröße – wird von core/fontsize.js über data-fontsize auf gesteuert (siehe unten) */ --font-scale: 1; } /* ── Dunkelmodus ───────────────────────────────────────────── Wird von core/theme.js über data-theme="dunkel" auf aktiviert. --c-btn-bg/--c-btn-text bekommen bewusst einen hellen Gold-Akzent, damit Buttons sich deutlich vom sehr dunklen Hintergrund/Navigationsbalken abheben (Kontrast!). */ :root[data-theme="dunkel"] { --c-bg: #1b120c; --c-nav: #120b07; --c-nav-border: #000000; --c-text: #f0e6da; --c-heading: #f5ead9; --c-surface: #2a1d14; --c-light-text: #f5ead9; --c-btn-bg: #e0a458; --c-btn-text: #1b120c; --c-btn-hover: #f0c07e; --c-input-bg: #1b120c; --c-badge: #6b4226; --c-shadow: rgba(0, 0, 0, 0.55); --c-cal-btn: #c1443f; --c-cal-btn-hv: #e0534d; } /* ── Schriftgröße ──────────────────────────────────────────── Wird von core/fontsize.js über data-fontsize auf gesteuert. Da die Typografie unten komplett in rem angegeben ist, skaliert diese eine Stelle den gesamten Text. */ html { font-size: calc(16px * var(--font-scale)); } html[data-fontsize="klein"] { --font-scale: 0.875; } html[data-fontsize="normal"] { --font-scale: 1; } html[data-fontsize="gross"] { --font-scale: 1.15; } /* Etwas kleinere Basis auf schmalen Bildschirmen (Handys), damit Überschriften & Buttons dort nicht unnötig groß wirken. Die Nutzer-Wahl oben (--font-scale) wird dabei weiterhin respektiert. */ @media (max-width: 700px) { html { font-size: calc(15px * var(--font-scale)); } } @media (max-width: 420px) { html { font-size: calc(14px * var(--font-scale)); } } /* ── Reduzierte Bewegung ───────────────────────────────────── Ohne explizite Wahl folgt die Seite der Systemeinstellung (prefers-reduced-motion). Trifft der Nutzer über die Settings-Seite eine explizite Wahl (core/motion.js, data-motion auf ), hat diese Vorrang vor dem System. */ @media (prefers-reduced-motion: reduce) { html:not([data-motion]) *, html:not([data-motion]) *::before, html:not([data-motion]) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html[data-motion="reduziert"] *, html[data-motion="reduziert"] *::before, html[data-motion="reduziert"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ── Fix: Rendering-Bug an abgerundeten Ecken ───────────────── In manchen Browsern (v.a. Chrome/Edge) entstehen an Ecken mit border-radius + box-shadow winzige Lücken, durch die die Hintergrundfarbe durchschimmert. transform: translateZ(0) zwingt den Browser, das Element auf einer eigenen Ebene zu rendern, was die Rundungs-Ungenauigkeit behebt. */ .home-highlight-card, .home-stat-karte, .settings-card, .rechtliches-karte, .aktuelles-karte, .trainer-card, .galerie-card, .event-detail-panel { transform: translateZ(0); } /* ── Baustellen-Hinweis-Popup ──────────────────────────────── */ .baustellen-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.55); animation: fadeIn 0.2s ease; } .baustellen-box { position: relative; background: var(--c-surface); border-radius: var(--r-card); padding: 32px 28px; max-width: 460px; width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); text-align: center; } .baustellen-box h2 { font-size: 1.375rem; margin: 0 0 12px; } .baustellen-box p { font-size: 1rem; color: var(--c-text); margin: 0 0 22px; } .baustellen-x-btn { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--c-text); cursor: pointer; padding: 4px 8px; } .baustellen-x-btn:hover { color: var(--c-cal-btn); } .baustellen-schliessen-btn { background: var(--c-btn-bg); color: var(--c-btn-text); border: none; border-radius: var(--r-btn); padding: 10px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color var(--ease), transform var(--ease); } .baustellen-schliessen-btn:hover { background: var(--c-btn-hover); transform: translateY(-2px); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: var(--c-bg); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--c-text); } /* ── Navigation ────────────────────────────────────────────── */ #menu { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px; background-color: var(--c-nav); border-bottom: 4px solid var(--c-nav-border); position: sticky; top: 0; z-index: 1000; } /* ── Navigations-Buttons ───────────────────────────────────── */ .nav-btn { background-color: var(--c-btn-bg); color: var(--c-btn-text); border: none; border-radius: var(--r-btn); padding: 10px 18px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease); } .nav-btn:hover { background-color: var(--c-btn-hover); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .nav-btn:active { transform: scale(0.97); } .nav-btn.active { background-color: var(--c-btn-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); outline: 2px solid var(--c-nav-border); outline-offset: 1px; } .nav-btn:focus-visible { outline: 3px solid var(--c-light-text); outline-offset: 2px; } /* ── Haupt-Container ───────────────────────────────────────── */ #app { padding: clamp(16px, 4vw, 30px); max-width: 1600px; margin: 0 auto; min-height: calc(100vh - 60px); animation: fadeIn 0.18s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ── Lade-Indikator ────────────────────────────────────────── */ .loading-msg { color: var(--c-heading); font-size: 1.125rem; opacity: 0.6; } /* ── Fehler-Boundary ───────────────────────────────────────── */ .error-boundary { background: #fff3f3; border: 2px solid #dc3545; border-radius: var(--r-card); padding: 24px; max-width: 500px; } .error-boundary h2 { color: #dc3545; margin-top: 0; } /* ── Typografie ────────────────────────────────────────────── */ h1 { font-size: calc(var(--font-scale) * clamp(28px, 4vw + 20px, 42px)); font-weight: 800; margin-bottom: 15px; color: var(--c-heading); } h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--c-heading); } p { font-size: 1.125rem; line-height: 1.6; } img { max-width: 100%; border-radius: 14px; object-fit: cover; } /* ── HOME – Hero ───────────────────────────────────────────── */ .hero { position: relative; width: 100%; height: clamp(280px, 55vh, 620px); overflow: hidden; border-radius: 18px; } .hero-bg { width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: blur(5px); transform: scale(1.04); } .hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; color: var(--c-light-text); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .hero-text h1 { font-size: calc(var(--font-scale) * clamp(30px, 7vw + 16px, 52px)); font-weight: 900; margin: 0 0 10px; color: var(--c-light-text); } .hero-text p { font-size: 1.375rem; font-weight: 600; margin: 0; } /* ── HOME – Einblicke & Kennzahlen ────────────────────────── */ .home-section { margin-top: 40px; } .home-section h2 { margin-bottom: 16px; } .home-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .home-highlight-card { margin: 0; background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 6px 18px var(--c-shadow); transition: transform var(--ease); } .home-highlight-card:hover { transform: translateY(-6px); } .home-highlight-card img { width: 100%; height: 220px; object-fit: cover; border-radius: 0; display: block; } .home-highlight-card figcaption { padding: 10px 14px; font-size: 0.9375rem; font-weight: 600; color: var(--c-heading); text-align: center; } .home-highlight-btn { display: inline-block; margin-top: 20px; background: var(--c-btn-bg); color: var(--c-btn-text); border: none; border-radius: var(--r-btn); padding: 10px 20px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: background-color var(--ease), transform var(--ease); } .home-highlight-btn:hover { background: var(--c-btn-hover); transform: translateY(-2px); } .home-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .home-stat-karte { background: var(--c-surface); border-radius: var(--r-card); padding: 24px; text-align: center; box-shadow: 0 6px 18px var(--c-shadow); } .home-stat-zahl { font-size: 2.5rem; font-weight: 800; color: var(--c-cal-btn); margin: 0 0 6px; } .home-stat-label { font-size: 1rem; margin: 0; color: var(--c-text); } /* ── TERMINE ───────────────────────────────────────────────── */ .termine-header { text-align: center; margin-bottom: 24px; } .termine-header h1 { margin-bottom: 6px; } .termine-header p { font-weight: 600; margin: 0; } #calendar { background: var(--c-surface); padding: clamp(10px, 3vw, 20px); border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); overflow-x: auto; } .fc-toolbar-title { font-size: 1.625rem !important; font-weight: 700 !important; } .fc-button-primary { background-color: var(--c-cal-btn) !important; border-color: var(--c-cal-btn) !important; border-radius: 8px !important; } .fc-button-primary:hover { background-color: var(--c-cal-btn-hv) !important; border-color: var(--c-cal-btn-hv) !important; } /* ── KONTAKTFORMULAR ───────────────────────────────────────── */ .kontakt-formular { display: flex; flex-direction: column; gap: 18px; } .kf-feld { display: flex; flex-direction: column; gap: 6px; } .kf-feld label { font-weight: 700; font-size: 0.9375rem; color: var(--c-heading); } .kf-hilfetext { font-size: 0.8125rem; color: var(--c-text); opacity: 0.7; margin: 2px 0 0; } .kf-feld input[type="text"], .kf-feld input[type="email"], .kf-feld textarea { font: inherit; font-size: 1rem; padding: 10px 12px; border: 2px solid rgba(0, 0, 0, 0.2); border-radius: var(--r-btn); background: var(--c-input-bg); color: var(--c-text); resize: vertical; } .kf-feld input[type="text"]:focus, .kf-feld input[type="email"]:focus, .kf-feld textarea:focus { outline: 3px solid var(--c-cal-btn); outline-offset: 1px; } .kf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .kf-consent-zeile { flex-direction: row; align-items: flex-start; gap: 10px; } .kf-consent-zeile input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; } .kf-consent-zeile label { font-weight: 400; font-size: 0.9375rem; color: var(--c-text); } .kf-inline-link { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--c-cal-btn); text-decoration: underline; cursor: pointer; } .kf-submit-btn { align-self: flex-start; background: var(--c-btn-bg); color: var(--c-btn-text); border: none; border-radius: var(--r-btn); padding: 12px 26px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color var(--ease), transform var(--ease); } .kf-submit-btn:hover:not(:disabled) { background: var(--c-btn-hover); transform: translateY(-2px); } .kf-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .kf-status { margin: 0; font-size: 0.9375rem; font-weight: 600; min-height: 1.2em; } .kf-status-erfolg { color: #2e7d32; } .kf-status-fehler { color: var(--c-cal-btn); } /* ── SETTINGS ──────────────────────────────────────────────── */ .settings-liste { display: flex; flex-direction: column; gap: 20px; } .settings-card { background: var(--c-surface); border-radius: var(--r-card); padding: 24px; box-shadow: 0 6px 18px var(--c-shadow); } .settings-card h2 { margin-top: 0; } .settings-status { font-weight: 600; margin: 8px 0 16px; } .settings-hinweis { font-size: 0.875rem; color: var(--c-text); opacity: 0.7; margin: 10px 0 0; } .settings-btn-row { display: flex; flex-wrap: wrap; gap: 10px; } .settings-btn { background: var(--c-btn-bg); color: var(--c-btn-text); border: none; border-radius: var(--r-btn); padding: 10px 20px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease); } .settings-btn:hover { background: var(--c-btn-hover); transform: translateY(-2px); } .settings-btn.active { box-shadow: 0 0 0 3px var(--c-nav-border) inset; } /* ── IMPRESSUM / DATENSCHUTZ ───────────────────────────────── */ .rechtliches-karte { background: var(--c-surface); border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 20px; box-shadow: 0 6px 18px var(--c-shadow); } .rechtliches-karte h2 { margin-top: 0; font-size: 1.25rem; } .rechtliches-karte p { font-size: 1rem; margin: 6px 0; } .rechtliches-karte a { color: var(--c-cal-btn); font-weight: 700; text-decoration: none; } .rechtliches-karte a:hover { text-decoration: underline; } .rechtliches-hinweis { color: var(--c-cal-btn); font-style: italic; } .rechtliches-kleingedrucktes { font-size: 0.8125rem !important; opacity: 0.6; margin-top: 10px !important; } /* ── Footer ────────────────────────────────────────────────── */ #footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 18px 20px; background-color: var(--c-nav); border-top: 4px solid var(--c-nav-border); } .footer-link { background: none; border: none; color: var(--c-light-text); font-size: 0.9375rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 4px 8px; } .footer-link:hover { color: var(--c-btn-hover); } .footer-link:focus-visible { outline: 2px solid var(--c-light-text); outline-offset: 2px; } /* ── AKTUELLES ─────────────────────────────────────────────── */ .aktuelles-liste { display: flex; flex-direction: column; gap: 20px; } .aktuelles-karte { background: var(--c-surface); border-radius: var(--r-card); padding: 20px 24px; box-shadow: 0 6px 18px var(--c-shadow); border-left: 6px solid var(--c-cal-btn); transition: transform var(--ease); } .aktuelles-karte:hover { transform: translateY(-3px); } .aktuelles-datum { font-size: 0.8125rem; font-weight: 700; color: var(--c-cal-btn); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px; } .aktuelles-karte h2 { margin: 0 0 8px; } .aktuelles-text { margin: 0; color: var(--c-text); } /* ── TERMINE – Ereignis-Detail-Panel ───────────────────────── */ .event-detail-panel { display: none; margin-top: 20px; background: var(--c-surface); border-radius: 15px; padding: 20px 24px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .event-detail-panel.open { display: block; } .event-detail-panel h3 { margin-top: 0; color: var(--c-heading); } .event-link { display: inline-block; margin-top: 6px; color: var(--c-cal-btn); font-weight: 700; text-decoration: none; } .event-link:hover { text-decoration: underline; } .event-close-btn { margin-top: 12px; background: var(--c-btn-bg); color: var(--c-btn-text); border: none; border-radius: var(--r-btn); padding: 8px 16px; cursor: pointer; font-weight: 600; transition: background-color var(--ease); } .event-close-btn:hover { background: var(--c-btn-hover); } /* ── TRAINER ───────────────────────────────────────────────── */ .subtitle { font-size: 1.125rem; color: var(--c-text); opacity: 0.75; margin-top: -10px; margin-bottom: 24px; } .trainer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: stretch; } .trainer-card { background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 6px 18px var(--c-shadow); transition: transform var(--ease); display: flex; flex-direction: column; } .trainer-card:hover { transform: translateY(-6px); } .trainer-card img { display: block; width: 100%; height: auto; border-radius: 0; } .trainer-body { padding: 14px; flex: 1; display: flex; flex-direction: column; } .trainer-body h2 { font-size: 1.125rem; text-align: center; margin: 6px 0 8px; } .trainer-badge { display: block; width: fit-content; margin: 0 auto 10px; background: var(--c-badge); color: var(--c-light-text); padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .trainer-body p { font-size: 0.875rem; margin: 4px 0; line-height: 1.4; } .trainer-desc { margin-top: 10px !important; flex: 1; color: var(--c-text); opacity: 0.85; } /* ── GALERIE ───────────────────────────────────────────────── */ .galerie-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .galerie-card { margin: 0; background: var(--c-surface); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 6px 18px var(--c-shadow); transition: transform var(--ease); display: flex; flex-direction: column; } .galerie-card:hover { transform: translateY(-6px); } .galerie-card img { display: block; width: 100%; height: auto; border-radius: 0; } .galerie-card figcaption { padding: 10px; text-align: center; } .galerie-card h3 { font-size: 1rem; margin: 0 0 4px; } .galerie-card p { font-size: 0.8125rem; color: var(--c-text); opacity: 0.75; margin: 0; } /* ── Responsive ────────────────────────────────────────────── */ /* Große Desktop-Monitore: #app hat oben bereits max-width: 1600px, damit Inhalte nicht endlos in die Breite gezogen werden. */ @media (max-width: 1400px) { .trainer-grid, .galerie-grid { grid-template-columns: repeat(3, 1fr); } } /* Tablets */ @media (max-width: 900px) { .trainer-grid, .galerie-grid { grid-template-columns: repeat(2, 1fr); } .home-highlight-grid { grid-template-columns: repeat(2, 1fr); } } /* Kleine Tablets / große Handys (Querformat) */ @media (max-width: 700px) { #menu { justify-content: center; } .nav-btn { flex: 1 1 calc(50% - 10px); } .aktuelles-liste, .rechtliches-karte, .settings-card { max-width: 100%; } .fc-toolbar-title { font-size: 1.25rem !important; } .fc-toolbar { flex-direction: column; gap: 8px; } .fc-button { padding: 4px 10px !important; font-size: 0.8125rem !important; } } /* Handys */ @media (max-width: 500px) { .trainer-grid, .galerie-grid { grid-template-columns: 1fr; gap: 14px; } .nav-btn { flex: 1 1 100%; } #menu { padding: 10px 14px; gap: 8px; } .home-highlight-grid { grid-template-columns: 1fr; } .aktuelles-karte, .rechtliches-karte, .settings-card, .event-detail-panel { padding: 16px 18px; } .settings-btn-row { flex-direction: column; } .settings-btn { width: 100%; text-align: center; } } /* Sehr kleine Handys */ @media (max-width: 380px) { #menu { gap: 6px; padding: 8px 10px; } .nav-btn { padding: 8px 10px; } }