/* Admin-Seite (Kennzahlen, Tabellen, Einladungen, Feedback) und der Feedback-Knopf im Rahmen */

/* Feedback im Rahmen: unten in der Seitenleiste, auf dem Handy als Symbol oben */
.leiste-feedback { display: none; }
@media (min-width: 900px) {
  .leiste-feedback { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--grau); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
  .leiste-feedback .ic { width: 18px; height: 18px; }
  @media (hover: hover) { .leiste-feedback:hover { background: var(--papier-2); color: var(--tinte); } }
}
.oben-feedback { margin-left: auto; color: var(--tinte-2); }
.oben-feedback + .zaehler-ort { margin-left: -8px; }
@media (max-width: 389px) { .oben .marke.nur-handy > span { display: none; } }
.fb-feld { min-height: 150px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.feedback .feld > label { font-size: 16px; }
.feedback h2 { margin-bottom: 16px; }

/* Kopf und Sprungmarken */
.admin-sprung { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: calc(-1 * clamp(10px, 2vw, 22px)) 0 24px; font-size: 15px; font-weight: 600; }
.admin-sprung a { min-height: 32px; display: inline-flex; align-items: center; color: var(--tinte-2); text-decoration-color: var(--linie-2); }
.admin-sprung .zahl { margin-left: 5px; font-size: 13px; color: var(--signal-text); }
.admin { display: grid; gap: 8px; max-width: 1100px; }
.admin-teil { display: grid; gap: 16px; min-width: 0; padding: 28px 0 12px; border-top: 1.5px solid var(--tinte); scroll-margin-top: 80px; }
.admin-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.admin-kopf h2 { font-size: 30px; }

/* Kennzahlen: vier Felder wie eine Tabellenzeile, Haarlinien dazwischen */
.kz { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin: 0 0 20px; border-top: 1.5px solid var(--tinte); border-bottom: 1px solid var(--linie); background: var(--linie); }
.kz-feld { display: grid; align-content: start; gap: 8px; padding: 16px 18px 18px 0; background: var(--papier); }
.kz-feld + .kz-feld { padding-left: 18px; }
@media (max-width: 499px) { .kz-feld + .kz-feld { padding-left: 0; } }
.kz dt { font-size: 14px; font-weight: 600; color: var(--grau); }
.kz dd { display: grid; gap: 6px; margin: 0; }
.kz-wert { font-size: 30px; line-height: 1.1; color: var(--tinte); }
.kz-unter { font-size: 13.5px; color: var(--grau); }
.kz-unter code { font-size: 12px; }
.kz-warnung { font-size: 13.5px; font-weight: 700; color: var(--signal-text); }
.kz .balken { max-width: 260px; }

/* Tabellen */
.tabelle-ort { overflow-x: auto; margin: 0 calc(-1 * var(--rand)); padding: 0 var(--rand); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th, .tabelle td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle thead th { padding-top: 0; font-size: 13px; font-weight: 600; color: var(--grau); white-space: nowrap; border-bottom-color: var(--linie-2); }
.tabelle tbody th { font-weight: 400; min-width: 180px; }
.tabelle .r { text-align: right; white-space: nowrap; }
.tabelle td:last-child, .tabelle th:last-child { padding-right: 0; }
.tabelle .zahl { font-size: 13.5px; }
.t-titel { display: block; font-weight: 650; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.t-unter { display: block; margin-top: 2px; font-size: 13px; color: var(--grau); }
.t-person, .t-klein { font-size: 13.5px; color: var(--tinte-2); overflow-wrap: anywhere; }
.t-auf { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.t-pfeil { flex: none; width: 7px; height: 7px; margin: 7px 2px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 180ms var(--ease-out); }
.t-auf[aria-expanded="true"] .t-pfeil { transform: rotate(45deg); }
.t-auf + .t-unter { padding-left: 17px; }
@media (hover: hover) and (pointer: fine) { .t-auf:hover .t-titel { text-decoration: underline; text-decoration-color: var(--linie-2); } }
.t-zeile.offen > * { border-bottom-color: transparent; }
.t-posten td { padding: 0 0 14px 17px; }
.posten-auf { display: grid; gap: 4px; max-width: 520px; margin: 0; padding: 10px 14px; border-radius: 6px; background: var(--papier-2); list-style: none; }
.posten-auf li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; }
.posten-auf b { font-size: 13.5px; }
.t-plan { min-height: 40px; width: auto; min-width: 120px; padding-left: 10px; font-size: 14.5px; border-width: 1px; }
.nur-schmal { display: none; }
@media (max-width: 699px) {
  .tabelle .breit-spalte { display: none; }
  .nur-schmal { display: inline; }
  .tabelle tbody th { min-width: 0; }
}

/* Einladungen */
.einladen { display: grid; gap: 12px; align-items: end; max-width: 720px; }
@media (min-width: 640px) { .einladen { grid-template-columns: 180px minmax(0, 1fr) auto; } .einladen .form-fehler { grid-column: 1 / -1; } }
.einladung-neu { max-width: 720px; }
.ei-liste { display: grid; margin: 0; padding: 0; list-style: none; max-width: 720px; }
.ei { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.ei-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.ei-text b { font-size: 16px; }
.ei-stand { font-size: 14px; font-weight: 600; color: var(--matte); }
.ei[data-offen="nein"] .ei-stand { color: var(--grau); font-weight: 500; }
.ei-knoepfe { display: flex; align-items: center; gap: 4px; }

/* Feedback */
.fb-liste { display: grid; margin: 0; padding: 0; list-style: none; max-width: 820px; }
.fb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.fb-inhalt { display: grid; gap: 6px; min-width: 0; }
.fb-text { white-space: pre-line; overflow-wrap: anywhere; }
.fb[data-erledigt="ja"] .fb-text { color: var(--grau); }
.fb-haken { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: start; font-size: 14px; font-weight: 600; color: var(--tinte-2); cursor: pointer; }
.fb-haken input { width: 20px; height: 20px; margin: 0; accent-color: var(--tinte); cursor: pointer; }