/* Verwaltungsseiten unter /admin.
   stylesheet.css setzt global "* { color: white }" - fuer die hellen
   Admin-Seiten wird das hier einmal zurueckgedreht, danach faerben die
   einzelnen Regeln. */
.admin * { color: inherit; }

/* Text, der nur der Vorlesesoftware gilt - sichtbar waere er hier Ballast,
   ganz weglassen wuerde die Zuordnung kosten. Nicht per display:none, das
   nehmen Screenreader ebenfalls aus der Ausgabe. */
.nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.admin {
  color: var(--tinte);
  background: var(--bage);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ==========================
   Kopf und Navigation
   ========================== */
.admin-header {
  background: var(--navy-blue);
  color: #fff;
  padding: 12px var(--seiten-rand);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.admin-logo {
  display: flex;
  align-items: center;
  height: 34px;
}
.admin-logo img {
  height: 100%;
  width: auto;
  display: block;
}

.admin-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-right: auto; /* schiebt den Ausstieg nach rechts */
}
.admin-nav-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.admin-nav-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.admin-nav-link.active {
  background: var(--weg);
  color: var(--tinte);
}

.admin-exit {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  white-space: nowrap;
}
.admin-exit:hover { background: rgba(255, 255, 255, 0.12); }
/* Derselbe Knopf, nur als button - das Abmelden ist ein POST und darf kein
   Link sein: ein Aufruf der Adresse allein soll niemanden hinauswerfen. */
button.admin-exit {
  font: inherit;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
}

/* Wer gerade angemeldet ist, links neben dem Abmelden. */
.admin-abmelden {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-wer {
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

/* Die Anmeldemaske steht allein auf der Seite und bleibt schmal - ein
   Formular aus zwei Feldern ueber die volle Breite sieht verloren aus. */
.anmeldung {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.anmeldung h1 {
  font-size: 1.6rem;
  color: var(--tanne);
}
.anmeldung__text {
  font-size: 14px;
  color: #5c665f;
}
.anmeldung .feld input[type='email'],
.anmeldung .feld input[type='password'] {
  font-family: inherit;
  font-size: 15px;
  color: var(--tinte);
  background: #fff;
  border: 1px solid rgba(23, 32, 25, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}

.admin-titel {
  background: var(--navy-blue);
  padding: 0 var(--seiten-rand) 22px;
}
.admin-titel h1 {
  color: #fff;
  font-size: 2rem;
  line-height: 1.15;
}

/* ==========================
   Seitenrahmen
   ========================== */
.admin-main {
  flex: 1;
  padding: 28px var(--seiten-rand) 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Tabellen und Formular teilen sich dieselbe Breite */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-footer {
  background: var(--navy-blue);
  color: rgba(255, 255, 255, 0.75);
  padding: 16px var(--seiten-rand);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

/* Weg zurueck aus einer Unterseite, z.B. der Bearbeiten-Maske */
.admin-weg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #5c665f;
}
.admin-weg a { color: var(--berg-dunkel); text-decoration: none; }
.admin-weg a:hover { text-decoration: underline; }

/* ==========================
   Hinweise
   ========================== */
.hinweis {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid transparent;
}
.hinweis--ok {
  background: rgba(110, 140, 116, 0.16);
  border-color: rgba(110, 140, 116, 0.45);
  color: var(--tanne);
}
.hinweis--fehler {
  background: rgba(176, 61, 61, 0.10);
  border-color: rgba(176, 61, 61, 0.40);
  color: #8a2f2f;
}
.hinweis--warnung {
  background: rgba(176, 61, 61, 0.10);
  border-color: rgba(176, 61, 61, 0.40);
  color: #8a2f2f;
  font-weight: 600;
}

.leer-hinweis {
  background: var(--karte);
  border: 1px dashed var(--linie);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  color: #5c665f;
}

/* ==========================
   Kennzahlen
   ========================== */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.kennzahl {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--moos);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kennzahl--aktiv { border-left-color: var(--tanne); }
.kennzahl--inaktiv { border-left-color: var(--weg); }
.kennzahl__wert {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tinte);
}
.kennzahl__label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c665f;
}

/* ==========================
   Filterleiste
   ========================== */
.filter-leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 4px;
}
.filter-btn {
  text-decoration: none;
  color: #3E4A42;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.filter-btn:hover { background: var(--nebel); }
.filter-btn.active {
  background: var(--navy-blue);
  color: #fff;
}
.treffer {
  font-size: 13px;
  color: #5c665f;
  margin-right: auto;
}

/* ==========================
   Buttons
   ========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn--primaer {
  background: var(--weg);
  color: var(--tinte);
}
.btn--primaer:hover { background: #c9942f; }
.btn--sekundaer {
  background: transparent;
  border-color: rgba(23, 32, 25, 0.25);
  color: var(--tinte);
}
.btn--sekundaer:hover { background: var(--nebel); }

/* Loeschen und Verwandtes. Rot, aber nicht als Hauptaktion gefuellt - der
   Knopf soll auffallen, ohne die Hand dorthin zu ziehen. */
.btn--gefahr {
  background: #8a2f2f;
  color: #fff;
}
.btn--gefahr:hover { background: #742727; }
.btn--gefahr-leise {
  background: transparent;
  border-color: rgba(138, 47, 47, 0.45);
  color: #8a2f2f;
}
.btn--gefahr-leise:hover { background: rgba(176, 61, 61, 0.10); }

/* ==========================
   Campus-Bloecke mit Tabelle
   ========================== */
.campus-block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
}
.campus-block__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linie);
}
.campus-block__kopf h2 {
  font-size: 18px;
  color: var(--tanne);
  display: flex;
  align-items: center;
  gap: 10px;
}
.campus-block__anzahl {
  font-size: 12px;
  font-weight: 600;
  color: #5c665f;
  background: var(--nebel);
  border-radius: 999px;
  padding: 2px 10px;
}
.campus-block__link {
  font-size: 13px;
  color: var(--berg-dunkel);
  text-decoration: none;
}
.campus-block__link:hover { text-decoration: underline; }

/* schmale Bildschirme scrollen die Tabelle, statt die Seite zu sprengen */
.tabelle-scroll { overflow-x: auto; }

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tabelle th,
.tabelle td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  white-space: nowrap;
}
.tabelle thead th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c665f;
  background: #fafaf8;
  font-weight: 600;
}
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover { background: var(--nebel); }
.tabelle .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.tabelle .leer { color: #9aa39c; }

/* Aktionen stehen am rechten Rand der Zeile und sollen die Spalte nicht
   breiter machen, als die Knoepfe sind. */
.tabelle .zelle-aktion {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.zelle-aktion .tabellen-btn + .tabellen-btn { margin-left: 6px; }
.tabellen-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinte);
  background: var(--nebel);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.tabellen-btn:hover {
  background: var(--weg);
  border-color: var(--weg);
}
.tabellen-btn--gefahr { color: #8a2f2f; }
.tabellen-btn--gefahr:hover {
  background: #8a2f2f;
  border-color: #8a2f2f;
  color: #fff;
}

/* Die Titelspalte nimmt den Platz auf, den die anderen uebrig lassen (width
   wirkt in einer Tabelle als Wunsch, nicht als Mass). Zusammen mit dem
   Zeilenumbruch bleibt ein langer Titel damit in der Spalte, statt die
   Tabelle breiter zu machen als das Fenster. */
.tabelle .zelle-titel {
  width: 100%;
  white-space: normal;
}
.ref-titel {
  display: block;
  font-weight: 600;
  color: var(--tinte);
}
.ref-kurz {
  display: block;
  font-size: 12px;
  color: #5c665f;
  /* lange Kurzbeschreibungen sollen die Spalte nicht aufblaehen */
  white-space: normal;
  max-width: 42ch;
}

/* Art, Status, Anmeldung und Eigenbeteiligung in einer Zelle. Die Breite ist
   gedeckelt, damit die Marken umbrechen, statt die Spalte zu dehnen. */
.tabelle .zelle-merkmale { white-space: normal; }
.marken {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 17rem;
}

/* ==========================
   Marken (Art, Status, Anmeldung, Betrag)
   ========================== */
.tabelle .tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
}
.tag--sport {
  background: rgba(62, 124, 140, 0.14);
  color: var(--berg-dunkel);
  border-color: rgba(62, 124, 140, 0.4);
}
.tag--freizeit {
  background: rgba(110, 140, 116, 0.16);
  color: var(--tanne);
  border-color: rgba(110, 140, 116, 0.45);
}
.tag--aktiv {
  background: rgba(31, 59, 46, 0.12);
  color: var(--tanne);
  border-color: rgba(31, 59, 46, 0.35);
}
.tag--inaktiv {
  background: rgba(23, 32, 25, 0.06);
  color: #5c665f;
  border-color: rgba(23, 32, 25, 0.18);
}
.tag--anmeldung {
  background: rgba(217, 164, 65, 0.16);
  color: var(--weg-dunkel);
  border-color: rgba(217, 164, 65, 0.45);
}
/* Der Betrag ist eine Zahl und keine Einordnung - deshalb blass und in der
   Ziffernschrift der Tabelle. */
.tag--betrag {
  background: var(--nebel);
  color: var(--tinte);
  border-color: var(--linie);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================
   Formular
   ========================== */
.formular {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 980px;
}
.feld-block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.feld-block h2 {
  font-size: 16px;
  color: var(--tanne);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}

.feld-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}
.feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* Breite teilen sich die Felder nur innerhalb einer Reihe. Direkt im Block
   liegt die Flex-Achse senkrecht - eine flex-basis wuerde dort als Hoehe
   wirken und die Felder auseinanderziehen. */
.feld-reihe .feld { flex: 1 1 260px; }
.feld-reihe .feld--schmal { flex: 0 1 200px; }

/* fieldset braucht die Browser-Umrandung hier nicht, es gruppiert nur */
.formular fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.formular label,
.formular legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinte);
  padding: 0;
}
.formular legend { margin-bottom: 6px; }
.pflicht { color: var(--weg-dunkel); }

.feld input[type='text'],
.feld input[type='number'],
.feld select,
.feld textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--tinte);
  background: #fff;
  border: 1px solid rgba(23, 32, 25, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}
.feld textarea { resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--berg);
  outline-offset: 1px;
  border-color: var(--berg);
}
.feld [aria-invalid='true'] { border-color: #b03d3d; }

/* Die Dateiauswahl bringt ihr eigenes Aussehen mit - hier bekommt sie den
   Rahmen der uebrigen Felder und einen Knopf, der wie einer der Seite aussieht. */
.feld input[type='file'] {
  font-family: inherit;
  font-size: 14px;
  color: var(--tinte);
  background: #fff;
  border: 1px solid rgba(23, 32, 25, 0.22);
  border-radius: 10px;
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
}
.feld input[type='file']::file-selector-button {
  font: inherit;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--nebel);
  color: var(--tinte);
  cursor: pointer;
}

/* Was hinterlegt ist, im Ausschnitt der Katalog-Karte. Die Breite ist
   gedeckelt: ein hochgeladenes Bild soll die Maske nicht auseinanderziehen. */
.bild-vorschau {
  max-width: 260px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  background: var(--nebel);
}
.bild-vorschau img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.eingabe-mit-einheit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.einheit { color: #5c665f; }

.auswahl-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* schlaegt bewusst die fette Feldbeschriftung, die Auswahl liest sich als Text */
.formular .auswahl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
.auswahl input {
  width: 17px;
  height: 17px;
  accent-color: var(--navy-blue);
  cursor: pointer;
}

/* Ein Wert, den die Maske nur zeigt: liest sich wie ein Feld, ist aber keins.
   feld-marke steht an der Stelle des label - ohne Eingabe daneben haette ein
   label nichts, worauf es zeigen koennte. */
.feld-marke {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinte);
}
.feld-wert {
  font-size: 15px;
  color: var(--tinte);
  padding: 10px 0;
}
.feld-wert .leer { color: #9aa39c; }

.feld-hilfe {
  font-size: 12px;
  color: #5c665f;
}
.feld-fehler {
  font-size: 12.5px;
  font-weight: 600;
  color: #8a2f2f;
}

.formular-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================
   Termine am Referat
   ========================== */
/* Steht ausserhalb des Formulars und soll trotzdem dazugehoeren - deshalb
   dieselbe Breite wie .formular. */
.termin-block {
  max-width: 980px;
  gap: 10px;
}

.termin {
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.termin[open] { border-color: rgba(62, 124, 140, 0.45); }

.termin__kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none; /* das Dreieck kommt unten selbst dazu */
  font-size: 14px;
}
.termin__kopf::-webkit-details-marker { display: none; }
.termin__kopf:hover { background: var(--nebel); }
/* Eigenes Dreieck, damit es in beiden Zustaenden gleich sitzt */
.termin__kopf::before {
  content: '▸';
  color: #5c665f;
  font-size: 12px;
  flex: 0 0 auto;
}
.termin[open] > .termin__kopf::before { content: '▾'; }

.termin__titel {
  font-weight: 600;
  color: var(--tinte);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.termin__zeit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 400;
  color: #3E4A42;
}
.termin__absprache { font-style: italic; color: #5c665f; }
.termin__ort {
  color: #5c665f;
  margin-right: auto; /* schiebt die Marke an den rechten Rand */
}

.termin__formular {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 16px 16px;
  border-top: 1px dashed var(--linie);
}
.termin__aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
/* Loeschen gehoert nicht neben das Speichern, sondern an das andere Ende */
.termin__aktionen .btn--gefahr-leise { margin-right: auto; }

/* Der Block zum Hinzufuegen ist keine Zeile, sondern ein Angebot */
.termin--neu {
  background: transparent;
  border-style: dashed;
}
.termin--neu .termin__titel { color: var(--tanne); }
.termin__neu-marke {
  font-weight: 700;
  color: var(--tanne);
}

/* ==========================
   Gefahrenzone und Rueckfrage
   ========================== */
.gefahrenzone {
  max-width: 980px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
  border: 1px solid rgba(176, 61, 61, 0.40);
  border-radius: 14px;
  background: rgba(176, 61, 61, 0.06);
  /* Abstand nach oben, damit es nicht als Teil des Formulars gelesen wird */
  margin-top: 12px;
}
.gefahrenzone h2 {
  font-size: 16px;
  color: #8a2f2f;
  margin-bottom: 4px;
}
.gefahrenzone__text { flex: 1 1 320px; }
.gefahrenzone__text p {
  font-size: 13px;
  color: #5c665f;
  max-width: 60ch;
}

.rueckfrage {
  max-width: 640px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rueckfrage__frage {
  font-size: 20px;
  color: var(--tinte);
}
.rueckfrage__gegenstand {
  font-size: 16px;
  font-weight: 600;
  color: var(--tanne);
  padding: 12px 16px;
  background: var(--nebel);
  border-radius: 10px;
}
.rueckfrage__tipp {
  font-size: 13px;
  color: #5c665f;
}
.rueckfrage__aktionen {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ==========================
   Mittlere Breiten
   ========================== */
@media (max-width: 1200px) {
  /* etwas enger, damit die Tabelle laenger ohne Scrollen auskommt */
  .tabelle th,
  .tabelle td { padding: 10px 12px; }
}

/* ==========================
   Tabelle als Karten
   ========================== */
@media (max-width: 1024px) {
  /* Sieben Spalten passen hier nicht mehr nebeneinander. Statt seitlich zu
     scrollen wird aus jeder Zeile eine Karte: Titel oben, darunter die Werte
     mit ihrer Spaltenueberschrift aus data-label und zuletzt die Aktionen. */
  .tabelle-scroll { overflow-x: visible; }
  .tabelle thead { display: none; }

  .tabelle,
  .tabelle tbody,
  .tabelle tr,
  .tabelle td {
    display: block;
    width: 100%;
  }

  .tabelle tr {
    /* Auf breiteren Karten stehen mehrere Werte nebeneinander, sonst reisst
       der Abstand zwischen Beschriftung und Wert zu weit auf. Unter ~260px
       Restbreite bleibt automatisch eine Spalte uebrig. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 28px;
    padding: 14px var(--seiten-rand);
    border-bottom: 1px solid var(--linie);
  }
  .tabelle tbody tr:last-child { border-bottom: none; }
  /* Hover laeuft auf dem Touchscreen ins Leere und bliebe nach dem Tippen haengen */
  .tabelle tbody tr:hover { background: transparent; }

  .tabelle td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
    border: none;
    white-space: normal;
  }
  .tabelle td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5c665f;
  }
  /* Auf der Karte steht die Beschriftung links, die Marken sammeln sich
     rechts daneben - der Deckel aus der Tabelle wuerde sie hier unnoetig
     frueh umbrechen. */
  .tabelle td.zelle-merkmale { align-items: flex-start; }
  .zelle-merkmale .marken {
    justify-content: flex-end;
    max-width: none;
  }

  /* Der Titel fuehrt die Karte an - ueber die ganze Breite und ohne Label */
  .tabelle td.zelle-titel {
    display: block;
    order: -1;
    grid-column: 1 / -1;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--linie);
  }
  .tabelle td.zelle-titel::before { content: none; }
  .zelle-titel .ref-titel { font-size: 16px; }
  .zelle-titel .ref-kurz { max-width: none; }

  /* Der Knopf schliesst die Karte ab - ueber die ganze Breite, damit er nicht
     als weiterer Wert zwischen den anderen steht. */
  .tabelle td.zelle-aktion {
    display: block;
    width: auto;
    grid-column: 1 / -1;
    text-align: left;
    padding: 12px 0 0;
  }
  .tabelle td.zelle-aktion::before { content: none; }
  .zelle-aktion .tabellen-btn { padding: 8px 18px; }
}

/* ==========================
   Mobile
   ========================== */
@media (max-width: 640px) {
  .admin-header {
    gap: 10px;
    padding: 12px var(--seiten-rand);
  }
  .admin-logo {
    height: 28px;
    margin-right: auto; /* schiebt "Zur Website" an den rechten Rand */
  }
  .admin-nav {
    width: 100%;
    order: 3;
    margin-right: 0;
  }
  .admin-nav-link {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 12px;
  }
  .admin-exit { padding: 8px 14px; }

  .admin-titel {
    padding-bottom: 18px;
  }
  .admin-titel h1 { font-size: 1.4rem; }

  .admin-main {
    padding: 20px var(--seiten-rand) 40px;
    gap: 18px;
  }

  /* Fuenf Kacheln nebeneinander werden hier zu schmal. Die Gesamtzahl bekommt
     eine eigene Zeile ueber die volle Breite, die vier Aufschluesselungen
     stehen zu zweit darunter. */
  .kennzahlen {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kennzahl { padding: 10px 12px; }
  .kennzahl--gesamt {
    grid-column: 1 / -1;
    /* nebeneinander statt untereinander - die breite Kachel braucht die
       zweite Zeile nicht */
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .kennzahl__wert { font-size: 22px; }
  .kennzahl__label { font-size: 11px; }

  .filter-leiste { gap: 8px; }
  .filter-gruppe { width: 100%; }
  .filter-btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 9px 14px; /* groessere Trefferflaeche fuer den Finger */
  }
  .treffer { width: 100%; margin-right: 0; }
  .filter-leiste .btn { width: 100%; }

  .campus-block__kopf { padding: 14px var(--seiten-rand); }

  .feld-block { padding: 16px var(--seiten-rand); }
  .feld-reihe { gap: 14px; }
  .feld-reihe .feld,
  .feld-reihe .feld--schmal { flex: 1 1 100%; }

  /* iOS zoomt beim Fokus hinein, sobald die Schrift kleiner als 16px ist */
  .feld input[type='text'],
  .feld input[type='number'],
  .feld select,
  .feld textarea { font-size: 16px; }

  .auswahl-reihe { gap: 12px 16px; }
  .formular .auswahl { padding: 4px 0; }

  .formular-aktionen .btn { flex: 1 1 100%; }
  /* die Hauptaktion gehoert nach oben, nicht unter "Abbrechen" */
  .formular-aktionen .btn--primaer { order: -1; }

  .termin-block { padding: 16px var(--seiten-rand); }
  .termin__kopf { padding: 12px 14px; }
  .termin__ort { flex-basis: 100%; margin-right: 0; }
  .termin__formular { padding: 4px 14px 14px; }
  .termin__aktionen .btn { flex: 1 1 100%; }
  .termin__aktionen .btn--primaer { order: -1; }
  /* auf der Karte steht nichts nebeneinander, der Schub ins Leere entfaellt */
  .termin__aktionen .btn--gefahr-leise { margin-right: 0; }

  .gefahrenzone { padding: 16px var(--seiten-rand); }
  .gefahrenzone .btn { width: 100%; }

  .rueckfrage { padding: 20px var(--seiten-rand); }
  .rueckfrage__frage { font-size: 18px; }
  .rueckfrage__aktionen { flex-direction: column-reverse; align-items: stretch; }
  .rueckfrage__aktionen form { display: flex; }
  .rueckfrage__aktionen .btn { width: 100%; }
}