/* ============================================================
   .helga-main — Content-Container (Tim 30.05.2026, Mockup-Refactor).
   ============================================================
   Loest das alte `max-w-6xl mx-auto px-6 py-8 w-full` ab. Mockup
   verlangt deutlich mehr Breite: bis 1440px Innenmaß. Padding
   32px links/rechts auf Desktop, 16px auf Mobile.
   ============================================================ */
.helga-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px var(--helga-app-gutter, clamp(20px, 1.6vw, 30px)) 48px;
  box-sizing: border-box;
}
@supports (padding: max(0px)) {
  .helga-main {
    padding-left: max(var(--helga-app-gutter, 24px), env(safe-area-inset-left));
    padding-right: max(var(--helga-app-gutter, 24px), env(safe-area-inset-right));
  }
}
.helga-main > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.helga-main > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl)[class*="px-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 768px) {
  .helga-main {
    padding: 16px var(--helga-app-gutter-mobile, 16px) 32px;
  }
  @supports (padding: max(0px)) {
    .helga-main {
      padding-left: max(var(--helga-app-gutter-mobile, 16px), env(safe-area-inset-left));
      padding-right: max(var(--helga-app-gutter-mobile, 16px), env(safe-area-inset-right));
    }
  }
}

/* ============================================================
   HELGA Post-Cockpit Theme (Tim 28.05.2026, Designer-Vorlage).
   ============================================================
   Eine Stelle fuer alle Farben + Spacing + Schatten. Andere
   Templates und JS-Bubbles greifen via CSS-Variablen darauf zu.
   Wenn Du eine Farbe aendern willst, aenderst Du sie hier — und
   sie ist sofort in der ganzen App.

   Layer-Reihenfolge: app.css (Tailwind) → helga_theme.css (hier).
   Wir ueberschreiben Tailwind-Defaults gezielt.

   Grund-Idee (Designer):
     * Lila  = HELGA, Analyse, Orientierung, Navigation
     * Orange = naechste Handlung des Nutzers
     * Schwarz/Ink = Text, Struktur, Seriositaet
     * High-Contrast-Karten (dunkle Hero-Tiles auf hellem Paper)
     * Keine Pastellflaechen. Keine Rahmenlinien. Nur Schatten +
       Flaechenkontrast + Abstand.
   ============================================================ */

:root {
  /* ---- Marke (Navy + Cream) ----
     Historische Variablen-Namen bleiben bestehen, aber App-Aktionen laufen
     auf HELGA-Navy. Echte Warnungen nutzen die Statusfarben unten. */
  --helga-purple:        #000066;   /* Navy — Primaerfarbe / Brand */
  --helga-purple-dark:   #00004d;   /* Navy-dunkler — Sidebar-BG */
  --helga-purple-soft:   rgba(0, 0, 102, 0.08);   /* Hover-Tint */
  --helga-orange:        #000066;   /* Legacy-Alias: HELGA Navy */
  --helga-orange-dark:   #00004d;   /* Legacy-Alias: Hover/Active */

  /* ---- Neutrale Grundpalette ---- */
  --helga-ink:           #17131f;
  --helga-ink-soft:      #2a2530;
  --helga-muted:         #77717d;
  /* Tim 30.05.2026 (Rebrand): Cream als Body-BG. Cards bleiben weiss
     mit dezenter Border — schoener Editorial-Kontrast.
     War vorher kurz auf reinem Weiss, davor warmer Sand #f4efe6. */
  --helga-paper:         #F8F3EC;   /* Body-BG: Cream (Mockup 30.05.2026) */
  --helga-paper-soft:    #FAF7F2;   /* leicht heller, fuer Section-BG */
  --helga-terracotta-soft: rgba(0, 0, 102, 0.08); /* Legacy-Alias: Navy-Tint */
  --helga-terracotta-tint: rgba(0, 0, 102, 0.12); /* Legacy-Alias: Active-BG */
  --helga-orange-hover:  #00004d;   /* Legacy-Alias: Button-Hover */
  --helga-text-muted:    #667085;   /* sekundaerer Text (Mockup) */
  --helga-white:         #ffffff;
  --helga-line:          rgba(0,0,0,0.08);  /* Notlinien, wenn ueberhaupt */
  --helga-surface-sunk:  rgba(0,0,0,0.035); /* leicht eingelassene Flaeche */

  /* ---- Zustaende (nur fuer echte Status, nicht Deko) ---- */
  --helga-danger:        #b42318;
  --helga-warning:       #b85e00;
  --helga-success:       #1e7a3a;

  /* ---- Schatten (kein Border, nur Schatten) ---- */
  --helga-shadow-soft:   0 8px 24px rgba(0,0,0,0.06);
  --helga-shadow-card:   0 12px 32px rgba(0,0,0,0.07);
  --helga-shadow-hero:   0 18px 48px rgba(0,0,0,0.12);
  --helga-shadow-floating: 0 24px 60px rgba(0,0,0,0.18);

  /* ---- Typografie ---- */
  --helga-font-sans:     "Manrope", system-ui, -apple-system, sans-serif;
  --helga-text-base:     17px;
  --helga-leading-base:  1.55;

  /* ---- App-Chrome: moderner, kuehler Neutralfond statt Cream ---- */
  --helga-app-shell:     #f6f7fb;
  --helga-chrome-bg:     #ffffff;
  --helga-sidebar-bg:    #f2f4f8;
  --helga-sidebar-fg:    var(--helga-ink);
  --helga-sidebar-fg-dim:rgba(23,19,31,0.64);
  --helga-sidebar-hover: rgba(0,0,102,0.07);   /* Navy-Tint Hover */
  --helga-sidebar-active:rgba(0,0,102,0.11);
  --helga-sidebar-width: 260px;
  --helga-sidebar-rail-width: 68px;
  --helga-app-gutter:    clamp(20px, 1.6vw, 30px);
  --helga-app-gutter-mobile: 16px;
}

/* ============================================================
   Globale Resets / Defaults
   ============================================================ */

body {
  background: var(--helga-paper);
  color: var(--helga-ink);
  font-family: var(--helga-font-sans);
  font-size: var(--helga-text-base);
  line-height: var(--helga-leading-base);
}
body.has-sidebar,
body.has-sidebar .helga-app-root {
  background: var(--helga-app-shell);
}
body.has-sidebar .helga-app-root {
  padding-left: var(--helga-sidebar-width, 260px);
  transition: padding-left .2s ease;
}
body.has-sidebar.sidebar-collapsed .helga-app-root {
  padding-left: var(--helga-sidebar-rail-width, 68px);
}
body.has-sidebar .helga-app-inline-shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--helga-app-gutter) !important;
  padding-right: var(--helga-app-gutter) !important;
}
@supports (padding: max(0px)) {
  body.has-sidebar .helga-app-inline-shell {
    padding-left: max(var(--helga-app-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--helga-app-gutter), env(safe-area-inset-right)) !important;
  }
}
@media (max-width: 768px) {
  body.has-sidebar .helga-app-inline-shell {
    padding-left: var(--helga-app-gutter-mobile) !important;
    padding-right: var(--helga-app-gutter-mobile) !important;
  }
  @supports (padding: max(0px)) {
    body.has-sidebar .helga-app-inline-shell {
      padding-left: max(var(--helga-app-gutter-mobile), env(safe-area-inset-left)) !important;
      padding-right: max(var(--helga-app-gutter-mobile), env(safe-area-inset-right)) !important;
    }
  }
}

/* ============================================================
   Masthead (Tim 29.05.2026, v2): sticky 80px ueber die volle Breite.
   Fuer eingeloggte User: SELBES Lila wie die Sidebar — kein Farb-
   bruch mehr zwischen Header und linker Spalte. Fuer nicht-eingeloggte
   User (Landing): bleibt paper/weiss, denn ohne Sidebar gibt es
   keinen Farbbruch zu vermeiden.
   ============================================================ */
.helga-masthead {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--helga-white);
  box-shadow: var(--helga-shadow-soft);
  z-index: 50;             /* hoeher als Sidebar (20) */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
}
.helga-masthead-top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  /* app.css hat hier `max-width:1440px; margin:0 auto` — das zentriert
     den inneren Block und versetzt das Logo. Tim 29.05.2026: explizit
     ausheben, damit der Logo-Slot wirklich bei left:0 sitzt. */
  max-width: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.helga-masthead-logo img {
  height: 44px;
  width: auto;
}
.helga-masthead-trail {
  flex: 1;
  min-width: 0;
}
.helga-masthead-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.public-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--helga-purple);
  border-radius: 4px;
  background: var(--helga-purple);
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.public-login-link:hover {
  border-color: #20205c;
  background: #20205c;
  color: #fff !important;
}
.public-login-link:focus-visible {
  outline: 3px solid rgba(217, 100, 51, 0.35);
  outline-offset: 3px;
}

/* Eingeloggter User: Masthead in Cream wie die Sidebar — beide hell,
   nahtloser Uebergang. Tim 30.05.2026: zurueck auf positiv.
   ACHTUNG: der Masthead lebt im .helga-app-root, der via
   `padding-left: 260px` den ganzen Content nach rechts schiebt. Damit
   der Masthead trotzdem ueber die VOLLE Browserbreite geht (sonst klafft
   oben links eine cream-Cream-Ecke), holen wir ihn per negative margin
   wieder ueber die Sidebar-Spalte. */
body.has-sidebar .helga-masthead {
  background: var(--helga-chrome-bg) !important;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.08) !important;
  border: none !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  margin-left: calc(-1 * var(--helga-sidebar-width, 260px));
  width: calc(100% + var(--helga-sidebar-width, 260px));
}

body.has-sidebar.sidebar-collapsed .helga-masthead {
  margin-left: 0 !important;
  width: 100% !important;
}

body.has-sidebar.sidebar-collapsed .helga-masthead__logo-slot {
  display: none;
}

body.has-sidebar .helga-masthead,
body.has-sidebar .helga-masthead a,
body.has-sidebar .helga-masthead button {
  color: var(--helga-ink);
}
body.has-sidebar .helga-masthead a:hover,
body.has-sidebar .helga-masthead button:hover {
  color: var(--helga-purple);
  background: var(--helga-sidebar-hover) !important;
}
/* Avatar-Bubble auf Cream: Navy-Initialen auf dezentem Tint */
body.has-sidebar .helga-masthead details summary {
  background: var(--helga-sidebar-hover) !important;
  color: var(--helga-purple) !important;
}

/* Sidebar startet UNTER dem Masthead. Weil Masthead und Sidebar die
   GLEICHE dunkel-lila Farbe haben, wirkt der Uebergang nahtlos — kein
   sichtbarer Farbbruch. Padding-top auf 0 — sonst klafft ein leerer
   Streifen ueber dem ersten Nav-Item.
   Logo lebt jetzt im Masthead-linken Bereich (siehe base.html). */
.helga-sidebar {
  top: 80px !important;
  padding-top: 0 !important;
  height: calc(100vh - 80px);
  box-shadow: none !important;
  border: none !important;
}

/* Logo-Slot im Masthead — gleich breit wie die Sidebar, Logo horizontal
   zentriert in dieser 260px-Spalte → sitzt damit optisch mittig zur
   Seitenleiste darunter. Tim 29.05.2026. */
.helga-masthead__logo-slot {
  width: var(--helga-sidebar-width, 260px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.helga-masthead__logo-slot img {
  height: 48px;
  width: auto;
  display: block;
}

/* Breadcrumb-Bereich und Icons brauchen jetzt eigenes Padding,
   weil das Masthead padding:0 hat. */
.helga-masthead-trail {
  padding-left: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.helga-masthead-icons {
  padding-right: 28px;
}

/* SEARCH-BOX im Masthead (Mockup-Stil): kompaktes Input mit Lupe links
   und ⌘K-Hint rechts. Bleibt zentriert und maximal 480px breit. */
.helga-masthead__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--helga-line);
  border-radius: 12px;
  padding: 8px 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.helga-masthead__search:focus-within {
  border-color: var(--helga-orange);
  box-shadow: 0 0 0 3px var(--helga-terracotta-soft);
}
.helga-masthead__search svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--helga-text-muted);
}
.helga-masthead__search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--helga-ink);
  min-width: 0;
}
.helga-masthead__search input::placeholder {
  color: var(--helga-text-muted);
}
.helga-masthead__search-kbd {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--helga-paper-soft);
  color: var(--helga-text-muted);
  border: 1px solid var(--helga-line);
}
@media (max-width: 1024px) {
  .helga-masthead__search { display: none; }
}

/* USER-PILL im Masthead (Mockup: Avatar + Name + „Konto") */
.helga-masthead__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--helga-line);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.helga-masthead__user::-webkit-details-marker { display: none; }
.helga-masthead__user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--helga-purple);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.helga-masthead__user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.helga-masthead__user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--helga-purple);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helga-masthead__user-sub {
  font-size: 11px;
  color: var(--helga-text-muted);
}
@media (max-width: 600px) {
  .helga-masthead__user-text { display: none; }
}

/* ============================================================
   Burger-Button im Masthead (Tim 29.05.2026):
   Default versteckt (Desktop hat feste Sidebar). Auf <= 1024px
   sichtbar als 3-Strich-Icon, Klick öffnet/schliesst Sidebar.
   ============================================================ */
.helga-masthead__burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s ease;
  /* iOS Safari: tap-highlight + touch-action + z-index, sonst werden
     Taps von der sticky-Masthead-Schicht verschluckt. */
  -webkit-tap-highlight-color: rgba(255,255,255,0.18);
  -webkit-touch-callout: none;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
}
.helga-masthead__burger:hover {
  background: var(--helga-sidebar-hover);
}
.helga-masthead__burger > span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--helga-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Open-State: Strichkreuz */
body:not(.sidebar-collapsed) .helga-masthead__burger > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body:not(.sidebar-collapsed) .helga-masthead__burger > span:nth-child(2) {
  opacity: 0;
}
body:not(.sidebar-collapsed) .helga-masthead__burger > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Mobile/Tablet (<= 1024px): Burger sichtbar, Sidebar als
   Overlay, app-root ohne padding-left.
   ============================================================ */
@media (max-width: 1024px) {
  .helga-masthead__burger {
    display: inline-flex;
  }

  /* Search/Trail entfallen in kompakten Ansichten. Die Aktionsgruppe
     bleibt trotzdem am rechten Rand statt direkt hinter dem Logo. */
  .helga-masthead-icons {
    margin-left: auto;
  }

  /* Masthead darf nicht mehr mit negative-margin ueber die Sidebar
     gepullt werden — die Sidebar ist auf Mobile ein Overlay, nicht
     ein L-Schenkel. */
  body.has-sidebar .helga-masthead {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Logo-Slot nicht mehr 260px fest, sondern auto — sonst nimmt er
     die halbe Mobile-Breite. */
  .helga-masthead__logo-slot {
    width: auto;
    padding-left: 8px;
  }
  .helga-masthead__logo-slot img {
    height: 36px;
  }

  /* Breadcrumb-Trail im Masthead-Bereich auf Mobile verstecken —
     er lebt eh schon im Body (Tim 29.05.2026), oben braucht ihn keiner. */
  .helga-masthead-trail {
    display: none;
  }

  /* App-Root kein Side-Padding (existing rule wird verstaerkt). */
  body.has-sidebar .helga-app-root,
  body.has-sidebar.sidebar-collapsed .helga-app-root {
    padding-left: 0;
  }

  /* Der Masthead-Button oeffnet den Drawer. Die Desktop-Reopen-Lasche
     wuerde auf Mobile zusaetzlich Platz und einen zweiten Einstieg zeigen. */
  .helga-sidebar-reopen {
    display: none !important;
  }

  /* Sidebar = klassischer Mobile-Drawer (Tim 29.05.2026):
     - top:0 (UEBER dem Masthead, nicht darunter — so wie es bei
       Material Design / Telegram / Slack ist)
     - z-index 100, ueber dem Masthead (50) UND dem Backdrop (90)
     - 100dvh wegen iOS-URL-Bar
     - voll versteckt wenn collapsed, voll sichtbar wenn nicht
     - kein Schatten wenn collapsed (sonst sieht man einen Streifen
       am linken Rand selbst bei translateX(-100%)) */
  .helga-sidebar {
    top: 0 !important;
    height: 100dvh !important;
    z-index: 100;
    -webkit-overflow-scrolling: touch;
    transition: transform .25s ease;
    will-change: transform;
  }
  .helga-sidebar:not(.is-collapsed) {
    box-shadow: 4px 0 24px rgba(0,0,0,0.45);
  }
  .helga-sidebar.is-collapsed {
    transform: translateX(-100%);
    pointer-events: none;     /* damit Off-Screen-Sidebar keine
                                 Taps absorbiert */
  }

  /* Backdrop unter der Sidebar, ueber dem Content. Click schliesst. */
  .helga-sidebar-backdrop {
    z-index: 90;
    background: rgba(0,0,0,0.45);
  }
  body:not(.sidebar-collapsed) .helga-sidebar-backdrop {
    display: block;
  }
  /* iOS: Body-Scroll lock waehrend Sidebar offen ist. */
  body.has-sidebar:not(.sidebar-collapsed) {
    overflow: hidden;
  }
}

/* ============================================================
   Body-Breadcrumb (Tim 29.05.2026): wandert aus dem dunkel-lila
   Masthead in den Content-Bereich. Lesbar auf Paper-BG.
   ============================================================ */
.helga-breadcrumb-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding: 12px 18px;
  background: var(--helga-surface-sunk);
  font-size: 14px;
  color: var(--helga-ink);
  flex-wrap: wrap;
}
.helga-breadcrumb-body__label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--helga-purple);
  font-weight: 500;
  flex-shrink: 0;
}
.helga-breadcrumb-body__trail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Wenn die Page keinen Breadcrumb hat, ist der trail leer → den ganzen
   Wrapper verstecken, damit nicht nur „Du bist hier:" alleine steht. */
.helga-breadcrumb-body:not(:has(.helga-breadcrumb-body__trail > *)) {
  display: none;
}
/* Die Tailwind-Klassen im _breadcrumb.html Ribbon sind hellgrau (text-ink-500
   etc.) — auf Paper-BG funktioniert das, aber auf var(--helga-surface-sunk)
   minimal abdunkeln, damit es klar lesbar bleibt. */
.helga-breadcrumb-body__trail a,
.helga-breadcrumb-body__trail .text-ink-500,
.helga-breadcrumb-body__trail .text-ink-600 {
  color: var(--helga-ink) !important;
  text-decoration: none;
}
.helga-breadcrumb-body__trail a:hover {
  color: var(--helga-purple) !important;
}
.helga-breadcrumb-body__trail .text-ink-400 {
  color: var(--helga-muted) !important;
}
.helga-breadcrumb-body__trail .text-ink-900 {
  color: var(--helga-ink) !important;
  font-weight: 500;
}

/* ============================================================
   Gesendete-Mail-Akkordeon im Schriftverkehr (Tim 29.05.2026):
   summary versteckt das Default-Triangle, Toggle-Labels schalten
   sich gegenseitig je nach open/closed.
   ============================================================ */
.helga-sent-mail summary::-webkit-details-marker { display: none; }
.helga-sent-mail summary { list-style: none; }
.helga-sent-mail[open] .helga-sent-mail__preview { display: none; }
.helga-sent-mail[open] .helga-sent-mail__toggle  { display: none; }
.helga-sent-mail:not([open]) .helga-sent-mail__body { display: none; }
.helga-sent-mail:not([open]) .helga-sent-mail__toggle-close { display: none; }

/* bg-paper-50/100 werden weiter unten zusammen mit den anderen
   Pastell-Klassen neutralisiert. */

/* Helga-Pastell-Klassen (helga-50/100, lila-50/100, amber-50/100,
   emerald-50/100) → entwerten als reines Weiss mit subtiler
   Flaechenkante. Designer-Regel: „Zustand ueber Textfarbe + Balken,
   nicht ueber Pastellflaechen".

   ACHTUNG: bewusst .bg-helga-50 (mit Punkt, Klassen-Match) und NICHT
   [class*="bg-helga-50"] (Substring-Match) — letzteres haette auch
   .bg-helga-500 (Primaerfarbe!) getroffen → Buttons werden weiss.
   Tim 29.05.2026 — gemeldet als „weisse Box statt Mit-Helga-sprechen-
   Button". */
.bg-helga-50,
.bg-helga-100,
.bg-lila-50,
.bg-lila-100,
.bg-amber-50,
.bg-amber-100,
.bg-emerald-50,
.bg-emerald-100,
.bg-rose-50,
.bg-rose-100,
.bg-slate-50,
.bg-slate-100,
.bg-paper-50,
.bg-paper-100 {
  background-color: var(--helga-white) !important;
}

/* ============================================================
   Karten (Post-Cockpit-Stil): Weiss, kein Border, weicher Schatten
   ============================================================ */

.helga-card,
.helga-todo-box,
.rounded-xl,
.rounded-2xl {
  border: none !important;
  box-shadow: var(--helga-shadow-card);
}

/* Tailwind-Border-Klassen, die wir nicht wollen, killen wir gezielt
   auf Karten-Containern. (Nicht global — sonst verschwinden auch
   Form-Field-Borders.) */
.helga-card[class*="border"],
.helga-todo-box[class*="border"] {
  border: none !important;
}

/* Hero-Card: schwarz / ink — High-Contrast-Akzent.
   Tim 29.05.2026: gleiche Padding/Shadow-Magnitude wie die Cards
   darunter — sonst „laufen Hero und 3-Spalten nicht schoen". Der
   Designer-Dummy nimmt durchgaengig 28px Inset; Hero darf gerne
   etwas mehr atmen, aber NIE deutlich anders als die Cards. */
.helga-hero {
  background: var(--helga-ink);
  color: var(--helga-white);
  box-shadow: var(--helga-shadow-card);
  padding: 28px;
  width: 100%;
  box-sizing: border-box;
}

/* Alle Cards bekommen einheitliches Innen-Padding, damit Hero und
   3-Spalten harmonisch laufen — egal welcher Container. Inline-Padding
   in den Templates ueberschreibt das, aber das ist meist genau das
   Problem (uneinheitliche Werte). */
.helga-card {
  padding: 28px;
  box-sizing: border-box;
  min-width: 0;       /* damit lange Texte in Grid-Spalten umbrechen
                         statt die Card breiter zu schieben */
  /* Tim 30.05.2026: Body ist jetzt weiss → Cards brauchen explizit
     weissen Hintergrund + Border, sonst verschwinden sie im BG. */
  background: var(--helga-white);
  border: 1px solid var(--helga-line);
}

/* ============================================================
   Cockpit-Body Wrapper — garantiert dass Hero und 3-Spalten EXAKT
   gleich breit sind, auch auf Responsive. Tim 29.05.2026.
   ============================================================ */
.helga-cockpit-body {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
.helga-cockpit-body > .helga-hero {
  width: 100%;
  display: block;
}
.helga-cockpit-grid {
  width: 100%;
  box-sizing: border-box;
}
.helga-cockpit-grid > .helga-card {
  min-width: 0;
  max-width: 100%;
}
.helga-hero h1,
.helga-hero h2,
.helga-hero h3 {
  color: var(--helga-white);
}
.helga-hero p,
.helga-hero .helga-hero-sub {
  color: rgba(255,255,255,0.72);
}

/* ============================================================
   Buttons — Designer-Logik
   ============================================================ */

.helga-btn-primary {
  background: var(--helga-orange);
  color: var(--helga-white);
  padding: 12px 22px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: var(--helga-shadow-soft);
  transition: background 0.15s ease;
}
.helga-btn-primary:hover { background: var(--helga-orange-dark); }

.helga-btn-purple {
  background: var(--helga-purple);
  color: var(--helga-white);
  padding: 12px 22px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: var(--helga-shadow-soft);
  transition: background 0.15s ease;
}
.helga-btn-purple:hover { background: var(--helga-purple-dark); }

.helga-btn-secondary {
  background: var(--helga-white);
  color: var(--helga-ink);
  padding: 12px 22px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: var(--helga-shadow-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.helga-btn-secondary:hover {
  background: #ece6da;          /* deutlich sichtbares Paper-Darken */
  color: var(--helga-ink);
}

/* Icon-only Button (Bleistift, Schliessen, ...) — dezent statt
   aufdringlich. Tim 29.05.2026. */
.helga-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--helga-muted);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.helga-icon-btn:hover {
  background: var(--helga-surface-sunk);
  color: var(--helga-ink);
}

/* Im dunklen Hero: weisser Button mit dunklem Hover-Feedback */
.helga-hero .helga-btn-secondary:hover {
  background: rgba(255,255,255,0.85);
  color: var(--helga-ink);
}
.helga-hero .helga-btn-primary:hover {
  background: var(--helga-orange-dark);
}

/* ============================================================
   Sidebar: heller, kuehler App-Chrome-Stil
   ============================================================ */

.helga-sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow-y: auto;
  transition: transform .2s ease;
  background: var(--helga-sidebar-bg) !important;
  color: var(--helga-sidebar-fg) !important;
  width: var(--helga-sidebar-width) !important;
  padding: 28px 0 !important;
  /* Tim 30.05.2026: Sidebar und Body sind beide Cream — dezente
     rechte Trennlinie damit man die Spalten unterscheidet. */
  border: none !important;
  border-right: 1px solid rgba(17, 24, 39, 0.08) !important;
}
.helga-sidebar__head {
  padding: 0 24px 28px 24px;
  border-bottom: none;
}
.helga-sidebar__title {
  color: var(--helga-sidebar-fg-dim) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.helga-sidebar__toggle {
  position: absolute;
  top: 18px;
  right: 14px;
  padding: 4px 6px;
  border: none;
  background: none;
  color: var(--helga-sidebar-fg-dim) !important;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* HELGA-Brand-Block oben in der Sidebar (neu, siehe _sidebar.html) */
.helga-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 28px 24px;
}
.helga-sidebar__brand-mark {
  height: 44px;
  width: auto;
  /* Logo in Originalfarben — laut Tim's Memory: nie umfarben. */
}
.helga-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.helga-sidebar__brand-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--helga-sidebar-fg);
  letter-spacing: 0.02em;
}
.helga-sidebar__brand-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--helga-sidebar-fg-dim);
  margin-top: 2px;
}

/* Navigation-Items im neuen Stil */
.helga-sidebar__nav {
  padding: 0 12px;
}
.helga-sidebar__nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--helga-sidebar-fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  border-radius: 16px !important;        /* Mockup: rounded-2xl */
  transition: background 0.12s ease, color 0.12s ease;
}
.helga-sidebar__nav-item:hover {
  background: var(--helga-sidebar-hover);
  color: var(--helga-sidebar-fg);
}
/* Aktiv-Stil nach Mockup: Terracotta auf Terracotta-Tint, Icon + Text orange. */
.helga-sidebar__nav-item.is-active {
  background: var(--helga-terracotta-tint) !important;
  color: var(--helga-orange) !important;
  font-weight: 800;
}
.helga-sidebar__nav-item.is-active .helga-sidebar__nav-icon {
  color: var(--helga-orange);
}
/* Badge auf aktivem Item: Orange-on-White, sonst Navy-on-White */
.helga-sidebar__nav-item.is-active .helga-sidebar__nav-badge {
  background: var(--helga-orange);
  color: #fff;
}
.helga-sidebar__nav-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.helga-sidebar__nav-label {
  flex: 1;
  margin-left: 14px;
}
.helga-sidebar__nav-badge {
  /* Tim 30.05.2026: Sidebar ist Cream — Badge muss invertiert,
     sonst kein Kontrast. Navy bg + weisser Text. */
  background: var(--helga-purple);
  color: var(--helga-white);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
}

/* Schreibtische-Sub-Liste (bleibt unten, ruhiger als heute) */
.helga-sidebar__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.helga-sidebar__item {
  margin: 0;
}
.helga-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px 10px 28px;
  color: var(--helga-sidebar-fg-dim) !important;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.12s ease, background 0.12s ease;
}
.helga-sidebar__link:hover {
  background: var(--helga-sidebar-hover);
  color: var(--helga-sidebar-fg) !important;
}
.helga-sidebar__accordion {
  margin: 4px 0 8px;
}
.helga-sidebar__create-link {
  margin-top: 4px;
  padding: 8px 14px;
}
.helga-sidebar__create-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--helga-line);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.helga-sidebar__item.is-active > .helga-sidebar__link {
  color: var(--helga-sidebar-fg) !important;
  background: var(--helga-sidebar-hover);
}
.helga-sidebar__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helga-sidebar__count {
  font-size: 11px;
  background: rgba(0,0,102,0.08);
  color: var(--helga-sidebar-fg);
  padding: 1px 7px;
}
.helga-sidebar__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.helga-sidebar__bullet--rot    { background: var(--helga-danger); }
.helga-sidebar__bullet--amber  { background: var(--helga-warning); }
.helga-sidebar__bullet--gelb   { background: var(--helga-warning); opacity: 0.6; }
.helga-sidebar__bullet--grau   { background: rgba(0,0,0,0.18); }
.helga-sidebar__bullet--demo   { background: var(--helga-orange); }

/* Kontext-Hilfe: kleine Begriffsklaerung direkt am Ort. */
.helga-context-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: baseline;
  z-index: 20;
}
.helga-context-help__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--helga-orange);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}
.helga-context-help__button:hover,
.helga-context-help__button:focus-visible {
  border-color: rgba(198, 107, 71, 0.55);
  background: var(--helga-terracotta-tint);
  outline: none;
}
.helga-context-help__button sup {
  position: static;
  font-size: 11px;
  line-height: 1;
}
.helga-context-help__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  display: none;
  width: min(280px, calc(100vw - 40px));
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  background: #fff;
  box-shadow: 0 18px 48px rgba(17, 16, 20, 0.14);
  color: var(--helga-muted);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  border-radius: 8px;
}
.helga-context-help:hover .helga-context-help__panel,
.helga-context-help:focus-within .helga-context-help__panel {
  display: block;
}
.helga-context-help.is-flipped .helga-context-help__panel {
  left: auto;
  right: 0;
}
.helga-help-heading {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* Aktenordner-Sub-Liste unter dem aktiven Schreibtisch — die
   Klassen waren bisher nur HTML-Marker ohne CSS, erbten vom Default-
   <a>-Style. Auf hellem Sidebar-BG sahen sie deshalb gespenstisch
   weiss aus. Tim 30.05.2026. */
.helga-sidebar__sublist {
  list-style: none;
  padding: 2px 0 2px 10px;
  margin: 6px 0 10px 34px;
  border-left: 1px solid rgba(0, 0, 102, 0.12);
}
.helga-sidebar__subitem {
  margin: 0;
}
.helga-sidebar__sublink {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  border-radius: 8px;
  color: var(--helga-sidebar-fg-dim) !important;
  text-decoration: none !important;
  font-size: 13px;
  transition: color 0.12s ease, background 0.12s ease;
}
.helga-sidebar__sublink::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(0, 0, 102, 0.14);
}
.helga-sidebar__sublink:hover {
  color: var(--helga-sidebar-fg) !important;
  background: var(--helga-sidebar-hover);
}
.helga-sidebar__subitem.is-active > .helga-sidebar__sublink {
  color: var(--helga-orange) !important;
  background: var(--helga-sidebar-active);
  font-weight: 800;
}
.helga-sidebar__sublabel {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helga-sidebar__subcount {
  font-size: 11px;
  color: var(--helga-sidebar-fg-dim);
  padding: 1px 6px;
  flex-shrink: 0;
}
.helga-sidebar__subsublist {
  list-style: none;
  margin: 3px 0 6px 18px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid rgba(0, 0, 102, 0.10);
}
.helga-sidebar__subsubitem {
  margin: 0;
}
.helga-sidebar__subsublink {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--helga-sidebar-fg-dim) !important;
  text-decoration: none !important;
  font-size: 12px;
  transition: color 0.12s ease, background 0.12s ease;
}
.helga-sidebar__subsublink:hover {
  color: var(--helga-sidebar-fg) !important;
  background: var(--helga-sidebar-hover);
}
.helga-sidebar__subsubitem.is-active > .helga-sidebar__subsublink {
  color: var(--helga-orange) !important;
  background: var(--helga-terracotta-tint);
  font-weight: 800;
}
.helga-sidebar__subsubmarker {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  flex: 0 0 auto;
}
.helga-sidebar__subsublabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer-Box „X braucht Aufmerksamkeit" (neu) */
.helga-sidebar__attention {
  margin: 28px 20px 0 20px;
  background: rgba(0,0,102,0.06);
  padding: 16px 18px;
  box-shadow: var(--helga-shadow-soft);
}
.helga-sidebar__attention-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--helga-sidebar-fg-dim);
  margin-bottom: 4px;
}
.helga-sidebar__attention-count {
  font-size: 32px;
  font-weight: 500;
  color: var(--helga-sidebar-fg);
  line-height: 1.1;
}
.helga-sidebar__attention-sub {
  font-size: 13px;
  color: var(--helga-sidebar-fg-dim);
  margin-top: 2px;
}

/* Section-Caption (Mockup: „ARBEITSFLUSS" / „WERKZEUGE" — pt 14px,
   ml 16px, fett, dezent-muted, oben 24px Luft) */
.helga-sidebar__section-head {
  padding: 24px 16px 8px 16px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--helga-text-muted);
  font-weight: 800;
}
.helga-sidebar__section-head:first-of-type { padding-top: 8px; }

/* Akkordeon (Schreibtische): Tim 29.05.2026 — natives <details>.
   Browser uebernimmt open/close komplett, JS macht nur Cookie-Sync.
   Kein Race-Condition mehr moeglich. */
.helga-sidebar__details {
  display: block;
}
.helga-sidebar__details > summary {
  list-style: none;       /* Default-Pfeil weg */
  cursor: pointer;
}
.helga-sidebar__details > summary::-webkit-details-marker {
  display: none;          /* Safari/iOS-Pfeil weg */
}
.helga-sidebar__details > summary::marker {
  content: '';            /* moderne Browser */
}
.helga-sidebar__nav-chevron {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
/* Chevron rotiert ueber details[open] statt JS-style-Manipulation */
.helga-sidebar__details[open] .helga-sidebar__nav-chevron {
  transform: rotate(180deg);
}

/* Toggle-Element braucht touch-action für sauberen iOS-Tap. */
@media (min-width: 1024px) {
  body.has-sidebar.sidebar-collapsed .helga-sidebar {
    width: var(--helga-sidebar-rail-width) !important;
    overflow: visible;
    padding-inline: 0 !important;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    overflow: visible;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__section-head,
  body.has-sidebar.sidebar-collapsed .helga-sidebar__accordion,
  body.has-sidebar.sidebar-collapsed .helga-sidebar__list,
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-chevron {
    display: none !important;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-item {
    position: relative;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 0 8px;
    padding: 0;
    border-radius: 12px !important;
    overflow: visible;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-icon {
    width: 21px;
    height: 21px;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 80;
    width: max-content;
    max-width: 260px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--helga-ink);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(4px, -50%);
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-item:hover .helga-sidebar__nav-label,
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-item:focus-within .helga-sidebar__nav-label {
    opacity: 1;
    transform: translate(0, -50%);
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__nav-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1.35;
    border: 2px solid var(--helga-sidebar-bg);
    border-radius: 999px;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__toggle {
    right: 10px !important;
    color: var(--helga-sidebar-fg-dim) !important;
  }
  body.has-sidebar.sidebar-collapsed .helga-sidebar__toggle-icon {
    display: inline-block;
    transform: rotate(180deg);
  }
}

.helga-sidebar__nav-toggle {
  -webkit-tap-highlight-color: rgba(255,255,255,0.10);
  touch-action: manipulation;
}

body:not(.has-sidebar) .helga-sidebar {
  display: none;
}
.helga-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(0,0,0,.4);
}
.helga-sidebar-reopen {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 19;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 36px;
  border: none;
  background: var(--helga-purple-dark, #3b085c);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.helga-sidebar-reopen:hover,
.helga-sidebar-reopen:focus-visible {
  background: var(--helga-purple, #7417a8);
}

/* Manifest-gesteuerte Hauptnavigation fuer kompakte Mobilansichten.
   Der Drawer bleibt fuer Hierarchie und seltenere Werkzeuge zustaendig. */
.helga-mobile-nav {
  display: none;
}

@media (max-width: 1024px) {
  body.has-mobile-navigation .helga-app-root {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .helga-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: flex;
    align-items: stretch;
    padding: 6px max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    border-top: 1px solid rgba(17, 24, 39, 0.1);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.08);
  }

  .helga-mobile-nav__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 10px;
    color: var(--helga-sidebar-fg-dim) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 102, 0.08);
    touch-action: manipulation;
  }

  .helga-mobile-nav__item.is-active {
    background: var(--helga-sidebar-active);
    color: var(--helga-purple) !important;
    font-weight: 800;
  }

  .helga-mobile-nav__icon-wrap {
    position: relative;
    display: inline-flex;
  }

  .helga-mobile-nav__icon {
    width: 21px;
    height: 21px;
  }

  .helga-mobile-nav__label {
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .helga-mobile-nav__badge {
    position: absolute;
    top: -7px;
    left: 14px;
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--helga-purple);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
  }

  body.has-mobile-navigation .helga-helper,
  body.has-mobile-navigation .helga-toast {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

.helga-drop-target.is-drag-over {
  background: rgba(0,0,102,0.12);
  outline: 2px dashed var(--helga-orange, #000066);
  outline-offset: -2px;
}
.helga-drop-target.is-drag-over .helga-sidebar__sublink {
  color: var(--helga-orange, #000066);
}
.helga-drag-source {
  cursor: grab;
}
.helga-drag-source:active {
  cursor: grabbing;
}
.helga-drag-source.is-dragging {
  opacity: 0.4;
}
.helga-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 100;
  padding: 12px 22px;
  transform: translateX(-50%);
  background: var(--helga-ink, #17131f);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.helga-toast.is-visible {
  opacity: 1;
}
.helga-toast--error {
  background: var(--helga-danger, #b42318);
}
.helga-toast--ok {
  background: var(--helga-success, #1e7a3a);
}
.helga-sidebar__required-alert {
  min-width: 10px;
  margin-right: 4px;
  color: var(--helga-danger, #b42318);
  font-weight: 800;
  text-align: center;
}

/* ============================================================
   Tragweite-Balken (Designer: zentrales Wiedererkennungsmerkmal)
   ============================================================ */

.helga-risk {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.helga-risk__labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--helga-muted);
}
/* Tragweite-Skala — Tim 30.05.2026: gleicher Verlauf-Look wie auf
   der Vorgang-Detail-Seite (siehe app.css .helga-tragweite-bar).
   Track ist der bunte Gradient, der Marker zeigt die Position auf
   der Skala. Kein Fill mehr — das war redundant und kollidierte
   mit der Spalten-Logik („Ruhig" mit rotem Fill). */
.helga-risk__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #22c55e 0%,
    #84cc16 25%,
    #facc15 50%,
    #f57d09 75%,
    #dc2626 100%
  );
}
.helga-risk__fill,
.helga-risk__fill--orange,
.helga-risk__fill--danger {
  /* Bleibt als Klasse erhalten (Template-Kompatibilitaet), aber
     visuell weg — der bunte Track plus Marker erzaehlen die Story. */
  display: none;
}
.helga-risk__marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--helga-ink);
  /* Damit der Marker auf jedem Farb-Abschnitt sichtbar bleibt:
     dezenter weisser Halo. */
  box-shadow: 0 0 0 2px #ffffff;
  margin-left: -2px;
}
.helga-risk--large .helga-risk__bar { height: 14px; }
.helga-risk--large .helga-risk__marker {
  top: -6px; height: 26px; width: 6px; margin-left: -3px;
}

/* Tim 30.05.2026: Marker pulsiert sanft bei Tragweite-Score > 90,
   damit eskalierte Vorgaenge im Cockpit nicht zu uebersehen sind.
   Bewusst Opacity-Pulse statt hartes On/Off — softer im Auge.
   Bei User mit prefers-reduced-motion deaktiviert. */
.helga-risk__marker--alarm,
.helga-tragweite-marker--alarm {
  animation: helga-marker-pulse 1.2s ease-in-out infinite;
}
@keyframes helga-marker-pulse {
  0%, 100% { opacity: 1;   transform: scaleY(1); }
  50%      { opacity: 0.35; transform: scaleY(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .helga-risk__marker--alarm,
  .helga-tragweite-marker--alarm {
    animation: none;
  }
}

/* ============================================================
   Globale Typografie-Anpassungen aus letzter Iteration bleiben
   (Tim 28.05.2026: Fliesstexte groesser, weight max 500).
   Diese sind weiterhin im base.html-style-Block, hier nichts zu
   doppeln.
   ============================================================ */

/* ============================================================
   DESIGN-SYSTEM (Tim 30.05.2026, Vorlagen-Refactor).
   Gemeinsame Bausteine fuer Schreibtisch / Aktenordner / Register /
   Vorgang-Detail-Seiten. Macros in templates/_design_system.html.
   Farbe: Navy = Brand, Terracotta = Aktion, Cream = BG, Gruen = OK.
   ============================================================ */

/* Page-Layout: 1fr Content + 340px rechte Detail-Sidebar (Mockup) */
.app-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  width: 100%;
  max-width: none;
  margin: 0;
  align-items: flex-start;
  /* Tim 31.05.2026 Fix: Grid-Items duerfen NICHT ihre Spalte sprengen.
     Default min-width=auto laesst Card-Content (z.B. lange Beteiligten-
     Namen) das Grid breiter pumpen → Sidebar fliegt rechts raus. */
  min-width: 0;
}
.app-page--single {
  grid-template-columns: minmax(0, 1fr);
}
.app-page__main, .app-page__side {
  min-width: 0;
}
@media (max-width: 1280px) {
  .app-page { grid-template-columns: 1fr; gap: 20px; }
}

/* PAGE-HERO — Breadcrumb + Caption + Titel groß bold + Untertitel + Actions */
.page-hero {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-hero__main { flex: 1; min-width: 0; }
.page-hero__caption {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--helga-text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.page-hero__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--helga-purple);
  margin: 0;
}
.page-hero__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--helga-text-muted);
  max-width: 64ch;
}
.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.page-hero__actions:not(:has(*)) { display: none; }

/* On narrow viewports action labels must never squeeze the hero copy into
   an unreadable sliver. Stack the shared hero and give every action a full,
   predictable touch target instead. */
@media (max-width: 640px) {
  .page-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .page-hero__main,
  .page-hero__actions {
    width: 100%;
  }
  .page-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .page-hero__actions .helga-ui-button {
    width: 100%;
    white-space: normal;
  }
}

/* Breadcrumb (Mockup-Stil — kleine Chips mit Chevrons) */
.crumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--helga-text-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.crumb-row a { color: var(--helga-text-muted); text-decoration: none; }
.crumb-row a:hover { color: var(--helga-purple); }
.crumb-row__current { color: var(--helga-purple); }
.crumb-row__sep { opacity: 0.5; }

/* Hero-Action-Buttons (Mockup: rounded-xl, font-bold, shadow-sm) */
.btn-primary,
a.btn-primary,
button.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--helga-orange);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 8px 24px -8px rgba(17, 16, 20, 0.06);
  transition: background 0.12s;
}
.btn-primary:hover { background: var(--helga-orange-hover); }
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  color: var(--helga-purple) !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.btn-secondary:hover { background: var(--helga-paper); }
.btn-primary svg, .btn-secondary svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: var(--helga-purple);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04);
}
.btn-icon:hover { background: var(--helga-paper); }
.btn-icon svg { width: 20px; height: 20px; }

/* KPI-TILE Grid + Tile (Mockup: rounded-2xl, font-extrabold, große Werte) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 8px 24px -8px rgba(17, 16, 20, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.15s;
}
.kpi-tile:hover { box-shadow: 0 2px 8px rgba(17, 16, 20, 0.08); }
.kpi-tile--static { cursor: default; opacity: 0.55; }
.kpi-tile--static:hover { box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 8px 24px -8px rgba(17, 16, 20, 0.06); }
/* Tim 30.05.2026 spaet: nicht-klickbare KPI-Tiles (value=0) sollen
   sich klar von klickbaren unterscheiden. Opacity-Cap macht den
   Affordance-Unterschied auf einen Blick lesbar. */
.kpi-tile__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}
.kpi-tile__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--helga-terracotta-soft);
  display: grid;
  place-items: center;
  color: var(--helga-orange);
  flex-shrink: 0;
}
.kpi-tile__icon svg { width: 23px; height: 23px; }
.kpi-tile__body { min-width: 0; }
.kpi-tile__label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--helga-text-muted);
  font-weight: 800;
}
.kpi-tile__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--helga-purple);
  margin-top: 4px;
}
.kpi-tile__sub {
  font-size: 11px;
  color: var(--helga-text-muted);
  margin-top: 6px;
}
.kpi-tile__chevron {
  color: var(--helga-text-muted);
  flex-shrink: 0;
}
.kpi-tile__chevron svg { width: 20px; height: 20px; }

/* Aktenordner-Detail: HELGA fuehrt, aber als Lagebild, nicht als Hero-Alarm. */
.aktenordner-kpi-grid {
  display: none;
}
.aktenordner-lage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 30px);
  align-items: start;
  margin: 10px 0 28px;
  padding: clamp(20px, 2.8vw, 30px);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(191, 99, 66, 0.18);
  border-left: 4px solid var(--helga-orange);
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.03), 0 16px 36px -22px rgba(17, 16, 20, 0.18);
}
.aktenordner-lage__eyebrow {
  margin-bottom: 10px;
  color: var(--helga-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.aktenordner-lage p {
  max-width: 58ch;
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.34;
  font-weight: 600;
}
.aktenordner-lage__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 1px;
  min-width: min(320px, 100%);
  margin: 0;
  background: rgba(0, 0, 102, 0.08);
  border: 1px solid rgba(0, 0, 102, 0.08);
}
.aktenordner-lage__facts div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.88);
}
.aktenordner-lage__facts dt {
  color: rgba(23, 19, 31, 0.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.aktenordner-lage__facts dd {
  margin: 6px 0 0;
  color: var(--helga-purple);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}
.aktenordner-lage__refresh {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
  color: rgba(23, 19, 31, 0.52);
  font-size: 12px;
}
.aktenordner-lage__refresh button {
  border: 0;
  background: transparent;
  color: var(--helga-orange);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.aktenordner-register-section {
  margin-bottom: 24px;
  scroll-margin-top: 80px;
}
.aktenordner-section-head {
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(191, 99, 66, 0.22);
}
.aktenordner-section-head__hint {
  color: rgba(23, 19, 31, 0.52);
  font-size: 12px;
  font-weight: 650;
}

.schreibtisch-kpi-grid {
  display: none;
}
.helga-lage {
  margin: 10px 0 22px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid rgba(191, 99, 66, 0.18);
  border-left: 4px solid var(--helga-orange);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.03), 0 16px 36px -22px rgba(17, 16, 20, 0.18);
}
.helga-lage__content {
  display: grid;
  gap: 10px;
  max-width: 78ch;
}
.helga-lage__eyebrow {
  margin: 0;
  color: var(--helga-orange);
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.helga-lage p:not(.helga-lage__eyebrow) {
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.45 !important;
  font-weight: 650;
}
.helga-lage__meta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 102, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--helga-text-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.helga-lage__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  border-radius: 6px;
  background: var(--helga-purple);
  color: var(--helga-white) !important;
  font-family: inherit;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
}
.helga-lage__action:hover,
.helga-lage__action:focus-visible {
  background: #11117a;
}
.schreibtisch-lage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
  margin: 10px 0 22px;
  padding: clamp(22px, 3.4vw, 34px);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(191, 99, 66, 0.18);
  border-left: 4px solid var(--helga-orange);
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.03), 0 16px 36px -22px rgba(17, 16, 20, 0.18);
}
.schreibtisch-lage__eyebrow {
  margin-bottom: 10px;
  color: var(--helga-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.schreibtisch-lage p {
  max-width: 62ch;
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(22px, 2.35vw, 34px);
  line-height: 1.22;
  font-weight: 650;
}
.schreibtisch-lage__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 1px;
  min-width: min(360px, 100%);
  margin: 0;
  background: rgba(0, 0, 102, 0.08);
  border: 1px solid rgba(0, 0, 102, 0.08);
}
.schreibtisch-lage__facts div {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.88);
}
.schreibtisch-lage__fact-link {
  display: block;
  padding: 14px 16px;
  color: inherit;
  background: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}
.schreibtisch-lage__fact-link:hover {
  background: #fff;
}
.schreibtisch-lage__facts dt {
  color: rgba(23, 19, 31, 0.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.schreibtisch-lage__facts dd {
  margin: 6px 0 0;
  color: var(--helga-purple);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}
.desk-calendar {
  margin: 0 0 24px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 102, 0.08);
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.025);
}
.desk-calendar__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 12px;
}
.desk-calendar__eyebrow {
  color: var(--helga-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.desk-calendar__head h2 {
  margin: 4px 0 0;
  color: var(--helga-purple);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.15;
}
.desk-calendar__head p {
  max-width: 38ch;
  margin: 0;
  color: rgba(23, 19, 31, 0.62);
  font-size: 13px;
  line-height: 1.45;
}
.desk-calendar__head a {
  color: var(--helga-purple);
  font-weight: 800;
  text-decoration: none;
}
.desk-calendar__weeks {
  display: grid;
  gap: 10px;
}
.desk-calendar__week h3 {
  margin: 0 0 6px;
  color: rgba(23, 19, 31, 0.52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.desk-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: rgba(0, 0, 102, 0.08);
  border: 1px solid rgba(0, 0, 102, 0.08);
}
.desk-calendar__day {
  min-height: 58px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--helga-purple);
  text-decoration: none !important;
}
.desk-calendar__day:hover {
  background: #fff;
}
.desk-calendar__day.is-today {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 102, 0.18);
}
.desk-calendar__weekday {
  color: rgba(23, 19, 31, 0.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.desk-calendar__day strong {
  font-size: 14px;
  line-height: 1;
}
.desk-calendar__badge {
  justify-self: start;
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.desk-calendar__day--gruen .desk-calendar__badge {
  color: #17623d;
  background: rgba(34, 197, 94, 0.12);
}
.desk-calendar__day--gelb .desk-calendar__badge {
  color: #8a5a00;
  background: rgba(245, 158, 11, 0.16);
}
.desk-calendar__day--rot .desk-calendar__badge {
  color: #b00020;
  background: rgba(220, 38, 38, 0.12);
}
.desk-calendar__day--gelb {
  border-top: 2px solid rgba(245, 158, 11, 0.55);
}
.desk-calendar__day--rot {
  border-top: 2px solid rgba(220, 38, 38, 0.72);
}

.side-calendar {
  display: grid;
  gap: 14px;
}
.side-calendar__week-label {
  margin-bottom: 7px;
  color: rgba(23, 19, 31, 0.52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.side-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.side-calendar__day {
  position: relative;
  min-height: 44px;
  padding: 6px 4px;
  display: grid;
  align-content: center;
  gap: 3px;
  color: var(--helga-purple);
  background: rgba(251, 247, 238, 0.62);
  border: 1px solid rgba(0, 0, 102, 0.06);
  text-align: center;
  text-decoration: none;
}
a.side-calendar__day:hover {
  background: #fff;
  border-color: rgba(191, 99, 66, 0.32);
}
.side-calendar__day.is-today {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 102, 0.16);
}
.side-calendar__weekday {
  color: rgba(23, 19, 31, 0.48);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.side-calendar__day strong {
  font-size: 11px;
  line-height: 1;
}
.side-calendar__day--gelb {
  border-top-color: rgba(245, 158, 11, 0.82);
}
.side-calendar__day--rot {
  border-top-color: rgba(220, 38, 38, 0.82);
}
.side-calendar__dot {
  position: absolute;
  right: 3px;
  top: 3px;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--helga-orange);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.schreibtisch-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.schreibtisch-empty {
  margin: 0;
  padding: 18px 0 4px;
  color: rgba(23, 19, 31, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

/* CONTENT-CARD — Standard-Card fuer Listen / Sektionen (Mockup: rounded-2xl, ring) */
.content-card {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 8px 24px -8px rgba(17, 16, 20, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.content-card__header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.content-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--helga-purple);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.content-card__count {
  display: grid;
  place-items: center;
  height: 24px;
  min-width: 24px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--helga-orange);
  background: var(--helga-terracotta-soft);
  border-radius: 999px;
  font-weight: 800;
}
.content-card__body { padding: 0; }
.content-card__footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
}
.content-card__footer a {
  color: var(--helga-purple);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.content-card__footer a:hover { text-decoration: underline; }

/* Listen-Zeile innerhalb Content-Card (Mockup: bold title, divider, chevron) */
.list-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: rgba(0, 0, 0, 0.01); }
.list-row--muted { opacity: 0.75; }
.list-row__icon {
  width: 40px; height: 40px;
  border-radius: 16px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.list-row__icon svg { width: 20px; height: 20px; }
.list-row__body { flex: 1; min-width: 0; }
.list-row__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--helga-purple);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-row__meta {
  font-size: 12px;
  color: var(--helga-text-muted);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-row__tail {
  flex-shrink: 0;
  color: var(--helga-text-muted);
}
.list-row__chevron {
  flex-shrink: 0;
  color: var(--helga-text-muted);
}
.list-row__chevron svg { width: 18px; height: 18px; }
.list-row__btn {
  padding: 8px 12px;
  background: var(--helga-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.list-row__btn:hover { background: var(--helga-orange-hover); }

/* BADGE — alle Tones (Mockup: rounded-full px-3 py-1 text-xs font-bold) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.badge--orange { background: var(--helga-terracotta-soft); color: var(--helga-orange); }
.badge--green  { background: #E3F3EA; color: #26734D; }
.badge--gray   { background: rgba(0, 0, 0, 0.05); color: var(--helga-text-muted); }
.badge--blue   { background: #EAF0F7; color: var(--helga-purple); }
.badge--red    { background: rgba(180, 35, 24, 0.10); color: var(--helga-danger); }

/* STATUS-PILL = Badge mit Status-Mapping */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.status-pill--offen,
.status-pill--in_bearbeitung,
.status-pill--wiedervorlage {
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.status-pill--erledigt,
.status-pill--geschlossen {
  background: #E3F3EA;
  color: #26734D;
}

/* FRIST-TAG — Synonym mit Badge */
.frist-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.frist-tag--ueberfaellig {
  background: rgba(180, 35, 24, 0.10);
  color: var(--helga-danger);
}
.frist-tag--bald {
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.frist-tag--neutral {
  background: rgba(0, 0, 0, 0.05);
  color: var(--helga-text-muted);
}

/* CAT-CARD — Aktenordner-/Register-Grid (Mockup: rounded-2xl, ring) */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.cat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 8px 24px -8px rgba(17, 16, 20, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cat-card:hover {
  border-color: rgba(198, 107, 71, 0.35);
  box-shadow: 0 2px 8px rgba(17, 16, 20, 0.08);
}
.cat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--helga-terracotta-soft);
  display: grid; place-items: center;
  color: var(--helga-orange);
  flex-shrink: 0;
}
.cat-card__icon svg { width: 22px; height: 22px; }
.cat-card__body { flex: 1; min-width: 0; }
.cat-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--helga-purple);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-card__meta {
  font-size: 12px;
  color: var(--helga-text-muted);
  margin: 0;
}
.cat-card__dringend {
  font-size: 12px;
  font-weight: 600;
  color: var(--helga-text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-card__chevron {
  flex-shrink: 0;
  color: var(--helga-text-muted);
  transition: transform 0.12s;
}
.cat-card:hover .cat-card__chevron { transform: translateX(2px); }
.cat-card__chevron svg { width: 18px; height: 18px; }

/* SIDE-CARD — Right-Panel Karten (Mockup: rounded-2xl, ring) */
.side-card {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 8px 24px -8px rgba(17, 16, 20, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.side-card__header { margin-bottom: 12px; }
.side-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--helga-purple);
  margin: 0;
}
.side-card__body { padding: 0; }
.side-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.side-card__row:last-child { border-bottom: none; }
.side-card__row-label {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--helga-purple);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-card__row-meta {
  font-size: 11px;
  color: var(--helga-text-muted);
  flex-shrink: 0;
}
.side-card__footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 12px;
}

/* AVATAR-INITIALS (Mockup: bg-EAF0F7 + Navy, font-extrabold) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar--paper {
  background: #EAF0F7;
  color: var(--helga-purple);
}
.avatar--orange {
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.avatar--navy {
  background: var(--helga-purple);
  color: #fff;
}

/* META — kleine Status-Box (Status / Prioritaet / Frist / Zustaendig in Hero) */
.meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px;
  background: var(--helga-paper-soft);
  border-radius: 16px;
  margin-top: 20px;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meta-item__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 16px;
  color: var(--helga-orange);
  flex-shrink: 0;
}
.meta-item__icon svg { width: 19px; height: 19px; }
.meta-item__label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--helga-text-muted);
}
.meta-item__value {
  font-size: 14px;
  font-weight: 800;
  color: var(--helga-purple);
}

/* TIMELINE — Chronologie-Liste (Mockup: Dot + Linie + Title + Datum) */
.timeline { padding: 0; }
.timeline__item {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  position: relative;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}
.timeline__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #94A3B8;
  flex-shrink: 0;
}
.timeline__dot--active { background: var(--helga-orange); }
.timeline__line {
  margin-top: 4px;
  flex: 1;
  width: 1px;
  background: rgba(0, 0, 0, 0.10);
  min-height: 16px;
}
.timeline__body { flex: 1; font-size: 14px; }
.timeline__title {
  font-weight: 800;
  color: var(--helga-purple);
}
.timeline__date {
  margin-top: 4px;
  font-size: 12px;
  color: var(--helga-text-muted);
}

/* DOCUMENTS-TABLE (Mockup: Grid 1fr/70/110 mit Border-Bottom) */
.docs-table {
  display: grid;
  grid-template-columns: 1fr 70px 110px;
  gap: 12px;
}
.docs-table__head {
  padding: 8px 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--helga-text-muted);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.docs-table__cell {
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.docs-table__cell:nth-last-child(-n+3) { border-bottom: none; }
.docs-table__cell--name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--helga-purple);
}

/* HEUTE-WICHTIG-Item — Variante von .list-row mit Frist-Tag rechts */
.urgency-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.urgency-row:last-child { border-bottom: none; }
.urgency-row__icon {
  width: 40px; height: 40px;
  border-radius: 16px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.urgency-row__icon svg { width: 20px; height: 20px; }
.urgency-row__body { flex: 1; min-width: 0; }
.urgency-row__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--helga-purple);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.urgency-row__meta {
  font-size: 12px;
  color: var(--helga-text-muted);
  margin: 2px 0 0;
}

/* DROPDOWN-DIVIDER (gestricheltes Element fuer „Ohne Register"-Strip) */
.dashed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-top: 16px;
  border: 1px dashed rgba(0, 0, 0, 0.20);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--helga-text-muted);
}

/* ============================================================
   Landing Page (31.05.2026): HELGA SaaS marketing surface.
   Scoped to .helga-landing-main so app/product views keep their
   existing cockpit styling.
   ============================================================ */

.helga-landing-main {
  width: 100%;
  padding: 0;
  background:
    linear-gradient(180deg, #F8F3EC 0%, #FAF7F2 42%, #F8F3EC 100%);
  overflow: hidden;
}
.landing-shell {
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
}
.landing-eyebrow {
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--helga-orange);
  font-weight: 500 !important;
}
.landing-hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  padding: 56px 0 44px;
}
.landing-hero::before {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 44vw;
  height: 1px;
  background: var(--helga-orange);
  opacity: 0.35;
}
.landing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  gap: 54px;
  align-items: center;
}
.landing-hero__copy h1 {
  margin: 18px 0 0;
  max-width: 760px;
  color: var(--helga-purple);
  font-size: clamp(58px, 9vw, 126px) !important;
  line-height: 0.88 !important;
  letter-spacing: 0;
}
.landing-hero__lead {
  max-width: 660px;
  margin: 28px 0 0;
  color: #3c3943;
  font-size: clamp(20px, 2.3vw, 27px) !important;
  line-height: 1.36 !important;
}
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 20px;
  text-decoration: none;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  border: 1px solid transparent;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.landing-btn:hover {
  transform: translateY(-1px);
}
.landing-btn--primary {
  background: var(--helga-orange);
  color: #fff !important;
}
.landing-btn--primary:hover {
  background: var(--helga-orange-hover);
}
.landing-btn--secondary {
  background: #fff;
  color: var(--helga-purple) !important;
  border-color: rgba(0, 0, 102, 0.15);
}
.landing-btn--secondary:hover {
  border-color: rgba(198, 107, 71, 0.38);
}
.landing-btn--demo {
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 999px !important;
  background: #fff7f1;
  color: var(--helga-purple) !important;
  border-color: rgba(198, 107, 71, 0.42);
  box-shadow: 0 14px 34px rgba(198, 107, 71, 0.14);
}
.landing-btn--demo:hover {
  background: #fff;
  border-color: var(--helga-orange);
  box-shadow: 0 18px 42px rgba(198, 107, 71, 0.18);
}
.landing-btn--demo span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--helga-purple);
  color: #fff;
  line-height: 1;
}
.landing-btn--light {
  background: #fff;
  color: var(--helga-purple) !important;
}
.landing-btn--light:hover {
  background: var(--helga-paper-soft);
}
.landing-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.landing-proof-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  background: #fff;
  color: var(--helga-muted);
  border: 1px solid rgba(0, 0, 102, 0.12);
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.landing-hero__visual {
  position: relative;
}
.landing-hero__visual::before {
  content: "";
  position: absolute;
  left: -26px;
  top: -26px;
  width: 128px;
  height: 128px;
  border: 18px solid rgba(198, 107, 71, 0.16);
  z-index: 0;
}
.landing-before-after,
.landing-hero__image-button,
.landing-hero__before-after-image,
.landing-folder-board,
.landing-strip article,
.landing-steps article,
.landing-usecases article,
.landing-security,
.landing-final__box {
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.08);
}
.landing-before-after {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  align-items: stretch;
  min-height: 460px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.11);
}
.landing-hero__image-button {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.landing-hero__image-button:focus-visible {
  outline: 3px solid rgba(198, 107, 71, 0.78);
  outline-offset: 5px;
}
.landing-hero__before-after-image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 102, 0.11);
  background: #fff;
}
.landing-image-modal {
  width: min(96vw, 1540px);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(0, 0, 102, 0.18);
  background: #fff;
  box-shadow: 0 30px 90px rgba(17, 16, 20, 0.34);
}
.landing-image-modal::backdrop {
  background: rgba(13, 10, 30, 0.72);
}
.landing-image-modal img {
  display: block;
  width: 100%;
  max-height: 94vh;
  object-fit: contain;
}
.landing-image-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 102, 0.22);
  background: rgba(255, 253, 249, 0.92);
  color: var(--helga-purple);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}
.landing-image-modal__close:hover,
.landing-image-modal__close:focus-visible {
  border-color: var(--helga-orange);
  color: var(--helga-orange);
}
.landing-modal-open {
  overflow: hidden;
}
.landing-before-after__panel {
  position: relative;
  padding: 28px;
  overflow: hidden;
}
.landing-before-after__panel--before {
  background:
    linear-gradient(180deg, rgba(248, 243, 236, 0.72), rgba(255, 255, 255, 0.96));
}
.landing-before-after__panel--after {
  background:
    linear-gradient(180deg, #fff, rgba(248, 243, 236, 0.48));
}
.landing-before-after__label {
  display: inline-block;
  color: var(--helga-orange);
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.landing-before-after h2 {
  margin: 12px 0 0;
  color: var(--helga-purple);
  font-size: clamp(24px, 2.8vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0;
}
.landing-before-after__note {
  max-width: 260px;
  margin: 14px 0 0;
  color: #4c4a58;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.landing-before-after__turn {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 102, 0.05), rgba(198, 107, 71, 0.10));
  border-left: 1px solid rgba(0, 0, 102, 0.09);
  border-right: 1px solid rgba(0, 0, 102, 0.09);
}
.landing-before-after__turn span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--helga-purple);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.landing-table {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  height: 240px;
}
.landing-table__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 82px;
  background:
    linear-gradient(90deg, rgba(118, 75, 42, 0.16), rgba(198, 107, 71, 0.14)),
    #f4dfcf;
  border: 1px solid rgba(94, 52, 28, 0.13);
}
.landing-paper {
  position: absolute;
  display: flex;
  align-items: flex-start;
  width: 148px;
  min-height: 86px;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.12);
  color: var(--helga-purple);
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(17, 16, 20, 0.08);
}
.landing-paper--one {
  left: 10px;
  bottom: 80px;
  transform: rotate(-8deg);
}
.landing-paper--two {
  left: 94px;
  bottom: 122px;
  transform: rotate(7deg);
}
.landing-paper--three {
  left: 72px;
  bottom: 52px;
  background: #fff7f2;
  border-color: rgba(253, 102, 2, 0.32);
  color: var(--helga-orange);
  transform: rotate(-1deg);
}
.landing-paper--four {
  right: 38px;
  bottom: 96px;
  transform: rotate(9deg);
}
.landing-paper--five {
  right: 6px;
  bottom: 45px;
  transform: rotate(-6deg);
}
.landing-helga-desk {
  margin-top: 28px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
}
.landing-helga-desk__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.landing-helga-desk__head img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.landing-helga-desk__head span,
.landing-helga-desk li span {
  display: block;
  color: var(--helga-muted);
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.landing-helga-desk__head strong {
  display: block;
  margin-top: 4px;
  color: var(--helga-purple);
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
}
.landing-helga-desk ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-helga-desk li {
  display: block;
  padding: 18px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.landing-helga-desk li:first-child {
  border-top: 0;
  border-left: 4px solid var(--helga-orange);
}
.landing-helga-desk li strong {
  display: block;
  margin-top: 6px;
  color: var(--helga-purple);
  text-align: left;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: normal;
}
.landing-device {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.11);
}
.landing-device__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.landing-device__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--helga-purple);
  font-weight: 500;
}
.landing-device__brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.landing-device__dots {
  display: flex;
  gap: 7px;
}
.landing-device__dots span {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 102, 0.22);
}
.landing-device__body {
  display: grid;
  grid-template-columns: 164px 1fr;
  min-height: 420px;
}
.landing-device__nav {
  padding: 20px;
  border-right: 1px solid rgba(0, 0, 102, 0.10);
  background: var(--helga-paper-soft);
}
.landing-device__nav span {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  color: var(--helga-muted);
  font-size: 13px !important;
  font-weight: 500;
}
.landing-device__nav .is-active {
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.landing-desk {
  padding: 24px;
}
.landing-desk__intro span,
.landing-task span,
.landing-folder-board__head span {
  display: block;
  color: var(--helga-muted);
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.landing-desk__intro strong,
.landing-folder-board__head strong {
  display: block;
  margin-top: 2px;
  color: var(--helga-purple);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
}
.landing-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}
.landing-kpis div {
  background: var(--helga-paper-soft);
  padding: 16px;
  border-left: 3px solid var(--helga-orange);
}
.landing-kpis strong {
  display: block;
  color: var(--helga-purple);
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
}
.landing-kpis span {
  display: block;
  margin-top: 8px;
  color: var(--helga-muted);
  font-size: 12px !important;
  line-height: 1.3 !important;
}
.landing-task {
  padding: 18px;
  margin-top: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
}
.landing-task--hot {
  border-left: 4px solid var(--helga-orange);
}
.landing-task strong {
  display: block;
  margin: 7px 0 3px;
  color: var(--helga-purple);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}
.landing-task small {
  color: var(--helga-muted);
}
.landing-strip {
  padding: 92px 0 92px;
}
.landing-strip__headline {
  max-width: 980px;
  margin: 0 auto 58px;
  color: var(--helga-purple);
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: 0.98 !important;
  font-weight: 500;
  text-align: center;
}
.landing-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.landing-strip article,
.landing-steps article,
.landing-usecases article {
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.09);
  padding: 24px;
}
.landing-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
  font-size: 18px;
  font-weight: 500;
}
.landing-strip article h2,
.landing-usecases h3,
.landing-security h3 {
  margin: 18px 0 7px;
  color: var(--helga-purple);
  font-size: 19px !important;
  line-height: 1.25 !important;
}
.landing-strip p,
.landing-steps p,
.landing-usecases p,
.landing-security p {
  margin: 0;
  color: var(--helga-muted);
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.landing-section {
  padding: 90px 0;
}
.landing-section__head {
  max-width: 780px;
  margin: 0 auto 44px;
  text-align: center;
}
.landing-section__head h2,
.landing-product-band h2,
.landing-security h2,
.landing-final h2 {
  margin: 14px 0 0;
  color: var(--helga-purple);
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
}
.landing-section__head p,
.landing-product-band p,
.landing-security > .landing-shell > div > p,
.landing-final p {
  margin: 20px 0 0;
  color: #4b4852;
  font-size: 19px !important;
  line-height: 1.5 !important;
}
.landing-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.landing-steps article span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--helga-purple);
  color: #fff;
  font-size: 16px !important;
}
.landing-steps h3 {
  margin: 22px 0 8px;
  color: var(--helga-purple);
  font-size: 20px !important;
}
.landing-product-band {
  padding: 96px 0;
  background: var(--helga-purple);
  color: #fff;
}
.landing-product-band__grid,
.landing-security__grid,
.landing-final__box {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}
.landing-product-band h2 {
  color: #fff;
}
.landing-product-band p {
  color: rgba(255, 255, 255, 0.76);
}
.landing-checklist {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}
.landing-checklist li {
  position: relative;
  padding: 10px 0 10px 30px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
}
.landing-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 14px;
  height: 2px;
  background: var(--helga-orange);
}
.landing-folder-board {
  background: var(--helga-paper);
  color: var(--helga-ink);
  padding: 24px;
}
.landing-folder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.landing-folder-grid article {
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
  padding: 18px;
}
.landing-folder-grid article span {
  display: block;
  width: 34px;
  height: 24px;
  margin-bottom: 16px;
  background:
    linear-gradient(90deg, var(--helga-orange) 0 34%, transparent 34%),
    linear-gradient(var(--helga-terracotta-soft), var(--helga-terracotta-soft));
}
.landing-folder-grid strong {
  display: block;
  color: var(--helga-purple);
  font-size: 17px;
  font-weight: 500;
}
.landing-folder-grid small {
  display: block;
  margin-top: 5px;
  color: var(--helga-muted);
}
.landing-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.landing-usecases article {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 4px solid var(--helga-orange);
}
.landing-security {
  margin: 18px auto 90px;
  padding: 54px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.09);
}
.landing-security a {
  display: inline-flex;
  margin-top: 26px;
  color: var(--helga-orange);
  font-weight: 500;
  text-decoration: none;
}
.landing-security__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.landing-security__tiles article {
  padding: 22px;
  background: var(--helga-paper-soft);
  border-left: 3px solid var(--helga-orange);
}
.landing-security__tiles h3 {
  margin-top: 0;
}
.landing-final {
  padding: 0 0 96px;
}
.landing-final__box {
  grid-template-columns: 1fr auto;
  padding: 50px;
  background: var(--helga-orange);
  color: #fff;
}
.landing-final h2 {
  color: #fff;
}
.landing-final p {
  max-width: 740px;
  color: rgba(255, 255, 255, 0.82);
}
.landing-footer {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 102, 0.10);
}
.landing-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  color: var(--helga-muted);
}
.landing-footer img {
  width: 168px;
  height: auto;
  display: block;
}
.landing-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.landing-footer a {
  color: inherit;
  text-decoration: none;
}
.landing-footer a:hover {
  color: var(--helga-orange);
}

@media (max-width: 1080px) {
  .landing-hero__grid,
  .landing-product-band__grid,
  .landing-security__grid {
    grid-template-columns: 1fr;
  }
  .landing-hero {
    min-height: auto;
  }
  .landing-before-after {
    min-height: 0;
  }
  .landing-strip__grid,
  .landing-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .landing-shell {
    width: min(100% - 24px, 1240px);
  }
  .landing-hero {
    padding-top: 38px;
  }
  .landing-hero__grid {
    gap: 34px;
  }
  .landing-actions,
  .landing-btn {
    width: 100%;
  }
  .landing-device__body {
    grid-template-columns: 1fr;
  }
  .landing-before-after {
    grid-template-columns: 1fr;
  }
  .landing-before-after__panel {
    min-height: 340px;
    padding: 24px;
  }
  .landing-before-after__turn {
    min-height: 58px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(0, 0, 102, 0.09);
    border-bottom: 1px solid rgba(0, 0, 102, 0.09);
  }
  .landing-before-after__turn span {
    transform: rotate(90deg);
  }
  .landing-table {
    height: 210px;
  }
  .landing-paper {
    width: 126px;
    min-height: 74px;
    font-size: 12px !important;
  }
  .landing-device__nav {
    display: none;
  }
  .landing-kpis,
  .landing-strip__grid,
  .landing-steps,
  .landing-folder-grid,
  .landing-usecases,
  .landing-security__tiles,
  .landing-final__box {
    grid-template-columns: 1fr;
  }
  .landing-section,
  .landing-product-band {
    padding: 64px 0;
  }
  .landing-security {
    padding: 28px;
    margin-bottom: 64px;
  }
  .landing-final__box {
    padding: 30px;
  }
  .landing-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Landing refresh, 11.06.2026: photo-led hero and clearer conversion flow */
.landing-hero--photo {
  min-height: clamp(620px, calc(100vh - 82px), 760px);
  padding: 86px 0 78px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(248, 243, 236, 0.98) 0%, rgba(248, 243, 236, 0.94) 34%, rgba(248, 243, 236, 0.54) 58%, rgba(248, 243, 236, 0.14) 100%),
    url("/static/A8EA9125-506C-4482-8F9D-539A605368BB.png") center right / min(58vw, 940px) auto no-repeat,
    var(--helga-paper);
}
.landing-hero--photo::before {
  width: 48vw;
}
.landing-hero--photo .landing-hero__grid {
  grid-template-columns: minmax(0, 0.72fr) minmax(460px, 1fr);
}
.landing-hero--photo .landing-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}
.landing-hero--photo .landing-hero__copy h1 {
  font-size: clamp(70px, 10.4vw, 148px) !important;
  line-height: 0.82 !important;
}
.landing-actions--hero {
  align-items: center;
}
.landing-hero__reassure {
  margin: 18px 0 0;
  color: #67616f;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.landing-hero__reassure a {
  color: var(--helga-purple);
  font-weight: 500;
  text-decoration: none;
}
.landing-hero__reassure a:hover {
  color: var(--helga-orange);
}
.landing-hero__image-open {
  position: absolute;
  right: max(28px, calc((100vw - 1240px) / 2));
  bottom: 34px;
  z-index: 2;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(0, 0, 102, 0.18);
  background: rgba(255, 253, 249, 0.9);
  color: var(--helga-purple);
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 500;
  cursor: zoom-in;
}
.landing-hero__image-open:hover,
.landing-hero__image-open:focus-visible {
  border-color: var(--helga-orange);
  color: var(--helga-orange);
}
.landing-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}
.landing-btn--demo {
  background: var(--helga-purple);
  color: #fff !important;
  border-color: var(--helga-purple);
  box-shadow: 0 18px 42px rgba(0, 0, 102, 0.18);
}
.landing-btn--demo:hover {
  background: #17126f;
  border-color: #17126f;
  box-shadow: 0 22px 48px rgba(0, 0, 102, 0.22);
}
.landing-btn--inverse {
  background: #fff;
  color: var(--helga-purple) !important;
  border-color: rgba(255, 255, 255, 0.56);
}
.landing-btn--inverse:hover {
  background: var(--helga-paper-soft);
}
.landing-trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.landing-trustline span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--helga-purple);
  border: 1px solid rgba(0, 0, 102, 0.10);
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 500;
}
.landing-trustline svg {
  width: 16px;
  height: 16px;
  stroke: #09945f;
  stroke-width: 3;
  fill: none;
}
.landing-strip {
  padding: 92px 0 86px;
}
.landing-strip__headline {
  font-size: clamp(52px, 7vw, 92px) !important;
}
.landing-strip article h3 {
  margin: 18px 0 7px;
  color: var(--helga-purple);
  font-size: 20px !important;
  line-height: 1.22 !important;
}
.landing-section {
  padding: 92px 0;
  border-top: 1px solid rgba(198, 107, 71, 0.18);
}
.landing-product-band {
  padding: 96px 0;
  background: #fff;
  color: var(--helga-ink);
  border-top: 1px solid rgba(0, 0, 102, 0.08);
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.landing-product-band h2 {
  color: var(--helga-purple);
}
.landing-product-band p {
  color: #4b4852;
}
.landing-checklist li {
  color: #3f3b49;
}
.landing-example-panel {
  background: var(--helga-paper);
  border: 1px solid rgba(0, 0, 102, 0.11);
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.08);
}
.landing-example-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
  background: #fff;
}
.landing-example-panel__bar span {
  color: var(--helga-muted);
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.landing-example-panel__bar strong {
  color: var(--helga-purple);
  font-weight: 600;
}
.landing-example-panel__list {
  display: grid;
  gap: 0;
}
.landing-example-panel__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 90px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
  background: rgba(255, 255, 255, 0.72);
}
.landing-example-panel__item:first-child {
  border-left: 4px solid var(--helga-orange);
}
.landing-example-panel__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-purple);
  font-size: 23px;
  font-weight: 700;
}
.landing-example-panel__main {
  min-width: 0;
}
.landing-example-panel__from {
  display: block;
  margin-bottom: 5px;
  color: var(--helga-muted);
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.landing-example-panel__main strong {
  color: var(--helga-purple);
  font-size: 18px;
  line-height: 1.24;
}
.landing-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  background: #fff;
  color: var(--helga-purple);
  border: 1px solid rgba(0, 0, 102, 0.12);
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 600;
}
.landing-tag--urgent {
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
  border-color: rgba(198, 107, 71, 0.22);
}
.landing-example-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #fff;
}
.landing-example-panel__foot span {
  color: #4b4852;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.landing-example-panel__foot a {
  color: var(--helga-orange);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.landing-example-panel__caption {
  padding: 0 20px 20px;
}
.landing-security {
  margin: 92px auto;
}
.landing-security__tiles {
  grid-template-columns: repeat(3, 1fr);
}
.landing-security__tiles article {
  border-left: 0;
  border-top: 3px solid var(--helga-orange);
}
.landing-price-teaser {
  padding: 0 0 92px;
}
.landing-price-teaser__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  padding: 48px;
  background: var(--helga-purple);
  color: #fff;
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.10);
}
.landing-price-teaser h2 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(34px, 4.7vw, 58px) !important;
  line-height: 1 !important;
}
.landing-price-teaser p {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.landing-price-teaser__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.landing-final {
  padding: 0 0 96px;
}
.landing-footer .landing-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 28px 0;
  color: var(--helga-muted);
}

@media (max-width: 1080px) {
  .landing-hero--photo {
    min-height: auto;
    padding: 72px 0;
    background:
      linear-gradient(180deg, rgba(248, 243, 236, 0.98) 0%, rgba(248, 243, 236, 0.9) 58%, rgba(248, 243, 236, 0.72) 100%),
      url("/static/A8EA9125-506C-4482-8F9D-539A605368BB.png") center bottom / min(92vw, 740px) auto no-repeat,
      var(--helga-paper);
  }
  .landing-hero--photo .landing-hero__grid,
  .landing-product-band__grid,
  .landing-security__grid,
  .landing-price-teaser__box {
    grid-template-columns: 1fr;
  }
  .landing-hero--photo .landing-hero__copy {
    max-width: 720px;
    padding-bottom: 48vw;
  }
  .landing-hero__image-open {
    right: 24px;
    bottom: 24px;
  }
  .landing-security__tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-price-teaser__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .landing-hero--photo {
    padding: 48px 0 60px;
    background:
      linear-gradient(180deg, rgba(248, 243, 236, 0.98) 0%, rgba(248, 243, 236, 0.92) 52%, rgba(248, 243, 236, 0.78) 100%),
      url("/static/A8EA9125-506C-4482-8F9D-539A605368BB.png") center bottom / 105vw auto no-repeat,
      var(--helga-paper);
  }
  .landing-hero--photo .landing-hero__copy {
    padding-bottom: 58vw;
  }
  .landing-hero__image-open {
    display: none;
  }
  .landing-trustline,
  .landing-trustline span,
  .landing-price-teaser__actions,
  .landing-price-teaser__actions .landing-btn {
    width: 100%;
  }
  .landing-example-panel__item,
  .landing-example-panel__foot {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .landing-tag {
    grid-column: 2;
    justify-self: flex-start;
  }
  .landing-example-panel__foot {
    display: grid;
  }
  .landing-security__tiles {
    grid-template-columns: 1fr;
  }
  .landing-price-teaser__box {
    padding: 30px;
  }
}

/* Public product gateway: one shared proof image, then two choices. */
.helga-gateway-main {
  min-height: calc(100svh - 80px);
  background: var(--helga-paper);
}
.helga-gateway-main .landing-proof-photo {
  padding: 24px 0 18px;
}
.helga-gateway-main .landing-proof-photo__shell,
.landing-gateway__choices {
  width: min(100% - 48px, 980px);
}
.helga-gateway-main .landing-proof-photo__figure {
  border-radius: 6px;
}
.landing-gateway {
  padding: 0 0 36px;
  background: var(--helga-paper);
}
.landing-gateway__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.landing-gateway__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 18px 22px;
  border: 1px solid rgba(0, 0, 102, 0.18);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.landing-gateway__choice:hover {
  border-color: var(--helga-orange);
  background: #fffaf6;
}
.landing-gateway__choice:focus-visible {
  outline: 3px solid rgba(217, 100, 51, 0.35);
  outline-offset: 3px;
}
.landing-gateway__choice--business {
  border-color: var(--helga-purple);
  background: var(--helga-purple);
  color: #fff !important;
}
.landing-gateway__choice--business:hover {
  border-color: #20205c;
  background: #20205c;
}

.landing-hero--scanbar {
  min-height: auto;
  padding: 88px 0 36px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
  background:
    linear-gradient(180deg, #FAF8F2 0%, #F8F3EC 100%),
    var(--helga-paper);
}
.landing-hero--scanbar .landing-hero__grid {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.landing-hero--scanbar .landing-hero__copy {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.landing-hero--scanbar .landing-hero__copy h1 {
  margin: 18px 0 6px;
  font-size: clamp(44px, 6.4vw, 76px) !important;
  line-height: 1.04 !important;
}
.landing-hero--scanbar .landing-hero__lead {
  max-width: 30ch;
  margin: 0 auto;
  font-size: clamp(20px, 2.4vw, 26px) !important;
}
.landing-hero--scanbar .landing-actions {
  margin-top: 26px;
  gap: 12px;
  justify-content: center;
}
.landing-hero-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.landing-hero-products a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--helga-purple);
  border: 1px solid rgba(0, 0, 102, 0.12);
  text-decoration: none;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.landing-hero-products a:hover {
  border-color: var(--helga-orange);
  color: var(--helga-orange);
}
.landing-hero-products span {
  color: var(--helga-orange);
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.10em;
}
.landing-hero--scanbar .landing-btn {
  box-sizing: border-box;
}
.landing-hero--scanbar .landing-btn--demo {
  border-radius: 0 !important;
}
.landing-hero--scanbar .landing-trustline {
  gap: 8px 18px;
  margin-top: 22px;
  justify-content: center;
}
.landing-hero--scanbar .landing-trustline span {
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  color: var(--helga-muted);
}
.landing-hero--scanbar .landing-trustline svg {
  width: 15px;
  height: 15px;
  stroke: #15803d;
  stroke-width: 2;
}
.landing-proof-photo {
  padding: 0 0 58px;
  background: var(--helga-paper);
}
.landing-proof-photo__shell {
  max-width: 980px;
}
.landing-proof-photo__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 22px 56px -24px rgba(17, 16, 20, 0.24);
}
.landing-proof-photo__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   HELGA.legal public suite landing
   ============================================================ */

.legal-suite-main {
  width: 100%;
  background: #f7f8fb;
  color: #11141d;
}
.legal-suite-shell {
  width: min(100% - 36px, 1180px);
  margin: 0 auto;
}
.legal-suite-eyebrow {
  margin: 0;
  color: var(--helga-orange);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.legal-suite-hero {
  padding: 78px 0 70px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-suite-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.68fr);
  gap: 42px;
  align-items: center;
}
.legal-suite-hero__copy h1 {
  max-width: 820px;
  margin: 16px 0 0;
  color: var(--helga-purple);
  font-size: clamp(44px, 5.6vw, 76px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
}
.legal-suite-hero__lead {
  max-width: 710px;
  margin: 22px 0 0;
  color: #3d4252;
  font-size: clamp(19px, 2.1vw, 24px) !important;
  line-height: 1.5 !important;
}
.legal-suite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.legal-suite-actions--end {
  justify-content: flex-end;
  align-items: center;
}
.legal-suite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  background: #fff;
  color: var(--helga-purple);
  text-decoration: none;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
.legal-suite-btn--primary {
  background: var(--helga-purple);
  color: #fff !important;
  border-color: var(--helga-purple);
}
.legal-suite-btn--secondary:hover,
.legal-suite-btn--ghost:hover {
  border-color: var(--helga-orange);
  color: var(--helga-orange);
}
.legal-suite-btn--primary:hover {
  background: #090977;
}
.legal-suite-btn--ghost {
  background: transparent;
}
.legal-suite-trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.legal-suite-trustline span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
  color: #4d5362;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.legal-suite-dossier {
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.14);
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.08);
}
.legal-suite-dossier__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-suite-dossier__head img {
  width: 42px;
  height: 42px;
}
.legal-suite-dossier__head span,
.legal-suite-timeline span,
.legal-suite-history-list span {
  display: block;
  color: var(--helga-muted);
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-suite-dossier__head strong {
  display: block;
  margin-top: 4px;
  color: var(--helga-purple);
  font-size: 17px !important;
  line-height: 1.25 !important;
}
.legal-suite-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-suite-timeline li {
  padding: 18px 0 18px 24px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
  box-shadow: inset 3px 0 0 rgba(198, 107, 71, 0.36);
}
.legal-suite-timeline li:last-child {
  border-bottom: 0;
}
.legal-suite-timeline strong {
  display: block;
  margin-top: 5px;
  color: #11141d;
  font-size: 18px !important;
  line-height: 1.25 !important;
}
.legal-suite-timeline small {
  display: block;
  margin-top: 5px;
  color: #5d6372;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.legal-suite-section {
  padding: 68px 0;
}
.legal-suite-section__head {
  max-width: 840px;
  margin-bottom: 30px;
}
.legal-suite-section__head h2,
.legal-suite-band h2,
.legal-suite-pricing h2,
.legal-suite-final h2 {
  margin: 12px 0 0;
  color: var(--helga-purple);
  font-size: clamp(34px, 4.2vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0;
}
.legal-suite-section__head p,
.legal-suite-band p,
.legal-suite-pricing p,
.legal-suite-final p {
  margin: 16px 0 0;
  color: #4d5362;
  font-size: 17px !important;
  line-height: 1.58 !important;
}
.legal-suite-grid {
  display: grid;
  gap: 14px;
}
.legal-suite-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.legal-suite-feature {
  min-height: 190px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-suite-feature span {
  color: var(--helga-orange);
  font-size: 13px !important;
  font-weight: 800 !important;
}
.legal-suite-feature h3 {
  margin: 22px 0 8px;
  color: var(--helga-purple);
  font-size: 22px !important;
  line-height: 1.15 !important;
}
.legal-suite-feature p {
  margin: 0;
  color: #4d5362;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.legal-suite-band {
  padding: 72px 0;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 102, 0.10);
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-suite-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.64fr);
  gap: 42px;
  align-items: start;
}
.legal-suite-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-suite-history-list li {
  padding: 16px 18px;
  background: #f7f8fb;
  border: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-suite-history-list strong {
  display: block;
  margin-top: 6px;
  color: #11141d;
  font-size: 16px !important;
  line-height: 1.35 !important;
}
.legal-suite-pricing {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.45fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.12);
}
.legal-suite-final {
  padding: 76px 0 86px;
  text-align: center;
  background: var(--helga-purple);
}
.legal-suite-final .legal-suite-shell {
  max-width: 820px;
}
.legal-suite-final h2,
.legal-suite-final p {
  color: #fff;
}
.legal-suite-final p {
  color: rgba(255, 255, 255, 0.78);
}
.legal-suite-final .legal-suite-btn {
  margin-top: 26px;
  border-color: #fff;
  background: #fff;
  color: var(--helga-purple) !important;
}
.landing-products--scanbar {
  padding: 58px 0 64px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.landing-products__head {
  margin: 0 0 34px;
  text-align: left;
}
.landing-products__head h2 {
  max-width: 820px;
  font-size: clamp(28px, 4vw, 46px) !important;
  line-height: 1.08 !important;
}
.landing-products__head p {
  max-width: 760px;
}
.landing-products__groups {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.75fr);
  gap: 22px;
  align-items: stretch;
}
.landing-products__group {
  min-width: 0;
}
.landing-products__group-label {
  margin-bottom: 10px;
  color: var(--helga-muted);
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.landing-products__cards {
  display: grid;
  gap: 14px;
  height: calc(100% - 25px);
}
.landing-products__cards--b2c {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.landing-product-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 22px;
  background: var(--helga-paper-soft);
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
}
.landing-product-card--legal {
  background: #fff;
  border-color: rgba(0, 0, 102, 0.24);
  box-shadow: inset 4px 0 0 var(--helga-purple);
}
.landing-product-card__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--helga-muted);
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.landing-product-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 8px;
  background: #fff;
  color: var(--helga-orange);
  border: 1px solid rgba(198, 107, 71, 0.28);
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
}
.landing-product-card__badge--b2b {
  color: var(--helga-purple);
  border-color: rgba(0, 0, 102, 0.24);
}
.landing-product-card h3 {
  margin: 16px 0 8px;
  color: var(--helga-purple);
  font-size: 24px !important;
  line-height: 1.15 !important;
}
.landing-product-card p {
  margin: 0;
  color: #4b4852;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.landing-product-card ul {
  display: grid;
  gap: 7px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}
.landing-product-card li {
  position: relative;
  padding-left: 20px;
  color: var(--helga-ink);
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.landing-product-card li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--helga-orange);
}
.landing-product-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: 9px 13px;
  color: var(--helga-purple);
  border: 1px solid rgba(0, 0, 102, 0.18);
  background: #fff;
  text-decoration: none;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.landing-product-card a:hover {
  border-color: var(--helga-orange);
  color: var(--helga-orange);
}
.landing-product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.landing-product-card__actions a {
  margin-top: 0;
}
.landing-actions--final {
  justify-content: center;
}
.landing-btn--sm {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 14px !important;
}
.landing-strip--scanbar {
  padding: 62px 0;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.landing-strip--scanbar .landing-strip__headline {
  margin: 0 0 30px;
  text-align: left;
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.15 !important;
}
.landing-strip--scanbar .landing-card--feature {
  padding: 22px 20px;
  box-shadow: none;
}
.landing-strip--scanbar .landing-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  background: transparent;
  color: var(--helga-orange);
}
.landing-strip--scanbar .landing-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}
.landing-strip--scanbar article h3 {
  margin: 0 0 6px;
  color: var(--helga-ink);
  font-size: 18px !important;
}
.landing-section--steps {
  padding: 62px 0;
  border-top: 0;
}
.landing-section--steps .landing-section__head {
  margin: 0 0 30px;
  text-align: left;
}
.landing-section--steps .landing-section__head h2 {
  font-size: clamp(26px, 3.4vw, 38px) !important;
  line-height: 1.15 !important;
}
.landing-section--steps .landing-section__head p {
  max-width: 62ch;
}
.landing-steps--scanbar {
  gap: 16px;
}
.landing-steps--scanbar article {
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--helga-orange);
  box-shadow: none;
}
.landing-step__num {
  color: var(--helga-orange);
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.landing-steps--scanbar h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 5px;
  color: var(--helga-ink);
  font-size: 17px !important;
}
.landing-steps--scanbar h3 svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--helga-muted);
  stroke-width: 1.6;
}
.landing-product-band--scanbar {
  padding: 62px 0;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.landing-product-band--scanbar .landing-product-band__grid {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr);
  gap: 48px;
}
.landing-product-band--scanbar h2 {
  font-size: clamp(26px, 3.4vw, 38px) !important;
  line-height: 1.15 !important;
}
.landing-product-band--scanbar .landing-checklist {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.landing-product-band--scanbar .landing-checklist li {
  padding: 0 0 0 28px;
  color: var(--helga-ink);
}
.landing-product-band--scanbar .landing-checklist li::before {
  top: 12px;
  width: 16px;
}
.landing-example-panel--scanbar {
  position: relative;
  background: #fff;
  border-radius: 16px;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 16, 20, 0.04), 0 18px 48px -20px rgba(17, 16, 20, 0.20);
}
.landing-example-panel--scanbar .landing-example-panel__note {
  position: absolute;
  top: -22px;
  right: 0;
  color: var(--helga-muted);
  font-size: 10px !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.landing-example-panel--scanbar .landing-example-panel__bar {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
}
.landing-example-panel--scanbar .content-card__title {
  font-size: 17px !important;
  line-height: 1.25 !important;
}
.landing-example-panel--scanbar .content-card__count {
  color: var(--helga-orange);
  background: var(--helga-terracotta-soft);
  font-size: 12px !important;
  letter-spacing: 0;
  text-transform: none;
}
.landing-example-panel--scanbar .badge {
  flex-shrink: 0;
}
.landing-example-panel--scanbar .landing-example-panel__bar .badge {
  color: var(--helga-purple);
  font-size: 12px !important;
  letter-spacing: 0;
  text-transform: none;
}
.landing-example-panel--scanbar .landing-example-panel__item {
  display: flex;
  min-height: 0;
  padding: 12px 20px;
  gap: 16px;
  align-items: center;
  background: #fff;
}
.landing-example-panel--scanbar .landing-example-panel__item:first-child {
  border-left: 0;
}
.landing-example-panel--scanbar .list-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.landing-example-panel--scanbar .list-row__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}
.landing-example-panel--scanbar .list-row__title {
  font-size: 14px !important;
}
.landing-example-panel--scanbar .list-row__meta {
  font-size: 12px !important;
}
.landing-example-panel--scanbar .landing-example-panel__date {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.landing-example-panel--scanbar .landing-example-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 20px;
  background: var(--helga-paper-soft);
}
.landing-example-panel--scanbar .landing-example-panel__foot strong {
  font-weight: 800;
  color: var(--helga-purple);
}
.landing-example-panel--scanbar .landing-example-panel__foot span {
  color: #4b4852;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.landing-example-panel--scanbar .landing-example-panel__action {
  padding: 9px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.landing-example-panel--scanbar .landing-example-panel__action:hover {
  text-decoration: none;
}
.landing-example-panel--scanbar .landing-example-panel__caption {
  padding: 12px 20px 16px;
  text-align: center;
  color: var(--helga-muted);
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.landing-security--scanbar {
  margin: 0;
  padding: 62px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.landing-security--scanbar .landing-security__grid {
  align-items: start;
}
.landing-security--scanbar .landing-security h2,
.landing-security--scanbar h2 {
  font-size: clamp(26px, 3.4vw, 38px) !important;
  line-height: 1.15 !important;
}
.landing-security--scanbar .landing-security__tiles {
  gap: 16px;
}
.landing-security--scanbar .landing-security__tiles article {
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.09);
  border-top: 1px solid rgba(0, 0, 102, 0.09);
}
.landing-security__icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  color: var(--helga-purple);
}
.landing-security__icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.4;
}
.landing-price-teaser--scanbar {
  padding: 0 0 62px;
}
.landing-price-teaser--scanbar .landing-price-teaser__box {
  padding: 38px 36px;
}
.landing-price-teaser--scanbar h2 {
  max-width: 780px;
  font-size: clamp(22px, 3vw, 30px) !important;
  line-height: 1.3 !important;
}
.landing-price-teaser--scanbar p {
  margin-top: 8px;
  font-size: 14px !important;
}
.landing-final--scanbar {
  padding: 72px 24px;
  text-align: center;
}
.landing-final--scanbar .landing-final__box {
  display: block;
  padding: 0;
  background: transparent;
  color: var(--helga-ink);
  box-shadow: none;
}
.landing-final--scanbar h2 {
  color: var(--helga-purple);
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.15 !important;
}
.landing-final--scanbar p {
  max-width: 46ch;
  margin: 12px auto 0;
  color: var(--helga-muted);
}
.landing-final--scanbar .landing-btn {
  padding-inline: 26px;
}

@media (max-width: 1080px) {
  .landing-hero--scanbar {
    padding: 68px 0 34px;
    background:
      linear-gradient(180deg, #FAF8F2 0%, #F8F3EC 100%),
      var(--helga-paper);
  }
  .landing-hero--scanbar .landing-hero__copy {
    padding-bottom: 0;
  }
  .landing-product-band--scanbar .landing-product-band__grid {
    grid-template-columns: 1fr;
  }
  .legal-suite-hero__grid,
  .legal-suite-band__grid,
  .legal-suite-pricing {
    grid-template-columns: 1fr;
  }
  .legal-suite-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-suite-actions--end {
    justify-content: flex-start;
  }
  .landing-products__groups,
  .landing-products__cards--b2c {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .helga-gateway-main .landing-proof-photo {
    padding: 16px 0 12px;
  }
  .helga-gateway-main .landing-proof-photo__shell,
  .landing-gateway__choices {
    width: min(100% - 24px, 980px);
  }
  .landing-gateway {
    padding-bottom: 24px;
  }
  .landing-gateway__choices {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .landing-gateway__choice {
    min-height: 62px;
    padding: 14px 16px;
    font-size: 18px !important;
  }
  .landing-hero--scanbar {
    padding: 50px 0 28px;
    background:
      linear-gradient(180deg, #FAF8F2 0%, #F8F3EC 100%),
      var(--helga-paper);
  }
  .landing-hero--scanbar .landing-hero__copy {
    padding-bottom: 0;
  }
  .landing-strip--scanbar,
  .landing-section--steps,
  .landing-product-band--scanbar,
  .landing-security--scanbar {
    padding: 48px 0;
  }
  .landing-proof-photo {
    padding-bottom: 44px;
  }
  .legal-suite-shell {
    width: min(100% - 24px, 1180px);
  }
  .legal-suite-hero {
    padding: 48px 0 44px;
  }
  .legal-suite-hero__grid {
    gap: 28px;
  }
  .legal-suite-hero__copy h1 {
    font-size: clamp(36px, 11vw, 48px) !important;
  }
  .legal-suite-dossier,
  .legal-suite-feature,
  .legal-suite-pricing {
    padding: 18px;
  }
  .legal-suite-section,
  .legal-suite-band {
    padding: 48px 0;
  }
  .legal-suite-grid--four {
    grid-template-columns: 1fr;
  }
  .legal-suite-actions,
  .legal-suite-actions--end {
    flex-direction: column;
    align-items: stretch;
  }
  .legal-suite-btn {
    width: 100%;
  }
  .legal-suite-main .helga-floating-siegel {
    position: static;
    display: block;
    width: 68px;
    margin: 18px auto;
  }
  .landing-products--scanbar {
    padding: 46px 0 50px;
  }
  .landing-product-card {
    padding: 20px;
  }
  .landing-product-card a,
  .landing-product-card__actions,
  .landing-product-card__actions a {
    width: 100%;
  }
  .landing-example-panel--scanbar .landing-example-panel__bar,
  .landing-example-panel--scanbar .landing-example-panel__foot {
    align-items: start;
  }
  .landing-example-panel--scanbar .landing-example-panel__bar,
  .landing-example-panel--scanbar .landing-example-panel__item,
  .landing-example-panel--scanbar .landing-example-panel__foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .landing-example-panel--scanbar .landing-example-panel__date {
    display: none;
  }
  .landing-example-panel--scanbar .landing-example-panel__foot {
    flex-direction: column;
  }
  .landing-example-panel--scanbar .landing-example-panel__action {
    width: auto;
  }
  .landing-price-teaser--scanbar .landing-price-teaser__box {
    padding: 30px;
  }
  .landing-final--scanbar {
    padding: 56px 24px 68px;
  }
}

/* ============================================================
   Public Flow Pages (31.05.2026): Signup, Login, Upload,
   Onboarding. These pages bridge the clear landing design into
   the first real product action.
   ============================================================ */

.public-flow-main {
  width: 100%;
  padding: 0;
  background: linear-gradient(180deg, #F8F3EC 0%, #FAF7F2 58%, #F8F3EC 100%);
}
.public-flow {
  width: min(100% - 32px, 1160px);
  margin: 0 auto;
  padding: 76px 0 92px;
}
.public-flow--compact {
  padding-top: 92px;
}
.public-flow--login {
  display: flex;
  justify-content: center;
}
.public-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.72fr);
  gap: 54px;
  align-items: center;
}
.public-flow__grid--login {
  display: block;
  width: min(100%, 480px);
}
.public-flow__copy h1,
.flow-page__header h1 {
  margin: 16px 0 0;
  color: var(--helga-purple);
  font-size: clamp(44px, 6vw, 78px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
}
.public-flow__copy p,
.flow-page__header p {
  max-width: 680px;
  margin: 22px 0 0;
  color: #4b4852;
  font-size: 20px !important;
  line-height: 1.48 !important;
}
.public-eyebrow {
  margin: 0;
  color: var(--helga-orange);
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500 !important;
}
.public-panel,
.flow-upload-card,
.flow-side-note,
.flow-alert {
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.08);
}
.public-panel {
  padding: 34px;
}
.public-panel--login {
  width: 100%;
}
.public-panel__head {
  margin-bottom: 26px;
}
.public-panel__head h1,
.public-panel__head h2,
.flow-routing h2,
.flow-side-note h2,
.flow-onb-drop h2 {
  margin: 8px 0 0;
  color: var(--helga-purple);
  font-size: 28px !important;
  line-height: 1.15 !important;
}
.public-panel__head p,
.flow-routing p,
.flow-side-note li,
.flow-onb-drop p {
  margin: 10px 0 0;
  color: var(--helga-muted);
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.flow-form {
  display: grid;
  gap: 17px;
}
.flow-field {
  display: grid;
  gap: 7px;
  color: var(--helga-purple);
  font-size: 14px !important;
  font-weight: 500;
}
.flow-field span,
.flow-field > label {
  color: var(--helga-purple);
}
.flow-field em {
  color: var(--helga-muted);
  font-style: normal;
}
.flow-field small,
.flow-hint {
  color: var(--helga-muted);
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.flow-hint--ok {
  color: var(--helga-success) !important;
}
.flow-hint--error {
  color: var(--helga-danger) !important;
}
.flow-input,
.flow-address input,
.flow-address span {
  min-height: 48px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  background: #fff;
  color: var(--helga-ink);
  padding: 11px 13px;
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.flow-input:focus,
.flow-address:focus-within input {
  outline: 2px solid rgba(198, 107, 71, 0.24);
  outline-offset: 0;
  border-color: var(--helga-orange);
}
.flow-address {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.flow-address input {
  min-width: 0;
}
.flow-address span {
  display: inline-flex;
  align-items: center;
  border-left: none;
  background: var(--helga-paper-soft);
  color: var(--helga-purple);
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.flow-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 20px;
  border: 0;
  background: var(--helga-orange);
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}
.flow-submit:hover {
  background: var(--helga-orange-hover);
  transform: translateY(-1px);
}
.flow-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.flow-checklist {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  gap: 12px;
}
.flow-checklist li {
  position: relative;
  padding-left: 28px;
  color: #3c3943;
  font-size: 16px;
}
.flow-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 2px;
  background: var(--helga-orange);
}
.flow-switch,
.flow-minor {
  margin: 22px 0 0;
  color: var(--helga-muted);
  font-size: 14px !important;
}
.flow-minor {
  text-align: right;
}
.flow-switch a,
.flow-minor a,
.flow-note button,
.flow-muted-action {
  color: var(--helga-orange);
  text-decoration: none;
  font-weight: 500;
}
.flow-switch a:hover,
.flow-minor a:hover,
.flow-note button:hover,
.flow-muted-action:hover {
  color: var(--helga-orange-hover);
}
.flow-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 102, 0.10);
}
.flow-note p {
  margin: 0 0 8px;
  color: var(--helga-muted);
  font-size: 14px !important;
}
.flow-note button,
.flow-muted-action {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.flow-page-main {
  max-width: 1240px;
}
.flow-page {
  padding: 18px 0 42px;
}
.flow-page__header {
  max-width: 850px;
  margin-bottom: 34px;
}
.flow-upload-layout,
.flow-onboarding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.flow-upload-card {
  padding: 26px;
}
.flow-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.flow-choice,
.flow-onb-drop {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  min-height: 240px;
  padding: 26px;
  border: 1px dashed rgba(0, 0, 102, 0.22);
  background: var(--helga-paper-soft);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.flow-choice:hover,
.flow-choice.is-hover,
.flow-onb-drop:hover,
.flow-onb-drop.is-hover {
  border-color: var(--helga-orange);
  background: #fff;
  transform: translateY(-1px);
}
.flow-choice--primary {
  border-style: solid;
  background: var(--helga-purple);
  color: #fff;
}
.flow-choice--primary:hover {
  background: var(--helga-purple-dark);
}
.flow-choice__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
}
.flow-choice--primary .flow-choice__icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.flow-choice__icon svg {
  width: 26px;
  height: 26px;
}
.flow-choice strong {
  color: inherit;
  font-size: 20px;
  font-weight: 500;
}
.flow-choice small {
  color: currentColor;
  opacity: 0.72;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.flow-upload-selected {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  background: #fff;
}
.flow-upload-selected[hidden] {
  display: none;
}
.flow-upload-selected__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.flow-upload-selected__head .public-eyebrow {
  margin-bottom: 4px;
}
.flow-upload-selected__head strong {
  display: block;
  color: var(--helga-purple);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
}
.flow-upload-selected__clear {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--helga-orange);
  font-size: 13px !important;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.flow-upload-selected__clear:hover {
  color: var(--helga-orange-hover);
}
.flow-upload-selected__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}
.flow-upload-selected__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  background: var(--helga-paper-soft);
}
.flow-upload-selected__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--helga-purple);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}
.flow-upload-selected__name {
  min-width: 0;
  overflow: hidden;
  color: var(--helga-ink);
  font-size: 14px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-upload-selected__size {
  color: var(--helga-muted);
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.flow-routing {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 102, 0.10);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 22px;
}
.flow-routing__fields {
  display: grid;
  gap: 14px;
}
.flow-side-note {
  padding: 24px;
}
.flow-side-note h2 {
  margin-top: 0;
}
.flow-side-note ol {
  margin: 18px 0 0;
  padding-left: 22px;
}
.flow-side-note li + li {
  margin-top: 10px;
}
.flow-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.flow-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--helga-purple);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 102, 0.15);
  background: #fff;
  font-size: 15px !important;
}
.flow-alert {
  margin: 0 0 20px;
  padding: 16px 18px;
  color: var(--helga-purple);
  border-left: 4px solid var(--helga-orange);
}
.flow-onb-drop {
  min-height: 310px;
}
.flow-inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.flow-inline-actions label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  background: #fff;
  color: var(--helga-purple);
  font-size: 14px !important;
  font-weight: 500;
  cursor: pointer;
}
.flow-file-list {
  margin-top: 16px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  background: #fff;
}
.flow-file-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: var(--helga-purple);
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.flow-file-list__head button {
  border: 0;
  background: transparent;
  color: var(--helga-orange);
  cursor: pointer;
  font-size: 13px !important;
  letter-spacing: 0;
  text-transform: none;
}
.onb-file-list {
  max-height: 250px;
  overflow-y: auto;
}
.onb-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.07);
  font-size: 14px;
}
.onb-file-row:last-child {
  border-bottom: none;
}
.onb-file-icon {
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--helga-paper-soft);
  color: var(--helga-orange);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  flex-shrink: 0;
}
.onb-file-name {
  flex: 1;
  min-width: 0;
  color: var(--helga-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-file-size {
  color: var(--helga-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.onb-file-remove {
  border: 0;
  background: transparent;
  color: var(--helga-muted);
  cursor: pointer;
  padding: 4px;
}
.onb-file-remove svg {
  width: 16px;
  height: 16px;
}
.flow-muted-action {
  margin-top: 18px;
  font-size: 15px !important;
}

@media (max-width: 980px) {
  .public-flow__grid,
  .flow-upload-layout,
  .flow-onboarding-grid,
  .flow-routing {
    grid-template-columns: 1fr;
  }
  .public-flow {
    padding-top: 48px;
  }
}
@media (max-width: 680px) {
  .public-flow {
    width: min(100% - 24px, 1160px);
    padding-bottom: 60px;
  }
  .public-panel,
  .flow-upload-card,
  .flow-side-note {
    padding: 22px;
  }
  .flow-choice-grid {
    grid-template-columns: 1fr;
  }
  .flow-choice,
  .flow-onb-drop {
    min-height: 210px;
  }
  .flow-address {
    grid-template-columns: 1fr;
  }
  .flow-address span {
    border-left: 1px solid rgba(0, 0, 102, 0.16);
    border-top: none;
  }
  .flow-upload-selected__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .flow-upload-selected__item {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .flow-upload-selected__size {
    grid-column: 2;
  }
}

/* ============================================================
   Public Outside Pages (31.05.2026): pricing, legal, press.
   Clear reading surfaces that match the landing page.
   ============================================================ */

.outside-main {
  width: 100%;
  padding: 0;
  background: linear-gradient(180deg, #F8F3EC 0%, #FAF7F2 52%, #F8F3EC 100%);
}
.outside-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}
.outside-hero {
  padding: 72px 0 42px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.45fr);
  gap: 48px;
  align-items: end;
}
.outside-hero--single {
  display: block;
  max-width: 900px;
}
.outside-hero--center {
  display: block;
  max-width: 860px;
  text-align: center;
}
.outside-hero h1 {
  margin: 14px 0 0;
  color: var(--helga-purple);
  font-size: clamp(44px, 6vw, 78px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
}
.outside-hero p {
  margin: 22px 0 0;
  color: #4b4852;
  font-size: 20px !important;
  line-height: 1.5 !important;
}
.outside-hero__note {
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.07);
}
.outside-hero__note strong {
  display: block;
  color: var(--helga-purple);
  font-size: 22px;
  line-height: 1.2;
}
.outside-hero__note span {
  display: block;
  margin-top: 8px;
  color: var(--helga-muted);
  font-size: 14px;
}
.pricing-grid {
  /* Tim 02.06.2026 — auto-fit + minmax: das Grid passt sich der Anzahl
     der aktiven Karten an, ohne leere Spalten. Aktuell 3 Karten
     (Solo/Duo/Familie); wenn spaeter mehr aktiv werden, fliessen sie
     auf eine zweite Reihe statt links zu kleben. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding-bottom: 40px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 24px;
  background: #fff;
  /* Tim 02.06.2026 — gleiche Border-Hoehe fuer alle Karten, damit der
     orange Akzent bei Beliebt-Karte keine 4 px Hoehen-Versatz erzeugt.
     Default: 4 px transparent oben. Featured ueberschreibt nur die Farbe,
     nicht die Breite. */
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-top: 4px solid transparent;
  box-shadow: 0 24px 70px rgba(17, 16, 20, 0.07);
}
.pricing-card--featured {
  border-top: 4px solid var(--helga-orange);
}
.pricing-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 9px;
  background: var(--helga-terracotta-soft);
  color: var(--helga-orange);
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.pricing-card h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 28px !important;
  line-height: 1.1 !important;
}
.pricing-card__cap {
  margin-top: 8px;
  color: var(--helga-muted);
  font-size: 14px !important;
}
.pricing-card__price {
  margin-top: 30px;
  color: var(--helga-purple);
  font-size: 48px !important;
  line-height: 0.95 !important;
  font-weight: 500;
}
.pricing-card__price span {
  color: var(--helga-muted);
  font-size: 19px !important;
}
.pricing-card__meta,
.pricing-card__copy,
.pricing-note,
.outside-copy p,
.outside-copy li {
  color: var(--helga-muted);
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.pricing-card__copy {
  margin-top: 18px;
}
.pricing-card__minor {
  margin-top: 12px;
  color: var(--helga-purple);
  font-size: 13px !important;
}
.pricing-card__cta {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--helga-orange);
  color: #fff !important;
  text-decoration: none;
  font-size: 15px !important;
}
.pricing-card__cta:hover {
  background: var(--helga-orange-hover);
}
.pricing-card__cta--secondary {
  background: #fff;
  color: var(--helga-purple) !important;
  border: 1px solid rgba(0, 0, 102, 0.16);
}
.pricing-card__cta--secondary:hover {
  background: var(--helga-paper-soft);
}
.pricing-note {
  margin: 0 auto 24px;
  max-width: 860px;
  padding: 18px 22px;
  background: #fff;
  border-left: 4px solid var(--helga-orange);
  box-shadow: 0 18px 48px rgba(17, 16, 20, 0.06);
}
.outside-band {
  padding: 72px 0;
  background: var(--helga-purple);
  color: #fff;
}
.outside-band h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4.6vw, 58px) !important;
  line-height: 1 !important;
}
.outside-band p {
  color: rgba(255,255,255,0.76);
}
.outside-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px;
  margin-top: 34px;
}
.outside-feature {
  position: relative;
  padding-left: 28px;
}
.outside-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 2px;
  background: var(--helga-orange);
}
/* Tim 02.06.2026 — Default: lesbar auf hellem outside-shell
   (z.B. /sponsor). outside-band drueckt dann unten auf weiss-Tone
   fuer dunklen Banner-Kontext (z.B. /preise „Enthalten"). */
.outside-feature strong {
  display: block;
  color: var(--helga-purple);
  font-size: 17px;
  font-weight: 500;
}
.outside-feature span {
  display: block;
  margin-top: 5px;
  color: var(--helga-muted);
  font-size: 14px;
  line-height: 1.5;
}
.outside-band .outside-feature strong {
  color: #fff;
}
.outside-band .outside-feature span {
  color: rgba(255,255,255,0.76);
}
.outside-faq,
.outside-final,
.outside-copy-wrap {
  padding: 64px 0;
}
.outside-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.outside-faq details,
.outside-copy,
.press-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 102, 0.10);
  box-shadow: 0 18px 48px rgba(17, 16, 20, 0.06);
}
.outside-faq details {
  padding: 20px;
}
.outside-faq summary {
  cursor: pointer;
  color: var(--helga-purple);
  font-size: 17px;
  font-weight: 500;
}
.outside-final__box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 36px;
  background: var(--helga-orange);
  color: #fff;
}
.outside-final__box h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px) !important;
}
.outside-final__box p {
  margin: 10px 0 0;
  color: rgba(255,255,255,0.82);
}
.outside-final__box a {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: #fff;
  color: var(--helga-purple) !important;
  text-decoration: none;
}
.outside-copy-wrap {
  width: min(100% - 32px, 1040px);
  margin: 0 auto;
}
.outside-copy {
  padding: 42px;
}
.outside-copy h1 {
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1 !important;
}
.outside-copy h2 {
  margin: 34px 0 10px;
  color: var(--helga-purple);
  font-size: 26px !important;
  line-height: 1.2 !important;
}
.outside-copy h3 {
  margin: 22px 0 8px;
  color: var(--helga-purple);
  font-size: 18px !important;
}
.outside-copy a {
  color: var(--helga-orange);
  text-decoration: none;
}
.outside-copy a:hover {
  color: var(--helga-orange-hover);
}
.outside-copy code {
  background: var(--helga-paper-soft);
  color: var(--helga-purple);
  padding: 2px 5px;
}
.outside-copy--faq {
  padding: clamp(30px, 5vw, 54px);
}
.outside-faq-page__intro {
  max-width: 860px;
}
.outside-faq-page__eyebrow {
  margin: 0 0 14px !important;
  color: var(--helga-orange) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.outside-faq-page__intro h1 {
  max-width: 760px;
}
.outside-faq-page__intro p {
  margin-top: 20px;
  max-width: 760px;
}
.outside-faq-page__accordion {
  display: grid;
  gap: 12px;
  margin-top: clamp(44px, 6vw, 72px);
}
.outside-faq-page__accordion details {
  border-top: 1px solid rgba(0, 0, 102, 0.12);
}
.outside-faq-page__accordion details:last-child {
  border-bottom: 1px solid rgba(0, 0, 102, 0.12);
}
.outside-faq-page__accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  color: var(--helga-purple);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.2;
  font-weight: 500;
}
.outside-faq-page__accordion summary::-webkit-details-marker {
  display: none;
}
.outside-faq-page__accordion summary::after {
  content: "+";
  float: right;
  margin-left: 20px;
  color: var(--helga-orange);
  font-weight: 700;
}
.outside-faq-page__accordion details[open] summary::after {
  content: "-";
}
.outside-faq-page__accordion details > div {
  max-width: 850px;
  padding: 0 0 24px;
}
.outside-faq-page__accordion p + p {
  margin-top: 12px;
}
.outside-faq-page__links {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.outside-copy__stand {
  margin: 10px 0 30px;
  color: var(--helga-muted);
  font-size: 13px !important;
}
.outside-callout {
  margin: 24px 0;
  padding: 18px;
  background: var(--helga-paper-soft);
  border-left: 4px solid var(--helga-orange);
}
.press-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  padding-bottom: 72px;
}
.press-card {
  padding: 28px;
}
.press-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
}
.press-release {
  padding: 18px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  background: var(--helga-paper-soft);
}
.press-release time {
  display: block;
  color: var(--helga-muted);
  font-size: 13px;
}
.press-release h3 {
  margin: 6px 0 0;
  color: var(--helga-purple);
  font-size: 21px !important;
}
.press-release a {
  color: inherit;
  text-decoration: none;
}
.press-card h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 28px !important;
}
.press-card p {
  color: var(--helga-muted);
}

@media (max-width: 1040px) {
  .outside-hero,
  .press-grid {
    grid-template-columns: 1fr;
  }
  /* Tim 02.06.2026 — auto-fit ueberschreibt sich auf dieser Breite
     selbst sauber (3*240 + Gaps passt unter 1040 nicht mehr in eine
     Reihe). Kein eigener Override mehr noetig. */
}
@media (max-width: 720px) {
  .outside-shell,
  .outside-copy-wrap {
    width: min(100% - 24px, 1180px);
  }
  .outside-hero {
    padding-top: 46px;
  }
  .pricing-grid,
  .outside-feature-grid,
  .outside-faq-grid,
  .outside-final__box {
    grid-template-columns: 1fr;
  }
  .outside-copy,
  .press-card {
    padding: 24px;
  }
}

/* ============================================================
   Inner polish (31.05.2026): search, cases, account.
   ============================================================ */

.search-page .content-card,
.cases-page .content-card {
  margin-bottom: 18px;
}
.search-panel {
  padding: 18px;
}
.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.search-form__input {
  min-height: 52px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  background: #fff;
  color: var(--helga-ink);
  padding: 12px 14px;
  font-size: 16px !important;
}
.search-form__input:focus {
  outline: 2px solid rgba(198, 107, 71, 0.24);
  border-color: var(--helga-orange);
}
.search-form__button,
.segment-nav a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 8px 8px 0 0;
  background: #fff;
  color: var(--helga-purple);
  padding: 10px 16px;
  text-decoration: none;
  font-size: 15px !important;
  font-weight: 500;
}
.search-form__button,
.segment-nav a.is-active {
  background: var(--helga-orange);
  border-color: var(--helga-orange);
  color: #fff !important;
}
.empty-state {
  padding: 42px 26px;
  text-align: center;
}
.empty-state h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 28px !important;
}
.empty-state p {
  max-width: 560px;
  margin: 12px auto 0;
  color: var(--helga-muted);
  font-size: 16px !important;
}
.empty-state .flow-submit {
  margin-top: 20px;
}
.case-list-tragweite {
  max-width: 280px;
  margin-top: 10px;
}
@media (max-width: 720px) {
  .cases-page .list-row {
    align-items: flex-start;
    gap: 12px;
  }
  .cases-page .list-row__title,
  .cases-page .list-row__meta {
    white-space: normal;
  }
  .case-list-tragweite {
    max-width: 100%;
  }
}
.segment-nav {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 18px;
  align-items: flex-end;
  border-bottom: 1px solid rgba(0, 0, 102, 0.14);
}
.case-groups {
  display: grid;
  gap: 18px;
}
.case-group {
  padding: 0;
}
.case-group__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.case-group__summary::-webkit-details-marker {
  display: none;
}
.case-group__summary h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 24px !important;
}
.case-group__summary p {
  margin: 4px 0 0;
  color: var(--helga-muted);
  font-size: 14px !important;
}
.case-group__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--helga-muted);
  font-size: 14px;
}
.case-group__actions a {
  color: var(--helga-orange);
  text-decoration: none;
}
.case-group[open] .case-group__actions > span {
  transform: rotate(180deg);
}
.case-folder + .case-folder {
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.case-folder__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--helga-paper-soft);
}
.case-folder__header a,
.case-folder__header span {
  color: var(--helga-purple);
  text-decoration: none;
  font-size: 15px !important;
  font-weight: 500;
}
.case-folder__header small {
  color: var(--helga-muted);
  font-size: 13px !important;
}
.account-page {
  width: min(100%, 980px);
  margin: 0 auto;
}
.account-page > div[class*="bg-paper-50"],
.account-page > div[class*="bg-white"] {
  border: 1px solid rgba(0, 0, 102, 0.10) !important;
  box-shadow: 0 18px 48px rgba(17, 16, 20, 0.06) !important;
  margin-bottom: 18px !important;
}
.account-page > div > div:first-child {
  background: #fff;
}
.account-page h2 {
  color: var(--helga-purple) !important;
}
.account-page code {
  background: var(--helga-paper-soft) !important;
  color: var(--helga-purple) !important;
}
.account-page .account-explainer,
.account-page > div[class*="bg-paper-50"] > div.px-6.py-4.text-sm > p.text-slate-700.mb-3,
.account-page > div[class*="bg-paper-50"] > div.px-6.py-4.text-sm > p.text-xs.text-slate-500.mb-3,
.account-page > div[class*="bg-paper-50"] > div.px-6.py-4.text-sm > p.text-xs.text-slate-500.mb-3.leading-relaxed {
  display: none !important;
}

/* ============================================================
   Brief-Detail (31.05.2026): gleiche ruhige Produktlogik wie
   Landingpage: Cream-Fläche, klare weisse Paneele, Navy-Typo,
   Terracotta nur als Akzent. Keine technische Tabellenoptik.
   ============================================================ */
.helga-brief-page {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.helga-brief-summary {
  border: none !important;
  border-radius: 8px !important;
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 46px) !important;
  margin-bottom: 28px !important;
  background: var(--helga-white) !important;
  box-shadow: var(--helga-shadow-card) !important;
}
.helga-brief-summary h1 {
  color: var(--helga-purple) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  max-width: 980px;
}
.helga-brief-summary p {
  color: var(--helga-ink) !important;
  max-width: 840px;
}
.helga-brief-workspace {
  align-items: start;
  gap: clamp(22px, 2.6vw, 34px) !important;
}
.helga-brief-viewer,
.helga-brief-sidebar {
  border: none !important;
  border-radius: 8px !important;
  background: var(--helga-white) !important;
  box-shadow: var(--helga-shadow-card) !important;
}
.helga-brief-viewer > div:first-child {
  min-height: 58px;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08) !important;
}
.helga-brief-viewer h2 {
  color: var(--helga-purple) !important;
  font-weight: 800 !important;
}
.helga-brief-frame {
  display: block;
  background: #f3eee7;
}
.helga-brief-sidebar {
  position: sticky;
  top: 104px;
  padding: 22px !important;
}
.helga-brief-sidebar-heading {
  margin: -22px -22px 20px !important;
  padding: 16px 22px !important;
  background: var(--helga-white) !important;
  border-bottom: 1px solid rgba(191, 99, 66, 0.28) !important;
  border-radius: 8px 8px 0 0 !important;
}
.helga-brief-sidebar-heading div {
  color: var(--helga-orange) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}
.helga-brief-sidebar > div:not(.helga-brief-sidebar-heading) {
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.helga-brief-sidebar > div:not(.helga-brief-sidebar-heading):first-of-type,
.helga-brief-sidebar-heading + div {
  padding-top: 0;
  border-top: 0;
}
.helga-brief-sidebar .text-xs.uppercase,
.helga-brief-sidebar .text-\[11px\].uppercase {
  color: rgba(23, 19, 31, 0.54) !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}
.helga-brief-sidebar a,
.helga-brief-sidebar button {
  color: var(--helga-purple) !important;
}
.helga-brief-sidebar button[class*="bg-helga-"],
.helga-brief-sidebar button[class*="bg-lila-"],
.helga-brief-sidebar button[class*="bg-emerald-"],
.helga-brief-sidebar a[class*="bg-helga-"],
.helga-brief-sidebar a[class*="bg-lila-"],
.helga-brief-sidebar a[class*="bg-emerald-"] {
  color: var(--helga-white) !important;
}
.helga-brief-sidebar li[class*="border-l-2"] {
  border-left-width: 3px !important;
  padding-left: 12px !important;
}
.helga-brief-sidebar select,
.helga-brief-sidebar input[type="text"],
.helga-brief-sidebar input[type="date"] {
  border-color: rgba(0, 0, 102, 0.18) !important;
  border-radius: 4px !important;
  color: var(--helga-ink) !important;
}
.helga-brief-sidebar select:focus,
.helga-brief-sidebar input[type="text"]:focus,
.helga-brief-sidebar input[type="date"]:focus {
  outline: 2px solid rgba(191, 99, 66, 0.22) !important;
  outline-offset: 1px;
  border-color: var(--helga-orange) !important;
}
.helga-brief-sidebar details > summary {
  color: var(--helga-purple) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.helga-brief-sidebar details[open] > summary {
  margin-bottom: 10px;
}
.helga-brief-sidebar button:disabled {
  background: rgba(23, 19, 31, 0.16) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  cursor: not-allowed;
}

/* ============================================================
   Vorgang-Detail: eine Ebene hoeher als Brief, gleiche HELGA-Sprache.
   Zustand und Details sollen Orientierung geben, nicht konkurrieren.
   ============================================================ */
.helga-case-page {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.helga-case-status,
.helga-case-meta-panel,
.helga-case-panel {
  border: none !important;
  border-radius: 8px !important;
  background: var(--helga-white) !important;
  color: var(--helga-ink) !important;
  box-shadow: var(--helga-shadow-card) !important;
}
.helga-case-status {
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 46px) !important;
}
.helga-case-status h2 {
  color: var(--helga-purple) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  max-width: 920px;
}
.helga-case-status p,
.helga-case-status div {
  color: var(--helga-ink) !important;
}
.helga-case-status > div:first-child > div:first-child {
  color: var(--helga-orange) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}
.helga-case-meta-panel {
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 42px) !important;
  margin-bottom: 28px !important;
}
.helga-case-meta-panel h1 {
  color: var(--helga-purple) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.helga-case-state-strip {
  margin-top: 22px;
  padding: 22px 24px;
  border-left: 4px solid var(--helga-orange);
  background: var(--helga-paper-soft);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.helga-case-state-strip.is-critical {
  border-left-color: var(--helga-danger);
}
.helga-case-state-label {
  color: var(--helga-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.helga-case-state-strip h2 {
  margin: 6px 0 0;
  color: var(--helga-purple) !important;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
}
.helga-case-state-strip p {
  max-width: 820px;
  margin: 12px 0 0;
  color: var(--helga-ink);
  font-size: 15px;
  line-height: 1.55;
}
.helga-case-state-delta {
  min-width: 180px;
  text-align: right;
  color: var(--helga-muted);
  font-size: 13px;
}
.helga-case-meta-panel dl {
  border-color: rgba(0, 0, 102, 0.08) !important;
}
.helga-case-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 34px);
  align-items: start;
  margin-top: 28px;
}
.helga-case-main-column {
  min-width: 0;
}
.helga-case-operations-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  border: 1px solid rgba(0, 0, 102, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--helga-shadow-card);
  padding: 18px;
}
.helga-case-operations-panel > details,
.helga-case-operations-panel > div {
  min-width: 0;
  margin-top: 0 !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.helga-case-operations-panel details > summary {
  color: var(--helga-purple) !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}
.helga-case-operations-panel button[class*="bg-helga-"] {
  color: var(--helga-white) !important;
}
.helga-case-operations-panel a,
.helga-case-operations-panel button:not([class*="bg-"]) {
  color: var(--helga-purple) !important;
}
.helga-case-mini-action {
  padding: 5px 9px;
  border: 0;
  border-radius: 4px;
  background: rgba(23, 19, 31, 0.1);
  color: var(--helga-ink);
  font-size: 12px;
  font-weight: 800;
}
.helga-case-mini-action.is-done {
  background: #047857;
  color: var(--helga-white) !important;
}
.helga-case-location-field {
  display: none;
}
.helga-case-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.helga-case-tragweite {
  border-top: 1px solid rgba(191, 99, 66, 0.22);
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
  padding: 26px 20px 24px;
  margin-inline: -4px;
  background: rgba(255, 255, 255, 0.62);
}
.helga-case-tragweite .helga-tragweite-bar {
  min-height: 12px;
}
.helga-case-tragweite .helga-tragweite-score {
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1 !important;
}
.helga-case-meta-panel dt,
.helga-case-panel summary span[class*="uppercase"] {
  color: rgba(23, 19, 31, 0.54) !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}
.helga-case-meta-panel a,
.helga-case-meta-panel button:not([class*="bg-"]),
.helga-case-panel a,
.helga-case-panel button:not([class*="bg-"]) {
  color: var(--helga-purple) !important;
}
.helga-case-sidebar-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  color: var(--helga-purple) !important;
}
.helga-case-sidebar-action.is-close {
  border-color: rgba(4, 120, 87, 0.32) !important;
  color: #047857 !important;
}
.helga-case-sidebar-action.is-close:hover {
  background: rgba(4, 120, 87, 0.06) !important;
}
.helga-case-sidebar-action.is-export,
.helga-case-sidebar-action.is-reopen {
  border-color: rgba(0, 0, 102, 0.16) !important;
}
.helga-case-sidebar-action.is-delete {
  border-color: rgba(190, 18, 60, 0.28) !important;
  color: #be123c !important;
}
.helga-case-sidebar-action.is-delete:hover {
  background: rgba(190, 18, 60, 0.06) !important;
}
.helga-case-sidebar-action.is-disabled {
  color: rgba(23, 19, 31, 0.38) !important;
}
.helga-case-panel {
  padding: 22px !important;
  margin-bottom: 24px !important;
}
.helga-case-panel summary {
  margin: -22px -22px 18px !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(191, 99, 66, 0.24) !important;
  border-radius: 8px 8px 0 0 !important;
  background: var(--helga-white) !important;
}
.helga-case-new-register {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.helga-case-new-register.hidden {
  display: none;
}
.helga-case-tabs {
  border-bottom-color: rgba(0, 0, 102, 0.12) !important;
}

/* ============================================================
   Kontext-Werkzeugleiste: einheitliche Arbeitsaktionen direkt
   unter dem Seitentitel. Auswahlaktionen bleiben in der
   bestehenden Bulk-Leiste, die Toolbar fuehrt dorthin.
   ============================================================ */
.helga-context-toolbar {
  position: sticky;
  top: 92px;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -8px 0 28px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 34px rgba(17, 16, 20, 0.12);
  backdrop-filter: blur(10px);
}
.helga-context-toolbar__context {
  min-width: 0;
  color: rgba(23, 19, 31, 0.56);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helga-context-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.helga-context-toolbar__actions form {
  margin: 0;
  display: inline-flex;
}
.helga-context-toolbar__action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 6px;
  background: var(--helga-white);
  color: var(--helga-purple) !important;
  font-size: 13px;
  font-family: inherit;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.helga-context-toolbar__action:hover,
.helga-context-toolbar__action:focus-visible {
  border-color: rgba(0, 0, 102, 0.32);
  background: #f0f0fa;
}
.helga-context-toolbar__action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.helga-context-toolbar__action--primary {
  min-width: 92px;
  border-color: var(--helga-purple);
  background: var(--helga-purple);
  color: var(--helga-white) !important;
}
.helga-context-toolbar__action--primary *,
.helga-context-toolbar__action--primary svg {
  color: var(--helga-white) !important;
  stroke: currentColor;
}
.helga-context-toolbar__action--primary:hover,
.helga-context-toolbar__action--primary:focus-visible {
  background: #00004d;
  color: var(--helga-white) !important;
}
.helga-case-panel .helga-context-toolbar__action--primary,
.helga-case-panel .helga-lage__action,
.helga-case-panel .helga-lage__action:hover,
.helga-case-panel .helga-lage__action:focus-visible {
  color: var(--helga-white) !important;
}
.helga-context-toolbar__action--danger {
  border-color: rgba(190, 18, 60, 0.28);
  color: #be123c !important;
}
.helga-context-toolbar__action--danger:hover,
.helga-context-toolbar__action--danger:focus-visible {
  background: rgba(190, 18, 60, 0.06);
}
.helga-toolbar-target {
  scroll-margin-top: 156px;
}

/* ============================================================
   HELGA.legal Akten-Workbench: Akte als operative Arbeitszentrale.
   ============================================================ */
.helga-main--legal-matter {
  max-width: none;
  padding: 20px var(--helga-app-gutter) 48px;
}
@supports (padding: max(0px)) {
  .helga-main--legal-matter {
    padding-left: max(var(--helga-app-gutter), env(safe-area-inset-left));
    padding-right: max(var(--helga-app-gutter), env(safe-area-inset-right));
  }
}
.legal-matter-workbench {
  display: block;
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.legal-matter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: var(--helga-white);
  box-shadow: var(--helga-shadow-card);
}
.legal-matter-eyebrow {
  margin: 0 0 8px;
  color: rgba(23, 19, 31, 0.54);
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-matter-head h1 {
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(34px, 4.5vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0;
}
.legal-matter-head p {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--helga-text-muted);
  font-size: 16px !important;
  line-height: 1.48 !important;
}
.legal-matter-head__details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 6px;
  background: var(--helga-white);
  color: var(--helga-purple);
  font-family: inherit;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 800;
  cursor: pointer;
}
.legal-matter-head__details:hover,
.legal-matter-head__details:focus-visible {
  border-color: rgba(0, 0, 102, 0.32);
  background: #f0f0fa;
}
.legal-matter-head__details svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.legal-requirements-flag {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  justify-self: end;
  width: min(100%, 480px);
  padding: 18px 20px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 8px;
  background: #f7f7fc;
  color: var(--helga-purple);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.legal-requirements-flag:hover,
.legal-requirements-flag:focus-visible {
  border-color: rgba(0, 0, 102, 0.32);
  outline: none;
}
.legal-requirements-flag.is-open {
  border-color: rgba(191, 99, 66, 0.32);
  background: #fff8ef;
}
.legal-requirements-flag.is-complete {
  border-color: rgba(12, 116, 72, 0.24);
  background: #f2faf5;
}
.legal-requirements-flag__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  color: #8a3d1f;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.legal-requirements-flag.is-complete .legal-requirements-flag__icon {
  color: #0d6842;
}
.legal-requirements-flag__body {
  display: block;
  min-width: 0;
}
.legal-requirements-flag__label {
  display: block;
  margin-bottom: 4px;
  color: rgba(23, 19, 31, 0.54);
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-requirements-flag__action,
.legal-requirements-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--helga-purple);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}
.legal-requirements-flag__action {
  justify-self: end;
}
.legal-requirements-score.is-open {
  border-color: rgba(191, 99, 66, 0.32);
  background: #fff8ef;
  color: #8a3d1f;
}
.legal-requirements-score.is-complete {
  border-color: rgba(12, 116, 72, 0.24);
  background: #f2faf5;
  color: #0d6842;
}
.legal-requirements-card {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(191, 99, 66, 0.22);
  border-radius: 8px;
  background: #fff;
}
.legal-workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.legal-workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 8px;
  background: #fff;
}
.legal-workflow-step.is-open,
.legal-workflow-step.is-blocked {
  border-color: rgba(191, 38, 54, 0.22);
  background: #fff8ef;
}
.legal-workflow-step.is-complete {
  border-color: rgba(12, 116, 72, 0.20);
  background: #f2faf5;
}
.legal-workflow-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #bf2636;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.legal-workflow-step.is-complete .legal-workflow-step__icon {
  color: #0d6842;
}
.legal-workflow-step__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.legal-workflow-step__body strong {
  color: var(--helga-purple);
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  overflow-wrap: anywhere;
}
.legal-workflow-step__body small {
  color: var(--helga-text-muted);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-workflow-step__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple) !important;
  font-family: inherit;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  cursor: pointer;
}
.legal-workflow-step__action:hover,
.legal-workflow-step__action:focus-visible {
  border-color: rgba(0, 0, 102, 0.32);
  background: var(--helga-purple);
  color: #fff !important;
}
.legal-requirements-flag strong {
  display: block;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}
.legal-next-step-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid rgba(191, 99, 66, 0.28);
  border-radius: 8px;
  background: #fff8ef;
  color: var(--helga-purple);
}
.legal-next-step-card--inset {
  margin: 0 18px 18px;
}
.legal-next-step-card__eyebrow {
  margin: 0 0 6px;
  color: rgba(23, 19, 31, 0.56);
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-next-step-card h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 22px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
}
.legal-next-step-card p {
  margin: 7px 0 0;
  max-width: 760px;
  color: var(--helga-text);
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.legal-next-step-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.legal-next-step-card__primary,
.legal-next-step-card__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-decoration: none;
  white-space: nowrap;
}
.legal-next-step-card__primary {
  border: 1px solid var(--helga-purple);
  background: var(--helga-purple);
  color: #fff;
}
.legal-next-step-card__secondary {
  border: 1px solid rgba(0, 0, 102, 0.18);
  background: #fff;
  color: var(--helga-purple);
}
.legal-matter-head__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(0, 0, 102, 0.12);
  background: #fffdf8;
}
.legal-matter-head__facts div {
  min-width: 0;
  padding: 14px 12px;
  border-right: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-matter-head__facts div:last-child {
  border-right: 0;
}
.legal-matter-head__facts span {
  display: block;
  color: var(--helga-purple);
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}
.legal-matter-head__facts small {
  display: block;
  margin-top: 7px;
  color: rgba(23, 19, 31, 0.54);
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-matter-layout {
  display: block;
}
.legal-matter-rail,
.legal-matter-workarea,
.legal-matter-panel,
.legal-summary-band,
.legal-overview-grid > section {
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: var(--helga-white);
  box-shadow: var(--helga-shadow-card);
}
.legal-matter-rail {
  position: sticky;
  top: 156px;
  padding: 0;
  overflow: hidden;
}
.legal-rail-section {
  padding: 20px 22px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.legal-rail-section:last-child {
  border-bottom: 0;
}
.legal-rail-section h2,
.legal-overview-grid h3,
.legal-tab-head h2,
.legal-history-head h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-rail-list {
  display: grid;
  gap: 13px;
  margin: 0;
}
.legal-rail-list div {
  min-width: 0;
}
.legal-rail-list dt {
  margin: 0 0 3px;
  color: rgba(23, 19, 31, 0.50);
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-rail-list dd {
  margin: 0;
  color: var(--helga-purple);
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
.legal-compact-list,
.legal-workstream-list,
.legal-side-links,
.legal-fact-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-compact-list li,
.legal-side-links li,
.legal-fact-list li {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.legal-compact-list strong,
.legal-workstream-list strong {
  display: block;
  color: var(--helga-purple);
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.legal-compact-list span,
.legal-workstream-list span,
.legal-side-links li,
.legal-fact-list li {
  display: block;
  color: var(--helga-text-muted);
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.legal-matter-workarea {
  padding: 0;
  overflow: hidden;
}
.legal-matter-panels {
  display: grid;
  gap: 20px;
  padding: 20px;
}
.legal-matter-panel {
  display: block;
  padding: 22px;
  scroll-margin-top: 104px;
}
.legal-summary-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
  padding: 22px;
  box-shadow: none;
}
.legal-summary-band h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.12 !important;
}
.legal-summary-band p,
.legal-empty-copy,
.legal-helga-summary {
  margin: 0;
  color: var(--helga-text-muted);
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.legal-overview-grid,
.legal-party-grid,
.legal-helga-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.legal-overview-grid > section,
.legal-party-grid > article,
.legal-helga-grid > article {
  min-width: 0;
  padding: 18px;
  box-shadow: none;
}
.legal-overview-grid header,
.legal-tab-head,
.legal-history-head,
.legal-compose-row,
.legal-compose-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.legal-compose-list {
  display: grid;
  gap: 0;
}
.legal-compose-row {
  align-items: center;
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.legal-compose-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.legal-compose-row:last-child {
  padding-bottom: 0;
}
.legal-compose-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.legal-compose-main strong {
  color: var(--helga-purple);
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere;
}
.legal-compose-main span {
  color: var(--helga-text-muted);
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}
.legal-compose-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.legal-compose-actions form,
.legal-history-entry__actions form,
.legal-file-row form {
  display: inline-flex;
  margin: 0;
}
.legal-overview-grid header a,
.legal-tab-head a,
.legal-compose-actions a,
.legal-history-entry__actions a,
.legal-file-row a,
.legal-tab-head button,
.legal-compose-actions button,
.legal-history-entry__actions button,
.legal-file-row button,
.legal-note-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple) !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer;
}
.legal-requirements-groups {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
.legal-requirements-group {
  min-width: 0;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.legal-requirements-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
  background: #fffdf8;
}
.legal-requirements-group h3 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.legal-requirements-group header span {
  flex: 0 0 auto;
  color: rgba(23, 19, 31, 0.56);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-requirements-list {
  display: grid;
}
.legal-requirement-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 15px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.legal-requirement-item:first-child {
  border-top: 0;
}
.legal-requirement-item.is-open {
  background: #fffaf3;
}
.legal-requirement-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #0d6842;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.legal-requirement-item.is-open .legal-requirement-status-icon {
  color: #bf2636;
}
.legal-requirement-item strong,
.legal-requirement-item__body > span {
  display: block;
}
.legal-requirement-item strong {
  color: var(--helga-purple);
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
.legal-requirement-item__body > span {
  margin-top: 5px;
  color: var(--helga-text-muted);
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.legal-requirement-item__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.legal-requirement-item__actions a,
.legal-requirement-item__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple);
  font-family: inherit;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  cursor: pointer;
  text-decoration: none !important;
}
.legal-requirement-item__actions a:hover,
.legal-requirement-item__actions a:focus-visible,
.legal-requirement-item__actions button:hover,
.legal-requirement-item__actions button:focus-visible {
  border-color: rgba(0, 0, 102, 0.32);
  background: var(--helga-purple);
  color: #fff;
}
.legal-workstream-list a,
.legal-file-row a {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none !important;
}
.legal-workstream-list li,
.legal-file-row,
.legal-history-entry {
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.legal-workstream-list li:first-child,
.legal-file-row:first-child,
.legal-history-entry:first-child {
  border-top: 0;
}
.legal-workstream-list li {
  padding: 12px 0 0;
}
.legal-history-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.legal-history-filters button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 999px;
  background: #fff;
  color: rgba(0, 0, 102, 0.72);
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer;
}
.legal-history-filters button.is-active {
  border-color: var(--helga-purple);
  background: #f0f0fa;
  color: var(--helga-purple);
}
.legal-note-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: #fffdf8;
}
.legal-note-form label {
  display: grid;
  gap: 6px;
  color: rgba(23, 19, 31, 0.56);
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.legal-note-form select,
.legal-note-form textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 102, 0.16);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple);
  font-family: inherit;
  font-size: 14px !important;
  letter-spacing: 0;
}
.legal-note-form select {
  min-height: 42px;
  padding: 0 10px;
}
.legal-note-form textarea {
  min-height: 90px;
  padding: 10px;
  resize: vertical;
}
.legal-note-form button {
  min-height: 42px;
  border-color: var(--helga-purple);
  background: var(--helga-purple);
  color: #fff !important;
}
.legal-history-list {
  display: grid;
  gap: 0;
}
.legal-history-list--compact {
  margin-top: 18px;
}
.legal-history-list--compact .legal-history-entry {
  grid-template-columns: 16px minmax(0, 1fr);
}
.legal-history-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto 52px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
}
.legal-history-entry[hidden] {
  display: none !important;
}
.legal-history-entry__mark {
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--helga-purple);
}
.legal-history-select-spacer {
  width: 18px;
  height: 18px;
}
.legal-history-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 66px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple);
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.legal-history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.legal-history-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(23, 19, 31, 0.54);
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.legal-history-entry h3 {
  margin: 4px 0 0;
  color: var(--helga-purple);
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.legal-history-entry p {
  margin: 7px 0 0;
  color: var(--helga-text-muted);
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.legal-history-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.legal-file-list {
  display: grid;
  margin-top: 12px;
}
.legal-file-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
}
.legal-file-row strong {
  display: block;
  color: var(--helga-purple);
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.legal-file-row span {
  display: block;
  margin-top: 4px;
  color: var(--helga-text-muted);
  font-size: 12px !important;
}
.legal-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--helga-text-muted);
  font-size: 13px !important;
}
.legal-party-grid,
.legal-helga-grid {
  margin-top: 18px;
}
.legal-party-grid > article,
.legal-helga-grid > article {
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: #fffdf8;
}
.legal-party-grid p,
.legal-helga-grid p {
  margin: 0 0 8px;
  color: var(--helga-orange);
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-party-grid h3,
.legal-helga-grid h3 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 17px !important;
  line-height: 1.25 !important;
}
.legal-party-grid span,
.legal-helga-grid span {
  display: block;
  margin-top: 8px;
  color: var(--helga-text-muted);
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.legal-insolvency-status,
.legal-data-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 999px;
  background: #f7f7fc;
  color: var(--helga-purple);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-data-badge--warn {
  border-color: rgba(191, 99, 66, 0.32);
  background: #fff8ef;
  color: #8a3d1f;
}
.legal-alert-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.legal-alert-list li {
  padding: 10px 12px;
  border: 1px solid rgba(191, 99, 66, 0.32);
  border-radius: 6px;
  background: #fff8ef;
  color: #70401f;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.legal-serial-letter-action {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 0;
}
.legal-serial-letter-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(0, 0, 102, 0.18);
  border-radius: 6px;
  background: var(--helga-purple);
  color: #fff;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-serial-letter-preview {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: #fffdf8;
}
.legal-serial-letter-preview h3 {
  margin: 2px 0 0;
  color: var(--helga-purple);
  font-size: 18px !important;
  line-height: 1.2 !important;
}
.legal-serial-letter-preview ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-serial-letter-preview li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.legal-serial-letter-preview strong {
  min-width: 0;
  color: var(--helga-purple);
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.legal-insolvency-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 14px;
}
.legal-insolvency-summary span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f0fa;
  color: var(--helga-purple);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-insolvency-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: #fff;
}
.legal-insolvency-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}
.legal-insolvency-table th,
.legal-insolvency-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
  color: var(--helga-purple);
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-align: left;
  vertical-align: top;
}
.legal-insolvency-table th {
  background: #fffdf8;
  color: rgba(23, 19, 31, 0.55);
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.legal-insolvency-table td strong,
.legal-insolvency-table td span {
  display: block;
}
.legal-insolvency-table td span {
  margin-top: 4px;
  color: var(--helga-text-muted);
  font-size: 12px !important;
}
.legal-insolvency-table td .legal-data-badge {
  display: inline-flex;
  margin-top: 0;
  color: var(--helga-purple);
}
.legal-insolvency-table td .legal-data-badge--warn {
  color: #8a3d1f;
}
.legal-insolvency-table tr:last-child td {
  border-bottom: 0;
}
.legal-insolvency-table tr.is-incomplete td {
  background: #fffaf3;
}
.legal-insolvency-table tbody tr[data-insolvency-edit-url] {
  cursor: pointer;
}
.legal-insolvency-table tbody tr[data-insolvency-edit-url]:hover td,
.legal-insolvency-table tbody tr[data-insolvency-edit-url]:focus-visible td {
  background: #f7f7fc;
}
.legal-insolvency-table tbody tr[data-insolvency-edit-url]:focus-visible {
  outline: 2px solid var(--helga-purple);
  outline-offset: -2px;
}
.legal-insolvency-table .legal-insolvency-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.legal-insolvency-edit-link {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(0, 0, 102, 0.18);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple);
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  cursor: pointer;
}
.legal-insolvency-edit-link:hover,
.legal-insolvency-edit-link:focus-visible {
  background: var(--helga-purple);
  color: #fff;
}
.legal-insolvency-edit-dialog {
  width: min(920px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.legal-insolvency-edit-dialog::backdrop {
  background: rgba(17, 16, 20, 0.38);
}
.legal-insolvency-edit-dialog__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--helga-shadow-floating);
  overflow: hidden;
}
.legal-insolvency-edit-dialog__panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.10);
}
.legal-insolvency-edit-dialog__panel h2 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-insolvency-edit-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--helga-purple);
  cursor: pointer;
}
.legal-insolvency-edit-dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.legal-insolvency-edit-body {
  margin: 0;
  background: #fff;
  color: var(--helga-text);
}
.legal-insolvency-edit,
.legal-insolvency-edit-saved {
  padding: 22px;
}
.legal-insolvency-edit header {
  margin-bottom: 18px;
}
.legal-insolvency-edit h1,
.legal-insolvency-edit-saved h1 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-insolvency-edit-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 99, 66, 0.32);
  border-radius: 6px;
  background: #fff8ef;
  color: #70401f;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.legal-insolvency-edit-form {
  display: grid;
  gap: 18px;
}
.legal-insolvency-edit-form fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
.legal-insolvency-edit-form legend {
  margin-bottom: 2px;
  color: rgba(23, 19, 31, 0.54);
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.legal-insolvency-edit-form label {
  display: grid;
  gap: 5px;
  color: var(--helga-purple);
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.legal-insolvency-edit-form input,
.legal-insolvency-edit-form select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-text);
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}
.legal-insolvency-edit-form input:focus,
.legal-insolvency-edit-form select:focus {
  border-color: var(--helga-purple);
  outline: 2px solid rgba(0, 0, 102, 0.12);
  outline-offset: 1px;
}
.legal-insolvency-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
}
.legal-insolvency-edit-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.legal-insolvency-edit-form footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
.legal-insolvency-edit-form button[type="submit"] {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--helga-purple);
  color: #fff;
  font-weight: 800 !important;
  cursor: pointer;
}
.legal-insolvency-edit-saved p {
  margin: 8px 0 0;
  color: var(--helga-text-muted);
}
.legal-fact-list {
  margin-top: 18px;
}
.legal-side-links li {
  color: var(--helga-purple);
  font-weight: 700 !important;
}
.legal-matter-details-dialog {
  width: min(860px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 40px));
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.legal-matter-details-dialog::backdrop {
  background: rgba(17, 16, 20, 0.36);
}
.legal-matter-details-dialog__panel {
  display: block;
  padding: 24px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--helga-shadow-floating);
}
.legal-matter-details-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.legal-matter-details-dialog__head h2,
.legal-matter-details-dialog__grid h3 {
  margin: 0;
  color: var(--helga-purple);
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.legal-matter-details-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 102, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--helga-purple);
  cursor: pointer;
}
.legal-matter-details-dialog__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
}
.legal-matter-details-dialog__grid section {
  min-width: 0;
}
.legal-matter-details-dialog__grid h3 {
  margin-bottom: 14px;
}
.legal-matter-details-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.legal-matter-details-form label {
  display: grid;
  gap: 5px;
  color: rgba(23, 19, 31, 0.62);
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}
.legal-matter-details-form input,
.legal-matter-details-form select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 102, 0.16);
  border-radius: 6px;
  background: #fff;
  color: var(--helga-purple);
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  text-transform: none;
}
.legal-matter-details-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.legal-matter-details-form legend {
  margin: 0 0 8px;
  color: rgba(23, 19, 31, 0.62);
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}
.legal-matter-details-form__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}
.legal-matter-details-form__checks label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--helga-purple);
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  text-transform: none;
}
.legal-matter-details-form__checks input {
  width: auto;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
}
.legal-matter-details-form__submit {
  justify-self: start;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--helga-purple);
  border-radius: 6px;
  background: var(--helga-purple);
  color: #fff;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  cursor: pointer;
}
@media (max-width: 1180px) {
  .legal-matter-head,
  .legal-summary-band {
    grid-template-columns: 1fr;
  }
  .legal-matter-rail {
    position: static;
  }
  .legal-note-form {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .helga-main--legal-matter {
    padding: 16px var(--helga-app-gutter-mobile) 32px;
  }
  @supports (padding: max(0px)) {
    .helga-main--legal-matter {
      padding-left: max(var(--helga-app-gutter-mobile), env(safe-area-inset-left));
      padding-right: max(var(--helga-app-gutter-mobile), env(safe-area-inset-right));
    }
  }
  .legal-matter-workbench {
    padding-inline: 0;
  }
  .legal-matter-head {
    padding: 22px;
  }
  .legal-requirements-flag {
    grid-template-columns: 38px minmax(0, 1fr);
    justify-self: stretch;
    width: 100%;
  }
  .legal-requirements-flag__action {
    grid-column: 2;
    justify-self: start;
  }
  .legal-next-step-card {
    grid-template-columns: 1fr;
  }
  .legal-next-step-card--inset {
    margin: 0 12px 16px;
  }
  .legal-next-step-card__actions {
    justify-content: stretch;
  }
  .legal-next-step-card__primary,
  .legal-next-step-card__secondary {
    width: 100%;
  }
  .legal-insolvency-edit-dialog {
    width: min(720px, calc(100vw - 18px));
    height: min(760px, calc(100vh - 18px));
  }
  .legal-insolvency-edit,
  .legal-insolvency-edit-saved {
    padding: 16px;
  }
  .legal-insolvency-edit-grid,
  .legal-insolvency-edit-grid--two {
    grid-template-columns: 1fr;
  }
  .legal-serial-letter-action {
    justify-content: stretch;
  }
  .legal-serial-letter-action button {
    width: 100%;
  }
  .legal-serial-letter-preview {
    grid-template-columns: 1fr;
  }
  .legal-serial-letter-preview li {
    align-items: flex-start;
    flex-direction: column;
  }
  .legal-matter-head__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-matter-head__facts div:nth-child(2) {
    border-right: 0;
  }
  .legal-overview-grid,
  .legal-party-grid,
  .legal-helga-grid {
    grid-template-columns: 1fr;
  }
  .legal-matter-panels,
  .legal-matter-panel {
    padding: 16px;
  }
  .legal-history-head,
  .legal-tab-head,
  .legal-overview-grid header,
  .legal-compose-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .legal-requirement-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .legal-workflow-step {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .legal-workflow-step__action {
    grid-column: 2;
    justify-self: start;
  }
  .legal-requirement-item__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .legal-compose-row {
    align-items: stretch;
    flex-direction: column;
  }
  .legal-compose-actions {
    justify-content: flex-start;
  }
  .legal-history-filters {
    justify-content: flex-start;
  }
  .legal-history-entry {
    grid-template-columns: auto 46px minmax(0, 1fr);
    gap: 10px;
  }
  .legal-history-thumb {
    width: 46px;
    height: 58px;
  }
  .legal-history-entry__mark {
    grid-column: 2;
  }
  .legal-history-entry__body {
    grid-column: 3;
  }
  .legal-history-list--compact .legal-history-entry__mark {
    grid-column: 1;
  }
  .legal-history-list--compact .legal-history-entry__body {
    grid-column: 2;
  }
  .legal-matter-details-dialog__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Register-Detail: Trennblatt zwischen Aktenordner und Vorgang.
   ============================================================ */
.helga-register-page {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.helga-register-summary,
.helga-register-panel {
  border: none !important;
  border-radius: 8px !important;
  background: var(--helga-white) !important;
  box-shadow: var(--helga-shadow-card) !important;
}
.helga-register-summary {
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 46px);
  margin-bottom: 28px;
}
.helga-register-summary h1 {
  color: var(--helga-purple) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.helga-register-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}
.helga-register-score {
  min-width: 160px;
  text-align: right;
  color: var(--helga-purple);
}
.helga-register-score span {
  display: block;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
  font-weight: 800;
}
.helga-register-score small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(23, 19, 31, 0.54);
}
.helga-register-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.helga-register-kpis > div {
  border-top: 1px solid rgba(191, 99, 66, 0.24);
  padding-top: 14px;
}
.helga-register-kpis span {
  display: block;
  color: var(--helga-purple);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.helga-register-kpis small,
.helga-register-panel__head {
  color: rgba(23, 19, 31, 0.54) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}
.helga-register-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 0;
  margin: 0 0 22px;
  border-bottom: 1px solid rgba(191, 99, 66, 0.28);
  scrollbar-width: thin;
}
.helga-register-tabs--detail {
  margin-top: -8px;
  margin-bottom: 28px;
}
.helga-register-legacy-grid,
.helga-register-legacy-null-row {
  display: none !important;
}
.helga-register-tab {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 148px;
  max-width: 240px;
  min-height: 56px;
  padding: 10px 18px 11px;
  border: 1px solid rgba(0, 0, 102, 0.08);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.38);
  color: rgba(0, 0, 102, 0.62) !important;
  text-decoration: none !important;
  transform: translateY(1px);
  white-space: nowrap;
  opacity: 0.68;
  filter: saturate(0.72);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease,
    filter 0.16s ease,
    min-height 0.16s ease,
    padding 0.16s ease;
}
.helga-register-tab + .helga-register-tab {
  margin-left: -1px;
}
.helga-register-tab:hover {
  background: rgba(255, 255, 255, 0.74);
  color: var(--helga-purple) !important;
  opacity: 0.9;
  filter: none;
  text-decoration: none !important;
}
.helga-register-tab.is-active {
  z-index: 1;
  min-height: 74px;
  padding-top: 16px;
  padding-bottom: 17px;
  background: var(--helga-white);
  color: var(--helga-purple) !important;
  border-color: rgba(191, 99, 66, 0.34);
  border-radius: 5px 5px 0 0;
  opacity: 1;
  filter: none;
  box-shadow: 0 -10px 30px rgba(17, 16, 20, 0.08);
}
.helga-register-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--helga-white);
}
.helga-register-tab--muted {
  color: rgba(0, 0, 102, 0.52) !important;
  background: rgba(255, 255, 255, 0.34);
}
.helga-register-tab--add {
  border-style: dashed;
  color: rgba(191, 99, 66, 0.78) !important;
  cursor: pointer;
  text-align: left;
  font: inherit;
  border-radius: 5px 5px 0 0;
}
.helga-register-tab--add:hover {
  color: var(--helga-orange) !important;
}
.helga-register-tab__name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  line-height: 1.25;
}
.helga-register-tab__meta {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(23, 19, 31, 0.54);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aktenordner-register-empty {
  margin: 14px 0 0;
  color: rgba(23, 19, 31, 0.58);
  font-size: 14px;
  line-height: 1.55;
}
.helga-register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: clamp(22px, 2.6vw, 34px);
}
.helga-register-layout--single {
  display: block;
}
.helga-register-main {
  min-width: 0;
}
.helga-register-sibling-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}
.helga-register-sibling-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 102, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--helga-purple);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.helga-register-sibling-chips a:hover {
  border-color: rgba(191, 99, 66, 0.3);
  background: #fff;
}
.helga-register-panel {
  padding: 22px;
  margin-bottom: 24px;
}
.helga-register-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -22px -22px 18px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(191, 99, 66, 0.24);
}
.helga-register-panel__head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
.helga-register-panel__head span {
  color: var(--helga-purple);
}
.helga-register-summary-panel p {
  margin: 0;
  color: var(--helga-ink);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
}
.helga-register-summary-panel .helga-register-assist {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 4px;
  background: rgba(0, 0, 102, 0.04);
  color: var(--helga-purple);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.helga-register-summary-panel form {
  margin-top: 14px;
}
.helga-register-risk {
  display: grid;
  grid-template-columns: minmax(72px, 112px) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 30px);
  align-items: center;
}
.helga-register-risk__score {
  color: var(--helga-danger);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0;
}
.helga-register-risk__body {
  min-width: 0;
}
.helga-register-risk__caption {
  margin-bottom: 12px;
  color: rgba(23, 19, 31, 0.54);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.helga-register-risk p {
  margin: 10px 0 0;
  color: rgba(23, 19, 31, 0.68);
  font-size: 14px;
  line-height: 1.55;
}
.helga-register-deadlines {
  display: grid;
  gap: 10px;
}
.helga-register-deadline {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 14px;
  border-left: 3px solid rgba(0, 0, 102, 0.2);
  background: rgba(0, 0, 102, 0.035);
  color: var(--helga-ink) !important;
  text-decoration: none !important;
}
.helga-register-deadline.is-warn {
  border-left-color: var(--helga-warning);
}
.helga-register-deadline.is-danger {
  border-left-color: var(--helga-danger);
}
.helga-register-deadline span {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: rgba(23, 19, 31, 0.62);
}
.helga-register-deadline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--helga-purple);
}
.helga-register-case-list {
  padding: 0 !important;
}
.helga-register-case-list .vorgang-row {
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.helga-register-case-list .vorgang-row:first-child {
  border-top: 0;
}
.helga-register-case-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.helga-register-case-board--closed {
  margin-top: 14px;
}
.helga-register-case-folder {
  position: relative;
  display: grid;
  min-height: 150px;
  padding: 22px 20px 18px;
  border: 1px solid rgba(0, 0, 102, 0.10);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84)),
    var(--helga-paper);
  color: var(--helga-ink) !important;
  text-decoration: none !important;
  box-shadow: 0 12px 34px rgba(17, 16, 20, 0.055);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}
.helga-register-case-folder:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 99, 66, 0.34);
  box-shadow: 0 18px 44px rgba(17, 16, 20, 0.09);
}
.helga-register-case-folder__tab {
  display: block;
  width: 34px;
  height: 24px;
  margin-bottom: 18px;
  background:
    linear-gradient(90deg, var(--helga-orange) 0 34%, transparent 34%),
    linear-gradient(var(--helga-terracotta-soft), var(--helga-terracotta-soft));
}
.helga-register-case-folder__meta {
  color: rgba(23, 19, 31, 0.50);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.helga-register-case-folder strong {
  display: block;
  margin-top: 7px;
  color: var(--helga-purple);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 800;
}
.helga-register-case-folder__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 14px;
  color: rgba(23, 19, 31, 0.62);
  font-size: 13px;
}
.helga-register-case-folder__deadline {
  justify-self: start;
  margin-top: 16px;
  padding-left: 10px;
  border-left: 3px solid rgba(0, 0, 102, 0.20);
  color: rgba(23, 19, 31, 0.68);
  font-size: 13px;
  font-weight: 700;
}
.helga-register-case-folder__deadline.is-warn {
  border-left-color: var(--helga-warning);
}
.helga-register-case-folder__deadline.is-danger {
  border-left-color: var(--helga-danger);
  color: var(--helga-danger);
}
.helga-register-case-folder__bubble {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 34px;
  padding: 4px 8px;
  background: var(--helga-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.helga-register-case-folder.has-deadline {
  border-left: 4px solid var(--helga-orange);
}
.helga-register-case-folder.is-closed {
  opacity: 0.62;
  filter: saturate(0.72);
}
.helga-register-empty {
  margin: 0;
  color: rgba(23, 19, 31, 0.62);
  font-size: 14px;
}
.helga-register-closed {
  margin-top: 18px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
  padding-top: 14px;
}
.helga-register-closed summary {
  cursor: pointer;
  color: var(--helga-purple);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .search-form {
    grid-template-columns: 1fr;
  }
  .segment-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .case-group__summary,
  .case-folder__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .helga-brief-page {
    padding-inline: 0;
  }
  .helga-brief-summary {
    padding: 22px 18px !important;
  }
  .helga-brief-sidebar {
    position: static;
  }
  .helga-case-page {
    padding-inline: 0;
  }
  .helga-case-status,
  .helga-case-meta-panel,
  .helga-case-panel {
    padding: 22px 18px !important;
  }
  .helga-case-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .helga-case-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .helga-case-tragweite {
    margin-inline: 0;
    padding-inline: 0;
  }
  .helga-case-state-strip {
    flex-direction: column;
    padding: 20px 18px;
  }
  .helga-case-state-strip h2 {
    font-size: 28px;
  }
  .helga-case-state-delta {
    min-width: 0;
    text-align: left;
  }
  .helga-case-panel summary {
    margin: -22px -18px 18px !important;
    padding: 16px 18px !important;
  }
  .helga-case-register-form {
    display: block !important;
    margin: 10px 0 0 !important;
  }
  .helga-context-toolbar {
    top: 84px;
    align-items: stretch;
    display: grid;
    gap: 8px;
    margin: -2px 0 18px;
  }
  .helga-context-toolbar__context {
    white-space: normal;
  }
  .helga-context-toolbar__actions {
    justify-content: flex-start;
    padding-bottom: 2px;
  }
  .helga-context-toolbar__action {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .helga-case-new-register {
    display: flex;
    margin: 8px 0 0 !important;
  }
  .helga-case-new-register.hidden {
    display: none;
  }
  .helga-register-page {
    padding-inline: 0;
  }
  .helga-register-title-row,
  .helga-register-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .helga-register-title-row {
    display: grid;
  }
  .helga-register-score {
    text-align: left;
  }
  .helga-register-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .helga-register-tabs {
    margin-inline: -4px;
    padding-inline: 4px;
  }
  .helga-register-tab {
    min-width: 136px;
    max-width: 190px;
    padding-inline: 14px;
  }
  .helga-register-deadline {
    grid-template-columns: minmax(0, 1fr);
  }
  .helga-register-deadline strong {
    white-space: normal;
  }
  .helga-register-risk {
    grid-template-columns: minmax(0, 1fr);
  }
  .aktenordner-lage {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px;
  }
  .aktenordner-lage__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
  .aktenordner-lage__facts div {
    padding: 12px 10px;
  }
  .aktenordner-lage__refresh {
    display: grid;
  }
  .schreibtisch-lage {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px;
  }
  .schreibtisch-lage__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
  .schreibtisch-lage__facts div {
    padding: 12px 10px;
  }
  .schreibtisch-focus-grid {
    grid-template-columns: 1fr;
  }
  .desk-calendar {
    padding: 20px 14px;
  }
  .desk-calendar__head {
    display: grid;
    align-items: start;
  }
  .desk-calendar__days {
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    overflow-x: auto;
  }
  .desk-calendar__day {
    min-height: 56px;
    padding: 8px;
  }
}

/* ============================================================
   Button contrast guard
   ============================================================
   Last-line protection for solid dark buttons/CTAs. Several legacy
   containers intentionally recolor links and buttons with !important.
   A solid HELGA/Navy button must still keep white text and white icons.
   ============================================================ */
a[class~="bg-helga-500"],
a[class~="bg-helga-600"],
a[class~="bg-helga-700"],
a[class~="bg-helga-800"],
a[class~="bg-helga-900"],
a[class~="bg-lila-600"],
a[class~="bg-lila-700"],
a[class~="bg-lila-800"],
a[class~="bg-lila-900"],
a[class~="bg-blue-600"],
a[class~="bg-blue-700"],
a[class~="bg-blue-900"],
a[class~="bg-indigo-600"],
a[class~="bg-indigo-700"],
a[class~="bg-indigo-900"],
a[class~="bg-violet-600"],
a[class~="bg-violet-700"],
a[class~="bg-violet-800"],
a[class~="bg-violet-900"],
a[class~="bg-slate-800"],
a[class~="bg-slate-900"],
button[class~="bg-helga-500"],
button[class~="bg-helga-600"],
button[class~="bg-helga-700"],
button[class~="bg-helga-800"],
button[class~="bg-helga-900"],
button[class~="bg-lila-600"],
button[class~="bg-lila-700"],
button[class~="bg-lila-800"],
button[class~="bg-lila-900"],
button[class~="bg-blue-600"],
button[class~="bg-blue-700"],
button[class~="bg-blue-900"],
button[class~="bg-indigo-600"],
button[class~="bg-indigo-700"],
button[class~="bg-indigo-900"],
button[class~="bg-violet-600"],
button[class~="bg-violet-700"],
button[class~="bg-violet-800"],
button[class~="bg-violet-900"],
button[class~="bg-slate-800"],
button[class~="bg-slate-900"],
input[type="button"][class~="bg-helga-500"],
input[type="submit"][class~="bg-helga-500"],
input[type="reset"][class~="bg-helga-500"],
a.btn-primary,
button.btn-primary,
input.btn-primary,
a.helga-btn-primary,
button.helga-btn-primary,
input.helga-btn-primary,
a.helga-btn-purple,
button.helga-btn-purple,
input.helga-btn-purple,
a.helga-context-toolbar__action--primary,
button.helga-context-toolbar__action--primary,
.helga-case-panel a.helga-context-toolbar__action--primary,
.helga-case-panel button.helga-context-toolbar__action--primary,
a.helga-lage__action,
button.helga-lage__action,
.helga-case-panel a.helga-lage__action,
.helga-case-panel button.helga-lage__action,
.search-form__button,
.list-row__btn,
.flow-choice--primary,
.pricing-card__cta:not(.pricing-card__cta--secondary),
.legal-suite-btn--primary,
.legal-note-form button,
.legal-serial-letter-action button,
.legal-insolvency-edit-saved button,
.legal-matter-details-form__submit {
  color: var(--helga-white, #fff) !important;
}

a[class~="bg-helga-500"] *,
a[class~="bg-helga-600"] *,
a[class~="bg-helga-700"] *,
a[class~="bg-helga-800"] *,
a[class~="bg-helga-900"] *,
a[class~="bg-lila-600"] *,
a[class~="bg-lila-700"] *,
a[class~="bg-lila-800"] *,
a[class~="bg-lila-900"] *,
a[class~="bg-blue-600"] *,
a[class~="bg-blue-700"] *,
a[class~="bg-blue-900"] *,
a[class~="bg-indigo-600"] *,
a[class~="bg-indigo-700"] *,
a[class~="bg-indigo-900"] *,
a[class~="bg-violet-600"] *,
a[class~="bg-violet-700"] *,
a[class~="bg-violet-800"] *,
a[class~="bg-violet-900"] *,
a[class~="bg-slate-800"] *,
a[class~="bg-slate-900"] *,
button[class~="bg-helga-500"] *,
button[class~="bg-helga-600"] *,
button[class~="bg-helga-700"] *,
button[class~="bg-helga-800"] *,
button[class~="bg-helga-900"] *,
button[class~="bg-lila-600"] *,
button[class~="bg-lila-700"] *,
button[class~="bg-lila-800"] *,
button[class~="bg-lila-900"] *,
button[class~="bg-blue-600"] *,
button[class~="bg-blue-700"] *,
button[class~="bg-blue-900"] *,
button[class~="bg-indigo-600"] *,
button[class~="bg-indigo-700"] *,
button[class~="bg-indigo-900"] *,
button[class~="bg-violet-600"] *,
button[class~="bg-violet-700"] *,
button[class~="bg-violet-800"] *,
button[class~="bg-violet-900"] *,
button[class~="bg-slate-800"] *,
button[class~="bg-slate-900"] *,
.btn-primary *,
.helga-btn-primary *,
.helga-btn-purple *,
.helga-context-toolbar__action--primary *,
.helga-lage__action *,
.search-form__button *,
.list-row__btn *,
.flow-choice--primary *,
.pricing-card__cta:not(.pricing-card__cta--secondary) *,
.legal-suite-btn--primary *,
.legal-note-form button *,
.legal-serial-letter-action button *,
.legal-insolvency-edit-saved button *,
.legal-matter-details-form__submit * {
  color: inherit !important;
}

a[class~="bg-helga-500"] svg,
a[class~="bg-helga-600"] svg,
a[class~="bg-helga-700"] svg,
a[class~="bg-helga-800"] svg,
a[class~="bg-helga-900"] svg,
a[class~="bg-lila-600"] svg,
a[class~="bg-lila-700"] svg,
a[class~="bg-lila-800"] svg,
a[class~="bg-lila-900"] svg,
a[class~="bg-blue-600"] svg,
a[class~="bg-blue-700"] svg,
a[class~="bg-blue-900"] svg,
a[class~="bg-indigo-600"] svg,
a[class~="bg-indigo-700"] svg,
a[class~="bg-indigo-900"] svg,
a[class~="bg-violet-600"] svg,
a[class~="bg-violet-700"] svg,
a[class~="bg-violet-800"] svg,
a[class~="bg-violet-900"] svg,
a[class~="bg-slate-800"] svg,
a[class~="bg-slate-900"] svg,
button[class~="bg-helga-500"] svg,
button[class~="bg-helga-600"] svg,
button[class~="bg-helga-700"] svg,
button[class~="bg-helga-800"] svg,
button[class~="bg-helga-900"] svg,
button[class~="bg-lila-600"] svg,
button[class~="bg-lila-700"] svg,
button[class~="bg-lila-800"] svg,
button[class~="bg-lila-900"] svg,
button[class~="bg-blue-600"] svg,
button[class~="bg-blue-700"] svg,
button[class~="bg-blue-900"] svg,
button[class~="bg-indigo-600"] svg,
button[class~="bg-indigo-700"] svg,
button[class~="bg-indigo-900"] svg,
button[class~="bg-violet-600"] svg,
button[class~="bg-violet-700"] svg,
button[class~="bg-violet-800"] svg,
button[class~="bg-violet-900"] svg,
button[class~="bg-slate-800"] svg,
button[class~="bg-slate-900"] svg,
.btn-primary svg,
.helga-btn-primary svg,
.helga-btn-purple svg,
.helga-context-toolbar__action--primary svg,
.helga-lage__action svg,
.search-form__button svg,
.list-row__btn svg,
.flow-choice--primary svg,
.pricing-card__cta:not(.pricing-card__cta--secondary) svg,
.legal-suite-btn--primary svg,
.legal-note-form button svg,
.legal-serial-letter-action button svg,
.legal-insolvency-edit-saved button svg,
.legal-matter-details-form__submit svg {
  color: inherit !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Shared app-shell visual compatibility rules migrated from base.html. */
.helga-app-footer__nav {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

/* Compact phones: keep the single masthead row inside the viewport. */
@media (max-width: 390px) {
  .helga-masthead-top {
    gap: 6px;
  }

  .helga-masthead__logo-slot {
    padding-left: 8px;
  }

  .helga-masthead__logo-slot img {
    height: 24px;
  }

  .helga-masthead-icons {
    gap: 6px;
    padding-right: max(4px, env(safe-area-inset-right));
  }
}

@media (max-width: 640px) {
  .helga-app-footer__nav {
    width: 100%;
  }
}

.helga-pill {
        background: #fff !important;
        border: 1px solid currentColor;
        padding: 2px 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 11px;
      }
      .helga-pill--ok      { color: #15803d !important; background: #fff !important; border-color: #86efac !important; }
      .helga-pill--warn    { color: #b45309 !important; background: #fff !important; border-color: #fcd34d !important; }
      .helga-pill--alert   { color: #b91c1c !important; background: #fff !important; border-color: #fca5a5 !important; }
      .helga-pill--info    { color: #6b21a8 !important; background: #fff !important; border-color: #d8b4fe !important; }
      .helga-pill--neutral { color: #475569 !important; background: #fff !important; border-color: #cbd5e1 !important; }

      /* Helga-Tag: neuer Outline-Standard fuer Tailwind-Inline-Pillen.
         Klasse-Pattern: helga-tag helga-tag--{farbe} */
      .helga-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid;
        border-radius: 999px;
        padding: 2px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: #fff;
        line-height: 1.4;
      }
      .helga-tag--rot     { color: #b91c1c; border-color: #fca5a5; }
      .helga-tag--amber   { color: #b45309; border-color: #fcd34d; }
      .helga-tag--gelb    { color: #a16207; border-color: #fde68a; }
      .helga-tag--gruen   { color: #15803d; border-color: #86efac; }
      .helga-tag--blau    { color: #1d4ed8; border-color: #93c5fd; }
      .helga-tag--orange  { color: #c2410c; border-color: #fdba74; }
      .helga-tag--lila    { color: #6b21a8; border-color: #d8b4fe; }
      .helga-tag--grau    { color: #475569; border-color: #cbd5e1; }
      .helga-tag--helga   { color: #b85e00; border-color: #fdba74; }

      /* KPI-Tile-Icons: Pastell-Container raus, Icons frei + groesser
         (Tim 26.05.2026). Icons werden inline als SVG gerendert. */
      .helga-kpi-tile-icon {
        background: transparent !important;
        border-radius: 0 !important;
        width: 36px !important;
        height: 36px !important;
        color: inherit;
      }
      .helga-kpi-tile-icon svg {
        width: 36px;
        height: 36px;
        stroke-width: 1.4;
      }
      /* Farb-Logik: Zustand, nicht Typ.
         grau = leer/ruhig, helga = hat Inhalt, gruen = erfolg, amber = warnung-mild, rot = alarm */
      .helga-kpi-tile-icon--lila   { color: #6b21a8 !important; }  /* Legacy, kaum noch */
      .helga-kpi-tile-icon--ink    { color: #475569 !important; }  /* Legacy */
      .helga-kpi-tile-icon--paper  { color: #a09da8 !important; }  /* neutral / leer */
      .helga-kpi-tile-icon--amber  { color: #b45309 !important; }  /* hat Inhalt / weiche Warnung */
      .helga-kpi-tile-icon--helga  { color: #C66B47 !important; }  /* hat Inhalt / Marke */
      .helga-kpi-tile-icon--gruen  { color: #15803d !important; }  /* erfolg / aufgeraeumt */
      .helga-kpi-tile-icon--rot    { color: #b91c1c !important; }  /* alarm / handeln */

      /* helga-row-icon — Pastell raus, Outline rein (Tim 26.05.2026) */
      .helga-row-icon {
        background: #fff !important;
        border: 1px solid #e4e2e8;
        border-radius: 8px;
        width: 32px !important;
        height: 32px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
      }
      .helga-row-icon--paper { color: #76737f !important; border-color: #d6d2c4 !important; }
      .helga-row-icon--lila  { color: #6b21a8 !important; border-color: #d8b4fe !important; }
      .helga-row-icon--helga { color: #b85e00 !important; border-color: #fdba74 !important; }
      .helga-row-icon--pdf   { color: #b91c1c !important; border-color: #fca5a5 !important; }

      /* =====================================================================
         Design-System v2: eckig im Geist, aber nicht hartkantig.
         Die konkrete Radius-Sprache kommt aus Tailwind/app.css und
         helga_theme.css: kleine Inline-Elemente bleiben knapp, Cards,
         Dropdowns, Modals und Inputs duerfen weichere Radien tragen.
         ===================================================================== */

      /* Tim 27.05.2026: ALLE Serifenschriften raus. font-display zeigte
         vorher auf "Source Serif 4" — wird jetzt auf Manrope (font-sans)
         umgeleitet, damit das ganze UI sans-serif ist.

         app.css setzt `h1{font-family:"Source Serif 4"...}` HART (ohne
         CSS-Variable), deshalb hier explizit ALLE Heading-Elemente
         zwingen Sans-serif zu nutzen. */
      :root, :host {
        --font-display: var(--font-sans) !important;
      }
      .font-display,
      .font-serif,
      h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-sans, "Manrope", system-ui, sans-serif) !important;
      }

      /* User-Dropdown-Items: dunkler Text mit !important, weil
         .helga-masthead-icons (color:#55525e) den Inline-Style schlucken
         konnte (Spezifitaets-Konflikt zwischen Tailwind utility + custom
         CSS). Hier explizit ueberschreiben. */
      .helga-user-dropdown a,
      .helga-user-dropdown button {
        color: #1c1a20 !important;
      }
      .helga-user-dropdown a:hover,
      .helga-user-dropdown button:hover {
        color: #000 !important;
      }
      /* Logout-Button (rote Variante) NICHT ueberschreiben */
      .helga-user-dropdown button[type="submit"][class*="rose"] {
        color: #be123c !important;
      }
      .helga-user-dropdown button[type="submit"][class*="rose"]:hover {
        color: #881337 !important;
      }

      /* Pastell-BGs ueberschreiben → weiss, Akzent nur ueber Border */
      .helga-card[style*="background:#fee2e2"],
      .helga-card[style*="background:rgba(255,248,235"] {
        background: #fff !important;
        border: 1px solid #e4e2e8 !important;
      }
      /* HEUTE-Banner: Pastell raus, Border in Akzentfarbe */
      .helga-todo-box {
        background: #fff !important;
      }
      /* Status-Group-Header in Aktenordner-Listings sollen ihre helle
         paper-100 BG behalten — das ist KEIN Pastell, sondern eine
         dezente Section-Trennung. */

      /* ============================================================
         Typografie-Skalierung (Tim 28.05.2026):
         „Mach mal alle Fließtexte deutlich größer aber maximal 500
         stärke" — gilt überall, auch auf den produktiven Pages.

         Strategie:
           1) Tailwind text-* Klassen aufpolstern (+2-3px)
           2) Alle font-weights > 500 auf 500 kappen
           3) Hart kodierte font-size:14px/13px/12px im body-Text
              ueber generelle CSS-Spezifitaet hochziehen.

         Headings (h1-h6) bleiben ihrer Tailwind-Groesse treu, ihre
         visuelle Hierarchie kommt jetzt rein aus Groesse (nicht
         weight) — daher auch dort weight 500 als Cap.
         ============================================================ */

      /* Default-Body-Schrift einen Tick groesser */
      body { font-size: 17px; line-height: 1.55; }

      /* Tailwind-Schriftgroessen aufpolstern (Reihe um ~2-3px hoch).
         !important weil Tailwind utility-classes mit der gleichen
         Spezifitaet rendern wuerden. */
      .text-xs    { font-size: 14px !important; line-height: 1.45 !important; }
      .text-sm    { font-size: 16px !important; line-height: 1.5 !important; }
      .text-base  { font-size: 17px !important; line-height: 1.55 !important; }
      .text-lg    { font-size: 19px !important; line-height: 1.55 !important; }
      .text-xl    { font-size: 22px !important; line-height: 1.45 !important; }
      .text-2xl   { font-size: 26px !important; line-height: 1.35 !important; }
      .text-3xl   { font-size: 32px !important; line-height: 1.3 !important;  }
      .text-4xl   { font-size: 38px !important; line-height: 1.25 !important; }
      .text-5xl   { font-size: 46px !important; line-height: 1.2 !important;  }
      /* Mini-Schrift (z.B. uppercase-Caps-Labels) NICHT mitziehen,
         sonst werden die fett — die haben oft text-[10px]/[11px].
         Wir lassen Tailwind-arbitrary-values text-[Npx] in Ruhe. */

      /* Font-Weight-Cap: alles > 500 wird auf 500 gezogen. */
      .font-semibold,
      .font-bold,
      .font-extrabold,
      .font-black,
      strong, b,
      h1, h2, h3, h4, h5, h6 {
        font-weight: 500 !important;
      }
      /* Tim's eigene Helga-Klassen mitziehen, soweit sie hart-coded
         sind. */
      .helga-section-title,
      .helga-card-title,
      .helga-kpi-tile-value,
      .helga-bell-badge {
        font-weight: 500 !important;
      }

      /* Body-Text in Helga-Cards: minimum 16px. */
      .helga-card p,
      .helga-card li,
      .helga-card span:not([class*="text-"]) {
        font-size: 16px;
      }

/* ============================================================
   Phase 2 canonical UI core
   ============================================================
   Product-neutral components used by the shared shell. Historical
   component rules remain isolated in helga_legacy.css until their owning
   product surface is migrated in a focused slice.
   ============================================================ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--helga-purple, #000066);
  outline-offset: 3px;
}

.helga-ui-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.helga-ui-button--primary {
  background: var(--helga-purple, #000066);
  color: var(--helga-white, #fff);
}

.helga-ui-button--primary:hover {
  background: var(--helga-purple-dark, #00004d);
  color: var(--helga-white, #fff);
}

.helga-ui-button--secondary {
  border-color: rgba(0, 0, 102, .22);
  background: var(--helga-white, #fff);
  color: var(--helga-purple, #000066);
}

.helga-ui-button--secondary:hover {
  border-color: var(--helga-purple, #000066);
  background: var(--helga-purple-soft, rgba(0, 0, 102, .08));
}

.helga-ui-button--danger {
  background: var(--helga-danger, #b42318);
  color: var(--helga-white, #fff);
}

.helga-ui-button--icon {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.helga-ui-button--icon svg,
.tax-receipt-status-icon svg {
  width: 22px;
  height: 22px;
}

.tax-receipt-actions {
  flex-wrap: nowrap;
  margin-left: auto;
}

.tax-receipt-actions form {
  display: inline-flex;
  margin: 0;
}

.tax-receipt-status-icon {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: var(--helga-white, #fff);
}

@media (max-width: 639px) {
  .tax-receipt-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.helga-ui-button:disabled,
.helga-ui-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

.helga-ui-field {
  display: grid;
  gap: 6px;
}

.helga-ui-field__label {
  color: var(--helga-ink, #17131f);
  font-size: 13px;
  font-weight: 700;
}

.helga-ui-control {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(23, 19, 31, .22);
  border-radius: 6px;
  background: var(--helga-white, #fff);
  color: var(--helga-ink, #17131f);
  font: inherit;
  padding: 10px 12px;
}

.helga-ui-control[aria-invalid="true"] {
  border-color: var(--helga-danger, #b42318);
}

.helga-ui-field__error {
  color: var(--helga-danger, #b42318);
  font-size: 13px;
}

.helga-ui-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--helga-white, #fff);
  color: var(--helga-muted, #77717d);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.helga-ui-status--success { color: var(--helga-success, #1e7a3a); }
.helga-ui-status--warning { color: var(--helga-warning, #b85e00); }
.helga-ui-status--error { color: var(--helga-danger, #b42318); }
.helga-ui-status--info { color: var(--helga-purple, #000066); }

.helga-ui-state {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-left: 3px solid var(--helga-purple, #000066);
  background: var(--helga-white, #fff);
  padding: 18px 20px;
}

.helga-ui-state--error { border-left-color: var(--helga-danger, #b42318); }
.helga-ui-state--success { border-left-color: var(--helga-success, #1e7a3a); }
.helga-ui-state--loading { border-left-color: var(--helga-muted, #77717d); }
.helga-ui-state__body { min-width: 0; }
.helga-ui-state__title { margin: 0; font-size: 16px; font-weight: 750; }
.helga-ui-state__message { margin: 4px 0 0; color: var(--helga-text-muted, #667085); }

.helga-ui-empty {
  margin: 0;
  padding: 12px 0;
  color: var(--helga-text-muted, #667085);
  font-size: 14px;
  line-height: 1.5;
}

.helga-ui-notice {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  border-left: 4px solid var(--helga-purple, #000066);
  background: var(--helga-white, #fff);
  padding: 16px 20px;
}

.helga-ui-notice--warning {
  border-left-color: var(--helga-warning, #b85e00);
}

.helga-ui-notice__body { min-width: 0; }
.helga-ui-notice__title {
  margin: 0;
  color: var(--helga-purple, #000066);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.4;
}
.helga-ui-notice__message {
  margin: 6px 0 0;
  color: var(--helga-text-muted, #667085);
  font-size: 13px;
  line-height: 1.5;
}

.home-section-anchor {
  scroll-margin-top: 80px;
}

/* Authenticated inbox ----------------------------------------------------- */
.inbox-actionbar {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border-radius: var(--helga-radius-md, 8px);
  background: var(--helga-purple, #000066);
  padding: 10px 12px;
  color: #fff;
}

.inbox-actionbar.is-visible { display: flex; }
.inbox-actionbar__count { padding: 0 8px; font-size: 14px; font-weight: 700; }
.inbox-actionbar__button { min-height: 44px; }
.inbox-actionbar .helga-ui-button--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.inbox-actionbar .helga-ui-button--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}
.inbox-actionbar .helga-ui-button:disabled { cursor: not-allowed; opacity: 0.55; }
.inbox-actionbar__close { margin-left: auto; font-size: 22px; line-height: 1; }

.inbox-assign-wrap { position: relative; }
.inbox-assign-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  width: min(320px, calc(100vw - 32px));
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--helga-border, #e4e1dc);
  border-radius: var(--helga-radius-md, 8px);
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 18, 54, 0.16);
  color: var(--helga-ink, #1f1d2e);
}
.inbox-assign-popover.is-open { display: block; }
.inbox-assign-item {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  padding: 10px 14px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.inbox-assign-item:last-child { border-bottom: 0; }
.inbox-assign-item:hover,
.inbox-assign-item:focus-visible { background: var(--helga-paper, #f8f3ec); }
.inbox-assign-item__type {
  color: var(--helga-text-muted, #667085);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inbox-card { overflow: visible; }
.inbox-card__header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}
.inbox-card__title { margin: 0; }
.inbox-check-cell {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.inbox-check-cell input {
  width: 20px;
  height: 20px;
  accent-color: var(--helga-purple, #000066);
  cursor: pointer;
}
.inbox-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 12px;
}
.inbox-sort__label {
  color: var(--helga-text-muted, #667085);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.inbox-sort__link { color: var(--helga-text-muted, #667085); text-decoration: none; }
.inbox-sort__link.is-active { color: var(--helga-purple, #000066); font-weight: 750; }

.inbox-list-row {
  display: flex;
  min-width: 0;
  align-items: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 120ms ease;
}
.inbox-list-row:last-child { border-bottom: 0; }
.inbox-list-row.is-selected { background: rgba(245, 232, 218, 0.55); }
.inbox-list-row__link {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 0;
  color: inherit;
  text-decoration: none;
}
.inbox-list-row__icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--helga-paper, #f8f3ec);
  color: var(--helga-orange, #c66b47);
}
.inbox-list-row__icon svg { width: 18px; height: 18px; }
.inbox-list-row__body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.inbox-list-row__title {
  overflow: hidden;
  color: var(--helga-ink, #1f1d2e);
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-list-row__summary {
  overflow: hidden;
  margin-top: 3px;
  color: var(--helga-text-muted, #667085);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-list-row__signals {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
.inbox-channel {
  display: inline-flex;
  height: 24px;
  align-items: center;
  border: 1px solid rgba(0, 0, 102, 0.14);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--helga-purple, #000066);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.inbox-list-row__date { color: var(--helga-text-muted, #667085); font-size: 12px; white-space: nowrap; }
.inbox-list-row__chevron { color: var(--helga-text-muted, #667085); font-size: 24px; }
.inbox-limit-note {
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 20px;
  color: var(--helga-text-muted, #667085);
  font-size: 12px;
}

.inbox-toast {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: none;
  max-width: min(420px, calc(100vw - 32px));
  align-items: center;
  gap: 16px;
  border-radius: var(--helga-radius-md, 8px);
  background: var(--helga-purple, #000066);
  padding: 12px 16px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(18, 18, 54, 0.2);
}
.inbox-toast.is-visible { display: flex; }
.inbox-toast.is-error { background: #991b1b; }
.inbox-toast__close {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--helga-radius-sm, 6px);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.helga-ui-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.helga-ui-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.helga-ui-table :is(th, td) {
  border-bottom: 1px solid var(--helga-line, rgba(0, 0, 0, .08));
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.helga-ui-table th {
  color: var(--helga-text-muted, #667085);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.helga-ui-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.helga-ui-list > li + li {
  border-top: 1px solid var(--helga-line, rgba(0, 0, 0, .08));
}

.helga-ui-dialog[hidden] { display: none; }

.helga-ui-dialog.is-open {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 30, .55);
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.helga-ui-dialog__panel {
  width: min(100%, 420px);
  max-height: min(80dvh, 720px);
  overflow: auto;
  border-radius: 8px;
  background: var(--helga-white, #fff);
  box-shadow: var(--helga-shadow-floating, 0 24px 60px rgba(0, 0, 0, .18));
  color: var(--helga-ink, #17131f);
  padding: 24px 28px;
}

.helga-ui-dialog__title { margin: 0 0 8px; font-size: 20px; }
.helga-ui-dialog__description { margin: 0 0 18px; line-height: 1.5; }
.helga-ui-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 640px) {
  .helga-ui-state { align-items: stretch; flex-direction: column; }
  .helga-ui-state .helga-ui-button { width: 100%; }
  .helga-ui-notice { align-items: stretch; flex-direction: column; }
  .helga-ui-notice .helga-ui-button { width: 100%; }
  .helga-ui-dialog__panel { padding: 20px; }
  .inbox-actionbar { align-items: stretch; flex-wrap: wrap; }
  .inbox-actionbar__count { width: 100%; padding: 4px 0; }
  .inbox-actionbar__close { margin-left: 0; }
  .inbox-card__header { align-items: flex-start; flex-wrap: wrap; }
  .inbox-card__title { align-self: center; }
  .inbox-sort { width: 100%; margin-left: 44px; flex-wrap: wrap; }
  .inbox-list-row__link { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 13px; }
  .inbox-list-row__icon { display: none; }
  .inbox-list-row__body { width: 100%; }
  .inbox-list-row__title,
  .inbox-list-row__summary { white-space: normal; }
  .inbox-list-row__signals { width: 100%; flex-wrap: wrap; }
  .inbox-list-row__chevron { margin-left: auto; }
  .inbox-toast { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
}

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