/* TicketHub – Anwendungs-Stile auf Basis des Renauer-Design-Systems
   (Tokens: css/renauer-tokens.css, Regeln: docs/design/README.md). */

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Seitengrund eine Stufe dunkler (v0.64.2, Kurts Hinweis): weisse Karten heben sich ab. */
  background: var(--bg-4);
}

/* ---------- App-Rahmen ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.app-kopf {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-2);
  /* Klebt mit (v0.55.1, Kurts Feedback): sonst ueberholt die Ticket-Sprungleiste
     die Kopfzeile beim Scrollen. Gemessene Hoehe 56px - der top-Wert der Sprungleiste haengt daran. */
  position: sticky; top: 0; z-index: 30;
}
.app-kopf-innen {
  max-width: 1200px; margin: 0 auto; padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5);
}
.app-marke { text-decoration: none; border: 0; display: flex; align-items: center; gap: var(--sp-3); }
.app-titel {
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--brand-blue);
  letter-spacing: -0.01em;
}
/* 32 px (v0.69.2, Team-Wunsch: Logo zu klein) - fuellt die Kopfzeile, ohne sie hoeher zu machen. */
.app-logo { height: 32px; display: block; }
.app-nav {
  display: flex; gap: var(--sp-4); flex: 1; align-items: center;
  /* Seit v0.39 kurz (3 Links + "Mehr"): kein Scroll-Container mehr, sonst würde
     das absolut positionierte "Mehr"-Panel an der Nav-Kante abgeschnitten. */
  overflow: visible; white-space: nowrap;
}
.app-nav a {
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--fg-2);
  text-decoration: none; border: 0; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-1);
}
.app-nav a:hover { color: var(--brand-blue-deep); background: var(--brand-blue-tint); }
.app-nav a.active { color: var(--brand-blue); font-weight: var(--fw-semi); }
.app-benutzer { display: flex; align-items: center; gap: var(--sp-3); }
.app-benutzer-name { font-size: var(--fs-small); color: var(--fg-2); }
.app-benutzer form { margin: 0; }

/* Filter-Chips (v0.58.2): EIN Muster fuer Status-/Ablage-/Typ-Filter auf allen
   Listen - aktiv gefuellt wie der Fokus-Schalter, inaktiv leise mit Tint-Hover. */
.filter-chip {
  display: inline-block; padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--fg-2); background: var(--bg-1);
  border: 1px solid var(--border-2); border-radius: var(--radius-2);
  text-decoration: none; line-height: 1.4;
}
.filter-chip:hover { background: var(--brand-blue-tint); color: var(--brand-blue-deep); border-color: var(--brand-blue); }
.filter-chip.aktiv { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); font-weight: var(--fw-semi); }
.filter-chip.aktiv:hover { background: var(--brand-blue-deep); color: #fff; }

/* Fokus-Master-Schalter (Ticketliste: Meine vs. Gesamt) */
.fokus-schalter {
  display: flex; margin: 0;
  border: 1px solid var(--brand-blue); border-radius: var(--radius-2);
  overflow: hidden;
}
.fokus-schalter a {
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--fg-2); padding: var(--sp-1) var(--sp-3);
  text-decoration: none;
}
.fokus-schalter a.aktiv {
  background: var(--brand-blue); color: #fff; font-weight: var(--fw-semi);
}
.fokus-schalter a:not(.aktiv):hover { background: var(--brand-blue-tint); color: var(--brand-blue-deep); }

.app-inhalt {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: var(--sp-5);
}

.app-fuss {
  border-top: 1px solid var(--border-1);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-micro); color: var(--fg-3); text-align: center;
}

/* ---------- Anmeldeseiten ---------- */
.anmelde-seite {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-4); padding: var(--sp-5);
}
.anmelde-karte {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-2);
  box-shadow: var(--shadow-2); padding: var(--sp-6); width: 100%; max-width: 420px;
}
.anmelde-kopf {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.anmelde-logo { height: 28px; display: block; }
/* Einblick-Seiten (Tätigkeitsbericht): breiter als die Anmeldekarte, responsiv,
   oben ausgerichtet - lange Berichte lesen sich zentriert schlecht. */
.einblick-karte { max-width: 860px; width: 100%; }
.anmelde-seite:has(.einblick-karte) { align-items: flex-start; }
@media (max-width: 700px) {
  .anmelde-seite:has(.einblick-karte) { padding: var(--sp-3); }
  .einblick-karte { padding: var(--sp-4); }
}
.anmelde-titel {
  font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--brand-blue);
  letter-spacing: -0.01em;
}

/* ---------- Formulare ---------- */
.feld { margin-bottom: var(--sp-4); }
.feld label {
  display: block; font-size: var(--fs-small); font-weight: var(--fw-semi);
  color: var(--fg-2); margin-bottom: var(--sp-1);
}
.feld input, .feld textarea, .feld select {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-body);
  border: 1px solid var(--border-2); border-radius: var(--radius-1);
  background: var(--bg-1); color: var(--fg-1);
}
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue);
}

.knopf {
  display: inline-block; padding: var(--sp-2) var(--sp-4);
  font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semi);
  border: 1px solid var(--brand-blue); border-radius: var(--radius-2);
  background: var(--brand-blue); color: var(--fg-on-brand); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.knopf:hover { background: var(--brand-blue-deep); }
/* Link-Knoepfe (a.knopf*) brauchen keine Sonderregeln mehr: der globale
   Link-Hover in renauer-tokens.css klammert knopfartige Links aus (v0.58.2). */
/* Icon-Knoepfe (v0.47): quadratisch-kompakt fuer Aktionsspalten - der Zweck
   steht im title-Tooltip und aria-label. */
.knopf-icon { padding: var(--sp-1) var(--sp-2); line-height: 0; }
.knopf-icon svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.knopf-zweit {
  background: var(--bg-1); color: var(--brand-blue);
}
.knopf-zweit:hover { background: var(--brand-blue-tint); }
.knopf-leise {
  background: transparent; color: var(--fg-2); border-color: var(--border-2);
  padding: var(--sp-1) var(--sp-3);
}
.knopf-leise:hover { background: var(--bg-2); color: var(--fg-1); }
/* Warnstufe (v0.58.1): regulaerer, aber ungewoehnlicher Schritt - z. B. Eskalieren. */
.knopf-warn { border-color: var(--status-warn, #B7791F); background: var(--status-warn, #B7791F); color: #fff; }
.knopf-warn:hover { background: #8F5E17; }
/* Aktions-Icon-Knoepfe (v0.58.1): Icon + Tooltip am Desktop, Icon + Kurztext auf Touch/schmal. */
.aktions-gruppen { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.aktions-gruppe { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.aktions-gruppe:empty { display: none; }
.aktions-gruppe + .aktions-gruppe { border-left: 1px solid var(--border-1); padding-left: var(--sp-4); }
/* Icon + Kurztext immer (v0.58.3, Kurts Feedback: reine Icons zu schlank neben
   den Textknoepfen); die Langform mit Namen bleibt im Tooltip. */
.knopf-aktion {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  line-height: normal; padding: 6px var(--sp-3); /* 30px Hoehe wie die Textknoepfe */
}
.knopf-aktion svg { width: 16px; height: 16px; flex: none; }
.knopf-aktion .knopf-text { display: inline; white-space: nowrap; }

.knopf-gefahr { border-color: var(--status-crit); background: var(--status-crit); }
.knopf-gefahr:hover { background: #8C1E1E; }

/* FocusOnNavigate setzt den Fokus aus Barrierefreiheitsgründen auf die Überschrift –
   der sichtbare Fokusrahmen ist dort nur Störung. */
h1:focus, h2:focus, h3:focus { outline: none; }

/* Blazor-Validierung im Design-System-Stil */
.validation-errors {
  list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--status-crit); background: var(--status-crit-bg);
  font-size: var(--fs-small);
}
.validation-message { display: block; font-size: var(--fs-micro); color: var(--status-crit); margin-top: var(--sp-1); }
.feld input.invalid, .feld textarea.invalid { border-color: var(--status-crit); }

.feld-erklaerung {
    font-size: var(--fs-small);
    color: var(--fg-2);
    margin: var(--sp-1) 0 0;
}

.hinweis-fehler {
  border-left: 3px solid var(--status-crit); background: var(--status-crit-bg);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  font-size: var(--fs-small); color: var(--fg-1);
}
.hinweis-info {
  border-left: 3px solid var(--brand-blue); background: var(--brand-blue-tint);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
}

/* ---------- Badges & Ampeln ---------- */
.badge {
  display: inline-block; padding: 2px 10px;
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  border-radius: var(--radius-1); border: 1px solid var(--border-2);
  background: var(--bg-2); color: var(--fg-2);
  white-space: nowrap;
}
.badge-offen { background: var(--status-crit-bg); color: var(--status-crit); border-color: var(--status-crit); }
.badge-neu { background: var(--status-info-bg); color: var(--status-info); border-color: var(--status-info); }
.badge-inarbeit { background: var(--brand-blue-tint); color: var(--brand-blue-deep); border-color: var(--brand-blue-soft); }
.badge-warten { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn); }
.badge-geschlossen { background: var(--status-ok-bg); color: var(--status-ok); border-color: var(--status-ok); }
.badge-updated { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn); }
/* Für satzlange dynamische Badge-Texte (Cash-Anzeige, Versand-Status): umbrechen statt 400px-nowrap. */
.badge-lang { white-space: normal; text-align: left; line-height: 1.4; }

.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ampel-gruen { background: var(--status-ok); }
.ampel-gelb { background: var(--status-warn); }
.ampel-rot { background: var(--status-crit); }

/* ---------- Kacheln (Dashboard) ---------- */
.kachel-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.kachel {
  display: block; text-decoration: none; border: 1px solid var(--border-1);
  border-radius: var(--radius-2); background: var(--bg-1); padding: var(--sp-4);
  transition: border-color var(--dur-base) var(--ease-out);
}
.kachel:hover { border-color: var(--brand-blue); }
.kachel-zahl { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--brand-blue); }
.kachel-zahl-alarm { color: var(--status-crit); }
.kachel-titel {
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-2);
}

/* ---------- Tabellen & Karten ---------- */
.karte {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-2);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
  /* Breite Tabellen scrollen innerhalb der Karte statt die Seite aufzudrücken. */
  overflow-x: auto;
}
.karte h2 { margin-top: 0; font-size: var(--fs-h3); }

/* Einklappbarer Jahresblock (v0.45, kopf-details-Muster): Titel wie eine h2,
   Kennzahlen-Einzeiler daneben - dem Team war die offene Karte zu dominant. */
.jahres-karte > summary { cursor: pointer; }
.jahres-karte .jahres-titel { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.jahres-karte > summary:hover .jahres-titel { color: var(--brand-blue); }

table.liste { background: var(--bg-1); width: 100%; }
table.liste tbody tr:hover td { background: var(--brand-blue-tint); }
table.liste a { font-weight: var(--fw-semi); }
/* Datums-, Nummern- und Kopfzellen brechen nie um – Textspalten behalten den Umbruch. */
table.liste th, table.liste td.mono { white-space: nowrap; }
/* Lange Textspalten (Thema, Betreff, Tätigkeit): lesbar umbrechen statt zerquetschen. */
table.liste td.zelle-breit { min-width: 240px; }
td.mono, .mono { font-family: var(--font-mono); font-size: 0.92em; }

.aktionen { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.aktionen form { margin: 0; }
form.aktionen { margin: 0; }
/* Aktions-Zellen bleiben echte Tabellenzellen: display:flex am td würde es aus dem
   Tabellenlayout reißen - seine Trennlinie klebte dann am Inhalt statt an der
   Zeilenunterkante (sichtbar neben hohen Zellen wie der KI-Zeile der Quarantäne). */
table.liste td.aktionen { display: table-cell; white-space: nowrap; }
table.liste td.aktionen > form { display: inline-flex; margin: 0; }
table.liste td.aktionen > * + * { margin-left: var(--sp-2); }
/* In Tabellenzellen bleiben Zeilen-Buttons nebeneinander – die Tabelle scrollt stattdessen. */
td.aktionen { flex-wrap: nowrap; }

/* Kompakte Eingaben/Selects in Filter- und Aktionszeilen (statt wiederholter Inline-Styles). */
.eingabe-inline {
  padding: var(--sp-1) var(--sp-3); font: inherit; font-size: var(--fs-small);
  border: 1px solid var(--border-2); border-radius: var(--radius-1);
  background: var(--bg-1); color: var(--fg-1);
}
.eingabe-inline:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue);
}

/* Suchleiste (v0.71.3 Dashboard, v0.71.4 Ticketliste, v0.71.5 Outbox + Portal; Kurts UX-Wunsch): breites Feld in Fliesstextgroesse
   fuer ganze Saetze, der Hauptknopf haengt direkt am Feld (stretch = gleiche Hoehe);
   der zweite Weg (Wissensbasis) steht abgesetzt darunter mit eigener Kurzerklaerung. */
.suchleiste { display: flex; gap: var(--sp-2); align-items: stretch; flex-wrap: wrap; }
.suchleiste-feld {
  flex: 1 1 200px; min-width: 0; padding: var(--sp-2) var(--sp-3); /* 200px: am Handy bleibt "Suchen" neben dem Feld */
  font: inherit; font-size: var(--fs-body); appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border-2); border-radius: var(--radius-2);
  background: var(--bg-1); color: var(--fg-1);
}
.suchleiste-feld:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue);
}
.suchleiste .knopf { flex: none; display: inline-flex; align-items: center; } /* auch a.knopf (Zuruecksetzen) mittig */
form.suchleiste { margin: 0; }
/* Eingrenzungen in der Suchleiste (v0.71.4, Ticketliste): gleiche Hoehe und Rundung wie das
   Suchfeld, aber nur so breit wie noetig; Selects behalten den nativen Pfeil. */
.suchleiste-filter {
  flex: 0 1 auto; min-width: 0; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-body);
  border: 1px solid var(--border-2); border-radius: var(--radius-2);
  background: var(--bg-1); color: var(--fg-1);
}
.suchleiste-filter:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue);
}
.suchleiste-filter-kunde { flex: 0 1 200px; }
.suchleiste + .hinweis-fehler { margin: var(--sp-2) 0 0; } /* Fehler klebt am Feld, Erklaerung rueckt normal nach */
.such-nebenweg {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-1);
}
.such-nebenweg .knopf { flex: none; }
.such-nebenweg .feld-erklaerung { margin: 0; flex: 1 1 320px; }

/* Dezente Sicherheits-/Kontakt-Fußnote unter Anmeldeformularen: bewusst leise –
   eine feine Trennlinie, kleine gedämpfte Schrift, kein Kasten, kein Alarmrot. */
.anmelde-fussnote {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-micro); color: var(--fg-3); line-height: 1.5;
}
.anmelde-fussnote a { color: var(--fg-2); }

/* Kontakt & Support im Portal (v0.76.0): Logo, Anschrift, Erreichbarkeit mit Lucide-Symbolen. */
.kontakt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); align-items: start; }
.kontakt-raster .karte { margin-bottom: 0; }
.kontakt-adresse { font-style: normal; white-space: pre-line; color: var(--fg-2); margin: 0; line-height: 1.5; }
.kontakt-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.kontakt-liste li { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.5; }
.kontakt-liste svg { width: 18px; height: 18px; color: var(--brand-blue); flex: none; margin-top: 3px; }
/* Support-Wege (v0.76.1): runde Symbolflaechen statt Nummern - drei gleichwertige Wege. */
.support-wege { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.support-weg { display: flex; align-items: flex-start; gap: var(--sp-3); line-height: 1.5; }
.support-weg-icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--brand-blue-tint); color: var(--brand-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.support-weg-icon svg { width: 18px; height: 18px; }
.support-weg strong { display: block; color: var(--fg-1); }
.support-weg-bald { opacity: .8; }
.support-weg-bald .support-weg-icon { background: var(--bg-2); color: var(--fg-2); }

/* Formulierungshilfe im Portal (v0.77.0/v0.77.1): links Feld + Hilfe, rechts Seitenleiste mit
   KI-Hinweis, Rueckfragen und gerenderter Vorschau; am Handy untereinander. */
.anliegen-raster { display: grid; grid-template-columns: minmax(0, 640px) minmax(300px, 1fr); gap: var(--sp-4) var(--sp-5); align-items: start; }
.anliegen-raster-ohne-ki { grid-template-columns: minmax(0, 640px); }
.anliegen-raster [hidden] { display: none !important; }
.anliegen-links { grid-column: 1; grid-row: 1; }
.anliegen-unten { grid-column: 1; grid-row: 2; }
.anliegen-ki { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--sp-3); position: sticky; top: 72px; }
@media (max-width: 900px) {
  .anliegen-raster { grid-template-columns: 1fr; }
  .anliegen-links, .anliegen-unten, .anliegen-ki { grid-column: auto; grid-row: auto; position: static; }
}
.texthilfe-seite { display: grid; gap: var(--sp-3); }
.texthilfe-seite .hinweis-info { margin: 0; }
.texthilfe-seite .hinweis-info ul { margin: var(--sp-1) 0 0; padding-left: 1.2em; }
.texthilfe-vorschau { border: 1px solid var(--border-1); border-radius: var(--radius-2); padding: var(--sp-3) var(--sp-4); background: var(--bg-1); margin-bottom: var(--sp-4); }
.vorschau-zeile { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }
.texthilfe {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-1); border-radius: var(--radius-2); background: var(--bg-2);
  display: grid; gap: var(--sp-3);
}
.texthilfe-kopf { line-height: 1.5; }
.texthilfe-kopf strong { display: block; margin-bottom: 2px; } /* Titel auf eigener Zeile (v0.77.6) */
.texthilfe-wege { display: grid; gap: var(--sp-2); }
.texthilfe-weg { display: flex; gap: var(--sp-2); align-items: flex-start; cursor: pointer; line-height: 1.45; }
.texthilfe-weg input { width: auto; margin-top: 4px; flex: none; }
.texthilfe-weg strong { display: block; }
.texthilfe-fehler { color: var(--status-crit); }
/* .knopf setzt display und wuerde das hidden-Attribut aushebeln - hier gilt hidden wirklich. */
.texthilfe [hidden] { display: none !important; }

/* Portal-Kennzeichnung im Kopf */
.portal-marke {
  font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: var(--ls-caps); margin-left: 4px;
}

/* Nur für Screenreader sichtbar (Labels von Filterfeldern u. Ä.). */
.sr-nur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.seiten-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.seiten-kopf h1 { margin: 0; font-size: var(--fs-h2); }
/* .meta gilt überall (Outbox-Fehlertext, Hinweise), nicht nur im Seitenkopf. */
.meta { font-size: var(--fs-small); color: var(--fg-3); }

.leer-hinweis { color: var(--fg-3); font-size: var(--fs-body); padding: var(--sp-5) 0; }

/* Callout für Kunden-Support-Anweisungen (Design-System) */
.callout {
  border-left: 3px solid var(--brand-blue); background: var(--brand-blue-tint);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
}

@media (max-width: 720px) {
  .app-kopf-innen { flex-wrap: wrap; gap: var(--sp-3); }
  /* Hauptleiste am Handy (v0.81.0, seit "Suche" fuenf Eintraege): kleinere Schrift, engere
     Abstaende und notfalls Umbruch statt abgeschnittenem "Mehr" (Kurts Fund bei 375 px). */
  .app-nav { flex-wrap: wrap; gap: 0 var(--sp-2); }
  .app-nav a, .app-nav .nav-menue > summary { font-size: var(--fs-small); padding-left: var(--sp-1); padding-right: var(--sp-1); }
  /* Ticket anlegen (v0.72.0): am Handy nur das Plus, Beschriftung im aria-label. */
  .knopf-anlegen .knopf-text { display: none; }
  /* Umgebrochener Kopf hat variable Hoehe - beide Leisten scrollen mobil mit,
     zwei klebende Zeilen fraessen sonst den kleinen Viewport. */
  .app-kopf, .ticket-kopfblock, .kopfblock { position: static; }
  .app-logo { display: none; }
  .app-inhalt { padding: var(--sp-3); }
  .karte { padding: var(--sp-4); }
  .seiten-kopf h1 { font-size: var(--fs-h3); }
}

/* Touch-Geräte: größere Ziele und mehr Abstand zwischen Zeilen-Aktionen.
   Nur auf schmalen Bildschirmen (v0.77.8, Kurts Fund): Notebooks mit Touchscreen melden
   Chrome und Firefox oft Touch als Hauptzeiger und bekamen am grossen Bildschirm die
   44px-Knoepfe, die Suchleiste und der Gesamt/Meine-Schalter wuchsen mit. */
@media (pointer: coarse) and (max-width: 900px) {
  .knopf, .fokus-schalter a { min-height: 44px; }
  .app-nav a { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .aktionen { gap: var(--sp-3); }
}

/* Kompakter Ticket-Kopf (SPEC 8.2, v0.24): nativer Aufklapper. */
.kopf-details summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}
.kopf-details summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid var(--fg-2);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}
.kopf-details[open] summary::before { transform: rotate(90deg); }
.kopf-details[open] summary { margin-bottom: var(--sp-3); }

/* Gerenderte Worklog-Markdown-Texte: kompakte Typografie in Tabellenzellen. */
.markdown p { margin: 0 0 var(--sp-2); }
.markdown p:last-child, .markdown ul:last-child, .markdown ol:last-child { margin-bottom: 0; }
.markdown ul, .markdown ol { margin: 0 0 var(--sp-2); padding-left: 1.2em; }
.markdown code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9em;
    background: var(--bg-2, rgba(0, 0, 0, 0.05));
    padding: 0 3px;
    border-radius: 2px;
}
.markdown pre { overflow-x: auto; }

/* Anhang-Chips (SPEC 8, v0.31): Outlook-artige Datei-Kacheln, Klick = Download. */
/* Aenderungs-Signal + Praesenz im Kopfblock (v0.58.0). */
.ticket-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); }
.ticket-stand:empty { display: none; }
.ticket-stand [hidden] { display: none !important; }
.praesenz {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 2px var(--sp-2); border-radius: 12px;
    background: var(--brand-blue-tint); color: var(--brand-blue-deep);
}
.praesenz::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--brand-blue); }
.stand-banner {
    display: flex; align-items: center; gap: var(--sp-3); flex: 1;
    padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--status-warn, #B7791F);
    background: var(--status-warn-bg, #FFF4D6); color: var(--fg-1);
}
.stand-banner .knopf { padding: 2px var(--sp-3); }
.stand-banner[hidden], [data-praesenz-badge][hidden], [data-entschieden][hidden], p[data-praesenz][hidden] { display: none !important; }
.zeile-entschieden td { color: var(--fg-3); }
/* Stilles Nachladen (v0.69.0): neue oder geaenderte Zeilen/Kacheln leuchten kurz auf. */
@keyframes zeile-frisch { from { background-color: var(--status-warn-bg, #FFF4D6); } to { background-color: transparent; } }
tr.zeile-frisch td, .kachel.zeile-frisch { animation: zeile-frisch 4s ease-out; }
.zeile-entschieden .knopf { opacity: 0.5; }

/* Aehnlichkeits-Stufen der Wissensbasis-Treffer (v0.56.0). */
.badge.aehnlich-stark { background: var(--brand-blue); color: var(--fg-on-brand); border-color: var(--brand-blue); }
.badge.aehnlich-moeglich { background: var(--status-warn-bg, #FFF4D6); color: var(--fg-1); border-color: var(--status-warn, #B7791F); }
.badge.aehnlich-schwach { background: var(--bg-2); color: var(--fg-3); }

/* Ticket-Sprungleiste (v0.55.0): klebt beim Scrollen unter dem Fensterrand. */
/* Klebe-Block Ueberschrift + Sprungleiste (v0.55.2): haengt unter der 56px-Kopfzeile. */
/* Als Karte (v0.69.3, Kurts Wunsch): gleicher Rand und Innenabstand wie die uebrigen
   Karten; die Sprungleiste schliesst den Block unten ab, deshalb ohne eigene Linie. */
/* Klebe-Kopfblock mit Sprungleiste: Ticketseite (v0.55.2) und Einstellungen (v0.76.4). */
.ticket-kopfblock, .kopfblock {
    position: sticky; top: 56px; z-index: 20;
    background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-2);
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-5) 0;
}
.ticket-kopfblock .ticket-sprungleiste, .kopfblock .sprungleiste { border-bottom: 0; }
.ticket-kopfblock .seiten-kopf h1, .kopfblock .seiten-kopf h1 { font-size: var(--fs-h2); }
.ticket-sprungleiste, .sprungleiste {
    display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--border-1);
    padding: var(--sp-2) 0;
    font-size: var(--fs-small);
}
.ticket-sprungleiste a, .sprungleiste a {
    color: var(--fg-2); text-decoration: none;
    padding: 2px var(--sp-2); border-radius: var(--radius-2);
}
.ticket-sprungleiste a:hover, .sprungleiste a:hover { color: var(--brand-blue); background: var(--bg-2); }
/* Sprungziele nicht unter der klebenden Leiste verstecken. */
h2[id], h3[id] { scroll-margin-top: 150px; }

/* Einklappbare Karten (v0.55.0): Standard offen, Zustand merkt js/karten.js. */
.karte-klapp-kopf { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--sp-2); }
.karte-klapp-kopf::-webkit-details-marker { display: none; }
.karte-klapp-kopf::before { content: "▸"; color: var(--fg-3); flex: none; }
.karte-klappbar[open] > .karte-klapp-kopf::before { content: "▾"; }
.karte-klappbar > .karte-klapp-kopf > h2 { margin: 0; }
.karte-klappbar[open] > .karte-klapp-kopf { margin-bottom: var(--sp-3); }

/* Dateien-Galerie (v0.54.0): Kacheln fuer Fotos/PDFs/Downloads + Lightbox. */
.datei-galerie { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.galerie-kachel {
    width: 148px; height: 120px; border: 1px solid var(--border-1);
    border-radius: var(--radius-2); background: var(--bg-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-1); padding: var(--sp-2); cursor: pointer;
    text-decoration: none; color: var(--fg-1); overflow: hidden;
}
.galerie-kachel:hover { border-color: var(--brand-blue); }
.galerie-bild { padding: 0; }
.galerie-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-icon { width: 34px; height: 34px; color: var(--fg-3); flex: none; }
.galerie-name {
    font-size: var(--fs-small); max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.galerie-groesse { font-size: var(--fs-small); color: var(--fg-3); }
/* Dateien-Galerie: Stern und Ausblenden (v0.80.0). Knoepfe immer leicht sichtbar - auch ohne Hover (Touch). */
.galerie-rahmen { position: relative; width: 148px; }
.galerie-rahmen .galerie-kachel { width: 100%; }
.galerie-aktionen {
    position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; align-items: center;
    opacity: .6; transition: opacity .12s;
}
.galerie-rahmen:hover .galerie-aktionen, .galerie-rahmen:focus-within .galerie-aktionen, .galerie-wichtig .galerie-aktionen { opacity: 1; }
.galerie-aktion {
    width: 26px; height: 26px; border-radius: var(--radius-1); border: 1px solid var(--border-1);
    background: var(--bg-1); color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; line-height: 0;
}
.galerie-aktion svg { width: 15px; height: 15px; }
.galerie-aktion:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
.galerie-aktion-aktiv, .galerie-aktion-aktiv:hover { color: #c98a00; border-color: #c98a00; }
.galerie-aktion-aktiv svg { fill: currentColor; }
.galerie-wichtig .galerie-kachel { border-color: #c98a00; box-shadow: inset 0 0 0 1px #c98a00; }
.galerie-gedaempft .galerie-kachel { opacity: .5; }
.galerie-gedaempft .galerie-kachel:hover { opacity: 1; }
.galerie-grund { font-size: var(--fs-small); color: var(--fg-3); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-1); padding: 0 5px; line-height: 24px; }
.galerie-ausgeblendet { margin-top: var(--sp-3); }
.galerie-ausgeblendet > summary { cursor: pointer; }
.anhang-chip .galerie-stern-klein { color: #c98a00; fill: currentColor; }
.galerie-dialog {
    border: none; border-radius: var(--radius-2); padding: 0;
    background: transparent; max-width: 92vw; max-height: 92vh;
}
.galerie-dialog::backdrop { background: rgba(20, 24, 44, 0.82); }
.galerie-dialog img {
    max-width: 92vw; max-height: 84vh; display: block;
    border-radius: var(--radius-2); background: #fff;
}
.galerie-titel {
    color: #fff; text-align: center; font-size: var(--fs-small);
    padding: var(--sp-2) 0; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.galerie-schliessen, .galerie-pfeil {
    position: fixed; z-index: 1; border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.45); color: #fff;
    width: 44px; height: 44px; border-radius: 22px;
    font-size: 22px; line-height: 1;
}
.galerie-schliessen { top: 16px; right: 16px; }
.galerie-pfeil { top: 50%; transform: translateY(-50%); font-size: 30px; }
.galerie-zurueck { left: 16px; }
.galerie-vor { right: 16px; }
.galerie-schliessen:hover, .galerie-pfeil:hover { background: rgba(0, 0, 0, 0.7); }

/* Aufklappbare Kommunikations-Eintraege (v0.53.5): zugeklappt eine Zeile,
   aufgeklappt der volle Text mit hartem Umbruch gegen ueberlange URLs. */
.komm-eintrag { border-bottom: 1px solid var(--border-1); padding: var(--sp-2) 0; }
.komm-kopf {
    display: flex; align-items: baseline; gap: var(--sp-3);
    cursor: pointer; list-style: none; min-width: 0;
}
.komm-kopf::before { content: "▸"; color: var(--fg-3); font-size: var(--fs-small); flex: none; }
.komm-eintrag[open] > .komm-kopf::before { content: "▾"; }
.komm-kopf::-webkit-details-marker { display: none; }
.komm-vorschau {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--fg-2); min-width: 0; flex: 1;
}
.komm-eintrag[open] > .komm-kopf > .komm-vorschau { display: none; }
.komm-text {
    white-space: pre-wrap; overflow-wrap: anywhere;
    padding: var(--sp-2) 0 0 calc(var(--sp-3) + 0.7em);
}
.komm-eintrag[open] .anhang-chips { margin-left: calc(var(--sp-3) + 0.7em); }

/* Dateiliste der Ticketanlage (v0.59.2): gewaehlte Dateien mit Entfernen-Knopf. */
.datei-liste { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.datei-liste li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); }
.datei-liste .datei-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-liste .datei-groesse { color: var(--fg-3); }
.datei-liste .datei-entfernen { line-height: 1; font-size: 12px; padding: 2px 6px; }
.datei-liste[hidden] { display: none; }

.anhang-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.anhang-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border-1); border-radius: var(--radius-2);
    background: var(--bg-2, rgba(0, 0, 0, 0.03));
    text-decoration: none; color: inherit;
    font-size: var(--fs-small); max-width: 100%;
}
.anhang-chip:hover { border-color: var(--brand-blue); color: var(--brand-blue-deep); }
.anhang-chip .anhang-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.anhang-chip .anhang-groesse { color: var(--fg-3); white-space: nowrap; }
.icon-klein { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; }

/* "Mehr"-/Konto-Menü in der Kopfleiste (v0.39): natives details/summary, CSP-fest. */
.nav-menue { position: relative; display: inline-block; }
.nav-menue > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    /* Bewusst identisch zu .app-nav a - die Trigger stehen bündig in der Linkzeile. */
    padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-1);
    font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--fg-2);
    line-height: inherit;
}
.nav-menue > summary::-webkit-details-marker { display: none; }
.nav-menue > summary::after { content: "▾"; font-size: 0.7em; opacity: 0.7; }
.nav-menue[open] > summary, .nav-menue > summary:hover {
    color: var(--brand-blue-deep); background: var(--brand-blue-tint);
}
.nav-menue-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    min-width: 230px; padding: var(--sp-2) 0;
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: var(--radius-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.nav-menue-rechts .nav-menue-panel { left: auto; right: 0; }
.nav-menue-panel a, .nav-menue-panel button {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%; padding: var(--sp-2) var(--sp-4);
    background: none; border: 0; text-align: left; cursor: pointer;
    color: inherit; text-decoration: none; font: inherit; white-space: nowrap;
}
.nav-menue-panel a:hover, .nav-menue-panel button:hover { background: rgba(50, 60, 141, 0.08); }
.nav-menue-panel form { margin: 0; }
.nav-gruppe {
    display: block; padding: var(--sp-2) var(--sp-4) var(--sp-1);
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fg-3);
}
.nav-gruppe:not(:first-child) { border-top: 1px solid var(--border-1); margin-top: var(--sp-1); padding-top: var(--sp-3); }
/* Störungsanzeige: Punkt am Menü, Zahl am Eintrag - sichtbar trotz aufgeräumter Leiste. */
.stoerungs-punkt {
    width: 8px; height: 8px; border-radius: 50%;
    background: #C4382E; display: inline-block; flex-shrink: 0;
}
.stoerungs-zahl {
    margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px;
    background: #C4382E; color: #fff; font-size: 0.72rem; line-height: 20px;
    text-align: center;
}

/* KI-Einschätzung in der Quarantäne-Liste (v0.39): Badges und Zusammenfassung je in
   eigener Zeile unterm Betreff; der Text bricht ungekürzt um (kein nowrap/ellipsis),
   damit die Spalte schmale Screens nicht aufdrückt. */
.ki-zeile {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin-top: var(--sp-1);
}
.ki-kurztext {
    color: var(--fg-3); font-size: var(--fs-small);
    margin-top: var(--sp-1);
    overflow-wrap: anywhere; max-width: 72ch;
}

/* Jahresblock am Dashboard und Statistik-Balken (SPEC 12, v0.40): dezente CSS-Grafik,
   Markenblau auf grauer Spur - bewusst keine Chart-Bibliothek. */
.jahres-kacheln {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.jahres-kachel .kachel-zahl { font-size: 1.7rem; font-weight: var(--fw-semi); }
.anteil-balken {
    height: 6px; border-radius: 3px; background: var(--border-1);
    margin-top: var(--sp-2); overflow: hidden;
}
.anteil-fuellung { height: 100%; border-radius: 3px; background: var(--brand-blue); }

.monats-leiste {
    display: flex; align-items: flex-end; gap: var(--sp-2);
    height: 96px; margin-bottom: var(--sp-2);
}
.monats-spalte {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%; min-width: 0;
}
.monats-balken {
    width: 100%; max-width: 34px; border-radius: 3px 3px 0 0;
    background: var(--brand-blue); opacity: 0.45;
}
.monats-balken.aktuell { opacity: 1; }
.monats-label { font-size: 0.7rem; color: var(--fg-3); margin-top: 4px; }

.hbalken { display: flex; align-items: center; gap: var(--sp-2); min-width: 160px; }
.hbalken-spur {
    flex: 1; height: 8px; border-radius: 4px; background: var(--border-1); overflow: hidden;
}
.hbalken-fuellung { height: 100%; border-radius: 4px; background: var(--brand-blue); }
.hbalken-wert { font-size: var(--fs-small); color: var(--fg-2); white-space: nowrap; min-width: 56px; text-align: right; }
.statistik-tabelle td:first-child { white-space: nowrap; }

/* KI-Kurzfassung im Ticket-Kopf (v0.42): getönter Einschub mit Markenkante - klar
   abgegrenzt vom Original-Text der Anfrage, der als freier Fließtext folgt. */
.ki-kasten {
    background: var(--brand-blue-tint);
    border-left: 3px solid var(--brand-blue);
    border-radius: var(--radius-1);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-4) 0;
}
.ki-kasten-kopf {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--brand-blue-deep);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: var(--sp-1);
}
.ki-kasten-kopf .meta { text-transform: none; letter-spacing: normal; font-weight: normal; }

/* Terminaufgaben (v0.64.0): erledigt ausgegraut (Kurts Entscheidung, nicht durchgestrichen),
   ueberfaellig in der Fristfarbe. */
.termine .termin-haken { padding: 2px 6px; }
.termin-erledigt td { color: var(--fg-3); }
.termin-erledigt .meta { color: var(--fg-3); }
.termin-ueberfaellig .termin-faellig { color: var(--status-crit); font-weight: 600; }

/* Bestaetigungsdialog (v0.83.0): ein Muster fuer alle Rueckfragen, nativer <dialog>, js/bestaetigen.js. */
.bestaetigen-dialog {
    border: 1px solid var(--border-1); border-radius: var(--radius-2); padding: 0;
    width: min(440px, calc(100vw - 2 * var(--sp-4))); background: var(--bg-1); color: var(--fg-1);
    box-shadow: 0 18px 48px rgba(20, 24, 44, 0.28);
}
.bestaetigen-dialog::backdrop { background: rgba(20, 24, 44, 0.55); }
.bestaetigen-inhalt { padding: var(--sp-5); }
.bestaetigen-frage { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.bestaetigen-text { margin: 0 0 var(--sp-4); color: var(--fg-2); }
.bestaetigen-aktionen { justify-content: flex-end; }
/* Pruefschritt vor dem Ticket anlegen (v0.83.0): Zusammenfassung im Formular statt Popup. */
.pruef-karte {
    margin-top: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--brand-blue);
    border-radius: var(--radius-2); background: var(--brand-blue-tint);
}
.pruef-karte h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.pruef-karte .liste td:first-child { color: var(--fg-2); width: 190px; }
.pruef-karte .aktionen { margin-top: var(--sp-3); }

/* Kennzahlen-Kacheln ohne Link (Verrechnungsseite, v0.85.0). */
.kachel-statisch { cursor: default; }
.kachel-statisch:hover { border-color: var(--border-1); }
.kachel-zahl-klein { font-size: var(--fs-h3); line-height: 1.3; }


/* Domain-Chips an der freien Melder-Adresse (Ticketanlage, v0.86.1). */
.domain-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); }
.domain-chip { font: inherit; font-size: var(--fs-small); cursor: pointer; line-height: 1.2; }
.domain-chips[hidden], .domain-chip[hidden] { display: none !important; }

/* Vorlagen-Auswahl (v1.1.0, Team-Wunsch): eigene Trefferliste unter dem Suchfeld, X-Knopf im Feld. */
.vorlagen-wahl { position: relative; display: inline-block; }
.vorlagen-wahl [data-vorlagen-eingabe] { width: 100%; box-sizing: border-box; padding-right: 30px; }
.vorlagen-leeren {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-1);
  background: transparent; color: var(--fg-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.vorlagen-leeren svg { width: 14px; height: 14px; }
.vorlagen-leeren:hover, .vorlagen-leeren:focus-visible { background: var(--brand-blue-tint); color: var(--brand-blue); outline: none; }
.vorlagen-liste {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 2px);
  min-width: 100%; width: max-content; max-width: min(560px, 92vw); max-height: 320px; overflow-y: auto;
  margin: 0; padding: var(--sp-1) 0; list-style: none;
  background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--radius-2);
  box-shadow: 0 6px 18px rgba(17, 19, 24, 0.12);
}
.vorlagen-liste li {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--fs-small); text-align: left;
}
.vorlagen-liste li[aria-selected="true"], .vorlagen-liste li:hover { background: var(--brand-blue-tint); }
.vorlagen-name { font-weight: var(--fw-semi); color: var(--fg-1); }
.vorlagen-meta { color: var(--fg-2); white-space: nowrap; }
.vorlagen-vorschau { grid-column: 1 / -1; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.vorlagen-liste .vorlagen-leer { display: block; cursor: default; color: var(--fg-2); }
.vorlagen-liste .vorlagen-leer:hover { background: transparent; }
.vorlagen-liste[hidden], .vorlagen-leeren[hidden], .vorlagen-liste li[hidden],
[data-vorlagen-knopf][hidden] { display: none !important; } /* .knopf hat eine eigene display-Regel */
@media (pointer: coarse) and (max-width: 900px) {
  .vorlagen-liste li { min-height: 44px; align-content: center; }
}

/* Freigabe-Karte (v1.2.0): optional eingeklappt, Pflicht offen. */
.freigabe-details > summary { cursor: pointer; }
.freigabe-details > summary h2 { display: inline; margin: 0; }

/* Kundenübersicht (v1.3.0): eine aufklappbare Karte je Kunde, Raster für Verrechnung, Kommunikation, Freigabe. */
.kunden-karte > summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: minmax(16rem, 1fr) 15rem minmax(22rem, 34rem) 1rem;
  align-items: center; column-gap: var(--sp-3); row-gap: var(--sp-1);
}
.kunden-karte > summary::-webkit-details-marker { display: none; }
.kunden-karte > summary h2 { display: inline; margin: 0; margin-right: var(--sp-2); }
.kunden-spalte-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.kunden-spalte-freigabe, .kunden-spalte-cash { display: flex; align-items: center; min-width: 0; }
.kunden-karte > summary .badge { white-space: normal; text-align: left; }
.kunden-spalte-freigabe .badge { white-space: nowrap; } /* kurzer Text, immer einzeilig */
/* dezenter Aufklapp-Pfeil (CSS-Winkel statt Glyphe) */
.kunden-karte > summary::after {
  content: ""; width: 8px; height: 8px; justify-self: end; margin-right: 4px;
  border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg);
  transition: transform 120ms ease;
}
.kunden-karte[open] > summary::after { transform: rotate(-135deg); }
@media (max-width: 900px) {
  .kunden-karte > summary { grid-template-columns: 1fr 1rem; }
  .kunden-spalte-freigabe, .kunden-spalte-cash { grid-column: 1; }
  .kunden-karte > summary::after { grid-column: 2; grid-row: 1; }
}
.kunden-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.kunden-raster h3 { margin: 0 0 var(--sp-2); }
/* v1.3.3 (Kurts Screenshot): alle drei Tabellen teilen dieselbe feste Spaltenteilung, damit die Werte
   ueber die Bloecke hinweg auf einer Flucht stehen; Beschriftungen bleiben einzeilig, Werte brechen nur im Notfall. */
.kunden-raster table.liste { table-layout: fixed; width: 100%; }
.kunden-raster table.liste td { vertical-align: top; }
.kunden-raster table.liste td:first-child { width: min(42%, 13rem); color: var(--fg-2); } /* kurze Beschriftungen, bei Platznot umbrechen statt abschneiden */
.kunden-raster table.liste td:last-child { overflow-wrap: break-word; }
.kunden-domains { display: flex; flex-wrap: wrap; gap: 4px; }