:root {
  --byrd-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --byrd-teal: #009688;
  --bayard-mark-stroke: #09d1c6;
  --auftrag-pie-ring-gap: #ffffff;
  --byrd-teal-dark: #00796b;
  --byrd-teal-light: #e0f2f1;
  --byrd-navy: #1a237e;
  --byrd-text: #333333;
  --byrd-text-muted: #78909c;
  --byrd-bg: #f5f7f8;
  --byrd-card-radius: 16px;
  --byrd-header-height: 64px;
  /* Farbkennung der Info-Hub-Bereiche; bewusst abseits der Prioritaetsfarben. */
  --byrd-briefing: #3f51b5;
  --byrd-briefing-soft: #e8eaf6;
  --byrd-faq: #f9a825;
  --byrd-faq-soft: #fff8e1;
  --byrd-tutorial: #009688;
  --byrd-tutorial-soft: #e0f2f1;
  /* Quick Updates im Briefing: eigene Farbe, abseits der Info-Hub-Bereiche und SOS-Rot. */
  --byrd-quick: #0288d1;
  --byrd-quick-soft: #e1f5fe;
  --byrd-accent: var(--byrd-teal);
  --byrd-accent-hover: var(--byrd-teal-dark);
  --byrd-accent-light: var(--byrd-teal-light);
  --byrd-app-background-image: url('/assets/app-background.jpg');
  --byrd-app-background-overlay: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.72) 100%
  );
}

:root {
  --byrd-surface: #ffffff;
  --byrd-surface-alt: #fafbfc;
  --byrd-surface-muted: #f4f5f7;
  --byrd-surface-subtle: #f7f8f9;
  --byrd-border: #dfe1e6;
  --byrd-border-subtle: #ebecf0;
  --byrd-heading: #172b4d;
  --byrd-label: #5e6c84;
  --byrd-hint: #6b778c;
  --byrd-input-bg: #ffffff;
  --byrd-row-highlight: #fffde7;
  --byrd-row-open: #f4f5f7;
  --byrd-row-editing: #f4f9ff;
  --byrd-danger-surface: #fff5f2;
  --byrd-danger-surface-hover: #ffebe6;
  --byrd-danger: #de350b;
  --byrd-danger-ring: 0 0 0 2px color-mix(in srgb, var(--byrd-danger) 22%, transparent);
  --byrd-warning-surface: #fff7e6;
  --byrd-warning-border: color-mix(in srgb, #ff991f 45%, var(--byrd-border));
  --byrd-overlay: rgba(9, 30, 66, 0.45);
  --byrd-shadow: rgba(9, 30, 66, 0.08);
  --byrd-shadow-strong: rgba(9, 30, 66, 0.28);
  --byrd-radius-sm: 6px;
  --byrd-radius-md: 10px;
  --byrd-focus-ring: 0 0 0 2px var(--byrd-teal-light);
  --byrd-transition-fast: 0.15s ease;
  --popup-viewport-padding: 2rem;
  --popup-max-height: calc(100vh - var(--popup-viewport-padding));
  --popup-max-height-dynamic: calc(100dvh - var(--popup-viewport-padding));
  --popup-overlay-padding: 3rem;
  --popup-overlay-max-height: calc(100vh - var(--popup-overlay-padding));
  --popup-overlay-max-height-dynamic: calc(100dvh - var(--popup-overlay-padding));
}

.scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

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

body {
  margin: 0;
  font-family: var(--byrd-font-family);
  color: var(--byrd-text);
  background: var(--byrd-bg);
  font-size: 0.85rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  background: var(--byrd-surface, #fff);
  border: none;
  border-radius: var(--byrd-card-radius);
  box-shadow: 0 4px 20px rgba(9, 30, 66, 0.06);
  padding: 1.25rem;
}

body.auth-locked .layout {
  display: none;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    var(--byrd-app-background-overlay),
    var(--byrd-app-background-image) center / cover no-repeat fixed,
    var(--byrd-bg);
}

.login-card {
  width: min(100%, 420px);
  padding: 2rem 1.75rem;
  border-top: 3px solid var(--byrd-teal);
}

.login-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  text-align: center;
}

.login-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card__logo {
  display: block;
  height: 36px;
  width: auto;
}

.login-card__logo--dark {
  display: none;
}

.login-card__subtitle {
  margin: 0;
  color: var(--byrd-text-muted);
  font-size: 0.85rem;
}

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

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
}

.login-form input {
  padding: 0.55rem 0.65rem;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  font-size: 0.9rem;
}

.login-form input:focus {
  outline: 2px solid var(--byrd-teal-light);
  border-color: var(--byrd-teal);
}

.login-form__error {
  margin: 0;
  color: #de350b;
  font-size: 0.8rem;
}

.login-form__submit {
  margin-top: 0.25rem;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--byrd-teal);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.login-form__submit:hover:not(:disabled) {
  background: var(--byrd-teal-dark);
}

.login-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.layout {
  min-height: 100vh;
  background:
    var(--byrd-app-background-overlay),
    var(--byrd-app-background-image) center / cover no-repeat fixed,
    var(--byrd-bg);
}

.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--byrd-header-height);
  padding: 0 2rem;
  background: var(--byrd-surface, #fff);
  color: var(--byrd-text);
  border-top: 3px solid var(--byrd-teal);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: start;
}

.brand-logo {
  display: block;
  height: 35px;
  width: auto;
}

.brand-logo--dark {
  display: none;
}

.nav {
  display: flex;
  gap: 0.5rem;
  justify-self: center;
}

.header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
}

.header-bayard-symbol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.header-bayard-symbol {
  display: block;
  height: 25px;
  width: auto;
}

.header-bayard-symbol--dark {
  display: none;
}

.header-bayard-symbol-btn:hover {
  background: var(--byrd-teal-light);
}

.copilot {
  position: relative;
  display: inline-flex;
}

/* Ausrollen ueber max-height; der Wert deckt drei Eintraege ab. */
.copilot__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 1250;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 250, 0.94) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(23, 43, 77, 0.16);
  transition:
    max-height 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.copilot__menu[hidden] {
  display: none;
}

.copilot__menu--open {
  max-height: 14rem;
  opacity: 1;
  transform: translateY(0);
  padding: 0.3rem;
}

.copilot__item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(23, 43, 77, 0.78);
  transition: background 0.15s ease, color 0.15s ease;
}

/* Farbpunkt je Bereich: die Zuordnung ist sofort am Menue erkennbar. */
/* Das Bereichssymbol steht an der Stelle, an der zuvor ein farbiger Punkt sass.
   Groesse hier statt per Attribut, damit sie auch fuer die Tutorial-Nachbildung
   gilt, deren SVG ohne width und height erzeugt wird. */
.copilot__item-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--section-accent, var(--byrd-teal));
}

.copilot__item:hover {
  background: var(--section-accent-soft, var(--byrd-teal-light));
  color: var(--section-accent, var(--byrd-teal));
}

.copilot__item[data-copilot-section='briefing'] {
  --section-accent: var(--byrd-briefing);
  --section-accent-soft: var(--byrd-briefing-soft);
}

.copilot__item[data-copilot-section='faq'] {
  --section-accent: var(--byrd-faq);
  --section-accent-soft: var(--byrd-faq-soft);
}

.copilot__item[data-copilot-section='tutorial'] {
  --section-accent: var(--byrd-tutorial);
  --section-accent-soft: var(--byrd-tutorial-soft);
}

.copilot__item:focus-visible {
  outline: 2px solid var(--byrd-teal);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .copilot__menu {
    transition: none;
  }
}

/* Bereichssymbol als Wasserzeichen: mittig, sehr dezent, rein dekorativ.
   Einfaerbung ueber color plus fill="currentColor", damit der Dunkelmodus
   ohne Zusatzregel stimmt. */
.section-watermark {
  position: absolute;
  inset: 0;
  /* margin: auto zentriert, ohne transform zu belegen. */
  margin: auto;
  width: clamp(120px, 38%, 260px);
  height: auto;
  aspect-ratio: 1;
  /* Flache Fenster wie das FAQ wuerden das Zeichen oben und unten
     abschneiden. Die Grenze stutzt den Kasten, das SVG verkleinert sich
     darin von selbst mittig. */
  max-height: 72%;
  color: var(--section-accent, var(--byrd-teal));
  opacity: 0.05;
  pointer-events: none;
}

/* Amber verliert auf hellem Grund deutlich mehr als Indigo und Teal. */
.copilot-panel--faq .section-watermark {
  opacity: 0.09;
}

/* Gilt nur fuer die Info-Hub-Panels, nicht fuer die uebrigen .finish-modal-Dialoge. */
.copilot-panel {
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.copilot-panel__panel {
  position: relative;
  width: min(560px, 100%);
  /* Beschneidet das Wasserzeichen am Fensterrand. */
  overflow: hidden;
  border-top: 3px solid var(--section-accent, var(--byrd-teal));
}

/* Zwei Klassen, damit die Regel das spaeter notierte, feste Weiss von
   .finish-modal__panel uebersteuert; zugleich themefaehig statt #fff. */
.copilot-panel .copilot-panel__panel {
  background: color-mix(in srgb, var(--section-accent, var(--byrd-teal)) 6%, var(--byrd-surface));
  color: var(--byrd-heading);
}

.copilot-panel--briefing .copilot-panel__panel {
  --section-accent: var(--byrd-briefing);
  --section-accent-soft: var(--byrd-briefing-soft);
}

.copilot-panel--faq .copilot-panel__panel {
  --section-accent: var(--byrd-faq);
  --section-accent-soft: var(--byrd-faq-soft);
}

.copilot-panel--tutorial .copilot-panel__panel {
  --section-accent: var(--byrd-tutorial);
  --section-accent-soft: var(--byrd-tutorial-soft);
}

.copilot-panel__close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  border: none;
  background: transparent;
  color: var(--byrd-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  border-radius: 6px;
}

.copilot-panel__close:hover {
  background: rgba(23, 43, 77, 0.06);
}

.copilot-panel__title {
  margin: 0 2rem 0.6rem 0;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--section-accent, #172b4d);
}

.copilot-panel__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--byrd-text-muted);
}

/* --- FAQ ----------------------------------------------------------------- */
/* Nachschlagewerk im INFO-HUB. Eigene Klassen statt der Tutorial-Klassen: die
   sind auf Kapitel, Fortschritt und Buehnen zugeschnitten. Durchgaengig
   Theme-Variablen, damit der Dunkelmodus ohne Zusatzregeln passt. */

.faq-overlay {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background: var(--byrd-overlay);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.faq-overlay__panel {
  --section-accent: var(--byrd-faq);
  --section-accent-soft: var(--byrd-faq-soft);
  position: relative;
  width: min(1180px, 100%);
  height: min(84vh, 900px);
  height: min(84dvh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--byrd-radius-md);
  border-top: 3px solid var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 4%, var(--byrd-surface));
  color: var(--byrd-heading);
  box-shadow:
    0 1px 2px var(--byrd-shadow),
    0 20px 56px var(--byrd-shadow-strong);
  animation: faq-panel-enter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faq-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.faq-overlay__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
  background: color-mix(in srgb, var(--section-accent) 12%, var(--byrd-surface-muted));
}

.faq-overlay__heading {
  flex: 0 0 auto;
  min-width: 0;
}

.faq-overlay__title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--byrd-heading);
}

.faq-overlay__subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  color: var(--byrd-text-muted);
}

.faq-overlay__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--byrd-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}

.faq-overlay__close:hover {
  background: var(--byrd-surface-subtle);
}

/* Die Suchleiste sitzt in der Huelle und wird beim Blaettern nicht neu
   gezeichnet; nur so behaelt sie Fokus und Schreibmarke beim Tippen. */
.faq-overlay__search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 8rem;
  max-width: 34rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-input-bg);
  transition: border-color var(--byrd-transition-fast), box-shadow var(--byrd-transition-fast);
}

.faq-overlay__search:focus-within {
  border-color: var(--section-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 25%, transparent);
}

.faq-overlay__search[hidden] {
  display: none;
}

.faq-overlay__search-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--section-accent);
}

.faq-overlay__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--byrd-heading);
}

.faq-overlay__search-input:focus {
  outline: none;
}

/* Standortleiste: sitzt fest zwischen Kopfzeile und Inhalt. Weil sie nicht
   mitrollt, stehen Pfad und Zurueck-Knopf immer an derselben Stelle. */
/* --- Tutorial: Beispiele untereinander ----------------------------------- */
/* Mehrere Beispiele auf einer Buehne, jedes mit eigener Beschriftung. Spart
   Szenenwechsel, wo der Vergleich wichtiger ist als die Abfolge. */
.tutorial-stack {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 740px;
}

/* Die Beispiele bauen sich nacheinander auf; die Verzoegerung kommt aus der
   Zaehlvariable, die das JS je Beispiel setzt. */
.tutorial-stack__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  animation: tutorial-stack-in 620ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--faq-stack-index, 0) * 420ms) both;
}

@keyframes tutorial-stack-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-stack__item {
    animation: none;
  }
}

.tutorial-stack__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.tutorial-stack__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
}

/* --- Tutorial: vierteilige Blockaden-Buehne ------------------------------ */
/* Vier Felder, die nacheinander aufgedeckt werden. Nicht aufgedeckte Felder
   bleiben als leerer Platz stehen, damit das Raster nicht springt. */
.tutorial-blockers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  /* Etwas breiter, damit die Voraussetzungskette in Feld drei nebeneinander
     Platz hat. */
  width: 900px;
}

.tutorial-blocker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 9.5rem;
  padding: 1.2rem 1.1rem;
  border: 1px dashed var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-subtle);
  opacity: 0.35;
  transition: opacity 320ms ease, border-color 320ms ease, background 320ms ease;
}

.tutorial-blocker--on {
  border-style: solid;
  border-color: color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
  background: var(--byrd-surface);
  opacity: 1;
  animation: tutorial-blocker-in 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-blocker-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tutorial-blocker__index {
  position: absolute;
  top: 0.55rem;
  left: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--section-accent-soft);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--section-accent);
}

.tutorial-blocker__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}

.tutorial-blocker__modal {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 19rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-muted);
}

.tutorial-blocker__modal-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

/* Leeres Pflichtfeld: der Platzhaltertext steht da, wo die Eingabe fehlt. */
.tutorial-blocker__textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--byrd-border);
  border-radius: 5px;
  background: var(--byrd-input-bg);
  font-size: 0.8rem;
  text-align: left;
  color: var(--byrd-text-muted);
}

.tutorial-blocker__disabled {
  align-self: flex-end;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  opacity: 0.45;
}

.tutorial-blocker__fields {
  display: flex;
  gap: 0.6rem;
}

.tutorial-blocker__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #8e24aa;
  border-radius: 5px;
  background: color-mix(in srgb, #8e24aa 8%, var(--byrd-surface));
}

.tutorial-blocker__field-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.tutorial-blocker__field-empty {
  font-size: 1rem;
  font-weight: 700;
  color: #8e24aa;
}

/* Voraussetzungskette: fehlender Erfasser links, gesperrte Aktionen rechts,
   dazwischen ein Pfeil, der sich zeichnet. */
.tutorial-chain {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tutorial-chain__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  animation: tutorial-chain-step-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms both;
}

.tutorial-chain__step--source {
  animation-delay: 0ms;
}

.tutorial-chain__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.tutorial-chain__empty {
  padding: 0.4rem 0.9rem;
  border: 1px solid #de350b;
  border-radius: 5px;
  background: color-mix(in srgb, #de350b 8%, var(--byrd-surface));
  font-size: 0.8rem;
  font-weight: 600;
  color: #de350b;
}

.tutorial-chain__icons {
  display: flex;
  gap: 0.35rem;
}

/* Der Pfeil waechst von links nach rechts und bekommt zum Schluss die
   Spitze. */
.tutorial-chain__arrow {
  position: relative;
  width: 2.6rem;
  height: 2px;
  background: var(--byrd-text-muted);
  transform-origin: left center;
  animation: tutorial-chain-draw 620ms ease-out 420ms both;
}

.tutorial-chain__arrow::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--byrd-text-muted);
}

@keyframes tutorial-chain-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes tutorial-chain-step-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-blocker--on,
  .tutorial-chain__step,
  .tutorial-chain__arrow {
    animation: none;
  }
}

/* --- Tutorial: Gesamtansicht der Anwendung ------------------------------- */
/* Feste Breite, damit die Ansicht unabhaengig von der Buehnengroesse immer
   gleich aussieht; die Einpassung verkleinert sie anschliessend. */
.tutorial-app {
  display: flex;
  flex-direction: column;
  width: 1080px;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  overflow: hidden;
  box-shadow: 0 10px 28px var(--byrd-shadow);
}

.tutorial-app__header {
  position: static;
  padding: 0.6rem 1rem;
}

.tutorial-app__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tutorial-app__symbol {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tutorial-app__body {
  /* position: relative, damit die beiden Raeume darin einfahren koennen. */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem;
}

/* Klick auf das Info-Hub-Symbol: eine Ringwelle, damit man sieht, dass hier
   gedrueckt wird. */
.tutorial-app__symbol--press::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--section-accent);
  animation: tutorial-press-ring 900ms ease-out 2;
}

@keyframes tutorial-press-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Das Menue haengt unter dem Symbol wie in der echten Kopfzeile. */
.tutorial-app__copilot {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tutorial-app__menu-panel {
  /* Ausfahren: die echte Gestaltung arbeitet mit max-height, hier als
     Animation, damit sie bei jedem Erscheinen laeuft. */
  animation: tutorial-menu-unfold 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tutorial-menu-unfold {
  from {
    max-height: 0;
    opacity: 0;
    padding: 0 0.3rem;
    transform: translateY(-6px);
  }
  to {
    max-height: 14rem;
    opacity: 1;
    padding: 0.3rem;
    transform: translateY(0);
  }
}

/* Die beiden Raeume. Im echten Dashboard sind die Panels am Fenster
   verankert; auf der Buehne fahren sie innerhalb der Ansicht ein. */
.tutorial-app__drawer-slot {
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  width: 22rem;
  max-width: 44%;
  pointer-events: none;
}

.tutorial-app__drawer-slot--waiting {
  left: 3.6rem;
}

.tutorial-app__drawer-slot--feedback {
  right: 3.6rem;
}

.tutorial-app__drawer-slot--none {
  display: none;
}

/* Ein eingefahrener Raum ist hoeher als die drei Beispielzeilen. Der Koerper
   waechst deshalb mit, sonst waere das Panel unten abgeschnitten. :has greift
   auch nach dem Platzwechsel, ohne dass JS eine Klasse setzen muss. */
.tutorial-app__body:has(.tutorial-app__drawer-panel) {
  min-height: 27rem;
}

/* Die Attributmaske ist hoeher als die Schublade und braucht mehr Luft. Bis
   einschliesslich des Uebernehmen-Knopfs sind es gut 34rem. */
.tutorial-app__body:has(.tutorial-app__popup) {
  min-height: 38rem;
}

.tutorial-app__drawer-panel {
  height: 100%;
  overflow: hidden;
}

.tutorial-app__drawer-slot--waiting .tutorial-app__drawer-panel {
  animation: tutorial-drawer-in-left 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tutorial-app__drawer-slot--feedback .tutorial-app__drawer-panel {
  animation: tutorial-drawer-in-right 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Die Attributmaske steht in der Anwendung neben dem angeklickten Eintrag des
   Warteraums. Hier bekommt sie denselben Platz, direkt rechts der Schublade. */
.tutorial-app__popup-slot {
  position: absolute;
  top: 2.6rem;
  left: 26.4rem;
  z-index: 4;
  width: 15rem;
  pointer-events: none;
}

.tutorial-app__popup {
  animation: tutorial-popup-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Auch das Popup steht position: fixed. Gleiche eng gefasste Ausnahme wie bei
   den Raeumen, und ohne eigenes Scrollen, damit die Kamera alles erreicht. */
.tutorial-app__popup > .waiting-popup {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
  transform: none;
  pointer-events: none;
}

@keyframes tutorial-popup-in {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-app__popup {
    animation: none;
  }
}

/* Die echten Panels stehen position: fixed und waeren hier unsichtbar.
   Eng gefasste Ausnahme nur innerhalb der Buehne. */
.tutorial-app__drawer-panel > .wartebereich-drawer,
.tutorial-app__drawer-panel > .rueckmeldungen-drawer {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  max-height: 100%;
  transform: none;
  visibility: visible;
  pointer-events: none;
}

@keyframes tutorial-drawer-in-left {
  from {
    opacity: 0;
    transform: translateX(-16%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tutorial-drawer-in-right {
  from {
    opacity: 0;
    transform: translateX(16%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-app__symbol--press::after,
  .tutorial-app__menu-panel,
  .tutorial-app__drawer-panel {
    animation: none;
  }
}

/* Die Schubladenknoepfe sind im echten Dashboard am Fensterrand verankert.
   Hier stehen sie als Teil der Ansicht, darum die Verankerung aufheben. */
.tutorial-app__drawer {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  margin-top: 2.4rem;
}

.tutorial-app__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Zoom der Szene. Eigene Huelle, damit er sich nicht mit der Einpassung
   ueberlagert, und mit Ueberblendung, damit der Wechsel von Szene zu Szene als
   Fahrt zu sehen ist. */
.tutorial-scene__zoom {
  /* position: relative macht die Huelle zum offsetParent. Ohne das springt die
     Kette von offsetLeft beim Ausrechnen des Zoomziels an ihr vorbei. */
  position: relative;
  transition: transform 1400ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-scene__zoom {
    transition: none;
  }
}

.faq-overlay__place {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
  background: var(--byrd-surface);
}

.faq-overlay__place[hidden] {
  display: none;
}

.faq-overlay__place-spacer {
  flex: 1 1 auto;
}

.faq-place__dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

/* auto statt fester Spalte: die Sidebar steuert ihre Breite selbst und laesst
   sich damit zuverlaessiger animieren als grid-template-columns. */
.faq-overlay__layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 0;
}

.faq-overlay__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 258px;
  padding: 0.75rem;
  border-right: 1px solid var(--byrd-border-subtle);
  background: color-mix(in srgb, var(--section-accent) 8%, var(--byrd-surface-subtle));
  overflow-x: hidden;
  overflow-y: auto;
  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-overlay__sidebar--collapsed {
  width: 46px;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.faq-overlay__sidebar-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: 7px;
  background: var(--byrd-surface);
  color: var(--section-accent);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--byrd-transition-fast);
}

.faq-overlay__sidebar-toggle:hover {
  background: var(--section-accent-soft);
}

.faq-overlay__sidebar--collapsed .faq-overlay__sidebar-toggle {
  align-self: center;
}

.faq-overlay__sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  transition: opacity 160ms ease;
}

.faq-overlay__sidebar--collapsed .faq-overlay__sidebar-body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Kopf der Leiste: nur noch das Plus fuer ein neues Verzeichnis. */
.faq-overlay__home-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Der Weg zurueck zur Uebersicht sitzt in der Kopfzeile, in der Luecke
   zwischen Suchfeld und Kreuz. */
.faq-homebtn {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  color: var(--byrd-heading);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.faq-homebtn svg {
  color: var(--section-accent);
}

.faq-homebtn:hover {
  border-color: var(--section-accent);
  background: var(--section-accent-soft);
}

.faq-homebtn--active {
  border-color: var(--section-accent);
  background: var(--section-accent-soft);
}



.faq-overlay__link:hover,
.faq-overlay__link--active {
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

.faq-overlay__section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}


/* Die Verzeichnisse stehen nur in der Seitenleiste, deshalb liegt auch das
   Anlegen eines Verzeichnisses auf oberster Ebene hier. */

.faq-overlay__section-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
  border-radius: 6px;
  background: var(--byrd-surface);
  color: var(--section-accent);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--byrd-transition-fast), color var(--byrd-transition-fast);
}

.faq-overlay__section-add:hover {
  background: var(--section-accent);
  color: #fff;
}

/* Startseite: die Suche steht gross in der Mitte, damit der Blick von selbst
   dorthin geht. Darunter die vier Ziele. */
.faq-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 100%;
  padding: 2rem 1rem;
  text-align: center;
}

.faq-start__search {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(42rem, 100%);
  padding: 0.95rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
  border-radius: 999px;
  background: var(--byrd-input-bg);
  box-shadow: 0 10px 28px var(--byrd-shadow);
  transition: border-color var(--byrd-transition-fast), box-shadow var(--byrd-transition-fast);
}

.faq-start__search:focus-within {
  border-color: var(--section-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--section-accent) 22%, transparent);
}

.faq-start__search-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--section-accent);
}

.faq-start__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1.15rem;
  color: var(--byrd-heading);
}

.faq-start__search-input:focus {
  outline: none;
}

.faq-start__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--byrd-text-muted);
}

.faq-start__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  width: min(42rem, 100%);
  margin-top: 0.6rem;
}

@media (max-width: 760px) {
  .faq-start__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq-start__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 0.8rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  cursor: pointer;
  transition: border-color var(--byrd-transition-fast), transform var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast);
}

.faq-start__card:hover {
  border-color: color-mix(in srgb, var(--section-accent) 45%, var(--byrd-border));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--byrd-shadow);
}

.faq-start__card-icon {
  display: inline-flex;
  color: var(--section-accent);
}

.faq-start__card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.faq-start__card-meta {
  font-size: 0.74rem;
  color: var(--byrd-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq-start__card:hover {
    transform: none;
  }
}

.faq-overlay__hint {
  margin: 0 0.35rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
}

/* Verzeichnisbaum, beliebig tief. Die Einrueckung je Ebene setzt das JS als
   padding-left und deckelt sie, damit tiefe Zweige nicht aus der Spalte
   laufen. Der Pfeil klappt nur auf, der Name springt hinein. */
.faq-tree {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.faq-tree__row {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  border-radius: var(--byrd-radius-sm);
}

/* Streifen in der Zweigfarbe links an der Zeile: damit erkennt man den Zweig
   am Ton, ohne den Namen zu lesen. */
.faq-tree__row::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 24px;
  margin-right: 0.2rem;
  border-radius: 999px;
  background: var(--faq-branch, var(--section-accent));
  opacity: 0.55;
}

.faq-tree__row--active::before {
  opacity: 1;
}

.faq-tree__row--active,
.faq-tree__row:hover {
  background: color-mix(in srgb, var(--faq-branch, var(--section-accent)) 12%, transparent);
}

.faq-tree__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--faq-branch, var(--section-accent));
}

.faq-tree__icon svg {
  width: 15px;
  height: 15px;
}

.faq-tree__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--section-accent);
  cursor: pointer;
  transition: transform 180ms ease;
}

.faq-tree__chevron[aria-expanded='true'] {
  transform: rotate(90deg);
}

.faq-tree__chevron--empty {
  cursor: default;
}

.faq-tree__folder {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: var(--byrd-radius-sm);
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--byrd-heading);
  cursor: pointer;
}

.faq-tree__row--active .faq-tree__folder {
  font-weight: 600;
}

.faq-tree__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Punkt an Verzeichnissen, in denen die laufende Suche Treffer hat. */
.faq-tree__hit {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--section-accent);
}

.faq-tree__count {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--byrd-text-muted);
}

/* Senkrechte Verbindungslinie wie im Dateimanager: sie macht die Schachtelung
   auf einen Blick lesbar, wo Einrueckung allein zu schwach ist. */
/* Jede Ebene rueckt als Ganzes ein. Die Fuehrungslinie gehoert zur Ebene und
   sitzt dadurch auch in der dritten Verschachtelung an der richtigen Stelle. */
.faq-tree__kids {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding-left: 20px;
}

.faq-tree__kids::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0.3rem;
  left: 7px;
  width: 1px;
  background: color-mix(in srgb, var(--section-accent) 40%, var(--byrd-border));
}

/* display: flex oben wuerde die Browservorgabe [hidden] { display: none }
   ueberstimmen, darum hier ausdruecklich ausblenden. */
.faq-tree__kids[hidden] {
  display: none;
}



.faq-overlay__content {
  min-width: 0;
  min-height: 0;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.faq-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.faq-page__title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--byrd-heading);
}

.faq-page__intro {
  margin: 0;
  max-width: 70ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--byrd-text-muted);
}

.faq-page__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.faq-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-self: stretch;
}

.faq-page__headline {
  min-width: 0;
}

.faq-page__eyebrow {
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

/* Zurueck-Knopf: eine echte Schaltflaeche mit Pfeil, die ihr Ziel nennt. Der
   frueher hier stehende Textlink war zu leicht zu uebersehen. */
.faq-backbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font: inherit;
  text-align: left;
  color: var(--byrd-heading);
  cursor: pointer;
  transition:
    background var(--byrd-transition-fast),
    border-color var(--byrd-transition-fast),
    transform var(--byrd-transition-fast);
}

.faq-backbtn:hover {
  border-color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 10%, var(--byrd-surface));
  transform: translateX(-2px);
}

.faq-backbtn svg {
  flex: 0 0 auto;
  color: var(--section-accent);
}

.faq-backbtn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.faq-backbtn__hint {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.faq-backbtn__target {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Brotkrumenpfad: zeigt die Ebene und laesst an jeder Stufe abspringen. */
.faq-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
}

.faq-crumbs__sep {
  color: var(--byrd-border);
}

.faq-crumb {
  padding: 0.1rem 0.3rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  color: var(--faq-branch, var(--section-accent));
  cursor: pointer;
}

.faq-crumb:hover {
  background: color-mix(in srgb, var(--faq-branch, var(--section-accent)) 14%, transparent);
  text-decoration: underline;
}

.faq-crumb--current {
  font-weight: 600;
  color: var(--byrd-heading);
  cursor: default;
}

.faq-crumb--gap {
  color: var(--byrd-text-muted);
  cursor: help;
}

/* Umbrechende Reihe fester Breite statt dehnbarem Raster: eine einzelne
   Kachel zog sich sonst ueber die ganze Seite und wirkte wichtiger als die
   Eintraege darunter. */
.faq-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-self: stretch;
}

.faq-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  flex: 0 0 auto;
  width: 13rem;
  min-width: 0;
  min-height: 5rem;
  padding: 0.75rem 0.8rem 0.7rem;
  /* Rahmen in der Zweigfarbe: die Kachel liest als eigener Kasten und zeigt
     zugleich, in welchem Zweig sie haengt. */
  border: 1px solid color-mix(in srgb, var(--faq-branch, var(--section-accent)) 38%, var(--byrd-border));
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast),
    background var(--byrd-transition-fast);
}

/* Farbband oben: der Zweig ist damit schon aus dem Augenwinkel zu erkennen. */
.faq-tile__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--faq-branch, var(--section-accent));
}

.faq-tile:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--faq-branch, var(--section-accent)) 8%, var(--byrd-surface));
  box-shadow: 0 8px 20px var(--byrd-shadow);
}

/* Ein Unterverzeichnis ist an drei Dingen zu erkennen: gestricheltem Band,
   getoenter Flaeche und dem Ordnersymbol mit Pfeil hinein. */
.faq-tile--sub .faq-tile__band {
  background: repeating-linear-gradient(
    90deg,
    var(--faq-branch, var(--section-accent)) 0 8px,
    transparent 8px 14px
  );
}

.faq-tile--sub {
  background: color-mix(in srgb, var(--faq-branch, var(--section-accent)) 5%, var(--byrd-surface));
}

/* Feste Kacheln tragen den Akzent des Bereichs, nicht eine Zweigfarbe. */

.faq-tile__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.faq-tile__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--faq-branch, var(--section-accent));
}

.faq-tile__icon svg {
  width: 18px;
  height: 18px;
}

.faq-tile__name {
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  color: var(--byrd-heading);
}

/* Die Zahlen stehen am Fuss, damit alle Kacheln einer Reihe gleich wirken. */
.faq-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.faq-tile__count,
.faq-tile__subcount {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.faq-tile__subcount {
  padding-left: 0.6rem;
  border-left: 1px solid var(--byrd-border-subtle);
}

.faq-page__cta {
  align-self: flex-start;
}

.faq-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: stretch;
}

/* Gliedert die Seite und darf das auch zeigen: vorher war sie mit 0.66rem in
   Grau kleiner als jeder Fliesstext darunter. Der Akzentstrich markiert den
   Beginn eines Abschnitts. */
.faq-section__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--byrd-heading);
}

.faq-section__title::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 0.85em;
  border-radius: 2px;
  background: var(--section-accent);
}

/* .faq-page richtet seine Kinder links aus; was die Breite nutzen soll, holt
   sie sich hier ausdruecklich. */
.faq-page > .faq-crumbs,
.faq-page > .faq-newfolder,
.faq-page > .faq-list,
.faq-page > .faq-empty,
.faq-page > .faq-field,
.faq-page > .faq-form__actions,
.faq-page > .faq-entry__body,
.faq-page > .faq-entry__folders,
.faq-page > .faq-error {
  align-self: stretch;
}

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

.faq-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  text-align: left;
  cursor: pointer;
  transition: background var(--byrd-transition-fast), border-color var(--byrd-transition-fast);
}

/* Streifen in der Zweigfarbe: der Eintrag verraet damit, woher er kommt. */
.faq-list__item {
  border-left: 3px solid var(--faq-branch, var(--section-accent));
}

.faq-list__item:hover {
  border-color: var(--byrd-border-subtle);
  border-left-color: var(--faq-branch, var(--section-accent));
  background: color-mix(in srgb, var(--faq-branch, var(--section-accent)) 7%, var(--byrd-surface));
}

.faq-list__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--byrd-heading);
}

.faq-list__excerpt {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
}

.faq-list__folders {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
  background: color-mix(in srgb, var(--section-accent) 14%, var(--byrd-surface));
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--byrd-heading);
}

.faq-chip svg {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}

/* Bueroklammer mit Anzahl: sagt in der Liste, dass Dokumente dranhaengen. */
.faq-clip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--byrd-text-muted);
}

.faq-clip svg {
  width: 14px;
  height: 14px;
}

/* --- Symbolknoepfe -------------------------------------------------------- */
/* Stift, Kreuz, Klammer und Pfeil statt Textknoepfen. Die Beschriftung steckt
   in title und aria-label, damit nichts an Verstaendlichkeit verloren geht. */
.faq-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.38rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  color: var(--byrd-heading);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.faq-iconbtn svg {
  width: 17px;
  height: 17px;
}

.faq-iconbtn:hover {
  border-color: var(--section-accent);
  color: var(--section-accent);
}

.faq-iconbtn--danger:hover {
  border-color: #c62828;
  color: #c62828;
}

.faq-iconbtn--clip {
  color: var(--byrd-text-muted);
}

.faq-iconbtn--on {
  border-color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 14%, var(--byrd-surface));
  color: var(--section-accent);
}

/* Haengen Dokumente dran, leuchtet die Klammer. Gleiche Machart wie die
   Alarmknoepfe der Raeume im Dashboard, nur in der Akzentfarbe. */
.faq-iconbtn--lit {
  padding-right: 0.55rem;
  border-color: color-mix(in srgb, var(--section-accent) 45%, var(--byrd-border));
  color: var(--section-accent);
  animation: faq-clip-pulse 2s ease-in-out infinite;
}

.faq-iconbtn__count {
  font-size: 0.74rem;
  font-weight: 700;
}

@keyframes faq-clip-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--section-accent) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--section-accent) 0%, transparent);
  }
}

/* --- Dokumentenfenster an der Klammer ------------------------------------ */
.faq-clipwrap {
  position: relative;
  display: inline-flex;
}

/* Feste Lage, die Koordinaten setzt placeFaqDocsPopover nach dem Zeichnen. */
.faq-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(26rem, 78vw);
  padding: 0.8rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  box-shadow: 0 14px 34px var(--byrd-shadow-strong);
  animation: faq-popover-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.faq-popover__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.faq-popover__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--byrd-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.faq-popover__close:hover {
  background: var(--byrd-surface-muted);
  color: var(--byrd-heading);
}

@keyframes faq-popover-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-iconbtn--lit,
  .faq-popover {
    animation: none;
  }
}

/* Eintrag als Dokumentkarte: Kopfband in der Zweigfarbe, klar abgesetzte
   Abschnitte und ein Textkoerper in lesbarer Zeilenbreite. */
.faq-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 62rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
}

/* Kein overflow: hidden an der Karte -- sonst schneidet sie das Fenster an
   der Bueroklammer ab. Das Band rundet sich stattdessen selbst. */
.faq-entry__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--byrd-radius-md) var(--byrd-radius-md) 0 0;
  background: var(--faq-branch, var(--section-accent));
}

.faq-entry__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.faq-entry__title {
  margin: 0;
  min-width: 0;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--byrd-heading);
}

/* Herkunft: eine leise Zeile mit Uhr und Person. Vorher standen hier zwei
   Grossbuchstaben-Beschriftungen mit fett gesetzten Werten -- damit war die
   Nebensache kraeftiger gesetzt als der Inhalt darunter. */
.faq-entry__trace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  /* Haengt direkt unter dem Titel statt als eigener Block darunter. */
  margin: -0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--byrd-text-muted);
}

.faq-entry__trace-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.faq-entry__trace-item svg {
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

.faq-entry__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.faq-entry__section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Der Inhalt ist die Hauptsache und wird jetzt auch so gesetzt: groesser als
   alles Beiwerk und ohne Ueberschrift darueber. Freitext bleibt Freitext,
   Umbrueche des Verfassers werden gezeigt. */
.faq-entry__body {
  max-width: 70ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--byrd-heading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.faq-entry__docs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Fundorte und der Knopf zum Anhaengen stehen zusammen am Fuss, abgesetzt. */
/* Leiser Abschluss, kein eigener Abschnitt: schmalerer Abstand und eine
   Haarlinie, die kaum auffaellt. */
.faq-entry__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--byrd-border-subtle) 60%, transparent);
}

.faq-entry__folders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

/* Am Fuss eines Beitrags sind die Verzeichnisse eine Fussnote. Ohne Pille,
   klein und grau, damit der Blick beim Inhalt bleibt. In der Eintragsliste
   bleiben die Chips dagegen Pillen -- dort ordnen sie einen Treffer ein und
   stehen nicht neben einem Text, von dem sie ablenken koennten. */
.faq-entry__foot .faq-chip {
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--byrd-text-muted);
}

.faq-entry__foot .faq-chip svg {
  width: 11px;
  height: 11px;
  opacity: 0.6;
}

/* --- Dokumente --- */
.faq-docs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-doc {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-subtle);
}

.faq-doc__icon {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1;
}

.faq-doc__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.faq-doc__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--byrd-heading);
  overflow-wrap: anywhere;
}

.faq-doc__meta {
  font-size: 0.72rem;
  color: var(--byrd-text-muted);
}

.faq-doc__action {
  flex: 0 0 auto;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  text-decoration: none;
}

/* Ablegefaeche: Dateiauswahl und Ziehen-und-Fallenlassen in einem. */
.faq-drop {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--section-accent) 45%, var(--byrd-border));
  border-radius: var(--byrd-radius-md);
  background: color-mix(in srgb, var(--section-accent) 5%, var(--byrd-surface));
  transition: background var(--byrd-transition-fast), border-color var(--byrd-transition-fast);
}

.faq-drop--over {
  border-color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 16%, var(--byrd-surface));
}

.faq-drop__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--section-accent);
}

.faq-drop__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.faq-drop__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--byrd-heading);
}

.faq-drop__hint {
  font-size: 0.74rem;
  color: var(--byrd-text-muted);
}

.faq-back {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--section-accent);
  cursor: pointer;
}

.faq-back:hover {
  text-decoration: underline;
}

.faq-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

/* Eingabefelder nehmen die Breite, Knoepfe bleiben bei ihrer eigenen. */
.faq-field > .faq-input,
.faq-field > .faq-textarea,
.faq-field > .faq-checks,
.faq-field > .faq-newfolder {
  align-self: stretch;
}

.faq-field__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--byrd-label);
}

.faq-field__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--byrd-text-muted);
}

.faq-input,
.faq-textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  font: inherit;
  font-size: 0.92rem;
  color: var(--byrd-heading);
}

.faq-textarea {
  min-height: 9rem;
  line-height: 1.6;
  resize: vertical;
}

.faq-input:focus,
.faq-textarea:focus {
  outline: none;
  border-color: var(--section-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 25%, transparent);
}

/* Eine Spalte, damit die Einrueckung je Ebene lesbar bleibt. */
.faq-checks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 34rem;
}

.faq-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  font-size: 0.88rem;
  color: var(--byrd-heading);
  cursor: pointer;
}

/* Die Einrueckung je Ebene setzt das JS; hier nur die Kennzeichnung, dass es
   ein Unterverzeichnis ist. */
.faq-check--sub {
  border-style: dashed;
  font-size: 0.83rem;
  color: var(--byrd-text-muted);
}

/* Zeile der Auswahl: Pfeil zum Aufklappen, daneben das Ankreuzfeld. */
.faq-check__row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.faq-check__row > .faq-check {
  flex: 1 1 auto;
  min-width: 0;
}

.faq-check__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  padding: 0;
  color: var(--byrd-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--byrd-transition-fast), color var(--byrd-transition-fast);
}

.faq-check__chevron[aria-expanded='true'] {
  transform: rotate(90deg);
  color: var(--section-accent);
}

.faq-check__chevron--empty {
  cursor: default;
}

/* Dialog: der eine Ort, an dem Verzeichnisse entstehen und verschwinden. */
.faq-dialog {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--byrd-heading) 38%, transparent);
}

.faq-dialog__panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(34rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  box-shadow: 0 18px 44px var(--byrd-shadow);
}

.faq-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.faq-dialog__title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--byrd-heading);
}

.faq-dialog__close {
  border: none;
  background: none;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--byrd-text-muted);
  cursor: pointer;
}

.faq-dialog__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--byrd-text-muted);
}

.faq-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-subtle);
}

.faq-dialog__parent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.faq-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  font: inherit;
  font-size: 0.88rem;
  color: var(--byrd-heading);
}

.faq-folders {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.faq-folders__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--faq-branch, var(--section-accent));
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-subtle);
}

/* Ziehen und Ablegen: Griff, Zustand beim Ziehen und am Ziel. */
.faq-folders__row[draggable='true'] {
  cursor: grab;
}

.faq-folders__grip {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: -0.1em;
  color: var(--byrd-text-muted);
}

.faq-folders__row--dragging {
  opacity: 0.5;
}

.faq-folders__row--over {
  background: color-mix(in srgb, var(--section-accent) 16%, var(--byrd-surface));
  outline: 2px dashed var(--section-accent);
  outline-offset: 1px;
}

/* Ziel fuer den Weg zurueck nach oben. */
.faq-folders__row--root {
  border-left-style: dashed;
  color: var(--byrd-text-muted);
}

.faq-folders__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--faq-branch, var(--section-accent));
}

.faq-folders__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--byrd-heading);
}

.faq-folders__count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--byrd-text-muted);
}

.faq-check:hover {
  border-color: var(--section-accent);
}

.faq-check input {
  accent-color: var(--section-accent);
}

.faq-newfolder {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.faq-newfolder .faq-input {
  flex: 1 1 14rem;
  width: auto;
}

.faq-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.3rem;
}

.faq-btn {
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--byrd-transition-fast), color var(--byrd-transition-fast);
}

.faq-btn--primary {
  background: var(--section-accent);
  color: #3b2f00;
}

.faq-btn--primary:hover {
  background: color-mix(in srgb, var(--section-accent) 82%, #000);
}

.faq-btn--ghost {
  background: var(--byrd-surface-muted);
  border-color: var(--byrd-border-subtle);
  color: var(--byrd-heading);
}

.faq-btn--ghost:hover {
  background: var(--section-accent-soft);
}

.faq-btn--danger {
  background: transparent;
  border-color: var(--byrd-border);
  color: #c62828;
}

.faq-btn--danger:hover {
  background: color-mix(in srgb, #c62828 12%, transparent);
}

/* Das Plus bleibt rund, damit es neben den Textknoepfen als Aktion auffaellt. */
.faq-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.faq-empty {
  margin: 0;
  font-size: 0.88rem;
  color: var(--byrd-text-muted);
}

.faq-error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--byrd-radius-sm);
  background: color-mix(in srgb, #c62828 12%, transparent);
  font-size: 0.85rem;
  color: #c62828;
}

@media (prefers-reduced-motion: reduce) {
  .faq-overlay__panel {
    animation: none;
  }

  .faq-tile:hover {
    transform: none;
  }
}

/* --- Tutorial ----------------------------------------------------------- */
/* Durchgaengig Theme-Variablen, damit der Dunkelmodus ohne Zusatzregeln passt. */

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  /* background bleibt als Rueckfall ohne backdrop-filter-Unterstuetzung. */
  background: var(--byrd-overlay);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.tutorial-overlay__panel {
  --section-accent: var(--byrd-tutorial);
  --section-accent-soft: var(--byrd-tutorial-soft);
  width: min(1180px, 100%);
  height: min(84vh, 900px);
  height: min(84dvh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--byrd-radius-md);
  border-top: 3px solid var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 4%, var(--byrd-surface));
  color: var(--byrd-heading);
  box-shadow:
    0 1px 2px var(--byrd-shadow),
    0 20px 56px var(--byrd-shadow-strong);
  animation: tutorial-panel-enter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tutorial-overlay__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
  background: color-mix(in srgb, var(--section-accent) 12%, var(--byrd-surface-muted));
}

.tutorial-overlay__heading {
  min-width: 0;
}

.tutorial-overlay__title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--byrd-heading);
}

.tutorial-overlay__subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  color: var(--byrd-text-muted);
}

.tutorial-overlay__progress {
  flex: 1;
  height: 6px;
  min-width: 4rem;
  border-radius: 999px;
  background: var(--byrd-border-subtle);
  overflow: hidden;
}

.tutorial-overlay__progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--section-accent);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial-overlay__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--byrd-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}

.tutorial-overlay__close:hover {
  background: var(--byrd-surface-subtle);
}

/* auto statt fester Spalte: die Sidebar steuert ihre Breite selbst und laesst
   sich damit zuverlaessiger animieren als grid-template-columns. */
.tutorial-overlay__layout {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 0;
}

.tutorial-overlay__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 265px;
  padding: 0.75rem;
  border-right: 1px solid var(--byrd-border-subtle);
  background: color-mix(in srgb, var(--section-accent) 8%, var(--byrd-surface-subtle));
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1), padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial-overlay__sidebar--collapsed {
  width: 46px;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.tutorial-overlay__sidebar-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: 7px;
  background: var(--byrd-surface);
  color: var(--section-accent);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tutorial-overlay__sidebar-toggle:hover {
  background: var(--section-accent-soft);
}

.tutorial-overlay__sidebar--collapsed .tutorial-overlay__sidebar-toggle {
  align-self: center;
}

.tutorial-overlay__sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  transition: opacity 160ms ease;
}

.tutorial-overlay__sidebar--collapsed .tutorial-overlay__sidebar-body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tutorial-overlay__overview {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.25rem;
  border-radius: var(--byrd-radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tutorial-overlay__overview:hover {
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

.tutorial-overlay__overview--active {
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

.tutorial-overlay__chapter-title {
  margin: 0 0 0.35rem;
}

/* Der Kapitelname ist der Aufklapp-Knopf; Layout und Typografie sitzen deshalb
   am Knopf statt an der Ueberschrift. */
.tutorial-overlay__chapter-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  border: none;
  border-radius: var(--byrd-radius-sm);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  color: var(--byrd-text-muted);
  cursor: pointer;
}

.tutorial-overlay__chapter-toggle:hover {
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

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

/* Zaehler bleibt sichtbar, wenn die Schritte samt Haekchen zugeklappt sind. */
.tutorial-overlay__chapter-count {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--byrd-text-muted);
}

.tutorial-overlay__chapter--complete .tutorial-overlay__chapter-count {
  color: var(--section-accent);
}

.tutorial-overlay__chapter-chevron {
  flex: 0 0 auto;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--section-accent);
  transition: transform 180ms ease;
}

.tutorial-overlay__chapter-toggle[aria-expanded='true'] .tutorial-overlay__chapter-chevron {
  transform: rotate(90deg);
}

.tutorial-overlay__chapter-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--section-accent-soft);
  color: var(--section-accent);
  font-size: 0.64rem;
}

.tutorial-overlay__steps {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* display: flex oben wuerde die Browservorgabe [hidden] { display: none }
   ueberstimmen, darum hier ausdruecklich ausblenden. */
.tutorial-overlay__steps[hidden] {
  display: none;
}

.tutorial-overlay__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: var(--byrd-radius-sm);
  font-size: 0.84rem;
  color: var(--byrd-heading);
  cursor: pointer;
  transition: background 0.15s ease;
}

.tutorial-overlay__step:hover {
  background: var(--section-accent-soft);
}

.tutorial-overlay__step--active {
  background: var(--section-accent-soft);
  font-weight: 600;
}

.tutorial-overlay__step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Akzentring statt Grau: hebt sich von der getoenten Sidebar ab. */
  border: 1.5px solid color-mix(in srgb, var(--section-accent) 40%, transparent);
  font-size: 0.6rem;
  line-height: 1;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tutorial-overlay__step--done .tutorial-overlay__step-dot {
  background: var(--section-accent);
  border-color: var(--section-accent);
}

.tutorial-overlay__step-label {
  min-width: 0;
}

.tutorial-overlay__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tutorial-start {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

.tutorial-start__headline {
  margin: 0;
  font-size: 1.3rem;
  color: var(--byrd-heading);
}

.tutorial-start__intro {
  margin: 0 0 0.75rem;
  max-width: 70ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--byrd-text-muted);
}

.tutorial-start__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.tutorial-tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  /* min-width verhindert, dass die breiten Vorschauinhalte die Rasterspalte sprengen. */
  min-width: 0;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tutorial-tile:hover {
  transform: translateY(-3px);
  border-color: var(--section-accent);
  box-shadow: 0 12px 26px var(--byrd-shadow);
}

/* Vorschau: echte Komponenten verkleinert, Ausschnitt per overflow begrenzt. */
.tutorial-tile__preview {
  display: block;
  position: relative;
  height: 108px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, var(--section-accent-soft) 0%, transparent 60%),
    var(--byrd-surface-subtle);
  border-bottom: 1px solid var(--byrd-border-subtle);
  pointer-events: none;
}

/* Feste Breite, weil transform die Layoutbreite nicht aendert: ohne sie
   wuerde der Inhalt per shrink-to-fit die Kachel aufblaehen. */
.tutorial-tile__preview-inner {
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 620px;
  transform: scale(0.42);
  transform-origin: top left;
}

.tutorial-tile__body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'index title'
    'index meta';
  align-items: center;
  gap: 0.1rem 0.6rem;
  padding: 0.7rem 0.85rem 0.8rem;
}

.tutorial-tile__index {
  grid-area: index;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--section-accent-soft);
  color: var(--section-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.tutorial-tile__title {
  grid-area: title;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--byrd-heading);
}

.tutorial-tile__meta {
  grid-area: meta;
  font-size: 0.72rem;
  color: var(--byrd-text-muted);
}

/* Abgeschlossenes Kapitel: Haekchen, Akzentrahmen und Statustext in der Akzentfarbe. */
.tutorial-tile--complete {
  border-color: color-mix(in srgb, var(--section-accent) 55%, transparent);
}

.tutorial-tile--complete .tutorial-tile__index {
  background: var(--section-accent);
  color: #fff;
}

.tutorial-tile--complete .tutorial-tile__meta {
  color: var(--section-accent);
  font-weight: 600;
}

.tutorial-tile__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--section-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px var(--byrd-shadow);
}

/* Naechstes offenes Kapitel: dezent hervorgehoben, ohne die Abschluesse zu uebertoenen. */
.tutorial-tile--next {
  border-color: color-mix(in srgb, var(--section-accent) 35%, transparent);
}

/* Platzhalterkapitel: steht in der Reihe, ist aber kein Knopf. Gedaempft,
   damit niemand draufklickt und sich wundert. */
.tutorial-tile--locked {
  opacity: 0.55;
  cursor: default;
  border-style: dashed;
}

.tutorial-tile--locked:hover {
  transform: none;
  border-color: var(--byrd-border-subtle);
  box-shadow: none;
}

.tutorial-tile__flag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: var(--section-accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px var(--byrd-shadow);
}

/* Buehne: echte Komponenten mit Beispieldaten, bewusst nicht bedienbar. */
.tutorial-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 13rem;
  padding: 0.9rem 1.25rem 1.25rem;
  border-radius: var(--byrd-radius-md);
  border: 1px solid var(--byrd-border-subtle);
  background:
    radial-gradient(circle at 20% 10%, var(--section-accent-soft) 0%, transparent 55%),
    var(--byrd-surface-subtle);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

/* Folienkopf: Kapitel und Unterkapitel bleiben immer an der Buehne sichtbar. */
/* Folientitel: das Thema der Folie muss sofort lesbar sein. Akzentbalken
   links, grosse Schrift, Szenenmarke rechts. Die Zeile wird nur bei
   Folienwechsel neu gezeichnet, darum zeigt die Einstiegsanimation
   zuverlaessig an, dass ein neues Thema beginnt. */
.tutorial-stage__caption {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 0 0.75rem 0.75rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 22%, transparent);
  border-left: 4px solid var(--section-accent);
  animation: tutorial-caption-enter 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-caption-enter {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tutorial-stage__caption-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tutorial-stage__chapter {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-accent);
}

.tutorial-stage__step {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--byrd-heading);
}

/* Die Buehne ist eine harte Grenze: min-height/min-width 0 erlauben das
   Schrumpfen unter die Inhaltsgroesse, overflow haelt alles drinnen. Ohne das
   waechst die Buehne mit dem Inhalt und drueckt die Szenensteuerung hinaus. */
.tutorial-stage__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  animation: tutorial-stage-enter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-stage-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tutorial-stage__placeholder {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--byrd-text-muted);
}

.tutorial-stage__frame {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  box-shadow: 0 6px 18px var(--byrd-shadow);
}

/* Die Statistiken bekommen feste Breiten, damit sie die Buehne ausfuellen.
   analytics-widget--sm und --lg steuern nur Gitterspalten und wirken hier
   nicht, denn auf der Buehne steht kein Gitter. */
.tutorial-stage__frame--kpi {
  width: 880px;
}

.tutorial-stage__frame--widget {
  width: 760px;
}

.tutorial-stage__frame--widget .analytics-widget {
  width: 100%;
}

/* Die vergroesserte Ansicht darf auf der Buehne nicht scrollen, sonst waere
   ein Teil des Diagramms nur durch Blaettern zu sehen. */
.tutorial-stage__frame--widget .analytics-widget--expanded-view .analytics-widget__body {
  overflow: visible;
}

/* Ganze Seiten auf der Buehne: feste Breite, damit die Einpassung eine
   verlaessliche Groesse messen kann und die Seite nicht am Buehnenrand
   umbricht. Die Kamerafahrt holt den gemeinten Bereich heran. */
.tutorial-page {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 1080px;
  padding: 0.9rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  box-shadow: 0 10px 28px var(--byrd-shadow);
}

/* Die Kachel in der Kopfleiste zeigt auf der Buehne Name und Zahlen statt des
   Kundenlogos und braucht dafuer mehr als die 56 Pixel der echten Leiste. */
.tutorial-page .customer-detail__tile-wrap {
  width: 180px;
  height: auto;
  min-height: 56px;
}

/* Das Exportfenster haengt in der echten Oberflaeche ueber der Seite. Auf der
   Buehne steht es im Fluss, sonst beschneidet die Buehne es. */
.tutorial-stage .evaluation-export-panel__popover {
  position: static;
  width: 320px;
  max-height: none;
  overflow: visible;
}

.tutorial-stage__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.tutorial-stage__brand-logo {
  height: 42px;
  width: auto;
}

/* Der Name der Anwendung steht unter dem Schriftzug und traegt die Folie. */
.tutorial-stage__brand-name {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--byrd-heading);
}

/* --- Tutorial: Titelfolie eines Kapitels -------------------------------- */
/* Gleicher Aufbau fuer jedes Kapitel, damit die Kapiteluebersicht aus sechs
   gleich gebauten Kacheln besteht. */
.tutorial-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(34rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.tutorial-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  margin-bottom: 0.2rem;
  border-radius: 50%;
  background: var(--section-accent-soft);
  color: var(--section-accent);
  animation: tutorial-intro-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tutorial-intro__icon svg {
  width: 2.3rem;
  height: 2.3rem;
}

.tutorial-intro__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--section-accent);
}

.tutorial-intro__title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--byrd-heading);
}

.tutorial-intro__claim {
  margin: 0;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--byrd-text-muted);
}

@keyframes tutorial-intro-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-intro__icon {
    animation: none;
  }
}

/* Der Erklaertext wird nur beim Schrittwechsel neu gezeichnet. Darum zeigt
   schon eine Einstiegsanimation zuverlaessig an, dass der Text gewechselt hat:
   ein kurz durchlaufender Akzentbalken links plus leichtes Aufblenden. */
.tutorial-copy {
  flex: 0 0 auto;
  position: relative;
  padding-left: 0.7rem;
}

.tutorial-copy::before {
  content: '';
  position: absolute;
  top: 0.1rem;
  bottom: 0.1rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--section-accent);
  transform-origin: top center;
  animation: tutorial-copy-mark 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-copy-mark {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  45% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0.32;
  }
}

.tutorial-copy__eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--section-accent);
  animation: tutorial-copy-change 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial-copy__body {
  margin: 0.3rem 0 0;
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--byrd-text-muted);
  animation: tutorial-copy-change 600ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}

@keyframes tutorial-copy-change {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Tutorial: Szenen ----------------------------------------------------
   Eine Szene ist ein Zustand der Buehne. Der Wechsel wird animiert, damit
   Abfolgen wie die Farbstufen als Bewegung lesbar sind. */
.tutorial-scene {
  /* position: relative, damit die Zeigelinie ueber Buehne und Hinweisband
     gleichzeitig liegen kann. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  animation: tutorial-scene-enter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-scene-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tutorial-scene__stage {
  display: flex;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}

/* Einpassen: fitTutorialScene() verkleinert die Szene, wenn sie nicht in die
   Buehne passt. transform aendert das Layout nicht, deshalb wird der Kasten im
   eingepassten Fall auf Blocksatz umgestellt und bekommt die verkleinerte
   Hoehe gesetzt -- sonst reserviert er weiter die volle und verdraengt die
   Zeigetexte und die Steuerung. */
.tutorial-scene__fit {
  min-width: 0;
  transform-origin: top left;
  /* Beschneidet den Szenen-Zoom: der vergroesserte Inhalt waechst sonst ueber
     die Buehne hinaus. Die Huelle selbst liegt immer innerhalb. */
  overflow: hidden;
}

.tutorial-scene__stage--fitted {
  display: block;
  position: relative;
  overflow: hidden;
}

.tutorial-scene__stage--fitted > .tutorial-scene__fit {
  position: absolute;
  top: 0;
  left: 0;
}

/* Scheinwerfer: eine Abdunkelungsebene ueber der Szene, in die das JS je Ziel
   ein Loch stanzt (SVG-Maske). Dadurch koennen beliebig viele Ziele
   gleichzeitig hell bleiben, und kein Zwischenelement mit overflow
   beschneidet die Abdunkelung. */
.tutorial-dim {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: rgba(9, 30, 66, 0.58);
  pointer-events: none;
  animation: tutorial-dim-in 700ms ease-out;
}

@keyframes tutorial-dim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Traeger der Maske: nimmt keinen Platz ein und zeichnet selbst nichts. */
.tutorial-dim__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Ring um ein Loch. Eigenes Element, damit er nicht am Ziel haengt und
   dadurch nichts abdunkeln kann. */
.tutorial-spot {
  position: absolute;
  z-index: 6;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--section-accent);
  pointer-events: none;
  animation: tutorial-spot-pulse 2600ms ease-in-out infinite both;
}

/* Reine Umrandung in einer schon hellen Flaeche: etwas kraeftiger, weil hier
   kein Helligkeitsunterschied mithilft. Eigene Pulsation, denn eine Animation
   setzt box-shadow und wuerde eine feste Angabe hier ueberschreiben. */
.tutorial-spot--outline {
  border-radius: 999px;
  animation-name: tutorial-spot-outline-pulse;
}

@keyframes tutorial-spot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--section-accent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--section-accent) 45%, transparent);
  }
}

@keyframes tutorial-spot-outline-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--section-accent), 0 0 10px 1px color-mix(in srgb, var(--section-accent) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px var(--section-accent), 0 0 16px 4px color-mix(in srgb, var(--section-accent) 50%, transparent);
  }
}

/* Verbindungslinie zwischen zwei Scheinwerfern: waechst von links nach rechts
   und macht die Verknuepfung sichtbar. */
.tutorial-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}

/* Erst leuchten die beiden Ziele versetzt auf, dann kommt die Verbindung. */
.tutorial-link .tutorial-line__casing,
.tutorial-link .tutorial-line__stroke {
  animation-delay: 1500ms;
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-dim,
  .tutorial-spot {
    animation: none;
  }
}

.tutorial-scene__notes {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

/* Zeigetext: der Hinweis zur Folie. Als breites Band, damit er beim Lesen
   nicht neben der Buehne untergeht -- im Test wurde die alte kleine Pille
   uebersehen. */
.tutorial-scene__note {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(46rem, 100%);
  margin: 0;
  padding: 0.7rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
  border-left: 4px solid var(--section-accent);
  border-radius: var(--byrd-radius-sm);
  background: color-mix(in srgb, var(--section-accent) 14%, var(--byrd-surface));
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--byrd-heading);
  animation:
    tutorial-note-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both,
    tutorial-note-flash 900ms ease-out 320ms;
}

/* Warnung statt Hinweis: gleiches Band, nur in Rot. Das Schild blinkt
   dauerhaft, weil die Aussage eine Mahnung ist und keine Erklaerung. */
.tutorial-scene__note--warn {
  border-color: var(--byrd-danger);
  border-left-color: var(--byrd-danger);
  background: var(--byrd-danger-surface);
  color: var(--byrd-danger);
}

.tutorial-scene__note-mark {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--section-accent);
  animation: tutorial-note-mark-pulse 900ms ease-out 320ms;
}

.tutorial-scene__note--warn .tutorial-scene__note-mark {
  color: var(--byrd-danger);
  animation: tutorial-warn-pulse 1.3s ease-in-out infinite;
}

.tutorial-scene__note-text {
  min-width: 0;
}

@keyframes tutorial-note-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tutorial-note-flash {
  0% {
    background: color-mix(in srgb, var(--section-accent) 34%, var(--byrd-surface));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--section-accent) 45%, transparent);
  }
  40% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--section-accent) 22%, transparent);
  }
  100% {
    background: color-mix(in srgb, var(--section-accent) 14%, var(--byrd-surface));
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes tutorial-note-mark-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.3);
  }
}

/* Zeigelinie vom Hinweisband zum beleuchteten Element. Liegt ueber Buehne und
   Band, deshalb sitzt sie an der Szene und nicht in der Zoom-Huelle. */
.tutorial-scene__leader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  pointer-events: none;
}

/* Alle Verbindungslinien laufen in rechten Winkeln und zeichnen sich selbst.
   stroke-linejoin haelt die Ecken sauber, stroke-linecap die Enden. */
.tutorial-line__casing,
.tutorial-line__stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--faq-leader-length, 0);
  animation: tutorial-leader-draw 700ms ease-out 320ms both;
}

/* Helle Fassung: die Linie laeuft ueber den dunklen Schleier der Buehne und
   waere sonst nur zu erahnen. */
.tutorial-line__casing {
  stroke: var(--byrd-surface);
  stroke-width: 6;
  opacity: 0.9;
}

.tutorial-line__stroke {
  stroke: var(--section-accent);
  stroke-width: 2;
}

@keyframes tutorial-leader-draw {
  from {
    stroke-dashoffset: var(--faq-leader-length, 0);
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Anschlag am Ziel: kommt erst, wenn die Linie dort angekommen ist. */
.tutorial-line__dot {
  fill: var(--section-accent);
  stroke: var(--byrd-surface);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: tutorial-leader-dot 420ms cubic-bezier(0.22, 1, 0.36, 1) 940ms both;
}

@keyframes tutorial-leader-dot {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-scene__note,
  .tutorial-scene__note-mark,
  .tutorial-line__casing,
  .tutorial-line__stroke,
  .tutorial-line__dot {
    animation: none;
  }
}

/* .tutorial-stage setzt pointer-events: none, weil die Buehne dekorativ ist.
   Die Steuerung ist das einzige Bedienbare darin und holt sich die
   Klickbarkeit deshalb ausdruecklich zurueck. */
.tutorial-scene__controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
  pointer-events: auto;
}

.tutorial-scene__ctrl,
.tutorial-scene__replay {
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  color: var(--byrd-label);
  cursor: pointer;
  font: inherit;
  transition:
    color var(--byrd-transition-fast),
    background var(--byrd-transition-fast),
    border-color var(--byrd-transition-fast);
}

.tutorial-scene__ctrl {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.tutorial-scene__replay {
  padding: 0.2rem 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tutorial-scene__ctrl:hover,
.tutorial-scene__replay:hover {
  color: var(--section-accent);
  background: var(--section-accent-soft);
  border-color: color-mix(in srgb, var(--section-accent) 45%, var(--byrd-border));
}

.tutorial-scene__dots {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.tutorial-scene__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--section-accent) 28%, var(--byrd-border));
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background var(--byrd-transition-fast);
}

.tutorial-scene__dot--active {
  background: var(--section-accent);
  transform: scale(1.5);
}

/* --- Tutorial: Ablaufkette ----------------------------------------------- */
.tutorial-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tutorial-flow__station {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  color: var(--byrd-text-muted);
  font-size: 0.78rem;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--byrd-transition-fast),
    background var(--byrd-transition-fast),
    color var(--byrd-transition-fast);
}

.tutorial-flow__station--optional {
  border-style: dashed;
}

.tutorial-flow__station--done {
  border-color: color-mix(in srgb, var(--section-accent) 40%, var(--byrd-border));
  color: var(--byrd-heading);
}

.tutorial-flow__station--active {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--section-accent);
  background: var(--section-accent-soft);
  color: var(--byrd-heading);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 18%, transparent);
}

.tutorial-flow__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--section-accent) 20%, var(--byrd-surface-muted));
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.tutorial-flow__label {
  font-weight: 600;
}

.tutorial-flow__arrow {
  color: color-mix(in srgb, var(--section-accent) 55%, var(--byrd-border));
  font-size: 1.1rem;
  line-height: 1;
}

/* --- Tutorial: Einzelsignale und Blockaden ------------------------------- */
.tutorial-stage__frame--signal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.tutorial-stage__frame--expand {
  display: flex;
  flex-direction: column;
}

/* .rueckmeldungen-toggle ist position: fixed und steht spaeter in der Datei.
   Der Selektor ist deshalb bewusst spezifischer, sonst klebt das Signal am
   Viewport statt auf der Buehne zu sitzen. */
.tutorial-stage .tutorial-stage__signal,
.tutorial-tile__preview .tutorial-stage__signal {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
}

.tutorial-stage__hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--byrd-text-muted);
}

.tutorial-stage__field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tutorial-stage__field-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Buehnen fuer Kapitel 2 bis 5: Reihen, Formulare, Listen und Tabellen.
   flex-direction muss ausdruecklich stehen, weil .tutorial-stage__frame
   auf column steht und ein Modifier die Richtung sonst nicht aendert. */
.tutorial-stage__frame--row,
.tutorial-stage__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tutorial-stage__frame--form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.tutorial-stage .tutorial-stage__chrome {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
}


.tutorial-stage__form-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.tutorial-stage__form-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.tutorial-stage__chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--byrd-text-muted);
}

.tutorial-stage__chip--active {
  border-color: var(--section-accent);
  background: var(--section-accent-soft);
  color: var(--byrd-heading);
}

.tutorial-stage__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: min(420px, 100%);
}

.tutorial-stage__list-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  font-size: 0.72rem;
}

.tutorial-stage__list-name {
  font-weight: 600;
  color: var(--byrd-heading);
}

.tutorial-stage__list-meta {
  color: var(--byrd-text-muted);
}

.tutorial-stage__tabs {
  display: flex;
  gap: 0.3rem;
}

.tutorial-stage__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
}

.tutorial-stage__stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.tutorial-stage__stat-value {
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  color: var(--byrd-heading);
}

.tutorial-stage__table {
  width: min(480px, 100%);
  border-collapse: collapse;
  font-size: 0.7rem;
}

.tutorial-stage__table th,
.tutorial-stage__table td {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--byrd-border-subtle);
  text-align: left;
  white-space: nowrap;
}

.tutorial-stage__table th {
  background: var(--byrd-surface-muted);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--byrd-label);
}

/* Die echte Auswertungstabelle ist mit elf Spalten breiter als die Buehne.
   Hier bleiben nur die Spalten stehen, die im Tutorial erklaert werden:
   Datum, GTIN, Zielmarkt, Betreff, Auftrag, Zaehlung und Warnung. Ausgeblendet
   sind Ausloeser (6), Fehlergrund (7), Bemerkung (8) und Aktionen (11). */
.tutorial-stage__table-wrap--lean .evaluation-table th:nth-child(6),
.tutorial-stage__table-wrap--lean .evaluation-table th:nth-child(7),
.tutorial-stage__table-wrap--lean .evaluation-table th:nth-child(8),
.tutorial-stage__table-wrap--lean .evaluation-table th:nth-child(11),
.tutorial-stage__table-wrap--lean .evaluation-table td:nth-child(6),
.tutorial-stage__table-wrap--lean .evaluation-table td:nth-child(7),
.tutorial-stage__table-wrap--lean .evaluation-table td:nth-child(8),
.tutorial-stage__table-wrap--lean .evaluation-table td:nth-child(11) {
  display: none;
}

/* Die echte Tabelle erzwingt min-width 1120px und feste Spaltenbreiten. Hier
   duerfen die sieben verbliebenen Spalten ihre Breite selbst bestimmen, sonst
   bliebe die Tabelle trotz ausgeblendeter Spalten zu breit fuer die Buehne.
   Die Huelle gibt die Breite vor, damit die Tabelle die Buehne ausfuellt. */
.tutorial-stage__table-wrap--lean {
  width: 1000px;
}

.tutorial-stage__table-wrap--lean .evaluation-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

/* In der echten Tabelle klebt die Warnspalte am rechten Rand, weil dort
   waagerecht gescrollt wird. Auf der Buehne gibt es kein Scrollen, dort wuerde
   sie die Nachbarspalte ueberlagern. */
.tutorial-stage__table-wrap--lean .evaluation-table__warning,
.tutorial-stage__table-wrap--lean .evaluation-table__warning-head {
  position: static;
  right: auto;
  background: transparent;
}

.tutorial-stage__flag-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8e24aa;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}

/* Nachbildung des Bestaetigungsdialogs auf der Buehne. */
.tutorial-stage__dialog {
  width: min(360px, 100%);
  margin: 0 auto;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  box-shadow: 0 12px 28px var(--byrd-shadow-strong);
  animation: tutorial-scene-enter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tutorial-stage__dialog-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.tutorial-stage__dialog-text {
  margin: 0.3rem 0 0.6rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
}

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

/* Der Wiedererkennungsdialog zeigt zwei Auftraege nebeneinander und braucht
   darum mehr Breite als die schmalen Bestaetigungen. */
.tutorial-stage__dialog--wide {
  width: min(640px, 100%);
}

.tutorial-stage__dialog-hint {
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
}

/* Der Rueckmeldungsraum steht in der Anwendung position: fixed und stuende
   sonst ausserhalb der Buehne. Eng gefasste Ausnahme wie in der
   Gesamtansicht. */
.tutorial-stage__drawer > .wartebereich-drawer,
.tutorial-stage__drawer > .rueckmeldungen-drawer {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  max-height: none;
  transform: none;
  visibility: visible;
  pointer-events: none;
}

.tutorial-stage__drawer {
  width: min(380px, 100%);
  margin: 0 auto;
}

/* --- Tutorial: Bearbeitungszeit als Skizze ------------------------------- */
/* Drei Stationen: die Ampel, die verborgene Uhr und die Kachel der
   Auswertung. Der Balken waechst, solange gruen steht -- im verzerrten Fall
   laeuft er ueber und faerbt sich rot. */
.tutorial-worktime {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.1rem;
  width: min(820px, 100%);
  margin: 0 auto;
}

.tutorial-worktime__station {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: 100%;
}

.tutorial-worktime__caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.tutorial-worktime__light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: var(--byrd-heading);
}

/* Gruen blinkt, weil genau dieser Zustand die Uhr laufen laesst. */
.tutorial-worktime__bulb {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #00875a;
  animation: tutorial-worktime-blink 900ms steps(1, end) infinite;
}

.tutorial-worktime__arrow {
  position: relative;
  width: 2.6rem;
  height: 2px;
  background: var(--byrd-text-muted);
  transform-origin: left center;
  animation: tutorial-chain-draw 520ms ease-out 420ms both;
}

.tutorial-worktime__arrow::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--byrd-text-muted);
}

.tutorial-worktime__meter {
  width: 100%;
  height: 1.05rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  overflow: hidden;
}

/* Der Balken fuellt sich bis zu einem vernuenftigen Mass und bleibt stehen,
   weil die Ampel rechtzeitig pausiert wurde. */
.tutorial-worktime__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--byrd-accent);
  transform-origin: left center;
  animation: tutorial-worktime-fill 2.4s cubic-bezier(0.33, 1, 0.68, 1) 860ms both;
}

.tutorial-worktime--inflated .tutorial-worktime__fill {
  background: var(--byrd-danger);
  animation: tutorial-worktime-overrun 2.4s linear 860ms both;
}

.tutorial-worktime__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.tutorial-worktime--inflated .tutorial-worktime__value {
  color: var(--byrd-danger);
}

.tutorial-worktime__tile {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  box-shadow: 0 8px 20px var(--byrd-shadow);
}

.tutorial-worktime--inflated .tutorial-worktime__tile {
  border-color: var(--byrd-danger);
  background: var(--byrd-danger-surface);
}

.tutorial-worktime__tile-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.tutorial-worktime__tile-value {
  font-size: 1.5rem;
  color: var(--byrd-heading);
  animation: tutorial-badge-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) 3.1s both;
}

.tutorial-worktime--inflated .tutorial-worktime__tile-value {
  color: var(--byrd-danger);
}

@keyframes tutorial-worktime-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.25;
  }
}

@keyframes tutorial-worktime-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(0.55);
  }
}

@keyframes tutorial-worktime-overrun {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-worktime__arrow,
  .tutorial-worktime__bulb,
  .tutorial-worktime__fill,
  .tutorial-worktime__tile-value {
    animation: none;
  }
}

/* --- Tutorial: GTIN-Zaehlung im Fertig-Dialog ---------------------------- */
/* Die Haken setzen sich nacheinander, damit die Entscheidung als Handlung
   lesbar ist und nicht als fertiger Zustand. */
.tutorial-finish-gtins--all .finish-modal__gtin-option {
  animation: tutorial-tick-set 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(240ms + var(--faq-stack-index, 0) * 340ms);
}

@keyframes tutorial-tick-set {
  0% {
    opacity: 0.35;
    transform: translateX(-6px);
  }
  60% {
    opacity: 1;
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-finish-gtins--all .finish-modal__gtin-option {
    animation: none;
  }
}

/* --- Tutorial: Mail raus, Ticket zieht um -------------------------------- */
/* Eine gesendete Mail links, ein Pfeil, die beiden moeglichen Ziele rechts.
   Die Szene hebt hervor, welches Ziel gerade gemeint ist. */
.tutorial-send {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem;
  width: min(620px, 100%);
  /* Die Ziffern haengen ueber die Karten hinaus. Ohne diesen Abstand schneidet
     die Einpasshuelle sie oben ab, denn sie steht auf overflow: hidden. */
  padding: 0.85rem 0.85rem 0;
  margin: 0 auto;
}

/* Jede Seite ist ein eigenes System und traegt dessen Namen. */
.tutorial-send__side {
  display: grid;
  gap: 0.4rem;
}

.tutorial-send__side-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

/* Der Pfeil sitzt auf Hoehe der Karten, nicht der Ueberschriften. */
.tutorial-send > .tutorial-send__arrow {
  margin-top: 1.1rem;
}

.tutorial-send__mail,
.tutorial-send__target {
  position: relative;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  box-shadow: 0 8px 20px var(--byrd-shadow);
}

/* Die Takte des Ablaufs. Ziffer 1 steht an der Mail, Ziffer 2 am Ziel, und
   sie erscheinen in genau dieser Reihenfolge. */
.tutorial-send__beat {
  position: absolute;
  top: -0.6rem;
  left: -0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--byrd-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.tutorial-send__beat--one {
  animation: tutorial-beat-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tutorial-send__beat--two {
  animation: tutorial-beat-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms both;
}

/* Der Haken-Stempel bestaetigt den ersten Takt: die Mail ist raus. */
.tutorial-send__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid color-mix(in srgb, #00875a 45%, var(--byrd-border));
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #00875a;
  animation: tutorial-stamp-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 620ms both;
}

@keyframes tutorial-beat-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tutorial-stamp-in {
  from {
    opacity: 0;
    transform: scale(1.5) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
}

.tutorial-send__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.tutorial-send__hint {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--byrd-text-muted);
}

/* Zweiter Takt: der Pfeil zeichnet sich erst, nachdem die Mail den Haken hat.
   Gleiche Machart wie die Voraussetzungskette in Kapitel 1. */
.tutorial-send__arrow {
  position: relative;
  width: 2.6rem;
  height: 2px;
  background: var(--byrd-text-muted);
  transform-origin: left center;
  animation: tutorial-chain-draw 520ms ease-out 1080ms both;
}

.tutorial-send__arrow::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--byrd-text-muted);
}

.tutorial-send__targets {
  display: grid;
  gap: 0.5rem;
}

/* Dritter Takt: das gemeinte Ziel leuchtet auf, das andere tritt zurueck. */
.tutorial-send__target--active {
  border-color: var(--byrd-accent);
  animation: tutorial-send-arrive 520ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms both;
}

.tutorial-send__target--idle {
  opacity: 0.4;
}

@keyframes tutorial-send-arrive {
  from {
    box-shadow: 0 8px 20px var(--byrd-shadow);
    transform: scale(1);
  }
  60% {
    transform: scale(1.04);
  }
  to {
    box-shadow: 0 0 0 2px var(--byrd-teal-light), 0 10px 24px var(--byrd-shadow);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-send__arrow,
  .tutorial-send__beat--one,
  .tutorial-send__beat--two,
  .tutorial-send__stamp,
  .tutorial-send__target--active {
    animation: none;
  }
}

/* --- Tutorial: Auftakt der Arbeitsprozesse ------------------------------- */
/* Eine Warntafel, darunter die fuenf Themen als nummerierte Kette. Die Kette
   laeuft von links nach rechts ein, damit der Ablauf als Reihenfolge lesbar
   ist und nicht als Aufzaehlung. */
.tutorial-duty {
  display: grid;
  gap: 1.1rem;
  width: min(640px, 100%);
  margin: 0 auto;
}

.tutorial-duty__plate {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--byrd-danger);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-danger-surface);
  box-shadow: 0 10px 24px var(--byrd-shadow);
}

.tutorial-duty__plate-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--byrd-danger);
  animation: tutorial-warn-pulse 1.5s ease-in-out infinite;
}

.tutorial-duty__plate-text {
  display: grid;
  gap: 0.2rem;
}

.tutorial-duty__plate-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--byrd-danger);
}

.tutorial-duty__plate-body {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--byrd-heading);
}

.tutorial-duty__topics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tutorial-duty__topic {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  text-align: center;
  opacity: 0;
  animation: tutorial-scene-enter 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(360ms + var(--faq-stack-index, 0) * 260ms);
}

/* Verbindungsstrich zum naechsten Thema, am letzten nicht. */
.tutorial-duty__topic:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.35rem;
  right: -0.5rem;
  width: 0.5rem;
  height: 2px;
  background: var(--byrd-border);
}

.tutorial-duty__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--byrd-accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.tutorial-duty__topic-text {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--byrd-heading);
}

@keyframes tutorial-warn-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-duty__plate-icon,
  .tutorial-duty__topic {
    animation: none;
    opacity: 1;
  }
}

/* --- Tutorial: Was Handarbeit bleibt ------------------------------------- */
.tutorial-manual {
  display: grid;
  gap: 0.9rem;
  width: min(620px, 100%);
  margin: 0 auto;
}

.tutorial-manual__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

/* Erst die beiden Karten, dann die drei Zeilen -- alles nacheinander, damit
   jede Aussage einzeln ankommt. Die Takte unten bauen aufeinander auf. */
.tutorial-manual__card {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  opacity: 0;
  animation: tutorial-scene-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(240ms + var(--faq-stack-index, 0) * 700ms);
}

/* Die rechte Karte ist die Mahnung. Sie traegt darum den Warnton und einen
   kraeftigen Rahmen -- das ist die Aussage, auf die das Kapitel hinauslaeuft. */
.tutorial-manual__card--warn {
  border: 2px solid var(--byrd-danger);
  background: var(--byrd-danger-surface);
}

.tutorial-manual__card--warn .tutorial-manual__card-title {
  color: var(--byrd-danger);
}

.tutorial-manual__card--warn .tutorial-manual__card-title > span[aria-hidden] {
  display: inline-flex;
  animation: tutorial-warn-pulse 1.4s ease-in-out infinite;
  animation-delay: 940ms;
}

.tutorial-manual__card-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

.tutorial-manual__card-text {
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
}

.tutorial-manual__steps {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die drei Schritte folgen auf die Karten, wieder mit deutlichem Abstand. */
.tutorial-manual__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--byrd-danger) 35%, var(--byrd-border));
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-danger-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--byrd-heading);
  opacity: 0;
  animation: tutorial-scene-enter 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(1640ms + var(--faq-stack-index, 0) * 700ms);
}

/* Das Warnschild blinkt dauerhaft, beginnt aber erst, wenn seine Zeile da
   ist -- sonst pulsierte es im Leeren. */
.tutorial-manual__step-icon {
  display: inline-flex;
  color: var(--byrd-danger);
  animation: tutorial-warn-pulse 1.2s ease-in-out infinite;
  animation-delay: calc(1640ms + var(--faq-stack-index, 0) * 700ms);
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-manual__card,
  .tutorial-manual__step,
  .tutorial-manual__step-icon,
  .tutorial-manual__card--warn .tutorial-manual__card-title > span[aria-hidden] {
    animation: none;
    opacity: 1;
  }
}

/* --- Tutorial: Spiel-Optik ----------------------------------------------- */
/* Feines Raster und Innenschein geben der Buehne den Charakter eines
   Spielfelds, ohne neue Farben einzufuehren. */
.tutorial-stage__inner {
  position: relative;
  border-radius: var(--byrd-radius-md);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--section-accent) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--section-accent) 7%, transparent) 1px,
      transparent 1px
    );
  background-size: 22px 22px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent) 12%, transparent);
}

.tutorial-overlay__progress-bar {
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Das naechste Kapitel atmet leicht, damit der Blick dort landet. */
.tutorial-tile--next {
  animation: tutorial-tile-breathe 2600ms ease-in-out infinite;
}

@keyframes tutorial-tile-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--section-accent) 26%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--section-accent) 0%, transparent);
  }
}

.tutorial-tile--complete .tutorial-tile__badge {
  animation: tutorial-badge-pop 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tutorial-badge-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-scene,
  .tutorial-stage__dialog,
  .tutorial-stage__caption,
  .tutorial-copy::before,
  .tutorial-copy__eyebrow,
  .tutorial-copy__body {
    animation: none;
  }

  .tutorial-tile--next,
  .tutorial-tile--complete .tutorial-tile__badge {
    animation: none;
  }

  .tutorial-scene__dot,
  .tutorial-flow__station,
  .tutorial-overlay__progress-bar {
    transition: none;
  }
}

.tutorial-nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.tutorial-nav .btn {
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.tutorial-nav .btn--secondary {
  background: var(--byrd-surface-muted);
  color: var(--byrd-heading);
  border-color: var(--byrd-border-subtle);
}

.tutorial-nav .btn--primary {
  background: var(--section-accent);
  color: #fff;
}

.tutorial-nav .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.tutorial-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-overlay__panel,
  .tutorial-stage__inner {
    animation: none;
  }

  .tutorial-overlay__progress-bar,
  .tutorial-overlay__sidebar,
  .tutorial-overlay__sidebar-body,
  .tutorial-overlay__chapter-chevron,
  .tutorial-tile {
    transition: none;
  }
}

@media (max-width: 860px) {
  .tutorial-overlay__layout {
    grid-template-columns: 1fr;
  }

  .tutorial-overlay__sidebar {
    border-right: none;
    border-bottom: 1px solid var(--byrd-border-subtle);
    max-height: 30%;
  }
}

.header-user {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--byrd-text-muted);
  font-size: 0.86rem;
  max-width: 207px;
}

.header-user__icon {
  flex-shrink: 0;
  display: block;
  width: 21px;
  height: 21px;
  color: var(--byrd-text-muted);
}

.header-user__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--byrd-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

/* CSS uebersteuert die width/height-Attribute der Inline-SVG im Markup. */
.header-logout-btn svg,
.header-settings-btn svg {
  width: 23px;
  height: 23px;
}

.header-logout-btn svg {
  display: block;
}

.header-logout-btn:hover {
  color: #de350b;
  background: #fff5f5;
}

.header-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--byrd-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.header-settings-btn svg {
  display: block;
}

.header-settings-btn:hover,
.header-settings-btn--active {
  color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.nav-btn {
  padding: 0.575rem 1.15rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--byrd-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-btn:hover {
  color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.nav-btn.active {
  color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.main {
  padding: 1.5rem 2rem 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.dashboard {
  --drawer-toggle-size: 57px;
  --drawer-width: clamp(280px, 32vw, 360px);
  --drawer-max-height: calc(100dvh - var(--byrd-header-height) - 3rem);
  --drawer-edge-gap: 1rem;
  --drawer-toggle-gap: 0.5rem;
  --drawer-side-inset: calc(var(--drawer-edge-gap) + var(--drawer-toggle-size) + var(--drawer-toggle-gap));
  position: relative;
  min-height: 120px;
}

.dashboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--byrd-overlay);
  cursor: pointer;
}

.wartebereich-toggle {
  position: fixed;
  left: var(--drawer-edge-gap);
  top: calc(var(--byrd-header-height) + 1.5rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--drawer-toggle-size);
  height: var(--drawer-toggle-size);
  padding: 0;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  background: #fff;
  color: var(--byrd-teal);
  box-shadow: 0 2px 8px rgba(9, 30, 66, 0.1);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.wartebereich-toggle:hover {
  border-color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.wartebereich-toggle svg {
  width: 34px;
  height: 34px;
}

.wartebereich-toggle--alert {
  animation: wartebereich-pulse 1.5s ease-in-out infinite;
}

@keyframes wartebereich-pulse {
  0%,
  100% {
    color: #de350b;
    box-shadow: 0 0 0 0 rgba(222, 53, 11, 0.45);
  }
  50% {
    color: #ff5630;
    box-shadow: 0 0 0 10px rgba(222, 53, 11, 0);
  }
}

.wartebereich-drawer {
  position: fixed;
  left: var(--drawer-side-inset);
  top: calc(var(--byrd-header-height) + 1.5rem);
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: var(--drawer-width);
  height: auto;
  max-height: var(--drawer-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(calc(-100% - var(--drawer-edge-gap)));
  transition: transform 0.25s ease;
  visibility: hidden;
  pointer-events: none;
}

.dashboard--wartebereich-open .wartebereich-drawer {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.dashboard--wartebereich-open .wartebereich-toggle {
  z-index: 101;
}

.bearbeitungsbereich {
  margin-left: var(--drawer-side-inset);
  margin-right: var(--drawer-side-inset);
}

.rueckmeldungen-toggle {
  position: fixed;
  right: var(--drawer-edge-gap);
  top: calc(var(--byrd-header-height) + 1.5rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--drawer-toggle-size);
  height: var(--drawer-toggle-size);
  padding: 0;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  background: #fff;
  color: var(--byrd-teal);
  box-shadow: 0 2px 8px rgba(9, 30, 66, 0.1);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.rueckmeldungen-toggle:hover {
  border-color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.rueckmeldungen-toggle svg {
  width: 31px;
  height: 31px;
}

.rueckmeldungen-toggle--alert {
  animation: rueckmeldungen-pulse 1.5s ease-in-out infinite;
}

@keyframes rueckmeldungen-pulse {
  0%,
  100% {
    color: #6a1b9a;
    box-shadow: 0 0 0 0 rgba(106, 27, 154, 0.35);
  }
  50% {
    color: #8e24aa;
    box-shadow: 0 0 0 8px rgba(106, 27, 154, 0);
  }
}

.rueckmeldungen-drawer {
  position: fixed;
  right: var(--drawer-side-inset);
  top: calc(var(--byrd-header-height) + 1.5rem);
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--drawer-width);
  height: auto;
  max-height: var(--drawer-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(calc(100% + var(--drawer-edge-gap)));
  transition: transform 0.25s ease;
}

.dashboard--rueckmeldungen-open .rueckmeldungen-drawer {
  transform: translateX(0);
}

.rueckmeldungen {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.rueckmeldungen h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.rueckmeldungen-filters {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.75rem;
}

.rueckmeldungen-block {
  margin-top: 0.75rem;
}

.rueckmeldungen-block__toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.25rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5e6c84;
  cursor: pointer;
  text-align: left;
}

.rueckmeldungen-block__toggle:hover {
  color: #172b4d;
}

.rueckmeldungen-block__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #42526e;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.rueckmeldungen-block--expanded .rueckmeldungen-block__chevron {
  transform: rotate(90deg);
}

.rueckmeldungen-block__count {
  font-weight: 500;
  color: #5e6c84;
}

.rueckmeldungen-block__body {
  margin-top: 0.25rem;
}

.rueckmeldungen-block:not(.rueckmeldungen-block--expanded) .rueckmeldungen-block__body {
  display: none;
}

.rueckmeldungen-block--older {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ebecf0;
}

.rueckmeldungen-block--older .rueckmeldungen-block__toggle {
  color: #6a1b9a;
}

.rueckmeldungen-block--older .rueckmeldungen-block__toggle:hover {
  color: #4a148c;
}

.rueckmeldungen-list {
  position: relative;
  margin-top: 0.75rem;
}

.rueckmeldungen-list__scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rueckmeldungen-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rueckmeldungen-list__row {
  border-bottom: 1px solid #ebecf0;
}

.rueckmeldungen-list__row:last-child {
  border-bottom: none;
}

.rueckmeldungen-list__row-inner {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.35rem;
}

.rueckmeldungen-list__row:hover {
  background: #fafbfc;
}

.rueckmeldungen-list__timestamp {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}

.rueckmeldungen-list__date {
  font-size: 0.72rem;
  font-weight: 600;
  color: #42526e;
  white-space: nowrap;
}

.rueckmeldungen-list__time {
  font-size: 0.65rem;
  color: #5e6c84;
  white-space: nowrap;
}

.rueckmeldungen-list__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.rueckmeldungen-list__content:hover {
  color: var(--byrd-teal);
}

.rueckmeldungen-list__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #172b4d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rueckmeldungen-list__grund {
  font-size: 0.72rem;
  color: #5e6c84;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rueckmeldungen-list__empty {
  padding: 0.75rem 0.35rem;
  color: #97a0af;
  font-size: 0.78rem;
}

.rueckmeldung-detail__header {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #ebecf0;
}

.rueckmeldung-detail__kunde {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5e6c84;
}

.rueckmeldung-detail__betreff {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: #172b4d;
  word-break: break-word;
}

.rueckmeldung-detail__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rueckmeldung-detail__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}

.rueckmeldung-detail__field dt {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
}

.rueckmeldung-detail__field dd {
  margin: 0;
  font-size: 0.84rem;
  color: #172b4d;
  word-break: break-word;
}

.rueckmeldung-detail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rueckmeldung-detail__return-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rueckmeldung-detail__return-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #5e6c84;
}

.rueckmeldung-detail__return {
  color: var(--byrd-teal);
}

.rueckmeldung-detail__return svg {
  width: 28px;
  height: 28px;
}

.rueckmeldung-detail__return:hover:not(:disabled) {
  background: var(--byrd-teal-light);
}

.rueckmeldung-detail__return:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ticket-match-modal__panel {
  width: min(100%, 920px);
}

.ticket-match-modal__hint {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  color: #5e6c84;
}

.ticket-match-modal__table-wrap {
  margin-bottom: 1rem;
  max-height: min(50dvh, 360px);
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ticket-match-modal__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ticket-match-modal__table th,
.ticket-match-modal__table td {
  padding: 0.55rem 0.75rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #ebecf0;
  font-size: 0.82rem;
  color: #172b4d;
  word-break: break-word;
}

.ticket-match-modal__table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
  background: #fafbfc;
}

.ticket-match-modal__table tbody th {
  width: 120px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
  background: #fafbfc;
}

.ticket-match-modal__table tbody td {
  width: calc((100% - 120px) / 2);
}

.ticket-match-modal__row--diff td,
.ticket-match-modal__row--diff th {
  background: #fff8e1;
}

.ticket-match-modal__grund {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #7c4dff;
  border-radius: 0 8px 8px 0;
  background: #f8f5ff;
}

.ticket-match-modal__grund-title {
  margin: 0 0 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
}

.ticket-match-modal__grund-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #172b4d;
  white-space: pre-wrap;
}

.ticket-match-modal__grund-meta {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  color: #5e6c84;
}

.ticket-match-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ticket-match-modal__choices {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ticket-match-modal__confirm {
  color: #00875a;
}

.ticket-match-modal__confirm:hover:not(:disabled) {
  background: #e3fcef;
}

.ticket-match-modal__reject {
  color: #de350b;
}

.ticket-match-modal__reject:hover:not(:disabled) {
  background: #ffebe6;
}

@media (max-width: 640px) {
  .ticket-match-modal__table thead {
    display: none;
  }

  .ticket-match-modal__table,
  .ticket-match-modal__table tbody,
  .ticket-match-modal__table tr,
  .ticket-match-modal__table th,
  .ticket-match-modal__table td {
    display: block;
    width: 100%;
  }

  .ticket-match-modal__table tr {
    margin-bottom: 0.75rem;
    border: 1px solid #ebecf0;
    border-radius: 8px;
    overflow: hidden;
  }

  .ticket-match-modal__table tbody th {
    border-bottom: none;
    padding-bottom: 0.25rem;
  }

  .ticket-match-modal__table tbody td {
    border-bottom: none;
    padding-top: 0.15rem;
  }

  .ticket-match-modal__table tbody td::before {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5e6c84;
  }

  .ticket-match-modal__table tbody td:nth-child(2)::before {
    content: 'Wartebereich';
  }

  .ticket-match-modal__table tbody td:nth-child(3)::before {
    content: 'Vergleich';
  }
}

@media (max-width: 520px) {
  .rueckmeldung-detail__row {
    grid-template-columns: 1fr;
  }
}

.wartebereich {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.wartebereich h2,
.bearbeitungsbereich h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.section-subtitle {
  margin: 0 0 0.75rem;
  color: #6b778c;
  font-size: 0.75rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.section-header--bearbeitung {
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.section-header--bearbeitung .section-header__title {
  text-align: center;
}

.section-header--bearbeitung h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.section-header--bearbeitung .section-header__title .section-subtitle {
  margin-bottom: 0;
  color: var(--byrd-hint);
}

.bearbeitungsbereich-filters {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.create-name-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.create-name-form input {
  flex: 1;
  padding: 0.45rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font: inherit;
  font-size: 0.8rem;
}

.waiting-list {
  border: none;
  margin: 0;
  padding: 0;
}

.waiting-list__scroll {
  border: 1px solid #ebecf0;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* .wartebereich / .rueckmeldungen must not override drawer scroll (overflow: visible) */
.rueckmeldungen-drawer.rueckmeldungen,
.wartebereich-drawer.wartebereich {
  width: var(--drawer-width);
  max-height: var(--drawer-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.wartebereich-drawer.wartebereich .create-name-form {
  flex-shrink: 0;
}

.wartebereich-drawer.wartebereich .waiting-list__scroll,
.rueckmeldungen-drawer.rueckmeldungen .rueckmeldungen-list__scroll {
  max-height: min(50dvh, 420px);
}

#waiting-popup-host {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
}

#waiting-popup-host .waiting-popup {
  pointer-events: auto;
}

.waiting-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.waiting-list__row {
  position: relative;
  border-bottom: 1px solid #ebecf0;
}

.waiting-list__row-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.waiting-list__item {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.waiting-list__delete {
  flex-shrink: 0;
  margin-right: 0.35rem;
}

.waiting-list__row:hover,
.waiting-list__row--open {
  background: var(--byrd-teal-light);
}

.waiting-list__empty {
  padding: 1rem;
  color: #97a0af;
  font-size: 0.75rem;
}

.waiting-popup {
  position: fixed;
  z-index: 110;
  width: 240px;
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.18);
  padding: 0.85rem;
}

.waiting-popup::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 12px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #dfe1e6;
  border-bottom: 1px solid #dfe1e6;
  transform: rotate(45deg);
}

@media (max-width: 1200px) {
  .waiting-popup {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(280px, 90vw);
  }

  .waiting-popup::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .dashboard {
    --drawer-width: min(clamp(280px, 32vw, 360px), calc(100vw - 2rem));
    --drawer-edge-gap: 0.5rem;
  }

  .wartebereich-drawer {
    left: var(--drawer-side-inset);
    width: var(--drawer-width);
  }

  .rueckmeldungen-drawer {
    right: var(--drawer-side-inset);
    width: var(--drawer-width);
  }
}

.waiting-popup__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.waiting-popup__header h3 {
  margin: 0;
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

.form-group label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
}

.form-group input,
.form-group select {
  padding: 0.4rem 0.5rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font: inherit;
  font-size: 0.75rem;
  background: #fff;
}

.filter-panel {
  position: relative;
}

.filter-panel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.filter-panel__tab {
  position: relative;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: 999px;
  background: var(--byrd-surface);
  color: var(--byrd-label);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.filter-panel__tab:hover {
  border-color: color-mix(in srgb, var(--byrd-teal) 45%, var(--byrd-border-subtle));
  background: var(--byrd-surface-alt);
  color: var(--byrd-teal);
}

.filter-panel__tab--active {
  border-color: transparent;
  background: transparent;
  color: var(--byrd-teal);
  box-shadow: inset 0 -2px 0 var(--byrd-teal);
  border-radius: 0;
}

.filter-panel__tab--filtered::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--byrd-teal);
}

.filter-panel__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 40;
  min-width: 180px;
  max-width: 260px;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.15);
}

.filter-panel__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #172b4d;
  cursor: pointer;
}

.filter-panel__option:hover {
  background: #f4f5f7;
}

.filter-panel__option input {
  margin: 0;
  accent-color: var(--byrd-teal);
}

.filter-panel__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.35rem;
  border: none;
  border-top: 1px solid #ebecf0;
  border-radius: 0 0 6px 6px;
  background: transparent;
  color: #6b778c;
  cursor: pointer;
}

.filter-panel__clear:hover {
  color: #de350b;
  background: #ffebe6;
}

.filter-panel__clear svg {
  width: 16px;
  height: 16px;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--byrd-teal);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.btn--compact {
  padding: 0.45rem 0.7rem;
  font-size: 1rem;
  line-height: 1;
}

.btn--full {
  width: 100%;
}

.error {
  margin: 0 0 0.5rem;
  color: #de350b;
  font-size: 0.75rem;
}

.triage-table {
  --triage-scale: 1.1;
  --triage-grid-columns: 132px 99px 42px 91px minmax(70px, 1fr) 55px 141px 31px 31px 26px;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: 12px;
  /* Kein overflow-Clipping: die PDC-Fahne faehrt links aus der Zeile heraus.
     Die Ecken werden deshalb unten auf den Elementen gerundet, die Flaeche malen. */
  overflow: visible;
  background: var(--byrd-surface);
  box-shadow:
    0 1px 3px rgba(9, 30, 66, 0.04),
    0 8px 24px rgba(9, 30, 66, 0.06);
}

.triage-table .triage-header,
.triage-table .triage-row {
  display: grid;
  grid-template-columns: var(--triage-grid-columns);
  align-items: stretch;
  min-height: 39.6px;
}

.triage-header,
.triage-row {
  display: grid;
  grid-template-columns: 120px 90px 38px 75px minmax(64px, 1fr) 50px 128px 28px 28px 24px;
  align-items: stretch;
  min-height: 36px;
}

.triage-row-group {
  border-bottom: 1px solid var(--byrd-border);
  background: var(--byrd-surface);
}

/* Ersetzt das entfernte overflow-Clipping der Tabelle: die untere Rundung
   sitzt auf letzter Gruppe, letzter Zeile und deren Randzellen (Dunkelmodus
   faerbt die Zellen ein), damit die Ecken nicht eckig durchschlagen.
   11px = 12px Tabellenradius minus 1px Rahmen. */
.triage-table .triage-row-group:last-child,
.triage-table .triage-row-group:last-child .triage-row__expand,
.triage-table .triage-empty {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}

.triage-table .triage-row-group:last-child:not(.triage-row-group--expanded) .triage-row {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}

.triage-table .triage-row-group:last-child:not(.triage-row-group--expanded) .triage-row__prio-timer {
  border-bottom-left-radius: 11px;
}

.triage-table .triage-row-group:last-child:not(.triage-row-group--expanded) .triage-row__mark-box {
  border-bottom-right-radius: 11px;
}

.triage-table .triage-header > div:first-child {
  border-top-left-radius: 11px;
}

.triage-table .triage-header > div:last-child {
  border-top-right-radius: 11px;
}

.triage-row-group:nth-child(even) {
  background: color-mix(in srgb, var(--byrd-teal-light) 26%, var(--byrd-surface));
}

.triage-row-group:last-child {
  border-bottom: none;
}

.triage-row-group--expanded {
  position: relative;
  z-index: 1;
  background: var(--byrd-surface);
  box-shadow:
    inset 3px 0 0 var(--byrd-teal),
    0 0 0 1px var(--byrd-border),
    0 4px 12px var(--byrd-shadow);
}

.triage-row-group--expanded .triage-row--open {
  background: var(--byrd-row-open);
  border-bottom: 1px solid var(--byrd-border);
}

.triage-row-group--expanded .triage-row__expand {
  background: var(--byrd-surface-muted);
  border-top: 1px solid var(--byrd-border);
  border-bottom: none;
  box-shadow: none;
}

.triage-header {
  background: var(--byrd-surface-muted);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--byrd-label);
}

.triage-header__ziel {
  letter-spacing: 0.04em;
}

.triage-row {
  position: relative;
  cursor: pointer;
  transition: background var(--byrd-transition-fast);
}

.triage-table .triage-row:hover:not(.triage-row--open) {
  background: color-mix(in srgb, var(--byrd-teal-light) 35%, var(--byrd-surface));
}

.triage-row--open {
  background: var(--byrd-row-open);
}

.triage-table .triage-header > div,
.triage-table .triage-row__cell,
.triage-table .triage-row__action {
  padding: 0.385rem 0.44rem;
  font-size: 0.792rem;
}

.triage-table .triage-header {
  font-size: 0.638rem;
}

.triage-table .triage-row__prio-timer {
  padding: 0.33rem 0.44rem;
  font-size: 0.748rem;
}

.triage-table .triage-row__user-priority {
  font-size: 0.858rem;
}

.triage-table .triage-row__timer {
  font-size: 0.715rem;
}

.triage-table .triage-row__prio-timer--finished {
  font-size: 0.935rem;
}

.triage-table .triage-empty {
  padding: 1.1rem;
  font-size: 0.825rem;
}

.triage-header__gtin,
.triage-row__cell--gtin {
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.triage-row__cell--gtin {
  color: var(--byrd-teal);
}

.triage-header > div,
.triage-row__cell,
.triage-row__action {
  padding: 0.35rem 0.4rem;
  border-right: 1px solid var(--byrd-border-subtle);
  border-bottom: 1px solid var(--byrd-border-subtle);
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.triage-row__blink-lights {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 12px;
  flex-shrink: 0;
  padding: 2px;
  background: #1a1a1a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 3px;
}

.triage-row__blink-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d2d2d;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  opacity: 0.35;
}

.triage-row__blink-lights--active .triage-row__blink-light--a {
  animation: airport-blink-a 0.9s step-end infinite;
}

.triage-row__blink-lights--active .triage-row__blink-light--b {
  animation: airport-blink-b 0.9s step-end infinite;
}

.triage-row__blink-lights--paused .triage-row__blink-light--a,
.triage-row__blink-lights--paused .triage-row__blink-light--b {
  animation: none;
  background: #ff9800;
  box-shadow:
    0 0 3px #ff9800,
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

@keyframes airport-blink-a {
  0%,
  49% {
    background: #00e676;
    box-shadow:
      0 0 4px #00e676,
      0 0 8px rgba(0, 230, 118, 0.6),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }

  50%,
  100% {
    background: #2d2d2d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0.35;
  }
}

@keyframes airport-blink-b {
  0%,
  49% {
    background: #2d2d2d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0.35;
  }

  50%,
  100% {
    background: #00e676;
    box-shadow:
      0 0 4px #00e676,
      0 0 8px rgba(0, 230, 118, 0.6),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .triage-row__blink-lights--active .triage-row__blink-light--a,
  .triage-row__blink-lights--active .triage-row__blink-light--b {
    animation: none;
    background: #00e676;
    box-shadow:
      0 0 3px #00e676,
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }

  .triage-row__blink-lights--paused .triage-row__blink-light--a,
  .triage-row__blink-lights--paused .triage-row__blink-light--b {
    animation: none;
    background: #ff9800;
    box-shadow:
      0 0 3px #ff9800,
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }
}

.triage-row__action--question {
  padding: 0.2rem;
  overflow: visible;
}

.triage-row__question {
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.triage-row__question--neutral {
  color: #42526e;
}

.triage-row__mark-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
}

.triage-row__mark-box,
.triage-row__cell--erfasser .icon-btn.triage-row__pause-icon,
.triage-row__action--question .icon-btn.triage-row__question {
  box-sizing: border-box;
  width: 20px;
  height: 24px;
  min-width: 20px;
  min-height: 24px;
  max-width: 20px;
  max-height: 24px;
  padding: 0;
  flex-shrink: 0;
}

.triage-row__mark-box {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.15rem 0.1rem 0.15rem 0;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  color: #42526e;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.triage-row__pause-icon svg {
  width: 11px;
  height: 11px;
}

.triage-row__mark-box--active {
  background: #ff9800;
  border-color: #f57c00;
  color: #fff;
}

.triage-header > div:last-child,
.triage-row__mark-box {
  border-right: none;
}

.triage-row__prio-timer-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.triage-row__prio-timer-content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.triage-row--muted .triage-row__cell,
.triage-row--muted .triage-row__action {
  opacity: 0.55;
  background: var(--byrd-surface-muted);
}

.triage-row__prio-timer--finished {
  background: #f4f5f7 !important;
  color: #97a0af !important;
  justify-content: center;
  font-size: 0.85rem;
}

.triage-row__prio-timer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.3rem 0.4rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--byrd-border-subtle);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 0.68rem;
  white-space: normal;
}

.triage-row__user-priority {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.triage-row__timer {
  font-size: 0.65rem;
  line-height: 1.2;
}

.triage-row__timer-elapsed {
  font-variant-numeric: tabular-nums;
}

.triage-row__timer--stopped {
  opacity: 0.85;
}

.triage-row__pause-badge,
.triage-row__weekend-badge {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0 0.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  vertical-align: middle;
  white-space: nowrap;
}

.triage-row__cell--name {
  font-weight: 600;
  gap: 0.2rem;
  padding-right: 0.15rem;
  overflow: hidden;
}

.triage-row__cell--erfasser {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.35rem;
  overflow: visible;
  white-space: normal;
}

.triage-row__cell--erfasser .triage-row__erfasser-input {
  flex: 1;
  min-width: 0;
}

.triage-row__cell--erfasser .triage-row__erfasser-input select {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0.2rem 0.28rem;
  font-size: 0.68rem;
  line-height: 1.2;
  border-radius: var(--byrd-radius-sm);
  border: 1px solid var(--byrd-border);
  background: var(--byrd-input-bg);
  color: #172b4d;
}

.triage-row__cell--erfasser .triage-row__erfasser-input select:has(option[value='']:checked),
.triage-row__cell--erfasser .triage-row__erfasser-input select[data-empty='true'] {
  font-size: 0.58rem;
  letter-spacing: -0.01em;
  color: #5e6c84;
}

.triage-row__cell--erfasser .triage-row__erfasser-clear {
  width: 24px;
  height: 24px;
}

.triage-header__erfasser {
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

.triage-row__name-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--byrd-teal) 45%, transparent) transparent;
}

.triage-row__name-scroll::-webkit-scrollbar {
  height: 4px;
}

.triage-row__name-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--byrd-teal) 55%, var(--byrd-border));
}

.triage-row__name-text {
  display: inline-block;
  white-space: nowrap;
}

.triage-row__copy-name {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.65;
}

.triage-row__copy-name:hover {
  opacity: 1;
}

.triage-row__action {
  justify-content: center;
  padding: 0.2rem;
  overflow: visible;
}

.triage-row__expand {
  display: grid;
  grid-template-columns: 120px auto 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0.85rem 0.5rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
  background: var(--byrd-surface-subtle);
  box-shadow: inset 0 1px 0 var(--byrd-border-subtle);
}

.triage-row__edit-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.45rem 0.6rem;
}

.triage-row__expand-date {
  grid-column: 1;
  flex-shrink: 0;
  padding: 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #42526e;
  white-space: nowrap;
}

.triage-row__gtin-readonly {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.22rem 0.32rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5e6c84;
}

.triage-row__gtin-readonly-value {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #172b4d;
}

.triage-row__expand-gtins {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, auto));
  gap: 0.2rem 0.25rem;
  align-content: start;
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

.triage-row__expand-future {
  grid-column: 3;
  min-width: 1.5rem;
  min-height: 1px;
}

.triage-row__expand-gtins .triage-row__field {
  padding: 0.22rem 0.32rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
}

.triage-row__expand-gtins .triage-row__field input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.triage-row__expand-trailing {
  grid-column: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.triage-row__expand-erfasser-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5e6c84;
}

.triage-row__expand-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.triage-row__expand-erfasser-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem;
  margin-right: 0.25rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-muted);
}

.triage-row__expand-action-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.triage-row__pause-icon--active {
  background: #fff3e0;
  border-color: #ff9800;
  color: #e65100;
}

.triage-row__edit-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  padding-top: 0.35rem;
  margin-top: 0.1rem;
  border-top: 1px solid var(--byrd-border-subtle);
}

.triage-row__edit-footer-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.triage-row__edit-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.triage-row__edit-gtin-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: #de350b;
  text-align: right;
  width: 100%;
}

.triage-row__edit-gtin-hint[hidden] {
  display: none;
}

.triage-row__edit-save,
.triage-row__edit-cancel {
  padding: 0.35rem 0.75rem;
  border-radius: var(--byrd-radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.triage-row__edit-cancel {
  border: 1px solid var(--byrd-border);
  background: var(--byrd-input-bg);
  color: #42526e;
}

.triage-row__edit-save {
  border: 1px solid #00875a;
  background: #00875a;
  color: #fff;
}

@keyframes triageEditAmbientBreath {
  0%,
  100% {
    --edit-tint: 10%;
    --edit-ring: 22%;
  }

  50% {
    --edit-tint: 18%;
    --edit-ring: 32%;
  }
}

.triage-row-group--editing {
  --edit-tint: 12%;
  --edit-ring: 24%;
  animation: triageEditAmbientBreath 4s ease-in-out infinite;
  background: color-mix(in srgb, var(--byrd-teal-light) var(--edit-tint), var(--byrd-surface-subtle));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--byrd-teal) var(--edit-ring), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .triage-row-group--editing {
    animation: none;
    --edit-tint: 12%;
    --edit-ring: 26%;
  }
}

.triage-row-group--editing .triage-row--muted .triage-row__cell,
.triage-row-group--editing .triage-row--muted .triage-row__action {
  opacity: 1;
  background: transparent;
}

.triage-row-group--editing .triage-row__expand {
  background: transparent;
}

.triage-row__expand--editing {
  padding: 0.45rem 0.85rem 0.5rem;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.triage-row__edit-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #006644;
  background: color-mix(in srgb, var(--byrd-teal-light) 40%, var(--byrd-surface-subtle));
  border: none;
}

.triage-row__expand--editing .triage-row__edit-fields .triage-row__field {
  padding: 0.35rem 0.45rem;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--byrd-input-bg) 92%, var(--byrd-teal-light) 8%);
  box-shadow: inset 0 0 0 1px var(--byrd-border);
}

.triage-row__expand--editing .triage-row__edit-fields .triage-row__field input,
.triage-row__expand--editing .triage-row__edit-fields .triage-row__field select {
  border: 1px solid var(--byrd-border);
  border-radius: 8px;
  padding: 0.28rem 0.4rem;
  background: var(--byrd-input-bg);
}

.triage-row__expand--editing .triage-row__expand-gtins .triage-row__field {
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--byrd-input-bg) 92%, var(--byrd-teal-light) 8%);
  box-shadow: inset 0 0 0 1px var(--byrd-border);
}

.triage-row__field--gtin-invalid input {
  border-color: #de350b !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #de350b 35%, transparent);
}

.triage-row__field--gtin input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.triage-row-group--editing .triage-row--editing {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--byrd-border-subtle);
  cursor: default;
}

.triage-row__cell--edit select,
.triage-row__cell--edit input.triage-row__edit-name {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.28rem 0.38rem;
  border: 1px solid var(--byrd-border);
  border-radius: 8px;
  background: var(--byrd-input-bg);
  font-size: 0.72rem;
  font-weight: 500;
  color: #172b4d;
}

.triage-row__cell--edit select:focus,
.triage-row__cell--edit input.triage-row__edit-name:focus {
  outline: none;
  border-color: var(--byrd-teal);
  box-shadow: var(--byrd-focus-ring);
}

.triage-row__prio-timer--editing {
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.25rem 0.35rem;
}

.triage-row__prio-timer--editing .triage-row__edit-priority {
  width: 100%;
  min-width: 0;
  padding: 0.18rem 0.28rem;
  border: 1px solid var(--byrd-border);
  border-radius: 6px;
  background: var(--byrd-input-bg);
  font-size: 0.62rem;
  font-weight: 700;
  color: #172b4d;
  cursor: pointer;
}

.triage-row__prio-timer--editing .triage-row__edit-priority:focus {
  outline: none;
  border-color: var(--byrd-teal);
  box-shadow: var(--byrd-focus-ring);
}

.triage-row__cell--gtin.triage-row__cell--edit {
  padding: 0.2rem 0.15rem;
  overflow: visible;
}

.triage-row__anzahl-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  width: 100%;
  max-width: 100%;
}

.triage-row__anzahl-step {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1rem;
  padding: 0;
  border: 1px solid var(--byrd-border);
  border-radius: 4px;
  background: var(--byrd-input-bg);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: #42526e;
  cursor: pointer;
}

.triage-row__anzahl-step:hover {
  border-color: var(--byrd-teal);
  color: #006644;
}

.triage-row__anzahl-value {
  min-width: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--byrd-teal);
}

.triage-row__expand-action-icons .icon-btn[data-action='warte_auf_rueckmeldung']:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: #8e24aa;
  background: color-mix(in srgb, #6a1b9a 12%, #fff);
  border-color: color-mix(in srgb, #6a1b9a 35%, var(--byrd-border));
  box-shadow: none;
}

.triage-row__expand-action-icons .icon-btn[data-action='fertig']:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: #006644;
  background: var(--byrd-teal-light);
  border-color: color-mix(in srgb, var(--byrd-teal) 45%, var(--byrd-border));
  box-shadow: none;
}

.triage-row__expand-action-icons .icon-btn[data-action='delete']:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: #de350b;
  background: #fff5f5;
  border-color: color-mix(in srgb, #de350b 35%, var(--byrd-border));
  box-shadow: none;
}

.triage-row__expand-action-icons .icon-btn[data-edit-toggle]:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: var(--byrd-teal);
  background: var(--byrd-teal-light);
  border-color: color-mix(in srgb, var(--byrd-teal) 45%, var(--byrd-border));
  box-shadow: none;
}

.triage-row__expand-action-icons .icon-btn[data-edit-toggle].icon-btn--active:hover:not([aria-disabled='true']) {
  color: #006644;
  background: color-mix(in srgb, var(--byrd-teal-light) 75%, #fff);
  border-color: var(--byrd-teal);
}

/* PDC: Markierung fuer KI-Test. Leer = inaktiv, schwarz gefuellt = aktiv.
   Schwarz statt Teal, weil Teal im Dashboard fuer andere Aktivzustaende steht
   und der Button zur schwarzen Fahne gehoert. */
.triage-row__pdc-btn {
  width: 42px;
  border-radius: var(--byrd-radius-sm);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--byrd-label);
}

.triage-row__pdc-btn:hover {
  color: var(--byrd-heading);
  background: var(--byrd-surface-muted);
  border-color: color-mix(in srgb, #1a1a1a 35%, var(--byrd-border));
  box-shadow: none;
}

.triage-row__pdc-btn:focus-visible {
  outline: none;
  box-shadow: var(--byrd-focus-ring);
}

.triage-row__pdc-btn--active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

.triage-row__pdc-btn--active:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* Faehrt links aus der Zeile heraus in den Aussenabstand von
   .bearbeitungsbereich (81px). Das Spaltenraster bleibt unberuehrt, weil die
   Fahne absolut positioniert ist und keine Gridspalte belegt. */
.triage-row__pdc-flag {
  position: absolute;
  top: 50%;
  right: 100%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 0.14rem 0.3rem;
  border-radius: var(--byrd-radius-sm) 0 0 var(--byrd-radius-sm);
  background: #1a1a1a;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.25);
}

.triage-row__expand--editing .triage-row__field--created {
  grid-column: 1;
  align-self: start;
}

.icon-btn--active {
  background: #e3fcef;
  border-color: #00875a;
  color: #00875a;
}

.icon-btn--erfasser-blocked,
.icon-btn[aria-disabled='true'].icon-btn--erfasser-blocked {
  opacity: 0.45;
  filter: grayscale(0.65);
  cursor: not-allowed;
  background: #f4f5f7 !important;
  border-color: #dfe1e6 !important;
  color: #a5adba !important;
  box-shadow: none !important;
}

.icon-btn--erfasser-blocked:hover {
  background: #f4f5f7 !important;
  border-color: #dfe1e6 !important;
  box-shadow: none !important;
}

.erfasser-required-popup {
  position: fixed;
  z-index: 200;
  max-width: 220px;
  padding: 0.5rem 0.65rem;
  background: #42526e;
  color: #fff;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(9, 30, 66, 0.25);
  pointer-events: none;
  animation: erfasser-required-popup-in 0.15s ease-out;
}

@keyframes erfasser-required-popup-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.triage-row__expand--multi {
  min-height: calc(var(--gtin-rows, 2) * 2.5rem + 0.85rem);
}

.triage-row__expand .triage-row__field {
  gap: 0.12rem;
  font-size: 0.58rem;
}

.triage-row__expand .triage-row__field input,
.triage-row__expand .triage-row__erfasser-input select {
  min-width: 96px;
  padding: 0.22rem 0.35rem;
  font-size: 0.72rem;
  border-radius: var(--byrd-radius-sm);
  border-color: var(--byrd-border);
  background: var(--byrd-input-bg);
  transition:
    border-color var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast);
}

.triage-row__expand .triage-row__field input:focus,
.triage-row__expand .triage-row__erfasser-input select:focus {
  outline: none;
  border-color: var(--byrd-teal);
  box-shadow: var(--byrd-focus-ring);
}

.triage-row__expand .triage-row__field--erfasser .triage-row__erfasser-input {
  min-width: 130px;
}

.triage-row__expand .triage-row__erfasser-clear {
  width: 24px;
  height: 24px;
}

.triage-row__expand .triage-row__status-btn {
  padding: 0.25rem 0.45rem;
  font-size: 0.68rem;
  gap: 0.25rem;
}

.triage-row__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #5e6c84;
}

.triage-row__field input {
  min-width: 120px;
  padding: 0.35rem 0.45rem;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #172b4d;
}

.triage-row__field--erfasser .triage-row__erfasser-input {
  min-width: 160px;
}

.triage-row__erfasser-input {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.triage-row__erfasser-input input,
.triage-row__erfasser-input select {
  flex: 1;
  min-width: 0;
}

.triage-row__erfasser-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #dfe1e6;
  border-radius: 5px;
  background: #fff;
  color: #6b778c;
  cursor: pointer;
}

.triage-row__erfasser-clear:hover {
  color: #de350b;
  background: #ffebe6;
  border-color: #ffbdad;
}

.triage-row__erfasser-clear svg {
  width: 14px;
  height: 14px;
}

.triage-row__expand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: 0;
}

.triage-row__status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  color: #42526e;
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    background var(--byrd-transition-fast),
    border-color var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast);
}

.triage-row__status-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--byrd-teal) 35%, var(--byrd-border));
  box-shadow: 0 1px 3px var(--byrd-shadow);
}

.triage-row__status-btn--indicator:disabled {
  opacity: 1;
  cursor: default;
}

.triage-row__status-btn--active {
  background: #e3fcef;
  border-color: #00875a;
}

.triage-row__status-btn--pause.triage-row__status-btn--active {
  background: #fff3e0;
  border-color: #ff9800;
  color: #e65100;
}

.triage-row__status-btn--mark.triage-row__status-btn--active {
  background: #ffebe6;
  border-color: #de350b;
}

.triage-row__mark-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #de350b;
}

.configure-form__gtins {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  cursor: pointer;
  color: #42526e;
  padding: 0;
  transition:
    background var(--byrd-transition-fast),
    border-color var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast);
}

.icon-btn:hover {
  background: var(--byrd-surface-muted);
  border-color: color-mix(in srgb, var(--byrd-teal) 35%, var(--byrd-border));
  box-shadow: 0 1px 3px var(--byrd-shadow);
}

.icon-btn.triage-row__question--open {
  background: #de350b;
  border-color: #bf2600;
  color: #fff;
}

.icon-btn.triage-row__question--answered {
  background: #00875a;
  border-color: #006644;
  color: #fff;
}

.icon-btn.triage-row__question--open:hover:not(:disabled) {
  background: #de350b;
  border-color: #bf2600;
  color: #fff;
  box-shadow: none;
}

.icon-btn.triage-row__question--answered:hover:not(:disabled) {
  background: #00875a;
  border-color: #006644;
  color: #fff;
  box-shadow: none;
}

.triage-empty {
  padding: 1rem;
  text-align: center;
  color: #97a0af;
  font-size: 0.75rem;
}

.fertig-section {
  margin-top: 1rem;
}

.fertig-section h3 {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: #5e6c84;
}

@media (max-width: 1200px) {
  .waiting-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(280px, 90vw);
  }

  .waiting-popup::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .triage-table {
    overflow-x: auto;
  }

  .triage-table .triage-header,
  .triage-table .triage-row {
    min-width: 872px;
  }

  .triage-header,
  .triage-row {
    min-width: 800px;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 1rem;
  }

  .dashboard {
    --wartebereich-drawer-width: min(clamp(280px, 32vw, 360px), calc(100vw - 2rem));
    --rueckmeldungen-drawer-width: min(clamp(280px, 32vw, 360px), calc(100vw - 2rem));
    --wartebereich-offset: 1rem;
    --rueckmeldungen-offset: 1rem;
  }

  .dashboard--wartebereich-open .bearbeitungsbereich {
    margin-left: var(--wartebereich-offset);
  }

  .dashboard--rueckmeldungen-open .bearbeitungsbereich {
    margin-right: var(--rueckmeldungen-offset);
  }

  .wartebereich-drawer {
    left: 0;
    width: var(--wartebereich-drawer-width);
    max-width: 100%;
    transform: translateX(-110%);
  }

  .dashboard--wartebereich-open .wartebereich-drawer {
    transform: translateX(0);
  }

  .rueckmeldungen-drawer {
    right: 0;
    width: var(--rueckmeldungen-drawer-width);
    max-width: 100%;
    transform: translateX(110%);
  }

  .dashboard--rueckmeldungen-open .rueckmeldungen-drawer {
    transform: translateX(calc(-1 * var(--rueckmeldungen-offset)));
  }
}

body.settings-open {
  overflow: hidden;
}

#settings-overlay-host {
  position: static;
}

/* Settings overlay */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 1.5rem;
  background: var(--byrd-overlay);
}

.settings-overlay__panel {
  width: min(1125px, 100%);
  height: min(80vh, 875px);
  height: min(80dvh, 875px);
  max-height: var(--popup-overlay-max-height);
  max-height: var(--popup-overlay-max-height-dynamic);
  background: var(--byrd-surface);
  border-radius: var(--byrd-radius-md);
  box-shadow:
    0 1px 2px var(--byrd-shadow),
    0 16px 48px var(--byrd-shadow-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--byrd-heading);
}

.settings-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
  background: var(--byrd-surface-muted);
}

.settings-overlay__header h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--byrd-heading);
}

.settings-overlay__close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--byrd-label);
  border-radius: var(--byrd-radius-sm);
  padding: 0.15rem 0.35rem;
  transition: background var(--byrd-transition-fast), color var(--byrd-transition-fast);
}

.settings-overlay__close:hover {
  background: var(--byrd-surface-subtle);
  color: var(--byrd-heading);
}

.settings-overlay__layout {
  flex: 1;
  display: grid;
  grid-template-columns: 275px 1fr;
  min-height: 0;
}

.settings-overlay__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--byrd-border-subtle);
  background: var(--byrd-surface-subtle);
}

.settings-overlay__nav-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-radius: var(--byrd-radius-sm);
  font-size: 0.9rem;
  color: var(--byrd-heading);
  cursor: pointer;
  transition: background var(--byrd-transition-fast), color var(--byrd-transition-fast);
}

.settings-overlay__nav-item:hover {
  background: color-mix(in srgb, var(--byrd-teal-light) 55%, var(--byrd-surface-subtle));
}

.settings-overlay__nav-item--active {
  background: var(--byrd-teal-light);
  color: var(--byrd-teal);
  font-weight: 600;
}

.settings-overlay__content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.settings-overlay__content .general-settings-panel__body,
.settings-overlay__content .evaluation-settings-panel__body,
.settings-overlay__content .customer-settings-panel__body,
.settings-overlay__content .dashboard-settings-panel__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.settings-overlay__placeholder {
  padding: 1.5rem;
}

.settings-overlay__placeholder h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--byrd-heading);
}

.settings-overlay__placeholder p {
  margin: 0;
  color: var(--byrd-hint);
}

.attributes-editor-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.attributes-editor-panel__header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #ebecf0;
}

.attributes-editor-panel__header h3 {
  margin: 0 0 0.35rem;
}

.attributes-editor-panel__header p {
  margin: 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.attributes-editor-panel__body {
  flex: 1;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}

.attributes-editor-panel__section + .attributes-editor-panel__section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ebecf0;
}

.attributes-editor-panel__section h3,
.attributes-editor-panel__section .attributes-editor-panel__section-title {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: #42526e;
}

.attributes-editor-panel__list {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
}

.attributes-editor-panel__list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.attributes-editor-panel__list-item--bilingual {
  align-items: flex-start;
}

.attributes-editor-panel__bilingual-fields {
  display: flex;
  flex: 1;
  gap: 0.45rem;
  min-width: 0;
}

.attributes-editor-panel__bilingual-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.attributes-editor-panel__bilingual-lang {
  font-size: 0.68rem;
  font-weight: 600;
  color: #5e6c84;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.attributes-editor-panel__bilingual-field input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font-size: 0.85rem;
}

.attributes-editor-panel__hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: #5e6c84;
  line-height: 1.35;
}

.attributes-editor-panel__add-form--bilingual {
  flex-wrap: wrap;
}

.attributes-editor-panel__add-form--bilingual input {
  flex: 1 1 8rem;
}

.attributes-editor-panel__list-item input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font-size: 0.85rem;
}

.attributes-editor-panel__delete {
  border: 1px solid #de350b;
  background: #fff;
  color: #de350b;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
}

.attributes-editor-panel__add-form {
  display: flex;
  gap: 0.4rem;
}

.attributes-editor-panel__add-form input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font-size: 0.85rem;
}

.attributes-editor-panel__add-form button {
  border: none;
  background: var(--byrd-teal);
  color: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.attributes-editor-panel__error {
  margin: 0.75rem 0 0;
  color: #de350b;
  font-size: 0.85rem;
}

.attributes-editor-panel__success {
  margin: 0.75rem 0 0;
  color: #00875a;
  font-size: 0.85rem;
}

.attributes-editor-panel__footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid #dfe1e6;
  background: #fafbfc;
}

.attributes-editor-panel__save {
  border: none;
  background: #c1c7d0;
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: not-allowed;
}

.attributes-editor-panel__save:disabled {
  opacity: 1;
}

.attributes-editor-panel__save--dirty {
  background: var(--byrd-teal);
  cursor: pointer;
}

@media (max-width: 720px) {
  .settings-overlay__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .settings-overlay__sidebar {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--byrd-border-subtle);
  }

  .settings-overlay__nav-item {
    white-space: nowrap;
  }
}

.customers-overview {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.customers-overview__header h2 {
  margin: 0 0 0.35rem;
}

.customers-overview__header-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
}

.global-analytics-banner {
  flex: 0 0 min(100%, 280px);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(0, 150, 136, 0.28);
  background: linear-gradient(145deg, rgba(224, 247, 250, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.global-analytics-banner:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 150, 136, 0.5);
  box-shadow:
    0 8px 24px rgba(0, 96, 100, 0.12),
    0 2px 8px rgba(9, 30, 66, 0.08);
}

.global-analytics-banner__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00695c;
}

.global-analytics-banner__title {
  font-size: 1.15rem;
  line-height: 1.2;
  color: #172b4d;
}

.global-analytics-banner__stats {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.global-analytics-banner__stats div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.global-analytics-banner__stats dt {
  margin: 0;
  font-size: 0.72rem;
  color: #5e6c84;
}

.global-analytics-banner__stats dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #172b4d;
}

.global-analytics-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.global-analytics-page__header {
  display: flex;
  align-items: center;
}

.global-analytics-filter {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.global-analytics-filter__label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5e6c84;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.global-analytics-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.global-analytics-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 150, 136, 0.22);
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  cursor: pointer;
}

.global-analytics-filter__chip input {
  accent-color: #00897b;
}

@media (max-width: 640px) {
  .customers-overview__header-row {
    flex-direction: column;
  }

  .global-analytics-banner {
    flex-basis: auto;
  }
}

.customers-overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Liegt bewusst ueber den Dialogen (z-index 1200), damit Aktionsfehler
   auch bei offenem Modal sichtbar sind. */
.action-notice {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1300;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: min(92vw, 520px);
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid #f5c2c0;
  background: #fdf1f0;
  color: #b3251f;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 10px 28px rgba(23, 43, 77, 0.18);
}

.action-notice__text {
  flex: 1;
}

.action-notice__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
  opacity: 0.7;
}

.action-notice__close:hover {
  opacity: 1;
}

.customers-overview__empty {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.customers-overview__empty-title {
  font-size: 1rem;
  color: #172b4d;
}

.customers-overview__empty-hint {
  margin: 0;
  max-width: 48ch;
  font-size: 0.85rem;
  color: var(--byrd-text-muted);
  line-height: 1.5;
}

.customer-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.35rem 1.4rem;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.customer-tile.card {
  background-color: #ffffff;
  border: 1px solid var(--byrd-border, #dfe1e6);
  box-shadow:
    0 1px 3px rgba(9, 30, 66, 0.08),
    0 6px 18px rgba(9, 30, 66, 0.1),
    0 14px 32px rgba(0, 96, 100, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.customer-tile--branded {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.customer-tile--branded::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.78) 45%,
    rgba(255, 255, 255, 0.92) 100%
  );
  z-index: 0;
  transition: background 0.15s ease;
}

.customer-tile--branded.customer-tile--bravo::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.82) 40%,
    rgba(255, 255, 255, 0.96) 100%
  );
}

.customer-tile--branded:hover::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.84) 45%,
    rgba(255, 255, 255, 0.96) 100%
  );
}

.customer-tile__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.customer-tile:hover {
  transform: translateY(-4px);
  border-color: var(--byrd-teal);
  box-shadow:
    0 2px 4px rgba(9, 30, 66, 0.08),
    0 8px 20px rgba(9, 30, 66, 0.12),
    0 18px 36px rgba(0, 96, 100, 0.18);
}

.customer-tile--static {
  cursor: default;
  pointer-events: none;
}

.customer-tile--static:hover {
  transform: none;
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(9, 30, 66, 0.06),
    0 4px 12px rgba(9, 30, 66, 0.08),
    0 12px 28px rgba(0, 96, 100, 0.1);
}

.customer-tile--static.customer-tile--branded:hover::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.78) 45%,
    rgba(255, 255, 255, 0.92) 100%
  );
}

.customer-tile--static.customer-tile--branded.customer-tile--bravo:hover::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.82) 40%,
    rgba(255, 255, 255, 0.96) 100%
  );
}

.customer-tile__name {
  margin: 0;
  font-size: 1.2rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.customer-tile__quota-warning {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: inline-flex;
  color: #f44336;
  filter: drop-shadow(0 1px 2px rgba(9, 30, 66, 0.35));
  pointer-events: none;
}

.customer-tile--branded .customer-tile__name {
  font-weight: 700;
}

.customer-tile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
}

.customer-tile__stats dt {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #42526e;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.customer-tile__stats dd {
  margin: 0.15rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #091e42;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.customer-tile--hero {
  display: block;
  width: 144px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  flex-shrink: 0;
}

.customer-tile--hero.customer-tile--branded {
  min-height: 56px;
  background-size: contain;
  background-position: center center;
}

.customer-tile--hero.customer-tile--branded::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.22) 100%
  );
}

.customer-tile--hero.customer-tile--branded.customer-tile--bravo::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.24) 100%
  );
}

.customer-tile--static.customer-tile--hero.customer-tile--branded:hover::before,
.customer-tile--static.customer-tile--hero.customer-tile--branded.customer-tile--bravo:hover::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.22) 100%
  );
}

.customer-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.customer-detail-stale-popup {
  position: fixed;
  top: calc(var(--byrd-header-height) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: min(560px, calc(100vw - 2rem));
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: var(--byrd-surface, #fff);
  border: 1px solid color-mix(in srgb, var(--byrd-teal) 42%, var(--byrd-border));
  box-shadow:
    0 4px 6px rgba(9, 30, 66, 0.06),
    0 12px 28px rgba(9, 30, 66, 0.14);
  opacity: 1;
}

.customer-detail-stale-popup[hidden] {
  display: none !important;
}

.customer-detail-stale-popup--animate {
  animation:
    customer-detail-stale-popup-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both,
    customer-detail-stale-popup-glow 1.25s ease-in-out 0.45s 2;
}

@keyframes customer-detail-stale-popup-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px);
  }

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

@keyframes customer-detail-stale-popup-glow {
  0%,
  100% {
    box-shadow:
      0 4px 6px rgba(9, 30, 66, 0.06),
      0 12px 28px rgba(9, 30, 66, 0.14);
  }

  50% {
    box-shadow:
      0 4px 6px rgba(9, 30, 66, 0.06),
      0 12px 28px rgba(9, 30, 66, 0.14),
      0 0 0 3px color-mix(in srgb, var(--byrd-teal) 28%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-detail-stale-popup--animate {
    animation: none;
  }
}

.customer-detail-stale-popup__text {
  flex: 1;
  min-width: 12rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--byrd-text);
}

.customer-detail-stale-popup__btn {
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--byrd-teal);
  color: #fff;
}

.customer-detail-stale-popup__btn:hover {
  filter: brightness(1.05);
}

.customer-detail-stale-popup__dismiss {
  border: none;
  background: transparent;
  color: var(--byrd-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
}

.customer-detail-stale-popup__dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--byrd-text);
}

.customer-detail__header h2 {
  margin: 0.35rem 0;
}

.customer-detail__hero-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.customer-detail__header {
  justify-self: start;
  min-width: 0;
}

.customer-detail__back {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  border: none;
  background: none;
  padding: 0;
  color: var(--byrd-teal);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  cursor: pointer;
}

.customer-detail__back:hover {
  text-decoration: underline;
}

.customer-detail__tile-wrap {
  justify-self: center;
  margin: 0;
  width: 144px;
  height: 56px;
  flex-shrink: 0;
}

.customer-detail__actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-detail__hero-spacer {
  display: none;
}

.evaluation-import-panel {
  position: relative;
}

.evaluation-import-panel__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 56px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  background: #fff;
  color: #42526e;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-import-panel__trigger:hover,
.evaluation-import-panel__trigger--active {
  border-color: var(--byrd-teal);
  background: var(--byrd-teal-light);
  color: var(--byrd-teal);
}

.evaluation-import-panel__popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 50;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  padding: 0.85rem;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(9, 30, 66, 0.18);
}

.evaluation-import-panel__section + .evaluation-import-panel__section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #ebecf0;
}

.evaluation-import-panel__section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5e6c84;
}

.evaluation-import-panel__hint {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  color: #6b778c;
}

.evaluation-import-panel__file {
  width: 100%;
  font-size: 0.78rem;
}

.evaluation-import-panel__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.evaluation-import-panel__stats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #172b4d;
}

.evaluation-import-panel__stats span {
  color: #5e6c84;
}

.evaluation-import-panel__stats-item--warning strong {
  color: #8b5cf6;
}

.evaluation-import-panel__issues {
  margin-top: 0.65rem;
  max-height: 180px;
  overflow-y: auto;
}

.evaluation-import-panel__issue {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  line-height: 1.35;
}

.evaluation-import-panel__issue--warning {
  color: #974f0c;
}

.evaluation-import-panel__issue--error {
  color: #de350b;
}

.evaluation-import-panel__error {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: #de350b;
}

.evaluation-import-panel__submit {
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: var(--byrd-teal);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.evaluation-import-panel__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.evaluation-export-panel {
  position: relative;
}

.evaluation-export-panel__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 56px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  background: #fff;
  color: #42526e;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-export-panel__trigger:hover,
.evaluation-export-panel__trigger--active {
  border-color: var(--byrd-teal);
  background: var(--byrd-teal-light);
  color: var(--byrd-teal);
}

.evaluation-export-panel__popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 50;
  width: min(320px, calc(100vw - 2rem));
  max-height: min(70vh, 520px);
  max-height: min(70dvh, 520px);
  overflow-y: auto;
  padding: 0.85rem;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(9, 30, 66, 0.18);
}

.evaluation-export-panel__section + .evaluation-export-panel__section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #ebecf0;
}

.evaluation-export-panel__section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5e6c84;
}

.evaluation-export-panel__section--disabled {
  opacity: 0.55;
}

.evaluation-export-panel__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.evaluation-export-panel__radio,
.evaluation-export-panel__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.82rem;
  color: #172b4d;
  cursor: pointer;
}

.evaluation-export-panel__options {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.evaluation-export-panel__hint {
  margin: 0;
  font-size: 0.75rem;
  color: #6b778c;
}

.evaluation-export-panel__link {
  border: none;
  background: transparent;
  color: var(--byrd-teal);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-export-panel__error {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: #de350b;
}

.evaluation-export-panel__submit {
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: var(--byrd-teal);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.evaluation-export-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.evaluation-export-panel__action {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--hair, #dce4e5);
  background: var(--teal-pale, #e2f8f6);
  color: var(--ink, #22272a);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
}

.evaluation-export-panel__action:hover:not(:disabled) {
  border-color: var(--teal, #0dd1c5);
}

.evaluation-export-panel__action--secondary {
  background: var(--mist, #f4fafa);
  font-weight: 500;
}

.evaluation-export-panel__action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.customer-settings-panel__textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--hair, #dce4e5);
  font: inherit;
  resize: vertical;
}

.customer-settings-panel__value--multiline {
  white-space: pre-wrap;
}

.evaluation-export-panel__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .evaluation-export-panel__trigger-label,
  .evaluation-import-panel__trigger-label {
    display: none;
  }
}

.customer-detail__section h3,
.customer-stats-placeholder h3 {
  margin: 0 0 0.85rem;
}

.customer-detail__empty {
  margin: 0;
  color: #5e6c84;
}

.evaluation-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}

.evaluation-table-toolbar__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #42526e;
}

.evaluation-table-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.evaluation-table-toolbar__input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font-size: 0.85rem;
}

.evaluation-table-toolbar__input:focus {
  outline: 2px solid #4c9aff;
  border-color: transparent;
}

.evaluation-table-toolbar__clear {
  border: none;
  background: #ebecf0;
  color: #42526e;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.evaluation-table-toolbar__meta {
  margin: 0;
  font-size: 0.82rem;
  color: #5e6c84;
}

.evaluation-table-wrap {
  overflow-x: auto;
}

.evaluation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
  min-width: 1120px;
}

.evaluation-table th,
.evaluation-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #ebecf0;
  text-align: left;
  vertical-align: top;
}

.evaluation-table th {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
  background: #fafbfc;
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
}

.evaluation-table__month-header td {
  padding: 0;
  background: #ebecf0;
  border-bottom: 1px solid #dfe1e6;
}

.evaluation-table__month-header-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #172b4d;
  text-align: left;
  cursor: pointer;
}

.evaluation-table__month-header-toggle:hover {
  background: #e4e6ea;
}

.evaluation-table__month-header-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #42526e;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.evaluation-table__month-header-toggle--expanded .evaluation-table__month-header-chevron {
  transform: rotate(90deg);
}

.evaluation-table__month-count {
  font-weight: 500;
  color: #5e6c84;
}

.evaluation-table__month-header-warnings {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.evaluation-table__subject {
  word-break: break-word;
}

.evaluation-table__gtin {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  min-width: 13ch;
}

.evaluation-table__gtin .evaluation-table__input,
.evaluation-table__input--gtin {
  font-family: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 13ch;
  box-sizing: border-box;
}

.evaluation-table__col--ziel,
.evaluation-table th.evaluation-table__col--ziel {
  text-align: center;
  white-space: nowrap;
}

.evaluation-table th.evaluation-table__col--subject-head {
  line-height: 1.3;
}

.evaluation-table__col--compact,
.evaluation-table th.evaluation-table__col--compact {
  font-size: 0.68rem;
  padding: 0.45rem 0.4rem;
  color: #5e6c84;
  text-align: center;
}

.evaluation-table td.evaluation-table__col--compact {
  white-space: nowrap;
}

.evaluation-table th.evaluation-table__col--compact {
  white-space: normal;
}

.evaluation-table th.evaluation-table__col--count-header {
  text-transform: none;
  font-size: 0.62rem;
  letter-spacing: normal;
}

.evaluation-table__actions,
.evaluation-table__actions-head {
  position: sticky;
  right: 0;
  background: #fff;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  white-space: nowrap;
  text-align: center;
  box-shadow: -4px 0 8px -4px rgba(9, 30, 66, 0.12);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.evaluation-table__warning,
.evaluation-table__warning-head {
  position: sticky;
  right: 48px;
  background: #fff;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.evaluation-table__warning-head {
  background: #fafbfc;
}

.evaluation-table__warning-icon {
  display: inline-flex;
  color: #8b5cf6;
}

.evaluation-table__warning-icon--reviewed {
  color: #9ca3af;
}

.evaluation-table__warning-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
}

.evaluation-table__warning-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.evaluation-table__warning-btn:disabled {
  cursor: wait;
  opacity: 0.5;
}

.evaluation-table__actions-head {
  background: #fafbfc;
}

.evaluation-edit-modal__panel {
  max-width: 520px;
}

.evaluation-edit-modal__fields {
  margin-top: 1rem;
}

.evaluation-edit-modal__actions {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.evaluation-edit-modal__spacer {
  flex: 1 1 auto;
}

.evaluation-edit-modal__delete-btn {
  color: #de350b;
}

.evaluation-delete-btn {
  color: #de350b;
}

.evaluation-delete-btn:hover:not(:disabled) {
  background: #ffebe6;
}

.customer-stats-placeholder p {
  margin: 0;
  color: #5e6c84;
}

/* Scrollable viewport-bound popups (all modal overlays + panels) */
.finish-modal,
.ticket-question-modal,
.rueckmeldung-modal,
.settings-overlay,
.analytics-widget-modal {
  overflow-y: auto;
  align-items: flex-start;
  align-items: safe center;
}

.finish-modal__panel,
.ticket-question-modal__panel,
.rueckmeldung-modal__panel,
.analytics-widget-modal__panel {
  max-height: var(--popup-max-height);
  max-height: var(--popup-max-height-dynamic);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.finish-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: rgba(9, 30, 66, 0.45);
}

.finish-modal__panel {
  width: min(100%, 520px);
  padding: 1.25rem 1.35rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(9, 30, 66, 0.25);
}

.finish-modal__title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  color: #172b4d;
}

.finish-modal__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  margin: 0 0 1rem;
  padding: 0.85rem;
  border: 1px solid #ebecf0;
  border-radius: 6px;
  background: #fafbfc;
}

.finish-modal__overview-item dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
}

.finish-modal__overview-item dd {
  margin: 0;
  font-size: 0.84rem;
  color: #172b4d;
  word-break: break-word;
}

.finish-modal__color-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(9, 30, 66, 0.15);
  vertical-align: middle;
}

.finish-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.finish-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #42526e;
}

.finish-modal__field select,
.finish-modal__field input {
  font: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
}

.finish-modal__gtin-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.finish-modal__gtin-legend {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #42526e;
}

.finish-modal__gtin-hint {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  color: #5e6c84;
}

.finish-modal__gtin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(50dvh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.finish-modal__gtin-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: #172b4d;
  cursor: pointer;
}

.finish-modal__gtin-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.finish-modal__actions,
.ticket-question-modal__actions,
.rueckmeldung-modal__actions,
.ticket-match-modal__actions,
.rueckmeldung-match-modal__actions,
.rueckmeldung-detail__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  background: #fff;
  border-top: 1px solid #ebecf0;
}

.finish-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.finish-modal__actions .btn {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.finish-modal__actions .btn--secondary {
  background: #f4f5f7;
  color: #42526e;
  border-color: #dfe1e6;
}

.finish-modal__actions .btn--primary {
  background: var(--byrd-teal);
  color: #fff;
}

.finish-modal__actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.finish-modal__hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: #6b778c;
  text-align: right;
}

.finish-modal__hint:empty {
  display: none;
}

.finish-modal__error {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #f5c2c0;
  background: #fdf1f0;
  color: #b3251f;
  font-size: 0.8rem;
}

body.finish-modal-open {
  overflow: hidden;
}

.ticket-question-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: rgba(9, 30, 66, 0.45);
}

.ticket-question-modal__panel {
  position: relative;
  width: min(100%, 520px);
  padding: 1.25rem 1.35rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(9, 30, 66, 0.25);
}

.ticket-question-modal__close-x {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--byrd-border, #dfe1e6);
  border-radius: var(--byrd-radius-sm, 4px);
  background: var(--byrd-input-bg, #fff);
  color: #42526e;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.ticket-question-modal__close-x:hover:not(:disabled) {
  background: var(--byrd-surface-muted, #f4f5f7);
  color: #172b4d;
}

.ticket-question-modal__close-x:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ticket-question-modal__title {
  margin: 0 2rem 0.85rem 0;
  font-size: 1.05rem;
  color: #172b4d;
}

.ticket-question-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ticket-question-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #42526e;
}

.ticket-question-modal__field input,
.ticket-question-modal__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  font: inherit;
  color: #172b4d;
  resize: vertical;
}

.ticket-question-modal__field textarea {
  max-height: min(40dvh, 320px);
  overflow-y: auto;
}

.ticket-question-modal__field--answer textarea {
  min-height: 120px;
}

.ticket-question-modal__actions {
  display: flex;
  justify-content: center;
}

.ticket-question-modal__finish {
  min-width: 7rem;
  padding: 0.45rem 0.85rem;
  border: 2px solid #00875a;
  border-radius: 4px;
  background: #fff;
  color: #00875a;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.ticket-question-modal__finish--active {
  background: #00875a;
  color: #fff;
}

.ticket-question-modal__finish:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rueckmeldung-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: rgba(9, 30, 66, 0.45);
}

.rueckmeldung-modal__panel {
  width: min(100%, 480px);
  padding: 1.25rem 1.35rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(9, 30, 66, 0.25);
}

.rueckmeldung-modal__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: #172b4d;
}

.rueckmeldung-modal__subtitle {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: #5e6c84;
  word-break: break-word;
}

.rueckmeldung-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #42526e;
}

.rueckmeldung-modal__field textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.55rem 0.65rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  resize: vertical;
  min-height: 96px;
  max-height: min(40dvh, 320px);
  overflow-y: auto;
}

.rueckmeldung-modal__field textarea:focus {
  outline: 2px solid #4c9aff;
  border-color: transparent;
}

.rueckmeldung-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.rueckmeldung-modal__actions .btn {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.rueckmeldung-modal__actions .btn--secondary {
  background: #f4f5f7;
  color: #42526e;
  border-color: #dfe1e6;
}

.rueckmeldung-modal__actions .btn--primary {
  background: var(--byrd-teal);
  color: #fff;
}

.rueckmeldung-modal__actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.rueckmeldung-modal-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .finish-modal__overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .brand,
  .nav,
  .header-actions {
    justify-self: stretch;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-actions {
    justify-content: flex-end;
  }
}

.evaluation-settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.evaluation-settings-panel__header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #ebecf0;
}

.evaluation-settings-panel__header h3 {
  margin: 0 0 0.35rem;
}

.evaluation-settings-panel__header p {
  margin: 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.evaluation-settings-panel__body {
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1.5rem;
}

.evaluation-settings-panel__field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #344563;
}

.evaluation-settings-panel__segmented {
  display: inline-flex;
  border: 1px solid #ebecf0;
  border-radius: 8px;
  overflow: hidden;
  background: #fafbfc;
}

.evaluation-settings-panel__segment {
  border: none;
  background: transparent;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: #42526e;
}

.evaluation-settings-panel__segment--active {
  background: var(--byrd-teal);
  color: #fff;
}

.evaluation-settings-panel__hint {
  margin: 0.75rem 0 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.evaluation-settings-panel__table-wrap {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.5rem;
}

.evaluation-settings-panel__table {
  width: 100%;
  border-collapse: collapse;
}

.evaluation-settings-panel__table th,
.evaluation-settings-panel__table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #ebecf0;
  text-align: left;
}

.evaluation-settings-panel__table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5e6c84;
}

.evaluation-settings-panel__table input {
  width: 100%;
  min-width: 120px;
  padding: 0.4rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font: inherit;
}

.evaluation-settings-panel__error {
  margin: 0 1.5rem;
  color: #de350b;
  font-size: 0.85rem;
}

.evaluation-settings-panel__footer {
  padding: 0.85rem 1.5rem 1.25rem;
  border-top: 1px solid #ebecf0;
}

.evaluation-settings-panel__save {
  border: none;
  border-radius: 999px;
  background: var(--byrd-teal);
  color: #fff;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-settings-panel__save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.evaluation-settings-panel__save--dirty {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--byrd-teal) 35%, transparent);
}

.evaluation-settings-panel__field--spaced {
  margin-top: 1.15rem;
}

.evaluation-settings-panel__layout-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.evaluation-settings-panel__hint--inline {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.evaluation-default-layout-editor {
  margin-bottom: 0.35rem;
}

.evaluation-default-layout-editor .customer-analytics__toolbar {
  margin-bottom: 0.65rem;
}

.evaluation-default-layout-editor__grid {
  --analytics-compact: 0.55;
  --analytics-slot-scale: 0.95;
  max-height: 22rem;
  overflow: auto;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px dashed #dfe1e6;
  background: rgba(255, 255, 255, 0.55);
}

.analytics-widget--preview .analytics-widget__preview-placeholder {
  margin: 0;
  padding: 0.75rem 0.5rem;
  text-align: center;
  color: #6b778c;
  font-size: 0.8rem;
}

.customer-analytics {
  --analytics-compact: 0.72;
  --analytics-slot-scale: 1.3;
  --analytics-slot-min-height: calc(10rem * var(--analytics-slot-scale));
  --analytics-pie-height: calc(116px * var(--analytics-slot-scale));
  --analytics-trend-height: calc(120px * var(--analytics-slot-scale));
  display: flex;
  flex-direction: column;
  gap: calc(0.65rem * var(--analytics-compact));
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.82) 0%, rgba(244, 248, 250, 0.68) 52%, rgba(235, 242, 245, 0.78) 100%);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 28px rgba(23, 43, 77, 0.07);
}

.customer-analytics__header h3 {
  margin: 0 0 calc(0.12rem * var(--analytics-compact));
  font-size: calc(1rem * var(--analytics-compact));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #172b4d;
}

.customer-analytics__header .section-subtitle {
  font-size: calc(0.72rem * var(--analytics-compact));
  margin: 0;
  color: var(--byrd-text-muted);
  letter-spacing: 0.02em;
}

.customer-analytics__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.customer-analytics__toolbar {
  position: relative;
  flex: 0 0 auto;
}

.analytics-layout-toggle {
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
}

.analytics-layout-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 20;
  min-width: 240px;
  padding: 0.75rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 43, 77, 0.14);
  border: 1px solid #e0f2f1;
}

.analytics-layout-panel--open {
  display: block;
}

.analytics-layout-panel__hint {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  color: var(--byrd-text-muted);
  line-height: 1.35;
}

.analytics-layout-panel__option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
  font-size: 0.82rem;
  cursor: pointer;
}

.analytics-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.55) 0%, rgba(0, 150, 136, 0.06) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 2px 10px rgba(0, 150, 136, 0.06);
}

.analytics-kpi-strip__card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.analytics-kpi-strip__label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(23, 43, 77, 0.55);
}

.analytics-kpi-strip__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--byrd-teal);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.analytics-kpi-strip__meta {
  font-size: 0.64rem;
  color: var(--byrd-text-muted);
  line-height: 1.25;
}

.analytics-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--analytics-slot-min-height);
  gap: calc(0.55rem * var(--analytics-compact));
  align-items: stretch;
  position: relative;
}

.analytics-widget-slot-grid__cell {
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: calc(10px * var(--analytics-compact));
  min-height: var(--analytics-slot-min-height);
  pointer-events: none;
  z-index: 0;
}

.analytics-widget[data-analytics-col],
.analytics-widget-placeholder[data-analytics-col] {
  grid-column: var(--analytics-grid-col-start) / span var(--analytics-grid-col-span);
  grid-row: var(--analytics-grid-row-start);
  min-height: var(--analytics-slot-min-height);
}

.analytics-widget-grid--drag-active .analytics-widget-slot-grid__cell {
  border-color: rgba(0, 150, 136, 0.42);
  background: rgba(0, 150, 136, 0.06);
}

.analytics-widget-grid--reorder:not(.analytics-widget-grid--drag-active)
  .analytics-widget:not(.analytics-widget-placeholder):not(.analytics-widget--dragging) {
  animation: analytics-widget-jiggle 0.28s ease-in-out infinite alternate;
  cursor: grab;
  opacity: 0.92;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
}

.analytics-widget-placeholder {
  animation: none !important;
  cursor: default;
  opacity: 1;
  background: rgba(0, 150, 136, 0.16);
  box-shadow: inset 0 0 0 2px dashed rgba(0, 150, 136, 0.68);
  border-radius: calc(12px * var(--analytics-compact));
  pointer-events: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem;
}

.analytics-widget-placeholder::before {
  content: 'Hier ablegen';
  font-size: calc(0.62rem * var(--analytics-compact));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 105, 92, 0.82);
}

.analytics-widget-placeholder::after {
  content: attr(data-drag-preview-title);
  font-size: calc(0.68rem * var(--analytics-compact));
  font-weight: 500;
  color: rgba(23, 43, 77, 0.72);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-widget--dragging {
  animation: none !important;
  cursor: grabbing;
  opacity: 0.96 !important;
  box-shadow: 0 16px 40px rgba(23, 43, 77, 0.24);
  touch-action: none;
  will-change: transform;
}

body.analytics-widget-drag-active {
  touch-action: none;
  user-select: none;
}

@keyframes analytics-widget-jiggle {
  from { transform: rotate(-0.6deg); }
  to { transform: rotate(0.6deg); }
}

.analytics-widget {
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.78) 0%, rgba(248, 251, 252, 0.58) 48%, rgba(236, 242, 244, 0.72) 100%);
  backdrop-filter: blur(11px) saturate(130%);
  -webkit-backdrop-filter: blur(11px) saturate(130%);
  border-radius: calc(12px * var(--analytics-compact));
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    0 4px 14px rgba(23, 43, 77, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  touch-action: pan-y;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.analytics-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.42) 0%, transparent 38%, rgba(255, 255, 255, 0.06) 100%);
  z-index: 0;
}

.analytics-widget > * {
  position: relative;
  z-index: 1;
}

.analytics-widget--sm {
  grid-column: span 1;
  grid-row: span 1;
}

.analytics-widget--lg {
  grid-column: span 2;
  grid-row: span 1;
}

.analytics-widget--quota {
  border-top: 2px solid rgba(0, 150, 136, 0.55);
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.82) 0%, rgba(0, 150, 136, 0.07) 100%);
}

.analytics-widget__header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: calc(0.32rem * var(--analytics-compact)) calc(0.5rem * var(--analytics-compact));
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 100%);
  flex-shrink: 0;
}

.analytics-widget__title {
  flex: 1;
  margin: 0;
  font-size: calc(0.66rem * var(--analytics-compact));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(23, 43, 77, 0.72);
}

.analytics-widget__actions {
  display: flex;
  gap: 0.15rem;
}

.analytics-widget__expand-btn {
  border: none;
  background: transparent;
  color: var(--byrd-teal);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}

.analytics-widget__expand-btn:hover {
  background: rgba(0, 150, 136, 0.08);
}

.analytics-widget__body {
  flex: 1;
  min-height: 0;
  padding: calc(0.35rem * var(--analytics-compact)) calc(0.4rem * var(--analytics-compact));
  overflow: hidden;
}

.analytics-widget--expanded-view {
  --analytics-compact: 1.32;
}

.analytics-widget--expanded-view .analytics-widget__body {
  padding: 1rem;
  overflow: auto;
}

.analytics-widget--quota .analytics-widget__body {
  max-height: none;
  display: flex;
  flex-direction: column;
}

.analytics-widget--orders_pie .analytics-widget__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(0.25rem * var(--analytics-compact)) calc(0.35rem * var(--analytics-compact)) calc(0.35rem * var(--analytics-compact));
}

.analytics-widget--expanded-view.analytics-widget--orders_pie .analytics-widget__body {
  overflow: auto;
  max-height: none;
  padding: 1rem;
}

.analytics-widget--farbcode .analytics-widget__body {
  max-height: none;
  display: flex;
  flex-direction: column;
}

.analytics-widget--processing_times .analytics-widget__body {
  max-height: none;
}

.analytics-widget--monthly_matrix .analytics-widget__body {
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.analytics-widget--expanded-view.analytics-widget--monthly_matrix .analytics-widget__body {
  max-height: none;
  overflow: auto;
}

.quota-bar-chart--prominent .quota-bar-chart__subtitle {
  margin: 0 0 0.28rem;
  font-size: calc(0.64rem * var(--analytics-compact));
  color: var(--byrd-text-muted);
  letter-spacing: 0.02em;
}

.quota-bar-chart--prominent .quota-bar-chart__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
  margin-bottom: 0.35rem;
}

.quota-bar-chart--prominent .quota-bar-chart__stat {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.28rem 0.35rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: calc(0.62rem * var(--analytics-compact));
  color: rgba(23, 43, 77, 0.55);
}

.quota-bar-chart--prominent .quota-bar-chart__stat span {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: calc(0.58rem * var(--analytics-compact));
}

.quota-bar-chart--prominent .quota-bar-chart__stat strong {
  font-size: calc(0.68rem * var(--analytics-compact));
  color: var(--byrd-teal);
  font-variant-numeric: tabular-nums;
}

.quota-bar-chart--prominent .quota-bar-chart__canvas-wrap {
  flex: 0 0 auto;
  width: 100%;
  height: var(--quota-chart-height, calc(88px * var(--analytics-slot-scale, 1.3)));
  min-height: 0;
  max-height: var(--quota-chart-height, calc(88px * var(--analytics-slot-scale, 1.3)));
}

.quota-bar-chart--prominent .quota-bar-chart__canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
}

.auftrag-pie-chart--flat .auftrag-pie-chart__meta {
  margin: 0 0 0.2rem;
  font-size: calc(0.62rem * var(--analytics-compact));
  color: var(--byrd-text-muted);
  text-align: center;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.auftrag-pie-chart--widget,
.auftrag-pie-chart--expanded {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.auftrag-pie-chart--widget {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.2rem;
}

.auftrag-pie-chart--expanded {
  align-items: stretch;
  justify-content: center;
}

.auftrag-pie-chart__body-stack {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  width: 100%;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__body-stack {
  align-items: center;
  gap: 1rem;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__visual,
.auftrag-pie-chart--expanded .auftrag-pie-chart__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42%;
  min-width: 0;
  overflow: hidden;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__visual {
  flex-basis: 38%;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__visual {
  flex: 0 0 58%;
}

.auftrag-pie-chart__legend-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__canvas-wrap {
  position: relative;
  width: min(100%, calc(var(--analytics-slot-min-height) - 3.5rem));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  max-height: calc(var(--analytics-slot-min-height) - 3.5rem);
  margin: 0 auto;
  overflow: hidden;
  flex: 0 0 auto;
  align-self: center;
  min-height: 0;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__legend {
  flex: 1 1 auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0 0.1rem 0 0;
  display: grid;
  gap: 0.12rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  align-content: start;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__legend-item {
  font-size: calc(0.58rem * var(--analytics-compact));
  padding: 0.1rem 0.2rem;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__canvas-wrap {
  position: relative;
  width: min(100%, 420px);
  height: 420px;
  min-height: 420px;
  margin: 0 auto;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 10px 28px rgba(23, 43, 77, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: drop-shadow(0 6px 14px rgba(23, 43, 77, 0.08));
}

.auftrag-pie-chart--expanded:not(.auftrag-pie-chart--enter) .auftrag-pie-chart__canvas-wrap {
  opacity: 1;
  transform: none;
}

.auftrag-pie-chart--expanded.auftrag-pie-chart--enter .auftrag-pie-chart__canvas-wrap {
  opacity: 0;
  transform: scale(0.94);
  animation: auftrag-pie-chart-enter 400ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

@keyframes auftrag-pie-chart-enter {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 420px !important;
  margin: 0 auto;
}

.auftrag-pie-chart__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.18rem;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend {
  flex: 1;
  min-width: 0;
  align-content: start;
  gap: 0.35rem;
  overflow-y: auto;
  max-height: 420px;
}

.auftrag-pie-chart__legend-item {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.28rem;
  padding: 0.14rem 0.28rem;
  border-radius: 6px;
  font-size: calc(0.6rem * var(--analytics-compact));
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.35);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
  cursor: pointer;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item {
  font-size: 0.78rem;
  padding: 0.32rem 0.55rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 2px 8px rgba(23, 43, 77, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.auftrag-pie-chart--expanded.auftrag-pie-chart--enter .auftrag-pie-chart__legend-item--enter {
  animation: auftrag-pie-legend-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms + 120ms);
}

@keyframes auftrag-pie-legend-enter {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item:focus-visible {
  outline: 2px solid rgba(0, 150, 136, 0.55);
  outline-offset: 2px;
}

.auftrag-pie-chart__legend-item--active {
  background: rgba(0, 150, 136, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.32);
}

.auftrag-pie-chart__legend-item--pinning {
  transform: scale(0.98);
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--active {
  background: rgba(0, 150, 136, 0.22);
  box-shadow:
    inset 0 0 0 2px rgba(0, 150, 136, 0.42),
    0 4px 12px rgba(0, 150, 136, 0.12);
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--preview {
  background: rgba(0, 150, 136, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 150, 136, 0.22);
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--pinned {
  background: rgba(0, 150, 136, 0.2);
  box-shadow:
    inset 0 0 0 2px rgba(0, 150, 136, 0.5),
    0 4px 14px rgba(0, 150, 136, 0.14);
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--pinned.auftrag-pie-chart__legend-item--preview {
  box-shadow:
    inset 0 0 0 2px rgba(0, 150, 136, 0.55),
    0 6px 16px rgba(0, 150, 136, 0.16);
}

.auftrag-pie-chart__center-total {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  pointer-events: none;
  text-align: center;
  max-width: 42%;
  z-index: 1;
}

.auftrag-pie-chart__center-total-value {
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: #172b4d;
  letter-spacing: -0.02em;
}

.auftrag-pie-chart__center-total-caption {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5e6c84;
}

.auftrag-pie-chart__legend-swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.auftrag-pie-chart__legend-name {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  color: rgba(23, 43, 77, 0.82);
  font-weight: 500;
}

.auftrag-pie-chart__legend-item--sub {
  margin-left: 0.35rem;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(0, 150, 136, 0.25);
  opacity: 0.94;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__legend-item--sub {
  padding-left: 1.15rem;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--sub {
  padding-left: 1.35rem;
}

.auftrag-pie-chart__legend-item--sub .auftrag-pie-chart__legend-name {
  font-weight: 450;
  font-size: 0.92em;
}

.auftrag-pie-chart__legend-count,
.auftrag-pie-chart__legend-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--byrd-teal);
}

.auftrag-pie-chart__callouts-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.auftrag-pie-chart--widget .auftrag-pie-chart__callouts-host,
.auftrag-pie-chart--expanded .auftrag-pie-chart__callouts-host {
  pointer-events: auto;
  overflow: hidden;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__callouts-host {
  overflow: hidden;
}

.auftrag-pie-chart__label-svg {
  overflow: hidden;
}

.auftrag-pie-chart__segment-percent {
  pointer-events: none;
  font-size: 8px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2px;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__segment-percent {
  font-size: 11px;
}

.auftrag-pie-chart__segment-percent--sub {
  font-size: 7px;
  font-weight: 600;
}

.auftrag-pie-chart__callout-name {
  pointer-events: auto;
  font-size: 8px;
  font-weight: 600;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__callout-name {
  font-size: 11px;
}

.auftrag-pie-chart__callout-name--active {
  font-weight: 700;
}

.auftrag-pie-chart__callout-name--sub {
  font-weight: 500;
}

.auftrag-pie-chart__inner-name {
  pointer-events: none;
  font-size: 7px;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2px;
}

.auftrag-pie-chart--expanded .auftrag-pie-chart__inner-name {
  font-size: 10px;
}

.auftrag-pie-chart__label-line {
  pointer-events: none;
}

.auftrag-pie-chart__inline-label {
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2px;
  font-weight: 600;
}

.auftrag-pie-chart__inline-label--sub {
  font-weight: 500;
}

.auftrag-pie-chart__inline-label--active {
  font-weight: 700;
}

.auftrag-pie-chart__callout-name--compact {
  font-size: 0.68rem;
}

.monthly-matrix-combined {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
}

.analytics-widget--monthly_matrix .monthly-matrix-combined {
  flex: 1;
  height: 100%;
  overflow: hidden;
  gap: 0.28rem;
}

.analytics-widget--monthly_matrix .monthly-trend-chart__toggles {
  flex-shrink: 0;
  gap: 0.35rem;
  margin-bottom: 0;
}

.analytics-widget--monthly_matrix .monthly-trend-chart--embedded {
  flex-shrink: 0;
  height: var(--analytics-trend-height);
  min-height: 0;
}

.monthly-trend-chart--embedded canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: var(--analytics-trend-height);
}

.analytics-widget--expanded-view .monthly-trend-chart--embedded {
  height: 340px;
}

.analytics-widget--expanded-view .monthly-trend-chart--embedded canvas {
  max-height: 340px;
}

.monthly-trend-chart__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.15rem;
  font-size: 0.74rem;
}

.monthly-trend-chart__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  user-select: none;
  font-size: calc(0.64rem * var(--analytics-compact));
}

.monthly-trend-chart__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.monthly-trend-chart__toggle-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.monthly-trend-chart__toggle--countable {
  color: #00695c;
}

.monthly-trend-chart__toggle--countable .monthly-trend-chart__toggle-swatch {
  background: #009688;
}

.monthly-trend-chart__toggle--non-countable {
  color: #1a237e;
}

.monthly-trend-chart__toggle--non-countable .monthly-trend-chart__toggle-swatch {
  background: #1a237e;
}

.monthly-trend-chart__toggle--total {
  color: #bf360c;
}

.monthly-trend-chart__toggle--total .monthly-trend-chart__toggle-swatch {
  background: #e65100;
}

.monthly-trend-chart__toggle--erfassungsfehler {
  color: #b71c1c;
}

.monthly-trend-chart__toggle--erfassungsfehler .monthly-trend-chart__toggle-swatch {
  background: #c62828;
}

.monthly-trend-chart__toggle:has(input:not(:checked)) {
  opacity: 0.55;
}

.farbcode-bar-chart__avg-times--widget {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.farbcode-bar-chart__avg-times--widget .farbcode-bar-chart__avg-times-grid {
  gap: calc(0.25rem * var(--analytics-compact));
}

.farbcode-bar-chart__avg-times--widget .farbcode-bar-chart__avg-time-tile {
  padding: 0.28rem 0.35rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.farbcode-bar-chart__avg-times--widget .farbcode-bar-chart__avg-time-label {
  font-size: calc(0.58rem * var(--analytics-compact));
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.farbcode-bar-chart__avg-times--widget .farbcode-bar-chart__avg-time-value {
  font-size: calc(0.72rem * var(--analytics-compact));
}

.analytics-widget--farbcode canvas {
  max-height: 88px;
}

.farbcode-bar-chart__canvas-wrap {
  flex: 0 0 auto;
  width: 100%;
  height: var(--farbcode-chart-height, calc(104px * var(--analytics-slot-scale, 1)));
  max-height: var(--farbcode-chart-height, calc(104px * var(--analytics-slot-scale, 1)));
}

.farbcode-bar-chart__canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
}

.analytics-widget--expanded-view.analytics-widget--farbcode .farbcode-bar-chart__canvas-wrap--expanded {
  height: var(--farbcode-chart-height, 280px);
  max-height: var(--farbcode-chart-height, 280px);
}

.analytics-widget--expanded-view.analytics-widget--quota .quota-bar-chart__canvas-wrap--expanded {
  height: var(--quota-chart-height, 280px);
  max-height: var(--quota-chart-height, 280px);
}

.analytics-widget--expanded-view.analytics-widget--processing_times .farbcode-bar-chart__avg-time-value {
  font-size: 1.05rem;
}

.analytics-widget--expanded-view.analytics-widget--monthly_matrix .monthly-matrix-table th,
.analytics-widget--expanded-view.analytics-widget--monthly_matrix .monthly-matrix-table td {
  padding: 0.45rem 0.5rem;
  font-size: 0.82rem;
}

.analytics-widget-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 1.5rem;
}

.analytics-widget-modal[hidden] {
  display: none !important;
}

.analytics-widget-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 43, 77, 0.45);
  opacity: 0;
  transition: opacity 220ms ease;
}

.analytics-widget-modal--open .analytics-widget-modal__backdrop {
  opacity: 1;
}

.analytics-widget-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1150px, 100%);
  max-height: min(85vh, 950px);
  max-height: min(85dvh, 950px);
  overflow: auto;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 250, 0.85) 100%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 20px 48px rgba(23, 43, 77, 0.18);
  padding: 0.75rem;
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.analytics-widget-modal--open .analytics-widget-modal__panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.analytics-widget-modal__panel .analytics-widget--orders_pie {
  overflow: visible;
}

.analytics-widget-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  z-index: 2;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--byrd-text-muted);
  cursor: pointer;
}

body.analytics-widget-modal-open {
  overflow: hidden;
}

.customer-detail__section--evaluation-table .evaluation-table thead th {
  border-top: 3px solid var(--byrd-teal);
}

.customer-detail__section--evaluation-table .evaluation-table th,
.customer-detail__section--evaluation-table .evaluation-table td {
  padding: 0.45rem 0.6rem;
}

.customer-detail__section--evaluation-table .evaluation-table__month-header td {
  border-top: none;
}

@media (max-width: 960px) {
  .analytics-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-widget-grid {
    grid-template-columns: 1fr;
  }

  .analytics-widget-slot-grid__cell {
    display: none;
  }

  .analytics-widget[data-analytics-col],
  .analytics-widget-placeholder[data-analytics-col] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .analytics-widget--sm,
  .analytics-widget--lg {
    grid-column: span 1;
    grid-row: span 1;
  }

  .quota-bar-chart--prominent .quota-bar-chart__stats {
    grid-template-columns: 1fr;
  }
}


.customer-analytics__charts {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: calc(0.5rem * var(--analytics-compact));
  align-items: stretch;
}

.customer-analytics__chart-card--stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(0.35rem * var(--analytics-compact));
}

.customer-analytics__chart-card--stack .quota-bar-chart {
  flex: 0 0 auto;
}

.customer-analytics__chart-card--stack .farbcode-bar-chart {
  flex: 1;
  min-height: 0;
  border-top: 1px solid #ebecf0;
  padding-top: calc(0.35rem * var(--analytics-compact));
}

.customer-analytics__chart-card {
  background: #fafbfc;
  border-radius: calc(12px * var(--analytics-compact));
  padding: calc(0.4rem * var(--analytics-compact));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.customer-analytics__chart-card--pie {
  padding: calc(0.32rem * var(--analytics-compact));
  border-radius: calc(10px * var(--analytics-compact));
}

.analytics-kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(0.5rem * var(--analytics-compact));
}

.analytics-kpi-card {
  background: #fff;
  border-radius: calc(12px * var(--analytics-compact));
  padding: calc(0.5rem * var(--analytics-compact)) calc(0.6rem * var(--analytics-compact));
  box-shadow: inset 0 0 0 1px #e0f2f1;
}

.analytics-kpi-card__label {
  display: block;
  font-size: calc(0.68rem * var(--analytics-compact));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
  margin-bottom: calc(0.25rem * var(--analytics-compact));
}

.analytics-kpi-card__value {
  font-size: calc(1.05rem * var(--analytics-compact));
  color: var(--byrd-teal);
}

.analytics-kpi-card__meta {
  display: block;
  margin-top: calc(0.2rem * var(--analytics-compact));
  font-size: calc(0.68rem * var(--analytics-compact));
  color: var(--byrd-text-muted);
  line-height: 1.3;
}

.auftrag-pie-chart__header h4,
.quota-bar-chart__header h4,
.farbcode-bar-chart__header h4 {
  margin: 0 0 calc(0.1rem * var(--analytics-compact));
}

.auftrag-pie-chart__header h4 {
  font-size: calc(1rem * var(--analytics-compact));
}

.auftrag-pie-chart__header p,
.quota-bar-chart__header p,
.farbcode-bar-chart__header p {
  margin: 0;
  color: var(--byrd-text-muted);
  font-size: calc(0.7rem * var(--analytics-compact));
}

.customer-analytics__chart-card--pie .auftrag-pie-chart__header p {
  font-size: calc(0.63rem * var(--analytics-compact));
}

.auftrag-pie-chart {
  display: flex;
  flex-direction: column;
  gap: calc(0.28rem * var(--analytics-compact));
  flex: 1;
  min-height: 0;
}

.auftrag-pie-chart__header {
  text-align: left;
}

.auftrag-pie-chart__visual {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.auftrag-pie-chart__canvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.analytics-widget--orders_pie .auftrag-pie-chart__canvas-wrap {
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}

.analytics-widget--orders_pie .auftrag-pie-chart__canvas-wrap canvas {
  width: 100%;
  height: 100%;
}

.quota-bar-chart {
  display: flex;
  flex-direction: column;
  gap: calc(0.35rem * var(--analytics-compact));
  flex: 1;
  min-height: 0;
}

.quota-bar-chart canvas {
  min-height: calc(96px * var(--analytics-slot-scale, 1));
}

.farbcode-bar-chart {
  display: flex;
  flex-direction: column;
  gap: calc(0.35rem * var(--analytics-compact));
  flex: 1;
  min-height: 0;
}

.analytics-widget--farbcode .farbcode-bar-chart__canvas-wrap {
  height: var(--farbcode-chart-height, calc(104px * var(--analytics-slot-scale, 1)));
}

.farbcode-bar-chart__empty {
  margin: calc(0.5rem * var(--analytics-compact)) 0 0;
  color: var(--byrd-text-muted);
  font-size: calc(0.8rem * var(--analytics-compact));
  flex: 0 0 auto;
}

.farbcode-bar-chart__avg-times {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: calc(0.35rem * var(--analytics-compact)) 0 0;
  padding: calc(0.5rem * var(--analytics-compact)) calc(0.6rem * var(--analytics-compact));
  border-radius: calc(10px * var(--analytics-compact));
  background: #fff;
  box-shadow: inset 0 0 0 1px #e0f2f1;
}

.farbcode-bar-chart__avg-times-heading {
  margin: 0 0 calc(0.4rem * var(--analytics-compact));
  font-size: calc(0.68rem * var(--analytics-compact));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.farbcode-bar-chart__avg-times-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.4rem * var(--analytics-compact));
  align-content: stretch;
}

.farbcode-bar-chart__avg-time-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.2rem * var(--analytics-compact));
  padding: calc(0.45rem * var(--analytics-compact)) calc(0.35rem * var(--analytics-compact));
  border-radius: calc(8px * var(--analytics-compact));
  background: #fafbfc;
  min-height: 0;
}

.farbcode-bar-chart__avg-time-tile:nth-child(5) {
  grid-column: 1 / -1;
  max-width: 50%;
  justify-self: center;
  width: 100%;
}

.farbcode-bar-chart__avg-time-label {
  font-size: calc(0.62rem * var(--analytics-compact));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--byrd-text-muted);
  line-height: 1.2;
}

.farbcode-bar-chart__avg-time-value {
  font-size: calc(1.15rem * var(--analytics-compact));
  font-weight: 700;
  color: var(--byrd-teal);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.auftrag-pie-chart__callouts-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.auftrag-pie-chart__label-svg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auftrag-pie-chart__label-line {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

.auftrag-pie-chart__segment-percent {
  font-size: 0.7rem;
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2px;
}

.auftrag-pie-chart__segment-percent--sub {
  font-size: 0.62rem;
}

.auftrag-pie-chart__callout-hit {
  cursor: pointer;
  pointer-events: all;
}

.auftrag-pie-chart__callout-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.auftrag-pie-chart__callout-name--sub {
  font-size: 0.68rem;
}

.auftrag-pie-chart__callout-name--active {
  font-weight: 700;
}

.auftrag-pie-chart__callout--active .auftrag-pie-chart__label-line {
  stroke-width: 2.5;
}

.monthly-matrix-table-wrap {
  overflow-x: auto;
}

.analytics-widget--monthly_matrix .monthly-matrix-table-wrap {
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.analytics-widget--expanded-view.analytics-widget--monthly_matrix .monthly-matrix-table-wrap {
  overflow-x: auto;
}

.monthly-matrix-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

.analytics-widget--monthly_matrix .monthly-matrix-table {
  min-width: 0;
  table-layout: fixed;
}

.analytics-widget--monthly_matrix .monthly-matrix-table th,
.analytics-widget--monthly_matrix .monthly-matrix-table td {
  padding: calc(0.2rem * var(--analytics-compact, 0.8)) calc(0.24rem * var(--analytics-compact, 0.8));
  font-size: calc(0.64rem * var(--analytics-compact, 0.8));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-widget--monthly_matrix .monthly-matrix-table thead th {
  font-size: calc(0.58rem * var(--analytics-compact, 0.8));
}

.analytics-widget--monthly_matrix .monthly-matrix-table tbody th {
  font-size: calc(0.6rem * var(--analytics-compact, 0.8));
  max-width: 4.5rem;
}

.monthly-matrix-table th,
.monthly-matrix-table td {
  padding: calc(0.35rem * var(--analytics-compact, 0.8)) calc(0.4rem * var(--analytics-compact, 0.8));
  border-bottom: 1px solid #ebecf0;
  text-align: center;
  font-size: calc(0.7rem * var(--analytics-compact, 0.8));
}

.monthly-matrix-table thead th {
  font-size: calc(0.62rem * var(--analytics-compact, 0.8));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6c84;
  white-space: nowrap;
}

.monthly-matrix-table tbody th {
  text-align: left;
  color: var(--byrd-text);
  white-space: nowrap;
}

.monthly-matrix-table tbody td:last-child,
.monthly-matrix-table tbody td:nth-last-child(2),
.monthly-matrix-table tbody td:nth-last-child(3),
.monthly-matrix-table thead th:last-child,
.monthly-matrix-table thead th:nth-last-child(2),
.monthly-matrix-table thead th:nth-last-child(3) {
  font-weight: 700;
  color: var(--byrd-teal);
}

@media (max-width: 960px) {
  .customer-analytics__charts {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .analytics-kpi-cards {
    grid-template-columns: 1fr;
  }
}

.general-settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.general-settings-panel__header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #ebecf0;
}

.general-settings-panel__header h3 {
  margin: 0 0 0.35rem;
}

.general-settings-panel__header p {
  margin: 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.general-settings-panel__body {
  padding: 1.25rem 1.5rem;
}

.general-settings-panel__toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
}

.general-settings-panel__toggle span {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #344563;
}

.general-settings-panel__body > .general-settings-panel__toggle + .general-settings-panel__hint + .general-settings-panel__toggle {
  margin-top: 1.25rem;
}

.general-settings-panel__hint {
  margin: 0.65rem 0 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.general-settings-panel__reset {
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: 999px;
  background: var(--byrd-surface);
  color: var(--byrd-tutorial);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.general-settings-panel__reset:hover:not(:disabled) {
  background: var(--byrd-tutorial-soft);
  border-color: var(--byrd-tutorial);
}

.general-settings-panel__reset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.general-settings-panel__notice {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: var(--byrd-tutorial-soft);
  color: var(--byrd-tutorial);
  font-size: 0.82rem;
}

.evaluation-settings-panel__placeholder {
  padding: 1.25rem 1.5rem;
  color: #6b778c;
  font-size: 0.9rem;
}

.evaluation-settings-panel__placeholder p {
  margin: 0;
}

.customer-settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.customer-settings-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #ebecf0;
}

.customer-settings-panel__header h3 {
  margin: 0 0 0.35rem;
}

.customer-settings-panel__header p {
  margin: 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.customer-settings-panel__add-btn {
  border: none;
  background: var(--byrd-teal);
  color: #fff;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.customer-settings-panel__body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.5rem;
}

.customer-settings-panel__body--detail {
  padding-top: 0.75rem;
}

.customer-settings-panel__empty {
  color: #6b778c;
  font-size: 0.9rem;
}

.customer-settings-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.customer-settings-panel__list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 1px solid #ebecf0;
  background: #fff;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-align: left;
}

.customer-settings-panel__list-item:hover {
  border-color: var(--byrd-teal);
  background: #f7fffe;
}

.customer-settings-panel__list-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--byrd-teal-light);
  flex-shrink: 0;
}

.customer-settings-panel__list-thumb--empty {
  background-image: none;
}

.customer-settings-panel__list-label {
  font-size: 0.95rem;
  color: #172b4d;
}

.customer-settings-panel__detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem 0;
}

.customer-settings-panel__back {
  border: none;
  background: transparent;
  color: var(--byrd-teal);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

.customer-settings-panel__edit-btn {
  border: 1px solid #dfe1e6;
  background: #fff;
  color: #42526e;
  border-radius: 8px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.customer-settings-panel__edit-btn--active {
  border-color: var(--byrd-teal);
  color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.customer-settings-panel__toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-settings-panel__delete-btn {
  border: 1px solid #ffbdad;
  background: #fff;
  color: #de350b;
  border-radius: 8px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.customer-settings-panel__delete-btn:hover:not(:disabled) {
  background: #ffebe6;
}

.customer-settings-panel__delete-btn:disabled,
.customer-settings-panel__edit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.customer-settings-panel__hero-wrap {
  padding: 0 1.5rem;
}

.customer-settings-panel__hero {
  min-height: 120px;
  border-radius: 12px;
  background: var(--byrd-teal-light);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  position: relative;
}

.customer-settings-panel__hero--branded::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.customer-settings-panel__hero-name,
.customer-settings-panel__hero-name-input {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.customer-settings-panel__hero-name-input {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.customer-settings-panel__hero:not(.customer-settings-panel__hero--branded) .customer-settings-panel__hero-name,
.customer-settings-panel__hero:not(.customer-settings-panel__hero--branded) .customer-settings-panel__hero-name-input {
  color: #172b4d;
  text-shadow: none;
}

.customer-settings-panel__dropzone {
  border: 2px dashed #c1c7d0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  color: #6b778c;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 1rem;
}

.customer-settings-panel__dropzone--active {
  border-color: var(--byrd-teal);
  background: var(--byrd-teal-light);
}

.customer-settings-panel__dropzone p {
  margin: 0;
}

.customer-settings-panel__field--spaced {
  margin-top: 1rem;
}

.customer-settings-panel__briefing-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.customer-settings-panel__briefing-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #344563;
}

.customer-settings-panel__briefing-option-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.customer-settings-panel__briefing-option-label {
  line-height: 1.35;
}

.briefing-option-hint {
  flex-shrink: 0;
  font-size: 0.6875rem;
  line-height: 1.25;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.briefing-option-hint--customer {
  background: #e2f8f6;
  color: #0b2e2b;
}

.briefing-option-hint--internal {
  background: #f4fafa;
  color: #4a5257;
  border: 1px solid #dce4e5;
}

.briefing-free-text-edit {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: #0a7c75;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
}

.briefing-free-text-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(9, 30, 66, 0.54);
}

.briefing-free-text-modal__panel {
  width: min(100%, 28rem);
  padding: 1.25rem 1.35rem 1rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(9, 30, 66, 0.25);
}

.briefing-free-text-modal__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: #22272a;
}

.briefing-free-text-modal__textarea {
  width: 100%;
  min-height: 7rem;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #dce4e5;
  border-radius: 6px;
  font: inherit;
  resize: vertical;
}

.briefing-free-text-modal__error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #de350b;
}

.briefing-free-text-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.briefing-free-text-modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  border: none;
  background: none;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: #4a5257;
}

.briefing-free-text-modal__panel {
  position: relative;
}

.briefing-settings-disclosure {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  background: #fafbfc;
}

.briefing-settings-disclosure + .briefing-settings-disclosure {
  margin-top: 0.65rem;
}

.briefing-settings-disclosure__summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #172b4d;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.briefing-settings-disclosure__summary::-webkit-details-marker {
  display: none;
}

.briefing-settings-disclosure__summary::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid #00897b;
  border-bottom: 2px solid #00897b;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.briefing-settings-disclosure[open] .briefing-settings-disclosure__summary::before {
  transform: rotate(45deg);
}

.briefing-settings-disclosure__intro {
  margin: 0.5rem 0 0.65rem;
  font-size: 0.8125rem;
  color: #5e6c84;
  line-height: 1.45;
}

.customer-settings-panel__select {
  width: 100%;
  max-width: 22rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #dfe1e6;
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

.customer-settings-panel__field {
  margin-bottom: 1rem;
}

.customer-settings-panel__segmented--kontingent {
  margin-bottom: 0.5rem;
}

.customer-settings-panel__field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: #344563;
}

.customer-settings-panel__segmented {
  display: inline-flex;
  border: 1px solid #ebecf0;
  border-radius: 8px;
  overflow: hidden;
  background: #fafbfc;
}

.customer-settings-panel__segment {
  border: none;
  background: transparent;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: #42526e;
}

.customer-settings-panel__segment--active {
  background: var(--byrd-teal);
  color: #fff;
}

.customer-settings-panel__hint {
  margin: 0.5rem 0 0;
  color: #6b778c;
  font-size: 0.8rem;
  line-height: 1.4;
}

.customer-settings-panel__unsaved-hint {
  margin: 0.35rem 0 0;
  color: #974f0c;
  font-size: 0.8rem;
  line-height: 1.4;
}

.customer-settings-panel__field--unsaved {
  padding: 0.65rem 0.75rem;
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-warning-surface);
  border: 1px solid var(--byrd-warning-border);
}

.customer-settings-panel__field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #344563;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.customer-settings-panel__field input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  font-size: 0.9rem;
  background: var(--byrd-input-bg);
  transition:
    border-color var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast);
}

.customer-settings-panel__field input:focus {
  outline: none;
  border-color: var(--byrd-teal);
  box-shadow: var(--byrd-focus-ring);
}

.customer-settings-panel__field--required input,
.customer-settings-panel__hero-name-input.customer-settings-panel__field--required,
.customer-settings-panel__dropzone.customer-settings-panel__field--required {
  border: 1px solid color-mix(in srgb, var(--byrd-danger) 50%, var(--byrd-border));
  box-shadow: var(--byrd-danger-ring);
  background: var(--byrd-danger-surface);
}

.customer-settings-panel__field--required input:focus,
.customer-settings-panel__hero-name-input.customer-settings-panel__field--required:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--byrd-danger) 65%, var(--byrd-border));
  box-shadow: var(--byrd-danger-ring);
}

.customer-settings-panel__value {
  margin: 0;
  font-size: 0.95rem;
  color: #172b4d;
}

.customer-settings-panel__error {
  margin: 0.5rem 0 0;
  color: #de350b;
  font-size: 0.85rem;
}

.customer-settings-panel__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid #dfe1e6;
  background: #fafbfc;
}

.customer-settings-panel__save-hint {
  margin: 0;
  width: 100%;
  text-align: right;
  font-size: 0.8125rem;
  color: #de350b;
}

.customer-settings-panel__save {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: #c1c7d0;
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: not-allowed;
}

.customer-settings-panel__save:not(:disabled) {
  cursor: pointer;
}

.customer-settings-panel__save--ready {
  background: var(--byrd-teal);
  cursor: pointer;
}

.customer-settings-panel__save--inactive:not(:disabled) {
  background: #c1c7d0;
  cursor: pointer;
}

.customer-settings-panel__save--warning {
  background: #ff991f;
  cursor: pointer;
}

.customer-settings-panel__save--success {
  background: var(--byrd-teal);
  cursor: default;
}

.customer-settings-panel__save--error {
  background: #de350b;
}

.customer-settings-panel__save:disabled.customer-settings-panel__save--warning {
  background: #c1c7d0;
  opacity: 0.85;
  cursor: not-allowed;
}

.settings-chapter {
  margin-bottom: 1.35rem;
  padding: 1rem 1.15rem 1.15rem;
  border-radius: 12px;
  border: 1px solid #ebecf0;
  background: rgba(250, 251, 252, 0.92);
}

.settings-chapter:last-child {
  margin-bottom: 0;
}

.settings-chapter__header {
  margin-bottom: 0.65rem;
}

.settings-chapter__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: #172b4d;
}

.settings-chapter__intro {
  margin: 0;
  max-width: 42rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #6b778c;
}

.settings-chapter__body {
  padding-top: 0.15rem;
}

.settings-chapter__body .dashboard-settings-panel__section {
  margin-bottom: 1rem;
}

.settings-chapter__body .dashboard-settings-panel__subsection + .dashboard-settings-panel__subsection {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid #ebecf0;
}

.dashboard-settings-panel__subsection-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #344563;
}

.dashboard-settings-panel__subsection-intro {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #6b778c;
}

.attributes-editor-panel__section-title {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #42526e;
}

.settings-chapter .attributes-editor-panel__section + .attributes-editor-panel__section {
  margin-top: 1rem;
  padding-top: 1rem;
}

.dashboard-settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dashboard-settings-panel__header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #ebecf0;
}

.dashboard-settings-panel__header h3 {
  margin: 0 0 0.35rem;
}

.dashboard-settings-panel__header p {
  margin: 0;
  color: #6b778c;
  font-size: 0.85rem;
}

.dashboard-settings-panel__body {
  flex: 1;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}

.dashboard-settings-panel__section {
  margin-bottom: 1.75rem;
}

.dashboard-settings-panel__section:last-child {
  margin-bottom: 0;
}

.dashboard-settings-panel__section h4 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.dashboard-settings-panel__section > p {
  margin: 0 0 0.85rem;
  color: #6b778c;
  font-size: 0.85rem;
}

.dashboard-settings-panel__farbcode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.dashboard-settings-panel__farbcode-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dashboard-settings-panel__farbcode-field label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #344563;
}

.dashboard-settings-panel__farbcode-field input {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  font: inherit;
  font-size: 0.85rem;
  background: var(--byrd-input-bg);
  transition:
    border-color var(--byrd-transition-fast),
    box-shadow var(--byrd-transition-fast);
}

.dashboard-settings-panel__farbcode-field input:focus {
  outline: none;
  border-color: var(--byrd-teal);
  box-shadow: var(--byrd-focus-ring);
}

.dashboard-settings-panel__preview {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.dashboard-settings-panel__preview-swatch {
  flex: 1;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(9, 30, 66, 0.12);
}

.dashboard-settings-panel__hint {
  margin: 0.65rem 0 0;
  color: #6b778c;
  font-size: 0.82rem;
}

.dashboard-settings-panel__field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #344563;
}

.dashboard-settings-panel__segmented {
  display: inline-flex;
  border: 1px solid #ebecf0;
  border-radius: 8px;
  overflow: hidden;
}

.dashboard-settings-panel__segment {
  min-width: 3.5rem;
  padding: 0.45rem 0.85rem;
  border: none;
  background: #fff;
  color: #42526e;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-settings-panel__segment + .dashboard-settings-panel__segment {
  border-left: 1px solid #ebecf0;
}

.dashboard-settings-panel__segment--active {
  background: var(--byrd-teal);
  color: #fff;
}

.dashboard-settings-panel__segment:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.dashboard-settings-panel__work-days-grid,
.dashboard-settings-panel__pause-days-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.dashboard-settings-panel__work-days-grid--disabled,
.dashboard-settings-panel__pause-days-grid--disabled {
  opacity: 0.55;
}

.dashboard-settings-panel__work-day,
.dashboard-settings-panel__pause-day {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #ebecf0;
  border-radius: 6px;
  background: #fafbfc;
  font-size: 0.82rem;
  font-weight: 700;
  color: #42526e;
  cursor: pointer;
  user-select: none;
}

.dashboard-settings-panel__pause-day input {
  margin: 0;
  accent-color: var(--byrd-teal);
}

.dashboard-settings-panel__work-day--werk,
.dashboard-settings-panel__pause-day--free {
  grid-column: span 2;
  justify-content: center;
}

.dashboard-settings-panel__pause-day:has(input:disabled) {
  cursor: not-allowed;
}

.dashboard-settings-panel__footer {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid #ebecf0;
  background: #fafbfc;
}

.dashboard-settings-panel__save {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: #c1c7d0;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: not-allowed;
}

.dashboard-settings-panel__save--dirty {
  background: var(--byrd-teal);
  cursor: pointer;
}

.dashboard-settings-panel__save--dirty:hover:not(:disabled) {
  background: var(--byrd-teal-dark);
}

@media (max-width: 640px) {
  .dashboard-settings-panel__farbcode-grid {
    grid-template-columns: 1fr;
  }
}

.page-message {
  padding: 2rem;
  text-align: center;
  color: #6b778c;
}

.page-message--error {
  color: #de350b;
}

.data-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  min-height: 40vh;
  padding: 2rem;
  color: var(--byrd-label);
}

.bayard-loader {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}

.bayard-loader__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--byrd-teal) 30%, transparent));
}

.bayard-loader__ring ellipse {
  fill: none;
  stroke: var(--byrd-teal);
  stroke-width: 3.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bayard-loader__ring {
  transform-box: fill-box;
  transform-origin: center;
}

.bayard-loader__ring--1 {
  transform: rotate(0deg);
  animation: bayard-ring-1 2.5s linear infinite;
}

.bayard-loader__ring--2 {
  transform: rotate(60deg);
  animation: bayard-ring-2 3.1s linear infinite;
}

.bayard-loader__ring--3 {
  transform: rotate(120deg);
  animation: bayard-ring-3 3.7s linear infinite;
}

.data-loading-screen__text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #42526e;
  text-align: center;
  animation: data-loading-text-in 0.45s ease-out both;
}

.login-card__brand .data-loading-screen__text {
  font-size: 0.85rem;
  color: var(--byrd-text-muted);
}

@keyframes bayard-ring-1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bayard-ring-2 {
  from {
    transform: rotate(60deg);
  }
  to {
    transform: rotate(-300deg);
  }
}

@keyframes bayard-ring-3 {
  from {
    transform: rotate(120deg);
  }
  to {
    transform: rotate(480deg);
  }
}

@keyframes data-loading-text-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bayard-loader__ring--1,
  .bayard-loader__ring--2,
  .bayard-loader__ring--3 {
    animation: none;
  }

  .bayard-loader__ring--1 {
    transform: rotate(0deg);
  }

  .bayard-loader__ring--2 {
    transform: rotate(60deg);
  }

  .bayard-loader__ring--3 {
    transform: rotate(120deg);
  }

  .data-loading-screen__text {
    animation: none;
  }

  .analytics-widget-modal__backdrop,
  .analytics-widget-modal__panel {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .auftrag-pie-chart--expanded.auftrag-pie-chart--enter .auftrag-pie-chart__canvas-wrap,
  .auftrag-pie-chart--expanded.auftrag-pie-chart--enter .auftrag-pie-chart__legend-item--enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Briefing ------------------------------------------------------------ */
/* Wochenbriefing und SOS im INFO-HUB. Bewusst schlicht: das eigentliche
   Briefing-Design folgt spaeter. Durchgaengig Theme-Variablen, damit der
   Dunkelmodus ohne Zusatzregeln passt. */

.briefing-overlay {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background: var(--byrd-overlay);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

.briefing-overlay__panel {
  --section-accent: var(--byrd-briefing);
  --section-accent-soft: var(--byrd-briefing-soft);
  position: relative;
  width: min(1180px, 100%);
  height: min(84vh, 900px);
  height: min(84dvh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--byrd-radius-md);
  border-top: 3px solid var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 4%, var(--byrd-surface));
  color: var(--byrd-heading);
  box-shadow:
    0 1px 2px var(--byrd-shadow),
    0 20px 56px var(--byrd-shadow-strong);
  animation: faq-panel-enter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ueber das absolut gesetzte Wasserzeichen gehoben: es scheint nur in freien
   Flaechen durch und legt sich nicht ueber Karten und Felder. */
.briefing-overlay__header,
.briefing-overlay__layout {
  position: relative;
  z-index: 1;
}

.briefing-overlay__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--byrd-border-subtle);
  background: color-mix(in srgb, var(--section-accent) 12%, var(--byrd-surface-muted));
}

.briefing-overlay__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.briefing-overlay__title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--byrd-heading);
}

.briefing-overlay__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.briefing-overlay__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--byrd-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}

.briefing-overlay__close:hover {
  background: var(--byrd-surface-subtle);
}

.briefing-overlay__layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 0;
}

.briefing-overlay__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 260px;
  min-height: 0;
  padding: 0.75rem;
  border-right: 1px solid var(--byrd-border-subtle);
  background: color-mix(in srgb, var(--section-accent) 8%, var(--byrd-surface-subtle));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.briefing-overlay__sidebar--collapsed {
  width: 46px;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.briefing-overlay__sidebar-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: 7px;
  background: var(--byrd-surface);
  color: var(--section-accent);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--byrd-transition-fast);
}

.briefing-overlay__sidebar-toggle:hover {
  background: var(--section-accent-soft);
}

.briefing-overlay__sidebar--collapsed .briefing-overlay__sidebar-toggle {
  align-self: center;
}

.briefing-overlay__sidebar-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  transition: opacity 160ms ease;
}

.briefing-overlay__sidebar--collapsed .briefing-overlay__sidebar-body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.briefing-overlay__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Knoepfe und Felder --- */
.briefing-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--byrd-transition-fast), color var(--byrd-transition-fast),
    border-color var(--byrd-transition-fast);
}

.briefing-btn svg {
  width: 16px;
  height: 16px;
}

.briefing-btn--small {
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
}

/* Text in Flaechenfarbe: hell auf Indigo, im Dunkelmodus dunkel auf hellem Indigo. */
.briefing-btn--primary {
  background: var(--section-accent);
  color: var(--byrd-surface);
}

.briefing-btn--primary:hover {
  background: color-mix(in srgb, var(--section-accent) 82%, #000);
}

.briefing-btn--ghost {
  background: var(--byrd-surface-muted);
  border-color: var(--byrd-border-subtle);
  color: var(--byrd-heading);
}

.briefing-btn--ghost:hover,
.briefing-btn--ghost[aria-current] {
  background: var(--section-accent-soft);
  border-color: color-mix(in srgb, var(--section-accent) 40%, var(--byrd-border));
  color: var(--section-accent);
}

.briefing-btn--danger {
  background: var(--byrd-danger);
  color: var(--byrd-surface);
}

.briefing-btn--danger:hover {
  background: color-mix(in srgb, var(--byrd-danger) 85%, #000);
}

.briefing-btn--resolve {
  background: var(--byrd-surface);
  border-color: var(--byrd-border);
  color: var(--byrd-heading);
}

.briefing-btn--resolve:hover {
  border-color: #00875a;
  color: #00875a;
}

.briefing-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface);
  color: var(--byrd-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.briefing-iconbtn svg {
  width: 15px;
  height: 15px;
}

.briefing-iconbtn:hover {
  border-color: var(--section-accent);
  color: var(--section-accent);
}

.briefing-iconbtn--danger:hover {
  border-color: var(--byrd-danger);
}

.briefing-iconbtn--resolve:hover {
  border-color: #00875a;
}

.briefing-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: 40rem;
}

.briefing-field__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--byrd-label);
}

.briefing-field__hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--byrd-text-muted);
}

.briefing-input,
.briefing-textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-input-bg);
  font: inherit;
  font-size: 0.92rem;
  color: var(--byrd-heading);
}

.briefing-input--date {
  max-width: 12rem;
}

.briefing-textarea {
  min-height: 8rem;
  line-height: 1.6;
  resize: vertical;
}

.briefing-input:focus,
.briefing-textarea:focus {
  outline: none;
  border-color: var(--section-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 25%, transparent);
}

.briefing-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
  max-width: 40rem;
}

.briefing-empty,
.briefing-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--byrd-text-muted);
}

.briefing-error,
.briefing-notice {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--byrd-radius-sm);
  font-size: 0.85rem;
}

.briefing-error {
  border: 1px solid color-mix(in srgb, var(--byrd-danger) 40%, var(--byrd-border));
  background: var(--byrd-danger-surface);
  color: var(--byrd-danger);
}

.briefing-error--load {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.briefing-notice {
  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
  background: var(--section-accent-soft);
  color: var(--byrd-heading);
}

.briefing-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--section-accent);
}

/* --- Zeitleiste --- */
.briefing-timeline__title {
  margin: 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.briefing-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-timeline__month {
  margin: 0.6rem 0.35rem 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--byrd-label);
}

.briefing-timeline__month:first-child {
  margin-top: 0.2rem;
}

.briefing-timeline__entry {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--byrd-radius-sm);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--byrd-heading);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.briefing-timeline__entry:hover {
  background: var(--byrd-surface);
}

.briefing-timeline__entry--selected {
  border-color: color-mix(in srgb, var(--section-accent) 40%, var(--byrd-border));
  background: var(--byrd-surface);
}

.briefing-timeline__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: var(--section-accent);
}

.briefing-timeline__entry--sos .briefing-timeline__dot {
  border-radius: 2px;
  background: color-mix(in srgb, var(--byrd-danger) 45%, var(--byrd-border));
}

.briefing-timeline__entry--active .briefing-timeline__dot {
  background: var(--byrd-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--byrd-danger) 25%, transparent);
}

/* Quick Updates himmelblau, SOS rot, Weekly in der Briefing-Farbe. */
.briefing-timeline__entry--quick .briefing-timeline__dot {
  border-radius: 2px;
  background: color-mix(in srgb, var(--type-color) 45%, var(--byrd-border));
}

.briefing-timeline__entry--quick.briefing-timeline__entry--active .briefing-timeline__dot {
  background: var(--type-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--type-color) 25%, transparent);
}

.briefing-timeline__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.briefing-timeline__label {
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Kalenderwoche traegt, das genaue Datum tritt zurueck. */
.briefing-week__range {
  font-size: 0.78em;
  font-weight: 400;
  color: var(--byrd-text-muted);
}

.briefing-timeline__meta {
  font-size: 0.72rem;
  color: var(--byrd-text-muted);
}

.briefing-timeline__entry--active .briefing-timeline__meta {
  color: var(--byrd-danger);
}

.briefing-timeline__entry--quick.briefing-timeline__entry--active .briefing-timeline__meta {
  color: var(--type-color);
}

.briefing-timeline__hint {
  margin: auto 0.35rem 0;
  padding-top: 0.75rem;
  font-size: 0.7rem;
  color: var(--byrd-text-muted);
}

/* --- Karten --- */
.briefing-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
}

.briefing-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--byrd-heading);
}

/* --- Feste Farbe je Briefing-Typ: SOS rot, Quick Update himmelblau, Weekly Indigo --- */
/* Gilt fuer Kachel, Seite, Zeitleiste und Beitragszeile, damit man die drei
   Typen ueberall auf einen Blick auseinanderhaelt. */
.briefing-tile--sos,
.briefing-notice-card--sos,
.briefing-timeline__entry--sos,
.briefing-action--sos,
.briefing-filter__chip--sos {
  --type-color: var(--byrd-danger);
  --type-soft: var(--byrd-danger-surface);
}

.briefing-tile--quick,
.briefing-notice-card--quick,
.briefing-timeline__entry--quick,
.briefing-action--quick,
.briefing-filter__chip--quick {
  --type-color: var(--byrd-quick);
  --type-soft: var(--byrd-quick-soft);
}

.briefing-tile--weekly,
.briefing-weekly,
.briefing-action--item,
.briefing-filter__chip--weekly {
  --type-color: var(--byrd-briefing);
  --type-soft: var(--byrd-briefing-soft);
}

/* --- Startseite: oben die Briefings, unten der Weg, etwas beizutragen --- */
/* Untereinander: aktive SOS, Quick Updates, Weekly, darunter das Beitragsmenue. */
.briefing-home__top {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Jedes Briefing eine Zeile: Symbol am linken Rand, Inhalt, Pfeil. */
.briefing-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  font: inherit;
  text-align: left;
  color: var(--byrd-heading);
}

button.briefing-tile {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

button.briefing-tile:hover {
  border-color: color-mix(in srgb, var(--type-color, var(--section-accent)) 45%, var(--byrd-border));
  box-shadow: 0 4px 14px var(--byrd-shadow);
}

button.briefing-tile:focus-visible,
.briefing-action:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 2px;
}

/* Weisses Rund mit Ring in Typfarbe: die Kachel ist schon in --type-soft
   getoent, ein Rund in derselben Toenung waere darauf unsichtbar. */
.briefing-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--byrd-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-color) 40%, transparent);
  color: var(--type-color);
}

.briefing-tile__icon svg {
  width: 19px;
  height: 19px;
}

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

.briefing-tile__title {
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefing-tile__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.briefing-tile__arrow {
  align-self: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--type-color, var(--section-accent));
  transition: transform 0.15s ease;
}

button.briefing-tile:hover .briefing-tile__arrow {
  transform: translateX(3px);
}

/* Kacheln der drei Typen: Rand, Kicker und Toenung in der Typfarbe. */
.briefing-tile--sos,
.briefing-tile--quick,
.briefing-tile--weekly {
  border-color: color-mix(in srgb, var(--type-color) 40%, var(--byrd-border));
  border-left: 4px solid var(--type-color);
  background: var(--type-soft);
}

.briefing-tile--sos .briefing-kicker,
.briefing-tile--quick .briefing-kicker,
.briefing-tile--weekly .briefing-kicker {
  color: var(--type-color);
}

/* Unterer Teil: sitzt am Fuss des Inhalts, damit die Seite klar zweigeteilt ist. */
.briefing-home__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--byrd-border-subtle);
}

.briefing-home__actions-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--byrd-text-muted);
}

.briefing-home__actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.briefing-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--byrd-border);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  font: inherit;
  text-align: left;
  color: var(--byrd-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.briefing-action:hover {
  border-color: var(--type-color, var(--section-accent));
  box-shadow: 0 6px 18px var(--byrd-shadow);
  transform: translateY(-1px);
}

.briefing-action__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--type-soft, var(--section-accent-soft));
  color: var(--type-color, var(--section-accent));
}

.briefing-action__icon svg {
  width: 20px;
  height: 20px;
}

.briefing-action__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.briefing-action__title {
  font-size: 0.95rem;
  font-weight: 700;
}

.briefing-action__meta {
  font-size: 0.74rem;
  color: var(--byrd-text-muted);
}


/* Filter ueber der Zeitleiste: "Alle" als Text, die Typen als Symbol in ihrer Farbe. */
.briefing-filter {
  display: flex;
  gap: 0.3rem;
  margin: 0 0.35rem;
}

.briefing-filter__chip {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--type-color, var(--byrd-heading));
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.briefing-filter__chip svg {
  width: 15px;
  height: 15px;
}

.briefing-filter__chip:hover {
  border-color: var(--type-color, var(--section-accent));
}

.briefing-filter__chip--on {
  border-color: var(--type-color, var(--section-accent));
  background: var(--type-soft, var(--section-accent-soft));
  color: var(--type-color, var(--section-accent));
}

.briefing-filter__chip:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 1px;
}

.briefing-weekly {
  gap: 0.25rem;
  border-left: 4px solid var(--type-color);
}

.briefing-weekly__head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-bottom: 0.6rem;
}

/* Zurueck zur Startseite, deutlich und immer an derselben Stelle. */
.briefing-backbtn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--byrd-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.briefing-backbtn svg {
  width: 16px;
  height: 16px;
}

.briefing-backbtn:hover {
  border-color: var(--section-accent);
  color: var(--section-accent);
}

/* Drei erkennbar getrennte Bereiche: Kennzahlen, Termine, Sonstiges. */
.briefing-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 0 0.35rem;
  border-top: 1px solid var(--byrd-border-subtle);
}

.briefing-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.briefing-section__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--byrd-heading);
}

.briefing-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

.briefing-section__sub {
  margin: -0.25rem 0 0;
  font-size: 0.76rem;
  color: var(--byrd-text-muted);
}

.briefing-linkbtn {
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--section-accent);
  cursor: pointer;
}

.briefing-linkbtn:hover {
  text-decoration: underline;
}

.briefing-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

.briefing-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--byrd-radius-sm);
  background: var(--section-accent-soft);
}

.briefing-kpi__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--section-accent);
}

.briefing-kpi__label {
  font-size: 0.76rem;
  color: var(--byrd-text-muted);
}

.briefing-breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.briefing-breakdown__title {
  margin: 0 0 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--byrd-label);
}

.briefing-breakdown__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--byrd-border-subtle);
  font-size: 0.85rem;
}

.briefing-breakdown__count {
  font-weight: 700;
}

.briefing-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-sm);
  background: var(--byrd-surface-subtle);
}

/* Steht hinter dem Titel und tritt zurueck: der Titel traegt die Info. */
.briefing-item__date {
  flex: 0 0 auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--section-accent-soft);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--section-accent);
}

/* --- Ziehen in der Vorgemerkt-Liste --- */
.briefing-item--draggable {
  cursor: grab;
}

.briefing-item__handle {
  flex: 0 0 auto;
  margin-top: 0.05rem;
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: -0.15em;
  color: var(--byrd-text-muted);
  user-select: none;
}

.briefing-item--dragging {
  opacity: 0.45;
}

.briefing-item--drop-before {
  box-shadow: 0 -3px 0 0 var(--section-accent);
}

.briefing-item--drop-after {
  box-shadow: 0 3px 0 0 var(--section-accent);
}

.briefing-item--editing {
  border-style: dashed;
  border-color: var(--section-accent);
}

.briefing-item__main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.briefing-item__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.briefing-item__head .briefing-item__actions {
  margin-left: auto;
}

.briefing-item__title {
  margin: 0;
  font-size: 0.9rem;
  color: var(--byrd-heading);
}

.briefing-item__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.35rem;
}

.briefing-item__body,
.briefing-sos__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--byrd-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Gekuerzt auf zwei Zeilen; ein Klick auf die Info zeigt den ganzen Text. */
.briefing-item__body {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.84rem;
  color: var(--byrd-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.briefing-item--expandable {
  cursor: pointer;
}

.briefing-item--expandable:hover {
  border-color: color-mix(in srgb, var(--section-accent) 35%, var(--byrd-border));
}

.briefing-item--expandable:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 1px;
}

.briefing-item--open .briefing-item__body {
  display: block;
  color: var(--byrd-text);
  -webkit-line-clamp: unset;
}

/* --- SOS und Quick Update --- */
.briefing-notice-card {
  gap: 0.6rem;
}

.briefing-notice-card--sos {
  border-color: color-mix(in srgb, var(--byrd-danger) 45%, var(--byrd-border));
  border-left: 4px solid var(--byrd-danger);
  background: var(--byrd-danger-surface);
}

.briefing-notice-card--sos .briefing-kicker {
  color: var(--byrd-danger);
}

/* Gleich aufgebaut wie SOS, aber ohne warnenden Hintergrund: Rand, Symbol
   und Kicker in der Quick-Farbe. */
.briefing-notice-card--quick {
  border-left: 4px solid var(--type-color);
}

.briefing-notice-card--quick .briefing-sos__icon,
.briefing-notice-card--quick .briefing-kicker {
  color: var(--type-color);
}

.briefing-notice-card--ended {
  border-color: var(--byrd-border-subtle);
  border-left-color: var(--byrd-border);
  background: var(--byrd-surface);
}

.briefing-notice-card--ended .briefing-kicker,
.briefing-notice-card--ended .briefing-sos__icon {
  color: var(--byrd-text-muted);
}

.briefing-sos__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.briefing-sos__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--byrd-danger);
}

.briefing-sos__icon svg {
  width: 26px;
  height: 26px;
}

.briefing-sos__heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.briefing-sos__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- Erstellen --- */
.briefing-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.briefing-page__title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--byrd-heading);
}

.briefing-page__title--sos {
  color: var(--byrd-danger);
}

.briefing-page__intro {
  margin: 0;
  max-width: 70ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--byrd-text-muted);
}

/* Formulare zweispaltig: links eintragen, rechts was schon vorgemerkt bzw.
   gerade aktiv ist. */
.briefing-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.briefing-planned,
.briefing-aside {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--byrd-border-subtle);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
}

.briefing-planned__title {
  margin: 0;
  font-size: 0.85rem;
  color: var(--byrd-heading);
}

.briefing-planned__group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.briefing-planned__group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--byrd-label);
}

/* Bereichswahl im Formular. Kennzahlen stehen gesperrt dabei. */
.briefing-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.briefing-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--byrd-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.briefing-segment:hover:not(:disabled) {
  border-color: var(--section-accent);
}

.briefing-segment--on {
  border-color: var(--section-accent);
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

.briefing-segment__icon {
  display: inline-flex;
}

.briefing-segment__icon svg {
  width: 14px;
  height: 14px;
}

/* --- Hinweise am INFO-HUB: das Symbol leuchtet in der dringendsten Farbe --- */
.header-bayard-symbol-btn--alert-sos {
  --alert-color: var(--byrd-danger);
  --alert-soft: var(--byrd-danger-surface);
}

.header-bayard-symbol-btn--alert-quick {
  --alert-color: var(--byrd-quick);
  --alert-soft: var(--byrd-quick-soft);
}

.header-bayard-symbol-btn--alert-weekly {
  --alert-color: var(--byrd-briefing);
  --alert-soft: var(--byrd-briefing-soft);
}

.header-bayard-symbol-btn--alert-tutorial {
  --alert-color: var(--byrd-tutorial);
  --alert-soft: var(--byrd-tutorial-soft);
}

.header-bayard-symbol-btn--alert-sos,
.header-bayard-symbol-btn--alert-quick,
.header-bayard-symbol-btn--alert-weekly,
.header-bayard-symbol-btn--alert-tutorial {
  background: var(--alert-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alert-color) 55%, transparent);
  animation: info-hub-glow 1.8s ease-in-out infinite;
}

.header-bayard-symbol-btn--alert-sos:hover,
.header-bayard-symbol-btn--alert-quick:hover,
.header-bayard-symbol-btn--alert-weekly:hover,
.header-bayard-symbol-btn--alert-tutorial:hover {
  background: color-mix(in srgb, var(--alert-color) 14%, var(--alert-soft));
}

@keyframes info-hub-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--alert-color) 55%, transparent),
      0 0 0 0 color-mix(in srgb, var(--alert-color) 40%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--alert-color) 55%, transparent),
      0 0 0 7px color-mix(in srgb, var(--alert-color) 0%, transparent);
  }
}

/* Im Menue stehen alle zutreffenden Farben als Punkte am rechten Rand. */
.copilot__item-dots {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: auto;
  padding-left: 0.5rem;
}

.copilot__item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot-color) 22%, transparent);
}

.copilot__item-dot--sos {
  --dot-color: var(--byrd-danger);
}

.copilot__item-dot--quick {
  --dot-color: var(--byrd-quick);
}

.copilot__item-dot--weekly {
  --dot-color: var(--byrd-briefing);
}

.copilot__item-dot--tutorial {
  --dot-color: var(--byrd-tutorial);
}

/* Ungesehene Briefings pulsieren sanft in ihrer Typfarbe, bis man sie oeffnet. */
.briefing-tile--unseen {
  animation: briefing-unseen-pulse 1.6s ease-in-out infinite;
}

@keyframes briefing-unseen-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--type-color) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--type-color) 35%, transparent);
  }
}

.briefing-timeline__entry--unseen .briefing-timeline__dot {
  --dot-color: var(--type-color, var(--section-accent));
  animation: briefing-unseen-dot 1.6s ease-in-out infinite;
}

@keyframes briefing-unseen-dot {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-color) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-color) 40%, transparent);
  }
}

/* --- Erinnerung an das Tutorial --- */
.tutorial-reminder {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--byrd-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tutorial-reminder__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: min(420px, 100%);
  padding: 1.6rem 1.5rem 1.3rem;
  border-top: 3px solid var(--byrd-tutorial);
  border-radius: var(--byrd-radius-md);
  background: var(--byrd-surface);
  color: var(--byrd-heading);
  text-align: center;
  box-shadow: 0 18px 40px var(--byrd-shadow);
}

.tutorial-reminder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--byrd-tutorial-soft);
  color: var(--byrd-tutorial);
}

.tutorial-reminder__icon-svg {
  width: 26px;
  height: 26px;
}

.tutorial-reminder__title {
  margin: 0.2rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.tutorial-reminder__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--byrd-text-muted);
}

.tutorial-reminder__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.tutorial-reminder__btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--byrd-border);
  border-radius: 999px;
  background: var(--byrd-surface);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--byrd-heading);
  cursor: pointer;
}

.tutorial-reminder__btn:hover {
  border-color: var(--byrd-tutorial);
}

.tutorial-reminder__btn--primary {
  border-color: var(--byrd-tutorial);
  background: var(--byrd-tutorial);
  color: #fff;
}

.tutorial-reminder__btn--primary:hover {
  background: color-mix(in srgb, var(--byrd-tutorial) 85%, #000);
}

.tutorial-reminder__btn:focus-visible {
  outline: 2px solid var(--byrd-tutorial);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .briefing-overlay__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .briefing-overlay__sidebar {
    width: auto;
    max-height: 30vh;
    border-right: none;
    border-bottom: 1px solid var(--byrd-border-subtle);
  }

  .briefing-overlay__sidebar--collapsed .briefing-overlay__sidebar-body {
    display: none;
  }

  .briefing-home__actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .briefing-form-layout {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .briefing-overlay__panel,
  .header-bayard-symbol-btn--alert-sos,
  .header-bayard-symbol-btn--alert-quick,
  .header-bayard-symbol-btn--alert-weekly,
  .header-bayard-symbol-btn--alert-tutorial {
    animation: none;
  }

  /* Statt des Pulsierens ein fester Ring. */
  .briefing-tile--unseen {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--type-color) 35%, transparent);
  }

  .briefing-timeline__entry--unseen .briefing-timeline__dot {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-color) 40%, transparent);
  }

  .briefing-overlay__sidebar,
  .briefing-overlay__sidebar-body,
  .briefing-tile__arrow,
  .briefing-action {
    transition: none;
  }
}