:root {
  --app-rail-width: 224px;
  --app-topbar-height: 64px;
  --app-contextbar-height: 52px;
  --app-selection-width: 220px;
  --app-context-width: 304px;
  --app-workspace-gap: 12px;
  --app-bg: var(--wt-ui-bg, #edf2f6);
  --app-surface: var(--wt-ui-surface, #ffffff);
  --app-surface-soft: var(--wt-ui-surface-soft, #f5f8fa);
  --app-canvas: #08111a;
  --app-canvas-panel: #0d1823;
  --app-canvas-raised: #142432;
  --app-canvas-line: #24394a;
  --app-canvas-line-strong: #31556b;
  --app-canvas-text: #dce8ef;
  --app-canvas-muted: #8da4b4;
  --app-canvas-faint: #647b8b;
  --app-rail: var(--wt-ui-rail, #0b1c2d);
  --app-rail-raised: var(--wt-ui-rail-raised, #122b43);
  --app-line: var(--wt-ui-line, #d5e0e7);
  --app-line-dark: #24394a;
  --app-text: var(--wt-ui-text, #132437);
  --app-muted: var(--wt-ui-muted, #64788b);
  --app-muted-dark: var(--wt-ui-muted-dark, #8da4b4);
  --app-teal: var(--wt-ui-brand, #117d87);
  --app-teal-bright: #42c3ca;
  --app-orange: var(--wt-ui-accent, #ff7c36);
  --app-green: var(--wt-ui-success, #1f9d68);
  --app-red: var(--wt-ui-danger, #c63d4c);
  --app-amber: var(--wt-ui-warning, #b26a08);
  --app-success-soft: #eaf7f1;
  --app-success-line: #b9dccd;
  --app-warning-soft: #fff4dc;
  --app-warning-line: #efd08d;
  --app-danger-soft: #fff0f2;
  --app-danger-line: #e7b8be;
  --app-speaker-1: var(--wt-spk-0, #0072B2);
  --app-speaker-2: var(--wt-spk-1, #E69F00);
  --app-speaker-3: var(--wt-spk-2, #CC79A7);
  --app-speaker-4: var(--wt-spk-3, #56B4E9);
  --app-radius: var(--wt-ui-radius, 7px);
  --app-radius-panel: var(--wt-ui-radius-panel, 8px);
  --app-control-height: var(--wt-ui-control-height, 40px);
  --app-shadow: var(--wt-ui-shadow, 0 12px 28px -26px rgba(12, 31, 48, .72));
}

body.wt-body--app {
  margin: 0;
  color: var(--app-text);
  background: var(--app-bg);
  font-family: var(--wt-font, Verdana, Geneva, Tahoma, sans-serif);
}

body.wt-body--app > .wt-topaccent,
body.wt-body--app > .wt-header,
body.wt-body--app > .wt-truststrip,
body.wt-body--app > .wt-footer,
body.wt-body--app > .wt-legal-modal-root {
  display: none;
}

body.wt-body--app > main {
  min-height: 100dvh;
  background: var(--app-bg);
}

.app-shell,
.app-shell * { box-sizing: border-box; }
.app-shell [hidden] { display: none !important; }
.app-shell button,
.app-shell input,
.app-shell select,
.app-shell textarea { font: inherit; }

.app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--app-rail-width) minmax(0, 1fr);
  color: var(--app-text);
  background: var(--app-bg);
}

.app-rail {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100dvh;
  min-width: 0;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #dbe7ee;
  background: var(--app-rail);
  border-right: 1px solid #20384d;
}

.app-brand {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.app-brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: var(--app-radius);
  color: #fff;
  background: var(--app-teal);
  font-size: 20px;
}

.app-brand-copy { min-width: 0; display: grid; gap: 1px; }
.app-brand-copy strong { color: #fff; font-size: 15px; line-height: 1.15; }
.app-brand-copy small { overflow: hidden; color: #91a8b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }

.app-nav { display: grid; gap: 4px; }
.app-nav-item {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--app-radius);
  color: #adc0cd;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}
.app-nav-item .ti { width: 20px; flex: 0 0 20px; color: #63c7ce; font-size: 18px; text-align: center; }
.app-nav-item:hover { color: #fff; border-color: #29455e; background: #102940; }
.app-nav-item.is-active { color: #fff; border-color: #31536d; background: var(--app-rail-raised); box-shadow: inset 3px 0 var(--app-orange); }

.app-boundary {
  margin-top: auto;
  padding: 9px;
  display: grid;
  gap: 7px;
  border: 1px solid #29465e;
  border-radius: var(--app-radius);
  background: #0f263a;
}
.app-boundary > span { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 7px; align-items: center; }
.app-boundary .ti { grid-row: 1 / 3; color: #61c7cd; font-size: 15px; }
.app-boundary b { color: #dce8ef; font-size: 9px; line-height: 1.25; text-transform: uppercase; }
.app-boundary small { overflow: hidden; color: #8ea5b4; font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }

.app-frame { min-width: 0; min-height: 100dvh; display: grid; grid-template-rows: var(--app-topbar-height) minmax(0, 1fr); }
.app-frame--context { grid-template-rows: var(--app-topbar-height) var(--app-contextbar-height) minmax(0, 1fr); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
  min-height: var(--app-topbar-height);
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--app-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px) saturate(130%);
}

.app-heading { min-width: 0; }
.app-heading p { margin: 0 0 2px; overflow: hidden; color: var(--app-muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.app-heading h1 { margin: 0; overflow: hidden; color: var(--app-text); font-size: 22px; line-height: 1.12; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }

.app-topbar-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.app-status {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #b9dccd;
  border-radius: var(--app-radius);
  color: #176447;
  background: #eaf7f1;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.app-status > i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 0 3px rgba(31, 157, 104, .13); }

.app-contextbar {
  min-width: 0;
  min-height: var(--app-contextbar-height);
  padding: 0 14px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-surface);
}
.app-contextbar > * { min-width: 0; }
.app-context-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.app-context-identity > .ti {
  width: 28px;
  flex: 0 0 28px;
  color: var(--app-teal);
  font-size: 19px;
  text-align: center;
}
.app-context-identity > span { min-width: 0; display: grid; gap: 1px; }
.app-context-identity strong,
.app-context-identity small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-context-identity strong { color: var(--app-text); font-size: 11px; line-height: 1.25; }
.app-context-identity small { color: var(--app-muted); font-size: 9px; line-height: 1.25; }
.app-context-tabs { min-width: 0; display: flex; align-items: stretch; }
.app-context-tabs a,
.app-context-tabs button {
  min-width: 82px;
  min-height: var(--app-contextbar-height);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--app-muted);
  background: transparent;
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.app-context-tabs a:hover,
.app-context-tabs button:hover { color: var(--app-text); background: var(--app-surface-soft); }
.app-context-tabs .is-active,
.app-context-tabs [aria-current="page"],
.app-context-tabs [aria-selected="true"] { color: var(--app-text); border-bottom-color: var(--app-orange); }
.app-context-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.app-context-chip {
  min-height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  color: var(--app-muted);
  background: var(--app-surface-soft);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
}
.app-context-chip > .ti { color: var(--app-teal); font-size: 14px; }

.app-content { min-width: 0; min-height: 0; padding: 16px; background: var(--app-bg); }
.app-content--flush { padding: 0; }
.app-content--canvas { color: #dce8ef; background: var(--app-canvas); }

.app-shell .wt-section { padding: 0; }
.app-shell .wt-container { width: 100%; }
.app-shell .wt-card {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-panel);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}
.app-panel {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-panel);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}
.app-canvas {
  color: var(--app-canvas-text);
  border: 1px solid var(--app-canvas-line);
  border-radius: var(--app-radius);
  background: var(--app-canvas);
}
.app-shell .wt-h1,
.app-shell .wt-h2,
.app-shell h1,
.app-shell h2,
.app-shell h3 { letter-spacing: 0; }
.app-shell .wt-cta {
  min-height: 40px;
  border-radius: var(--app-radius);
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}
.app-shell .wt-cta:hover { transform: none; box-shadow: none; }
.app-shell .wt-input { border-radius: var(--app-radius); }

.app-icon-button {
  width: var(--app-control-height);
  height: var(--app-control-height);
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  color: #24485a;
  background: #fff;
  cursor: pointer;
}

.app-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(188px, var(--app-selection-width)) minmax(0, 1fr) minmax(260px, var(--app-context-width));
  gap: var(--app-workspace-gap);
  align-items: stretch;
}
.app-workspace--seamless { gap: 0; }
.app-workspace--seamless > * { border-radius: 0; box-shadow: none; }
.app-workspace--seamless > * + * { border-left: 0; }
.app-pane {
  min-width: 0;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-panel);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}
.app-pane--soft { background: var(--app-surface-soft); }
.app-pane--canvas { color: var(--app-canvas-text); border-color: var(--app-canvas-line); background: var(--app-canvas); }
.app-pane-head {
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--app-line);
}
.app-pane-head > div { min-width: 0; }
.app-pane-head h2,
.app-pane-head h3 { margin: 0; color: var(--app-text); font-size: 11px; line-height: 1.25; }
.app-pane-head p { margin: 2px 0 0; color: var(--app-muted); font-size: 8px; line-height: 1.3; }
.app-pane-body { min-width: 0; padding: 12px; }
.app-section-label { color: var(--app-muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.app-state-list { display: grid; gap: 7px; }
.app-state-row {
  min-width: 0;
  min-height: 42px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  color: var(--app-muted);
  background: var(--app-surface-soft);
  font-size: 9px;
}
.app-state-row > .ti { color: var(--app-teal); font-size: 16px; }
.app-state-row strong,
.app-state-row small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-state-row strong { color: var(--app-text); font-size: 9px; }
.app-state-row small { margin-top: 2px; color: var(--app-muted); font-size: 8px; }
.app-state-row > b { color: var(--app-green); font-size: 8px; text-transform: uppercase; }

.app-shell :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-teal) 28%, transparent);
  outline-offset: 2px;
}

@media (max-width: 1180px) and (min-width: 721px) {
  :root { --app-rail-width: 76px; }
  .app-rail { padding-inline: 10px; }
  .app-brand { justify-content: center; }
  .app-brand-copy,
  .app-nav-item span,
  .app-boundary { display: none; }
  .app-nav-item { padding: 0; justify-content: center; }
  .app-nav-item.is-active { box-shadow: inset 0 -3px var(--app-orange); }
  .app-workspace { grid-template-columns: minmax(176px, 210px) minmax(0, 1fr); }
  .app-workspace > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --app-topbar-height: 58px; }
  .app-shell {
    min-height: 100dvh;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
    display: block;
  }
  .app-rail {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    display: block;
    border-right: 0;
    border-top: 1px solid #29465e;
  }
  .app-brand,
  .app-boundary { display: none; }
  .app-nav { height: 50px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .app-nav-item { min-height: 50px; padding: 3px 1px; display: grid; justify-items: center; align-content: center; gap: 1px; font-size: 8px; }
  .app-nav-item .ti { width: auto; font-size: 16px; }
  .app-nav-item.is-active { box-shadow: inset 0 3px var(--app-orange); }
  .app-frame { min-height: 0; grid-template-rows: var(--app-topbar-height) minmax(0, 1fr); }
  .app-frame--context { grid-template-rows: var(--app-topbar-height) var(--app-contextbar-height) minmax(0, 1fr); }
  .app-topbar { padding: 7px 10px; }
  .app-heading h1 { font-size: 18px; }
  .app-heading p { font-size: 8px; }
  .app-status { display: none; }
  .app-content { padding: 10px; }
  .app-content--flush { padding: 0; }
  .app-contextbar { padding: 0 9px; gap: 8px; }
  .app-context-identity > .ti { width: 24px; flex-basis: 24px; font-size: 17px; }
  .app-context-identity--compact-mobile > span { display: none; }
  .app-context-tabs { overflow-x: auto; }
  .app-context-tabs a,
  .app-context-tabs button { min-width: 66px; padding-inline: 8px; font-size: 8px; }
  .app-context-actions .app-context-chip:not(:first-child) { display: none; }
  .app-workspace { display: block; }
  .app-workspace > * + * { margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Installierbare Web-App: kleiner, vertrauter Download-Pfeil in der Produktleiste. */
.pwa-install-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  border: 1px solid var(--app-line, #c8d5dc);
  border-radius: var(--app-radius, 6px);
  color: var(--app-text, #12232a);
  background: var(--app-surface, #fff);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pwa-install-button:hover { color: #fff; border-color: var(--app-teal, #117d87); background: var(--app-teal, #117d87); }
.pwa-install-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-teal, #117d87) 35%, transparent); outline-offset: 2px; }
.pwa-install-button .ti { font-size: 18px; }
.pwa-install-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pwa-install-dialog {
  width: min(430px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 24px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-line, #c8d5dc);
  border-radius: 8px;
  color: var(--app-text, #12232a);
  background: var(--app-surface, #fff);
  box-shadow: 0 22px 70px rgba(4, 25, 34, .32);
}
.pwa-install-dialog::backdrop { background: rgba(4, 19, 28, .68); }
.pwa-install-dialog form { margin: 0; }
.pwa-install-dialog header {
  min-height: 58px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--app-line, #c8d5dc);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pwa-install-dialog header > span { min-width: 0; display: flex; align-items: center; gap: 9px; }
.pwa-install-dialog header > span .ti { color: var(--app-teal, #117d87); font-size: 20px; }
.pwa-install-dialog header strong { font-size: 15px; }
.pwa-install-dialog header button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--app-line, #c8d5dc);
  border-radius: var(--app-radius, 6px);
  color: inherit;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pwa-install-dialog__body { padding: 16px; overflow-y: auto; }
.pwa-install-dialog__body p { margin: 0; line-height: 1.55; }
.pwa-install-dialog__body ol { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.pwa-install-dialog__body li {
  min-height: 60px;
  padding: 9px 10px;
  border: 1px solid var(--app-line, #c8d5dc);
  border-radius: var(--app-radius, 6px);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.pwa-install-dialog__body li > .ti { color: var(--app-teal, #117d87); font-size: 21px; text-align: center; }
.pwa-install-dialog__body li span { min-width: 0; display: grid; gap: 2px; }
.pwa-install-dialog__body li strong { font-size: 12px; }
.pwa-install-dialog__body li small { color: var(--app-muted, #60727c); font-size: 11px; line-height: 1.4; }
.pwa-install-dialog footer { padding: 10px 16px 16px; }
.pwa-install-dialog__close {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: var(--app-radius, 6px);
  color: #fff;
  background: var(--app-teal, #117d87);
  font: 700 13px/1 inherit;
  cursor: pointer;
}

@media (display-mode: standalone) {
  .pwa-install-button { display: none !important; }
}