/* Zentrale Gestaltung. Inhalt und Screenshot-Einfügestellen stehen in den HTML-Dateien.
   Farben, Schriften und Abstände hier ändern; keine Inline-Styles erforderlich. */
@import url("theme.css?v=20261017");
:root {
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, Consolas, monospace;
  --width-content: 78rem;
  --spacing-section: 2rem;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-background); line-height: 1.6; }
.container { width: min(var(--width-content), 100% - 2rem); margin-inline: auto; }
a { color: var(--color-link); text-underline-offset: .15em; overflow-wrap: anywhere; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-link); outline-offset: 4px; }
.site-header { border-bottom: 1px solid var(--color-border); padding-block: 1.25rem; }
.brand { font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.manual-label, .updated { color: var(--color-muted); }
.manual-label { margin-block: .25rem .75rem; }
nav { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; }
nav a[aria-current="page"] { color: var(--color-text); font-weight: 700; text-decoration-thickness: 2px; }
main { padding-block: 1.5rem 3rem; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h2 { margin-top: var(--spacing-section); font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
section, aside, [id] { scroll-margin-top: 1rem; }
p, li { max-width: 90ch; }
li + li { margin-top: .5rem; }
.chapter-list dt { margin-top: 1rem; font-weight: 700; }
.chapter-list dd { margin-left: 0; }
.note { background: var(--color-surface); border-left: 4px solid var(--color-border); padding: .5rem 1.25rem 1rem; margin-block: 1.5rem; }
.note h2 { margin-top: .75rem; }
.table-scroll { overflow-x: auto; margin-block: 1.5rem; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 600; margin-bottom: .7rem; }
th, td { text-align: left; vertical-align: top; padding: .7rem; border-bottom: 1px solid var(--color-border); }
thead th { background: var(--color-surface); }
.compatibility-page { --width-content: 112rem; }
.compatibility-table { table-layout: fixed; min-width: 58rem; font-size: clamp(.78rem, .85vw, .86rem); line-height: 1.4; }
.compatibility-table .server-column { width: 14%; }
.compatibility-table .platform-column { width: 8%; }
.compatibility-table .protocol-column { width: 9%; }
.compatibility-table .license-column { width: 10%; }
.compatibility-table .bpm-column { width: 7%; }
.compatibility-table .key-column { width: 5%; }
.compatibility-table .wiim-column { width: 8%; }
.compatibility-table .general-column { width: 14%; }
.compatibility-table .audio-column { width: 13%; }
.compatibility-table .video-column { width: 12%; }
.compatibility-table thead th { vertical-align: bottom; }
.compatibility-table .wiim-heading { overflow-wrap: normal; text-align: center; }
.compatibility-table .wiim-cell { text-align: center; }
.compatibility-table th, .compatibility-table td { padding: .4rem .35rem; overflow-wrap: anywhere; }
.compatibility-table tbody td:nth-child(3) { white-space: nowrap; }
.compatibility-table tbody td:nth-child(2), .compatibility-table tbody td:nth-child(5) { overflow-wrap: normal; }
.compatibility-table tr > * + *, .compatibility-table thead tr + tr > :first-child { border-left: 1px solid var(--color-border); }
.table-help-trigger { appearance: none; border: 0; border-bottom: 1px dotted currentColor; padding: 0; background: transparent; color: var(--color-link); font: inherit; line-height: inherit; text-align: inherit; cursor: help; }
.table-help-trigger:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
.compatibility-table thead .table-help-trigger { color: inherit; }
.compatibility-table thead .table-help-link { color: var(--color-link); cursor: pointer; text-decoration: none; }
.compatibility-table .value-yes { color: var(--color-pass); }
.compatibility-table .value-no { color: var(--color-fail); }
.compatibility-table .value-integer { color: var(--color-warn); }
.compatibility-value .table-help-trigger { color: inherit; }
.table-help-source { font-size: .8em; margin-left: .2em; text-decoration: none; }
.table-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(21rem, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto; padding: .65rem .8rem; border: 1px solid var(--color-border); border-radius: .3rem; background: var(--color-background); color: var(--color-text); box-shadow: 0 .25rem .8rem #0004; font-size: .85rem; line-height: 1.45; text-align: left; }
.table-tooltip[hidden] { display: none; }
.compatibility-help-mobile { display: none; }
code, pre, kbd { font-family: var(--font-code); }
pre { overflow-x: auto; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); line-height: 1.5; font-size: .9rem; }
kbd { border: 1px solid var(--color-border); border-radius: .2rem; padding: .1rem .3rem; }
.contents { display: block; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; }
.contents h2 { margin-top: .5rem; }
.manual-screenshot { margin: 1.5rem 0; }
.manual-screenshot img { max-width: 100%; height: auto; display: block; border: 1px solid var(--color-border); }
figcaption { color: var(--color-muted); font-size: .95rem; margin-top: .5rem; }
/* Der Kapitelbaum gehört nur zur Bedienungsanleitung; die Vergleichstabelle behält ihre Breite. */
.handbook-page { --width-content: 98rem; }
.handbook-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }
.handbook-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.25rem .8rem 1.25rem 0; border-right: 1px solid var(--color-border); scrollbar-gutter: stable; }
.handbook-tree { display: block; font-size: .9rem; line-height: 1.45; }
.handbook-tree .tree-home { display: block; margin: 0 0 .9rem .35rem; font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.handbook-tree details + details { margin-top: .6rem; }
.handbook-tree summary { cursor: pointer; font-weight: 650; padding: .3rem; border-radius: .2rem; }
.handbook-tree summary:hover, .handbook-tree a:hover { background: var(--color-surface); }
.handbook-tree summary:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.handbook-tree ul { list-style: none; margin: .2rem 0 .4rem .7rem; padding: 0 0 0 .8rem; border-left: 1px solid var(--color-border); }
.handbook-tree li { margin: 0; }
.handbook-tree li a { display: block; padding: .25rem .4rem; text-decoration: none; }
.handbook-content { min-width: 0; max-width: 70ch; }
.handbook-content > article > section { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid var(--color-border); }
.handbook-content h3 { margin-top: 2rem; }
.handbook-content code { overflow-wrap: anywhere; }
.feature-list dt { margin-top: 1rem; font-weight: 650; }
.feature-list dd { margin: .25rem 0 0; }
.manual-reference th { width: 28%; }
.manual-reference { font-size: .95rem; }
.manual-screenshot a { display: inline-block; max-width: 100%; }
.manual-screenshot a:focus-visible { outline-offset: 5px; }
.site-footer { border-top: 1px solid var(--color-border); color: var(--color-muted); padding-block: 1rem; }
.skip-link { position: absolute; left: 1rem; top: -10rem; background: var(--color-background); padding: .5rem; }
.skip-link:focus { top: .5rem; }
@media screen and (max-width: 60rem) {
  .compatibility-help-mobile { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1rem; font-size: .85rem; }
  .handbook-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.5rem; }
  .compatibility-page .table-scroll { overflow: visible; }
  .compatibility-table, .compatibility-table tbody { display: block; width: 100%; min-width: 0; }
  .compatibility-table { font-size: .86rem; }
  .compatibility-table colgroup { display: none; }
  .compatibility-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compatibility-table caption { display: block; }
  .compatibility-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-border); padding: .35rem; margin-bottom: 1rem; }
  .compatibility-table tbody th { grid-column: 1 / -1; font-size: 1.05rem; }
  .compatibility-table tbody td::before { display: block; font-weight: 650; margin-bottom: .25rem; }
  .compatibility-table tbody td:nth-child(2)::before { content: "Plattform"; }
  .compatibility-table tbody td:nth-child(3)::before { content: "Protokoll"; }
  .compatibility-table tbody td:nth-child(4)::before { content: "Lizenzkosten"; }
  .compatibility-table tbody td:nth-child(5)::before { content: "BPM"; }
  .compatibility-table tbody td:nth-child(6)::before { content: "Tonart/Key"; }
  .compatibility-table tbody td:nth-child(3) { grid-column: 1; grid-row: 2; border-left: 0; }
  .compatibility-table tbody td:nth-child(5) { grid-column: 2; grid-row: 2; }
  .compatibility-table tbody td:nth-child(6) { grid-column: 3; grid-row: 2; }
  .compatibility-table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; border-left: 0; }
  .compatibility-table tbody td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; border-left: 0; }
  .compatibility-table tbody td:nth-child(7) { grid-column: 1 / -1; grid-row: 5; border-left: 0; text-align: left; }
  .compatibility-table tbody td:nth-child(7)::before { content: "WiiM Home Advanced Mode"; }
  .compatibility-table tbody td:nth-child(n+8) { grid-column: 1 / -1; border-left: 0; }
  .compatibility-table tbody td:nth-child(8)::before { content: "Allgemein"; }
  .compatibility-table tbody td:nth-child(9)::before { content: "Audio"; }
  .compatibility-table tbody td:nth-child(10)::before { content: "Video"; }
  .compatibility-table tbody td:last-child { border-bottom: 0; }
}
@media screen and (max-width: 45rem) {
  .handbook-layout { display: block; }
  .handbook-sidebar { position: static; max-height: 22rem; padding-right: .5rem; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .handbook-content { max-width: none; }
}
@media (max-width: 40rem) { .container { width: calc(100% - 1.5rem); } th, td { padding: .5rem; } }
@media print {
  .table-tooltip, .compatibility-help-mobile, .table-help-source { display: none !important; }
  .table-help-trigger { color: inherit; border: 0; }
  .site-header nav, .skip-link, .handbook-sidebar { display: none; }
  .handbook-layout { display: block; }
  .handbook-content { max-width: none; }
  .container { width: 100%; }
  .table-scroll, pre { overflow: visible; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .compatibility-table { min-width: 0; font-size: 8pt; }
  figure, tr, pre { break-inside: avoid; }
  body { font-size: 10pt; }
}

.manual-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; align-items: start; }
.manual-menu-grid figure { margin: 0; }
.manual-menu-grid img { max-width: 100%; height: auto; }