/* ==========================================================================
   Schlosserei Schoen GmbH – Blaupausen-Design
   Linien-Raster statt Schatten · Anthrazit / Kalkweiß / Ocker
   Typo-Skala 1.25 · Barlow Condensed + Source Sans 3 (lokal gehostet)
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/BarlowCondensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:200 900;font-style:normal;font-display:swap;src:url(../fonts/SourceSans3-var.woff2) format('woff2')}

:root{
	--primary:#2B2F33;               /* oklch(28% 0.01 250) */
	--bg:#F4F1EA;                    /* oklch(95% 0.012 85) */
	--accent:#C8862A;                /* oklch(68% 0.13 75) */
	--accent-ink:color-mix(in oklch,var(--accent) 58%,#000);
	--text:#1C1F22;
	--muted:#4E5358;
	--line:#D6D0C2;
	--bg-alt:oklch(92% 0.014 85);
	--field:oklch(98% 0.005 85);
	--radius:2px;
	--space:clamp(1rem,2vw,2rem);
	--gutter:clamp(1.25rem,4vw,2.5rem);
	--ease-out:cubic-bezier(0.22,1,0.36,1);
	--dur-ui:220ms;
	--font-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
	--font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

	/* Typo-Skala, Faktor 1.25 */
	--fs-0:clamp(1.0625rem,1.03rem + 0.14vw,1.125rem);
	--fs-1:calc(var(--fs-0) * 1.25);
	--fs-2:calc(var(--fs-0) * 1.5625);
	--fs-3:calc(var(--fs-0) * 1.953);
	--fs-4:calc(var(--fs-0) * 2.441);
	--fs-5:calc(var(--fs-0) * 3.052);
	--fs-6:calc(var(--fs-0) * 3.815);
	--fs-s:calc(var(--fs-0) * 0.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-0);line-height:1.65;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.nav-open{overflow:hidden}
img,video,iframe{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto}
.icon{width:1.4em;height:1.4em;flex:0 0 auto;vertical-align:middle}
a{color:inherit;text-underline-offset:.18em}
p,li,dd{text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:.005em;margin:0 0 .5em;text-wrap:balance;color:inherit}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.band--dark :focus-visible,.contactbar :focus-visible,.site-footer :focus-visible,.drawer :focus-visible,.side__card :focus-visible,.photoband :focus-visible,.slider__ctrl :focus-visible{outline-color:var(--accent)}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--primary);color:var(--bg);padding:.75rem 1rem;border-radius:var(--radius)}
.skip-link:focus{top:1rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2 * var(--gutter),1240px);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space)}
.kicker{font-family:var(--font-display);font-weight:600;font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem;display:flex;align-items:center;gap:.75rem}
.kicker::before{content:"";width:2.25rem;height:2px;background:currentColor;flex:0 0 auto}
.lead{font-size:var(--fs-1);line-height:1.5;color:var(--muted);max-width:52ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.6rem 1.35rem;border:2px solid transparent;border-radius:var(--radius);font-family:var(--font-display);font-weight:600;font-size:var(--fs-1);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;line-height:1;cursor:pointer;transition:transform var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn .icon{width:20px;height:20px;transition:transform var(--dur-ui) var(--ease-out)}
.btn--accent{background:var(--accent);color:var(--text)}
.btn--dark{background:var(--primary);color:var(--bg)}
.btn--line{border-color:var(--primary);color:var(--primary)}
.btn--ghost-dark{border-color:var(--text);color:var(--text)}
.btn--block{display:flex;width:100%}
@media (hover:hover) and (pointer:fine){
	.btn--accent:hover{background:color-mix(in oklch,var(--accent) 86%,#fff)}
	.btn--dark:hover{background:#000}
	.btn--line:hover,.btn--ghost-dark:hover{background:var(--primary);color:var(--bg);border-color:var(--primary)}
	.btn:hover .icon:last-child{transform:translateX(4px)}
}
.textlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15rem}
.textlink .icon{width:20px;height:20px;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover){.textlink:hover .icon{transform:translateX(4px)}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow var(--dur-ui) var(--ease-out)}
.header__inner{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);padding-block:1.15rem;transition:padding var(--dur-ui) var(--ease-out)}
.site-header.is-scrolled{box-shadow:0 8px 20px -14px rgba(28,31,34,.45)}
.site-header.is-scrolled .header__inner{padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--primary);flex:0 0 auto}
.brand__mark{flex:0 0 auto;width:30px;height:30px;transition:transform var(--dur-ui) var(--ease-out)}
.brand__logo{max-height:46px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:.06em;text-transform:uppercase}
.brand__sub{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;transition:margin var(--dur-ui),font-size var(--dur-ui)}
.site-header.is-scrolled .brand__mark{transform:scale(.86)}
.nav{margin-left:auto}
.nav__list,.drawer__list,.footer__list{list-style:none;margin:0;padding:0}
.nav__list{display:flex;align-items:center;gap:clamp(1.5rem,2.6vw,2.75rem)}
.nav__list>li{position:relative}
.nav__list a{display:block;padding:.6rem 0;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--primary);background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 3px no-repeat;transition:background-size var(--dur-ui) var(--ease-out)}
.nav__list a:hover,.nav__list .current-menu-item>a,.nav__list .current-menu-ancestor>a,.nav__list .current_page_item>a{background-size:100% 3px}
.nav__list .menu-item-has-children>a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.header__cta{flex:0 0 auto;min-height:44px;padding:.4rem 1.05rem}
.burger{display:none}

@media (min-width:961px){
	.nav__list .sub-menu{list-style:none;margin:0;padding:.5rem;position:absolute;left:-1rem;top:100%;min-width:19rem;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--accent);visibility:hidden;transform:translateY(8px);transition:transform var(--dur-ui) var(--ease-out),visibility 0s linear var(--dur-ui)}
	.nav__list li:hover>.sub-menu,.nav__list li:focus-within>.sub-menu{visibility:visible;transform:none;transition-delay:0s}
	.nav__list .sub-menu a{padding:.65rem .9rem;font-size:1rem;text-transform:none;letter-spacing:.01em;background:none;transition:background-color var(--dur-ui),color var(--dur-ui)}
	.nav__list .sub-menu a:hover{background:var(--bg-alt);color:var(--text)}
	.drawer{display:none}
}

/* ---------- Mobile-Menü (Drawer direkt unter <body>) ---------- */
@media (max-width:960px){
	.nav,.header__cta{display:none}
	.header__inner{justify-content:space-between}
	.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:transparent;border:2px solid var(--primary);border-radius:var(--radius);color:var(--primary);cursor:pointer}
	.burger__bars{position:relative;display:block;width:22px;height:2px;background:currentColor;transition:background-color 120ms}
	.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform var(--dur-ui) var(--ease-out)}
	.burger__bars::before{top:-7px}
	.burger__bars::after{top:7px}
	.burger[aria-expanded="true"] .burger__bars{background:transparent}
	.burger[aria-expanded="true"] .burger__bars::before{transform:translateY(7px) rotate(45deg)}
	.burger[aria-expanded="true"] .burger__bars::after{transform:translateY(-7px) rotate(-45deg)}
	.drawer{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;gap:1.5rem;padding:calc(var(--hh,72px) + 1.25rem) var(--gutter) 2rem;background:var(--primary);color:var(--bg);overflow-y:auto;visibility:hidden;transform:translateX(100%);transition:transform 260ms var(--ease-out),visibility 0s linear 260ms}
	.drawer.is-open{visibility:visible;transform:none;transition-delay:0s}
	.drawer__list a{display:block;padding:.9rem 0;border-bottom:1px solid rgba(244,241,234,.18);font-family:var(--font-display);font-weight:600;font-size:var(--fs-3);line-height:1.1;text-decoration:none;color:var(--bg)}
	.drawer__list .sub-menu{list-style:none;margin:0;padding:0 0 .5rem 1rem}
	.drawer__list .sub-menu a{font-size:var(--fs-1);font-weight:500;padding:.6rem 0}
	.drawer__list a:active{color:var(--accent)}
}

/* ---------- Hero ---------- */
.blueprint{background-image:linear-gradient(color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem);background-color:var(--bg);background-image:linear-gradient(color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.hero__grid{align-items:center}
.hero__text{grid-column:1 / span 6}
.hero h1{font-weight:700;font-size:var(--fs-6);line-height:.98;margin-bottom:.4em;color:var(--primary)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero__in{animation:rise 360ms var(--ease-out) both;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}

.slider{grid-column:7 / span 6;min-width:0;border:2px solid var(--primary);border-radius:var(--radius);background:var(--primary)}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:5 / 4.4;overscroll-behavior-x:contain}
.slider__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;margin:0;display:flex;flex-direction:column;min-width:0;background:var(--primary)}
.slide__img{flex:1 1 0;min-height:0;width:100%;height:100%;object-fit:cover}
.slide__cap{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:baseline;padding:.85rem 1.1rem;color:var(--bg);font-size:var(--fs-s);line-height:1.4}
.slide__cap strong{font-family:var(--font-display);font-size:var(--fs-1);letter-spacing:.03em;font-weight:600}
.slide__cap span:last-child{grid-column:2;color:rgba(244,241,234,.82)}
.slide__no{font-family:var(--font-display);font-weight:600;font-size:var(--fs-1);color:var(--accent)}
.slide__cap .slide__no{grid-row:1 / span 2}
.slider__ctrl{display:flex;align-items:center;justify-content:space-between;padding:.35rem .5rem;border-top:1px solid rgba(244,241,234,.2);background:var(--primary)}
.slider__btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--bg);cursor:pointer;border-radius:var(--radius);transition:transform var(--dur-ui) var(--ease-out),color var(--dur-ui)}
.slider__btn[data-dir="-1"] .icon{transform:scaleX(-1)}
.slider__btn:active{transform:scale(.94)}
@media (hover:hover){.slider__btn:hover{color:var(--accent)}}
.slider__dots{display:flex;gap:.55rem}
.slider__dot{width:22px;height:3px;background:rgba(244,241,234,.35);transition:background-color var(--dur-ui)}
.slider__dot.is-on{background:var(--accent)}

/* ---------- Kontaktleiste ---------- */
.contactbar{background:var(--primary);color:var(--bg)}
.contactbar__inner{display:grid;grid-template-columns:repeat(3,1fr)}
.contactbar__item{display:flex;align-items:center;gap:.9rem;padding:1.25rem clamp(.75rem,2vw,1.75rem);text-decoration:none;color:inherit;border-left:1px solid rgba(244,241,234,.16);transition:background-color var(--dur-ui) var(--ease-out)}
.contactbar__item:first-child{border-left:0;padding-left:0}
.contactbar__item .icon{width:26px;height:26px;color:var(--accent)}
.contactbar__item span{display:flex;flex-direction:column;line-height:1.25}
.contactbar__item small{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.72)}
.contactbar__item strong{font-weight:600;font-size:var(--fs-0)}
a.contactbar__item:active{background:rgba(244,241,234,.06)}
@media (hover:hover){a.contactbar__item:hover strong{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.25em}}

/* ---------- Sektionen ---------- */
.section{position:relative}
.section h2{font-size:var(--fs-4);color:var(--primary);font-weight:700}
.section__head{align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.section__head h2{grid-column:1 / span 6;margin:0}
.section__intro{grid-column:8 / span 5;margin:0;color:var(--muted)}

.section--intro{padding-block:clamp(5rem,11vw,10rem)}
.intro__main{grid-column:1 / span 7}
.intro__main p{max-width:62ch}
.intro__main h2{margin-bottom:.7em}
.facts{grid-column:9 / span 4;align-self:start;border-top:3px solid var(--primary)}
.facts__row{display:grid;gap:.15rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.facts dl{margin:0}
.facts dt{font-family:var(--font-display);font-weight:600;font-size:var(--fs-s);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.facts dd{margin:0;font-weight:600;line-height:1.35}

.section--services{padding-block:clamp(4rem,8vw,8rem);background:var(--bg-alt);border-block:1px solid var(--line)}

/* Gewerke – nummeriertes Linien-Raster */
.gewerke{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--primary);border-left:1px solid var(--line)}
.gewerke__item{border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex}
.gewerke__link{display:flex;flex-direction:column;gap:.35rem;flex:1;padding:clamp(1.4rem,2.6vw,2.4rem);min-height:15rem;text-decoration:none;color:var(--text);transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out)}
a.gewerke__link:active{transform:scale(.99)}
.gewerke__no{font-family:var(--font-display);font-weight:600;font-size:var(--fs-3);line-height:1;color:var(--accent-ink);transition:color var(--dur-ui)}
.gewerke__title{font-size:var(--fs-2);margin:.35rem 0 .1rem;color:inherit;font-weight:700}
.gewerke__text{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;transition:color var(--dur-ui)}
.gewerke__more{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);transition:color var(--dur-ui)}
.gewerke__more .icon{width:20px;height:20px;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
	a.gewerke__link:hover{background:var(--primary);color:var(--bg)}
	a.gewerke__link:hover .gewerke__no,a.gewerke__link:hover .gewerke__more{color:var(--accent)}
	a.gewerke__link:hover .gewerke__text{color:rgba(244,241,234,.8)}
	a.gewerke__link:hover .gewerke__more .icon{transform:translateX(5px)}
}

/* Bildband – vollflächig, überbreit */
.photoband{position:relative;min-height:clamp(21rem,46vw,36rem);display:flex;align-items:flex-end;background:var(--primary);color:var(--bg);overflow:hidden}
.photoband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.photoband__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,31,34,.86) 0,rgba(28,31,34,.5) 55%,rgba(28,31,34,.12) 100%)}
.photoband__inner{position:relative;padding-block:clamp(2.5rem,6vw,5rem)}
.photoband__quote{font-family:var(--font-display);font-weight:700;font-size:var(--fs-6);line-height:.95;margin:0 0 .5rem;padding-left:1.25rem;border-left:8px solid var(--accent);max-width:14ch}
.photoband__sub{font-size:var(--fs-1);max-width:34ch;margin:0;padding-left:calc(1.25rem + 8px);color:rgba(244,241,234,.92)}

/* Zähler */
.band--dark{background:var(--primary);color:var(--bg)}
.counters{padding-block:clamp(3.5rem,6vw,6.5rem)}
.counters__inner{display:grid;grid-template-columns:repeat(3,1fr)}
.counter{display:flex;flex-direction:column;gap:.5rem;padding:0 clamp(1rem,3vw,2.75rem);border-left:1px solid rgba(244,241,234,.16)}
.counter:first-child{border-left:0;padding-left:0}
.counter__num{font-family:var(--font-display);font-weight:700;font-size:calc(var(--fs-0) * 4.768);line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums}
.counter__label{max-width:22ch;color:rgba(244,241,234,.9);line-height:1.4}

/* Ablauf */
.section--process{padding-block:clamp(3.5rem,6vw,5.5rem);background-color:var(--bg);background-image:linear-gradient(color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space)}
.step{position:relative;padding-top:1.6rem;border-top:2px solid var(--primary)}
.step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--accent);border:2px solid var(--primary)}
.step__no{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-3);line-height:1;color:var(--accent-ink);margin-bottom:.5rem}
.step h3{font-size:var(--fs-2);color:var(--primary);font-weight:700;margin-bottom:.4em}
.step p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}

/* Arbeitsfelder – versetzt */
.section--work{padding-block:clamp(3rem,4.5vw,4rem)}
.section--work h2{margin-bottom:1.5rem}
.work{align-items:start}
.work__item{margin:0}
.work__item a{display:block;overflow:hidden;border-radius:var(--radius)}
.work__item img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius);filter:saturate(.88);transition:transform 300ms var(--ease-out)}
.work__item figcaption{display:flex;gap:.75rem;align-items:baseline;padding-top:.6rem;margin-top:.6rem;border-top:1px solid var(--primary);font-family:var(--font-display);font-weight:600;font-size:var(--fs-1);letter-spacing:.04em}
.work__item figcaption span{color:var(--accent-ink)}
.work__item--1{grid-column:1 / span 7}
.work__item--2{grid-column:8 / span 5;margin-top:clamp(2rem,6vw,5rem)}
.work__item--3{grid-column:1 / span 5;margin-top:clamp(1.5rem,3vw,2.5rem)}
.work__item--4{grid-column:6 / span 7;margin-top:clamp(1rem,3vw,2.5rem)}
@media (hover:hover) and (pointer:fine){.work__item a:hover img{transform:scale(1.03)}}

/* Abschluss-Band */
.band--accent{background:var(--accent);color:var(--text)}
.cta{padding-block:clamp(4.5rem,9vw,8.75rem)}
.cta__text{grid-column:1 / span 8}
.cta h2{font-size:var(--fs-5);font-weight:700;color:var(--text);max-width:18ch;margin-bottom:.4em}
.cta p{font-size:var(--fs-1);max-width:46ch;margin:0}
.cta__actions{grid-column:9 / span 4;align-self:end;display:flex;flex-direction:column;gap:.85rem}
.cta__actions .btn{width:100%}

/* ---------- Unterseiten ---------- */
.pagehero{padding-block:clamp(2rem,4vw,3.25rem) clamp(2.5rem,5vw,4.25rem);background-color:var(--bg);background-image:linear-gradient(color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--line) 55%,transparent) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px;border-bottom:1px solid var(--line)}
.pagehero__title{font-size:var(--fs-5);font-weight:700;color:var(--primary);max-width:20ch;margin-bottom:.3em;line-height:1}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--fs-s);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem}
.crumbs a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{border-color:var(--accent-ink)}
.section--page{padding-block:clamp(3rem,6vw,5.5rem)}
.section--page .prose{grid-column:1 / span 8;min-width:0}
.section--page.is-narrow .prose{grid-column:2 / span 9}
.side{grid-column:9 / span 4;align-self:start;position:sticky;top:6rem;display:grid;gap:2rem}
.prose>*{max-width:66ch}
.prose>.prose__hero,.prose>.prose__wide,.prose>.wp-block-separator,.prose>.wp-block-columns,.prose>.wp-block-group{max-width:none}
.prose h2{font-size:var(--fs-3);font-weight:700;color:var(--primary);margin:2.2em 0 .55em}
.prose>h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-2);font-weight:700;color:var(--primary);margin:1.8em 0 .5em}
.prose p{margin-bottom:1.15em}
.prose a{color:var(--accent-ink);font-weight:600}
.prose>ul,.prose>ol{padding:0;margin:0 0 1.4em;list-style:none}
.prose>ul>li,.prose>ol>li{position:relative;padding:.45rem 0 .45rem 1.6rem;border-bottom:1px solid var(--line)}
.prose>ul>li::before{content:"";position:absolute;left:.15rem;top:1.1em;width:.55rem;height:.55rem;background:var(--accent)}
.prose>ol{counter-reset:li}
.prose>ol>li{counter-increment:li}
.prose>ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.5rem;font-family:var(--font-display);font-weight:700;color:var(--accent-ink)}
.prose>ol>li{padding-left:2.4rem}
.prose .wp-block-separator{border:0;border-top:1px solid var(--primary);opacity:1;margin:2.5rem 0;width:100%}
.prose .callout,.prose .wp-block-group.callout{padding:1.4rem 1.6rem;background:var(--bg-alt);border-left:5px solid var(--accent);border-radius:var(--radius);margin:2rem 0}
.prose .callout>*:last-child{margin-bottom:0}
.prose .callout h3{margin-top:0}
.prose__hero{margin:0 0 2.5rem}
.prose__hero img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius);filter:saturate(.9)}
.prose__wide{margin-top:2.5rem}
.prose__wide .gewerke{grid-template-columns:repeat(2,1fr)}
.prose address{font-style:normal}

.side__card{background:var(--primary);color:var(--bg);padding:1.6rem;border-radius:var(--radius);display:grid;gap:1rem}
.side .side__title{font-size:var(--fs-2);margin:0;font-weight:700}
.side__card .side__title{color:var(--bg)}
.side__phone{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-weight:700;font-size:var(--fs-3);line-height:1;color:var(--bg);text-decoration:none}
.side__phone .icon{width:26px;height:26px;color:var(--accent)}
.side__addr{margin:0;color:rgba(244,241,234,.85);line-height:1.5}
.side .side__list .side__title{color:var(--primary);margin-bottom:.6rem}
.side__list ol{list-style:none;margin:0;padding:0;border-top:3px solid var(--primary)}
.side__list li{border-bottom:1px solid var(--line)}
.side__list a{display:flex;gap:.8rem;align-items:baseline;padding:.7rem .25rem;text-decoration:none;font-weight:600;line-height:1.3;transition:padding var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.side__list a span{font-family:var(--font-display);font-weight:700;color:var(--accent-ink)}
.side__list a[aria-current]{background:var(--bg-alt);box-shadow:inset 4px 0 0 var(--accent);padding-left:.9rem}
@media (hover:hover){.side__list a:hover{padding-left:.75rem;background:var(--bg-alt)}}

/* Kontaktformular (Contact Form 7) */
.wpcf7-form{display:grid;gap:1.1rem;max-width:none}
.wpcf7-form p{margin:0}
.wpcf7-form label{display:grid;gap:.4rem;font-weight:600}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form textarea{width:100%;min-height:48px;padding:.7rem .9rem;background:var(--field);border:1px solid color-mix(in oklch,var(--primary) 60%,transparent);border-radius:var(--radius);font:inherit;color:var(--text);transition:border-color var(--dur-ui),box-shadow var(--dur-ui)}
.wpcf7-form textarea{min-height:9rem;resize:vertical}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--accent)}
.wpcf7-form .wpcf7-acceptance label{display:flex;gap:.6rem;font-weight:400;align-items:flex-start}
.wpcf7-form .wpcf7-acceptance input{margin-top:.35rem;width:20px;height:20px;accent-color:var(--primary)}
.wpcf7-form input[type=submit]{min-height:52px;padding:.6rem 1.8rem;background:var(--accent);color:var(--text);border:2px solid transparent;border-radius:var(--radius);font-family:var(--font-display);font-weight:600;font-size:var(--fs-1);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:transform var(--dur-ui) var(--ease-out),background-color var(--dur-ui)}
.wpcf7-form input[type=submit]:active{transform:scale(.98)}
@media (hover:hover){.wpcf7-form input[type=submit]:hover{background:color-mix(in oklch,var(--accent) 86%,#fff)}}
.wpcf7-not-valid-tip{color:#8a1c1c;font-size:var(--fs-s);font-weight:600}
.wpcf7 form .wpcf7-response-output{margin:1rem 0 0;padding:.9rem 1.1rem;border:2px solid var(--primary);border-radius:var(--radius);background:var(--field)}

/* ---------- Footer ---------- */
.site-footer{background:var(--primary);color:var(--bg);padding-top:clamp(3rem,5vw,4.5rem)}
.footer__grid{padding-bottom:clamp(2rem,4vw,3rem)}
.footer__col--firm{grid-column:1 / span 5}
.footer__grid>nav:nth-of-type(1){grid-column:6 / span 4}
.footer__grid>nav:nth-of-type(2){grid-column:10 / span 3}
.footer__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.6rem}
.site-footer address{font-style:normal;margin-bottom:1rem;color:rgba(244,241,234,.88)}
.footer__head{font-family:var(--font-display);font-weight:600;font-size:var(--fs-s);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.footer__list li{border-bottom:1px solid rgba(244,241,234,.14)}
.footer__list a,.site-footer p a{display:block;padding:.5rem 0;text-decoration:none;color:rgba(244,241,234,.92);transition:color var(--dur-ui),padding var(--dur-ui) var(--ease-out)}
.site-footer p a{display:inline-block;padding:.2rem 0}
@media (hover:hover){.footer__list a:hover{color:var(--accent);padding-left:.4rem}.site-footer p a:hover{color:var(--accent)}}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-block:1.25rem 1.75rem;border-top:1px solid rgba(244,241,234,.16);font-size:var(--fs-s);color:rgba(244,241,234,.78)}
.footer__legal p{margin:0}

/* ---------- Reveal (nur transform, nie opacity) ---------- */
.js .rv{transform:translateY(22px);transition:transform 300ms var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
.js .rv.is-in{transform:none}

/* ---------- Tablet ---------- */
@media (max-width:900px){
	.hero__text,.slider,.intro__main,.facts,.section__head h2,.section__intro,.cta__text,.cta__actions,.section--page .prose,.section--page.is-narrow .prose,.side,.footer__col--firm,.footer__grid>nav:nth-of-type(1),.footer__grid>nav:nth-of-type(2){grid-column:1 / -1}
	.hero h1{font-size:var(--fs-5)}
	.section__head{align-items:start}
	.gewerke{grid-template-columns:repeat(2,1fr)}
	.steps{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
	.section--intro{padding-block:clamp(4rem,9vw,6rem)}
	.facts{margin-top:1rem}
	.side{position:static}
	.contactbar__inner{grid-template-columns:1fr}
	.contactbar__item{border-left:0;border-top:1px solid rgba(244,241,234,.16);padding:1rem 0}
	.contactbar__item:first-child{border-top:0}
	.counter__num{font-size:calc(var(--fs-0) * 3.815)}
	.work__item--1,.work__item--2,.work__item--3,.work__item--4{grid-column:1 / -1;margin-top:0}
	.work__item--2,.work__item--4{grid-column:2 / -1}
	.cta__actions{flex-direction:row;flex-wrap:wrap}
	.cta__actions .btn{width:auto;flex:1 1 14rem}
}

/* ---------- Handy ---------- */
@media (max-width:600px){
	:root{--fs-0:1.0625rem}
	.hero h1{font-size:calc(var(--fs-0) * 3.052)}
	.photoband__quote{font-size:var(--fs-5)}
	.pagehero__title{font-size:var(--fs-4)}
	.section h2{font-size:var(--fs-3)}
	.cta h2{font-size:var(--fs-4)}
	.gewerke,.prose__wide .gewerke{grid-template-columns:1fr}
	.gewerke__link{min-height:0}
	.steps{grid-template-columns:1fr;row-gap:0;padding-left:.35rem;border-left:2px solid var(--primary)}
	.step{border-top:0;padding:0 0 2rem 1.75rem}
	.step::before{top:.3rem;left:calc(-.35rem - 8px)}
	.counters__inner{grid-template-columns:1fr}
	.counter{border-left:0;border-top:1px solid rgba(244,241,234,.16);padding:1.25rem 0;flex-direction:row;align-items:baseline;gap:1.25rem}
	.counter:first-child{border-top:0}
	.counter__num{font-size:calc(var(--fs-0) * 3.052);min-width:2ch}
	.work__item--2,.work__item--4{grid-column:1 / -1}
	.slider__track{aspect-ratio:1 / 1}
	.hero__actions .btn{flex:1 1 100%}
	.brand__name{font-size:1.25rem}
	.brand__sub{font-size:.7rem}
	.footer__legal{flex-direction:column}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0s!important}
	.js .rv,.hero__in{transform:none!important}
	.btn:active,a.gewerke__link:active{transform:none}
}