/* NWS design tokens (light default, [data-theme='dark']) – used by the new components only
   (navigation, service bar, 3D stage, hero). All names carry the prefix --nws- so they never
   collide with the template's variables. */
:root {
  --nws-c-primary: #4a81d3;
  --nws-c-primary-rgb: 74, 129, 211;
  --nws-c-secondary: #514a9d;
  --nws-c-navy: #0b113e;
  --nws-c-deep: #0a0b20;
  --nws-c-dark: #12132c;
  --nws-c-dark-2: #191b36;
  --nws-c-dark-3: #222e66;
  --nws-c-focus: #4a81d3;
  --nws-c-success: #1a8f4c;
  --nws-c-danger: #c4001a;
  --nws-c-white: #ffffff;
  --nws-logo-white: #ffffff;
  --nws-logo-black: #000000;
  --nws-logo-blue: #5f8df1;
  --nws-logo-navy: #0b113e;
  --nws-grad-brand: linear-gradient(45deg, #4a81d3 0%, #514a9d 100%);
  --nws-grad-brand-text: linear-gradient(90deg, #7fa6ea 0%, #a69cf2 100%);
  --nws-grad-button: linear-gradient(45deg, #3f74c6 0%, #514a9d 100%);
  --nws-grad-dark: linear-gradient(160deg, #222e66 0%, #191b36 45%, #12132c 100%);
  --nws-c-bg: #ffffff;
  --nws-c-bg-alt: #f3f3f4;
  --nws-c-surface: #ffffff;
  --nws-c-surface-2: #f6f7fb;
  --nws-c-text: #111013;
  --nws-c-text-2: #5f6075;
  --nws-c-text-3: #6b6c80;
  --nws-c-line: #e2e2e8;
  --nws-c-line-soft: rgba(17, 16, 19, 0.08);
  --nws-c-brand: #2f5fae;
  --nws-c-chip: rgba(var(--nws-c-primary-rgb), 0.12);
  --nws-c-warning-text: #8a4b00;
  --nws-c-error-text: #9b0015;
  --nws-c-success-text: #136b39;
  --nws-logo-color: var(--nws-logo-navy);
  --nws-card-bg: #ffffff;
  --nws-header-bg: rgba(255, 255, 255, 0.9);
  --nws-header-fg: #111013;
  --nws-header-fg-2: #4b4c60;
  --nws-header-line: rgba(17, 16, 19, 0.08);
  --nws-flyout-bg: rgba(255, 255, 255, 0.97);
  --nws-footer-bg: #f3f3f4;
  --nws-footer-fg: #111013;
  --nws-footer-fg-2: #5f6075;
  --nws-footer-line: rgba(17, 16, 19, 0.1);
  --nws-font-heading: 'Urbanist Variable', 'Urbanist', Helvetica, Arial, sans-serif;
  --nws-font-body: 'DM Sans Variable', 'DM Sans', Helvetica, Arial, sans-serif;
  --nws-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --nws-radius-xs: 6px;
  --nws-radius-btn: 8px;
  --nws-radius-s: 10px;
  --nws-radius-m: 16px;
  --nws-radius-l: 22px;
  --nws-radius-pill: 999px;
  --nws-nav-h: 72px;
  --nws-localnav-h: 56px;
  --nws-bar-top: var(--nws-nav-h);
  --nws-bar-bottom: calc(var(--nws-localnav-h) + env(safe-area-inset-bottom, 0px));
  --nws-topbar-h: 40px;
  --nws-container: 1240px;
  --nws-container-narrow: 820px;
  --nws-gutter: clamp(20px, 4vw, 40px);
  --nws-section-pad: clamp(80px, 10vw, 140px);
  --nws-section-pad-s: clamp(56px, 7vw, 96px);
  --nws-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nws-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nws-dur-fast: 180ms;
  --nws-dur: 320ms;
  --nws-shadow-s: 0 2px 10px rgba(17, 16, 19, 0.06);
  --nws-shadow-m: 0 18px 50px rgba(18, 19, 44, 0.12);
  --nws-shadow-glow: 0 18px 50px rgba(74, 129, 211, 0.35);
  /* Above the template's sections (up to z-index 1000), below the page preloader (20000) and the
     cookie banner / TableServ button (99996–99999), which must always stay on top. */
  --nws-z-content: 1;
  --nws-z-localnav: 1900;
  --nws-z-header: 2000;
  --nws-z-overlay: 2100;
  --nws-z-dialog: 2200;
  --nws-c-stage-bg: #ffffff;
  --nws-c-stage-fg: #111013;
  --nws-c-stage-fg-2: #5f6075;
  --nws-c-stage-line: rgba(17, 16, 19, 0.12);
  --nws-c-stage-card: rgba(255, 255, 255, 0.86);
  --nws-c-stage-shadow: 0 24px 60px rgba(17, 16, 40, 0.12);
  --nws-c-stage-badge-bg: rgba(255, 159, 10, 0.14);
  --nws-c-stage-badge-line: rgba(178, 94, 0, 0.45);
  --nws-c-stage-badge-fg: #a45600;
}

[data-theme=dark] {
  --nws-c-bg: #12132c;
  --nws-c-bg-alt: #191b36;
  --nws-c-surface: #1a1c3b;
  --nws-c-surface-2: #222548;
  --nws-c-text: #ffffff;
  --nws-c-text-2: rgba(255, 255, 255, 0.76);
  --nws-c-text-3: rgba(255, 255, 255, 0.56);
  --nws-c-line: rgba(255, 255, 255, 0.14);
  --nws-c-line-soft: rgba(255, 255, 255, 0.08);
  --nws-c-brand: #8db0ee;
  --nws-c-chip: rgba(var(--nws-c-primary-rgb), 0.2);
  --nws-c-warning-text: #ffc56e;
  --nws-c-error-text: #ff9aa6;
  --nws-c-success-text: #8fe3b3;
  --nws-logo-color: #5f8df1;
  --nws-card-bg: linear-gradient(150deg, rgba(74, 129, 211, 0.16) 0%, rgba(81, 74, 157, 0.08) 45%, rgba(255, 255, 255, 0.02) 100%);
  --nws-c-stage-bg: #000000;
  --nws-c-stage-fg: #ffffff;
  --nws-c-stage-fg-2: rgba(255, 255, 255, 0.76);
  --nws-c-stage-line: rgba(255, 255, 255, 0.14);
  --nws-c-stage-card: rgba(20, 21, 30, 0.8);
  --nws-c-stage-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --nws-c-stage-badge-bg: rgba(255, 159, 10, 0.16);
  --nws-c-stage-badge-line: rgba(255, 190, 90, 0.5);
  --nws-c-stage-badge-fg: #ffc56e;
  --nws-header-bg: rgba(14, 15, 38, 0.9);
  --nws-header-fg: #ffffff;
  --nws-header-fg-2: rgba(255, 255, 255, 0.76);
  --nws-header-line: rgba(255, 255, 255, 0.12);
  --nws-flyout-bg: rgba(14, 15, 38, 0.97);
  --nws-footer-bg: #0a0b20;
  --nws-footer-fg: #ffffff;
  --nws-footer-fg-2: rgba(255, 255, 255, 0.7);
  --nws-footer-line: rgba(255, 255, 255, 0.12);
}

.nws-section--dark,
.nws-on-dark {
  --nws-c-bg: #12132c;
  --nws-c-bg-alt: #191b36;
  --nws-c-surface: #1a1c3b;
  --nws-c-surface-2: #222548;
  --nws-c-text: #ffffff;
  --nws-c-text-2: rgba(255, 255, 255, 0.76);
  --nws-c-text-3: rgba(255, 255, 255, 0.56);
  --nws-c-line: rgba(255, 255, 255, 0.14);
  --nws-c-line-soft: rgba(255, 255, 255, 0.08);
  --nws-c-brand: #8db0ee;
  --nws-c-chip: rgba(var(--nws-c-primary-rgb), 0.2);
  --nws-c-warning-text: #ffc56e;
  --nws-c-error-text: #ff9aa6;
  --nws-c-success-text: #8fe3b3;
  --nws-logo-color: #5f8df1;
  --nws-card-bg: linear-gradient(150deg, rgba(74, 129, 211, 0.16) 0%, rgba(81, 74, 157, 0.08) 45%, rgba(255, 255, 255, 0.02) 100%);
}

@media (max-width: 1068px) {
  :root {
    --nws-nav-h: 64px;
  }
}
@media (max-width: 1068px) {
  :root {
    --nws-topbar-h: 0px;
  }
}

/* Performance (js/nws/motion.js): looping animations of sections out of view stand still. */
.nws-offscreen,
.nws-offscreen * {
  animation-play-state: paused !important;
}

/* Bilder mit width/height-Attributen (verhindert Layout-Shift) bleiben proportional, wenn CSS nur die Breite setzt; Klassen mit eigener Höhe gewinnen (Spezifität 0) */
:where(img[width][height]) {
  height: auto;
}

/* Lite mode (motion.js): devices that dropped frames while video/3D was on screen (older graphics chips, e.g. Galaxy
   S21), weak devices and data-saver mode. Frosted glass over moving content has to be recomputed by the GPU for every
   frame – it is switched off, the surfaces become a little more opaque instead; the light motes over the home video
   are left out. Everything else looks the same. */
html.nws-lite {
  --nws-header-bg: rgba(255, 255, 255, 0.97);
  --nws-c-stage-card: rgba(255, 255, 255, 0.95);
}
html.nws-lite[data-theme=dark] {
  --nws-header-bg: rgba(14, 15, 38, 0.97);
  --nws-c-stage-card: rgba(20, 21, 30, 0.94);
}
html.nws-lite .nws-header .nws-bar,
html.nws-lite .nws-localnav .nws-ribbon,
html.nws-lite .nws-chapter-card,
html.nws-lite .nw-cookie-button,
html.nws-lite .nw-ts-button {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.nws-lite .nws-hero .nws-hero-motes {
  display: none;
}
/* lite mode, phones/tablets: the halo around the hero text shrinks to one small blur layer (normal: two, hero.css) –
   a reserve for graphics chips that are even weaker than the Galaxy S21 */
@media (max-width: 1068px) {
  html.nws-lite .nws-hero .nws-slide__title,
  html.nws-lite .nws-hero .nws-slide__teaser,
  html.nws-lite .nws-hero .nws-slide__note {
    text-shadow: 0 0 6px var(--nws-c-stage-bg);
  }
}