/* ─── NEXLANE — IBM CARBON BASIS ──────────────────────────────────
   Gemeinsame Carbon-Grundlage (Carbon v11, Theme "Gray 100") für die
   Seiten, die auf das IBM Design System umgestellt sind: Tokens,
   Typografie, Buttons, UI-Shell-Header, Mobile-Panel, Cookie-Banner.

   Eingebunden von: /Media/index.html, /Team/index.html
   Reihenfolge:     styles.css → theme.css → responsive.css →
                    mobile-nav.css → [seiteneigene Extras] →
                    ../carbon.css → css/carbon.css
   Home, Academy und die Legal-Seiten laden diese Datei nicht und
   behalten ihr bisheriges Aussehen.

   Markenfarbe: an Carbons $interactive-Stelle (Blue 60) steht das
   Nexlane-Violett. Struktur, Typo und Raster sind Carbon, die Farbe
   bleibt Nexlane.
─────────────────────────────────────────────────────────────────── */

/* ═══ 1 · TOKENS ═════════════════════════════════════════════════ */
:root {
  /* Carbon Gray 100 — Flächen */
  --cds-background:        #161616;
  --cds-background-hover:  #353535;
  --cds-layer-01:          #262626;
  --cds-layer-02:          #393939;
  --cds-layer-hover:       #333333;
  --cds-field:             #262626;
  --cds-field-hover:       #333333;

  /* Carbon Gray 100 — Linien */
  --cds-border-subtle:     #393939;
  --cds-border-strong:     #6f6f6f;

  /* Carbon Gray 100 — Text */
  --cds-text-primary:      #f4f4f4;
  --cds-text-secondary:    #c6c6c6;
  --cds-text-helper:       #8d8d8d;
  --cds-text-on-color:     #ffffff;

  /* Interaktion — Carbon-Rolle, Nexlane-Farbe */
  --cds-interactive:        #7b2fff;
  --cds-interactive-hover:  #6a24e6;
  --cds-interactive-active: #5a1fcc;
  --cds-accent-text:        #b48bff;
  --cds-focus:              #ffffff;
  --cds-support-error:      #fa4d56;
  --cds-support-success:    #42be65;

  /* Carbon Tag-Farben (dunkles Theme) */
  --cds-tag-purple-bg:  #6929c4;  --cds-tag-purple-text: #e8daff;
  --cds-tag-blue-bg:    #0043ce;  --cds-tag-blue-text:   #d0e2ff;
  --cds-tag-green-bg:   #044317;  --cds-tag-green-text:  #a7f0ba;

  /* Carbon Spacing Scale (spacing-01 … spacing-13) */
  --sp-01: 2px;  --sp-02: 4px;  --sp-03: 8px;  --sp-04: 12px;
  --sp-05: 16px; --sp-06: 24px; --sp-07: 32px; --sp-08: 40px;
  --sp-09: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;
  --sp-13: 160px;

  /* Carbon Motion */
  --cds-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);

  /* Bestehende Seiten-Tokens auf Carbon umgelegt, damit der ältere
     Code (styles.css, mobile-nav.css, …) automatisch mitzieht */
  --black:  var(--cds-background);
  --deep:   var(--cds-layer-01);
  --card:   var(--cds-layer-01);
  --text:   var(--cds-text-secondary);
  --muted:  var(--cds-text-helper);
  --white:  var(--cds-text-primary);
  --blue:   var(--cds-interactive);
  --blue2:  var(--cds-accent-text);
  --violet: var(--cds-interactive);
  --v2:     var(--cds-accent-text);
  --border: var(--cds-border-subtle);
  --radius: 0;
}

/* ═══ 2 · TYPOGRAFIE & BASIS ═════════════════════════════════════ */
body,
.btn,
.sm-trigger,
.sm-panel-item,
.filter-btn,
.form-group input,
.form-group textarea,
.form-group select {
  font-family: 'IBM Plex Sans', 'Inter', -apple-system, system-ui, sans-serif;
}

body {
  background: var(--cds-background);
  color: var(--cds-text-secondary);
  font-size: 16px;
  line-height: 1.5;           /* Carbon body-02 */
  letter-spacing: 0;
}

/* Carbon setzt Überschriften light/regular statt fett — das ist der
   deutlichste Unterschied zum bisherigen Auftritt. */
h1, h2, h3, h4, h5 { letter-spacing: 0; }

p, li { font-weight: 400; }

::selection { background: var(--cds-interactive); color: #fff; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cds-background); }
::-webkit-scrollbar-thumb { background: var(--cds-border-strong); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #8d8d8d; }

/* Carbon-Fokus: 2px, innenliegend, ohne Rundung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  border-radius: 0;
}

/* ═══ 3 · BUTTONS ════════════════════════════════════════════════
   48px hoch, rechteckig, Label linksbündig, Icon rechts fixiert. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 12px 60px 12px var(--sp-05);
  gap: var(--sp-07);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.16px;
  transition: background .11s var(--cds-ease-productive),
              color .11s var(--cds-ease-productive),
              border-color .11s var(--cds-ease-productive);
}

.btn:hover { transform: none; }

.btn svg {
  position: absolute;
  right: var(--sp-05);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .11s var(--cds-ease-productive);
}

.btn:hover svg { transform: translateY(-50%) translateX(2px); }

.btn-primary {
  background: var(--cds-interactive);
  color: var(--cds-text-on-color);
  border-color: var(--cds-interactive);
}
.btn-primary:hover {
  background: var(--cds-interactive-hover);
  border-color: var(--cds-interactive-hover);
  color: var(--cds-text-on-color);
  transform: none;
}
.btn-primary:active { background: var(--cds-interactive-active); }

/* Carbon Tertiary */
.btn-ghost {
  background: transparent;
  color: var(--cds-text-primary);
  border: 1px solid var(--cds-text-primary);
}
.btn-ghost:hover {
  background: var(--cds-text-primary);
  border-color: var(--cds-text-primary);
  color: var(--cds-background);
}

.btn:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px var(--cds-background);
}

/* ═══ 4 · HEADER (Carbon UI Shell) ═══════════════════════════════ */
nav {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  height: 48px;
  padding: 0;
  background: var(--cds-background);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-bottom: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  box-shadow: none;
}

nav.is-scrolled { border-bottom-color: var(--cds-border-strong); }

.nav-inner {
  height: 100%;
  gap: 0;
  padding: 0 0 0 var(--sp-05);
  max-width: 1584px;
  margin: 0 auto;
}

.logo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  gap: var(--sp-03);
  color: var(--cds-text-primary);
  padding-right: var(--sp-06);
}

.logo > div:last-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}

.logo-mark img { height: 22px !important; }

.logo-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--cds-text-secondary);
  letter-spacing: 0.1px;
  margin-top: 0;
}

/* Header-Menü: volle Bar-Höhe, Hover als Fläche (Carbon Shell) */
.nav-links { height: 100%; gap: 0; }

.nav-links a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--sp-05);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  color: var(--cds-text-secondary);
  border-bottom: 2px solid transparent;
  transition: background .11s var(--cds-ease-productive), color .11s;
}

.nav-links a:hover {
  background: var(--cds-background-hover);
  color: var(--cds-text-primary);
  border-bottom-color: var(--cds-interactive);
}

/* aktuelle Seite — Carbon markiert sie mit der Akzentkante */
.nav-links a.active {
  color: var(--cds-text-primary);
  border-bottom-color: var(--cds-interactive);
}

.nav-inner .btn {
  margin-left: auto;
  height: 48px;
  min-height: 48px;
  padding: 0 48px 0 var(--sp-05);
  font-size: 14px;
}

/* Hamburger als 48×48-Shell-Action */
.sm-trigger {
  height: 48px;
  min-height: 48px;
  width: auto;
  padding: 0 var(--sp-05);
  gap: var(--sp-03);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--cds-text-primary);
  transition: background .11s var(--cds-ease-productive);
}
.sm-trigger:hover { background: var(--cds-background-hover); }
.sm-trigger:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; border-radius: 0; }
.sm-icon-h, .sm-icon-v { border-radius: 0; height: 1.5px; }

@media (max-width: 768px) {
  nav {
    top: 0;
    width: 100%;
    padding: 0;
    border-radius: 0;
  }
  .nav-inner { padding-left: var(--sp-05); }
}

body.sm-open nav {
  background: var(--cds-background);
  border-color: var(--cds-border-subtle);
}

/* ═══ 5 · MOBILE PANEL ═══════════════════════════════════════════ */
.sm-panel {
  background: var(--cds-background);
  padding-top: max(96px, calc(env(safe-area-inset-top, 0px) + 88px));
}

.sm-panel-item {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  font-size: clamp(2rem, 8vw, 2.75rem);
  color: var(--cds-text-primary);
  border-bottom: 1px solid var(--cds-border-subtle);
  padding: 0.35em 1.4em 0.35em 0;
}
.sm-panel-item:hover,
.sm-panel-item:focus-visible { color: var(--cds-accent-text); }

.sm-panel-list[data-numbering] .sm-panel-item::after {
  font-family: 'IBM Plex Mono', monospace;
  top: 0.5em;
  color: var(--cds-text-helper);
}

.sm-socials { border-top-color: var(--cds-border-subtle); }
.sm-socials-title {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
}
.sm-socials-link {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: var(--cds-layer-01);
  border-color: var(--cds-border-subtle);
  color: var(--cds-text-secondary);
}
.sm-socials-link:hover,
.sm-socials-link:focus-visible {
  background: var(--cds-layer-02);
  border-color: var(--cds-border-strong);
  color: var(--cds-text-primary);
}

/* ═══ 6 · EYEBROW ════════════════════════════════════════════════ */
.tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
}

/* ═══ 7 · COOKIE-BANNER ══════════════════════════════════════════
   cookie-consent.js ist seitenübergreifend und schreibt seine Styles
   zur Laufzeit in den <head> — also nach dieser Datei. Nur deshalb
   stehen hier !important-Regeln; das Skript selbst bleibt unangetastet,
   damit Home, Academy und Legal ihr bisheriges Banner behalten. */
#nx-consent {
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: var(--cds-layer-01) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-top: 1px solid var(--cds-border-subtle) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--sp-06) var(--sp-07) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
#nx-consent .nx-title { font-size: 16px !important; font-weight: 600 !important; color: var(--cds-text-primary) !important; }
#nx-consent p { font-size: 14px !important; line-height: 1.43 !important; color: var(--cds-text-secondary) !important; }
#nx-consent p a { color: var(--cds-accent-text) !important; }
.nx-accept {
  min-height: 48px !important;
  padding: 0 var(--sp-06) !important;
  border-radius: 0 !important;
  background: var(--cds-interactive) !important;
  box-shadow: none !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.nx-accept:hover { transform: none !important; background: var(--cds-interactive-hover) !important; box-shadow: none !important; }
.nx-decline {
  min-height: 32px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--cds-text-secondary) !important;
  text-decoration: underline !important;
}
.nx-decline:hover { color: var(--cds-text-primary) !important; }

/* ═══ 8 · THEME-TOGGLE ═══════════════════════════════════════════ */
.theme-toggle-btn:hover { color: var(--cds-text-primary); }

/* ═══ 9 · LIGHT THEME (Carbon Gray 10) ═══════════════════════════
   Nur aktiv, wenn ui.lightMode in config.js eingeschaltet wird. */
html.light {
  --cds-background:        #f4f4f4;
  --cds-background-hover:  #e8e8e8;
  --cds-layer-01:          #ffffff;
  --cds-layer-02:          #f4f4f4;
  --cds-field:             #ffffff;
  --cds-field-hover:       #e8e8e8;
  --cds-border-subtle:     #e0e0e0;
  --cds-border-strong:     #8d8d8d;
  --cds-text-primary:      #161616;
  --cds-text-secondary:    #525252;
  --cds-text-helper:       #6f6f6f;
  --cds-focus:             #0f62fe;
  --cds-accent-text:       #5a1fcc;
}

html.light body { background: var(--cds-background); color: var(--cds-text-secondary); }
html.light nav { background: var(--cds-background) !important; border-color: var(--cds-border-subtle) !important; box-shadow: none !important; }
html.light .btn-primary { background: var(--cds-interactive) !important; color: #fff !important; }
html.light .btn-ghost { border-color: var(--cds-text-primary) !important; color: var(--cds-text-primary) !important; }
html.light .btn-ghost:hover { background: var(--cds-text-primary) !important; color: var(--cds-background) !important; }
html.light footer { background: var(--cds-background) !important; border-top-color: var(--cds-border-subtle) !important; }