/* KERN · Konzept 05 „Leitstand" – gemeinsame Styles */
:root{
  --schmiedeschwarz:#1A1A1C;
  --aluminium:#E9E9E9;
  --petrol:#0F7173;
  --magenta:#AF125A;

  /* abgeleitete Töne */
  --schwarz-tief:#121214;
  --schwarz-panel:#202023;
  --schwarz-linie:#2c2c30;
  --petrol-hell:#1aa3a6;
  --petrol-dunkel:#0a4f51;
  --petrol-linie:rgba(15,113,115,.55);
  --alu-dim:#a7a7ab;
  --alu-dunkel:#c9c9cc;
  --magenta-hell:#d01a6e;

  --f-display:"Michroma", "Unbounded", sans-serif;
  --f-body:"Outfit", "Sora", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --gutter:clamp(16px, 4vw, 56px);
  --max:1360px;
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:84px}
body{
  margin:0;background:var(--schmiedeschwarz);color:var(--aluminium);
  font-family:var(--f-body);font-size:17px;line-height:1.6;font-weight:400;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:2px solid var(--petrol-hell);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--aluminium);color:var(--schmiedeschwarz);padding:8px 14px;z-index:100;font-family:var(--f-mono);font-size:13px}
.skip:focus{top:12px}

.mono{font-family:var(--f-mono)}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--petrol-hell);box-shadow:0 0 0 2px rgba(26,163,166,.18),0 0 8px rgba(26,163,166,.8);flex:none}
.led--mag{background:var(--magenta-hell);box-shadow:0 0 0 2px rgba(175,18,90,.2),0 0 8px rgba(208,26,110,.9)}
.led--aus{background:#4a4a50;box-shadow:none}

/* ============ Cycle-Start-Taste (einziges großes Magenta-Element) ============ */
.taste{
  --h:52px;
  position:relative;display:inline-flex;align-items:center;gap:14px;
  height:var(--h);padding:0 22px 0 8px;border-radius:12px;border:0;cursor:pointer;
  font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:.01em;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#c3186a 0%,var(--magenta) 55%,#930d4b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 0 0 1px #0d0d0e,
    0 0 0 5px #2a2a2e,
    0 0 0 6px #3a3a3f,
    0 6px 0 4px #111,
    0 14px 30px rgba(175,18,90,.28);
  transform:translateY(0);transition:transform .12s ease, box-shadow .12s ease, filter .2s;
  white-space:nowrap;
}
.taste__sym{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:rgba(0,0,0,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.taste__sym svg{width:14px;height:14px}
.taste__txt{display:flex;flex-direction:column;line-height:1.1}
.taste__txt small{font-family:var(--f-mono);font-weight:500;font-size:9.5px;letter-spacing:.16em;opacity:.78;margin-bottom:3px}
.taste:hover{filter:brightness(1.08)}
.taste:active{transform:translateY(4px);box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px #0d0d0e,0 0 0 5px #2a2a2e,0 0 0 6px #3a3a3f,0 2px 0 4px #111,0 6px 16px rgba(175,18,90,.25)}
.taste:focus-visible{outline:2px solid var(--aluminium);outline-offset:9px}
.taste--petrol{background:linear-gradient(180deg,#14898b 0%,var(--petrol) 55%,#0a5557 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px #0d0d0e,0 0 0 5px #2a2a2e,0 0 0 6px #3a3a3f,0 6px 0 4px #111,0 14px 30px rgba(15,113,115,.25)}
.taste--gross{--h:72px;font-size:19px;padding:0 32px 0 12px;border-radius:16px;gap:18px}
.taste--gross .taste__sym{width:50px;height:50px;border-radius:12px}
.taste--gross .taste__sym svg{width:18px;height:18px}
.taste--gross .taste__txt small{font-size:10.5px}

/* ================================ Header ================================ */
.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(22,22,24,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--schwarz-linie);
}
.kopf__in{display:flex;align-items:center;gap:28px;height:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo svg{height:30px;width:auto}
.logo__desc{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--alu-dim);text-transform:uppercase;border-left:1px solid var(--schwarz-linie);padding-left:12px;line-height:1.3}
.modi{display:flex;gap:2px;margin-left:auto;background:var(--schwarz-tief);padding:4px;border-radius:9px;border:1px solid var(--schwarz-linie)}
.modi a{
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:6px;text-decoration:none;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--alu-dim);transition:background .2s,color .2s;
}
.modi a .nr{color:#6b6b72}
.modi a .led{width:6px;height:6px}
.modi a:not(.ist-aktiv) .led{background:#3d3d42;box-shadow:none}
.modi a:hover{color:var(--aluminium);background:#1d1d20}
.modi a.ist-aktiv{background:var(--petrol-dunkel);color:#fff;box-shadow:inset 0 0 0 1px var(--petrol)}
.modi a.ist-aktiv .nr{color:#9fd8d9}
.kopf .taste{--h:44px;font-size:14px;padding:0 16px 0 6px;gap:10px;border-radius:10px}
.kopf .taste .taste__sym{width:30px;height:30px;border-radius:7px}
.kopf .taste .taste__txt small{display:none}
.menue-knopf{display:none;margin-left:auto;background:var(--schwarz-tief);border:1px solid var(--schwarz-linie);color:var(--aluminium);border-radius:8px;height:42px;padding:0 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;align-items:center;gap:8px;cursor:pointer}

/* ================================ Hero ================================ */
.hero{position:relative;padding:56px 0 64px;background:
  radial-gradient(900px 500px at 50% 55%, rgba(15,113,115,.14), transparent 70%),
  var(--schmiedeschwarz);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(233,233,233,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,233,233,.035) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.hero__kopf{position:relative;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:40px}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol-hell);display:flex;align-items:center;gap:10px}
.hero h1{font-family:var(--f-display);font-size:clamp(30px,4.6vw,66px);line-height:1.12;letter-spacing:-.01em;margin-top:18px;color:#f3f3f3}
.hero h1 em{font-style:normal;color:var(--alu-dim)}
.hero__lead{max-width:430px;color:var(--alu-dunkel);font-size:18px;font-weight:300}
.hero__lead strong{font-weight:500;color:var(--aluminium)}
.hero__aktion{display:flex;gap:26px;align-items:center;margin-top:28px;flex-wrap:wrap}
.link-sek{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--aluminium);text-decoration:none;border-bottom:1px solid var(--petrol);padding-bottom:3px}
.link-sek:hover{border-color:var(--petrol-hell);color:#fff}

.panel{
  position:relative;display:grid;grid-template-columns:250px 1fr 300px;
  background:linear-gradient(180deg,#1e1e21,#19191b);border:1px solid #2e2e33;border-radius:14px;
  box-shadow:0 0 0 6px #151517, 0 0 0 7px #2a2a2e, 0 40px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.panel__spalte{border-right:1px solid var(--schwarz-linie);display:flex;flex-direction:column;min-width:0}
.panel__spalte:last-child{border-right:0;border-left:1px solid var(--schwarz-linie)}
.panel__titel{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--schwarz-linie);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--alu-dim);text-transform:uppercase}
.panel__titel b{font-weight:500;color:var(--petrol-hell)}
.achsen{padding:6px 0}
.achse{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;padding:12px 16px;border-bottom:1px solid #26262a}
.achse dt{font-family:var(--f-display);font-size:15px;color:var(--petrol-hell)}
.achse dd{margin:0;font-family:var(--f-mono);font-size:24px;font-weight:500;text-align:right;color:#f4f4f4;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.achse span{font-family:var(--f-mono);font-size:10px;color:#77777e;margin-left:6px}
.werte{padding:8px 16px 16px;display:grid;gap:14px;margin-top:auto}
.wert{display:grid;gap:5px}
.wert__k{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:#8a8a90;text-transform:uppercase}
.wert__k b{color:var(--aluminium);font-weight:500;letter-spacing:.02em;font-size:12px}
.balken{height:4px;background:#2b2b30;border-radius:2px;overflow:hidden}
.balken i{display:block;height:100%;width:60%;background:var(--petrol-hell);border-radius:2px;transition:width .3s}

.ansicht{position:relative;min-height:470px;background:
   radial-gradient(circle at 50% 50%, rgba(15,113,115,.10), transparent 65%), #151517}
.ansicht canvas{position:absolute;inset:0;width:100%;height:100%}
.ansicht__ecke{position:absolute;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:#7d7d84;text-transform:uppercase;pointer-events:none}
.ansicht__ecke--ol{top:14px;left:16px}.ansicht__ecke--or{top:14px;right:16px;text-align:right}
.ansicht__ecke--ul{bottom:14px;left:16px}.ansicht__ecke--ur{bottom:14px;right:16px;text-align:right}
.ansicht__ecke b{color:var(--aluminium);font-weight:500}
.ansicht__rahmen{position:absolute;inset:10px;pointer-events:none;
  background:
   linear-gradient(var(--petrol),var(--petrol)) top left/14px 1px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) top left/1px 14px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) top right/14px 1px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) top right/1px 14px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) bottom left/14px 1px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) bottom left/1px 14px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) bottom right/14px 1px no-repeat,
   linear-gradient(var(--petrol),var(--petrol)) bottom right/1px 14px no-repeat}

.gcode{position:relative;flex:1;overflow:hidden;min-height:260px;
  mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent)}
.gcode ol{position:absolute;left:0;right:0;top:0;padding:110px 0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gcode li{display:block;font-family:var(--f-mono);font-size:12.5px;line-height:26px;padding:0 16px;color:#85858c;white-space:nowrap}
.gcode li::before{content:attr(data-n);display:inline-block;width:44px;color:#55555c;font-size:11px}
.gcode li.ist-aktiv{background:rgba(15,113,115,.28);color:#fff;box-shadow:inset 2px 0 0 var(--petrol-hell)}
.gcode li.ist-fertig{color:#a5a5ab}
.gcode .kom{color:#5e8f90}
.programm{padding:12px 16px;border-top:1px solid var(--schwarz-linie);display:grid;gap:6px}

.statuszeile{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:11px 16px;border-top:1px solid var(--schwarz-linie);background:#151517;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--alu-dim);text-transform:uppercase;flex-wrap:wrap}
.statuszeile .bereit{color:var(--aluminium);display:flex;align-items:center;gap:10px}
.statuszeile .bereit b{color:var(--petrol-hell);font-weight:700}
.statuszeile .rechts{margin-left:auto;display:flex;gap:18px}
.statuszeile .uhr{color:var(--aluminium)}

/* ======================== Sektionen allgemein ======================== */
.sek{padding:clamp(80px,10vw,136px) 0;position:relative}
.sek__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.sek__marke{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol-hell);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.sek__marke::after{content:"";height:1px;width:48px;background:currentColor;opacity:.6}
.sek h2{font-family:var(--f-display);font-size:clamp(26px,3.2vw,44px);line-height:1.18;letter-spacing:-.005em}
.sek__intro{color:var(--alu-dunkel);font-size:18px;font-weight:300;max-width:520px;justify-self:end}

.hell{background:var(--aluminium);color:var(--schmiedeschwarz)}
.hell .sek__marke{color:var(--petrol)}
.hell .sek__intro{color:#3a3a3e}

/* ============================ Leistungen ============================ */
.prg-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px}
.prg{
  position:relative;display:flex;flex-direction:column;background:var(--schwarz-panel);border:1px solid #2e2e33;border-radius:12px;overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.prg:hover{border-color:var(--petrol);transform:translateY(-3px)}
.prg__kopf{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #2e2e33;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--alu-dim)}
.prg__kopf .nr{color:var(--aluminium);font-weight:700}
.prg__kopf .st{display:flex;align-items:center;gap:8px}
.prg__bild{height:150px;border-bottom:1px solid #2e2e33;background:#18181a;position:relative}
.prg__bild svg{width:100%;height:100%}
.prg__koerper{padding:22px 18px 8px;flex:1;display:flex;flex-direction:column}
.prg h3{font-family:var(--f-display);font-size:17px;line-height:1.35;margin-bottom:10px;color:#fff}
.prg p{color:var(--alu-dim);font-size:15.5px;line-height:1.55;margin-bottom:18px}
.spec{margin:auto 0 0;border-top:1px solid #2e2e33}
.spec div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #303035;font-family:var(--f-mono);font-size:12px}
.spec div:last-child{border-bottom:0}
.spec dt{color:#85858c;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;padding-top:1px}
.spec dd{margin:0;color:var(--aluminium);text-align:right}
.prg__fuss{padding:12px 18px 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:#6f6f76;display:flex;gap:8px;align-items:center}
.prg__fuss::before{content:"";width:16px;height:1px;background:var(--petrol)}

/* ============================== Prozess ============================== */
.sequenz{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:0;border:1px solid #c6c6c9;border-radius:12px;background:#f3f3f3;overflow:hidden}
.schritt{position:relative;padding:26px 22px 26px;border-right:1px solid #d3d3d6;display:flex;flex-direction:column;gap:12px;min-height:280px;transition:background .4s}
.schritt:last-child{border-right:0}
.schritt__kopf{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em}
.schritt__n{font-weight:700;color:var(--schmiedeschwarz)}
.schritt__st{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:20px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:#e2e2e4;color:#55555b}
.schritt__st .led{width:6px;height:6px;background:#9a9aa0;box-shadow:none}
.schritt h3{font-family:var(--f-display);font-size:16px;line-height:1.3;margin-top:22px}
.schritt p{font-size:15px;color:#46464b;line-height:1.55}
.schritt__dauer{margin-top:auto;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:#6a6a70;padding-top:14px;border-top:1px dashed #c9c9cc}
.schritt__fort{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.schritt__fort i{display:block;height:100%;width:0;background:var(--petrol)}
.schritt[data-state="fertig"] .schritt__st{background:rgba(15,113,115,.12);color:var(--petrol-dunkel)}
.schritt[data-state="fertig"] .schritt__st .led{background:var(--petrol);}
.schritt[data-state="fertig"] .schritt__fort i{width:100%}
.schritt[data-state="aktiv"]{background:var(--schmiedeschwarz);color:var(--aluminium)}
.schritt[data-state="aktiv"] .schritt__n{color:#fff}
.schritt[data-state="aktiv"] p{color:var(--alu-dunkel)}
.schritt[data-state="aktiv"] .schritt__dauer{color:var(--alu-dim);border-color:#3a3a40}
.schritt[data-state="aktiv"] .schritt__st{background:var(--petrol);color:#fff}
.schritt[data-state="aktiv"] .schritt__st .led{background:#fff;box-shadow:0 0 6px #fff}
.schritt[data-state="aktiv"] .schritt__fort i{background:var(--petrol-hell);animation:fort var(--takt,3.2s) linear forwards}
@keyframes fort{from{width:0}to{width:100%}}
.st-txt{display:none}
.schritt[data-state="fertig"] .st-txt--fertig,
.schritt[data-state="aktiv"] .st-txt--aktiv,
.schritt[data-state="wartend"] .st-txt--wartend{display:inline}
.sequenz__fuss{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:#55555b}
.sequenz__fuss b{color:var(--petrol);font-weight:700}

/* ============================ Kennzahlen ============================ */
.kennzahlen{background:var(--schwarz-tief);border-top:1px solid var(--schwarz-linie);border-bottom:1px solid var(--schwarz-linie)}
.anzeigen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:18px}
.anzeige{background:var(--schwarz-panel);border:1px solid #2e2e33;border-radius:12px;padding:22px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.anzeige__kopf{align-self:stretch;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:#7d7d84;text-transform:uppercase;margin-bottom:6px}
.skala{position:relative;width:min(100%,190px);aspect-ratio:1/0.82}
.skala svg{width:100%;height:100%;overflow:visible}
.skala .spur{fill:none;stroke:#2f2f35;stroke-width:6}
.skala .fuell{fill:none;stroke:var(--petrol-hell);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)}
.skala .tick{stroke:#4a4a50;stroke-width:1.2}
.skala .marke{fill:var(--magenta-hell)}
.skala__wert{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);font-family:var(--f-mono);font-weight:500;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.skala__wert small{font-size:.48em;color:var(--alu-dim);margin-left:3px;letter-spacing:0}
.anzeige h3{font-family:var(--f-body);font-weight:500;font-size:16px;margin-top:-6px}
.anzeige p{font-size:13.5px;color:#8a8a90;margin-top:4px;line-height:1.45}

/* ============================== Haltung ============================== */
.haltung{overflow:hidden}
.haltung__raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,90px);align-items:start}
.manifest{counter-reset:m;display:grid;gap:0;margin-top:40px;border-top:1px solid var(--schwarz-linie)}
.manifest li{counter-increment:m;display:grid;grid-template-columns:70px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--schwarz-linie)}
.manifest li::before{content:"// " counter(m,decimal-leading-zero);font-family:var(--f-mono);font-size:12px;color:var(--petrol-hell);padding-top:6px;letter-spacing:.06em}
.manifest strong{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(17px,1.6vw,21px);line-height:1.35;color:#fff;margin-bottom:6px}
.manifest span{color:var(--alu-dim);font-size:16px}
.zitat{font-family:var(--f-display);font-size:clamp(22px,2.3vw,32px);line-height:1.3;color:#fff}
.zitat b{font-weight:400;color:var(--petrol-hell)}

.foto-platzhalter{position:relative;margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid #2e2e33;
  background:
    radial-gradient(ellipse 40% 30% at 62% 58%, rgba(255,170,110,.55), rgba(175,18,90,.25) 40%, transparent 70%),
    radial-gradient(ellipse 80% 70% at 40% 40%, rgba(15,113,115,.55), transparent 70%),
    linear-gradient(160deg,#0d3c3d,#101012 70%);
}
.foto-platzhalter::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background-image: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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.foto-platzhalter::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.foto-platzhalter svg.funken{position:absolute;inset:0;width:100%;height:100%}
.foto__hud{position:absolute;inset:14px;z-index:2;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:rgba(233,233,233,.85);text-transform:uppercase}
.foto__hud .oben{display:flex;justify-content:space-between}
.foto__hud .rec{display:flex;align-items:center;gap:8px}
.foto-platzhalter figcaption{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--aluminium);background:rgba(18,18,20,.7);padding:10px 12px;border-left:2px solid var(--petrol-hell);line-height:1.45}
.foto-platzhalter figcaption span{display:block;color:#8fa;color:var(--petrol-hell);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}

/* ============================== Branchen ============================== */
.branchen-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:1px solid #c3c3c6;border-left:1px solid #c3c3c6}
.branche{position:relative;padding:26px 22px 28px;border-right:1px solid #c3c3c6;border-bottom:1px solid #c3c3c6;background:#efefef;transition:background .25s,color .25s;min-height:220px;display:flex;flex-direction:column}
.branche:hover{background:var(--petrol);color:#fff}
.branche:hover p,.branche:hover .branche__code{color:#d9eeee}
.branche__code{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:#66666c;display:flex;justify-content:space-between}
.branche svg{width:44px;height:44px;margin:26px 0 18px;stroke:currentColor;fill:none;stroke-width:1.4}
.branche h3{font-family:var(--f-display);font-size:16px;margin-bottom:8px}
.branche p{font-size:15px;color:#4a4a50;line-height:1.5}

/* ================================ CTA ================================ */
.cta{background:var(--petrol);color:#fff;overflow:hidden;padding:clamp(70px,9vw,120px) 0}
.cta::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:32px 32px}
.cta__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.cta h2{font-family:var(--f-display);font-size:clamp(28px,3.8vw,52px);line-height:1.15}
.cta p:not(.sek__marke){margin-top:20px;font-size:19px;font-weight:300;max-width:560px;color:#e3f1f1}
.konsole{background:#141416;border-radius:20px;padding:30px 34px 34px;box-shadow:0 0 0 1px #000,0 0 0 8px #0b5a5c,0 30px 60px rgba(0,0,0,.35);display:grid;gap:22px;justify-items:center}
.konsole__zeile{display:flex;gap:18px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:#8a8a90;text-transform:uppercase}
.konsole__zeile span{display:flex;align-items:center;gap:7px}

/* ============================== Kontakt ============================== */
.auftrag{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.auftrag__info{display:grid;gap:28px}
.adr{font-family:var(--f-mono);font-size:14px;line-height:1.9;color:var(--alu-dunkel)}
.adr dt{font-size:10.5px;letter-spacing:.16em;color:#7d7d84;text-transform:uppercase;margin-top:14px}
.adr dd{margin:0}
.adr a{text-decoration:none;border-bottom:1px solid var(--petrol)}
.blatt{background:var(--schwarz-panel);border:1px solid #2e2e33;border-radius:14px;overflow:hidden}
.blatt__kopf{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #2e2e33;background:#1c1c1f;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--alu-dim);text-transform:uppercase;gap:12px;flex-wrap:wrap}
.blatt__kopf b{color:var(--aluminium);font-weight:500}
.blatt__felder{display:grid;grid-template-columns:1fr 1fr;gap:0}
.feld{position:relative;display:grid;gap:4px;padding:14px 20px 12px;border-bottom:1px solid #2e2e33;border-right:1px solid #2e2e33}
.feld:nth-child(2n){border-right:0}
.feld--voll{grid-column:1/-1;border-right:0}
.feld label{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a90}
.feld label .p{color:var(--petrol-hell)}
.feld label .pf{color:#6b6b72;letter-spacing:.08em}
.feld input,.feld textarea,.feld select{
  width:100%;background:transparent;border:0;color:#fff;font-family:var(--f-mono);font-size:16px;padding:6px 0 4px;outline:none;border-radius:0;
}
.feld textarea{resize:vertical;min-height:110px;line-height:1.6}
.feld select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--alu-dim) 50%),linear-gradient(135deg,var(--alu-dim) 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.feld select option{background:#202023;color:#fff}
.feld input::placeholder,.feld textarea::placeholder{color:#55555c}
.feld::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--petrol-hell);transform:scaleY(0);transition:transform .2s}
.feld:focus-within{background:#232327}
.feld:focus-within::after{transform:scaleY(1)}
.feld:focus-within label{color:var(--aluminium)}
.feld input:focus-visible,.feld textarea:focus-visible,.feld select:focus-visible{outline:none}
.ablage{grid-column:1/-1;padding:18px 20px;border-bottom:1px solid #2e2e33}
.ablage__zone{position:relative;display:flex;align-items:center;gap:18px;padding:22px;border:1px dashed #4a4a52;border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s}
.ablage__zone:hover,.ablage__zone.ist-ueber{border-color:var(--petrol-hell);background:rgba(15,113,115,.1)}
.ablage__zone:focus-within{outline:2px solid var(--petrol-hell);outline-offset:3px}
.ablage input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ablage__sym{width:48px;height:48px;border-radius:10px;border:1px solid var(--petrol);display:grid;place-items:center;flex:none;color:var(--petrol-hell)}
.ablage__txt strong{display:block;font-weight:500;font-size:16px}
.ablage__txt span{font-family:var(--f-mono);font-size:11.5px;color:#85858c;letter-spacing:.04em}
.ablage__liste{margin-top:10px;font-family:var(--f-mono);font-size:12px;color:var(--alu-dunkel);display:grid;gap:4px}
.ablage__liste li{display:flex;gap:10px;align-items:center}
.ablage__liste li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--petrol-hell)}
.blatt__fuss{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 20px 26px;flex-wrap:wrap}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--alu-dim);max-width:330px;line-height:1.45}
.check input{accent-color:var(--petrol);width:16px;height:16px;margin-top:2px;flex:none}
.check a{color:var(--aluminium)}
.meldung{grid-column:1/-1;padding:0 20px 18px;font-family:var(--f-mono);font-size:12.5px;color:var(--petrol-hell);min-height:0}

/* ================================ Footer ================================ */
.fuss{background:var(--schwarz-tief);border-top:1px solid var(--schwarz-linie);padding:56px 0 28px;font-size:15px;color:var(--alu-dim)}
.fuss__raster{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.fuss h3,.fuss__h{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:#77777e;text-transform:uppercase;margin-bottom:14px}
.fuss ul{display:grid;gap:6px}
.fuss a{text-decoration:none}.fuss a:hover{color:var(--aluminium)}
.fuss__slogan{font-family:var(--f-display);font-size:14px;color:var(--aluminium);margin-top:18px}
.fuss__leiste{margin-top:48px;padding-top:20px;border-top:1px solid var(--schwarz-linie);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em}
.fuss__leiste span{display:flex;align-items:center;gap:8px}

/* ======================== Einblenden beim Scrollen ======================== */
.js .rein{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rein.ist-da{opacity:1;transform:none}

/* ================================ Responsive ================================ */
@media (max-width:1180px){
  .panel{grid-template-columns:220px 1fr}
  .panel__spalte--gcode{grid-column:1/-1;border-left:0;border-top:1px solid var(--schwarz-linie)}
  .panel__spalte--gcode .gcode{min-height:180px}
  .panel__spalte--gcode .gcode ol{padding:70px 0}
  .modi a .nr{display:none}
}
@media (max-width:980px){
  .modi,.kopf .logo__desc{display:none}
  .menue-knopf{display:inline-flex}
  .kopf__in{gap:12px}
  .kopf.ist-offen .modi{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;border-radius:0;border-width:1px 0;padding:10px var(--gutter);background:#151517}
  .kopf.ist-offen .modi a{padding:14px 10px;font-size:13px}
  .kopf.ist-offen .modi a .nr{display:inline}
  .hero__kopf{grid-template-columns:1fr;gap:20px}
  .sek__kopf{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
  .sek__intro{justify-self:start}
  .haltung__raster{grid-template-columns:1fr}
  .foto-platzhalter{aspect-ratio:16/11}
  .cta__in{grid-template-columns:1fr}
  .konsole{justify-self:start}
  .auftrag{grid-template-columns:1fr}
  .fuss__raster{grid-template-columns:1fr 1fr}
  .sequenz{grid-template-columns:1fr}
  .schritt{border-right:0;border-bottom:1px solid #d3d3d6;min-height:0;display:grid;grid-template-columns:1fr;gap:8px}
  .schritt:last-child{border-bottom:0}
  .schritt h3{margin-top:6px}
  .schritt__dauer{margin-top:6px;padding-top:10px}
}
@media (max-width:640px){
  body{font-size:16px}
  .kopf__in{height:66px}
  .kopf.ist-offen .modi{top:66px}
  .logo svg{height:24px}
  .kopf .taste{--h:40px;font-size:13px;padding:0 12px 0 5px}
  .kopf .taste .taste__sym{width:28px;height:28px}
  .kopf .taste .lang{display:none}
  .menue-knopf{padding:0 10px}
  .menue-knopf .txt{display:none}
  .hero{padding:32px 0 48px}
  .hero h1{font-size:clamp(25px,7.4vw,34px)}
  .hero__lead{font-size:16.5px}
  .panel{grid-template-columns:1fr;border-radius:10px;box-shadow:0 0 0 4px #151517,0 0 0 5px #2a2a2e,0 30px 60px rgba(0,0,0,.4)}
  .panel__spalte--achsen{order:2;border-right:0;border-top:1px solid var(--schwarz-linie)}
  .ansicht{order:1;min-height:330px}
  .panel__spalte--gcode{order:3}
  .statuszeile{order:4;font-size:10px;gap:10px}
  .statuszeile .rechts{margin-left:0;width:100%;justify-content:space-between}
  .achsen{display:grid;grid-template-columns:repeat(3,1fr);padding:0}
  .achse{grid-template-columns:1fr;padding:10px 12px;border-right:1px solid #26262a;gap:2px}
  .achse:last-child{border-right:0}
  .achse dd{font-size:16px;text-align:left}
  .achse span{display:none}
  .werte{grid-template-columns:1fr 1fr;gap:12px 16px;padding:14px 12px}
  .ansicht__ecke{font-size:9px}
  .ansicht__ecke--ur,.ansicht__ecke--or{display:none}
  .gcode li{font-size:11.5px;padding:0 12px}
  .blatt__felder{grid-template-columns:1fr}
  .feld{border-right:0}
  .fuss__raster{grid-template-columns:1fr 1fr;gap:32px 20px}
  .fuss__raster>div:first-child{grid-column:1/-1}
  .anzeigen{grid-template-columns:1fr 1fr;gap:12px}
  .anzeige{padding:16px 12px}
  .anzeige h3{font-size:14.5px;margin-top:-2px}
  .anzeige p{font-size:12.5px}
  .skala__wert{font-size:22px}
  .anzeige:last-child:nth-child(odd){grid-column:1/-1}
  .taste--petrol{background:linear-gradient(180deg,#14898b 0%,var(--petrol) 55%,#0a5557 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px #0d0d0e,0 0 0 5px #2a2a2e,0 0 0 6px #3a3a3f,0 6px 0 4px #111,0 14px 30px rgba(15,113,115,.25)}
.taste--gross{--h:64px;font-size:17px;padding:0 22px 0 10px}
  .konsole{padding:24px 20px 28px;justify-self:stretch}
  .konsole__zeile{flex-wrap:wrap;justify-content:center;gap:10px 14px}
  .manifest li{grid-template-columns:1fr;gap:4px}
  .ablage__zone{padding:16px;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rein{opacity:1;transform:none}
}

/* ======================================================================
   Runde 2 – Mehrseiten-Bausteine
   ====================================================================== */
.knopf{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:9px;border:1px solid var(--petrol-hell);color:var(--aluminium);text-decoration:none;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(15,113,115,.12);transition:background .2s,color .2s;cursor:pointer;white-space:nowrap}
.knopf:hover{background:var(--petrol);color:#fff}
.hell .knopf{color:var(--petrol-dunkel);border-color:var(--petrol);background:transparent}
.hell .knopf:hover{background:var(--petrol);color:#fff}

/* Seitenkopf (Unterseiten) */
.seitenkopf{position:relative;padding:56px 0 0;background:radial-gradient(800px 360px at 80% 30%,rgba(15,113,115,.16),transparent 70%),var(--schmiedeschwarz);border-bottom:1px solid var(--schwarz-linie);overflow:hidden}
.seitenkopf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(233,233,233,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,233,233,.035) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
.seitenkopf__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:end;padding-bottom:44px}
.pfad{display:flex;gap:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:#7d7d84;text-transform:uppercase;margin-bottom:26px}
.pfad a{text-decoration:none;color:var(--alu-dim)}.pfad a:hover{color:#fff}
.pfad [aria-current]{color:var(--aluminium)}
.seitenkopf h1{font-family:var(--f-display);font-size:clamp(28px,4vw,54px);line-height:1.14;margin-top:16px;color:#f3f3f3}
.seitenkopf__lead{margin-top:20px;max-width:620px;color:var(--alu-dunkel);font-size:18px;font-weight:300}
.minipanel{background:linear-gradient(180deg,#1e1e21,#19191b);border:1px solid #2e2e33;border-radius:12px;box-shadow:0 0 0 5px #151517,0 0 0 6px #2a2a2e;overflow:hidden}
.minipanel dl{margin:0}
.minipanel dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;border-bottom:1px solid #26262a;font-family:var(--f-mono);font-size:12.5px}
.minipanel dt{color:#85858c;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.minipanel dd{margin:0;color:#fff;text-align:right}
.minipanel__scan{height:3px;background:#26262a;position:relative;overflow:hidden}
.minipanel__scan i{position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,var(--petrol-hell),transparent);animation:scan 3.2s linear infinite}
@keyframes scan{from{left:-30%}to{left:100%}}
.sprung{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--schwarz-linie)}
.sprung::-webkit-scrollbar{display:none}
.sprung a{flex:none;display:flex;gap:8px;align-items:center;padding:14px 16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--alu-dim);text-decoration:none;border-bottom:2px solid transparent}
.sprung a:first-child{padding-left:0}
.sprung a:hover{color:#fff;border-bottom-color:var(--petrol)}
.sprung a .nr{color:var(--petrol-hell)}

/* Leistungs-Teaser-Karten als Links */
.prg__link{display:flex;justify-content:space-between;align-items:center;margin:4px 18px 18px;padding-top:14px;border-top:1px solid #2e2e33;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--aluminium);text-decoration:none}
.prg__link::after{content:"→";font-family:var(--f-body);color:var(--petrol-hell);transition:transform .2s}
.prg__link:hover::after{transform:translateX(4px)}
.sek__mehr{margin-top:36px;display:flex;justify-content:flex-end}

/* Retrofit / 60 Jahre */
.retrofit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
.retrofit__zahl{font-family:var(--f-display);font-size:clamp(84px,12vw,170px);line-height:.9;color:#fff;letter-spacing:-.03em;display:flex;align-items:flex-start;gap:6px}
.retrofit__zahl small{font-size:.3em;color:var(--petrol-hell);margin-top:.3em}
.retrofit__unter{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--alu-dim);text-transform:uppercase;margin-top:18px}
.retrofit__vergleich{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #2e2e33;border-radius:12px;overflow:hidden}
.retrofit__vergleich div{padding:18px}
.retrofit__vergleich div+div{border-left:1px solid #2e2e33;background:rgba(15,113,115,.12)}
.retrofit__vergleich h3{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#85858c;margin-bottom:10px}
.retrofit__vergleich div+div h3{color:var(--petrol-hell)}
.retrofit__vergleich ul{display:grid;gap:6px;font-size:15px;color:var(--alu-dunkel)}
.retrofit__vergleich li::before{content:"› ";color:var(--petrol-hell)}
.text p+p{margin-top:16px}
.text p{color:var(--alu-dunkel);font-size:17.5px;font-weight:300}
.hell .text p{color:#3a3a3e}
.text strong{font-weight:500;color:var(--aluminium)}
.hell .text strong{color:var(--schmiedeschwarz)}
.text .knopf{margin-top:26px}

/* Produkt-Teaser (Start) */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:center;background:#f3f3f3;border:1px solid #c6c6c9;border-radius:14px;padding:clamp(22px,3vw,40px)}
.teaser h2{font-family:var(--f-display);font-size:clamp(22px,2.4vw,32px);line-height:1.2}
.teaser p{color:#3a3a3e;margin-top:14px}
.teaser .knopf{margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #c6c6c9;border-radius:8px;background:#fff;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:#2a2a2e}
.chips li .led{width:6px;height:6px}

/* Vorlagen: Zeichnung · Skizze · Muster */
.vorlagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border:1px solid #2e2e33;border-radius:12px;overflow:hidden;background:var(--schwarz-panel)}
.vorlage{padding:24px 22px;border-right:1px solid #2e2e33;display:flex;flex-direction:column;gap:10px}
.vorlage:last-child{border-right:0}
.vorlage__kanal{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:#85858c;display:flex;justify-content:space-between;text-transform:uppercase}
.vorlage__kanal b{color:var(--petrol-hell);font-weight:500}
.vorlage svg{width:100%;height:110px;margin:6px 0}
.vorlage h3{font-family:var(--f-display);font-size:17px;color:#fff}
.vorlage p{font-size:15px;color:var(--alu-dim)}
.vorlagen__fuss{margin-top:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--alu-dim)}
.vorlagen__fuss b{color:var(--petrol-hell);font-weight:500}

/* Tabellen */
.tabelle-wrap{overflow-x:auto;border:1px solid #2e2e33;border-radius:12px;background:var(--schwarz-panel)}
.tabelle{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tabelle caption{text-align:left;padding:14px 18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--alu-dim);border-bottom:1px solid #2e2e33;caption-side:top}
.tabelle th,.tabelle td{text-align:left;padding:12px 18px;border-bottom:1px solid #2a2a2e;vertical-align:top}
.tabelle thead th{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#85858c;background:#1c1c1f}
.tabelle tbody th{font-weight:500;color:#fff}
.tabelle td{color:var(--alu-dunkel);font-family:var(--f-mono);font-size:13px}
.tabelle tr:last-child th,.tabelle tr:last-child td{border-bottom:0}
.hell .tabelle-wrap{background:#f6f6f6;border-color:#c6c6c9}
.hell .tabelle caption{color:#55555b;border-color:#c6c6c9}
.hell .tabelle th,.hell .tabelle td{border-color:#d6d6d9}
.hell .tabelle thead th{background:#ececee;color:#55555b}
.hell .tabelle tbody th{color:var(--schmiedeschwarz)}
.hell .tabelle td{color:#3a3a3e}
.ph{color:#8a8a90}
.hell .ph{color:#6c6c72}
.zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.unterkopf{font-family:var(--f-display);font-size:clamp(20px,2vw,26px);line-height:1.25;margin:0 0 18px}
.abstand{margin-top:clamp(56px,7vw,96px)}

/* Produkte */
.produkt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--schwarz-linie);align-items:start;scroll-margin-top:84px}
.produkt:first-child{border-top:0;padding-top:0}
.zeichnung{position:relative;background:#151517;border:1px solid #2e2e33;border-radius:12px;aspect-ratio:4/3;overflow:hidden;position:sticky;top:100px}
.zeichnung::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(233,233,233,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(233,233,233,.04) 1px,transparent 1px);background-size:20px 20px}
.zeichnung svg{position:relative;width:100%;height:100%}
.zeichnung__kopf{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:#7d7d84;text-transform:uppercase;z-index:1}
.zeichnung__kopf b{color:var(--aluminium);font-weight:500}
.produkt__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--alu-dim);text-transform:uppercase;margin-bottom:14px}
.produkt__kopf .st{display:flex;align-items:center;gap:8px}
.produkt h2{font-family:var(--f-display);font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:#fff}
.produkt__lead{margin-top:14px;color:var(--alu-dunkel);font-size:17.5px;font-weight:300}
.merkmale{margin:22px 0;display:grid;gap:8px}
.merkmale li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:15.5px;color:var(--alu-dunkel)}
.merkmale li::before{content:"";width:8px;height:8px;margin-top:8px;border:1px solid var(--petrol-hell);border-radius:2px}
.produkt .tabelle{min-width:0}
.produkt .tabelle-wrap{margin:20px 0 24px}
.produkt__aktion{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.produkt__aktion small{font-family:var(--f-mono);font-size:11.5px;color:#85858c;letter-spacing:.04em}
.produkt--pause .zeichnung svg{opacity:.45}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:20px;border:1px solid #3a3a40;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--alu-dim)}

/* Logbuch (Unternehmen) */
.logbuch{border:1px solid #2e2e33;border-radius:12px;overflow:hidden;background:var(--schwarz-panel)}
.logbuch__kopf{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #2e2e33;background:#1c1c1f;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--alu-dim)}
.logbuch li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 18px;border-bottom:1px dashed #303035}
.logbuch li:last-child{border-bottom:0;background:rgba(15,113,115,.12)}
.logbuch .zeit{font-family:var(--f-mono);font-size:12.5px;color:var(--petrol-hell)}
.logbuch strong{display:block;font-weight:500;color:#fff;margin-bottom:2px}
.logbuch li div>span{font-size:15px;color:var(--alu-dim)}
.fotoreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fotoreihe .foto-platzhalter{aspect-ratio:3/4}
.stellen{display:grid;gap:12px}
.stelle{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding:18px 20px;background:#f3f3f3;border:1px solid #c6c6c9;border-radius:10px}
.stelle__code{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--petrol)}
.stelle h3{font-family:var(--f-display);font-size:16px;margin-bottom:4px}
.stelle p{font-size:14.5px;color:#4a4a50}

/* Kontakt / Anfahrt */
.anfahrt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:stretch}
.karte{position:relative;margin:0;min-height:340px;border-radius:12px;overflow:hidden;border:1px solid #c6c6c9;background:#f3f3f3}
.karte svg{position:absolute;inset:0;width:100%;height:100%}
.karte figcaption{position:absolute;left:14px;bottom:14px;right:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;background:rgba(255,255,255,.92);padding:8px 10px;border-left:2px solid var(--petrol);color:#2a2a2e}
.anfahrt__info{display:grid;gap:12px;align-content:start}
.anfahrt__info div{padding:16px 18px;background:#f3f3f3;border:1px solid #c6c6c9;border-radius:10px}
.anfahrt__info h3{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin-bottom:6px}
.anfahrt__info p{font-size:15px;color:#3a3a3e}

/* Rechtstext */
.rechtstext{max-width:780px}
.rechtstext h2{font-family:var(--f-display);font-size:20px;margin:40px 0 12px;color:#fff}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p,.rechtstext li{color:var(--alu-dunkel);font-size:16.5px}
.rechtstext p+p{margin-top:12px}
.rechtstext ul{list-style:disc;padding-left:22px;display:grid;gap:4px;margin-top:10px}
.hinweis{margin-bottom:36px;padding:14px 18px;border:1px dashed var(--petrol);border-radius:10px;font-family:var(--f-mono);font-size:12.5px;color:var(--alu-dim)}

@media (max-width:980px){
  .seitenkopf__in{grid-template-columns:1fr;gap:28px}
  .minipanel{max-width:440px}
  .retrofit,.teaser,.zweispaltig,.produkt,.anfahrt{grid-template-columns:1fr}
  .zeichnung{position:relative;top:auto}
  .fotoreihe{grid-template-columns:1fr 1fr}
  .fotoreihe .foto-platzhalter:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .vorlage{border-right:0;border-bottom:1px solid #2e2e33}
  .vorlage:last-child{border-bottom:0}
}
@media (max-width:640px){
  .seitenkopf{padding-top:32px}
  .seitenkopf h1{font-size:clamp(25px,7.4vw,34px)}
  .seitenkopf__lead{font-size:16.5px}
  .retrofit__vergleich{grid-template-columns:1fr}
  .retrofit__vergleich div+div{border-left:0;border-top:1px solid #2e2e33}
  .logbuch li{grid-template-columns:1fr;gap:4px}
  .stelle{grid-template-columns:1fr;gap:6px}
  .stelle .knopf{justify-self:start}
  .fotoreihe{grid-template-columns:1fr}
  .fotoreihe .foto-platzhalter,.fotoreihe .foto-platzhalter:first-child{aspect-ratio:16/11}
  .sek__mehr{justify-content:flex-start}
  .tabelle th,.tabelle td{padding:10px 12px}
  .produkt .tabelle td{font-size:12px}
  .karte{min-height:260px}
}
@media (prefers-reduced-motion:reduce){ .minipanel__scan i{animation:none;left:35%} }

.produkt .tabelle tbody th{white-space:nowrap}
.produkt .tabelle td{overflow-wrap:anywhere}
@media (max-width:640px){.produkt__kopf{letter-spacing:.08em}}
.text p.sek__marke{font-size:12px;font-weight:400;color:var(--petrol-hell)}
.hell .text p.sek__marke{color:var(--petrol)}