/*
 * Gemeinsame Zuordnung der Theme-Werte auf die Bauteile. Gilt für alle Auftritte außer der Schule (theme heg).
 * Ein Theme setzt nur Variablen (und bei Bedarf Schriften):
 *   --ink          Textfarbe             --primary      Fläche für Balken, Knöpfe, Kopf (Weiß oder Hell darauf)
 *   --primary-dark Hover                 --on-primary   Schrift auf --primary
 *   --blue         Akzent als Linie/Fläche, nie als Text auf Hell
 *   --head-color   Farbe der Überschriften (Standard --ink)
 * Optional: --top-bg --top-fg --top-line --top-border --brand-color --brand-sub --on-primary-soft
 *           --testbar-bg --testbar-fg --field-border --card-border --btn-bg
 */
h1, h2, h3 { color: var(--head-color, var(--ink)); }
.errors h2 { color: var(--error); }
.week__title { color: var(--ink); }

.top { background: var(--top-bg, var(--primary, var(--ink))); color: var(--top-fg, var(--on-primary, var(--paper))); border-bottom: var(--top-border, 0 solid transparent); }
.brand, .brand__name { color: var(--brand-color, var(--top-fg, var(--on-primary, var(--paper)))); }
.brand__sub { color: var(--brand-sub, var(--blue)); }
.top__link { color: var(--top-fg, var(--on-primary, var(--paper))); border-bottom-color: var(--blue); }

.day__head, .oday__head { background: var(--primary, var(--ink)); color: var(--on-primary, var(--paper)); }
.day__date small { color: var(--on-primary-soft, var(--blue)); }
.day--closed .day__head { background: var(--muted); color: #FFFFFF; }
.day--closed .day__date small { color: #FFFFFF; }

.step span, .msg__icon { background: var(--primary, var(--ink)); color: var(--on-primary, var(--paper)); }
.msg--warn .msg__icon { background: var(--sand); color: var(--ink); }

.btn { background: var(--btn-bg, var(--primary, var(--ink))); border-color: var(--primary, var(--ink)); color: var(--on-primary, #FFFFFF); }
.btn:hover { background: var(--primary-dark, #222A30); border-color: var(--primary-dark, #222A30); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--primary, var(--ink)); }
.btn--ghost:hover { background: var(--blue-soft); }
.btn--warn { background: var(--error); border-color: var(--error); color: #FFFFFF; }
.btn--warn:hover { background: #861E23; border-color: #861E23; }

.opt__box { border-color: var(--ink); }
.opt input:checked ~ .opt__box { background: var(--primary, var(--ink)); border-color: var(--primary, var(--ink)); }
.opt:has(input:checked) { color: var(--ink); }
.radio:has(input:checked) { border-color: var(--primary, var(--ink)); }
.radio input, .check input { accent-color: var(--primary, var(--ink)); }
:focus-visible { outline-color: var(--primary, var(--ink)); }
input[type=text], input[type=email], input:not([type]) { border-color: var(--field-border, var(--ink)); }

.testbar { background: var(--testbar-bg, var(--blue)); color: var(--testbar-fg, var(--ink)); }
.submitbar { border-top-color: var(--blue); }
.notice { border-left-color: var(--blue); }

@media (max-width: 699px) {
  .top__nav { border-top-color: var(--top-line, rgba(247, 246, 243, .18)); }
  .top__link + .top__link { border-left-color: var(--top-line, rgba(247, 246, 243, .18)); }
}

/* Kopf mit Zeichen oder Logo als Originaldatei. Daneben, durch einen Strich getrennt, der Absender (Name und Zusatz). */
.brand--logo { flex-direction: row; align-items: center; gap: 18px; padding: 14px 0; }
.brand__logo { display: block; height: var(--logo-h, 72px); width: auto; }
.brand--logo > .brand__sub { margin: 0; padding-left: 18px; border-left: 1px solid var(--line); line-height: 1.3; }
.brand__text { display: flex; flex-direction: column; padding-left: 18px; border-left: 1px solid var(--line); line-height: 1.25; }
.brand__text .brand__sub { margin-top: 3px; }
@media (max-width: 699px) {
  .brand--logo { gap: 12px; padding: 10px 0; }
  .brand__logo { height: var(--logo-h-mobile, 56px); }
  .brand--logo > .brand__sub { padding-left: 12px; font-size: .68rem; letter-spacing: .18em; }
  .brand__text { padding-left: 12px; }
}