/* ============================================================================ Kathy Hiereth — Landingpage Semantic surface tokens + 3 Grundstimmungen (moods). The page never reads raw brand colors for surfaces; it reads SEMANTIC tokens (--page-bg, --card-bg, --hero-text …). Switching data-mood on remaps every surface at once. Brand tokens (--plum, --sage …) come from colors_and_type.css and stay constant — plum is always the CTA. ============================================================================ */ /* ---- default = hell -------------------------------------------------- */ :root, :root[data-mood="hell"] { --page-bg: #F8F9F7; --page-text: #1F2422; --page-muted: #5F6664; --alt-bg: #EBF0EE; /* sage-15 quiet accent ground */ --alt-text: #1F2422; --alt-muted: #5F6664; --card-bg: #FFFFFF; --card-border: #E5E8E6; --card-text: #1F2422; --card-muted: #5F6664; --hero-bg: transparent; --hero-text: #1F2422; --hero-muted: #5F6664; --hero-frame: var(--sage); --hero-label: var(--sage-deep); --hero-highlight: var(--plum); --hero-sec-text: var(--sage-deep); --hero-sec-border: var(--sage-deep); --hero-sec-hover: var(--sage-15); --cta-bg: #B6CBC3; /* sage-mid */ --cta-text: #1F2422; --cta-muted: rgba(31,36,34,0.72); --footer-bg: #1F2422; --footer-text: #F8F9F7; --footer-muted: #9AA4A0; --footer-border: rgba(248,249,247,0.12); --nav-scrolled-bg: rgba(248,249,247,0.90); --nav-text: #1F2422; --nav-text-top: #1F2422; /* nav text over the hero (not scrolled) */ --nav-border: #E5E8E6; --about-frame: var(--blue); --divider: #E5E8E6; --label-color: var(--sage-deep); --tag-text: #1F2422; --tag-border: #CBD6D1; --tag-hover-bg: #EBF0EE; --num-color: var(--plum); --link-color: var(--plum); /* atmospheric photo-slot placeholders (gentle sage→blue, permitted) */ --hero-slot-bg: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 11px), radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,0.18), transparent 60%), linear-gradient(155deg, #A7C0B6 0%, #8FA9AE 52%, #8090A4 100%); --about-slot-bg: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 11px), radial-gradient(120% 90% at 70% 25%, rgba(255,255,255,0.16), transparent 60%), linear-gradient(155deg, #9DB1C0 0%, #8FA1AE 55%, #92ABA2 100%); --slot-text: rgba(31,36,34,0.62); --slot-line: rgba(31,36,34,0.5); } /* ---- hell + dunkle Akzente: light body, dark hero + final CTA -------- */ :root[data-mood="akzente"] { --page-bg: #F8F9F7; --page-text: #1F2422; --page-muted: #5F6664; --alt-bg: #EBF0EE; --alt-text: #1F2422; --alt-muted: #5F6664; --card-bg: #FFFFFF; --card-border: #E5E8E6; --card-text: #1F2422; --card-muted: #5F6664; --hero-bg: #1F2422; --hero-text: #F4F6F4; --hero-muted: #C2CAC6; --hero-frame: rgba(248,249,247,0.62); --hero-label: var(--sage); --hero-highlight: var(--sage); --hero-sec-text: #F4F6F4; --hero-sec-border: rgba(248,249,247,0.5); --hero-sec-hover: rgba(248,249,247,0.08); --cta-bg: #1F2422; --cta-text: #F4F6F4; --cta-muted: #C2CAC6; --footer-bg: #1F2422; --footer-text: #F8F9F7; --footer-muted: #9AA4A0; --footer-border: rgba(248,249,247,0.12); --nav-scrolled-bg: rgba(248,249,247,0.90); --nav-text: #1F2422; --nav-text-top: #F4F6F4; /* hero is dark in akzente */ --nav-border: #E5E8E6; --about-frame: var(--blue); --divider: #E5E8E6; --label-color: var(--sage-deep); --tag-text: #1F2422; --tag-border: #CBD6D1; --tag-hover-bg: #EBF0EE; --num-color: var(--plum); --link-color: var(--plum); --hero-slot-bg: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 11px), radial-gradient(120% 90% at 32% 22%, rgba(156,185,175,0.22), transparent 62%), linear-gradient(155deg, #2C3A34 0%, #24303A 55%, #2B2632 100%); --about-slot-bg: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 11px), radial-gradient(120% 90% at 70% 25%, rgba(255,255,255,0.16), transparent 60%), linear-gradient(155deg, #9DB1C0 0%, #8FA1AE 55%, #92ABA2 100%); --slot-text: rgba(244,246,244,0.62); --slot-line: rgba(244,246,244,0.42); } /* ---- durchgehend dunkel & atmosphärisch (Referenzbild) --------------- */ :root[data-mood="dunkel"] { --page-bg: #1C201E; --page-text: #F4F6F4; --page-muted: #A9B1AD; --alt-bg: #232926; --alt-text: #F4F6F4; --alt-muted: #A9B1AD; --card-bg: #262D2A; --card-border: rgba(244,246,244,0.12); --card-text: #F4F6F4; --card-muted: #A9B1AD; --hero-bg: transparent; --hero-text: #F4F6F4; --hero-muted: #A9B1AD; --hero-frame: rgba(244,246,244,0.55); --hero-label: var(--sage); --hero-highlight: var(--sage); --hero-sec-text: #F4F6F4; --hero-sec-border: rgba(244,246,244,0.45); --hero-sec-hover: rgba(244,246,244,0.07); --cta-bg: #232926; --cta-text: #F4F6F4; --cta-muted: #A9B1AD; --footer-bg: #141714; --footer-text: #F4F6F4; --footer-muted: #8C948F; --footer-border: rgba(244,246,244,0.10); --nav-scrolled-bg: rgba(28,32,30,0.90); --nav-text: #F4F6F4; --nav-text-top: #F4F6F4; --nav-border: rgba(244,246,244,0.10); --about-frame: rgba(244,246,244,0.5); --divider: rgba(244,246,244,0.12); --label-color: var(--sage); --tag-text: #F4F6F4; --tag-border: rgba(244,246,244,0.22); --tag-hover-bg: rgba(244,246,244,0.06); --num-color: var(--sage); --link-color: var(--sage); --hero-slot-bg: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 11px), radial-gradient(120% 90% at 30% 20%, rgba(156,185,175,0.20), transparent 62%), linear-gradient(155deg, #2C3A34 0%, #24303A 55%, #2B2632 100%); --about-slot-bg: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 11px), radial-gradient(120% 90% at 70% 25%, rgba(125,140,163,0.22), transparent 62%), linear-gradient(155deg, #2A3640 0%, #283230 55%, #2E2733 100%); --slot-text: rgba(244,246,244,0.6); --slot-line: rgba(244,246,244,0.4); } /* ============================================================================ Base ============================================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--page-bg); color: var(--page-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--sage-30); color: var(--ink); } img { max-width: 100%; display: block; } .container { max-width: 1180px; margin: 0 auto; padding-inline: 40px; } .measure { max-width: 64ch; } @media (max-width: 680px) { .container { padding-inline: 22px; } } /* spaced-caps label */ .eyebrow { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-color); display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; } .eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; opacity: 0.55; } .eyebrow.no-rule::after { display: none; } /* thin divider rule */ .rule { width: 56px; height: 1px; background: var(--divider); border: 0; margin: 0; } /* ---- buttons (mood-aware) -------------------------------------------- */ .btn { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; padding: 15px 28px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; line-height: 1; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease, transform 170ms ease; white-space: nowrap; } .btn--primary { background: var(--plum); color: var(--on-dark); } .btn--primary:hover { background: var(--plum-hover); } .btn--primary:active { transform: translateY(1px); } .btn--secondary { background: transparent; color: var(--hero-sec-text); border-color: var(--hero-sec-border); } .btn--secondary:hover { background: var(--hero-sec-hover); } .btn--block { width: 100%; } /* ---- tags (Themen) --------------------------------------------------- */ .tag { font-family: var(--font-sans); font-size: 16px; color: var(--tag-text); border: 1px solid var(--tag-border); border-radius: var(--radius-sm); padding: 11px 18px; cursor: default; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 300ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 300ms ease; } .tag:hover { background: var(--sage); color: var(--ink); border-color: var(--sage); transform: translateY(-5px); box-shadow: 0 14px 26px -8px rgba(31,36,34,0.28); } .no-anim .tag:hover { transform: none; } /* ---- scroll reveal (gentle rise; opacity stays 1 so content is NEVER hidden even if the animation clock is frozen, e.g. offscreen iframes) -- */ .reveal { transform: translateY(18px); transition: transform 720ms cubic-bezier(0.22,0.61,0.36,1); will-change: transform; } .reveal.is-in { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { transform: none; transition: none; } } /* ---- photo slot (offset-frame + atmospheric placeholder) ------------- */ image-slot { position: relative; z-index: 1; } image-slot::part(frame) { background: var(--frame-fill, var(--about-slot-bg)); } image-slot.hero-slot::part(frame) { background: var(--hero-slot-bg); } image-slot.about-slot::part(frame) { background: var(--about-slot-bg); } /* caption shown over the placeholder until a real photo is dropped */ .slot-caption { position: absolute; left: 16px; bottom: 14px; z-index: 3; pointer-events: none; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slot-text); display: flex; align-items: center; gap: 7px; } .slot-meta { position: absolute; right: 16px; top: 14px; z-index: 3; pointer-events: none; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slot-text); display: flex; align-items: center; gap: 6px; }