/* 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; }
}