/* ============================================================
   .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: 1440px;
  margin: 0 auto;
  padding: 24px 32px 48px 32px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .helga-main { padding: 16px 16px 32px 16px; }
}

/* ============================================================
   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 (Tim 30.05.2026: Navy + Terracotta + Cream Rebrand) ----
     Variablen-Namen bleiben aus historischen Gruenden „purple"/„orange"
     — semantisch sind sie jetzt Navy/Terracotta. Vorteil: kein Refactor
     in 200+ Stellen, ein Tausch der Werte hier reicht.
     Designer-Idee:
       Navy       = Brand, Headlines, Sidebar — etabliert, Vertrauen
       Terracotta = CTAs, Highlights, naechste Handlung des Nutzers
       Cream      = Body, Container — warmer Editorial-Look
     Lila ist raus, das war zu Tech-Startup-laut fuer den Vertrauensmarkt. */
  --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:        #C66B47;   /* Terracotta — CTA / Highlight */
  --helga-orange-dark:   #A8552F;   /* Terracotta-dunkler — 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: #F7E5DC; /* Icon-Bubble-BG, Badge-BG */
  --helga-terracotta-tint: #F4E5DD; /* Sidebar-Active-BG */
  --helga-orange-hover:  #B95F3D;   /* 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;

  /* ---- Sidebar (Tim 30.05.2026: zurueck auf positiv, Cream-BG) ---- */
  --helga-sidebar-bg:    var(--helga-paper);
  --helga-sidebar-fg:    var(--helga-ink);
  --helga-sidebar-fg-dim:rgba(23,19,31,0.60);
  --helga-sidebar-hover: rgba(0,0,102,0.06);   /* Navy-Tint Hover */
  --helga-sidebar-active:rgba(0,0,102,0.10);
  --helga-sidebar-width: 260px;
}

/* ============================================================
   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);
}

/* ============================================================
   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;
}

/* 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-paper) !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--helga-line);
  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 .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;
  }

  /* 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 {
    padding-left: 0;
  }

  /* 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 {
    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: dunkel-lila, Post-Cockpit-Stil
   ============================================================ */

.helga-sidebar {
  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 var(--helga-line) !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 {
  color: var(--helga-sidebar-fg-dim) !important;
}

/* 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__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); }

/* 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: 0;
  margin: 4px 0 8px 0;
}
.helga-sidebar__subitem {
  margin: 0;
}
.helga-sidebar__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 16px 6px 48px;
  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:hover {
  color: var(--helga-sidebar-fg) !important;
  background: var(--helga-sidebar-hover);
}
.helga-sidebar__subitem.is-active > .helga-sidebar__sublink {
  color: var(--helga-sidebar-fg) !important;
  background: var(--helga-sidebar-active);
}
.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;
}

/* 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 */
}
/* 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. */
.helga-sidebar__nav-toggle {
  -webkit-tap-highlight-color: rgba(255,255,255,0.10);
  touch-action: manipulation;
}

/* ============================================================
   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: 1440px;
  margin: 0 auto;
  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__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;
}

/* 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, Stat-Kacheln treten zurueck. */
.aktenordner-kpi-grid {
  display: none;
}
.aktenordner-lage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
  margin: 10px 0 28px;
  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);
}
.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: 62ch;
  margin: 0;
  color: var(--helga-purple);
  font-size: clamp(22px, 2.35vw, 34px);
  line-height: 1.22;
  font-weight: 650;
}
.aktenordner-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);
}
.aktenordner-lage__facts div {
  padding: 14px 16px;
  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: 28px;
  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;
}
.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--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-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-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;
  }
}

/* ============================================================
   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__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.72fr);
  gap: 54px;
  align-items: center;
}
.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__head {
  margin-bottom: 26px;
}
.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-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;
  }
}

/* ============================================================
   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--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__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);
  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: 0;
  margin: 0 0 18px;
}
.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;
}

/* ============================================================
   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: min(100%, 1360px);
  padding-inline: clamp(18px, 2.2vw, 34px);
}
.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: min(100%, 1360px);
  padding-inline: clamp(18px, 2.2vw, 34px);
}
.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) minmax(300px, 360px);
  gap: clamp(22px, 2.6vw, 34px);
  align-items: start;
  margin-top: 28px;
}
.helga-case-main-column {
  min-width: 0;
}
.helga-case-assignment-sidebar {
  position: sticky;
  top: 104px;
  border: none !important;
  border-radius: 8px !important;
  background: var(--helga-white) !important;
  box-shadow: var(--helga-shadow-card) !important;
  padding: 22px !important;
}
.helga-case-deadline-summary {
  margin: -4px -4px 18px;
  padding: 16px 16px 18px;
  border-bottom: 1px solid rgba(191, 99, 66, 0.24);
  background: var(--helga-paper-soft);
}
.helga-case-deadline-summary__label {
  color: var(--helga-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.helga-case-deadline-summary__body {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 4px solid var(--helga-orange);
}
.helga-case-deadline-summary__body.is-critical {
  border-left-color: var(--helga-danger);
}
.helga-case-deadline-summary__date {
  color: var(--helga-purple);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.helga-case-deadline-summary__type {
  margin-top: 6px;
  color: var(--helga-ink);
  font-size: 14px;
  font-weight: 800;
}
.helga-case-deadline-summary__hint,
.helga-case-deadline-summary__more,
.helga-case-deadline-summary__empty {
  margin-top: 6px;
  color: var(--helga-muted);
  font-size: 12px;
  line-height: 1.45;
}
.helga-case-deadline-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.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-assignment-sidebar > div:not(.helga-brief-sidebar-heading),
.helga-case-assignment-sidebar > details {
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.helga-case-assignment-sidebar > .helga-case-deadline-summary {
  padding-top: 16px;
  border-top: 0;
}
.helga-case-assignment-sidebar .helga-brief-sidebar-heading + div {
  padding-top: 0;
  border-top: 0;
}
.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-assignment-sidebar .text-\[11px\].uppercase {
  color: rgba(23, 19, 31, 0.54) !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}
.helga-case-assignment-sidebar details > summary {
  color: var(--helga-purple) !important;
  letter-spacing: 0 !important;
  font-weight: 600 !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-"]),
.helga-case-assignment-sidebar a,
.helga-case-assignment-sidebar button:not([class*="bg-"]) {
  color: var(--helga-purple) !important;
}
.helga-case-assignment-sidebar button[class*="bg-helga-"] {
  color: var(--helga-white) !important;
}
.helga-case-assignment-sidebar .helga-case-mini-action.is-done {
  background: #047857 !important;
  color: var(--helga-white) !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-assignment-sidebar .helga-case-new-register {
  display: block;
}
.helga-case-assignment-sidebar .helga-case-new-register.hidden {
  display: none;
}
.helga-case-tabs {
  border-bottom-color: rgba(0, 0, 102, 0.12) !important;
}

/* ============================================================
   Register-Detail: Trennblatt zwischen Aktenordner und Vorgang.
   ============================================================ */
.helga-register-page {
  width: min(100%, 1360px);
  padding-inline: clamp(18px, 2.2vw, 34px);
}
.helga-register-summary,
.helga-register-panel,
.helga-register-sidebar {
  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,
.helga-register-sidebar .text-\[11px\].uppercase {
  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-main {
  min-width: 0;
}
.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 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;
}
.helga-register-sidebar {
  position: sticky;
  top: 104px;
  padding: 22px !important;
}
.helga-register-deadline-summary {
  margin: -22px -22px 20px;
  padding: 0 22px 20px;
  border-bottom: 1px solid rgba(0, 0, 102, 0.08);
}
.helga-register-sidebar > .helga-register-deadline-summary {
  padding-top: 0;
  border-top: 0;
}
.helga-register-deadline-summary .helga-brief-sidebar-heading {
  margin: 0 -22px 16px !important;
}
.helga-register-next-deadline {
  display: grid;
  gap: 6px;
  padding-left: 12px;
  border-left: 3px solid rgba(0, 0, 102, 0.22);
  color: var(--helga-ink) !important;
  text-decoration: none !important;
}
.helga-register-next-deadline.is-warn {
  border-left-color: var(--helga-warning);
}
.helga-register-next-deadline.is-danger {
  border-left-color: var(--helga-danger);
}
.helga-register-next-deadline strong {
  color: var(--helga-purple);
  font-size: 18px;
  line-height: 1.15;
}
.helga-register-next-deadline span {
  color: rgba(23, 19, 31, 0.68);
  font-size: 13px;
  line-height: 1.4;
}
.helga-register-sidebar > div:not(.helga-brief-sidebar-heading) {
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 102, 0.08);
}
.helga-register-sidebar .helga-brief-sidebar-heading + div {
  padding-top: 0;
  border-top: 0;
}
.helga-register-sidebar a {
  color: var(--helga-purple) !important;
  font-weight: 700;
  text-decoration: none !important;
}
.helga-register-sidebar a:hover {
  text-decoration: underline !important;
}
.helga-register-sibling-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}
.helga-register-sidebar-action {
  display: block;
  padding: 10px 12px;
  background: rgba(191, 99, 66, 0.1);
}

@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: 14px;
  }
  .helga-brief-summary {
    padding: 22px 18px !important;
  }
  .helga-brief-sidebar {
    position: static;
  }
  .helga-case-page {
    padding-inline: 14px;
  }
  .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-assignment-sidebar {
    position: static;
    padding: 22px 18px !important;
  }
  .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-case-new-register {
    display: flex;
    margin: 8px 0 0 !important;
  }
  .helga-case-new-register.hidden {
    display: none;
  }
  .helga-register-page {
    padding-inline: 14px;
  }
  .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-sidebar {
    position: static;
  }
  .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;
  }
}