/*!
 * TRFX Legacy – Design System
 * Sieht alt aus. Funktioniert.
 *
 * 00 – Tokens
 * Alle Komponenten lesen ausschließlich diese Variablen. Ein „Design“ (Theme)
 * ist nur ein Satz Variablen unter [data-theme="…"].
 */

@font-face {
  font-family: "Share Tech Mono";
  src: url("fonts/share-tech-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="luna"] {
  color-scheme: light;

  /* Schriften */
  --lg-font-text: Tahoma, "Segoe UI", Verdana, "DejaVu Sans", Geneva, sans-serif;
  --lg-font-head: "Trebuchet MS", Tahoma, Verdana, "DejaVu Sans", sans-serif;
  --lg-font-mono: "Share Tech Mono", "Courier New", Courier, monospace;

  /* Schriftgrößen (Basis 14 px) */
  --lg-fs-xs: 0.75rem;
  --lg-fs-sm: 0.8125rem;
  --lg-fs-md: 0.875rem;
  --lg-fs-lg: 1rem;
  --lg-fs-xl: 1.25rem;
  --lg-fs-2xl: 1.625rem;
  --lg-fs-3xl: 2rem;

  /* Abstände (4-px-Raster) */
  --lg-sp-1: 2px;
  --lg-sp-2: 4px;
  --lg-sp-3: 8px;
  --lg-sp-4: 12px;
  --lg-sp-5: 16px;
  --lg-sp-6: 24px;
  --lg-sp-7: 32px;

  /* Flächen */
  --lg-page: #ffffff;
  --lg-face: #ece9d8;
  --lg-face-hi: #ffffff;
  --lg-face-lo: #d6d0c5;
  --lg-face-dk: #aca899;
  --lg-edge: #003c74;
  --lg-frame: #0a3dd0;
  --lg-field: #ffffff;
  --lg-field-border: #7f9db9;
  --lg-panel: #f7f6ee;

  /* Text */
  --lg-text: #000000;
  --lg-text-muted: #4a4a42;
  --lg-text-disabled: #84826f;
  --lg-heading: #0a3da8;
  --lg-group-label: #0046d5;
  --lg-link: #0039b3;
  --lg-visited: #5b2a8c;

  /* Auswahl, Fokus, Akzent */
  --lg-sel-bg: #316ac5;
  --lg-sel-fg: #ffffff;
  --lg-hover-row: #e4ecfb;
  --lg-focus: #000000;
  --lg-accent: #e68b2c;
  --lg-accent-soft: #fccb69;
  --lg-accent-pale: #fff0cf;
  --lg-default-ring: #98b8ea;
  --lg-check: #21a121;

  /* Status */
  --lg-ok: #2e8b1e;
  --lg-warn: #f5b80a;
  --lg-err: #c4311a;
  --lg-info: #0054e3;

  /* Titelleiste */
  --lg-title-bg: linear-gradient(180deg, #0a5fdb 0%, #3d95ff 8%, #2680ff 18%, #0058e6 56%, #0058e6 86%, #0a4fc9 94%, #083daa 100%);
  --lg-title-bg-quiet: linear-gradient(180deg, #7a96df 0%, #a8bbf0 8%, #92a9e8 18%, #7a96df 56%, #7a96df 90%, #6c86cf 100%);
  --lg-title-fg: #ffffff;
  --lg-title-fg-quiet: #1c2b66;
  --lg-title-shadow: 1px 1px 0 #0f1089;

  /* Kopfzeile der Seite */
  --lg-header-bg: linear-gradient(180deg, #ffffff 0%, #f4f2e8 60%, #ece9d8 100%);
  --lg-header-rule: linear-gradient(180deg, #0a5fdb 0%, #0058e6 100%);

  /* Aufgabenbereich (Seitenleiste) */
  --lg-pane-bg: linear-gradient(180deg, #7ba2e7 0%, #6375d6 100%);
  --lg-pane-head-bg: linear-gradient(90deg, #ffffff 0%, #c6d3f7 100%);
  --lg-pane-head-fg: #14449f;
  --lg-pane-body: #d6dff7;
  --lg-pane-edge: #ffffff;
  --lg-pane-text: #14449f;

  /* Schaltflächen */
  --lg-btn-bg: linear-gradient(180deg, #ffffff 0%, #f0efe8 70%, #d6d0c5 100%);
  --lg-btn-bg-down: #cecabb;
  --lg-btn-border: 1px solid var(--lg-edge);
  --lg-btn-radius: 3px;
  --lg-btn-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  --lg-btn-shadow-hover: inset 0 0 0 1px var(--lg-accent-pale), inset 0 0 0 2px var(--lg-accent-soft);
  --lg-btn-shadow-down: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
  --lg-btn-shadow-default: inset 0 0 0 2px var(--lg-default-ring);

  /* Reiter */
  --lg-tab-bg: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
  --lg-tab-border: #919b9c;
  --lg-tab-panel: linear-gradient(180deg, #fcfcfe 0%, #f4f3ee 100%);

  /* Formen */
  --lg-radius: 3px;
  --lg-radius-win: 8px;
  --lg-field-radius: 0;
  --lg-win-shadow: 2px 3px 8px rgba(0, 0, 0, 0.35);
  --lg-win-border-w: 3px;

  /* Fortschritt und Hinweise */
  --lg-progress: #37c437;
  --lg-tip-bg: #ffffe1;
  --lg-tip-fg: #000000;
  --lg-tip-border: #000000;

  /* Marke (Kacheln im Logo) */
  --lg-brand-t: #2a6bdb;
  --lg-brand-r: #47ae3f;
  --lg-brand-f: #f5b80a;
  --lg-brand-x: #da4f33;
}

/* ------------------------------------------------------------------ */
/* Olivgrün (Windows XP, zweites Farbschema)                           */
/* ------------------------------------------------------------------ */
[data-theme="olive"] {
  --lg-frame: #5b7a2c;
  --lg-edge: #3b4f1a;
  --lg-heading: #3f5a1a;
  --lg-group-label: #4d6b1f;
  --lg-link: #2f5d00;
  --lg-visited: #5b2a8c;
  --lg-sel-bg: #5e7a2b;
  --lg-hover-row: #e8efd6;
  --lg-default-ring: #b6c98a;
  --lg-title-bg: linear-gradient(180deg, #86a24f 0%, #9db96a 8%, #7c9a45 18%, #5b7a2c 56%, #5b7a2c 86%, #4e6b25 94%, #3f5a1a 100%);
  --lg-title-shadow: 1px 1px 0 #2b3d10;
  --lg-header-rule: linear-gradient(180deg, #86a24f 0%, #5b7a2c 100%);
  --lg-pane-bg: linear-gradient(180deg, #c1cf9c 0%, #a4b57a 100%);
  --lg-pane-head-bg: linear-gradient(90deg, #ffffff 0%, #dde6c4 100%);
  --lg-pane-head-fg: #3f5a1a;
  --lg-pane-body: #eef2df;
  --lg-pane-text: #33480f;
  --lg-tab-border: #8f9b78;
  --lg-progress: #5e9e2a;
  --lg-brand-t: #4d6b1f;
}

/* ------------------------------------------------------------------ */
/* Silber (Windows XP, drittes Farbschema)                             */
/* ------------------------------------------------------------------ */
[data-theme="silver"] {
  --lg-face: #ebebf0;
  --lg-face-lo: #d3d3dd;
  --lg-face-dk: #a3a4b8;
  --lg-panel: #f5f5f8;
  --lg-frame: #8a8ca8;
  --lg-edge: #4a4c70;
  --lg-heading: #34366b;
  --lg-group-label: #3c3e8c;
  --lg-link: #2a2e9c;
  --lg-sel-bg: #4e5287;
  --lg-hover-row: #e9e9f3;
  --lg-default-ring: #b4b6d8;
  --lg-title-bg: linear-gradient(180deg, #f6f6fb 0%, #dfe0ec 12%, #c7c9dc 50%, #a9acc6 100%);
  --lg-title-fg: #1b1b3a;
  --lg-title-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  --lg-header-bg: linear-gradient(180deg, #ffffff 0%, #f1f1f6 60%, #e4e4ec 100%);
  --lg-header-rule: linear-gradient(180deg, #a9acc6 0%, #8a8ca8 100%);
  --lg-pane-bg: linear-gradient(180deg, #e8e8f0 0%, #c0c2d4 100%);
  --lg-pane-head-bg: linear-gradient(90deg, #ffffff 0%, #dcdce8 100%);
  --lg-pane-head-fg: #34366b;
  --lg-pane-body: #f0f0f6;
  --lg-pane-text: #34366b;
  --lg-tab-border: #9a9bb0;
  --lg-progress: #6b72c4;
}

/* ------------------------------------------------------------------ */
/* Klassisch (Windows 2000)                                            */
/* ------------------------------------------------------------------ */
[data-theme="classic"] {
  --lg-face: #d4d0c8;
  --lg-face-hi: #ffffff;
  --lg-face-lo: #808080;
  --lg-face-dk: #808080;
  --lg-panel: #e4e1da;
  --lg-frame: #d4d0c8;
  --lg-edge: #000000;
  --lg-field-border: #808080;
  --lg-heading: #0a246a;
  --lg-group-label: #000000;
  --lg-link: #0000cc;
  --lg-visited: #551a8b;
  --lg-sel-bg: #0a246a;
  --lg-hover-row: #dfe3f0;
  --lg-accent: #0a246a;
  --lg-accent-soft: #0a246a;
  --lg-accent-pale: #d4d0c8;
  --lg-default-ring: #000000;
  --lg-title-bg: linear-gradient(90deg, #0a246a 0%, #3a6ea5 60%, #a6caf0 100%);
  --lg-title-bg-quiet: linear-gradient(90deg, #808080 0%, #b5b5b5 100%);
  --lg-title-fg: #ffffff;
  --lg-title-fg-quiet: #1a1a1a;
  --lg-title-shadow: none;
  --lg-header-bg: #d4d0c8;
  --lg-header-rule: #0a246a;
  --lg-pane-bg: #d4d0c8;
  --lg-pane-head-bg: #0a246a;
  --lg-pane-head-fg: #ffffff;
  --lg-pane-body: #e4e1da;
  --lg-pane-edge: #808080;
  --lg-pane-text: #000000;
  --lg-btn-bg: #d4d0c8;
  --lg-btn-bg-down: #d4d0c8;
  --lg-btn-border: 0;
  --lg-btn-radius: 0;
  --lg-btn-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #d4d0c8;
  --lg-btn-shadow-hover: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #d4d0c8;
  --lg-btn-shadow-down: inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #d4d0c8;
  --lg-btn-shadow-default: inset -1px -1px 0 #000, inset 1px 1px 0 #000, inset -2px -2px 0 #808080, inset 2px 2px 0 #fff, inset -3px -3px 0 #d4d0c8;
  --lg-tab-bg: #d4d0c8;
  --lg-tab-border: #808080;
  --lg-tab-panel: #d4d0c8;
  --lg-radius: 0;
  --lg-radius-win: 0;
  --lg-win-shadow: 1px 1px 0 #000;
  --lg-win-border-w: 4px;
  --lg-progress: #0a246a;
  --lg-check: #000000;
  --lg-brand-t: #0a246a;
}

/* ------------------------------------------------------------------ */
/* Platinum (Mac OS 9)                                                 */
/* ------------------------------------------------------------------ */
[data-theme="platinum"] {
  --lg-face: #dddddd;
  --lg-face-hi: #ffffff;
  --lg-face-lo: #bbbbbb;
  --lg-face-dk: #888888;
  --lg-panel: #eeeeee;
  --lg-frame: #777777;
  --lg-edge: #000000;
  --lg-field-border: #666666;
  --lg-text-muted: #444444;
  --lg-heading: #222266;
  --lg-group-label: #000000;
  --lg-link: #0000b8;
  --lg-visited: #551a8b;
  --lg-sel-bg: #5a5ab0;
  --lg-hover-row: #e8e8f4;
  --lg-accent: #5a5ab0;
  --lg-accent-soft: #9999cc;
  --lg-accent-pale: #ffffff;
  --lg-default-ring: #000000;
  --lg-title-bg: repeating-linear-gradient(180deg, #ffffff 0 1px, #c4c4c4 1px 2px);
  --lg-title-bg-quiet: #dddddd;
  --lg-title-fg: #000000;
  --lg-title-fg-quiet: #555555;
  --lg-title-shadow: none;
  --lg-header-bg: linear-gradient(180deg, #f4f4f4 0%, #dddddd 100%);
  --lg-header-rule: #666666;
  --lg-pane-bg: #dddddd;
  --lg-pane-head-bg: linear-gradient(180deg, #ffffff 0%, #c4c4c4 100%);
  --lg-pane-head-fg: #000000;
  --lg-pane-body: #eeeeee;
  --lg-pane-edge: #888888;
  --lg-pane-text: #000000;
  --lg-btn-bg: linear-gradient(180deg, #ffffff 0%, #e6e6e6 50%, #bdbdbd 100%);
  --lg-btn-bg-down: linear-gradient(180deg, #8f8f8f 0%, #b0b0b0 100%);
  --lg-btn-border: 1px solid #000000;
  --lg-btn-radius: 7px;
  --lg-btn-shadow: inset 0 0 0 1px #ffffff;
  --lg-btn-shadow-hover: inset 0 0 0 1px #ffffff;
  --lg-btn-shadow-down: inset 1px 2px 3px rgba(0, 0, 0, 0.45);
  --lg-btn-shadow-default: 0 0 0 1px #fff, 0 0 0 3px #000;
  --lg-tab-bg: linear-gradient(180deg, #f0f0f0 0%, #cfcfcf 100%);
  --lg-tab-border: #666666;
  --lg-tab-panel: #eeeeee;
  --lg-radius: 4px;
  --lg-radius-win: 6px;
  --lg-win-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  --lg-win-border-w: 1px;
  --lg-progress: #5a5ab0;
  --lg-check: #000000;
  --lg-brand-t: #5a5ab0;
}

/* ------------------------------------------------------------------ */
/* Signature (SAP-Stil)                                                */
/* ------------------------------------------------------------------ */
[data-theme="signature"] {
  --lg-face: #e3ebf3;
  --lg-face-hi: #ffffff;
  --lg-face-lo: #c4d3e3;
  --lg-face-dk: #8fa7bf;
  --lg-panel: #f1f5f9;
  --lg-frame: #2f6397;
  --lg-edge: #1f4e79;
  --lg-field-border: #7a98b6;
  --lg-heading: #1f4e79;
  --lg-group-label: #1f4e79;
  --lg-link: #0b4f8a;
  --lg-visited: #5b2a8c;
  --lg-sel-bg: #1f5c99;
  --lg-hover-row: #fff3c4;
  --lg-accent: #f0ab00;
  --lg-accent-soft: #f0ab00;
  --lg-accent-pale: #fff3c4;
  --lg-default-ring: #f0ab00;
  --lg-title-bg: linear-gradient(180deg, #6a9ac9 0%, #3f77ac 50%, #2f6397 100%);
  --lg-title-fg: #ffffff;
  --lg-title-shadow: none;
  --lg-header-bg: linear-gradient(180deg, #f7fafd 0%, #d9e5f1 100%);
  --lg-header-rule: linear-gradient(180deg, #f0ab00 0%, #f0ab00 100%);
  --lg-pane-bg: linear-gradient(180deg, #e6eef6 0%, #c5d6e8 100%);
  --lg-pane-head-bg: linear-gradient(180deg, #5f8fbe 0%, #2f6397 100%);
  --lg-pane-head-fg: #ffffff;
  --lg-pane-body: #f1f5f9;
  --lg-pane-edge: #8fa7bf;
  --lg-pane-text: #1f4e79;
  --lg-btn-bg: linear-gradient(180deg, #ffffff 0%, #e3ebf3 55%, #c4d3e3 100%);
  --lg-btn-border: 1px solid #5c7da0;
  --lg-btn-radius: 2px;
  --lg-btn-shadow: inset 0 0 0 1px #ffffff;
  --lg-btn-shadow-hover: inset 0 0 0 2px #f0ab00;
  --lg-btn-shadow-default: inset 0 0 0 2px #f0ab00;
  --lg-tab-bg: linear-gradient(180deg, #f1f5f9 0%, #c4d3e3 100%);
  --lg-tab-border: #7a98b6;
  --lg-tab-panel: #f1f5f9;
  --lg-radius: 2px;
  --lg-radius-win: 3px;
  --lg-win-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
  --lg-win-border-w: 1px;
  --lg-progress: #f0ab00;
  --lg-brand-t: #1f5c99;
}

/* ------------------------------------------------------------------ */
/* Hoher Kontrast (schwarz)                                            */
/* ------------------------------------------------------------------ */
[data-theme="contrast"] {
  color-scheme: dark;
  --lg-page: #000000;
  --lg-face: #000000;
  --lg-face-hi: #ffffff;
  --lg-face-lo: #000000;
  --lg-face-dk: #ffffff;
  --lg-panel: #000000;
  --lg-frame: #ffffff;
  --lg-edge: #ffffff;
  --lg-field: #000000;
  --lg-field-border: #ffffff;
  --lg-text: #ffffff;
  --lg-text-muted: #ffffff;
  --lg-text-disabled: #00ff00;
  --lg-heading: #ffff00;
  --lg-group-label: #ffff00;
  --lg-link: #66ccff;
  --lg-visited: #ff99ff;
  --lg-sel-bg: #00ffff;
  --lg-sel-fg: #000000;
  --lg-hover-row: #1a1a1a;
  --lg-focus: #ffff00;
  --lg-accent: #ffff00;
  --lg-accent-soft: #ffff00;
  --lg-accent-pale: #000000;
  --lg-default-ring: #ffff00;
  --lg-check: #ffff00;
  --lg-ok: #00ff00;
  --lg-warn: #ffff00;
  --lg-err: #ff6666;
  --lg-info: #66ccff;
  --lg-title-bg: #000000;
  --lg-title-bg-quiet: #000000;
  --lg-title-fg: #ffffff;
  --lg-title-fg-quiet: #ffffff;
  --lg-title-shadow: none;
  --lg-header-bg: #000000;
  --lg-header-rule: #ffffff;
  --lg-pane-bg: #000000;
  --lg-pane-head-bg: #000000;
  --lg-pane-head-fg: #ffff00;
  --lg-pane-body: #000000;
  --lg-pane-edge: #ffffff;
  --lg-pane-text: #ffffff;
  --lg-btn-bg: #000000;
  --lg-btn-bg-down: #333333;
  --lg-btn-border: 2px solid #ffffff;
  --lg-btn-radius: 0;
  --lg-btn-shadow: none;
  --lg-btn-shadow-hover: inset 0 0 0 2px #ffff00;
  --lg-btn-shadow-down: inset 0 0 0 2px #ffffff;
  --lg-btn-shadow-default: inset 0 0 0 2px #ffff00;
  --lg-tab-bg: #000000;
  --lg-tab-border: #ffffff;
  --lg-tab-panel: #000000;
  --lg-radius: 0;
  --lg-radius-win: 0;
  --lg-win-shadow: none;
  --lg-win-border-w: 2px;
  --lg-progress: #00ff00;
  --lg-tip-bg: #000000;
  --lg-tip-fg: #ffffff;
  --lg-tip-border: #ffffff;
  --lg-brand-t: #66ccff;
}

/* 01 – Basis: Reset, Typografie, Links, Code */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lg-page);
  color: var(--lg-text);
  font: var(--lg-fs-md) / 1.5 var(--lg-font-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1.5em 0 0.5em;
  font-family: var(--lg-font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--lg-heading);
}

h1 {
  margin-top: 0;
  padding-bottom: 0.3em;
  font-size: var(--lg-fs-2xl);
  border-bottom: 1px solid var(--lg-face-dk);
  box-shadow: 0 1px 0 var(--lg-face-hi);
}

h2 {
  font-size: var(--lg-fs-xl);
}

h3 {
  font-size: var(--lg-fs-lg);
}

h4,
h5,
h6 {
  font-size: var(--lg-fs-md);
}

p,
ul,
ol,
dl,
pre,
table,
figure {
  margin: 0 0 1em;
}

ul,
ol {
  padding-left: 1.6em;
}

li + li {
  margin-top: 0.15em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 0 0.6em 1.6em;
}

small,
.lg-small {
  font-size: var(--lg-fs-xs);
}

.lg-muted {
  color: var(--lg-text-muted);
}

strong,
b {
  font-weight: 700;
}

a {
  color: var(--lg-link);
  text-decoration: underline;
}

a:visited {
  color: var(--lg-visited);
}

a:hover {
  text-decoration: none;
  background: var(--lg-hover-row);
}

:focus-visible {
  outline: 2px dotted var(--lg-focus);
  outline-offset: 1px;
}

::selection {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
}

hr {
  height: 0;
  margin: 1.25em 0;
  border: 0;
  border-top: 1px solid var(--lg-face-dk);
  border-bottom: 1px solid var(--lg-face-hi);
}

img,
svg {
  max-width: 100%;
}

/* Code */
code,
kbd,
samp,
pre {
  font-family: var(--lg-font-mono);
  font-size: 0.95em;
}

code,
samp {
  padding: 0 0.25em;
  background: var(--lg-panel);
  border: 1px solid var(--lg-face-lo);
  color: var(--lg-text);
}

pre {
  overflow: auto;
  padding: 0.75rem 1rem;
  background: var(--lg-field);
  color: var(--lg-text);
  border: 1px solid var(--lg-field-border);
  box-shadow: inset 1px 1px 0 var(--lg-face-lo);
  line-height: 1.45;
  tab-size: 2;
}

pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  text-align: center;
  background: var(--lg-btn-bg);
  color: var(--lg-text);
  border: 1px solid var(--lg-face-dk);
  border-bottom-width: 2px;
  border-radius: var(--lg-radius);
}

/* Hilfsklassen */
.lg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lg-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 6px 12px;
  background: var(--lg-tip-bg);
  color: var(--lg-tip-fg);
  border: 1px solid var(--lg-tip-border);
}

.lg-skip:focus {
  top: 8px;
}

.lg-stack > * + * {
  margin-top: var(--lg-sp-5);
}

.lg-row {
  display: flex;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lg-sp-3);
}

.lg-grid {
  display: grid;
  gap: var(--lg-sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.lg-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.lg-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* Symbole (Sprite) */
.lg-icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.lg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lg-icon--lg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.lg-icon--xl {
  width: 48px;
  height: 48px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 02 – Bedienelemente */

/* ---------- Schaltfläche ---------- */
.lg-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 5.5rem;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.2rem 0.9rem;
  font: inherit;
  font-size: var(--lg-fs-sm);
  line-height: 1.2;
  color: var(--lg-text);
  text-decoration: none;
  background: var(--lg-btn-bg);
  border: var(--lg-btn-border);
  border-radius: var(--lg-btn-radius);
  box-shadow: var(--lg-btn-shadow);
  cursor: pointer;
  user-select: none;
}

.lg-btn:visited {
  color: var(--lg-text);
}

.lg-btn:hover {
  background: var(--lg-btn-bg);
  box-shadow: var(--lg-btn-shadow-hover);
  text-decoration: none;
}

.lg-btn:active,
.lg-btn[aria-pressed="true"],
.lg-btn.is-pressed {
  background: var(--lg-btn-bg-down);
  box-shadow: var(--lg-btn-shadow-down);
}

.lg-btn.is-default {
  box-shadow: var(--lg-btn-shadow-default);
}

.lg-btn.is-default:hover {
  box-shadow: var(--lg-btn-shadow-hover);
}

.lg-btn:focus-visible {
  outline: 1px dotted var(--lg-focus);
  outline-offset: -5px;
  box-shadow: var(--lg-btn-shadow-default);
}

.lg-btn:disabled,
.lg-btn[aria-disabled="true"] {
  color: var(--lg-text-disabled);
  background: var(--lg-face);
  border-color: var(--lg-face-lo);
  box-shadow: none;
  text-shadow: 1px 1px 0 var(--lg-face-hi);
  cursor: not-allowed;
}

.lg-btn--sm {
  min-width: 0;
  min-height: 1.5rem;
  padding: 0.1rem 0.5rem;
  font-size: var(--lg-fs-xs);
}

.lg-btn--block {
  display: flex;
  width: 100%;
}

.lg-btn--tool {
  min-width: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lg-btn--tool:hover {
  background: var(--lg-btn-bg);
  border: var(--lg-btn-border);
  box-shadow: none;
}

/* ---------- Felder ---------- */
.lg-field {
  display: block;
  margin: 0 0 var(--lg-sp-4);
}

.lg-field > label,
.lg-label {
  display: block;
  margin-bottom: var(--lg-sp-2);
}

.lg-hint {
  display: block;
  margin-top: var(--lg-sp-2);
  font-size: var(--lg-fs-xs);
  color: var(--lg-text-muted);
}

.lg-input,
.lg-select,
.lg-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-size: var(--lg-fs-sm);
  color: var(--lg-text);
  background: var(--lg-field);
  border: 1px solid var(--lg-field-border);
  border-radius: var(--lg-field-radius);
  box-shadow: inset 1px 1px 0 var(--lg-face-lo);
}

.lg-textarea {
  min-height: 5rem;
  resize: vertical;
}

.lg-input:focus,
.lg-textarea:focus,
.lg-select:focus {
  outline: 2px solid var(--lg-sel-bg);
  outline-offset: -1px;
}

.lg-input::placeholder,
.lg-textarea::placeholder {
  color: var(--lg-text-muted);
  opacity: 1;
}

.lg-input:disabled,
.lg-select:disabled,
.lg-textarea:disabled {
  color: var(--lg-text-disabled);
  background: var(--lg-face);
  border-color: var(--lg-face-lo);
}

.lg-input[aria-invalid="true"],
.lg-select[aria-invalid="true"],
.lg-textarea[aria-invalid="true"] {
  border-color: var(--lg-err);
  box-shadow: inset 0 0 0 1px var(--lg-err);
}

.lg-error {
  display: block;
  margin-top: var(--lg-sp-2);
  font-size: var(--lg-fs-xs);
  font-weight: 700;
  color: var(--lg-err);
}

[data-theme="contrast"] .lg-error {
  color: var(--lg-err);
}

.lg-select {
  appearance: none;
  padding-right: 1.9rem;
  background-image: linear-gradient(var(--lg-field), var(--lg-field));
  cursor: pointer;
}

.lg-select-wrap {
  position: relative;
  display: block;
}

.lg-select-wrap::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 1.3rem;
  background: var(--lg-btn-bg);
  border: var(--lg-btn-border);
  border-radius: var(--lg-btn-radius);
  pointer-events: none;
}

.lg-select-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0.5rem;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: var(--lg-text);
  pointer-events: none;
}

/* ---------- Kontrollkästchen und Optionsfelder ---------- */
.lg-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 var(--lg-sp-3);
}

.lg-check input {
  appearance: none;
  position: relative;
  flex: none;
  width: var(--lg-box, 14px);
  height: var(--lg-box, 14px);
  margin: 0.15rem 0 0;
  background: var(--lg-field);
  border: 1px solid var(--lg-field-border);
  cursor: pointer;
}

.lg-check input[type="radio"] {
  border-radius: 50%;
}

.lg-check input:checked::after {
  content: "";
  position: absolute;
}

.lg-check input[type="checkbox"]:checked::after {
  left: 28%;
  top: 2%;
  width: 30%;
  height: 60%;
  border: solid var(--lg-check);
  border-width: 0 var(--lg-tick, 2px) var(--lg-tick, 2px) 0;
  transform: rotate(40deg);
}

.lg-check input[type="radio"]:checked::after {
  inset: 25%;
  background: var(--lg-check);
  border-radius: 50%;
}

.lg-check input:disabled {
  background: var(--lg-face);
  border-color: var(--lg-face-lo);
  cursor: not-allowed;
}

.lg-check input:disabled + span {
  color: var(--lg-text-disabled);
}

.lg-check input:focus-visible {
  outline: 2px dotted var(--lg-focus);
  outline-offset: 2px;
}

/* ---------- Gruppenfeld ---------- */
.lg-group {
  min-width: 0;
  margin: 0 0 var(--lg-sp-5);
  padding: var(--lg-sp-3) var(--lg-sp-5) var(--lg-sp-5);
  border: 1px solid var(--lg-face-dk);
  border-radius: var(--lg-radius);
}

.lg-group > legend {
  padding: 0 var(--lg-sp-3);
  color: var(--lg-group-label);
}

/* ---------- Reiter ---------- */
.lg-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0 var(--lg-sp-2);
  list-style: none;
}

.lg-tab {
  position: relative;
  margin: 0;
  padding: 0.3rem 0.95rem;
  font: inherit;
  font-size: var(--lg-fs-sm);
  color: var(--lg-text);
  background: var(--lg-tab-bg);
  border: 1px solid var(--lg-tab-border);
  border-bottom: 0;
  border-radius: var(--lg-radius) var(--lg-radius) 0 0;
  cursor: pointer;
}

.lg-tab:hover {
  box-shadow: inset 0 2px 0 var(--lg-accent);
}

.lg-tab[aria-selected="true"] {
  z-index: 2;
  margin-top: -2px;
  margin-bottom: -1px;
  padding-top: calc(0.3rem + 2px);
  padding-bottom: calc(0.3rem + 1px);
  background: var(--lg-tab-panel);
  box-shadow: inset 0 2px 0 var(--lg-accent);
}

.lg-tab:focus-visible {
  outline-offset: -4px;
}

.lg-tabpanel {
  position: relative;
  z-index: 1;
  padding: var(--lg-sp-5);
  background: var(--lg-tab-panel);
  border: 1px solid var(--lg-tab-border);
}

.lg-tabpanel[hidden] {
  display: none;
}

/* ---------- Tabelle (Detailansicht) ---------- */
.lg-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--lg-field);
  border: 1px solid var(--lg-field-border);
  font-size: var(--lg-fs-sm);
}

.lg-table caption {
  padding: 0 0 var(--lg-sp-2);
  text-align: left;
  color: var(--lg-text-muted);
}

.lg-table th {
  padding: 0.3rem 0.6rem;
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  color: var(--lg-text);
  background: var(--lg-btn-bg);
  border-right: 1px solid var(--lg-face-dk);
  border-bottom: 1px solid var(--lg-face-dk);
}

.lg-table td,
.lg-table tbody th {
  padding: 0.3rem 0.6rem;
  vertical-align: top;
  border-bottom: 1px solid var(--lg-face-lo);
}

.lg-table tbody th {
  background: none;
  border-right: 0;
  white-space: normal;
}

.lg-table--zebra tbody tr:nth-child(even) {
  background: var(--lg-panel);
}

.lg-table tbody tr:hover {
  background: var(--lg-hover-row);
}

.lg-table tr.is-selected,
.lg-table tr[aria-selected="true"] {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
}

.lg-table tr.is-selected a,
.lg-table tr.is-selected code {
  color: inherit;
}

.lg-table .lg-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Fortschritt ---------- */
.lg-progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 18px;
  padding: 2px;
  overflow: hidden;
  background: var(--lg-field);
  border: 1px solid var(--lg-face-dk);
  border-radius: var(--lg-radius);
}

.lg-progress::-webkit-progress-bar {
  background: transparent;
}

.lg-progress::-webkit-progress-value {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 100%),
    repeating-linear-gradient(90deg, var(--lg-progress) 0 8px, transparent 8px 10px);
}

.lg-progress::-moz-progress-bar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 100%),
    repeating-linear-gradient(90deg, var(--lg-progress) 0 8px, transparent 8px 10px);
}

.lg-marquee {
  position: relative;
  height: 18px;
  padding: 2px;
  overflow: hidden;
  background: var(--lg-field);
  border: 1px solid var(--lg-face-dk);
  border-radius: var(--lg-radius);
}

.lg-marquee::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 100%),
    repeating-linear-gradient(90deg, var(--lg-progress) 0 8px, transparent 8px 10px);
  animation: lg-marquee 2.2s linear infinite;
}

@keyframes lg-marquee {
  from {
    left: -40px;
  }
  to {
    left: 100%;
  }
}

/* ---------- Statuslampe ---------- */
.lg-led {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.lg-led::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--lg-led, var(--lg-face-dk));
  border: 1px solid var(--lg-edge);
  border-radius: 50%;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55);
}

.lg-led--ok {
  --lg-led: var(--lg-ok);
}

.lg-led--warn {
  --lg-led: var(--lg-warn);
}

.lg-led--err {
  --lg-led: var(--lg-err);
}

.lg-led--info {
  --lg-led: var(--lg-info);
}

/* ---------- Tooltip und Sprechblase ---------- */
.lg-tip {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: var(--lg-fs-xs);
  color: var(--lg-tip-fg);
  background: var(--lg-tip-bg);
  border: 1px solid var(--lg-tip-border);
}

[data-tip] {
  position: relative;
}

[data-tip]:hover::after,
[data-tip]:focus::after,
[data-tip].is-tip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 4px);
  width: max-content;
  max-width: min(18rem, calc(100vw - 2.5rem));
  padding: 0.15rem 0.4rem;
  font: var(--lg-fs-xs) / 1.4 var(--lg-font-text);
  text-align: left;
  color: var(--lg-tip-fg);
  background: var(--lg-tip-bg);
  border: 1px solid var(--lg-tip-border);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.lg-balloon {
  position: relative;
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  color: var(--lg-tip-fg);
  background: var(--lg-tip-bg);
  border: 1px solid var(--lg-tip-border);
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.lg-balloon::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: var(--lg-tip-bg);
  border-right: 1px solid var(--lg-tip-border);
  border-bottom: 1px solid var(--lg-tip-border);
  transform: rotate(45deg);
}

.lg-balloon a {
  color: inherit;
}

[data-theme="classic"] .lg-balloon,
[data-theme="contrast"] .lg-balloon {
  border-radius: 0;
}

/* ---------- Menüleiste und Aufklappmenü ---------- */
.lg-menubar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 1px 2px;
  list-style: none;
  background: var(--lg-face);
  border-bottom: 1px solid var(--lg-face-dk);
}

.lg-menubar > li {
  position: relative;
  margin: 0;
}

.lg-menubar summary,
.lg-menubar > li > a {
  display: block;
  padding: 0.2rem 0.6rem;
  color: var(--lg-text);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.lg-menubar summary::-webkit-details-marker {
  display: none;
}

.lg-menubar summary:hover,
.lg-menubar details[open] > summary,
.lg-menubar > li > a:hover {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
}

.lg-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  min-width: min(13rem, calc(100vw - 2rem));
  margin: 0;
  padding: 2px;
  list-style: none;
  background: var(--lg-face);
  border: 1px solid var(--lg-edge);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}

.lg-menu li {
  margin: 0;
}

.lg-menu a,
.lg-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.25rem 0.8rem;
  font: inherit;
  text-align: left;
  color: var(--lg-text);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.lg-menu a:hover,
.lg-menu button:hover,
.lg-menu a:focus-visible,
.lg-menu button:focus-visible {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
  outline: 0;
}

.lg-menu hr {
  margin: 2px 0;
}

.lg-menu kbd {
  min-width: 0;
  padding: 0;
  font-size: var(--lg-fs-xs);
  background: none;
  border: 0;
  color: inherit;
}

/* ---------- Liste und Baum ---------- */
.lg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow: auto;
  background: var(--lg-field);
  border: 1px solid var(--lg-field-border);
}

.lg-list li {
  margin: 0;
}

.lg-list a,
.lg-list button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.2rem 0.5rem;
  font: inherit;
  text-align: left;
  color: var(--lg-text);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.lg-list a:hover,
.lg-list button:hover {
  background: var(--lg-hover-row);
}

.lg-list [aria-selected="true"],
.lg-list .is-selected {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
}

.lg-tree,
.lg-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-tree ul {
  margin-left: 0.6rem;
  padding-left: 1rem;
  border-left: 1px dotted var(--lg-face-dk);
}

.lg-tree li {
  margin: 0;
}

.lg-tree summary,
.lg-tree .lg-leaf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  list-style: none;
}

.lg-tree summary::-webkit-details-marker {
  display: none;
}

.lg-tree summary::before {
  content: "+";
  flex: none;
  width: 11px;
  height: 11px;
  font: 10px / 9px var(--lg-font-mono);
  text-align: center;
  color: var(--lg-text);
  background: var(--lg-field);
  border: 1px solid var(--lg-face-dk);
}

.lg-tree details[open] > summary::before {
  content: "−";
}

.lg-tree .lg-leaf {
  padding-left: calc(0.3rem + 15px);
}

.lg-tree summary:hover,
.lg-tree .lg-leaf:hover {
  background: var(--lg-hover-row);
}

.lg-tree [aria-current="true"] {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
}

/* ---------- Seitenwechsel ---------- */
.lg-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-pager li {
  margin: 0;
}

.lg-pager a,
.lg-pager span {
  display: block;
  min-width: 1.9rem;
  padding: 0.2rem 0.5rem;
  text-align: center;
  color: var(--lg-text);
  text-decoration: none;
  background: var(--lg-btn-bg);
  border: var(--lg-btn-border);
  border-radius: var(--lg-btn-radius);
}

.lg-pager a:hover {
  box-shadow: var(--lg-btn-shadow-hover);
  background: var(--lg-btn-bg);
}

.lg-pager [aria-current="page"] {
  background: var(--lg-sel-bg);
  color: var(--lg-sel-fg);
}

.lg-pager .is-disabled {
  color: var(--lg-text-disabled);
  border-color: var(--lg-face-lo);
  background: var(--lg-face);
}

/* ---------- Symbolleiste ---------- */
.lg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: var(--lg-face);
  border-bottom: 1px solid var(--lg-face-dk);
}

.lg-toolbar .lg-sep {
  align-self: stretch;
  width: 0;
  margin: 2px 4px;
  border-left: 1px solid var(--lg-face-dk);
  border-right: 1px solid var(--lg-face-hi);
}

/* ---------- Kennzahl-Kachel (Systemsteuerung) ---------- */
.lg-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 0.5rem;
  text-align: center;
  color: var(--lg-text);
  text-decoration: none;
  border: 1px solid transparent;
}

.lg-tile:visited {
  color: var(--lg-text);
}

.lg-tile:hover {
  background: var(--lg-hover-row);
  border-color: var(--lg-field-border);
}

/* 03 – Container: Fenster, Dialog, Meldung, Aufgabenbereich, Assistent */

/* ---------- Fenster ---------- */
.lg-window {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--lg-text);
  background: var(--lg-face);
  border: var(--lg-win-border-w) solid var(--lg-frame);
  border-radius: var(--lg-radius-win) var(--lg-radius-win) 0 0;
  box-shadow: var(--lg-win-shadow);
}

.lg-window__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  margin: calc(-1 * var(--lg-win-border-w)) calc(-1 * var(--lg-win-border-w)) 0;
  padding: 0 5px 0 8px;
  font: 700 0.9375rem / 1.2 var(--lg-font-head);
  color: var(--lg-title-fg);
  text-shadow: var(--lg-title-shadow);
  background: var(--lg-title-bg);
  border-radius: var(--lg-radius-win) var(--lg-radius-win) 0 0;
}

.lg-window--quiet > .lg-window__title {
  color: var(--lg-title-fg-quiet);
  text-shadow: none;
  background: var(--lg-title-bg-quiet);
}

[data-theme="platinum"] .lg-window__title {
  justify-content: center;
  border-bottom: 1px solid var(--lg-edge);
}

[data-theme="platinum"] .lg-window__text {
  padding: 0 0.6rem;
  background: var(--lg-face);
}

[data-theme="platinum"] .lg-window__ctl {
  display: none;
}

.lg-window__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-window__ctl {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.lg-window__ctl span {
  position: relative;
  width: 21px;
  height: 21px;
  background: linear-gradient(135deg, #5b97f7 0%, #1e5ee0 100%);
  border: 1px solid #fff;
  border-radius: 3px;
}

.lg-window__ctl span:last-child {
  background: linear-gradient(135deg, #e9876a 0%, #c63b1c 100%);
}

.lg-window__ctl span::before,
.lg-window__ctl span::after {
  content: "";
  position: absolute;
  background: #fff;
}

.lg-window__ctl span:nth-child(1)::before {
  left: 4px;
  bottom: 4px;
  width: 8px;
  height: 3px;
}

.lg-window__ctl span:nth-child(2)::before {
  left: 4px;
  top: 4px;
  width: 11px;
  height: 11px;
  background: none;
  border: 1px solid #fff;
  border-top-width: 3px;
}

.lg-window__ctl span:nth-child(3)::before,
.lg-window__ctl span:nth-child(3)::after {
  left: 8px;
  top: 3px;
  width: 2px;
  height: 12px;
  transform: rotate(45deg);
}

.lg-window__ctl span:nth-child(3)::after {
  transform: rotate(-45deg);
}

[data-theme="classic"] .lg-window__ctl span,
[data-theme="classic"] .lg-window__ctl span:last-child,
[data-theme="signature"] .lg-window__ctl span,
[data-theme="signature"] .lg-window__ctl span:last-child {
  background: var(--lg-face);
  border-color: var(--lg-edge);
  border-radius: 0;
  width: 18px;
  height: 16px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

[data-theme="classic"] .lg-window__ctl span::before,
[data-theme="classic"] .lg-window__ctl span::after,
[data-theme="signature"] .lg-window__ctl span::before,
[data-theme="signature"] .lg-window__ctl span::after {
  background: #000;
}

[data-theme="classic"] .lg-window__ctl span:nth-child(2)::before,
[data-theme="signature"] .lg-window__ctl span:nth-child(2)::before {
  background: none;
  border-color: #000;
  width: 9px;
  height: 8px;
  left: 4px;
  top: 3px;
}

[data-theme="classic"] .lg-window__ctl span:nth-child(3)::before,
[data-theme="classic"] .lg-window__ctl span:nth-child(3)::after,
[data-theme="signature"] .lg-window__ctl span:nth-child(3)::before,
[data-theme="signature"] .lg-window__ctl span:nth-child(3)::after {
  left: 8px;
  top: 2px;
  height: 11px;
}

[data-theme="contrast"] .lg-window__ctl span,
[data-theme="contrast"] .lg-window__ctl span:last-child {
  background: #000;
  border: 2px solid #fff;
  border-radius: 0;
}

.lg-window__menu {
  margin: 0;
}

.lg-window__body {
  min-width: 0;
  padding: var(--lg-sp-5);
  flex: 1;
}

.lg-window__body--page {
  background: var(--lg-page);
  border: 1px solid var(--lg-field-border);
  margin: var(--lg-sp-2);
}

.lg-window__body--flush {
  padding: 0;
}

.lg-window__foot {
  padding: var(--lg-sp-3) var(--lg-sp-5) var(--lg-sp-5);
}

.lg-window--flat {
  box-shadow: none;
}

.lg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--lg-sp-3);
}

.lg-actions--start {
  justify-content: flex-start;
}

/* ---------- Meldung ---------- */
.lg-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--lg-sp-5);
}

.lg-msg__icon {
  flex: none;
}

.lg-msg__text > :first-child {
  margin-top: 0;
}

.lg-msg__text > :last-child {
  margin-bottom: 0;
}

.lg-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--lg-sp-3);
  margin: 0 0 var(--lg-sp-5);
  padding: var(--lg-sp-3) var(--lg-sp-4);
  background: var(--lg-panel);
  border: 1px solid var(--lg-face-dk);
  border-left: 5px solid var(--lg-notice, var(--lg-info));
}

.lg-notice--ok {
  --lg-notice: var(--lg-ok);
}

.lg-notice--warn {
  --lg-notice: var(--lg-warn);
}

.lg-notice--err {
  --lg-notice: var(--lg-err);
}

.lg-notice > :last-child {
  margin-bottom: 0;
}

.lg-notice p {
  margin-bottom: 0.4em;
}

/* ---------- Dialog ---------- */
dialog.lg-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  margin: auto;
  overflow: visible;
  color: var(--lg-text);
}

dialog.lg-dialog > .lg-window__body {
  min-height: 0;
  overflow: auto;
}

dialog.lg-dialog:not([open]) {
  display: none;
}

/* Spezifität bewusst höher als „:last-child { margin-bottom: 0 }“ in Containern */
dialog.lg-dialog[open] {
  display: flex;
  margin: auto;
}

dialog.lg-dialog::backdrop {
  background: rgba(30, 40, 70, 0.45);
}

/* ---------- Aufgabenbereich ---------- */
.lg-pane {
  padding: var(--lg-sp-4);
  color: var(--lg-pane-text);
  background: var(--lg-pane-bg);
}

.lg-pane__group {
  margin: 0 0 var(--lg-sp-4);
}

.lg-pane__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-sp-3);
  padding: 0.35rem 0.5rem 0.35rem 0.7rem;
  font: 700 var(--lg-fs-sm) / 1.3 var(--lg-font-head);
  color: var(--lg-pane-head-fg);
  list-style: none;
  cursor: pointer;
  background: var(--lg-pane-head-bg);
  border-radius: var(--lg-radius-win) var(--lg-radius-win) 0 0;
}

.lg-pane__group > summary::-webkit-details-marker {
  display: none;
}

.lg-pane__group > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 3px 0;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg) translate(0, 1px);
}

.lg-pane__group:not([open]) > summary {
  border-radius: var(--lg-radius-win);
}

.lg-pane__group:not([open]) > summary::after {
  margin-bottom: 0;
  transform: rotate(135deg);
}

.lg-pane__body {
  padding: var(--lg-sp-3) var(--lg-sp-4);
  color: var(--lg-pane-text);
  background: var(--lg-pane-body);
  border: 1px solid var(--lg-pane-edge);
  border-top: 0;
}

.lg-pane__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-pane__body li {
  margin: 0;
  padding: 0.12rem 0;
}

.lg-pane__body a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--lg-pane-text);
}

.lg-pane__body a:visited {
  color: var(--lg-pane-text);
}

.lg-pane__body a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

.lg-pane__body p {
  margin: 0 0 0.4em;
  font-size: var(--lg-fs-xs);
}

/* ---------- Assistent ---------- */
.lg-wizard {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  min-height: 17rem;
  background: var(--lg-page);
}

.lg-wizard__side {
  display: flex;
  flex-direction: column;
  gap: var(--lg-sp-4);
  padding: var(--lg-sp-5);
  color: var(--lg-pane-text);
  background: var(--lg-pane-body);
  border-right: 1px solid var(--lg-pane-edge);
}

.lg-wizard__side ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--lg-fs-xs);
}

.lg-wizard__side li {
  padding: 0.15rem 0;
}

.lg-wizard__side li[aria-current="step"] {
  font-weight: 700;
}

.lg-wizard__main {
  padding: var(--lg-sp-5) var(--lg-sp-6);
}

.lg-wizard__main > h3:first-child {
  margin-top: 0;
}

.lg-wizard__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--lg-sp-3);
  padding: var(--lg-sp-3) var(--lg-sp-4);
  background: var(--lg-face);
  border-top: 1px solid var(--lg-face-dk);
}

/* ---------- Statusleiste ---------- */
.lg-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 2px;
  list-style: none;
  font-size: var(--lg-fs-xs);
  background: var(--lg-face);
}

.lg-statusbar > * {
  margin: 0;
  padding: 0.15rem 0.6rem;
  border: 1px solid;
  border-color: var(--lg-face-dk) var(--lg-face-hi) var(--lg-face-hi) var(--lg-face-dk);
}

/* ---------- Beispiel-Rahmen für die Dokumentation ---------- */
.lg-demo {
  margin: 0;
  padding: var(--lg-sp-5);
  background: var(--lg-page);
  border: 1px solid var(--lg-field-border);
  box-shadow: inset 1px 1px 0 var(--lg-face-lo);
}

.lg-demo > :last-child {
  margin-bottom: 0;
}

.lg-demo + .lg-source {
  margin-top: -1px;
}

.lg-source {
  margin: 0 0 var(--lg-sp-6);
  border: 1px solid var(--lg-field-border);
  border-top-color: var(--lg-face-dk);
  background: var(--lg-face);
}

.lg-source > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: var(--lg-fs-xs);
  cursor: pointer;
  list-style: none;
}

.lg-source > summary::-webkit-details-marker {
  display: none;
}

.lg-source > summary::before {
  content: "+";
  width: 11px;
  height: 11px;
  font: 10px / 9px var(--lg-font-mono);
  text-align: center;
  background: var(--lg-field);
  border: 1px solid var(--lg-face-dk);
}

.lg-source[open] > summary::before {
  content: "−";
}

.lg-source > pre {
  margin: 0;
  border-width: 1px 0 0;
  box-shadow: none;
}

.lg-source__copy {
  margin-left: auto;
}

.lg-demo-label {
  margin: var(--lg-sp-6) 0 var(--lg-sp-2);
  font-size: var(--lg-fs-xs);
  color: var(--lg-text-muted);
}

/* 04 – Seitenrahmen: Kopfzeile, Adressleiste, Raster, Fußzeile */

.lg-header {
  background: var(--lg-header-bg);
  border-bottom: 1px solid var(--lg-face-dk);
}

.lg-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lg-sp-3) var(--lg-sp-6);
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--lg-sp-3) var(--lg-sp-5);
}

.lg-header__rule {
  height: 4px;
  background: var(--lg-header-rule);
}

.lg-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--lg-heading);
  text-decoration: none;
}

.lg-brand:hover {
  background: none;
}

.lg-brand img {
  display: block;
  width: auto;
  height: 34px;
}

.lg-nav {
  flex: 1 1 24rem;
  min-width: 0;
}

.lg-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-nav li {
  margin: 0;
}

.lg-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  color: var(--lg-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--lg-btn-radius);
}

.lg-nav a:visited {
  color: var(--lg-text);
}

.lg-nav a:hover {
  background: var(--lg-btn-bg);
  border: var(--lg-btn-border);
  box-shadow: var(--lg-btn-shadow-hover);
}

.lg-nav a[aria-current="page"] {
  font-weight: 700;
  background: var(--lg-btn-bg-down);
  border: var(--lg-btn-border);
  box-shadow: var(--lg-btn-shadow-down);
}

.lg-header__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--lg-fs-sm);
}

.lg-header__tools .lg-select {
  width: auto;
  min-width: 9.5rem;
}

/* Adressleiste */
.lg-address {
  background: var(--lg-face);
  border-bottom: 1px solid var(--lg-face-dk);
}

.lg-address__inner {
  display: flex;
  align-items: center;
  gap: var(--lg-sp-3);
  max-width: 90rem;
  margin: 0 auto;
  padding: 4px var(--lg-sp-5);
  font-size: var(--lg-fs-sm);
}

.lg-address__label {
  color: var(--lg-text-muted);
}

.lg-address__path {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0.15rem 0.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  background: var(--lg-field);
  border: 1px solid var(--lg-field-border);
}

.lg-address__path li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.lg-address__path li + li::before {
  content: "›";
  color: var(--lg-text-muted);
}

/* Raster */
.lg-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  align-items: start;
  max-width: 90rem;
  margin: 0 auto;
  background: var(--lg-page);
}

.lg-layout__side {
  position: sticky;
  top: 0;
  align-self: stretch;
  background: var(--lg-pane-bg);
}

.lg-layout__side .lg-pane {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.lg-main {
  min-width: 0;
  padding: var(--lg-sp-7) var(--lg-sp-7) 3.5rem;
}

.lg-main > :last-child {
  margin-bottom: 0;
}

.lg-main section {
  scroll-margin-top: var(--lg-sp-5);
}

.lg-main > section > h2 {
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--lg-face-lo);
}

.lg-main .lg-lead {
  font-size: var(--lg-fs-lg);
  max-width: 46rem;
}

/* Fußzeile (Statusleiste) */
.lg-footer {
  background: var(--lg-face);
  border-top: 1px solid var(--lg-face-dk);
  box-shadow: inset 0 1px 0 var(--lg-face-hi);
}

.lg-footer__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--lg-sp-3) var(--lg-sp-5);
}

.lg-footer__copy {
  margin: 0 0 var(--lg-sp-3);
  font-size: var(--lg-fs-sm);
}

.lg-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--lg-fs-xs);
}

.lg-footer__links li {
  margin: 0;
}

.lg-footer__links a {
  display: block;
  padding: 0.2rem 0.65rem;
  border: 1px solid;
  border-color: var(--lg-face-dk) var(--lg-face-hi) var(--lg-face-hi) var(--lg-face-dk);
}

@media (max-width: 860px) {
  .lg-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lg-layout__side,
  .lg-layout__side .lg-pane {
    position: static;
    max-height: none;
  }

  .lg-main {
    padding: var(--lg-sp-5) var(--lg-sp-5) 2.5rem;
  }

  .lg-wizard {
    grid-template-columns: minmax(0, 1fr);
  }

  .lg-wizard__side {
    border-right: 0;
    border-bottom: 1px solid var(--lg-pane-edge);
  }

  .lg-address__label {
    display: none;
  }
}

@media (max-width: 520px) {
  .lg-header__inner {
    padding: var(--lg-sp-3);
  }

  .lg-nav a {
    padding: 0.3rem 0.45rem;
  }

  .lg-window__ctl {
    display: none;
  }
}

@media print {
  .lg-header__tools,
  .lg-layout__side,
  .lg-address {
    display: none;
  }

  .lg-layout {
    display: block;
  }
}

/* Windows-Hochkontrast-Modus des Systems respektieren */
@media (forced-colors: active) {
  .lg-btn,
  .lg-input,
  .lg-select,
  .lg-textarea,
  .lg-window,
  .lg-group {
    border: 1px solid CanvasText;
  }

  .lg-progress::-webkit-progress-value {
    background: Highlight;
  }

  .lg-progress::-moz-progress-bar {
    background: Highlight;
  }
}

.lg-address__nav {
  flex: 1;
  min-width: 0;
}

.lg-address .lg-header__tools {
  flex: none;
}

.lg-address .lg-select {
  min-height: 1.5rem;
  min-width: 9rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}


/* 05 – Mobil und Touch
 *
 * Zwei Auslöser, bewusst getrennt:
 *  - (pointer: coarse) oder bis 860 px Breite: große Tippziele (mind. 44 px), Felder mit 16 px
 *    (iOS zoomt sonst beim Antippen hinein).
 *  - bis 860 px / 520 px: Anordnung (Navigation als Streifen, Aufgabenbereich eingeklappt).
 */

html {
  -webkit-tap-highlight-color: transparent;
}

a:active {
  background: var(--lg-hover-row);
}

/* Notch und abgerundete Ecken: Inhalt nie unter die Kante */
.lg-header__inner,
.lg-address__inner,
.lg-footer__inner {
  padding-left: max(var(--lg-sp-5), env(safe-area-inset-left));
  padding-right: max(var(--lg-sp-5), env(safe-area-inset-right));
}

.lg-footer__inner {
  padding-bottom: max(var(--lg-sp-3), env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------ */
/* Tippziele                                                           */
/* ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 860px) {
  .lg-btn {
    min-height: 2.75rem;
    padding: 0.3rem 1.1rem;
    font-size: var(--lg-fs-md);
  }

  .lg-btn--sm {
    min-height: 2.25rem;
    font-size: var(--lg-fs-sm);
  }

  .lg-input,
  .lg-select,
  .lg-textarea {
    min-height: 2.75rem;
    padding: 0.4rem 0.55rem;
    font-size: 1rem;
  }

  .lg-select {
    padding-right: 3rem;
  }

  .lg-select-wrap::after {
    width: 2.4rem;
  }

  .lg-select-wrap::before {
    right: 0.85rem;
    border-width: 5px;
    margin-top: -2px;
  }

  .lg-check {
    --lg-box: 24px;
    --lg-tick: 3px;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin: 0;
  }

  .lg-check input {
    margin: 0;
  }

  .lg-tab {
    min-height: 2.75rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .lg-pane__group > summary {
    min-height: 2.75rem;
  }

  .lg-pane__body li {
    padding: 0;
  }

  .lg-pane__body a {
    align-items: center;
    min-height: 2.5rem;
  }

  .lg-menubar summary,
  .lg-menubar > li > a {
    padding: 0.7rem 1rem;
  }

  .lg-menu a,
  .lg-menu button,
  .lg-list a,
  .lg-list button {
    min-height: 2.75rem;
  }

  .lg-tree summary,
  .lg-tree .lg-leaf {
    min-height: 2.5rem;
  }

  .lg-tree summary::before {
    width: 15px;
    height: 15px;
    line-height: 13px;
    font-size: 13px;
  }

  .lg-pager a,
  .lg-pager span {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .lg-source > summary {
    min-height: 2.75rem;
  }

  .lg-nav a {
    min-height: 2.75rem;
  }

  .lg-brand {
    min-height: 2.75rem;
  }

  .lg-footer__links a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
  }

  .lg-tile {
    min-height: 6.5rem;
  }

  .lg-table th,
  .lg-table td {
    padding: 0.55rem 0.7rem;
  }

  .lg-address .lg-select {
    min-height: 2.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Anordnung bis 860 px                                                */
/* ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .lg-header__inner {
    gap: 0;
    padding-top: var(--lg-sp-3);
    padding-bottom: 0;
  }

  .lg-brand img {
    height: 30px;
  }

  /* Navigation: eine Zeile zum Wischen, wie eine Symbolleiste mit Überlauf */
  .lg-nav {
    flex: 1 1 100%;
    margin: 0 calc(-1 * max(var(--lg-sp-5), env(safe-area-inset-left)));
  }

  .lg-nav ul {
    flex-wrap: nowrap;
    gap: 2px;
    padding: var(--lg-sp-2) max(var(--lg-sp-4), env(safe-area-inset-left)) var(--lg-sp-3);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .lg-nav ul::-webkit-scrollbar {
    display: none;
  }

  .lg-nav a {
    white-space: nowrap;
  }

  .lg-nav.has-more-right ul {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  .lg-nav.has-more-left ul {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
    mask-image: linear-gradient(90deg, transparent, #000 32px);
  }

  .lg-nav.has-more-left.has-more-right ul {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }

  /* Adressleiste: Pfad und Designauswahl in einer Zeile, wenn es passt */
  .lg-address__inner {
    flex-wrap: wrap;
    padding-top: var(--lg-sp-2);
    padding-bottom: var(--lg-sp-2);
  }

  .lg-address__nav {
    flex: 1 1 11rem;
  }

  .lg-address .lg-header__tools {
    flex: 0 1 auto;
  }

  .lg-address .lg-select {
    min-width: 8.5rem;
  }

  /* Aufgabenbereich: kompakt, Gruppen eingeklappt (per Skript), „Details“ entfällt */
  .lg-pane {
    padding: var(--lg-sp-3) max(var(--lg-sp-4), env(safe-area-inset-left)) var(--lg-sp-2);
  }

  .lg-pane__group {
    margin-bottom: var(--lg-sp-3);
  }

  .lg-pane__group--meta {
    display: none;
  }

  .lg-main {
    padding-left: max(var(--lg-sp-5), env(safe-area-inset-left));
    padding-right: max(var(--lg-sp-5), env(safe-area-inset-right));
  }

  .lg-wizard__side {
    flex-direction: row;
    align-items: center;
    gap: var(--lg-sp-4);
  }

  .lg-wizard__side ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--lg-sp-4);
  }
}

/* ------------------------------------------------------------------ */
/* Schmale Telefone bis 520 px                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 520px) {
  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.15rem;
  }

  .lg-main {
    padding-top: var(--lg-sp-5);
  }

  .lg-main .lg-lead {
    font-size: var(--lg-fs-md);
  }

  .lg-address__inner {
    padding-left: max(var(--lg-sp-3), env(safe-area-inset-left));
    padding-right: max(var(--lg-sp-3), env(safe-area-inset-right));
  }

  .lg-header__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .lg-window__body {
    padding: var(--lg-sp-4);
  }

  .lg-demo {
    padding: var(--lg-sp-4);
  }

  .lg-group {
    padding: var(--lg-sp-2) var(--lg-sp-4) var(--lg-sp-4);
  }

  .lg-actions .lg-btn,
  .lg-wizard__bar .lg-btn {
    flex: 1 1 auto;
  }

  .lg-wizard__main {
    padding: var(--lg-sp-4);
  }

  .lg-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg-footer__links a {
    height: 100%;
  }

  .lg-msg {
    gap: var(--lg-sp-4);
  }

  .lg-msg__icon.lg-icon--xl {
    width: 32px;
    height: 32px;
  }

  .lg-balloon::after {
    left: 16px;
  }
}