/* Oberfläche m7.3a48: ruhig, großzügig, weich gerundet (inspiriert von Apple-Oberflächen).
   Bleibt bei der Marke: warme Weißtöne, Olivgrün, Terracotta nur als Akzent. Wird NACH app.css geladen und
   überschreibt dessen Gestaltungswerte (Farben, Radien, Schatten, Abstände); Struktur und Funktionen bleiben. */

:root {
  --bg:            #F8F6F2;
  --surface:       #FFFFFF;
  --surface-sunk:  #F6F4EF;
  --border:        #E9E4DA;
  --border-strong: #D8D1C4;

  --text:          #1D1B17;
  --text-muted:    #5F594F;     /* ≈ 6,6 : 1 auf Weiß */
  --text-faint:    #756D62;     /* ≈ 4,9 : 1 auf Weiß (vorher 3,2 : 1) */

  --olive:         #62723F;
  --olive-dark:    #4E5C33;     /* Knopffläche mit weißer Schrift ≈ 7 : 1 */
  --olive-tint:    #EEF1E6;
  --olive-border:  #CFD8B8;

  --radius:   16px;
  --radius-s: 11px;
  --shadow-1: 0 1px 2px rgba(29,27,23,.04), 0 2px 8px rgba(29,27,23,.04);
  --shadow-2: 0 12px 36px rgba(29,27,23,.12), 0 2px 8px rgba(29,27,23,.06);

  --sidebar-w: 264px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ziel: 44px;                 /* Mindestgröße für Berührungsflächen */
  --ring: 0 0 0 3px rgba(98,114,63,.28);
}

body { font-size: 15px; letter-spacing: -.005em; }

:focus-visible { outline: 2px solid var(--olive-dark); outline-offset: 2px; border-radius: 8px; }

/* ---------------------------------------------------------- Knöpfe */
.btn { min-height: 40px; padding: 9px 18px; border-radius: 999px; font-weight: 600; }
.btn-klein { min-height: 34px; padding: 6px 14px; }
.btn-primary { background: var(--olive-dark); border-color: var(--olive-dark); }
.btn-primary:hover:not(:disabled) { background: #3F4B29; border-color: #3F4B29; }
.btn-secondary, .btn-quiet { background: var(--surface); border-color: var(--border-strong); }
.btn:focus-visible { box-shadow: var(--ring); outline-offset: 1px; }

/* ----------------------------------------------- Eingabefelder */
.input, .select {
  min-height: 42px; border-radius: var(--radius-s); border: 1px solid var(--border-strong);
  background: var(--surface); padding: 9px 14px; font-size: 15px;
}
.input:focus, .select:focus { border-color: var(--olive); box-shadow: var(--ring); outline: none; }
.label { font-size: 13px; font-weight: 600; color: var(--text-muted); }

/* --------------------------------------------------- Flächen */
.panel { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow-1); }
.outlet { padding: 40px 40px 64px; max-width: 1240px; }
.page { gap: 24px; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.page-intro { font-size: 15px; max-width: 62ch; }

/* ----------------------------------------------- Navigation */
.sidebar { padding: 24px 16px 16px; background: rgba(255,255,255,.92); border-right-color: var(--border); }
.sidebar-head { padding: 0 10px 24px; }
.nav-list { gap: 4px; }
.nav-link { min-height: 40px; padding: 9px 12px; border-radius: var(--radius-s); font-weight: 560; color: var(--text-muted); }
.nav-link:hover:not(.is-disabled):not(.is-active) { background: var(--surface-sunk); color: var(--text); }
.nav-link.is-active { background: var(--olive-tint); color: var(--olive-dark); font-weight: 650; box-shadow: inset 3px 0 0 var(--olive); }
.nav-link.has-active { color: var(--text); }
.nav-unterlink { padding-left: 26px; font-weight: 500; font-size: 14px; min-height: 36px; }
.nav-block > .nav-unterliste { margin: 2px 0 6px; }
.nav-gruppe { margin-top: 6px; }
.nav-gruppe-kopf {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 9px 12px; border: 0; border-radius: var(--radius-s); background: transparent;
  font: inherit; font-weight: 560; color: var(--text-muted); cursor: pointer; text-align: left;
}
.nav-gruppe-kopf:hover { background: var(--surface-sunk); color: var(--text); }
.nav-gruppe-kopf.has-active { color: var(--olive-dark); font-weight: 650; }
.nav-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; flex: none; margin-right: 3px; }
.nav-gruppe-kopf[aria-expanded="true"] .nav-chevron { transform: rotate(-135deg); }
.nav-unterliste[hidden] { display: none; }
.sidebar-foot { gap: 8px; padding-top: 14px; }
.sidebar-foot .btn { min-height: 40px; border-radius: var(--radius-s); font-weight: 560; text-decoration: none; }
.account-mail { font-size: 13px; }

/* -------------------------------------------------- Tabellen */
.table th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: 14px 18px; background: var(--surface-sunk); }
.table td { padding: 16px 18px; vertical-align: middle; }
.table tbody tr:hover:not(.row-skeleton) { background: #FBFAF6; }
.cell-link { text-decoration: none; }
.cell-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cell-title { font-weight: 620; }
.cell-sub { display: block; color: var(--text-faint); font-size: 13px; }

/* ----------------------------------------- Statusanzeigen */
.chip { border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.chip-op-fehler  { background: var(--danger-tint); color: #8A2F22; border-color: #E8C3BB; }
.chip-op-hinweis { background: #FBF1E6; color: #8A4B1E; border-color: #EBCFB0; }
.chip-op-empf    { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); font-weight: 500; }
.chip-op-ok      { background: var(--olive-tint); color: var(--olive-dark); border-color: var(--olive-border); }
.chip-op-dublette { background: #F1EEE7; color: var(--text); border-color: var(--border-strong); }
dd.op-probleme-zelle { display: flex; flex-wrap: wrap; gap: 6px; }
td.op-probleme-zelle .chip { display: inline-block; margin: 2px 6px 2px 0; }
.op-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------- Einträge: Werkzeuge */
.op-werkzeuge { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 18px 20px; }
.op-suchzeile { display: flex; gap: 10px; align-items: center; }
.op-suche { position: relative; display: flex; gap: 10px; flex: 1 1 auto; min-width: 0; }
.op-suche-feld { flex: 1 1 auto; min-width: 0; min-height: 50px; font-size: 16px; padding-left: 18px; border-radius: 999px; background: var(--surface-sunk); }
.op-suche-feld:focus { background: var(--surface); }
.op-suchen { min-height: 50px; padding-inline: 26px; }
.op-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.op-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-select { width: 100%; min-height: 44px; text-overflow: ellipsis; }
.op-aktive { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.op-chipliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.op-filterchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--olive-tint); border: 1px solid var(--olive-border); color: var(--olive-dark); font-size: 13.5px; font-weight: 600; }
.op-chip-weg { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--olive-dark); font-size: 18px; line-height: 1; cursor: pointer; }
.op-chip-weg:hover { background: rgba(78,92,51,.14); }
.op-zurueck { flex: none; }
.op-filterknopf { display: none; min-height: 50px; gap: 8px; }
.op-filteranzahl { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--olive-dark); color: #fff; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }
.op-zaehler-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.op-treffer { font-weight: 650; font-size: 15px; }
.op-bestand { color: var(--text-muted); font-size: 13.5px; }
.op-liste-panel { overflow: hidden; }

/* Filterblatt (mobil) */
.op-blatt-schicht { position: fixed; inset: 0; z-index: 80; background: rgba(29,27,23,.45); display: flex; align-items: flex-end; justify-content: center; }
.op-blatt { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-2); padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.op-blatt-kopf { display: flex; align-items: center; justify-content: space-between; }
.op-blatt-titel { font-size: 20px; font-weight: 700; }
.op-blatt-felder { display: flex; flex-direction: column; gap: 14px; }
.op-blatt-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.op-blatt-aktionen .btn { min-height: var(--ziel); }

/* ------------------------------- Detail, Probleme, Anlage (aus m7.3a47) */
.op-abschnitt { padding: 24px; }
.op-problem { border-radius: 14px; padding: 16px 18px; }
.chip-op-pflicht { background: #F1EEE7; }

/* ------------------------------------------------ Statistik */
.stat-seite { display: flex; flex-direction: column; gap: 22px; }
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat-kachel { display: flex; flex-direction: column; gap: 2px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; }
.stat-kachel.is-link:hover { border-color: var(--olive-border); box-shadow: var(--shadow-2); }
.stat-zahl { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.stat-text { font-weight: 600; }
.stat-hinweis { color: var(--text-faint); font-size: 13px; }
.stat-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.stat-block { padding: 22px; }
.stat-balken { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stat-balken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.stat-balken-text { font-weight: 560; }
.stat-balken-wert { color: var(--text-muted); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.stat-balken-spur { grid-column: 1 / -1; order: 3; height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.stat-balken-fuell { display: block; height: 100%; border-radius: 999px; background: var(--olive); min-width: 2px; }

/* ----------------------------------- Konto: Passwort ändern */
.konto-rahmen { min-height: 100dvh; display: flex; flex-direction: column; }
.konto-kopf { display: flex; align-items: center; gap: 14px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.konto-mail { margin-left: auto; color: var(--text-muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.konto-haupt { flex: 1 1 auto; display: flex; justify-content: center; padding: 40px 20px 64px; }
.konto-inhalt { width: 100%; max-width: 560px; }
.pw-karte { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.pw-info { color: var(--text-muted); }
.pw-form { display: flex; flex-direction: column; gap: 18px; }
.pw-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.pw-erfolg { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pw-erfolg-titel { font-size: 20px; font-weight: 700; }
.pw-meldung:empty { display: none; }

/* --------------------------------------------- Mobil ≤ 900 px */
@media (max-width: 900px) {
  .outlet { padding: 22px 16px 48px; }
  .page-title { font-size: 24px; }
  .topbar { padding: 8px 14px; min-height: 56px; }
  .nav-toggle { width: var(--ziel); height: var(--ziel); border-radius: var(--radius-s); }
  .sidebar { top: 56px; width: min(86vw, 340px); background: var(--surface); }
  .btn, .input, .select, .nav-link, .nav-gruppe-kopf, .sidebar-foot .btn { min-height: var(--ziel); }
  .nav-unterlink { min-height: var(--ziel); }
  .op-werkzeuge { padding: 14px; border-radius: 14px; }
  .op-filter { display: none; }
  .op-filterknopf { display: inline-flex; }
  .op-suchen { display: none; }
  .op-suche-feld { min-height: var(--ziel); font-size: 16px; }
  .op-filterknopf { min-height: var(--ziel); }
  .op-aktive { flex-direction: column; align-items: flex-start; }
  .op-chip-weg { width: var(--ziel); height: var(--ziel); margin: -8px -4px -8px 0; }
  .op-zurueck { align-self: stretch; }
  .adminliste > .table-wrap { display: none; }
  .adminliste > .kartenliste { display: flex; padding: 12px; gap: 12px; }
  .karte { border-radius: 14px; padding: 16px; }
  .op-karte-oeffnen { width: 100%; min-height: var(--ziel); }
  .karte-fuss { margin-top: 4px; }
  .pager-knoepfe .btn { min-height: var(--ziel); }
  .pw-karte { padding: 20px; }
  .pw-aktionen .btn { flex: 1 1 100%; min-height: var(--ziel); }
  .konto-kopf { padding: 10px 14px; }
  .konto-haupt { padding: 24px 14px 48px; }
  .stat-zahl { font-size: 30px; }
  .op-abschnitt { padding: 16px; }
}
@media (pointer: coarse) {
  .btn, .input, .select, .nav-link, .nav-gruppe-kopf { min-height: var(--ziel); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-chevron { transition: none; }
}

/* Inhalt mittig in der verfügbaren Breite (Desktop) */
@media (min-width: 901px) { .outlet { margin-inline: auto; } }
a.btn { text-decoration: none; }
@media (max-width: 900px) { .sidebar-head { display: none; } .sidebar { padding-top: 12px; } }
td.op-probleme-zelle { display: table-cell; }
@media (max-width: 900px) { .op-zurueck:disabled { display: none; } }
@media (max-width: 900px) { .op-aktive:has(.op-chipliste:empty):has(.op-zurueck:disabled) { display: none; } }

/* ------------------------------------------------------------ Operator-Karte (m7.3a49) */
.op-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.ka-seite { gap: 18px; }
.ka-bereich { position: relative; }
.ka-karte { height: clamp(420px, 64vh, 760px); width: 100%; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-sunk); box-shadow: var(--shadow-1); }
.ka-karte-hinweis:empty { display: none; }
.ka-detail { position: absolute; z-index: 5; top: 14px; left: 14px; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ka-detail:focus { outline: 2px solid var(--olive-dark); outline-offset: 2px; }
.ka-bereich > .ka-detail:not([hidden]) { display: flex; }
.ka-detail-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ka-detail-titel { font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ka-detail-zu { flex: none; min-height: 36px; padding: 4px 12px; }
.ka-detail-sub { color: var(--text-muted); margin: 0; }
.ka-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ka-probleme-titel { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.ka-probleme-liste { margin: 8px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 13.5px; }
.ka-detail-link { align-self: flex-start; }
.chip-lage-privat { background: transparent; color: var(--text); border: 1px dashed var(--text-muted); }
.ka-auswahl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ka-auswahl-knopf { width: 100%; justify-content: flex-start; text-align: left; flex-direction: column; align-items: flex-start; gap: 2px; border-radius: 12px; white-space: normal; }
.ka-auswahl-name { font-weight: 650; }

/* Marker: echte Schaltflächen */
.ka-marker { border: 0; padding: 0; cursor: pointer; font: inherit; }
.ka-marker::after { content: ''; position: absolute; inset: -9px; }                 /* größere Trefferfläche */
.ka-punkt { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(29,27,23,.45); background: var(--olive); color: var(--olive); }
.ka-punkt.art-unterkunft { background: var(--olive); color: var(--olive); }
.ka-punkt.art-restaurant { background: var(--terracotta); color: var(--terracotta); }
.ka-punkt.art-erzeuger   { background: #8A6A2F; color: #8A6A2F; }
.ka-punkt.art-sonstige   { background: #6B645B; color: #6B645B; }
.ka-punkt.ist-privat { background: #fff; border: 3px dashed currentColor; box-shadow: 0 1px 4px rgba(29,27,23,.35); }   /* Lage nicht öffentlich */
.ka-punkt.ist-gewaehlt { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(29,27,23,.85), 0 2px 8px rgba(29,27,23,.5); z-index: 3; }
.ka-cluster { min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: var(--olive-dark); color: #fff; font-weight: 700; font-size: 14px; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(29,27,23,.45); }
.ka-marker:focus-visible { outline: 3px solid #1D1B17; outline-offset: 3px; border-radius: 50%; }

/* Listen */
.ka-listen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ka-liste { padding: 20px; }
.ka-liste-eintraege { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.ka-liste-eintraege li + li { border-top: 1px solid var(--border); }
.ka-liste-knopf { display: flex; flex-direction: column; gap: 1px; width: 100%; min-height: 44px; padding: 10px 6px; text-align: left; background: transparent; border: 0; border-radius: 10px; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.ka-liste-knopf:hover { background: var(--surface-sunk); }

@media (max-width: 900px) {
  .ka-karte { height: 60vh; min-height: 360px; border-radius: 14px; }
  /* Mobil liegt die kompakte Detailkarte UNTER der Karte (nicht darueber), damit die Quellenangabe der Karte sichtbar bleibt. */
  .ka-detail { position: static; width: auto; max-height: none; margin-top: 10px; border-radius: 16px; padding: 14px 16px; }
  .ka-listen { grid-template-columns: minmax(0, 1fr); }
  .ka-detail-zu, .ka-auswahl-knopf { min-height: var(--ziel); }
  .ka-detail-link { width: 100%; min-height: var(--ziel); }
  .ka-liste-eintraege { max-height: 320px; }
}

/* Quellenangaben der Karte: ausgeschrieben, lesbar, mobil umbrechend */
.ka-karte .maplibregl-ctrl-attrib { font-size: 12px; line-height: 1.35; color: var(--text); background: rgba(255,255,255,.92); max-width: min(calc(100% - 8px), 640px); }
.ka-karte .maplibregl-ctrl-attrib a { color: var(--olive-dark); text-decoration: underline; }
.ka-karte .maplibregl-ctrl-attrib-inner { white-space: normal; }

/* Standort-Bauteil (m7.3a51): Karte, Marker, Zahlenfelder, Lage-Einstellung */
.so-editor { display: flex; flex-direction: column; gap: 12px; }
.so-karte { height: 320px; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; background: #f1f0eb; }
.so-karte .maplibregl-ctrl-attrib { font-size: 12px; line-height: 1.35; color: var(--text); background: rgba(255,255,255,.92); max-width: min(calc(100% - 8px), 640px); }
.so-karte .maplibregl-ctrl-attrib a { color: var(--olive-dark); text-decoration: underline; }
.so-karte .maplibregl-ctrl-attrib-inner { white-space: normal; }
.so-karten-hinweis:empty { display: none; }
.so-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.so-hinweise:empty { display: none; }
.so-hinweise { display: flex; flex-direction: column; gap: 8px; }
.so-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.so-aktionen .btn { min-height: 44px; }
.so-marker { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: var(--olive-dark); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: grab; }
.so-marker:focus-visible { outline: 3px solid var(--olive-dark); outline-offset: 3px; }
.so-lage { display: flex; flex-direction: column; gap: 10px; }
.so-lage-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; min-height: 44px; }
.so-lage-option:has(.so-radio:checked) { border-color: var(--olive-dark); background: var(--surface-sunk, #f4f3ee); }
.so-radio { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.so-lage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 640px) {
  .so-karte { height: 260px; }
  .so-zahlen { grid-template-columns: minmax(0, 1fr); }
}
.so-editor [hidden] { display: none !important; }

/* ------------------------------------------------ Portalfilter und Tarif (m7.3a53) */
/* Filterreihen: brechen bei Platzmangel sauber um (keine schmalen oder abgeschnittenen Felder). */
.op-filter { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.op-filter[hidden] { display: none; }
.op-filter-pt { padding-top: 14px; border-top: 1px solid var(--border); }
.op-hinweise:empty { display: none; }
.op-hinweis-liste { display: flex; flex-direction: column; gap: 8px; }

/* Tarifklassen: Farbe nie allein (Text, Symbol, Legende). Farben mit weißem Text/Rand mindestens 4,5 : 1. */
:root { --pt-basis: #6E6E68; --pt-digital: #2F6DB5; --pt-network: #66762B; --pt-pro: #7C4BA6; --pt-gemischt: #3F3B35; --pt-neutral-rand: #B8651B; --pt-neutral-fuell: #F3EEE6; --pt-neutral-text: #7A3F0E; }
.pt-basis { --pt: var(--pt-basis); }
.pt-digital { --pt: var(--pt-digital); }
.pt-network { --pt: var(--pt-network); }
.pt-pro { --pt: var(--pt-pro); }
.pt-kein { --pt: var(--pt-basis); }
.pt-unbekannt, .pt-mehrere, .pt-abgelaufen { --pt: var(--pt-neutral-rand); }

.pt-punkt { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(29,27,23,.35); background: var(--pt, #cfc9bd); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.pt-punkt.pt-kein { background: #fff; border-color: var(--pt); box-shadow: none; }
.pt-punkt.pt-unbekannt, .pt-punkt.pt-mehrere, .pt-punkt.pt-abgelaufen { background: var(--pt-neutral-fuell); border-color: var(--pt); color: var(--pt-neutral-text); box-shadow: none; }

.pt-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.pt-badge-text { overflow-wrap: anywhere; }
.pt-zelle { min-width: 170px; }
.pt-hinweise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pt-hinweise:empty { display: none; }
.pt-zusatz { margin: 4px 0 0; }

/* Portale in Zeile und Detailkarte */
.pt-portale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-portal { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pt-portal-name { font-size: 13.5px; font-weight: 600; }
.pt-chip-veroeffentlicht { background: var(--olive-tint); color: var(--olive-dark); border-color: var(--olive-border); }
.pt-chip-nicht_veroeffentlicht { background: #FBF1E6; color: #8A4B1E; border-color: #EBCFB0; }
.pt-chip-ohne { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); font-weight: 500; }
.pt-chip-unklar { background: var(--danger-tint); color: #8A2F22; border-color: #E8C3BB; }
.pt-grund { font-size: 12.5px; }

/* Detailkarte: Vertrag und Abdeckung getrennt, Abweichung ausdrücklich */
.ka-tarif, .ka-portale { display: flex; flex-direction: column; gap: 6px; }
.pt-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 4px 0 0; font-size: 13.5px; }
.pt-dl dt { color: var(--text-muted); font-weight: 600; }
.pt-dl dd { margin: 0; overflow-wrap: anywhere; }
.pt-abweichung { border: 1px solid #E8C3BB; background: var(--danger-tint); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.pt-abweichung-titel { margin: 0 0 4px; font-weight: 700; color: #8A2F22; }
.pt-abweichung ul { margin: 0; padding-left: 18px; }

/* Umschalter "Farbe nach" und Legende */
.pt-farbzeile:empty, .pt-legende-box:empty { display: none; }
.pt-umschalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-umschalt { min-height: 40px; padding: 6px 16px; }
.pt-umschalt.ist-aktiv { background: var(--olive-tint); border-color: var(--olive); color: var(--olive-dark); }
.pt-legende { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pt-legende-titel { margin: 0; font-weight: 700; font-size: 14px; }
.pt-legende-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 18px; }
.pt-legende-eintrag { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pt-legende-eintrag.ist-leer .pt-legende-text, .pt-legende-eintrag.ist-leer .pt-legende-zahl { color: var(--text-faint); }
.pt-legende-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pt-legende-zahl { font-variant-numeric: tabular-nums; font-weight: 650; }
.pt-cluster-beispiel { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--pt-gemischt); color: #fff; font-size: 11px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(29,27,23,.35); }

/* Marker im Tarifmodus */
.ka-punkt { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; }
.ka-punkt.pt-basis, .ka-punkt.pt-digital, .ka-punkt.pt-network, .ka-punkt.pt-pro { background: var(--pt); color: var(--pt); }
.ka-punkt.pt-kein { background: #fff; color: var(--pt); border: 3px solid var(--pt); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(29,27,23,.4); }
.ka-punkt.pt-unbekannt, .ka-punkt.pt-mehrere, .ka-punkt.pt-abgelaufen { background: var(--pt-neutral-fuell); color: var(--pt-neutral-text); border: 3px solid var(--pt); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(29,27,23,.4); }
.ka-punkt[class*='pt-'].ist-privat { background: #fff; border: 3px dashed var(--pt); }
.ka-punkt.pt-basis.ist-privat, .ka-punkt.pt-digital.ist-privat, .ka-punkt.pt-network.ist-privat, .ka-punkt.pt-pro.ist-privat { color: var(--pt); }
.ka-cluster.pt-cluster-basis { background: var(--pt-basis); }
.ka-cluster.pt-cluster-digital { background: var(--pt-digital); }
.ka-cluster.pt-cluster-network { background: var(--pt-network); }
.ka-cluster.pt-cluster-pro { background: var(--pt-pro); }
.ka-cluster.pt-cluster-kein { background: #fff; color: var(--pt-gemischt); border-color: var(--pt-basis); }
.ka-cluster.pt-cluster-unbekannt, .ka-cluster.pt-cluster-mehrere, .ka-cluster.pt-cluster-abgelaufen { background: var(--pt-neutral-fuell); color: var(--pt-neutral-text); border-color: var(--pt-neutral-rand); }
.ka-cluster.pt-cluster-gemischt { background: var(--pt-gemischt); color: #fff; }

@media (max-width: 900px) {
  .pt-umschalt { min-height: var(--ziel); }
  .pt-zelle { min-width: 0; }
  .pt-legende { padding: 14px; }
}

.table .cell-name { min-width: 170px; }
.pt-zelle { min-width: 190px; }

/* Operator-Zentrale m7.3a54: nachgeordnete Aktion (Archivieren), Meldungszeile, Agenturliste */
.op-meldung-zeile:empty { display: none; }
.op-aktion-nachgeordnet { margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.op-archiv-knopf { color: #8A2F22; border-color: #E8C3BB; }
.op-archiv-knopf:hover:not(:disabled) { background: var(--danger-tint); }
.op-liste-eng { margin: 2px 0 6px; padding-left: 18px; font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 900px) { .op-archiv-knopf { width: 100%; min-height: var(--ziel); } .op-aktion-nachgeordnet > div:last-child { width: 100%; } }

/* m7.3a56: Geografische Angaben im Eintragsdetail (Angebotsgebiet getrennt von Geografischer Zuordnung) */
.op-gebiet-wert p { margin: 0; }
.op-gebiet-wert p + p { margin-top: 4px; }
.op-gebiet-haupt { font-weight: 600; overflow-wrap: anywhere; }
.op-gebiet-fehlt { font-weight: 650; color: var(--terracotta); }
.op-gebiet-neben { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
#op-gebiete .op-hinweis { margin: 12px 0 0; }
.op-gebiet-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) {
  .op-gebiet-aktionen .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}