/* ============================================================================
   ThurData CI 2030 — Kundenbereich (App)
   ----------------------------------------------------------------------------
   VERSION 20260925f   <- bei JEDER Aenderung hochzaehlen. Derselbe Wert in
   --tda-app-version (:root) und im Cache-Stempel ?v={$ciVer}, gesetzt in
   thurdata/ci-version.tpl (EINZIGE Stelle).
   Quelle ist diese Datei; ausgeliefert wird die Kopie unter
   whmcsCrosterTemplates -> thurdata/css/ci-2030-app.css. Hintergrund: homepage#71.
   ----------------------------------------------------------------------------
   V1, 17.09.2026 (ROKA). Erweiterung des Frontend-CI fuer den Kundenbereich:
   WHMCS-Clientarea, Produktverwaltung (ThurVDC/VM-Ansicht, ThurWeb-Kontroll-
   zentrum, Domains/DNS), spaeter Bestellstrecke.

   Baut auf ci-2030-base.css auf und wird NACH ihr geladen. Tokens, Typografie,
   Buttons, Formulare (Base §13), Tabellen und Badges kommen von dort — hier
   steht nur, was eine Anwendung zusaetzlich braucht: Shell, Seitenleiste,
   Seitenkopf, Kennzahlen, Aktionsleiste, Reiter, Panels, Status, Hinweise,
   Datentabellen mit Zeilenaktionen, Kurvenflaechen, Schieberegler.

   Vorbild: die VM-Ansicht des ThurVDC (clientarea productdetails id=597,
   mg-page=vm) — ihre Struktur ist gut (Kennzahlen -> Aktionen -> Reiter ->
   Panels), ihre Optik gehoert dem Modul (Bootstrap-Blau, Vollbreite-Speichern,
   drei Grautoene). Uebernommen wird die Struktur, ersetzt wird die Optik.

   Praefix .tda- (ThurData App), damit nichts mit Bootstrap 3 / Croster /
   ModulesGarden im Kundenbereich kollidiert (.panel, .nav-tabs, .label, .badge
   sind dort alle schon belegt).

   Grundsaetze (aus dem Frontend-CI abgeleitet):
     * Eine Anwendung ist ruhiger als eine Verkaufsseite: kleinere Typo-Skala
       (H1 28 px), 14.5-px-Grundschrift in Tabellen/Panels, kein Hero, keine
       Buehne, kein Dunkel/Hell-Rhythmus — EINE helle Arbeitsflaeche
       (--td-light) mit weissen Panels.
     * Orange bleibt Handlung: genau EINE Primaeraktion je Ansicht (Speichern,
       Erstellen, Bestellen). Die Aktionsleiste (Start/Stop/Neustart) ist
       Secondary/Text. Zerstoerendes (Loeschen) ist rot, nie orange.
     * Primary Blau = Status, Auswahl, aktiver Reiter, aktiver Menuepunkt,
       Fortschrittsbalken. Fuellt sich ein Balken ueber 85 %, wird er rot —
       nicht orange (Orange ist kein Warnsignal, sondern ein Knopf).
     * Status hat immer Farbe UND Wort (Punkt + Text). Nie nur ein Punkt.
     * Formulare wie im Frontend (Base §13). Knopfzeile am Ende, rechts,
       nie ein vollbreiter Balken.
   ============================================================================ */

:root{
  /* Fassung dieser Datei — im Browser auslesbar. MUSS zum Kopf passen. */
  --tda-app-version: "20260925f";

  --tda-sidebar-w: 260px;
  --tda-bar-h: 60px;
  --tda-content-max: 1400px;      /* Arbeitsflaeche darf breiter als 1180 */
  --tda-panel-pad: 20px;
  --tda-panel-head: var(--td-dark);   /* Panelkopf dunkel wie die Kopfzeile der Frontend-Tabellen */
  --tda-panel-line: #8A97A6;          /* Panelrahmen: deutlich, aber nicht schwarz */
  --tda-ok:      var(--td-success);
  --tda-error:   var(--td-error);
  --tda-pending: var(--td-secondary);
  --tda-off:     #8A97A6;         /* gestoppt / inaktiv: grau, kein Rot */
  --tda-chart-1: var(--td-primary);
  --tda-chart-2: var(--td-secondary);
  --tda-chart-3: #3FA66A;
  --tda-chart-4: #C9A227;
}

/* ------------------------------------------------------------ 1. Shell */
.tda-body{background:var(--td-light);color:var(--td-text);min-height:100vh}

.tda-bar{
  position:sticky;top:0;z-index:50;height:var(--tda-bar-h);
  background:var(--td-dark);color:#fff;display:flex;align-items:center;
  padding-inline:var(--td-page-gutter);gap:18px;
}
.tda-bar .tda-logo{font-weight:700;font-size:19px;color:#fff;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.tda-bar .tda-logo span{color:var(--td-secondary)}
.tda-bar .tda-logo small{display:block;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--td-dark-muted);margin-top:-2px}
.tda-bar-area{font-size:13px;color:var(--td-dark-muted);padding-left:18px;border-left:1px solid rgba(255,255,255,.14)}
.tda-bar-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.tda-bar-tools a,.tda-bar-tools button{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;
  border:0;background:transparent;color:rgba(255,255,255,.72);font:inherit;font-size:13px;
  border-radius:var(--td-radius-sm);text-decoration:none;cursor:pointer;
}
.tda-bar-tools a:hover,.tda-bar-tools button:hover{color:#fff;background:rgba(255,255,255,.08)}
.tda-bar-tools svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-bar-tools .tda-count{
  min-width:16px;height:16px;padding:0 4px;border-radius:var(--td-radius-pill);
  background:var(--td-primary);color:#fff;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.tda-bar-user{display:inline-flex;align-items:center;gap:8px;color:#fff !important}
.tda-avatar{width:28px;height:28px;border-radius:50%;background:var(--td-primary);color:#fff;
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.tda-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:0;
  background:transparent;color:#fff;border-radius:var(--td-radius-sm);cursor:pointer;margin-left:-8px}
.tda-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.tda-burger:hover{background:rgba(255,255,255,.08)}

.tda-layout{
  display:grid;grid-template-columns:var(--tda-sidebar-w) minmax(0,1fr);
  max-width:var(--tda-content-max);margin-inline:auto;
  padding-inline:var(--td-page-gutter);gap:32px;
}

/* ------------------------------------------------------- 2. Seitenleiste */
.tda-side{padding-block:28px 48px;position:sticky;top:var(--tda-bar-h);align-self:start;max-height:calc(100vh - var(--tda-bar-h));overflow:auto}
.tda-side-group{margin-bottom:22px}
.tda-side-group>h3{
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--td-subtle);margin:0 0 6px;padding:0 12px;
}
.tda-side a{
  display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;
  border-radius:var(--td-radius-sm);color:var(--td-body);font-size:14.5px;
  text-decoration:none;font-weight:400;
}
.tda-side a svg{width:18px;height:18px;flex:none;stroke:var(--td-subtle);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-side a:hover{background:#fff;color:var(--td-text)}
.tda-side a:hover svg{stroke:var(--td-primary)}
.tda-side a.is-active{background:#fff;color:var(--td-primary);font-weight:700;box-shadow:inset 3px 0 0 var(--td-primary)}
.tda-side a.is-active svg{stroke:var(--td-primary)}
.tda-side a .tda-status-dot{margin-left:auto}
.tda-side a.is-danger{color:var(--tda-error)}
.tda-side a.is-danger svg{stroke:var(--tda-error)}

/* ---------------------------------------------------------- 3. Inhalt */
.tda-main{padding-block:28px 64px;min-width:0}

.tda-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--td-subtle);margin:0 0 10px;padding:0;list-style:none}
.tda-crumbs li+li::before{content:"/";margin-right:6px;color:var(--td-line-strong)}
.tda-crumbs a{color:var(--td-muted);text-decoration:none}
.tda-crumbs a:hover{color:var(--td-primary)}

.tda-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.tda-page-head h1{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.015em;margin:0}
.tda-page-head .tda-sub{font-size:14px;color:var(--td-muted);margin:6px 0 0}
.tda-page-head .btn-row{margin:0}

/* Objektkopf: Name, Status, Meta — die Zeile ueber den Kennzahlen */
.tda-object{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.tda-object h2{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em}
.tda-object .tda-meta{font-size:13px;color:var(--td-muted)}
.tda-object .tda-meta b{color:var(--td-body);font-weight:500}

/* ------------------------------------------------------------ 4. Status */
.tda-status{
  display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px;
  border-radius:var(--td-radius-pill);border:1px solid var(--td-line-strong);
  background:#fff;font-size:12.5px;font-weight:700;color:var(--td-body);white-space:nowrap;
}
.tda-status-dot{width:8px;height:8px;border-radius:50%;background:var(--tda-off);flex:none}
.tda-status.is-ok .tda-status-dot,.tda-status-dot.is-ok{background:var(--tda-ok)}
.tda-status.is-error .tda-status-dot,.tda-status-dot.is-error{background:var(--tda-error)}
.tda-status.is-pending .tda-status-dot,.tda-status-dot.is-pending{background:var(--tda-pending)}
.tda-status.is-off .tda-status-dot,.tda-status-dot.is-off{background:var(--tda-off)}
.tda-status.is-error{color:var(--tda-error);border-color:rgba(179,38,30,.35)}
@keyframes tda-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tda-status.is-pending .tda-status-dot{animation:tda-pulse 1.4s ease-in-out infinite}

/* ------------------------------------------------------- 5. Kennzahlen */
.tda-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.tda-kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tda-kpi{background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);padding:14px 16px 12px}
.tda-kpi-label{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--td-subtle);margin:0 0 6px}
.tda-kpi-value{font-size:18px;font-weight:700;color:var(--td-text);line-height:1.2;margin:0}
.tda-kpi-value small{font-size:13px;font-weight:400;color:var(--td-muted);margin-left:4px}
.tda-kpi .tda-bar-meter{margin-top:10px}

/* Fortschritt/Auslastung: 4 px, Primary; ueber 85 % rot (nie orange) */
.tda-bar-meter{height:4px;background:var(--td-line);border-radius:var(--td-radius-pill);overflow:hidden}
.tda-bar-meter>i{display:block;height:100%;background:var(--td-primary);border-radius:inherit;width:var(--w,0%)}
.tda-bar-meter.is-high>i{background:var(--tda-error)}

/* ---------------------------------------------------- 6. Aktionsleiste */
.tda-actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);
  padding:6px 8px;margin-bottom:18px;
}
.tda-actions a,.tda-actions button{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;
  border:0;background:transparent;border-radius:var(--td-radius-sm);
  font:inherit;font-size:14px;font-weight:500;color:var(--td-body);cursor:pointer;text-decoration:none;
}
.tda-actions svg{width:17px;height:17px;stroke:var(--td-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-actions a:hover,.tda-actions button:hover{background:var(--td-light);color:var(--td-text)}
.tda-actions a:focus-visible,.tda-actions button:focus-visible{box-shadow:var(--td-field-ring)}
.tda-actions .is-danger{color:var(--tda-error)}
.tda-actions .is-danger svg{stroke:var(--tda-error)}
.tda-actions .is-danger:hover{background:rgba(179,38,30,.06)}
.tda-actions [disabled],.tda-actions .is-disabled{color:var(--td-subtle);cursor:not-allowed}
.tda-actions [disabled] svg,.tda-actions .is-disabled svg{stroke:var(--td-subtle)}
.tda-actions .tda-sep{width:1px;height:22px;background:var(--td-line);margin:0 6px}
.tda-actions .tda-push{margin-left:auto}

/* ------------------------------------------------------------ 7. Reiter */
.tda-tabs{display:flex;gap:2px;border-bottom:1px solid var(--td-line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tda-tabs::-webkit-scrollbar{display:none}
.tda-tabs a{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;
  font-size:14px;font-weight:500;color:var(--td-muted);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px;
}
.tda-tabs a:hover{color:var(--td-text)}
.tda-tabs a.is-active{color:var(--td-primary);font-weight:700;border-bottom-color:var(--td-primary)}
.tda-tabs a .tda-count{background:var(--td-light);color:var(--td-muted);font-size:11px;font-weight:700;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--td-radius-pill);display:inline-flex;align-items:center;justify-content:center}
.tda-tabs a.is-active .tda-count{background:rgba(27,95,143,.1);color:var(--td-primary)}

/* ------------------------------------------------------------ 8. Panel */
/* Dunkler Kopf (--td-dark, weisse Schrift) und 1.5-px-Rahmen: auf der hellen
   Arbeitsflaeche hoben sich Panels mit hellem Kopf und --td-line zu wenig voneinander
   ab — auch ein hellgrauer Kopf reichte nicht (ROKA, Kontrollzentrum 17.09.2026).
   Damit hat der Kundenbereich dieselbe Kopfzeilen-Sprache wie die Frontend-Tabellen. */
.tda-panel{background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);margin-bottom:20px;min-width:0;overflow:hidden}
.tda-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px var(--tda-panel-pad);
  background:var(--tda-panel-head);color:#fff;
}
.tda-panel-head h3{font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin:0}
/* Werkzeuge im dunklen Kopf: Textlinks weiss, Primaerknopf bleibt orange */
.tda-panel-head .btn-text{color:#fff}
.tda-panel-head .btn-text:hover{color:var(--td-accent)}
.tda-panel-head .btn-secondary{background:transparent;border-color:rgba(255,255,255,.78);color:#fff}
.tda-panel-head .td-small,.tda-panel-head .td-optional{color:var(--td-dark-muted) !important}
.tda-panel-head .tda-panel-tools{display:flex;gap:4px;align-items:center}
.tda-panel-body{padding:var(--tda-panel-pad)}
.tda-panel-body>.td-field:last-child{margin-bottom:0}
.tda-panel-foot{padding:12px var(--tda-panel-pad);border-top:1px solid var(--td-line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.tda-panel--flush .tda-panel-body{padding:0}
.tda-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.tda-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.tda-grid-2--wide{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}   /* Uebersicht: links breiter */

/* Kleiner Aktionslink im Panelkopf (HINZUFUEGEN, BEARBEITEN) */
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn-icon{gap:7px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Loeschen ist rot, nie orange — auch als Knopf */
.btn-danger{background:#fff;border-color:rgba(179,38,30,.45);color:var(--tda-error)}
.btn-danger:hover{background:rgba(179,38,30,.06);border-color:var(--tda-error);color:var(--tda-error)}
.btn-danger:focus-visible{box-shadow:0 0 0 3px rgba(179,38,30,.14)}

/* ------------------------------------------ 9. Formular-Ergaenzungen App */
.tda-hint{
  display:inline-flex;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--td-line-strong);
  color:var(--td-subtle);font-size:10.5px;font-weight:700;align-items:center;justify-content:center;
  margin-left:6px;vertical-align:1px;cursor:help;
}
.tda-hint:hover{border-color:var(--td-primary);color:var(--td-primary)}
label .tda-hint{font-weight:700}

/* Schieberegler: nativ, in Primary; Wert steht rechts in der Beschriftungszeile */
input[type="range"]{width:100%;height:24px;margin:0;padding:0;background:transparent;border:0;accent-color:var(--td-primary);cursor:pointer}
input[type="range"]:focus{box-shadow:none;outline:none}
input[type="range"]:focus-visible{box-shadow:var(--td-field-ring);border-radius:var(--td-radius-pill)}
.tda-range-head{display:flex;justify-content:space-between;align-items:baseline}
.tda-range-head output{font-size:14px;font-weight:700;color:var(--td-primary);font-variant-numeric:tabular-nums}
.tda-range-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--td-subtle);margin-top:2px}

/* Eingabe mit Einheit rechts (GB, Stunden) */
.tda-input-unit{position:relative}
.tda-input-unit input{padding-right:52px}
.tda-input-unit span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--td-subtle);pointer-events:none}

/* Passwortfeld mit Anzeigen-Knopf */
.tda-input-btn{display:flex;gap:8px}
.tda-input-btn input{flex:1 1 auto;min-width:0}

/* Speichern-Zeile: rechts, EINE Primaeraktion, Verwerfen als Text */
.tda-save{
  position:sticky;bottom:0;z-index:5;margin-top:20px;
  background:rgba(245,247,250,.92);backdrop-filter:blur(6px);
  border-top:1px solid var(--td-line);padding:12px 0;
  display:flex;justify-content:flex-end;align-items:center;gap:12px;
}
.tda-save .tda-save-note{margin-right:auto;font-size:13px;color:var(--td-muted)}
/* Kurze Formulare (Ticket, Anfrage) brauchen keine klebende Zeile — sie steht am Ende. */
.tda-save--static{position:static;background:transparent;backdrop-filter:none;border-top:1px solid var(--td-line)}

/* -------------------------------------------------- 10. Datentabelle App */
/* Ergaenzt .td-table aus dem Base: kompakter, sortierbarer Kopf, Zeilen-
   aktionen, Auswahl, Seitenwechsel. Heller Kopf (nicht dunkel): in einer
   Anwendung stehen viele Tabellen untereinander, dunkle Koepfe wuerden das
   Bild zerhacken. */
.td-table.tda-table{border:0;font-size:14px}
.tda-table thead th{
  background:#fff;color:var(--td-subtle);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--td-line-strong);
  padding:10px 16px;white-space:nowrap;
}
.tda-table thead th.is-sorted{color:var(--td-primary)}
.tda-table thead th .tda-sort{display:inline-block;margin-left:5px;font-size:10px;vertical-align:1px}
.tda-table tbody th,.tda-table tbody td{padding:11px 16px;vertical-align:middle;background:transparent}
.tda-table tbody th{color:var(--td-text);font-weight:500;background:transparent}
.tda-table td.is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tda-table td.is-muted{color:var(--td-muted)}
.tda-table code{font-size:13px;background:var(--td-light);padding:2px 6px;border-radius:4px}
@media (hover:hover){.tda-table tbody tr:hover th,.tda-table tbody tr:hover td{background:var(--td-light)}}
.tda-table tr.is-selected th,.tda-table tr.is-selected td{background:rgba(27,95,143,.06)}
.tda-table .tda-row-actions{display:flex;gap:2px;justify-content:flex-end;opacity:.55;transition:opacity var(--td-transition)}
@media (hover:hover){.tda-table tbody tr:hover .tda-row-actions{opacity:1}}
/* :not(.btn) ist Pflicht (dieselbe Falle wie bei .td-table a im Base): die Icon-Regel
   (0,3,1) wuerde sonst einen echten .btn-primary in der Zeile entfaerben. */
.tda-table .tda-row-actions a:not(.btn),.tda-table .tda-row-actions button:not(.btn){
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:var(--td-radius-sm);color:var(--td-muted);cursor:pointer;
}
.tda-table .tda-row-actions svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-table .tda-row-actions a:not(.btn):hover,.tda-table .tda-row-actions button:not(.btn):hover{background:var(--td-light);color:var(--td-primary)}
.tda-table .tda-row-actions .is-danger:hover{color:var(--tda-error);background:rgba(179,38,30,.06)}
/* Ein echter Knopf in der Zeilenaktion (Bezahlen, Verlaengern) ist immer voll sichtbar */
.tda-table .tda-row-actions .btn{width:auto;height:auto;min-height:32px;padding:0 12px;font-size:13px}
.tda-table .tda-row-actions:has(.btn){opacity:1}
.tda-table td.is-check,.tda-table th.is-check{width:40px;padding-right:0}
.tda-table-empty{padding:36px var(--tda-panel-pad);text-align:center;color:var(--td-muted);font-size:14px}
.tda-table-empty strong{display:block;color:var(--td-text);margin-bottom:4px}

.tda-pager{display:flex;align-items:center;gap:6px;padding:10px var(--tda-panel-pad);border-top:1px solid var(--td-line);font-size:13px;color:var(--td-muted)}
.tda-pager a{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--td-radius-sm);color:var(--td-muted);text-decoration:none}
.tda-pager a:hover{background:var(--td-light);color:var(--td-primary)}
.tda-pager a.is-active{background:rgba(27,95,143,.1);color:var(--td-primary);font-weight:700}
.tda-pager .tda-push{margin-left:auto;display:flex;gap:6px;align-items:center}
.tda-pager select{min-height:30px;padding:0 30px 0 10px;font-size:13px;width:auto;background-position:right 8px center}

/* ---------------------------------------------------------- 11. Hinweise */
.tda-notice{
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin-bottom:18px;
  border-radius:var(--td-radius-lg);border:1.5px solid var(--tda-panel-line);background:#fff;
  border-left:4px solid var(--td-primary);font-size:14px;color:var(--td-body);
}
.tda-notice svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:var(--td-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-notice strong{color:var(--td-text)}
.tda-notice p{margin:0}
.tda-notice.is-ok{border-left-color:var(--tda-ok)} .tda-notice.is-ok svg{stroke:var(--tda-ok)}
.tda-notice.is-error{border-left-color:var(--tda-error);background:rgba(179,38,30,.04)} .tda-notice.is-error svg{stroke:var(--tda-error)}
.tda-notice.is-pending{border-left-color:var(--tda-pending)} .tda-notice.is-pending svg{stroke:var(--tda-pending)}
.tda-notice .btn{margin-left:auto;flex:none}

/* ---------------------------------------------------- 12. Kurvenflaechen */
/* Kleine Verlaufsdiagramme (Sparklines) und Karten: eine Linie je Reihe,
   Primary/Secondary/Gruen/Ocker, keine Fuellung, Raster in --td-line.
   Zahlen stehen als Text daneben — die Kurve ist Orientierung, nicht Beleg. */
.tda-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tda-chart{border:1px solid var(--td-line);border-radius:var(--td-radius-lg);padding:12px 14px 10px;background:#fff}
.tda-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tda-chart-head .tda-kpi-label{margin:0}
.tda-chart-head b{font-size:14px;color:var(--td-text);font-variant-numeric:tabular-nums}
.tda-chart svg{display:block;width:100%;height:64px;overflow:visible}
.tda-chart .grid{stroke:var(--td-line);stroke-width:1}
.tda-chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tda-chart .line-1{stroke:var(--tda-chart-1)} .tda-chart .line-2{stroke:var(--tda-chart-2)}
.tda-chart .line-3{stroke:var(--tda-chart-3)} .tda-chart .line-4{stroke:var(--tda-chart-4)}
.tda-legend{display:flex;gap:14px;font-size:12px;color:var(--td-muted);margin-top:6px}
.tda-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ------------------------------------------------------- 13. Kennwerte */
/* Schluessel-Wert-Zeilen im Panel (Registrierungsdatum, Betrag …) —
   dieselbe Sprache wie .td-facts im Frontend, kompakter. */
.tda-kv{margin:0;padding:0;list-style:none}
.tda-kv li{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--td-line);font-size:14px}
.tda-kv li:last-child{border-bottom:0}
.tda-kv li span:first-child{color:var(--td-muted)}
.tda-kv li span:last-child{color:var(--td-text);font-weight:700;text-align:right}

/* ------------------------------------------------------- 14. Dienste */
/* Dienstkarte in der Uebersicht: Produkt, Kennung, Status, naechste Faelligkeit */
.tda-service{display:flex;align-items:center;gap:16px;padding:14px var(--tda-panel-pad);border-bottom:1px solid var(--td-line);text-decoration:none;color:inherit}
.tda-service:last-child{border-bottom:0}
.tda-service:hover{background:var(--td-light)}
.tda-service .tda-service-ico{width:38px;height:38px;border-radius:var(--td-radius-sm);background:var(--td-blue);display:flex;align-items:center;justify-content:center;flex:none}
.tda-service .tda-service-ico svg{width:20px;height:20px;stroke:var(--td-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-service b{display:block;font-size:15px;color:var(--td-text)}
.tda-service small{font-size:13px;color:var(--td-muted)}
.tda-service .tda-push{margin-left:auto;display:flex;align-items:center;gap:14px}
.tda-service .tda-due{font-size:13px;color:var(--td-muted);white-space:nowrap}

/* ------------------------------------------------------- 15. Responsive */
@media (max-width:1023px){
  .tda-layout{grid-template-columns:1fr;gap:0}
  .tda-side{
    position:fixed;inset:var(--tda-bar-h) auto 0 0;width:min(320px,88vw);z-index:60;
    background:#fff;border-right:1px solid var(--td-line);padding:20px 12px 40px;
    transform:translateX(-100%);transition:transform .2s ease;max-height:none;overflow:auto;
  }
  .tda-side.is-open{transform:none;box-shadow:var(--td-shadow-interaction)}
  .tda-side a:hover,.tda-side a.is-active{background:var(--td-light)}
  .tda-burger{display:inline-flex}
  .tda-bar-area{display:none}
  .tda-kpis,.tda-kpis--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tda-grid-2,.tda-grid-3,.tda-grid-2--wide{grid-template-columns:1fr}
  .tda-charts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .tda-main{padding-block:20px 48px}
  .tda-page-head h1{font-size:24px}
  .tda-object h2{font-size:19px}
  .tda-kpi-value{font-size:16px}
  .tda-actions{gap:2px;padding:4px}
  .tda-actions a,.tda-actions button{padding:0 10px;font-size:13px}
  .tda-actions .tda-sep{display:none}
  .tda-charts{grid-template-columns:1fr}
  .tda-service{flex-wrap:wrap}
  .tda-service .tda-push{margin-left:54px;width:100%}
  .tda-save{padding:10px 0}
  .tda-save .tda-save-note{display:none}
  /* Leiste: Telefon und Name weg, Werkzeuge enger — sonst ragt die Leiste
     ueber 375 px hinaus (gemessen 435 px). */
  .tda-bar{gap:10px}
  .tda-bar .tda-logo small{display:none}
  .tda-bar-tools{gap:0}
  .tda-bar-tools a,.tda-bar-tools button{padding:0 7px}
  .tda-bar-tools>a:first-child{display:none}
  .tda-bar-tools .tda-bar-user>span:last-child{display:none}
  .tda-table thead{display:none}
  .tda-table tbody tr{display:block;padding:8px 0;border-bottom:1px solid var(--td-line)}
  .tda-table tbody th,.tda-table tbody td{display:flex;justify-content:space-between;gap:12px;padding:5px 16px;border:0;text-align:right}
  .tda-table tbody th::before,.tda-table tbody td::before{content:attr(data-label);color:var(--td-subtle);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;text-align:left}
  .tda-table td.is-num{text-align:right}
  .tda-table .tda-row-actions{opacity:1;justify-content:flex-start}
}

/* ---------------------------------------------- 16. Uebersicht und Listen */
/* Zaehler-Kachel als Link (Kontrollzentrum): Zahl gross, Wort darunter. */
.tda-kpi--link{display:block;text-decoration:none;color:inherit;transition:border-color var(--td-transition)}
.tda-kpi--link:hover{border-color:var(--td-primary)}
.tda-kpi--link .tda-kpi-value{font-size:30px;line-height:1;margin-top:4px}
.tda-kpi--link .tda-kpi-label{margin:0}
.tda-kpi--link .tda-kpi-hint{font-size:13px;color:var(--td-muted);margin:8px 0 0}
.tda-kpi--link.is-error{border-color:rgba(179,38,30,.35)}
.tda-kpi--link.is-error .tda-kpi-value{color:var(--tda-error)}

/* Einfache Liste (Neuigkeiten, Artikel): Titel, Nebenzeile, ganze Zeile klickbar */
.tda-list{margin:0;padding:0;list-style:none}
.tda-list a{display:flex;align-items:center;gap:14px;padding:12px var(--tda-panel-pad);border-bottom:1px solid var(--td-line);text-decoration:none;color:inherit}
.tda-list li:last-child a{border-bottom:0}
.tda-list a:hover{background:var(--td-light)}
.tda-list a:hover b{color:var(--td-primary)}
.tda-list b{display:block;font-size:14.5px;font-weight:500;color:var(--td-text)}
.tda-list small{display:block;font-size:13px;color:var(--td-muted);margin-top:2px}
.tda-list .tda-list-ico{width:34px;height:34px;border-radius:var(--td-radius-sm);background:var(--td-blue);display:flex;align-items:center;justify-content:center;flex:none}
.tda-list .tda-list-ico svg{width:18px;height:18px;stroke:var(--td-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-list time{margin-left:auto;font-size:13px;color:var(--td-subtle);white-space:nowrap}

/* Filterzeile ueber einer Tabelle: Auswahl links, Suche rechts */
.tda-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px var(--tda-panel-pad);border-bottom:1px solid var(--td-line)}
.tda-filter label{font-size:13px;color:var(--td-muted);font-weight:400}
.tda-filter select{width:auto;min-height:36px;padding:0 34px 0 12px;font-size:14px;background-position:right 10px center}
.tda-filter .tda-search{margin-left:auto;position:relative;min-width:240px}
.tda-filter .tda-search input{min-height:36px;padding-left:36px;font-size:14px;width:100%}
.tda-filter .tda-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--td-subtle);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}

/* Kategorie-Karte (Wissensdatenbank) */
.tda-cat{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);text-decoration:none;color:inherit;transition:border-color var(--td-transition)}
.tda-cat:hover,.tda-cat:focus-visible{border-color:var(--td-primary);text-decoration:none;color:inherit}
.tda-cat .tda-cat-ico{width:40px;height:40px;border-radius:var(--td-radius-sm);background:var(--td-blue);display:flex;align-items:center;justify-content:center;flex:none}
.tda-cat .tda-cat-ico svg{width:20px;height:20px;stroke:var(--td-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-cat b{display:block;font-size:15px;color:var(--td-text)}
.tda-cat b .tda-count{margin-left:6px;vertical-align:1px;background:var(--td-light);color:var(--td-muted);font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 6px;border-radius:var(--td-radius-pill);display:inline-flex;align-items:center;justify-content:center}
.tda-cat small{display:block;font-size:13.5px;color:var(--td-muted);margin-top:3px;line-height:1.45}

/* Auswahlkarte (Abteilung waehlen): eine Wahl aus wenigen, grosse Klickflaeche */
.tda-choice{display:flex;gap:16px;align-items:center;padding:18px 20px;background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);text-decoration:none;color:inherit;transition:border-color var(--td-transition),box-shadow var(--td-transition)}
.tda-choice:hover{border-color:var(--td-primary);box-shadow:var(--td-field-ring)}
.tda-choice .tda-choice-ico{width:44px;height:44px;border-radius:var(--td-radius-sm);background:var(--td-blue);display:flex;align-items:center;justify-content:center;flex:none}
.tda-choice .tda-choice-ico svg{width:22px;height:22px;stroke:var(--td-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-choice b{display:block;font-size:16px;color:var(--td-text)}
.tda-choice small{display:block;font-size:14px;color:var(--td-muted);margin-top:2px}
.tda-choice .tda-choice-go{margin-left:auto;color:var(--td-subtle);flex:none}
.tda-choice .tda-choice-go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-choice:hover .tda-choice-go{color:var(--td-primary)}

/* Werkzeugleiste ueber einem Textfeld (Ticket-Nachricht): ruhig, Icons in --td-muted */
.tda-toolbar{display:flex;gap:2px;flex-wrap:wrap;padding:6px;border:1px solid var(--td-line-strong);border-bottom:0;border-radius:var(--td-radius-sm) var(--td-radius-sm) 0 0;background:var(--td-light)}
.tda-toolbar button{width:32px;height:30px;border:0;background:transparent;border-radius:4px;color:var(--td-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;font-weight:700}
.tda-toolbar button:hover{background:#fff;color:var(--td-primary)}
.tda-toolbar button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tda-toolbar .tda-sep{width:1px;height:20px;background:var(--td-line-strong);margin:5px 4px}
.tda-toolbar+textarea{border-top-left-radius:0;border-top-right-radius:0}

/* Ablagefeld fuer Anhaenge */
.tda-dropzone{border:1.5px dashed var(--td-line-strong);border-radius:var(--td-radius-lg);padding:22px;text-align:center;color:var(--td-muted);font-size:14px;background:#fff}
.tda-dropzone svg{width:24px;height:24px;stroke:var(--td-subtle);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 8px}
.tda-dropzone b{color:var(--td-primary);font-weight:700}
.tda-dropzone small{display:block;font-size:12.5px;color:var(--td-subtle);margin-top:6px}
.tda-files{margin:10px 0 0;padding:0;list-style:none}
.tda-files li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--td-line);border-radius:var(--td-radius-sm);font-size:13.5px;margin-top:6px}
.tda-files li span{color:var(--td-subtle);margin-left:auto}
.tda-files li button{border:0;background:transparent;color:var(--td-subtle);cursor:pointer;padding:2px;display:inline-flex}
.tda-files li button:hover{color:var(--tda-error)}
.tda-files li svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* Inhalt ohne Seitenleiste (Bestellstrecke): schmaler, zentriert */
.tda-layout--narrow{grid-template-columns:1fr;max-width:1040px}