/*
 * DRK, gemessen auf drk.de (Variablen --col-* und berechnete Stile): Text #333333 auf Weiß, Rot #e60005 für Überschriften,
 * Dunkelblau #002d55 und Blau #2276d0 für Knöpfe (Verlauf von links oben nach rechts unten), Links in Blau ohne Unterstreichung,
 * Knöpfe als Pille (24 px), Eingabefelder 1,5 px #cbcbcb mit 15 px Rundung, Grundschrift 20 px bei Zeilenhöhe 1,5,
 * Schrift Helvetica Neue in allen Ebenen (auch Überschriften, fett). Kein Markenhandbuch, Messwerte der Website.
 * Helvetica Neue wird vom Gerät genommen, wo sie vorhanden ist (Apple), sonst Arimo (metrikgleich zu Arial, der vom DRK
 * vorgesehenen Ersatzschrift, OFL, lokal gehostet).
 * Zeichen: nur die Originaldatei des roten Kreuzes (Logo-Paket, freigestellt auf Weiß), nicht umrandet, nicht eingefärbt,
 * mit freier Fläche ringsum (mindestens eine Balkenbreite). Kein Nachbau. Daneben, durch einen Strich getrennt, der Absender als Text.
 */
@font-face { font-family: "DRKText"; src: local("Helvetica Neue"), local("HelveticaNeue"), url("fonts/arimo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DRKBold"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("fonts/arimo-latin-700-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #FFFFFF;
  --ink: #333333;
  --primary: #002D55;
  --primary-dark: #00203D;
  --on-primary: #FFFFFF;
  --blue: #E60005;        /* DRK-Rot als Linie und Fläche */
  --sand: #B4C3D7;
  --white: #FFFFFF;
  --muted: #666666;       /* 5,7:1 auf Weiß */
  --line: #CBCBCB;
  --blue-soft: #EBF5FF;
  --error: #A4262C;
  --error-soft: #FBE9E9;
  --head: "DRKBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --headline: "DRKBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "DRKText", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bold: "DRKBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r: 15px;
  --head-color: #E60005;  /* 4,8:1 auf Weiß */
  --top-bg: #FFFFFF; --top-fg: #002D55; --brand-color: #E60005; --brand-sub: #002D55;
  --top-border: 4px solid #E60005; --top-line: rgba(0, 0, 0, .14);
  --on-primary-soft: #FFFFFF;
  --testbar-bg: #EBF5FF; --testbar-fg: #002D55;
  --field-border: #CBCBCB;
  --link: #2276D0;        /* 4,6:1 auf Weiß */
  --logo-h: 52px; --logo-h-mobile: 44px;
}
body { font-size: 1.125rem; line-height: 1.5; }
@media (min-width: 700px) { body { font-size: 1.25rem; } .lead { font-size: 1.25rem; } }
a { color: var(--link); }
.top__link, .brand, .foot a, .btn, .btn--ghost, .day__head a, .oday__head a { text-decoration: none; }
.top__link { text-transform: none; letter-spacing: .01em; font-size: 1rem; }
.card, .day, .oday, .msg, .empty, .legend { border: 1.5px solid var(--line); box-shadow: none; border-radius: 15px; }
input[type=text], input[type=email], input:not([type]) { border: 1.5px solid #CBCBCB; border-radius: 15px; color: #333333; }
input[type=text]:focus, input[type=email]:focus, input:not([type]):focus { border-color: #2276D0; }
.btn { background: linear-gradient(to bottom right, #002D55, #2276D0); border: 0; border-radius: 24px; padding: 14px 26px; }
.btn:hover { background: linear-gradient(to bottom right, #00203D, #1B63B0); }
.btn--ghost { background: transparent; color: #002D55; border: 1.5px solid #002D55; }
.btn--ghost:hover { background: #EBF5FF; }
.btn--warn { background: #A4262C; }
.btn--warn:hover { background: #861E23; }
.opt__box { border-radius: 6px; }
.tag, .codes { border-radius: 999px; }
.day__head, .oday__head { border-radius: 13px 13px 0 0; }
.testbar { border-bottom: 1px solid var(--line); }
.foot { background: linear-gradient(to right bottom, #A51E0F, #E60005); color: #FFFFFF; border-top: 0; }
.foot a { color: #FFFFFF; font-family: "DRKBold", "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.field > label, .field > legend { font-size: .875rem; }