/*
 * Die Marke der sensis GmbH für academy.sensis-apps.de (ADR-0037).
 *
 * Werte von www.sensis.de, abgeleitet wie für die Schulungsvideos
 * (Video-Skill `marken/sensis/marke.css`, 02.10.2026) – eine Ableitung, nicht
 * zwei:
 *
 * - Orange #FB8E24 ist die Akzentfarbe der Website. **Als Text auf Hell nur
 *   2,3:1**, deshalb schreibt es hier in derselben Farbe dunkler: #AF5803
 *   (5,0:1 auf Weiß). Das helle Orange bleibt Flächen, Zeichen und
 *   Schaltflächen mit dunkler Schrift (7,2:1).
 * - Fast-Schwarz #1D1D1B ist die Textfarbe der Website; Nebentext #5E6064
 *   statt des Website-Graus #7A7C7F (4,2:1, zu blass für Fließtext).
 * - Grund #F5F7FC wie die Sektionen der Website.
 * - Schrift Montserrat 400–700 (SIL OFL), auf Latin und Latin Extended
 *   verkleinert, vom eigenen Server.
 *
 * Diese Datei lädt `index.html` nach den Token-Variablen des Portals und
 * überschreibt sie. Regeln für Bauteile tragen `:root` davor: Das gebündelte
 * Stylesheet steht im Dokument hinter dieser Datei und gewänne sonst bei
 * gleicher Spezifität.
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schrift/montserrat-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schrift/montserrat-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schrift/montserrat-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('schrift/montserrat-700.woff2') format('woff2');
}

:root {
  --cotrax-font-family-base: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cotrax-font-family-lesen: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --cotrax-color-surface-default: #f5f7fc;
  --cotrax-color-surface-raised: #ffffff;
  --cotrax-color-surface-muted: #edf0f7;
  --cotrax-color-surface-inverse: #2a2a27;
  --cotrax-color-surface-inverse-deep: #1d1d1b;
  --cotrax-color-surface-stage: #fff1e3;
  --cotrax-color-surface-hover: #edeff4;
  --cotrax-color-surface-active: #e2e5ec;
  --cotrax-color-surface-disabled: #f0f2f6;

  --cotrax-color-text-default: #1d1d1b;
  --cotrax-color-text-muted: #5e6064;
  --cotrax-color-text-disabled: #6b6d70;
  --cotrax-color-text-on-inverse: #ffffff;
  --cotrax-color-text-on-inverse-muted: #bdbdb7;
  --cotrax-color-text-on-accent: #ffffff;

  --cotrax-color-accent-default: #af5803;
  --cotrax-color-accent-hover: #8f4702;
  --cotrax-color-accent-active: #7a3d02;
  --cotrax-color-accent-subtle: #fff1e3;
  --cotrax-color-accent-on-inverse: #fb8e24;
  --cotrax-color-brand-signal: #fb8e24;

  --cotrax-color-border-default: #7a7c7f;
  --cotrax-color-border-subtle: #e3e6ec;
  --cotrax-color-border-card: #e8eaf0;
  --cotrax-color-border-strong: #5e6064;

  --cotrax-color-focus-ring: #1d1d1b;
  --cotrax-color-focus-ring-on-inverse: #ffffff;

  --cotrax-color-state-info: #0066cc;

  /*
   * Die Töne der Kurskarten (US-0703) – nur Schmuck, keine Information: das
   * Orange der Website in drei Stufen, die beiden Blau aus Logo und Website,
   * das Grau der Nebentexte.
   */
  --cotrax-course-accent-1: #fb8e24;
  --cotrax-course-accent-2: #1185c7;
  --cotrax-course-accent-3: #df7004;
  --cotrax-course-accent-4: #3e86c4;
  --cotrax-course-accent-5: #f99b18;
  --cotrax-course-accent-6: #5e6064;

  --cotrax-color-track-done: #df7004;
  --cotrax-color-track-open: #fedcbc;
  --cotrax-color-track-open-on-inverse: #34342f;
}

/* Überschriften: Montserrat läuft breiter als die cotrax-Schrift – weniger eng gesetzt. */
:root h1,
:root h2,
:root h3 {
  letter-spacing: -0.01em;
}

/*
 * **Die Hauptschaltfläche wie auf sensis.de**: Orange mit 8 Pixeln Rundung –
 * aber mit dunkler Schrift. Weiß auf diesem Orange erreicht 2,3:1, Fast-Schwarz
 * 7,2:1.
 */
:root .cotrax-button--primary {
  border-radius: 8px;
  background-color: #fb8e24;
  border-color: #fb8e24;
  color: #1d1d1b;
}

:root .cotrax-button--primary:hover {
  background-color: #f57c00;
  border-color: #f57c00;
  color: #1d1d1b;
}

:root .cotrax-button {
  border-radius: 8px;
}

:root .cotrax-nav__abmelden {
  border-radius: 8px;
}

/*
 * **Die Zeichen der cotrax-Marke entfallen**: das X, die Klammern, der
 * Anspruch „Coaching · Training · Experience“. Die Beschriftung, die eine
 * Klammer umschließt („8 Lektionen · Fassung v1“), bleibt.
 *
 * `!important`, weil das Portal das X an einzelnen Stellen mit höherer
 * Spezifität wieder einblendet (dunkle Karte der Kursübersicht) – hier soll es
 * überall fehlen, ohne jede dieser Stellen nachzubauen.
 */
:root svg:has(.cotrax-signet__chevron),
:root .cotrax-klammer__zeichen,
:root .cotrax-klammer--claim {
  display: none !important;
}

/* Die dunkle Fläche der Bühne ohne die Pfeilform der cotrax-Website. */
:root .cotrax-buehne__flaeche {
  clip-path: none;
}

/* Das Logo trägt seinen Anspruch selbst; daneben steht klein „Academy“. */
:root .cotrax-marke__bild {
  display: block;
  block-size: 2.25rem;
  inline-size: auto;
}

:root .cotrax-fuss .cotrax-marke__bild {
  block-size: 2.5rem;
}

:root .cotrax-marke--instanz .cotrax-marke__zusatz {
  color: #af5803;
}

:root .cotrax-fuss .cotrax-marke--instanz .cotrax-marke__zusatz {
  color: #fb8e24;
}

@media (max-width: 40rem) {
  :root .cotrax-marke__bild {
    block-size: 1.75rem;
  }

  /* Montserrat läuft breiter: vier Menüpunkte sollen auf dem Telefon in eine Zeile passen. */
  :root .cotrax-nav {
    column-gap: 0.75rem;
  }

  :root .cotrax-nav__link {
    font-size: 0.8125rem;
    letter-spacing: 0;
  }

  :root .cotrax-marke--instanz .cotrax-marke__zusatz {
    display: none;
  }
}