/* techwunder.ch — Vorschau-Variante "Schaltschrank" (18.08.2026).
   Dritter Entwurf neben der dunklen Live-Seite und dem hellen "Schaltplan".
   Leitbild: nicht der Plan der Anlage, sondern die Anlage im Betrieb.
   Material aus Thomas' Alltag: Schaltschrank-Front in RAL 7016 Anthrazit mit
   Frontplatten in RAL 7035 Lichtgrau, gravierte Beschriftungen, Signallampen.

   Eine harte Regel, aus der Sache abgeleitet: FARBE BEDEUTET ZUSTAND.
   Grün/Gelb/Rot gibt es nur an Signallampen (IEC 60073), nirgends als Deko.
   Alles andere ist Metall, Gravur und Schrift. Deshalb ist der Button schwarz
   und nicht bunt.

   Selbsttragend: bindet weder shared/tokens.css noch shared/fonts.css ein,
   damit das Experiment das Live-Design-System nicht anfasst. */


:root{
  --cab:#22262a;        /* Schrankkorpus, RAL 7016 nachempfunden */
  --cab-2:#2b3035;      /* zweite Ebene im Korpus */
  --cab-line:#3a4046;   /* Kanten im Dunkeln */
  --ink-lt:#e7e9e6;     /* Text auf Anthrazit */
  --mut-lt:#9aa0a3;

  --plate:#d5d7d3;      /* Frontplatte, RAL 7035 Lichtgrau */
  --plate-hi:#eceeea;   /* Fase oben */
  --plate-lo:#aeb1ac;   /* Fase unten */
  --ink:#191c1e;        /* Gravur/Text auf der Platte */
  --mut:#5c6164;
  --engrave:#43484b;

  /* Signalfarben nach IEC 60073 — ausschliesslich fuer Lampen. */
  --sig-on:#41ab4a;
  --sig-off:#7c8279;
  --sig-txt:#5cc466;      /* Signalgruen fuer Text auf Anthrazit (Kontrast 6:1) */

  --f-disp:'Saira Condensed',sans-serif;
  --f-body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,monospace;

  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}
body{
  background:var(--cab);color:var(--ink-lt);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* Gebuersteter Lack: sehr feine senkrechte Struktur, kaum sichtbar. */
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid #ffd24a;outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* Gravierte Kleinbeschriftung — das Grundmotiv der Seite. */
.legend,.eyebrow,.nav,.foot-in,.terminals li,.stepnum,.typeplate dt,.card-out span,.lamps{
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.16em;font-weight:600;
}
.legend{
  font-size:12px;color:var(--engrave);
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.16);
}
.eyebrow{font-size:12px;color:var(--mut-lt);margin-bottom:14px}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.head{position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(34,38,42,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cab-line)}
.head-in{display:flex;align-items:center;gap:24px;height:66px}
.brand img{height:36px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:13px}
.nav a{color:var(--mut-lt);position:relative;padding:6px 0;transition:color .18s}
.nav a:hover{color:var(--ink-lt)}
.nav a[aria-current]{color:var(--ink-lt)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sig-on)}
.nav-cta{border:1px solid var(--cab-line);padding:8px 16px!important;color:var(--ink-lt)!important}
.nav-cta:hover{background:#fff;color:#111!important;border-color:#fff}
.nav-cta::after{display:none!important}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--cab-line);
  color:var(--ink-lt);padding:8px;cursor:pointer}

.drawer{position:fixed;inset:0;z-index:80;background:var(--cab);padding:22px 28px;
  opacity:0;transition:opacity .2s}
.drawer.open{opacity:1}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:44px}
.drawer-top img{height:30px}
.drawer-close{background:none;border:1px solid var(--cab-line);color:var(--ink-lt);padding:8px;cursor:pointer}
.drawer nav{display:flex;flex-direction:column;gap:6px;margin-top:36px}
.drawer nav a{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;
  font-size:30px;font-weight:700;padding:12px 0;border-bottom:1px solid var(--cab-line)}

/* ── Frontplatte ──────────────────────────────────────────────────────── */
.plate{
  position:relative;background:var(--plate);color:var(--ink);
  border:1px solid #9fa39e;
  box-shadow:inset 0 1px 0 var(--plate-hi),inset 0 -1px 0 var(--plate-lo),
             0 24px 48px -28px rgba(0,0,0,.85);
  padding:38px 40px 40px;
  /* Vier M4-Schrauben in den Ecken. Einziges skeuomorphes Zugestaendnis. */
  background-image:
    radial-gradient(circle at 14px 14px,#8f938e 0 2.5px,rgba(255,255,255,.5) 2.5px 3.6px,transparent 3.7px),
    radial-gradient(circle at calc(100% - 14px) 14px,#8f938e 0 2.5px,rgba(255,255,255,.5) 2.5px 3.6px,transparent 3.7px),
    radial-gradient(circle at 14px calc(100% - 14px),#8f938e 0 2.5px,rgba(255,255,255,.5) 2.5px 3.6px,transparent 3.7px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#8f938e 0 2.5px,rgba(255,255,255,.5) 2.5px 3.6px,transparent 3.7px);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:132px 0 76px}
.hero-plate{max-width:960px}
.h1{
  font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,8.2vw,104px);line-height:.92;letter-spacing:.004em;
  color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.h1 .thin{font-weight:500;color:var(--mut)}
.lead{margin-top:28px;max-width:56ch;font-size:clamp(17px,1.5vw,19px);color:#33383b}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.btn{display:inline-block;background:var(--ink);color:#f2f3f1;
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  font-size:14px;padding:15px 28px;border:1px solid var(--ink);cursor:pointer;transition:.18s}
.btn:hover{background:#000;transform:translateY(-1px)}
.lnk{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  font-size:14px;color:var(--engrave);border-bottom:1px solid rgba(0,0,0,.3);padding-bottom:3px}
.lnk:hover{color:var(--ink);border-color:var(--ink)}

/* Signallampen: Einschaltfolge = Signaturelement. */
.lamps{list-style:none;display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:42px;
  padding-top:22px;border-top:1px solid rgba(0,0,0,.16);font-size:12px}
.lamps a{display:flex;align-items:center;gap:10px;color:var(--engrave);min-height:32px}
.lamps a:hover{color:var(--ink)}
.lamp{width:13px;height:13px;border-radius:50%;flex:none;
  background:var(--sig-off);border:1px solid rgba(0,0,0,.45);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
  transition:background .25s,box-shadow .25s}
.lamp.on{background:var(--sig-on);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 3px rgba(65,171,74,.22)}

/* ── Klemmenleiste (Nachweis) ─────────────────────────────────────────── */
.rail{padding:64px 0;background:var(--cab-2);
  border-top:1px solid var(--cab-line);border-bottom:1px solid var(--cab-line)}
.rail-h{font-family:var(--f-disp);text-transform:uppercase;font-weight:700;letter-spacing:.06em;
  font-size:clamp(20px,2.6vw,30px);line-height:1.15;max-width:22ch}
.terminals{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 20px}
.terminals li{font-size:13px;color:#20242a;background:var(--plate);
  padding:9px 16px;border:1px solid #9fa39e;
  box-shadow:inset 0 1px 0 var(--plate-hi),inset 0 -1px 0 var(--plate-lo);
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
.rail-note{color:var(--mut-lt);max-width:62ch;font-size:16px}

/* ── Leistungen ───────────────────────────────────────────────────────── */
.sec{padding:88px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.card{padding:30px 30px 32px;display:flex;flex-direction:column}
.card h3{font-family:var(--f-disp);text-transform:uppercase;font-weight:700;letter-spacing:.03em;
  font-size:26px;line-height:1.05;margin-bottom:14px;hyphens:auto}
.card p{color:#33383b;font-size:16px}
.card-out{margin-top:auto;padding-top:20px;border-top:1px solid rgba(0,0,0,.16);color:#25292c!important}
.card-out span{display:block;font-size:11px;color:var(--engrave);margin-bottom:5px;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* Gleiche Hoehe: drei Platten auf einer Montageschiene, nicht versetzt.
   Die Kuehnheit der Seite steckt im Hero, hier gilt Disziplin. */

/* ── Ablauf ───────────────────────────────────────────────────────────── */
.steps{padding:88px 0;background:var(--cab-2);
  border-top:1px solid var(--cab-line);border-bottom:1px solid var(--cab-line)}
.h2{font-family:var(--f-disp);text-transform:uppercase;font-weight:800;letter-spacing:.02em;
  font-size:clamp(30px,4.4vw,52px);line-height:1;margin-bottom:36px}
.h2.dark{color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.eyebrow.light{color:var(--mut-lt)}
.stepslist{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stepslist li{display:flex;flex-direction:column;gap:14px;padding:26px 24px 26px 0;
  border-top:2px solid var(--sig-on);position:relative}
.stepslist li+li{padding-left:24px;border-left:1px solid var(--cab-line)}
.stepnum{font-size:12px;color:var(--sig-txt);letter-spacing:.2em}
.stepslist h3{font-family:var(--f-disp);text-transform:uppercase;font-weight:700;
  font-size:21px;letter-spacing:.03em;margin-bottom:8px}
.stepslist p{color:var(--mut-lt);font-size:15.5px;line-height:1.6}

/* ── Über ─────────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
.about-txt p{color:#33383b;margin-bottom:16px}
.princ{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.princ li{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  font-size:11px;color:var(--engrave);border:1px solid rgba(0,0,0,.28);padding:6px 12px}
.typeplate{margin-top:44px}
.typeplate dl{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;font-size:15px}
.typeplate dt{font-size:11px;color:var(--engrave);padding-top:3px;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.typeplate dd{font-family:var(--f-mono);font-size:13px;color:var(--ink);word-break:break-word}

/* ── Kontakt ──────────────────────────────────────────────────────────── */
.contact{padding:96px 0 88px;text-align:left}
.cbig{display:inline-block;font-family:var(--f-disp);font-weight:700;text-transform:none;
  font-size:clamp(26px,4.6vw,54px);letter-spacing:.01em;line-height:1.05;
  border-bottom:3px solid var(--sig-on);padding-bottom:6px}
.cbig:hover{color:var(--sig-on)}
.hint{margin-top:26px;color:var(--mut-lt);max-width:56ch}

/* ── Rechtliche Seiten ────────────────────────────────────────────────── */
.legal{max-width:760px;margin:0 auto;padding:126px 28px 84px}
.legal h1{font-family:var(--f-disp);text-transform:uppercase;font-weight:800;letter-spacing:.02em;
  font-size:clamp(34px,5vw,56px);line-height:1;margin-bottom:20px}
.legal h2{font-family:var(--f-disp);text-transform:uppercase;font-weight:600;letter-spacing:.16em;
  font-size:12px;color:var(--mut-lt);margin:34px 0 8px}
.legal p{color:var(--mut-lt);margin:8px 0}
.legal .lead{color:var(--ink-lt);font-size:20px;max-width:none}
.legal a{color:var(--ink-lt);border-bottom:1px solid var(--sig-txt)}

/* ── Fuss ─────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--cab-line);padding:28px 0 34px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  font-size:11px;color:var(--mut-lt);letter-spacing:.12em}
.foot-in nav{display:flex;gap:22px}
.foot-in a:hover{color:var(--ink-lt)}

/* ── Schmale Bildschirme ──────────────────────────────────────────────── */
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .cards{grid-template-columns:1fr}

  .about{grid-template-columns:1fr}
  .typeplate{margin-top:0}
  .stepslist{grid-template-columns:1fr}
  .stepslist li+li{padding-left:0;border-left:0}
  .plate{padding:30px 24px 32px}
  .hero{padding:104px 0 56px}
  .lamps a{min-height:44px}
  .lamps{gap:2px 26px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ══ v4 "Anlage in Betrieb" ═══════════════════════════════════════════════
   Ergaenzung zum Schaltschrank-Entwurf. Der Wow-Effekt kommt nicht aus
   Farbe, sondern aus Bewegung mit Bedeutung: hinter der Frontplatte laeuft
   das Feldbus-Netz der Anlage. Klemmen, Verbindungen, Telegramme.
   Die Regel von v3 gilt weiter: Gruen nur dort, wo etwas passiert. */

.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:120px 0 96px;overflow:hidden}
.busfield{position:absolute;inset:0;z-index:0}
.busfield canvas{width:100%;height:100%;display:block}
/* Lesbarkeit vor Effekt: die Platte steht auf einem ruhigen Grund. */
.busfade{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 45%,rgba(34,38,42,.94) 0 38%,rgba(34,38,42,.45) 62%,transparent 100%),
    linear-gradient(to bottom,rgba(34,38,42,.9) 0,transparent 22% 72%,rgba(34,38,42,.95) 100%)}
.hero>.wrap{position:relative;z-index:1}

/* Einschalten: die Platte bekommt einmal Spannung. */
.hero-plate{position:relative;overflow:hidden}
.hero-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-120%);animation:boot 1.15s .25s cubic-bezier(.3,.7,.2,1) both}
@keyframes boot{to{transform:translateX(120%)}}

/* Scroll-Hinweis: Klemmenmarkierung, keine huepfende Maus. */
.scrollhint{position:absolute;left:28px;bottom:34px;display:flex;align-items:center;gap:12px;
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.2em;font-weight:600;
  font-size:11px;color:var(--mut-lt)}
.scrollbar{width:44px;height:2px;background:var(--cab-line);position:relative;overflow:hidden}
.scrollbar::after{content:"";position:absolute;inset:0;width:40%;background:var(--sig-on);
  animation:run 2.6s linear infinite}
@keyframes run{from{transform:translateX(-110%)}to{transform:translateX(260%)}}

/* Reveal: kurze Wege, kein Herumfliegen. */
[data-rise]{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
[data-rise].in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
[data-stagger].in>*{opacity:1;transform:none}

/* Titel wortweise, wie eine Anzeige die Zeile fuer Zeile aufbaut. */
.h1 .w{display:inline-block;opacity:0;transform:translateY(.24em);
  animation:word .55s cubic-bezier(.2,.7,.2,1) forwards}

@keyframes word{to{opacity:1;transform:none}}

/* Klemmen reagieren auf Beruehrung. Deutlicher als vorher: die Klemme wird
   sichtbar groesser, damit klar ist, dass sie lebt. */
.terminals li{transition:transform .18s cubic-bezier(.2,.7,.3,1.3),box-shadow .18s,background .18s;
  transform-origin:center bottom;will-change:transform}
.terminals li:hover{transform:translateY(-4px) scale(1.14);background:var(--plate-hi);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 var(--plate-lo),
    0 0 0 2px rgba(122,226,130,.95),0 0 16px rgba(94,214,104,.55),0 8px 18px rgba(0,0,0,.32)}

@media (max-width:900px){
  .hero{min-height:auto;padding:104px 0 64px}
  .scrollhint{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-plate::after{display:none}
  .h1 .w{opacity:1;transform:none;animation:none}
  [data-rise],[data-stagger]>*{opacity:1;transform:none}
}

/* Korrektur nach erstem Render: das Netz muss sichtbar sein, sonst ist der
   Effekt nur Aufwand. Platte schmaler, Abdeckung weicher, Hinweis an den Rand. */
.hero-plate{max-width:880px;margin-inline:auto}
.busfade{background:
  radial-gradient(76% 82% at 50% 48%,rgba(34,38,42,.93) 0 34%,rgba(34,38,42,.36) 64%,transparent 94%),
  linear-gradient(to bottom,rgba(34,38,42,.85) 0,transparent 20% 74%,rgba(34,38,42,.92) 100%)}
.scrollhint{left:auto;right:28px;bottom:30px;z-index:1}
@media (max-width:1100px){ .hero-plate{max-width:none} }

/* ══ Leistungen: Fach mit Registerkarten ══════════════════════════════════
   Uebernommen ist die Mechanik (Karten faechern beim Beruehren auf), nicht
   die Optik: keine Projektfotos, sondern das, was in dem Fach wirklich
   liegt. Die Karten stecken hinter der Frontplatte und schauen oben heraus.
   Ohne Zeigegeraet und bei reduzierter Bewegung bleibt es eine Liste. */
#produkt{padding-top:210px}
.cards{overflow:visible;align-items:stretch}
.fach{position:relative;display:flex}
.fach>.card{flex:1}
.card:focus-visible{outline:2px solid #ffd24a;outline-offset:3px}

/* Grundzustand ohne Zeigegeraet: schlichte Marken unter der Platte. */
.fan{list-style:none;display:flex;flex-wrap:wrap;gap:8px;order:2;
  position:absolute;top:calc(100% + 14px);left:0;right:0}
.fan li{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;font-size:11px;color:var(--mut-lt);
  border:1px solid var(--cab-line);padding:6px 12px}
.fan li span{display:none}

/* Nur wo ein Zeiger schweben kann. Klasse setzt das Skript. */
.fan-on .fach{isolation:isolate}
.fan-on .fan{position:absolute;left:50%;top:0;right:auto;margin:0;padding:0;border:0;
  display:block;width:0;height:0;z-index:0}
.fan-on .card{position:relative;z-index:1}
.fan-on .fan li{
  position:absolute;left:0;top:0;width:152px;height:104px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:11px 13px;font-size:11.5px;letter-spacing:.03em;line-height:1.2;
  hyphens:auto;overflow-wrap:anywhere;
  color:var(--ink);background:var(--plate);border:1px solid #9fa39e;
  box-shadow:inset 0 1px 0 var(--plate-hi),inset 0 -1px 0 var(--plate-lo),
             0 14px 26px -14px rgba(0,0,0,.9);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  /* Ruhe: der Stapel steckt im Fach, nur die Oberkante schaut heraus. */
  transform:translate(-50%,-26px) rotate(var(--s,0deg));
  transform-origin:50% 100%;
  transition:transform .4s cubic-bezier(.2,.8,.2,1) var(--d,0ms),box-shadow .3s;
}
.fan-on .fan li span{display:block;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.06em;color:var(--engrave);text-shadow:none}
.fan-on .fan li:nth-child(1){--s:-2.5deg}
.fan-on .fan li:nth-child(2){--s:-1deg}
.fan-on .fan li:nth-child(3){--s:1.2deg}
.fan-on .fan li:nth-child(4){--s:2.6deg}

.fan-on .fach:hover .fan li,
.fan-on .fach:focus-within .fan li{
  transform:translate(calc(-50% + var(--x)),calc(-118px + var(--y))) rotate(var(--r));
  box-shadow:inset 0 1px 0 var(--plate-hi),inset 0 -1px 0 var(--plate-lo),
             0 22px 40px -18px rgba(0,0,0,.95);
}
/* Die Platte hebt leicht an: dieses Fach ist gemeint. */
.fan-on .card{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.fan-on .fach:hover .card,
.fan-on .fach:focus-within .card{transform:translateY(-4px)}

@media (max-width:900px){
  #produkt{padding-top:88px}
  /* Touchscreen: kein Faecher, sondern vier gleich breite Klemmen unter der
     Platte. Grid statt Flex, sonst richtet sich die Breite nach dem Wort. */
  .fach{flex-direction:column}
  .fan{position:static;margin:14px 0 0;display:grid;
    grid-template-columns:1fr 1fr;gap:8px}
  .fan li{display:flex;align-items:center;gap:8px;min-height:44px;
    padding:8px 12px;text-align:left;font-size:11px}
  .fan li span{display:block;font-family:var(--f-mono);font-size:10px;
    letter-spacing:.06em;color:var(--engrave);flex:none}
}

/* Schmalere Fenster: den Faecher etwas kleiner, sonst laeuft die aeusserste
   Karte aus dem Bild. */
@media (max-width:1260px){
  .fan-on .fan{transform:scale(.82);transform-origin:50% 0}
}