/* fuk-ui.css — geteiltes F&K-Design-System für alle *.schdbr.de-Werkzeuge. Eine Quelle für Farben, Schrift und Basis-Bausteine. Einbinden mit einer Zeile im jedes Moduls (wie fuk-nav.js): Modul-eigene Stylesheets nach dieser Zeile einbinden — sie überschreiben dann gezielt, wo ein Modul etwas Eigenes braucht. Siehe UNIFICATION.md (Stufe 1). */ :root { /* Kanonische F&K-Tokens (--fk-*): eine Wahrheit. */ --fk-ink: #1c1c1c; /* Text */ --fk-muted: #6b6b6b; /* Sekundärtext */ --fk-paper: #faf8f4; /* Seitengrund (warmer Papierton) */ --fk-card: #ffffff; /* Karten/Leisten */ --fk-chip: #f3efe6; /* leichte Flächen (Code, Buttons hell) */ --fk-line: #e7e3da; /* Rahmen/Trenner */ --fk-red: #d03334; /* F&K-Akzent */ --fk-red-soft: #fbeaea; /* Akzent-Hintergrund */ --fk-ok: #2e7d32; --fk-error: #b3261e; --fk-radius: 8px; --fk-sans: "Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Kompat-Aliase: bestehende Module funktionieren unverändert weiter (buchkurier: --fg/--bg/--border/--accent …; Landing: --ink/--paper/--red …). */ --fg: var(--fk-ink); --muted: var(--fk-muted); --bg: var(--fk-paper); --bg-alt: var(--fk-chip); --card: var(--fk-card); --border: var(--fk-line); --accent: var(--fk-red); --accent-light: var(--fk-red-soft); --ok: var(--fk-ok); --error: var(--fk-error); --error-light: var(--fk-red-soft); --ink: var(--fk-ink); --paper: var(--fk-paper); --line: var(--fk-line); --red: var(--fk-red); } /* ---- Basis (bewusst zurückhaltend; Modul-Layouts bleiben) ---- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--fk-sans); color: var(--fk-ink); background: var(--fk-paper); line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.2; color: var(--fk-ink); } a { color: var(--fk-red); } hr { border: 0; border-top: 1px solid var(--fk-line); margin: 1.2em 0; } .muted { color: var(--fk-muted); } /* ---- Buttons ---- */ button, .fk-btn { font: inherit; padding: 0.45em 0.9em; border-radius: var(--fk-radius); border: 1px solid transparent; background: var(--fk-red); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; } button:disabled, .fk-btn:disabled { opacity: 0.6; cursor: not-allowed; } .fk-btn-light { background: var(--fk-card); color: var(--fk-ink); border-color: var(--fk-line); } .fk-btn-link { background: none; border: none; padding: 0; color: var(--fk-red); text-decoration: underline; cursor: pointer; display: inline; } /* ---- Formularfelder ---- */ input[type="text"], input[type="number"], input[type="email"], input[type="search"], textarea, select { font: inherit; padding: 0.4em 0.6em; border: 1px solid var(--fk-line); border-radius: 6px; background: var(--fk-card); color: var(--fk-ink); } /* ---- Tabellen ---- */ table { border-collapse: collapse; } th, td { text-align: left; padding: 0.4em 0.8em; border-bottom: 1px solid var(--fk-line); vertical-align: top; } /* ---- Code ---- */ code { background: var(--fk-chip); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.95em; } pre { background: var(--fk-chip); padding: 0.7em 0.9em; border-radius: 6px; overflow-x: auto; } /* ---- Karte (opt-in) ---- */ .fk-card { background: var(--fk-card); border: 1px solid var(--fk-line); border-radius: 12px; padding: 16px 18px; }