/* Erreichbarkeit je Agent. Ohne Weiterleitung klingelt ein Agent nie -
   das war bisher nirgends zu sehen. */
.tln-erreich { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(148,163,184,.14); }
.tln-erreich-banner {
  padding: 11px 15px; margin-bottom: 16px; border-radius: 10px;
  background: rgba(245,158,11,.12); color: #f59e0b;
  font-size: 13px; font-weight: 700;
}
.tln-erreich-titel {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: #64748b; font-weight: 700; margin-bottom: 12px;
}
.tln-erreich-liste { display: flex; flex-direction: column; gap: 2px; }
.tln-erreich-zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 11px;
  transition: background .2s ease;
  animation: tln-auf .45s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--tln-delay, 0ms);
}
.tln-erreich-zeile:hover { background: rgba(148,163,184,.07); }
.tln-erreich-punkt {
  width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0;
}
.tln-erreich-punkt.ist-an { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.tln-erreich-punkt.ist-stumm { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.tln-erreich-text { flex: 1; min-width: 0; }
.tln-erreich-name {
  font-size: 13.5px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tln-erreich-nummer {
  font-size: 12px; color: #64748b;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.tln-spark {
  display: flex; align-items: flex-end; gap: 1.5px;
  width: 110px; height: 26px; flex-shrink: 0;
}
.tln-spark-bar {
  flex: 1; background: rgba(56,189,248,.55); border-radius: 1.5px;
  min-height: 2px;
}
.tln-spark-leer { opacity: .25; }
.tln-erreich-werte { width: 78px; text-align: right; flex-shrink: 0; }
.tln-erreich-zahl {
  font-size: 14px; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.tln-erreich-wann { font-size: 11px; color: #64748b; margin-top: 1px; }
.tln-erreich-marke {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; padding: 4px 9px; border-radius: 6px; flex-shrink: 0;
}
.tln-erreich-marke.ist-an { background: rgba(34,197,94,.14); color: #22c55e; }
.tln-erreich-marke.ist-stumm { background: rgba(245,158,11,.14); color: #f59e0b; }

@keyframes tln-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Kunden aufklappbar. Eine flache Agentenliste sagt nicht, wen man
   anrufen muss, wenn etwas haengt. */
.tln-kunden-liste { display: flex; flex-direction: column; gap: 8px; }
.tln-kunde-block {
  border: 1px solid rgba(148,163,184,.13); border-radius: 13px;
  overflow: hidden; background: rgba(148,163,184,.03);
}
.tln-kunde-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  transition: background .2s ease;
}
.tln-kunde-kopf::-webkit-details-marker { display: none; }
.tln-kunde-kopf:hover { background: rgba(148,163,184,.06); }
.tln-kunde-punkt {
  width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0;
}
.tln-kunde-punkt.ist-live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.tln-kunde-punkt.ist-wartet { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.15); }
.tln-kunde-punkt.ist-ueberfaellig { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.tln-kunde-punkt.ist-aus { background: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.15); }
.tln-kunde-name {
  flex: 1; font-size: 14px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tln-kunde-zahl { font-size: 12px; color: #64748b; flex-shrink: 0; }
.tln-kunde-offen {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: rgba(245,158,11,.14); color: #f59e0b; flex-shrink: 0;
}
.tln-kunde-pfeil {
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid #64748b; border-bottom: 1.5px solid #64748b;
  transform: rotate(45deg); transition: transform .25s ease;
}
.tln-kunde-block[open] .tln-kunde-pfeil { transform: rotate(-135deg); }
.tln-kunde-block[open] .tln-kunde-kopf {
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.tln-kunde-block .tln-erreich-liste { padding: 6px 8px 8px; }

.tln-erreich-unten { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.tln-erreich-grund {
  font-size: 11px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tln-erreich-punkt.ist-live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.tln-erreich-punkt.ist-wartet { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.16); }
.tln-erreich-punkt.ist-ueberfaellig { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.tln-erreich-punkt.ist-aus { background: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.16); }
.tln-erreich-marke.ist-live { background: rgba(34,197,94,.14); color: #22c55e; }
.tln-erreich-marke.ist-wartet { background: rgba(56,189,248,.14); color: #38bdf8; }
.tln-erreich-marke.ist-ueberfaellig { background: rgba(245,158,11,.14); color: #f59e0b; }
.tln-erreich-marke.ist-aus { background: rgba(100,116,139,.14); color: #94a3b8; }


/* Kundenkacheln sind anklickbar - ein Klick oeffnet das Dashboard
   dieses Kunden. Ohne sichtbaren Hinweis probiert das niemand aus. */
.tln-agent-card-klick { cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.tln-agent-card-klick:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.45);
  border-color: rgba(56,189,248,.4);
}
.tln-agent-card-klick:active { transform: translateY(0); }


/* Tafel zu einem Kunden, oeffnet sich unter den Kacheln. */
.tln-tafel-halter { margin-top: 22px; }
.tln-tafel {
  border: 1px solid rgba(56,189,248,.22); border-radius: 15px;
  background: rgba(56,189,248,.03); overflow: hidden;
  animation: tln-tafel-auf .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes tln-tafel-auf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tln-tafel-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.tln-tafel-kunde { font-size: 17px; font-weight: 700; color: #e2e8f0; }
.tln-tafel-quote { font-size: 12.5px; color: #64748b; }
.tln-tafel-kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: rgba(148,163,184,.1);
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.tln-tafel-kennzahl { padding: 15px 18px; background: #0f172a; }
.tln-tafel-wert {
  font-size: 21px; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.tln-tafel-label {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: #64748b; margin-top: 3px;
}
.tln-tafel .tln-erreich-liste { padding: 10px 12px; }
.tln-tafel-diagramme {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; padding: 6px 18px 20px;
}
.tln-tafel-diagramm {
  border: 1px solid rgba(148,163,184,.11);
  border-radius: 12px; padding: 14px;
}
.tln-tafel-titel {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #64748b; font-weight: 700; margin-bottom: 8px;
}
.tln-tafel-leer {
  padding: 30px 18px; text-align: center;
  font-size: 13px; color: #64748b;
}


/* Wartezeit bis zum ersten Anruf. Ein Balken sagt mehr als eine Zahl,
   weil die Ausreisser sofort auffallen. */
.tln-warte { display: flex; flex-direction: column; gap: 11px; padding: 6px 0; }
.tln-warte-zeile { display: flex; align-items: center; gap: 12px; }
.tln-warte-name {
  width: 128px; flex-shrink: 0; font-size: 12px; color: #94a3b8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tln-warte-spur {
  flex: 1; height: 7px; border-radius: 99px;
  background: rgba(148,163,184,.12); overflow: hidden;
}
.tln-warte-balken {
  display: block; height: 100%; border-radius: 99px;
  animation: tln-warte-auf .7s cubic-bezier(.16,1,.3,1) both;
}
.tln-warte-balken.ist-fertig { background: #22c55e; }
.tln-warte-balken.ist-offen {
  background: repeating-linear-gradient(
    45deg, #f59e0b, #f59e0b 5px, #d97706 5px, #d97706 10px);
}
@keyframes tln-warte-auf { from { width: 0 !important; } }
.tln-warte-wert {
  width: 46px; text-align: right; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.tln-warte-wert.ist-offen { color: #f59e0b; }


/* ── Postfach fuer TIA Pocket ────────────────────────────────── */
/*
   Das Textfeld braucht eine eigene Regel: `tln-input` hat eine feste
   Hoehe von 46 Pixeln, damit wird aus einem Textfeld eine Zeile.
   Uebernommen sind Rand, Hintergrund und Fokus von `tln-input`.
*/
.tln-textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 13px;
  outline: none;
  border: 1px solid var(--tln-border);
  border-radius: 10px;
  background: var(--tln-surface-2);
  color: var(--tln-text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
}
.tln-textarea:focus {
  border-color: rgba(96, 165, 250, .65);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
}
.tln-textarea::placeholder { color: var(--tln-muted); }

/* Zwei Auswahlfelder nebeneinander, wie in der Filterleiste. */
.tln-postfach-reihe {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .tln-postfach-reihe { grid-template-columns: 1fr; }
}


/* ── Postfach: Meldungen, Vorlagen, Textblock ────────────────── */
.tln-postfach-knopfreihe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.tln-postfach-meldung { font-size: 13px; }
.tln-meldung-gut { color: #22c55e; font-size: 13px; font-weight: 600; }
.tln-meldung-warnung { color: #f59e0b; font-size: 13px; font-weight: 600; }
.tln-meldung-fehler { color: #f43f5e; font-size: 13px; font-weight: 600; }

/* Der Bereich zum Pflegen der Vorlagen ist der Sonderfall, nicht der
   Regelfall - deshalb zugeklappt und zurueckhaltend. */
.tln-postfach-vorlagen {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tln-border);
}
.tln-postfach-mehr {
  cursor: pointer;
  color: var(--tln-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  list-style: none;
}
.tln-postfach-mehr::-webkit-details-marker { display: none; }
.tln-postfach-mehr:hover { color: var(--tln-text); }
.tln-postfach-mehr::before { content: "+ "; }
.tln-postfach-vorlagen[open] .tln-postfach-mehr::before { content: "\2212 "; }

/* Der volle Text einer verschickten Nachricht. Zeilenumbrueche
   bleiben erhalten - sie sind so geschrieben worden. */
.tln-postfach-text {
  white-space: pre-wrap;
  color: var(--tln-text);
  font-size: 13.5px;
  line-height: 1.65;
  padding: 12px 14px;
  margin: 6px 0 10px;
  background: var(--tln-surface-2);
  border-radius: 10px;
  border: 1px solid var(--tln-border);
}


/* ── Unterreiter ─────────────────────────────────────────────── */
/*
   `dcc.Tabs` verteilt seine Reiter ueber die volle Breite. Bei zwei
   Stueck sind das zwei riesige Flaechen - und weil die Reiter der
   oberen Leiste schmaler sind, wirkt es wie ein fremdes Bauteil.

   Deshalb: eigene Breite, kleiner, und der aktive traegt eine
   gefuellte Flaeche statt eines zweiten blauen Strichs. Zwei Ebenen
   sollen nicht dasselbe Zeichen benutzen.
*/
.tln-untertabs {
  display: inline-flex !important;
  width: auto !important;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--tln-border);
  border-radius: 12px;
}

/*
   Der Abstand gehoert an den Umschlag, nicht an die Leiste selbst:
   `dcc.Tabs` setzt seinen `parent_className` um das Ganze, und ein
   Aussenabstand am inneren Element bleibt dort wirkungslos.

   Oben ein Trennstrich - so liegt die zweite Ebene sichtbar unter der
   ersten und nicht daneben.
*/
.tln-workspace-tabs-wrap:has(.tln-untertabs) {
  margin: 22px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tln-border);
}

/* Fuer Browser ohne :has - dann wenigstens der Abstand nach unten. */
.tln-untertabs { margin-bottom: 4px; }

/* Die erste Flaeche nach den Unterreitern braucht keinen doppelten
   Abstand mehr. */
.tln-untertabs + .tln-table-panel,
.tln-workspace-tabs-wrap + div > .tln-table-panel:first-child {
  margin-top: 0 !important;
}
.tln-untertabs .tln-workspace-tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 128px;
  padding: 8px 18px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--tln-muted) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
}
.tln-untertabs .tln-workspace-tab:hover {
  color: var(--tln-text) !important;
  background: rgba(255, 255, 255, .04) !important;
}
.tln-untertabs .tln-workspace-tab-active {
  background: var(--tln-surface-3) !important;
  color: var(--tln-text) !important;
  border: 0 !important;
}
/* Der Strich gehoert der oberen Ebene. */
.tln-untertabs .tln-workspace-tab::after,
.tln-untertabs .tln-workspace-tab-active::after { display: none !important; }


/* Suchzeile: Feld links, Filter rechts. */
.tln-suchreihe {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 210px;
  gap: 12px;
  margin: 4px 0 16px;
}
.tln-suchreihe-eins { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .tln-suchreihe { grid-template-columns: 1fr; }
}


/* Der Zeitraum im Postfach ist schmaler als der in der Filterleiste. */
.tln-suchreihe + div .tln-datepicker { max-width: 340px; }


/* Drei Filter nebeneinander: Suche, Empfaenger, Zeitraum. */
.tln-suchreihe-drei {
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 220px) auto;
  align-items: center;
}
.tln-suchreihe-drei .tln-datepicker .DateRangePickerInput { min-height: 46px; }
.tln-suchreihe-drei .tln-datepicker .DateInput { width: 92px; }
.tln-suchreihe-drei .tln-datepicker .DateInput_input {
  height: 44px;
  font-size: 12.5px !important;
  text-align: center;
}
@media (max-width: 900px) {
  .tln-suchreihe-drei { grid-template-columns: 1fr; }
  .tln-suchreihe-drei .tln-datepicker .DateInput { width: 50%; }
}


/* Die aenderbaren Angaben in zwei Spalten. */
.tln-profil-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
  margin-top: 12px;
}
@media (max-width: 640px) {
  .tln-profil-gitter { grid-template-columns: 1fr; }
}


/* ── Kundenprofil ────────────────────────────────────────────── */

.tln-profil-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0 4px;
}
.tln-profil-kreis {
  width: 52px; height: 52px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(59,130,246,.12));
  border: 1px solid rgba(96,165,250,.30);
  color: #bfdbfe; font-size: 16px; font-weight: 800; letter-spacing: .04em;
  flex-shrink: 0;
}
.tln-profil-name {
  font-size: 17px; font-weight: 800; color: var(--tln-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tln-profil-mail { font-size: 12.5px; color: var(--tln-muted); margin-top: 3px; }
.tln-profil-marken { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tln-profil-zustand {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px; border: 1px solid;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

.tln-profil-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.tln-profil-kachel {
  padding: 14px 16px;
  background: var(--tln-surface-2);
  border: 1px solid var(--tln-border);
  border-radius: 14px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.tln-profil-kachel:hover {
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.35);
  background: var(--tln-surface-3);
}
.tln-profil-kachel-titel {
  font-size: 10px; font-weight: 700; color: var(--tln-muted);
  text-transform: uppercase; letter-spacing: .10em;
}
.tln-profil-kachel-wert {
  font-size: 17px; font-weight: 700; color: var(--tln-text); margin-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tln-profil-kachel-unter { font-size: 11.5px; color: var(--tln-muted); margin-top: 3px; }

/* Angaben nach Themen */
.tln-profil-gruppe {
  padding: 16px 0;
  border-top: 1px solid var(--tln-border);
}
.tln-profil-gruppe:first-child { border-top: 0; }
.tln-profil-gruppe-titel {
  font-size: 10.5px; font-weight: 700; color: var(--tln-muted);
  text-transform: uppercase; letter-spacing: .10em; margin-bottom: 4px;
}
.tln-profil-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}
@media (max-width: 640px) { .tln-profil-gitter { grid-template-columns: 1fr; } }

/* Was gerade geaendert wurde - waehrend des Tippens. */
.tln-profil-marken { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 2px; }
.tln-profil-marke {
  padding: 4px 10px; border-radius: 8px;
  background: rgba(245,158,11,.14); color: #f59e0b;
  font-size: 10.5px; font-weight: 700;
  animation: tln-auftauchen .18s ease;
}
@keyframes tln-auftauchen {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* Verlauf der Aenderungen */
.tln-profil-verlauf { margin-top: 8px; }
.tln-profil-verlauf-eintrag {
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--tln-surface-2);
  border: 1px solid var(--tln-border);
  border-radius: 12px;
  transition: border-color .16s ease;
}
.tln-profil-verlauf-eintrag:hover { border-color: rgba(96,165,250,.30); }
.tln-profil-verlauf-kopf {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
}
.tln-profil-punkt {
  width: 7px; height: 7px; border-radius: 4px; background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,.16);
}
.tln-profil-wann { font-size: 12.5px; font-weight: 700; color: var(--tln-text); }
.tln-profil-von { font-size: 11.5px; color: var(--tln-muted); margin-left: auto; }
.tln-profil-diff {
  font-size: 12.5px; color: var(--tln-muted);
  padding: 3px 0 3px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tln-erreich-zeile.ist-breit { display: block; }


/* ── Rueckfrage ──────────────────────────────────────────────── */
/*
   Ein eigener Kasten statt `window.confirm`. Der Browser-Dialog laesst
   sich nicht gestalten und sieht in einem dunklen Dashboard aus wie
   eine Fehlermeldung.
*/
.tln-rueckfrage {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 16, 31, .72);
  backdrop-filter: blur(6px);
  transition: opacity .18s ease;
}
.tln-rueckfrage.ist-zu { opacity: 0; pointer-events: none; }
.tln-rueckfrage.ist-auf { opacity: 1; }

.tln-rueckfrage-kasten {
  width: 100%;
  max-width: 480px;
  padding: 24px;
  background: var(--tln-surface);
  border: 1px solid var(--tln-border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  animation: tln-rueckfrage-auf .20s ease;
}
@keyframes tln-rueckfrage-auf {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.tln-rueckfrage-liste { margin: 16px 0 4px; }
.tln-rueckfrage-zeile {
  padding: 11px 13px;
  margin-bottom: 8px;
  background: var(--tln-surface-2);
  border: 1px solid var(--tln-border);
  border-radius: 11px;
}
.tln-rueckfrage-feld {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tln-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.tln-rueckfrage-werte {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tln-rueckfrage-alt {
  color: var(--tln-muted);
  font-size: 13.5px;
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, .5);
}
.tln-rueckfrage-pfeil { color: var(--tln-muted); font-size: 13px; }
.tln-rueckfrage-neu {
  color: #22c55e;
  font-size: 13.5px;
  font-weight: 700;
}

.tln-rueckfrage-knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}


/* ── Leuchtender Zeiger ──────────────────────────────────────── */
/*
   Punkt und Ring. Der Ring wird von cursor.js nach der
   Geschwindigkeit verformt - deshalb steht am Ring **keine**
   Uebergangszeit fuer `transform`: Sie wuerde gegen die Berechnung je
   Bild arbeiten und alles traege machen.

   Das Ausblenden des Systemzeigers haengt an `tln-eigener-zeiger`,
   und die Klasse setzt cursor.js erst, wenn der Ersatz steht.
*/
html.tln-eigener-zeiger,
html.tln-eigener-zeiger * { cursor: none !important; }

html.tln-eigener-zeiger input,
html.tln-eigener-zeiger textarea,
html.tln-eigener-zeiger [contenteditable="true"] { cursor: text !important; }

#tln-cursor-ring,
#tln-cursor-punkt {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  will-change: transform;
}

#tln-cursor-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ed4fd;
  transition: opacity .2s ease, width .14s ease, height .14s ease,
              border-radius .14s ease;
}

#tln-cursor-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(124, 196, 251, .55);
  /* Zurueckhaltend: Der vorige Schein war 180 Pixel breit - das ist
     kein Zeiger mehr, das ist Beleuchtung. */
  box-shadow: 0 0 10px rgba(59, 130, 246, .28),
              inset 0 0 8px rgba(59, 130, 246, .14);
  transition: opacity .2s ease, width .18s ease, height .18s ease,
              border-color .18s ease, background .18s ease;
}

/* Ueber anklickbaren Dingen geht der Ring auf und fuellt sich leicht.
   Der Hinweis "hier kann man druecken" muss bleiben. */
#tln-cursor-ring.ist-aktiv {
  width: 48px;
  height: 48px;
  border-color: rgba(150, 214, 255, .85);
  background: rgba(96, 165, 250, .10);
  box-shadow: 0 0 14px rgba(96, 165, 250, .35),
              inset 0 0 12px rgba(96, 165, 250, .16);
}

/* Beim Druecken zusammenziehen. */
#tln-cursor-ring.ist-gedrueckt {
  width: 24px;
  height: 24px;
  border-color: rgba(150, 214, 255, .95);
  background: rgba(96, 165, 250, .18);
}

/* In Eingabefeldern fuehrt der Textcursor. Der Ring verschwindet, der
   Punkt wird zum schmalen Balken. */
#tln-cursor-ring.ist-schreibend { opacity: 0 !important; }
#tln-cursor-punkt.ist-schreibend {
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: #9ed4fd;
  box-shadow: 0 0 7px rgba(124, 196, 251, .7);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #tln-cursor-ring,
  #tln-cursor-punkt { display: none !important; }
  html.tln-eigener-zeiger,
  html.tln-eigener-zeiger * { cursor: auto !important; }
}


/* Profilbild im Kundenprofil - an der Stelle der Initialen. */
.tln-profil-bild {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(96, 165, 250, .30);
  flex-shrink: 0;
  background: var(--tln-surface-2);
}


/* ── Gutscheine ──────────────────────────────────────────────
   Nur, was es noch nicht gibt. Alles Uebrige kommt von den
   Bausteinen des Kundenprofils und der Erreichbarkeit. */

.tln-gs-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tln-gs-meldung {
    margin-left: 14px;
    font-size: 13px;
    color: var(--tln-muted, #7d93a8);
}

/* Ein abgeschalteter Gutschein: sichtbar, aber zurueckgenommen. */
.tln-gs-aus {
    opacity: 0.55;
}


/* ── Gutscheine, Feinschliff ─────────────────────────────────── */

/* Das Paketfeld wuchs mit jeder Marke und schob das Formular
   auseinander. Feste Hoehe, innen rollen. */
/* Die Pfeilchen der Zahlenfelder gehoeren zum Browser, nicht
   hierher. */
/* Der Zustand als Marke - Farbe sagt, was Sache ist. */
.tln-gs-stand-aktiv      { color: #1f9d6b; }
.tln-gs-stand-aus        { opacity: .6; }
.tln-gs-stand-abgelaufen { color: #b4543a; opacity: .8; }
.tln-gs-stand-erschoepft { color: #9a7b28; opacity: .85; }

/* ══ Gutscheine ══════════════════════════════════════════════ */

/* Die Auswahlfelder legten sich uebereinander: Dash gibt dem
   geoeffneten Menue keine eigene Ebene, und das naechste Feld lag
   darueber. */
.tln-gs-feld .Select-menu-outer,
.tln-gs-feld .Select-menu {
    z-index: 900;
}
.tln-gs-feld {
    position: relative;
}

/* Die Marken der Pakete waren zu gross fuer ein Formularfeld. */
#gs-pakete .Select-value {
    font-size: 12px !important;
    line-height: 18px !important;
    padding: 1px 6px !important;
    margin: 2px 4px 2px 0 !important;
    border-radius: 5px !important;
}
#gs-pakete .Select-value-icon {
    padding: 0 4px !important;
    font-size: 12px !important;
}
#gs-pakete .Select-control {
    min-height: 40px;
    max-height: 78px;
    overflow-y: auto;
}

/* Code und Wuerfel nebeneinander. */
.tln-gs-codezeile {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tln-gs-codezeile .tln-input {
    flex: 1;
    min-width: 0;
}

/* Die Pfeilchen der Zahlenfelder gehoeren zum Browser. */
.tln-gs-feld input[type="number"]::-webkit-outer-spin-button,
.tln-gs-feld input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tln-gs-feld input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Die Knoepfe: dieselbe Gestalt wie ueberall sonst. */
.tln-gs-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.tln-gs-knopf:hover:not(:disabled) {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .24);
}
.tln-gs-knopf:disabled {
    opacity: .4;
    cursor: default;
}
.tln-gs-knopf--haupt {
    background: var(--tln-accent, #2f8fd4);
    border-color: transparent;
    color: #fff;
}
.tln-gs-knopf--haupt:hover:not(:disabled) {
    filter: brightness(1.08);
    background: var(--tln-accent, #2f8fd4);
}
.tln-gs-knopf--klein {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

/* Die Zeilen der Liste. */
.tln-gs-zeile {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    margin-bottom: 8px;
}
.tln-gs-zeile:hover {
    border-color: rgba(255, 255, 255, .14);
}
.tln-gs-code {
    font-family: ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}
.tln-gs-unter {
    font-size: 11px;
    opacity: .6;
    margin-top: 3px;
}
.tln-gs-wert {
    font-size: 13px;
    font-weight: 600;
}
.tln-gs-etikett {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
    margin-top: 3px;
}
.tln-gs-marke {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.tln-gs-marke--aktiv      { background: rgba(31,157,107,.16); color: #3fbd8a; }
.tln-gs-marke--aus        { background: rgba(255,255,255,.08); opacity: .7; }
.tln-gs-marke--abgelaufen { background: rgba(180,84,58,.16);  color: #d2795c; }
.tln-gs-marke--erschoepft { background: rgba(154,123,40,.16); color: #c9a446; }

@media (max-width: 900px) {
    .tln-gs-zeile {
        grid-template-columns: 1fr 1fr;
    }
}

}



/* Auch die Bereiche unter TIA Pocket halten ihren Platz. */

/* Die Liste der Gutscheine nicht zusammenklappen lassen, waehrend
   sie neu geholt wird. */

/* Dash zeichnet waehrend eines Rueckrufs einen Schleier ueber den
   Bereich. Der ist hier unnoetig unruhig. */
.dash-loading,
._dash-loading,
._dash-loading-callback {
    display: none !important;
}
*[data-dash-is-loading="true"] {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ══ Uebergaenge ═════════════════════════════════════════════

   Das schwarze Blinken entsteht, weil zwischen Entfernen und
   Einsetzen kurz nichts da ist und der dunkle Grund der Seite
   durchscheint.

   Mindesthoehen halfen nicht: Ein Bereich auf `display: none` hat
   keine Hoehe, und die Seite wurde davon nur traeger.

   Was hilft: ein eigener Grund am Inhalt selbst, damit nie die
   Seite dahinter zu sehen ist - und eine kurze Bewegung, damit der
   Wechsel gewollt wirkt statt zufaellig. */

#dashboard-content {
    background: var(--tln-bg, transparent);
}



/* Wer es nicht mag, bekommt es nicht. */
@media (prefers-reduced-motion: reduce) {
    #pocket-bereich-uebersicht,
    #pocket-bereich-postfach,
    #pocket-bereich-profil,
    #pocket-bereich-gutscheine,
    #dashboard-content > * {
        animation: none;
    }
}

/* Die Reiter selbst sollen beim Umschalten nicht springen. */
.tln-workspace-tab {
    transition: color .12s ease, background-color .12s ease;
}




/* ══ Der Wechsel zwischen den Reitern ════════════════════════

   Das schwarze Blinken kam aus meiner eigenen Animation:

       animation: tln-wechsel .34s ... both;

   `both` legt den Anfangszustand schon **vor** dem Lauf an - also
   Deckkraft null. Mit Verzoegerungen bis 140 Millisekunden war der
   ganze Bereich so lange unsichtbar, und man sah den dunklen Grund
   der Seite.

   Jetzt haelt der Bereich seinen Platz und bleibt sichtbar. Bewegt
   wird nur, was darin steht - ohne `both`, damit zu keinem Zeitpunkt
   nichts da ist. */

#dashboard-content {
    /* Der Platz bleibt offen, waehrend getauscht wird. Ohne das
       klappt die Seite zusammen und springt. */
    min-height: 70vh;
}

/* Die Bereiche selbst: **keine** Animation. Sie sind der Grund, vor
   dem sich etwas bewegt - wenn sie selbst verschwinden, ist da
   nichts mehr. */
#pocket-bereich-uebersicht,
#pocket-bereich-postfach,
#pocket-bereich-profil,
#pocket-bereich-gutscheine {
    animation: none;
}

/* Was darin steht, ruckt nach oben herein. Ohne `both`: Die
   Animation faengt bei ihrem eigenen Beginn an, nicht schon
   vorher. */
#pocket-bereich-uebersicht > *,
#pocket-bereich-postfach > *,
#pocket-bereich-profil > *,
#pocket-bereich-gutscheine > *,
#dashboard-content > * {
    animation: tln-wechsel .3s cubic-bezier(.16, 1, .3, 1);
}

@keyframes tln-wechsel {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Die Reiter weich, nicht sprunghaft. */
.tln-workspace-tab {
    transition: color .16s ease,
                background-color .22s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    #pocket-bereich-uebersicht > *,
    #pocket-bereich-postfach > *,
    #pocket-bereich-profil > *,
    #pocket-bereich-gutscheine > *,
    #dashboard-content > * {
        animation: none !important;
    }
}

/* ══ Antraege auf eine neue Adresse ══════════════════════════ */

.tln-antrag-zeile {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 1.4fr auto;
    gap: 16px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .07);
    margin-bottom: 8px;
}
.tln-antrag-zeile:hover {
    border-color: rgba(255, 255, 255, .14);
}

/* Alt und neu untereinander: Sie unterscheiden sich oft nur in
   einem Wort, und nebeneinander liest man darueber hinweg. */
.tln-antrag-alt {
    font-size: 12px;
    opacity: .55;
    text-decoration: line-through;
}
.tln-antrag-neu {
    font-size: 13px;
    font-weight: 700;
    margin-top: 3px;
}

.tln-antrag-knoepfe {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .tln-antrag-zeile { grid-template-columns: 1fr; }
    .tln-antrag-knoepfe { justify-content: flex-start; }
}