/* Agenturbereich - Uebersicht und Rahmenfarben (m7.3a62, ENTWURF, nur Darstellung).
   Alle Regeln haengen an .ag-frame (Rahmen des Agenturbereichs) bzw. .ag-ueb (Uebersichtsseite).
   Kein Eingriff in Backoffice, Plattformbereich, Inhaber-/Claim-Seiten oder /login.
   Farben aus der Designreferenz "Agenturbereich" abgelesen (siehe agentur-login.css). */

/* ---- Palette: der Agenturrahmen nutzt Petrol statt Oliv --------------------------------- */
.ag-frame {
  --bg: #EEF2F5;
  --surface: #FFFFFF;
  --surface-sunk: #F4F7F9;
  --border: #DCE4EA;
  --border-strong: #C5D0D9;
  --text: #0D1B2A;
  --text-muted: #4F5F70;
  --text-faint: #5A6975;
  --olive: #156E7C;
  --olive-dark: #0F5A66;
  --olive-tint: #E0EFF2;
  --olive-border: #B7D6DC;
  --terracotta: #A04A32;   /* Pruefen/Ausstehend: 5,2:1 auf dem Tint (vorher 4,3:1) */
  --radius: 12px;
  --radius-s: 8px;
  --shadow-1: 0 1px 2px rgba(13, 27, 42, .05), 0 1px 3px rgba(13, 27, 42, .05);
  background: var(--bg);
  color: var(--text);
}
.ag-frame :focus-visible { outline: 3px solid #156E7C; outline-offset: 2px; }
.ag-frame .btn:focus-visible { box-shadow: none; outline: 3px solid #156E7C; outline-offset: 2px; }

/* ---- Seitenleiste ------------------------------------------------------------------------ */
.ag-frame .sidebar { background: #fff; border-right: 1px solid var(--border); }
.ag-frame .agentur-kopf {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 4px 14px;
}
.ag-frame .agentur-kopf-label {
  display: inline-block; align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #0F5A66; background: var(--olive-tint); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}
.ag-frame .agentur-kopf-name { font-size: 15px; font-weight: 700; }
.ag-frame .nav-link {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; border-radius: 10px; padding: 11px 12px; font-size: 14.5px;
  color: var(--text);
}
.ag-frame .nav-link .ag-icon { flex: none; color: var(--text-muted); }
.ag-frame .nav-link:hover:not(.is-active) { background: var(--surface-sunk); }
.ag-frame .nav-link.is-active { background: var(--olive-tint); color: #0F5A66; font-weight: 650; }
.ag-frame .nav-link.is-active .ag-icon { color: #156E7C; }
.ag-frame .topbar { background: #fff; border-bottom: 1px solid var(--border); }

/* ---- Uebersichtsseite --------------------------------------------------------------------- */
.ag-ueb { gap: 18px; }
.ag-ueb-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ag-ueb-kopf-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-ueb-kopf .page-head { margin: 0; }
.ag-ueb .page-title { font-size: 28px; font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ag-ueb .page-intro { color: var(--text-muted); font-size: 15px; }
.ag-ueb .hauptaktionen { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.ag-ueb .btn-primary, .ag-ueb .btn-secondary { border-radius: 8px; font-weight: 650; }
.ag-ueb .btn-secondary { background: #fff; border-color: #156E7C; color: #0F5A66; }
.ag-ueb .btn-secondary:hover:not(:disabled) { background: var(--olive-tint); }
.ag-ueb .btn-secondary:disabled { border-color: var(--border-strong); color: var(--text-faint); background: var(--surface-sunk); }
.ag-ueb .hauptaktionen-grund { margin: 0; color: var(--text-muted); }

/* Kennzahlkarten */
.ag-ueb .kacheln { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0; }
.ag-ueb .kachel {
  display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-1); cursor: pointer;
}
.ag-ueb .kachel:hover { border-color: #9DB9C1; background: #fff; }
.ag-ueb .kachel-symbol {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ag-ueb .kachel:nth-child(1) .kachel-symbol { background: #E4EFFB; color: #1D5FA8; }
.ag-ueb .kachel:nth-child(2) .kachel-symbol { background: #FDF0DA; color: #9A5B00; }
.ag-ueb .kachel:nth-child(3) .kachel-symbol { background: #DDF1EE; color: #0F6E63; }
.ag-ueb .kachel:nth-child(4) .kachel-symbol { background: #ECE8F8; color: #5B49A6; }
.ag-ueb .kachel-text { display: flex; flex-direction: column; min-width: 0; }
.ag-ueb .kachel-wert { order: 1; font-size: 28px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ag-ueb .kachel-titel { order: 2; font-size: 14.5px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.ag-ueb .kachel-sub { order: 3; font-size: 12.5px; color: var(--text-faint); margin-top: 4px; overflow-wrap: anywhere; }

/* Tafeln */
.ag-ueb .panel { border-radius: var(--radius); border-color: var(--border); }
.ag-ueb .panel-kopf { padding-right: 18px; align-items: center; }
.ag-ueb .panel-kopf .panel-titel {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--text); padding: 16px 18px;
}
.ag-ueb .panel-kopf > .btn { margin-top: 0; }
/* Der Zertifizierungskasten ist ein direktes Kind der Tafel; die allgemeine Randregel
   (.panel-agentur > p, > .liste ...) kannte ihn nicht, er stiess an den Tafelrand. */
.ag-ueb .panel-agentur > .pilot-kasten { margin: 4px 18px 18px; }

/* Tabelle */
.ag-tabelle-rahmen { overflow-x: auto; }
.ag-tabelle { width: 100%; border-collapse: collapse; }
.ag-tabelle thead th {
  text-align: left; font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-sunk); padding: 12px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ag-tabelle tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 14.5px; }
.ag-tabelle tbody tr:last-child td { border-bottom: 0; }
.ag-td-name { font-weight: 650; }
.ag-td-aktion { text-align: right; white-space: nowrap; }
.ag-mehr { margin: 0; padding: 12px 18px 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }
.ag-leer { margin: 0; padding: 18px; color: var(--text-muted); }
.ag-ueb .panel-agentur > .ag-leer, .ag-ueb .panel-agentur > .note { margin: 4px 18px 18px; padding-left: 12px; }
.ag-ueb .panel-agentur > .ag-leer { padding: 4px 0 0; }

/* Telefon: Tabelle wird zu Karten */
@media (max-width: 640px) {
  .ag-ueb .page-title { font-size: 24px; }
  .ag-ueb .hauptaktionen { width: 100%; }
  .ag-ueb .hauptaktionen .btn { flex: 1 1 100%; }
  .ag-ueb .kachel { padding: 14px 16px; }
  .ag-ueb .kachel-symbol { width: 44px; height: 44px; }
  .ag-ueb .kachel-wert { font-size: 24px; }
  .ag-ueb .panel-kopf { flex-wrap: wrap; }
  .ag-ueb .panel-kopf > .btn { margin: 0 18px 12px; }
  .ag-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ag-tabelle, .ag-tabelle tbody, .ag-tabelle tr, .ag-tabelle td { display: block; width: 100%; }
  .ag-tabelle tbody tr { padding: 14px 18px 16px; border-top: 1px solid var(--border); }
  .ag-tabelle tbody td { border: 0; padding: 3px 0; display: flex; gap: 10px; justify-content: space-between; font-size: 14px; }
  .ag-tabelle tbody td::before { content: attr(data-label); flex: none; color: var(--text-muted); font-size: 12.5px; padding-top: 2px; }
  .ag-tabelle tbody td.ag-td-name { font-size: 16px; display: block; }
  .ag-tabelle tbody td.ag-td-name::before, .ag-tabelle tbody td.ag-td-aktion::before { content: none; }
  .ag-tabelle tbody td.ag-td-aktion { display: block; padding-top: 10px; }
  .ag-tabelle .ag-td-aktion .btn { width: 100%; justify-content: center; min-height: 44px; }
}

/* Zeile ohne Betriebsbindung: sachlicher Text statt Platzhalter, kein Link */
.ag-ohne { font-weight: 500; color: var(--text-muted); font-style: italic; }

/* Direkte Kinder von Tafeln ohne eigene Randregel (gleiche Ursache wie beim Zertifizierungskasten):
   Betriebskarten, Uebernahme- und Suchbereich sassen am Tafelrand bzw. ohne Innenabstand. */
.ag-frame .panel > .kartenraster { margin: 8px 18px 18px; }
/* Uebernahme-/Suchbereich bringen den Seitenabstand ihrer Felder selbst mit; nur ihre Absaetze sassen am Rand. */
.ag-frame .panel > .uebernahme > p,
.ag-frame .panel > .suchbereich > p { margin-inline: 0; padding-inline: 18px; }
@media (max-width: 640px) { .ag-frame .panel > .uebernahme > p, .ag-frame .panel > .suchbereich > p { padding-inline: 16px; } }

/* Formularbloecke direkt in einer Tafel (z. B. "Mitglied einladen"): Absatz und Schaltflaeche sassen am Rand,
   die Feldgruppe bringt ihren Abstand selbst mit. */
.ag-frame .panel > .form > p, .ag-frame .panel > .form > .form-ok, .ag-frame .panel > .form > .form-error { margin-inline: 18px; }
.ag-frame .panel > .form > .btn, .ag-frame .panel > .form > .aktionen { margin: 6px 18px 18px; }

/* ---- Telefon: Tabellen von Team, Gebiete und Antraege als Karten (E-E) ------------------------------------
   Gleiche Zellen und Inhalte wie die Desktop-Tabelle; jede Zelle traegt ihre Spaltenbeschriftung (data-label,
   gesetzt in ui/agentur-tabelle.js). Die Kopfzeile bleibt fuer Hilfstechnik im DOM (nur optisch ausgeblendet),
   ARIA-Rollen erhalten die Tabellensemantik. Lange Inhalte brechen um. Desktop-Tabellen bleiben unveraendert. */
@media (max-width: 640px) {
  .ag-frame .ag-karten-rahmen { overflow: visible; padding: 8px 12px 6px; }
  .ag-frame .table.ag-karten { display: block; min-width: 0; width: 100%; border: 0; }
  .ag-frame .table.ag-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ag-frame .table.ag-karten tbody { display: block; }
  .ag-frame .table.ag-karten tr.row {
    display: block; background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px 14px; margin: 0 0 12px; box-shadow: var(--shadow-1);
  }
  .ag-frame .table.ag-karten td {
    display: block; width: 100%; min-width: 0; border: 0; padding: 7px 0; font-size: 14.5px;
    overflow-wrap: anywhere; word-break: normal; white-space: normal; text-align: left;
  }
  .ag-frame .table.ag-karten td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; text-transform: none;
  }
  .ag-frame .table.ag-karten td:first-child { padding-top: 2px; font-size: 16px; font-weight: 650; border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 10px; }
  .ag-frame .table.ag-karten td:first-child .cell-sub { font-weight: 400; font-size: 13px; }
  .ag-frame .table.ag-karten td[data-label="Aktion"] { padding-top: 10px; }
  .ag-frame .table.ag-karten td[data-label="Aktion"]::before { content: none; }
  .ag-frame .table.ag-karten td[data-label="Aktion"] .btn { width: 100%; justify-content: center; min-height: 44px; }
  .ag-frame .table.ag-karten td .chip { white-space: normal; }
  .ag-frame .table.ag-karten .cell-date { white-space: normal; }
  .ag-frame .table.ag-karten .grundtext { margin: 0; overflow-wrap: anywhere; }
}

/* ---- Antraege: Karten unter 1280 px (viele Spalten); ab 1280 px bleibt es die Tabelle. Gleiche Regeln wie oben, nur breiterer Schwellenwert. ---- */
@media (max-width: 1279px) {
  .ag-frame .ag-karten-rahmen.ag-karten-breit { overflow: visible; padding: 8px 12px 6px; }
  .ag-frame .table.ag-karten.ag-karten-breit { display: block; min-width: 0; width: 100%; border: 0; }
  .ag-frame .table.ag-karten.ag-karten-breit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ag-frame .table.ag-karten.ag-karten-breit tbody { display: block; }
  .ag-frame .table.ag-karten.ag-karten-breit tr.row {
    display: block; background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px 14px; margin: 0 0 12px; box-shadow: var(--shadow-1);
  }
  .ag-frame .table.ag-karten.ag-karten-breit td {
    display: block; width: 100%; min-width: 0; border: 0; padding: 7px 0; font-size: 14.5px;
    overflow-wrap: anywhere; word-break: normal; white-space: normal; text-align: left;
  }
  .ag-frame .table.ag-karten.ag-karten-breit td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; text-transform: none;
  }
  .ag-frame .table.ag-karten.ag-karten-breit td:first-child { padding-top: 2px; font-size: 16px; font-weight: 650; border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 10px; }
  .ag-frame .table.ag-karten.ag-karten-breit td:first-child .cell-sub { font-weight: 400; font-size: 13px; }
  .ag-frame .table.ag-karten.ag-karten-breit td[data-label="Aktion"] { padding-top: 10px; }
  .ag-frame .table.ag-karten.ag-karten-breit td[data-label="Aktion"]::before { content: none; }
  .ag-frame .table.ag-karten.ag-karten-breit td[data-label="Aktion"] .btn { width: 100%; justify-content: center; min-height: 44px; }
  .ag-frame .table.ag-karten.ag-karten-breit td .chip { white-space: normal; }
  .ag-frame .table.ag-karten.ag-karten-breit .cell-date { white-space: normal; }
  .ag-frame .table.ag-karten.ag-karten-breit .grundtext { margin: 0; overflow-wrap: anywhere; }
}
/* 641-1279 px: jede Karte nutzt die volle Breite (kein zweiter, leerer Spaltenplatz); die Felder ordnen sich innerhalb der Karte in Spalten an */
@media (min-width: 641px) and (max-width: 1279px) {
  .ag-frame .table.ag-karten.ag-karten-breit tr.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px 24px; padding: 14px 20px 16px; }
  .ag-frame .table.ag-karten.ag-karten-breit tr.row > td { min-width: 0; }
  .ag-frame .table.ag-karten.ag-karten-breit tr.row > td:first-child,
  .ag-frame .table.ag-karten.ag-karten-breit tr.row > td[data-label="Begründung"],
  .ag-frame .table.ag-karten.ag-karten-breit tr.row > td[data-label="Aktion"] { grid-column: 1 / -1; }
  .ag-frame .table.ag-karten.ag-karten-breit td[data-label="Aktion"] .btn { width: auto; min-width: 220px; }
}

/* ---- Telefon: Betriebskarten der Uebersicht nach der Referenz (Name + Status in einer Zeile, Ort, Hinweis, volle Schaltflaeche) ---- */
@media (max-width: 640px) {
  .ag-tabelle tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px;
    margin: 0 12px 12px; width: auto; padding: 14px 16px 16px;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-1);
  }
  .ag-tabelle tbody td { display: block; border: 0; padding: 0; width: auto; min-width: 0; overflow-wrap: anywhere; }
  .ag-tabelle tbody td::before { content: none; }
  .ag-tabelle tbody td.ag-td-name { grid-column: 1; grid-row: 1; font-size: 16px; padding-top: 2px; }
  .ag-tabelle tbody td[data-label="Betreuung"] { grid-column: 2; grid-row: 1; align-self: start; }
  .ag-tabelle tbody td[data-label="Ort"] { grid-column: 1 / -1; grid-row: 2; color: var(--text-muted); font-size: 14px; }
  .ag-tabelle tbody td[data-label="Ort"]:empty { display: none; }
  .ag-tabelle tbody td[data-label="Hinweis"] { grid-column: 1 / -1; grid-row: 3; font-size: 14px; color: var(--text); }
  .ag-tabelle tbody td.ag-td-aktion { grid-column: 1 / -1; grid-row: 4; padding-top: 10px; }
  .ag-tabelle tbody td.ag-td-aktion:empty { display: none; }
  .ag-tabelle .ag-td-aktion .btn { width: 100%; min-height: 44px; background: #156E7C; border-color: #156E7C; color: #fff; justify-content: center; }
  .ag-tabelle .ag-td-aktion .btn:hover { background: #0F5A66; border-color: #0F5A66; }
  .ag-tabelle-rahmen { padding-top: 6px; }
  .ag-mehr { margin: 0 12px; border-top: 0; }
}
@media (max-width: 640px) {
  /* Aktionszelle ohne Schaltflaeche (nur "-"): Beschriftung zeigen, damit der Wert zugeordnet bleibt */
  .ag-frame .table.ag-karten td[data-label="Aktion"]:not(:has(.btn))::before { content: attr(data-label); }
}

/* ---- Naeher an der Referenz (Runde 3) ------------------------------------------------------------------ */
.ag-topbar-badge {
  margin-left: auto; font-size: 12px; font-weight: 600; color: #0F5A66; background: var(--olive-tint);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.ag-ueb .page-title { font-size: 32px; }
/* Kennzahlkarten: vier in einer Reihe, auf mittleren Breiten 2 x 2 (nicht 3 + 1) */
.ag-ueb .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .ag-ueb .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ag-ueb .page-title { font-size: 28px; }
  /* Telefon: zwei Karten je Reihe mit Symbol oben, wie in der Referenz */
  .ag-ueb .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ag-ueb .kachel { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .ag-ueb .kachel-symbol { width: 40px; height: 40px; }
  .ag-ueb .kachel-wert { font-size: 26px; }
  .ag-ueb .kachel-titel { font-size: 14px; }
  .ag-ueb .kachel-sub { font-size: 12px; }
  /* Tafelkopf: Titel und "Alle Betriebe anzeigen" in einer Zeile */
  .ag-ueb .ag-betriebe .panel-kopf { flex-wrap: nowrap; gap: 8px; padding-right: 12px; }
  .ag-ueb .ag-betriebe .panel-kopf .panel-titel { padding-right: 0; }
  .ag-ueb .ag-betriebe .panel-kopf > .btn { margin: 0; white-space: nowrap; }
}

/* =====================================================================================================
   Runde 4 (E-F/E-G): durchgehende Kopfleiste, schlichte Seitenleiste, Inter lokal, Betreuungsgebiet-Tafel
   Alles unter .ag-frame / .ag-ueb; die Schrift heisst bewusst "Inter Agentur", damit die vorhandene
   Schriftangabe "Inter" im uebrigen Backoffice nicht beruehrt wird (dort bleibt die Systemschrift).
   ===================================================================================================== */
@font-face {
  font-family: "Inter Agentur";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
.ag-frame {
  --font: "Inter Agentur", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font);
  --ag-kopf-h: 64px;
}
.ag-frame button, .ag-frame input, .ag-frame select, .ag-frame textarea { font-family: inherit; }

/* Kopfleiste */
.ag-frame .ag-topbar {
  display: flex; align-items: center; gap: 16px; height: var(--ag-kopf-h); padding: 0 28px;
  background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40;
}
.ag-frame .ag-topbar .nav-toggle { display: none; }
.ag-frame .ag-topbar .ag-brand-text { font-size: 21px; }
.ag-frame .ag-topbar .ag-badge { font-size: 13px; }
.ag-frame .ag-benutzer {
  margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 10px;
  border: 0; padding: 0; min-width: 0;
}
.ag-frame .ag-benutzer .account { gap: 10px; padding: 0; min-width: 0; }
.ag-frame .ag-benutzer .avatar { width: 34px; height: 34px; font-size: 13px; }
.ag-frame .ag-benutzer .account-mail { font-size: 14px; color: var(--text); max-width: 240px; }
.ag-frame .ag-benutzer .btn { width: auto; min-height: 36px; padding: 0 14px; font-size: 14px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); }
.ag-frame .ag-benutzer .btn:hover { background: var(--olive-tint); }

/* Seitenleiste: unter der Kopfleiste, schlicht */
.ag-frame .sidebar { top: var(--ag-kopf-h); padding: 18px 14px 14px; }
.ag-frame .agentur-kopf {
  background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  padding: 2px 10px 16px; margin: 0 0 12px;
}
.ag-frame .agentur-kopf-name { font-size: 17px; font-weight: 700; display: block; overflow-wrap: anywhere; }
.ag-frame .agentur-kopf .agentur-waehler { font-size: 15px; font-weight: 650; min-height: 40px; }
.ag-frame .agentur-kopf-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.ag-frame .agentur-kopf-art + .agentur-kopf-rolle::before { content: "·"; margin-right: 8px; }
.ag-frame .nav-link { padding: 12px 14px; font-size: 15px; }
.ag-frame .main { min-width: 0; }
.ag-frame .outlet { padding: 32px 40px 56px; max-width: 1240px; }

@media (max-width: 900px) {
  .ag-frame { --ag-kopf-h: 60px; }
  .ag-frame .ag-topbar { padding: 0 14px; gap: 10px; }
  .ag-frame .ag-topbar .nav-toggle { display: inline-flex; }
  .ag-frame .sidebar { top: var(--ag-kopf-h); width: min(86vw, 340px); }
  .ag-frame .ag-topbar .ag-brand-text { font-size: 18px; }
  .ag-frame .ag-benutzer .account-mail { display: none; }
  .ag-frame .outlet { padding: 22px 16px 48px; }
}
@media (max-width: 520px) {
  .ag-frame .ag-topbar .ag-badge { display: none; }   /* auf sehr schmalen Schirmen steht "Agenturbereich" in der Agenturkarte der Seitenleiste */
  .ag-frame .ag-benutzer .btn { padding: 0 10px; }
}

/* Uebersicht: Betreuungsgebiet-Tafel, Tabellenmasse, kompakte Hauptaktionen */
.ag-ueb .ag-gebiet-inhalt { display: flex; align-items: center; gap: 16px; padding: 4px 18px 20px; }
.ag-ueb .ag-gebiet-symbol { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #DDF1EE; color: #0F6E63; display: flex; align-items: center; justify-content: center; }
.ag-ueb .ag-gebiet-text { min-width: 0; }
.ag-ueb .ag-gebiet-name { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ag-ueb .ag-gebiet-hinweis { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.ag-ueb .ag-tabelle { table-layout: fixed; }
.ag-ueb .ag-tabelle th:nth-child(1) { width: 30%; } .ag-ueb .ag-tabelle th:nth-child(2) { width: 15%; }
.ag-ueb .ag-tabelle th:nth-child(3) { width: 17%; } .ag-ueb .ag-tabelle th:nth-child(4) { width: 28%; } .ag-ueb .ag-tabelle th:nth-child(5) { width: 10%; }
.ag-ueb .ag-tabelle tbody td { padding: 12px 18px; font-size: 14px; overflow-wrap: anywhere; }
.ag-ueb .ag-tabelle .chip { white-space: nowrap; }
.ag-ueb .kachel { padding: 20px 22px; }
@media (max-width: 640px) {
  .ag-ueb .hauptaktionen { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .ag-ueb .hauptaktionen .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 14px; line-height: 1.2; }
  .ag-ueb .ag-gebiet-inhalt { padding: 4px 16px 18px; gap: 12px; }
  .ag-ueb .ag-gebiet-symbol { width: 44px; height: 44px; }
  .ag-ueb .ag-gebiet-name { font-size: 20px; }
  .ag-ueb .ag-tabelle { table-layout: auto; }
  .ag-ueb .ag-gebiet .panel-kopf { flex-wrap: nowrap; gap: 8px; padding-right: 12px; }
  .ag-ueb .ag-gebiet .panel-kopf .panel-titel { padding-right: 0; }
  .ag-ueb .ag-gebiet .panel-kopf > .btn { margin: 0; white-space: nowrap; }
}

/* Runde 4b: Farbvariablen der Marke/des Schilds (definiert in agentur-login.css nur unter .ag-login-page) auch im Rahmen; Tabellenbreiten */
.ag-frame {
  --ag-text: #0D1B2A; --ag-petrol: #156E7C; --ag-petrol-dunkel: #0F5A66; --ag-petrol-hell: #E0EFF2;
}
.ag-ueb .ag-tabelle th:nth-child(1) { width: 27%; } .ag-ueb .ag-tabelle th:nth-child(2) { width: 15%; }
.ag-ueb .ag-tabelle th:nth-child(3) { width: 19%; } .ag-ueb .ag-tabelle th:nth-child(4) { width: 27%; } .ag-ueb .ag-tabelle th:nth-child(5) { width: 12%; }
.ag-ueb .ag-tabelle thead th, .ag-ueb .ag-tabelle tbody td { padding-left: 14px; padding-right: 14px; }
.ag-ueb .ag-tabelle thead th:first-child, .ag-ueb .ag-tabelle tbody td:first-child { padding-left: 18px; }
.ag-ueb .ag-tabelle thead th:last-child, .ag-ueb .ag-tabelle tbody td:last-child { padding-right: 18px; }
@media (max-width: 640px) { .ag-ueb .ag-tabelle thead th, .ag-ueb .ag-tabelle tbody td { padding-left: 0; padding-right: 0; } }

/* Runde 4c: mobile Kopfleiste und Betriebskarten der Uebersicht (Spezifitaet der Desktop-Masse aufheben) */
.ag-frame .ag-topbar .ag-brand { flex-wrap: nowrap; min-width: 0; gap: 8px; }
.ag-frame .ag-topbar .ag-brand-text { white-space: nowrap; }
@media (max-width: 900px) {
  .ag-frame .ag-topbar .ag-pin { width: 18px; height: 23px; }
  .ag-frame .ag-benutzer .avatar { display: none; }
}
@media (max-width: 640px) {
  .ag-ueb .ag-tabelle thead th, .ag-ueb .ag-tabelle thead th:first-child, .ag-ueb .ag-tabelle thead th:last-child,
  .ag-ueb .ag-tabelle tbody td, .ag-ueb .ag-tabelle tbody td:first-child, .ag-ueb .ag-tabelle tbody td:last-child { padding: 0; }
  .ag-ueb .ag-tabelle tbody td.ag-td-name { padding-top: 2px; }
  .ag-ueb .ag-tabelle tbody td.ag-td-aktion { padding-top: 10px; }
}
@media (max-width: 640px) {
  /* app.css stapelt die Hauptaktionen untereinander (flex-direction: column, width: 100%); hier kompakt nebeneinander */
  .ag-ueb .hauptaktionen { flex-direction: row; align-items: stretch; }
  .ag-ueb .hauptaktionen .btn { width: auto; }
}

/* =====================================================================================================
   Runde 5: Wortmarke, Navigation, dezentere Karten, mobile Tafel entfernen, mobiles Menue, lange E-Mail
   ===================================================================================================== */
/* 1 Wortmarke wie in der Referenz: einfarbig dunkel, "Treffpunkt" fett, "Places" normal, kein Pin */
.ag-frame .ag-wortmarke { display: flex; align-items: center; gap: 12px; flex: none; }
.ag-frame .ag-wm-text { font-size: 22px; letter-spacing: -.01em; color: #0D1B2A; white-space: nowrap; }
.ag-frame .ag-wm-1 { font-weight: 700; }
.ag-frame .ag-wm-2 { font-weight: 400; }

/* 2 Navigation: normal gewichtet, helle abgerundete Aktivflaeche, kein linker Balken */
.ag-frame .nav-link { font-weight: 500; border-radius: 10px; }
.ag-frame .nav-link.is-active { font-weight: 500; box-shadow: none; background: #E6F1F4; color: #0F5A66; }
.ag-frame .nav-link.is-active .ag-icon { color: #156E7C; }

/* 3 Karten/Tafeln dezenter, Titel weniger schwer */
.ag-frame { --shadow-1: 0 1px 2px rgba(13, 27, 42, .035); }
.ag-frame .panel, .ag-ueb .kachel { border-color: #E6ECF1; box-shadow: 0 1px 2px rgba(13, 27, 42, .035); }
.ag-frame .page-title { font-weight: 650; letter-spacing: -.015em; }
.ag-ueb .page-title { font-size: 30px; font-weight: 650; }
.ag-ueb .kachel:hover { border-color: #C9D8DE; }

/* 6 Benutzerbereich: lange Adresse kuerzt sich selbst, Marke und Abmelden bleiben stehen */
.ag-frame .ag-benutzer { flex: 0 1 auto; min-width: 0; }
.ag-frame .ag-benutzer .account { flex: 1 1 auto; min-width: 0; }
.ag-frame .ag-benutzer .avatar, .ag-frame .ag-benutzer .btn { flex: none; }
.ag-frame .ag-benutzer .account-mail { flex: 1 1 auto; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-frame .ag-angemeldet { display: none; }

@media (max-width: 900px) {
  /* 5 Mobiles Menue */
  .ag-frame .nav-toggle { border: 0; background: transparent; width: 44px; height: 44px; border-radius: 10px; }
  .ag-frame .nav-toggle:hover { background: var(--olive-tint); }
  .ag-frame .nav-toggle-bars, .ag-frame .nav-toggle-bars::before, .ag-frame .nav-toggle-bars::after { width: 20px; height: 2px; }
  .ag-frame .nav-toggle-bars::before { top: -6px; } .ag-frame .nav-toggle-bars::after { top: 6px; }
  .ag-frame .ag-hintergrund {
    display: block; position: fixed; inset: var(--ag-kopf-h) 0 0 0; z-index: 19;
    background: rgba(13, 27, 42, .5); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
  }
  .ag-frame.nav-open .ag-hintergrund { opacity: 1; visibility: visible; }
  html.ag-menue-offen { overflow: hidden; }
  .ag-frame .ag-angemeldet { display: block; margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--border); font-size: 13px; }
  .ag-frame .ag-angemeldet-label { display: block; color: var(--text-muted); }
  .ag-frame .ag-angemeldet-mail { display: block; color: var(--text); overflow-wrap: anywhere; }
  .ag-frame .ag-wm-text { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ag-frame .ag-hintergrund { transition: none; } }

@media (max-width: 640px) {
  .ag-ueb .page-title { font-size: 26px; }
  /* 4 Keine aeussere Tafel um die Betriebskarten: Ueberschrift + Schaltflaeche und einzelne Karten stehen auf dem Seitenhintergrund */
  .ag-ueb .ag-betriebe { background: transparent; border: 0; box-shadow: none; overflow: visible; margin-bottom: 4px; }
  .ag-ueb .ag-betriebe .panel-kopf { padding: 0 2px 4px 2px; align-items: center; }
  .ag-ueb .ag-betriebe .panel-kopf .panel-titel { padding: 0; font-size: 18px; }
  .ag-ueb .ag-betriebe .ag-tabelle-rahmen { padding: 0; overflow: visible; }
  .ag-ueb .ag-betriebe .ag-tabelle tbody tr { margin: 0 0 12px; }
  .ag-ueb .ag-betriebe .ag-mehr { margin: 0; padding: 4px 2px 0; }
  .ag-ueb .ag-betriebe .ag-leer, .ag-ueb .ag-betriebe .note { margin: 0; }
}

/* =====================================================================================================
   Runde 6: Zaehler-Beschriftung, Rechte-Liste, Chip-Position, Filter, Erklaertexte, Innenabstand, Trennlinien
   ===================================================================================================== */
/* Zaehlerzeile unter der Betreuungen-Tabelle */
.ag-mehr { padding: 12px 18px 16px; border-top: 1px solid var(--border); }
.ag-mehr p { margin: 0; }
.ag-mehr-zeile { font-size: 13.5px; color: var(--text); }
.ag-mehr-hinweis { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

/* Rechte in Antraegen als lesbare Liste */
.ag-rechte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-rechte li { font-size: 13.5px; line-height: 1.35; overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* Status-Chips der Betriebskarten: immer rechts neben dem Namen, nie darunter */
.ag-frame .betriebskarte-kopf { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.ag-frame .betriebskarte-name { flex: 1 1 0; min-width: 0; }
.ag-frame .betriebskarte-kopf > .chip { flex: none; white-space: nowrap; margin-top: 1px; }

/* Ausgewaehlter Filter sichtbar; Filter der Antraege ohne Zusatzrahmen */
.ag-frame .btn[aria-pressed="true"] { background: var(--olive-tint); border-color: #156E7C; color: #0F5A66; font-weight: 650; }
.ag-frame .filterleiste[aria-label="Anträge filtern"] { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .ag-frame .filterleiste[aria-label="Anträge filtern"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ag-frame .filterleiste[aria-label="Anträge filtern"] .btn { width: 100%; min-height: 44px; justify-content: center; }
  .ag-frame .filterleiste[aria-label="Anträge filtern"] .btn:first-child { grid-column: 1 / -1; }
}

/* Erklaertexte nutzen die verfuegbare Breite */
.ag-frame .state-hint, .ag-frame .panel > .uebernahme > p, .ag-frame .panel > .suchbereich > p, .ag-frame .panel > .form > p { max-width: none; }

/* Trennlinien: Tabellenzellen mit zwei Zeilen (cell-name) waren per Flex keine Tabellenzellen mehr -> Linie sass versetzt */
.ag-frame td.cell-name, .ag-frame td.cell-place { display: table-cell; }
.ag-frame td.cell-name > .cell-title, .ag-frame td.cell-name > .cell-sub,
.ag-frame td.cell-place > .cell-title, .ag-frame td.cell-place > .cell-sub { display: block; }
.ag-frame td.cell-name > .cell-sub + .cell-sub, .ag-frame td.cell-place > .cell-sub + .cell-sub { margin-top: 2px; }

/* Innenabstand der Hauptaktion "Neuen Betrieb eintragen" (Uebersicht und Betriebe, mobil) */
@media (max-width: 640px) {
  .ag-ueb .hauptaktionen .btn { padding: 11px 14px; }
  .ag-frame .page-head-actions .btn { padding: 12px 18px; min-height: 44px; }
}

/* Desktop-Tabellen im Agentur-Rahmen: kompaktere Zellen, Kopfzeilen und Daten duerfen umbrechen, damit sie in die Tafel passen */
@media (min-width: 641px) {
  .ag-frame .table.ag-karten { min-width: 0; table-layout: auto; }
  .ag-frame .table.ag-karten th { padding: 11px 12px; white-space: normal; }
  .ag-frame .table.ag-karten td { padding: 12px; }
  .ag-frame .table.ag-karten th:first-child, .ag-frame .table.ag-karten td:first-child { padding-left: 18px; }
  .ag-frame .table.ag-karten th:last-child, .ag-frame .table.ag-karten td:last-child { padding-right: 18px; }
  .ag-frame .table.ag-karten .cell-date { white-space: normal; }
}

/* Betriebe: Erklaertext im Such-/Uebernahmeformular sass ohne Seitenabstand am Rand (Feldgruppen bringen ihren eigenen mit) */
.ag-frame .suchformular > p { padding-inline: 18px; }
@media (max-width: 640px) { .ag-frame .suchformular > p { padding-inline: 16px; } }
@media (max-width: 1279px) {
  .ag-frame .table.ag-karten.ag-karten-breit td[data-label="Aktion"]:not(:has(.btn))::before { content: attr(data-label); }
}

/* Antraege-Tabelle ab 1280 px: auch bei knapper Breite (1280-1439 px) ohne Scrollen - engere Zellen, kleinere Schrift, schmalere Seitenraender */
@media (min-width: 1280px) and (max-width: 1439px) {
  .ag-frame .outlet { padding-left: 24px; padding-right: 24px; }
  .ag-frame .table.ag-karten.ag-karten-breit .chip { font-size: 11.5px; padding-left: 8px; padding-right: 8px; }
  .ag-frame .table.ag-karten.ag-karten-breit th { padding: 10px 6px; font-size: 11px; letter-spacing: .04em; }
  .ag-frame .table.ag-karten.ag-karten-breit td { padding: 10px 6px; font-size: 13px; }
  .ag-frame .table.ag-karten.ag-karten-breit th:first-child, .ag-frame .table.ag-karten.ag-karten-breit td:first-child { padding-left: 14px; }
  .ag-frame .table.ag-karten.ag-karten-breit th:last-child, .ag-frame .table.ag-karten.ag-karten-breit td:last-child { padding-right: 14px; }
  .ag-frame .table.ag-karten.ag-karten-breit .ag-rechte li { font-size: 12.5px; }
  .ag-frame .table.ag-karten.ag-karten-breit .btn { padding: 6px 9px; font-size: 12.5px; }
}

/* Fokusziel nach Menueauswahl (Ueberschrift, tabindex -1): nur programmatisch fokussierbar, kein sichtbarer Rahmen, kein Tab-Stopp */
.ag-frame .ag-fokusziel, .ag-frame .ag-fokusziel:focus, .ag-frame .ag-fokusziel:focus-visible { outline: none; }

/* Hauptaktionen mobil: mindestens 16 px seitlicher Innenabstand; passen beide Schaltflaechen nicht nebeneinander, stehen sie untereinander (volle Breite) */
@media (max-width: 640px) {
  .ag-ueb .hauptaktionen { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; width: 100%; }
  .ag-ueb .hauptaktionen .btn { flex: 1 1 auto; width: auto; min-width: 0; white-space: nowrap; min-height: 44px; padding: 11px 16px; font-size: 14px; }
}

/* Sehr schmal (< 360 px): Kopfleiste passt in die Breite (Menueknopf, Wortmarke, "Abmelden" bleiben alle vorhanden); sonst 335 px Mindestbreite bei 320 px */
@media (max-width: 359px) {
  .ag-frame .ag-topbar { padding: 0 10px; gap: 6px; }
  .ag-frame .ag-topbar .nav-toggle { width: 40px; height: 44px; }
  .ag-frame .ag-topbar .ag-brand-text { font-size: 16px; }
  .ag-frame .ag-topbar .ag-wortmarke { gap: 8px; }
  .ag-frame .ag-benutzer .btn { padding: 0 9px; }
}
@media (max-width: 359px) { .ag-frame .ag-wm-text { font-size: 17px; } }
/* < 360 px: Panelkopf mit Schaltflaeche bricht um, statt die Schaltflaeche abzuschneiden (Alle Gebiete/Betriebe anzeigen) */
@media (max-width: 359px) {
  .ag-ueb .ag-gebiet .panel-kopf, .ag-ueb .ag-betriebe .panel-kopf { flex-wrap: wrap; }
  .ag-ueb .ag-gebiet .panel-kopf > .btn, .ag-ueb .ag-betriebe .panel-kopf > .btn { margin: 0 12px 10px; white-space: normal; }
}

/* Sehr schmal (< 320 px effektive Breite, z. B. 200 % Zoom auf einem Telefon oder 400 % Zoom): Die Kopfleiste bricht in zwei Zeilen um statt ueberzulaufen.
   Zeile 1: Menueschalter + Wortmarke (darf umbrechen), Zeile 2: "Abmelden" in voller Breite. Die Kopfhoehe ist ein fester Wert fuer zwei Zeilen und bleibt die Grundlage
   fuer Seitenleiste, Abdunklung und Arbeitsbereich des Assistenten (--ag-kopf-h). Nichts wird abgeschnitten oder verborgen. */
@media (max-width: 319px) {
  .ag-frame { --ag-kopf-h: 112px; }
  .ag-frame .ag-topbar { flex-wrap: wrap; align-content: center; row-gap: 6px; padding: 8px 10px; }
  .ag-frame .ag-topbar .ag-wortmarke { flex: 1 1 0; min-width: 0; }
  .ag-frame .ag-wm-text { white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.15; }
  .ag-frame .ag-benutzer { flex: 1 0 100%; margin-left: 0; }
  .ag-frame .ag-benutzer .account { flex: 0 0 auto; }
  .ag-frame .ag-benutzer .btn { flex: 1 1 auto; width: 100%; min-height: 44px; }
}

/* Reflow bei sehr geringer effektiver Breite (< 360 px, z. B. Zoom 200 % / 400 %): Schaltflaechen, Aktionsleisten und Ueberschriften der Seiten brechen um,
   statt ueber den Inhaltsbereich hinauszuragen (kein Abschneiden, kein Verbergen des Ueberlaufs). */
@media (max-width: 359px) {
  .ag-frame .outlet .btn { white-space: normal; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
  .ag-frame .outlet .kopf-aktionen, .ag-frame .outlet .page-head-actions, .ag-frame .outlet .op-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; min-width: 0; }
  .ag-frame .outlet .kopf-aktionen > .btn, .ag-frame .outlet .page-head-actions > .btn, .ag-frame .outlet .op-kopf-aktionen > .btn { flex: 1 1 100%; }
  .ag-frame .outlet :is(h1, h2, h3, h4, p, li, dt, dd, label, th, td) { overflow-wrap: anywhere; }
}

/* Aktionsleisten im Seitenkopf (z. B. "Schnell-Basiseintrag" + "Neues Restaurant") duerfen bis 419 px umbrechen: zwei Schaltflaechen mit nicht umbrechendem Text passen
   sonst nicht nebeneinander (Ueberlauf bei 360-380 px). */
@media (max-width: 419px) {
  .ag-frame .outlet .kopf-aktionen, .ag-frame .outlet .page-head-actions, .ag-frame .outlet .op-kopf-aktionen, .ag-frame .outlet .head-actions { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .ag-frame .outlet .kopf-aktionen > .btn, .ag-frame .outlet .page-head-actions > .btn, .ag-frame .outlet .op-kopf-aktionen > .btn, .ag-frame .outlet .head-actions > .btn { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; }
}

/* m7.3a123/a124: "Passwort ändern" - bis 900 px im aufklappbaren Menü statt in der Kopfleiste (dort kein Platz neben Menüknopf, Wortmarke und "Abmelden") */
.ag-frame .ag-konto-menue { display: none; }
@media (max-width: 900px) {
  .ag-frame .ag-benutzer #konto-passwort { display: none; }
  .ag-frame .ag-konto-menue { display: block; padding: 10px 10px 4px; }
  .ag-frame .ag-konto-menue .btn { min-height: 44px; justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
   m7.3a126/a127: Betriebsseite im Agenturbereich (Arbeitsbereich) - Abstaende, Kacheln, Bearbeiten-Buttons auf einer Linie, Aktionsleiste.
   Ursache vorher: .bereichsraster fehlte in der Abstandsregel von .panel-agentur (Kacheln stiessen an den Rahmen), der Button hing direkt unter dem Text
   (je nach Textlaenge auf anderer Hoehe), die Statusanzeige brach je nach Titelbreite um, jede Zusatzaktion stand in einem eigenen Absatz. */
.panel-agentur > .bereichsraster { margin: 16px 18px 18px; gap: 16px; }
/* feste Spaltenzahl statt "so viele wie passen": die acht Bereiche ergeben so nie eine halb leere Zeile (1 / 2 / 4 Spalten) */
@media (min-width: 620px) {
  .panel-agentur > .bereichsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .panel-agentur > .bereichsraster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.panel-agentur .bereichskarte { gap: 10px; padding: 18px; box-shadow: 0 1px 2px rgba(13, 27, 42, .04); }
/* Titel und Status immer untereinander (nie mal daneben, mal darunter); Zeichen + Wort bleiben, nur die Anordnung ist einheitlich */
.panel-agentur .bereichskarte-kopf { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.panel-agentur .bereichskarte-titel { font-size: 15.5px; line-height: 1.3; }
.panel-agentur .bereichskarte-text { line-height: 1.55; }
/* Die Aktion sitzt am Fuss der Kachel: alle Bearbeiten-Buttons einer Zeile stehen auf einer Linie, unabhaengig von der Textlaenge */
.panel-agentur .bereichskarte > .btn { margin-top: auto; align-self: stretch; min-height: 40px; justify-content: center; }
.panel-agentur .bereichskarte > .bereichskarte-text:last-child, .panel-agentur .bereichskarte > .bereich-grund:last-child { margin-top: 0; }
/* Zusatzaktionen in einer Leiste */
.panel-agentur > .arbeit-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 18px 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.arbeit-aktionen .btn { min-height: 40px; }
@media (max-width: 520px) {
  .panel-agentur > .bereichsraster { margin: 14px 14px 16px; }
  .panel-agentur > .arbeit-aktionen { margin: 4px 14px 18px; }
  .arbeit-aktionen .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
   m7.3a128/a129: Karte im Agenturbereich. Betreuung = Form UND Farbe: betreut = gefuellt mit Haken, frei = Ring mit Plus, weitere = klein, grau. */
.ka-punkt.bt-eigene { background: var(--olive); color: var(--olive); border-color: #fff; }
.ka-punkt.bt-frei { background: #fff; color: var(--olive); border: 3px solid var(--olive); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(29, 27, 23, .4); }
.ka-punkt.bt-andere { background: #6B645B; color: #6B645B; width: 16px; height: 16px; border-width: 2px; }
.ka-punkt.bt-eigene, .ka-punkt.bt-frei { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; }
.ka-punkt.bt-eigene { color: #fff; }
.ka-punkt.bt-frei.ist-privat, .ka-punkt.bt-andere.ist-privat { background: #fff; }
.ak-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 12px 0 4px; padding: 0; font-size: 13.5px; color: var(--text); }
.ak-legende li { display: inline-flex; align-items: center; gap: 8px; }
.ak-legendepunkt { position: static; flex: none; }
.ak-chip.bt-eigene { background: var(--olive-tint, #E4F0F1); color: var(--olive-dark, #0E5A68); border-color: var(--olive-border, #9CC7CC); }
.ak-chip.bt-frei { background: #fff; color: var(--olive-dark, #0E5A68); border-color: var(--olive); }
.ak-chip.bt-andere { background: #F3F0EA; color: var(--text); border-color: var(--border-strong); }
.ak-detail-text { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

/* m7.3a128/a129: Werkzeugleiste der Agenturkarte - Suche, Filter und Zuruecksetzen in einer Zeile, in jeder Breite sichtbar */
.ak-werkzeuge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; align-items: end; gap: 12px 16px; }
.ak-werkzeuge .op-suche { align-self: end; }
.ak-werkzeuge .op-suchen { display: inline-flex; }
.ak-zurueck { min-height: 44px; }
@media (max-width: 900px) {
  .ak-werkzeuge { grid-template-columns: minmax(0, 1fr); }
  .ak-werkzeuge .op-suchen { display: inline-flex; min-height: 44px; padding-inline: 18px; }
  .ak-zurueck { width: 100%; }
}
/* Lage nicht oeffentlich: gestrichelter Ring in der Farbe der Betreuungsart (kein weisser Rand auf weissem Grund) */
.ka-punkt.bt-eigene.ist-privat { background: #fff; color: var(--olive); border: 3px dashed var(--olive); }
.ka-punkt.bt-frei.ist-privat { border: 3px dashed var(--olive); }
.ka-punkt.bt-andere.ist-privat { border: 2px dashed #6B645B; background: #fff; }
.ak-legende .ak-legende-hinweis { font-size: 13px; color: var(--text-muted); }
.ak-datenschutz { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); max-width: 90ch; }