/* ========================================================================== BAURAD - Design-Tokens Stand: 27.08.2026 Zusammenfuehrung aus DS-Bundle (Grundwahrheit) und Website-Bundle (Ist-Zustand der 30 Screens), nach den Entscheidungen vom 27.08.2026. Einzige Quelle fuer Farben, Typografie, Raster, Radien und Elevation. Werte hier nicht ueberschreiben, sondern hier aendern. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root{ /* --------------------------------------------------------------------- FARBEN --------------------------------------------------------------------- */ /* Flaechen */ --color-bg:#FFFFFF; /* Standard-Hintergrund aller Seiten */ --color-paper:#F7F3E8; /* Hero-Flaeche; Header nur auf der Startseite */ --color-surface:#F5F3F0; /* Sekundaerflaechen, Bildplatzhalter */ /* Text */ --color-ink:#2B2622; /* Text, Icons */ --color-ink-2:#6B645E; /* Sekundaertext, Labels, Eyebrow */ --color-caption:#6B645C; /* Hinweistexte */ --color-ink-3:#9A938C; /* Placeholder, Ordnungszahlen */ /* Struktur */ --color-line:#E5E1DC; /* einziger Grauton fuer Raender und Trennlinien */ /* Aktion */ --color-action:#FF6D00; /* ausschliesslich primaere Aktion, Fokus, Aktiv */ --color-action-hover:#E56200; --color-action-active:#CC5700; --color-action-text:#B84E00; /* Links, Text auf Orange-Tint */ --color-action-tint:#FFF3EB; /* Icon-Flaechen, aktive Chips */ /* Zustaende */ --color-disabled:#C9C3BA; --color-disabled-text:#8A8177; --color-success:#2E7D57; --color-success-tint:#EAF3EE; --color-error:#C4362B; --color-error-tint:#FBECEA; /* Navigation Bewusst als Deckkraft statt als deckende Flaeche: der Header steht auf Weiss und auf der Startseite auf --color-paper. Die Transparenz nimmt den jeweiligen Untergrund auf und wird auf der Startseite waermer. Hover ist dunkler als Aktiv - so gewollt, nicht tauschen. */ --color-nav-hover:rgba(43,38,34,0.06); --color-nav-active:rgba(43,38,34,0.035); --color-icon-active:#F0E6D3; /* Fuellung des Icons im aktiven Menuepunkt */ /* Sonstiges */ --color-selection:#FFE0C7; /* --------------------------------------------------------------------- TYPOGRAFIE Lora ausschliesslich fuer redaktionelle Headlines (Wissen, Wissen Artikel, Baufinanzierung). Inter fuer alles andere. --------------------------------------------------------------------- */ --font-ui:"Inter",system-ui,sans-serif; --font-serif:"Lora",Georgia,serif; /* Ueberschriften - fluid. Rampe von 64rem (1024px) bis zum Referenzwert bei 90rem (1440px), danach weiter bis zum Deckel. MIN, REF und MAX liegen auf dem Raster. */ --text-hero:clamp(3rem,calc(3rem + (3.5rem - 3rem) * ((100vw - 64rem) / 26rem)),4rem); --text-hero-lh:1.10; --text-hero-editorial:clamp(3.5rem,calc(3.5rem + (4rem - 3.5rem) * ((100vw - 64rem) / 26rem)),4.5rem); --text-hero-editorial-lh:1.08; /* Sektions-Display: die grossen Uppercase-Sektionstitel. Eigene Stufe zwischen Hero und H1, damit sie nicht mit dem Hero gleichziehen. */ --text-display:clamp(2.5rem,calc(2.5rem + (3rem - 2.5rem) * ((100vw - 64rem) / 26rem)),3.5rem); --text-display-lh:1.04; --text-h1:clamp(2rem,calc(2rem + (2.5rem - 2rem) * ((100vw - 64rem) / 26rem)),3rem); --text-h1-lh:1.15; --text-h1-track:-0.015em; --text-h2:clamp(1.5rem,calc(1.5rem + (2rem - 1.5rem) * ((100vw - 64rem) / 26rem)),2.5rem); --text-h2-lh:1.20; --text-h2-track:-0.01em; --text-h3:clamp(1.25rem,calc(1.25rem + (1.5rem - 1.25rem) * ((100vw - 64rem) / 26rem)),1.75rem); --text-h3-lh:1.30; /* Fliesstext, Labels, Buttons - fix in rem. Zeilenhoehen: bei kompaktem UI-Text so gesetzt, dass die Zeilenbox ein Vielfaches von 8px ist. Fliesstext ist davon bewusst ausgenommen - das Raster kennt fuer 16px nur 1.5 (24px) oder 2.0 (32px), beides liest sich schlechter als der Kanon 1.65. Lesbarkeit geht hier vor Raster. */ /* Wissen-Teaser-Titel: eigene Stufe laut Komponentendefinition im Design-System (.grid3 .wt-title, Lora 1.125rem/1.35). Auf die Typo-Skala gehoben, Durchschuss wie im DS - deutlich enger als Fliesstext, weil der Titel eine Ueberschrift ist, kein Absatz. */ --text-teaser-title:1.25rem; --text-teaser-title-lh:1.35; /* 20px */ /* Lead-Absatz: Fliesstext in Ueberschriftengroesse, eigene Stufe, damit er sich nicht als H3 tarnt und dessen Durchschuss verbiegt. */ --text-lead:1.5rem; --text-lead-lh:1.55; /* 24px */ --text-body-lg:1.25rem; --text-body-lg-lh:1.62; /* 20px, Kanon */ --text-body:1rem; --text-body-lh:1.65; /* 16px, Kanon */ --text-body-sm:0.875rem; --text-body-sm-lh:1.55; /* 14px, Kanon */ --text-caption:0.8125rem; --text-caption-lh:1.231; /* 13px -> Zeilenbox 16px */ --text-label:0.8125rem; --text-label-lh:1.231; /* 13px -> Zeilenbox 16px */ --text-label-track:0.09em; --text-badge:0.75rem; --text-badge-lh:1.333; /* 12px -> Zeilenbox 16px */ --text-badge-track:0.08em; --text-button:1rem; --text-button-lh:1.5; /* 16px */ /* Navigations-Label: eigene Stufe, nicht mit Eyebrow verwechseln. Uppercase 14/600 mit engerem Tracking als das Sektions-Label. */ --text-nav:0.875rem; --text-nav-lh:1.714; /* 14px -> Zeilenbox 24px */ --text-nav-track:0.06em; --leading-body:1.65; /* --------------------------------------------------------------------- RASTER Basis 8px, 4px als halber Schritt. Alle Abstaende, Groessen und Paddings kommen aus dieser Leiter. --------------------------------------------------------------------- */ --space-05:0.25rem; /* 4 */ --space-1:0.5rem; /* 8 */ --space-15:0.75rem; /* 12 */ --space-2:1rem; /* 16 */ --space-25:1.25rem; /* 20 */ --space-3:1.5rem; /* 24 */ --space-4:2rem; /* 32 */ --space-5:2.5rem; /* 40 */ --space-6:3rem; /* 48 */ --space-7:3.5rem; /* 56 */ --space-8:4rem; /* 64 */ --space-10:5rem; /* 80 */ --space-12:6rem; /* 96 */ --space-15x:7.5rem; /* 120 */ --space-page:2rem; /* Seitenrand 32 */ /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container:clamp(64rem,88vw,120rem); --container-read:45rem; /* Lesetext, fix, nicht fluid */ /* --------------------------------------------------------------------- BREAKPOINTS Feste Leiter. Komponenten duerfen sich nur hieraus bedienen. Achtung: Media Queries koennen var() nicht aufloesen. Diese Tokens sind die Referenz, in den Screens stehen die Pixelwerte literal. --------------------------------------------------------------------- */ --bp-xs:30rem; /* 480 */ --bp-mobile-sm:40rem; /* 640 - Klein-Mobil */ --bp-sm:48rem; /* 768 */ --bp-mobile:54rem; /* 864 - Layout Mobile/Desktop */ --bp-filter:56.25rem; /* 900 - Filter-Komponente */ --bp-md:64rem; /* 1024 */ --bp-lg:75rem; /* 1200 */ --bp-header:90.5rem; /* 1448 - Header-Navigation. Neu berechnet am 27.08.2026: die Rasteran- gleichung (nav gap 14->16, Aktionen gap 14->16) verbreitert die PL-Navigation um 12px, der alte Punkt 1432 haette dort zur Ueberlappung gefuehrt. Basis ist die im Header dokumentierte PL-Messung. Bei Aenderung der Header-Inhalte erneut messen, nicht uebernehmen. */ /* --------------------------------------------------------------------- RADIEN Pill ist Standard fuer Buttons, Chips, Selects, Avatare, Badges. --radius-category gilt ausschliesslich fuer die Hauskategorie-Kacheln (Bungalow, Einfamilienhaus, Doppelhaus, Tiny House). --------------------------------------------------------------------- */ --radius-pill:999px; --radius-control:0.5rem; /* 8 - funktionale Bedienelemente: Filter, Tabs, Sortierung, "Mehr laden", Toolbar, Hauskategorie-Kacheln. NICHT fuer CTAs. */ --radius-field:0.75rem; /* 12 - Eingabefelder, Textareas */ --radius-card:0.75rem; /* 12 - Karten und Flaechen */ --radius-card-lg:1rem; /* 16 - Advisor-, Editorial-, Teaser-Card */ --radius-surface:1.25rem; /* 20 - Modal, Hero-Medien, Glaskarte */ --radius-bubble:1rem 0.875rem 0.25rem 0.875rem; /* KI-Modul Frage, einzige asymmetrische Form im Projekt, Kanon */ /* --------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------- */ --btn-height:3.5rem; /* 56 */ --btn-height-sm:2.5rem; /* 40 */ /* --------------------------------------------------------------------- EINGABEFELDER --------------------------------------------------------------------- */ --field-height:3rem; /* 48 */ /* --------------------------------------------------------------------- CARDS - Innenabstaende --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- ELEVATION --------------------------------------------------------------------- */ --shadow-sm:0 1px 3px rgba(43,38,34,.20); /* kleiner Lift auf Chips, Badges */ --shadow-card-hover:0 10px 28px rgba(43,38,34,.10); --shadow-panel:0 14px 34px rgba(43,38,34,.08); --shadow-dropdown:0 18px 40px rgba(43,38,34,.12); --shadow-search:0 16px 44px rgba(43,38,34,.12); --shadow-overlay:0 24px 64px rgba(43,38,34,.20); /* --------------------------------------------------------------------- FOKUS --------------------------------------------------------------------- */ --focus-field-border:#FF6D00; --focus-ring-field:0 0 0 0.1875rem rgba(255,109,0,.14); --focus-ring:0 0 0 0.125rem #FFFFFF,0 0 0 0.3125rem rgba(255,109,0,.55); } /* ========================================================================== BASIS ========================================================================== */ *{box-sizing:border-box} html,body{margin:0;padding:0;scroll-behavior:smooth} body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:var(--color-bg); color:var(--color-ink); font-family:var(--font-ui); font-size:var(--text-body); line-height:var(--leading-body); } h1,h2,h3,h4,h5{font-family:var(--font-ui);font-weight:600;margin:0} h1{font-size:var(--text-h1);line-height:var(--text-h1-lh);font-weight:700;letter-spacing:var(--text-h1-track)} h2{font-size:var(--text-h2);line-height:var(--text-h2-lh);letter-spacing:var(--text-h2-track)} h3{font-size:var(--text-h3);line-height:var(--text-h3-lh)} .editorial,.editorial h1,.editorial h2,.editorial h3{font-family:var(--font-serif)} a{color:var(--color-action-text)} a:hover{color:var(--color-action)} ::selection{background:var(--color-selection)} code,pre{font-family:ui-monospace,"SF Mono",Menlo,monospace} input::placeholder,textarea::placeholder{color:var(--color-ink-3)} :focus-visible{outline:none;box-shadow:var(--focus-ring)}