/* ERZEUGT, NICHT VON HAND AENDERN. Quelle: tokens.json (mitte), warm/mitte.css, gebaut mit build.mjs. Version 0.1.0. Nach stadttauben.css und stadttauben-warm.css laden, <html class="thema-warm thema-mitte"> setzen. */
:root.thema-warm.thema-mitte {
  --farbe-bg: #F7F6F4;
  --farbe-hell: #FAF9F8;
  --farbe-linie: #E6E3DF;
  --farbe-rand-steuerelement: #86817B;
  --farbe-platzhalter: #66615B;
  --farbe-text: #1E1D1C;
  --farbe-text-gedaempft: #55514C;
  --farbe-neutral-bg: #EDEBE8;
  --farbe-neutral-text: #45413D;
  --farbe-info-bg: #E1EFFA;
  --farbe-info-rand: #BEE3F8;
  --farbe-akzent-bg: #FFF1CF;
  --farbe-akzent-rand: #E6C679;
  --farbe-bereich-notfall: #AD5638;
  --farbe-bereich-notfall-bg: #FBF0EB;
  --farbe-bereich-notfall-text: #8A3615;
  --farbe-bereich-tauben: #5A8A6A;
  --farbe-bereich-tauben-bg: #EEF4F0;
  --farbe-bereich-tauben-text: #2B5A3B;
  --farbe-bereich-paten: #A87A1E;
  --farbe-bereich-paten-bg: #FBF4E3;
  --farbe-bereich-paten-text: #6E4700;
  --farbe-bereich-mitglieder: #3A78B0;
  --farbe-bereich-mitglieder-bg: #EBF2F9;
  --farbe-bereich-mitglieder-text: #124A78;
  --farbe-bereich-medizin: #8A5A7C;
  --farbe-bereich-medizin-bg: #F5EEF3;
  --farbe-bereich-medizin-text: #68305A;
  --farbe-bereich-wissen: #2A7F8A;
  --farbe-bereich-wissen-bg: #E9F3F5;
  --farbe-bereich-wissen-text: #0E5560;
  --farbe-bereich-verein: #C45A70;
  --farbe-bereich-verein-bg: #FAEEF0;
  --farbe-bereich-verein-text: #8C2540;
}

/* Variante "dazwischen": gilt nur, wenn <html class="thema-warm thema-mitte"> gesetzt ist. Wird NACH stadttauben-warm.css geladen.
   Leiser als warm: kein Farbstreifen unter der Kopfzeile, Karten ohne farbigen Rand, Portal-Kacheln nur 2 px,
   Gruppenüberschriften in Textfarbe mit kleiner Symbol-Kachel. Gold nur bei Zählern, aktive Zustände wie in der kühlen Variante. */

/* Kopfzeile und Seitenkopf: neutrale Linien statt Bereichsfarbe */
.thema-warm.thema-mitte .app__kopf,
.thema-warm.thema-mitte .kopfzeile { border-block-end: 0; }
.thema-warm.thema-mitte .page__header,
.thema-warm.thema-mitte .pageheader { border-block-end: 1px solid var(--farbe-linie); }

/* Karten: kein farbiger Rand oben, ein weicher Schatten */
.thema-warm.thema-mitte .karte,
.thema-warm.thema-mitte .card {
  border-block-start: 1px solid var(--farbe-linie);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--farbe-text) 6%, transparent);
}
.thema-warm.thema-mitte .karte__titel { color: var(--farbe-marke); }
.thema-warm.thema-mitte .kachel { border-block-start-color: var(--farbe-linie); }

/* Symbol-Kachel: etwas kleiner, sehr helle Tönung */
.thema-warm.thema-mitte .symbol-kachel,
.thema-warm.thema-mitte .tile__icon { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-karte); }
.thema-warm.thema-mitte .symbol-kachel .symbol,
.thema-warm.thema-mitte .tile__icon .symbol { inline-size: 1.5rem; block-size: 1.5rem; }

/* Portal: Gruppenüberschrift in Textfarbe, kleine Symbol-Kachel, dünne neutrale Linie */
.thema-warm.thema-mitte .group__header { border-block-end: 1px solid var(--farbe-linie); }
.thema-warm.thema-mitte .group__title { color: var(--farbe-text); }
.thema-warm.thema-mitte .group__header::before {
  content: "";
  order: -1;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-karte);
  background: var(--b-bg);
}
.thema-warm.thema-mitte .group__header > .symbol {
  order: -1;
  color: var(--b);
  margin-inline: -2.1rem .25rem;
}

/* Portal-Kacheln: Randstreifen nur 2 px, Schatten leiser */
.thema-warm.thema-mitte .tile { box-shadow: 0 1px 2px color-mix(in srgb, var(--farbe-text) 6%, transparent); }
.thema-warm.thema-mitte .tile::before { height: 2px; }
.thema-warm.thema-mitte .tile:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--farbe-text) 10%, transparent); }

/* Gold nur bei Zählern: einfache Badges wieder wie in der kühlen Variante */
.thema-warm.thema-mitte .badge:not([class*="badge--"]) { background: var(--farbe-info-bg); color: var(--farbe-info); box-shadow: none; }

/* Zustände: Titel in Textfarbe, Taube bleibt in der Bereichsfarbe */
.thema-warm.thema-mitte .zustand__titel { color: var(--farbe-text); }

/* Systemseiten: ruhige Karte */
.thema-warm.thema-mitte .systemseite__karte,
.thema-warm.thema-mitte .systemseite--ok .systemseite__karte {
  border-block-start: 1px solid var(--farbe-linie);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--farbe-text) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--farbe-text) 4%, transparent);
}
.thema-warm.thema-mitte .systemseite__symbol { background: var(--farbe-info-bg); color: var(--farbe-marke); }
.thema-warm.thema-mitte .systemseite--fehler .systemseite__symbol { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }
.thema-warm.thema-mitte .systemseite--warn .systemseite__symbol { background: var(--farbe-warn-bg); color: var(--farbe-warn); }
.thema-warm.thema-mitte .systemseite__symbol:has(.symbol--suche),
.thema-warm.thema-mitte .systemseite__symbol:has(.symbol--offline),
.thema-warm.thema-mitte .systemseite__symbol:has(.symbol--werkzeug) { background: var(--farbe-bereich-wissen-bg); color: var(--farbe-bereich-wissen-text); }