
:root {
  --bg: #0b0b0a;
  --bg-soft: #121210;
  --panel: #181815;
  --panel-2: #211f1a;
  --text: #f5f1e8;
  --muted: #b8b3a8;
  --line: rgba(255,255,255,.13);
  --accent: #d8c795;
  --accent-strong: #f0d999;
  --max: 1240px;
  --radius: 3px;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-strong); }
img { max-width: 100%; display:block; }
button, input, textarea { font: inherit; }
::selection { background: var(--accent); color:#15130e; }
.container { width:min(calc(100% - 42px), var(--max)); margin-inline:auto; }
.skip-link { position:absolute; left:-9999px; top:10px; background:#fff; color:#000; padding:.7rem 1rem; z-index:10000; }
.skip-link:focus { left:10px; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(11,11,10,.84); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.header-inner { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:flex; align-items:center; width:184px; flex:none; }
.brand img { width:100%; height:auto; }
.main-nav { display:flex; align-items:center; gap:1.65rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; }
.main-nav a { color:#ded9cf; padding:.45rem 0; position:relative; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .28s ease; }
.main-nav a:hover::after, .main-nav a.active::after { right:0; }
.main-nav a.active { color:var(--text); }
.nav-contact { border:1px solid var(--accent)!important; padding:.72rem 1rem!important; }
.nav-contact::after { display:none; }
.nav-contact:hover { background:var(--accent); color:#14130f!important; }
.nav-toggle { display:none; width:46px; height:46px; border:1px solid var(--line); background:transparent; color:#fff; cursor:pointer; }
.nav-toggle span { width:20px; height:1px; background:currentColor; display:block; margin:5px auto; }
.kicker { color:var(--accent); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
h1,h2,h3 { margin:0 0 .65em; font-weight:520; line-height:1.08; letter-spacing:-.035em; }
h1 { font-size:clamp(3.2rem, 8vw, 7.8rem); max-width:11ch; }
h2 { font-size:clamp(2.35rem, 5.2vw, 5.3rem); }
h3 { font-size:clamp(1.35rem, 2vw, 1.9rem); }
p { margin:0 0 1.25rem; }
.lead { font-size:clamp(1.18rem, 2vw, 1.5rem); color:#ddd8ce; max-width:760px; }
.muted { color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.75rem; min-height:54px; padding:.85rem 1.3rem; border:1px solid var(--accent); color:#111; background:var(--accent); font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; transition:.22s ease; cursor:pointer; }
.button:hover { background:var(--accent-strong); color:#111; transform:translateY(-2px); }
.button.ghost { background:transparent; color:var(--text); border-color:var(--line); }
.button.ghost:hover { border-color:var(--accent); color:var(--accent); }
.button-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero { min-height:calc(100svh - 92px); position:relative; overflow:hidden; display:grid; align-items:center; border-bottom:1px solid var(--line); }
.hero::before { content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 74% 42%, rgba(240,217,153,.20), transparent 15%), conic-gradient(from 225deg at 76% 42%, transparent 0 17%, rgba(240,217,153,.12) 19%, transparent 24% 100%); filter:blur(2px); }
.hero::after { content:""; position:absolute; width:16vw; min-width:130px; height:140%; top:-20%; right:19%; transform:rotate(24deg); background:linear-gradient(90deg, transparent, rgba(245,225,169,.16), transparent); filter:blur(22px); }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:5vw; align-items:center; padding:8rem 0; }
.hero-copy h1 em { font-style:normal; color:var(--accent); }
.hero-side { align-self:end; border-left:1px solid var(--accent); padding-left:1.5rem; max-width:390px; margin-bottom:1rem; }
.hero-side strong { display:block; color:var(--accent); font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; margin-bottom:.7rem; }
.scroll-cue { position:absolute; bottom:30px; right:max(21px, calc((100vw - var(--max))/2)); z-index:2; display:flex; align-items:center; gap:.8rem; color:#aaa59a; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.scroll-cue::before { content:""; width:46px; height:1px; background:var(--accent); }
.section { padding:clamp(5.5rem, 10vw, 10rem) 0; }
.section--soft { background:var(--bg-soft); }
.section--line { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:.36fr .64fr; gap:5vw; align-items:start; margin-bottom:4rem; }
.section-head h2 { max-width:11ch; }
.section-head .lead { padding-top:.4rem; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:center; }
.feature-image { aspect-ratio:4/5; position:relative; background:var(--panel); overflow:hidden; box-shadow:var(--shadow); }
.feature-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.feature-image:hover img { transform:scale(1.025); }
.feature-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 58%, rgba(0,0,0,.45)); pointer-events:none; }
.corner-label { position:absolute; left:1.3rem; bottom:1.2rem; z-index:2; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:3rem; }
.stat { padding:1.35rem 1rem 1.35rem 0; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; padding-left:1rem; }
.stat strong { display:block; font-size:1.8rem; color:var(--accent); font-weight:500; }
.stat span { color:var(--muted); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.service-card { min-height:310px; padding:2rem 1.5rem 2rem 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line); position:relative; }
.service-card:nth-child(3n) { border-right:0; padding-left:1.5rem; }
.service-card:nth-child(3n+2) { padding-left:1.5rem; }
.service-no { color:var(--accent); font-size:.72rem; letter-spacing:.15em; }
.service-card h3 { margin-top:4.7rem; }
.service-card p { color:var(--muted); max-width:33ch; }
.service-arrow { position:absolute; bottom:1.7rem; right:1.5rem; color:var(--accent); font-size:1.5rem; }
.process { counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.process-step { counter-increment:step; padding:2.2rem 1.5rem 1rem 0; border-right:1px solid var(--line); min-height:280px; }
.process-step:not(:first-child) { padding-left:1.5rem; }
.process-step:last-child { border-right:0; }
.process-step::before { content:"0" counter(step); display:block; color:var(--accent); font-size:.75rem; letter-spacing:.2em; margin-bottom:5rem; }
.process-step p { color:var(--muted); font-size:.93rem; }
.project-strip { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:14px; }
.project-strip a { position:relative; overflow:hidden; min-height:470px; background:var(--panel); }
.project-strip a:nth-child(2), .project-strip a:nth-child(3) { min-height:390px; margin-top:80px; }
.project-strip img { width:100%; height:100%; object-fit:cover; transition:transform .65s ease, filter .4s ease; }
.project-strip a:hover img { transform:scale(1.035); filter:brightness(1.08); }
.project-strip span { position:absolute; inset:auto 1.2rem 1rem; z-index:2; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.project-strip a::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.7)); }
.page-hero { padding:clamp(6rem,11vw,10rem) 0 4.8rem; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:36vw; height:36vw; min-width:350px; min-height:350px; border:1px solid rgba(216,199,149,.2); border-radius:50%; right:-8vw; top:-13vw; box-shadow:0 0 80px rgba(216,199,149,.06) inset; }
.page-hero h1 { font-size:clamp(3.6rem,8vw,7.2rem); max-width:12ch; }
.page-hero .lead { max-width:720px; margin-top:1.8rem; }
.content-narrow { max-width:850px; }
.prose p { color:#d0cbc1; font-size:1.12rem; }
.prose strong { color:var(--text); }
.quote { margin:3.5rem 0; padding:2.2rem 0 2.2rem 2.1rem; border-left:1px solid var(--accent); font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.25; letter-spacing:-.02em; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value { background:var(--bg-soft); padding:2.2rem; min-height:260px; }
.value .kicker { display:block; margin-bottom:4.5rem; }
.detail-list { border-top:1px solid var(--line); }
.detail-item { display:grid; grid-template-columns:70px .8fr 1fr; gap:2rem; padding:2.4rem 0; border-bottom:1px solid var(--line); align-items:start; }
.detail-item .num { color:var(--accent); font-size:.75rem; letter-spacing:.14em; }
.detail-item h2 { font-size:clamp(1.7rem,3vw,2.6rem); }
.detail-item p { color:var(--muted); margin:0; }
.gallery-toolbar { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }
.gallery { columns:3 320px; column-gap:16px; }
.gallery-item { display:block; break-inside:avoid; position:relative; margin:0 0 16px; overflow:hidden; background:var(--panel); cursor:zoom-in; }
.gallery-item:nth-child(4n+1) img { aspect-ratio:4/5; }
.gallery-item:nth-child(4n+2) img { aspect-ratio:1/1; }
.gallery-item:nth-child(4n+3) img { aspect-ratio:4/3; }
.gallery-item:nth-child(4n) img { aspect-ratio:3/4; }
.gallery-item img { width:100%; object-fit:cover; transition:transform .55s ease, opacity .3s; }
.gallery-item:hover img { transform:scale(1.025); opacity:.88; }
.gallery-item::after { content:"Projekt ansehen ↗"; position:absolute; left:1rem; bottom:.8rem; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:.25s; }
.gallery-item:hover::after { opacity:1; transform:none; }
.lightbox { display:none; position:fixed; inset:0; z-index:500; background:rgba(4,4,3,.95); padding:4vw; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:86vh; box-shadow:var(--shadow); }
.lightbox button { position:absolute; right:2rem; top:1.5rem; border:1px solid var(--line); width:48px; height:48px; background:transparent; color:#fff; font-size:1.5rem; cursor:pointer; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,8rem); }
.contact-card { border-top:1px solid var(--line); padding:1.4rem 0; }
.contact-card small { display:block; color:var(--accent); text-transform:uppercase; letter-spacing:.16em; margin-bottom:.45rem; }
.contact-card a, .contact-card address { font-size:clamp(1.2rem,2vw,1.65rem); font-style:normal; }
.hours { width:100%; border-collapse:collapse; color:#d4cfc5; }
.hours td { border-bottom:1px solid var(--line); padding:.7rem 0; }
.hours td:last-child { text-align:right; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field.full { grid-column:1/-1; }
.field label { color:#cac5ba; font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; }
.field input, .field textarea { width:100%; color:var(--text); background:var(--panel); border:1px solid var(--line); padding:1rem; outline:none; }
.field input:focus, .field textarea:focus { border-color:var(--accent); }
.field textarea { min-height:190px; resize:vertical; }
.form-note { grid-column:1/-1; font-size:.78rem; color:var(--muted); }
.form-status { min-height:1.2em; color:var(--accent); }
.legal { max-width:880px; }
.legal h2 { font-size:1.65rem; margin-top:2.5rem; letter-spacing:-.015em; }
.legal h3 { font-size:1.15rem; margin-top:1.8rem; }
.legal p, .legal li { color:#cbc6bc; }
.cta { position:relative; overflow:hidden; background:var(--accent); color:#15130f; padding:clamp(4.5rem,8vw,8rem) 0; }
.cta::after { content:""; position:absolute; width:32vw; height:160%; top:-30%; right:8%; transform:rotate(25deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); filter:blur(25px); }
.cta .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:end; }
.cta h2 { max-width:12ch; margin:0; }
.cta p { max-width:500px; margin:1rem 0 0; }
.cta .button { border-color:#15130f; background:#15130f; color:#fff; }
.site-footer { padding:4rem 0 2.2rem; background:#070706; }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:4rem; padding-bottom:4rem; }
.footer-brand img { width:210px; margin-bottom:1.4rem; }
.footer-brand p { color:var(--muted); max-width:380px; }
.footer-col h3 { font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1.3rem; }
.footer-col a { display:block; color:#d2cdc3; margin:.35rem 0; }
.footer-bottom { border-top:1px solid var(--line); padding-top:1.5rem; display:flex; justify-content:space-between; gap:1rem; color:#88847c; font-size:.76rem; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } .reveal { opacity:1; transform:none; } }
@media (max-width: 980px) {
 .nav-toggle { display:block; }
 .main-nav { position:fixed; inset:92px 0 auto; display:none; flex-direction:column; align-items:stretch; gap:0; background:#0b0b0a; padding:1rem 21px 2rem; border-bottom:1px solid var(--line); }
 .main-nav.open { display:flex; }
 .main-nav a { padding:1rem 0; border-bottom:1px solid var(--line); }
 .nav-contact { margin-top:1rem; text-align:center; }
 .hero-grid,.section-head,.split,.contact-grid { grid-template-columns:1fr; }
 .hero-grid { padding:6rem 0 8rem; }
 .hero-side { margin-top:2rem; }
 .service-grid { grid-template-columns:1fr 1fr; }
 .service-card:nth-child(n) { border-right:1px solid var(--line); padding-left:0; }
 .service-card:nth-child(2n) { border-right:0; padding-left:1.5rem; }
 .process { grid-template-columns:1fr 1fr; }
 .process-step:nth-child(2) { border-right:0; }
 .process-step:nth-child(3), .process-step:nth-child(4) { border-top:1px solid var(--line); }
 .project-strip { grid-template-columns:1fr 1fr; }
 .project-strip a:first-child { grid-column:1/-1; min-height:520px; }
 .project-strip a:nth-child(2),.project-strip a:nth-child(3){ margin-top:0; }
 .detail-item { grid-template-columns:55px 1fr; }
 .detail-item p { grid-column:2; }
 .cta .container { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
 body { font-size:16px; }
 .container { width:min(calc(100% - 30px),var(--max)); }
 .header-inner { min-height:78px; }
 .brand { width:155px; }
 .main-nav { inset:78px 0 auto; }
 .hero { min-height:calc(100svh - 78px); }
 h1 { font-size:clamp(3rem,16vw,5rem); }
 .page-hero h1 { font-size:clamp(3.1rem,15vw,5rem); }
 .section { padding:5rem 0; }
 .service-grid,.values,.process,.project-strip,.footer-grid { grid-template-columns:1fr; }
 .service-card:nth-child(n), .process-step:nth-child(n) { border-right:0; padding-left:0; border-top:0; }
 .project-strip a:first-child { grid-column:auto; min-height:420px; }
 .project-strip a:nth-child(n) { min-height:370px; }
 .stats { grid-template-columns:1fr; }
 .stat { border-right:0; border-bottom:1px solid var(--line); padding-left:0!important; }
 .stat:last-child { border-bottom:0; }
 .form { grid-template-columns:1fr; }
 .field.full { grid-column:auto; }
 .gallery { columns:1; }
 .detail-item { grid-template-columns:40px 1fr; gap:1rem; }
 .footer-grid { gap:2.5rem; }
 .footer-bottom { flex-direction:column; }
 .scroll-cue { display:none; }
}

html:not(.js) .reveal { opacity:1; transform:none; }

body.admin-bar .site-header { top:32px; }
@media (max-width:782px) { body.admin-bar .site-header { top:46px; } }
@media (max-width:600px) { body.admin-bar .site-header { top:0; } }
