:root {
  /* Grundfarben */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Transparente Weißtöne */
  --color-white-35: rgba(255, 255, 255, .35);
  --color-white-50: rgba(255, 255, 255, .5);
  --color-white-15: rgba(255, 255, 255, .15);
  --color-white-8: rgba(255, 255, 255, .08);
  --color-white-6: rgba(255, 255, 255, .06);
  --color-white-60: rgba(255, 255, 255, .6);
  --color-white-95: rgba(255, 255, 255, .95);

  /* Transparente Schwarztöne */
  --color-black-06: rgba(0, 0, 0, .06);
  --color-black-08: rgba(0, 0, 0, .08);
  --color-black-10: rgba(0, 0, 0, .10);
  --color-black-12: rgba(0, 0, 0, .12);
  --color-black-14: rgba(0, 0, 0, .14);
  --color-black-25: rgba(0, 0, 0, .25);
  --color-black-30: rgba(0, 0, 0, .3);
  --color-black-35: rgba(0, 0, 0, .35);
  --color-black-65: rgba(0, 0, 0, .65);
  --color-black-0: rgba(0, 0, 0, 0);

  /* Accent-Übergänge (aus deinem Cyan) */
  --color-accent-15: rgba(92, 196, 229, .15);
  --color-accent-35: rgba(92, 196, 229, .35);

  /* Rail-Hintergrund */
  --color-rail-mid: #eef1f6;
  --color-rail-bottom: #c9ced7;

  /* Kopf / Schiene / PCB-Board */
  --color-chip-bg: #1b1f24;
  --color-chip-border: #3b424a;
  --color-pin-metal: #c1c1c1;
  --color-led-red: #e53935;
  --color-led-green: #39e559;
  --color-cap-top: #ffd562;
  --color-cap-bottom: #caa329;
  --color-cap-border: #815f12;

  --color-sled-bg: #eff3f7;
  --color-sled-line: #cfd9e4;
  --color-head-body: #2c2f33;
  --color-head-stroke: #41474e;
  --color-head-slot: #3a3f45;
  --color-head-led-a: #ff6b6b;
  --color-head-led-b: #ff4444;
  --color-head-led-c: #e03636;
  --color-nozzle-body: #3b4147;

  /* PCB-Karte / Text */
  --color-silk: #cfe8d7;
  --color-pcb-text: #fff;

  /* Packages / Bauteile */
  --color-r0603-top: #bebebe;
  --color-r0603-bottom: #8c8c8c;
  --color-r0603-border: #5e5e5e;

  --color-led0603-top: #ffbbb5;
  --color-led0603-border: #9c1f1f;
  --color-led-red-glow: rgba(229, 57, 53, .35);

  --color-soic8-top: #22272c;
  --color-soic8-bottom: #14171a;
  --color-soic8-border: #3a4046;

  --color-qfn-top: #202428;
  --color-qfn-bottom: #121416;
  --color-qfn-border: #454c54;

  --color-sot-top: #2a2f34;
  --color-sot-bottom: #171a1d;
  --color-sot-border: #3d434a;

  --color-xtal-top: #d9d9d9;
  --color-xtal-bottom: #a8a8a8;
  --color-xtal-border: #6d6d6d;

  --color-inductor-top: #4e5a64;
  --color-inductor-bottom: #2d3338;
  --color-inductor-border: #22272c;

  --color-header-bg: #222;
  --color-header-pin: #c4a03b;
  --color-header-border: #3a3a3a;

  --color-electrolyt-top: #6f7780;
  --color-electrolyt-bottom: #1e2328;
  --color-electrolyt-border: #0f1214;
  --color-electrolyt-plus: #e5e5e5;

  /* Karte / Map */
  --color-map-bg: #e6ecf2;
  --color-map-link-light: #e6eef8;
}

/* ===== 02-layout-components.css ===== */

/* Optional: Förderband-Deko (auf --conveyor-w basierend; 0px = aus) */
.conveyor {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--conveyor-w);
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background:
    repeating-linear-gradient(to bottom, var(--color-white-35) 0 8px, transparent 8px 22px),
    linear-gradient(180deg, var(--color-white-50), var(--color-white-15));
  border-inline: 1px solid var(--color-black-06);
}

.conveyor.left {
  left: 0;
}

.conveyor.right {
  right: 0;
}

/* ===== Header fixiert ===== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 4000;
  margin-inline: var(--conveyor-w);
}

.site-header .inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--color-black-06);
  box-shadow: var(--shadow);
  padding: 8px 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.logo {
  height: 34px;
  width: auto;
}

.brand-name {
  font-weight: 800;
  letter-spacing: .2px;
}

.menu {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.menu a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  padding: 10px 12px;
}

.menu a:hover,
.menu a:focus-visible {
  color: var(--text);
  background: var(--color-accent-15);
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
}

.menu-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid var(--color-black-12);
  background: var(--color-white);
  color: var(--text);
}

.btn-ghost {
  background: transparent;
}

.btn-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 12px 24px var(--color-accent-35);
}

.btn-lg {
  padding: 14px 18px;
  font-size: 1.05rem;
}

.lg-only {
  display: inline-flex;
}

.sm-hide {
  display: inline-flex;
}

/* Platz für Header */
main {
  padding-top: calc(var(--header-h) + 18px);
}

/* ===== Hero ===== */
.hero {
  padding-top: 50px;
}

.hero-grid {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: 1.15fr .85fr;
}

.eyebrow {
  display: inline-block;
  font-weight: 800;
  color: var(--color-white);
  background: var(--primary);
  padding: 6px 10px;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(44px, 5vw, 56px);
}

.lede {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.hero-stage {
  display: grid;
  place-items: center;
}

/* PCB-Board Demo */
.board {
  position: relative;
  width: min(520px, 92%);
  aspect-ratio: 5 / 3;
  background: linear-gradient(180deg,
      var(--pcb-mask),
      color-mix(in oklab, var(--pcb-mask), var(--color-black) 6%));
  border: 2px solid color-mix(in oklab, var(--pcb-mask), var(--color-black) 20%);
  box-shadow: var(--shadow);
  transform: perspective(1200px) rotateX(10deg) rotateY(-12deg);
  transition: transform .3s ease;
}

.board:hover {
  transform: perspective(1200px) rotateX(6deg) rotateY(-8deg) translateY(-2px);
}

.board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 80% 20%, var(--color-white-8), transparent 60%),
    repeating-linear-gradient(90deg, var(--color-white-6) 0 2px, transparent 2px 6px);
  opacity: .6;
}

.chip {
  position: absolute;
  left: 14%;
  top: 24%;
  width: 28%;
  height: 20%;
  background: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
}

.chip::before,
.chip::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  height: 2px;
  top: 50%;
  background: repeating-linear-gradient(90deg, var(--color-pin-metal) 0 6px, transparent 6px 12px);
  transform: translateY(-50%);
}

.led-a,
.led-b {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 12px var(--color-white-35);
}

.led-a {
  left: 62%;
  top: 36%;
  background: var(--color-led-red);
}

.led-b {
  left: 72%;
  top: 58%;
  background: var(--color-led-green);
}

.cap {
  position: absolute;
  left: 52%;
  top: 22%;
  width: 14px;
  height: 22px;
  background: linear-gradient(180deg, var(--color-cap-top), var(--color-cap-bottom));
  border: 1px solid var(--color-cap-border);
}

.trace {
  position: absolute;
  height: 3px;
  background: var(--pcb-line);
  opacity: .85;
}

.trace.t1 {
  left: 18%;
  top: 70%;
  width: 64%;
}

.trace.t2 {
  left: 28%;
  top: 76%;
  width: 48%;
}

.trace.t3 {
  left: 18%;
  top: 82%;
  width: 40%;
}

/* Karten / Raster */
.cards-grid,
.tech-grid,
.data-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--color-black-10);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card h3 {
  margin: 0 0 6px;
}

/* Timeline */
.timeline {
  display: grid;
  gap: 18px;
}

.t-item {
  position: relative;
  padding-left: 26px;
}

.t-dot {
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  background: var(--primary);
}

.t-card {
  background: var(--panel);
  border: 1px solid var(--color-black-10);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* Checklist */
.bullets {
  margin: 0 0 0 18px;
}

.checklist ul {
  margin: 0 0 0 18px;
}

/* CTA */
.cta .cta-inner {
  display: grid;
  gap: 18px;
  align-items: center;
  grid-template-columns: 1.1fr .9fr;
  background: var(--panel);
  border: 1px solid var(--color-black-10);
  padding: 22px;
  box-shadow: var(--shadow);
}

.cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Kontakt */
.contact-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: .9fr 1.1fr;
}

.contact-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  margin: 12px 0;
}

.contact .form-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field input,
.form-field textarea {
  padding: 12px;
  border: 1px solid var(--color-black-14);
  background: var(--panel);
  color: var(--text);
}

.form-status {
  margin-top: 8px;
  min-height: 1.2em;
}

/* Footer */
.site-footer {
  padding: 40px 0 60px;
  margin-inline: var(--conveyor-w);
}

.footer-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--primary);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-brand {
  text-decoration: none;
  color: inherit;
}

.tiny {
  font-size: .9rem;
  color: var(--muted);
}

/* Floating CTA */
.float-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 4500;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 900;
  padding: 12px 16px;
  border: 1px solid transparent;
  box-shadow: var(--shadow);
}

/* ===== Workarea (Schiene + Kopf) ===== */
.workarea {
  position: fixed;
  inset: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  contain: layout paint;
}

.rail-x {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  transform: translateY(40vh);
  background: linear-gradient(180deg,
      var(--color-white) 0%,
      var(--color-rail-mid) 45%,
      var(--color-rail-bottom) 100%);
  box-shadow:
    inset 0 1px 0 var(--color-white-95),
    inset 0 -1px 0 var(--color-black-10),
    0 2px 6px var(--color-black-08);
}

.placer {
  position: absolute;
  width: 420px;
  height: 240px;
  transform: translate(16px, 40vh);
}

.sled {
  fill: var(--color-sled-bg);
}

.sled-line {
  fill: none;
  stroke: var(--color-sled-line);
  stroke-width: 2;
}

.head-body {
  fill: var(--color-head-body);
  stroke: var(--color-head-stroke);
  stroke-width: 2;
}

.head-slot {
  fill: var(--color-head-slot);
}

.led {
  fill: var(--color-head-led-a);
}

.led-b {
  fill: var(--color-head-led-b);
}

.led-c {
  fill: var(--color-head-led-c);
}

.nozzle-body {
  fill: var(--color-nozzle-body);
}

.nozzle-tip {
  fill: var(--color-led-red);
}

/* ===== PCB-GRID & -KARTEN ===== */
.pcb-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.pcb-card {
  position: relative;
  background: var(--pcb-mask);
  border: 2px solid color-mix(in oklab, var(--pcb-mask), var(--color-black) 25%);
  padding: 22px;
  box-shadow: var(--shadow);
  min-height: 420px;
  overflow: hidden;
}

.pcb-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%230e6130'/%3E%3Cg fill='none' stroke='%2361d787' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 30H90V70H140V30H190'/%3E%3Cpath d='M30 10V90'/%3E%3Cpath d='M10 100H70V140H120'/%3E%3Cpath d='M110 10V60H190'/%3E%3Cpath d='M80 110V190H150'/%3E%3Cpath d='M20 170H90V130H170'/%3E%3C/g%3E%3Cg fill='none' stroke='%2361d787' stroke-width='4'%3E%3Ccircle cx='10' cy='30' r='3'/%3E%3Ccircle cx='30' cy='10' r='3'/%3E%3Ccircle cx='90' cy='70' r='3'/%3E%3Ccircle cx='140' cy='30' r='3'/%3E%3Ccircle cx='190' cy='30' r='3'/%3E%3Ccircle cx='10' cy='100' r='3'/%3E%3Ccircle cx='70' cy='140' r='3'/%3E%3Ccircle cx='120' cy='140' r='3'/%3E%3Ccircle cx='80' cy='110' r='3'/%3E%3Ccircle cx='150' cy='190' r='3'/%3E%3Ccircle cx='110' cy='10' r='3'/%3E%3Ccircle cx='190' cy='60' r='3'/%3E%3Ccircle cx='20' cy='170' r='3'/%3E%3Ccircle cx='170' cy='130' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
  background-repeat: repeat;
  opacity: .22;
}

.pcb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      var(--color-black-10),
      var(--color-black-0) 30%,
      var(--color-black-08) 100%);
  mix-blend-mode: multiply;
  opacity: .25;
}

.silk {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--color-silk);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .6px;
}

.pcb-card h1,
.pcb-card h2,
.pcb-card h3,
.pcb-card h4,
.pcb-card p,
.pcb-card li,
.pcb-card address,
.pcb-card dt,
.pcb-card dd,
.pcb-card strong,
.pcb-card em {
  color: var(--color-pcb-text);
  text-shadow:
    0 1px 2px var(--color-black-65),
    0 0 6px var(--color-black-30);
}

/* Komponenten (Rotation via --rot) */
.comp {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  filter: drop-shadow(0 1px 1.5px var(--color-black-35));
  z-index: 0;
}

.comp.placed {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}

/* Packages */
.comp.pkg-r0603,
.comp.pkg-r0805,
.comp.pkg-c0603,
.comp.pkg-c1206 {
  background: linear-gradient(180deg, var(--color-r0603-top), var(--color-r0603-bottom));
  border: 1px solid var(--color-r0603-border);
  box-shadow:
    inset 0 1px 0 var(--color-white-60),
    inset 0 -1px 0 var(--color-black-25);
}

.comp.pkg-led0603 {
  background: radial-gradient(circle at 40% 35%, var(--color-led0603-top) 0 45%, var(--color-led-red) 50% 100%);
  border: 1px solid var(--color-led0603-border);
  box-shadow: 0 0 10px var(--color-led-red-glow);
}

.comp.pkg-soic8 {
  background: linear-gradient(180deg, var(--color-soic8-top), var(--color-soic8-bottom));
  border: 1px solid var(--color-soic8-border);
}

.comp.pkg-soic8::before,
.comp.pkg-soic8::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  height: 2px;
  top: 50%;
  background: repeating-linear-gradient(90deg, var(--color-pin-metal) 0 6px, transparent 6px 12px);
  transform: translateY(-50%);
}

.comp.pkg-qfn32,
.comp.pkg-qfp44 {
  background: linear-gradient(180deg, var(--color-qfn-top), var(--color-qfn-bottom));
  border: 1px solid var(--color-qfn-border);
}

.comp.pkg-qfn32::before,
.comp.pkg-qfn32::after,
.comp.pkg-qfp44::before,
.comp.pkg-qfp44::after {
  content: "";
  position: absolute;
  inset: -10px;
  background:
    repeating-linear-gradient(90deg, var(--color-pin-metal) 0 10px, transparent 10px 20px) top/100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--color-pin-metal) 0 10px, transparent 10px 20px) bottom/100% 2px no-repeat,
    repeating-linear-gradient(0deg, var(--color-pin-metal) 0 10px, transparent 10px 20px) left/2px 100% no-repeat,
    repeating-linear-gradient(0deg, var(--color-pin-metal) 0 10px, transparent 10px 20px) right/2px 100% no-repeat;
}

.comp.pkg-sot23,
.comp.pkg-sot223 {
  background: linear-gradient(180deg, var(--color-sot-top), var(--color-sot-bottom));
  border: 1px solid var(--color-sot-border);
}

.comp.pkg-sot23::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--color-pin-metal);
}

.comp.pkg-sot223::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--color-pin-metal);
}

.comp.pkg-xtal3225 {
  background: linear-gradient(180deg, var(--color-xtal-top), var(--color-xtal-bottom));
  border: 1px solid var(--color-xtal-border);
}

.comp.pkg-inductor {
  background: linear-gradient(180deg, var(--color-inductor-top), var(--color-inductor-bottom));
  border: 1px solid var(--color-inductor-border);
  box-shadow: inset 0 0 0 2px var(--color-white-6);
}

.comp.pkg-header1x6 {
  background: repeating-linear-gradient(90deg, var(--color-header-bg) 0 6px, var(--color-header-pin) 6px 8px, transparent 8px 12px);
  border: 1px solid var(--color-header-border);
}

.comp.pkg-electrolytic {
  background: radial-gradient(circle at 50% 45%, var(--color-electrolyt-top) 0 45%, var(--color-electrolyt-bottom) 55% 100%);
  border: 1px solid var(--color-electrolyt-border);
  border-radius: 50%;
}

.comp.pkg-electrolytic::after {
  content: "+";
  position: absolute;
  top: 2px;
  left: 2px;
  font-weight: 900;
  font-size: 10px;
  color: var(--color-electrolyt-plus);
}

/* ===== Karte / Standort ===== */
.map-wrap {
  position: relative;
  height: clamp(360px, 48vw, 520px);
  border: 1px solid var(--color-black-12);
  background: var(--color-map-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-osm-link {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: .9rem;
  text-decoration: none;
  background: color-mix(in oklab, var(--panel), var(--color-white) 12%);
  color: var(--primary);
  border: 1px solid var(--color-black-12);
  padding: 6px 10px;
  box-shadow: var(--shadow);
}

.dark .map-osm-link {
  background: color-mix(in oklab, var(--panel), var(--color-black) 12%);
  color: var(--color-map-link-light);
  border-color: var(--color-white-8);
}

/* Zielpunkt, den der Kopf "picken" soll – deckt den OSM-Marker in der Mitte */
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background: var(--accent);
  border: 3px solid var(--panel);
  box-shadow: 0 6px 16px var(--color-black-25);
  z-index: 2;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}

.map-pin.placed {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}