/* Hülle des PBX Manager: eigene Token-Schicht --pb-* (ADR 168-B2 Teil B), Systemschrift, keine fremde Ressource.
   Die Tokens stehen seit V005 in app/tokens.css (Vorgang 246, ADR 008), das vor dieser Datei geladen wird. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--pb-bg); color: var(--pb-ink);
  font: var(--pb-schrift-m)/1.6 var(--pb-schriftart); }
.wrap { max-width: 860px; margin: 0 auto; padding-inline: var(--pb-pad); width: 100%; }
header { border-bottom: 1px solid var(--pb-line); background: var(--pb-panel); }
header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pb-a-s) var(--pb-a-l); padding-block: var(--pb-a-m); }
.produkt { display: flex; align-items: center; gap: var(--pb-a-m); font-weight: 700; font-size: var(--pb-schrift-xl); letter-spacing: -.02em; }
.produkt::before { content: ''; display: block; flex-shrink: 0; width: var(--pb-a-3xl); height: var(--pb-a-3xl); background: url('../icons/icon.svg') center / contain no-repeat; }
.version { color: var(--pb-muted); font-size: var(--pb-schrift-s); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
main { flex: 1; padding-block: var(--pb-a-3xl); }
.karte { background: var(--pb-panel); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); padding: var(--pb-pad); max-width: 460px; }
h1 { font-size: var(--pb-schrift-2xl); margin: 0 0 var(--pb-a-s); }
#status { margin: 0; color: var(--pb-muted); }
footer { border-top: 1px solid var(--pb-line); font-size: var(--pb-schrift-m); }
footer .wrap { padding-block: var(--pb-a-m); }
footer a { color: var(--pb-muted); margin-right: var(--pb-a-m); }
body:has(.pb-shell) footer .wrap { display: flex; flex-wrap: wrap; gap: var(--pb-a-s) var(--pb-a-m); }
body:has(.pb-shell) footer a { margin-right: 0; }
/* Vorschau V1 (N12o-B.5): Masken und Anlagenliste. Nur Klassen und Elemente, kein Inline-Stil (CSP style-src 'self'). */
.karte:has(table.anlagen) { max-width: none; }
.karte form { display: grid; gap: var(--pb-a-m); margin-top: var(--pb-a-s); }
.karte label { display: grid; gap: var(--pb-a-xs); font-size: var(--pb-schrift-m); color: var(--pb-muted); }
.karte input { font: inherit; color: var(--pb-ink); background: var(--pb-bg); border: 1px solid var(--pb-line); border-radius: var(--pb-radius-klein); padding: var(--pb-a-s) var(--pb-a-s); }
.karte button { font: inherit; color: var(--pb-panel); background: var(--pb-accent); border: 0; border-radius: var(--pb-radius-klein); padding: var(--pb-a-m); cursor: pointer; justify-self: start; }
.karte button[type="button"] { color: var(--pb-accent); background: transparent; border: 1px solid var(--pb-line); }
.karte button:disabled { opacity: .5; cursor: default; }
.hinweis { margin: 0; color: var(--pb-muted); }
.fehler { margin: 0; color: var(--pb-error); }
.aktionen { display: flex; gap: var(--pb-a-s); margin-top: var(--pb-a-m); }
table.anlagen { width: 100%; border-collapse: collapse; margin-top: var(--pb-a-s); font-size: var(--pb-schrift-m); }
table.anlagen th, table.anlagen td { text-align: left; padding: var(--pb-a-s) var(--pb-a-s); border-bottom: 1px solid var(--pb-line); }
table.anlagen th { color: var(--pb-muted); font-weight: 600; }
.karte:has(.pb-shell) { max-width: none; padding: 0; border: 0; background: transparent; }
body:has(.pb-shell) > header { display: none; }
main.wrap:has(.pb-shell) { max-width: none; padding: var(--pb-a-s); }
.pb-shell { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 848px; border: 1px solid var(--pb-line); border-radius: var(--pb-radius); overflow: hidden; overflow: clip; background: var(--pb-bg); }
.pb-sidebar { display: flex; flex-direction: column; gap: var(--pb-a-xl); padding: var(--pb-a-xl) var(--pb-a-m) var(--pb-a-l); background: var(--pb-panel); border-right: 1px solid var(--pb-line); min-width: 0; }
.pb-brand { display: flex; align-items: center; gap: var(--pb-a-s); padding: 0 var(--pb-a-s); min-width: 0; overflow-wrap: anywhere; }
.pb-brand strong { display: block; font-size: var(--pb-schrift-xl); letter-spacing: 2px; line-height: 1.2; }
.pb-brand small { display: block; font-size: var(--pb-schrift-xs); color: var(--pb-muted); }
.pb-logomark { display: block; width: var(--pb-a-2xl); height: var(--pb-a-2xl); flex-shrink: 0; background: url('../icons/icon.svg') center / contain no-repeat; font-size: 0; }
.pb-navlabel { margin: 0 var(--pb-a-s) var(--pb-a-s); color: var(--pb-muted); font-size: var(--pb-schrift-xs); letter-spacing: 1px; }
.pb-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-a-xs); min-width: 0; }
.pb-sidebar button.pb-navknopf[type=button] { width: 100%; min-width: 0; text-align: left; overflow-wrap: anywhere; white-space: normal; padding: var(--pb-a-s); border: 0; border-radius: var(--pb-radius-klein); background: transparent; color: var(--pb-muted); font: inherit; font-size: var(--pb-schrift-s); cursor: pointer; }
.pb-sidebar button.pb-navknopf[aria-current=page] { background: var(--pb-tint); color: var(--pb-accent); font-weight: 600; }
.pb-sidebar button.pb-navknopf:hover { background: var(--pb-soft); }
.pb-partner { margin-top: auto; padding: var(--pb-a-m) var(--pb-a-s); border-top: 1px solid var(--pb-line); color: var(--pb-muted); font-size: var(--pb-schrift-xs); }
.pb-body { min-width: 0; }
.pb-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-a-m); padding: var(--pb-a-l) var(--pb-a-xl); border-bottom: 1px solid var(--pb-line); background: var(--pb-panel); font-size: var(--pb-schrift-xs); }
.pb-vorschau { padding: var(--pb-a-xs) var(--pb-a-s); border: 1px solid var(--pb-line); border-radius: var(--pb-radius-klein); color: var(--pb-muted); }
.pb-main { padding: var(--pb-a-xl) var(--pb-a-xl) var(--pb-a-xl); min-width: 0; }
.pb-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-a-l); margin-bottom: var(--pb-a-xl); }
.pb-eyebrow { margin: 0 0 var(--pb-a-xs); color: var(--pb-accent); font-size: var(--pb-schrift-xs); letter-spacing: 1.2px; text-transform: uppercase; }
.pb-heading h1 { margin: 0; font-size: var(--pb-schrift-2xl); font-weight: 500; }
.pb-actions { display: flex; gap: var(--pb-a-s); flex-wrap: wrap; }
.pb-actions button, .pb-main button:not(.pb-navknopf) { border: 1px solid var(--pb-line); border-radius: var(--pb-radius-klein); padding: var(--pb-a-s) var(--pb-a-m); background: var(--pb-panel); color: var(--pb-ink); font: inherit; font-size: var(--pb-schrift-xs); cursor: pointer; }
.pb-actions button:hover, .pb-main button:hover { border-color: var(--pb-accent); color: var(--pb-accent); }
.pb-panel { margin-bottom: var(--pb-a-l); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); background: var(--pb-panel); min-width: 0; }
.pb-pad, .pb-fehler, .pb-detail { padding: var(--pb-pad); }
.pb-status { margin: 0 0 var(--pb-a-m); color: var(--pb-muted); }
.pb-fehler .pb-status { color: var(--pb-error); }
.pb-stat { display: grid; gap: var(--pb-a-xs); padding: var(--pb-pad); }
.pb-stat p, .pb-stat small { margin: 0; color: var(--pb-muted); }
.pb-stat small { font-size: var(--pb-schrift-xs); }
.pb-stat strong { color: var(--pb-ink); font-size: var(--pb-schrift-3xl); line-height: 1.2; }
.pb-filter { display: flex; gap: var(--pb-a-s); padding: var(--pb-pad); }
.pb-filter input { flex: 1; min-width: 0; }
.pb-filter input, .pb-filter select { border: 1px solid var(--pb-line); border-radius: var(--pb-radius-klein); background: var(--pb-bg); color: var(--pb-ink); font: inherit; padding: var(--pb-a-s) var(--pb-a-s); }
.pb-treffer { margin: 0; padding: 0 var(--pb-pad) var(--pb-a-s); color: var(--pb-muted); font-size: var(--pb-schrift-xs); }
.pb-tablewrap { overflow-x: auto; }
.pb-tablewrap table { margin: 0; min-width: 630px; }
.pb-tablewrap th, .pb-tablewrap td { padding: var(--pb-a-s) var(--pb-a-m); }
.pb-detail h2 { margin: 0 0 var(--pb-a-m); font-size: var(--pb-schrift-xl); }
.pb-detail p { margin: var(--pb-a-xs) 0; overflow-wrap: anywhere; }
.pb-stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pb-a-m); margin: 0; padding: 0; list-style: none; }
.pb-stufen li { display: grid; gap: var(--pb-a-s); padding: var(--pb-a-l); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); background: var(--pb-panel); }
.pb-stufen span { color: var(--pb-muted); font-size: var(--pb-schrift-xs); }
button:focus-visible, input:focus-visible, select:focus-visible, .pb-tablewrap:focus-visible { outline: 3px solid var(--pb-accent); outline-offset: 2px; }
@media (max-width: 850px) { .pb-shell { grid-template-columns: 136px minmax(0,1fr); } .pb-sidebar { padding: var(--pb-a-l) var(--pb-a-s) var(--pb-a-m); } .pb-main { padding: var(--pb-a-l) var(--pb-a-l); } .pb-topbar { padding: var(--pb-a-m) var(--pb-a-l); } }
/* 213 F37 V1 (ADR 213 K5/H1): unter 620 px fließt die Navigation als Flexzeile; jeder Knopf ist mindestens so breit wie sein
   längstes Wort (flex: 1 0 max-content), so bricht „Herstellerbestand“/„Serviceautomatik“ nie mitten im Wort. overflow-wrap bleibt Rückfall. */
@media (max-width: 620px) { .pb-shell { grid-template-columns: 1fr; grid-template-rows: max-content minmax(0, 1fr); } .pb-sidebar { gap: var(--pb-a-l); padding: var(--pb-a-l) var(--pb-a-l) var(--pb-a-xl); border-right: 0; border-bottom: 1px solid var(--pb-line); } .pb-nav { display: flex; flex-wrap: wrap; } .pb-sidebar button.pb-navknopf[type=button] { flex: 1 0 max-content; width: auto; padding: var(--pb-a-s) var(--pb-a-s); font-size: var(--pb-schrift-xs); line-height: 1.5; } .pb-partner, .pb-navlabel { display: none; } .pb-topbar { padding: var(--pb-a-m) var(--pb-a-m); flex-wrap: wrap; } .pb-main { padding: var(--pb-a-l) var(--pb-a-m); } .pb-heading, .pb-filter { flex-wrap: wrap; } .pb-filter input, .pb-filter select { width: 100%; flex-basis: 100%; font-size: var(--pb-schrift-l); } }

/* 215: ein zusammenhängender Arbeitsbereich; Navigation und Inhalte haben klare eigene Ebenen. */
body:has(.pb-shell) { color-scheme: light; line-height: 1.5; }
main.wrap:has(.pb-shell) { padding: 0; }
.pb-shell { grid-template-columns: var(--pb-sidebarbreite) minmax(0, 1fr); min-height: 100dvh; border: 0; border-radius: 0; overflow: visible; }
.pb-sidebar { position: sticky; top: 0; align-self: start; min-height: 100dvh; max-height: 100dvh; overflow-y: auto; padding: var(--pb-a-2xl) var(--pb-a-l) var(--pb-a-xl); gap: var(--pb-a-2xl); background: var(--pb-sidebar-bg); border-color: var(--pb-sidebar-line); color: var(--pb-sidebar-ink); scrollbar-width: thin; }
.pb-brand { gap: var(--pb-a-m); padding-inline: var(--pb-a-s); }
.pb-brand strong { font-size: var(--pb-schrift-2xl); letter-spacing: .02em; }
.pb-brand small { color: var(--pb-sidebar-muted); font-size: var(--pb-schrift-s); }
.pb-navlabel { color: var(--pb-sidebar-muted); font-size: var(--pb-schrift-xs); letter-spacing: .08em; }
.pb-nav { gap: var(--pb-a-xs); }
.pb-sidebar button.pb-navknopf[type=button] { min-height: var(--pb-feldhoehe); padding: var(--pb-a-m) var(--pb-a-m); color: var(--pb-sidebar-muted); font-size: var(--pb-schrift-m); font-weight: 500; line-height: 1.4; }
.pb-sidebar button.pb-navknopf[type=button]:hover { background: var(--pb-sidebar-hover); color: var(--pb-sidebar-ink); }
.pb-sidebar button.pb-navknopf[aria-current=page] { background: var(--pb-sidebar-active); color: var(--pb-sidebar-accent); box-shadow: inset 3px 0 var(--pb-sidebar-accent); font-weight: 650; }
.pb-sidebar button.pb-navknopf:focus-visible { outline-color: var(--pb-sidebar-accent); }
.pb-partner { margin-bottom: 0; padding-top: var(--pb-a-l); border-color: var(--pb-sidebar-line); color: var(--pb-sidebar-muted); line-height: 1.6; }
.pb-body { min-width: 0; }
.pb-topbar { position: sticky; top: 0; z-index: 5; min-height: var(--pb-topbarhoehe); padding: var(--pb-a-m) var(--pb-a-2xl); font-size: var(--pb-schrift-s); color: var(--pb-muted); }
.pb-vorschau { padding: var(--pb-a-xs) var(--pb-a-m); background: var(--pb-soft); border-color: transparent; color: var(--pb-ink); font-weight: 550; }
.pb-main { width: 100%; max-width: var(--pb-inhaltbreite); margin-inline: auto; padding: var(--pb-a-2xl); }
.pb-heading { align-items: flex-start; margin-bottom: var(--pb-a-xl); gap: var(--pb-a-xl); }
.pb-heading h1 { font-size: var(--pb-schrift-3xl); font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.pb-eyebrow { font-weight: 650; letter-spacing: .09em; margin-bottom: var(--pb-a-s); }
.pb-actions { align-items: center; }
.pb-actions button, .pb-main button:not(.pb-navknopf) { min-height: var(--pb-feldhoehe); font-size: var(--pb-schrift-s); font-weight: 550; line-height: 1.35; }
.pb-panel { margin-bottom: var(--pb-a-xl); box-shadow: var(--pb-panel-schatten); }
.pb-pad, .pb-fehler, .pb-detail { padding: var(--pb-a-xl); }
.pb-panel > :first-child { margin-top: 0; }
.pb-main h2 { font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.pb-main h3 { font-weight: 650; line-height: 1.4; }
.pb-main p { max-width: 100%; overflow-wrap: anywhere; }
.pb-main select, .pb-main input:not([type=checkbox]):not([type=radio]), .pb-main textarea { min-height: var(--pb-feldhoehe); max-width: 100%; }
.pb-main select, .pb-main textarea { min-width: 0; }
.pb-main textarea { width: 100%; padding: var(--pb-a-m); border: 1px solid var(--pb-line); border-radius: var(--pb-radius-klein); background: var(--pb-panel); color: var(--pb-ink); font: inherit; }
.pb-filter { align-items: end; background: var(--pb-panel); gap: var(--pb-a-m); }
.pb-filter input, .pb-filter select { min-height: var(--pb-feldhoehe); background: var(--pb-panel); }
.pb-treffer { font-size: var(--pb-schrift-s); }
.pb-tablewrap { max-width: 100%; border-radius: var(--pb-radius-klein); scrollbar-width: thin; }
.pb-detail > p { margin-block: var(--pb-a-s); }
.pb-stufen { gap: var(--pb-a-m); }
.pb-stufen li { box-shadow: var(--pb-panel-schatten); }
.pb-stufen li.aktuell { border-color: var(--pb-accent); background: var(--pb-tint); }
.pb-main :is(button,input,select,textarea,summary,a):focus-visible { outline: 3px solid var(--pb-accent); outline-offset: 3px; }
body:has(.pb-shell) footer { background: var(--pb-panel); font-size: var(--pb-schrift-xs); }
body:has(.pb-shell) footer .wrap { max-width: none; justify-content: flex-end; padding-inline: var(--pb-a-2xl); }
@media (max-width: 1000px) and (min-width: 621px) {
 .pb-shell { grid-template-columns: 184px minmax(0, 1fr); }
 .pb-sidebar { padding-inline: var(--pb-a-m); }
 .pb-main { padding: var(--pb-a-xl); }
 .pb-topbar { padding-inline: var(--pb-a-xl); }
 .pb-heading { flex-wrap: wrap; }
}
@media (max-width: 620px) {
 .pb-shell { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
 .pb-sidebar { position: static; min-height: 0; max-height: none; overflow: visible; padding: var(--pb-a-l); gap: var(--pb-a-l); border-bottom-color: var(--pb-sidebar-line); }
 .pb-brand strong { font-size: var(--pb-schrift-xl); }
 .pb-brand small { font-size: var(--pb-schrift-xs); }
 .pb-nav { display: flex; flex-wrap: wrap; gap: var(--pb-a-xs); }
 .pb-sidebar button.pb-navknopf[type=button] { flex: 1 0 max-content; width: auto; min-height: var(--pb-feldhoehe); padding: var(--pb-a-s) var(--pb-a-m); font-size: var(--pb-schrift-s); }
 .pb-topbar { position: static; min-height: 0; padding: var(--pb-a-m) var(--pb-a-l); gap: var(--pb-a-s); }
 .pb-main { padding: var(--pb-a-xl) var(--pb-a-l); }
 .pb-heading { gap: var(--pb-a-l); margin-bottom: var(--pb-a-xl); }
 .pb-heading h1 { font-size: var(--pb-schrift-2xl); }
 .pb-actions { width: 100%; }
 .pb-actions button { flex: 1 1 auto; }
 .pb-pad, .pb-fehler, .pb-detail { padding: var(--pb-a-l); }
 .pb-filter { padding: var(--pb-a-l); }
 .pb-panel { margin-bottom: var(--pb-a-l); }
 body:has(.pb-shell) footer .wrap { justify-content: flex-start; padding-inline: var(--pb-a-l); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; } }