/* ============================================================
   CAIDAO · Selbstchecks – gemeinsame Grundlage
   ------------------------------------------------------------
   Markenfarben, Typo-Skala und Radien nach dem CAIDAO-Styleguide
   (Präsentationsstandard, September 2026). Dieser Standard kennt
   keine Web-Fassung – dies hier ist ihre Übersetzung.

   Je Check wird im eigenen <style> nur gesetzt:
       --kt        Kompetenzteam-Farbe
       --kt-tint   zugehöriger Tint
       --kt-text   abgedunkelte Variante, falls als Textfarbe gebraucht

   Nicht an den #BR26-Auftritt angleichen: der ist Co-Branding für
   eine Messe, die Checks sind Hausprodukte. Die KT-Farbe ist das
   Ordnungssystem, nicht Dekoration – nie durch Navy ersetzen.

   AUFBAU – bitte einhalten:
   Diese Datei enthält (1) Variablen, (2) Schriften, (3) Bausteine
   mit dem Präfix .c-. Sie enthält bewusst KEINE Regeln auf nackten
   Elementen (body, h1, a …). Solche Regeln greifen sonst auch dort,
   wo eine Datei sich auf die Browser-Vorgabe verlässt, und ändern
   still das Aussehen – beim ersten Versuch ist genau das passiert:
   ein h1-Standard hat die Submarken-Wortmarke dünner gemacht.
   ============================================================ */

/* ---------- Lato, selbst gehostet (kein Google-Fonts-Aufruf) ---------- */
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;
  src:url("../assets/fonts/lato-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/lato-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/lato-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;
  src:url("../assets/fonts/lato-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:700;font-display:swap;
  src:url("../assets/fonts/lato-latin-700-italic.woff2") format("woff2")}

:root{
  /* ---------- Markenfarben: die sieben Werte, plus Weiß ----------
     Keine Zweitfassungen, keine Zwischentöne. */
  --navy:#244061;          /* Überschriften, Rahmen, Akzentflächen */
  --dunkelblau:#142740;    /* Fließtext auf hellem Grund */
  --orange:#FF6601;        /* einzige Akzentfarbe: Titelstreifen, Footerblock */
  --hellblau:#A7C0E0;
  --flaechenblau:#EEF3FA;  /* Füllung ruhiger Inhaltskästen */
  --grau:#595959;          /* Unterzeilen, Beschriftungen */
  --linie:#DDDDDD;
  --weiss:#FFFFFF;

  /* Zweitnamen, damit ältere Dateien ohne Umschreiben mitlaufen.
     In neuen Checks die deutschen Namen oben verwenden. */
  --ink:var(--dunkelblau);   --dark:var(--dunkelblau);
  --hellblau-alt:var(--hellblau); --lightblue:var(--hellblau);
  --flaeche:var(--flaechenblau);  --surface:var(--flaechenblau);
  --grau-alt:var(--grau);    --gray:var(--grau);  --grey:var(--grau);
  --linie-alt:var(--linie);  --line:var(--linie);
  --weiss-alt:var(--weiss);  --white:var(--weiss);

  /* ---------- Kompetenzteams ----------
     Farbe und Tint gehören zusammen und werden nicht gemischt. */
  --kt01:#AD3235;  --kt01-tint:#F5E7E7;
  --kt02:#D05134;  --kt02-tint:#FCEDE8;
  --kt03:#DA8A3D;  --kt03-tint:#FDF1E4;
  --kt04:#47998E;  --kt04-tint:#E4F1EF;
  --kt05:#30646B;  --kt05-tint:#E6ECED;
  --kt06:#5770B3;  --kt06-tint:#EBEEF6;
  --kt07:#434698;  --kt07-tint:#E8E9F3;
  --kt08:#5E3A8C;  --kt08-tint:#ECE6F3;

  /* Abgedunkelte Textvarianten für die hellen KT-Farben.
     Der Styleguide führt für KT02/03/04 keine – auf Weiß liegen sie
     unter 4,5:1. --kt03-text stammt aus dem Entgelt-Check und wartet
     auf Aufnahme in den Styleguide; KT02 und KT04 sind offen. */
  --kt03-text:#92561C;

  /* ---------- Aktives Kompetenzteam ----------
     Vorgabe neutral; jede Check-Datei überschreibt die drei. */
  --kt:var(--navy);
  --kt-tint:var(--flaechenblau);
  --kt-text:var(--kt);

  /* ---------- Schrift ---------- */
  --font:"Lato","Lato Regular",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ---------- Typo-Skala ----------
     Die sieben Grade der Spezifikation, in Pixel übersetzt, dazu ein
     Display-Grad für große Kennzahlen. Nichts dazwischen erfinden. */
  --fs-display:54px;               /* Indexzahl, Ergebniswert */
  --fs-h1:clamp(27px,4vw,38px);    /* Seitenüberschrift */
  --fs-h2:24px;                    /* Bereichsüberschrift */
  --fs-lead:20px;                  /* Leadkasten, Claim */
  --fs-h3:17px;                    /* Kartentitel, Fragetext */
  --fs-body:15px;                  /* Fließtext */
  --fs-small:13px;                 /* Beschriftung, Unterzeile */
  --fs-mini:11px;                  /* Fußnote, Chip */
  --fs-eingabe:16px;               /* Eingabefelder – darunter zoomt iOS hinein */

  /* ---------- Radien ----------
     Drei, nicht sechs. Buttons und Eingaben --r-klein, Karten
     --r-karte, --r-pille nur für Chips und Badges. */
  --r-klein:8px;
  --r-karte:14px;
  --r-pille:999px;

  /* ---------- Raster ---------- */
  --maxw:1080px;
  --gutter:20px;
}

/* ============================================================
   Bausteine für neue Checks
   ------------------------------------------------------------
   Alle mit Präfix .c-, damit sie nicht mit den gewachsenen
   Klassennamen der bestehenden Dateien kollidieren. Wer einen
   neuen Check baut, nimmt diese und schreibt kein eigenes CSS
   für Knopf, Karte und Chip.
   ============================================================ */

/* Kompetenzteam-Chip: Nummer in der KT-Farbe, Bezeichnung daneben. */
.c-chip{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-mini);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  line-height:1.3;color:var(--grau);margin:0 0 14px;
}
.c-chip .nr{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-pille);
  background:var(--kt);color:var(--weiss);
  font-size:var(--fs-mini);font-weight:700;letter-spacing:0;
}

/* Knöpfe. Primär trägt die KT-Farbe, sekundär steht weiß mit Rand. */
.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:var(--fs-body);font-weight:700;line-height:1;
  padding:13px 20px;min-height:46px;
  border:1px solid transparent;border-radius:var(--r-klein);
  text-decoration:none;cursor:pointer;
  transition:filter .12s ease,transform .12s ease;
}
.c-btn:active{transform:translateY(1px)}
@media (hover:hover){.c-btn:hover{filter:brightness(.94)}}
.c-btn--kt{background:var(--kt);color:var(--weiss)}
.c-btn--navy{background:var(--navy);color:var(--weiss)}
.c-btn--ghost{background:var(--weiss);color:var(--navy);border-color:var(--linie)}

/* Flächen. Der Tint erscheint nur dort, wo die Fläche dem
   Kompetenzteam zugeordnet ist – sonst Flächenblau. */
.c-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-karte);padding:18px 20px}
.c-karte--ruhig{background:var(--flaechenblau);border:0}
.c-karte--kt{background:var(--kt-tint);border:0}

/* ---------- Titelbereich ----------
   Das gemeinsame Muster aller Checks, linksbündig und immer in dieser
   Reihenfolge:

       orange Kante links
       Marke (Logo + Submarke kursiv in der KT-Farbe)
       KT-Chip (Nummer im Kreis + Versalzeile)
       H1
       Einleitung
       Faktenzeile (Navy-Band: Umfang · Dauer · Datenverhalten)
       rechts optional eine Motivfläche

   Die Faktenzeile sagt vor dem Start, worauf man sich einlässt – Umfang,
   Dauer und was mit den Eingaben passiert. Sie gehört in jeden Check. */
.c-kopf{position:relative;overflow:hidden;background:var(--flaechenblau);border-bottom:1px solid var(--linie)}
.c-kopf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--orange);z-index:2}
.c-kopf-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) var(--spalte,336px);gap:26px;align-items:stretch;
}
.c-kopf-text{padding:26px 0 30px}
.c-kopf-panel{display:grid;place-items:center start;padding:26px 0}
@media (max-width:860px){
  .c-kopf-inner{grid-template-columns:1fr;gap:0}
  .c-kopf-text{padding:24px 0 20px}
  .c-kopf-panel{padding:0 0 16px}
}
.c-marke{display:flex;align-items:flex-end;gap:13px;margin-bottom:16px}
.c-submarke{font-size:28px;font-style:italic;color:var(--kt);line-height:1;margin-bottom:4px}
.c-lead{font-size:var(--fs-body);color:var(--grau);margin-top:10px;max-width:62ch}

.c-fakten{
  display:flex;flex-wrap:wrap;gap:0 10px;margin-top:18px;padding:10px 16px;
  background:var(--navy);border-radius:var(--r-klein);width:fit-content;max-width:100%;
}
.c-fakt{font-size:var(--fs-small);color:var(--weiss);white-space:nowrap}
.c-fakt + .c-fakt::before{content:"·";margin-right:10px;color:var(--hellblau)}

/* Eingabefelder */
.c-feld{
  width:100%;font-family:var(--font);font-size:var(--fs-eingabe);color:var(--dunkelblau);
  padding:11px 13px;border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--weiss);
}
.c-feld:focus{outline:2px solid var(--kt);outline-offset:1px;border-color:var(--kt)}