/*! @xware/design-system v0.4.0 - generiert von build.js, nicht editieren. */
/* === tokens.css === */
/* =====================================================================
   @xware/design-system - Marken-Kern (Schicht 1)
   ---------------------------------------------------------------------
   Herausgelöst aus xander-website/assets/tokens.css (Z. 1-133), der
   Fassung, die xander.ch ausliefert. Enthält AUSSCHLIESSLICH Tokens und
   die lokal gehostete Schrift - keine Komponenten-Klassen. Die
   Marketing-/Web-Primitive liegen in components/web-*.css, die
   App-Bausteine in components/app-*.css.

   Grundlage: K2M decisions/003 (der herausgelöste Kern ist Master; die
   Apps lesen ihn und schreiben nie zurück) und der dortige Eintrag
   "Design-System-Anbindung" in OFFENE-PUNKTE.md, der die Trennung von
   Tokens und Komponenten als Voraussetzung nennt.

   Akzent: #95C11F - der Wert des Logo-Originals. Der früher hier
   geführte Ton #97BF0D stammte aus dem extrahierten Live-CSS und wich
   vom Logo ab; das Logo ist normativ.
   ===================================================================== */

/* ---- 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:        #95C11F; /* PRIMARY accent - CTAs, links, active states, icons */
  /* von build.js aus --xan-lime abgeleitet, nicht von Hand ändern.
     Als Tripel nutzbar: rgb(var(--xan-lime-rgb) / .45) */
  --xan-lime-rgb:    149 193 31;
  --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 */

  /* ---- Color: helle Lesefläche ("paper") ----
     ERWEITERUNG gegenüber xander-website/assets/tokens.css: Die Website ist
     durchgehend dunkel und kennt diese Rollen nicht. Sie entstehen mit der
     hellen Lesefläche des Blogs (dunkler Kopf, helles Papier) und sind
     zugleich die eine Quelle für den App-Layer, der bis dahin eigene helle
     Werte führte. Beim Abgleich mit der Website ist dieser Block als
     Erweiterung zu behandeln, nicht als Abweichung.

     Gilt für Lesestrecken (Blog, Beiträge, Protokolle) und die helle
     Inhaltswelt der Apps. Header und Footer bleiben dunkel.

     Kontrast ist Teil der Definition: Jeder Textton erreicht auf ALLEN drei
     Flächen mindestens 4,5:1. Schlechtester Fall je Token (gegen paper-3,
     gemessen): Überschrift 14,94:1, Fliesstext 6,58:1, Meta 4,58:1,
     Lime-Text 4,85:1, Con-Text 5,45:1. Wer einen Wert ändert, rechnet neu. */
  --xan-paper:          #FFFFFF;  /* helle Grundfläche */
  --xan-paper-2:        #F1F4F7;  /* abgesetzte Fläche, Panel */
  --xan-paper-3:        #E8EDF2;  /* zweite Abstufung, Tabellenkopf, Einschub */
  --xan-on-paper:       var(--xan-navy-900); /* Überschriften, kein neuer Farbwert */
  --xan-on-paper-muted: #46536B;  /* Fliesstext auf hell */
  --xan-on-paper-dim:   #5E6B80;  /* Meta, Datum, Bildlegende */
  --xan-border-paper:   #D8E0E8;  /* Haarlinie auf hell (dekorativ, keine 3:1-Pflicht) */
  --xan-lime-paper:     #566F07;  /* Lime als Text auf hell - NICHT --xan-lime (2,12:1) */
  --xan-con-paper:      #A8391F;  /* Con/Nachteil als Text auf hell */

  /* ---- 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;
  }
}

/* === components/base.css === */
/* base.css - schichtneutraler Reset.
 *
 * Bewusst minimal: keine Typo-Defaults und keine Farben, weil beides aus
 * dem Marken-Kern (--xan-*) bzw. dem App-Layer (--app-*) kommt und sich
 * sonst gegenseitig überschreibt. Was hier steht, gilt unabhängig von
 * der gewählten Schicht.
 *
 * Die Schrift wird NICHT mehr von Google geladen. Der früher hier
 * stehende @import auf fonts.googleapis.com baute bei jedem Seitenaufruf
 * eine Verbindung zu einem Drittanbieter auf - Website und K2M hosten
 * Montserrat ausdrücklich lokal ("keine externe Verbindung"). Die
 * @font-face-Deklarationen stehen jetzt im Marken-Kern (tokens.css),
 * die Dateien liegen in fonts/.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* A11y: Bewegung reduzieren, wenn der Nutzer das auf OS-Ebene wünscht.
   Greift global, auch für die Transitions in Buttons, Karten und Feldern. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* === components/web-sections.css === */
/* web-sections.css - Section-Hülle und Akzent-Linie (Marketing/Web).
   Vollbreite Fläche, Inhalt zentriert im Container. Die Verläufe
   alternieren, damit die Kante einer Section in die nächste läuft.
   Quelle: xander-website/assets/tokens.css (Web-Layer ab Z. 134). */

/* 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); }

/* 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);
}

/* === components/web-cards.css === */
/* web-cards.css - Signature-Karte mit Hover-Lift und Lime-Rand.
   Marketing-Flächen. App-Karten liegen in app-surfaces.css.
   Quelle: xander-website/assets/tokens.css (Web-Layer ab Z. 134). */

/* 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);
}

/* === components/web-buttons.css === */
/* web-buttons.css - Marken-Buttons (Pill, Versalien, Hover-Invert).
   Primary invertiert im Hover auf Navy mit Lime-Schrift.
   Quelle: xander-website/assets/tokens.css (Web-Layer ab Z. 134). */

/* 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);
}

/* === components/web-icons.css === */
/* web-icons.css - Icon-Primitive der Marke.
   Quelle: xander-website/assets/tokens.css (Web-Layer ab Z. 134).

   Die SVG-Quellen in ../icons/ tragen bewusst KEINE Grösse und KEINE
   Farbe (Stil-Vertrag: viewBox 24x24, fill none, stroke currentColor,
   stroke-width 2, runde Caps/Joins) - beides setzt diese Klasse.
   Semantische Suche über ../icons/icons.json.

   Die App-Seite hat ihre eigene, kompaktere Icon-Klasse (.app-icon,
   20px) in app-icons.css; sie ist kein Duplikat, sondern der andere
   Massstab für dichte Oberflächen.
*/

/* 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);
}

/* Additive Grössen für Properties, die nicht die 28px der Website wollen.
   Bewusst feste Werte statt eigener Tokens, damit der Marken-Kern Token
   für Token deckungsgleich mit der Quelle bleibt. */
.xan-icon-sm { width: 20px; height: 20px; }
.xan-icon-lg { width: 36px; height: 36px; }
.xan-icon-em { width: 1em;  height: 1em; }

/* Erbt die Textfarbe statt Lime - für Icons in Fliesstext oder auf
   Flächen, auf denen Lime den Kontrast nicht trägt. */
.xan-icon-inherit { color: inherit; }

/* Icon + Text in einer Zeile mit konsistentem Abstand. */
.xan-icon-label { display: inline-flex; align-items: center; gap: 0.5em; }

/* === components/web-paper.css === */
/* web-paper.css - helle Lesefläche ("paper") für Lesestrecken.
   Quelle: erweitert den Marken-Kern; xander.ch ist sonst durchgehend dunkel.

   Konzept: dunkler Kopf, helles Papier. Gilt für Blog, Beiträge und
   Protokolle - Header und Footer bleiben dunkel. Ein Konsument setzt die
   Klasse auf den Lesebereich und muss keine Farbe einzeln zuweisen.

   Alle Werte kommen aus Tokens; jeder Textton erreicht auf allen drei
   Papierflächen mindestens 4,5:1 (siehe Kommentar in tokens.css).
*/

.xan-paper {
  background: var(--xan-paper);
  color: var(--xan-on-paper-muted);
  font-family: var(--xan-font);
  font-size: var(--xan-body);
  line-height: 1.7;
}

.xan-paper h1,
.xan-paper h2,
.xan-paper h3,
.xan-paper h4 {
  color: var(--xan-on-paper);
  line-height: 1.25;
}

.xan-paper h1 { font-size: var(--xan-h2); }
.xan-paper h2 { font-size: var(--xan-h3-sub); }
.xan-paper h3 { font-size: var(--xan-h3); }

.xan-paper a {
  color: var(--xan-lime-paper);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.xan-paper a:hover { text-decoration-thickness: 2px; }

/* Meta-Zeile: Datum, Autor, Bildlegende. */
.xan-paper-meta {
  color: var(--xan-on-paper-dim);
  font-size: var(--xan-body-sm);
}

/* Abgesetzte Fläche im Lesefluss: Einschub, Hinweis, Zitatkasten. */
.xan-paper-panel {
  background: var(--xan-paper-2);
  border: 1px solid var(--xan-border-paper);
  border-radius: var(--xan-radius-card);
  padding: 18px 20px;
}

/* Zweite Abstufung, z.B. Tabellenkopf innerhalb der Lesefläche. */
.xan-paper-panel-strong { background: var(--xan-paper-3); }

/* Haarlinie auf hell - bewusst zurückhaltend, reine Trennung ohne
   Bedeutung, daher ohne 3:1-Anforderung. */
.xan-paper-rule {
  border: 0;
  border-top: 1px solid var(--xan-border-paper);
  margin-block: 1.5rem;
}

/* Negativ-Akzent im Lesetext (Nachteil, Problem). */
.xan-paper-con { color: var(--xan-con-paper); }