/** * Tauschring Unna — Design System v2 * Light & Dark Mode via [data-theme="dark"] on */ /* Google-Fonts-Import entfernt (war render-blockierend, bremste jede Seite). Schrift = System-Font (SF Pro / Segoe), siehe --font. */ /* ===================================================== CSS Custom Properties — Light Mode ===================================================== */ :root { /* Brand — Mint/Teal (Standardfarbe) */ --color-primary: #0D9488; --color-primary-dark: #0F766E; /* Links tragen eine eigene Farbe: hell braucht dunkleres Teal fuer Kontrast 5.47, dunkel braucht helleres fuer 6.84. */ --link-color: #0F766E; --link-strich: rgba(15,118,110,0.45); --color-primary-light: #14B8A6; --color-secondary: #0891B2; --color-accent: #06B6D4; /* Semantic */ --color-success: #34C759; --color-warning: #FF9F0A; --color-danger: #FF3B30; --color-info: #007AFF; /* Backgrounds — Light */ --bg-primary: #FFFFFF; --bg-secondary: #E5E5EA; --bg-tertiary: #FFFFFF; --bg-card: #FFFFFF; --bg-overlay: rgba(255, 255, 255, 0.78); /* Text — Light */ --text-primary: #111827; --text-secondary: #374151; --text-tertiary: #6B7280; --text-quaternary: #9CA3AF; /* Borders */ --separator: rgba(0, 0, 0, 0.06); --separator-opaque: #D2D2D7; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 8px 30px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05); --shadow-xl: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06); /* Border Radius */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 9999px; /* Typography */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --text-xs: 0.6875rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.375rem; --text-2xl: 1.625rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem; /* ─── Q98 Design-Tokens: Schrift-Gewichte (Max-Stil) ─────────── Zentralisiert. Jede neue Komponente sollte NUR diese Tokens nutzen, niemals font-weight:700/800 direkt setzen. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Standard für alle Headings */ --fw-bold: 700; /* nur KPI-Zahlen, Beträge, Markenname */ --fw-heavy: 800; /* niemals — nur historische Ausnahme */ /* ─── Status-Farb-Paare (Background + Text) ────────────────────── Für Banner, Alerts, Badges. Immer als Paar nutzen damit Kontrast OK. */ --status-info-bg: rgba(13,148,136,0.06); --status-info-text: var(--color-primary); --status-warn-bg: rgba(255,159,10,0.08); --status-warn-text: #b45309; --status-error-bg: rgba(255,59,48,0.07); --status-error-text: #b91c1c; --status-ok-bg: rgba(52,199,89,0.08); --status-ok-text: #15803d; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* Compatibility aliases */ --font-family-base: var(--font); --font-size-xs: var(--text-xs); --font-size-sm: var(--text-sm); --font-size-base: var(--text-base); --font-size-lg: var(--text-lg); --font-size-xl: var(--text-xl); --font-size-2xl: var(--text-2xl); --font-size-3xl: var(--text-3xl); --font-size-4xl: var(--text-4xl); --font-size-5xl: var(--text-5xl); --spacing-xs: var(--sp-1); --spacing-sm: var(--sp-2); --spacing-md: var(--sp-4); --spacing-lg: var(--sp-6); --spacing-xl: var(--sp-8); --spacing-2xl: var(--sp-12); --spacing-3xl: var(--sp-16); --transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-slow: 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-tooltip: 400; /* Legacy color-gray aliases (for backwards compat) */ --color-gray-100: #F5F5F7; --color-gray-200: #E5E5EA; --color-gray-300: #D1D1D6; --color-gray-400: #AEAEB2; --color-gray-500: #8E8E93; --color-gray-600: #636366; --color-gray-700: #48484A; --color-gray-800: #3A3A3C; --color-gray-900: #1C1C1E; /* Max Liquid Glass */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.55); --glass-shadow: 0 8px 32px rgba(13,148,136,0.10), 0 2px 8px rgba(0,0,0,0.06); --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.70); --glass-blur: saturate(200%) blur(20px); } /* ===================================================== Dark Mode Overrides ===================================================== */ [data-theme="dark"] { /* Dark Mint (Standardfarbe dark) */ --color-primary: #14B8A6; --color-primary-dark: #0D9488; --link-color: #14B8A6; --link-strich: rgba(20,184,166,0.5); --color-primary-light: #2DD4BF; --color-secondary: #0EA5E9; --color-accent: #38BDF8; --bg-primary: #111318; --bg-secondary: #191C22; --bg-tertiary: #22252D; --bg-card: #1E2128; --bg-overlay: rgba(14, 14, 16, 0.84); --text-primary: #F5F5F7; --text-secondary: #EBEBF5; --text-tertiary: rgba(235, 235, 245, 0.55); --text-quaternary: rgba(235, 235, 245, 0.28); --separator: rgba(255, 255, 255, 0.07); --separator-opaque: #3A3A3C; --shadow-sm: 0 1px 4px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 30px rgba(0,0,0,0.6); --shadow-xl: 0 20px 60px rgba(0,0,0,0.7); /* Dark Liquid Glass */ --glass-bg: rgba(28, 28, 30, 0.80); --glass-border: rgba(255,255,255,0.10); --glass-shadow: 0 8px 32px rgba(0,0,0,0.40); --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.10); } /* ===================================================== Color Theme: Blau — Pastellblau (sanft, nicht aggressiv) ===================================================== */ [data-color="indigo"] { --color-primary: #5B8DEF; --color-primary-dark: #3A6FD8; --color-primary-light: #7AAAF5; --color-secondary: #3E9ECC; --color-accent: #56C1E8; --bg-primary: #FFFFFF; --bg-secondary: #F4F8FF; --text-tertiary: #6E6E73; --text-quaternary: #A1A1A6; --separator: rgba(91,141,239,0.10); --separator-opaque: #D4E4FB; --shadow-sm: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(91,141,239,0.07); --shadow-md: 0 4px 16px rgba(91,141,239,0.12), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 8px 30px rgba(91,141,239,0.15), 0 4px 12px rgba(0,0,0,0.04); --shadow-xl: 0 20px 60px rgba(91,141,239,0.18), 0 8px 24px rgba(0,0,0,0.05); --glass-bg: rgba(255,255,255,0.76); --glass-border: rgba(255,255,255,0.60); --glass-shadow: 0 8px 32px rgba(91,141,239,0.12), 0 2px 8px rgba(0,0,0,0.05); } [data-color="indigo"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(13,148,136,0.06) 0%, transparent 55%), radial-gradient(ellipse at 80% 10%, rgba(91,141,239,0.06) 0%, transparent 45%); background-attachment: fixed; } [data-color="indigo"][data-theme="dark"] { --color-primary: #7AAAF5; --color-primary-dark: #5B8DEF; --color-primary-light: #9EC1FA; --color-secondary: #56C1E8; --color-accent: #7DD8F5; --bg-primary: #0E1420; --bg-secondary: #141B2A; --bg-tertiary: #1C2538; --bg-card: #182033; --bg-overlay: rgba(14,20,32,0.90); --text-tertiary: rgba(235,235,245,0.55); --text-quaternary: rgba(235,235,245,0.28); --separator: rgba(122,170,245,0.12); --separator-opaque: #1E3050; } [data-color="indigo"][data-theme="dark"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(13,148,136,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 10%, rgba(91,141,239,0.10) 0%, transparent 45%); } /* ===================================================== Color Theme: Mint / Teal-Grün (Standardfarbe = :root) ===================================================== */ [data-color="mint"] { /* Identisch mit :root — explizit gesetzt für Klarheit */ --color-primary: #0D9488; --color-primary-dark: #0F766E; --color-primary-light: #14B8A6; --color-secondary: #0891B2; --color-accent: #06B6D4; } [data-color="mint"] body, body { background: transparent; } /* Einheitlicher Marken-Hintergrund fuer die ganze Website: heller Verlauf + dezentes Logo-Muster. Zwei fixe Ebenen hinter dem Inhalt (z-index:-1), damit html seinen Teal-Ton fuer den iOS-Overscroll behaelt und body transparent bleiben kann. Opake Karten, weisse und dunkle Sektionen decken ihren Teil selbst ab; transparente Sektionen lassen den Verlauf durchscheinen. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 20% 0%, rgba(13,148,136,0.10) 0%, transparent 55%), radial-gradient(ellipse at 80% 8%, rgba(8,145,178,0.08) 0%, transparent 50%), linear-gradient(135deg, #f8fafc 0%, #ecfdf5 50%, #f0fdfa 100%); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url('../images/logo.png'); background-repeat: repeat; background-size: 130px auto; opacity: 0.05; } /* Dark-Mode-Fallback (Standard ist hell): dunkler Verlauf statt hellem */ [data-theme="dark"] body::before { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); } [data-theme="dark"] body::after { opacity: 0.04; } [data-color="mint"][data-theme="dark"] { --color-primary: #14B8A6; --color-primary-dark: #0D9488; --color-primary-light: #2DD4BF; --color-secondary: #0EA5E9; --color-accent: #38BDF8; --bg-primary: #0D1618; --bg-secondary: #16222A; --bg-tertiary: #1F2D34; --bg-card: #1C2A32; --bg-overlay: rgba(13,22,24,0.88); --text-tertiary: rgba(235,235,245,0.55); --text-quaternary: rgba(235,235,245,0.28); --separator: rgba(255,255,255,0.07); --separator-opaque: #3A3A3C; } [data-color="mint"][data-theme="dark"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(13,148,136,0.14) 0%, transparent 50%), radial-gradient(ellipse at 80% 10%, rgba(8,145,178,0.09) 0%, transparent 45%); } /* ===================================================== Color Theme: Green / Natur ===================================================== */ [data-color="green"] { --color-primary: #16A34A; --color-primary-dark: #15803D; --color-primary-light: #22C55E; --color-secondary: #059669; --color-accent: #10B981; } [data-color="green"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(22,163,74,0.08) 0%, transparent 55%), radial-gradient(ellipse at 80% 10%, rgba(5,150,105,0.05) 0%, transparent 45%); background-attachment: fixed; } [data-color="green"][data-theme="dark"] { --color-primary: #22C55E; --color-primary-dark: #16A34A; --color-primary-light: #4ADE80; --color-secondary: #10B981; --color-accent: #34D399; --bg-primary: #0D1610; --bg-secondary: #142018; --bg-tertiary: #1A2C20; --bg-card: #182820; --bg-overlay: rgba(13,22,16,0.88); --text-tertiary: rgba(235,235,245,0.55); --text-quaternary: rgba(235,235,245,0.28); --separator: rgba(255,255,255,0.07); --separator-opaque: #3A3A3C; } [data-color="green"][data-theme="dark"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(22,163,74,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 10%, rgba(5,150,105,0.08) 0%, transparent 45%); } .color-swatch[data-color="green"] { background: #16A34A; } .color-swatch[data-color="green"].is-active { box-shadow: 0 0 0 2px var(--bg-card,#fff), 0 0 0 4px #16A34A; transform: scale(1.1); } /* ===================================================== Color Theme: Orange / Warm ===================================================== */ [data-color="orange"] { --color-primary: #F4905A; --color-primary-dark: #E07040; --color-primary-light: #F9AE85; --color-secondary: #F0B860; --color-accent: #FAD080; --bg-primary: #FFFCF8; --bg-secondary: #FFF6EE; --text-tertiary: rgba(160,90,30,0.55); --text-quaternary: rgba(160,90,30,0.32); --separator: rgba(244,144,90,0.12); --separator-opaque: #F8DCC8; --shadow-sm: 0 1px 4px rgba(244,144,90,0.08), 0 2px 8px rgba(244,144,90,0.06); --shadow-md: 0 4px 16px rgba(244,144,90,0.13), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 8px 30px rgba(244,144,90,0.16), 0 4px 12px rgba(0,0,0,0.05); --shadow-xl: 0 20px 60px rgba(244,144,90,0.18), 0 8px 24px rgba(0,0,0,0.05); --glass-bg: rgba(255,252,248,0.78); --glass-border: rgba(244,144,90,0.22); --glass-shadow: 0 8px 32px rgba(244,144,90,0.12), 0 2px 8px rgba(0,0,0,0.04); } [data-color="orange"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(234,88,12,0.08) 0%, transparent 55%), radial-gradient(ellipse at 80% 10%, rgba(217,119,6,0.06) 0%, transparent 45%); background-attachment: fixed; } [data-color="orange"][data-theme="dark"] { --color-primary: #F97316; --color-primary-dark: #EA580C; --color-primary-light: #FB923C; --color-secondary: #F59E0B; --color-accent: #FCD34D; /* restore dark backgrounds overridden by [data-color="orange"] */ --bg-primary: #181412; --bg-secondary: #201C18; --bg-tertiary: #2A2420; --bg-card: #262018; --bg-overlay: rgba(24,20,18,0.88); --text-tertiary: rgba(235,235,245,0.55); --text-quaternary: rgba(235,235,245,0.28); --separator: rgba(255,255,255,0.07); --separator-opaque: #3A3A3C; } [data-color="orange"][data-theme="dark"] body { background-image: radial-gradient(ellipse at 20% 0%, rgba(234,88,12,0.13) 0%, transparent 50%), radial-gradient(ellipse at 80% 10%, rgba(217,119,6,0.09) 0%, transparent 45%); } /* ── Color-Swatch Buttons ── */ .color-swatch { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; outline: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; transition: outline-color 0.15s, transform 0.15s; } .color-swatch:hover { transform: scale(1.2); } .color-swatch[data-color="indigo"] { background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%); } .color-swatch[data-color="mint"] { background: linear-gradient(135deg, #0D9488 0%, #0891B2 100%); } .color-swatch[data-color="orange"] { background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); } .color-swatch[data-color="indigo"].is-active { box-shadow: 0 0 0 2px var(--bg-card,#fff), 0 0 0 4px #3B82F6; transform: scale(1.1); } .color-swatch[data-color="mint"].is-active { box-shadow: 0 0 0 2px var(--bg-card,#fff), 0 0 0 4px #0D9488; transform: scale(1.1); } .color-swatch[data-color="orange"].is-active { box-shadow: 0 0 0 2px var(--bg-card,#fff), 0 0 0 4px #F97316; transform: scale(1.1); } /* ── Theme-Menü Dropdown ── */ .theme-menu { position: relative; } .theme-menu-btn { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.625rem; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); cursor: pointer; color: #fff; transition: all var(--transition); font-family: var(--font); font-size: 0.75rem; font-weight: 600; } .theme-menu-btn:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); color: #fff; } .theme-menu-dropdown { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.75rem 0.875rem; min-width: 170px; z-index: 300; display: none; } .theme-menu-dropdown.is-open { display: block; } .theme-menu-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-quaternary); margin-bottom: 0.5rem; } .theme-menu-colors { display: flex; gap: 0.625rem; align-items: center; margin-bottom: 0.625rem; } .theme-menu-color-row { display: flex; align-items: center; gap: 0.5rem; } .theme-menu-color-name { font-size: 0.78rem; color: var(--text-secondary); } .theme-menu-divider { border: none; border-top: 1px solid var(--separator); margin: 0.5rem 0; } .theme-dark-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; border-radius: var(--radius-md); border: none; background: none; cursor: pointer; font-size: 0.8rem; font-weight: 500; color: var(--text-primary); font-family: var(--font); transition: background var(--transition); } .theme-dark-btn:hover { background: var(--bg-secondary); } /* ===================================================== Reset & Base ===================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ── Mobile-Defensive: verhindert dass einzelne Elemente über die Viewport-Breite hinausragen und so den "rechts abgeschnitten / kein Scroll"-Bug auf Smartphones erzeugen. Lange Wörter / URLs werden umgebrochen, Medien bekommen max-width. */ html, body { max-width: 100%; overflow-x: hidden; } /* S44 (Maximilian "Seite springt wild von links nach rechts" beim Wechsel zwischen Angebote/Gesuche): Wenn eine Seite Scrollbar braucht und die naechste nicht (oder umgekehrt), shiftet der Content horizontal um die Scrollbar-Breite. `scrollbar-gutter: stable` reserviert den Platz dauerhaft — keine Sprünge mehr. Fallback: where nicht unterstützt (Safari < 16, alte Browser), passiert nichts. */ html { scrollbar-gutter: stable; } img, video, iframe, embed, object, svg { max-width: 100%; height: auto; } table { max-width: 100%; } pre, code { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; } .container, .container-wide, main, section, article { min-width: 0; } /* Auf sehr schmalen Smartphones (<=420px) zusätzlich harte Limits — gegen einzelne Komponenten mit fest gesetzter min-width im inline-style (Hero-Mockup, Tabellen). */ @media (max-width: 420px) { body * { max-width: 100% !important; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hero .btn, .lp-btn-primary, .lp-btn-secondary { min-width: 0 !important; width: 100%; } /* Phone-Mockup-Grafiken auf Startseite zentrieren statt schneiden */ [style*="width:170px"], [style*="width:130px"] { max-width: 90vw !important; } } html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; transition: color var(--transition), background-color var(--transition); /* S38: Verhindert dass beim iOS-Overscroll oben helle Bereiche unter dem teal-Header durchscheinen — der Header hat einen teal-Verlauf, html-Hintergrund matcht den Start-Ton */ background-color: #0F766E; overscroll-behavior-y: none; } body { margin: 0; overflow-x: hidden; font-family: var(--font); font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); background: var(--bg-secondary); background-image: radial-gradient(ellipse at 15% 0%, rgba(13,148,136,0.06) 0%, transparent 50%), radial-gradient(ellipse at 85% 15%, rgba(8,145,178,0.04) 0%, transparent 45%); background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color var(--transition), background-color var(--transition); } [data-theme="dark"] body { background-image: radial-gradient(ellipse at 15% 0%, rgba(13,148,136,0.08) 0%, transparent 50%), radial-gradient(ellipse at 85% 15%, rgba(8,145,178,0.05) 0%, transparent 45%); } /* Max Liquid Glass card variant */ .card-glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inner-glow); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); font-family: var(--font); font-weight: 600; line-height: 1.2; color: var(--text-primary); letter-spacing: -0.02em; } h1 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); } h2 { font-size: var(--text-xl); font-weight: var(--fw-semibold); } h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); } h4 { font-size: var(--text-base); font-weight: var(--fw-semibold); } h5 { font-size: var(--text-base); font-weight: var(--fw-semibold); } h6 { font-size: var(--text-sm); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--sp-4); color: var(--text-secondary); } a { color: var(--link-color); /* Kontrast: 5.47 statt 3.74 auf Weiss */ text-decoration: none; transition: color var(--transition), opacity var(--transition); } a:hover { color: var(--color-primary-dark); opacity: 0.88; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* ===================================================== App Layout ===================================================== */ .app { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); } .container-narrow { max-width: 720px; } .container-wide { max-width: 1400px; } /* ===================================================== Public Header — Farbe reagiert auf data-color ===================================================== */ .header { /* S38: Solid background-color als Fallback unter dem Gradient — verhindert, dass Content unter dem Header durchscheint, falls Browser den Gradient für einen Moment nicht rendert (Safari beim Scroll-Hop) */ background-color: #0F766E; background-image: linear-gradient(135deg, #0F766E 0%, #0D9488 60%, #0891B2 100%); border-bottom: 1px solid rgba(255,255,255,0.10); position: sticky; top: 0; z-index: 1000; /* S38: Sicherheits-Hochstufung damit Content garantiert NICHT durchscheint */ transition: background 0.3s ease; isolation: isolate; } /* Mint/Teal (Standard) */ [data-color="mint"] .header, :root .header { background: linear-gradient(135deg, #0F766E 0%, #0D9488 60%, #0891B2 100%); } /* Blau / Indigo Pastell */ [data-color="indigo"] .header { background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 55%, #60A5FA 100%); } /* Orange Pastell */ [data-color="orange"] .header { background: linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FB923C 100%); } /* R10: Header-Höhe muss zur Logo-Höhe (Q98: 78px) passen, sonst überlappt das Logo nach oben/unten in den Bereich davor/dahinter. */ .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 90px; padding: 0.5rem 0; } /* Logo */ .logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--text-base); color: #fff; letter-spacing: -0.02em; transition: opacity var(--transition); } .logo:hover { opacity: 0.80; color: #fff; text-decoration: none; } .logo > span { white-space: nowrap; } .logo-img { height: 52px; width: auto; object-fit: contain; mix-blend-mode: screen; } .logo-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-sm); font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4); } /* Mobile hamburger — S38: Immer ganz rechts (margin-left:auto schiebt ihn ans Ende) */ .menu-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); cursor: pointer; color: rgba(255,255,255,0.9); transition: all var(--transition); padding: 0; margin-left: auto; /* S38: Immer ganz rechts neben Logo */ flex-shrink: 0; /* darf nie zusammengedrueckt werden (war nach der Kopf-Lupe 2px schmal) */ } /* Schmale Bildschirme: Hell/Dunkel nur als Symbol, sonst ueberlaeuft die Kopfzeile */ @media (max-width: 600px) { .header #themeToggleLabel { display: none; } .header .user-menu { margin-left: var(--sp-2); } } /* Desktop: der Suche-Textpunkt entfaellt, die Lupe oben rechts uebernimmt */ @media (min-width: 1024px) { .nav-item-suche { display: none; } } .menu-toggle:hover { background: rgba(13,148,136,0.25); border-color: var(--color-primary); color: #fff; } /* Kopfzeile in der schmalen Ansicht: Burger, Lupe und Hell/Dunkel bekommen Luft, damit sie nicht aneinanderkleben (Maximilian 25.07.2026). */ @media (max-width: 1023px) { .header .menu-toggle { margin-right: 0.55rem; } .header .user-menu { gap: 0.6rem; } .header .user-menu .theme-menu-btn { padding: 0.4rem 0.55rem; } } /* Nav — mobile first: clean white/dark slide-down panel */ .nav { display: none; position: fixed; inset: 56px 0 0 0; padding: 0; overflow-y: auto; border-top: 1px solid var(--separator); z-index: calc(var(--z-sticky) - 1); /* Deckender Marken-Verlauf wie auf den Login-Seiten, KEIN backdrop-filter (Safari scroll-hop liess Inhalt durchblitzen) und kein flaches Weiss. */ background: radial-gradient(ellipse at 20% 60%, rgba(13,148,136,0.10) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(8,145,178,0.08) 0%, transparent 55%), linear-gradient(135deg, #f8fafc 0%, #ecfdf5 50%, #f0fdfa 100%); background-color: var(--bg-primary); } [data-theme="dark"] .nav { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); } .nav.is-open { display: block; } .nav-list { list-style: none; margin: 0; padding: 0; } .nav-item { border-bottom: 1px solid var(--separator); } .nav-link { display: flex; align-items: center; padding: 1rem 1.25rem; color: var(--text-primary); font-weight: 500; font-size: 1rem; border-radius: 0; transition: all var(--transition); -webkit-tap-highlight-color: transparent; } .nav-link:hover { color: var(--color-primary); background: rgba(13,148,136,0.07); text-decoration: none; opacity: 1; } .nav-link.is-active { color: var(--color-primary); font-weight: 600; background: rgba(13,148,136,0.09); } /* User menu — immer sichtbar (Theme-Toggle + kompakte Buttons) R10: margin-left damit User-Menü nicht direkt an Nav-Links klebt S66: flex-shrink:0 damit User-Menü NIE komprimiert/überlappt wird — die Nav-Items haben flex-wrap:nowrap und konnten ohne diesen Schutz aus der Nav-Box rausragen und über "Design"-Pille drüberlaufen. */ .user-menu { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-6); flex-shrink: 0; position: relative; z-index: 2; } /* R10: Login/Mein-Bereich-Button im Public-Header — weiße Pille auf teal-Header (analog Q97 Nav-Active und R8 Taler-Pille). Sonst teal-auf-teal unsichtbar. */ .header .user-menu .btn-primary { background: #fff !important; color: var(--color-primary) !important; border-color: #fff !important; font-weight: var(--fw-semibold) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .header .user-menu .btn-primary:hover { background: rgba(255,255,255,0.92) !important; color: var(--color-primary) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* Auth-Links im mobilen Slide-Down Menü */ .nav-auth { display: flex; flex-direction: column; gap: var(--sp-3); padding: 1.25rem; margin-top: 0; border-top: 1px solid var(--separator); } .nav-auth .btn { width: 100%; justify-content: center; text-align: center; font-size: 1rem; padding: 0.875rem; } /* Verstecke die ausführlichen Desktop-Buttons auf Mobile */ .user-menu .btn { display: none; } /* Verstecke nav-auth auf Desktop */ .nav-auth { display: flex; } /* ===================================================== Theme Toggle ===================================================== */ .theme-toggle { width: 34px; height: 34px; border-radius: var(--radius-full); border: 1.5px solid var(--separator-opaque); background: var(--bg-tertiary); cursor: pointer; color: var(--text-secondary); transition: all var(--transition); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .theme-toggle:hover { background: rgba(13, 148, 136, 0.12); border-color: var(--color-primary); color: var(--color-primary); transform: rotate(18deg); } .theme-toggle svg { width: 16px; height: 16px; } /* ===================================================== Main Content ===================================================== */ .main { flex: 1; padding: var(--sp-4) 0; } .page-header { margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--separator); } .page-title { margin-bottom: var(--sp-1); color: var(--text-primary); letter-spacing: -0.03em; font-size: var(--text-2xl); } .page-subtitle { color: var(--text-tertiary); font-size: var(--text-sm); margin: 0; } .section-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); letter-spacing: -0.02em; } .page-content { line-height: 1.75; color: var(--text-secondary); } .page-content h2 { margin-top: var(--sp-8); color: var(--text-primary); font-size: var(--text-2xl); } .page-content h3 { margin-top: var(--sp-6); color: var(--text-primary); font-size: var(--text-xl); } .page-content ul, .page-content ol { padding-left: 1.5em; margin-bottom: var(--sp-4); color: var(--text-secondary); } /* ===================================================== Cards ===================================================== */ .card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--separator); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.60); overflow: hidden; margin-bottom: var(--sp-6); transition: box-shadow var(--transition), transform var(--transition), background var(--transition), border-color var(--transition); } @media (hover: hover) { .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } } [data-theme="dark"] .card { border-color: rgba(255,255,255,0.07); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05); } .card-header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--separator); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-title { font-size: var(--text-sm); font-weight: 600; margin: 0; color: #fff; letter-spacing: 0.01em; text-transform: uppercase; font-size: 0.7rem; } .card-header .card-link, .card-header a { color: rgba(255,255,255,0.85) !important; } .card-header .badge { background: rgba(255,255,255,0.22) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; } .card-header .btn-outline { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: #fff; } .card-header .btn-outline:hover { background: rgba(255,255,255,0.28); } .card-header select, .card-header .ev-select { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; } .card-header .ev-select option { background: var(--bg-card); color: var(--text-primary); } .card-body { padding: var(--sp-4); } .card-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--separator); background: var(--bg-secondary); } /* ===================================================== Grid ===================================================== */ .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } /* ===================================================== Forms ===================================================== */ .form-group { margin-bottom: var(--sp-5); } .form-label { display: block; margin-bottom: var(--sp-2); font-weight: 500; font-size: var(--text-sm); color: var(--text-secondary); letter-spacing: 0.005em; } .form-label-required::after { content: ' *'; color: var(--color-danger); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.65rem 0.9rem; font-size: var(--text-base); font-family: var(--font); line-height: 1.5; color: var(--text-primary); background: var(--bg-secondary); border: 1.5px solid var(--separator-opaque); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); appearance: none; -webkit-appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); background: var(--bg-primary); box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-quaternary); } .form-textarea { min-height: 120px; resize: vertical; } .form-hint { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--text-tertiary); } .form-error { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--color-danger); } .form-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } .form-check { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); } .form-check-input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .form-check-label { font-size: var(--text-base); color: var(--text-secondary); cursor: pointer; } /* ===================================================== Buttons ===================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.6rem 1.2rem; font-size: var(--text-sm); font-weight: 600; font-family: var(--font); line-height: 1.4; white-space: nowrap; cursor: pointer; user-select: none; border: 1.5px solid transparent; border-radius: var(--radius-full); transition: all var(--transition); text-decoration: none; letter-spacing: 0.01em; } .btn:hover { text-decoration: none; } .btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2); } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 100%); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 4px 14px rgba(13,118,110,0.30), inset 0 1px 0 rgba(255,255,255,0.28); } .btn-primary:hover { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 8px 22px rgba(13,118,110,0.38), inset 0 1px 0 rgba(255,255,255,0.32); transform: translateY(-1px); color: #fff; opacity: 1; } .btn-secondary { color: #fff; background: var(--color-secondary); border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .btn-secondary:hover { background: var(--color-primary-dark); color: #fff; opacity: 1; } .btn-success { color: #fff; background: var(--color-success); border-color: transparent; } .btn-success:hover { background: #28A745; color: #fff; opacity: 1; } .btn-danger { color: #fff; background: var(--color-danger); border-color: transparent; box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25); } .btn-danger:hover { background: #D93025; color: #fff; opacity: 1; } .btn-warning { color: #fff; background: var(--color-warning); border-color: transparent; } .btn-warning:hover { background: #E8890A; color: #fff; opacity: 1; } .btn-outline { color: var(--color-primary); background: transparent; border: 2px solid var(--color-primary); } .btn-outline:hover { color: var(--color-primary); background: rgba(79, 70, 229, 0.08); opacity: 1; } .btn-ghost { color: var(--color-primary); background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); opacity: 1; } .btn-sm { padding: 0.35rem 0.8rem; font-size: 0.875rem; border-radius: var(--radius-full); } .btn-lg { padding: 0.85rem 2rem; font-size: var(--text-md); border-radius: var(--radius-lg); } .btn-block { display: flex; width: 100%; } /* ===================================================== Alerts ===================================================== */ .alert { padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); border-radius: var(--radius-md); border-left: 3px solid transparent; font-size: var(--text-sm); font-weight: 500; transition: background var(--transition); } .alert-success { background: rgba(52,199,89,0.09); border-color: var(--color-success); color: #166534; } [data-theme="dark"] .alert-success { background: rgba(52,199,89,0.13); color: #4ADE80; } .alert-warning { background: rgba(255,159,10,0.09); border-color: var(--color-warning); color: #92400E; } [data-theme="dark"] .alert-warning { background: rgba(255,159,10,0.13); color: #FBB740; } .alert-danger { background: rgba(255,59,48,0.07); border-color: var(--color-danger); color: #991B1B; } [data-theme="dark"] .alert-danger { background: rgba(255,59,48,0.13); color: #F87171; } .alert-info { background: rgba(0,122,255,0.07); border-color: var(--color-info); color: #1E40AF; } [data-theme="dark"] .alert-info { background: rgba(0,122,255,0.13); color: #60A5FA; } /* ===================================================== Badges ===================================================== */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; font-size: var(--text-xs); font-weight: 600; line-height: 1; border-radius: var(--radius-full); letter-spacing: 0.02em; white-space: nowrap; } .badge-primary { background: rgba(13,148,136,0.1); color: var(--color-primary); } [data-theme="dark"] .badge-primary { background: rgba(8,145,178,0.18); color: var(--color-primary); } .badge-secondary { background: rgba(8,145,178,0.1); color: var(--color-secondary); } .badge-success { background: rgba(52,199,89,0.1); color: #166534; } [data-theme="dark"] .badge-success { color: #4ADE80; background: rgba(52,199,89,0.15); } .badge-warning { background: rgba(255,159,10,0.1); color: #92400E; } [data-theme="dark"] .badge-warning { color: #FBB740; background: rgba(255,159,10,0.15); } .badge-danger { background: rgba(255,59,48,0.1); color: var(--color-danger); } [data-theme="dark"] .badge-danger { background: rgba(255,59,48,0.15); color: #F87171; } .badge-outline { background: transparent; border: 1px solid currentColor; } /* ===================================================== Kategorie-Pille (S65 — Dark-Mode-lesbar) Color als CSS-Variable: … Light: weicher Pastell-Hintergrund + sattes Farb-Label. Dark: hellerer Mix der Farbe als Label, dunklerer Hintergrund — damit auch in Blau/Indigo/Lila gut lesbar fuer "alte Augen". ===================================================== */ .cat-pill { display: inline-block; font-size: 0.65rem; font-weight: 500; padding: 1px 7px; border-radius: 99px; line-height: 1.4; white-space: nowrap; background: color-mix(in srgb, var(--cat, #6b7280) 14%, transparent); color: var(--cat, #6b7280); } [data-theme="dark"] .cat-pill { background: color-mix(in srgb, var(--cat, #9ca3af) 26%, transparent); color: color-mix(in srgb, var(--cat, #9ca3af) 35%, #ffffff 65%); } /* Fallback fuer Browser ohne color-mix (Safari < 16.2 etc.): weiss */ @supports not (background: color-mix(in srgb, red 50%, blue)) { [data-theme="dark"] .cat-pill { color: #ffffff; background: rgba(255,255,255,0.14); } } /* ===================================================== Tables ===================================================== */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--separator); color: var(--text-secondary); transition: background var(--transition); } .table th { font-weight: 600; color: var(--text-tertiary); background: var(--bg-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .table tbody tr { transition: background var(--transition); } .table tbody tr:hover { background: var(--bg-secondary); } .table tbody tr:last-child td { border-bottom: none; } /* ===================================================== Stats Cards ===================================================== */ .stats-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); } .stat-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--separator); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.60); transition: box-shadow var(--transition), transform var(--transition), background var(--transition); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } [data-theme="dark"] .stat-card { border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05); } .stat-value { font-size: 1.375rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.125rem; letter-spacing: -0.03em; line-height: 1.2; } .stat-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; } .stat-icon { width: 44px; height: 44px; background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(8,145,178,0.08)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: var(--sp-4); } /* ===================================================== Listing Cards ===================================================== */ .listing-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--sp-4); border: 1px solid var(--separator); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); transition: box-shadow var(--transition), transform var(--transition), background var(--transition); } .listing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } [data-theme="dark"] .listing-card { border-color: rgba(255,255,255,0.06); } .listing-header { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); } .listing-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); flex-shrink: 0; background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(8,145,178,0.07)); } .listing-meta { flex: 1; min-width: 0; } .listing-title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--sp-1); color: var(--text-primary); letter-spacing: -0.015em; } .listing-category { font-size: var(--text-sm); color: var(--text-tertiary); } .listing-body { margin-bottom: var(--sp-4); } .listing-description { color: var(--text-secondary); margin-bottom: var(--sp-4); line-height: 1.6; } .listing-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--separator); } .listing-author { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-tertiary); } .listing-price { font-weight: 700; color: var(--color-primary); font-size: var(--text-base); } /* ===================================================== Event Cards ===================================================== */ .event-card { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--separator); box-shadow: var(--shadow-sm); margin-bottom: 0.625rem; display: flex; transition: box-shadow var(--transition), transform var(--transition), background var(--transition); } .event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } [data-theme="dark"] .event-card { border-color: rgba(255,255,255,0.06); } .event-date { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; padding: 0.75rem 0.625rem; text-align: center; min-width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .event-date-day { font-size: 1.375rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .event-date-month { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.82; margin-top: 2px; } .event-content { padding: 0.75rem 1rem; flex: 1; } .event-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.375rem; color: var(--text-primary); letter-spacing: -0.015em; } .event-meta { display: flex; flex-wrap: wrap; gap: 0.625rem; font-size: 0.775rem; color: var(--text-tertiary); margin-bottom: 0.5rem; } .event-meta-item { display: flex; align-items: center; gap: var(--sp-1); } /* ===================================================== Hero Section ===================================================== */ .hero { background: radial-gradient(ellipse at 20% 60%, rgba(34,211,238,0.35) 0%, transparent 48%), radial-gradient(ellipse at 78% 25%, rgba(13,148,136,0.60) 0%, transparent 52%), radial-gradient(ellipse at 55% 90%, rgba(8,145,178,0.45) 0%, transparent 50%), radial-gradient(ellipse at 15% 15%, rgba(6,182,212,0.35) 0%, transparent 40%), linear-gradient(135deg, #042f2e 0%, #0f766e 40%, #0d9488 65%, #0891b2 100%); color: #fff; padding: 4rem 0 3rem; text-align: center; position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: center; } .hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: luminosity; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 55%, rgba(255,255,255,0.18) 0%, transparent 40%), radial-gradient(ellipse at 75% 20%, rgba(255,255,255,0.08) 0%, transparent 35%), radial-gradient(ellipse at 50% 110%, rgba(168,85,247,0.25) 0%, transparent 55%); pointer-events: none; } /* Shimmer line entfernt */ .hero > .container { position: relative; z-index: 1; width: 100%; } .hero-title { font-size: var(--text-4xl); font-weight: 600; margin-bottom: var(--sp-4); color: #fff; letter-spacing: -0.04em; line-height: 1.1; } .hero-subtitle { font-size: var(--text-lg); opacity: 0.85; margin-bottom: var(--sp-8); max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.65; color: #fff; } .hero-actions { display: flex; flex-direction: row; gap: var(--sp-3); align-items: center; justify-content: center; flex-wrap: wrap; } .hero .btn { min-width: 160px; } .hero .btn-primary { background: #fff; color: var(--color-primary); box-shadow: 0 4px 20px rgba(0,0,0,0.22); } .hero .btn-primary:hover { background: rgba(255,255,255,0.92); color: var(--color-primary-dark); } .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .hero .btn-outline:hover { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; } /* ===================================================== Footer ===================================================== */ .footer { background: var(--bg-secondary); border-top: 1px solid var(--separator); color: var(--text-tertiary); padding: var(--sp-12) 0; margin-top: auto; transition: background var(--transition), border-color var(--transition); } [data-theme="dark"] .footer { background: var(--bg-tertiary); } .footer-grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; } .footer-title { color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-4); } .footer-desc { font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--sp-4); line-height: 1.65; } .footer-links { list-style: none; margin: 0; padding: 0; } .footer-link { display: block; padding: var(--sp-1) 0; color: var(--text-tertiary); font-size: var(--text-sm); transition: color var(--transition); } .footer-link:hover { color: var(--text-primary); text-decoration: none; opacity: 1; } .footer-bottom { border-top: 1px solid var(--separator); margin-top: var(--sp-8); padding-top: var(--sp-6); text-align: center; font-size: var(--text-sm); color: var(--text-quaternary); } .footer-bottom p { margin: 0; color: var(--text-quaternary); } /* ===================================================== Public Mobile Bottom Nav (ALLESDACH-style) ===================================================== */ .pub-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-primary); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--separator); z-index: 200; padding-bottom: env(safe-area-inset-bottom, 0px); } [data-theme="dark"] .pub-bottom-nav { background: rgba(17,19,24,0.92); } .pub-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; gap: 3px; color: var(--text-tertiary); font-size: 10px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; transition: color 0.15s; -webkit-tap-highlight-color: transparent; min-height: 58px; } .pub-nav-item svg { width: 24px; height: 24px; stroke-width: 1.75; } .pub-nav-item.is-active { color: var(--color-primary); } .pub-nav-item.is-active svg { stroke-width: 2.25; } .pub-nav-item:hover, .pub-nav-item:active { text-decoration: none; opacity: 1; color: var(--color-primary); } /* ===================================================== Member Header (secondary nav bar) ===================================================== */ .member-header { background: var(--bg-card); border-bottom: 1px solid var(--separator); transition: background var(--transition), border-color var(--transition); } [data-theme="dark"] .member-header { background: var(--bg-tertiary); } .member-nav { display: flex; gap: var(--sp-1); overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-2) 0; scrollbar-width: none; } .member-nav::-webkit-scrollbar { display: none; } .member-nav-link { display: flex; align-items: center; gap: var(--sp-2); padding: 0.45rem 0.875rem; color: var(--text-tertiary); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); white-space: nowrap; transition: all var(--transition); text-decoration: none; } .member-nav-link:hover { background: rgba(13,148,136,0.09); color: var(--color-primary); text-decoration: none; opacity: 1; } .member-nav-link.is-active { background: rgba(13,148,136,0.12); color: var(--color-primary); font-weight: 600; } [data-theme="dark"] .member-nav-link.is-active { background: rgba(13,148,136,0.18); color: #2DD4BF; } .member-user-menu { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } /* R8: Taler-Pille im Member-Header — vorher teal-Gradient auf teal-Header (unlesbar). Jetzt weiße Pille mit teal-Schrift, klar lesbar — analog Q97 Nav-Active-Pille. */ .taler-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.35rem 0.75rem; background: #fff; color: var(--color-primary); border-radius: var(--radius-full); font-weight: var(--fw-semibold); font-size: var(--text-sm); box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); white-space: nowrap; letter-spacing: 0; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); } .taler-badge:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10); transform: translateY(-1px); color: var(--color-primary); text-decoration: none; } .message-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1.5px solid var(--separator-opaque); color: var(--text-secondary); text-decoration: none; transition: all var(--transition); font-size: var(--text-md); } .message-badge:hover { /* Deckender Hintergrund: vorher rgba(...,0.08) wurde auf dem teal Header fast durchsichtig, Teal-Icon auf Teal = unsichtbar. */ background: var(--bg-primary); border-color: var(--color-primary); color: var(--color-primary); opacity: 1; } .message-badge-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 3px; background: var(--color-danger); color: #fff; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary); } /* User dropdown */ .user-dropdown { position: relative; } .user-dropdown-btn { background: var(--bg-secondary); border: 1.5px solid var(--separator-opaque); border-radius: var(--radius-full); padding: 0.3rem 0.75rem 0.3rem 0.45rem; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); font-family: var(--font); transition: all var(--transition); } .user-dropdown-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .user-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--separator); padding: var(--sp-1); z-index: 350; } .user-dropdown-menu.is-open { display: block; } [data-theme="dark"] .user-dropdown-menu { border-color: rgba(255,255,255,0.1); } .dropdown-item { display: flex; align-items: center; gap: var(--sp-2); padding: 0.5rem 0.75rem; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); transition: all var(--transition); cursor: pointer; text-decoration: none; } .dropdown-item:hover { background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; opacity: 1; } .dropdown-item.is-danger { color: var(--color-danger); } .dropdown-item.is-danger:hover { background: rgba(255,59,48,0.07); color: var(--color-danger); } .dropdown-divider { height: 1px; background: var(--separator); margin: var(--sp-1) 0; } /* ===================================================== Admin Header ===================================================== */ .admin-header { background: linear-gradient(135deg, #0F766E 0%, #0891B2 100%); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: var(--z-sticky); } .admin-header-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; } .admin-logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: #fff; text-decoration: none; font-size: var(--text-base); letter-spacing: -0.02em; } .admin-logo:hover { color: rgba(255,255,255,0.85); text-decoration: none; opacity: 1; } .admin-logo-img { height: 48px; width: auto; mix-blend-mode: screen; } .admin-badge { background: rgba(255,59,48,0.2); color: #FF6B6B; border: 1px solid rgba(255,59,48,0.3); padding: 0.15rem 0.5rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .admin-user-menu { display: flex; align-items: center; gap: var(--sp-3); } .admin-user-menu a { color: #fff; font-size: var(--text-sm); transition: opacity var(--transition); opacity: 0.85; } .admin-user-menu a:hover { color: #fff; opacity: 1; text-decoration: none; } /* Admin header + nav color overrides */ /* Mint/Teal = Standard */ [data-color="mint"] .admin-header, .admin-header { background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #0891B2 100%); } /* Blau Pastell */ [data-color="indigo"] .admin-header { background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 50%, #60A5FA 100%); } [data-color="indigo"] .header { background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 55%, #60A5FA 100%); } /* Orange Pastell */ [data-color="orange"] .admin-header { background: linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FB923C 100%); } /* Max-clean TopNav — weiß/leicht statt schwarz (Q27 Maximilian-Feedback) */ .admin-nav, [data-color="mint"] .admin-nav, [data-color="indigo"] .admin-nav, [data-color="orange"] .admin-nav { background: #ffffff; border-bottom: 1px solid var(--separator, rgba(60,60,67,0.12)); box-shadow: 0 1px 0 rgba(60,60,67,0.04); } [data-theme="dark"] .admin-nav, [data-theme="dark"][data-color="mint"] .admin-nav, [data-theme="dark"][data-color="indigo"] .admin-nav, [data-theme="dark"][data-color="orange"] .admin-nav { background: #1c1c1e; border-bottom: 1px solid rgba(255,255,255,0.08); } .admin-nav-list { display: flex; gap: var(--sp-1); overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-2) 0; margin: 0; list-style: none; scrollbar-width: none; } .admin-nav-list::-webkit-scrollbar { display: none; } .admin-nav-link { display: flex; align-items: center; gap: var(--sp-2); padding: 0.4rem 0.875rem; color: var(--text-secondary, #3a3a3c); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); white-space: nowrap; text-decoration: none; transition: all var(--transition); } .admin-nav-link:hover { background: rgba(13,148,136,0.08); color: var(--color-primary, #0D9488); text-decoration: none; opacity: 1; } .admin-nav-link.is-active { background: rgba(13,148,136,0.12); color: var(--color-primary, #0D9488); font-weight: 600; } [data-theme="dark"] .admin-nav-link { color: rgba(235,235,245,0.85); } [data-theme="dark"] .admin-nav-link:hover { background: rgba(94,234,212,0.12); color: #5EEAD4; } [data-theme="dark"] .admin-nav-link.is-active { background: rgba(94,234,212,0.18); color: #5EEAD4; } /* ===================================================== Taler Balance ===================================================== */ .taler-balance { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0.3rem 0.875rem; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); box-shadow: 0 2px 8px rgba(13,148,136,0.30); letter-spacing: 0.01em; } .taler-balance::before { content: 'T'; width: 18px; height: 18px; background: rgba(255,255,255,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } /* ===================================================== Empty State ===================================================== */ .empty-state { text-align: center; padding: var(--sp-16) var(--sp-6); } .empty-state-icon { font-size: var(--text-4xl); color: var(--text-quaternary); margin-bottom: var(--sp-4); } .empty-state-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); letter-spacing: -0.015em; } .empty-state-text { color: var(--text-tertiary); margin-bottom: var(--sp-6); font-size: var(--text-base); } /* ===================================================== Modal ===================================================== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: var(--z-modal); align-items: center; justify-content: center; padding: var(--sp-4); } .modal-overlay.is-open { display: flex; } .modal { background: var(--bg-card); border-radius: var(--radius-xl); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.6); border: 1px solid var(--separator-opaque); } [data-theme="dark"] .modal { border-color: rgba(255,255,255,0.1); } .modal-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--separator); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: var(--text-lg); font-weight: 600; margin: 0; color: var(--text-primary); letter-spacing: -0.02em; } .modal-close { background: var(--bg-secondary); border: none; width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--text-base); color: var(--text-tertiary); cursor: pointer; transition: all var(--transition); } .modal-close:hover { background: var(--separator-opaque); color: var(--text-primary); } .modal-body { padding: var(--sp-6); } .modal-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--separator); display: flex; justify-content: flex-end; gap: var(--sp-2); } /* ===================================================== Tabs ===================================================== */ .tabs { display: flex; border-bottom: 1px solid var(--separator); overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-6); gap: var(--sp-1); scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 0.6rem 1rem; font-weight: 500; font-size: var(--text-sm); color: var(--text-tertiary); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; transition: all var(--transition); font-family: var(--font); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tab:hover { color: var(--color-primary); background: rgba(13,148,136,0.04); } .tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } /* ===================================================== Pagination ===================================================== */ .pagination { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-8); } .pagination-item { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--sp-2); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); background: var(--bg-card); border: 1.5px solid var(--separator-opaque); text-decoration: none; transition: all var(--transition); } .pagination-item:hover { background: var(--bg-secondary); color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; opacity: 1; } .pagination-item.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(13,148,136,0.3); } /* ===================================================== Auth Page ===================================================== */ .auth-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom)); /* Kanonischer Login-Hintergrund: heller Marken-Verlauf mit dezentem Logo-Muster. Standard ist immer hell. Einzelseiten koennen dies bei Bedarf inline ueberschreiben. */ background: radial-gradient(ellipse at 20% 60%, rgba(13,148,136,0.10) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(8,145,178,0.08) 0%, transparent 55%), linear-gradient(135deg, #f8fafc 0%, #ecfdf5 50%, #f0fdfa 100%); } .auth-page::before { content: ''; position: absolute; inset: 0; background-image: url('../images/logo.png'); background-repeat: repeat; background-size: 130px auto; opacity: 0.05; pointer-events: none; } .auth-page > *, .auth-page .auth-card { position: relative; z-index: 1; } /* Dark-Mode: dunkler Verlauf statt hell (sonst heller Grund hinter dunklen Karten) */ [data-theme="dark"] .auth-page { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); } [data-theme="dark"] .auth-page::before { opacity: 0.04; } .auth-card { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); border: 1px solid var(--separator); padding: var(--sp-10); width: 100%; max-width: 420px; } [data-theme="dark"] .auth-card { border-color: rgba(255,255,255,0.08); } .auth-logo { display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-6); } .auth-logo img { height: 44px; width: auto; } .auth-logo-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-2xl); font-weight: 700; box-shadow: 0 4px 16px rgba(13,148,136,0.35); } .auth-title { font-size: var(--text-2xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); text-align: center; letter-spacing: -0.03em; } .auth-subtitle { color: var(--text-tertiary); text-align: center; margin-bottom: var(--sp-8); font-size: var(--text-sm); } /* ===================================================== Search & Filter ===================================================== */ .search-bar { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-6); } .search-input-wrapper { position: relative; flex: 1; } .search-input-wrapper .search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-quaternary); pointer-events: none; } .search-input-wrapper .form-input { padding-left: 2.5rem; } /* ===================================================== Avatar ===================================================== */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; font-weight: 500; flex-shrink: 0; overflow: hidden; } .avatar-sm { width: 30px; height: 30px; font-size: var(--text-xs); } .avatar-md { width: 42px; height: 42px; font-size: var(--text-base); } .avatar-lg { width: 62px; height: 62px; font-size: var(--text-xl); } .avatar-xl { width: 86px; height: 86px; font-size: var(--text-2xl); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ===================================================== Progress Bar ===================================================== */ .progress-bar { height: 4px; background: var(--bg-secondary); border-radius: var(--radius-full); overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* ===================================================== Dashboard Layout ===================================================== */ .dashboard { display: flex; flex-direction: column; min-height: 100vh; } .dashboard-sidebar { background: var(--bg-card); border-bottom: 1px solid var(--separator); transition: background var(--transition), border-color var(--transition); } .dashboard-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-2) var(--sp-4); gap: var(--sp-1); scrollbar-width: none; } .dashboard-nav::-webkit-scrollbar { display: none; } .dashboard-nav-link { display: flex; align-items: center; gap: var(--sp-2); padding: 0.5rem 0.875rem; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; border-radius: var(--radius-md); transition: all var(--transition); text-decoration: none; } .dashboard-nav-link:hover { background: var(--bg-secondary); color: var(--color-primary); text-decoration: none; opacity: 1; } .dashboard-nav-link.is-active { background: rgba(13,148,136,0.1); color: var(--color-primary); font-weight: 600; } .dashboard-main { flex: 1; padding: var(--sp-6) 0; } /* ===================================================== Utilities ===================================================== */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-success { color: var(--color-success) !important; } .text-danger { color: var(--color-danger) !important; } .text-warning { color: var(--color-warning) !important; } .text-muted { color: var(--text-tertiary) !important; } .text-white { color: #fff !important; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-2); } .mt-2 { margin-top: var(--sp-4); } .mt-3 { margin-top: var(--sp-6); } .mt-4 { margin-top: var(--sp-8); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-2); } .mb-2 { margin-bottom: var(--sp-4); } .mb-3 { margin-bottom: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-8); } .gap-1 { gap: var(--sp-2); } .gap-2 { gap: var(--sp-4); } .gap-3 { gap: var(--sp-6); } .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .w-100 { width: 100%; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ===================================================== Mobile Member Navigation (Hamburger-Overlay) ===================================================== */ /* Zurueck/Vorwaerts in der Kopfzeile. Nur sichtbar, wenn die Seite vom Homescreen als App gestartet wurde: iOS blendet dann die Safari-Leiste aus, und damit fehlt der Zurueck-Knopf des Browsers. Die Klasse is-standalone setzt ein kurzes Skript im . Im normalen Browser bleibt alles wie es war. */ .app-nav { display: none; align-items: center; gap: 2px; } html.is-standalone .app-nav { display: inline-flex; } .app-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; transition: background 0.15s; } .app-nav-btn:hover { background: rgba(255,255,255,0.2); } .app-nav-btn:active { background: rgba(255,255,255,0.28); } /* Hamburger-Button Member (Mobile only) */ .member-menu-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); cursor: pointer; color: rgba(255,255,255,0.9); padding: 0; flex-shrink: 0; transition: all var(--transition); -webkit-tap-highlight-color: transparent; } .member-menu-toggle:hover, .member-menu-toggle:active { background: rgba(13,148,136,0.25); border-color: var(--color-primary); color: #fff; } /* Mobile Nav Overlay S66: Vorher inset:56px 0 0 0 — 56px Top reicht nicht für den Member-Header (Logo + Hansetaler-Pille sind höher), und Bottom war 0 → Drawer lief HINTER die Bottom-Nav durch. Jetzt explizit: oben unter Header, unten über Bottom-Nav. Variablen, damit's auch bei Header-/Bottom-Nav-Änderungen robust bleibt. */ :root { --member-header-h: 64px; --member-bottom-nav-h: 60px; } /* ===================================================== Mobile-Drawer — Full-Height Solid-Lösung Liegt über Header UND Bottom-Nav, sodass das Menü die KOMPLETTE Bildschirmhöhe ohne sichtbare Überreste einnimmt. Sticky Drawer-Header mit Close-Button. ===================================================== */ .member-mobile-nav { display: none; position: fixed; inset: 0; /* full screen, alles abdecken */ background: rgba(0,0,0,0.55); z-index: 9999; /* über alles inkl. Bottom-Nav */ -webkit-overflow-scrolling: touch; } .member-mobile-nav.is-open { display: block; animation: mmn-fade .18s ease-out; } @keyframes mmn-fade { from { opacity: 0; } to { opacity: 1; } } .member-mobile-nav-inner { position: absolute; top: 0; right: 0; width: min(330px, 92vw); height: 100vh; height: 100dvh; /* iOS-safe, dynamic viewport */ background: var(--bg-card); display: flex; flex-direction: column; overflow: hidden; /* outer fix, inner scrollt */ overscroll-behavior: contain; box-shadow: -6px 0 32px rgba(0,0,0,0.22); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .member-mobile-nav.is-open .member-mobile-nav-inner { animation: mmn-slide .22s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes mmn-slide { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Sticky Drawer-Header mit Logo und Close-Button (immer sichtbar) */ .member-mobile-nav-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--separator); flex-shrink: 0; min-height: 56px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); } .member-mobile-nav-topbar-title { font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; } .member-mobile-nav-close { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; transition: background .15s; } .member-mobile-nav-close:hover, .member-mobile-nav-close:active { background: rgba(255,255,255,0.32); } /* Scrollbarer Inhalts-Bereich im Drawer */ .member-mobile-nav-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } /* Body Scroll-Lock wenn Drawer offen ist */ body.has-mobile-nav-open { overflow: hidden; touch-action: none; } .member-mobile-nav-link { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; color: var(--text-primary); font-size: 1rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--separator); transition: background var(--transition); -webkit-tap-highlight-color: transparent; min-height: 52px; } .member-mobile-nav-link:hover, .member-mobile-nav-link:active { background: var(--bg-secondary); text-decoration: none; } .member-mobile-nav-link.is-active { background: rgba(13,148,136,0.10); color: var(--color-primary); font-weight: 500; border-left: 3px solid var(--color-primary); padding-left: calc(1.25rem - 3px); } [data-theme="dark"] .member-mobile-nav-inner { background: var(--bg-secondary); } /* Desktop-only elements: zeige auf mobile NICHT */ .member-desktop-only { display: none !important; } /* Theme-Menu im public Header auf Mobile ausblenden */ .theme-menu { display: none; } /* Horizontale member-nav: auf mobile ausblenden */ .member-header { display: none; } /* Logo-Text auf mobile kürzer */ .logo-text-hide { display: none; } /* ===================================================== Mobile first — base (< 768px) fixes ===================================================== */ /* Member header: compress on mobile */ .member-user-menu { gap: var(--sp-2); } .taler-badge { font-size: 0.75rem; padding: 0.28rem 0.55rem; } .user-dropdown-btn span { display: none; } /* hide name on mobile, show avatar only */ /* Stats grid single col on mobile */ .stats-grid { grid-template-columns: 1fr 1fr; } /* Tables: horizontal scroll on mobile */ .table-container { -webkit-overflow-scrolling: touch; border-radius: 0; } /* Event cards stacked on mobile */ .event-card { flex-direction: column !important; } .event-card .event-date { flex-direction: row !important; gap: 0.5rem; min-width: unset !important; padding: 0.75rem 1rem !important; border-radius: 0 !important; } .event-card .event-date-day { font-size: 1.25rem; } .event-card .event-date-month { font-size: 0.75rem; } /* Cards full bleed on very small screens */ @media (max-width: 480px) { .container { padding: 0 var(--sp-3); } .card { border-radius: var(--radius-md); } .card-body { padding: var(--sp-4); } .card-header { padding: var(--sp-3) var(--sp-4); } .card-footer { padding: var(--sp-3) var(--sp-4); } .page-title { font-size: var(--text-2xl); } .btn-lg { padding: 0.75rem 1.5rem; font-size: var(--text-sm); } .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .stat-value { font-size: var(--text-xl); } .member-user-menu .taler-badge { display: none; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr !important; } /* Inline-3-Spalten-Grids (Angebote/Gesuche-Karten) auf 1 Spalte */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; } /* 2-Spalten auch zu 1 auf sehr kleinen Screens */ [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; } } @media (max-width: 767px) { /* Angebots-/Gesuche-Karten: 1 Spalte auf Mobile */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Footer Desktop Grid → Mobile Bar */ .footer-desktop-grid { display: none !important; } .footer-mobile-bar { display: flex !important; } .footer { padding: 0 !important; } /* Public Bottom Nav anzeigen */ .pub-bottom-nav { display: flex !important; } /* App-Container: Platz für Public Bottom Nav */ .app { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; } /* Größeres Logo im Mobile-Header */ .logo-img { height: 46px !important; } /* Hansetaler-Badge rechts neben Hamburger */ .member-mobile-taler-badge { display: flex !important; } .member-mobile-taler-badge img { height: 30px !important; width: 30px !important; } .member-mobile-taler-badge span { font-size: 0.62rem !important; } /* Admin: Einstellungen-Tabs scrollbar auf Mobile */ .settings-tabs, .tab-list { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .tab-item { white-space: nowrap; } /* Admin: Content-Padding auf Mobile reduzieren */ .adm-body { padding: 0.75rem 0.75rem 4rem; } /* Admin-Nav Tabs: horizontaler Scroll auf Mobile */ .admin-nav .container { padding-left: 0.75rem; padding-right: 0.75rem; } /* Karten-Grids in Admin auf 1 Spalte */ [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Modal auf Mobile: volle Breite */ .modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-overlay { align-items: flex-end; padding: 0; } .hb-modal { width: 96%; padding: 1.5rem 1.25rem; } } /* ===================================================== Responsive — Tablet 768px+ ===================================================== */ @media (min-width: 768px) { .container { padding: 0 var(--sp-8); } .theme-menu { display: flex; align-items: center; } /* Q48: Desktop-Nav erst ab 1024px sichtbar — bei 768-1023px (iPad-Portrait) Hamburger lassen damit die langen Menü-Items nicht raus laufen. */ /* Auf Desktop: Auth im Nav ausblenden, dafür User-Menu mit Buttons zeigen */ .nav-auth { display: none; } .user-menu .btn { display: inline-flex; } .user-dropdown-btn span { display: inline; } /* show name at 768+ */ /* Member Mobile-Nav: auf Desktop ausblenden */ .member-mobile-nav { display: none !important; } .member-menu-toggle { display: none !important; } /* Desktop-only: wieder einblenden */ .member-desktop-only { display: flex !important; } /* Horizontale member-nav wieder anzeigen */ .member-header { display: block; } /* Logo-Text auf Desktop zeigen */ .logo-text-hide { display: inline; } .hero-title { font-size: var(--text-4xl); } .hero-subtitle { font-size: var(--text-lg); } .hero-actions { flex-direction: row; justify-content: center; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-sidebar { border-bottom: none; border-right: 1px solid var(--separator); } .dashboard-nav { flex-direction: column; padding: var(--sp-6); gap: 2px; } .dashboard-nav-link { width: 100%; } .form-row { grid-template-columns: repeat(2, 1fr); } /* Event cards horizontal at 768+ */ .event-card { flex-direction: row !important; } .event-card .event-date { flex-direction: column !important; min-width: 58px !important; padding: 0.75rem 0.5rem !important; border-radius: 0 !important; gap: 0 !important; } .event-card .event-date-day { font-size: 1.375rem; } } /* ===================================================== Responsive — Desktop 1024px+ ===================================================== */ @media (min-width: 1024px) { .header-inner { min-height: 96px; } .admin-header-inner { height: 60px; } .hero { padding: 3rem 0 2.5rem; } .hero-title { font-size: var(--text-4xl); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .stats-grid { grid-template-columns: repeat(4, 1fr); } .footer-grid { grid-template-columns: repeat(4, 1fr); } /* Q48: Desktop-Nav erst hier — Hamburger weg, volles Menü sichtbar */ .menu-toggle { display: none; } .nav { display: flex !important; position: static; padding: 0; overflow: visible; background: transparent; border: none; -webkit-backdrop-filter: none; backdrop-filter: none; inset: auto; } .nav-list { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } .nav-item { border-bottom: none; } .nav-link { padding: 0.4rem 0.625rem; border-radius: var(--radius-md); font-size: 0.875rem; white-space: nowrap; } /* Admin-Hamburger erst ab 1024px ausblenden — bei iPad-Portrait bleibt er an */ .adm-mob-toggle { display: none !important; } .dashboard { flex-direction: row; } .dashboard-sidebar { width: 240px; min-height: calc(100vh - 64px); position: sticky; top: 64px; align-self: flex-start; } .dashboard-main { flex: 1; padding: var(--sp-8); } } /* ===================================================== Q73 — Public-Logo skalierbar (Image-Höhe + Wordmark) Default-Werte für alle Viewports; werden per Media-Query bei größeren Bildschirmen hochgesetzt. ===================================================== */ .logo-img-public { height: 44px; width: auto; flex-shrink: 0; } .logo-wordmark-public .logo-name { font-size: 1.05rem; } .logo-wordmark-public .logo-ev { font-size: 0.8rem; } /* Desktop-Nav (1024-1439): Logo kompakt halten damit 7 Menü-Items + "Design" + "Mein Bereich" reinpassen ohne Überlappung. S23/S24: Wordmark darf NICHT wrap-stacken — "Tauschring Unna" und "e.V." bleiben in einer Zeile, sonst überlappt das Logo die Nav (Maximilian-Screenshot). Nav bekommt margin-left:auto damit es immer rechts wegrückt + Logo links bleibt. */ @media (min-width: 1024px) { .header-inner { gap: 1rem; } .header .logo { flex-shrink: 0; min-width: 0; margin-right: 1rem; } .logo-img-public { height: 48px; } .logo-wordmark-public { flex-wrap: nowrap !important; min-width: 0; } .logo-wordmark-public .logo-name { font-size: 1rem; white-space: nowrap; } .logo-wordmark-public .logo-ev { font-size: 0.75rem; flex-shrink: 0; } /* S66: min-width:max-content stoppt das Schrumpfen der Nav unterhalb der natürlichen Breite ihrer Items — sonst rutschen Items wegen flex-wrap:nowrap aus der Nav-Box heraus und überlappen mit dem User-Menu rechts. */ .header .nav { flex: 0 1 auto; min-width: max-content; } .header .nav-list { justify-content: flex-end; flex-wrap: nowrap; } .nav-link { padding: 0.35rem 0.5rem; font-size: 0.8rem; } /* Theme-Umschalter durchgehend als Icon (Mond/Sonne). Mit 8 Menuepunkten + dem breiteren "Mein Bereich"-Knopf wuerde das Wort "Dunkel"/"Hell" den Login-/Mein- Bereich-Knopf rechts abschneiden. Das SVG-Icon bleibt sichtbar. */ .user-menu .theme-menu-btn { padding: 0.3rem 0.45rem; font-size: 0; gap: 0; } .user-menu .theme-menu-btn svg { width: 16px; height: 16px; } } /* S65: Im Range 1024-1279px (Safari mit offener Sidebar / kleinere Notebooks) ist die rechte Button-Gruppe (Design/Hilfe/Konto/Mein Bereich) zu breit und ueberlappt mit „Über uns" links. Lösung: Design + Hilfe auf Icon-only reduzieren, damit Platz fuer „Über uns" bleibt. */ @media (min-width: 1024px) and (max-width: 1279px) { /* S66 v2: klar sichtbarer Abstand statt 0.75rem (war zu eng → Overlap) */ .user-menu { gap: 0.35rem; margin-left: 1.25rem !important; flex-shrink: 0 !important; } .theme-menu-btn { padding: 0.3rem 0.45rem; font-size: 0; gap: 0; } .theme-menu-btn svg { width: 16px; height: 16px; } .header-btn[aria-label="Hilfe"], .header .header-btn[title*="Hilfe"] { padding: 0.3rem 0.45rem; font-size: 0; } .user-menu .btn { font-size: 0.75rem; padding: 0.35rem 0.65rem; } .header .nav-link { padding: 0.3rem 0.4rem; font-size: 0.78rem; } .header .nav-list .nav-item:last-child { margin-right: 0.5rem; } } /* ===================================================== Responsive — Mid-Large 1280-1439px (Safari mit Sidebar landet hier) ===================================================== */ @media (min-width: 1280px) { .container { padding: 0 var(--sp-8); } /* Logo bewusst kompakt: mit 8 Menuepunkten (inkl. Downloads) wuerde ein grosses Logo den Login-Knopf rechts abschneiden. Hoehe gedeckelt statt weiter wachsend. */ .logo-img-public { height: 46px; } .logo-wordmark-public .logo-name { font-size: 1.02rem; } .logo-wordmark-public .logo-ev { font-size: 0.78rem; } /* Nav-Links kompakt im 1280-1439px Range damit die 8 Punkte + User-Menu passen. */ .nav-link { padding: 0.35rem 0.45rem; font-size: 0.8rem; } /* S66 v2: Klar sichtbarer 24px-Trenner zwischen "Über uns" und der Design-Pille. !important weil R10 Default-Regel + ggf. spätere user-menu-Overrides drohen. */ .header .user-menu { margin-left: 1.5rem !important; flex-shrink: 0 !important; } .header .nav-list .nav-item:last-child { margin-right: 0.75rem; } } /* ===================================================== Responsive — Full Desktop 1440px+ Erst hier Logo wieder voll groß ===================================================== */ @media (min-width: 1440px) { .container { padding: 0 var(--sp-12); } .logo-img-public { height: 72px; } .logo-wordmark-public .logo-name { font-size: 1.35rem; } .logo-wordmark-public .logo-ev { font-size: 0.95rem; } .nav-link { padding: 0.4rem 0.75rem; font-size: 0.875rem; } } /* ===================================================== Q48 — iPad-Portrait-Override (768-1023px) Bei iPad-Portrait reicht der Platz nicht für Desktop-Layout (Sidebar + Content). Daher gleiche Mobile-Behandlung wie <768px: Bottom-Nav, Mobile-Hamburger, kein Desktop-Header. Greift NACH allen "min-width: 768px"-Regeln und übersteuert sie. ===================================================== */ @media (min-width: 768px) and (max-width: 1023px) { /* Public-Header: Hamburger wieder einblenden */ .menu-toggle { display: inline-flex !important; } .nav { display: none !important; position: fixed; inset: auto 0 0 0; top: var(--header-height, 60px); /* Kein flaches Weiss: den teal Marken-Verlauf der Basis-.nav durchscheinen lassen (identisch zur Handy-Ansicht), damit das Menue ins Glas-Layout passt. */ background: radial-gradient(ellipse at 20% 60%, rgba(13,148,136,0.10) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(8,145,178,0.08) 0%, transparent 55%), linear-gradient(135deg, #f8fafc 0%, #ecfdf5 50%, #f0fdfa 100%) !important; background-color: var(--bg-primary) !important; border-top: 1px solid rgba(13,148,136,0.18); padding: var(--sp-2) 0; z-index: 200; } [data-theme="dark"] .nav { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important; } .nav.is-open { display: block !important; } .nav-list { display: flex !important; flex-direction: column !important; gap: 0 !important; } .nav-link { padding: 0.75rem 1.25rem !important; border-radius: 0 !important; font-size: 0.95rem !important; } /* Member: Bottom-Nav und Mobile-Hamburger einblenden, Desktop-Nav verstecken */ /* S64 / Hubertus-Feedback (26.05.): Mobile-Nav nur sichtbar wenn .is-open — vorher war 'display: block !important' ohne .is-open-Bedingung, dadurch blieb das Menü auf iPad-Portrait dauerhaft ausgeklappt und der Toggle-Button konnte es nicht mehr einfahren. Jetzt gleiche Logik wie auf <768px Smartphone. */ .member-mobile-nav { display: none; } .member-mobile-nav.is-open { display: block !important; } .pub-bottom-nav { display: flex !important; } .member-menu-toggle { display: inline-flex !important; } .member-header { display: none !important; } .member-desktop-only { display: none !important; } /* Hansetaler-Badge mobile-Style für iPad */ .member-mobile-taler-badge { display: flex !important; } /* App-Container Padding für Bottom-Nav */ .app { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; } /* Logo etwas kleiner als auf Desktop */ .logo-img { height: 50px !important; } /* Footer: Mobile-Bar-Stil */ .footer-desktop-grid { display: none !important; } .footer-mobile-bar { display: flex !important; } .footer { padding: 0 !important; } } /* ===================================================== Messenger Buttons ===================================================== */ .messenger-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; padding: var(--sp-3) var(--sp-4); background: rgba(13,148,136,0.04); border: 1px solid rgba(13,148,136,0.10); border-radius: var(--radius-md); margin-top: var(--sp-4); } .btn-whatsapp { color: #fff; background: #25D366; border-color: transparent; box-shadow: 0 2px 8px rgba(37,211,102,0.30); } .btn-whatsapp:hover { background: #1DA851; color: #fff; opacity: 1; } .btn-telegram { color: #fff; background: #229ED9; border-color: transparent; box-shadow: 0 2px 8px rgba(34,158,217,0.30); } .btn-telegram:hover { background: #1A7DB5; color: #fff; opacity: 1; } /* ===================================================== Video Embed ===================================================== */ .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-lg); background: #000; margin-bottom: var(--sp-6); } .video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); } /* ===================================================== Kassenbuch / Ledger specific styles ===================================================== */ .kassenbuch-row-income td:last-child { color: var(--color-success); font-weight: 600; } .kassenbuch-row-expense td:last-child { color: var(--color-danger); font-weight: 600; } .kassenbuch-balance-positive { color: var(--color-success); font-weight: 700; } .kassenbuch-balance-negative { color: var(--color-danger); font-weight: 700; } .status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0.18rem 0.55rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; } .status-open { background: rgba(255,159,10,0.12); color: #92400E; } .status-settled { background: rgba(52,199,89,0.12); color: #166534; } .status-overdue { background: rgba(255,59,48,0.12); color: #991B1B; } .status-exempt { background: rgba(0,122,255,0.10); color: #1E40AF; } [data-theme="dark"] .status-open { color: #FBB740; background: rgba(255,159,10,0.15); } [data-theme="dark"] .status-settled { color: #4ADE80; background: rgba(52,199,89,0.15); } [data-theme="dark"] .status-overdue { color: #F87171; background: rgba(255,59,48,0.15); } [data-theme="dark"] .status-exempt { color: #60A5FA; background: rgba(0,122,255,0.15); } /* ===================================================== Gamification — Star Ratings ===================================================== */ .star-rating { display: inline-flex; gap: 2px; } .star-rating .star { font-size: 1.25rem; color: var(--color-warning); cursor: pointer; transition: transform var(--transition), color var(--transition); line-height: 1; } .star-rating .star.empty { color: var(--separator-opaque); } .star-rating .star:hover, .star-rating .star.hover { transform: scale(1.25); } .star-display { display: inline-flex; gap: 2px; } .star-display .star { font-size: 1rem; color: var(--color-warning); } .star-display .star.empty { color: var(--separator-opaque); } .rating-card { padding: var(--sp-4); border-radius: var(--radius-md); border: 1px solid var(--separator); background: var(--bg-card); margin-bottom: var(--sp-3); } .rating-card-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .rating-avg { font-size: var(--text-2xl); font-weight: 700; color: var(--color-warning); letter-spacing: -0.04em; } /* ===================================================== Gamification — Badges / Achievements ===================================================== */ .badge-achievement { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(13,148,136,0.08), rgba(8,145,178,0.05)); border: 1px solid rgba(13,148,136,0.15); text-align: center; min-width: 90px; transition: all var(--transition); } .badge-achievement:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .badge-achievement-icon { font-size: 2rem; line-height: 1; } .badge-achievement-label { font-size: 0.7rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .badge-achievement.locked { opacity: 0.38; filter: grayscale(1); } .badges-grid { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* ===================================================== Gamification — Mitglied des Monats ===================================================== */ .motm-card { background: linear-gradient(135deg, #0f0c3d 0%, #1d4ed8 50%, #6d28d9 100%); color: #fff; border-radius: var(--radius-xl); padding: var(--sp-8) var(--sp-6); position: relative; overflow: hidden; text-align: center; } .motm-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 60%, rgba(56,189,248,0.4) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(168,85,247,0.4) 0%, transparent 50%); pointer-events: none; } .motm-card > * { position: relative; z-index: 1; } .motm-crown { font-size: 1.75rem; margin-bottom: var(--sp-1); display: block; } .motm-title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.65; margin-bottom: var(--sp-1); } .motm-name { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-1); letter-spacing: -0.02em; } .motm-reason { font-size: var(--text-xs); opacity: 0.8; } .motm-avatar { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 500; margin: 0 auto var(--sp-3); border: 3px solid rgba(255,255,255,0.5); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } /* ===================================================== Gamification — Taler Rain Animation ===================================================== */ #taler-rain-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; overflow: hidden; } .taler-coin { position: absolute; top: -60px; font-size: 1.5rem; animation: talerFall linear forwards; opacity: 0; user-select: none; } @keyframes talerFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ===================================================== Newsletter Admin ===================================================== */ .newsletter-preview { background: var(--bg-secondary); border: 1px solid var(--separator-opaque); border-radius: var(--radius-md); padding: var(--sp-6); font-size: var(--text-sm); line-height: 1.7; max-height: 300px; overflow-y: auto; } .newsletter-stats { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-4); } .newsletter-stat { text-align: center; } .newsletter-stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); letter-spacing: -0.04em; } .newsletter-stat-label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } /* ===================================================== Donation / Spenden ===================================================== */ .donation-amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); } .donation-amount-btn { padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--separator-opaque); border-radius: var(--radius-md); background: var(--bg-card); font-size: var(--text-base); font-weight: 500; color: var(--text-primary); cursor: pointer; text-align: center; transition: all var(--transition); } .donation-amount-btn:hover, .donation-amount-btn.is-active { border-color: var(--color-primary); background: rgba(13,148,136,0.08); color: var(--color-primary); } /* ===================================================== Print ===================================================== */ @media print { /* Komplettes Chrome global im Druck ausblenden, egal aus welchem Bereich der User druckt. .adm-sidebar war hier vorher nicht gelistet, dadurch wurde die Admin-Sidebar in allen Druckansichten mitgedruckt. */ .header, .footer, .dashboard-sidebar, .adm-sidebar, .adm-sidebar-overlay, .adm-sidebar-toggle, .adm-sidebar-close, .portal-sidebar, .member-bottom-nav, .member-mobile-nav, .member-mobile-nav-inner, .menu-toggle, .btn, .theme-toggle, .member-header, .admin-header, .admin-nav, .admin-footer, nav, header, footer { display: none !important; } /* Flex-/Grid-Wrapper aufloesen, damit der Content auf jeder Seite die volle Druckbreite bekommt, nicht nur die Spalte neben der ausgeblendeten Sidebar. */ .adm-layout, .portal-layout { display: block !important; } .adm-body, .portal-content { flex: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .main { padding: 0 !important; } .card { box-shadow: none; border: 1px solid #ddd; } body { background: #fff; color: #000; } } /* ═══════════════════════════════════════════════════════════════════ * Q98 — TYPOGRAFIE-CASCADE (konsolidiert, 24.05.2026) * ──────── * Ersetzt die alten Max-Polish-Stapel (Q27/Q44/Q83/Q94/Q96/Q97). * Single source of truth für Heading-Gewichte, Farben, Navi & Card-Header. * Nutzt die --fw-* Tokens aus :root. Wer hier etwas ändert, ändert es * an EINER Stelle — nicht in fünf widersprechenden Blöcken. * * Regeln: * • Headings: var(--fw-semibold) = 600 — NIE 700/800 * • Body: var(--fw-regular) = 400 * • KPI-Zahlen/Beträge: var(--fw-bold) = 700 (Ausnahme) * • Strong/b: var(--fw-semibold) — kein extrabold * • Letter-spacing leicht negativ bei großen Headings (Max-Stil) * • !important nur wo Inline-Styles auf Seiten überschrieben werden müssen * ═══════════════════════════════════════════════════════════════════ */ /* ─── Headings: einheitlich semibold, gedämpfte Farbe ─────────────── */ h1, h2, h3, h4, h5, h6, h1[style], h2[style], h3[style], h4[style], h5[style], h6[style], .page-title, .card-title, .sec-title, .sec-heading, .lp-section-title, .lp-section-eyebrow, .lp-hero-h1, .lp-hero-sub, .lp-banner-h2, .lp-banner-p, .lp-step-title, .lp-feat-title, .lp-about-text, .how-step-title, .mb-section-title, .mb-hero h1, .team-name { font-weight: var(--fw-semibold) !important; color: var(--text-primary); } h1, .page-title, .lp-hero-h1 { letter-spacing: -0.025em; } h2, .lp-banner-h2 { letter-spacing: -0.02em; } h3 { letter-spacing: -0.015em; } h4, h5, h6 { letter-spacing: -0.01em; } /* Hellmodus: konkrete Max-Anthrazitfarbe statt pures Schwarz */ h1, h2, h3, h4, h5, h6, .page-title, .card-title { color: #1d1d1f; } /* Dark-Mode: Headings hellweiß */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .page-title, [data-theme="dark"] .card-title { color: #f5f5f7 !important; } /* ─── Body-Text smoothing ─────────────────────────────────────────── */ body, p, li, span:not([class*="badge"]):not([class*="num"]) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Strong/b dürfen nicht extrabold sein */ strong, b { font-weight: var(--fw-semibold) !important; } /* ─── Eyebrow-Labels (kleine Caps über Headings) ──────────────────── */ .lp-section-eyebrow, .sec-label, .aktuell-label, .mb-section-title { font-weight: var(--fw-semibold) !important; letter-spacing: 0.08em !important; } /* ─── KPI-Zahlen / Statistiken (einzige Ausnahme für 700) ─────────── */ .kpi-num, .db-card-num, .lp-stat-num, .lp-step-num, .how-step-num, .ov-chip-num, .ab-kpi-num, .stat-num, .newsletter-stat-value { font-weight: var(--fw-bold) !important; letter-spacing: -0.03em; } /* ─── Page-Content (AGB, Datenschutz, Impressum) ──────────────────── */ .page-content h1, .page-content h2, .page-content h3, .page-content h4 { font-weight: var(--fw-semibold) !important; color: var(--text-primary) !important; letter-spacing: -0.015em !important; } .page-content p, .page-content li { color: var(--text-secondary) !important; font-weight: var(--fw-regular) !important; } /* ─── Public-Header Logo (Tauschring Unna e.V. in einer Zeile) ───── */ .header .logo .logo-img, .header .logo-img { height: 78px !important; } @media (max-width: 768px) { .header .logo .logo-img, .header .logo-img { height: 60px !important; } } @media (max-width: 480px) { .header .logo .logo-img, .header .logo-img { height: 48px !important; } .header .logo-wordmark > span:first-child { font-size: 1rem !important; } .header .logo-wordmark > span:last-child { font-size: 0.78rem !important; } } /* ─── Public-Header Navi-Links ────────────────────────────────────── */ .header .nav-link { color: rgba(255, 255, 255, 0.92) !important; font-weight: var(--fw-medium) !important; letter-spacing: 0 !important; } .header .nav-link:hover { color: #fff !important; font-weight: var(--fw-semibold) !important; background: rgba(255,255,255,0.12) !important; } /* Active-State: teal-Schrift auf weißer Pille (Q97 — vorher unsichtbar weiß-auf-weiß) */ .header .nav-link.is-active { color: var(--color-primary) !important; background: #fff !important; font-weight: var(--fw-semibold) !important; } /* ─── Card-Header: clean weiß/dunkel statt Türkis-Banner ──────────── */ .card-header { background: var(--bg-card) !important; border-bottom: 1px solid var(--separator) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } .card-title { color: var(--text-primary) !important; font-weight: var(--fw-semibold) !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: var(--text-base) !important; } .card-header a, .card-header .card-link { color: var(--color-primary) !important; } .card-header .badge { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; border: 1px solid rgba(13,148,136,0.3) !important; } .card-header .btn-outline { background: transparent !important; border-color: var(--separator) !important; color: var(--text-primary) !important; } .card-header .btn-outline:hover { background: var(--bg-secondary) !important; } .card-header select, .card-header .ev-select { background: var(--bg-secondary) !important; border-color: var(--separator) !important; color: var(--text-primary) !important; } /* ─── Dark-Mode: Footer-Text klar lesbar ──────────────────────────── */ [data-theme="dark"] .footer, [data-theme="dark"] .footer * { color: var(--text-secondary); } [data-theme="dark"] .footer .footer-title, [data-theme="dark"] .footer strong, [data-theme="dark"] .footer h1, [data-theme="dark"] .footer h2, [data-theme="dark"] .footer h3 { color: var(--text-primary); } [data-theme="dark"] .footer .footer-link { color: rgba(235, 235, 245, 0.65); } [data-theme="dark"] .footer .footer-link:hover { color: var(--text-primary); } /* Dark-Mode: Inline-Style mit --text-* korrekt übernehmen */ [data-theme="dark"] [style*="color:var(--text-primary)"], [data-theme="dark"] [style*="color: var(--text-primary)"] { color: var(--text-primary) !important; } [data-theme="dark"] [style*="color:var(--text-secondary)"], [data-theme="dark"] [style*="color: var(--text-secondary)"] { color: var(--text-secondary) !important; } /* ===================================================== Senior-Modus: nur im Member-Bereich aktiv — niemals im Admin ===================================================== */ /* Admin-Layout: data-senior gilt nicht. admin.css wird im Admin-Header geladen — falls dort selbst kein Senior-CSS definiert ist, blockt diese Regel die Member-Senior-CSS die durch style.css/member.css importiert werden könnten. */ body.admin-body [data-senior="1"], .admin-body [data-senior="1"], html[data-senior="1"] body.admin-body { font-size: inherit !important; } /* ===================================================== Admin Nachrichten-Badge (Q39) — heller Stil für teal-Header ===================================================== */ .adm-msg-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; text-decoration: none; transition: background .12s, border-color .12s; flex-shrink: 0; } .adm-msg-badge:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5); color: #fff; } .adm-msg-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: #ef4444; color: #fff; border-radius: 99px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #0D9488; line-height: 1; } /* ===================================================== Custom CSS-Tooltip (Q40, S42-refined) — bleibt waehrend Hover sichtbar. Maximilian-Feedback: "Tooltip bei Hover weg" — fruehere Version verschwand zu schnell beim Mausbewegen. Loesung: - Bridge-Element ::before (transparent) fuellt die Luecke zwischen Trigger und Tooltip — Cursor bleibt im Hover-Bereich - Tooltip naeher dran (bottom: -28px statt -32px) - Sanftere Transitions mit kleinem Out-Delay damit das Tooltip nach dem Verlassen kurz haengen bleibt (200ms) ===================================================== */ .has-tip { position: relative; } /* Unsichtbare Bruecke unter dem Trigger, damit der Cursor das Tooltip "erreichen" kann ohne aus dem Hover-Bereich zu fallen */ .has-tip::before { content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 60px; height: 14px; pointer-events: none; opacity: 0; } .has-tip::after { content: attr(data-tip); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%) translateY(-2px); background: rgba(28,28,30,0.94); color: #fff; font-size: 0.72rem; font-weight: 500; padding: 0.3rem 0.6rem; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.18); transition: opacity .15s ease .2s, transform .15s ease .2s; z-index: 1000; } .has-tip:hover::before, .has-tip:focus-visible::before { pointer-events: auto; opacity: 1; } .has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0s; } @media (max-width: 640px) { .has-tip::after, .has-tip::before { display: none; } } /* ═══════════════════════════════════════════════════════════════════ * Q83 — Max-Polish Final Pass (24.05.2026) * Maximilian: "Max-Design sauber auf alles anwenden, super profi * aussehen". Globale Refinements als letzter Cascade-Schritt — wirkt * auf alle Seiten ohne file-by-file Eingriffe. * * Prinzipien: * - Border-Radius einheitlich (10px Karten, 12px Modals, 999px Pills) * - Buttons: weicher, kein hartes Schwarz, klare Focus-Ringe * - Inputs: einheitliche Höhe, subtle Focus-Ring (kein harter Border-Sprung) * - Schatten: subtile Max-Layer (kein "Cartoon-Drop") * - Übergänge: 120-160ms cubic-bezier (Max-Default) * ═══════════════════════════════════════════════════════════════════ */ /* ─── Body-Grundfarben weicher ─── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } /* ─── Buttons: konsistent runde Ecken, weicher Hover ─── */ .btn, button.btn, a.btn { border-radius: 10px; font-weight: 500; letter-spacing: -0.005em; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(13,148,136,0.15); } .btn-primary:hover { background: #0F766E; border-color: #0F766E; color: #fff; box-shadow: 0 4px 12px rgba(13,148,136,0.22); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(13,148,136,0.15); } .btn-secondary, .btn-outline, .btn-ghost { background: var(--bg-secondary); border: 1px solid var(--separator-opaque); color: var(--text-primary); } .btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover { background: var(--bg-tertiary); border-color: var(--color-primary); color: var(--color-primary); } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.82rem; border-radius: 8px; } .btn-lg { padding: 0.7rem 1.5rem; font-size: 0.95rem; border-radius: 12px; } .btn-block { width: 100%; text-align: center; justify-content: center; } /* ─── Form-Inputs: subtle Focus-Ring statt harter Color-Sprung ─── */ .form-input, .form-select, .form-textarea, input[type="text"]:not(.kat-inp):not(.bill-inp):not(.pw-input), input[type="email"], input[type="password"]:not(.pw-input), input[type="number"]:not(.bill-inp):not(.kat-inp), input[type="tel"], input[type="search"], input[type="date"], input[type="datetime-local"], select:not(.kat-inp), textarea:not(.kat-inp) { border-radius: 9px; border: 1px solid var(--separator-opaque); background: var(--bg-card); color: var(--text-primary); transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; font-family: inherit; } .form-input:focus, .form-select:focus, .form-textarea:focus, input[type="text"]:not(.kat-inp):not(.bill-inp):not(.pw-input):focus, input[type="email"]:focus, input[type="password"]:not(.pw-input):focus, input[type="number"]:not(.bill-inp):not(.kat-inp):focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, select:not(.kat-inp):focus, textarea:not(.kat-inp):focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13,148,136,0.15); background: var(--bg-card); } /* ─── Abschnitts-Layout (Maximilian 21.07.2026) ─── Muster fuer jede Ansicht mit mehreren Karten: benannte Abschnitte untereinander, darin hoechstens zwei gleich hohe Karten nebeneinander, Seltenes oder Heikles ganz unten ueber die volle Breite. Nie zwei ungleich lange Kartenspalten. */ .pg-sec { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin: 1.5rem 0 .55rem; } .pg-sec:first-of-type { margin-top: 0; } .pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; } .pg-two > .card, .pg-two > * { margin-bottom: 0; } .pg-two > .card { height: 100%; } @media (max-width: 820px) { .pg-two { grid-template-columns: 1fr; } } /* ─── Cards: hairline border + subtle shadow ─── Durchscheinend statt deckend weiss (Maximilian 21.07.2026), damit der Marken-Hintergrund mit dem Logo-Muster ueberall sichtbar bleibt. Wer eine wirklich deckende Flaeche braucht (Editor-Vorschauen, Druckansichten), setzt sie an der Stelle selbst. */ .card { border-radius: 12px; border: 1px solid rgba(13,148,136,0.2); background: rgba(13,148,136,0.05); box-shadow: none; overflow: hidden; } /* Die Kopfzeile hat eine eigene Flaeche, sonst bliebe der obere Teil weiss. */ .card > .card-header { background: transparent !important; border-bottom-color: rgba(13,148,136,0.2) !important; } [data-theme="dark"] .card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); box-shadow: none; } [data-theme="dark"] .card > .card-header { border-bottom-color: rgba(255,255,255,0.12) !important; } @media print { /* Im Druck keine getoente Flaeche, sonst zieht der Drucker sie mit. */ .card { background: #fff !important; border-color: #ddd !important; } } /* ─── Tabellen: weicher, Max-Style hairline ─── */ table { border-collapse: separate; border-spacing: 0; } table th { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); text-align: left; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--separator); background: var(--bg-secondary); } table td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--separator); font-size: 0.85rem; color: var(--text-primary); } table tbody tr:last-child td { border-bottom: none; } table tbody tr { transition: background .1s ease; } table tbody tr:hover td { background: var(--bg-secondary); } /* ─── Badges/Pills: einheitlich gerundet, dezente Farben ─── */ .badge, [class*="badge-"] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; line-height: 1.4; } .badge-primary, .badge-secondary { background: rgba(13,148,136,0.09); color: var(--color-primary); border: 1px solid rgba(13,148,136,0.22); } .badge-success { background: rgba(52,199,89,0.10); color: #15803d; border: 1px solid rgba(52,199,89,0.22); } .badge-warning { background: rgba(255,159,10,0.12); color: #b45309; border: 1px solid rgba(255,159,10,0.28); } .badge-danger { background: rgba(255,59,48,0.10); color: #b91c1c; border: 1px solid rgba(255,59,48,0.25); } [data-theme="dark"] .badge-success { color: #4ade80; } [data-theme="dark"] .badge-warning { color: #fbbf24; } [data-theme="dark"] .badge-danger { color: #fca5a5; } /* ─── Alerts: weiche Pastell-Töne, klare Hierarchy ─── */ .alert { border-radius: 10px; border: 1px solid; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5; } .alert-success { background: rgba(52,199,89,0.07); border-color: rgba(52,199,89,0.25); color: #15803d; } .alert-danger, .alert-error { background: rgba(255,59,48,0.06); border-color: rgba(255,59,48,0.22); color: #b91c1c; } .alert-warning { background: rgba(255,159,10,0.08); border-color: rgba(255,159,10,0.28); color: #b45309; } .alert-info { background: rgba(13,148,136,0.06); border-color: rgba(13,148,136,0.22); color: var(--color-primary); } [data-theme="dark"] .alert-success { color: #86efac; } [data-theme="dark"] .alert-danger { color: #fca5a5; } [data-theme="dark"] .alert-warning { color: #fcd34d; } /* ─── Links ─────────────────────────────────────────────────────────── Das helle Teal #0D9488 kam auf Weiss nur auf Kontrast 3.74, das Minimum fuer Text sind 4.5. Deshalb tragen Links das dunklere #0F766E (5.47 zu Weiss, 3.07 zum Fliesstext), und im Fliesstext sind sie zusaetzlich unterstrichen. Farbe allein reicht nicht, wer sie schlecht unterscheidet sieht sonst gar keinen Link (Maximilian 29.07.2026). */ a:not(:where(.btn, [class*="btn"], .nav-link, .portal-sidebar-link, .member-nav-link, .sb-link, .admin-nav-link, .footer-link, .int-chip, .int-take, .int-link, .mb-offer, .mb-news-card, .mb-event, .db-quick-item)) { color: var(--link-color); text-decoration: none; transition: color .12s ease, opacity .12s ease; } /* Links mitten im Text bekommen einen dezenten Strich, damit man sie als Link erkennt und nicht nur als eingefaerbtes Wort. Knoepfe, Karten und Menuepunkte sind davon ausgenommen, die erkennt man an ihrer Form. */ /* Nur echter Fliesstext. Menuepunkte stehen in

und sollen keinen Strich bekommen, deshalb ist

hier bewusst nicht dabei, sondern nur innerhalb der Inhaltsbereiche. */ p a, blockquote a, dd a, .news-content a, .news-content li a, .news-content td a, .page-content a, .page-content li a, .cms-content a, .cms-content li a, .pb-text a, .pb-text li a, .mbr-text a, .db-news-text a, .kb-article a, .kb-article li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--link-strich); } p a:hover, blockquote a:hover, dd a:hover, .news-content a:hover, .page-content a:hover, .cms-content a:hover, .pb-text a:hover, .kb-article a:hover { text-decoration-color: currentColor; } /* Ausnahmen: was im Text steht, aber wie ein Knopf oder eine Kachel aussieht */ p a.btn, p a[class*="btn"], li a.btn, li a[class*="btn"], p a.nav-link, p a.footer-link, p a.pub-nav-item, p a.news-btn, p a.news-btn-img, .news-content a.news-btn, .news-content a.news-btn-img, p a.chip, li a.chip { text-decoration: none; } a:not(:where(.btn, [class*="btn"], .nav-link, .portal-sidebar-link, .member-nav-link, .sb-link, .admin-nav-link, .footer-link, .int-chip, .int-take, .int-link, .mb-offer, .mb-news-card, .mb-event, .db-quick-item)):hover { text-decoration: underline; text-underline-offset: 2px; } /* ─── Modals: kompakter, klar gerundet ─── */ .modal-box, .modal-content, .hb-modal { border-radius: 14px; border: 1px solid var(--separator); box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.08); } .modal-header { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--separator); } .modal-body { padding: 1rem 1.25rem; } .modal-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--separator); background: var(--bg-secondary); } /* ─── Scroll-Bar dezent (WebKit) ─── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); } /* ─── Selection-Color subtil teal statt harsh blau ─── */ ::selection { background: rgba(13,148,136,0.22); color: var(--text-primary); } /* ─── Focus-Visible (Tastatur-Navigation, Max-Style Ring) ─── */ *:focus-visible { outline: 2px solid rgba(13,148,136,0.55); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible, a.btn:focus-visible { outline-offset: 3px; } /* ─── Trennlinien: hairline statt fett ─── */ hr { border: none; height: 1px; background: var(--separator); margin: 1.25rem 0; } /* ─── Code/Mono falls verwendet ─── */ code, kbd, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; } code { background: var(--bg-secondary); padding: 0.1rem 0.35rem; border-radius: 4px; border: 1px solid var(--separator); } /* ─── Print-Anpassung: keine Schatten/Hovers im Druck ─── */ @media print { *, *::before, *::after { box-shadow: none !important; transition: none !important; animation: none !important; } } /* Q96/Q98: Heading-Reset wurde in den konsolidierten Q98-Block oberhalb (vor "Q83 Max-Polish Final Pass") verschoben. Hier nichts mehr nötig. */ /* ═══════════════════════════════════════════════════════════════════ * R2 — Mobile Defensive Layer (25.05.2026) * * Greift typische Inline-Layout-Anti-Patterns ab, die auf < 480 px * zu unbenutzbaren Mikro-Kacheln oder horizontal-scrollenden Tabellen * führen. Wirkt OHNE jede einzelne Datei anfassen zu müssen. * * Trigger ist Attribut-Selektor auf style="..." — gewinnt damit * gegen Inline-Werte trotz gleicher Spezifität (Reihenfolge im DOM). * ═══════════════════════════════════════════════════════════════════ */ /* ─── ≤ 480 px (Phone hochkant) ─── */ @media (max-width: 480px) { /* KPI-Grids mit 5-6 Spalten → 2 Spalten */ [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"], [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 4-Spalten-Grids → 2 Spalten */ [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 3-Spalten Inline-Grids: bestehende Regel Z. 1929 macht "1 Spalte". Wir lassen das so — für KPI-Trio-Aufteilung (z.B. R1 HT-Bilanz) stacken 3 lange Kacheln untereinander besser als 2 enge nebeneinander. */ /* Tabellen-Wrapper: lange Tabellen scrollen horizontal statt zu überlaufen */ .container table, .card table, main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Touch-Targets: alle .btn / a.btn auf min 40 px Höhe */ .btn, a.btn, button.btn { min-height: 40px; } /* Inline-style display:flex mit gap < 0.5rem auf 0.5rem hoch */ [style*="display:flex"][style*="gap:0.25rem"], [style*="display:flex"][style*="gap: 0.25rem"] { gap: 0.5rem !important; } } /* ─── ≤ 640 px (Phone querformat + kleine Tablets) ─── */ @media (max-width: 640px) { /* 6-Spalten-Grids → 3 Spalten */ [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Page-Title-Header (h1 + Subtitle in einer Zeile) → stacken */ .page-header { flex-wrap: wrap !important; } /* lange dashboard-style Zeilen (display:flex justify-content:space-between) → stacken */ [style*="display:flex"][style*="justify-content:space-between"]:has(> *:nth-child(3)) { flex-wrap: wrap !important; row-gap: 0.5rem; } } /* ─── ≤ 768 px (Phones + iPad portrait) ─── */ @media (max-width: 768px) { /* Container-Padding etwas reduzieren damit Karten näher am Rand sind */ .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Modals nutzen volle Breite minus kleinem Rand */ .modal-content, .modal-box { max-width: calc(100vw - 1.5rem) !important; margin: 0.5rem auto !important; } /* Form-Inputs mind 16 px Font-Size — iOS zoomt sonst beim Focus */ input, select, textarea, .form-input, .form-select, .form-textarea { font-size: 16px !important; } } /* ═══════════════════════════════════════════════════════════════════ * S2 — Mobile-Slide-Down Nav: Links lesbar machen (Hubertus 26.05.2026) * * Bug: Q98 setzte .header .nav-link { color: rgba(255,255,255,0.92) } * für die teal-Header-Variante (Desktop). Auf Mobile öffnet sich * .nav als weißes Slide-Down-Panel mit bg-primary — weiße Schrift * auf weißem Grund = unsichtbar. Bild zeigte "leere Seite" weil nur * der aktive Link (teal-Highlight) sichtbar war. * ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* Slide-Down-Variante: dunkle Schrift auf hellem Panel */ .header .nav.is-open .nav-link { color: var(--text-primary) !important; font-weight: var(--fw-medium) !important; background: transparent !important; } .header .nav.is-open .nav-link:hover { background: var(--bg-secondary) !important; color: var(--color-primary) !important; } .header .nav.is-open .nav-link.is-active { color: var(--color-primary) !important; background: rgba(13,148,136,0.08) !important; font-weight: var(--fw-semibold) !important; } /* Im Dark-Mode: Slide-Down hat dunklen bg → helle Schrift */ [data-theme="dark"] .header .nav.is-open .nav-link { color: var(--text-primary) !important; } } /* ===================================================================== * S47 — App-weite Mobile-Card-Komponenten (Maximilian-Standard) * * Baut auf dem Member-Dashboard-Look (Julian-Test 25.05.2026): * - KPI-Cards: groß, klickbar, mint-akzentuiert * - Neuigkeiten-Strip: 3 News-Cards nebeneinander, scrollbar mobile * - Schnellzugriff: Tile-Grid mit Icon + Label * - Page-Head: H1 + Datum-Subtitle, einheitlich * * Anwendung: in jeder Seite die diese Komponenten braucht einfach die * Klassen referenzieren. Anpassungen zentral hier — nicht inline. * ===================================================================== */ /* Page-Head — H1 + Untertitel/Datum */ .app-page-head { margin-bottom: 1.25rem; } .app-page-head h1 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; margin: 0 0 0.2rem; } .app-page-head .app-page-sub { font-size: 0.8rem; color: var(--text-tertiary); font-weight: 400; margin: 0; } /* KPI-Grid: 2 Spalten mobile, 4 Spalten ab Tablet */ .app-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .app-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } } @media (min-width: 1024px) { .app-kpi-grid.app-kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* KPI-Card */ .app-kpi-card { display: block; background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-lg); padding: 1rem 1.125rem; text-decoration: none !important; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer; min-height: 88px; display: flex; flex-direction: column; justify-content: center; } .app-kpi-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(13,148,136,0.10); transform: translateY(-1px); } .app-kpi-card .app-kpi-val { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--color-primary); } .app-kpi-card .app-kpi-val-zero { color: var(--text-tertiary); } .app-kpi-card .app-kpi-val-success { color: var(--color-success, #16a34a); } .app-kpi-card .app-kpi-val-warn { color: #d97706; } .app-kpi-card .app-kpi-val-info { color: var(--color-secondary); } .app-kpi-card .app-kpi-label { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); margin-top: 0.2rem; letter-spacing: 0; } /* Section-Eyebrow (kleines uppercase Label über einer Sektion) */ .app-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.625rem; } .app-sec-eyebrow { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } .app-sec-link { font-size: 0.78rem; color: var(--color-primary); text-decoration: none; font-weight: 500; } .app-sec-link:hover { text-decoration: underline; } /* News-Strip — 3 Karten nebeneinander, mobile horizontal scroll */ .app-news-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 1.5rem; } @media (max-width: 640px) { .app-news-strip { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.5rem; } .app-news-strip::-webkit-scrollbar { display: none; } .app-news-strip > .app-news-card { flex: 0 0 220px; } } .app-news-card { background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-lg); padding: 0.875rem 1rem; text-decoration: none !important; color: inherit; display: flex; flex-direction: column; gap: 0.4rem; transition: border-color .15s, box-shadow .15s; position: relative; } .app-news-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .app-news-card .app-news-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; } .app-news-card .app-news-date { font-size: 0.7rem; color: var(--text-tertiary); font-weight: 500; } .app-news-card .app-news-title { font-size: 0.825rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-news-card .app-news-badge { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--color-primary); color: #fff; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 99px; } /* Schnellzugriff-Grid — Action-Tiles, Icon + Label */ .app-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } @media (min-width: 480px) { .app-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 640px) { .app-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 900px) { .app-quick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.625rem; } } @media (min-width: 1280px){ .app-quick-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .app-quick-grid.app-quick-grid-wide { /* für Admin: mehr Tiles */ } @media (min-width: 1280px){ .app-quick-grid.app-quick-grid-wide { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .app-quick-tile { background: var(--bg-card); border: 1px solid var(--separator-opaque); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(11,74,70,0.05); padding: 1rem 0.75rem; text-decoration: none !important; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 92px; } .app-quick-tile:hover { border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(13,148,136,0.10); transform: translateY(-1px); } .app-quick-tile .app-quick-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: color .15s; } .app-quick-tile:hover .app-quick-icon { color: var(--color-primary); } .app-quick-tile .app-quick-label { font-size: 0.78rem; font-weight: 500; color: var(--text-primary); letter-spacing: 0; line-height: 1.2; } /* Akzent-Variante (NEU/CTA-Tiles) */ .app-quick-tile.is-accent { background: rgba(13,148,136,0.06); border-color: rgba(13,148,136,0.2); } .app-quick-tile.is-accent .app-quick-icon, .app-quick-tile.is-accent .app-quick-label { color: var(--color-primary); } .app-quick-tile.is-accent:hover { background: rgba(13,148,136,0.10); border-color: var(--color-primary); } /* Inline Pending-Pille — über dem Header für „X Anträge wartet auf Dich" */ .app-pending-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.875rem; } .app-pending-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.875rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; text-decoration: none !important; transition: background .15s; } .app-pending-pill.is-warn { background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.3); color: #d97706 !important; } .app-pending-pill.is-warn:hover { background: rgba(255,159,10,0.16); } .app-pending-pill.is-info { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.25); color: #7c3aed !important; } .app-pending-pill.is-info:hover { background: rgba(124,58,237,0.14); } .app-pending-pill.is-mint { background: rgba(13,148,136,0.08); border: 1px solid rgba(13,148,136,0.25); color: var(--color-primary) !important; } .app-pending-pill.is-mint:hover { background: rgba(13,148,136,0.14); } /* ===================================================================== * S47c — Admin-Listen-Karten (.app-list-card) * * Ersatz fuer Tabellen in Admin-Verwaltungs-Seiten (Inserate, Mitglieder, * etc.). Horizontale Karte mit Icon links, Hauptinhalt mittig, Status-Pill * + Aktionen rechts. Bricht auf Mobile in mehrzeiliges Layout um. * ===================================================================== */ .app-list { display: flex; flex-direction: column; gap: 0.5rem; } .app-list-card { display: grid; grid-template-columns: auto 1fr auto; gap: 0.875rem; align-items: center; background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-lg); padding: 0.875rem 1rem; transition: border-color .15s, box-shadow .15s; } .app-list-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .app-list-card .alc-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; } .app-list-card .alc-icon.is-request { color: #6366f1; background: rgba(99,102,241,0.08); } .app-list-card .alc-body { min-width: 0; } .app-list-card .alc-row1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; } .app-list-card .alc-type-badge { display: inline-flex; align-items: center; background: rgba(13,148,136,0.10); color: var(--color-primary); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 10px; } .app-list-card .alc-type-badge.is-request { background: rgba(99,102,241,0.10); color: #6366f1; } .app-list-card .alc-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0.15rem 0 0.2rem; letter-spacing: -0.01em; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-list-card .alc-title.is-empty { color: var(--text-tertiary); font-style: italic; font-weight: 500; } .app-list-card .alc-meta { font-size: 0.75rem; color: var(--text-tertiary); display: flex; gap: 0.625rem; flex-wrap: wrap; } .app-list-card .alc-meta span { white-space: nowrap; } .app-list-card .alc-meta .alc-meta-strong { color: var(--text-secondary); font-weight: 500; } .app-list-card .alc-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .app-list-card .alc-status { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); white-space: nowrap; } .app-list-card .alc-status.is-active { background: rgba(16,185,129,0.10); color: #047857; } .app-list-card .alc-status.is-paused { background: rgba(245,158,11,0.10); color: #b45309; } .app-list-card .alc-status.is-done { background: rgba(99,102,241,0.10); color: #4338ca; } .app-list-card .alc-status.is-expired { background: rgba(107,114,128,0.10); color: #4b5563; } .app-list-card .alc-status.is-blocked { background: rgba(220,38,38,0.10); color: #b91c1c; } .app-list-card .alc-status.is-inactive { background: rgba(107,114,128,0.10); color: #6b7280; } .app-list-card .alc-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-md); border: 1px solid var(--separator-opaque); background: var(--bg-card); color: var(--text-secondary) !important; cursor: pointer; text-decoration: none !important; transition: all .12s; } .app-list-card .alc-btn:hover { border-color: var(--color-primary); color: var(--color-primary) !important; background: rgba(13,148,136,0.04); } .app-list-card .alc-btn.is-danger { color: #dc2626 !important; border-color: rgba(220,38,38,0.3); } .app-list-card .alc-btn.is-danger:hover { background: rgba(220,38,38,0.06); border-color: #dc2626; } /* Mobile: zweizeilig (Icon + Body oben, Actions unten) */ @media (max-width: 640px) { .app-list-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.625rem; } .app-list-card .alc-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 0.4rem; border-top: 1px solid var(--separator); } } /* Filter-Pillen — wiederverwendbarer Toggle-Style */ .app-filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; align-items: center; } .app-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 500; color: var(--text-secondary) !important; background: var(--bg-secondary); border: 1px solid var(--separator-opaque); border-radius: var(--radius-full); text-decoration: none !important; transition: all .12s; white-space: nowrap; } .app-filter-pill:hover { background: var(--bg-card); color: var(--text-primary) !important; border-color: var(--color-primary); } .app-filter-pill.is-active { background: var(--color-primary); color: #fff !important; border-color: var(--color-primary); font-weight: 600; } .app-filter-pill .alc-count { font-size: 0.68rem; background: rgba(0,0,0,0.08); padding: 0.05rem 0.4rem; border-radius: 20px; font-weight: 700; } .app-filter-pill.is-active .alc-count { background: rgba(255,255,255,0.25); color: #fff; } /* Search-Pille (kompakt, fuer Admin-Listen) */ .app-search-pill { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--separator-opaque); border-radius: var(--radius-full); padding: 0.25rem 0.25rem 0.25rem 0.875rem; max-width: 480px; width: 100%; transition: border-color .12s, box-shadow .15s; } .app-search-pill:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13,148,136,0.12); } .app-search-pill svg { color: var(--color-primary); opacity: 0.7; flex-shrink: 0; } .app-search-pill input { flex: 1; border: none; outline: none; font-size: 0.875rem; background: transparent; padding: 0.4rem 0.6rem; color: var(--text-primary); min-width: 0; } .app-search-pill input::placeholder { color: var(--text-tertiary); } .app-search-pill .app-search-submit { background: var(--color-primary); color: #fff; border: none; padding: 0.35rem 0.875rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .app-search-pill .app-search-submit:hover { filter: brightness(1.05); } /* ── Medien-Schutz (kosmetisch, wie iOS): Long-Press / Ziehen / Speichern erschweren ── Hinweis: kein echter Kopierschutz, ueber DevTools umgehbar. Verhindert nur versehentliches/bequemes Speichern. Text bleibt normal markierbar. */ img, video { -webkit-touch-callout: none; /* iOS: kein "Bild sichern"-Menue bei Long-Press */ -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; } /* Inserat-Beschreibung: saubere, kompakte Absatz-/Listenabstaende (HTML aus dem Editor) */ .listing-desc p { margin: 0 0 0.55rem; } .listing-desc p:last-child { margin-bottom: 0; } .listing-desc ul, .listing-desc ol { margin: 0.35rem 0 0.6rem; padding-left: 1.3rem; } .listing-desc li { margin: 0.1rem 0; } .listing-desc img { margin: 0.5rem 0; max-width: 100%; height: auto; border-radius: 8px; } .listing-desc br { line-height: 1.4; } /* Glas-Karten News-Liste: Dark-Mode-Gegenstueck zu den Inline-Styles (23.07.2026) */ [data-theme="dark"] .nw-item { background: rgba(28,28,30,0.5) !important; border-color: rgba(255,255,255,0.12) !important; } /* ══ Gefuellte Knoepfe etwas leichter, auch im oeffentlichen Bereich ══ Maximilian 06.08.2026: das tiefe Teal schlug zu hart auf. Der Ton ist jetzt eine Spur heller. Die Schrift steht auf 600, damit sie auf der helleren Flaeche gut lesbar bleibt. ═══════════════════════════════════════════════════════════════════ */ .btn-primary, button.btn-primary, a.btn-primary, .header-btn-primary, .hero .btn-primary { background: #17A093 !important; border-color: #17A093 !important; color: #fff !important; font-weight: 600; } .btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover, .header-btn-primary:hover { background: #14958A !important; border-color: #14958A !important; }