/* Schriften lokal eingebunden (DSGVO: keine Verbindung zu Google) */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/schibsted-grotesk.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/hanken-grotesk.woff2") format("woff2")}

/* Layout concept: Naturstein als Bühne. Stein-Grau und helles Braun, dezente Vektor-Textur im Hintergrund,
   dunkler Hero und Kontaktabschluss in Graphit, asymmetrische Bild/Text-Kompositionen, ruhige Einblend-Animationen. */
:root{
  --bg:#F3F1EC; --surface:#FBFAF7; --sand:#E6DFD2; --stone:#8B8981; --ink:#23262A; --ink-soft:#4F5359;
  --line:rgba(35,38,42,.14); --accent:#7B6248; --accent-ink:#FFFFFF; --brand:#B8D000; --brand-ink:#23262A; --focus:#2F6FDE;
  --hero-bg:#1E2225; --hero-ink:#F3F1EC; --hero-soft:#C9C6BD; --footer-bg:#15181A;
  --f-display:"Schibsted Grotesk","Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,5vw,56px);
  --dirt-d:url("../img/dirt-dark.svg"); --dirt-l:url("../img/dirt-light.svg"); --edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48 L0 24.7L6 23.4L12 25.6L18 25.8L24 25.0L30 24.5L36 25.7L42 24.5L48 23.7L54 22.4L60 20.4L66 17.1L72 14.4L78 18.3L84 19.5L90 16.4L96 19.8L102 19.7L108 24.2L114 24.8L120 22.6L126 24.3L132 26.6L138 28.0L144 26.7L150 25.4L156 20.3L162 16.8L168 15.9L174 16.6L180 16.9L186 19.9L192 19.4L198 20.3L204 14.2L210 13.1L216 13.5L222 16.6L228 21.2L234 27.2L240 28.9L246 27.3L252 26.1L258 25.3L264 21.3L270 22.4L276 23.7L282 29.2L288 33.2L294 33.7L300 35.8L306 29.7L312 26.7L318 27.8L324 25.7L330 22.2L336 24.4L342 27.6L348 25.2L354 22.1L360 14.1L366 12.4L372 12.9L378 13.5L384 11.1L390 10.8L396 12.6L402 14.0L408 12.1L414 12.9L420 11.0L426 14.1L432 18.0L438 19.9L444 19.6L450 14.5L456 18.2L462 20.9L468 21.7L474 22.3L480 22.3L486 24.1L492 25.2L498 24.4L504 26.2L510 29.2L516 25.8L522 26.7L528 28.7L534 30.6L540 30.6L546 28.3L552 26.0L558 24.5L564 20.9L570 18.9L576 20.0L582 18.2L588 14.0L594 13.5L600 11.9L606 14.1L612 18.3L618 28.5L624 29.3L630 24.5L636 18.7L642 21.4L648 32.0L654 30.9L660 32.7L666 23.0L672 24.2L678 30.2L684 28.7L690 23.9L696 23.5L702 26.2L708 26.8L714 30.6L720 33.8L726 33.2L732 31.5L738 28.5L744 27.2L750 26.1L756 24.8L762 22.2L768 18.6L774 16.6L780 11.6L786 10.4L792 11.1L798 11.9L804 14.2L810 20.4L816 26.1L822 25.3L828 23.0L834 22.4L840 26.5L846 27.1L852 26.1L858 32.5L864 32.6L870 30.4L876 24.6L882 21.7L888 21.1L894 26.6L900 22.1L906 24.1L912 16.6L918 14.3L924 14.4L930 13.0L936 10.7L942 11.1L948 9.6L954 11.9L960 11.2L966 11.8L972 11.9L978 13.3L984 14.2L990 13.4L996 14.8L1002 16.6L1008 14.5L1014 16.2L1020 15.8L1026 17.4L1032 17.9L1038 19.0L1044 16.9L1050 18.1L1056 17.5L1062 20.9L1068 22.8L1074 24.0L1080 30.2L1086 33.1L1092 33.6L1098 27.4L1104 22.2L1110 21.4L1116 19.4L1122 23.1L1128 24.6L1134 23.5L1140 18.0L1146 20.4L1152 23.8L1158 24.3L1164 23.9L1170 23.9L1176 27.1L1182 29.0L1188 25.9L1194 27.0L1200 24.7L1200 48Z'/%3E%3C/svg%3E"); --tex:var(--dirt-d);
  --tex-hero:var(--dirt-l);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .43 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#22262A; --surface:#2A2E32; --sand:#2E3235; --stone:#7F7D76; --ink:#ECEAE4; --ink-soft:#B6B4AD;
  --line:rgba(237,233,225,.16); --accent:#CDB08A; --accent-ink:#2A2012; --focus:#8DB4FF;
  --hero-bg:#131517; --footer-bg:#0E1011; --tex:var(--dirt-l); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#22262A; --surface:#2A2E32; --sand:#2E3235; --stone:#7F7D76; --ink:#ECEAE4; --ink-soft:#B6B4AD;
  --line:rgba(237,233,225,.16); --accent:#CDB08A; --accent-ink:#2A2012; --focus:#8DB4FF;
  --hero-bg:#131517; --footer-bg:#0E1011; --tex:var(--dirt-l); color-scheme:dark}

*{box-sizing:border-box}
body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg) var(--tex) 0 0/720px auto repeat;color:var(--ink);font:400 17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:600 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 26px;border-radius:999px;
  font:600 16px/1 var(--f-body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary,.btn--brand{background:var(--brand);color:var(--brand-ink)}
.btn--primary:hover{background:#c9e41a}
.hero-grid{pointer-events:none}.hero-grid>*{pointer-events:auto}
.hero-grid>.slider{pointer-events:auto}
.montage{margin-top:22px;padding:14px 18px;border-left:4px solid var(--brand);background:rgba(184,208,0,.12);border-radius:0 8px 8px 0}
.card{border-top-color:transparent}
.thumb::before{content:"";position:absolute;left:-2px;right:-2px;bottom:-3px;height:clamp(22px,2.4vw,32px);background:var(--surface);-webkit-mask:var(--edge) repeat-x 140px 100%/500px 100%;mask:var(--edge) repeat-x 140px 100%/500px 100%;pointer-events:none;z-index:2}
.thumb::after{content:"";position:absolute;left:-2px;right:-2px;top:-3px;height:clamp(22px,2.4vw,32px);background:var(--bg);-webkit-mask:var(--edge) repeat-x 0 100%/600px 100%;mask:var(--edge) repeat-x 0 100%/500px 100%;transform:scaleY(-1);pointer-events:none;z-index:2}
.eyebrow::before{content:"";display:inline-block;width:28px;height:3px;border-radius:2px;background:var(--brand);vertical-align:middle;margin-right:12px;position:relative;top:-1px}
.sec-head h2::after,.about h2::after,.region h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--brand);margin-top:18px}
.mapbox .home{fill:var(--brand)!important;stroke:var(--brand-ink);stroke-width:2}
footer a{text-decoration-color:var(--brand);text-underline-offset:4px}
.addr{font-style:normal;margin-top:22px;line-height:1.6;color:var(--hero-soft)}
.addr b{color:var(--hero-ink)}
.progress{background:var(--brand)!important}
footer a[href^="tel"]{text-decoration-color:var(--brand)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn{white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn--onlight.btn--ghost:hover{background:rgba(127,127,127,.12)}

/* Header */
.draft{background:var(--ink);color:var(--bg);text-align:center;font:500 13px/1.3 var(--f-body);padding:9px var(--gutter);letter-spacing:.02em}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 15px/1.05 var(--f-display);letter-spacing:.2em;text-transform:uppercase}

.logo-img{display:block;height:44px;width:auto}
.logo-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-header .logo-l{display:none}:root:not([data-theme="light"]) .site-header .logo-d{display:block}}
:root[data-theme="dark"] .site-header .logo-l{display:none}:root[data-theme="dark"] .site-header .logo-d{display:block}
footer .logo-img{height:50px}
@media (max-width:420px){.logo-img{height:34px}footer .logo-img{height:42px}}
.logo b{display:block;font-size:19px;font-weight:700;letter-spacing:.14em}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font:500 15px/1 var(--f-body);padding:10px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.bar .btn{min-height:46px;padding:0 20px;font-size:15px}
.menu{display:none}
@media (max-width:900px){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;min-width:48px;min-height:48px;display:grid;place-items:center;border-radius:999px;border:1.5px solid var(--line)}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary svg{width:22px;height:22px}
  .menu[open] summary{background:var(--sand)}
  .menu nav{position:absolute;right:0;top:56px;width:min(78vw,300px);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;display:grid;box-shadow:0 18px 40px rgba(0,0,0,.18)}
  .menu nav a{padding:15px 16px;text-decoration:none;font-weight:500;border-radius:10px}
  .menu nav a:hover{background:var(--sand)}
  .bar-end{display:flex;align-items:center;gap:10px}
}
@media (min-width:901px){.bar-end .menu{display:none}}
@media (max-width:420px){.bar{gap:8px}.bar-end{gap:8px}.logo{letter-spacing:.12em;font-size:12px;gap:8px}.logo b{font-size:15px}.logo svg{width:34px;height:23px}.bar .btn{padding:0 14px;font-size:14px}.menu summary{min-width:46px;min-height:46px}}

/* Stone surfaces (placeholders) */
.stone{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--s1,#B9B5AA),var(--s2,#9B988E))}
.stone::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.ph{position:absolute;left:12px;bottom:10px;right:12px;font:500 12px/1.3 var(--f-body);color:rgba(20,22,24,.78);letter-spacing:.02em;z-index:2}

/* Hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);position:relative;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 90% at 80% 40%,rgba(190,160,125,.26),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,5vw,72px);padding-block:clamp(48px,8vw,104px)}
.hero .eyebrow{color:var(--hero-soft)}
.hero h1{font-size:clamp(40px,7.4vw,84px);margin-top:20px}
.hero .lead{margin-top:24px;font-size:clamp(17px,2.2vw,20px);color:var(--hero-soft);max-width:34ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.stairs{position:relative;display:grid;gap:0;justify-items:end;align-content:end;min-height:360px;padding-bottom:6px}
.step{height:clamp(44px,6.4vw,66px);position:relative;border-radius:2px 2px 0 0;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 18px 22px -10px rgba(0,0,0,.55)}
.step:nth-child(1){width:46%;--s1:#CFCABD;--s2:#B6B1A4}
.step:nth-child(2){width:58%;--s1:#C5C0B3;--s2:#ABA699}
.step:nth-child(3){width:70%;--s1:#BBB6A9;--s2:#A09B8E}
.step:nth-child(4){width:82%;--s1:#B0AB9E;--s2:#958F83}
.step:nth-child(5){width:94%;--s1:#A6A194;--s2:#8B857A}
.step:nth-child(6){width:100%;--s1:#9C978B;--s2:#807B70}
.hero .stairs .ph{color:rgba(243,241,236,.82);position:absolute;right:0;top:0;left:auto;bottom:auto;font-size:12px;text-align:right;max-width:24ch}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.stairs{min-height:260px;order:-1}.hero .lead{max-width:none}}
@media (prefers-reduced-motion:no-preference){
  .step{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
  .step:nth-child(1){animation-delay:.05s}.step:nth-child(2){animation-delay:.12s}.step:nth-child(3){animation-delay:.19s}
  .step:nth-child(4){animation-delay:.26s}.step:nth-child(5){animation-delay:.33s}.step:nth-child(6){animation-delay:.4s}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
}

/* Sections */
section{padding-block:clamp(64px,9vw,128px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(32px,5.2vw,58px);margin-top:16px}
.sec-head p{color:var(--ink-soft);max-width:46ch}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}}

/* Leistungen */
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,24px);list-style:none;margin:0;padding:0}
.cards>li{grid-column:span 4}
.cards>li:nth-child(n+4){grid-column:span 3}
@media (max-width:1000px){.cards>li,.cards>li:nth-child(n+4){grid-column:span 6}.cards>li:last-child{grid-column:span 12}.cards>li:last-child .thumb{aspect-ratio:16/7}}
@media (max-width:560px){.cards>li,.cards>li:nth-child(n+4),.cards>li:last-child{grid-column:span 12}.cards>li:last-child .thumb{aspect-ratio:4/3}}
.card{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(0,0,0,.35)}
.thumb{aspect-ratio:4/3;position:relative;background:var(--sand);overflow:hidden}
.thumb .stone{position:absolute}
.card-body{padding:22px 22px 26px;display:grid;gap:10px}
.card h3{font-size:22px}
.card p{color:var(--ink-soft);font-size:16px}
.card .more{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;color:var(--accent);min-height:44px}
.card .more svg{width:18px;height:18px;transition:transform .2s}
.card:hover .more svg{transform:translateX(4px)}
/* Motive pro Leistung */
.m-stairs{position:absolute;inset:0;display:grid;align-content:end;justify-items:end;padding:0 0 0 0}
.m-stairs i{display:block;height:15%;background:linear-gradient(135deg,#C4BFB2,#A29D90);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 8px 10px -6px rgba(0,0,0,.4);position:relative}
.m-stairs i:nth-child(1){width:30%}.m-stairs i:nth-child(2){width:46%}.m-stairs i:nth-child(3){width:62%}.m-stairs i:nth-child(4){width:78%}.m-stairs i:nth-child(5){width:100%}
.t-1{background:linear-gradient(#DCD8CC,#C7C8B8)}
.t-2{background:linear-gradient(#D9D4C6,#BFC4AE)}
.m-paving{position:absolute;inset:14% 8%;transform:perspective(500px) rotateX(48deg);transform-origin:50% 100%;
  background:
   repeating-linear-gradient(90deg,transparent 0 56px,rgba(40,40,36,.28) 56px 58px),
   repeating-linear-gradient(0deg,transparent 0 38px,rgba(40,40,36,.28) 38px 40px),
   linear-gradient(135deg,#B7B2A5,#9C978B);box-shadow:0 20px 30px -14px rgba(0,0,0,.5)}
.t-3{background:linear-gradient(#E3E0D6,#D3D6C6)}
.m-sill{position:absolute;left:8%;right:8%;bottom:26%;height:13%;background:linear-gradient(135deg,#E4E0D6,#BDB8AA);box-shadow:0 12px 14px -8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.7)}
.m-frame{position:absolute;left:14%;right:14%;top:12%;bottom:39%;border:5px solid rgba(35,38,42,.55);background:linear-gradient(160deg,rgba(255,255,255,.65),rgba(160,190,200,.35))}
.t-4{background:linear-gradient(#D6D7CB,#BEC3B4)}
.m-stele{position:absolute;left:50%;bottom:18%;width:28%;height:58%;transform:translateX(-50%);border-radius:14px 14px 2px 2px;background:linear-gradient(135deg,#A9A599,#827E73);box-shadow:0 14px 20px -8px rgba(0,0,0,.5)}
.m-grass{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(#8DA07A,#6D8260)}
.t-5{background:linear-gradient(#E4DFD3,#D6D0C2)}
.m-top{position:absolute;left:6%;right:6%;top:38%;height:22%;background:linear-gradient(135deg,#C9C3B5,#A59F90);box-shadow:0 14px 16px -8px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.5)}
.m-sink{position:absolute;left:34%;width:32%;top:43%;height:12%;background:#6E7378;border-radius:3px;box-shadow:inset 0 4px 6px rgba(0,0,0,.45)}
.t-6{background:linear-gradient(#DAD6CA,#CBC8B8)}
.m-cut{position:absolute;inset:16% 12%;clip-path:polygon(0 18%,34% 0,100% 12%,88% 100%,22% 86%);background:linear-gradient(135deg,#BDB6A6,#8F887A);filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}


/* Fotos */
.thumb img,.pos-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo{margin:0;aspect-ratio:1/1.08;position:relative;overflow:hidden;box-shadow:0 30px 50px -24px rgba(0,0,0,.7)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block}
.pos-img{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){.hero-photo{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}}
@media (max-width:820px){.hero-photo,.slider{order:-1;aspect-ratio:4/3.6}}


/* Hero-Slider */
.slider{margin:0;aspect-ratio:1/1.08;position:relative;overflow:hidden;background:var(--hero-bg);box-shadow:0 30px 50px -24px rgba(0,0,0,.7)}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;visibility:hidden}
.slide.is-active{opacity:1;visibility:visible}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slider::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(12,14,15,.62));pointer-events:none}
.slide-label{position:absolute;left:18px;bottom:18px;z-index:2;font:600 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#F3F1EC}
.slider-ctl{position:absolute;right:6px;bottom:6px;z-index:3;display:flex;align-items:center}
.slider-ctl button{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:#F3F1EC;padding:0}
.slider-ctl .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid #F3F1EC;background:transparent;transition:background .2s}
.slider-ctl button[aria-current="true"] .dot{background:#F3F1EC}
.slider-ctl .pp svg{width:18px;height:18px}
.slider-ctl .pp .i-play{display:none}
.slider-ctl .pp[data-state="paused"] .i-play{display:block}
.slider-ctl .pp[data-state="paused"] .i-pause{display:none}
@media (max-width:640px){.slide-label{bottom:58px}.slider::after{height:44%}}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}

/* Positionierung */
.pos{background:var(--sand);padding-block:0}
.pos-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:560px}
.pos-img{--s1:#A8A396;--s2:#7E796D;display:grid;align-items:end}
.pos-img .stone{position:absolute;inset:0}
.pos-img .m-stairs i{height:12%}
.pos-copy{padding:clamp(40px,7vw,96px) var(--gutter);display:grid;align-content:center;gap:24px}
.pos-copy h2{font-size:clamp(40px,6.4vw,76px)}
.pos-copy p{color:var(--ink-soft);max-width:44ch;font-size:18px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px;padding-top:24px;border-top:1px solid var(--line);list-style:none;margin-inline:0;padding-inline:0}
.facts li{display:grid;gap:10px;font:600 15px/1.3 var(--f-body)}
.facts svg{width:28px;height:28px;color:var(--accent)}
@media (max-width:820px){.pos-grid{grid-template-columns:1fr}.pos-img{min-height:300px;position:relative}}

/* Projekte */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters{gap:0;border-bottom:1px solid var(--line)}
.filters button{font:600 13px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;min-height:48px;padding:0 20px;border:0;border-bottom:4px solid transparent;margin-bottom:-1px;border-radius:0;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .2s,border-color .2s}
.filters button:hover{color:var(--ink);border-bottom-color:var(--line)}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.work{columns:3;column-gap:clamp(12px,2vw,22px);list-style:none;margin:0;padding:0}
.work li{break-inside:avoid;margin-bottom:clamp(12px,2vw,22px)}
.work figure{margin:0;display:grid;gap:10px}
.work .frame{position:relative;overflow:hidden;background:var(--sand)}
.work .frame img{display:block;width:100%;height:auto}
.work .frame.stone{aspect-ratio:4/3}
.work figcaption{font:500 15px/1.4 var(--f-body);color:var(--ink-soft)}
@media (max-width:900px){.work{columns:2}}
@media (max-width:560px){.work{columns:1}}

/* Über uns */
.about{background:var(--surface);border-block:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
.about .frame{aspect-ratio:4/5;--s1:#8F8B80;--s2:#6A665D}
.about h2{font-size:clamp(32px,5vw,56px);margin:16px 0 24px}
.about p{color:var(--ink-soft);max-width:48ch}
.about p+p{margin-top:16px}
.note{display:inline-block;margin-top:20px;padding:6px 12px;border:1.5px dashed var(--stone);border-radius:6px;font-size:14px;color:var(--ink-soft)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0 0;padding:24px 0 0;border-top:1px solid var(--line);list-style:none}
.pillars li{display:grid;gap:10px;font:600 15px/1.3 var(--f-body)}
.pillars svg{width:28px;height:28px;color:var(--accent)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}.about .frame{aspect-ratio:4/3}}

/* Region */
.region-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.region h2{font-size:clamp(32px,5vw,56px);margin:16px 0 24px}
.region p{color:var(--ink-soft);max-width:46ch}
.places{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-weight:500}
.places li:not(:last-child)::after{content:"·";margin-inline:.65em;color:var(--stone)}
.mapbox{background:var(--surface);border:1px solid var(--line);padding:clamp(8px,2vw,20px);margin:0}
.mapbox svg{display:block;width:100%;height:auto}
.mapbox text{font-family:var(--f-body);font-size:12px;fill:var(--ink-soft)}
.mapbox .ring{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:1.4;stroke-dasharray:2 6;stroke-linecap:round}
.mapbox .ring2{fill:none;stroke:var(--ink);stroke-opacity:.3;stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round}
.mapbox .sea{fill:var(--sea)}
.mapbox .kr-o{fill:var(--land-o);stroke:var(--surface);stroke-width:.8;stroke-linejoin:round}
.mapbox .kr{fill:var(--land);stroke:var(--surface);stroke-width:.8;stroke-linejoin:round}
.mapbox .lake{fill:var(--water);stroke:var(--water-edge);stroke-width:.6}
.mapbox .halo{fill:rgba(184,208,0,.28)}
.mapbox .tn{font-size:12.5px;fill:var(--ink);paint-order:stroke;stroke:var(--land);stroke-width:3px;stroke-linejoin:round}
.mapbox{--sea:#EAE6DC;--land:#F7F4EC;--land-o:#EFEBE1;--water:#BFD0D3;--water-edge:#A5BCC0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mapbox{--sea:#202428;--land:#33383C;--land-o:#2B3033;--water:#3E5359;--water-edge:#4C656C}}
:root[data-theme="dark"] .mapbox{--sea:#202428;--land:#33383C;--land-o:#2B3033;--water:#3E5359;--water-edge:#4C656C}
.mapbox .dot{fill:var(--ink)}
.mapbox .home{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.mapbox .home-t{font-weight:700;fill:var(--ink);font-size:15px;paint-order:stroke;stroke:var(--land);stroke-width:3.5px;stroke-linejoin:round}
.mapbox .km{font-size:11px;fill:var(--stone)}
.mapnote{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:10px}
@media (max-width:820px){.region-grid{grid-template-columns:1fr}}

/* Kontakt */
.contact{background:var(--hero-bg);color:var(--hero-ink);position:relative;isolation:isolate}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,88px);align-items:center}
.contact h2{font-size:clamp(36px,6vw,68px)}
.contact .lead{margin-top:22px;color:var(--hero-soft);max-width:40ch}
.contact .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.phone{margin-top:14px;font-size:15px;color:var(--hero-soft)}
form{background:var(--surface);color:var(--ink);padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border-radius:4px}
.field{display:grid;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
label,.lab{font:600 14px/1.2 var(--f-body)}
input,select,textarea{font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:13px 14px;min-height:50px;width:100%;min-width:0}
textarea{min-height:130px;resize:vertical}
input[type=file]{padding:11px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.hint{font-size:13px;color:var(--ink-soft)}
.form-msg{grid-column:1/-1;padding:14px 16px;border-radius:8px;background:var(--sand);font-size:15px}
form .btn{width:100%}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* Footer */
footer{background:var(--footer-bg);color:var(--hero-soft);padding-block:44px}
.foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(28px,6vw,96px);align-items:start;font-size:15px}
footer .logo{color:#F3F1EC}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{text-decoration:none;display:inline-block;padding:8px 0}
footer a:hover{text-decoration:underline}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== Textur-Flächen ===== */

/* Hero: Bildergalerie als Vollbild */
.hero{min-height:clamp(560px,calc(100svh - 104px),900px);display:grid;align-items:end}
.hero-grid{grid-template-columns:minmax(0,1fr);position:static;width:100%;padding-block:clamp(56px,9vw,120px)}
.hero-grid>div:first-child{max-width:640px;position:relative;z-index:2}
.hero .slider{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;box-shadow:none;order:0}
.hero .slider::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(14,16,18,.86) 0%,rgba(14,16,18,.55) 42%,rgba(14,16,18,.08) 78%),linear-gradient(0deg,rgba(14,16,18,.55),transparent 38%)}
.hero .slider::after{display:none}
.hero .slide-label{left:auto;bottom:74px;right:calc(max(var(--gutter),(100% - 1240px)/2 + var(--gutter)) + 12px);font-size:14px;z-index:3;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero .slider-ctl{right:max(calc(var(--gutter) - 14px),calc((100% - 1240px)/2 + var(--gutter) - 14px));bottom:22px}
.hero .lead{max-width:38ch;color:#E4E1D9}
@media (max-width:820px){
  .hero{min-height:clamp(600px,88svh,780px)}
  .hero .slider::before{background:linear-gradient(0deg,rgba(14,16,18,.92) 0%,rgba(14,16,18,.62) 48%,rgba(14,16,18,.12) 100%)}
  .hero .slide-label{bottom:auto;top:58px;right:auto;left:var(--gutter)}
  .hero .slider-ctl{bottom:auto;top:6px;right:6px}
  .hero-grid{padding-block:96px 40px}
}

/* Hell/Dunkel-Wechsel + raue Abrisskanten */
.hero,.contact,.pos,.about{--ink:var(--hero-ink);--ink-soft:var(--hero-soft);--line:rgba(241,237,229,.22);--accent:#D3B48C;--accent-ink:#2A2012;--stone:#A5A39B;color:var(--hero-ink);background-color:var(--hero-bg);background-image:var(--tex-hero);background-size:720px auto}
.pos{background-color:#343A3F}
.about{background-color:#272C30}
.contact form{--ink:#23262A;--ink-soft:#4F5359;--line:rgba(35,38,42,.14);--accent:#7B6248;--accent-ink:#fff;--stone:#8B8981}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact form{--ink:#EDE9E1;--ink-soft:#B9B3A8;--line:rgba(237,233,225,.16);--accent:#CDB08A;--accent-ink:#2A2012}}
:root[data-theme="dark"] .contact form{--ink:#EDE9E1;--ink-soft:#B9B3A8;--line:rgba(237,233,225,.16);--accent:#CDB08A;--accent-ink:#2A2012}
#leistungen,#projekte{background:var(--bg) var(--tex) 0 0/720px auto}
.region{background:var(--sand) var(--tex) 0 0/720px auto}
.about{border-block:0}
main>section,footer{position:relative}
main>section::before,footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(26px,3.6vw,48px);background:inherit;background-size:720px auto;-webkit-mask:var(--edge) repeat-x 0 100%/1200px 100%;mask:var(--edge) repeat-x 0 100%/1200px 100%;pointer-events:none}
.pos::before{-webkit-mask-position:300px 100%;mask-position:300px 100%}
#projekte::before{-webkit-mask-position:700px 100%;mask-position:700px 100%}
.about::before{-webkit-mask-position:120px 100%;mask-position:120px 100%}
.region::before{-webkit-mask-position:520px 100%;mask-position:520px 100%}
.contact::before{-webkit-mask-position:900px 100%;mask-position:900px 100%}
footer::before{-webkit-mask-position:60px 100%;mask-position:60px 100%}
.hero::before{content:none}

/* ===== Bewegung ===== */
.site-header{transition:box-shadow .3s ease}
.site-header.is-scrolled{box-shadow:0 10px 28px -18px rgba(0,0,0,.45)}
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.card .thumb img,.work .frame img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb img,.work li:hover .frame img{transform:scale(1.05)}
.nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s ease;text-decoration:none}
.nav a:hover{background-size:100% 1.5px;text-decoration:none}
footer a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s ease}
footer a:hover{background-size:100% 1.5px;text-decoration:none}
footer a.logo,footer a.logo:hover{background:none;transition:none;text-decoration:none}

@media (prefers-reduced-motion:no-preference){
  /* Hero-Intro */
  .hero .eyebrow,.hero h1,.hero .lead,.hero .cta{animation:up .95s cubic-bezier(.2,.7,.2,1) backwards}
  .hero h1{animation-delay:.08s}.hero .lead{animation-delay:.22s}.hero .cta{animation-delay:.36s}
  .hero .slider{animation:slider-in 1.2s cubic-bezier(.2,.7,.2,1) .15s backwards}
  @keyframes up{from{opacity:0;transform:translateY(28px)}}
  @keyframes slider-in{from{opacity:0}}
  /* Langsamer Zoom auf der aktiven Folie */
  .slide.is-active img{animation:kb 7s ease-out both}
  @keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
  /* Einblenden beim Scrollen (Klasse .reveal setzt das Skript) */
  .reveal{opacity:0;translate:0 30px;transition:opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms),translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms)}
  .reveal.in{opacity:1;translate:none}
  .card.reveal{transition:opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms),translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms),transform .25s,box-shadow .25s}
  .reveal-clip{clip-path:inset(0 0 0 100%);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1)}
  .reveal-clip.in{clip-path:inset(0)}
  /* Karte: Radius baut sich auf, Standort pulsiert */
  .mapbox .zone,.mapbox .ring,.mapbox .ring2{transform-box:fill-box;transform-origin:center;transition:transform 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.6s}
  .mapbox.reveal:not(.in) .zone,.mapbox.reveal:not(.in) .ring,.mapbox.reveal:not(.in) .ring2{transform:scale(.55);opacity:0}
  .mapbox circle[r="13"]{transform-box:fill-box;transform-origin:center;animation:ping 2.8s ease-out infinite}
  @keyframes ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2);opacity:0}}
  /* Parallax per Scroll-Timeline, nur wo unterstützt */
  @supports (animation-timeline:view()){
    .pos-img img,.about .frame img{top:-8%!important;bottom:auto!important;height:116%!important;animation:par linear both;animation-timeline:view();animation-range:cover}
    @keyframes par{from{translate:0 -6%}to{translate:0 6%}}
  }
}
@media print{.reveal,.reveal-clip{opacity:1!important;translate:none!important;clip-path:none!important}}
/* ===== Rechtliche Seiten ===== */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(34px,5vw,54px);margin:14px 0 28px}
.legal h2{font-size:clamp(21px,2.6vw,27px);margin:36px 0 10px}
.legal h3{font-size:clamp(18px,2.1vw,21px);margin:28px 0 8px}
.legal h4{font-size:16px;margin:20px 0 6px;font-weight:600}
.legal p{margin:0 0 12px}
.legal a{text-underline-offset:3px}
.legal p,.legal li{color:var(--ink-soft);max-width:68ch}
.legal ul{padding-left:1.2em}
.legal .notice{border:1.5px dashed var(--stone);border-radius:8px;padding:14px 16px;font-size:15px;color:var(--ink);background:var(--surface);margin-bottom:28px}
.legal mark{background:var(--sand);color:var(--ink);padding:0 4px;border-radius:3px}