/* stromfee-fluent.css — gemeinsame Gestaltung aller Stromfee-Lernsysteme und DMS (Fluent 2, Teal).
   Quelle: git.neuraxom.de/neuraxom/ai-workplace-design, Stand 30a147d, building-blocks/src/BuildingBlocks.Ui/wwwroot/css/:
   token.css + bausteine.css + rahmen.css, UNVERÄNDERT hintereinander. Markenfarbe Teal (brand-80 #0f5a6e) für alle (Holger, 20.10.2026).
   Hell/Dunkel folgt der Geräteeinstellung; data-theme="light|dark" am html-Element erzwingt eins.
   NICHT von Hand ändern: neu erzeugen mit bauen.py. */

/* ===== token.css ===== */
/* Design tokens of the interfaces (Fluent 2), shared by the device and the console.
   Names follow the Fluent 2 token families (neutral, brand, stroke, shadow, radius, spacing,
   duration, curve). The brand ramp brand-10 … brand-160 and the brand roles come from marke.css
   (BrandRamp, generated from Branding:PrimaryColour); the values here are the defaults of the
   petrol of the bytesatwork. Dark values apply to the system setting unless light was chosen,
   and always to data-theme="dark" on the html element (set by darstellung.js before painting). */

:root {
  color-scheme: light;
  /* Brand defaults (petrol); marke.css overrides them with the configured ramp. */
  --brand-10: #001820;
  --brand-30: #00303c;
  --brand-40: #003a47;
  --brand-70: #004f61;
  --brand-80: #0f5a6e;
  --brand-110: #4b98ad;
  --brand-120: #6aafc3;
  --brand-140: #a6d3e0;
  --brand-150: #c6e3ec;
  --brand-160: #e3f2f6;

  /* Neutral (light) */
  --neutral-bg-1: #ffffff;
  --neutral-bg-2: #fafafa;
  --neutral-bg-3: #f5f5f5;
  --neutral-bg-4: #f0f0f0;
  --neutral-bg-hover: #f5f5f5;
  --neutral-bg-pressed: #e0e0e0;
  --neutral-bg-selected: #ebebeb;
  --neutral-fg-1: #242424;
  --neutral-fg-2: #424242;
  --neutral-fg-3: #616161;
  --neutral-fg-disabled: #bdbdbd;
  --neutral-stroke-1: #d1d1d1;
  --neutral-stroke-2: #e0e0e0;
  --neutral-stroke-accessible: #616161;

  --brand-bg: var(--brand-80);
  --brand-bg-hover: var(--brand-70);
  --brand-bg-pressed: var(--brand-40);
  --brand-fg-on: #ffffff;
  --brand-fg-1: var(--brand-80);
  --brand-fg-link: var(--brand-70);
  --brand-bg-subtle: var(--brand-160);
  --brand-stroke: var(--brand-80);

  /* Status (Fluent 2 shared colours, AA on bg-1) */
  --status-danger-fg: #b10e1c;
  --status-danger-bg: #fdf3f4;
  --status-warning-fg: #8a3707;
  --status-warning-bg: #fff9f5;
  --status-success-fg: #0e700e;
  --status-success-bg: #f1faf1;

  /* Surfaces of the device chat. The main surface carries a large, soft sky gradient with some
     depth; the brand colour only tints it (one blob in brand-150). Text on it stays AA: the
     darkest point (#b8d4f0) still gives fg-1 10 : 1 and fg-2 6.6 : 1. */
  --rail-bg: #f3efeb;
  --rail-hover: #e9e3dd;
  --rail-selected: #e1d9d1;
  --rail-line: #ddd5cd;
  /* Frame of the device and the console (title bar, navigation rail, second column, content layer):
     a calm, slightly tinted window ground with a soft pastel wash at the top, the content on a light
     rounded layer. Text stays on the ground or on the layer, never on the wash alone: the darkest
     point of the wash (#dfe8f5) still gives fg-2 8.9 : 1. */
  --mica-bg: #f3f3f3;
  --mica-gradient:
    radial-gradient(60% 260px at 6% 0%, rgba(196, 220, 246, 0.9) 0%, rgba(196, 220, 246, 0) 100%),
    radial-gradient(48% 240px at 52% 0%, rgba(228, 220, 247, 0.8) 0%, rgba(228, 220, 247, 0) 100%),
    radial-gradient(40% 220px at 100% 0%, rgba(250, 226, 212, 0.75) 0%, rgba(250, 226, 212, 0) 100%),
    linear-gradient(180deg, #eef2f8 0%, #f3f3f3 360px);
  --layer-bg: #ffffff;
  --layer-stroke: rgba(0, 0, 0, 0.07);
  --layer-shadow: 0 0 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --nav-fg: #424242;
  --nav-hover: rgba(0, 0, 0, 0.04);
  --nav-pressed: rgba(0, 0, 0, 0.07);
  --nav-selected: rgba(255, 255, 255, 0.85);
  --nav-selected-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
  --nav-line: rgba(0, 0, 0, 0.09);
  --search-bg: rgba(255, 255, 255, 0.78);
  --search-bg-hover: #ffffff;
  --search-stroke: rgba(0, 0, 0, 0.1);
  --search-stroke-bottom: rgba(0, 0, 0, 0.32);
  --avatar-bg: var(--brand-140);
  --avatar-fg: var(--brand-10);
  --neutral-bg-hover-on-3: #ebebeb;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-fallback: rgba(255, 255, 255, 0.88);
  --glass-stroke: rgba(255, 255, 255, 0.9);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  --hero-fg: var(--neutral-fg-1);
  --hero-gradient:
    radial-gradient(48% 42% at 14% 8%, #b8d4f0 0%, rgba(184, 212, 240, 0) 72%),
    radial-gradient(40% 38% at 86% 14%, var(--brand-150) 0%, rgba(220, 236, 240, 0) 72%),
    radial-gradient(55% 45% at 72% 100%, #f6dccb 0%, rgba(246, 220, 203, 0) 70%),
    radial-gradient(45% 40% at 6% 96%, #d8d3f3 0%, rgba(216, 211, 243, 0) 70%),
    linear-gradient(170deg, #dbe8f6 0%, #e9eef7 46%, #f3ede9 100%);

  /* Symbol surfaces of the console tiles: fixed palette, white symbol on every colour >= 4.5 : 1. */
  --tile-teal: #0f6b6e;
  --tile-blue: #2457c5;
  --tile-violet: #6b47b8;
  --tile-magenta: #a8336e;
  --tile-orange: #a84a0c;
  --tile-green: #2d7a32;
  --tile-cyan: #0b6788;
  --tile-indigo: #3e4fb0;

  /* Expert (Fachkopf) markers: always next to the written name, never alone */
  --fk-steuern: #1e6b4a;
  --fk-energie: #8a5a00;
  --fk-recht: #7a2e2e;
  --fk-technik: #24508f;
  --fk-personal: #6a3d8f;

  /* Typography: system font only, nothing shipped */
  --font-base: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-base);
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Type ramp (Fluent 2 web) size / line height */
  --caption-2: 10px; --caption-2-lh: 14px;
  --caption-1: 12px; --caption-1-lh: 16px;
  --body-1: 14px;    --body-1-lh: 20px;
  --body-2: 16px;    --body-2-lh: 22px;
  --subtitle-2: 16px; --subtitle-2-lh: 22px;
  --subtitle-1: 20px; --subtitle-1-lh: 28px;
  --title-3: 24px;   --title-3-lh: 32px;
  --title-2: 28px;   --title-2-lh: 36px;
  --title-1: 32px;   --title-1-lh: 40px;
  --large-title: 40px; --large-title-lh: 52px;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Radius: Fluent 2 base plus two larger steps for the chat surfaces */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-3xl: 24px;
  --radius-circular: 10000px;

  /* Elevation */
  --shadow-2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow-8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow-16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow-28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);

  /* Spacing */
  --s-xxs: 2px; --s-xs: 4px; --s-snudge: 6px; --s-s: 8px; --s-mnudge: 10px;
  --s-m: 12px; --s-l: 16px; --s-xl: 20px; --s-xxl: 24px; --s-xxxl: 32px;

  /* Motion */
  --dur-faster: 100ms; --dur-fast: 150ms; --dur-normal: 200ms; --dur-gentle: 250ms;
  --curve-easy: cubic-bezier(0.33, 0, 0.67, 1);
  --curve-decelerate: cubic-bezier(0, 0, 0, 1);
  --curve-accelerate: cubic-bezier(1, 0, 1, 1);

  --focus-outer: var(--neutral-fg-1);
}

/* Dark: same token names, other values. Guarded so an explicit light choice wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --neutral-bg-1: #292929;
    --neutral-bg-2: #1f1f1f;
    --neutral-bg-3: #141414;
    --neutral-bg-4: #0a0a0a;
    --neutral-bg-hover: #3d3d3d;
    --neutral-bg-pressed: #1f1f1f;
    --neutral-bg-selected: #383838;
    --neutral-fg-1: #ffffff;
    --neutral-fg-2: #d6d6d6;
    --neutral-fg-3: #adadad;
    --neutral-fg-disabled: #5c5c5c;
    --neutral-stroke-1: #666666;
    --neutral-stroke-2: #525252;
    --neutral-stroke-accessible: #adadad;
    --brand-bg: var(--brand-70);
    --brand-bg-hover: var(--brand-80);
    --brand-bg-pressed: var(--brand-40);
    --brand-fg-1: var(--brand-110);
    --brand-fg-link: var(--brand-120);
    --brand-bg-subtle: #16313a;
    --brand-stroke: var(--brand-110);
    --status-danger-fg: #e37d80;
    --status-danger-bg: #3b0509;
    --status-warning-fg: #f9a26c;
    --status-warning-bg: #411200;
    --status-success-fg: #54b054;
    --status-success-bg: #052505;
    --rail-bg: #1c1a19;
    --rail-hover: #2a2725;
    --rail-selected: #36312d;
    --rail-line: #3a3532;
    --mica-bg: #202020;
    --mica-gradient:
      radial-gradient(60% 260px at 6% 0%, rgba(38, 62, 99, 0.7) 0%, rgba(38, 62, 99, 0) 100%),
      radial-gradient(48% 240px at 52% 0%, rgba(58, 46, 92, 0.55) 0%, rgba(58, 46, 92, 0) 100%),
      radial-gradient(40% 220px at 100% 0%, rgba(84, 52, 44, 0.45) 0%, rgba(84, 52, 44, 0) 100%),
      linear-gradient(180deg, #1d2129 0%, #202020 360px);
    --layer-bg: #292929;
    --layer-stroke: rgba(255, 255, 255, 0.07);
    --layer-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.24);
    --nav-fg: #d6d6d6;
    --nav-hover: rgba(255, 255, 255, 0.06);
    --nav-pressed: rgba(255, 255, 255, 0.04);
    --nav-selected: rgba(255, 255, 255, 0.09);
    --nav-selected-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3);
    --nav-line: rgba(255, 255, 255, 0.09);
    --search-bg: rgba(255, 255, 255, 0.06);
    --search-bg-hover: rgba(255, 255, 255, 0.09);
    --search-stroke: rgba(255, 255, 255, 0.08);
    --search-stroke-bottom: rgba(255, 255, 255, 0.4);
    --avatar-bg: #1f4f5c;
    --avatar-fg: #dcecf0;
    --neutral-bg-hover-on-3: #2e2e2e;
    --glass-bg: rgba(38, 42, 52, 0.52);
    --glass-bg-fallback: rgba(34, 36, 42, 0.92);
    --glass-stroke: rgba(255, 255, 255, 0.12);
    --glass-strong: rgba(32, 35, 44, 0.9);
    --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --hero-gradient:
      radial-gradient(48% 42% at 14% 8%, #1d3a5f 0%, rgba(29, 58, 95, 0) 72%),
      radial-gradient(40% 38% at 86% 14%, #123c46 0%, rgba(18, 60, 70, 0) 72%),
      radial-gradient(55% 45% at 72% 100%, #3a2a2c 0%, rgba(58, 42, 44, 0) 70%),
      radial-gradient(45% 40% at 6% 96%, #2a2547 0%, rgba(42, 37, 71, 0) 70%),
      linear-gradient(170deg, #111a29 0%, #121722 46%, #16141a 100%);
    --fk-steuern: #5fc29a;
    --fk-energie: #e3b35b;
    --fk-recht: #f08f8f;
    --fk-technik: #8fb4f0;
    --fk-personal: #c4a1e6;
    --shadow-4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
    --shadow-8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
    --shadow-16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
    --focus-outer: #ffffff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --neutral-bg-1: #292929;
  --neutral-bg-2: #1f1f1f;
  --neutral-bg-3: #141414;
  --neutral-bg-4: #0a0a0a;
  --neutral-bg-hover: #3d3d3d;
  --neutral-bg-pressed: #1f1f1f;
  --neutral-bg-selected: #383838;
  --neutral-fg-1: #ffffff;
  --neutral-fg-2: #d6d6d6;
  --neutral-fg-3: #adadad;
  --neutral-fg-disabled: #5c5c5c;
  --neutral-stroke-1: #666666;
  --neutral-stroke-2: #525252;
  --neutral-stroke-accessible: #adadad;
  --brand-bg: var(--brand-70);
  --brand-bg-hover: var(--brand-80);
  --brand-bg-pressed: var(--brand-40);
  --brand-fg-1: var(--brand-110);
  --brand-fg-link: var(--brand-120);
  --brand-bg-subtle: #16313a;
  --brand-stroke: var(--brand-110);
  --status-danger-fg: #e37d80;
  --status-danger-bg: #3b0509;
  --status-warning-fg: #f9a26c;
  --status-warning-bg: #411200;
  --status-success-fg: #54b054;
  --status-success-bg: #052505;
  --rail-bg: #1c1a19;
  --rail-hover: #2a2725;
  --rail-selected: #36312d;
  --rail-line: #3a3532;
  --mica-bg: #202020;
  --mica-gradient:
    radial-gradient(60% 260px at 6% 0%, rgba(38, 62, 99, 0.7) 0%, rgba(38, 62, 99, 0) 100%),
    radial-gradient(48% 240px at 52% 0%, rgba(58, 46, 92, 0.55) 0%, rgba(58, 46, 92, 0) 100%),
    radial-gradient(40% 220px at 100% 0%, rgba(84, 52, 44, 0.45) 0%, rgba(84, 52, 44, 0) 100%),
    linear-gradient(180deg, #1d2129 0%, #202020 360px);
  --layer-bg: #292929;
  --layer-stroke: rgba(255, 255, 255, 0.07);
  --layer-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.24);
  --nav-fg: #d6d6d6;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-pressed: rgba(255, 255, 255, 0.04);
  --nav-selected: rgba(255, 255, 255, 0.09);
  --nav-selected-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3);
  --nav-line: rgba(255, 255, 255, 0.09);
  --search-bg: rgba(255, 255, 255, 0.06);
  --search-bg-hover: rgba(255, 255, 255, 0.09);
  --search-stroke: rgba(255, 255, 255, 0.08);
  --search-stroke-bottom: rgba(255, 255, 255, 0.4);
  --avatar-bg: #1f4f5c;
  --avatar-fg: #dcecf0;
  --neutral-bg-hover-on-3: #2e2e2e;
  --glass-bg: rgba(38, 42, 52, 0.52);
  --glass-bg-fallback: rgba(34, 36, 42, 0.92);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-strong: rgba(32, 35, 44, 0.9);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --hero-gradient:
    radial-gradient(48% 42% at 14% 8%, #1d3a5f 0%, rgba(29, 58, 95, 0) 72%),
    radial-gradient(40% 38% at 86% 14%, #123c46 0%, rgba(18, 60, 70, 0) 72%),
    radial-gradient(55% 45% at 72% 100%, #3a2a2c 0%, rgba(58, 42, 44, 0) 70%),
    radial-gradient(45% 40% at 6% 96%, #2a2547 0%, rgba(42, 37, 71, 0) 70%),
    linear-gradient(170deg, #111a29 0%, #121722 46%, #16141a 100%);
  --fk-steuern: #5fc29a;
  --fk-energie: #e3b35b;
  --fk-recht: #f08f8f;
  --fk-technik: #8fb4f0;
  --fk-personal: #c4a1e6;
  --shadow-4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
  --shadow-8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
  --shadow-16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
  --focus-outer: #ffffff;
}

/* Fluent UI Blazor reads its colours from these variables; they follow the tokens above, so the
   web components carry the same brand ramp and the same font as the own markup. */
body {
  --colorBrandBackground: var(--brand-bg);
  --colorBrandBackgroundHover: var(--brand-bg-hover);
  --colorBrandBackgroundPressed: var(--brand-bg-pressed);
  --colorBrandBackgroundSelected: var(--brand-bg-hover);
  --colorBrandBackgroundStatic: var(--brand-80);
  --colorBrandBackground2: var(--brand-bg-subtle);
  --colorBrandBackground2Hover: var(--brand-bg-subtle);
  --colorBrandBackground2Pressed: var(--brand-bg-subtle);
  --colorBrandForeground1: var(--brand-fg-1);
  --colorBrandForeground2: var(--brand-fg-link);
  --colorBrandForegroundLink: var(--brand-fg-link);
  --colorBrandForegroundLinkHover: var(--brand-fg-1);
  --colorBrandForegroundLinkPressed: var(--brand-fg-1);
  --colorBrandForegroundLinkSelected: var(--brand-fg-link);
  --colorBrandForegroundInverted: var(--brand-fg-on);
  --colorBrandStroke1: var(--brand-stroke);
  --colorBrandStroke2: var(--brand-bg-subtle);
  --colorCompoundBrandBackground: var(--brand-bg);
  --colorCompoundBrandBackgroundHover: var(--brand-bg-hover);
  --colorCompoundBrandBackgroundPressed: var(--brand-bg-pressed);
  --colorCompoundBrandForeground1: var(--brand-fg-1);
  --colorCompoundBrandForeground1Hover: var(--brand-fg-1);
  --colorCompoundBrandForeground1Pressed: var(--brand-fg-1);
  --colorCompoundBrandStroke: var(--brand-stroke);
  --colorCompoundBrandStrokeHover: var(--brand-stroke);
  --colorCompoundBrandStrokePressed: var(--brand-stroke);
  --colorNeutralForegroundOnBrand: var(--brand-fg-on);
  --fontFamilyBase: var(--font-base);
  --fontFamilyMonospace: var(--font-mono);
}

/* Base: system font only (nothing shipped), Fluent focus ring, no motion when reduced. */
body {
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 1px;
}
.unsichtbar {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fl-symbol { width: 20px; height: 20px; flex: none; fill: currentColor; }

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

/* ===== bausteine.css ===== */
/* Components of the building block (chip, menu button, empty state, question) and the Fluent 2 button for
   native buttons and links. Colours only through the tokens of token.css. */

/* Button (Fluent 2: primary, secondary, subtle; 32 px, radius 4 px) on native button and a */
.fl-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 12px; box-sizing: border-box;
  border-radius: var(--radius-md); border: 1px solid var(--neutral-stroke-1);
  background: var(--neutral-bg-1); color: var(--neutral-fg-1);
  font: inherit; font-weight: var(--weight-semibold); line-height: var(--body-1-lh);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-faster) var(--curve-easy), border-color var(--dur-faster) var(--curve-easy);
}
.fl-knopf:hover { background: var(--neutral-bg-hover); border-color: var(--neutral-stroke-1); }
.fl-knopf:active { background: var(--neutral-bg-pressed); }
.fl-knopf-primaer { background: var(--brand-bg); border-color: transparent; color: var(--brand-fg-on); }
.fl-knopf-primaer:hover { background: var(--brand-bg-hover); }
.fl-knopf-primaer:active { background: var(--brand-bg-pressed); }
.fl-knopf-dezent { background: transparent; border-color: transparent; }
.fl-knopf-dezent:hover { background: var(--neutral-bg-hover); border-color: transparent; }
.fl-knopf-symbol { width: 32px; padding: 0; }
.fl-knopf:disabled, .fl-knopf[aria-disabled="true"] {
  background: var(--neutral-bg-3); border-color: var(--neutral-stroke-2); color: var(--neutral-fg-disabled); cursor: not-allowed;
}
/* Danger (delete, lock): red text; hovered on the danger ground, because red on the neutral hover of the
   dark theme stays below AA (DangerButtonTests). */
.fl-knopf-gefahr { color: var(--status-danger-fg); }
.fl-knopf-gefahr:not(.fl-knopf-dezent) { border-color: var(--status-danger-fg); }
.fl-knopf-gefahr:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.fl-knopf-gefahr:not(.fl-knopf-dezent):hover { border-color: var(--status-danger-fg); }
.fl-knopf:disabled.fl-knopf-gefahr, .fl-knopf[aria-disabled="true"].fl-knopf-gefahr {
  background: var(--neutral-bg-3); color: var(--neutral-fg-disabled); border-color: var(--neutral-stroke-2);
}

/* Native file choice (class dateifeld): the button of the browser looks like a Fluent button (fl-knopf), the
   chosen name beside it. */
input[type="file"].dateifeld { max-width: 100%; color: var(--neutral-fg-2); font: inherit; }
input[type="file"].dateifeld::file-selector-button {
  min-height: 32px; margin-right: 12px; padding: 5px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--neutral-stroke-1);
  background: var(--neutral-bg-1); color: var(--neutral-fg-1);
  font: inherit; font-weight: var(--weight-semibold); cursor: pointer;
}
input[type="file"].dateifeld:hover::file-selector-button { background: var(--neutral-bg-hover); }
input[type="file"].dateifeld:disabled::file-selector-button {
  background: var(--neutral-bg-3); border-color: var(--neutral-stroke-2); color: var(--neutral-fg-disabled); cursor: not-allowed;
}

/* Chip: round, glass on the chat surface, brand tint when chosen */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px;
  border-radius: var(--radius-circular); border: 1px solid var(--glass-stroke);
  background: var(--glass-bg); box-shadow: var(--glass-shine);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--neutral-fg-1); font: inherit; cursor: pointer;
  transition: background var(--dur-faster) var(--curve-easy), border-color var(--dur-faster) var(--curve-easy);
}
.chip:hover { background: var(--glass-strong); }
.chip-gewaehlt { border-color: var(--brand-stroke); background: var(--brand-bg-subtle); font-weight: var(--weight-semibold); }
.chip-gewaehlt .chip-haken { color: var(--brand-fg-1); }
.chip-marke { width: 8px; height: 8px; border-radius: 2px; background: var(--marke); flex: none; }
.chip:disabled { color: var(--neutral-fg-disabled); cursor: not-allowed; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chip { background: var(--glass-bg-fallback); }
}

/* Menu button and menu (Fluent 2 menu: radius 8 px, shadow 16, entries 32 px) */
.menueknopf { position: relative; display: inline-flex; }
.menueknopf-oeffner {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 32px; min-height: 32px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--neutral-fg-2); font: inherit; cursor: pointer;
}
.menueknopf-oeffner:hover, .menueknopf-oeffner[aria-expanded="true"] { background: var(--neutral-bg-hover); color: var(--neutral-fg-1); }
.menueknopf-hintergrund { position: fixed; inset: 0; z-index: 40; }
.menueknopf-liste {
  position: absolute; z-index: 41; min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  padding: 4px; border-radius: var(--radius-xl); background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2); box-shadow: var(--shadow-16);
  color: var(--neutral-fg-1);
}
.menueknopf-belowend { top: calc(100% + 4px); right: 0; }
.menueknopf-belowstart { top: calc(100% + 4px); left: 0; }
.menueknopf-abovestart { bottom: calc(100% + 4px); left: 0; }
.menueknopf-aboveend { bottom: calc(100% + 4px); right: 0; }
.menueknopf-titel { margin: 6px 8px 4px; font-size: var(--caption-1); line-height: var(--caption-1-lh); color: var(--neutral-fg-2); font-weight: var(--weight-semibold); }
.menueknopf-eintrag {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px;
  border: 0; border-radius: var(--radius-md); background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.menueknopf-eintrag:hover, .menueknopf-eintrag:focus-visible { background: var(--neutral-bg-hover); }
.menueknopf-eintrag[aria-disabled="true"] { color: var(--neutral-fg-disabled); cursor: not-allowed; }
.menueknopf-eintrag[aria-disabled="true"]:hover { background: transparent; }
.menueknopf-haken { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--brand-fg-1); }
.menueknopf-text { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .menueknopf-liste { animation: menue-auf var(--dur-normal) var(--curve-decelerate); }
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Empty state (unknown address, error, maintenance, missing permission) */
.leerzustand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 560px; margin: 10vh auto 32px; padding: 0 16px;
}
.leerzustand-symbol {
  display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 20px;
  border-radius: 28px; background: var(--glass-strong); box-shadow: var(--glass-shine), var(--shadow-8);
  color: var(--brand-fg-1);
}
.leerzustand-symbol svg { width: 48px !important; height: 48px; }
.leerzustand h1 {
  margin: 0 0 8px; font-family: var(--font-display);
  font-size: var(--title-2); line-height: var(--title-2-lh); font-weight: var(--weight-semibold);
}
.leerzustand-text { color: var(--neutral-fg-2); font-size: var(--body-2); line-height: var(--body-2-lh); }
.leerzustand-text p { margin: 0 0 8px; }
.leerzustand-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }

/* Question before a consequential action (ConfirmDialog, also the revoke dialog of the console) */
.rueckfrage-text { margin: 0 0 12px; }

/* Loading sphere (LoadingOrb): brand colour, sky blue, violet and a touch of peach as on the sky
   gradient; breathes (scale) and lets its colours wander (rotation of the inner gradient). Only
   transform and opacity move; fixed sizes, so nothing jumps. Still under reduced motion. */
.ladekugel {
  --kugel: 40px;
  --kugel-blau: #5b9bf0;
  --kugel-violett: #9b7cf0;
  --kugel-pfirsich: #f3b7a2;
  --kugel-glanz: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  vertical-align: middle;
  color: var(--neutral-fg-2);
}

.ladekugel-klein { --kugel: 18px; gap: 0; }
.ladekugel-mittel { --kugel: 40px; }
.ladekugel-gross { --kugel: 96px; gap: 20px; }

.ladekugel-kugel {
  position: relative;
  display: block;
  flex: none;
  width: var(--kugel);
  height: var(--kugel);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: var(--kugel-blau);
  box-shadow: 0 0 calc(var(--kugel) * 0.45) calc(var(--kugel) * -0.05) color-mix(in srgb, var(--kugel-violett) 55%, transparent),
    0 0 calc(var(--kugel) * 0.2) color-mix(in srgb, var(--brand-bg) 40%, transparent);
  animation: ladekugel-atmen 2.6s var(--curve-easy) infinite;
}

/* The colours: a conic gradient larger than the sphere, softly blurred, turning slowly. */
.ladekugel-kugel::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, var(--brand-bg), var(--kugel-blau), var(--kugel-violett), var(--kugel-pfirsich), var(--brand-bg));
  filter: blur(calc(var(--kugel) * 0.12));
  animation: ladekugel-wandern 7s linear infinite;
}

/* Light from the top left and a soft shade at the bottom right make it a sphere. */
.ladekugel-kugel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, var(--kugel-glanz) 0, rgba(255, 255, 255, 0.35) 18%, transparent 46%),
    radial-gradient(circle at 70% 78%, rgba(20, 24, 60, 0.28) 0, transparent 55%);
}

.ladekugel-text {
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
}

.ladekugel-gross .ladekugel-text {
  font-size: var(--body-2);
  line-height: var(--body-2-lh);
}

/* A page that loads: the sphere in the middle of the free space. */
.ladekugel-flaeche {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 32px 16px;
}

/* Inside a button before the text. */
.fl-knopf .ladekugel-klein,
fluent-button .ladekugel-klein {
  margin-inline-end: 2px;
}

@keyframes ladekugel-atmen {
  0%, 100% { transform: scale(0.92); opacity: 0.88; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes ladekugel-wandern {
  to { transform: rotate(360deg); }
}

.ladekugel-ruhig .ladekugel-kugel,
.ladekugel-ruhig .ladekugel-kugel::before {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ladekugel-kugel,
  .ladekugel-kugel::before {
    animation: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ladekugel {
    --kugel-blau: #6aa6f8;
    --kugel-violett: #a98cf6;
    --kugel-glanz: rgba(255, 255, 255, 0.7);
  }
}

:root[data-theme="dark"] .ladekugel {
  --kugel-blau: #6aa6f8;
  --kugel-violett: #a98cf6;
  --kugel-glanz: rgba(255, 255, 255, 0.7);
}

/* ===== rahmen.css ===== */
/* Frame of the device and the console (AppShell, SideNav, ProfileButton) and the collapsible sections
   (CollapsibleSection), docs/design/gestaltung.md, Rahmen. The calm window ground with a soft pastel wash
   at the top carries the title bar over the whole width (app symbol and name, search in the middle,
   actions and profile on the right) and the narrow navigation rail on the left (symbol above a short
   name, the current entry as a light raised tile with a short accent line); an optional second column
   stands beside the rail; the content lies on a light layer with a rounded corner. Colours only through
   the tokens of token.css. The state of the side panel is data-leiste on the frame; before the frame
   runs, darstellung.js has set it on the html element. */

html,
body {
  background: var(--mica-bg);
  color: var(--neutral-fg-1);
}

.sprungmarke {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 3000;
  padding: 8px 12px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  border: 1px solid var(--neutral-stroke-1);
  border-radius: var(--radius-md);
}

.sprungmarke:focus {
  top: 8px;
}

.geruest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  grid-template-areas:
    "titel titel"
    "leiste haupt";
  height: 100dvh;
  background-color: var(--mica-bg);
  background-image: var(--mica-gradient);
  background-repeat: no-repeat;
  color: var(--neutral-fg-1);
}

/* Title bar over the whole width: left the button of the side panel, the app symbol and the name; in the
   middle the search (only where the product has one); right the actions and the profile. */
.titelleiste {
  grid-area: titel;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 48px;
  padding: 0 12px 0 8px;
  box-sizing: border-box;
}

.titel-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
}

.titel-mitte {
  display: flex;
  justify-content: center;
  flex: 0 1 560px;
  min-width: 0;
}

.titel-rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1 1 0;
}

.titel-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 6px;
}

.app-zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(140deg, var(--brand-bg), var(--brand-bg-pressed));
  color: var(--brand-fg-on);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.titelleiste .wortmarke {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--neutral-fg-1);
  text-decoration: none;
}

.kopf-knopf,
.leiste-schliessen {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--neutral-fg-2);
  cursor: pointer;
}

.kopf-knopf svg {
  fill: currentColor;
}

.geruest .kopf-knopf:hover,
.geruest .kopf-knopf[aria-expanded="true"] {
  background: var(--nav-hover);
  color: var(--neutral-fg-1);
}

.geruest .kopf-knopf:active {
  background: var(--nav-pressed);
}

/* The button of the side panel says its state through aria-expanded and its tooltip, not by a filled look. */
.geruest .leiste-schalter[aria-expanded="true"] {
  background: transparent;
  color: var(--neutral-fg-2);
}

.geruest .leiste-schalter:hover {
  background: var(--nav-hover);
  color: var(--neutral-fg-1);
}

.leiste-oeffnen,
.leiste-kopf,
.leiste-schleier {
  display: none;
}

/* Profile at the right end of the title bar: round picture, a small card with name, role and actions. */
.profil-menue {
  position: relative;
  flex: none;
}

.profil-oeffner {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.profil-oeffner:hover .profil-bild,
.profil-oeffner[aria-expanded="true"] .profil-bild {
  box-shadow: 0 0 0 2px var(--nav-line);
}

.profil-bild {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: var(--caption-1);
  line-height: 1;
  font-weight: var(--weight-semibold);
}

.profil-bild-gross {
  width: 48px;
  height: 48px;
  font-size: var(--subtitle-2);
}

.profil-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.profil-karte {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--radius-xl);
  background: var(--neutral-bg-1);
  box-shadow: var(--shadow-16);
  color: var(--neutral-fg-1);
}

.profil-karte[hidden] {
  display: none;
}

.profil-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profil-name {
  flex: 1 1 auto;
  min-width: 0;
}

.profil-name .benutzer {
  display: block;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--body-1);
  font-weight: var(--weight-semibold);
  color: var(--neutral-fg-1);
}

.profil-rolle {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--caption-1);
  line-height: var(--caption-1-lh);
  color: var(--neutral-fg-2);
}

.profil-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.profil .abmelden {
  margin: 0;
}

.profil-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-stroke-2);
  font-size: var(--caption-1);
  line-height: var(--caption-1-lh);
  color: var(--neutral-fg-2);
}

.profil-fuss p {
  margin: 0;
}

.profil-fuss a {
  color: var(--neutral-fg-2);
}

/* Side panel: the navigation rail and, where the product has one, the second column, on the window ground. */
.seitenleiste {
  grid-area: leiste;
  display: flex;
  min-width: 0;
  min-height: 0;
  color: var(--neutral-fg-1);
}

/* The focus ring of entries that fill the width must not be cut by the scrolling list. */
.seitenleiste :focus-visible {
  outline-offset: -2px;
}

.schiene {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 88px;
  min-height: 0;
  padding: 4px 6px 12px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.zweite-spalte {
  flex: none;
  width: 272px;
  min-height: 0;
  padding: 0 8px 12px 2px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Secondary entries (personal data, help) stand apart at the bottom of the rail. */
.schiene > .bereiche-unten {
  margin-top: auto;
  padding-top: 12px;
}

/* Areas in the rail: symbol (24 px) above a short name (12 px). */
.bereiche-nav {
  padding: 0;
}

.bereiche-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Every group begins with a compact dividing line with a small chevron button in its middle: it closes and
   opens the group (remembered); its name is the accessible name and the tooltip. On phones the heading shows
   the name of the group. A closed group keeps its current entry in sight. */
.bereiche-gruppe {
  margin: 6px 0 2px;
  font-size: var(--caption-1);
  line-height: var(--caption-1-lh);
  font-weight: var(--weight-semibold);
}

.bereiche-gruppe-schalter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--neutral-fg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bereiche-gruppe-schalter::before,
.bereiche-gruppe-schalter::after {
  content: "";
  flex: 1 1 0;
  max-width: 20px;
  height: 1px;
  background: var(--nav-line);
}

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

.bereiche-gruppe-schalter:hover {
  background: var(--nav-hover);
  color: var(--neutral-fg-1);
}

.bereiche-gruppe-schalter:active {
  background: var(--nav-pressed);
}

.bereiche-gruppe-schalter .klappbereich-pfeil {
  flex: none;
  fill: currentColor;
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--curve-easy);
}

.bereiche-gruppe-schalter[aria-expanded="false"] .klappbereich-pfeil {
  transform: none;
}

.bereiche-liste[data-gruppe="zu"] > li:not(:has(.active)) {
  display: none;
}

.bereich-eintrag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  padding: 8px 2px 7px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  color: var(--nav-fg);
  text-align: center;
  text-decoration: none;
  font-size: var(--caption-1);
  line-height: 14px;
  font-weight: var(--weight-regular);
  box-shadow: none;
}

.bereich-eintrag svg {
  flex: none;
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}

.bereich-eintrag:hover {
  background: var(--nav-hover);
  color: var(--neutral-fg-1);
}

.bereich-eintrag:active {
  background: var(--nav-pressed);
}

.bereich-eintrag.active {
  background: var(--nav-selected);
  box-shadow: var(--nav-selected-shadow);
  color: var(--neutral-fg-1);
  font-weight: var(--weight-regular);
}

.bereich-eintrag.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--brand-stroke);
}

.bereich-eintrag.active svg {
  fill: var(--brand-fg-1) !important;
}

.bereich-symbol-voll {
  display: none !important;
}

.bereich-eintrag.active .bereich-symbol-voll {
  display: block !important;
}

.bereich-eintrag.active:has(.bereich-symbol-voll) .bereich-symbol-linie {
  display: none !important;
}

/* The short name of the rail stands in one line, never hyphenated; the full name is the accessible name. */
.bereich-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  hyphens: none;
}

.bereich-text-lang {
  display: none;
}

.leiste-linie {
  height: 0;
  margin: 8px 16px;
  border: 0;
  border-top: 1px solid var(--nav-line);
}

/* Wide screens: the button and Ctrl+B close the second column; without one they narrow the rail to its
   symbols (the names stay for screen readers and as tooltip). */
@media (min-width: 720px) {
  :is(.geruest.mit-spalte[data-leiste="zu"], html[data-leiste="zu"] .geruest.mit-spalte:not([data-leiste])) .zweite-spalte {
    display: none;
  }

  :is(.geruest.ohne-spalte[data-leiste="zu"], html[data-leiste="zu"] .geruest.ohne-spalte:not([data-leiste])) .schiene {
    width: 60px;
  }

  :is(.geruest.ohne-spalte[data-leiste="zu"], html[data-leiste="zu"] .geruest.ohne-spalte:not([data-leiste])) .bereich-eintrag {
    min-height: 44px;
    padding: 10px 0;
  }

  :is(.geruest.ohne-spalte[data-leiste="zu"], html[data-leiste="zu"] .geruest.ohne-spalte:not([data-leiste])) .bereich-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
}

/* Content: a light layer with a rounded corner and a very soft edge on the window ground. */
.hauptbereich {
  grid-area: haupt;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--layer-stroke);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: var(--radius-xl);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  color: var(--neutral-fg-1);
}

.inhaltsflaeche {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* A link from a section to its full list, with a chevron („Alle Kunden ›“). */
.abschnitt-mehr {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 8px;
  border-radius: var(--radius-md);
  color: var(--brand-fg-link);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.abschnitt-mehr svg {
  fill: currentColor;
}

.abschnitt-mehr:hover {
  background: var(--neutral-bg-hover);
  text-decoration: underline;
}

/* Collapsible section: the heading is the button, a chevron shows the state, actions stay beside it. */
.klappbereich-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.klappbereich-titel {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

.klappbereich-schalter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 2px 8px 2px 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.klappbereich-schalter:hover {
  background: var(--neutral-bg-hover);
}

.klappbereich-name {
  min-width: 0;
  overflow-wrap: break-word;
}

.klappbereich-pfeil {
  flex: none;
  fill: var(--neutral-fg-2);
  transition: transform var(--dur-fast) var(--curve-easy);
}

.klappbereich-schalter[aria-expanded="true"] .klappbereich-pfeil {
  transform: rotate(90deg);
}

.klappbereich-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.klappbereich-inhalt:not([hidden]) {
  animation: klappbereich-auf var(--dur-normal) var(--curve-decelerate);
}

@keyframes klappbereich-auf {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste,
  .klappbereich-pfeil,
  .bereiche-gruppe-schalter .klappbereich-pfeil {
    transition: none;
  }

  .klappbereich-inhalt:not([hidden]) {
    animation: none;
  }
}

/* Phones and narrow windows: rail and second column lie over the page as one panel, always complete,
   opened from the title bar; the entries become rows, the groups can close. */
@media (max-width: 719.98px) {
  .geruest {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titel"
      "haupt";
  }

  .titelleiste {
    gap: 4px;
    padding: 0 6px 0 4px;
  }

  .titel-links {
    flex: 1 1 auto;
    min-width: 0;
  }

  .titel-mitte,
  .titel-rechts {
    flex: none;
  }

  .titel-marke {
    gap: 8px;
    padding: 0 4px;
  }

  .leiste-schalter {
    display: none;
  }

  .leiste-oeffnen {
    display: inline-grid;
  }

  .seitenleiste {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    flex-direction: column;
    width: min(320px, 86vw);
    padding: 8px 8px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--mica-bg);
    background-image: var(--mica-gradient);
    background-repeat: no-repeat;
    box-shadow: var(--shadow-28);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-gentle) var(--curve-decelerate), visibility var(--dur-gentle);
  }

  /* Visible at once when opening (not only after the slide), so the focus can move into the panel. */
  .geruest[data-leiste-mobil="offen"] .seitenleiste {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-gentle) var(--curve-decelerate), visibility 0s;
  }

  .leiste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 0 4px 12px;
  }

  .leiste-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--subtitle-2);
    line-height: var(--subtitle-2-lh);
    font-weight: var(--weight-semibold);
  }

  .leiste-schliessen svg {
    fill: currentColor;
  }

  .geruest .leiste-schliessen:hover {
    background: var(--nav-hover);
    color: var(--neutral-fg-1);
  }

  .schiene,
  .zweite-spalte {
    width: auto;
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  .schiene > .bereiche-unten,
  .zweite-spalte {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--nav-line);
  }

  .bereiche-gruppe {
    margin: 12px 0 2px;
  }

  .bereiche-gruppe-schalter {
    justify-content: flex-start;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-lg);
  }

  .bereiche-gruppe-schalter::before,
  .bereiche-gruppe-schalter::after {
    content: none;
  }

  .bereiche-gruppe-name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }

  .bereich-eintrag {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    text-align: left;
    font-size: var(--body-1);
    line-height: var(--body-1-lh);
  }

  .bereich-eintrag svg {
    width: 20px !important;
    height: 20px !important;
  }

  .bereich-text-kurz {
    display: none;
  }

  .bereich-text-lang {
    display: block;
  }

  .leiste-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.32);
  }

  .hauptbereich {
    border-left: 0;
    border-top-left-radius: 0;
    box-shadow: none;
  }
}