/* Fliesenhandwerk Heizung · Sanitär · Klima Andreas Hilger – Entwurf 4 von get.shifted
   Teil 1: Gerüst aus Entwurf 3 (Palette aus dem Logo gemessen). Teil 2: Bausteine der Unterseiten aus Entwurf 1. */
@font-face{font-family:'Space Grotesk';font-weight:300 700;font-display:swap;src:url('../fonts/SpaceGrotesk-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:100 700;font-display:swap;src:url('../fonts/IBMPlexSans-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-weight:400 700;font-display:swap;src:url('../fonts/Caveat-var.woff2') format('woff2')}

:root{
  /* Farben aus dem Logo gemessen: Navy #101828 · Rost #882818 · Stahl #7888A8 */
  --navy:#101828; --navy-2:#18233A; --navy-3:#26324A;
  --rost:#882818; --rost-hell:#D2644C;
  --stahl:#7888A8; --stahl-hell:#AFBBD2;
  --papier:#F4F3EF; --papier-2:#EAE8E2; --fuge:#D8D5CD;
  --ink:#101828; --ink-2:#4B5264; --ink-3:#7A8090;
  --disp:'Space Grotesk','Arial Narrow',Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --hand:'Caveat','Segoe Script',cursive;
  --maxw:1240px; --bar:72px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--papier);color:var(--ink);font:400 17px/1.65 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--rost);outline-offset:3px}

/* Typo */
.kick{font:500 .74rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.kick::before{content:"";width:18px;height:18px;flex:none;background:
  linear-gradient(var(--papier),var(--papier)) 50% 0/2px 100% no-repeat,
  linear-gradient(var(--papier),var(--papier)) 0 50%/100% 2px no-repeat,var(--navy)}
.kick.r::before{background:linear-gradient(var(--papier),var(--papier)) 50% 0/2px 100% no-repeat,linear-gradient(var(--papier),var(--papier)) 0 50%/100% 2px no-repeat,var(--rost)}
.dark .kick{color:var(--stahl-hell)}
.dark .kick::before{background:linear-gradient(var(--navy),var(--navy)) 50% 0/2px 100% no-repeat,linear-gradient(var(--navy),var(--navy)) 0 50%/100% 2px no-repeat,var(--stahl-hell)}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.02;hyphens:manual}
h2{font-size:clamp(34px,5.4vw,66px);margin:18px 0 0}
h3{font-size:clamp(22px,2.3vw,28px);line-height:1.12;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2);max-width:60ch;margin-top:20px}
.dark .lead{color:#C4CAD6}
.acc{color:var(--rost)}
.dark .acc{color:var(--rost-hell)}
.hand{font-family:var(--hand);font-weight:600;letter-spacing:0}
section{position:relative}
.sec{padding:clamp(80px,11vw,150px) 0}
.dark{background:var(--navy);color:var(--papier)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;font:600 16px/1 var(--body);text-decoration:none;border:2px solid var(--navy);transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn.p{background:var(--rost);border-color:var(--rost);color:#fff}
.btn.p:hover{background:#6E1F12;border-color:#6E1F12}
.btn.o:hover{background:var(--navy);color:var(--papier)}
.dark .btn.o{border-color:var(--papier);color:var(--papier)}
.dark .btn.o:hover{background:var(--papier);color:var(--navy)}
.btn svg{width:18px;height:18px;flex:none}

/* Platzhalter */
.ph{border:1.5px dashed var(--ink-3);color:var(--ink-2);padding:14px 16px;font-size:14.5px;line-height:1.5;background:rgba(255,255,255,.35)}
.ph b{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px;color:var(--rost)}
.dark .ph{border-color:var(--stahl);color:#C4CAD6;background:rgba(255,255,255,.03)}
.dark .ph b{color:var(--rost-hell)}
.tag{position:absolute;left:10px;bottom:10px;font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(16,24,40,.78);color:#fff;padding:6px 8px;pointer-events:none}

/* ====== Kopfleiste ====== */
.bar{position:fixed;inset:0 0 auto;height:var(--bar);z-index:50;background:rgba(244,243,239,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.s{border-bottom-color:var(--fuge)}
.bar .wrap{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:block;flex:none;line-height:0}
.brand img{height:54px;width:auto}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{font:500 15px/1 var(--body);text-decoration:none;padding:10px 12px;color:var(--ink-2);transition:color .2s}
.nav a:hover{color:var(--ink)}
.bar .tel{display:none}
.menu-btn{margin-left:auto;width:46px;height:46px;display:grid;place-items:center}
.menu-btn i{display:block;width:22px;height:2px;background:var(--navy);position:relative;transition:transform .3s,background .3s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--navy);transition:transform .3s,top .3s}
.menu-btn i::before{top:-7px}.menu-btn i::after{top:7px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{top:0;transform:rotate(45deg)}
.menu-open .menu-btn i::after{top:0;transform:rotate(-45deg)}
.mnav{position:fixed;inset:var(--bar) 0 0;z-index:49;background:var(--papier);padding:28px 20px 40px;display:flex;flex-direction:column;gap:2px;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;overflow:auto}
.menu-open .mnav{visibility:visible;opacity:1}
.mnav a{font:700 30px/1.15 var(--disp);letter-spacing:-.02em;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--fuge)}
.mnav .btn{margin-top:24px;font-size:17px}
@media(min-width:1000px){
  .nav{display:flex}
  .bar .tel{display:inline-flex;min-height:44px;padding:0 18px;font-size:15px}
  .menu-btn,.mnav{display:none}
}

/* ====== Hero ====== */
.hero{min-height:100svh;padding:calc(var(--bar) + 14px) 0 18px;display:flex}
.hero>.wrap{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:center}
.hero h1{font-size:clamp(36px,10.6vw,54px);margin-top:12px}
.hero h1 .ln{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.16em;margin-bottom:-.1em}
.hero h1 .ln>span{display:inline-block}
.hero h1 .u{position:relative;color:var(--rost)}
.hero h1 .u svg{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.2em;overflow:visible}
.hero h1 .u path{fill:none;stroke:var(--rost);stroke-width:5;stroke-linecap:round}
.hero .lead{margin-top:12px;font-size:16px;line-height:1.55}
.hero .lead .lg{display:none}
.hero-cta{display:flex;gap:10px;margin-top:18px}
.hero-cta .btn{flex:1 1 0;padding:0 14px}
.hero-cta .btn.p{flex-grow:1.4}
.dl{display:none}
@media(min-width:900px){.dl{display:inline}.ml{display:none}}
@media(min-width:420px){.hero-meta .dl{display:flex}}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font:500 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:7px;height:7px;background:var(--stahl)}
.hero-meta span:first-child::before{background:var(--rost)}

/* Die Wand: Kundenfoto hinter Fliesenraster */
.wall{--c:4;--r:2;--f:7px;position:relative;height:clamp(110px,calc(100svh - 500px),320px);overflow:hidden;background:var(--fuge)}
.wall-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;will-change:transform}
.wall-grid,.wall-spec{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));grid-template-rows:repeat(var(--r),minmax(0,1fr))}
.wall-grid i{background:var(--papier-2);transform-origin:50% 100%;display:none}
.js-anim .wall-grid i{display:block}
@media(max-width:899px){.wall-grid i:nth-child(n+9){display:none!important}}
.wall-spec b{display:grid;place-items:center}
.wall-spec b svg{width:38%;height:auto;max-width:74px;fill:#fff}
.t-flame{background:var(--rost);grid-area:1/2}
.t-drop{background:var(--stahl);grid-area:2/4}
.wall-fugen{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--papier) var(--f),transparent var(--f)),linear-gradient(to bottom,var(--papier) var(--f),transparent var(--f));
  background-size:calc(100% / var(--c)) 100%,100% calc(100% / var(--r));
  box-shadow:inset calc(var(--f) * -1) calc(var(--f) * -1) 0 var(--papier)}
.wall .tag{left:auto;right:calc(var(--f) + 8px);bottom:calc(var(--f) + 8px)}
@media(min-width:900px){
  .hero{padding-top:calc(var(--bar) + 30px);padding-bottom:40px}
  .hero>.wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,80px);align-items:center}
  .hero h1{font-size:clamp(48px,min(5.6vw,10svh),88px)}
  .hero .lead{font-size:19px;margin-top:24px}
  .hero .lead .lg{display:inline}
  .hero-cta{margin-top:32px}
  .hero-cta .btn{flex:0 0 auto}
  .hero-meta{margin-top:28px}
  .wall{--c:3;--r:4;--f:9px;height:auto;aspect-ratio:3/4;max-height:calc(100svh - var(--bar) - 70px);justify-self:end;width:100%}
  .t-flame{grid-area:2/1}
  .t-drop{grid-area:3/3}
  .wall-img{object-position:50% 50%}
}

/* ====== Zahlenband ====== */
.band{background:var(--navy);color:var(--papier);padding:30px 0}
.band ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.band li{border-left:2px solid var(--navy-3);padding-left:14px}
.band b{display:block;font:700 clamp(30px,4vw,46px)/1 var(--disp);letter-spacing:-.02em}
.band li:nth-child(1) b{color:var(--rost-hell)}
.band li:nth-child(4) b{color:var(--stahl-hell)}
.band span{display:block;font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#AAB2C2;margin-top:8px}
@media(min-width:900px){.band{padding:40px 0}.band ul{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ====== Gewerke ====== */
.gw-head{max-width:820px}
.gw{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,6vw,80px)}
.gw-stage{display:none}
.gw-card{padding:34px 0;border-top:1px solid var(--fuge)}
.gw-card:last-child{border-bottom:1px solid var(--fuge)}
.gw-top{display:flex;align-items:center;gap:16px}
.gw-ico{width:64px;height:64px;flex:none}
.gw-no{font:500 .74rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.gw-card h3{margin-top:4px}
.gw-card p{color:var(--ink-2);margin-top:16px;max-width:58ch}
.gw-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:18px}
.gw-list li{padding:9px 0 9px 22px;border-bottom:1px dashed var(--fuge);position:relative;font-size:16px;line-height:1.45}
.gw-list li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;background:var(--navy)}
.gw-card[data-i="1"] .gw-list li::before{background:var(--rost)}
.gw-card[data-i="2"] .gw-list li::before{background:var(--stahl)}
.gw-card[data-i="3"] .gw-list li::before{background:var(--ink-3)}
.gw-list .hl{font-weight:600}
.gw-list .hl em{font-style:normal;font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:#fff;padding:4px 6px;margin-left:6px;vertical-align:2px}
.gw-sub{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:22px}
.gw-pic{position:relative;margin-top:22px;aspect-ratio:4/3;overflow:hidden;background:var(--papier-2)}
.gw-pic img{width:100%;height:100%;object-fit:cover}
.gw-pic.ph{display:flex;flex-direction:column;justify-content:center;aspect-ratio:auto;min-height:150px}
@media(min-width:760px){.gw-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
@media(min-width:1000px){
  .gw{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}
  .gw-stage{display:block;position:sticky;top:calc(var(--bar) + 40px);height:calc(100svh - var(--bar) - 80px);max-height:640px}
  .gw-ico{display:none}
  .gw-card{padding:60px 0;min-height:70svh}
  .gw-card:first-child{border-top:0;padding-top:0}
}
.stage-tile{position:absolute;inset:0 0 70px 0;display:grid;place-items:center}
.stage-tile svg{width:100%;height:100%;max-height:460px}
.stage-tile+.stage-tile{visibility:hidden;opacity:0}
.stage-cap{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--fuge)}
.stage-cap b{font:700 22px/1 var(--disp);letter-spacing:-.01em}
.stage-cap span{font:500 .72rem/1 var(--mono);letter-spacing:.12em;color:var(--ink-3);margin-left:auto}
.stage-dots{display:flex;gap:6px}
.stage-dots i{width:12px;height:12px;background:var(--fuge)}
.stage-dots i.on{background:var(--navy)}

.einehand{margin-top:clamp(40px,6vw,70px);display:grid;grid-template-columns:minmax(0,1fr);gap:18px;background:var(--papier-2);padding:clamp(24px,4vw,44px)}
.einehand blockquote{font:600 clamp(21px,2.4vw,30px)/1.25 var(--disp);letter-spacing:-.015em}
.einehand cite{display:block;font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:14px;font-style:normal}
.einehand ul{display:grid;gap:10px;align-content:start}
.einehand li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.einehand li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:var(--rost);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
@media(min-width:900px){.einehand{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center}}

/* ====== Kleinstfuge ====== */
.fg-track{position:relative}
.fg-sticky{padding:clamp(70px,9vw,120px) 0}
.fg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.fg-read{display:flex;align-items:flex-end;gap:14px;margin-top:22px}
.fg-read b{font:700 clamp(46px,7vw,84px)/.9 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:4.1ch}
.fg-read b small{font-size:.42em;letter-spacing:0;margin-left:.12em}
.fg-read span{font:500 .72rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl-hell);padding-bottom:6px}
.fg-read span.k{color:var(--rost-hell)}
.field{--g:18px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--g);padding:var(--g);background:#3A4458;aspect-ratio:3/2;width:100%}
.field i{background:var(--noise),linear-gradient(135deg,#D9D6CF 0%,#C9C5BD 55%,#D2CEC6 100%);background-size:160px 160px,100% 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.field i:nth-child(2){background:var(--noise),linear-gradient(160deg,#D2CEC6,#C4C0B7 60%,#D6D2CA)}
.field i:nth-child(4){background:var(--noise),linear-gradient(110deg,#CFCBC3,#DAD7D0 50%,#C8C4BB)}
.field i:nth-child(6){background:var(--noise),linear-gradient(200deg,#D6D2CA,#C6C2B9)}
.field .mass{position:absolute;left:calc(33.333% + var(--g) / 3);top:-2px;width:0;height:0}
.fg-note{font:500 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8C95A8;margin-top:10px}
.fg-points{display:grid;gap:0;margin-top:6px}
.fg-points li{padding:14px 0;border-top:1px solid var(--navy-3);display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.fg-points li b{font:700 18px/1.25 var(--disp);letter-spacing:-.01em}
.fg-points li span{color:#B9C0CE;font-size:15.5px;line-height:1.5}
.fg-quote{margin-top:clamp(40px,6vw,70px);display:grid;grid-template-columns:minmax(0,1fr);gap:20px;border-top:1px solid var(--navy-3);padding-top:clamp(30px,4vw,50px)}
.fg-quote blockquote{font:600 clamp(22px,2.8vw,36px)/1.22 var(--disp);letter-spacing:-.015em}
.fg-quote cite{font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stahl-hell);font-style:normal}
@media(min-width:900px){
  .fg-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:center}
  .fg-quote{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end}
}
.js-anim .fg-track{height:260vh}
.js-anim .fg-sticky{position:sticky;top:var(--bar);min-height:calc(100svh - var(--bar));display:flex;align-items:center;padding:28px 0}
.js-anim .fg-sticky>.wrap{width:100%}
@media(max-width:899px){
  .js-anim .fg-track{height:230vh}
  .js-anim .fg-sticky{align-items:flex-start;padding-top:22px}
  .js-anim .fg-sticky .lead{display:none}
  .js-anim .fg-sticky h2{font-size:clamp(30px,8.6vw,40px)}
  .js-anim .fg-sticky .fg-read{margin-top:14px}
  .js-anim .fg-grid{gap:16px}
  .js-anim .fg-points li{padding:9px 0}
  .js-anim .fg-points li span{display:none}
  .js-anim .field{aspect-ratio:auto;height:clamp(150px,30svh,240px)}
}

/* ====== HILGER ====== */
.ak-head{max-width:760px}
.ak{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--fuge)}
.ak li{display:grid;grid-template-columns:clamp(62px,15vw,190px) minmax(0,1fr);gap:clamp(14px,3vw,48px);padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--fuge);align-items:center}
.ak .L{position:relative;font:700 clamp(74px,17vw,210px)/.8 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--navy);text-align:center}
.ak .L i{position:absolute;inset:0;font-style:normal;color:var(--navy);-webkit-text-stroke:0;clip-path:inset(0 0 0 0)}
.ak li:nth-child(1) .L i{color:var(--rost)}
.ak li:nth-child(6) .L i{color:var(--stahl)}
.ak .W{font-family:var(--hand);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1;color:var(--navy);display:inline-block;clip-path:inset(0 0 0 0)}
.ak p{color:var(--ink-2);margin-top:8px;max-width:62ch;font-size:16.5px}
.js-anim .ak .L i{clip-path:inset(100% 0% 0% 0%)}
.js-anim .ak .W{clip-path:inset(-10% 100% -20% 0%)}
.ak-foot{margin-top:24px;font-size:15px;color:var(--ink-3);max-width:70ch}
@media(min-width:900px){.ak p{font-size:17.5px}}

/* ====== Philosophie ====== */
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.ph-pic{position:relative;overflow:hidden;aspect-ratio:1/1;max-width:560px}
.ph-pic img{width:100%;height:100%;object-fit:cover;will-change:transform}
.blatt{background:#FBFAF7;color:var(--ink);padding:clamp(24px,3.4vw,44px);position:relative;box-shadow:0 0 0 10px #3B4254,0 0 0 11px #56607A}
.blatt h3{font-size:clamp(20px,2vw,24px)}
.blatt hr{border:0;border-top:1.5px solid var(--navy);margin:14px 0 18px}
.blatt p,.blatt li{font-size:15.5px;line-height:1.5}
.blatt p{margin-top:12px}
.blatt p:first-of-type{margin-top:0}
.blatt ul{margin-top:8px;display:grid;gap:4px}
.blatt li{padding-left:18px;position:relative}
.blatt li::before{content:"–";position:absolute;left:0}
.blatt .gap{display:inline-block;border-bottom:1.5px dashed var(--ink-3);color:var(--ink-3);font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 4px 2px;vertical-align:1px}
.blatt .sig{margin-top:22px;font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-top:1px dashed var(--fuge);padding-top:14px}
.ph-note{font-size:14.5px;color:#AAB2C2;margin-top:20px;max-width:60ch}
@media(min-width:900px){.ph-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.ph-pic{position:sticky;top:calc(var(--bar) + 40px)}}

/* ====== Referenzen ====== */
.ref-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.gal{columns:2;column-gap:10px;margin-top:clamp(36px,5vw,60px)}
.gal figure{break-inside:avoid;margin:0 0 10px;position:relative;overflow:hidden;background:var(--papier-2);cursor:zoom-in}
.gal img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.gal figure:hover img{transform:scale(1.04)}
.gal figure.more{display:none}
.gal.all figure.more{display:block}
.gal-more{margin-top:24px;display:flex;justify-content:center}
.gal.all+.gal-more{display:none}
@media(min-width:760px){.gal{columns:3;column-gap:14px}.gal figure{margin-bottom:14px}}
@media(min-width:1100px){.gal{columns:4}}

/* ====== Team + Jobs ====== */
.team-pic{position:relative;overflow:hidden;margin-top:clamp(36px,5vw,60px)}
.team-pic img{width:100%;height:auto;will-change:transform}
.team-pic .tag{left:auto;right:10px}
.jobs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,70px);margin-top:clamp(50px,7vw,90px)}
.roles{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:22px}
.roles li{background:var(--navy-2);padding:18px 18px 18px 64px;position:relative;font:700 19px/1.25 var(--disp);letter-spacing:-.01em;border-left:4px solid var(--stahl)}
.roles li:nth-child(2),.roles li:nth-child(3){border-left-color:var(--rost-hell)}
.roles li small{display:block;font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#98A2B6;margin-top:6px}
.roles li::before{content:attr(data-n);position:absolute;left:18px;top:18px;font:500 .78rem/1 var(--mono);color:#98A2B6}
.benefits{display:grid;gap:0;margin-top:18px}
.benefits li{padding:11px 0 11px 28px;border-bottom:1px solid var(--navy-3);position:relative;color:#D4D9E3;font-size:16px;line-height:1.45}
.benefits li::before{content:"";position:absolute;left:0;top:15px;width:14px;height:14px;background:var(--rost-hell);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.jobs-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.azubi{display:flex;gap:18px;align-items:center;margin-top:26px;padding:18px;border:1px solid var(--navy-3)}
.azubi b{font:700 26px/1 var(--disp);color:var(--rost-hell);flex:none}
.azubi p{font-size:15px;color:#C4CAD6;line-height:1.45}
.fam{position:relative;overflow:hidden;margin-top:30px;aspect-ratio:16/9}
.fam img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media(min-width:900px){.jobs{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ====== Nachweise ====== */
.partner-h{margin-top:clamp(60px,8vw,100px);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.partner-h h3{font-size:clamp(24px,2.6vw,32px)}
.partner-h p{font-size:15px;color:var(--ink-3)}
.partner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--fuge);border:1px solid var(--fuge);margin-top:20px}
.partner li{background:#fff;aspect-ratio:3/2;display:grid;place-items:center;padding:12px}
.partner img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.partner li:hover img{filter:none;opacity:1}
@media(min-width:760px){.partner{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ====== Kontakt ====== */
.kt{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,80px);margin-top:clamp(36px,5vw,60px)}
.kt-list{display:grid;gap:0}
.kt-list li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--fuge);font-size:16.5px}
.kt-list li:first-child{border-top:1px solid var(--fuge)}
.kt-list span{font:500 .7rem/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kt-list a{text-decoration:none;font-weight:600}
.kt-list a:hover{color:var(--rost)}
.kt-list small{display:block;font-size:13px;color:var(--ink-3);font-weight:400}
.kt .ph{margin-top:18px}
.kt-hint{font-size:14.5px;color:var(--ink-2);margin-top:18px;line-height:1.55;border-left:3px solid var(--stahl);padding-left:14px}
.form{background:#fff;border:1px solid var(--fuge);padding:clamp(20px,3vw,36px)}
.form h3{font-size:24px}
.form .sub{font-size:14.5px;color:var(--ink-3);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;border:0}
.chips legend{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;float:left;width:100%}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--fuge);font-size:15px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chips input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--rost);outline-offset:2px}
.fl{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.fl label{display:grid;gap:6px;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fl input,.fl textarea{font:16px/1.4 var(--body);color:var(--ink);border:1.5px solid var(--fuge);background:var(--papier);padding:12px 14px;width:100%;border-radius:0;text-transform:none;letter-spacing:0}
.fl input:focus,.fl textarea:focus{border-color:var(--navy);outline:none;background:#fff}
.fl textarea{min-height:110px;resize:vertical}
@media(min-width:600px){.fl{grid-template-columns:repeat(2,minmax(0,1fr))}.fl .w{grid-column:1/-1}}
.form .btn{width:100%;margin-top:18px}
.form .fine{font-size:13px;color:var(--ink-3);margin-top:12px;line-height:1.5}
@media(min-width:900px){.kt{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.van{position:relative;margin-top:clamp(50px,7vw,90px);overflow:hidden;background:#000}
.van img{width:100%;height:auto;will-change:transform}
.van figcaption{font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:10px;background:var(--papier);position:relative}

/* ====== Footer ====== */
.foot{background:var(--navy);color:#C4CAD6;padding:64px 0 110px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.foot img{width:220px;height:auto}
.foot h4{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8994A8;margin-bottom:12px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot li{padding:3px 0}
.foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--navy-3);display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:13.5px;color:#8994A8}
.draft{font:500 .68rem/1 var(--mono);letter-spacing:.06em;background:var(--rost);color:#fff;padding:7px 10px}
@media(min-width:900px){.foot{padding-bottom:64px}.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ====== Handy: Anrufleiste + nach oben ====== */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 56px;gap:1px;background:var(--navy-3);padding-bottom:env(safe-area-inset-bottom)}
.callbar a,.callbar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;background:var(--navy);color:#fff;font:600 15.5px/1 var(--body);text-decoration:none}
.callbar a.p{background:var(--rost)}
.callbar svg{width:18px;height:18px}
@media(min-width:1000px){.callbar{display:none}}
.totop{position:fixed;right:22px;bottom:22px;z-index:40;width:50px;height:50px;background:var(--navy);color:#fff;display:none;place-items:center;opacity:0;visibility:hidden}
.totop svg{width:20px;height:20px}
@media(min-width:1000px){.totop{display:grid}}

/* ====== Lupe ====== */
.lb{position:fixed;inset:0;z-index:90;background:rgba(10,15,26,.94);display:grid;place-items:center;padding:56px 12px 70px;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.lb.on{visibility:visible;opacity:1}
.lb img{max-width:100%;max-height:calc(100svh - 140px);width:auto;height:auto;object-fit:contain;background:#fff}
.lb .x,.lb .pv,.lb .nx{position:absolute;width:48px;height:48px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08)}
.lb .x{top:10px;right:10px}
.lb .pv{left:10px;top:50%;transform:translateY(-50%)}
.lb .nx{right:10px;top:50%;transform:translateY(-50%)}
.lb svg{width:22px;height:22px}
.lb p{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#C4CAD6;font:500 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:0 70px}

/* ====== Handwerkspartner ====== */
.hwp{margin-top:clamp(40px,6vw,64px)}
.hwp ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hwp li{border:1.5px solid var(--fuge);background:#fff;padding:9px 13px;font-size:15px;line-height:1.3}

/* ====== Vorher / Nachher ====== */
.vn{background:var(--papier-2)}
.vn-sticky{padding:clamp(70px,9vw,120px) 0}
.vn-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
.vn-steps{margin-top:26px;display:grid;gap:0}
.vn-steps li{padding:16px 0;border-top:1px solid var(--fuge);display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px}
.vn-steps i{font:500 .74rem/1.9 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--rost);grid-row:span 2}
.vn-steps b{font:700 clamp(19px,1.9vw,24px)/1.2 var(--disp);letter-spacing:-.01em}
.vn-steps span{color:var(--ink-2);font-size:16px;line-height:1.5}
.vn-now{display:none}
.vn-stage{position:relative;overflow:hidden;background:#1d1d1d;aspect-ratio:4/5;width:100%}
.vn-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vn-stage img[data-s="0"]{z-index:3}.vn-stage img[data-s="1"]{z-index:2}.vn-stage img[data-s="2"]{z-index:1}
.vn-line{position:absolute;top:0;bottom:0;left:0;width:4px;margin-left:-2px;background:var(--rost);z-index:5;opacity:0;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.vn-lbl{position:absolute;left:12px;top:12px;z-index:6;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--navy);color:#fff;padding:8px 10px}
.vn-stage .tag{z-index:6}
html:not(.js-anim) .vn-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;aspect-ratio:auto;background:none}
html:not(.js-anim) .vn-stage img{position:static;aspect-ratio:4/5}
html:not(.js-anim) .vn-line,html:not(.js-anim) .vn-lbl{display:none}
.js-anim .vn-track{height:330vh}
.js-anim .vn-sticky{position:sticky;top:var(--bar);min-height:calc(100svh - var(--bar));display:flex;align-items:center;padding:24px 0}
.js-anim .vn-sticky>.wrap{width:100%}
@media(min-width:900px){
  .vn-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px)}
  .js-anim .vn-stage{height:min(calc(100svh - var(--bar) - 64px),780px);width:auto;justify-self:center}
}
@media(max-width:899px){
  .js-anim .vn-track{height:290vh}
  .js-anim .vn-sticky{align-items:flex-start;padding-top:18px}
  .js-anim .vn h2{font-size:clamp(28px,8vw,38px);margin-top:10px}
  .js-anim .vn-grid{gap:12px}
  .js-anim .vn-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
  .js-anim .vn-steps li{display:block;padding:8px 0 0;border-top:3px solid var(--navy)}
  .js-anim .vn-steps i,.js-anim .vn-steps span{display:none}
  .js-anim .vn-steps b{font-size:15px}
  .js-anim .vn-now{display:block;font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:10px;min-height:2.9em}
  .js-anim .vn-stage{height:min(clamp(260px,calc(100svh - var(--bar) - 290px),620px),calc((100vw - 40px) * 1.25));width:auto;justify-self:center}
}
.vn-after{padding:0 0 clamp(80px,10vw,130px)}
.vn-quote{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;border-top:1px solid var(--fuge);padding-top:clamp(30px,4vw,50px)}
.vn-quote blockquote{font:600 clamp(22px,2.8vw,34px)/1.22 var(--disp);letter-spacing:-.015em}
.vn-quote cite{font:500 .72rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.cmps{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:clamp(36px,5vw,60px)}
.cmp{position:relative;aspect-ratio:4/5;overflow:hidden;--x:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;background:#1d1d1d}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cmp .top{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .h{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.cmp .h b{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--rost);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cmp .h svg{width:22px;height:22px;color:#fff}
.cmp .cl{position:absolute;top:12px;z-index:2;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(16,24,40,.8);color:#fff;padding:7px 9px;pointer-events:none}
.cmp .cl.v{left:12px}.cmp .cl.n{right:12px;background:var(--rost)}
.cmp input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cmp:focus-within{outline:2px solid var(--rost);outline-offset:3px}
.cmps figcaption{font-size:15.5px;color:var(--ink-2);margin-top:12px;line-height:1.45}
.cmps figcaption b{color:var(--ink);font-family:var(--disp)}
.vn-ig{margin-top:26px;font-size:15px;color:var(--ink-3)}
.vn-ig a{color:var(--ink);font-weight:600}
@media(min-width:760px){.cmps{grid-template-columns:repeat(2,minmax(0,1fr))}.vn-quote{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end}}

/* ====== Probewohnen ====== */
.pw{background:var(--papier-2);overflow:hidden}
.pw-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.pw-list{margin-top:22px;display:grid;gap:10px}
.pw-list li{display:flex;gap:12px;font-size:16px;line-height:1.45}
.pw-list li::before{content:"";flex:none;width:12px;height:12px;margin-top:6px;background:var(--stahl)}
.pw-card{margin-top:24px;background:#fff;border:1px solid var(--fuge);padding:18px 20px;display:grid;gap:4px}
.pw-card b{font:700 18px/1.25 var(--disp)}
.pw-card span{font-size:15px;color:var(--ink-2)}
.pw-card a{font-weight:600;color:var(--rost);text-decoration:none;margin-top:6px}
.pw-more{margin-top:14px;font-size:15px;color:var(--ink-2)}
.pw-more a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.pw-more a:hover{color:var(--rost)}
.pw .ph{margin-top:14px}
.plan{position:relative;aspect-ratio:4/3;background:#FBFAF7;border:1px solid var(--fuge);overflow:hidden;
  background-image:linear-gradient(rgba(120,136,168,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(120,136,168,.14) 1px,transparent 1px);background-size:24px 24px}
.plan svg{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 55%}
.plan-read{position:absolute;left:12px;top:12px;z-index:2;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--navy);color:#fff;padding:8px 10px}
.plan-read b{color:var(--rost-hell);font-weight:500}
.plan-note{font:500 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
@media(min-width:900px){.pw-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ====== Einblenden (nur mit JS) ====== */
.js-anim .rv{opacity:0;transform:translateY(26px)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ================================================================
   TEIL 2 – Bausteine der Unterseiten (aus Entwurf 1 übernommen und
   auf das Gerüst von Entwurf 3 angepasst)
   ================================================================ */

/* Aliase: die Bausteine aus Entwurf 1 sprechen diese Namen */
:root{
  --flaeche:var(--papier-2); --linie:var(--fuge);
  --tx:var(--ink); --tx-mut:var(--ink-2); --tx-inv:#EDEEF1; --tx-inv-mut:#A3ABBB;
  --fliese-1:#B7BCC6; --fliese-2:#99A0AC; --fliese-3:#7B8390;
  --rost-lt:var(--rost-hell); --stahl-lt:var(--stahl-hell);
}

/* ---------- Kopfleiste mit neun Seiten ---------- */
.nav a{font-size:14.5px;padding:10px 9px}
.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--rost)}
.mnav a[aria-current=page]{color:var(--rost)}
.mnav .mfoot{margin-top:22px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.mnav .mfoot a{font:inherit;border:0;padding:0;display:inline;color:var(--ink)}
@media(min-width:1000px){
  .nav,.bar .tel{display:none}
  .menu-btn{display:grid}
  .mnav{display:flex}
}
@media(min-width:1240px){
  .nav{display:flex}
  .bar .tel{display:inline-flex}
  .menu-btn,.mnav{display:none}
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.phead{background:var(--navy);color:var(--papier);padding:calc(var(--bar) + clamp(30px,5vw,64px)) 0 clamp(40px,5.4vw,72px);position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-40px;top:calc(var(--bar) + 20px);width:clamp(160px,26vw,360px);aspect-ratio:1;opacity:.1;pointer-events:none;
  background:linear-gradient(var(--papier),var(--papier)) 33.3% 0/2px 100% no-repeat,linear-gradient(var(--papier),var(--papier)) 66.6% 0/2px 100% no-repeat,
  linear-gradient(var(--papier),var(--papier)) 0 33.3%/100% 2px no-repeat,linear-gradient(var(--papier),var(--papier)) 0 66.6%/100% 2px no-repeat}
.phead .wrap{position:relative;z-index:1}
.crumb{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#98A2B6;margin-bottom:22px}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:#fff}
.phead h1{font-size:clamp(38px,6.2vw,78px);margin-top:14px}
.phead .lead{max-width:62ch}
.phead .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---------- Abschnittskopf ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:clamp(28px,5vw,54px)}
.shead h2{margin-top:14px}
.shead .lead{margin-top:0}
@media(min-width:900px){.shead{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:end}}
.sec.alt{background:var(--papier-2)}

/* ---------- Leistungskarten ---------- */
.karten{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;background:var(--fuge);border:1px solid var(--fuge)}
@media(min-width:700px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.karten>div{background:var(--papier);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.sec.alt .karten>div{background:#FBFAF7}
.karten h3{font-size:19px;line-height:1.25}
.karten p{font-size:15.5px;color:var(--ink-2);line-height:1.5}
.gtag{display:inline-block;align-self:flex-start;font:500 .62rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--rost);border:1px solid var(--fuge);padding:5px 8px}
.gtag.neu{background:var(--rost);color:#fff;border-color:var(--rost)}
.ph-mark{display:inline-block;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rost);border:1px dashed var(--rost);padding:4px 7px;vertical-align:middle}
.dark .ph-mark{color:var(--rost-hell);border-color:var(--rost-hell)}
.fcap{margin-top:10px;font:500 .7rem/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.dark .fcap{color:#98A2B6}
.pic{position:relative;overflow:hidden;margin:0}
.pic img{width:100%;height:auto}

/* ---------- Startseite: Links aus den Gewerke-Karten ---------- */
.gw-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 16px/1 var(--body);color:var(--navy);text-decoration:none;border-bottom:2px solid var(--rost);padding-bottom:6px;transition:gap .25s}
.gw-link:hover{gap:12px}
.gw-link svg{width:16px;height:16px}

/* ---------- Startseite: Anrisse ---------- */
.teaser{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:center}
@media(min-width:900px){.teaser{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.teaser .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chipreihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chipreihe span{border:1.5px solid var(--navy-3);padding:9px 12px;font-size:15px;line-height:1.3}
.cta-band{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:end}
@media(min-width:900px){.cta-band{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Knöpfe für Arbeitsgänge (Ausbau: Schichten) ---------- */
.vbtns{display:flex;flex-wrap:wrap;gap:8px}
.vbtn{font:600 15px/1 var(--body);padding:12px 16px;border:1.5px solid var(--fuge);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.vbtn:hover{border-color:var(--navy)}
.vbtn[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.vnote{margin-top:22px;font-size:15.5px;color:var(--ink-2);max-width:70ch}

/* ---------- Thermostat (Heizung) ---------- */
.thermo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,48px);align-items:center}
@media(min-width:860px){.thermo{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.thermo-dial{position:relative;max-width:320px;margin-inline:auto;width:100%}
.thermo-dial svg{width:100%;height:auto;display:block}
.thermo-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;pointer-events:none;transform:translateY(34%)}
.thermo-val b{font:700 clamp(32px,7vw,46px)/1 var(--disp);color:var(--rost);font-variant-numeric:tabular-nums}
.thermo-val span{font:500 .9rem/1 var(--mono);color:var(--ink-2)}
.thermo input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;margin:8px 0}
.thermo input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--fuge)}
.thermo input[type=range]::-moz-range-track{height:2px;background:var(--fuge)}
.thermo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;background:var(--rost);margin-top:-12px;border:none;border-radius:0}
.thermo input[type=range]::-moz-range-thumb{width:26px;height:26px;background:var(--rost);border:none;border-radius:0}
.thermo-skala{display:flex;justify-content:space-between;font:500 .7rem/1 var(--mono);color:var(--ink-3);margin-top:6px}
.boden{position:relative;margin-top:22px;height:120px;background:var(--papier-2);border:1px solid var(--fuge);overflow:hidden}
.boden-warm{position:absolute;inset:0;opacity:0;background:linear-gradient(to top,rgba(136,40,24,.55),rgba(136,40,24,.10) 62%,transparent)}
.boden-rohre{position:absolute;left:0;right:0;bottom:26px;height:26px;background-image:radial-gradient(circle at 13px 13px,var(--fliese-2) 0 9px,transparent 10px);background-size:44px 26px;background-repeat:repeat-x}
.boden-fliesen{position:absolute;left:0;right:0;top:0;height:26px;background:var(--fliese-1);border-bottom:2px solid var(--papier);background-image:linear-gradient(90deg,var(--papier) 0 2px,transparent 2px);background-size:70px 100%}

/* ---------- Schichtaufbau (Ausbau) ----------
   Die Lagen liegen im DOM von unten nach oben (roh -> Ständerwerk -> Platte ->
   Spachtel -> Anstrich). Spätere Geschwister malen über früheren. */
.schicht-block{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,44px);align-items:center}
@media(min-width:880px){.schicht-block{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.schicht{position:relative;aspect-ratio:16/10;background:var(--navy);overflow:hidden;border:1px solid var(--fuge)}
.schicht .lage{position:absolute;inset:0;opacity:0;pointer-events:none}
.schicht .l-roh{opacity:1;background:repeating-linear-gradient(0deg,#2A3346 0 2px,transparent 2px 26px),repeating-linear-gradient(90deg,#2A3346 0 2px,transparent 2px 26px),var(--navy)}
.schicht .l-staender{background:repeating-linear-gradient(90deg,var(--fliese-3) 0 9px,transparent 9px 88px),linear-gradient(var(--fliese-3) 0 0) top/100% 9px no-repeat,linear-gradient(var(--fliese-3) 0 0) bottom/100% 9px no-repeat}
.schicht .l-platte{background:#C9C6BE}
.schicht .l-spachtel{background:#DEDBD4}
.schicht .l-anstrich{background:#7888A8}   /* helles Blau aus dem Logo (Tropfen), giuci 29.09.2026 */
.schicht-stand{margin-top:16px;font:500 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.schicht-stand b{color:var(--rost);font-weight:500}

/* ---------- Urkunden ---------- */
.zgal{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;background:var(--fuge);border:1px solid var(--fuge)}
@media(min-width:720px){.zgal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.zgal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zkarte{margin:0;background:var(--papier);display:flex;flex-direction:column}
.zkarte a{display:block;background:#fff;padding:18px 18px 0;position:relative;cursor:zoom-in}
.zkarte img{width:100%;height:auto;object-fit:contain;max-height:340px;box-shadow:0 1px 0 var(--fuge);transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.zkarte a:hover img{transform:translateY(-4px)}
.zkarte figcaption{padding:18px;display:flex;flex-direction:column;gap:7px}
.zkarte .jahr{font:500 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--rost)}
.zkarte h3{font-size:18px;line-height:1.25}
.zkarte .von{font:500 .7rem/1.4 var(--mono);color:var(--ink-3)}
.zkarte p{font-size:15px;color:var(--ink-2);line-height:1.5}

/* ---------- Partner ---------- */
.praster{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;background:var(--fuge);border:1px solid var(--fuge)}
@media(min-width:520px){.praster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:860px){.praster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1140px){.praster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pkarte{background:#fff;padding:20px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);transition:background .2s}
a.pkarte:hover{background:var(--papier-2)}
.pkarte img{width:100%;max-width:190px;height:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.pkarte:hover img{filter:none;opacity:1}
.pkarte span{margin-top:auto;display:block}
.pkarte b{display:block;font:700 16px/1.2 var(--disp)}
.pkarte small{display:block;margin-top:4px;font:500 .64rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hinweisbox{border-left:3px solid var(--rost);padding-left:18px;margin-bottom:clamp(28px,4vw,44px);max-width:76ch;font-size:15.5px;color:var(--ink-2)}

/* ---------- Der Betrieb ---------- */
.philo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start}
@media(min-width:900px){.philo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.philo figure{position:sticky;top:calc(var(--bar) + 30px)}}
.philo figure{margin:0}
.philo-text p{font:500 clamp(18px,1.8vw,22px)/1.35 var(--disp);letter-spacing:-.015em;margin:0 0 16px;padding-left:16px;border-left:2px solid var(--stahl)}
.staerken{margin:10px 0 0;display:grid;gap:9px}
.staerken li{position:relative;padding-left:22px;font-size:16px;color:var(--ink-2)}
.staerken li::before{content:"–";position:absolute;left:0;color:var(--rost);font-weight:600}
.philo-schluss{margin-top:16px;font:700 18px/1.3 var(--disp)}
.philo-schluss .gap{display:inline-block;border-bottom:1.5px dashed var(--ink-3);color:var(--ink-3);font:500 .64rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 4px 2px;vertical-align:2px}
.zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:rgba(237,238,241,.14);border:1px solid rgba(237,238,241,.14)}
@media(min-width:1000px){.zahlen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zahlen div{background:var(--navy-2);padding:22px}
.zahlen b{display:block;font:700 clamp(32px,5.6vw,48px)/1 var(--disp);letter-spacing:-.03em;color:var(--stahl-hell);font-variant-numeric:tabular-nums}
.zahlen span{display:block;margin-top:8px;font:500 .66rem/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#A3ABBB}
.zitate{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:clamp(28px,4vw,46px);background:rgba(237,238,241,.14);border:1px solid rgba(237,238,241,.14)}
@media(min-width:860px){.zitate{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zitate blockquote{background:var(--navy-2);padding:24px}
.zitate q{font:500 clamp(18px,2.2vw,22px)/1.3 var(--disp);letter-spacing:-.02em;quotes:"»" "«";color:#EDEEF1}
.zitate cite{display:block;margin-top:12px;font:500 .66rem/1.4 var(--mono);font-style:normal;color:#A3ABBB}

/* ---------- Kontakt ---------- */
.hinweis{background:var(--papier-2);padding:clamp(20px,2.6vw,28px);border-left:3px solid var(--rost)}
.hinweis h3{font-size:19px;margin-bottom:10px}
.hinweis p{font-size:15.5px;color:var(--ink-2)}
.kliste{margin-top:24px;display:grid;gap:16px}
.kliste>a,.kliste>div{display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.kliste svg{width:19px;height:19px;flex:none;margin-top:4px;color:var(--navy)}
.kliste b{display:block;font-weight:600}
.kliste small{display:block;color:var(--ink-2);font-size:14px;line-height:1.45}
.kliste a:hover b{color:var(--rost)}

/* ---------- Footer: Impressum aufklappbar ---------- */
.foot details{margin-top:34px;border-top:1px solid var(--navy-3);padding-top:16px}
.foot summary{cursor:pointer;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:6px 0}
.foot .imp{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:16px;font-size:14px}
@media(min-width:760px){.foot .imp{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot .imp h4{margin-bottom:8px}
.foot .imp .ph-mark{color:var(--stahl-hell);border-color:var(--stahl-hell)}

/* ---------- Feinschliff ---------- */
@media(min-width:900px) and (max-width:1199px){.roles{grid-template-columns:minmax(0,1fr)}}
.js-anim .vn-stage{max-width:100%}

/* ---------- Projekte: Komplettbad und Wintergarten ---------- */
.chips-hl{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips-hl span{background:#fff;border:1.5px solid var(--fuge);padding:8px 12px;font-size:15px;line-height:1.3}
.wg{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(28px,4vw,44px)}
@media(min-width:900px){.wg{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.schritte{counter-reset:s;display:grid}
.schritte li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;padding:13px 0;border-top:1px solid var(--fuge)}
.schritte li:last-child{border-bottom:1px solid var(--fuge)}
.schritte li::before{content:counter(s,decimal-leading-zero);font:500 .74rem/1.9 var(--mono);color:var(--rost);grid-row:span 2}
.schritte b{font:700 18px/1.3 var(--disp)}
.schritte span{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.schnitt{margin:0;background:#FBFAF7;border:1px solid var(--fuge);padding:clamp(12px,2vw,24px)}
.schnitt svg{width:100%;height:auto;display:block}
.wg-zitat{font:600 clamp(20px,2.4vw,28px)/1.25 var(--disp);letter-spacing:-.015em;margin:0 0 clamp(28px,4vw,44px);max-width:40ch}
.wg-zitat cite{display:block;margin-top:10px;font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.karten a{color:var(--rost);font-weight:600}

/* ---------- Projektkacheln ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,22px)}
@media(min-width:620px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--fuge);text-decoration:none;color:var(--ink);transition:border-color .25s,transform .25s}
.pcard:hover{border-color:var(--navy);transform:translateY(-3px)}
.pcard[hidden]{display:none}
.pc-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--papier-2)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.pcard:hover .pc-img img{transform:scale(1.05)}
.pc-img .tag{left:auto;right:10px}
.pc-vn{position:absolute;left:10px;top:10px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--rost);color:#fff;padding:6px 8px}
.pc-txt{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.pc-kat{font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pc-txt b{font:700 19px/1.2 var(--disp);letter-spacing:-.01em}
.pc-txt>span:last-child{font-size:15px;color:var(--ink-2);line-height:1.45}
.dark .pcard{background:var(--navy-2);border-color:var(--navy-3);color:#fff}

/* ---------- Filter (Referenzen) ---------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3.4vw,40px)}
.fbtn{font:600 15px/1 var(--body);padding:11px 15px;border:1.5px solid var(--fuge);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fbtn small{font:500 .7rem/1 var(--mono);color:var(--ink-3);margin-left:4px}
.fbtn:hover{border-color:var(--navy)}
.fbtn[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.fbtn[aria-pressed=true] small{color:#AAB2C2}

/* ---------- Projektseite ---------- */
.pinfo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start;margin-bottom:clamp(36px,5vw,64px)}
@media(min-width:900px){.pinfo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.pinfo-block+.pinfo-block{margin-top:24px}
.pliste{margin-top:12px;display:grid}
.pliste li{padding:9px 0 9px 24px;border-bottom:1px dashed var(--fuge);position:relative;font-size:16px;line-height:1.45}
.pliste li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;background:var(--rost);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.chipreihe.hell a{border:1.5px solid var(--fuge);background:#fff;padding:8px 12px;font-size:15px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.chipreihe.hell a:hover{border-color:var(--rost)}
.chipreihe.hell{margin-top:12px}
.pzitat{font:600 clamp(20px,2.3vw,27px)/1.3 var(--disp);letter-spacing:-.015em;border-left:3px solid var(--rost);padding-left:clamp(16px,2vw,26px)}
.pzitat cite{display:block;margin-top:14px;font:500 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.psub{font-size:clamp(24px,2.8vw,34px);margin:clamp(36px,5vw,56px) 0 16px}
.psub+.fcap{margin:-8px 0 18px}
.pinfo+.psub{margin-top:0}
.pnav-sec{padding:clamp(40px,6vw,70px) 0}
.pnav{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center}
@media(min-width:900px){.pnav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
.pn{display:block;text-decoration:none;color:var(--ink);padding:14px 0}
.pn small{display:block;font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.pn b{font:700 19px/1.25 var(--disp)}
.pn:hover b{color:var(--rost)}
.pn.r{text-align:right}
@media(max-width:899px){.pn.r{text-align:left}}

/* ---------- Drei Fotos (Gewerkseiten) ---------- */
.foto3{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vw,20px)}
@media(min-width:620px){.foto3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foto3 figure{margin:0;cursor:zoom-in}
.foto3 .pic{aspect-ratio:4/5}
.foto3 .pic img{width:100%;height:100%;object-fit:cover}
.foto3 figcaption{font-size:15px;color:var(--ink-2);margin-top:10px}

/* ---------- Bildband (Betrieb, Jobs) ---------- */
.fband-sec{padding:clamp(70px,9vw,120px) 0;overflow:hidden;background:var(--papier)}
.dark+.fband-sec,.fband-sec{border-top:1px solid var(--fuge)}
.fband{overflow:hidden}
.fband-row{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;padding:0 20px;will-change:transform}
.fband figure{margin:0;flex:none;height:clamp(240px,38vw,440px);cursor:zoom-in;overflow:hidden;background:var(--papier-2)}
.fband img{height:100%;width:auto;display:block}
.fband-sec .fcap{margin-top:16px}

.gal3 .gal{columns:2}
@media(min-width:760px){.gal3 .gal{columns:3}}
/* Hero „Verlegt“ (29.09.2026): Logo-Paar im echten Seitenverhältnis 465 : 197.
   Geometrie aus gen.cjs (heroVerlegt); Fugenbreite --f per ScrollTrigger, non-scaling-stroke hält sie in echten Pixeln. */
.wall{height:auto;aspect-ratio:465/197;background:none;overflow:visible}
.wall-svg{display:block;width:100%;height:100%;overflow:visible}
.wall-rand{fill:var(--navy)}
.wall-svg .t-flame{fill:var(--rost)}
.wall-svg .t-drop{fill:var(--stahl)}
.wall-fuge line{fill:none;stroke:var(--papier);stroke-width:var(--f);vector-effect:non-scaling-stroke}
@media(min-width:900px){
  .hero>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .wall{aspect-ratio:465/197;max-height:none;width:100%;justify-self:stretch}
}

/* Marken vor den Überschriften: Logo-Feld aus dem Logo gemessen (28.09.2026) – erzeugt von _bau/logofeld.cjs.
   Rost = linkes Feld (Flamme), Stahl = rechtes Feld (Tropfen, am Mittelpunkt gespiegelt).
   Farbe je Seite (body.m-stahl) oder Abschnitt (.kick.r / .kick.s). */
.kick::before{-webkit-mask:none;mask:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='ml'%3E%3Crect x='-5' y='-5' width='110' height='110' fill='white'/%3E%3Cg stroke='black' stroke-width='6'%3E%3Cline x1='16.8' y1='8.17' x2='32.81' y2='92.32'/%3E%3Cline x1='84.51' y1='15.58' x2='75.35' y2='88.52'/%3E%3Cline x1='-0.66' y1='27.18' x2='102.27' y2='39.14'/%3E%3Cline x1='7.84' y1='72.96' x2='99.66' y2='65.23'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23ml)'%3E%3Cpolygon fill='%23101828' points='0,10.13 17.55,12.1 20.9,29.68 3.31,27.64'/%3E%3Cpolygon fill='%23101828' points='17.55,12.1 84.01,19.55 81.85,36.77 20.9,29.68'/%3E%3Cpolygon fill='%23101828' points='84.01,19.55 100,21.34 98.3,38.68 81.85,36.77'/%3E%3Cpolygon fill='%23101828' points='3.31,27.64 20.9,29.68 28.79,71.19 11.83,72.62'/%3E%3Cpolygon fill='%23882818' points='20.9,29.68 81.85,36.77 78.05,67.05 28.79,71.19'/%3E%3Cpolygon fill='%23101828' points='81.85,36.77 98.3,38.68 95.67,65.57 78.05,67.05'/%3E%3Cpolygon fill='%23101828' points='11.83,72.62 28.79,71.19 32.06,88.39 15.09,89.87'/%3E%3Cpolygon fill='%23101828' points='28.79,71.19 78.05,67.05 75.85,84.55 32.06,88.39'/%3E%3Cpolygon fill='%23101828' points='78.05,67.05 95.67,65.57 93.97,82.97 75.85,84.55'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.m-stahl .kick::before,.kick.s::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='mr'%3E%3Crect x='-5' y='-5' width='110' height='110' fill='white'/%3E%3Cg stroke='black' stroke-width='6'%3E%3Cline x1='24.65' y1='11.48' x2='15.49' y2='84.42'/%3E%3Cline x1='67.19' y1='7.68' x2='83.2' y2='91.83'/%3E%3Cline x1='0.34' y1='34.77' x2='92.16' y2='27.04'/%3E%3Cline x1='-2.27' y1='60.86' x2='100.66' y2='72.82'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23mr)'%3E%3Cpolygon fill='%23101828' points='6.03,17.03 24.15,15.45 21.95,32.95 4.33,34.43'/%3E%3Cpolygon fill='%23101828' points='24.15,15.45 67.94,11.61 71.21,28.81 21.95,32.95'/%3E%3Cpolygon fill='%23101828' points='67.94,11.61 84.91,10.13 88.17,27.38 71.21,28.81'/%3E%3Cpolygon fill='%23101828' points='4.33,34.43 21.95,32.95 18.15,63.23 1.7,61.32'/%3E%3Cpolygon fill='%237888A8' points='21.95,32.95 71.21,28.81 79.1,70.32 18.15,63.23'/%3E%3Cpolygon fill='%23101828' points='71.21,28.81 88.17,27.38 96.69,72.36 79.1,70.32'/%3E%3Cpolygon fill='%23101828' points='1.7,61.32 18.15,63.23 15.99,80.45 0,78.66'/%3E%3Cpolygon fill='%23101828' points='18.15,63.23 79.1,70.32 82.45,87.9 15.99,80.45'/%3E%3Cpolygon fill='%23101828' points='79.1,70.32 96.69,72.36 100,89.87 82.45,87.9'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.kick.r::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='ml'%3E%3Crect x='-5' y='-5' width='110' height='110' fill='white'/%3E%3Cg stroke='black' stroke-width='6'%3E%3Cline x1='16.8' y1='8.17' x2='32.81' y2='92.32'/%3E%3Cline x1='84.51' y1='15.58' x2='75.35' y2='88.52'/%3E%3Cline x1='-0.66' y1='27.18' x2='102.27' y2='39.14'/%3E%3Cline x1='7.84' y1='72.96' x2='99.66' y2='65.23'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23ml)'%3E%3Cpolygon fill='%23101828' points='0,10.13 17.55,12.1 20.9,29.68 3.31,27.64'/%3E%3Cpolygon fill='%23101828' points='17.55,12.1 84.01,19.55 81.85,36.77 20.9,29.68'/%3E%3Cpolygon fill='%23101828' points='84.01,19.55 100,21.34 98.3,38.68 81.85,36.77'/%3E%3Cpolygon fill='%23101828' points='3.31,27.64 20.9,29.68 28.79,71.19 11.83,72.62'/%3E%3Cpolygon fill='%23882818' points='20.9,29.68 81.85,36.77 78.05,67.05 28.79,71.19'/%3E%3Cpolygon fill='%23101828' points='81.85,36.77 98.3,38.68 95.67,65.57 78.05,67.05'/%3E%3Cpolygon fill='%23101828' points='11.83,72.62 28.79,71.19 32.06,88.39 15.09,89.87'/%3E%3Cpolygon fill='%23101828' points='28.79,71.19 78.05,67.05 75.85,84.55 32.06,88.39'/%3E%3Cpolygon fill='%23101828' points='78.05,67.05 95.67,65.57 93.97,82.97 75.85,84.55'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.dark .kick::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='ml'%3E%3Crect x='-5' y='-5' width='110' height='110' fill='white'/%3E%3Cg stroke='black' stroke-width='6'%3E%3Cline x1='16.8' y1='8.17' x2='32.81' y2='92.32'/%3E%3Cline x1='84.51' y1='15.58' x2='75.35' y2='88.52'/%3E%3Cline x1='-0.66' y1='27.18' x2='102.27' y2='39.14'/%3E%3Cline x1='7.84' y1='72.96' x2='99.66' y2='65.23'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23ml)'%3E%3Cpolygon fill='%23F4F3EF' points='0,10.13 17.55,12.1 20.9,29.68 3.31,27.64'/%3E%3Cpolygon fill='%23F4F3EF' points='17.55,12.1 84.01,19.55 81.85,36.77 20.9,29.68'/%3E%3Cpolygon fill='%23F4F3EF' points='84.01,19.55 100,21.34 98.3,38.68 81.85,36.77'/%3E%3Cpolygon fill='%23F4F3EF' points='3.31,27.64 20.9,29.68 28.79,71.19 11.83,72.62'/%3E%3Cpolygon fill='%23D2644C' points='20.9,29.68 81.85,36.77 78.05,67.05 28.79,71.19'/%3E%3Cpolygon fill='%23F4F3EF' points='81.85,36.77 98.3,38.68 95.67,65.57 78.05,67.05'/%3E%3Cpolygon fill='%23F4F3EF' points='11.83,72.62 28.79,71.19 32.06,88.39 15.09,89.87'/%3E%3Cpolygon fill='%23F4F3EF' points='28.79,71.19 78.05,67.05 75.85,84.55 32.06,88.39'/%3E%3Cpolygon fill='%23F4F3EF' points='78.05,67.05 95.67,65.57 93.97,82.97 75.85,84.55'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.m-stahl .dark .kick::before,.dark .kick.s::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='mr'%3E%3Crect x='-5' y='-5' width='110' height='110' fill='white'/%3E%3Cg stroke='black' stroke-width='6'%3E%3Cline x1='24.65' y1='11.48' x2='15.49' y2='84.42'/%3E%3Cline x1='67.19' y1='7.68' x2='83.2' y2='91.83'/%3E%3Cline x1='0.34' y1='34.77' x2='92.16' y2='27.04'/%3E%3Cline x1='-2.27' y1='60.86' x2='100.66' y2='72.82'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23mr)'%3E%3Cpolygon fill='%23F4F3EF' points='6.03,17.03 24.15,15.45 21.95,32.95 4.33,34.43'/%3E%3Cpolygon fill='%23F4F3EF' points='24.15,15.45 67.94,11.61 71.21,28.81 21.95,32.95'/%3E%3Cpolygon fill='%23F4F3EF' points='67.94,11.61 84.91,10.13 88.17,27.38 71.21,28.81'/%3E%3Cpolygon fill='%23F4F3EF' points='4.33,34.43 21.95,32.95 18.15,63.23 1.7,61.32'/%3E%3Cpolygon fill='%237888A8' points='21.95,32.95 71.21,28.81 79.1,70.32 18.15,63.23'/%3E%3Cpolygon fill='%23F4F3EF' points='71.21,28.81 88.17,27.38 96.69,72.36 79.1,70.32'/%3E%3Cpolygon fill='%23F4F3EF' points='1.7,61.32 18.15,63.23 15.99,80.45 0,78.66'/%3E%3Cpolygon fill='%23F4F3EF' points='18.15,63.23 79.1,70.32 82.45,87.9 15.99,80.45'/%3E%3Cpolygon fill='%23F4F3EF' points='79.1,70.32 96.69,72.36 100,89.87 82.45,87.9'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.dark .kick.r::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='ml'%3E%3Crect x='-5' y='-5' width='110' height='110' fill='white'/%3E%3Cg stroke='black' stroke-width='6'%3E%3Cline x1='16.8' y1='8.17' x2='32.81' y2='92.32'/%3E%3Cline x1='84.51' y1='15.58' x2='75.35' y2='88.52'/%3E%3Cline x1='-0.66' y1='27.18' x2='102.27' y2='39.14'/%3E%3Cline x1='7.84' y1='72.96' x2='99.66' y2='65.23'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23ml)'%3E%3Cpolygon fill='%23F4F3EF' points='0,10.13 17.55,12.1 20.9,29.68 3.31,27.64'/%3E%3Cpolygon fill='%23F4F3EF' points='17.55,12.1 84.01,19.55 81.85,36.77 20.9,29.68'/%3E%3Cpolygon fill='%23F4F3EF' points='84.01,19.55 100,21.34 98.3,38.68 81.85,36.77'/%3E%3Cpolygon fill='%23F4F3EF' points='3.31,27.64 20.9,29.68 28.79,71.19 11.83,72.62'/%3E%3Cpolygon fill='%23D2644C' points='20.9,29.68 81.85,36.77 78.05,67.05 28.79,71.19'/%3E%3Cpolygon fill='%23F4F3EF' points='81.85,36.77 98.3,38.68 95.67,65.57 78.05,67.05'/%3E%3Cpolygon fill='%23F4F3EF' points='11.83,72.62 28.79,71.19 32.06,88.39 15.09,89.87'/%3E%3Cpolygon fill='%23F4F3EF' points='28.79,71.19 78.05,67.05 75.85,84.55 32.06,88.39'/%3E%3Cpolygon fill='%23F4F3EF' points='78.05,67.05 95.67,65.57 93.97,82.97 75.85,84.55'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-meta span::before,.gw-list li::before,.pw-list li::before{clip-path:polygon(0% 0%,100% 14.1%,94% 91.3%,15.1% 100%)}
.m-stahl .hero-meta span::before,.m-stahl .gw-list li::before,.m-stahl .pw-list li::before{clip-path:polygon(6% 8.7%,84.9% 0%,100% 100%,0% 85.9%)}
/* Ende Marken */
/* 404 „Hier fehlt eine Fliese.“ (28.09.2026) */
.nf{min-height:100svh;display:flex;align-items:center;padding:calc(var(--bar) + 30px) 0 60px}
.nf .wrap{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.nf h1{font-size:clamp(40px,9.5vw,84px);margin-top:14px}
.nf .lead{margin-top:16px;max-width:34em}
.nf-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.nf-bild svg{display:block;width:100%;max-width:min(420px,72vw);height:auto;margin:0 auto;overflow:visible}
.nf-k{fill:var(--navy);stroke:var(--papier);stroke-width:3.4;stroke-linejoin:round}
.nf-bett{fill:var(--papier-2);stroke:var(--papier);stroke-width:3.4}
.nf-leer{fill:none;stroke:var(--rost);stroke-width:1;stroke-dasharray:3 2.4}
.nf-lose{fill:var(--rost);stroke:var(--papier);stroke-width:1.6}
@media(min-width:900px){.nf .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,80px)}}
/* Projektnummer auf den Kacheln (28.09.2026) */
.pc-nr{font-style:normal;display:inline-block;margin-right:8px;padding:2px 5px;background:var(--navy);color:var(--papier);letter-spacing:.06em}

/* Vorher/Nachher: zwei Links nebeneinander (28.09.2026) */
.vn-ig{display:flex;flex-wrap:wrap;gap:10px 30px}

/* HILGER von links nach rechts (28.09.2026): Fliesen mit Fugen, Buchstabe füllt sich, Wort wird geschrieben */
.akr{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:clamp(28px,4vw,48px);padding:6px;background:var(--fuge)}
.akr li{background:var(--papier);padding:clamp(14px,2vw,26px) clamp(10px,1.5vw,22px) clamp(16px,2vw,26px)}
.ak-k{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;cursor:pointer}
.ak-k:focus-visible{outline:2px solid var(--rost);outline-offset:4px}
.akr .L{position:relative;font:700 clamp(58px,9vw,118px)/.82 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.akr .L i{position:absolute;inset:0;font-style:normal;color:var(--navy);-webkit-text-stroke:0}
.akr li:nth-child(1) .L i{color:var(--rost)}
.akr li:nth-child(6) .L i{color:var(--stahl)}
.akr .W,.ak-text .W{font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.5vw,34px);line-height:1.1;color:var(--navy);padding-right:.25em}
.akr p{display:none;margin-top:12px;color:var(--ink-2);font-size:15px;line-height:1.55}
.akr li.an{background:var(--papier-2)}
.akr li.an .W{color:var(--rost)}
.ak-text{margin-top:18px;min-height:7.5em}
.ak-text p{margin-top:6px;color:var(--ink-2);font-size:16px;line-height:1.55}
html:not(.js) .akr p{display:block}
html:not(.js) .ak-text{display:none}
.js-anim .akr .L i{clip-path:inset(100% 0 0 0)}
.js-anim .akr .W{clip-path:inset(-20% 100% -30% -5%)}
@media(min-width:900px){
  .akr{grid-template-columns:repeat(6,minmax(0,1fr))}
  .akr p{display:block}
  .ak-text{display:none}
  .ak-k{cursor:default;pointer-events:none}
  .akr li.an{background:var(--papier)}
  .akr li.an .W{color:var(--navy)}
}

/* Seitenkopf als Logo-Feld (alle Unter- und Projektseiten, 29.09.2026). Ein Blau: nur die vier geneigten Fugen
   teilen die Fläche in Mittelfliese (Inhalt) und Randfliesen.
   Seitliche Fugen sitzen an der Inhaltsspalte (breite Bildschirme: breite Randfliesen wie im Logo), sonst schmal am Rand.
   Jede Fuge dreht um ihre Mitte.
   Richtungen aus dem Logo, gedämpft: Rost-Seiten wie das Flammen-Feld, Stahl-Seiten (m-stahl) am Mittelpunkt gespiegelt. */
.phead.feld{
  --pf:clamp(4px,.45vw,7px);
  --ro:calc(var(--bar) + clamp(18px,2.8vw,40px));                       /* Mitte der oberen Fuge */
  --ru:clamp(28px,4vw,60px);                                            /* Abstand der unteren Fuge vom unteren Rand */
  --rs:max(clamp(8px,2.4vw,40px),calc(50% - var(--maxw) / 2 + 12px));   /* Abstand der seitlichen Fugen vom Rand */
  padding-top:calc(var(--ro) + clamp(24px,4vw,52px));
  padding-bottom:calc(var(--ru) + clamp(36px,4.6vw,64px))}
.phead.feld::after{display:none}
.ph-fugen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ph-fugen i{position:absolute}
.ph-fugen .f{background:var(--papier)}
.ph-fugen .fo{left:-10%;right:-10%;height:var(--pf);top:calc(var(--ro) - var(--pf) / 2)}
.ph-fugen .fu{left:-10%;right:-10%;height:var(--pf);top:calc(100% - var(--ru) - var(--pf) / 2)}
.ph-fugen .fl{top:-10%;bottom:-10%;width:var(--pf);left:calc(var(--rs) - var(--pf) / 2)}
.ph-fugen .fr{top:-10%;bottom:-10%;width:var(--pf);right:calc(var(--rs) - var(--pf) / 2)}
.ph-fugen .fo{transform:rotate(.9deg)}
.ph-fugen .fu{transform:rotate(-.7deg)}
.ph-fugen .fl{transform:rotate(-1.8deg)}
.ph-fugen .fr{transform:rotate(1.3deg)}
.m-stahl .ph-fugen .fo{transform:rotate(-.7deg)}
.m-stahl .ph-fugen .fu{transform:rotate(.9deg)}
.m-stahl .ph-fugen .fl{transform:rotate(1.3deg)}
.m-stahl .ph-fugen .fr{transform:rotate(-1.8deg)}

/* Handy-Menü (28.09.2026): scrollt selbst (data-lenis-prevent, Lenis ist beim offenen Menü gestoppt),
   scrollt die Seite dahinter nicht mit, und wird auf niedrigen Bildschirmen kompakter, damit alle Punkte passen. */
.mnav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-height:760px){.mnav{padding-top:14px}.mnav a{font-size:24px;padding:7px 0}.mnav .btn{margin-top:16px}.mnav .mfoot{margin-top:14px}}
@media(max-height:620px){.mnav a{font-size:21px;padding:6px 0}}

/* Vorher/Nachher: Hilgers Satz sichtbar, während das Bad durchläuft (28.09.2026) */
.vn-zitat{margin:0;padding-left:16px;border-left:3px solid var(--rost)}
.vn-zitat blockquote{font:600 clamp(18px,1.55vw,22px)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.vn-zitat figcaption{margin-top:8px;font:500 .68rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.vn-zitat-d{display:none;margin-top:20px}
.vn-ig-d{display:none}
.vn-intro{padding-top:clamp(50px,8vw,80px)}
.vn-after .vn-quote{display:none}
.vn-after{padding-top:28px}
@media(min-width:900px){
  .vn-zitat-d{display:block}
  .vn-ig-d{display:flex;margin-top:22px}
  .vn-intro,.vn-after{display:none}
  .vn-steps{margin-top:22px}
}
/* Handy: Überschrift + Satz stehen über dem Abschnitt, die mitlaufende Ansicht zeigt nur Schritte und Bild */
.vn-intro .vn-zitat{margin-top:18px}
@media(max-width:899px){
  .vn-sticky .kick,.vn-sticky h2{display:none}
  .js-anim .vn-steps{margin-top:0}
  .js-anim .vn-stage{height:min(clamp(260px,calc(100svh - var(--bar) - 190px),620px),calc((100vw - 40px) * 1.25))}
}

/* Fliesenspiegel-Raster statt Bildband (29.09.2026): ruhig, alle Fotos sichtbar, Fugen dazwischen, Antippen = Großansicht */
.fspiegel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;background:var(--fuge)}
.fspiegel figure{margin:0;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in;background:var(--papier-2)}
.fspiegel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.fspiegel figure:hover img{transform:scale(1.04)}
@media(min-width:760px){.fspiegel{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Zahlen-Band mit vier Werten (30.09.2026: Kleinstfuge raus) */
@media(min-width:900px){.band ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Keine leeren Felder (30.09.2026): Partner höchstens 3 Spalten (18 Logos = 6 volle Reihen),
   Zertifikate: 5 Urkunden – Desktop 3 oben + 2 breite unten (6er-Raster), Tablet 2 + 2 + 1 volle Breite */
@media(min-width:1140px){.praster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:720px) and (max-width:1119px){.zgal>:last-child:nth-child(odd){grid-column:1 / -1}}
@media(min-width:1120px){
  .zgal{grid-template-columns:repeat(6,minmax(0,1fr))}
  .zgal>*{grid-column:span 2}
  .zgal>:nth-child(3n+1):nth-last-child(2),.zgal>:nth-child(3n+1):nth-last-child(2)+*{grid-column:span 3}
}

/* Jobs: Stellen-Abschnitt hell (30.09.2026) – der dunkle Seitenkopf steht als Fliese für sich */
.jobs-hell .roles li{background:var(--papier);color:var(--ink)}
.jobs-hell .roles li:nth-child(2),.jobs-hell .roles li:nth-child(3){border-left-color:var(--rost)}
.jobs-hell .roles li small,.jobs-hell .roles li::before{color:var(--ink-3)}
.jobs-hell .benefits li{color:var(--ink-2);border-bottom-color:var(--fuge)}
.jobs-hell .benefits li::before{background:var(--rost)}
.jobs-hell .azubi{border-color:var(--fuge);background:var(--papier)}
.jobs-hell .azubi b{color:var(--rost)}
.jobs-hell .azubi p{color:var(--ink-2)}
.jobs-hell .azubi strong{color:var(--ink)}

/* Projekt-Galerien: ein Rahmen pro Format, Raster wenn eine Gruppe nur ein Format hat (giuci, 29.09.2026) */
.gal figure.f-hoch{aspect-ratio:3/4}
.gal figure.f-quer{aspect-ratio:4/3}
.gal figure.f-hoch img,.gal figure.f-quer img{width:100%;height:100%;object-fit:cover}
.gal.gal-raster{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gal.gal-raster figure{margin:0}
@media(min-width:760px){.gal.gal-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1100px){.gal.gal-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Thermostat direkt drehbar (29.09.2026): Maus zieht am Ring, Finger wischt seitlich – senkrecht scrollt die Seite */
.thermo-dial svg{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.thermo-dial svg:active{cursor:grabbing}

/* Schichtaufbau: Beplankung mit Stößen und Schrauben, Spachtel füllt genau diese (giuci, 29.09.2026) – Zeichnung als SVG in gen.cjs */
.schicht .lage svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Logo auf dem Desktop größer, schrumpft beim Scrollen (giuci, 29.09.2026) – --lk kommt aus hilger.js (GSAP, scrub).
   Ohne Animation (reduzierte Bewegung, kein Skript) bleibt es klein, damit nichts unter der Leiste verschwindet. */
@media(min-width:1000px){
  .js-anim{--lk:1}
  .bar{height:calc(var(--bar) + 24px * var(--lk,0))}
  .brand img{height:calc(54px + 26px * var(--lk,0))}
  .mnav{top:calc(var(--bar) + 24px * var(--lk,0))}
  .phead.feld{--ro:calc(var(--bar) + 24px + clamp(18px,2.8vw,40px))}   /* obere Fuge bleibt unter der großen Leiste frei */
}

/* Schichtaufbau und Thermostat stehen still wie die Kleinstfuge (giuci, 29.09.2026): Überschrift und Animation
   zusammen in einer Bildschirmhöhe, Spur mit Überlänge, der Inhalt klebt darin */
.sch-sticky,.th-sticky{padding:clamp(70px,9vw,120px) 0}
.js-anim .sch-track,.js-anim .th-track{height:260vh}
.js-anim .sch-sticky,.js-anim .th-sticky{position:sticky;top:var(--bar);min-height:calc(100svh - var(--bar));display:flex;align-items:center;padding:28px 0}
.js-anim .sch-sticky>.wrap,.js-anim .th-sticky>.wrap{width:100%}
.js-anim .anim-sec .shead{margin-bottom:clamp(20px,3vw,36px)}
/* Handy: wie die Kleinstfuge ohne Einleitungssatz, kleinere Überschrift; Hinweise stehen unter der Spur */
.anim-note-m{display:none}
@media(max-width:899px){
  .js-anim .sch-track,.js-anim .th-track{height:230vh}
  .js-anim .sch-sticky,.js-anim .th-sticky{align-items:flex-start;padding-top:22px}
  .js-anim .anim-sec .shead .lead{display:none}
  .js-anim .anim-sec .shead h2{font-size:clamp(30px,8.6vw,40px)}
  .js-anim .anim-sec .shead{gap:0}
  .js-anim .th-note-d,.js-anim .sch-note-d{display:none}
  .js-anim .anim-note-m{display:block;padding-bottom:56px}
}
@media(max-width:859px){
  .js-anim .th-sticky .thermo-dial{max-width:210px}
  .js-anim .th-sticky .thermo{gap:18px}
}
@media(max-width:859px) and (max-height:700px){.js-anim .th-sticky .thermo-dial{max-width:160px}}   /* kleine Handys */
/* Thermostat und Schichtaufbau auf dunklem Grund wie die Kleinstfuge (giuci, 29.09.2026) */
.dark .vnote{color:#98A2B6}
.dark .vnote a{color:var(--papier)}
.dark .thermo-dial circle:nth-of-type(1){stroke:var(--navy-3)}
/* Bogen: füllt sich mit der Temperatur, Verlauf Stahlblau (kalt) → Rost (warm) – Farben im SVG, Länge in hilger.js (giuci, 29.09.2026) */
.dark .thermo-dial circle:nth-of-type(3),.dark .thermo-dial #thermoDial line{fill:var(--papier);stroke:var(--papier)}
.dark .thermo-val b{color:var(--rost-hell)}
.dark .thermo-val span{color:#C4CAD6}
.dark .thermo-skala{color:#98A2B6}
.dark .thermo input[type=range]::-webkit-slider-runnable-track{background:var(--navy-3)}
.dark .thermo input[type=range]::-moz-range-track{background:var(--navy-3)}
.dark .thermo input[type=range]::-webkit-slider-thumb{background:var(--rost-hell)}
.dark .thermo input[type=range]::-moz-range-thumb{background:var(--rost-hell)}
.dark .boden{border-color:var(--navy-3)}
.dark .schicht{border-color:#4B5570}
.dark .vbtn{background:transparent;border-color:rgba(244,243,239,.35);color:var(--papier)}
.dark .vbtn:hover{border-color:var(--papier)}
.dark .vbtn[aria-pressed=true]{background:var(--papier);border-color:var(--papier);color:var(--navy)}
.dark .schicht-stand{color:#C4CAD6}
.dark .schicht-stand b{color:var(--rost-hell)}


/* Footer: Logo „Das Handwerk“ wie auf der bisherigen Website (giuci, 29.09.2026) – Datei nur 197 px breit, daher nicht größer */
.foot img.hw-logo{width:170px;margin-top:22px}

/* Startseiten-Hero dunkel (seit 29.09.2026) ohne Logo-Grafik – Navy mit den vier geneigten Fugen wie die Seitenköpfe.
   Der vorige Hero „Verlegt“ ist archiviert (archiv-hero-verlegt.html, Regeln oben unter „Hero „Verlegt““). */
.hero-dunkel{background:var(--navy);color:var(--papier);position:relative;overflow:hidden;
  --pf:clamp(4px,.45vw,7px);--ro:calc(var(--bar) + clamp(18px,2.8vw,40px));--ru:clamp(28px,4vw,60px);
  --rs:max(clamp(8px,2.4vw,40px),calc(50% - var(--maxw) / 2 + 12px))}
.hero-dunkel>.wrap{position:relative;z-index:1}
/* Zahlen-Band unter dem dunklen Hero hell statt Navy (giuci) */
.hero-dunkel+.band{background:var(--papier-2);color:var(--ink)}
.hero-dunkel+.band li{border-left-color:var(--fuge)}
.hero-dunkel+.band li:nth-child(1) b{color:var(--rost)}
.hero-dunkel+.band li:nth-child(4) b{color:var(--stahl)}
.hero-dunkel+.band span{color:var(--ink-2)}
.hero.hero-dunkel{padding-top:calc(var(--ro) + 18px);padding-bottom:calc(var(--ru) + 18px)}   /* Inhalt zwischen oberer und unterer Fuge */
.hero-dunkel h1 .u{color:var(--rost-hell)}
.hero-dunkel h1 .u path{stroke:var(--rost-hell)}
@media(min-width:900px){
  .hero-dunkel>.wrap{grid-template-columns:minmax(0,1fr)}
  .hero-dunkel h1{font-size:clamp(52px,min(6.4vw,10.5svh),104px)}
  .hero-dunkel .hero-cta{max-width:620px}   /* Knöpfe so breit wie im bisherigen Hero (giuci) */
  .hero-dunkel .lead{max-width:64ch}
}
@media(min-width:1000px){.hero-dunkel{--ro:calc(var(--bar) + 24px + clamp(18px,2.8vw,40px))}}

/* Seitliche Fugen am Desktop weiter weg vom Text (giuci, 29.09.2026): Seitenköpfe und dunkler Hero */
@media(min-width:900px){
  .phead.feld,.hero-dunkel{--rs:max(clamp(8px,1.2vw,20px),calc(50% - var(--maxw) / 2 - 24px))}
}