/* ============================================================ KARATEVEREIN BUSHIDO LEIPZIG E.V. — DESIGN SYSTEM Stil: Dōjō / JKA — kräftig, kondensiert, Schwarz · Rot · Weiß Typografie: Arial (gute Lesbarkeit, keine externen Fonts) Palette: Tiefes Rot als Signal auf Tinte & Weiß ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Akzent */ --accent: #c20f2f; --accent-dark: #8f0a20; --accent-light: #e6182f; --accent-soft: #fbeef0; /* Rot aus dem Vereinslogo (bushido-logo.svg) — für das Mobil-Menü */ --logo-red: #e52428; /* Tinte & Neutraltöne */ --ink: #0c0d11; --ink-2: #14151b; --ink-3: #1d1e26; --text: #14151a; --body: #3c3f47; --muted: #6a6f78; --muted-2: #9aa0a8; /* Flächen */ --bg: #ffffff; --bg-soft: #f5f4f1; --bg-soft-2: #efeee9; --bg-card: #ffffff; --border: #e7e6e1; --border-2: #dad8d2; /* Tiefe (dezent) */ --shadow-xs: 0 1px 2px rgba(12,13,17,0.04); --shadow-sm: 0 2px 8px rgba(12,13,17,0.06); --shadow: 0 8px 24px rgba(12,13,17,0.08); --shadow-lg: 0 20px 48px rgba(12,13,17,0.12); /* Form — kantig, dōjō-haft */ --radius: 5px; --radius-sm: 3px; --radius-lg: 7px; --nav-h: 86px; /* Safe-Area (Dynamic Island / Home-Indikator): dank viewport-fit=cover nutzt die Seite den ganzen Bildschirm und füllt die Ränder selbst — ein durchgehender Hintergrund statt weißer System-Segmente. Auf Geräten ohne Aussparung sind beide Werte 0. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Höhe der Flyer-Vorschau in der Terminliste – der Details-Knopf übernimmt sie, damit beide gleich groß bleiben (mobil auf .event-item überschrieben) */ --evt-thumb-h: 60px; /* Schrift */ --font: Arial, Helvetica, sans-serif; --font-display: Arial, Helvetica, sans-serif; --font-serif: Arial, Helvetica, sans-serif; /* Bewegung */ --ease: cubic-bezier(0.22, 0.7, 0.25, 1); } /* Dunkler „Canvas"-Grund: Ohne eigenen html-Hintergrund würde das weiße body-Weiß auf die Browserfläche durchschlagen und die durchscheinende iOS-Safari-Glasleiste unten weiß einfärben. Mit dunklem html-Grund wirkt die Leiste transparent/dunkel (wie z. B. auf spiegel.de). */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--safe-top)); background: var(--ink); } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.55; font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; text-transform: none; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .hidden { display: none !important; } .ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; } .loading { text-align: center; padding: 56px; color: var(--muted-2); font-size: 15px; } /* Gemeinsamer Eyebrow-Look (Sektions-Auszeichnung) */ .section-eyebrow, .hero-eyebrow, .card-link, .nav-links a, .btn, .day-label, .filter-btn, .event-details-btn, .features-strip .feature, .supporters-title, .events-list-title, .blog-cat, .post-cat-tag, .trainer-belt { font-family: var(--font-display); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ===== SPRACHWECHSEL: flüssige Überblendung der übersetzbaren Wörter ===== */ /* Beim Umschalten legt main.js kurz .lang-switching auf ; die Wörter blenden aus, der Text wird getauscht, dann blenden sie wieder ein. Greift auf Desktop-Navigation wie im Burger-Overlay. */ [data-i18n] { transition: opacity 0.18s var(--ease); } body.lang-switching [data-i18n] { opacity: 0; } /* ===== ANKÜNDIGUNGS-BANNER ===== */ /* Der Banner füllt die Safe Area selbst; seine per JS gemessene Höhe (--banner-h, offsetHeight) enthält das Padding dann automatisch mit. */ .site-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; background: var(--accent); color: #fff; padding-top: var(--safe-top); } .site-banner[hidden] { display: none; } .site-banner-inner { max-width: 1180px; margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; } .site-banner-icon { display: inline-flex; flex-shrink: 0; } .site-banner-icon svg { width: 16px; height: 16px; display: block; } .site-banner-text { font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; font-family: var(--font-display); transition: opacity 0.25s ease; } .site-banner-text.fade { opacity: 0; } /* Mit Banner sitzt der Header unterhalb der Aussparung — die füllt schon der Banner, deshalb hier kein zusätzliches Safe-Area-Padding. */ body.has-banner #header { top: var(--banner-h, 40px); padding-top: 0; height: var(--nav-h); } body.has-banner .page { padding-top: calc(var(--nav-h) + var(--banner-h, 40px)); } body.has-banner .nav-links { top: calc(var(--nav-h) + var(--banner-h, 40px)); } /* ===== HEADER & NAV ===== */ #header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--border); /* Weiß bis unter die Dynamic Island ziehen — der Inhalt (.navbar) bleibt durch das Padding unterhalb der Aussparung */ height: calc(var(--nav-h) + var(--safe-top)); padding-top: var(--safe-top); } /* Bewusst breiter als der Inhalts-Container (1120px): die Kopfzeile nutzt die Bildschirmbreite aus, damit Menü, Social-Symbole und Sprachwahl weit rechts stehen. Auf sehr breiten Monitoren begrenzt max-width das Ganze, sonst driften Logo und Menü zu weit auseinander. */ .navbar { display: flex; align-items: center; justify-content: space-between; max-width: 1600px; margin: 0 auto; padding: 0 40px; height: var(--nav-h); } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; position: relative; transform: translateY(9px); } .logo-mark { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; margin: 0 4px -24px 0; position: relative; z-index: 1; } .logo-text strong { color: var(--accent); font-weight: 600; } .logo:hover { opacity: 1; } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-links { display: flex; list-style: none; gap: 2px; align-items: center; } .nav-links a { position: relative; display: block; padding: 9px 11px; text-decoration: none; color: var(--muted); font-size: 14.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-sm); transition: color 0.2s var(--ease), opacity 0.18s var(--ease); } .nav-links a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { transform: scaleX(1); } /* Nebenelemente rechts (Social + Sprache), je durch einen feinen Strich abgesetzt. Die Trennlinien entfallen im Burger-Modus. */ .nav-utility { display: inline-flex; align-items: center; gap: 14px; } .nav-social { display: inline-flex; align-items: center; gap: 8px; } .nav-social::before, .nav-lang::before { content: ''; width: 1px; height: 20px; margin-right: 8px; background: var(--border); } /* ── Sprachumschaltung: Flagge + Pfeil, klappt eine Liste auf ── */ .nav-lang { position: relative; display: inline-flex; align-items: center; } .lang-flag { display: block; width: 26px; height: 17px; flex-shrink: 0; border: 1px solid var(--border-2); border-radius: 2px; overflow: hidden; } /* object-fit: die Flaggen haben unterschiedliche Seitenverhältnisse (Deutschland 5:3, die US/UK-Kombination fast 2:1). Statt sie zu stauchen, werden sie auf das einheitliche Kästchen beschnitten. */ .lang-flag svg, .lang-flag img { display: block; width: 100%; height: 100%; object-fit: cover; } .lang-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; background: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .lang-toggle:hover { border-color: var(--border); background: var(--bg-soft); } .lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lang-caret { width: 13px; height: 13px; color: var(--muted); transition: transform 0.2s var(--ease); } .nav-lang.open .lang-caret { transform: rotate(180deg); } .lang-menu { display: none; list-style: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 158px; padding: 4px; z-index: 1002; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .nav-lang.open .lang-menu { display: block; } .lang-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; background: none; border: 0; cursor: pointer; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 13.5px; color: var(--body); text-align: left; } .lang-option:hover { background: var(--bg-soft); color: var(--text); } .lang-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .lang-option[aria-current] { background: var(--accent-soft); color: var(--text); } /* Markenlogos füllen den Kreis komplett aus; die frühere graue Umrandung entfällt, die Außenmaße (36px bzw. 46px auf Mobil) bleiben gleich. */ .social-link { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .social-link:hover { opacity: 0.82; transform: translateY(-1px); } .social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .social-link img { display: block; width: 100%; height: 100%; } .social-link[hidden] { display: none; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; border-radius: var(--radius-sm); } .hamburger span { display: block; width: 24px; height: 3.5px; background: var(--text); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Burger → X in zwei Phasen (Muster von eska.co.uk): erst schieben die äußeren Balken zur Mitte, dann drehen sie sich; der mittlere Balken verschwindet in Phase 1. Schließen läuft rückwärts (.closing). */ .hamburger.open span:nth-child(1) { animation: ham-top 0.7s var(--ease) forwards; } .hamburger.open span:nth-child(2) { animation: ham-mid 0.7s var(--ease) forwards; } .hamburger.open span:nth-child(3) { animation: ham-bot 0.7s var(--ease) forwards; } .hamburger.closing span:nth-child(1) { animation: ham-top-close 0.7s var(--ease) forwards; } .hamburger.closing span:nth-child(2) { animation: ham-mid-close 0.7s var(--ease) forwards; } .hamburger.closing span:nth-child(3) { animation: ham-bot-close 0.7s var(--ease) forwards; } @keyframes ham-top { 0% { transform: none; } 50% { transform: translateY(8.5px); } 100% { transform: translateY(8.5px) rotate(45deg); } } @keyframes ham-top-close { 0% { transform: translateY(8.5px) rotate(45deg); } 50% { transform: translateY(8.5px); } 100% { transform: none; } } @keyframes ham-mid { 50%, 100% { transform: scale(0); } } @keyframes ham-mid-close { 0%, 50% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes ham-bot { 0% { transform: none; } 50% { transform: translateY(-8.5px); } 100% { transform: translateY(-8.5px) rotate(-45deg); } } @keyframes ham-bot-close { 0% { transform: translateY(-8.5px) rotate(-45deg); } 50% { transform: translateY(-8.5px); } 100% { transform: none; } } /* ===== PAGES ===== */ .page { display: none; min-height: 100vh; padding-top: calc(var(--nav-h) + var(--safe-top)); } .page.active { display: block; } @media (prefers-reduced-motion: no-preference) { .page.active { animation: pageIn 0.45s var(--ease) both; } } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Dunkle, dramatische Unterseiten-Banner (JKA-Stil) */ .page-header { position: relative; overflow: hidden; background: var(--ink); border-bottom: 3px solid var(--accent); padding: 34px 0 28px; } .page-header::after { content: '空手'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-serif); font-size: 6rem; font-weight: 700; line-height: 1; color: rgba(255,255,255,0.045); pointer-events: none; user-select: none; } .page-header h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; position: relative; } .page-subtitle { font-size: 0.98rem; color: rgba(255,255,255,0.66); max-width: 640px; line-height: 1.7; margin-top: 6px; position: relative; } /* Info-Box unter dem Seitentitel (z. B. Probetraining) — hält den Text aus dem schwarzen Kopfbereich heraus. Rendert Zeilenumbrüche aus dem Backend-Text. */ .intro-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 26px; margin: 24px 0 24px; position: relative; z-index: 2; } .intro-box:has(p:empty) { display: none; } /* Box jeweils so breit wie das Formular darunter (form-layout-single 560px, contact-layout 760px) und wie dieses zentriert */ #probetraining-intro-box { max-width: 560px; margin-left: auto; margin-right: auto; } #kontakt-intro-box { max-width: 760px; margin-left: auto; margin-right: auto; } /* Folgt auf die Box ein Formular-Layout, entfällt dessen großer oberer Abstand — so ist die Lücke Banner→Box gleich groß wie Box→Formular (Margin der Box). Der :has-Wächter lässt den Abstand unangetastet, wenn die Box leer/versteckt ist. */ .intro-box:not(:has(p:empty)) ~ .form-layout, .intro-box:not(:has(p:empty)) ~ .contact-layout { padding-top: 0; } .intro-box p { margin: 0; color: var(--body); font-size: 1.05rem; line-height: 1.7; white-space: pre-line; } /* ===== HERO ===== */ .hero { min-height: calc(100vh - var(--nav-h) - var(--safe-top)); background: radial-gradient(1100px 560px at 82% -10%, rgba(194,15,47,0.30), transparent 58%), linear-gradient(168deg, #101118 0%, #14080c 58%, #1a0a10 100%); display: flex; align-items: center; justify-content: center; padding: 60px 24px; max-width: 100%; overflow: hidden; position: relative; } .hero::before { content: '道'; position: absolute; right: -3%; top: 50%; transform: translateY(-50%); font-family: var(--font-serif); font-weight: 700; font-size: clamp(20rem, 42vw, 44rem); line-height: 0.8; color: rgba(255,255,255,0.035); pointer-events: none; user-select: none; z-index: 0; } /* ── Hero-Slideshow (Bilder/Videos aus dem Backend) ── Die Folien liegen hinter dem Inhalt; .is-active blendet die jeweils aktuelle ein. Ohne aktive Slideshow bleibt .hero-media leer und ohne Wirkung. */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease-in-out; pointer-events: none; } .hero-slide.is-active { opacity: 1; } .hero-slide img, .hero-slide video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; } /* Leichte Abdunklung fürs Gesamtbild – die Lesbarkeit des Textes sichert die dunkle Karte, deshalb darf das Motiv hier sichtbar bleiben. */ .hero.has-media .hero-media::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgba(12,13,17,0.55) 0%, rgba(12,13,17,0.32) 50%, rgba(12,13,17,0.22) 100%); pointer-events: none; } /* Kanji-Wasserzeichen und roter Kreis sind im Backend einzeln schaltbar */ .hero.hide-watermark::before { display: none; } .hero.hide-badge .hero-badge { display: none; } /* Über einem Medium braucht das 道 zwei Korrekturen: Das Pseudo-Element steht im Baum vor .hero-media und läge bei gleichem z-index darunter, wäre also vom Bild verdeckt. Und 3,5 % Weiß sind zwar auf dem dunklen Verlauf richtig, auf einem Foto aber schlicht nicht wahrnehmbar. */ .hero.has-media::before { z-index: 1; color: rgba(255,255,255,0.11); text-shadow: 0 0 40px rgba(0,0,0,0.35); } /* Über hellen Motiven braucht der Kreis einen eigenen dunklen Grund, sonst verschwindet das weiße 空手道 im Bild. */ .hero.has-media .hero-badge { background: radial-gradient(circle at 50% 45%, rgba(12,13,17,0.62) 0%, rgba(12,13,17,0.34) 72%, rgba(12,13,17,0.14) 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .hero-content { flex: 1; max-width: 660px; color: #fff; position: relative; z-index: 1; } /* Bei aktiver Slideshow steht der Text in einer dunklen Karte – sonst wäre er je nach Motiv nicht zuverlässig lesbar. */ .hero.has-media .hero-content { background: rgba(12,13,17,0.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius); padding: 44px 44px 48px; max-width: 700px; } @media (max-width: 900px) { .hero.has-media .hero-content { padding: 30px 24px 34px; } } /* ── Position der Textkarte (im Backend wählbar) ── „mittig" ist der Ausgangszustand und braucht keine eigene Regel. Ohne Kasten (card-plain) entfällt die Karte, dafür dunkelt ein Verlauf von unten ab – gilt auf allen Bildschirmgrößen. */ .hero.has-media.card-plain .hero-content { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .hero.has-media.card-plain .hero-media::after { background: linear-gradient(to top, rgba(12,13,17,0.92) 0%, rgba(12,13,17,0.62) 26%, rgba(12,13,17,0.14) 60%, rgba(12,13,17,0.38) 100%); } /* Ohne Kasten trägt allein der Verlauf die Lesbarkeit – etwas hellerer Fließtext und ein weicher Schatten halten den Text auch über hellen Bildstellen sicher lesbar. */ .hero.has-media.card-plain .hero-content p { color: rgba(255,255,255,0.9); } .hero.has-media.card-plain .hero-content h1, .hero.has-media.card-plain .hero-content p { text-shadow: 0 2px 16px rgba(0,0,0,0.6); } @media (max-width: 900px) { /* Auf schmalen Bildschirmen steht der Text mittig statt unten, wo der Verlauf am kräftigsten ist – deshalb dort gleichmäßiger abdunkeln. */ .hero.has-media.card-plain .hero-media::after { background: linear-gradient(to top, rgba(12,13,17,0.90) 0%, rgba(12,13,17,0.62) 55%, rgba(12,13,17,0.50) 100%); } } /* Die Anordnungen setzen eine nebeneinanderliegende Zeile voraus. Unterhalb von 900px stapelt der Hero senkrecht – dort bleibt es beim normalen Fluss, sonst läge die Karte über dem Kanji-Kreis. */ @media (min-width: 901px) { .hero.has-media.card-bottom .hero-content, .hero.has-media.card-plain .hero-content { align-self: flex-end; } .hero.has-media.card-band .hero-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-width: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 30px max(24px, 7%) 34px; } .hero.has-media.card-band .hero-badge { position: absolute; right: 7%; top: 42%; transform: translateY(-50%); margin-left: 0; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent-light); margin-bottom: 24px; } .hero-content h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; line-height: 1.02; margin-bottom: 22px; text-transform: none; letter-spacing: 0; color: #fff; } .hero-content h1 span { color: var(--accent-light); } .hero-content p { font-size: 1.14rem; color: rgba(255,255,255,0.72); margin-bottom: 38px; max-width: 520px; line-height: 1.7; font-weight: 300; } .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; } .hero-badge { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; flex-shrink: 0; border: 2px solid var(--accent); border-radius: 50%; margin-left: 56px; position: relative; z-index: 1; background: radial-gradient(circle at 50% 40%, rgba(194,15,47,0.18), transparent 70%); } .hero-badge::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; } .badge-inner { text-align: center; } .kanji { display: block; font-family: var(--font-serif); font-size: 3.4rem; font-weight: 700; line-height: 1.06; text-align: center; color: #fff; } .badge-sub { font-size: 0.74rem; color: rgba(255,255,255,0.55); letter-spacing: 0; text-transform: none; font-family: var(--font-display); } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 30px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; } .btn:active { transform: translateY(0) scale(0.985); } .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-light); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(194,15,47,0.30); } .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); } .btn-outline:hover { border-color: var(--accent); background: transparent; color: #fff; } .btn-full { width: 100%; } /* ===== FEATURES STRIP ===== */ .features-strip { background: #0f1016; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 18px 24px; display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; } .feature { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 10px 32px; border-right: 1px solid rgba(255,255,255,0.06); } .feature:last-child { border-right: none; } .feat-icon { width: 20px; height: 20px; padding: 7px; background: rgba(194,15,47,0.14); border-radius: 6px; color: var(--accent-light); flex-shrink: 0; box-sizing: content-box; } /* ===== HOME CARDS ===== */ .home-sections { padding: 96px 0; background: var(--bg-soft); } .home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .home-card { display: block; color: inherit; text-decoration: none; position: relative; background: var(--bg-card); border-radius: var(--radius); padding: 36px 30px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: box-shadow 0.28s var(--ease), border-color 0.28s; overflow: hidden; } .home-card:hover { box-shadow: var(--shadow); border-color: var(--accent); } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); margin-bottom: 22px; } .card-icon svg { width: 24px; height: 24px; } .home-card h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; text-transform: none; letter-spacing: 0; } .home-card p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 18px; } .card-link { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; transition: opacity 0.2s; } .home-card:hover .card-link { opacity: 0.75; } /* ===== ANGEBOTE ===== */ .offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 72px 0 88px; } .offer-card { background: var(--bg-card); border-radius: var(--radius); padding: 32px 28px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s; } .offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .offer-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); margin-bottom: 20px; } .offer-icon svg { width: 23px; height: 23px; } .offer-card h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: 10px; text-transform: none; letter-spacing: 0; } .offer-card p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 16px; } .offer-card ul { list-style: none; } .offer-card ul li { font-size: 13.5px; color: var(--body); padding: 5px 0; display: flex; align-items: baseline; gap: 9px; } .offer-card ul li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; background: var(--accent); transform: translateY(-2px); } /* ===== TRAININGSZEITEN ===== */ .training-table-wrap { padding: 64px 0 88px; } .day-group { margin-bottom: 38px; } .day-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px; } /* Der Wochentag ist die Überschrift des Abschnitts und wird auch so gesetzt: große dunkle Schrift statt einer schwarzen Fläche mit kleiner Schrift, die sich nur schwer lesen ließ. */ .day-label { display: block; background: none; color: var(--text); padding: 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; } .day-location { display: flex; align-items: center; gap: 14px; } .day-street { font-size: 13.5px; color: var(--muted); font-weight: 500; } .training-card { background: var(--bg-card); border-radius: var(--radius-sm); padding: 20px 26px; margin-bottom: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 18px; transition: box-shadow 0.22s var(--ease), border-color 0.22s var(--ease); } .training-card:hover { box-shadow: var(--shadow-sm); } .training-time { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0; } .training-group { font-weight: 600; font-size: 15px; color: var(--text); } .training-meta { font-size: 13px; color: var(--muted); } .training-map-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; border: 1px solid var(--border-2); background: var(--bg); color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s; } .training-map-btn:hover { border-color: var(--accent); background: var(--accent-soft); } .training-map-btn svg { width: 14px; height: 14px; } /* ===== EVENTS / TERMINLISTE ===== */ .events-list { margin: 36px 0 88px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; } .event-item { display: flex; align-items: center; gap: 24px; padding: 18px 26px; border-bottom: 1px solid var(--border); transition: background 0.18s var(--ease); } .event-item:last-child { border-bottom: none; } .event-item:hover { background: var(--bg-soft); } .event-date { flex-shrink: 0; width: 116px; padding-right: 20px; border-right: 1px solid var(--border); line-height: 1.3; } .event-day { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .event-title { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin: 0; line-height: 1.2; } .event-meta { flex-shrink: 0; display: flex; align-items: center; gap: 20px; } .event-cat { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--font-display); } .event-details-btn { flex-shrink: 0; white-space: nowrap; /* Höhe an die Flyer-Vorschau gekoppelt, damit der Knopf gleich groß wirkt */ display: inline-flex; align-items: center; justify-content: center; min-height: var(--evt-thumb-h); min-width: 110px; font-family: var(--font-display); text-transform: none; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text); text-decoration: none; padding: 0 22px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } .event-details-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .no-events { text-align: center; padding: 64px 24px; color: var(--muted); } /* ===== FORMULARE ===== */ .form-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; padding: 72px 0 96px; } /* Formular ohne Info-Spalte daneben (Probetraining): einspaltig und zentriert */ .form-layout-single { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .form-card { background: var(--bg-card); border-radius: var(--radius); padding: 38px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .form-card h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 26px; text-transform: none; letter-spacing: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 13px; font-weight: 500; font-family: var(--font-display); letter-spacing: 0; text-transform: none; color: var(--body); margin-bottom: 7px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 16px; font-family: var(--font); background: var(--bg); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--muted-2); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194,15,47,0.1); } .form-group textarea { resize: vertical; } .form-note { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; line-height: 1.6; } .checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; color: var(--body); } .checkbox-label input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; } .checkbox-label a { color: var(--accent); font-weight: 500; } .success-msg { background: #f3faf5; border: 1px solid #c4e9d0; color: #1c6b3d; border-radius: var(--radius-sm); padding: 18px 22px; margin-top: 16px; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 12px; } .success-msg svg { width: 22px; height: 22px; flex-shrink: 0; color: #1c8a4d; } /* Bestätigungstext mit freiem Inhalt (Kontaktformular): mehrzeiliges HTML inkl. Überschriften, Listen, Links und Bildern aus dem Backend. */ .success-msg.rich { display: block; font-weight: 400; } .success-msg.rich > *:first-child { margin-top: 0; } .success-msg.rich > *:last-child { margin-bottom: 0; } .success-msg.rich h2, .success-msg.rich h3 { font-size: 1.15rem; font-weight: 600; color: #14603a; margin: 0 0 8px; } .success-msg.rich p { margin: 0 0 10px; line-height: 1.65; } .success-msg.rich ul, .success-msg.rich ol { margin: 0 0 10px; padding-left: 20px; line-height: 1.65; } .success-msg.rich a { color: #14603a; font-weight: 500; text-decoration: underline; } .success-msg.rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 6px 0; } .form-info h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; text-transform: none; } .info-steps { display: flex; flex-direction: column; gap: 0; margin-top: 24px; } .step { display: flex; gap: 18px; align-items: flex-start; position: relative; padding-bottom: 28px; } .step:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 42px; bottom: 4px; width: 1px; background: var(--border-2); } .step-num { flex-shrink: 0; width: 38px; height: 38px; background: var(--accent); color: #fff; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 17px; } .step strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text); font-weight: 600; } .step p { font-size: 14px; color: var(--muted); } /* ===== TRAINER ===== */ .trainers-grid { display: flex; flex-direction: column; gap: 26px; padding: 56px 0 40px; } .trainer-level-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .trainer-card { width: 250px; max-width: 100%; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s; } .trainer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .trainer-img { position: relative; width: 100%; height: 230px; background: linear-gradient(155deg, #16181f, #1b0c11); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.25); } .trainer-img::after { content: '武'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 6rem; color: rgba(255,255,255,0.05); pointer-events: none; } .trainer-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .trainer-img .ico { position: relative; z-index: 1; width: 54px; height: 54px; } .trainer-info { padding: 22px; text-align: center; } .trainer-info h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: 6px; } .trainer-meta { color: var(--muted); font-size: 13px; margin-bottom: 12px; } .trainer-belt { display: block; width: 100%; background: var(--grade-color, #444); border: none; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: none; padding: 7px 16px; border-radius: 3px; margin: 0 0 6px 0; text-align: center; } .trainer-belt--gold { background: #1a1410; border: 1px solid #c9a227; color: #c9a227; } .belt-visual { display: none; } .belt-visual { height: 12px; border-radius: 0; margin: 0 0 14px; background: var(--belt, #ccc); border: 1px solid rgba(0,0,0,0.16); box-shadow: inset 0 1px 2px rgba(0,0,0,0.14); } .trainer-license { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .trainer-license svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); } /* ===== GALERIE ===== */ .gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 40px 0 24px; } .filter-btn { padding: 8px 18px; border-radius: 0; border: 1px solid var(--border-2); background: var(--bg-card); color: var(--body); font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: all 0.2s var(--ease); } .filter-btn:hover { border-color: var(--text); color: var(--text); } .filter-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; } /* Tag-Filter bei „Aktuelles" größer & besser lesbar */ #blog-filters .filter-btn { font-size: 15px; font-weight: 600; padding: 10px 22px; } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 88px; } .gallery-item { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; position: relative; background: var(--bg-soft); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item .gal-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(12,13,17,0.78) 100%); display: flex; align-items: flex-end; padding: 14px; opacity: 0; transition: opacity 0.25s var(--ease); } .gallery-item:hover .gal-overlay { opacity: 1; } .gal-caption { color: #fff; font-size: 12.5px; font-weight: 500; } .gallery-placeholder { aspect-ratio: 1; border-radius: var(--radius-sm); background: linear-gradient(155deg, #16181f, #1b0c11); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 2.4rem; color: rgba(255,255,255,0.2); cursor: pointer; } .no-gallery { grid-column: 1/-1; text-align: center; padding: 64px; color: var(--muted); } /* ===== BLOG / AKTUELLES ===== */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 40px 0 88px; } .blog-card { display: flex; flex-direction: column; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-xs); text-decoration: none; color: inherit; transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .blog-cover { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: linear-gradient(155deg, #16181f, #1b0c11); display: flex; align-items: center; justify-content: center; } /* Banner vollständig zeigen (nicht beschneiden) – Hoch- wie Querformat wird in die Box eingepasst und mittig skaliert. */ .blog-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 0.45s var(--ease); } .blog-card:hover .blog-cover img { transform: scale(1.04); } .blog-cover-placeholder { font-family: var(--font-serif); font-size: 3.2rem; color: #fff; opacity: 0.32; } /* Kategorie/„Veranstaltungstag" sitzt unter dem Banner im Kartenkörper, damit sie das Banner nicht überdeckt. */ .blog-cat { align-self: flex-start; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 7px 16px; border-radius: 0; margin-bottom: 13px; } .blog-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .blog-meta { font-family: var(--font-display); font-size: 12px; color: var(--muted-2); margin-bottom: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; } .blog-card-body h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 9px; line-height: 1.25; } .blog-card-body p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; flex: 1; } /* Jahr-Filter (Aktuelles) */ .blog-year-filter { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; } .blog-year-filter label { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted-2); } .blog-year-filter select { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text); padding: 8px 38px 8px 16px; border: 1px solid var(--border-2); border-radius: 0; background-color: var(--bg-card); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .blog-year-filter select:hover { border-color: var(--text); } .blog-year-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194,15,47,0.1); } @media (max-width: 560px) { .blog-year-filter { margin-left: 0; } } /* Einzelbeitrag */ .post-header { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--ink) 0%, #16080c 100%); color: #fff; padding: 72px 0 56px; background-size: cover; background-position: center; border-bottom: 3px solid var(--accent); } .post-header.has-cover { padding: 120px 0 64px; border-bottom: 0; } /* Kopfzeile im Beitrag: Zurück-Button und Kategorie-Tag nebeneinander – auf Desktop wie mobil (Abstände liegen auf der Gruppe, nicht den Kindern). */ .post-header-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .post-header-top .post-back { margin: 0; } .post-header-top .post-cat-tag { margin: 0; } .post-back { display: inline-flex; align-items: center; vertical-align: middle; gap: 8px; color: #333; text-decoration: none; font-size: 16px; font-weight: 500; padding: 10px 14px; margin-bottom: 22px; border-radius: var(--radius-sm); background: #fff; border: 2px solid #000; transition: all 0.2s var(--ease); } .post-back:hover { color: #333; border-color: var(--accent); } /* Kategorie-Tag im Beitrag: gleich groß wie der „Alle Beiträge"-Button daneben (gleiche Schrift, Höhe & Radius) und dadurch besser lesbar. */ .post-cat-tag { display: inline-flex; align-items: center; vertical-align: middle; background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 10px 18px; margin-left: 12px; margin-bottom: 22px; border: 2px solid transparent; border-radius: var(--radius-sm); } .post-header h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 600; margin-bottom: 14px; max-width: 800px; line-height: 1.1; color: #fff; } .post-meta { font-family: var(--font-display); font-size: 14px; color: rgba(255,255,255,0.6); letter-spacing: 0; } .post-content { max-width: 720px; margin: 0 auto; padding: 64px 0 96px; font-size: 16.5px; line-height: 1.85; color: var(--body); } .post-content h2 { font-size: 1.7rem; font-weight: 600; margin: 44px 0 16px; text-transform: none; letter-spacing: 0; } .post-content h3 { font-size: 1.35rem; font-weight: 600; margin: 32px 0 12px; } .post-content p { margin-bottom: 20px; } .post-content ul, .post-content ol { margin: 0 0 20px 24px; } .post-content li { margin-bottom: 7px; } .post-content a { color: var(--accent); font-weight: 500; } .post-content img { max-width: 100%; border-radius: var(--radius); margin: 16px 0; box-shadow: var(--shadow); } .post-content::after { content: ""; display: block; clear: both; } /* Blocksatz: ohne Silbentrennung reißen im Deutschen große Lücken auf */ .post-content [style*="justify"] { -webkit-hyphens: auto; hyphens: auto; } .post-content figure { max-width: 100%; margin: 28px auto; } .post-content figure img { display: block; width: 100%; height: auto; margin: 0; } .post-content figcaption { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); font-style: italic; text-align: center; } /* Bild-Galerie: mehrere Bilder nebeneinander, Spaltenzahl kommt inline aus dem Editor */ .post-content .post-gallery { display: grid; gap: 18px; margin: 28px 0; clear: both; align-items: start; max-width: 100%; } .post-content .post-gallery figure { width: 100%; margin: 0; float: none; } /* Einheitliches Format, damit Bilder und Untertitel im Raster auf einer Linie liegen */ .post-content .post-gallery figure img { aspect-ratio: 4 / 3; object-fit: cover; } .post-content .post-gallery figcaption { margin-top: 8px; font-size: 13.5px; } /* Auf dem Handy sind schmale und umflossene Bilder unlesbar → volle Breite, untereinander */ @media (max-width: 640px) { .post-content figure { width: 100% !important; margin: 22px auto !important; float: none !important; } .post-content .post-gallery { grid-template-columns: 1fr !important; width: 100% !important; margin: 22px 0 !important; } .post-content .post-gallery figure { margin: 0 !important; } } /* Tablet: höchstens zwei Spalten, sonst werden die Bilder zu klein */ @media (min-width: 641px) and (max-width: 900px) { .post-content .post-gallery { grid-template-columns: repeat(2, 1fr) !important; } } .post-content blockquote { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 16px 22px; margin: 0 0 20px; color: var(--muted); font-style: italic; } /* ── Neue Beitrags-Blöcke aus dem Editor ───────────────────────────── Doppelte Selektoren: „.post-content“ (Client-Rendering, main.js) und „.blog-post .post-body“ (Server-Rendering, seoContent.js) zeigen denselben Inhalt und müssen gleich aussehen. */ /* Server-gerenderte Beiträge: Grundtypografie wie .post-content */ .blog-post .post-body { max-width: 720px; margin: 0 auto; padding: 40px 0 72px; font-size: 16.5px; line-height: 1.85; color: var(--body); } .blog-post .post-body::after { content: ""; display: block; clear: both; } .blog-post .post-body h2 { font-size: 1.7rem; font-weight: 600; margin: 44px 0 16px; } .blog-post .post-body h3 { font-size: 1.35rem; font-weight: 600; margin: 32px 0 12px; } .blog-post .post-body p { margin-bottom: 20px; } .blog-post .post-body ul, .blog-post .post-body ol { margin: 0 0 20px 24px; } .blog-post .post-body a { color: var(--accent); font-weight: 500; } .blog-post .post-body img { max-width: 100%; border-radius: var(--radius); margin: 16px 0; } .blog-post .post-body figure { max-width: 100%; margin: 28px auto; } .blog-post .post-body figure img { display: block; width: 100%; height: auto; margin: 0; } .blog-post .post-body .post-gallery { display: grid; gap: 18px; margin: 28px 0; clear: both; } .blog-post .post-body blockquote { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 16px 22px; margin: 0 0 20px; color: var(--muted); font-style: italic; } /* Textmarker */ .post-content mark, .blog-post .post-body mark { background: #ffe9a8; color: inherit; padding: 0 3px; border-radius: 3px; } /* Trennlinie */ .post-content hr, .blog-post .post-body hr { border: 0; height: 1px; background: var(--border-2); margin: 40px 0; } /* Tabellen */ .post-content table, .blog-post .post-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; line-height: 1.6; } .post-content th, .post-content td, .blog-post .post-body th, .blog-post .post-body td { border: 1px solid var(--border-2); padding: 10px 14px; text-align: left; vertical-align: top; } .post-content th, .blog-post .post-body th { background: var(--bg-soft); font-weight: 600; color: var(--text); } .post-content tbody tr:nth-child(even) td, .blog-post .post-body tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); } @media (max-width: 640px) { /* Breite Tabellen scrollen seitlich statt das Layout zu sprengen */ .post-content table, .blog-post .post-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Infoboxen (Callouts) */ .post-content .post-callout, .blog-post .post-body .post-callout { padding: 16px 20px; margin: 0 0 24px; border-left: 4px solid; border-radius: var(--radius); } .post-content .post-callout > :last-child, .blog-post .post-body .post-callout > :last-child { margin-bottom: 0; } .post-content .post-callout--info, .blog-post .post-body .post-callout--info { background: #eef4fa; border-color: #2a6fb0; } .post-content .post-callout--tip, .blog-post .post-body .post-callout--tip { background: #edf7f0; border-color: #1c8a4d; } .post-content .post-callout--warn, .blog-post .post-body .post-callout--warn { background: #fbf4e4; border-color: #b7791f; } /* Video-Einbettungen (YouTube/Vimeo, 16:9) */ .post-content .post-video, .blog-post .post-body .post-video { position: relative; aspect-ratio: 16 / 9; margin: 28px 0; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); } .post-content .post-video iframe, .blog-post .post-body .post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Checklisten (nur Anzeige, Haken kommen aus dem Editor) */ .post-content ul.post-checklist, .blog-post .post-body ul.post-checklist { list-style: none; margin: 0 0 24px; padding: 0; } .post-content ul.post-checklist > li, .blog-post .post-body ul.post-checklist > li { position: relative; padding-left: 32px; margin-bottom: 9px; } .post-content ul.post-checklist > li::before, .blog-post .post-body ul.post-checklist > li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 16px; height: 16px; border: 2px solid var(--border-2); border-radius: 4px; background: var(--bg); } .post-content ul.post-checklist > li[data-checked="true"]::before, .blog-post .post-body ul.post-checklist > li[data-checked="true"]::before { background: var(--accent); border-color: var(--accent); } .post-content ul.post-checklist > li[data-checked="true"]::after, .blog-post .post-body ul.post-checklist > li[data-checked="true"]::after { content: ""; position: absolute; left: 8px; top: 7px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ===== LIGHTBOX ===== */ .lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8,9,12,0.94); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } .lightbox-inner { max-width: 90vw; max-height: 90vh; text-align: center; } .lightbox-inner img { max-width: 100%; max-height: 80vh; border-radius: var(--radius-sm); box-shadow: 0 24px 64px rgba(0,0,0,0.5); } #lightbox-caption { color: rgba(255,255,255,0.7); margin-top: 14px; font-size: 14px; } .lightbox-close { position: fixed; top: calc(20px + var(--safe-top)); right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 20px; cursor: pointer; z-index: 10000; transition: background 0.2s; } .lightbox-close:hover { background: var(--accent); } .lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 30px; width: 52px; height: 64px; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s; } .lightbox-prev:hover, .lightbox-next:hover { background: var(--accent); } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } /* ===== HALLEN-GALERIE „Hier trainieren wir" ===== */ .training-halls { padding: 8px 0 88px; border-top: 1px solid var(--border); } .halls-heading { font-size: 1.75rem; font-weight: 600; text-align: center; margin-top: 40px; } .halls-list { display: flex; flex-direction: column; gap: 52px; margin-top: 48px; } .hall-name { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .hall-name::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .hall-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .hall-thumb { flex: 0 1 340px; max-width: 360px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: linear-gradient(155deg, #16181f, #1b0c11); aspect-ratio: 4 / 3; position: relative; transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s; } .hall-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .hall-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hall-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.2s; } .hall-thumb:hover::after { background: rgba(0,0,0,0.05); } @media (max-width: 600px) { .training-halls { padding-bottom: 60px; } .halls-heading { font-size: 1.5rem; } .halls-list { gap: 40px; margin-top: 38px; } .hall-thumbs { gap: 12px; } .hall-thumb { flex-basis: 100%; max-width: none; } } /* Galerie-Lightbox mit Vor/Zurück */ .gallery-lightbox .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 34px; line-height: 1; width: 52px; height: 64px; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s; z-index: 10000; } .gallery-lightbox .lb-nav:hover { background: var(--accent); } .gallery-lightbox .lb-prev { left: 16px; } .gallery-lightbox .lb-next { right: 16px; } .gallery-lightbox .lb-counter { position: fixed; bottom: calc(22px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 14px; background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 100px; } @media (max-width: 600px) { .gallery-lightbox .lb-nav { width: 44px; height: 56px; font-size: 28px; } .gallery-lightbox .lb-prev { left: 6px; } .gallery-lightbox .lb-next { right: 6px; } } /* ===== KONTAKT ===== */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 72px 0 96px; max-width: 760px; margin: 0 auto; } .contact-block { margin-bottom: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 26px 28px; } .contact-block h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; text-transform: none; letter-spacing: 0; } .contact-block p { color: var(--muted); font-size: 14.5px; line-height: 1.85; white-space: pre-line; } /* ===== COOKIE-HINWEIS ===== */ .cookie-fab { position: fixed; left: 16px; bottom: calc(18px + var(--safe-bottom)); z-index: 1190; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(12, 13, 17, 0.35); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .cookie-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 13, 17, 0.4); } .cookie-fab svg { width: 24px; height: 24px; } .cookie-fab[hidden], .cookie-modal[hidden] { display: none; } .cookie-modal { position: fixed; inset: 0; z-index: 1400; background: rgba(12, 13, 17, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .cookie-modal-card { background: #fff; border-radius: var(--radius-lg); max-width: 480px; width: 100%; padding: 26px 26px 24px; position: relative; box-shadow: var(--shadow-lg); } .cookie-modal-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 12px; padding-right: 30px; } .cookie-text { white-space: pre-line; font-size: 14.5px; color: var(--body); line-height: 1.7; margin-bottom: 20px; } .cookie-modal-close { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; font-size: 17px; color: var(--muted); padding: 8px; } .cookie-modal-close:hover { color: var(--text); } /* ===== TEXTSEITEN (Impressum etc.) ===== */ .text-page { padding: 64px 0 96px; max-width: 720px; } .prose { white-space: pre-line; color: var(--body); line-height: 1.85; font-size: 15.5px; /* Lange Wörter (z. B. "Verbraucherstreitbeilegung/Universalschlichtungsstelle") dürfen den Viewport auf Handys nicht aufsprengen */ overflow-wrap: break-word; hyphens: auto; } /* ===== ÜBER UNS ===== */ .about-blocks { padding: 48px 0 96px; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .about-block h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0 0 14px; color: var(--text); letter-spacing: 0; text-transform: none; } .about-block-body { color: var(--body); line-height: 1.85; font-size: 15.5px; overflow-wrap: break-word; } .about-block-body p { margin: 0 0 14px; } .about-block-body p:last-child { margin-bottom: 0; } .about-block-body ul { margin: 10px 0 14px; padding-left: 22px; } .about-block-body li { margin-bottom: 6px; } .about-block-body strong { font-weight: 600; } .about-empty { color: var(--muted); padding: 24px 0; } /* ===== VERGANGENE TERMINE (dezenter Rückblick) ===== */ .events-past { margin: 0 0 88px; } .events-past-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .events-past-heading { flex: 1 1 auto; min-width: 0; } .events-past-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: 0; letter-spacing: 0; text-transform: none; } .events-past-sub { color: var(--muted); font-size: 0.98rem; margin: 6px 0 0; } .events-list-past { margin: 0; } /* Rückblick zurückgenommen – aber gezielt auf Bild und Titel statt auf die ganze Zeile: sonst dimmt die Deckkraft auch den Details-Knopf mit, und ein Kind kann nie deckender sein als sein Elternelement. */ .event-item.event-past { filter: saturate(0.85); } .event-item.event-past .event-title, .event-item.event-past .event-preview-thumb { opacity: 0.7; } .event-item.event-past .event-day { color: var(--muted); } .event-item.event-past:hover { filter: none; } .event-item.event-past:hover .event-title, .event-item.event-past:hover .event-preview-thumb { opacity: 1; } /* Jahr-Filter im Rückblick – gleicher Stil wie bei „Aktuelles" */ .events-year-filter { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .events-year-filter label { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted-2); } .events-year-filter select { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text); padding: 8px 38px 8px 16px; border: 1px solid var(--border-2); border-radius: 0; background-color: var(--bg-card); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .events-year-filter select:hover { border-color: var(--text); } .events-year-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194,15,47,0.1); } /* ===== CAPTCHA (Probetraining) ===== */ /* Bild und Neu-laden-Knopf mittig über dem Eingabefeld – linksbündig wirkten sie im ansonsten voll ausgefüllten Formular wie ein loses Anhängsel. */ /* Einheitliche Feldhöhe UND -breite für Bild-Code und Rechenaufgabe (--captcha-h / --captcha-w), damit beide Felder gleich groß sind und der Knopf daneben immer dasselbe Quadrat sein kann. */ .captcha-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; --captcha-h: 60px; --captcha-w: 200px; } .captcha-img { width: var(--captcha-w); height: var(--captcha-h); line-height: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #f5f4f1; } .captcha-img svg { display: block; height: 100%; width: 100%; } .captcha-math { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: var(--captcha-w); height: var(--captcha-h); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: 0.06em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f5f4f1; user-select: none; } /* Stör-Overlay hinter der Aufgabe; Text bleibt oben und gut lesbar. */ .captcha-noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .captcha-noise svg { display: block; width: 100%; height: 100%; } .captcha-math-text { position: relative; z-index: 1; } /* Neu-laden-Knopf: echtes Quadrat in exakt der Feldhöhe. */ .captcha-reload { display: inline-flex; align-items: center; justify-content: center; height: var(--captcha-h); width: var(--captcha-h); flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--muted); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); } .captcha-reload:hover { color: var(--accent); border-color: var(--accent); } /* Umschalt-Link und Fehlermeldung folgen der Mitte, damit der Block als Einheit wirkt statt halb zentriert, halb linksbündig. */ .captcha-switch { display: block; width: 100%; text-align: center; margin-top: 6px; background: none; border: none; padding: 0; color: var(--accent); font-size: 12.5px; text-decoration: underline; cursor: pointer; font-family: inherit; } .captcha-error { display: block; text-align: center; color: var(--accent); font-size: 12.5px; margin-top: 6px; font-weight: 500; } /* ===== UNTERSTÜTZER ===== */ .supporters { padding: 24px 0 72px; } .supporters[hidden] { display: none; } .supporters-title { text-align: center; font-size: 1.6rem; font-weight: 600; color: var(--text); margin-bottom: 38px; text-transform: none; letter-spacing: 0; } .supporters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 32px 24px; align-items: center; justify-items: center; } .supporter { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; } .supporter img { max-height: 50px; max-width: 100%; width: auto; object-fit: contain; } a.supporter { transition: opacity 0.2s, transform 0.2s; } a.supporter:hover { opacity: 0.72; transform: translateY(-2px); } /* Mobil: Logos kleiner und alle in einer Reihe (statt Raster) */ @media (max-width: 560px) { .supporters-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; } .supporter { flex: 1 1 0; min-width: 0; height: 36px; } .supporter img { max-height: 36px; max-width: 100%; width: auto; height: auto; } } /* ===== FOOTER ===== */ .footer { position: relative; background: var(--ink); color: rgba(255,255,255,0.7); padding: 32px 0 28px; margin-top: auto; } .footer-bottom-links { display: flex; align-items: center; gap: 20px; } .footer-impressum { color: rgba(255,255,255,0.55); text-decoration: none; font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; transition: color 0.2s, opacity 0.18s var(--ease); display: inline-block; padding: 12px; margin: -12px; } .footer-impressum:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.4); } /* ===== VERANSTALTUNGSLISTE ===== */ /* Die Überschrift saß mit 12px direkt unter dem dunklen Seitenkopf, während darunter 56px Luft folgten – das wirkte oben gedrückt. Jetzt oben großzügig, darunter etwas enger, damit die Überschrift zur Liste gehört. */ .events-list-title { font-size: 1.6rem; font-weight: 600; margin: 40px 0 0; text-transform: none; letter-spacing: 0; } .events-list-title + #events-container .events-list { margin-top: 28px; padding-top: 0; } .event-item.clickable { cursor: pointer; } .event-item .card-link { display: block; margin-top: 10px; color: var(--accent); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; } .event-thumb { flex-shrink: 0; width: 136px; height: 98px; border-radius: var(--radius-sm); overflow: hidden; margin-left: auto; } .event-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Termin-Bildvorschau in der Liste (klein, klickbar) + A4-Erkennung */ .event-preview-thumb { flex-shrink: 0; height: var(--evt-thumb-h); width: 60px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; transition: border-color 0.2s var(--ease); } .event-preview-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .event-preview-thumb.is-portrait { width: 44px; } .event-preview-thumb:hover { border-color: var(--accent); } /* Termin-Detail: Hauptbild – Querformat als Hero, A4-Hochformat als kleine Vorschau */ .event-media { margin: 0 0 18px; display: flex; justify-content: center; align-items: flex-start; } /* Der Flyer wird immer vollständig gezeigt. Vorher füllte object-fit:cover ein Fenster fester Höhe und schnitt alles ab, was nicht ins Seitenverhältnis passte – bei quadratischen und querformatigen Flyern fehlten so die Ränder. */ .event-media .event-media-img { display: block; width: auto; max-width: 100%; max-height: 70vh; object-fit: contain; border: 2px solid var(--ink); border-radius: var(--radius); cursor: zoom-in; } .event-media.is-portrait .event-media-img { max-width: min(100%, 340px); max-height: 480px; border-radius: var(--radius-sm); box-shadow: var(--shadow); } /* Event-Detail-Modal */ .event-modal { position: fixed; inset: 0; background: rgba(8,9,12,0.66); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .event-modal.hidden { display: none; } .event-modal-box { background: var(--bg-card); border-radius: var(--radius); max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: no-preference) { .event-modal:not(.hidden) .event-modal-box { animation: modalIn 0.3s var(--ease) both; } } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } } .event-modal-close { position: absolute; top: 14px; right: 14px; z-index: 10; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(12,13,17,0.55); color: #fff; font-size: 16px; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.2s; } .event-modal-close:hover { background: var(--accent); } .event-modal-hero { width: 100%; height: 280px; overflow: hidden; } .event-modal-hero img { width: 100%; height: 100%; object-fit: cover; } .event-modal-thumbs { display: flex; gap: 8px; padding: 12px 26px 0; flex-wrap: wrap; } .event-modal-thumbs img { width: 66px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.55; border: 2px solid transparent; transition: all 0.18s var(--ease); } .event-modal-thumbs img:hover, .event-modal-thumbs img.active { opacity: 1; border-color: var(--accent); } .event-modal-content { padding: 28px; } .event-modal-content h2 { font-size: 1.7rem; font-weight: 600; margin: 12px 0 20px; } .event-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .event-meta-item { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 14px; } .event-meta-item .emi-icon { font-size: 18px; color: var(--accent); } .event-meta-item strong { display: block; font-size: 10.5px; font-family: var(--font-display); text-transform: none; letter-spacing: 0; color: var(--muted-2); margin-bottom: 3px; } .event-meta-item .emi-sub { color: var(--muted); font-size: 13px; } .event-meta-item > div { flex: 1; min-width: 0; } /* Gebühren: unsichtbare Tabelle — Bezeichnung links, Betrag rechtsbündig */ .fee-table { display: grid; grid-template-columns: 1fr auto; gap: 3px 18px; } .fee-table .fee-value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); } .fee-table .fee-full { grid-column: 1 / -1; } .event-modal-desc { font-size: 15px; color: var(--body); line-height: 1.75; margin-bottom: 20px; } #event-modal-map { height: 260px; border-radius: var(--radius-sm); margin-top: 4px; z-index: 0; } /* Termin-Detailseite */ .event-detail { max-width: 860px; padding-top: 40px; padding-bottom: 80px; } .event-detail .post-back { color: #333; background: #fff; border-color: #000; } .event-detail .post-back:hover { color: #333; border-color: var(--accent); } @media (max-width: 560px) { .post-back { font-size: 15px; padding: 10px 14px; width: auto; justify-content: flex-start; } /* Beitrag mit Titelbild: Banner als Hero – Button + Tag oben nebeneinander an der Kante, Titel/Meta unten an die untere Bannerkante. */ .post-header.has-cover { padding: 0; } .post-header.has-cover .container { display: flex; flex-direction: column; min-height: 60vh; padding-top: 16px; padding-bottom: 22px; } .post-header.has-cover .post-header-top { margin-bottom: 0; } .post-header.has-cover h1 { margin-top: auto; margin-bottom: 10px; } .post-header.has-cover .post-meta { margin-bottom: 0; } /* Termin-Detail: Zurück-Button und Art der Veranstaltung bleiben mobil nebeneinander – wie in der Desktop-Ansicht */ .event-detail .post-back { width: auto; } .event-detail .event-tag { margin-left: 16px; font-size: 17px; } } .event-detail .event-modal-hero { border-radius: var(--radius); margin-bottom: 18px; } .event-detail .event-modal-thumbs { padding: 0; margin-bottom: 18px; } .event-detail-title { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; margin: 14px 0 22px; } .event-detail .event-tag { display: inline-block; background: none; padding: 0; font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 600; color: var(--accent); margin-bottom: 12px; margin-left: 24px; } #event-detail-map { height: 340px; border-radius: var(--radius-sm); margin-top: 8px; z-index: 0; } .event-detail .training-map-btn { display: inline-flex; margin-top: 8px; } .event-schedule { margin: 4px 0 24px; } .event-schedule-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 12px; text-transform: none; } /* Gemeinsames Grid statt Flex pro Zeile: alle Slots teilen sich eine Zeit-Spalte, damit kurze Zeiten ("ab 13:15 Uhr") den Text nicht nach links rutschen lassen */ .event-schedule-list { display: grid; grid-template-columns: max-content 1fr; } .schedule-slot { display: contents; } .slot-time, .slot-text { padding: 10px 0; border-bottom: 1px solid var(--border); } .schedule-slot:last-child .slot-time, .schedule-slot:last-child .slot-text { border-bottom: none; } /* Spaltenabstand als Padding statt column-gap, sonst bekommt die Trennlinie eine Lücke */ .slot-time { padding-right: 16px; font-family: var(--font-display); font-weight: 500; color: var(--accent); white-space: nowrap; min-width: 120px; font-variant-numeric: tabular-nums; letter-spacing: 0; } .slot-text { color: var(--body); } .slot-text-full { grid-column: 1 / -1; } /* Slot ohne Zeit: Text über beide Spalten */ @media (max-width: 560px) { .event-schedule-list { grid-template-columns: 1fr; } .slot-time { min-width: 0; padding: 10px 0 0; border-bottom: none; } .slot-text { padding: 2px 0 10px; } .slot-text-full { padding-top: 10px; } } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); } .home-grid { grid-template-columns: repeat(2, 1fr); } .trainers-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } } /* Während des Fenster-Resizens Übergänge stoppen — sonst blitzt beim Überqueren des Nav-Breakpoints das rote Overlay kurz auf (Transition von der sichtbaren Desktop-Leiste zum versteckten Overlay) */ body.resize-animation-stopper * { transition: none !important; } /* Querformat auf Handys blockieren: Rotation lässt sich im Browser nicht sperren (screen.orientation.lock() braucht Vollbild/PWA), daher Overlay. pointer:coarse beschränkt auf Touch-Geräte — Desktop-Fenster mit geringer Höhe bleiben unberührt. */ @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { body::after { content: '📱 Bitte drehe dein Gerät ins Hochformat'; position: fixed; inset: 0; z-index: 9999; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: 0; text-transform: none; } } /* Navigation: Burger-Menü, solange die Link-Leiste nicht in eine Zeile passt. Gemessener Platzbedarf: Logo 104 + Menü 825 + Social 97 + Sprachwahl ~93 + 2×40 Innenabstand = ~1231px, dazu Luft zum Logo → ab 1280px reicht es. Die Sprachwahl ist bereits eingerechnet, obwohl sie noch fehlt: sonst müsste der Breakpoint beim Einbau erneut wandern und die Leiste liefe in der Zwischenzeit über. ACHTUNG: Der Wert steckt auch in main.js (NAV_BURGER_MQ) — beide Stellen müssen zusammenpassen, sonst schließt sich das Overlay beim Resizen selbst. Muster: runder, fixierter Button + rotes Vollbild-Overlay */ @media (max-width: 1279px) { /* Runder Button, bleibt beim Scrollen oben rechts sichtbar und liegt über dem Overlay (dient dort als Schließen-X) */ .hamburger { display: flex; position: fixed; top: calc(var(--safe-top) + (var(--nav-h) - 50px) / 2); right: 16px; z-index: 1201; width: 50px; height: 50px; align-items: center; justify-content: center; background: var(--logo-red); border-radius: 50%; padding: 0; box-shadow: 0 4px 14px rgba(229, 36, 40, 0.35); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .hamburger:hover { box-shadow: 0 4px 14px rgba(229, 36, 40, 0.35); } .hamburger span { background: #fff; } .hamburger.open { background: var(--ink); box-shadow: 0 4px 14px rgba(12, 13, 17, 0.4); } body.has-banner .hamburger { top: calc(var(--banner-h, 40px) + (var(--nav-h) - 50px) / 2); } /* Social-Symbole und Sprachwahl wandern ins Burger-Menü und sitzen dort unten mittig in einer gemeinsamen Leiste. Sie liegt fest am unteren Rand des Overlays (nicht in dessen Scrollfluss), deshalb hält .nav-links unten Platz für sie frei. Eingeblendet wird sie über den Nachbar-Selektor, sobald das Menü offen ist. */ .nav-utility { position: fixed; left: 0; right: 0; bottom: 0; justify-content: center; gap: 14px; padding: 22px 0 calc(26px + var(--safe-bottom)); /* weicher roter Auslauf: auf niedrigen Displays scrollen die Menü- punkte darunter durch und sollen nicht hart an den Symbolen kleben */ background: linear-gradient(to top, #e52428 62%, rgba(229, 36, 40, 0)); z-index: 1201; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } .nav-social::before, .nav-lang::before { margin-right: 0; height: 26px; background: rgba(255, 255, 255, 0.35); } .nav-links.open ~ .nav-utility { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0.34s; } /* Auf Touch ist ein Ausklappmenü unnötig umständlich: die Flaggen stehen direkt nebeneinander und sind einzeln antippbar. Beide Regeln nötig, damit die offene wie die geschlossene Variante gleich aussehen. */ .lang-toggle { display: none; } .nav-lang .lang-menu, .nav-lang.open .lang-menu { display: flex; gap: 8px; position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; } /* Innenabstand statt größerer Flagge: hält die Tippfläche bei 44px, ohne die Flagge unnötig groß zu machen */ .lang-option { padding: 9px; border-radius: 3px; opacity: 0.5; transition: opacity 0.2s var(--ease); } .lang-option span:not(.lang-flag) { display: none; } .lang-option .lang-flag { width: 40px; height: 27px; border-color: rgba(255, 255, 255, 0.5); transition: box-shadow 0.2s var(--ease); } .lang-option:hover, .lang-option[aria-current] { background: none; opacity: 1; } .lang-option[aria-current] .lang-flag { box-shadow: 0 0 0 2px #fff; } .lang-option:focus-visible { outline-color: #fff; outline-offset: -2px; } /* Im Burger-Menü auf Rot: gleiche Markenlogos, nur größer. Die Fläche bleibt bei 46px (Tippfläche), das Logo selbst sitzt kleiner darin. */ .social-link { width: 46px; height: 46px; } .social-link img { width: 37px; height: 37px; } .social-link:hover, .social-link:active { opacity: 0.85; transform: none; } .social-link:focus-visible { outline-color: #fff; } /* Auf Mobil wieder die schmalere Innenkante wie beim übrigen Inhalt */ .navbar { padding: 0 24px; } /* Logo mittig im weißen Balken: Desktop-Überhang (translateY + negativer Margin) auf Mobil aufheben */ .logo { transform: none; } .logo-mark { width: 64px; height: 64px; margin: 0; } /* Vollbild-Overlay in Vereinsrot, Inhalt zentriert */ .nav-links { position: fixed; inset: 0; z-index: 1200; background: var(--logo-red); flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(28px + var(--safe-top)) 24px calc(104px + var(--safe-bottom)); gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.03); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } body.has-banner .nav-links { top: 0; } .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* Scroll-Lock: --sbw (Scrollbar-Breite, via JS gesetzt) gleicht das Verschwinden der Scrollleiste aus, damit nichts zur Seite springt */ /* Body-Hintergrund rot, solange das Menü offen ist: füllt im Standalone-/ PWA-Modus den Safe-Area-Streifen unter der Dynamic Island (sonst weiß). */ body.menu-open { overflow: hidden; padding-right: var(--sbw, 0px); background: var(--logo-red); } body.menu-open .hamburger { right: calc(16px + var(--sbw, 0px)); } /* Sofort-rote Fläche UNTER dem Overlay, ohne Übergang: Safaris Glasleisten färben sich nach dem Seiteninhalt und liefen dem 0,3-s-Fade sichtbar hinterher. So sieht Safari schon im ersten Frame Vollbild-Rot und beginnt sofort mit der Färbung. Das gleichfarbige Overlay blendet darüber nur noch seinen Inhalt (Logo, Menüpunkte) ein — der Fade bleibt erhalten, ist auf dem roten Grund aber unsichtbar. Beim Schließen verschwindet die Fläche hinter dem noch deckend roten Overlay, das dann über der Seite ausblendet. WICHTIG: als #header::after, nicht am body — .nav-links und .hamburger leben IM #header (eigener Stacking-Context, z 1000); eine Fläche außerhalb würde trotz kleinerer z-Zahl das ganze Menü übermalen. Hier drin gilt: Fläche (1199) < Menü (1200) < Hamburger (1201). */ body.menu-open #header::after { content: ''; position: fixed; inset: 0; z-index: 1199; background: var(--logo-red); pointer-events: none; } /* Vereinslogo zentriert über den Links */ .nav-links::before { content: ''; width: 112px; height: 112px; flex-shrink: 0; margin-bottom: 8px; background: url('/images/bushido-logo.svg') center / contain no-repeat; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3)); } /* Menüpunkte teilen sich die Resthöhe gleichmäßig → volle Bildschirm- verteilung; min-height sichert Scrollbarkeit auf niedrigen Displays */ .nav-links li { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 52px; width: 100%; max-width: 420px; } .nav-links a { width: 100%; padding: 8px 18px; text-align: center; color: #fff; font-size: clamp(19px, 3.4vh, 27px); letter-spacing: 0.09em; border-radius: 0; } /* Unterstrich mittig unter dem aktiven/gedrückten Link */ .nav-links a::after { left: calc(50% - 17px); right: calc(50% - 17px); bottom: 7px; background: #fff; transform-origin: center; } .nav-links a:hover, .nav-links a.active { color: #fff; background: none; } .nav-links a:hover::after { transform: scaleX(1); } /* Links treten beim Öffnen gestaffelt ein */ .nav-links li { opacity: 0; transform: translateY(12px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .nav-links.open li { opacity: 1; transform: none; } .nav-links.open li:nth-child(1) { transition-delay: 0.06s; } .nav-links.open li:nth-child(2) { transition-delay: 0.1s; } .nav-links.open li:nth-child(3) { transition-delay: 0.14s; } .nav-links.open li:nth-child(4) { transition-delay: 0.18s; } .nav-links.open li:nth-child(5) { transition-delay: 0.22s; } .nav-links.open li:nth-child(6) { transition-delay: 0.26s; } .nav-links.open li:nth-child(7) { transition-delay: 0.3s; } } @media (max-width: 768px) { .logo { font-size: 13.5px; gap: 10px; line-height: 1.12; min-width: 0; } .logo-text { min-width: 0; } .logo-mark { width: 58px; height: 58px; margin: 0 2px 0 0; } /* Kompakter Hero: kein erzwungenes 100vh und kein flex:1 — der dunkle Bereich soll nur so hoch sein wie sein Inhalt */ .hero { flex-direction: column; padding: 40px 24px 44px; text-align: center; min-height: 0; } .hero-content { flex: 0 0 auto; } .hero-content h1 { font-size: 2.5rem; margin-bottom: 16px; } .hero-content p { margin-left: auto; margin-right: auto; margin-bottom: 28px; } .hero-badge { margin: 28px auto 0; width: 140px; height: 140px; } .kanji { font-size: 2.1rem; } .hero-buttons { justify-content: center; } .features-strip { padding: 8px 0; } .feature { width: 50%; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 14px 8px; border: none; font-size: 12.5px; } .home-sections { padding: 64px 0; } .home-grid { grid-template-columns: 1fr; } .offers-grid { grid-template-columns: 1fr; padding: 48px 0 64px; } .blog-grid { grid-template-columns: 1fr; } .post-header h1 { font-size: 1.9rem; } .trainers-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .form-layout { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 64px; } .form-row { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 64px; } .footer-bottom { flex-direction: column; gap: 14px; text-align: center; } .training-card { grid-template-columns: auto 1fr; } /* Auf dem Handy zählt Lesbarkeit mehr als Kompaktheit: Wochentag und Uhrzeiten etwas größer, Trainingsgruppe auf normale Textgröße. */ .day-label { font-size: 1.35rem; } .training-time { font-size: 1.1rem; } .training-group { font-size: 16px; } .day-location { width: 100%; justify-content: space-between; } /* Lange Einzelwörter (z. B. „Datenschutzerklärung") trennen statt abschneiden */ .page-header h1 { overflow-wrap: break-word; hyphens: auto; } .form-card { padding: 28px 22px; } .intro-box { padding: 18px 20px; margin: 18px 0 18px; } .intro-box p { font-size: 1rem; } } @media (max-width: 640px) { .event-meta-grid { grid-template-columns: 1fr; } .event-thumb { display: none; } /* Eine Zeile statt zwei: Flyer links, Datum über Titel in der Mitte, Knopf rechts. Das hält die Kachel niedrig – ihre Höhe ist nur noch die des Flyers, statt Textzeile plus Flyerzeile. Datum und Titel liegen als eigene Rasterzeilen übereinander; da Flyer und Knopf beide Zeilen überspannen, verteilt sich die Restfläche gleichmäßig auf sie. Mit align-self end/start rücken die zwei Texte an ihrer Kante zusammen und sitzen dadurch als Block mittig in der Höhe. Die Flyer-Spalte hat eine feste Breite und bleibt auch ohne Bild frei: so beginnt der Text bei allen Terminen an derselben Kante, und ein später ergänzter Flyer rückt die Zeile nicht mehr um. */ .event-item { --evt-thumb-h: 72px; /* mobil höhere Flyer-Kachel – der Knopf zieht mit */ --evt-thumb-w: 54px; display: grid; grid-template-columns: var(--evt-thumb-w) minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; align-items: center; } .event-meta { display: contents; } .event-preview-thumb { grid-column: 1; grid-row: 1 / span 2; align-self: center; } /* Knapper Innenabstand statt Mindestbreite: jeder Pixel geht an die Titelspalte, sonst brechen lange Komposita in sehr viele Zeilen um */ .event-details-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; min-width: 0; padding: 0 12px; } /* Datum sitzt jetzt über dem Titel – Trennstrich und Innenabstand entfallen */ .event-date { grid-column: 2; grid-row: 1; align-self: end; width: auto; padding-right: 0; border-right: none; } .event-day { font-size: 0.95rem; } /* Schmale Textspalte: lange Komposita müssen umbrechen dürfen */ .event-title { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.95rem; hyphens: auto; overflow-wrap: break-word; } /* Einheitliche Kachel unabhängig vom Flyer-Format. Vorher war sie bei A4-Hochformat 44px und bei quadratischen Flyern 60px breit – dadurch standen Bild und Details-Knopf von Zeile zu Zeile woanders. Das Bild wird in der Kachel weiterhin vollständig und unverzerrt gezeigt. */ .event-preview-thumb, .event-preview-thumb.is-portrait { width: var(--evt-thumb-w); height: var(--evt-thumb-h); } /* Route-Button in der Detail-Ansicht mittig in seiner Box; translateX gleicht die halbe Icon-Spalte (18px Icon + 12px Gap) aus */ .event-detail .event-meta-item .training-map-btn { display: flex; width: fit-content; margin: 10px auto 0; transform: translateX(-15px); } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .hero-content h1 { font-size: 2.1rem; } .hero-eyebrow { font-size: 11px; letter-spacing: 0; } .hero-buttons { flex-direction: column; align-items: center; } .btn { width: 100%; text-align: center; } .hero-buttons .btn { width: 75%; } } /* ===== PROBETRAINING: FÜR WEN? (selbst oder Kind/Kinder) ===== */ .trial-mode-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; } .trial-mode-option { position: relative; } .trial-mode-option input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .trial-mode-option label { /* Beide Karten gleich hoch – „Für mich selbst" hat keinen Untertitel */ display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: all 0.2s var(--ease); margin: 0; } /* Karte ohne Untertitel: Text mittig in der Fläche */ .trial-mode-option label.trial-mode-centered { align-items: center; text-align: center; } .trial-mode-option label strong { display: block; font-weight: 600; } .trial-mode-option label span { display: block; margin-top: 3px; font-size: 0.85rem; font-weight: 400; color: var(--muted); } .trial-mode-option input[type="radio"]:checked + label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .trial-mode-option input[type="radio"]:checked + label span { color: inherit; opacity: 0.85; } /* ===== PROBETRAINING: KIND-KARTEN ===== */ .trial-section-label { margin: 26px 0 12px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .trial-child-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; background: var(--bg-soft); } .trial-child-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .trial-child-title { font-weight: 600; font-size: 0.95rem; } .trial-child-remove, .trial-add-child { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s var(--ease); } .trial-child-remove { color: var(--accent); } .trial-child-remove:hover, .trial-add-child:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .trial-add-child { margin-bottom: 18px; } /* ===== PROBETRAINING: ZEITAUSWAHL ===== */ .trial-times-group { margin-bottom: 18px; } .trial-times-placeholder { display: flex; align-items: center; justify-content: center; padding: 18px; border: 2px dashed var(--border-2); border-radius: var(--radius); color: var(--muted); font-size: 15px; background: var(--bg-soft); } /* ===== PROBETRAINING: TRAININGSGRUPPEN ===== */ .trial-groups-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; } .trial-group-option { position: relative; } .trial-group-option input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .trial-group-option label { display: block; padding: 14px 12px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: all 0.2s var(--ease); font-weight: 500; margin: 0; text-align: center; } .trial-group-option input[type="radio"]:checked + label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* ===== PROBETRAINING: TRAININGSZEITEN ===== */ .trial-times-selector { display: grid; /* Zwei Spalten nur, wenn jede breit genug ist, um die längste Beschriftung („Donnerstag 18:20–19:20 Uhr") in einer Zeile zu tragen; sonst bricht der längere Wochentag um. Reicht die Breite nicht, wird einspaltig gestapelt – dann steht ohnehin jede Zeit auf einer Zeile. */ grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 12px; margin-top: 8px; } .trial-time-option { position: relative; } .trial-time-option input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .trial-time-option label { display: block; padding: 12px 10px; border: 2px solid var(--border-2); border-radius: var(--radius); background: var(--bg-soft); cursor: pointer; transition: all 0.2s var(--ease); font-weight: 400; margin: 0; text-align: center; /* Etwas kompakter, damit auch der lange „Donnerstag" zweispaltig auf eine Zeile passt; nowrap verhindert den Umbruch endgültig. */ font-size: 0.9rem; white-space: nowrap; } .trial-time-option input[type="radio"]:checked + label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 500; }