/* firetv-Bildschirm. Masse an 1920×1080, skaliert über --u. Kein Inline-Style. */

:root {
  --u: calc(100vw / 1920);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 400;
}

#app {
  width: 100%;
  height: 100%;
}

button, input { font: inherit; }

[hidden] { display: none !important; }

/* —— Standby —— */

.standby {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.standby-pad {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(48 * var(--u)) calc(64 * var(--u)) calc(28 * var(--u));
}

.standby-brand {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
}

.logo {
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--primary);
  display: grid;
  place-items: center;
  flex: none;
}

.logo img {
  width: 68%;
  height: 68%;
  display: block;
}

.org {
  font-size: calc(34 * var(--u));
  font-weight: 600;
  line-height: 1.15;
}

.place {
  margin-top: calc(4 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 500;
  color: var(--text-muted);
}

.standby-clock {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.standby-clock .clock {
  font-size: calc(360 * var(--u));
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.date {
  margin-top: calc(12 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 500;
  color: var(--text-muted);
}

.standby-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(24 * var(--u));
}

.status {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 500;
}

.dot {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: var(--confirm);
  flex: none;
}

.status.is-offline { color: var(--danger); }
.status.is-offline .dot { background: var(--danger); }

.hint {
  font-size: calc(22 * var(--u));
  font-weight: 500;
  color: var(--text-muted);
  text-align: right;
}

.accent-bar {
  height: calc(8 * var(--u));
  background: var(--primary);
  flex: none;
}

/* —— Alarm / Übung / Info —— */

.frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mast {
  height: calc(160 * var(--u));
  display: flex;
  align-items: stretch;
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}

.mast-stripe {
  width: 16px;
  background: var(--scene);
  flex: none;
}

.mast-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
  padding: 0 calc(36 * var(--u)) 0 calc(28 * var(--u));
}

.mast-left { min-width: 0; }

.mast-row {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  min-width: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  background: var(--scene);
  color: #fff;
  font-size: calc(26 * var(--u));
  font-weight: 600;
  letter-spacing: 0.04em;
  flex: none;
}

.code {
  font-size: calc(30 * var(--u));
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sample {
  display: inline-flex;
  align-items: center;
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  flex: none;
}

.keyword {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(60 * var(--u));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mast-right {
  display: flex;
  align-items: stretch;
  gap: calc(20 * var(--u));
  flex: none;
}

.clock-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kicker {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.big {
  font-size: calc(76 * var(--u));
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.since {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: calc(360 * var(--u));
  padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));
  background: var(--primary-muted);
  border: 2px solid var(--scene);
  border-radius: var(--radius-btn);
}

.since-time {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(16 * var(--u));
}

.unit {
  font-size: calc(18 * var(--u));
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: calc(6 * var(--u));
}

.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: calc(16 * var(--u));
  padding: calc(24 * var(--u));
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr));
}

.tile {
  background: var(--surface);
  border-radius: var(--radius-chrome);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tile-body {
  height: 100%;
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.tile-title {
  margin: 0;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tile-meta,
.tile-text {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-muted);
}

.tile-meta.tile-coming {
  color: var(--muted);
  font-weight: 500;
}

.grid-cell {
  border: 1px dashed rgba(59, 130, 246, 0.45);
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

body.debug-grid .tile {
  outline: 1px dashed rgba(59, 130, 246, 0.7);
  outline-offset: -1px;
}

.offline-chip {
  position: absolute;
  right: calc(28 * var(--u));
  bottom: calc(16 * var(--u));
  color: var(--danger);
  font-size: calc(20 * var(--u));
  font-weight: 600;
}

/* Rasterklassen: Position und Spalten/Zeilen ohne Inline-Style. */

.x-0 { grid-column-start: 1; }
.x-1 { grid-column-start: 2; }
.x-2 { grid-column-start: 3; }
.x-3 { grid-column-start: 4; }
.x-4 { grid-column-start: 5; }
.x-5 { grid-column-start: 6; }
.x-6 { grid-column-start: 7; }
.x-7 { grid-column-start: 8; }
.x-8 { grid-column-start: 9; }
.x-9 { grid-column-start: 10; }
.x-10 { grid-column-start: 11; }
.x-11 { grid-column-start: 12; }
.x-12 { grid-column-start: 13; }
.x-13 { grid-column-start: 14; }
.x-14 { grid-column-start: 15; }
.x-15 { grid-column-start: 16; }
.x-16 { grid-column-start: 17; }
.x-17 { grid-column-start: 18; }
.x-18 { grid-column-start: 19; }
.x-19 { grid-column-start: 20; }
.x-20 { grid-column-start: 21; }
.x-21 { grid-column-start: 22; }
.x-22 { grid-column-start: 23; }
.x-23 { grid-column-start: 24; }
.y-0 { grid-row-start: 1; }
.y-1 { grid-row-start: 2; }
.y-2 { grid-row-start: 3; }
.y-3 { grid-row-start: 4; }
.y-4 { grid-row-start: 5; }
.y-5 { grid-row-start: 6; }
.y-6 { grid-row-start: 7; }
.y-7 { grid-row-start: 8; }
.y-8 { grid-row-start: 9; }
.y-9 { grid-row-start: 10; }
.y-10 { grid-row-start: 11; }
.y-11 { grid-row-start: 12; }
.w-1 { grid-column-end: span 1; }
.w-2 { grid-column-end: span 2; }
.w-3 { grid-column-end: span 3; }
.w-4 { grid-column-end: span 4; }
.w-5 { grid-column-end: span 5; }
.w-6 { grid-column-end: span 6; }
.w-7 { grid-column-end: span 7; }
.w-8 { grid-column-end: span 8; }
.w-9 { grid-column-end: span 9; }
.w-10 { grid-column-end: span 10; }
.w-11 { grid-column-end: span 11; }
.w-12 { grid-column-end: span 12; }
.w-13 { grid-column-end: span 13; }
.w-14 { grid-column-end: span 14; }
.w-15 { grid-column-end: span 15; }
.w-16 { grid-column-end: span 16; }
.w-17 { grid-column-end: span 17; }
.w-18 { grid-column-end: span 18; }
.w-19 { grid-column-end: span 19; }
.w-20 { grid-column-end: span 20; }
.w-21 { grid-column-end: span 21; }
.w-22 { grid-column-end: span 22; }
.w-23 { grid-column-end: span 23; }
.w-24 { grid-column-end: span 24; }
.h-1 { grid-row-end: span 1; }
.h-2 { grid-row-end: span 2; }
.h-3 { grid-row-end: span 3; }
.h-4 { grid-row-end: span 4; }
.h-5 { grid-row-end: span 5; }
.h-6 { grid-row-end: span 6; }
.h-7 { grid-row-end: span 7; }
.h-8 { grid-row-end: span 8; }
.h-9 { grid-row-end: span 9; }
.h-10 { grid-row-end: span 10; }
.h-11 { grid-row-end: span 11; }
.h-12 { grid-row-end: span 12; }
.cols-4 { --cols: 4; }
.cols-5 { --cols: 5; }
.cols-6 { --cols: 6; }
.cols-7 { --cols: 7; }
.cols-8 { --cols: 8; }
.cols-9 { --cols: 9; }
.cols-10 { --cols: 10; }
.cols-11 { --cols: 11; }
.cols-12 { --cols: 12; }
.cols-13 { --cols: 13; }
.cols-14 { --cols: 14; }
.cols-15 { --cols: 15; }
.cols-16 { --cols: 16; }
.cols-17 { --cols: 17; }
.cols-18 { --cols: 18; }
.cols-19 { --cols: 19; }
.cols-20 { --cols: 20; }
.cols-21 { --cols: 21; }
.cols-22 { --cols: 22; }
.cols-23 { --cols: 23; }
.cols-24 { --cols: 24; }
.rows-3 { --rows: 3; }
.rows-4 { --rows: 4; }
.rows-5 { --rows: 5; }
.rows-6 { --rows: 6; }
.rows-7 { --rows: 7; }
.rows-8 { --rows: 8; }
.rows-9 { --rows: 9; }
.rows-10 { --rows: 10; }
.rows-11 { --rows: 11; }
.rows-12 { --rows: 12; }

/* —— Kopplung (V2, Code-Kästchen wie V3) —— */

.pair {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

.pair-mast {
  height: calc(160 * var(--u));
  display: flex;
  align-items: stretch;
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}

.pair-stripe {
  width: 16px;
  background: var(--primary);
  flex: none;
}

.pair-mast-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
  padding: 0 calc(44 * var(--u)) 0 calc(28 * var(--u));
}

.pair-mast-row {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.pair-badge {
  display: inline-flex;
  align-items: center;
  height: calc(44 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: calc(26 * var(--u));
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  flex: none;
}

.pair-muted {
  color: var(--text-muted);
  font-size: calc(30 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.pair-title {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(56 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
}

.pair-clock {
  font-size: calc(88 * var(--u));
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pair-body {
  flex: none;
  display: grid;
  grid-template-columns: calc(1000 * var(--u)) calc(736 * var(--u));
  column-gap: calc(56 * var(--u));
  padding: calc(72 * var(--u)) calc(64 * var(--u)) 0;
  align-items: start;
}

.pair-steps {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}

.pair-step {
  flex: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: calc(196 * var(--u));
  gap: calc(36 * var(--u));
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: calc(18 * var(--u));
  padding: 0 0 0 calc(36 * var(--u));
}

.pair-num {
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  border: calc(3 * var(--u)) solid var(--primary);
  background: var(--primary-muted);
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: calc(56 * var(--u));
  font-weight: 600;
  line-height: 1;
  flex: none;
}

.pair-step-title {
  margin: 0;
  font-size: calc(44 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.pair-step-text {
  margin: calc(8 * var(--u)) 0 0;
  color: var(--text-muted);
  font-size: calc(28 * var(--u));
  font-weight: 500;
  line-height: 1;
}

.pair-card,
.pair-error,
.pair-done {
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: calc(18 * var(--u));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pair-card {
  height: calc(700 * var(--u));
  justify-content: flex-start;
  padding: calc(30 * var(--u)) calc(64 * var(--u)) 0;
  gap: 0;
}

.pair-error,
.pair-done {
  flex: none;
  height: calc(700 * var(--u));
  margin: calc(72 * var(--u)) calc(64 * var(--u)) 0;
  gap: calc(20 * var(--u));
  justify-content: center;
  text-align: center;
}

.pair-qr {
  width: calc(400 * var(--u));
  height: calc(400 * var(--u));
  box-sizing: border-box;
  padding: calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #fff;
  flex: none;
}

.pair-card:has(.pair-alert:not([hidden])) .pair-qr {
  width: calc(300 * var(--u));
  height: calc(300 * var(--u));
}

.pair-qr canvas,
.pair-qr svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.pair-qr-fallback {
  width: calc(368 * var(--u));
  height: calc(368 * var(--u));
  display: grid;
  place-items: center;
  color: #111;
  font-weight: 700;
}

.pair-kicker {
  margin-top: calc(40 * var(--u));
  letter-spacing: 2px;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
}

.pair-chars {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(18 * var(--u));
  gap: calc(8 * var(--u));
}

.pair-char {
  width: calc(64 * var(--u));
  height: calc(92 * var(--u));
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: calc(68 * var(--u));
  line-height: 1;
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

.pair-sep {
  flex: none;
  font-size: 0;
  line-height: 0;
  width: calc(20 * var(--u));
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--text-muted);
  margin: 0 calc(4 * var(--u));
}

.pair-meta {
  margin: calc(22 * var(--u)) 0 0;
  width: calc(608 * var(--u));
  text-align: left;
  color: var(--text-muted);
  font-size: calc(26 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.pair-bar {
  width: calc(608 * var(--u));
  height: calc(10 * var(--u));
  margin-top: calc(14 * var(--u));
  background: var(--surface-2);
  border-radius: calc(5 * var(--u));
  overflow: hidden;
  flex: none;
}

.pair-bar-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
}

.pair-alert {
  margin: calc(24 * var(--u)) 0 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u));
  border: 2px solid var(--primary);
  border-radius: calc(14 * var(--u));
  background: var(--primary-muted);
  color: var(--text);
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1.15;
}

.pair-alert > :first-child {
  font-size: calc(30 * var(--u));
  font-weight: 600;
  line-height: 1.1;
}

.pair-alert[hidden] {
  display: none;
}

.pair-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 0 calc(64 * var(--u)) calc(40 * var(--u));
  color: var(--text-muted);
  font-size: calc(26 * var(--u));
  font-weight: 500;
  line-height: 1;
}

.pair-screen {
  font-size: calc(22 * var(--u));
}

.pair-status {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.pair-dot {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: var(--confirm);
  flex: none;
}

.pair-status.is-offline .pair-dot {
  background: var(--danger);
}

.pair-check {
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--confirm);
  color: #fff;
  font-size: calc(64 * var(--u));
  font-weight: 700;
  line-height: 1;
  flex: none;
}

.pair-done-title,
.pair-error-title {
  margin: 0;
  font-weight: 600;
  line-height: 1;
}

.pair-done-title {
  font-size: calc(56 * var(--u));
}

.pair-error-title {
  font-size: calc(44 * var(--u));
}

.pair-done-where,
.pair-done-next,
.pair-error-text {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
}

.pair-done-where {
  font-size: calc(30 * var(--u));
}

.pair-done-next {
  font-size: calc(26 * var(--u));
}

.pair-error-text {
  font-size: calc(28 * var(--u));
}

.is-dim {
  opacity: 0.38;
}

/* Modul Uhr */

.uhr {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  line-height: 1;
}

.uhr-row {
  display: flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  gap: calc(var(--u) * 10);
}

.uhr-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.uhr-seconds {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}

.uhr-title,
.uhr-date,
.uhr-weekday,
.uhr-kw {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.05;
  font-weight: 600;
}

.uhr-title {
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.uhr-date,
.uhr-kw {
  color: var(--text-muted);
}

.uhr-weekday {
  color: var(--text);
}

.uhr--klein {
  justify-content: center;
  gap: calc(var(--u) * 4);
}

.uhr--klein .uhr-time {
  font-size: calc(var(--u) * min(var(--uhr-w) * 32, var(--uhr-h) * 64));
}

.uhr--klein .uhr-seconds {
  font-size: calc(var(--u) * min(var(--uhr-w) * 12, var(--uhr-h) * 24));
}

.uhr--klein .uhr-date {
  font-size: calc(var(--u) * min(var(--uhr-w) * 11, var(--uhr-h) * 22));
}

.uhr--mittel {
  justify-content: flex-start;
  gap: calc(var(--u) * 8);
}

.uhr--mittel .uhr-title {
  font-size: calc(var(--u) * min(var(--uhr-w) * 5.5, var(--uhr-h) * 11));
}

.uhr--mittel .uhr-time {
  font-size: calc(var(--u) * min(var(--uhr-w) * 30, var(--uhr-h) * 60));
}

.uhr--mittel .uhr-seconds {
  font-size: calc(var(--u) * min(var(--uhr-w) * 11, var(--uhr-h) * 22));
}

.uhr--mittel .uhr-date {
  margin-top: auto;
  font-size: calc(var(--u) * min(var(--uhr-w) * 7, var(--uhr-h) * 14));
}

.uhr--gross:not(.uhr--analog) {
  align-items: stretch;
  text-align: center;
  gap: calc(var(--u) * 8);
}

.uhr--gross:not(.uhr--analog) .uhr-row {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: calc(var(--u) * 8);
}

.uhr--gross:not(.uhr--analog) .uhr-time {
  grid-column: 2;
  font-size: calc(var(--u) * min(var(--uhr-w) * 37.5, var(--uhr-h) * 75));
}

.uhr--gross:not(.uhr--analog) .uhr-seconds {
  grid-column: 3;
  justify-self: start;
  font-size: calc(var(--u) * min(var(--uhr-w) * 11.25, var(--uhr-h) * 22.5));
}

.uhr--gross:not(.uhr--analog) .uhr-date {
  font-size: calc(var(--u) * min(var(--uhr-w) * 5, var(--uhr-h) * 10));
  color: var(--text);
}

.uhr--gross:not(.uhr--analog) .uhr-kw {
  font-size: calc(var(--u) * min(var(--uhr-w) * 3.25, var(--uhr-h) * 6.5));
}

.uhr--analog {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.uhr-face {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.uhr-face svg {
  display: block;
  height: 80%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
}

.uhr-digital {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--u) * 12);
}

.uhr--analog .uhr-time {
  font-size: calc(var(--u) * min(var(--uhr-w) * 18.75, var(--uhr-h) * 37.5));
}

.uhr--analog .uhr-seconds {
  font-size: calc(var(--u) * min(var(--uhr-w) * 7, var(--uhr-h) * 14));
}

.uhr--analog .uhr-weekday {
  font-size: calc(var(--u) * min(var(--uhr-w) * 4.25, var(--uhr-h) * 8.5));
}

.uhr--analog .uhr-date {
  font-size: calc(var(--u) * min(var(--uhr-w) * 3.75, var(--uhr-h) * 7.5));
}

.uhr-ring {
  fill: var(--surface-2);
  stroke: var(--border-strong);
}

.uhr-tick {
  fill: none;
  stroke-linecap: round;
}

.uhr-tick-hour {
  stroke: var(--text);
}

.uhr-tick-min {
  stroke: var(--text-muted);
}

.uhr-hand-hour,
.uhr-hand-minute {
  fill: none;
  stroke: var(--text);
  stroke-linecap: round;
}

.uhr-hand-second {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
}

.uhr-hub {
  fill: var(--primary);
}

/* Modul Karte Einsatzort */

.karte {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.karte-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  min-width: 0;
}

.karte-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.karte-distance {
  flex: none;
  font-size: calc(26 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.karte-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.karte-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  background: var(--surface-2);
}

/* Doppelte Klasse: maplibre-gl.css setzt .maplibregl-map auf position: relative und wird später geladen. */
.karte-map,
.karte-map.maplibregl-map {
  position: absolute;
  inset: 0;
}

.karte-map.is-error {
  display: grid;
  place-items: center;
  padding: calc(16 * var(--u));
  text-align: center;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: calc(22 * var(--u));
  font-weight: 600;
}

.karte-chip,
.karte-label,
.karte-legend,
.karte-frame > .karte-sample {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.karte-chip {
  top: calc(12 * var(--u));
  right: calc(12 * var(--u));
  max-width: calc(100% - 24 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(28, 28, 31, 0.78);
  color: rgb(255, 255, 255);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.karte-label {
  left: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  max-width: calc(100% - 24 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(28, 28, 31, 0.82);
  color: rgb(255, 255, 255);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.karte-frame > .karte-sample {
  top: calc(12 * var(--u));
  left: calc(12 * var(--u));
}

.karte-legend {
  left: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  margin: 0;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  list-style: none;
  background: rgb(255, 255, 255);
  color: rgb(28, 28, 31);
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.18);
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.35;
}

.karte-legend li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.karte-legend img,
.karte-legend-swatch {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: none;
  object-fit: contain;
}

.karte-legend-swatch--route {
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: rgb(66, 133, 244);
}

.karte-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  text-align: center;
  color: var(--text-muted);
}

.karte-empty-title,
.karte-empty-sub {
  margin: 0;
  max-width: 36em;
}

.karte-empty-title {
  font-size: calc(28 * var(--u));
  font-weight: 600;
  line-height: 1.15;
}

.karte-empty-sub {
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}

.karte-marker {
  line-height: 0;
  pointer-events: none;
}

.karte-marker img {
  display: block;
}

.karte-marker--pin img {
  width: calc(36 * var(--u));
  height: calc(48 * var(--u));
}

.karte-marker--wasser {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
}

.karte-marker--wasser img {
  width: 100%;
  height: 100%;
}

.karte-marker--absprache img {
  width: calc(42 * var(--u));
  height: auto;
}

.karte-hydrant-label {
  position: absolute;
  left: calc(100% + 4 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  background: rgb(255, 255, 255);
  color: rgb(21, 101, 192);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.karte-map .maplibregl-ctrl-attrib,
.karte-map .maplibregl-ctrl-attrib a {
  font-size: calc(11 * var(--u));
  line-height: 1.2;
}

.karte-map .maplibregl-ctrl-attrib.maplibregl-compact {
  margin: calc(4 * var(--u));
  min-height: 0;
}

.karte-map .maplibregl-ctrl-bottom-right {
  z-index: 1;
}

/* Modul Objektinfos */

.objekt {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}

.objekt-head {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-width: 0;
}

.objekt-icon {
  width: calc(39 * var(--u));
  height: calc(52 * var(--u));
  flex: none;
  object-fit: contain;
  display: block;
}

.objekt-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.objekt-name,
.objekt-sub,
.objekt-adresse,
.objekt-rolle,
.objekt-kname,
.objekt-phone,
.objekt-footer,
.objekt-docs-text,
.objekt-docs-hint,
.objekt-label,
.objekt-kicker,
.objekt-empty-title,
.objekt-empty-sub {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.objekt-name {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}

/* Klein (3×2): etwas kleiner, damit übliche Objektnamen ganz passen. */
.objekt--klein .objekt-name {
  font-size: calc(31 * var(--u));
}

.objekt-sub {
  margin-top: calc(2 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.objekt-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.objekt-body,
.objekt-cols {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.objekt-body {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u));
}

.objekt-adressen {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}

.objekt-adresse {
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.objekt-kontakte {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  min-width: 0;
  border-top: 1px solid var(--border-strong);
  padding-top: calc(10 * var(--u));
}

.objekt-kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(16 * var(--u));
  row-gap: calc(2 * var(--u));
  align-items: start;
  min-width: 0;
}

.objekt-rolle {
  grid-column: 1;
  grid-row: 1;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.objekt-kname {
  grid-column: 1;
  grid-row: 2;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.objekt-phones {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  min-width: 0;
  text-align: right;
}

.objekt-phone {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.objekt-phone--2 {
  margin-top: calc(2 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 600;
  color: var(--text-muted);
}

.objekt-footer {
  margin-top: auto;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

.objekt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  column-gap: calc(16 * var(--u));
  margin-top: calc(14 * var(--u));
}

.objekt-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.objekt-col--main {
  gap: calc(18 * var(--u));
  border-right: 1px solid var(--border-strong);
  padding-right: calc(16 * var(--u));
}

.objekt-col--side {
  gap: calc(10 * var(--u));
}

.objekt-block {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
}

.objekt-label {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.objekt-docs-text {
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.objekt-docs-hint {
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
}

.objekt--gross .objekt-kontakt {
  background: var(--surface-2);
  border-radius: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
}

.objekt-kicker {
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.objekt-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.objekt-empty-mark {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin-bottom: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex: none;
}

.objekt-empty-bar {
  display: block;
  width: calc(22 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--text-muted);
}

.objekt-empty-title {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.objekt-empty-sub {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
}

/* Modul Hydranten */

.hydr {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}

.hydr-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
}

.hydr-title,
.hydr-chip,
.hydr-name,
.hydr-dist,
.hydr-detail,
.hydr-oos,
.hydr-typ,
.hydr-flow,
.hydr-footer,
.hydr-th,
.hydr-empty-title,
.hydr-empty-sub {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hydr-title {
  flex: 1 1 auto;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hydr-chip {
  flex: none;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.hydr-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.hydr-icon {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
  object-fit: contain;
  display: block;
}

.hydr-list,
.hydr-table {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hydr-list {
  margin-top: calc(10 * var(--u));
}

.hydr--klein .hydr-icon {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}

.hydr--klein .hydr-list {
  justify-content: space-evenly;
  margin-top: calc(6 * var(--u));
}

.hydr--klein .hydr-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(12 * var(--u));
  min-width: 0;
}

.hydr--klein .hydr-dist {
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hydr--klein .hydr-name {
  justify-self: end;
  text-align: right;
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-muted);
}

.hydr-footer {
  flex: none;
  margin-top: auto;
  padding-top: calc(6 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.hydr--mittel .hydr-list {
  gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u));
}

.hydr--mittel .hydr-row {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(14 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  background: var(--surface-2);
  border-radius: calc(12 * var(--u));
  overflow: hidden;
}

.hydr-main,
.hydr-id {
  min-width: 0;
  overflow: hidden;
}

.hydr--mittel .hydr-name {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.hydr--mittel .hydr-detail {
  margin-top: calc(2 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.hydr--mittel .hydr-dist {
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hydr-table {
  margin-top: calc(8 * var(--u));
  gap: calc(6 * var(--u));
}

.hydr-thead,
.hydr--gross .hydr-row {
  display: grid;
  grid-template-columns: calc(36 * var(--u)) minmax(0, 1.6fr) minmax(0, 1.35fr) minmax(0, 0.72fr) minmax(0, 0.9fr);
  column-gap: calc(12 * var(--u));
  align-items: center;
  min-width: 0;
}

.hydr-thead {
  flex: none;
  padding: 0 calc(14 * var(--u)) calc(2 * var(--u));
}

.hydr-th {
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hydr-th--end {
  text-align: right;
}

.hydr--gross .hydr-row {
  flex: 1 1 0;
  min-height: 0;
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}

.hydr-table .hydr-row:nth-child(even) {
  background: var(--surface-2);
}

.hydr--gross .hydr-name,
.hydr--gross .hydr-typ,
.hydr--gross .hydr-flow,
.hydr--gross .hydr-dist {
  font-size: calc(24 * var(--u));
  line-height: 1.15;
}

.hydr--gross .hydr-name,
.hydr--gross .hydr-typ {
  font-weight: 600;
}

.hydr--gross .hydr-typ {
  color: var(--text-muted);
}

.hydr--gross .hydr-flow,
.hydr--gross .hydr-dist {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hydr-id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2 * var(--u));
}

.hydr-row.is-oos .hydr-icon,
.hydr-row.is-oos .hydr-name,
.hydr-row.is-oos .hydr-dist,
.hydr-row.is-oos .hydr-typ,
.hydr-row.is-oos .hydr-flow,
.hydr-row.is-oos .hydr-detail {
  opacity: 0.6;
}

.hydr-oos {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  /* Warmer Hinweiston aus den Tokens (wie «unterwegs»), keine neue Farbe. */
  color: var(--enroute);
}

.hydr--mittel .hydr-oos {
  margin-top: calc(2 * var(--u));
}

.hydr-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hydr-empty-mark {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin-bottom: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex: none;
}

.hydr-empty-bar {
  display: block;
  width: calc(22 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--text-muted);
}

.hydr-empty-title {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: normal;
}

.hydr-empty-sub {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: normal;
}

/* Modul Alarmierte Mittel */

.amittel {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}

.amittel-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
}

.amittel-title,
.amittel-heading,
.amittel-col-label,
.amittel-count,
.amittel-item,
.amittel-chip,
.amittel-more,
.amittel-empty-title,
.amittel-empty-sub {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amittel-title {
  flex: 1 1 auto;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.amittel-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.amittel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.amittel-more {
  flex: none;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.amittel--klein .amittel-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: calc(8 * var(--u));
}

.amittel--klein .amittel-item {
  position: relative;
  padding-left: calc(26 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.amittel--klein .amittel-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin-top: calc(-5 * var(--u));
  border-radius: 50%;
  background: var(--primary);
}

.amittel--klein .amittel-more {
  margin-top: auto;
  padding-top: calc(6 * var(--u));
}

.amittel--mittel .amittel-group {
  min-width: 0;
  margin-top: calc(12 * var(--u));
  overflow: hidden;
}

.amittel-heading,
.amittel-col-label {
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.amittel-heading {
  margin-bottom: calc(8 * var(--u));
}

.amittel-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: calc(10 * var(--u));
  min-width: 0;
  overflow: hidden;
}

.amittel-chip {
  flex: 0 1 auto;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--border);
  border-radius: calc(10 * var(--u));
  background: var(--surface-2);
  color: var(--text);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.15;
}

.amittel-cols {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: calc(16 * var(--u));
  margin-top: calc(12 * var(--u));
  overflow: hidden;
}

.amittel-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--surface-2);
}

.amittel-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  min-width: 0;
  flex: none;
}

.amittel-col-label {
  flex: 1 1 auto;
}

.amittel-count {
  flex: none;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.amittel--gross .amittel-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(14 * var(--u));
  margin-top: calc(16 * var(--u));
}

.amittel--gross .amittel-item {
  position: relative;
  flex: none;
  padding-left: calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.amittel--gross .amittel-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(3 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(-13 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--primary);
}

.amittel--gross .amittel-more {
  padding-top: calc(8 * var(--u));
}

.amittel-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.amittel-empty-mark {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin-bottom: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex: none;
}

.amittel-empty-bar {
  display: block;
  width: calc(22 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--text-muted);
}

.amittel-empty-title {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: normal;
}

.amittel-empty-sub {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: normal;
}

/* Modul Ausrückeordnung */

.ausr {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  overflow: hidden;
  color: var(--text);
}

.ausr-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
  overflow: hidden;
}

.ausr-title {
  flex: 1 1 auto;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ausr-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.ausr-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(14 * var(--u));
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.ausr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  color: var(--text-muted);
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.ausr-legend-item::before {
  content: "";
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}

.ausr-legend-item.ausr-st--unterwegs::before { background: var(--enroute); }
.ausr-legend-item.ausr-st--warteraum::before { background: var(--warteraum); }
.ausr-legend-item.ausr-st--einsatzort::before { background: var(--confirm); }

.ausr-title,
.ausr-nr,
.ausr-name,
.ausr-status,
.ausr-more,
.ausr-legend-item {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ausr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  overflow: hidden;
}

.ausr-row {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(24 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--surface-2);
  overflow: hidden;
}

.ausr-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--text-muted);
}

.ausr-row.ausr-st--unterwegs::before { background: var(--enroute); }
.ausr-row.ausr-st--warteraum::before { background: var(--warteraum); }
.ausr-row.ausr-st--einsatzort::before { background: var(--confirm); }

.ausr-row .ausr-nr {
  flex: none;
  width: calc(28 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ausr-row .ausr-name {
  flex: 1 1 auto;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.ausr-row .ausr-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-left: auto;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.ausr-row .ausr-status::before {
  content: "";
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ausr-row.ausr-st--unterwegs .ausr-status { color: var(--enroute); }
.ausr-row.ausr-st--warteraum .ausr-status { color: var(--warteraum); }
.ausr-row.ausr-st--einsatzort .ausr-status { color: var(--confirm); }

.ausr-more {
  flex: none;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.ausr-grid {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--ausr-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ausr-rows), minmax(0, 1fr));
  gap: calc(12 * var(--u));
  overflow: hidden;
}

.ausr-tile {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: calc(4 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid transparent;
  border-radius: calc(14 * var(--u));
  background: var(--surface-2);
  color: var(--text);
  overflow: hidden;
}

.ausr-tile .ausr-nr,
.ausr-tile .ausr-name,
.ausr-tile .ausr-status {
  flex: none;
  align-self: stretch;
}

.ausr-tile .ausr-nr {
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.1;
}

.ausr-tile .ausr-name {
  font-weight: 700;
  line-height: 1.05;
}

.ausr--klein .ausr-tile .ausr-name { font-size: calc(28 * var(--u)); }
.ausr--mittel .ausr-tile .ausr-name { font-size: calc(40 * var(--u)); }
.ausr--gross .ausr-tile .ausr-name { font-size: calc(56 * var(--u)); }

.ausr-tile .ausr-status {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ausr-tile.ausr-st--einsatzort {
  background: var(--confirm);
  color: var(--on-status);
}

.ausr-tile.ausr-st--unterwegs {
  background: var(--enroute);
  color: var(--on-status);
}

.ausr-tile.ausr-st--warteraum {
  background: var(--warteraum);
  color: var(--on-status-hell);
}

.ausr-tile.ausr-st--depot {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.ausr-tile.ausr-st--depot .ausr-nr {
  color: var(--text-muted);
}

.ausr-tile--more {
  display: grid;
  place-items: center;
  text-align: center;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-muted);
  background: var(--surface-2);
  border-color: var(--border);
}

.ausr-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.ausr-empty-mark {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin-bottom: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex: none;
}

.ausr-empty-bar {
  display: block;
  width: calc(22 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--text-muted);
}

.ausr-empty-title {
  margin: 0;
  max-width: 100%;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: normal;
}

.ausr-empty-sub {
  margin: calc(6 * var(--u)) 0 0;
  max-width: 100%;
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: normal;
}

/* Modul Warteraum */

.wr {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  overflow: hidden;
  color: var(--text);
}

.wr-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
  overflow: hidden;
}

.wr-title,
.wr-name,
.wr-sub,
.wr-nr,
.wr-more,
.wr-sperre-text,
.wr-empty-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-title {
  flex: 1 1 auto;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wr-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.wr-list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: 0;
  flex: none;
  overflow: hidden;
}

.wr-item {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  min-width: 0;
  overflow: hidden;
}

.wr-nr {
  flex: none;
  width: calc(28 * var(--u));
  padding-top: calc(6 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.wr-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  overflow: hidden;
}

.wr-name {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.wr-sub {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-muted);
}

.wr-more {
  flex: none;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.wr--klein {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: calc(16 * var(--u));
  row-gap: calc(2 * var(--u));
  align-items: start;
  align-content: center;
}

.wr--klein > .wr-badge {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: calc(72 * var(--u));
  height: calc(45 * var(--u));
  overflow: hidden;
}

.wr--klein > .wr-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wr--klein > .wr-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.wr--klein > .wr-sample {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
}

.wr--klein > .wr-item {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.wr--klein .wr-name {
  font-size: calc(24 * var(--u));
}

.wr .karte-frame {
  flex: 1 1 auto;
  min-height: 0;
}

.wr-sperre {
  position: absolute;
  z-index: 2;
  left: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  max-width: calc(100% - 24 * var(--u));
  min-width: 0;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--surface);
  color: var(--text);
  pointer-events: none;
  overflow: hidden;
}

.wr-sperre::before {
  content: "";
  flex: none;
  width: calc(34 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(2 * var(--u));
  background: repeating-linear-gradient(135deg, var(--primary) 0 6px, var(--surface) 6px 12px);
}

.wr-sperre-text {
  flex: 1 1 auto;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}

.wr-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.wr-empty-mark {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin-bottom: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex: none;
}

.wr-empty-bar {
  display: block;
  width: calc(22 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--text-muted);
}

.wr-empty-title {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: normal;
}

.wr--leer {
  display: flex;
  flex-direction: column;
}

/* Warteraum: W auf der Karte so gross wie im Design */
.wr .karte-marker--absprache img {
  width: calc(72 * var(--u));
}

/* Modul Objektdokumente */

.od {
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  overflow: hidden;
  color: var(--text);
}

.od-head {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
  overflow: hidden;
}

.od-title,
.od-kopf,
.od-name,
.od-sub,
.od-more,
.od-tab {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.od-title {
  flex: 0 1 auto;
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.06em;
  /* Titel gedämpft wie die anderen Module und das Design. */
  color: var(--text-muted);
}

.od-kopf {
  flex: none;
  margin-left: auto;
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.od-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.od-list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.od-item {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--surface-2);
  border: calc(2 * var(--u)) solid transparent;
}

.od-item--aktiv {
  border-color: var(--primary);
  background: var(--primary-muted);
}

.od-icon {
  position: relative;
  flex: none;
  width: calc(46 * var(--u));
  height: calc(54 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: calc(4 * var(--u));
  background: var(--surface);
}

.od-icon::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  background: linear-gradient(135deg, transparent 50%, var(--border-strong) 50%);
}

.od-typ {
  position: absolute;
  left: calc(4 * var(--u));
  bottom: calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--warteraum);
  color: var(--on-status-hell);
  font-size: calc(10 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.od-icon--pdf .od-typ {
  background: var(--primary);
}

.od-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  overflow: hidden;
}

.od-name {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.od-sub {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-muted);
}

.od-more {
  flex: none;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.od-preview {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(12 * var(--u));
  border: 1px solid var(--border);
  border-radius: calc(16 * var(--u));
  background: var(--paper);
  color: var(--on-paper);
}

.od-bild,
.od-seite {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.od-fehler {
  margin: 0;
  padding: calc(12 * var(--u));
  text-align: center;
  color: var(--on-paper);
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.3;
}

.od-progress {
  flex: none;
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.od-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--od-fill, 0%);
  background: var(--primary);
}

.od-tabs {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  min-width: 0;
  overflow: hidden;
}

.od-tab {
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.od-tab--aktiv {
  color: var(--text);
  font-weight: 700;
}

.od-empty {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.3;
}

.od--mittel {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: calc(16 * var(--u));
  row-gap: calc(10 * var(--u));
}

.od--mittel > .od-head {
  grid-column: 1 / -1;
  grid-row: 1;
}

.od--mittel > .od-list {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.od--mittel > .od-more {
  grid-column: 1;
  grid-row: 3;
}

.od--mittel > .od-preview {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.od--gross > .od-preview {
  flex: 1 1 auto;
}

.od--klein > .od-list {
  flex: 1 1 auto;
}

.od--leer {
  display: flex;
  flex-direction: column;
}

/* Modul Strassensperren */

.ss {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  overflow: hidden;
  color: var(--text);
}

.ss-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
  overflow: hidden;
}

.ss-title,
.ss-name,
.ss-strasse,
.ss-zeit,
.ss-more,
.ss-legende-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-title {
  flex: 1 1 auto;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ss-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.ss-list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.ss-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: calc(12 * var(--u));
  row-gap: calc(2 * var(--u));
  align-items: center;
  min-width: 0;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--surface-2);
  overflow: hidden;
}

.ss-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  width: calc(23 * var(--u));
  height: calc(30 * var(--u));
  flex: none;
}

.ss-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ss-name {
  grid-column: 2;
  grid-row: 1;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.ss-badge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: nowrap;
}

.ss-badge--aktiv {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-muted);
}

.ss-badge--kommend {
  color: var(--kommend);
  border-color: var(--kommend);
  background: var(--kommend-muted);
}

.ss-strasse {
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: calc(19 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.ss-zeit {
  grid-column: 2 / -1;
  grid-row: 3;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.ss-more {
  flex: none;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.ss-empty {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.3;
}

.ss > .ss-empty {
  flex: 1 1 auto;
  min-height: 0;
}

.ss--klein > .ss-more,
.ss--liste > .ss-more {
  margin-top: auto;
}

.ss--klein .ss-list {
  gap: calc(8 * var(--u));
}

.ss--klein .ss-item {
  padding: calc(8 * var(--u)) calc(12 * var(--u));
}

.ss--klein .ss-icon {
  grid-row: 1 / span 2;
  width: calc(20 * var(--u));
  height: calc(26 * var(--u));
}

.ss--klein .ss-name {
  font-size: calc(20 * var(--u));
}

.ss--klein .ss-badge {
  font-size: calc(13 * var(--u));
}

.ss--klein .ss-strasse {
  grid-column: 2;
  grid-row: 2;
  font-size: calc(17 * var(--u));
}

.ss--klein .ss-zeit {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  text-align: right;
  font-size: calc(16 * var(--u));
  color: var(--text-muted);
}

.ss--liste-karte {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: calc(16 * var(--u));
  row-gap: calc(8 * var(--u));
}

.ss--liste-karte > .ss-head {
  grid-column: 1;
  grid-row: 1;
}

.ss--liste-karte > .ss-list {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
}

.ss--liste-karte > .ss-more {
  grid-column: 1;
  grid-row: 3;
}

.ss--liste-karte > .karte-frame {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 0;
}

.ss--liste-karte .ss-list > .ss-empty {
  flex: 1 1 auto;
  min-height: 100%;
}

.ss--karte-liste > .karte-frame {
  flex: 1 1 auto;
  min-height: 0;
}

.ss--karte-liste > .ss-list {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12 * var(--u));
}

.ss--karte-liste.ss--cols-4 > .ss-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ss--karte-liste.ss--rows-2 > .ss-list {
  grid-template-rows: repeat(2, minmax(0, auto));
}

.ss--karte-liste .ss-name {
  font-size: calc(21 * var(--u));
}

.ss--karte-liste .ss-strasse {
  font-size: calc(17 * var(--u));
}

.ss--karte-liste .ss-zeit {
  font-size: calc(16 * var(--u));
}

.ss--karte-liste .ss-badge {
  font-size: calc(12 * var(--u));
}

.ss--karte-liste .ss-icon {
  width: calc(20 * var(--u));
  height: calc(26 * var(--u));
}

.ss--karte-liste .ss-list > .ss-empty {
  grid-column: 1 / -1;
  min-height: calc(64 * var(--u));
}

.ss .karte-frame {
  min-height: 0;
}

.ss-legende {
  position: absolute;
  z-index: 2;
  left: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  max-width: calc(100% - 28 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--paper);
  color: var(--on-paper);
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

.ss-legende-item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}

.ss-swatch {
  flex: none;
  width: calc(36 * var(--u));
  height: calc(9 * var(--u));
  border-radius: calc(2 * var(--u));
  background: repeating-linear-gradient(135deg, var(--primary) 0 calc(4 * var(--u)), var(--paper) calc(4 * var(--u)) calc(8 * var(--u)));
}

.ss-swatch--kommend {
  opacity: 0.4;
}

/* Modul Letzte Einsätze */

.le {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  overflow: hidden;
  color: var(--text);
}

.le-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
  flex: none;
  overflow: hidden;
}

.le-title,
.le-count,
.le-datum,
.le-zeit,
.le-stichwort,
.le-ort,
.le-dauer,
.le-meta,
.le-th {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le-title {
  flex: 1 1 auto;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.le-count {
  flex: none;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.le-sample {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.le-list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.le-item {
  min-width: 0;
  overflow: hidden;
}

.le-badge {
  flex: none;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--danger);
  border-radius: 999px;
  color: var(--danger);
  background: var(--danger-muted);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: nowrap;
}

.le-empty {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.3;
}

.le-datum,
.le-zeit,
.le-dauer {
  font-variant-numeric: tabular-nums;
}

/* klein: Datum + Stichwort */

.le--klein .le-sample {
  display: none;
}

.le--klein .le-list {
  gap: calc(14 * var(--u));
}

.le--klein .le-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: calc(8 * var(--u));
  align-items: baseline;
}

.le--klein .le-datum {
  min-width: 2.9em;
  font-variant-numeric: tabular-nums;
  font-size: calc(19 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--klein .le-stichwort {
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.le--klein .le-badge {
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  font-size: calc(11 * var(--u));
}

/* mittel: Karten mit Datum/Zeit links, Stichwort/Ort rechts */

.le--mittel .le-list {
  gap: calc(6 * var(--u));
}

.le--mittel .le-item {
  display: grid;
  grid-template-columns: calc(80 * var(--u)) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: calc(16 * var(--u));
  row-gap: calc(2 * var(--u));
  align-items: center;
  min-height: calc(64 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--surface-2);
}

.le--mittel .le-datum {
  grid-column: 1;
  grid-row: 1;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.le--mittel .le-zeit {
  grid-column: 1;
  grid-row: 2;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--mittel .le-stichwort {
  grid-column: 2;
  grid-row: 1;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.le--mittel .le-ort {
  grid-column: 2;
  grid-row: 2;
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--mittel .le-badge {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: calc(13 * var(--u));
}

/* tabelle: Kopf + Zeilen, jede zweite mit Hintergrund */

.le--tabelle {
  gap: calc(8 * var(--u));
}

.le--tabelle .le-cols,
.le--tabelle .le-item {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) minmax(0, 1.15fr) minmax(0, 1.5fr) calc(110 * var(--u));
  column-gap: calc(16 * var(--u));
  align-items: center;
  min-width: 0;
}

.le--tabelle .le-cols {
  flex: none;
  padding: 0 calc(16 * var(--u));
}

.le-th {
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.le--tabelle .le-th:last-child,
.le--tabelle .le-dauer,
.le--tabelle .le-badge {
  justify-self: end;
  text-align: right;
}

.le--tabelle .le-list {
  gap: calc(6 * var(--u));
}

.le--tabelle .le-item {
  min-height: calc(70 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(10 * var(--u));
}

.le--tabelle .le-item:nth-child(odd) {
  background: var(--surface-2);
}

.le--tabelle .le-when {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--u));
  min-width: 0;
  overflow: hidden;
}

.le--tabelle .le-datum {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.le--tabelle .le-zeit {
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--tabelle .le-stichwort {
  font-size: calc(23 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.le--tabelle .le-ort {
  font-size: calc(21 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--tabelle .le-dauer {
  font-size: calc(23 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.le--tabelle .le-badge {
  font-size: calc(14 * var(--u));
}

/* zeitstrahl: Datum | Punkt | Stichwort + Meta */

.le--zeitstrahl .le-list {
  position: relative;
  gap: calc(18 * var(--u));
  padding-top: calc(4 * var(--u));
}

.le--zeitstrahl .le-list::before {
  content: "";
  position: absolute;
  left: calc(91 * var(--u));
  top: calc(14 * var(--u));
  bottom: calc(10 * var(--u));
  width: calc(2 * var(--u));
  background: var(--border-strong);
}

.le--zeitstrahl .le-item {
  display: grid;
  grid-template-columns: calc(76 * var(--u)) calc(18 * var(--u)) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: calc(16 * var(--u));
  row-gap: calc(4 * var(--u));
  align-items: center;
}

.le--zeitstrahl .le-datum {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  font-size: calc(21 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.le-dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--text-muted);
  background: var(--surface-2);
  position: relative;
  z-index: 1;
}

.le--zeitstrahl .le-item:first-child .le-dot {
  background: var(--primary);
  border-color: var(--text-muted);
}

.le--zeitstrahl .le-stichwort {
  grid-column: 3;
  grid-row: 1;
  font-size: calc(23 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.le--zeitstrahl .le-meta {
  grid-column: 3;
  grid-row: 2;
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

/* breit: gleiche Kacheln nebeneinander */

.le--breit .le-list {
  flex-direction: row;
  gap: calc(12 * var(--u));
}

.le--breit .le-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--surface-2);
}

.le--breit .le-datum {
  font-size: calc(19 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--breit .le-stichwort {
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.le--breit .le-ort {
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
}

.le--breit .le-dauer,
.le--breit .le-badge {
  margin-top: auto;
  align-self: flex-end;
}

.le--breit .le-dauer {
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.le--breit .le-badge {
  font-size: calc(13 * var(--u));
}