/* Inferi Lizenzserver – Verwaltung. Ruhig, dicht, gut lesbar; keine Effekte. */
:root {
  --bg: #f5f6f8; --surface: #fff; --surface2: #f9fafb; --ink: #1a2130; --muted: #5d6676; --line: #dfe3e9; --line2: #c9cfd8;
  --accent: #1f5fbf; --accent-hover: #1a52a5; --accent-bg: #e9f0fa;
  --ok: #1d7445; --okbg: #e8f4ec; --okline: #b4dbc3;
  --warn: #8f5a00; --warnbg: #fdf3e1; --warnline: #ecd09b;
  --danger: #b3261e; --dangerbg: #fbeceb; --dangerline: #efbcb8;
  --info: #24507f; --infobg: #eaf1f8; --infoline: #bcd0e6;
  --field: #fff; --hover: #f0f2f5; --group: #f1f3f6; --on-accent: #fff; --focus: rgba(31, 95, 191, .22);
  color-scheme: light;
}
/* Dunkelmodus: automatisch nach Systemeinstellung, per Umschalter fest hell oder dunkel */
:root[data-theme="dark"] {
  --bg: #12161c; --surface: #1a1f27; --surface2: #20262f; --ink: #e4e8ee; --muted: #9ba4b3; --line: #2d3440; --line2: #3c4552;
  --accent: #7aa7f0; --accent-hover: #98bcf5; --accent-bg: #1f2e47;
  --ok: #72cf98; --okbg: #15291e; --okline: #2d5c40;
  --warn: #e6b866; --warnbg: #2e2515; --warnline: #5e4a22;
  --danger: #f39189; --dangerbg: #351a1a; --dangerline: #6e302d;
  --info: #93b9e6; --infobg: #172536; --infoline: #2f4b6d;
  --field: #141920; --hover: #252c36; --group: #222933; --on-accent: #0d1420; --focus: rgba(122, 167, 240, .3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161c; --surface: #1a1f27; --surface2: #20262f; --ink: #e4e8ee; --muted: #9ba4b3; --line: #2d3440; --line2: #3c4552;
    --accent: #7aa7f0; --accent-hover: #98bcf5; --accent-bg: #1f2e47;
    --ok: #72cf98; --okbg: #15291e; --okline: #2d5c40;
    --warn: #e6b866; --warnbg: #2e2515; --warnline: #5e4a22;
    --danger: #f39189; --dangerbg: #351a1a; --dangerline: #6e302d;
    --info: #93b9e6; --infobg: #172536; --infoline: #2f4b6d;
    --field: #141920; --hover: #252c36; --group: #222933; --on-accent: #0d1420; --focus: rgba(122, 167, 240, .3);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Kopfzeile */
.top { display: flex; align-items: center; gap: 18px; padding: 0 20px; min-height: 52px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.mainnav { display: flex; gap: 2px; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mainnav a { padding: 6px 10px; border-radius: 4px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.mainnav a:hover { background: var(--hover); text-decoration: none; }
.mainnav a[aria-current] { background: var(--accent-bg); color: var(--accent); }
.topsearch input { width: 200px; height: 32px; margin: 0; }
@media (min-width: 1400px) { .topsearch input { width: 260px; } }
.usermenu { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.usermenu a { color: var(--ink); font-weight: 500; }

main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 48px; }
main.narrow-main { max-width: 640px; }
h1 { font-size: 20px; line-height: 1.3; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 18px 0 10px; }
h3 { font-size: 13.5px; margin: 16px 0 8px; color: var(--muted); font-weight: 600; }
.head { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.head h1 { margin: 0; }
.head .actions { margin: 0 0 0 auto; }
.lead { color: var(--muted); margin: 0 0 16px; max-width: 80ch; }
.muted { color: var(--muted); }
.small, small { font-size: 12.5px; }
small { display: block; color: var(--muted); margin-top: 2px; font-weight: 400; }
.mono, code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.break { word-break: break-all; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.spaced li { margin-bottom: 6px; }

/* Flächen */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px; margin-bottom: 16px; }
.panel.flush { padding: 0; overflow-x: auto; }
.panel > h2:first-child, .panel > input[type=hidden]:first-child + h2, .panel > input[type=hidden] + input[type=hidden] + h2 { margin-top: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; flex: 1; }
.panel-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface2); }
.panel.login { max-width: 400px; margin: 8vh auto 0; }
.errorbox { max-width: 560px; margin: 8vh auto 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 16px; align-items: start; }
.table-wrap { overflow-x: auto; }

/* Formulare */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.span2 { grid-column: 1 / -1; }
label { display: block; font-weight: 500; margin-bottom: 14px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-bottom: 8px; }
label.check input { flex: none; margin: 0; }
.inline-label { font-weight: 400; margin: 0; display: inline; }
input[type=text], input[type=password], input[type=search], input[type=number], input[type=date], input[type=email], select, textarea {
  display: block; width: 100%; margin-top: 5px; height: 34px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 4px;
  font: inherit; background: var(--field); color: var(--ink); }
textarea { height: auto; padding: 8px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface2); color: var(--muted); }
input.short { width: 110px; display: inline-block; margin-top: 0; }
input.inline-input { display: inline-block; width: auto; margin: 0 0 0 6px; height: 30px; }
td select, td input[type=text], td input[type=number] { margin-top: 0; }
td select { width: auto; min-width: 140px; display: inline-block; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
fieldset.choice legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
fieldset.notice { border: 1px solid var(--warnline); background: var(--warnbg); border-radius: 4px; padding: 12px 14px; }
fieldset.notice legend { float: left; width: 100%; margin-bottom: 4px; }
.featuregrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; margin-bottom: 8px; }
.featuregrid legend { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.featuregrid label.check { align-items: flex-start; }
.featuregrid small { display: block; }
.formactions { display: flex; gap: 14px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row label { margin-bottom: 0; }
.row .grow { flex: 1; min-width: 180px; }
.row label input.short { display: block; margin-top: 5px; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filters input, .filters select { width: auto; margin: 0; min-width: 160px; }
.filters input[type=search] { min-width: 260px; flex: 1; max-width: 420px; }
.search { display: flex; gap: 8px; margin-bottom: 12px; max-width: 620px; }
.search input { margin: 0; }

/* Knöpfe */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 4px;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
button:hover, .button:hover { background: var(--hover); text-decoration: none; }
.primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.primary:hover, button.primary:hover { background: var(--accent-hover); }
.danger, button.danger, .button.danger { color: var(--danger); border-color: var(--dangerline); }
button.small, .button.small { height: 28px; font-size: 13px; padding: 0 10px; }
button.link { border: 0; background: none; color: var(--muted); height: auto; padding: 2px 6px; }
button.link:hover { color: var(--ink); background: none; text-decoration: underline; }
form.inline { display: inline; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.actions-cell { white-space: nowrap; text-align: right; }
.actions-cell > * { margin-left: 8px; }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; overflow-x: auto; }
.tabs a { padding: 8px 12px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 12.5px; font-weight: 500; color: var(--muted); background: var(--surface2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td small { line-height: 1.35; }
tr.dim td { color: var(--muted); }
tr.group th { background: var(--group); color: var(--ink); font-weight: 600; text-align: left; }
table.compact td { padding: 6px 14px; }
.panel:not(.flush) table th:first-child, .panel:not(.flush) table td:first-child { padding-left: 0; }
.panel:not(.flush) table th, .panel:not(.flush) table td { padding-right: 10px; }
.panel:not(.flush) table th { background: none; }
table.ent td strong { font-weight: 600; }
.audit .diff { max-width: 320px; word-break: break-word; }
.audit .k { color: var(--muted); font-family: ui-monospace, Consolas, monospace; }

/* Status */
.tag { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--surface2); white-space: nowrap; vertical-align: 1px; }
.tag.ok { color: var(--ok); background: var(--okbg); border-color: var(--okline); }
.tag.warn { color: var(--warn); background: var(--warnbg); border-color: var(--warnline); }
.tag.danger { color: var(--danger); background: var(--dangerbg); border-color: var(--dangerline); }
.alert { padding: 10px 14px; border-radius: 4px; border: 1px solid; margin-bottom: 14px; }
.alert.ok { background: var(--okbg); border-color: var(--okline); }
.alert.warn { background: var(--warnbg); border-color: var(--warnline); }
.alert.danger { background: var(--dangerbg); border-color: var(--dangerline); }
.alert.info { background: var(--infobg); border-color: var(--infoline); }
.empty { padding: 22px; color: var(--muted); text-align: center; }

dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 7px 18px; margin: 0; }
.cols dl { grid-template-columns: minmax(110px, 42%) minmax(0, 1fr); }
dt { color: var(--muted); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dd .tag, td .tag { white-space: normal; }
h1.mono { font-size: 18px; letter-spacing: .02em; }

/* Übersicht */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 16px; }
.stats > * { padding: 12px 16px; border-right: 1px solid var(--line); color: var(--ink); }
.stats > *:last-child { border-right: 0; }
.stats a:hover { background: var(--surface2); text-decoration: none; }
.stats strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: 12.5px; }

/* Notizen */
.note { border-top: 1px solid var(--line); padding: 10px 0; }
.note:first-of-type { border-top: 0; padding-top: 0; }
.note header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.note header form { margin-left: auto; }
.note p { margin: 6px 0 0; white-space: normal; }
.noteform { margin-top: 12px; }
.noteform textarea { margin: 0 0 8px; }
.noteform .row select { width: auto; margin: 0; }

.featurelist { list-style: none; padding: 0; margin: 0; columns: 2 220px; }
.featurelist li { padding: 2px 0; }
.featurelist .off { color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 0 0 16px; }
.checks .ok { color: var(--ok); }
.checks .bad { color: var(--danger); font-weight: 600; }
pre.codes.break { white-space: pre-wrap; }
pre.codes { background: var(--surface2); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; overflow-x: auto; white-space: pre; margin: 0 0 12px; }
.qr { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 4px; margin: 6px 0 10px; background: #fff; }
.qr svg { width: 100%; height: 100%; display: block; }
.secret { font-size: 15px; letter-spacing: .06em; }
.steps { padding-left: 20px; margin: 0 0 8px; }
details.panel > summary { cursor: pointer; font-weight: 600; }
details.panel[open] > summary { margin-bottom: 12px; }
.danger-zone > summary { color: var(--danger); }
.pager { display: flex; gap: 16px; }
.handover label { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 400; }
.handover select { width: auto; margin: 0; }
.handover p { flex-basis: 100%; margin: 0; }

body.plain .top { justify-content: space-between; }

/* Mittlere Breiten: Hauptmenü in eigener Zeile, damit kein Menüpunkt abgeschnitten wird */
@media (min-width: 761px) and (max-width: 1480px) {
  .top { padding-top: 6px; padding-bottom: 4px; gap: 4px 18px; }
  .usermenu { margin-left: auto; }
  .mainnav { order: 3; flex-basis: 100%; margin: 0 -10px; }
}

@media (max-width: 760px) {
  .top { padding: 8px 12px; gap: 8px 12px; }
  .mainnav { order: 3; flex-basis: 100%; }
  .topsearch { order: 4; flex-basis: 100%; }
  .topsearch input { width: 100%; }
  .usermenu { margin-left: auto; }
  main { padding: 16px 12px 40px; }
  dl { grid-template-columns: 1fr; gap: 2px 0; }
  dd { margin-bottom: 8px; }
  .cols { grid-template-columns: 1fr; }
  .head .actions { margin-left: 0; }
  th, td { padding: 8px 10px; }
  .filters input[type=search] { min-width: 0; flex-basis: 100%; max-width: none; }
  .filters select { flex: 1; min-width: 0; }
  .stats > * { border-right: 0; border-bottom: 1px solid var(--line); }
}
.minfrom input { display: inline-block; width: 6.5em; height: 30px; margin: 0 6px 0 0; }
/* E-Mail */
.subtabs { display: flex; gap: 4px; margin: -6px 0 14px; flex-wrap: wrap; }
.subtabs a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 13px; }
.subtabs a[aria-current] { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.subtabs a:hover { text-decoration: none; color: var(--ink); }
.pad { padding: 12px 16px; margin: 0; }
td.right { text-align: right; }
.inline-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.inline-row label { flex: 1 1 220px; margin-bottom: 0; }
iframe.mailpreview { display: block; width: 100%; height: 440px; border: 0; border-top: 1px solid var(--line); background: #f4f5f7; }
iframe.mailpreview.text { height: 240px; background: #fff; }

/* Installationen: Sammelaktionen */
.bulk-actions { padding: 12px 16px; border-top: 1px solid var(--line); }
.bulk-note { padding: 0 16px 12px; margin: 0; }
.filters label.check { margin: 0; white-space: nowrap; align-self: center; }
.filters label.check input { width: auto; min-width: 0; }
@media (max-width: 640px) { .filters select { flex-basis: 100%; } }
/* Supportzugänge und -fälle */
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg { border-left: 3px solid var(--line2); padding: 4px 0 4px 12px; margin-bottom: 12px; }
.msg.internal { border-left-color: var(--warnline); background: var(--warnbg); }
.msg p { margin: 4px 0 0; }
details.panel > summary { cursor: pointer; }
/* Supportzugänge: kompakte Tabelle ohne seitliches Scrollen, auf schmalen Bildschirmen als Karten */
.support-grid td { overflow-wrap: anywhere; }
.support-grid .times { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.support-grid .times li { white-space: nowrap; }
.support-grid .times span { display: inline-block; min-width: 92px; color: var(--muted); }
.support-grid td.act { white-space: nowrap; text-align: right; width: 1%; }
.support-grid td.act form.inline { display: inline-block; margin: 0 0 6px; }
.support-grid td.act a { display: block; }
@media (max-width: 900px) {
  .support-grid thead { display: none; }
  .support-grid tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .support-grid td { display: block; border: 0; padding: 4px 14px; }
  .support-grid td.act { text-align: left; width: auto; }
  .support-grid td.act a { display: inline; margin-left: 10px; }
  .support-grid .times li { white-space: normal; }
}

/* Umschalter Hell/Dunkel */
.theme-toggle { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
.login-theme { position: fixed; top: 12px; right: 12px; }

/* Releases und Changelogs (1.6.2) */
.tag.info { color: var(--info); background: var(--infobg); border-color: var(--infoline); }
.release { padding: 16px 18px; }
.release.is-archived { border-style: dashed; }
.release-head { display: flex; gap: 10px 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.release-title { display: flex; gap: 6px 10px; align-items: baseline; flex-wrap: wrap; }
.release-title h2, .release-title h3 { margin: 0; font-size: 17px; }
.release-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.release-actions form { margin: 0; }
form.release-minfrom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.release-minfrom label { display: inline-flex; gap: 8px; align-items: center; margin: 0; font-weight: 400; }
.release-minfrom input { width: 90px; margin: 0; }
.changelog { line-height: 1.65; max-width: 80ch; overflow-wrap: anywhere; }
.changelog p { margin: 0 0 10px; }
.changelog h4 { margin: 14px 0 6px; font-size: 14px; color: var(--ink); }
.changelog h4:first-child { margin-top: 0; }
.changelog ul, .changelog ol { margin: 0 0 10px; padding-left: 22px; }
.changelog li { margin: 0 0 4px; }


/* Abrechnungsvorschau (1.6.6) */
.filters-note { align-self: center; }
tfoot th { border-top: 2px solid var(--line); font-weight: 600; background: var(--surface2); }
.plan-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.plan-actions form { display: flex; gap: 8px; align-items: flex-end; margin: 0; flex-wrap: wrap; }
.plan-actions label { margin: 0; }
.plan-actions select { min-width: 200px; margin: 0; }

/* Reseller: Tarife & Preise (kompakt, ohne Querscrollen) */
.pricetable th, .pricetable td { padding: 8px 6px; vertical-align: top; }
.pricetable th:first-child, .pricetable td:first-child { padding-left: 16px; }
.pricetable th.grp { text-align: center; border-bottom: 1px solid var(--line); }
.pricetable thead tr + tr th { font-size: 12px; padding-top: 2px; }
.pricetable .plancell { min-width: 150px; }
.pricetable .plancell small { display: block; color: var(--muted); }
.pricetable input.price { width: 76px; height: 30px; padding: 3px 6px; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pricetable input.pct { width: 52px; height: 30px; padding: 3px 6px; margin: 0; text-align: right; display: inline-block; }
.pricetable input::placeholder { color: var(--muted); opacity: .7; }
.pricetable td.num small { display: block; }

.pricerule { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.pricetable small.warntext { color: var(--warn); }
.pricetable label.check { margin: 4px 0 0; }



/* Ersatzserver (1.6.9) */
.row-actions { margin: 8px 0; }
form.inline-confirm { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
form.inline-confirm label { margin: 0; min-width: 220px; }
.syncstatus .panel-head .tag { margin-left: auto; white-space: normal; }