@import url("/assets/tokens.css");  /* WCAG-AA contrast token layer — overrides local :root fallbacks below */

/* dripback — Shared design tokens + base styles
   per Design.md Section 5 (Tokens) + Section 11 (App-Design).
   Apple-tier minimal · enterprise-grade · Made in Leopoldshöhe (NRW) */

:root {
  /* Surfaces */
  --bg: #0A0A0B;
  --raised: #121214;
  --elev: #1A1A1D;
  --overlay: rgba(34,34,38,0.5);

  /* Ink */
  --ink: #F5F5F7;
  --ink-2: #A1A1AA;
  --ink-3: #8A8A92;  /* WCAG-AA conform on #0A0A0B (5.5:1) — was #52525B (2.56:1 fail) */

  /* Lines */
  --line: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.18);

  /* Accent */
  --accent: #2B6FFF;
  --accent-soft: rgba(43,111,255,0.12);
  --accent-2: #5635A8;             /* Brand-Violet (gradient endpoint) */
  --accent-2-soft: rgba(86,53,168,0.12);
  --signal: #FFB020;
  --emerald: #22C55E;
  --danger: #EF4444;

  /* Typography */
  --font-sans: 'Geist', -apple-system, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-serif: 'Newsreader', Georgia, serif;

  /* Easings (per Design.md 5.4) */
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);

  /* Radius scale (formalized 2026-05-17 from Welle-1) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* Shadow scale */
  --shadow-sm:     0 4px 14px rgba(43,111,255,0.18);
  --shadow-md:     0 8px 28px rgba(43,111,255,0.32);
  --shadow-lg:     0 12px 36px rgba(43,111,255,0.4);
  --shadow-fab:    0 8px 28px rgba(43,111,255,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  --shadow-dialog: 0 24px 80px rgba(0,0,0,0.6);

  /* Space scale */
  --space-section: clamp(80px, 14vh, 160px);
  --space-strip:   clamp(48px, 8vh, 80px);
  --space-card:    24px;
  --space-card-y:  28px;

  /* Brand gradient (CTA, FAB, Avatar) */
  --brand-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-feature-settings: "ss01", "cv11";
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Subtle grain across all pages — transform: translateZ(0) forces GPU compositing layer,
   prevents feTurbulence SVG from triggering a main-thread repaint on every scroll tick */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  transform: translateZ(0);
  will-change: transform;
}

/* --- LAYOUT PRIMITIVES --- */
.wrap { max-width: 1280px; margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px); }
.wrap-narrow { max-width: 880px; margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px); }
section { position: relative; z-index: 2; }

/* --- TOPBAR (shared across pages) --- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: #0A0A0B;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-morph, 200ms);
}
.topbar:has(.mobile-nav.open),
body.menu-open .topbar { background: rgba(10,10,11,0.99); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 24px;
}
.brand {
  font-family: var(--font-mono); font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em;
}
.brand .dot { color: var(--accent); }

.topnav {
  display: none; gap: 28px; font-size: 13px; color: var(--ink-2);
  align-items: center;
}
.topnav a {
  transition: color var(--dur-tap, 200ms);
  font-weight: 400;
}
.topnav a:hover, .topnav a.active { color: var(--ink); }
.topnav a.active { color: var(--accent); }
/* Emphasized nav-link (e.g., Lösungen — primary user destination) */
.topnav a.topnav-emph {
  color: var(--ink); font-weight: 500;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(43,111,255,0.08);
  border: 1px solid rgba(43,111,255,0.18);
}
.topnav a.topnav-emph:hover {
  background: rgba(43,111,255,0.15);
  border-color: var(--accent);
}
.topnav a.topnav-emph.active {
  color: var(--accent); background: rgba(43,111,255,0.15);
}

.topnav-cta {
  font-size: 13px; color: var(--ink-2); padding: 8px 16px;
  border: 1px solid var(--line-2); border-radius: 8px;
  transition: var(--dur-tap, 200ms) var(--ease-smooth); white-space: nowrap;
}
.topnav-cta:hover { border-color: var(--accent); color: var(--accent); }

.menu-toggle {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: 22px; cursor: pointer;
  width: 44px; height: 44px;            /* WCAG 2.5.5 tap-target */
  flex-shrink: 0;
}
.menu-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 960px) {
  .topnav { display: flex; }
  .menu-toggle { display: none; }
}
/* Anti horizontal-scroll guard — use overflow-x: clip statt hidden,
   damit position: sticky bei Descendants funktioniert
   (hidden würde alle ancestor-sticky brechen). */
html, body { overflow-x: clip; }
.fx-marquee, .ticker, [class*="marquee"] { max-width: 100vw; overflow: hidden; }

/* Mobile drawer — sits flush below topbar-inner, no extra gap */
.mobile-nav {
  display: none; padding: 0 0 16px;
  margin-top: 0; border-top: 1px solid var(--line);
  flex-direction: column; gap: 0;
  animation: mobNavSlide 280ms cubic-bezier(0.16,1,0.3,1);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 14px 0; font-size: 16px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-tap, 200ms), padding-left var(--dur-tap, 200ms);
}
.mobile-nav a:hover { color: var(--ink); padding-left: 8px; }
.mobile-nav a.active { color: var(--accent); }
@keyframes mobNavSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- HEADINGS / TYPOGRAPHY --- */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.h-display {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 28px;
}
.h-display em { color: var(--accent); font-style: italic; }
.h-section {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 20px;
}
.h-card {
  font-size: 18px; font-weight: 600; margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(15px, 1.1vw, 17px); color: var(--ink-2);
  max-width: 60ch; line-height: 1.6;
}
.mono { font-family: var(--font-mono); }

/* --- LINK / CTA --- */
.cta-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink); padding: 0;
  min-height: 44px;
  border-bottom: 1px solid var(--accent);
  transition: var(--dur-tap, 200ms) var(--ease-smooth);
}
.cta-ghost::after { content: "→"; transition: transform var(--dur-tap, 200ms); }
.cta-ghost:hover { color: var(--accent); padding-left: 4px; }
.cta-ghost:hover::after { transform: translateX(4px); }

.cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  /* AA: white on --t-accent-interactive = 5.17:1 (brand --accent #2B6FFF was only 4.36:1) */
  background: var(--t-accent-interactive, var(--accent)); color: var(--t-fg-on-accent, #fff);
  padding: 12px 24px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  transition: var(--dur-tap, 200ms) var(--ease-smooth);
}
/* AA: white on --t-accent-hover = 5.85:1 (was hardcoded #1f5cd9) */
.cta-primary:hover { background: var(--t-accent-hover, #1f5cd9); transform: translateY(-1px); }

/* --- COMMON SECTIONS --- */
.section { padding: clamp(80px, 12vh, 160px) 0; }
.section + .section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: 56px; max-width: 720px; }

/* --- CARDS --- */
.card {
  background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 28px 24px;
  transition: var(--dur-pop, 250ms) var(--ease-smooth);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-3px); border-color: rgba(43,111,255,0.35); }

/* --- TRUST / META STRIP --- */
.trust-strip {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 24px 0; opacity: 0.7;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* --- FOOTER (shared) --- */
footer {
  padding: 60px 0 80px;
  border-top: 1px solid var(--line); position: relative; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.01));
}
.footer-grid {
  display: grid; gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
}
.footer-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3); margin: 0 0 14px; font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 13px; color: var(--ink-2); transition: color var(--dur-tap, 150ms); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 2px; }
.footer-col a:hover { color: var(--ink); }
.footer-tag {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.5;
  color: var(--ink-2); max-width: 36ch; margin-top: 16px;
}
.footer-meta {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; gap: 24px; font-size: 12px; color: var(--ink-3);
  font-family: var(--font-mono); flex-wrap: wrap; justify-content: space-between;
}

/* --- ANIMATIONS / KEYFRAMES (shared) --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Site-wide UI/UX Hygiene 2026-05-18 */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; }
.table-wrap table { min-width: 100%; }
.skeleton, .skeleton-row { background: linear-gradient(90deg, var(--raised) 0%, color-mix(in srgb, var(--raised) 60%, var(--elev)) 50%, var(--raised) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; min-height: 28px; }
tr.skeleton-row { height: 28px; }
section > p:not([class]), main > p:not([class]) { max-width: 65ch; }
.section-wrap, .page-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
iframe[src*="discovery"], iframe.embed { width: 100%; aspect-ratio: 16/9; max-height: none; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--t-accent-interactive, #2563EB); color: var(--t-fg-on-accent, #fff); padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; z-index: 9999; font-family: var(--font-mono); font-size: 13px; text-decoration: none; }  /* AA: white on interactive accent 5.17:1 */
.skip-link:focus { left: 12px; top: 12px; }

/* a11y target-size (P12): Leaflet-Marker mind. 24x24px (WCAG 2.5.8) */
.leaflet-marker-icon.standorte-pin-hq,
.leaflet-marker-icon.standorte-pin-customer,
.leaflet-marker-icon[tabindex] { min-width: 24px; min-height: 24px; }

/* Screen-reader-only utility — hides visually, keeps accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   A11Y FLOOR — WCAG 2.1 AA (2026-06-03)
   Applied globally via shared stylesheet → covers all pages
   that load styles.css (index.html + docs/ + insights/ etc.).
   Generated clusters (branche/, loesungen/) need generator fix
   (see generator-level DEFERRED section in audit report).
   ============================================================ */

/* --- 1. Focus-visible: universal ring (WCAG 2.4.7 / 2.4.11) --------
   Replaces bare :focus so mouse-click users never see a ring
   (browsers suppress :focus-visible on click), but keyboard users
   always do.  outline: none on any :focus is overridden below.      */
:focus-visible {
  outline: 3px solid var(--t-accent, var(--accent));
  outline-offset: 3px;
  border-radius: 4px;   /* keeps ring consistent with DripBack radii */
}
/* Undo the "outline:none" anti-pattern found in katalog + bi pages. */
*:focus:not(:focus-visible) { outline: none; }

/* --- 2. Button / interactive element tap-targets (WCAG 2.5.5) ------
   Min 48×48px for primary interactive controls; icon-only buttons
   get 44×44px (DESIGN_SYSTEM §2.1 Mindest-Spezifikationen).
   Does NOT force layout — uses min-* so oversized elements are fine. */
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select {
  min-height: 44px;
  /* No min-width — text buttons may be narrow by design */
}
/* Icon-only buttons must carry aria-label (enforced in generator).
   Visual guard: any button/link containing only an SVG or single char
   gets at least 44×44px touch area. */
button:not(:has(> span:not(:empty))):not(:has(> :not(svg))),
.menu-toggle,
.topnav-cta {
  min-width: 44px;
  min-height: 44px;
}
/* Nav links + logo — extend touch area via padding without breaking layout.
   padding-block adds vertical hit-area; display:inline-flex keeps text baseline. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding-block: 0;
  padding-inline: 4px;
}
/* Pillar "mehr erfahren" + ghost CTAs — extend to 44px tap area */
.pillar-link,
.cta-ghost {
  padding-block: 12px;
  min-height: 44px;
}

/* --- 3. Images without alt — visual hint for dev inspection --------
   (WCAG 1.1.1) — cannot add alt="" via CSS, but we can flag it
   as a visible red border in non-production envs.
   In production this rule is harmless (selects nothing if all img
   have alt). Generator fix is the real solution (see DEFERRED).     */
img:not([alt]) {
  outline: 2px solid var(--danger, #EF4444);
  outline-offset: 2px;
}
/* Decorative images with explicit empty alt are correct — no border. */
img[alt=""] { outline: none; }

/* --- 4. Form label association guard (WCAG 1.3.1 / 3.3.2) ---------
   CSS cannot add <label> elements. This rule flags unlabelled inputs
   visually (dev-only utility — same pattern as img:not([alt])).
   Real fix: add <label for="id"> in generator/template (see DEFERRED). */
input:not([aria-label]):not([aria-labelledby]):not([id]),
select:not([aria-label]):not([aria-labelledby]):not([id]),
textarea:not([aria-label]):not([aria-labelledby]):not([id]) {
  outline: 2px dashed var(--signal, #FFB020);
  outline-offset: 2px;
}

/* --- 5. Contrast: kill the known --ink-3 on --elev misuse ----------
   --ink-3 (#8A8A92) is only AA-safe on --bg (#0A0A0B, 5.07:1).
   On --raised (5.09:1 ok) and --elev (4.86:1 borderline) it passes
   barely — but when page bg overrides to lighter shades it fails.
   Defensive rule: force --ink-2 as fallback on any .card + .elev
   element that uses muted text, preventing future contrast regressions. */
.card .lede,
.card [class*="muted"],
[style*="--elev"] .lede {
  color: var(--ink-2, #A1A1AA);  /* 7.18:1 on --bg — safely AA */
}

/* --- 6. outline:none override — kill the anti-pattern in generated pages ---
   Katalog and BI inline CSS do `.search-bar input:focus { outline: none }`.
   Since styles.css loads AFTER inline <style> via @import in most pages,
   this will not win the cascade there (inline beats external).
   The definitive fix is in the generators (see DEFERRED).
   For pages that DO load styles.css as primary: this rule ensures focus rings
   are never silently removed by a descendant rule without :focus-visible check. */
.search-bar input:focus-visible,
.toolbar-row-search input[type=text]:focus-visible,
.toolbar-row-search select:focus-visible {
  outline: 3px solid var(--t-accent, var(--accent)) !important;
  outline-offset: 2px;
}

/* --- 7. prefers-reduced-motion (already in styles.css ln 307) is sufficient.
   No additional rules needed — existing block covers all animations.    */

/* === 8. AI Act Art. 50 Transparenz-Badge ============================= */
/* EU AI Act Art. 50 erfordert Kennzeichnung bei Interaktion mit KI.
   Badge: dezent, dunkel-mode-passend, clickthrough für interaktive Bereiche. */
.ai-act-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  background: rgba(43, 111, 255, 0.08); border: 1px solid rgba(43, 111, 255, 0.25);
  font-size: 12px; color: var(--ink-2, #A1A1AA);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.03em; line-height: 1.4;
  margin-block: 12px; pointer-events: auto;
  transition: all var(--dur-tap, 200ms) var(--ease-smooth, ease);
}
.ai-act-badge:hover {
  background: rgba(43, 111, 255, 0.12);
  border-color: rgba(43, 111, 255, 0.4);
  color: var(--ink, #F5F5F7);
}
.ai-act-badge::before {
  content: "ⓘ"; font-weight: 700; color: var(--accent, #2B6FFF);
  flex-shrink: 0; font-size: 14px;
}

/* Zweifarbiger Logo-Schriftzug (Timo 2026-07-28): drip = weiß, back = blau, Punkt bleibt Akzent */
.brand .brand-drip { color: var(--t-ink, #F5F5F7); }
.brand .brand-back { color: var(--t-accent, #3D7BFF); }