/* ============================================================================
   Corporate Design Q-FOX / BADEN CLOUD als CSS-Variablen
   Quelle: "Kompaktinfos Farben | Typographie | Logos beim Q-FOX", MEK V1.0 2026-01
   Erzeugt am 2026-08-27 aus cd-tokens.json. Werte nicht von Hand aendern:
   erst cd-tokens.json anpassen, dann diese Datei nachziehen.

   Einbinden:  <link rel="stylesheet" href="cd.css">
   Danach nur noch var(--cd-...) verwenden, keine eigenen Hex-Werte.
   Laedt nichts aus dem Internet: Arial ist auf allen Zielsystemen vorhanden.
   ========================================================================= */

:root {
  /* --- Q-FOX Markenfarben ------------------------------------------------ */
  --cd-blau:        #0e3a5d;   /* 100 %  Primaerfarbe */
  --cd-blau-80:     #056490;
  --cd-blau-60:     #5593b9;
  --cd-blau-40:     #9cc9e8;
  --cd-blau-20:     #d2e9f9;
  --cd-rot:         #e30613;   /* Akzent, sparsam */

  /* --- Schwarz-Abstufungen fuer Flaechen und Hintergruende --------------- */
  --cd-grau-20:     #cccccc;
  --cd-grau-15:     #d9d9d9;
  --cd-grau-10:     #e6e6e6;
  --cd-grau-05:     #f2f2f2;
  --cd-weiss:       #ffffff;

  /* --- BADEN CLOUD ------------------------------------------------------- */
  --cd-bc-hellblau: #9cc9e8;
  --cd-bc-rot:      #cd1719;
  --cd-bc-gelb:     #ffcc00;
  --cd-bc-anthrazit:#4a4a49;

  /* --- Rollen: hierueber gestalten, nicht ueber die Markenfarben direkt --- */
  --cd-text:        var(--cd-blau);        /* Kontrast 11.78 auf Weiss */
  --cd-text-leise:  var(--cd-bc-anthrazit);/* Kontrast  8.87 auf Weiss */
  --cd-flaeche:     var(--cd-weiss);
  --cd-flaeche-2:   var(--cd-grau-05);
  --cd-flaeche-akzent: var(--cd-blau-20);
  --cd-linie:       var(--cd-grau-20);
  --cd-akzent:      var(--cd-rot);
  --cd-akzent-text: var(--cd-weiss);       /* Weiss auf Rot: 4.88, ausreichend */
  --cd-fokus:       var(--cd-rot);

  /* --- Schrift ----------------------------------------------------------- */
  /* Online und Office: Arial. So steht es im Corporate Design. */
  --cd-schrift:     Arial, "Helvetica Neue", Helvetica, sans-serif;
  /* Nur fuer Oberflaechen der BADEN CLOUD. Open Sans selbst ausliefern,
     nicht von Google Fonts laden (Datenschutz, Offline-Faehigkeit). */
  --cd-schrift-bc:  "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Groessen duerfen skaliert werden, das Verhaeltnis bleibt gleich.
     Faktor 1.25 zwischen den Stufen. */
  --cd-text-xs:     0.75rem;   /* 12 px */
  --cd-text-s:      0.875rem;  /* 14 px */
  --cd-text-m:      1rem;      /* 16 px, Fliesstext */
  --cd-text-l:      1.25rem;   /* 20 px */
  --cd-text-xl:     1.5rem;    /* 24 px */
  --cd-text-2xl:    2rem;      /* 32 px */
  --cd-text-3xl:    2.5rem;    /* 40 px */

  --cd-zeilenhoehe: 1.5;
  --cd-zeilenhoehe-eng: 1.2;   /* Ueberschriften */
}

/* Basis. Optional: wer nur die Farben braucht, kann alles ab hier weglassen. */
body {
  font-family: var(--cd-schrift);
  font-size: var(--cd-text-m);
  line-height: var(--cd-zeilenhoehe);
  color: var(--cd-text);
  background: var(--cd-flaeche);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--cd-zeilenhoehe-eng);
  color: var(--cd-text);
}
h1 { font-size: var(--cd-text-3xl); }
h2 { font-size: var(--cd-text-2xl); }
h3 { font-size: var(--cd-text-xl); }

a { color: var(--cd-blau-80); }          /* Kontrast 6.50 auf Weiss */
a:hover { color: var(--cd-akzent); }

/* Sichtbarer Fokus ist Pflicht, sonst ist die Oberflaeche nicht bedienbar. */
:focus-visible {
  outline: 2px solid var(--cd-fokus);
  outline-offset: 2px;
}

/* Der Claim steht laut Corporate Design zweizeilig, links, in Rot. */
.cd-claim {
  color: var(--cd-akzent);
  font-weight: 700;
  line-height: var(--cd-zeilenhoehe-eng);
  text-align: left;
}

/* Das Logo ohne Claim steht am rechten oberen Rand. */
.cd-logo {
  display: block;
  margin-left: auto;
}

@media print {
  body { background: #fff; }
  /* Markenflaechen muessen auch im Ausdruck farbig bleiben. */
  .cd-flaeche-marke { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================================
   ERGAENZUNG, NICHT TEIL DES CORPORATE DESIGN
   Das Dokument gibt keine Statusfarben vor, Oberflaechen brauchen aber welche.
   Werte stammen aus dem bereits laufenden IT-Kompass-Konfigurator, damit nichts
   frei erfunden ist. Freigabe durch Marketing steht aus.
   Fehler und Warnung kommen aus der Marke, nur Erfolg braucht eine eigene Farbe.
   ========================================================================= */
:root {
  --cd-fehler:          var(--cd-rot);       /* Kontrast 4.88 auf Weiss */
  --cd-warnung:         var(--cd-bc-gelb);   /* nur Flaeche, nie Text auf Weiss */
  --cd-warnung-flaeche: #fff8e6;             /* Freigabe OFFEN */
  --cd-warnung-linie:   #f3d98b;             /* Freigabe OFFEN */
  --cd-erfolg:          #3fb179;             /* Freigabe OFFEN */
  --cd-erfolg-dunkel:   #2e9d67;             /* Freigabe OFFEN */
}