/* Farben aus dem kalucare-Logo: Navy (#000050) als Hauptfarbe, Hellblau (#C1DBEB) als Akzent.
   Hell/Dunkel folgt dem System; theme.js setzt data-theme, wenn jemand im Header umschaltet. */
/* Schrift Inter (SIL Open Font License, fonts/Inter-OFL.txt), liegt in app/static/fonts und wird vom Server selbst ausgeliefert,
   keine Aufrufe bei Google Fonts oder einem CDN. Eine variable Datei je Schriftschnitt deckt alle Stärken ab;
   latin-ext lädt der Browser nur, wenn Zeichen außerhalb von Westeuropa vorkommen (z. B. ł, ő). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --navy: #0a0a5a; --pale: #c1dbeb;
  --bg: #f3f5fa; --card: #fff; --raised: #f7f9fc; --text: #14183d; --muted: #5d6483; --line: #dde3ee; --line-strong: #c5cddd;
  --primary: #0a0a5a; --primary-hover: #20207e; --primary-text: #fff;
  --link: #24249a; --soft: #e6f0f8; --soft-text: #0a0a5a; --focus: rgba(70, 120, 200, 0.35);
  --input: #fff; --header: #fff; --shadow: 0 1px 2px rgba(10, 10, 90, 0.05), 0 2px 8px rgba(10, 10, 90, 0.04);
  --ok: #1d7a4c; --ok-bg: #e3f4ea; --warn: #94570b; --warn-bg: #fdf0d9; --err: #b3261e; --err-bg: #fce8e6;
  --violet: #4b3fb0; --violet-bg: #ebe9fb; --grey: #5d6483; --grey-bg: #eceff5;
  --radius: 10px; --radius-sm: 7px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 15px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0d1e; --card: #14172c; --raised: #191d35; --text: #e6e9f6; --muted: #9ba2c2; --line: #261b48; --line-strong: #353b5e;
    --primary: #c1dbeb; --primary-hover: #d8e8f3; --primary-text: #0a0a5a;
    --link: #a8cbec; --soft: #1d2647; --soft-text: #c9e0f2; --focus: rgba(168, 203, 236, 0.35);
    --input: #0f1225; --header: #10132a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ok: #6fd3a0; --ok-bg: #12301f; --warn: #f0b860; --warn-bg: #33250d; --err: #ff8a80; --err-bg: #3a1513;
    --violet: #b3abff; --violet-bg: #251f4d; --grey: #9ba2c2; --grey-bg: #1f2340;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d1e; --card: #14172c; --raised: #191d35; --text: #e6e9f6; --muted: #9ba2c2; --line: #261b48; --line-strong: #353b5e;
  --primary: #c1dbeb; --primary-hover: #d8e8f3; --primary-text: #0a0a5a;
  --link: #a8cbec; --soft: #1d2647; --soft-text: #c9e0f2; --focus: rgba(168, 203, 236, 0.35);
  --input: #0f1225; --header: #10132a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ok: #6fd3a0; --ok-bg: #12301f; --warn: #f0b860; --warn-bg: #33250d; --err: #ff8a80; --err-bg: #3a1513;
  --violet: #b3abff; --violet-bg: #251f4d; --grey: #9ba2c2; --grey-bg: #1f2340;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Die Seite wächst mit dem Fenster bis 1680px, damit breite Listen auf großen Bildschirmen als Tabelle
   passen; Fließtext bleibt auf lesbarer Zeilenlänge */
main { max-width: 1680px; margin: 0 auto; padding: 24px clamp(20px, 2.5vw, 40px) 48px; }
main p { max-width: 110ch; }
h1 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0.3em 0 0.4em; }
h2 { font-size: 1.05rem; margin: 1.2em 0 0.6em; }
.card > h2:first-child, form.card > input[type=hidden] + h2 { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* Kopfzeile */
header.top { position: sticky; top: 0; z-index: 10; background: var(--header); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1680px; margin: 0 auto; padding: 10px clamp(20px, 2.5vw, 40px); display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); }
.brand-sub { font-weight: 300; font-size: 1.05rem; color: var(--muted); }
.top nav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
/* Breiter Bildschirm (ab 1101 px, Tablets hochkant nutzen den Menü-Knopf): Kopf in einer Zeile. Die Navigation löst sich in die Kopfzeile auf (display: contents), damit
   die Kollegen zwischen Menü und „Neues Ticket“ stehen können: Logo, Menü, Kollegen, Neues Ticket, Benutzermenü. */
@media (min-width: 1101px) {
  .top-inner { flex-wrap: nowrap; gap: 8px 4px; padding-top: 8px; padding-bottom: 8px; }
  .top nav { display: contents; }
  .brand { order: -1; margin-right: 12px; }
  .top-inner .colleagues { order: 1; flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; margin: 0 8px 0 auto; padding: 2px; }
  .top-inner .colleague { flex: none; }
  .top nav .nav-end { order: 2; flex: none; gap: 10px; }
  .top .brand img.brand-logo { height: 48px; }
  .top .brand img.brand-wide { height: 38px; }
}
/* Lange Namen kürzen; der Untertitel neben einem Textlogo (neutrale Instanz) braucht sonst bis 1440 px zu viel Platz */
.nav-user-name { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1440px) {
  .top .brand-sub { display: none; }
}
/* Tablet quer (z. B. 1194 px) und kleine Laptops: Menüpunkte enger, sonst ragt das Benutzermenü über den Rand */
@media (min-width: 1101px) and (max-width: 1360px) {
  .top nav a, .top nav button.link, .top .nav-group > summary { padding-left: 6px; padding-right: 6px; font-size: 0.93rem; }
  .top-inner { gap: 8px 2px; padding-left: 16px; padding-right: 16px; }
  .top nav .nav-new { padding-left: 10px; padding-right: 10px; }
  .brand { margin-right: 4px; }
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .nav-user-name { display: none; }
  .top nav .company-switch select { max-width: 11rem; }
}
.top nav .nav-new { padding: 7px 14px; white-space: nowrap; color: var(--primary-text); }
.top nav .nav-new:hover { background: var(--primary-hover); color: var(--primary-text); }
.top nav .nav-new.active { background: var(--primary-hover); color: var(--primary-text); }
/* Untermenüs Stammdaten, Verwaltung und Benutzer */
.nav-group { position: relative; }
.nav-group > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm);
  font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.6; }
.nav-group[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-group > summary:hover, .nav-group[open] > summary { background: var(--soft); color: var(--soft-text); }
.nav-group.active > summary { background: var(--soft); color: var(--soft-text); font-weight: 600; }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 1px;
  min-width: 13rem; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(10, 10, 90, 0.14); }
.nav-menu-end { left: auto; right: 0; }
.top nav .nav-menu a, .top nav .nav-menu button.link, .nav-menu .theme-toggle.with-label { display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; justify-content: flex-start; text-align: left; white-space: nowrap; color: var(--text); }
.top nav .nav-menu a.active { color: var(--soft-text); }
.nav-menu form.inline { display: block; margin: 0; }
.nav-user > summary { padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; gap: 8px; }
.nav-user > summary .avatar { width: 30px; height: 30px; font-size: 0.72rem; }
.theme-toggle.with-label { width: auto; height: auto; margin: 0; border: 0; border-radius: var(--radius-sm); justify-content: flex-start;
  font: inherit; font-weight: 500; color: var(--text); }
.theme-toggle.with-label:hover { background: var(--soft); color: var(--soft-text); }
.top nav a, .top nav button.link { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; }
.top nav a:hover, .top nav button.link:hover { background: var(--soft); color: var(--soft-text); text-decoration: none; }
.top nav a.active { background: var(--soft); color: var(--soft-text); font-weight: 600; }
.top nav .sep { width: 1px; height: 22px; margin: 0 8px; background: var(--line); }
.top nav .user { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.top nav .nav-end, .top nav .nav-tools { display: flex; align-items: center; gap: 2px; }
/* Profilbild und Menü-Knopf gibt es nur in der Handy-Kopfzeile (unten) */
.top-me, .menu-toggle { display: none; }
/* Kollegen des Unternehmens neben dem Logo, Punkt unten rechts: grün = online, rot = offline */
.colleagues { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0 auto 0 4px;
  padding: 0; list-style: none; }
.colleague { position: relative; display: inline-flex; margin: 0; padding: 0; cursor: default; }
.colleague .avatar { width: 34px; height: 34px; font-size: 0.78rem; }
.colleague .presence { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--header); }
.colleague .presence.on { background: #22a65a; }
.colleague .presence.off { background: #d93a2f; }
.colleague.more { align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px;
  background: var(--soft); color: var(--soft-text); font-size: 0.75rem; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.company-switch select { width: auto; max-width: 16rem; padding: 5px 8px; font-weight: 500; }

/* Profilbilder: rund; ohne Bild Initialen in den Markenfarben */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--soft); color: var(--soft-text); font-weight: 600; line-height: 1;
  vertical-align: middle; user-select: none; }
.avatar-s { width: 26px; height: 26px; font-size: 0.7rem; }
.avatar-m { width: 34px; height: 34px; font-size: 0.8rem; }
.avatar-l { width: 96px; height: 96px; font-size: 2rem; }
img.avatar { border: 1px solid var(--line); background: var(--card); }
.person { display: inline-flex; align-items: center; gap: 10px; }
.picture-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.picture-card form { margin: 0; }
.picture-card .picture-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.picture-card .picture-actions > form:first-child { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.comment .meta .avatar { margin-right: 6px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  margin-left: 4px; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 50%; }
.theme-toggle:hover { background: var(--soft); color: var(--soft-text); }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  padding: 0 6px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-decoration: none; }
.lang-switch:hover { background: var(--soft); color: var(--soft-text); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun, .theme-toggle .i-moon, .theme-toggle .i-auto { display: none; }
.theme-toggle[data-mode="light"] .i-sun, .theme-toggle[data-mode="dark"] .i-moon, .theme-toggle[data-mode="auto"] .i-auto { display: block; }

/* Bausteine */
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 14px 0;
  box-shadow: var(--shadow); }
.narrow { max-width: 400px; margin: 40px auto; }
.login-logo { display: block; width: auto; max-width: 190px; max-height: 220px; height: auto; margin: 0 auto 8px; padding: 10px; background: #fff; border-radius: 14px; }
.login h1 { text-align: center; font-size: 1.25rem; margin-bottom: 1em; }
.login button { width: 100%; padding: 10px 14px; }
.login .login-qr { margin-top: 10px; }
.login .login-qr[hidden] { display: none; }
dialog.qr-scan video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0 0 12px; background: #000; border-radius: var(--radius-sm); }
dialog.qr-scan p.error { color: var(--err); }

label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 0.9rem; }
label.choice { display: inline-flex; gap: 8px; align-items: center; margin: 0; font-weight: 400; font-size: 1rem; }
label .hint { display: block; margin-top: 4px; font-weight: 400; }
input, select, textarea { width: 100%; margin-top: 5px; padding: 9px 11px; font: inherit; font-size: 1rem; font-weight: 400; color: var(--text);
  background: var(--input); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--focus); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); box-shadow: none; }
input[type=file] { padding: 7px; background: var(--raised); border-style: dashed; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 5px 12px; font: inherit; font-weight: 600; color: var(--soft-text);
  background: var(--soft); border: 0; border-radius: 6px; cursor: pointer; }
textarea { display: block; resize: vertical; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { height: 40px; }

button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; font: inherit;
  font-weight: 600; line-height: 1.2; cursor: pointer; color: var(--primary-text); background: var(--primary); border: 1px solid transparent;
  border-radius: var(--radius-sm); transition: background 0.15s, border-color 0.15s; }
button:hover, .button:hover { background: var(--primary-hover); text-decoration: none; }
button.secondary, .button.secondary { color: var(--text); background: var(--card); border-color: var(--line-strong); }
button.secondary:hover, .button.secondary:hover { background: var(--soft); border-color: var(--soft); color: var(--soft-text); }
button.link { padding: 0; color: var(--link); background: none; border: 0; font-weight: 500; }
button.link:hover { background: none; text-decoration: underline; }
button.danger, .button.danger { color: var(--err); background: var(--card); border-color: var(--err); }
button.danger:hover, .button.danger:hover { color: var(--card); background: var(--err); }
.danger-zone { margin-top: 16px; text-align: right; }
form.inline { display: inline; }
.choices { display: flex; flex-wrap: wrap; gap: 18px; }
.choices.preset-apps { gap: 6px 18px; }

.flash { padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left-width: 4px; background: var(--card); }
.flash.ok { border-color: var(--ok); background: var(--ok-bg); }
.flash.error { border-color: var(--err); background: var(--err-bg); color: var(--err); }

/* Liste und Tabellen */
.filters { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.filters.with-brand { grid-template-columns: 1.6fr repeat(6, 1fr); }
.filters input, .filters select { margin: 0; }
.bulk-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; }
.bulk-edit select { width: auto; max-width: 220px; margin: 0; }
.bulk-edit button { margin: 0; }
.bulk-edit .inline-field { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.bulk-edit input[type=date] { width: auto; margin: 0; }
.bulk-edit label.choice { margin: 0; white-space: nowrap; font-size: 0.85rem; }
.filters input[type=search], input.table-search { padding-left: 34px; background: var(--input) no-repeat 11px center / 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a91ad' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; background: var(--raised); }
td input, td select { margin: 0; }
/* Sortierbare Spaltenköpfe (theme.js): der Kopftext wird zum Knopf, der Pfeil zeigt die Richtung */
th button.sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; min-width: 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: inherit; color: inherit; background: none; border: 0; border-radius: 3px; cursor: pointer; }
th button.sort:hover { background: none; color: var(--text); }
th button.sort::after { content: "↕"; font-size: 0.9em; opacity: 0; transition: opacity 0.1s; }
th button.sort:hover::after, th button.sort:focus-visible::after { opacity: 0.5; }
th[aria-sort] { color: var(--text); }
th[aria-sort=ascending] button.sort::after { content: "↑"; opacity: 1; }
th[aria-sort=descending] button.sort::after { content: "↓"; opacity: 1; }
.sort-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.sort-bar[hidden] { display: none; }
[data-provider][hidden] { display: none; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin: 10px 0 16px; font-size: 0.9rem; }
.pager[hidden], tr.page-off, table.stacked tr.page-off { display: none !important; }
.pager label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-weight: 600; }
.pager select { width: auto; margin: 0; }
.pager-info { color: var(--muted); margin-right: auto; order: -1; }
.pager button { margin: 0; min-width: 0; }
.table-search { max-width: 26em; margin: 0 0 12px; }
.table-search[hidden] { display: none; }
.contact-choices .choice.page-off { display: none !important; }
.choice-search { margin-bottom: 8px; }
.choice-pager { margin: 0 0 8px; }
.suggest { position: relative; display: block; }
.suggest-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px 0; list-style: none;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  max-height: 18em; overflow-y: auto; font-weight: normal; }
.suggest-list[hidden] { display: none; }
#push-control [hidden] { display: none; }
.suggest-list li { padding: 7px 12px; cursor: pointer; }
.suggest-list li.active, .suggest-list li[role=option]:hover { background: var(--soft); color: var(--soft-text); }
@media (max-width: 600px) {
  .pager { justify-content: stretch; }
  .pager-info { flex-basis: 100%; }
  .pager button { flex: 1 1 0; }
}
.sort-bar select { width: auto; max-width: 100%; margin: 0; flex: 0 1 18em; }
/* Auswahlfelder in Tabellen so breit wie ihr längster Eintrag, Textfelder nicht zusammengedrückt */
td select { width: auto; max-width: 16em; text-overflow: ellipsis; }
td input:not([type=checkbox]):not([type=radio]) { min-width: 9em; }
td input[name=name]:not([type=checkbox]) { min-width: 11em; }
td input[type=email]:not([type=checkbox]), td input[name=emails]:not([type=checkbox]) { min-width: 13em; }
td input[type=checkbox] { vertical-align: middle; }
td.nowrap { white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.tickets tbody tr { transition: background 0.1s; }
.tickets tbody tr:hover { background: var(--raised); }
/* Spalten: Auswahl, Nummer, Titel, …; Nummer grau, Titel fett */
.tickets td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tickets td:nth-child(2) a { color: var(--muted); font-weight: 600; }
.tickets td:nth-child(3) > a:not(.draft-label) { color: var(--text); font-weight: 600; }
.tickets td:last-child { color: var(--muted); white-space: nowrap; font-size: 0.9rem; }

/* Status und Priorität */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  line-height: 1.4; white-space: nowrap; color: var(--grey); background: var(--grey-bg); border: 1px solid transparent; }
.badge[class*=" s-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-neu { color: var(--soft-text); background: var(--soft); }
.s-in_bearbeitung { color: var(--violet); background: var(--violet-bg); }
.s-wartet_auf_kunde { color: var(--warn); background: var(--warn-bg); }
.s-erledigt { color: var(--ok); background: var(--ok-bg); }
.s-geschlossen { color: var(--grey); background: var(--grey-bg); }
.p-niedrig { color: var(--grey); background: transparent; border-color: var(--line-strong); }
.p-normal { color: var(--text); background: transparent; border-color: var(--line-strong); }
.p-hoch { color: var(--warn); background: var(--warn-bg); }
.p-dringend { color: var(--err); background: var(--err-bg); }

/* Ticketdetail */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; align-items: end; }
.grid3 > div { margin-bottom: 14px; }
.grid3 > .wide { grid-column: 1 / -1; }
/* Zuständig mit Haken „Kollegen benachrichtigen“ darunter (Issue #450): die Reihe oben ausrichten, damit die Felder
   auf einer Höhe bleiben */
.grid3:has(> .assignee-field) { align-items: start; }
.grid3 > .assignee-field { margin-bottom: 0; }
.assignee-field label.choice { margin: -8px 0 14px; }
td.access .access-state { margin-top: 4px; font-size: 0.85rem; }
td.access .access-state .small { margin: 2px 0; }
td.access .access-state .badge { font-size: 0.72rem; padding: 1px 8px; }
.grid3.top { align-items: start; }
label input[type=color] { display: block; }
/* Eine Zeile aus Feld, Häkchen und Knopf */
.form-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.form-row label { margin: 0; }
.form-row label input:not([type=checkbox]) { display: inline-block; width: 6em; margin: 0 6px; }
.detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.detail aside .card:first-child { margin-top: 14px; }
.detail .grid3 { grid-template-columns: 1fr; }
.title-row h1 { margin-bottom: 0.2em; }
.card > .title-row:first-child { margin-bottom: 12px; }
.card > .title-row:first-child h2 { margin: 0; }
.title-row .actions { display: flex; gap: 10px; align-items: center; }
.title-row .actions select { width: auto; margin: 0; }
.title-row .badge { font-size: 0.85rem; padding: 5px 12px; }
.description, .comment .body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Formatierte Kommentare (app/formatting.py): Zeilenumbrüche kommen als <br>, Absätze und Listen als Blöcke */
.comment .body.formatted, .description.formatted { white-space: normal; }
/* Lange Ticketbeschreibung (Mails mit Signatur): begrenzte Höhe, scrollbar und unten rechts größer ziehbar wie das
   Kommentarfeld. theme.js hebt die Grenze beim Ziehen auf, damit die Box auch über 18em hinaus wachsen kann. */
.description.scroll-box { max-height: 18em; min-height: 4em; overflow-y: auto; resize: vertical; }
@media (max-width: 600px) { .description.scroll-box { max-height: 14em; } }
.formatted p, .formatted ul, .formatted ol { margin: 0 0 .6em; }
.formatted > :last-child { margin-bottom: 0; }
.formatted ul, .formatted ol { padding-left: 1.4em; }
.formatted ul { list-style: disc; }
.formatted ol { list-style: decimal; }
.format-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.format-bar button { min-width: 2.4em; padding: 4px 10px; font-size: .9rem; line-height: 1.4; }
.format-bar .hint { margin-left: auto; }
/* Feldname über Formatierungsleiste und Feld (Ticketbeschreibung) */
label.field-head { margin-bottom: 6px; }
textarea.field-body { margin: 0 0 14px; }
.history { list-style: none; padding: 0 0 0 18px; margin: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.history > li { position: relative; margin: 10px 0; }
.history > li::before { content: ""; position: absolute; left: -25px; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong); }
.history > li.comment::before { top: 16px; border-color: var(--muted); background: var(--card); }
.history > li.comment.external::before { border-color: var(--primary); background: var(--pale); }
.comment { background: var(--card); border: 1px solid var(--line); border-left-width: 4px; border-left-color: var(--line-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow); }
.comment.external { border-left-color: var(--primary); }
/* Kommentar vom Kunden (per Mail oder Kundenportal) */
.comment.from-customer { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok-bg) 45%, var(--card)); }
.history > li.comment.from-customer::before { border-color: var(--ok); background: var(--ok-bg); }
/* Verlauf: lange Einträge zunächst auf 5 Textzeilen begrenzt, die letzte leicht ausgeblendet. comment_clamp.js misst
   die Zeilen, setzt --clamp-height und die Klasse nur bei längeren Texten und hängt „Mehr anzeigen“ an. */
.comment > .body.clamp { max-height: var(--clamp-height, 7.5em); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), rgba(0, 0, 0, .35));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), rgba(0, 0, 0, .35)); }
.comment > .body.clamp.expanded { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.comment .clamp-toggle { margin-top: 4px; }
.comment.editing .clamp-toggle { display: none; }
.comment .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; display: flow-root; }
.comment .meta strong { color: var(--text); }
/* Interne Vermerke: Bearbeiten (Verfasser) und Löschen (Admins) rechts in der Kopfzeile, Bearbeiten ersetzt den Text */
.comment .note-actions { float: right; display: inline-flex; gap: 12px; align-items: baseline; }
.comment .note-actions .danger-link { color: var(--err); }
.comment .note-edit { display: none; }
.comment.editing .note-edit { display: grid; gap: 8px; }
.comment.editing > .body, .comment.editing .note-actions { display: none; }
.comment .note-edit .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.audit { font-size: 0.85rem; padding: 3px 0; }
.files, .mails { list-style: none; padding: 14px 20px; }
.files li, .mails li { margin: 6px 0; }
.files li > input[type=checkbox] { margin: 0 4px 0 0; vertical-align: -0.15em; }
.files li + li, .mails li + li { padding-top: 6px; border-top: 1px solid var(--line); }
/* Anhang an Paperless senden (Issue #429) */
.files .paperless-send { display: inline-block; margin-left: 6px; }
.files .paperless-send[open] { display: block; margin: 8px 0 4px; }
.files .paperless-send form { margin-top: 8px; max-width: 32em; }
.files .paperless-send .actions { margin-top: 10px; }
.files-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -6px 0 16px; }
.grid-time { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.time-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
#zeiten h2 { display: flex; justify-content: space-between; align-items: baseline; }
#zeiten h2 .muted { font-variant-numeric: tabular-nums; font-weight: 600; }
#zeiten table { margin-top: 16px; }
#zeiten table td { padding: 8px 4px; }
#zeiten form button + button { margin-left: 6px; }
aside label.choice { margin-bottom: 14px; }
.button.danger, button.danger { color: var(--err); background: var(--card); border-color: var(--err); }
.button.danger:hover, button.danger:hover { color: var(--card); background: var(--err); }

@media (max-width: 800px) {
  main { padding: 16px 16px 40px; }
  .top-inner { padding: 10px 16px; }
  .brand-sub { display: none; }
  .top nav .sep { display: none; }
  .filters, .filters.with-brand { grid-template-columns: 1fr 1fr; }
  .filters input[type=search] { grid-column: 1 / -1; }
  .detail, .grid2 { grid-template-columns: 1fr; }
  .card { padding: 16px; }
}
.theme-corner { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 4px; }
/* Tabellen mit class="stack": passt die Tabelle nicht ins Panel, setzt theme.js die Klasse "stacked" und
   jede Zeile erscheint als Karte, der Spaltenkopf als Beschriftung über dem Feld (data-label) */
table.stack th, table.stack td { padding-left: 10px; padding-right: 10px; }
table.stack th:first-child, table.stack td:first-child { padding-left: 14px; }
table.stack th:last-child, table.stack td:last-child { padding-right: 14px; }
table.stack.stacked thead { display: none; }
table.stack.stacked, table.stack.stacked tbody { display: block; }
table.stack.stacked tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: 12px 16px; align-items: end; padding: 14px; border-bottom: 1px solid var(--line); }
table.stack.stacked tbody tr:last-child { border-bottom: 0; }
table.stack.stacked td { display: block; min-width: 0; padding: 0; border: 0; }
table.stack.stacked td:empty { display: none; }
table.stack.stacked td:first-child, table.stack.stacked td.access, table.stack.stacked td.actions, table.stack.stacked td[colspan] { grid-column: 1 / -1; }
table.stack.stacked td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
table.stack.stacked td:first-child { font-weight: 600; }
table.stack.stacked td:first-child input { font-weight: 400; }
table.stack.stacked td input:not([type=checkbox]):not([type=radio]), table.stack.stacked td select { width: 100%; min-width: 0; max-width: none; }
table.stack.stacked td.actions { white-space: normal; }
table.stack.stacked .link-url { flex-wrap: wrap; }
table.stack.stacked .link-url input { min-width: 0; flex: 1 1 14em; }
/* Ticketliste auf dem Handy als Karten statt breiter Tabelle */
@media (max-width: 640px) {
  .tickets thead { display: none; }
  .tickets, .tickets tbody { display: block; }
  .tickets tr { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tickets tbody tr:last-child { border-bottom: 0; }
  .tickets td { display: block; padding: 0; border: 0; }
  .tickets td:empty { display: none; }
  .tickets td:nth-child(3) { order: -1; flex-basis: 100%; }
  .tickets td:first-child { display: flex; }
  .tickets td:nth-child(2) { font-size: 0.85rem; }
  .tickets td:last-child { flex-basis: 100%; font-size: 0.8rem; }
}
@media (max-width: 1100px) {
  .top nav a, .top nav button.link { padding: 5px 8px; }
  .colleagues { gap: 4px; }
  .colleague .avatar { width: 30px; height: 30px; font-size: 0.7rem; }
  .colleague .presence { width: 10px; height: 10px; }
}
/* Handy- und Tablet-Kopfzeile (bis 1100 px): eine Zeile mit Logo, Kollegen, eigenem Profilbild und Menü-Knopf; der Knopf klappt die
   Navigation darunter auf (theme.js setzt html.js und header.menu-open). Ohne JavaScript bleibt die Navigation offen. */
@media (max-width: 1100px) {
  .top-inner { flex-wrap: wrap; gap: 0 12px; padding: 8px 16px; }
  .brand img.brand-logo { height: 44px; padding: 2px 4px; }
  .brand img.brand-wide { height: 34px; max-width: 46vw; }
  .colleagues { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 2px; }
  .colleagues::-webkit-scrollbar { display: none; }
  .colleague { flex: none; }
  html.js .top-me { display: inline-flex; flex: none; border-radius: 50%; }
  html.js .top-me:hover { text-decoration: none; }
  html.js .menu-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px;
    padding: 0; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  html.js .menu-toggle:hover, html.js .menu-toggle[aria-expanded="true"] { background: var(--soft); color: var(--soft-text); }
  .menu-toggle svg { width: 22px; height: 22px; }
  .menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-open { display: none; }
  .menu-toggle[aria-expanded="true"] .i-close { display: block; }
  html.js .top nav { display: none; }
  html.js header.top.menu-open nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex-basis: 100%;
    margin-top: 8px; padding: 10px 0 4px; border-top: 1px solid var(--line); max-height: calc(100dvh - 72px); overflow-y: auto; }
  html.js .top nav a, html.js .top nav button.link { padding: 10px 12px; }
  html.js .top nav .nav-end { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px 4px; margin-top: 4px; padding-top: 10px;
    border-top: 1px solid var(--line); }
  html.js .top nav .company-switch { flex-basis: 100%; }
  html.js .company-switch select { width: 100%; max-width: none; padding: 9px 10px; }
  html.js .top nav .nav-end .user { flex: 1 1 auto; min-width: 0; }
  html.js .top nav .nav-tools { gap: 4px; }
  /* Untermenüs stehen am Handy offen untereinander (theme.js öffnet sie), die Überschrift ist nur Beschriftung */
  .top nav .nav-group:not(.nav-user) { grid-column: 1 / -1; }
  .top nav .nav-group > summary { padding: 8px 12px 2px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); background: none; pointer-events: none; }
  .top nav .nav-group > summary::after { display: none; }
  .top nav .nav-menu { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 0; padding: 0;
    border: 0; box-shadow: none; background: none; }
  .top nav .nav-menu a, .top nav .nav-menu button.link, .nav-menu .theme-toggle.with-label { padding: 10px 12px; }
  .top nav .nav-user { flex-basis: 100%; }
  .top nav .nav-user > summary { display: none; }
  .top nav .nav-new { flex: 1 1 auto; text-align: center; }
}

/* Öffentliches Kundenformular */
.public { max-width: 640px; margin: 32px auto; }
.public-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.public-head img { flex: none; object-fit: contain; border-radius: 50%; background: #fff; }
.public-head h1 { margin: 0; }
.public-head p { margin: 2px 0 0; }
.time-edit { max-width: 560px; }
fieldset.contacts, fieldset.plain { margin: 0 0 14px; padding: 0; border: 0; }
fieldset.contacts legend, fieldset.plain legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.contact-choices { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 8px; }
fieldset.contacts details { margin: 4px 0 8px; }
fieldset.contacts details[hidden] { display: none; }
fieldset.reporter-edit [hidden] { display: none; }
fieldset.contacts summary { cursor: pointer; color: var(--primary); }
fieldset.contacts details .grid2 { margin-top: 10px; }
fieldset.prio { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 14px; padding: 0; border: 0; }
fieldset.prio legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
fieldset.choices { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; padding: 0; border: 0; }
fieldset.choices legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ticket-number { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; }
.link-url { display: flex; gap: 8px; align-items: center; }
.link-url input { min-width: 22em; margin: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }

/* Marken */
.projects table { table-layout: fixed; }
.projects th:first-child { width: 40%; }

.brand-preview { display: inline-flex; gap: 6px; vertical-align: middle; }
.brand-preview span { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.brand-thumb.wide { width: auto; max-width: 180px; padding: 4px; }
.brand-thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
input[type=color] { width: 64px; height: 40px; padding: 3px; }
/* Mail-Fußzeile: Bilder mit Platzhalter, Breite und Einfügen-Knopf, darunter die Vorschau der Mail */
.footer-editor h3 { margin: 18px 0 8px; font-size: 1rem; }
.footer-images { list-style: none; margin: 0 0 14px; padding: 0; }
.footer-images li { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.footer-images li > img { flex: none; width: 120px; height: 60px; object-fit: contain; padding: 4px; background: #fff;
  border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
.footer-images li > div { min-width: 0; }
.footer-images code { overflow-wrap: anywhere; }
.footer-image-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 6px; }
.footer-image-actions label.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; }
.footer-image-actions input[type=number] { width: 90px; margin: 0; }
.footer-image-actions button { padding: 5px 12px; }
/* Vorschau der Kundenmail im Ticket: Knopf nur bei „an Kunde“, Vorschau verschwindet bei „intern“ */
.comment-form .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.comment-form:not(:has(input[name="visibility"][value="kunde"]:checked)) :is(.mail-preview-button, #mail-vorschau) { display: none; }
.mail-draft { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mail-draft h3 { margin: 0; }
.mail-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 12px; }
.mail-head dt { color: var(--muted); }
.mail-head dd { margin: 0; overflow-wrap: anywhere; }
.mail-preview { display: block; width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f3f4f7; }
.error-text { color: var(--err); }
@media (max-width: 600px) { .footer-images li { align-items: flex-start; } .footer-images li > img { width: 72px; height: 48px; } }
/* Aktionsknöpfe stehen nebeneinander und rutschen untereinander, wenn die Tabelle sonst breiter als das Panel würde */
td.actions > * { display: inline-block; margin: 3px 6px 3px 0; vertical-align: middle; }
td.actions > *:last-child { margin-right: 0; }
td.actions button, td.actions .button { white-space: nowrap; }
/* Knöpfe in der Aktionsspalte einer Liste alle gleich breit, ob neben- oder untereinander */
td.actions button:not(.link), td.actions .button, table.stack td:last-child > form > button:not(.link), table.stack td:last-child > .button { min-width: 9em; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); font-size: 0.8rem; font-weight: 600; }
.tag.warn { color: var(--warn); background: var(--warn-bg); }
.tag.ok { color: var(--ok); background: var(--ok-bg); }
.req { color: var(--err); font-weight: 700; }
.contact-email { margin: 0 0 14px; font-size: 0.9rem; }
.contact-email .label { display: block; font-weight: 600; }
.contact-email .value { display: flex; align-items: center; height: 40px; margin-top: 5px; color: var(--muted); }
.public [hidden] { display: none; }
.brand img.brand-wide { display: block; height: 46px; width: auto; max-width: 300px; object-fit: contain; padding: 2px 6px; background: #fff; border-radius: var(--radius-sm); }
.brand img.brand-logo { display: block; height: 64px; width: auto; object-fit: contain; padding: 3px 5px; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
.public-head img.public-logo { display: block; height: 96px; width: auto; object-fit: contain; padding: 4px 6px; background: #fff; border-radius: var(--radius-sm); }
.public-head img.public-wide { display: block; height: 52px; width: auto; max-width: 220px; object-fit: contain; padding: 4px 8px; background: #fff; border-radius: var(--radius-sm); }
/* Logo im dunklen Modus (Issue #363). Mit „Logo für Dark Mode“ stehen beide Bilder im HTML (_logo.html) und das
   Farbschema blendet eines aus; das dunkle Logo steht ohne helle Fläche direkt auf der Kopfzeile. Ohne eigenes
   dunkles Logo bleibt das Original auf Weiß, aber als abgerundete Fläche mit Luft und weichem Schatten statt als
   harter Kasten mit Rahmenlinie. */
img.only-dark { display: none !important; }
.brand img.logo-dark, .public-head img.logo-dark, img.login-logo.logo-dark { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.only-light { display: none !important; }
  :root:not([data-theme="light"]) img.only-dark { display: block !important; }
  :root:not([data-theme="light"]) .brand img:is(.brand-logo, .brand-wide):not(.logo-dark),
  :root:not([data-theme="light"]) .public-head img:is(.public-logo, .public-wide):not(.logo-dark) {
    padding: 4px 7px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] img.only-light { display: none !important; }
:root[data-theme="dark"] img.only-dark { display: block !important; }
:root[data-theme="dark"] .brand img:is(.brand-logo, .brand-wide):not(.logo-dark),
:root[data-theme="dark"] .public-head img:is(.public-logo, .public-wide):not(.logo-dark) {
  padding: 4px 7px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.brand-thumb.dark { background: #14172c; }

/* Zwei-Faktor-Anmeldung */
.qr { margin: 12px 0; }
.qr svg { display: block; background: #fff; border-radius: var(--radius-sm); }
.android-wipe { margin-top: 14px; }
.android-wipe summary { cursor: pointer; color: var(--err); }
.android-wipe form { margin-top: 8px; }
.copy-command { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; border-radius: var(--radius-sm); background: var(--soft); color: var(--soft-text); font-size: .9em; }
textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
.agent-commands li { margin: 6px 0; }
.android-qr { cursor: zoom-in; }
.android-qr svg { width: min(100%, 460px); height: auto; }
/* Apps verteilen */
.app-result-list li, .app-devices li { margin: 6px 0; }
.app-result { display: flex; align-items: center; gap: 10px; }
.app-result img, img.app-icon { border-radius: 22%; flex: none; }
img.app-icon { vertical-align: middle; }
/* Groß: Vollbild auf Weiß, damit Tablet-Kameras den dichten Code vom Monitor lesen */
.android-qr.big { position: fixed; inset: 0; z-index: 1000; margin: 0; display: flex; align-items: center;
  justify-content: center; background: #fff; cursor: zoom-out; }
.android-qr.big svg { width: min(96vw, 96vh); }
.recovery-codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.recovery-codes li { margin: 4px 0; }

/* Kundenportal */
.public.portal { max-width: 860px; }
.portal-nav { display: flex; gap: 16px; align-items: center; margin: -6px 0 16px; flex-wrap: wrap; }
.portal .history { margin-top: 8px; }
.portal-nav button.link { font-size: inherit; font-weight: inherit; }
.portal td:first-child, .portal td:last-child { white-space: nowrap; }

/* Auswertungen */
.report td.num, .report th { text-align: right; white-space: nowrap; }
.report td:first-child, .report th:first-child { text-align: left; white-space: normal; }
.report tr.sum td { border-top: 2px solid var(--line-strong); font-weight: 600; }
.report tr.mite td { border-top: none; padding-top: 0; color: var(--muted); }
.report td.diff { color: var(--warn); font-weight: 600; }
.report-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 14px; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented a { padding: 7px 14px; color: var(--text); background: var(--card); text-decoration: none; }
.segmented a + a { border-left: 1px solid var(--line-strong); }
.segmented a:hover { background: var(--soft); color: var(--soft-text); text-decoration: none; }
.segmented a.active { background: var(--primary); color: var(--primary-text); font-weight: 600; }
.period-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.period-nav .button { padding: 7px 12px; }
.period-nav select, .period-nav input[type=date] { width: auto; margin: 0; }
#update pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24em; overflow: auto; padding: 10px; border-radius: var(--radius-sm); background: var(--soft); color: var(--soft-text); }

/* Rückfrage bei ungespeicherten Änderungen (unsaved.js) */
dialog.dialog { width: min(440px, calc(100vw - 32px)); padding: 22px; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(10, 10, 90, 0.25); }
dialog.dialog::backdrop { background: rgba(10, 10, 40, 0.45); }
dialog.dialog h2 { margin: 0 0 0.5em; }
dialog.dialog p { margin: 0 0 18px; color: var(--muted); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 480px) { .dialog-actions { flex-direction: column-reverse; } .dialog-actions button { width: 100%; } }
/* Update-Hinweis (update_notice.js): Pop-up mit Markenfarbe oben und Logo, danach schmaler Banner unten */
dialog.update-notice { border-top: 4px solid var(--primary); }
dialog.update-notice p { color: var(--text); }
.update-notice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.update-notice-icon { position: relative; display: block; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--warn); }
.update-notice-icon::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--warn); font-weight: 800; }
.update-notice-icon.is-busy { background: none; box-shadow: none; border: 3px solid var(--line-strong); border-top-color: var(--primary);
  animation: update-spin 1s linear infinite; }
.update-notice-icon.is-busy::after { content: none; }
.update-notice-icon.is-done { background: var(--ok-bg); box-shadow: inset 0 0 0 2px var(--ok); }
.update-notice-icon.is-done::after { content: "\2713"; color: var(--ok); }
/* Logos sind für weißen Grund gemacht, auch im dunklen Farbschema */
.update-notice-mark { width: auto; max-width: 140px; height: 56px; padding: 4px; object-fit: contain; border-radius: var(--radius-sm); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); }
.update-notice .dialog-actions button { min-height: 44px; }
.update-notice .dialog-actions button[hidden] { display: none; }
.update-banner { position: fixed; inset: auto 0 0 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; font-weight: 600; text-align: center; color: var(--text); background: var(--warn-bg);
  border-top: 1px solid var(--warn); box-shadow: inset 0 3px 0 var(--primary); }
.update-banner[hidden] { display: none; }
.update-banner img { flex: none; width: auto; max-width: 60px; height: 28px; padding: 2px; object-fit: contain; border-radius: 5px; background: #fff; }
html.update-banner-visible body { padding-bottom: 64px; }
@keyframes update-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .update-notice-icon.is-busy { animation: none; } }
@media (max-width: 480px) { dialog.update-notice { padding: 16px; } .update-banner { font-size: 0.9rem; } }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
h1 .reporter { font-weight: 400; font-size: 0.7em; }

.preview-progress { width: 100%; height: 1rem; accent-color: var(--primary); }
.preview-customer { min-width: 14rem; }

/* Server (Hetzner Cloud): eine Karte je Zugang, darin eine schmale Zeile je Server; Farbe nach Zustand */
fieldset.pick { margin: 4px 0 10px; padding: 0; border: 0; }
fieldset.pick legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
.server-account { padding-top: 12px; padding-bottom: 12px; }
.server-account.htmx-request .server-account-body { opacity: 0.6; transition: opacity 0.2s; }
.server-account-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; }
.server-account-body { margin-top: 10px; }
.server-account.folded .server-account-body { display: none; }
.server-account-title { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.server-account-title h2 { margin: 0; font-size: 1.1rem; }
.server-fold { gap: 6px; padding: 2px 4px 2px 0; color: var(--text); background: none; border: 0; }
.server-fold:hover { background: none; color: var(--link); }
.server-fold .server-chevron { transform: rotate(90deg); }
.server-account.folded .server-fold .server-chevron { transform: none; }
.server-account-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-button { padding: 5px 7px; }
.badge.server-ok { color: var(--ok); background: var(--ok-bg); }
.badge.server-warn { color: var(--warn); background: var(--warn-bg); }
.badge.server-err { color: var(--err); background: var(--err-bg); }
.badge.server-grey { color: var(--grey); background: var(--grey-bg); }
.server-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.server-ok > summary .server-dot, .badge.server-ok .server-dot { animation: server-pulse 2.4s infinite; }
@keyframes server-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .server-ok > summary .server-dot, .badge.server-ok .server-dot { animation: none; } }
/* Eine Zeile je Server; Klick klappt Ausstattung, Tags und Knöpfe auf */
.server-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.server + .server { border-top: 1px solid var(--line); }
.server > summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 16px;
  gap: 4px 16px; align-items: center; padding: 7px 12px; cursor: pointer; list-style: none; }
.server > summary::-webkit-details-marker { display: none; }
.server > summary:hover, .server[open] > summary { background: var(--raised); }
.server-ok .server-dot { color: var(--ok); }
.server-warn .server-dot { color: var(--warn); }
.server-err .server-dot { color: var(--err); }
.server-grey .server-dot { color: var(--grey); }
.server-grey > summary { color: var(--muted); }
.server-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.server-name .badge { flex: none; font-size: 0.74rem; }
.server-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.server-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-title span { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-ip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.server-ip code, .server-facts code { font-size: 0.84rem; user-select: all; }
.server-metric { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; gap: 8px; align-items: center; min-width: 0; font-size: 0.8rem; }
.server-metric-label { color: var(--muted); font-size: 0.74rem; }
.server-metric strong { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.server-chevron { color: var(--muted); transition: transform 0.15s; }
.server[open] > summary .server-chevron { transform: rotate(90deg); }
.server-more { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; justify-content: space-between;
  padding: 8px 12px 12px 30px; background: var(--raised); }
.server-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font-size: 0.86rem; }
.server-facts > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.server-facts dt { color: var(--muted); font-size: 0.78rem; }
.server-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.meter-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width 0.4s; }
.spark { display: block; width: 100%; height: 18px; overflow: visible; color: var(--ok); }
.spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark polygon { fill: currentColor; opacity: 0.14; stroke: none; }
.meter-bar > span.warm, .spark.warm { background: var(--warn); color: var(--warn); }
.meter-bar > span.hot, .spark.hot { background: var(--err); color: var(--err); }
.spark.warm, .spark.hot { background: none; }
.server-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; width: 100%; }
.server-tags .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-tags .tag.ok { color: var(--ok); background: var(--ok-bg); }
.server-tags .label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; font-size: 0.74rem; }
.server-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.server-actions form { margin: 0; }
.server-actions button { padding: 5px 12px; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 760px) {
  .server > summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 16px; }
  .server-name { grid-column: 1 / 3; grid-row: 1; }
  .server > summary > .server-chevron { grid-column: 3; grid-row: 1; }
  .server-ip { grid-column: 1 / 3; grid-row: 2; padding-left: 18px; }
  .server > summary > :nth-child(3) { grid-column: 1; grid-row: 3; padding-left: 18px; }
  .server > summary > :nth-child(4) { grid-column: 2; grid-row: 3; }
  .server-more { padding-left: 12px; }
}

.server-secret { max-width: 720px; }
.server-secret-field { display: flex; gap: 8px; margin: 12px 0; }
.server-secret-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; }
.server-console { height: 72vh; min-height: 360px; background: #000; border-radius: var(--radius-sm); overflow: hidden; }

/* Stammdaten aus sevDesk: Bezeichnung links, Wert rechts, schmal untereinander */
dl.details { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 4px 16px; margin: 12px 0; }
dl.details dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 600px) { dl.details { grid-template-columns: 1fr; } dl.details dd { margin-bottom: 6px; } }

/* Modul Angebote */
td.num, input.num { text-align: right; white-space: nowrap; }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; }
ul.plain li { padding: 2px 0; }
.grid2.top { align-items: start; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
table.positions td { vertical-align: top; }
table.positions td.wide { min-width: 18em; }
table.positions input.strong { font-weight: 600; margin-bottom: 6px; }
table.positions td.actions button.link { padding: 2px 6px; font-size: 1.1rem; }
table.totals { margin: 16px 0 0 auto; min-width: 22em; }
table.totals td { padding: 6px 10px; }
table.totals tr.strong td { font-weight: 700; }
.badge.o-entwurf { opacity: 0.8; }
.badge.r-bezahlt { color: var(--ok); background: var(--ok-bg); }
.badge.r-offen { color: var(--grey); background: var(--grey-bg); }
.badge.r-ueberfaellig { color: var(--err); background: var(--err-bg); }
.badge.r-storniert { color: var(--grey); background: var(--grey-bg); }
.badge.r-storno, .badge.r-gutschrift { color: var(--grey); background: var(--grey-bg); }
.tab-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.tab-row a { padding: 9px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; }
.tab-row a:hover { color: var(--text); text-decoration: none; }
.tab-row a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
form.brand-pick { margin: 0 0 8px; }
form.brand-pick label { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
form.brand-pick select { width: auto; margin: 0; }
.status-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 16px; }
.status-form label { margin: 0; }
.status-form select { width: auto; }
button:disabled, button:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--primary); }
button.secondary:disabled, button.secondary:disabled:hover { background: var(--card); }
.flash.support-hint { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 16px; border-left-color: var(--primary); }

/* Impressum und Datenschutz unten im Kundenportal */
.legal-links{display:flex;justify-content:center;gap:24px;padding:8px 16px 32px;font-size:.9rem}
.legal-links a{color:var(--muted)}
.app-version{text-align:center;padding:0 16px 24px}
button.app-version-copy{display:inline;background:none;border:0;padding:0;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
button.app-version-copy:hover{background:none;color:inherit;text-decoration:underline}
.app-version-status{position:absolute;margin-left:8px;white-space:nowrap;color:var(--ok, var(--primary));font-weight:600}
.app-version-status:empty{visibility:hidden}
.legal .legal-title{margin:8px 0 12px}

/* Fernwartung: Seite für den Kunden und Karte im Ticket */
.remote-steps { padding-left: 1.4em; }
.remote-steps > li { margin-bottom: 18px; }
.remote-steps h2 { font-size: 1.05rem; margin: 0 0 6px; }
.remote-config textarea.config-line { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; word-break: break-all; }
.remote-password { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.remote-password summary { cursor: pointer; color: var(--muted, inherit); text-decoration: underline; list-style: none; }
.remote-password summary::-webkit-details-marker { display: none; }
.remote-password[open] summary { order: 2; }
.remote-password code { user-select: all; font-weight: 600; }
#fernwartung form + form { margin-top: 20px; }

/* Startseite: Karten im Raster, weitere kommen über app/home.py dazu */
.home-brand select { min-width: 220px; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.home-grid > .card { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.home-card.wide { grid-column: 1 / -1; }
/* Server und UniFi nebeneinander, schmal untereinander (#390) */
.home-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.home-status > .card { margin: 0; min-width: 0; }
.home-status .home-servers { grid-template-columns: 1fr; }
.home-card h2 { margin: 0 0 8px; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.home-card-head { margin-bottom: 8px; }
.home-card-head h2 { margin: 0; }
.home-number { font-size: 2.8rem; font-weight: 700; line-height: 1.05; color: var(--text); text-decoration: none;
  font-variant-numeric: tabular-nums; align-self: flex-start; }
.home-number:hover { color: var(--link); }
.home-card p.small { margin: 4px 0 0; }
.home-facts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.9rem; }
.home-facts a.badge { text-decoration: none; }
.home-facts a.badge:hover { filter: brightness(0.95); }
.home-hot { color: var(--err); font-weight: 600; }
.home-sub { font-size: 0.85rem; margin: 14px 0 6px; color: var(--muted); }
.home-servers { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px; }
.home-servers a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--raised); color: var(--text); text-decoration: none; min-width: 0; }
.home-servers a:hover { border-color: var(--line-strong); }
.home-servers strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-servers .muted { margin-left: auto; font-size: 0.82rem; white-space: nowrap; }
.home-servers .server-ok .server-dot { animation: server-pulse 2.4s infinite; }
@media (prefers-reduced-motion: reduce) { .home-servers .server-ok .server-dot { animation: none; } }

/* Seiten mit Kopfkarte und Reitern (Issue #261): Unternehmen, Kunde, Benutzer */
p.back { margin: 0 0 10px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line);
  border-top: 4px solid var(--head-color, var(--primary)); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-head h1 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.page-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-head-kicker { font-size: 0.8rem; color: var(--muted); }
.page-head-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.page-head-img { flex: none; width: 56px; height: 56px; object-fit: contain; padding: 4px; background: #fff; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line); }
.page-head-img.round { border-radius: 50%; padding: 0; object-fit: cover; }
.page-head-img.initials { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--soft);
  color: var(--soft-text); font-weight: 700; font-size: 1.1rem; }
.page-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--grey-bg); color: var(--grey); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.err { background: var(--err-bg); color: var(--err); }
.tabs-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 24px; align-items: start; }
.tabs-layout > input[type=hidden] { display: none; }
.tab-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; }
.tab-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500; }
.tab-nav a:hover { background: var(--soft); color: var(--soft-text); text-decoration: none; }
.tab-nav a[aria-current="true"] { background: var(--soft); color: var(--soft-text); font-weight: 600; }
.tab-flag { flex: none; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); }
.tab-flag.warn { background: var(--warn-bg); color: var(--warn); }
.tab-panels { min-width: 0; }
.tab-panel > .card:first-child { margin-top: 14px; }
/* Ohne JavaScript stehen alle Reiter untereinander, die Leiste springt dann zum Abschnitt */
html.js .tab-panel:not(.current) { display: none; }
.save-bar { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 10px; margin: 18px 0 0; padding: 12px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 -6px 18px rgba(10, 10, 90, 0.08); }
.save-bar > span { margin-right: auto; }
/* Lange Hilfetexte stehen hinter einem „?“ an der Überschrift (theme.js), ohne JavaScript sichtbar */
html.js [data-help] .card:not(.help-open):not(.fold .card) .help, html.js [data-help] details.fold:not(.help-open) .help { display: none; }
.help-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; padding: 0;
  vertical-align: 2px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 0.72rem; font-weight: 700; line-height: 1; cursor: pointer; }
.help-toggle:hover, .help-open .help-toggle { background: var(--soft); color: var(--soft-text); border-color: var(--soft); }
@media (max-width: 900px) {
  .tabs-layout { grid-template-columns: minmax(0, 1fr); }
  .tab-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: thin; margin: 0; }
  .tab-nav a { flex: none; white-space: nowrap; }
  .page-head { padding: 14px 16px; }
  .page-head-img { width: 46px; height: 46px; }
  .page-chips { justify-content: flex-start; margin: 0; flex-basis: 100%; }
}

/* Systemseite: Kacheln mit Ampel, darunter Abschnitte zum Aufklappen */
.status-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 12px; margin: 8px 0 20px; padding: 0; list-style: none; }
.status-tile { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); }
.status-tile > a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; color: var(--text); }
.status-tile:not(:has(> a)) { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.status-tile > a:hover { text-decoration: none; background: var(--raised); border-radius: 0 var(--radius) var(--radius) 0; }
.status-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--grey); }
.status-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-tile.ok { border-left-color: var(--ok); } .status-tile.ok .status-state { color: var(--ok); }
.status-tile.warn { border-left-color: var(--warn); } .status-tile.warn .status-state { color: var(--warn); }
.status-tile.err { border-left-color: var(--err); } .status-tile.err .status-state { color: var(--err); }
details.fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0; padding: 0 20px;
  box-shadow: var(--shadow); }
details.fold > summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 7px; height: 7px; margin: -4px 2px 0 10px; border: solid var(--muted);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.fold-state { margin-left: auto; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
details.fold > .card { border: 0; box-shadow: none; padding: 4px 0 16px; margin: 0; background: none; }
details.fold > .card > h2:first-child { display: none; }

/* Ticketseite: Eckdaten speichern sofort, Kunde und Details zum Lesen, Bearbeiten klappt auf */
.ticket-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.ticket-nav .button { padding: 7px 12px; white-space: nowrap; }
.ticket-nav .button[aria-disabled] { opacity: 0.45; pointer-events: none; }
.ticket-nav-steps { display: flex; align-items: center; gap: 8px 12px; margin-left: auto; }
.ticket-nav-steps[hidden] { display: none; }
.ticket-nav-count { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 600px) {
  .ticket-nav-list { flex-basis: 100%; }
  .ticket-nav-steps { flex-basis: 100%; flex-wrap: wrap; margin-left: 0; }
  .ticket-nav-steps .button { flex: 1 1 0; min-width: 0; }
  .ticket-nav-count { order: -1; flex-basis: 100%; text-align: center; }
}
.title-row { align-items: flex-start; }
.title-actions { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.basics-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.basics-grid > label { align-self: start; padding-top: 10px; margin: 0; font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.basics-grid select { margin: 0; }
.basics-grid label.choice { margin: -2px 0 2px; font-size: 0.85rem; color: var(--text); }
.basics-assignee, .basics-project { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.basics-assignee .link { font-size: 0.85rem; }
.basics-project select { width: 100%; }
.basics > p.muted { margin: 10px 0 0; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 0.92rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
details.edit-more > summary { list-style: none; display: inline-block; width: auto; }
details.edit-more > summary::-webkit-details-marker { display: none; }
details.edit-more[open] > summary { margin-bottom: 14px; }
details.time-manual { margin: 12px 0 4px; }
details.time-manual > summary { cursor: pointer; color: var(--link); font-weight: 500; font-size: 0.92rem; }
details.time-manual[open] > summary { margin-bottom: 10px; }
a.danger-link { color: var(--err); font-size: 0.9rem; }

/* Projekte (Reiter und Projektseite) */
.project-filter { margin: 0 0 12px; align-items: end; }
details.new-project > summary { cursor: pointer; }
details.new-project[open] > summary { margin-bottom: 12px; }
.project-note { white-space: pre-line; margin: 12px 0; }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.page-head + .project-actions { margin-top: 14px; }
.project-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; margin: 0 0 14px; }
.project-stats .stat { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.project-stats .stat strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.filter-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filter-links a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.86rem; color: var(--text); }
.filter-links a:hover { text-decoration: none; background: var(--soft); }
.filter-links a[aria-current="page"] { background: var(--soft); color: var(--soft-text); border-color: transparent; font-weight: 600; }
td.nowrap { white-space: nowrap; }

/* Benutzer: Zugriff als Tabelle je Unternehmen; die Speicherleiste nur auf den Reitern des Formulars */
html.js .tab-form:not(:has(.tab-panel.current)) > .save-bar { display: none; }
table.access-matrix { width: 100%; }
table.access-matrix th[scope=row] { background: transparent; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); }
table.access-matrix td, table.access-matrix th { vertical-align: middle; }
table.access-matrix select { margin: 0; width: auto; min-width: 10rem; }
table.access-matrix label.choice { margin: 0; justify-content: center; }
table.access-matrix thead th:not(:first-child):not(:nth-child(2)), table.access-matrix td:not(:nth-child(2)) { text-align: center; }
table.access-matrix tr.no-role th[scope=row] { color: var(--muted); font-weight: 500; }
table.access-matrix tr[data-main] { background: var(--soft); }
.superadmin-switch { margin-top: 16px; }
.table-wrap:has(> table.access-matrix) { margin-bottom: 4px; }
td.roles > div { white-space: nowrap; }
td.roles > .tag { margin-bottom: 4px; }

/* Feinschliff (Issue #261): „Bearbeiten“ in Tabellenzeilen zurückhaltend, damit die Zeilen nicht wie Knopfreihen
   wirken; Formulare in Karten nicht breiter als lesbar */
td.actions a.button:not(.danger):not(.secondary) { color: var(--text); background: var(--card); border-color: var(--line-strong); }
td.actions a.button:not(.danger):not(.secondary):hover { background: var(--soft); border-color: var(--soft); color: var(--soft-text); }
td.actions .button.danger, td.actions button.danger { border-color: transparent; }
td.actions .button.danger:hover, td.actions button.danger:hover { border-color: var(--err); }
.card textarea { max-width: 72rem; }
/* Angebote → Einstellungen: alle Felder gleich breit untereinander (Kai am 2026-10-16) */
.offer-settings .card textarea { max-width: none; }
.offer-settings label.days { max-width: 12rem; margin-left: 0; margin-right: 0; }
.offer-settings h3 { font-size: 0.95rem; margin: 0.4em 0 0.8em; }

/* Altangebote: Texte aus der PDF mit ihren Zeilenumbrüchen (#275) */
.pre { white-space: pre-line; overflow-wrap: anywhere; }

/* Verwaltung → Logs (Issue #293): Fehler rot, Warnungen gelb hinterlegt */
tr.log-error, tr.log-error > td { background: var(--err-bg); }
tr.log-warn, tr.log-warn > td { background: var(--warn-bg); }
.tag.err { color: var(--err); background: var(--err-bg); }
.log-filter { margin-bottom: 12px; }
.log-pre { max-height: 24rem; overflow: auto; white-space: pre-wrap; }
.log-link { margin-top: -4px; }

/* Ticket-Ablauf (Issue Startseite „Mein Tag“, neue Kundenantworten, Schnellfilter, Kommentar-Reiter, Kundensuche) */
.new-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--link); vertical-align: 1px; flex: none; }
.new-label { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  color: var(--soft-text); background: var(--soft); white-space: nowrap; }
.badge.new-reply { color: var(--soft-text); background: var(--soft); }
table.tickets tr.unread td:nth-child(3) a { font-weight: 700; }
.nobody { color: var(--warn); font-style: italic; }
.prio-quiet { font-size: 0.85rem; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.quick-filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--text); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.quick-filter:hover { border-color: var(--line-strong); text-decoration: none; }
.quick-filter b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.quick-filter .new-dot { margin: 0; background: var(--muted); }
.quick-filter.has-new .new-dot { background: var(--link); }
.quick-filter.active { background: var(--soft); border-color: var(--soft-text); color: var(--soft-text); font-weight: 600; }
.quick-filter.active b { color: inherit; }
/* Leiste „Ausgewählte ändern“: schwebt unten, solange etwas angehakt ist */
#bulk[data-floating] { position: sticky; bottom: 12px; z-index: 6; padding: 10px 14px; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
#bulk[hidden] { display: none; }
#bulk .bulk-note { flex-basis: 100%; }
#bulk[data-floating] select { max-width: 165px; }
/* Kommentarfeld: Reiter, gelblich für interne Vermerke, grün für Antworten an den Kunden */
.comment-modes { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--line); }
.comment-modes .comment-mode { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 -1px; padding: 8px 14px; cursor: pointer;
  border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted); font-weight: 500; }
.comment-modes .comment-mode input { margin: 0; }
.comment-modes .comment-mode:has(input:checked), .comment-modes .comment-mode.active { color: var(--text); font-weight: 600; }
.comment-modes .comment-mode:has(input[value=intern]:checked) { border-bottom-color: var(--warn); }
.comment-modes .comment-mode:has(input[value=kunde]:checked) { border-bottom-color: var(--ok); }
.comment-form:has(input[name=visibility][value=intern]:checked) { background: color-mix(in srgb, var(--warn-bg) 55%, var(--card)); }
.comment-form:has(input[name=visibility][value=kunde]:checked) { background: color-mix(in srgb, var(--ok-bg) 45%, var(--card)); }
.comment-form:has(input[name=visibility][value=kunde]:checked) [data-for=intern],
.comment-form:not(:has(input[name=visibility][value=kunde]:checked)) [data-for=kunde] { display: none; }
.comment-hint { margin: 0 0 8px; }
/* Auswahlfeld mit Suche */
.select-search { position: relative; display: block; }
.select-search input[type=search] { width: 100%; }
form.filters .select-search { display: inline-block; min-width: 12em; }
form.filters .select-search input[type=search] { margin: 0; }
/* Neues Ticket: selten gebrauchte Felder eingeklappt */
details.more-fields { margin: 4px 0 12px; }
details.more-fields summary { cursor: pointer; color: var(--link); margin-bottom: 8px; }
label.narrow-field input { max-width: 18em; }
/* Startseite: kurze Ticketlisten und Zeitkarte */
.home-tickets { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px; }
.home-tickets li { display: flex; flex-direction: column; gap: 2px; padding: 6px; margin: 0 -6px; border-radius: var(--radius-sm); min-width: 0; }
.home-tickets li:hover { background: var(--soft); }
.home-ticket-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 0.92rem; font-weight: 500; }
.home-ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; }
.home-ticket-meta .badge { font-size: 0.72rem; }
.home-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); font-size: 0.9rem; }
.home-timer form { margin: 0 0 0 auto; }
.home-timer button { margin: 0; padding: 4px 12px; }

/* Angebote auf Tablets (Issue Tablet-Ansicht Angebote) */
/* Filterzeile über Listen: Filter nebeneinander, Knöpfe rechts; bricht bei Platzmangel als Ganzes um */
.list-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 12px; }
.list-filters > label { flex: 1 1 11em; max-width: 18em; margin: 0; }
.list-filters > label select { margin: 0; }
.list-filters-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.list-filters-actions .button { margin: 0; white-space: nowrap; }
/* Angebotsliste als Karten: zwei, drei kurze Zeilen statt sieben beschrifteter Felder */
table.offer-list.stacked tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; }
table.offer-list.stacked td[data-label]:not(:first-child)::before { display: none; }
table.offer-list.stacked td:first-child { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
table.offer-list.stacked td:nth-child(2) { grid-column: 2; grid-row: 1; }
table.offer-list.stacked td:nth-child(8) { grid-column: 3; grid-row: 1; }
table.offer-list.stacked td:nth-child(7) { grid-column: 4; grid-row: 1; font-weight: 600; }
table.offer-list.stacked td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
table.offer-list.stacked td:nth-child(3)[data-subject]::after { content: " · " attr(data-subject); color: var(--muted); }
table.offer-list.stacked td:nth-child(4) { display: none; }
table.offer-list.stacked td:nth-child(5), table.offer-list.stacked td:nth-child(6),
table.offer-list.stacked td:nth-child(9) { grid-row: 3; font-size: 0.82rem; color: var(--muted); }
table.offer-list.stacked td:nth-child(5) { grid-column: 2; }
table.offer-list.stacked td:nth-child(6) { grid-column: 3 / -1; text-align: right; }
table.offer-list.stacked td:nth-child(6)::before { display: inline !important; content: attr(data-label) " " !important;
  margin: 0 !important; font-size: inherit !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
table.offer-list.stacked td:nth-child(9) { grid-row: 4; grid-column: 2 / -1; }
table.offer-list.stacked td[colspan] { grid-column: 1 / -1; grid-row: auto; }
/* Positionen eines Angebots: Passt die Tabelle nicht, bekommt jede Position ein festes Raster. Oben Nummer und
   Knöpfe, darunter Titel und Beschreibung über die ganze Breite, dann die Zahlen in einer Zeile, rechts der Betrag. */
table.positions.stacked tr { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 10px 12px; }
table.positions.stacked td:first-child { grid-column: 1 / 4; grid-row: 1; align-self: center; }
table.positions.stacked td.actions { grid-column: 4 / -1; grid-row: 1; justify-self: end; display: flex; gap: 6px; }
table.positions.stacked td.wide { grid-column: 1 / -1; min-width: 0; }
table.positions.stacked td.wide::before { display: none !important; }
table.positions.stacked td.wide input, table.positions.stacked td.wide textarea { width: 100%; max-width: none; }
table.positions.stacked td.wide textarea { margin: 0; }
table.positions.stacked td:nth-child(8) { text-align: center; }
table.positions.stacked td:nth-child(8) input { width: 22px; height: 22px; margin: 8px 0 0; }
table.positions.stacked td:nth-child(9) { grid-column: 1 / -1; text-align: right; font-weight: 600; font-size: 1rem; }
table.positions.stacked td:nth-child(9)::before { display: inline !important; margin-right: 8px !important; }
table.positions.stacked td.actions button.link { min-width: 40px; height: 40px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 1.1rem; }
table.positions td.actions button.link:disabled { background: none; border-color: transparent; opacity: 0.3; }
@container positions (max-width: 560px) {
  table.positions.stacked tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.positions.stacked td:first-child { grid-column: 1 / 2; }
  table.positions.stacked td.actions { grid-column: 2 / -1; }
}
#positionen { container: positions / inline-size; }
/* PDF-Vorschau (pdf.js, Issue #343): Seiten untereinander wie auf Papier */
.pdf-preview { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; background: var(--border, #ddd); border-radius: 8px; }
.pdf-preview canvas { max-width: 100%; height: auto !important; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }

/* Bilder aus der Zwischenablage als Anhang (paste_files.js) */
.paste-hint { display: block; margin-top: 4px; font-weight: normal; }
.pasted-files { list-style: none; padding: 0; margin: 4px 0 0; font-weight: normal; }
/* Auf Handy und Tablet ohne Tastatur hilft der Hinweis auf Strg+V nicht */
@media (hover: none) { .paste-hint { display: none; } }
.pasted-files li { margin: 2px 0; }
.pasted-files li.rejected { color: var(--err); font-weight: 600; }
.upload-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-weight: normal; }
.upload-progress progress { flex: 1 1 auto; max-width: 320px; height: 8px; accent-color: var(--link); }
.upload-progress.done span { color: var(--ok); font-weight: 600; }
.upload-progress.error span { color: var(--err); font-weight: 600; }

/* Chat (Issue #387): Kopfzeilen-Symbol mit Zähler, Seite mit Liste links und Verlauf rechts; bis 800 px nur eins davon */
.chat-badge { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-sm); color: var(--text); }
.chat-badge:hover { background: var(--soft); color: var(--soft-text); text-decoration: none; }
.chat-badge svg { width: 22px; height: 22px; }
.chat-badge .chat-count { position: absolute; top: 2px; right: 0; }
@media (min-width: 1101px) { .top-inner .chat-badge { order: 1; margin-right: 6px; } .top nav .nav-chat { display: none; } }
.chat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--err); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.colleague-chat { display: inline-flex; position: relative; border-radius: 50%; }
.colleague-chat:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--focus); }

.chat { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 16px; height: calc(100dvh - 150px); min-height: 420px; }
.chat .card { margin: 0; }
.chat-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; padding: 14px; }
.chat-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-side-head h1 { margin: 0; font-size: 1.25rem; }
.chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-group h2.chat-brand { margin: 8px 0 2px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.chat-group h3 { margin: 10px 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.chat-group ul { list-style: none; margin: 0; padding: 0; }
.chat-entry { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); }
.chat-entry:hover { background: var(--soft); text-decoration: none; }
.chat-entry.active { background: var(--soft); color: var(--soft-text); font-weight: 600; }
.chat-entry.unread .chat-entry-name { font-weight: 700; }
.chat-entry .avatar { width: 24px; height: 24px; font-size: 0.6rem; }
.chat-entry-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-hash { width: 24px; text-align: center; color: var(--muted); font-weight: 600; }
.chat-hash.big { font-size: 1.4rem; width: 34px; }
.chat-new-dm { border-top: 1px solid var(--line); padding-top: 10px; }
.chat-new-dm-row { display: flex; gap: 6px; }
.chat-new-dm-row select { flex: 1 1 auto; min-width: 0; }
.chat-main { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0; font-size: 1.05rem; }
.chat-head p { margin: 0; }
.chat-head-text { min-width: 0; }
.chat-back { display: none; font-size: 1.3rem; padding: 0 6px; }
.chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 12px 16px; display: flex;
  flex-direction: column; gap: 10px; }
.chat-messages > :first-child { margin-top: auto; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg .avatar { flex: none; width: 32px; height: 32px; font-size: 0.72rem; }
.chat-msg-main { min-width: 0; flex: 1 1 auto; }
.chat-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.chat-msg-body { overflow-wrap: anywhere; }
.chat-msg-body p { margin: 0.15em 0; }
.chat-msg-body ul, .chat-msg-body ol { margin: 0.2em 0; padding-left: 1.4em; }
.chat-msg .mention { padding: 0 3px; border-radius: 4px; background: var(--soft); color: var(--soft-text); font-weight: 600; }
.chat-msg-actions { order: 2; }
.chat-msg-actions[open] { flex-basis: 100%; }
.chat-msg-actions > summary { display: inline-block; }
.chat-msg-actions > summary { list-style: none; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 6px; border-radius: 4px; }
.chat-msg-actions > summary::-webkit-details-marker { display: none; }
.chat-msg-actions > summary:hover { background: var(--soft); }
.chat-msg-actions form { display: grid; gap: 6px; margin-top: 6px; max-width: 640px; }
.chat-msg-buttons { display: flex; gap: 6px; }
.chat-more, .chat-empty { align-self: center; }
.chat-pick { margin: auto; padding: 24px; text-align: center; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.chat-compose textarea { resize: none; min-height: 44px; max-height: 200px; }
.chat-compose button { align-self: end; }
.chat-compose .chat-hint, .chat-compose .chat-error { grid-column: 1 / -1; margin: 0; }
.chat-attach { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.chat-attach label { display: inline; margin: 0; font-weight: normal; }
.chat-attach input[type=file] { font-size: .85rem; width: auto; max-width: 100%; padding: 2px 6px; margin: 0; }
.chat-attach .paste-hint { display: none; }
.chat-attach .pasted-files { flex-basis: 100%; margin: 0; }
.chat-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chat-image img { display: block; max-width: min(320px, 100%); max-height: 240px; border-radius: 6px; border: 1px solid var(--line); }
.wallpaper-preview { display: block; max-width: min(12rem, 100%); max-height: 16rem; border-radius: 6px; border: 1px solid var(--line); }
.chat-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chat-channel-form { display: grid; gap: 14px; max-width: 760px; }
.chat-members { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.chat-member-list[hidden] { display: none; }
.chat-member-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.chat-member-list .avatar { width: 24px; height: 24px; font-size: 0.6rem; }
@media (max-width: 800px) {
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 110px); }
  main:has(.chat) { padding: 12px 10px 16px; }
  .chat.has-channel .chat-side, .chat:not(.has-channel) .chat-main { display: none; }
  .chat-back { display: inline-block; }
  .chat-hint { display: none; }
}
.pasted-files li.uploading progress { width: 120px; height: 8px; margin: 0 6px; vertical-align: middle; accent-color: var(--link); }
.pasted-files li.uploading .state { color: var(--muted); }
.pasted-files li.uploaded .state { color: var(--ok); }

/* UniFi (#390) */
.home-unifi > li { min-width: 0; }
.home-unifi > li.server-err > a { border-color: var(--err); background: var(--err-bg); }
.home-unifi > li.server-warn > a { border-color: var(--warn); }
.home-unifi-problems { list-style: none; margin: 4px 0 0 20px; padding: 0; display: grid; gap: 2px; font-size: 0.85rem; }
.home-unifi-problems li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.home-unifi-problems li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-unifi-problems .muted { margin-left: auto; white-space: nowrap; }
.home-account { margin: 8px 0 0; }
.unifi-console + .unifi-console { margin-top: 18px; }
.unifi-console-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.unifi-console-facts { margin-left: auto; }
.unifi-sites { margin: 4px 0 8px 18px; }
.unifi-devices tr.server-err td { background: var(--err-bg); }
.unifi-hidden { margin-top: 18px; }
.unifi-hidden > summary { cursor: pointer; }
.unifi-hidden > .unifi-console { margin-top: 12px; opacity: 0.85; }
/* Rolle „Lesend“ (app/static/read_only.js): Gesperrtes bleibt verborgen, auch wo eine Klasse display setzt */
[data-read-only] [hidden], [data-read-only] [data-write] { display: none !important; }
/* Weitere Postfächer (Unternehmen → Mails an …): Tabelle ohne eigenen Rahmen in der Karte, Felder füllen ihre Spalte */
.table-wrap.flat { background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0 0 18px; }
table.mailboxes td { vertical-align: top; }
table.mailboxes td select, table.mailboxes td input:not([type=checkbox]) { width: 100%; min-width: 9em; max-width: none; }
table.mailboxes td label.choice { margin-top: 10px; white-space: nowrap; }
table.mailboxes .mailbox-address { display: block; margin-top: 10px; font-weight: 600; overflow-wrap: break-word; }
table.mailboxes td:nth-child(3) { min-width: 14em; }
table.mailboxes .mailbox-address + .small { margin-top: 2px; }
/* Ein Haken mit eigener Hilfe steht in eigener Zeile, auch wenn die Hilfe zugeklappt ist */
label.choice:has(+ .help) { display: flex; width: fit-content; }
/* Geräteverwaltung (Menüführung 22.10.2026): Unterleiste, „+ Gerät hinzufügen“ als Menü, Filter für sich */
.sub-nav { display: flex; width: fit-content; max-width: 100%; margin: 0 0 18px; overflow-x: auto; scrollbar-width: thin; }
.sub-nav a { flex: none; white-space: nowrap; }
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.dropdown[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 1px;
  width: max-content; max-width: min(22rem, calc(100vw - 32px)); padding: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(10, 10, 90, 0.14); }
.dropdown-menu a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: var(--soft); color: var(--soft-text); text-decoration: none; }
.dropdown-menu a span { font-size: 0.82rem; color: var(--muted); }
.device-filter > .device-apply { display: flex; align-items: end; }
.device-filter > .device-apply > button { margin: 0; }
.filter-fold { margin: 0 0 14px; }
.filter-fold > summary { display: none; }
@media (max-width: 600px) {
  .filter-fold > summary { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 14px; cursor: pointer;
    font-weight: 600; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); }
  .filter-fold > summary::-webkit-details-marker { display: none; }
  .filter-fold > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid currentColor;
    border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .filter-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
  .filter-fold .tag { margin: 0; }
  /* Geräte am Handy: zwei Spalten, leere Felder weg, Auswahlhaken oben rechts */
  table.device-list.stacked tr { position: relative; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  table.device-list.stacked td.empty { display: none; }
  table.device-list.stacked td.pick { position: absolute; top: 12px; right: 14px; }
  table.device-list.stacked td.pick + td { grid-column: 1 / -1; padding-right: 28px; }
  table.device-list.stacked td.pick + td::before { display: none; }
}
/* Geräteliste nach Gerätegruppen: je Gruppe ein aufklappbarer Abschnitt */
.device-group { margin: 0 0 14px; }
.device-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer; }
.device-group > summary .tag { margin: 0; }
.device-group > summary::-webkit-details-marker { display: none; }
.device-group > summary::before { content: ""; width: 6px; height: 6px; margin: 0 4px 0 2px; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
.device-group[open] > summary::before { transform: rotate(45deg); }
.device-group > .table-wrap { margin-top: 4px; }
/* Dateien des Tickets an die Antwort an den Kunden hängen (Issue #487) */
fieldset.mail-files { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
fieldset.mail-files[hidden] { display: none; }
fieldset.mail-files legend { padding: 0 4px; font-weight: 600; font-size: 0.9rem; }
/* Entwürfe von Kommentaren (Issue #560) */
fieldset.draft-files { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
fieldset.draft-files legend { padding: 0 4px; font-weight: 600; font-size: 0.9rem; }
.draft-note { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--soft-text); background: var(--soft); }
.draft-label { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px dashed var(--line-strong); color: var(--text); white-space: nowrap; text-decoration: none; }
.dialog-actions button[hidden] { display: none; }
fieldset.mail-files label.choice { align-items: baseline; overflow-wrap: anywhere; }
.comment .mailed-files { margin-top: 4px; }

/* Live-Konsole eines Linux-Geräts (Issue #515) */
.device-console { height: 72vh; min-height: 360px; background: #000; border-radius: var(--radius-sm); padding: 6px; }
.device-console .xterm { height: 100%; }
.console-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; }
.code-2fa { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.code-2fa input { margin: 0; }
.code-2fa input { width: 9em; }
/* Geräteseite (Menüführung 22.10.2026): Sprungleiste unter dem Kopf, Übersicht zweispaltig, Bereich „Vorsicht“ */
.jump-nav { position: sticky; top: 57px; z-index: 6; display: flex; gap: 2px; margin: 0 0 16px; padding: 6px; overflow-x: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scrollbar-width: thin; }
.jump-nav a { flex: none; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; white-space: nowrap; }
.jump-nav a:hover { background: var(--soft); color: var(--soft-text); text-decoration: none; }
.jump-nav a.danger-link { margin-left: auto; color: var(--err); }
.device-overview { margin-bottom: 16px; }
.device-overview > .card { margin: 0; }
.device-overview[id], .jump-nav ~ section.card[id] { scroll-margin-top: 120px; }
.security-list { display: flex; flex-wrap: wrap; gap: 6px; }
.security-list li { margin: 0; }
.device-danger { border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.device-danger > h2 { color: var(--err); }
.device-danger h3 { margin-top: 0; }
/* Ein Feld mit Knopf daneben (Programm installieren, Fernseher): Flex statt Raster, sonst macht der lange Hinweis
   darunter die Knopfspalte breit und quetscht am Handy das Feld */
.agent-program { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-bottom: 14px; }
.agent-program label { flex: 1 1 14em; max-width: 24em; margin: 0; }
.agent-program button { flex: none; margin: 0; }
.agent-program label input { margin-bottom: 0; }
.agent-program > p { flex: 0 0 100%; max-width: none; margin: 0; }
/* Fernwartung ohne Bestätigung: eigener Block am Ende der Karte „Befehle“, unter dem Befehlsverlauf */
.unattended { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.unattended > h3 { margin-top: 0; }
/* Android TV: Fernbedienung als 3er-Raster, Bildschirmfoto in Kartenbreite (Issue #550) */
.tv-remote { display: grid; grid-template-columns: repeat(3, minmax(0, 8em)); gap: 6px; margin-bottom: 1rem; }
.tv-remote button { margin: 0; padding-left: 4px; padding-right: 4px; min-width: 0; font-size: 0.9rem; white-space: nowrap; }
.tv-screenshot { max-width: 100%; height: auto; border: 1px solid var(--border, #ccc); border-radius: 6px; }
.device-group-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.device-group-pick label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.device-group-pick select { width: auto; min-width: min(16em, 100%); max-width: 100%; margin: 0; }
@media (max-width: 1100px) { .jump-nav { top: 53px; } }
/* Richtlinien und Gruppen (Menüführung 22.10.2026): Gruppen als Reiter, „Neue Gruppe“ aufklappbar, Speichern unten fest */
.group-tabs { display: flex; width: fit-content; max-width: 100%; margin: 4px 0 12px; overflow-x: auto; }
.group-tabs a { flex: none; white-space: nowrap; }
.group-tabs .count { margin-left: 4px; font-size: 0.78rem; opacity: 0.7; }
.new-group:not([open]) { display: none; }
.new-group > summary { cursor: pointer; font-weight: 600; }
.new-group .kinds { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.scope-card form.inline, .new-group form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.scope-card form.inline label:not(.choice), .new-group form.inline label:not(.choice) { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.scope-card form.inline input:not([type=checkbox]), .new-group form.inline input:not([type=checkbox]) { width: 18em; max-width: 100%; margin: 0; }
.scope-card form.inline button, .new-group form.inline button { margin: 0; }
/* Gekürzte Listen (data-limit, theme.js) */
[data-limit] > [hidden] { display: none; }
.show-all { margin: 8px 0 4px; }

/* Geräte: Meldungen in der Spalte „Zustand“ untereinander, quittierte Meldungen auf der Geräteseite (Issue #557) */
.state-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.device-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.device-findings li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.device-findings li.acked .tag { opacity: .75; }

/* Neu installieren: Felder je nach Profil (Issue #601) */
.reinstall-profile { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.reinstall-profile legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
#neuinstallation input:not([type=radio]) { display: block; max-width: 32em; }
form:has(input[name="profil"][value="kiosk"]:checked) .only-workplace,
form:has(input[name="profil"][value="arbeitsplatz"]:checked) .only-kiosk { display: none; }
/* Kioskmodus am Gerät: nur das Feld zur gewählten Art, Abstände zwischen Auswahl, Feldern und Knopf */
.kiosk-form .grid3:has(> label.choice) { gap: 8px 14px; margin-bottom: 16px; }
.kiosk-form h3 { margin-top: 4px; }
.kiosk-form label input { display: block; max-width: 40em; }
.kiosk-form:not(:has(input[name="kiosk_mode"][value="app"]:checked)) .only-kiosk-app,
.kiosk-form:not(:has(input[name="kiosk_mode"][value="web"]:checked)) .only-kiosk-web { display: none; }
/* Häkchen direkt über einem Feld oder Knopf (z. B. Richtlinie: Server-Prüfung, Hintergrundbild): Abstand dazwischen */
.card form:not([class]) > label.choice + label:not(.choice),
.card form:not([class]) > label.choice + button,
.card form:not([class]) > label.choice + .help + button { margin-top: 12px; }

/* Einrichtungsassistent (Issue #600) */
.setup-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 4px 0 16px; counter-reset: step; font-size: 0.9rem; color: var(--muted); }
.setup-steps li { counter-increment: step; }
.setup-steps li::before { content: counter(step) ". "; }
.setup-steps li.done { color: var(--ok); }
.setup-steps li.done::before { content: "✓ "; }
.setup-steps li.current { color: var(--text); font-weight: 600; }
.setup-modules fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 14px 10px; margin: 0 0 14px; }
.setup-modules legend { padding: 0 4px; font-weight: 600; }
.setup-modules label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 6px 0; }