:root {
  --app-font: "Trebuchet MS", Trebuchet, sans-serif;
  --bg: #eef1f5;
  --card: #ffffff;
  --border: #d4dae3;
  --text: #000000;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --radius: 10px;
  --shadow: 0 2px 16px rgba(30, 41, 59, 0.07);
  --brand-chrome-height: 6rem;

  /* Arbeitsfenster: volle Breite; oben Zürich-Banner */
  --top-scenery-height: 7cm;
  --faded-banner-depth: 7rem;
  --title-text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.58),
    0 4px 28px rgba(0, 0, 0, 0.46),
    0 1px 3px rgba(0, 0, 0, 0.42);
  --header-title-left: var(--app-content-gutter);
  --header-title-bottom: 0.25rem;
  --home-title-bottom: 1.35rem;
  --app-max-width: 100%;
  --app-content-gutter: 1.5rem;
  --app-ui-scale: 0.8;
  --app-viewport-height: calc(100vh / var(--app-ui-scale));
  --sidebar-pad-x: 0.55rem;
  --sidebar-icon-slot: 3.25rem;
  --sidebar-label-gap: 0.65rem;
  --sidebar-row-height: 2.5rem;
  --sidebar-row-gap: 0.15rem;
  --sidebar-icon-size: 1.35rem;
  --sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-transition: 0.32s var(--sidebar-ease);
  --sidebar-width-expanded: 14rem;
  --sidebar-width-collapsed: calc(var(--sidebar-pad-x) * 2 + var(--sidebar-icon-slot));
  --sidebar-width: var(--sidebar-width-expanded);
  --brand-chrome-max-width: 1330px;

  /* Kapitel-Farben für visuelle Orientierung */
  --ch1: #2b65a5;
  --ch1-soft: #eef4fa;
  --ch1-border: #b3cce6;
  --ch1-hover: #dde8f3;
  --ch1-chapter-head: #91b4d6;
  --ch1-chapter-head-hover: #82a6cc;
  --ch1-box-border: #a3bdd4;
  --ch1-box-head: #c8d8eb;
  --ch1-box-head-hover: #b9cce3;

  --ch2: #c2410c;
  --ch2-soft: #fff7ed;
  --ch2-border: #fed7aa;
  --ch2-hover: #ffedd5;
  --ch2-chapter-head: #d9976a;
  --ch2-chapter-head-hover: #cc8b60;
  --ch2-box-border: #c9a882;
  --ch2-box-head: #edd5c4;
  --ch2-box-head-hover: #e2c8b0;

  --ch3: #047857;
  --ch3-soft: #ecfdf5;
  --ch3-border: #a7f3d0;
  --ch3-hover: #d1fae5;
  --ch3-chapter-head: #6aab96;
  --ch3-chapter-head-hover: #5f9d89;
  --ch3-box-border: #8cc4b0;
  --ch3-box-head: #bde5d6;
  --ch3-box-head-hover: #aed9c8;

  /* Lohn-UI: einheitliche Ausblass-Stärke für inaktive Panels/Optionen/Felder */
  --lohn-faded-opacity: 0.28;
  --lohn-faded-grayscale: 0.5;
  --lohn-faded-transition: opacity 0.2s ease, filter 0.2s ease;

  /* Shared surface tokens — pills, buttons, cards (solid, no blur) */
  --glass-bg: #ffffff;
  --glass-bg-hover: #f8fafc;
  --glass-border: var(--border);
  --glass-border-hover: #c5ced9;
  --glass-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  --glass-shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.1);
  --glass-tint-accent-bg: var(--accent-soft);
  --glass-tint-accent-bg-hover: #dbeafe;
  --glass-tint-accent-border: #93c5fd;
  --glass-tint-accent-border-hover: var(--accent);
  --glass-tint-accent-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
  --glass-tint-ch1-bg: var(--ch1-soft);
  --glass-tint-ch1-bg-hover: var(--ch1-hover);
  --glass-tint-ch1-border: var(--ch1-border);
  --glass-tint-ch1-border-hover: #8eb5d9;
  --glass-tint-ch1-shadow: 0 1px 4px rgba(43, 101, 165, 0.1);
  --glass-tint-ch2-bg: var(--ch2-soft);
  --glass-tint-ch2-bg-hover: var(--ch2-hover);
  --glass-tint-ch2-border: var(--ch2-border);
  --glass-tint-ch2-border-hover: #fdba74;
  --glass-tint-ch2-shadow: 0 1px 4px rgba(194, 65, 12, 0.1);
  --glass-tint-ch3-bg: var(--ch3-soft);
  --glass-tint-ch3-bg-hover: var(--ch3-hover);
  --glass-tint-ch3-border: var(--ch3-border);
  --glass-tint-ch3-border-hover: #6ee7b7;
  --glass-tint-ch3-shadow: 0 1px 4px rgba(4, 120, 87, 0.1);
  --glass-transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;

  --placeholder-color: #e3e3e3;
  --workspace-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --input-bg: #ffffff;
  --surface-muted: #fafbfc;
  --header-pinned-bg: rgba(255, 255, 255, 0.97);
  --header-pinned-border: rgba(212, 218, 227, 0.85);
  --workspace-border: rgba(212, 218, 227, 0.65);
  --surface-base: #ffffff;
  --surface-soft: #fafbfc;
  --surface-softest: #fafafa;
  --surface-hover: #f8fafc;
  --surface-inner: #ffffff;
  --surface-elevated: #ffffff;
  --record-marked-bg: #fef2f2;
  --record-marked-active-bg: color-mix(in srgb, var(--accent-soft) 55%, #fef2f2);
  --text-muted: #5c6470;
  --accordion-summary-open-bg: rgba(255, 255, 255, 0.72);
  --panel-gradient-end: #fafbfc;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0c;
  --card: #161616;
  --border: #333333;
  --text: #f0f0f0;
  --muted: #a3a3a3;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: #2a2a2a;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  --workspace-bg: #141414;
  --sidebar-bg: #0c0c0c;
  --input-bg: #121212;
  --surface-muted: #181818;
  --header-pinned-bg: rgba(12, 12, 12, 0.97);
  --header-pinned-border: rgba(64, 64, 64, 0.85);
  --workspace-border: rgba(58, 58, 58, 0.75);
  --glass-bg: #1a1a1a;
  --glass-bg-hover: #242424;
  --glass-border: #333333;
  --glass-border-hover: #484848;
  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --glass-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.42);
  --glass-tint-accent-bg: #252525;
  --glass-tint-accent-bg-hover: #2e2e2e;
  --glass-tint-accent-border: #2563eb;
  --glass-tint-accent-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
  --placeholder-color: #737373;
  --ch1-soft: #1a1a1c;
  --ch1-border: #3a3a40;
  --ch1-hover: #222226;
  --ch1-box-border: #44444a;
  --ch1-box-head: #2a2a2e;
  --ch2-soft: #1c1a18;
  --ch2-border: #403830;
  --ch2-hover: #262220;
  --ch2-box-border: #4a4038;
  --ch2-box-head: #2e2824;
  --ch3-soft: #181c1a;
  --ch3-border: #344038;
  --ch3-hover: #202624;
  --ch3-box-border: #3e4844;
  --ch3-box-head: #242a28;
  --surface-base: #1a1a1a;
  --surface-soft: #202020;
  --surface-softest: #121212;
  --surface-hover: #2a2a2a;
  --surface-inner: #1a1a1a;
  --surface-elevated: #222222;
  --record-marked-bg: #2a1818;
  --record-marked-active-bg: color-mix(in srgb, var(--accent-soft) 55%, #2a1818);
  --text-muted: #a3a3a3;
  --accordion-summary-open-bg: rgba(26, 26, 26, 0.9);
  --panel-gradient-end: #1a1a1a;
  --ch1-chapter-head: #2a2a2e;
  --ch1-chapter-head-hover: #323238;
  --ch2-chapter-head: #2e2824;
  --ch2-chapter-head-hover: #36302a;
  --ch3-chapter-head: #242a28;
  --ch3-chapter-head-hover: #2c3430;
}

html[data-theme-mode="system"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme-mode="system"] {
    color-scheme: dark;
    --bg: #0c0c0c;
    --card: #161616;
    --border: #333333;
    --text: #f0f0f0;
    --muted: #a3a3a3;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: #2a2a2a;
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    --workspace-bg: #141414;
    --sidebar-bg: #0c0c0c;
    --input-bg: #121212;
    --surface-muted: #181818;
    --header-pinned-bg: rgba(12, 12, 12, 0.97);
    --header-pinned-border: rgba(64, 64, 64, 0.85);
    --workspace-border: rgba(58, 58, 58, 0.75);
    --glass-bg: #1a1a1a;
    --glass-bg-hover: #242424;
    --glass-border: #333333;
    --glass-border-hover: #484848;
    --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --glass-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.42);
    --glass-tint-accent-bg: #252525;
    --glass-tint-accent-bg-hover: #2e2e2e;
    --glass-tint-accent-border: #2563eb;
    --glass-tint-accent-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
    --placeholder-color: #737373;
    --ch1-soft: #1a1a1c;
    --ch1-border: #3a3a40;
    --ch1-hover: #222226;
    --ch1-box-border: #44444a;
    --ch1-box-head: #2a2a2e;
    --ch2-soft: #1c1a18;
    --ch2-border: #403830;
    --ch2-hover: #262220;
    --ch2-box-border: #4a4038;
    --ch2-box-head: #2e2824;
    --ch3-soft: #181c1a;
    --ch3-border: #344038;
    --ch3-hover: #202624;
    --ch3-box-border: #3e4844;
    --ch3-box-head: #242a28;
    --surface-base: #1a1a1a;
    --surface-soft: #202020;
    --surface-softest: #121212;
    --surface-hover: #2a2a2a;
    --surface-inner: #1a1a1a;
    --surface-elevated: #222222;
    --record-marked-bg: #2a1818;
    --record-marked-active-bg: color-mix(in srgb, var(--accent-soft) 55%, #2a1818);
    --text-muted: #a3a3a3;
    --accordion-summary-open-bg: rgba(26, 26, 26, 0.9);
    --panel-gradient-end: #1a1a1a;
    --ch1-chapter-head: #2a2a2e;
    --ch1-chapter-head-hover: #323238;
    --ch2-chapter-head: #2e2824;
    --ch2-chapter-head-hover: #36302a;
    --ch3-chapter-head: #242a28;
    --ch3-chapter-head-hover: #2c3430;
  }

  html[data-theme-mode="system"]::before {
    filter: brightness(0.38) saturate(0.72);
  }

  html[data-theme-mode="system"]::after {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--top-scenery-height) - 0.5rem),
      rgba(0, 0, 0, 0.08) var(--top-scenery-height),
      rgba(0, 0, 0, 0.18) calc(var(--top-scenery-height) + 0.5rem),
      rgba(0, 0, 0, 0) 100%
    );
  }
}

[data-theme="dark"] html::after {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--top-scenery-height) - 0.5rem),
    rgba(0, 0, 0, 0.08) var(--top-scenery-height),
    rgba(0, 0, 0, 0.18) calc(var(--top-scenery-height) + 0.5rem),
    rgba(0, 0, 0, 0) 100%
  );
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

[data-theme="dark"] .accordion-chapter[data-chapter="1"] {
  --panel-bg: linear-gradient(180deg, var(--ch1-soft) 0%, var(--panel-gradient-end) 42%);
  --accent-soft: var(--ch1-soft);
}

[data-theme="dark"] .accordion-chapter[data-chapter="2"] {
  --panel-bg: linear-gradient(180deg, var(--ch2-soft) 0%, var(--panel-gradient-end) 42%);
}

[data-theme="dark"] .accordion-chapter[data-chapter="3"] {
  --panel-bg: linear-gradient(180deg, var(--ch3-soft) 0%, var(--panel-gradient-end) 42%);
}

[data-theme="dark"] .panel-box,
[data-theme="dark"] .cv-combined-box,
[data-theme="dark"] .accordion-chapter,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-item[open],
[data-theme="dark"] .records-list-item,
[data-theme="dark"] .records-vakanzen-panel,
[data-theme="dark"] .records-kontakte-panel,
[data-theme="dark"] .kunden-vakanz-item,
[data-theme="dark"] .kunden-kontakt-item,
[data-theme="dark"] .pipeline-column,
[data-theme="dark"] .pipeline-column-head,
[data-theme="dark"] .pipeline-card,
[data-theme="dark"] .pipeline-add-panel,
[data-theme="dark"] .cv-fieldset,
[data-theme="dark"] .cv-combined-section + .cv-combined-section,
[data-theme="dark"] .account-modal-panel,
[data-theme="dark"] .account-tab,
[data-theme="dark"] .job-monitor-card,
[data-theme="dark"] .records-list-panel,
[data-theme="dark"] details[data-step="profile"],
[data-theme="dark"] details[data-step="edu-exp"],
[data-theme="dark"] details[data-step="5"],
[data-theme="dark"] details[data-step="6"],
[data-theme="dark"] details[data-step="7"],
[data-theme="dark"] .accordion-chapter[data-chapter="2"] details[data-step="1"],
[data-theme="dark"] .accordion-chapter[data-chapter="2"] details[data-step="2"],
[data-theme="dark"] .accordion-chapter[data-chapter="3"] .accordion-chapter-items > .panel-box,
[data-theme="dark"] details[data-step="5"] .accordion-body.panel-box,
[data-theme="dark"] details[data-step="6"] .accordion-body.panel-box,
[data-theme="dark"] details[data-step="7"] .panel-box.panel-box--pad {
  background: var(--surface-base);
  color: var(--text);
}

[data-theme="dark"] details[data-step="profile"][open],
[data-theme="dark"] details[data-step="edu-exp"][open],
[data-theme="dark"] details[data-step="5"][open],
[data-theme="dark"] details[data-step="6"][open],
[data-theme="dark"] details[data-step="7"][open],
[data-theme="dark"] .accordion-chapter[data-chapter="2"] details[data-step="1"][open],
[data-theme="dark"] .accordion-chapter[data-chapter="2"] details[data-step="2"][open],
[data-theme="dark"] .accordion-chapter[open] {
  background: var(--surface-soft);
}

[data-theme="dark"] .accordion-item > summary:hover {
  background: var(--surface-hover);
}

[data-theme="dark"] .accordion-item[open] > summary,
[data-theme="dark"] .accordion-chapter[data-chapter="1"] .accordion-item[open] > summary,
[data-theme="dark"] .accordion-chapter[data-chapter="2"] .accordion-item[open] > summary,
[data-theme="dark"] .accordion-chapter[data-chapter="3"] .accordion-item[open] > summary {
  background: var(--accordion-summary-open-bg);
  color: var(--text);
}

[data-theme="dark"] .records-list-item:hover,
[data-theme="dark"] .kunden-vakanz-item:hover,
[data-theme="dark"] .kunden-kontakt-item:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

[data-theme="dark"] .records-list-item.is-marked {
  background: var(--record-marked-bg);
  border-color: #f87171;
}

[data-theme="dark"] .records-list-item.is-marked.is-active {
  background: var(--record-marked-active-bg);
}

[data-theme="dark"] .records-list-item.is-active {
  background: var(--accent-soft);
}

[data-theme="dark"] .cv-combined-section .anrede-group legend,
[data-theme="dark"] .job-monitor-intro,
[data-theme="dark"] .job-monitor-hint,
[data-theme="dark"] .job-monitor-status,
[data-theme="dark"] .job-monitor-empty {
  color: var(--text-muted);
}

[data-theme="dark"] .btn.secondary,
[data-theme="dark"] .records-back-btn {
  background: var(--surface-soft);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .btn.secondary:hover:not(:disabled),
[data-theme="dark"] .records-back-btn:hover {
  background: var(--surface-hover);
  border-color: var(--glass-border-hover);
}

[data-theme="dark"] .btn.secondary:hover:not(:disabled),
[data-theme="dark"] .records-back-btn:hover {
  background: var(--surface-hover);
  border-color: var(--glass-border-hover);
}

[data-theme="dark"] html::before {
  filter: brightness(0.38) saturate(0.72);
}

* {
  box-sizing: border-box;
}

html {
  min-height: var(--app-viewport-height);
  scrollbar-gutter: stable;
  zoom: var(--app-ui-scale);
}

@view-transition {
  navigation: none;
}

body.page-nav-leaving .app {
  opacity: 0;
  transition: opacity 0.26s ease;
  pointer-events: none;
}

html.page-nav-enter .app {
  opacity: 0;
}

html.page-nav-enter.page-nav-enter-active .app {
  opacity: 1;
  transition: opacity 0.3s ease;
}

html.page-nav-pending .app {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.page-nav-leaving .app,
  html.page-nav-enter .app,
  html.page-nav-pending .app {
    opacity: 1;
    transition: none;
  }
}

/* Festes Vollbild-Foto — identisch auf allen Seiten, unabhängig von Scroll/Höhe */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--app-bg-color, var(--bg));
  background-image: var(--app-bg-image, url("img/zuerich-bg.jpg?v=20260628f"));
  background-repeat: no-repeat;
  background-position: var(--app-bg-position, 22% center);
  background-size: var(--app-bg-size, cover);
  image-rendering: auto;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html[data-app-background="none"]::before {
  background-image: none;
}

html[data-faded-banner="1"]:not(:has(body.page-home)):not(:has(body.login-page))::before {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--top-scenery-height) - var(--faded-banner-depth)),
    rgba(0, 0, 0, 0.9) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.82),
    rgba(0, 0, 0, 0.68) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.62),
    rgba(0, 0, 0, 0.42) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.4),
    rgba(0, 0, 0, 0.2) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.18),
    rgba(0, 0, 0, 0.06) var(--top-scenery-height),
    rgba(0, 0, 0, 0.02) calc(var(--top-scenery-height) + var(--faded-banner-depth) * 0.45),
    transparent calc(var(--top-scenery-height) + var(--faded-banner-depth)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(var(--top-scenery-height) - var(--faded-banner-depth)),
    rgba(0, 0, 0, 0.9) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.82),
    rgba(0, 0, 0, 0.68) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.62),
    rgba(0, 0, 0, 0.42) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.4),
    rgba(0, 0, 0, 0.2) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.18),
    rgba(0, 0, 0, 0.06) var(--top-scenery-height),
    rgba(0, 0, 0, 0.02) calc(var(--top-scenery-height) + var(--faded-banner-depth) * 0.45),
    transparent calc(var(--top-scenery-height) + var(--faded-banner-depth)),
    transparent 100%
  );
}

html[data-faded-banner="1"]:not(:has(body.page-home)):not(:has(body.login-page))::after {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--top-scenery-height) - var(--faded-banner-depth)),
    color-mix(in srgb, var(--workspace-bg) 3%, transparent) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.82),
    color-mix(in srgb, var(--workspace-bg) 8%, transparent) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.62),
    color-mix(in srgb, var(--workspace-bg) 16%, transparent) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.4),
    color-mix(in srgb, var(--workspace-bg) 28%, transparent) calc(var(--top-scenery-height) - var(--faded-banner-depth) * 0.18),
    color-mix(in srgb, var(--workspace-bg) 38%, transparent) var(--top-scenery-height),
    color-mix(in srgb, var(--workspace-bg) 54%, transparent) calc(var(--top-scenery-height) + var(--faded-banner-depth) * 0.28),
    color-mix(in srgb, var(--workspace-bg) 72%, transparent) calc(var(--top-scenery-height) + var(--faded-banner-depth) * 0.58),
    color-mix(in srgb, var(--workspace-bg) 88%, transparent) calc(var(--top-scenery-height) + var(--faded-banner-depth) * 0.82),
    var(--workspace-bg) calc(var(--top-scenery-height) + var(--faded-banner-depth)),
    var(--workspace-bg) 100%
  );
}

html[data-faded-banner="1"]:not(:has(body.page-home)):not(:has(body.login-page)) .app-workspace {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--faded-banner-depth),
    var(--workspace-bg) var(--faded-banner-depth),
    var(--workspace-bg) 100%
  );
  border-top: none;
}

html[data-faded-banner="1"]:not(:has(body.page-home)):not(:has(body.login-page))[data-milchglas="full"]::after {
  display: block;
}

html[data-faded-banner="1"]:not(:has(body.page-home)):not(:has(body.login-page))[data-milchglas="full"] .app-workspace {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--faded-banner-depth) * 1.1),
    var(--workspace-bg) calc(var(--faded-banner-depth) * 1.1),
    var(--workspace-bg) 100%
  );
  border-top: none;
}

/* Leichter Verlauf — oberer Zürich-Streifen bleibt frei */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--top-scenery-height) - 0.5rem),
    rgba(255, 255, 255, 0.04) var(--top-scenery-height),
    rgba(255, 255, 255, 0.08) calc(var(--top-scenery-height) + 0.5rem),
    rgba(255, 255, 255, 0) 100%
  );
}

body {
  margin: 0;
  font-family: var(--app-font);
  background: transparent;
  min-height: var(--app-viewport-height);
  color: var(--text);
  line-height: 1.5;
  /* Stabiler Standard-Mauszeiger – kein Flackern zum Text-Cursor über Textflächen */
  cursor: default;
}

/* Text-Cursor (I-Beam) nur in tatsächlich beschreibbaren Feldern */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
input:not([type]),
textarea {
  cursor: text;
}

/* Auswählbare, aber nicht beschreibbare Steuerungen zeigen den Zeiger */
input[type="radio"],
input[type="checkbox"],
input[type="date"],
input[type="range"],
select {
  cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
  background-color: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

.app {
  --app-nav-gutter: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: var(--app-viewport-height);
}

body.has-app-sidebar {
  --sidebar-nav-color: #1a2744;
}

[data-theme="dark"] body.has-app-sidebar {
  --sidebar-nav-color: #c5ced8;
}

body.has-app-sidebar .app {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  transition:
    margin-left var(--sidebar-transition),
    width var(--sidebar-transition);
}

.brand-chrome {
  position: relative;
  width: 100%;
  max-width: var(--brand-chrome-max-width);
  margin: 0 auto;
  height: var(--brand-chrome-height);
  pointer-events: none;
}

.brand-logo {
  position: absolute;
  top: 6.15rem;
  left: 10rem;
  height: 55px;
  width: auto;
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 2px 8px rgba(15, 23, 42, 0.1));
}

.brand-badge {
  position: absolute;
  top: 3.5rem;
  right: 9rem;
  width: 100px;
  height: auto;
  filter: drop-shadow(0 1px 5px rgba(255, 255, 255, 0.88)) drop-shadow(0 2px 8px rgba(15, 23, 42, 0.12));
}

.app-workspace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--app-viewport-height) - var(--top-scenery-height));
  overflow: visible;
  background: var(--workspace-bg);
  border-top: none;
  padding: 0 0 2rem;
}

.app-workspace--hub {
  max-width: none;
  margin: 0;
  width: 100%;
}

/* Home: nur Hintergrund + Seitentitel unten */
html:has(body.page-home)::after {
  display: none;
}

body.page-home {
  overflow: hidden;
}

body.page-home .app {
  min-height: var(--app-viewport-height);
  height: var(--app-viewport-height);
}

body.page-home .header {
  flex: 1 1 auto;
  height: 100%;
  min-height: 100%;
}

body.page-home .home-title-row {
  position: absolute;
  left: var(--header-title-left);
  bottom: var(--home-title-bottom);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: clamp(0.55rem, 1.8vw, 1.15rem);
  max-width: calc(100% - 2 * var(--header-title-left));
}

body.page-home .home-rose-elephant {
  display: block;
  flex: 0 0 auto;
  width: clamp(3.2rem, 8vw, 5.5rem);
  height: auto;
  margin-bottom: 0.15em;
  filter: drop-shadow(0 8px 18px rgba(236, 72, 153, 0.35));
  animation: home-elephant-float 4.8s ease-in-out infinite;
}

@keyframes home-elephant-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

body.page-home .header h1 {
  position: static;
  bottom: auto;
  left: auto;
  max-width: none;
  font-size: clamp(3.5rem, 9.5vw, 7.25rem);
  line-height: 1.02;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .home-rose-elephant {
    animation: none;
  }
}

.app-shell {
  --app-nav-gap: 0.5rem;
  --app-nav-btn-size: 2.75rem;
  --app-nav-menu-width: 11.5rem;
  --app-nav-rail-width: calc(var(--app-nav-btn-size) + var(--app-nav-gap) + 0.5rem);
  --app-nav-motion: 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  --app-nav-fade: 0.16s ease;
  position: relative;
  overflow: visible;
  min-width: 0;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card--foreground {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.app-shell > .card.card--foreground,
.app-shell > .records-layout {
  flex: 1;
}

/* Standard app pages: flush white workspace (matches Kunden / Dossierschreiber) */
.app-shell > .card.card--foreground:not(.card--beschreibung) {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--workspace-bg);
  padding: 0.75rem var(--app-content-gutter) 1.25rem;
}

.beschreibung-shell {
  position: relative;
  overflow: visible;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.beschreibung-shell > .card {
  flex: 1;
}

.card.card--beschreibung {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: var(--workspace-bg);
}

.card--beschreibung .records-layout-database:not(.is-capture-open) {
  padding: 0.75rem var(--app-content-gutter) 1.25rem;
}

.card--beschreibung .records-kunde-detail:not([hidden]),
.card--beschreibung .records-kontakt-detail:not([hidden]) {
  padding: 0;
}

.card--beschreibung .records-capture-panel {
  padding: 0;
}

.card--beschreibung #wizard-form {
  padding: 0;
  background: transparent;
}

.card.card--panel-full {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.75rem var(--app-content-gutter) 1.25rem;
  background: var(--workspace-bg);
  max-width: none;
  width: 100%;
}

.card--beschreibung #wizard-form .accordion {
  gap: 0;
}

.card--beschreibung #wizard-form .accordion-chapter {
  border: none;
  border-radius: 0;
  border-left: none;
  background: var(--surface-base);
}

.card--beschreibung #wizard-form .accordion-chapter[open],
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"][open],
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"][open],
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"][open] {
  background: var(--surface-base);
}

.card--beschreibung #wizard-form .accordion-chapter + .accordion-chapter {
  border-top: 1px solid var(--border);
}

.card--beschreibung #wizard-form .accordion-chapter-head {
  padding: 0.65rem var(--app-content-gutter);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] > .accordion-chapter-head,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"][open] > .accordion-chapter-head,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] > .accordion-chapter-head:hover {
  background: var(--ch1);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] > .accordion-chapter-head .accordion-chapter-title,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"][open] > .accordion-chapter-head .accordion-chapter-title,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] > .accordion-chapter-head:hover .accordion-chapter-title {
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] > .accordion-chapter-head::after,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"][open] > .accordion-chapter-head::after,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] > .accordion-chapter-head:hover::after {
  border-right-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] > .accordion-chapter-head,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"][open] > .accordion-chapter-head,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] > .accordion-chapter-head:hover {
  background: var(--ch2);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] > .accordion-chapter-head .accordion-chapter-title,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"][open] > .accordion-chapter-head .accordion-chapter-title,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] > .accordion-chapter-head:hover .accordion-chapter-title {
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] > .accordion-chapter-head::after,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"][open] > .accordion-chapter-head::after,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] > .accordion-chapter-head:hover::after {
  border-right-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] > .accordion-chapter-head,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"][open] > .accordion-chapter-head,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] > .accordion-chapter-head:hover {
  background: var(--ch3);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] > .accordion-chapter-head .accordion-chapter-title,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"][open] > .accordion-chapter-head .accordion-chapter-title,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] > .accordion-chapter-head:hover .accordion-chapter-title {
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] > .accordion-chapter-head::after,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"][open] > .accordion-chapter-head::after,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] > .accordion-chapter-head:hover::after {
  border-right-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.card--beschreibung #wizard-form .accordion-chapter[open] > .accordion-chapter-head:hover {
  filter: none;
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] {
  --panel-bg: var(--surface-base);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] {
  --panel-bg: var(--surface-base);
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] {
  --panel-bg: var(--surface-base);
}

.card--beschreibung #wizard-form .accordion-chapter-items {
  padding: 0.55rem var(--app-content-gutter) 0.85rem;
  margin-left: 0;
  border-left: none;
}

.card--beschreibung #wizard-form .accordion-chapter[data-chapter="1"] .accordion-chapter-items,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="2"] .accordion-chapter-items,
.card--beschreibung #wizard-form .accordion-chapter[data-chapter="3"] .accordion-chapter-items {
  border-left: none;
}

.card--beschreibung #wizard-form .cv-import-panel {
  background: var(--surface-soft);
}

/* —— Linke Sidebar (volle Höhe) —— */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 14px rgba(15, 23, 42, 0.05);
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width var(--sidebar-transition),
    background 0.28s ease,
    backdrop-filter 0.28s ease,
    border-color 0.28s ease;
}

html[data-milchglas="sidebar"] .app-sidebar,
html[data-milchglas="full"] .app-sidebar {
  background: color-mix(in srgb, var(--sidebar-bg) 62%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  border-right-color: color-mix(in srgb, var(--border) 55%, transparent);
}

html[data-milchglas="full"]::after {
  display: none;
}

html[data-milchglas="full"] {
  --milchglas-surface-mix: 52%;
  --milchglas-workspace-mix: 48%;
  --workspace-bg: color-mix(in srgb, #ffffff var(--milchglas-workspace-mix), transparent);
  --card: color-mix(in srgb, #ffffff var(--milchglas-surface-mix), transparent);
  --surface-base: color-mix(in srgb, #ffffff var(--milchglas-surface-mix), transparent);
  --surface-soft: color-mix(in srgb, #fafbfc var(--milchglas-surface-mix), transparent);
  --surface-softest: color-mix(in srgb, #fafafa var(--milchglas-surface-mix), transparent);
  --surface-hover: color-mix(in srgb, #f8fafc var(--milchglas-surface-mix), transparent);
  --surface-inner: color-mix(in srgb, #ffffff var(--milchglas-surface-mix), transparent);
  --surface-elevated: color-mix(in srgb, #ffffff var(--milchglas-surface-mix), transparent);
  --surface-muted: color-mix(in srgb, #fafbfc var(--milchglas-surface-mix), transparent);
  --glass-bg: color-mix(in srgb, #ffffff var(--milchglas-surface-mix), transparent);
  --glass-bg-hover: color-mix(in srgb, #f8fafc var(--milchglas-surface-mix), transparent);
  --input-bg: color-mix(in srgb, #ffffff 72%, transparent);
  --panel-gradient-end: color-mix(in srgb, #fafbfc var(--milchglas-surface-mix), transparent);
  --ch1-soft: color-mix(in srgb, #eef4fa var(--milchglas-surface-mix), transparent);
  --ch2-soft: color-mix(in srgb, #fff7ed var(--milchglas-surface-mix), transparent);
  --ch3-soft: color-mix(in srgb, #ecfdf5 var(--milchglas-surface-mix), transparent);
  --record-marked-bg: color-mix(in srgb, #fef2f2 var(--milchglas-surface-mix), transparent);
  --accordion-summary-open-bg: color-mix(in srgb, #ffffff 58%, transparent);
}

html[data-milchglas="full"][data-theme="dark"] {
  --workspace-bg: color-mix(in srgb, #141414 var(--milchglas-workspace-mix), transparent);
  --card: color-mix(in srgb, #161616 var(--milchglas-surface-mix), transparent);
  --surface-base: color-mix(in srgb, #1a1a1a var(--milchglas-surface-mix), transparent);
  --surface-soft: color-mix(in srgb, #202020 var(--milchglas-surface-mix), transparent);
  --surface-softest: color-mix(in srgb, #121212 var(--milchglas-surface-mix), transparent);
  --surface-hover: color-mix(in srgb, #2a2a2a var(--milchglas-surface-mix), transparent);
  --surface-inner: color-mix(in srgb, #1a1a1a var(--milchglas-surface-mix), transparent);
  --surface-elevated: color-mix(in srgb, #1a1a1a var(--milchglas-surface-mix), transparent);
  --surface-muted: color-mix(in srgb, #181818 var(--milchglas-surface-mix), transparent);
  --glass-bg: color-mix(in srgb, #1a1a1a var(--milchglas-surface-mix), transparent);
  --glass-bg-hover: color-mix(in srgb, #242424 var(--milchglas-surface-mix), transparent);
  --input-bg: color-mix(in srgb, #121212 78%, transparent);
  --panel-gradient-end: color-mix(in srgb, #202020 var(--milchglas-surface-mix), transparent);
  --ch1-soft: color-mix(in srgb, #1a1a1c var(--milchglas-surface-mix), transparent);
  --ch2-soft: color-mix(in srgb, #1c1a18 var(--milchglas-surface-mix), transparent);
  --ch3-soft: color-mix(in srgb, #181c1a var(--milchglas-surface-mix), transparent);
  --record-marked-bg: color-mix(in srgb, #2a1818 var(--milchglas-surface-mix), transparent);
  --accordion-summary-open-bg: color-mix(in srgb, #1a1a1a 58%, transparent);
}

html[data-milchglas="full"] :where(
  .app-workspace,
  .card,
  .card--foreground,
  .card--beschreibung,
  .card--panel-full,
  .settings-panel,
  .settings-card,
  .accordion-chapter,
  .accordion-item,
  .panel-box,
  .cv-combined-box,
  .records-layout,
  .records-layout-database,
  .records-vakanzen-panel,
  .records-list-item,
  .pipeline-column,
  .pipeline-card,
  .pipeline-add-panel,
  .kunden-vakanz-item,
  .kunden-kontakt-item,
  .cv-fieldset,
  .matcher-panel,
  .admin-panel
) {
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

html[data-milchglas="full"] .beschreibung-v2 {
  --ds2-field-bg: color-mix(in srgb, #eceef2 var(--milchglas-surface-mix), transparent);
  --ds2-field-bg-hover: color-mix(in srgb, #e4e7ec var(--milchglas-surface-mix), transparent);
  --ds2-section-bg: color-mix(in srgb, #f3f4f6 var(--milchglas-surface-mix), transparent);
  --ds2-canvas-bg: color-mix(in srgb, #fafbfc var(--milchglas-surface-mix), transparent);
  --ds2-control-bg: color-mix(in srgb, #e8ebf0 var(--milchglas-surface-mix), transparent);
  --ds2-control-bg-active: color-mix(in srgb, #dfe3ea var(--milchglas-surface-mix), transparent);
  --ds2-pdf-accent-soft: color-mix(in srgb, #fef2f2 var(--milchglas-surface-mix), transparent);
  --ds2-tools-accent-soft: color-mix(in srgb, #eef2f8 var(--milchglas-surface-mix), transparent);
}

html[data-milchglas="full"][data-theme="dark"] .beschreibung-v2 {
  --ds2-field-bg: color-mix(in srgb, #2c2c30 var(--milchglas-surface-mix), transparent);
  --ds2-field-bg-hover: color-mix(in srgb, #34343a var(--milchglas-surface-mix), transparent);
  --ds2-section-bg: color-mix(in srgb, #222226 var(--milchglas-surface-mix), transparent);
  --ds2-canvas-bg: color-mix(in srgb, #1a1a1e var(--milchglas-surface-mix), transparent);
  --ds2-control-bg: color-mix(in srgb, #323238 var(--milchglas-surface-mix), transparent);
  --ds2-control-bg-active: color-mix(in srgb, #3c3c44 var(--milchglas-surface-mix), transparent);
  --ds2-pdf-accent-soft: color-mix(in srgb, #2a2020 var(--milchglas-surface-mix), transparent);
  --ds2-tools-accent-soft: color-mix(in srgb, #1e2228 var(--milchglas-surface-mix), transparent);
}

html[data-milchglas="full"] .beschreibung-v2 :where(
  .ds2-top,
  .ds2-panel,
  .ki-zusatz-field,
  .records-wizard-mount .cv-fieldset
) {
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

/* Tools & Bedienelemente deckend lassen */
html[data-milchglas="full"] body.beschreibung-v2 :where(
  .ds2-tools-menu,
  .ds2-tools-btn,
  .ds2-tools-item,
  .ds2-tools-row,
  .ds2-step,
  .cv-import-panel
) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-milchglas="full"] body.beschreibung-v2 .ds2-tools-menu {
  background: #ffffff;
  border-color: #d5dae2;
}

html[data-milchglas="full"][data-theme="dark"] body.beschreibung-v2 .ds2-tools-menu {
  background: #1a1a1a;
  border-color: #404048;
}

.app-sidebar-head {
  flex-shrink: 0;
  padding: 0.75rem 0 0.15rem;
}

.app-sidebar-brand,
.app-sidebar-item {
  display: grid;
  grid-template-columns: var(--sidebar-icon-slot) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sidebar-label-gap);
  min-height: var(--sidebar-row-height);
  width: 100%;
  padding-inline: var(--sidebar-pad-x);
  box-sizing: border-box;
}

.app-sidebar-brand {
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

a.app-sidebar-brand:hover,
a.app-sidebar-brand:focus-visible {
  background: transparent;
  color: var(--accent);
  outline: none;
}

a.app-sidebar-brand.is-current {
  background: transparent;
}

.app-sidebar-brand:hover .app-sidebar-brand-text::after,
.app-sidebar-brand:focus-visible .app-sidebar-brand-text::after,
.app-sidebar-brand.is-current .app-sidebar-brand-text::after {
  transform: scaleX(1);
}

.app-sidebar-brand-mark,
.app-sidebar-item .app-sidebar-icon {
  justify-self: center;
  align-self: center;
}

.app-sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  color: var(--accent);
  line-height: 1;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.app-sidebar-brand-bolt {
  display: block;
  width: 100%;
  height: 100%;
}

.app-sidebar-brand-text,
.app-sidebar-label {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 0.18rem;
  overflow: visible;
  white-space: nowrap;
  opacity: 1;
  transition:
    opacity var(--sidebar-transition),
    max-width var(--sidebar-transition);
}

.app-sidebar-brand-text::after,
.app-sidebar-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s var(--sidebar-ease);
}

.app-sidebar-toggle {
  margin: 0;
  border: none;
  font-family: inherit;
  text-align: inherit;
}

.app-sidebar-icon--toggle {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 1.05rem;
  max-width: calc(var(--sidebar-icon-slot) - 0.15rem);
  overflow: visible;
}

/* Das Schloss ist absolut positioniert, damit es die Balken nie verschiebt. */
.app-sidebar-toggle-lock {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.12rem);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.app-sidebar-toggle-lock-open,
.app-sidebar-toggle-lock-closed {
  display: none;
}

.app-sidebar-lock-svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  transform-origin: 50% 62%;
}

/* Offenes Schloss (Bügel oben ausgehängt), solange die Leiste eingeklappt ist;
   geschlossenes Schloss, wenn die Leiste ausgefahren/fixiert ist. */
.app-sidebar-lock-shackle-drop {
  transform: scaleY(0);
  transform-origin: 16px 7px;
  transform-box: fill-box;
}

body:not(.is-sidebar-collapsed) .app-sidebar-lock-shackle-drop {
  transform: scaleY(1);
}

.app-sidebar-toggle:hover {
  color: var(--accent);
}

.app-sidebar-toggle:hover .app-sidebar-toggle-lock,
.app-sidebar-toggle.is-lock-hint-closing .app-sidebar-toggle-lock,
.app-sidebar-toggle.is-lock-hint-opening .app-sidebar-toggle-lock {
  opacity: 1;
}

.app-sidebar-toggle:hover:not(.is-lock-hint-closing):not(.is-lock-hint-opening):not(.is-lock-settled) .app-sidebar-toggle-lock {
  animation: sidebar-lock-hint-in 0.24s var(--sidebar-ease);
}

.app-sidebar-toggle.is-lock-hint-closing .app-sidebar-lock-shackle-drop {
  animation: sidebar-lock-shackle-drop 0.36s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.app-sidebar-toggle.is-lock-hint-opening .app-sidebar-lock-shackle-drop {
  animation: sidebar-lock-shackle-open 0.36s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.app-sidebar-toggle.is-lock-hint-closing .app-sidebar-lock-shackle-arch,
.app-sidebar-toggle.is-lock-hint-opening .app-sidebar-lock-shackle-arch {
  animation: sidebar-lock-shackle-settle 0.36s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.app-sidebar-toggle.is-lock-hint-closing .app-sidebar-lock-svg,
.app-sidebar-toggle.is-lock-hint-opening .app-sidebar-lock-svg {
  animation: sidebar-lock-body-click 0.36s ease forwards;
}

@keyframes sidebar-lock-shackle-drop {
  0% {
    transform: scaleY(0);
  }

  55% {
    transform: scaleY(1.14);
  }

  72% {
    transform: scaleY(0.94);
  }

  100% {
    transform: scaleY(1);
  }
}

@keyframes sidebar-lock-shackle-open {
  0% {
    transform: scaleY(1);
  }

  55% {
    transform: scaleY(-0.14);
  }

  72% {
    transform: scaleY(0.06);
  }

  100% {
    transform: scaleY(0);
  }
}

@keyframes sidebar-lock-shackle-settle {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(1.2px);
  }

  62% {
    transform: translateY(-0.4px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes sidebar-lock-body-click {
  0%,
  100% {
    transform: scale(1);
  }

  42% {
    transform: scale(0.93);
  }

  62% {
    transform: scale(1.04);
  }

  82% {
    transform: scale(0.99);
  }
}

@keyframes sidebar-lock-hint-in {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.6);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.app-sidebar-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.16rem;
  width: 1.05rem;
  overflow: visible;
}

.app-sidebar-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.34s var(--sidebar-ease);
  transform: translateX(0);
}

body:not(.is-sidebar-collapsed) .app-sidebar-toggle-bar:nth-child(2),
body.is-sidebar-collapsed.is-sidebar-hover-open .app-sidebar-toggle-bar:nth-child(2) {
  transform: translateX(50%);
}

body.is-sidebar-collapsed {
  --sidebar-width: var(--sidebar-width-collapsed);
}

body.is-sidebar-collapsed .app-sidebar-brand-text,
body.is-sidebar-collapsed .app-sidebar-label {
  opacity: 0;
  max-width: 0;
}

body.is-sidebar-collapsed.is-sidebar-hover-open .app-sidebar {
  width: var(--sidebar-width-expanded);
  z-index: 80;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.14);
}

body.is-sidebar-collapsed.is-sidebar-hover-open .app-sidebar-brand-text,
body.is-sidebar-collapsed.is-sidebar-hover-open .app-sidebar-label {
  opacity: 1;
  max-width: 100%;
}

.app-sidebar-beta-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.45rem 0.2rem 0.2rem;
  padding: 0.1rem 0.35rem;
}

.app-sidebar-beta-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(148, 163, 184, 0.42) 18%,
    rgba(148, 163, 184, 0.42) 82%,
    transparent
  );
}

.app-sidebar-beta-divider-label {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

body.is-sidebar-collapsed .app-sidebar-beta-divider {
  margin: 0.35rem 0.55rem 0.15rem;
  gap: 0;
}

body.is-sidebar-collapsed .app-sidebar-beta-divider-label {
  opacity: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  border-width: 0;
  overflow: hidden;
}

body.is-sidebar-collapsed.is-sidebar-hover-open .app-sidebar-beta-divider {
  margin: 0.45rem 0.2rem 0.2rem;
  gap: 0.5rem;
}

body.is-sidebar-collapsed.is-sidebar-hover-open .app-sidebar-beta-divider-label {
  opacity: 1;
  max-width: none;
  padding: 0.2rem 0.55rem;
  border-width: 1px;
}

.app-sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 0 0.85rem;
  gap: var(--sidebar-row-gap);
  overflow-x: hidden;
  overflow-y: auto;
}

.app-sidebar-item {
  border-radius: 10px;
  color: var(--sidebar-nav-color);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

button.app-sidebar-item {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-align: inherit;
}

.app-sidebar-item:hover,
.app-sidebar-item:focus-visible {
  background: transparent;
  color: var(--accent);
  outline: none;
}

.app-sidebar-item:hover .app-sidebar-label::after,
.app-sidebar-item:focus-visible .app-sidebar-label::after {
  transform: scaleX(1);
  background: var(--accent);
}

.app-sidebar-item.is-current {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.app-sidebar-item.is-current .app-sidebar-label::after {
  transform: scaleX(1);
  background: var(--accent);
}

.app-sidebar-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  color: inherit;
}

.app-sidebar-icon svg {
  width: 100%;
  height: 100%;
}

.app-sidebar-icon--toggle .app-sidebar-toggle-lock svg {
  width: 0.95rem;
  height: 0.95rem;
  min-width: 0.95rem;
  min-height: 0.95rem;
  color: var(--accent);
}

.app-sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-row-gap);
  padding: 0.25rem 0 0.85rem;
  border-top: 1px solid var(--border);
}

/* Account-Modal */
.account-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.account-modal.hidden {
  display: none;
}

.account-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.account-modal-panel {
  position: relative;
  width: min(100%, 24rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem 1.25rem;
}

.account-modal-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  border: none;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.account-modal-panel h2 {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
}

.account-modal-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.account-tab {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.account-tab.is-active {
  background: var(--accent-soft);
  border-color: #93c5fd;
  color: var(--accent);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.account-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.account-form input {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.account-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.account-inline-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.account-message {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

html:has(body.login-page)::before {
  -webkit-mask-image: none;
  mask-image: none;
}

html:has(body.login-page)::after {
  display: none;
}

.login-page {
  margin: 0;
  min-height: var(--app-viewport-height);
  background: transparent;
}

.login-page-main {
  min-height: var(--app-viewport-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.login-page-card {
  width: min(100%, 24rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.45rem 1.45rem;
}

.login-page-brand {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.login-page-card h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.login-page-intro {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.account-message.is-error {
  color: #b91c1c;
}

.account-message.has-dev-link {
  color: var(--text);
}

.account-dev-link {
  margin-top: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  font-size: 0.8rem;
  line-height: 1.45;
}

.account-dev-link a {
  color: var(--accent);
  word-break: break-all;
}

.account-logged-in .account-email {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.account-totp {
  margin: 0.85rem 0 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.account-totp-qr {
  display: block;
  margin: 0.5rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.account-totp-secret {
  margin: 0 0 0.65rem;
  font-family: var(--app-font);
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--muted);
}

.account-login-number-wrap {
  margin: 0.75rem 0 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid #bfdbfe;
  text-align: center;
}

.account-login-number-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.account-login-number {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  line-height: 1;
}

.admin-panel {
  max-width: 100%;
}

.settings-panel {
  max-width: 42rem;
}

.settings-intro {
  margin: 0 0 1rem;
  color: var(--muted);
}

.settings-section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.settings-section:first-of-type {
  padding-top: 0;
}

.settings-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.settings-meta {
  margin: 0 0 0.35rem;
}

.settings-hint {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Darstellung — kompakte Karten & Zeilen */
.settings-section--appearance {
  --settings-switch-w: 2.1rem;
  --settings-switch-h: 1.22rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.settings-section--appearance > .settings-section-title {
  margin-bottom: 0.1rem;
}

.settings-section--appearance .settings-toggle-input {
  width: var(--settings-switch-w);
  height: var(--settings-switch-h);
}

.settings-section--appearance .settings-toggle-switch {
  width: var(--settings-switch-w);
  height: var(--settings-switch-h);
}

.settings-section--appearance .settings-toggle-switch::after {
  width: calc(var(--settings-switch-h) - 4px);
  height: calc(var(--settings-switch-h) - 4px);
}

.settings-section--appearance .settings-toggle-input:checked + .settings-toggle-switch::after {
  transform: translateX(calc(var(--settings-switch-w) - var(--settings-switch-h)));
}

.settings-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 0.65rem 0.75rem;
}

.settings-card-head {
  margin-bottom: 0.55rem;
}

.settings-card-title {
  margin: 0 0 0.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

.settings-card-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

.settings-accent-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.settings-accent-disc-label {
  display: block;
  margin: 0;
  cursor: pointer;
}

.settings-accent-native {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.settings-accent-native::-webkit-color-swatch-wrapper {
  padding: 0;
}

.settings-accent-native::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.settings-accent-native::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.settings-accent-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 8.5rem;
}

.settings-accent-hex-row {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
  margin: 0;
}

.settings-accent-hex-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-accent-hex-field {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
}

.settings-accent-hex-hash {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

.settings-accent-hex-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}

.settings-accent-favorites {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.settings-accent-favorites-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
}

.settings-accent-favorites-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.settings-accent-favorite-save-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.settings-accent-favorite-save-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-accent-favorite-save-btn {
  min-width: 2rem;
  padding-inline: 0.55rem;
}

.settings-accent-favorite-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.settings-accent-favorite-slot {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  position: relative;
}

.settings-accent-favorite-slot.is-empty {
  padding: 0.35rem 0;
}

.settings-accent-favorite-empty {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1.5px dashed color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 50%;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

.settings-accent-favorite-apply {
  appearance: none;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--favorite-color, var(--accent));
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.settings-accent-favorite-apply:hover {
  transform: scale(1.04);
  border-color: var(--accent);
}

.settings-accent-favorite-remove {
  position: absolute;
  top: -0.15rem;
  right: calc(50% - 2rem);
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-base, var(--bg));
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.settings-accent-favorite-remove:hover {
  color: var(--danger, #b42318);
  border-color: color-mix(in srgb, var(--danger, #b42318) 35%, var(--border));
}

.settings-accent-favorite-slot-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .settings-accent-favorites-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.settings-toggle-stack {
  display: grid;
  grid-template-columns: max-content var(--settings-switch-w);
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  width: fit-content;
  align-items: center;
}

.settings-section--appearance .settings-toggle-stack label.settings-row {
  display: contents;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.settings-row-title {
  grid-column: 1;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
}

.settings-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.45em;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.85);
  background: rgba(220, 38, 38, 0.7);
  color: #fff;
  font-family: var(--app-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.settings-segment-beta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.35em;
  padding: 0.12em 0.38em;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.85);
  background: rgba(220, 38, 38, 0.7);
  color: #fff;
  font-family: var(--app-font);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.settings-milchglas-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: max-content var(--settings-switch-w);
  column-gap: 0.65rem;
  align-items: center;
  margin-top: -0.12rem;
  margin-bottom: 0.08rem;
}

.settings-theme-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.65rem;
  align-items: center;
}

.settings-theme-hint {
  grid-column: 1 / -1;
  margin-top: -0.15rem;
}

.settings-milchglas-detail.hidden {
  display: none;
}

.settings-segment,
.settings-milchglas-segment,
.settings-theme-segment {
  display: inline-flex;
  padding: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 42%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  gap: 2px;
}

.settings-milchglas-segment {
  grid-column: 1;
}

.settings-theme-segment {
  justify-self: start;
}

.settings-segment-btn,
.settings-milchglas-segment-btn {
  border: none;
  border-radius: 6px;
  padding: 0.26rem 0.52rem;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.settings-segment-btn:hover,
.settings-milchglas-segment-btn:hover {
  color: var(--text);
}

.settings-segment-btn.is-active,
.settings-milchglas-segment-btn.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

[data-theme="dark"] .settings-segment-btn.is-active,
[data-theme="dark"] .settings-milchglas-segment-btn.is-active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.settings-toggle-control {
  grid-column: 2;
  position: relative;
  width: var(--settings-switch-w);
  height: var(--settings-switch-h);
  flex-shrink: 0;
}

.settings-section--appearance .settings-toggle-control .settings-toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  opacity: 0;
  cursor: pointer;
}

.settings-section--appearance .settings-toggle-control .settings-toggle-switch {
  display: block;
}

.settings-bg-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem;
}

.settings-bg-picker {
  display: contents;
}

.settings-bg-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 4.25rem;
  aspect-ratio: 1;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-base);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.settings-bg-upload:hover,
.settings-bg-upload:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

.settings-bg-upload.is-dragover {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
  color: var(--text);
}

.settings-bg-upload.is-uploading {
  opacity: 0.65;
  pointer-events: none;
}

.settings-bg-upload-icon {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}

.settings-bg-upload-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text);
}

.settings-bg-upload-sub {
  font-size: 0.58rem;
  line-height: 1.1;
}

.settings-bg-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.settings-bg-tools.hidden {
  display: none;
}

.settings-bg-parallax {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.settings-card-hint--tight {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.82;
}

.settings-bg-option--custom .settings-bg-preview {
  position: relative;
}

.settings-bg-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 2;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.settings-bg-remove:hover {
  background: rgba(220, 38, 38, 0.92);
}

.settings-bg-option {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 4.25rem;
  font: inherit;
  color: var(--muted);
  text-align: center;
}

.settings-bg-option:focus-visible {
  outline: none;
}

.settings-bg-option:focus-visible .settings-bg-preview {
  box-shadow: 0 0 0 2px var(--accent);
}

.settings-bg-option.is-selected .settings-bg-preview {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(37, 99, 235, 0.18);
}

.settings-bg-option.is-selected .settings-bg-label {
  color: var(--text);
  font-weight: 600;
}

.settings-bg-preview {
  position: relative;
  width: 4.25rem;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.settings-bg-preview-inner {
  position: absolute;
  inset: -8%;
  background-size: cover;  background-repeat: no-repeat;
  filter: blur(1.2px) saturate(0.88) brightness(1.04);
  transform: scale(1.06);
}

.settings-bg-preview--plain .settings-bg-preview-inner {
  inset: 0;
  transform: none;
  filter: none;
  background: linear-gradient(145deg, #e7edf5 0%, #f5f7fa 42%, #d8e0eb 100%);
}

[data-theme="dark"] .settings-bg-preview--plain .settings-bg-preview-inner {
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 55%, #101010 100%);
}

.settings-bg-label {
  font-size: 0.68rem;
  line-height: 1.15;
  max-width: 4.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-editor-bar .btn.secondary.small.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Vollbild-Hintergrund-Editor */
.bg-editor {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-editor.hidden {
  display: none;
}

html:has(body.is-bg-editing)::after {
  display: none;
}

body.is-bg-editing .app-sidebar {
  background: color-mix(in srgb, var(--sidebar-bg) 62%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  pointer-events: none;
  transition:
    background 0.28s ease,
    backdrop-filter 0.28s ease;
}

body.is-bg-editing .app {
  pointer-events: none;
  transition: backdrop-filter 0.28s ease;
}

body.is-bg-editing .app-workspace {
  background: color-mix(in srgb, var(--workspace-bg) 48%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  outline: 2px dashed rgba(255, 255, 255, 0.88);
  outline-offset: -2px;
}

body.is-bg-editing .card,
body.is-bg-editing .card--foreground,
body.is-bg-editing .card--beschreibung,
body.is-bg-editing .settings-panel {
  background: color-mix(in srgb, var(--card) 52%, transparent);
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

body.is-bg-editing .header h1,
body.is-bg-editing .header-title-group,
body.is-bg-editing .header-action-btn,
body.is-bg-editing .header-action-spacer {
  pointer-events: none;
}

.bg-editor-stage {
  position: fixed;
  inset: 0;
  z-index: 55;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
}

.bg-editor-stage.is-dragging {
  cursor: grabbing;
}

.bg-editor-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 220;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  max-width: calc(100% - 1rem);
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  pointer-events: auto;
}

.bg-editor-hint {
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 0 0.25rem;
}

.bg-editor-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #fff;
}

.bg-editor-zoom.hidden {
  display: none;
}

.bg-editor-zoom-label {
  white-space: nowrap;
}

.bg-editor-zoom input[type="range"] {
  width: 5.5rem;
  accent-color: #fff;
  cursor: pointer;
}

.settings-inline-form {
  margin: 0;
}

.settings-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.settings-toggle-input {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 1.65rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.65rem;
  border-radius: 999px;
  background: #d1d1d6;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: background 0.22s ease;
}

.settings-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.65rem - 4px);
  height: calc(1.65rem - 4px);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-toggle-input:checked + .settings-toggle-switch {
  background: #34c759;
}

.settings-toggle-input:checked + .settings-toggle-switch::after {
  transform: translateX(1.1rem);
}

.settings-toggle-input:focus-visible + .settings-toggle-switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-theme="dark"] .settings-toggle-switch {
  background: #48484a;
}

[data-theme="dark"] .settings-toggle-input:checked + .settings-toggle-switch {
  background: #32d74b;
}

/* Tutorial-Mode */
body.is-tutorial-active {
  overflow: hidden;
}

.tutorial-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  appearance: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.55rem 0.9rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
  cursor: pointer;
}

.tutorial-fab:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.tutorial-fab.hidden {
  display: none;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: auto;
}

.tutorial-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.58);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.tutorial-bubble {
  position: fixed;
  width: min(calc(100vw - 2rem), 22rem);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.22);
  padding: 0.95rem 1rem 1rem;
  z-index: 121;
}

.tutorial-bubble-step {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tutorial-bubble-title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  line-height: 1.25;
}

.tutorial-bubble-text {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text);
}

.tutorial-bubble-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.settings-guest {
  max-width: 28rem;
}

.settings-pipeline-stages {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.settings-pipeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.settings-pipeline-label {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.settings-pipeline-row-actions {
  display: flex;
  gap: 0.35rem;
}

.settings-pipeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.pipeline-panel {
  max-width: none;
}

.pipeline-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 0.85rem;
}

.pipeline-toolbar .pipeline-intro {
  margin: 0;
  flex: 1;
  min-width: 12rem;
  padding-top: 0.15rem;
  max-width: 42rem;
}

.pipeline-toolbar-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

.pipeline-intro {
  margin: 0 0 0.85rem;
  color: var(--muted);
}

.pipeline-status {
  min-height: 1.2rem;
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.pipeline-status.is-error {
  color: #b91c1c;
}

.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 1fr);
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.pipeline-column {
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.pipeline-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-base);
  border-radius: 12px 12px 0 0;
}

.pipeline-column-head h2 {
  margin: 0;
  font-size: 0.92rem;
}

.pipeline-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.pipeline-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem;
  flex: 1;
}

.pipeline-column-empty,
.pipeline-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.pipeline-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-base);
}

.pipeline-card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.45rem;
}

.pipeline-card-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pipeline-card-field--full {
  grid-column: 1 / -1;
}

.pipeline-card-field span {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pipeline-meta-input {
  width: 100%;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
}

.pipeline-meta-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-base);
}

.pipeline-card-link {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.pipeline-card-link:hover {
  color: var(--accent);
}

.pipeline-card-actions {
  display: flex;
  gap: 0.35rem;
}

.pipeline-move-btn {
  appearance: none;
  min-width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pipeline-move-btn:hover:not(:disabled),
.pipeline-move-btn:focus-visible:not(:disabled) {
  background: var(--accent-soft);
  border-color: #93c5fd;
  color: var(--accent);
  outline: none;
}

.pipeline-move-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pipeline-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.pipeline-remove-btn {
  appearance: none;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.15rem -0.1rem 0 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.pipeline-remove-btn:hover,
.pipeline-remove-btn:focus-visible {
  background: #fee2e2;
  color: #b91c1c;
  outline: none;
}

.pipeline-add-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pipeline-add-modal.hidden {
  display: none;
}

.pipeline-add-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.pipeline-add-panel {
  position: relative;
  width: min(100%, 26rem);
  max-height: calc(var(--app-viewport-height) - 2rem);
  overflow: auto;
  padding: 1.25rem 1.35rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-base);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.pipeline-add-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.pipeline-add-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.pipeline-add-close:hover,
.pipeline-add-close:focus-visible {
  background: #f1f5f9;
  color: var(--text);
  outline: none;
}

.pipeline-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pipeline-add-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.pipeline-add-form input,
.pipeline-add-form select {
  font: inherit;
  font-weight: 400;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.pipeline-add-form input:focus,
.pipeline-add-form select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-base);
}

.pipeline-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.pipeline-add-anrede {
  margin: 0;
  padding: 0;
  border: none;
}

.pipeline-add-anrede legend {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.pipeline-add-anrede .check-row {
  display: flex;
  gap: 0.85rem;
}

.pipeline-add-message {
  min-height: 1.1rem;
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.pipeline-add-message.is-error {
  color: #b91c1c;
}

.pipeline-guest {
  max-width: 28rem;
}

.admin-intro {
  margin: 0 0 0.85rem;
  color: var(--muted);
}

.admin-status {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.admin-status.is-error {
  color: #b91c1c;
}

.admin-table-wrap {
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-table th,
.admin-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.admin-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #f8fafc;
}

.admin-table-actions {
  white-space: nowrap;
}

.admin-delete-muted {
  color: var(--muted);
}

.konkuinfo-panel {
  max-width: none;
}

.konkuinfo-denied {
  color: var(--muted);
}

.konkuinfo-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.konkuinfo-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.konkuinfo-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.konkuinfo-section-head h2 {
  margin: 0;
}

.konkuinfo-hint {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.konkuinfo-grid {
  display: grid;
  gap: 0.75rem;
}

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

.konkuinfo-grid label,
.konkuinfo-anrede {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.konkuinfo-grid input,
.konkuinfo-grid select {
  font: inherit;
  font-weight: 400;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-softest);
}

.konkuinfo-missions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.konkuinfo-mission {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 0.85rem;
}

.konkuinfo-mission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.konkuinfo-mission-head h3 {
  margin: 0;
  font-size: 0.92rem;
}

.konkuinfo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.konkuinfo-file-info {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.konkuinfo-table-wrap {
  margin-top: 0.35rem;
}

.konkuinfo-table-empty {
  color: var(--muted);
  text-align: center;
}

.konkuinfo-status {
  min-height: 1.2rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.konkuinfo-status.is-error {
  color: #b91c1c;
}

@media (max-width: 760px) {
  .konkuinfo-grid-2 {
    grid-template-columns: 1fr;
  }
}

.app-sidebar-item--admin.is-current {
  background: transparent;
  color: var(--accent);
}

body.has-app-sidebar .hub-nav {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --sidebar-width: var(--sidebar-width-collapsed);
  }

  body.has-app-sidebar .app {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
  }

  .app-sidebar-brand-text,
  .app-sidebar-label {
    opacity: 0;
    max-width: 0;
  }
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Shared surface + motion on pill controls */
.chapter-load-btn,
.lang-pill,
.avail-quick-btn,
.exp-dd-pill,
.exp-dd-pill-list,
.pill-opt span,
.hub-nav-item,
.exp-add-btn,
.btn.secondary.small,
.lang-custom-add .btn.small,
.lohn-runden-accept {
  transition: var(--glass-transition);
}

.app--hub .header-hub {
  text-align: center;
}

.app--hub .header-hub h1 {
  font-family: var(--app-font);
  font-size: 3rem;
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.hub-quote {
  margin: 0.65rem auto 0;
  max-width: 34rem;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text);
  opacity: 0.92;
}

.app--hub .header-hub .subtitle {
  margin-top: 0.85rem;
}

.hub-card {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 1.25rem;
}

.app--hub .hub-card.card {
  border: none;
  background: transparent;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.app--hub .hub-nav {
  flex: 1;
}

.hub-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.65rem;
}

.hub-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  color: inherit;
}

.hub-nav-item:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

.hub-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hub-nav-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hub-nav-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.chapter-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.chapter-load-btn {
  appearance: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.accordion-item > summary .chapter-load-btn {
  margin-left: auto;
}

.chapter-load-btn:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
}

.chapter-clear-btn {
  color: #b91c1c;
}

.chapter-clear-btn:hover {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.chapter-load-btn:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-bg-hover);
  box-shadow:
    var(--glass-shadow),
    0 0 0 3px rgba(37, 99, 235, 0.18);
}

.chapter-load-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-bg-hover);
  box-shadow:
    var(--glass-shadow),
    0 0 0 3px rgba(37, 99, 235, 0.18);
}

.records-picker-portal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
}

.records-picker-portal:not([hidden]) {
  pointer-events: auto;
}

.records-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.records-picker-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  max-height: min(80vh, 32rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--card);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 8px 16px rgba(15, 23, 42, 0.08);
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.records-picker-portal.is-open .records-picker-backdrop {
  opacity: 1;
}

.records-picker-portal.is-open .records-picker-dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.records-picker-portal.is-closing .records-picker-backdrop {
  opacity: 0;
}

.records-picker-portal.is-closing .records-picker-dialog {
  opacity: 0;
  transform: scale(0.98) translateY(4px);
}

.records-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.records-picker-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.records-picker-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--glass-transition);
}

.records-picker-close:hover {
  color: var(--text);
  border-color: #b8c4d4;
  background: #f8fafc;
}

.records-picker-close:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.records-picker-body {
  padding: 0.85rem 1.1rem 1.1rem;
  overflow: auto;
  min-height: 0;
}

.records-picker-empty,
.records-picker-loading {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-style: italic;
}

.records-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.records-picker-item {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: var(--glass-transition);
}

.records-picker-item:hover {
  border-color: #b8c4d4;
  background: #f8fafc;
}

.records-picker-item.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.records-picker-item:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.records-picker-item-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

.records-picker-item-meta {
  font-size: 0.68rem;
  color: var(--muted);
}

body.records-picker-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .records-picker-backdrop,
  .records-picker-dialog {
    transition: none;
  }

  .records-picker-portal.is-open .records-picker-dialog,
  .records-picker-portal.is-closing .records-picker-dialog {
    transform: none;
  }
}

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

.records-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.records-layout-wide {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}

.records-wizard-mount {
  min-width: 0;
}

.records-wizard-mount .records-wizard-accordion {
  margin-bottom: 1rem;
}

.records-wizard-mount .accordion-item-sub {
  border-left: 3px solid var(--ch1-border);
}

body[data-wizard-mode="kunde"] .records-wizard-mount .accordion-item-sub {
  border-left-color: var(--ch2-border);
}

@media (max-width: 980px) {
  .records-layout-wide {
    grid-template-columns: 1fr;
  }
}

.records-list-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  padding: 0.75rem;
  max-height: 32rem;
  overflow: auto;
}

.records-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.records-list-head h2 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.records-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.records-sort-text {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.records-sort-select {
  appearance: none;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.28rem 1.4rem 0.28rem 0.55rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
  color: var(--text);
  max-width: 100%;
  cursor: pointer;
}

.records-sort-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.chapter-random-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.random-bulk-count-label {
  display: inline-flex;
  margin: 0;
}

.random-bulk-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.random-bulk-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: var(--glass-transition);
}

.random-bulk-stepper-btn:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
}

.random-bulk-stepper-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chapter-random-actions .random-bulk-stepper .random-bulk-count {
  width: 2.5rem;
  min-width: 2.5rem;
  min-height: auto;
  padding: 0.38rem 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  cursor: text;
  transition: var(--glass-transition);
  -moz-appearance: textfield;
  appearance: textfield;
}

.chapter-random-actions .random-bulk-count:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
}

.chapter-random-actions .random-bulk-count:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-bg-hover);
  box-shadow:
    var(--glass-shadow),
    0 0 0 3px rgba(37, 99, 235, 0.18);
}

.random-bulk-count::-webkit-outer-spin-button,
.random-bulk-count::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.records-list-item {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.records-list-item:hover {
  border-color: #b8c4d4;
  background: var(--surface-hover);
}

.records-list-item.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.records-list-item.is-marked {
  border-color: #dc2626;
  background: var(--record-marked-bg);
}

.records-list-item.is-marked.is-active {
  border-color: #dc2626;
  background: var(--record-marked-active-bg);
}

.records-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.records-select-all-label {
  font-size: 0.78rem;
  color: var(--text);
}

.records-list-hint {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.records-list-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.records-zufall-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

.candidate-zufall-note {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.82rem;
}

.records-list-meta {
  font-size: 0.68rem;
  color: var(--muted);
}

.records-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.records-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.records-editor-head h2 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1 1 auto;
  min-width: 0;
}

.records-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
}

.records-editor-actions .btn.small {
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
}

.records-editor-hint {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  color: var(--muted);
}

.records-view-placeholder {
  margin: 0 0 1rem;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #f8fafc;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

body.records-view-only .records-wizard-mount input:not([type="hidden"]),
body.records-view-only .records-wizard-mount textarea {
  background: #f8fafc;
  color: var(--text);
  cursor: default;
}

body.records-view-only .records-wizard-mount input:disabled,
body.records-view-only .records-wizard-mount select:disabled {
  opacity: 1;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

body.records-view-only .records-wizard-mount .inline-check {
  opacity: 0.92;
}

.candidate-detail {
  min-width: 0;
  --panel-border: var(--ch1-border);
  --panel-bg: linear-gradient(180deg, var(--ch1-soft) 0%, var(--panel-gradient-end) 42%);
  --panel-heading-color: var(--ch1);
  --panel-section-divider: rgba(179, 204, 230, 0.55);
  --panel-shadow: var(--glass-tint-ch1-shadow);
}

.candidate-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.candidate-section {
  border: none;
  background: transparent;
  padding: 0;
}

.candidate-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
}

.candidate-sub-heading {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--panel-heading-color, var(--muted));
}

.candidate-sub-heading:not(:first-child) {
  margin-top: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--panel-section-divider, var(--border));
}

.candidate-step {
  color: var(--muted);
  font-weight: 600;
  margin-right: 0.25rem;
}

.candidate-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.candidate-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

.candidate-fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.candidate-fact dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.candidate-fact dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.candidate-empty,
.candidate-empty-block {
  color: var(--muted);
  font-style: italic;
}

.candidate-empty-block {
  margin: 0;
  font-size: 0.84rem;
}

.candidate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.candidate-list-item {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  font-size: 0.86rem;
  line-height: 1.4;
}

.candidate-list-item strong {
  font-weight: 650;
}

.candidate-tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
}

.candidate-exp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.candidate-exp-meta {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
}

.candidate-exp-sub {
  margin-top: 0.25rem;
  color: var(--text);
}

.candidate-exp-note {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.candidate-text-block {
  margin-top: 0.85rem;
}

.candidate-text-block:first-of-type {
  margin-top: 0;
}

.candidate-text-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.candidate-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.records-layout-with-search {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  grid-template-areas:
    "search search"
    "list detail";
}

.records-layout-database {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.records-database-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.records-database-toolbar[hidden] {
  display: none !important;
}

.records-database-toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.records-database-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.records-create-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--glass-tint-accent-shadow);
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--glass-transition);
}

.records-create-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-hover);
}

.records-create-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.records-database-body {
  min-width: 0;
}

.records-list-panel--wide {
  max-height: calc(var(--app-viewport-height) - 14rem);
}

.records-list-panel--wide .records-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem;
}

.records-capture-panel[hidden] {
  display: none !important;
}

.records-capture-panel {
  min-width: 0;
}

.records-capture-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}

.records-capture-status {
  margin: 0;
  min-height: 1.25rem;
}

.records-capture-head {
  margin-bottom: 0.85rem;
}

.records-back-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.38rem 0.8rem;
  cursor: pointer;
  transition: var(--glass-transition);
}

.records-back-btn:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.records-layout-database > .status {
  margin: 0;
}

.records-layout-database.is-capture-open .records-database-toolbar,
.records-layout-database.is-capture-open .records-database-body,
.records-layout-database.is-capture-open .records-kunde-detail,
.records-layout-database.is-capture-open .records-kontakt-detail {
  display: none;
}

.records-layout-database.is-detail-open .records-database-toolbar,
.records-layout-database.is-kontakt-detail-open .records-database-toolbar,
.records-layout-database.is-detail-open .records-database-body {
  display: none;
}

.records-layout-database.is-kontakt-detail-open .records-database-body,
.records-layout-database.is-kontakt-detail-open .records-kunde-detail {
  display: none;
}

.records-kontakt-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.records-kontakt-detail[hidden] {
  display: none !important;
}

.records-kontakt-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.records-kunde-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.records-kunde-detail[hidden] {
  display: none !important;
}

.records-kunde-detail-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.records-kunde-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.records-kunde-detail-intro {
  --records-kunde-logo-size: 50px;
  min-width: 0;
  padding: 0.35rem 0 0.15rem;
}

.records-kunde-detail-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.records-kunde-detail-logo {
  flex-shrink: 0;
}

.records-kunde-detail-copy {
  min-width: 0;
  flex: 1;
}

.records-kunde-detail-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
}

.records-kunde-detail-title [data-company-name] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.records-kunde-logo-slot {
  width: var(--records-kunde-logo-size, 50px);
  height: var(--records-kunde-logo-size, 50px);
  flex-shrink: 0;
}

.records-kunde-logo-slot .exp-company-logo,
.records-kunde-logo-slot .exp-company-logo-fallback {
  width: var(--records-kunde-logo-size, 50px);
  height: var(--records-kunde-logo-size, 50px);
  border-radius: 10px;
  font-size: 0.9rem;
}

.records-list-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.records-list-stack {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  width: 100%;
}

.records-list-primary {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}

.records-list-primary--firma {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.records-list-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--muted);
}

.records-list-firma {
  min-width: 0;
  overflow-wrap: anywhere;
}

.records-list-logo-slot.exp-company-logo-slot {
  width: 30px;
  height: 30px;
}

.records-list-logo-slot .exp-company-logo,
.records-list-logo-slot .exp-company-logo-fallback {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 0.68rem;
}

.records-kunde-detail-meta {
  margin: 0.3rem 0 0;
  padding: 0;
  text-align: left;
  color: var(--muted);
  font-size: 0.92rem;
}

.records-kontakte-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-base);
  padding: 0.85rem;
}

.records-kontakte-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.records-kontakte-head h3 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.records-kontakte-empty,
.records-kontakte-limit {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.records-kontakte-limit {
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-style: italic;
}

.records-kontakte-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem;
}

.kunden-kontakt-item {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kunden-kontakt-item:hover {
  border-color: #b8c4d4;
  background: var(--surface-hover);
}

.kunden-kontakt-name {
  font-weight: 600;
}

.kunden-kontakt-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.records-create-btn.is-disabled,
.records-create-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.records-vakanzen-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-base);
  padding: 0.85rem;
}

.records-vakanzen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.records-vakanzen-head h3 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.records-vakanzen-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.records-vakanzen-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem;
}

.kunden-vakanz-item {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kunden-vakanz-item:hover {
  border-color: #b8c4d4;
  background: #f8fafc;
}

.kunden-vakanz-name {
  font-weight: 600;
}

.kunden-vakanz-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.records-capture-context {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

body.kunde-capture-vakanz-only #wizard-mount-kunde details[data-step="1"],
body.kunde-capture-vakanz-only .records-wizard-mount details[data-step="1"] {
  display: none;
}

body.kunde-capture-kontakt-only #wizard-mount-kunde details[data-step="2"],
body.kunde-capture-kontakt-only .records-wizard-mount details[data-step="2"] {
  display: none;
}

body.kunde-capture-customer-only #wizard-mount-kunde .kunde-kontakt-row,
body.kunde-capture-customer-only .records-wizard-mount .kunde-kontakt-row {
  display: none;
}

body.kunde-capture-kontakt-only #wizard-mount-kunde input[name="kunde"],
body.kunde-capture-vakanz-only #wizard-mount-kunde input[name="kunde"],
body.kunde-capture-kontakt-only .records-wizard-mount input[name="kunde"],
body.kunde-capture-vakanz-only .records-wizard-mount input[name="kunde"] {
  opacity: 0.82;
}

body.kunde-capture-customer-only #wizard-mount-kunde details[data-step="2"],
body.kunde-capture-customer-only .records-wizard-mount details[data-step="2"] {
  display: none;
}

.records-layout-with-search .candidate-search-bar {
  grid-area: search;
}

.records-layout-with-search .records-list-panel {
  grid-area: list;
  max-height: calc(var(--app-viewport-height) - 11rem);
  position: sticky;
  top: 0.75rem;
}

.records-layout-with-search .records-viewer {
  grid-area: detail;
  min-width: 0;
}

.candidate-search-bar {
  margin-bottom: 0.15rem;
}

.candidate-search-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.candidate-search-row {
  position: relative;
  display: flex;
  align-items: center;
}

.candidate-search-input {
  width: 100%;
  padding: 0.65rem 2.35rem 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface-base);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.candidate-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.candidate-search-input::placeholder {
  color: #94a3b8;
}

.candidate-search-clear {
  position: absolute;
  right: 0.45rem;
  appearance: none;
  width: 1.65rem;
  height: 1.65rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.candidate-search-clear:hover {
  background: #f1f5f9;
  color: var(--text);
}

.candidate-search-meta {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 980px) {
  .records-layout-with-search {
    grid-template-areas:
      "search"
      "list"
      "detail";
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .candidate-facts-grid {
    grid-template-columns: 1fr;
  }
}

.records-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.btn.danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.btn.danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

@media (max-width: 980px) {
  :root {
    --brand-chrome-height: 5rem;
  }

  .brand-logo {
    top: 0.85rem;
    left: 1rem;
    height: 58px;
  }

  .brand-badge {
    top: 0.75rem;
    right: 1rem;
    width: 92px;
  }

  .records-layout {
    grid-template-columns: 1fr;
  }

  .records-list-panel {
    max-height: none;
  }

  .chapter-head-actions {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .chapter-head-actions .chapter-load-btn {
    width: 100%;
  }

  .chapter-random-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .chapter-random-actions .chapter-load-btn,
  .random-bulk-count-label,
  .random-bulk-count {
    width: 100%;
  }

  .records-sort-label {
    width: 100%;
    justify-content: space-between;
  }

  .records-sort-select {
    flex: 1;
    min-width: 0;
  }

  .accordion-chapter-head {
    flex-wrap: wrap;
  }

  .accordion-chapter-head::after {
    margin-left: auto;
  }
}

.header {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: var(--top-scenery-height);
  min-height: var(--top-scenery-height);
  margin: 0;
  padding: 0;
  background: transparent;
}

.header h1 {
  position: absolute;
  left: var(--header-title-left);
  bottom: var(--header-title-bottom);
  margin: 0;
  max-width: calc(100% - 2 * var(--header-title-left));
  font-family: var(--app-font);
  font-size: 4rem;
  font-weight: 1400;
  letter-spacing: 0em;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  color: #fff;
  text-shadow: var(--title-text-shadow);
  transition:
    color 0.28s ease,
    text-shadow 0.28s ease,
    font-size 0.28s ease,
    padding 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.header-title-group {
  position: absolute;
  left: var(--header-title-left);
  bottom: var(--header-title-bottom);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  max-width: calc(100% - 2 * var(--header-title-left));
  transition:
    color 0.28s ease,
    text-shadow 0.28s ease,
    font-size 0.28s ease,
    padding 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.header-title-group h1 {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  line-height: 1;
}

.page-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.45em;
  padding: 0.34em 0.95em;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.85);
  background: rgba(220, 38, 38, 0.7);
  color: #fff;
  font-family: var(--app-font);
  font-size: 0.155em;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

.header h1.header-title--pinned,
.header-title-group.header-title--pinned {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 55;
  max-width: none;
  padding: 0.55rem var(--header-title-left);
  text-shadow: none;
  background: var(--header-pinned-bg);
  border-bottom: 1px solid var(--header-pinned-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.header h1.header-title--pinned {
  font-size: 2rem;
  color: var(--text);
}

.header-title-group.header-title--pinned h1 {
  font-size: 2rem;
  color: var(--text);
}

body.has-app-sidebar .header h1.header-title--pinned,
body.has-app-sidebar .header-title-group.header-title--pinned {
  left: var(--sidebar-width);
  transition:
    color 0.28s ease,
    text-shadow 0.28s ease,
    font-size 0.28s ease,
    padding 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    left var(--sidebar-transition);
}

/* Pin after scenery: bar fades in, title rises — no horizontal slide */
.header:not(.header-hub) h1.header-title--pinned,
.header:not(.header-hub) .header-title-group.header-title--pinned {
  background-color: var(--header-pinned-bg);
  transform: translateY(0);
  border-bottom-color: var(--header-pinned-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.78s ease,
    border-color 0.78s ease,
    box-shadow 0.78s ease,
    color 0.55s ease 0.12s;
}

.header:not(.header-hub) h1.header-title--pinned.header-title--pin-enter,
.header:not(.header-hub) .header-title-group.header-title--pinned.header-title--pin-enter {
  transform: translateY(calc(100% + 0.75rem));
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0);
  color: transparent;
}

.header:not(.header-hub) .header-title-group.header-title--pinned.header-title--pin-enter h1 {
  color: transparent;
  transition: color 0.55s ease 0.12s;
}

body.has-app-sidebar .header:not(.header-hub) h1.header-title--pinned,
body.has-app-sidebar .header:not(.header-hub) .header-title-group.header-title--pinned {
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.78s ease,
    border-color 0.78s ease,
    box-shadow 0.78s ease,
    color 0.55s ease 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .header h1,
  .header-title-group,
  body.has-app-sidebar .header h1.header-title--pinned,
  body.has-app-sidebar .header-title-group.header-title--pinned,
  .header:not(.header-hub) h1.header-title--pinned,
  .header:not(.header-hub) .header-title-group.header-title--pinned {
    transition: none;
  }

  .header:not(.header-hub) h1.header-title--pinned.header-title--pin-enter,
  .header:not(.header-hub) .header-title-group.header-title--pinned.header-title--pin-enter {
    transform: none;
    background-color: var(--header-pinned-bg);
    border-bottom-color: var(--header-pinned-border);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    color: var(--text);
  }

  .header:not(.header-hub) .header-title-group.header-title--pinned.header-title--pin-enter h1 {
    color: var(--text);
  }
}

.subtitle {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.subtitle strong {
  color: var(--text);
}

.header--with-action {
  padding-inline: 0;
}

.header-action-btn {
  position: absolute;
  top: 0.75rem;
  left: var(--header-title-left);
  z-index: 1;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font: inherit;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--glass-tint-accent-shadow);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--glass-transition);
}

.header-action-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-hover);
}

.header-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-action-spacer {
  display: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
}

.accordion-chapter {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow: hidden;
  border-left-width: 4px;
  border-left-style: solid;
}

.accordion-chapter[data-chapter="1"] {
  --accent: #2b65a5;
  --accent-hover: #234f84;
  --accent-soft: #eef4fa;
  --panel-border: var(--ch1-border);
  --panel-bg: linear-gradient(180deg, var(--ch1-soft) 0%, var(--panel-gradient-end) 42%);
  --panel-heading-color: var(--ch1);
  --panel-section-divider: rgba(179, 204, 230, 0.55);
  --panel-shadow: var(--glass-tint-ch1-shadow);
  border-left-color: var(--ch1);
}

.accordion-chapter[data-chapter="2"] {
  --panel-border: var(--ch2-border);
  --panel-bg: linear-gradient(180deg, var(--ch2-soft) 0%, var(--panel-gradient-end) 42%);
  --panel-heading-color: var(--ch2);
  --panel-section-divider: rgba(254, 215, 170, 0.55);
  --panel-shadow: var(--glass-tint-ch2-shadow);
  border-left-color: var(--ch2);
}

.accordion-chapter[data-chapter="3"] {
  --panel-border: var(--ch3-border);
  --panel-bg: linear-gradient(180deg, var(--ch3-soft) 0%, var(--panel-gradient-end) 42%);
  --panel-heading-color: var(--ch3);
  --panel-section-divider: rgba(167, 243, 208, 0.55);
  --panel-shadow: var(--glass-tint-ch3-shadow);
  border-left-color: var(--ch3);
}

.accordion-chapter[open] {
  background: var(--surface-base);
}

.accordion-chapter[data-chapter="1"][open] {
  background: var(--ch1-soft);
}

.accordion-chapter[data-chapter="2"][open] {
  background: var(--ch2-soft);
}

.accordion-chapter[data-chapter="3"][open] {
  background: var(--ch3-soft);
}

.accordion-chapter > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.accordion-chapter > summary::-webkit-details-marker {
  display: none;
}

.accordion-chapter-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 0.8rem;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}

.accordion-chapter[open] > .accordion-chapter-head {
  border-bottom-color: var(--border);
}

.accordion-chapter[data-chapter="1"][open] > .accordion-chapter-head {
  background: var(--ch1-chapter-head);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.accordion-chapter[data-chapter="2"][open] > .accordion-chapter-head {
  background: var(--ch2-chapter-head);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.accordion-chapter[data-chapter="3"][open] > .accordion-chapter-head {
  background: var(--ch3-chapter-head);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.accordion-chapter-head:hover {
  background: var(--surface-hover);
}

.accordion-chapter[data-chapter="1"] > .accordion-chapter-head:hover {
  background: var(--ch1-chapter-head-hover);
}

.accordion-chapter[data-chapter="1"][open] > .accordion-chapter-head .accordion-chapter-title,
.accordion-chapter[data-chapter="1"] > .accordion-chapter-head:hover .accordion-chapter-title {
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.accordion-chapter[data-chapter="1"][open] > .accordion-chapter-head::after,
.accordion-chapter[data-chapter="1"] > .accordion-chapter-head:hover::after {
  border-right-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.accordion-chapter[data-chapter="2"] > .accordion-chapter-head:hover {
  background: var(--ch2-chapter-head-hover);
}

.accordion-chapter[data-chapter="2"][open] > .accordion-chapter-head .accordion-chapter-title,
.accordion-chapter[data-chapter="2"] > .accordion-chapter-head:hover .accordion-chapter-title {
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.accordion-chapter[data-chapter="2"][open] > .accordion-chapter-head::after,
.accordion-chapter[data-chapter="2"] > .accordion-chapter-head:hover::after {
  border-right-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.accordion-chapter[data-chapter="3"] > .accordion-chapter-head:hover {
  background: var(--ch3-chapter-head-hover);
}

.accordion-chapter[data-chapter="3"][open] > .accordion-chapter-head .accordion-chapter-title,
.accordion-chapter[data-chapter="3"] > .accordion-chapter-head:hover .accordion-chapter-title {
  color: #fff;
  text-shadow: var(--title-text-shadow);
}

.accordion-chapter[data-chapter="3"][open] > .accordion-chapter-head::after,
.accordion-chapter[data-chapter="3"] > .accordion-chapter-head:hover::after {
  border-right-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.accordion-chapter[open] > .accordion-chapter-head:hover {
  filter: brightness(0.98);
}

.accordion-chapter-head::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.accordion-chapter[open] > .accordion-chapter-head::after {
  transform: rotate(-135deg);
}

.chapter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}

.accordion-chapter[data-chapter="1"] .chapter-num {
  background: var(--ch1);
  box-shadow: 0 2px 6px rgba(43, 101, 165, 0.28);
}

.accordion-chapter[data-chapter="2"] .chapter-num {
  background: var(--ch2);
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.24);
}

.accordion-chapter[data-chapter="3"] .chapter-num {
  background: var(--ch3);
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.24);
}

.accordion-chapter-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.accordion-chapter-items {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.45rem 0.55rem 0.6rem;
  margin-left: 0.75rem;
  border-left: 2px solid #ececec;
}

.accordion-chapter[data-chapter="1"] .accordion-chapter-items {
  border-left-color: var(--ch1-border);
}

.accordion-chapter[data-chapter="2"] .accordion-chapter-items {
  border-left-color: var(--ch2-border);
}

.accordion-chapter[data-chapter="3"] .accordion-chapter-items {
  border-left-color: var(--ch3-border);
}

.accordion-item-sub > summary {
  font-size: 0.92rem;
}

.step-num-sub {
  width: auto;
  min-width: 2.15rem;
  height: 1.45rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: -0.02em;
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-softest);
  overflow: hidden;
}

.accordion-item[open] {
  background: var(--surface-base);
}

.accordion-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.62rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}

.accordion-item[open] > summary {
  border-bottom-color: var(--border);
  background: #f8fafc;
}

.accordion-chapter[data-chapter="1"] .accordion-item[open] > summary {
  background: var(--accordion-summary-open-bg);
  border-bottom-color: var(--ch1-border);
}

.accordion-chapter[data-chapter="2"] .accordion-item[open] > summary {
  background: var(--accordion-summary-open-bg);
  border-bottom-color: var(--ch2-border);
}

.accordion-chapter[data-chapter="3"] .accordion-item[open] > summary {
  background: var(--accordion-summary-open-bg);
  border-bottom-color: var(--ch3-border);
}

.accordion-item > summary::-webkit-details-marker {
  display: none;
}

.accordion-item > summary::after {
  content: "";
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.accordion-item[open] > summary::after {
  transform: rotate(-135deg);
}

.accordion-item > summary:hover {
  background: var(--surface-hover);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.accordion-chapter[data-chapter="1"] .step-num-sub {
  background: var(--ch1);
}

.accordion-chapter[data-chapter="2"] .step-num-sub {
  background: var(--ch2);
}

.accordion-chapter[data-chapter="3"] .step-num-sub {
  background: var(--ch3);
}

.accordion-body {
  padding: 0.72rem 0.85rem 0.85rem;
}

.accordion-body--compact {
  padding: 0.48rem 0.58rem 0.58rem;
}

.grid-compact {
  gap: 0.55rem 0.65rem;
}

.cv-combined-section .anrede-group {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.cv-combined-section .anrede-group legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.28rem;
  padding: 0;
}

.cv-combined-section .avail-field {
  gap: 0.28rem;
}

.cv-combined-section .kuendigung-field {
  margin: 0;
}

/* 1.1–1.5 — Kapitel-Box (blauer Header, weisser Inhalt) */
details[data-step="profile"],
details[data-step="edu-exp"],
details[data-step="5"],
details[data-step="6"],
details[data-step="7"] {
  border: 1px solid var(--ch1-box-border);
  background: var(--surface-base);
}

details[data-step="profile"][open],
details[data-step="edu-exp"][open],
details[data-step="5"][open],
details[data-step="6"][open],
details[data-step="7"][open] {
  background: var(--surface-base);
}

details[data-step="profile"] > summary,
details[data-step="edu-exp"] > summary,
details[data-step="5"] > summary,
details[data-step="6"] > summary,
details[data-step="7"] > summary,
.accordion-chapter[data-chapter="1"] details[data-step="profile"][open] > summary,
.accordion-chapter[data-chapter="1"] details[data-step="edu-exp"][open] > summary,
.accordion-chapter[data-chapter="1"] details[data-step="5"][open] > summary,
.accordion-chapter[data-chapter="1"] details[data-step="6"][open] > summary,
.accordion-chapter[data-chapter="1"] details[data-step="7"][open] > summary {
  background: var(--ch1-box-head);
  color: var(--text);
  border-bottom-color: var(--ch1-border);
}

details[data-step="profile"] > summary:hover,
details[data-step="edu-exp"] > summary:hover,
details[data-step="5"] > summary:hover,
details[data-step="6"] > summary:hover,
details[data-step="7"] > summary:hover {
  background: var(--ch1-box-head-hover);
}

details[data-step="profile"] > summary::after,
details[data-step="edu-exp"] > summary::after,
details[data-step="5"] > summary::after,
details[data-step="6"] > summary::after,
details[data-step="7"] > summary::after {
  border-right-color: var(--muted);
  border-bottom-color: var(--muted);
}

details[data-step="profile"] > summary .step-num,
details[data-step="profile"] > summary .step-num-sub,
details[data-step="edu-exp"] > summary .step-num,
details[data-step="edu-exp"] > summary .step-num-sub,
details[data-step="5"] > summary .step-num,
details[data-step="5"] > summary .step-num-sub,
details[data-step="6"] > summary .step-num,
details[data-step="6"] > summary .step-num-sub,
details[data-step="7"] > summary .step-num,
details[data-step="7"] > summary .step-num-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border-radius: 50%;
  background: var(--ch1);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  box-shadow: 0 2px 6px rgba(43, 101, 165, 0.28);
  flex-shrink: 0;
}

/* 2.1–2.2 — Header-Balken + Umrandung (wie Kapitel 1, Orange) */
.accordion-chapter[data-chapter="2"] details[data-step="1"],
.accordion-chapter[data-chapter="2"] details[data-step="2"] {
  border: 1px solid var(--ch2-box-border);
  background: var(--surface-base);
}

.accordion-chapter[data-chapter="2"] details[data-step="1"][open],
.accordion-chapter[data-chapter="2"] details[data-step="2"][open] {
  background: var(--surface-base);
}

.accordion-chapter[data-chapter="2"] details[data-step="1"] > summary,
.accordion-chapter[data-chapter="2"] details[data-step="2"] > summary,
.accordion-chapter[data-chapter="2"] details[data-step="1"][open] > summary,
.accordion-chapter[data-chapter="2"] details[data-step="2"][open] > summary {
  background: var(--ch2-box-head);
  color: var(--text);
  border-bottom-color: var(--ch2-border);
}

.accordion-chapter[data-chapter="2"] details[data-step="1"] > summary:hover,
.accordion-chapter[data-chapter="2"] details[data-step="2"] > summary:hover {
  background: var(--ch2-box-head-hover);
}

.accordion-chapter[data-chapter="2"] details[data-step="1"] > summary::after,
.accordion-chapter[data-chapter="2"] details[data-step="2"] > summary::after {
  border-right-color: var(--muted);
  border-bottom-color: var(--muted);
}

.accordion-chapter[data-chapter="2"] details[data-step="1"] > summary .step-num,
.accordion-chapter[data-chapter="2"] details[data-step="1"] > summary .step-num-sub,
.accordion-chapter[data-chapter="2"] details[data-step="2"] > summary .step-num,
.accordion-chapter[data-chapter="2"] details[data-step="2"] > summary .step-num-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border-radius: 50%;
  background: var(--ch2);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.24);
  flex-shrink: 0;
}

/* Kapitel 3 — Inhaltsbox mit passender Umrandung */
.accordion-chapter[data-chapter="3"] .accordion-chapter-items > .panel-box {
  border-color: var(--ch3-box-border);
  background: var(--surface-base);
}

details[data-step="profile"] .accordion-body--compact {
  padding: 0.48rem 0.58rem 0.52rem;
}

details[data-step="profile"] .cv-combined-section {
  padding: 0.46rem 0.1rem 0.5rem;
  background: transparent;
}

details[data-step="profile"] .cv-combined-section + .cv-combined-section {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  background: transparent;
}

details[data-step="profile"] .cv-combined-heading {
  margin: 0 0 0.34rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #334155;
}

details[data-step="profile"] label,
details[data-step="profile"] .alter-field-compact {
  gap: 0.16rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  text-align: left;
  align-self: start;
}

details[data-step="profile"] input:not([type="hidden"]):not([type="radio"]) {
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  border-radius: 6px;
  background: var(--surface-base);
  transition: var(--glass-transition);
}

details[data-step="profile"] input:not([type="hidden"]):not([type="radio"]):hover:not(:focus):not(:read-only) {
  border-color: var(--accent-hover);
  background: var(--ch1-soft);
}

details[data-step="profile"] input:not([type="hidden"]):focus {
  border-color: var(--ch1);
  background: var(--surface-base);
  box-shadow: 0 0 0 2px rgba(43, 101, 165, 0.14);
}

details[data-step="profile"] .anrede-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-inline-size: 0;
}

details[data-step="profile"] .anrede-group legend {
  margin-bottom: 0.16rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  text-align: left;
}

details[data-step="profile"] input[type="radio"],
details[data-step="profile"] input[type="checkbox"] {
  padding: 0;
  margin: 0;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

details[data-step="profile"] .check-row--tight {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  gap: 0.08rem;
  padding: 0.1rem;
  background: var(--ch1-soft);
  border: 1px solid var(--ch1-border);
  border-radius: 6px;
  transition: var(--glass-transition);
}

details[data-step="profile"] .check-row--tight:focus-within {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 2px rgba(43, 101, 165, 0.12);
}

details[data-step="profile"] .inline-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0.22rem 0.48rem;
  font-size: 0.8rem;
  font-weight: 500;
  gap: 0.28rem;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  transition: var(--glass-transition);
}

details[data-step="profile"] .inline-check:hover {
  background: rgba(255, 255, 255, 0.45);
}

details[data-step="profile"] .inline-check:has(input:checked) {
  background: var(--surface-base);
  color: var(--ch1);
  border-color: var(--ch1-border);
  box-shadow: 0 1px 2px rgba(43, 101, 165, 0.08);
}

details[data-step="profile"] .alter-field-compact input:read-only {
  background: var(--ch1-soft);
  border-color: var(--ch1-border);
  color: var(--ch1);
  font-weight: 600;
  cursor: default;
  text-align: left;
}

details[data-step="profile"] .avail-field {
  gap: 0.16rem;
}

details[data-step="profile"] .avail-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
}

details[data-step="profile"] .avail-quick-btn {
  padding: 0.24rem 0.5rem;
  font-size: 0.68rem;
  transition: var(--glass-transition);
}

details[data-step="profile"] .avail-quick-btn:hover {
  transform: scale(1.02);
}

details[data-step="profile"] fieldset.anrede-group,
details[data-step="profile"] fieldset.kuendigung-field--choice {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  min-inline-size: 0;
}

details[data-step="profile"] .kuendigung-field--choice {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
  min-inline-size: 0;
}

details[data-step="profile"] .kuendigung-field--choice legend {
  margin-bottom: 0.16rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  text-align: left;
  padding: 0;
}

details[data-step="profile"] .kuendigung-field--choice .kuendigung-toggle {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  gap: 0.08rem;
  padding: 0.1rem;
  background: var(--ch1-soft);
  border: 1px solid var(--ch1-border);
  border-radius: 6px;
  transition: var(--glass-transition);
}

details[data-step="profile"] .kuendigung-field--choice .kuendigung-toggle:focus-within {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 2px rgba(43, 101, 165, 0.12);
}

details[data-step="profile"] .kuendigung-field--choice .kuendigung-toggle-btn {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0.22rem 0.48rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: var(--glass-transition);
}

details[data-step="profile"] .kuendigung-field--choice .kuendigung-toggle-btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.45);
}

details[data-step="profile"] .kuendigung-field--choice .kuendigung-toggle-btn.is-active {
  background: var(--surface-base);
  color: var(--ch1);
  border-color: var(--ch1-border);
  box-shadow: 0 1px 2px rgba(43, 101, 165, 0.08);
}

details[data-step="profile"] .kuendigung-frist-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #475569);
  text-align: left;
  align-self: start;
}

details[data-step="profile"] .kuendigung-frist-label {
  white-space: nowrap;
}

details[data-step="profile"] .kuendigung-frist-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

details[data-step="profile"] .kuendigung-frist-field input[name="kuendigungsfrist"] {
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  padding: 0.32rem 0.35rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  text-align: center;
}

details[data-step="profile"] .kuendigung-frist-units {
  display: inline-flex;
  gap: 0.2rem;
}

details[data-step="profile"] .kuendigung-unit-btn {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 4px;
  background: var(--input-bg, #f8fafc);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted, #64748b);
  cursor: pointer;
}

details[data-step="profile"] .kuendigung-unit-btn.is-active {
  border-color: var(--ch1-border, #2b65a5);
  background: var(--ch1-soft, #e8f0fa);
  color: var(--ch1-text, #1e4a7a);
}

/* 1.2 Ausbildung & Berufserfahrung — Inhalt wie 1.1 */
details[data-step="edu-exp"] .accordion-body--compact {
  padding: 0.48rem 0.58rem 0.52rem;
}

details[data-step="edu-exp"] fieldset.cv-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-inline-size: 0;
}

details[data-step="edu-exp"] .cv-fieldset-stack {
  gap: 0.45rem;
}

details[data-step="edu-exp"] .cv-fieldset + .cv-fieldset {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

details[data-step="edu-exp"] .cv-fieldset > legend {
  margin: 0 0 0.34rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #334155;
}

details[data-step="edu-exp"] label,
details[data-step="edu-exp"] .exp-field {
  gap: 0.16rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
}

details[data-step="edu-exp"] .exp-field-label,
details[data-step="edu-exp"] .exp-pensum-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
}

details[data-step="edu-exp"] .exp-pensum-input {
  padding: 0.28rem 0.35rem;
  min-height: 1.65rem;
  font-size: 0.78rem;
  text-align: center;
}

details[data-step="edu-exp"] .exp-card .lang-card-content {
  padding: 0;
}

details[data-step="edu-exp"] .exp-card-title,
details[data-step="edu-exp"] .exp-card-head-bar .lang-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

details[data-step="edu-exp"] input:not([type="hidden"]),
details[data-step="edu-exp"] textarea,
details[data-step="edu-exp"] .exp-dd-btn {
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  border-radius: 6px;
  background: var(--surface-base);
  transition: var(--glass-transition);
}

details[data-step="edu-exp"] .exp-monthpicker-field {
  min-height: 1.85rem;
  background: var(--surface-base);
}

details[data-step="edu-exp"] .exp-monthpicker-input {
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

details[data-step="edu-exp"] .exp-monthpicker-toggle {
  min-height: 1.85rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

details[data-step="edu-exp"] input:not([type="hidden"]):hover:not(:focus):not(:read-only):not(:disabled),
details[data-step="edu-exp"] textarea:hover:not(:focus):not(:read-only):not(:disabled),
details[data-step="edu-exp"] .exp-monthpicker-field:hover,
details[data-step="edu-exp"] .exp-dd-btn:hover:not(:focus):not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--ch1-soft);
}

details[data-step="edu-exp"] input:not([type="hidden"]):focus,
details[data-step="edu-exp"] textarea:focus,
details[data-step="edu-exp"] .exp-monthpicker-field:focus-within,
details[data-step="edu-exp"] .exp-monthpicker-field:has(.exp-monthpicker-toggle[aria-expanded="true"]),
details[data-step="edu-exp"] .exp-dd-btn[aria-expanded="true"] {
  border-color: var(--ch1);
  background: var(--surface-base);
  box-shadow: 0 0 0 2px rgba(43, 101, 165, 0.14);
}

details[data-step="edu-exp"] .exp-monthpicker-input:focus {
  box-shadow: none;
}

details[data-step="edu-exp"] .exp-card {
  border: 1px solid var(--ch1-border);
  border-radius: 6px;
  background: var(--surface-base);
}

details[data-step="edu-exp"] .exp-card-head-bar {
  padding: 0.32rem 1.45rem 0.32rem 0.48rem;
  background: var(--ch1-soft);
  border-bottom: 1px solid var(--ch1-border);
}

details[data-step="edu-exp"] .exp-card-body {
  padding: 0.38rem 0.48rem 0.42rem;
  gap: 0.32rem;
}

details[data-step="edu-exp"] .exp-add-btn {
  margin-top: 0.28rem;
  padding: 0.24rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--glass-tint-ch1-border);
  background: var(--glass-tint-ch1-bg);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #2b4a6e;
  border-radius: 999px;
}

details[data-step="edu-exp"] .exp-add-btn:hover {
  background: var(--glass-tint-ch1-bg-hover);
  border-color: var(--glass-tint-ch1-border-hover);
  color: #1e3a5f;
  transform: scale(1.02);
}

details[data-step="edu-exp"] .edu-range-toggle {
  align-self: flex-start;
  padding: 0.24rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--glass-tint-ch1-border);
  background: var(--glass-tint-ch1-bg);
  color: #2b4a6e;
  border-radius: 999px;
}

details[data-step="edu-exp"] .edu-range-toggle:hover {
  background: var(--glass-tint-ch1-bg-hover);
  border-color: var(--glass-tint-ch1-border-hover);
}

details[data-step="edu-exp"] .lang-overview-empty {
  font-size: 0.76rem;
  color: #94a3b8;
}

/* 1.3–1.5 — Inhalt wie 1.1 */
details[data-step="5"] .accordion-body--compact,
details[data-step="6"] .accordion-body--compact,
details[data-step="7"] .accordion-body--compact {
  padding: 0.48rem 0.58rem 0.52rem;
}

details[data-step="5"] .accordion-body.panel-box,
details[data-step="6"] .accordion-body.panel-box {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0.48rem 0.58rem 0.52rem;
}

details[data-step="7"] .panel-box.panel-box--pad {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

details[data-step="5"] label,
details[data-step="6"] label,
details[data-step="7"] label,
details[data-step="7"] .field-block {
  gap: 0.16rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  text-align: left;
}

details[data-step="5"] input:not([type="hidden"]),
details[data-step="6"] input:not([type="hidden"]),
details[data-step="7"] input:not([type="hidden"]),
details[data-step="7"] textarea,
details[data-step="7"] .exp-dd-btn {
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  border-radius: 6px;
  background: var(--surface-base);
  transition: var(--glass-transition);
}

details[data-step="5"] input:not([type="hidden"]):hover:not(:focus):not(:read-only):not(:disabled),
details[data-step="6"] input:not([type="hidden"]):hover:not(:focus):not(:read-only):not(:disabled),
details[data-step="7"] input:not([type="hidden"]):hover:not(:focus):not(:read-only):not(:disabled),
details[data-step="7"] textarea:hover:not(:focus):not(:read-only):not(:disabled),
details[data-step="7"] .exp-dd-btn:hover:not(:focus):not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--ch1-soft);
}

details[data-step="5"] input:not([type="hidden"]):focus,
details[data-step="6"] input:not([type="hidden"]):focus,
details[data-step="7"] input:not([type="hidden"]):focus,
details[data-step="7"] textarea:focus,
details[data-step="7"] .exp-dd-btn[aria-expanded="true"] {
  border-color: var(--ch1);
  background: var(--surface-base);
  box-shadow: 0 0 0 2px rgba(43, 101, 165, 0.14);
}

details[data-step="5"] .lang-overview .lang-card,
details[data-step="6"] .lang-overview .lang-card {
  border: 1px solid var(--ch1-border);
  border-radius: 6px;
  background: var(--surface-base);
}

details[data-step="5"] .lang-pill.is-selected,
details[data-step="6"] .lang-pill.is-selected {
  background: var(--ch1);
  border-color: var(--ch1);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #fff;
}

details[data-step="5"] .lang-pill.is-selected:hover,
details[data-step="6"] .lang-pill.is-selected:hover {
  background: #245a91;
  border-color: #245a91;
}

details[data-step="5"] .lang-custom-add .btn.small,
details[data-step="6"] .lang-custom-add .btn.small,
details[data-step="7"] .personality-refresh-btn {
  padding: 0.24rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--glass-tint-ch1-border);
  background: var(--glass-tint-ch1-bg);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #2b4a6e;
  border-radius: 999px;
}

details[data-step="5"] .lang-custom-add .btn.small:hover:not(:disabled),
details[data-step="6"] .lang-custom-add .btn.small:hover:not(:disabled),
details[data-step="7"] .personality-refresh-btn:hover {
  background: var(--glass-tint-ch1-bg-hover);
  border-color: var(--glass-tint-ch1-border-hover);
  color: #1e3a5f;
  transform: scale(1.02);
}

details[data-step="5"] .lang-overview-wrap,
details[data-step="6"] .lang-overview-wrap {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

details[data-step="5"] .lang-overview-empty,
details[data-step="6"] .lang-overview-empty {
  font-size: 0.76rem;
  color: #94a3b8;
}

@keyframes profile-field-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid.profile-grid {
  gap: 0.38rem 0.5rem;
}

.profile-grid--personal {
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(6.5rem, 7.5rem) minmax(2.8rem, 3.6rem);
  align-items: start;
  justify-items: start;
}

.profile-grid--avail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-items: start;
}

.profile-grid--personal label,
.profile-grid--avail label,
.profile-grid--personal .alter-field-compact,
.profile-grid--avail .kuendigung-frist-field,
.profile-grid--avail .avail-field {
  width: 100%;
  justify-self: stretch;
}

details[data-step="profile"] .anrede-group,
details[data-step="profile"] .kuendigung-field--choice {
  width: fit-content;
  max-width: 100%;
}

.profile-grid--personal .anrede-group,
.profile-grid--personal .alter-field-compact {
  min-width: 0;
}

.profile-grid--personal .profile-field-full {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .profile-grid--personal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-grid--avail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .profile-grid--personal,
  .profile-grid--avail {
    grid-template-columns: 1fr;
  }
}

.accordion-body h3 {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 0.75rem;
}

.grid.two {
  grid-template-columns: 1fr 1fr;
}

.full {
  grid-column: 1 / -1;
}

.avail-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.avail-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.avail-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

.avail-quick-btn {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--glass-tint-ch1-border);
  background: var(--glass-tint-ch1-bg);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #2b4a6e;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.avail-quick-btn:hover {
  background: var(--glass-tint-ch1-bg-hover);
  border-color: var(--glass-tint-ch1-border-hover);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #1e3a5f;
  transform: scale(1.04);
}

.avail-quick-btn.is-hidden {
  display: none;
}

.avail-quick-btn:focus-visible {
  outline: 2px solid var(--ch1);
  outline-offset: 2px;
}

.kuendigung-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.kuendigung-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.kuendigung-toggle {
  display: inline-flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.kuendigung-toggle-btn {
  appearance: none;
  min-width: 2.65rem;
  border: 1px solid var(--border);
  background: var(--surface-base);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.38rem 0.72rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--glass-transition);
}

.kuendigung-toggle-btn:hover:not(.is-active) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.kuendigung-toggle-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--glass-tint-accent-shadow);
}

.kuendigung-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kuendigung-frist-field.hidden,
.kuendigung-am-field.hidden {
  display: none;
}

.kuendigung-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

input,
select,
textarea {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-softest);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-base);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

textarea {
  resize: vertical;
  min-height: 58px;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
  font-style: italic;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--placeholder-color);
  opacity: 1;
  font-style: italic;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--placeholder-color);
  opacity: 1;
  font-style: italic;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0 0;
  background: var(--surface-softest);
}

legend {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0 0.35rem;
}

.row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.skills-block {
  margin-bottom: 1.25rem;
}

.skills-block:last-child {
  margin-bottom: 0;
}

.language-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.language-body > .hint {
  margin-bottom: 0.85rem;
}

.personality-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.personality-picker-wrap .personality-picker-line {
  flex-wrap: wrap;
  overflow-x: visible;
  margin: 0;
  padding: 0.15rem 0 0;
}

.personality-picker-wrap .lang-picker {
  flex: 1 1 100%;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  overflow-x: visible;
}

.personality-picker-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.personality-selected-line:not(:has(.lang-pill)) {
  display: none;
}

.personality-picker-wrap .personality-selected-line,
.personality-picker-wrap .personality-suggestions-line {
  flex-wrap: wrap;
  overflow-x: visible;
  margin: 0;
  padding: 0.15rem 0 0;
}

.personality-selected-picker,
.personality-suggestions-picker {
  flex-wrap: wrap;
}

.personality-selected-picker .lang-pill.is-selected,
.personality-suggestions-picker .lang-pill.is-selected {
  background: var(--ch1);
  border-color: var(--ch1);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #fff;
}

.personality-base-picker .lang-pill.is-selected:hover,
.personality-selected-picker .lang-pill.is-selected:hover,
.personality-suggestions-picker .lang-pill.is-selected:hover {
  background: #245a91;
  border-color: #245a91;
  box-shadow: var(--glass-tint-ch1-shadow);
  transform: translateY(-1px);
}

.personality-refresh-btn {
  appearance: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--glass-tint-ch1-border);
  border-radius: 999px;
  background: var(--glass-tint-ch1-bg);
  box-shadow: var(--glass-tint-ch1-shadow);
  color: #2b4a6e;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}

.personality-refresh-btn:hover {
  background: var(--glass-tint-ch1-bg-hover);
  border-color: var(--glass-tint-ch1-border-hover);
  color: #1e3a5f;
  transform: translateY(-1px);
}

.personality-refresh-btn:focus {
  outline: none;
}

.personality-refresh-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lang-picker-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  /* Platz für die Scale-Vergrösserung der Pills, sonst schneidet der Scroll-Container oben/links ab */
  padding: 0.35rem;
  margin: -0.35rem -0.35rem -0.2rem -0.35rem;
}

.lang-picker {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.lang-pill {
  appearance: none;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: #475569;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

.lang-pill:focus {
  outline: none;
}

.lang-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lang-pill:hover:not(:disabled):not(.is-selected) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  color: var(--text);
  transform: translateY(-1px);
}

.lang-pill.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glass-tint-accent-shadow);
  color: #fff;
  cursor: pointer;
  transform: none;
}

.lang-pill.is-selected:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-hover);
}

.lang-pill.is-unavailable {
  opacity: 0.38;
  cursor: not-allowed;
}

.lang-pill.is-adding {
  animation: lang-pill-pop 0.35s ease;
}

.lang-custom-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  max-width: 320px;
}

.lang-custom-add input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  border-radius: 999px;
}

.lang-custom-add .btn.small {
  padding: 0.3rem 0.7rem;
  font-size: 0.74rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}

.lang-custom-add .btn.small:hover:not(:disabled) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: scale(1.04);
}

.lang-custom-add .btn.small:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lang-overview-wrap {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.lang-overview-title {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-hover);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lang-overview {
  display: flex;
  flex-direction: column;
  min-height: 2rem;
}

/* Abstand über Margin statt Gap, damit er beim Ausfahren einer Karte mit-animiert werden kann */
.lang-overview .lang-card:not(:last-child) {
  margin-bottom: 0.28rem;
}

.lang-overview-empty {
  margin: 0;
  color: #b0b0b0;
  font-size: 0.84rem;
  font-style: italic;
}

.lang-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-base);
}

.lang-card.has-lang-flag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  height: 68px;
  pointer-events: none;
  background: var(--lang-flag-bg);
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(
    ellipse 120% 100% at 0% 0%,
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.65) 50%,
    rgba(0, 0, 0, 0.25) 65%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse 120% 100% at 0% 0%,
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.65) 50%,
    rgba(0, 0, 0, 0.25) 65%,
    transparent 82%
  );
}

.lang-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.45rem 0.65rem 0.5rem;
}

.lang-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 1.35rem;
}

.lang-card-name {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
}

.exp-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.exp-company-logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
  background: var(--surface-base);
  border: 1px solid #e8e8e8;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.exp-company-logo.hidden {
  display: none;
}

.exp-company-logo-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.exp-company-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.exp-company-logo-fallback.hidden {
  display: none;
}

.records-kunde-detail .exp-company-logo-slot.records-kunde-logo-slot {
  width: 50px;
  height: 50px;
}

.records-kunde-detail .records-kunde-logo-slot .exp-company-logo,
.records-kunde-detail .records-kunde-logo-slot .exp-company-logo-fallback {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  font-size: 0.9rem;
  padding: 4px;
}

.records-list-logo-slot.exp-company-logo-slot,
.records-layout-database .records-list-logo-slot .exp-company-logo,
.records-layout-database .records-list-logo-slot .exp-company-logo-fallback {
  width: 30px;
  height: 30px;
}

.records-list-logo-slot.exp-company-logo-slot {
  width: 30px;
  height: 30px;
}

.records-list-logo-slot .exp-company-logo,
.records-list-logo-slot .exp-company-logo-fallback {
  border-radius: 6px;
  font-size: 0.68rem;
}

.kunde-company-logo-slot.exp-company-logo-slot,
.kunde-company-logo-slot .exp-company-logo,
.kunde-company-logo-slot .exp-company-logo-fallback {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 0.68rem;
}

.exp-card-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}

.exp-card-title-wrap .exp-card-title {
  min-width: 0;
}

.exp-company-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.exp-company-input-wrap .exp-input {
  flex: 1;
  min-width: 0;
}

.kunde-ghost-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.kunde-input-stack {
  position: relative;
  flex: 1;
  min-width: 0;
}

.remove-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #dc4c4c;
  font-family: var(--app-font);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}

.lang-card .remove-btn,
.exp-card .remove-btn {
  position: absolute;
  top: 0.28rem;
  right: 0.36rem;
  z-index: 3;
}

.remove-btn::before {
  content: "×";
  display: block;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.remove-btn::after {
  display: none;
}

.remove-btn:hover {
  color: #b83a3a;
  background: transparent;
  box-shadow: none;
  transform: scale(1.12);
}

.remove-btn:focus {
  outline: none;
}

.remove-btn:focus-visible {
  outline: 2px solid #dc4c4c;
  outline-offset: 2px;
}

.lohn-runden-chip .remove-btn::before {
  font-size: 1rem;
}

.lang-level-current {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent);
  min-height: 1.1em;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.lang-step-control {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
}

.lang-step-track {
  display: block;
  position: relative;
  height: 28px;
  cursor: grab;
  touch-action: none;
}

.lang-step-track:active {
  cursor: grabbing;
}

.lang-step-line {
  position: absolute;
  left: calc(100% / 14);
  right: calc(100% / 14);
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, #cbd5e1 100%);
  pointer-events: none;
  z-index: 0;
}

.lang-step-level-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 72%, #fff);
  pointer-events: none;
  z-index: 1;
}

.lang-step-level-tick.is-active {
  background: var(--accent);
  height: 13px;
}

.lang-step-thumb {
  position: absolute;
  top: 50%;
  left: 7.14%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-base);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.22);
  cursor: grab;
  transition: left 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease, width 0.18s ease, height 0.18s ease;
  z-index: 4;
}

.lang-step-track:hover .lang-step-thumb,
.lang-step-thumb.is-dragging,
.lang-step-thumb:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.lang-step-thumb.is-dragging {
  cursor: grabbing;
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.lang-step-hit {
  display: none;
}

.lang-slider-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}

.lang-slider-labels.lang-slider-labels--cefr {
  position: relative;
  display: block;
  height: 1.35rem;
  margin-top: 0.05rem;
}

.lang-step-plus-btn {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--muted) 38%, transparent);
  background: var(--surface-base);
  appearance: none;
  padding: 0;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 75%, var(--text));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.lang-step-plus-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.lang-step-plus-btn.is-active,
.lang-step-plus-btn.is-preview {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.05rem 0;
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step.is-edge-start {
  transform: translateX(0);
  text-align: left;
  font-size: 0.62rem;
  max-width: 3.6rem;
  line-height: 1.15;
  white-space: normal;
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step.is-edge-end {
  transform: translateX(-100%);
  text-align: right;
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step.is-active,
.lang-slider-labels--cefr .lang-slider-label.is-main-step.is-preview {
  color: var(--text);
  font-weight: 700;
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step:hover {
  color: var(--text);
  transform: translateX(-50%) scale(1.06);
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step.is-edge-start:hover {
  transform: translateX(0) scale(1.04);
}

.lang-slider-labels--cefr .lang-slider-label.is-main-step.is-edge-end:hover {
  transform: translateX(-100%) scale(1.06);
}

.lang-slider-label {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.56rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.14s ease, color 0.14s ease;
}

.lang-slider-label:hover {
  color: var(--text);
  transform: scale(1.3);
}

.lang-slider-label.is-active {
  color: var(--text);
  font-weight: 600;
}

.lang-slider-label.is-preview {
  color: var(--text);
  font-weight: 600;
  transform: scale(1.4);
}

.lang-slider-label:first-child {
  font-size: 0.52rem;
}

.lang-slider-label.is-active:first-child {
  font-size: 0.56rem;
}

.lang-step-control.steps-4 .lang-step-line {
  left: calc(100% / 8);
  right: calc(100% / 8);
}

.lang-step-control.steps-6 .lang-step-line {
  left: calc(100% / 12);
  right: calc(100% / 12);
}

.lang-step-control.steps-12 .lang-step-line {
  left: calc(100% / 24);
  right: calc(100% / 24);
}

.lang-slider-labels.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.lang-slider-labels.cols-4 .lang-slider-label,
.lang-slider-labels.cols-4 .lang-slider-label:first-child {
  font-size: 0.62rem;
}

.lang-slider-labels.cols-4 .lang-slider-label.is-active:first-child {
  font-size: 0.62rem;
}

.lang-slider-labels.cols-4 .lang-slider-label:hover {
  transform: scale(1.08);
}

.lang-slider-labels.cols-4 .lang-slider-label.is-preview {
  transform: scale(1.12);
}

.lang-slider-labels.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.lang-slider-labels.cols-6 .lang-slider-label,
.lang-slider-labels.cols-6 .lang-slider-label:first-child {
  font-size: 0.52rem;
}

.lang-slider-labels.cols-6 .lang-slider-label.is-active,
.lang-slider-labels.cols-6 .lang-slider-label.is-active:first-child {
  font-size: 0.54rem;
}

.lang-slider-labels.cols-6 .lang-slider-label:hover {
  transform: scale(1.06);
}

.lang-card-desc {
  margin: 0;
  font-size: 0.66rem;
  color: var(--muted);
  line-height: 1.3;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* Berufserfahrung */

.exp-add-btn {
  appearance: none;
  align-self: flex-start;
  margin-top: 0.4rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  box-shadow: var(--glass-tint-accent-shadow);
  color: #fff;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.exp-add-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow-hover);
}

.exp-add-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.exp-card .lang-card-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.exp-card-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.38rem 1.5rem 0.38rem 0.55rem;
  background: #eceef2;
  border-bottom: 1px solid #dfe3ea;
  cursor: pointer;
  user-select: none;
}

.exp-card.is-collapsed .exp-card-head-bar {
  border-bottom: none;
}

.exp-card.is-collapsed .exp-card-body {
  display: none;
}

.card-drag-handle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 0.15rem 0.4rem 0.15rem 0.05rem;
  margin: -0.15rem 0.1rem -0.15rem -0.05rem;
  cursor: grab;
  touch-action: none;
}

.card-drag-handle span {
  display: block;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: #9aa3b0;
}

.card-drag-handle:hover span {
  background: #6b7380;
}

.card-drag-handle:active {
  cursor: grabbing;
}

.exp-card.is-dragging {
  opacity: 0.38;
}

.exp-card.is-drag-over-before .exp-card-head-bar {
  box-shadow: inset 0 3px 0 var(--accent, #4a6fa5);
}

.exp-card.is-drag-over-after .exp-card-head-bar {
  box-shadow: inset 0 -3px 0 var(--accent, #4a6fa5);
}

.exp-card-head-bar .exp-card-title {
  flex: 1;
  min-width: 0;
}

.exp-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 0.4rem 0.55rem 0.45rem;
}

.exp-interim-gap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.12rem 0.65rem 0.12rem 0.55rem;
  margin: 0.05rem 0;
}

.exp-interim-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e6b800;
  box-shadow: 0 0 0 2px rgba(230, 184, 0, 0.28);
}

.exp-interim-gap.is-medium .exp-interim-dot {
  background: #e8913a;
  box-shadow: 0 0 0 2px rgba(232, 145, 58, 0.28);
}

.exp-interim-gap.is-long .exp-interim-dot {
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.24);
}

.exp-interim-label {
  font-size: 0.72rem;
  font-weight: 600;
  font-style: italic;
  color: #a16207;
  letter-spacing: -0.01em;
}

.exp-interim-gap.is-medium .exp-interim-label {
  color: #b45309;
}

.exp-interim-gap.is-long .exp-interim-label {
  color: #b91c1c;
}

.exp-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.65rem;
}

.exp-date-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 7rem;
}

.exp-monthpicker {
  flex: 1;
  min-width: 0;
}

.exp-monthpicker-field {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 6.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.exp-monthpicker-field:hover {
  border-color: #aaa;
}

.exp-monthpicker-field:focus-within,
.exp-monthpicker-field:has(.exp-monthpicker-toggle[aria-expanded="true"]) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.exp-monthpicker-input {
  appearance: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.4rem 0.55rem;
  width: 100%;
  min-width: 0;
  flex: 1;
  box-shadow: none;
}

.exp-monthpicker-input:hover,
.exp-monthpicker-input:focus {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.exp-monthpicker-input.is-empty {
  color: var(--placeholder-color);
  font-style: italic;
}

.exp-monthpicker-toggle {
  appearance: none;
  flex-shrink: 0;
  width: 2rem;
  border: none;
  border-radius: 0;
  background: var(--surface-softest);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}

.exp-monthpicker-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-0.05rem, -0.1rem);
}

.exp-monthpicker-toggle:hover {
  background: #f3f4f6;
}

.exp-monthpicker-field:focus-within .exp-monthpicker-toggle,
.exp-monthpicker-toggle[aria-expanded="true"] {
  background: var(--accent-soft);
}

.exp-monthpicker-toggle[aria-expanded="true"] {
  box-shadow: none;
}

.exp-monthpicker-panel {
  display: none;
}

.exp-monthpicker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15, 23, 42, 0.35);
  animation: monthpicker-backdrop-in 0.18s ease;
}

.exp-monthpicker-backdrop.hidden {
  display: none;
}

.exp-monthpicker-portal {
  position: fixed;
  z-index: 910;
  min-width: 16.5rem;
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.16),
    0 8px 20px rgba(15, 23, 42, 0.08);
  animation: monthpicker-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-monthpicker-portal.hidden {
  display: none;
}

.exp-monthpicker-portal .exp-monthpicker-head {
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom-color: #e8edf3;
}

.exp-monthpicker-portal .exp-monthpicker-year {
  font-size: 0.95rem;
  color: var(--text);
}

.exp-monthpicker-portal .exp-monthpicker-nav {
  border-radius: 8px;
  background: #f8fafc;
  width: 2.1rem;
  height: 2.1rem;
}

.exp-monthpicker-portal .exp-monthpicker-nav:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--ch1-border);
  color: var(--accent);
}

.exp-monthpicker-portal .exp-monthpicker-grid {
  gap: 0.35rem;
}

.exp-monthpicker-portal .exp-monthpicker-cell {
  font-size: 0.76rem;
  padding: 0.48rem 0.3rem;
  background: #f8fafc;
  border-color: #eef2f7;
}

.exp-monthpicker-portal .exp-monthpicker-cell:hover:not(:disabled):not(.is-disabled) {
  background: var(--accent-soft);
  border-color: var(--ch1-border);
  color: var(--accent-hover);
}

.exp-monthpicker-portal .exp-monthpicker-cell.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

@keyframes monthpicker-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes monthpicker-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.exp-monthpicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #ececec;
}

.exp-monthpicker-year {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.exp-monthpicker-nav {
  appearance: none;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-softest);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.exp-monthpicker-nav:hover:not(:disabled) {
  background: var(--surface-base);
  border-color: #aaa;
}

.exp-monthpicker-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.exp-monthpicker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.exp-monthpicker-cell {
  appearance: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.42rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f4f4f4;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.exp-monthpicker-cell:hover:not(:disabled):not(.is-disabled) {
  background: var(--surface-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.exp-monthpicker-cell.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.exp-monthpicker-cell.is-disabled,
.exp-monthpicker-cell:disabled {
  opacity: 0.35;
  cursor: default;
  background: #f8f8f8;
}

.exp-card.has-overlap .lang-card-content {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45);
}

.exp-overlap-warning {
  margin: 0;
  padding: 0.45rem 0.85rem 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #b45309;
}

.exp-card.is-collapsed .exp-overlap-warning {
  padding-bottom: 0.55rem;
}

.exp-date-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 26px;
}

.exp-dd {
  position: relative;
}

.exp-dd-btn {
  appearance: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--surface-softest);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  min-width: 72px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.exp-dd-btn:hover {
  border-color: #aaa;
  background: var(--surface-base);
}

.exp-dd-btn.is-empty {
  color: var(--placeholder-color);
  font-style: italic;
}

.exp-year-input {
  width: 72px;
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
}

.exp-dd-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 40;
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem;
  display: grid;
  gap: 0.28rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  animation: exp-dd-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-dd-panel.hidden {
  display: none;
}

.exp-dd-months,
.exp-dd-years {
  min-width: 11rem;
}

.exp-dd-panel-list {
  grid-template-columns: 1fr;
  min-width: min(100%, 26rem);
  width: 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.mask-dd {
  width: 100%;
}

.mask-dd .exp-dd-btn {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mask-dd .mask-dd-btn::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  margin-top: -0.15rem;
  flex-shrink: 0;
}

.exp-dd-pill-list {
  border-radius: 999px;
  padding: 0.48rem 0.65rem;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}

.exp-dd-panel-list .exp-dd-pill-list:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  color: var(--text);
  transform: translateY(-1px) scale(1.01);
}

.exp-dd-panel-list .exp-dd-pill-list.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glass-tint-accent-shadow);
  color: #fff;
  font-weight: 600;
}

.exp-dd-pill {
  appearance: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 999px;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}

.exp-dd-pill:hover {
  background: var(--accent-soft);
  border-color: var(--glass-tint-accent-border);
  box-shadow: var(--glass-shadow-hover);
  color: var(--accent-hover);
  transform: translateY(-1px);
}

.exp-dd-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glass-tint-accent-shadow);
  color: #fff;
}

@keyframes exp-dd-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.exp-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.32rem 0.45rem;
  align-items: end;
}

.exp-field:last-child {
  grid-column: 1 / -1;
}

.exp-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  margin: 0;
}

.exp-field-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.2;
}

.exp-position-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 1.15rem;
}

.exp-field-position .exp-field-label {
  flex-shrink: 0;
}

.exp-pensum-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  margin-left: auto;
}

.exp-pensum-label {
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.exp-pensum-input {
  width: 3.15rem;
  min-width: 3.15rem;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.28rem;
  min-height: 0;
  height: 1.35rem;
  text-align: center;
  border: 1px solid #dfe3ea;
  border-radius: 5px;
  background: #eef1f5;
  color: #64748b;
}

.exp-pensum-input:hover {
  background: #e8ecf1;
  border-color: #d4dae3;
}

.exp-pensum-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
  background: #f4f6f9;
  color: var(--text);
}

input.exp-input {
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--text);
}

input.exp-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.edu-body {
  display: flex;
  flex-direction: column;
}

.panel-box,
.cv-combined-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-border, var(--border));
  border-radius: 8px;
  background: var(--panel-bg, #fafbfc);
  box-shadow: var(--panel-shadow, none);
  overflow: hidden;
}

.panel-box--pad {
  padding: 0.45rem 0.55rem 0.55rem;
}

.cv-combined-section {
  padding: 0.65rem 0.75rem 0.7rem;
}

.cv-combined-section + .cv-combined-section {
  border-top: 1px solid var(--panel-section-divider, var(--border));
  background: var(--surface-base);
}

.cv-combined-heading {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--panel-heading-color, var(--muted));
}

/* Fieldset-Panel-Prinzip (wie Abschnitt 2.2 «Lohnvorstellung Kandidat») */
.cv-fieldset-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cv-fieldset {
  margin: 0;
  padding: 0.55rem 0.65rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-softest);
}

.cv-fieldset > legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  padding: 0 0.35rem;
}

.cv-import-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 0.5fr);
  gap: 0.55rem 0.75rem;
  align-items: center;
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ch1-border);
  border-radius: 8px;
  background: var(--ch1-soft);
}

.cv-import-panel h3 {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  color: var(--text);
}

.cv-import-panel p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.cv-import-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px dashed var(--ch1-border);
  border-radius: 7px;
  background: var(--surface-base);
  cursor: pointer;
  transition: var(--glass-transition);
}

.cv-import-drop:hover {
  border-color: var(--accent);
  background: var(--glass-tint-ch1-bg-hover);
}

.cv-import-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cv-import-main {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent);
}

.cv-import-sub {
  font-size: 0.76rem;
  color: var(--muted);
}

.cv-import-panel.is-loading .cv-import-drop {
  opacity: 0.7;
  pointer-events: none;
}

.cv-import-progress {
  display: grid;
  gap: 0.28rem;
  width: 100%;
  margin-top: 0.35rem;
}

.cv-import-progress.hidden {
  display: none;
}

.cv-import-progress-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cv-import-progress-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0.34rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.cv-import-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  transition: width 0.28s ease;
}

.cv-import-panel.is-loading .cv-import-progress-fill {
  box-shadow: 0 0 10px color-mix(in srgb, #2563eb 45%, transparent);
}

.cv-import-panel.is-success .cv-import-sub {
  color: #047857;
}

.cv-import-panel.is-error .cv-import-sub {
  color: #b91c1c;
}

@media (max-width: 720px) {
  .cv-import-panel {
    grid-template-columns: 1fr;
  }
}

.panel-box.language-body {
  padding: 0.42rem 0.52rem 0.52rem;
  gap: 0;
}

.panel-box.language-body .lang-overview-wrap {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--panel-section-divider, var(--border));
}

.panel-box.language-body .lang-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 0.12rem 0.45rem;
  padding: 0.32rem 1.55rem 0.38rem 0.5rem;
}

.panel-box.language-body .lang-card-header {
  grid-column: 1;
  grid-row: 1;
}

.panel-box.language-body .lang-level-current {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 0.68rem;
  min-height: 0;
}

.panel-box.language-body .lang-card-desc {
  grid-column: 1 / -1;
  grid-row: 2;
}

.panel-box.language-body .lang-step-control {
  grid-column: 1 / -1;
  grid-row: 3;
  gap: 0.18rem;
}

.panel-box.language-body .lang-step-track {
  height: 22px;
}

.panel-box.language-body .lang-card-name {
  font-size: 0.8rem;
}

.panel-box.language-body .lang-custom-add {
  margin-top: 0.4rem;
}

.panel-box.kunde-block,
.panel-box.vakanz-block {
  padding: 0.65rem 0.75rem 0.7rem;
}

.edu-overview-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.edu-overview-wrap .lang-overview {
  min-height: 0;
}

.edu-year-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.edu-year-single.hidden,
.edu-range-fields.hidden {
  display: none;
}

.edu-range-toggle {
  align-self: flex-start;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.edu-range-toggle:hover {
  color: var(--accent-hover);
}

.edu-range-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.edu-year-input,
.edu-input {
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  width: 100%;
}

.exp-ghost-wrap {
  position: relative;
}

.exp-ghost {
  position: absolute;
  inset: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  font-size: 0.82rem;
  line-height: normal;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  color: var(--placeholder-color);
}

.exp-ghost-pad {
  visibility: hidden;
}

.exp-ghost .exp-ghost-rest {
  color: var(--placeholder-color);
  font-style: italic;
  font-weight: 400;
}

.exp-ghost-wrap input {
  position: relative;
  background: transparent;
  z-index: 2;
  width: 100%;
}

/* Ghost-Metrik für das normal grosse Kunde-Feld (globales Input-Padding) */
.kunde-ghost-wrap .exp-ghost {
  padding: 0.55rem 0.65rem;
  font-size: inherit;
}

.exp-ghost-wrap {
  background: var(--surface-softest);
  border-radius: 6px;
}

.exp-ghost-wrap:focus-within {
  background: var(--surface-base);
}

@media (max-width: 760px) {
  .exp-fields {
    grid-template-columns: 1fr;
  }
}

@keyframes lang-pill-pop {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.anrede-group {
  border: none;
  padding: 0;
  margin: 0;
}

.anrede-group legend {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0;
  margin-bottom: 0.35rem;
}

.check-row {
  display: flex;
  gap: 1.25rem;
}

/* 2.1 Kunde & Ansprechpartner — kompakte Zeile */
.accordion-body-compact {
  padding: 1rem 1.25rem 1.15rem;
}

.kunde-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kunde-firma-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.kunde-kontakt-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem 1.1rem;
  align-items: end;
}

.kunde-check-group {
  min-width: 0;
}

.kunde-check-group .check-row {
  gap: 0.85rem;
}

.kunde-check-group legend {
  font-size: 0.78rem;
  margin-bottom: 0.28rem;
}

.kunde-check-group .square-check {
  font-size: 0.82rem;
  gap: 0.35rem;
}

.kunde-name-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 0;
}

.kunde-name-field input {
  padding: 0.45rem 0.55rem;
  font-size: 0.85rem;
}

.kunde-kontakt-row .square-check:hover .square-box {
  border-color: var(--ch2);
}

.kunde-kontakt-row .square-check input:checked + .square-box {
  border-color: var(--ch2);
  background: var(--ch2);
}

.kunde-kontakt-row .square-check input:focus-visible + .square-box {
  outline: 2px solid var(--ch2);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .kunde-kontakt-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .kunde-name-field {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .kunde-kontakt-row {
    grid-template-columns: 1fr;
  }
}

/* 2.2 Vakanz & Konditionen — Vakanzname, Arbeitsort, Pensum in einer Zeile */
.vakanz-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lohn-flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
  margin-top: 0.45rem;
}

.lohn-flow-kicker {
  display: none;
}

.lohn-flow-arrow {
  align-self: flex-end;
  margin-bottom: 0.55rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}

.lohn-section-title {
  display: none;
}

.lohn-basis-block .lohn-select-row:first-of-type {
  margin-top: 0.45rem;
}

.lohn-calc-wrap .lohn-section-title {
  display: none;
}

.lohn-export-block {
  margin-top: 0.75rem;
}

.lohn-export-block .lohn-anzeige-wahl {
  margin-bottom: 0;
}

.vakanz-top-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  align-items: end;
}

.vakanz-top-row label {
  min-width: 0;
}

.vakanz-lohn-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.72fr);
  gap: 1rem;
  align-items: stretch;
}

.lohn-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.lohn-panel-fieldset {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-softest);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.lohn-panel-fieldset legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  padding: 0 0.35rem;
}

.lohn-panel-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
}

.lohn-panel-toolbar--left {
  justify-content: flex-start;
}

.fixer-lohn-toggle {
  margin: 0;
  font-weight: 500;
}

.fixer-lohn-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.fixer-lohn-fields[hidden] {
  display: none;
}

.fixer-lohn-inputs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.85rem;
  margin-top: 0.45rem;
}

.fixer-lohn-inputs .lohn-field-block {
  margin: 0;
  align-items: stretch;
  text-align: left;
}

.fixer-lohn-inputs .lohn-field-caption {
  min-height: 2.5rem;
  text-align: left;
}

.fixer-lohn-inputs .lohn-field-block input {
  min-height: 2.45rem;
  box-sizing: border-box;
  width: 100%;
}

/* Einheitliches Ausblassen: Fixer-Kundenlohn — Radio-Optionen & Eingabefelder */
.fixer-lohn-jahr-option.is-lohn-inactive,
.fixer-lohn-stunde-option.is-lohn-inactive,
.fixer-lohn-jahr-field.is-lohn-inactive,
.fixer-lohn-stunde-field.is-lohn-inactive {
  opacity: var(--lohn-faded-opacity);
  filter: grayscale(var(--lohn-faded-grayscale));
  transition: var(--lohn-faded-transition);
}

.fixer-lohn-jahr-option.is-lohn-inactive,
.fixer-lohn-stunde-option.is-lohn-inactive {
  pointer-events: auto;
}

.fixer-lohn-jahr-field.is-lohn-inactive,
.fixer-lohn-stunde-field.is-lohn-inactive {
  pointer-events: none;
}

.lohn-block.is-inactive .lohn-panel-fieldset {
  opacity: var(--lohn-faded-opacity);
  filter: grayscale(var(--lohn-faded-grayscale));
  pointer-events: none;
}

.fixer-lohn-block.is-inactive .lohn-panel-fieldset {
  opacity: var(--lohn-faded-opacity);
  filter: grayscale(var(--lohn-faded-grayscale));
}

.fixer-lohn-block.is-inactive .lohn-panel-toolbar {
  pointer-events: auto;
}

.fixer-lohn-block.is-inactive #fixer-lohn-fields {
  pointer-events: none;
}

.lohn-panel-fieldset {
  transition: var(--lohn-faded-transition);
}

@media (max-width: 820px) {
  .vakanz-top-row,
  .vakanz-lohn-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.hidden {
  display: none;
}

.lohn-block {
  margin: 0;
}

.lohn-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  background: var(--surface-softest);
}

.lohn-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
}

.inline-check input {
  width: auto;
  margin: 0;
}

.lohn-select-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-height: 2.25rem;
  margin-bottom: 0.65rem;
}

.lohn-select-label {
  min-width: 7.5rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
}

.pill-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pill-opt {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.pill-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.pill-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: #334155;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}

.pill-opt:hover span {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: scale(1.04);
}

.pill-opt input:checked + span {
  background: var(--glass-tint-ch2-bg);
  border-color: var(--glass-tint-ch2-border);
  box-shadow: var(--glass-tint-ch2-shadow);
  color: var(--text);
}

.pill-opt input:checked + span:hover,
.pill-opt:hover input:checked + span {
  background: var(--glass-tint-ch2-bg-hover);
  border-color: var(--glass-tint-ch2-border-hover);
  color: var(--text);
}

.pill-opt input:focus-visible + span {
  outline: 2px solid var(--ch2);
  outline-offset: 2px;
}

.lohn-inputs {
  margin-top: 0.45rem;
  gap: 0.85rem;
  align-items: end;
}

.lohn-field-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
}

.lohn-field-block input {
  width: 100%;
  min-height: 2rem;
  box-sizing: border-box;
}

.lohn-field-caption {
  display: block;
  min-height: 1.65rem;
  line-height: 1.25;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

.lohn-anzeige-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.lohn-anzeige-title {
  flex: 1 1 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.square-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.square-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.square-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1.5px solid #b0b0b0;
  border-radius: 4px;
  background: var(--surface-base);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.square-check:hover .square-box {
  border-color: var(--ch1);
}

.square-check input:checked + .square-box {
  border-color: var(--ch1);
  background: var(--ch1);
}

.square-check input:checked + .square-box::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin-top: -2px;
  margin-left: 1px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.square-check input:focus-visible + .square-box {
  outline: 2px solid var(--ch1);
  outline-offset: 2px;
}

.lohn-field-block .stundenlohn-field {
  position: relative;
  display: block;
}

.lohn-field-block .stundenlohn-field input {
  width: 100%;
}

.stundenlohn-field {
  position: relative;
  display: block;
}

.stundenlohn-field input {
  width: 100%;
}

.lohn-runden-chip {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  animation: lohn-runden-pop 0.16s ease;
}

/* Muss inline-flex überstimmen (höhere Spezifität), sonst blendet .hidden nicht aus */
.lohn-runden-chip.hidden {
  display: none;
}

@keyframes lohn-runden-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.9); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.lohn-runden-accept {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.lohn-runden-accept:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  color: var(--text);
  transform: scale(1.04);
}

.lohn-runden-arrow {
  font-size: 0.85rem;
}

.lohn-runden-q {
  opacity: 0.6;
}

.btn.small {
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
}

.btn.secondary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}

.btn.secondary.small {
  border-radius: 999px;
  font-weight: 600;
}

.btn.secondary.small:hover:not(:disabled) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: scale(1.04);
}

.btn.secondary.small:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lohn-calc-wrap .lohn-calc-toggle {
  display: none;
}

.lohn-calc {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfbfb;
  overflow: hidden;
}

.lohn-calc > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  transition: background 0.15s ease;
}

.lohn-calc > summary:hover {
  background: #f3f3f3;
}

.lohn-calc > summary::-webkit-details-marker {
  display: none;
}

.lohn-calc-icon {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.lohn-calc[open] .lohn-calc-icon {
  transform: rotate(90deg);
}

.lohn-calc > .lohn-calc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.lohn-calc[open] .lohn-calc-panel {
  grid-template-rows: 1fr;
}

.lohn-calc-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.lohn-calc-body {
  padding: 0.35rem 0.85rem 0.85rem;
  border-top: 1px solid var(--border);
}

.lohn-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.32rem 0;
  font-size: 0.86rem;
  color: var(--text);
}

.lohn-calc-add .lohn-calc-label,
.lohn-calc-sub .lohn-calc-label {
  color: var(--muted);
}

.lohn-calc-op {
  padding: 0.1rem 0 0.1rem 0.2rem;
  font-size: 0.76rem;
  color: #9a9a9a;
  font-style: italic;
}

.lohn-calc-label em {
  font-style: normal;
  color: #999;
  font-size: 0.8rem;
}

.lohn-calc-val {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lohn-calc-total {
  margin-top: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1.5px solid #2a2a2a;
  font-weight: 700;
  font-size: 0.95rem;
}

.lohn-calc-foot {
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.lohn-calc-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
}

.hint {
  color: #475569;
  font-size: 0.88rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  line-height: 1.45;
}

.accordion-chapter[data-chapter="1"] .hint {
  background: var(--ch1-soft);
  border-left-color: var(--ch1);
  color: #234f84;
}

.accordion-chapter[data-chapter="2"] .hint {
  background: var(--ch2-soft);
  border-left-color: var(--ch2);
  color: #9a3412;
}

.accordion-chapter[data-chapter="3"] .hint {
  background: var(--ch3-soft);
  border-left-color: var(--ch3);
  color: #065f46;
}

.document-preview-lead {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

.document-paths {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
}

.document-path-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.document-path-label {
  color: var(--muted);
  font-weight: 500;
}

.document-path-value {
  display: block;
  font-family: var(--app-font);
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-all;
  color: #1f2937;
}

.document-generate-progress {
  margin: 0 0 0.9rem;
  padding: 0.85rem 0.9rem;
  background: var(--ch3-soft);
  border: 1px solid var(--ch3-border);
  border-radius: 6px;
}

.document-generate-progress-label {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #065f46;
}

.document-generate-progress-track {
  height: 0.55rem;
  overflow: hidden;
  background: var(--accordion-summary-open-bg);
  border: 1px solid var(--ch3-border);
  border-radius: 999px;
}

.document-generate-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ch3) 0%, #059669 100%);
  transition: width 0.12s ease-out;
}

.document-generate-progress-hint {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.document-generate-duration {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #047857;
}

.document-generate-duration.hidden,
.document-generate-progress.hidden {
  display: none;
}

.summary {
  background: #f7f7f7;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  font-size: 0.9rem;
}

.summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.35rem 1rem;
}

.summary dt {
  color: var(--muted);
  font-weight: 500;
}

.summary dd {
  margin: 0;
}

.status {
  margin-top: 1rem;
  font-size: 0.9rem;
  min-height: 1.25rem;
}

.status.error {
  color: #a33;
}

.status.success {
  color: #3a3;
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.field-hint.is-error {
  color: #b91c1c;
}

.field-hint.hidden {
  display: none;
}

input.is-invalid,
textarea.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28);
}

/* Einheitlicher Feldstil wie in 1.1: weiss, kompakt, nur Rand reagiert. */
.accordion input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.random-bulk-count),
.accordion select,
.accordion textarea,
.exp-dd-btn {
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--text);
  transition: var(--glass-transition);
}

.exp-monthpicker-field {
  min-height: 1.85rem;
}

.exp-monthpicker-field .exp-monthpicker-input {
  padding: 0.32rem 0.48rem;
  min-height: 1.85rem;
  font-size: 0.82rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.exp-monthpicker-field .exp-monthpicker-toggle {
  min-height: 1.85rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.accordion textarea {
  min-height: 3.6rem;
}

.accordion input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.random-bulk-count):hover:not(:focus):not(:read-only):not(:disabled),
.accordion select:hover:not(:focus):not(:disabled),
.accordion textarea:hover:not(:focus):not(:read-only):not(:disabled),
.exp-monthpicker-field:hover,
.exp-dd-btn:hover:not(:focus):not(:disabled) {
  background: var(--surface-base);
  border-color: var(--ch1);
}

/* Kapitel 1: Felder beim Hover bläulich einfärben */
.accordion-chapter[data-chapter="1"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.random-bulk-count):hover:not(:focus):not(:read-only):not(:disabled),
.accordion-chapter[data-chapter="1"] select:hover:not(:focus):not(:disabled),
.accordion-chapter[data-chapter="1"] textarea:hover:not(:focus):not(:read-only):not(:disabled),
.accordion-chapter[data-chapter="1"] .exp-monthpicker-field:hover,
.accordion-chapter[data-chapter="1"] .exp-dd-btn:hover:not(:focus):not(:disabled) {
  background: var(--ch1-soft);
  border-color: var(--accent-hover);
}

.accordion input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.random-bulk-count):focus,
.accordion select:focus,
.accordion textarea:focus,
.exp-monthpicker-field:focus-within,
.exp-monthpicker-field:has(.exp-monthpicker-toggle[aria-expanded="true"]),
.exp-dd-btn[aria-expanded="true"] {
  background: var(--surface-base);
  border-color: var(--ch1);
  box-shadow: 0 0 0 2px rgba(43, 101, 165, 0.14);
}

.exp-monthpicker-field .exp-monthpicker-input:focus {
  box-shadow: none;
}

.geburtstag-field {
  display: flex;
  flex-direction: column;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.btn {
  font: inherit;
  padding: 0.65rem 1.75rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32);
}

@media (max-width: 640px) {
  .grid.two,
  .row-pair,
  .summary dl {
    grid-template-columns: 1fr;
  }

  .lang-slider-labels {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0.35rem;
  }

  .lang-overview-wrap {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }

  .lang-slider-label {
    font-size: 0.55rem;
  }

  .lang-slider-label:first-child {
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-load-btn:hover,
  .lang-pill:hover:not(:disabled),
  .lang-pill.is-selected:hover,
  .avail-quick-btn:hover,
  .personality-base-picker .lang-pill.is-selected:hover,
  .personality-selected-picker .lang-pill.is-selected:hover,
  .personality-suggestions-picker .lang-pill.is-selected:hover,
  .personality-refresh-btn:hover,
  .exp-dd-pill:hover,
  .exp-dd-panel-list .exp-dd-pill-list:hover,
  .pill-opt:hover span,
  .hub-nav-item:hover,
  .exp-add-btn:hover,
  .btn.secondary.small:hover:not(:disabled),
  .lang-custom-add .btn.small:hover:not(:disabled),
  .lohn-runden-accept:hover {
    transform: none;
  }
}

/* Kandidaten-Matcher */
.matcher-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}

.matcher-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.matcher-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.matcher-section-head h2 {
  margin: 0;
}

.matcher-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.matcher-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.matcher-results-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.matcher-job-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.matcher-job-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.matcher-job-grid input,
.matcher-job-grid textarea {
  width: 100%;
}

.matcher-full {
  grid-column: 1 / -1;
}

.matcher-hint {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}
  margin: 0.5rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
}

.matcher-all-check {
  margin-bottom: 0.5rem;
}

.matcher-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 220px;
  overflow: auto;
  padding-right: 0.25rem;
}

.matcher-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.25rem;
  border-radius: 6px;
}

.matcher-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.matcher-cv-panel {
  margin-top: 1.25rem;
}

.matcher-upload-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.matcher-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border, #dbeafe);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
}

.matcher-upload-remove {
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.matcher-actions {
  display: flex;
  justify-content: flex-start;
}

.matcher-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.matcher-result-card {
  border: 1px solid var(--border, #dbeafe);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: var(--accordion-summary-open-bg);
}

.matcher-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.matcher-result-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.matcher-result-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.matcher-travel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  align-items: center;
  margin-top: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.matcher-travel-muted {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.matcher-travel-route {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 0.72rem;
}

.matcher-travel-item strong {
  font-weight: 600;
  color: var(--text);
}

.matcher-travel-src {
  color: var(--muted);
  font-size: 0.68rem;
}

.matcher-score-badge {
  flex-shrink: 0;
  min-width: 2.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.matcher-score-high {
  background: #15803d;
}

.matcher-score-mid {
  background: #ca8a04;
}

.matcher-score-low {
  background: #b45309;
}

.matcher-result-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.85rem;
}

.matcher-result-columns h4 {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #64748b);
}

.matcher-bullet-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.matcher-result-actions {
  margin-top: 0.85rem;
}

@media (max-width: 760px) {
  .matcher-job-grid,
  .matcher-result-columns {
    grid-template-columns: 1fr;
  }

  .matcher-result-head {
    flex-direction: column;
  }
}

.ref-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ref-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ref-section h2 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
}

.ref-grid {
  display: grid;
  gap: 0.75rem 1rem;
}

.ref-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.ref-grid-1 {
  grid-template-columns: 1fr;
}

.ref-span-2 {
  grid-column: span 2;
}

.ref-full {
  display: block;
  margin-top: 0.75rem;
}

.inserate-layout .ref-form {
  gap: 0;
}

.inserate-layout .ref-section {
  padding: 0.75rem 0 1.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inserate-layout .ref-section + .ref-section {
  border-top: 1px solid var(--workspace-border);
}

.inserate-layout .ref-section h2 {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-info {
  --page-info-size: 2.15rem;
  --page-info-gap: 0.5rem;
  --page-info-inset: var(--app-content-gutter);
  position: fixed;
  bottom: var(--page-info-inset);
  right: var(--page-info-inset);
  z-index: 24;
}

body:has(.page-info) .app-workspace {
  padding-bottom: calc(2rem + var(--page-info-size) + var(--page-info-gap));
}

.page-info-btn {
  list-style: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--page-info-size);
  height: var(--page-info-size);
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border, #e2e8f0));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 5%, var(--workspace-bg, #fff));
  color: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.page-info-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.page-info-btn::-webkit-details-marker {
  display: none;
}

.page-info-btn:hover,
.page-info[open] > .page-info-btn {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border, #cbd5e1));
  background: color-mix(in srgb, var(--accent) 10%, var(--workspace-bg, #fff));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    0 2px 6px color-mix(in srgb, var(--accent) 12%, transparent);
}

.page-info-btn:hover::before,
.page-info[open] > .page-info-btn::before {
  transform: translateX(120%);
}

.page-info-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-info-btn::before {
    display: none;
  }
}

.page-info-panel {
  position: absolute;
  top: auto;
  bottom: calc(100% + 0.55rem);
  right: 0;
  width: min(22rem, calc(100vw - 3rem));
  padding: 0.85rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.85rem;
  background: var(--workspace-bg, #fff);
  color: var(--text, #0f172a);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.page-info-panel p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

.page-info-panel p + p {
  margin-top: 0.65rem;
}

[data-theme="dark"] .page-info-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(30, 41, 59, 0.96);
  color: var(--text);
}

[data-theme="dark"] .page-info-panel p {
  color: var(--muted);
}

.inserate-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.75rem;
}

.inserate-upload-btn {
  cursor: pointer;
}

.inserate-upload-name {
  font-size: 0.82rem;
  color: var(--muted);
}

.inserate-options-wrap {
  margin-top: 0.85rem;
  padding-top: 0.15rem;
}

.inserate-options-stack {
  width: 100%;
  grid-template-columns: 1fr var(--settings-switch-w);
  row-gap: 0.45rem;
}

.inserate-options-stack .settings-row-title {
  white-space: normal;
}

.inserate-options-stack .inserate-option-detail {
  grid-column: 1 / -1;
  margin: -0.08rem 0 0.2rem;
  padding-left: 0;
}

.inserate-zusatz-sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.inserate-zusatz-sections.hidden {
  display: none;
}

.inserate-zusatz-block {
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.inserate-zusatz-block h3 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.inserate-zusatz-block p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

.inserate-parse-progress {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.inserate-parse-progress.hidden {
  display: none;
}

.inserate-parse-progress-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.inserate-parse-progress-bar {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
  overflow: hidden;
}

.inserate-parse-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease;
}

.inserate-actions-top,
.inserate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.inserate-actions-top {
  margin-top: 0.85rem;
  justify-content: flex-start;
}

.inserate-status {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.inserate-status.is-error {
  color: #b91c1c;
}

.ref-rating-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ref-rating-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.4fr) minmax(0, 2fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid #edf2f7;
}

.ref-rating-row:last-child {
  border-bottom: none;
}

.ref-rating-label {
  font-size: 0.88rem;
  color: var(--text, #1e293b);
}

.ref-rating-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.ref-rating-options-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ref-rating-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: var(--surface-base);
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}

.ref-rating-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ref-rating-option:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

.ref-absenzen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #edf2f7;
}

.ref-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .ref-grid-4,
  .ref-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .ref-span-2 {
    grid-column: span 2;
  }

  .ref-rating-row {
    grid-template-columns: 1fr;
  }

  .ref-rating-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ref-grid-4,
  .ref-grid-2 {
    grid-template-columns: 1fr;
  }

  .ref-span-2 {
    grid-column: span 1;
  }
}

.job-monitor-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.job-monitor-intro {
  margin: 0;
  color: var(--text-muted, #5c6470);
  font-size: 0.92rem;
  line-height: 1.45;
}

.job-monitor-form-section h2,
.job-monitor-list-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.job-monitor-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.job-monitor-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.job-monitor-form input,
.job-monitor-form select {
  font: inherit;
  font-weight: 400;
}

.job-monitor-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted, #5c6470);
}

.job-monitor-status {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted, #5c6470);
}

.job-monitor-status.is-error {
  color: var(--danger, #b42318);
}

.job-monitor-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.job-monitor-empty {
  margin: 0;
  color: var(--text-muted, #5c6470);
  font-size: 0.88rem;
}

.job-monitor-card {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--surface-elevated, #fff);
}

.job-monitor-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}

.job-monitor-card-head h3 {
  margin: 0;
  font-size: 1rem;
}

.job-monitor-card-meta {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #5c6470);
}

.job-monitor-kunde-link {
  color: var(--accent);
  text-decoration: none;
}

.job-monitor-kunde-link:hover {
  text-decoration: underline;
}

.job-monitor-card-actions {
  display: flex;
  gap: 0.45rem;
  flex-shrink: 0;
}

.job-monitor-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.job-monitor-stats dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #5c6470);
}

.job-monitor-stats dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.job-monitor-card-message {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #5c6470);
}

.job-monitor-card-message.is-success {
  color: var(--success, #067647);
}

.job-monitor-card-message.is-error {
  color: var(--danger, #b42318);
}

@media (max-width: 640px) {
  .job-monitor-card-head {
    flex-direction: column;
  }

  .job-monitor-stats {
    grid-template-columns: 1fr;
  }
}

/* ========== Hoher Kontrast ========== */
[data-high-contrast="1"] {
  --border: #64748b;
  --workspace-border: #94a3b8;
  --workspace-bg: #eef2f7;
  --muted: #334155;
  --glass-border: #64748b;
  --glass-bg: #ffffff;
  --glass-bg-hover: #f8fafc;
  --glass-border-hover: #475569;
  --panel-bg: #ffffff;
  --panel-border: #94a3b8;
  --surface-base: #ffffff;
  --surface-hover: #f1f5f9;
  --surface-soft: #f8fafc;
  --input-bg: #ffffff;
  --glass-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

[data-high-contrast="1"][data-theme="dark"] {
  --border: #64748b;
  --workspace-border: #475569;
  --workspace-bg: #0f172a;
  --muted: #cbd5e1;
  --glass-border: #64748b;
  --glass-bg: #1e293b;
  --glass-bg-hover: #273449;
  --panel-bg: #1e293b;
  --panel-border: #64748b;
  --surface-base: #1e293b;
  --surface-hover: #273449;
  --surface-soft: #1e293b;
  --input-bg: #0f172a;
}

[data-high-contrast="1"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
[data-high-contrast="1"] select,
[data-high-contrast="1"] textarea {
  border-width: 2px;
  border-color: var(--border);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

[data-high-contrast="1"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
[data-high-contrast="1"] select:focus,
[data-high-contrast="1"] textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

[data-high-contrast="1"] .btn.secondary {
  border-width: 2px;
  border-color: var(--border);
  background: var(--glass-bg);
  font-weight: 600;
  box-shadow: var(--glass-shadow);
}

[data-high-contrast="1"] .btn.secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--glass-bg));
}

[data-high-contrast="1"] .btn.primary {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}

[data-high-contrast="1"] .panel-box,
[data-high-contrast="1"] .cv-combined-box {
  border-width: 2px;
  border-color: var(--panel-border);
  background: var(--panel-bg);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

[data-high-contrast="1"] .settings-card {
  border-width: 2px;
  background: var(--surface-base);
}

[data-high-contrast="1"] .candidate-search-input {
  border-width: 2px;
  background: var(--input-bg);
}

[data-high-contrast="1"] .records-database-toolbar {
  padding: 0.85rem 1rem;
  border: 2px solid var(--workspace-border);
  border-radius: 10px;
  background: var(--surface-base);
}

[data-high-contrast="1"] .records-list-panel,
[data-high-contrast="1"] .records-vakanzen-panel {
  border: 2px solid var(--workspace-border);
  border-radius: 10px;
  padding: 0.85rem;
  background: var(--surface-base);
}

[data-high-contrast="1"] .records-list-item {
  border-width: 2px;
  background: var(--input-bg);
}

[data-high-contrast="1"] .records-list-item:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--input-bg));
}

[data-high-contrast="1"] .records-create-btn,
[data-high-contrast="1"] .chapter-load-btn {
  border-width: 2px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 22%, transparent);
}

[data-high-contrast="1"] .inserate-layout .ref-form {
  gap: 0.85rem;
}

[data-high-contrast="1"] .inserate-layout .ref-section,
[data-high-contrast="1"] .ref-layout .ref-section.panel-box--pad,
[data-high-contrast="1"] .matcher-section .panel-box--pad {
  padding: 1rem 1.1rem 1.1rem;
  border: 2px solid var(--workspace-border);
  border-radius: 10px;
  background: var(--surface-base);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

[data-high-contrast="1"] .inserate-layout .ref-section + .ref-section {
  border-top: 2px solid var(--workspace-border);
}

[data-high-contrast="1"] .inserate-layout .ref-section h2,
[data-high-contrast="1"] .ref-section h2,
[data-high-contrast="1"] .matcher-section h2 {
  color: var(--text);
  font-size: 0.78rem;
}

[data-high-contrast="1"] .app-sidebar-item {
  border: 1px solid transparent;
}

[data-high-contrast="1"] .app-sidebar-item:hover,
[data-high-contrast="1"] .app-sidebar-item.is-current {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--glass-bg));
}

[data-high-contrast="1"] .settings-segment-btn,
[data-high-contrast="1"] .settings-milchglas-segment-btn {
  border-width: 2px;
}

[data-high-contrast="1"] .settings-segment-btn.is-active,
[data-high-contrast="1"] .settings-milchglas-segment-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-base));
  color: var(--text);
  font-weight: 700;
}

[data-high-contrast="1"] .accordion-chapter {
  border: 2px solid var(--workspace-border);
  border-radius: 10px;
  background: var(--surface-base);
  overflow: hidden;
}

[data-high-contrast="1"] .accordion-chapter + .accordion-chapter {
  margin-top: 0.65rem;
}

[data-high-contrast="1"] .job-monitor-form-section,
[data-high-contrast="1"] .job-monitor-list-section {
  border-width: 2px;
}

[data-high-contrast="1"] .pipeline-board {
  border: 2px solid var(--workspace-border);
  border-radius: 10px;
  background: var(--surface-base);
}

[data-high-contrast="1"] .pipeline-column {
  border: 2px solid var(--workspace-border);
  background: var(--input-bg);
}

[data-high-contrast="1"] label {
  font-weight: 600;
}

.app-sidebar-pinned {
  flex-shrink: 0;
}

.app-sidebar-pinned + .app-sidebar-inner {
  margin-top: 0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.dashboard-panel {
  max-width: none;
  padding: 0.85rem var(--app-content-gutter) 1.25rem;
}

.dashboard-status {
  min-height: 1.2rem;
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.dashboard-status.is-error {
  color: #c45c5c;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.dashboard-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-base);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.dashboard-kpi:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
}

.dashboard-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.dashboard-kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.dashboard-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-base);
  padding: 0.85rem 0.95rem;
  min-width: 0;
}

.dashboard-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.dashboard-card-head h2 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-card-link {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.dashboard-card-link:hover {
  text-decoration: underline;
}

.dashboard-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
}

.dashboard-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dashboard-pipeline-row {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) 1fr auto;
  align-items: center;
  gap: 0.55rem;
}

.dashboard-pipeline-label {
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-pipeline-bar-wrap {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
  overflow: hidden;
}

.dashboard-pipeline-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 75%, #fff),
    var(--accent)
  );
}

.dashboard-pipeline-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 1.2rem;
  text-align: right;
}

.dashboard-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dashboard-recent-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem 0.65rem;
  align-items: baseline;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.dashboard-recent-link:hover {
  background: var(--surface-hover);
}

.dashboard-recent-kind {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-recent-label {
  font-size: 0.84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-recent-date {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-monitors-summary {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.dashboard-monitor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dashboard-monitor-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.dashboard-monitor-item.is-success {
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
  background: color-mix(in srgb, #ecfdf5 55%, var(--surface-base));
}

.dashboard-monitor-item.is-error {
  border-color: color-mix(in srgb, #dc2626 35%, var(--border));
  background: color-mix(in srgb, #fef2f2 55%, var(--surface-base));
}

.dashboard-monitor-name {
  font-size: 0.84rem;
  font-weight: 600;
}

.dashboard-monitor-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.dashboard-quick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.45rem;
}

.dashboard-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  text-align: center;
}

.dashboard-quick-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-base));
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-recent-link {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.aktivitaeten-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aktivitaeten-head {
  display: flex;
  justify-content: flex-start;
}

.aktivitaeten-form {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
}

.aktivitaeten-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.75rem;
}

.aktivitaeten-form-wide {
  grid-column: 1 / -1;
}

.aktivitaeten-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}

.aktivitaeten-form input,
.aktivitaeten-form select,
.aktivitaeten-form textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--surface-base);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
}

.aktivitaeten-form textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.aktivitaeten-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.aktivitaeten-status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.aktivitaeten-status.is-error {
  color: var(--danger, #b42318);
}

.aktivitaeten-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.aktivitaeten-stat-total {
  font-size: 0.85rem;
  color: var(--muted);
}

.aktivitaeten-stat-total strong {
  color: var(--text);
  font-size: 1rem;
}

.aktivitaeten-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.aktivitaeten-filter {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
}

.aktivitaeten-filter:hover,
.aktivitaeten-filter.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-base));
}

.aktivitaeten-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.aktivitaeten-empty {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.aktivitaeten-item {
  margin: 0;
}

.aktivitaeten-item-link {
  display: block;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.aktivitaeten-item-link:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-base));
}

.aktivitaeten-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.aktivitaeten-type {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-base));
  color: var(--text);
}

.aktivitaeten-date {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.aktivitaeten-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.aktivitaeten-kontakt {
  font-weight: 700;
}

.aktivitaeten-kunde {
  color: var(--muted);
}

.aktivitaeten-sep {
  color: var(--muted);
}

.aktivitaeten-thema,
.aktivitaeten-notiz {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.aktivitaeten-thema {
  color: var(--text);
}

.aktivitaeten-thema span {
  color: var(--muted);
  font-weight: 600;
}

.aktivitaeten-notiz {
  color: var(--muted);
}

@media (max-width: 640px) {
  .aktivitaeten-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .aktivitaeten-form-grid {
    grid-template-columns: 1fr;
  }

  .aktivitaeten-item-head {
    flex-direction: column;
    align-items: flex-start;
  }
}