/* xander Design System — design tokens.
   Verified against the live site's own extracted Elementor CSS
   (see references/DESIGN-SYSTEM-extracted.md / styles.css from the client).
   Authoritative accent: #97BF0D. Font: Montserrat (lokal gehostet). */

/* ---- Montserrat — lokal gehostet, keine externe Verbindung ---- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: dark surfaces ---- */
  --xan-bg-deepest:  #09131D;  /* darkest tone available — NOT used as body bg (see decision below) */
  --xan-navy-900:    #0A192F;  /* body background AND section gradient endpoint A */
  --xan-navy-800:    #0F1F3B;  /* cards, panels, diagram boxes */
  --xan-navy-accent: #193652;  /* section gradient endpoint B / hover surface */
  --xan-navy-footer: #0E2449;  /* footer background */

  /* ---- Color: accent (verified — NOT #A5D60F) ---- */
  --xan-lime:        #97BF0D; /* PRIMARY accent — CTAs, links, active states, icons */
  --xan-lime-bright: #CCFF1C; /* bright highlight variant, used sparingly */
  --xan-con:         #E0654B; /* "con"/Nachteil-Akzent (Design-System §5), einzige Nicht-Marken-Farbe */

  /* ---- Color: neutrals / text ---- */
  --xan-white:       #FFFFFF;
  --xan-text-muted:  #8892B0; /* body copy on dark (verified: gray-600) */
  --xan-text-dim:    #536076; /* captions / lower emphasis (verified: gray-800) */

  --xan-border:        rgba(233, 233, 238, 0.16); /* verified border-light */
  --xan-border-hover:  var(--xan-lime);

  --xan-overlay:          rgba(17, 34, 64, 0.7);
  --xan-overlay-dark:     rgba(10, 25, 47, 0.53);
  --xan-overlay-hero-top: rgba(25, 54, 82, 0.59); /* hero video overlay, top edge */

  --xan-on-lime: #0E1620;   /* text/icons on a lime surface */

  /* ---- Section background gradients (verified — NOT a radial gradient) ----
     Sections alternate a linear vertical gradient between navy-900 and
     navy-accent so each section's edge blends into its neighbor's. */
  --xan-gradient-hero-overlay: linear-gradient(180deg, var(--xan-overlay-hero-top) 0%, var(--xan-navy-900) 98%);
  --xan-gradient-section-down: linear-gradient(180deg, var(--xan-navy-900) 0%, var(--xan-navy-accent) 100%);
  --xan-gradient-section-up:   linear-gradient(180deg, var(--xan-navy-accent) 0%, var(--xan-navy-900) 100%);

  /* ---- Type (verified: Montserrat, not a guessed fallback font) ---- */
  --xan-font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Desktop scale (verified from live computed styles) */
  --xan-hero:    65px;  /* hero H1 (Startseite) */
  --xan-h1-sub:  48px;  /* Seitentitel H1 auf Unterseiten (kleiner als Startseite) */
  --xan-h2:      36px;  /* section H2 */
  --xan-h3:      20px;  /* card/item H3 */
  --xan-h3-sub:  30px;  /* larger H3 e.g. CTA heading */
  --xan-body-lg: 18px;
  --xan-body:    16px;
  --xan-body-sm: 14px;
  --xan-caption: 13px;

  /* ---- Layout (verified) ----
     Section BACKGROUNDS are full-bleed (100vw). Inner CONTENT sits centered
     in this container — 1400px is already very wide, not a cramped blog column. */
  --xan-container-max:     1400px;
  --xan-container-content: 1200px; /* text-focused sections */
  --xan-container-narrow:  800px;  /* single long-form column, e.g. FAQ answer */
  --xan-pad-inline:        40px;   /* container side padding, desktop+tablet */
  --xan-header-height:     80px;

  /* ---- Radius (verified) ---- */
  --xan-radius-sm:   5px;
  --xan-radius-md:   8px;   /* small tiles/badges */
  --xan-radius-card: 12px;  /* cards */
  --xan-radius-xl:   20px;
  --xan-radius-pill: 999px; /* buttons */

  /* ---- Shadows (verified) ---- */
  --xan-shadow-sm:   0 0 6px rgba(0, 0, 0, 0.2);
  --xan-shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);

  /* ---- Motion (verified) ---- */
  --xan-ease: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Tablet override (verified breakpoint: ≤1024px) */
@media (max-width: 1024px) {
  :root {
    --xan-hero: 42px;
    --xan-h1-sub: 38px;
    --xan-h2: 32px;
    --xan-h3: 24px;
    --xan-h3-sub: 26px;
    --xan-container-max: 1024px;
  }
}

/* Mobile override (verified breakpoint: ≤767px) */
@media (max-width: 767px) {
  :root {
    --xan-hero: 28px;
    --xan-h1-sub: 28px;
    --xan-h2: 24px;
    --xan-h3: 22px;
    --xan-h3-sub: 22px;
    --xan-body-lg: 16px;
    --xan-container-max: 767px;
    --xan-pad-inline: 20px;
  }
}

/* Section shell — background spans full width; content centers in the container */
.xan-section {
  width: 100%;
}
.xan-section-inner {
  max-width: var(--xan-container-max);
  margin-inline: auto;
  padding-inline: var(--xan-pad-inline);
  padding-block: 88px;
}
.xan-section--down { background: var(--xan-gradient-section-down); }
.xan-section--up   { background: var(--xan-gradient-section-up); }

/* Signature card hover: lift + lime border */
.xan-card {
  background: var(--xan-navy-800);
  border: 1px solid var(--xan-border);
  border-radius: var(--xan-radius-card);
  transition: transform var(--xan-ease), border-color var(--xan-ease);
}
.xan-card:hover {
  transform: translateY(-6px);
  border-color: var(--xan-border-hover);
}

/* Accent rule under section titles — fades out, never a solid bar */
.xan-rule {
  display: block; width: 88px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--xan-lime), transparent);
}

/* Buttons (verified, incl. real hover-invert behavior) */
.xan-btn {
  font-family: var(--xan-font);
  font-size: var(--xan-body-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: var(--xan-radius-pill);
  padding: 16px 24px;
  border: 2px solid transparent;
  transition: var(--xan-ease);
  cursor: pointer;
}
@media (max-width: 767px) { .xan-btn { padding: 13px 20px; } }

.xan-btn-primary {
  background-color: var(--xan-lime);
  color: var(--xan-white);
  border-color: var(--xan-lime);
}
.xan-btn-primary:hover {
  background-color: var(--xan-navy-accent);
  color: var(--xan-lime);
  border-color: var(--xan-lime);
}

.xan-btn-outline {
  background-color: transparent;
  color: var(--xan-lime);
  border-color: var(--xan-lime);
}
.xan-btn-outline:hover {
  background-color: var(--xan-lime);
  color: var(--xan-white);
}

/* Icon defaults — outline, 2px, round, lime */
.xan-icon {
  width: 28px; height: 28px; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--xan-lime);
}