/* ========================================================= Affolter Dental — Design Tokens (zentrale Quelle) --------------------------------------------------------- EINZIGE Quelle für Farben, Schriften, Abstände, Radien, Schatten und Layout-Masse. Komponenten und Seiten nutzen ausschliesslich diese CSS-Variablen — keine hartcodierten Werte im übrigen Code. Brand: Affolter Dental AG, Langenthal CH Tagline: "Für ein gesundes Lächeln." ========================================================= */ :root { /* ===================================================== PRIMITIVE FARBEN — extrahiert aus Logo, Flyern, Rollup, Bannern (Quellwerte: 1B5574, 2E92C7). ===================================================== */ /* Brand-Blau */ --ad-blue-900: #11374B; /* dunkles Navy — tiefste Flächen */ --ad-blue-800: #11374B; /* Navy — primäre dunkle Fläche */ --ad-blue-700: #1B5574; /* PRIMÄRES Brand-Blau — Logo, Button, Link */ --ad-blue-600: #25739D; /* Hover für blue-700 */ --ad-blue-500: #2E92C7; /* Akzent — helles Cyan-Blau */ --ad-blue-200: #B7CFDB; /* getönte blaue Fläche */ --ad-blue-100: #E4ECF1; /* hellste blaue Fläche */ /* Warmes Sand / Gold — Taglines, Divider, Micro-Labels */ --ad-sand-700: #8A6F3F; --ad-sand-600: #B89863; --ad-sand-500: #C9A977; /* PRIMÄRER Sand-Akzent */ --ad-sand-400: #D7BD93; --ad-sand-200: #EFE2C9; --ad-sand-100: #F8F1E2; /* warmes Creme */ /* Bordeaux / Wein — Team-Berufskleidung (nur Referenz) */ --ad-wine-700: #6B1F2A; --ad-wine-500: #8E2A39; /* Neutrale Farben */ --ad-white: #FFFFFF; --ad-paper: #FAFAF7; /* Off-White Seitenhintergrund */ --ad-grey-100: #F2F3F4; --ad-grey-200: #E6E6E6; --ad-grey-300: #C9CDD1; --ad-grey-500: #8A929A; --ad-grey-700: #4B5560; --ad-grey-900: #1F252C; --ad-black: #000000; /* ===================================================== SEMANTISCHE FARB-TOKENS — in Komponenten diese nutzen. ===================================================== */ /* Flächen */ --surface-page: var(--ad-paper); --surface-card: var(--ad-white); --surface-raised: var(--ad-white); --surface-sunken: var(--ad-grey-100); --surface-dark: var(--ad-blue-800); --surface-darker: var(--ad-blue-900); --surface-brand: var(--ad-blue-700); --surface-warm: var(--ad-sand-100); /* Vordergrund (Text) */ --fg-1: var(--ad-grey-900); --fg-2: var(--ad-grey-700); --fg-3: var(--ad-grey-500); --fg-on-dark-1: var(--ad-white); --fg-on-dark-2: rgba(255, 255, 255, 0.78); --fg-on-dark-3: rgba(255, 255, 255, 0.55); --fg-on-dark-body: rgba(255, 255, 255, 0.85); --fg-on-dark-lede: rgba(255, 255, 255, 0.88); --fg-on-brand: var(--ad-white); --fg-accent: var(--ad-sand-500); --fg-link: var(--ad-blue-700); --fg-link-hover: var(--ad-blue-600); /* Ränder / Trennlinien */ --border-subtle: var(--ad-grey-200); --border-strong: var(--ad-grey-300); --border-on-dark: rgba(255, 255, 255, 0.18); --border-on-dark-faint: rgba(255, 255, 255, 0.14); --border-link-on-dark: rgba(255, 255, 255, 0.3); --border-ghost: rgba(255, 255, 255, 0.4); --divider-gold: var(--ad-sand-500); --halo-sand: rgba(201, 169, 119, 0.35); /* Sand-Halo hinter Porträts (Team-Karten, wie Comic-Kreis) */ /* Fokus + Interaktion */ --focus-ring: var(--ad-blue-500); --focus-halo: rgba(46, 146, 199, 0.18); /* weicher Fokus-Schein (Formularfelder) */ --selection-bg: rgba(46, 146, 199, 0.25); /* Status */ --status-success: #2E7D5B; --status-warning: #C49039; --status-error: #B23B3B; --status-info: var(--ad-sand-500); /* ===================================================== SCHRIFT — Aptos-Display-Ersatz: Montserrat (Fonts werden pro Seite via geladen, siehe CLAUDE.md) ===================================================== */ --font-display: "Montserrat", "Aptos Display", "Helvetica Neue", Arial, sans-serif; --font-body: "Montserrat", "Aptos", "Helvetica Neue", Arial, sans-serif; --font-serif: "Lora", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; /* Typo-Skala (modular ~1.25, Anker 16px) */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-64: 4rem; --fs-80: 5rem; /* Mikro-Grössen — aus dem Startseiten-Design extrahiert (Nav-Links, Micro-Labels, Karten-Titel, Fliesstext-Varianten) */ --fs-11: 0.6875rem; --fs-13: 0.8125rem; --fs-15: 0.9375rem; --fs-17: 1.0625rem; /* Schriftgewichte */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* Zeilenhöhen */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.4; --lh-body: 1.5; --lh-relaxed: 1.55; --lh-open: 1.6; --lh-loose: 1.7; /* Laufweiten — breite ALL-CAPS sind Teil der Brand-Signatur */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.10em; --tracking-widest: 0.18em; /* ===================================================== ABSTÄNDE — 4px-Basis ===================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-22: 88px; --space-24: 96px; --space-32: 128px; --space-38: 150px; /* Layout-Masse — aus dem Startseiten-Design extrahiert */ --container-wide: 1200px; /* Header, Hero-Inhalt */ --container-default: 1100px; /* Team, Besuch, Footer */ --container-content: 1040px; /* Leistungen, Seitenköpfe */ --measure-lede: 540px; /* Hero-Lauftext */ --measure-intro: 520px; /* Sektions-Einleitung */ --measure-heading: 880px; /* Hero-Headline */ --header-height: 78px; --hero-min-height: 680px; --rule-width: 56px; /* goldene Trennlinie */ --tap-target: 44px; /* minimale Touch-Fläche */ /* Layout-Masse — aus den Unterseiten-Designs extrahiert */ --container-article-wide: 900px; /* Ratgeber: Vergleichs-Sektion */ --container-article: 800px; /* Ratgeber-Artikel */ --container-prose: 720px; /* Impressum, Datenschutz */ --measure-page-lede: 560px; /* Seitenkopf-Lauftext */ --measure-article: 620px; /* Schritt-Texte Implantat-Ablauf */ --measure-answer: 660px; /* FAQ-Antworten */ --rule-width-sm: 40px; /* kleine Goldlinie (Team-Karten) */ --rule-width-wide: 72px; /* breite Goldlinie (Seitenköpfe) */ --map-height: 520px; /* Google-Maps-Karte Desktop */ --map-height-sm: 340px; /* Google-Maps-Karte Mobil */ /* Radien — Affolter ist überwiegend kantig; Karten klein gerundet */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* Schatten — zurückhaltend; flache Flächen mit Gold/Blau-Linien */ --shadow-sm: 0 1px 2px rgba(17, 55, 75, 0.06); --shadow-md: 0 4px 12px rgba(17, 55, 75, 0.08); --shadow-lg: 0 12px 32px rgba(17, 55, 75, 0.12); --shadow-xl: 0 24px 60px rgba(17, 55, 75, 0.18); --shadow-btn-hover: 0 5px 14px rgba(17, 55, 75, 0.28); --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.06); /* Goldene Signatur-Linie */ --rule-gold: 1px solid var(--ad-sand-500); --rule-gold-thick: 2px solid var(--ad-sand-500); /* Bewegung */ --ease-brand: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 160ms; --duration-slow: 180ms; }