/** * formstube · Controlling-Dashboard · App-CSS * ═══════════════════════════════════════════════════════════════════ * Brand-konsistent zum Onepager. Self-contained, ohne dist/-Imports * weil wir auf eigener Subdomain laufen und die Foundation klein * halten wollen. */ :root { --ink: #0A0A0C; --charcoal: #151517; --graphite: #2A2C30; --stone: #888888; --mist: #E5E5E5; --paper: #F0F0F0; --accent: #D8FF3C; /* ★ Brand-Lime · UNVERHANDELBAR · Brand-Anker */ --accent-dim: #A8C82E; --line: #2A2C30; --fg: var(--paper); --fg-mute: #B5B5B5; --margin: clamp(20px, 4vw, 64px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hex-clip: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); --shadow-md: 0 4px 24px rgba(0,0,0,0.3); --shadow-lg: 0 16px 56px rgba(0,0,0,0.45); /* ─────────────────────────────────────────────────────────────── Welle 41.F.1 · Modul-Akzent-Foundation (2026-05-29) ────────────────────────────────────────────────────────────── Module dürfen ihren eigenen Identitäts-Akzent zeigen wenn der User in Settings "Modul-Farben" aktiviert hat. Default = Lime (Brand-konsistent). Settings-Toggle: `setting_key='module_colors_enabled'` (off|on). PFLICHT-PATTERN für Page-CSS: Modul-Identität (Eyebrow-strong, Hero-em, Card-Hex-Marker, NEU-Tags, Stats-Val, Progress-Gradient) → var(--module-accent) Brand-Anker (FAB, Primary-Buttons, Submit-Buttons, Status- Pills "active", Form-Focus, Lib-Cat-Active) → var(--accent) Marke fasert nie aus — CTAs sind und bleiben Lime. ────────────────────────────────────────────────────────────── */ --module-accent: var(--accent); --module-accent-dim: var(--accent-dim); --module-accent-ink: var(--ink); --module-accent-rgb: 216, 255, 60; /* für rgba()-Overlays */ /* Tier-Tokens (für Pack-Loot-Mode + Card-Tier-Coloring) ─────── */ --tier-common: #666666; --tier-rare: #00C4FF; /* Cyan */ --tier-epic: #B84CFF; /* Violet */ --tier-legendary: #FFB13C; /* Gold */ /* Modul-Akzent-Palette (Welle 41.F.1 · 2026-05-29) ──────────── */ --color-production: #7C3AED; /* Production-OS · Violet */ --color-production-dim: #5B21B6; --color-marketing: #00C4FF; /* Marketing-OS · Cyan */ --color-marketing-dim: #0284C7; } /* ───────────────────────────────────────────────────────────────── Modul-Overrides · NUR aktiv wenn html[data-module-colors="on"] Pages setzen ──────────────────────────────────────────────────────────────── */ html[data-module-colors="on"] body[data-module="production"] { --module-accent: var(--color-production); --module-accent-dim: var(--color-production-dim); --module-accent-ink: #ffffff; --module-accent-rgb: 124, 58, 237; } html[data-module-colors="on"] body[data-module="marketing"] { --module-accent: var(--color-marketing); --module-accent-dim: var(--color-marketing-dim); --module-accent-ink: var(--ink); --module-accent-rgb: 0, 196, 255; } /* Welle 48 NACHT-76+5 · FAB-Color folgt USER-MODUS (NICHT Page-Modul). --fab-bg wird über --module-accent dominieren in fs-tab-bar.css. data-fab-mode wird in head.php aus FabModes::getCurrentMode($userId) gesetzt. */ html[data-fab-mode="base"] { --fab-bg: var(--accent); --fab-bg-rgb: 216, 255, 60; } html[data-fab-mode="production"] { --fab-bg: var(--color-production); --fab-bg-rgb: 124, 58, 237; } html[data-fab-mode="marketing"] { --fab-bg: var(--color-marketing); --fab-bg-rgb: 0, 196, 255; } /* ───────────────────────────────────────────────────────────────── Welle 48.A Item 4 (2026-05-31 NACHT-76) · Active-Nav-Marker per Modul-Color statt Lime auf Modul-Pages. Greift auf .nav-link.is- active::before (Z.250) + .nav-link.is-active text-color (Z.245) + .nav-link--primary.is-active (Z.276) + .nav-hex (Z.265). ──────────────────────────────────────────────────────────────── */ html[data-module-colors="on"] body[data-module="production"] .nav-link.is-active, html[data-module-colors="on"] body[data-module="marketing"] .nav-link.is-active { color: var(--module-accent); background: rgba(var(--module-accent-rgb), 0.08); } html[data-module-colors="on"] body[data-module="production"] .nav-link.is-active::before, html[data-module-colors="on"] body[data-module="marketing"] .nav-link.is-active::before { background: var(--module-accent); } html[data-module-colors="on"] body[data-module="production"] .nav-link--primary.is-active, html[data-module-colors="on"] body[data-module="marketing"] .nav-link--primary.is-active { color: var(--module-accent); background: rgba(var(--module-accent-rgb), 0.10); } /* Primary-Hex-Glyph (Cockpit) bleibt LIME — Brand-Anker (BRAND_RULES) */ /* nav-hex bewusst NICHT überschrieben → Marke fasert nie aus */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--fg); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } /* ═══ FORM-ELEMENT FONT-INHERIT (Marc-Brand-Regel 2026-05-26) ═══ * Browser-Default für button/input/select/textarea ist Arial (Mac). * Ohne expliziten Reset rendert jedes "vergessene" Form-Element in * Arial → Brand-Bruch. Diese Regel zwingt alle Form-Elemente in * den Inter-Body-Font, sofern keine Component-Klasse das überschreibt. */ button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } .accent-dot { color: var(--accent); } .accent { color: var(--accent); } .mono { font-family: 'Geist Mono', monospace; font-size: 0.9em; } a { color: var(--accent); text-decoration: none; transition: color 0.15s; } /* Brand-Regel (Marc 2026-05-25 · in Stein gemeißelt): Links NIEMALS bei Hover unterstreichen. Stattdessen: Color-Wechsel zu Lime-Accent. Statisch fett ist auch ok wenn Layout-Shift vermieden wird. Underlines sind im Dark-Controlling-Design tabu. */ a:hover, a:focus-visible { text-decoration: none; color: var(--accent); } /* Default-Color-Links (nicht-Accent · z.B. innerhalb Cards) gehen bei Hover auf Lime */ a:not([class]):hover { color: var(--accent); } /* ═══ NAV · sticky + schwarzes Milchglas mit backdrop-blur ═══ Spec (Marc 2026-05-22): „Auf Desktop sollte das Menü oben sticky sein und beim Scrollen aussehen wie schwarzes Milchglas und das was dahinter ist unscharf darstellen." */ .nav { position: sticky; top: 0; z-index: 100; /* Default: transparent genug damit Blur sichtbar wird */ background: rgba(10, 10, 12, 0.55); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 14px var(--margin); display: flex; justify-content: space-between; align-items: center; transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), padding 0.2s var(--ease-out); } /* Scrolled-State: dunkler, kompakter, Lime-Border, leichter Shadow */ .nav.is-scrolled { background: rgba(10, 10, 12, 0.78); border-bottom-color: rgba(216, 255, 60, 0.16); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); padding-top: 10px; padding-bottom: 10px; } /* Browser ohne backdrop-filter-Support · solider Fallback */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: rgba(10, 10, 12, 0.96); } } /* ════════════════════════════════════════════════════════════════ Welle 268 v2 Step 1f · iOS-PWA Sticky-Top-Bug-Fix ──────────────────────────────────────────────────────────────── Diag-Befund (Marc 2026-05-25 22:58 in PWA): Initial: nav.rect.top = 62.0px, padding-top = 62px → Logo y=124 Scrolled: nav.rect.top = 0.0px, padding-top = 62px → Logo y=62 → 62px Sprung des Logos beim Scroll = der „Sprung"-Bug Root-Cause: iOS-PWA hat einen bekannten Bug mit `position: sticky; top: 0` + safe-area-inset. Sticky-Element wandert beim Scroll von y=safe-area auf y=0 statt konstant zu bleiben. Fix: `position: fixed; top: 0` zwingt Header IMMER bei y=0. Body-padding-top kompensiert damit Content nicht versteckt wird. ════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { .nav, .nav.is-scrolled { position: fixed; top: 0; left: 0; right: 0; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; background: rgba(10, 10, 12, 0.78); border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: none; transition: none; } /* Body-Kompensation · Content fängt unter Fixed-Header an (env + 65px Safety-Buffer · 2026-05-27 von 45px erhöht weil sonst H1 auf manchen Pages am Header klebt · siehe utm/social-stats/report-Bug) */ body { padding-top: calc(max(10px, env(safe-area-inset-top)) + 65px); } } .nav-logo { display: flex; align-items: center; gap: 12px; font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: 1rem; letter-spacing: -0.015em; color: var(--fg); text-transform: lowercase; text-decoration: none; } .nav-logo:hover { text-decoration: none; color: var(--accent); } .nav-logo svg { width: 24px; height: 24px; } .nav-app-tag { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-left: 4px; font-weight: 500; } /* Welle 40.8 · NACHT-25 · #E · Nav-Badge für offene Tasks */ .nav-task-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; background: var(--accent, #D8FF3C); color: var(--ink, #0A0A0C); font-family: 'Geist Mono', monospace; font-size: 0.62rem; font-weight: 700; border-radius: 9px; line-height: 1; } .nav-links { display: flex; gap: 4px; align-items: center; } /* ── Standard-Link ── */ .nav-link { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--stone); font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 8px 12px; border-radius: 3px; transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.15s var(--ease-out); } .nav-link:hover { color: var(--paper); background: rgba(216, 255, 60, 0.05); text-decoration: none; transform: translateY(-1px); } .nav-link.is-active { color: var(--accent); background: rgba(216, 255, 60, 0.08); } /* Lime-Hex-Marker links vor dem Text bei is-active */ .nav-link.is-active::before { content: ''; width: 7px; aspect-ratio: 1 / 1; background: var(--accent); clip-path: var(--hex-clip); display: inline-block; margin-right: 2px; } /* ── Primärer Link (Cockpit) — immer mit Hex-Glyph davor ── */ .nav-link--primary { color: var(--paper); font-weight: 600; } .nav-link--primary .nav-hex { width: 11px; aspect-ratio: 1 / 1; background: var(--accent); clip-path: var(--hex-clip); display: inline-block; transition: transform 0.3s var(--ease-out); } .nav-link--primary:hover .nav-hex { transform: rotate(60deg); } .nav-link--primary.is-active { color: var(--accent); background: rgba(216, 255, 60, 0.1); } .nav-link--primary.is-active::before { display: none; } /* Hex-Glyph reicht */ /* ── Warn-Link (Mahnung) — ohne Symbol, aber roter Hover ── */ .nav-link--warn:hover { color: #FFB13C; background: rgba(255, 177, 60, 0.06); } .nav-link--warn.is-active { color: #FFB13C; background: rgba(255, 177, 60, 0.08); } .nav-link--warn.is-active::before { background: #FFB13C; } /* ── Icon-Button rechts (Beleg/Import/Migrationen/Settings) ── */ .nav-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--stone); text-decoration: none; border-radius: 3px; transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.15s var(--ease-out); } .nav-icon svg { width: 18px; height: 18px; } .nav-icon:hover { color: var(--accent); background: rgba(216, 255, 60, 0.06); text-decoration: none; transform: translateY(-1px); } .nav-icon.is-active { color: var(--accent); background: rgba(216, 255, 60, 0.08); } .nav-icon.is-active::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; aspect-ratio: 1 / 1; background: var(--accent); clip-path: var(--hex-clip); } /* ── Vertikaler Hex-Trenner zwischen Gruppen ── */ .nav-divider { display: inline-block; width: 5px; aspect-ratio: 1 / 1; background: var(--line); clip-path: var(--hex-clip); margin: 0 6px; opacity: 0.5; align-self: center; flex-shrink: 0; } /* ── User-Tag ── */ .nav-user-tag { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--accent); padding-left: 6px; } /* ── Logout-Button ── */ .nav-logout { color: var(--stone) !important; border: 1px solid var(--line); padding: 6px 14px; font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 3px; transition: all 0.2s var(--ease-out); margin-left: 8px; } .nav-logout:hover { border-color: var(--accent); color: var(--accent) !important; background: rgba(216, 255, 60, 0.04); text-decoration: none; } /* ════════════════════════════════════════════════════════════════════ * NAV-DROPDOWN · 5-Gruppen-Refactor (2026-05-22) * ──────────────────────────────────────────────────────────────────── * Kompaktes Hex-Dropdown mit Hex-Mask-Wipe-Animation. Brand-konform: * - Background Ink mit Lime-Border + subtilem Hex-Pattern oben * - Items: Geist Mono · uppercase · 0.14em letter-spacing * - Active-State: Lime-Marker * - Open-Animation: clip-path expand top-down (Hex-Wipe-Style) * ════════════════════════════════════════════════════════════════════ */ .nav-group { position: relative; display: inline-flex; align-items: center; } .nav-group-trigger { background: transparent; border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } .nav-chev { font-size: 0.62em; margin-left: 2px; opacity: 0.6; transition: transform 0.22s var(--ease-out), opacity 0.22s var(--ease-out); display: inline-block; } .nav-group.is-open .nav-chev, .nav-group:hover .nav-chev { opacity: 1; transform: translateY(2px); } /* Group-Active State (eines der Sub-Items ist aktive Page) */ .nav-group.is-active > .nav-group-trigger { color: var(--accent); } .nav-group.is-active > .nav-group-trigger::before { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 4px; aspect-ratio: 1/1; background: var(--accent); clip-path: var(--hex-clip); } /* ── Dropdown-Panel ── */ .nav-dropdown { position: absolute; top: calc(100% + 12px); left: 0; min-width: 200px; background: var(--ink); border: 1px solid rgba(216, 255, 60, 0.22); border-top: 2px solid var(--accent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); padding: 6px; z-index: 100; display: flex; flex-direction: column; gap: 1px; /* Hex-Mask-Wipe · clip-path collapse + opacity */ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; pointer-events: none; transition: clip-path 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.18s ease; } .nav-dropdown::before { content: ''; position: absolute; top: -8px; left: 16px; width: 12px; aspect-ratio: 1/1; background: var(--accent); clip-path: var(--hex-clip); opacity: 0.5; pointer-events: none; } .nav-dropdown--right { left: auto; right: 0; } .nav-dropdown--right::before { left: auto; right: 16px; } .nav-group.is-open .nav-dropdown { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; pointer-events: auto; } /* ── Dropdown-Items (Marc 2026-05-28 · mit Hex-Icons analog Mobile-Drawer) ── */ .nav-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-family: 'Geist Mono', monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); text-decoration: none; border-radius: 2px; border-left: 2px solid transparent; opacity: 0; transform: translateY(-5px); /* Basis = geschlossen/Exit: opacity+transform schnell & delay-frei → knackiges Schließen. Hover-/Aktiv-Properties bleiben delay-frei → sofortige Reaktion. */ transition: opacity 0.15s ease, transform 0.15s var(--ease-out), background 0.16s ease, color 0.16s ease, border-color 0.16s ease, padding-left 0.16s ease; white-space: nowrap; } .nav-dropdown-item:hover { background: rgba(216, 255, 60, 0.08); border-left-color: var(--accent); color: var(--accent); padding-left: 18px; } .nav-dropdown-item.is-active { background: rgba(216, 255, 60, 0.14); border-left-color: var(--accent); color: var(--accent); } /* ── Item-Reveal-Stagger (Marc 2026-05-29) · Items gleiten beim Öffnen gestaffelt von oben herein; beim Schließen faden sie schnell synchron mit dem Hex-Panel-Wipe aus. CSS-only über .is-open — kein JS-Eingriff, Hover/Aktiv bleiben delay-frei. ── */ .nav-dropdown-item:nth-child(1) { --i: 0; } .nav-dropdown-item:nth-child(2) { --i: 1; } .nav-dropdown-item:nth-child(3) { --i: 2; } .nav-dropdown-item:nth-child(4) { --i: 3; } .nav-dropdown-item:nth-child(5) { --i: 4; } .nav-dropdown-item:nth-child(6) { --i: 5; } .nav-dropdown-item:nth-child(7) { --i: 6; } .nav-dropdown-item:nth-child(8) { --i: 7; } .nav-dropdown-item:nth-child(9) { --i: 8; } .nav-dropdown-item:nth-child(10) { --i: 9; } .nav-group.is-open .nav-dropdown-item { opacity: 1; transform: translateY(0); transition: opacity 0.26s ease calc(var(--i, 0) * 34ms), transform 0.26s var(--ease-out) calc(var(--i, 0) * 34ms), background 0.16s ease, color 0.16s ease, border-color 0.16s ease, padding-left 0.16s ease; } /* A11Y · Bewegungsreduktion respektieren (A11Y.md Baseline) */ @media (prefers-reduced-motion: reduce) { .nav-dropdown-item, .nav-group.is-open .nav-dropdown-item { opacity: 1; transform: none; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, padding-left 0.16s ease; } } /* Icon-Slot innerhalb Dropdown-Item · 18px Hex/SVG-Container */ .nav-dropdown-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; transition: opacity 0.16s ease, color 0.16s ease, transform 0.18s var(--ease-out); } .nav-dropdown-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav-dropdown-item:hover .nav-dropdown-icon, .nav-dropdown-item.is-active .nav-dropdown-icon { opacity: 1; color: var(--accent); transform: rotate(30deg); } .nav-dropdown-item--warn .nav-dropdown-icon { color: #FFB13C; opacity: 0.7; } .nav-dropdown-item--warn:hover .nav-dropdown-icon { color: #FFB13C; } .nav-dropdown-item--danger .nav-dropdown-icon { color: #FF6B6B; opacity: 0.7; } .nav-dropdown-item--danger:hover .nav-dropdown-icon { color: #FF6B6B; } .nav-dropdown-item--warn { color: #FFB13C; } .nav-dropdown-item--warn:hover { color: #FFB13C; border-left-color: #FFB13C; } .nav-dropdown-item--danger { color: #FF6B6B; } .nav-dropdown-item--danger:hover { color: #FF6B6B; border-left-color: #FF6B6B; background: rgba(255, 107, 107, 0.08); } /* Trenner innerhalb eines Dropdown (z.B. Erfassung · Quick-Actions) */ .nav-dropdown-sep { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 8px; } /* User-Trigger (rechts) · margin-left:auto schiebt es nach rechts */ .nav-group--user { margin-left: auto; } .nav-user-trigger { color: var(--accent) !important; font-family: 'Geist Mono', monospace; font-size: 0.7rem !important; letter-spacing: 0.14em !important; } /* ── Welle 48.A Item 3 · Modul-Chip (links neben User-Pill) ── Sichtbar nur wenn die Page ein Modul gesetzt hat ($bodyDataModule != 'base'). Mini-Pill mit Hex-Dot links + Modul-Label rechts. Klick öffnet Settings. */ .nav-module-chip { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; /* schiebt sich + User-Pill nach rechts */ margin-right: 6px; padding: 6px 11px 6px 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.03); font-family: 'Geist Mono', monospace; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft, #C8C9CC); text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; white-space: nowrap; } .nav-module-chip:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--paper, #F5F6F7); transform: translateY(-1px); } .nav-module-chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 8px 0 currentColor; /* background wird per inline-style aus moduleColor() gesetzt */ } /* Wenn Modul-Chip da ist, User-Pill nicht mehr per margin-left:auto rechts schieben (sonst dehnt sich Lücke). User-Pill klebt direkt an Chip rechts. */ .nav-module-chip + .nav-group--user { margin-left: 0; } /* Modul-Chip auf Tablet kompakter */ @media (max-width: 1280px) { .nav-module-chip { padding: 5px 9px 5px 8px; font-size: 0.62rem; } } @media (max-width: 980px) { .nav-module-chip-label { display: none; } /* nur Dot bleibt */ .nav-module-chip { padding: 6px 8px; gap: 0; } } /* Icon-Dropdown (Tools) · Chevron weglassen */ .nav-group--icon .nav-chev { display: none; } /* ── Tablet · weniger Padding/Gap, kleinere Schrift ── */ @media (max-width: 1280px) { .nav-links { gap: 2px; } .nav-link { padding: 7px 9px; font-size: 0.68rem; letter-spacing: 0.1em; } .nav-icon { width: 32px; height: 32px; } .nav-icon svg { width: 16px; height: 16px; } .nav-divider { margin: 0 3px; } .nav-user-tag { display: none; } } /* Unter 820px: Burger übernimmt — die Schalt-Regel steht weiter unten im File. */ /* ═══ LAYOUT ═══ */ .container { max-width: 1280px; margin: 0 auto; padding: 48px var(--margin); } .container--narrow { max-width: 720px; } .container--wide { max-width: 1600px; } .page-head { margin-bottom: 48px; } .page-eyebrow { font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; } .page-eyebrow::before { content: ''; height: 10px; aspect-ratio: 1/1; background: var(--accent); clip-path: var(--hex-clip); } .page-title { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 16px; } .page-lead { font-size: 1rem; color: var(--fg-mute); max-width: 680px; } /* Display-Klassen (design.html-Pattern) · GLOBAL Mona Sans · Wurzel-Fix #413-Muster (2026-06-02) Ohne diese Regel fielen .display-* ohne eigene font-family auf Inter (body) zurück. Nur font-family + Breite — Größe/Gewicht bleiben den seitenspezifischen Regeln überlassen. */ .display-xl, .display-l, .display-m, .display-s { font-family: 'Mona Sans', sans-serif; font-variation-settings: 'wdth' 125; } /* ═══ CARDS + BORDERS ═══ */ .card { background: var(--charcoal); border: 1px solid var(--line); padding: 28px; transition: border-color 0.3s var(--ease-out); } .card:hover { border-color: var(--graphite); } .card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; } .card-title { font-family: 'Mona Sans', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 115; font-size: 1.2rem; letter-spacing: -0.02em; } .card-meta { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); } .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ═══ STAT-TILE ═══ */ .stat-tile { background: var(--charcoal); border: 1px solid var(--line); padding: 28px 24px; display: flex; flex-direction: column; transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out); } .stat-tile:hover { background: rgba(216,255,60,0.04); border-color: var(--accent); } .stat-tile-label { font-family: 'Geist Mono', monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; } .stat-tile-value { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--accent); } .stat-tile-value-unit { font-size: 0.55em; color: var(--accent); opacity: 0.85; margin-left: 4px; } .stat-tile-sub { margin-top: 10px; font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--fg-mute); line-height: 1.4; } /* ═══ HEX-DONUT (für Stundenkontingent) ═══ */ .hex-donut { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1/1; } .hex-donut svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); } .hex-donut-bg { fill: none; stroke: var(--graphite); stroke-width: 6; } .hex-donut-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linejoin: round; transition: stroke-dashoffset 1.2s var(--ease-out); } .hex-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .hex-donut-num { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); } .hex-donut-label { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-top: 12px; } .hex-donut-sub { font-family: 'Mona Sans', sans-serif; font-weight: 700; font-variation-settings: 'wdth' 115; font-size: 1rem; color: var(--fg); margin-top: 6px; } /* ═══ TABLE ═══ */ .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); } .table th { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); font-weight: 500; } .table tbody tr { transition: background 0.2s var(--ease-out); } .table tbody tr:hover { background: rgba(216,255,60,0.03); } .table .num { font-family: 'Geist Mono', monospace; text-align: right; } .table .actions { text-align: right; white-space: nowrap; } .table .actions a { margin-left: 12px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; } /* ═══════════════════════════════════════════════════════════════════ * EINNAHMEN-TABELLE · Kontingent-Aufladung visuell markieren * ─────────────────────────────────────────────────────────────────── * Wenn revenues.adds_to_hour_credit=1 → Row bekommt Lime-Akzent * damit Marc sofort sieht welche Zahlung auf Stundenguthaben anrechnet. * ═══════════════════════════════════════════════════════════════════ */ .table--revenues tbody tr.rev-row--credit-topup { background: linear-gradient(90deg, rgba(216,255,60,0.06) 0%, rgba(216,255,60,0.02) 60%, transparent 100%); position: relative; } .table--revenues tbody tr.rev-row--credit-topup:hover { background: linear-gradient(90deg, rgba(216,255,60,0.12) 0%, rgba(216,255,60,0.04) 60%, transparent 100%); } .table--revenues tbody tr.rev-row--credit-topup td:first-child { border-left: 3px solid var(--accent); padding-left: 10px; } /* Mini-Hex vor dem Datum als visueller Anchor */ .rev-credit-hex { display: inline-block; width: 9px; aspect-ratio: 1 / 1; background: var(--accent); clip-path: var(--hex-clip); margin-right: 8px; vertical-align: middle; flex-shrink: 0; } /* Lime-Pill in der Kontingent-Spalte */ .rev-credit-pill { display: inline-block; background: var(--accent); color: var(--ink); font-family: 'Geist Mono', monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 3px; white-space: nowrap; } /* ═══ FORMS ═══ */ .form-field { display: grid; gap: 8px; margin-bottom: 20px; } .form-label { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .form-input, .form-textarea, .form-select { padding: 14px 16px; background: var(--charcoal); border: 1px solid var(--line); color: var(--fg); font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.4; border-radius: 0; outline: none; transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); width: 100%; box-sizing: border-box; } .form-textarea { resize: vertical; min-height: 100px; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); background: rgba(216, 255, 60, 0.04); } .form-help { font-size: 0.78rem; color: var(--stone); margin-top: 4px; } .form-error { font-size: 0.85rem; color: #FF6B6B; margin-top: 6px; font-family: 'Geist Mono', monospace; } .form-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; } /* ═══ Brand-konformer Delete-Icon-Button · roter X in rounded square ═══ */ /* Brand-Icon-Button · Repeat (Lime) */ .btn-icon-repeat { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid rgba(216, 255, 60, 0.4); border-radius: 4px; color: var(--accent); cursor: pointer; padding: 0; font-family: 'Mona Sans', sans-serif; font-weight: 700; font-size: 0.96rem; line-height: 1; text-decoration: none; transition: all 0.18s var(--ease-out); vertical-align: middle; } .btn-icon-repeat:hover { background: var(--accent); color: var(--ink); transform: rotate(180deg); } .btn-icon-del { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 4px; color: #FF6B6B; cursor: pointer; padding: 0; transition: all 0.15s var(--ease-out); font-family: inherit; text-decoration: none; position: relative; vertical-align: middle; } .btn-icon-del::before, .btn-icon-del::after { content: ''; position: absolute; width: 12px; height: 1.5px; background: currentColor; transition: background 0.15s var(--ease-out); } .btn-icon-del::before { transform: rotate(45deg); } .btn-icon-del::after { transform: rotate(-45deg); } .btn-icon-del:hover, .btn-icon-del:focus-visible { background: #FF6B6B; border-color: #FF6B6B; color: var(--ink); outline: none; } .btn-icon-del:hover::before, .btn-icon-del:hover::after, .btn-icon-del:focus-visible::before, .btn-icon-del:focus-visible::after { background: var(--ink); } .btn-icon-del:active { transform: scale(0.95); } /* Wrapping form: damit Button inline neben anderen Action-Links sitzt */ form.inline-del { display: inline-block; margin: 0; vertical-align: middle; } /* ═══ Brand-konforme Checkbox · Hex-Lime statt OS-default ═══ */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; background: var(--charcoal); border: 1.5px solid var(--line); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out); vertical-align: middle; margin: 0; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); } /* Checkmark via CSS-Pseudo (kein Bild nötig) */ input[type="checkbox"]:checked::after { content: ''; position: absolute; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } input[type="radio"]:checked::after { content: ''; width: 9px; height: 9px; background: var(--ink); border-radius: 50%; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.4; cursor: not-allowed; } /* Checkbox-Labels (für die typische "label > input + text"-Struktur) */ .form-field label[style*="display: flex"], .form-checkbox-label { cursor: pointer; user-select: none; } /* ═══ Brand-konformer File-Input · ::file-selector-button styled ═══ */ input[type="file"].form-input, input[type="file"] { background: var(--charcoal); border: 1px dashed var(--line); color: var(--fg-mute); font-family: 'Geist Mono', monospace; font-size: 0.84rem; padding: 16px; cursor: pointer; transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out); } input[type="file"]:hover { border-color: var(--accent); background: rgba(216, 255, 60, 0.03); } input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input[type="file"]::file-selector-button { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Geist Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px; margin-right: 16px; cursor: pointer; transition: all 0.15s var(--ease-out); font-weight: 600; } input[type="file"]::file-selector-button:hover { background: var(--accent); color: var(--ink); } /* Webkit-Fallback (älteres Safari/Chrome) */ input[type="file"]::-webkit-file-upload-button { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Geist Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px; margin-right: 16px; cursor: pointer; font-weight: 600; } input[type="file"]::-webkit-file-upload-button:hover { background: var(--accent); color: var(--ink); } /* ═══ BUTTONS ═══ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; font-family: 'Mona Sans', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 115; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } /* Bug-Fix Marc 2026-05-27: 10 Files (leads, gallery, catalog, templates, backups, wedding-referrals, inbox, themes/formstube{,_light}, fs-web-timer) nutzen BEM-Style .btn--primary mit double-dash. CSS hatte aber nur single-dash .btn-primary → keine Regel griff → iOS Safari rendert Default-Apple-Blau. Fix: BEIDE Notations supporten. Migration auf eine Notation kann später. */ .btn-primary, .btn--primary { background: var(--accent); color: var(--ink); } .btn-primary:hover, .btn--primary:hover { background: var(--fg); transform: translateY(-2px); text-decoration: none; } .btn-secondary, .btn--secondary { background: transparent; border-color: var(--fg); color: var(--fg); } .btn-secondary:hover, .btn--secondary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); text-decoration: none; } .btn-ghost, .btn--ghost { background: transparent; color: var(--fg); padding: 13px 4px; position: relative; } .btn--sm { padding: 8px 14px; font-size: 0.78rem; letter-spacing: 0.08em; } .btn--danger { background: transparent; border-color: #FF6B7A; color: #FF6B7A; } .btn--danger:hover { background: #FF6B7A; color: var(--ink); } .btn-ghost::after, .btn--ghost::after { content: ''; position: absolute; bottom: 8px; left: 4px; right: 4px; height: 1.5px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 0.35s var(--ease-out); } .btn-ghost:hover::after, .btn--ghost:hover::after { transform: scaleX(1); } .btn-ghost:hover, .btn--ghost:hover { text-decoration: none; } .btn-danger { background: transparent; border-color: #c44; color: #FF6B6B; } .btn-danger:hover { background: #c44; color: #fff; text-decoration: none; } .btn-icon-hex { width: 9px; height: 11px; background: currentColor; clip-path: var(--hex-clip); flex-shrink: 0; display: inline-block; } /* ═══ FLASH MESSAGES ═══ */ .flash { padding: 14px 20px; margin-bottom: 24px; border-left: 3px solid var(--accent); background: rgba(216,255,60,0.08); font-size: 0.92rem; } .flash--error { border-left-color: #FF6B6B; background: rgba(255,107,107,0.08); } .flash--success { border-left-color: var(--accent); } /* ═══ LOGIN-SCREEN ═══ */ body.is-login { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; background: radial-gradient(ellipse at 30% 40%, rgba(216,255,60,0.04), transparent 60%), var(--ink); } .login-card { background: var(--charcoal); border: 1px solid var(--line); padding: 48px 44px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .login-card::before { content: ''; position: absolute; top: -100px; right: -120px; width: 280px; height: 280px; background: var(--accent); clip-path: var(--hex-clip); opacity: 0.06; animation: heroSpin 60s linear infinite; } @keyframes heroSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; position: relative; z-index: 1; } .login-brand svg { width: 28px; height: 28px; } .login-brand-text { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: 1.1rem; letter-spacing: -0.015em; text-transform: lowercase; } .login-brand-app { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-left: 6px; } .login-headline { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 8px; position: relative; z-index: 1; } .login-sub { color: var(--fg-mute); font-size: 0.92rem; margin-bottom: 32px; position: relative; z-index: 1; } .login-card form { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ * POSTEN-EDITOR · Card-Layout (Desktop) * Spec: Marc 2026-05-22 · 'komplette Editor noch total schrecklich, * Designsystem nutzen, KI-Btn raus, Voice ersetzt das' * * Approach: Tabelle bleibt im Markup (Form-Submit), wird per CSS * zum Grid-Card-Layout pro Posten: * - Hex-Index links * - Beschreibung GROSS full-width oben * - Inline-Feld-Row darunter (Menge · Einheit · Preis · USt · Summe) * - X-Delete als Card-Action oben rechts * Mobile-Overrides liegen separat in fs-mobile.css. * ═══════════════════════════════════════════════════════════════ */ @media (min-width: 701px) { .fs-items-table { display: block !important; width: 100%; } .fs-items-table colgroup { display: none; } .fs-items-table thead { display: none; } /* Headers nicht nötig — Mini-Labels pro Feld */ .fs-items-table tbody { display: block; } /* ── Posten-Card · CSS Grid mit grid-template-areas (7 Cols) ── */ .fs-items-table tbody tr.item-row { display: grid; grid-template-areas: "num desc desc desc desc desc del" ". qty unit price vat sum ."; /* 7 Spalten exakt zu den 7 Area-Cells passend. minmax() gibt jeder Field-Spalte min-Breite damit Mini-Labels (Geist Mono Caps) nicht überlappen, fr für flexible Verteilung. */ grid-template-columns: 56px /* col 1 · num */ minmax(90px, 1fr) /* col 2 · qty unter desc-span */ minmax(90px, 1fr) /* col 3 · unit */ minmax(120px, 1.2fr) /* col 4 · price */ minmax(80px, 0.8fr) /* col 5 · vat */ minmax(120px, 1.1fr) /* col 6 · sum */ 40px; /* col 7 · del */ gap: 18px 14px; padding: 24px 24px 20px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.022); border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 5px; transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), border-left-color 0.2s var(--ease-out); position: relative; } .fs-items-table tbody tr.item-row:hover { background: rgba(216, 255, 60, 0.04); border-color: rgba(216, 255, 60, 0.18); border-left-color: var(--accent); } .fs-items-table tbody tr.item-row:focus-within { background: rgba(216, 255, 60, 0.06); border-color: rgba(216, 255, 60, 0.32); border-left-color: var(--accent); } /* TD Reset · Display block (Grid-Item) + Grid-Area-Zuweisung Bug-Fix: ohne display:block werden TDs als table-cell von Browsern interpretiert → Spalten kollabieren, Labels überlappen */ .fs-items-table tbody tr.item-row > td { display: block !important; padding: 0 !important; border: none !important; vertical-align: top; background: transparent; min-width: 0; box-sizing: border-box; } .fs-items-table tbody tr.item-row > td:nth-child(1) { grid-area: num; } .fs-items-table tbody tr.item-row > td:nth-child(2) { grid-area: desc; } .fs-items-table tbody tr.item-row > td:nth-child(3) { grid-area: qty; } .fs-items-table tbody tr.item-row > td:nth-child(4) { grid-area: unit; } .fs-items-table tbody tr.item-row > td:nth-child(5) { grid-area: price; } .fs-items-table tbody tr.item-row > td:nth-child(6) { grid-area: vat; } .fs-items-table tbody tr.item-row > td:nth-child(7) { grid-area: sum; } .fs-items-table tbody tr.item-row > td.actions { grid-area: del; } /* ─── Index · Lime-Hex links oben, prominent ─── */ .fs-items-table tbody tr.item-row > td:nth-child(1) { font-size: 0 !important; color: transparent !important; text-align: center; padding-top: 4px !important; } .fs-items-table tbody tr.item-row > td:nth-child(1)::before { content: attr(data-pos); display: inline-flex; align-items: center; justify-content: center; width: 44px; aspect-ratio: 1 / 1; background: var(--accent); clip-path: var(--hex-clip); color: var(--ink); font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.04em; transition: transform 0.4s var(--ease-out); } .fs-items-table tbody tr.item-row:hover > td:nth-child(1)::before { transform: rotate(60deg) scale(1.06); } /* Fallback wenn data-pos nicht gesetzt — Text aus dem TD-Inhalt nehmen */ .fs-items-table tbody tr.item-row > td:nth-child(1):not([data-pos])::before { content: ''; display: block; } /* ─── Beschreibungs-Textarea · MEGA gross, full-width ─── */ .fs-items-table tbody tr.item-row > td:nth-child(2) { position: relative; } .fs-items-table tbody tr.item-row > td:nth-child(2)::before { content: 'Beschreibung'; display: block; font-family: 'Geist Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); font-weight: 700; margin-bottom: 8px; } .fs-items-table tbody tr.item-row > td:nth-child(2) textarea { width: 100%; min-height: 110px !important; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 1.02rem; line-height: 1.55; background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 4px; resize: vertical; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; } .fs-items-table tbody tr.item-row > td:nth-child(2) textarea:focus { outline: none; border-color: var(--accent); background: rgba(216, 255, 60, 0.025); box-shadow: 0 0 0 3px rgba(216, 255, 60, 0.08); } .fs-items-table tbody tr.item-row > td:nth-child(2) textarea::placeholder { color: rgba(255, 255, 255, 0.22); font-style: italic; } /* ─── Mini-Field-Labels für Numerische Felder ─── */ .fs-items-table tbody tr.item-row > td:nth-child(3)::before, .fs-items-table tbody tr.item-row > td:nth-child(4)::before, .fs-items-table tbody tr.item-row > td:nth-child(5)::before, .fs-items-table tbody tr.item-row > td:nth-child(6)::before, .fs-items-table tbody tr.item-row > td:nth-child(7)::before { display: block; font-family: 'Geist Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); font-weight: 700; margin-bottom: 6px; line-height: 1; /* Wichtig: clip overflow damit Labels nicht aneinander knallen */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .fs-items-table tbody tr.item-row > td:nth-child(3)::before { content: 'Menge'; } .fs-items-table tbody tr.item-row > td:nth-child(4)::before { content: 'Einheit'; } .fs-items-table tbody tr.item-row > td:nth-child(5)::before { content: 'Einzelpreis'; } .fs-items-table tbody tr.item-row > td:nth-child(6)::before { content: 'USt %'; } .fs-items-table tbody tr.item-row > td:nth-child(7)::before { content: 'Summe'; text-align: right; } /* ─── Numerische Inputs · sauber, mono, Lime-Focus ─── */ .fs-items-table tbody tr.item-row > td input.form-input { width: 100%; padding: 10px 12px; font-family: 'Geist Mono', monospace; font-size: 0.96rem; text-align: right; background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 4px; transition: border-color 0.18s, box-shadow 0.18s; min-height: 42px; font-variant-numeric: tabular-nums; } .fs-items-table tbody tr.item-row > td input.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 255, 60, 0.08); } /* Einheit · zentriert + Inter statt Mono */ .fs-items-table tbody tr.item-row > td:nth-child(4) input.form-input { text-align: center; font-family: 'Inter', sans-serif; font-size: 0.95rem; text-transform: lowercase; } /* ─── Line-Sum · Mona Sans Display, gross, Lime ─── */ .fs-items-table tbody tr.item-row > td.line-sum { font-family: 'Mona Sans', sans-serif !important; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: 1.6rem !important; letter-spacing: -0.025em; color: var(--accent) !important; text-align: right; font-variant-numeric: tabular-nums; align-self: end; padding-bottom: 8px !important; } /* ─── Lösch-Button · Card-Action oben rechts ─── */ .fs-items-table tbody tr.item-row > td.actions { text-align: center; padding-top: 4px !important; } .fs-items-table tbody tr.item-row > td.actions .btn-remove-row { opacity: 1; margin: 0 auto; } /* ─── KI-Btn pro Position raus (Marc: Voice ersetzt) ─── */ .fs-items-table .fs-ai-item-btn { display: none !important; } } /* Mobile-Override · die Card-Logic gilt nur für Desktop, Mobile-Layout bleibt 1-Spalter in fs-mobile.css. */ @media (max-width: 700px) { .fs-items-table { display: table !important; } .fs-items-table thead { display: none; } /* bleibt versteckt */ .fs-items-table tbody { display: block; } } /* Tfoot · Summen-Block · Lime-Highlight-Card */ .fs-items-table tfoot { display: block; margin-top: 20px; background: linear-gradient(135deg, var(--charcoal) 0%, rgba(216,255,60,0.04) 100%); border: 1px solid rgba(216, 255, 60, 0.18); border-radius: 5px; padding: 8px 20px; } .fs-items-table tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; } .fs-items-table tfoot tr td { padding: 0; border: none; font-family: 'Geist Mono', monospace; font-size: 0.86rem; color: var(--stone); display: block; } .fs-items-table tfoot tr td[colspan] { font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; } .fs-items-table tfoot tr:last-child td { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: 1.5rem; letter-spacing: -0.025em; } .fs-items-table tfoot tr:last-child { border-top: 1px dashed rgba(216, 255, 60, 0.2); padding-top: 12px; margin-top: 6px; } .fs-items-table tfoot tr:last-child td:last-child { color: var(--accent); font-variant-numeric: tabular-nums; } /* "+ Posten hinzufügen"-Button (Desktop) · dezent, Lime-Border on hover */ .fs-items-table + #btn-add-row { display: inline-flex !important; align-items: center; gap: 10px; background: transparent !important; border: 1px dashed rgba(216, 255, 60, 0.35) !important; color: var(--accent) !important; padding: 12px 22px !important; font-family: 'Geist Mono', monospace !important; font-size: 0.78rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border-radius: 4px !important; cursor: pointer; transition: all 0.18s var(--ease-out) !important; margin-top: 18px !important; } .fs-items-table + #btn-add-row::before { content: ''; display: inline-block; width: 14px; aspect-ratio: 1/1; background: var(--accent); clip-path: var(--hex-clip); transition: transform 0.3s var(--ease-out); } .fs-items-table + #btn-add-row:hover { border-style: solid !important; background: rgba(216, 255, 60, 0.04) !important; } .fs-items-table + #btn-add-row:hover::before { transform: rotate(60deg) scale(1.1); } /* ═══ FOOTER ═══ */ .ctrl-footer { border-top: 1px solid var(--line); padding: 24px var(--margin); margin-top: 64px; } .ctrl-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--stone); font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ═══ A11y ═══ */ .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; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════ MOBILE-FIRST · Touch-Targets, Burger-Nav, Floating-Action, Card-Layout ═══════════════════════════════════════════════════════════════════ */ /* ─── Burger-Toggle (zeigt sich unter 820px) ─── */ .nav-burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); cursor: pointer; padding: 0; align-items: center; justify-content: center; color: var(--fg); transition: border-color 0.2s, background 0.2s; } .nav-burger:hover, .nav-burger:focus-visible { border-color: var(--accent); } .nav-burger:active { background: rgba(216, 255, 60, 0.08); } .nav-burger svg { width: 18px; height: 18px; } .nav-burger .burger-close { display: none; } .nav-burger.open .burger-open { display: none; } .nav-burger.open .burger-close { display: inline; } @media (max-width: 820px) { .nav-links { display: none; } .nav-burger { display: inline-flex; } } /* ─── Mobile-Nav-Drawer ─── */ .mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(10,10,12,0.55); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out); z-index: 98; } .mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; } .mobile-nav { position: fixed; top: 0; right: 0; width: min(420px, 90vw); height: 100vh; height: 100dvh; background: var(--ink); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0,0,0,0.5); transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.7, 0, 0.2, 1); z-index: 99; padding: 0; display: flex; flex-direction: column; overflow: hidden; } .mobile-nav.open { transform: translateX(0); } .mobile-nav-header { padding: 22px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .mobile-nav-header-label { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); display: flex; align-items: center; gap: 10px; } .mobile-nav-header-label::before { content: ''; width: 8px; height: 10px; background: var(--accent); clip-path: var(--hex-clip); } .mobile-nav-close { width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); color: var(--stone); cursor: pointer; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; transition: color 0.2s, border-color 0.2s; } .mobile-nav-close:active { color: var(--accent); border-color: var(--accent); } .mobile-nav-close::before, .mobile-nav-close::after { content: ''; position: absolute; width: 16px; height: 1.5px; background: currentColor; } .mobile-nav-close::before { transform: rotate(45deg); } .mobile-nav-close::after { transform: rotate(-45deg); } .mobile-nav-list { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; } .mobile-nav-item { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 18px; padding: 20px 28px; min-height: 64px; text-decoration: none; color: var(--fg); position: relative; border-bottom: 1px solid transparent; opacity: 0; transform: translateX(20px); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.2s var(--ease-out), padding-left 0.2s var(--ease-out); } .mobile-nav.open .mobile-nav-item { opacity: 1; transform: translateX(0); } .mobile-nav.open .mobile-nav-item:nth-child(1) { transition-delay: 0.08s; } .mobile-nav.open .mobile-nav-item:nth-child(2) { transition-delay: 0.10s; } .mobile-nav.open .mobile-nav-item:nth-child(3) { transition-delay: 0.12s; } .mobile-nav.open .mobile-nav-item:nth-child(4) { transition-delay: 0.14s; } .mobile-nav.open .mobile-nav-item:nth-child(5) { transition-delay: 0.16s; } .mobile-nav.open .mobile-nav-item:nth-child(6) { transition-delay: 0.18s; } .mobile-nav.open .mobile-nav-item:nth-child(7) { transition-delay: 0.20s; } .mobile-nav-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--accent); transform: translateY(-50%); transition: height 0.25s var(--ease-out); } .mobile-nav-item:active::before, .mobile-nav-item:hover::before { height: 30px; } .mobile-nav-item:active, .mobile-nav-item:hover { background: var(--charcoal); padding-left: 36px; } .mn-num { font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--stone); transition: color 0.2s; } .mobile-nav-item:hover .mn-num, .mobile-nav-item:active .mn-num { color: var(--accent); } .mn-label { font-family: 'Mona Sans', sans-serif; font-weight: 700; font-variation-settings: 'wdth' 115; font-size: 1.15rem; letter-spacing: -0.015em; } .mn-arrow { color: var(--stone); font-family: 'Geist Mono', monospace; font-size: 0.85rem; transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out); } .mobile-nav-item:hover .mn-arrow, .mobile-nav-item:active .mn-arrow { transform: translateX(4px); color: var(--accent); } .mobile-nav-foot { padding: 18px 28px 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .mobile-nav-foot a { color: var(--accent); font-family: 'Mona Sans', sans-serif; font-weight: 700; font-variation-settings: 'wdth' 115; font-size: 1rem; text-decoration: none; } .mobile-nav-foot span { color: var(--stone); font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ─── Floating Action Hex-Button (Quick-Entry) ─── */ .fab-hex { position: fixed; right: 20px; bottom: 20px; width: 64px; height: 64px; background: var(--accent); color: var(--ink); border: none; clip-path: var(--hex-clip); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Mona Sans', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; text-decoration: none; z-index: 60; box-shadow: 0 8px 24px rgba(216,255,60,0.3), 0 4px 12px rgba(0,0,0,0.4); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); isolation: isolate; } .fab-hex:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 32px rgba(216,255,60,0.4), 0 6px 16px rgba(0,0,0,0.5); text-decoration: none; } .fab-hex:active { transform: translateY(0) scale(0.96); } .fab-hex-label { position: absolute; right: 76px; top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); padding: 8px 14px; font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease-out); } .fab-hex:hover .fab-hex-label { opacity: 1; } @media (max-width: 820px) { .fab-hex { right: 16px; bottom: 16px; width: 60px; height: 60px; font-size: 1.85rem; } .fab-hex-label { display: none; } } /* ─── Action-Links auf Tabellen größer für Touch ─── */ @media (max-width: 820px) { .table .actions a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: 4px; } .form-actions .btn { min-height: 48px; } .nav-logo svg { width: 28px; height: 28px; } } /* ─── Mobile-Card-Layout · Tables werden zu Cards ─── */ .table-cards { display: none; } @media (max-width: 720px) { /* Bug-Fix Marc 2026-05-27: NUR hide wenn auch eine .table-cards als Mobile- Alternative gerendert wird. Sonst (z.B. leads.php) bleibt die Page leer. :has() Selector ist Safari 15.4+ / Chrome 105+ supported. */ .table-responsive:has(.table-cards) .table { display: none; } .table-responsive .table-cards { display: flex; flex-direction: column; gap: 12px; } } .row-card { background: var(--charcoal); border: 1px solid var(--line); padding: 18px 18px 14px; position: relative; transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); } .row-card:active { background: rgba(216,255,60,0.04); border-color: var(--accent); } .row-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .row-card-meta { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; } .row-card-amount { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; } .row-card-title { font-family: 'Mona Sans', sans-serif; font-weight: 700; font-variation-settings: 'wdth' 115; font-size: 1.02rem; letter-spacing: -0.015em; color: var(--fg); margin-bottom: 4px; } .row-card-sub { font-size: 0.85rem; color: var(--fg-mute); line-height: 1.4; } .row-card-actions { display: flex; gap: 8px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .row-card-actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; font-family: 'Geist Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); color: var(--stone); text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .row-card-actions a:hover, .row-card-actions a:active { border-color: var(--accent); color: var(--accent); background: rgba(216,255,60,0.04); text-decoration: none; } .row-card-actions a.danger:hover, .row-card-actions a.danger:active { border-color: #FF6B6B; color: #FF6B6B; background: rgba(255,107,107,0.04); } /* ─── Mobile-Container ergonomischer ─── */ @media (max-width: 720px) { .container { padding: 28px var(--margin) 100px; } /* extra bottom-padding für FAB */ .page-head { margin-bottom: 32px; } .page-title { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; } .card { padding: 20px; } .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ─── Form-Inputs Mobile-friendlier ─── */ @media (max-width: 720px) { .form-input, .form-textarea, .form-select { font-size: 16px; min-height: 48px; } /* iOS-Zoom-Prevention bei 16px */ .form-input[type="date"] { min-height: 48px; } } /* ─── Stat-Tiles · Mobile-Magic ─── */ @media (max-width: 720px) { .stat-tile { padding: 20px; } .stat-tile-value { font-size: clamp(1.8rem, 8vw, 2.4rem); } } /* ─── Hex-Loading-Indicator (Spinner) ─── */ .hex-spinner { display: inline-block; width: 24px; height: 24px; background: var(--accent); clip-path: var(--hex-clip); animation: hexspin 1.4s linear infinite; } @keyframes hexspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ─── Mikro-Interaktionen · Tap-Ripple ─── */ .btn { position: relative; isolation: isolate; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; } .btn:active::after { opacity: 1; transition: opacity 0.05s; } /* ═══════════════════════════════════════════════════════════════════ DESIGN-SYSTEM-PATTERNS · adaptiert aus design.html für Dashboard ═══════════════════════════════════════════════════════════════════ */ /* ─── VIZ-CARD · Editorial-Stat-Tile ─── */ .viz-card { background: var(--charcoal); border: 1px solid var(--line); padding: 32px 28px; position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out); } .viz-card:hover { border-color: var(--accent); } .viz-card::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: var(--accent); clip-path: var(--hex-clip); opacity: 0.06; transform: translate(30%, -30%); z-index: 0; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .viz-card:hover::before { opacity: 0.12; transform: translate(20%, -20%) rotate(15deg); } .viz-card > * { position: relative; z-index: 1; } .viz-label { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; } .viz-label::before { content: ''; height: 8px; aspect-ratio: 1/1; flex-shrink: 0; background: var(--accent); clip-path: var(--hex-clip); } .viz-title { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 0.92; letter-spacing: -0.035em; color: var(--accent); margin-bottom: 12px; } .viz-title .unit { font-size: 0.5em; opacity: 0.85; margin-left: 4px; } .viz-sub { font-family: 'Inter', sans-serif; font-size: 0.88rem; line-height: 1.5; color: var(--fg-mute); } /* ─── PREPAID-NUMBER · groß angezeigte Kennzahl mit Kontext ─── */ .prepaid-number { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(4rem, 12vw, 8rem); line-height: 0.85; letter-spacing: -0.045em; color: var(--accent); text-shadow: 0 0 60px rgba(216, 255, 60, 0.15); } .prepaid-context { font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-top: 14px; } /* ─── PRICING-TIER-MARKER · Bullet-Reihe für Stufen-Anzeige (KU-Schwelle etc.) ─── */ .pricing-tier-marker { display: inline-flex; gap: 6px; margin: 12px 0; } .pricing-tier-marker span { width: 14px; aspect-ratio: 1/1; background: var(--graphite); clip-path: var(--hex-clip); transition: background 0.25s var(--ease-out); } .pricing-tier-marker span.is-on { background: var(--accent); } .pricing-tier-marker span.is-warn { background: #FFC656; } .pricing-tier-marker span.is-danger { background: #FF6B6B; } /* ─── PROGRESS-BAR mit Hex-Marker ─── */ .progress-bar { position: relative; width: 100%; height: 6px; background: var(--graphite); border-radius: 0; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent); transition: width 1s var(--ease-out); } .progress-bar--warn .progress-bar-fill { background: #FFC656; } .progress-bar--danger .progress-bar-fill { background: #FF6B6B; } .progress-bar-label { display: flex; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--stone); text-transform: uppercase; margin-bottom: 8px; } .progress-bar-label .pct { color: var(--accent); } /* ─── MEGA-TEXT-UNDERLAY · full-bleed Brand-Wort im BG, nur oben angeschnitten ─── Spec (Marc 2026-05-22): „leider ist das schlagwort nicht full bleed und somit nicht nur oben im Anschnitt." → Wort sitzt am unteren Rand, ragt oben raus, wird durch overflow:hidden oben gecuttet. Geht jetzt bis zum viewport-Rand. */ .mega-stack { position: relative; overflow: hidden; /* Aus container ausbrechen für full bleed (parent muss zentriert sein, z.B. .container) */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Innen wieder einrücken damit Content (eyebrow/title/lead) an alter Position bleibt */ padding-left: calc(50vw - 50% + 24px); padding-right: calc(50vw - 50% + 24px); padding-top: 56px; padding-bottom: 8px; } .mega-text { position: absolute; bottom: -4%; left: 0; right: 0; width: 100%; text-align: center; font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; line-height: 0.78; letter-spacing: -0.05em; pointer-events: none; user-select: none; white-space: nowrap; text-transform: uppercase; color: var(--accent); opacity: 0.045; z-index: 0; font-size: clamp(10rem, 26vw, 26rem); } /* Modifier-Aliases: --bottom und --top verhalten sich jetzt identisch (immer unten verankert, oben angeschnittenes Full-Bleed-Wort). */ .mega-text--bottom, .mega-text--top { /* keine Sonder-Positionen mehr */ } /* Content über das Mega-Wort heben */ .mega-stack > .eyebrow-line, .mega-stack > .page-eyebrow, .mega-stack > .page-title, .mega-stack > .page-lead { position: relative; z-index: 1; } .mega-stack > .container, .mega-stack > .container--narrow, .mega-stack > .container--wide { position: relative; z-index: 1; } /* Safety: kein horizontal scroll durch 100vw-Tricks / mega-text-underlays. Bug-Fix Marc 2026-05-25: overflow-x:hidden bricht position:sticky global (Browser macht body zum Scroll-Container). overflow-x:clip ist visuell identisch ohne Sticky-Nebenwirkungen. ───────────────────────────────────────────────────────────────────── iOS-FIX 2026-06-05 (Marc-Screenshot „Mobile FAB-Menü nicht mehr sticky"): overflow-x:clip auf html/body bricht position:fixed auf iOS Safari (nicht spec-konform, daher Desktop-Chrome unauffällig) → die fixe Mobile-Tab-Bar (.fs-tab-bar, liegt direkt in ) löste sich und scrollte mit. Lösung: html/body bleiben overflow-frei (= Containing-Block für fixed), das Clipping wandert auf den Content-Wrapper
.
ist KEIN Ancestor der fixed Tab-Bar/FAB → kann deren position:fixed nicht brechen. Live verifiziert (420px): scrollWidth==clientWidth, Tab-Bar bottom==viewport. */ html, body { overflow-x: visible; } main { overflow-x: clip; } /* ─── HEX-MASK SECTION-TRANSITION ─── */ .section-mask { position: relative; height: 80px; margin: -40px 0; pointer-events: none; z-index: 5; } .section-mask-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); overflow: hidden; } .section-mask-cell { aspect-ratio: 1/1; background: var(--charcoal); clip-path: var(--hex-clip); transform: scale(1); transform-origin: center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .section-mask.is-revealed .section-mask-cell { transform: scale(0); } /* ─── BLEED-STATEMENT · Empty-State / Section-Statement ─── */ .bleed-statement { padding: 80px 40px; background: var(--charcoal); border: 1px solid var(--line); position: relative; overflow: hidden; text-align: center; } .bleed-statement::before { content: ''; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; background: var(--accent); clip-path: var(--hex-clip); opacity: 0.04; transform: translate(-50%, -50%); animation: bleed-spin 60s linear infinite; } @keyframes bleed-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .bleed-statement > * { position: relative; z-index: 1; } .bleed-statement-num { font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: clamp(5rem, 12vw, 8rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); opacity: 0.4; } .bleed-statement-text { font-family: 'Mona Sans', sans-serif; font-weight: 700; font-variation-settings: 'wdth' 115; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); margin-top: 8px; margin-bottom: 16px; } .bleed-statement-hint { font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); } .bleed-statement-hint a { color: var(--accent); } /* ─── MODULE-GRID · 8/4/3-Felder-Raster für Auswahl (Settings, Kategorien etc.) ─── */ .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .module-grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 22px; background: var(--charcoal); transition: background 0.25s var(--ease-out); cursor: pointer; } .module-grid > *:hover, .module-grid > *:focus-within { background: rgba(216, 255, 60, 0.05); } .module-grid > *.is-active { background: rgba(216, 255, 60, 0.1); border-left: 3px solid var(--accent); padding-left: 19px; } .module-num { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; } .module-title { font-family: 'Mona Sans', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 115; font-size: 1.05rem; letter-spacing: -0.015em; margin-bottom: 8px; } .module-desc { font-family: 'Inter', sans-serif; font-size: 0.85rem; line-height: 1.5; color: var(--fg-mute); } /* ─── EYEBROW · Brand-Anker mit Hex-Punkt ─── */ .eyebrow-line { font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; } .eyebrow-line::before { content: ''; width: 24px; height: 1px; background: var(--accent); } /* ─── MARQUEE · animierter Brand-Slogan-Lauf (für Marketing-Touch im Dashboard) ─── */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; position: relative; } .marquee-track { display: flex; white-space: nowrap; animation: marquee-scroll 30s linear infinite; } .marquee-track > span { display: inline-flex; align-items: center; gap: 30px; font-family: 'Mona Sans', sans-serif; font-weight: 900; font-variation-settings: 'wdth' 125; font-size: 1.4rem; letter-spacing: -0.015em; color: var(--fg); padding: 0 30px; text-transform: uppercase; } .marquee-track > span::after { content: ''; width: 10px; aspect-ratio: 1/1; background: var(--accent); clip-path: var(--hex-clip); flex-shrink: 0; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════════════════════ * NPS-Page Editorial · Move-from-inline (Marc 2026-05-26 · CSP-Issue) * ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ * NPS-Page · Editorial-Refactor 2026-05-26 (Marc-Direktive) * Patterns aus design.html + dashboard.php (dash-hero, dash-section, * dash-bzhmini-card, dash-module) + templates/case-study.html * ═══════════════════════════════════════════════════════════════════ */ .dot{color:var(--accent);} /* ─── Hero · Mega-Text-Underlay (Pattern aus design.html .mega-text) ─── */ .nps-hero{position:relative;overflow:hidden;padding:80px var(--margin) 60px;background:radial-gradient(ellipse at 80% 20%, rgba(216,255,60,0.07), transparent 60%);border-bottom:1px solid var(--line);} .nps-hero-mega{position:absolute;top:-6vh;right:-3vw;pointer-events:none;z-index:0;font-family:'Mona Sans',sans-serif;font-weight:900;font-variation-settings:'wdth' 125;font-size:clamp(220px,32vw,560px);line-height:.85;color:rgba(255,255,255,0.028);letter-spacing:-0.05em;user-select:none;} .nps-hero-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;} .nps-eyebrow{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:18px;display:flex;align-items:center;gap:12px;} .nps-eyebrow::before{content:'';width:32px;height:1px;background:var(--accent);} .nps-display{font-family:'Mona Sans',sans-serif;font-weight:900;font-variation-settings:'wdth' 125;font-size:clamp(56px,8vw,108px);line-height:.95;color:var(--paper);margin:0 0 22px;letter-spacing:-0.035em;} .nps-lead{font-family:Inter,sans-serif;font-size:1.05rem;color:var(--stone);max-width:60ch;margin:0 0 42px;line-height:1.55;} /* Hero-Score-Row: Mega-Score + 3 Breakdown-Cards */ .nps-hero-score-row{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,2fr);gap:32px;align-items:start;} @media(max-width:960px){.nps-hero-score-row{grid-template-columns:1fr;}} .nps-hero-score-block{padding:28px 32px;background:#0F0F12;border:1px solid rgba(216,255,60,0.25);position:relative;overflow:hidden;} .nps-hero-score-block::before{content:'';position:absolute;top:14px;right:14px;width:48px;aspect-ratio:1/1;background:rgba(216,255,60,.12);clip-path:polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);} .nps-hero-score-eyebrow{font-family:'Geist Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:14px;font-weight:600;} .nps-hero-score-value{font-family:'Mona Sans',sans-serif;font-weight:900;font-variation-settings:'wdth' 125;font-size:clamp(80px,11vw,140px);line-height:.85;color:var(--paper);letter-spacing:-0.04em;margin-bottom:14px;} .nps-hero-score-value.is-ok{color:var(--accent);} .nps-hero-score-value.is-warn{color:#FF6B6B;} .nps-hero-score-foot{font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--stone);text-transform:uppercase;letter-spacing:.1em;} /* 3 Breakdown-Cards · Hex-Marker top-right (analog dash-bzhmini-card) */ .nps-hero-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media(max-width:760px){.nps-hero-breakdown{grid-template-columns:1fr;}} .nps-bd-card{display:block;background:#0A0A0C;border:1px solid rgba(255,255,255,.08);padding:22px;text-decoration:none !important;color:var(--paper);transition:all .15s;position:relative;overflow:hidden;} .nps-bd-card::before{content:'';position:absolute;top:14px;right:14px;width:36px;aspect-ratio:1/1;background:rgba(216,255,60,.12);clip-path:polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);transition:transform .25s var(--ease-out,cubic-bezier(0.16,1,0.3,1));} .nps-bd-card:hover{border-color:var(--accent);background:#111114;} .nps-bd-card:hover::before{transform:rotate(60deg);} .nps-bd-card--promoter::before{background:var(--accent);} .nps-bd-card--passive::before{background:rgba(255,255,255,.18);} .nps-bd-card--detractor::before{background:rgba(255,107,107,.6);} .nps-bd-eyebrow{font-family:'Geist Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:14px;} .nps-bd-value{font-family:'Mona Sans',sans-serif;font-weight:900;font-variation-settings:'wdth' 125;font-size:3.6rem;line-height:.9;color:var(--paper);letter-spacing:-0.03em;margin-bottom:14px;} .nps-bd-card--promoter .nps-bd-value{color:var(--accent);} .nps-bd-card--detractor .nps-bd-value{color:#FF6B6B;} .nps-bd-foot{font-family:Inter,sans-serif;font-size:.84rem;color:var(--stone);line-height:1.55;} /* ─── Section-Pattern (analog dash-section) ─── */ .nps-section{padding:56px var(--margin);border-bottom:1px solid var(--line);max-width:none;} .nps-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin:0 auto 28px;max-width:1240px;} .nps-section-eyebrow{font-family:'Geist Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:600;} .nps-section-title{font-family:'Mona Sans',sans-serif;font-weight:900;font-variation-settings:'wdth' 125;font-size:clamp(32px,4vw,56px);line-height:.95;margin:0 0 14px;text-transform:uppercase;color:var(--paper);letter-spacing:-0.025em;} .nps-section-sub{font-family:Inter,sans-serif;color:var(--stone);font-size:1rem;max-width:62ch;margin:0;line-height:1.55;} /* ─── Create-Form-Card · Editorial · 100% Width + 44px Min-Height (Marc-Direktive) ─── */ .nps-form-card{background:#0F0F12;border:1px solid rgba(255,255,255,.1);padding:32px;max-width:1240px;margin:0 auto;} .nps-form-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:18px;margin-bottom:24px;} @media(max-width:880px){.nps-form-grid{grid-template-columns:1fr;}} .nps-field{display:flex;flex-direction:column;gap:8px;} .nps-field label{font-family:'Geist Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);font-weight:600;} .nps-field small{color:var(--stone);font-size:.82rem;font-family:Inter,sans-serif;margin-top:4px;} .nps-input,.nps-select{display:block;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:var(--paper);padding:14px 16px;font-family:Inter,sans-serif;font-size:16px;border-radius:0;min-height:48px;transition:border-color .15s, background .15s;} .nps-input:focus,.nps-select:focus{outline:none;border-color:var(--accent);background:rgba(216,255,60,.04);} .nps-select--inline{padding:11px 14px;font-size:14px;min-height:42px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;} .nps-form-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);} .nps-checkbox{display:inline-flex;align-items:center;gap:10px;font-family:Inter,sans-serif;color:var(--paper);font-size:.94rem;cursor:pointer;} .nps-checkbox input{width:20px;height:20px;accent-color:var(--accent);} /* ─── Filter-Pills (Editorial) ─── */ .nps-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .nps-fpill{padding:9px 18px;border:1px solid rgba(255,255,255,.18);color:var(--stone);font-family:'Geist Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;text-decoration:none;border-radius:999px;transition:all .15s;} .nps-fpill:hover{border-color:var(--accent);color:var(--accent);} .nps-fpill.is-active{background:var(--accent);color:var(--ink);border-color:var(--accent);} .nps-fpill--ok.is-active{background:var(--accent);color:var(--ink);} .nps-fpill--warn.is-active{background:#FF6B6B;color:#fff;border-color:#FF6B6B;} /* ─── NPS-Cards · Editorial · Hex-Score-Marker links ─── */ .nps-list{display:flex;flex-direction:column;gap:14px;max-width:1240px;margin:0 auto;} .nps-empty{padding:80px 24px;text-align:center;color:var(--stone);background:#0A0A0C;border:1px dashed rgba(255,255,255,.15);} .nps-empty p{font-family:Inter,sans-serif;font-size:1rem;line-height:1.55;margin:0 0 10px;} .nps-empty strong{font-family:'Mona Sans',sans-serif;font-weight:800;color:var(--paper);} .nps-card{display:grid;grid-template-columns:auto 1fr;gap:24px;background:#0F0F12;border:1px solid rgba(255,255,255,.1);padding:22px 28px;align-items:start;transition:border-color .15s;} .nps-card:hover{border-color:rgba(216,255,60,0.2);} .nps-card--detractor{border-left:3px solid #FF6B6B;} .nps-card--passive{border-left:3px solid rgba(255,255,255,.4);} .nps-card--promoter{border-left:3px solid var(--accent);background:rgba(216,255,60,.025);} /* Hex-Score-Marker links · groß + Mona Sans Display */ .nps-card-mark{width:80px;height:80px;display:flex;align-items:center;justify-content:center;clip-path:polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);font-family:'Mona Sans',sans-serif;font-weight:900;font-variation-settings:'wdth' 125;font-size:1.8rem;line-height:1;letter-spacing:-0.02em;flex-shrink:0;} .nps-card-mark--detractor{background:rgba(255,107,107,.15);color:#FF6B6B;} .nps-card-mark--passive{background:rgba(255,255,255,.08);color:var(--paper);} .nps-card-mark--promoter{background:var(--accent);color:var(--ink);} .nps-card-mark--pending{background:rgba(255,255,255,.04);color:var(--stone);font-size:1.4rem;} .nps-card-body{min-width:0;} .nps-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px;} .nps-card-eyebrow{font-family:'Geist Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .nps-card-h{font-family:'Mona Sans',sans-serif;font-weight:800;font-variation-settings:'wdth' 115;font-size:1.4rem;margin:0;color:var(--paper);line-height:1.15;letter-spacing:-0.02em;} .nps-stats-row{display:flex;gap:12px;flex-wrap:wrap;} .nps-meta{font-family:'Geist Mono',monospace;font-size:.66rem;letter-spacing:.1em;color:var(--stone);text-transform:uppercase;} .nps-meta--warn{color:#FFB13C;} .nps-comment{margin:14px 0;padding:14px 18px;border-left:3px solid var(--accent);background:rgba(216,255,60,.05);font-family:'Mona Sans',sans-serif;font-weight:700;font-style:italic;color:var(--paper);font-size:1.05rem;line-height:1.5;letter-spacing:-0.01em;} .nps-url-row{display:flex;gap:10px;align-items:center;margin:14px 0;} .nps-url{flex:1;background:#08080A;padding:10px 14px;font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--accent);word-break:break-all;border:1px solid rgba(216,255,60,.18);} .nps-copy{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--paper);padding:12px 20px;min-height:44px;cursor:pointer;font-family:'Geist Mono',monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;transition:all .15s;} .nps-copy:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);} .nps-copy.is-copied{background:var(--accent);color:var(--ink);} .nps-action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);} /* ─── Buttons (Geist Mono Pill-Pattern aus design.html) ─── */ .nps-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--paper);padding:12px 22px;min-height:44px;font-family:'Geist Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:0;text-decoration:none;transition:all .15s;} .nps-btn:hover{border-color:var(--accent);color:var(--accent);} .nps-btn--primary{background:var(--accent);color:var(--ink);border-color:var(--accent);} .nps-btn--primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);} .nps-btn--ok{background:rgba(216,255,60,.1);border-color:var(--accent);color:var(--accent);} .nps-btn--ok:hover{background:var(--accent);color:var(--ink);} .nps-btn--danger{color:#FF6B6B;border-color:rgba(255,107,107,.4);} .nps-btn--danger:hover{background:rgba(255,107,107,.1);border-color:#FF6B6B;} /* Flash · Editorial-Style */ .flash{padding:14px 22px;font-family:'Geist Mono',monospace;font-size:.84rem;letter-spacing:.06em;border-radius:0;max-width:1240px;margin:0 auto;} .flash--success{background:rgba(216,255,60,.08);border:1px solid var(--accent);color:var(--accent);} .flash--error{background:rgba(255,107,107,.1);border:1px solid #FF6B6B;color:#FF6B6B;} /* Mobile · Single-Column für Cards */ @media(max-width:680px){ .nps-card{grid-template-columns:1fr;gap:16px;} .nps-card-mark{width:64px;height:64px;font-size:1.4rem;} }