/* ════════════════════════════════════════════════════════════ KATJA GERKING — HOMEPAGE Three palettes via [data-palette] on . Typography is constant; only color shifts. ═══════════════════════════════════════════════════════════ */ /* ─── Palette: GALLERY (default — paper + forest + gold) ─────── */ :root, [data-palette="gallery"] { --bg: #f4f0e8; --bg-warm: #ebe5d6; --bg-card: #faf7ef; --bg-deep: #161613; --ink: #1a1a16; --ink-soft: #4d4a42; --ink-mute: #8a857a; --rule: #d8d1c0; --rule-soft: #e6e0cf; --accent: #2c4a3a; --accent-hi: #3d6652; --accent-pale: #d4e0d3; --accent-soft: rgba(44,74,58,0.08); --gold: #b08846; --gold-pale: #ecdcbc; --on-accent: #f4f0e8; --on-deep: #ebe5d6; --on-deep-mute: rgba(235,229,214,0.62); --rule-deep: rgba(235,229,214,0.16); --shadow: 0 2px 8px rgba(26,26,22,0.04), 0 12px 32px rgba(26,26,22,0.05); --shadow-lift: 0 4px 14px rgba(26,26,22,0.06), 0 20px 48px rgba(26,26,22,0.08); --section-tag-color: var(--gold); } /* ─── Palette: NOIR (editorial black + bone + ochre) ─────────── */ [data-palette="noir"] { --bg: #0e0d0a; --bg-warm: #16140f; --bg-card: #1c1a15; --bg-deep: #050504; --ink: #ece3d0; --ink-soft: #b8af9b; --ink-mute: #6d6757; --rule: rgba(236,227,208,0.14); --rule-soft: rgba(236,227,208,0.07); --accent: #c89a52; --accent-hi: #d9ad65; --accent-pale: rgba(200,154,82,0.18); --accent-soft: rgba(200,154,82,0.07); --gold: #c89a52; --gold-pale: rgba(200,154,82,0.12); --on-accent: #0e0d0a; --on-deep: #ece3d0; --on-deep-mute: rgba(236,227,208,0.6); --rule-deep: rgba(236,227,208,0.14); --shadow: 0 2px 12px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.35); --shadow-lift: 0 4px 18px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.45); --section-tag-color: var(--accent); } /* ─── Palette: TERRACOTTA (warm clay + ink + olive accent) ───── */ [data-palette="terracotta"] { --bg: #f1e4d2; --bg-warm: #e6d4ba; --bg-card: #f8ecda; --bg-deep: #2a1b14; --ink: #251a13; --ink-soft: #5a4636; --ink-mute: #8a7563; --rule: #d4bf9f; --rule-soft: #e0cdaf; --accent: #b8482a; --accent-hi: #c95838; --accent-pale: #f2d4c0; --accent-soft: rgba(184,72,42,0.10); --gold: #2f4a2c; --gold-pale: #d6dfc6; --on-accent: #f8ecda; --on-deep: #f1e4d2; --on-deep-mute: rgba(241,228,210,0.62); --rule-deep: rgba(241,228,210,0.16); --shadow: 0 2px 10px rgba(37,26,19,0.06), 0 14px 36px rgba(37,26,19,0.10); --shadow-lift: 0 4px 18px rgba(37,26,19,0.10), 0 24px 56px rgba(37,26,19,0.14); --section-tag-color: var(--accent); } /* ─── Palette: APRICOT (sunny peach + coral + honey) ─────────── */ [data-palette="apricot"] { --bg: #e9f1f9; --bg-warm: #d7e6f4; --bg-card: #f6faff; --bg-deep: #1c2c3c; --ink: #20303d; --ink-soft: #475a68; --ink-mute: #8499a8; --rule: #cadcec; --rule-soft: #dceaf5; --accent: #e85c32; --accent-hi: #f56c3f; --accent-pale: #f8d6c4; --accent-soft: rgba(232,92,50,0.10); --gold: #d99026; --gold-pale: #f5dcb0; --on-accent: #f6faff; --on-deep: #e9f1f9; --on-deep-mute: rgba(233,241,249,0.64); --rule-deep: rgba(233,241,249,0.16); --shadow: 0 2px 10px rgba(28,44,60,0.05), 0 14px 36px rgba(28,44,60,0.09); --shadow-lift: 0 4px 18px rgba(28,44,60,0.09), 0 24px 56px rgba(28,44,60,0.13); --section-tag-color: var(--accent); } /* ─── Palette: BLOOM (warm blush + raspberry + amber) ────────── */ [data-palette="bloom"] { --bg: #f9eee6; --bg-warm: #f1ddd1; --bg-card: #fef7f1; --bg-deep: #2e1822; --ink: #2f1a20; --ink-soft: #61434c; --ink-mute: #9d8086; --rule: #ecd4cd; --rule-soft: #f4e3dc; --accent: #d23a63; --accent-hi: #e24a73; --accent-pale: #f6d3dc; --accent-soft: rgba(210,58,99,0.10); --gold: #d98a3d; --gold-pale: #f3d8b4; --on-accent: #fef7f1; --on-deep: #f9eee6; --on-deep-mute: rgba(249,238,230,0.64); --rule-deep: rgba(249,238,230,0.16); --shadow: 0 2px 10px rgba(47,26,32,0.05), 0 14px 36px rgba(47,26,32,0.09); --shadow-lift: 0 4px 18px rgba(47,26,32,0.09), 0 24px 56px rgba(47,26,32,0.13); --section-tag-color: var(--accent); } /* ─── Palette: LAGUNE (warm paper + vivid teal + coral) ──────── */ [data-palette="lagune"] { --bg: #f3efe6; --bg-warm: #e7e1d2; --bg-card: #faf7ef; --bg-deep: #0f302e; --ink: #1b2624; --ink-soft: #45524f; --ink-mute: #828e89; --rule: #d6d3c4; --rule-soft: #e6e1d3; --accent: #0f8f86; --accent-hi: #14a399; --accent-pale: #c2e2dd; --accent-soft: rgba(15,143,134,0.10); --gold: #e0673c; --gold-pale: #f4d2c1; --on-accent: #faf7ef; --on-deep: #e9efe6; --on-deep-mute: rgba(233,239,230,0.62); --rule-deep: rgba(233,239,230,0.16); --shadow: 0 2px 10px rgba(27,38,36,0.05), 0 14px 36px rgba(27,38,36,0.09); --shadow-lift: 0 4px 18px rgba(27,38,36,0.09), 0 24px 56px rgba(27,38,36,0.13); --section-tag-color: var(--accent); } /* ════════════════════════════════════════════════════════════ RESET + BASE ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Single family, Helvetica-light vibe. --serif kept as token name for backward compat; both point at the same sans now. */ --serif: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --sans: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; --max: 1240px; --pad: clamp(1.25rem, 4.5vw, 4rem); --nav-h: 68px; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--on-accent); } /* ════════════════════════════════════════════════════════════ TYPOGRAPHY PRIMITIVES ═══════════════════════════════════════════════════════════ */ .eyebrow { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--section-tag-color); display: inline-flex; align-items: center; gap: 0.7rem; } .eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; display: inline-block; } .eyebrow.no-rule::before { display: none; } .section-num { font-family: var(--serif); font-size: 0.82rem; font-style: italic; color: var(--ink-mute); letter-spacing: 0.04em; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; } .italic-soft { font-style: italic; font-weight: 300; color: var(--accent); } [data-palette="noir"] .italic-soft { color: var(--accent); } p { text-wrap: pretty; } /* ════════════════════════════════════════════════════════════ CONTAINERS ═══════════════════════════════════════════════════════════ */ .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .section { padding: clamp(4rem, 9vw, 8rem) var(--pad); } .section-inner { max-width: var(--max); margin: 0 auto; } /* ════════════════════════════════════════════════════════════ SCROLL PROGRESS BAR ═══════════════════════════════════════════════════════════ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--accent); z-index: 300; transition: width 0.05s linear; } /* ════════════════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 200; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--rule-soft); height: var(--nav-h); display: flex; align-items: center; } .nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .nav-logo { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.5rem; } .nav-logo .mark { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); font-family: var(--serif); font-style: italic; font-size: 0.92rem; } .nav-logo span.given { color: var(--ink); } .nav-logo span.family { font-style: italic; color: var(--accent); font-weight: 400; } .nav-links { display: flex; gap: 2.2rem; list-style: none; justify-content: center; } .nav-links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s; position: relative; padding: 0.25rem 0; } .nav-links a:hover { color: var(--ink); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(.6,.2,.1,1); } .nav-links a:hover::after { transform: scaleX(1); } .nav-right { display: flex; align-items: center; gap: 0.8rem; justify-content: flex-end; } .nav-cta { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.7rem 1.4rem; background: var(--accent); color: var(--on-accent); border-radius: 2px; transition: background 0.2s, transform 0.15s; white-space: nowrap; } .nav-cta:hover { background: var(--accent-hi); transform: translateY(-1px); } .nav-menu-btn { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; } .nav-menu-btn svg { width: 22px; height: 22px; stroke: var(--ink); } /* ════════════════════════════════════════════════════════════ MENU OVERLAY ═══════════════════════════════════════════════════════════ */ .menu-overlay { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .menu-overlay.open { opacity: 1; pointer-events: auto; } .menu-overlay-top { height: var(--nav-h); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule-soft); } .menu-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; } .menu-close svg { width: 22px; height: 22px; stroke: var(--ink); } .menu-body { flex: 1; padding: clamp(2rem, 6vw, 5rem) var(--pad); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 6vw, 5rem); max-width: var(--max); margin: 0 auto; width: 100%; align-items: start; } .menu-primary { list-style: none; display: flex; flex-direction: column; gap: 0; } .menu-primary li { border-top: 1px solid var(--rule-soft); overflow: hidden; } .menu-primary li:last-child { border-bottom: 1px solid var(--rule-soft); } .menu-primary a { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; line-height: 1.1; padding: 1.4rem 0; display: flex; align-items: baseline; justify-content: space-between; transition: padding 0.3s cubic-bezier(.6,.2,.1,1), color 0.25s; } .menu-primary a:hover { padding-left: 1rem; color: var(--accent); } .menu-primary a .num { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-mute); font-style: normal; font-weight: 500; } .menu-meta { display: flex; flex-direction: column; gap: 2rem; } .menu-meta h4 { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.6rem; } .menu-meta p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.7; } .menu-meta a { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; } /* ════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════ */ .hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: min(86vh, 820px); border-bottom: 1px solid var(--rule-soft); } .hero-left { padding: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 5rem) clamp(2.5rem, 6vw, 5rem) var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 2rem; position: relative; } .hero-meta { display: flex; align-items: center; gap: 1.2rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; } .hero-meta .live { position: relative; } .hero-meta .live::before { content: ''; width: 6px; height: 6px; background: #2c8a4a; border-radius: 50%; display: inline-block; margin-right: 0.5rem; animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero h1 { font-size: clamp(3rem, 6.6vw, 6rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.025em; } .hero h1 em { font-style: italic; color: var(--accent); font-weight: 300; } .hero h1 .ws { display: inline-block; } .hero-lead { font-size: clamp(1rem, 1.2vw, 1.1rem); font-weight: 400; line-height: 1.7; color: var(--ink-soft); max-width: 460px; } .hero-lead strong { font-weight: 500; color: var(--ink); } .hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.8rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; transition: background 0.2s, transform 0.15s, border-color 0.2s, color 0.2s; border: 1px solid transparent; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hi); transform: translateY(-1px); } .btn-ghost { color: var(--ink); padding-left: 0; padding-right: 0; letter-spacing: 0.1em; text-transform: none; font-size: 0.85rem; font-weight: 500; } .btn-ghost .arrow { transition: transform 0.25s; } .btn-ghost:hover .arrow { transform: translateX(4px); } .btn-outline { border: 1px solid var(--rule); color: var(--ink); } .btn-outline:hover { border-color: var(--ink); } .btn-on-deep { background: var(--on-deep); color: var(--bg-deep); } .btn-on-deep:hover { background: white; } .hero-trust { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.5rem; } .hero-trust .sep { width: 1px; height: 12px; background: var(--rule); } .hero-right { position: relative; background: var(--bg-deep); overflow: hidden; display: flex; flex-direction: column; } .hero-photo-frame { flex: 1; position: relative; overflow: hidden; } .hero-photo-frame image-slot { width: 100%; height: 100%; display: block; } .hero-photo-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45) 100%); pointer-events: none; } .hero-quote-block { position: absolute; left: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); z-index: 2; padding: 1.6rem 1.8rem; background: color-mix(in oklab, var(--bg-deep) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--rule-deep); border-radius: 2px; color: var(--on-deep); } .hero-quote-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; } .hero-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.005em; } .hero-quote .attrib { display: block; margin-top: 0.7rem; font-style: normal; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-deep-mute); } .hero-corner { position: absolute; top: 1.1rem; left: 1.1rem; right: auto; z-index: 2; font-family: var(--sans); font-style: normal; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; color: var(--ink); background: color-mix(in oklab, var(--bg-card) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 0.5rem 0.8rem; } /* ════════════════════════════════════════════════════════════ STRIP — STATS ═══════════════════════════════════════════════════════════ */ .strip { background: var(--bg-warm); border-bottom: 1px solid var(--rule-soft); } .strip-inner { max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: center; } .strip-item { display: flex; flex-direction: column; gap: 0.3rem; } .strip-num { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 300; color: var(--ink); line-height: 1; letter-spacing: -0.02em; } .strip-num em { font-style: italic; color: var(--accent); } .strip-label { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; max-width: 200px; } .strip-rule { display: none; } /* ════════════════════════════════════════════════════════════ SECTION HEADERS — common ═══════════════════════════════════════════════════════════ */ .section-header { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule-soft); padding-bottom: 2rem; } .section-header-left { min-width: 180px; } .section-header h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 300; line-height: 1.05; } .section-header h2 em { font-style: italic; color: var(--accent); } .section-header .lede { font-size: 1rem; color: var(--ink-soft); max-width: 38ch; line-height: 1.65; align-self: end; } /* ════════════════════════════════════════════════════════════ PROBLEM ═══════════════════════════════════════════════════════════ */ .problem { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .problem-left { position: sticky; top: calc(var(--nav-h) + 2rem); } .problem-left h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; line-height: 1.12; margin: 1.2rem 0; } .problem-left h2 em { font-style: italic; color: var(--accent); } .problem-left .note { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); } .problem-items { display: flex; flex-direction: column; gap: 1rem; } .problem-item { padding: 2rem 2.2rem 2rem 2.2rem; background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: 2px; position: relative; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; } .problem-item:hover { border-color: var(--accent-pale); box-shadow: var(--shadow); transform: translateX(2px); } .problem-item-num { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--accent); letter-spacing: 0.04em; padding-top: 0.3rem; min-width: 1.8rem; } .problem-item-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin-bottom: 0.6rem; line-height: 1.3; color: var(--ink); } .problem-item-text { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; } /* ════════════════════════════════════════════════════════════ ANGEBOTE — DEEP SECTION ═══════════════════════════════════════════════════════════ */ .angebote { background: var(--bg-deep); color: var(--on-deep); position: relative; overflow: hidden; } .angebote::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle at center, var(--accent-soft), transparent 70%); pointer-events: none; } .angebote .eyebrow { color: var(--gold); } .angebote .section-header { border-bottom-color: var(--rule-deep); } .angebote .section-header h2 { color: var(--on-deep); } .angebote .section-header h2 em { color: var(--gold); font-style: italic; } .angebote .section-header .lede { color: var(--on-deep-mute); } .angebote .section-num { color: var(--on-deep-mute); } .angebote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .angebot-card { background: rgba(255,255,255,0.025); border: 1px solid var(--rule-deep); padding: 2.2rem; display: flex; flex-direction: column; gap: 1.2rem; transition: background 0.3s, border-color 0.3s, transform 0.3s; cursor: pointer; position: relative; overflow: hidden; } .angebot-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-pale), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .angebot-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); transform: translateY(-3px); } .angebot-card:hover::before { opacity: 1; } .angebot-mark { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold); color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.1rem; border-radius: 50%; } .angebot-card h3 { font-size: 1.45rem; font-weight: 400; line-height: 1.2; color: var(--on-deep); } .angebot-card h3 .num { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--on-deep-mute); margin-bottom: 0.5rem; font-weight: 500; } .angebot-card p { font-size: 0.9rem; color: var(--on-deep-mute); line-height: 1.7; flex-grow: 1; } .angebot-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .angebot-tag { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; background: var(--accent-pale); color: var(--gold); border-radius: 20px; } [data-palette="terracotta"] .angebot-tag { color: var(--on-deep); background: rgba(241,228,210,0.1); } .angebot-link { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; } .angebot-link .arrow { transition: transform 0.25s; } .angebot-card:hover .angebot-link .arrow { transform: translateX(4px); } /* ════════════════════════════════════════════════════════════ ABOUT ═══════════════════════════════════════════════════════════ */ .about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .about-left { position: sticky; top: calc(var(--nav-h) + 2rem); display: flex; flex-direction: column; gap: 1.5rem; } .about-photo { width: 100%; aspect-ratio: 4/5; background: var(--bg-deep); overflow: hidden; position: relative; border-radius: 2px; } .about-photo image-slot { width: 100%; height: 100%; } .about-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, rgba(0,0,0,0.35), transparent); pointer-events: none; } .about-cap { font-family: var(--serif); font-style: italic; font-size: 0.85rem; color: var(--ink-mute); line-height: 1.5; padding-left: 1rem; border-left: 1px solid var(--rule); } .about-meta { display: flex; flex-direction: column; border-top: 1px solid var(--rule); margin-top: 0.5rem; } .about-meta-row { display: grid; grid-template-columns: 1fr 1.4fr; padding: 0.85rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.85rem; gap: 1rem; align-items: baseline; } .about-meta-key { color: var(--ink-mute); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } .about-meta-val { font-weight: 400; text-align: right; color: var(--ink); } .about-meta-val em { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 0.95rem; } .about-right .eyebrow { margin-bottom: 1.2rem; } .about-right h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 300; line-height: 1.1; margin-bottom: 2.4rem; } .about-right h2 em { font-style: italic; color: var(--accent); } .about-right .lede { font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 300; line-height: 1.45; color: var(--ink); margin-bottom: 2rem; font-style: italic; } .about-right .lede::first-letter { font-size: 2.4em; float: left; line-height: 0.85; padding-right: 0.4rem; padding-top: 0.4rem; font-style: normal; color: var(--accent); } .about-body { display: flex; flex-direction: column; gap: 1.4rem; } .about-body p { font-size: 1rem; line-height: 1.8; color: var(--ink-soft); } .about-body p strong { color: var(--ink); font-weight: 500; } .about-body p em { font-style: italic; color: var(--accent-hi); } .pullquote { margin: 2.5rem 0; padding: 2rem 2.4rem; background: var(--accent-soft); border-left: 2px solid var(--accent); position: relative; } .pullquote::before { content: '"'; position: absolute; top: -0.2rem; left: 1.2rem; font-family: var(--serif); font-size: 3.5rem; color: var(--accent); line-height: 1; opacity: 0.35; } .pullquote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 300; line-height: 1.5; color: var(--ink); padding-left: 2rem; } /* Journey timeline */ .journey { margin: 3rem 0 2rem; padding-top: 2rem; border-top: 1px solid var(--rule-soft); } .journey-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; } .journey-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .journey-track::before { content: ''; position: absolute; top: 14px; left: 8%; right: 8%; height: 1px; background: var(--rule); } .journey-step { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; cursor: pointer; padding: 0 0.5rem 0 0; position: relative; } .journey-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 0.78rem; color: var(--ink-mute); transition: all 0.3s; z-index: 1; } .journey-step:hover .journey-dot, .journey-step.active .journey-dot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .journey-year { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; } .journey-title { font-family: var(--serif); font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink); } .journey-detail { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; max-width: 200px; } /* About projects */ .about-projects-h { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3rem; margin-bottom: 1rem; } .about-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .proj-card { padding: 1.4rem 1.6rem; border: 1px solid var(--rule-soft); background: var(--bg-card); border-radius: 2px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; display: block; } .proj-card:hover { border-color: var(--accent-pale); transform: translateY(-2px); box-shadow: var(--shadow); } .proj-tag { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .proj-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--ink); } .proj-name em { font-style: italic; } .proj-desc { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; } .proj-card .arrow { display: inline-block; margin-top: 0.8rem; font-size: 0.78rem; color: var(--accent); letter-spacing: 0.1em; } /* ════════════════════════════════════════════════════════════ CASES ═══════════════════════════════════════════════════════════ */ .cases { background: var(--bg-warm); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .case-card { background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; cursor: pointer; } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--rule); } .case-card-top { background: var(--accent); color: var(--on-accent); padding: 2rem 1.8rem; position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; } .case-card-top.gold { background: var(--gold); color: var(--bg); } [data-palette="terracotta"] .case-card-top.gold { color: var(--on-accent); } .case-card-top.dark { background: var(--bg-deep); color: var(--on-deep); } .case-meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; font-weight: 500; } .case-meta-row .roman { font-family: var(--serif); font-style: italic; font-size: 0.95rem; opacity: 0.7; text-transform: none; letter-spacing: 0; } .case-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1.25; margin-top: 1.5rem; } .case-card-body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1; } .case-situation { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.7; } .case-results { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); margin-top: auto; } .case-result { font-size: 0.82rem; color: var(--ink); font-weight: 400; display: grid; grid-template-columns: 18px 1fr; gap: 0.5rem; align-items: baseline; } .case-result::before { content: '+'; color: var(--accent); font-family: var(--serif); font-size: 1.1rem; line-height: 1; } /* ════════════════════════════════════════════════════════════ NEWSLETTER ═══════════════════════════════════════════════════════════ */ .newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .nl-left h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; line-height: 1.1; margin: 1.2rem 0 1.2rem; } .nl-left h2 em { font-style: italic; color: var(--accent); } .nl-text { font-size: 1rem; font-weight: 400; color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.5rem; max-width: 460px; } .nl-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; } .nl-topic { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; padding: 0.4rem 0.9rem; border: 1px solid var(--rule); border-radius: 20px; color: var(--ink-soft); text-transform: uppercase; } .nl-right { background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: 2px; padding: clamp(2rem, 3vw, 2.6rem); box-shadow: var(--shadow); } .nl-preview-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; } .nl-preview-label::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); } .nl-preview-issue { font-family: var(--serif); font-style: italic; font-size: 0.78rem; color: var(--accent); margin-bottom: 0.6rem; } .nl-preview-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.3; margin-bottom: 0.8rem; color: var(--ink); } .nl-preview-excerpt { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule-soft); } .nl-form { display: flex; flex-direction: column; gap: 0.7rem; } .nl-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.7rem; } .nl-input { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--bg); font-family: var(--sans); font-size: 0.88rem; color: var(--ink); outline: none; transition: border-color 0.2s; } .nl-input:focus { border-color: var(--accent); } .nl-input::placeholder { color: var(--ink-mute); } .nl-submit { padding: 0.95rem; background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; transition: background 0.2s; margin-top: 0.4rem; } .nl-submit:hover { background: var(--accent); color: var(--on-accent); } .nl-disclaimer { font-size: 0.72rem; color: var(--ink-mute); text-align: center; margin-top: 0.5rem; } .nl-form.success { text-align: center; padding: 2rem 1rem; } .nl-form.success::before { content: '✓'; display: block; font-size: 2.5rem; color: var(--accent); margin-bottom: 1rem; } .nl-form.success .nl-success-text { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--ink); line-height: 1.4; } .nl-form.success .nl-success-sub { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.7rem; } /* ════════════════════════════════════════════════════════════ CTA ═══════════════════════════════════════════════════════════ */ .cta { background: var(--bg-deep); color: var(--on-deep); text-align: center; position: relative; overflow: hidden; } .cta::before, .cta::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .cta::before { top: -150px; left: -150px; width: 380px; height: 380px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); } .cta::after { bottom: -150px; right: -150px; width: 420px; height: 420px; background: radial-gradient(circle, var(--accent-pale), transparent 70%); opacity: 0.4; } .cta-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } .cta .eyebrow { color: var(--gold); justify-content: center; margin-bottom: 1.5rem; display: inline-flex; } .cta h2 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; line-height: 1.05; margin-bottom: 1.5rem; } .cta h2 em { font-style: italic; color: var(--gold); } .cta-text { font-size: 1.05rem; font-weight: 400; color: var(--on-deep-mute); line-height: 1.7; margin-bottom: 2.4rem; max-width: 540px; margin-left: auto; margin-right: auto; } .cta-actions { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; } .cta-actions .btn-outline { color: var(--on-deep); border-color: var(--rule-deep); } .cta-actions .btn-outline:hover { border-color: var(--on-deep); } .cta-meta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule-deep); display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--on-deep-mute); } .cta-meta strong { color: var(--on-deep); font-weight: 500; } /* ════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════ */ .footer { background: var(--bg); padding: 4rem var(--pad) 2rem; border-top: 1px solid var(--rule-soft); } .footer-inner { max-width: var(--max); margin: 0 auto; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rule-soft); } .footer-brand { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; } .footer-brand .mark { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); font-family: var(--serif); font-style: italic; font-size: 1rem; } .footer-brand span.fam { font-style: italic; color: var(--accent); font-weight: 400; } .footer-tagline { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; max-width: 280px; } .footer-col h5 { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { font-size: 0.88rem; color: var(--ink-soft); transition: color 0.2s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-mute); } .footer-colophon { font-family: var(--serif); font-style: italic; font-size: 0.82rem; } /* ════════════════════════════════════════════════════════════ BOOKING MODAL ═══════════════════════════════════════════════════════════ */ .modal-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(10,10,8,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { background: var(--bg); width: 100%; max-width: 920px; max-height: 92vh; border-radius: 4px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.3fr; box-shadow: 0 30px 80px rgba(0,0,0,0.5); transform: translateY(20px); transition: transform 0.35s cubic-bezier(.6,.2,.1,1); } .modal-backdrop.open .modal { transform: translateY(0); } .modal-aside { background: var(--bg-deep); color: var(--on-deep); padding: clamp(2rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1.5rem; position: relative; overflow: hidden; } .modal-aside::before { content: ''; position: absolute; top: -100px; right: -100px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); } .modal-aside .eyebrow { color: var(--gold); position: relative; z-index: 1;} .modal-aside h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; line-height: 1.2; position: relative; z-index: 1; } .modal-aside h3 em { font-style: italic; color: var(--gold); } .modal-aside p { font-size: 0.92rem; color: var(--on-deep-mute); line-height: 1.7; position: relative; z-index: 1; } .modal-aside ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; position: relative; z-index: 1; } .modal-aside li { font-size: 0.88rem; color: var(--on-deep); display: flex; align-items: flex-start; gap: 0.6rem; } .modal-aside li::before { content: '—'; color: var(--gold); flex-shrink: 0; } .modal-aside-meta { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--rule-deep); font-size: 0.78rem; color: var(--on-deep-mute); position: relative; z-index: 1; } .modal-aside-meta strong { color: var(--on-deep); font-weight: 500; } .modal-main { padding: clamp(1.6rem, 2.5vw, 2.2rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1.4rem; } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border-radius: 50%; z-index: 10; } .modal-close svg { width: 16px; height: 16px; stroke: var(--ink); } .modal-step { display: none; flex-direction: column; gap: 1.4rem; } .modal-step.active { display: flex; } .modal-step h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; } .modal-step .step-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.3rem; } .cal-nav { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 500; color: var(--ink); } .cal-nav button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink-soft); transition: background 0.2s; } .cal-nav button:hover { background: var(--accent-soft); color: var(--ink); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-grid .dow { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); text-align: center; padding: 0.4rem 0; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; border-radius: 50%; cursor: pointer; transition: background 0.2s, color 0.2s; border: 1px solid transparent; position: relative; } .cal-day:hover { background: var(--accent-soft); } .cal-day.empty { cursor: default; color: var(--ink-mute); opacity: 0.3; } .cal-day.disabled { color: var(--ink-mute); cursor: not-allowed; opacity: 0.4; } .cal-day.disabled:hover { background: transparent; } .cal-day.today { font-weight: 500; } .cal-day.today::after { content: ''; width: 3px; height: 3px; background: var(--accent); border-radius: 50%; position: absolute; bottom: 6px; } .cal-day.selected { background: var(--accent); color: var(--on-accent); } .timeslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem; } .timeslot { padding: 0.7rem; border: 1px solid var(--rule); border-radius: 2px; font-size: 0.85rem; font-weight: 500; text-align: center; cursor: pointer; transition: all 0.2s; } .timeslot:hover { border-color: var(--accent); } .timeslot.selected { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .timeslot.disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .form-field { display: flex; flex-direction: column; gap: 0.35rem; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .form-field input, .form-field textarea, .form-field select { padding: 0.78rem 0.9rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--bg); font-family: var(--sans); font-size: 0.92rem; color: var(--ink); outline: none; transition: border-color 0.2s; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--accent); } .form-field textarea { resize: vertical; min-height: 84px; font-family: var(--sans); } .topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .topic-opt { padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: 2px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; transition: all 0.2s; } .topic-opt:hover { border-color: var(--accent); } .topic-opt.selected { border-color: var(--accent); background: var(--accent-soft); } .topic-opt::before { content: ''; width: 12px; height: 12px; border: 1px solid var(--rule); border-radius: 50%; display: inline-block; flex-shrink: 0; transition: all 0.2s; } .topic-opt.selected::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg); } .modal-actions { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); margin-top: auto; } .modal-actions .btn-ghost { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-soft); } .modal-summary { background: var(--accent-soft); padding: 1rem 1.2rem; border-radius: 2px; font-size: 0.85rem; color: var(--ink); display: flex; flex-direction: column; gap: 0.35rem; } .modal-summary strong { font-weight: 500; } .modal-summary em { font-family: var(--serif); font-style: italic; color: var(--accent); } .modal-step.success { text-align: center; padding: 2rem 1rem; align-items: center; } .modal-step.success .check { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 0.5rem; } .modal-step.success h4 { font-size: 1.8rem; font-weight: 400; } .modal-step.success p { color: var(--ink-soft); line-height: 1.7; max-width: 32ch; } /* ════════════════════════════════════════════════════════════ SCROLL REVEAL ═══════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal[data-delay="3"] { transition-delay: 0.3s; } .reveal[data-delay="4"] { transition-delay: 0.4s; } /* ════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 980px) { .nav-links { display: none; } .nav-menu-btn { display: flex; } .nav-cta { display: none; } .nav-inner { grid-template-columns: 1fr auto; } .hero { grid-template-columns: 1fr; min-height: auto; } .hero-right { aspect-ratio: 4/3; } .strip-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } .problem, .about, .newsletter { grid-template-columns: 1fr; } .problem-left, .about-left { position: static; } .section-header { grid-template-columns: 1fr; gap: 1rem; } .angebote-grid { grid-template-columns: 1fr; } .cases-grid { grid-template-columns: 1fr; } .modal { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; } .modal-aside { display: none; } .modal-backdrop { padding: 0; } .menu-body { grid-template-columns: 1fr; } .menu-primary a { font-size: clamp(2rem, 8vw, 3rem); } .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } .journey-track { grid-template-columns: 1fr; gap: 1rem; } .journey-track::before { display: none; } .journey-step { padding: 1rem 0; border-bottom: 1px solid var(--rule-soft); } .journey-detail { max-width: 100%; } .about-projects { grid-template-columns: 1fr; } .nl-row { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .topic-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .strip-inner { grid-template-columns: 1fr; gap: 1.2rem; } .footer-top { grid-template-columns: 1fr; } .hero-quote-block { padding: 1.1rem 1.3rem; } .hero-quote { font-size: 1rem; } .cta-meta { gap: 1.2rem; } } /* ════════════════════════════════════════════════════════════ PROBLEM — QUOTE PHOTO ═══════════════════════════════════════════════════════════ */ .problem-quote-img { margin: 1.8rem auto 0; max-width: 230px; text-align: center; } .problem-quote-img image-slot { width: 118px; margin: 0 auto; height: auto; aspect-ratio: 465/707; display: block; border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-lift); } .problem-quote-img figcaption { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.7rem; line-height: 1.5; text-align: center; } /* ════════════════════════════════════════════════════════════ BILDWELT — GALLERY ═══════════════════════════════════════════════════════════ */ .bildwelt { background: var(--bg-warm); } .bildwelt-grid { column-count: 3; column-gap: 1.4rem; margin-top: 3.2rem; } .bw-tile { break-inside: avoid; margin: 0 0 2.2rem; } .bw-tile image-slot { width: 100%; height: auto; display: block; border-radius: 2px; overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.4s, transform 0.4s; } .bw-tile:hover image-slot { box-shadow: var(--shadow-lift); transform: translateY(-3px); } .bw-cap { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); margin-top: 0.85rem; line-height: 1.45; text-wrap: pretty; } @media (max-width: 860px) { .bildwelt-grid { column-count: 2; column-gap: 1.1rem; } } @media (max-width: 540px) { .bildwelt-grid { column-count: 1; } .bw-tile { margin-bottom: 2.6rem; } } /* ════════════════════════════════════════════════════════════ OVERRIDES — black, upright headlines & wordmark ═══════════════════════════════════════════════════════════ */ /* Wordmark "Gerking": same black as "Katja", upright */ .nav-logo span.family, .footer-brand span.fam { font-style: normal; color: var(--ink); font-weight: 500; } .footer-brand span.fam { color: var(--on-accent); } /* Headline emphasis: no italic, no accent colour — pure black */ .hero h1 em, .section-header h2 em, .problem-left h2 em, .about-right h2 em, .nl-left h2 em { font-style: normal; color: var(--ink); font-weight: inherit; } /* Headlines that sit on dark sections: inherit the heading's own colour */ .angebote .section-header h2 em, .cta h2 em, .modal-aside h3 em { font-style: normal; color: inherit; } /* ════════════════════════════════════════════════════════════ NO ITALICS — distinction carried by weight/spacing instead ═══════════════════════════════════════════════════════════ */ * { font-style: normal !important; } /* Quotes kept distinct via a lighter weight + tighter spacing */ .hero-quote, .pullquote blockquote, .about-right .lede, .testimonial-quote { font-weight: 300; letter-spacing: -0.01em; } /* Small editorial captions: weight + tracking instead of italic */ .problem-quote-img figcaption, .bw-cap, .about-cap, .eyebrow + .hero-quote-label, .hero-corner { letter-spacing: 0.01em; } /* ════════════════════════════════════════════════════════════ BUTTONS — calmer deep blue (apricot/light-blue palette) ═══════════════════════════════════════════════════════════ */ [data-palette="apricot"] .btn-primary, [data-palette="apricot"] .nav-cta { background: #355f86; color: #f6faff; } [data-palette="apricot"] .btn-primary:hover, [data-palette="apricot"] .nav-cta:hover { background: #2c4f70; }