/* ============================================================
 * IT-Service ETTEN — Design System (aus Claude-Design-Projekt
 * 80486fc7 „Kundenportal etten.eu Design-System").
 * Tokens 1:1 aus _ds/tokens/{colors,typography,spacing,effects}.css.
 *
 * SCOPING: die Tokens standen bis zum 05.09.2026 unter `.pf` — damit sie nicht
 * mit dem älteren public/assets/css/app.css kollidieren. Das hat lange getragen,
 * solange jede Seite ihren Wurzel-Container in `class="pf"` wrappte.
 *
 * DANN KAM D018 („Vorschau-Screens bitte in Vollbild"), und Seiten wurden aus
 * der Shell gelöst. Sie behielten `.pf` — aber `.pf` gab nur Tokens weiter und
 * WENDETE keine an; Schrift und Kastenmodell hingen an `.pf.itse-shell`, also an
 * einer zweiten Klasse. Ergebnis: Prüfstand, Änderungsunterschrift und
 * Beratungspräsentation liefen in der Serifenschrift des Browsers, und die
 * Seitenspalte rechnete `content-box` und lief aus dem Bild.
 *
 * Repariert wurde das zuerst im `.pf`-Block. Beim Nachmessen auf dev zeigte sich
 * aber die Restlücke: der `<body>` selbst konnte `var(--font-body)` gar nicht
 * auflösen, weil die Tokens erst eine Ebene tiefer begannen. Sichtbar war das
 * nirgends — nur, weil bei allen betroffenen Seiten die Hülle zufällig das erste
 * und einzige Element im Körper ist.
 *
 * Nico hat am 05.09.2026 entschieden, die Wurzel auszuräumen statt sie zu
 * bewachen: **die Tokens stehen jetzt auf `:root`.** Damit lösen sie überall
 * auf, auch am `<body>`, und keine künftige Vollbildseite kann in dieselbe Falle
 * laufen. Für alles, was schon `.pf` trägt, ändert sich nichts — es erbt sie nur
 * von weiter oben.
 *
 * Der Kollisionsschutz gegenüber app.css bleibt erhalten: die Legacy-Aliase
 * (--border, --radius, --text …) stehen WEITERHIN unter `.pf`, weiter unten in
 * dieser Datei. Nur die Grundtokens sind hochgezogen.
 *
 * Wächter: tests/Core/VollbildRahmenTest.php
 *
 * FONTS: Google-Fonts-@import bewusst NICHT eingebunden (CSP). Bis die
 * Fonts self-gehostet sind (Poppins/Manrope/JetBrains Mono als .woff2 unter
 * /assets/fonts/ + @font-face), greift der System-Fallback der Stacks.
 *
 * PRIMÄRFARBE: BLAU (--brand-primary = --blue-500), Grün = Akzent (User-Entscheidung 2026-06-28).
 * Komponenten-Klassen (itse-*) werden screen-für-screen ergänzt.
 * ============================================================ */

/* D250: hidden bleibt auch bei Komponenten mit eigener display-Regel verborgen. */
[hidden] { display: none !important; }

:root {
  /* --- Brand: Etten Green (primary) --- */
  --green-50:#e9f9f0; --green-100:#c8f0d8; --green-200:#9be4b8; --green-300:#89d9aa; --green-400:#34c46f;
  --green-500:#04af4b; --green-600:#039a41; --green-700:#027a34; --green-800:#015c27; --green-900:#01411c;
  /* --- Brand: Etten Blue (secondary / trust) --- */
  --blue-50:#e7effb; --blue-100:#c4d8f4; --blue-200:#8eb2e8; --blue-300:#4d83d6; --blue-400:#1a5dc4;
  --blue-500:#004aad; --blue-600:#003f93; --blue-700:#003278; --blue-800:#00265c; --blue-900:#001a40;
  /* --- Ink / Neutrals --- */
  --ink:#2d2d2d;
  --neutral-0:#ffffff; --neutral-50:#f6f7f9; --neutral-100:#eef0f3; --neutral-200:#e2e5ea; --neutral-300:#cbd0d8;
  --neutral-400:#9aa1ad; --neutral-500:#6b7280; --neutral-600:#4b515c; --neutral-700:#363a42; --neutral-800:#2d2d2d; --neutral-900:#1c1d20;
  /* --- Semantic status --- */
  --success-500:#04af4b; --success-50:#e9f9f0;
  --warning-500:#e8a002; --warning-50:#fdf3df;
  --danger-500:#d42f2f;  --danger-50:#fbe9e9;
  --info-500:#004aad;    --info-50:#e7effb;
  /* --- Semantic aliases (in Komponenten DIESE nutzen) --- */
  /* BLAU = Primärfarbe, Grün = Akzent (User-Entscheidung 2026-06-28). */
  --brand-primary:var(--blue-500); --brand-primary-hover:var(--blue-600); --brand-primary-active:var(--blue-700);
  --brand-secondary:var(--green-500); --brand-secondary-hover:var(--green-600); --brand-secondary-active:var(--green-700);
  --brand-accent:var(--green-300);
  --surface-page:var(--neutral-50); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-100);
  --surface-inverse:var(--ink); --surface-brand:var(--blue-500);
  --text-strong:var(--ink); --text-body:var(--neutral-700); --text-muted:var(--neutral-500);
  --text-on-brand:var(--neutral-0); --text-link:var(--blue-500);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300); --border-strong:var(--neutral-400); --border-brand:var(--blue-500);
  --ring-brand:color-mix(in srgb, var(--blue-500) 45%, transparent);
  --ring-blue:color-mix(in srgb, var(--blue-500) 40%, transparent);

  /* --- Typografie --- */
  --font-display:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem;
  --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:3.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.08em;

  /* --- Spacing (4px-Grid) --- */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:6rem;
  --container-sm:640px; --container-md:880px; --container-lg:1120px; --container-xl:1280px;

  /* --- Radius / Border --- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;
  --border-width:1px; --border-width-strong:2px;

  /* --- Shadows (kühl, blaustichig) --- */
  --shadow-xs:0 1px 2px rgba(15,32,60,.06);
  --shadow-sm:0 2px 6px rgba(15,32,60,.08);
  --shadow-md:0 8px 20px rgba(15,32,60,.10);
  --shadow-lg:0 18px 40px rgba(15,32,60,.12);
  --shadow-xl:0 30px 70px rgba(15,32,60,.16);
  --shadow-brand:0 10px 24px rgba(0,74,173,.24);
  --shadow-blue:0 10px 24px rgba(0,74,173,.24);

  /* --- Motion --- */
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* --- Gradients --- */
  --gradient-brand:linear-gradient(120deg, var(--green-500) 0%, var(--green-400) 100%);
  --gradient-trust:linear-gradient(140deg, var(--blue-600) 0%, var(--blue-500) 60%, var(--green-500) 140%);
  --gradient-tint:linear-gradient(160deg, var(--green-50) 0%, var(--blue-50) 100%);

  /* --- Und die Schrift wird hier auch ANGEWENDET, nicht nur abgelegt ---
     Angewendet wurde `--font-body` bis zum 05.09.2026 ausschliesslich in
     `.pf.itse-shell` und `.pf.itse-login` — beide verlangen eine ZWEITE Klasse.
     Jede Seite, die nach D018 aus der Shell geloest wurde und nur eine
     `.pf`-Huelle oeffnet, bekam damit die Farben und KEINE Schrift und fiel auf
     den Browser-Standard zurueck: eine Serifenschrift. Nico sah das am
     Pruefstand („von der Schriftart her sehr unleserlich") — betroffen waren
     aber auch die Aenderungsunterschrift und die Beratungspraesentation, also
     zwei Strecken, auf denen der Kunde zeichnet bzw. mitliest.

     Weil die Zeile jetzt auf `:root` steht, erbt sie auch der `<body>`. Das war
     der letzte offene Rest: vorher konnte der Koerper `var(--font-body)` gar
     nicht aufloesen, weil die Tokens erst eine Ebene tiefer begannen — auf dev
     gemessen stand dort „Times New Roman", nur unsichtbar, weil die Huelle
     alles umschliesst. Diese Abhaengigkeit von einem Zufall ist damit weg.

     Waechter: tests/Core/VollbildRahmenTest.php */
  font-family: var(--font-body);
}

/* ── Und aus demselben Grund das Kastenmodell ───────────────────────────────
 * `box-sizing: border-box` stand an VIER Stellen — `.pf.itse-login`,
 * `.pf.itse-dash`, `.pf.itse-shell`, `.pf.itse-flyer`. Jede verlangt eine
 * zweite Klasse, genau wie bei der Schrift. Eine Vollbildseite mit nur `.pf`
 * rechnete deshalb im Browser-Standard `content-box`, und dort kommen Polsterung
 * und Rahmen ZUSAETZLICH zur angegebenen Breite dazu:
 *
 *     .pf-review__aside   width:412px + padding:14px+14px + border:1px  =  441px
 *     .pf-review__tools   width: 60px + border:1px                      =   61px
 *
 * Bei einer Reihe nebeneinander summiert sich das, bis die rechte Spalte aus
 * dem Bild laeuft — Nico auf dem zweiten Bildschirmfoto: „ragt etwas heraus".
 * Es ist also KEIN eigener Fehler, sondern dieselbe Luecke wie bei der Schrift.
 *
 * Fuer die vier bestehenden Faelle aendert sich nichts: sie setzen denselben
 * Wert bereits selbst. Neu ist er nur dort, wo er bisher fehlte. */
.pf, .pf *, .pf *::before, .pf *::after { box-sizing: border-box; }

/* ── Der Rahmen einer Vollbildseite (D018) ──────────────────────────────────
 * D018 (Nico, 22.08.): „die ganzen vorschau screens bitte in vollbild statt
 * eingebettet in unser design". Umgesetzt wurde das Herausloesen aus der Shell —
 * die Seiten oeffnen ihr eigenes Dokument und tragen die Markierung
 * `data-d018-vollbild`. Was NICHT mitkam, war ein Rahmen dazu: gezaehlt ueber
 * alle Dateien in public/assets/css/ gab es bis zum 05.09.2026 null Regeln fuer
 * diese Markierung. Die Seiten hatten damit weder Hoehe noch Grund noch
 * Breitengrenze — Dinge, die vorher `.pf.itse-shell` mitgebracht hatte.
 *
 * Bewusst `min-height` statt `height`: ein Arbeitsbildschirm soll den Schirm
 * fuellen, aber laengere Inhalte duerfen weiterscrollen. `height:100dvh` mit
 * `overflow:hidden` waere die Shell-Regel — die passt hier nicht, weil hinter
 * der Markierung auch Lesestrecken stehen (Beratungspraesentation). */
[data-d018-vollbild] {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  color: var(--text-body);
}
[data-d018-vollbild] > .pf-review { flex: 1 1 auto; min-height: 0; }

/* Komponenten-Layer (itse-*) folgt hier, screen-für-screen ergänzt.
   Erste Migration: Login. */

/* ============================================================
 * LOGIN (erster migrierter Screen)
 * Zwei-Spalten-Layout: links Formular-Card, rechts Brand-Hero.
 * Alle Werte über Tokens (.pf-Scope). Keine Inline-Styles (CSP).
 * ============================================================ */

.pf.itse-login {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}
.pf.itse-login *,
.pf.itse-login *::before,
.pf.itse-login *::after { box-sizing: border-box; }

/* ---- Linke Spalte: Formularbereich ---- */
.itse-login__formcol {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-6) var(--space-5);
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  /* Nur DIESE Spalte scrollt intern, falls sie (z.B. bei 2FA) hoeher als der
     Viewport wird. Das Dokument/der Body scrollt dank overflow:hidden nie. */
  overflow-y: auto;
}
.itse-login__inner {
  width: 100%;
  max-width: 380px;
  flex-shrink: 0;
  margin-block: auto;
}
#login-privacy form { display: grid; gap: .5rem; }
#login-privacy button {
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid #004aad;
  border-radius: 6px;
  background: #fff;
  color: #004aad;
  font: inherit;
  cursor: pointer;
}
#login-privacy button:focus-visible { outline: 3px solid #004aad; outline-offset: 2px; }
.itse-login__brandtop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
/* Logo NIE verzerren: feste Hoehe, Breite automatisch, Seitenverhaeltnis erhalten. */
.itse-login__logo {
  height: 46px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  align-self: center;
  display: block;
}
.itse-login__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 22px;
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: var(--space-2) 0 0;
}
.itse-login__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- Card ---- */
.itse-login__card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 26px;
}

/* ---- Tab-Switcher (Segmented) ---- */
.itse-login__tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  margin-bottom: var(--space-5);
}
.itse-login__tab {
  flex: 1 1 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.itse-login__tab[aria-selected="true"] {
  background: var(--surface-card);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}
.itse-login__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring-brand);
}

/* ---- Panes ---- */
.itse-login__pane[hidden] { display: none; }

/* ---- Felder ---- */
.itse-login__field { margin-bottom: var(--space-4); }
.itse-login__label {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.itse-login__input {
  width: 100%;
  font: inherit;
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 11px var(--space-3);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.itse-login__input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--ring-brand);
}

/* ---- Buttons ---- */
.itse-login__btn {
  display: block;
  width: 100%;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px var(--space-5);
  min-height: 44px;
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.itse-login__btn:hover { background: var(--brand-primary-hover); }
.itse-login__btn:active { transform: translateY(1px); }
.itse-login__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring-brand);
}

/* ---- Hinweise / Texte ---- */
.itse-login__hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  margin: var(--space-3) 0 0;
}
.itse-login__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-secondary);
  text-decoration: none;
}
.itse-login__back:hover { text-decoration: underline; }

/* ---- Alert (Fehler) ---- */
.itse-login__alert {
  background: var(--danger-50);
  border: var(--border-width) solid color-mix(in srgb, var(--danger-500) 30%, transparent);
  color: var(--danger-500);
  border-left: 3px solid var(--danger-500);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

/* ---- Status-Panel (Badge + Titel + Text) für 2FA und Magic-Sent ---- */
.itse-login__panel { text-align: center; }
.itse-login__badge {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-50);
  color: var(--brand-primary);
}
.itse-login__badge .itse-ico { width: 28px; height: 28px; }
.itse-login__panel-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
.itse-login__panel-text {
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ---- 2FA-Einzelfeld (Mono, zentriert) ---- */
.itse-login__otp {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.28em;
}

/* ---- Footer ---- */
.itse-login__footer {
  margin-top: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.itse-login__footer p { margin: 0 0 var(--space-1); }
.itse-login__footlink { color: var(--text-link); text-decoration: none; }
.itse-login__footlink:hover { text-decoration: underline; }

/* ---- Icon-Helper (Linien-SVG) ---- */
.pf.itse-login .itse-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pf.itse-login .itse-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Rechte Spalte: Brand-Hero ---- */
.itse-login__brandpanel {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-9) var(--space-8);
  color: var(--neutral-0);
  background: linear-gradient(150deg, var(--blue-500) 0%, var(--blue-700) 55%, #012a55 100%);
}
.itse-login__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.itse-login__deco--1 {
  width: 360px; height: 360px;
  top: -120px; right: -90px;
  background: color-mix(in srgb, var(--green-500) 22%, transparent);
  filter: blur(2px);
}
.itse-login__deco--2 {
  width: 260px; height: 260px;
  bottom: -90px; left: -70px;
  background: color-mix(in srgb, var(--neutral-0) 8%, transparent);
}
.itse-login__deco--3 {
  width: 140px; height: 140px;
  top: 40%; right: 12%;
  background: color-mix(in srgb, var(--neutral-0) 6%, transparent);
}
.itse-login__hero {
  position: relative;
  z-index: 1;
  max-width: 460px;
  /* Hero fuellt die Spalte: Headline/Lead/Props oben, Stats-Zeile unten angeheftet. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.itse-login__statusbadge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--neutral-0) 12%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--neutral-0) 20%, transparent);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-5);
}
.itse-login__statusdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-400) 30%, transparent);
}
.itse-login__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.itse-login__lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--neutral-0) 86%, transparent);
  margin: 0 0 var(--space-6);
}
.itse-login__props {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.itse-login__prop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}
.itse-login__check {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--green-400) 28%, transparent);
  color: var(--green-300);
}
.itse-login__check .itse-ico { width: 15px; height: 15px; }
.itse-login__stats {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.itse-login__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.itse-login__stat-num {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: 24px;
  line-height: var(--leading-tight);
  color: var(--neutral-0);
}
.itse-login__stat-label {
  font-size: 12px;
  line-height: var(--leading-snug);
  color: #c4d8f4;
}

/* ---- Responsive: Hero ausblenden, Card volle Breite ---- */
@media (max-width: 820px) {
  .itse-login__brandpanel { display: none; }
  .itse-login__formcol { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .itse-login__formcol { padding: var(--space-4); padding-top: max(var(--space-5), env(safe-area-inset-top)); }
  .itse-login__card { padding: 20px; border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .pf.itse-login * { transition: none !important; }
}

/* ============================================================
 * DASHBOARD (Staff-Startseite „/") — itse-dash / itse-sb / itse-stat / itse-tile / itse-card
 * Self-contained Shell (Sidebar + Topbar + Content). BLAU primaer.
 * Alle Werte ueber Tokens (.pf-Scope). Keine Inline-Styles (CSP) ausser
 * dynamischer Meter-Breite (per JS aus data-w gesetzt).
 * Dark-Theme: html[data-pf-theme="dark"] ueberschreibt die .pf-Tokens.
 * ============================================================ */

.pf.itse-dash {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}
.pf.itse-dash *,
.pf.itse-dash *::before,
.pf.itse-dash *::after { box-sizing: border-box; }

/* ---------- Sidebar ---------- */
.itse-sb {
  width: 236px;
  flex-shrink: 0;
  background: var(--surface-card);
  border-right: var(--border-width) solid var(--border-subtle);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.itse-sb__brand {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-1) var(--space-4);
}
.itse-sb__logolink { display: inline-flex; }
.itse-sb__logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; display: block; }

.itse-sb__section {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-2) var(--space-1);
}
.itse-sb__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  position: relative;
  min-height: 40px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.itse-sb__item:hover { background: var(--surface-sunken); }
.itse-sb__item--active {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}
.itse-sb__item--active::before {
  content: "";
  position: absolute;
  left: -4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
}
.itse-sb__ico { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; }
.itse-sb__ico .itse-ico { width: 18px; height: 18px; }
.itse-sb__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-sb__badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--danger-500);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 18px;
  text-align: center;
}
.itse-sb__backdrop { display: none; }

/* ---------- Main ---------- */
.itse-dash__main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* ---------- Topbar ---------- */
.itse-dash__topbar {
  height: 60px;
  flex-shrink: 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
}
.itse-dash__hamburger {
  display: none;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.itse-dash__hamburger .itse-ico { width: 22px; height: 22px; }

.itse-dash__search {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  min-height: 38px;
}
.itse-dash__search:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--ring-brand); }
.itse-dash__search-ico { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.itse-dash__search-ico .itse-ico { width: 17px; height: 17px; }
.itse-dash__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-strong);
  outline: none;
  padding: 9px 0;
}
.itse-dash__search-input::placeholder { color: var(--text-muted); }
.itse-dash__search-kbd {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}
.itse-dash__search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
}
.itse-dash__search-results.is-open { display: block; }
.itse-dash__sr-group {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--weight-bold);
  padding: var(--space-2) var(--space-4) var(--space-1);
}
.itse-dash__sr-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--text-strong);
  border-top: var(--border-width) solid var(--border-subtle);
}
.itse-dash__sr-item:first-of-type { border-top: none; }
.itse-dash__sr-item:hover, .itse-dash__sr-item.is-active { background: var(--surface-sunken); }
.itse-dash__sr-t { display: block; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.itse-dash__sr-s { display: block; font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-dash__sr-empty { padding: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

.itse-dash__iconbtn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
}
.itse-dash__iconbtn:hover { background: var(--surface-sunken); }
.itse-dash__iconbtn .itse-ico { width: 19px; height: 19px; }
.itse-dash__theme-moon { display: none; }
html[data-pf-theme="dark"] .itse-dash__theme-sun { display: none; }
html[data-pf-theme="dark"] .itse-dash__theme-moon { display: inline-flex; }
.itse-dash__bell-dot {
  position: absolute;
  top: 5px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger-500);
  border: 1.5px solid var(--surface-card);
}
.itse-dash__avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- Scroll content ---------- */
.itse-dash__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); }
.itse-dash__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- Greeting ---------- */
.itse-dash__greet {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.itse-dash__hello {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.itse-dash__subline { font-size: var(--text-sm); color: var(--text-muted); margin-top: 3px; }
.itse-dash__newbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--brand-primary);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: 11px var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-brand);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.itse-dash__newbtn:hover { background: var(--brand-primary-hover); }
.itse-dash__newbtn:active { transform: translateY(1px); }
.itse-dash__newbtn .itse-ico { width: 17px; height: 17px; }

/* ---------- KPI cards (itse-stat) ---------- */
.itse-dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.itse-dash__handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--brand-primary);
}
.itse-dash__handoff[hidden] {
  display: none;
}
.itse-dash__handoff div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.itse-dash__handoff strong,
.itse-dash__handoff span {
  overflow-wrap: anywhere;
}
.itse-dash__handoff span {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.itse-stat {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  min-width: 0;
}
.itse-stat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.itse-stat__label { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); }
.itse-stat__icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itse-stat__icon .itse-ico { width: 18px; height: 18px; }
.itse-stat__icon--primary { background: var(--info-50); color: var(--brand-primary); }
.itse-stat__icon--accent  { background: var(--success-50); color: var(--brand-secondary); }
.itse-stat__icon--warn    { background: var(--warning-50); color: var(--warning-500); }
.itse-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 30px;
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin-top: var(--space-3);
}
.itse-stat__delta { font-size: var(--text-xs); color: var(--brand-secondary); font-weight: var(--weight-semibold); margin-top: var(--space-2); }
.itse-stat__delta--muted { color: var(--text-muted); font-weight: var(--weight-medium); }

/* ---------- Meter (Ampel) ---------- */
.itse-meter {
  display: block; /* PFLICHT: wird teils als <span> (inline) genutzt -> ohne display:block kollabiert der Balken (Hoehe wird ignoriert) */
  margin-top: var(--space-3);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}
.itse-meter__fill { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.itse-meter__fill--ok   { background: var(--success-500); }
.itse-meter__fill--warn { background: var(--warning-500); }
.itse-meter__fill--over { background: var(--danger-500); }

/* ---------- Two columns ---------- */
.itse-dash__cols { display: flex; gap: var(--space-5); align-items: flex-start; }
.itse-dash__col-left { flex: 1.5 1 0; min-width: 0; }
.itse-dash__col-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.itse-dash__h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-strong); margin: 0 0 var(--space-3); }

/* ---------- Schnellzugriff tiles ---------- */
.itse-dash__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.itse-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text-strong);
  min-width: 0;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.itse-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.itse-tile__head { display: flex; align-items: center; justify-content: space-between; }
.itse-tile__ico {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--info-50);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itse-tile__ico .itse-ico { width: 20px; height: 20px; }
.itse-tile__arrow { color: var(--text-muted); display: inline-flex; }
.itse-tile__arrow .itse-ico { width: 15px; height: 15px; }
.itse-tile__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-tile__meta { font-size: var(--text-xs); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-tile__meta--muted  { color: var(--text-muted); font-weight: var(--weight-medium); }
.itse-tile__meta--danger { color: var(--danger-500); }
.itse-tile__meta--warn   { color: var(--warning-500); }

/* ---------- Cards (itse-card) ---------- */
.itse-dash .itse-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.itse-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.itse-card__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-strong); }
.itse-card__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand-primary); text-decoration: none; }
.itse-card__link:hover { text-decoration: underline; }

/* ---------- Meine offenen Tickets ---------- */
.itse-dash__empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3) 0; }
.itse-dash__tlist { list-style: none; margin: 0; padding: 0; }
.itse-dash__trow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-strong);
}
.itse-dash__trow:hover { background: var(--surface-sunken); }
.itse-badge--dot {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 0;
  display: inline-block;
}
.itse-badge--status-new     { background: var(--danger-500); }
.itse-badge--status-working { background: var(--blue-400); }
.itse-badge--status-waiting { background: var(--warning-500); }
.itse-badge--status-planned { background: var(--brand-primary); }
.itse-badge--status-resolved { background: var(--success-500); }
.itse-badge--status-closed  { background: var(--neutral-400); }
.itse-dash__tmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.itse-dash__ttitle { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-dash__tcust { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-dash__ttime { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
.itse-dash__turgent { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--danger-500); flex-shrink: 0; }

/* ---------- Aktivitaet ---------- */
.itse-dash__feed { list-style: none; margin: 0; padding: 0; }
.itse-dash__feedrow { display: flex; gap: var(--space-3); padding: var(--space-2) 0; }
.itse-dash__feedrow + .itse-dash__feedrow { border-top: var(--border-width) solid var(--border-subtle); }
.itse-dash__feedav {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--success-50);
  color: var(--brand-secondary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itse-dash__feedmain { flex: 1 1 auto; min-width: 0; }
.itse-dash__feedtxt { display: block; font-size: var(--text-sm); color: var(--text-body); }
.itse-dash__feedtxt strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.itse-dash__feedtime { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* ============================================================
 * DARK THEME (toggle: html[data-pf-theme="dark"]) — Tokens fuer .pf
 * ============================================================ */
html[data-pf-theme="dark"] .pf.itse-dash {
  --surface-page: #0f141b;
  --surface-card: #161d27;
  --surface-sunken: #1d2733;
  --text-strong: #f2f5f9;
  --text-body: #cbd3de;
  --text-muted: #8a94a3;
  --border-subtle: #283341;
  --border-default: #313d4d;
  --border-strong: #3c4a5c;
  --info-50: #16263f;
  --success-50: #11291d;
  --warning-50: #2c2410;
  --danger-50: #2c1717;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.55);
  --shadow-brand: 0 10px 24px rgba(0,32,80,.55);
}

/* ============================================================
 * RESPONSIVE (≤720px): Sidebar off-canvas, KPIs 1-spaltig, kein H-Scroll
 * ============================================================ */
@media (max-width: 980px) {
  .itse-dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .itse-dash__cols { flex-direction: column; }
  .itse-dash__col-left, .itse-dash__col-right { width: 100%; flex: 1 1 auto; }
  .itse-dash__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .itse-dash__hamburger { display: inline-flex; }
  .itse-sb {
    position: fixed;
    top: 0; left: 0;
    height: 100vh; height: 100dvh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Nav scrollt bei vielen Eintraegen; Brand bleibt fix -> kein 14px-Rest-Scroll. */
  .itse-sb__brand { flex: 0 0 auto; }
  .itse-sb__nav { flex: 1 1 auto; min-height: 0; }
  .itse-sb.is-open { transform: translateX(0); }
  .itse-sb__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15, 25, 40, .45);
  }
  .itse-sb__backdrop[hidden] { display: none; }
  .itse-dash__topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .itse-dash__search { margin: 0; max-width: none; }
  .itse-dash__search-kbd { display: none; }
  .itse-dash__scroll { padding: var(--space-4); }
  .itse-dash__kpis { grid-template-columns: 1fr; }
  .itse-dash__handoff { flex-direction: column; align-items: stretch; }
  .itse-dash__tiles { grid-template-columns: 1fr; }
  .itse-dash__greet { flex-direction: column; align-items: stretch; }
  .itse-dash__newbtn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pf.itse-dash * { transition: none !important; }
}

/* ============================================================
 * SHARED STAFF SHELL (itse-shell*) — Partial src/Pages/partials/pf_shell.php
 * Wiederverwendbare Huelle (Sidebar itse-sb* + Top-Header 60px + Scroll-Content)
 * fuer migrierte Staff-Seiten. Reine Praesentation, BLAU primaer, Tokens .pf.
 * Sidebar-Klassen (itse-sb*) werden mit dem Dashboard geteilt (oben definiert).
 * ============================================================ */
/* Globaler Root-Reset: ohne ihn addiert der Browser den 8px-Default-Margin von
   <body> oben+unten (=16px) zur 100vh-Shell -> Dokument scrollt 16px -> DOPPELTER
   Scrollbalken auf jeder Shell-Seite. Der Reset killt das zentral. */
html, body { margin: 0; padding: 0; }
/* Basis-Groesse fuer Inline-Icons. Kontext-Regeln (.itse-btn .itse-ico, .itse-sb__ico .itse-ico …)
   sind spezifischer und ueberschreiben das. OHNE diese Basis rendert ein „nacktes" .itse-ico
   (z.B. in einem <summary>) riesig. */
.itse-ico { width: 1.05em; height: 1.05em; flex-shrink: 0; vertical-align: middle; }
/* NUR DESKTOP: App-Shell fixieren, sodass der innere Bereich scrollt (Sidebar/Header fix).
   Auf Mobil bewusst NICHT — dort scrollt die Seite natuerlich (siehe @media <=720px), sonst
   klippt die feste 100dvh-Hoehe unten Inhalte ab bzw. die dyn. URL-Leiste verschiebt den Header. */
@media (min-width: 721px) {
  html:has(.pf.itse-shell), body:has(.pf.itse-shell) {
    height: 100vh; height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

.pf.itse-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}
.pf.itse-shell *,
.pf.itse-shell *::before,
.pf.itse-shell *::after { box-sizing: border-box; }

/* ---------- Main column ---------- */
.itse-shell__main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ---------- Topbar ---------- */
.itse-shell__topbar {
  height: 60px;
  flex-shrink: 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
}
.itse-shell__hamburger {
  display: none;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.itse-shell__hamburger .itse-ico { width: 22px; height: 22px; }

/* Seiten-Slots im Topbar: Seiten hängen hier per JS eigene Kopf-Elemente ein
   (z. B. Produkt-Builder-Wizard), um Inhaltshöhe zu sparen. Leer = unsichtbar;
   unterhalb 1360px komplett aus (Seiten zeigen dann ihre normalen Kopfzeilen). */
.itse-shell__pageslot { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.itse-shell__pageslot:empty { display: none; }
.itse-shell__pageslot--left { flex: 0 1 auto; }
@media (max-width: 1359px) { .itse-shell__pageslot { display: none; } }

.itse-shell__search {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  min-height: 38px;
}
.itse-shell__search:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--ring-brand); }
.itse-shell__search-ico { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.itse-shell__search-ico .itse-ico { width: 17px; height: 17px; }
.itse-shell__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-strong);
  outline: none;
  padding: 9px 0;
}
.itse-shell__search-input::placeholder { color: var(--text-muted); }
.itse-shell__search-kbd {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}
.itse-shell__search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
}
.itse-shell__search-results.is-open { display: block; }
.itse-shell__sr-group {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--weight-bold);
  padding: var(--space-2) var(--space-4) var(--space-1);
}
.itse-shell__sr-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--text-strong);
  border-top: var(--border-width) solid var(--border-subtle);
}
.itse-shell__sr-item:first-of-type { border-top: none; }
.itse-shell__sr-item:hover, .itse-shell__sr-item.is-active { background: var(--surface-sunken); }
.itse-shell__sr-t { display: block; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.itse-shell__sr-s { display: block; font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itse-shell__sr-empty { padding: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

.itse-shell__iconbtn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
}
.itse-shell__iconbtn:hover { background: var(--surface-sunken); }
.itse-shell__iconbtn .itse-ico { width: 19px; height: 19px; }
.itse-shell__theme-moon { display: none; }
html[data-pf-theme="dark"] .itse-shell__theme-sun { display: none; }
html[data-pf-theme="dark"] .itse-shell__theme-moon { display: inline-flex; }
.itse-shell__bell-dot {
  position: absolute;
  top: 5px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger-500);
  border: 1.5px solid var(--surface-card);
}
.itse-shell__avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- Scroll content ---------- */
.itse-shell__scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--space-5); }
.itse-shell__inner { max-width: 1180px; width: 100%; min-width: 0; margin: 0 auto; }
/* Einheitlicher vertikaler Rhythmus zwischen den Top-Level-Bloecken einer Seite.
   .itse-shell__inner ist ein Block-Container OHNE gap und .itse-card hat KEIN margin-bottom
   -> ohne diese Regel "kleben" bare Cards/Sections aneinander (z.B. /diagnose, Monatslauf).
   Block-Margins kollabieren -> kein doppelter Abstand mit bereits vorhandenen Element-Margins. */
.itse-shell__inner > * + * { margin-top: var(--space-4); }

/* ---------- Pagehead ---------- */
.itse-shell__pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
/* Ticket-Inbox Seiten-Aktionen: Neues Ticket / Zeiten zuordnen / Einstellungs-Zahnrad in EINER Zeile (kein Umbruch-Stapel), Zahnrad kompakt inline. */
.itse-tk-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.itse-tk-actions .itse-btn--ghost { padding: 0 10px; min-width: 0; }
.itse-shell__h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.itse-shell__sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 3px; }

/* itse-shell teilt sich die Dashboard-Card-Definition (selbe Optik). */
.itse-shell .itse-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.itse-shell .itse-card--flush { padding: 0; overflow: hidden; }

/* ---------- Generisches Karten-/Kachel-Grid (itse-grid, responsiv) ----------
   Layout-Primitive fuer gleichmaessige Karten-/KPI-Reihen (z.B. /services).
   Ohne diese Definition kollabieren `itse-grid--2/--4` zu vollbreiten Stapeln. */
.pf.itse-shell .itse-grid { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.pf.itse-shell .itse-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pf.itse-shell .itse-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .pf.itse-shell .itse-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pf.itse-shell .itse-grid--2,
  .pf.itse-shell .itse-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Shell responsive (≤720px: Sidebar off-canvas) ---------- */
@media (max-width: 720px) {
  .itse-shell__hamburger { display: inline-flex; }
  .pf.itse-shell .itse-sb {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .pf.itse-shell .itse-sb.is-open { transform: translateX(0); }
  .pf.itse-shell .itse-sb__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15, 25, 40, .45);
  }
  .pf.itse-shell .itse-sb__backdrop[hidden] { display: none; }
  /* MOBIL: feste Shell aufloesen -> Seite scrollt natuerlich als EIN Dokument (kein inneres
     Scroll-Containment -> nichts wird unten abgeschnitten, kein Doppel-Scroll). Header klebt oben. */
  .pf.itse-shell { height: auto; min-height: 100dvh; overflow: visible; display: block; }
  .itse-shell__main { display: block; min-height: 0; }
  .itse-shell__scroll { overflow: visible; min-height: 0; }
  .itse-shell__topbar { position: sticky; top: 0; z-index: 30; padding: 0 max(var(--space-3), env(safe-area-inset-right)) 0 var(--space-3); gap: var(--space-2); }
  /* Suche schrumpfbar (min-width:0), sonst drueckt sie Theme/Glocke/Avatar ueber den
     (per overflow:hidden abgeschnittenen) rechten Rand -> Avatar war angeschnitten. */
  .itse-shell__search { margin: 0; max-width: none; min-width: 0; flex: 1 1 0; }
  .itse-shell__iconbtn, .itse-shell__avatar { flex-shrink: 0; }
  .itse-shell__search-kbd { display: none; }
  .itse-shell__scroll { padding: var(--space-4); }
  .itse-shell__pagehead { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .pf.itse-shell * { transition: none !important; }
}

/* ---------- Seitenwechsel-Ladebalken (Shell-JS erzeugt das Element lazy) ----------
   Duenner fixer Balken oben, BLAU, indeterminate (0 -> 80% ease-out ueber ~8s),
   macht die Wartezeit bei Navigation/Form-Submit sichtbar. Dark-tauglich via Token. */
.pf-pageloader {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--brand-primary);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}
.pf-pageloader.is-active {
  opacity: 1;
  animation: pf-pageloader-grow 8s ease-out forwards;
}
@keyframes pf-pageloader-grow {
  from { width: 0; }
  to { width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-pageloader.is-active { animation: none; width: 60%; }
}
/* Ankunfts-Balken: beim Aufbau JEDER Seite einmal 0 -> 100% durchlaufen + ausblenden,
   damit jeder Seitenwechsel garantiert sichtbar einen Balken zeigt (auch bei schnellen
   Server-Navigationen, wo der Ausgeh-Balken sofort mit-entladen wuerde). */
.pf-pageloader.is-arrive {
  opacity: 1;
  animation: pf-pageloader-arrive 620ms ease-out forwards;
}
@keyframes pf-pageloader-arrive {
  from { width: 0; }
  to { width: 100%; }
}
.pf-pageloader.is-done {
  width: 100%;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  /* Statisch, kein Blinken: Balken erscheint gefuellt und wird ohne Animation entfernt. */
  .pf-pageloader.is-arrive { animation: none; width: 100%; }
  .pf-pageloader.is-done { transition: none; }
}

/* ============================================================
 * SHELL: Sidebar Ein-/Ausklappen (NUR Desktop) + Glocken-Dropdown
 * Additive Optik/Funktion zur bestehenden Shell. BLAU primaer, Dark-tauglich.
 * ============================================================ */

/* ---------- Sidebar-Brand: Logo + Collapse-Toggle nebeneinander ---------- */
.itse-sb__brand { justify-content: space-between; gap: var(--space-2); }
.itse-sb__collapse {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: none;            /* nur Desktop sichtbar (s.u.) */
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.itse-sb__collapse:hover { background: var(--surface-sunken); color: var(--brand-primary); }
.itse-sb__collapse-ico { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }

/* Smooth width-transition der Sidebar (nur Desktop relevant; auf Mobil greift transform). */
@media (min-width: 721px) {
  .itse-sb {
    transition: width var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
  }
  .itse-sb__collapse { display: inline-flex; }

  /* Eingeklappt: schmale Icon-only-Leiste. Zustand via html[data-pf-sbcollapsed]
     (frueh im <head> gesetzt -> kein Flackern) ODER Shell-Klasse (Runtime-Toggle). */
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb {
    width: 64px;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    overflow: visible;
  }
  /* Labels, Gruppen-Ueberschriften ausblenden. */
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__label,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__label,
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__section,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__section,
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__logo,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__logo {
    display: none;
  }
  /* Nav-Items zentriert, nur Icon. */
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__item,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
  /* Brand mittig (nur noch der Toggle), Logolink kollabiert. */
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__brand,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__brand {
    justify-content: center;
  }
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__logolink,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__logolink {
    display: none;
  }
  /* Toggle-Pfeil umdrehen (zeigt „aufklappen"). */
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__collapse-ico,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__collapse-ico {
    transform: rotate(180deg);
  }
  /* Tickets-Badge eingeklappt klein oben rechts am Icon. */
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__item,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__item { position: relative; }
  html[data-pf-sbcollapsed="1"] .pf.itse-shell .itse-sb__badge,
  .pf.itse-shell.itse-shell--sbcollapsed .itse-sb__badge {
    position: absolute;
    top: 3px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }
}

/* ---------- Glocken-Dropdown (Benachrichtigungszentrale) ---------- */
.itse-shell__notif { position: relative; display: inline-flex; flex-shrink: 0; }
.itse-shell__notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  background: var(--danger-500);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 16px;
  text-align: center;
}
.itse-shell__notif-badge[hidden] { display: none; }
.itse-shell__notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 9998;
  width: 340px;
  max-width: 92vw;
  background: var(--surface-card);
  color: var(--text-body);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.itse-shell__notif-panel[hidden] { display: none; }
.itse-shell__notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.itse-shell__notif-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-strong); }
.itse-shell__notif-markall {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--brand-primary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0;
}
.itse-shell__notif-markall:hover { color: var(--brand-primary-hover); text-decoration: underline; }
.itse-shell__notif-list { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.itse-shell__notif-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--text-body);
  border-top: var(--border-width) solid var(--border-subtle);
}
.itse-shell__notif-item:first-child { border-top: none; }
.itse-shell__notif-item:hover { background: var(--surface-sunken); }
.itse-shell__notif-item.is-unread { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.itse-shell__notif-item.is-unread .itse-shell__notif-t { font-weight: var(--weight-bold); }
.itse-shell__notif-t { display: block; font-size: var(--text-sm); }
.itse-shell__notif-b { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.itse-shell__notif-time { display: block; font-size: 11px; color: var(--text-muted); margin-top: var(--space-1); }
.itse-shell__notif-empty { padding: var(--space-5) var(--space-4); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

@media (max-width: 720px) {
  .itse-shell__notif-panel {
    position: fixed;
    top: 64px;
    right: 8px; left: 8px;
    width: auto;
    max-width: none;
  }
}

/* ============================================================
 * SHARED DATA COMPONENTS (GUIDE §3.4 Badges/Prio · §3.7 Tabellen · Chips · Bulkbar)
 * Genutzt von Tickets-Inbox (und kuenftigen Listen). Alle Werte ueber .pf-Tokens, BLAU.
 * ============================================================ */

/* ---------- Status-Badge (Pille mit Punkt) ---------- */
.itse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.itse-badge .itse-badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
/* Status-Varianten (Soft-BG + kraeftiger Text), Skill-Mapping. */
.itse-badge--status-new      { background: var(--info-50);    color: var(--brand-primary); }
.itse-badge--status-working  { background: var(--warning-50); color: #996a00; }
.itse-badge--status-waiting  { background: var(--surface-sunken); color: var(--text-muted); }
.itse-badge--status-planned  { background: var(--info-50);    color: var(--brand-primary); }
.itse-badge--status-resolved { background: var(--success-50); color: var(--green-700); }
.itse-badge--status-closed   { background: var(--surface-sunken); color: var(--neutral-500); }

/* ---------- Prioritaet (Punkt-Praefix) ---------- */
.itse-prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.itse-prio::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.itse-prio--low    { color: var(--neutral-400); }
.itse-prio--normal { color: var(--text-muted); }
.itse-prio--high   { color: var(--warning-500); font-weight: var(--weight-semibold); }
.itse-prio--urgent { color: var(--danger-500); font-weight: var(--weight-bold); }

/* ---------- Chips (Status-Schnellfilter / Toggles) ---------- */
.itse-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.itse-chip:hover { background: var(--surface-sunken); border-color: var(--border-default); }
.itse-chip__count {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}
.itse-chip--active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.itse-chip--active .itse-chip__count { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Toolbar (Chips-Zeile + rechte Aktionen) ---------- */
.itse-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.itse-toolbar__sep { width: 1px; height: 22px; background: var(--border-subtle); flex-shrink: 0; margin: 0 2px; }
.itse-toolbar__spacer { flex: 1 1 auto; }

/* ---------- Filter-Panel (Baukasten) ---------- */
.itse-filterpanel {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.itse-filterpanel[hidden] { display: none; }
.itse-filtergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3) var(--space-4); }
.itse-filteractions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- Form bits (Label/Input/Select/Combo) fuer migrierte Listen ---------- */
.itse-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.itse-field > span { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); }
.itse-input, .itse-select, .itse-textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 9px var(--space-3);
  min-height: 40px;
}
.itse-textarea { min-height: 84px; resize: vertical; }
.itse-input:focus, .itse-select:focus, .itse-textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--ring-brand);
}
.itse-combo { position: relative; }
.itse-combo__list {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow: auto;
  display: none;
}
.itse-combo__list.open { display: block; }
.itse-combo__list li { padding: 9px var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-body); }
.itse-combo__list li:hover, .itse-combo__list li.active { background: var(--surface-sunken); }
.itse-combo__list li.empty { color: var(--text-muted); cursor: default; }

/* ---------- Buttons (kompakt, fuer Listen-Aktionen) ---------- */
.itse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.itse-btn:active { transform: translateY(1px); }
.itse-btn--sm { padding: 7px var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.itse-btn--primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-brand); }
.itse-btn--primary:hover { background: var(--brand-primary-hover); }
.itse-btn--secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.itse-btn--secondary:hover { background: var(--surface-sunken); }
.itse-btn--danger { background: var(--danger-500); color: #fff; }
.itse-btn--ghost { background: transparent; color: var(--text-body); }
.itse-btn--ghost:hover { background: var(--surface-sunken); }
.itse-btn:disabled,
.itse-btn[disabled],
.itse-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.itse-btn--primary:disabled:hover,
.itse-btn--primary[disabled]:hover,
.itse-btn--primary[aria-disabled="true"]:hover { background: var(--brand-primary); }
.itse-btn--secondary:disabled:hover,
.itse-btn--secondary[disabled]:hover,
.itse-btn--secondary[aria-disabled="true"]:hover { background: var(--surface-card); }
.itse-btn--ghost:disabled:hover,
.itse-btn--ghost[disabled]:hover,
.itse-btn--ghost[aria-disabled="true"]:hover { background: transparent; }
.itse-btn--danger:disabled:hover,
.itse-btn--danger[disabled]:hover,
.itse-btn--danger[aria-disabled="true"]:hover { background: var(--danger-500); }
.itse-btn:disabled:active,
.itse-btn[disabled]:active,
.itse-btn[aria-disabled="true"]:active { transform: none; }
.itse-btn .itse-ico { width: 16px; height: 16px; }

/* ---------- Alert ---------- */
.itse-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-primary);
  background: var(--info-50);
  color: var(--text-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.itse-alert strong { color: var(--text-strong); }

/* ---------- Realtime-Banner ---------- */
.itse-rtbanner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--info-50);
  border: var(--border-width) solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  border-radius: var(--radius-md);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.itse-rtbanner[hidden] { display: none; }

/* ---------- Auswahl-/Massenleiste (primary-soft) ---------- */
.itse-bulkbar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--info-50);
  border: var(--border-width) solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  border-radius: var(--radius-md);
}
.itse-bulkbar.open { display: flex; }
.itse-bulkbar--accent {
  background: var(--success-50);
  border-color: color-mix(in srgb, var(--brand-secondary) 32%, transparent);
}
.itse-bulkbar__count { font-weight: var(--weight-bold); color: var(--text-strong); }
.itse-bulkbar__lbl { color: var(--text-muted); font-size: var(--text-sm); }
.itse-bulkbar select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 6px var(--space-2);
  min-height: 34px;
  max-width: 100%;
}
.itse-bulkbar__hint { font-size: var(--text-xs); color: var(--text-muted); }
.itse-bulkbar__hint--err { color: var(--danger-500); }
.itse-bulkbar__searchwrap { position: relative; min-width: 240px; flex: 1 1 240px; }
.itse-sslist {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 60;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.itse-sslist[hidden] { display: none; }
.itse-ssopt { padding: 8px var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-body); border-bottom: var(--border-width) solid var(--border-subtle); }
.itse-ssopt:last-child { border-bottom: none; }
.itse-ssopt:hover, .itse-ssopt.active { background: var(--surface-sunken); }
.itse-ssopt[aria-selected="true"] { font-weight: var(--weight-semibold); }
.itse-ssempty { padding: 8px var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Tabelle (GUIDE §3.7) ---------- */
/* Horizontal scrollbarer Tabellen-Container: verhindert, dass breite Aktionsspalten
   am rechten Kartenrand abgeschnitten werden (Desktop). Auf Mobil wird die Tabelle
   ohnehin zu Cards umgebaut -> Scroll-Wrapper neutralisieren. */
.itse-table__scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.itse-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.itse-table th, .itse-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  vertical-align: middle;
}
.itse-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.itse-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.itse-table thead th a:hover { color: var(--text-body); }
.itse-table thead th.is-sorted a { color: var(--brand-primary); }
.itse-table__sortarrow { font-size: 10px; }
.itse-table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.itse-table tbody tr:hover td { background: var(--surface-sunken); }
.itse-table tbody tr:last-child td { border-bottom: none; }
.itse-table__row--selected td { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.itse-table__col-pick { width: 1%; white-space: nowrap; }
/* Aktions-Buttons kompakt; bei Bedarf umbruchfaehig (2 Zeilen) statt aus der
   Karte herauszulaufen. flex-wrap:wrap + width:auto verhindern Ueberlauf. */
/* KEIN display:flex auf der Zelle (th/td) – das nimmt sie aus dem Tabellen-Layout und verschiebt
   Header/Spalten. Zelle bleibt Tabellenzelle; nur die Buttons darin brechen um (inline-flex). */
.itse-table__col-actions { white-space: normal; text-align: right; }
.itse-table__col-actions .itse-btn,
.itse-table__col-actions > form,
.itse-table__col-actions > form .itse-btn { display: inline-flex; margin: 2px; vertical-align: middle; }
.itse-table__title {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  text-decoration: none;
}
.itse-table__title:hover { color: var(--brand-primary); text-decoration: underline; }
.itse-table__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.itse-table__sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.itse-table__time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.itse-table__cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #fff;
}
/* Owner-Zelle (Avatar + Name) */
.itse-table__owner { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.itse-avatar--xs {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--info-50);
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.itse-table__muted { color: var(--text-muted); }

/* ---------- Tabelle mobil → Cards (≤720px, data-label je td) ---------- */
@media (max-width: 720px) {
  .itse-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .itse-table, .itse-table tbody, .itse-table tr, .itse-table td { display: block; width: 100%; }
  .itse-table tr {
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
  }
  .itse-table td { border: none; padding: 4px 0; display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; }
  .itse-table td::before {
    content: attr(data-label);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    font-size: var(--text-xs);
    flex-shrink: 0;
  }
  .itse-table td.itse-table__cell-title { display: block; }
  .itse-table td.itse-table__cell-title::before { content: ""; }
  .itse-table__col-pick::before, .itse-table__col-actions::before { content: ""; }
  /* Aktions-Buttons duerfen im Card-Layout umbrechen statt zu ueberlaufen. */
  .itse-table__col-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; text-align: left; }
  /* Scroll-Wrapper im Card-Layout neutralisieren (kein H-Scroll der Cards). */
  .itse-table__scroll { overflow-x: visible; }
}

/* ============================================================
 * TICKET-DETAIL (TicketView) — itse-tk* / itse-thread / itse-bubble /
 * itse-composer / itse-audio / itse-timechip. Additiv, .pf-Tokens, BLAU.
 * GUIDE §3.11 (Chat-Blasen) · §3.12 (Composer) · §9(b) (Detail+Panel).
 * Rendert innerhalb der geteilten Shell (.pf.itse-shell .itse-shell__inner).
 * NUR Praesentation — Logik/JS/Endpunkte unveraendert.
 * ============================================================ */

/* ---------- Kopf-/Status-Zeile unter dem Pagehead ---------- */
.itse-tk-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.itse-tk-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  background: var(--surface-sunken);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
.itse-tk-back { margin-right: var(--space-1); }

/* ---------- Banner (Sperre/Archiv/Merge/Parent) ---------- */
.itse-tk-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-primary);
  background: var(--info-50);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}
.itse-tk-banner a { color: inherit; text-decoration: underline; }
.itse-tk-banner__spacer { flex: 1 1 auto; }
.itse-tk-banner--danger  { border-left-color: var(--danger-500);  background: var(--danger-50);  color: var(--danger-500); }
.itse-tk-banner--archive { border-left-color: var(--border-strong); background: var(--surface-sunken); color: var(--text-body); }
.itse-tk-banner--merge   { border-left-color: var(--brand-primary); background: var(--info-50); color: var(--brand-primary); }
.itse-tk-banner--parent  { border-left-color: var(--brand-secondary); background: var(--success-50); color: var(--green-700); }
.itse-tk-banner__sub { font-weight: var(--weight-regular); font-size: var(--text-xs); margin-top: 2px; width: 100%; }
.itse-tk-banner .itse-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Split: Verlauf links, Panels rechts ---------- */
.itse-tk-split { display: grid; grid-template-columns: minmax(0,1fr) 332px; gap: var(--space-5); align-items: start; }
.itse-tk-main { min-width: 0; }
/* KEIN eigenes Scrollen der Aside (kein sticky/max-height/overflow): die Spalte waechst
   im Grid einfach mit und scrollt mit dem Seiteninhalt -> nur EIN Scrollbalken (Doppel-Scroll
   war verwirrend, User-Feedback). */
.itse-tk-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); align-self: start; }
/* Panels NICHT schrumpfen lassen: sonst staucht Flexbox das erste (grosse) Panel und dessen
   overflow:hidden klippt den Inhalt (Status-Feld/Speichern verschwinden). */
.itse-tk-aside > .itse-tkpanel { flex-shrink: 0; }

/* ---------- Verlauf (Chat-Blasen, GUIDE §3.11) ---------- */
.itse-thread { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.itse-thread__empty { color: var(--text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-6) 0; }

/* System-Hinweis (zentriert, Pille) */
.itse-thread__sys {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: var(--surface-sunken);
  padding: 5px var(--space-4);
  border-radius: var(--radius-pill);
}
.itse-thread__sys .itse-ico { width: 13px; height: 13px; }

.itse-bubble { display: flex; gap: var(--space-3); max-width: 80%; }
.itse-bubble--in  { align-self: flex-start; }
.itse-bubble--out { align-self: flex-end; flex-direction: row-reverse; }
.itse-bubble__avatar {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itse-bubble--out .itse-bubble__avatar { background: var(--brand-secondary); color: #fff; }
.itse-bubble--internal .itse-bubble__avatar { background: var(--warning-500); color: #fff; }
.itse-bubble__col { min-width: 0; display: flex; flex-direction: column; }
.itse-bubble__meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 5px; flex-wrap: wrap; }
.itse-bubble--out .itse-bubble__meta { flex-direction: row-reverse; }
.itse-bubble__author { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.itse-bubble__time { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); }
.itse-bubble__vis { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--weight-semibold); }
.itse-bubble__vis .itse-ico { width: 11px; height: 11px; }
.itse-bubble__vis--public   { color: var(--green-700); }
.itse-bubble__vis--internal { color: #8a5e00; }
.itse-bubble__vis--ext { display: inline-flex; align-items: center; gap: 4px; background: var(--warning-50); color: #996a00; font-size: 10px; font-weight: var(--weight-semibold); padding: 1px 7px; border-radius: var(--radius-pill); }
.itse-bubble__vis--ext .itse-ico { width: 11px; height: 11px; }
/* S4 (Stefan, 2026-09-09): Antwortkanal je Nachricht – Farbstreifen an der Blase + Kanalwort.
   Gilt fuer beide Richtungen (unsere Antwort UND die Nachricht des Kunden). */
.itse-bubble__chan {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: var(--weight-semibold);
  padding: 1px 7px; border-radius: var(--radius-pill); letter-spacing: .01em;
}
.itse-bubble__chan--email    { background: var(--blue-100);   color: var(--brand-primary); }
.itse-bubble__chan--whatsapp { background: var(--success-50); color: var(--green-700); }
.itse-bubble__chan--portal   { background: #ede9fe;           color: #5b21b6; }
.itse-bubble__chan--telefon  { background: var(--surface-sunken); color: var(--text-muted); }
.itse-bubble--ch-email    .itse-bubble__body { box-shadow: inset 3px 0 0 var(--brand-primary); }
.itse-bubble--ch-whatsapp .itse-bubble__body { box-shadow: inset 3px 0 0 var(--green-700); }
.itse-bubble--ch-portal   .itse-bubble__body { box-shadow: inset 3px 0 0 #7c3aed; }
.itse-bubble--ch-telefon  .itse-bubble__body { box-shadow: inset 3px 0 0 var(--text-muted); }
.itse-bubble--out.itse-bubble--ch-email    .itse-bubble__body { box-shadow: inset -3px 0 0 var(--brand-primary); }
.itse-bubble--out.itse-bubble--ch-whatsapp .itse-bubble__body { box-shadow: inset -3px 0 0 var(--green-700); }
.itse-bubble--out.itse-bubble--ch-portal   .itse-bubble__body { box-shadow: inset -3px 0 0 #7c3aed; }
.itse-bubble--out.itse-bubble--ch-telefon  .itse-bubble__body { box-shadow: inset -3px 0 0 var(--text-muted); }
.tk-time-range { font-variant-numeric: tabular-nums; }
.itse-bubble__split {
  margin-left: var(--space-1);
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  padding: 2px; border-radius: var(--radius-xs);
  opacity: .6;
}
.itse-bubble__split:hover { opacity: 1; color: var(--brand-primary); background: var(--info-50); }
.itse-bubble__split .itse-ico { width: 14px; height: 14px; }
.itse-bubble__body {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 15px;
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.itse-bubble--out .itse-bubble__body  { border-radius: 14px 4px 14px 14px; }
/* Blasenfarbe nach Sender (wie Mockup): eingehend (Kunde) WEISS/links, ausgehend (Mitarbeiter) GRUEN/rechts.
   Interne Notiz (amber) steht zuletzt -> hoechster Vorrang, ueberschreibt in/out fuer Notizen. */
.itse-bubble--in  .itse-bubble__body { background: var(--surface-card); border-color: var(--border-subtle); }
.itse-bubble--out .itse-bubble__body { background: var(--success-50); border-color: color-mix(in srgb, var(--brand-secondary) 28%, transparent); }
.itse-bubble--internal .itse-bubble__body { background: var(--warning-50); border: var(--border-width) dashed color-mix(in srgb, var(--warning-500) 55%, transparent); }
/* Inhalt der Nachricht */
.itse-bubble__body p { margin: .4rem 0; }
.itse-bubble__body p:first-child { margin-top: 0; }
.itse-bubble__body p:last-child { margin-bottom: 0; }
.itse-bubble__body ul, .itse-bubble__body ol { padding-left: 1.5rem; margin: .4rem 0; }
.itse-bubble__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.itse-bubble__body a { color: var(--brand-primary); }
.itse-bubble__body pre { background: var(--surface-sunken); padding: .6rem .8rem; border-radius: var(--radius-sm); overflow-x: auto; }
.itse-bubble__body code { background: var(--surface-sunken); padding: .1rem .3rem; border-radius: var(--radius-xs); }
.itse-bubble__body pre code { background: none; padding: 0; }
.itse-bubble__body table { border-collapse: collapse; margin: .5rem 0; max-width: 100%; }
.itse-bubble__body th, .itse-bubble__body td { border: var(--border-width) solid var(--border-subtle); padding: .3rem .55rem; text-align: left; vertical-align: top; }
.itse-bubble__body th { background: var(--surface-sunken); font-weight: var(--weight-semibold); }
.itse-bubble__body li p { display: inline; margin: 0; }
.itse-bubble__body li:has(input[type=checkbox]) { list-style: none; margin-left: -1rem; }
.itse-bubble__body li input[type=checkbox] { margin-right: .45rem; vertical-align: middle; }

/* Pro-Antwort gebuchte interne Dauer (Feature C) */
.itse-bubble__booked {
  align-self: flex-end;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: #8a5e00;
  background: var(--warning-50);
  border: var(--border-width) solid color-mix(in srgb, var(--warning-500) 45%, transparent);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
}
.itse-bubble--out .itse-bubble__booked { align-self: flex-end; }
.itse-bubble__booked .itse-ico { width: 11px; height: 11px; }

/* Anhang-Karten unter der Nachricht */
.itse-att { margin-top: var(--space-2); }
.itse-att__img { max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); display: block; }
.itse-att__file {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 11px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.itse-att__file:hover { background: var(--surface-sunken); }
.itse-att__file .itse-ico { width: 16px; height: 16px; color: var(--brand-primary); }
.itse-att__file-size { color: var(--text-muted); font-weight: var(--weight-regular); }
.itse-att__reveal {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 9px 12px;
  background: var(--warning-50);
  border: var(--border-width) dashed color-mix(in srgb, var(--warning-500) 55%, transparent);
  color: #9a3412;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.itse-att__reveal:hover { background: var(--warning-50); filter: brightness(.97); }
.itse-att__reveal .itse-ico { width: 14px; height: 14px; }
.itse-att__transcript {
  font-size: var(--text-xs);
  color: var(--text-body);
  margin-top: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  overflow-wrap: anywhere;
}
.itse-att__transcript--muted { color: var(--text-muted); }
.itse-att__stt { font-weight: var(--weight-semibold); color: var(--text-muted); }

/* Audio-Player (Sprachnachricht, GUIDE §3.11) */
.itse-audio { width: 100%; max-width: 360px; display: block; margin-top: var(--space-1); }

/* ---------- Quick-/Command-Menue („+ Mehr…") ---------- */
.itse-tk-quick { position: relative; text-align: center; margin: var(--space-4) 0 var(--space-2); }
.itse-tk-quick__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-strong);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 7px var(--space-3);
  border-radius: var(--radius-sm);
}
.itse-tk-quick__trigger:hover { background: var(--surface-sunken); }
.itse-tk-quick__trigger .itse-ico { width: 15px; height: 15px; }
.itse-cmd {
  position: absolute; left: 50%; transform: translateX(-50%); top: 100%;
  margin-top: var(--space-1);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 268px; max-width: min(92vw, 308px);
  z-index: 50;
  padding: var(--space-2);
  text-align: left;
}
.itse-cmd[hidden] { display: none; }
.itse-cmd__searchwrap { padding: 2px 2px var(--space-2); }
.itse-cmd__search {
  width: 100%; font: inherit; font-size: var(--text-sm);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 8px var(--space-3);
}
.itse-cmd__search:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--ring-brand); }
.itse-cmd__items { max-height: 264px; overflow-y: auto; }
.itse-cmd__item {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 9px var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-body);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.itse-cmd__item:hover, .itse-cmd__item.active { background: var(--info-50); color: var(--brand-primary); }
.itse-cmd__item[hidden] { display: none; }
.itse-cmd__empty { padding: 9px var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.itse-cmd__empty[hidden] { display: none; }

/* ---------- Composer (BlockNote-Mount, GUIDE §3.12) ---------- */
.itse-composer {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-top: var(--space-2);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.itse-composer.is-internal { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-500) 45%, transparent); }
.itse-composer__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.itse-composer__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-strong); margin: 0; }
.itse-composer__actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.itse-composer__editor { margin: 0 0 var(--space-3); }
/* BlockNote host innerhalb des Composers (Mount-Punkt) */
.itse-composer .bn-host { border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); }

/* Sichtbarkeits-Schalter (Lock-Pill) */
.itse-vis { display: inline-flex; align-items: center; cursor: pointer; user-select: none; margin: 0 0 var(--space-3); }
.itse-vis input { position: absolute; opacity: 0; width: 0; height: 0; }
.itse-vis__pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: var(--border-width) solid color-mix(in srgb, var(--warning-500) 55%, transparent);
  background: var(--warning-50);
  color: #92580a;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.itse-vis input:checked + .itse-vis__pill {
  border-color: color-mix(in srgb, var(--brand-secondary) 45%, transparent);
  background: var(--success-50);
  color: var(--green-700);
}
.itse-vis:focus-within .itse-vis__pill { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.itse-vis__pill .itse-ico { width: 14px; height: 14px; }

/* Composer-Bar: Senden links + Kanalauswahl kompakt rechts */
.itse-composer__bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.itse-composer__channel { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.itse-composer__channel-field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.itse-composer__channel-label { font-size: var(--text-xs); color: var(--text-muted); }
.itse-composer__channel-field .itse-select { font-size: var(--text-xs); padding: 6px var(--space-2); min-height: 34px; max-width: 240px; }
.itse-composer__also { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: var(--text-xs); color: var(--text-body); }
.itse-composer__also input { width: auto; min-height: 0; }
.itse-composer__err { color: var(--danger-500); font-size: var(--text-sm); }

/* Subtask-Hinweisbanner im Composer */
.itse-composer__subbanner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--info-50);
  border: var(--border-width) solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--brand-primary);
}
.itse-composer__subbanner[hidden] { display: none; }
.itse-composer__subcancel { margin-left: auto; background: none; border: none; color: var(--brand-primary); font-size: var(--text-xs); cursor: pointer; text-decoration: underline; }

/* Techniker-Sprachantwort + Timer-Buttons spiegeln itse-btn--secondary */
.itse-tk-voice { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.itse-tk-voice__msg { font-size: var(--text-xs); color: var(--text-muted); }
.itse-btn.is-running { background: var(--danger-50); border-color: color-mix(in srgb, var(--danger-500) 45%, transparent); color: var(--danger-500); }
.itse-tk-timerdisp { font-family: var(--font-mono); font-weight: var(--weight-semibold); margin-left: 5px; }

/* ---------- Gebuchte-Zeit-Chips im Antwortentwurf (Feature C) ---------- */
.itse-drafttimes { margin-top: var(--space-3); }
.itse-drafttimes[hidden] { display: none; }
.itse-drafttimes__hint { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 5px; }
.itse-timechip {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  margin-bottom: 6px;
  background: var(--success-50);
  display: flex; align-items: flex-start; gap: var(--space-2);
}
.itse-timechip__info { flex: 1; min-width: 0; font-size: var(--text-sm); }
.itse-timechip__meta { color: var(--text-muted); }
.itse-timechip__note { color: var(--text-body); margin-top: 3px; overflow-wrap: anywhere; }
.itse-timechip__actions { display: flex; gap: 4px; flex-shrink: 0; }
.itse-timechip__btn {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xs);
  cursor: pointer; line-height: 1;
  padding: 5px 8px;
  color: var(--text-body);
  font-size: var(--text-sm);
}
.itse-timechip__btn:hover { background: var(--info-50); }
.itse-timechip__btn--del { color: var(--danger-500); }
.itse-timechip__btn--del:hover { background: var(--danger-50); }
.itse-timechip__edit { width: 100%; margin-top: 8px; padding-top: 8px; border-top: var(--border-width) dashed var(--border-subtle); display: flex; flex-direction: column; gap: 6px; }
.itse-timechip__edit label { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-xs); color: var(--text-muted); }
.itse-timechip__edit input, .itse-timechip__edit select, .itse-timechip__edit textarea {
  font: inherit; font-size: var(--text-sm); padding: 6px var(--space-2);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-sm);
}
.itse-timechip__edit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.itse-timechip__edit-msg { font-size: var(--text-xs); }

/* ---------- Rechte Panels (einklappbar, GUIDE §9b) ---------- */
.itse-tkpanel {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.itse-tkpanel > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.itse-tkpanel > summary::-webkit-details-marker { display: none; }
.itse-tkpanel > summary:hover { background: var(--surface-sunken); }
.itse-tkpanel__chev { color: var(--text-muted); display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.itse-tkpanel__chev .itse-ico { width: 15px; height: 15px; }
.itse-tkpanel[open] > summary .itse-tkpanel__chev { transform: rotate(90deg); }
.itse-tkpanel__badge {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.itse-tkpanel__badge--num {
  font-family: var(--font-mono);
  color: var(--brand-primary);
  background: var(--info-50);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
.itse-tkpanel__body { padding: 2px var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* Meta-Zeilen (Label links, Wert rechts) */
.itse-metarow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.itse-metarow__k { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); flex-shrink: 0; }
.itse-metarow__v { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); text-align: right; overflow-wrap: anywhere; }
.itse-tkpanel__divider { height: 1px; background: var(--border-subtle); margin: 2px 0; }

/* Panel-Karten (Sub-/Merge-Blocks, gebuchte Zeit, Anhang-Chip) */
.itse-tkcard {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}
.itse-tkcard__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.itse-tkcard__title { color: var(--text-strong); }
.itse-tkcard__sub { color: var(--text-muted); margin-top: 3px; overflow-wrap: anywhere; }
.itse-tkcard__link { margin-left: auto; font-size: var(--text-xs); color: var(--brand-primary); text-decoration: none; white-space: nowrap; }
.itse-tkcard__link:hover { text-decoration: underline; }
.itse-tkcard--booked { display: flex; flex-direction: column; gap: 3px; }
.itse-tkcard__head { display: flex; justify-content: space-between; gap: var(--space-2); }
.itse-tkcard__amt { font-weight: var(--weight-bold); color: var(--text-strong); }
.itse-tkcard__bill { color: var(--green-700); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.itse-tkcard__bill--internal { color: #8a5e00; }
.itse-tksum { font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-sm); }
.itse-tk-attchip { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.itse-tk-attchip__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.itse-tk-attchip__size { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* Checklisten im Panel */
.itse-chkgroup { display: flex; flex-direction: column; gap: 4px; }
.itse-chkgroup__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); color: var(--text-strong); }
.itse-chkgroup__progress { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-medium); }
.itse-chkbar { height: 6px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; margin: 2px 0 6px; }
.itse-chkbar > i { display: block; height: 100%; background: var(--brand-secondary); border-radius: var(--radius-pill); transition: width var(--dur-base); }
.itse-chkitem { display: flex; align-items: center; gap: var(--space-2); padding: 6px 7px; border-radius: var(--radius-sm); }
.itse-chkitem:hover { background: var(--surface-sunken); }
.itse-chkitem input[type=checkbox] { width: 18px; height: 18px; flex: none; cursor: pointer; accent-color: var(--brand-secondary); }
.itse-chkitem label { cursor: pointer; font-size: var(--text-sm); flex: 1; color: var(--text-body); }
.itse-chkitem.done label { text-decoration: line-through; color: var(--text-muted); }
/* NEU: optionale Beschreibung unter dem Punkt-Label (nur wenn vorhanden gerendert) */
.itse-chkitem:has(.itse-chkitem__desc) { align-items: flex-start; }
.itse-chkitem__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.itse-chkitem__main label { display: block; }
.itse-chkitem__desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
/* NEU: Zeilen-Editor im Popup "Checkliste hinzufügen" */
.itse-chkrows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.itse-chkrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.itse-chkrow .itse-input { flex: 1 1 160px; min-width: 0; }
.itse-chkrow__desc { flex-basis: 100%; }

.itse-tkhint { font-size: var(--text-xs); color: var(--text-muted); }

/* Kunde-Panel (Avatar + Tags) */
.itse-tk-cust { display: flex; align-items: center; gap: var(--space-3); }
.itse-tk-cust__av { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--blue-100); color: var(--brand-primary); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.itse-tk-cust__name { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-strong); }

/* Toggle-Switch (Abrechenbar im Zeit-Popup) */
.itse-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); user-select: none; }
.itse-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.itse-switch__track { position: relative; width: 42px; height: 24px; background: var(--border-default); border-radius: var(--radius-pill); transition: background var(--dur-fast); flex: none; }
.itse-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-xs); transition: transform var(--dur-fast); }
.itse-switch input:checked + .itse-switch__track { background: var(--brand-secondary); }
.itse-switch input:checked + .itse-switch__track::after { transform: translateX(18px); }
.itse-switch input:focus-visible + .itse-switch__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 30%, transparent); }
.itse-switch__lbl { font-weight: var(--weight-medium); color: var(--text-body); }
.itse-switch__lbl small { display: block; color: var(--text-muted); font-weight: var(--weight-regular); font-size: var(--text-xs); }

/* ---------- Modals / Popups (GUIDE §3.9) ---------- */
.itse-tkmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh var(--space-4); overflow-y: auto; }
.itse-tkmodal[hidden] { display: none; }
.itse-tkmodal__backdrop { position: fixed; inset: 0; background: rgba(15,25,40,.5); backdrop-filter: blur(2px); }
.itse-tkmodal__box {
  position: relative;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  max-height: 92vh;
}
.itse-tkmodal__head { display: flex; align-items: center; gap: var(--space-2); padding: 14px var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); }
.itse-tkmodal__head h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-strong); }
.itse-tkmodal__x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 4px 6px; display: inline-flex; }
.itse-tkmodal__x:hover { color: var(--text-strong); }
.itse-tkmodal__x .itse-ico { width: 18px; height: 18px; }
.itse-tkmodal__body { padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.itse-tkmodal__foot { display: flex; align-items: center; gap: var(--space-2); padding: 12px var(--space-4); border-top: var(--border-width) solid var(--border-subtle); flex-wrap: wrap; }
.itse-tkmodal__msg { font-size: var(--text-sm); margin-left: 4px; }
.itse-tkmodal--top { z-index: 1100; padding-top: 6vh; }

/* Stoppuhr-Zeile im Zeit-Popup */
.itse-stopwatch { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.itse-stopwatch__time { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }

/* Durchsuchbare Popup-Listen (Leistung / Mitarbeiter / Merge-Ziel) */
.itse-poplist {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-card);
}
.itse-poplist[hidden] { display: none; }
.itse-popopt { padding: 9px var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-body); border-bottom: var(--border-width) solid var(--border-subtle); }
.itse-popopt:last-child { border-bottom: none; }
.itse-popopt:hover, .itse-popopt.active { background: var(--info-50); }
.itse-popopt[hidden] { display: none; }
.itse-popopt[aria-selected="true"] { font-weight: var(--weight-semibold); }
.itse-popopt__sub { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; overflow-wrap: anywhere; }
.itse-popempty { padding: 9px var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.itse-popempty[hidden] { display: none; }

/* Merge-Quellen (Verlauf-Spalte) */
.itse-merged { margin-bottom: var(--space-4); }
.itse-merged__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.itse-merged__block { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); margin-top: var(--space-3); overflow: hidden; }
.itse-merged__bar { background: var(--info-50); padding: 8px 11px; font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.itse-merged__bar strong { color: var(--brand-primary); }
.itse-merged__msgs { padding: 9px 11px; }
.itse-related { border-top: var(--border-width) solid var(--border-subtle); padding: 6px 0; font-size: var(--text-sm); }
.itse-related__meta { color: var(--text-muted); font-size: var(--text-xs); margin-bottom: 3px; }

/* ---------- Responsive (≤980px Panels unter Verlauf, ≤720px Drawer/Sheet) ---------- */
@media (max-width: 980px) {
  .itse-tk-split { grid-template-columns: 1fr; }
  .itse-tk-aside { position: static; max-height: none; overflow: visible; order: 2; }
}
@media (max-width: 720px) {
  /* ----- Kopfzeile: kompakt & umbruchsicher (Shell-Header bleibt) ----- */
  .itse-tk-head { gap: 6px; margin-bottom: var(--space-3); }
  .itse-tk-head .itse-tk-back { margin-right: auto; }

  /* ----- Chat-Blasen: WhatsApp-Stil wie im Mockup ----- */
  /* Avatare am Handy ausblenden (Mockup zeigt keine) → mehr Blasenbreite,
     Name steht ohnehin in der Meta-Zeile. Reine Optik, kein Hook entfernt. */
  .itse-thread { gap: var(--space-3); }
  .itse-bubble { max-width: 85%; gap: 0; }
  .itse-bubble__avatar { display: none; }
  /* Position links/rechts = WER gesendet hat (Kunde --in links / Mitarbeiter --out rechts).
     FARBE = Sichtbarkeit (oeffentlich gruen / intern amber) -> kommt aus den Basis-Regeln
     .itse-bubble--public/--internal, identisch zum Desktop. KEINE Faerbung nach Sender. */
  .itse-bubble--in  { align-self: flex-start; }
  .itse-bubble--out { align-self: flex-end; }
  .itse-bubble__body { padding: 10px 13px; }
  /* Meta-Zeile (Label „öffentlich/interne Notiz" + Zeit + Name) gut lesbar */
  .itse-bubble__meta { gap: 6px; margin-bottom: 4px; }
  .itse-bubble--out .itse-bubble__meta { padding-right: 2px; }
  .itse-bubble--in  .itse-bubble__meta { padding-left: 2px; }
  .itse-att, .itse-att .itse-audio { max-width: 100%; }

  /* ----- Seitenpanels: volle Breite, saubere Karten unter dem Verlauf ----- */
  .itse-tk-split { gap: var(--space-4); }
  .itse-tk-aside { width: 100%; gap: var(--space-3); }
  .itse-tkpanel { width: 100%; }
  .itse-tkpanel__body { padding: 2px var(--space-3) var(--space-3); }
  /* kein horizontales Scrollen durch zu breite Inhalte */
  .itse-tkcard, .itse-tk-attchip { max-width: 100%; }
  .itse-tk-attchip__name { min-width: 0; }

  /* ----- Composer: in-flow am Ende des Verlaufs, mobiltauglich -----
     Bewusst NICHT position:sticky: der Composer ist im DOM bereits das letzte
     Element der Center-Spalte (#tk-history → +Mehr → Composer). sticky/negative
     Margins hatten ihn visuell zwischen die Nachrichten gezogen → entfernt. */
  .itse-composer {
    padding: var(--space-3);
  }
  .itse-composer__head { margin-bottom: var(--space-2); }
  .itse-composer__actions { width: 100%; margin-left: 0; }
  .itse-composer__actions .itse-btn { flex: 1 1 auto; justify-content: center; }
  .itse-composer__bar { gap: var(--space-2); }
  .itse-composer__bar #reply-submit { flex: 1 1 100%; justify-content: center; }
  .itse-composer__channel { width: 100%; }
  .itse-composer__channel-field { width: 100%; }
  .itse-composer__channel-field .itse-select { max-width: 100%; flex: 1 1 auto; }
  .itse-tk-voice { gap: var(--space-2); }
  .itse-tk-voice .itse-btn { flex: 1 1 auto; justify-content: center; }

  /* ----- Timer- & sonstige Modale: als Bottom-Sheet ----- */
  .itse-tkmodal { padding: 0; align-items: flex-end; }
  .itse-tkmodal__box { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 88vh; }
  .itse-tkmodal--top { padding: 0; }
  /* Greifbarer Sheet-Griff oben (rein dekorativ) */
  .itse-tkmodal__head { position: relative; }
  .itse-tkmodal__head::before {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--border-default);
  }
  /* Stoppuhr im Zeit-Modal: groß & zentriert wie im Mockup */
  .itse-stopwatch { justify-content: center; }
  .itse-stopwatch__time { flex: 1 1 100%; text-align: center; font-size: var(--text-2xl); }
  .itse-stopwatch .itse-btn { flex: 1 1 auto; justify-content: center; }
  .itse-tkmodal__foot { flex-wrap: wrap; }
  .itse-tkmodal__foot .itse-btn { flex: 1 1 auto; justify-content: center; }

  /* ----- „Mehr …"-Aktionsmenü als Bottom-Sheet (Mockup „Aktionen") ----- */
  /* Das JS toggelt nur [hidden]; hier wird das absolute Dropdown zum Sheet. */
  .itse-cmd:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    transform: none; margin: 0;
    width: 100%; min-width: 0; max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 24px rgba(15,32,60,.16);
    padding: var(--space-4) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
  }
  .itse-cmd:not([hidden])::before {
    content: ""; display: block; width: 40px; height: 4px; margin: 0 auto var(--space-3);
    border-radius: var(--radius-pill); background: var(--border-default);
  }
  .itse-cmd__items { max-height: 60vh; }
  .itse-cmd__item { padding: 13px var(--space-3); font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) {
  .itse-tkpanel__chev, .itse-composer, .itse-chkbar > i { transition: none !important; }
}

/* ---------- Legacy JS-Listen-Klassen (von TicketView-JS dynamisch erzeugt;
 *  Klassennamen bleiben aus JS-Stabilitaetsgruenden erhalten) -> itse-Optik. */
.pf .tk-ss-wrap { position: relative; }
.pf .tk-ss-list, .pf .tk-svc-list, .pf .tk-st-asg-list {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-top: 2px;
  max-height: 220px; overflow-y: auto;
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.pf .tk-svc-list, .pf .tk-st-asg-list { position: static; box-shadow: none; margin: -2px 0 4px; }
.pf .tk-ss-list[hidden], .pf .tk-svc-list[hidden], .pf .tk-st-asg-list[hidden] { display: none; }
.pf .tk-ss-opt, .pf .tk-svc-opt, .pf .tk-st-asg-opt {
  padding: 8px var(--space-3); cursor: pointer; font-size: var(--text-sm);
  color: var(--text-body); border-bottom: var(--border-width) solid var(--border-subtle);
}
.pf .tk-ss-opt:last-child, .pf .tk-svc-opt:last-child, .pf .tk-st-asg-opt:last-child { border-bottom: none; }
.pf .tk-ss-opt:hover, .pf .tk-ss-opt.active,
.pf .tk-svc-opt:hover, .pf .tk-svc-opt.active,
.pf .tk-st-asg-opt:hover, .pf .tk-st-asg-opt.active { background: var(--info-50); }
.pf .tk-ss-opt[aria-selected="true"], .pf .tk-svc-opt[aria-selected="true"] { font-weight: var(--weight-semibold); }
.pf .tk-ss-empty { padding: 8px var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
/* Server-gerenderte Popup-Listen -> itse-poplist-Optik. */
.pf .tk-pop-list { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); max-height: 260px; overflow-y: auto; background: var(--surface-card); }
.pf .tk-pop-opt { padding: 9px var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-body); border-bottom: var(--border-width) solid var(--border-subtle); }
.pf .tk-pop-opt:last-child { border-bottom: none; }
.pf .tk-pop-opt:hover, .pf .tk-pop-opt.active { background: var(--info-50); }
.pf .tk-pop-opt[hidden] { display: none; }
.pf .tk-pop-opt .tk-pop-sub { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; overflow-wrap: anywhere; }
.pf .tk-pop-empty { padding: 9px var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.pf .tk-pop-empty[hidden] { display: none; }

/* ============================================================
 * KUNDENDETAIL (/kunden/detail) — cd-* Präsentationsklassen.
 * Additiv; nutzt bestehende .pf-Tokens. BLAU primär, Ampel 80/100.
 * Migration der Stammdaten/Lexware/GoCardless/CRM-Ansicht (2026-06-28).
 * ============================================================ */

/* --- Legacy-Token-Aliase: die CRM-/SLA-Modul-Partials (nicht editierbar) nutzen
 *     --border/--radius/--text/--danger/--success/--warning/--warning-bg aus app.css.
 *     Unter der neuen Shell (nur design-system.css) auf die pf-Tokens mappen,
 *     damit die eingebundenen Modul-Abschnitte stimmig aussehen. --- */
.pf {
  --border: var(--border-subtle);
  --radius: var(--radius-sm);
  --text: var(--text-strong);
  --danger: var(--danger-500);
  --success: var(--success-500);
  --warning: #b45309;
  --warning-bg: var(--warning-50);
}

/* --- Kompatibilität für Modul-Abschnitt-Markup (.card/.btn/.alert/.kv aus den
 *     CRM-/SLA-Partials), nur innerhalb der Shell, damit nichts Globales bricht. --- */
.itse-shell .card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.itse-shell .card h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.itse-shell .card h3 { font-size: var(--text-md); color: var(--text-strong); margin: 0 0 var(--space-2); }
.itse-shell .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1;
  padding: 10px var(--space-4); border-radius: var(--radius-md);
  border: var(--border-width) solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.itse-shell .btn:active { transform: translateY(1px); }
.itse-shell .btn-sm { padding: 7px var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.itse-shell .btn-primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-brand); }
.itse-shell .btn-primary:hover { background: var(--brand-primary-hover); }
.itse-shell .btn-secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.itse-shell .btn-secondary:hover { background: var(--surface-sunken); }
.itse-shell .btn:disabled,
.itse-shell .btn[disabled],
.itse-shell .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.itse-shell .btn-primary:disabled:hover,
.itse-shell .btn-primary[disabled]:hover,
.itse-shell .btn-primary[aria-disabled="true"]:hover { background: var(--brand-primary); }
.itse-shell .btn-secondary:disabled:hover,
.itse-shell .btn-secondary[disabled]:hover,
.itse-shell .btn-secondary[aria-disabled="true"]:hover { background: var(--surface-card); }
.itse-shell .btn:disabled:active,
.itse-shell .btn[disabled]:active,
.itse-shell .btn[aria-disabled="true"]:active { transform: none; }
.itse-shell .alert {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-primary); background: var(--info-50);
  color: var(--text-body); font-size: var(--text-sm); margin-bottom: var(--space-4);
}
.itse-shell .alert-info { border-left-color: var(--brand-primary); background: var(--info-50); }
.itse-shell .alert-warning { border-left-color: var(--warning-500); background: var(--warning-50); color: #7a5300; }
.itse-shell .kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.itse-shell .kv dt { color: var(--text-muted); }
.itse-shell .kv dd { margin: 0; word-break: break-word; }

/* --- Sub-Header-Band --- */
.cd-subhead {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding-bottom: var(--space-4); margin-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.cd-subhead__back { flex-shrink: 0; }
.cd-subhead__avatar {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  background: var(--info-50); color: var(--brand-primary);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.cd-subhead__id { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cd-subhead__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--text-strong); }
.cd-subhead__chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cd-subhead__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.cd-chip-mono {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 3px 9px;
}
.cd-badge--blocked { background: var(--danger-50); color: var(--danger-500); }
.cd-badge--inline { font-size: var(--text-xs); }

/* --- Zweispaltiges Layout (links Stammdaten/CRM, rechts Lexware/GoCardless/Abrechnung) --- */
.cd-split { display: flex; gap: var(--space-5); align-items: flex-start; }
.cd-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cd-col--main { flex: 1 1 auto; }
.cd-col--side { flex: 0 0 320px; max-width: 320px; }
.cd-card { margin: 0; }
.cd-crm-jumps { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.cd-mt { margin-top: var(--space-4); }

/* --- CR15 360-Grad-Kundenakte --- */
/* Mockup 02 (2026-09-09): Die Akte fuellt die Breite (wie Ticketansicht), der Shell-H1 entfaellt –
   der Name steht in der Akten-Kopfzeile, davor die Brotkrume „Kunden › Name". */
.itse-shell__inner:has(.crm360) { max-width: none; }
.itse-shell__inner:has(.crm360) > .itse-shell__pagehead { display: none; }
.crm360-crumb { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.crm360-crumb a { color: var(--text-muted); text-decoration: none; }
.crm360-crumb a:hover { color: var(--brand-primary); text-decoration: underline; }
.crm360-crumb strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.crm360-contactline span { display: inline-flex; align-items: center; gap: 6px; }
.crm360-contactline em { font-style: normal; color: var(--text-muted); opacity: .75; }
.crm360-contactline a { color: var(--text-body); text-decoration: none; }
.crm360-contactline a:hover { color: var(--brand-primary); text-decoration: underline; }
.crm360-contactline__ico { width: 15px; height: 15px; flex: 0 0 15px; color: var(--text-muted); }
.crm360-menu { position: relative; }
.crm360-menu > summary { list-style: none; cursor: pointer; }
.crm360-menu > summary::-webkit-details-marker { display: none; }
.crm360-menu__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 14rem;
  display: grid; padding: var(--space-1); background: var(--surface-card, #fff);
  border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.crm360-menu__list a, .crm360-menu__list button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none;
  font: inherit; font-size: var(--text-sm); color: var(--text-body); text-decoration: none;
  border-radius: var(--radius-xs, 6px); cursor: pointer;
}
.crm360-menu__list a:hover, .crm360-menu__list button:hover { background: var(--surface-sunken); }
.crm360-menu__danger { color: var(--danger-500) !important; }
.crm360 { display: grid; gap: var(--space-4); min-width: 0; max-width: 100%; margin-bottom: var(--space-5); }
.crm360, .crm360-card { scroll-margin-top: calc(var(--space-4) + 64px); }
.crm360-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); }
.crm360-id { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.crm360-id > div:last-child { min-width: 0; max-width: 100%; }
.crm360-avatar {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--weight-bold) var(--text-xl)/1 var(--font-display);
}
.crm360-titleline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.crm360-titleline h2 { margin: 0; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; word-break: normal; }
.crm360-meta, .crm360-contactline {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-2);
}
.crm360-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.crm360-tabs {
  display: flex; gap: var(--space-3); min-width: 0; max-width: 100%; overflow-x: auto; border-bottom: var(--border-width) solid var(--border-subtle);
}
.crm360-tabs a {
  flex: 0 0 auto; padding: 0 0 var(--space-2); color: var(--text-muted);
  text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
/* S2 (Stefan, 2026-09-09): echte Reiter. Ohne JS bleibt der erste optisch aktiv (Sprungmarken). */
.crm360-tabs:not(.is-js) a:first-child,
.crm360-tabs a.is-active { color: var(--brand-primary); border-bottom: 2px solid var(--brand-primary); }
.crm360-tabs.is-js a { cursor: pointer; }
.crm360-panel { display: grid; gap: var(--space-4); min-width: 0; }
.crm360-panel > .itse-card, .crm360-panel > .card { margin: 0; }
.crm360.is-tab .crm360-grid { display: none; }
.kunden-doppelt { margin: var(--space-2) 0 0 1.1rem; padding: 0; font-size: var(--text-sm); }
.kunden-doppelt a { font-weight: var(--weight-semibold); }
.cd-badge--emaildoppelt { text-decoration: none; }
.kunden-360-namelink { color: inherit; text-decoration: none; }
.kunden-360-namelink:hover { color: var(--brand-primary); text-decoration: underline; }
.crm360-grid { display: grid; grid-template-columns: minmax(14rem, 0.78fr) minmax(24rem, 1.45fr) minmax(18rem, 1fr); gap: var(--space-4); align-items: start; }
.crm360-col { display: grid; gap: var(--space-4); min-width: 0; }
.crm360-card { padding: var(--space-4); }
.crm360-kv { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-sm); }
.crm360-kv dt { color: var(--text-muted); }
.crm360-kv dd { margin: 0; font-weight: var(--weight-semibold); color: var(--text-body); }
.crm360-state { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.crm360-state--ok { background: var(--success-50); color: var(--success-500); }
.crm360-state--warn { background: var(--warning-50); color: #7a5300; }
.crm360-state--danger { background: var(--danger-50); color: var(--danger-500); }
.crm360-state--neutral { background: var(--surface-muted); color: var(--text-muted); }
.crm360-empty { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.crm360-wide { width: 100%; justify-content: center; margin-top: var(--space-3); }
.crm360-mini-list { display: grid; gap: var(--space-2); }
.crm360-mini-list a {
  display: grid; gap: 2px; padding: var(--space-2) 0; text-decoration: none; color: var(--text-body);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.crm360-mini-list a:last-child { border-bottom: 0; }
.crm360-mini-list span { color: var(--text-muted); font-size: var(--text-xs); }
.crm360-table { display: grid; gap: 0; }
.crm360-table-head, .crm360-table-row {
  display: grid; grid-template-columns: minmax(12rem, 1fr) 7rem 5.5rem 7rem; gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0; font-size: var(--text-sm);
}
.crm360-table-head { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-bottom: var(--border-width) solid var(--border-subtle); }
.crm360-table-row { color: var(--text-body); text-decoration: none; border-bottom: var(--border-width) solid var(--border-subtle); }
.crm360-table-row strong, .crm360-total strong { text-align: right; font-variant-numeric: tabular-nums; }
.crm360-total { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); font-weight: var(--weight-bold); }
.crm360-activity { display: grid; gap: var(--space-2); }
.crm360-activity-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border-subtle); }
.crm360-activity-row:last-child { border-bottom: 0; }
.crm360-activity-row span, .crm360-activity-row small { color: var(--text-muted); font-size: var(--text-xs); }
.crm360-signal-list { display: grid; gap: var(--space-2); }
.crm360-signal {
  display: grid; gap: 3px; padding: var(--space-3); border: var(--border-width) solid var(--border-subtle);
  border-left: 4px solid var(--brand-primary); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-body);
}
.crm360-signal--handeln { border-left-color: var(--danger-500); }
.crm360-signal--qualifizieren { border-left-color: var(--warning-500); }
.crm360-signal--beobachten { border-left-color: var(--success-500); }
.crm360-signal span, .crm360-signal small, .crm360-signal em, .crm360-source { color: var(--text-muted); font-size: var(--text-xs); font-style: normal; }
.crm360-disc-profile { display: grid; gap: var(--space-2); }
.crm360-disc-profile ul { margin: var(--space-2) 0 0 1.1rem; padding: 0; color: var(--text-muted); font-size: var(--text-sm); }
.crm360-bar { display: grid; grid-template-columns: 1.5rem 1fr 3rem; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.crm360-bar i { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--brand-primary); width: 0; }
.crm360-bar em { font-style: normal; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.crm360-disc-form { display: grid; grid-template-columns: 1fr 4rem 4rem 5rem; gap: var(--space-2); }
.crm360-disc-form input, .crm360-disc-form select { min-width: 0; padding: 0.45rem 0.55rem; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-sm); }
.crm360-disc-form input[type="text"], .crm360-disc-form button { grid-column: 1 / -1; }
.crm360-msg { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--info-50); font-size: var(--text-sm); }

@media (max-width: 1180px) {
  .crm360-grid { grid-template-columns: 1fr 1fr; }
  .crm360-col--main { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* clip verhindert horizontales Ueberlaufen, ohne den dokumentweiten
     Touch-Scroll auf Android Chrome in einen inneren Scroll-Container umzulenken. */
  .itse-shell__scroll { overflow-x: clip; overflow-y: visible; padding: var(--space-4); }
  .crm360-head { flex-direction: column; }
  .crm360-id { width: 100%; }
  .crm360-titleline h2 { font-size: var(--text-xl); line-height: 1.2; }
  .crm360-actions { width: 100%; justify-content: stretch; }
  .crm360-actions .itse-btn { flex: 1 1 8rem; justify-content: center; }
  .crm360-grid { grid-template-columns: 1fr; }
  .crm360-col--main { grid-column: auto; }
  .crm360-table-head { display: none; }
  .crm360-table-row { grid-template-columns: 1fr; gap: 2px; }
  .crm360-table-row strong { text-align: left; }
  .crm360-activity-row { grid-template-columns: 1fr; gap: 2px; }
  .crm360-kv { grid-template-columns: 1fr; }
}

/* --- Übersichts-Kennzahlen (rechte Spalte: Kontingent-Meter, offene Tickets) --- */
.cd-metric { margin-bottom: var(--space-3); }
.cd-metric:last-child { margin-bottom: 0; }
.cd-metric--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cd-metric__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.cd-metric__label { font-size: var(--text-sm); color: var(--text-muted); }
.cd-metric__val { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); }
.cd-metric__badge { font-variant-numeric: tabular-nums; }

/* --- Key/Value-Listen --- */
.cd-kv { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); margin: 0; }
.cd-kv dt { color: var(--text-muted); }
.cd-kv dd { margin: 0; word-break: break-word; color: var(--text-body); }
.cd-kv--tight { grid-template-columns: 90px 1fr; margin-bottom: var(--space-2); }
.cd-mono { font-family: var(--font-mono); }
.cd-mono--sm { font-size: var(--text-xs); }
.cd-pre { white-space: pre-wrap; }
.cd-muted { color: var(--text-muted); }
.cd-help { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.cd-fineprint { color: var(--text-muted); font-size: var(--text-xs); margin: var(--space-2) 0; }
.cd-link-sm { font-size: var(--text-sm); }
.cd-upper { text-transform: uppercase; }

/* --- Formular-Reihen --- */
.cd-formrow { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cd-formrow--end { align-items: flex-end; }
.cd-formrow--mt { margin-top: var(--space-3); align-items: center; }
.cd-grow { flex: 1 1 200px; }
.cd-field--narrow { flex: 0 0 110px; max-width: 130px; }
.cd-inline-btn { margin-left: var(--space-2); }

/* --- Inline-Statusmeldungen (fetch-Rückmeldung) --- */
.cd-msg {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm);
  border-left: 3px solid var(--brand-primary); background: var(--info-50); color: var(--text-body);
  margin-bottom: var(--space-3);
}
.cd-msg--ok { border-left-color: var(--brand-primary); background: var(--info-50); }
.cd-msg--err { border-left-color: var(--danger-500); background: var(--danger-50); color: #8a1f1f; }

/* --- Ansprechpartner --- */
.cd-person { padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-sm); }
.cd-person:last-child { border-bottom: none; }
.cd-phones { margin-top: var(--space-3); font-size: var(--text-sm); }
.cd-ap-take { margin-top: var(--space-2); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.cd-ap-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--success-500); }

/* --- Eigene Ansprechpartner-Verwaltung (customer_contacts, Lexware-unabhaengig) --- */
.cd-ap-list { display: flex; flex-direction: column; }
.cd-ap { padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-sm); }
.cd-ap:last-child { border-bottom: none; }
.cd-ap--archiviert { opacity: 0.62; }
.cd-ap__head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.cd-ap__funktion { color: var(--text-muted); margin-top: 2px; }
.cd-ap__kontakt { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.cd-ap__notiz { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.cd-ap__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.cd-ap-checks { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.cd-ap-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }

/* Mobil (≤720px): Aktionsknoepfe je Ansprechpartner in voller Breite, damit sie am Handy
   sicher treffbar bleiben und nicht als Stummel umbrechen. */
@media (max-width: 720px) {
  .cd-ap__actions { flex-direction: column; align-items: stretch; }
  .cd-ap__actions .itse-btn,
  .cd-ap-take .itse-btn { width: 100%; justify-content: center; }
}

/* --- Details/Summary (Bearbeiten ausklappen) --- */
.cd-details { margin-top: var(--space-2); }
.cd-summary { cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-body); }
.cd-summary--sm { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-muted); }

/* --- GoCardless-Statusbox --- */
.cd-gc-status {
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-md);
  font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: var(--space-3);
}
.cd-gc-status--ok   { background: var(--success-50); color: var(--success-500); }
.cd-gc-status--none { background: var(--warning-50); color: #7a5300; }
.cd-gc-status--warn { background: var(--danger-50); color: var(--danger-500); }
.cd-gc-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.cd-gc-msg { font-size: var(--text-sm); }
.cd-side-status { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.cd-side-status--ok { color: var(--success-500); }
.cd-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* --- Letzte Abrechnungen (kompakte Zeilen statt Tabelle in der schmalen Spalte) --- */
.cd-invoices { display: flex; flex-direction: column; }
.cd-invoice {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-sm);
}
.cd-invoice:last-child { border-bottom: none; }
.cd-invoice__month { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.cd-invoice__amount { font-weight: var(--weight-semibold); color: var(--text-strong); text-align: right; }
.cd-invoice__status { grid-column: 1 / -1; color: var(--text-body); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cd-invoice__link { grid-column: 1 / -1; font-size: var(--text-xs); }

/* --- Kontingent-Ampel (REAL: <80 ok / >=80 warn / >=100 over) — Klassen bereit,
 *     falls eine echte Quota-Quelle in der Detailseite ergänzt wird. --- */
.cd-meter { margin-top: var(--space-2); }
.cd-meter .itse-meter__fill--ok   { background: var(--success-500); }
.cd-meter .itse-meter__fill--warn { background: var(--warning-500); }
.cd-meter .itse-meter__fill--over { background: var(--danger-500); }

/* --- Sticky Save-Bar (Edit-Modus; eingeblendet via .is-visible) --- */
.cd-savebar {
  position: sticky; bottom: 0; z-index: 40;
  display: none; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-5) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card); border-top: var(--border-width) solid var(--border-default);
  box-shadow: 0 -4px 12px rgba(15,32,60,.08);
}
.cd-savebar.is-visible { display: flex; }
.cd-savebar__spacer { margin-left: auto; }

/* --- Alerts (cd-) --- */
.cd-alert--danger { border-left-color: var(--danger-500); background: var(--danger-50); color: #8a1f1f; }
.cd-alert--ok { border-left-color: var(--success-500); background: var(--success-50); color: var(--green-700); }
/* S3: Bearbeiten-Formular in der Akte + darunter eingehaengter Lexware-Kontaktblock */
.cd-edit { margin: 0; }
.cd-edit__lexware:not(:empty) { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-subtle); }
.cd-edit__lexware .cd-card { box-shadow: none; padding: 0; border: 0; }
.cd-alert--warning { border-left-color: var(--warning-500); background: var(--warning-50); color: #7a5300; }

/* --- Responsive: rechte Spalte unter die linke, kein H-Scroll --- */
@media (max-width: 720px) {
  .cd-split { flex-direction: column; gap: var(--space-4); }
  .cd-col--side { flex: 1 1 auto; max-width: none; width: 100%; }
  .cd-subhead__actions { margin-left: 0; width: 100%; }
  .cd-kv, .cd-kv--tight { grid-template-columns: 1fr; gap: var(--space-1); }
  .cd-kv dt { margin-top: var(--space-2); }
}

/* ============================================================
 * EINSTELLUNGEN (Core /einstellungen) — itse-set-*
 * Zweispaltig: links sticky Abschnitts-Subnav, rechts gestapelte
 * Karten je Abschnitt. Nur Praesentation; alle Tokens, BLAU primaer.
 * ============================================================ */
.itse-set { display: flex; gap: var(--space-5); align-items: flex-start; max-width: 1080px; }

/* ---- Linke Subnav (sticky) ---- */
.itse-set__nav {
  flex: 0 0 192px;
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.itse-set__navitem {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  background: transparent;
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.itse-set__navitem:hover { background: var(--surface-sunken); }
.itse-set__navitem.is-active {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}
.itse-set__navitem .itse-ico { width: 17px; height: 17px; flex: none; }

/* ---- Rechte Spalte (Karten) ---- */
.itse-set__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.itse-set__main .itse-card { scroll-margin-top: calc(var(--space-4) + 64px); }
.itse-set__cardtitle {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
  margin: 0 0 var(--space-1);
}
.itse-set__carddesc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4);
}
.itse-set__carddesc code {
  font-family: var(--font-mono); font-size: 0.82em;
  background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 1px 5px;
}
.itse-set__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.itse-set__form { display: flex; flex-direction: column; gap: var(--space-4); }
.itse-set__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.itse-set__hint { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-normal); }
.itse-set__hint code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 1px 4px;
}
.itse-set__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-1); }
.itse-set__divider { border: none; border-top: var(--border-width) solid var(--border-subtle); margin: var(--space-2) 0; }
.itse-set__subhead { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-strong); margin: 0; }
.itse-set__block { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-subtle); }
.itse-set__spinner { color: var(--text-muted); font-size: var(--text-sm); }
.itse-set__result:empty { display: none; }
.itse-set__mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.itse-set__maxw { max-width: 280px; }
.itse-set__textlabel { margin-top: var(--space-3); }
.itse-switch--top { align-items: flex-start; }
.itse-badge--danger { background: var(--danger-50); color: var(--danger-500); }
.itse-set__kv { margin-bottom: var(--space-4); }

.setup-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.setup-workflow-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 180px;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.setup-workflow-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.setup-workflow-card__head h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.setup-workflow-card__deps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.setup-workflow-card__dep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.setup-workflow-card__dep:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border-subtle));
  color: var(--brand-primary);
}
.setup-workflow-card__dep span {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}
.setup-workflow-card__dep.is-missing {
  border-color: color-mix(in srgb, var(--warning-500) 40%, var(--border-subtle));
  background: var(--warning-50);
}
.setup-workflow-card__dep.is-ok {
  border-color: color-mix(in srgb, var(--success-500) 30%, var(--border-subtle));
}
@media (max-width: 640px) {
  .kunden-360-link {
    min-width: 86px;
    min-height: 36px;
    padding-block: 9px;
  }
  [data-setup-check] .itse-btn--sm {
    min-height: 36px;
    padding-block: 9px;
  }
  .setup-workflow-card__dep {
    min-height: 34px;
    padding-block: 8px;
  }
}
.setup-workflow-card__missing {
  margin: auto 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

/* ---- Maskiertes Key-Feld mit Reveal-Button ---- */
.itse-set__reveal { position: relative; }
.itse-set__reveal .itse-input { padding-right: 42px; }
.itse-set__revealbtn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.itse-set__revealbtn:hover { color: var(--brand-primary); background: var(--surface-sunken); }
.itse-set__revealbtn .itse-ico { width: 18px; height: 18px; }

/* ---- E-Mail-Vorlagen-Editor (Core, contenteditable) ---- */
.itse-set__mailfield {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.itse-set__mailfield legend { font-weight: var(--weight-semibold); padding: 0 var(--space-2); color: var(--text-strong); }
.itse-set__metoolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
  border: var(--border-width) solid var(--border-default); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--space-2); background: var(--surface-sunken);
  margin-top: var(--space-2);
}
.itse-set__metoolbar button {
  border: var(--border-width) solid var(--border-default); background: var(--surface-card);
  border-radius: var(--radius-xs); padding: 3px var(--space-2); font-size: var(--text-xs);
  cursor: pointer; line-height: 1.4; color: var(--text-body);
}
.itse-set__metoolbar .me-ph {
  background: var(--info-50); border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  color: var(--brand-primary); font-family: var(--font-mono);
}
.itse-set__metoolbar .me-sep { width: 1px; align-self: stretch; background: var(--border-subtle); margin: 0 var(--space-1); }
.itse-set__meeditor {
  border: var(--border-width) solid var(--border-default); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-3) var(--space-4); min-height: 160px; font-size: var(--text-sm);
  background: var(--surface-card); color: var(--text-strong);
}
.itse-set__meeditor:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--ring-brand); }
.itse-set__meraw {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-default); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong);
  background: var(--surface-card);
}

/* ---- Mobile: Subnav oben als horizontale Scrollchips, Karten 1-spaltig ---- */
@media (max-width: 720px) {
  /* align-items:flex-start (Desktop, fuer die sticky Subnav) gibt in der Spalten-
     Richtung ALLEN Kindern ihre Inhaltsbreite statt der Fensterbreite — dadurch war
     die ganze Einstellungsseite am Handy breiter als das Fenster (gemessen bei
     390 px: Chip-Leiste 1810 px, Kartenspalte 462 px). Am Handy also stretch. */
  .itse-set { flex-direction: column; gap: var(--space-4); align-items: stretch; }
  .itse-set__main { min-width: 0; }
  /* .itse-btn ist white-space:nowrap. Auf der Einstellungsseite gibt es lange
     Knopfbeschriftungen (WhatsApp-Vorlagen, 428 px) — die haben die Seite selbst nach
     dem Stretch noch quer geschoben. Nur hier, nur am Handy: umbrechen lassen. */
  .itse-set .itse-btn { white-space: normal; text-align: center; }
  .itse-set__nav {
    flex: 1 1 auto;
    /* VORGEFUNDENER FEHLER (gemessen bei 390 px, 2026-08-08): overflow-x:auto allein
       reicht nicht. Ein Flex-Element hat min-width:auto und wird so breit wie sein
       Inhalt — die Chip-Leiste war 1810 px breit und hat die GANZE Einstellungsseite
       quer scrollen lassen, statt selbst zu scrollen.
       Der eigentliche Grund: .itse-set traegt `align-items: flex-start` — in der
       Spalten-Richtung heisst das, die Leiste bekommt ihre INHALTSBREITE statt der
       Containerbreite, und dann greift overflow-x nie. align-self:stretch bindet sie
       an die Fensterbreite, min-width:0 erlaubt zusaetzlich das Schrumpfen. */
    align-self: stretch;
    min-width: 0;
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    -webkit-overflow-scrolling: touch;
  }
  .itse-set__navitem { flex: 0 0 auto; }
  .itse-set__row { grid-template-columns: 1fr; }
  .setup-workflow-grid { grid-template-columns: 1fr; }
  .setup-workflow-card { min-height: 0; }
  .setup-workflow-card__head { align-items: flex-start; }
}

/* ============================================================
 * Zeiten zuordnen (Tickets-Modul, modules/tickets/.../TimeAssign.php)
 * Zwei-Panel-Board (Offene Zeiten <-> Tickets), Zeit-/Ticket-Karten,
 * interne Sektion, Bulkbar, Mini-Aktion, Ticket-Picker-Modal.
 * Alles ueber --p-/itse-Tokens. BLAU primaer (--brand-primary), Akzent gruen.
 * JS-Hooks (Klassen/IDs/data-*) bleiben unveraendert – hier NUR Optik.
 * ============================================================ */

/* Danger-Variante der Alert-Box (Lade-/Clockodo-Fehler). */
.itse-alert--danger { border-left-color: var(--danger-500); background: var(--danger-50); }

/* ---- Pagehead-Aktion + Intro ---- */
.pf.itse-shell .ta-headactions { display: flex; align-items: center; gap: var(--space-2); }
.pf.itse-shell .ta-intro {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}
.pf.itse-shell .ta-intro strong { color: var(--text-body); font-weight: var(--weight-semibold); }

/* ---- Filterleiste (GET-Form als Pills/Felder) ---- */
.pf.itse-shell .ta-filterbar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--space-4);
}
.pf.itse-shell .ta-filterfield { min-width: 140px; }
.pf.itse-shell .ta-filterapply { align-self: flex-end; }
.pf.itse-shell .ta-scope-toggle { display: inline-flex; gap: var(--space-2); align-items: center; align-self: flex-end; }

/* ---- Board-Leiste (Hinweis + Anker tauschen) ---- */
.pf.itse-shell .ta-board-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.pf.itse-shell .ta-dnd-hint { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Board: zwei Karten + Mitteltrenner ---- */
.pf.itse-shell .ta-board {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--space-5);
}
.pf.itse-shell .ta-board.swapped { flex-direction: row-reverse; }
.pf.itse-shell .ta-board.swapped .ta-panel { border-radius: var(--radius-lg); }

.pf.itse-shell .ta-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.pf.itse-shell #ta-panel-times   { border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-right: none; }
.pf.itse-shell .ta-panel--tickets { flex: 1.2 1 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-left: none; }

/* Mittel-Trenner */
.pf.itse-shell .ta-divider {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border-top: var(--border-width) solid var(--border-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
  color: var(--text-muted);
}
.pf.itse-shell .ta-divider svg { width: 22px; height: 22px; }

/* Panel-Kopf */
.pf.itse-shell .ta-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pf.itse-shell .ta-panel-ico {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.pf.itse-shell .ta-panel-ico svg { width: 17px; height: 17px; }
.pf.itse-shell .ta-panel-ico--time   { background: var(--success-50); color: var(--brand-secondary); }
.pf.itse-shell .ta-panel-ico--ticket { background: var(--info-50);    color: var(--brand-primary); }
.pf.itse-shell .ta-panel-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-strong);
  margin: 0;
  flex: 1 1 auto;
}
.pf.itse-shell .ta-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.pf.itse-shell .ta-count--warn { background: var(--warning-50); color: #996a00; }

/* Such-Box im Panel */
.pf.itse-shell .ta-panel-search-wrap { position: relative; margin-bottom: var(--space-3); }
.pf.itse-shell .ta-search-ico {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.pf.itse-shell .ta-panel-search,
.pf.itse-shell .ta-picker-search {
  width: 100%;
  padding: 9px var(--space-3) 9px 36px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-body);
  font: inherit; font-size: var(--text-sm);
}
.pf.itse-shell .ta-panel-search:focus,
.pf.itse-shell .ta-picker-search:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--ring-brand);
  background: var(--surface-card);
}

/* Panel-Body (Scroll-Liste) */
.pf.itse-shell .ta-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 70vh;
  overflow: auto;
  padding: 2px;
}

/* ---- Karte (Basis) ---- */
.pf.itse-shell .ta-card {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: var(--space-3);
}

/* ---- Zeit-Karte ---- */
.pf.itse-shell .ta-time {
  background: var(--surface-page);
  border-radius: 11px;
  padding: 12px 13px;
  cursor: grab;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-base);
}
.pf.itse-shell .ta-time:active { cursor: grabbing; }
.pf.itse-shell .ta-time:hover { border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.pf.itse-shell .ta-time.dragging {
  opacity: 1;
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1deg);
}
.pf.itse-shell .ta-time.dragging .ta-time-min,
.pf.itse-shell .ta-time.dragging .ta-time-meta,
.pf.itse-shell .ta-time.dragging .ta-time-grip,
.pf.itse-shell .ta-time.dragging .ta-time-meta .sep,
.pf.itse-shell .ta-time.dragging .ta-time-meta strong { color: #fff; }
.pf.itse-shell .ta-time.removing { opacity: 0; transform: scale(.96); }

.pf.itse-shell .ta-time-top { display: flex; align-items: baseline; gap: var(--space-2); }
.pf.itse-shell .ta-time-grip { flex: 0 0 auto; color: var(--text-muted); align-self: center; }
.pf.itse-shell .ta-time-grip svg { width: 16px; height: 16px; display: block; }
.pf.itse-shell .ta-time-title {
  flex: 1 1 auto; min-width: 0;
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--text-strong);
  word-break: break-word;
}
.pf.itse-shell .ta-time-title--empty { color: var(--text-muted); font-style: italic; font-weight: var(--weight-regular); }
.pf.itse-shell .ta-time-min {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--text-body);
}
.pf.itse-shell .ta-time-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0 22px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.pf.itse-shell .ta-time-meta strong { color: var(--text-body); font-weight: var(--weight-semibold); }
.pf.itse-shell .ta-time-meta .sep { color: var(--border-strong); }

.pf.itse-shell .ta-time-actions {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin: var(--space-3) 0 0 22px;
}
.pf.itse-shell .ta-msg { font-size: var(--text-xs); }
.pf.itse-shell .ta-msg.ok  { color: var(--brand-secondary); }
.pf.itse-shell .ta-msg.err { color: var(--danger-500); }

/* Mini-Aktion (#19) */
.pf.itse-shell .ta-mini {
  margin: var(--space-3) 0 0 22px;
  border-top: var(--border-width) dashed var(--border-default);
  padding-top: var(--space-3);
}
.pf.itse-shell .ta-mini[hidden] { display: none; }
.pf.itse-shell .ta-mini-field { margin: 0 0 var(--space-2); }
.pf.itse-shell .ta-mini-text { width: 100%; resize: vertical; }
.pf.itse-shell .ta-mini-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Ticket-Karte (Drop-Ziel) ---- */
.pf.itse-shell .ta-ticket {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-base);
}
.pf.itse-shell .ta-ticket:hover { border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.pf.itse-shell .ta-ticket.dragover {
  border: var(--border-width-strong) dashed var(--brand-primary);
  background: var(--info-50);
}
.pf.itse-shell .ta-ticket.dragover .ta-ticket-flash::before {
  content: "+ Hier ablegen …";
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
}
.pf.itse-shell .ta-ticket.flash-ok {
  border-color: var(--brand-secondary);
  background: var(--success-50);
}
.pf.itse-shell .ta-ticket-top { display: flex; align-items: center; gap: var(--space-2); }
.pf.itse-shell .ta-ticket-title {
  flex: 1 1 auto; min-width: 0;
  font-weight: var(--weight-semibold);
  font-size: 13.5px;
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf.itse-shell .ta-ticket-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.pf.itse-shell .ta-ticket-cust { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.pf.itse-shell .ta-ticket-flash { font-size: var(--text-xs); color: var(--brand-secondary); margin-top: 4px; min-height: 0; }

/* ---- Leerzustand ---- */
.pf.itse-shell .ta-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3) 2px; }

/* ---- Interne Arbeitszeiten (#18) ---- */
.pf.itse-shell .ta-internal-wrap { margin-bottom: var(--space-5); }
.pf.itse-shell #ta-internal-toggle[disabled] { opacity: .55; cursor: default; }
.pf.itse-shell .ta-internal-section {
  margin-top: var(--space-3);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
  padding: var(--space-4);
}
.pf.itse-shell .ta-internal-section[hidden] { display: none; }
.pf.itse-shell .ta-internal-intro {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 80ch;
}
.pf.itse-shell .ta-internal-intro strong { color: var(--text-body); font-weight: var(--weight-semibold); }
.pf.itse-shell .ta-internal-body { max-height: none; overflow: visible; }

/* Karte: interne Zeit */
.pf.itse-shell .ta-time-internal { position: relative; padding-left: 30px; }
.pf.itse-shell .ta-intern-tag {
  display: inline-block;
  font-size: 10px; font-weight: var(--weight-semibold);
  color: #6b46c1; background: #f3effc;
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
}
[data-pf-theme="dark"] .pf.itse-shell .ta-intern-tag { color: #c9b6f0; background: #2a2140; }
.pf.itse-shell .ta-time-suggest { border-color: var(--warning-500); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning-500) 35%, transparent); }
.pf.itse-shell .ta-suggest-badge {
  display: inline-block;
  font-size: 10px; font-weight: var(--weight-bold);
  color: #996a00; background: var(--warning-50);
  border: var(--border-width) solid var(--warning-500);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
  margin-bottom: var(--space-2);
}

/* Mehrfach-Auswahl an internen Karten */
.pf.itse-shell .ta-select-wrap { position: absolute; top: 12px; left: var(--space-2); margin: 0; z-index: 1; }
.pf.itse-shell .ta-select-wrap input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--brand-primary); }
.pf.itse-shell .ta-time-internal.ta-selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 35%, transparent);
  background: var(--info-50);
}

/* Sammel-Aktionsleiste */
.pf.itse-shell .ta-bulkbar {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--info-50);
}
.pf.itse-shell .ta-bulkbar[hidden] { display: none; }
.pf.itse-shell .ta-bulk-count { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }

/* Sticky Tickets-Spalte (Drop-Ziel bleibt sichtbar) */
@media (min-width: 721px) {
  .pf.itse-shell .ta-board > #ta-panel-tickets { position: sticky; top: var(--space-2); align-self: flex-start; max-height: calc(100vh - var(--space-5)); }
}

/* ---- Ticket-Picker-Modal (Drag-loser Weg / Handy) ---- */
.pf.itse-shell .ta-picker {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: flex-start; justify-content: center;
  background: rgba(15, 25, 40, .5);
  padding: 6vh var(--space-4);
}
.pf.itse-shell .ta-picker.open { display: flex; }
.pf.itse-shell .ta-picker-box {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 520px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.pf.itse-shell .ta-picker-head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: var(--border-width) solid var(--border-subtle); }
.pf.itse-shell .ta-picker-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); color: var(--text-strong);
}
.pf.itse-shell .ta-picker-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.pf.itse-shell .ta-picker-list li {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--text-body);
}
.pf.itse-shell .ta-picker-list li:hover,
.pf.itse-shell .ta-picker-list li.active { background: var(--surface-sunken); }
.pf.itse-shell .ta-picker-list li.empty { color: var(--text-muted); cursor: default; }
.pf.itse-shell .ta-picker-list li .tnum { font-family: var(--font-mono); color: var(--text-muted); }
.pf.itse-shell .ta-picker-foot { padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--border-subtle); text-align: right; }

/* ---- Mobile (<=720px): einspaltig, Trenner weg, kein H-Scroll ---- */
@media (max-width: 720px) {
  .pf.itse-shell .ta-board,
  .pf.itse-shell .ta-board.swapped { flex-direction: column; }
  .pf.itse-shell .ta-divider { display: none; }
  .pf.itse-shell #ta-panel-times,
  .pf.itse-shell .ta-panel--tickets,
  .pf.itse-shell .ta-board.swapped .ta-panel { border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-subtle); }
  .pf.itse-shell #ta-panel-times { margin-bottom: var(--space-3); }
  .pf.itse-shell .ta-panel-body { max-height: none; overflow: visible; }
  .pf.itse-shell .ta-time { cursor: default; }
  .pf.itse-shell .ta-filterfield { min-width: 0; flex: 1 1 140px; }
}

/* ============================================================================
 * Abrechnung (Monatslauf + geteilt)
 * ----------------------------------------------------------------------------
 * Generische, WIEDERVERWENDBARE Bausteine für die Abrechnungs-Seiten
 * (Monatslauf, Prüfansicht, Flatrates, Auslastung): Stepper, Kennzahlen-Reihe,
 * Lebenszyklus-/Status-Chips, Lauf-Karte, Historie-Layout. Alles über
 * --brand-*/--p-*-Tokens (Dark-Theme-tauglich), keine hartkodierten Farben.
 * ========================================================================== */

/* ---------- Stepper (mehrstufige Prozess-Leiste) ---------- */
.pf.itse-shell .itse-stepper {
  display: flex;
  flex-direction: row;   /* .itse-card setzt column -> hier hart auf Reihe (sonst vertikaler Stepper) */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.pf.itse-shell .itse-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  text-align: center;
}
.pf.itse-shell .itse-stepper__dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  border: 2px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-muted);
  flex-shrink: 0;
}
.pf.itse-shell .itse-stepper__dot .itse-ico { width: 18px; height: 18px; }
.pf.itse-shell .itse-stepper__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  max-width: 96px;
  line-height: var(--leading-snug);
}
.pf.itse-shell .itse-stepper__bar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border-subtle);
  border-radius: var(--radius-pill);
  margin-top: 18px;
  min-width: 16px;
}
.pf.itse-shell .itse-stepper__bar--done { background: var(--brand-secondary); }
/* aktiver Schritt = blau gefüllt; erledigte Schritte = grün (Akzent) mit Häkchen */
.pf.itse-shell .itse-stepper__step--current .itse-stepper__dot {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand, #fff);
}
.pf.itse-shell .itse-stepper__step--current .itse-stepper__label {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.pf.itse-shell .itse-stepper__step--done .itse-stepper__dot {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--text-on-brand, #fff);
}

/* ---------- Lebenszyklus-/Status-Chip (generisch, farb-modifiziert) ---------- */
/* Chip-Pille: Soft-BG aus dem Modifier. Der Punkt erbt seine Farbe ebenfalls. */
.pf.itse-shell .itse-life {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.pf.itse-shell .itse-life__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  display: inline-block;
}
/* Farb-Modifier (auf Chip ODER auf einen alleinstehenden __dot anwendbar) */
.pf.itse-shell .itse-life--muted   { background: var(--surface-sunken); color: var(--text-muted); }
.pf.itse-shell .itse-life--warn    { background: var(--warning-50);     color: #996a00; }
.pf.itse-shell .itse-life--primary { background: var(--info-50);        color: var(--brand-primary); }
.pf.itse-shell .itse-life--accent  { background: var(--success-50);     color: var(--brand-secondary); }
.pf.itse-shell .itse-life--danger  { background: var(--danger-50);      color: var(--danger-500); }
/* Alleinstehender Punkt (Legende): nur die Punktfarbe, kein Pillen-BG. */
.pf.itse-shell .itse-life__dot.itse-life--muted   { background: var(--text-muted); }
.pf.itse-shell .itse-life__dot.itse-life--warn    { background: var(--warning-500); }
.pf.itse-shell .itse-life__dot.itse-life--primary { background: var(--brand-primary); }
.pf.itse-shell .itse-life__dot.itse-life--accent  { background: var(--brand-secondary); }
.pf.itse-shell .itse-life__dot.itse-life--danger  { background: var(--danger-500); }

/* ---------- Lauf-Karte (Status-Kopf + Kennzahlen + Aktionen) ---------- */
.pf.itse-shell .itse-runcard { margin-bottom: var(--space-5); }
.pf.itse-shell .itse-runcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pf.itse-shell .itse-runcard__titlerow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pf.itse-shell .itse-runcard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
  margin: 0;
}
.pf.itse-shell .itse-runcard__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.pf.itse-shell .itse-runcard__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pf.itse-shell .itse-runcard__actions form { margin: 0; }

/* ---------- Kennzahlen-Reihe (generische Stat-Werte ohne Karten-Rahmen) ---------- */
.pf.itse-shell .itse-keyfigs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}
.pf.itse-shell .itse-keyfig { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pf.itse-shell .itse-keyfig__label { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); }
.pf.itse-shell .itse-keyfig__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 26px;
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.pf.itse-shell .itse-keyfig__value--warn { color: var(--warning-500); }

/* ---------- Historie + Lebenszyklus-Legende (zweispaltig) ---------- */
.pf.itse-shell .itse-runlayout {
  display: grid;
  grid-template-columns: 1fr; /* einspaltig: Historie volle Breite (6 Spalten passten nicht in 1.6fr -> Aktionen abgeschnitten); Lebenszyklus darunter */
  gap: var(--space-4);
  align-items: start;
}
.pf.itse-shell .itse-runhist__head,
.pf.itse-shell .itse-runhist__empty { padding: var(--space-4) var(--space-5); }
.pf.itse-shell .itse-runhist__title,
.pf.itse-shell .itse-lifecycle__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
  margin: 0;
}
.pf.itse-shell .itse-runhist__empty { color: var(--text-muted); margin: 0; }
.pf.itse-shell .itse-runhist .itse-table th,
.pf.itse-shell .itse-runhist .itse-table td { padding-left: var(--space-5); }
.pf.itse-shell .itse-runhist__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

.pf.itse-shell .itse-lifecycle__lead {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-4);
}
.pf.itse-shell .itse-lifecycle__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pf.itse-shell .itse-lifecycle__list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.pf.itse-shell .itse-lifecycle__list li .itse-life__dot { margin-top: 5px; }
.pf.itse-shell .itse-lifecycle__list strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pf.itse-shell .itse-lifecycle__list span { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Mobile (<=720px): einspaltig, kein Horizontal-Scroll ---------- */
@media (max-width: 720px) {
  .pf.itse-shell .itse-stepper {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .pf.itse-shell .itse-stepper__bar { display: none; }
  .pf.itse-shell .itse-stepper__step { flex: 1 1 40%; }
  .pf.itse-shell .itse-runcard__head { flex-direction: column; }
  .pf.itse-shell .itse-runcard__actions { width: 100%; }
  .pf.itse-shell .itse-runcard__actions .itse-btn,
  .pf.itse-shell .itse-runcard__actions form,
  .pf.itse-shell .itse-runcard__actions form .itse-btn { width: 100%; text-align: center; }
  .pf.itse-shell .itse-runlayout { grid-template-columns: 1fr; }
  .pf.itse-shell .itse-runhist .itse-table td { padding-left: var(--space-4); padding-right: var(--space-4); }
  .pf.itse-shell .itse-runhist__actions { justify-content: flex-start; }
}

/* ==========================================================================
 * Abrechnung — Einträge prüfen (Prüf-/Bestätigungsansicht des Monatslaufs)
 * --------------------------------------------------------------------------
 * NUR Optik. Editier-Tabelle (Desktop) / gestapelte Karten (Mobile),
 * Kundenblock mit Avatar + Kontingent-Meter + Nachberechnungs-Chip,
 * KI-Auto-Modus-Leiste, sticky Abschluss-Fußleiste. Alles über Tokens,
 * Dark-Theme-tauglich. Reicht die bestehenden itse-card/itse-meter/
 * itse-btn/itse-input/itse-textarea/itse-alert-Bausteine an.
 * ========================================================================== */

/* Zurück-Leiste oben */
.pf.itse-shell .itse-rev__topbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }

/* Generische Soft-Badge-Modifier (ergänzen die vorhandenen Status-Varianten) */
.pf.itse-shell .itse-badge--warning { background: var(--warning-50); color: #996a00; }
.pf.itse-shell .itse-badge--accent  { background: var(--success-50); color: var(--brand-secondary); }

/* Generische Alert-Variante (Warnhinweis) */
.itse-alert--warning { border-left-color: var(--warning-500); background: var(--warning-50); }

/* ---------- KI-Auto-Modus-Leiste ---------- */
.pf.itse-shell .itse-rev__aibar {
  position: sticky;
  top: var(--space-3);
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  background: var(--info-50);
  border-color: color-mix(in srgb, var(--brand-primary) 26%, transparent);
}
.pf.itse-shell .itse-rev__aibar-title {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-bold); color: var(--brand-primary);
}
.pf.itse-shell .itse-rev__aibar-title .itse-ico { width: 18px; height: 18px; }
.pf.itse-shell .itse-rev__aibar-note { font-weight: var(--weight-medium); color: var(--text-muted); }
.pf.itse-shell .itse-rev__aibar-sep { color: var(--text-muted); }
.pf.itse-shell .itse-rev__aibar-apply { color: var(--brand-secondary); }
.pf.itse-shell .itse-rev__aibar-status { color: var(--text-muted); font-size: var(--text-sm); margin-left: auto; }

/* ---------- Kundenblock ---------- */
.pf.itse-shell .itse-rev__cust { margin-bottom: var(--space-5); }
.pf.itse-shell .itse-rev__cust-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.pf.itse-shell .itse-rev__avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--info-50); color: var(--brand-primary);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.pf.itse-shell .itse-rev__cust-name {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); color: var(--brand-primary); margin: 0;
}
.pf.itse-shell .itse-rev__cust-count { color: var(--text-muted); font-size: var(--text-sm); }
.pf.itse-shell .itse-rev__cust-flags { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.pf.itse-shell .itse-rev__flag { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.pf.itse-shell .itse-rev__flag--danger  { color: var(--danger-500); }
.pf.itse-shell .itse-rev__flag--warn    { color: var(--warning-500); }
.pf.itse-shell .itse-rev__flag--accent  { color: var(--brand-secondary); }
.pf.itse-shell .itse-rev__flag--primary { color: var(--brand-primary); }
.pf.itse-shell .itse-rev__frinfo-btn { margin-left: auto; }

/* Flatrate-Info-Box */
.pf.itse-shell .itse-rev__frinfo { border-left-color: var(--brand-primary); }
.pf.itse-shell .itse-rev__frinfo-text { white-space: pre-wrap; margin-top: var(--space-2); }

/* ---------- Kontingent-Meter-Zeile ---------- */
.pf.itse-shell .itse-rev__quota {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.pf.itse-shell .itse-rev__quota--nobar { background: transparent; border: none; padding: 0 0 var(--space-2); }
.pf.itse-shell .itse-rev__quota-ico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.pf.itse-shell .itse-rev__quota-ico .itse-ico { width: 18px; height: 18px; }
.pf.itse-shell .itse-rev__quota-id { display: flex; flex-direction: column; min-width: 0; }
.pf.itse-shell .itse-rev__quota-name { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.pf.itse-shell .itse-rev__quota-avail { font-size: var(--text-xs); color: var(--text-muted); }
.pf.itse-shell .itse-rev__quota-transf { color: var(--brand-primary); font-weight: var(--weight-semibold); }
.pf.itse-shell .itse-rev__quota-bar { flex: 1 1 160px; min-width: 120px; }
.pf.itse-shell .itse-rev__quota-bar .itse-meter { margin-top: 0; height: 8px; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); }
.pf.itse-shell .itse-rev__quota-pct { font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-sm); font-family: var(--font-mono); }
.pf.itse-shell .itse-rev__quota-chip { flex-shrink: 0; }

/* ---------- Flatrate-Sammelaktion ---------- */
.pf.itse-shell .itse-rev__frbulk {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-sm); margin-bottom: var(--space-3);
}
.pf.itse-shell .itse-rev__frbulk strong { color: var(--text-strong); }
.pf.itse-shell .itse-rev__frbulk-sep { color: var(--text-muted); }

/* ---------- Editier-Tabelle (Desktop) ---------- */
.pf.itse-shell .itse-rev__table { display: flex; flex-direction: column; }
.pf.itse-shell .itse-rev__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 96px 64px 150px;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.pf.itse-shell .itse-rev__row--head {
  padding: 0 0 var(--space-2);
  border-bottom: var(--border-width-strong) solid var(--border-subtle);
}
.pf.itse-shell .itse-rev__row--head .itse-rev__c {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.pf.itse-shell .itse-rev__row:last-child { border-bottom: none; }
.pf.itse-shell .itse-rev__row--excluded { opacity: 0.4; }
.pf.itse-shell .itse-rev__row--moved {
  background: var(--warning-50); border-radius: var(--radius-sm);
  padding-left: var(--space-3); padding-right: var(--space-3);
}
.pf.itse-shell .itse-rev__row--flatrate {
  background: var(--success-50); border-left: 3px solid var(--brand-secondary);
  border-radius: var(--radius-sm); padding-left: var(--space-3);
}
.pf.itse-shell .itse-rev__row--incoming {
  background: var(--info-50); border-radius: var(--radius-sm);
  padding-left: var(--space-3); padding-right: var(--space-3);
}
.pf.itse-shell .itse-rev__c { min-width: 0; }
.pf.itse-shell .itse-rev__c-date { font-size: var(--text-sm); color: var(--text-body); padding-top: 8px; }
.pf.itse-shell .itse-rev__date { white-space: nowrap; }
.pf.itse-shell .itse-rev__c-date .fr-check { margin-right: var(--space-2); vertical-align: middle; accent-color: var(--brand-primary); }
.pf.itse-shell .itse-rev__service { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.pf.itse-shell .itse-rev__desc { min-height: 56px; font-size: var(--text-sm); }
.pf.itse-shell .itse-rev__moved-to { display: inline-block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--warning-500); }
.pf.itse-shell .itse-rev__movedfrom { font-size: var(--text-xs); color: var(--brand-primary); margin-top: 2px; }
.pf.itse-shell .itse-rev__saved { display: none; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--brand-secondary); font-weight: var(--weight-semibold); }
.pf.itse-shell .itse-rev__hours { text-align: center; padding-left: var(--space-2); padding-right: var(--space-2); }
.pf.itse-shell .itse-rev__orig { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); text-align: center; }
.pf.itse-shell .itse-rev__c-rate { font-size: var(--text-sm); color: var(--text-body); padding-top: 8px; }
.pf.itse-shell .itse-rev__rate { white-space: nowrap; }
.pf.itse-shell .itse-rev__c-act { display: flex; flex-direction: column; gap: var(--space-2); }
.pf.itse-shell .itse-rev__act { justify-content: center; }
/* Obere Reihe: kompakte KI- und Ausschließen-Buttons nebeneinander */
.pf.itse-shell .itse-rev__actrow { display: flex; gap: var(--space-2); align-items: stretch; }
.pf.itse-shell .itse-rev__actrow .itse-rev__act { flex: 1 1 auto; }
/* KI: weiches Hellblau (kein Vollblau) */
.pf.itse-shell .itse-rev__act-ai {
  background: var(--info-50);
  color: var(--brand-primary);
  border: var(--border-width) solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
}
.pf.itse-shell .itse-rev__act-ai:hover { background: color-mix(in srgb, var(--brand-primary) 14%, var(--info-50)); }
/* Ausschließen: Outline-Danger, nur das ✕ */
.pf.itse-shell .itse-rev__act-excl {
  flex: 0 0 auto;
  background: var(--surface-card);
  color: var(--danger-500);
  border: var(--border-width) solid var(--danger-500);
}
.pf.itse-shell .itse-rev__act-excl:hover { background: color-mix(in srgb, var(--danger-500) 10%, var(--surface-card)); }
.pf.itse-shell .itse-rev__incoming-note { font-size: var(--text-xs); color: var(--brand-primary); }

/* Verschieben-Combo */
.pf.itse-shell .itse-rev__move { position: relative; }
.pf.itse-shell .itse-rev__move-search { font-size: var(--text-xs); min-height: 34px; padding: 6px var(--space-2); }
.pf.itse-shell .itse-rev__move-list {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  margin-top: 2px; max-height: 200px; overflow-y: auto;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.pf.itse-shell .itse-rev__move-list div { padding: 8px var(--space-3); font-size: var(--text-sm); cursor: pointer; color: var(--text-body); }
.pf.itse-shell .itse-rev__move-list div:hover { background: var(--surface-sunken); }

/* KI-Ergebnisbox */
.pf.itse-shell .itse-rev__ai {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--info-50);
  border: var(--border-width) solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
  border-radius: var(--radius-sm); font-size: var(--text-xs);
}
.pf.itse-shell .itse-rev__ai-muted { color: var(--text-muted); }
.pf.itse-shell .itse-rev__ai-err { color: var(--danger-500); }
.pf.itse-shell .itse-rev__ai-suggest { margin-top: var(--space-2); }
.pf.itse-shell .itse-rev__ai-accept-lbl { display: block; margin-top: var(--space-2); font-weight: var(--weight-semibold); }

/* Abrechnungsvorschau je Kunde */
.pf.itse-shell .itse-rev__preview {
  font-size: var(--text-sm); color: var(--text-muted);
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken); border-radius: var(--radius-sm);
}
.pf.itse-shell .itse-rev__preview strong { color: var(--text-strong); }
.pf.itse-shell .itse-rev__preview-accent { color: var(--brand-secondary); }

/* Vorwarnung / Erfolg-Gate */
.pf.itse-shell .itse-rev__warn { position: relative; padding-right: var(--space-5); }
.pf.itse-shell .itse-rev__warn-close {
  position: absolute; top: var(--space-2); right: var(--space-3);
  border: none; background: transparent; font-size: var(--text-md);
  cursor: pointer; color: var(--text-muted); line-height: 1;
}
.pf.itse-shell .itse-rev__success { margin-top: var(--space-4); border-color: color-mix(in srgb, var(--brand-secondary) 40%, transparent); }
.pf.itse-shell .itse-rev__success-lead { margin: 0 0 var(--space-3); }
.pf.itse-shell .itse-rev__success-result { font-size: var(--text-sm); margin-left: var(--space-3); }
.pf.itse-shell .itse-rev__actions { margin-block: var(--space-4); min-width: 0; }
.pf.itse-shell .itse-rev__actions h2 { font-size: var(--text-lg); }
.pf.itse-shell .itse-rev__actions-list { list-style: none; padding: 0; margin: 0; }
.pf.itse-shell .itse-rev__actions-list li { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-2); padding-block: var(--space-2); border-bottom: 1px solid var(--border-color, #ddd); overflow-wrap: anywhere; font-size: var(--text-sm); }
.pf.itse-shell .itse-rev__actions-open { color: var(--danger-500); font-weight: 600; }
.pf.itse-shell .itse-rev__existing-list { margin: var(--space-2) 0 var(--space-2) var(--space-4); padding: 0; }

/* ---------- Sticky Abschluss-Fußleiste ---------- */
.pf.itse-shell .itse-rev__footer {
  position: sticky; bottom: var(--space-3); z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: var(--border-width-strong) solid var(--brand-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pf.itse-shell .itse-rev__footer-text { flex: 1 1 240px; font-size: var(--text-sm); min-width: 0; }
.pf.itse-shell .itse-rev__footer-text strong { color: var(--text-strong); margin-right: var(--space-2); }
.pf.itse-shell .itse-rev__footer-text span { color: var(--text-muted); }
.pf.itse-shell .itse-rev__footer-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pf.itse-shell .itse-rev__footer-result { font-size: var(--text-sm); flex-basis: 100%; }
/* Desktop: langes Label zeigen, Kurzlabel verstecken */
.pf.itse-shell .itse-rev__footer-confirm-mobile { display: none; }

/* ---------- Mobile (<=720px): Karten statt Tabelle, sticky Fußleiste ---------- */
@media (max-width: 720px) {
  .pf.itse-shell .itse-rev__aibar { top: var(--space-2); }
  .pf.itse-shell .itse-rev__aibar-status { margin-left: 0; flex-basis: 100%; }

  /* Kopfzeile ausblenden, Felder gestapelt mit eigenem Label */
  .pf.itse-shell .itse-rev__row--head { display: none; }
  .pf.itse-shell .itse-rev__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .pf.itse-shell .itse-rev__row:last-child { border-bottom: var(--border-width) solid var(--border-subtle); }
  .pf.itse-shell .itse-rev__c-date,
  .pf.itse-shell .itse-rev__c-rate { padding-top: 0; }
  /* Jedes Feld bekommt sein eigenes Label (gestapelte Karte) */
  .pf.itse-shell .itse-rev__c[data-label]::before {
    display: block; content: attr(data-label);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin-bottom: var(--space-1);
  }
  .pf.itse-shell .itse-rev__hours { text-align: left; }
  .pf.itse-shell .itse-rev__orig { text-align: left; }
  .pf.itse-shell .itse-rev__c-act { gap: var(--space-2); }
  .pf.itse-shell .itse-rev__move-search { font-size: var(--text-sm); }

  /* Fußleiste: vollbreit, Kurzlabel zeigen */
  .pf.itse-shell .itse-rev__footer {
    left: 0; right: 0; bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-3) var(--space-4);
  }
  .pf.itse-shell .itse-rev__footer-text { display: none; }
  .pf.itse-shell .itse-rev__footer-actions { width: 100%; flex-direction: column-reverse; gap: var(--space-2); }
  .pf.itse-shell .itse-rev__footer-actions .itse-btn { width: 100%; text-align: center; justify-content: center; }
  .pf.itse-shell .itse-rev__footer-confirm-full { display: none; }
  .pf.itse-shell .itse-rev__footer-confirm-mobile { display: inline; }
}

/* ---------- Stepper-Override (robust) ----------
   Die regulaere .pf.itse-shell .itse-stepper{display:flex} griff auf der Live-Seite
   nicht (display blieb block -> vertikaler Stepper). Kombinierter Selektor
   .itse-card.itse-stepper erhoeht die Spezifitaet; am Dateiende = zuletzt geparst. */
.pf.itse-shell .itse-card.itse-stepper:not([hidden]) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: flex-start; }
@media (max-width: 720px) { .pf.itse-shell .itse-card.itse-stepper { flex-wrap: wrap; } }

/* ==========================================================================
 * Abrechnung — Flatrates & Kontingente (Modell-Übersicht /kontingente)
 * --------------------------------------------------------------------------
 * NUR Optik. 4 Stat-Kacheln (über vorhandenes .itse-stat), Filter-Chips-Zeile
 * (.itse-chip / .itse-toolbar) + Suchfeld, Modell-Karten (Kontingente +
 * Flatrates) mit Typ-Badge, Meta-Chips, Verbrauch-Meter und enthalten/
 * Nachberechnung-Badges, plus die Anlegen-/Bearbeiten-Formulare als
 * eingeklappte Karten. Alles über Tokens, Light/Dark-tauglich, ≤720px
 * 1-spaltig & Chips umbrechend. Reicht die bestehenden Bausteine an
 * (itse-card/itse-meter/itse-badge/itse-btn/itse-input/itse-field).
 * ========================================================================== */

/* Stat-Kachel-Grid (4 → responsiv; ersetzt das dashboard-feste itse-dash__kpis) */
.pf.itse-shell .itse-fk__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Such-Box in der Toolbar */
.pf.itse-shell .itse-fk__search { position: relative; flex: 0 1 320px; min-width: 200px; }
.pf.itse-shell .itse-fk__search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: inline-flex;
}
.pf.itse-shell .itse-fk__search-ico .itse-ico { width: 16px; height: 16px; }
.pf.itse-shell .itse-fk__search-input { padding-left: 36px; }

/* Karten-Liste */
.pf.itse-shell .itse-fk__list { display: flex; flex-direction: column; gap: var(--space-3); }

.pf.itse-shell .itse-fk__card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  gap: var(--space-4);
  align-items: center;
}
.pf.itse-shell .itse-fk__card[hidden] { display: none; }
.pf.itse-shell .itse-fk__card--inactive { opacity: 0.6; }

.pf.itse-shell .itse-fk__main { min-width: 0; }
.pf.itse-shell .itse-fk__top {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: 2px;
}
.pf.itse-shell .itse-fk__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--brand-primary);
  text-decoration: none;
}
.pf.itse-shell .itse-fk__name:hover { text-decoration: underline; }
.pf.itse-shell .itse-fk__cust { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }

.pf.itse-shell .itse-fk__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pf.itse-shell .itse-fk__chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  color: var(--text-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.pf.itse-shell .itse-fk__chip--accent { color: var(--brand-secondary); border-color: color-mix(in srgb, var(--brand-secondary) 35%, transparent); }

/* Verbrauchsspalte */
.pf.itse-shell .itse-fk__usage { min-width: 0; }
.pf.itse-shell .itse-fk__usage-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-body); margin-bottom: var(--space-2);
}
.pf.itse-shell .itse-fk__usage-pct { font-weight: var(--weight-bold); }
.pf.itse-shell .itse-fk__usage-pct--ok   { color: var(--brand-secondary); }
.pf.itse-shell .itse-fk__usage-pct--warn { color: var(--warning-500); }
.pf.itse-shell .itse-fk__usage-pct--over { color: var(--danger-500); }
.pf.itse-shell .itse-fk__hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.pf.itse-shell .itse-fk__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }

/* Aktionsspalte */
.pf.itse-shell .itse-fk__actions {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
  text-align: right; white-space: nowrap;
}
.pf.itse-shell .itse-fk__actions .itse-btn { justify-content: center; }
.pf.itse-shell .itse-fk__actions form { margin: 0; }
.pf.itse-shell .itse-fk__actions form .itse-btn { width: 100%; }
.pf.itse-shell .itse-fk__link {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--brand-primary); text-decoration: none;
}
.pf.itse-shell .itse-fk__link:hover { text-decoration: underline; }

.pf.itse-shell .itse-fk__empty { color: var(--text-muted); text-align: center; }

/* Anlegen-/Bearbeiten-Formulare als eingeklappte Karten */
.pf.itse-shell .itse-fk__form { margin-top: var(--space-4); }
.pf.itse-shell .itse-fk__form-summary {
  cursor: pointer; list-style: none; user-select: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--brand-primary);
}
.pf.itse-shell .itse-fk__form-summary::-webkit-details-marker { display: none; }
.pf.itse-shell .itse-fk__form-summary::before { content: '▸'; color: var(--text-muted); margin-right: var(--space-2); }
.pf.itse-shell .itse-fk__form[open] > .itse-fk__form-summary { margin-bottom: var(--space-4); }
.pf.itse-shell .itse-fk__form[open] > .itse-fk__form-summary::before { content: '▾'; }
.pf.itse-shell .itse-fk__form .itse-field { margin-bottom: 0; }
.pf.itse-shell .itse-fk__check {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-body);
  margin: var(--space-3) 0;
}
.pf.itse-shell .itse-fk__check input { width: auto; margin-top: 2px; }
.pf.itse-shell .itse-fk__hr { border: none; border-top: var(--border-width) solid var(--border-subtle); margin: var(--space-5) 0; }
.pf.itse-shell .itse-fk__subhead { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-strong); margin: 0 0 var(--space-2); }
.pf.itse-shell .itse-fk__note { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); }
.pf.itse-shell .itse-fk__fieldset {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}
.pf.itse-shell .itse-fk__fieldset legend { font-size: var(--text-xs); color: var(--text-muted); padding: 0 var(--space-2); }

@media (max-width: 980px) {
  .pf.itse-shell .itse-fk__stats { grid-template-columns: repeat(2, 1fr); }
  .pf.itse-shell .itse-fk__card { grid-template-columns: 1fr; }
  .pf.itse-shell .itse-fk__actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; }
  .pf.itse-shell .itse-fk__actions form,
  .pf.itse-shell .itse-fk__actions form .itse-btn { width: auto; }
}

@media (max-width: 720px) {
  .pf.itse-shell .itse-fk__stats { grid-template-columns: 1fr; }
  .pf.itse-shell .itse-fk__search { flex: 1 1 100%; }
  .pf.itse-shell .itse-fk__filtergrid,
  .pf.itse-shell .itse-fk__form .itse-filtergrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * Abrechnung — Auslastung (Kontingent-Auslastung /kontingent-auslastung)
 * --------------------------------------------------------------------------
 * NUR Optik. Monats-Toolbar, 4 Stat-Kacheln (über vorhandenes .itse-stat),
 * zweispaltiges Layout (links Kunden-Auslastungsbalken, rechts Ampel-
 * Übersicht). Balken rein per CSS aus echten %-Werten über das geteilte
 * .itse-meter (+ --ok/--warn/--over). Alles über Tokens, Light/Dark-tauglich,
 * ≤720px 1-spaltig & ohne Horizontal-Scroll.
 * HINWEIS: kein „Verlauf · letzte 6 Monate"-Diagramm – die Seite lädt nur den
 * gewählten Monat (keine 6-Monats-Serie), pro Kontingent gibt es den „Verlauf →".
 * ========================================================================== */

/* Monats-Toolbar oben rechts (echte GET-Steuerung) */
.pf.itse-shell .itse-qd__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}
.pf.itse-shell .itse-qd__toolbar .itse-select { width: auto; min-width: 130px; }

/* Stat-Kachel-Grid (4 → responsiv) */
.pf.itse-shell .itse-qd__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.pf.itse-shell .itse-qd__stat-sub {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  color: var(--text-muted);
}

/* Zweispaltiges Hauptlayout: links breite Kunden-Karte, rechts Ampel */
.pf.itse-shell .itse-qd__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.pf.itse-shell .itse-qd__side { display: flex; flex-direction: column; gap: var(--space-4); }
.pf.itse-shell .itse-qd__lead { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-4); }

/* Kunden-Hinweiszeile (Clockodo gebucht) */
.pf.itse-shell .itse-qd__custmeta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-4) 0 var(--space-2);
}
.pf.itse-shell .itse-qd__custmeta:first-of-type { margin-top: 0; }
.pf.itse-shell .itse-qd__custmeta strong { color: var(--text-strong); }

/* Ein Auslastungsbalken je Kontingent */
.pf.itse-shell .itse-qd__bar { padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-subtle); }
.pf.itse-shell .itse-qd__bar:last-child { border-bottom: none; }
.pf.itse-shell .itse-qd__bar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
}
.pf.itse-shell .itse-qd__bar-name {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  min-width: 0;
}
.pf.itse-shell .itse-qd__bar-quota { font-weight: var(--weight-medium); color: var(--text-muted); margin-left: var(--space-2); }
.pf.itse-shell .itse-qd__bar-link {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--brand-primary); text-decoration: none; margin-left: var(--space-2);
  white-space: nowrap;
}
.pf.itse-shell .itse-qd__bar-link:hover { text-decoration: underline; }
.pf.itse-shell .itse-qd__bar-pct {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.pf.itse-shell .itse-qd__bar-pct--ok   { color: var(--brand-secondary); }
.pf.itse-shell .itse-qd__bar-pct--warn { color: var(--warning-500); }
.pf.itse-shell .itse-qd__bar-pct--over { color: var(--danger-500); }
.pf.itse-shell .itse-qd__bar-meter { height: 8px; margin-top: 0; }
.pf.itse-shell .itse-qd__bar-foot {
  display: flex; flex-wrap: wrap; gap: 2px var(--space-3);
  font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2);
}
.pf.itse-shell .itse-qd__bar-detail { color: var(--text-muted); }
.pf.itse-shell .itse-qd__bar-warn { font-size: var(--text-xs); color: var(--danger-500); margin-top: var(--space-2); }

/* Flatrate-Zeilen im Kundenblock */
.pf.itse-shell .itse-qd__flats {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--border-width) dashed var(--border-default);
}
.pf.itse-shell .itse-qd__flat {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-sm); padding: var(--space-2) 0;
}
.pf.itse-shell .itse-qd__flat-meta { color: var(--text-muted); }
.pf.itse-shell .itse-qd__flat .itse-btn:nth-last-child(2) { margin-left: auto; }

/* Ampel-Übersicht */
.pf.itse-shell .itse-qd__amp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pf.itse-shell .itse-qd__amp-list li { display: flex; align-items: center; gap: var(--space-3); }
.pf.itse-shell .itse-qd__amp-label { flex: 1 1 auto; font-size: var(--text-sm); color: var(--text-body); }
.pf.itse-shell .itse-qd__amp-count {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
}

.pf.itse-shell .itse-qd__empty { color: var(--text-muted); text-align: center; }

@media (max-width: 980px) {
  .pf.itse-shell .itse-qd__stats { grid-template-columns: repeat(2, 1fr); }
  .pf.itse-shell .itse-qd__layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pf.itse-shell .itse-qd__stats { grid-template-columns: 1fr; }
  .pf.itse-shell .itse-qd__toolbar { justify-content: stretch; }
  .pf.itse-shell .itse-qd__toolbar .itse-select { flex: 1 1 auto; min-width: 0; }
  .pf.itse-shell .itse-qd__flat .itse-btn:nth-last-child(2) { margin-left: 0; }
}

/* ============================================================
 * FEHLERSEITEN (404/403) — schlichte, zentrierte gebrandete Karte.
 * Standalone (kein pf_shell/nav): laedt nur Tokens via .pf. BLAU primaer, „Du".
 * ============================================================ */
.pf.itse-errpage {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
}
.itse-errpage .itse-errcard {
  width: 100%;
  max-width: 440px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.itse-errcard__logo { height: 34px; width: auto; max-width: 200px; object-fit: contain; margin: 0 auto var(--space-5); display: block; }
.itse-errcard__code {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 56px;
  line-height: 1;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.itse-errcard__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-3);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--info-50);
  color: var(--brand-primary);
}
.itse-errcard__icon .itse-ico { width: 24px; height: 24px; }
.itse-errcard__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); color: var(--text-strong); }
.itse-errcard__text { margin: 0 0 var(--space-5); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed, 1.6); }
.itse-errcard__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ============================================================
 * Loesungsflyer (MSP-Ausbau Schritt 3)
 * Originalgetreue digitale Darstellung der Produkt-Flyer
 * (Mike-Bergmann-System): Kopf, blaue Frage-Sprechblasen,
 * Problem/Loesung links, blauer Leistungs-Kasten + weisser
 * Loesungsvorschlags-Kasten rechts, Bestellblock, Unterschrift.
 * Flyer-Blau = --brand-primary (#004aad, wie Vorlagen).
 * Wurzel: <div class="pf itse-flyer"> (Tokens via .pf-Scope).
 * Kein <script> noetig - reine Struktur-Klassen.
 * ============================================================ */

.pf.itse-flyer {
  background: var(--neutral-0);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-5);
  border-radius: var(--radius-md);
}
.pf.itse-flyer *, .pf.itse-flyer *::before, .pf.itse-flyer *::after { box-sizing: border-box; }

/* ---- Kopf: Logo links, Kategorie + Titel rechts ---- */
.itse-flyer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.itse-flyer__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  display: flex;
  flex-direction: column;
}
.itse-flyer__brand-it { color: var(--brand-primary); }
.itse-flyer__brand-etten { color: var(--green-500); letter-spacing: var(--tracking-caps); }
.itse-flyer__headright { text-align: right; max-width: 60%; }
.itse-flyer__category {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.itse-flyer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* ---- Blaue Frage-Sprechblasen mit ?-Kreis ---- */
.itse-flyer__questions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.itse-flyer__question {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--brand-primary);
  color: var(--neutral-0);
  font-style: italic;
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-4);
  transform: skew(-8deg);
  border-radius: var(--radius-xs);
  flex: 1 1 260px;
  max-width: 440px;
}
.itse-flyer__question .itse-flyer__qtext { transform: skew(8deg); display: inline-block; }
.itse-flyer__qmark {
  transform: skew(8deg);
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--blue-800);
  color: var(--neutral-0);
  font-style: normal;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-md);
}

/* ---- Zweispaltiges Hauptlayout ---- */
.itse-flyer__cols {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-4);
}
.itse-flyer__section { margin-bottom: var(--space-5); }
.itse-flyer__h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--border-width-strong) solid var(--text-strong);
  padding-bottom: var(--space-1);
  color: var(--text-strong);
}
.itse-flyer__text { margin: 0; color: var(--text-body); }

/* ---- Blauer Leistungs-Kasten (weisse Bullets auf Blau) ---- */
.itse-flyer__benefits {
  background: var(--brand-primary);
  color: var(--neutral-0);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.itse-flyer__benefits-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--border-width-strong) solid var(--neutral-0);
  padding-bottom: var(--space-1);
  color: var(--neutral-0);
}
.itse-flyer__benefits-list { margin: 0; padding-left: 1.2em; }
.itse-flyer__benefits-list li { margin-bottom: var(--space-1); }
.itse-flyer__benefits-list li::marker { color: var(--neutral-0); }

/* ---- Weisser Kasten: Loesungsvorschlag / Bestellblock ---- */
.itse-flyer__proposal {
  background: var(--neutral-0);
  border: var(--border-width) solid var(--neutral-300);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.itse-flyer__proposal-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--border-width-strong) solid var(--text-strong);
  padding-bottom: var(--space-1);
}
.itse-flyer__hint { color: var(--text-muted); font-size: var(--text-xs); margin: 0 0 var(--space-3); }
.itse-flyer__hint-inline { color: var(--text-muted); font-size: var(--text-xs); }

/* ---- Feature-Vergleichsmatrix ---- */
.itse-flyer__matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  margin-bottom: var(--space-4);
}
.itse-flyer__matrix th, .itse-flyer__matrix td {
  border: var(--border-width) solid var(--neutral-200);
  padding: var(--space-2);
  text-align: center;
  vertical-align: middle;
}
.itse-flyer__matrix thead th {
  background: var(--brand-primary);
  color: var(--neutral-0);
  font-weight: var(--weight-bold);
}
.itse-flyer__matrix .itse-flyer__matrix-label { text-align: left; font-weight: var(--weight-semibold); }
.itse-flyer__yes { color: var(--success-500); font-weight: var(--weight-extrabold); }
.itse-flyer__no { color: var(--danger-500); font-weight: var(--weight-extrabold); }
.itse-flyer__addon { color: var(--text-muted); font-size: var(--text-xs); }

/* ---- Bestellblock: Optionsgruppen + Items ---- */
.itse-flyer__group {
  border: none;
  border-top: var(--border-width) solid var(--neutral-200);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) 0 0;
}
.itse-flyer__group--sub { margin-left: var(--space-4); border-top-style: dashed; }
.itse-flyer__group-label {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding: 0 var(--space-1) 0 0;
}
.itse-flyer__required { color: var(--danger-500); }
.itse-flyer__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-1) 0;
}
.itse-flyer__ctrl { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand-primary); margin: 0; }
.itse-flyer__item-label { font-size: var(--text-sm); color: var(--text-strong); }
.itse-flyer__qty input {
  width: 76px;
  padding: 4px 8px;
  font: inherit;
  font-size: var(--text-sm);
  border: var(--border-width) solid var(--neutral-300);
  border-radius: var(--radius-xs);
  background: var(--neutral-0);
  color: var(--text-strong);
}
.itse-flyer__unit { color: var(--text-muted); font-size: var(--text-xs); }
.itse-flyer__price { color: var(--brand-primary); font-weight: var(--weight-bold); white-space: nowrap; }
.itse-flyer__price-note { display: block; flex-basis: 100%; color: var(--text-muted); font-size: var(--text-xs); padding-left: 26px; }
.itse-flyer__tiers { display: flex; flex-direction: column; gap: 2px; flex-basis: 100%; padding-left: 26px; }
.itse-flyer__tier { display: flex; gap: var(--space-3); font-size: var(--text-xs); }
.itse-flyer__tier-range { min-width: 110px; color: var(--text-body); }
.itse-flyer__tier-price { color: var(--brand-primary); font-weight: var(--weight-bold); }
.itse-flyer__capture { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; width: 100%; }
.itse-flyer__capinput {
  flex: 1 1 160px;
  max-width: 260px;
  padding: 4px 8px;
  font: inherit;
  font-size: var(--text-sm);
  border: none;
  border-bottom: var(--border-width) solid var(--neutral-400);
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
}

/* ---- Kleingedrucktes, Beauftragung, Unterschrift, Footer ---- */
.itse-flyer__fineprint { color: var(--text-muted); font-size: var(--text-xs); margin-bottom: var(--space-4); }
.itse-flyer__fineprint p { margin: 0 0 var(--space-1); }
.itse-flyer__orderline { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.itse-flyer__signature {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}
.itse-flyer__sigfield { flex: 1; display: flex; flex-direction: column; }
.itse-flyer__sigline { display: block; height: 2.2rem; border-bottom: var(--border-width) solid var(--text-strong); }
.itse-flyer__siglabel { color: var(--text-muted); font-size: var(--text-xs); padding-top: var(--space-1); }
.itse-flyer__footer {
  background: var(--brand-primary);
  color: var(--neutral-0);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  text-align: right;
}

/* ---- Mobile: einspaltig ---- */
@media (max-width: 720px) {
  .pf.itse-flyer { padding: var(--space-3); }
  .itse-flyer__cols { grid-template-columns: 1fr; }
  .itse-flyer__head { flex-direction: column; }
  .itse-flyer__headright { text-align: left; max-width: 100%; }
  .itse-flyer__question { flex: 1 1 100%; max-width: none; }
  .itse-flyer__signature { flex-direction: column; gap: var(--space-4); }
}

/* ---- Print: Farben erhalten, kompakt ---- */
@media print {
  .pf.itse-flyer {
    max-width: none;
    padding: 0;
    border-radius: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .itse-flyer__question, .itse-flyer__benefits, .itse-flyer__footer,
  .itse-flyer__matrix thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
 * Abrechnung — Wirtschaftlichkeit (/msp-wirtschaftlichkeit, MSP Phase 2 Welle 2)
 * --------------------------------------------------------------------------
 * Liquiditaets-Balkengraph REIN in CSS (div-Balken, Hoehe als dyn. Inline-%,
 * geduldete Ausnahme fuer dynamische Werte). Einnahmen blau (Vergangenheit
 * solide, Prognose gestreift/heller), Ausgaben rot, Netto-Zahl je Monat,
 * Ausgaben-Spitzen (> 1,5x Median) markiert. <=720px horizontal scrollbar.
 * ========================================================================== */
.pf.itse-shell .itse-econ__chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3) var(--space-1) var(--space-2);
}
.pf.itse-shell .itse-econ__month {
  flex: 1 1 0;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-xs);
  padding: var(--space-1);
}
.pf.itse-shell .itse-econ__month--spike { background: var(--warning-50); }
.pf.itse-shell .itse-econ__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 160px;
  width: 100%;
}
.pf.itse-shell .itse-econ__bar {
  width: 16px;
  min-height: 0;
  border-radius: 3px 3px 0 0;
}
.pf.itse-shell .itse-econ__bar--in { background: var(--brand-primary); }
.pf.itse-shell .itse-econ__bar--fc {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--brand-primary) 45%, transparent),
    color-mix(in srgb, var(--brand-primary) 45%, transparent) 4px,
    color-mix(in srgb, var(--brand-primary) 18%, transparent) 4px,
    color-mix(in srgb, var(--brand-primary) 18%, transparent) 8px
  );
  border: 1px dashed var(--brand-primary);
  border-bottom: none;
}
.pf.itse-shell .itse-econ__bar--out { background: var(--danger-500); }
.pf.itse-shell .itse-econ__bar--na {
  background: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  align-self: center;
  width: auto;
}
.pf.itse-shell .itse-econ__net {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-body);
  white-space: nowrap;
}
.pf.itse-shell .itse-econ__mlabel {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.pf.itse-shell .itse-econ__spikebadge { white-space: nowrap; font-size: 10px; }
.pf.itse-shell .itse-econ__neg { color: var(--danger-500) !important; }
.pf.itse-shell .itse-econ__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-3);
}
.pf.itse-shell .itse-econ__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 4px;
}
.pf.itse-shell .itse-econ__dot--in { background: var(--brand-primary); }
.pf.itse-shell .itse-econ__dot--fc {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--brand-primary) 45%, transparent),
    color-mix(in srgb, var(--brand-primary) 45%, transparent) 3px,
    color-mix(in srgb, var(--brand-primary) 18%, transparent) 3px,
    color-mix(in srgb, var(--brand-primary) 18%, transparent) 6px);
  border: 1px dashed var(--brand-primary);
}
.pf.itse-shell .itse-econ__dot--out { background: var(--danger-500); }

/* Methodik-/Intro-Karte: eigener Absatz mit Luft statt gedraengt unter der Toolbar. */
.pf.itse-shell .itse-econ__method { margin-bottom: var(--space-4); }
.pf.itse-shell .itse-econ__method p { margin: 0; }

/* Marge-Tabellen (viele Spalten): Mindestbreite + H-Scroll-Wrapper, damit die Zahlen
   am Desktop nicht gequetscht werden und am Handy (Card-Layout) sauber umbrechen. */
.pf.itse-shell .itse-econ__table { min-width: 780px; }
.pf.itse-shell .itse-econ__table td,
.pf.itse-shell .itse-econ__table th { white-space: nowrap; }

@media (max-width: 720px) {
  .pf.itse-shell .itse-econ__chart { padding-bottom: var(--space-3); }
  .pf.itse-shell .itse-econ__month { min-width: 48px; }
  .pf.itse-shell .itse-econ__bars { height: 120px; }
  .pf.itse-shell .itse-econ__spikebadge { display: none; } /* Spitze bleibt farblich markiert */
  /* Card-Layout: Mindestbreite/Nowrap aufheben, sonst laufen die Cards ueber. */
  .pf.itse-shell .itse-econ__table { min-width: 0; }
  .pf.itse-shell .itse-econ__table td,
  .pf.itse-shell .itse-econ__table th { white-space: normal; }
}

/* ============================================================================
   E-MAIL-TESTMODUS — app-weiter Hinweis (PLANUNG_ABRECHNUNG_MSP.md Paragraf 27)
   ----------------------------------------------------------------------------
   „Der eingeschaltete Modus selbst ist sichtbar — ein Hinweis im Portal, nicht
   versteckt in den Einstellungen." Gerendert in partials/pf_shell.php ueber dem
   Seitentitel, damit er auf JEDER Staff-Seite erscheint.

   Ruhig, aber unuebersehbar: Warnfarbe + Punkt, kein Blinken, keine Vollflaeche.
   Am Handy bricht der Kasten in die Spalte um (der Link darf nicht abgeschnitten
   werden — sonst kommt man aus dem Hinweis nicht ins Protokoll).
   ========================================================================= */
.pf .pf-testmodus {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--warning-50);
  border: var(--border-width) solid color-mix(in srgb, var(--warning-500) 40%, transparent);
  border-left: 3px solid var(--warning-500);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--text-strong); line-height: 1.5;
}
.pf .pf-testmodus__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--warning-500);
}
.pf .pf-testmodus__txt { flex: 1 1 320px; min-width: 0; }
.pf .pf-testmodus__txt strong { color: var(--text-strong); }
.pf .pf-testmodus__link {
  flex-shrink: 0; font-weight: var(--weight-semibold);
  color: var(--text-strong); text-decoration: underline;
}
@media (max-width: 720px) {
  /* Bei 390 px gemessen: mit flex-basis 320px rutschte der Text in eine eigene Zeile
     und der Punkt stand allein darueber. Kleinere Basis -> Punkt und Text teilen sich
     die erste Zeile, der Link bricht darunter um. */
  .pf .pf-testmodus { align-items: flex-start; gap: var(--space-2); }
  .pf .pf-testmodus__dot { margin-top: 6px; }
  .pf .pf-testmodus__txt { flex: 1 1 200px; }
}

/* ============================================================================
   360-Grad-Kundenakte nach Claude-Design-Handoff „Kundenakte 360" (2026-09-09).
   Praefix ka-. Nur Optik; Datenfluss und Aktionen bleiben in CustomerDetail.php.
   ========================================================================== */
.itse-shell__inner:has(.ka) { max-width: none; }
.itse-shell__inner:has(.ka) > .itse-shell__pagehead { display: none; }
.ka-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 600 13px var(--font-body); color: var(--text-muted); }
.ka-crumb a { color: var(--text-muted); text-decoration: none; }
.ka-crumb a:hover { color: var(--brand-primary); }
.ka-crumb strong { color: var(--text-strong); font-weight: 700; }
.ka { display: grid; grid-template-columns: minmax(0, 1fr) 468px; gap: 18px; align-items: start; }
.ka-main, .ka-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ka-card { padding: 20px 22px; margin: 0; }
.ka-card__title { margin: 0 0 14px; font: 700 15px var(--font-display); color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.ka-card__title--blue { color: var(--blue-600); }
.ka-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ka-card__head .ka-card__title { margin-bottom: 0; }
.ka-card__actions { display: flex; gap: 8px; }
.ka-muted { font: 500 12px var(--font-body); color: var(--text-muted); }
.ka-mt { margin-top: 14px; }
.ka-right { text-align: right; }
.ka-center { display: block; text-align: center; }
.ka-mono { font-family: var(--font-mono); font-size: 12px; }
.ka-wide { width: 100%; justify-content: center; margin-top: 14px; }
.ka-link { font: 700 12.5px var(--font-body); color: var(--blue-500); text-decoration: none; }
.ka-link:hover { text-decoration: underline; }
.ka-link-btn { color: var(--blue-600); background: var(--blue-50); }
.ka-linkbtn { background: none; border: 0; padding: 0; font: 600 11.5px var(--font-body); color: var(--neutral-400); cursor: pointer; }
.ka-linkbtn:hover { color: var(--brand-primary); }
.ka-ico { flex: 0 0 auto; }

/* Kopfkarte */
.ka-head { padding: 20px 22px 0; }
.ka-head__row { display: flex; align-items: flex-start; gap: 18px; }
.ka-head__id { flex: 1; min-width: 0; }
.ka-head__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ka-head__title h1 { margin: 0; font: 700 27px var(--font-display); letter-spacing: -.02em; color: var(--text-strong); overflow-wrap: anywhere; }
.ka-head__meta { margin-top: 6px; font: 500 13px var(--font-body); color: var(--text-muted); }
.ka-contact { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 22px; }
.ka-contact span { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--font-body); color: var(--text-body); }
.ka-contact .ka-ico { color: var(--neutral-400); }
.ka-contact em { font-style: normal; color: var(--text-muted); opacity: .75; }
.ka-contact a { color: var(--text-body); text-decoration: none; }
.ka-contact a:hover { color: var(--brand-primary); text-decoration: underline; }
.ka-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ka-head__actions .itse-btn { gap: 6px; }
.ka-tabs { margin-top: 18px; display: flex; gap: 4px; border-top: 1px solid var(--border-subtle); padding-top: 4px; overflow-x: auto; scrollbar-width: none; }
.ka-tabs a { padding: 13px 15px; font: 600 13.5px var(--font-body); color: var(--text-muted); text-decoration: none; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.ka-tabs a:hover { color: var(--text-strong); }
.ka-tabs a.is-active { color: var(--blue-500); border-bottom-color: var(--blue-500); }

/* Avatare, Abzeichen, Punkte */
.ka-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: var(--neutral-100); color: var(--neutral-600); font: 700 13px var(--font-display); }
.ka-avatar--xl { width: 60px; height: 60px; border-radius: 14px; font-size: 24px; }
.ka-avatar--md { width: 44px; height: 44px; font-size: 15px; }
.ka-avatar--sm { width: 36px; height: 36px; font-size: 12px; }
.ka-avatar--blue { background: var(--blue-50); color: var(--blue-600); }
.ka-avatar--green { background: var(--success-50); color: var(--green-700); }
.ka-avatar--ink { background: var(--neutral-100); color: var(--neutral-700, #333); }
.ka-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font: 700 12px var(--font-body); text-decoration: none; white-space: nowrap; }
.ka-badge--sm { padding: 1px 8px; font-size: 10.5px; }
.ka-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ka-badge--success { background: var(--success-50); color: var(--green-700); }
.ka-badge--warning { background: var(--warning-50); color: #8a5e00; }
.ka-badge--danger  { background: var(--danger-50); color: var(--danger-500); }
.ka-badge--neutral { background: var(--surface-sunken); color: var(--text-muted); }
.ka-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.ka-dot--success { background: var(--success-500); } .ka-dot--warning { background: var(--warning-500); } .ka-dot--danger { background: var(--danger-500); } .ka-dot--neutral { background: var(--neutral-300, #cbd5e1); }

/* Reiter-Inhalte */
.ka-pane { display: flex; flex-direction: column; gap: 16px; }
.ka-pane[hidden] { display: none; }
.ka-grid3 { display: grid; grid-template-columns: 344px 1fr 1fr; gap: 16px; align-items: start; }
.ka-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ka-span2 { grid-column: span 2; }
.ka-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ka-kpi { display: flex; flex-direction: column; gap: 4px; }
.ka-kpi__val { font: 800 26px var(--font-display); color: var(--text-strong); letter-spacing: -.02em; }
.ka-kpi__label { font: 600 12.5px var(--font-body); color: var(--text-muted); }
.ka-kpi__sub { font: 500 11.5px var(--font-body); color: var(--neutral-400); }

/* Kundenzustand */
.ka-state { display: flex; align-items: center; gap: 14px; }
.ka-state__ico { display: flex; color: var(--brand-primary); }
.ka-state--neutral .ka-state__ico { color: var(--neutral-400); }
.ka-state--danger .ka-state__ico { color: var(--danger-500); }
.ka-state__label { font: 700 20px var(--font-display); color: var(--green-600); letter-spacing: -.01em; }
.ka-state--neutral .ka-state__label { color: var(--text-muted); }
.ka-state--danger .ka-state__label { color: var(--danger-500); }
.ka-state__text { font: 500 12.5px var(--font-body); color: var(--text-muted); line-height: 1.45; }
.ka-meter { margin: 18px 0 16px; height: 8px; border-radius: var(--radius-pill); background: var(--neutral-100); overflow: hidden; }
.ka-meter i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--green-400), var(--green-500)); }
.ka-kv { display: flex; flex-direction: column; }
.ka-kv > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--neutral-100); font: 500 13px var(--font-body); color: var(--text-muted); }
.ka-kv > div strong { font-weight: 700; color: var(--text-strong); text-align: right; overflow-wrap: anywhere; }
.ka-big__num { font: 800 30px var(--font-display); color: var(--text-strong); letter-spacing: -.03em; }
.ka-empty { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border: 1px dashed var(--border-subtle); border-radius: 12px; color: var(--text-muted); font: 500 12.5px var(--font-body); line-height: 1.45; background: var(--surface-page); }
.ka-empty .ka-ico { color: var(--neutral-400); }

/* Listen, Aktivitaeten, Timeline */
.ka-actlist { display: flex; flex-direction: column; }
.ka-act { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--neutral-100); }
.ka-act__ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.ka-act--green { background: var(--success-50); color: var(--green-600); }
.ka-act--warn { background: var(--warning-50); color: #9a6a00; }
.ka-act--blue { background: var(--blue-50); color: var(--blue-600); }
.ka-act--neutral { background: var(--neutral-100); color: var(--neutral-600); }
.ka-act__body { flex: 1; min-width: 0; }
.ka-act__title { font: 700 13.5px var(--font-body); color: var(--text-strong); overflow-wrap: anywhere; }
.ka-act__sub { font: 500 12.5px var(--font-body); color: var(--text-muted); margin-top: 2px; }
.ka-act__time { font: 500 12px var(--font-body); color: var(--neutral-400); white-space: nowrap; }
.ka-list { display: flex; flex-direction: column; }
.ka-list__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--neutral-100); text-decoration: none; color: inherit; }
.ka-list__row:hover .ka-list__main { color: var(--brand-primary); }
.ka-list__ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.ka-list__main { flex: 1; min-width: 0; font: 600 12.5px var(--font-body); color: var(--text-strong); overflow-wrap: anywhere; }
.ka-list__sub { font: 500 11.5px var(--font-body); color: var(--text-muted); white-space: nowrap; }
.ka-timeline { display: flex; flex-direction: column; }
.ka-tl { display: flex; gap: 14px; }
.ka-tl__rail { display: flex; flex-direction: column; align-items: center; width: 36px; }
.ka-tl__rail i { flex: 1; width: 2px; background: var(--neutral-100); }
.ka-tl__body { flex: 1; padding-bottom: 20px; min-width: 0; }
.ka-tl__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 13.5px var(--font-body); color: var(--text-strong); }
.ka-tl__text { font: 500 13px var(--font-body); color: var(--text-body); margin-top: 4px; line-height: 1.5; }

/* Tabellen */
.ka-table { display: flex; flex-direction: column; }
.ka-table__head, .ka-table__row, .ka-table__sum { display: grid; gap: 12px; align-items: center; padding: 12px; }
.ka-table--vertraege .ka-table__head, .ka-table--vertraege .ka-table__row, .ka-table--vertraege .ka-table__sum { grid-template-columns: 2.2fr 1fr 1.2fr 1fr; }
.ka-table--rechnungen .ka-table__head, .ka-table--rechnungen .ka-table__row { grid-template-columns: 1.2fr 2fr 1fr .8fr; }
.ka-table__head { padding-top: 0; font: 700 11.5px var(--font-body); color: var(--neutral-400); letter-spacing: .04em; text-transform: uppercase; }
.ka-table__row { border-top: 1px solid var(--neutral-100); font: 500 13px var(--font-body); color: var(--text-body); text-decoration: none; }
.ka-table__row:hover { background: var(--neutral-50); }
.ka-table__main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ka-table__main strong { font: 700 13px var(--font-body); color: var(--text-strong); overflow-wrap: anywhere; }
.ka-table__sum { border-top: 2px solid var(--neutral-200); font: 800 14px var(--font-display); color: var(--text-strong); }

/* Dokumente, Kontakte, Chart */
.ka-docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ka-doc { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; text-decoration: none; color: inherit; min-width: 0; }
.ka-doc:hover { border-color: var(--blue-200); background: var(--blue-50); }
.ka-doc__body { min-width: 0; display: flex; flex-direction: column; }
.ka-doc__body strong { font: 600 12.5px var(--font-body); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-doc__body small { font: 500 11.5px var(--font-body); color: var(--text-muted); }
.ka-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ka-contactcard { border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ka-contactcard:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.ka-contactcard__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ka-contactcard__head strong { display: block; font: 700 14px var(--font-body); color: var(--text-strong); }
.ka-contactcard__head small { font: 500 12.5px var(--font-body); color: var(--text-muted); }
.ka-contactcard__line { font: 500 12.5px var(--font-body); color: var(--text-body); overflow-wrap: anywhere; }
.ka-contactcard__line em { font-style: normal; color: var(--neutral-400); }
.ka-contactcard__btns { display: flex; gap: 8px; margin-top: 2px; }
.ka-contactcard__btns .itse-btn { flex: 1; justify-content: center; }
.ka-chart { display: flex; align-items: flex-end; gap: 14px; height: 200px; }
.ka-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: flex-end; height: 100%; min-width: 0; }
.ka-chart__val { font: 700 11.5px var(--font-body); color: var(--text-muted); white-space: nowrap; }
.ka-chart__bar { display: block; width: 100%; height: 0; border-radius: 8px 8px 0 0; background: var(--blue-200); }
.ka-chart__bar--top { background: var(--green-500); }
.ka-chart__month { font: 600 11.5px var(--font-body); color: var(--neutral-400); }

/* Rechte Spalte: Copilot, DISC, Signale, Kontakte */
.ka-copilot { padding: 0; border-color: var(--blue-100); overflow: hidden; }
.ka-copilot__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--neutral-100); background: linear-gradient(180deg, var(--blue-50), #fff); color: var(--blue-500); }
.ka-copilot__head span { flex: 1; font: 700 15px var(--font-display); color: var(--blue-600); }
.ka-copilot__head small { font: 600 11.5px var(--font-body); color: var(--text-muted); }
.ka-copilot__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; }
.ka-copilot__label { font: 700 12px var(--font-body); color: var(--neutral-400); letter-spacing: .05em; }
.ka-copilot__summary { margin: 0; font: 500 13.5px var(--font-body); color: var(--text-body); line-height: 1.6; white-space: pre-wrap; }
.ka-msg { display: flex; }
.ka-msg--u { justify-content: flex-end; }
.ka-msg__bubble { max-width: 88%; padding: 11px 14px; border-radius: 14px; font: 500 13.5px var(--font-body); line-height: 1.55; background: var(--neutral-50); color: var(--text-body); border: 1px solid var(--border-subtle); white-space: pre-wrap; }
.ka-msg--u .ka-msg__bubble { background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary); }
.ka-msg--busy .ka-msg__bubble { color: var(--text-muted); }
.ka-msg--err .ka-msg__bubble { background: var(--danger-50); color: var(--danger-500); border-color: var(--danger-50); }
.ka-copilot__foot { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.ka-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ka-chip { border: 1px solid var(--blue-100); background: var(--blue-50); color: var(--blue-600); border-radius: var(--radius-pill); padding: 5px 11px; font: 600 12px var(--font-body); cursor: pointer; }
.ka-chip:hover { background: var(--blue-100); }
.ka-copilot__ask { display: flex; gap: 8px; align-items: center; }
.ka-copilot__ask .itse-input { flex: 1; }
.ka-copilot__send { width: 44px; height: 40px; padding: 0; justify-content: center; }
.ka-copilot__note { display: flex; justify-content: space-between; align-items: center; gap: 14px; font: 500 11px var(--font-body); color: var(--neutral-400); }
.ka-disc { display: flex; align-items: center; gap: 22px; }
.ka-donut { position: relative; width: 132px; height: 132px; flex: 0 0 132px; }
.ka-donut svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.ka-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ka-donut__center strong { font: 800 26px var(--font-display); color: var(--text-strong); line-height: 1; }
.ka-donut__center small { font: 600 11px var(--font-body); color: var(--text-muted); margin-top: 2px; }
.ka-disc__rows { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.ka-disc__row { display: flex; align-items: center; gap: 10px; font: 600 13px var(--font-body); color: var(--text-strong); }
.ka-disc__row span:nth-child(2) { flex: 1; }
.ka-disc__key { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font: 800 11px var(--font-body); color: #fff; background: var(--neutral-400); }
.ka-disc__tipps { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--neutral-100); }
.ka-tipps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 9px; }
.ka-tipps span { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px; font: 600 12px var(--font-body); color: var(--text-body); line-height: 1.4; }
.ka-signals { display: flex; flex-direction: column; }
.ka-signal { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--neutral-100); text-decoration: none; color: inherit; }
.ka-signal .ka-act__ico { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
.ka-signal__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ka-signal__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 13px var(--font-body); color: var(--text-strong); }
.ka-signal small { font: 500 12.5px var(--font-body); color: var(--text-muted); }
.ka-kontaktlist { display: flex; flex-direction: column; }
.ka-kontakt { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--neutral-100); }
.ka-kontakt > div { flex: 1; min-width: 0; }
.ka-kontakt strong { display: block; font: 700 13px var(--font-body); color: var(--text-strong); }
.ka-kontakt small { font: 500 12px var(--font-body); color: var(--text-muted); }
.ka-iconbtn { display: inline-flex; color: var(--neutral-400); }
.ka-iconbtn:hover { color: var(--brand-primary); }

/* Alt-Abschnitte (Ansprechpartner, Lexware, GoCardless) innerhalb der Reiter */
.ka-pane .cd-card { margin: 0; }
.ka-pane .card { margin: 0; }

@media (max-width: 1500px) {
  .ka { grid-template-columns: minmax(0, 1fr) 380px; }
  .ka-grid3 { grid-template-columns: 1fr 1fr; }
  .ka-docs { grid-template-columns: repeat(2, 1fr); }
  .ka-contacts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .ka { grid-template-columns: 1fr; }
  .ka-grid3, .ka-grid2, .ka-kpis { grid-template-columns: 1fr; }
  .ka-span2 { grid-column: auto; }
}
@media (max-width: 720px) {
  .ka-card { padding: 14px; }
  .ka-head { padding: 14px 14px 0; }
  .ka-head__row { flex-direction: column; gap: 12px; }
  .ka-head__title h1 { font-size: 20px; }
  .ka-head__actions { justify-content: stretch; }
  .ka-head__actions .itse-btn { flex: 1; justify-content: center; }
  .ka-contact { gap: 10px; flex-direction: column; }
  .ka-tabs a { padding: 11px 12px; font-size: 13px; }
  .ka-docs, .ka-contacts, .ka-tipps { grid-template-columns: 1fr; }
  .ka-table__head { display: none; }
  .ka-table--vertraege .ka-table__row, .ka-table--rechnungen .ka-table__row, .ka-table__sum { grid-template-columns: 1fr 1fr; }
  .ka-chart { gap: 6px; height: 150px; }
  .ka-chart__val { display: none; }
  .ka-disc { flex-direction: column; align-items: flex-start; }
}