/** * 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; --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; --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(--color-primary); 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 */ } .menu-toggle:hover { background: rgba(13,148,136,0.25); border-color: var(--color-primary); color: #fff; } /* Nav — mobile first: clean white/dark slide-down panel */ .nav { display: none; position: fixed; inset: 56px 0 0 0; background: var(--bg-primary); padding: 0; overflow-y: auto; border-top: 1px solid var(--separator); z-index: calc(var(--z-sticky) - 1); background-color: var(--bg-primary); /* deckend, KEIN backdrop-filter (Safari scroll-hop liess Inhalt durchblitzen) */ } .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: var(--bg-secondary); text-decoration: none; opacity: 1; } .nav-link.is-active { color: var(--color-primary); font-weight: 600; background: var(--bg-secondary); } /* 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 { background: rgba(13,148,136,0.08); 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) ===================================================== */ /* 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; } } /* 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-img-public { height: 56px; } .logo-wordmark-public .logo-name { font-size: 1.15rem; } .logo-wordmark-public .logo-ev { font-size: 0.85rem; } /* S66 v2: Nav-Links kompakter im 1280-1439px Range damit User-Menu Platz hat. Vorher 0.4rem 0.65rem = oft zu breit → Items rutschen rüber. */ .nav-link { padding: 0.4rem 0.55rem; font-size: 0.82rem; } /* 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); background: var(--bg-card); border-top: 1px solid var(--separator); padding: var(--sp-2) 0; z-index: 200; } .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); } /* ─── Cards: hairline border + subtle shadow ─── */ .card { border-radius: 12px; border: 1px solid var(--separator); background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,0.025); overflow: hidden; } [data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,0.2); border-color: var(--separator-opaque); } /* ─── 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: Max-Stil (kein hartes Underline by default) ─── */ a:not(.btn):not([class*="btn"]):not(.nav-link):not(.portal-sidebar-link):not(.member-nav-link):not(.sb-link):not(.admin-nav-link):not(.footer-link):not(.int-chip):not(.int-take):not(.int-link):not(.mb-offer):not(.mb-news-card):not(.mb-event) { color: var(--color-primary); text-decoration: none; transition: color .12s ease, opacity .12s ease; } a:not(.btn):not([class*="btn"]):not(.nav-link):not(.portal-sidebar-link):not(.member-nav-link):not(.sb-link):not(.admin-nav-link):not(.footer-link):not(.int-chip):not(.int-take):not(.int-link):not(.mb-offer):not(.mb-news-card):not(.mb-event):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.3rem 0.5rem 0.3rem 1rem; 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; }