/* ============================================================ AppFMIClub Design-System — "Die erste Vorstellung" Quelle der Wahrheit: fmi-mockup.html (Edgar-freigegeben, 2026-06-09) Eine Token-Schicht. Dark = Default. Light via .light auf . Regeln: Gold ist der einzige Leitakzent · keine Schatten · keine Karte-in-Karte · Sektions-Titel klein/uppercase/muted · 2–5 Blöcke pro Screen · SVG-Line-Icons statt Emojis. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } svg.ico { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; } :root { /* Flächen */ --bg: #0A0A0A; --bg2: #111111; --card: #161616; --card2: #1C1C1C; --border: #242424; --border2: #2E2E2E; /* Gold — einziger Leitakzent */ --gold: #C4A535; --gold-bright: #D4B540; --gold-dim: #8C7218; --gold-glow: rgba(196,165,53,0.12); --gold-glow2: rgba(196,165,53,0.06); --gold-border: rgba(196,165,53,0.25); --gold-border2: rgba(196,165,53,0.2); --on-gold: #000000; /* Status — sparsam, getönt */ --red: #E05252; --red-glow: rgba(224,82,82,0.10); --red-border: rgba(224,82,82,0.25); --green: #4CAF7D; --green-glow: rgba(76,175,125,0.10); --green-border: rgba(76,175,125,0.2); --blue: #5B8DEF; --blue-glow: rgba(91,141,239,0.12); --blue-border: rgba(91,141,239,0.2); /* Text */ --text: #F0EDE6; --text2: #9B9890; --text3: #5C5A56; /* Form */ --r: 14px; --r-sm: 10px; --r-xs: 6px; /* Typo */ --font-head: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; --transition: 0.18s cubic-bezier(0.4,0,0.2,1); /* Layout */ --tab-h: 64px; color-scheme: dark; } .light { --bg: #F5F2EA; --bg2: #EFEBE1; --card: #FFFFFF; --card2: #FAF8F3; --border: #E3DFD4; --border2: #D6D1C2; --gold: #A88A1E; --gold-bright: #8C7218; --gold-dim: #8C7218; --gold-glow: rgba(168,138,30,0.12); --gold-glow2: rgba(168,138,30,0.07); --gold-border: rgba(168,138,30,0.35); --gold-border2: rgba(168,138,30,0.25); --on-gold: #FFFFFF; --red: #C44438; --red-glow: rgba(196,68,56,0.10); --red-border: rgba(196,68,56,0.3); --green: #2E7D54; --green-glow: rgba(46,125,84,0.10); --green-border: rgba(46,125,84,0.28); --blue: #3D6BC9; --blue-glow: rgba(61,107,201,0.10); --blue-border: rgba(61,107,201,0.25); --text: #1C1914; --text2: #6E6A60; --text3: #A09A8C; color-scheme: light; } /* ── Base ───────────────────────────────────────────────── */ /* hidden-Attribut gewinnt IMMER — sonst hebelt jede display:flex-Komponentenregel es aus (.ld-menu stand deshalb permanent offen im Lead-Hero, Walkthrough 2026-06-12) */ [hidden] { display: none !important; } /* Offenes Modal sperrt den Hintergrund-Scroll komplett (Edgar 2026-06-12: „nur die Vorderseite scrollen"). :has ist auf allen Beta-Geräten da (iOS 15.4+/Chrome 105+). */ body:has(#modalRoot .modal) { overflow: hidden; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; min-height: 100vh; min-height: 100dvh; } h1, h2, h3, h4, p { margin: 0; } button { font-family: inherit; color: inherit; } a { color: var(--gold); text-decoration: none; } img { max-width: 100%; display: block; } input, select, textarea { font-family: var(--font-body); } ::placeholder { color: var(--text3); } /* ── App-Shell ──────────────────────────────────────────── */ .app-shell { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } #appMain { flex: 1; /* safe-area-inset-top: viewport-fit=cover zeichnet unter die Statusbar — ohne das Polster überlappt die Uhrzeit den Back-Button (Edgar-Handy 2026-06-12). */ padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px); } .app-shell footer { padding: 0 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px); font-size: 11px; color: var(--text3); text-align: center; } .app-shell footer p { margin: 0; } /* ── Page-Header ────────────────────────────────────────── */ .page-header { padding: 16px 0 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .page-header .greeting, .eyebrow { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; } h1.page-title, .page-title { font-family: var(--font-head); font-size: clamp(22px, 6.5vw, 26px); /* lange Vornamen bleiben auf 390px einzeilig */ font-weight: 800; letter-spacing: -0.5px; color: var(--text); line-height: 1.1; } .header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; padding-top: 4px; } .icon-btn { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); flex-shrink: 0; padding: 0; } .icon-btn:hover { border-color: var(--border2); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn svg path, .icon-btn svg circle, .icon-btn svg rect, .icon-btn svg line, .icon-btn svg polyline { stroke: var(--text2); } /* ── Typografie-Bausteine ───────────────────────────────── */ h2.section-title, .section-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; } .muted { color: var(--text2); } .faint { color: var(--text3); } .small { font-size: 12px; } .tiny { font-size: 11px; } .mono { font-family: var(--font-mono); } .gold { color: var(--gold); } .right { margin-left: auto; } .row { display: flex; align-items: center; gap: 8px; } .stack { display: flex; flex-direction: column; gap: 10px; } /* ── Section ────────────────────────────────────────────── */ .section { margin-bottom: 20px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .section-header .section-title { margin-bottom: 0; } .see-all { font-size: 12px; color: var(--gold); font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; } .divider { height: 1px; background: var(--border); margin: 4px 0 16px; border: none; } /* ── Cards ──────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .card + .card { margin-top: 10px; } .card-pad { padding: 14px; } /* ── Urgent-Card (Jetzt dran) ───────────────────────────── */ .urgent-card { background: var(--card); border: 1px solid var(--red-border); border-radius: var(--r); padding: 14px; position: relative; overflow: hidden; margin-bottom: 8px; cursor: pointer; transition: var(--transition); } .urgent-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); border-radius: 0 2px 2px 0; } .urgent-card:hover { border-color: rgba(224,82,82,0.45); } .urgent-card.gold { border-color: var(--gold-border2); } .urgent-card.gold::before { background: var(--gold); } .urgent-card .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; } .urgent-card.gold .tag { color: var(--gold); } .urgent-card .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.5s ease-in-out infinite; } .urgent-card.gold .tag::before { animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .urgent-card .title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .urgent-card .sub { font-size: 12px; color: var(--text2); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Buttons ────────────────────────────────────────────── */ .action-btn, .primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--gold); color: var(--on-gold); font-family: var(--font-body); font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: none; transition: var(--transition); } .action-btn:hover, .primary-btn:hover { background: var(--gold-bright); } .primary-btn:disabled { opacity: 0.4; cursor: default; } .primary-btn.big, .continue-btn { display: block; width: 100%; background: var(--gold); color: var(--on-gold); font-family: var(--font-head); font-size: 15px; font-weight: 700; padding: 14px; border-radius: var(--r); text-align: center; cursor: pointer; border: none; transition: var(--transition); } .continue-btn:hover { background: var(--gold-bright); } .continue-btn:disabled { opacity: 0.4; cursor: default; } .ghost-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--card); color: var(--text2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: var(--transition); } .ghost-btn:hover { border-color: var(--border2); color: var(--text); } .ghost-btn:disabled { opacity: 0.4; cursor: default; } .ghost-btn.gold-tint { background: var(--gold-glow); color: var(--gold); border-color: var(--gold-border2); } .danger-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; /* neutralisiert Legacy width:100% aus style.css */ background: var(--red-glow); color: var(--red); border: 1px solid var(--red-border); font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: var(--transition); } .text-btn { background: none; border: none; color: var(--gold); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0; } /* ── Pipeline-Strip ─────────────────────────────────────── */ .pipeline-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .pipeline-strip::-webkit-scrollbar { display: none; } .pipeline-chip { flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 90px; align-items: flex-start; text-align: left; /*