/* ============================================================================ FloW Design-System — Reskin-Layer für DokuHilfe (Redesign 2026-05-31) Quelle: flow-software.eu / vorschau.css (neue Landing). Reskin = Tokens, Fonts, Farben, Buttons, Karten, Inputs im FloW-Look; Struktur bleibt. Wird in landing.html UND index.html als LETZTES Stylesheet eingebunden, damit es bestehende Inline-Styles überschreiben kann. Fonts via Google Fonts (im der Seite einbinden): Bricolage Grotesque (Headlines), IBM Plex Sans (Text), IBM Plex Mono (Labels). ============================================================================ */ :root { /* Brand-Farben */ --ink: #1A1612; --ink-soft: #2C4456; --ink-mute: #5A7187; --blue: #2D5A3D; --blue-deep: #234A31; --green: #4FAE3A; --green-deep: #2F8A22; --ochre: #C68A3B; /* Neutrale */ --paper: #F5F7FA; --paper-deep: #EBEFF4; --surface: #FFFFFF; --mist: #EEF2F7; --line: #DEE4EC; --line-soft: #EAEEF3; /* Akzent + Gradient */ --accent: #2D5A3D; --accent-2: #3F8F63; --grad: linear-gradient(135deg, #2D5A3D 0%, #3F8F63 100%); /* Dunkle Tech-Sektionen */ --dark: #0B1A2B; --dark-2: #0E2336; /* Radien */ --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; /* Schatten */ --shadow-sm: 0 1px 2px rgba(15,40,70,.05), 0 4px 14px rgba(15,40,70,.06); --shadow-md: 0 8px 24px rgba(15,40,70,.08), 0 24px 60px rgba(15,40,70,.08); --shadow-glow: 0 10px 30px rgba(45, 90, 61,.28); /* Fonts */ --font-head: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } /* ---------- Basis ---------- */ body.flow, .flow body, body[data-flow] { background: var(--paper); color: var(--ink); font-family: var(--font-body); } .flow h1, .flow h2, .flow h3, .flow h4, .flow .h-head { font-family: var(--font-head); color: var(--ink); letter-spacing: -.01em; } /* Eyebrow / Mono-Label */ .flow .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); } /* ---------- Buttons ---------- */ .flow .btn, .flow button.btn-primary, .flow .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 15px; border: 0; border-radius: var(--radius-sm); padding: 12px 20px; cursor: pointer; background: var(--grad); color: #fff; box-shadow: var(--shadow-glow); transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; } .flow .btn:hover, .flow .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04); } .flow .btn-secondary, .flow .btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .flow .btn-secondary:hover { border-color: var(--accent); } /* ---------- Karten / Flächen ---------- */ .flow .card, .flow .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; } /* ---------- Inputs ---------- */ .flow input[type=text], .flow input[type=email], .flow input[type=password], .flow textarea, .flow select { font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .flow input:focus, .flow textarea:focus, .flow select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 90, 61,.15); } /* ---------- Links / Akzente ---------- */ .flow a { color: var(--blue-deep); } .flow .accent-text { color: var(--accent); } .flow .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }