@import url("../fonts/fonts.css");

/* ---------- Tokens ---------- */
:root{
  /* Petrolblau statt Schwarz - ruhiger, aber kontraststark genug
     fuer die Statik-Animation und die Hintergrundzeichnung. */
  --graphit:#14415A;        /* Hauptflaeche dunkel */
  --graphit-2:#1B4E69;
  --graphit-3:#24607F;
  --paper:#F4F6F5;
  --paper-2:#E9EEEC;
  --ink:#0F2E3E;            /* Text dunkel - Petrol statt Schwarz */
  --ink-soft:#4B6675;
  --gruen:#2A6E52;          /* Markenakzent */
  --gruen-hell:#63B98F;     /* Akzent auf dunklem Grund */
  --zug:#C6553C;            /* Statik-Semantik: Zug */
  --zug-hell:#E0684C;
  --druck:#2F7CAE;          /* Statik-Semantik: Druck */
  --druck-hell:#86C6E6;
  --ok:#4FA37B;
  --line-dark:rgba(244,246,245,.16);
  --line-light:rgba(15,46,62,.16);
  --maxw:1180px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{font-size:17px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--druck);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

h1,h2,h3{line-height:1.15;letter-spacing:-.022em;font-weight:600;margin:0}
h1{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:600}
h2{font-size:clamp(1.55rem,2.8vw,2.25rem)}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.012em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--ink-soft)}

/* Eyebrow / Bemaßungs-Label */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-light);max-width:120px}
.on-dark .eyebrow,.hero .eyebrow{color:rgba(244,246,245,.55)}
.on-dark .eyebrow::after,.hero .eyebrow::after{background:var(--line-dark)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(20,65,90,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark)}
.site-header .wrap{display:flex;align-items:center;gap:2rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--paper);line-height:1.2}
.brand-mark{height:40px;width:auto;flex:none}
.brand-txt{display:flex;flex-direction:column}
.brand b{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.brand-txt > span{font-family:var(--mono);font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(244,246,245,.52);white-space:nowrap}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2rem}
nav.main a{
  text-decoration:none;color:rgba(244,246,245,.72);font-size:.93rem;
  padding:.35rem 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
nav.main a:hover{color:var(--paper)}
nav.main a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--gruen-hell)}
.nav-tel{font-family:var(--mono);font-size:.86rem;color:var(--paper)!important;border:1px solid var(--line-dark);padding:.5rem .9rem!important;border-radius:2px}
.nav-tel:hover{border-color:rgba(244,246,245,.4)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-dark);color:var(--paper);width:42px;height:38px;border-radius:2px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:18px;height:18px}

/* ---------- Hero ---------- */
.hero{padding:0;position:relative;background:var(--graphit);color:var(--paper);overflow:hidden;border-bottom:1px solid var(--line-dark)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 40%,transparent 100%);
}
.hero .wrap{position:relative;max-width:1340px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem;align-items:center;padding-top:4.5rem;padding-bottom:4.5rem}
.hero h1{color:var(--paper)}
.hero h1 .accent{color:var(--gruen-hell)}
.hero .lead{color:rgba(244,246,245,.72);margin-top:1.3rem;max-width:44ch}

.anchors{display:flex;flex-wrap:wrap;gap:0;margin:2.2rem 0 2rem;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.anchors div{flex:1 1 33%;padding:1rem 1.1rem 1rem 0;min-width:120px}
.anchors b{display:block;font-family:var(--mono);font-size:1.35rem;font-weight:500;color:var(--paper);letter-spacing:-.02em}
.anchors span{font-size:.8rem;color:rgba(244,246,245,.55);letter-spacing:.02em}

.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:2px;font-size:.95rem;font-weight:500;
  border:1px solid transparent;transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.btn-primary{background:var(--gruen);color:#fff}
.btn-primary:hover{background:#22593F;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-dark);color:var(--paper)}
.btn-ghost:hover{border-color:rgba(244,246,245,.45);background:rgba(244,246,245,.05)}
.btn-dark{background:var(--graphit);color:var(--paper)}
.btn-dark:hover{background:var(--graphit-3);transform:translateY(-1px)}

/* ---------- Statik-Canvas ---------- */
.statik{position:relative;width:100%}
.statik svg{width:100%;height:auto;display:block;overflow:visible}
.statik-cap{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(244,246,245,.42);border-top:1px solid var(--line-dark);margin-top:.6rem;padding-top:.6rem;
}
.readout{margin-top:1.1rem;border-top:1px solid var(--line-dark);padding-top:1rem}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:2px}
.metrics .m{background:var(--graphit);padding:.7rem .6rem;text-align:left}
.metrics .m span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,246,245,.42);margin-bottom:.25rem;white-space:nowrap}
.metrics .m b{font-family:var(--mono);font-size:1.02rem;font-weight:500;color:var(--paper);letter-spacing:-.02em;white-space:nowrap}
.metrics .m b i{font-style:normal;font-size:.68rem;color:rgba(244,246,245,.45);margin-left:.15rem}
.metrics .m.zug b{color:var(--zug-hell)}
.metrics .m.druck b{color:var(--druck-hell)}

.checks{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:.6rem;align-items:center;margin-top:.9rem}
.checks .c{
  display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;
  color:rgba(244,246,245,.28);border:1px solid var(--line-dark);border-radius:2px;padding:.45rem .55rem;
  opacity:.4;transition:opacity .4s ease,color .4s ease,border-color .4s ease,background .4s ease;white-space:nowrap;overflow:hidden;
}
.checks .c i{font-style:normal;font-size:.85rem;line-height:1;opacity:0;transition:opacity .3s}
.checks .c em{font-style:normal;margin-left:auto;opacity:.75}
.checks .c.on{opacity:1;color:var(--ok);border-color:rgba(79,163,123,.42);background:rgba(79,163,123,.11)}
.checks .c.on i{opacity:1}
.checks .verdict{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ok);border:1px solid rgba(79,163,123,.45);background:rgba(79,163,123,.14);
  padding:.5rem .8rem;border-radius:2px;opacity:0;transform:translateY(3px);
  transition:opacity .45s ease,transform .45s ease;white-space:nowrap;
}
.checks .verdict.on{opacity:1;transform:none}

/* ---------- Sections ---------- */
section{padding:5.5rem 0}
section.tight{padding:4rem 0}
.dark{background:var(--graphit);color:var(--paper)}
.dark h2,.dark h3{color:var(--paper)}
.dark p{color:rgba(244,246,245,.7)}
.alt{background:var(--paper-2)}
.sec-head{max-width:60ch;margin-bottom:3rem}
.sec-head p{color:var(--ink-soft)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.grid-3 > article{background:var(--paper);padding:2rem 1.8rem}
.alt .grid-3 > article{background:var(--paper-2)}
.grid-3 .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--gruen);display:block;margin-bottom:1rem}
.grid-3 h3{margin-bottom:.7rem}
.grid-3 ul{margin:.9rem 0 0;padding:0;list-style:none;font-size:.93rem;color:var(--ink-soft)}
.grid-3 li{padding:.34rem 0 .34rem 1.1rem;position:relative;border-top:1px solid var(--line-light)}
.grid-3 li:first-child{border-top:0}
.grid-3 li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:1px;background:var(--gruen)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:start}
.facts{border-top:1px solid var(--line-light);margin-top:1.5rem}
.facts div{display:flex;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid var(--line-light);font-size:.95rem}
.facts dt,.facts b{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);width:9.5rem;flex:none;padding-top:.2rem;font-weight:400;hyphens:auto}
.dark .facts{border-color:var(--line-dark)}
.dark .facts div{border-color:var(--line-dark)}
.dark .facts b{color:rgba(244,246,245,.45)}

/* ---------- Leistungsliste ---------- */
.leistung{border-top:1px solid var(--line-light);padding:2.4rem 0;display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr);gap:2rem}
.leistung:last-of-type{border-bottom:1px solid var(--line-light)}
.leistung .idx{font-family:var(--mono);font-size:.78rem;color:var(--gruen);letter-spacing:.1em;padding-top:.35rem}
.leistung h3{font-size:1.28rem;overflow-wrap:break-word;hyphens:auto}
.leistung .body{color:var(--ink-soft);font-size:1rem}
.leistung .body p:last-child{margin-bottom:0}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tags span{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;border:1px solid var(--line-light);padding:.25rem .55rem;border-radius:2px;color:var(--ink-soft)}


/* ---------- Plangrafiken / 3D-Modelle ---------- */
figure.plan{margin:1.7rem 0 .2rem;max-width:620px}
figure.plan .frame{position:relative;border:1px solid var(--line-light);border-radius:3px;overflow:hidden;background:#EEF2F4}
figure.plan img{width:100%;height:auto}
figure.plan figcaption{font-size:.95rem;line-height:1.62;color:var(--ink-soft);
  margin-top:.8rem;overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}
figure.plan figcaption b{display:block;margin-bottom:.45rem;font-family:var(--mono);
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--graphit);hyphens:none}
figure.plan.narrow{max-width:470px}
figure.plan.portrait{max-width:330px;margin:0 0 1.8rem}
figure.plan.portrait .frame{background:var(--paper-2)}

/* ---------- Modellansicht ---------- */
.modell-auf{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-end;padding:.7rem}
.modell-auf:focus-visible{outline:2px solid var(--graphit-3);outline-offset:-3px}
.modell-marke{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(20,65,90,.9);color:var(--paper);padding:.4rem .68rem;border-radius:2px;
  display:inline-flex;align-items:center;gap:.45rem;transition:background .18s}
.modell-auf:hover .modell-marke,.modell-auf:focus-visible .modell-marke{background:var(--graphit-3)}
.modell-marke svg{width:13px;height:13px;flex:none}

body.modell-offen{overflow:hidden}
.modellbuehne[hidden]{display:none}
.modellbuehne{position:fixed;inset:0;z-index:60;background:rgba(15,46,62,.97);
  display:flex;flex-direction:column;padding:clamp(.75rem,2.5vw,2rem)}
.mb-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  color:var(--paper);margin-bottom:.75rem}
.mb-kopf b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(244,246,245,.55);font-weight:600;margin-bottom:.15rem}
.mb-titel{font-size:.95rem;color:rgba(244,246,245,.92)}
.mb-zu{flex:none;width:40px;height:40px;border:1px solid rgba(244,246,245,.28);background:transparent;
  color:var(--paper);border-radius:3px;cursor:pointer;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;transition:background .18s}
.mb-zu:hover{background:rgba(244,246,245,.12)}
.mb-flaeche{flex:1;min-height:0;position:relative;background:#EEF2F4;border-radius:3px;overflow:hidden}
.mb-flaeche model-viewer{width:100%;height:100%;display:block;background:#EEF2F4}
.mb-status{position:absolute;inset:0;margin:0;display:grid;place-items:center;text-align:center;
  padding:1.5rem;font-family:var(--mono);font-size:.76rem;line-height:1.8;color:var(--ink-soft)}
.mb-status[hidden]{display:none}
.mb-fuss{font-family:var(--mono);font-size:.66rem;color:rgba(244,246,245,.5);
  margin:.7rem 0 0;text-align:center}
@media(max-width:640px){.mb-fuss{font-size:.6rem}}

/* ---------- Leistungsvermerk ---------- */
.leistung .body .vermerk{margin:1.1rem 0 0;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  color:#8A5A2B;padding-left:.8rem;border-left:2px solid rgba(198,85,60,.35)}
.leistung .body .patent{margin-bottom:.7rem}
.leistung .body .patent b{color:var(--ink)}

/* ---------- Fliesstext-Abschnitt (Startseite) ---------- */
.facts span{min-width:0;overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}
.facts span span.nb,.nb{white-space:nowrap;hyphens:none}
.facts div>span{line-height:1.55}
.fliess{max-width:74ch;color:var(--ink-soft)}
.fliess p{margin-bottom:1.1rem}
.fliess .hinweis-klein{font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--ink-soft);
  border-left:2px solid var(--line-light);padding-left:.9rem;margin-top:1.6rem}

/* Startseite: Modellbild neben kurzem Text */
.showcase .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.2rem;align-items:center}
.showcase figure.plan{margin:0;max-width:none}
.showcase h2{margin-bottom:.9rem}
@media(max-width:860px){
  .showcase .wrap{grid-template-columns:1fr;gap:1.9rem}
  figure.plan,figure.plan.narrow{max-width:none}
}
/* ---------- Kontakt / Formular ---------- */
.form{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.96rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-light);border-radius:2px;padding:.75rem .85rem;width:100%;
  transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--druck);outline:none}
.field textarea{min-height:150px;resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--ink-soft)}
.consent input{width:18px;height:18px;flex:none;margin-top:.18rem;accent-color:var(--gruen)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.9rem;color:var(--ink-soft)}
.notice{border-left:3px solid var(--zug);background:rgba(198,85,60,.07);padding:1rem 1.2rem;font-size:.93rem;margin-bottom:1.5rem}
.notice.ok{border-color:var(--ok);background:rgba(79,163,123,.1)}

/* ---------- Footer ---------- */
footer{background:var(--graphit);color:rgba(244,246,245,.62);padding:4rem 0 2rem;font-size:.92rem;border-top:1px solid var(--line-dark)}
.foot-mark{height:62px;width:auto;margin:0 0 1.4rem;opacity:.92}
footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,246,245,.42);margin:0 0 1rem;font-weight:400}
footer a{color:rgba(244,246,245,.62);text-decoration:none}
footer a:hover{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{padding:.22rem 0}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:3rem;padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:rgba(244,246,245,.4)}

/* ---------- Legal pages ---------- */
.legal{max-width:74ch}
.legal h2{margin:2.6rem 0 .9rem;font-size:1.35rem}
.legal h3{margin:1.8rem 0 .6rem}
.legal p,.legal li{color:var(--ink-soft);font-size:.97rem}
.legal ul{padding-left:1.1rem}
.legal address{font-style:normal;font-family:var(--mono);font-size:.92rem;line-height:1.9;color:var(--ink)}
.todo{background:#FFF7D6;border-left:3px solid #C9A227;padding:.9rem 1.1rem;font-size:.9rem;color:#5B4A0E;margin:1rem 0}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:2.5rem;padding-top:3rem;padding-bottom:3rem}
  .metrics{grid-template-columns:repeat(3,1fr)}
  .checks{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .facts div{flex-direction:column;gap:.35rem}
  .facts dt,.facts b{width:auto;padding-top:0}
  .leistung{grid-template-columns:3rem minmax(0,1fr);gap:1.2rem}
  .leistung .body{grid-column:2}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  html{font-size:16px}
  .brand-mark{height:34px}
  .foot-mark{height:52px}
  .brand b{font-size:.95rem}
  .brand-txt > span{font-size:.52rem;letter-spacing:.04em;white-space:normal;line-height:1.35}
  section{padding:3.5rem 0}
  .wrap{padding:0 20px}
  .row-2{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:2rem}
  .anchors div{flex:1 1 100%;border-bottom:1px solid var(--line-dark);padding:.7rem 0}
  .anchors b{font-size:1.15rem}
  .anchors div:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- SVG-Beschriftung ---------- */
.statik text{font-family:var(--mono);font-size:12px;fill:rgba(244,246,245,.5);letter-spacing:.05em}
.statik text.strong{fill:rgba(244,246,245,.88);font-size:12.5px}
.statik text.tiny{font-size:10px;letter-spacing:.14em;fill:rgba(244,246,245,.35)}
.statik .sys{stroke:rgba(244,246,245,.22);stroke-width:1;stroke-dasharray:5 5;fill:none}
.statik .dim{stroke:rgba(244,246,245,.3);stroke-width:1;fill:none}
.statik .sup{fill:none;stroke:rgba(244,246,245,.55);stroke-width:1.4;stroke-linejoin:round}
.statik .hatch{stroke:rgba(244,246,245,.3);stroke-width:1}
.statik .glow{stroke:#4FA37B;stroke-width:11;fill:none;opacity:0;transition:opacity .5s ease;stroke-linecap:round;filter:blur(5px)}

/* ---------- Bewegter Hintergrund: technische Zeichnung ----------
   Drei gekachelte SVG-Ebenen, die sich unterschiedlich schnell verschieben.
   Reine CSS-Transformationen, kein JavaScript, kein Neuzeichnen des Layouts. */
.bg-tech{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint}
.bg-tech i{
  position:absolute;top:0;left:0;display:block;
  background-repeat:repeat;transform:translate3d(0,0,0);
}
.bg-tech .l1{
  --tw:120px; --th:120px;
  width:calc(100% + var(--tw));height:calc(100% + var(--th));
  background-image:url("../img/bg-raster.svg");background-size:120px 120px;
  opacity:.055;animation:bgdrift1 150s linear infinite;
}
.bg-tech .l2{
  --tw:760px; --th:560px;
  width:calc(100% + var(--tw));height:calc(100% + var(--th));
  left:calc(-1 * var(--tw));
  background-image:url("../img/bg-technik.svg");background-size:760px 560px;
  opacity:.085;animation:bgdrift2 320s linear infinite;
}
.bg-tech .l3{
  --tw:420px; --th:300px;
  width:calc(100% + var(--tw));height:calc(100% + var(--th));
  top:calc(-1 * var(--th));
  background-image:url("../img/bg-achsen.svg");background-size:420px 300px;
  opacity:.06;animation:bgdrift3 220s linear infinite;
}
@keyframes bgdrift1{from{transform:translate3d(0,0,0)}      to{transform:translate3d(-120px,-120px,0)}}
@keyframes bgdrift2{from{transform:translate3d(0,0,0)}      to{transform:translate3d(760px,-560px,0)}}
@keyframes bgdrift3{from{transform:translate3d(0,0,0)}      to{transform:translate3d(-420px,300px,0)}}

/* Inhalt liegt ueber dem Hintergrund */
main,footer,.site-header{position:relative;z-index:1}
/* Helle Abschnitte lassen die Zeichnung durch, dunkle decken sie ab */
.alt{background:rgba(15,46,62,.032)}
.grid-3 > article{background:rgba(250,252,251,.72)}
.alt .grid-3 > article{background:rgba(245,249,247,.62)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.7)}

@media (prefers-reduced-motion:reduce){
  .bg-tech i{animation:none}
}

/* ---------- Urkunden (PDF im neuen Tab) ---------- */
.urkunde{display:flex;width:fit-content;align-items:flex-start;gap:.5rem;margin-top:.6rem;
  font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--gruen);
  text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.urkunde svg{width:14px;height:14px;flex:none;margin-top:.15rem;opacity:.8}
.urkunde:hover,.urkunde:focus-visible{color:var(--ink);border-bottom-color:var(--line-light)}
.urkunde:hover svg,.urkunde:focus-visible svg{opacity:1}
.uk-pdf{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.1rem}
.uk-zusatz{color:var(--ink-soft);text-transform:none;letter-spacing:.04em}
.leistung .body .patent{margin-bottom:1.15rem}

/* ---------- Praesentationstafeln ---------- */
figure.plan.tafel{max-width:none;margin-top:1.9rem}
.tafel-auf{display:block;text-decoration:none;color:inherit}
.tafel-auf .frame{display:block;position:relative;border:1px solid var(--line-light);
  border-radius:3px;overflow:hidden;background:#fff}
.tafel-auf picture,.tafel-auf img{display:block}
.tafel-auf .modell-marke{position:absolute;right:.7rem;bottom:.7rem}
.tafel-auf:focus-visible .frame{outline:2px solid var(--graphit-3);outline-offset:2px}
.tafel-auf:hover .modell-marke,.tafel-auf:focus-visible .modell-marke{background:var(--graphit-3)}

/* Tafeln duerfen auf breiten Schirmen ueber die mittlere Spalte hinausragen.
   Die Rasterspalten sind 5.5rem | 1fr | 1.15fr bei 2rem Abstand, die mittlere
   Spalte ist also 100/1.15 = 86.957 % der Textspalte breit. */
@media(min-width:981px){
  figure.plan.tafel{width:calc(186.957% + 2rem);margin-left:calc(-86.957% - 2rem)}
}

/* Hochformatige Modellbilder (Stützen, Abfangungen) schmal halten,
   sonst füllt ein 15 m hohes Bauteil die halbe Seite. */
figure.plan.hoch{max-width:300px}
@media(max-width:860px){figure.plan.hoch{max-width:62vw}}

/* ---------- Abbildungen im Leistungsblock: Unterschrift daneben ----------
   Das Raster der Leistungszeile ist 5.5rem | 1fr | 1.15fr bei 2rem Abstand.
   Die Abbildungen standen bisher nur in der dritten Spalte, die zweite blieb
   ab dem ersten Bild leer. Die Figur greift jetzt über beide Spalten:
   Unterschrift links in der mittleren Spalte, Bild rechts an seinem Platz.
   Die inneren Spalten wiederholen 1fr / 1.15fr, das Bild bleibt also exakt
   so breit wie der Fliesstext darüber — die srcset-Angaben stimmen weiter. */
@media(min-width:981px){
  .leistung .body figure.plan:not(.tafel){
    max-width:none;
    width:calc(186.957% + 2rem);
    margin-left:calc(-86.957% - 2rem);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:2rem;
    align-items:start;
  }
  .leistung .body figure.plan:not(.tafel) > .frame{grid-column:2;grid-row:1}
  .leistung .body figure.plan:not(.tafel) > figcaption{
    grid-column:1;grid-row:1;margin-top:0;padding-top:.1rem;
  }
  /* Hochformate: Bild schmal halten, Spalte bleibt bestehen */
  .leistung .body figure.plan.hoch > .frame{max-width:300px}
  .leistung .body figure.plan.narrow > .frame{max-width:470px}
  .leistung .body figure.plan.hoch,
  .leistung .body figure.plan.narrow{max-width:none}
}

/* Klappnavigation schon ab 900 px: darunter passen Marke, Menue und
   Telefonknopf nicht mehr nebeneinander. */
@media (max-width:900px){
  nav.main{position:absolute;top:72px;left:0;right:0;background:var(--graphit-2);
    border-bottom:1px solid var(--line-dark);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem 20px 1rem;display:none}
  nav.main.open{display:flex}
  nav.main a{padding:.8rem 0;border-bottom:1px solid var(--line-dark)}
  .nav-tel{text-align:center;margin-top:.7rem;border-color:var(--line-dark)}
  .nav-toggle{display:inline-flex}
}

/* ---------- Projektgalerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.8rem;
  align-items:start}
@media(max-width:1000px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.galerie{grid-template-columns:minmax(0,1fr);gap:2.2rem}}
figure.gk{margin:0;max-width:none;display:flex;flex-direction:column}
.gk-knopf{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line-light);
  border-radius:3px;overflow:hidden;background:#EEF2F4;cursor:pointer;
  transition:border-color .18s,box-shadow .18s}
/* Einheitliche Kachelhoehe: die Modelle haben sehr verschiedene
   Seitenverhaeltnisse, ohne festes Format wirkt das Raster unruhig. */
.gk-knopf{aspect-ratio:4/3}
.gk-knopf picture{display:block;width:100%;height:100%}
.gk-knopf img{display:block;width:100%;height:100%;object-fit:contain;padding:.5rem}
.gk-knopf:hover{border-color:var(--graphit-3);box-shadow:0 2px 14px rgba(15,46,62,.1)}
.gk-knopf:focus-visible{outline:2px solid var(--graphit-3);outline-offset:2px}
.gk-knopf .modell-marke{position:absolute;right:.6rem;bottom:.6rem}
.gk-knopf:hover .modell-marke{background:var(--graphit-3)}
figure.gk figcaption{margin-top:.75rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
figure.gk figcaption b{display:block;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--graphit);margin-bottom:.3rem;hyphens:none}
.gk-zusatz{display:block}
.gk-daten{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;color:rgba(75,102,117,.7)}

/* Verweis auf die Galerie unter den Modellabbildungen */
.mehr-modelle{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--gruen);
  text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.mehr-modelle:hover,.mehr-modelle:focus-visible{color:var(--ink);border-bottom-color:var(--line-light)}
.mehr-modelle svg{width:13px;height:13px;flex:none}

/* ---------- Hinweis auf die Projektgalerie ---------- */
.galerie-band{background:var(--paper-2);border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);padding:2.2rem 0}
.galerie-band .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.6rem;flex-wrap:wrap}
.galerie-band .gb-text{max-width:56ch}
.galerie-band b{display:block;font-size:1.12rem;color:var(--ink);margin-bottom:.25rem;
  letter-spacing:-.012em}
.galerie-band span{display:block;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.galerie-band .btn{flex:none}
@media(max-width:680px){
  .galerie-band .wrap{flex-direction:column;align-items:flex-start}
  .galerie-band .btn{width:100%;justify-content:center}
}

/* Verweis unter den Modellabbildungen: als Knopf, nicht als Textzeile */
.mehr-modelle{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper);background:var(--gruen);border:0;border-radius:3px;
  padding:.6rem .95rem;text-decoration:none;transition:background .18s}
.mehr-modelle:hover,.mehr-modelle:focus-visible{background:var(--graphit-3);
  border-bottom-color:transparent}