/* TAKT · 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;
  /* Fliesstext: Helvetica (Wunsch 06.10.2026). Nicht als Datei mitgeliefert
     (Lizenz) - jedes Geraet nimmt seine: Helvetica (Apple), sonst Arial. */
  --f-body:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-logo:"Nura", "Michroma", 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-body);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:.005em;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)}

/* ======================================================================
   Ergaenzungen fuer das CMS (TAKT-CMS). Was die Bloecke zusaetzlich
   brauchen, seit die Seiten aus der Redaktion kommen.
   ====================================================================== */
.seitenkopf__in--einspaltig{grid-template-columns:1fr}

/* Startseite: der erste Bildschirm (Wunsch 06.10.2026). Genau so hoch wie das
   Fenster unter dem Kopf (Fenster ab 600 px Hoehe). Ueberschrift und Knopf behalten
   ihre Hoehe, die Simulation nimmt den Rest. Reicht der Platz nicht (sehr
   niedrige Fenster), waechst der Abschnitt, statt etwas abzuschneiden. */
.hero{--kopf-h:79px;min-height:calc(max(600px, 100vh) - var(--kopf-h));min-height:calc(max(600px, 100svh) - var(--kopf-h));
  display:flex;flex-direction:column;padding:clamp(18px,4vh,56px) 0 clamp(18px,3.5vh,44px)}
.hero>.wrap{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%}
.hero__kopf{margin-bottom:clamp(14px,3vh,40px)}
.hero h1{font-size:clamp(28px, min(4.6vw, 7.2vh), 66px);margin-top:clamp(8px,1.6vh,18px)}
.hero__aktion{margin-top:clamp(14px,2.6vh,28px)}
.hero .panel{flex:1 1 0;min-height:200px}
.panel--schlank{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.panel--schlank .ansicht{min-height:0}
.hero__taste{--h:52px}
@media (max-width:640px){
  .hero{--kopf-h:67px}
  .hero .panel{min-height:220px}
}
/* Nur in der Vorschau der Redaktion: Link ohne Text - auf der Website ausgeblendet */
.takt-leer{opacity:.35;outline:1px dashed currentColor;outline-offset:3px}
.cta__marke{color:#bfe3e3}
.retrofit__text{margin-top:28px}
.prg__foto,.produkt__foto{display:block;width:100%;height:100%;object-fit:cover}
/* Fotoplatz (takt_fotoplatz): Motivzeile ohne eigene Stil-Zeile, echtes Foto fuellt die Flaeche */
.foto-platzhalter figcaption span.foto__text{display:inline;color:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;margin-bottom:0}
.foto__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vorlage__foto{display:block;width:100%;height:110px;margin:6px 0;object-fit:cover;border-radius:6px}
/* Produkte, Kontakt (Bloecke produkte, kontakt, anfahrt) */
.produkt__aktion--frei{margin-top:24px}
.auftrag__satz{color:var(--alu-dunkel);font-weight:300;font-size:18px}
.karte__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.falle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.blatt.ist-am-senden .taste{opacity:.6;pointer-events:none}

/* Anfrageformular "klar und einfach" (06.10.2026): helle Karte, normale
   Beschriftungen ueber weissen Feldern, Fliesstext-Schrift statt Mono,
   Pflichtfelder mit *. Ersetzt das Auftragsblatt-Aussehen. */
.blatt--einfach{background:#f4f4f5;border:0;border-radius:14px;color:var(--schmiedeschwarz);box-shadow:0 30px 60px rgba(0,0,0,.35);font-family:var(--f-body)}
.blatt--einfach .blatt__kopf{display:block;padding:26px 28px 6px;background:none;border:0;font-family:var(--f-body);letter-spacing:0;text-transform:none;color:var(--schmiedeschwarz)}
.blatt--einfach .blatt__titel{font-family:var(--f-body);font-size:24px;font-weight:700;margin:0;color:var(--schmiedeschwarz)}
.blatt--einfach .blatt__satz{margin:6px 0 0;font-size:15px;color:#5b5b62}
.blatt--einfach .blatt__felder{gap:16px 18px;padding:18px 28px 6px}
.blatt--einfach .feld{padding:0;border:0;gap:6px}
.blatt--einfach .feld::after{display:none}
.blatt--einfach .feld:focus-within{background:none}
.blatt--einfach .feld label{display:block;font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--schmiedeschwarz)}
.blatt--einfach .feld:focus-within label{color:var(--schmiedeschwarz)}
.blatt--einfach .feld label .pf{color:var(--magenta);font-weight:700}
.blatt--einfach .feld input,.blatt--einfach .feld textarea{
  font-family:var(--f-body);font-size:16px;color:var(--schmiedeschwarz);background:#fff;
  border:1px solid #c9c9ce;border-radius:8px;padding:12px 14px;transition:border-color .15s, box-shadow .15s}
.blatt--einfach .feld input::placeholder,.blatt--einfach .feld textarea::placeholder{color:#9a9aa1}
.blatt--einfach .feld input:focus,.blatt--einfach .feld textarea:focus{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(15,113,115,.18)}
.blatt--einfach .feld textarea{min-height:130px}
.blatt--einfach .ablage{padding:0;border:0}
.blatt--einfach .ablage__zone{border:1px dashed #b4b4ba;background:#fff;padding:16px 18px}
.blatt--einfach .ablage__zone:hover,.blatt--einfach .ablage__zone.ist-ueber{border-color:var(--petrol);background:#eef7f7}
.blatt--einfach .ablage__sym{width:40px;height:40px;border-color:#b4b4ba;color:var(--petrol)}
.blatt--einfach .ablage__txt strong{font-size:15px;font-weight:600;color:var(--schmiedeschwarz)}
.blatt--einfach .ablage__txt span{display:block;font-family:var(--f-body);font-size:13.5px;letter-spacing:0;color:#6b6b72}
.blatt--einfach .ablage__liste{font-family:var(--f-body);font-size:14px;color:var(--schmiedeschwarz)}
.blatt--einfach .blatt__fuss{padding:20px 28px 26px}
.blatt--einfach .check{font-family:var(--f-body);font-size:14px;color:#4c4c53}
.blatt--einfach .check a{color:var(--petrol)}
.blatt--einfach .meldung{padding:0 28px 22px;font-family:var(--f-body);color:var(--schmiedeschwarz);margin:0}
@media (max-width:640px){
  .blatt--einfach .blatt__kopf{padding:22px 18px 4px}
  .blatt--einfach .blatt__felder{padding:16px 18px 4px}
  .blatt--einfach .blatt__fuss{padding:18px 18px 22px}
  .blatt--einfach .meldung{padding:0 18px 18px}
}
/* Kontaktangaben neben dem Formular: Fliesstext-Schrift statt Mono (06.10.2026) */
.auftrag__info .adr dd{font-family:var(--f-body);font-size:16px;letter-spacing:0}

/* Fuss: "Eine Marke der ..." unter dem Slogan (06.10.2026) */
.fuss__marke{margin-top:10px;font-size:13px;color:var(--alu-dim)}

/* Programm-Karten: genau 4 Karten nie 3 + 1 (Wunsch 06.10.2026) - breit 4 in
   einer Reihe, mittel 2 + 2, Handy untereinander. Andere Anzahlen wie gehabt. */
.prg-liste:has(> .prg:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1330px){.prg-liste:has(> .prg:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:660px){.prg-liste:has(> .prg:nth-child(4):last-child){grid-template-columns:1fr}}

/* Magenta Tasten optisch mittig (Wunsch 06.10.2026): das Symbol sitzt links so
   weit vom Rand wie oben und unten (eingelassen), der Text genau mittig
   zwischen Symbol und rechtem Rand (Abstand nach dem Symbol = Rand rechts). */
.taste{padding:0 18px 0 8px;gap:18px}                                  /* 52 hoch, Symbol 36 */
.taste--gross{padding:0 24px 0 11px;gap:24px}                          /* 72 hoch, Symbol 50 */
.kopf .taste{padding:0 13px 0 7px;gap:13px}                            /* 44 hoch, Symbol 30 */
@media (max-width:640px){
  .kopf .taste{padding:0 11px 0 6px;gap:11px}                          /* 40 hoch, Symbol 28 */
  .taste--gross{padding:0 20px 0 7px;gap:20px}                         /* 64 hoch, Symbol 50 */
}

/* Senkrecht optisch mittig: die Schrift reserviert unten Platz fuer Unterlaengen
   (g, j) - ihr Kasten ist mittig, die sichtbaren Buchstaben sassen ~1 px zu hoch. */
.taste__txt > span{position:relative;top:.08em}

/* Startseite: die Starttaste sitzt in der Leiste unter dem CNC-Fenster - wie
   die Taste am Bedienpult einer Maschine (Wunsch 06.10.2026). Status links,
   Taste rechts; auf dem Handy die Taste ueber die volle Breite darunter. */
.statuszeile--taste{padding:12px 14px 12px 16px;row-gap:12px}
.statuszeile--taste .rechts{align-items:center}
.statuszeile--taste .hero__taste{margin:4px 2px 6px 10px;text-transform:none;letter-spacing:.01em;font-family:var(--f-body)}
@media (max-width:980px){
  .statuszeile--taste .hero__taste{flex:1 1 100%;margin:6px 6px 8px;justify-content:center}
}

/* Formular: fehlende Pflichtfelder (rot umrandet, Hinweis darunter) und die
   Rueckmeldung als Fenster ueber dem unscharfen Formular (06.10.2026). */
.blatt--einfach{position:relative}
.blatt--einfach .ist-fehlt input,.blatt--einfach .ist-fehlt textarea{border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.16)}
.blatt--einfach .ist-fehlt label{color:#a51d1d}
.blatt--einfach .feld__fehler{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#a51d1d;margin-top:2px}
.blatt--einfach .feld__fehler::before{content:"!";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#c62828;color:#fff;font-size:11px;font-weight:700;flex:none}
.blatt--einfach .check{display:grid;grid-template-columns:auto 1fr;column-gap:10px;border-radius:8px;padding:6px 8px;margin:-6px -8px}
.blatt--einfach .check.ist-fehlt{box-shadow:0 0 0 2px #c62828;background:rgba(198,40,40,.05)}
.blatt--einfach .check .feld__fehler{grid-column:2}
.blatt--einfach #meldung{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:0}

.blatt--einfach.zeigt-meldung > :not(.blatt__overlay){filter:blur(5px);pointer-events:none;user-select:none;transition:filter .25s}
.blatt__overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:rgba(244,244,245,.55);border-radius:inherit;animation:blatt-ein .2s ease}
.blatt__overlay[hidden]{display:none}
.blatt__fenster{width:min(420px,100%);background:#fff;border-radius:14px;padding:28px 26px 24px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06);font-family:var(--f-body);color:var(--schmiedeschwarz)}
.blatt__fenster h3{font-family:var(--f-body);font-size:22px;font-weight:700;margin:12px 0 6px}
.blatt__fenster p{margin:0;font-size:15.5px;line-height:1.5;color:#4c4c53}
.blatt__symbol{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:26px;font-weight:700;color:#fff}
.blatt__overlay--ok .blatt__symbol{background:var(--petrol)}
.blatt__overlay--ok .blatt__symbol::before{content:"✓"}
.blatt__overlay--fehler .blatt__symbol{background:#c62828}
.blatt__overlay--fehler .blatt__symbol::before{content:"!"}
.blatt__overlay--senden .blatt__symbol{border:4px solid #d8d8dc;border-top-color:var(--magenta);animation:blatt-dreh .9s linear infinite;width:44px;height:44px}
.blatt__knoepfe{margin-top:20px}
.blatt__knoepfe:empty{display:none}
.blatt__knopf{font-family:var(--f-body);font-size:15px;font-weight:600;color:#fff;background:var(--schmiedeschwarz);border:0;border-radius:9px;padding:12px 22px;cursor:pointer}
.blatt__knopf:hover{background:#2c2c30}
.blatt__knopf:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
@keyframes blatt-ein{from{opacity:0}to{opacity:1}}
@keyframes blatt-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.blatt__overlay{animation:none}.blatt__overlay--senden .blatt__symbol{animation:none}}

/* Felder einer Reihe beginnen gleich hoch, auch wenn eins einen Hinweis hat;
   ein Feld mit Fehler bleibt rot, auch wenn der Cursor darin steht. */
.blatt--einfach .blatt__felder{align-items:start}
.blatt--einfach .feld{align-content:start}
.blatt--einfach .ist-fehlt input:focus,.blatt--einfach .ist-fehlt textarea:focus{border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.22)}
.blatt--einfach .ist-fehlt:focus-within label{color:#a51d1d}

/* Anfahrt: Lageplan aus OpenStreetMap-Daten, interaktive Karte erst nach
   Klick, Links zum Routenplaner (06.10.2026). */
.anfahrt__plan{display:grid;grid-template-rows:1fr auto;gap:14px;min-width:0}
.karte figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px}
.karte__quelle{font-size:10px;letter-spacing:.02em;color:#6a6a70}
.karte__quelle a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.karte__live{position:absolute;left:14px;top:14px;z-index:2;max-width:min(300px,calc(100% - 28px));display:grid;gap:6px;padding:10px 12px 11px;
  background:rgba(255,255,255,.95);border:1px solid #c6c6c9;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.karte__laden{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--schmiedeschwarz);text-decoration:none}
.karte__laden:hover{color:var(--petrol)}
.karte__laden:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:4px}
.karte__sym{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--petrol);flex:none}
.karte .karte__sym svg{position:static;width:10px;height:10px;margin-left:2px}
.karte__hinweis{margin:0;font-family:var(--f-body);font-size:12.5px;line-height:1.45;color:#55555b}
.karte__hinweis a{color:var(--petrol-dunkel);text-decoration:underline;text-underline-offset:2px}
.karte__rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:#f3f3f3}
.karte.ist-live .karte__live,.karte.ist-live figcaption{display:none}
.karte__zurueck{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--f-body);font-size:13.5px;font-weight:600;color:#fff;background:var(--schmiedeschwarz);
  border:0;border-radius:8px;padding:9px 14px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.karte__zurueck[hidden]{display:none}
.karte__zurueck:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.karte__links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.karte__osm{font-family:var(--f-body);font-size:15px;color:var(--petrol-dunkel);text-decoration:underline;text-underline-offset:3px}
.karte__osm:hover{color:var(--petrol)}
.anfahrt__plan .karte{min-height:0;aspect-ratio:12/7}
@media (max-width:980px){.anfahrt__plan .karte{aspect-ratio:auto;min-height:440px}}
@media (max-width:560px){.anfahrt__plan .karte{min-height:470px}.karte__live{right:14px;max-width:none}}