/* =============================================================================
 * Itelio_DsWeb — Token-Ebene des Design-Systems DS-Web (Docusnap Website)
 * =============================================================================
 *
 * Quelle: Claude-Design-Projekt „DS-Web", Datei _ds_bundle.css.
 * Die Token-Bloecke sind UNVERAENDERT uebernommen (colors / typography /
 * spacing), damit Portal und Website nicht auseinanderlaufen. Werte hier NICHT
 * von Hand pflegen — bei Aenderungen neu aus DS-Web ziehen.
 *
 * Zwei Ebenen, wie in DS-Web festgelegt:
 *   --base-color--*  Primitive (Rohwerte)   -> nicht direkt verwenden
 *   --color--*       Semantische Rollen     -> ausschliesslich diese benutzen
 *
 * DS-Web hat BEWUSST keinen Dark Mode. Dunkle Flaechen sind eigene semantische
 * Rollen (--color--*-dark / *-on-dark), kein zweiter Theme-Modus. Die
 * Akademie-LWCs benutzen ausschliesslich die hellen Rollen.
 *
 * WARUM DAS HIER FUNKTIONIERT (und Klassen nicht):
 * CSS-Custom-Properties werden VERERBT und ueberqueren damit die Shadow-DOM-
 * Grenze einer LWC. Klassenregeln tun das nicht. Deshalb enthaelt diese Datei
 * NUR Tokens und globale Belange (Schrift, Grundtypografie) — die
 * Komponentenklassen stehen im CSS der jeweiligen LWC.
 * Siehe .claude/rules/lwc-design-conventions.md §4.7.
 *
 * Einbindung in einer LWC:
 *   import { loadStyle } from 'lightning/platformResourceLoader';
 *   import DS_WEB from '@salesforce/resourceUrl/Itelio_DsWeb';
 *   connectedCallback() { loadStyle(this, DS_WEB).catch(() => {}); }
 *
 * @author  itelio
 * @date    2026-08
 * ========================================================================== */

/* =============================================================================
 * Schrift — InterVariable
 * =============================================================================
 * Die Datei liegt IM SELBEN ZIP wie dieses Stylesheet, deshalb der relative
 * Pfad. Genau dafuer ist die Static Resource ein ZIP und keine einzelne CSS:
 * ein absoluter /resource/...-Pfad wuerde auf einer Experience-Site ins Leere
 * greifen, weil die Site unter einem eigenen Praefix ausgeliefert wird.
 *
 * Herkunft: identischer Build wie in DS-Web (fonts/InterVariable.woff2) —
 * byteweise gegen dessen Praefix geprueft, 352.240 Bytes, gleiche Signatur.
 * Bei einem Update in DS-Web hier mitziehen.
 *
 * font-display: swap — die Seite rendert sofort mit der Systemschrift und
 * tauscht nach, statt den Text bis zum Laden zu verstecken.
 * ========================================================================== */
@font-face {
  font-family: "InterVariable";
  src: url("./InterVariable.woff2") format("woff2-variations"),
       url("./InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* tokens/colors.css */
:root {
  --base-color--petrol: #0F7683;
  --base-color--petrol-hover: #0B5863;
  --base-color--petrol-active: #094B54;
  --base-color--petrol-dark: #2A9DAB;
  --base-color--petrol-dark-hover: #3BB3C1;
  --base-color--petrol-dark-active: #248A95;
  --base-color--gold: #9F6D06;
  --base-color--gold-hover: #B17907;
  --base-color--gold-active: #815905;
  --base-color--neutral-050: #F6FBFC;
  --base-color--neutral-100: #EDF3F4;
  --base-color--neutral-200: #DFE5E6;
  --base-color--neutral-300: #CFD6D7;
  --base-color--neutral-400: #9BA3A4;
  --base-color--neutral-500: #646F70;
  --base-color--neutral-600: #495556;
  --base-color--neutral-700: #364243;
  --base-color--neutral-800: #1E292B;
  --base-color--neutral-900: #0E1A1C;
  --base-color--neutral-950: #0A1214;
  --base-color--neutral-control: #848D8E;
  --base-color--petrol-tint-subtle: rgba(15,118,131,0.04);
  --base-color--petrol-tint: rgba(15,118,131,0.08);
  --base-color--petrol-tint-strong: rgba(15,118,131,0.15);
  --base-color--petrol-dark-tint: rgba(42,157,171,0.12);
  --base-color--petrol-dark-tint-strong: rgba(42,157,171,0.32);
  --base-color--petrol-glow: rgba(15,118,131,0.35);
  --base-color--petrol-glow-deep: rgba(12,98,109,0.25);
  --base-color--glow-radial-brand:
    radial-gradient(
      circle,
      rgba(15,118,131,0.22) 0%,
      rgba(15,118,131,0.12) 28%,
      rgba(15,118,131,0.05) 50%,
      transparent 72%);
  --base-color--glow-radial-dark:
    radial-gradient(
      circle,
      rgba(42,157,171,0.15) 0%,
      rgba(42,157,171,0.06) 40%,
      transparent 70%);
  --base-color--brand-gradient-radial:
    radial-gradient(
      120% 140% at 78% 0%,
      #1A8A97 0%,
      #0F7683 42%,
      #094B54 100%);
  --base-color--brand-gradient-horizontal:
    linear-gradient(
      100deg,
      #0F7683 0%,
      #0A5560 55%,
      #0F7683 130%);
  --base-color--brand-gradient-vertical:
    linear-gradient(
      180deg,
      #1A8A97 0%,
      #0F7683 48%,
      #0A5560 100%);
  --base-color--dark-gradient-radial:
    radial-gradient(
      120% 150% at 68% 30%,
      #175560 0%,
      #0E3540 38%,
      #0A1418 80%);
  --base-color--dark-gradient-horizontal:
    linear-gradient(
      100deg,
      #0B1D22 0%,
      #124049 50%,
      #0A1216 100%);
  --base-color--dark-gradient-vertical:
    linear-gradient(
      180deg,
      #124653 0%,
      #0D2830 50%,
      #0A1216 100%);
  --base-color--hero-light-radial:
    radial-gradient(
      120% 130% at 88% 8%,
      rgba(15,118,131,0.16) 0%,
      rgba(15,118,131,0.05) 34%,
      #ffffff 68%);
  --base-color--hero-light-radial-left:
    radial-gradient(
      120% 130% at 12% 8%,
      rgba(15,118,131,0.16) 0%,
      rgba(15,118,131,0.05) 34%,
      #ffffff 68%);
  --base-color--hero-light-radial-center:
    radial-gradient(
      140% 120% at 50% 0%,
      rgba(15,118,131,0.14) 0%,
      rgba(15,118,131,0.05) 32%,
      #ffffff 66%);
  --base-color--petrol-deep: #0E3038;
  --base-color--petrol-deep-card: #143E45;
  --base-color--footer: #0a0a0b;
  --base-color--frame-chrome: #EEF5F6;
  --base-color--frame-chrome-dark: #0D2A31;
  --base-color--frame-body-dark: #102F35;
  --base-color--ink-text: #E7EFF0;
  --base-color--ink-text-secondary: #B4C7CA;
  --base-color--ink-text-tertiary: #749095;
  --base-color--chart-petrol-1: #063942;
  --base-color--chart-petrol-2: #0B5863;
  --base-color--chart-petrol-3: #0F7683;
  --base-color--chart-petrol-4: #1D8A97;
  --base-color--chart-petrol-5: #2A9DAB;
  --base-color--chart-navy: #142B5F;
  --base-color--chart-green: #4D9423;
  --base-color--chart-amber: #B17907;
  --base-color--chart-red: #BE123C;
  --base-color--danger: #BE123C;
  --base-color--warning: #D97706;
  --base-color--success: #15803D;
  --base-color--active: #0284C7;
  --base-color--danger-dark: #EF4444;
  --base-color--warning-dark: #F59E0B;
  --base-color--success-dark: #10B981;
  --base-color--active-dark: #0EA5E9;
  --base-color--logo-red: #B10A05;
  --base-color--logo-wordmark: #575656;
  --color--background: #ffffff;
  --color--surface: var(--base-color--neutral-100);
  --color--surface-brand-subtle: var(--base-color--petrol-tint-subtle);
  --color--surface-brand: var(--base-color--petrol-tint);
  --color--surface-frame-chrome: var(--base-color--frame-chrome);
  --color--brand: var(--base-color--petrol);
  --color--brand-hover: var(--base-color--petrol-hover);
  --color--brand-active: var(--base-color--petrol-active);
  --color--brand-glow: var(--base-color--petrol-glow);
  --color--brand-glow-deep: var(--base-color--petrol-glow-deep);
  --color--link: var(--color--brand);
  --color--link-hover: var(--color--brand-hover);
  --color--link-active: var(--color--brand-active);
  --color--link-underline: var(--color--brand);
  --color--focus-ring: var(--color--brand);
  --glow--brand-hero: var(--base-color--glow-radial-brand);
  --glow--brand-dark: var(--base-color--glow-radial-dark);
  --gradient--hero-light: var(--base-color--hero-light-radial);
  --gradient--hero-light-left: var(--base-color--hero-light-radial-left);
  --gradient--hero-light-center: var(--base-color--hero-light-radial-center);
  --color--background-brand: var(--base-color--petrol);
  --gradient--brand-radial: var(--base-color--brand-gradient-radial);
  --gradient--brand-horizontal: var(--base-color--brand-gradient-horizontal);
  --gradient--brand-vertical: var(--base-color--brand-gradient-vertical);
  --color--accent: var(--base-color--gold);
  --color--accent-hover: var(--base-color--gold-hover);
  --color--accent-active: var(--base-color--gold-active);
  --color--text-on-brand: #ffffff;
  --color--text: var(--base-color--neutral-900);
  --color--text-secondary: var(--base-color--neutral-600);
  --color--text-tertiary: var(--base-color--neutral-500);
  --color--text-eyebrow: var(--color--brand);
  --color--border: var(--base-color--neutral-200);
  --color--border-strong: var(--base-color--neutral-300);
  --color--border-control: var(--base-color--neutral-control);
  --color--border-brand: var(--base-color--petrol-tint-strong);
  --color--background-dark: var(--base-color--neutral-950);
  --color--background-dark-petrol: var(--base-color--petrol-deep);
  --gradient--dark-radial: var(--base-color--dark-gradient-radial);
  --gradient--dark-horizontal: var(--base-color--dark-gradient-horizontal);
  --gradient--dark-vertical: var(--base-color--dark-gradient-vertical);
  --color--surface-dark: var(--base-color--neutral-900);
  --color--surface-dark-petrol: var(--base-color--petrol-deep-card);
  --color--surface-brand-on-dark: var(--base-color--petrol-dark-tint);
  --color--surface-frame-chrome-dark: var(--base-color--frame-chrome-dark);
  --color--surface-frame-body-dark: var(--base-color--frame-body-dark);
  --color--background-footer: var(--base-color--footer);
  --color--text-on-dark: var(--base-color--ink-text);
  --color--text-on-dark-secondary: var(--base-color--ink-text-secondary);
  --color--text-on-dark-tertiary: var(--base-color--ink-text-tertiary);
  --color--border-on-dark: var(--base-color--neutral-800);
  --color--brand-on-dark: var(--base-color--petrol-dark);
  --color--brand-on-dark-hover: var(--base-color--petrol-dark-hover);
  --color--brand-on-dark-active: var(--base-color--petrol-dark-active);
  --color--border-brand-on-dark: var(--base-color--petrol-dark-tint-strong);
  --color--danger: var(--base-color--danger);
  --color--warning: var(--base-color--warning);
  --color--success: var(--base-color--success);
  --color--active: var(--base-color--active);
  --color--danger-on-dark: var(--base-color--danger-dark);
  --color--warning-on-dark: var(--base-color--warning-dark);
  --color--success-on-dark: var(--base-color--success-dark);
  --color--active-on-dark: var(--base-color--active-dark);
  --color--chart-sequential-1: var(--base-color--chart-petrol-1);
  --color--chart-sequential-2: var(--base-color--chart-petrol-2);
  --color--chart-sequential-3: var(--base-color--chart-petrol-3);
  --color--chart-sequential-4: var(--base-color--chart-petrol-4);
  --color--chart-sequential-5: var(--base-color--chart-petrol-5);
  --color--chart-categorical-1: var(--base-color--chart-navy);
  --color--chart-categorical-2: var(--base-color--chart-petrol-3);
  --color--chart-categorical-3: var(--base-color--chart-green);
  --color--chart-categorical-4: var(--base-color--chart-amber);
  --color--chart-categorical-5: var(--base-color--chart-red);
}

/* tokens/typography.css */
:root {
  --font--family:
    "InterVariable",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  --font--features:
    "cv02",
    "cv03",
    "cv04",
    "cv11",
    "ss01",
    "ss03",
    "calt";
  --font--features-tabular:
    "tnum",
    "cv02",
    "cv03",
    "cv04",
    "cv11",
    "ss01",
    "ss03",
    "calt";
  --font--display: clamp(2.5rem, 5vw, 3.75rem);
  --font--h1: clamp(2.25rem, 5vw, 3.5rem);
  --font--h2: clamp(1.875rem, 4vw, 2.5rem);
  --font--h3: clamp(1.5rem, 3vw, 2rem);
  --font--h4: clamp(1.25rem, 2vw, 1.5rem);
  --font--h5: clamp(1.125rem, 1.5vw, 1.25rem);
  --font--h6: clamp(1.0625rem, 1.25vw, 1.125rem);
  --font--body: 1.0625rem;
  --font--small: 0.9375rem;
  --font--xsmall: 0.8125rem;
  --font--weight-regular: 400;
  --font--weight-medium: 500;
  --font--weight-semibold: 600;
  --font--weight-bold: 700;
  --font--line-height-display: 1.04;
  --font--line-height-h1: 1.07;
  --font--line-height-h2: 1.11;
  --font--line-height-h3: 1.2;
  --font--line-height-h4: 1.3;
  --font--line-height-h5: 1.35;
  --font--line-height-h6: 1.4;
  --font--line-height-body: 1.65;
  --font--line-height-heading: var(--font--line-height-h3);
  --font--tracking-display: -0.036em;
  --font--tracking-h1: -0.032em;
  --font--tracking-h2: -0.028em;
  --font--tracking-h3: -0.019em;
  --font--tracking-h4: -0.012em;
  --font--tracking-h5: -0.008em;
  --font--tracking-h6: -0.006em;
  --font--tracking-caps: 0.08em;
  --font--letter-spacing-display: var(--font--tracking-display);
  --font--opsz-display: 40;
  --font--opsz-heading: 32;
  --font--opsz-body: 16;
}
html,
body {
  font-family: var(--font--family);
  font-size: var(--font--body);
  line-height: var(--font--line-height-body);
  color: var(--color--text);
  background-color: var(--color--background);
  font-feature-settings: var(--font--features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font--weight-semibold);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
h1 {
  font-size: var(--font--h1);
  line-height: var(--font--line-height-h1);
  letter-spacing: var(--font--tracking-h1);
  font-variation-settings: "opsz" var(--font--opsz-heading);
}
h2 {
  font-size: var(--font--h2);
  line-height: var(--font--line-height-h2);
  letter-spacing: var(--font--tracking-h2);
  font-variation-settings: "opsz" var(--font--opsz-heading);
}
h3 {
  font-size: var(--font--h3);
  line-height: var(--font--line-height-h3);
  letter-spacing: var(--font--tracking-h3);
}
h4 {
  font-size: var(--font--h4);
  line-height: var(--font--line-height-h4);
  letter-spacing: var(--font--tracking-h4);
}
h5 {
  font-size: var(--font--h5);
  line-height: var(--font--line-height-h5);
  letter-spacing: var(--font--tracking-h5);
}
h6 {
  font-size: var(--font--h6);
  line-height: var(--font--line-height-h6);
  letter-spacing: var(--font--tracking-h6);
}
.display {
  font-size: var(--font--display);
  line-height: var(--font--line-height-display);
  letter-spacing: var(--font--tracking-display);
  font-weight: var(--font--weight-semibold);
  font-variation-settings: "opsz" var(--font--opsz-display);
}

/* tokens/spacing.css */
:root {
  --space--xxsmall: 0.25rem;
  --space--xsmall: 0.5rem;
  --space--small: 1rem;
  --space--medium: 2rem;
  --space--large: 4rem;
  --space--xlarge: 6rem;
  --space--xxlarge: 8rem;
  --space--huge: 10rem;
  --space--xhuge: 12rem;
  --space--xxhuge: 16rem;
  --rhythm--stage: var(--space--xlarge);
  --rhythm--standard: var(--space--large);
  --rhythm--dense: var(--space--medium);
  --radius--xsmall: 0.25rem;
  --radius--small: 0.5rem;
  --radius--medium: 0.75rem;
  --radius--large: 1rem;
  --radius--xlarge: 1.25rem;
  --radius--pill: 9999px;
  --container--content: 1180px;
  --container--medium: 64rem;
  --container--small: 48rem;
  --reading-width: 65ch;
  --nav--height: 68px;
  --nav--padding-x: 3rem;
  --nav--logo-height: 24px;
  --faq--question-width: 80%;
  --shadow-subtle: 0 1px 2px rgba(13, 58, 64, 0.06);
  --shadow-card: 0 1px 0 rgba(13, 58, 64, 0.03), 0 12px 28px -14px rgba(13, 58, 64, 0.16);
  --shadow-elevated: 0 2px 0 rgba(13, 58, 64, 0.03), 0 32px 64px -24px rgba(13, 58, 64, 0.24);
}

/* =============================================================================
 * Bruecke: Lightning-Basiskomponenten auf DS-Web ziehen
 * =============================================================================
 * lightning-button, -input, -datatable rendern in EIGENEM Shadow DOM. Ihre
 * Optik laesst sich nicht per Klassenregel von aussen aendern — wohl aber ueber
 * die SLDS-Styling-Hooks, denn das sind Custom Properties und die werden
 * vererbt. Nur oeffentliche Hooks verwenden: INTERNAL-Tokens brechen den Deploy
 * (siehe deployment-lessons, „LWC-CSS: interne SLDS-Tokens nicht erlaubt").
 * ========================================================================== */
:root {
  /* Marke */
  --lwc-brandAccessible: var(--color--brand);
  --lwc-brandAccessibleActive: var(--color--brand-active);
  --lwc-colorTextLink: var(--color--link);
  --lwc-colorTextLinkHover: var(--color--link-hover);
  --lwc-colorTextLinkActive: var(--color--link-active);

  /* Brand-Button */
  --slds-c-button-brand-color-background: var(--color--brand);
  --slds-c-button-brand-color-border: var(--color--brand);
  --slds-c-button-brand-color-background-hover: var(--color--brand-hover);
  --slds-c-button-brand-color-border-hover: var(--color--brand-hover);
  --slds-c-button-brand-color-background-active: var(--color--brand-active);
  --slds-c-button-brand-color-border-active: var(--color--brand-active);
  --slds-c-button-brand-text-color: var(--color--text-on-brand);
  --slds-c-button-radius-border: var(--radius--small);

  /* Neutraler Button = DS-Web Ghost */
  --slds-c-button-neutral-color-background: transparent;
  --slds-c-button-neutral-color-border: var(--color--border-control);
  --slds-c-button-text-color: var(--color--text);

  /* Eingabefelder */
  --slds-c-input-radius-border: var(--radius--small);
  --slds-c-input-color-border: var(--color--border-control);
  --slds-c-input-color-border-focus: var(--color--brand);
  --slds-c-input-shadow-focus: 0 0 0 0.0625rem var(--color--brand);

  /* Fortschrittsbalken — Platzbilanz im Portal */
  --slds-c-progress-bar-color-background: var(--color--surface-brand);
  --slds-c-progress-bar-color-background-fill: var(--color--brand);
  --slds-c-progress-bar-radius-border: var(--radius--pill);

  /* lightning-badge */
  --slds-c-badge-color-background: var(--color--surface-brand);
  --slds-c-badge-text-color: var(--color--text-eyebrow);
  --slds-c-badge-radius-border: var(--radius--pill);
}

/* =============================================================================
 * Grundtypografie der Akademie-Site
 * =============================================================================
 * Greift auf der Experience-Seite selbst (Light-DOM). LWC-Innenleben erbt
 * font-family ohnehin ueber die Vererbung.
 * ========================================================================== */
.itelio-dsweb,
.itelio-dsweb :where(h1, h2, h3, h4, h5, h6, p, span, div, li, td, th, label, button, input) {
  font-family: var(--font--family);
  font-feature-settings: var(--font--features);
}

.itelio-dsweb {
  color: var(--color--text);
  font-size: var(--font--body);
  line-height: var(--font--line-height-body);
}

/* =============================================================================
 * Bruecke, Teil 2: Textarea, Combobox, Spinner
 * =============================================================================
 * ADDITIV ergaenzt fuer die Community-Oberflaeche (2026-08). Bewusst KEINE
 * neuen Werte: jeder Hook zeigt auf eine semantische Rolle, die oben schon
 * definiert ist (--color--border-control, --color--brand, --radius--small).
 * Damit kann dieser Block nicht von DS-Web abweichen — er fuehrt nur die
 * bestehende Button-/Input-Bruecke auf drei weitere Basiskomponenten fort.
 *
 * Warum hier und nicht im CSS der LWC: das sind Custom Properties, die werden
 * vererbt und ueberqueren die Shadow-DOM-Grenze. Klassenregeln tun das nicht.
 *
 * Nur oeffentliche --slds-c-*-Hooks. Keine INTERNAL---lwc--Tokens (die brechen
 * den Deploy, siehe deployment-lessons „LWC-CSS: interne SLDS-Tokens").
 * ========================================================================== */
:root {
  /* Mehrzeiliges Textfeld — Optik identisch zu lightning-input oben */
  --slds-c-textarea-radius-border: var(--radius--small);
  --slds-c-textarea-color-border: var(--color--border-control);
  --slds-c-textarea-color-border-focus: var(--color--brand);
  --slds-c-textarea-shadow-focus: 0 0 0 0.0625rem var(--color--brand);
  --slds-c-textarea-color-background: var(--color--background);
  --slds-c-textarea-text-color: var(--color--text);

  /* Auswahlfeld / Dropdown */
  --slds-c-combobox-radius-border: var(--radius--small);
  --slds-c-combobox-color-border: var(--color--border-control);
  --slds-c-combobox-color-border-focus: var(--color--brand);
  --slds-c-combobox-shadow-focus: 0 0 0 0.0625rem var(--color--brand);
  --slds-c-combobox-color-background: var(--color--background);

  /* Ladeanzeige — Punkte in Markenfarbe statt SLDS-Blau */
  --slds-c-spinner-color-foreground: var(--color--brand);
}