/* Tischlerei Göke — shared styles */ :root { --bg: #F4EFE6; --bg-2: #ECE5D6; --bg-warm: #E8DDC9; --ink: #1A1A1A; --ink-2: #2A2722; --muted: #6B5F4E; --line: #C9BFA8; --line-2: #B7A98A; --walnut: #8B6F47; --walnut-deep: #5C4A30; --accent: #C57A2E; --accent-deep: #9F5D1F; --denkmal-bg: #1A1815; --denkmal-fg: #E8DFD0; --denkmal-accent: #C9A86A; --f-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --max: 1440px; --pad: clamp(20px, 4vw, 56px); } /* ---------- VARIANTS via [data-tone] on ---------- */ /* Editorial Handwerk = default (warm) */ body[data-tone="modern"] { --bg: #FAF8F4; --bg-2: #F0EEE9; --bg-warm: #E9E5DC; --ink: #111111; --muted: #6B6B6B; --line: #D8D4CB; --line-2: #B5AFA1; --walnut: #2D4A4A; --walnut-deep: #1F3535; --accent: #1A1A1A; --accent-deep: #000; } body[data-tone="werkstatt"] { --bg: #E8E2D2; --bg-2: #DDD5C0; --bg-warm: #CFC4A8; --ink: #1F1B14; --muted: #5C5240; --line: #B5A988; --line-2: #968A6B; --walnut: #6B4F2A; --accent: #B85A18; --accent-deep: #8A4210; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); } body { font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--accent); color: #fff; } /* ---------- Type scale ---------- */ .kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 380; font-style: normal; letter-spacing: -0.015em; color: var(--ink); line-height: 0.98; font-variation-settings: "opsz" 144, "SOFT" 30; } .display { font-size: clamp(56px, 9vw, 168px); line-height: 0.92; letter-spacing: -0.025em; font-weight: 320; } .h1 { font-size: clamp(40px, 6vw, 96px); line-height: 1; } .h2 { font-size: clamp(32px, 4.4vw, 72px); line-height: 1.02; } .h3 { font-size: clamp(22px, 2.2vw, 36px); line-height: 1.1; } .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; } .body { font-size: 16px; line-height: 1.6; color: var(--ink-2); } .italic-serif { font-style: italic; font-family: var(--f-display); font-weight: 380; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); transition: padding 0.3s ease; } .topbar-inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } .topbar .logo { display: flex; align-items: center; gap: 12px; } .topbar .logo img { height: 32px; width: auto; display: block; } .footer-logo { height: 44px; width: auto; display: block; margin-bottom: 28px; } .topbar .logo-meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line-2); padding-left: 12px; line-height: 1.3; } .nav { display: flex; justify-content: center; gap: 32px; } .nav a { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); position: relative; padding: 4px 0; } .nav a.is-active::after, .nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); } .topbar-cta { display: flex; align-items: center; gap: 8px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 0; transition: transform 0.2s ease, background 0.2s ease; } .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; } /* WhatsApp / call inline */ .contact-inline { display: flex; gap: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .contact-inline a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s; } .contact-inline a:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); } .contact-inline svg { width: 12px; height: 12px; } /* ---------- Layout ---------- */ .section { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 140px) var(--pad); } .section-tight { padding-top: clamp(32px, 5vw, 80px); padding-bottom: clamp(32px, 5vw, 80px); } .section-head { display: grid; grid-template-columns: 80px 1fr; align-items: end; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 56px; } .section-head > * { grid-column: 2; } .section-head > .num { grid-column: 1; } .section-head .num { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; } @media (max-width: 800px) { .split { grid-template-columns: 1fr; } .section-head { grid-template-columns: 1fr; gap: 8px; } } /* ---------- Card / tile ---------- */ .tile { position: relative; display: block; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; text-decoration: none; color: inherit; } .tile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(26,24,21,0.35); } /* Crosshair corner ticks — architectural drawing detail */ .tile::before, .tile::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 3; } .tile::before { top: -1px; left: -1px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); } .tile::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); } .tile-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-warm); margin: 10px 10px 0; border-bottom: 1px solid var(--line); } .tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.6s ease; filter: saturate(0.94); } .tile:hover .tile-photo img { transform: scale(1.04); filter: saturate(1.05); } /* Plate index — file-tab badge sitting on the photo */ .tile-photo::before { content: attr(data-plate); position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: var(--bg); padding: 6px 10px; border: 1px solid var(--line); line-height: 1; } /* Inner mat hairline framing the image */ .tile-photo::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(26,24,21,0.06); pointer-events: none; z-index: 1; } .tile-meta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 20px; padding: 16px 16px 14px; position: relative; } .tile-meta-num { display: none; } .tile-meta-title { font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 24px); font-weight: 380; line-height: 1.1; letter-spacing: -0.005em; grid-column: 1 / 2; grid-row: 1 / 2; color: var(--ink); } .tile-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; grid-column: 2 / 3; grid-row: 1 / 2; align-self: end; padding-bottom: 3px; position: relative; } .tile-tag::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; } .tile:hover .tile-tag::before { transform: scaleX(1); transform-origin: left; } .tile-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26,24,21,0.55) 100%); opacity: 0; transition: opacity 0.5s ease; display: flex; align-items: flex-end; padding: 20px; color: #fff; z-index: 2; pointer-events: none; } .tile:hover .tile-overlay { opacity: 1; } .tile-overlay-num { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--denkmal-accent); } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: var(--bg); margin-top: 80px; } .footer-inner { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 6vw, 100px) var(--pad) 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.12); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer ul { gap: 2px; } .footer a { display: inline-block; padding: 8px 0; line-height: 1.3; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-meta { flex-direction: column; gap: 8px; } } .footer h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,223,208,0.6); font-weight: 500; margin-bottom: 16px; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .footer a { color: var(--bg); opacity: 0.85; font-size: 14px; } .footer a:hover { opacity: 1; color: var(--denkmal-accent); } .footer-display { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); line-height: 0.95; font-weight: 360; margin-bottom: 24px; letter-spacing: -0.015em; } .footer-meta { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,223,208,0.5); flex-wrap: wrap; gap: 16px; } /* ---------- Utility ---------- */ .divider { height: 1px; background: var(--line); border: 0; margin: 0; } .vrule { width: 1px; align-self: stretch; background: var(--line); } @media (max-width: 1100px) { .hide-mobile { display: none !important; } } @media (max-width: 1100px) { .topbar-inner { grid-template-columns: auto 1fr auto; gap: 16px; } .topbar .logo-meta { display: none; } .nav { gap: 20px; } } @media (max-width: 820px) { .topbar-inner { grid-template-columns: auto auto; } .nav { display: none; } .topbar-cta { justify-self: end; gap: 4px; } .hide-mobile-cta { display: none !important; } } @media (min-width: 821px) { .topbar-phone-mobile, .nav-toggle { display: none !important; } } /* ---------- Mobile drawer ---------- */ .topbar-phone-mobile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--ink); transition: background 0.2s, color 0.2s; } .topbar-phone-mobile:hover { background: var(--ink); color: var(--bg); } .topbar-phone-mobile svg { width: 16px; height: 16px; } .nav-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; } .hamburger { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; position: relative; } .hamburger span { display: block; height: 1.5px; background: currentColor; width: 100%; transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; } .hamburger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .nav-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; } .nav-drawer.is-open { pointer-events: auto; visibility: visible; } .nav-drawer-backdrop { position: absolute; inset: 0; background: rgba(20,18,15,0.5); opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; } .nav-drawer-panel { position: absolute; top: 0; right: 0; width: min(420px, 100%); height: 100%; background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: -20px 0 60px -20px rgba(0,0,0,0.3); border-left: 1px solid var(--line); } .nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); } .nav-drawer-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .nav-drawer-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 300; color: var(--ink); margin-right: -10px; line-height: 1; } .nav-drawer-links { display: flex; flex-direction: column; padding: 24px 24px 32px; gap: 0; flex: 0 0 auto; } .nav-drawer-links a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 32px; font-weight: 380; letter-spacing: -0.01em; line-height: 1; color: var(--ink); transition: color 0.2s, padding-left 0.3s; } .nav-drawer-links a:hover { padding-left: 8px; color: var(--accent); } .nav-drawer-links a.is-active { color: var(--accent); } .nav-drawer-links a:last-child { border-bottom: 0; } .nav-drawer-num { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); min-width: 28px; font-style: normal; } .nav-drawer-cta { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-top: 1px solid var(--line); background: var(--bg-2); margin-top: auto; } .nav-drawer-contact { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); transition: border-color 0.2s, background 0.2s; } .nav-drawer-contact:hover { border-color: var(--ink); } .nav-drawer-contact svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); } .nav-drawer-contact-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .nav-drawer-contact-value { font-family: var(--f-display); font-size: 17px; font-weight: 400; letter-spacing: -0.005em; color: var(--ink); } .nav-drawer-btn { justify-content: center; padding: 16px; font-size: 13px; } .nav-drawer-foot { padding: 18px 24px 24px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); background: var(--bg-2); } /* Audience switcher pill */ .audience-bar { display: inline-flex; border: 1px solid var(--line-2); background: var(--bg-2); padding: 4px; gap: 2px; border-radius: 0; } .audience-bar button { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; color: var(--muted); transition: all 0.2s; } .audience-bar button.active { background: var(--ink); color: var(--bg); } /* Reveal-on-scroll — opacity-only fade. Avoids translateY jumps when navigating into mid-page or scrolling back up past a tile. */ .reveal { opacity: 0; transition: opacity 0.7s cubic-bezier(0.2,0.6,0.2,1); } .reveal.in { opacity: 1; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transition: none; } } /* Photo placeholder */ .photo-ph { position: relative; background: repeating-linear-gradient( 135deg, var(--bg-warm) 0 12px, var(--bg-2) 12px 24px ); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* Form styles */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 10px 0; font-family: var(--f-body); font-size: 16px; color: var(--ink); border-radius: 0; outline: none; transition: border-color 0.2s; } .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent); } .field-error input, .field-error textarea { border-bottom-color: #C13A1F; } .field .err { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #C13A1F; min-height: 14px; }