/* ============================================================= Tschense Bestattungen — Design Tokens Eine visuelle Sprache, die Würde, Wärme und Klarheit verbindet. ============================================================= */ /* —————— web fonts —————— */ @font-face{ font-family:"Mulish"; src:url("fonts/Mulish-VF.ttf") format("truetype-variations"); font-weight:200 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Mulish"; src:url("fonts/Mulish-Italic-VF.ttf") format("truetype-variations"); font-weight:200 900; font-style:italic; font-display:swap; } @font-face{ font-family:"Cormorant Garamond"; src:url("fonts/CormorantGaramond-VF.ttf") format("truetype-variations"); font-weight:300 700; font-style:normal; font-display:swap; } @font-face{ font-family:"Cormorant Garamond"; src:url("fonts/CormorantGaramond-Italic-VF.ttf") format("truetype-variations"); font-weight:300 700; font-style:italic; font-display:swap; } @font-face{ font-family:"Bilbo"; src:url("fonts/Bilbo-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Caveat"; src:url("fonts/Caveat-VariableFont_wght.ttf") format("truetype-variations"); font-weight:400 700; font-style:normal; font-display:swap; } /* Force-load all brand fonts on every page that imports this stylesheet. Without this, unused families (typically Bilbo on text-only wireframes) stay in `status: unloaded` and get flagged as "missing brand fonts". Pseudo-elements on / mount a hidden glyph in each family, which is enough to trigger the download — no per-page DOM needed. */ html::before{ content:"A"; font-family:"Mulish", sans-serif; position:fixed; top:-9999px; left:-9999px; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; } html::after{ content:"A"; font-family:"Cormorant Garamond", serif; position:fixed; top:-9999px; left:-9999px; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; } body::before{ content:"A"; font-family:"Bilbo", cursive; position:fixed; top:-9999px; left:-9999px; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; } body::after{ content:"A"; font-family:"Caveat", cursive; position:fixed; top:-9999px; left:-9999px; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; } /* Mulish italic force-load */ :root::after{ content:"A"; font-family:"Mulish", sans-serif; font-style:italic; position:fixed; top:-9999px; left:-9999px; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; } :root{ /* ——— BRAND COLOR ——— */ --brand-accent: #c78665; /* warm copper — primary action / CTA */ --brand-accent-ink: #a06443; /* hover / pressed */ --brand-accent-soft: rgba(199,134,101,.12); --brand-accent-focus: rgba(199,134,101,.55); /* focus-ring — WCAG-konformer Kontrast */ --brand-mark: #a8302d; /* deep red — wordmark / Trauerfall (see triade below) */ --brand-script: #6e6e6e; /* logo grey for "Bestattungen" */ /* ——— AKZENT-TRIADE ——— Three accents, three semantic modes. Use with discipline: Kupfer = primary action, CTA, eyebrows, body links — neutral default Tiefrot = Trauerfall context (akut, 24 h, Notruf, Erste Schritte, error) Salbei = Vorsorge / Naturbestattung context (langfristig, ruhig) Never invert these roles. Tiefrot is never a CTA fill. Salbei is never a hover. */ --accent-trauerfall: #a8302d; --accent-trauerfall-ink: #8a2422; --accent-trauerfall-soft: rgba(168,48,45,.10); --accent-vorsorge: #6a786a; --accent-vorsorge-ink: #4f5c4f; --accent-vorsorge-soft: rgba(106,120,106,.12); /* ——— MODUS · drei Nutzer-Modi ——— Operative Schicht über der Akzent-Triade. Drei klar getrennte Kontexte — der gewählte Modus färbt nicht nur einen Akzent, sondern eine ganze Seite. Trauerfall = Hinterbliebene · akut · helle Stage + Tiefrot-Akzente, plus eine dunkle Telefon-Insel als wichtigste Handlung. Vorsorge = Zu-Lebzeiten-Planung · ruhig · cremig + Salbei-Akzente. Neutral = Sonstiges: Bewertungen, Über uns, Allgemeines. Kupfer lebt nur hier als warmer Editorial-Akzent. */ --mode-traue-bg: #fbf9f7; /* helle Stage für Trauerfall-Seiten */ --mode-traue-accent: var(--accent-trauerfall); --mode-traue-accent-ink: var(--accent-trauerfall-ink); --mode-traue-island-bg: linear-gradient(180deg,#2c2926 0%,#1f1d1c 100%); --mode-traue-island-fg: #f6e9e7; --mode-traue-island-eyebrow: #e89280; /* gedämpftes Lachs auf dem Dunkel */ --mode-traue-island-muted: #bdb4ab; --mode-traue-island-check: rgba(232,146,128,.18); /* Soft-Check-Kreis auf Dunkel (salmon, Trauerfall-spezifisch) */ --mode-traue-cta-bg: linear-gradient(135deg, var(--accent-trauerfall), var(--accent-trauerfall-ink)); --mode-traue-cta-glow: rgba(168,48,45,.5); /* CTA-Schatten-Glow */ --mode-traue-portal-bg: linear-gradient(180deg,#1f1d1c 0%,#2c1b1a 100%); /* Portal-Variante (Home, mit Rot-Unterton) */ /* ——— Warm-Mute Ink · funktioniert auf hell (cremig) UND dunkel (Insel) ——— Gedämpfte warme Töne — Breadcrumb auf Trauerfall-Stage, Meta auf dunklen Inseln. */ --ink-warm-mute: #9c948c; /* warmes Mittelgrau — Meta-Text, Breadcrumb */ --ink-warm-dim: #c8c1bb; /* gedämpft warm — Inaktiv-Label */ --on-dark-line: rgba(255,255,255,.10); /* Trenner auf Dunkel */ --mode-vor-bg: var(--surface-warm); /* #f4f0ed */ --mode-vor-accent: var(--accent-vorsorge); --mode-vor-accent-ink: var(--accent-vorsorge-ink); --mode-vor-stage-bg: linear-gradient(160deg,#f1efe8 0%,#e6e8dd 100%); /* Portal-Stage cremig-salbei */ --mode-vor-cta-bg: linear-gradient(135deg, var(--accent-vorsorge), var(--accent-vorsorge-ink)); --mode-vor-cta-glow: rgba(106,120,106,.5); --mode-vor-check: rgba(106,120,106,.18); /* Check-Kreis-Hintergrund */ --mode-vor-island-bg: linear-gradient(180deg,#2a3328 0%,#1e2820 100%); /* dunkle Salbei-Insel (VorsorgeDetail) */ --mode-vor-island-fg: #edf0e8; /* Neutral-Modus und Utility-Bar nutzen die Basis-Tokens direkt: Neutral → var(--brand-accent) / var(--surface) / var(--brand-accent-soft) Utility → var(--accent-trauerfall-soft) / var(--accent-trauerfall) (immer Trauerfall, unabhängig vom Seitenmodus). */ /* ——— INK (text + lines) ——— */ --ink-900: #2a2a2a; /* headlines */ --ink-700: #4a4a4a; --ink-500: #7a7a7a; /* body, captions */ --ink-300: #9fa6ad; /* quiet meta */ --ink-200: #c9c9c9; --ink-100: #e6e6e6; --line: #e6e6e6; --line-soft: #efeae6; /* ——— SURFACE ——— */ --surface: #ffffff; --surface-warm: #f4f0ed; /* hero quote, cream stage */ --surface-cool: #f3f3f3; /* card bg */ --surface-paper: #fbf9f7; /* doc / page bg */ --surface-ink: #1f1d1c; /* dark hero */ --surface-ink-2: #2c2926; /* ——— SEMANTIC ——— */ --color-fg: var(--ink-700); --color-fg-strong: var(--ink-900); --color-fg-muted: var(--ink-500); --color-fg-quiet: var(--ink-300); --color-fg-inverse: #f3eee8; --color-bg: var(--surface); --color-bg-muted: var(--surface-cool); --color-bg-warm: var(--surface-warm); --color-bg-dark: var(--surface-ink); --color-border: var(--line); --color-link: var(--brand-accent); --color-success: #3f7d4f; --color-error: #a8302d; /* ——— TYPE — family ——— */ --f-body: "Mulish", system-ui, sans-serif; --f-display: "Cormorant Garamond", "Mulish", serif; --f-script: "Caveat", "Bilbo", "Brush Script MT", cursive; --f-caveat: "Caveat", cursive; --f-mono: ui-monospace, "SF Mono", Menlo, monospace; /* ——— TYPE — scale ——— */ --fs-xs: 11px; /* labels, eyebrows */ --fs-sm: 14px; /* small body, meta */ --fs-base: 16px; /* body */ --fs-lg: 18px; /* lede / large body */ --fs-xl: 22px; /* h4 */ --fs-2xl: 28px; /* h3 */ --fs-3xl: 40px; /* h2 */ --fs-4xl: 56px; /* h1 display */ --fs-5xl: 72px; /* hero display */ /* ——— LINE HEIGHT ——— */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.6; --lh-loose: 1.75; /* ——— LETTER SPACING ——— */ --ls-display: -.015em; /* display */ --ls-h: -.005em; /* h2/h3 */ --ls-caps: .32em; /* CAPS labels — eyebrows, button labels */ --ls-caps-md: .28em; /* CAPS labels (mittlere Stufe — UI-Standardlabel: Inputs, Footer-Meta, Header-Sublabel) */ --ls-caps-sm: .22em; /* kleine CAPS — Trust-Bar, Chips */ /* ——— LAYOUT ——— */ --hero-page-h: 520px; /* einheitliche Hero-Höhe für alle Unterseiten (trauerfall/vorsorge/leistungen/ueberuns/kontakt/leistung-detail/faq) */ --page-x: 100px; /* horizontaler Außen-Gutter; identisch zu Header + Footer-Meta */ --page-max-w: 1140px; /* maximale Inhaltsbreite (zentrierter Innen-Wrapper) */ /* ——— SPACING (6 px base) ——— */ --s-1: 6px; --s-2: 9px; --s-3: 10px; --s-4: 12px; --s-5: 14px; --s-6: 16px; --s-7: 18px; --s-8: 24px; --s-9: 32px; --s-10: 48px; --s-11: 64px; --s-12: 96px; /* ——— RADIUS ——— */ --r-none: 0; /* default — buttons, hero blocks */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; /* cards */ --r-lg: 10px; --r-pill: 999px; /* avatar circles, icon disks only */ /* ——— SHADOW ——— */ --shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 12px 30px -18px rgba(42,42,42,.22); --shadow-pop: 0 24px 60px -28px rgba(42,42,42,.35); /* ——— LAYOUT ——— */ --container: 1140px; --gutter: 24px; --grid-cols: 12; /* ——— MOTION ——— */ --easing: cubic-bezier(.4,.0,.2,1); --dur-instant: 120ms; --dur-fast: 180ms; --dur-base: 250ms; --dur-slow: 350ms; } /* —————— SEMANTIC TYPE STYLES —————— */ .t-display{ font-family:var(--f-display); font-weight:200; font-size:var(--fs-5xl); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:var(--color-fg-strong); } .t-display em, .t-display .accent{ font-style:normal; font-weight:400; color:var(--brand-accent); } .t-h1{ font-family:var(--f-display); font-weight:200; font-size:var(--fs-4xl); line-height:var(--lh-tight); letter-spacing:-.01em; color:var(--color-fg-strong); } .t-h2{ font-family:var(--f-display); font-weight:300; font-size:var(--fs-3xl); line-height:var(--lh-snug); letter-spacing:-.01em; color:var(--color-fg-strong); } .t-h3{ font-family:var(--f-display); font-weight:400; font-size:var(--fs-2xl); line-height:var(--lh-snug); color:var(--color-fg-strong); } .t-h4{ font-family:var(--f-display); font-weight:400; font-size:var(--fs-xl); line-height:1.2; letter-spacing:var(--ls-h); color:var(--color-fg-strong); } .t-lede{ font-family:var(--f-body); font-weight:300; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-fg-muted); max-width:62ch; } .t-body{ font-family:var(--f-body); font-weight:300; font-size:var(--fs-base); line-height:1.65; color:var(--color-fg); } .t-small{ font-family:var(--f-body); font-weight:300; font-size:var(--fs-sm); line-height:1.55; color:var(--color-fg-muted); } .t-eyebrow, .t-caption{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-xs); line-height:1; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--brand-accent); } .t-label{ font-family:var(--f-body); font-weight:500; font-size:10px; line-height:1; letter-spacing:var(--ls-caps-md); text-transform:uppercase; color:var(--color-fg-muted); } .t-script{ font-family:var(--f-script); font-weight:400; font-size:var(--fs-3xl); line-height:.9; color:var(--brand-script); } .t-mono, code{ font-family:var(--f-mono); font-size:12px; color:var(--ink-900); background:var(--surface-cool); padding:1px 6px; border-radius:3px; } /* —————— HEADLINE PATTERNS —————— Mulish (sans) + Cormorant Garamond (serif italic accent) duett. Three sizes: .hl-standard — 60 / 68 px, default light surface .hl-hero — same scale, dark surface, used in heroes .hl-section — 44 px, intra-page section opener Use or .hl-accent for the kupfer Cormorant accent. */ .hl-standard, .hl-hero{ font-family:var(--f-body); font-weight:300; font-size:60px; line-height:1.3; letter-spacing:-1px; color:var(--ink-900); margin:0; } .hl-standard em, .hl-standard .hl-accent, .hl-hero em, .hl-hero .hl-accent{ font-family:var(--f-display); font-style:normal; font-weight:300; font-size:68px; line-height:1.3; letter-spacing:0; color:var(--brand-accent); } .hl-hero{ color:var(--color-fg-inverse); } .hl-hero em, .hl-hero .hl-accent{ color:var(--brand-accent); } .hl-section{ font-family:var(--f-body); font-weight:300; font-size:44px; line-height:1; letter-spacing:0; color:var(--brand-accent); margin:0; } .hl-section .hl-accent, .hl-section em{ font-family:var(--f-display); font-style:normal; font-weight:300; font-size:44px; line-height:.85; letter-spacing:-.5px; color:var(--ink-900); margin-left:12px; } .hl-meta{ font-family:var(--f-body); font-weight:300; font-size:var(--fs-xs); letter-spacing:var(--ls-caps-sm); text-transform:uppercase; color:var(--ink-300); margin-top:14px; } .hl-meta b{ color:var(--ink-900); font-weight:300; } .hl-hero + .hl-meta, .hl-meta.on-dark{ color:rgba(246,241,236,.55); } .hl-meta.on-dark b{ color:var(--color-fg-inverse); } /* —————— ELEMENT DEFAULTS (apply to at root of any page) —————— */ .tsch{ font-family:var(--f-body); font-weight:300; font-size:var(--fs-base); line-height:1.65; color:var(--color-fg); background:var(--surface); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .tsch h1{ font-family:var(--f-display); font-weight:200; font-size:var(--fs-4xl); line-height:var(--lh-tight); letter-spacing:-.01em; color:var(--color-fg-strong); margin:0; } .tsch h2{ font-family:var(--f-display); font-weight:300; font-size:var(--fs-3xl); line-height:var(--lh-snug); letter-spacing:-.01em; color:var(--color-fg-strong); margin:0; } .tsch h3{ font-family:var(--f-display); font-weight:400; font-size:var(--fs-2xl); line-height:var(--lh-snug); color:var(--color-fg-strong); margin:0; } .tsch h4{ font-family:var(--f-display); font-weight:400; font-size:var(--fs-xl); line-height:1.2; color:var(--color-fg-strong); margin:0; } .tsch p{ margin:0 0 1em; } .tsch a{ color:inherit; text-decoration:none; transition:color var(--dur-fast) var(--easing); } .tsch a:hover{ color:var(--brand-accent); } /* —————— FOCUS · WCAG-konform —————— :focus-visible feuert nur bei Tastatur-Fokus, nicht bei Maus-Klick. Default-Pattern: 3 px Kupfer-Soft-Ring (auffällig genug für WCAG 2.2 AA, ·55 % opazität). Inputs nutzen das eigene Bottom-Border-Pattern (siehe Field-Komponente) — hier ohne Ring. */ :focus-visible{ outline: 3px solid var(--brand-accent-focus); outline-offset: 2px; } input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: none; }