/* ========================================
   180 Grad Kälte Klima & Energiesysteme
   Haupt-Stylesheet
   ======================================== */

:root {
  /* Firmenfarben (Dashboard 2.0) */
  --farbe-akzent:       #00A886;   /* Türkis RAL 6032 */
  --farbe-dunkel:       #383E42;   /* Anthrazit RAL 7016 */
  --farbe-akzent-hell:  #e0f5f0;
  --farbe-akzent-hover: #009b7b;
  --farbe-dunkel-mid:   #5a6168;
  --farbe-dunkel-hell:  #8c9198;
  --farbe-bg:           #f4f5f6;
  --farbe-karte:        #ffffff;
  --farbe-border:       #d1d5da;
  --farbe-text:         #1e2326;
  --farbe-text-schwach: #6b7580;
  --farbe-fehler:       #c0392b;
  --farbe-warn:         #d68910;

  /* Rückwärtskompatibilität für bestehende App-Module */
  --grau:        #383E42;
  --grau-hell:   #5a6168;
  --grau-light:  #eef0f2;
  --gruen:       #00A886;
  --gruen-dark:  #009b7b;
  --bg:          #f4f5f6;
  --white:       #ffffff;
  --border:      #d1d5da;
  --text:        #1e2326;
  --text-muted:  #6b7580;
  --danger:      #c0392b;
  --warning:     #d68910;
  --success:     #00A886;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--farbe-bg);
  color: var(--farbe-text);
  min-height: 100vh;
}

/* ========================================
   LOGIN
   ======================================== */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.login-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 2.5rem;
  width: 380px;
  box-shadow: 0 4px 32px rgba(56,62,66,.10);
  border-top: 3px solid var(--farbe-akzent);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo img {
  width: 180px;
  height: auto;
}

.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  color: var(--text);
  transition: border 0.2s;
}

.form-group input:focus { border-color: var(--gruen); }

.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--grau);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover { background: var(--gruen-dark); }

/* ========================================
   HÜLLE UND NAVIGATION (Scheibe „Navigation", 14.09.2026)
   Nach dem Zielbild der Übersicht: links die Leiste – Marke, Schnellnotiz, die
   Einträge in Gruppen mit Luft, unten Nutzer, Passwort, Abmelden; die offene
   Seite trägt die Signalkante. Unter 80em steht die Leiste über der Seite
   (Einträge in einer umbrechenden Zeile, Kante unten), unter 40em nur eine
   Kopfzeile mit Menü. Die Einträge zeichnet public/js/baustein_navigation.js.
   Nur Festwerte.
   ======================================== */
.huelle {
  display: grid;
  grid-template-columns: 11.875rem minmax(0, 1fr);
  min-height: 100vh;
}
.huelle-haupt { min-width: 0; }
.huelle-nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--raum-5) var(--raum-3) var(--raum-4) var(--raum-5);
  border-right: var(--rand-staerke) solid var(--linie);
  background: transparent;
}
.huelle-marke {
  display: block; color: var(--tinte); text-decoration: none;
  font-size: var(--text-m); font-weight: var(--gewicht-fett); line-height: 1.25;
}
.huelle-marke small {
  display: block; margin-top: var(--raum-1);
  font-size: var(--text-xs); font-weight: var(--gewicht-normal); color: var(--tinte-3);
}
.huelle-notiz, .huelle-menue {
  margin-top: var(--raum-3); padding: var(--raum-1) var(--raum-3);
  border: var(--rand-staerke) solid var(--linie-2); border-radius: var(--radius-knopf);
  background: transparent; color: var(--tinte); font-size: var(--text-s); cursor: pointer;
}
.huelle-notiz:hover, .huelle-menue:hover { border-color: var(--tinte-3); }
.huelle-menue { display: none; }
.huelle-klappe {
  flex: 1; align-self: stretch; min-height: 0;
  display: flex; flex-direction: column; gap: var(--raum-5);
  margin-top: var(--raum-5);
}
.huelle-liste { display: flex; flex-direction: column; gap: var(--raum-3); }
.nav-gruppe { display: flex; flex-direction: column; }
.nav-link {
  display: block;
  padding: calc(1.5 * var(--raum-1)) 0 calc(1.5 * var(--raum-1)) var(--raum-3);
  border-left: calc(2 * var(--rand-staerke)) solid transparent;
  color: var(--tinte-2); font-size: var(--text-m); line-height: 1.35; text-decoration: none;
}
.nav-link:hover { color: var(--tinte); }
.nav-link[aria-current="page"] { color: var(--tinte); font-weight: var(--gewicht-halb); border-left-color: var(--signal); }
/* „Erprobung" (nur Stage): in der Spalte eine kleine Zeile unter dem Namen – so
   bricht kein Name um und nichts wird am Rand der Leiste abgeschnitten. */
.nav-etikett { display: block; font-size: var(--text-xs); line-height: 1.2; color: var(--signal); }
.huelle-fuss {
  margin-top: auto; padding-top: var(--raum-3);
  border-top: var(--rand-staerke) solid var(--linie);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--raum-1);
  font-size: var(--text-xs); color: var(--tinte-3);
}
.huelle-nutzer { color: var(--tinte-2); }
.huelle-fuss-knopf {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--tinte-3);
}
.huelle-fuss-knopf:hover { color: var(--tinte); }

/* Unter 80em (Zielbild: unter 1180 px): die Leiste über der Seite. */
@media (max-width: 80em) {
  /* Die Leiste behält ihre Höhe, auch wenn die Seite kurz ist – den Rest bekommt die Seite. */
  .huelle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .huelle-nav {
    position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-4);
    padding: var(--raum-4) var(--raum-5);
    border-right: 0; border-bottom: var(--rand-staerke) solid var(--linie);
  }
  .huelle-marke { margin-right: auto; }
  .huelle-notiz, .huelle-menue { margin-top: 0; }
  .huelle-klappe {
    flex-basis: 100%; margin-top: 0;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-5);
  }
  .huelle-liste { flex-direction: row; flex-wrap: wrap; gap: var(--raum-1); }
  .nav-gruppe { display: contents; }
  .nav-link {
    padding: var(--raum-1) var(--raum-2);
    border-left: 0; border-bottom: calc(2 * var(--rand-staerke)) solid transparent;
  }
  .nav-link[aria-current="page"] { border-bottom-color: var(--signal); }
  .nav-etikett { display: inline; margin-left: var(--raum-1); }
  .huelle-fuss {
    margin-top: 0; margin-left: auto; padding-top: 0; border-top: 0;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--raum-3);
  }
}
/* Unter 40em (Handy): nur die Kopfzeile – Marke, Schnellnotiz, Menü. Der Knopf
   klappt Einträge und Nutzerzeile auf (Klasse „offen", baustein_navigation.js). */
@media (max-width: 40em) {
  .huelle-nav { padding: var(--raum-2) var(--raum-4); gap: var(--raum-2); }
  .huelle-marke small { display: none; }
  .huelle-notiz, .huelle-menue { display: inline-flex; align-items: center; min-height: var(--ziel-min); }
  .huelle-klappe { display: none; }
  .huelle-nav.offen .huelle-klappe {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--raum-4);
    padding-block: var(--raum-2);
  }
  .huelle-nav.offen .huelle-liste { flex-direction: column; gap: var(--raum-3); }
  .huelle-nav.offen .nav-gruppe { display: flex; flex-direction: column; }
  .huelle-nav.offen .nav-link {
    display: flex; align-items: center; min-height: var(--ziel-min);
    padding: 0 0 0 var(--raum-3);
    border-bottom: 0; border-left: calc(2 * var(--rand-staerke)) solid transparent;
  }
  .huelle-nav.offen .nav-link[aria-current="page"] { border-left-color: var(--signal); }
  .huelle-nav.offen .huelle-fuss {
    margin-left: 0; padding-top: var(--raum-3); border-top: var(--rand-staerke) solid var(--linie);
    flex-direction: column; align-items: flex-start; gap: var(--raum-2);
  }
  .huelle-nav.offen .huelle-fuss-knopf { min-height: var(--ziel-min); }
  .tab-inhalt { padding: var(--raum-4) var(--raum-4) var(--raum-6); }
}

/* ========================================
   HAUPT-LAYOUT
   ======================================== */
.main-content {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* ========================================
   STATS KARTEN
   ======================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 1.1rem 1.25rem;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--grau);
}

.stat-value.accent { color: var(--gruen-dark); }

.stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ========================================
   APP KARTEN (Dashboard)
   ======================================== */
.section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 1rem;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.app-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: block;
}

.app-card:hover {
  border-color: var(--gruen);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46,207,168,0.1);
}

.app-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 1rem;
}

.app-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.app-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.app-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
}

.badge-gruen  { background: #e8f9f5; color: var(--gruen-dark); }
.badge-grau   { background: var(--grau-light); color: var(--grau-hell); }
.badge-orange { background: #fff4e6; color: #d4720a; }
.badge-rot    { background: #fdecea; color: var(--danger); }

/* ========================================
   ALLGEMEINE BUTTONS
   ======================================== */
.btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-gruen {
  background: var(--gruen);
  color: #fff;
}

.btn-gruen:hover { background: var(--gruen-dark); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-outline:hover { background: var(--grau-light); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}

/* ========================================
   TABELLEN
   ======================================== */
.table-container {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead {
  background: var(--bg);
}

th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfc; }

/* ========================================
   FORMULARE
   ======================================== */
.form-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.form-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  color: var(--text);
  background: var(--white);
  transition: border 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gruen);
}

.form-field textarea {
  resize: vertical;
  min-height: 80px;
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-ok      { background: #e8f9f5; color: var(--gruen-dark); }
.status-offen   { background: #fff4e6; color: #d4720a; }
.status-mangel  { background: #fdecea; color: var(--danger); }

/* ========================================
   BACK BUTTON
   ======================================== */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 1.5rem;
  background: none;
  border: none;
  padding: 0;
}

.back-btn:hover { color: var(--text); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 600px) {
  .main-content { padding: 1rem; }
  .login-card { width: 95%; padding: 1.5rem; }
  .apps-grid { grid-template-columns: 1fr 1fr; }
}

/* ========================================
   LOGIN — Ergaenzungen
   ======================================== */
.login-card {
  max-width: 400px;
  width: 95%;
}

.login-fehler {
  display: none;
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-radius: 7px;
  padding: .6rem .9rem;
  font-size: 13px;
  color: var(--farbe-fehler);
  margin-bottom: .75rem;
}

.login-adresse {
  font-size: 11px;
  color: var(--farbe-dunkel-hell);
  text-align: center;
  margin-top: 1.5rem;
  line-height: 1.7;
  letter-spacing: .01em;
}

.form-group select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--farbe-border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  color: var(--farbe-text);
  background: var(--farbe-karte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23383E42' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border .2s;
  font-family: inherit;
}

.form-group select:focus { border-color: var(--farbe-akzent); outline: none; }

/* ========================================
   SEITEN DER HÜLLE (dashboard.js)
   ======================================== */
#dashboard-view {
  display: none;
}

/* Übersicht, Berichte und Mitarbeiter regeln ihre Breite selbst (.ue-seite) –
   hier nur der Abstand zur Leiste und zum Rand (Zielbild). */
.tab-inhalt { padding: var(--raum-5) var(--raum-6) var(--raum-7); }

/* ========================================
   GRUSS-ZEILE
   ======================================== */
.gruss-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--farbe-border);
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.gruss-text {
  font-size: 18px;
  color: var(--farbe-dunkel);
  font-weight: 400;
  line-height: 1.3;
}

.gruss-text strong {
  font-weight: 700;
  color: var(--farbe-akzent);
}

.gruss-datum {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--farbe-dunkel-mid);
  letter-spacing: .03em;
  background: var(--farbe-bg);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--farbe-border);
}

/* ========================================
   DASHBOARD-SEKTIONEN
   ======================================== */
.sektion-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--farbe-dunkel-mid);
  margin-bottom: 10px;
}

.dash-sektion {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

/* ========================================
   APP-EINTRAGS-LISTE (ersetzt Kacheln)
   ======================================== */
.app-liste {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-border);
  border-radius: 8px;
  overflow: hidden;
}

.app-eintrag {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--farbe-border);
  cursor: pointer;
  transition: background .12s;
  gap: 12px;
  text-decoration: none;
}

.app-eintrag:last-child  { border-bottom: none; }

.app-eintrag:hover {
  background: var(--farbe-akzent-hell);
}

.app-eintrag:hover .app-eintrag-pfeil {
  opacity: 1;
  transform: translateX(3px);
}

.app-eintrag.app-eintrag-mehr:hover { background: var(--farbe-bg); }

.app-eintrag-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-eintrag-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--farbe-dunkel);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.app-eintrag-desc {
  font-size: 12px;
  color: var(--farbe-text-schwach);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-eintrag-pfeil {
  color: var(--farbe-akzent);
  font-size: 15px;
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .12s, transform .12s;
}

/* ========================================
   BUTTONS (Dashboard)
   ======================================== */
.btn-akzent {
  background: var(--farbe-akzent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  font-family: inherit;
}

.btn-akzent:hover { background: var(--farbe-akzent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--farbe-dunkel);
  border: 1px solid var(--farbe-border);
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  font-family: inherit;
}

.btn-ghost:hover { background: var(--farbe-bg); border-color: var(--farbe-dunkel-mid); }

.btn-klein {
  padding: 5px 12px;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: opacity .15s;
}

.btn-klein:hover { opacity: .85; }

.btn-klein-akzent { background: var(--farbe-akzent);   color: #fff;                      }
.btn-klein-warn   { background: var(--farbe-dunkel);   color: #fff;                      }
.btn-klein-rot    { background: var(--farbe-fehler);   color: #fff;                      }

.btn-klein-akzent:hover { background: var(--farbe-akzent-hover); }
.btn-klein-warn:hover   { background: #4a5057; }
.btn-klein-rot:hover    { background: #a93226; }

/* ========================================
   VDKF-SUCHE
   ======================================== */
.vdkf-zeile {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 10px;
}

.vdkf-input {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 1.5px solid var(--farbe-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
  outline: none;
  color: var(--farbe-text);
  background: var(--farbe-karte);
  transition: border .15s;
}

.vdkf-input:focus { border-color: var(--farbe-akzent); }

.vdkf-gefunden {
  background: var(--farbe-akzent-hell);
  border: 1px solid var(--farbe-akzent);
  border-radius: 8px;
  padding: 14px;
  margin-top: 10px;
}

.vdkf-nicht-gefunden {
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--farbe-text);
}

.vdkf-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--farbe-dunkel);
  margin-bottom: 3px;
}

.vdkf-info  { font-size: 13px; color: var(--farbe-text-schwach); margin-bottom: 2px; }
.vdkf-raeume { font-size: 12px; color: var(--farbe-text-schwach); }

.vdkf-aktionen {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.lade-text  { font-size: 13px; color: var(--farbe-text-schwach); }
.fehler-text { font-size: 13px; color: var(--farbe-fehler); }
.keine-berechtigung { padding: 2rem 0; color: var(--farbe-text-schwach); font-size: 14px; }

/* ========================================
   APP-VIEW (wenn eine App geoeffnet ist)
   ======================================== */
#app-view { display: none; }

/* Die Module stehen mit derselben Luft unter dem oberen Rand wie die Übersicht (bis
   14.09.2026 stand dort die Zurück-Leiste); ihre Breite regeln sie selbst. */
#app-container { padding-top: var(--raum-5); }
@media (max-width: 40em) { #app-container { padding-top: var(--raum-2); } }

/* .btn-zurueck: bis 14.09.2026 „← Zurück zur Übersicht" über jedem Modul (das
   leistet jetzt die Navigation links); der Anruf-Dialog nutzt die Klasse weiter. */
.btn-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--farbe-border);
  border-radius: 7px;
  background: var(--farbe-karte);
  color: var(--farbe-dunkel);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}

.btn-zurueck:hover { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 600px) {
  .gruss-zeile      { padding: 4px 0 14px; }
  .gruss-datum      { display: none; }
  .vdkf-input       { font-size: 12px; }
  .btn-akzent,
  .btn-ghost        { padding: 8px 14px; font-size: 12px; }
}

/* ========================================
   PASSWORT-MANAGEMENT
   ======================================== */


/* Passwort-Stärke-Anzeige */
.pw-staerke-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.pw-staerke-bar {
  flex: 1;
  height: 5px;
  background: var(--farbe-border);
  border-radius: 3px;
  overflow: hidden;
}
.pw-staerke-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width .25s, background .25s;
}
.pw-staerke-lbl {
  font-size: 11px;
  font-weight: 600;
  min-width: 42px;
  text-align: right;
}

/* Modal */
.kke-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(30,35,38,.55);
  z-index: 9000;
}
.kke-modal {
  background: var(--farbe-karte);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.kke-modal-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.kke-modal-titel {
  font-size: 16px;
  font-weight: 700;
  color: var(--farbe-dunkel);
}
.kke-modal-schliessen {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--farbe-text-schwach);
  padding: 2px 6px;
  border-radius: 4px;
}
.kke-modal-schliessen:hover { background: var(--farbe-bg); color: var(--farbe-dunkel); }

/* Toast */
.kke-toast {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font-family: 'IBM Plex Sans', sans-serif;
}
.kke-toast-ok    { background: var(--farbe-akzent); color: #fff; }
.kke-toast-fehler { background: var(--farbe-fehler); color: #fff; }

/* Mitarbeiter-Liste im Büro-Tab */
.mitarb-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--farbe-karte);
  border: 0.5px solid var(--farbe-border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.mitarb-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mitarb-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--farbe-dunkel);
}
.mitarb-meta {
  font-size: 12px;
  color: var(--farbe-text-schwach);
  font-family: 'IBM Plex Mono', monospace;
}

/* ========================================
   KALENDER-PLANER TAGESSTREIFEN – DASHBOARD
   ======================================== */
@media (min-width: 1100px) {
  #kp-uebersicht-grid {
    display: grid;
    grid-template-columns: minmax(0, 820px) 380px;
    gap: 16px;
  }
  #kp-tagesstreifen-dash {
    height: auto;
  }
}
/* Tagesstreifen bleibt beim Rollen stehen – aber nur als LETZTER Baustein der
   rechten Spalte der Übersicht (Einstellung „uebersicht"); über anderen
   Bausteinen rutschten diese sonst darunter. Stand bis 13.09.2026 fest im HTML. */
#kp-rechts-col > [data-baustein="tagesplan"]:last-child {
  position: sticky;
  top: var(--raum-4);
}

/* ── Übersicht im Stil B nach dem Zielbild (Scheibe D2a, 14.09.2026) ────────
   Rahmen je Baustein: Überschrift mit Linie über einer weißen Fläche. Die alten
   Karten der Bausteine (.dash-sektion) verlieren im Rahmen ihren Kasten;
   Nachfassen, Protokolle und Wetter ihre alte Kleinüberschrift (der Rahmen
   trägt sie). Die Zeilen im Innern: Block D2b darunter. Nur Festwerte. */
.ue-seite { display: flex; flex-direction: column; gap: var(--raum-5); max-width: 95rem;
  margin-inline: auto; background: transparent; }
/* Seiten mit einem Baustein (Berichte, Mitarbeiter): Lesebreite statt voller Breite. */
.ue-einzeln { max-width: 60rem; }
.ue-gruss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--raum-2) var(--raum-4); }
.ue-gruss h1 { margin: 0; }
.ue-datum { font-size: var(--text-s); color: var(--tinte-3); }
.ue-push { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4); background: var(--flaeche); border-radius: var(--radius-karte); }
.ue-schnell { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.ue-abschnitt { min-width: 0; }
/* Blendet sich ein Baustein aus (nichts da), verschwindet sein Rahmen mit. */
.ue-abschnitt:has(> .ue-panel > [hidden]) { display: none; }
.ue-kopf, .ue-seite .ah-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-3);
  padding: 0 var(--raum-1) var(--raum-2); margin-bottom: var(--raum-3);
  border-bottom: var(--rand-staerke) solid var(--tinte); }
.ue-kopf h2 { margin: 0; font-size: var(--text-m); }
.ue-panel, .ue-seite .ah-liste { background: var(--flaeche); border-radius: var(--radius-karte); overflow: hidden; }
.ue-panel .dash-sektion { background: transparent; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; padding: var(--raum-3) var(--raum-4); }
.ue-seite [data-baustein="nachfassen"] .dash-sektion > .sektion-label:first-child,
.ue-seite [data-baustein="protokolle"] .dash-sektion > .sektion-label:first-child,
.ue-seite [data-baustein="wetter"] .dash-sektion > .sektion-label:first-child { display: none; }
.ue-seite .sektion-label { font-family: var(--schrift); font-size: var(--text-xs); letter-spacing: .04em;
  color: var(--tinte-3); }
/* Die Anrufe bringen ihren Kopf selbst mit (Zahl offener Rückrufe) – Kopf und
   Liste sehen aus wie Rahmen und Fläche der anderen (D2b, oben mitgenannt). */
.ue-seite .ah-block { background: transparent; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; padding: 0; }
.ue-vdkf { padding: var(--raum-3) var(--raum-4); }
/* Anlegen (E3): Knöpfe nebeneinander, am Handy umbrechend – wie „aktionen" im Zielbild. */
.ue-anlegen { display: flex; flex-wrap: wrap; gap: var(--raum-2); padding: var(--raum-3) var(--raum-4); }
/* Sonderinhalte der Reiter auf der Übersicht (E4): Der Rahmen trägt die Überschrift,
   die Fläche den Innenabstand; am Handy brechen Zeilen um, statt sich zu überdecken.
   Nur unter .ue-seite – die Reiter selbst bleiben, wie sie sind. Die Mindestbestand-
   Warnung behält ihren roten Balken aus dem Reiter (sie erscheint nur, wenn etwas fehlt). */
.ue-seite [data-baustein="berichtsarchiv"] .ue-panel > .sektion-label:first-child,
.ue-seite [data-baustein="mitarbeiter"] .ue-panel > .sektion-label:first-child { display: none; }
.ue-seite .archiv-filter { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center;
  padding: var(--raum-3) var(--raum-4) 0; }
.ue-seite #archiv-paginierung { padding: 0 var(--raum-4) var(--raum-3); }
.ue-seite [data-baustein="berichtsarchiv"] .app-eintrag { flex-wrap: wrap; }
.ue-seite [data-baustein="berichtsarchiv"] .app-eintrag-text { flex: 1 1 14em; }
.ue-seite #mitarbeiter-liste { padding: 0 var(--raum-4); }
.ue-seite .mitarb-zeile { flex-wrap: wrap; margin: 0; padding: var(--raum-3) 0; background: transparent;
  border: 0; border-bottom: var(--rand-staerke) solid var(--linie); border-radius: 0; }
.ue-seite .mitarb-zeile:last-child { border-bottom: 0; }
.ue-seite .mitarb-name > span { white-space: nowrap; }
.ue-seite .vdkf-zeile { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; margin: 0; }
.ue-seite .vdkf-input { flex: 1 1 12em; min-width: 0; padding: var(--raum-2) var(--raum-3);
  font-family: var(--schrift-mono); font-size: var(--text-m); color: var(--tinte);
  background: var(--feld-auf-karte); border: 0; border-bottom: var(--feld-unterkante);
  border-radius: var(--radius-klein); }
.ue-seite .vdkf-input:focus { border-bottom-color: var(--signal); background: var(--flaeche); outline: none; }
.ue-seite .vdkf-input:focus-visible { outline: var(--fokus); outline-offset: var(--fokus-abstand); }
/* Spalten wie im Zielbild (1,4 : 1); darunter alles untereinander. */
.ue-seite #kp-uebersicht-grid { display: flex; flex-direction: column; gap: var(--raum-5); }
@media (min-width: 1100px) {
  .ue-seite #kp-uebersicht-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--raum-5); align-items: start; }
}
.ue-seite #kp-main-col, .ue-seite #kp-rechts-col { display: flex; flex-direction: column;
  gap: var(--raum-5); min-width: 0; }

/* ── Übersicht: Zeilen im Stil des Zielbilds (Scheibe D2b, 14.09.2026) ────────
   Eine Zeile: Inhalt links, Markierung rechts (Ton statt farbiger Plakette),
   darunter die Nebenangaben ruhig; Linien zwischen den Zeilen, keine Kästen.
   Knöpfe in Zeilen sehen aus wie der Bauteil-Knopf „klein" – technisch bleiben
   es die alten Knöpfe, damit sich am Klickverhalten nichts ändert. Ein Streifen
   links nur für „Achtung": dringend, überfällig, hoch, offener Rückruf. */
.ue-seite [data-baustein="aufgaben"] .dash-sektion,
.ue-seite [data-baustein="protokolle"] .dash-sektion,
.ue-seite [data-baustein="nachfassen"] .dash-sektion { padding: 0; }
.ue-seite .app-liste { background: transparent; border: 0; border-radius: 0; }
.ue-seite .app-eintrag { gap: var(--raum-3); padding: var(--listen-zeile) var(--raum-4);
  border-bottom: var(--rand-staerke) solid var(--linie); }
.ue-seite .app-eintrag:last-child { border-bottom: 0; }
.ue-seite .app-eintrag:hover { background: var(--grund); }
.ue-seite .app-eintrag-label { font-family: var(--schrift); font-size: var(--text-m);
  font-weight: var(--gewicht-normal); letter-spacing: normal; text-transform: none; color: var(--tinte); }
.ue-seite .app-eintrag-desc { font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .app-eintrag-pfeil { font-size: var(--text-m); color: var(--tinte-3); }
.ue-seite .app-eintrag:hover .app-eintrag-pfeil { color: var(--signal); }

/* Aufgaben: Punkt · Titel · Markierung; Gruppen als ruhige Zwischenzeile. */
.ue-seite .ue-aufgabe-kopf { display: flex; align-items: baseline; gap: var(--raum-2); min-width: 0; }
.ue-seite .ue-aufgabe-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--text-m); color: var(--tinte); }
.ue-seite .ue-punkt { flex: none; align-self: center; width: .5em; height: .5em; border-radius: 50%;
  background: currentColor; }
.ue-seite .ue-symbol { flex: none; color: var(--tinte-2); }
.ue-seite .ue-marke { flex: none; font-size: var(--text-s); white-space: nowrap; }
.ue-seite .ue-ton-krit { color: var(--krit); }
.ue-seite .ue-ton-warn { color: var(--warn); }
.ue-seite .ue-ton-signal { color: var(--signal); }
.ue-seite .ue-ton-ruhig { color: var(--tinte-3); }
.ue-seite .ue-ton-2 { color: var(--tinte-2); }
.ue-seite .ue-geplant { color: var(--signal); font-weight: var(--gewicht-halb); }
.ue-seite .ue-hervor-krit, .ue-seite .ah-rueckruf { box-shadow: inset calc(3 * var(--rand-staerke)) 0 0 var(--krit); }
.ue-seite .ue-hervor-warn { box-shadow: inset calc(3 * var(--rand-staerke)) 0 0 var(--warn); }
.ue-seite .ue-pfeil-knopf { cursor: pointer; }
.ue-seite .ue-gruppe { display: flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-4) var(--raum-1); font-size: var(--text-xs);
  font-weight: var(--gewicht-halb); color: var(--tinte-3); border-top: var(--rand-staerke) solid var(--linie); }
.ue-seite .ue-gruppe:first-child { border-top: 0; }
.ue-seite .ue-gruppe-klapp { cursor: pointer; }
.ue-seite .ue-gruppe-klapp:hover { color: var(--tinte); }
.ue-seite .ue-mehr, .ue-seite .ah-mehr { font-family: var(--schrift); font-size: var(--text-s);
  font-weight: var(--gewicht-normal); color: var(--tinte-3); cursor: pointer; }
.ue-seite .ue-mehr:hover, .ue-seite .ah-mehr:hover { color: var(--signal); }

/* Anrufe: Zeit · wer (darunter Nummer, Versuche) · Stand oder Aktionen. */
.ue-seite .ah-kopf .ah-titel { margin: 0; font-family: var(--schrift); font-size: var(--text-m);
  font-weight: var(--gewicht-fett); letter-spacing: normal; text-transform: none; color: var(--tinte); }
.ue-seite .ah-offen { font-size: var(--text-s); font-weight: var(--gewicht-normal); color: var(--krit); }
.ue-seite .ah-liste > * { border-bottom: var(--rand-staerke) solid var(--linie); }
.ue-seite .ah-liste > :last-child { border-bottom: 0; }
/* Schmal (Handy): die Aktionen rutschen unter den Namen, statt ihn zu verdrängen. */
.ue-seite .ah-zeile { flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-3);
  padding: var(--listen-zeile) var(--raum-4); border-top: 0; }
.ue-seite .ah-mitte { flex: 1 1 10em; }
.ue-seite .ah-laufend { background: var(--signal-hauch); }
.ue-seite .ah-zeit { flex: none; min-width: 3.5em; font-family: var(--schrift); font-size: var(--text-m);
  font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.ue-seite .ah-wer { font-size: var(--text-m); font-weight: var(--gewicht-normal); color: var(--tinte); }
.ue-seite .ah-wer-unbekannt, .ue-seite .ah-wer-unterdrueckt { color: var(--tinte-2); }
.ue-seite .ah-tuer:hover { color: var(--signal); }
.ue-seite .ah-unten { font-family: var(--schrift); font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .ah-rechts { align-self: center; gap: var(--raum-2); margin-left: auto; }
.ue-seite .ah-marke { font-family: var(--schrift); font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .ah-marke-laufend { font-weight: var(--gewicht-halb); color: var(--signal); }
.ue-seite .ah-leer, .ue-seite .ah-ruhig { padding: var(--listen-zeile) var(--raum-4); font-size: var(--text-m);
  color: var(--tinte-3); }
.ue-seite .ah-stoerung, .ue-seite .nachf-stoerung, .ue-seite .th-stoerung,
.ue-seite .kz-stoerung, .ue-seite .al-stoerung { margin: var(--raum-3) var(--raum-4);
  padding: var(--raum-2) var(--raum-3); border-radius: var(--radius); background: var(--krit-hauch);
  color: var(--krit); font-size: var(--text-m); font-weight: var(--gewicht-halb); }

/* Nachfassen: Termin links, „wann · seit" rechts in Rot (verstrichen), darunter
   Techniker und Auftrag, dann die Entscheidungen. Die Reihenfolge im Baustein
   bleibt – angeordnet wird nur per Raster. */
.ue-seite .nachf-zeile { padding: var(--listen-zeile) var(--raum-4); border-bottom: var(--rand-staerke) solid var(--linie); }
.ue-seite .nachf-zeile:last-child { border-bottom: 0; }
.ue-seite .nachf-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--raum-3); row-gap: var(--raum-1); align-items: baseline; }
.ue-seite .nachf-was { grid-row: 1; grid-column: 1; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--text-m); line-height: var(--zeile-hoehe); color: var(--tinte); }
.ue-seite .nachf-wann { grid-row: 1; grid-column: 2; white-space: nowrap; font-size: var(--text-s);
  font-variant-numeric: tabular-nums; color: var(--krit); }
.ue-seite .nachf-wer, .ue-seite .nachf-tasten, .ue-seite .nachf-eingabe,
.ue-seite .nachf-melde { grid-column: 1 / -1; }
.ue-seite .nachf-wer, .ue-seite .nachf-melde { font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .nachf-melde:empty { display: none; }
.ue-seite .nachf-tasten, .ue-seite .nachf-eingabe { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--raum-2); margin-top: var(--raum-1); }
.ue-seite .nachf-eingabe { font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .nachf-eingabe input, .ue-seite .nachf-eingabe select { margin: 0; font: inherit;
  font-size: var(--text-s); color: var(--tinte); background: var(--feld-auf-karte); border: 0;
  border-bottom: var(--feld-unterkante); border-radius: var(--radius-klein); padding: var(--raum-1) var(--raum-2); }
.ue-seite .nachf-eingabe input:focus-visible, .ue-seite .nachf-eingabe select:focus-visible {
  outline: var(--fokus); outline-offset: var(--fokus-abstand); }
.ue-seite .nachf-leer { padding: var(--listen-zeile) var(--raum-4); font-size: var(--text-m); color: var(--tinte-3); }

/* Knöpfe in Zeilen (Anrufe, Nachfassen, Protokolle): Aussehen wie der
   Bauteil-Knopf „klein, ohne Füllung"; Hervorhebung nur als Ton. */
.ue-seite .ah-aktion, .ue-seite .nachf-tasten button, .ue-seite .nachf-eingabe button,
.ue-seite .app-eintrag .btn-klein { display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: var(--raum-1) var(--raum-3); font: inherit; font-size: var(--text-s);
  font-weight: var(--gewicht-halb); line-height: var(--zeile-hoehe); color: var(--tinte);
  background: transparent; border: var(--rand-staerke) solid var(--linie-2);
  border-radius: var(--radius-knopf); cursor: pointer; white-space: nowrap; text-decoration: none; opacity: 1; }
.ue-seite .ah-aktion:hover, .ue-seite .nachf-tasten button:hover:not(:disabled),
.ue-seite .nachf-eingabe button:hover, .ue-seite .app-eintrag .btn-klein:hover {
  border-color: var(--tinte-3); color: var(--tinte); background: transparent; }
.ue-seite .nachf-tasten .nachf-ok, .ue-seite .nachf-eingabe .nachf-ok,
.ue-seite .app-eintrag .btn-klein-akzent { color: var(--signal); border-color: var(--signal); }
.ue-seite .nachf-tasten .nachf-ok:hover:not(:disabled), .ue-seite .nachf-eingabe .nachf-ok:hover,
.ue-seite .app-eintrag .btn-klein-akzent:hover { color: var(--signal); border-color: var(--signal);
  background: var(--signal-hauch); }
.ue-seite .app-eintrag .btn-klein-rot { color: var(--krit); border-color: var(--krit); }
.ue-seite .app-eintrag .btn-klein-rot:hover { color: var(--krit); border-color: var(--krit);
  background: var(--krit-hauch); }
.ue-seite .nachf-tasten button:disabled { color: var(--tinte-3); border-color: var(--linie-2); cursor: not-allowed; }
.ue-seite .ah-aktion:focus-visible, .ue-seite .ah-mehr:focus-visible, .ue-seite .nachf-tasten button:focus-visible,
.ue-seite .nachf-eingabe button:focus-visible, .ue-seite .app-eintrag .btn-klein:focus-visible {
  outline: var(--fokus); outline-offset: var(--fokus-abstand); }

/* ── Übersicht: Heutige Termine als Liste, Kopf mit Zahl und Verweis (D2c) ───
   Zeile wie im Zielbild: Uhrzeit · Kunde — Sache · Stand rechts, darunter der
   Mitarbeiter. „läuft" im Ton „aktiv" – kein Streifen, laufend ist kein Alarm.
   Die Uhrzeit-Spalte ist so breit wie „ganztags". Im Kopf: die Zahl neben der
   Überschrift, der Verweis („Plantafel", „Alle Aufgaben") rechts als Text. */
.ue-seite .th-zeile { display: grid; grid-template-columns: 4.75em minmax(0, 1fr) auto;
  column-gap: var(--raum-3); row-gap: var(--raum-1); align-items: baseline;
  padding: var(--listen-zeile) var(--raum-4); border-bottom: var(--rand-staerke) solid var(--linie); }
.ue-seite .th-liste > :last-child { border-bottom: 0; }
.ue-seite .th-zeit { font-size: var(--text-m); font-variant-numeric: tabular-nums; color: var(--tinte-2);
  white-space: nowrap; }
.ue-seite .th-was { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-m); color: var(--tinte); }
.ue-seite .th-lage { font-size: var(--text-s); color: var(--tinte-3); white-space: nowrap; }
.ue-seite .th-lage-laeuft { font-weight: var(--gewicht-halb); color: var(--signal); }
.ue-seite .th-wer { grid-column: 2 / -1; font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .th-leer, .ue-seite .th-ruhig { padding: var(--listen-zeile) var(--raum-4); color: var(--tinte-3); }
.ue-seite .th-leer { font-size: var(--text-m); }
.ue-seite .th-ruhig { font-size: var(--text-s); }
.ue-kopf .ue-anzahl { font-size: var(--text-s); font-weight: var(--gewicht-normal); color: var(--tinte-3); }
.ue-seite button.ue-mehr { margin: 0; padding: 0; border: 0; background: none; line-height: inherit; }
.ue-seite button.ue-mehr:focus-visible { outline: var(--fokus); outline-offset: var(--fokus-abstand); }

/* ── Übersicht: Kennzahlenzeile (Scheibe E1, 14.09.2026) ────────────────────
   Wie im Zielbild EINE weiße Fläche, die Werte durch Linien getrennt: groß die
   Zahl, darunter der Name, darunter der Zusatz im Ton. Die Felder teilen sich
   die Breite und brechen am Handy um; die Linie links/oben am Rand schneidet
   die Fläche ab (negativer Rand um genau eine Linienstärke). */
.ue-seite #kennzahlen-widget { background: var(--flaeche); border-radius: var(--radius-karte); overflow: hidden; }
.ue-seite .kz-zeile { display: flex; flex-wrap: wrap;
  margin: calc(-1 * var(--rand-staerke)) 0 0 calc(-1 * var(--rand-staerke)); }
.ue-seite .kz { flex: 1 1 10rem; min-width: 0; padding: var(--raum-3) var(--raum-4);
  border-left: var(--rand-staerke) solid var(--linie); border-top: var(--rand-staerke) solid var(--linie); }
/* Nur eine oder zwei Kennzahlen: die Felder behalten ihre Breite (ein Fünftel wie im
   Zielbild), statt sich über die ganze Zeile zu dehnen. */
.ue-seite .kz-zeile:not(:has(> .kz:nth-child(3))) > .kz { flex: 0 1 19rem; }
.ue-seite .kz-wert { font-size: var(--text-xl); font-weight: var(--gewicht-fett); letter-spacing: var(--eng);
  font-variant-numeric: tabular-nums; color: var(--tinte); }
.ue-seite .kz-name { font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .kz-zusatz { margin-top: var(--raum-1); font-size: var(--text-s); color: var(--tinte-3); }
.ue-seite .kz-ton-warn { color: var(--warn); }
.ue-seite .kz-ton-krit { color: var(--krit); }
.ue-seite .kz-leer { padding: var(--raum-3) var(--raum-4); font-size: var(--text-m); color: var(--tinte-3); }

/* ── Übersicht: Anlagen mit Alarm (Scheibe E2, 14.09.2026) ──────────────────
   Zeile wie im Zielbild: Anlage links, Wert rechts (Ziffern gleich breit),
   darunter der Grund – Alarm im Ton „kritisch", ohne Signal ruhig. */
.ue-seite .al-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--raum-3);
  row-gap: var(--raum-1); align-items: baseline; padding: var(--listen-zeile) var(--raum-4);
  border-bottom: var(--rand-staerke) solid var(--linie); }
.ue-seite .al-liste > :last-child { border-bottom: 0; }
.ue-seite .al-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-m); color: var(--tinte); }
.ue-seite .al-wert { white-space: nowrap; font-size: var(--text-m); font-weight: var(--gewicht-halb);
  font-variant-numeric: tabular-nums; color: var(--tinte); }
.ue-seite .al-grund { grid-column: 1 / -1; font-size: var(--text-s); }
.ue-seite .al-ton-krit { color: var(--krit); }
.ue-seite .al-ton-ruhig { color: var(--tinte-3); }
.ue-seite .al-leer { padding: var(--listen-zeile) var(--raum-4); font-size: var(--text-m); color: var(--tinte-3); }

/* ─────────────────────────────────────────────────────────────────────────────
   TELEFONIE (Pilot fuer den Tokensatz, siehe docs/befund/ci-bestand.md)
   Formensprache wie im Bestand: weisse Karte, 0.5px Rahmen, Mono fuer
   Status/Zeit, IBM Plex Sans fuer Inhalte. Nur Werte aus tokens.css.
   ───────────────────────────────────────────────────────────────────────────── */
.anruf-monitor { display: flex; flex-direction: column; gap: var(--abstand-8); }
.anruf-leer,
.anruf-platzhalter {
  color: var(--farbe-text-gedaempft); font-size: var(--schrift-xl);
  padding: var(--abstand-6) 0;
}

.anruf-zeile {
  border: 0.5px solid var(--farbe-border);
  border-left: 3px solid var(--farbe-border);
  border-radius: var(--radius-m);
  padding: var(--abstand-8) var(--abstand-12);
  background: var(--farbe-karte);
}
.anruf-zeile.anruf-klingelt   { border-left-color: var(--farbe-akzent); }
.anruf-zeile.anruf-angenommen { border-left-color: var(--farbe-dunkel); }

/* Der laufende Anruf ist die Hauptsache: mehr Luft, kraeftigere Kante. */
.anruf-zeile.anruf-laufend {
  border-left-width: 5px;
  padding: var(--abstand-12) var(--abstand-16);
  box-shadow: 0 1px 3px rgba(56, 62, 66, .08);
}
/* Erledigtes bleibt lesbar, tritt aber zurueck. */
.anruf-zeile.anruf-erledigt {
  padding: var(--abstand-6) var(--abstand-12);
  background: var(--farbe-gesperrt-hell);
  border-left-color: var(--farbe-border);
  opacity: .72;
}

.anruf-abschnitt {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--farbe-text-gedaempft);
  margin-top: var(--abstand-6); padding-top: var(--abstand-8);
  border-top: 1px solid var(--farbe-border);
}

/* Kopfzeile: Status links, Uhrzeit rechts – mit garantiertem Abstand. */
.anruf-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--abstand-12); margin-bottom: var(--abstand-2);
}
.anruf-status {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--farbe-text-gedaempft);
  margin-right: var(--abstand-12); white-space: nowrap;
}
.anruf-zeit {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  color: var(--farbe-text-schwach); white-space: nowrap;
}

/* WER anruft ist die wichtigste Information – groesste Schrift der Zeile,
   groesser als der Status. */
.anruf-kunde {
  display: block; margin: var(--abstand-6) 0 var(--abstand-2);
  padding: 0; border: 0; background: none;
  font-family: var(--schrift-familie); font-size: var(--schrift-2xl);
  font-weight: 600; color: var(--farbe-akzent);
  text-align: left; cursor: pointer;
}
.anruf-laufend .anruf-kunde { font-size: var(--schrift-3xl); font-weight: 700; }
.anruf-kunde:hover { text-decoration: underline; }

.anruf-unbekannt {
  margin: var(--abstand-6) 0 var(--abstand-2);
  font-size: var(--schrift-2xl); font-weight: 600; color: var(--farbe-dunkel);
}
.anruf-laufend .anruf-unbekannt { font-size: var(--schrift-3xl); font-weight: 700; }

.anruf-einwilligung {
  margin: var(--abstand-8) 0 var(--abstand-2);
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-bg); font-size: var(--schrift-l);
  line-height: 1.45; color: var(--farbe-dunkel);
}
.anruf-hinweis {
  font-size: var(--schrift-m); color: var(--farbe-fehler); margin: var(--abstand-2) 0;
}
.anruf-nummer {
  font-family: var(--schrift-mono); font-size: var(--schrift-l);
  color: var(--farbe-text-gedaempft);
}
.anruf-stoerung {
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-fehler-hell); color: var(--farbe-fehler);
  font-size: var(--schrift-xl); font-weight: 600; line-height: 1.4;
}

/* Intern und unterdrueckt sehen aus wie „unbekannt", sagen aber etwas
   anderes: eine Nebenstelle ist kein Neukunde, und bei unterdrueckter
   Nummer wissen wir gar nichts. Gedaempft, weil beides selten dringend ist. */
.anruf-intern,
.anruf-unterdrueckt {
  margin: var(--abstand-6) 0 var(--abstand-2);
  font-size: var(--schrift-2xl); font-weight: 600;
  color: var(--farbe-dunkel-mid);
}
.anruf-laufend .anruf-intern,
.anruf-laufend .anruf-unterdrueckt { font-size: var(--schrift-3xl); font-weight: 700; }

/* ── Anruf-Dialog: liegt ueber der ganzen Oberflaeche ────────────────────── */
/* ── Anruf-Dialog ──────────────────────────────────────────────────────────
   KEIN SPERRENDER SCHLEIER MEHR (05.08.2026). Der Dialog lebt jetzt bis zu
   einer Stunde und man soll waehrenddessen zum Kunden springen koennen — ein
   Vorhang ueber der Seite wuerde genau das verhindern. Er steht als Karte am
   Rand: beim Klingeln gross und farbig, danach ruhig.
   Mehrere Anrufe = mehrere Karten, untereinander im Stapel.                */
/* GANZ NACH OBEN — und das ist kein Geschmack, sondern Bedingung.
   Bis 05.08.2026 lag der Stapel bei 9000. Damit lag er GLEICHAUF mit
   .kke-modal-overlay (ebenfalls 9000, inset:0) und UNTER allem, was die App
   sonst noch an Schleiern und Dialogen kennt: 9500 (Kalender), 9999 (Toast,
   Protokoll-Hinweis), 10002/10010/10020 (Plantafel, Tagesroute, Termin). Bei
   Gleichstand gewinnt, wer zuletzt im DOM steht — der Dialog war sichtbar,
   aber die Klicks landeten auf dem Schleier darunter.
   Über uns steht nur noch das Stage-Banner (2147483647), und das soll so sein.
   WER EINEN NEUEN DIALOG BAUT, bleibt unter diesem Wert; test/anrufdialog_check.js
   prüft die Leiter nach. */
.anrufdlg-stapel {
  position: fixed; z-index: 10100;
  /* Nicht ganz unten rechts: dort sitzt .kke-toast (bottom 24, z-index 9999) —
     also genau die Meldung, die der Dialog selbst auslöst. Der Stapel rückt
     darüber, damit sich beide nicht gegenseitig verdecken. */
  right: var(--abstand-16); bottom: 76px;
  display: flex; flex-direction: column-reverse; gap: var(--abstand-12);
  max-height: calc(100vh - 100px); overflow-y: auto;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;                 /* der Stapel selbst faengt nichts ab */
}
.anrufdlg-stapel:empty { display: none; }
.anrufdlg-karte {
  pointer-events: auto;
  background: var(--farbe-karte); border-radius: var(--radius-l);
  border: 0.5px solid var(--farbe-border);
  border-left: 4px solid var(--farbe-border);
  box-shadow: 0 8px 32px rgba(30, 35, 38, .28);
  padding: var(--abstand-16); width: 100%;
  font-family: var(--schrift-familie);
}
/* Es klingelt: der einzige Zustand, der sich aufdraengen darf. */
.anrufdlg-klingelt  { border-left-color: var(--farbe-akzent); }
.anrufdlg-gespraech { border-left-color: var(--farbe-akzent); }
.anrufdlg-beendet, .anrufdlg-name  { border-left-color: var(--farbe-dunkel); }
.anrufdlg-notiz     { border-left-color: var(--farbe-akzent); }
.anrufdlg-fehler    { border-left-color: var(--farbe-fehler); }

.anrufdlg-kopf { margin-bottom: var(--abstand-8); }
/* Der Name ist das Einzige, was in diesen Sekunden zaehlt. */
.anrufdlg-wer {
  font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--farbe-text); margin-bottom: var(--abstand-4);
}
.anrufdlg-klingelt .anrufdlg-wer { font-size: 26px; }
/* Der Name ist eine TÜR: ein Klick schlägt die Kundenakte auf. Das muss man
   sehen, ohne es zu lesen — deshalb die gestrichelte Unterkante. */
.anrufdlg-wer-tuer { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.anrufdlg-wer-tuer:hover { color: var(--farbe-akzent); }
.anrufdlg-zeile:empty { display: none; }
.anrufdlg-zeile {
  font-size: var(--schrift-xl); color: var(--farbe-text-gedaempft);
}
/* „3 Anrufe, zuletzt 15:46" — Mono, weil es Zahlen sind. */
.anrufdlg-zaehler:empty { display: none; }
.anrufdlg-zaehler {
  font-family: var(--schrift-mono); font-size: var(--schrift-m);
  color: var(--farbe-text-gedaempft); margin-top: var(--abstand-4);
}
.anrufdlg-dauer:empty { display: none; }
.anrufdlg-dauer {
  font-family: var(--schrift-mono); font-size: var(--schrift-xl);
  color: var(--farbe-text-gedaempft); margin-top: var(--abstand-4);
}
.anrufdlg-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--schrift-familie); font-size: var(--schrift-xl);
  color: var(--farbe-akzent); font-weight: 600;
  margin-bottom: var(--abstand-8);
}
.anrufdlg-einwilligung {
  padding: var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-bg); font-size: var(--schrift-xl);
  line-height: 1.5; color: var(--farbe-dunkel); margin-top: var(--abstand-8);
}
.anrufdlg-hinweis {
  margin-top: var(--abstand-8); font-size: var(--schrift-xl);
  color: var(--farbe-text-gedaempft); line-height: 1.45;
}
/* Ein Fehlschlag darf nie aussehen wie ein Erfolg. Eigener Name, damit sich
   die MELDUNG nicht mit der gleichnamigen PHASE der Karte beisst. */
.anrufdlg-stoerung {
  margin-top: var(--abstand-8); padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-s);
  background: var(--farbe-fehler-hell); color: var(--farbe-fehler);
  font-size: var(--schrift-l); font-weight: 600; line-height: 1.45;
}
.anrufdlg-fussnote {
  margin-top: var(--abstand-8); font-size: var(--schrift-m);
  color: var(--farbe-text-gedaempft); line-height: 1.4;
}
.anrufdlg-knoepfe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-8);
  margin-top: var(--abstand-12);
}
/* Das Kreuz ist kein Knopf wie die anderen – es soll nicht mitkonkurrieren. */
.anrufdlg-kreuz {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; padding: var(--abstand-4) var(--abstand-8);
  color: var(--farbe-text-gedaempft);
}
.anrufdlg-kreuz:hover { color: var(--farbe-fehler); }
.anrufdlg-feld {
  width: 100%; box-sizing: border-box; margin-top: var(--abstand-4);
  padding: var(--abstand-8) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  font-family: var(--schrift-familie); font-size: var(--schrift-xl);
  color: var(--farbe-text); background: var(--farbe-karte);
}
.anrufdlg-notizfeld {
  width: 100%; box-sizing: border-box;
  margin: var(--abstand-4) 0 var(--abstand-8);
  padding: var(--abstand-8) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  font-family: var(--schrift-familie); font-size: var(--schrift-l);
  line-height: 1.5; color: var(--farbe-text); background: var(--farbe-karte);
  resize: vertical;
}
.anrufdlg-pruefen {
  margin-bottom: var(--abstand-8); padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-s); background: #fdf3e3; color: #8a5a00;
  font-size: var(--schrift-m); font-weight: 600; line-height: 1.4;
}
/* „+ Kunde anlegen" ist der Gegenpart zu „→ Kunde öffnen": derselbe Platz,
   dieselbe Form – nur der eine führt zu einem Kunden, der andere macht einen. */
.anrufdlg-neukunde { color: var(--farbe-dunkel); }
.anrufdlg-neukunde:hover { color: var(--farbe-akzent); }

/* ── Zusammengeklappt: alles jenseits der zwei offenen Karten ─────────────── */
/* Sechs Karten übereinander verdecken die halbe Anwendung. Was älter ist als
   die zwei jüngsten, schrumpft auf eine Zeile und kommt per Klick zurück. */
.anrufdlg-zu {
  display: flex; align-items: center; gap: var(--abstand-8);
  padding: var(--abstand-8) var(--abstand-12);
  border-left-color: var(--farbe-border);
  box-shadow: 0 2px 10px rgba(30, 35, 38, .14);
}
.anrufdlg-zuzeile {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--abstand-8);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--schrift-familie);
}
.anrufdlg-zuwer {
  font-size: var(--schrift-l); font-weight: 600; color: var(--farbe-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ohne Kundennamen muss die Nummer mit — sonst steht zweimal „Kein Kunde" da
   und man kann nicht entscheiden, welche Zeile man aufklappt. */
.anrufdlg-zunr {
  font-family: var(--schrift-mono); font-size: var(--schrift-m);
  color: var(--farbe-text-gedaempft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anrufdlg-zuzahl {
  font-family: var(--schrift-mono); font-size: var(--schrift-m);
  color: var(--farbe-text-gedaempft); white-space: nowrap;
}
.anrufdlg-zu .anrufdlg-kreuz { margin-left: 0; font-size: 16px; }

/* ── Anrufnotiz: Bedienung und Notiz ──────────────────────────────────────── */
.notiz-lage { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.notiz-lage-an  { color: var(--farbe-akzent, #00A886); font-weight: 600; }
.notiz-lage-aus { color: var(--farbe-fehler, #c0392b); }
.notiz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.notiz-fehler {
  margin: 8px 0; padding: 8px 10px; border-radius: 4px;
  background: #fdf0ee; color: var(--farbe-fehler, #c0392b); font-size: 13px;
}
.notiz-ergebnis { margin-top: 14px; border-top: 1px solid var(--farbe-border, #d1d5da); padding-top: 12px; }
.notiz-feld {
  width: 100%; box-sizing: border-box; margin: 4px 0 12px;
  padding: 8px 10px; border: 0.5px solid var(--farbe-border, #d1d5da);
  border-radius: 4px; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
  line-height: 1.45; resize: vertical;
}
.notiz-pruefen {
  margin: 4px 0 10px; padding: 8px 10px; border-radius: 4px;
  background: #fff8e6; color: #7a5b00; font-size: 13px;
}
.notiz-riegel {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0;
  padding: 8px 10px; border-radius: 4px; background: #f4f5f6;
  font-size: 13px; line-height: 1.4; cursor: pointer;
}
.notiz-riegel-an { background: #e6f6f2; color: #00654f; font-weight: 600; }
.notiz-riegel-aus { color: var(--farbe-gesperrt); cursor: default; }

/* Fehlt der Agent, sind die Knoepfe gesperrt – und daneben steht im
   Klartext, was zu tun ist. Ein Knopf, der nichts bewirken kann, darf
   nicht drueckbar aussehen. */
.notiz-rat {
  margin: var(--abstand-8) 0; padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-s); background: var(--farbe-hinweis-hell);
  color: var(--farbe-hinweis); font-size: var(--schrift-l); line-height: 1.5;
}
.notiz-knopf-aus,
.notiz-knopf-aus:hover {
  background: var(--farbe-gesperrt-hell); border-color: var(--farbe-border);
  color: var(--farbe-gesperrt); cursor: not-allowed; box-shadow: none;
}
.notiz-warnung {
  margin: 8px 0; padding: 10px 12px; border-radius: 4px;
  background: var(--farbe-fehler, #c0392b); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.4;
}
.notiz-erfolg {
  margin: 8px 0; padding: 8px 10px; border-radius: 4px;
  background: #e6f6f2; color: #00654f; font-size: 13px; font-weight: 600;
}
.anruf-stoerung {
  padding: 10px 12px; border-radius: 4px;
  background: #fdf0ee; color: var(--farbe-fehler, #c0392b);
  font-size: 14px; font-weight: 600; line-height: 1.4;
}

/* ── Anrufliste: die Rueckrufliste zum Abarbeiten ────────────────────────── */
.anrufliste { font-family: var(--schrift-familie); }

.anrufliste-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-6);
  margin-bottom: var(--abstand-12);
}
.anrufliste-filter-knopf {
  padding: var(--abstand-4) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  background: var(--farbe-karte); color: var(--farbe-dunkel-mid);
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  letter-spacing: .04em; cursor: pointer;
}
.anrufliste-filter-knopf:hover { border-color: var(--farbe-akzent); }
.anrufliste-filter-an {
  background: var(--farbe-akzent); border-color: var(--farbe-akzent);
  color: #fff; font-weight: 600;
}
.anrufliste-filter-trenner {
  width: 1px; height: 18px; background: var(--farbe-border);
  margin: 0 var(--abstand-4);
}

/* Der Abschnittskopf trennt „offene Rueckrufe" vom Verlauf. */
.anrufliste-abschnitt {
  margin: var(--abstand-16) 0 var(--abstand-8);
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--farbe-dunkel-mid);
}
.anrufliste-abschnitt:first-child { margin-top: 0; }

.anrufliste-zeile {
  padding: var(--abstand-8) var(--abstand-12);
  border-left: 3px solid var(--farbe-border);
  border-bottom: 1px solid var(--farbe-border);
  background: var(--farbe-karte);
}
/* WAS GERADE LÄUFT, steht oben und ist die auffälligste Zeile der Seite.
   Seit 05.08.2026 ersetzt diese Hervorhebung den früheren eigenen Kasten
   „Aktuelle Anrufe" – eine Liste, nicht zwei. */
.anrufliste-laufend {
  border-left-width: 4px;
  border-left-color: var(--farbe-akzent);
  background: var(--farbe-akzent-hell);
  padding: var(--abstand-12);
}
.anrufliste-laufend .anrufliste-wer {
  font-size: var(--schrift-3xl); font-weight: 700;
}
.anrufliste-laufend .anrufliste-nummer { font-size: var(--schrift-xl); }
.anrufliste-status-laufend {
  color: var(--farbe-akzent-dunkel); font-weight: 700;
  font-size: var(--schrift-xl);
}
/* Der Satz zum Ablesen – nur am laufenden Anruf, sonst wird er Tapete. */
.anrufliste-einwilligung {
  margin: var(--abstand-8) 0 var(--abstand-2);
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-karte); font-size: var(--schrift-l);
  line-height: 1.45; color: var(--farbe-dunkel);
}

/* VERPASST ist der eigentliche Nutzen – das muss ins Auge springen. */
.anrufliste-verpasst {
  border-left-color: var(--farbe-fehler);
  background: var(--farbe-fehler-hell);
}
.anrufliste-erledigt { opacity: .55; }

.anrufliste-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-8);
}
.anrufliste-zeit {
  font-family: var(--schrift-mono); font-size: var(--schrift-l);
  color: var(--farbe-text-gedaempft);
}
.anrufliste-wer {
  font-size: var(--schrift-2xl); font-weight: 600; color: var(--farbe-text);
}
.anrufliste-wer-kunde { color: var(--farbe-akzent-dunkel); }
.anrufliste-wer-intern,
.anrufliste-wer-unterdrueckt { color: var(--farbe-dunkel-mid); font-weight: 500; }
/* „5 Versuche, zuletzt 15:46" – EIN Eintrag statt fünf gleicher Zeilen. */
.anrufliste-versuche {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  color: var(--farbe-dunkel); font-weight: 600;
  background: var(--farbe-bg); border-radius: var(--radius-s);
  padding: 1px var(--abstand-8);
}
.anrufliste-richtung {
  margin-left: auto;
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  color: var(--farbe-text-schwach);
}
/* Die Rufnummer steht immer da – auch bei erkanntem Kunden. */
.anrufliste-nummer {
  font-family: var(--schrift-mono); font-size: var(--schrift-l);
  color: var(--farbe-text-gedaempft); margin-top: var(--abstand-2);
}
.anrufliste-status {
  font-size: var(--schrift-m); color: var(--farbe-dunkel-mid);
  margin-top: var(--abstand-2);
}
.anrufliste-status-verpasst {
  color: var(--farbe-fehler); font-weight: 700;
  font-family: var(--schrift-mono); letter-spacing: .06em;
}

.anrufliste-aktionen {
  display: flex; flex-wrap: wrap; gap: var(--abstand-6);
  margin-top: var(--abstand-8);
}
.anrufliste-aktion {
  display: inline-block;
  padding: var(--abstand-4) var(--abstand-8);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  background: var(--farbe-karte); color: var(--farbe-dunkel);
  font-family: var(--schrift-familie); font-size: var(--schrift-m);
  text-decoration: none; cursor: pointer;
}
.anrufliste-aktion:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent-dunkel); }
.anrufliste-aktion-erledigt {
  border-color: var(--farbe-akzent); color: var(--farbe-akzent-dunkel); font-weight: 600;
}

/* ── Die Notiz-Bedienung IN der Anrufzeile (seit 05.08.2026) ──────────────
   Sie stand vorher in einem eigenen Kasten am Seitenende; bei einer laengeren
   Liste musste man im Gespraech daran vorbeiscrollen. Jetzt haengt sie an der
   Zeile des Anrufs, um den es geht – abgesetzt durch eine Linie, damit
   erkennbar bleibt, dass sie zu DIESEM Anruf gehoert. */
.notiz-an-zeile {
  margin-top: var(--abstand-12); padding-top: var(--abstand-12);
  border-top: 1px solid var(--farbe-border);
}
/* Am laufenden Anruf liegt sie auf der tuerkisen Flaeche: heller Grund,
   damit Textfelder und Haken lesbar bleiben. */
.anrufliste-laufend .notiz-an-zeile {
  margin-top: var(--abstand-12);
  padding: var(--abstand-12); border-top: 0;
  border-radius: var(--radius-s); background: var(--farbe-karte);
}
/* DIE LAGE steht EINMAL oben: laeuft der Agent? Nie ganz weg, sonst
   verschwaende auch die Meldung „Agent laeuft nicht". */
.anrufliste > .notiz-lage-kasten {
  margin-bottom: var(--abstand-12); padding: var(--abstand-8) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  background: var(--farbe-karte);
}
.notiz-lage-kasten .notiz-lage { margin-bottom: 0; }
.notiz-lage-kasten .notiz-rat,
.notiz-lage-kasten .notiz-warnung,
.notiz-lage-kasten .notiz-fehler { margin-bottom: 0; }

/* DIE KNOEPFE stehen an jeder Zeile, in derselben Formensprache wie
   „Kunde oeffnen" und „Zurueckrufen" – sie sollen sich einreihen, nicht
   die Zeile beherrschen. */
.notiz-streifen {
  display: contents;              /* reiht sich in .anrufliste-aktionen ein */
}
.notiz-knopf-start { border-color: var(--farbe-akzent); color: var(--farbe-akzent-dunkel); }
.notiz-riegel-klein {
  display: inline-flex; align-items: center; gap: var(--abstand-4);
  padding: var(--abstand-4) var(--abstand-8);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  background: var(--farbe-karte); font-size: var(--schrift-m);
  color: var(--farbe-dunkel); cursor: pointer;
}
.notiz-riegel-klein.notiz-riegel-an { background: #e6f6f2; color: #00654f; font-weight: 600; }
.notiz-riegel-klein.notiz-riegel-aus { color: var(--farbe-gesperrt); cursor: default; }

/* DIE RUECKFRAGE, wenn eine unfertige Notiz im Weg steht. Sie muss auffallen —
   hier geht sonst Geschriebenes verloren. */
.notiz-rueckfrage {
  flex-basis: 100%; margin-top: var(--abstand-8);
  padding: var(--abstand-12); border-radius: var(--radius-s);
  background: #fff8e6; border: 1px solid #e6c65c;
}
.notiz-rueckfrage-text {
  font-size: var(--schrift-l); line-height: 1.45; color: #7a5b00; font-weight: 600;
}
.notiz-rueckfrage .notiz-knoepfe { margin-bottom: 0; }

/* DER EDITOR haengt an SEINEM Anruf und sagt im Kopf, an welchem. */
.notiz-ergebnis-leer { display: none; }
.notiz-ergebnis-kopf {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--farbe-dunkel-mid); margin-bottom: var(--abstand-8);
}
.anrufliste > .notiz-ergebnis:not(.notiz-an-zeile) {
  margin-bottom: var(--abstand-12); padding: var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  background: var(--farbe-karte); border-top: 0;
}

.anrufliste-leer {
  padding: var(--abstand-12); color: var(--farbe-text-gedaempft);
  font-size: var(--schrift-xl);
}
/* Leerer Zustand und Fehler duerfen NIE gleich aussehen. */
.anrufliste-stoerung {
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-fehler-hell); color: var(--farbe-fehler);
  font-size: var(--schrift-xl); font-weight: 600; line-height: 1.4;
}
.anrufliste-hinweis {
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-hinweis-hell); color: var(--farbe-hinweis);
  font-size: var(--schrift-l); line-height: 1.4;
}

/* ── Adressfeld (PLZ / Ort / Strasse / Nr.) ──────────────────────────────────
   Formensprache des Bestands: dieselben Eingabefelder, dieselben kleinen
   Aktionsknoepfe wie in der Anrufliste, CI-Tokens statt eigener Farben.
   Ein WARNENDER Befund sieht bewusst anders aus als ein FEHLER — „passt
   vielleicht nicht" und „konnte nicht geprueft werden" sind zwei Aussagen. */
.adr-block { font-family: var(--schrift-familie); }
.adr-reihe {
  display: flex; flex-wrap: wrap; gap: var(--abstand-8);
  margin-bottom: var(--abstand-8);
}
.adr-feld { display: flex; flex-direction: column; gap: var(--abstand-2); }
.adr-feld-klein { flex: 0 0 110px; }
.adr-feld-breit { flex: 1 1 220px; }
.adr-label {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-dunkel-mid);
}
.adr-eingabe {
  width: 100%; box-sizing: border-box;
  padding: var(--abstand-8) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  font-family: var(--schrift-familie); font-size: var(--schrift-l);
  color: var(--farbe-dunkel); background: var(--farbe-karte);
}
.adr-eingabe:focus { outline: none; border-color: var(--farbe-akzent); }

/* Mehrere Orte zu einer PLZ: zur Auswahl stellen statt raten. */
.adr-wahl-reihe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-6);
}
.adr-wahl-reihe:empty { display: none; }
.adr-wahl-hinweis { font-size: var(--schrift-m); color: var(--farbe-text-gedaempft); }
.adr-wahl, .adr-vorschlag, .adr-korrektur {
  display: inline-block; padding: var(--abstand-4) var(--abstand-8);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  background: var(--farbe-karte); color: var(--farbe-dunkel);
  font-family: var(--schrift-familie); font-size: var(--schrift-m); cursor: pointer;
}
.adr-wahl:hover, .adr-vorschlag:hover, .adr-korrektur:hover {
  border-color: var(--farbe-akzent); color: var(--farbe-akzent-dunkel);
}
.adr-wahl-an {
  border-color: var(--farbe-akzent); background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel); font-weight: 600;
}
.adr-vorschlaege {
  display: flex; flex-wrap: wrap; gap: var(--abstand-6); margin: var(--abstand-4) 0;
}
.adr-vorschlaege:empty { display: none; }
.adr-korrektur { margin: 0 var(--abstand-4); font-weight: 600; }

/* Der Befund. Leer = unsichtbar, damit keine leere Zeile Platz frisst. */
.adr-befund {
  margin-top: var(--abstand-4); padding: var(--abstand-8) var(--abstand-12);
  border-radius: var(--radius-s); font-size: var(--schrift-m); line-height: 1.45;
  background: var(--farbe-bg); color: var(--farbe-dunkel-mid);
}
.adr-befund:empty { display: none; }
.adr-befund-gut { background: var(--farbe-akzent-hell); color: var(--farbe-akzent-dunkel); }
.adr-befund-warnung { background: var(--farbe-hinweis-hell); color: var(--farbe-hinweis); }
.adr-befund-fehler {
  background: var(--farbe-fehler-hell); color: var(--farbe-fehler); font-weight: 600;
}
/* Kein Fehler, nur ausgeschaltet: gedeckt, damit es nicht nach Defekt aussieht. */
.adr-befund-aus { background: var(--farbe-bg); color: var(--farbe-text-schwach); }

/* ── Aufnahme (Weg B aus der App gesteuert) ─────────────────────────────────
   DASS aufgezeichnet wird, darf man nicht uebersehen koennen. Der Balken sitzt
   in der Lage, also ganz oben in der Liste — ohne Scrollen im Blick. */
.notiz-aufnahme-balken {
  margin-top: var(--abstand-8);
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-fehler); color: #fff;
  font-weight: 700; font-size: var(--schrift-l); letter-spacing: .02em;
}
.notiz-knopf-aufnahme { border-color: var(--farbe-fehler); color: var(--farbe-fehler); }
.notiz-knopf-stopp {
  border-color: var(--farbe-fehler); background: var(--farbe-fehler);
  color: #fff; font-weight: 600;
}

/* ── „Anrufe heute" auf der Übersicht ─────────────────────────────────────── */
/* Der offene Rückruf ist das, woran man nicht von selbst denkt — er muss auf
   der Startseite ins Auge fallen. Die ausführliche Sicht bleibt die Seite
   „Anrufnotiz"; hier steht der Auszug. */
.ah-block { padding: var(--abstand-16); }
.ah-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--abstand-8); margin-bottom: var(--abstand-8);
}
.ah-mehr {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--schrift-familie); font-size: var(--schrift-m);
  color: var(--farbe-akzent); font-weight: 600;
}
.ah-zeile {
  display: flex; align-items: center; gap: var(--abstand-12);
  padding: var(--abstand-8) 0;
  border-top: 1px solid var(--farbe-border);
}
.ah-zeile:first-of-type { border-top: 0; }
/* Was gerade läuft und was offen ist, hebt sich ab – der Rest bleibt ruhig. */
.ah-laufend  { background: rgba(0, 168, 134, .07); }
.ah-rueckruf { box-shadow: inset 3px 0 0 var(--farbe-fehler); padding-left: var(--abstand-8); }
.ah-zeit {
  font-family: var(--schrift-mono); font-size: var(--schrift-l);
  color: var(--farbe-text-gedaempft); white-space: nowrap;
}
.ah-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ah-wer {
  font-size: var(--schrift-l); font-weight: 600; color: var(--farbe-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-wer-unbekannt, .ah-wer-unterdrueckt { color: var(--farbe-text-gedaempft); }
/* Der Name ist eine Tür zur Akte – dasselbe Zeichen wie im Anruf-Dialog. */
.ah-tuer { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ah-tuer:hover { color: var(--farbe-akzent); }
.ah-unten {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  color: var(--farbe-text-gedaempft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-rechts { display: flex; align-items: center; gap: var(--abstand-8); flex-wrap: wrap; justify-content: flex-end; }
.ah-marke {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  color: var(--farbe-text-schwach); white-space: nowrap;
}
.ah-marke-laufend { color: var(--farbe-akzent); font-weight: 600; }
.ah-aktion {
  background: var(--farbe-karte); border: 0.5px solid var(--farbe-border);
  border-radius: var(--radius-s); padding: var(--abstand-4) var(--abstand-8);
  font-family: var(--schrift-familie); font-size: var(--schrift-m);
  color: var(--farbe-dunkel); cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.ah-aktion:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.ah-aktion-erledigt:hover { border-color: var(--farbe-akzent); }
/* Ein Fehlschlag darf nie aussehen wie „nichts da". */
.ah-stoerung {
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-fehler-hell); color: var(--farbe-fehler);
  font-size: var(--schrift-m); font-weight: 600;
}
.ah-leer, .ah-ruhig {
  font-size: var(--schrift-m); color: var(--farbe-text-gedaempft);
  padding: var(--abstand-4) 0;
}

/* Zurück zur Arbeit: derselbe schlichte Link wie „→ Kunde öffnen", nur ruhiger
   — er ist ein Angebot, keine Aufforderung. */
.anrufdlg-zurueck { color: var(--farbe-text-gedaempft); font-weight: 500; }
.anrufdlg-zurueck:hover { color: var(--farbe-akzent); }

/* ── Anruf-Maske: EINE Maske, vier Blöcke ─────────────────────────────────── */
/* Sie liegt UNTER dem Anruf-Dialog (10100) und über allem anderen — man soll
   die Karte des laufenden Anrufs weiter sehen, während man tippt. */
.am-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(30, 35, 38, .55);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 24px 12px;
  font-family: var(--schrift-familie);
}
.am-karte {
  width: 100%; max-width: 620px; background: var(--farbe-karte);
  border-radius: var(--radius-l); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.am-kopf {
  background: var(--farbe-dunkel); color: #fff;
  padding: var(--abstand-12) var(--abstand-16);
  display: flex; justify-content: space-between; align-items: center;
}
.am-titel { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.am-kreuz {
  background: none; border: 0; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; padding: var(--abstand-4) var(--abstand-8);
}
.am-inhalt { padding: var(--abstand-16); }
.am-block { margin-bottom: var(--abstand-16); }
.am-block:last-child { margin-bottom: 0; }

/* WER: der erkannte Kunde ist EINE Zeile mit Haken. Kein Feld. */
.am-kunde {
  display: flex; align-items: baseline; gap: var(--abstand-8);
  padding: var(--abstand-8) var(--abstand-12);
  background: var(--farbe-bg); border-radius: var(--radius-s);
}
.am-haken { color: var(--farbe-akzent); font-weight: 700; }
.am-kundename { font-size: var(--schrift-xl); font-weight: 600; color: var(--farbe-text); }
.am-nummer {
  font-family: var(--schrift-mono); font-size: var(--schrift-m);
  color: var(--farbe-text-gedaempft);
}

/* WAS und WIE: Knopfreihen. Gedrückt = Türkis, sonst ruhig. */
.am-arten, .am-weichen {
  display: flex; flex-wrap: wrap; gap: var(--abstand-8); margin-bottom: var(--abstand-12);
}
.am-art, .am-weiche {
  background: var(--farbe-karte); border: 0.5px solid var(--farbe-border);
  border-radius: var(--radius-s); padding: var(--abstand-8) var(--abstand-12);
  font-family: var(--schrift-familie); font-size: var(--schrift-l);
  color: var(--farbe-dunkel); cursor: pointer; min-height: 40px;
}
.am-art:hover, .am-weiche:hover { border-color: var(--farbe-akzent); }
.am-art-an, .am-weiche-an {
  background: var(--farbe-akzent); border-color: var(--farbe-akzent);
  color: #fff; font-weight: 600;
}
.am-label {
  display: block; font-size: var(--schrift-m); color: var(--farbe-text-gedaempft);
  margin: var(--abstand-8) 0 var(--abstand-4);
}
.am-feld {
  width: 100%; box-sizing: border-box;
  padding: var(--abstand-8) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  font-family: var(--schrift-familie); font-size: 16px; line-height: 1.5;
  color: var(--farbe-text); background: var(--farbe-karte); resize: vertical;
}
.am-feld:focus { outline: none; border-color: var(--farbe-akzent); }
.am-kurz { width: auto; display: inline-block; }
.am-termin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-8); }
.am-termin .am-label { margin: 0; }
.am-hinweis {
  font-size: var(--schrift-m); color: var(--farbe-text-gedaempft);
  line-height: 1.45; margin-top: var(--abstand-4);
}
.am-stoerung {
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  background: var(--farbe-fehler-hell); color: var(--farbe-fehler);
  font-size: var(--schrift-m); font-weight: 600;
}
/* Meldungen beim Speichern: laufend, gut, Warnung, Fehler — nie gleich aussehend. */
.am-meldung:empty { display: none; }
.am-meldung {
  margin: 0 var(--abstand-16) var(--abstand-12);
  padding: var(--abstand-8) var(--abstand-12); border-radius: var(--radius-s);
  font-size: var(--schrift-m); line-height: 1.45;
  background: var(--farbe-bg); color: var(--farbe-text);
}
.am-meldung-ok     { background: rgba(0, 168, 134, .12); color: #00795f; font-weight: 600; }
.am-meldung-warn   { background: #fdf3e3; color: #8a5a00; font-weight: 600; }
.am-meldung-fehler { background: var(--farbe-fehler-hell); color: var(--farbe-fehler); font-weight: 600; }
.am-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-12); padding: var(--abstand-12) var(--abstand-16) var(--abstand-16);
  border-top: 1px solid var(--farbe-border);
}
.am-fusstext { font-size: var(--schrift-m); color: var(--farbe-text-gedaempft); }

/* ── Mini-Neukunde (Block 1) ──────────────────────────────────────────────── */
.mnk-typen { display: flex; flex-wrap: wrap; gap: var(--abstand-4); margin-bottom: var(--abstand-8); }
.mnk-typ {
  background: var(--farbe-karte); border: 0.5px solid var(--farbe-border);
  border-radius: var(--radius-s); padding: var(--abstand-4) var(--abstand-12);
  font-family: var(--schrift-familie); font-size: var(--schrift-m);
  color: var(--farbe-dunkel); cursor: pointer; min-height: 34px;
}
.mnk-typ-an { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); color: #fff; font-weight: 600; }
.mnk-label {
  display: block; font-size: var(--schrift-m); color: var(--farbe-text-gedaempft);
  margin: var(--abstand-8) 0 var(--abstand-4);
}
.mnk-feld {
  width: 100%; box-sizing: border-box;
  padding: var(--abstand-8) var(--abstand-12);
  border: 0.5px solid var(--farbe-border); border-radius: var(--radius-s);
  font-family: var(--schrift-familie); font-size: 16px;
  color: var(--farbe-text); background: var(--farbe-karte);
}
.mnk-feld:focus { outline: none; border-color: var(--farbe-akzent); }
.mnk-mono { font-family: var(--schrift-mono); text-transform: uppercase; }
/* Was in Taifun stehen wird — sichtbar, BEVOR es dort steht. */
.mnk-vorschau:empty { display: none; }
.mnk-vorschau {
  font-family: var(--schrift-mono); font-size: var(--schrift-s);
  color: var(--farbe-text-gedaempft); margin-top: var(--abstand-4);
}
.mnk-dublette:empty { display: none; }
.mnk-dublette {
  margin-top: var(--abstand-4); padding: var(--abstand-4) var(--abstand-8);
  border-radius: var(--radius-s); background: #fdf3e3; color: #8a5a00;
  font-size: var(--schrift-m); line-height: 1.4;
}
.mnk-telefon:empty { display: none; }
.mnk-telefon {
  font-family: var(--schrift-mono); font-size: var(--schrift-m);
  color: var(--farbe-text-gedaempft); margin-top: var(--abstand-8);
}

/* Arten-Leiste im Anruf-Dialog: ein Klick, und die Maske steht offen. */
.anrufdlg-arten { margin-top: var(--abstand-12); }
.anrufdlg-artenkopf {
  font-size: var(--schrift-m); color: var(--farbe-text-gedaempft);
  margin-bottom: var(--abstand-4);
}
.anrufdlg-artenreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-4); }
.anrufdlg-art {
  background: var(--farbe-bg); border: 0.5px solid var(--farbe-border);
  border-radius: var(--radius-s); padding: var(--abstand-4) var(--abstand-8);
  font-family: var(--schrift-familie); font-size: var(--schrift-m);
  color: var(--farbe-dunkel); cursor: pointer;
}
.anrufdlg-art:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }

/* Wer ist drangegangen? Bei EINER zentralen Rufnummer klingeln beide Telefone —
   dann ist das die wichtigste Auskunft nach „wer ruft an". */
.anrufdlg-wer-spricht {
  margin-top: var(--abstand-4); font-size: var(--schrift-l);
  font-weight: 600; color: var(--farbe-akzent);
}

/* ═══ ANLEGEN-DIALOG UND KUNDENHISTORIE (16.09.2026) ═════════════════════════
   Zwei Bausteine, EIN Aussehen: der Dialog (baustein_anlegen.js) und die
   gemeinsame Historie (baustein_kundenhistorie.js), die später auch die
   Kundenakte benutzt.

   Farben, Abstände, Schriftgrößen und Radien kommen ausschließlich aus
   festwerte.css – hier steht kein Hexwert und kein fester Pixelwert.

   STAPELORDNUNG: unter dem Anruf-Stapel (10100), über Kalender (9500),
   Plantafel (10002), Tagesroute (10010) und Termin-Dialog (10020). Der Dialog
   wird AUS dem Anruf heraus geöffnet – die Anrufkarte muss sichtbar bleiben.
   test/anrufdialog_check.js prüft diese Leiter nach.                        */

.an-hg {
  position: fixed; inset: 0; z-index: 10040;
  background: var(--tinte); opacity: .38;
}
.an-dlg {
  position: fixed; z-index: 10050;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(36rem, calc(100vw - var(--raum-5)));
  max-height: calc(100vh - var(--raum-6));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--flaeche); color: var(--tinte);
  border-radius: var(--radius-karte); box-shadow: var(--schatten-leicht);
  font-family: var(--schrift); font-size: var(--text-m); line-height: var(--zeile-hoehe);
}
.an-kopf {
  display: flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-4);
  border-bottom: var(--rand-staerke) solid var(--linie);
}
.an-titel { flex: 1; margin: 0; font-size: var(--text-l); font-weight: var(--gewicht-fett); }
.an-zurueck, .an-zu {
  border: 0; background: none; cursor: pointer;
  color: var(--tinte-3); font: inherit; font-size: var(--text-s);
  padding: var(--raum-1) var(--raum-2);
}
.an-zu { font-size: var(--text-l); }
.an-zurueck:hover, .an-zu:hover { color: var(--tinte); }
.an-anrufband {
  padding: var(--raum-2) var(--raum-4);
  background: var(--signal-hauch); color: var(--signal);
  font-size: var(--text-s);
  border-bottom: var(--rand-staerke) solid var(--linie);
}
.an-innen {
  padding: var(--raum-4);
  display: flex; flex-direction: column; gap: var(--raum-3);
  overflow-y: auto;
}
.an-etikett { display: block; color: var(--tinte-3); font-size: var(--text-s); }
.an-feld {
  width: 100%; font: inherit; font-size: var(--text-m); color: var(--tinte);
  padding: var(--raum-3); background: var(--feld-auf-karte);
  border: var(--feld-rahmen); border-bottom: var(--feld-unterkante);
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}
.an-feld:focus { outline: 0; background: var(--flaeche); border-bottom-color: var(--signal); }
.an-mehrzeilig { resize: vertical; }
.an-zeitpaar { display: flex; gap: var(--raum-2); }
.an-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); }

/* Trefferliste der Kundensuche: eine Zeile ist ein Knopf, kein Link. */
.an-treffer { display: flex; flex-direction: column; }
.an-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--raum-1) var(--raum-3);
  padding: var(--raum-3) var(--raum-2); text-align: left;
  border: 0; border-bottom: var(--rand-staerke) solid var(--linie);
  background: none; color: var(--tinte); font: inherit; cursor: pointer;
  border-radius: var(--radius-klein);
}
.an-zeile:hover:not([disabled]) { background: var(--feld-auf-karte); }
.an-zeile .an-name { font-weight: var(--gewicht-halb); }
.an-zeile .an-nr { color: var(--tinte-3); font-family: var(--schrift-mono); font-size: var(--text-s); }
.an-zeile .an-ort { grid-column: 1; color: var(--tinte-3); font-size: var(--text-s); }
.an-neu .an-name { color: var(--signal); }

.an-zuletzt-block { display: flex; flex-direction: column; gap: var(--raum-2); }
.an-zuletzt, .an-wahl { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.an-kapsel {
  font: inherit; font-size: var(--text-s); color: var(--tinte-2);
  padding: var(--raum-2) var(--raum-3); cursor: pointer;
  background: transparent; border: var(--rand-staerke) solid var(--linie-2);
  border-radius: var(--radius-knopf);
}
.an-kapsel:hover { border-color: var(--tinte-3); color: var(--tinte); }
.an-kapsel.an-an { background: var(--tinte); border-color: var(--tinte); color: var(--flaeche); }

.an-kunde { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--raum-2); }
.an-kunde-name { font-size: var(--text-xl); font-weight: var(--gewicht-fett); letter-spacing: var(--eng); }
.an-kunde-ort { color: var(--tinte-3); font-size: var(--text-s); }

.an-trenner {
  color: var(--tinte-3); font-size: var(--text-s);
  border-bottom: var(--rand-staerke) solid var(--linie); padding-bottom: var(--raum-2);
}
.an-arten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-2); margin-top: var(--raum-3); }
.an-art {
  font: inherit; font-size: var(--text-m); font-weight: var(--gewicht-halb);
  text-align: center; padding: var(--raum-4) var(--raum-2); cursor: pointer;
  color: var(--tinte); background: transparent;
  border: var(--rand-staerke) solid var(--linie-2); border-radius: var(--radius-karte);
}
.an-art:hover { border-color: var(--signal); color: var(--signal); }

.an-fuss { display: flex; justify-content: flex-end; gap: var(--raum-2); padding-top: var(--raum-2); }
.an-k {
  font: inherit; font-size: var(--text-m); padding: var(--raum-2) var(--raum-4);
  cursor: pointer; color: var(--tinte); background: transparent;
  border: var(--rand-staerke) solid var(--linie-2); border-radius: var(--radius-knopf);
}
.an-k.an-haupt { background: var(--signal); border-color: var(--signal); color: var(--flaeche); }
.an-k[disabled] { opacity: .6; cursor: default; }

.an-hinweis, .an-laedt { color: var(--tinte-3); font-size: var(--text-s); }
.an-fehler, .an-fehler-zeile {
  color: var(--krit); font-size: var(--text-s);
  background: var(--krit-hauch); border-radius: var(--radius-klein);
  padding: var(--raum-2) var(--raum-3);
}

/* ── Kundenhistorie: Zeitleiste und Geräte ──────────────────────────────── */
.kh-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--tinte-3); font-size: var(--text-s);
  border-bottom: var(--rand-staerke) solid var(--linie); padding-bottom: var(--raum-2);
}
.kh-akte { border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--text-s); color: var(--tinte-3); }
.kh-akte:hover { color: var(--signal); }
.kh-liste, .kh-geraete { display: flex; flex-direction: column; }
.kh-zeile, .kh-geraet {
  display: grid; align-items: baseline; gap: var(--raum-1) var(--raum-3);
  grid-template-columns: 4.5rem 5.5rem minmax(0, 1fr) auto;
  padding: var(--raum-2); text-align: left; font: inherit; font-size: var(--text-m);
  border: 0; border-bottom: var(--rand-staerke) solid var(--linie);
  background: none; color: var(--tinte); border-radius: var(--radius-klein);
}
.kh-zeile { cursor: pointer; }
.kh-zeile:hover:not([disabled]) { background: var(--feld-auf-karte); }
.kh-zeile[disabled] { cursor: default; }
.kh-geraet { grid-template-columns: minmax(0, 1fr) auto auto; }
.kh-datum { color: var(--tinte-3); font-size: var(--text-s); font-variant-numeric: tabular-nums; }
.kh-art {
  font-size: var(--text-xs); color: var(--tinte-2); text-align: center; white-space: nowrap;
  background: var(--feld-auf-karte); border-radius: var(--radius-knopf); padding: 0 var(--raum-2);
}
.kh-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-nr { color: var(--tinte-3); font-family: var(--schrift-mono); font-size: var(--text-s); }
.kh-stand { color: var(--tinte-3); font-size: var(--text-s); white-space: nowrap; }
.kh-stand.kh-wartet { color: var(--warn); }
.kh-stand.kh-gut { color: var(--gut); }
.kh-leer, .kh-laedt { color: var(--tinte-3); font-size: var(--text-s); padding: var(--raum-2) 0; }
.kh-mehr { padding-top: var(--raum-2); }
.kh-fehler {
  color: var(--krit); font-size: var(--text-s);
  background: var(--krit-hauch); border-radius: var(--radius-klein); padding: var(--raum-2) var(--raum-3);
}

/* Handy: der Dialog nimmt die ganze Fläche, die Zeitleiste wird zweizeilig. */
@media (max-width: 30em) {
  .an-dlg {
    top: 0; left: 0; transform: none;
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
  .an-zwei { grid-template-columns: 1fr; }
  .kh-zeile { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .kh-zeile .kh-art { grid-row: 2; grid-column: 1; }
  .kh-zeile .kh-stand { grid-row: 2; grid-column: 2; text-align: right; }
}