/* ============================================================= FF Laxenburg Bautagebuch - Design-Tokens Editorial / Premium / Wehr-Identitaet. Basis: Plakat-CI (Florianimesse, Florian-Magazin, Wehr-Wappen). Wehr-CI: Royal-Blau + Gold + Wappen-Rot (Rot im Token-Pool, nicht aktiv). Body Inter Tight, Display Source Serif 4 (aufrecht), Mast Bebas Neue. Bestehende Variablen-Namen behalten, Layer 2 darunter ergaenzt. ============================================================= */ :root { /* -------- Primaer-Farben (Wehr-CI, Plakat-basiert) -------- */ --color-primary: #1B4D8C; /* Wehr-Royal-Blau (Plakat-Headlines, Wappen-BG) */ --color-primary-deep: #001629; /* sehr tiefer Akzent, Footer-Boden, Overlay */ --color-primary-mid: #0B406C; /* gedaempfte Sekundaer-Akzent-Variante */ --color-primary-dark: #103D80; /* Hover-State Primary */ --color-primary-soft: #E1E9F4; /* Login-Hintergrund, Hover-Soft */ --color-link: #1B4D8C; /* -------- Wappen-Rot (Akzent fuer Status, Brand-Marker) ---- */ --color-red: #C8102E; /* Oesterreich-Rot aus Wappen-Schild */ --color-red-soft: #FBE6EA; --color-red-deep: #8C0A1F; /* -------- Gold-Akzent (Meilensteine, Highlights) ----------- */ --color-accent: #F4C300; /* Plakat-Gold (warm, Floriani-Sticker, Wehr-Eimer) */ --color-accent-warm: #E8B900; --color-accent-soft: #FFF4C6; /* -------- Status-Farben (fuer Meilenstein-Phasen) ---------- */ --color-status-planning: #6B7A8F; --color-status-active: #F4C300; --color-status-done: #2F7A4F; /* -------- Neutrale (Cool-White, kein Beige mehr) ----------- */ --color-text: #1A1F26; --color-text-muted: #5B6470; --color-text-soft: #8A929C; --color-text-on-dark: #ECEEF1; --color-bg: #FFFFFF; /* Reinweiss, wie Plakate */ --color-bg-soft: #F5F6F7; /* alternierend, minimal-cool */ --color-bg-alt: #EEF0F3; --color-bg-deep: #001629; --color-border: #E2E5E9; --color-line: #E8EBEF; --color-hairline: rgba(26, 31, 38, 0.08); /* -------- Aliase (Bestand nicht brechen) ------------------- */ --color-card-bg: var(--color-bg); --color-card-border: var(--color-border); --color-milestone-bg: var(--color-accent-soft); --color-milestone-accent: var(--color-red-deep); --color-overlay: rgba(0, 22, 41, 0.94); /* -------- Typografie --------------------------------------- * * Display: Source Serif 4 (aufrecht, Variable opsz+wght). * Editorial-Wehr-Stimme aus Plakaten (Florianimesse, * Florian-Magazin). Italic-Achse vorhanden, wird * nicht aktiv genutzt. * Body: Inter Tight (Bildstelle-Standard). * Mono: JetBrains Mono fuer Datums-Sticker und Mess-Werte. * Sans-Display: Bebas Neue fuer sehr grosse Hero-Headlines im * "FLORIAN"-Magazin-Cover-Stil. */ --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display-condensed: 'Bebas Neue', 'Anton', 'Inter Tight', sans-serif; /* Schrift-Skala (Fluid via clamp) */ --fs-eyebrow-xs: 0.68rem; --fs-eyebrow-sm: 0.78rem; --fs-eyebrow-md: 0.88rem; --fs-body-sm: 0.92rem; --fs-body: 1rem; --fs-body-lg: 1.12rem; --fs-lead: clamp(1.18rem, 0.95rem + 0.6vw, 1.35rem); --fs-h3: clamp(1.35rem, 1.05rem + 1.0vw, 1.85rem); --fs-h2: clamp(1.85rem, 1.3rem + 1.8vw, 2.65rem); --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem); --fs-display: clamp(3.2rem, 2.0rem + 5.0vw, 6.0rem); --tracking-eyebrow: 0.18em; --tracking-eyebrow-tight: 0.14em; --tracking-eyebrow-wide: 0.22em; --tracking-display: -0.012em; --tracking-headline: -0.005em; --line-height-base: 1.6; --line-height-tight: 1.12; --line-height-headline: 1.08; --line-height-eyebrow: 1; /* -------- Spacing (4er-Modulo + Fluid) -------------------- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-section: clamp(3rem, 2rem + 4vw, 6rem); /* -------- Layout (Bildstelle-Standard) -------------------- */ --content-max: 760px; --content-max-wide: 1440px; --wrap-max: 1440px; /* -------- Border-Radii (architektonisch knapp) ------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --card-radius: 4px; --border-hairline: 1px solid var(--color-hairline); --border-card: 1px solid var(--color-border); --border-strong: 1px solid var(--color-text); /* -------- Shadows (Editorial: Hairline + diffuser Glow) --- */ --shadow-xs: 0 1px 0 0 var(--color-hairline); --shadow-sm: 0 1px 2px rgba(0, 11, 23, 0.04), 0 0 0 1px var(--color-hairline); --shadow-md: 0 2px 4px rgba(0, 11, 23, 0.04), 0 8px 24px -8px rgba(0, 11, 23, 0.10); --shadow-lg: 0 4px 8px rgba(0, 11, 23, 0.05), 0 16px 40px -12px rgba(0, 11, 23, 0.16); --shadow-glow-gold: 0 0 0 1px rgba(244, 195, 0, 0.45), 0 6px 24px -8px rgba(244, 195, 0, 0.35); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); /* -------- Motion ------------------------------------------ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.45s; /* ========================================================= Layer 2: Komposition (Page, Hero, Wappen, On-Dark-Skala) Wird von Mockups, View-Pages, Hero-Headern wiederverwendet. Hardcoded-Werte gehoeren NICHT in HTML/Komponenten-CSS. ========================================================= */ /* Page-Surface (Body-BG, dezenter als reines Weiss) */ --color-bg-page: #F2F4F7; --color-bg-page-alpha-88: rgba(242, 244, 247, 0.88); /* Sticky-Nav-BG mit Backdrop-Blur */ --color-surface: #FFFFFF; /* Card-/Panel-Background, hebt sich von page-bg ab */ /* Overlays auf dunklem Grund */ --color-overlay-dark: rgba(0, 11, 23, 0.55); /* Topbar auf Hero-Dunkel */ /* Text-/Divider-Skala on-dark (fuer Hero-Dunkel, Cover, Footer) */ --color-on-dark-hi: rgba(255, 255, 255, 0.92); /* Caption, Highlight-Body */ --color-on-dark-base: rgba(255, 255, 255, 0.78); /* Body-Text auf Dunkel */ --color-on-dark-mid: rgba(255, 255, 255, 0.65); /* Sub-Text */ --color-on-dark-soft: rgba(255, 255, 255, 0.55); /* Mono / Meta */ --color-on-dark-faint: rgba(255, 255, 255, 0.5); /* Sehr dezent */ --color-divider-on-dark: rgba(255, 255, 255, 0.14); --color-divider-on-dark-soft: rgba(255, 255, 255, 0.08); --color-divider-on-dark-hair: rgba(255, 255, 255, 0.06); /* Gold-Alpha-Skala (Glows, Hovers, Trennlinien auf Dunkel) */ --color-accent-glow-strong: rgba(244, 195, 0, 0.7); --color-accent-glow: rgba(244, 195, 0, 0.6); --color-accent-divider: rgba(244, 195, 0, 0.42); --color-accent-hover-bg: rgba(244, 195, 0, 0.12); --color-accent-hover-border: rgba(244, 195, 0, 0.45); /* Wappen-/Logo-Groessen-Skala (Kanonisch fuer alle Pages) */ --size-wappen-hero: clamp(140px, 18vw, 220px); --size-wappen-header: 96px; --size-wappen-mini: 32px; /* Hero-Komposition (Padding, Min-Heights, Cover-Massen) */ --space-hero-y: clamp(2.5rem, 5vw, 4.5rem); --space-hero-x: clamp(1.5rem, 3vw, 3rem); --height-hero-min: 360px; --height-cover-min: 460px; /* Magazin-Cover-Display (Bebas Neue, Florian-Cover-Stil) */ --fs-mast: clamp(4.5rem, 11vw, 9rem); --line-height-mast: 0.85; /* Wappen-Shadows (kontextabhaengig) */ --shadow-wappen-cool: 0 8px 24px rgba(27, 77, 140, 0.18); /* auf hellem Grund */ --shadow-wappen-deep: 0 4px 12px rgba(0, 11, 23, 0.35); /* auf Royal-Blau-Header */ --shadow-wappen-warm: 0 8px 28px rgba(244, 195, 0, 0.25); /* auf Hero-Dunkel mit Gold-Glow */ color-scheme: light; } /* ============================================================= Dark-Mode: alle relevanten Tokens werden ueberschrieben. Aktivierung via [data-theme="dark"] auf . Standard ist Light. Toggle via assets/js/theme-toggle.js. ============================================================= */ [data-theme="dark"] { /* Page-Surface */ --color-bg-page: #0B1320; /* sehr dunkel mit leichtem Blau-Stich */ --color-bg-page-alpha-88: rgba(11, 19, 32, 0.88); --color-surface: #161E2D; /* Card-BG, hebt sich von page-bg ab */ --color-bg: #161E2D; --color-bg-soft: #1D2638; --color-bg-alt: #232E44; --color-bg-deep: #050810; /* Text-Skala */ --color-text: #ECEEF1; --color-text-muted: #B5BBC4; --color-text-soft: #8A929C; /* Borders, Lines, Hairlines */ --color-border: #2C3548; --color-line: #28324A; --color-hairline: rgba(255, 255, 255, 0.10); /* Primary heller fuer Lesbarkeit auf dunkel */ --color-primary: #6FA0E0; --color-primary-mid: #4A7FD0; --color-primary-dark: #8DB6E8; /* Hover wird heller im Dark, nicht dunkler */ --color-primary-soft: #1E2C44; /* Akzent bleibt Gold, Glow etwas staerker fuer Dark-Mode */ --color-accent-glow-strong: rgba(244, 195, 0, 0.85); --color-accent-glow: rgba(244, 195, 0, 0.75); --color-accent-hover-bg: rgba(244, 195, 0, 0.18); /* Wappen-Shadow auf hellem Grund war Cool-Blau, im Dark eher Gold-Glow */ --shadow-wappen-cool: 0 8px 28px rgba(244, 195, 0, 0.20); /* Card-Shadows weicher im Dark (auf dunkel sind harte Schatten unnoetig) */ --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 24px -8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px -12px rgba(0, 0, 0, 0.55); color-scheme: dark; } @media (min-width: 1921px) { :root { --wrap-max: 1920px; --content-max-wide: 1920px; } } * { box-sizing: border-box; } html { font-size: 17px; scroll-behavior: smooth; } @media (max-width: 600px) { html { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Anker-Sprungziele: Offset damit der Sticky-Header sie nicht verdeckt */ [id^="entry-"] { scroll-margin-top: 1.5rem; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--line-height-base); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headlines in Source Serif 4 (aufrecht), Editorial-Wehr-Stimme aus Plakaten */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-headline); line-height: var(--line-height-headline); font-variation-settings: "opsz" 60; margin: 0; color: var(--color-primary); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 32; } h4 { font-size: 1.2rem; font-variation-settings: "opsz" 14; } a { color: var(--color-link); } a:hover { color: var(--color-primary-dark); } img, video { max-width: 100%; display: block; }