/**
 * JERVIS Design System Tokens
 */

:root {
  --color-palette-teal-50: #e6fbf6;
  --color-palette-teal-100: #b8f3e2;
  --color-palette-teal-200: #7fe7c8;
  --color-palette-teal-300: #35f0cb;
  --color-palette-teal-400: #00d4aa;
  --color-palette-teal-500: #00b894;
  --color-palette-teal-600: #00a885;
  --color-palette-teal-700: #008368;
  --color-palette-teal-800: #006650;
  --color-palette-teal-900: #003d30;
  --color-palette-neutral-50: #f7f9fc;
  --color-palette-neutral-100: #f0f2f5;
  --color-palette-neutral-200: #dfe2e9;
  --color-palette-neutral-300: #b4b8c4;
  --color-palette-neutral-400: #9aa0ad;
  --color-palette-neutral-500: #7a8090;
  --color-palette-neutral-600: #2a2a35;
  --color-palette-neutral-650: #1e1e28;
  --color-palette-neutral-700: #1c1c22;
  --color-palette-neutral-750: #1a1a1f;
  --color-palette-neutral-800: #16161a;
  --color-palette-neutral-850: #111114;
  --color-palette-neutral-900: #0c0c12;
  --color-palette-neutral-950: #09090b;
  --color-palette-neutral-00: #000000;
  --color-palette-red-400: #f87171;
  --color-palette-red-500: #ef4444;
  --color-palette-red-600: #dc2626;
  --color-palette-amber-400: #fbbf24;
  --color-palette-amber-500: #f59e0b;
  --color-palette-amber-600: #d97706;
  --color-palette-green-400: #4ade80;
  --color-palette-green-500: #22c55e;
  --color-palette-green-600: #16a34a;
  --color-palette-blue-400: #60a5fa;
  --color-palette-blue-500: #3b82f6;
  --color-palette-blue-cyan-700: #00aeef;
  --color-palette-subbrand-aegis: #e11d48;
  --color-palette-subbrand-moat: #1f2937;
  --color-palette-brand-jervis: #00d4aa;
  --color-palette-alpha-white-04: rgba(255,255,255,0.04);
  --color-palette-alpha-white-06: rgba(255,255,255,0.06);
  --color-palette-alpha-white-08: rgba(255,255,255,0.08);
  --color-palette-alpha-white-12: rgba(255,255,255,0.12);
  --color-palette-alpha-teal-03: rgba(0,212,170,0.03);
  --color-palette-alpha-teal-04: rgba(0,212,170,0.04);
  --color-palette-alpha-teal-05: rgba(0,212,170,0.05);
  --color-palette-alpha-teal-06: rgba(0,212,170,0.06);
  --color-palette-alpha-teal-08: rgba(0,212,170,0.08);
  --color-palette-alpha-teal-10: rgba(0,212,170,0.10);
  --color-palette-alpha-teal-12: rgba(0,212,170,0.12);
  --color-palette-alpha-teal-15: rgba(0,212,170,0.15);
  --color-palette-alpha-teal-16: rgba(0,212,170,0.16);
  --color-palette-alpha-teal-18: rgba(0,212,170,0.18);
  --color-palette-alpha-teal-20: rgba(0,212,170,0.20);
  --color-palette-alpha-teal-25: rgba(0,212,170,0.25);
  --color-palette-alpha-teal-30: rgba(0,212,170,0.30);
  --color-background-base: #09090b;
  --color-background-raised: #111114;
  --color-background-card: #16161a;
  --color-background-elevated: #1c1c22;
  --color-background-panel: rgba(17,17,20,0.72);
  --color-text-primary: #f0f2f5;
  --color-text-secondary: #b4b8c4;
  --color-text-tertiary: #9aa0ad;
  --color-text-quaternary: #7a8090;
  --color-text-on-brand: #09090b;
  --color-text-link: var(--color-palette-brand-jervis, #00d4aa);
  --color-text-link-hover: #35f0cb;
  --color-border-subtle: rgba(255,255,255,0.06);
  --color-border-default: #1e1e28;
  --color-border-strong: rgba(255,255,255,0.12);
  --color-border-lift: #2a2a35;
  --color-border-focus: var(--color-palette-brand-jervis, #00d4aa);
  --color-brand-action: #00d4aa;
  --color-brand-action-hover: #35f0cb;
  --color-brand-action-pressed: #00b894;
  --color-brand-action-deep: #00a885;
  --color-brand-action-dim: rgba(0,212,170,0.08);
  --color-brand-action-glow: rgba(0,212,170,0.18);
  --color-severity-critical: #f87171;
  --color-severity-high: #ea580c;
  --color-severity-medium: #eab308;
  --color-severity-low: #3b82f6;
  --color-severity-pass: #16a34a;
  --color-score-good: #16a34a;
  --color-score-warn: #eab308;
  --color-score-bad: #f87171;
  --size-spacing-0: 0;
  --size-spacing-1: 4px;
  --size-spacing-2: 8px;
  --size-spacing-3: 12px;
  --size-spacing-4: 16px;
  --size-spacing-6: 24px;
  --size-spacing-8: 32px;
  --size-spacing-12: 48px;
  --size-spacing-16: 64px;
  --size-radius-sm: 6px;
  --size-radius-md: 10px;
  --size-radius-lg: 14px;
  --size-radius-xl: 20px;
  --size-radius-pill: 999px;
  --size-radius-full: 50%;
  --size-border-thin: 1px;
  --size-border-base: 2px;
  --size-border-thick: 3px;
  --typography-font-size-xs: 0.75rem;
  --typography-font-size-sm: 0.8125rem;
  --typography-font-size-base: 0.9rem;
  --typography-font-size-lg: 1.05rem;
  --typography-font-size-xl: 1.2rem;
  --typography-font-size-2xl: 1.65rem;
  --typography-font-size-3xl: 2.25rem;
  --typography-font-size-4xl: 3rem;
  --typography-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --typography-font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
  --typography-font-weight-regular: 400;
  --typography-font-weight-medium: 500;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-bold: 700;
  --typography-line-height-tight: 1.2;
  --typography-line-height-snug: 1.4;
  --typography-line-height-normal: 1.55;
  --typography-line-height-relaxed: 1.7;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-easing-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 0 1px var(--color-palette-alpha-teal-18, rgba(0,212,170,0.18)), 0 8px 24px var(--color-palette-alpha-teal-08, rgba(0,212,170,0.08));
  --focus-ring: 0 0 0 2px #09090b, 0 0 0 4px var(--color-palette-brand-jervis, #00d4aa);
  --button-primary-background: linear-gradient(135deg, var(--color-palette-alpha-teal-18, rgba(0,212,170,0.18)), var(--color-palette-alpha-teal-08, rgba(0,212,170,0.08)));
  --button-primary-background-hover: linear-gradient(135deg, var(--color-palette-alpha-teal-30, rgba(0,212,170,0.30)), var(--color-palette-alpha-teal-15, rgba(0,212,170,0.15)));
  --button-primary-color: #f0f2f5;
  --button-primary-border: #35f0cb;
  --card-background: linear-gradient(135deg, rgba(20,20,24,0.88), rgba(14,14,18,0.88));
  --card-border: rgba(255,255,255,0.06);
  --card-border-hover: var(--color-palette-alpha-teal-18, rgba(0,212,170,0.18));
  --card-padding: 24px;
  --card-radius: 20px;
  --card-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --card-shadow-hover: 0 0 0 1px var(--color-palette-alpha-teal-18, rgba(0,212,170,0.18)), 0 8px 24px var(--color-palette-alpha-teal-08, rgba(0,212,170,0.08));
  --nav-background: rgba(9,9,11,0.92);
  --nav-border: rgba(255,255,255,0.06);
  --nav-height: 60px;
  --nav-z-index: 100;
  --nav-link-color: #b4b8c4;
  --nav-link-color-hover: #f0f2f5;
  --nav-link-color-active: var(--color-palette-brand-jervis, #00d4aa);
  --input-background: #111114;
  --input-border: #1e1e28;
  --input-border-focus: var(--color-palette-brand-jervis, #00d4aa);
  --input-color: #f0f2f5;
  --input-placeholder: #8b919f;
  --input-radius: 10px;
}

@media print {
  :root {
    --color-background-base: #ffffff;
    --color-background-raised: #ffffff;
    --color-background-card: #ffffff;
    --color-background-elevated: #ffffff;
    --color-background-panel: #ffffff;
    --color-text-primary: #000000;
    --color-text-secondary: #1f1f1f;
    --color-text-tertiary: #404040;
    --color-brand-action: #000000;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
  }
}

/* scroll-padding for anchor links under sticky nav */
html { scroll-padding-top: 5rem; }

/* min-touch-fix: WCAG 2.5.8 Basis-Mindestgroesse 24x24px fuer freistehende Freitext-Links
   in main (z.B. Jellyfish.media-Erwaehnungen in Absaetzen/FAQ-Antworten), unabhaengig vom
   Pointer-Typ. min-height wirkt bei display:inline nicht, daher inline-flex noetig. Bereits
   klassifizierte Links (nav/footer/.jl/.link-arrow/Card-Links) haben eigene, spezifischere
   Regeln und sind von dieser Basis-Regel unberuehrt. */
main a,#cookieConsent a{min-height:24px;display:inline-flex;align-items:center}
@media(pointer:coarse){main a{min-height:44px;padding-top:6px;padding-bottom:6px}}

/* mobile CTA standard: full-width stacked buttons at 560px and below */
@media(max-width:560px){.g5{width:100%;justify-content:center;text-align:center;white-space:normal;padding-left:1rem;padding-right:1rem}}

/* nav dropdown rules */
@media(hover:hover){.nav-dropdown:hover .nav-dropdown-menu{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}}
@media(hover:hover){.nav-subdrop:hover>.nav-subdrop-menu{visibility:visible;opacity:1;pointer-events:auto}}
/* Welle-2-UI-Fix 2026-07-22 (Handover 15, Punkt 4): Desktop-Hover-Öffnung für Seiten mit veraltetem inline Nav-Block (display:none-Modell). Muss über 1040px gescoped bleiben, sonst Kollision mit der mobilen Hover-Unterdrückung weiter unten. */
@media (min-width:1041px) and (hover:hover){.nav-dropdown:hover>.nav-dropdown-menu{display:block}}
/* A11Y: keyboard focus-within support for nav dropdowns (funktioniert nur ohne display:none, siehe components.css) */
.nav-dropdown:focus-within > .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* mobile CTA: hidden on desktop, shown on mobile between logo and burger */
.nav-mobile-cta{display:none}
/* M10 CSS-Sanierung 2026-07-03: Breakpoint von 768px auf 1040px synchronisiert.
   Seit der Burger-Anhebung auf 1040px (components.css) griffen diese Nav-Regeln
   im Band 769 bis 1040px nicht mehr (nav-mobile-cta-Pill, 44px-Burger-Touch-Target,
   Mobile-Menue-Overflow-Scroll blieben dort inaktiv). Nur Nav-Regeln verschoben,
   keine seitenlayout-bezogenen 768er-Regeln betroffen (es gab keine in diesem Block). */
@media(max-width:1040px){
.nav-links{max-height:calc(100vh - var(--o));overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-links>a{width:100%;display:flex;align-items:center}
.nav-burger{min-width:44px;min-height:44px;padding:7px 4px}
.nav-dropdown.open .nav-dropdown-menu{visibility:visible;opacity:1;pointer-events:auto;display:block}
.nav-subdrop.open>.nav-subdrop-menu{display:block!important}
.nav-subdrop-menu{display:none!important;position:static;box-shadow:none;border:none;padding:.2rem 0 .2rem 1rem;min-width:0}
.nav-mobile-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--ab);color:var(--e);padding:.3rem .75rem;border-radius:6px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-height:44px;white-space:nowrap;text-decoration:none;margin-right:.5rem;flex-shrink:0}
}
/* Hover-Reveal fuer Dropdown/Subdrop/mobile-CTA nur auf Geraeten mit echtem Hover (Maus/Trackpad),
   kombiniert mit der 1040px-Bedingung, da diese Regeln nur im mobilen/kompakten Layout greifen sollen. */
@media(max-width:1040px) and (hover:hover){.nav-dropdown:hover .nav-dropdown-menu{display:none}.nav-subdrop:hover>.nav-subdrop-menu{display:none}}

/* === HERO === */
.el{padding:10rem 0 4rem;text-align:center;position:relative;overflow:hidden}
.el p{margin:.8rem auto 0;font-size:clamp(.95rem,1.8vw,1.1rem);color:var(--y);line-height:1.75;max-width:560px}
.en{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.er{margin-top:1.5rem;font-size:.82rem;color:var(--aa);letter-spacing:.02em}
.er span{margin:0 .4rem}
@media(max-width:768px){.el{padding:8rem 0 3rem}}

/* .gq inside hero: enforce overline size over .el p rule */
.el .gq{font-size:.75rem;line-height:1.4;margin:.8rem auto .5rem;text-align:center}

/* hero icon centering + sizing */
.ep{text-align:center}
.ep object.eq,.ep img.eq,.ep svg.eq{display:block;margin:0 auto;width:clamp(120px,20vw,180px);height:auto}
object.eq,img.eq,svg.eq{display:block;margin:0 auto;width:clamp(120px,20vw,180px);height:auto}

/* === TYPOGRAFIE === */
h1,h2,h3{text-wrap:balance}
/* QS 2026-07-29: Zwischenueberschriften sitewide einheitlich zentriert (aus components.css hierher verschoben, damit auch die Nur-jervis.css-Seiten wie ressourcen/* und so-funktionierts konsistent sind). Fliesstext (p) bleibt links. */
h2,.gq{text-align:center}
/* Ausnahme: Ueberschrift in der schmalen linken Spalte einer .dh-Zweispalten-Sektion bleibt links. */
.dh h2,.dh .gq{text-align:left}
.nowrap{white-space:nowrap}

/* === U1: FAQ touch target === */
.faq-q{min-height:44px;display:flex;align-items:center;justify-content:space-between}

/* === A11Y: :active press feedback === */
.g5:active { transform: scale(0.97); }
.k1:active, .k3:active { transform: scale(0.985); }
.faq-q:active { background: rgba(255,255,255,0.03); }

/* === U1: kontakt card padding mobile === */
@media(max-width:560px){.s4{padding:1.5rem}}

/* === U1: scroll-hint (gradient entfernt, verursachte Zombie-Schattenstreifen) === */
.scroll-hint{position:relative}

/* === A11Y: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .fade { opacity: 1 !important; }
  .u6, .u7, .u8, .u9 { transition-delay: 0s !important; }
}