/*
 * Helios Kliniken, gemessen auf helios-gesundheit.de: Text #31333f, Blau #004fff, Dunkelblau #002ea5, Grün #63b64d, Hellblau #ccdafe,
 * Fußzeile Dunkelgrün #216b4a. Schrift Mallory 400 und 700 (lizenzpflichtig, Fallback der Website: Helvetica und Arial), hier Arimo (OFL).
 * Fließtext 16 px/24 px, Überschriften 700, Knöpfe eckig und fett (14 px 22 px, 2 px transparente Kante), Eingabefelder 1 px #777874 ohne Rundung.
 * Messwerte der Website, kein Markenhandbuch.
 */
@font-face { font-family: "Arimo"; src: url("fonts/arimo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ArimoBold"; src: url("fonts/arimo-latin-700-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #FFFFFF;
  --ink: #31333F;
  --primary: #004FFF;
  --primary-dark: #002EA5;
  --on-primary: #FFFFFF;
  --blue: #63B64D;        /* Grün als Linie und Fläche, Text darauf --ink (5,0:1) */
  --sand: #CCDAFE;
  --white: #FFFFFF;
  --muted: #5A5D6B;       /* 6,5:1 auf Weiß */
  --line: #D9DBE3;
  --blue-soft: #CCDAFE;   /* Auswahlfläche, Text darauf --ink (9,0:1) */
  --error: #A4262C;
  --error-soft: #FBE9E9;
  --head: "ArimoBold", Arial, Helvetica, sans-serif;
  --headline: "ArimoBold", Arial, Helvetica, sans-serif;
  --body: "Arimo", Arial, Helvetica, sans-serif;
  --bold: "ArimoBold", Arial, Helvetica, sans-serif;
  --r: 0px;
  --head-color: #31333F;
  --top-bg: #FFFFFF; --top-fg: #31333F; --brand-color: #31333F; --brand-sub: #004FFF;
  --top-border: 4px solid #63B64D; --top-line: rgba(49, 51, 63, .18);
  --on-primary-soft: #CCDAFE;
  --testbar-bg: #CCDAFE; --testbar-fg: #31333F;
  --field-border: #777874;
}
body { font-size: 1rem; line-height: 1.5; }
.top__link { text-transform: none; letter-spacing: 0; font-size: 1rem; font-family: "Arimo", Arial, sans-serif; color: #31333F; }
.card, .day, .oday, .msg, .empty, .legend { border: 1px solid var(--line); box-shadow: none; }
input[type=text], input[type=email], input:not([type]) { border: 1px solid #777874; padding: 16px; min-height: 53px; font-size: 1rem; }
input[type=text]:focus, input[type=email]:focus, input:not([type]):focus { border-color: #004FFF; }
.btn { border: 2px solid transparent; padding: 14px 22px; font-size: 1rem; }
.btn--ghost { border: 2px solid #004FFF; color: #004FFF; }
.btn--ghost:hover { background: #CCDAFE; }
.tag, .codes { border-radius: 0; }
.opt__box { border-radius: 0; }
.msg__icon, .step span { border-radius: 0; }
.foot { background: #216B4A; color: #FFFFFF; border-top: 0; }
.foot a { color: #FFFFFF; text-decoration: none; }
.foot a:hover { text-decoration: underline; }