/* ==========================================================================
   BeWo Ticketsystem - Responsive-Erweiterung (03.10.2026)
   --------------------------------------------------------------------------
   Eingebunden ueber framework/js/head.php NACH css/styles.css.

   OBERSTE REGEL: Desktop bleibt unveraendert. Diese Datei enthaelt deshalb
   ausschliesslich Regeln innerhalb von max-width-Media-Queries unterhalb
   von 1280px - einzige Ausnahme: neue, nur fuer kleine Bildschirme gedachte
   Elemente (Menue-Knopf) werden ausserhalb ausgeblendet.

   Breakpoints (ausgerichtet am bestehenden Layout, nicht an Einzelgeraeten):
     Desktop        >= 1280px   unveraendert
     Tablet quer    1024-1279   kompaktere Navigation/Abstaende
     Tablet hoch     768-1023   Seitengeruest gestapelt, Seitenleiste als
                                Aktionsleiste oben, Statusleiste als Overlay
     Smartphone       < 768     Menue-Knopf, einspaltige Formulare,
                                Tabellen als Karten, Dialoge bildschirmfuellend

   Keine zweite Fachlogik, kein zweites Markup: dieselben Elemente werden nur
   anders angeordnet. Daten-Zuordnung in Tabellen-Karten ueber data-label
   (js/tc-responsive.js, aus der Spaltenposition berechnet).
   ========================================================================== */

/* Neue Elemente, die es nur auf kleinen Bildschirmen gibt */
.app-hauptnav-menueknopf { display: none; }
.tc-rwd-filterknopf { display: none; }

/* ==========================================================================
   TABLET QUER UND KLEINER (< 1280px)
   ========================================================================== */
@media (max-width: 1279.98px) {
	/* lange Woerter (E-Mail, Seriennummern, Ticketnummern) duerfen umbrechen */
	/* nur Woerter umbrechen, die sonst gar nicht in die Zeile passen (E-Mail, Seriennummer),
	   ohne die Mindestbreite normaler Woerter zu veraendern (anywhere wuerde "Prio-ritaet" trennen) */
	body { overflow-wrap: break-word; }
	img, video, canvas, iframe { max-width: 100%; }
	img { height: auto; }

	/* Hauptnavigation kompakter */
	.app-hauptnav-liste { gap: 6px; }
	.app-hauptnav-link { padding: 10px 12px; gap: 7px; font-size: 14px; }
	/* Avatar (persoenlicher Bereich) bleibt neben der Navigation statt in eigener Zeile */
	.app-hauptnav { flex-wrap: nowrap; align-items: flex-start; }
	.app-hauptnav-liste { flex: 1 1 auto; min-width: 0; }
	.app-hauptnav-user-block { flex: 0 0 auto; }
	/* leere Aktionskarte in der Seitenleiste (z. B. geschlossenes Ticket) */
	.sidebar-action-panel:not(:has(input:not([type="hidden"]), button, a, select)) { display: none; }
}

/* ==========================================================================
   TABLET HOCH UND KLEINER (< 1024px)
   ========================================================================== */
@media (max-width: 1023.98px) {
	/* iPhone/iPad: Inhalt nie unter Kamera-Aussparung/Bildschirmrundung (viewport-fit=cover) */
	body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
	/* Seiten nie breiter als der Bildschirm (Sicherheitsnetz gegen einzelne Ausreisser) */
	html, body { max-width: 100%; }

	/* --- Seitengeruest: aeussere Layout-Tabelle wird zum Blockfluss ------- */
	body > table,
	body > table > thead,
	body > table > tbody,
	body > table > thead > tr,
	body > table > tbody > tr,
	body > table > tr {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	body > table > thead > tr > td,
	body > table > tbody > tr > td,
	body > table > tr > td {
		display: block;
		width: auto !important;
		box-sizing: border-box;
	}
	/* rein dekorative Rahmen-/Abstandszellen (graue Kanten, Gutter, leere Platzhalter) */
	body > table > thead > tr > td.app-rahmen-kante,
	body > table > thead > tr > td.app-rahmen-gutter,
	body > table > tbody > tr > td.app-rahmen-kante,
	body > table > tbody > tr > td.app-rahmen-gutter,
	body > table > tbody > tr > td[bgcolor="#666666" i],
	body > table > tbody > tr > td[width="6"],
	body > table > tbody > tr > td[width="10"],
	body > table > tbody > tr > td[width="5"] { display: none !important; }
	/* unsichtbare Platzhalterzeile direkt unter dem Kopf (nur &nbsp;-Zellen) */
	body > table > tbody > tr:not(:has(td :is(a, button, input, select, textarea, img, table, div, form, nav, ul, p, span))) { display: none; }
	/* linke Seitenspalte (159px) - leer: ausblenden; mit Inhalt (Ticketaktionen):
	   als Aktionsleiste ueber dem Inhalt */
	body > table > tbody > tr > td[width="159"]:not(:has(:is(a, button, input, form, select))) { display: none !important; }
	body > table > tbody > tr > td[width="159"] {
		padding: 10px 12px !important;
		background: var(--color-surface) !important;
		border-bottom: 1px solid var(--color-border);
	}
	/* Hauptinhalt: volle Breite, schmaler Rand */
	body > table > tbody > tr > td:not([width]):not([class]) { padding: 0 10px; }
	/* innere Inhaltstabelle jeder Seite (Ueberschrift/Zitat/Inhalt): ebenfalls Blockfluss,
	   sonst dehnt sie sich auf ihr breitestes nicht umbrechendes Kind aus */
	body > table > tbody > tr > td > table[width="100%" i],
	body > table > tbody > tr > td > table[width="100%" i] > tbody,
	body > table > tbody > tr > td > table[width="100%" i] > tbody > tr,
	body > table > tbody > tr > td > table[width="100%" i] > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
	/* Werkzeugleiste im Ticket (Druckansicht, Daten senden, ...) darf umbrechen */
	.tc-detail-toolbar { flex-wrap: wrap; }

	/* Kopfbereich nicht fixiert: siehe eigener Block "Kompakte Hoehe" unten */
	.app-header-flex { flex-wrap: wrap; row-gap: 8px; }
	.app-header-linksbereich { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
	.app-header-rechtsbereich { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
	.app-header-suche { flex: 1 1 220px; min-width: 0; }
	.app-header-suche-feld { width: 100% !important; min-width: 0; }

	/* --- Statusleiste: immer als Overlay (wie bisher unter 1600px) ------- */
	.tc-statusleiste { height: 100dvh; padding-bottom: calc(var(--spacing-md, 14px) + env(safe-area-inset-bottom)); }

	/* --- Dialoge: nie breiter als der Bildschirm ------------------------ */
	dialog.tc-modal { max-width: calc(100vw - 16px) !important; }
	dialog.tc-modal[open] { max-height: calc(100dvh - 16px); }

	/* --- Formularkarten: volle Breite ----------------------------------- */
	.tc-form-card { max-width: none; }
}

/* ==========================================================================
   KOMPAKTE HOEHE: Tablet hochkant/Smartphone sowie Tablet quer mit geringer
   Bildschirmhoehe (z. B. 1024x768, 1180x820). Der Kopfbereich ist dort ca.
   240px hoch - fixiert wuerde er ein Drittel des Bildschirms dauerhaft
   belegen. Kopfbereich und angepinnter Listenkopf scrollen daher normal mit;
   die Anheften-Einstellung des Nutzers bleibt gespeichert und wirkt auf dem
   Desktop unveraendert. --tc-kopf-hoehe (inline von framework/Kopfzeile/
   Default.php gesetzt) wird neutralisiert, damit Statusleisten-Overlay und
   Listenkopf nicht mit Abstand zum oberen Rand erscheinen. Der eingefahrene
   Kopf (beim Anpinnen) bleibt vollstaendig sichtbar - sonst fehlen "Neues
   Ticket" und die Ticketsuche.
   ========================================================================== */
@media (max-width: 1023.98px), (max-width: 1279.98px) and (max-height: 900px) {
	html { --tc-kopf-hoehe: 0px !important; }
	.app-kopfbereich-sticky { position: static !important; }
	.tc-listenkopf-sticky-block.tc-listenkopf--angepinnt { position: static !important; box-shadow: none; }
	.app-kopfbereich--eingefahren .app-header-flaeche { padding-top: 10px; padding-bottom: 10px; min-height: revert; overflow: visible; }
	.app-kopfbereich--eingefahren .app-header-flex { opacity: 1; max-height: none; overflow: visible; pointer-events: auto; }
}

/* ==========================================================================
   SMARTPHONE (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
	body { font-size: 15px; }

	/* --- Kopfbereich ---------------------------------------------------- */
	.app-header-flaeche { padding: 8px 10px !important; }
	.app-header-cta--hero { flex: 1 1 auto; justify-content: center; }
	.app-header-marke-untertitel { display: none; }
	.app-header-status-hinweis { display: none !important; } /* Zaehler bleibt im SMS-Knopf sichtbar */

	/* --- Hauptnavigation: Menue-Knopf + aufklappbare Liste --------------- */
	.app-hauptnav { flex-wrap: wrap; gap: 8px; align-items: center; position: relative; }
	.app-hauptnav-menueknopf {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 8px 16px;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-medium);
		background-color: var(--color-surface);
		color: var(--color-text);
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}
	.app-hauptnav-menueknopf:hover,
	.app-hauptnav-menueknopf:active { background-color: var(--color-background); color: var(--color-text); }
	.app-hauptnav-menueknopf:focus-visible { outline: none; box-shadow: var(--tc-ui-fokusring, 0 0 0 3px var(--color-primary)); }
	.app-hauptnav-menueknopf .tc-icon { width: 20px; height: 20px; }
	.app-hauptnav--offen .app-hauptnav-menueknopf { background-color: var(--tc-ui-akzentflaeche, var(--color-primary)); border-color: var(--tc-ui-akzentflaeche, var(--color-primary)); color: #FFF; }
	.app-hauptnav-liste { display: none; }
	.app-hauptnav--offen .app-hauptnav-liste {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		order: 3;
		flex: 1 1 100%;
		padding: 6px 0 4px;
	}
	.app-hauptnav--offen .app-hauptnav-item { display: block; }
	.app-hauptnav--offen .app-hauptnav-link { display: flex; width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; padding: 12px 14px; }
	.app-hauptnav-user-block { margin-left: auto; }
	.app-statusleiste-umschalter { min-width: 44px; min-height: 44px; }

	/* --- Kopfbereich kompakter: Marke ohne Text, Logo klein --------------- */
	.app-header-marke { display: none; }
	.app-header-rechtsbereich img, .app-header-logo { max-height: 36px; width: auto; }
	.app-header-rechtsbereich { justify-content: space-between; }

	/* --- Leere Aktionskarte in der Seitenleiste (z. B. geschlossenes Ticket) */
	.sidebar-action-panel:not(:has(input:not([type="hidden"]), button, a, select)) { display: none; }

	/* --- Umschalter/Reiter: umbrechen, aber nie mitten im Wort ------------ */
	.tc-history-view-toggle { flex-wrap: wrap; }
	.tc-history-view-btn { white-space: nowrap; flex: 1 1 auto; text-align: center; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

	/* --- Listenkopf: Titel und Suche untereinander, Suche volle Breite ---- */
	.tc-listenkopf-titelzeile, .tc-tickets-headline-row { flex-wrap: wrap; }
	.tc-listenkopf-titelgruppe { flex: 1 1 100%; flex-wrap: wrap; }
	.tc-listenkopf-suche-form, .tc-history-search-wrap { flex: 1 1 100%; min-width: 0; max-width: none; }
	.tc-history-search { width: 100% !important; min-width: 0; box-sizing: border-box; }
	.tc-listenkopf-titelgruppe .tc-listenkopf-suche-form .tc-history-search-wrap { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; box-sizing: border-box; }
	.tc-listenkopf-titelgruppe .tc-listenkopf-suche-form .tc-history-search-wrap .tc-history-search { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; }

	/* --- Ticket-Aktionsleiste (linke Spalte): zweispaltig statt untereinander.
	       Alle Aktionen bleiben sichtbar, "Loeschen" voll breit und abgesetzt. */
	.sidebar-action-panel, .sidebar-action-panel > tbody { display: block; width: 100% !important; }
	.sidebar-action-panel > tbody,
	body > table > tbody > tr > td > table.sidebar-action-panel > tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	body > table > tbody > tr > td > table.sidebar-action-panel > tbody > tr,
	body > table > tbody > tr > td > table.sidebar-action-panel > tbody > tr > td { width: auto !important; padding: 0 !important; }
	.sidebar-action-panel > tbody > tr, .sidebar-action-panel > tbody > tr > td { display: block; width: auto !important; padding: 0 !important; }
	.sidebar-action-panel > tbody > tr:not(:has(input:not([type="hidden"]), button, a, select)) { display: none; }
	.sidebar-action-panel .SchnellButton { width: 100% !important; min-height: 46px; }
	.sidebar-link-card { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
	.sidebar-link-action { min-height: 46px; }
	.sidebar-link-action--danger { grid-column: 1 / -1; margin-top: 8px; }
	/* --- Listenkopf: "Filter & Sortierung" einklappbar (js/tc-responsive.js) */
	.tc-rwd-filterknopf {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: 46px;
		margin: 8px 0;
		padding: 8px 14px;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-medium);
		background-color: var(--color-surface);
		color: var(--color-text);
		font: inherit;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
	}
	.tc-rwd-filterknopf:hover, .tc-rwd-filterknopf:active { background-color: var(--color-background); color: var(--color-text); }
	.tc-rwd-filterknopf:focus-visible { outline: none; box-shadow: var(--tc-ui-fokusring, 0 0 0 3px var(--color-primary)); }
	.tc-rwd-filterknopf-zahl { padding: 1px 8px; border-radius: 999px; background-color: var(--tc-ui-akzentflaeche, var(--color-primary)); color: #FFF; font-size: .8rem; }
	.tc-rwd-filterknopf-pfeil { margin-left: auto; transition: transform .15s ease; }
	.tc-rwd-filterknopf[aria-expanded="true"] .tc-rwd-filterknopf-pfeil { transform: rotate(180deg); }
	.tc-listenkopf-steuerblock.tc-rwd-filter-bereit:not(.tc-rwd-filter--offen) { display: none !important; }
	.tc-log-toolbar-row, .tc-log-toolbar-rechts { flex-wrap: wrap; }
	.tc-log-filter-zeile, .tc-log-filter-hauptzeile { flex-direction: column; align-items: stretch; }
	.tc-filter-multiselect, .tc-filter-multiselect-trigger { width: 100%; }
	.tc-filter-multiselect-popover { max-width: calc(100vw - 24px); }
	/* --- Ticketdetails: Kopf ---------------------------------------------- */
	.tc-detail-head { padding: 12px 12px 12px 14px; }
	.tc-detail-head-top { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; }
	.tc-detail-head-media { flex-direction: column; }
	.tc-detail-head-media .tc-header-image, .tc-detail-head-media .tc-image { width: 44px; height: 44px; }
	.tc-detail-head-main { flex: 0 0 auto !important; padding-right: 0 !important; }
	.tc-detail-head-status { grid-column: 1 / -1; max-width: none; margin: 0 !important; }
	/* Status gross, aber nie mitten im Wort getrennt */
	.tc-detail-head-status .ticket-status-label { font-size: 19px; overflow-wrap: normal; word-break: normal; }
	/* Eckband "Weitere offene Tickets zum gleichen Kontakt" als eigene Zeile statt Ueberlagerung
	   (verdeckte sonst den Knopf "Bearbeiten" der Kontaktkarte) */
	.tc-detail-contact .tc-corner-ribbon { position: static; width: auto; clip-path: none; border-radius: var(--radius-medium) var(--radius-medium) 0 0; padding: 10px 14px; }
	/* Kontakt-Schaltflaechen nie breiter als die Karte */
	.tc-detail-contact-columns { grid-template-columns: 1fr !important; }
	.tc-detail-contact-action { max-width: 100%; box-sizing: border-box; white-space: normal; }
	.tc-detail-contact-tools { min-width: 0; }

	/* --- Seitenkoepfe/Ueberschriften ------------------------------------ */
	.tc-admin-kopf { flex-direction: column; align-items: stretch !important; gap: 10px; }
	.tc-admin-kopf-aktionen { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }

	/* --- Formulare: einspaltig, Labels oben, volle Breite, Touch-Groesse - */
	.tc-form-card { padding: 14px; }
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"],
	input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], select, textarea {
		max-width: 100%;
		font-size: 16px; /* verhindert das automatische Hineinzoomen in iOS Safari */
	}
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"],
	input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], select {
		min-height: 44px;
		box-sizing: border-box;
	}
	/* Touch-Ziele: Text-Schaltflaechen mind. 44px hoch; reine Symbolknoepfe (rund/quadratisch)
	   bekommen stattdessen eine Mindestgroesse in BEIDE Richtungen, damit sie nicht oval werden */
	.button, input[type="submit"], input[type="button"] { min-height: 44px; }
	button:not(:has(> svg:only-child)) { min-height: 40px; }
	button:has(> svg:only-child) { min-width: 40px; min-height: 40px; }
	.tc-detail-fields-grid, .tc-kp-formgrid, .tc-kp-felder { grid-template-columns: 1fr !important; }
	.tc-form-zeile { flex-direction: column; align-items: stretch; }

	/* --- Alte Formular-Tabellen (Beschriftung | Feld) in Formularkarten:
	       Beschriftung ueber dem Feld, Feld in voller Breite. Datentabellen
	       (.ticket-list-view) sind ausgenommen. */
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table),
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table) > tbody,
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table) > tbody > tr,
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table) > tbody > tr > td,
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table) > tbody > tr > th {
		display: block;
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table) > tbody > tr > td { padding-left: 0; padding-right: 0; }
	.tc-form-card select, .tc-form-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), .tc-form-card textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; }
	.tc-form-radio-karte { max-width: 100%; box-sizing: border-box; }
	/* gestapelte Zeile "Bezeichnung | Wert": Bezeichnung klar als solche erkennbar */
	.tc-form-card table:not(.ticket-list-view):not(.tc-tabelle-scroll):not(.tc-history-table) > tbody > tr > td:first-child:not(:only-child):not(:has(input, select, textarea, button)) { font-size: .85rem; font-weight: 700; color: var(--color-text-muted); padding-top: 8px; }
	/* --- Dialoge: bildschirmfuellend, Kopf und Knoepfe immer erreichbar --- */
	dialog.tc-modal,
	dialog.tc-modal.tc-modal--gross,
	dialog.tc-modal.tc-modal--breit {
		width: 100vw !important;
		max-width: 100vw !important;
		margin: 0;
		border-radius: 0;
	}
	dialog.tc-modal[open] {
		height: 100dvh;
		max-height: 100dvh !important;
		top: 0;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
	}
	.tc-modal-actions { flex-wrap: wrap; gap: 8px; }
	.tc-modal-actions .button { flex: 1 1 140px; }

	/* --- Datentabellen als Karten (Bezeichnung -> Wert) ------------------ */
	table.tc-tabelle-karten,
	table.tc-tabelle-karten > tbody,
	table.tc-tabelle-karten > tbody > tr,
	table.tc-tabelle-karten > tbody > tr > td,
	table.tc-tabelle-karten > tr,
	table.tc-tabelle-karten > tr > td { display: block; width: auto !important; }
	table.tc-tabelle-karten { min-width: 0 !important; border: 0; background: transparent; }
	table.tc-tabelle-karten > thead,
	table.tc-tabelle-karten tr[data-tc-kopf] { display: none !important; }
	table.tc-tabelle-karten > tbody > tr,
	table.tc-tabelle-karten > tr {
		margin: 0 0 10px;
		padding: 8px 12px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-medium);
		background-color: var(--color-surface);
		box-shadow: var(--shadow-small);
	}
	table.tc-tabelle-karten > tbody > tr > td,
	table.tc-tabelle-karten > tr > td {
		/* td als Tabelle: ::before = Bezeichnungszelle, der GESAMTE uebrige Inhalt
		   bildet eine anonyme zweite Zelle -> Wert bleibt zusammen, Zeilenhoehe passt */
		display: table !important;
		width: 100% !important;
		table-layout: fixed;
		padding: 7px 0 !important;
		border: 0 !important;
		border-bottom: 1px solid var(--color-border) !important;
		text-align: left !important;
		white-space: normal !important;
	}
	table.tc-tabelle-karten > tbody > tr > td:last-child,
	table.tc-tabelle-karten > tr > td:last-child { border-bottom: 0 !important; }
	table.tc-tabelle-karten > tbody > tr > td::before,
	table.tc-tabelle-karten > tr > td::before {
		content: attr(data-label);
		font-size: .78rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .02em;
		color: var(--color-text-muted);
		display: table-cell;
		width: 38%;
		padding-right: 10px;
		vertical-align: top;
		overflow-wrap: anywhere;
	}
	/* Zellen ohne Spaltenueberschrift (z. B. Aktions- oder Auswahlspalte): ganze Breite */
	table.tc-tabelle-karten > tbody > tr > td:not([data-label]),
	table.tc-tabelle-karten > tbody > tr > td[data-label=""],
	table.tc-tabelle-karten > tr > td:not([data-label]),
	table.tc-tabelle-karten > tr > td[data-label=""] { display: block !important; }
	table.tc-tabelle-karten > tbody > tr > td:not([data-label])::before,
	table.tc-tabelle-karten > tbody > tr > td[data-label=""]::before,
	table.tc-tabelle-karten > tr > td:not([data-label])::before,
	table.tc-tabelle-karten > tr > td[data-label=""]::before { content: none; }
	/* leere Zellen ausblenden (reine Platzhalter), Bezeichnung + Wert bleiben paarweise */
	table.tc-tabelle-karten > tbody > tr > td:empty,
	table.tc-tabelle-karten > tr > td:empty { display: none; }
	/* Zeilen, die ueber alle Spalten gehen (Gruppenueberschriften, Hinweise) */
	table.tc-tabelle-karten > tbody > tr > td[colspan]:not([colspan="1"]) { display: block !important; }
	table.tc-tabelle-karten > tbody > tr > td[colspan]:not([colspan="1"])::before { content: none; }
	/* Ticketliste: Artbild als feste Flaeche + Gruppe/Art sichtbar (sonst nur Tooltip) */
	table.tc-tabelle-karten > tbody > tr > td.tc-list-art { display: block !important; position: relative; min-height: 56px; padding: 6px 0 6px 72px !important; }
	table.tc-tabelle-karten > tbody > tr > td.tc-list-art::before { content: none; }
	table.tc-tabelle-karten > tbody > tr > td.tc-list-art .tc-list-art-image-wrap { position: absolute; left: 0; top: 6px; width: 60px; height: 56px; }
	table.tc-tabelle-karten > tbody > tr > td.tc-list-art::after { content: attr(data-tc-zusatz); white-space: pre-line; font-weight: 600; font-size: .9rem; color: var(--color-text); }
	/* Desktop-Abschneidetrick (max-width:0 + Ellipse, z. B. .tc-wwi-kompakt-zelle)
	   in Karten aufheben - sonst ist die Wertespalte 0px breit und der Text
	   bricht Zeichen fuer Zeichen um */
	table.tc-tabelle-karten > tbody > tr > td { max-width: none !important; }
	table.tc-tabelle-karten > tbody > tr > td.tc-wwi-kompakt-zelle { overflow: visible; white-space: normal; text-overflow: clip; }
	/* Tabellen, deren Struktur erhalten bleiben muss: horizontal scrollbar */
	/* Tabelle selbst wird zum horizontal scrollbaren Bereich (Struktur bleibt erhalten) */
	table.tc-tabelle-scroll { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	table.tc-tabelle-scroll > thead > tr > *, table.tc-tabelle-scroll > tbody > tr > * { white-space: nowrap; }
	.tc-list-scroll { -webkit-overflow-scrolling: touch; }

	/* Mehrfachauswahl-Popover im Filter: exakt so breit wie das Auswahlfeld
	   (max-content bis 340px ragte bei Gruppen/Arten seitlich heraus) */
	.tc-filter-multiselect-popover { left: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }

	/* Fixierte Speicherleiste (Koop/Einrichtung aendern): kompakt, beide
	   Knoepfe nebeneinander - sonst belegt sie ein Fuenftel des Bildschirms */
	.tc-kp-speicherleiste { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
	.tc-kp-speicherleiste-hinweis { flex: 1 1 100%; font-size: 12px; }
	.tc-kp-speicherleiste .tc-kp-akte-aktionen { display: flex; gap: 8px; width: 100%; }
	.tc-kp-speicherleiste .tc-kp-akte-aktionen { flex-wrap: nowrap; }
	.tc-kp-speicherleiste .tc-kp-akte-aktionen > * { flex: 1 1 0; width: auto !important; min-width: 0; white-space: normal; }
	.tc-kp-speicherleiste .tc-kp-akte-aktionen > a.button { flex: 0 0 auto; }
}