/* ===== 01-theme-base.css ===== */
/* Tokens & Theme */
:root {
  --container: 1200px;
  --g: 16px;
  --radius: 0;                 /* eckige Ecken */
  --header-h: 72px;

  --bg: #F4F7FB;
  --panel: #ffffff;
  --text: #0F1A2B;
  --muted: #5f6b7b;

  --primary: #094068;
  --accent: #5CC4E5;
  --accent-ink: #094068;

  --ok: #1E8F4D;
  --warn: #B88900;
  --err: #B2413B;

  /* PCB */
  --pcb-mask: #005cb3;
  --pcb-line: #5666f5;

  /* FX */
  --shadow: 0 10px 24px rgba(15, 26, 43, .08), 0 4px 10px rgba(15, 26, 43, .06);
  --glass: rgba(255, 255, 255, .7);
  --blur: 10px;

  /* Seiten-Deko */
  --conveyor-w: 0px; /* Förderband dekorativ – auf 0px neutralisiert */

  /* Sticky-Header Offset */
  --header-offset: 96px;

  /* Zeichen-Karo Gridgrößen */
  --grid-s: 24px;
  --grid-l: 120px;
}

:root.dark {
  --bg: #0b1116;
  --panel: #0e151b;
  --text: #e8eef5;
  --muted: #acb6c2;

  --primary: #0f5a8b;
  --accent: #5CC4E5;
  --accent-ink: #0c2a46;

  --shadow: 0 20px 40px rgba(0, 0, 0, .35);
  --glass: rgba(16, 22, 28, .55);
  --blur: 12px;

  --pcb-mask: #005cb3;
  --pcb-line: #5666f5;
}

/* Base */
* { box-sizing: border-box; }

html {
  height: 100%;
  scroll-behavior: smooth;
  /* Sticky-Header: globales Padding und Anker-Offset */
  scroll-padding-top: var(--header-offset);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  font: 18px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background-color: var(--bg);
}

/* Standard: helles Logo anzeigen, dunkles verstecken */
.logo {
  display: block;
  height: auto;
}

.logo--dark {
  display: none;
}

/* Wenn das Dark-Theme aktiv ist (.dark kommt von deinem JS) */
.dark .logo--light {
  display: none;
}

.dark .logo--dark {
  display: block;
}

/* Fokus sichtbar */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Container/Section/Typo */
.container { width: min(100% - 2*var(--g), var(--container)); margin-inline: auto; }
.section { padding: 10px 0; }
.section.soft { background: linear-gradient(180deg, rgba(92,196,229,.08), transparent 70%); }
.section-hd h2 { margin: 0 0 6px; font-size: clamp(32px, 2.8vw, 40px); }
.section-hd .muted { color: var(--muted); margin: 0; }
.big { font-size: 1.05em; }

/* Skip-Link */
.skip-link {
  position: fixed; left: -9999px; top: 12px; z-index: 5000;
  background: #111; color: #fff; padding: 10px 14px;
}
.skip-link:focus { left: 12px; }

/* Zeichen-Karo Hintergrund – hell */
:root:not(.dark) body {
  background: none !important;
  background-color: var(--bg) !important;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--grid-s) - 1px), rgba(9,64,104,0.048) calc(var(--grid-s) - 1px) var(--grid-s)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--grid-s) - 1px), rgba(9,64,104,0.034) calc(var(--grid-s) - 1px) var(--grid-s)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--grid-l) - 1px), rgba(9,64,104,0.048) calc(var(--grid-l) - 1px) var(--grid-l)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--grid-l) - 1px), rgba(9,64,104,0.062) calc(var(--grid-l) - 1px) var(--grid-l)) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

/* Zeichen-Karo Hintergrund – dunkel */
:root.dark body {
  background: none !important;
  background-color: var(--bg) !important;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--grid-s) - 1px), rgba(255,255,255,0.05) calc(var(--grid-s) - 1px) var(--grid-s)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--grid-s) - 1px), rgba(255,255,255,0.05) calc(var(--grid-s) - 1px) var(--grid-s)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--grid-l) - 1px), rgba(255,255,255,0.07) calc(var(--grid-l) - 1px) var(--grid-l)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--grid-l) - 1px), rgba(255,255,255,0.07) calc(var(--grid-l) - 1px) var(--grid-l)) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

/* Horizontalen Scroll verhindern (mit iOS-Fallback) */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;     /* modern */
  overflow-x: hidden;   /* Fallback */
  position: relative;
}

/* Clippen, falls Hover/Animation übersteht */
.section, .intro, .pcb-grid, .pcb-card, .cards-grid, .timeline,
.tech-grid, .data-grid, .cta, .contact-grid, .footer-grid { overflow-x: clip; }

/* Medien nie breiter als Viewport */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Header: inneres Overflow absichern, Menü darf umbrechen */
.site-header .inner { overflow-x: clip; }
.menu { flex-wrap: wrap; min-width: 0; }

/* Anker-Offsets für direkte H-Tags/Sections */
section[id], h1[id], h2[id], h3[id] { scroll-margin-top: var(--header-offset); }