:root {
  /* Palette abgeleitet aus dem TrapNet-Logo (Waldgrün + dunkles Petrol) -
     modernes, klares Erscheinungsbild statt des vorherigen Papier-/
     Geländetons. */
  --color-bg: #f3f6f4;
  --color-panel: #ffffff;
  --color-line: #d7dfda;
  --color-ink: #132026;
  --color-ink-soft: #4c5c62;
  --color-forest: #1f6b1c;
  --color-forest-dark: #154d14;
  --color-rust: #c23b2e;
  --color-rust-soft: #f6dcd8;
  --color-amber: #9a6700; /* vorher #c6860f: Weiß darauf nur 3,1 : 1 (Test-Abzeichen, Offline-Hinweis) - jetzt 4,9 : 1 (#117 V02) */

  /* Kräftige, geometrische Sans für Überschriften/Wortmarke - passend zum
     Logo-Schriftzug. Body-/Datentext bleibt bei der Systemschrift für
     Zuverlässigkeit ohne Internetabhängigkeit. */
  --font-serif: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Logo-Höhen für die drei Einsatzorte - hier direkt anpassbar, oder über
     Verwaltung -> Design -> Logo-Höhen (überschreibt diese Werte zur
     Laufzeit per Inline-Style auf :root, siehe applyDesignSettings() in app.js). */
  --logo-height-login: 3.5rem;
  --logo-height-topbar: 2rem;
  --logo-height-preview: 80px;

  --radius: 8px;
}

* {
  box-sizing: border-box;
}

/* Garantiert, dass das hidden-Attribut IMMER greift, auch wenn eine
   Komponentenklasse (z.B. .stack, .auth-view) selbst "display" setzt. Ohne
   diese Regel bleiben per JS versteckte Bereiche (Login-Maske, Registrierung
   etc.) trotz hidden="" sichtbar, weil Autoren-CSS die UA-Regel
   [hidden] { display: none } sonst überschreibt. */
[hidden] {
  display: none !important;
}

/* Grundschrift: alle Größen sind rem - am PC größer, damit Hinweise und Tabellen (0,75-0,9 rem) gut lesbar sind.
   Am Handy bleibt 16 px, sonst passen die Reiter nicht mehr nebeneinander. */
html {
  font-size: 16px;
}

@media (min-width: 600px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 18px;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0;
}

.wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wordmark img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* Schriftzug bzw. Logo darf schrumpfen, damit der Kopf nie breiter als der Bildschirm wird */
.topbar .wordmark {
  min-width: 0;
  max-width: 100%;
}

/* lange Gerätenamen ohne Leerzeichen umbrechen statt die Zeile zu verbreitern */
.trap-row-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.auth-view .wordmark img {
  height: var(--logo-height-login);
}

.topbar .wordmark img {
  height: var(--logo-height-topbar);
}

.tagline {
  color: var(--color-ink-soft);
  margin: 0.25rem 0 1.75rem;
}

a, button {
  font-family: inherit;
}

button {
  cursor: pointer;
  border: 1px solid var(--color-forest);
  background: var(--color-forest);
  color: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

button:hover {
  background: var(--color-forest-dark);
  border-color: var(--color-forest-dark);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.link-button:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

.link-button {
  background: none;
  border: none;
  color: var(--color-forest);
  padding: 0.25rem 0;
  text-decoration: underline;
  font-size: 0.9rem;
}

.link-button:hover {
  color: var(--color-forest-dark);
  background: none;
}

/* ---------- Anmeldung ---------- */

.auth-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(19, 32, 38, 0.08), 0 8px 24px rgba(19, 32, 38, 0.06);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack label,
.inline-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.optional {
  font-weight: normal;
  color: var(--color-ink-soft);
}

input, select {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
}

/* Auswahlfelder mit langen Einträgen (Reviernamen, Bundesländer, Tage) nie breiter als ihr Platz - bei großer Schrift
   bzw. 320 px liefen sie sonst über den rechten Rand (#117) */
select {
  max-width: 100%;
}

/* Mehrzeilige Felder wie die einzeiligen (sonst Browser-Standard: kleine Festbreitenschrift) (#117) */
textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
}

.form-error {
  color: var(--color-rust);
  font-size: 0.9rem;
  margin: 0;
}

.form-success {
  color: var(--color-forest);
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- Hauptanwendung ---------- */

.app-view {
  min-height: 100vh;
}

.topbar {
  display: flex;
  flex-wrap: wrap; /* große Schrift / schmales Handy: Nutzerzeile rutscht unter den Schriftzug statt über den Rand */
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-panel);
}

.topbar-user {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* lange Login-Namen kürzen ("…"), "Abmelden" bleibt immer sichtbar */
#current-user-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#logout-button {
  flex: none;
}

/* Einstellungen-Knopf in der Kopfzeile (#025) */
.topbar-settings {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: center;
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.5rem;
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}

.topbar-settings:hover,
.topbar-settings[data-active="true"] {
  border-color: var(--color-forest);
  color: var(--color-forest);
}

.topbar-settings[data-active="true"] {
  background: color-mix(in srgb, var(--color-forest) 8%, transparent);
}

.settings-nav .tabbar {
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .topbar-settings {
    padding: 0.3rem;
  }
  .topbar-settings-text {
    display: none;
  }
}

.content {
  max-width: 54rem; /* wächst mit der Schrift (16 px: 864 px, 18 px: 972 px) */
  margin: 0 auto;
  padding: 2rem;
}

.section-header {
  display: flex;
  flex-wrap: wrap; /* schmale Handys: Knöpfe rutschen unter die Überschrift statt sie zu quetschen */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.section-header > button,
.section-header > .link-button {
  white-space: nowrap;
}

/* Revier-Detail: Name eine Zeile, die Aktionen darunter */
#revier-detail-view .section-header h2 {
  flex: 1 1 100%;
  margin: 0;
}

#revier-detail-view .section-header {
  justify-content: flex-start;
}

.empty-state {
  color: var(--color-ink-soft);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: left;
}

/* Fallenliste als Ledger statt Karten-Raster */

.trap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.trap-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--color-line);
  border-left: 4px solid var(--color-line);
  padding-left: 0.75rem;
  background: none;
  width: 100%;
  text-align: left;
  color: inherit;
}

.trap-row:hover {
  background: var(--color-panel);
}

.trap-row.status-aktiv {
  border-left-color: var(--color-forest);
}

.trap-row.status-ausgeloest {
  border-left-color: var(--color-rust);
  background: var(--color-rust-soft);
}

.trap-row.status-inaktiv {
  border-left-color: var(--color-line);
}

.trap-row.status-deaktiviert {
  border-left-color: var(--color-line);
  opacity: 0.6;
}

/* Verbindungsverlust ist unabhängig vom Fang-Status möglich (auch bei
   status-aktiv oder status-ausgeloest gleichzeitig) - daher eigener
   Modifier statt eines weiteren status-Werts. */
.trap-row.connection-lost:not(.status-ausgeloest) {
  border-left-color: var(--color-amber);
}

.trap-row-name {
  font-weight: 600;
  flex: 1 1 auto;
}

.trap-row-status {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  min-width: 6.5rem;
}

.badge-weak-signal {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--color-amber);
  color: var(--color-amber);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-connection-lost {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--color-amber);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.connection-lost-text {
  color: var(--color-amber);
  font-weight: 600;
}

/* Repeater/Gateway-Kennzeichnung in Listen */
.kind-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Akkustand unter der persönlichen Warnschwelle (Einstellungen -> Akku-Warnung) */
.battery-low,
.trap-row-meta.battery-low {
  color: var(--color-rust);
  font-weight: 600;
}

.trap-row-meta {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 9rem;
  text-align: right;
}

/* Admin-/Revier-Zeilen mit Status, Revier, Besitzer, Batterie, Datum und
   Aktionen: echtes Spaltenraster statt Flexbox, damit die Spalten über
   mehrere Zeilen hinweg fluchten - unabhängig davon, wie lang E-Mail-
   Adressen oder Namen sind. Jede Zelle wird immer gerendert (ggf. mit "–"
   als Platzhalter), damit keine Zeile eine Spalte "verliert". */
.trap-row-admin {
  display: grid;
  /* flexible Spalten: feste Breiten waren zusammen breiter als die Inhaltsspalte (Laptop 1366 px) */
  grid-template-columns: minmax(110px, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  column-gap: 0.75rem;
}

.trap-row-admin .trap-row-meta {
  min-width: 0;
}

.trap-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Detailansicht */

.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(19, 32, 38, 0.06);
}

.trap-facts {
  display: grid;
  /* minmax(0, …): lange Inhalte (z. B. Platzhalter der Mailtexte) brechen um, statt über den Rand zu ragen */
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  margin: 0 0 1.5rem;
}

.trap-facts dt {
  color: var(--color-ink-soft);
}

.trap-facts dt,
.trap-facts dd {
  overflow-wrap: anywhere;
}

/* Platzhalter der Mailtexte am Handy untereinander (Platzhalter, darunter die Erklärung) */
@media (max-width: 480px) {
  #mailtexte-placeholder-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  #mailtexte-placeholder-list dd {
    margin-bottom: 0.6rem;
  }
}

.trap-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.trap-facts code {
  font-size: 0.85rem;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.15rem 0.4rem;
  word-break: break-all;
}

/* Gerät in der Nähe (Bluetooth-Suche der App) */
.nearby {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line);
}

.nearby h3 {
  margin-bottom: 0.5rem;
}

.nearby #nearby-status {
  margin: 0.6rem 0 0;
}

.nearby-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.nearby-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: var(--color-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
}

.nearby-item:hover:not(:disabled) {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-forest);
}

.nearby-item.is-selected {
  border-color: var(--color-forest);
  box-shadow: inset 3px 0 0 var(--color-forest);
}

.nearby-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nearby-item .nearby-id {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 600;
}

.nearby-item .nearby-meta {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.nearby-signal {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

/* Fingerabdruck-Anmeldung auf der Anmeldeseite (nur in der App) */
.biometric-login {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}

.biometric-login button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.biometric-login .hint {
  margin: 0.5rem 0 0;
}

/* Fang-Erinnerung: zwei Stufen nebeneinander, am Handy untereinander */
.reminder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  max-width: 32rem;
}

@media (max-width: 480px) {
  .reminder-grid {
    grid-template-columns: 1fr;
  }
}

/* Benachrichtigungen: Ereignis x (E-Mail, App) */
.notify-matrix {
  width: 100%;
  max-width: 32rem;
  border-collapse: collapse;
}

.notify-matrix th,
.notify-matrix td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}

.notify-matrix th[scope="row"],
.notify-matrix thead th:first-child {
  text-align: left;
  font-weight: 400;
}

.notify-matrix thead th {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap; /* am Handy sonst "E-" / "Mail" in zwei Zeilen (#117) */
}

.notify-matrix input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-forest);
  cursor: pointer;
}

/* am Handy: Kästchen ohne eigene Beschriftung größer antippbar (#117) */
@media (max-width: 600px), (pointer: coarse) {
  .notify-matrix input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
  }
  .notify-matrix th,
  .notify-matrix td {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
}

/* API-Key / Beitritts-Link: Beschriftung, Wert im Kasten mit "Kopieren", "Neu erzeugen" dezent darunter */
.secret-field {
  margin: 0 0 1.25rem;
}

.secret-label {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.secret-purpose {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.secret-box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-panel);
  overflow: hidden;
}

.secret-value {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  user-select: all;
}

.secret-copy {
  flex: 0 0 auto;
  border: none;
  border-left: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  color: var(--color-forest);
  padding: 0 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.secret-copy:hover {
  background: var(--color-bg);
  color: var(--color-forest-dark);
  border-color: var(--color-line);
}

.secret-copy.is-copied {
  color: var(--color-ink-soft);
}

.secret-regen {
  margin-top: 0.35rem;
  background: none;
  border: none;
  padding: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--color-rust);
  text-decoration: underline;
}

.secret-regen:hover {
  background: none;
  color: var(--color-rust);
  border: none;
}

#trap-detail-maps-link {
  display: inline-block;
  margin: -0.75rem 0 1.5rem;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.detail-actions .hint {
  margin: 0;
}

.subsection {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.subsection h3 {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Text direkt unter einer Zeile mit Feldern/Knöpfen braucht Abstand (#060: Knöpfe lagen auf dem Hinweis) */
.inline-form + p {
  margin-top: 0.75rem;
}

.checkbox-label,
.stack label.checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.event-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9rem;
}

.event-list .event-type {
  font-weight: 600;
}

.event-list .event-time {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

#trap-event-archive-toggle {
  margin-top: 0.75rem;
}

@media (max-width: 600px) {
  .topbar {
    padding: 1rem 1.25rem;
  }
  .content {
    padding: 1.25rem;
  }
  .trap-row {
    flex-wrap: wrap;
  }
  .trap-row-meta {
    text-align: left;
  }
  .trap-row-admin {
    display: flex;
    flex-wrap: wrap;
  }
  .trap-row-admin .trap-row-meta {
    text-align: left;
    min-width: 0;
  }
  .trap-row-actions {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ---------- Tabbar ---------- */

.tabbar {
  display: flex;
  gap: 0.25rem;
  padding: 0 2rem;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-line);
  /* Reicht der Platz nicht (Handy, viele Reiter), wird die Leiste in sich seitlich wischbar, statt die ganze Seite
     über den Bildschirmrand hinaus zu verbreitern. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabbar::-webkit-scrollbar {
  display: none;
}

/* Reiter immer mittig: dehnbare Platzhalter links und rechts. Reicht der Platz nicht, schrumpfen sie auf 0 - anders als
   justify-content: center bleibt der erste Reiter dann erreichbar (wischbar statt links abgeschnitten). */
.tabbar::before,
.tabbar::after {
  content: "";
  flex: 1 0 0;
}

/* In der Android-App bleiben die Reiter linksbündig */
.in-app .tabbar::before,
.in-app .tabbar::after {
  content: none;
}

/* Hinweis aufs Wischen: Liegen links/rechts weitere Reiter außerhalb des Bildes, erscheint dort ein leichter Schatten
   (Klassen setzt updateTabbarFades in app.js). Kein Ausblenden per mask-image - das ließe den Seitenhintergrund
   durchscheinen und die weiße Leiste wirkte am Rand abgeschnitten. Der Hintergrund eines scrollbaren Elements bleibt
   beim Wischen stehen, der Schatten also immer am Rand. */
.tabbar.more-right {
  background: linear-gradient(to left, rgba(19, 32, 38, 0.14), rgba(19, 32, 38, 0) 1.75rem), var(--color-panel);
}
.tabbar.more-left {
  background: linear-gradient(to right, rgba(19, 32, 38, 0.14), rgba(19, 32, 38, 0) 1.75rem), var(--color-panel);
}
.tabbar.more-left.more-right {
  background: linear-gradient(to right, rgba(19, 32, 38, 0.14), rgba(19, 32, 38, 0) 1.75rem),
    linear-gradient(to left, rgba(19, 32, 38, 0.14), rgba(19, 32, 38, 0) 1.75rem), var(--color-panel);
}

.tab-button {
  flex: 0 0 auto;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-soft);
  padding: 0.75rem 0.25rem;
  margin: 0 0.75rem; /* gleich auf beiden Seiten - sonst sitzen mittige Reiter nach links versetzt */
  border-radius: 0;
  font-size: 1rem;
}

.tab-button:hover {
  background: none;
  color: var(--color-ink);
}

/* Die Leiste schneidet oben/unten ab (overflow) - ein normaler Fokusrahmen bliebe nur als zwei senkrechte Striche
   übrig. Deshalb Fokus innen als Hintergrund und Unterstrich. */
.tab-button:focus,
.tab-button:focus-visible {
  outline: none;
}

.tab-button:focus-visible {
  background: color-mix(in srgb, var(--color-forest) 10%, transparent);
  border-radius: 4px 4px 0 0;
}

.tab-button[data-active="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-forest);
  font-weight: 600;
}

@media (max-width: 600px) {
  .tabbar {
    padding: 0 0.5rem;
  }
  .tab-button {
    margin: 0 0.4rem;
    font-size: 0.95rem;
  }
}

/* Sicherheitsnetz: nichts darf die Seite breiter als den Bildschirm machen (sonst endet der Hintergrund am Rand). */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  /* "clip" statt "hidden": schneidet ab, ohne dass die Seite seitlich scrollbar wird (auch nicht per Skript oder
     Wischen in Chrome auf Android). Ältere Browser bleiben bei "hidden". */
  overflow-x: clip;
}

/* ---------- Karte ---------- */

.map-container {
  height: 480px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

/* Vollbild für Karten (Knopf auf jeder Karte, app.js) */
.map-fs-button {
  display: grid !important;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--color-panel);
  color: var(--color-ink);
  cursor: pointer;
}

.map-fs-button:hover {
  background: #f4f4f4;
}

.leaflet-container.map-fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* Handy: ohne die ein- und ausfahrende Adressleiste */
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  z-index: 5000;
}

/* Seite dahinter nicht scrollen */
body.map-fullscreen-open {
  overflow: hidden;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  font-family: var(--font-sans);
}

.trap-marker-label {
  font-size: 0.85rem;
}

/* Knopf "Eigene Position" unter dem Zoom */
.own-position-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #fff;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.own-position-button:hover {
  background: #f4f4f4;
}

.own-position-button.is-active {
  color: #2563eb;
}

.own-position-button.is-searching {
  color: var(--color-amber);
}

/* ---------- Administration ---------- */

.hint {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin: -0.5rem 0 1rem;
}

/* Der negative Rand rückt den Hinweis an das Feld darüber. Nach einem Knopf bzw. einer Zeile mit Knöpfen würde er
   sich unter die Knöpfe schieben (#093, "Jetzt ansitzen") - dort ohne */
button + .hint,
:is(div, form, nav, header):has(button, a.secondary-button) + .hint,
.table-scroll + .hint,
.map-container + .hint {
  margin-top: 0;
}

.subsection-first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.admin-assign-row {
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--color-line);
}

.admin-assign-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.admin-assign-header .trap-row-name {
  flex: 1 1 auto;
}

.admin-assign-nodeid {
  font-variant-numeric: tabular-nums;
}

.admin-assign-form input {
  flex: 1 1 160px;
}

/* ---------- Gefahrenzone / destruktive Aktionen ---------- */

.danger-zone {
  border-top: 1px solid var(--color-rust);
}

.danger-zone h3 {
  color: var(--color-rust);
}

.danger-button {
  background: #fff;
  border: 1px solid var(--color-rust);
  color: var(--color-rust);
}

.danger-button:hover {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: #fff;
}

.danger-button-small {
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  flex: 0 0 auto;
}

/* ---------- Verwaltung: Unter-Tabs ---------- */

.admin-subtabbar {
  padding: 0;
  margin-bottom: 0.5rem;
  background: none;
}

/* ---------- Design-Einstellungen ---------- */

#design-form input[type="color"] {
  height: 2.5rem;
  padding: 0.2rem;
  cursor: pointer;
}

#design-logo-preview {
  max-width: 200px;
  max-height: var(--logo-height-preview);
  object-fit: contain;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: #fff;
}

/* Verwaltung -> Nutzer und Reviere als Raster wie die Geräte-Liste (#117 V07): Name, Angaben, die nächste nötige
   Aktion (Freischalten bzw. Verwalten) und alle übrigen Aktionen im Menü "Aktionen" (app.js renderAdminUserList,
   renderAdminRevierList). Am Handy: Name über die ganze Breite, darunter Angaben und Aktionen. */
#admin-user-list .user-row,
#admin-revier-list .revier-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) 7.5rem auto;
  gap: 0.4rem 1rem;
  align-items: center;
}

#admin-revier-list .revier-admin-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) minmax(0, 8rem) 7.5rem auto;
}

#admin-user-list .user-row .trap-row-name,
#admin-revier-list .revier-admin-row .trap-row-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

#admin-user-list .trap-row-status,
#admin-revier-list .revier-admin-row > .trap-row-meta {
  min-width: 0;
  text-align: left;
}

.row-primary {
  justify-self: end;
}

/* Mitgliederliste aufgeklappt: über die ganze Zeile */
#admin-revier-list .admin-revier-members[open] {
  grid-column: 1 / -1;
  grid-row: 2;
}

.row-menu {
  position: relative;
  justify-self: end;
}

.row-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-panel);
  font-size: 0.85rem;
  white-space: nowrap;
}

.row-menu > summary::-webkit-details-marker {
  display: none;
}

.row-menu > summary::after {
  content: " ▾";
}

.row-menu[open] > summary {
  border-color: var(--color-forest);
  color: var(--color-forest);
}

.row-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.3rem;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(19, 32, 38, 0.18);
}

.row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--color-ink);
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}

.row-menu-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-forest) 10%, var(--color-panel));
  color: var(--color-ink);
}

.row-menu-item:disabled {
  color: var(--color-ink-soft);
  opacity: 0.6;
  cursor: not-allowed;
}

.row-menu-danger {
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 6px 6px;
  color: var(--color-rust);
}

.row-menu-danger:hover:not(:disabled) {
  background: var(--color-rust-soft);
  color: var(--color-rust);
}

@media (pointer: coarse) {
  .row-menu > summary {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
  }
  .row-menu-item {
    min-height: 2.75rem;
  }
}

@media (max-width: 720px) {
  #admin-user-list .user-row,
  #admin-revier-list .revier-admin-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  /* Nutzer: Status über den Knöpfen, die Knöpfe links darunter (passt auch bei 320 px und großer Schrift) */
  #admin-user-list .user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #admin-user-list .user-row .trap-row-name,
  #admin-user-list .trap-row-status {
    flex: 1 1 100%;
    min-width: 0;
  }
  #admin-user-list .row-primary:empty {
    display: none;
  }
  #admin-user-list .row-primary,
  #admin-user-list .row-menu {
    justify-self: start;
  }
  #admin-user-list .user-row .trap-row-name,
  #admin-revier-list .revier-admin-row .trap-row-name {
    grid-column: 1 / -1;
  }
  #admin-revier-list .revier-admin-row > .trap-row-meta:not(details) {
    grid-column: 1 / -1;
  }
}

/* Funk-Log (Verwaltung) */
#admin-panel-funklog,
#admin-panel-funklog .subsection {
  min-width: 0;
  max-width: 100%;
}

.radiolog-settings {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.radiolog-settings input[type="number"] {
  width: 6rem;
}

.inline-form.radiolog-settings label.checkbox-label {
  flex-direction: row;
  align-self: center;
  margin-top: 1.2rem;
}

.radiolog-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}

.radiolog-filter label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.radiolog-filter select {
  width: 100%;
}

.radiolog-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .radiolog-filter {
    grid-template-columns: 1fr;
  }
}

.radiolog-heading {
  margin: 1.5rem 0 0.25rem;
}

.radiolog-scroll {
  overflow: auto;
  max-height: 30rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.radiolog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.radiolog-table th,
.radiolog-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.radiolog-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-panel);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.radiolog-weak {
  color: var(--color-amber);
}

.radiolog-bad {
  color: var(--color-rust);
  font-weight: 600;
}

.radiolog-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}

/* ---------- Funkplanung ---------- */
.fp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
}

.fp-toolbar-spacer {
  flex: 1;
}

.fp-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}

.fp-tool:hover {
  background: var(--color-bg);
}

.fp-tool-icon,
.fp-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--fp-color, #1c3d8c);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.fp-tool-icon.fp-center {
  background: #fff;
  color: #1c3d8c;
  border-color: #1c3d8c;
  font-size: 1rem;
}

.fp-gw {
  border-radius: 4px;
  background: #1c3d8c;
}

.fp-tool-icon.fp-rep {
  background: #0b7285;
  border-radius: 4px;
}

.fp-tool-icon.fp-trap {
  background: #495057;
}

.fp-marker {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}

.fp-marker.fp-rep {
  border-radius: 6px;
}

.fp-marker.fp-gw {
  border-radius: 6px;
  background: #1c3d8c;
}

.fp-marker.fp-selected {
  outline: 3px solid #f59f00;
  outline-offset: 1px;
}

.fp-marker.fp-outside {
  opacity: 0.45;
}

.fp-marker-wrap {
  background: none;
  border: none;
}

.fp-marker-label {
  position: absolute;
  left: 32px;
  top: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  color: #111;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}

.fp-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1c3d8c;
  border-radius: 50%;
  background: #fff;
  color: #1c3d8c;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.fp-map {
  height: 65vh;
  min-height: 420px;
}

/* Ziehen aus der Werkzeugleiste */
.fp-tool {
  cursor: grab;
  touch-action: none; /* sonst scrollt der Finger die Seite statt zu ziehen */
  user-select: none;
  -webkit-user-select: none;
}

.fp-tool-dragging {
  cursor: grabbing;
  opacity: 0.6;
}

.fp-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  margin: -14px 0 0 -14px; /* Symbolmitte unter dem Zeiger */
  opacity: 0.75;
}

.fp-drag-ghost .fp-tool-icon {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  font-size: 0.75rem;
}

.fp-drag-ghost-over {
  opacity: 1;
}

.leaflet-container.fp-drop-target {
  outline: 3px dashed var(--color-forest);
  outline-offset: -3px;
}

.fp-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* unter der Karte: Einstellungen des gewählten Geräts | Ergebnis, darunter die Annahmen */
.fp-side {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.fp-side > .fp-details,
.fp-editor[hidden] + section {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .fp-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .fp-map {
    height: 55vh;
    min-height: 320px;
  }
}

.fp-route-head {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

.fp-side h3 {
  margin: 0 0 0.35rem;
}

.fp-editor {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--color-panel);
}

.fp-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
}

.fp-editor-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.fp-editor-grid label:first-child {
  grid-column: 1 / -1;
}

.fp-route-list {
  margin: 0.5rem 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.fp-route-list li {
  margin-bottom: 0.4rem;
}

.fp-table-wrap {
  overflow-x: auto;
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.fp-table th,
.fp-table td {
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.fp-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-panel);
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

.fp-table tbody tr {
  cursor: pointer;
}

.fp-table tbody tr:hover {
  background: var(--color-bg);
}

.fp-chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.fp-q-good,
.leaflet-tooltip.fp-link-label.fp-q-good {
  background: #2f9e44;
}

.fp-q-ok,
.leaflet-tooltip.fp-link-label.fp-q-ok {
  background: #b58900;
}

.fp-q-weak,
.leaflet-tooltip.fp-link-label.fp-q-weak {
  background: #e8590c;
}

.fp-q-none,
.leaflet-tooltip.fp-link-label.fp-q-none {
  background: #c92a2a;
}

.fp-legend .fp-chip {
  margin-left: 0.4rem;
}

.leaflet-tooltip.fp-link-label {
  color: #fff;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.leaflet-tooltip.fp-link-label::before {
  display: none;
}

.fp-details summary {
  cursor: pointer;
  font-weight: 600;
}

.fp-details label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.fp-details ul {
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}

.fp-editor-grid input,
.fp-editor-grid select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fp-editor-grid + .hint {
  margin-top: 0.6rem;
}

.fp-legend {
  margin-top: 0.6rem;
  line-height: 2;
}

.fp-hide-link-labels .leaflet-tooltip.fp-link-label,
.fp-hide-marker-labels .fp-marker-label {
  display: none;
}

/* Abdeckungsfläche: Bedienelement auf der Karte */
.fp-cov-control {
  background: var(--color-panel);
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  color: var(--color-ink);
  width: 13.5rem;
  box-sizing: border-box;
}

.fp-cov-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}

.fp-cov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.leaflet-control .fp-cov-collapse {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-panel);
  color: var(--color-ink);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.leaflet-control .fp-cov-collapse:hover {
  background: var(--color-bg);
}

.fp-cov-collapse svg {
  display: block;
  margin: auto;
  transition: transform 0.15s;
}

/* eingeklappt: Pfeil zeigt nach links ("aufklappen") */
.fp-cov-collapse.fp-cov-collapsed svg {
  transform: rotate(90deg);
}

/* eingeklappt: nur die Kopfzeile, so schmal wie nötig */
.fp-cov-control:has(.fp-cov-body[hidden]) {
  width: auto;
}

/* Messpunkte des Empfangstests in der Funkplanung (#043) */
.fp-tests-control .fp-tests-legend {
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.fp-tests-control .fp-tests-fit {
  padding: 0;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  text-align: left;
}

.fp-cov-body label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  color: var(--color-ink-soft);
}

.fp-cov-body select,
.fp-cov-body input[type="range"] {
  width: 100%;
  box-sizing: border-box;
}

.fp-cov-body select {
  font-size: 0.8rem;
  padding: 0.2rem;
}

.fp-cov-legend {
  margin-top: 0.5rem;
  line-height: 1.55;
  font-size: 0.75rem;
}

.fp-cov-legend > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.fp-cov-legend-head {
  color: var(--color-ink-soft);
}

.fp-cov-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: -0.12rem;
}

.fp-cov-swatch-none {
  border: 1px dashed var(--color-ink-soft);
  box-sizing: border-box;
}

.fp-cov-readout {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-line);
}

.fp-cov-progress:not(:empty) {
  margin-top: 0.35rem;
  color: var(--color-forest);
  font-weight: 600;
}

@media (max-width: 600px) {
  .fp-cov-control {
    max-width: 12.5rem;
  }
}

.fp-cov-readout-route {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--color-ink-soft);
  font-size: 0.75rem;
}

.fp-hops {
  color: var(--color-ink-soft);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Position von Hand (Gerätedetails) */
.trap-position-map {
  height: 18rem;
  margin: 0.5rem 0 0.75rem;
}

.trap-position-form {
  align-items: flex-end;
}

.trap-position-form label {
  flex: 1 1 14rem;
}

.trap-position-form input {
  width: 100%;
  box-sizing: border-box;
}

.trap-position-form .trap-antenna-field {
  flex: 0 1 11rem;
}

/* Kontextmenü der Funkplanung */
.fp-context-menu {
  position: fixed;
  z-index: 10001;
  min-width: 13rem;
  padding: 0.3rem 0;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
}

.fp-context-header {
  padding: 0.35rem 0.8rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.fp-context-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fp-context-item:hover,
.fp-context-item:focus-visible {
  background: var(--color-bg);
  outline: none;
}

.fp-context-check {
  display: inline-block;
  width: 1.3rem;
  text-align: center;
  color: var(--color-forest);
  font-weight: 700;
}

.fp-context-danger {
  color: var(--color-rust);
}

.fp-context-separator {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--color-line);
}

/* Downloads */
.downloads-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.download-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-panel);
  padding: 1rem;
}

.download-card h3 {
  margin: 0 0 0.5rem;
}

.download-entry + .download-entry {
  border-top: 1px solid var(--color-line);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

.download-entry-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.download-version {
  font-weight: 600;
}

.download-notes {
  margin: 0.4rem 0;
  white-space: pre-line;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0.25rem;
}

.button-link {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  background: var(--color-forest);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.button-link:hover {
  background: var(--color-forest-dark);
}

.danger-link {
  color: var(--color-rust);
}

.download-checksum {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  word-break: break-all;
}

.download-older {
  margin-top: 0.75rem;
}

.download-older summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.download-upload-form {
  max-width: 32rem;
}

.download-upload-form progress {
  width: 100%;
}

.download-card > .hint {
  margin: 0.75rem 0 0;
}

.download-upload-form textarea {
  font: inherit;
}

/* Impressum, Datenschutz und der Link dazu unten auf jeder Seite */
.legal-footer {
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.legal-footer a {
  color: inherit;
}

.legal-page {
  background: var(--color-bg);
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem;
}

.legal-header .wordmark {
  color: var(--color-ink);
  text-decoration: none;
}

.legal {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 1rem;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.legal h1 {
  margin-top: 0;
}

.legal h2 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.1rem;
}

.legal ul {
  padding-left: 1.3rem;
}

.legal-table-wrap {
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.legal-table thead th {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

/* Kündigungsbutton (#095): kuendigen.html */
.kd-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.kd-form > label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.95rem;
}

.kd-form textarea {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.kd-form > button {
  align-self: flex-start;
}

.kd-art {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem 0.7rem;
  margin: 0;
  min-width: 0; /* fieldset ist sonst mind. so breit wie "zum [Datum]" - große Schrift: über den Rand (#117) */
}

.kd-radio input[type="date"] {
  max-width: 100%;
  min-width: 0;
}

.kd-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.kd-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
}

.kd-summary dt {
  color: var(--color-ink-soft);
}

.kd-summary dd {
  margin: 0;
  white-space: pre-wrap;
}

.kd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 480px) {
  .kd-summary {
    grid-template-columns: 1fr;
  }

  .kd-summary dd {
    margin-bottom: 0.4rem;
  }
}

@media print {
  .legal-header,
  .legal-footer,
  #kd-print {
    display: none;
  }
}

.kd-table tr.kd-offen td:first-child {
  color: var(--color-rust);
  font-weight: 600;
}

.legal-missing {
  padding: 0 0.25rem;
  border-radius: 3px;
  background: var(--color-rust-soft);
  color: color-mix(in srgb, var(--color-rust) 78%, #000); /* Rot auf Rosa sonst nur 4,1 : 1 (#117 V02) */
  font-weight: 600;
}

.legal-as-of {
  margin-top: 1.5rem;
  color: var(--color-ink-soft);
}

/* ---------- Nützliches ---------- */

.useful-pos {
  margin: 0.75rem 0 0.25rem;
}

.useful-pos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem 1rem;
}

.useful-pos-row label {
  flex: 0 1 18rem;
  min-width: 0;
}

.useful-pos-row .hint {
  margin: 0 0 0.6rem;
}

.useful-pos-row .link-button {
  margin-bottom: 0.6rem;
}

.useful-pick .hint {
  margin: 0.5rem 0 0.35rem;
}

.useful-pick-map {
  height: 300px;
}

.useful-subtabs {
  margin: 0.5rem 0 0;
}

/* Funkplanung als Unter-Tab von Nützliches (#026) */
.useful-plan {
  margin-top: 1rem;
}

/* Wetterbericht (#023) */
.wx-title {
  margin-top: 1.75rem;
}

.wx-list h4 {
  margin: 1.1rem 0 0.4rem;
}

.wx-grid {
  display: grid;
  gap: 0.4rem;
}

.wx-grid-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.wx-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wx-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.2rem;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-panel);
  font-size: 0.82rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wx-past {
  justify-content: center;
  opacity: 0.6;
}

.wx-label {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.wx-temp {
  font-size: 1.05rem;
  font-weight: 700;
}

.wx-min {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.wx-rain {
  color: #2d6cc0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.35rem;
}

.wx-rain > span {
  white-space: nowrap;
}

.wx-dry {
  color: var(--color-ink-soft);
}

.wx-wind {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.15rem;
  color: var(--color-ink-soft);
  font-size: 0.95em;
}

.wx-wind .wx-unit {
  font-size: 0.9em;
}

.wx-wind svg {
  color: #2f5f8f;
}

.wx-days {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.wx-day {
  display: grid;
  grid-template-columns: 7.5rem 2.2rem 5.5rem minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.wx-dayname {
  font-weight: 600;
}

/* Regen und Wind: am Desktop eigene Spalten, am Handy untereinander */
.wx-extra {
  display: contents;
}

.licht-list + .hint {
  margin-top: 1rem;
}

.wx-list > .hint {
  margin-top: 0.9rem;
}

.radar-legend-box {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.radar-legend-box summary {
  cursor: pointer;
}

@media (max-width: 720px) {
  .wx-grid-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wx-day {
    grid-template-columns: 4.6rem 2rem 4.4rem minmax(0, 1fr);
  }
  .wx-extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.8rem;
  }
}

/* Büchsenlicht */
.licht-daybar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.licht-daybar select {
  flex: 1;
  min-width: 0; /* sonst schiebt der lange Tagesname den Knopf "▶" aus dem Bild (#117) */
  max-width: 20rem;
}

.licht-daybar .link-button {
  font-size: 1.1rem;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.licht-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1rem;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.licht-sun {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.licht-sun > div,
.licht-moon > div {
  display: flex;
  flex-direction: column;
}

.licht-moon {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.licht-label {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.licht-big {
  font: 700 1.9rem/1.15 var(--font-serif);
  font-variant-numeric: tabular-nums;
}

.licht-big small {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.licht-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.moon-icon {
  flex: none;
}

.moon-icon.moon-dim {
  opacity: 0.35;
}

.licht-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.licht-row {
  display: grid;
  grid-template-columns: 5.5rem 7rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--color-line);
}

.licht-time {
  font: 700 1.6rem/1 var(--font-serif);
  font-variant-numeric: tabular-nums;
}

.licht-range {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.licht-moonval {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.licht-moonval strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.licht-bar {
  display: block;
  width: 7rem;
  height: 5px;
  margin: 2px 0;
  border-radius: 3px;
  background: var(--color-line);
  overflow: hidden;
}

.licht-bar span {
  display: block;
  height: 100%;
  background: #d8b84a;
}

/* Brauchbarkeit nach Tischoff (#038) */
.licht-rating {
  display: inline-block;
  align-self: flex-start;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.licht-rating.licht-gut {
  background: #dcefd9;
  color: #1f5e1c;
}

.licht-rating.licht-mittel {
  background: #f7ebc6;
  color: #7a5a06;
}

.licht-rating.licht-schwach {
  background: #ebeef0;
  color: #57656c;
}

.licht-bar.licht-gut span {
  background: #3f9a3a;
}

.licht-bar.licht-mittel span {
  background: #d8b84a;
}

.licht-bar.licht-schwach span {
  background: #a9b4ba;
}

.licht-dusk .licht-big {
  color: var(--color-forest);
}

.licht-clouds {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}

/* Jagdzeiten */
.jagd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
}

/* Felder mit langen Auswahllisten in umbrechenden Zeilen dürfen schrumpfen (#117) */
.jagd-controls > label,
.kal-row > label {
  min-width: 0;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg.seg-wrap {
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.seg button {
  background: var(--color-panel);
  color: var(--color-ink);
  border: none;
  border-right: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.seg button:last-child {
  border-right: none;
}

.seg button[aria-pressed="true"] {
  background: var(--color-forest);
  color: #fff;
}

.useful-jagd {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.useful-jagd li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.25rem 1rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9rem;
}

.useful-jagd-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* Piktogramme der Wildarten (wildarten.js) */
.wild-pic {
  --wild-bg: var(--color-panel);
  color: var(--color-forest-dark);
  flex: none;
  display: inline-flex;
}

.jahr-table .wild-pic {
  vertical-align: middle;
  margin-right: 0.35rem;
}

.useful-jagd-zeiten .season-open {
  color: var(--color-forest);
  font-weight: 600;
}

.useful-warn {
  color: var(--color-amber);
  font-weight: 600;
}

.jahr-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.jahr-table {
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 40rem;
  width: 100%;
}

.jahr-table th,
.jahr-table td {
  border: 1px solid var(--color-line);
  padding: 0;
}

.jahr-table thead th {
  font-weight: 600;
  padding: 0.2rem 0;
  text-align: center;
  color: var(--color-ink-soft);
}

.jahr-table tbody th {
  text-align: left;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  min-width: 9rem;
  position: sticky;
  left: 0;
  background: var(--color-panel);
}

.jahr-sub {
  display: block;
  font-weight: 400;
  color: var(--color-ink-soft);
}

.jahr-table td {
  width: 1.1rem;
  height: 1.6rem;
}

.jahr-voll {
  background: var(--color-forest);
}

.jahr-teil {
  background: color-mix(in srgb, var(--color-forest) 45%, transparent);
}

.jahr-table td.jahr-heute {
  outline: 2px solid var(--color-amber);
  outline-offset: -2px;
}

.jahr-legend {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: middle;
  border: 1px solid var(--color-line);
}

@media (max-width: 600px) {
  .licht-summary {
    grid-template-columns: 1fr;
  }
  .licht-row {
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .licht-range {
    display: none;
  }
  .licht-time {
    font-size: 1.35rem;
  }
  .licht-bar {
    width: 4.5rem;
  }
  .useful-jagd li {
    grid-template-columns: 1fr;
  }
  .jahr-table tbody th {
    min-width: 7rem;
    padding: 0.3rem 0.35rem;
  }
}

/* ---------- Revierkarte ---------- */

/* Revierauswahl: Beschriftung und Auswahl in einer Zeile, Abstand zum Hinweis darunter (der .hint hat oben -0.5rem;
   als Inline-Label ragte die Auswahl sonst in dessen erste Zeile) */
.rk-revier-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-bottom: 1rem;
  min-width: 0;
}

.rk-revier-select select {
  max-width: 24rem;
  min-width: 0;
  flex: 0 1 auto;
}

.rk-toolbar {
  flex-wrap: wrap;
}

.rk-map {
  height: 560px;
}

.rk-map.rk-drawing {
  cursor: crosshair;
}

.rk-boundary-tools,
.rk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.rk-notice {
  color: var(--color-forest);
  font-weight: 600;
}

/* Einrichtungen: eckig und erdfarben, damit sie sich von den runden Gerätesymbolen abheben */
.rk-marker {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background: #7a5230;
  color: #fff;
  font: 700 0.72rem/1 var(--font-sans);
  flex: none;
}

.rk-marker.rk-kanzel { background: #5c3d1f; }
.rk-marker.rk-leiter { background: #a0703f; }
.rk-marker.rk-drueckjagdbock { background: #8a5a2b; }
.rk-marker.rk-kirrung { background: #b8860b; }
.rk-marker.rk-salzlecke { background: #6d7f8c; }
.rk-marker.rk-wildacker { background: #4f7a28; }
.rk-marker.rk-falle { background: #444; }
.rk-marker.rk-sonstiges { background: #777; }
.rk-marker.rk-wildkamera { background: #2f4f5f; } /* #051, Kamerasymbol (SVG) statt Buchstabe */

/* Belegung der Ansitze (#053): Punkt am Symbol, rot = besetzt, gelb = gerade reserviert */
.rk-marker.rk-sitz-besetzt,
.rk-marker.rk-sitz-reserviert {
  position: relative;
}

.rk-marker.rk-sitz-besetzt::after,
.rk-marker.rk-sitz-reserviert::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--color-rust);
}

.rk-marker.rk-sitz-reserviert::after {
  background: var(--color-amber);
}

.rk-sitz {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 0.6rem;
}

.rk-sitz h4 {
  margin: 0;
}

.rk-sitz-status {
  margin: 0;
  font-weight: 600;
  color: var(--color-forest);
}

.rk-sitz-status-besetzt {
  color: var(--color-rust);
}

.rk-sitz-status-reserviert {
  color: var(--color-amber);
}

.rk-sitz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.rk-sitz-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-line);
  border-radius: 6px;
}

.rk-sitz-item.rk-sitz-mine {
  border-color: var(--color-forest);
}

.rk-sitz-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.rk-sitz-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.rk-sitz-form label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.rk-sitz-form input {
  min-width: 0;
}

#rk-sitz-now {
  justify-self: start;
}

.revier-sitz-row {
  display: grid;
  gap: 0.3rem;
  max-width: 22rem;
}

/* Empfohlene Schussentfernung am Ansitz */
.rk-shot-hint {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
}

#rk-editor-view.rk-view-active {
  background: var(--color-forest);
  color: #fff;
}

/* Schussfeld rundum (Kästchen im Editor) */
#rk-editor-form .rk-fov360-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: -0.2rem;
  text-align: left;
  font-weight: 400;
}

#rk-editor-form .rk-fov360-row input {
  width: auto;
  margin: 0;
}

/* Schussfeld: Entfernungen an den Endpunkten */
.rk-dist-label {
  background: none;
  border: 0;
  white-space: nowrap;
}

.rk-dist-label span {
  display: inline-block;
  transform: translate(-50%, -150%);
  padding: 0 0.3rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #b5651d;
  color: #7a4212;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rk-dist-label.rk-dist-kf span {
  border-color: #3c7d3a;
  color: #2a5c28;
}

.rk-dist-label.rk-dist-mid span {
  background: #b5651d;
  color: #fff;
}

.rk-cam-handle.rk-shot-handle {
  border-color: #b5651d;
}

.rk-cam-handle.rk-shot-handle.rk-cam-mid {
  background: #b5651d;
  border-color: #fff;
}

/* Kamerakegel auf der Karte ziehen: Schenkel-Enden (Rand) und Mitte (Richtung) */
.rk-cam-handle {
  border-radius: 50%;
  background: #fff;
  border: 3px solid #2f4f5f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: grab;
}

.rk-cam-handle.rk-cam-mid {
  background: #2f4f5f;
  border-color: #fff;
}

.rk-cam-handle:active {
  cursor: grabbing;
}

.rk-marker .rk-cam {
  display: block;
  width: 70%;
  height: 70%;
}

.rk-marker.rk-selected {
  outline: 3px solid var(--color-amber);
}

/* Nützliches → Empfangstest: Messpunkte der Field Tester (#030, #042) */
.et-controls {
  margin-top: 0.5rem;
}

.et-tester {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.5rem;
}

.et-tester .hint {
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
}

.et-map {
  height: 55vh;
  min-height: 360px;
}

@media (max-width: 760px) {
  .et-map {
    height: 50vh;
    min-height: 300px;
  }
}

.et-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}

.et-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.et-dot {
  display: inline-block;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  margin-right: 0.3rem;
  vertical-align: -0.1rem;
}

.et-legend .et-dot {
  margin-right: 0;
}

.fp-q-nosnr {
  background: #6d7f8c;
}

.rk-device.et-legend-gw {
  width: 20px;
  height: 20px;
  font-size: 0.55rem;
}

.rk-device.et-gw-faint {
  opacity: 0.45;
}

.et-title {
  margin-top: 1.5rem;
}

.et-table-wrap {
  overflow-x: auto;
}

.et-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.et-table td,
.et-table th {
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: top;
}

.et-table thead th {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-line);
}

.et-table tbody tr {
  cursor: pointer;
}

/* Linie nur zwischen den Messpunkten, nicht zwischen den Gateways eines Messpunkts */
.et-table tbody tr.et-first td {
  border-top: 1px solid var(--color-line);
}

.et-table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-forest) 6%, transparent);
}

.et-time .ab-sub {
  font-size: 0.75rem;
}

.et-time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.et-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.et-del-one {
  display: block;
  padding: 0;
  font-size: 0.78rem;
}

.et-delete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.9rem;
  margin: 1rem 0 0.9rem; /* #060: Abstand zum Hinweis darunter */
}

.et-popup-table {
  border-collapse: collapse;
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

.et-popup-table td {
  padding: 0.15rem 0.4rem 0.15rem 0;
  white-space: nowrap;
}

.et-popup-table tr.et-dim {
  opacity: 0.5;
}

.et-popup-miss {
  margin: 0.25rem 0 0;
}

@media (max-width: 480px) {
  .et-table {
    font-size: 0.8rem;
  }

  .et-table td,
  .et-table th {
    padding: 0.3rem 0.3rem;
  }
}

/* Geräte ohne Standort (#029) */
.rk-nopos-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rk-nopos-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-line);
}

.rk-nopos-item > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rk-nopos-item button {
  flex: none;
  width: auto;
  padding: 0.35rem 0.8rem;
}

#rk-map.rk-placing,
#rk-map.rk-placing .leaflet-interactive {
  cursor: crosshair;
}

/* zum Verschieben freigegeben (#035) */
.rk-marker.rk-moving {
  outline: 3px dashed var(--color-forest);
  outline-offset: 2px;
  cursor: grab;
  animation: rk-move-pulse 1.2s ease-in-out infinite;
}

@keyframes rk-move-pulse {
  50% { transform: scale(1.15); }
}

.rk-move-hint {
  color: var(--color-forest);
  font-weight: 600;
}

.outline-button {
  background: var(--color-panel);
  color: var(--color-forest);
  border: 1px solid var(--color-forest);
}

.rk-device {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background: var(--rk-color);
  color: #fff;
  font: 700 0.7rem/1 var(--font-sans);
}

.rk-vertex {
  background: #fff;
  border: 2px solid #c23b2e;
  border-radius: 50%;
}

.rk-vertex-mid {
  background: #c23b2e;
  border-color: #fff;
  opacity: 0.75;
}

.rk-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); /* min(): große Schrift am Handy (#117) */
  gap: 0.5rem;
}

.rk-list-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: var(--color-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.rk-list-item:hover {
  background: var(--color-panel);
  border-color: var(--color-forest);
}

@media (max-width: 600px) {
  .rk-map {
    height: 70vh;
  }
  /* Handy: Einrichtungen in einer wischbaren Zeile statt vier Zeilen über der Karte */
  .rk-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rk-toolbar .fp-tool,
  .rk-toolbar .link-button {
    flex: none;
  }
}

/* Revier-Modus der Funkplanung und Planpunkte in der Revierkarte */
.fp-revier-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-forest);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--color-panel);
  font-size: 0.9rem;
}

.fp-revier-banner p {
  margin: 0;
  flex: 1 1 20rem;
}

.rk-device.rk-planned {
  background: var(--color-panel);
  color: #1c3d8c;
  border: 2px dashed #1c3d8c;
}

.rk-marker.rk-faint {
  opacity: 0.75;
  width: 20px;
  height: 20px;
  font-size: 0.62rem;
}

/* Revierkarte: Legende und Druckansicht */
.rk-print-title {
  display: none;
}

.rk-legend {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.5rem 0;
  font-size: 0.8rem;
}

.rk-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.rk-legend .rk-marker,
.rk-legend .rk-device {
  width: 18px;
  height: 18px;
  font-size: 0.55rem;
  box-shadow: none;
}

.rk-legend-border {
  display: inline-block;
  width: 22px;
  border-top: 3px solid #c23b2e;
}

@media print {
  body.rk-printing .topbar,
  body.rk-printing .tabbar,
  body.rk-printing .legal-footer,
  body.rk-printing #revier-nav, /* "Revier" mit Auswahlfeld steht seit #055 über der Karte (#117) */
  body.rk-printing #revierkarte-view > .section-header,
  body.rk-printing #revierkarte-view .rk-revier-select,
  body.rk-printing #revierkarte-view .hint,
  body.rk-printing #revierkarte-view .rk-toolbar,
  body.rk-printing #revierkarte-view .rk-bar,
  body.rk-printing #revierkarte-view .rk-boundary-tools,
  body.rk-printing #revierkarte-view .fp-editor,
  body.rk-printing #revierkarte-view .form-error,
  body.rk-printing .leaflet-control-container .leaflet-top {
    display: none !important;
  }
  body.rk-printing .content {
    max-width: none;
    padding: 0;
  }
  body.rk-printing .rk-print-title {
    display: block;
    font-size: 14pt;
    margin: 0 0 4mm;
  }
  body.rk-printing .rk-legend {
    display: flex;
  }
  body.rk-printing .rk-map {
    height: 150mm;
    break-inside: avoid;
  }
  body.rk-printing .rk-list-item {
    break-inside: avoid;
  }
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* Vor dem Druck die Karte schon auf Druckgröße bringen, damit die richtigen Kacheln geladen sind */
body.rk-printing .content {
  max-width: none;
}

body.rk-printing .rk-map {
  height: 150mm;
  width: 277mm;
}

/* Offline-Hinweis (sw.js liefert den gespeicherten Stand) */
.offline-banner {
  padding: 0.5rem 1rem;
  background: var(--color-amber);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* Einrichtung, die ohne Netz gesetzt/geändert wurde und noch übertragen werden muss */
.rk-marker.rk-pending {
  outline: 2px dashed var(--color-amber);
  outline-offset: 2px;
}

/* Regenradar (Nützliches) */
.radar-map {
  height: 420px;
}

/* Grundkarte grau, nur der Niederschlag farbig */
.radar-map .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.85) brightness(1.08);
}

.radar-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.radar-controls input[type="range"] {
  flex: 1;
  min-width: 0;
}

#radar-play {
  width: 2.75rem;
  flex: none;
}

.radar-label {
  min-width: 9.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.radar-label.radar-future {
  color: var(--color-amber);
}

.radar-legend {
  display: block;
  max-width: 100%;
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .radar-map {
    height: 60vh;
  }
  .radar-label {
    min-width: 0;
    font-size: 0.85rem;
  }
}

/* Wind-Overlay der Revierkarte */
.rk-wind-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.rk-wind-toggle {
  background: var(--color-panel);
  color: var(--color-ink);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.rk-wind-toggle[aria-pressed="true"] {
  background: #4a7fb5;
  color: #fff;
}

.rk-wind-panel {
  background: color-mix(in srgb, var(--color-panel) 92%, transparent);
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  color: var(--color-ink);
  max-width: 17rem;
}

.rk-wind-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rk-wind-fold {
  margin-left: auto;
  padding-left: 0.4rem;
  color: var(--color-ink-soft);
}

.rk-wind-arrow {
  display: inline-flex;
}

/* Wind genau am ausgewählten Ansitz (#044) */
.rk-wind-spot {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.12));
  line-height: 1.35;
}

.rk-wind-hours {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.4rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-ink-soft);
}

.rk-wind-hours button {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.15rem 0.25rem;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.rk-wind-hours button[aria-pressed="true"] {
  border-color: #4a7fb5;
  color: var(--color-ink);
}

.rk-wind-hours svg {
  vertical-align: middle;
}

/* Nautische Windfahnen (#033): dunkel mit hellem Rand, auf jedem Kartenhintergrund lesbar */
.rk-wind-gridarrow {
  background: none;
  border: 0;
}

.rk-barb {
  display: block;
  overflow: visible;
}

.rk-barb-halo {
  stroke: #fff;
  fill: #fff;
  stroke-width: 5;
  opacity: 0.9;
}

.rk-barb-ink {
  stroke: #14212b;
  fill: #14212b;
  stroke-width: 2.2;
}

.rk-wind-hours .rk-barb {
  display: inline-block;
}

/* Witterungssymbol am Keil des ausgewählten Ansitzes (#041): Wellen in Keilblau, kräftig, mit hellem Rand */
.rk-scent-ink {
  stroke: #1d4f80;
  stroke-width: 2.6;
}

.rk-scent .rk-barb-halo {
  stroke-width: 6;
}

.rk-wind-legend p .rk-scent {
  display: inline-block;
  vertical-align: middle;
}

.rk-wind-legend summary {
  cursor: pointer;
  font-weight: 600;
}

.rk-wind-legend {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  line-height: 1.35;
}

.rk-wind-legend p {
  margin: 0.25rem 0;
}

.rk-wind-legend ul {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0;
}

.rk-wind-legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rk-wind-legend .rk-barb {
  flex: none;
}

.rk-wind-src {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-ink-soft);
}

@media print {
  body.rk-printing .rk-wind-toggle,
  body.rk-printing .rk-wind-panel,
  body.rk-printing .rk-wind-gridarrow {
    display: none;
  }
}

/* Reviergrenze aus Datei, Flurstücken und Jagdbezirken (#047) */
.rk-flst-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.rk-flst-msg {
  max-width: 11rem;
  background: color-mix(in srgb, var(--color-panel) 92%, transparent);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  text-align: right;
}

.rk-pick-bar {
  padding: 0.5rem 0.6rem;
  border: 1px solid #c23b2e;
  border-radius: 8px;
}

.rk-pick-info {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 2.8em; /* Text wechselt beim Antippen - die Karte soll nicht springen */
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .rk-pick-info {
    min-height: 4.3em;
  }
}

.rk-pick-crs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.rk-pick-crs select {
  max-width: 100%;
  min-width: 0;
}

.rk-geo-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.rk-map.rk-picking .leaflet-interactive {
  cursor: pointer;
}

@media print {
  body.rk-printing .rk-flst-msg,
  body.rk-printing .rk-pick-bar,
  body.rk-printing .rk-geo-hint {
    display: none;
  }
}

/* Filter der Revierkarte (#049): Knopf oben rechts über "Wind", aufklappbares Feld */
.rk-filter-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.rk-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-panel);
  color: var(--color-ink);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.rk-filter-toggle:hover {
  background: var(--color-panel);
  border-color: rgba(0, 0, 0, 0.35);
}

.rk-filter-toggle.rk-filter-on {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}

.rk-filter-count {
  min-width: 1.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #c23b2e;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.3rem;
  text-align: center;
}

.rk-filter-panel {
  width: 16.5rem;
  max-width: calc(100vw - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--color-panel) 96%, transparent);
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  padding: 0.45rem 0.6rem 0.5rem;
  font-size: 0.82rem;
  color: var(--color-ink);
}

.rk-filter-head,
.rk-filter-ghead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rk-filter-head strong {
  flex: 1;
}

.rk-filter-head .link-button,
.rk-filter-allnone .link-button {
  font-size: 0.78rem;
  padding: 0.2rem 0;
}

.rk-filter-close {
  background: none;
  border: none;
  color: var(--color-ink);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
}

.rk-filter-close:hover {
  background: none;
  border: none;
  color: var(--color-ink);
}

.rk-filter-group {
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--color-line);
}

.rk-filter-ghead strong {
  flex: 1;
  font-size: 0.78rem;
}

.rk-filter-allnone {
  display: inline-flex;
  gap: 0.6rem;
}

.rk-filter-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem; /* gut zu treffen am Handy */
  cursor: pointer;
}

.rk-filter-item input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  flex: none;
}

.rk-filter-item .rk-marker,
.rk-filter-item .rk-device {
  width: 20px;
  height: 20px;
  font-size: 0.55rem;
  box-shadow: none;
  border-width: 1px;
  flex: none;
}

.rk-filter-item .rk-legend-border {
  width: 20px;
  flex: none;
}

.rk-filter-abc {
  width: 20px;
  flex: none;
  text-align: center;
  font-weight: 700;
  font-size: 0.75rem;
}

.rk-filter-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rk-filter-n {
  color: var(--color-ink-soft);
  font-size: 0.75rem;
}

.rk-filter-state {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.rk-filter-state select {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
}

.rk-filter-note {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}

/* Namensschilder: aus im Filter bzw. ausgeblendet, wo sie sich überdecken würden */
#rk-map.rk-no-labels .fp-marker-label {
  display: none;
}

#rk-map .fp-marker-label.rk-label-off {
  visibility: hidden;
}

/* Liste: ausgeblendete Einrichtungen blass, im Ausdruck weg */
.rk-list li.rk-filter-out {
  opacity: 0.5;
}

.rk-legend-filter {
  flex-basis: 100%;
  color: var(--color-ink-soft);
}

@media print {
  body.rk-printing .rk-list li.rk-filter-out {
    display: none;
  }
}

/* Mitglieder: zuständig für die Jagdstatistik (#052) */
.member-statistik.is-on {
  color: var(--color-forest);
  font-weight: 600;
}

/* ---------- Abschussliste (#036) ---------- */

.ab-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.ab-controls label {
  min-width: 0;
}

.ab-links {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap; /* mit "Drucken / PDF" vier Links - am Handy umbrechen statt zweizeiliger Links (#117 V03) */
  gap: 0 1rem;
}

.ab-links > * {
  white-space: nowrap;
}

.ab-form-panel {
  margin-bottom: 1.25rem;
}

.ab-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}

.ab-form .ab-wide,
.ab-form-head {
  grid-column: 1 / -1;
}

.ab-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.ab-form-head h3 {
  margin: 0;
}

.ab-form > label:not(.ab-check) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ab-form input:not([type="checkbox"]),
.ab-form select,
.ab-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.ab-form .ab-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: end;
}

.ab-table-wrap {
  overflow-x: auto;
}

.ab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ab-table th,
.ab-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.ab-table thead th {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

.ab-table tr.ab-editable {
  cursor: pointer;
}

.ab-table tr.ab-editable:hover td {
  background: color-mix(in srgb, var(--color-forest) 6%, transparent);
}

.ab-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ab-wild {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
}

/* Tabelle (ab 901 px): die Wildart-Zelle ist eine Flex-Box und damit keine echte Tabellenzelle - ihre Trennlinie
   endete mitten in der Zeile, sobald der Ort zweizeilig war. Linie deshalb an der Zeile statt an den Zellen (#117). */
@media (min-width: 901px) {
  .ab-table:not(.ab-stats) tbody td {
    border-bottom: 0;
  }
  .ab-table:not(.ab-stats) tbody tr {
    border-bottom: 1px solid var(--color-line);
  }
}

.ab-sub {
  display: block;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
}

.ab-sub-inline {
  color: var(--color-ink-soft);
}

.ab-art {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.ab-art-abschuss {
  background: #dcefd9;
  color: #1f5e1c;
}

.ab-art-fund {
  background: #ebeef0;
  color: #4a575e;
}

.ab-stats td {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ab-stats tbody th,
.ab-stats tfoot th {
  white-space: nowrap;
}

.ab-stats .wild-pic {
  vertical-align: middle;
  margin-right: 0.35rem;
}

.ab-stats tfoot td,
.ab-stats tfoot th {
  border-top: 2px solid var(--color-line);
}

@media (max-width: 640px) {
  .ab-form {
    grid-template-columns: 1fr;
  }
  .ab-links {
    margin-left: 0;
  }
}

/* Liste schon unter 900 px als Karten, sonst müsste man die Tabelle seitlich schieben */
@media (max-width: 900px) {
  /* Liste als Karten: Datum/Wildart/Art oben, der Rest darunter mit Beschriftung */
  .ab-table:not(.ab-stats) thead {
    display: none;
  }
  .ab-table:not(.ab-stats) tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.15rem 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-line);
  }
  .ab-table:not(.ab-stats) td {
    border: 0;
    padding: 0;
  }
  .ab-table:not(.ab-stats) td[data-label] {
    grid-column: 1 / -1;
    font-size: 0.82rem;
  }
  .ab-table:not(.ab-stats) td[data-label]:empty {
    display: none;
  }
  .ab-table:not(.ab-stats) td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--color-ink-soft);
  }
}

/* Abschussliste #050: Jagdjahr-Hinweis, Auswertung je Erleger, Stammlisten */
.ab-jj-hint {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--color-ink-soft);
}

.ab-h {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
}

#ab-list > .ab-h:first-child {
  margin-top: 0;
}

.ab-jaeger-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 1.75rem 0 0.6rem;
}

.ab-jaeger-head .ab-h {
  margin: 0;
}

.ab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.6rem;
}

.ab-sw {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: -1px;
}

.ab-sw-e,
.ab-bar-e {
  background: var(--color-forest);
}

.ab-sw-f,
.ab-bar-f {
  background: #a3afb4;
}

.ab-bars {
  display: grid;
  gap: 0.6rem;
  max-width: 40rem;
  margin-bottom: 1rem;
}

.ab-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.ab-bar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ab-bar-num {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ab-bar {
  display: flex;
  gap: 2px;
  height: 0.7rem;
  margin-top: 0.2rem;
}

.ab-bar span {
  display: block;
  min-width: 3px;
}

.ab-bar span:last-child {
  border-radius: 0 4px 4px 0;
}

.ab-jaeger tbody th,
.ab-jaeger thead th:first-child,
.ab-jaeger tfoot th {
  position: sticky;
  left: 0;
  background: var(--color-bg);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ab-jaeger thead th {
  white-space: normal;
  min-width: 3.2rem;
}

.ab-stat-hint {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.ab-stamm-panel {
  margin-bottom: 1.25rem;
}

.ab-stamm-panel .seg {
  margin: 0.75rem 0;
}

.ab-stamm-new {
  display: flex;
  gap: 0.5rem;
}

.ab-stamm-new input {
  flex: 1;
  min-width: 0;
}

.ab-stamm-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.ab-st-row {
  display: flex;
  flex-direction: column; /* Name oben, Aktionen darunter - unabhängig von der Namenslänge gleich */
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-line);
}

.ab-st-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ab-st-hidden .ab-st-name {
  opacity: 0.6;
}

.ab-st-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  min-width: 0;
}

.ab-st-actions select {
  max-width: 100%;
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
}

/* Combobox (combobox.js, #050): Vorschlagsliste direkt am Feld statt <datalist> */
.cb {
  position: relative;
  min-width: 0;
}

.cb > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.2rem;
}

.cb-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.cb-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 1000;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(19, 32, 38, 0.16);
}

.cb-list.cb-up {
  top: auto;
  bottom: calc(100% + 2px);
}

.cb-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.6rem;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
}

.cb-opt:hover,
.cb-opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-forest) 10%, transparent);
}

.cb-val {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cb-create .cb-val {
  color: var(--color-forest);
  font-weight: 600;
}

.cb-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-soft);
  font-size: 0.78rem;
}

.cb-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Testfunktionen und App-Freischaltung (#054) ---------- */
.test-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--color-amber);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}

.test-feature-list {
  display: grid;
  gap: 0.6rem;
}

.test-feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 1rem;
}

.app-locked .tabbar,
.app-locked .content,
.app-locked #topbar-settings {
  display: none;
}

.app-blocked {
  max-width: 32rem;
  margin: 2rem auto;
  padding: 1.5rem 16px;
  text-align: center;
}

/* ---------- Reiter Revier und Fallen (#055) ---------- */
.rv-head {
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.rv-head h2 span:not(:empty)::before {
  content: "· ";
  font-weight: 400;
}

.rv-revier-select select {
  min-width: 12rem;
  max-width: 100%;
}

/* sonst bestimmt der längste Reviername die Breite und das Feld ragt aus dem Bild (#117) */
.rv-revier-select {
  min-width: 0;
  max-width: 100%;
}

.rv-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* Zeilen nie breiter als die Spalte (große Schrift, lange Namen) (#117) */
  gap: 0.35rem;
}

.rv-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-panel);
  color: var(--color-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.rv-row:hover {
  border-color: var(--color-forest);
}

.rv-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-forest);
}

.rv-status-besetzt {
  color: var(--color-rust);
}

.rv-status-reserviert {
  color: var(--color-amber);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Übersicht einer Einrichtung in der Kartenansicht (#056) */
.rk-info {
  display: grid;
  gap: 0.35rem;
}

.rk-info p {
  margin: 0;
}

.rk-info-line {
  font-weight: 500;
}

.rk-info-notes {
  white-space: pre-line;
}

/* Ansitzplaner (#056) */
.rv-planer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1.5rem;
  margin: 0.5rem 0 0.75rem;
}

.rv-planer-height {
  flex: 1 1 14rem;
}

.rv-planer-kind,
.rv-planer-height {
  display: grid;
  gap: 0.25rem;
  max-width: 24rem;
}

.rv-planer-height input {
  width: 100%;
}

.rv-planer-map {
  height: 60vh;
  min-height: 320px;
}

.rv-planer-sum {
  font-weight: 600;
  margin-top: 0;
}

.rv-planer-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 28rem;
  margin-bottom: 0.75rem;
}

.rv-planer-table th,
.rv-planer-table td {
  text-align: left;
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--color-line);
}

.rk-marker.rv-plan-existing {
  opacity: 0.55;
}

/* Ladeanzeige am Ansitz (#057) */
.rk-dist-label.rk-dist-loading span {
  display: inline-block;
  transform: translate(-50%, -2.4rem);
  background: #132026;
  color: #fff;
  border-color: #132026;
  white-space: nowrap;
  animation: rk-loading 1.2s ease-in-out infinite alternate;
}

@keyframes rk-loading {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* Entfernung messen (#058) */
.map-measure-button {
  display: grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #fff;
  color: #132026;
}

.map-measure-button.is-on {
  background: var(--color-forest);
  color: #fff;
}

.map-measuring,
.map-measuring .leaflet-interactive,
.map-measuring .leaflet-marker-icon {
  cursor: crosshair !important;
}

.map-measure-label span {
  display: inline-block;
  transform: translate(10px, -50%);
  padding: 2px 7px;
  border-radius: 4px;
  background: #132026;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Verwaltung -> Höhenmodell (#059) */
.dgm-form label {
  display: grid;
  gap: 0.2rem;
}

#dgm-progress {
  width: 100%;
  max-width: 28rem;
}

/* Ansitzplaner: Fortschritt der Kacheln (#064) */
.rv-planer-tiles {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

/* Ansitz besetzt: Name des Jägers am Schild (#068) */
.fp-marker-label.rk-label-besetzt {
  background: var(--color-rust);
  color: #fff;
  border-color: var(--color-rust);
}

/* Gast beim Buchen (#069) */
.rk-sitz-gast {
  display: grid;
  gap: 0.2rem;
  max-width: 22rem;
}

/* Ort aus dem Standort (#070) */
.ab-ort-hint {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
}

/* Karte der Strecke (#071) */
/* Filter der Abschussliste */
.ab-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0;
}

.ab-filter label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}

.ab-filter select {
  min-width: 9rem;
}

.ab-map {
  margin-top: 0.25rem;
}

.ab-map {
  height: 60vh;
  min-height: 320px;
}

.ab-pin {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--color-forest);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
}

.ab-pin svg,
.ab-pin img {
  width: 16px;
  height: 16px;
}

.ab-pin-unfall {
  border-color: var(--color-rust);
  background: var(--color-rust-soft);
}

.ab-pin-fund {
  border-color: #8a9399;
}

.ab-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

/* .hint rückt sonst mit -0,5rem in die (am Handy zweizeilige) Legende (#117) */
.ab-map-legend + .hint {
  margin-top: 0.5rem;
}

.ab-map-legend .ab-pin {
  width: 16px;
  height: 16px;
  border-width: 3px;
  margin-right: 0.2rem;
}

/* Ansitzplaner: Art und Höhe als Feld in der Karte (auch im Vollbild) */
/* klein: nur ein Knopf "Kanzel · 5 m"; das Feld (eine Zeile) klappt beim Antippen auf */
.leaflet-control.rv-planer-controls {
  margin: 0 0 10px 10px;
  background: var(--color-panel);
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  font-size: 0.85rem;
  max-width: calc(100vw - 4rem);
}

.rv-planer-chip {
  display: block;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rv-planer-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0 0.6rem 0.5rem;
}

.rv-planer-panel[hidden] {
  display: none;
}

.rv-planer-panel select {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  min-height: 0;
}

.leaflet-control .rv-planer-height {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 9rem;
  max-width: 14rem;
}

.leaflet-control .rv-planer-height input {
  flex: 1;
  min-width: 6rem;
}

/* Wettersymbol mit Windsack daneben (Starkwind/Sturm) */
.wx-sym {
  display: inline-flex;
  align-items: flex-start;
  gap: 1px;
}

.wx-sym .wx-sock {
  margin-top: -2px;
}

/* Revier-Abo (#072) */
.abo-paypal {
  max-width: 22rem;
  margin: 0.5rem 0;
}

.abo-paypal:empty {
  display: none;
}

/* Bestellknopf (#099) und Lastschrift (GoCardless): so breit wie die PayPal-Knöpfe */
.abo-bestellen,
.abo-gc {
  width: 100%;
  max-width: 22rem;
  min-height: 45px;
}

.abo-oder {
  max-width: 22rem;
  margin: 0.25rem 0;
  text-align: center;
}

.abo-zahlungen {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

.abo-zahlungen li {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--color-line);
}

/* unbezahltes Revier (#072): Hinweis im Reiter Revier, in den Einstellungen nur der Abschnitt Abo */
.rv-locked {
  margin: 1.5rem auto;
  max-width: 32rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-rust);
  border-radius: 10px;
  background: var(--color-rust-soft);
  text-align: center;
}

.rv-locked h3 {
  margin-top: 0;
}

.revier-detail-locked > .subsection:not(#revier-abo-section) {
  display: none;
}

.abo-locked {
  color: var(--color-rust);
  font-weight: 600;
}

.abo-zahlungen a {
  margin-left: auto;
}

/* Aufpreise nach Flächenänderung (#098) */
.abo-aufpreis-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.abo-aufpreis-list li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-line);
}

.abo-aufpreis-offen span {
  color: var(--color-rust);
}

/* Erstattung nach Kündigung (#094): eigene Zeile unter der Zahlung */
.abo-zahlungen li {
  flex-wrap: wrap;
}

.abo-erstattung {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.abo-erstattung a {
  margin-left: 0.4rem;
}

.abo-erstattung-offen {
  color: var(--color-rust);
  font-weight: 600;
}

.re-table tr.re-korrektur td:nth-child(5) {
  color: var(--color-rust);
}

.re-erstattung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.re-erstattung-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Jetzt ansitzen (#073) */
.rv-belegung-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.rv-belegung-head h3 {
  margin: 0;
}

/* .hint zieht sich sonst mit -0.5rem unter den Knopf "Jetzt ansitzen" (Handy) */
#rv-belegung-free {
  margin-top: 0;
}

.rv-near {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-panel);
}

.rv-near-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-line);
}

.rv-near-row:last-child {
  border-bottom: 0;
}

/* Vor- und Nachname (#081) */
.name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
}

.name-row label {
  display: grid;
  gap: 0.25rem;
  flex: 1 1 10rem;
  min-width: 0;
}

/* Eingabefelder füllen die Spalte statt mit ihrer Standardbreite aus der Karte zu ragen (Registrierung, große Schrift) (#117) */
.name-row input {
  width: 100%;
  min-width: 0;
}

#account-name-form {
  margin-bottom: 0.5rem;
}

.name-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.25rem 1.5rem;
  border: 0;
  border-radius: 12px;
  background: var(--color-panel);
  color: var(--color-ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.name-dialog::backdrop {
  background: rgba(19, 32, 38, 0.45);
}

.name-dialog h2 {
  margin-top: 0;
}

.name-dialog-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Fehler melden (#119): Dialog (fehlermeldung.js) und Verwaltung -> Fehler */
.fm-dialog {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.fm-dialog textarea,
.fm-dialog input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
}

.fm-dialog textarea {
  resize: vertical;
  min-height: 6rem;
}

.fm-bild {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fm-label {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.fm-bild-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* Datei-Auswahl als Knopf; das eigentliche Feld bleibt für Tastatur und Screenreader erreichbar */
.stack label.fm-bild-knopf {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--color-forest);
  cursor: pointer;
}

.fm-bild-knopf input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.fm-bild-knopf:focus-within {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

#fm-vorschau {
  max-width: 6rem;
  max-height: 4rem;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  object-fit: cover;
}

.fm-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.fm-details pre {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.65rem;
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius);
}

.fm-filter {
  margin: 0.5rem 0 0.75rem;
}

.fm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.fm-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-line);
}

.fm-item p {
  margin: 0;
}

.fm-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.fm-nr {
  font-weight: 600;
  color: var(--color-ink);
}

.fm-status {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.fm-status-offen {
  color: color-mix(in srgb, var(--color-rust) 78%, #000); /* Rot auf Rosa sonst nur 4,1 : 1 (#117 V02) */
  background: var(--color-rust-soft);
}

.fm-status-erledigt {
  color: var(--color-forest);
  background: color-mix(in srgb, var(--color-forest) 12%, transparent);
}

.fm-kurz,
.fm-volltext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fm-meta {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

.legal-footer [data-fehler-melden] {
  white-space: nowrap;
}

.fm-erledigt .fm-kurz {
  color: var(--color-ink-soft);
}

.fm-bild-link img {
  display: block;
  max-width: min(12rem, 100%);
  max-height: 9rem;
  border: 1px solid var(--color-line);
  border-radius: 4px;
}

.fm-bearbeiten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.fm-notiz {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Abomodell (#079) */
.abo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.abo-zustimmung {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-amber);
  border-radius: 10px;
  margin: 0.5rem 0;
}

.abo-frei {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.admin-abo-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem 1rem;
  align-items: end;
}

.admin-abo-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.admin-abo-form h4,
.admin-abo-form button {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0.5rem 0 0;
}

.admin-abo-frei-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-line);
}

.table-scroll {
  overflow-x: auto;
}

.admin-abo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-abo-table th,
.admin-abo-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}

.abo-row-gesperrt td:first-child {
  color: var(--color-rust);
}

.abo-z-offen {
  color: var(--color-amber);
  font-weight: 600;
}

.abo-z-abgelehnt {
  color: var(--color-rust);
  font-weight: 600;
}

.admin-abo-form + .hint {
  margin-top: 0.75rem;
}

.admin-abo-table td:last-child {
  white-space: normal;
  min-width: 9rem;
}

/* Kostenfrei-Schalter je Revier (#084): Checkbox als Schiebeschalter */
.abo-switch {
  position: relative; /* hält die unsichtbare Checkbox im Scrollbereich der Tabelle */
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  white-space: nowrap;
}

/* allein stehender Schalter mit langer Beschriftung (Verwaltung → Abo) darf umbrechen (#117) */
.subsection > .abo-switch {
  white-space: normal;
}

.hint code {
  overflow-wrap: anywhere;
}

.abo-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.abo-switch span {
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 1.25rem;
  border-radius: 1rem;
  background: var(--color-line);
  transition: background 0.15s;
}

.abo-switch span::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}

.abo-switch input:checked + span {
  background: var(--color-forest);
}

.abo-switch input:checked + span::after {
  transform: translateX(0.95rem);
}

.abo-switch input:focus-visible + span {
  outline: 2px solid var(--color-forest);
  outline-offset: 2px;
}

.abo-switch input:disabled + span {
  opacity: 0.45;
}

.abo-switch:has(input:disabled) {
  cursor: not-allowed;
  color: var(--color-ink-soft);
}

/* Kalender (#075) */
.kal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.kal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lange Inhalte verbreitern das Formular nicht über den Rand (#117) */
  gap: 0.6rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-panel);
}

.kal-form h3 {
  margin: 0;
}

.kal-form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lange Auswahllisten (Wildzählung "Gehört zu") nicht breiter als die Zeile (#117) */
  gap: 0.25rem;
}

.kal-form .kal-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.kal-row[hidden] {
  display: none;
}

.kal-day {
  margin: 1.25rem 0 0.4rem;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.kal-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kal-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-forest);
  border-radius: 8px;
  background: var(--color-panel);
}

.kal-item.kal-abgesagt {
  opacity: 0.6;
}

.kal-item.kal-highlight {
  box-shadow: 0 0 0 3px var(--color-amber);
}

.kal-zeit {
  font-weight: 600;
  font-size: 0.9rem;
}

.kal-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

.kal-badge {
  font-size: 0.75rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--color-forest);
  color: #fff;
}

.kal-badge.kal-privat {
  background: var(--color-ink-soft);
}

.kal-text {
  margin-top: 0.3rem;
  white-space: pre-wrap;
  font-size: 0.92rem;
}

.kal-antwort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: 0.5rem;
}

.kal-antwort button {
  padding: 0.3rem 0.7rem;
  font-size: 0.88rem;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}

.kal-antwort .kal-zu.kal-aktiv {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}

.kal-antwort .kal-ab.kal-aktiv {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: #fff;
}

.kal-wer summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.kal-wer p {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
}

.kal-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.88rem;
}

.kal-loeschen {
  color: var(--color-rust);
}

/* Nur-Symbol-Knöpfe "✕" (Vorschlag, Teilnehmer, Streckenzeile, Wildzählung) waren 12 px breit - am Handy nicht sicher zu treffen (#117) */
.kal-loeschen[data-tn-del],
.kal-loeschen[data-js-del],
.kal-loeschen[data-abst-opt-del],
.kal-loeschen[data-wz-e-del],
.kal-loeschen[data-wz-s-del] {
  min-width: 2.25rem;
  min-height: 2.25rem;
  text-decoration: none;
}

.kal-abo summary {
  cursor: pointer;
  list-style: revert;
}

.kal-abo summary h3 {
  display: inline;
}

.kal-abo-hilfe {
  font-size: 0.9rem;
  padding-left: 1.2rem;
}

@media (max-width: 520px) {
  .kal-item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

.kal-body .trap-row-meta {
  display: block;
  text-align: left;
  margin-top: 0.15rem;
}

.kal-abo summary + p {
  margin-top: 0.6rem;
}

.kal-abo-hilfe a {
  color: var(--color-forest);
  font-weight: 600;
}

/* Terminabstimmung (#076) */
.abst-card {
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-amber);
  border-radius: 8px;
  background: var(--color-panel);
}

.abst-card.abst-done {
  border-left-color: var(--color-line);
  opacity: 0.8;
}

.abst-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.abst-table td {
  padding: 0.35rem 0.4rem;
  border-top: 1px solid var(--color-line);
  white-space: nowrap;
}

.abst-table tr.abst-best td:first-child {
  font-weight: 700;
}

.abst-count span {
  margin-right: 0.3rem;
}

.abst-ja {
  color: var(--color-forest);
}

.abst-nein {
  color: var(--color-rust);
}

.abst-vl {
  color: var(--color-amber);
}

.abst-vote {
  display: flex;
  gap: 0.25rem;
}

.abst-v {
  min-width: 2.2rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink);
  text-align: center;
}

.abst-v-ja.kal-aktiv {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}

.abst-v-vielleicht.kal-aktiv {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: #fff;
}

.abst-v-nein.kal-aktiv {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: #fff;
}

.abst-opts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.abst-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.abst-o-zeit[hidden] {
  display: none;
}

.secondary-button {
  background: transparent;
  color: var(--color-forest);
  border: 1px solid var(--color-forest);
}

/* button:hover färbt den Hintergrund dunkelgrün, die Schrift blieb grün - unlesbar (am Handy nach dem Antippen) (#117) */
.secondary-button:hover,
.outline-button:hover {
  background: color-mix(in srgb, var(--color-forest) 10%, var(--color-panel));
  color: var(--color-forest-dark);
  border-color: var(--color-forest-dark);
}

@media (max-width: 520px) {
  .abst-table,
  .abst-table tbody {
    display: block;
  }

  .abst-table tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.2rem 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--color-line);
  }

  .abst-table td {
    border: 0;
    padding: 0;
  }

  .abst-table td:first-child {
    grid-column: 1 / -1;
  }
}

/* Gesellschaftsjagd (#077) */
.jagd-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem;
  text-align: left;
}

.jagd-datum {
  font-weight: 600;
  font-size: 0.9rem;
}

.jagd-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.25rem 0 0.5rem;
}

.jagd-tn-form select {
  max-width: 16rem;
}

.jagd-tn-table td {
  white-space: normal;
  vertical-align: top;
}

.jagd-tn-akt {
  white-space: nowrap;
}

.jagd-map {
  height: 420px;
  border-radius: 10px;
}

/* Treffpunkt im Formular (#103): Punkt auf der Karte, Namensvorschläge als Knöpfe */
.jagd-tp {
  display: grid;
  gap: 0.4rem;
}

.jagd-tp-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.jagd-tp-map {
  height: 280px;
  border-radius: 10px;
}

.jagd-tp-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.jagd-tp-vorschlaege .jagd-tp-vorschlag {
  padding: 0.3rem 0.7rem;
  font-size: 0.9rem;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* Gastseite: Karte steht seit #103 auch ohne Schussfeld-Text darunter - Abstand zum Link "Zu TrapNet" */
.jagd-gast #jg-map {
  margin-bottom: 0.9rem;
}

.jagd-tp-marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--color-forest);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  font-size: 15px;
  line-height: 1;
}

.rk-marker.jagd-belegt {
  box-shadow: 0 0 0 3px var(--color-forest);
}

.rk-marker.jagd-eigen {
  box-shadow: 0 0 0 4px var(--color-amber);
  transform: scale(1.25);
}

.fp-marker-label.jagd-label {
  background: var(--color-forest);
  color: #fff;
}

.jagd-strecke-summe {
  padding-left: 1.2rem;
}

.jagd-strecke-rows {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: grid;
  gap: 0.4rem;
}

/* Strecke als Entwurf (#089): je Zeile eine Karte mit beschrifteten Feldern */
.jagd-strecke-row {
  display: grid;
  grid-template-columns: 5rem minmax(9rem, 2fr) 6rem minmax(7rem, 1.2fr) 6.5rem 9.5rem;
  gap: 0.4rem 0.6rem;
  align-items: end;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-panel);
}

.jagd-strecke-row label {
  display: grid;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  min-width: 0;
}

.jagd-strecke-row input,
.jagd-strecke-row select {
  width: 100%;
  min-width: 0;
}

.jagd-strecke-row .js-breit:nth-of-type(7),
.jagd-strecke-row .js-breit:nth-of-type(8) {
  grid-column: span 3;
}

.jagd-strecke-row .js-akt {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
}

.jagd-strecke-row.js-gemeldet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: var(--color-ink-soft);
}

.js-badge {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-forest);
}

.jagd-gast {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.jagd-gast h1 {
  margin: 0.25rem 0;
}

.jg-box {
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-panel);
}

.jg-antwort {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.jg-antwort.jg-zu {
  color: var(--color-forest);
}

.jg-antwort.jg-ab {
  color: var(--color-rust);
}

.jg-bestaetigen {
  margin-bottom: 0.75rem;
}

.jagd-qr-code {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.jagd-qr-link {
  word-break: break-all;
}

/* Freigaben der Gesellschaftsjagd (#087) */
.jagd-freigaben {
  margin: 0.5rem 0;
  padding: 0.5rem 0.7rem;
  border-left: 4px solid var(--color-forest);
  background: #eef3ef;
  border-radius: 4px;
}

/* Druckkarten je Teilnehmer (#087): A4, zwei Spalten, gestrichelte Schnittkanten */
.jagd-qr-print {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  color: #000;
  font-size: 10pt;
  line-height: 1.35;
}

.jagd-qr-karte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 5mm;
  border: 1px dashed #888;
  margin: 0 -1px -1px 0; /* gemeinsame Schnittkante statt doppelter Linie */
  break-inside: avoid;
  page-break-inside: avoid;
}

.jqk-kopf {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #ccc;
}

/* Logo und Revier oben auf jeder Karte (#102) */
.jqk-marke {
  display: flex;
  align-items: center;
  gap: 3mm;
  line-height: 1.2;
}

.jqk-logo {
  flex: none;
  width: auto;
  height: 11mm;
}

.jqk-wort {
  font-size: 12pt;
  font-weight: 700;
  color: #1f4d2b;
  letter-spacing: 0.02em;
}

.jqk-revier {
  font-size: 10pt;
  font-weight: 700;
}

.jqk-mitte {
  display: flex;
  gap: 4mm;
  align-items: center;
}

.jqk-mitte .jagd-qr-img {
  flex: none;
}

.jqk-mitte .jagd-qr-img img,
.jqk-mitte .jagd-qr-img canvas {
  width: 32mm !important;
  height: 32mm !important;
}

.jqk-name {
  font-size: 13pt;
  font-weight: 700;
}

.jqk-stand {
  font-size: 11pt;
  font-weight: 700;
  margin: 0.15rem 0 0.25rem;
}

.jqk-feld {
  font-size: 9pt;
  overflow-wrap: anywhere;
}

/* eigene Seite (A4 hoch) - die Revierkarte druckt quer, ein allgemeines @page würde sie mit umstellen */
@page jagdkarten {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  /* die Karten hängen beim Drucken direkt unter body (jagd.js); alles andere fällt weg, die Karten fließen über die Seiten */
  body.jagd-drucken > *:not(#jagd-qr-print) {
    display: none !important;
  }

  body.jagd-drucken #jagd-qr-print {
    page: jagdkarten;
  }
}

@media (max-width: 520px) {
  .jagd-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .jagd-strecke-row {
    grid-template-columns: 1fr 1fr;
  }

  .jagd-strecke-row .js-breit {
    grid-column: 1 / -1 !important;
  }

  .jagd-strecke-row.js-gemeldet {
    flex-direction: column;
    align-items: flex-start;
  }

  .jagd-map {
    height: 340px;
  }
}

#jg-map + .hint {
  margin-top: 1rem;
}

@media (max-width: 520px) {
  .jagd-tn-table thead {
    display: none;
  }

  .jagd-tn-table,
  .jagd-tn-table tbody,
  .jagd-tn-table tr,
  .jagd-tn-table td {
    display: block;
  }

  .jagd-tn-table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-line);
  }

  .jagd-tn-table td {
    border: 0;
    padding: 0.15rem 0;
  }
}

/* Wildzählung (#078) */
.wz-standort {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-forest);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.wz-punkt {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-amber);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#wz-form {
  margin-top: 1rem;
}

/* Daten nicht ladbar (z. B. gesperrtes Revier, wildzaehlung.js wzLoad): nur Revier-Auswahl und Hinweis (#117) */
#wz-main.wz-ohne-daten > :not(.kal-head):not(#wz-error),
#wz-main.wz-ohne-daten .kal-head > label:has(#wz-jahr) {
  display: none;
}

.wz-bars {
  margin: 0.6rem 0;
  display: grid;
  gap: 0.25rem;
}

.wz-bar-row {
  display: grid;
  grid-template-columns: 5rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.wz-bar {
  height: 0.8rem;
  border-radius: 4px;
  background: var(--color-line);
  overflow: hidden;
}

.wz-bar span {
  display: block;
  height: 100%;
  background: var(--color-forest);
}

.wz-table td,
.wz-table th {
  text-align: right;
}

.wz-table td:first-child,
.wz-table th:first-child {
  text-align: left;
}

.wz-table .wz-summe td {
  font-weight: 700;
}

.wz-einzel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-line);
}

.wz-einzel-row input {
  flex: 1;
  min-width: 0; /* große Schrift: "✕" bleibt im Bild (#117) */
}

#wz-map + .hint {
  margin-top: 0.75rem;
}

/* Wildzählung am Handy (#105): große Knöpfe, Ort per GPS oder Karte, Zähler der Jahreszählung */
.wz-gross {
  min-height: 3.2rem;
  padding: 0.7rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.wz-start-box {
  margin: 0 0 1rem;
}

.wz-start-box .wz-gross {
  width: 100%;
  max-width: 24rem;
}

.wz-start-box .hint {
  margin-top: 0.4rem;
}

.wz-ort {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* große Schrift: nicht breiter als das Formular (#117) */
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.wz-ort-label {
  font-weight: 600;
}

.wz-ort-knoepfe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
}

.wz-ort-btn {
  min-height: 3rem;
  font-size: 1rem;
}

.wz-ort-btn.wz-aktiv {
  background: var(--color-forest);
  color: #fff;
}

.wz-pick-map {
  height: 300px;
  border-radius: 10px;
}

.wz-offene {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.wz-offene .wz-gross {
  text-align: left;
}

#wz-start-form .wz-gross {
  width: 100%;
}

.kal-badge.wz-status-offen {
  background: #e7f3e6;
  color: var(--color-forest);
}

.wz-zaehlen {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
}

.wz-zaehlen h2 {
  margin: 0.2rem 0;
}

.wz-zahl {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0.5rem 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-forest);
}

.wz-zaehler-knoepfe {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.75rem;
}

.wz-zaehler-knoepfe button {
  min-height: 5.5rem;
  font-size: 2rem;
  font-weight: 700;
  touch-action: manipulation; /* schnelles Tippen ohne Doppeltipp-Zoom */
  user-select: none;
}

.wz-erfassen {
  width: 100%;
  min-height: 4rem;
  margin-top: 0.9rem;
  font-size: 1.35rem;
  font-weight: 700;
  background: var(--color-amber, #9a6700);
  border-color: var(--color-amber, #9a6700);
  color: #1f2a1e;
}

.wz-erfassen:hover {
  background: #a96f0b;
  border-color: #a96f0b;
  color: #fff;
}

.wz-erfassen-status {
  min-height: 1.4em;
}

.wz-sitzung {
  text-align: left;
  margin-top: 0.5rem;
}

.wz-zaehlen-ende {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.wz-zaehlen-ende button {
  min-height: 3rem;
  font-size: 1.05rem;
}

/* Gastseite der Gesellschaftsjagd: Schussentfernungen am eigenen Stand (#085) */
.jg-schuss {
  margin: 0.6rem 0 0;
  line-height: 1.45;
}

.jg-schuss .hint {
  display: block;
  margin-top: 0.3rem;
}

.rk-dist-label.jg-ring-label span {
  background: rgba(255, 255, 255, 0.8);
  color: #374151;
  font-weight: 400;
}

/* Test-Mails aller Arten (#086) */
.test-mails-ergebnis {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.test-mails-ergebnis .test-mails-fehler {
  color: var(--color-rust);
}

#test-mails-typ {
  max-width: 100%;
}

/* Rechnungsablage (#092) */
.re-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-end;
  margin: 0.4rem 0;
}

.re-export {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
}

.re-export.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.re-table tr.re-test td {
  color: var(--color-ink-soft);
}

/* Verwaltung -> Reviere: Mitglieder mit Rolle zum Aufklappen (#101) - aufgeklappt in eigener Zeile unter dem Revier */
.trap-row:has(.admin-revier-members[open]) {
  flex-wrap: wrap;
}

.admin-revier-members summary {
  cursor: pointer;
}

.admin-revier-members[open] {
  flex-basis: 100%;
  order: 10;
  margin-left: 0;
  text-align: left;
}

.admin-revier-members ul {
  list-style: none;
  margin: 0.3rem 0 0;
  padding-left: 1rem;
  overflow-wrap: anywhere;
}

/* Demorevier beenden (#107): Hinweis mit Knopf oben im Reiter Revier */
.rv-demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-amber);
  border-radius: 8px;
  background: var(--color-panel);
}

/* Abschussliste: Position von Hand (#116) */
.ab-pos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.ab-pos-label {
  font-weight: 600;
}

.ab-pos-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.ab-pos-map {
  flex-basis: 100%;
  height: 300px;
  margin-top: 0.25rem;
}

/* ---------- Tippziele am Handy (#117 V01) ----------
   Mit dem Finger bedient (pointer: coarse): Text-Link-Knöpfe, Umschalter, Aufklapper und kleine Knöpfe mind. 40 px hoch
   (vorher 20-31 px), Kästchen größer. Am PC mit Maus bleibt alles wie bisher. */
@media (pointer: coarse) {
  .link-button,
  .secret-regen,
  .danger-button-small,
  .topbar-settings,
  .seg button,
  .kal-antwort button,
  #licht-prev,
  #licht-next,
  select {
    min-height: 2.5rem;
  }
  #licht-prev,
  #licht-next {
    min-width: 2.5rem;
  }
  a.link-button {
    display: inline-flex;
    align-items: center;
  }
  .topbar-settings {
    min-width: 2.5rem;
    justify-content: center;
  }
  summary {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .legal-footer a {
    display: inline-block;
    padding: 0.6rem 0;
  }
  input[type="checkbox"],
  input[type="radio"] {
    width: 1.35rem;
    height: 1.35rem;
  }
  /* Kästchen mit Beschriftung dahinter: die ganze Zeile ist das Tippziel */
  label:has(> input[type="checkbox"]:first-child),
  label:has(> input[type="radio"]:first-child) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
  }
  .notify-matrix input[type="checkbox"] {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ---------- Abschussliste drucken (#117 V03, abschuss.js abPrintPrepare) ----------
   Nur Kopfzeile (Revier, Jagdjahr, Anzahl, Stand) und Liste bzw. Auswertung/Karte, A4 quer; Tabellenkopf auf jeder Seite. */
.ab-print-title {
  display: none;
}

@page abschuss {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  body.ab-printing {
    background: #fff;
  }
  body.ab-printing .topbar,
  body.ab-printing .tabbar,
  body.ab-printing .legal-footer,
  body.ab-printing .offline-banner,
  body.ab-printing #revier-nav,
  body.ab-printing #abschuss-view > .section-header,
  body.ab-printing #ab-form-panel,
  body.ab-printing #ab-stamm-panel,
  body.ab-printing .ab-controls,
  body.ab-printing .ab-filter,
  body.ab-printing #ab-error,
  body.ab-printing #ab-list .seg,
  body.ab-printing #ab-km-calc,
  body.ab-printing .leaflet-control-container .leaflet-top {
    display: none !important;
  }
  body.ab-printing #abschuss-view {
    page: abschuss;
  }
  body.ab-printing .content {
    max-width: none;
    padding: 0;
  }
  body.ab-printing .ab-print-title {
    display: block;
    font-size: 13pt;
    margin: 0 0 4mm;
  }
  body.ab-printing .ab-table-wrap {
    overflow: visible;
  }
  body.ab-printing .ab-table {
    font-size: 8.5pt;
  }
  /* Druck immer als Tabelle - die Kartenansicht für schmale Bildschirme (max-width: 900px) greift sonst, weil der
     Browser die Breite einer A4-Hochformatseite ansetzt */
  body.ab-printing .ab-table thead {
    display: table-header-group;
  }
  body.ab-printing .ab-table:not(.ab-stats) tr {
    display: table-row;
  }
  body.ab-printing .ab-table:not(.ab-stats) td,
  body.ab-printing .ab-table:not(.ab-stats) td[data-label],
  body.ab-printing .ab-table:not(.ab-stats) td[data-label]:empty {
    display: table-cell;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 8.5pt;
  }
  body.ab-printing .ab-table:not(.ab-stats) td[data-label]::before {
    content: none;
  }
  body.ab-printing .ab-table .ab-sub {
    font-size: 7.5pt;
  }
  body.ab-printing .ab-table tr {
    break-inside: avoid;
  }
  body.ab-printing .ab-map {
    height: 150mm;
    break-inside: avoid;
  }
}

/* ---------- Breitere Inhaltsspalte für Tabellen am PC (#117 V04) ----------
   Abschussliste und Verwaltung (Funk-Log, Nutzer, Rechnungen) nutzen am großen Bildschirm mehr Breite - vorher blieben
   bei 1440/1920 px zwei Drittel frei, während die Tabelle seitlich geschoben werden musste. */
@media (min-width: 901px) {
  .content:has(> #abschuss-view:not([hidden])),
  .content:has(> #admin-view:not([hidden])) {
    max-width: 76rem;
  }
}

/* ---------- Handy im Querformat (#117 V05) ----------
   Bei ca. 390 px Höhe füllten Kopf und zwei Reiterleisten fast den ganzen Bildschirm, die Karten (bis 560 px) waren
   höher als der Bildschirm. Jetzt kompakter Kopf und Karten höchstens bildschirmhoch. */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar {
    padding: 0.35rem 1.25rem;
    align-items: center;
  }
  .topbar .wordmark img {
    height: min(var(--logo-height-topbar), 1.6rem);
  }
  .topbar .wordmark {
    font-size: 1.25rem;
  }
  .tab-button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .content {
    padding: 0.75rem 1.25rem 1.25rem;
  }
  .section-header {
    margin-bottom: 0.6rem;
  }
  .map-container:not(.map-fullscreen) {
    max-height: calc(100dvh - 1.5rem);
  }
}

/* ---------- Unter-Reiter am Handy als umbrechende Auswahl (#117 V06) ----------
   Die wischbaren Leisten (6 Revier-, 9 Verwaltungs-Reiter) schnitten am Handy Wörter an („tungen“ statt
   „Einrichtungen“). Jetzt alle Reiter sichtbar, in Zeilen umbrochen; der gewählte ist ausgefüllt. Die oberste Leiste
   der Einstellungen (Konto/Revier/Verwaltung) passt und bleibt ein Reiter. */
@media (max-width: 600px) {
  .admin-subtabbar:not(#settings-nav > .admin-subtabbar) {
    flex-wrap: wrap;
    overflow: visible;
    gap: 0.4rem;
    padding: 0.25rem 0 0.6rem;
    background: none !important; /* keine Wisch-Schatten */
  }
  .admin-subtabbar:not(#settings-nav > .admin-subtabbar)::before,
  .admin-subtabbar:not(#settings-nav > .admin-subtabbar)::after {
    content: none;
  }
  .admin-subtabbar:not(#settings-nav > .admin-subtabbar) .tab-button {
    margin: 0;
    padding: 0.35rem 0.8rem;
    min-height: 2.5rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-panel);
    font-size: 0.9rem;
  }
  .admin-subtabbar:not(#settings-nav > .admin-subtabbar) .tab-button[data-active="true"] {
    background: var(--color-forest);
    border-color: var(--color-forest);
    color: #fff;
  }
}

/* ---------- Leere Bedienelemente ausblenden (#117 V08) ----------
   Büchsenlicht ohne Ort (Revier ohne Grenze/Einrichtung, Standort noch nicht gewählt): kein leeres Tages-Auswahlfeld,
   keine leeren Kästen - nur der Hinweis oben, wo der Ort fehlt. */
.licht-daybar:has(> #licht-day:empty),
#licht-summary:empty,
#licht-list:empty {
  display: none;
}

/* ---------- Kleinigkeiten aus der Design-Prüfung (#117 U02, U08, U09) ---------- */
/* U02: seitlich wischbare Tabellen (Auswertung am Handy) zeigen am Rand einen Schatten, solange es weitergeht */
.ab-table-wrap {
  background:
    linear-gradient(to right, var(--color-bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--color-bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(19, 32, 38, 0.2), transparent) left / 0.8rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(19, 32, 38, 0.2), transparent) right / 0.8rem 100% no-repeat scroll;
}

/* U08: Impressum, Datenschutz und Kündigung am Handy mit seitlichem Abstand wie die Anmeldekarte (nicht randlos) */
@media (max-width: 54rem) {
  .legal {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* U09: lange Ereignisnamen ("Freischaltung") trennen statt die Tabelle über den Rand zu schieben (320 px, große Schrift) */
.notify-matrix th[scope="row"] {
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* ---------- Datenschutz: Meine Daten, Konto löschen, Datenschutz-Anfragen (#123, dsgvo.js) ---------- */
.dsgvo h4 {
  margin: 1.1rem 0 0.25rem;
  font-size: 1rem;
}

.dsgvo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.dsgvo-actions a.secondary-button {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.dsgvo-sperren {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem 0.5rem 1.6rem;
  border-left: 3px solid var(--color-rust);
  color: var(--color-rust);
}

.dsgvo-hinweise {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.dsgvo-sperren li,
.dsgvo-hinweise li {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.dsgvo-admin-stand {
  margin-top: 0.75rem;
  overflow-wrap: anywhere;
}

.dsgvo-details summary {
  cursor: pointer;
  font-size: 0.9rem;
}

#dsgvo-admin-form label {
  flex: 1 1 16rem;
  max-width: 28rem;
}

#dsgvo-admin-form input,
.dsgvo .stack input[type="text"],
.dsgvo .stack input[type="password"] {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
}

.dsgvo-warnung {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-rust);
  color: var(--color-rust);
  overflow-wrap: anywhere;
}

.dsgvo-warnung p {
  margin: 0 0 0.4rem;
}