@charset "UTF-8";
/* ── Süverkrüp · Colour tokens ─────────────────────────────────────
   Base values transcribed exactly from the "Colors" library frame
   and the Figma variable collection. Semantic aliases below. */
:root {
  /* Brand — Hauptfarben */
  --suv-navy: #0A2F56; /* primary brand / button default / text-on-light accent */
  --suv-navy-deep: #234467; /* button hover / secondary navy */
  --suv-navy-mid: #45709D; /* variable: ButtonHover */
  --suv-blue: #4D97E5; /* accent blue / link */
  --suv-blue-bright: #00ADEF; /* variable: Link (bright) */
  /* Neutrals */
  --suv-black: #000000;
  --suv-white: #FFFFFF;
  --suv-ink: #212121; /* near-black body text */
  --suv-grey-900: #1D1B20; /* control fill (checkbox) */
  --suv-bg: #F6F6F6; /* app background / Background 2 */
  --suv-bg-soft: #F7F7F7;
  --suv-bg-tint: #F8F9FE; /* faint blue surface */
  --suv-line: #EAEAEA; /* input & divider hairline */
  --suv-line-strong: #D7D7D7; /* disabled button fill / strong border */
  --suv-disabled: #ECEBED; /* variable: Disabled */
  --suv-grey: #949494; /* disabled text / muted icon */
  --suv-grey-muted: #757575; /* secondary label */
  --suv-placeholder: #B3B3B3; /* variable: Placeholder */
  --suv-placeholder-lilac: #D0C9D6; /* variable: PlaceholderNeu */
  --suv-form-active: #948EA5; /* variable: FormActive */
  --suv-stroke-lilac:#D5D4DF; /* common stroke */
  /* Semantic — Alerts & Status */
  --suv-success: #27822A; /* success text */
  --suv-success-icon: #27AE60; /* success icon/fill (variable: Erfolg) */
  --suv-error: #E21D1D; /* error text */
  --suv-error-soft: #FF5670; /* error border / input outline (variable: Error) */
  --suv-warning: #FFBE00; /* warning (variable: Warnung) */
  /* Overlays */
  --suv-overlay: rgba(246,246,246,0.5);
  --suv-overlay-1: rgba(148,148,148,0.4);
  --suv-overlay-2: rgba(148,148,148,0.2);
  --suv-scrim: rgba(0,0,0,0.25);
  /* ── Semantic aliases ── */
  --text-primary: var(--suv-black);
  --text-body: var(--suv-ink);
  --text-muted: var(--suv-grey-muted);
  --text-disabled: var(--suv-grey);
  --text-on-brand: var(--suv-white);
  --text-link: var(--suv-blue);
  --surface-page: var(--suv-bg);
  --surface-card: var(--suv-white);
  --surface-brand: var(--suv-navy);
  --border-subtle: var(--suv-line);
  --border-strong: var(--suv-line-strong);
  --action-default: var(--suv-navy);
  --action-hover: var(--suv-navy-deep);
  --action-disabled: var(--suv-line-strong);
  --action-accent: var(--suv-blue);
}

/* ── Süverkrüp · Fonts ─────────────────────────────────────────────
   DEVIATION FROM THE DESIGN SYSTEM — see designSystem/README.md.

   The brand face is Galano Grotesque Alt (René Bieder), a commercially
   licensed font. The design system ships the .otf desktop binaries; a
   separate webfont licence is required before they may be served from
   our own host. Until that is cleared, only the font stack variable is
   defined and the system UI face renders instead. Adding the
   @font-face rules and the binaries is then the only change needed. */
:root {
  --font-sans: 'Galano Grotesque Alt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-brand: var(--font-sans);
  --font-brand-semibold: var(--font-sans);
}

/* ── Süverkrüp · Typography scale ──────────────────────────────────
   Transcribed from the "Typography" library frame. GalanoGrotesque
   SemiBold (600) is the dominant weight; Regular (400) for body.
   Sizes/line-heights are the file's exact values — not snapped. */
:root {
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  /* Font sizes */
  --fs-display: 62px; /* page/library title */
  --fs-mega: 100px; /* oversized numerals */
  --fs-h1: 30px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 16px; /* Fließtext regular */
  --fs-small: 13px; /* Fließtext small / link / button klein */
  --fs-nav: 18px; /* navigation */
  --fs-caption: 11px;
  /* Line heights */
  --lh-h1: 40px;
  --lh-h2: 28px;
  --lh-body: 23px;
  --lh-tight: 20px;
  --lh-small: 17px;
  --lh-button: 23px;
}

/* Text-style helper classes (mirror the Typography specimen) */
.suv-h1 {
  font: var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-sans);
  color: var(--text-primary);
}

.suv-h2 {
  font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans);
  color: var(--text-primary);
}

.suv-h3 {
  font: var(--fw-semibold) var(--fs-h3)/var(--lh-body) var(--font-sans);
  color: var(--text-primary);
}

.suv-body {
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--text-body);
}

.suv-body-small {
  font: var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-sans);
  color: var(--text-body);
}

.suv-link {
  font: var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-sans);
  color: var(--text-link);
  text-decoration: underline;
}

.suv-nav {
  font: var(--fw-semibold) var(--fs-nav)/1.2 var(--font-sans);
}

.suv-caption {
  font: var(--fw-regular) var(--fs-caption)/1.4 var(--font-sans);
  color: var(--text-muted);
}

/* ── Süverkrüp · Spacing, radius, shadow, motion ───────────────────
   Values observed across the library (auto-layout gaps, radii, the
   input & snackbar shadow recipes). */
:root {
  /* Spacing (auto-layout gaps / padding seen in file) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 52px;
  --space-10: 70px;
  /* Radius */
  --radius-xs: 2px; /* checkbox container */
  --radius-sm: 5px; /* small button group frame */
  --radius-md: 8px; /* buttons, inputs, snackbars */
  --radius-lg: 16px; /* cards / containers */
  --radius-pill: 32px; /* colour pills / rounded chips */
  --radius-round: 100px;
  --radius-screen: 70px; /* phone-screen top corners */
  /* Elevation */
  --shadow-input: inset 0 0 0 1px var(--suv-line), 0px 7px 64px 0px rgba(0,0,0,0.07);
  --shadow-input-error: inset 0 0 0 1px var(--suv-error-soft), 0px 7px 64px 0px rgba(0,0,0,0.07);
  --shadow-snackbar: 0px 4px 4px 0px rgba(0,0,0,0.25);
  --shadow-card: 0px 7px 64px 0px rgba(0,0,0,0.07);
  --shadow-spec: inset 0 0 0 1px #79747E; /* specimen outline */
  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

:root {
  --text-link: var(--suv-navy-mid);
}

:root {
  --wa-font-family-body: var(--font-sans);
  --wa-font-family-heading: var(--font-sans);
  --wa-font-family-longform: var(--font-sans);
  --wa-color-text-normal: var(--text-body);
  --wa-color-text-quiet: var(--text-muted);
  --wa-color-text-link: var(--text-link);
  --wa-color-surface-default: var(--surface-card);
  --wa-color-surface-border: var(--border-subtle);
  --wa-color-focus: var(--action-accent);
  --wa-color-brand-fill-loud: var(--action-default);
  --wa-color-brand-border-loud: var(--action-default);
  --wa-color-brand-on-loud: var(--text-on-brand);
  --wa-color-success-fill-loud: var(--suv-success-icon);
  --wa-color-success-border-loud: var(--suv-success);
  --wa-color-success-on-quiet: var(--suv-success);
  --wa-color-danger-fill-loud: var(--suv-error);
  --wa-color-danger-border-loud: var(--suv-error);
  --wa-color-danger-on-quiet: var(--suv-error);
  --wa-form-control-label-font-weight: var(--fw-semibold);
  --wa-form-control-border-color: var(--border-subtle);
  --wa-form-control-placeholder-color: var(--text-muted);
  --wa-border-radius-s: var(--radius-xs);
  --wa-border-radius-m: var(--radius-sm);
  --wa-border-radius-l: var(--radius-md);
}

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

body,
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
}

.page {
  padding: var(--space-7);
}
.page__content {
  display: grid;
  gap: var(--space-5);
}
.page__content--narrow {
  max-width: 1100px;
}
.page__back {
  justify-self: start;
  font-size: var(--fs-small);
  color: var(--text-link);
  text-decoration: none;
}
.page__back:hover {
  text-decoration: underline;
}
.page__note {
  margin-block-start: var(--space-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .page {
    padding: var(--space-5) var(--space-4);
  }
}
.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
}
.auth__card {
  width: 100%;
  max-width: 26rem;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.auth__title {
  margin-block-end: var(--space-2);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h1);
  color: var(--text-primary);
}
.auth__intro {
  margin-block-end: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.auth__form {
  display: grid;
  gap: var(--space-5);
}
.auth__submit {
  width: 100%;
  margin-block-start: var(--space-5);
}
.auth__note {
  margin-block-start: var(--space-6);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.shell {
  background: var(--surface-page);
}
.shell::part(header) {
  border-block-end: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.shell::part(navigation) {
  width: 310px;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.shell::part(main-content) {
  min-width: 0;
}
.shell__header {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
  min-height: 76px;
  padding: 0 var(--space-7);
}
.shell__logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 30px;
}
.shell__heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.shell__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 21px;
  color: var(--action-default);
}
.shell__subtitle {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.shell__navigation, .shell__navigation-footer {
  display: block;
  padding: 0;
}
.shell__toggle {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
}
.shell__collapse {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}
.shell__collapse-button, .shell__drawer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--text-muted);
  background: none;
  cursor: pointer;
}
.shell__collapse-button:hover, .shell__drawer-button:hover {
  color: var(--text-primary);
  background: var(--suv-bg-tint);
}
.shell__collapse-button:focus-visible, .shell__drawer-button:focus-visible {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}
.shell__collapse-icon {
  transition: transform var(--dur-fast) var(--ease-standard);
}
.shell__seva-icon {
  display: none;
}
.shell__customer {
  padding: var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
}
.shell__caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shell__customer-name {
  margin-block-start: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 21px;
  color: var(--action-default);
}

@media (width < 920px) {
  .shell::part(navigation-desktop) {
    display: none;
  }
}
@media (max-width: 600px) {
  .shell__header {
    gap: var(--space-4);
    padding: 0 var(--space-4);
  }
}
@media (width >= 920px) {
  .shell--collapsed::part(navigation) {
    width: 72px;
  }
  .shell__navigation-footer--collapsed .shell__customer {
    display: none;
  }
  .shell__navigation-footer--collapsed .shell__seva-icon {
    display: inline-flex;
  }
  .shell__navigation-footer--collapsed .shell__seva-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .shell__navigation-footer--collapsed .shell__toggle,
  .shell__navigation-footer--collapsed .shell__collapse {
    display: flex;
    justify-content: center;
    padding-inline: 0;
    text-align: center;
  }
}
@media (width < 920px) {
  .shell__collapse {
    display: none;
  }
}
.shell__drawer-button {
  margin-inline-start: var(--space-5);
}

.shell__collapse-button[aria-expanded=false] .shell__collapse-icon {
  transform: rotate(180deg);
}

.toast {
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
}
.toast--success {
  color: var(--text-body);
  background: color-mix(in srgb, var(--suv-success) 8%, transparent);
}
.toast--error {
  color: var(--text-body);
  background: color-mix(in srgb, var(--suv-error) 8%, transparent);
}

.navigation {
  padding-block: var(--space-5) var(--space-4);
}
.navigation__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-5) var(--space-4);
}
.navigation__caption {
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.navigation__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 44px;
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 22px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.navigation__item:hover {
  background: var(--suv-bg-tint);
}
.navigation__item[aria-current=page] {
  font-weight: var(--fw-semibold);
  color: var(--text-on-brand);
  background: var(--action-default);
}
.navigation__item--disabled {
  color: var(--text-disabled);
}
.navigation__item--disabled:hover {
  background: transparent;
}
.navigation__icon {
  flex-shrink: 0;
  font-size: var(--fs-h2);
}
.navigation__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation__hint {
  flex-shrink: 0;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 16px;
  color: var(--text-disabled);
}

@media (width >= 920px) {
  .navigation--collapsed .navigation__group {
    padding-inline: var(--space-3);
  }
  .navigation--collapsed .navigation__caption,
  .navigation--collapsed .navigation__hint {
    display: none;
  }
  .navigation--collapsed .navigation__item {
    justify-content: center;
    padding-inline: 0;
  }
  .navigation--collapsed .navigation__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.page-header {
  display: grid;
  gap: var(--space-2);
}
.page-header__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h1);
  color: var(--text-primary);
}
.page-header__intro {
  color: var(--text-muted);
}

.table {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.table--embedded {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.table__heading, .table__cell {
  padding: var(--space-4) var(--space-2);
  border-block-end: 1px solid var(--border-subtle);
  white-space: nowrap;
  vertical-align: middle;
}
.table__heading:first-child, .table__cell:first-child {
  padding-inline-start: var(--space-6);
}
.table__heading:last-child, .table__cell:last-child {
  padding-inline-end: var(--space-6);
}
.table__heading {
  text-align: start;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: var(--suv-bg-soft);
}
.table__heading[aria-sort=ascending], .table__heading[aria-sort=descending] {
  color: var(--text-primary);
}
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}
.table__sort:hover {
  color: var(--text-primary);
}
.table__sort-icon {
  font-size: var(--fs-small);
}
.table__row:hover {
  background: var(--suv-bg-tint);
}
.table__link {
  color: var(--text-link);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.table__link:hover {
  text-decoration: underline;
}
.table__main {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 21px;
  color: var(--text-primary);
}
.table__main--missing {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.table__main--quiet {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: inherit;
  color: var(--text-muted);
}
.table__detail {
  margin-block-start: var(--space-1);
  color: var(--text-muted);
}
.table__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  color: var(--text-muted);
}

.table__heading[aria-sort=ascending] .table__sort-icon {
  transform: rotate(180deg);
}

.error-message {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.error-message__heading {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h1);
  color: var(--text-primary);
}
.error-message__message {
  color: var(--text-body);
}
.error-message__home {
  margin-block-start: var(--space-2);
  color: var(--text-link);
}