/* ========================================================================== erz.biz Design Tokens Single source of truth. Alle CSS-Custom-Properties. Gesetzt von /js/mood.js zur Laufzeit — hier nur Fallback-Defaults. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Brand-Konstanten (unveränderlich) -------------------------------------------------------------------------- */ :root { --brand-champagne: #c79b58; --brand-champagne-lt: #d4af6f; --brand-champagne-dk: #b8853d; --brand-ink: #0a0a0a; --brand-ink-soft: #171717; /* Foto-basierter Akzent — wird von palette.js überschrieben */ --accent-living: #c79b58; /* Transition-Dauer für Living-Palette */ --palette-transition: 600ms ease; } /* -------------------------------------------------------------------------- 2. Theme-Tokens: Dark (Default) Werden von mood.js auf gesetzt. -------------------------------------------------------------------------- */ :root, [data-theme="dark"] { --bg-base: #0a0a0a; --bg-soft: #111111; --bg-card: rgba(255,255,255,0.04); --bg-card-hover: rgba(255,255,255,0.07); --bg-overlay: rgba(10,10,10,0.80); --border-subtle: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.12); --text-primary: #fafafa; --text-secondary: #a3a3a3; --text-muted: #525252; --text-accent: var(--accent-living); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --glass-blur: 12px; /* Schatten im Dunkeln: warm-getönt, nicht reines Schwarz */ --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3); --shadow-float: 0 16px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); color-scheme: dark; } /* -------------------------------------------------------------------------- 3. Theme-Tokens: Light -------------------------------------------------------------------------- */ [data-theme="light"] { --bg-base: #f5f0ea; --bg-soft: #ede8e1; --bg-card: rgba(255,255,255,0.72); --bg-card-hover: rgba(255,255,255,0.90); --bg-overlay: rgba(245,240,234,0.85); --border-subtle: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.12); --text-primary: #1a1612; --text-secondary: #6b6055; --text-muted: #a09585; --text-accent: var(--accent-living); --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(0,0,0,0.08); --glass-blur: 16px; --shadow-card: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); --shadow-float: 0 16px 48px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); color-scheme: light; } /* -------------------------------------------------------------------------- 4. Daypart-Tönung: 4 Phasen × 2 Themes mood.js setzt [data-daypart="morning|day|evening|night"] auf -------------------------------------------------------------------------- */ /* Morgen: kühl-cremig (Light) / tiefblau-grau (Dark) */ [data-theme="light"][data-daypart="morning"] { --bg-base: #f0ede8; --bg-soft: #e8e3dc; --bg-tint: rgba(200,210,220,0.15); } [data-theme="dark"][data-daypart="morning"] { --bg-base: #0d1117; --bg-soft: #111820; --bg-tint: rgba(100,140,180,0.06); } /* Tag: klar, neutral */ [data-theme="light"][data-daypart="day"] { --bg-base: #f5f0ea; --bg-soft: #ede8e1; --bg-tint: rgba(255,255,255,0); } [data-theme="dark"][data-daypart="day"] { --bg-base: #0a0a0a; --bg-soft: #111111; --bg-tint: rgba(255,255,255,0); } /* Abend: warm-champagner (Light) / burgund-tief (Dark) */ [data-theme="light"][data-daypart="evening"] { --bg-base: #f2ebe0; --bg-soft: #ece2d2; --bg-tint: rgba(199,155,88,0.07); } [data-theme="dark"][data-daypart="evening"] { --bg-base: #0f0a07; --bg-soft: #160d09; --bg-tint: rgba(160,60,40,0.06); } /* Nacht: tief-beruhigt (Dark-only eigentlich) */ [data-theme="light"][data-daypart="night"] { --bg-base: #ede8e2; --bg-soft: #e5e0da; --bg-tint: rgba(80,80,100,0.06); } [data-theme="dark"][data-daypart="night"] { --bg-base: #080810; --bg-soft: #0c0c18; --bg-tint: rgba(30,30,80,0.08); } /* -------------------------------------------------------------------------- 5. Mood-Tokens: 4 Moods mood.js setzt [data-mood="traeumen|sofort|entspannen|entdecken"] auf -------------------------------------------------------------------------- */ /* Default: Entspannen — luftig, ruhig */ :root, [data-mood="entspannen"] { --mood-tempo: 400ms; --mood-tempo-fast: 250ms; --mood-spacing-mult: 1; --mood-headline-weight: 300; --mood-headline-style: normal; --mood-leading: 1.35; --mood-card-scale: 1.02; --mood-letter-spacing: 0em; } /* Träumen — verträumt, sanft, italic */ [data-mood="traeumen"] { --mood-tempo: 700ms; --mood-tempo-fast: 450ms; --mood-spacing-mult: 1.1; --mood-headline-weight: 300; --mood-headline-style: italic; --mood-leading: 1.45; --mood-card-scale: 1.015; --mood-letter-spacing: 0.01em; } /* Sofort weg — high-energy, kompakt, bold */ [data-mood="sofort"] { --mood-tempo: 180ms; --mood-tempo-fast: 100ms; --mood-spacing-mult: 0.9; --mood-headline-weight: 700; --mood-headline-style: normal; --mood-leading: 1.2; --mood-card-scale: 1.03; --mood-letter-spacing: -0.01em; } /* Entdecken — cinematisch, groß, kontrastreich */ [data-mood="entdecken"] { --mood-tempo: 350ms; --mood-tempo-fast: 200ms; --mood-spacing-mult: 1.05; --mood-headline-weight: 600; --mood-headline-style: normal; --mood-leading: 1.25; --mood-card-scale: 1.025; --mood-letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- 6. Globale Basis-Styles -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--bg-base); color: var(--text-primary); transition: background-color var(--mood-tempo, 400ms) ease, color var(--mood-tempo, 400ms) ease; } body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bg-base); color: var(--text-primary); min-height: 100svh; } /* Glassmorphism — nutzt Tokens */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); } /* Karten-Transitions */ .erz-card { transition: background var(--mood-tempo, 400ms) ease, border-color var(--mood-tempo, 400ms) ease, box-shadow var(--mood-tempo, 400ms) ease, transform var(--mood-tempo-fast, 250ms) ease; } .erz-card:hover { background: var(--bg-card-hover); transform: scale(var(--mood-card-scale, 1.02)); box-shadow: var(--shadow-float); } /* Accent-Color — nutzt Living Palette */ .accent-text { color: var(--accent-living); } .accent-bg { background-color: var(--accent-living); } .accent-border{ border-color: var(--accent-living); } /* Living-Palette Transition */ .accent-text, .accent-bg, .accent-border { transition: color var(--palette-transition), background-color var(--palette-transition), border-color var(--palette-transition); } /* Headline-Mood */ .mood-headline { font-weight: var(--mood-headline-weight, 300); font-style: var(--mood-headline-style, normal); line-height: var(--mood-leading, 1.35); letter-spacing: var(--mood-letter-spacing, 0em); transition: font-weight var(--mood-tempo, 400ms) ease, font-style var(--mood-tempo, 400ms) ease, line-height var(--mood-tempo, 400ms) ease; } /* Discount-Badge */ .erz-badge { background-color: var(--accent-living); color: var(--brand-ink); transition: background-color var(--palette-transition); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 999px; white-space: nowrap; } /* Stars */ .erz-stars { color: var(--accent-living); transition: color var(--palette-transition); } /* Theme-Toggle-Button */ .theme-toggle { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 200ms ease; font-size: 0.875rem; line-height: 1; } .theme-toggle:hover { border-color: var(--border-soft); color: var(--text-primary); background: var(--bg-card-hover); } /* Mood-Pill in Header */ .mood-pill { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all 200ms ease; } .mood-pill:hover { border-color: var(--accent-living); color: var(--accent-living); } /* Mood-Popover (Header-Pill oeffnet Menu mit 4 Optionen) */ .site-header-actions { position: relative; } .mood-popover { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 11rem; background: var(--bg-card); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-soft); border-radius: 0.875rem; padding: 0.375rem; box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 0.125rem; opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; z-index: 20; } .mood-popover.open { opacity: 1; transform: translateY(0); } .mood-popover-item { background: transparent; border: none; padding: 0.625rem 1rem; text-align: left; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; cursor: pointer; border-radius: 0.625rem; transition: background 160ms ease, color 160ms ease; } .mood-popover-item:hover { background: var(--bg-card-hover); } .mood-popover-item[aria-current="true"] { color: var(--accent-living); background: var(--bg-card-hover); font-weight: 600; } /* Mood-Selector-Block (inline auf index.html) */ .mood-selector { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .mood-btn { padding: 0.5rem 1.25rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: border-color var(--mood-tempo-fast, 250ms) ease, color var(--mood-tempo-fast, 250ms) ease, background var(--mood-tempo-fast, 250ms) ease; } .mood-btn:hover { border-color: var(--accent-living); color: var(--text-primary); } .mood-btn[aria-pressed="true"] { border-color: var(--accent-living); background: var(--accent-living); color: var(--brand-ink); } /* -------------------------------------------------------------------------- 7. Filter-Chip + Filter-Popover Wiederverwendbare Komponenten für Feed-Filter. Gleiche Sprache wie .mood-pill und .mood-popover, damit das System kohärent bleibt. -------------------------------------------------------------------------- */ .filter-chip { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.9375rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); font-family: inherit; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: border-color var(--mood-tempo-fast, 250ms) ease, color var(--mood-tempo-fast, 250ms) ease, background var(--mood-tempo-fast, 250ms) ease; white-space: nowrap; } .filter-chip:hover { border-color: var(--border-soft); color: var(--text-primary); background: var(--bg-card-hover); } .filter-chip.is-active, .filter-chip[aria-pressed="true"] { border-color: var(--accent-living); color: var(--text-primary); background: var(--bg-card-hover); } .filter-chip .chip-caret { font-size: 0.625rem; opacity: 0.55; transition: transform 200ms ease; } .filter-chip[aria-expanded="true"] .chip-caret { transform: rotate(180deg); } .filter-chip .chip-count { font-size: 0.6875rem; font-weight: 700; color: var(--accent-living); padding: 0.0625rem 0.4375rem; border-radius: 999px; border: 1px solid var(--accent-living); line-height: 1.25; transition: color var(--palette-transition), border-color var(--palette-transition); } .filter-reset { background: transparent; border: none; color: var(--text-muted); font-family: inherit; font-size: 0.75rem; cursor: pointer; padding: 0.25rem 0.5rem; letter-spacing: 0.04em; transition: color 200ms ease; } .filter-reset:hover { color: var(--accent-living); } .filter-popover { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 14rem; max-width: min(22rem, calc(100vw - 2rem)); background: var(--bg-card); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-soft); border-radius: 0.875rem; padding: 0.5rem; box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 0.0625rem; opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; z-index: 30; } .filter-popover.open { opacity: 1; transform: translateY(0); } .filter-popover-title { font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.375rem 0.75rem 0.5rem; } .filter-option { background: transparent; border: none; padding: 0.5625rem 0.875rem; text-align: left; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; cursor: pointer; border-radius: 0.625rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; transition: background 160ms ease, color 160ms ease; } .filter-option:hover:not([disabled]) { background: var(--bg-card-hover); } .filter-option[aria-pressed="true"], .filter-option[aria-current="true"] { color: var(--accent-living); background: var(--bg-card-hover); font-weight: 600; } .filter-option[disabled] { color: var(--text-muted); cursor: not-allowed; opacity: 0.5; } .filter-option .opt-meta { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; font-variant-numeric: tabular-nums; } .filter-option[aria-pressed="true"] .opt-meta, .filter-option[aria-current="true"] .opt-meta { color: var(--accent-living); } /* Filter-Bar Layout — verwendet von feed.html + fluege.html */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .filter-chip-wrap { position: relative; } .filter-bar-tail { margin-left: auto; display: flex; align-items: center; gap: 0.625rem; } .filter-result-count { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .filter-result-count .num { color: var(--accent-living); font-weight: 600; font-size: 0.8125rem; margin-right: 0.3125rem; transition: color var(--palette-transition); } .filter-result-count .noun { font-style: var(--mood-headline-style, normal); transition: font-style var(--mood-tempo, 400ms) ease; } @media (max-width: 520px) { .filter-bar-tail { width: 100%; margin-left: 0; justify-content: space-between; padding-top: 0.25rem; } } /* -------------------------------------------------------------------------- 8. Top-Nav-Primary + Hotels-Sub-Nav Gemeinsame Komponenten fuer die neu strukturierte Navigation (Session 17). Top-Nav = 3 Tabs (Frag prominent, Hotels, Flüge). Sub-Nav = 3 Browse-Modi unter dem Hero auf hotel-relevanten Pages. -------------------------------------------------------------------------- */ /* "Frag" wird visuell hervorgehoben — der primaere Einstieg in die AI-Suche. */ .nav-tab.is-primary { background: var(--bg-card); border: 1px solid var(--accent-living); color: var(--accent-living); font-weight: 600; letter-spacing: 0.02em; transition: color var(--palette-transition), border-color var(--palette-transition), background 180ms ease; } .nav-tab.is-primary:hover { background: var(--accent-living); color: var(--brand-ink); } .nav-tab.is-primary::before { content: "✦"; margin-right: 0.375rem; font-size: 0.6875rem; display: inline-block; transform: translateY(-1px); } /* Hotels-Sub-Nav — sitzt direkt unter dem Hero auf hotel-relevanten Pages. */ .sub-nav { display: flex; gap: 0.375rem; align-items: center; padding: 0.5rem 0 1.25rem; flex-wrap: wrap; } .sub-nav-label { font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.375rem; } .sub-nav a { font-size: 0.8125rem; padding: 0.3125rem 0.75rem; border-radius: 999px; color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border-subtle); background: transparent; transition: background 180ms, color 180ms, border-color 180ms; } .sub-nav a:hover { color: var(--text-primary); background: var(--bg-card-hover); border-color: var(--border-soft); } .sub-nav a.active { color: var(--accent-living); border-color: var(--accent-living); background: var(--bg-card); } @media (max-width: 480px) { .sub-nav { gap: 0.25rem; padding-top: 0.25rem; } .sub-nav-label { width: 100%; } } /* Scrollbar — dezent */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 2px; }