/* =========================================================
   Baukasten — CSS zu den Macros in
     templates/m3/components/_macros.html.twig        (Formulare)
     templates/m3/components/_data_macros.html.twig   (Daten)
     templates/m3/components/_feedback_macros.html.twig (Rückmeldungen)

   Alle Werte kommen aus m3.css und m3-tokens.css.
   Kein Hex, keine krummen Pixelabstände, keine festen Schriftgrößen
   ohne --font-scale.
   ========================================================= */

/* =========================================================
   FORMULARE
   Beschriftung über dem Feld, Hilfetext darunter.
   ========================================================= */
.m3-feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m3-feld__label {
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  line-height: 1.3;
}
.m3-feld__pflicht {
  color: var(--md-sys-color-error);
  font-weight: 800;
}
.m3-feld__rahmen {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: 0 var(--sp-3);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.m3-feld__rahmen:focus-within { border-color: var(--md-sys-color-primary); }
.m3-feld__rahmen--hoch { align-items: flex-start; padding-block: var(--sp-2); }
.m3-feld__eingabe {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: inherit;
  font: inherit;
  font-size: calc(15px * var(--font-scale));
  padding: 0;
}
.m3-feld__eingabe::placeholder { color: var(--md-sys-color-on-surface-variant); }
textarea.m3-feld__eingabe { resize: vertical; min-height: calc(72px * var(--font-scale)); }
.m3-feld__auswahl { appearance: none; cursor: pointer; }
.m3-feld__icon,
.m3-feld__pfeil { color: var(--md-sys-color-on-surface-variant); flex: none; font-size: calc(20px * var(--font-scale)); }
.m3-feld__pfeil { pointer-events: none; }
.m3-feld__hinweis {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}
.m3-feld--fehler .m3-feld__rahmen { border-color: var(--md-sys-color-error); }
.m3-feld--fehler .m3-feld__hinweis { color: var(--md-sys-color-error); font-weight: 650; }
.m3-feld--aus .m3-feld__rahmen {
  opacity: .55;
  background: var(--md-sys-color-surface-container);
  border-style: dashed;
}

/* ---- Zähler mit Plus und Minus ---- */
.m3-zaehler { display: flex; align-items: center; gap: var(--sp-3); }
.m3-zaehler__knopf {
  width: var(--target-min);
  height: var(--target-min);
  flex: none;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}
.m3-zaehler__knopf:disabled { opacity: .4; cursor: default; }
.m3-zaehler__wert {
  font-size: calc(20px * var(--font-scale));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
  text-align: center;
}

/* ---- Auswahlzeile ---- */
.m3-wahl {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--target-min);
  padding: var(--sp-2) var(--sp-3);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}
.m3-wahl__eingabe {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.m3-wahl__marke {
  width: 24px; height: 24px;
  flex: none;
  border: 2px solid var(--md-sys-color-outline);
  display: grid;
  place-items: center;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.m3-wahl__marke--check { border-radius: 6px; }
.m3-wahl__marke--radio { border-radius: 50%; }
.m3-wahl__marke--check::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--md-sys-color-on-primary);
  border-bottom: 2.5px solid var(--md-sys-color-on-primary);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.m3-wahl__text { flex: 1; font-size: calc(14.5px * var(--font-scale)); font-weight: 650; line-height: 1.3; }
.m3-wahl__note {
  display: block;
  font-weight: 500;
  font-size: calc(12px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}
.m3-wahl__trailing {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.m3-wahl:has(.m3-wahl__eingabe:checked) {
  border: 2px solid var(--md-sys-color-primary);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: calc(var(--sp-2) - 1px) calc(var(--sp-3) - 1px);
}
.m3-wahl:has(.m3-wahl__eingabe:checked) .m3-wahl__note { color: inherit; opacity: .8; }
.m3-wahl__eingabe:checked ~ .m3-wahl__marke--check {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-wahl__eingabe:checked ~ .m3-wahl__marke--check::after { opacity: 1; }
.m3-wahl__eingabe:checked ~ .m3-wahl__marke--radio {
  border-color: var(--md-sys-color-primary);
  border-width: 7px;
}
.m3-wahl__eingabe:focus-visible ~ .m3-wahl__marke {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.m3-wahl--aus { opacity: .55; cursor: default; }

/* ---- Schaltzeile ---- */
.m3-schaltzeile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--target-min);
  padding: var(--sp-2) 0;
  cursor: pointer;
}
.m3-schaltzeile__text { flex: 1; font-size: calc(14.5px * var(--font-scale)); font-weight: 650; line-height: 1.3; }
.m3-schaltzeile__eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m3-schaltzeile__track {
  width: 52px; height: 30px;
  flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline-variant);
  position: relative;
  transition: background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.m3-schaltzeile__track::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--md-sys-color-surface-container-lowest);
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.m3-schaltzeile__eingabe:checked ~ .m3-schaltzeile__track { background: var(--md-sys-color-tertiary); }
.m3-schaltzeile__eingabe:checked ~ .m3-schaltzeile__track::after { transform: translateX(22px); }
.m3-schaltzeile__eingabe:focus-visible ~ .m3-schaltzeile__track {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.m3-schaltzeile--aus { opacity: .55; cursor: default; }

/* =========================================================
   DATEN
   ========================================================= */
.wx-kacheln {
  display: grid;
  grid-template-columns: repeat(var(--wx-kacheln-spalten, 2), minmax(0, 1fr));
  gap: var(--sp-3);
}
.wx-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: inherit;
  text-decoration: none;
}
.wx-kachel--breit { grid-column: 1 / -1; }
a.wx-kachel:hover { border-color: var(--md-sys-color-primary); }
.wx-kachel__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(11px * var(--font-scale));
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.25;
}
.wx-kachel__label .material-symbols-outlined { font-size: calc(16px * var(--font-scale)); }
.wx-kachel__wert {
  font-size: calc(22px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wx-kachel__einheit {
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-left: 2px;
}
.wx-kachel__note {
  font-size: calc(12px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.35;
}
.wx-kachel--warn-2 { box-shadow: inset 4px 0 0 var(--wx-warn-2-fg); }
.wx-kachel--warn-3 { box-shadow: inset 4px 0 0 var(--wx-warn-3-fg); }
.wx-kachel--warn-4 { box-shadow: inset 4px 0 0 var(--wx-warn-4-fg); }
.wx-kachel--warn-5 { box-shadow: inset 4px 0 0 var(--wx-warn-5-fg); }

/* ---- Wertezeilen ---- */
.wx-kv { display: flex; flex-direction: column; }
.wx-kv__zeile {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
  min-height: 40px;
}
.wx-kv__zeile:last-child { border-bottom: 0; }
.wx-kv__k {
  flex: none;
  min-width: 8.5em;
  font-size: calc(13px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
}
.wx-kv__v {
  font-size: calc(14.5px * var(--font-scale));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.wx-kv__v--stark { font-weight: 800; }
.wx-kv__trailing { margin-left: auto; }

/* ---- Abschnitts-Kopf ---- */
.wx-kopf { display: flex; flex-direction: column; gap: var(--sp-1); }
.wx-kopf__eyebrow {
  font-size: calc(11px * var(--font-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-sys-color-tertiary);
}
.wx-kopf__titel {
  margin: 0;
  font-family: var(--md-ref-typeface-brand);
  font-size: calc(21px * var(--font-scale));
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.wx-kopf__note {
  margin: 0;
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}

/* ---- Leerer Zustand ---- */
.wx-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border: var(--hairline) dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}
.wx-leer__icon { font-size: calc(40px * var(--font-scale)); color: var(--md-sys-color-tertiary); }
.wx-leer__titel { font-size: calc(15px * var(--font-scale)); font-weight: 700; }
.wx-leer__note {
  margin: 0;
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  max-width: 34ch;
  line-height: 1.45;
}

/* ---- Ladeplatzhalter ---- */
.wx-laedt { display: flex; flex-direction: column; gap: var(--sp-2); }
.wx-laedt__zeile {
  display: block;
  border-radius: var(--md-sys-shape-corner-small);
  background: linear-gradient(90deg,
    var(--md-sys-color-surface-container) 25%,
    var(--md-sys-color-surface-container-high) 37%,
    var(--md-sys-color-surface-container) 63%);
  background-size: 400% 100%;
  animation: wx-laedt 1.3s ease infinite;
}
@keyframes wx-laedt {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Datenzeile für Zeitreihen ---- */
.wx-zeile {
  display: grid;
  grid-template-columns: 5.4em 26px repeat(auto-fit, minmax(0, 1fr));
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 46px;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.wx-zeile:last-child { border-bottom: 0; }
.wx-zeile__lead {
  font-size: calc(13px * var(--font-scale));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.wx-zeile__icon { display: grid; place-items: center; }
.wx-zeile__icon svg { width: 24px; height: 24px; }
.wx-zeile__zelle {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wx-zeile__einheit {
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  margin-left: 2px;
}
.wx-zeile--jetzt {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: inset 3px 0 0 var(--md-sys-color-primary);
}
.wx-zeile--jetzt .wx-zeile__einheit { color: inherit; }
.wx-zeile--leise { color: var(--md-sys-color-on-surface-variant); }

/* =========================================================
   RÜCKMELDUNGEN
   ========================================================= */
.wx-hinweis {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--md-sys-shape-corner-medium);
  border-left: 5px solid var(--wx-hinweis-farbe);
  background: color-mix(in srgb, var(--wx-hinweis-farbe) 12%, var(--md-sys-color-surface-container-lowest));
}
.wx-hinweis--info   { --wx-hinweis-farbe: var(--md-sys-color-primary); }
.wx-hinweis--ok     { --wx-hinweis-farbe: var(--md-sys-color-tertiary); }
.wx-hinweis--warn   { --wx-hinweis-farbe: var(--wx-warn-3-fg); }
.wx-hinweis--fehler { --wx-hinweis-farbe: var(--md-sys-color-error); }
.wx-hinweis__icon { color: var(--wx-hinweis-farbe); flex: none; font-size: calc(22px * var(--font-scale)); }
.wx-hinweis__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wx-hinweis__titel { font-size: calc(14px * var(--font-scale)); font-weight: 700; line-height: 1.3; }
.wx-hinweis__body {
  margin: 0;
  font-size: calc(12.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.45;
}
.wx-hinweis__aktion {
  align-self: flex-start;
  margin-top: var(--sp-1);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--wx-hinweis-farbe);
}

/* ---- Warnkarte ---- */
.wx-warnkarte {
  border-radius: var(--md-sys-shape-corner-large);
  overflow: hidden;
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-left: 6px solid var(--wx-stufe-farbe);
  background: var(--md-sys-color-surface-container-lowest);
}
.wx-warnkarte--1 { --wx-stufe-farbe: var(--wx-warn-1-fg); --wx-stufe-on: var(--wx-warn-1-on); }
.wx-warnkarte--2 { --wx-stufe-farbe: var(--wx-warn-2-fg); --wx-stufe-on: var(--wx-warn-2-on); }
.wx-warnkarte--3 { --wx-stufe-farbe: var(--wx-warn-3-fg); --wx-stufe-on: var(--wx-warn-3-on); }
.wx-warnkarte--4 { --wx-stufe-farbe: var(--wx-warn-4-fg); --wx-stufe-on: var(--wx-warn-4-on); }
.wx-warnkarte--5 { --wx-stufe-farbe: var(--wx-warn-5-fg); --wx-stufe-on: var(--wx-warn-5-on); }
.wx-warnkarte__kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: color-mix(in srgb, var(--wx-stufe-farbe) 14%, var(--md-sys-color-surface-container-lowest));
}
.wx-warnkarte__icon {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wx-stufe-farbe);
  color: var(--wx-stufe-on);
}
.wx-warnkarte__titelblock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wx-warnkarte__titel {
  font-size: calc(15.5px * var(--font-scale));
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.wx-warnkarte__stufe {
  align-self: flex-start;
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--wx-stufe-farbe);
  color: var(--wx-stufe-on);
}
.wx-warnkarte__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.wx-warnkarte__zeit {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: calc(13.5px * var(--font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wx-warnkarte__rest {
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}
.wx-warnkarte__text {
  margin: 0;
  font-size: calc(13px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}
.wx-warnkarte__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wx-marke {
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
  padding: 5px 10px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* ---- Kurze Warnzeile ---- */
.wx-warnzeile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--md-sys-shape-corner-medium);
  border-left: 5px solid var(--wx-stufe-farbe);
  background: color-mix(in srgb, var(--wx-stufe-farbe) 12%, var(--md-sys-color-surface-container-lowest));
}
.wx-warnzeile--1 { --wx-stufe-farbe: var(--wx-warn-1-fg); --wx-stufe-on: var(--wx-warn-1-on); }
.wx-warnzeile--2 { --wx-stufe-farbe: var(--wx-warn-2-fg); --wx-stufe-on: var(--wx-warn-2-on); }
.wx-warnzeile--3 { --wx-stufe-farbe: var(--wx-warn-3-fg); --wx-stufe-on: var(--wx-warn-3-on); }
.wx-warnzeile--4 { --wx-stufe-farbe: var(--wx-warn-4-fg); --wx-stufe-on: var(--wx-warn-4-on); }
.wx-warnzeile--5 { --wx-stufe-farbe: var(--wx-warn-5-fg); --wx-stufe-on: var(--wx-warn-5-on); }
.wx-warnzeile__stufe {
  flex: none;
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--wx-stufe-farbe);
  color: var(--wx-stufe-on);
}
.wx-warnzeile__text { flex: 1; font-size: calc(13.5px * var(--font-scale)); font-weight: 650; line-height: 1.3; }
.wx-warnzeile__note {
  font-size: calc(11.5px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---- Plakette ---- */
.wx-plakette {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: calc(11.5px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.wx-plakette .material-symbols-outlined { font-size: calc(15px * var(--font-scale)); }
.wx-plakette--neutral { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.wx-plakette--ok      { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.wx-plakette--info    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.wx-plakette--warn    { background: var(--wx-warn-3-fg); color: var(--wx-warn-3-on); }
.wx-plakette--aus     { background: transparent; color: var(--md-sys-color-on-surface-variant); box-shadow: inset 0 0 0 1.5px var(--md-sys-color-outline-variant); }

/* ---- Kurzmeldung ---- */
.wx-meldung {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font-size: calc(14px * var(--font-scale));
  box-shadow: var(--md-sys-elevation-level3);
}
.wx-meldung__text { flex: 1; }
.wx-meldung__aktion {
  background: none;
  border: 0;
  color: var(--md-sys-color-inverse-primary);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  min-height: 40px;
  padding: 0 var(--sp-2);
}

/* ---- Rückfrage ---- */
.wx-dialog {
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  padding: var(--sp-5);
  max-width: 34rem;
  width: calc(100% - 2 * var(--sp-4));
  box-shadow: var(--md-sys-elevation-level5);
}
.wx-dialog::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent); }
.wx-dialog__titel {
  margin: 0 0 var(--sp-2);
  font-family: var(--md-ref-typeface-brand);
  font-size: calc(20px * var(--font-scale));
  font-weight: 800;
  letter-spacing: -.02em;
}
.wx-dialog__text {
  margin: 0;
  font-size: calc(14px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}
.wx-dialog__fuss {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.wx-btn--gefahr {
  color: var(--md-sys-color-error);
  border-color: var(--md-sys-color-error);
}

/* =========================================================
   Ab Tablet mehr Platz nutzen
   ========================================================= */
@media (min-width: 768px) {
  .wx-kacheln { grid-template-columns: repeat(calc(var(--wx-kacheln-spalten, 2) * 2), minmax(0, 1fr)); }
  .wx-kopf__titel { font-size: calc(25px * var(--font-scale)); }
}

/* =========================================================
   Kopfzeile: Ortswechsler und Anmelde-Knopf
   ========================================================= */
.m3-ortwahl { position: relative; flex: 1; min-width: 0; }
.m3-ortwahl__knopf {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--target-min);
  padding-right: var(--sp-2);
  font-family: var(--md-ref-typeface-brand);
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--md-sys-color-on-surface);
}
.m3-ortwahl__knopf::-webkit-details-marker { display: none; }
.m3-ortwahl__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m3-ortwahl__pfeil {
  flex: none;
  font-size: calc(22px * var(--font-scale));
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.m3-ortwahl[open] .m3-ortwahl__pfeil { transform: rotate(180deg); }
.m3-ortwahl__liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: calc(-1 * var(--sp-2));
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2 * var(--sp-4)));
  background: var(--md-sys-color-surface-container-lowest);
  border: var(--hairline) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level3);
  overflow: hidden;
}
.m3-ortwahl__eintrag {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--target-min);
  padding: var(--sp-2) var(--sp-3);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: calc(14.5px * var(--font-scale));
  font-weight: 650;
  border-bottom: var(--hairline) solid var(--md-sys-color-outline-variant);
}
.m3-ortwahl__eintrag:last-child { border-bottom: 0; }
.m3-ortwahl__eintrag:hover { background: var(--md-sys-color-surface-container); }
.m3-ortwahl__eintrag[aria-current="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.m3-ortwahl__eintrag--neu { color: var(--md-sys-color-tertiary); font-weight: 750; }

.m3-top-app-bar__login {
  min-height: calc(var(--target-min) - 8px);
  padding-inline: var(--sp-4);
  white-space: nowrap;
}