/* ==========================================================================
   AS E-TECH — base.css
   Design tokens, reset, typography, accessibility primitives.
   ========================================================================== */

/* ---------- Font (self-hosted, DSGVO-konform: kein Google-CDN-Request) ---- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-var.woff2") format("woff2-variations"),
       url("../assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* Surfaces — cool graphite, not pure black */
  --ink-950:#07090b;
  --ink-900:#0b0e12;
  --ink-850:#0f1318;
  --ink-800:#141920;
  --ink-750:#1a212a;
  --ink-700:#232b36;

  /* Light surfaces */
  --paper:#f4f5f7;
  --paper-raised:#ffffff;
  --paper-sunk:#eceef1;

  /* Foreground */
  --fg:#f4f6f8;
  --fg-muted:#9ba6b4;
  --fg-dim:#6e7a88;
  --fg-ink:#0d1116;
  --fg-ink-muted:#59636f;

  /* Hairlines */
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --line-ink:#e2e5e9;
  --line-ink-strong:#cfd4da;

  /* Brand — abgeleitet aus dem Original-Logo (Blitz, Kabel, Stecker) */
  --accent:#ff8a18;              /* Blitz / Unterstrich / "S" */
  --accent-hot:#ffa445;
  --accent-deep:#d96a08;
  --accent-soft:rgba(255,138,24,.10);
  --accent-line:rgba(255,138,24,.30);
  --accent-glow:rgba(255,138,24,.22);

  /* Zweite Markenfarbe: das Kabel im Logo ist blau */
  --brand-blue:#0a5fc4;
  --brand-blue-hot:#2e82e8;
  --brand-blue-deep:#003078;
  --brand-blue-soft:rgba(10,95,196,.12);
  --brand-blue-line:rgba(46,130,232,.28);

  /* Support */
  --steel:#4b607b;               /* Stecker im Logo */
  --danger:#ff5b52;
  --success:#3ecf8e;

  /* Spacing — 8pt scale */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:5.5rem; --s-10:7.5rem;

  /* Section rhythm */
  --section-y:clamp(4.5rem, 9vw, 8.5rem);
  --section-y-tight:clamp(3rem, 6vw, 5rem);

  /* Radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow-md:0 12px 32px rgba(0,0,0,.30);
  --shadow-lg:0 32px 80px rgba(0,0,0,.45);
  --shadow-accent:0 12px 32px rgba(255,138,24,.22);

  /* Typography */
  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display:clamp(2.5rem, 4.6vw, 4.05rem);
  --fs-h1:clamp(2.15rem, 4.4vw, 3.5rem);
  --fs-h2:clamp(1.8rem, 3.2vw, 2.7rem);
  --fs-h3:clamp(1.12rem, 1.5vw, 1.3rem);
  --fs-lead:clamp(1.02rem, 1.25vw, 1.17rem);
  --fs-body:1rem;
  --fs-sm:.905rem;
  --fs-xs:.8rem;
  --fs-eyebrow:.735rem;

  --lh-display:1.02;
  --lh-heading:1.14;
  --lh-body:1.65;

  --track-display:-.035em;
  --track-heading:-.022em;
  --track-eyebrow:.15em;

  /* Layout */
  --container:1240px;
  --container-narrow:880px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --header-h:76px;

  /* Motion */
  --ease-out:cubic-bezier(.22,.8,.35,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:.16s;
  --dur:.28s;
  --dur-slow:.55s;
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1.5rem);
}

body {
  margin:0;
  background:var(--ink-950);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd { margin:0; }
ul,ol { margin:0; padding:0; }
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
::selection { background:var(--accent); color:#14100c; }

/* ---------- Typography --------------------------------------------------- */
h1,h2,h3,h4 { font-weight:700; letter-spacing:var(--track-heading); line-height:var(--lh-heading); }

.t-display {
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  letter-spacing:var(--track-display);
  font-weight:700;
}
.t-h1 { font-size:var(--fs-h1); }
.t-h2 { font-size:var(--fs-h2); letter-spacing:var(--track-display); }
.t-h3 { font-size:var(--fs-h3); }
.t-lead { font-size:var(--fs-lead); line-height:1.6; color:var(--fg-muted); }
.t-sm { font-size:var(--fs-sm); }
.t-xs { font-size:var(--fs-xs); }
.t-muted { color:var(--fg-muted); }
.t-dim { color:var(--fg-dim); }
.t-accent { color:var(--accent); }
.t-balance { text-wrap:balance; }
.t-pretty { text-wrap:pretty; }

/* Eyebrow — the recurring "technical label" motif */
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before {
  content:"";
  width:1.75rem;
  height:1px;
  background:currentColor;
  opacity:.65;
  flex:none;
}
.eyebrow--plain::before { display:none; }

/* Measure control */
.measure { max-width:58ch; }
.measure-narrow { max-width:46ch; }

/* ---------- Accessibility ------------------------------------------------ */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.skip-link {
  position:absolute;
  left:var(--s-4);
  top:var(--s-4);
  z-index:200;
  padding:.75rem 1.15rem;
  border-radius:var(--r-sm);
  background:var(--accent);
  color:#14100c;
  font-weight:600;
  transform:translateY(-160%);
  transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform:none; }

.visually-hidden {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- Spacing utilities (nur fuer seltene Einzelfaelle) ------------- */
.u-mt-1 { margin-top:.75rem; }
.u-mb-1 { margin-bottom:.4rem; }
.u-mb-2 { margin-bottom:1.25rem; }
.u-mb-3 { margin-bottom:1.5rem; }
.u-mt-mb { margin:.6rem 0 .75rem; }

/* ---------- Motion preferences ------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  body { background:#fff; color:#000; }
  .site-header, .site-footer, .mobile-nav, .to-top { display:none !important; }
}