/* Kunde aus Signatur (Runde 2f): Pop-up in drei Schritten, Einstiege in Kundenlisten, Kundenprofil, Postfach und Archiv.
   Präfix .sg-, Farben nur über die Token von styles.css (iPersonal und MediPersonal gleich, kein Rot als Signalfarbe).
   Ab 900 px zwei Spalten (Erkannt, Abgleich), darunter eine. Bis 640 px Pop-up bildschirmfüllend, Knöpfe volle Breite. */

.sg { min-width: 0; }
.sg-titel { display: flex; align-items: center; gap: 9px; margin-bottom: 4px !important; }
.sg-titel svg.i { width: 20px; height: 20px; color: var(--muted-2); flex: none; }
.sg-unter { margin: 0 0 12px; font-size: 13px; }
.sg-text-label { margin: 10px 0 6px; font-size: 13px; color: var(--muted); display: block; }
#sg-text { width: 100%; min-height: 210px; resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }
.sg-zeile1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-top: 8px; flex-wrap: wrap; }
.sg-zaehler { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }

/* Hinweise: warn wie .notice, info neutral */
.sg-hinweise { display: grid; gap: 6px; margin-top: 4px; }
.sg-hinweise:empty { display: none; }
.sg-hinweise .notice, .sg-hinweis { margin: 0; }
.sg-infos { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0; }

/* Ergebnis: zwei Spalten */
.sg-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; margin-top: 14px; }
.sg-spalte { min-width: 0; }
.sg-spalte h3 { display: flex; align-items: center; gap: 10px; min-height: 30px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.sg-neu-pruefen { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sg-gruppe { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 2px; margin-bottom: 10px; background: var(--flaeche-2); }
.sg-gtitel { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sg-gtitel svg.i { width: 15px; height: 15px; color: var(--muted-2); }
.sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 10px; }
.sg-grid label { font-size: 12.5px; min-width: 0; }
.sg-grid .sg-breit { grid-column: 1 / -1; }
.sg-grid input, .sg-grid select { width: 100%; min-width: 0; padding: 6px 10px; }
/* Firmenblock: bei sicherem Treffer eingeklappt („Firmenangaben ändern“) */
.sg-fgruppe > summary { list-style: none; cursor: pointer; border-radius: 8px; }
.sg-fgruppe > summary::-webkit-details-marker { display: none; }
.sg-fgruppe > summary:focus-visible { outline: 2px solid var(--ak-ln); outline-offset: 2px; }
.sg-fgruppe:not([open]) { padding-bottom: 2px; }
.sg-aendern { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.sg-fgruppe > summary:hover .sg-aendern { text-decoration-color: currentColor; }
.sg-fgruppe[open] .sg-aendern { display: none; }

/* Abgleich */
#sg-abgleich { display: grid; gap: 10px; }
#sg-abgleich[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
#sg-abgleich .notice { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sg-box { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--neu-ln); border-radius: 12px; background: var(--neu-bg); }
.sg-box.sg-ok { border-color: var(--ok-ln); background: var(--ok-bg); }
.sg-box-titel { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sg-box-titel svg.i { width: 17px; height: 17px; flex: none; }
.sg-ok .sg-box-titel { color: var(--ok-tx); }
.sg-firma { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.sg-firma-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 180px; }
.sg-firma-text b, .sg-wahl-text b, .sg-li-text b { overflow-wrap: anywhere; }
.sg-marken { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.sg-marken .tag.small { margin-left: 0; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sg-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 !important; max-width: 100%; overflow-wrap: anywhere; }
.sg-chip svg.i { width: 11px; height: 11px; }
.sg-chip-neutral { background: var(--flaeche-2); color: var(--muted); border-color: var(--line); }
.sg-standort { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.sg-standort svg.i { width: 14px; height: 14px; flex: none; }
.sg-details { display: grid; gap: 6px; }
.sg-details .check-line { margin: 2px 0; align-items: flex-start; }
.sg-details .check-line input { margin-top: 2px; flex: none; }
.sg-details .notice { margin: 0; }
.sg-person { display: flex; align-items: flex-start; gap: 8px; margin: 0; line-height: 1.45; }
.sg-person svg.i { width: 16px; height: 16px; margin-top: 2px; color: var(--muted-2); flex: none; }
.sg-abw { display: grid; gap: 2px; padding-left: 24px; }
.sg-abw-zeile span { overflow-wrap: anywhere; }
.sg-p { margin: 0; }
.sg-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-knoepfe.sg-klein { margin-top: -2px; }
.sg-link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.sg-link:hover { color: var(--text); }

/* Mehrere Standorte bzw. sichere Treffer */
.sg-auswahl { margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; display: grid; gap: 6px; min-width: 0; }
.sg-auswahl legend { padding: 0 6px; font-weight: 700; font-size: 13px; color: var(--text); }
.sg-wahl { flex-direction: row !important; align-items: center; gap: 9px !important; padding: 7px 8px; border-radius: 10px; color: var(--text) !important; cursor: pointer; flex-wrap: wrap; }
.sg-wahl:hover { background: var(--hover); }
.sg-wahl input { flex: none; }
.sg-wahl-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }

/* Nur ähnliche Treffer */
.sg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sg-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--flaeche); flex-wrap: wrap; }
.sg-li-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 180px; }

/* Schritt 3: neue Firma */
.sg-leiste { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 6px 0 4px; padding: 9px 12px; border: 1px solid var(--neu-ln);
  border-radius: 10px; background: var(--neu-bg); font-size: 13px; }
.sg-hr { margin: 6px 0 0; }
.sg-hr:empty { display: none; }
.sg-hr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.sg-hr-wahl { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; text-align: left; font: inherit; color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sg-hr-wahl:hover { border-color: var(--line-3); }
.sg-hr-ok { display: flex; align-items: center; gap: 6px; color: var(--ok-tx); }
.sg-hr-ok svg.i { width: 14px; height: 14px; }

/* Eigene Signatur oder Agentur: nur „Andere Signatur einfügen“ */
.sg-gesperrt { border-color: var(--line-strong); background: var(--flaeche-2); }
.sg-gesperrt .sg-box-titel { color: var(--muted); }

/* Pflichtfeld Branche in Schritt 3, Hinweise im Pop-up oben statt über den Knöpfen */
.sg .chips-in[aria-invalid="true"] { border-color: var(--warn-ln); box-shadow: 0 0 0 1px var(--warn-ln); }
body:has(#modal:not(.hidden) .sg-fenster) .toast { bottom: auto; top: 22px; }
/* Pop-up „Firma erfassen“ (Formular #new-company): Hinweise ebenfalls oben, sonst lägen sie über den Knöpfen (Schluss-Korrektur 2f) */
body:has(#modal:not(.hidden) #new-company) .toast { bottom: auto; top: 22px; }

/* Einstiege */
.sg-erfassen-hinweis { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -6px 0 6px; color: var(--muted); }
.ku-hinweis + .sg-profil-knopf { margin-left: 8px; }

@media (max-width: 899px) {
  .sg-raster { grid-template-columns: minmax(0, 1fr); }
  .sg-abgleich { order: -1; } /* eine Spalte: zuerst das Ergebnis mit den Knöpfen, darunter die Felder zum Korrigieren */
}
@media (max-width: 640px) {
  .modal:has(.sg-fenster) { padding: 0; place-items: start stretch; overflow: auto; }
  .modal-box.sg-fenster { width: 100%; min-height: 100vh; max-height: none; overflow: visible; border-radius: 0; padding: 16px; }
  .sg .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .sg .modal-actions .btn, .sg-knoepfe .btn { width: 100%; }
  .sg-grid { grid-template-columns: minmax(0, 1fr); }
  #sg-text { min-height: 180px; }
  .sg-zaehler { margin-left: 0; }
}