:root{
  --red:#C3121A; --red-deep:#7A0C12; --red-dark:#5C070C; --red-bright:#E01F28;
  --paper:#F4F4F2; --paper-2:#E9EAE6; --tar:#14171A; --tar-2:#1E2226;
  --wood:#B4661F; --wood-soft:#EBD6BC;
  --line:rgba(20,23,26,.15); --line-d:rgba(244,244,242,.18);
  --maxw:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--tar);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,picture{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red); outline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.6rem)}
.sec{padding:clamp(3.4rem,7vw,6.5rem) 0}
.sec--alt{background:var(--paper-2)}
.sec--red{background:var(--red-deep); color:var(--paper)}
.sec--dark{background:var(--tar); color:var(--paper)}

.d1,.d2,.d3{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:-.008em; line-height:.96; margin:0; text-wrap:balance}
.d1{font-size:clamp(2.5rem,6.4vw,4.9rem)}
.d2{font-size:clamp(1.95rem,4.4vw,3.3rem); line-height:1.02}
.d3{font-size:clamp(1.28rem,2.3vw,1.8rem); line-height:1.08}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem); line-height:1.6; max-width:62ch}
.tag{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.71rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500}
.tag--red{color:var(--red)}
.sec-label{display:flex; align-items:center; gap:.85rem; margin-bottom:1.6rem}
.sec-label::after{content:""; flex:1; height:2px; background:var(--red)}
.sec--red .sec-label::after,.sec--dark .sec-label::after{background:var(--red-bright)}

/* ---------- Absperrband ---------- */
.tape{height:15px; overflow:hidden; background:var(--paper)}
.tape i{display:block; height:100%; width:220%;
  background:repeating-linear-gradient(-45deg,var(--red) 0 20px,var(--paper) 20px 40px);
  animation:tapeslide 3.4s linear infinite}
@keyframes tapeslide{from{transform:translateX(0)} to{transform:translateX(-56.57px)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:54px;
  padding:.9rem 1.7rem; border:2px solid var(--red); background:var(--red); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:.79rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:background .2s, border-color .2s, color .2s, transform .12s}
.btn span{position:relative; z-index:1}
.btn:hover{background:var(--red-dark); border-color:var(--red-dark)}
.btn:active{transform:translateY(1px)}
.btn--light{background:var(--paper); color:var(--tar); border-color:var(--paper)}
.btn--light:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn--outlight{background:transparent; color:var(--paper); border-color:rgba(244,244,242,.5)}
.btn--outlight:hover{background:var(--paper); color:var(--tar); border-color:var(--paper)}
.btnrow{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}

/* ---------- Kopf ---------- */
.topbar{background:var(--tar); color:var(--paper); position:sticky; top:0; z-index:60}
.topbar-in{display:flex; align-items:center; gap:1.6rem; min-height:64px}
.brand{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:1.18rem; text-decoration:none; white-space:nowrap; letter-spacing:.01em}
.brand em{font-style:normal; background:var(--red); color:#fff; padding:.08em .34em; margin-left:.18em}
.mainnav{display:flex; gap:1.4rem; margin-left:auto}
.mainnav a{font-family:"IBM Plex Mono",monospace; font-size:.73rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; opacity:.75; padding:.55rem 0; position:relative}
.mainnav a::after{content:""; position:absolute; left:0; right:100%; bottom:.2rem; height:2px;
  background:var(--red-bright); transition:right .28s cubic-bezier(.2,.8,.2,1)}
.mainnav a:hover{opacity:1} .mainnav a:hover::after{right:0}
.topcall{display:flex; align-items:center; gap:.9rem; margin-left:1.4rem}
.topcall a{font-family:"IBM Plex Mono",monospace; font-size:.82rem; text-decoration:none}
.topcall a:hover{color:var(--red-bright)}
@media(max-width:960px){ .mainnav{display:none} .topcall{margin-left:auto} }

/* ---------- HERO: rotes Feld + Foto ---------- */
.hero{display:grid; grid-template-columns:1.02fr .98fr; background:var(--red); color:#fff}
.hero-txt{padding:clamp(2.4rem,5vw,4.4rem) clamp(1.2rem,4vw,3.4rem) clamp(2.4rem,5vw,3.6rem);
  display:flex; flex-direction:column; justify-content:center;
  max-width:calc(var(--maxw)/2 + 1.6rem); margin-left:auto; width:100%}
.hero-ph{position:relative; overflow:hidden; min-height:clamp(320px,52vw,640px); background:var(--tar)}
.hero-ph img{width:100%; height:100%; object-fit:cover; object-position:50% 44%;
  animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)} to{transform:scale(1.12)}}
.hero-ph::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(195,18,26,.5) 0%,transparent 34%)}
.hero-eye{display:flex; align-items:center; gap:.65rem; margin-bottom:1.5rem; opacity:0; animation:fadein .6s .1s forwards}
.hero-eye b{width:10px; height:10px; background:#fff; flex:none}
.hero h1{margin:0}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln i{display:block; font-style:normal; transform:translateY(105%); animation:rise .85s cubic-bezier(.16,.9,.24,1) forwards}
.hero h1 .ln:nth-child(1) i{animation-delay:.14s}
.hero h1 .ln:nth-child(2) i{animation-delay:.26s}
.hero h1 .ln:nth-child(3) i{animation-delay:.38s}
@keyframes rise{to{transform:none}}
@keyframes fadein{to{opacity:1}}
.hero .lead{margin:1.6rem 0 0; color:rgba(255,255,255,.94); opacity:0; animation:fadein .7s .62s forwards}
.hero .btnrow{opacity:0; animation:fadein .7s .78s forwards}

.protokoll{background:var(--tar); color:var(--paper)}
.protokoll-in{display:grid; grid-template-columns:repeat(4,1fr)}
.protokoll div{padding:1.25rem 1.3rem 1.45rem 0; border-right:1px solid var(--line-d);
  opacity:0; transform:translateY(10px); animation:up .6s cubic-bezier(.2,.8,.2,1) forwards}
.protokoll div:nth-child(1){animation-delay:.9s} .protokoll div:nth-child(2){animation-delay:1.0s}
.protokoll div:nth-child(3){animation-delay:1.1s} .protokoll div:nth-child(4){animation-delay:1.2s; border-right:0}
@keyframes up{to{opacity:1; transform:none}}
.protokoll dt{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-bright); margin:0 0 .38rem}
.protokoll dd{margin:0; font-size:.9rem; line-height:1.4}
@media(max-width:980px){ .hero{grid-template-columns:1fr} .hero-txt{max-width:none; order:2; margin:0}
  .hero-ph{order:1; min-height:56vw} .hero-ph::after{background:linear-gradient(0deg,rgba(195,18,26,.5),transparent 40%)} }
@media(max-width:820px){ .protokoll-in{grid-template-columns:1fr 1fr} .protokoll div{border-right:0; padding-right:1rem} }

/* ---------- Scroll-Reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.vis{opacity:1; transform:none}
.rv-d1{transition-delay:.08s}

/* ---------- Thesis ---------- */
.thesis{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4.5rem); align-items:start}
.thesis p{margin:0 0 1.1rem} .thesis .kick{font-size:1.16rem; line-height:1.5}
.thesis .kick b{background:linear-gradient(transparent 62%, rgba(195,18,26,.22) 62%); font-weight:500}
@media(max-width:880px){ .thesis{grid-template-columns:1fr} }

/* ---------- Zähler ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(2.4rem,5vw,3.6rem);
  border-top:2px solid var(--red)}
.stat{padding:1.5rem 1.2rem 1.4rem 0; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block; font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700;
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1; color:var(--red); font-variant-numeric:tabular-nums}
.stat span{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:#535B61; display:block; margin-top:.5rem}
@media(max-width:760px){ .stats{grid-template-columns:1fr 1fr} .stat{border-bottom:1px solid var(--line)} }

/* ---------- Leistungen ---------- */
.sheet{display:grid; grid-template-columns:1fr 290px; gap:clamp(1.4rem,4vw,3.2rem);
  padding:2.4rem 0; border-top:1px solid var(--line); position:relative}
.sheet::before{content:""; position:absolute; top:-1px; left:0; width:0; height:3px; background:var(--red);
  transition:width .7s cubic-bezier(.2,.8,.2,1)}
.sheet.vis::before{width:78px}
.sheet:last-child{border-bottom:1px solid var(--line)}
.sheet-h{display:flex; align-items:baseline; gap:.9rem; margin-bottom:.9rem; flex-wrap:wrap}
.sheet p{margin:0 0 1rem; max-width:56ch}
.sheet ul{margin:0; padding:0; list-style:none; columns:2; column-gap:2rem}
.sheet li{font-size:.94rem; padding:.28rem 0 .28rem 1.05rem; position:relative; break-inside:avoid}
.sheet li::before{content:""; position:absolute; left:0; top:.85em; width:7px; height:2px; background:var(--red)}
.spec{border-left:2px solid var(--red); padding-left:1.1rem}
.spec dt{font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.13em;
  text-transform:uppercase; color:#5C6469; margin-top:.9rem}
.spec dt:first-child{margin-top:0}
.spec dd{margin:.15rem 0 0; font-family:"IBM Plex Mono",monospace; font-size:.87rem; line-height:1.4}
@media(max-width:880px){ .sheet{grid-template-columns:1fr} .sheet ul{columns:1} }

/* ---------- SIGNATURE: interaktiver Abtrag ---------- */
.schnitt{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(1.8rem,5vw,3.6rem); align-items:start}
@media(max-width:940px){ .schnitt{grid-template-columns:1fr} }
.stack{border:2px solid var(--tar); background:#fff}
.stack-top{padding:.8rem 1rem; border-bottom:2px solid var(--tar); display:flex;
  justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap}
.stack-body{position:relative}
.layer{display:grid; grid-template-columns:2.3rem 1fr auto; align-items:center; gap:.85rem;
  padding:.78rem 1rem; border-bottom:1px solid var(--line); position:relative;
  transition:transform .55s cubic-bezier(.5,0,.75,0), opacity .45s ease, filter .4s}
.layer:last-child{border-bottom:0}
.layer.gone{transform:translateX(115%); opacity:0}
.layer.active{background:#FFF3F3 !important; box-shadow:inset 3px 0 0 var(--red)}
.layer-nr{font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:#79828A}
.layer-name{font-size:.95rem; font-weight:500}
.layer-sub{display:block; font-size:.77rem; color:#5C6469; font-weight:400}
.layer-tag{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.26rem .52rem; white-space:nowrap}
.t-asb{background:#F7D9DB; color:#7A0C12}
.t-keep{background:var(--wood-soft); color:#6E3B0C}
.l-asb{background:repeating-linear-gradient(135deg,#FAF7F5 0 7px,#F2EAE8 7px 14px)}
.l-keep{background:repeating-linear-gradient(90deg,#FCF8F2 0 22px,#F2E9DC 22px 24px)}
.stack-foot{padding:.9rem 1rem; border-top:2px solid var(--tar); background:var(--paper-2);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.readout{font-family:"IBM Plex Mono",monospace; font-size:.73rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--red); min-height:1.2em}
.readout.done{color:#0B646C}
.playbtn{display:inline-flex; align-items:center; gap:.55rem; min-height:46px; padding:.6rem 1.1rem;
  background:var(--red); color:#fff; border:0; cursor:pointer; font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; transition:background .2s}
.playbtn:hover{background:var(--red-dark)}
.playbtn::before{content:"▶"; font-size:.6em}
.playbtn.reset::before{content:"↺"; font-size:.9em}
.progress{height:3px; background:var(--paper-2)}
.progress i{display:block; height:100%; width:0; background:var(--red); transition:width .5s ease}
.schnitt figure{margin:0}
.schnitt figcaption{margin-top:.7rem; font-size:.82rem; color:#4E565C}
.schnitt img{width:100%; aspect-ratio:4/5; object-fit:cover}

/* ---------- Ablauf ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.step{padding:1.6rem 1.6rem 1.6rem 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative}
.step:nth-child(3n){border-right:0}
.step-nr{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--red); letter-spacing:.12em}
.step h3{margin:.5rem 0 .45rem; font-family:"IBM Plex Sans Condensed",sans-serif;
  text-transform:uppercase; font-size:1.02rem; font-weight:700}
.step p{margin:0; font-size:.92rem; color:#42494F}
@media(max-width:880px){ .steps{grid-template-columns:1fr} .step{border-right:0; padding-right:0} }

/* ---------- Referenzen auf Rot ---------- */
.refgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,2vw,1.3rem)}
.ref{position:relative; overflow:hidden; background:var(--red-dark)}
.ref img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ref::after{content:""; position:absolute; inset:0; background:var(--red);
  mix-blend-mode:multiply; opacity:.16; transition:opacity .5s}
.ref:hover img{transform:scale(1.045)} .ref:hover::after{opacity:0}
.ref-a{grid-column:span 7; aspect-ratio:16/11} .ref-b{grid-column:span 5; aspect-ratio:4/5}
.ref-c{grid-column:span 4; aspect-ratio:4/5} .ref-d{grid-column:span 4; aspect-ratio:4/5}
.ref-e{grid-column:span 4; aspect-ratio:4/5}
.ref-f{grid-column:span 12; aspect-ratio:16/9}
.ref-cap{position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.1rem .9rem; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(92,7,12,.93)); color:#fff}
.ref-cap b{display:block; font-family:"IBM Plex Sans Condensed",sans-serif; text-transform:uppercase;
  font-size:1rem; font-weight:700}
.ref-cap span{font-family:"IBM Plex Mono",monospace; font-size:.71rem; opacity:.85}
@media(max-width:980px){ .ref-c,.ref-d,.ref-e,.ref-f{grid-column:span 6} }
@media(max-width:780px){ .ref-a,.ref-b,.ref-c,.ref-d,.ref-e,.ref-f{grid-column:span 12; aspect-ratio:16/11} }
.projlist{margin-top:2.6rem; border-top:1px solid rgba(255,255,255,.28)}
.projrow{display:grid; grid-template-columns:1fr 130px 160px; gap:1rem; padding:.95rem 0;
  border-bottom:1px solid rgba(255,255,255,.28); align-items:baseline; transition:padding-left .3s}
.projrow:hover{padding-left:.6rem}
.projrow b{font-weight:500; font-size:1rem}
.projrow span{font-family:"IBM Plex Mono",monospace; font-size:.83rem; opacity:.85}
@media(max-width:700px){ .projrow{grid-template-columns:1fr auto} .projrow .st{display:none} }

/* ---------- Nachweise ---------- */
.ledger{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(1.5rem,5vw,4rem)}
.lrow{display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.lrow dt{margin:0; font-size:.95rem}
.lrow dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:.87rem; text-align:right; white-space:nowrap}
@media(max-width:780px){ .ledger{grid-template-columns:1fr} }

/* ---------- Kontakt ---------- */
.kontakt{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4.5rem)}
@media(max-width:880px){ .kontakt{grid-template-columns:1fr} }
.kbox{border:1px solid var(--line-d); padding:1.3rem; transition:border-color .3s, background .3s}
.kbox:hover{border-color:var(--red-bright); background:rgba(224,31,40,.07)}
.kbox + .kbox{margin-top:.8rem}
.kbox dt{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-bright); margin-bottom:.32rem}
.kbox dd{margin:0; font-size:1.05rem}
.kbox a{text-decoration:none}
.form label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; margin:1rem 0 .35rem; color:rgba(244,244,242,.82)}
.form input,.form select,.form textarea{width:100%; padding:.85rem .9rem; min-height:50px;
  background:var(--tar-2); color:var(--paper); border:1px solid rgba(244,244,242,.26);
  font-family:inherit; font-size:1rem; border-radius:0; transition:border-color .2s}
.form textarea{min-height:118px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--red-bright); outline:none}
.formnote{margin:.9rem 0 0; font-size:.8rem; opacity:.62}

.foot{background:var(--tar); color:rgba(244,244,242,.74); padding:2.6rem 0 calc(2.6rem + 62px)}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.6rem}
.foot h4{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-bright); margin:0 0 .7rem}
.foot p{margin:.2rem 0; font-size:.9rem}
.foot a{text-decoration:none} .foot a:hover{color:var(--red-bright)}
.footbase{margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line-d);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem}
@media(max-width:780px){ .footgrid{grid-template-columns:1fr} }

.mbar{position:fixed; left:0; right:0; bottom:0; display:none; z-index:70; background:var(--tar);
  border-top:2px solid var(--red)}
.mbar a{flex:1; display:flex; align-items:center; justify-content:center; min-height:58px;
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--paper)}
.mbar a.prim{background:var(--red); color:#fff}
@media(max-width:780px){ .mbar{display:flex} }


/* ---------- Scroll-Fortschritt ---------- */
.sprog{position:fixed; top:0; left:0; height:3px; width:0; background:var(--red); z-index:90;
  transition:width .1s linear; pointer-events:none}

/* ---------- Vorher / Nachher ---------- */
.ba{position:relative; overflow:hidden; background:var(--tar); aspect-ratio:4/3; user-select:none}
.ba img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.ba-a{position:absolute; inset:0}
.ba-b{position:absolute; inset:0; width:50%; overflow:hidden; border-right:3px solid var(--red)}
.ba-b .in{position:absolute; top:0; left:0; height:100%; overflow:hidden}
.ba-hand{position:absolute; top:0; bottom:0; left:50%; width:46px; margin-left:-23px;
  display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:4}
.ba-hand b{width:46px; height:46px; background:var(--red); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:1rem; box-shadow:0 2px 14px rgba(0,0,0,.45)}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; z-index:5}
.ba-range:focus-visible ~ .ba-hand b{outline:3px solid #fff; outline-offset:2px}
.ba-lbl{position:absolute; bottom:.9rem; z-index:3; font-family:"IBM Plex Mono",monospace; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(20,23,26,.85);
  padding:.4rem .65rem; pointer-events:none}
.ba-lbl.l{left:.9rem} .ba-lbl.r{right:.9rem}

/* ---------- Terminplaner ---------- */
.planer{border:2px solid var(--tar); background:#fff}
.planer-top{padding:1rem 1.2rem; border-bottom:2px solid var(--tar); display:flex;
  justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.planer-in{padding:1.3rem 1.2rem; background:var(--paper-2); border-bottom:1px solid var(--line)}
.planer-in label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:.5rem; color:#4E565C}
.planer-in input{width:100%; max-width:320px; padding:.8rem .9rem; min-height:50px; font-family:inherit;
  font-size:1rem; border:2px solid var(--tar); background:#fff; color:var(--tar); border-radius:0}
.planer-in input:focus{outline:none; border-color:var(--red)}
.crow{display:grid; grid-template-columns:132px 1fr auto; gap:1rem; align-items:baseline;
  padding:.82rem 1.2rem; border-bottom:1px solid var(--line);
  opacity:0; transform:translateX(-10px); transition:opacity .45s, transform .45s}
.crow.on{opacity:1; transform:none}
.crow:last-of-type{border-bottom:0}
.crow .dt{font-family:"IBM Plex Mono",monospace; font-size:.83rem; color:var(--red); font-weight:500}
.crow .lb2{font-size:.95rem; font-weight:500}
.crow .lb2 i{display:block; font-style:normal; font-size:.79rem; color:#5C6469; font-weight:400}
.crow .pill{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.24rem .5rem; background:#F7D9DB; color:#7A0C12; white-space:nowrap}
.crow.start{background:#FFF3F3}
.crow.start .dt{font-weight:700}
.planer-foot{padding:.95rem 1.2rem; border-top:2px solid var(--tar); background:var(--paper-2);
  font-family:"IBM Plex Mono",monospace; font-size:.71rem; letter-spacing:.05em; color:#4E565C}
.warn{background:var(--red); color:#fff; padding:.9rem 1.2rem; font-family:"IBM Plex Mono",monospace;
  font-size:.74rem; letter-spacing:.04em; display:none; line-height:1.5}
.warn.on{display:block}
@media(max-width:620px){ .crow{grid-template-columns:1fr; gap:.25rem} .crow .pill{justify-self:start} }

/* ---------- Lightbox ---------- */
.lbx{position:fixed; inset:0; z-index:100; background:rgba(10,11,12,.96); display:none;
  align-items:center; justify-content:center; padding:clamp(3.6rem,7vw,4.6rem) clamp(1rem,4vw,5rem)}
.lbx.on{display:flex}
.lbx figure{margin:0; max-width:1080px; width:100%}
.lbx img{width:100%; max-height:74vh; object-fit:contain; background:var(--tar)}
.lbx figcaption{color:var(--paper); margin-top:.9rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.94rem}
.lbx figcaption span{font-family:"IBM Plex Mono",monospace; font-size:.72rem; opacity:.78}
.lbx button{position:absolute; background:var(--red); color:#fff; border:0; cursor:pointer;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  font-family:"IBM Plex Mono",monospace; transition:background .2s}
.lbx button:hover{background:var(--red-dark)}
.lbx .x{top:1rem; right:1rem} .lbx .pv{left:1rem; top:50%; margin-top:-26px} .lbx .nx{right:1rem; top:50%; margin-top:-26px}
.ref{cursor:zoom-in}
.ref-zoom{position:absolute; top:.8rem; right:.8rem; z-index:3; width:34px; height:34px;
  background:rgba(20,23,26,.72); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; opacity:0; transition:opacity .3s; pointer-events:none}
.ref:hover .ref-zoom,.ref:focus-visible .ref-zoom{opacity:1}

/* ---------- Live-Badge ---------- */
.live{display:inline-flex; align-items:center; gap:.5rem; font-family:"IBM Plex Mono",monospace;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
.live b{width:8px; height:8px; background:#fff; border-radius:50%; animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.75)}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faqi{border-bottom:1px solid var(--line)}
.faqq{width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:1.15rem 2.6rem 1.15rem 0; font-family:inherit; font-size:1.04rem; font-weight:500;
  color:var(--tar); position:relative; min-height:56px}
.faqq::after{content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace; font-size:1.5rem; color:var(--red); transition:transform .3s}
.faqi.open .faqq::after{transform:translateY(-50%) rotate(45deg)}
.faqq:hover{color:var(--red)}
.faqa{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1)}
.faqi.open .faqa{grid-template-rows:1fr}
.faqa > div{overflow:hidden}
.faqa p{margin:0 0 1.15rem; max-width:70ch; color:#3C4348}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .crow{opacity:1; transform:none}
  .live b{animation:none}
  .sprog{transition:none}
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  .hero h1 .ln i{transform:none}
  .hero-eye,.hero .lead,.hero .btnrow,.protokoll div{opacity:1; transform:none}
  .tape i{animation:none}
}

/* ================= Unterseiten ================= */
.phead{background:var(--red); color:#fff; padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2.2rem,5vw,3.4rem);
  position:relative; overflow:hidden}
.phead::after{content:""; position:absolute; right:-8%; top:-40%; width:46%; height:180%;
  background:rgba(0,0,0,.09); transform:rotate(14deg)}
.phead .wrap{position:relative; z-index:1}
.phead .sec-label::after{background:rgba(255,255,255,.45)}
.phead .lead{margin:1.2rem 0 0; color:rgba(255,255,255,.93)}
.mainnav a.cur{opacity:1; color:var(--red-bright)}
.mainnav a.cur::after{right:0}
.xlink{font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.06em;
  text-decoration:none; color:var(--red-bright)}
.xlink:hover{text-decoration:underline}

/* ---------- Innen / Aussen ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.8rem)}
@media(max-width:820px){ .duo{grid-template-columns:1fr} }
.duo-card{border:2px solid var(--tar); background:#fff; padding:clamp(1.3rem,3vw,2rem); position:relative}
.duo-card:nth-child(2){background:var(--tar); color:var(--paper); border-color:var(--tar)}
.duo-k{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; background:var(--red); color:#fff; padding:.3rem .6rem; margin-bottom:1rem}
.duo-card h3{margin:0 0 1rem}
.duo-card ul{margin:0; padding:0; list-style:none}
.duo-card li{font-size:.95rem; padding:.42rem 0 .42rem 1.15rem; position:relative;
  border-bottom:1px solid var(--line)}
.duo-card:nth-child(2) li{border-bottom-color:var(--line-d)}
.duo-card li:last-child{border-bottom:0}
.duo-card li::before{content:""; position:absolute; left:0; top:1.05em; width:7px; height:2px; background:var(--red)}
.duo-card:nth-child(2) li::before{background:var(--red-bright)}

/* ---------- Qualifikation ---------- */
.quals{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(1.5rem,4vw,3rem)}
@media(max-width:760px){ .quals{grid-template-columns:1fr} }
.qual{padding:1.3rem 0; border-bottom:1px solid var(--line)}
.qual h4{margin:0 0 .4rem; font-family:"IBM Plex Sans Condensed",sans-serif; text-transform:uppercase;
  font-size:1rem; font-weight:700; color:var(--red)}
.qual p{margin:0; font-size:.94rem; color:#3C4348}

/* ---------- Kontakt auf hell ---------- */
.kbox--l{border:1px solid var(--line)}
.kbox--l:hover{border-color:var(--red); background:rgba(195,18,26,.05)}
.kbox--l dt{color:var(--red)}
.form--l label{color:#4E565C}
.form--l input,.form--l select,.form--l textarea{background:#fff; color:var(--tar); border:2px solid var(--tar)}
.form--l input:focus,.form--l select:focus,.form--l textarea:focus{border-color:var(--red)}
.form--l .formnote{color:#5C6469; opacity:1}
.formmsg{display:none; margin-top:1rem; padding:.9rem 1.1rem; background:var(--red); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; line-height:1.5}
.formmsg.on{display:block}

/* ---------- Rechtstexte ---------- */
.legal{max-width:760px}
.legal h2{font-family:"IBM Plex Sans Condensed",sans-serif; text-transform:uppercase; font-size:1.15rem;
  font-weight:700; margin:2rem 0 .6rem; padding-top:1rem; border-top:2px solid var(--red)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 .9rem}
.legal a{color:var(--red)}
.legal .stamp{margin-top:2rem; font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:#5C6469}

/* ---------- Cookie-Hinweis ---------- */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--tar);
  color:var(--paper); border-top:3px solid var(--red); padding:1.1rem clamp(1.1rem,4vw,2.6rem);
  display:none; gap:1.4rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cookie-banner.show{display:flex}
.cookie-content{max-width:620px}
.cookie-content h3{margin:0 0 .3rem; font-family:"IBM Plex Sans Condensed",sans-serif;
  text-transform:uppercase; font-size:1rem; font-weight:700}
.cookie-content p{margin:0 0 .3rem; font-size:.88rem; opacity:.85}
.cookie-content a{font-size:.82rem; color:var(--red-bright)}
.cookie-buttons{display:flex; gap:.6rem; flex-wrap:wrap}
.cookie-btn{min-height:46px; padding:.7rem 1.3rem; border:2px solid var(--red); cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.cookie-accept{background:var(--red); color:#fff}
.cookie-accept:hover{background:var(--red-dark); border-color:var(--red-dark)}
.cookie-decline{background:transparent; color:var(--paper)}
.cookie-decline:hover{background:var(--paper); color:var(--tar)}
@media(max-width:780px){ .cookie-banner{bottom:60px} }

/* ---------- Bauvorhaben im Detail ---------- */
.jobs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.6rem)}
@media(max-width:900px){ .jobs{grid-template-columns:1fr} }
.job{border:2px solid var(--tar); background:#fff; padding:clamp(1.2rem,2.6vw,1.7rem); display:flex; flex-direction:column}
.job .jk{display:inline-block; align-self:flex-start; font-family:"IBM Plex Mono",monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; background:var(--red); color:#fff; padding:.3rem .6rem; margin-bottom:.9rem}
.job h3{margin:0 0 .7rem; font-family:"IBM Plex Sans Condensed",sans-serif; text-transform:uppercase;
  font-size:1.15rem; font-weight:700}
.job p{margin:0 0 1rem; font-size:.94rem; color:#3C4348}
.job dl{margin:auto 0 0; padding-top:.9rem; border-top:1px solid var(--line)}
.job dt{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:#5C6469; margin-top:.7rem}
.job dt:first-child{margin-top:0}
.job dd{margin:.1rem 0 0; font-family:"IBM Plex Mono",monospace; font-size:.85rem}

.h1sub{display:block; margin-top:1.1rem; font-family:"IBM Plex Sans",sans-serif; font-weight:500;
  font-size:clamp(.98rem,1.5vw,1.2rem); line-height:1.45; text-transform:none; letter-spacing:0;
  opacity:.92; max-width:46ch}

.crumbs{background:var(--tar); border-top:1px solid var(--line-d)}
.crumbs .wrap{display:flex; gap:.6rem; align-items:center; padding-top:.7rem; padding-bottom:.7rem;
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,244,242,.6); flex-wrap:wrap}
.crumbs a{color:var(--red-bright); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:rgba(244,244,242,.85)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff; padding:.85rem 1.3rem; font-weight:600; text-decoration:none}
.skip:focus{left:0}

.morelnk{margin:.9rem 0 0}
.morelnk a{color:var(--red); font-weight:600; text-decoration:none; font-size:.93rem}
.morelnk a:hover{text-decoration:underline}