/* ============================================================ LifeFolder Design System — "Fresh SaaS / C2" Emerald primary · pale green-tinted sidebar · Schibsted Grotesk Quelle: design_handoff_lifefolder_mvp/assets/lifefolder.css ============================================================ */ :root { /* ===== Farblogik ===== Grün = Dokumente, Upload, Ordnung, Sicherheit Blau = AI (Ask AI, Collections, Assistant, AI-Hinweise) Gelb = Erinnerungen, bald ablaufend, Attention Rot = abgelaufen, fehlend, dringend */ --green: #017854; --green-deep: #036548; --green-soft: #e6f1ec; --ai: #4f6bff; --ai-deep: #3a52d8; --ai-soft: #eaeeff; --warn: #f4b942; /* Akzent: Balken, Borders, Icons */ --warn-ink: #946a10; /* Text auf hellem Grund (Kontrast) */ --warn-soft: #fcf1d8; --red: #e85d5d; /* Akzent */ --red-ink: #c03b3b; /* Text auf hellem Grund */ --red-soft: #fce7e7; /* Neutrale Flächen — hell, ruhig, weich */ --bg: #F8FAF7; --surface: #ffffff; --ink: #1C2D34; --muted: #5c6e74; --line: #D8E2DF; --line-soft: #e7eeeb; /* --card folgt --surface (auch im Dark), --bg-soft = sanft getönte Fläche. Beide werden von neuen Komponenten (OAuth-Button, Settings-Accordion) genutzt — ohne Definition griffen dort helle Fallbacks im Dark-Mode. */ --card: var(--surface); --bg-soft: #eef3f0; /* Legacy-Aliase — bestehende Regeln & Inline-Styles laufen weiter */ --primary: var(--green); --primary-deep: var(--green-deep); --primary-soft: var(--green-soft); --amber: var(--warn-ink); --amber-soft: var(--warn-soft); --danger: var(--red-ink); --danger-soft: var(--red-soft); /* Sidebar */ --side-bg: #eaf2ee; --side-line: #D8E2DF; --side-ink: #1C2D34; --side-ink-soft: #3e5258; --side-muted: #6e8487; --side-active-bg: #ffffff; --side-active-ink: var(--green-deep); /* Geometrie & Elevation */ --r-card: 16px; --r-control: 11px; --r-disc: 12px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --shadow-1: 0 1px 2px rgba(28, 45, 52, 0.04); --shadow-2: 0 2px 10px rgba(28, 45, 52, 0.06); --shadow-3: 0 12px 30px rgba(28, 45, 52, 0.10); --card-shadow: var(--shadow-2); --ctl-shadow: var(--shadow-1); --btn-shadow: 0 2px 8px rgba(1, 120, 84, 0.26); --font: 'Schibsted Grotesk', -apple-system, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; } /* Dark-Mode-Vorbereitung: überschreibt nur Tokens — alle Komponenten-Regeln bleiben unverändert. (Noch nicht aktiviert.) */ html[data-theme="dark"] { --bg: #0f1512; --surface: #171f1a; --ink: #e8efe9; --muted: #9bab9f; --line: #27322b; --line-soft: #1e2823; --bg-soft: #1c2620; --green-soft: #11332a; --ai-soft: #1c2546; --warn-soft: #34280f; --red-soft: #381a1a; --warn-ink: #e3b85a; --red-ink: #ef8585; --green-deep: #5fd3a6; --ai-deep: #93a5ff; /* Text-Grün/-Blau hell genug auf Dunkel */ --side-bg: #121a15; --side-line: #1f2a24; --side-ink: #dfe9e2; --side-ink-soft: #b9c8bd; --side-muted: #7d9184; --side-active-bg: #1d2a23; --side-active-ink: #5fd3a6; --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; letter-spacing: -0.025em; } a { color: inherit; text-decoration: none; } /* ============ layout ============ */ /* Im Prototyp wurden Screens per JS ein-/ausgeblendet; in der Rails-App hat jeder Screen eine eigene Route — .lf-screen ist daher immer sichtbar. */ .lf-app { display: flex; height: 100vh; } .lf-content { flex: 1; min-width: 0; overflow-y: auto; padding: 34px 40px 80px; } .lf-screen { max-width: 1040px; margin: 0 auto; animation: lf-fade .22s ease; } @keyframes lf-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ============ sidebar ============ */ .lf-side { width: 248px; flex: none; display: flex; flex-direction: column; padding: 28px 20px 24px; background: var(--side-bg); border-right: 1px solid var(--side-line); color: var(--side-ink); overflow-y: auto; } .lf-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; cursor: pointer; } .lf-logomark { width: 30px; height: 30px; flex: none; display: block; } .lf-logotext { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } .lf-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 30px; } .lf-nav.tight { margin-top: 0; } .lf-navlbl { font-size: 11px; font-weight: 600; letter-spacing: .09em; color: var(--side-muted); margin: 26px 10px 8px; } .lf-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--side-ink-soft); cursor: pointer; } .lf-item:hover { background: rgba(255,255,255,.55); } .lf-item .count { margin-left: auto; font-size: 12px; color: var(--side-muted); font-weight: 500; } .lf-item.on { background: var(--side-active-bg); color: var(--side-active-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--green), 0 1px 3px rgba(15, 31, 23, 0.08); } .lf-item svg { color: var(--side-muted); flex: none; } .lf-item.on svg { color: var(--side-active-ink); } .lf-side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--side-line); } .lf-user { display: flex; align-items: center; gap: 10px; padding: 10px 10px 0; } .lf-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; } .lf-user .nm { font-size: 13.5px; font-weight: 600; color: var(--side-ink); line-height: 1.1; } .lf-user .em { font-size: 11.5px; color: var(--side-muted); } .lf-logout { border: none; background: transparent; font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--side-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; white-space: nowrap; } .lf-logout:hover { color: var(--danger); background: var(--danger-soft); } [hidden] { display: none !important; } /* ============ share menu ============ */ .lf-share { position: relative; } .lf-share > summary { list-style: none; cursor: pointer; } .lf-share > summary::-webkit-details-marker { display: none; } .lf-share-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(15,31,23,.12); padding: 6px; display: flex; flex-direction: column; } .lf-share-menu a { padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; } .lf-share-menu a:hover { background: var(--primary-soft); color: var(--primary-deep); } /* ============ subfolders ============ */ .lf-item.sub { padding-left: 34px; font-size: 12.5px; } .lf-newsub { border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; } .lf-newsub:hover { color: var(--primary-deep); border-color: var(--primary); } /* ============ smart profile ============ */ .lf-profile-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; padding: 0 20px; } .lf-profile-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 0; font-weight: 700; font-size: 14.5px; } .lf-profile-section > summary::-webkit-details-marker { display: none; } .lf-profile-section > summary .ico { font-size: 18px; } .lf-profile-section > summary .small { font-weight: 500; margin-left: 2px; } .lf-profile-section > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; } .lf-profile-section[open] > summary::after { transform: rotate(180deg); } .lf-profile-section > *:not(summary) { padding-bottom: 18px; } /* ============ checklists ============ */ .lf-checkbox { width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; display: grid; place-items: center; font-size: 12px; color: #fff; flex: none; font-family: var(--font); padding: 0; } .lf-checkbox:hover { border-color: var(--primary); } .lf-checkbox.on { background: var(--primary); border-color: var(--primary); } .lf-checkdel { border: none; background: transparent; color: var(--line); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px; font-family: var(--font); } .lf-checkrow:hover .lf-checkdel { color: var(--muted); } .lf-checkdel:hover { color: var(--danger) !important; background: var(--danger-soft); } /* ============ new folder ============ */ .lf-newfolder { border: none; background: transparent; width: 100%; cursor: pointer; color: var(--side-muted); font-family: var(--font); } .lf-newfolder:hover { color: var(--side-active-ink); } .lf-folderinput { width: 100%; margin-top: 2px; padding: 8px 10px; border: 1px dashed var(--primary); border-radius: 9px; background: var(--surface); font-family: var(--font); font-size: 13px; outline: none; } .lf-newfolder-card { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 18px 20px; } .lf-newfolder-card > button { border: none; background: transparent; width: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--muted); padding: 0; } .lf-newfolder-card > button:hover { color: var(--primary-deep); } .lf-newfolder-card > button .lf-disc { background: var(--bg); color: var(--muted); font-size: 18px; font-weight: 500; } .lf-newfolder-card > button:hover .lf-disc { background: var(--primary-soft); color: var(--primary-deep); } /* ============ topbar ============ */ .lf-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .lf-top h1 { font-size: 27px; font-weight: 700; line-height: 1.15; white-space: nowrap; } .lf-top .sub { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); } .lf-back { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 16px; } .lf-back:hover { color: var(--ink); border-color: #d3dcd6; } /* ============ controls ============ */ .lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-control); border: none; background: var(--primary); color: #fff; font-family: var(--font); font-size: 14px; font-weight: 600; box-shadow: var(--btn-shadow); cursor: pointer; white-space: nowrap; } .lf-btn:hover { background: var(--primary-deep); color: #fff; box-shadow: 0 3px 12px rgba(11, 138, 97, 0.32); } .lf-btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--ctl-shadow); } .lf-btn.ghost:hover { background: var(--bg); color: var(--ink); box-shadow: var(--ctl-shadow); } .lf-btn.sm { padding: 7px 13px; font-size: 13px; } .lf-btn.wide { width: 100%; } /* Button-Varianten nach Farblogik: ai = AI-Aktionen, warn = Erinnern/Prüfen, danger = destruktiv/dringend. Primary (grün) bleibt der Standard. */ .lf-btn.ai { background: var(--ai); box-shadow: 0 2px 8px rgba(79, 107, 255, 0.28); } .lf-btn.ai:hover { background: var(--ai-deep); box-shadow: 0 3px 12px rgba(79, 107, 255, 0.34); } .lf-btn.warn { background: var(--warn); color: #4a3505; box-shadow: 0 2px 8px rgba(244, 185, 66, 0.35); } .lf-btn.warn:hover { background: #e7a92e; color: #4a3505; box-shadow: 0 3px 12px rgba(244, 185, 66, 0.42); } .lf-btn.danger { background: var(--red); box-shadow: 0 2px 8px rgba(232, 93, 93, 0.30); } .lf-btn.danger:hover { background: var(--red-ink); box-shadow: 0 3px 12px rgba(232, 93, 93, 0.36); } .lf-search { margin-left: auto; width: 330px; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13.5px; box-shadow: var(--ctl-shadow); cursor: pointer; white-space: nowrap; overflow: hidden; } .lf-search:hover { border-color: #cfdad3; } .lf-search .kbd { margin-left: auto; font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); background: var(--bg); } .lf-field { display: flex; flex-direction: column; gap: 6px; } .lf-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); } .lf-input { padding: 10px 13px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); font-family: var(--font); font-size: 14px; color: var(--ink); outline: none; width: 100%; } .lf-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .lf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; } form:has(> .lf-chip) { display: inline-flex; } .lf-chip:hover { border-color: #cfdad3; background: var(--bg); } .lf-chip.tint { background: var(--green-soft); border-color: transparent; color: var(--green-deep); font-weight: 600; } .lf-chip.ai { background: var(--ai-soft); border-color: transparent; color: var(--ai-deep); font-weight: 600; } .lf-chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(244, 185, 66, 0.45); } .lf-chip.danger { background: var(--red-soft); border-color: transparent; color: var(--red-ink); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(232, 93, 93, 0.40); } .lf-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--muted); } /* ============ cards ============ */ .lf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; box-shadow: var(--card-shadow); } /* Klickbare Cards (Dashboard-Bereiche, Dokument-Karten) heben sich sanft an */ a.lf-card { transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } a.lf-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); border-color: #d3ddd6; } .lf-card .chd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .lf-card .chd .t { font-size: 15.5px; font-weight: 600; } .lf-card .chd .all { font-size: 12.5px; font-weight: 600; color: var(--primary-deep); cursor: pointer; } .lf-disc { width: 40px; height: 40px; border-radius: var(--r-disc); display: grid; place-items: center; font-size: 15px; font-weight: 650; flex: none; background: var(--primary-soft); color: var(--primary-deep); } .lf-disc.sm { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; } /* AI spark — Blau ist die Farbe aller AI-Elemente */ .lf-spark { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--ai), #7d90ff); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(79, 107, 255, 0.30); } /* Der AI-Assistant-Hinweis: blauer Verlauf statt neutraler Notification */ .lf-insight { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r-card); background: linear-gradient(100deg, var(--ai-soft) 0%, var(--surface) 60%); border: 1px solid var(--line); border-left: 3px solid var(--ai); box-shadow: var(--card-shadow); } .lf-insight .tx { font-size: 14px; } .lf-insight .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .lf-insight .cta { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ai-deep); white-space: nowrap; cursor: pointer; } .lf-insight .cta:hover { text-decoration: underline; } /* ============ lists / table ============ */ .lf-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--line-soft); } .lf-row:last-child { border-bottom: none; } .lf-row:hover { background: var(--bg); } .lf-row.fresh { background: var(--primary-soft); } .lf-row .tt { font-size: 14px; font-weight: 600; } .lf-row .ss { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .lf-thead { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--bg); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); border-radius: var(--r-card) var(--r-card) 0 0; } .lf-date { width: 44px; flex: none; text-align: center; border-radius: 9px; padding: 5px 0 6px; background: var(--bg); border: 1px solid var(--line); } .lf-date .d { font-size: 15px; font-weight: 650; line-height: 1; } .lf-date .m { font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--muted); } .lf-date.urgent { background: var(--amber-soft); border-color: transparent; } .lf-date.urgent .d, .lf-date.urgent .m { color: var(--amber); } /* ============ doc preview placeholder ============ */ .lf-ph { border: 1.5px dashed #c7d4cc; border-radius: 10px; background: repeating-linear-gradient(45deg, rgba(19,27,22,0.035) 0 8px, transparent 8px 16px); display: grid; place-items: center; color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: center; padding: 8px; min-height: 60px; } /* ============ dropzone & AI panel ============ */ .lf-drop { border: 2px dashed #bcccc2; border-radius: var(--r-card); background: var(--surface); display: grid; place-items: center; min-height: 240px; cursor: pointer; transition: border-color .2s, background .2s; } .lf-drop:hover, .lf-drop.busy { border-color: var(--primary); background: #fbfdfc; } .lf-drop .big { font-size: 17px; font-weight: 700; } .lf-drop .small { font-size: 13px; color: var(--muted); margin-top: 3px; } .lf-upcircle { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); display: grid; place-items: center; margin: 0 auto 12px; } .lf-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); opacity: .3; transition: opacity .3s; } .lf-step.on { opacity: 1; } .lf-step .ck { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; } .lf-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lf-kv .k { font-size: 12.5px; color: var(--muted); font-weight: 500; } /* ============ toast ============ */ #lf-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(90px); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; padding: 11px 22px; border-radius: 10px; box-shadow: 0 6px 24px rgba(15,31,23,.25); transition: transform .3s ease; z-index: 90; } #lf-toast.on { transform: translateX(-50%) translateY(0); } /* ============ auth / onboarding ============ */ .lf-page { display: flex; flex: 1; min-height: 0; } .lf-auth-brand { width: 46%; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; background: var(--side-bg); border-right: 1px solid var(--side-line); color: var(--side-ink); } .lf-auth-brand .headline { font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; } .lf-auth-brand .sub { font-size: 17px; color: var(--side-ink-soft); margin-top: 14px; max-width: 440px; line-height: 1.5; } .lf-feature { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--side-ink-soft); } .lf-radio-card { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); cursor: pointer; } .lf-radio-card:hover { border-color: #cfdad3; } .lf-radio-card.sel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .lf-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c2cfc7; flex: none; } .lf-radio-card.sel .lf-radio { border-color: var(--primary); border-width: 5.5px; } .lf-obdot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .lf-obdot.on { background: var(--primary); } /* Auswahl über native Inputs (Radio-Cards & Area-Chips) — Zustand rein per CSS */ .lf-radio-card:has(input:checked), .lf-radio-card.is-checked { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .lf-radio-card:has(input:checked) .lf-radio, .lf-radio-card.is-checked .lf-radio { border-color: var(--primary); border-width: 5.5px; } label.lf-chip:has(input:checked), label.lf-chip.is-checked { background: var(--primary-soft); border-color: transparent; color: var(--primary-deep); font-weight: 600; } /* ============ utilities ============ */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap14 { gap: 14px; } .gap18 { gap: 18px; } .gap24 { gap: 24px; } .grow { flex: 1; min-width: 0; } .none { flex: none; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; } .mt18 { margin-top: 18px; } .mt24 { margin-top: 24px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .grid { display: grid; gap: 18px; } /* ============ accessibility ============ */ .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; } .lf-skiplink { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--primary); color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 10px; } .lf-skiplink:focus { left: 12px; } /* Sichtbarer Fokus für alle Bedienelemente — deutlich, hoher Kontrast */ :focus-visible { outline: 3px solid var(--primary-deep); outline-offset: 2px; border-radius: 6px; } .lf-btn:focus-visible, .lf-chip:focus-visible { outline: 3px solid #0c3b29; outline-offset: 2px; } /* Tastaturzugänglicher Datei-Input (statt hidden) */ .lf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; } .lf-file-input:focus-visible + label { outline: 3px solid var(--primary-deep); outline-offset: 2px; } /* Reduced Motion: Systempräferenz + manueller Modus */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Large Text Mode */ html.large-text { font-size: 118%; } html.large-text body { line-height: 1.6; } html.large-text .lf-btn, html.large-text .lf-chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } html.large-text .lf-input { padding: 13px 14px; font-size: 1rem; } html.large-text .lf-checkbox { width: 26px; height: 26px; } html.large-text .small { font-size: 0.9rem; } /* High Contrast Mode */ html.high-contrast { --muted: #3c4843; --side-muted: #2f3a35; --line: #6b7a72; --line-soft: #9ab0a5; } html.high-contrast .lf-btn.ghost, html.high-contrast .lf-chip { border-width: 2px; } html.high-contrast .lf-card { border-width: 2px; } html.high-contrast a { text-decoration: underline; } html.high-contrast .lf-side a { text-decoration: none; } /* ============ sidebar life areas: abgerundete Kästen statt Kreise ============ */ .lf-nav.areas { gap: 5px; } .lf-nav.areas > .lf-item, .lf-nav.areas > form .lf-item { background: rgba(255,255,255,.45); border: 1px solid var(--side-line); border-radius: 11px; padding: 9px 13px; font-weight: 550; } .lf-nav.areas > .lf-item:hover { background: var(--surface); border-color: var(--primary-soft); } .lf-nav.areas > .lf-item.on { background: var(--side-active-bg); border-color: var(--primary); color: var(--side-active-ink); box-shadow: 0 1px 4px rgba(15,31,23,.08); } /* Unterordner: runde Kaestchen, gefaerbt mit der Bereichsfarbe (--area-accent); die Akzentlinie kommt vom .lf-subwrap-Rahmen. */ .lf-nav.areas .lf-item.sub { background: transparent; border: none; border-radius: 8px; padding: 6px 10px 6px 12px; } .lf-nav.areas .lf-item.sub:hover { background: var(--green-soft); color: var(--green-deep); /* Fallback ohne color-mix */ background: color-mix(in srgb, var(--area-accent, var(--green)) 9%, white); color: color-mix(in srgb, var(--area-accent, var(--green)) 70%, black); } .lf-nav.areas .lf-item.sub.on { background: var(--side-active-bg); color: var(--side-active-ink); /* Fallback */ background: color-mix(in srgb, var(--area-accent, var(--green)) 14%, white); color: color-mix(in srgb, var(--area-accent, var(--green)) 72%, black); box-shadow: inset 2px 0 0 var(--area-accent, var(--green)); font-weight: 600; } .lf-nav.areas .lf-newfolder { border: 1.5px dashed var(--side-line); border-radius: 11px; background: transparent; padding: 9px 13px; display: flex; align-items: center; gap: 11px; } .lf-nav.areas .lf-newfolder:hover { border-color: var(--primary); background: rgba(255,255,255,.5); } /* ============ sidebar tree (drag & drop + toggle) ============ */ .lf-area { border-radius: 11px; } .lf-area.dragging { opacity: .45; } .lf-area-row { display: flex; align-items: center; gap: 4px; } .lf-area-row .lf-item { flex: 1; min-width: 0; cursor: grab; } .lf-tree-toggle { border: none; background: transparent; color: var(--side-muted); cursor: pointer; font-size: 11px; padding: 6px 7px; border-radius: 7px; flex: none; transition: transform .15s; } .lf-tree-toggle[aria-expanded="false"] { transform: rotate(-90deg); } .lf-tree-toggle:hover { background: rgba(255,255,255,.7); color: var(--side-active-ink); } .lf-subwrap { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; } /* Folder colors & icons */ .lf-areaemoji { width: 18px; flex: none; text-align: center; font-size: 14px; line-height: 1; } .lf-areadot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: -4px; } .lf-customize { position: relative; display: inline-flex; } .lf-customize summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; } .lf-customize summary::-webkit-details-marker { display: none; } .lf-customize-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 36px rgba(19, 27, 22, .14); } .lf-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; font-size: 11px; color: #fff; } .lf-swatch input { display: none; } .lf-swatch:has(input:checked), .lf-swatch.is-checked { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); } .lf-swatch-none { background: var(--surface); border: 1px dashed var(--line); color: var(--muted); } .lf-swatch-none:has(input:checked), .lf-swatch-none.is-checked { border: 2px solid var(--ink); box-shadow: none; } .lf-emojipick { cursor: pointer; } .lf-emojipick input { display: none; } .lf-emojipick span { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; } .lf-emojipick:hover span { border-color: var(--primary); } .lf-emojipick:has(input:checked) span, .lf-emojipick.is-checked span { border-color: var(--primary); background: var(--primary-soft); } /* Document grid view */ .lf-docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; } .lf-doccard { display: flex; flex-direction: column; gap: 11px; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .lf-doccard:hover { box-shadow: 0 10px 26px rgba(19, 27, 22, .10); transform: translateY(-2px); border-color: var(--primary); } .lf-doccard.fresh { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .lf-doccard .tt { font-weight: 650; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lf-doccard .ss { font-size: 12px; color: var(--muted); margin-top: 3px; } .lf-doccard .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 10px; } /* View toggle (grid / list) */ .lf-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); } .lf-viewtoggle a { padding: 7px 11px; font-size: 14px; line-height: 1; color: var(--muted); text-decoration: none; } .lf-viewtoggle a:hover { background: var(--bg); } .lf-viewtoggle a.on { background: var(--primary-soft); color: var(--primary-deep); } /* Grid size variants */ .lf-docgrid.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .lf-docgrid.small .lf-doccard { padding: 12px 13px; gap: 8px; } .lf-docgrid.small .lf-doccard .tt { font-size: 12.5px; } .lf-docgrid.small .lf-doccard .foot { padding-top: 7px; } .lf-docgrid.large { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .lf-docgrid.large .lf-doccard .tt { font-size: 15px; } .lf-doccard-summary { line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Login intro video */ /* Hochkant-Video (540x960): über die Höhe skalieren, sonst bleibt es winzig */ .lf-authvideo { display: block; width: auto; max-width: 100%; max-height: min(72vh, 760px); margin: 0 auto; border-radius: 14px; border: 1px solid var(--side-line); background: #000; box-shadow: 0 10px 26px rgba(28, 45, 52, .14); } /* Kompakte Abspiel-Kachel: Video lädt & startet erst auf Knopfdruck */ .lf-videoshell { max-width: 100%; width: 100%; margin-top: 30px; } .lf-videoshell .cover .fw6 { font-size: 17px; } .lf-videoshell .cover .small { font-size: 13.5px; } .lf-videoshell .cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 330px; cursor: pointer; font: inherit; color: var(--side-ink); background: linear-gradient(120deg, var(--green-soft), var(--surface) 70%); border: 1.5px solid var(--side-line); border-radius: 14px; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; } .lf-videoshell .cover:hover { border-color: var(--green); box-shadow: var(--shadow-2); } .lf-videoshell .playbtn { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 20px; padding-left: 4px; margin-bottom: 6px; box-shadow: 0 6px 18px rgba(1, 120, 84, .35); } /* Pricing table */ .lf-pricing-scroll { overflow-x: auto; border-radius: 16px; } .lf-pricing { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 6px 0; } .lf-pricing th, .lf-pricing td { text-align: center; padding: 7px 10px; font-size: 12.5px; } .lf-pricing th { background: var(--surface); border: 1px solid var(--line); border-bottom: none; padding: 16px 10px 14px; vertical-align: top; border-radius: 14px 14px 0 0; } .lf-pricing th.feat, .lf-pricing td.feat { background: transparent; border: none; text-align: left; white-space: nowrap; font-weight: 600; color: var(--ink); min-width: 175px; } .lf-pricing td { background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .lf-pricing tbody tr:last-child td { border-bottom: 1px solid var(--line); border-radius: 0 0 14px 14px; padding-bottom: 14px; } .lf-pricing tbody tr:nth-child(odd) td:not(.feat) { background: var(--bg); background: color-mix(in srgb, var(--surface) 97%, var(--ink)); } .lf-pricing th.current, .lf-pricing td.current { border-color: var(--plan-color); } .lf-pricing th.current { box-shadow: inset 0 3px 0 var(--plan-color); } .lf-pricing .plan-icon { font-size: 20px; } .lf-pricing .plan-name { font-weight: 800; letter-spacing: .04em; color: var(--plan-color); margin-top: 4px; } .lf-pricing .plan-tagline { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 2px; } .lf-pricing .plan-price { font-size: 24px; font-weight: 800; color: var(--plan-color); margin-top: 8px; letter-spacing: -0.02em; } .lf-pricing .plan-period { font-size: 11.5px; color: var(--muted); } .lf-pricing .plan-yearly { font-size: 10.5px; color: var(--muted); margin-top: 2px; } .lf-pricing .plan-cta { margin-top: 10px; display: inline-flex; } .lf-pricing .check { color: var(--plan-color); font-weight: 800; font-size: 14px; } .lf-pricing .val { font-weight: 600; color: var(--plan-color); } .lf-pricing .muted-dash { color: var(--line); } .lf-pricing .feat-emoji { width: 20px; display: inline-block; } /* Design-System-Upgrade: Zustände & Mikrointeraktionen */ .lf-date.overdue { background: var(--red-soft); color: var(--red-ink); } .lf-chip { transition: background .14s ease, border-color .14s ease, transform .12s ease; } .lf-chip:hover { transform: translateY(-1px); } .lf-btn { transition: background .14s ease, box-shadow .14s ease; } /* Nested folder tree (details-basiert, beliebig tief) */ .lf-subtree > summary { list-style: none; display: flex; align-items: center; cursor: pointer; } .lf-subtree > summary::-webkit-details-marker { display: none; } .lf-caret { width: 14px; flex: none; font-size: 9px; color: var(--side-muted); transition: transform .15s ease; display: inline-block; text-align: center; } details[open] > summary .lf-caret { transform: rotate(90deg); } .lf-subtree .lf-item.sub { font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; } /* "More Life Areas" + AI Collections */ .lf-more > summary { list-style: none; cursor: pointer; } .lf-more > summary::-webkit-details-marker { display: none; } .lf-moretoggle { color: var(--side-muted); font-size: 13px; font-weight: 600; } .lf-aicollections .lf-aiitem { color: var(--side-ink-soft); } .lf-aicollections .lf-aiitem:hover { background: var(--ai-soft); color: var(--ai-deep); } .lf-aicollections .lf-aiitem.on { background: var(--ai-soft); color: var(--ai-deep); box-shadow: inset 3px 0 0 var(--ai); } .lf-aicollections > summary:hover { background: var(--ai-soft); border-radius: 9px; color: var(--ai-deep); } /* ============ Landing pages (ld-*) ============ */ .ld-body { background: var(--bg); margin: 0; } .ld-nav { display: flex; align-items: center; gap: 12px; padding: 16px 28px; max-width: 1080px; margin: 0 auto; } .ld-nav .grow { flex: 1; } .ld-solutions { position: relative; } .ld-solutions > summary { list-style: none; cursor: pointer; } .ld-solutions > summary::-webkit-details-marker { display: none; } .ld-solutions-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); padding: 6px; display: flex; flex-direction: column; } .ld-solutions-menu a { padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .ld-solutions-menu a:hover { background: var(--green-soft); color: var(--green-deep); } .ld-page { max-width: 980px; margin: 0 auto; padding: 0 22px 60px; } .ld-hero { text-align: center; padding: 56px 0 10px; } .ld-hero-icon { font-size: 40px; margin-bottom: 10px; } .ld-hero h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.12; margin: 12px auto 0; max-width: 640px; } .ld-sub { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 560px; margin: 14px auto 22px; } .ld-section { margin-top: 44px; } .ld-h2 { font-size: 22px; text-align: center; } .ld-problem { border-left: 3px solid var(--warn); max-width: 720px; margin: 0 auto; } .ld-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; } .ld-feature { padding: 18px; } .ld-prompt { max-width: 640px; margin: 0 auto; border-left: 3px solid var(--ai); background: linear-gradient(100deg, var(--ai-soft) 0%, var(--surface) 55%); display: flex; flex-direction: column; gap: 12px; } .ld-prompt-input { font-size: 17px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); padding: 13px 16px; } .ld-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 20px; } .ld-step { padding: 18px; } .ld-stepnum { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-bottom: 10px; } .ld-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .ld-trust-item { display: flex; gap: 12px; align-items: flex-start; padding: 18px; } .ld-trust-item > span { font-size: 22px; } .ld-cta { text-align: center; padding: 44px 26px; border-radius: var(--r-card); border: 1px solid var(--line); } .ld-footer { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; max-width: 980px; margin: 30px auto 0; padding: 18px 22px 30px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .ld-footer-links { display: flex; gap: 12px; flex-wrap: wrap; } .ld-footer-links a { color: var(--muted); font-weight: 600; } .ld-footer-links a:hover { color: var(--green-deep); } @media (max-width: 640px) { .ld-nav { padding: 12px 16px; } .ld-hero { padding-top: 34px; } } /* ============ Sidebar: abgerundete Kästen + Bereichsfarben ============ */ /* Aufgeklappter Bereich wird zur abgerundeten Box; die Akzentfarbe des Bereichs (--area-accent) färbt Aktiv-Zustand, Hover und Unterbaum. */ /* Jeder Lebensbereich ist PERMANENT eine abgerundete Box; die Bereichsfarbe ist fester Bestandteil (Farbbalken + zarte Toenung), nicht nur Hover/Aktiv. */ .lf-area { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--side-line); border-radius: 12px; padding: 3px; margin: 4px 0; box-shadow: var(--shadow-1); } .lf-area .lf-area-row .lf-item { border-radius: 8px; box-shadow: inset 3px 0 0 var(--area-accent, var(--green)); background: transparent; /* Fallback */ background: color-mix(in srgb, var(--area-accent, var(--green)) 5%, transparent); } .lf-area .lf-area-row .lf-item:hover { background: rgba(255, 255, 255, 0.65); /* Fallback */ background: color-mix(in srgb, var(--area-accent, var(--green)) 9%, white); } .lf-area .lf-area-row .lf-item.on { background: var(--side-active-bg); color: var(--side-active-ink); /* Fallback */ background: color-mix(in srgb, var(--area-accent, var(--green)) 13%, white); color: color-mix(in srgb, var(--area-accent, var(--green)) 72%, black); box-shadow: inset 3px 0 0 var(--area-accent, var(--green)), 0 1px 3px rgba(15, 31, 23, 0.06); } /* Unterbaum: Akzentlinie in Bereichsfarbe, Einträge als runde Kästchen */ .lf-subwrap { border-left: 3px solid var(--side-line); /* Fallback */ border-left: 3px solid color-mix(in srgb, var(--area-accent, var(--green)) 45%, transparent); margin: 2px 4px 4px 14px; padding-left: 5px; } .lf-subwrap .lf-item.sub { border-radius: 8px; } .lf-subwrap .lf-item.sub:hover { background: color-mix(in srgb, var(--area-accent, var(--green)) 9%, white); color: color-mix(in srgb, var(--area-accent, var(--green)) 70%, black); } .lf-subwrap .lf-item.sub.on { background: color-mix(in srgb, var(--area-accent, var(--green)) 14%, white); color: color-mix(in srgb, var(--area-accent, var(--green)) 72%, black); box-shadow: inset 2px 0 0 var(--area-accent, var(--green)); font-weight: 600; } .lf-subwrap .lf-caret:hover, .lf-subtree[open] > summary .lf-caret { color: color-mix(in srgb, var(--area-accent, var(--green)) 80%, black); } /* Geöffneter Ordner: Unterordner-Chips in der Bereichsfarbe */ .lf-areachip { background: color-mix(in srgb, var(--area-accent, var(--green)) 10%, white); border-color: color-mix(in srgb, var(--area-accent, var(--green)) 30%, transparent); color: color-mix(in srgb, var(--area-accent, var(--green)) 72%, black); font-weight: 600; } .lf-areachip:hover { background: color-mix(in srgb, var(--area-accent, var(--green)) 18%, white); border-color: color-mix(in srgb, var(--area-accent, var(--green)) 45%, transparent); } /* AI Collections: gleicher fester Box-Look, blauer Akzent als Bestandteil */ .lf-aicollections { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--side-line); border-radius: 12px; padding: 3px; margin: 2px 0; box-shadow: var(--shadow-1); } .lf-aicollections > summary { border-radius: 8px; box-shadow: inset 3px 0 0 var(--ai); background: color-mix(in srgb, var(--ai) 5%, transparent); color: var(--side-ink-soft); } /* Checkout: Zahlungsmethoden-Karten */ .lf-paygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .lf-paycard { display: flex; align-items: center; gap: 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .14s ease, box-shadow .14s ease; } .lf-paycard:hover { border-color: var(--green); } .lf-paycard input { display: none; } .lf-paycard .lf-paybadge { width: 38px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 13px; font-weight: 800; } .lf-paycard .lf-paycheck { opacity: 0; color: var(--green); font-weight: 800; } .lf-paycard:has(input:checked), .lf-paycard.is-checked { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .lf-paycard:has(input:checked) .lf-paycheck, .lf-paycard.is-checked .lf-paycheck { opacity: 1; } /* ============ Einheitliche Dokument-Karten (Mockup-Struktur) ============ */ .lf-dcard { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .lf-dcard:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); border-color: #d3ddd6; } .lf-dcard.fresh { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .lf-dc-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1; border-radius: inherit; } .lf-dc-head { display: flex; align-items: center; gap: 11px; } .lf-dcicon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: var(--green-soft); color: var(--green-deep); flex: none; } .lf-dc-title { font-weight: 700; font-size: 14.5px; line-height: 1.3; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lf-dc-menu { position: relative; z-index: 2; color: var(--muted); font-weight: 800; font-size: 15px; padding: 2px 9px; border-radius: 8px; flex: none; } .lf-dc-menu:hover { background: var(--bg); color: var(--ink); } .lf-dcrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); min-height: 19px; } .lf-dcrow .ic { width: 17px; text-align: center; opacity: .8; flex: none; } .lf-dcrow .muted { color: var(--muted); } .lf-dc-divider { height: 1px; background: var(--line-soft); margin: 2px 0; } .lf-dcpill { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 650; } .lf-dcpill.ok { background: var(--green-soft); color: var(--green-deep); } .lf-dcpill.warn { background: var(--warn-soft); color: var(--warn-ink); } .lf-dcpill.danger { background: var(--red-soft); color: var(--red-ink); } .lf-dcpill.muted { background: var(--bg); color: var(--muted); } .lf-dc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; min-height: 26px; } .lf-dcbadge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 600; color: var(--side-ink-soft); } .lf-dcbadge.danger { background: var(--red-soft); border-color: transparent; color: var(--red-ink); } /* Status-Legende unter der Liste */ .lf-statuslegend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 18px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; color: var(--muted); } .lf-statuslegend b { color: var(--ink); font-size: 12.5px; } .lf-statuslegend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; } /* Sprachwechsler */ .lf-langmenu { position: relative; display: inline-flex; } .lf-langmenu > summary { list-style: none; cursor: pointer; font-size: 12.5px; } .lf-langmenu > summary::-webkit-details-marker { display: none; } .lf-langmenu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow-3); } .lf-langgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .lf-langopt { width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink); padding: 7px 10px; border-radius: 8px; } .lf-langopt:hover { background: var(--green-soft); color: var(--green-deep); } .lf-langopt.on { background: var(--green-soft); color: var(--green-deep); font-weight: 700; } .lf-side .lf-langmenu { margin: 10px 8px 0; } .lf-side .lf-langmenu-panel { left: 0; right: auto; } .lf-auth-lang { position: absolute; top: 18px; right: 22px; z-index: 20; } /* Attention card rows */ .lf-attnrow { display: flex; align-items: center; gap: 11px; padding: 8px 6px; border-radius: 9px; } .lf-attnrow:hover { background: var(--bg); } .lf-attnrow + .lf-attnrow { border-top: 1px solid var(--line-soft); } .lf-attnicon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; flex: none; } .lf-attnicon.danger { background: var(--red-soft); color: var(--red-ink); } .lf-attnicon.warn { background: var(--warn-soft); color: var(--warn-ink); } .lf-attnicon.ai { background: var(--ai-soft); color: var(--ai-deep); } .lf-attnicon.ok { background: var(--green-soft); color: var(--green-deep); } /* Missing documents: progress + rows */ .lf-progress { height: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; } .lf-progress span { display: block; height: 100%; border-radius: 99px; background: var(--green); transition: width .3s ease; } .lf-missrow { align-items: center; padding: 7px 0; } .lf-missrow + .lf-missrow { border-top: 1px solid var(--line-soft); } .lf-missdot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .lf-missdot.found { background: var(--green); } .lf-missdot.missing { background: var(--red); } .lf-missdot.not_needed { background: var(--line); } /* Upload review: edit details */ .lf-editdetails summary { list-style: none; cursor: pointer; display: inline-flex; } .lf-editdetails summary::-webkit-details-marker { display: none; } /* Merch shop */ .ld-shop { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; } .ld-shop-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; } .ld-shop-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .lf-merch-tile { height: 110px; border-radius: 12px; background: var(--green-soft); display: grid; place-items: center; font-size: 44px; } .ld-shop-cart { padding: 16px 18px; position: sticky; top: 18px; } .lf-merch-tile.dark { background: #131b2e; } .lf-merch-img { width: 100%; height: auto; aspect-ratio: 600 / 440; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-soft); display: block; } @media (max-width: 900px) { .ld-shop-grid { grid-template-columns: 1fr; } .ld-shop-cart { position: static; } /* Cart rutscht unter die Produkte */ } /* Marketing pages (homepage, features, security, checklists) */ .ld-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 860px) { .ld-grid3 { grid-template-columns: 1fr; } } .ld-checklist li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); list-style: none; } .ld-checklist { padding: 0; margin: 14px 0 0; } .ld-prose { max-width: 720px; margin: 0 auto; line-height: 1.6; } /* RTL (Arabisch/Urdu): Flex/Grid spiegeln automatisch über dir=rtl — hier nur die physischen left/right-Eigenschaften, die nicht mitdrehen. */ [dir="rtl"] .lf-side { border-right: none; border-left: 1px solid var(--side-line); } [dir="rtl"] .lf-item.on { box-shadow: inset -3px 0 0 var(--green), 0 1px 3px rgba(15, 31, 23, 0.08); } [dir="rtl"] .lf-nav.areas .lf-item.sub.on { box-shadow: inset -2px 0 0 var(--area-accent, var(--green)); } [dir="rtl"] .lf-area .lf-area-row .lf-item { box-shadow: inset -3px 0 0 var(--area-accent, var(--green)); } [dir="rtl"] .lf-subwrap { border-left: none; border-right: 3px solid var(--side-line); margin: 2px 14px 4px 4px; padding-left: 0; padding-right: 5px; } [dir="rtl"] .lf-share-menu { right: auto; left: 0; } [dir="rtl"] .lf-langmenu-panel { right: auto; left: 0; } [dir="rtl"] .lf-side .lf-langmenu-panel { left: auto; right: 0; } [dir="rtl"] .lf-auth-lang { right: auto; left: 22px; } /* Slogans: UOAC-Strip + Logo-Tagline */ .lf-uoac { font-weight: 500; letter-spacing: .01em; color: var(--muted); white-space: nowrap; } .lf-uoac b { color: var(--green); font-weight: 800; font-size: 1.18em; } .lf-side .lf-tagline { font-size: 10.5px; color: var(--side-muted); font-style: italic; padding: 4px 8px 0; line-height: 1.35; } .lf-faq summary::-webkit-details-marker { display: none; } .lf-faq summary::after { content: "▾"; float: right; color: var(--muted); } .lf-faq[open] summary::after { content: "▴"; } /* ============ Mobile-Feinschliff (Final Polish) ============ */ @media (max-width: 760px) { /* Öffentliche Seiten: Nav umbrechen statt horizontal scrollen */ .ld-nav { flex-wrap: wrap; row-gap: 8px; } .ld-footer { flex-direction: column; gap: 10px; text-align: center; } .lf-uoac { white-space: normal; } /* App: Sidebar als Hamburger-Overlay — Inhalt (Attention Card) zuerst */ .lf-mobilebar { display: flex; } .lf-app { height: auto; min-height: calc(100vh - 54px); } .lf-side { display: none; } body.nav-open .lf-side { display: flex; position: fixed; top: 54px; left: 0; right: 0; bottom: 0; z-index: 90; width: 100%; overflow-y: auto; border-right: none; box-shadow: 0 18px 40px rgba(15,31,23,.25); } .lf-content { padding: 20px 16px 60px; overflow-y: visible; } .lf-top { flex-wrap: wrap; gap: 10px; } .lf-top .lf-search { order: 3; width: 100%; } /* Dashboard-Spalten und Karten-Raster einspaltig */ .grid { grid-template-columns: 1fr !important; } .lf-attnrow { flex-wrap: wrap; } } .lf-auth-legal { position: fixed; bottom: 14px; right: 22px; z-index: 20; color: var(--muted); font-size: 11px; } .lf-auth-legal a:hover { color: var(--green-deep); } /* Mobile-Topbar (nur unter 760px sichtbar) */ .lf-mobilebar { display: none; position: sticky; top: 0; z-index: 95; align-items: center; gap: 12px; padding: 10px 14px; background: var(--side-bg); border-bottom: 1px solid var(--side-line); } .lf-burger { border: 1px solid var(--side-line); background: var(--surface); border-radius: 9px; font-size: 17px; padding: 5px 11px; cursor: pointer; color: var(--side-ink); line-height: 1; } @media (min-width: 761px) { .lf-mobilebar { display: none !important; } } /* Reihenfolge-Fix: Basis-display:none stand nach dem Media-Block */ @media (max-width: 760px) { .lf-mobilebar { display: flex; } } /* Ruhige Karten: Punkt statt Balken im Normalzustand, Unterteil unten verankert */ .lf-dcdot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin: 0 5px 0 4px; } .lf-dcdot.ok { background: var(--green); } .lf-dcdot.muted { background: var(--line); } .lf-dcard .lf-dc-divider { margin-top: auto; } /* Detailseite: ruhige Fakten-Karte */ .lf-facts { padding: 16px 18px; } .lf-factrow { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; align-items: baseline; } .lf-factrow:last-child { border-bottom: none; } .lf-factrow .lbl { width: 130px; flex: none; color: var(--muted); font-size: 12px; } .lf-factrow .val { font-weight: 600; } /* Freundliche Leere-Zustände */ .lf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; } /* Dark Mode: Bereichsfarben mit dunkler Basis mischen statt mit Weiß */ html[data-theme="dark"] .lf-area .lf-area-row .lf-item { background: color-mix(in srgb, var(--area-accent, var(--green)) 16%, #121a15); color: var(--side-ink); } html[data-theme="dark"] .lf-area .lf-area-row .lf-item:hover, html[data-theme="dark"] .lf-area .lf-area-row .lf-item.on { background: color-mix(in srgb, var(--area-accent, var(--green)) 24%, #121a15); color: var(--side-ink); } html[data-theme="dark"] .lf-nav.areas .lf-item.sub:hover, html[data-theme="dark"] .lf-nav.areas .lf-item.sub.on { background: color-mix(in srgb, var(--area-accent, var(--green)) 20%, #121a15); color: var(--side-ink); } html[data-theme="dark"] .lf-item:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .lf-merch-tile { background: #1d2a23; } html[data-theme="dark"] .lf-uoac b { color: #5fd3a6; } /* ===== Utility-Erweiterung (Inline-Style-Diät) ===== Typo-, Spacing- und Flex-Kürzel für die häufigsten Muster — neue Views bitte diese Klassen statt style="" verwenden. */ .fw6 { font-weight: 600; } .fw65 { font-weight: 650; } .fw7 { font-weight: 700; } .fs10 { font-size: 10.5px; } .fs11 { font-size: 11px; } .fs13 { font-size: 13.5px; } .fs16 { font-size: 16px; } .fs22 { font-size: 22px; } .fs24 { font-size: 24px; } .jcc { justify-content: center; } .jce { justify-content: flex-end; } .aic { align-items: center; } .mt3 { margin-top: 3px; } .mt8 { margin-top: 8px; } .mb8 { margin-bottom: 8px; } .cgreen { color: var(--primary-deep); } .pad22 { padding: 22px 24px; } /* PDF Survival Kit: Quote-Platzhalter für fehlende Bilder */ .lf-kitquote { aspect-ratio: 1 / 1; border-radius: 12px; background: var(--green-soft); display: flex; flex-direction: column; justify-content: center; padding: 22px; font-weight: 700; font-size: 16.5px; line-height: 1.4; color: var(--green-deep); border: 1px solid var(--line-soft); } .lf-kitquote .mark { font-size: 40px; line-height: .6; opacity: .35; } .lf-kitquote.dark { background: #131b2e; color: #e8efe9; } /* ============ Feste Top-Leiste (alle Public-Seiten, Landing-Layout) ============ */ /* Wrapper full-width sticky; .ld-nav darin bleibt der zentrierte Inhalt. Fallback: deckender Seitenhintergrund — Blur nur als Progressive Enhancement. */ .ld-navbar { position: sticky; top: 0; z-index: 80; background: var(--bg); border-bottom: 1px solid var(--line-soft); } @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) and (background: color-mix(in srgb, red 50%, transparent)) { .ld-navbar { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); } } /* Anker-Ziele (z. B. #downloads) nicht unter der festen Leiste verstecken */ .ld-body :target, .ld-body [id] { scroll-margin-top: 84px; } /* ============ Feste App-Topbar (Desktop) ============ */ /* lf-main = rechte Spalte: Topbar fix, lf-content scrollt darunter. */ .lf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lf-main > .lf-content { min-height: 0; } .lf-appbar { display: flex; align-items: center; gap: 12px; padding: 11px 24px; border-bottom: 1px solid var(--line-soft); background: var(--surface); } .lf-appbar .lf-search { flex: 1; max-width: 620px; } @media (max-width: 760px) { .lf-appbar { display: none; } /* mobil übernimmt .lf-mobilebar */ .lf-main { display: block; } } /* Notfall-Eintrag in der Sidebar: bewusst auffällig (rot), eigener Block */ .lf-side .lf-sos { color: var(--red-ink); background: var(--red-soft); border-radius: 9px; font-weight: 700; margin-bottom: 6px; } .lf-side .lf-sos:hover, .lf-side .lf-sos.on { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red-ink); color: var(--red-ink); } /* ============ Sidebar: einheitliche bunte Boxen (wie Life Areas) ============ */ .lf-navbox { border: 1px solid var(--side-line); border-radius: 12px; margin: 4px 0; box-shadow: var(--shadow-1), inset 3px 0 0 var(--item-accent, var(--green)); background: rgba(255, 255, 255, 0.55); /* Fallback */ background: color-mix(in srgb, var(--item-accent, var(--green)) 6%, rgba(255, 255, 255, 0.6)); } .lf-navbox:hover { background: color-mix(in srgb, var(--item-accent, var(--green)) 12%, white); } .lf-navbox.on { background: var(--side-active-bg); color: var(--side-active-ink); } html[data-theme="dark"] .lf-navbox { background: color-mix(in srgb, var(--item-accent, var(--green)) 13%, transparent); border-color: var(--line-soft); } html[data-theme="dark"] .lf-navbox:hover { background: color-mix(in srgb, var(--item-accent, var(--green)) 22%, transparent); } /* ============ Topbar: festes AI-Fragefeld + Emergency ============ */ /* Das Herzstück der App: füllt die Leiste, AI-Verlauf, deutlich sichtbar */ .lf-aibar { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: var(--surface); /* Fallback */ background: linear-gradient(100deg, var(--ai-soft) 0%, var(--surface) 55%); border: 1.5px solid color-mix(in srgb, var(--ai) 45%, var(--line)); border-radius: 13px; padding: 9px 14px; box-shadow: var(--shadow-1); } .lf-aibar:hover { border-color: var(--ai); } .lf-aibar:focus-within { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-soft); } .lf-aibar input { flex: 1; border: none; background: transparent; color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 500; outline: none; min-width: 0; } .lf-aibar input::placeholder { color: var(--ai-deep); opacity: .75; } .lf-aibar .lf-spark { width: 24px; height: 24px; font-size: 10px; flex: none; } .lf-aibar .kbd { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); background: var(--surface); flex: none; } .lf-sosbtn { background: var(--red-soft); color: var(--red-ink); font-weight: 700; border-color: transparent; } .lf-sosbtn:hover { background: var(--red-soft); filter: brightness(.96); color: var(--red-ink); } /* Logout unten in der Sidebar: exakt wie der Settings-Baustein darüber */ .lf-side button.lf-item.lf-logoutitem { width: 100%; font: inherit; cursor: pointer; text-align: left; --item-accent: #017854; } /* ============ Größenansicht (90/100/110) + Sidebar-Ansichten ============ */ html[data-density="90"] .lf-content { zoom: 0.9; } html[data-density="110"] .lf-content { zoom: 1.1; } .lf-side[data-view="compact"] { zoom: 0.88; } .lf-side[data-view="mini"] { zoom: 0.76; } .lf-sideview { align-self: flex-start; margin: 2px 0 8px; border: 1px solid var(--side-line); background: transparent; color: var(--side-muted); font: inherit; font-size: 10.5px; font-weight: 600; border-radius: 7px; padding: 3px 8px; cursor: pointer; } .lf-sideview:hover { color: var(--side-ink); } /* Topbar-Logout: zurückhaltender Ghost — halb so dominant wie Hauptaktionen. Token-basiert, damit der Hover auch im Dark-Mode lesbar bleibt. */ .lf-btn.sm.lf-logoutbtn { background: transparent; color: var(--muted); font-weight: 600; padding: 4px 11px; font-size: 12px; border: 1px solid var(--line); } .lf-logoutbtn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } /* Geteilte An/Aus-Pille (View-Menü): links On, rechts Off — die aktive Seite ist gefüllt, die andere klickbar. */ .lf-pill2 { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .lf-pill2 form { display: inline-flex; } .lf-pill2 button { font: inherit; font-size: 12px; font-weight: 650; padding: 4px 14px; border: 0; cursor: pointer; background: transparent; color: var(--muted); } .lf-pill2 button:hover { color: var(--ink); } .lf-pill2 button.act { cursor: default; color: #fff; } .lf-pill2 button.act.yes { background: var(--green); } .lf-pill2 button.act.no { background: #5c6e74; } /* Dankes-Stempel auf der Early-Access-Seite: groß, leicht gedreht, an der Headline verankert und ragt von oben links sanft ins "H" — liegt wie Stempeltinte HINTER der Schrift. */ .lf-stamped { position: relative; } .lf-surveystamp { position: absolute; width: 460px; height: auto; top: -150px; left: -490px; transform: rotate(-11deg); opacity: .92; pointer-events: none; } @media (max-width: 1740px) { .lf-surveystamp { width: 380px; left: -400px; top: -110px; } } @media (max-width: 1480px) { .lf-surveystamp { width: 300px; left: -310px; top: -75px; } } @media (max-width: 1180px) { .lf-surveystamp { width: 210px; left: -210px; top: -30px; } } @media (max-width: 900px) { .lf-surveystamp { position: static; display: block; width: 180px; margin: 0 auto 10px; transform: rotate(-8deg); } } /* Foldero & Scatter rechts neben der Survey-Headline — rund wie ein Button zum Stempel auf der linken Seite */ .lf-surveyduo { position: absolute; width: 300px; height: 300px; object-fit: cover; right: -380px; top: -120px; pointer-events: none; border-radius: 50%; border: 4px solid var(--surface); box-shadow: var(--shadow-2); } @media (max-width: 1740px) { .lf-surveyduo { width: 250px; height: 250px; right: -300px; top: -90px; } } @media (max-width: 1480px) { .lf-surveyduo { width: 200px; height: 200px; right: -230px; top: -60px; } } @media (max-width: 1180px) { .lf-surveyduo { width: 150px; height: 150px; right: -160px; top: -35px; } } @media (max-width: 900px) { .lf-surveyduo { position: static; display: block; width: 170px; height: 170px; margin: 0 auto 8px; } } /* Marketing-Wand auf der Fan Base: Polaroid-Raster, abwechselnd gekippt */ .lf-postwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 16px; justify-items: center; } .lf-postwall .lf-polaroid { width: 100%; max-width: 220px; } .lf-postwall .lf-polaroid:nth-child(even) { transform: rotate(4deg); } .lf-postwall .lf-polaroid:hover { transform: rotate(0deg) scale(1.04); transition: transform .15s; } /* Polaroid für Marketing-Posts: leicht gekippt, handschriftliche Bildzeile */ .lf-polaroid { margin: 0; padding: 12px 12px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-2); transform: rotate(-5deg); width: 340px; } .lf-polaroid img { width: 100%; height: auto; display: block; border-radius: 3px; } .lf-polaroid figcaption { font-size: 14px; color: var(--muted); text-align: center; padding-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; } /* Submit-Finale: Polaroid · Button · Stempel bleiben IMMER nebeneinander und schrumpfen gemeinsam auf schmalen Screens */ .lf-submitrow { flex-wrap: nowrap; gap: clamp(10px, 3vw, 26px); } .lf-submitrow .lf-polaroid { width: clamp(94px, 24vw, 340px); flex: none; } .lf-submitrow img[src*="sort_this_out"] { width: clamp(86px, 21vw, 300px) !important; flex: none; } .lf-submitrow button[type="submit"] { white-space: nowrap; } @media (max-width: 700px) { .lf-submitrow button[type="submit"] { padding: 12px 16px !important; font-size: 14px !important; border-radius: 10px !important; } .lf-polaroid { padding: 5px 5px 4px; transform: rotate(-4deg); } .lf-polaroid figcaption { font-size: 8.5px; padding-top: 3px; } } /* Fan-Seiten-Banner: das passende Poster unter dem Seitenkopf */ .lf-fanbanner { display: block; width: 100%; max-width: 760px; height: auto; margin: 4px auto 14px; border-radius: 18px; border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); } /* Flatterband: Baustellen-Hinweis auf Fan Shop & Fan Base — volle Seitenbreite, bewusst schräg und unübersehbar, damit niemand echte Bestellungen erwartet */ .lf-tape { display: flex; justify-content: center; align-items: center; width: calc(100% + 40px); margin: 6px -20px 26px; padding: 20px 24px; transform: rotate(-1.6deg); background: repeating-linear-gradient(-45deg, #f7c948 0 34px, #1c2d34 34px 68px); border-radius: 4px; box-shadow: var(--shadow-2, var(--shadow-1)); } .lf-tape span { background: #1c2d34; color: #f7c948; font-size: 21px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 9px 26px; border-radius: 4px; white-space: nowrap; } @media (max-width: 760px) { .lf-tape { width: 100%; margin: 6px 0 22px; } .lf-tape span { white-space: normal; text-align: center; font-size: 16px; letter-spacing: .08em; } } /* Social-Login-Button (button_to-Form): volle Breite, Google-Look */ .lf-oauthform { width: 100%; } button.lf-oauthbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; transition: background .12s, border-color .12s; } button.lf-oauthbtn:hover { background: var(--bg-soft, #f6f8f7); border-color: var(--muted); } /* Ordnerbild-Auswahl (Folder options): runde Thumbnails, Auswahl = Ring */ .lf-imgpick { cursor: pointer; border-radius: 50%; display: inline-flex; } .lf-imgpick img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; border: 2px solid var(--line); transition: border-color .12s, transform .12s; } .lf-imgpick:hover img { transform: scale(1.08); } .lf-imgpick:has(input:checked) img { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); } /* Settings: kompakte Aufklapper-Dichte — alles soll ohne Scrollen passen */ .lf-settings .lf-acc > summary { padding: 9px 16px; font-size: 13.5px; } .lf-settings .lf-acc > .bd { padding: 0 14px 10px; } .lf-settings .lf-top { margin-bottom: 6px; } .lf-settings .col.gap10 { gap: 7px; } .lf-settings .lf-chip { font-size: 10.5px; padding: 2px 8px; } .lf-settings .lf-card { box-shadow: none; } .lf-settings .small.muted { line-height: 1.4; } /* Maskottchen-Hinweis: freundlicher Helfer, keine Comic-Seite — kleines Bild, viel Weißraum, weiche Karte */ .lf-mascothint { display: flex; gap: 18px; padding: 16px 18px; align-items: center; } .lf-mascothint .art { width: 104px; height: 104px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-1); flex: none; } @media (max-width: 600px) { .lf-mascothint { gap: 14px; } .lf-mascothint .art { width: 76px; height: 76px; } } /* Fan-Universum-Navigation: drei gleich große Buttons, aktive Seite dunkler */ .lf-fannav { min-width: 122px; justify-content: center; } .lf-fannav.on { background: color-mix(in srgb, var(--green) 16%, var(--surface)); border-color: var(--green-deep); color: var(--green-deep); font-weight: 700; } .lf-fannav.on:hover { background: color-mix(in srgb, var(--green) 22%, var(--surface)); } /* ============ Sidebar Icon-Modus (◧ Icons) — nur Symbole, wie Slack/Linear ============ */ @media (min-width: 761px) { .lf-side[data-view="icons"] { width: 72px; padding: 22px 10px 18px; zoom: 1; } .lf-side[data-view="icons"] .lbl, .lf-side[data-view="icons"] .count, .lf-side[data-view="icons"] .lf-logotext, .lf-side[data-view="icons"] .lf-tagline, .lf-side[data-view="icons"] .lf-navlbl, .lf-side[data-view="icons"] .lf-more, .lf-side[data-view="icons"] .lf-newfolder, .lf-side[data-view="icons"] .lf-folderinput, .lf-side[data-view="icons"] .lf-subwrap, .lf-side[data-view="icons"] .lf-tree-toggle { display: none; } .lf-side[data-view="icons"] .lf-item { justify-content: center; padding: 10px 0; } .lf-side[data-view="icons"] .lf-item .lf-areaemoji, .lf-side[data-view="icons"] .lf-item span[style*="width:18px"] { width: auto; } .lf-side[data-view="icons"] .lf-area { padding: 2px; } .lf-side[data-view="icons"] .lf-sideview { align-self: center; } .lf-side[data-view="icons"] .lf-sideview span { font-size: 10px; } } /* ============ Aufklappbare Sektionen (Dokument-Detailseite) ============ */ .lf-acc { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-1); } .lf-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 18px; font-weight: 650; font-size: 13.5px; } .lf-acc > summary::-webkit-details-marker { display: none; } .lf-acc > summary .chev { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform .15s; } .lf-acc[open] > summary .chev { transform: rotate(90deg); } .lf-acc > .bd { padding: 2px 18px 16px; } .lf-acc > summary:hover { color: var(--green-deep); } /* ============ Drag & Drop Overlay (Dokumentseite) ============ */ .lf-dropoverlay { display: none; position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, var(--green-soft) 80%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); align-items: center; justify-content: center; pointer-events: none; } .lf-dropoverlay.on { display: flex; } .lf-dropoverlay .inner { background: var(--surface); border: 2.5px dashed var(--green); border-radius: 18px; padding: 36px 52px; text-align: center; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 8px; align-items: center; }