:root{--paper:#f1f0e9;--paper2:#e7e5db;--ink:#171815;--muted:#76766d;--line:#c9c7bb;--yellow:#ffe36b;--yellow2:#f2cc2c;--logo:#9a998a;--white:#fff;--shadow:0 28px 70px rgba(18,19,16,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}em{font-style:normal;color:#8a897d}.shell{width:min(1240px,calc(100% - 56px));margin-inline:auto}.header{position:relative;z-index:40;background:rgba(241,240,233,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,199,187,.7)}.header-inner{height:108px;display:grid;grid-template-columns:230px 1fr auto;gap:30px;align-items:center}.brand{width:205px;height:72px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.05)}.brand img,.footer-brand img{object-fit:contain}.desktop-nav{justify-self:center;display:flex;gap:30px;align-items:center}.desktop-nav a{font-size:13px;font-weight:800;position:relative}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:3px;background:var(--yellow2);transition:.25s}.desktop-nav a:hover:after{right:0}.header-phone{border:1px solid var(--line);background:rgba(255,255,255,.5);border-radius:16px;padding:10px 14px;display:grid;gap:2px}.header-phone span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.header-phone strong{font-size:12px}.menu,.mobile-nav{display:none}
.hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center;padding:72px 0 100px;min-height:720px}.eyebrow{display:flex;gap:10px;align-items:center;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#76756d}.eyebrow>span{width:14px;height:14px;background:var(--yellow);border-radius:3px;box-shadow:5px 5px 0 #bbb8aa}.hero h1,.section-head h2,.work-copy h2,.about-copy h2,.contact-card h2{font-size:clamp(48px,5.5vw,78px);line-height:.94;letter-spacing:-.055em;margin:24px 0}.hero-copy>p{max-width:620px;font-size:18px;line-height:1.72;color:#5e5e56}.hero-actions{display:flex;align-items:center;gap:28px;margin:34px 0 42px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 20px;border-radius:16px;font-size:13px;font-weight:900}.button.dark{background:var(--ink);color:#fff;box-shadow:0 15px 32px rgba(20,20,17,.2)}.button.yellow{background:var(--yellow);color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:900}.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:18px;max-width:620px}.hero-facts div{padding-right:18px}.hero-facts div+div{border-left:1px solid var(--line);padding-left:18px}.hero-facts strong{display:block;font-size:12px}.hero-facts span{display:block;font-size:10px;color:var(--muted);margin-top:4px}.hero-visual{position:relative;padding:30px 28px 54px 18px}.hero-photo{height:560px;border-radius:48px 18px 48px 18px;overflow:hidden;box-shadow:var(--shadow);position:relative}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}.hero-caption{position:absolute;left:0;top:60px;z-index:2;background:rgba(241,240,233,.94);backdrop-filter:blur(9px);padding:14px 20px 14px 30px;border-radius:0 16px 16px 0;display:flex;align-items:baseline;gap:8px}.hero-caption span{font-size:10px;font-weight:900;letter-spacing:.13em;color:#817f74}.hero-caption strong{font-size:27px;letter-spacing:-.05em}.hero-note{position:absolute;left:48px;bottom:90px;z-index:2;color:#fff}.hero-note small{display:block;color:var(--yellow);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.hero-note b{font-size:25px;line-height:1.08}.yellow-cube{position:absolute;right:0;bottom:16px;width:108px;height:108px;border-radius:22px;background:var(--yellow);transform:rotate(6deg);box-shadow:0 22px 42px rgba(90,76,14,.2)}.measure{position:absolute;right:45px;top:5px;display:flex;gap:12px}.measure i{display:block;width:1px;height:27px;background:#bbb8ad}.measure i:nth-child(2),.measure i:nth-child(4){height:14px}
.trade-strip{border-block:1px solid var(--line);background:rgba(255,255,255,.35)}.trade-scroll{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;white-space:nowrap}.trade-scroll span{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#605f58}.trade-scroll i{width:7px;height:7px;background:var(--yellow2);transform:rotate(45deg);flex:0 0 auto}.section{padding:120px 0}.section-small{padding:70px 0 110px}.section-head{display:grid;grid-template-columns:65px 1fr auto;gap:24px;align-items:start;margin-bottom:52px}.number{width:45px;border-top:2px solid var(--ink);padding-top:8px;font-size:11px;font-weight:900;color:#87867d}.section-head h2,.work-copy h2,.about-copy h2{font-size:58px;margin:17px 0 0}.head-link{align-self:end;font-size:12px;font-weight:900;border-bottom:1px solid #9d9a8e;padding-bottom:4px}.service-board{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-template-rows:255px 255px;gap:16px}.service{position:relative;background:#f7f6f0;border:1px solid var(--line);border-radius:26px;padding:25px;overflow:hidden;transition:.25s;box-shadow:0 10px 30px rgba(25,25,21,.035)}.service:hover{transform:translateY(-4px);box-shadow:0 22px 42px rgba(25,25,21,.09)}.service-main{grid-row:1/3;padding:30px 30px 26px}.service-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#7d7c72}.service h3{font-size:28px;line-height:1.02;letter-spacing:-.045em;margin:35px 0 12px}.service p{font-size:13px;line-height:1.55;color:#68675f;max-width:460px}.service-image{position:absolute;left:30px;right:30px;bottom:28px;height:210px;border-radius:20px;overflow:hidden}.service-main .arrow{position:absolute;right:46px;bottom:44px;background:#fff;z-index:2}.arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid #aaa79d;border-radius:50%;font-size:18px;position:absolute;right:20px;bottom:20px}.service-dark{background:#20211e;color:#fff}.service-dark .service-top,.service-dark p{color:#aaa99f}.service-dark .arrow{border-color:#66665e}.service-yellow{background:var(--yellow);border-color:transparent}.service-yellow .service-top,.service-yellow p{color:#5f561e}.service-yellow .arrow{border-color:#7b6c1c}
.work-section{background:#1d1e1b;color:#fff;padding:120px 0 130px;position:relative;overflow:hidden}.work-section:before{content:"WEINER";position:absolute;right:-80px;top:-65px;font-weight:900;font-size:250px;line-height:1;color:rgba(255,255,255,.025);letter-spacing:-.08em}.work-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.number.light{border-color:#86867d;color:#86867d}.eyebrow.light{color:#9c9b92}.work-copy{position:sticky;top:34px;align-self:start}.work-copy h2{font-size:54px;color:#fff}.work-copy h2 em{color:#aaa99e}.work-copy p{max-width:430px;color:#b9b8b0;line-height:1.7;margin:24px 0 30px}.project-wall{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:300px 300px;gap:18px}.project{margin:0;position:relative;overflow:hidden;border-radius:32px;box-shadow:0 24px 52px rgba(0,0,0,.28)}.project-a{grid-row:1/3}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.76))}.project figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:20px}.project small{display:block;color:var(--yellow);font-size:9px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}.project b{font-size:19px;line-height:1.15}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-photo{height:620px;position:relative;border-radius:20px 60px 20px 60px;overflow:hidden;box-shadow:var(--shadow)}.badge{position:absolute;right:24px;top:24px;width:120px;height:120px;background:var(--yellow);border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(6deg);box-shadow:0 14px 28px rgba(0,0,0,.16)}.badge span{font-size:13px}.badge b{font-size:20px}.about-copy p{font-size:16px;line-height:1.75;color:#626158}.about-copy blockquote{margin:32px 0;padding:18px 0 18px 22px;border-left:4px solid var(--yellow2);font-size:21px;line-height:1.35;letter-spacing:-.02em}.signature{display:flex;gap:14px;align-items:center;margin:25px 0}.signature i{width:48px;height:1px;background:#aaa79a}.signature span{font-size:11px;font-weight:800}.signature small{font-weight:500;color:#77766d}.step-line{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #bdb9ad;border-bottom:1px solid #bdb9ad}.step-line article{min-height:230px;padding:34px 32px 38px 0}.step-line article+article{border-left:1px solid #bdb9ad;padding-left:32px}.step-line span{font-size:10px;font-weight:900;color:#8b8a80}.step-line h3{font-size:23px;letter-spacing:-.03em;margin:44px 0 12px}.step-line p{font-size:14px;line-height:1.6;color:#67665e;max-width:310px}.contact-wrap{padding:0 0 100px}.contact-card{position:relative;background:#23241f;color:#fff;border-radius:42px 42px 16px 42px;padding:64px 70px;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;overflow:hidden;box-shadow:0 30px 70px rgba(20,20,17,.18)}.contact-card:before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.08);border-radius:28px;pointer-events:none}.contact-card h2{font-size:52px;margin:18px 0 14px}.contact-card h2 em{color:var(--yellow)}.contact-card p{color:#b5b4ab}.contact-links{display:flex;flex-direction:column;justify-content:center}.contact-links a{display:grid;grid-template-columns:1fr auto;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.15)}.contact-links small{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#9b9a91}.contact-links strong{font-size:16px;margin-top:3px}.contact-links b{grid-column:2;grid-row:1/3;align-self:center;color:var(--yellow);font-size:20px}.contact-accent{position:absolute;width:92px;height:92px;background:var(--yellow);right:-24px;bottom:-24px;border-radius:20px;transform:rotate(8deg)}.footer{display:grid;grid-template-columns:1.4fr .6fr .8fr;gap:60px;padding:45px 0 42px;border-top:1px solid var(--line)}.footer-brand{width:250px;height:90px;background:#fff;border-radius:14px;overflow:hidden}.footer>div{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#6f6e66}.footer>div strong{color:var(--ink);margin-bottom:5px}.footer-bottom{grid-column:1/-1!important;flex-direction:row!important;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;margin-top:12px;font-size:10px!important}.mobile-actions{display:none}.reveal{opacity:0;transform:translateY(20px);transition:.7s opacity ease,.7s transform ease}.reveal.in{opacity:1;transform:none}.delay{transition-delay:.08s}
@media(max-width:980px){.header-inner{grid-template-columns:220px 1fr 48px}.desktop-nav,.header-phone{display:none}.menu{display:flex;justify-self:end;width:46px;height:46px;border:0;background:var(--ink);border-radius:14px;flex-direction:column;align-items:center;justify-content:center;gap:6px}.menu span{width:20px;height:2px;background:#fff;transition:.2s}.menu[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-nav{position:fixed;top:98px;left:24px;right:24px;z-index:60;background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;opacity:0;transform:translateY(-12px);pointer-events:none;transition:.2s}.mobile-nav.open{opacity:1;transform:none;pointer-events:auto}.mobile-nav a{display:flex;gap:18px;padding:16px 10px;border-bottom:1px solid var(--line);font-weight:900}.mobile-nav a:last-child{border:0}.mobile-nav span{font-size:10px;color:#99988d}.hero{grid-template-columns:1fr;padding-top:52px}.hero-visual{max-width:780px}.service-board{grid-template-columns:1fr 1fr;grid-template-rows:auto}.service-main{grid-row:auto;grid-column:1/-1;min-height:520px}.work-grid{grid-template-columns:1fr}.work-copy{position:relative;top:auto}.about{grid-template-columns:1fr}.about-photo{height:520px}.footer{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:720px){.shell{width:min(100% - 30px,1240px)}.header-inner{height:88px;grid-template-columns:170px 1fr 46px;gap:10px}.brand{width:158px;height:58px;border-radius:11px}.mobile-nav{top:82px;left:15px;right:15px}.hero{padding:44px 0 78px;gap:34px;min-height:auto}.hero h1,.section-head h2,.work-copy h2,.about-copy h2,.contact-card h2{font-size:43px;line-height:.96}.hero-copy>p{font-size:16px;line-height:1.65}.hero-actions{flex-direction:column;align-items:flex-start;gap:18px;margin:28px 0 34px}.hero-facts{grid-template-columns:1fr 1fr;gap:0}.hero-facts div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:14px 0 0;margin-top:14px}.hero-visual{padding:10px 5px 52px 0}.hero-photo{height:420px;border-radius:32px 14px 32px 14px}.hero-caption{top:30px;padding:11px 15px 11px 18px}.hero-caption strong{font-size:22px}.hero-note{left:22px;bottom:80px}.hero-note b{font-size:21px}.yellow-cube{width:82px;height:82px;right:-5px;bottom:10px}.measure{display:none}.trade-strip{overflow:hidden}.trade-scroll{justify-content:flex-start;overflow-x:auto;gap:12px;padding:0 2px;scrollbar-width:none}.trade-scroll::-webkit-scrollbar{display:none}.trade-scroll span{font-size:10px;padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55)}.trade-scroll i{display:none}.section{padding:82px 0}.section-small{padding:56px 0 90px}.section-head{grid-template-columns:42px 1fr;gap:11px;margin-bottom:34px}.section-head .head-link{grid-column:2;margin-top:-4px;justify-self:start}.number{width:34px}.section-head h2{margin-top:13px}.service-board{display:flex;flex-direction:column;gap:14px}.service{min-height:230px;border-radius:24px;padding:22px}.service-main{min-height:500px}.service h3{font-size:27px;margin:25px 0 10px}.service-image{left:22px;right:22px;bottom:22px;height:235px;border-radius:18px}.service-main .arrow{right:38px;bottom:38px}.service-dark{min-height:270px}.service-yellow{min-height:230px}.work-section{padding:82px 0 92px}.work-section:before{font-size:140px;right:-45px;top:-25px}.work-grid{gap:42px}.work-copy h2{font-size:43px}.project-wall{grid-template-columns:1fr;grid-template-rows:none;gap:14px}.project,.project-a{height:310px;grid-row:auto}.about{gap:40px}.about-photo{height:430px;border-radius:18px 42px 18px 42px}.badge{width:100px;height:100px;right:18px;top:18px}.about-copy blockquote{font-size:19px}.step-line{grid-template-columns:1fr}.step-line article,.step-line article+article{min-height:auto;padding:27px 0;border-left:0;border-bottom:1px solid #bdb9ad}.step-line article:last-child{border-bottom:0}.step-line h3{margin:24px 0 9px}.contact-wrap{padding-bottom:86px}.contact-card{grid-template-columns:1fr;gap:26px;padding:42px 24px;border-radius:30px 30px 12px 30px}.contact-card:before{inset:12px;border-radius:21px}.footer{grid-template-columns:1fr;padding-bottom:112px;gap:28px}.footer-brand{grid-column:auto;width:220px;height:82px}.footer-bottom{grid-column:auto!important;flex-direction:column!important;gap:8px!important}.mobile-actions{position:fixed;z-index:70;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1.2fr;gap:7px;padding:7px;background:rgba(23,24,21,.94);backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 16px 38px rgba(0,0,0,.28)}.mobile-actions a{text-align:center;padding:14px 10px;border-radius:14px;color:#fff;font-size:13px;font-weight:900}.mobile-actions a:last-child{background:var(--yellow);color:var(--ink)}}
@media(max-width:390px){.hero h1,.section-head h2,.work-copy h2,.about-copy h2,.contact-card h2{font-size:39px}.hero-photo{height:380px}.service-main{min-height:460px}.service-image{height:205px}.project{height:280px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   VARIANTE 4 — KANTIG / ARCHITEKTONISCH / MEHR TIEFE
   Gleiche Struktur wie V3, bewusst weniger Rundungen.
   ========================================================= */
:root{
  --paper:#efeee7;
  --paper2:#e4e1d6;
  --ink:#171815;
  --muted:#6f7068;
  --line:#bdbbae;
  --yellow:#ffe36b;
  --yellow2:#efc91d;
  --shadow-deep:14px 14px 0 rgba(23,24,21,.075),0 28px 58px rgba(23,24,21,.13);
  --shadow-dark:12px 12px 0 rgba(255,227,107,.10),0 30px 70px rgba(0,0,0,.30);
}
body{
  background:
    linear-gradient(rgba(23,24,21,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,24,21,.026) 1px,transparent 1px),
    var(--paper);
  background-size:42px 42px;
}
.header{background:rgba(239,238,231,.94);box-shadow:0 12px 34px rgba(23,24,21,.045)}
.brand{border-radius:2px;box-shadow:8px 8px 0 rgba(23,24,21,.055);border:1px solid #d7d4c7}
.header-phone{border-radius:2px;box-shadow:6px 6px 0 rgba(23,24,21,.045)}
.desktop-nav a:after{height:4px}
.menu{border-radius:2px;box-shadow:5px 5px 0 var(--yellow2)}
.mobile-nav{border-radius:3px;box-shadow:10px 10px 0 rgba(23,24,21,.10),0 28px 60px rgba(23,24,21,.16)}

.eyebrow>span{border-radius:0;box-shadow:5px 5px 0 #b9b6a8}
.button{border-radius:2px;position:relative;box-shadow:8px 8px 0 rgba(23,24,21,.08)}
.button.dark{box-shadow:9px 9px 0 var(--yellow2),0 20px 38px rgba(20,20,17,.18)}
.button.yellow{box-shadow:9px 9px 0 rgba(255,255,255,.12)}

.hero{gap:82px}
.hero-copy{position:relative}
.hero-copy:before{content:"";position:absolute;left:-28px;top:2px;width:5px;height:96px;background:var(--yellow2)}
.hero-visual{padding:22px 34px 66px 14px}
.hero-visual:before{content:"";position:absolute;right:8px;bottom:38px;width:86%;height:74%;background:#d6d3c4;border:1px solid #c7c3b4;z-index:-1;box-shadow:18px 18px 0 rgba(23,24,21,.06)}
.hero-photo{border-radius:3px;box-shadow:var(--shadow-deep);border:1px solid rgba(23,24,21,.14)}
.hero-caption{border-radius:0;padding-left:28px;border-left:6px solid var(--yellow2);box-shadow:9px 9px 0 rgba(23,24,21,.10)}
.yellow-cube{border-radius:0;transform:none;box-shadow:12px 12px 0 rgba(23,24,21,.15);border:1px solid rgba(23,24,21,.15)}

.trade-strip{background:#e8e6dc;box-shadow:inset 0 1px #fff}
.trade-scroll i{transform:none;width:18px;height:3px;background:var(--yellow2)}
.number{border-top-width:4px}
.section-head{position:relative}
.section-head:after{content:"";position:absolute;left:65px;right:0;bottom:-22px;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.service-board{gap:18px}
.service{border-radius:3px;box-shadow:9px 9px 0 rgba(23,24,21,.065),0 22px 42px rgba(23,24,21,.055);transition:.23s transform,.23s box-shadow;border-color:#bbb8aa}
.service:before{content:"";position:absolute;left:0;top:0;width:7px;height:58px;background:var(--yellow2)}
.service:hover{transform:translate(-3px,-3px);box-shadow:15px 15px 0 rgba(23,24,21,.08),0 30px 54px rgba(23,24,21,.10)}
.service-image{border-radius:2px;border:1px solid rgba(23,24,21,.15);box-shadow:9px 9px 0 rgba(23,24,21,.10)}
.arrow{border-radius:1px;background:rgba(255,255,255,.75);box-shadow:4px 4px 0 rgba(23,24,21,.11)}
.service-dark{box-shadow:12px 12px 0 rgba(255,227,107,.20),0 28px 52px rgba(0,0,0,.16)}
.service-yellow{box-shadow:12px 12px 0 rgba(23,24,21,.12),0 25px 42px rgba(23,24,21,.08)}

.work-section{border-top:8px solid var(--yellow2);box-shadow:inset 0 18px 40px rgba(0,0,0,.10)}
.project-wall{gap:20px}
.project{border-radius:2px;box-shadow:var(--shadow-dark);border:1px solid rgba(255,255,255,.12)}
.project:before{content:"";position:absolute;left:0;top:0;width:7px;height:88px;background:var(--yellow2);z-index:3}
.project figcaption{background:rgba(16,17,15,.70);padding:14px 16px;left:18px;right:18px;bottom:18px;border-left:4px solid var(--yellow2);backdrop-filter:blur(5px)}

.about-photo{border-radius:3px;box-shadow:var(--shadow-deep);border:1px solid #bdb9ac}
.about-photo:after{content:"";position:absolute;left:-1px;bottom:-1px;width:120px;height:8px;background:var(--yellow2)}
.badge{border-radius:2px;transform:none;box-shadow:10px 10px 0 rgba(23,24,21,.14);border:1px solid rgba(23,24,21,.13)}
.about-copy blockquote{border-left-width:7px;background:rgba(255,255,255,.30);padding:20px 22px;box-shadow:8px 8px 0 rgba(23,24,21,.045)}

.step-line{border-top:3px solid var(--ink);border-bottom:1px solid var(--line);background:rgba(255,255,255,.20);box-shadow:10px 10px 0 rgba(23,24,21,.035)}
.step-line article{position:relative}
.step-line article:before{content:"";position:absolute;left:0;top:-3px;width:52px;height:3px;background:var(--yellow2)}

.contact-card{border-radius:3px;padding:66px 72px;box-shadow:16px 16px 0 #c7b62f,0 34px 72px rgba(20,20,17,.22);border:1px solid rgba(255,255,255,.10)}
.contact-card:before{inset:16px;border-radius:0}
.contact-accent{border-radius:0;transform:none;width:110px;height:14px;right:0;bottom:0}
.contact-links a{transition:.2s;background:transparent}
.contact-links a:hover{background:rgba(255,255,255,.04);padding-left:23px}

.footer-brand{border-radius:2px;border:1px solid #d4d1c5;box-shadow:8px 8px 0 rgba(23,24,21,.05)}

@media(max-width:980px){
  .hero-visual:before{right:1px;bottom:36px}
}
@media(max-width:720px){
  body{background-size:32px 32px}
  .brand{border-radius:1px;box-shadow:5px 5px 0 rgba(23,24,21,.05)}
  .menu{border-radius:1px;box-shadow:4px 4px 0 var(--yellow2)}
  .mobile-nav{border-radius:2px}
  .hero-copy:before{left:-15px;width:4px;height:72px}
  .hero-visual{padding:7px 11px 54px 0}
  .hero-visual:before{right:0;bottom:30px;height:72%;width:89%;box-shadow:10px 10px 0 rgba(23,24,21,.06)}
  .hero-photo{border-radius:2px;box-shadow:10px 10px 0 rgba(23,24,21,.08),0 23px 44px rgba(23,24,21,.12)}
  .hero-caption{border-radius:0;box-shadow:6px 6px 0 rgba(23,24,21,.10)}
  .yellow-cube{box-shadow:8px 8px 0 rgba(23,24,21,.13)}
  .trade-scroll span{border-radius:1px;background:#f8f7f1;box-shadow:4px 4px 0 rgba(23,24,21,.04);padding:10px 13px}
  .section-head:after{left:45px;bottom:-16px}
  .service{border-radius:2px;box-shadow:7px 7px 0 rgba(23,24,21,.07),0 18px 32px rgba(23,24,21,.05)}
  .service-image{border-radius:1px;box-shadow:7px 7px 0 rgba(23,24,21,.09)}
  .service-dark{box-shadow:8px 8px 0 rgba(255,227,107,.20),0 20px 38px rgba(0,0,0,.15)}
  .service-yellow{box-shadow:8px 8px 0 rgba(23,24,21,.12),0 18px 32px rgba(23,24,21,.07)}
  .project{border-radius:1px;box-shadow:8px 8px 0 rgba(255,227,107,.08),0 22px 44px rgba(0,0,0,.28)}
  .project figcaption{left:14px;right:14px;bottom:14px}
  .about-photo{border-radius:2px;box-shadow:9px 9px 0 rgba(23,24,21,.08),0 22px 44px rgba(23,24,21,.12)}
  .badge{border-radius:1px;box-shadow:8px 8px 0 rgba(23,24,21,.13)}
  .step-line{box-shadow:7px 7px 0 rgba(23,24,21,.035)}
  .contact-card{border-radius:2px;box-shadow:10px 10px 0 #c7b62f,0 26px 52px rgba(20,20,17,.21)}
  .contact-card:before{border-radius:0}
  .mobile-actions{border-radius:2px;box-shadow:8px 8px 0 rgba(23,24,21,.18),0 16px 38px rgba(0,0,0,.28)}
  .mobile-actions a{border-radius:1px}
  .footer-brand{border-radius:1px}
}


/* =========================================================
   VARIANTE 5 — KANTIG + STRUKTURIERT + KOMPAKTER
   V4 bleibt die Basis. Diese Ebene ersetzt den Raster-Hintergrund,
   schafft klarere Seitenarchitektur und verkürzt die Seite.
   ========================================================= */
:root{
  --paper:#f2f0e7;
  --paper-strong:#e5e1d4;
  --panel:#faf9f4;
  --ink:#171815;
  --muted:#66675f;
  --line:#b8b5a8;
  --yellow:#ffe36b;
  --yellow2:#efc91d;
}

/* Ruhiger Grund statt KI-Grid */
body{
  background:
    linear-gradient(90deg, transparent 0 5.5%, rgba(23,24,21,.045) 5.5% 5.65%, transparent 5.65% 94.35%, rgba(23,24,21,.045) 94.35% 94.5%, transparent 94.5%),
    var(--paper);
  background-size:100% 100%;
}
main{position:relative}
main:before{
  content:"";
  position:absolute;
  left:0; right:0; top:610px;
  height:180px;
  background:
    linear-gradient(165deg, transparent 0 58%, rgba(239,201,29,.13) 58% 67%, transparent 67%),
    linear-gradient(0deg, rgba(23,24,21,.035), rgba(23,24,21,.035));
  pointer-events:none;
  z-index:-2;
}

/* Header: klarer, weniger schwebend */
.header{border-bottom:3px solid var(--ink)}
.header-inner{height:92px}
.brand{height:62px;box-shadow:6px 6px 0 rgba(23,24,21,.055)}
.header-phone{box-shadow:none;border-width:1px;border-left:5px solid var(--yellow2)}

/* Hero: kompakter + architektonischer */
.hero{
  min-height:610px;
  padding:54px 0 68px;
  gap:64px;
  position:relative;
}
.hero:after{
  content:"";
  position:absolute;
  left:0;
  bottom:23px;
  width:42%;
  height:1px;
  background:var(--line);
}
.hero h1{font-size:clamp(46px,5.2vw,72px)}
.hero-copy>p{font-size:16px;line-height:1.62}
.hero-actions{margin:28px 0 30px}
.hero-facts{padding-top:14px}
.hero-photo{height:490px}
.hero-visual{padding-bottom:46px}
.yellow-cube{width:84px;height:84px}
.hero-note{bottom:70px}

/* Leistungsleiste als technisches Band */
.trade-strip{
  border:0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--panel);
  box-shadow:10px 10px 0 rgba(23,24,21,.035);
}
.trade-scroll{min-height:60px}
.trade-scroll span{letter-spacing:.075em}

/* Sektionen: weniger Länge + klare Flächen */
.section{padding:84px 0}
.section-small{padding:60px 0 78px}
.services{
  position:relative;
  margin-top:42px;
  margin-bottom:42px;
  padding-top:72px;
  padding-bottom:76px;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 50px rgba(23,24,21,.045);
}
.services:before{
  content:"01 / LEISTUNGEN";
  position:absolute;
  left:calc((100vw - min(1240px, calc(100vw - 56px)))/2);
  top:-17px;
  background:var(--ink);
  color:white;
  padding:9px 14px;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:900;
}
.services:after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:16%;
  height:100%;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(239,201,29,.12) 42% 46%, transparent 46% 56%, rgba(23,24,21,.035) 56% 57%, transparent 57%);
  pointer-events:none;
}
.section-head{margin-bottom:38px}
.section-head:after{bottom:-16px}
.section-head h2,.work-copy h2,.about-copy h2{font-size:52px}

/* Leistungen kompakter */
.service-board{
  grid-template-rows:220px 220px;
  gap:14px;
}
.service{padding:22px}
.service-main{padding:25px}
.service h3{font-size:25px;margin:28px 0 10px}
.service p{font-size:12.5px}
.service-image{height:174px;bottom:22px}
.service-main .arrow{right:38px;bottom:33px}

/* Dunkler Praxisblock: weniger Höhe, mehr Seitenstruktur */
.work-section{
  padding:82px 0 90px;
  border-top-width:6px;
}
.work-section:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:33%;
  height:18px;
  background:var(--yellow2);
}
.work-grid{gap:54px}
.work-copy h2{font-size:48px}
.project-wall{grid-template-rows:250px 250px;gap:14px}
.project figcaption{padding:11px 13px}
.project b{font-size:17px}

/* Über uns als eigener architektonischer Block */
.about{
  margin-top:74px;
  margin-bottom:74px;
  padding:56px;
  background:linear-gradient(90deg,var(--paper-strong) 0 42%,var(--panel) 42% 100%);
  border:1px solid var(--line);
  box-shadow:14px 14px 0 rgba(23,24,21,.055),0 28px 55px rgba(23,24,21,.07);
  gap:58px;
  position:relative;
}
.about:before{
  content:"03";
  position:absolute;
  right:26px;
  top:16px;
  font-size:78px;
  font-weight:900;
  line-height:1;
  color:rgba(23,24,21,.055);
  letter-spacing:-.07em;
}
.about-photo{height:500px}
.about-copy h2{font-size:48px}
.about-copy p{font-size:15px;line-height:1.62}
.about-copy blockquote{margin:24px 0;font-size:19px}

/* Schritte kompakter und stärker gegliedert */
.steps{
  position:relative;
  padding-top:54px;
  padding-bottom:64px;
}
.steps:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:6px;
  background:linear-gradient(90deg,var(--ink) 0 23%,var(--yellow2) 23% 31%,var(--ink) 31% 100%);
}
.step-line article{min-height:180px;padding-top:26px;padding-bottom:28px}
.step-line h3{margin:30px 0 8px;font-size:20px}
.step-line p{font-size:13px}

/* Kontakt dichter */
.contact-wrap{padding-bottom:72px}
.contact-card{padding:48px 58px}
.contact-card h2{font-size:46px}

/* Footer etwas kompakter */
.footer{padding-top:54px}

/* Mobile: deutlich kürzer, aber weiterhin sauber lesbar */
@media(max-width:720px){
  body{
    background:
      linear-gradient(90deg, transparent 0 14px, rgba(23,24,21,.05) 14px 15px, transparent 15px calc(100% - 15px), rgba(23,24,21,.05) calc(100% - 15px) calc(100% - 14px), transparent calc(100% - 14px)),
      var(--paper);
  }
  main:before{top:500px;height:120px}
  .header-inner{height:76px}
  .brand{height:50px}

  .hero{
    min-height:auto;
    padding:34px 0 44px;
    gap:26px;
  }
  .hero h1{font-size:43px;margin:17px 0}
  .hero-copy>p{font-size:14.5px;line-height:1.55}
  .hero-actions{margin:22px 0 24px}
  .hero-facts{gap:0}
  .hero-photo{height:330px}
  .hero-visual{padding-bottom:38px}
  .hero-note{bottom:54px}
  .hero-note b{font-size:21px}
  .yellow-cube{width:62px;height:62px}
  .trade-scroll{min-height:54px}
  .trade-scroll span{padding:8px 11px;font-size:9px}

  .section{padding:56px 0}
  .section-small{padding:44px 0 56px}
  .services{
    margin:26px 0 34px;
    padding-top:52px;
    padding-bottom:54px;
  }
  .services:before{
    left:14px;
    top:-15px;
  }
  .services:after{width:32%}
  .section-head{margin-bottom:28px}
  .section-head h2,.work-copy h2,.about-copy h2,.contact-card h2{font-size:39px}

  /* Hauptleistung groß, danach 3 kompakte Karten */
  .service-board{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .service-main{grid-column:1/-1;min-height:390px}
  .service{min-height:178px;padding:18px}
  .service h3{font-size:21px;margin:20px 0 8px}
  .service p{font-size:11.5px;line-height:1.45}
  .service-image{left:18px;right:18px;bottom:18px;height:175px}
  .service-main .arrow{right:30px;bottom:29px}
  .service-dark,.service-yellow{min-height:178px}
  .service-board .service:nth-child(4){grid-column:1/-1;min-height:150px}
  .service-board .service:nth-child(4) h3{max-width:70%}

  .work-section{padding:58px 0 66px}
  .work-grid{gap:28px}
  .work-copy{position:relative;top:auto}
  .work-copy p{margin:16px 0 22px}
  /* Projekte mobil horizontal statt 3 x untereinander */
  .project-wall{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:11px;
    padding:0 20px 15px 0;
    margin-right:-14px;
    scrollbar-width:none;
  }
  .project-wall::-webkit-scrollbar{display:none}
  .project,.project-a{
    flex:0 0 82%;
    height:270px;
    scroll-snap-align:start;
  }

  .about{
    margin:46px 14px;
    width:auto;
    padding:18px;
    gap:28px;
    background:linear-gradient(180deg,var(--paper-strong) 0 35%,var(--panel) 35% 100%);
    box-shadow:8px 8px 0 rgba(23,24,21,.055),0 20px 40px rgba(23,24,21,.06);
  }
  .about:before{font-size:56px;right:14px;top:10px}
  .about-photo{height:300px}
  .about-copy p{font-size:14px}
  .about-copy blockquote{font-size:17px;margin:18px 0}

  .steps{padding-top:40px;padding-bottom:48px}
  .step-line{display:grid;grid-template-columns:1fr}
  .step-line article,.step-line article+article{
    min-height:0;
    padding:20px 0;
  }
  .step-line h3{margin:15px 0 6px;font-size:19px}

  .contact-wrap{padding-bottom:70px}
  .contact-card{padding:34px 20px;gap:18px}
  .contact-card h2{margin:13px 0 10px}
}

/* Sehr kleine Geräte */
@media(max-width:390px){
  .hero h1{font-size:39px}
  .service-main{min-height:365px}
  .service-image{height:160px}
  .project,.project-a{flex-basis:88%;height:250px}
}