/* Markenfarben und Grundschrift des Portals - GEMEINSAM genutzt von der
   Arbeitsplatz-Oberflaeche (index.html) und der mobilen Fassung
   (mobil.html). Beide sollen zwingend gleich aussehen; eine zweite Kopie
   dieser Werte liefe beim ersten Farbwechsel auseinander. Nur Farben,
   Grundschrift und der kleine Reset stehen hier - alles Weitere gehoert in
   die jeweilige Oberflaeche.
   ------------------------------------------------------------------- */
/* Farben und Schrift von veomedical.de übernommen:
     #C2D11D  Markenfarbe (Limette)      #4A4F55  Text/Primär
     #ECF2E1  weicher Markenton          #E1E1E1  Linien
     #F9F9F9  ruhiger Hintergrund        Helvetica-Stack
   Eine Abweichung mit Absicht: Die Limette trägt keinen Text. Auf Weiß
   erreicht sie rund 1,6:1 Kontrast, weißer Text darauf kaum mehr - für ein
   Portal, in dem den ganzen Tag Zahlen gelesen werden, ist das zu wenig.
   Sie bleibt deshalb Flächenfarbe (--accent), Text bekommt die satte
   Ableitung --accent-ink, und auf der Limette steht dunkles Grau. */
:root{
  --ground:#F4F4F1; --surface:#FFFFFF; --sunk:#F0F2E8;
  --ink:#33383D; --ink-soft:#4C4E56; --muted:#6B7178;
  --rule:#E1E1E1; --rule-soft:#EDEDEB;
  --accent:#C1D11D; --accent-soft:#ECF2E1; --accent-ink:#6C7A0C;
  --accent-auf:#33383D;                     /* Text auf Markenfläche */
  --up:#6C7A0C; --down:#90120D; --warn:#8A6510;    /* Weinrot der Marke */
  --shadow:0 1px 2px rgba(74,79,85,.06),0 8px 24px -16px rgba(74,79,85,.3);
  /* Fuellung der Soll-Saeulen: Stahlblau aus der Markenfarbkarte. Bewusst
     nicht --rule (das ist die Linienfarbe und muss hell bleiben) und bewusst
     kein Grau: neben dem Limegruen der Ist-Saeule ist Blau der einzige Ton,
     der sich ohne Konkurrenz unterscheidet. */
  --saeule:#648093; --warm:#B0A7A4;}
/* Der Dunkelmodus wird ausschließlich über den Schalter gewählt, nicht über
   die Systemeinstellung: veomedical.de ist hell, und das Portal soll beim
   ersten Aufruf so aussehen wie die Website. Wer es dunkel will, sagt es. */
:root[data-theme="dark"]{
  --ground:#191C1F; --surface:#22262A; --sunk:#2A2E31;
  --ink:#E6E9EA; --ink-soft:#C6CBCE; --muted:#8D9499;
  --rule:#343A3F; --rule-soft:#2B3135;
  --accent:#C2D11D; --accent-soft:#2C3313; --accent-ink:#CBDB3F;
  --accent-auf:#23272B;
  --up:#CBDB3F; --down:#D4675B; --warn:#D8A745;
  --saeule:#7E9DB1; --warm:#9E9491;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink-soft);
  font:15px/1.55 "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent-ink)}