/* ============================================================
   Cockpit Design — Alles Erledigt
   Standalone-Stylesheet für den neuen Cockpit-Workspace.
   Wird NUR auf Cockpit-Seiten geladen (kein Konflikt mit Orchid).
   ============================================================ */

/* ── CSS-Variablen ─────────────────────────────────────────── */
:root {
  --primary: #008B97;
  /* RGB-Tripel von --primary, für rgba()-Aufrufe (rgba() akzeptiert keine
     Custom Property mit #hex direkt als Farbwert). Vorher stand überall
     literal "rgba(0, 139, 151, X)" statt rgba(var(--primary-rgb), X) – das
     hat jeden Template-Override von --primary wirkungslos gemacht (siehe
     public/css/template_bdo.css, das --primary/--primary-rgb überschreibt). */
  --primary-rgb: 0, 139, 151;
  --primary-dark: #007A85;
  --secondary: #C7A244;
  --secondary-dark: #AF8F3C;
  --text-dark: #505261;
  --bg-body: #F4F7F6;
  --white: #FFFFFF;
  --danger: #EF4444;
  --warning: #F59E0B;
  --success: #10B981;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.03);
  --radius: 24px;
  /* income-hub tokens available globally so .income-hub__button works outside .income-hub */
  --income-primary: #008b97;
  --income-secondary: #c7a244;
  --income-text: #505261;
  --income-muted: #8f94a3;
  --income-border: #e5e9eb;
  --income-card: #ffffff;
  --bs-modal-zindex: 10010!important;
}

/* ── Reset / Base ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Font gilt für ALLE Seiten (Cockpit + Orchid Admin) */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Layout-Styles NUR für die eigenständigen Cockpit-Seiten */
body.ck-body {
  background-color: var(--bg-body);
  color: var(--text-dark);
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
aside {
  width: 280px;
  background-color: var(--white);
  border-right: 1px solid rgba(229, 233, 235, 0.5);
  display: flex;
  flex-direction: column;
  padding: 40px 24px;
  flex-shrink: 0;
  z-index: 10;
}

.logo-area {
  padding-bottom: 50px;
  padding-left: 12px;
}

.logo-sub {
  font-size: 14px;
  color: #9094A0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 8px;
}

nav {
  flex-grow: 1;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin-bottom: 6px;
}

nav a {
  text-decoration: none;
  color: var(--text-dark);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  border-radius: 14px;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.25s ease;
}

nav a:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
  color: var(--primary);
}

nav a.active {
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
}

.nav-badge {
  background-color: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: auto;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.sidebar-footer {
  margin-top: auto;
}

/* ── Wunschbox ─────────────────────────────────────────────── */
.wishbox-card {
  background: linear-gradient(135deg, rgba(199, 162, 68, 0.15), rgba(199, 162, 68, 0.03));
  border: 1px solid rgba(199, 162, 68, 0.3);
  border-radius: 16px;
  padding: 18px 16px;
  margin: 0 12px 20px 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(199, 162, 68, 0.1);
}

.wishbox-card:hover {
  background: rgba(199, 162, 68, 0.2);
  border-color: var(--secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(199, 162, 68, 0.15);
}

.wishbox-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.wishbox-body {
  font-size: 12px;
  color: var(--text-dark);
  line-height: 1.5;
}

.wishbox-subtitle {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dark);
  font-weight: 700;
}

/* ── User Profile (Sidebar Footer) ─────────────────────────── */
.user-profile {
  padding: 20px 12px 0 12px;
  border-top: 1px solid rgba(229, 233, 235, 0.5);
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  width: 44px;
  height: 44px;
  background: #E5E9EB;
  color: var(--text-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.user-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}

.user-status {
  font-size: 14px;
  color: #9094A0;
}

/* ── MAIN CONTENT ──────────────────────────────────────────── */
main {
  flex-grow: 1;
  padding: 40px 80px 80px 80px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* ── PAGE HEADER ───────────────────────────────────────────── */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.header-title h1 {
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.8px;
  color: var(--text-dark);
}

.header-date {
  font-size: 15px;
  color: #9094A0;
  font-weight: 500;
  margin-top: 8px;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-outline-sm {
  background: var(--white);
  color: var(--text-dark);
  border: 1px solid #E5E9EB;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-outline-sm:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-quick-add {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
  transition: all 0.2s;
  text-decoration: none;
}

.btn-quick-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
  color: white;
}

/* ── Begrüßung (Vorname + Tageszeit-Icon) + Datum, oberhalb der Insight-Card ── */
.ck-greeting {
  margin: 4px 4px 18px;
}

.ck-greeting__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
}

.ck-greeting__icon {
  font-size: 26px;
  line-height: 1;
}

.ck-greeting__date {
  font-size: 14px;
  color: #8A93A1;
}

/* ── Schnellstart: Insight-Card (2/3) + permanente Aktionen (1/3) ───── */
.ck-quickstart {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}

/* Linke Spalte (Assistent) füllt die volle Höhe der Zeile */
.ck-quickstart__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ck-quickstart__main>* {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.ck-quickstart__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* Oben ausrichten, NICHT automatisch auf die Zeilenhöhe strecken. Die feste
     Höhe wird per JS einmalig auf die initiale Assistenthöhe gesetzt (siehe
     cockpit_dashboard_content), damit die Buttons fix bleiben, wenn der
     Assistent später wächst. */
  align-self: start;
}

.ck-quick-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  min-height: 84px;
  border-radius: 18px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ck-quick-btn:hover {
  transform: translateY(-2px);
}

.ck-quick-btn--primary {
  background: var(--primary, #008b97);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.28);
}

.ck-quick-btn--primary:hover {
  color: #fff;
  box-shadow: 0 14px 32px rgba(var(--primary-rgb), 0.38);
}

.ck-quick-btn--outline {
  background: #fff;
  color: #1f2937;
  border: 1px solid #e5e9eb;
  box-shadow: 0 8px 24px rgba(80, 82, 97, 0.06);
}

.ck-quick-btn--outline:hover {
  color: var(--primary, #008b97);
  border-color: var(--primary, #008b97);
}

.ck-quick-btn__plus {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.ck-quick-btn--primary .ck-quick-btn__plus {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ck-quick-btn--outline .ck-quick-btn__plus {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary, #008b97);
}

.ck-quick-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ck-quick-btn__title {
  font-size: 15px;
  font-weight: 700;
}

.ck-quick-btn__sub {
  font-size: 12.5px;
  opacity: 0.8;
}

.ck-quick-btn--outline .ck-quick-btn__sub {
  color: #74808b;
  opacity: 1;
}

@media (max-width: 900px) {
  .ck-quickstart {
    grid-template-columns: 1fr;
  }
}

.btn-action-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}

.btn-action-secondary {
  background: var(--secondary);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(199, 162, 68, 0.25);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}

.btn-action-primary:hover {
  background: #007A85;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

.btn-action-danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}

.btn-action-danger:hover {
  background: #DC2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.btn-action-outline {
  background: white;
  border: 1px solid #CBD5E1;
  color: var(--text-dark);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}

.btn-action-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── AI SPOTLIGHT ──────────────────────────────────────────── */
.ai-spotlight {
  background: var(--white);
  border-radius: 24px;
  padding: 30px 40px;
  box-shadow: 0 15px 50px rgba(var(--primary-rgb), 0.12);
  /* margin-bottom: 60px; */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-spotlight h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #F4F7F6;
  border-radius: 16px;
  padding: 8px 8px 8px 24px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.1);
}

.ai-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  font-size: 16px;
  outline: none;
  color: #505261;
}

.ai-input::placeholder {
  color: #A0AAB2;
}

.btn-spotlight-send {
  background-color: var(--secondary);
  color: white;
  border: none;
  height: 44px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(199, 162, 68, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-spotlight-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(199, 162, 68, 0.4);
}

.prompts {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.prompts::-webkit-scrollbar {
  display: none;
}

.prompt-chip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #E5E9EB;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #9094A0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-chip:hover {
  background: rgba(var(--primary-rgb), 0.05);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── CARDS (allgemein) ─────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow);
  margin-bottom: 60px;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.card-header-title {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.fristen-radar-title {
  margin: 0;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fristen-radar-badge {
  background-color: var(--danger);
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.link-primary {
  font-size: 14px;
  color: var(--primary) !important;
  font-weight: 600;
  text-decoration: none;
}

.link-primary:hover {
  text-decoration: underline;
}

/* ── FRISTEN-RADAR ─────────────────────────────────────────── */
.fristen-radar-card {
  position: relative;
  overflow: hidden;
  padding: 30px 40px;
  border-top: 4px solid var(--danger);
}

/* Kein offenes Item: Rahmen grün (= alles erledigt) statt rot (= dringend). */
.fristen-radar-card--clear {
  border-top-color: var(--primary);
}

/* Der animierte Einlauf-Balken (::before/::after, siehe hubBorderFill weiter
   unten) ist für .fristen-radar-card sonst fest auf --danger (rot) codiert —
   im "alles erledigt"-Zustand muss er dieselbe Türkis-Farbe wie der
   border-top oben bekommen, sonst blitzt beim Laden trotzdem Rot auf. */
.fristen-radar-card--clear::before,
.fristen-radar-card--clear::after {
  background: var(--primary);
}

.urgent-list-container {
  /* max-height: 260px; */
  overflow-y: auto;
  padding-right: 10px;
}

.urgent-list-container::-webkit-scrollbar {
  width: 6px;
}

.urgent-list-container::-webkit-scrollbar-track {
  background: transparent;
}

.urgent-list-container::-webkit-scrollbar-thumb {
  background-color: #CBD5E1;
  border-radius: 10px;
}

.urgent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kompund-Selektor (statt .urgent-item allein) damit diese Werte immer
   gewinnen — die Zeile trägt jetzt zusätzlich .income-hub__row (Basis-Grid
   kommt von dort über --ae-cols, siehe App\Support\TableColumns), aber
   urgent-list bleibt bewusst etwas dichter (weniger Padding) als die
   Standard-Hub-Tabellen, da hier potenziell viele Zeilen gleichzeitig
   sichtbar sind (Cockpit-Widget, Inbox, Fristenradar). */
.income-hub__row.urgent-item {
  align-items: center;
  padding: 8px 16px;
  transition: transform 0.2s;
}

.income-hub__row.urgent-item:hover {
  /* transform: scale(1.01); */
  /* background: var(--white);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04); */
}

/* Border-Varianten für urgente Items */
.urgent-item--danger {
  border-left: 4px solid var(--danger);
}

.urgent-item--warning {
  border-left: 4px solid var(--warning);
}

/* Hervorhebung der am längsten überfälligen Rechnung (Top-Position).
   Kompund-Selektor, damit der Background das .income-hub__row-Basis-Grau
   (gleiche Spezifität, aber später im Stylesheet) zuverlässig überschreibt. */
.income-hub__row.urgent-item--top-overdue {
  /* border-left-width: 6px; */
  background: rgba(239, 68, 68, 0.06);
}

.urgent-item--top-overdue .item-title-row,
.urgent-item--top-overdue .item-amount,
.urgent-item--top-overdue .item-due {
  font-weight: 700;
  color: var(--danger);
}

.urgent-item--top-overdue .item-info::before {
  content: '🔥';
  margin-right: 6px;
}

/* Icon-Spalte (Fristenradar/Inbox-Todos): Breite kommt jetzt aus
   App\Support\TableColumns (--ae-cols), abhängig von $showIcon in
   partials/urgent-list.blade.php — keine eigene CSS-Variante mehr nötig. */
.urgent-item .item-icon {
  font-size: 20px;
  text-align: center;
  line-height: 1;
}

/* Done-State (erledigte Termine im Fristenradar) */
.income-hub__row.urgent-item--done {
  opacity: .55;
  background: #f8fafc;
}

.item-due--done {
  color: #10b981;
}

.item-due--ok {
  color: #6c757d;
}

/* Action-Spalte: ein einzelner "⋮"-Button statt mehrerer Buttons nebeneinander
   — identisch im Cockpit-Widget, Inbox-Todos und Fristenradar. Layout kommt
   von der geteilten .ie-row-actions-Regel (partials/table/actions.blade.php). */

/* Empty-State für leere Listen */
.urgent-empty {
  background: #fff;
  border: 1px dashed #d8dde3;
  border-radius: 14px;
  padding: 50px;
  text-align: center;
  color: #6c757d;
}

.urgent-empty__icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.urgent-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.urgent-empty__hint {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  color: #8f94a3;
}

.urgent-empty__hint a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.urgent-empty__hint a:hover {
  text-decoration: underline;
}


/* === Chatbot Widget === */
#chatbot-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 10000;
  width: 72px;
  height: 72px;
  background: var(--secondary);
  border-radius: 50%;
  color: #fff;
  border: none;
  padding: 0;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--secondary) 45%, transparent);
  transition: transform 0.18s, box-shadow 0.18s;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#chatbot-toggle:active {
  cursor: grabbing;
}

#chatbot-toggle:hover {
  transform: scale(1.07);
}

#chatbot-toggle svg {
  pointer-events: none;
}

#chatbot-lottie {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chatbot-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

.chatbot-badge[hidden] {
  display: none;
}

#chatbot-window {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 100009;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  overflow: hidden;
}

#chatbot-window.chatbot-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#chatbot-header {
  background: #C7A244;
  color: #fff;
  padding: 0.85rem 1.1rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

#chatbot-header-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#chatbot-header-info {
  flex: 1;
  min-width: 0;
}

#chatbot-header-info strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
}

#chatbot-header-info span {
  font-size: 0.75rem;
  opacity: 0.82;
}

#chatbot-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatbot-close:hover {
  opacity: 1;
}

#chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.9rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: #f1f5fb;
}

.cb-msg {
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
}

.cb-msg-user {
  align-self: flex-end;
  background: #C7A244;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cb-msg-bot {
  align-self: flex-start;
  background: #fff;
  color: #1e293b;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.cb-msg-time {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0.6;
  text-align: right;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cb-msg-user .cb-msg-time {
  color: #fff;
}

.cb-day-sep {
  align-self: center;
  margin: 0.35rem 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
}

.cb-msg-img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
  margin-top: 4px;
}

.cb-msg-thinking {
  align-self: flex-start;
  background: #fff;
  color: #94a3b8;
  border-bottom-left-radius: 4px;
  font-style: italic;
  font-size: 0.82rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cb-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  animation: cb-bounce 1.2s infinite;
}

.cb-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.cb-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes cb-bounce {

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

  40% {
    transform: translateY(-5px);
  }
}

#chatbot-img-preview {
  padding: 0.45rem 0.9rem 0;
  background: #f1f5fb;
  flex-shrink: 0;
  display: none;
}

#chatbot-img-preview.has-image {
  display: block;
}

#chatbot-img-preview-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e0e7f7;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  color: #1e3a5f;
  font-weight: 600;
  max-width: 100%;
}

#chatbot-img-preview img {
  height: 36px;
  width: 36px;
  object-fit: cover;
  border-radius: 5px;
}

#chatbot-img-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

#chatbot-img-remove:hover {
  color: #ef4444;
}

#chatbot-footer {
  padding: 0.65rem 0.8rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

#chatbot-img-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: border-color 0.15s, color 0.15s;
}

#chatbot-img-btn:hover {
  border-color: #C7A244;
  color: #C7A244;
}

#chatbot-img-input {
  display: none;
}

#chatbot-text {
  flex: 1;
  min-height: 38px;
  max-height: 100px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  line-height: 1.4;
}

#chatbot-text:focus {
  border-color: #C7A244;
}

#chatbot-send {
  flex-shrink: 0;
  background: #C7A244;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s, opacity 0.15s;
}

#chatbot-send:hover:not(:disabled) {
  background: #b8922f;
}

#chatbot-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ============================================================
   Chat-Bubble: Modi „Steuerberater" (teal) / „KI-Assistent" (gold)
   Die Farbe haengt AUSSCHLIESSLICH an #chatbot-window[data-chat-modus]
   bzw. #chatbot-toggle[data-chat-modus] — das JS setzt nur dieses
   Attribut, alles Weitere macht die Kaskade ueber --cb-akzent.
   Ein neuer Modus in administration.json braucht hier genau einen
   neuen [data-chat-modus="…"]-Block (sonst greift der Default unten).
   ============================================================ */

#chatbot-window {
  --cb-akzent: var(--secondary);
  --cb-akzent-dark: var(--secondary-dark);
  --cb-akzent-weich: #FDF6E6;
}

#chatbot-window[data-chat-modus="steuerberater"] {
  --cb-akzent: var(--primary);
  --cb-akzent-dark: var(--primary-dark);
  --cb-akzent-weich: #E6F4F5;
}

#chatbot-header {
  background: var(--cb-akzent) !important;
  padding: 0.8rem 0.9rem 0.75rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  transition: background 0.22s;
}

#chatbot-header-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Avatar zeigt immer nur das Icon des aktiven Modus. */
#chatbot-header-icon .cb-avatar {
  display: none;
  align-items: center;
  justify-content: center;
}

#chatbot-window[data-chat-modus="steuerberater"] #chatbot-header-icon .cb-avatar[data-modus-icon="steuerberater"],
#chatbot-window[data-chat-modus="ki"] #chatbot-header-icon .cb-avatar[data-modus-icon="ki"] {
  display: flex;
}

#chatbot-help {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatbot-help:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

/* --- Umschalter Steuerberater <-> KI-Assistent --- */
#chatbot-modes {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.cb-mode {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.cb-mode:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.cb-mode.is-active {
  background: #fff;
  color: var(--cb-akzent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.cb-mode svg {
  flex-shrink: 0;
}

.cb-mode span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Hinweiszeile „Diese Nachricht geht an …" --- */
#chatbot-target-hint {
  flex-shrink: 0;
  padding: 0.6rem 0.9rem 0.1rem;
  background: #f1f5fb;
  text-align: center;
}

#chatbot-target-hint span {
  display: inline-block;
  max-width: 100%;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
}

#chatbot-target-hint:empty,
#chatbot-target-hint span:empty {
  display: none;
}

/* --- „Frage an den Steuerberater weitergeben" --- */
.cb-weitergeben {
  align-self: flex-start;
  max-width: 92%;
  margin-top: 2px;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 999px;
  background: #E6F4F5;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.cb-weitergeben:hover {
  background: #d3ecee;
  border-color: var(--primary);
}

#chatbot-send {
  background: var(--cb-akzent) !important;
  transition: background 0.18s;
}

#chatbot-send:hover:not(:disabled) {
  background: var(--cb-akzent-dark) !important;
}

#chatbot-img-btn:hover,
#chatbot-text:focus {
  border-color: var(--cb-akzent);
}

#chatbot-img-btn:hover {
  color: var(--cb-akzent);
}

/* ============================================================
   Hilfe-Modal „Wen soll ich fragen?"
   ============================================================ */

.cb-help[hidden] {
  display: none;
}

.cb-help {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cb-help__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.cb-help__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 1.6rem 1.7rem 1.4rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}

.cb-help__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cb-help__x:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.cb-help__title {
  margin: 0 0 0.35rem;
  padding-right: 34px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
}

.cb-help__sub {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  color: #64748b;
}

.cb-help__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.cb-help__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cb-help__card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
}

/* Farbwelt je Modus – identisch zum Umschalter im Chat-Kopf. */
.cb-help__card[data-chat-help-pick="ki"] {
  border-color: #F0DCA8;
  background: #FEFAF0;
}

.cb-help__card[data-chat-help-pick="ki"] .cb-help__card-icon {
  background: var(--secondary);
}

.cb-help__card[data-chat-help-pick="ki"] .cb-help__badge {
  background: #F6E7BF;
  color: var(--secondary-dark);
}

.cb-help__card[data-chat-help-pick="ki"] .cb-help__ex-title {
  color: var(--secondary-dark);
}

.cb-help__card[data-chat-help-pick="ki"].is-active,
.cb-help__card[data-chat-help-pick="ki"]:hover {
  border-color: var(--secondary);
}

.cb-help__card[data-chat-help-pick="steuerberater"] {
  border-color: #BFE2E4;
  background: #F1FAFA;
}

.cb-help__card[data-chat-help-pick="steuerberater"] .cb-help__card-icon {
  background: var(--primary);
}

.cb-help__card[data-chat-help-pick="steuerberater"] .cb-help__badge {
  background: #D5EDEF;
  color: var(--primary-dark);
}

.cb-help__card[data-chat-help-pick="steuerberater"] .cb-help__ex-title {
  color: var(--primary-dark);
}

.cb-help__card[data-chat-help-pick="steuerberater"].is-active,
.cb-help__card[data-chat-help-pick="steuerberater"]:hover {
  border-color: var(--primary);
}

.cb-help__card-head {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cb-help__card-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
}

.cb-help__card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}

.cb-help__badge {
  margin: 0.15rem 0 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cb-help__text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #475569;
}

.cb-help__ex-title {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cb-help__ex {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #475569;
}

.cb-help__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}

.cb-help__tip {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.cb-help__ok {
  flex-shrink: 0;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 10px;
  background: #0F3B33;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.cb-help__ok:hover {
  background: #165244;
}

@media (max-width: 620px) {
  .cb-help__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .cb-help__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .cb-help__ok {
    width: 100%;
  }
}

#chatbot-toggle {
  /* background: var(--primary) !important; */
  /* box-shadow: 0 4px 16px rgba(177, 18, 38, 0.24) !important; */
}

#chatbot-toggle.chatbot-open {
  /* background: var(--primary) !important; */
}

#chatbot-text:focus {
  /* border-color: #b11226 !important; */
}




/* Aufklappbare Cockpit-Karten (Cashflow, Autopilot, Assistent) */
.card--collapsible {
  padding: 0;
  overflow: hidden;
}

/* Das globale Legacy-Stylesheet vendor/orchid/css/template2.css (in
   config/platform.php → resource.stylesheets, auf jeder Admin-Seite geladen)
   erzwingt per `.card { box-shadow: var(--shadow-sm) !important }` einen
   kurzen, harten Schatten. In Kombination mit overflow:hidden wird dieser an
   der abgerundeten Ecke sichtbar abgeschnitten und wirkt unscharf/verpixelt.
   Höhere Spezifität (zwei Klassen) gewinnt deterministisch gegen die
   gleich starke !important-Regel, unabhängig von der Stylesheet-Ladereihenfolge. */
.card.card--collapsible {
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
}

.card--collapsible>summary {
  list-style: none;
}

.card--collapsible>summary::-webkit-details-marker {
  display: none;
}

.cashflow-summary-hint {
  font-size: 12px;
  color: #9094a0;
  margin-right: 6px;
}

.card--collapsible>.cashflow-container {
  padding: 0 28px 28px;
}

/* ── Einheitlicher Klapp-Header (Icon · Titel · Chevron) ───────
   Wird von den drei aufklappbaren Cockpit-Karten geteilt:
   Umsatz-Graph & Cashflow, Das haben wir für dich erledigt,
   Was kann ich heute für dich erledigen (Assistent). ─────────── */
.cockpit-toggle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}

.card--collapsible>summary.cockpit-toggle-head {
  padding: 22px 28px;
}

.cockpit-toggle-head__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cockpit-toggle-head__heading-text {
  min-width: 0;
}

.cockpit-toggle-head__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.cockpit-toggle-head__icon svg {
  width: 20px;
  height: 20px;
}

.cockpit-toggle-head__icon--gold {
  background: rgba(199, 162, 68, 0.16);
  color: var(--secondary);
}

.cockpit-toggle-head__icon--success {
  background: rgba(16, 185, 129, 0.14);
  color: var(--success);
}

.cockpit-toggle-head__title {
  display: block;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.cockpit-toggle-head__subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #9094a0;
  line-height: 1.5;
  max-width: 640px;
}

.cockpit-toggle-head__chevron {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e5e9eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9094a0;
  transition: transform 0.25s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cockpit-toggle-head__chevron svg {
  width: 16px;
  height: 16px;
}

.cockpit-toggle-head:hover .cockpit-toggle-head__chevron {
  border-color: var(--primary);
  color: var(--primary);
}

.card--collapsible[open]>summary.cockpit-toggle-head .cockpit-toggle-head__chevron,
.assistant-spotlight:not(.is-collapsed) .cockpit-toggle-head__chevron {
  transform: rotate(180deg);
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.assistant-spotlight__header.cockpit-toggle-head {
  padding: 0;
}

@media (max-width: 640px) {
  .cockpit-toggle-head__subtitle {
    display: none;
  }
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* erlaubt der Titelspalte (minmax(0,1fr)) das Schrumpfen, statt h-Überlauf zu erzwingen */
}

.item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
}

/* Titel-Zeile als Modal-Trigger (statt Link, der die Seite verlässt).
   Reset Browser-Button-Defaults, optisch identisch zu einem <a> im gleichen Kontext. */
button.item-title-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;

  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}

button.item-title-link:hover {
  color: var(--secondary);
  text-decoration-color: var(--secondary);
  text-decoration: underline;
}

.item-sub {
  font-size: 12px;
  font-weight: 600;
  color: #9094A0;
}

.item-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.item-due {
  font-size: 14px;
  font-weight: 600;
}

.item-due--danger {
  color: var(--danger);
}

.item-due--warning {
  /* color: var(--warning); */
  color: var(--text-dark);
}

.item-amount {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  text-align: right;
}

/* ── DASHBOARD GRID (2 Spalten) ────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  margin-bottom: 60px;
}

/* ── FINANCE CARDS ─────────────────────────────────────────── */
.finance-card {
  padding: 30px;
  border: none;
  margin-bottom: 0;
}

.card-capital {
  background: #e9f3f4!important;
  border-top: 4px solid var(--primary);
}

.card-vault {
  background: var(--white);
  border-top: 4px solid var(--secondary);
}

/* Teal Top-Rahmen nur sichtbar, wenn die Karte aufgeklappt ist
   (native <details>[open] bzw. Assistent ohne .is-collapsed).
   Transparent statt kein Border, damit die Kartenhöhe beim
   Auf-/Zuklappen nicht springt. */
.card--success-opened {
  border-top: 4px solid transparent;
  transition: border-top-color 0.2s ease;
}

details.card--success-opened[open],
.assistant-spotlight.card--success-opened:not(.is-collapsed) {
  border-top-color: var(--primary);
}


/* ── Letter-Icons (Buchstaben-Badges) ──────────────────────── */
.letter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: auto;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
}

.li-dark {
  background: rgba(80, 82, 97, 0.1);
  color: var(--text-dark);
}

.li-primary {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.li-gold {
  background: rgba(199, 162, 68, 0.1);
  color: var(--secondary);
}

.li-gray {
  background: #E5E9EB;
  color: #9094A0;
}

.card-desc {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 25px;
  margin-top: 6px;
  color: #9094A0;
}

/* ── Tooltip ───────────────────────────────────────────────── */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.info-icon {
  cursor: pointer;
  color: var(--secondary);
  background: rgba(199, 162, 68, 0.15);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  font-weight: 800;
  transition: all 0.2s;
}

.info-icon:hover {
  background: var(--secondary);
  color: white;
}

.tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 260px;
  /* Direkte Regel schlägt geerbtes white-space auch dann, wenn der Tooltip
     (wie bei AuftraegeEditScreen::layout()'s "Wiederkehrende Rechnung") in
     ein <label> gehängt wird, das selbst white-space:nowrap setzt (Orchids
     eigenes public/vendor/orchid/css/orchid.css: "label{white-space:nowrap}").
     Auf dem Cockpit-Dashboard fiel das bisher nicht auf, weil dort alles im
     Shadow DOM rendert und orchid.css dort gar nicht greift – hier explizit
     setzen statt sich auf diese Isolation zu verlassen. */
  white-space: normal;
  background-color: var(--white);
  color: var(--text-dark);
  text-align: left;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(229, 233, 235, 0.8);
}

.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--white) transparent transparent transparent;
}

/* ── Berechnungs-Anzeige (Clean Calc) ──────────────────────── */
.clean-calc {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.clean-calc-total {
  font-weight: 800;
  letter-spacing: -1.5px;
  text-align: center;
  padding: 10px 0 30px 0;
  font-size: 48px;
  margin: 0;
  height:90px;
}

.card-capital .clean-calc-total {
  color: var(--primary);
  
}

.card-vault .clean-calc-total {
  color: var(--secondary);
  font-size: 42px;
}

/* „Jahr 2026"-Pill über der großen Gewinn-Zahl (Cockpit-Karte "Mein
   aktueller Gewinn"). --card-year-pill-color ist ein Custom-Property statt
   fixer Farbe, damit der Modifier je Karte (z.B. --capital) nur die Farbe
   überschreiben muss. */
.card-year-pill-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

/* Der große Betrag direkt nach der Jahres-Pille bekommt keinen zusätzlichen
   Top-Abstand (der Standard-.clean-calc-total-Abstand ist für Karten OHNE
   Pille gedacht, z.B. "Notwendige Steuern & Abgaben"). */
.card-year-pill-wrap + .clean-calc-total {
  padding-top: 0;
}

.card-year-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.card-year-pill--capital {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

/* Monats-Pill in der Cockpit-Karte "Notwendige Steuern & Abgaben" — gleiche
   Form wie --capital, nur im Farbschema secondary (Gold), passend zur
   Farbe der Summe darunter (.card-vault .clean-calc-total). */
.card-year-pill--secondary {
  background: rgba(199, 162, 68, 0.15);
  color: var(--secondary);
}

/* Kleine Zusatzzeile unter der großen clean-calc-total-Zahl (z.B. "Gewinn
   nach Steuern (geschätzt)" in der Cockpit-Karte "Mein aktueller Gewinn") —
   unverbindlicher Richtwert, daher bewusst klein/unauffällig gehalten. */
.clean-calc-subtotal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: -14px 0 18px;
  font-size: 13px;
  color: #9094A0;
  font-weight: 500;
  text-align: center;
}

/* Tresor-Karte: mehrere Abgabearten können exakt denselben Fälligkeitstag
   haben (z.B. SVS-Quartalsrate + ESt-Vorauszahlung beide am 15.08.) — die
   Beträge werden dann als kleine, umbrechende Chips "gestapelt" statt in
   einer Zeile, bleiben aber optisch Teil derselben Zusatzzeile. */
.clean-calc-subtotal--stacked {
  flex-direction: column;
  gap: 6px;
}

.clean-calc-subtotal__label {
  text-align: center;
}

.clean-calc-subtotal__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.clean-calc-subtotal__chip {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--text-dark);
}

.clean-calc-subtotal__chip .letter-icon {
  margin-right: 5px;
}

/* Hebt in "Reserviert für" die Position(en) hervor, die zum nächsten
   Fälligkeitstermin gehören (siehe clean-calc-subtotal darüber) — macht die
   Zeile(n) der "nächsten Zahlung" auch in der Liste selbst erkennbar. */
.calc-item--next {
  background: rgba(199, 162, 68, 0.08);
  box-shadow: inset 2px 0 0 var(--secondary);
}

.calc-list-wrapper {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  padding-top: 16px;
  margin-top: auto;
}

.calc-list-title {
  font-size: 11px;
  color: #9094A0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}

.calc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
}

.calc-text {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.calc-amount {
  font-size: 14px;
  font-weight: 600;
  color: #9094A0;
}

/* Tresor: Label + Fälligkeitsdatum untereinander */
.calc-text-main {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.calc-due {
  font-size: 11px;
  font-weight: 500;
  color: #9094A0;
}

.vault-next-due {
  text-align: center;
  margin: -22px 0 18px 0;
  font-size: 13px;
  color: #6B7280;
}

.vault-next-due strong {
  color: var(--secondary);
}

.vault-details-link {
  display: inline-block;
  margin-top: 14px;
}

/* ── CASHFLOW GRAPH ────────────────────────────────────────── */
.cashflow-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
  align-items: stretch;
  margin-top: 10px;
}

.finance-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFCFC;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.stat-row:hover {
  background: var(--white);
  border-color: #E5E9EB;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.stat-row--elevated {
  background: var(--white);
  border: 1px solid #E5E9EB;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.stat-row-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  color: #9094A0;
  margin-bottom: 6px;
  font-weight: 500;
  display: block;
}

.stat-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.stat-amount.profit {
  color: var(--text-dark);
  font-size: 28px;
  font-weight: 800;
}

.stat-amount.income {
  color: var(--primary);
}

.stat-amount.expense {
  color: #9094A0;
}

/* Plus-Buttons in Stat-Rows */
.btn-plus-small {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.2s;
  margin-left: 15px;
  flex-shrink: 0;
}

.btn-plus-small:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.05);
}

.btn-plus-small.expense-btn {
  background: rgba(80, 82, 97, 0.1);
  color: var(--text-dark);
}

.btn-plus-small.expense-btn:hover {
  background: var(--text-dark);
  color: white;
}

/* ── Diagramm-Bereich ──────────────────────────────────────── */
.graph-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.graph-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #9094A0;
  justify-content: flex-end;
  font-weight: 500;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.legend-color--dark {
  background: var(--text-dark);
}

.legend-color--primary {
  background: var(--primary);
}

.legend-color--expense {
  background: #E5E9EB;
}

.graph-area-12m {
  height: 200px;
  position: relative;
  border-bottom: 2px solid #F4F7F6;
  display: flex;
  align-items: flex-end;
  padding-bottom: 15px;
}

/* ApexCharts-Container für Umsatz-Graph & Cashflow (Linien-Diagramm) */
.graph-area-apex {
  width: 100%;
  min-height: 320px;
}

.graph-area-apex .apexcharts-tooltip {
  border: 1px solid #E5E9EB;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.mock-line-chart {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 180px;
  z-index: 1;
}

.month-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  bottom: -25px;
  font-size: 12px;
  color: #9094A0;
  font-weight: 500;
  z-index: 1;
}

/* Interaktions-Layer (CSS-only Hover-Tooltips) */
.chart-interaction-layer {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 180px;
  display: flex;
  z-index: 10;
}

.chart-col {
  flex: 1;
  height: 100%;
  position: relative;
  cursor: crosshair;
}

.chart-col:hover {
  background: rgba(var(--primary-rgb), 0.04);
}

.chart-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid #E5E9EB;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: max-content;
  pointer-events: none;
}

.chart-col:hover .chart-tooltip {
  display: block;
  z-index: 20;
}

.chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #E5E9EB transparent transparent transparent;
}

.tooltip-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 10px;
  border-bottom: 1px solid #F4F7F6;
  padding-bottom: 6px;
}

.tooltip-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
}

.tooltip-line:last-child {
  margin-bottom: 0;
}

.tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.tooltip-dot--dark {
  background: var(--text-dark);
}

.tooltip-dot--primary {
  background: var(--primary);
}

.tooltip-dot--expense {
  background: #E5E9EB;
}

.tooltip-label-dark {
  color: var(--text-dark);
}

.tooltip-label-primary {
  color: var(--primary);
}

.tooltip-label-expense {
  color: #9094A0;
}

/* ── AKTIVITÄTEN ───────────────────────────────────────────── */
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 20px;
  background: #FAFCFC;
  border-radius: 12px;
  font-size: 14px;
}

.activity-icon {
  width: 24px;
  height: 24px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.activity-time {
  color: #9094A0;
  font-size: 12px;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Autopilot-Card (Cockpit "Das haben wir für dich erledigt") ────────── */
.autopilot-card__body {
  padding: 0 28px 28px;
}

.autopilot-card__header {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.autopilot-card__ranges {
  display: inline-flex;
  gap: 4px;
  background: rgba(var(--primary-rgb), .08);
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
}

.autopilot-card__range {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  line-height: 1.2;
}

.autopilot-card__range:hover {
  color: var(--primary, #008b97);
  text-decoration: none;
}

.autopilot-card__range.is-active {
  background: var(--primary, #008b97);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .22);
}

.autopilot-card__range.is-active:hover {
  color: #fff;
}

.autopilot-card__list {
  scroll-margin-top: 80px;
}

.activity-item--empty {
  color: #6B7280;
}

.activity-item--empty .activity-icon {
  background: rgba(148, 158, 168, .12);
  color: #6B7280;
}

.autopilot-card__footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--primary-rgb), .22);
  font-size: .82rem;
  color: #6B7280;
}

.autopilot-card__footer strong {
  color: var(--primary, #008b97);
}

@media (max-width: 640px) {
  .autopilot-card__header {
    justify-content: flex-start;
  }
}

/* ============================================================
   RESPONSIVE + COLLAPSIBLE SIDEBAR
   ============================================================ */

/* ── Sidebar-Header-Zeile (Logo + Toggle-Button) ───────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 50px;
  padding-left: 12px;
}

.sidebar-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9094A0;
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  line-height: 0;
}

.sidebar-toggle-btn:hover {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

/* Pfeil-Icons: welcher ist sichtbar hängt vom Zustand ab */
.icon-collapse {
  display: block;
}

.icon-expand {
  display: none;
}

/* ── Mobile Hamburger-Button (im Main-Header) ──────────────── */
.mobile-menu-btn {
  display: none;
  /* auf Desktop immer versteckt */
  background: var(--white);
  border: 1px solid #E5E9EB;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-dark);
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 0;
}

.mobile-menu-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Overlay für Mobile ────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
  display: block;
}

/* ── DESKTOP: Sidebar einklappbar ──────────────────────────── */
@media (min-width: 1025px) {
  aside {
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  /* Eingeklappt: schmale Leiste */
  aside.sidebar-collapsed {
    width: 72px;
    padding-left: 12px;
    padding-right: 12px;
  }

  aside.sidebar-collapsed .sidebar-header {
    padding-left: 0;
    justify-content: center;
  }

  /* Logo + Sub-Text ausblenden */
  aside.sidebar-collapsed .sidebar-logo-img,
  aside.sidebar-collapsed .logo-sub {
    display: none;
  }

  /* Nav-Badge ausblenden, Text in Links verstecken */
  aside.sidebar-collapsed .nav-badge {
    display: none;
  }

  aside.sidebar-collapsed nav a {
    padding: 14px;
    justify-content: center;
    border-radius: 12px;
  }

  aside.sidebar-collapsed .nav-label {
    display: none;
  }

  /* Sidebar-Footer ausblenden */
  aside.sidebar-collapsed .sidebar-footer {
    opacity: 0;
    pointer-events: none;
  }

  /* Pfeil-Icon wechseln */
  aside.sidebar-collapsed .icon-collapse {
    display: none;
  }

  aside.sidebar-collapsed .icon-expand {
    display: block;
  }
}

/* ── TABLET / MOBILE: Sidebar als Drawer ───────────────────── */
@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  aside {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }

  aside.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.12);
  }

  /* Toggle-Button auf Mobile verstecken (wird durch Overlay-Close ersetzt) */
  .sidebar-toggle-btn {
    display: none;
  }

  /* Hamburger-Button anzeigen */
  .mobile-menu-btn {
    display: flex;
  }

  main {
    padding: 24px 20px 60px 20px;
    width: 100%;
  }

  .header-container {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
  }

  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cashflow-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Hinweis: Das Stack-Card-Layout der Aufgaben/Fristen-Liste (urgent-list)
     liegt jetzt im konsolidierten „MOBILE-FEINSCHLIFF"-Block am Dateiende
     (@media max-width: 1100px), damit auch die Tablet-/schmale-Desktop-
     Auflösung mit sichtbarer Sidebar nicht mehr horizontal überläuft. */
}

@media (max-width: 640px) {
  .card {
    padding: 20px;
  }

  .finance-card {
    padding: 20px;
  }

  .ai-spotlight {
    padding: 20px;
  }

  .fristen-radar-card {
    padding: 20px;
  }

  .clean-calc-total {
    font-size: 36px;
  }

  .card-vault .clean-calc-total {
    font-size: 32px;
  }
}

/* ============================================================
   ORCHID ADMIN INTEGRATION
   Überschreibt Orchid/Bootstrap/style.css für die Sidebar
   und den Seitenheader aller Admin-Seiten.
   ============================================================ */

/* ── Sidebar-Hintergrund & Struktur ────────────────────────── */
div.aside {
  background-color: #ffffff !important;
  border-right: 1px solid #e8ecef !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Header-Bereich: Logo + Toggle nebeneinander */
.ae-ki-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(var(--primary-rgb), 0.07);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
  text-decoration: none;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  transition: background 0.15s;
}

.ae-ki-indicator:hover {
  background: rgba(var(--primary-rgb), 0.13);
  text-decoration: none;
  color: var(--primary);
}

.ae-ki-indicator img {
  border-radius: 4px;
  flex-shrink: 0;
}

.ae-ki-indicator__text {
  white-space: nowrap;
  overflow: hidden;
}

div.aside.aside-collapsed .ae-ki-indicator {
  justify-content: center;
  padding: 8px 0;
}

div.aside.aside-collapsed .ae-ki-indicator__text {
  display: none;
}

div.aside header {
  padding: 28px 20px 12px 24px !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* Logo */
div.aside header .header-brand img {
  max-width: 215px !important;
  height: auto !important;
  opacity: 1 !important;
}

/* Toggle-Button: nicht mehr absolut positioniert */
div.aside .menue_toggle {
  position: static !important;
  top: auto !important;
  left: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
}

div.aside .sidebar-toggle-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #9094A0 !important;
  padding: 7px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s, color 0.2s !important;
  line-height: 0 !important;
}

div.aside .sidebar-toggle-btn:hover {
  background: rgba(var(--primary-rgb), 0.08) !important;
  color: var(--primary, #008B97) !important;
}

/* Icon-Zustand (collapse/expand Pfeil) */
div.aside .icon-collapse {
  display: block !important;
}

div.aside .icon-expand {
  display: none !important;
}

div.aside.aside-collapsed .icon-collapse {
  display: none !important;
}

div.aside.aside-collapsed .icon-expand {
  display: block !important;
}

/* ── Nav-Container ─────────────────────────────────────────── */
div.aside .aside-collapse {
  padding: 4px 16px 0 16px !important;
  flex-grow: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Suchfeld ausblenden */
div.aside [data-controller="search"],
div.aside #orchid-search {
  display: none !important;
}

/* ── Nav-Items & Links ─────────────────────────────────────── */
div.aside .nav-item {
  list-style: none !important;
  margin-bottom: 2px !important;
  /* margin-right: 15px; */
}

/* Top-Level Links */
div.aside .nav>li>a.nav-link,
div.aside .nav>.nav-item>a.nav-link {
  color: #505261 !important;
  background-color: transparent !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  /* font-weight: 500 !important; */
  font-size: 15px !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  transition: background-color 0.2s, color 0.2s !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

div.aside .nav>li>a.nav-link:hover,
div.aside .nav>.nav-item>a.nav-link:hover {
  background-color: rgba(var(--primary-rgb), 0.07) !important;
  color: var(--primary, #008B97) !important;
}

div.aside .nav>li>a.nav-link.active,
div.aside .nav>.nav-item>a.nav-link.active {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary, #008B97) !important;
  font-weight: 600 !important;
}

/* Icons innerhalb von Nav-Links */
div.aside .nav-link .icon-menu {
  opacity: 0.55 !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  width: 18px !important;
  height: 18px !important;
}

div.aside .nav-link:hover .icon-menu,
div.aside .nav-link.active .icon-menu {
  opacity: 1 !important;
}

/* ============================================================
   STEUERN & SVS HUB
   ============================================================ */

.tax-hub {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tax-hub__card,
.tax-hub__highlight,
.tax-hub__export-card {
  background: var(--white);
  border: 1px solid #E5E9EB;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.tax-hub__highlight {
  background: #FFFBEB;
  border-color: #FDE68A;
  border-left: 5px solid var(--secondary);
  padding: 26px 34px;
}

.tax-hub__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.tax-hub__section-header--light h3,
.tax-hub__section-header--light .tax-hub__link {
  color: #FFFFFF;
}

.tax-hub__section-header--stacked {
  align-items: flex-start;
}

.tax-hub__section-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--text-dark, #505261);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tax-hub__section-header p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #9094A0;
  line-height: 1.55;
}

.tax-hub__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--secondary);
  color: #FFFFFF;
}

.tax-hub__link {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.tax-hub__link:hover,
.tax-hub__text-action:hover {
  color: var(--primary);
  opacity: 0.82;
  text-decoration: none;
}

.tax-hub__link--light:hover {
  color: #FFFFFF;
  opacity: 0.82;
}

.tax-hub__highlight-text {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--text-dark);
  font-weight: 700;
}

.tax-hub__highlight-copy {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dark);
}

.tax-hub__text-action {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.tax-hub__savings {
  background: linear-gradient(135deg, var(--primary) 0%, #006B75 100%);
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.15);
  color: #FFFFFF;
  padding: 32px 38px;
}

.tax-hub__savings-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: start;
}

.tax-hub__savings-total {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 10px;
}

.tax-hub__savings-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.tax-hub__savings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tax-hub__savings-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tax-hub__savings-item span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 15px;
  font-weight: 800;
}

.tax-hub__savings-item small {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.tax-hub__savings-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.tax-hub__card {
  padding: 32px;
}

.tax-hub__card--full {
  width: 100%;
}

.tax-hub__card--compact {
  margin: 0;
}

.tax-hub__highlight-tip {
  /* margin-top: 20px;
  padding-top: 18px; */
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tax-hub__highlight-tip .tax-hub__tag {
  align-self: flex-start;
}

.tax-hub__highlight-tip-title {
  font-size: 15px;
  font-weight: 600;
}

.tax-hub__highlight-tip-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

.tax-hub__liabilities-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid #E5E9EB;
}

.tax-hub__liabilities-copy {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: #9094A0;
}

.tax-hub__liabilities-total {
  text-align: right;
}

.tax-hub__liabilities-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #9094A0;
  margin-bottom: 6px;
}

.tax-hub__liabilities-amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--secondary);
}

.tax-hub__liabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tax-hub__liability-box {
  padding: 24px 20px;
  border-radius: 18px;
  background: #FAFCFC;
  border: 1px solid #E5E9EB;
  text-align: center;
}

.tax-hub__liability-head {
  margin-bottom: 16px;
}

.tax-hub__liability-head h4 {
  margin: 0;
  font-size: 15px;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
}

.tax-hub__liability-box .tax-hub__liability-amount {
  font-size: 28px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.tax-hub__liability-box p {
  margin: 0 0 6px;
  font-size: 14px;
  color: #9094A0;
}

.tax-hub__liability-box small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #A0AAB2;
}

.tax-hub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 34px;
  align-items: stretch;
}

.tax-hub__scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 6px;
}

.tax-hub__calendar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tax-hub__calendar-item {
  margin: 0;
}

.tax-hub__calendar-link {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #FAFCFC;
  border: 1px solid #E5E9EB;
  color: inherit;
  text-decoration: none;
}

.tax-hub__calendar-link:hover {
  text-decoration: none;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

.tax-hub__calendar-date {
  text-align: center;
}

.tax-hub__calendar-date .day {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}

.tax-hub__calendar-date .month {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: #9094A0;
  font-weight: 700;
}

.tax-hub__calendar-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tax-hub__calendar-copy strong {
  font-size: 14px;
  color: var(--text-dark);
}

.tax-hub__calendar-copy span,
.tax-hub__calendar-side small {
  font-size: 12px;
  color: #9094A0;
}

.tax-hub__calendar-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tax-hub__calendar-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(245, 158, 11, 0.15);
  color: #B45309;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.tax-hub__export-card {
  background: linear-gradient(135deg, #F0F9FA 0%, #FFFFFF 100%);
  border-color: rgba(var(--primary-rgb), 0.2);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.06);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tax-hub__export-card h3 {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 22px;
}

.tax-hub__export-card p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark);
}

.tax-hub__export-status {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1px solid #E5E9EB;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #64748B;
}

.tax-hub__export-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--primary);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
  transition: all 0.2s ease;
}

.tax-hub__export-button:hover {
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px);
}

.tax-hub__export-button.is-disabled {
  background: #CBD5E1;
  box-shadow: none;
  pointer-events: none;
}

.tax-hub__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
}

.tax-hub__facts div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(229, 233, 235, 0.8);
}

.tax-hub__facts dt {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  color: #9094A0;
}

.tax-hub__facts dd {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
}

/* ============================================================
   ORDER EDIT PAGES
   ============================================================ */

.ae-order-edit {
  background: linear-gradient(180deg, #F7FAF9 0%, #F4F7F6 220px, #F4F7F6 100%);
}

.ae-order-edit .container-fluid {
  background: transparent;
}

.ae-order-edit .ae-page-header {
  margin-bottom: 24px;
}

.ae-order-edit .ck-header-bar {
  align-items: flex-start;
}

.ae-order-edit .ck-page-title {
  font-size: 34px;
  letter-spacing: -0.9px;
}

/* Der Rechnung/Angebot-Umschalter (siehe partials/page-heading.blade.php)
   sitzt im generischen 50/50-Aside-Slot des Seitenkopfs — auf dieser Seite
   ist das Formular darunter aber im 70/30-Split (Layout::split()->ratio(
   '70/30') in AuftraegeEditScreen, real col-md-9/col-md-3). Ziel: die rechte
   Kante des Umschalters landet bündig mit der rechten Kante der linken Karte
   ("Rechnungsempfänger" & Co., col-md-9), nicht mit dem Seitenrand.

   Der Rückzug MUSS auf __aside sitzen, nicht auf .ae-page-heading selbst:
   Prozent-Padding löst gegen die eigene Containing-Block-Breite auf — bei
   .ae-page-heading ist das der äußere Orchid-Grid-Spalten-Wrapper
   (.col-xxl.col-xl-9.col-12), der auf breiten Bildschirmen BREITER ist als
   .ae-page-heading selbst (die container-xl-Deckelung bei 1140/1400px greift
   ja erst auf .ae-page-heading). Das führte auf breiten Monitoren zu einem
   sichtbaren Versatz. Auf __aside ist die Containing-Block-Breite dagegen
   .ae-page-heading selbst (korrekt gedeckelt) — der Prozentwert bezieht sich
   dann auf dieselbe Breite wie die Grid-Spalten darunter. */
.ae-order-edit .ae-page-heading__aside {
    padding-right: calc(25% + 4px);
}
.ae-order-edit .ck-page-subtitle {
  max-width: 760px;
  margin-top: 10px;
  font-size: 15px;
  color: #9094A0;
}

.ae-order-edit .command-bar .btn,
.ae-order-edit .command-bar .dropdown-toggle,
.ae-order-edit .command-bar .btn.dropdown-toggle {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}

.ae-order-edit .command-bar .btn-primary,
.ae-order-edit .command-bar .dropdown-toggle.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.2) !important;
}

.ae-order-edit #post-form {
  max-width: 1580px;
}

.ae-order-edit #post-form>fieldset {
  margin-bottom: 28px !important;
}

.ae-order-edit #post-form>fieldset>.col.p-0.px-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* War vorher ".ae-order-edit #post-form>fieldset legend" (Direct-Child-
   Kombinator) – trifft in der tatsächlichen DOM-Struktur nicht (fieldset
   steckt über .row.g-3 > .col-md zwei Ebenen tiefer als #post-form), die
   Regel griff dadurch nie und "Rechnungsempfänger"/"Leistungen & Produkte"
   liefen auf reines Browser-Default-<legend>-Styling (dünn, normal case)
   statt auf dieses CSS. Deshalb bewusst per Nachfahren-Kombinator (statt
   erneut fragil an die Verschachtelungstiefe zu binden) UND an die Optik
   von "Rechnungsdetails" (.accordion-heading h6 weiter unten) angeglichen,
   damit alle Abschnitts-Überschriften auf dieser Seite einheitlich wirken.
   color mit !important: Orchids eigenes Layout::rows()-Template rendert
   das <legend> hart mit class="text-black" – Bootstraps .text-black setzt
   color ebenfalls mit !important, das schlägt jede normale Regel unabhängig
   von deren Spezifität. */
.ae-order-edit fieldset legend {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dark) !important;
}

.ae-order-edit #post-form>fieldset>.bg-white.rounded.shadow-sm {
  padding: 28px !important;
  border-radius: 24px !important;
  border: 1px solid #E5E9EB !important;
  box-shadow: var(--shadow) !important;
  background: #FFFFFF !important;
}

.ae-order-edit #post-form>fieldset .row.form-group {
  --bs-gutter-y: 18px;
  margin-bottom: 0;
}

.ae-order-edit #post-form>fieldset .row.form-group>div {
  margin-bottom: 18px;
}

.ae-order-edit #post-form .row.g-3 {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 28px;
  align-items: start;
}

/* Ausnahme für die Split-Zeile mit der Zusammenfassung (Layout::split() in
   AuftraegeEditScreen): align-items:start oben ist für die übrigen .row.g-3
   auf dieser Seite richtig (Formularfelder unterschiedlicher Höhe sollen
   nicht gegenseitig gestreckt werden), verhindert hier aber genau das, was
   .invoice-summary-card zum Stickyness braucht — ohne stretch ist die rechte
   Spalte nur so hoch wie ihr eigener Inhalt, die Karte hätte dadurch nie
   genug Raum, um beim Scrollen der (oft viel längeren) linken Spalte
   "mitzuwandern". */
.ae-order-edit #post-form .row.g-3:has(.invoice-summary-card) {
  align-items: stretch;
}

.ae-order-edit #post-form .row.g-3>.col-md {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ae-order-edit .accordion {
  margin-bottom: 0 !important;
}

.ae-order-edit .accordion-heading {
  margin-bottom: 14px;
  padding: 0 20px;
  min-height: 72px;
  display: flex;
  align-items: center;
  border: 1px solid #E5E9EB;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}

.ae-order-edit .accordion-heading:hover {
  border-color: rgba(var(--primary-rgb), 0.24);
}

.ae-order-edit .accordion-heading h6 {
  width: 100%;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
  text-decoration: none;
}

.ae-order-edit .accordion-heading .icon {
  color: var(--primary);
}

.ae-order-edit .accordion>.collapse,
.ae-order-edit .accordion>.collapsing {
  margin-top: 0 !important;
  margin-bottom: 16px;
  padding: 28px 28px 10px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #E5E9EB;
  box-shadow: var(--shadow);
}

.ae-order-edit .accordion .row.form-group {
  --bs-gutter-y: 18px;
  margin-bottom: 0;
}

.ae-order-edit .accordion .row.form-group>div,
.ae-order-edit .col-md>.row.form-group>div {
  margin-bottom: 18px;
}

.ae-order-edit label.form-label,
.ae-order-edit .form-label,
.ae-order-edit .col-form-label {
  margin-bottom: 8px;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #7C808E;
}

/* Globale TomSelect-Dropdowns (Orchid select_controller.js, jedes Select-Feld
   in der Admin-Oberfläche): "No results found" bleibt unübersetzt (kein
   deutscher Sprachschlüssel hinterlegt) und ist bei Feldern mit allowAdd()
   ohnehin redundant zur "Hinzufügen …"-Zeile direkt darüber – deshalb überall
   ausgeblendet statt nur auf einer einzelnen Seite. */
.ts-dropdown .no-results {
  display: none !important;
}

.ae-order-edit input.form-control,
.ae-order-edit textarea.form-control,
.ae-order-edit select.form-control,
.ae-order-edit .ts-wrapper.form-control,
.ae-order-edit .input-group input.form-control {
  min-height: 52px;
  border-radius: 14px !important;
  border: 1px solid #E5E9EB;
  background: #F8FAFB !important;
  box-shadow: none !important;
  color: var(--text-dark);
}

.ae-order-edit textarea.form-control {
  min-height: 110px;
  padding-top: 14px;
}

.ae-order-edit .ts-wrapper.form-control,
.ae-order-edit .input-group {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ae-order-edit .ts-wrapper.single .ts-control,
.ae-order-edit .ts-wrapper.multi .ts-control,
.ae-order-edit .input-group>input.form-control,
.ae-order-edit .input-group .input-group-text,
.ae-order-edit .input-group-append .input-group-text {
  min-height: 52px;
  border-radius: 14px !important;
  border: 1px solid #E5E9EB!important;
  background: #F8FAFB !important;
  box-shadow: none !important;
}
.ae-order-edit .ts-wrapper.single.is-invalid  .ts-control,
.ae-order-edit .ts-wrapper.multi.is-invalid  .ts-control,
.ae-order-edit .input-group>input.form-control.is-invalid
{
  border-color: var(--bs-form-invalid-border-color) !important;
}

.ae-order-edit .ts-wrapper.single .ts-control,
.ae-order-edit .ts-wrapper.multi .ts-control {
  padding: 12px 14px;
}

.ae-order-edit .ts-wrapper.focus .ts-control,
.ae-order-edit input.form-control:focus,
.ae-order-edit textarea.form-control:focus,
.ae-order-edit .input-group>input.form-control:focus {
  background: #FFFFFF !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.09) !important;
}

/* Platzhalter-Optik für Select-Felder mit ->empty('Label') (Artikel,
   Zahlungsart, Steuersatz, Kunde suchen, …): Orchids select_controller.js
   initialisiert TomSelect IMMER mit allowEmptyOption:true, wodurch die leere
   Option als echtes ausgewähltes "item" mit sichtbarem, fett stehenbleibendem
   Text gerendert wird – nicht als ausblendender Placeholder. Hier grau
   eingefärbt wie ein echter Platzhalter und beim Fokussieren/Tippen
   (.ts-wrapper.focus) ausgeblendet, damit z.B. "Auswählen/Hinzufügen" nicht
   wie ein bereits gewählter Wert aussieht, sobald der Cursor blinkt.
   "neuer Kunde" ist der Sentinel-Wert von auftrag.kundeid (->empty(Label,
   'neuer Kunde') statt leerem Key, siehe AuftraegeEditScreen), daher
   zusätzlich zum leeren Wert nötig. */
.ae-order-edit .ts-control .item[data-value=""],
.ae-order-edit .ts-control .item[data-value="neuer Kunde"] {
  color: #9AA1AC;
  font-weight: 400;
}

.ae-order-edit .ts-wrapper.focus .ts-control .item[data-value=""],
.ae-order-edit .ts-wrapper.focus .ts-control .item[data-value="neuer Kunde"] {
  display: none;
}

/* Kombiniertes Such-/Neuanlage-Element im Kundensuche-Feld (Rechnung/Angebot/…
   erstellen): Suchicon links, TomSelect-Eingabe in der Mitte, rechts entweder
   der "X"-Löschen-Button (bestehender Kunde gewählt) ODER der "Neu anlegen"-
   Button (leerer Zustand) — beide teilen sich dieselbe rechte Position, da sie
   sich laut toggleCustomerPresentation() gegenseitig ausschließen. Nur für
   #kundeid, nicht für die übrigen TomSelect-Felder auf der Seite (Artikel,
   Land, Zahlungsart, …). select#kundeid + .ts-wrapper matcht den von
   TomSelect direkt hinter dem Original-<select> eingefügten Wrapper. */
.ae-order-edit select#kundeid + .ts-wrapper .ts-control {
  padding-right: 132px !important;
  padding-left: 40px !important;
  border-radius: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA1AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}

.ae-order-edit select#kundeid + .ts-wrapper .ae-kunde-clear-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  color: #9AA1AC;
  cursor: pointer;
  z-index: 3;
  user-select: none;
}

.ae-order-edit select#kundeid + .ts-wrapper .ae-kunde-clear-btn:hover {
  background: #E5E9EB;
  color: var(--text-dark);
}

.ae-order-edit .form-check.form-switch {
  min-height: 52px;
  padding: 14px 16px 14px 52px;
  border-radius: 14px;
  border: 1px solid #E5E9EB;
  background: #F8FAFB;
}

.ae-order-edit .form-check-input {
  margin-top: 0.1rem;
}

.ae-order-edit .ae-customer-preview {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  background: rgba(var(--primary-rgb), 0.05);
}

.ae-order-edit .ae-customer-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.ae-order-edit .ae-customer-preview__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #7C808E;
}

.ae-order-edit .ae-customer-preview__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
}

.ae-order-edit .ae-customer-preview__edit {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  padding: 0;
}

/* „Neu anlegen"-Trigger — von aeInitKundeAddButton() (scripts.js) rechts ins
   Kundensuche-Feld selbst verschoben, daher als reiner Text-Link gestaltet
   (kein eigener Kasten mehr nötig, das Suchfeld liefert den Rahmen). Teilt
   sich die rechte Position mit dem "X"-Löschen-Button (schließen sich laut
   toggleCustomerPresentation() gegenseitig aus, siehe dort). */
.ae-order-edit select#kundeid + .ts-wrapper .ae-customer-new__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  z-index: 3;
}

.ae-order-edit select#kundeid + .ts-wrapper .ae-customer-new__btn:hover {
  background: rgba(var(--primary-rgb), 0.1);
}

.ae-order-edit .ae-customer-new__btn[hidden] {
  display: none;
}

/* Trenner zwischen Kundensuche und Kunden-Stammdatenfeldern (immer
   sichtbar, siehe screens/kunde_neu_trenner.blade.php) — feine Linie +
   zentrierter Text, damit die beiden Bereiche optisch klar getrennt
   wahrgenommen werden. */
.ae-order-edit .ae-form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  /* margin: 22px 0 18px; */
}

/* Bei bereits ausgewähltem, nicht in Bearbeitung befindlichem Kunden
   (toggleCustomerPresentation('existing')) hängt sonst ein Trenner ohne
   Button/Felder darunter als Waisen-Element in der Karte. */
.ae-order-edit .ae-form-divider[hidden] {
  display: none;
}

.ae-order-edit .ae-form-divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: #e2e8f0;
}

.ae-order-edit .ae-form-divider__text {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9094A0;
  white-space: nowrap;
}

/* Validierungsfehler-Zusammenfassung (resources/views/vendor/platform/
   partials/alert.blade.php) – ersetzt Orchids nackten "Oh, Mist!"-Textblock +
   Browser-Bullet-Liste mit einer Optik im Stil der übrigen ae-*-Bausteine
   dieser Seite. Die Feldnamen selbst kommen über resources/lang/de/
   validation.php (custom attributes) bereits lesbar an (z.B. "Straße"
   statt "kunde.strasse"). */
.ae-order-edit .ae-validation-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #7F1D1D;
}

.ae-order-edit .ae-validation-alert__icon {
  flex: 0 0 auto;
  color: #DC2626;
  margin-top: 2px;
}

.ae-order-edit .ae-validation-alert__body {
  flex: 1 1 auto;
}

.ae-order-edit .ae-validation-alert__title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #7F1D1D;
}

.ae-order-edit .ae-validation-alert__subtitle {
  margin: 4px 0 10px;
  font-size: 13px;
  color: #9B2C2C;
}

.ae-order-edit .ae-validation-alert__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ae-order-edit .ae-validation-alert__list li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 13.5px;
  line-height: 1.5;
}

.ae-order-edit .ae-validation-alert__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #DC2626;
}

.ae-order-edit .ae-validation-alert__close {
  align-self: flex-start;
}

/* „Speichern"-Dropdown (Editor-CommandBar): Menüeinträge randlos als sauberes
   Menü statt gestapelter Buttons mit Einzelrahmen (siehe Screenshot-Wunsch). */
.ae-save-dd ~ .dropdown-menu {
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e5e9f0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  min-width: 264px;
}

.ae-save-dd ~ .dropdown-menu .btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #0f172a !important;
  border-radius: 8px;
  padding: 9px 12px;
  font-weight: 600;
  margin: 0;
}

.ae-save-dd ~ .dropdown-menu .btn:hover,
.ae-save-dd ~ .dropdown-menu .btn:focus {
  background: rgba(var(--primary-rgb), 0.09) !important;
  color: var(--primary, #008b97) !important;
}

/* Erste Zeile (finales Speichern) als empfohlene Aktion hervorheben. */
.ae-save-dd ~ .dropdown-menu .btn:first-child {
  font-weight: 800;
}

.catalog-hub {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.catalog-hub__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.catalog-hub__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 0 2px;
}

.catalog-hub__toolbar-copy span {
  display: block;
  margin-bottom: 6px;
  color: var(--primary, #008b97);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.catalog-hub__toolbar-copy p {
  margin: 0;
  max-width: 62ch;
  color: #5c6975;
  line-height: 1.6;
}

.catalog-hub__toolbar-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.catalog-hub__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  color: var(--primary, #008b97);
  text-decoration: none;
  font-weight: 600;
}

.catalog-hub__summary-card,
.catalog-hub__highlight,
.catalog-panel {
  background: #fff;
  border: 1px solid #e5e9eb;
  border-radius: 26px;
  box-shadow: 0 12px 40px rgba(80, 82, 97, 0.08);
}

.catalog-hub__summary-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-hub__summary-label,
.catalog-hub__summary-meta,
.catalog-row span,
.catalog-panel__header p,
.catalog-panel__empty,
.catalog-hub__highlight-copy {
  color: #74808b;
}

.catalog-panel--customers .catalog-hub__summary-label,
.catalog-panel--customers .catalog-hub__summary-meta,
.catalog-panel--customers .catalog-row span,
.catalog-panel--customers .catalog-panel__header p,
.catalog-panel--customers .catalog-panel__empty,
.catalog-panel--customers .catalog-hub__highlight-copy {
  color: #73808b;
}

.catalog-panel.catalog-panel--customers .catalog-row__badge {
  color: #fff;
  display: flex;
}

.catalog-row__badge.catalog-row__badge--square {
  display: flex;
}

.catalog-row__badge {

  display: flex !important;
  align-items: center;
  justify-content: center;
}

.catalog-hub__summary-label,
.catalog-hub__summary-meta {
  font-size: 0.9rem;
}

.catalog-hub__summary-value {
  color: #1f2937;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.catalog-hub__highlight {
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(255, 255, 255, 0.96));
}

.catalog-hub__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.catalog-hub__section-header h3,
.catalog-panel__header h3 {
  text-transform: uppercase;
  margin: 0;
  color: #1f2937;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.catalog-hub__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary, #008b97);
  font-size: 0.72rem;
  font-weight: 700;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.catalog-hub__link,
.catalog-hub__text-action {
  color: var(--primary, #008b97);
  font-weight: 600;
  text-decoration: none;
}

.catalog-hub__highlight-title {
  margin: 0 0 10px;
  color: #1f2937;
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.catalog-hub__highlight-copy {
  margin: 0;
  /* max-width: 70ch; */
  line-height: 1.65;
}

.catalog-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.catalog-panel {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.catalog-panel--customers,
.catalog-panel--contacts,
.catalog-panel--services,
.catalog-panel--suppliers {
  position: relative;
  overflow: hidden;
}

.catalog-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.catalog-panel__header p {
  margin: 8px 0 0;
  max-width: 44ch;
}

.catalog-panel__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.catalog-panel__list>* {
  min-width: 0;
}

.catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(110px, auto) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fbfb;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.catalog-row__main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-row__main div {
  min-width: 0;
}

.catalog-row__main strong,
.catalog-row__side strong {
  display: block;
  color: #1f2937;
}

.catalog-row__main strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-row__main span,
.catalog-row__side span {
  display: block;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-row__badge {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary, #008b97);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.catalog-row__badge--soft {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary, #008b97);
}

.catalog-row__badge--square {
  border-radius: 12px;
  background: rgba(80, 82, 97, 0.1);
  color: #505261;
}

.catalog-row__badge--gold {
  background: rgba(199, 162, 68, 0.18);
  color: #9a7b28;
}

.catalog-row__side {
  text-align: right;
}

.catalog-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-row__actions--compact {
  grid-column: 2 / 4;
}

.catalog-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.catalog-action:hover {
  transform: translateY(-1px);
}

.catalog-action--primary {
  background: var(--primary, #008b97);
  color: #fff;
  box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.22);
}

.catalog-action--secondary {
  background: #fff;
  color: #505261;
  border: 1px solid rgba(148, 163, 184, 0.32);
}

.catalog-panel__empty {
  margin: 0;
  padding: 24px 0 6px;
}

.tools-hub {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tools-hub__widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.tools-hub__widget--wide {
  grid-column: 1 / -1;
}

.tools-hub__widget,
.tools-hub__section,
.tools-hub__card {
  background: #fff;
  border: 1px solid #e5e9eb;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(80, 82, 97, 0.08);
}

.tools-hub__widget,
.tools-hub__section {
  padding: 28px;
}

.tools-hub__widget-header,
.tools-hub__section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.tools-hub__widget-header h3,
.tools-hub__section-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.1rem;
}

.tools-hub__widget-header p,
.tools-hub__section-header p {
  margin: 8px 0 0;
  color: #74808b;
  line-height: 1.55;
}

.tools-hub__widget-tag,
.tools-hub__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tools-hub__widget-tag {
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary, #008b97);
}

.tools-hub__input-label {
  display: block;
  margin-bottom: 8px;
  color: #5c6975;
  font-size: 0.9rem;
  font-weight: 600;
}

.tools-hub__input-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 18px;
  min-height: 72px;
  border-radius: 18px;
  border: 2px solid #e5e9eb;
  background: #fff;
}

.tools-hub__input-wrap span {
  color: #9aa4af;
  font-size: 1.15rem;
  font-weight: 700;
}

.tools-hub__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1f2937;
  font-size: 1.8rem;
  font-weight: 800;
}

.tools-hub__input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}

.tools-hub__input-wrap--compact {
  margin-bottom: 0;
  min-height: 64px;
}

.tools-hub__input--compact {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tools-hub__button {
  min-width: 132px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary, #008b97), var(--primary-dark, #0f766e));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(var(--primary-rgb), 0.18);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.tools-hub__button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.tools-hub__button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.tools-hub__uid-result {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #f8fbfb;
}

.tools-hub__uid-result strong {
  display: block;
  margin-bottom: 8px;
  color: #1f2937;
}

.tools-hub__uid-result p {
  margin: 0;
  color: #5c6975;
  line-height: 1.6;
}

.tools-hub__uid-result[data-state="valid"] {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
}

.tools-hub__uid-result[data-state="valid"] strong {
  color: #047857;
}

.tools-hub__uid-result[data-state="invalid"],
.tools-hub__uid-result[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.08);
}

.tools-hub__uid-result[data-state="invalid"] strong,
.tools-hub__uid-result[data-state="error"] strong {
  color: #b91c1c;
}

.tools-hub__uid-result[data-state="loading"] {
  border-color: rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.08);
}

.tools-hub__uid-result[data-state="loading"] strong {
  color: #1d4ed8;
}

.tools-hub__helper-text {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  color: #74808b;
  font-size: 0.88rem;
  line-height: 1.55;
}

.tools-hub__helper-text a {
  color: var(--primary, #008b97);
  font-weight: 700;
  text-decoration: none;
}

.tools-hub__helper-text a:hover {
  text-decoration: underline;
}

.tools-hub__pill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tools-hub__pill {
  padding: 14px;
  border-radius: 16px;
  background: #f8fbfb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  text-align: center;
}

.tools-hub__pill small {
  display: block;
  margin-bottom: 6px;
  color: #74808b;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tools-hub__pill strong {
  color: #1f2937;
  font-size: 1.05rem;
}

.tools-hub__pill--accent {
  background: rgba(199, 162, 68, 0.1);
  border-color: rgba(199, 162, 68, 0.24);
}

.tools-hub__pill--accent strong {
  color: #9a7b28;
}

.tools-hub__pill--accent-teal {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.22);
}

.tools-hub__pill--accent-teal strong {
  color: var(--primary, #008b97);
}

.tools-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.tools-hub__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tools-hub__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(80, 82, 97, 0.12);
}

.tools-hub__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  font-weight: 800;
}

.tools-hub__icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.tools-hub__icon--gold {
  background: rgba(199, 162, 68, 0.16);
  color: #9a7b28;
}

.tools-hub__icon--green {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.tools-hub__icon--purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.tools-hub__icon--dark {
  background: rgba(80, 82, 97, 0.12);
  color: #505261;
}

.tools-hub__icon--teal {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary, #008b97);
}

.tools-hub__icon--red {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.tools-hub__card h4 {
  margin: 0 0 10px;
  color: #1f2937;
  font-size: 1rem;
}

.tools-hub__card p {
  margin: 0;
  color: #74808b;
  line-height: 1.55;
}

.tools-hub__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 5px 9px;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary, #008b97);
}

.tools-hub__arrow {
  margin-top: auto;
  padding-top: 18px;
  color: var(--primary, #008b97);
  font-weight: 700;
}

.ae-order-edit .ae-customer-preview__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 18px;
}

.ae-order-edit .ae-customer-preview__name {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
}

.ae-order-edit .ae-customer-preview__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5D6470;
}

.ae-order-edit .ae-customer-preview__body p:empty,
.ae-order-edit .ae-customer-preview__body strong:empty {
  display: none;
}

.ae-order-edit .ae-customer-preview__body>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-order-edit .ae-customer-hidden,
.ae-order-edit .form-group:has(input[hidden]):not(:has(label)):not(:has(textarea)):not(:has(select)):not(:has(button)):not(:has(.ae-customer-preview)),
.ae-order-edit .form-group[hidden],
.ae-order-edit .form-group[style*="display: none"],
.ae-order-edit .form-group.d-none,
.ae-order-edit .row.form-group[hidden],
.ae-order-edit .row.form-group[style*="display: none"],
.ae-order-edit .row.form-group.d-none,
.ae-order-edit .row.form-group>div[hidden],
.ae-order-edit .row.form-group>div[style*="display: none"],
.ae-order-edit .row.form-group>div.d-none,
.ae-order-edit .row.form-group>div:has(> [hidden]:only-child),
.ae-order-edit .row.form-group>div:has(> .d-none:only-child) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.ae-order-edit .ae-customer-preview__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-order-edit .invoice-summary-card {
  padding: 28px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #E5E9EB;
  box-shadow: var(--shadow);
  /* Bleibt beim Scrollen der (oft langen) linken Formularspalte sichtbar —
     Bootstraps .row ist ein Flex-Container mit align-items:stretch, die
     rechte Spalte (col-md-4) ist dadurch bereits so hoch wie die linke;
     sticky positioniert die Karte innerhalb dieser Spaltenhöhe. top-Offset
     unter der sticky Topbar (.ae-topbar, ~64px + Padding), z-index bewusst
     weit unter deren 1020, damit sie beim Scrollen sauber darunter verschwindet
     statt sie zu überlagern. */
  position: sticky;
  top: 84px;
  z-index: 5;
}

/* Bootstraps col-md-9/col-md-3 bleiben bis 767px nebeneinander (Orchids
   Split-Layout kennt nur die -md-Bootstrap-Breakpoints) — dabei wird die
   30%-Spalte mit der Karte (28px Padding je Seite + Inhalt) schon deutlich
   vor 767px zu schmal und beginnt zu überlaufen (bei ca. 768-1279px waren
   BEIDE Spalten zusammen breiter als die Zeile, ohne dass eine für sich
   allein "schuld" war — daher hier ein eigener, breiterer Stack-Breakpoint
   statt Bootstraps festem 768px; per Bisektion mit Playwright ermittelt,
   ab 1280px passt beides wieder nebeneinander). */
@media (max-width: 1279px) {
  .ae-order-edit .row.g-3:has(.invoice-summary-card)>.col-md {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ae-order-edit .ae-page-heading__aside {
    padding-right: 12px;
}

  .ae-order-edit .invoice-summary-card {
    /* Übereinander statt nebeneinander — sticky hätte hier keinen sinnvollen
       Effekt (die Karte würde permanent den oberen Viewport-Rand blockieren)
       und wird deshalb auf den normalen Fluss zurückgesetzt. */
    position: static;
  }
}

.ae-order-edit .invoice-summary-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 16px;
  margin-bottom: 20px;
}

.ae-order-edit .invoice-summary-card__head>div:first-child {
  /* Ohne min-width:0 verhindert der Flex-Default (min-width:auto) das
     Schrumpfen unter die Textbreite von "Zusammenfassung" — bei schmalerer
     Sidebar wurde dadurch das "Live"-Badge daneben aus der Karte
     hinausgedrückt statt umzubrechen. */
  min-width: 0;
}

.ae-order-edit .invoice-summary-card__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  color: #9094A0;
}

.ae-order-edit .invoice-summary-card__head h3 {
  margin: 0;
  font-size: 22px;
  color: var(--text-dark);
}

.ae-order-edit .invoice-summary-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ae-order-edit .invoice-summary-card__discount {
  margin-bottom: 18px;
}

.ae-order-edit .invoice-summary-card__label {
  margin-bottom: 8px;
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #7C808E;
  text-transform: uppercase;
}

.ae-order-edit .invoice-summary-card__discount-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px;
}

.ae-order-edit .invoice-summary-card__discount-input,
.ae-order-edit .invoice-summary-card__discount-type {
  width: 100% !important;
  margin-top: 0 !important;
  float: none !important;
  height: 52px !important;
  min-height: 52px !important;
}

.ae-order-edit .invoice-summary-card__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ae-order-edit .invoice-summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #FAFCFC;
  border-radius: 14px;
  border: 1px solid #E5E9EB;
  font-size: 15px;
  color: var(--text-dark);
}

.ae-order-edit .invoice-summary-card__row strong,
.ae-order-edit .invoice-summary-card__row .summe_ust {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
}

.ae-order-edit .invoice-summary-card__row--highlight {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.18);
}

.ae-order-edit .invoice-summary-card__row--highlight strong {
  font-size: 24px;
  color: var(--primary);
  letter-spacing: -0.4px;
}

.ae-order-edit .invoice-summary-card__footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #E5E9EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #9094A0;
}

.ae-order-edit .invoice-summary-card__footer strong {
  font-size: 18px;
  color: var(--text-dark);
}

/* Artikelliste/Zahlungs-Historie (.invoice-matrix) haben pro Zeile ein festes
   Mindest-Grid (.invoice-matrix__stacked-main, ~690px Summe der minmax()-
   Spalten) — seit Kundendaten/Artikelliste/Rechnungsdetails gemeinsam in der
   linken Split-Spalte stehen (statt vorher auf voller Seitenbreite), ist
   diese Spalte bei mittleren Fensterbreiten schmäler als die Tabelle breit
   sein will. Ohne eigenen Scroll-Container würde die Tabelle dann die ganze
   Seite waagrecht aufsprengen (horizontaler Seiten-Scroll) statt nur sich
   selbst scrollbar zu machen. */
.ae-order-edit .form-group:has(>table.invoice-matrix) {
  overflow-x: auto;
  /* width:100% ist hier kein Kosmetik-Extra, sondern nötig: dieses form-group
     ist Kind eines column-flex-Containers (.d-flex.flex-column), Breite ist
     dort die Cross-Achse und sollte per align-items:stretch (Default) einfach
     die volle Breite bekommen — sobald overflow-x aber ungleich visible ist
     (neuer Formatierungskontext), kollabiert die Cross-Achsen-Breite unterhalb
     einer gewissen Fensterbreite stattdessen auf 0 (beobachtet ab ~640px).
     width:100% erzwingt die eigentlich schon erwartete Stretch-Breite explizit. */
  width: 100%;
  /* CSS-Falle: overflow-x:auto zwingt ein rechnerisch "visible" overflow-y
     ebenfalls auf "auto" (Spec-Regel, nicht überschreibbar durch explizites
     overflow-y:visible). Die TomSelect-Dropdowns der Artikel-Auswahl sind
     position:absolute-Kinder OHNE dropdownParent:'body' (Orchids
     select_controller.js setzt das nicht) — ohne Gegenmaßnahme würden sie
     an der neuen Container-Kante abgeschnitten, sobald eine Zeile nahe am
     unteren Rand der Tabelle ein Dropdown öffnet. padding-bottom reserviert
     Platz dafür INNERHALB der Scroll-Box; die gleich große negative
     margin-bottom holt den nachfolgenden Abschnitt (Rechnungsdetails) wieder
     auf den ursprünglichen Abstand hoch, damit optisch nichts größer wirkt,
     solange kein Dropdown offen ist.
     Andernfalls sieht das Beleg-Prüfungs-Buchungseditor-Muster (dropdownParent
     'body' via app.js) hierfür ähnlich vor — hier reicht das leichtere Padding-
     Polster, da Alle Zeilen bereits innerhalb der Karte liegen. */
  padding-bottom: 220px;
  margin-bottom: -220px;
}

.ae-order-edit .invoice-matrix {
  margin: 0;
  border: 0 !important;
  background: transparent;
  border-collapse: separate !important;
  border-spacing: 0 12px;
}

.ae-order-edit .invoice-matrix.table> :not(caption)>*>* {
  box-shadow: none !important;
}

.ae-order-edit .invoice-matrix thead th {
  padding: 0 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px;
  font-weight: 800;
  color: #A0AAB2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: bottom;
}

.ae-order-edit .invoice-matrix tbody tr.invoice-matrix__row {
  border: 0 !important;
}

.ae-order-edit .invoice-matrix tbody th,
.ae-order-edit .invoice-matrix tbody td {
  border: 0 !important;
  background: transparent !important;
}

.ae-order-edit .invoice-matrix__row>th,
.ae-order-edit .invoice-matrix__row>td {
  padding: 12px 10px !important;
  background: #FAFCFC !important;
  border-top: 1px solid #E5E9EB !important;
  border-bottom: 1px solid #E5E9EB !important;
}

.ae-order-edit .invoice-matrix__row>th:first-child,
.ae-order-edit .invoice-matrix__row>td:first-child {
  border-left: 1px solid #E5E9EB !important;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.ae-order-edit .invoice-matrix__row>th:last-child,
.ae-order-edit .invoice-matrix__row>td:last-child {
  border-right: 1px solid #E5E9EB !important;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.ae-order-edit .invoice-matrix__row:hover>th,
.ae-order-edit .invoice-matrix__row:hover>td {
  background: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.ae-order-edit .invoice-matrix__row--stacked>th {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ae-order-edit .invoice-matrix__stacked-cell {
  box-shadow: none !important;
}

.ae-order-edit .invoice-matrix__stacked-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 18px;
  background: #FAFCFC;
  border: 1px solid #E5E9EB;
  border-radius: 18px;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ae-order-edit .invoice-matrix__row--stacked:hover .invoice-matrix__stacked-card {
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.ae-order-edit .invoice-matrix__stacked-main {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) minmax(84px, 0.7fr) minmax(100px, 0.6fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.ae-order-edit .invoice-matrix__stacked-main--invoice {
  grid-template-columns: 28px 48px minmax(220px, 2.2fr) minmax(84px, 0.7fr) minmax(100px, 0.6fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) 36px;
}

/* Kleinunternehmer-Rechnung: ohne Steuersatz-Spalte soll Artikel mehr Platz bekommen. */
.ae-order-edit table.invoice-matrix.invoice-matrix--no-tax .invoice-matrix__stacked-main--invoice,
.ae-order-edit table.invoice-matrix.invoice-matrix--no-tax .invoice-matrix__stacked-main--no-tax {
  grid-template-columns: 28px 48px minmax(280px, 2.6fr) minmax(84px, 0.7fr) minmax(100px, 0.6fr) minmax(140px, 1fr) 36px;
}

/* Kopfzeile (.invoice-matrix__head-row, siehe matrix.blade.php) teilt sich
   BEWUSST exakt dieselben grid-template-columns-Werte wie
   .invoice-matrix__stacked-main(--invoice) oben – EINE Quelle für die
   Spaltenbreiten statt zweier unabhängig gepflegter Systeme (die vorher
   auseinanderliefen: native th-width-Attribute im Header vs. CSS-Grid im
   Body). Padding/Gap spiegeln .invoice-matrix__stacked-card (8px 18px) bzw.
   .invoice-matrix__stacked-main (gap 12px), damit die Spalten exakt über der
   Karte darunter stehen. */
.ae-order-edit .invoice-matrix__head-row {
  display: grid;
  grid-template-columns: 28px 48px minmax(220px, 2.2fr) minmax(84px, 0.7fr) minmax(100px, 0.6fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) 36px;
  gap: 12px;
  padding: 0 18px;
  border:none!important;
}

.ae-order-edit table.invoice-matrix.invoice-matrix--no-tax .invoice-matrix__head-row {
  grid-template-columns: 28px 48px minmax(280px, 2.6fr) minmax(84px, 0.7fr) minmax(100px, 0.6fr) minmax(140px, 1fr) 36px;
}

.ae-order-edit .invoice-matrix__remove-head {
  width: 36px;
}

.ae-order-edit .invoice-matrix__stacked-slot {
  min-width: 0;
}

.ae-order-edit .invoice-matrix__stacked-slot--handle,
.ae-order-edit .invoice-matrix__stacked-slot--index,
.ae-order-edit .invoice-matrix__stacked-slot--remove {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.ae-order-edit .invoice-matrix__stacked-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #D8E1E4;
}

.ae-order-edit .invoice-matrix__stacked-detail--hidden {
  display: none;
}

.ae-order-edit .invoice-matrix__stacked-detail-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #A0AAB2;
}

/* Label je Feld für die mobile Ein-Spalten-Ansicht (siehe
   .invoice-matrix__stacked-slot-label in matrixRow.blade.php) — am Desktop
   labelt die Kopfzeile (.invoice-matrix__head-row) die Spalten bereits,
   daher hier per Default unsichtbar; erst im @media weiter unten sichtbar. */
.ae-order-edit .invoice-matrix__stacked-slot-label {
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #A0AAB2;
  margin-bottom: 4px;
}

.ae-order-edit .invoice-matrix__handle-head,
.ae-order-edit .invoice-matrix__handle-cell {
  width: 28px;
}

.ae-order-edit .invoice-matrix__index-head,
.ae-order-edit .invoice-matrix__index-cell {
  width: 48px;
}

.ae-order-edit .invoice-matrix__drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  color: #CBD5E1;
  font-size: 18px;
  cursor: grab;
  user-select: none;
}

.ae-order-edit .invoice-matrix__drag:hover {
  color: var(--primary);
}

.ae-order-edit .invoice-matrix__index {
  font-size: 14px;
  font-weight: 800;
  color: #A0AAB2;
}

.ae-order-edit .invoice-matrix__field-cell .row.form-group {
  margin: 0;
}

.ae-order-edit .invoice-matrix__field-cell .row.form-group>div {
  margin-bottom: 0;
}

.ae-order-edit .invoice-matrix__field-cell--artikel_id .ts-wrapper.single .ts-control,
.ae-order-edit .invoice-matrix__field-cell--artikel_id input.form-control {
  font-weight: 700;
}

.ae-order-edit .invoice-matrix__field-cell--beschreibung textarea.form-control {
  min-height: 92px;
}

.ae-order-edit .invoice-matrix__stacked-detail-field textarea.form-control {
  min-height: 60px;
}

.ae-order-edit .invoice-matrix__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #CBD5E1 !important;
}

.ae-order-edit .invoice-matrix__remove:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger) !important;
  text-decoration: none;
}

.ae-order-edit .invoice-matrix .add-row>th {
  padding-top: 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ae-order-edit .invoice-matrix .add-row,
.ae-order-edit .invoice-matrix .add-row::before,
.ae-order-edit .invoice-matrix .add-row::after {
  border: 0 !important;
  box-shadow: none !important;
}

.ae-order-edit .invoice-matrix__add-row {
  min-height: 54px;
  border: 2px dashed #CBD5E1 !important;
  border-radius: 16px !important;
  color: var(--primary) !important;
  background: transparent !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.ae-order-edit .invoice-matrix__add-row:hover {
  background: #F0F9FA !important;
  border-color: var(--primary) !important;
}

.ae-order-edit .timeline,
.ae-order-edit .card.mb-3 {
  border-radius: 20px;
}

/* "Wiederkehrende Rechnung"-Schalter (AuftraegeEditScreen::layout() ->
   $layoutWiederkehrendToggle): Orchid's Layout::rows() steckt JEDES Feld
   zwingend in ein <fieldset><div class="bg-white rounded shadow-sm p-4 py-4">
   (vendor/orchid/.../layouts/row.blade.php) - für den reinen Schalter im
   Default-Zustand (nichts aktiviert) sähe das wie eine unnötig grosse, leere
   Box aus. Statt eines eigenen Layout::view()-Partials nur für dieses eine
   Feld wird die Box hier gezielt flachgeklopft (:has() ist im Projekt bereits
   etabliert, siehe .bk-acc__badge in buchen.css). Die "Zyklus-Einstellungen"-
   Box darunter behaelt bewusst ihr normales Karten-Aussehen, wenn sie sich
   (per JS, siehe aeUpdateWiederkehrendVisibility) aufklappt. */
.ae-order-edit fieldset:has(input[name="wiederkehrend_rechnung"])>.bg-white {
  /* !important nötig: Orchid/Bootstraps .bg-white/.rounded/.shadow-sm/.p-4/
     .py-4 setzen dieselben Eigenschaften bereits selbst mit !important –
     ohne Gegen-!important gewinnt die Kaskade unabhängig von Ladereihenfolge
     oder Selektor-Spezifität immer die Vorlage. */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

@media (min-width: 992px) {
  .ae-order-edit #post-form .row.g-3>.col-md:last-child {
    position: sticky;
    top: 24px;
  }
}

@media (max-width: 991px) {
  .ae-order-edit .ck-page-title {
    font-size: 28px;
  }

  .ae-order-edit #post-form .row.g-3 {
    --bs-gutter-x: 20px;
  }
}

@media (max-width: 768px) {

  .ae-order-edit .accordion-heading,
  .ae-order-edit .accordion>.collapse,
  .ae-order-edit .invoice-summary-card,
  .ae-order-edit #post-form>fieldset>.bg-white.rounded.shadow-sm {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ae-order-edit .invoice-summary-card__discount-controls {
    grid-template-columns: 1fr;
  }

  .ae-order-edit .ae-customer-preview__body {
    grid-template-columns: 1fr;
  }

  /* display:block auf einem <table> mit table-typischen Kindern (thead/tbody/
     tr, die selbst weiterhin table-header-group/table-row-group/table-row
     BLEIBEN) ist eine CSS-Falle: die Tabelle verliert ihren table-
     Formatierungskontext, wodurch ihre intrinsische Breite kollabieren kann
     (beobachtet: 0px Breite ab ~640px, Tabelle de facto unsichtbar). Der
     Scroll-Container sitzt jetzt ohnehin schon eine Ebene höher auf dem
     .form-group-Wrapper (overflow-x:auto dort, siehe oben) — display:table
     hier bewusst NICHT anfassen.
  .ae-order-edit .invoice-matrix {
    display: block;
    overflow-x: auto;
  } */

  /* Die Kopfzeile labelt Spalten einer Mehrspalten-Ansicht — sobald jede
     Zeile stattdessen auf eine Spalte gestapelt ist (siehe grid-template-
     columns:1fr unten) und jedes Feld sein eigenes Label bekommt
     (.invoice-matrix__stacked-slot-label), wird sie überflüssig und wäre nur
     noch eine breite, für sich allein wegscrollbare Zeile ohne echten Nutzen. */
  .ae-order-edit .invoice-matrix__head-row {
    display: none;
  }

  /* .ae-order-edit table.invoice-matrix.invoice-matrix--no-tax
     .invoice-matrix__stacked-main--invoice/--no-tax (Kleinunternehmer-Variante,
     siehe oben bei den Desktop-Grid-Definitionen) ist mit 4 Klassen spezifischer
     als eine einfache .invoice-matrix__stacked-main--invoice-Regel und hätte den
     mobilen 1fr-Umbruch sonst immer überstimmt (unabhängig von der Media Query —
     Spezifität zählt UNABHÄNGIG davon, ob eine Regel in einem @media steckt) —
     Kleinunternehmer-Rechnungen blieben dadurch am Handy bei der breiten
     Mehrspalten-Ansicht hängen, exakt das gemeldete Problem. Hier deshalb explizit
     mit aufgeführt statt auf die allgemeinere Regel zu vertrauen. */
  .ae-order-edit .invoice-matrix__stacked-main,
  .ae-order-edit .invoice-matrix__stacked-main--invoice,
  .ae-order-edit table.invoice-matrix.invoice-matrix--no-tax .invoice-matrix__stacked-main--invoice,
  .ae-order-edit table.invoice-matrix.invoice-matrix--no-tax .invoice-matrix__stacked-main--no-tax {
    grid-template-columns: 1fr;
  }

  .ae-order-edit .invoice-matrix__stacked-slot--handle,
  .ae-order-edit .invoice-matrix__stacked-slot--index,
  .ae-order-edit .invoice-matrix__stacked-slot--remove {
    justify-content: flex-start;
  }

  /* Ohne Kopfzeilen-Spaltenbeschriftung (die bleibt am Handy weiterhin eine
     breite, wegscrollbare Zeile über der gestapelten Karte) braucht jedes
     Feld sein eigenes Label, sonst ist eine Spalte aus bloßen Eingabefeldern
     ohne jede Beschriftung nicht bedienbar. */
  .ae-order-edit .invoice-matrix__stacked-slot-label {
    display: block;
  }
}

@media (max-width: 1100px) {

  .tax-hub__grid,
  .tools-hub__pill-grid,
  .catalog-hub__grid,
  .catalog-hub__summary-grid,
  .tax-hub__savings-split,
  .tax-hub__liabilities-grid {
    grid-template-columns: 1fr;
  }

  .tools-hub__widgets {
    grid-template-columns: 1fr;
  }

  .tax-hub__liabilities-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tax-hub__liabilities-total {
    text-align: left;
  }
}

@media (max-width: 768px) {

  .tax-hub__card,
  .tax-hub__highlight,
  .tax-hub__export-card,
  .tax-hub__savings,
  .tools-hub__widget,
  .tools-hub__section,
  .catalog-hub__highlight,
  .catalog-panel,
  .catalog-hub__summary-card {
    padding: 22px;
  }

  /* Grüner Info-Balken bleibt auch im Tablet-Bereich schlanker als die
     generische 22px-Regel oben (sonst wäre er hier größer als am Desktop). */
  .catalog-hub__highlight {
    padding: 16px 18px;
  }

  .tax-hub__section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tax-hub__calendar-link {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .tax-hub__calendar-side {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .tax-hub__facts {
    grid-template-columns: 1fr;
  }

  .tax-hub__savings-total {
    font-size: 38px;
  }

  .catalog-row {
    grid-template-columns: 1fr;
  }

  .tools-hub__input-row,
  .tools-hub__pill-grid {
    grid-template-columns: 1fr;
  }

  .tools-hub__button {
    min-height: 56px;
  }

  .catalog-hub__toolbar,
  .catalog-panel__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog-hub__toolbar-chips {
    justify-content: flex-start;
  }

  .catalog-row__side,
  .catalog-row__actions,
  .catalog-row__actions--compact {
    grid-column: auto;
    text-align: left;
    justify-content: flex-start;
  }
}

/* Auf-/Zuklapp-Pfeil bei Menüpunkten mit echtem Bootstrap-Collapse-Toggle
   (aktuell nur "Backoffice" – siehe menu.blade.php: der Pfeil wird nur
   gerendert, wenn Orchid mangels eigenem ->route() automatisch
   data-bs-toggle="collapse" + $slug vergibt; Menüpunkte mit ->route() UND
   ->list() wie Einnahmen/Ausgaben navigieren stattdessen direkt weg und
   bekommen keinen Pfeil). Zwei Glyphen statt Rotation: "<" zugeklappt,
   nach unten aufgeklappt (Bootstraps Collapse-JS pflegt aria-expanded
   automatisch am Trigger-Link). */
div.aside .nav-link .sub-elements-caret {
  opacity: 0.85;
  color: var(--primary);
  transition: opacity 0.2s;
}

div.aside .nav-link:hover .sub-elements-caret {
  opacity: 1;
}

div.aside .nav-link .sub-elements-caret svg {
  width: 15px;
  height: 15px;
}

div.aside .nav-link .sub-elements-caret .caret-down {
  display: none;
}

div.aside .nav-link[aria-expanded="true"] .sub-elements-caret .caret-left {
  display: none;
}

div.aside .nav-link[aria-expanded="true"] .sub-elements-caret .caret-down {
  display: inline-flex;
}

/* Submenü (verschachtelte Nav) */
div.aside .nav .nav .nav-link,
div.aside .nav>li>.collapse a.nav-link,
div.aside .nav>li>.collapsing a.nav-link {
  color: #7c808e !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 8px 14px 8px 38px !important;
  border-radius: 10px !important;
  background: transparent !important;
}

div.aside .nav .nav .nav-link:hover {
  color: var(--primary, #008B97) !important;
  background-color: rgba(var(--primary-rgb), 0.05) !important;
}

div.aside .nav .nav .nav-link.active {
  color: var(--primary, #008B97) !important;
  background-color: rgba(var(--primary-rgb), 0.08) !important;
  font-weight: 600 !important;
}

/* Scroll-to-Top ausblenden */
div.aside .to-top {
  display: none !important;
}

/* ── Footer-Profil-Bereich ─────────────────────────────────── */
div.aside footer.position-fixed {
  position: static !important;
  bottom: auto !important;
}

/* ── Collapsed State ───────────────────────────────────────── */
div.aside.aside-collapsed header {
  padding: 28px 0 12px 0 !important;
  justify-content: center !important;
}

div.aside.aside-collapsed .aside-collapse {
  padding: 4px 6px 0 6px !important;
}

div.aside.aside-collapsed .nav>li>a.nav-link,
div.aside.aside-collapsed .nav>.nav-item>a.nav-link {
  justify-content: center !important;
  padding: 11px !important;
}

/* ── Cockpit-Sidebar-Footer (Wishbox + User) ───────────────── */
.ck-sidebar-footer {
  padding: 0 20px 20px 20px;
  margin-top: auto;
  flex-shrink: 0;
}

.ck-wishbox {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.02));
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.ck-wishbox:hover {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: var(--primary, #008B97);
}

.ck-wishbox-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #008B97);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.ck-wishbox-text {
  font-size: 11px;
  color: #9094A0;
  line-height: 1.4;
}

.ck-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 8px 8px;
  margin: 0 -8px;
  border-top: 1px solid rgba(229, 233, 235, 0.6);
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ck-user-row:hover,
.ck-user-row:focus-visible {
  background-color: rgba(var(--primary-rgb), 0.06);
  text-decoration: none;
  outline: none;
}

.ck-user-row:hover .ck-user-name,
.ck-user-row:focus-visible .ck-user-name {
  color: var(--primary, #008B97);
}

.ck-avatar {
  width: 34px;
  height: 34px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary, #008B97);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.ck-user-name {
  font-weight: 600;
  font-size: 14px;
  color: #505261;
}

.ck-user-status {
  font-size: 11px;
  color: #9094A0;
}

/* collapsed: footer verstecken */
div.aside.aside-collapsed .ck-sidebar-footer {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   PAGE HEADER (Cockpit-Style: Breadcrumb → Titel → Subtitle)
   ============================================================ */

/* Content-Bereich bekommt den Cockpit-Grau-Hintergrund */
.app-shell .app-content-col {
  background-color: #F4F7F6 !important;
}

/* ae-page-header: transparent, kein weißer Kasten mehr */
.ae-page-header {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
}

/* command-bar .layout: Orchid-Styles entfernen */
.ae-page-header .layout {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── Header-Balken: Titel links, Buttons rechts ────────────── */
.ck-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 10px 24px 10px;
  background: transparent;
  /* width: 50%;
  float:right; */
}

/* Links: vertikal gestapelt — Breadcrumb → Titel → Subtitle */
.ck-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

/* Breadcrumb (Pill-Style, dezent, gut sichtbar) */
.ck-breadcrumb-inline {
  display: flex !important;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
  gap: 0;
  flex-wrap: wrap;
}

.ck-breadcrumb-inline .ae-bc-item a,
.ck-breadcrumb-inline .ae-bc-item,
.ck-breadcrumb-inline .ae-bc-item span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A808E;
  text-decoration: none;
  transition: color .15s ease;
}

.ck-breadcrumb-inline .ae-bc-item.active span,
.ck-breadcrumb-inline .ae-bc-item span.active {
  color: #3D3F4E;
}

.ck-breadcrumb-inline .ae-bc-item a:hover {
  color: #3D3F4E;
  text-decoration: none;
}

.ck-breadcrumb-inline .ae-bc-item+.ae-bc-item::before {
  content: "›";
  font-size: 15px;
  color: #C5CAD3;
  margin: 0 8px;
  line-height: 1;
}

/* Trenner zwischen Breadcrumb-Inline und Titel (nicht mehr benötigt) */
.ck-header-sep {
  display: none;
}

/* Seitentitel – identisch zur Cockpit-h1 */
.ck-page-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  color: #3D3F4E !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  padding-bottom: 15px;
}

/* Seitenuntertitel (description) */
.ck-page-subtitle {
  font-size: 15px;
  color: #9094A0;
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
}

/* Rechts: Icon-Buttons + Aktions-Buttons, mittig ausgerichtet */
.ck-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 6px;
  /* optisch mit Titel-Mittellinie ausrichten */
}

.ck-header-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9094A0;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  text-decoration: none;
  line-height: 0;
  opacity: 0.55;
}

.ck-header-icon-btn:hover {
  color: #505261;
  opacity: 1;
  background: rgba(0, 0, 0, 0.04);
}

.ck-mandant-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #A0AAB2;
  white-space: nowrap;
}

.ck-mandant-select {
  font-size: 12px;
  padding: 3px 8px;
  height: 28px;
  border: 1px solid #E5E9EB;
  border-radius: 6px;
  color: #505261;
  background: #fff;
  cursor: pointer;
  min-width: 120px;
  outline: none;
}

/* ── Command-Bar Buttons (Orchid: @yield('navbar')) ────────── */
.ck-header-right .command-bar,
.ck-header-right ul.command-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Outline-Buttons (z. B. "+ Angebot", "+ Rechnung") */
.ck-header-right .command-bar .btn,
.ck-header-right .command-bar a.btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.ck-header-right .command-bar .btn-default,
.ck-header-right .command-bar .btn-outline-default,
.ck-header-right .command-bar .btn-link:not(.btn-primary) {
  background: #ffffff !important;
  color: #505261 !important;
  border: 1px solid #E5E9EB !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.ck-header-right .command-bar .btn-default:hover,
.ck-header-right .command-bar .btn-outline-default:hover {
  border-color: var(--primary, #008B97) !important;
  color: var(--primary, #008B97) !important;
}

.ck-header-right .command-bar .btn-primary {
  background: var(--primary, #008B97) !important;
  border-color: var(--primary, #008B97) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.28) !important;
}

.ck-header-right .command-bar .btn-primary:hover {
  background: #007A85 !important;
  border-color: #007A85 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.36) !important;
}

/* Workspace-Inhalt */
.workspace {
  padding-top: 8px !important;
  background: transparent !important;
}

/* ============================================================
   EINNAHMEN HUB
   Gilt fuer die vorgeschaltete Rechnungen-/Angebote-Uebersicht.
   ============================================================ */

.income-hub {
  /* --income-primary/-secondary/-text/-muted/-border/-card sind bewusst NICHT
     mehr hier neu deklariert (waren identisch zu :root, siehe oben) — eine
     direkt auf .income-hub gesetzte Custom Property gewinnt beim Vererben
     IMMER gegenüber dem von :root geerbten Wert, unabhängig von Ladereihen-
     folge/Spezifität. Das hat Template-Overrides (public/css/template_bdo.css
     setzt --income-primary auf :root um) für alles innerhalb von .income-hub
     wirkungslos gemacht (Buttons/aktive Tabs blieben teal statt rot) — echter
     Bug, gefunden beim BDO-Menü-Vereinheitlichungs-Test. Die übrigen Tokens
     hier (kein :root-Äquivalent) bleiben unverändert. */
  --income-bg: #f4f7f6;
  --income-success-bg: #d1fae5;
  --income-success-text: #059669;
  --income-danger-bg: #fee2e2;
  --income-danger-text: #b91c1c;
  --income-warning-bg: rgba(245, 158, 11, 0.15);
  --income-warning-text: #b45309;
  --income-shadow: 0 12px 40px rgba(15, 23, 42, 0.05);
  color: var(--income-text);
}

.income-hub * {
  box-sizing: border-box;
}

.income-hub__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.income-hub__title h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.income-hub__title p,
.income-hub__title span {
  margin: 8px 0 0;
  color: var(--income-muted);
  font-size: 0.95rem;
  display: block;
}

.income-hub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.income-hub__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--income-primary);
  background: var(--income-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.22);
  transition: 0.2s ease;
}

.income-hub__button:hover {
  transform: translateY(-1px);
  background: #007b86;
  border-color: #007b86;
  color: #fff;
  text-decoration: none;
}

.income-hub__button--primary {
  background: var(--income-primary);
  border-color: var(--income-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.22);
}

.income-hub__button--primary:hover {
  color: #fff;
  border-color: var(--income-primary);
  background: #007b86;
}

.income-hub__button--gold {
  background: var(--income-secondary);
  border-color: var(--income-secondary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(199, 162, 68, 0.18);
}

.income-hub__button--gold:hover {
  color: #fff;
  border-color: var(--income-secondary);
  filter: brightness(1.04);
}

.income-hub__spotlight,
.income-hub__card {
  background: var(--income-card);
  border: 1px solid var(--income-border);
  border-radius: 24px;
  box-shadow: var(--income-shadow);
}

.income-hub__spotlight {
  padding: 28px 32px;
  margin-bottom: 32px;
}

.income-hub__spotlight h2 {
  margin: 0 0 14px;
  color: var(--income-primary);
  font-size: 1.1rem;
  font-weight: 700;
}

.income-hub__spotlight p {
  margin: 0 0 18px;
  color: var(--income-muted);
}

.income-hub__spotlight-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.income-hub__input {
  flex: 1 1 340px;
  min-width: 0;
  border: 1px solid transparent;
  background: var(--income-bg);
  border-radius: 16px;
  padding: 14px 18px;
  color: var(--income-text);
}

.income-hub__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.income-hub__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--income-border);
  color: var(--income-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: 0.2s ease;
}

.income-hub__chip:hover {
  color: var(--income-primary);
  border-color: rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.05);
  text-decoration: none;
}

.income-hub__grid {
  display: grid;
  gap: 24px;
}

.income-hub__card {
  padding: 28px 32px;
}

.income-hub__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.income-hub__card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ── Rechnungen/Angebote Segmented Toggle (im Page-Heading) ──── */
.ae-income-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  /* Feiner Hintergrund für die Gruppe selbst (die "Schiene" hinter den
     Pillen) — macht auf den ersten Blick klar, dass Rechnung/Angebot
     zusammengehören, unabhängig davon, welche Pille gerade aktiv ist. */
  background: var(--income-border, #e5e9eb);
  border-radius: 14px;
  width: 100%;
}

.ae-income-toggle--heading {
  max-width: 260px;
  /* Im Seitenkopf soll die Gruppe nur so breit sein, wie ihre (kompakten)
     Pillen brauchen, statt bis max-width zu strecken — sonst klafft bei
     kurzen Labels wie "Rechnung"/"Angebot" unnötig viel Luft. */
  width: max-content;
  grid-template-columns: max-content max-content;
}

.ae-income-toggle__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  text-align: center;
  line-height: 1.2;
  min-height: 42px;
}

.ae-income-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.6);
  color: #6B7280;
  flex: 0 0 22px;
  transition: background .15s ease, color .15s ease;
}

.ae-income-toggle__icon svg {
  width: 14px;
  height: 14px;
}

.ae-income-toggle__label {
  line-height: 1.2;
}

.ae-income-toggle__item:hover {
  color: #3D3F4E;
  text-decoration: none;
}

.ae-income-toggle__item.is-active {
  background: #FFFFFF;
  color: #3D3F4E;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.ae-income-toggle__item.is-active .ae-income-toggle__icon {
  background: rgba(var(--primary-rgb, 20, 138, 122), 0.12);
  color: var(--primary, #148A7A);
}

@media (max-width: 768px) {
  /* Auf dem Seitenkopf wandert die Gruppe auf eine eigene volle Zeile (siehe
     .ae-page-heading__aside weiter unten) — dort darf/soll sie wieder die
     ganze Breite ausfüllen (bessere Tap-Ziele) statt sich auf Content-Breite
     zu schrumpfen, das ist nur ein Desktop-neben-dem-Titel-Bedürfnis. */
  .ae-income-toggle--heading {
    max-width: none;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .ae-income-toggle__item {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 40px;
    gap: 6px;
  }

  .ae-income-toggle__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .ae-income-toggle__icon svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 480px) {
  .ae-income-toggle__item {
    padding: 7px 8px;
    font-size: 12px;
    gap: 5px;
  }

  .ae-income-toggle__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
}

.income-hub__link {
  color: var(--income-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}

.income-hub__link:hover {
  color: var(--income-primary);
  opacity: 0.8;
  text-decoration: none;
}

.income-hub__stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.income-hub__stat {
  min-width: 110px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fafcfc;
  border: 1px solid rgba(15, 23, 42, 0.04);
}

.income-hub__stat-label {
  color: var(--income-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.income-hub__stat-value {
  font-size: 1.15rem;
  font-weight: 800;
}

.income-hub__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.income-hub__filter-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  align-items: center;
}

/* Pill-Optik ist die EINE kanonische Filter-Tab-Darstellung für alle
   Hub-Listen (Rechnungen/Angebote/Mahnungen/Ausgaben/Kunden/Produkte) —
   vorher pflegten angebote.blade.php/mahnungen.blade.php diesen Override
   lokal & inkonsistent ("gleich wie Rechnungen", obwohl Rechnungen die
   schlichte Unterstrich-Variante rendert). Jetzt global, keine Kopien mehr. */
.income-hub__filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* padding: 4px 11px; */
  /* border-radius: 20px; */
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  color: var(--income-muted);
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}

.income-hub__filter-tab:hover {
  background: rgba(var(--primary-rgb), .06);
  color: var(--income-text);
  text-decoration: none;
}

.income-hub__filter-tab.is-active {
  color: var(--primary, #0e7f8a);
  border-bottom: 2px solid;
  /* background: rgba(var(--primary-rgb), .10); */
  /* border-bottom-color: transparent; */
  font-weight: 700;
}

/* Optionaler Zähler-Chip innerhalb eines Filter-Tabs (z.B. "Beleg fehlt 3") */
.income-hub__filter-tab span {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 6px;
  background: #E5E9EB;
  border-radius: 999px;
  font-size: 10px;
  color: var(--income-text);
}

.income-hub__filter-tab span.is-urgent {
  background: var(--danger, #EF4444);
  color: #fff;
}

/* Optionales Hover-Info-Icon in einem Filter-Tab (z.B. "In Prüfung" bei
   Einnahmen/Rechnungen, siehe toolbar.blade.php $f['hint']). Die generische
   Zähler-Chip-Regel oben (".income-hub__filter-tab span") hat wegen
   Klasse+Element höhere Spezifität als die eigenständigen
   .tooltip-wrapper/.info-icon/.tooltip-content-Klassen (siehe "Tooltip"-Block
   weiter oben) und würde Icon/Panel sonst zu einem grauen Zähler-Chip
   zusammenstauchen. Deshalb hier mit zwei Klassen erneut deklariert – das
   gewinnt gegen die einfachere Element-Regel. */
.income-hub__filter-tab .tooltip-wrapper {
  display: inline-flex;
  margin-left: 4px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.income-hub__filter-tab .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(199, 162, 68, .15);
  border-radius: 50%;
  font-size: 10px;
  color: var(--secondary);
}

.income-hub__filter-tab .info-icon:hover {
  background: var(--secondary);
  color: #fff;
}

.income-hub__filter-tab .tooltip-content {
  background: var(--white);
  color: var(--text-dark);
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: normal;
  white-space: normal;
}

/* --ae-cols wird pro Seite über App\Support\TableColumns::gridTemplate()
   berechnet und als Inline-Style "--ae-cols: ..." auf Header/Zeile gesetzt
   (siehe partials/table/header.blade.php) — Header und Zeile lesen dieselbe
   Variable und können dadurch nie mehr auseinanderlaufen. Der Fallback-Wert
   greift nur, falls eine Seite die Variable (noch) nicht setzt. */
.income-hub__table-header {
  display: grid;
  grid-template-columns: var(--ae-cols, minmax(0, 1.5fr) 120px 110px 130px 150px);
  gap: 12px;
  padding: 0 16px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--income-border);
  color: #a0aab2;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.income-hub__row {
  display: grid;
  grid-template-columns: var(--ae-cols, minmax(0, 1.5fr) 120px 110px 130px 150px);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fafcfc;
  border: 1px solid rgba(15, 23, 42, 0.04);
}

/* Rechnungen ist die einzige Tabelle mit eigenen Zwischen-Breakpoints
   (1400px/1080px, siehe unten) — die Modifier-Klasse bleibt dafür als
   CSS-Hook bestehen, liefert aber keine Basis-Spaltenbreite mehr (kommt
   jetzt aus --ae-cols). Nicht auf andere Seiten verallgemeinern: Mahnungen
   hat z.B. eine andere Spalte 3 — "Spalte 3 ausblenden" wäre dort falsch. */
.income-hub__row--rechnungen .income-hub__amount {
  white-space: nowrap;
}

/* Ausgaben: Zeilen-Zustände auf der gemeinsamen income-hub__row-Struktur
   (ersetzt für migrierte Zeilen die alten expense-hub__row.is-xxx-Regeln;
   die alten bleiben unverändert für ausgaben/abos.blade.php bestehen). */
.income-hub__row.is-missing {
  border-left: 3px solid var(--danger, #EF4444);
  background: #FEF2F2;
}

.income-hub__row.is-missing .income-hub__item-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger, #EF4444);
}

.income-hub__row.is-private {
  opacity: 0.82;
}

.income-hub__row.is-private .income-hub__amount {
  text-decoration: line-through;
  color: #9094A0;
}

.income-hub__row.is-upload-queued {
  background: rgba(59, 130, 246, 0.04);
}

.income-hub__row:hover {
  background: #fff;
}

.income-hub__meta-title {
  font-weight: 700;
  font-size: 0.97rem;
  margin-bottom: 2px;
  /* Auch lange Titel umbrechen statt aus der Spalte laufen zu lassen. */
  overflow-wrap: anywhere;
}

.income-hub__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Der Text-Wrapper (Titel + Untertitel) ist ein Flex-Kind ohne eigene Klasse.
   Ohne min-width:0 behält er seine Inhaltsbreite und der Text läuft aus der
   Details-Spalte heraus (unter das Status-Badge). min-width:0 zwingt ihn in die
   Zellbreite → der Text bricht um (wie in einer echten Tabelle). Das Icon
   (.income-hub__item-icon) hat feste Breite + flex-shrink:0, daher unbetroffen. */
.income-hub__main > * {
  min-width: 0;
}

.income-hub__item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ── Angebots-Titellink ───────────────────────────────────────────── */
.ie-angebot-link {
  color: inherit;
  font-weight: 7010;
  text-decoration: none;
}

.ie-angebot-link:hover {
  color: var(--income-primary, #008b97);
  text-decoration: underline;
}

/* Bewusst ohne .income-hub-Vorfahren (nur an die funktionale Klasse
   gebunden) — diese Icon-/Status-Farben werden inzwischen auch von Seiten
   außerhalb von .income-hub genutzt (Ausgaben/Kunden/Produkte). */
.income-hub__item-icon.icon-re {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--income-primary);
}

.income-hub__item-icon.icon-an {
  background: rgba(199, 162, 68, 0.15);
  color: var(--income-secondary);
}

.income-hub__item-icon.icon-success {
  background: #d1fae5;
  color: #059669;
}

.income-hub__meta-sub {
  color: var(--income-muted);
  font-size: 15px;
  /* Umbrechen statt abschneiden/überlaufen — langer Text bleibt in der
     Details-Spalte und läuft nicht unter das Status-Badge (wie in einer echten
     Tabelle). overflow-wrap:anywhere bricht auch lange, ununterbrochene Tokens
     (URLs o.ä.) um. */
  overflow-wrap: anywhere;
}

/* ── Rechnungen: Interaktions-Icons unter dem Status-Badge (Mail versendet /
   Mahnung gemacht / Heruntergeladen) — ersetzt die früheren Inline-Badges
   ("überfällig"/"Nx gemahnt") neben dem Kundennamen. Immer alle 3 Icons
   sichtbar (grau = inaktiv), Details ausschließlich im title-Tooltip, damit
   die Zeile ruhig bleibt und trotzdem auf einen Blick scanbar ist. */
.income-hub__meta-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

/* Status-Spalte: Badge + Icon-Zeile untereinander, zentriert. */
.income-hub__status-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.income-hub__meta-icons--center {
  justify-content: center;
  margin-top: 0;
}

.income-hub__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  color: #d4d4d4;
  cursor: default;
}

.income-hub__meta-icon svg {
  width: 12px;
  height: 12px;
}

.income-hub__meta-icon.is-active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--income-primary, #008b97);
}

.income-hub__meta-icon--warn.is-active {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

/* Gemeinsamer Link-Stil für Referenzen (Rechnungsnummer o.ä.) in der
   Details-Spalte — Titel oder Subtitel. Bewusst OHNE eigenes font-weight:
   erbt die Gewichtung vom umgebenden .income-hub__meta-title (700) bzw.
   .income-hub__meta-sub (400, kein eigener Wert gesetzt) — dadurch wirkt
   der Link im Titel fett, im Subtitel normal, ohne dass jede Seite das
   selbst nachbauen muss. Genutzt von Rechnungen (Titel) und Mahnungen
   (Subtitel). */
.ie-rechnung-link {
  color: inherit;
  text-decoration: none;

}
.ie-rechnung-link.ie-beleg-doc-trigger{

  font-weight:700;
}
.ie-rechnung-link:hover {
  color: var(--income-primary, #008b97);
  text-decoration: underline;
}

/* Badge direkt neben dem Namen (income-hub__meta-title), z.B. "Überfällig"
   bei Rechnungen — nutzt dieselbe Pille wie die Status-Spalte, nur mit
   Abstand zum Titeltext und ohne dessen Fettschrift zu erben. */
.income-hub__inline-badge {
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 800;
}

.income-hub__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bewusst ohne .income-hub-Vorfahren — s.o. bei .icon-re/.icon-an. */
.income-hub__status.status-draft {
  background: #e5e9eb;
  color: var(--income-text);
}

.income-hub__status.status-offen {
  background: #dbeafe;
  color: #1e40af;
}

.income-hub__status.status-sent {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.income-hub__status.status-paid,
.income-hub__status.status-accepted {
  background: #d1fae5;
  color: #059669;
}

.income-hub__status.status-cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

/* Kräftigeres Rot als status-cancelled (Signalfarbe wie die is-overdue
   Zeilen-Hervorhebung/urgent-Filter-Pills) — Überfällig ist dringlicher als
   ein neutral graues Storniert. */
.income-hub__status.status-ueberfaellig {
  background: rgba(220, 53, 69, 0.14);
  color: #dc2626;
}

/* Mahnstufe-Badge neben dem Namen (Zahlungserinnerung/1. Mahnung/2. Mahnung) —
   gelbe Warnfarbe, gleicher Ton wie status-sent. */
.income-hub__status.status-mahnstufe {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.income-hub__amount,
.income-hub__date {
  font-weight: 600;
  font-size: 16px;
}

.income-hub__amount-open {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--income-danger-text, #b91c1c);
  white-space: nowrap;
}

/* "Nächste Fälligkeit"-Subzeile unter dem Datum, nur im "Wiederkehrend"-Tab
   (rechnungen.blade.php, source==='abo') — gleiches Box-Modell wie
   .income-hub__amount-open, aber neutrale statt Warnfarbe. */
.income-hub__date-sub {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #9094A0;
  white-space: nowrap;
}

/* Inline-Variante direkt neben dem Zyklus-Label (meta-sub) — standardmäßig
   verborgen, dient nur als Fallback im 861-1080px-Bereich (siehe
   .income-hub__row--abo-Regel weiter unten), wo .income-hub__date komplett
   ausgeblendet wird und die normale Subzeile mit ihm verschwindet. */
.income-hub__date-sub--inline {
  display: none;
  margin-left: 6px;
}

.income-hub__actions-inline {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.income-hub__mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--income-border);
  color: var(--income-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
}

/* Icons in Aktionen-Buttons (Primär-Button) und ⋮-Menüeinträgen: einheitlich
   links vom Label (DOM-Reihenfolge: Icon vor Label) mit 5px Abstand — gilt
   für alle Aktionstypen (Bearbeiten/Anzeigen/Zahlung/Senden/…), da alle über
   partials/table/actions.blade.php + ViewHelpers::actionIcon() laufen.
   :not(.ie-btn-icon) schließt reine Icon-Buttons (⋮-Auslöser, 📄-Vorschau)
   aus — dort gibt es kein Label, ein Margin würde das Icon nur verschieben.
   flex-shrink:0 hält das Icon auf fester Breite, egal wie viel/wenig Platz
   das Label-Element (.ie-btn-label, siehe unten) daneben beansprucht — sonst
   könnte ein sehr langes Label das Icon stauchen. */
.income-hub__mini-link:not(.ie-btn-icon) svg,
.ie-dd-item svg {
  margin-right: 5px;
  flex-shrink: 0;
}

/* Label-Element im Primär-Button (partials/table/actions.blade.php): nimmt den
   GESAMTEN Rest der Buttonbreite ein (flex:1) und zentriert den Text NUR
   darin — das Icon bleibt davon unberührt an fester Position vorne (siehe
   oben). Damit ergibt sich exakt die gewünschte Kombination "Icon immer an
   derselben X-Position über alle Zeilen hinweg" + "Text mittig im
   verbleibenden Platz", die mit einem nackten Text-Node neben dem Icon nicht
   erreichbar war (kein adressierbares Flex-Item, keine eigene text-align/
   flex-Regel möglich). min-width:0 ist der übliche Flexbox-Kniff, damit das
   Label bei Bedarf schmaler als sein eigener Inhalt werden darf (Umbruch
   statt Überlauf) — ohne das würde ein Flex-Item nie unter seine intrinsische
   Breite schrumpfen. */
.income-hub__mini-link--primary .ie-btn-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.income-hub__mini-link:hover {
  color: var(--income-primary);
  border-color: rgba(var(--primary-rgb), 0.35);
  text-decoration: none;
}

/* Primärer Zeilen-Button (z.B. "bezahlt" bei Rechnungen, "Zahlen"/"Bearbeiten"
   bei Ausgaben): feste Mindestbreite statt frei am Label zu wachsen, damit die
   Spalte über alle Zeilen/Seiten hinweg möglichst gleich aussieht — gemeinsam
   für Rechnungen, Angebote, Ausgaben, Kunden/Produkte und das Cockpit-Widget
   "Das ist zu erledigen" (alle Hub-Listen-Seiten teilen sich
   partials/table/actions.blade.php, siehe CLAUDE.md "Hub-Listen-Seiten").
   Einheitlich in der Sekundärfarbe (Gold) gefüllt statt der früheren, pro
   Seite unterschiedlichen Farbgebung.
   min-width statt fixer width + overflow:hidden (früherer Bug): jeder
   Primär-Button trägt seit ViewHelpers::actionIcon() zusätzlich ein 14px-Icon
   + 5px Abstand vorne — bei längeren Labels ("Bearbeiten", "Beleg prüfen")
   reichte die alte feste Breite von 136px dafür nicht mehr, das Icon wurde am
   linken Rand abgeschnitten (unsichtbar), obwohl es im HTML vorhanden war.
   Mit min-width wächst der Button bei Bedarf mit statt zu clippen.

   justify-content: flex-start (statt dem geerbten center aus
   .income-hub__mini-link): Icon+Label wurden bisher als EINE Gruppe im
   Button zentriert — bei unterschiedlich langen Labels ("Lesen" vs.
   "Bezahlt markieren") landete das Icon dadurch in jeder Zeile an einer
   anderen X-Position, obwohl alle Primär-Buttons einer Spalte/Tabelle
   gleich breit sind. Mit flex-start sitzt das Icon immer direkt hinter dem
   linken Innenabstand — über alle Zeilen einer Spalte hinweg exakt
   deckungsgleich (Cockpit-Widget "Das ist zu erledigen" ebenso wie
   Rechnungen/Ausgaben). Die Ausrichtung des Labels selbst (zentriert im
   verbleibenden Platz NACH dem Icon, nicht am Button als Ganzes) steuert
   .ie-btn-label weiter unten — kein text-align hier, das würde nur den
   (nicht vorhandenen) Freiraum links vom Icon betreffen. */
.income-hub__mini-link--primary {
  min-width: 140px;
  justify-content: flex-start;
  /* background: var(--income-primary); */
  border-color: var(--income-primary);
  /* color: #fff; */
  color: var(--income-primary);
  white-space: nowrap;
}

.income-hub__mini-link--primary:hover {
  background: var(--primary-dark,);
  border-color: var(--primary-dark);
  color: #fff;
}

.income-hub__mini-link--primary.alleserledigt {
  background: #fff;
  border-color: var(--income-secondary, #c7a244);
  color: var(--income-secondary, #c7a244);
}
.income-hub__mini-link--primary.alleserledigt:hover{
  background: var(--income-secondary, #c7a244);
  border-color: var(--income-secondary, #c7a244);
  color:#fff;
}
/* Angebote-Hauptaktion „In Rechnung umwandeln": darf breiter werden als die
   Standardbreite und bleibt einzeilig — Farbe kommt bereits einheitlich
   (Gold) von .income-hub__mini-link--primary, Icon-Abstand von der globalen
   svg-margin-right-Regel, hier nur die Breiten-Ausnahme. */
.income-hub__mini-link.ie-btn-convert {
  width: auto;
  white-space: nowrap;
}

/* ── KPI-Leiste (Rechnungen / Angebote / Ausgaben) ─────────────────────────
   Freistehend OBERHALB der Listen-Card (wie die aw-kpis im Steuern & SVS
   Hub) statt als Kopfzeile innerhalb der Card — daher kein Card-Trenner/
   -Padding mehr, nur noch die reine Flex-Zeile für die KPI-Karten selbst
   (Layout weiterhin an „Auswertungen" aw-kpi angelehnt). */
.ie-kpi-bar {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px 22px;
}

/* .income-hub ist reiner Blockfluss (anders als .expense-hub/.tax-hub, die
   ihre Kinder über einen Flex-Gap auseinanderhalten) — der Abstand zur Card
   darunter braucht deshalb hier ein explizites Margin. */
.income-hub > .ie-kpi-bar {
  margin-bottom: 24px;
}

.ie-kpi-cells {
  display: flex;
  align-items: stretch;
  flex: 1 1 520px;
  min-width: 0;
  flex-wrap: wrap;
}

/* variant "cards" (siehe hub-kpi-bar.blade.php): .aw-kpis füllt die Zeile
   über flex-grow, sobald sie einziges Kind von .ie-kpi-bar ist. */
.ie-kpi-bar .aw-kpis {
  flex: 1 1 520px;
  min-width: 0;
}

.ie-kpi-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 150px;
  padding: 2px 20px;
  border-left: 1px solid #eef2f7;
}

.ie-kpi-cell:first-child {
  border-left: none;
  padding-left: 2px;
}

.ie-kpi-cell__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
}

.ie-kpi-cell__icon svg {
  width: 22px;
  height: 22px;
}

.ie-kpi-cell__body {
  min-width: 0;
}

.ie-kpi-cell__label {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 2px;
}

.ie-kpi-cell__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #0f172a;
  line-height: 1.1;
}

.ie-kpi-cell__sub {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 3px;
}

/* Tönungen je Kategorie: Icon-Kreis + Wertfarbe */
.ie-kpi-cell--income  .ie-kpi-cell__icon { background: #dcfce7; color: #16a34a; }
.ie-kpi-cell--income  .ie-kpi-cell__value { color: #16a34a; }
.ie-kpi-cell--open    .ie-kpi-cell__icon { background: #fef3c7; color: #d97706; }
.ie-kpi-cell--open    .ie-kpi-cell__value { color: #d97706; }
.ie-kpi-cell--partial .ie-kpi-cell__icon { background: #ffedd5; color: #ea580c; }
.ie-kpi-cell--partial .ie-kpi-cell__value { color: #ea580c; }
.ie-kpi-cell--overdue .ie-kpi-cell__icon { background: #fee2e2; color: #dc2626; }
.ie-kpi-cell--overdue .ie-kpi-cell__value { color: #dc2626; }
.ie-kpi-cell--accepted .ie-kpi-cell__icon { background: #dcfce7; color: #16a34a; }
.ie-kpi-cell--accepted .ie-kpi-cell__value { color: #16a34a; }
.ie-kpi-cell--neutral .ie-kpi-cell__icon { background: #e2e8f0; color: #475569; }
.ie-kpi-cell--neutral .ie-kpi-cell__value { color: #0f172a; }

@media (max-width: 720px) {
  .ie-kpi-cell {
    flex: 1 1 45%;
    padding: 8px 12px;
  }
}

/* ── Zeilen-Aktionen: 3-Punkte-Dropdown + Icon-Button ─────────────────────
   Gemeinsam für Rechnungen/Angebote/Ausgaben (vorher identisch dupliziert in
   rechnungen.blade.php, angebote.blade.php und ausgaben/index.blade.php). */
.ie-row-actions {
  display: flex;
  /* stretch statt center: wenn der Primär-Button auf 2 Zeilen umbricht (langes
     Label bei fester Breite), wächst der ⋮-Auslöser daneben automatisch auf
     dieselbe Höhe mit, statt in der fixen 42px-Quadrat-Höhe stehen zu bleiben. */
  align-items: stretch;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.ie-btn-icon {
  min-width: 42px !important;
  width: 42px !important;
  max-width: 42px;
  /* height:auto (überschreibt die fixe height:42px von .income-hub__mini-link)
     ist Voraussetzung dafür, dass align-items:stretch auf .ie-row-actions/
     .ie-dropdown überhaupt greifen kann — mit einer festen height ignoriert
     Flexbox stretch komplett, der ⋮-Auslöser bliebe immer bei 42px, selbst
     wenn der danebenstehende Primär-Button (z.B. "Bezahlt markieren",
     zweizeilig) höher ist. */
  height: auto;
  min-height: 42px;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
}

.ie-btn-icon svg {
  display: block;
}

.ie-dropdown {
  position: relative;
  display: inline-flex;
}

.ie-dropdown-toggle {
  gap: 6px;
}

/* Sichtbarer, aber inaktiver ⋮-Auslöser (partials/table/actions.blade.php
   $menuDisabled) — Zeilen mit nur einer einzigen Aktion behalten dieselbe
   Spaltenbreite/Optik wie Zeilen mit echtem Burger-Menü. */
.ie-dropdown-toggle:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* Kein position:absolute mehr — wird beim Öffnen per JS (partials/table/
   actions.blade.php) nach document.body verschoben und auf position:fixed
   mit Koordinaten aus getBoundingClientRect gesetzt. Funktioniert dadurch
   auch in scrollenden Containern und im Cockpit-Shadow-DOM. */
.ie-dropdown-menu {
  z-index: 1100;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

.ie-dropdown-menu li {
  display: block;
}

.ie-dd-divider {
  border-top: 1px solid #f0f0f0;
  margin: 4px 0;
}

.ie-dd-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 15px;
  border: none;
  background: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
  font-family: inherit;
}

.ie-dd-item:hover {
  background: #f5f6f8;
  color: #111;
  text-decoration: none;
}

.ie-dd-item--warn {
  color: #b45309;
}

.ie-dd-item--warn:hover {
  background: #fffbeb;
  color: #92400e;
}

.ie-dd-item--danger {
  color: #b91c1c;
}

.ie-dd-item--danger:hover {
  background: #fef2f2;
  color: #7f1d1d;
}

.ie-dd-item--primary {
  color: var(--income-primary, #008b97);
}

.ie-dd-item--primary:hover {
  background: rgba(var(--primary-rgb), .08);
  color: var(--income-primary, #008b97);
}

.ie-dd-item--disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.income-hub__empty {
  padding: 20px;
  border-radius: 16px;
  background: #fafcfc;
  color: var(--income-muted);
  border: 1px dashed var(--income-border);
}

/* ── Reichhaltiger Empty-State (Icon + Titel + Beschreibung + CTA) ────────
   Für neue User ohne Daten (Ausgaben/Rechnungen/Angebote) statt dem reinen
   Textblock oben – siehe partials/table/empty.blade.php ($isRich). */
.income-hub__empty--rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px;
  border-style: solid;
}

.income-hub__empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(var(--primary-rgb), 0.1);
  font-size: 26px;
  margin-bottom: 10px;
}

.income-hub__empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark, #1F2430);
}

.income-hub__empty-desc {
  margin: 0;
  max-width: 440px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--income-muted);
}

.income-hub__empty-cta {
  margin-top: 14px;
  border-radius: 999px;
}

/* Mid-viewport (~1200-1400px): die Rechnungs-Tabelle hat 5 enge Spalten —
   wir lösen Aktionen auf eine eigene Zeile, damit Summe nicht mehr wrappt. */
@media (max-width: 1400px) {

  .income-hub__table-header--rechnungen,
  .income-hub__row--rechnungen {
    grid-template-columns: minmax(0, 1.6fr) 110px 100px minmax(120px, 1fr);
  }

  .income-hub__table-header--rechnungen>div:last-child,
  .income-hub__row--rechnungen>.ie-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

/* Früher zwang dieser Breakpoint JEDE .income-hub__table-header/.income-hub__row
   (unabhängig von ihrer tatsächlichen Spaltenzahl) auf eine feste 4-Spalten-
   Breite — das kollidierte mit Rechnungens eigenen 1400px/1080px-Tiers
   (gleiche Selektor-Spezifität, späterer Rule-Sieg je nach Quellreihenfolge)
   UND passte gar nicht zu urgent-lists 5-6-Spalten-Form oder anderen Tabellen
   mit abweichender Spaltenzahl (Kunden/Produkte/Benachrichtigungen). Ergebnis
   je nach Bildschirmbreite: Kopfzeile/Aktionen sprangen in eine neue Zeile
   oder überlagerten sich. Der `minmax(0, 1fr)`-Hauptspalten-Anteil in
   --ae-cols schrumpft ohnehin flüssig bis zum 860px-Card-Umbruch — eine
   erzwungene Zwischenstufe ist nicht mehr nötig. */
@media (max-width: 1200px) {
  .income-hub__actions-inline {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Schmaler Mid-Bereich (≤1080px): Datum verschwindet aus der Tabellenzeile —
   das Datum wird stattdessen im meta-sub neben dem Kunden angezeigt. */
@media (max-width: 1080px) {

  .income-hub__table-header--rechnungen,
  .income-hub__row--rechnungen {
    grid-template-columns: minmax(0, 1.6fr) 110px minmax(110px, 1fr);
  }

  .income-hub__table-header--rechnungen> :nth-child(3),
  .income-hub__row--rechnungen>.income-hub__date {
    display: none;
  }
}

/* 861-1080px: genau die Lücke zwischen der obigen Regel (blendet die ganze
   Datum-Spalte inkl. Fälligkeits-Subzeile aus) und dem @media 860px weiter
   unten (blendet sie für ALLE Zeilen wieder ein). Für Abo-Zeilen (Tab
   "Wiederkehrend") gibt es dazwischen sonst keine Stelle mehr, an der
   "Nächste Fälligkeit" sichtbar ist — der Fallback direkt neben dem
   Zyklus-Label (income-hub__date-sub--inline) springt hier ein. */
@media (max-width: 1080px) and (min-width: 861px) {
  .income-hub__row--abo .income-hub__date-sub--inline {
    display: inline-block;
  }
}

@media (max-width: 860px) {

  .income-hub__spotlight,
  .income-hub__card {
    padding: 18px 16px;
    border-radius: 18px;
  }

  /* Filter-Tabs horizontal scrollbar lassen, statt zu wrappen — passt zur
     Touch-Bedienung und vermeidet hässliche zweite Zeile mit nur 1 Tab. */
  .income-hub__filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    margin: 0 -4px 0px;
    padding: 0 4px 4px;
    scrollbar-width: none;
  }

  .income-hub__filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .income-hub__filter-tab {
    flex: 0 0 auto;
    font-size: 13px;
  }

  .income-hub__table-header {
    display: none;
  }

  /* Tabellen-Zeile als kompakte Card:
        [icon] [title + badges]            [amount]
               [customer]
        [status] [datum]
        [Anzeigen · Senden · ✓ · ⋮]
     3-Zeilen-Grid mit 3 Spalten: main spannt die obere Zeile (links neben amount),
     status+date+spacer in Zeile 2, actions in Zeile 3.
     :not(.urgent-item) — urgent-list-Zeilen haben eine eigene, andere Card-
     Aufteilung weiter unten (@media max-width:1100px, Areas info/amount/due/
     acts mit den echten .item-info/.item-due/.item-amount-Klassen). Diese
     generische !important-Regel würde sonst (gleiche Selektor-Spezifität,
     aber !important schlägt die nicht-!important 1100px-Regel unabhängig
     von der Quellreihenfolge) die dortigen grid-area-Zuweisungen ins Leere
     laufen lassen, weil urgent-item keine .income-hub__main/__date/__amount-
     Kindelemente besitzt → Inhalte landen an der falschen Stelle. */
  .income-hub__row:not(.urgent-item) {
    grid-template-columns: auto auto 1fr !important;
    grid-template-areas:
      "main main amount"
      "status date ."
      "acts acts acts" !important;
    gap: 10px 12px;
    padding: 14px 14px;
    align-items: center;
  }

  .income-hub__main {
    grid-area: main;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    justify-self: start;
  }

  .income-hub__main .income-hub__item-icon {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
  }

  .income-hub__meta-title {
    font-size: 0.92rem;
  }

  .income-hub__meta-sub {
    font-size: 12px;
  }

  .income-hub__amount {
    grid-area: amount;
    align-self: start;
    text-align: right;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    justify-self: end;
  }

  /* :not(.urgent-item) — positionale nth-child-Regel, kein Klassen-Selektor:
     würde sonst auch urgent-item treffen (dort ist der 2. Kind-div .item-due,
     nicht das Rechnungen-Status-Feld) und "status" ist dort keine gültige
     grid-area → Browser fällt auf Auto-Placement zurück, .item-due landet
     neben den Buttons statt in der eigenen vollen Zeile unter dem Titel. */
  .income-hub__row:not(.urgent-item)>div:nth-child(2) {
    grid-area: status;
    justify-self: start;
    text-align: left;
  }

  /* Datum auf Mobile explizit wieder einblenden, auch für die Rechnungs-Tabelle,
     die ihn auf 1080px ausgeblendet hatte. */
  .income-hub__row>.income-hub__date,
  .income-hub__row--rechnungen>.income-hub__date {
    grid-area: date;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: start;
    text-align: left;
    font-size: 12px;
    color: #9094A0;
  }

  /* "Nächste Fälligkeit"-Subzeile (Tab "Wiederkehrend") bekäme sonst durch
     obiges inline-flex row layout die Fälligkeit direkt neben statt unter
     dem Datum — flex-direction:column oben stapelt stattdessen korrekt. */
  .income-hub__date-sub {
    margin-top: 0;
  }

  .income-hub__status {
    font-size: 0.66rem;
    padding: 4px 8px;
  }

  .income-hub__actions-inline,
  .income-hub__row>.ie-row-actions {
    grid-area: acts;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: 4px;
    gap: 6px;
  }

  /* Mini-Buttons schlanker auf Mobile */
  .income-hub__row .income-hub__mini-link {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 0;
  }

  .income-hub__row .income-hub__mini-link.ie-btn-icon {
    min-width: 36px !important;
    width: 36px !important;
    min-height: 36px;
  }
}

/* Hinweis zu urgent-list-Responsive: Es gibt bereits eine eigene, passende
   Mobile-Behandlung für .urgent-item weiter unten (@media max-width:1100px,
   grid-template-areas "info amount"/"due due"/"acts acts" mit den echten
   .item-icon/.item-info/.item-due/.item-amount-Klassen) — hier KEIN
   zusätzlicher genereller Override mehr nötig, seit die frühere generische
   1200px-Vier-Spalten-Zwangsjacke oben entfernt wurde (die war der eigentliche
   Auslöser des "AKTION springt in eigene Zeile"-Bugs bei ~1100-1200px).
   Ein pauschaler !important-Override hier würde stattdessen den funktionierenden
   ≤1100px-Block überschreiben (genau das ist vorher passiert). */

/* ============================================================
   AUSGABEN HUB
   ============================================================ */

.expense-hub {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.expense-hub__channels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 24px;
}

.expense-hub__channels--grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-bottom: 24px;
}

.expense-hub__channels--grid .expense-hub__upload-card--tall {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 220px;
}

.expense-hub__channels--grid .expense-hub__autopilot-card {
  grid-column: 2;
  grid-row: 1;
}

.expense-hub__channels--grid .expense-hub__mail-card:not(.expense-hub__autopilot-card) {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 900px) {
  .expense-hub__channels--grid {
    grid-template-columns: 1fr;
  }

  .expense-hub__channels--grid .expense-hub__upload-card--tall,
  .expense-hub__channels--grid .expense-hub__autopilot-card,
  .expense-hub__channels--grid .expense-hub__mail-card:not(.expense-hub__autopilot-card) {
    grid-column: auto;
    grid-row: auto;
  }
}

.expense-hub__upload-card,
.expense-hub__mail-card,
.expense-hub__card {
  background: var(--white);
  border: 1px solid #E5E9EB;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.expense-hub__upload-card {
  min-height: 180px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  border: 2px dashed #CBD5E1;
  background: #FAFCFC;
  transition: all 0.2s ease;
}

.expense-hub__upload-card:hover {
  text-decoration: none;
  border-color: var(--primary);
  background: #F0F9FA;
  transform: translateY(-2px);
}

.expense-hub__upload-card span {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}

.expense-hub__upload-card strong {
  color: var(--text-dark);
  font-size: 18px;
  margin-bottom: 6px;
}

.expense-hub__upload-card small {
  color: #9094A0;
  font-size: 12px;
}

.expense-hub__mail-card {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, #F0F9FA 0%, #FFFFFF 100%);
  border-color: rgba(var(--primary-rgb), 0.18);
}

.expense-hub__mail-card h3 {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 18px;
}

.expense-hub__mail-card p {
  margin: 0;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 1.55;
}

.expense-hub__mail-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FFFFFF;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid #E5E9EB;
}

.expense-hub__mail-box strong {
  font-size: 14px;
  color: var(--text-dark);
  overflow-wrap: anywhere;
}

.expense-hub__copy {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expense-hub__copy:hover {
  background: var(--primary);
  color: #fff;
}

.expense-hub__card {
  padding: 32px;
}

.expense-hub__card--full {
  width: 100%;
}

.expense-hub__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.expense-hub__card-header h3 {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--text-dark);
}

.expense-hub__card-header p {
  margin: 0;
  color: #9094A0;
  font-size: 14px;
}

.expense-hub__link {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.expense-hub__link:hover {
  color: var(--primary);
  opacity: 0.8;
  text-decoration: none;
}

.expense-hub__filter-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.expense-hub__filter-tab {
  color: #9094A0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.expense-hub__filter-tab:hover {
  color: var(--text-dark);
  text-decoration: none;
}

.expense-hub__filter-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.expense-hub__filter-tab span {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: #E5E9EB;
  border-radius: 999px;
  font-size: 10px;
  color: var(--text-dark);
}

.expense-hub__filter-tab span.is-urgent {
  background: var(--danger);
  color: #fff;
}

.expense-hub__table-header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 110px 110px 120px 220px;
  gap: 15px;
  padding: 0 20px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #A0AAB2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #E5E9EB;
  margin-bottom: 14px;
}

.expense-hub__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expense-hub__row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 110px 110px 120px 220px;
  gap: 15px;
  align-items: center;
  padding: 14px 20px;
  background: #FAFCFC;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.expense-hub__row:hover {
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.expense-hub__row.is-missing {
  border-left: 3px solid var(--danger);
  background: #FEF2F2;
}

.expense-hub__row.is-private {
  opacity: 0.82;
}

.expense-hub__main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.expense-hub__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F0F9FA;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.expense-hub__row.is-missing .expense-hub__icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.expense-hub__meta-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.expense-hub__meta-sub,
.expense-hub__date {
  font-size: 12px;
  color: #9094A0;
}

.expense-hub__amount {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.expense-hub__row.is-private .expense-hub__amount {
  text-decoration: line-through;
  color: #9094A0;
}

.expense-hub__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.expense-hub .status-missing {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.expense-hub .status-open {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.expense-hub .status-paid {
  background: #D1FAE5;
  color: #059669;
}

.expense-hub .status-private {
  background: #F1F5F9;
  color: #64748B;
}

.expense-hub .status-upload-queued {
  background: #DBEAFE;
  color: #1D4ED8;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.expense-hub__row.is-upload-queued {
  background: rgba(59, 130, 246, 0.04);
}

/* Platzhalter-Zeile: frisch hochgeladene, noch nicht ausgelesene Belege */
.expense-hub__row--placeholder {
  background: rgba(var(--primary-rgb), 0.05);
  border: 1px dashed rgba(var(--primary-rgb), 0.35);
}

.expense-hub__icon--pending {
  animation: aeExpensePendingPulse 1.4s ease-in-out infinite;
}

.expense-hub__status--pending {
  background: #CCFBF1;
  color: #0F766E;
  border: 1px solid rgba(13, 148, 136, 0.25);
}

@keyframes aeExpensePendingPulse {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

.expense-hub__meta-note {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1D4ED8;
}

.expense-hub__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
}

.expense-hub__action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.expense-hub__action-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.expense-hub__btn {
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  /* Feste Breite statt am Label zu wachsen ("Zahlen"/"Bearbeiten"/"Beleg
     zuordnen" …) — analog .income-hub__mini-link--primary bei Rechnungen,
     damit die Aktions-Spalte über alle Zeilen hinweg gleich aussieht. */
  width: 120px;
  text-align: center;
  display: inline-block;
}

.expense-hub__btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.expense-hub__btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.22);
}

.expense-hub__btn--primary:hover {
  color: #fff;
}

.expense-hub__btn--gold {
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(199, 162, 68, 0.22);
}

.expense-hub__btn--gold:hover {
  color: #fff;
}

.expense-hub__btn--outline {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid #CBD5E1;
}

.expense-hub__btn--outline:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.expense-hub__ghost-link {
  color: #9094A0;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.expense-hub__ghost-link:hover {
  color: var(--text-dark);
  text-decoration: none;
}

.expense-hub__ghost-link--danger:hover {
  color: var(--danger);
}

.expense-hub__done {
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 12px;
}

.expense-hub__icon-link {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #9094A0;
  text-decoration: none;
  transition: all 0.2s ease;
}

.expense-hub__icon-link:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
  text-decoration: none;
}

.expense-hub__subscriptions {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 36px;
  align-items: stretch;
}

.expense-hub__subscription-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 8px;
}

.expense-hub__subscription-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #E5E9EB;
  background: #FAFCFC;
}

.expense-hub__subscription-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.expense-hub__subscription-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E5E9EB;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.expense-hub__subscription-amount {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
}

.expense-hub__burn-rate {
  background: #F0F9FA;
  border-radius: 18px;
  border: 1px dashed rgba(var(--primary-rgb), 0.3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.expense-hub__burn-rate-title {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.expense-hub__burn-rate-amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-dark);
}

.expense-hub__burn-rate p {
  margin: 10px 0 0;
  color: #9094A0;
  font-size: 12px;
  line-height: 1.55;
}

.expense-hub__empty {
  padding: 18px 20px;
  border-radius: 16px;
  background: #FAFCFC;
  border: 1px dashed #CBD5E1;
  color: #9094A0;
  text-align: center;
}

.expense-hub__empty--compact {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {

  .expense-hub__channels,
  .expense-hub__subscriptions {
    grid-template-columns: 1fr;
  }

  .expense-hub__table-header,
  .expense-hub__row {
    grid-template-columns: minmax(0, 1.3fr) 110px 100px 110px 190px;
  }
}

@media (max-width: 768px) {

  .expense-hub__card,
  .expense-hub__mail-card,
  .expense-hub__upload-card {
    padding: 22px;
  }

  .expense-hub__table-header {
    display: none;
  }

  .expense-hub__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main   amount"
      "status date  "
      "acts   acts  ";
    gap: 6px 12px;
  }

  .expense-hub__main {
    grid-area: main;
  }

  .expense-hub__amount {
    grid-area: amount;
    align-self: start;
    text-align: right;
    font-weight: 700;
  }

  .expense-hub__date {
    grid-area: date;
    text-align: right;
    font-size: 12px;
    color: #9094A0;
  }

  .expense-hub__row>div:nth-child(2) {
    grid-area: status;
    text-align: left;
  }

  .expense-hub__actions {
    grid-area: acts;
    justify-content: space-between;
  }

  .expense-hub__action-stack {
    align-items: flex-start;
  }

  .expense-hub__mail-box {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   ORCHID SIDEBAR — Mobile Drawer
   Überführt div.aside (#main-aside) auf Smartphones/Tablets in
   ein Off-Canvas-Panel. Trigger: .mobile-menu-btn im ck-header-bar.
   Overlay & JS-Logik existieren bereits (cockpit.js).
   ============================================================ */

@media (max-width: 999.98px) {
  .aside-collapse {
    opacity: 1 !important;

  }
}

@media (max-width: 1024px) {
  .app-shell {
    flex-direction: row !important;
  }

  .app-content-col {
    width: 100% !important;
    min-width: 0;
  }

  div.aside {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow-y: auto;
  }

  div.aside.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.12);
  }



  div.aside .sidebar-toggle-btn,
  div.aside .menue_toggle {
    display: none !important;
  }

  div.aside.aside-collapsed {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    flex: unset !important;
  }

  div.aside.aside-collapsed .aside-show-expanded,
  div.aside.aside-collapsed .nav-link span.mx-2,
  div.aside.aside-collapsed .ck-sidebar-footer {
    display: revert !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  div.aside.aside-collapsed .ae-ki-indicator {
    justify-content: flex-start;
    padding: 8px 20px;
  }

  div.aside.aside-collapsed .ae-ki-indicator__text {
    display: block;
  }




  .nav.collapse.sub-menu.show {
    /* display:none; */
    margin-left: 0px !important;
  }

  /* Bootstrap:
       .collapse:not(.show)      { display: none }
       .collapse-horizontal      { width: 0 }
     Beides blendet auf <1200px unsere Nav aus (d-xl-flex greift erst ≥1200px).
     Im Drawer müssen die Menü-Items sichtbar sein, Children (ul, li) ebenso. */
  div.aside nav.aside-collapse,
  div.aside nav.collapse,
  div.aside nav.collapse-horizontal {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  div.aside nav.aside-collapse>ul.nav,
  div.aside nav.aside-collapse ul.nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    visibility: visible !important;
  }

  div.aside nav.aside-collapse .nav-item,
  div.aside nav.aside-collapse li {
    display: list-item !important;
    visibility: visible !important;
    width: 100% !important;
  }

  div.aside nav.aside-collapse .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  div.aside nav.aside-collapse .nav-link span.mx-2 {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .ck-header-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 20px 12px 16px 12px;
  }

  .ck-header-bar>.mobile-menu-btn {
    order: -1;
    flex-shrink: 0;
  }

  .ck-header-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ck-header-right {
    flex-wrap: wrap;
    width: 100%;
    padding-top: 0;
  }

  .ck-page-title {
    font-size: 22px !important;
  }
}

/* Home/Main-Screen: ae-page-header als schlanker Träger für Suche & Einstellungen.
   Orchid blendet ihn per Default aus (style.css). Wir überschreiben das global. */

.page-platform-home .ae-page-header,
.page-platform-main .ae-page-header {
  display: block !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
}

/* Header-Bar: transparenter Träger, Titel links und Aktionen rechts */
.page-platform-home .ck-header-bar,
.page-platform-main .ck-header-bar {
  justify-content: space-between;
  padding: 10px 10px 4px;
  background: transparent;
  border-bottom: none;
  align-items: flex-start;
}

/* Auf der Main-Seite den normalen Orchid-Titel/Subtitel wieder anzeigen */
.page-platform-main .ck-header-bar .ck-header-left {
  display: flex !important;
}

@media (max-width: 1024px) {

  /* Auf Mobile: Hamburger links, Suche/Einstellungen rechts */
  .page-platform-home .ck-header-bar,
  .page-platform-main .ck-header-bar {
    padding: 10px 12px;
    justify-content: space-between;
  }
}

/* ============================================================
   ORCHID SIDEBAR — Desktop: volle Höhe, unabhängig scrollbar
   Aside klebt am Viewport-Top (sticky), Content scrollt separat.
   ============================================================ */
@media (min-width: 1025px) {

  /* Orchid setzt .app-shell <1200px auf flex-direction: column — auf ≥1025px
     wollen wir immer den Desktop-Row-Layout. */
  .app-shell {
    flex-direction: row !important;
    align-items: stretch;
  }

  div.aside#main-aside,
  div.aside {
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  /* Nav-Container übernimmt das interne Scrollen (flex-grow:1 ist schon gesetzt) */
  div.aside .aside-collapse {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

@media (min-width: 1025px) and (max-width: 1199.98px) {

  /* Orchid schaltet unter 1200px bereits auf das Mobile-/Collapse-Verhalten.
     Unser Cockpit soll aber bis 1024px im Desktop-Modus bleiben. */
  div.aside {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  div.aside nav.aside-collapse,
  div.aside nav.collapse,
  div.aside nav.collapse-horizontal {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  div.aside nav.aside-collapse>ul.nav,
  div.aside nav.aside-collapse ul.nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    visibility: visible !important;
  }

  body:not(.menu-open) div.aside .aside-collapse .sub-menu {
    visibility: visible !important;
  }
}

/* ============================================================
   COLLAPSED STATE — Fallback-"Icon" aus Anfangsbuchstabe
   Submenu-Items in PlatformProvider haben kein ->icon() gesetzt.
   Im eingeklappten Desktop-Zustand (62px Sidebar) wären die Items
   dadurch komplett leer. Zeige stattdessen den ersten Buchstaben.

   Selector-Trick: span.mx-2:first-child greift nur, wenn kein
   Icon-SVG davor steht (Top-Level-Items mit Icon bleiben Icon-only).
   ============================================================ */
div.aside.aside-collapsed .nav-link>span.mx-2:first-child,
div.aside.aside-collapsed .sub-menu .nav-link>span.mx-2,
div.aside.aside-collapsed .sub-menu .nav-link span.mx-2 {
  display: inline-block !important;
  visibility: visible !important;
  width: 18px !important;
  max-width: 18px !important;
  min-width: 18px !important;
  height: 20px !important;
  line-height: 20px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  opacity: 0.75 !important;
  color: inherit !important;
}

div.aside.aside-collapsed .nav-link.active>span.mx-2:first-child,
div.aside.aside-collapsed .sub-menu .nav-link.active span.mx-2 {
  opacity: 1 !important;
  color: var(--primary, #008B97) !important;
}

div.aside.aside-collapsed .sub-menu {
  padding-left: 0 !important;
}

div.aside.aside-collapsed .sub-menu .nav-link {
  justify-content: center !important;
  padding: 8px !important;
}

/* ── Ausgaben-Hub: zusätzliche Status-Varianten + Privat-Toggle Form ── */
.expense-hub__ghost-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.expense-hub__inline-form {
  margin: 0;
  display: inline;
}

.status-private {
  background: rgba(99, 102, 241, .14);
  color: #4338ca;
}

.status-split {
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}

.status-pending {
  background: rgba(99, 102, 241, .12);
  color: #4f46e5;
}

/* „In Bearbeitung" — Prüfung hat eine Rückfrage/Unstimmigkeit ergeben, der
   Mandant wurde bereits informiert und soll reagieren. */
.status-in-bearbeitung {
  background: rgba(180, 83, 9, .14);
  color: #b45309;
}

.expense-hub__row.is-in-bearbeitung {
  background: rgba(180, 83, 9, .04);
}

.expense-hub__subscription-label {
  font-weight: 600;
  color: var(--text-dark);
}

.expense-hub__subscription-meta {
  font-size: 11px;
  color: #9094A0;
}

body.expense-upload-modal-open {
  overflow: hidden;
}

.expense-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* display:grid oben überschreibt sonst das [hidden]-Attribut der UA-Stylesheet
   (Author-CSS gewinnt immer gegen normale UA-Regeln) — expliziter Guard, damit
   `hidden` zuverlässig einklappt, gleiches Muster wie .expense-hub__channels--grid[hidden]. */
.expense-upload-modal[hidden] {
  display: none !important;
}

.expense-upload-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(4px);
}

.expense-upload-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

/* Erweiterte Ansicht (nur bei allgemeinem Upload, siehe openModal() im
   beleg-upload-modal-Script): rechte Spalte mit Autopilot-/Mail-Weiterleitung-
   Kacheln, dieselbe Logik/Kachel-CSS wie auf /ausgaben. */
.expense-upload-modal__dialog--with-side {
  width: min(100%, 980px);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
}

.expense-upload-modal__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.expense-upload-modal__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.expense-upload-modal__side[hidden] {
  display: none !important;
}

.expense-upload-modal__side .expense-hub__mail-card {
  padding: 20px 22px;
  border-radius: 18px;
}

.expense-upload-modal__side-eyebrow {
  margin: 0;
  color: #7c808e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .expense-upload-modal__dialog--with-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

.expense-upload-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.expense-upload-modal__eyebrow {
  margin: 0 0 6px;
  color: #7c808e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

.expense-upload-modal__header h3 {
  margin: 0;
  color: var(--text-dark);
  font-size: 28px;
  line-height: 1.05;
}

.expense-upload-modal__copy {
  margin: 10px 0 0;
  color: #52606d;
  font-size: 14px;
  line-height: 1.5;
}

.expense-upload-modal__close {
  border: 0;
  background: rgba(148, 163, 184, 0.12);
  color: #334155;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.expense-upload-modal__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 230px;
  border-radius: 24px;
  border: 2px dashed #b7c6d4;
  background: #fcfefe;
  text-align: center;
  padding: 28px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.expense-upload-modal__dropzone:hover,
.expense-upload-modal__dropzone.is-dragover {
  border-color: var(--primary);
  background: #eef8f8;
  transform: translateY(-1px);
}

.expense-upload-modal__input {
  display: none;
}

.expense-upload-modal__icon {
  font-size: 34px;
}

.expense-upload-modal__dropzone strong {
  color: var(--text-dark);
  font-size: 20px;
}

.expense-upload-modal__dropzone small {
  color: #7c808e;
  font-size: 14px;
}

.expense-upload-modal__files {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expense-upload-modal__file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.expense-upload-modal__file strong,
.expense-upload-modal__file small {
  display: block;
}

.expense-upload-modal__file strong {
  color: var(--text-dark);
  font-size: 14px;
}

.expense-upload-modal__file small {
  color: #7c808e;
  font-size: 12px;
  margin-top: 3px;
}

.expense-upload-modal__file button {
  border: 0;
  background: transparent;
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.expense-upload-modal__status {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(14, 116, 144, 0.1);
  color: #0f766e;
}

.expense-upload-modal__status.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.expense-upload-modal__status.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.expense-upload-modal__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.expense-upload-modal__button-row {
  display: flex;
  gap: 10px;
}

.expense-upload-modal__ghost-link,
.expense-upload-modal__secondary,
.expense-upload-modal__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.expense-upload-modal__ghost-link,
.expense-upload-modal__secondary {
  border: 1px solid #dbe3ec;
  background: #fff;
  color: #334155;
  padding: 0 16px;
}

.expense-upload-modal__primary {
  border: 0;
  background: var(--primary);
  color: #fff;
  padding: 0 20px;
}

.expense-upload-modal__primary:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 767px) {
  .expense-upload-modal {
    padding: 14px;
  }

  .expense-upload-modal__dialog {
    padding: 20px;
    border-radius: 22px;
  }

  .expense-upload-modal__header h3 {
    font-size: 24px;
  }

  .expense-upload-modal__actions,
  .expense-upload-modal__button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .expense-upload-modal__ghost-link,
  .expense-upload-modal__secondary,
  .expense-upload-modal__primary {
    width: 100%;
  }
}

.beleg-review-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.beleg-review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.beleg-review-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.beleg-review-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.beleg-review-modal__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2563eb;
}

.beleg-review-modal__header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

.beleg-review-modal__copy {
  margin: 6px 0 0;
  font-size: 14px;
  color: #475569;
}

.beleg-review-modal__close {
  border: 0;
  background: #eff6ff;
  color: #1d4ed8;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.beleg-review-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.beleg-review-modal__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

/* Schlanke Variante (z.B. PDF-Vorschau im Rechnungs-Editor): kein Eyebrow,
   keine Beleg-Prüfen-Badges – nur Titel + Vorschau + Aktionen. */
.beleg-review-modal.is-minimal .beleg-review-modal__eyebrow,
.beleg-review-modal.is-minimal .beleg-review-modal__meta {
  display: none;
}

.beleg-review-modal__preview {
  min-height: 60vh;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.beleg-review-modal__preview.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.beleg-review-modal__iframe {
  display: block;
  width: 100%;
  height: 60vh;
  border: 0;
  background: #fff;
}

.beleg-review-modal__empty {
  padding: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.beleg-review-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.beleg-review-modal__ghost-link,
.beleg-review-modal__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.beleg-review-modal__ghost-link {
  background: #eff6ff;
  color: #1d4ed8;
}

.beleg-review-modal__secondary {
  border: 0;
  background: #0f172a;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 720px) {
  .beleg-review-modal {
    padding: 16px;
  }

  .beleg-review-modal__dialog {
    padding: 18px;
    gap: 14px;
  }

  .beleg-review-modal__header h3 {
    font-size: 20px;
  }

  .beleg-review-modal__preview,
  .beleg-review-modal__iframe {
    min-height: 52vh;
    height: 52vh;
  }

  .beleg-review-modal__actions {
    flex-direction: column;
  }

  .beleg-review-modal__ghost-link,
  .beleg-review-modal__secondary {
    width: 100%;
  }
}

/* ── Sidebar: Notification-Badge & Notif-Row ───────────────────── */
.ck-notif-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  /* margin: 0 12px 8px; */
  background: rgba(var(--primary-rgb), .10);
  border: 1px solid rgba(var(--primary-rgb), .25);
  border-radius: 10px;
  color: #0d5b63;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease;
}

.ck-notif-row:hover {
  background: rgba(var(--primary-rgb), .18);
  text-decoration: none;
  color: #0d5b63;
}

.ck-notif-icon {
  font-size: 16px;
}

.ck-notif-text {
  line-height: 1.2;
}

.ck-avatar {
  position: relative;
}

.ck-avatar-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--bg, #f4f7f6);
}

/* ══════════════════════════════════════════════════════════════
   AUTH PAGES  (Login / Register / Reset Password)
   Applied via .form-signin wrapper rendered by auth.blade.php
   ══════════════════════════════════════════════════════════════ */

/* Page background */
.form-signin {
  background-color: var(--bg-body) !important;
}

/* Card box – matches cockpit .card */
.form-signin .rounded-4.shadow,
.form-signin .bg-white.rounded-4 {
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(229, 233, 235, 0.6) !important;
}

/* Headings */
.form-signin h1.h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark) !important;
  letter-spacing: -0.3px;
}

/* Form labels */
.form-signin .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Inputs & password fields */
.form-signin input.form-control,
.form-signin input[type="email"],
.form-signin input[type="password"],
.form-signin input[type="text"] {
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid #E5E9EB !important;
  background: #F8FAFB !important;
  color: var(--text-dark) !important;
  font-size: 16px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.form-signin input.form-control:focus,
.form-signin input[type="email"]:focus,
.form-signin input[type="password"]:focus,
.form-signin input[type="text"]:focus {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.09) !important;
  outline: none !important;
}

/* Primary submit button */
.form-signin .btn-primary,
.form-signin #button-login,
.form-signin #button-register {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.form-signin .btn-primary:hover,
.form-signin #button-login:hover,
.form-signin #button-register:hover {
  background: #007A85 !important;
  border-color: #007A85 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.32) !important;
}

/* Secondary / outline button (e.g. "Jetzt registrieren →") */
.form-signin .btn-light {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  transition: background 0.18s, box-shadow 0.18s !important;
}

.form-signin .btn-light:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

/* Alert boxes – info / success / danger */
.form-signin .alert {
  border-radius: 14px !important;
  font-size: 0.84rem !important;
  border: none !important;
}

.form-signin .alert-info {
  background: rgba(var(--primary-rgb), 0.07) !important;
  color: #005d66 !important;
  border-left: 3px solid var(--primary) !important;
}

.form-signin .alert-success {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #065f46 !important;
  border-left: 3px solid var(--success) !important;
}

.form-signin .alert-danger {
  background: rgba(239, 68, 68, 0.07) !important;
  color: #991b1b !important;
  border-left: 3px solid var(--danger) !important;
}

/* Muted text / small links */
.form-signin .text-muted {
  color: #9ca3af !important;
}

.form-signin a.text-primary,
.form-signin a.text-decoration-none {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.form-signin a.text-primary:hover,
.form-signin a.text-decoration-none:hover {
  color: #007A85 !important;
  text-decoration: underline !important;
}

/* "Passwort vergessen?" link */
.form-signin .d-flex.justify-content-end a {
  color: var(--primary) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

/* Checkbox – "Angemeldet bleiben" */
.form-signin .form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.form-signin .form-check-label {
  font-size: 0.82rem !important;
  color: var(--text-dark) !important;
}

/* CTA sidebar panel (Login page right column) */
.form-signin .auth-cta-panel {
  background: linear-gradient(160deg, var(--secondary) 0%, #a07c28 100%) !important;
}

/* Logo area */
.form-signin .d-flex.justify-content-center.mb-4 {
  margin-bottom: 2.5rem !important;
}

/* ── Wunsch & Anregungen Modal ───────────────────────── */
.wm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 33, 48, 0.55);
  backdrop-filter: blur(3px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.wm-overlay.wm-open {
  opacity: 1;
  pointer-events: all;
}

.wm-dialog {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 480px;
  margin: 16px;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1);
}

.wm-overlay.wm-open .wm-dialog {
  transform: translateY(0) scale(1);
}

.wm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f0f1f4;
}

.wm-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.wm-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #23263a;
}

.wm-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #9094a0;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.wm-close:hover {
  color: #23263a;
  background: #f4f5f7;
}

.wm-body {
  padding: 20px 22px;
}

.wm-intro {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 16px;
  line-height: 1.5;
}

.wm-field {
  margin-bottom: 14px;
}

.wm-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #505261;
  margin-bottom: 5px;
}

.wm-required {
  color: #e04040;
}

.wm-select,
.wm-textarea {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: #23263a;
  background: #fafbfc;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  box-sizing: border-box;
}

.wm-select:focus,
.wm-textarea:focus {
  border-color: #C7A244;
  box-shadow: 0 0 0 3px rgba(199, 162, 68, 0.12);
  background: #fff;
}

.wm-textarea {
  resize: vertical;
  min-height: 120px;
}

.wm-charcount {
  font-size: 11px;
  color: #9094a0;
  text-align: right;
  margin-top: 4px;
}

.wm-alert {
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 14px;
  margin-top: 10px;
}

.wm-alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.wm-alert-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.wm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid #f0f1f4;
}

.wm-btn {
  border: none;
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.wm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wm-btn-cancel {
  background: #f4f5f7;
  color: #505261;
}

.wm-btn-cancel:hover {
  background: #eaecef;
}

.wm-btn-submit {
  background: #C7A244;
  color: #fff;
}

.wm-btn-submit:hover {
  background: #a07c28;
}

/* Also allow keyboard activation on the wishbox */
#wunsch-wishbox-trigger:focus-visible {
  outline: 2px solid #C7A244;
  outline-offset: 2px;
}

/* ── Globale Insight-Card (ae-insight-card) ──────────────── */
.ae-insight-card {
  margin-bottom: 22px;
  border-radius: 18px;
}

.ae-insight-dismiss {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(var(--primary-rgb), 0.45);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.ae-insight-dismiss:hover {
  color: var(--primary, #008b97);
  background: rgba(var(--primary-rgb), 0.1);
}

/* ── Insight-Card Restore-Badge ──────────────────────────── */
.ae-insight-restore {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  background: none;
  border: 1.5px solid rgba(var(--primary-rgb), 0.22);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  margin-bottom: 16px;
  cursor: pointer;
  color: var(--primary, #008b97);
  font-size: 12px;
  transition: border-color 0.15s, background 0.15s;
}

.ae-insight-restore:hover {
  background: rgba(var(--primary-rgb), 0.07);
  border-color: var(--primary, #008b97);
}

.ae-insight-restore__label {
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

/* ── Ausgaben: 3-Spalten-Channels (Autopilot-Card-Erweiterungen) ── */
.expense-hub__autopilot-card {
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%) !important;
  border-color: rgba(109, 40, 217, 0.15) !important;
}

.expense-hub__autopilot-card h3 {
  color: #6d28d9 !important;
}

.expense-hub__postfach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expense-hub__postfach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #ede9fe;
  border-radius: 12px;
  padding: 10px 14px;
}

.expense-hub__postfach-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6d28d9;
  flex-shrink: 0;
}

.expense-hub__postfach-item strong {
  display: block;
  font-size: 14px;
  color: #1f2937;
}

.expense-hub__postfach-item small {
  display: block;
  font-size: 11px;
  color: #9094a0;
  overflow-wrap: anywhere;
}

.expense-hub__mail-link,
.expense-hub__mail-cta {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.expense-hub__mail-link {
  color: #6d28d9;
}

.expense-hub__mail-cta {
  color: #ffffff;
  background: #6d28d9;
  padding: 9px 18px;
  border-radius: 10px;
  align-self: flex-start;
}

.expense-hub__mail-cta:hover {
  opacity: 0.88;
  text-decoration: none;
  color: #fff;
}

.expense-hub__mail-hint {
  font-size: 12px !important;
  color: #9094a0 !important;
  line-height: 1.5;
}

@media (max-width: 1300px) {
  .expense-hub__channels {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .expense-hub__upload-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .expense-hub__upload-card {
    grid-column: auto;
  }
}

/* ── Ausgaben: Abos & Fixkosten – dedizierte Seite ────────── */
.abos-hub {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Zeitraum-Auswahl */
.abos-hub__window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.abos-hub__window-label {
  font-size: 12px;
  font-weight: 700;
  color: #9094a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.abos-hub__window-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid #e5e9eb;
  font-size: 12px;
  font-weight: 600;
  color: #505261;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.abos-hub__window-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.abos-hub__window-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.abos-hub__window-range {
  font-size: 11px;
  color: #9094a0;
  margin-left: 6px;
}

/* Stat-Kacheln */
.abos-hub__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.abos-hub__stat {
  background: #fff;
  border: 1px solid #e5e9eb;
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abos-hub__stat--highlight {
  background: #f0f9fa;
  border-color: rgba(var(--primary-rgb), 0.22);
}

.abos-hub__stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}

.abos-hub__stat--highlight .abos-hub__stat-label {
  color: var(--primary);
}

.abos-hub__stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #1f2937;
  line-height: 1.1;
  margin: 4px 0;
}

.abos-hub__stat-value--muted {
  color: #505261;
}

.abos-hub__stat-meta {
  font-size: 11px;
  color: #9094a0;
}

/* Hauptliste */
.abos-hub__main-card {
  padding: 0 !important;
  overflow: hidden;
}

.abos-hub__list-header {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) 160px 150px 100px 48px;
  gap: 12px;
  padding: 12px 24px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e9eb;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9094a0;
}

.abos-hub__list {
  display: flex;
  flex-direction: column;
}

.abos-hub__row {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) 160px 150px 100px 48px;
  gap: 12px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
}

.abos-hub__row:last-child {
  border-bottom: none;
}

.abos-hub__row:hover {
  background: #fafbfc;
}

.abos-hub__row-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.abos-hub__row-name {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.abos-hub__row-bar-wrap {
  height: 4px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
  max-width: 200px;
}

.abos-hub__row-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.abos-hub__row-freq {
  font-size: 12px;
  color: #9094a0;
}

.abos-hub__row-amount {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  text-align: right;
}

.abos-hub__row-share {
  display: flex;
  justify-content: flex-end;
}

.abos-hub__share-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}

.abos-hub__row-actions {
  display: flex;
  justify-content: center;
}

.abos-hub__tag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #e5e9eb;
  background: #fff;
  color: #9094a0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.abos-hub__tag-btn:hover,
.abos-hub__tag-btn:focus-visible {
  color: #e02424;
  border-color: #f5c2c2;
  background: #fff5f5;
  outline: none;
}

.abos-hub__tag-btn svg {
  width: 16px;
  height: 16px;
}

.abos-hub__footnote {
  font-size: 11px;
  color: #9094a0;
  line-height: 1.6;
  margin: 0;
}

/* ── Bestätigungs-Modal „Kategorisierung entfernen" ─────────────── */
.abo-exclude-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.abo-exclude-modal[hidden] {
  display: none;
}

.abo-exclude-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.abo-exclude-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: aboModalIn 0.18s ease;
}

@keyframes aboModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.abo-exclude-modal__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(224, 36, 36, 0.1);
  color: #e02424;
}

.abo-exclude-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 10px;
}

.abo-exclude-modal__text {
  font-size: 14px;
  color: #374151;
  line-height: 1.55;
  margin: 0 0 8px;
}

.abo-exclude-modal__hint {
  font-size: 12px;
  color: #9094a0;
  line-height: 1.5;
  margin: 0 0 22px;
}

.abo-exclude-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.abo-exclude-modal__btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.abo-exclude-modal__btn--ghost {
  background: #fff;
  border-color: #e5e9eb;
  color: #374151;
}

.abo-exclude-modal__btn--ghost:hover {
  background: #f3f4f6;
}

.abo-exclude-modal__btn--danger {
  background: #e02424;
  color: #fff;
}

.abo-exclude-modal__btn--danger:hover {
  background: #c81e1e;
}

body.abo-exclude-modal-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .abos-hub__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .abos-hub__list-header,
  .abos-hub__row {
    grid-template-columns: minmax(0, 1fr) 120px 48px;
  }

  .abos-hub__list-header> :nth-child(2),
  .abos-hub__row-freq,
  .abos-hub__list-header> :nth-child(4),
  .abos-hub__row-share {
    display: none;
  }
}

@media (max-width: 640px) {
  .abos-hub__stats {
    grid-template-columns: 1fr;
  }

  .abos-hub__list-header {
    display: none;
  }

  .abos-hub__row {
    grid-template-columns: minmax(0, 1fr) auto 48px;
  }


  .form-signin img{
    width: 70%!important;
    margin: 0 auto;
    display:block;
    padding-top: 40px;
  }
  .justify-content-center {
    justify-content: unset !important;
  }
  .btn-loading .spinner-loading, .d-flex{
    display:block!important;
  }
  .form-signin .rounded-4.shadow, .form-signin .bg-white.rounded-4 {
      margin-left:15px!important;
      margin-right:15px!important;
  }

}

/* ============================================================
   SIDEBAR – Submenu tree-line & improved sub-link styles
   ============================================================ */

/* Vertical connecting line on the left of all submenu groups */
div.aside .sub-menu {
  margin-left: 22px !important;
  padding-left: 10px !important;
  /* override Bootstrap ps-3 */
  border-left: 2px solid rgba(var(--primary-rgb), 0.18) !important;
  padding-top: 2px !important;
  padding-bottom: 4px !important;
}

/* .ae-tpl-default div.aside .sub-menu{
  display: none!important;
} */
div.aside .sub-menu {

  width: calc(100% - 20px);
}

/* Sub-link reset — smaller, slightly muted */
div.aside .sub-menu>li>a.nav-link,
div.aside .sub-menu .nav-item>a.nav-link {
  color: #5e6270 !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  /* font-weight: 600 !important; */
  gap: 7px !important;
  line-height: 1.35 !important;
}

div.aside .sub-menu>li>a.nav-link:hover,
div.aside .sub-menu .nav-item>a.nav-link:hover {
  background-color: rgba(var(--primary-rgb), 0.07) !important;
  color: var(--primary, #008B97) !important;
}

div.aside .sub-menu>li>a.nav-link.active,
div.aside .sub-menu .nav-item>a.nav-link.active {
  background-color: rgba(var(--primary-rgb), 0.10) !important;
  color: var(--primary, #008B97) !important;
  font-weight: 600 !important;
}

/* Keep the tree-line from bleeding into collapsed state */
div.aside.aside-collapsed .sub-menu {
  margin-left: 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
}

.aside-collapse.collapse-horizontal {
  margin-top: 25px;
}

/* ============================================================
   GLOBALE SUCHE – Modal / Spotlight-Style
   ============================================================ */

.gs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 17, 30, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.gs-overlay.gs-open {
  opacity: 1;
  pointer-events: all;
}

.gs-dialog {
  width: 100%;
  max-width: 620px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  transform: translateY(-12px) scale(0.98);
  transition: transform 0.15s;
}

.gs-overlay.gs-open .gs-dialog {
  transform: translateY(0) scale(1);
}

/* Input row */
.gs-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f4;
}

.gs-search-icon {
  flex-shrink: 0;
  color: #9094a0;
}

.gs-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: #23263a;
  background: transparent;
  line-height: 1.4;
}

.gs-input::placeholder {
  color: #b4b8c8;
}

/* Natives Browser-Clear-Icon von type="search" ausblenden – wir haben
   bereits den eigenen Schließen-Button (.gs-close-btn). */
.gs-input::-webkit-search-cancel-button,
.gs-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.gs-input::-ms-clear {
  display: none;
}

.gs-close-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e5e9eb;
  background: #fff;
  color: #9094a0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.gs-close-btn svg {
  width: 14px;
  height: 14px;
}

.gs-close-btn:hover {
  border-color: var(--primary, #008B97);
  color: var(--primary, #008B97);
  background: rgba(var(--primary-rgb), 0.06);
}

/* Results container */
.gs-results {
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px 0 4px;
}

.gs-hint,
.gs-empty,
.gs-loading {
  padding: 20px 20px;
  color: #9094a0;
  font-size: 14px;
  text-align: center;
}

.gs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gs-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--primary-rgb), 0.25);
  border-top-color: var(--primary, #008B97);
  border-radius: 50%;
  animation: gs-spin 0.7s linear infinite;
}

@keyframes gs-spin {
  to {
    transform: rotate(360deg);
  }
}

.gs-group-label {
  padding: 8px 18px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9094a0;
}

.gs-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s;
}

.gs-item:hover,
.gs-item--focused {
  background: rgba(var(--primary-rgb), 0.07);
}

.gs-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #23263a;
  line-height: 1.35;
}

.gs-item-sub {
  font-size: 12px;
  color: #9094a0;
  line-height: 1.3;
}

/* „Assistent fragen" – immer letzter Eintrag unter den Suchergebnissen
   (bzw. einziger Eintrag, wenn nichts gefunden wurde). */
.gs-item--assistant {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eef0f4;
  margin-bottom: 4px;
}

.gs-item-assistant-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(199, 162, 68, 0.16);
  color: var(--secondary, #C7A244);
}

.gs-item-assistant-icon svg {
  width: 14px;
  height: 14px;
}

.gs-item-assistant-text {
  font-size: 14px;
  font-weight: 600;
  color: #23263a;
}

/* Footer */
.gs-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid #eef0f4;
  background: #fafbfc;
}

.gs-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #9094a0;
}

.gs-footer kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f0f1f4;
  border: 1px solid #d8dce8;
  font-size: 10px;
  color: #666;
  font-family: inherit;
}

.gs-footer-shortcut {
  margin-left: auto;
}

/* Search trigger button in header */
.ck-search-btn {
  position: relative;
}

@media (max-width: 700px) {
  .gs-overlay {
    padding-top: 5vh;
  }

  .gs-dialog {
    border-radius: 14px;
    margin: 0 12px;
    max-width: 100%;
  }

  .gs-footer-shortcut {
    display: none;
  }
}

/* ============================================================
   HEADER SEARCH BAR (sichtbares Suchfeld im Cockpit-Header)
   ============================================================ */

/* Wrapper zentriert die Bar zwischen Left und Right */
.ck-header-search-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding-top: 4px;
  /* optisch mit Header-Elementen ausrichten */
}

/* Die klickbare Suchleiste – sieht aus wie ein Input */
.ck-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f6fa;
  border: 1.5px solid #e5e8f0;
  border-radius: 11px;
  padding: 8px 14px 8px 12px;
  cursor: pointer;
  width: 100%;
  max-width: 340px;
  min-width: 160px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}

.ck-search-bar:hover {
  border-color: rgba(var(--primary-rgb), 0.35);
  background: #f0f6f7;
  box-shadow: 0 1px 6px rgba(var(--primary-rgb), 0.08);
}

.ck-search-bar:focus-within,
.ck-search-bar:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10);
}

.ck-search-bar-icon {
  flex-shrink: 0;
  color: #9094a0;
  transition: color 0.15s;
}

.ck-search-bar:hover .ck-search-bar-icon {
  color: var(--primary, #008B97);
}

.ck-search-bar-placeholder {
  flex: 1;
  font-size: 14px;
  color: #b4b8c8;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-search-bar-kbd {
  flex-shrink: 0;
  font-size: 10px;
  color: #c0c4d0;
  background: #ecedf2;
  border: 1px solid #d8dce8;
  border-radius: 5px;
  padding: 2px 6px;
  font-family: inherit;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* Auf kleinen Screens das Suchfeld verbergen (Platz sparen) */
@media (max-width: 900px) {
  .ck-header-search-wrap {
    display: none;
  }
}

/* ============================================================
   COCKPIT HERO SEARCH BAR (nur Hauptseite platform.main)
   ============================================================ */

.ck-hero-search {
  margin: 0 0 28px 0;
  padding: 0 4px;
}

.ck-hero-search-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.5px solid #e5e8f0;
  border-radius: 16px;
  padding: 16px 22px;
  cursor: pointer;
  width: 100%;
  /* max-width: 680px; */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  user-select: none;
}

.ck-hero-search-inner:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.10);
  background: #f8fefe;
}

.ck-hero-search-inner:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.65);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.10);
}

.ck-hero-search-icon {
  flex-shrink: 0;
  color: #9094a0;
  transition: color 0.15s;
}

.ck-hero-search-inner:hover .ck-hero-search-icon {
  color: var(--primary, #008B97);
}

.ck-hero-search-placeholder {
  flex: 1;
  font-size: 15px;
  color: #b4b8c8;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-hero-search-kbd {
  flex-shrink: 0;
  font-size: 11px;
  color: #b0b4c0;
  background: #f2f3f7;
  border: 1px solid #dde0ea;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: inherit;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .ck-hero-search-inner {
    padding: 13px 16px;
    gap: 10px;
  }

  .ck-hero-search-placeholder {
    font-size: 14px;
  }

  .ck-hero-search-kbd {
    display: none;
  }
}

/* ── ae-toolbar: filter tabs + search row ─────────────────────────────── */
.ae-toolbar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0px 0 8px 0;
}

.ae-toolbar__filters {
  flex: 1 1 auto;
  min-width: 0;
}

.ae-toolbar__search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-wrap: nowrap;
}

.ae-toolbar__search-input {
  padding: 6px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  min-width: 240px;
  max-width: 360px;
}

@media (max-width: 768px) {
  .ae-toolbar__search {
    width: 100%;
    margin-left: 0;
  }

  .ae-toolbar__search-input {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Einheitliches Modal-Design-System (.ae-modal-*)
 * – wird in Buchhaltung, Rechnungen, Einnahmen etc. verwendet.
 * – Ziel: ein konsistenter, lesbarer Look ohne pro-Modal Inline-CSS.
 * ────────────────────────────────────────────────────────────────── */

/* .ie-rechnung-link (Basis + :hover) liegt jetzt global in
    public/css/cockpit.css — auch von Mahnungen genutzt (einheitlicher
    Link-Stil in Details-Spalten über alle Einnahmen-Tabellen hinweg). */

/* .ie-row-actions / .ie-btn-icon / .ie-dropdown* / .ie-dd-* liegen jetzt
    gemeinsam mit Angebote + Ausgaben global in public/css/cockpit.css. */

/* Bezahlt/Zahlung: Farbe kommt einheitlich (Gold) von
    .income-hub__mini-link--primary — kein eigener Farb-Override mehr, sowohl
    "Zahlung" (offen) als auch "Bezahlt" (erledigt) sehen wie jeder andere
    primäre Zeilen-Button aus. */

/* Entwurf – sichtbar, aber inaktiv/grau */
.ie-btn-bezahlt:disabled,
.ie-btn-bezahlt:disabled:hover {
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
  cursor: not-allowed;
  opacity: 1;
}

/* Label ist jetzt "Bezahlt markieren" statt nur "Bezahlt" (das las sich wie
   ein Status statt einer Aktion) — dafür bewusst zweizeilig statt den Button
   in die Breite wachsen zu lassen (würde die Aktionen-Spalte über alle
   Zeilen hinweg uneinheitlich breit machen). width statt min-width erzwingt
   den Umbruch exakt zwischen den beiden Wörtern; .ie-row-actions'
   align-items:stretch (siehe dort) zieht den benachbarten ⋮-Auslöser
   automatisch auf dieselbe, jetzt zweizeilige Höhe mit. */
.ie-btn-bezahlt.income-hub__mini-link--primary {
  width: 140px;
  height: auto;
  min-height: 42px;
  padding: 7px 10px;
  white-space: normal;
  line-height: 1.25;
  /* Kein eigenes text-align mehr nötig: .ie-btn-label (siehe weiter oben)
     zentriert die Zeilen "Bezahlt"/"markieren" im Platz NACH dem Icon —
     unabhängig davon, was hier am Button selbst steht (ein text-align auf
     dem Button würde vom expliziten text-align:center des Label-Kind-
     Elements ohnehin überschrieben, s. Kaskade). */
}

/* ── Overdue row ───────────────────────────────────────────── */
.income-hub__row.is-overdue {
  background: rgba(220, 53, 69, .04);
  /* border-left: 3px solid #dc3545; */
}

/* Modal-Styles (.ie-modal, .ie-field, .ie-input, .ie-modal-btn …) liegen
    jetzt global in public/css/cockpit.css und gelten auch im Cockpit / auf
    Ausgaben-Seiten. */

/* ── Importierte AR-Rechnung ───────────────────────────────────── */
.income-hub__item-icon.icon-im {
  background: #eef2f7;
  color: #475569;
}

.income-hub__status.status-imported {
  background: #eef2f7;
  color: #475569;
  border: 1px solid #dbe2ea;
}

/* In Prüfung = noch nicht vom Buchhalter freigegeben */
.income-hub__status.status-pruefung {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}

.ie-rechnung-link.ie-beleg-doc-trigger:hover {
  color: var(--income-primary, #008b97);
  text-decoration: underline;
}

/* ── Beleg-Dokument Modal ──────────────────────────────────────── */
.ie-beleg-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-bottom: 14px;
}

.ie-beleg-doc-meta>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ie-beleg-doc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  font-weight: 600;
}

.ie-beleg-doc-meta>div>span:last-child {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

.ie-beleg-doc-frame-wrap {
  position: relative;
  width: 100%;
  height: 62vh;
  background: #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
}

#ie-beleg-doc-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.ie-beleg-doc-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 14px;
}




.ae-modal .modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.ae-modal .modal-header {
  padding: 22px 28px 16px;
  border-bottom: 1px solid #eef0f3;
}

.ae-modal .modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
}

.ae-modal .modal-body {
  padding: 24px 28px;
}

.ae-modal .modal-footer {
  padding: 16px 28px 22px;
  border-top: 1px solid #eef0f3;
  gap: 10px;
  justify-content: flex-end;
}

/* Field wrapper / Label / Input – identisches Look-and-Feel überall */
.ae-field {
  margin-bottom: 18px;
}

.ae-field:last-child {
  margin-bottom: 0;
}

.ae-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 7px;
  letter-spacing: .01em;
}

.ae-input,
select.ae-input,
textarea.ae-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #1a202c;
  background: #fff;
  border: 1px solid #d8dce5;
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.ae-input:focus {
  outline: none;
  border-color: var(--income-primary, #008b97);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.ae-input::placeholder {
  color: #a0aec0;
}

.ae-textarea {
  resize: vertical;
  min-height: 120px;
}

select.ae-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3e%3cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}

/* Hint-Text unter einem Feld */
.ae-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* Modal-Action-Buttons – garantierter Kontrast, keine Bootstrap-Vererbung */
.ae-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-family: inherit;
  line-height: 1.4;
  text-decoration: none;
}

.ae-modal-btn:focus {
  outline: 3px solid rgba(var(--primary-rgb), .25);
  outline-offset: 1px;
}

.ae-modal-btn--primary {
  background: var(--income-primary, #008b97);
  color: #fff;
  border-color: var(--income-primary, #008b97);
}

.ae-modal-btn--primary:hover {
  background: #007781;
  border-color: #007781;
  color: #fff;
}

.ae-modal-btn--secondary {
  background: #fff;
  color: #334155;
  border-color: #d8dce5;
}

.ae-modal-btn--secondary:hover {
  background: #f3f4f6;
  color: #0f172a;
  border-color: #94a3b8;
}

.ae-modal-btn--success {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.ae-modal-btn--success:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

.ae-modal-btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.ae-modal-btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* ============================================================
   STICKY TOPBAR (Inhaltsbereich, oben)
   Aufbau: [Burger?] [Suchfeld] [Mandant?] [Aktionen] | [Glocke] [Settings]
   Partial: resources/views/partials/topbar.blade.php
   ============================================================ */

.ae-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* unter dem Sidebar-Collapse-Button (~1040) */
  background: rgba(244, 247, 246, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(229, 233, 235, 0.7);
  /* Keine negativen Margins → bleibt innerhalb der Content-Spalte, überlappt
     die Sidebar nicht. */
  margin: 0;
  padding: 0;
}

.ae-topbar-inner-mobile {
  display: none;
}

.ae-topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 640px) {
  .ae-topbar-inner {
    display: none;
  }

  .ae-topbar-inner-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 16px;
    width: 100%;
    /* width: calc(100% - 82px); */
    max-width: none;
    margin: 0;
  }


  /* Prüft, ob das Parent-Element eine ul mit li-Elementen enthält */
  .ae-topbar-inner-mobile:has(.ae-topbar-actions li) .ae-topbar-logo {
    display: none !important;
  }


}


/* Mobile Burger (in der Topbar) */
.ae-topbar-burger {
  display: none;
  background: none;
  border: none;
  color: #505261;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}

.ae-topbar-burger:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Suchfeld (Trigger-Button, sieht aus wie Input) ──────────── */
.ae-topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Das Suchfeld sitzt links im Topbar-Flow und darf auf großen Screens
    sichtbar mitwachsen, ohne die rechte Aktionsgruppe zu verdrängen. */
  flex: 1 1 560px;
  min-width: 280px;
  max-width: 760px;
  height: 42px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid #E5E9EB;
  border-radius: 999px;
  color: #505261;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  border: 1px solid var(--primary, #008b97);
}

.ae-topbar-search:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.08);
}

.ae-topbar-search:focus-visible {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.ae-topbar-search-icon {
  flex-shrink: 0;
  color: #9094A0;
}

.ae-topbar-search:hover .ae-topbar-search-icon {
  color: var(--primary, #008B97);
}

.ae-topbar-search-placeholder {
  flex: 1;
  color: #B0B6C0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ae-topbar-search-kbd {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #9094A0;
  background: #F4F6F8;
  border: 1px solid #E5E9EB;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

@media (min-width: 1600px) {
  .ae-topbar-search {
    max-width: 920px;
  }
}

/* ── Mandant (nur Buchhalter mit Mandanten) ──────────────────── */
.ae-topbar-mandant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ae-topbar-mandant-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #A0AAB2;
  white-space: nowrap;
}

.ae-topbar-mandant-select {
  font-size: 13px;
  padding: 6px 26px 6px 10px;
  height: 36px;
  border: 1px solid #E5E9EB;
  border-radius: 10px;
  color: #505261;
  background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%239094A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  cursor: pointer;
  min-width: 130px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.ae-topbar-mandant-select:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
}

/* ── Aktions-Buttons (commandBar yield oder Default) ─────────── */
.ae-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  /* rechtsbündig: nimmt den ganzen freien Platz links */
  flex-shrink: 0;
  /* flex-basis:0 statt des Defaults 'auto': eine leere <ul> mit flex-basis:auto
     beansprucht (weil sie selbst display:flex ist) die volle verbleibende
     Zeilenbreite, als wäre sie ein Block-Element mit width:auto – bei vollem
     Screen unsichtbar (genug Luft), auf Mobile drängt das den Fix-Block
     (Glocke/Logout) über den rechten Viewport-Rand hinaus. flex-shrink:0
     verhindert weiterhin, dass echte Aktions-Buttons unter ihre Inhaltsbreite
     gequetscht werden – sie ziehen sich per min-content trotzdem auf ihre
     nötige Breite hoch, nur der leere Zustand kollabiert jetzt korrekt auf 0. */
  flex-basis: 0;
}

.ae-topbar-actions>li {
  list-style: none;
}

.ae-topbar-actions .btn,
.ae-topbar-actions a.btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  transition: all 0.18s !important;
  white-space: nowrap !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  text-decoration: none;
}

.ae-topbar-actions .btn-default,
.ae-topbar-actions .btn-outline-default,
.ae-topbar-actions .btn-link:not(.btn-primary),
.ae-topbar-actions .ae-default-action.btn-default {
  background: #ffffff !important;
  color: #505261 !important;
  border: 1px solid #E5E9EB !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.ae-topbar-actions .btn-default:hover,
.ae-topbar-actions .btn-outline-default:hover,
.ae-topbar-actions .ae-default-action.btn-default:hover {
  border-color: var(--primary, #008B97) !important;
  color: var(--primary, #008B97) !important;
}

.ae-topbar-actions .btn-primary,
.ae-topbar-actions .ae-default-action.btn-primary {
  background: var(--primary, #008B97) !important;
  border: 1px solid var(--primary, #008B97) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.28) !important;
}

.ae-topbar-actions .btn-primary:hover,
.ae-topbar-actions .ae-default-action.btn-primary:hover {
  background: #007A85 !important;
  border-color: #007A85 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.36) !important;
}

/* ── Fix-Block rechts: Tutorial, Glocke, Settings ────────────── */
.ae-topbar-fixed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Steht direkt rechts neben den Actions (kein zusätzliches margin-left:auto,
     sonst würden die Actions wieder zur Mitte rutschen). */
  padding-left: 8px;
  border-left: 1px solid rgba(229, 233, 235, 0.7);
  flex-shrink: 0;
}

/* Wenn keine Aktions-Buttons da sind, muss der Fix-Block selbst nach rechts.
   Wir nutzen :empty auf der Actions-Liste, sobald sie leer ist. */
.ae-topbar-actions:empty {
  margin-left: 0 !important;
}

.ae-topbar-actions:empty+.ae-topbar-fixed {
  margin-left: auto;
}

.ae-topbar-icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: #6B7280;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.ae-topbar-icon-btn:hover {
  color: var(--primary, #008B97);
  background: rgba(var(--primary-rgb), 0.08);
}

.ae-topbar-icon-btn:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb), 0.45);
  outline-offset: 2px;
}

.ae-topbar-bell .ae-topbar-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #EF4444;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(244, 247, 246, 1);
  line-height: 1;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
}

/* ── Topbar-Glocke: Dropdown (partials/notification-bell.blade.php) ──────
   .ae-notif-bell wird zweimal im DOM eingebunden (Mobile-/Desktop-Fix-Block,
   per CSS-Breakpoint alternierend sichtbar) – deshalb ohne IDs, rein über
   Klassen. Panel hängt relativ zum Trigger (die Topbar liegt außerhalb des
   Cockpit-Shadow-DOM und wird nicht beschnitten, ein fixed-positioniertes
   Escape-Panel wie beim ⋮-Menü ist hier also nicht nötig). */
.ae-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ae-bell-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -6px;
  width: min(400px, 94vw);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  z-index: 1200;
  overflow: hidden;
}

.ae-bell-panel[hidden] { display: none; }

.ae-bell-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #EEF1F4;
  flex-shrink: 0;
}

.ae-bell-panel__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-dark, #1F2430);
}

.ae-bell-panel__mark-all {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--secondary, #008B97);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ae-bell-panel__mark-all:hover { text-decoration: underline; }
.ae-bell-panel__mark-all[hidden] { display: none; }

.ae-bell-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
}

.ae-bell-item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #F2F4F6;
}
.ae-bell-item:last-child { border-bottom: none; }

.ae-bell-item__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 11px 8px 11px 16px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s;
}
.ae-bell-item__link:hover { background: #F7FAFA; text-decoration: none; color: inherit; }

.ae-bell-item__dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
}
.ae-bell-item.is-unread .ae-bell-item__dot { background: var(--secondary, #008B97); }

.ae-bell-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ae-bell-item__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark, #1F2430);
  line-height: 1.35;
}
.ae-bell-item.is-unread .ae-bell-item__title { font-weight: 700; }

.ae-bell-item__thema {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #EDF7F8;
  color: var(--secondary, #008B97);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.ae-bell-item__sub {
  font-size: 12.5px;
  color: #6B7280;
  line-height: 1.4;
}

.ae-bell-item__time {
  font-size: 11.5px;
  color: #9CA3AF;
  margin-top: 1px;
}

.ae-bell-item__dismiss {
  flex-shrink: 0;
  align-self: flex-start;
  margin: 8px 8px 0 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 6px;
  color: #B0B7C0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s, background-color .12s, color .12s;
}
.ae-bell-item:hover .ae-bell-item__dismiss,
.ae-bell-item__dismiss:focus-visible { opacity: 1; }
.ae-bell-item__dismiss:hover { background: #FEF2F2; color: #DC2626; }

@keyframes aeBellFlash {
  0%, 100% { background-color: transparent; }
  30% { background-color: rgba(var(--primary-rgb), 0.14); }
}
.ae-bell-item--flash .ae-bell-item__link { animation: aeBellFlash 2.2s ease; }

.ae-bell-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 16px;
  color: #9CA3AF;
  font-size: 13px;
}
.ae-bell-empty__icon { font-size: 26px; opacity: .6; }

@media (max-width: 640px) {
  .ae-bell-panel {
    position: fixed;
    top: 62px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: min(75vh, 560px);
  }
}

/* ── Seitenkopf (Breadcrumb + Titel + Untertitel + Aside) ───────
   Direkt unter der Topbar, scrollt mit. Zwei Spalten: links Titel-
   Block, rechts optionaler Aside-Slot (z.B. Rechnungen/Angebote-
   Toggle). Aside nimmt max ca. 50% der Zeile ein. */
.ae-page-heading {
  /* //background: #ecf5f5;
  //verlauf von #ecf5f5 zu #aaasdf */
  /* background: linear-gradient(270deg, #e4f1f1 0%, #e4f1f1 50%, #f9fbfb 100%); */
  padding: 8px 10px 8px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
  gap: 24px;

}

.ae-page-heading__main {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-page-heading__aside {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ae-page-heading .ck-breadcrumb-inline {
  margin: 0 0 2px 0;
}

.ae-page-heading .ck-page-title {
  margin: 0;
}

.ae-page-heading .ck-page-subtitle {
  margin: 2px 0 0 0;
}

/* Auf der Hauptseite hat das Cockpit einen eigenen Greeting-Header → Heading verbergen */
body.page-platform-home .ae-page-heading,
body.page-platform-main .ae-page-heading {
  display: none;
}

/* (Der alte ae-page-header / ck-header-bar wird nicht mehr aus dashboard.blade.php
   gerendert. Falls Custom Views ihn noch nutzen, bleibt seine alte CSS-Definition
   in dieser Datei aktiv – es ist kein Konflikt mit der neuen Topbar.) */

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ae-topbar-search-kbd {
    display: none;
  }

  .ae-topbar-search {
    flex-basis: 200px;
  }

  .ae-topbar-search-placeholder {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .ae-topbar-inner {
    min-height: 56px;
    gap: 8px;
    padding: 8px 4px;
  }

  /* Suchfeld schrumpft zum Icon-Pillen.
     Wichtig: min-width/max-width des Base-Styles explizit überschreiben, sonst
     bleibt das Feld dank min-width:240px breit und sieht oval aus. */
  .ae-topbar-search {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    gap: 0;
  }

  .ae-topbar-search-placeholder {
    display: none;
  }

  /* Mandant-Label verstecken (Select sichtbar) */
  .ae-topbar-mandant-label {
    display: none;
  }

  .ae-topbar-mandant-select {
    min-width: 110px;
  }

  /* Default-Action „Angebot" auf Mobile verstecken, „Rechnung" bleibt */
  .ae-topbar-actions>li:has(.ae-default-action.btn-default) {
    display: none;
  }

  .ae-topbar-fixed {
    padding-left: 4px;
  }

  .ae-page-heading {
    padding: 16px 10px 6px 10px;
  }

  .ae-page-heading .ck-page-title {
    font-size: 22px !important;
  }
}

@media (max-width: 768px) {
  .ae-topbar-burger {
    display: inline-flex;
  }

  /* Hilfe-/Tutorial-Button verbergen, um Platz für die Aktionen zu schaffen.
     Glocke + Settings bleiben sichtbar. */

  .ae-topbar-fixed [data-tutorial] {
    display: none !important;
  }

  /* Alles in einer Zeile, Aktions-Buttons rechtsbündig.
     margin-left:auto auf .ae-topbar-actions stand schon im Base-Style,
     hier nur dafür sorgen, dass kein Umbruch passiert. */
  .ae-topbar-inner {
    flex-wrap: nowrap;
  }

  /* Aktions-Buttons mit Label sichtbar, solange max. 2 Buttons vorhanden sind
     (ein typischer „+ Rechnung" / „+ Angebot"-Button + ggf. Sekundär-Action).
     Ab 3 Buttons wird Platz knapp → wir schalten auf Icon-only, damit auch
     vier Aktionen + Glocke/Settings sicher in eine Zeile passen. */

  .ae-topbar-actions .btn,
  .ae-topbar-actions a.btn {
    height: 38px;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    justify-content: center !important;
    border-radius: 10px !important;
    gap: 6px !important;
    white-space: nowrap;
  }

  /* SVG-Icons */
  .ae-topbar-actions .btn svg,
  .ae-topbar-actions a.btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Bootstrap-Icons / Orchid-Icons (icomoon/font) */
  .ae-topbar-actions .btn .icon,
  .ae-topbar-actions .btn .bi,
  .ae-topbar-actions .btn [class^="icon-"],
  .ae-topbar-actions .btn [class*=" icon-"] {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* Ab 3 Buttons → Icon-only, sonst läuft die Topbar über. */
  .ae-topbar-actions:has(> li:nth-child(3)) .btn,
  .ae-topbar-actions:has(> li:nth-child(3)) a.btn {
    /* width: 38px;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0 !important; */
  }

  .ae-topbar-actions:has(> li:nth-child(3)) .btn>*,
  .ae-topbar-actions:has(> li:nth-child(3)) a.btn>* {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* Glocke + Settings auch kompakter */
  .ae-topbar-icon-btn {
    width: 38px;
    height: 38px;
  }

  .ae-topbar-fixed {
    gap: 2px;
    padding-left: 6px;
    margin-left: 4px;
  }

  /* Seitenkopf kompakter — Aside wandert auf eigene Zeile */
  .ae-page-heading {
    padding: 12px 10px 4px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Der 25%-Rückzug für den Rechnung/Angebot-Umschalter (siehe oben,
     ".ae-order-edit .ae-page-heading__aside") gilt nur für die rechtsbündige
     Desktop-Zeile neben dem Titel — sobald der Aside-Bereich hier auf eine
     eigene, volle Zeile wandert, gibt es keine "Kalkulation"-Spalte mehr,
     an der er sich ausrichten müsste. */
  .ae-order-edit .ae-page-heading {
    padding-right: 10px;
  }

  .ae-order-edit .ae-page-heading__aside {
    padding-right: 0;
  }

  .ae-page-heading__main {
    flex: 1 1 auto;
  }

  .ae-page-heading__aside {
    flex: 1 1 auto;
    justify-content: stretch;
  }

  .ae-page-heading .ck-page-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .ae-page-heading .ck-page-subtitle {
    font-size: 13px;
  }

  .ae-page-heading .ck-breadcrumb-inline {
    margin: 0 0 4px 0;
  }

  .ae-page-heading .ck-breadcrumb-inline .ae-bc-item a,
  .ae-page-heading .ck-breadcrumb-inline .ae-bc-item span {
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  .ae-page-heading .ck-breadcrumb-inline .ae-bc-item+.ae-bc-item::before {
    margin: 0 5px;
  }
}

@media (max-width: 560px) {

  /* Auf sehr engen Screens: Stornieren-Button + ggf. weitere ausblenden,
     damit die wichtigsten Aktionen + Glocke/Settings sicher passen. */
  .ae-topbar-inner {
    gap: 4px;
    padding: 6px 4px;
    min-height: 52px;
  }

  .ae-topbar-actions {
    gap: 4px !important;
  }

  /* Labels bleiben bei 1-2 Buttons sichtbar — Höhe auf 36px reduziert.
     Erst ab 3 Buttons fixe Quadrate (Icon-only-Modus aus dem 768px-Block). */
  .ae-topbar-actions .btn,
  .ae-topbar-actions a.btn {
    height: 36px;
    padding: 0 10px !important;
  }

  .ae-topbar-actions:has(> li:nth-child(3)) .btn,
  .ae-topbar-actions:has(> li:nth-child(3)) a.btn {
    /* width: 36px;
    padding: 0 !important; */
  }

  .income-hub__mini-link--primary.ie-btn-bezahlt,
  .ie-btn-bezahlt.income-hub__mini-link--primary {
    text-align: center!important;
  }

  .ae-topbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .ae-topbar-search {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
  }

  /* Mandant-Auswahl unter der Topbar (Platzgewinn): hier nur ausblenden,
     User kann via Burger ins Menü und dort umschalten. */
  .ae-topbar-mandant {
    display: none;
  }
}

/* Cockpit-Hero-Search auf der Home-Seite bleibt zusätzlich vorhanden — die sticky
   Topbar dient als immer sichtbare Suche, der Hero ist die einladende Variante im
   sichtbaren Hauptbereich. Keine weiteren Overrides nötig. */


/* ── Tabs-Zeile: Section-Tabs + Zeitraum-Auswahl in einer Reihe ──────────
   Gemeinsamer Wrapper für @include('partials.section-tabs') und
   @include('partials.period-picker', [...]) — hält beide auf gleicher Höhe
   (analog zu .tax-hub__tabrow bei Steuern & SVS). margin-left:auto auf
   .ae-month-picker--tabrow statt justify-content:space-between, damit die
   Auswahl auch dann rechtsbündig bleibt, wenn KEINE Tabs vorhanden sind
   (z.B. Unterlagen) — dort ist sie das einzige Kind. */
.ae-tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 18px;
}

/* Ohne diese Korrektur bläht das eigene Bottom-Padding der Pill-Tabs
   (.ae-section-tabs--pill: 14px) die Zeile über die Zeitraum-Pille hinaus
   auf — align-items:center zentriert die kürzere Pille dann sichtbar
   NIEDRIGER als die Tabs, statt auf derselben Linie zu sitzen. Analog zu
   .tax-hub__tabrow>.ae-section-tabs--pill (Steuern & SVS). */
.ae-tabs-row>.ae-section-tabs--pill {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Zeitraum-Pille (Monats-Picker oder nur Jahr) — exakt dieselbe Bauhöhe/Form
   wie die Reiter-Tabs (radius 50px, border 1.5px, box-shadow 1:1 von
   .ae-section-tabs--pill .ae-section-tabs__tab übernommen), links ein
   eingelassener Icon-Well in Primärfarbe, rechts Eyebrow-Label ("Zeitraum"/
   "Jahr") + Wert. overflow:hidden auf dem Trigger clippt den rechteckigen
   Icon-Well automatisch auf die linke Pill-Rundung, ohne dass der Well selbst
   einen eigenen border-radius braucht. */
.ae-month-picker--tabrow {
  margin-left: auto;
}

.ae-month-picker--tabrow .ae-month-picker__trigger {
  height: auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ae-month-picker--tabrow .ae-month-picker__trigger:hover,
.ae-month-picker--tabrow .ae-month-picker__trigger.is-active {
  border-color: rgba(var(--primary-rgb), .35);
  background: #fff;
  color: inherit;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .12);
}

.ae-month-picker--tabrow .ae-month-picker__trigger[aria-expanded="true"] {
  border-color: var(--primary, #008B97);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.ae-month-picker--tabrow .ae-month-picker__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 16px;
  background: var(--primary, #008B97);
  color: #fff;
}

.ae-month-picker--tabrow .ae-month-picker__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 18px;
}

.ae-month-picker--tabrow .ae-month-picker__eyebrow {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.ae-month-picker--tabrow .ae-month-picker__label {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #3D3F4E;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.ae-month-picker--tabrow .ae-month-picker__chevron {
  align-self: center;
  flex: 0 0 auto;
  margin: 0 16px 0 2px;
  color: #94a3b8;
}

@media (max-width: 720px) {
  .ae-month-picker--tabrow {
    margin-left: 0;
    width: 100%;
  }

  .ae-month-picker--tabrow .ae-month-picker__trigger {
    width: 100%;
  }

  .ae-month-picker--tabrow .ae-month-picker__text {
    flex: 1 1 auto;
  }
}

/* ── Section-Tabs (Folder-Style, oben am Content-Card) ──────────
   Wird als eigener <nav>-Block DIREKT vor der Content-Card platziert.
   Die Tabs sitzen visuell mit ihrer Unterkante exakt auf der Card-
   Oberkante (Folder-Effekt) — der aktive Tab erscheint teal-gefüllt
   als Reiter, die inaktiven sind heller. */
.ae-section-tabs {
  display: flex;
  gap: 6px;
  padding: 0 24px 0 0;
  margin: 0 0 -1px 0;
  /* 1px Overlap mit der darunterliegenden Card */
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ── Pill-Style Tab-Variante ─────────────────────────────────────────────── */
.ae-section-tabs--pill {
  gap: 16px;
  padding: 0 0 14px;
  margin: 0;
  align-items: center;
}

.ae-section-tabs--pill .ae-section-tabs__tab {
  border-radius: 50px;
  border: 1.5px solid #e2e8f0;
  border-bottom: 1.5px solid #e2e8f0;
  background: #fff;
  color: #4B5563;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ae-section-tabs--pill .ae-section-tabs__tab:hover {
  background: rgba(var(--primary-rgb), .06);
  border-color: rgba(var(--primary-rgb), .35);
  color: var(--primary, #008b97);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .12);
  text-decoration: none;
}

.ae-section-tabs--pill .ae-section-tabs__tab.is-active {
  background: var(--primary, #008b97);
  border-color: var(--primary, #008b97);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .30);
}

.ae-section-tabs--pill .ae-section-tabs__tab.is-active:hover {
  background: var(--primary, #008b97);
  color: #fff;
}

/* Card-Radius vollständig wiederherstellen (Pill-Look, kein Folder-Connect).
   Ungated auf .ae-section-tabs--pill: bei nur einem sichtbaren Tab rendert
   partials/section-tabs.blade.php gar keine <nav> mehr (nichts zum
   Umschalten) — die Card braucht ihren vollen Radius aber unabhängig davon,
   ob Tabs da sind, die Zeitraum-Auswahl allein steht schließlich auch. */
.income-hub>.ae-tabs-row~.income-hub__grid>.income-hub__card--tabbed,
.expense-hub>.ae-tabs-row~.expense-hub__card {
  border-top-left-radius: 24px;
}

.ae-section-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #6B7280;
  background: #F0F2F5;
  border: 1px solid var(--income-border, #e5e9eb);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  text-decoration: none;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}

.ae-section-tabs__tab:hover {
  color: #3D3F4E;
  background: #E5E9EB;
  text-decoration: none;
}

.ae-section-tabs__tab.is-active {
  /* background: var(--income-primary, #008b97); */
  /* background: var(--income-primary, #008b97); */
  background: rgb(0 139 151 / 82%);
  color: #fff;
  /* border-color: var(--income-primary, #008b97); */
  border-color: rgb(0 139 151 / 72%);
  box-shadow: 0 -2px 6px rgba(var(--primary-rgb), 0.12);
}

.ae-section-tabs__tab.is-active:hover {
  background: var(--income-primary, #008b97);
  color: #fff;
}

/* Tabbed-Card: links-oben-Radius weg, damit der aktive Tab nahtlos in die
   Card-Oberkante übergeht (der aktive Tab hat selbst border-radius oben). */
.income-hub__card--tabbed {
  border-top-left-radius: 0;
  border-top: none;
  position: relative;
  overflow: hidden;
}


/* Abstand zur Insight-Card/Card darunter kommt jetzt ausschließlich aus dieser
   margin-bottom (die Pille-Tabs liefern seit der padding-bottom:0-Korrektur
   oben keine "versteckte" Padding-Distanz mehr) — gilt gleichermaßen mit und
   ohne Section-Tabs (z.B. Unterlagen hat keine Tabs, nur die Zeitraum-Pille). */
.income-hub>.ae-tabs-row {
  margin-bottom: 14px;
}

.income-hub>.ae-tabs-row+.income-hub__grid {
  margin-top: 0;
}

/* expense-hub (gap: 28px) und abos-hub (gap: 22px): Tabs-Gap kompensieren,
   damit die Reiter-Zeile ohne Abstand direkt auf der Card sitzt. */
.expense-hub>.ae-tabs-row {
  margin-bottom: -29px;
}

/* Insight-Card (grüner Info-Balken) sitzt jetzt zwischen Reiter-Zeile und Card
   (statt davor) — statt dem Folder-Flush-Effekt hier einen normalen kleinen
   Abstand herstellen, damit sie nicht unter den Pill-Tabs verschwindet.
   ~ statt + : orchid._partials.insight-card rendert vor der eigentlichen
   .ae-insight-card immer noch ein <style>-Tag (eigenes Scoped-CSS für den
   Dismiss/Restore-Mechanismus), das dadurch der wirklich direkte nächste
   Sibling ist — + hätte hier nie gematcht. */
.expense-hub>.ae-tabs-row:has(~ .ae-insight-card) {
  margin-bottom: -14px;
}

.expense-hub>.ae-insight-card {
  margin-bottom: -6px;
}

.expense-hub>.ae-tabs-row~.expense-hub__card {
  /* border-top-left-radius: 0; */
  position: relative;
  overflow: hidden;
}

.abos-hub>.ae-section-tabs {
  margin-bottom: calc(-22px - 1px);
}

.abos-hub>.ae-section-tabs+.expense-hub__card {
  border-top-left-radius: 0;
}

/* Inhalte innerhalb der Abos-Top-Card (Window-Bar + Stats-Grid) */
.abos-hub>.expense-hub__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sidebar-Items, die als Section-Tabs gerendert werden, im Hauptmenü
   ausblenden (gilt für alle Templates, siehe Menü-Vereinheitlichung).
   Orchid setzt die per ->class() vergebene Klasse auf das innere <a>; wir
   verstecken den umschließenden <li> via :has(). */
.aside li.nav-item:has(> a.ae-section-tab--einnahmen) {
  display: none !important;
}

/* Fallback für Browser ohne :has()-Support — Anker wird verborgen,
   übrig bleibt ggf. ein leerer Slot (passabel, nur ältere Browser). */
.aside a.ae-section-tab--einnahmen {
  display: none !important;
}

.ae-section-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.ae-section-tabs__tab.is-active .ae-section-tabs__count {
  background: rgba(255, 255, 255, 0.22);
}

.ae-section-tabs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ae-section-tabs__icon svg {
  width: 18px;
  height: 18px;
}

/* Mobile: Tabs als horizontaler Scroll, kompakter */
@media (max-width: 768px) {
  .ae-section-tabs {
    /* padding: 10px 14px 0 14px; */
    margin-bottom: 20px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ae-section-tabs::-webkit-scrollbar {
    display: none;
  }

  .ae-section-tabs__tab {
    padding: 11px 18px;
    font-size: 14px;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
  }
}


/* ── Globale Send-Modals (Rechnung/Mahnung) ──────────────────────
   Wird von partials/modals/rechnung-send-modal.blade.php und
   partials/modals/mahnung-send-modal.blade.php verwendet. Damit die
   Modals auf jeder Seite (Cockpit, Rechnungsliste, …) gleich aussehen,
   liegt das CSS hier global statt inline in einer einzelnen View. */
.ie-modal .modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.ie-modal .modal-header {
  padding: 22px 28px 16px;
  border-bottom: 1px solid #eef0f3;
}

.ie-modal .modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
}

.ie-modal .modal-body {
  padding: 24px 28px;
}

.ie-modal .modal-footer {
  padding: 16px 28px 22px;
  border-top: 1px solid #eef0f3;
  gap: 10px;
}

.ie-field {
  margin-bottom: 18px;
}

.ie-field:last-child {
  margin-bottom: 0;
}

.ie-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 7px;
  letter-spacing: .01em;
}

.ie-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #1a202c;
  background: #fff;
  border: 1px solid #d8dce5;
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
  font-family: inherit;
}

.ie-input:focus {
  outline: none;
  border-color: var(--income-primary, #008b97);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.ie-input::placeholder {
  color: #a0aec0;
}

.ie-textarea {
  resize: vertical;
  min-height: 120px;
}

.ie-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.ie-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-family: inherit;
  line-height: 1.4;
}

.ie-modal-btn--primary {
  background: var(--income-primary, #008b97);
  color: #fff;
  border-color: var(--income-primary, #008b97);
}

.ie-modal-btn--primary:hover {
  background: #007781;
  border-color: #007781;
  color: #fff;
}

.ie-modal-btn--secondary {
  background: #fff;
  color: #475569;
  border-color: #d8dce5;
}

.ie-modal-btn--secondary:hover {
  background: #f3f4f6;
  color: #1a202c;
}

.ie-modal-btn--success {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.ie-modal-btn--success:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

/* Mahnung-Stufen-Hint (Warnbox oben im Mahnung-Modal) */
.ie-mahnung-typ-hint {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}

.ie-mahnung-typ-hint strong {
  font-weight: 700;
}



/* ── Border-Top Ladebalken-Animation ──────────────────────────────────────
   Gilt für alle Karten, die vormals border-top: 4px solid hatten.
   ::before = halbtransparenter Track, ::after = animierter Füllbalken.     */
.income-hub__card--tabbed::before,
.expense-hub>.ae-tabs-row~.expense-hub__card::before,
.fristen-radar-card-disabled::before,
.catalog-panel--customers::before,
.catalog-panel--contacts::before,
.catalog-panel--services::before,
.catalog-panel--suppliers::before,
.border-primary-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.18;
}

.income-hub__card--tabbed::after,
.expense-hub>.ae-tabs-row~.expense-hub__card::after,
.fristen-radar-card-disabled::after,
.catalog-panel--customers::after,
.catalog-panel--contacts::after,
.catalog-panel--services::after,
.catalog-panel--suppliers::after,
.border-primary-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: hubBorderFill 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes hubBorderFill {
  to {
    transform: scaleX(1);
  }
}

/* Individuelle Farben (Track + Füllbalken teilen dieselbe Farbe) */
.income-hub__card--tabbed::before,
.income-hub__card--tabbed::after,
.expense-hub>.ae-tabs-row~.expense-hub__card::before,
.expense-hub>.ae-tabs-row~.expense-hub__card::after,
.border-primary-animation::before,
.border-primary-animation::after {
  background: #449ea8;
}

.fristen-radar-card::before,
.fristen-radar-card::after {
  background: var(--danger);
}

.catalog-panel--customers::before,
.catalog-panel--customers::after,
.catalog-panel--services::before,
.catalog-panel--services::after {
  background: var(--primary, #008b97);
}

.catalog-panel--contacts::before,
.catalog-panel--contacts::after {
  background: #59b7bf;
}

.catalog-panel--suppliers::before,
.catalog-panel--suppliers::after {
  background: #c7a244;
}

.border-primary-animation {
  position: relative;
  overflow: hidden;
}

/* Dokument-Icon in der Ausgaben-Liste kann ein <button> sein (öffnet Prüf-Modal) –
   Button-Defaults zurücksetzen, damit es identisch zum <a>-Icon aussieht. */
button.expense-hub__icon-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   Steuern & SVS Hub – Kopf, Jahresauswahl, Gewinnverlauf, KPIs, Timeline
   ══════════════════════════════════════════════════════════════════════ */

/* Pill-Tabs (wie Einnahmen/Ausgaben) und Jahresauswahl in EINER Zeile:
   Tabs links, Dropdown rechts, vertikal zentriert. */
.tax-hub__tabrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Im Zeilen-Layout das Pill-Nav-Bottom-Padding entfernen → saubere Zentrierung
   mit dem Dropdown; der Abstand zur Card kommt über den .tax-hub flex-gap. */
.tax-hub__tabrow>.ae-section-tabs--pill {
  padding-bottom: 0;
  margin-bottom: 0;
}

.tax-hub__card--tabbed {
  position: relative;
  border-top: none;
  overflow: hidden;
  /* klippt den 4px-Balken sauber an die 24px-Rundung (wie income-hub) */
}

.tax-hub__card--tabbed::before,
.tax-hub__card--tabbed::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.tax-hub__card--tabbed::before {
  opacity: .18;
  background: #449ea8;
}

.tax-hub__card--tabbed::after {
  background: #449ea8;
  transform: scaleX(0);
  transform-origin: left center;
  animation: hubBorderFill 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Jahresauswahl (Dropdown) ───────────────────────────────────────── */
.tax-hub__year-select {
  position: relative;
}

/* Gleiche Pill-Optik/Struktur wie die Reiter-Tabs und .ae-month-picker--tabrow
   (Rechnungen/Angebote/…) — Icon-Well links (Primärfarbe) + Eyebrow-Label
   ("Jahr") + Wert rechts, damit die reine Jahresauswahl hier und die
   "Alle Monate"-Pille dort wie dasselbe Bauteil wirken. overflow:hidden +
   radius 50px auf dem summary clippt den rechteckigen Icon-Well automatisch
   auf die linke Pill-Rundung. */
.tax-hub__year-select>summary {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tax-hub__year-select>summary::-webkit-details-marker {
  display: none;
}

.tax-hub__year-select>summary:hover {
  border-color: rgba(var(--primary-rgb), .35);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .12);
}

.tax-hub__year-select[open]>summary {
  border-color: var(--primary, #008B97);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.tax-hub__year-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 16px;
  background: var(--primary, #008B97);
  color: #fff;
}

.tax-hub__year-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 18px;
}

.tax-hub__year-eyebrow {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.tax-hub__year-current {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #3D3F4E;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.tax-hub__year-chevron {
  align-self: center;
  flex: 0 0 auto;
  margin: 0 16px 0 2px;
  color: #94a3b8;
  transition: transform .18s;
}

.tax-hub__year-select[open]>summary .tax-hub__year-chevron {
  transform: rotate(180deg);
}

.tax-hub__year-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 130px;
  background: var(--white, #fff);
  border: 1px solid #e9eef0;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .14);
  padding: 6px;
  z-index: 40;
}

.tax-hub__year-option {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
}

.tax-hub__year-option:hover {
  background: #f1f5f9;
  color: var(--text-dark, #505261);
}

.tax-hub__year-option.is-active {
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary, #008B97);
}

/* ── Gewinnverlauf-Card ─────────────────────────────────────────────── */
.tax-hub__chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  align-items: stretch;
}

.tax-hub__chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tax-hub__chart-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

.tax-hub__chart-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--primary, #008B97);
  margin-top: 4px;
}

.tax-hub__chart-sub {
  font-size: 12.5px;
  color: #9094A0;
  margin: 2px 0 0;
}

.tax-hub__chart-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.tax-hub__chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 600;
}

.tax-hub__lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Monatlich ↔ Kumuliert Umschalter */
.tax-hub__chart-toggle {
  display: inline-flex;
  padding: 3px;
  background: #f1f5f6;
  border-radius: 10px;
  gap: 2px;
}

.tax-hub__chart-toggle button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.tax-hub__chart-toggle button:hover {
  color: var(--secondary, #008B97);
}

.tax-hub__chart-toggle button.is-active {
  background: #fff;
  color: var(--secondary, #008B97);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.tax-hub__lg::before {
  content: '';
  width: 12px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}

.tax-hub__lg--profit {
  color: #505261;
}

.tax-hub__lg--income {
  color: var(--primary, #008B97);
}

.tax-hub__lg--expense {
  color: #CBD5E1;
}

.tax-hub__lg--goal {
  color: #F59E0B;
}

.tax-hub__lg--goal::before {
  background: repeating-linear-gradient(to right, #F59E0B 0 4px, transparent 4px 7px);
  height: 3px;
}

.tax-hub__chart-area {
  margin-top: 8px;
  min-height: 300px;
}

/* Jahresziel-Panel */
.tax-hub__goal-panel {
  border-left: 1px solid #eef2f1;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.tax-hub__goal-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tax-hub__goal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9094A0;
}

.tax-hub__goal-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary, #008B97);
}

.tax-hub__goal-amount--muted {
  color: var(--text-dark, #505261);
  font-size: 20px;
}

.tax-hub__goal-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.tax-hub__goal-delta.is-up {
  background: #d1fae5;
  color: #047857;
}

.tax-hub__goal-delta.is-down {
  background: #fee2e2;
  color: #b91c1c;
}

.tax-hub__goal-empty {
  font-size: 13px;
  color: #6b7280;
}

.tax-hub__goal-empty p {
  margin: 6px 0 8px;
}

/* Klickbarer Jahresziel-Block (verlinkt auf die SVS-Detail-Seite) */
.tax-hub__goal-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  padding: 6px 8px;
  margin: -6px -8px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease;
}

.tax-hub__goal-edit:hover {
  background: #f1f5f6;
}

.tax-hub__goal-pencil {
  color: var(--primary, #008B97);
  font-weight: 700;
}

.tax-hub__goal-open-btn {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary, #008B97);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.tax-hub__goal-open-btn:hover {
  text-decoration: underline;
}

/* ── KPI-Zeile ──────────────────────────────────────────────────────── */
.tax-hub__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed #e5e9eb;
}

.tax-hub__kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tax-hub__kpi-label {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 600;
}

.tax-hub__kpi-amount {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.tax-hub__kpi-delta {
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tax-hub__kpi-delta.is-up {
  color: #059669;
}

.tax-hub__kpi-delta.is-down {
  color: #dc2626;
}

.tax-hub__kpi-delta.is-neutral {
  color: #9ca3af;
  font-weight: 600;
}

.tax-hub__kpi-hint {
  font-size: 11px;
  color: #b0b6bf;
}

/* ── Abgaben-Timeline ───────────────────────────────────────────────── */
.tax-hub__timeline-card {
  border-top: 3px solid #F59E0B;
}

.tax-hub__tl-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tax-hub__tl-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.tax-hub__tl-key::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.tax-hub__tl-key--svs::before {
  background: #F59E0B;
}

.tax-hub__tl-key--est::before {
  background: #505261;
}

.tax-hub__tl-key--uva::before {
  background: var(--primary, #008B97);
}

.tax-hub__timeline {
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 14px;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  scrollbar-width: thin;
}

.tax-hub__timeline::-webkit-scrollbar {
  height: 6px;
}

.tax-hub__timeline::-webkit-scrollbar-thumb {
  background: #d8dee2;
  border-radius: 6px;
}

.tax-hub__timeline-track {
  display: flex;
  gap: 0;
  min-width: min-content;
  padding: 0 40px;
}

.tax-hub__tl-month {
  flex: 0 0 176px;
  width: 176px;
  padding: 0 10px;
  position: relative;
}

.tax-hub__tl-month-head {
  text-align: center;
  margin-bottom: 10px;
}

.tax-hub__tl-month-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.tax-hub__tl-month-year {
  display: block;
  font-size: 10px;
  color: #b0b6bf;
  font-weight: 600;
}

.tax-hub__tl-month.is-current .tax-hub__tl-month-name {
  color: var(--primary, #008B97);
}

.tax-hub__tl-month.is-current {
  background: linear-gradient(to bottom, rgba(var(--primary-rgb), .05), transparent 70%);
  border-radius: 14px;
}

.tax-hub__tl-rail {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}

.tax-hub__tl-rail::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: 50%;
  height: 2px;
  background: #e7ecee;
  transform: translateY(-50%);
}

.tax-hub__tl-node {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d3dadd;
}

.tax-hub__tl-node.has-items {
  border-color: var(--primary, #008B97);
  background: var(--primary, #008B97);
}

.tax-hub__tl-month.is-current .tax-hub__tl-node {
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .15);
}

.tax-hub__tl-markers {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tax-hub__tl-marker {
  background: #fff;
  border: 1px solid #eef2f1;
  border-left: 3px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tax-hub__tl-marker--svs {
  border-left-color: #F59E0B;
}

.tax-hub__tl-marker--est {
  border-left-color: #505261;
}

.tax-hub__tl-marker--uva {
  border-left-color: var(--primary, #008B97);
}

.tax-hub__tl-marker.is-past {
  opacity: .55;
}

.tax-hub__tl-marker.is-soon {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .18);
}

.tax-hub__tl-marker-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tax-hub__tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.tax-hub__tl-marker--svs .tax-hub__tl-dot {
  background: #F59E0B;
}

.tax-hub__tl-marker--est .tax-hub__tl-dot {
  background: #505261;
}

.tax-hub__tl-marker--uva .tax-hub__tl-dot {
  background: var(--primary, #008B97);
}

.tax-hub__tl-marker-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

.tax-hub__tl-marker-amount {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}

.tax-hub__tl-marker-date {
  font-size: 11px;
  color: #9094A0;
}

.tax-hub__tl-empty {
  text-align: center;
  color: #d3dadd;
  font-size: 13px;
  padding: 6px 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SVS-Details (Unterseite): Cockpit-Boxen, Vorschreibungs-Timeline,
   Historie, gesetzliche Aufschlüsselung, Optimierungs-Modal
   ══════════════════════════════════════════════════════════════════════ */

.svs-hub__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 4px;
}

.svs-hub__box {
  background: #fff;
  border: 1px solid #eef2f1;
  border-left: 4px solid #cbd5e1;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svs-hub__box--primary {
  border-left-color: var(--primary, #008B97);
}

.svs-hub__box--warn {
  border-left-color: #F59E0B;
}

.svs-hub__box--ok {
  border-left-color: #059669;
}

.svs-hub__box--neutral {
  border-left-color: #cbd5e1;
}

.svs-hub__box-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.svs-hub__chip {
  flex: 0 0 auto;
  width: 48px;
  text-align: center;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 6px 0;
  line-height: 1.1;
}

.svs-hub__chip-month {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #64748b;
}

.svs-hub__chip-day {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__chip--warn {
  background: #fef3c7;
}

.svs-hub__chip--warn .svs-hub__chip-day {
  color: #92400e;
}

.svs-hub__chip--ok {
  background: #d1fae5;
}

.svs-hub__chip--ok .svs-hub__chip-day {
  color: #065f46;
}

.svs-hub__box-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

.svs-hub__box-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.svs-hub__box-sub {
  font-size: 12.5px;
  color: #9094A0;
}

.svs-hub__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #475569;
}

.svs-hub__tag--ok {
  background: #d1fae5;
  color: #047857;
}

.svs-hub__tag--warn {
  background: #fef3c7;
  color: #92400e;
}

.svs-hub__tag--neutral {
  background: #f1f5f9;
  color: #475569;
}

.svs-hub__box-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 16px;
}

.svs-hub__box-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #94a3b8;
}

.svs-hub__box-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__optimize-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--primary, #008B97);
  color: #fff;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .25);
}

.svs-hub__optimize-btn:hover {
  background: var(--primary-dark, #00747e);
}

.svs-hub__optimize-btn>span {
  font-size: 15px;
  font-weight: 700;
}

.svs-hub__optimize-btn small {
  font-size: 11px;
  opacity: .85;
  font-weight: 500;
}

.svs-hub__optimize-btn.is-disabled,
.svs-hub__optimize-btn:disabled {
  background: #e2e8f0;
  color: #64748b;
  cursor: not-allowed;
}

.svs-hub__optimize-btn.is-disabled:hover,
.svs-hub__optimize-btn:disabled:hover {
  background: #e2e8f0;
}

.svs-modal__hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* Live-Vorschau in der Optimierungs-Modalbox */
.svs-modal__preview {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.svs-modal__preview[hidden] {
  display: none;
}

.svs-modal__preview-icon {
  font-size: 18px;
  line-height: 1.3;
  flex: 0 0 auto;
}

.svs-modal__preview-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.svs-modal__preview-copy strong {
  font-size: 13.5px;
  color: var(--text-dark, #505261);
}

.svs-modal__preview-copy span {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

.svs-modal__preview[data-tone="warn"] {
  border-color: #FDE68A;
  background: #FFFBEB;
}

.svs-modal__preview[data-tone="warn"] .svs-modal__preview-copy strong {
  color: #92400e;
}

.svs-modal__preview[data-tone="ok"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.svs-modal__preview[data-tone="ok"] .svs-modal__preview-copy strong {
  color: #166534;
}

/* ── Vorschreibungs-Timeline (horizontal, 3+ Quartale) ──────────────── */
.svs-hub__rail {
  display: flex;
  gap: 0;
  padding: 6px 4px 4px;
}

.svs-hub__rail-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
}

.svs-hub__rail-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #94a3b8;
}

.svs-hub__rail-item.is-aktuell .svs-hub__rail-date {
  color: var(--primary, #008B97);
}

.svs-hub__rail-line {
  position: relative;
  width: 100%;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svs-hub__rail-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #e7ecee;
  transform: translateY(-50%);
}

.svs-hub__rail-item:first-child .svs-hub__rail-line::before {
  left: 50%;
}

.svs-hub__rail-item:last-child .svs-hub__rail-line::before {
  right: 50%;
}

.svs-hub__rail-node {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd5e1;
}

.svs-hub__rail-item.is-bezahlt .svs-hub__rail-node {
  background: #9aa3ad;
  border-color: #9aa3ad;
}

.svs-hub__rail-item.is-aktuell .svs-hub__rail-node {
  border-color: var(--primary, #008B97);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .15);
}

.svs-hub__rail-title {
  font-size: 12.5px;
  color: #6b7280;
}

.svs-hub__rail-amount {
  font-size: 13px;
  font-weight: 700;
}

.svs-hub__rail-amount--bezahlt {
  color: #059669;
}

.svs-hub__rail-amount--aktuell {
  color: #b8860b;
}

.svs-hub__rail-amount--offen {
  color: #9094A0;
}

/* ── Detailliste ────────────────────────────────────────────────────── */
.svs-hub__details {
  margin-top: 18px;
}

.svs-hub__details>summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  color: var(--primary, #008B97);
  font-weight: 700;
  font-size: 14px;
  padding: 8px;
}

.svs-hub__details>summary::-webkit-details-marker {
  display: none;
}

.svs-hub__detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.svs-hub__detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid #eef2f1;
  border-left: 4px solid #cbd5e1;
  border-radius: 12px;
  padding: 14px 18px;
}

.svs-hub__detail-row.is-bezahlt {
  border-left-color: #059669;
}

.svs-hub__detail-row.is-aktuell {
  border-left-color: var(--primary, #008B97);
}

.svs-hub__detail-row.is-offen {
  border-left-color: #cbd5e1;
}

.svs-hub__detail-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.svs-hub__detail-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #94a3b8;
}

.svs-hub__detail-row.is-aktuell .svs-hub__detail-eyebrow {
  color: var(--primary, #008B97);
}

.svs-hub__detail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

.svs-hub__detail-desc {
  font-size: 12.5px;
  color: #9094A0;
}

.svs-hub__detail-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

.svs-hub__detail-amount {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.svs-hub__status--bezahlt {
  background: #d1fae5;
  color: #047857;
}

.svs-hub__status--aktuell {
  background: #fef3c7;
  color: #92400e;
}

.svs-hub__status--offen {
  background: #fef3c7;
  color: #92400e;
}

/* ── Untere Karten (Historie + Aufschlüsselung) ─────────────────────── */
.svs-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.svs-hub__history,
.svs-hub__breakdown {
  display: flex;
  flex-direction: column;
}

.svs-hub__history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #eef2f1;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.svs-hub__history-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

.svs-hub__history-sub {
  display: block;
  font-size: 12px;
  color: #9094A0;
}

.svs-hub__history-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.svs-hub__history-amount {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__history-empty {
  color: #9094A0;
  font-size: 13px;
  padding: 10px 0;
}

/* Part 1: Hinweis-Banner „Steuerberater passt an / Vorschreibung hochladen" */
.svs-hub__pending {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #FDE68A;
  border-left: 5px solid #F59E0B;
  background: #FFFBEB;
  border-radius: 14px;
}

.svs-hub__pending-icon {
  font-size: 22px;
  line-height: 1.2;
  flex: 0 0 auto;
}

.svs-hub__pending-copy strong {
  display: block;
  font-size: 14.5px;
  color: #92400e;
  margin-bottom: 4px;
}

.svs-hub__pending-copy p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.55;
}

.svs-hub__pending-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--secondary, #008B97);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.svs-hub__pending-btn:hover {
  background: var(--primary-dark, #00747e);
}

/* Part 2: Verlauf der SVS-Anpassungen (Optimierungs-Historie) */
.svs-opt-hist__row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #eef2f1;
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 10px;
}

.svs-opt-hist__row.is-angefordert {
  border-left: 4px solid #F59E0B;
}

.svs-opt-hist__row.is-erledigt {
  border-left: 4px solid #16a34a;
}

.svs-opt-hist__icon {
  font-size: 20px;
  flex: 0 0 auto;
}

.svs-opt-hist__main {
  flex: 1 1 auto;
  min-width: 0;
}

.svs-opt-hist__title {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-opt-hist__title small {
  font-weight: 600;
  color: #9094A0;
  font-size: 11.5px;
  margin-left: 6px;
}

.svs-opt-hist__arrow {
  color: var(--secondary, #008B97);
  margin: 0 2px;
}

.svs-opt-hist__sub {
  display: block;
  font-size: 12px;
  color: #9094A0;
  margin-top: 2px;
}

.svs-opt-hist__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  text-align: right;
}

.svs-opt-hist__side small {
  font-size: 11px;
  color: #9094A0;
}

.svs-opt-hist__badge {
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  padding: 4px 9px;
}

.svs-opt-hist__badge--ok {
  background: #dcfce7;
  color: #166534;
}

.svs-opt-hist__badge--wait {
  background: #fef3c7;
  color: #92400e;
}

.svs-hub__breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid #f1f3f5;
}

.svs-hub__breakdown-row:last-child {
  border-bottom: none;
}

.svs-hub__breakdown-label {
  font-size: 14px;
  color: var(--text-dark, #505261);
  font-weight: 600;
}

.svs-hub__breakdown-label small {
  color: #9094A0;
  font-weight: 500;
}

.svs-hub__breakdown-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark, #505261);
  white-space: nowrap;
}

.svs-hub__breakdown-amount small {
  color: #9094A0;
  font-weight: 500;
  font-size: 11px;
}

/* ── Optimierungs-Modal ─────────────────────────────────────────────── */
body.svs-modal-open {
  overflow: hidden;
}

.svs-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.svs-modal[hidden] {
  display: none;
}

.svs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
}

.svs-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 20px;
  padding: 30px 32px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.svs-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.svs-modal__head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}

.svs-modal__intro {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  margin: 12px 0 20px;
}

.svs-modal__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #505261);
  margin: 16px 0 8px;
}

.svs-modal__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: var(--text-dark, #505261);
}

.svs-modal__input:focus {
  outline: none;
  border-color: var(--primary, #008B97);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.svs-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.svs-modal__btn {
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

.svs-modal__btn--ghost {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}

.svs-modal__btn--ghost:hover {
  background: #f8fafc;
}

.svs-modal__btn--primary {
  background: var(--primary, #008B97);
  color: #fff;
}

.svs-modal__btn--primary:hover {
  background: var(--primary-dark, #00747e);
}

@media (max-width: 900px) {
  .svs-hub__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .svs-hub__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .tax-hub__chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tax-hub__goal-panel {
    border-left: 0;
    border-top: 1px solid #eef2f1;
    padding-left: 0;
    padding-top: 18px;
    flex-direction: row;
    flex-wrap: wrap;
  }

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

/* ════════════════════════════════════════════════════════════════════════
   Auswertungen-Hub (platform.auswertungen)
   ════════════════════════════════════════════════════════════════════════ */
.aw-hub {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.aw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Tabs nutzen die globale .ae-section-tabs--pill-Optik (wie Einnahmen/Rechnungen). */
.aw-hub>.aw-topbar>.ae-section-tabs--pill {
  padding-bottom: 0;
  margin: 0;
}

/* Jahres-Dropdown */
.aw-year {
  position: relative;
}

.aw-year>summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 9px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6edf5;
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
}

.aw-year>summary::-webkit-details-marker {
  display: none;
}

.aw-year__caret {
  color: #9094a0;
  font-size: 12px;
}

.aw-year__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.aw-year__item {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #475569;
  font-weight: 600;
  font-size: 14px;
}

.aw-year__item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.aw-year__item.is-active {
  background: rgba(var(--primary-rgb), .1);
  color: var(--secondary, #008b97);
}

/* KPI-Kacheln */
.aw-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.aw-kpi {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 4px solid #cbd5e1;
}

.aw-kpi--income {
  border-left-color: var(--primary, #008b97);
}

.aw-kpi--profit {
  border-left-color: #16a34a;
}

.aw-kpi--expense {
  border-left-color: #ef4444;
}

.aw-kpi--neutral {
  border-left-color: #94a3b8;
}

/* Zusätzliche Tönungen für die Rechnungen-/Angebote-KPI-Leiste (partials/
   hub-kpi-bar.blade.php, variant "cards") — gleiche Farben wie die frühere
   .ie-kpi-cell--open/--overdue-Chip-Leiste, für Konsistenz app-weit. */
.aw-kpi--open {
  border-left-color: #d97706;
}

.aw-kpi--overdue {
  border-left-color: #dc2626;
}

/* Klickbare Karten (Rechnungen-/Angebote-KPIs springen zum passenden Filter-
   Tab darunter) — a.aw-kpi trifft NIE die reinen Anzeige-Karten in
   Auswertungen/Steuern & SVS (dort immer <div>). */
a.aw-kpi {
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}

a.aw-kpi:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
  transform: translateY(-1px);
}

.aw-kpi__label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.aw-kpi__value {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.5px;
}

.aw-kpi__sub {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.aw-kpi__sub--up {
  color: #16a34a;
}

.aw-kpi__sub--down {
  color: #ef4444;
}

/* Diagramm-Karten */
.aw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.aw-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.aw-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.aw-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.aw-card__sub {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.aw-chart {
  width: 100%;
  min-height: 260px;
}

/* erste/alleinstehende Karte (Donut) über volle Breite wirkt zu groß → erlauben,
   dass ungerade Anzahl die letzte Karte spannt */
.aw-grid>.aw-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Tabelle + Export */
.aw-table-card {
  padding-bottom: 8px;
}

.aw-table-wrap {
  overflow-x: auto;
}

.aw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.aw-table th,
.aw-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
}

.aw-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #64748b;
  font-weight: 600;
}

.aw-table td {
  color: #334155;
}

.aw-table .aw-num,
.aw-table th.aw-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.aw-table tbody tr:hover {
  background: #f8fafc;
}

.aw-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--secondary, #008b97);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 13px;
  transition: background .15s ease;
}

.aw-export-btn:hover {
  background: var(--primary-dark, #00747e);
}

@media (max-width: 1100px) {
  .aw-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .aw-grid {
    grid-template-columns: 1fr;
  }

  .aw-grid>.aw-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .aw-kpis {
    grid-template-columns: 1fr;
  }
}

/* ── Sortierbare Spaltenköpfe (GUI-Hub-Tabellen) ─────────────────────── */
.ae-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s ease;
}

.ae-sort:hover {
  color: var(--secondary, #008B97);
  text-decoration: none;
}

.ae-sort__ind {
  font-size: 11px;
  line-height: 1;
  opacity: .35;
  transition: opacity .15s ease;
}

.ae-sort:hover .ae-sort__ind {
  opacity: .8;
}

.ae-sort.is-active {
  color: var(--secondary, #008B97);
}

.ae-sort.is-active .ae-sort__ind {
  opacity: 1;
}

/* In rechts-/zentriert-ausgerichteten Header-Zellen den Link mit ausrichten */
.text-right .ae-sort {
  justify-content: flex-end;
}

.text-center .ae-sort {
  justify-content: center;
}

.text-right {
  text-align: right;
}

/* ── Abgabenkalender (blätterbare Monatsansicht) ─────────────────────── */
.tax-hub__calendar-card {
  position: relative;
}

.tax-cal {
  margin-top: 6px;
}

.tax-cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tax-cal__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text-dark, #505261);
  text-transform: uppercase;
}

.tax-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tax-cal__nav:hover {
  background: var(--secondary, #008B97);
  border-color: var(--secondary, #008B97);
  color: #fff;
}

.tax-cal__weekdays,
.tax-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.tax-cal__weekdays {
  margin-bottom: 6px;
}

.tax-cal__weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  padding: 4px 0;
}

.tax-cal__grid {
  gap: 2px;
}

.tax-cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 30px;
  max-height: 44px;
  border: 0;
  background: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark, #505261);
  font-family: inherit;
}

.tax-cal__day.is-muted {
  color: #cbd5e1;
  font-weight: 500;
}

.tax-cal__day.has-event {
  cursor: pointer;
  font-weight: 800;
}

.tax-cal__day.has-event:hover {
  filter: brightness(.96);
}

/* Termin an dem Tag: die ganze Zelle wird in der Typ-Farbe hinterlegt statt nur ein Punkt. */
.tax-cal__day.has-event--svs {
  background: rgba(245, 158, 11, .22);
  color: #92400E;
}

.tax-cal__day.has-event--est {
  background: rgba(80, 82, 97, .18);
  color: #383A46;
}

.tax-cal__day.has-event--uva {
  background: rgba(var(--primary-rgb), .20);
  color: #00636B;
}

/* Mehrere Termin-Arten am selben Tag: neutrale Fläche + kleine Farbpunkte je Art. */
.tax-cal__day.has-event--multi {
  background: rgba(100, 116, 139, .16);
  color: #475569;
}

/* Heute: Ring statt Vollfläche, damit er sich mit einer Termin-Hinterlegung verträgt. */
.tax-cal__day.is-today {
  box-shadow: inset 0 0 0 2px var(--secondary, #008B97);
  color: var(--secondary, #008B97);
}

.tax-cal__day.is-today.has-event {
  color: inherit;
}

.tax-cal__dots {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
}

.tax-cal__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary, #008B97);
}

.tax-cal__dot--svs {
  background: #F59E0B;
}

.tax-cal__dot--est {
  background: #505261;
}

.tax-cal__dot--uva {
  background: var(--primary, #008B97);
}

.tax-cal__legend {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef2f1;
}

.tax-cal__lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

.tax-cal__lg::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.tax-cal__lg--svs::before {
  background: #F59E0B;
}

.tax-cal__lg--est::before {
  background: #505261;
}

.tax-cal__lg--uva::before {
  background: var(--primary, #008B97);
}

/* ── Termine-des-Monats-Liste (rechts neben dem Abgabenkalender) ────────── */
.tax-agenda-card {
  display: flex;
  flex-direction: column;
}

.tax-agenda__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9094A0;
}

.tax-agenda__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.tax-agenda__empty {
  margin: 4px 0 0;
  font-size: 13px;
  color: #9094A0;
}

.tax-agenda__item {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FAFCFC;
  border: 1px solid #E5E9EB;
  border-left: 3px solid #cbd5e1;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.tax-agenda__item:hover {
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.tax-agenda__item.is-past {
  border-left-color: #cbd5e1;
  opacity: .68;
}

.tax-agenda__item.is-soon {
  border-left-color: #F59E0B;
  background: #FFFBEB;
}

.tax-agenda__item.is-upcoming {
  border-left-color: var(--primary, #008B97);
}

.tax-agenda__date {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark, #505261);
  text-align: center;
}

.tax-agenda__badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.tax-agenda__badge--svs {
  background: #F59E0B;
}

.tax-agenda__badge--est {
  background: #505261;
}

.tax-agenda__badge--uva {
  background: var(--primary, #008B97);
}

.tax-agenda__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tax-agenda__body strong {
  font-size: 13px;
  color: var(--text-dark, #505261);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tax-agenda__status {
  font-size: 11px;
  font-weight: 700;
  color: #9094A0;
}

.tax-agenda__item.is-soon .tax-agenda__status {
  color: #B45309;
}

.tax-agenda__item.is-upcoming .tax-agenda__status {
  color: #00636B;
}

.tax-agenda__amount {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark, #505261);
  white-space: nowrap;
}

/* Tages-Popup */
.tax-cal__pop {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(320px, calc(100% - 36px));
  z-index: 30;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  padding: 14px 16px;
}
.form-control.is-invalid, .is-invalid.bootstrap-tagsinput, .is-invalid.chosen-choices, .is-invalid.chosen-single, .was-validated .bootstrap-tagsinput:invalid, .was-validated .chosen-choices:invalid, .was-validated .chosen-single:invalid, .was-validated .form-control:invalid {
    border-color: var(--bs-form-invalid-border-color)!important;
}
.tax-cal__pop[hidden] {
  display: none;
}

.tax-cal__pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tax-cal__pop-head strong {
  font-size: 14px;
  color: var(--text-dark, #505261);
}

.tax-cal__pop-close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}

.tax-cal__pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #f1f5f9;
}

.tax-cal__pop-item:first-child {
  border-top: 0;
}

.tax-cal__pop-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: .03em;
}

.tax-cal__pop-tag--svs {
  background: #F59E0B;
}

.tax-cal__pop-tag--est {
  background: #505261;
}

.tax-cal__pop-tag--uva {
  background: var(--primary, #008B97);
}

.tax-cal__pop-label {
  flex: 1 1 auto;
  font-size: 13px;
  color: #475569;
}

.tax-cal__pop-amount {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

/* ESt-Details: Caption über den Tarifstufen */
.est-tarif__caption {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9094A0;
}

/* ══════════════════════════════════════════════════════════════════════
   Cockpit Schnellaktionen (template=default): „Ausgabe hinzufügen" +
   „Rechnung schreiben" (beide aufklappbar) + größere Autopilot-Schrift.
   ══════════════════════════════════════════════════════════════════════ */
.ck-quickadd {
  margin-bottom: 60px;
}

.ck-quickadd__buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Große, klar erkennbare Aktions-Karten: [Icon-Badge] [Titel + Untertitel] [Pfeil] */
.ck-quickadd__btn {
  min-height: 96px;
  text-decoration: none;
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
  background: var(--white, #fff);
  border: 1.5px solid #E6EBEF;
  border-radius: 24px;
  box-shadow: var(--shadow, 0 6px 20px rgba(15, 23, 42, .06));
  color: #1A2332;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ck-quickadd__btn:hover {
  border-color: var(--primary, #008b97);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
  transform: translateY(-2px);
}

.ck-quickadd__btn:active {
  transform: translateY(0);
}

/* Icon-Badge */
.ck-quickadd__icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(var(--primary-rgb), .10);
  color: var(--primary, #008b97);
}

.ck-quickadd__icon svg {
  width: 27px;
  height: 27px;
  display: block;
}

/* Text-Block */
.ck-quickadd__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.ck-quickadd__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.2px;
}

.ck-quickadd__sub {
  font-size: 13.5px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.25;
}

/* Pfeil / Chevron rechts */
.ck-quickadd__chev {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #B6BEC8;
  transition: transform .2s ease, color .16s ease;
}

.ck-quickadd__chev svg {
  width: 22px;
  height: 22px;
  display: block;
}

.ck-quickadd__btn:hover .ck-quickadd__chev {
  color: var(--primary, #008b97);
}

/* Primär-Variante (Rechnung schreiben) – gefüllt, als Haupt-CTA hervorgehoben */
.ck-quickadd__btn--primary {
  background: var(--primary, #008b97);
  border-color: var(--primary, #008b97);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--primary-rgb), .30);
}

.ck-quickadd__btn--primary:hover {
  border-color: var(--primary, #008b97);
  box-shadow: 0 16px 36px rgba(var(--primary-rgb), .40);
  filter: brightness(1.03);
}

.ck-quickadd__btn--primary .ck-quickadd__icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.ck-quickadd__btn--primary .ck-quickadd__sub {
  color: rgba(255, 255, 255, .82);
}

.ck-quickadd__btn--primary .ck-quickadd__chev {
  color: rgba(255, 255, 255, .85);
}

.ck-quickadd__btn--primary:hover .ck-quickadd__chev {
  color: #fff;
}

/* Aktiv-Zustand des „Ausgabe"-Toggles: Ring + gedrehter Chevron (Panel offen) */
.ck-quickadd__btn.income-hub__button--active {
  border-color: var(--primary, #008b97);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.ck-quickadd__btn.income-hub__button--active .ck-quickadd__chev {
  transform: rotate(180deg);
  color: var(--primary, #008b97);
}

.ck-quickadd .expense-hub__channels--grid {
  margin-top: 16px;
  margin-bottom: 0;
}

/* Aufklapp-Logik: das Grid setzt display:grid (überschreibt das [hidden]-Attribut
   der UA-Stylesheet). Expliziter Guard, damit `hidden` zuverlässig einklappt. */
.expense-hub__channels--grid[hidden] {
  display: none !important;
}

/* Quick-Rechnung-Formular */
.ck-quickrechnung {
  margin-top: 16px;
  background: var(--white, #fff);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow);
  padding: 22px;
}

.ck-quickrechnung[hidden] {
  display: none !important;
}

.ck-quickrechnung__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 110px 150px;
  gap: 14px;
  align-items: end;
}

.ck-qr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.ck-qr-label {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ck-qr-input {
  width: 100%;
  min-width: 0;
}

.ck-qr-input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.ck-quickrechnung__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.ck-qr-hint {
  font-size: 13px;
  color: #6B7280;
  text-decoration: none;
}

a.ck-qr-hint:hover {
  color: var(--primary, #008b97);
  text-decoration: underline;
}

.ck-qr-submit {
  white-space: nowrap;
}

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

/* Assistent-Sektion (Abstand wie die übrigen Karten) */
.ck-assistant-section {
  margin-bottom: 60px;
}

/* Autopilot „Das haben wir für dich erledigt" – etwas größere Schrift */
.autopilot-card--lg .activity-item {
  font-size: 16px;
}

.autopilot-card--lg .activity-time {
  font-size: 13px;
}

.autopilot-card--lg .autopilot-card__footer {
  font-size: .95rem;
}

/* Onboarding-/Einrichtungs-Aufgaben in „Aufgaben & Fristen" (neue User) */
.income-hub__row.urgent-item--setup {
  border-left: 4px solid var(--primary, #008b97);
  background: rgba(var(--primary-rgb), .04);
}

.item-due--info {
  color: var(--primary, #008b97);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE-FEINSCHLIFF — Hub-Seiten (Cockpit, Einnahmen/Rechnungen,
   Ausgaben, Steuern & SVS, Inbox/Mitteilungen). Konsolidiert am Dateiende
   → gewinnt bei gleicher Spezifität gegen die früheren, verstreuten
   Breakpoint-Regeln.
   ════════════════════════════════════════════════════════════════════ */

/* ── A · Aufgaben/Fristen-Liste (urgent-list) als Stack-Card ──────────
   Greift schon ab ≤1100px (NICHT erst ≤640px!): genau in der Tablet-/
   schmalen-Desktop-Zone ist die Sidebar noch sichtbar UND das Seiten-
   Padding (80px) groß, sodass die Karte zu schmal für das starre
   Desktop-Spalten-Grid (1fr 130 100 110 160 ≈ 650px+) wird → früher
   horizontaler Überlauf (abgeschnittene Spalten + Scrollbalken).
   Stack-Cards brauchen keine spaltenübergreifende Ausrichtung und passen
   sich jeder Breite an. */
@media (max-width: 1100px) {

  /* Header-Zeile (Spaltentitel) ergibt ohne Spalten-Grid keinen Sinn. */
  .urgent-header-row {
    display: none;
  }

  /* Überschreibt das Desktop-Spalten-Grid — inkl. der höher
     spezifizierten .urgent-list--with-icon-Variante. */
  .urgent-item,
  .urgent-list--with-icon .urgent-item {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon info amount"
      "icon due   due"
      "acts acts  acts";
    gap: 4px 12px;
    padding: 12px 14px;
    align-items: start;
    border-radius: 14px;
  }

  /* Variante OHNE Icon (kompaktes Cockpit-Widget) → keine Icon-Spalte. */
  .urgent-list:not(.urgent-list--with-icon) .urgent-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "info amount"
      "due  due"
      "acts acts";
  }

  .urgent-item .item-icon {
    grid-area: icon;
    align-self: center;
    font-size: 20px;
  }

  .urgent-item .item-info {
    grid-area: info;
    min-width: 0;
  }

  .urgent-item .item-amount {
    grid-area: amount;
    align-self: center;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .urgent-item .item-due {
    grid-area: due;
    display: inline-block;
    justify-self: start;
    font-size: 12px;
    font-weight: 700;
  }

  .urgent-item .item-date {
    display: none;
  }

  /* Datum redundant zur Fälligkeit */
  /* .item-actions hieß die Aktionen-Zelle vor der Umstellung auf
     partials/table/actions.blade.php — das Markup rendert jetzt
     .ie-row-actions, daher hier mit umbenannt (grid-area:acts galt vorher
     nur zufällig noch, weil Grid-Auto-Placement das letzte unbenannte
     Kind in die letzte freie Zelle setzt). */
  .urgent-item .ie-row-actions {
    grid-area: acts;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
  }

  .urgent-item .item-title-row {
    font-size: 14px;
    line-height: 1.3;
  }

  .urgent-item .item-sub {
    font-size: 12px;
  }

  /* Touch-freundliche Aktions-Buttons. */
  .urgent-item .ie-row-actions a,
  .urgent-item .ie-row-actions button {
    min-height: 34px;
  }
}

.inbox-hub .inbox-reply-details,.inbox-hub .inbox-item .ie-row-actions,.inbox-hub .income-hub__row .ie-row-actions{
  /* wird vorerst ausgeblendet, da antworten über den chat gemacht werden */
  display:none;
}

/* ── B · Phone-Feinschliff (≤ 640px): zusätzlich Padding/Größen straffen ── */
@media (max-width: 640px) {

  /* 1 · Seiten-Innenabstand schlank — mehr Breite für den Inhalt. */
  main {
    padding: 14px 12px 48px 12px;
  }

  .ae-insight-card,
  .catalog-hub__highlight {
    display:none;
  }

  /* 2 · Hub-Karten kompakter (Padding + Radius). */
  .income-hub__card,
  .income-hub__spotlight,
  .expense-hub__card,
  .tax-hub__card,
  .abos-hub .expense-hub__card,
  .card,
  .finance-card,
  .fristen-radar-card,
  .ai-spotlight {
    padding: 16px 14px;
    border-radius: 16px;
  }

  /* 3 · Pill-Section-Tabs etwas kompakter (bleiben horizontal scrollbar). */
  .ae-section-tabs--pill .ae-section-tabs__tab {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* 4 · Toolbar (Filter-Tabs + Suche) enger gestapelt. */
  .ae-toolbar {
    gap: 10px;
    margin: 10px 0 6px 0;
  }

  /* 5 · Inbox-Item-Cards (Kommunikation-Thread) kompakter. Das eigentliche
        Layout (CSS-Grid icon|body|action + Smartphone-Stapelung der Aktions-
        Zeile) steht im inline-<style> der Inbox-View (orchid/inbox/index.blade);
        hier nur der Phone-Feinschliff Padding/Icon. */
  .inbox-hub .inbox-item {
    padding: 13px 14px;
  }

  .inbox-hub .inbox-item-icon {
    font-size: 20px;
  }

  /* 6 · Hub-Toolbar: Suchfeld volle Breite, Aktions-Button (+ Kunde / + Produkt /
        + Rechnung …) rutscht in eine eigene zweite Zeile darunter. Das erste Kind
        von .ae-toolbar__search ist auf ALLEN Hub-Seiten der (relative) Such-Wrapper;
        per flex-basis 100% bekommt es die erste Zeile, alle folgenden Kinder (Button)
        brechen um. */
  .ae-toolbar__search {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .ae-toolbar__search> :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  .ae-toolbar__search-input {
    min-width: 0;
  }

  .ae-toolbar__search .income-hub__button {
    flex: 0 0 auto;
  }
}

/* Kompaktes Brand-Logo in der Topbar — auf Desktop versteckt (Logo steht in
   der Sidebar), erscheint nur auf Mobile (siehe Block C). */
.ae-topbar-logo {
  display: none;
}

/* ── C · Mobile-Topbar (≤ 768px, wo der Hamburger erscheint) ──────────
   Gewünschtes Layout:  [☰ Burger]      [Logo — zentriert]      [⚙ Settings]

   Umsetzung:
   - Burger bleibt links im Flow.
   - Suchfeld wird auf Mobile ausgeblendet (Suche weiter via ⌘K / Hero-Suche
     auf der Startseite erreichbar) — so kann das Logo sauber mittig sitzen.
   - Logo wird ABSOLUT zentriert (left:50% / translateX(-50%)), damit es immer
     exakt mittig steht, unabhängig von der Breite von Burger/Settings.
   - Settings-Block wird per margin-left:auto an den rechten Rand gepinnt.

   Bewusst über die ID #ae-topbar + !important, damit diese Mobile-Regeln die
   früheren Breakpoint-Regeln (Icon-Kreis-Suche bei ≤900/≤560) zweifelsfrei
   überschreiben — analog zur ohnehin !important-lastigen Topbar-Stilisierung. */
@media (max-width: 768px) {
  #ae-topbar .ae-topbar-inner {
    position: relative;
  }

  /* Burger links. */
  #ae-topbar .ae-topbar-burger {
    display: inline-flex !important;
    flex-shrink: 0;
  }

  /* Suche auf Mobile ausblenden (Layout = Burger · Logo · Zahnrad). */
  #ae-topbar .ae-topbar-search {
    /* display: none !important; */
  }

  #ae-topbar .ae-topbar-mandant {
    display: none !important;
  }

  /* Logo exakt mittig (absolut, daher unabhängig von Burger-/Settings-Breite). */
  #ae-topbar .ae-topbar-logo {
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-decoration: none;
    z-index: 1;
  }

  #ae-topbar .ae-topbar-logo img {
    height: 26px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
  }

  /* Settings-Block (+ ggf. Aktionen) rechtsbündig. */
  #ae-topbar .ae-topbar-actions {
    margin-left: auto !important;
  }

  #ae-topbar .ae-topbar-fixed {
    display: inline-flex !important;
    flex-shrink: 0;
    margin-left: auto !important;
    border-left: none;
    /* Trennlinie links weg, wirkt mittig-zentriert sauberer */
  }

  #ae-topbar .ae-topbar-fixed .ae-topbar-icon-btn {
    display: inline-flex !important;
  }
}

/* ── Monats-Picker (partials/month-picker.blade.php) ───────────────────── */
.ae-month-picker {
  position: relative;
  flex-shrink: 0;
}

.ae-month-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: #fff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
}

.ae-month-picker__trigger:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: rgba(var(--primary-rgb), 0.04);
}

.ae-month-picker__trigger.is-active {
  border-color: var(--secondary);
  color: var(--secondary);
  background: rgba(var(--primary-rgb), 0.08);
  font-weight: 700;
}

.ae-month-picker__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.18);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  margin-left: 1px;
  transition: background 0.12s;
}

.ae-month-picker__trigger:hover .ae-month-picker__clear,
.ae-month-picker__clear:hover {
  background: rgba(var(--primary-rgb), 0.35);
}

.ae-month-picker__chevron {
  opacity: 0.55;
  transition: transform 0.15s;
}

.ae-month-picker__trigger[aria-expanded="true"] .ae-month-picker__chevron {
  transform: rotate(180deg);
}

/* Dropdown — wird per JS auf document.body verschoben + position:fixed */
.ae-month-picker__dropdown {
  background: #fff;
  border: 1px solid #e5e9eb;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
  min-width: 240px;
  padding: 6px;
  overflow: hidden;
}

.ae-month-picker__item--all {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 7px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 2px;
}

.ae-month-picker__item--all:hover {
  background: #f3f4f6;
  color: var(--secondary);
}

.ae-month-picker__item--all.is-active {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--secondary);
}

/* Jahres-Trenner ist klickbar (wählt das ganze Jahr, month=YYYY statt
   YYYY-MM) — Optik bleibt im Ruhezustand wie der bisherige reine Text-Trenner,
   der Hint-Text rechts ("Jahr wählen") macht die Klickbarkeit erst bei
   Hover/Fokus bzw. dauerhaft im aktiven Zustand sichtbar, damit die
   Monatsliste nicht überladen wirkt. */
.ae-month-picker__year-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px 3px;
  border: 0;
  border-radius: 7px;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ae-month-picker__year-label-hint {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.ae-month-picker__year-label:hover,
.ae-month-picker__year-label:focus-visible {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--secondary);
}

.ae-month-picker__year-label:hover .ae-month-picker__year-label-hint,
.ae-month-picker__year-label:focus-visible .ae-month-picker__year-label-hint,
.ae-month-picker__year-label.is-active .ae-month-picker__year-label-hint {
  opacity: 1;
}

.ae-month-picker__year-label.is-active {
  background: var(--secondary);
  color: #fff;
}

.ae-month-picker__year-label.is-active:hover {
  background: var(--primary);
  color: #fff;
}

.ae-month-picker__year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 0 4px 6px;
}

.ae-month-picker__month {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.ae-month-picker__month:hover {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--secondary);
}

.ae-month-picker__month.is-active {
  background: var(--secondary);
  color: #fff;
}

.ae-month-picker__month.is-active:hover {
  background: var(--primary);
  color: #fff;
}

/* Ausgaben: Detail-Titel als Link (analog .ie-rechnung-link bei Rechnungen) */
a.expense-hub__meta-title {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

a.expense-hub__meta-title:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Sidebar Quickadd „+ Anlegen" (template=default) ─────────────── */
.aside-quickadd {
  position: relative;
  margin: 22px 16px 22px;
}

/* .aside-quickadd__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--income-secondary, #c7a244);
  background: var(--income-secondary, #c7a244);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.22);
  transition: 0.2s ease;
}

.aside-quickadd__btn:hover,
.aside-quickadd.is-open .aside-quickadd__btn {
  transform: translateY(-1px);
  background: #b29240;
  border-color: #b29240;
} */

.aside-quickadd__btn {
  position: relative;
  overflow: visible;
  display: flex;
  
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 30px;
  border: 2px solid var(--primary);
  /* background: #ffffff; */
  background: color-mix(in srgb, var(--primary) 2%, transparent);
  color: var(--primary);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent), 0 8px 20px color-mix(in srgb, var(--primary) 16%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.aside-quickadd__btn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

.aside-quickadd__btn--intro::after {
  animation: asideQuickaddRing 1.25s ease-out 1;
}

.aside-quickadd__btn:hover,
.aside-quickadd.is-open .aside-quickadd__btn {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent), 0 10px 26px color-mix(in srgb, var(--primary) 24%, transparent);
}

.aside-quickadd__icon {
  flex-shrink: 0;
}

.aside-quickadd__label {
  white-space: nowrap;
}

@keyframes asideQuickaddRing {
  0% {
    opacity: 0;
    transform: scale(0.92);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 18%, transparent);
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 0.8;
    transform: scale(1.03);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 8%, transparent);
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aside-quickadd__btn--intro::after {
    animation: none;
    opacity: 0;
  }
}

.aside-quickadd__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1055;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

/* unsichtbare Brücke, damit die Maus vom Button zum Menü wandern kann ohne dass :hover kurz verloren geht */
.aside-quickadd__menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}

.aside-quickadd:hover .aside-quickadd__menu,
.aside-quickadd.is-open .aside-quickadd__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aside-quickadd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* Neben <a>-Einträgen gibt es auch <button>-Einträge (z.B. "Frage an
   Steuerberater", die keine Navigation auslösen) — native Button-Chrome
   zurücksetzen, damit sie optisch identisch zu den Links sind. */
button.aside-quickadd__item {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.aside-quickadd__item svg {
  color: var(--income-primary, #008b97);
  flex-shrink: 0;
}

.aside-quickadd__item:hover {
  background: #f5f6f8;
  color: #111;
  text-decoration: none;
}

/* Eingeklappte Sidebar: Icon-only Trigger, Menü fliegt seitlich aus */
div.aside.aside-collapsed .aside-quickadd {
  margin-left: auto;
  margin-right: auto;
  width: 40px;
}

div.aside.aside-collapsed .aside-quickadd__label {
  display: none;
}

div.aside.aside-collapsed .aside-quickadd__btn {
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
}

div.aside.aside-collapsed .aside-quickadd__menu {
  left: 100%;
  right: auto;
  top: 0;
  margin-left: 8px;
  min-width: 220px;
}

div.aside.aside-collapsed .aside-quickadd__menu::before {
  top: 0;
  left: -8px;
  right: auto;
  width: 8px;
  height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   Nachrichtenkatalog (tasks_notifications) — Neuigkeiten-Karte, Infobox-
   Icon in "Das ist zu erledigen", Zahlungsinfo-Modal ("Jetzt einzahlen")
   ══════════════════════════════════════════════════════════════════════ */

/* ── Cockpit-Karte "Neuigkeiten" (Mitteilungskarte) ── */
.ck-news-card .card-desc { margin-bottom: 10px; }
.ck-news-card__links { display: flex; align-items: center; gap: 14px; }
.ck-news__mark-all {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--secondary, #008B97); font-size: 0.85rem; font-weight: 600;
}
.ck-news__mark-all:hover { text-decoration: underline; }
.ck-news-list { list-style: none; margin: 0; padding: 0; }
.ck-news-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid #EEF1F4;
}
.ck-news-item:last-child { border-bottom: none; }
.ck-news-item__title { font-weight: 600; color: var(--text-dark, #1F2430); font-size: 1rem; }
.ck-news-item__thema {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; background: #EDF7F8; color: var(--secondary, #008B97);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  vertical-align: middle;
}
.ck-news-item__sub { color: #6B7280; font-size: 1rem; margin-top: 2px; }
.ck-news-item__time { color: #9CA3AF; font-size: 1rem; white-space: nowrap; }
.ck-news-item__actions { display: flex; gap: 6px; }
.ck-news__btn {
  border: 1px solid #D8DEE5; background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 0.78rem; font-weight: 600; color: #3B4252;
  cursor: pointer; white-space: nowrap;
}
.ck-news__btn:hover { border-color: var(--secondary, #008B97); color: var(--secondary, #008B97); }
.ck-news__btn--dismiss:hover { border-color: #DC2626; color: #DC2626; }
@media (max-width: 760px) {
  .ck-news-item { grid-template-columns: minmax(0, 1fr); }
  .ck-news-item__time { display: none; }
}

/* ── Infobox-Icon in Aufgaben-Zeilen (Klick-Popover, s. urgent-list.blade.php) ── */
.urgent-info-icon {
  display: inline-block; margin-left: 6px; cursor: pointer;
  font-size: 0.85em; opacity: 0.75; vertical-align: baseline;
  border: none; background: none; padding: 0; font-family: inherit; line-height: 1;
}
.urgent-info-icon:hover, .urgent-info-icon:focus-visible { opacity: 1; }

.urgent-info-popover {
  z-index: 1100;
  max-width: 300px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 12px 14px;
}
.urgent-info-popover__title {
  font-weight: 600;
  color: var(--text-dark, #1f2937);
  margin-bottom: 4px;
}
.urgent-info-popover__text {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.45;
}

/* ── Zahlungsinfo-Modal ("Jetzt einzahlen", Phase 1) ── */
#zahlungsinfo-modal .zi-subtitle {
  font-weight: 600; color: var(--text-dark, #1F2430); margin: 0 0 12px;
}
#zahlungsinfo-modal .zi-rows { display: flex; flex-direction: column; gap: 0; }
#zahlungsinfo-modal .zi-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 34px;
  gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #EEF1F4;
}
#zahlungsinfo-modal .zi-row:last-child { border-bottom: none; }
#zahlungsinfo-modal .zi-row__label { color: #6B7280; font-size: 0.8rem; }
#zahlungsinfo-modal .zi-row__value {
  font-weight: 600; font-size: 0.9rem; color: var(--text-dark, #1F2430);
  overflow-wrap: anywhere;
}
#zahlungsinfo-modal .zi-row__copy {
  border: 1px solid #D8DEE5; background: #fff; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 0.9rem; line-height: 1;
  color: #3B4252;
}
#zahlungsinfo-modal .zi-row__copy:hover { border-color: var(--secondary, #008B97); color: var(--secondary, #008B97); }
#zahlungsinfo-modal .zi-infobox {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-left: 4px solid var(--secondary, #008B97);
  font-size: 0.83rem; color: #4B5563;
}
#zahlungsinfo-modal .zi-infobox strong { display: block; margin-bottom: 4px; color: var(--text-dark, #1F2430); }
#zahlungsinfo-modal .zi-infobox p { margin: 0; }
#zahlungsinfo-modal .zi-hinweis {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: #FEF3F2; border: 1px solid #FECDCA;
  border-left: 4px solid #F97066;
  font-size: 0.83rem; color: #7A271A;
}

/* ══════════════════════════════════════════════════════════════════════
   SVS-Details v2: Seitenkopf, Quartals-Karten, SVS-Zahlungen-gesamt +
   Zusammensetzung, Berechnungs-Karte (erwartete Einnahmen/Ausgaben)
   ══════════════════════════════════════════════════════════════════════ */

.svs-hub__intro {
  margin: 4px 0 26px;
}

.svs-hub__page-title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  color: var(--text-dark, #505261);
  letter-spacing: -0.3px;
}

.svs-hub__page-sub {
  margin: 0;
  font-size: 14.5px;
  color: #9094A0;
}

.svs-hub__page-sub a {
  color: var(--primary, #008B97);
  font-weight: 700;
  text-decoration: none;
}

.svs-hub__page-sub a:hover {
  opacity: .82;
}

/* ── Vorgeschriebene Teilzahlungen: 4 Quartals-Karten ───────────────── */
.svs-hub__quarters-head {
  margin-bottom: 18px;
}

.svs-hub__quarters-head h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__quarters-head p {
  margin: 0;
  font-size: 13.5px;
  color: #9094A0;
}

.svs-hub__quarters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.svs-hub__qc {
  position: relative;
  background: #fff;
  border: 1px solid #E5E9EB;
  border-radius: 18px;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.svs-hub__qc--aktuell {
  border: 2px solid var(--secondary, #C7A244);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--secondary, #C7A244) 22%, transparent);
  padding-top: 26px;
}

.svs-hub__qc-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--secondary, #C7A244);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--secondary, #C7A244) 45%, transparent);
}

.svs-hub__qc-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

.svs-hub__qc-amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark, #505261);
  line-height: 1.1;
}

.svs-hub__qc--aktuell .svs-hub__qc-amount {
  color: var(--secondary-dark, #AF8F3C);
}

.svs-hub__qc-hint {
  font-size: 11.5px;
  color: #9094A0;
  margin-bottom: 6px;
}

.svs-hub__qc-date {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 10px;
}

.svs-hub__qc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.svs-hub__qc-badge--bezahlt {
  background: #d1fae5;
  color: #047857;
}

.svs-hub__qc-badge--aktuell {
  background: var(--secondary, #C7A244);
  color: #fff;
}

.svs-hub__qc-badge--offen {
  background: #f1f5f9;
  color: #64748b;
}

/* ── Untere Zeile: SVS-Zahlungen gesamt / Berechnungs-Karte ─────────── */
.svs-hub__grid-2col {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}

.svs-hub__total-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.svs-hub__total-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748b;
}

.svs-hub__total-sub {
  font-size: 12px;
  color: #9094A0;
  margin-top: 2px;
}

.svs-hub__total-amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--primary, #008B97);
  margin: 14px 0 10px;
  line-height: 1;
}

.svs-hub__total-note {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: #6b7280;
}

.svs-hub__total-note strong {
  color: var(--text-dark, #505261);
}

.svs-hub__composition {
  width: 100%;
  background: #f8fafc;
  border-radius: 14px;
  padding: 18px 20px;
}

.svs-hub__composition-title {
  display: block;
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 14px;
}

.svs-hub__composition-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
}

.svs-hub__composition-label {
  font-size: 13.5px;
  color: var(--text-dark, #505261);
  white-space: nowrap;
}

.svs-hub__composition-label small {
  color: #9094A0;
  font-weight: 400;
}

.svs-hub__composition-leader {
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted #cbd5e1;
  margin-bottom: 4px;
}

.svs-hub__composition-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #505261);
  white-space: nowrap;
}

/* ── Berechnungs-Karte ("So wird deine SVS berechnet") ──────────────── */
.svs-hub__calc-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__calc-sub {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: #9094A0;
  line-height: 1.5;
}

.svs-hub__calc-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eef2f1;
}

.svs-hub__calc-input {
  background: #f8fafc;
  border-radius: 14px;
  padding: 16px 18px;
}

.svs-hub__calc-input-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

.svs-hub__calc-input-sub {
  display: block;
  font-size: 11.5px;
  color: #9094A0;
  margin-top: 2px;
}

.svs-hub__calc-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.svs-hub__calc-input-amount {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-dark, #505261);
}

.svs-hub__calc-edit {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #e7ecee;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.svs-hub__calc-edit:hover {
  background: var(--primary, #008B97);
  color: #fff;
}

.svs-hub__calc-input-status {
  display: block;
  font-size: 11.5px;
  color: #9094A0;
  margin-top: 6px;
}

.svs-hub__calc-input-status--manual {
  color: var(--primary, #008B97);
  font-weight: 600;
}

.svs-hub__calc-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #008B97);
  cursor: pointer;
}

.svs-hub__calc-reset:hover {
  opacity: .8;
}

.svs-hub__calc-result {
  display: flex;
  flex-direction: column;
}

.svs-hub__calc-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 14.5px;
}

.svs-hub__calc-result-row--main {
  color: var(--text-dark, #505261);
  font-weight: 700;
}

.svs-hub__calc-result-row--main:not(:first-child) {
  margin-top: 14px;
}

.svs-hub__calc-result-row--sub {
  color: #9094A0;
  font-size: 13px;
  padding-bottom: 12px;
}

.svs-hub__calc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 6px;
  background: var(--primary, #008B97);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
}

.svs-hub__calc-result-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 16px 20px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary, #008B97) 10%, #fff);
}

.svs-hub__calc-result-total strong {
  font-size: 15px;
  color: var(--text-dark, #505261);
  display: block;
}

.svs-hub__calc-result-total small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 2px;
}

.svs-hub__calc-result-total > strong:last-child {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary, #008B97);
}

.svs-hub__calc-result-total--credit {
  background: #f0fdf4;
}

.svs-hub__calc-result-total--credit > strong:last-child {
  color: #059669;
}

.svs-hub__calc-locked-hint {
  margin-top: 14px;
  font-size: 12.5px;
  color: #9094A0;
}

@media (max-width: 1100px) {
  .svs-hub__quarters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svs-hub__grid-2col {
    grid-template-columns: 1fr;
  }

  .svs-hub__calc-inputs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .svs-hub__quarters {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   EST-Details v2: zusätzliche Quartals-Karten-Zustände (Zukunft,
   Nachzahlung aus echtem Bescheid) + Zusammensetzungs-Fortschrittsbalken
   ══════════════════════════════════════════════════════════════════════ */

.svs-hub__qc-badge--zukunft {
  background: #f1f5f9;
  color: #94a3b8;
}

.svs-hub__qc--nachzahlung {
  border: 2px solid #DC2626;
}

.svs-hub__qc--nachzahlung .svs-hub__qc-title {
  color: #B91C1C;
}

.svs-hub__qc--nachzahlung .svs-hub__qc-amount {
  color: #B91C1C;
}

.svs-hub__qc-flag--danger {
  background: #DC2626;
  box-shadow: 0 4px 10px rgba(220, 38, 38, .35);
}

.svs-hub__qc-badge--nachzahlung {
  background: #fee2e2;
  color: #b91c1c;
}

.svs-hub__qc-meta {
  font-size: 11px;
  color: #9094A0;
  margin-top: -2px;
  margin-bottom: 8px;
}

/* ── Zusammensetzung als Fortschrittsbalken (bereits bezahlt / noch offen) ── */
.svs-hub__progress-track {
  width: 100%;
  height: 10px;
  border-radius: 20px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 16px;
}

.svs-hub__progress-fill {
  height: 100%;
  border-radius: 20px;
  background: var(--primary, #008B97);
}

.svs-hub__progress-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svs-hub__progress-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-dark, #505261);
}

.svs-hub__progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.svs-hub__progress-dot--paid {
  background: var(--primary, #008B97);
}

.svs-hub__progress-dot--open {
  background: #cbd5e1;
}

.svs-hub__progress-legend-amount {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-dark, #505261);
}

/* ── Cockpit „Das haben wir schon erledigt" (volle Breite, chronologische Timeline) ── */
.ck-erledigt-card {
  margin-bottom: 40px;
}

.ck-erledigt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ck-erledigt-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
}

.ck-erledigt-item:last-child,
.ck-erledigt-item:not(.ck-erledigt-item--hidden):not(:has(~ .ck-erledigt-item:not(.ck-erledigt-item--hidden))) {
  padding-bottom: 0;
}

.ck-erledigt-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: var(--bg-body);
  border: 2px solid var(--success);
  color: var(--success);
  z-index: 1;
}

/* Verbindungslinie nur zeichnen, wenn danach noch ein SICHTBARER Eintrag folgt —
   :last-child allein reicht nicht mehr, seit „Weitere laden" nachfolgende
   Einträge per .ck-erledigt-item--hidden (display:none) im DOM belässt statt sie
   wegzuschneiden; sonst hinge am letzten sichtbaren Eintrag eine Linie ins Leere. */
.ck-erledigt-item:not(.ck-erledigt-item--hidden):has(~ .ck-erledigt-item:not(.ck-erledigt-item--hidden)) .ck-erledigt-item__icon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: var(--income-border, #e5e9eb);
}

.ck-erledigt-item--hidden {
  display: none;
}

/* Zeitzonen-Kopfzeile (Heute/Diese Woche/Diesen Monat) — gruppiert von
   App\Services\CockpitAutopilotService, siehe tasks_notifications._feed_gruppierung.
   Kein eigenes Icon/keine Timeline-Linie, sitzt einfach als Trenner im DOM. */
.ck-erledigt-group-header {
  padding: 4px 0 10px 52px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--income-muted, #8f94a3);
}

.ck-erledigt-group-header:first-child {
  padding-top: 0;
}

.ck-erledigt-more {
  display: block;
  margin: 20px auto 0;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ck-erledigt-more:hover {
  background: var(--primary);
  color: #fff;
}

.ck-erledigt-item--teal .ck-erledigt-item__icon {
  border-color: var(--primary);
  color: var(--primary);
}

.ck-erledigt-item--gold .ck-erledigt-item__icon {
  border-color: var(--secondary);
  color: var(--secondary-dark);
}

.ck-erledigt-item--green .ck-erledigt-item__icon {
  border-color: var(--success);
  color: var(--success);
}

.ck-erledigt-item--empty .ck-erledigt-item__icon {
  border-color: var(--income-border, #e5e9eb);
  color: var(--income-muted, #8f94a3);
}

.ck-erledigt-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.ck-erledigt-item__time {
  font-size: 12px;
  font-weight: 600;
  color: var(--income-muted, #8f94a3);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.ck-erledigt-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.ck-erledigt-item__subtitle {
  font-size: 13.5px;
  color: var(--income-muted, #8f94a3);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .ck-erledigt-item__title {
    font-size: 14px;
  }
}

/* ── Text-Detail-Modalbox: generisches „Text vollständig lesen"-Fenster ──
   (partials/modals/text-detail-modal.blade.php) – wiederverwendbar überall,
   wo ein kompakter Zeileninhalt bei Klick als voller Text lesbar sein soll
   (Inbox-Archiv, Cockpit-Aufgaben-Radar, Fristenradar). Global statt lokal
   pro Seite, damit sie auf jeder einbindenden Seite tatsächlich sichtbar ist
   (ohne position:fixed hier landete sie unpositioniert im Seitenfluss). */
.text-detail-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.text-detail-modal[hidden] { display: none; }
.text-detail-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.text-detail-modal__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
.text-detail-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.text-detail-modal__eyebrow {
  margin: 0 0 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--income-primary, #008b97);
}
.text-detail-modal__header h3 { margin: 0; font-size: 21px; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.text-detail-modal__subtitle { margin: 6px 0 0; font-size: 14px; color: #475569; }
.text-detail-modal__subtitle[hidden] { display: none; }
.text-detail-modal__close {
  border: 0; background: #eff6ff; color: #1d4ed8;
  width: 34px; height: 34px; border-radius: 10px;
  font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.text-detail-modal__meta { margin-top: 14px; font-size: 12.5px; color: #94a3b8; }
.text-detail-modal__meta[hidden] { display: none; }
.text-detail-modal__body { margin-top: 16px; font-size: 14px; line-height: 1.6; color: #334155; }
.text-detail-modal__body p { margin: 0 0 10px; }

.text-detail-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 8px 14px; border-radius: 8px;
  background: var(--income-primary, #008b97); color: #fff !important;
  font-size: 13px; font-weight: 700; text-decoration: none; border: none; cursor: pointer;
}
.text-detail-cta:hover { opacity: .9; }

@media (max-width: 640px) {
  .text-detail-modal { padding: 12px; }
  .text-detail-modal__dialog { padding: 20px; border-radius: 16px; }
}