/*
 * Die Marke des Kita-Trägers Kinderparadies für kinderparadies.cotrax.academy
 * (ADR-0037).
 *
 * Abgeleitet wie für die Folien des Video-Skills (`marken/kinderparadies/`,
 * 11.11.2026) – eine Ableitung, nicht zwei. Quellen, nicht erfunden:
 *
 * - **Wunsch der Trägerin** im Gespräch am 11.11.2026: „hellblau, beige … nicht
 *   so Business-getrieben“. Daher Beige als Grund (#FAF5EC), Hellblau als Bühne
 *   und gewählter Zustand (#E3F1F8), weiße Karten.
 * - **Blau von kinderparadies-kita.de:** #15779B ist die Akzentfarbe der
 *   Website, #11607D ihre dunklere Stufe – sie schreibt auf Hell (7,0:1 auf
 *   Weiß, 6,5:1 auf Beige) und trägt die Schaltflächen mit weißer Schrift
 *   (7,0:1). #3D9FC6, die hellere Stufe desselben Farbtons, bleibt Fläche und
 *   Zeichen: Weiß darauf erreicht nur 3,0:1, dunkle Schrift 3,9:1 – beides zu
 *   wenig für Text in normaler Größe.
 * - **Text** #1D3C4A, ein tiefes Blaugrau aus demselben Farbton (10,8:1 auf
 *   Beige); Nebentext #4F5B63 (6,4:1 auf Beige). Fokusring #11607D (6,5:1).
 * - **Schrift Nunito** (SIL OFL, `schrift/nunito-OFL.txt`) statt der Schriften
 *   der Website (Gabriola/Renaissance, nicht frei einbettbar) – rund und
 *   freundlich. Variabel 200–1000, Latin und Latin Extended, vom eigenen Server.
 * - **Logo** `kipa-logo-klein-einzeiler-2023.png` von der Website (graue
 *   Schreibschrift mit Schmetterling), das Negativ weiß eingefärbt. Als Logo
 *   von der Kontrastregel ausgenommen (WCAG 1.4.3); der Name steht als Text im
 *   Dokument.
 *
 * Alle Paare aus `packages/tokens` (Text ≥ 4,5:1, Grafik ≥ 3:1) halten mit
 * diesen Werten. Wie bei cotrax liegt nur Text im Zentrum eines Lichtflecks
 * darunter (ADR-0030): das hellblaue Etikett auf der dunklen Fläche (3,3:1).
 *
 * 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: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('schrift/nunito-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('schrift/nunito-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --cotrax-font-family-base: 'Nunito', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --cotrax-font-family-lesen: 'Nunito', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --cotrax-color-surface-default: #faf5ec;
  --cotrax-color-surface-raised: #ffffff;
  --cotrax-color-surface-muted: #f2ecdf;
  --cotrax-color-surface-inverse: #1d3c4a;
  --cotrax-color-surface-inverse-deep: #132a35;
  --cotrax-color-surface-stage: #e3f1f8;
  --cotrax-color-surface-hover: #efe8da;
  --cotrax-color-surface-active: #e6ddcb;
  --cotrax-color-surface-disabled: #f3efe7;

  --cotrax-color-text-default: #1d3c4a;
  --cotrax-color-text-muted: #4f5b63;
  --cotrax-color-text-disabled: #5c666d;
  --cotrax-color-text-on-inverse: #ffffff;
  --cotrax-color-text-on-inverse-muted: #c5d6de;
  --cotrax-color-text-on-accent: #ffffff;

  --cotrax-color-accent-default: #11607d;
  --cotrax-color-accent-hover: #0d4e66;
  --cotrax-color-accent-active: #0a3f53;
  --cotrax-color-accent-subtle: #e3f1f8;
  --cotrax-color-accent-on-inverse: #8fd3ee;
  --cotrax-color-brand-signal: #3d9fc6;

  --cotrax-color-border-default: #77858c;
  --cotrax-color-border-subtle: #e6ded0;
  --cotrax-color-border-card: #ece5d7;
  --cotrax-color-border-strong: #4f5b63;

  --cotrax-color-focus-ring: #11607d;
  --cotrax-color-focus-ring-on-inverse: #ffffff;

  --cotrax-color-state-info: #11607d;

  /*
   * Die Töne der Kurskarten (US-0703) – nur Schmuck, keine Information: die
   * Blaustufen der Website, ein Sand zum Beige, das Grau der Nebentexte.
   */
  --cotrax-course-accent-1: #3d9fc6;
  --cotrax-course-accent-2: #11607d;
  --cotrax-course-accent-3: #d9b98a;
  --cotrax-course-accent-4: #6fb7d6;
  --cotrax-course-accent-5: #2d5a6e;
  --cotrax-course-accent-6: #4f5b63;

  /* Die Spur: Schriftblau auf hellem Blau (4,9:1), auf Dunkel Hellblau auf #2D5A6E (4,5:1). */
  --cotrax-color-track-done: #11607d;
  --cotrax-color-track-open: #b9dcec;
  --cotrax-color-track-open-on-inverse: #2d5a6e;
}

/*
 * **Die Schaltflächen bleiben die runden des Portals** (Pillenform) – das
 * passt zu „nicht Business“. Ihre Farben kommen aus den Tokens: Schriftblau
 * #11607D mit weißer Schrift (7,0:1).
 */

/*
 * **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 ist eine Schreibschrift (808 × 137); 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: #11607d;
}

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

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

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

/*
 * **Die Verwaltung (Konsole) in derselben Marke** (ADR-0037, Nachtrag). Sie
 * nutzt dieselben Token-Variablen; hier nur, was sie anders baut: das Logo,
 * die Klammern.
 */
:root .konsole-marke__bild {
  display: block;
  block-size: 2rem;
  inline-size: auto;
}

:root .konsole-marke--instanz .konsole-marke__zusatz {
  color: #11607d;
}

:root .konsole-klammer svg {
  display: none !important;
}