/* =========================================================
   site-app.css
   Brand-Tokens + Visual-Utilities, die den Look der echten
   fynoAI-App in die Marketing-Site einziehen.
   Wird NACH site.css und site-mobile.css geladen, damit alle
   Werte hier gewinnen.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  /* === Brand (übernommen 1:1 aus app.css der echten App) === */
  --brand-25:  #f2f7ff;
  --brand-50:  #ecf3ff;
  --brand-100: #dde9ff;
  --brand-200: #c2d6ff;
  --brand-300: #9cb9ff;
  --brand-400: #7592ff;
  --brand-500: #465fff;
  --brand-600: #3641f5;
  --brand-700: #2a31d8;
  --brand-800: #252dae;
  --brand-900: #262e89;
  --brand-950: #161950;

  /* === App-Greys (Tailwind-Skala der App) === */
  --app-gray-25:  #fcfcfd;
  --app-gray-50:  #f9fafb;
  --app-gray-100: #f2f4f7;
  --app-gray-200: #e4e7ec;
  --app-gray-300: #d0d5dd;
  --app-gray-400: #98a2b3;
  --app-gray-500: #667085;
  --app-gray-600: #475467;
  --app-gray-700: #344054;
  --app-gray-800: #1d2939;
  --app-gray-900: #101828;
  --app-gray-950: #0c111d;
  --app-gray-dark: #1a2231;

  /* === Status-Farben (aus der App) === */
  --app-success-50:  #ecfdf3;
  --app-success-500: #12b76a;
  --app-success-600: #039855;
  --app-warning-50:  #fffaeb;
  --app-warning-500: #f79009;
  --app-error-50:    #fef3f2;
  --app-error-500:   #f04438;

  /* === Schatten (App-Tokens) === */
  --shadow-app-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-app-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
                   0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  --shadow-app-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
                   0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-app-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
                   0px 4px 6px -2px rgba(16, 24, 40, 0.03);

  /* === Brand-Accent für die LP angleichen (war #4f6bff, jetzt App-Indigo) === */
  --ai:   var(--brand-500);
  --ai-2: var(--brand-400);
  --work: var(--brand-600);
}

/* =========================================================
   .app-frame  -  ein Container, der das Look-and-Feel der
   echten App einleitet (Font, Text-Color, Hintergrund).
   In allen Mockups verwenden, nicht global, damit das
   Marketing-Geist erhalten bleibt.
   ========================================================= */
.app-frame,
.app-frame * {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.app-frame {
  color: var(--app-gray-700);
  background: var(--app-gray-50);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: normal;
  letter-spacing: 0;
}
.app-frame h1, .app-frame h2, .app-frame h3, .app-frame h4 {
  color: var(--app-gray-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* =========================================================
   Re-usable App-Building-Blocks für Mockups
   ========================================================= */

/* Card / Surface */
.app-card {
  background: #ffffff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-app-xs);
}
.app-card-lg {
  background: #ffffff;
  border: 1px solid var(--app-gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow-app-md);
}

/* Sidebar (verkleinerte Replica der App-Sidebar) */
.app-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--app-gray-200);
  display: flex;
  flex-direction: column;
}
.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-gray-100);
  font-weight: 700;
  color: var(--app-gray-900);
}
.app-sidebar-brand img { height: 22px; width: auto; }
.app-sidebar-brand .logo-icon { display: none; }
.app-sidebar-brand .logo-full { display: inline-block; }
.app-sidebar-section {
  padding: 14px 12px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--app-gray-400);
}
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--app-gray-700);
}
.app-nav-item .icon {
  width: 18px;
  height: 18px;
  color: var(--app-gray-500);
  flex: 0 0 auto;
}
.app-nav-item.active {
  background: var(--brand-50);
  color: var(--brand-500);
}
.app-nav-item.active .icon { color: var(--brand-500); }

/* Topbar */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--app-gray-200);
  background: #ffffff;
  gap: 12px;
}
.app-topbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: var(--app-gray-50);
  border: 1px solid var(--app-gray-200);
  border-radius: 8px;
  font-size: 12px;
  color: var(--app-gray-400);
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
}
.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--app-gray-200);
  background: #ffffff;
  color: var(--app-gray-500);
}
.app-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* Page header (H1 + Subline + Action) */
.app-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 18px 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.app-page-head h1,
.app-page-head .app-page-title {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  color: var(--app-gray-900);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.app-page-head .sub {
  font-size: 12px;
  color: var(--app-gray-500);
  margin-top: 2px;
}

/* KPI Cards */
.app-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  min-width: 0;
}
.app-kpi .label {
  font-size: 11px;
  color: var(--app-gray-500);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-kpi .value {
  font-size: 22px;
  font-weight: 700;
  color: var(--app-gray-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.app-kpi .delta {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  align-self: flex-start;
}
.app-kpi .delta.up   { color: var(--app-success-600); background: var(--app-success-50); }
.app-kpi .delta.down { color: var(--app-error-500);   background: var(--app-error-50); }

/* Buttons (App-Stil) */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--brand-500);
  color: #fff;
}
.app-btn:hover { background: var(--brand-600); }
.app-btn-ghost {
  background: #fff;
  border-color: var(--app-gray-200);
  color: var(--app-gray-700);
}

/* Pills / Badges */
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--app-gray-100);
  color: var(--app-gray-700);
  border: 1px solid var(--app-gray-200);
}
.app-badge-brand   { background: var(--brand-50);  color: var(--brand-700);  border-color: var(--brand-200); }
.app-badge-success { background: var(--app-success-50); color: var(--app-success-600); border: 1px solid #c5e9d2; }
.app-badge-warn    { background: var(--app-warning-50); color: #b54708; border: 1px solid #fee0a3; }
.app-badge-error   { background: var(--app-error-50); color: var(--app-error-500); border: 1px solid #fbcdca; }

/* Kanban Card (App-Style) */
.app-task {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  box-shadow: var(--shadow-app-xs);
}
.app-task .title {
  font-size: 12px;
  font-weight: 600;
  color: var(--app-gray-900);
  line-height: 1.35;
}
.app-task .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--app-gray-500);
}

/* Chat Bubble (Bruno-Style aus der App) */
.app-bubble {
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.45;
}
.app-bubble.user {
  background: var(--app-gray-100);
  color: var(--app-gray-900);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.app-bubble.bruno {
  background: var(--brand-500);
  color: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 6px 20px -6px rgba(70, 95, 255, 0.45);
}
.app-bubble.bruno .role {
  font-size: 10px;
  font-weight: 600;
  opacity: .85;
  margin-bottom: 2px;
  display: block;
}

/* Typografie-Helper */
.app-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--app-gray-400);
}
.app-num {
  font-variant-numeric: tabular-nums;
}

/* Sparkline / Mini-Bars */
.app-bar {
  background: var(--app-gray-100);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.app-bar > i {
  display: block;
  height: 100%;
  background: var(--brand-500);
  border-radius: 4px;
}

/* Avatar-Stack */
.app-stack { display: inline-flex; }
.app-stack .app-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
  border: 2px solid #fff;
  margin-left: -6px;
}
.app-stack .app-avatar:first-child { margin-left: 0; }

/* =========================================================
   Hero-Mockup Layout-Overrides
   Wir nutzen das vorhandene .hero-mockup-Wrapper-Setup
   (border + shadow), tauschen aber den Inhalt komplett.
   ========================================================= */

/* Outer-Frame fuer den Hero auf Outfit umstellen */
.hero-mockup.app-frame { font-family: "Outfit", system-ui, sans-serif; }

/* Grid: 220px Sidebar + Main */
.app-mock {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  min-height: 540px;
  background: #ffffff !important;
}
body[data-hero="split"] .app-mock {
  grid-template-columns: 200px minmax(0, 1fr) !important;
  min-height: 520px;
}

.app-mock .app-sidebar {
  padding: 0 0 12px;
  background: #ffffff;
  border-right: 1px solid var(--app-gray-200);
}
.app-mock .app-main {
  display: flex;
  flex-direction: column;
  background: var(--app-gray-50);
  min-width: 0;
}
.app-mock .app-page-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px 20px;
}

/* KPI Row - default 2 Spalten (4 Cards in 2x2). 1x4 fuehrt bei den
   typischen Mockup-Breiten zu hashlich abgeschnittenen Labels. */
.app-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.app-kpi .kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-kpi .kpi-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Bruno Briefing Card (Replica der bruno-insights-widget) */
.app-bruno-card {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-bruno-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-bruno-card .bruno-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-bruno-card .title-text {
  font-weight: 600;
  font-size: 13px;
  color: var(--brand-900);
}
.app-bruno-card .time {
  margin-left: auto;
  font-size: 11px;
  color: var(--brand-700);
  opacity: .7;
}
.app-bruno-card .summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--brand-900);
  margin: 0;
}
.app-bruno-card .summary b { color: var(--brand-700); font-weight: 700; }
.app-bruno-card .mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.app-bruno-card .ms {
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}
.app-bruno-card .ms .n {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-700);
  line-height: 1.1;
}
.app-bruno-card .ms .l {
  font-size: 10px;
  color: var(--brand-600);
}
.app-bruno-card .ms.warn .n { color: var(--app-error-500); }
.app-bruno-card .ms.warn .l { color: var(--app-error-500); }

/* Hero: Bleed-out auf Desktop (Mockup geht ueber den Container hinaus) */
@media (min-width: 1100px) {
  body[data-hero="split"] .hero-mockup {
    margin-right: -80px;
  }
}

/* (Old @media max-width:720px block entfernt - alle Mobile-Hero-Regeln
   leben jetzt im konsolidierten @media (max-width:860px)-Block weiter
   unten.) */

/* =========================================================
   Bento section -  App-Look harmonisieren
   ========================================================= */

/* Karten-Surface auf App-Spec */
.bento .b {
  border-radius: 16px;
  border: 1px solid var(--app-gray-200);
  background: #ffffff;
  box-shadow: var(--shadow-app-sm);
  font-family: "Outfit", system-ui, sans-serif;
}
.bento .b h3 {
  color: var(--app-gray-900);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.bento .b > p {
  color: var(--app-gray-500);
  font-size: 14px;
  line-height: 1.55;
}

/* Icon-Tiles in App-Brand-Farben */
.bento .b .b-icon {
  border-radius: 12px;
}
.bento .b .b-icon.blue   { background: var(--brand-50);  color: var(--brand-600); }
.bento .b .b-icon.teal   { background: #ecfdf5;          color: #047857; }
.bento .b .b-icon.orange { background: var(--app-warning-50); color: #b54708; }
.bento .b .b-icon.violet { background: #eef2ff;          color: #4338ca; }
.bento .b .b-icon.green  { background: var(--app-success-50); color: var(--app-success-600); }

/* Bruno-Karte (dark) */
.bento .b-bruno {
  background: linear-gradient(135deg, var(--app-gray-900) 0%, var(--brand-950) 100%);
  border: 1px solid rgba(70, 95, 255, 0.25);
  color: #fff;
  box-shadow: 0 12px 32px -16px rgba(70, 95, 255, 0.55);
}
.bento .b-bruno h3 { color: #fff; }
.bento .b-bruno p  { color: #b8bcd9; }
.bento .b-bruno .b-icon { background: rgba(70, 95, 255, .18); color: #fff; }

/* Bruno-Pills (Channel-Liste) */
.b-bruno-pills span {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #d6daf5;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bruno Live-Feed (Visual rechts) -> App-Card-Look */
.bbv-feed {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  font-family: "Outfit", system-ui, sans-serif;
}
.bbv-feed-head {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.bbv-feed-head .bbv-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--app-success-500);
  display: inline-block; margin-right: 6px;
  box-shadow: 0 0 0 4px rgba(18,183,106,.18);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 4px rgba(18,183,106,.18); }
  50%     { box-shadow: 0 0 0 7px rgba(18,183,106,.10); }
}
.bbv-feed-row {
  font-size: 12px;
  color: #e3e6f7;
}
.bbv-feed-row .bbv-tick {
  background: var(--brand-500);
  color: #fff;
  width: 18px; height: 18px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bbv-feed-row .bbv-sub { color: #9aa1c9; font-size: 11px; }

/* Mini-Visual: Tasks-Liste (App-Tasks-Look) */
.bp-tasks {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-app-xs);
  font-family: "Outfit", sans-serif;
}
.bp-tasks .bp-tabs {
  display: flex;
  gap: 4px;
  font-size: 11px;
  margin-bottom: 8px;
}
.bp-tasks .bp-tabs span {
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--app-gray-500);
  display: inline-flex;
  gap: 4px;
}
.bp-tasks .bp-tabs span.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.bp-tasks .bp-list { display: flex; flex-direction: column; gap: 4px; }
.bp-tasks .bp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--app-gray-700);
  background: var(--app-gray-50);
}
.bp-tasks .bp-item.done {
  color: var(--app-gray-400);
  text-decoration: line-through;
}
.bp-tasks .bp-check {
  width: 16px; height: 16px;
  border-radius: 5px;
  background: var(--brand-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bp-tasks .bp-check.empty { background: transparent; border: 1.5px solid var(--app-gray-300); }

/* Mini-Visual: DSGVO-Pills */
.bp-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.bp-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: "Outfit", sans-serif;
  border: 1px solid transparent;
}

/* Mini-Visual: Bar-Chart */
.bp-chart {
  display: flex; gap: 6px; align-items: flex-end;
  height: 96px; margin-top: 14px;
  padding: 8px 4px;
  background: linear-gradient(180deg, transparent, var(--app-gray-50));
  border-radius: 10px;
}
.bp-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  border-radius: 4px 4px 0 0;
  min-height: 8px;
  opacity: .9;
  transition: opacity .2s;
}
.bp-bar:hover { opacity: 1; }
.bp-chart-axis {
  display: flex;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  color: var(--app-gray-400);
  margin-top: 4px;
}
.bp-chart-axis span { flex: 1; text-align: center; }

/* Mini-Visual: Live Document Collaboration */
.bp-collab {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  padding: 12px;
  margin-top: 14px;
  font-family: "Outfit", sans-serif;
  box-shadow: var(--shadow-app-xs);
}
.bp-collab-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-gray-100);
  margin-bottom: 10px;
}
.bp-collab-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.bp-collab-title { color: var(--app-gray-900); }
.bp-collab-sub   { color: var(--app-gray-500); font-family: "Outfit", sans-serif; }
.bp-stack { margin-left: auto; display: inline-flex; }
.bp-stack .bp-av {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid #fff;
  margin-left: -6px;
  font-size: 10px; font-weight: 600;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.bp-stack .bp-av:first-child { margin-left: 0; }
.bp-collab-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; margin-top: 10px;
  border-top: 1px solid var(--app-gray-100);
  font-size: 11px;
  color: var(--app-gray-600);
}

/* =========================================================
   Architektur-Slider VISUALS (vis.blade.php) - App-Look
   Alle Visuals laufen in einem .arch-vis Wrapper. Wir
   uebersteuern jede vorhandene Klasse mit App-Tokens.
   ========================================================= */

/* Outfit-Font fuer alle Visuals + krisper Kontrast */
.arch-vis,
.arch-vis * {
  font-family: "Outfit", system-ui, sans-serif !important;
}
.arch-vis .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; }

/* ==================== Kanban (App-Style Tasks) ==================== */
.arch-vis .kanban .col {
  background: var(--app-gray-50);
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  padding: 12px;
  box-shadow: none;
}
.arch-vis .kanban .col :is(h6, .vis-h) {
  font-family: "Outfit", sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--app-gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.arch-vis .kanban .card {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--app-gray-700);
  box-shadow: var(--shadow-app-xs);
  font-weight: 500;
}
.arch-vis .kanban .card .tag {
  font-family: "Outfit", sans-serif !important;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 7px;
}
.arch-vis .kanban .card.moving {
  background: var(--brand-50);
  border-color: var(--brand-300);
  box-shadow: 0 8px 24px -8px rgba(70, 95, 255, 0.45);
}

/* ==================== Email / Listen ==================== */
.arch-vis .email-list { gap: 8px; }
.arch-vis .email-row {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-app-xs);
  gap: 12px;
}
.arch-vis .email-row .who {
  color: var(--app-gray-900);
  font-weight: 600;
  font-size: 12.5px;
}
.arch-vis .email-row .subj {
  color: var(--app-gray-500);
  font-size: 12px;
}
.arch-vis .email-row .lbl {
  font-family: "Outfit", sans-serif !important;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0;
}
.arch-vis .lbl-invoice { background: var(--app-warning-50); color: #b54708; }
.arch-vis .lbl-support { background: var(--brand-50);       color: var(--brand-700); }
.arch-vis .lbl-spam    { background: var(--app-gray-100);   color: var(--app-gray-600); }
.arch-vis .lbl-lead    { background: var(--app-success-50); color: var(--app-success-600); }
.arch-vis .email-row.new {
  background: var(--brand-50);
  border-color: var(--brand-200);
}

/* ==================== Invoice / Daten-Tabelle ==================== */
.arch-vis .invoice {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-app-xs);
}
.arch-vis .invoice .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--app-gray-100);
  color: var(--app-gray-700);
}
.arch-vis .invoice .row span { color: var(--app-gray-500); }
.arch-vis .invoice .row b    { color: var(--app-gray-900); font-weight: 600; }
.arch-vis .invoice .row:last-child {
  border-bottom: 0;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--app-gray-200);
  font-weight: 700;
}

/* ==================== Vault / Secrets ==================== */
.arch-vis .vault {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-app-xs);
}
.arch-vis .vault .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--app-gray-50);
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--app-gray-700);
}
.arch-vis .vault .row span:first-child { color: var(--app-gray-900); font-weight: 600; }
.arch-vis .vault .mask {
  font-family: ui-monospace, monospace !important;
  color: var(--app-gray-500);
  font-size: 11px;
}

/* ==================== BI / KPI + Bars ==================== */
.arch-vis .bi {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-app-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.arch-vis .bi :is(h6, .vis-h) {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--app-gray-500);
  margin-bottom: 4px;
}
.arch-vis .bi .bigval {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-gray-900);
  font-variant-numeric: tabular-nums;
}
.arch-vis .bi .delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--app-success-600);
  background: var(--app-success-50);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 4px;
}
.arch-vis .bi .chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 70px;
  padding: 4px 0;
  border-radius: 8px;
}
.arch-vis .bi .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  border-radius: 3px 3px 0 0;
  min-height: 6px;
}

/* ==================== Calendar (Wochenansicht) ==================== */
.arch-vis .cal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.arch-vis .cal .day {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  padding: 8px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-app-xs);
}
.arch-vis .cal .day :is(h6, .vis-h) {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--app-gray-500);
  margin-bottom: 4px;
}
.arch-vis .cal .evt {
  background: var(--brand-50);
  color: var(--brand-700);
  border-left: 3px solid var(--brand-500);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
}
.arch-vis .cal .evt.conflict {
  background: var(--app-error-50);
  color: var(--app-error-500);
  border-left-color: var(--app-error-500);
}

/* ==================== Chat workspace ==================== */
.arch-vis .chat-workspace {
  border-radius: 12px;
  border: 1px solid var(--app-gray-200);
  box-shadow: var(--shadow-app-sm);
}
.arch-vis .chw-side {
  background: var(--app-gray-50);
  border-right: 1px solid var(--app-gray-200);
}
.arch-vis .chw-ws-logo { background: var(--brand-500); }
.arch-vis .chw-group {
  font-family: "Outfit", sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--app-gray-400);
  letter-spacing: .06em;
}
.arch-vis .chw-item {
  font-size: 12.5px;
  color: var(--app-gray-700);
  padding: 6px 10px;
  border-radius: 8px;
  margin: 2px 0;
}
.arch-vis .chw-item.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.arch-vis .chw-item.guest { color: var(--app-success-600); }
.arch-vis .chw-bdg {
  background: var(--app-error-500);
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .chw-guest {
  background: var(--app-success-50);
  color: var(--app-success-600);
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .chw-av { border-radius: 6px; font-family: "Outfit", sans-serif !important; }
.arch-vis .chw-av.bruno-av {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.arch-vis .chw-head { background: #fff; border-bottom: 1px solid var(--app-gray-200); }
.arch-vis .chw-pill {
  background: var(--app-gray-50);
  border: 1px solid var(--app-gray-200);
  border-radius: 6px;
  color: var(--app-gray-600);
}
.arch-vis .chw-meta b { color: var(--app-gray-900); }
.arch-vis .chw-text { color: var(--app-gray-700); }
.arch-vis .chw-ext {
  background: var(--app-success-50);
  color: var(--app-success-600);
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .chw-ai {
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .chw-input {
  background: #fff;
  border-top: 1px solid var(--app-gray-200);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--app-gray-500);
  display: flex; align-items: center; gap: 10px;
}
.arch-vis .chw-at {
  margin-left: auto;
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* ==================== Meet (Video Tiles) ==================== */
.arch-vis .meet { gap: 10px; }
.arch-vis .meet .tile {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--app-gray-800), var(--app-gray-900)) !important;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: grid;
  place-items: center;
  min-height: 100px;
  box-shadow: var(--shadow-app-md);
}
.arch-vis .meet .tile:first-child {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900)) !important;
}

/* ==================== Drive (File Browser) ==================== */
.arch-vis .drive {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-app-sm);
  overflow: hidden;
}
.arch-vis .drive-bread {
  background: var(--app-gray-50);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--app-gray-500);
  border-bottom: 1px solid var(--app-gray-200);
}
.arch-vis .drive-bread b { color: var(--app-gray-900); }
.arch-vis .drive-side {
  background: var(--app-gray-50);
  border-right: 1px solid var(--app-gray-200);
}
.arch-vis .drive-group {
  font-family: "Outfit", sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-gray-400);
  padding: 8px 10px 4px;
}
.arch-vis .drive-row {
  font-size: 12px;
  color: var(--app-gray-700);
  padding: 6px 10px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 6px;
}
.arch-vis .drive-row.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.arch-vis .drive-badge.ai {
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 9px;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: auto;
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .drive-fi {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--app-gray-100);
  color: var(--app-gray-600);
  font-size: 14px;
}
.arch-vis .drive-fi.green  { background: #ecfdf5; color: #10b981; }
.arch-vis .drive-fi.blue   { background: var(--brand-50); color: var(--brand-600); }
.arch-vis .drive-fi.violet { background: #eef2ff; color: #4338ca; }
.arch-vis .drive-fi.orange { background: var(--app-warning-50); color: #b54708; }
.arch-vis .drive-name { font-size: 12px; color: var(--app-gray-900); font-weight: 600; }
.arch-vis .drive-meta { font-size: 10px; color: var(--app-gray-500); margin-top: 2px; }
.arch-vis .drive-bruno-note {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--app-gray-200);
  background: var(--brand-50);
  font-size: 12px;
  color: var(--brand-900);
}

/* ==================== Docs Editor ==================== */
.arch-vis .docs-editor {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-app-sm);
  overflow: hidden;
}
.arch-vis .de-toolbar,
.arch-vis .de-style {
  background: var(--app-gray-50);
  border-bottom: 1px solid var(--app-gray-200);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--app-gray-600);
}
.arch-vis .de-style { padding: 6px 12px; gap: 8px; font-weight: 600; }
.arch-vis .de-share {
  background: var(--brand-500);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}
.arch-vis .de-av {
  width: 22px; height: 22px;
  border-radius: 999px;
  color: #fff;
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 600;
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .de-page { padding: 16px 20px; }
.arch-vis .de-h1 {
  font-size: 18px;
  color: var(--app-gray-900);
  font-weight: 700;
  margin-bottom: 8px;
}
.arch-vis .de-h2 {
  font-size: 14px;
  color: var(--app-gray-900);
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 6px;
}
.arch-vis .de-p {
  font-size: 12.5px;
  color: var(--app-gray-700);
  line-height: 1.55;
  margin-bottom: 10px;
}
.arch-vis .de-suggest {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 3px solid var(--brand-500);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
}
.arch-vis .de-sug-meta {
  font-size: 11px;
  color: var(--brand-700);
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.arch-vis .de-sug-text {
  font-size: 12px;
  color: var(--brand-900);
}
.arch-vis .de-cursor {
  color: var(--brand-500);
  animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ==================== Architektur Slider Frame ==================== */
.slide-visual {
  background: var(--app-gray-50) !important;
  border-color: var(--app-gray-200) !important;
  border-radius: 14px !important;
}
.vis-topbar {
  border-bottom: 1px solid var(--app-gray-200) !important;
}
.vis-topbar .vis-ic {
  background: #fff;
  border-color: var(--app-gray-200) !important;
  border-radius: 8px !important;
}
.vis-topbar .vis-title {
  font-family: "Outfit", sans-serif !important;
  color: var(--app-gray-900);
  font-weight: 700;
}
.vis-topbar .vis-sub {
  font-family: "Outfit", sans-serif !important;
  color: var(--app-gray-500);
  font-weight: 500;
}
.vis-topbar .vis-stat {
  font-family: "Outfit", sans-serif !important;
  background: var(--app-success-50) !important;
  color: var(--app-success-600) !important;
  font-weight: 600;
  font-size: 10.5px !important;
}
.vis-topbar .vis-stat::before { background: var(--app-success-500); }
.vis-topbar .vis-stat.vis-stat--planned { background: #fef3c7 !important; color: #b45309 !important; }
.vis-topbar .vis-stat.vis-stat--planned::before { background: #d97706; animation: none; }

/* =========================================================
   Feature Deep-Dive Vis Wrapper + Spezial-Visuals
   ========================================================= */

.feature-vis {
  background: var(--app-gray-50) !important;
  border: 1px solid var(--app-gray-200) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-app-sm);
}

/* Disclaimer unter den 5 Feature-Mockups: wie Hero (klein, Sans — kein Mono) */
.feature-vis-wrap .vis-caption {
  font-size: 10px !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 400 !important;
  color: var(--app-gray-500) !important;
  padding: 6px 4px 0 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}

.arch-vis .vis-header {
  font-family: "Outfit", sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-gray-500);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--app-gray-200);
}

/* Bruno chat bubbles (im Feature 'chat') */
.arch-vis .chat {
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .chat .ch {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--app-gray-800);
  box-shadow: var(--shadow-app-xs);
  border-bottom-left-radius: 4px;
}
.arch-vis .chat .ch.user {
  background: var(--app-gray-100);
  border-color: var(--app-gray-200);
  color: var(--app-gray-900);
  align-self: flex-end;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.arch-vis .chat .ch:not(.user) {
  background: var(--brand-500);
  border-color: var(--brand-600);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(70, 95, 255, .55);
}
.arch-vis .chat .ch .t {
  font-family: "Outfit", sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.78);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.arch-vis .chat .ch.user .t { color: var(--app-gray-500); }

/* Action-Chips unter dem Chat */
.arch-vis .chat + div .chip,
.arch-vis .feature-vis .chip {
  background: var(--brand-50) !important;
  border: 1px solid var(--brand-200) !important;
  color: var(--brand-700) !important;
  border-radius: 999px !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 600;
  font-size: 11px;
}

/* =========================================================
   Bruno-Note (App-Style Callout, ohne Inline-Styles)
   ========================================================= */
.bruno-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: "Outfit", sans-serif !important;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid;
}
.bruno-note .bn-avatar {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bruno-note .bn-text { flex: 1; }
.bruno-note .bn-text b { font-weight: 700; }

.bruno-note-info  { background: var(--brand-50);       border-color: var(--brand-200);   color: var(--brand-900); }
.bruno-note-ok    { background: var(--app-success-50); border-color: #c5e9d2;            color: var(--app-success-600); }
.bruno-note-warn  { background: var(--app-warning-50); border-color: #fee0a3;            color: #b54708; }
.bruno-note-error { background: var(--app-error-50);   border-color: #fbcdca;            color: var(--app-error-500); }
.bruno-note-muted { background: var(--app-gray-50);    border-color: var(--app-gray-200); color: var(--app-gray-600); }

/* =========================================================
   Vis-Specific App-Look Adjustments
   (Klassen die durch das Refactor von vis.blade.php neu sind)
   ========================================================= */

/* --- chat-workspace meta --- */
.arch-vis .chw-ws-meta { overflow: hidden; }
.arch-vis .chw-ws-meta .ws-name {
  font-weight: 600; font-size: 12px; color: var(--app-gray-900);
}
.arch-vis .chw-ws-meta .ws-sub {
  font-size: 10px; color: var(--app-gray-500); font-family: "Outfit", sans-serif !important;
}
.arch-vis .chw-channel { font-weight: 600; font-size: 13px; color: var(--app-gray-900); }
.arch-vis .chw-channel-sub { font-size: 11px; color: var(--app-gray-500); margin-top: 2px; }
.arch-vis .chw-pills { display: inline-flex; gap: 6px; }
.arch-vis .chw-time { color: var(--app-gray-400); font-size: 10px; }
.arch-vis .chw-placeholder { color: var(--app-gray-400); }
.arch-vis .chw-ac {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .chw-plus {
  width: 22px; height: 22px;
  background: var(--app-gray-100);
  color: var(--app-gray-600);
  border-radius: 6px;
  display: inline-grid; place-items: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.arch-vis .chw-av.av-violet { background: linear-gradient(135deg, #7c3aed, #4338ca); }
.arch-vis .chw-av.av-green  { background: linear-gradient(135deg, #10b981, #047857); }

/* --- meet (App-style video tiles) --- */
.arch-vis .meet-stack { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.arch-vis .meet { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; min-height: 0; flex: 0 0 auto; }
.arch-vis .meet .tile-col { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; }
.arch-vis .meet .tile.main {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900)) !important;
  font-size: 36px;
  min-height: 140px;
}
.arch-vis .meet-transcript {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--app-gray-700);
  box-shadow: var(--shadow-app-xs);
}
.arch-vis .meet-transcript .mt-head {
  font-family: "Outfit", sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-error-500);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.arch-vis .meet-transcript .mt-rec {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--app-error-500);
  box-shadow: 0 0 0 4px rgba(240,68,56,.18);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.arch-vis .meet-transcript .mt-line {
  margin-top: 4px;
  color: var(--app-gray-700);
  font-size: 12px;
}
.arch-vis .meet-transcript .mt-line b { color: var(--app-gray-900); font-weight: 600; }

/* --- BI: Layout/Grid --- */
.arch-vis .bi-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arch-vis .bi-kpi { background: var(--app-gray-50); border-radius: 10px; padding: 10px 12px; }
.arch-vis .bi-axis {
  display: flex;
  font-size: 10px;
  color: var(--app-gray-400);
  font-family: "Outfit", sans-serif !important;
}
.arch-vis .bi-axis span { flex: 1; text-align: center; }

/* --- ERP row warn/err --- */
.arch-vis .invoice .row b.row-warn { color: var(--app-warning-500); }
.arch-vis .invoice .row b.row-err  { color: var(--app-error-500); }

/* --- Docs editor neue klassen --- */
.arch-vis .de-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.arch-vis .de-av.av-violet { background: linear-gradient(135deg, #7c3aed, #4338ca); }
.arch-vis .de-av.av-green  { background: linear-gradient(135deg, #10b981, #047857); }
.arch-vis .de-av.av-bruno  { width: 16px; height: 16px; font-size: 9px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.arch-vis .de-sep { color: var(--app-gray-300); }
.arch-vis .de-time { color: var(--brand-600); margin-left: 4px; font-weight: 500; opacity: .8; }

/* --- Vault & Email row labels override .lbl --- */
.arch-vis .vault .row span.mask { color: var(--app-gray-500); }

/* --- Fallback --- */
.arch-vis .vis-fallback {
  display: flex; align-items: center; justify-content: center;
  color: var(--app-gray-400);
  font-family: "Outfit", sans-serif !important;
  font-size: 12px;
  height: 100%;
}

/* =========================================================
   Architektur-Slider auf Mobile/Tablet (Phone-Frame Modus)
   site.css aktiviert den Phone-Frame ab 860px - alle Visuals
   muessen exakt im selben Bereich responsive werden. Wir
   forcen alles mit hoher Specificity, damit aeltere Regeln
   aus site.css/site-mobile.css nicht mehr durchschlagen.
   ========================================================= */
/* Phone-Body-Hoehen-Cap nur im echten Phone-Frame (≤720px). */
@media (max-width: 720px) {
  .slide-visual > .vis-body.arch-vis,
  .slide-visual .vis-body.arch-vis {
    padding: 12px 14px 14px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    height: var(--mobile-mockup-body-height, 400px) !important;
    min-height: var(--mobile-mockup-body-height, 400px) !important;
    max-height: var(--mobile-mockup-body-height, 400px) !important;
    flex: 0 0 auto !important;
  }
  .feature-vis.arch-vis {
    padding: 12px 14px 14px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    min-height: var(--mobile-mockup-body-height, 400px) !important;
    max-height: var(--mobile-mockup-body-height, 400px) !important;
    box-sizing: border-box !important;
  }
}

/* Tablet + Mobile: Widget-Layouts auf 1-Col (Kanban, Chat, Drive, Cal, Meet, …).
   Phone-Chrome/Groesse kommt erst ≤720px; hier nur innere Widget-Umformung. */
@media (max-width: 860px) {

  /* ============ KANBAN / PIPELINE (fynoCRM) ============
     Spalten klar voneinander trennen: jede Col bekommt App-Card-
     Optik mit eigenem Hintergrund + Padding + Border.

     Wichtig: .kanban hat global flex:1 1 auto — im Phone-Frame bekommt
     es dann eine maximale Höhe; die Spalten schrumpfen (flex-shrink:1)
     und mit overflow:visible läuft der Inhalt in die nächste Sektion.
     Kanban nur so hoch wie Inhalt; Scroll passiert auf .vis-body. */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .kanban {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    width: 100%;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .kanban .col {
    max-height: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
    background: var(--app-gray-50) !important;
    border: 1px solid var(--app-gray-200) !important;
    border-radius: 12px !important;
    margin: 0 !important;
    min-height: auto !important;
    width: 100%;
    box-sizing: border-box;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .kanban .col :is(h6, .vis-h) {
    margin-bottom: 8px !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .kanban .card.moving {
    transform: none !important;
    animation: app-card-pulse 2.4s ease-in-out infinite !important;
    background: var(--brand-50) !important;
    border-color: var(--brand-300) !important;
  }
  @keyframes app-card-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(70,95,255,0); }
    50%      { box-shadow: 0 0 0 6px rgba(70,95,255,.18); }
  }

  /* ============ CALENDAR ============
     site-mobile.css macht .cal zu vertikalen Day-Rows. Das ist OK,
     wir polieren es nur: jede Row als App-Card mit klarem Day-Label
     links und Event-Pills rechts. */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .cal {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .cal .day {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 12px !important;
    min-height: 48px !important;
    background: #fff !important;
    border: 1px solid var(--app-gray-200) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-app-xs) !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .cal .day :is(h6, .vis-h) {
    font-size: 12px !important;
    margin: 0 !important;
    min-width: 28px !important;
    color: var(--app-gray-500) !important;
    flex: 0 0 28px !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .cal .evt {
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    border-radius: 6px !important;
  }

  /* ============ BI ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .bi-kpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .bi .chart { height: 70px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .bi .bigval { font-size: 18px !important; }

  /* ============ MEET ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .meet { grid-template-columns: 1fr !important; gap: 8px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .meet .tile.main { min-height: 110px !important; font-size: 28px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .meet .tile-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ============ CHAT ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chat-workspace {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-side { display: none !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-main { flex: 1 1 auto !important; min-height: 0 !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-msgs {
    max-height: none !important;
    padding: 12px !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-input { padding: 10px 12px !important; flex: 0 0 auto !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-pills { display: none !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-actions { flex-direction: column !important; align-items: flex-start !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .chw-ac { width: 100% !important; text-align: left !important; }

  /* ============ DRIVE ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .drive-grid { grid-template-columns: 1fr !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .drive-side { display: none !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .drive-main { padding: 10px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .drive-item { padding: 10px !important; }

  /* ============ DOCS ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .de-toolbar > span:not(:first-child):not(.de-toolbar-actions) {
    display: none !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .de-toolbar { padding: 6px 10px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .de-page { padding: 14px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .de-h1 { font-size: 15px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .de-h2 { font-size: 13px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .de-p  { font-size: 12px !important; }

  /* ============ EMAIL/LIST ROWS ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .email-list { gap: 6px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .email-row {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .email-row .who {
    font-size: 12px !important;
    flex: 0 0 auto !important;
    max-width: 32% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .email-row .subj {
    font-size: 11.5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .email-row .lbl {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* ============ VAULT ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .vault { padding: 10px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .vault .row { padding: 8px 10px !important; font-size: 11.5px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .vault .mask { font-size: 10px !important; }

  /* ============ INVOICE / DATA TABLE (HR/ERP/Time/Craft) ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .invoice { padding: 14px !important; }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .invoice .row { font-size: 12.5px !important; padding: 8px 0 !important; }

  /* ============ BRUNO-NOTE kompakter im Phone-Frame ============ */
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .bruno-note {
    font-size: 11.5px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    margin-top: auto !important;
  }
  :is(.vis-body.arch-vis, .feature-vis.arch-vis) .bruno-note .bn-avatar {
    width: 20px !important; height: 20px !important; font-size: 10px !important;
  }

  /* Vis-Topbar im Phone-Frame: kein doppeltes Padding */
  .slide-visual .vis-topbar { padding: 12px 14px !important; }
  .slide-visual .vis-topbar .vis-stat { display: none !important; }
}

/* =========================================================
   Architektur-Slider Slide-Text: Luft zwischen Status, Titel,
   USP und Bullets (Tabs-Inhalte lesbarer).
   ========================================================= */
.slide-text { font-family: "Outfit", sans-serif; }
.slide-text .status {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 10px !important;
  font-family: "Outfit", sans-serif !important;
  background: var(--app-success-50);
  color: var(--app-success-600);
  font-weight: 600;
  border: 1px solid #c5e9d2;
}
.slide-text .status.status--planned {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
.slide-text h3 {
  font-family: "Outfit", sans-serif !important;
  color: var(--app-gray-900);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 10px !important;
}
.slide-text .usp {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--app-gray-600) !important;
  margin: 4px 0 20px !important;
  padding: 0 !important;
  max-width: 56ch;
  font-weight: 400;
}
.slide-text ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px !important;
}
.slide-text li {
  font-family: "Outfit", sans-serif !important;
  font-size: 14px !important;
  color: var(--app-gray-700) !important;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}
.slide-text li::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px;
  background: var(--brand-500);
  margin-top: 8px !important;
  flex-shrink: 0;
  display: block;
}
.slide-text .slide-nav { margin-top: 22px !important; }

/* =========================================================
   Kanban "in progress" Animation (uniform desktop + mobile)
   Die "moving"-Karte (Bento-Layout / Tech AG) bleibt in der
   In-Bearbeitung-Spalte stehen und pulsiert im Brand-Glow.
   Nach 5s erscheint ein gruener Check-Badge oben rechts ("Bruno
   schliesst Task ab") und fadet wieder weg. Kein translate mehr
   - das Bento rutschte sonst entweder aus dem Frame raus oder
   liess Spalten leer.
   ========================================================= */
.arch-vis .kanban .card.moving,
.feature-vis.arch-vis .kanban .card.moving {
  position: relative;
  z-index: 5;
  background: var(--brand-50) !important;
  border-color: var(--brand-300) !important;
  animation: arch-card-pulse 2.6s ease-in-out infinite !important;
  transform: none !important;
}
@keyframes arch-card-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(70,95,255,0);
    border-color: var(--brand-300);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(70,95,255,.18);
    border-color: var(--brand-500);
  }
}

/* Bruno-Check-Badge: erscheint nach 5s, bleibt sichtbar fuer 1s, fadet weg */
.arch-vis .kanban .card.moving::after,
.feature-vis.arch-vis .kanban .card.moving::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--app-success-500);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.5);
  animation: arch-check-pop 8s ease-in-out infinite;
  box-shadow: 0 4px 10px -2px rgba(18,183,106,.4);
}
@keyframes arch-check-pop {
  0%, 60%   { opacity: 0; transform: scale(.5); }
  62%       { opacity: 1; transform: scale(1.2); }
  68%, 88%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.5); }
}

/* =========================================================
   Slide-Layout Polish:
   - slide-text als Flex-Column, damit slide-nav (Dots+Arrows)
     fix am unteren Rand sitzt und nicht ein Riesen-Loch zwischen
     Bullets und Navigation entsteht.
   - slide bekommt etwas mehr Bullet-Atmung, damit 6 Bullets die
     Hoehe der 480px-Visualisierung besser fuellen.
   ========================================================= */
.slide { align-items: stretch !important; }
.slide.slide--arch { align-items: start !important; }
.slide-text {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.slide-text .slide-nav {
  margin-top: auto !important;
  padding-top: 20px;
}

/* Hinweis unter Architektur-Mockup (.arch-mockup-stack: Flex unter .slide-visual, nicht im Phone-Frame) */
.arch-mockup-stack .vis-caption--arch {
  padding: 8px 6px 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  font-family: "Geist Mono", monospace !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.slide-text ul {
  gap: 12px !important;
}
.slide-text li {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}

/* =========================================================
   Email-Liste: Bruno-Klassifikations-Animation
   - Jede Mail "fadet ein" mit kleinem Versatz (Bruno scant)
   - Labels (Lead/Rechnung/Support/Promo) poppen ueber 6s gestaffelt
     nacheinander - sieht aus wie Bruno klassifiziert in Echtzeit
   - Die Rechnung-Zeile pulsiert leicht (wird an fynoFinance forwarded)
   ========================================================= */
.arch-vis .email-list { perspective: 800px; }
.arch-vis .email-row {
  animation: email-fadein .6s ease-out backwards;
}
.arch-vis .email-row:nth-child(1) { animation-delay: 0s; }
.arch-vis .email-row:nth-child(2) { animation-delay: .1s; }
.arch-vis .email-row:nth-child(3) { animation-delay: .2s; }
.arch-vis .email-row:nth-child(4) { animation-delay: .3s; }

@keyframes email-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Labels poppen gestaffelt (loop) - "Bruno klassifiziert" */
.arch-vis .email-row .lbl {
  animation: lbl-classify 6s ease-in-out infinite;
  transform-origin: center;
}
.arch-vis .email-row:nth-child(1) .lbl { animation-delay: 0s; }
.arch-vis .email-row:nth-child(2) .lbl { animation-delay: .8s; }
.arch-vis .email-row:nth-child(3) .lbl { animation-delay: 1.6s; }
.arch-vis .email-row:nth-child(4) .lbl { animation-delay: 2.4s; }

@keyframes lbl-classify {
  0%, 5%   { transform: scale(.5); opacity: 0; }
  12%      { transform: scale(1.18); opacity: 1; }
  20%, 95% { transform: scale(1); opacity: 1; }
  100%     { transform: scale(1); opacity: 1; }
}

/* "new" Mail (Tech AG · Rechnung) wird an fynoFinance forwarded -
   subtiler Brand-Glow Loop */
.arch-vis .email-row.new {
  animation: email-fadein .6s ease-out backwards, email-forward 4s ease-in-out 1.4s infinite !important;
  background: var(--brand-50) !important;
  border-color: var(--brand-200) !important;
}
@keyframes email-forward {
  0%, 100% { box-shadow: 0 0 0 0 rgba(70,95,255,0); }
  50%      { box-shadow: 0 0 0 6px rgba(70,95,255,.16); }
}

/* =========================================================
   Hero-Mockup Wrapper:
   - Caption "Produkt-Vorschau ..." sitzt rechts UNTER dem Mockup
   - Tablet (720-1279px): 2-Col Layout bleibt, Sidebar collapsed
     auf Icon-Strip, Mockup laeuft ueber rechten Rand raus
   - Mobile (<=720px): kompaktes App-Look-Layout mit reduzierter
     Hoehe (Sidebar weg, kompakte KPIs, Briefing-Stats kompakt)
   ========================================================= */

.hero-mockup-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-mockup-wrap .hero-caption {
  font-size: 11px;
  color: var(--app-gray-500);
  font-family: "Outfit", sans-serif;
  text-align: right;
  padding-right: 4px;
  margin-top: 0;
  white-space: nowrap;
}

/* === Desktop split (>=1280px): Bleed-Over schon in site-mobile.css aktiv,
       Caption-Padding an den Bleed-Edge anpassen === */
@media (min-width: 1280px) {
  body[data-hero="split"] .hero-mockup-wrap .hero-caption,
  body:not([data-hero]) .hero-mockup-wrap .hero-caption {
    /* Bleed schiebt mockup ueber den rechten Rand. Caption MUSS innen
       bleiben, also soviel padding-right wie der mockup raussteht. */
    padding-right: calc(((100vw - 100%) / 2) + 40px);
  }
}

/* === Tablet (861-1279px): 2-Col-Layout im Hero erzwingen + Sidebar
       collapsen + Bleed-Over aktivieren ===
   Boundary 861 statt 721, damit es sauber zur site.css passt
   (Phone-Frame-Mode in site.css ist <=860px, alles darueber ist
   "Tablet+" mit voller Card-Optik). */
@media (min-width: 861px) and (max-width: 1279px) {
  body[data-hero="split"] .hero-inner,
  body:not([data-hero]) .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
    gap: 32px !important;
    align-items: start !important;
  }

  /* Mockup laeuft sichtbar ueber den rechten Container-Rand raus */
  body[data-hero="split"] .hero-mockup,
  body:not([data-hero]) .hero-mockup {
    margin-right: -40px !important;
    max-width: none !important;
  }

  /* Sidebar-Collapse - hoechste Specificity damit es gewinnt */
  body[data-hero="split"] .hero-mockup .app-mock,
  body:not([data-hero]) .hero-mockup .app-mock {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 460px !important;
  }

  /* Sidebar selbst */
  body[data-hero="split"] .hero-mockup .app-sidebar,
  body:not([data-hero]) .hero-mockup .app-sidebar {
    padding: 0 !important;
    overflow: hidden;
  }

  /* Brand-Block: nur das fyno-Logo (klein zentriert) */
  body[data-hero="split"] .hero-mockup .app-sidebar-brand,
  body:not([data-hero]) .hero-mockup .app-sidebar-brand {
    padding: 14px 8px !important;
    justify-content: center !important;
    border-bottom: 1px solid var(--app-gray-100);
  }
  /* Im Tablet-Mode: Vollogo aus, nur Icon */
  body[data-hero="split"] .hero-mockup .app-sidebar-brand .logo-full,
  body:not([data-hero]) .hero-mockup .app-sidebar-brand .logo-full {
    display: none !important;
  }
  body[data-hero="split"] .hero-mockup .app-sidebar-brand .logo-icon,
  body:not([data-hero]) .hero-mockup .app-sidebar-brand .logo-icon {
    display: inline-block !important;
    height: 26px !important;
    width: auto !important;
  }

  /* Section-Header ("Menue", "Bruno") komplett weg */
  body[data-hero="split"] .hero-mockup .app-sidebar-section,
  body:not([data-hero]) .hero-mockup .app-sidebar-section {
    display: none !important;
  }

  /* Nav-Item: nur Icon zentriert, Text-Label weg */
  body[data-hero="split"] .hero-mockup .app-nav-item,
  body:not([data-hero]) .hero-mockup .app-nav-item {
    margin: 4px 10px !important;
    padding: 8px !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  body[data-hero="split"] .hero-mockup .app-nav-item .label,
  body:not([data-hero]) .hero-mockup .app-nav-item .label {
    display: none !important;
  }
  body[data-hero="split"] .hero-mockup .app-nav-item .icon,
  body:not([data-hero]) .hero-mockup .app-nav-item .icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Caption rechts aussen halten - Bleed beachten */
  body[data-hero="split"] .hero-mockup-wrap .hero-caption,
  body:not([data-hero]) .hero-mockup-wrap .hero-caption {
    padding-right: 40px;
  }

  /* Topbar: Search-Pill schmaler, "Dashboard anpassen"-Button raus */
  body[data-hero="split"] .hero-mockup .app-topbar-search,
  body:not([data-hero]) .hero-mockup .app-topbar-search {
    max-width: 180px !important;
  }
  body[data-hero="split"] .hero-mockup .app-page-head .app-btn,
  body:not([data-hero]) .hero-mockup .app-page-head .app-btn {
    display: none !important;
  }

  /* Page-Head-Titel (h1-Altbestand + .app-page-title) kleiner damit nichts bricht */
  body[data-hero="split"] .hero-mockup .app-page-head h1,
  body:not([data-hero]) .hero-mockup .app-page-head h1,
  body[data-hero="split"] .hero-mockup .app-page-head .app-page-title,
  body:not([data-hero]) .hero-mockup .app-page-head .app-page-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  body[data-hero="split"] .hero-mockup .app-page-head .sub,
  body:not([data-hero]) .hero-mockup .app-page-head .sub {
    font-size: 11px !important;
  }
  body[data-hero="split"] .hero-mockup .app-page-head,
  body:not([data-hero]) .hero-mockup .app-page-head {
    padding: 14px 16px 8px !important;
  }

  /* KPIs: 2x2 statt 1x4, Labels einzeilig + sicher gegen Wraps */
  body[data-hero="split"] .hero-mockup .app-kpi-row,
  body:not([data-hero]) .hero-mockup .app-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body[data-hero="split"] .hero-mockup .app-kpi,
  body:not([data-hero]) .hero-mockup .app-kpi {
    padding: 10px 12px !important;
    gap: 4px !important;
    min-width: 0;
  }
  body[data-hero="split"] .hero-mockup .app-kpi .label,
  body:not([data-hero]) .hero-mockup .app-kpi .label {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-hero="split"] .hero-mockup .app-kpi .value,
  body:not([data-hero]) .hero-mockup .app-kpi .value {
    font-size: 17px !important;
  }
  body[data-hero="split"] .hero-mockup .app-kpi .delta,
  body:not([data-hero]) .hero-mockup .app-kpi .delta {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }
  body[data-hero="split"] .hero-mockup .app-kpi .kpi-icon,
  body:not([data-hero]) .hero-mockup .app-kpi .kpi-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto;
  }

  /* Bruno-Briefing: kompakter im Tablet-Rahmen */
  body[data-hero="split"] .hero-mockup .app-bruno-card,
  body:not([data-hero]) .hero-mockup .app-bruno-card {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  body[data-hero="split"] .hero-mockup .app-bruno-card .mini-stats,
  body:not([data-hero]) .hero-mockup .app-bruno-card .mini-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  body[data-hero="split"] .hero-mockup .app-bruno-card .ms,
  body:not([data-hero]) .hero-mockup .app-bruno-card .ms {
    padding: 6px 8px !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  body[data-hero="split"] .hero-mockup .app-bruno-card .ms .n,
  body:not([data-hero]) .hero-mockup .app-bruno-card .ms .n { font-size: 14px !important; }
  body[data-hero="split"] .hero-mockup .app-bruno-card .ms .l,
  body:not([data-hero]) .hero-mockup .app-bruno-card .ms .l { font-size: 10px !important; }
}

/* === Mobile (<=860px): saubere App-Card mit echtem Header-Logo
       + echtem Bottom-Nav - KEIN Phone-Frame-Border, weil der bei
       der Marketing-Site fehl am Platz wirkt. Layout ist 1-Col. === */
@media (max-width: 860px) {
  /* Hero-Inner zurueck auf 1-Col */
  body[data-hero="split"] .hero-inner,
  body:not([data-hero]) .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body[data-hero="split"] .hero-mockup,
  body:not([data-hero]) .hero-mockup {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Mockup: 100% volle Container-Breite, brutal mit body-Specificity
     erzwungen, damit alle alten Regeln aus site.css verlieren.
     Display block weil flex hier nichts mehr bringt (keine Pseudos). */
  body .hero-mockup-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .hero-mockup {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid var(--app-gray-200) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px -16px rgba(10, 11, 26, .2), 0 2px 4px rgba(10, 11, 26, .04) !important;
    position: relative !important;
  }
  /* Alle Pseudos auf hero-mockup killen (statusbar, fade-out gradient) */
  body[data-hero="split"] .hero-mockup::before,
  body[data-hero="split"] .hero-mockup::after,
  body:not([data-hero]) .hero-mockup::before,
  body:not([data-hero]) .hero-mockup::after,
  .hero-mockup::before,
  .hero-mockup::after {
    content: none !important;
    display: none !important;
  }

  /* Caption mittig + kompakter, immer 1-zeilig */
  .hero-mockup-wrap .hero-caption {
    text-align: center !important;
    padding-right: 0 !important;
    font-size: 10.5px !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Mockup-Inhalt: Sidebar weg, kompakte Topbar, KEIN min-height
     ACHTUNG Specificity: muss body[data-hero="split"] .app-mock
     schlagen (0,2,1), daher selber Body-Selektor + .hero-mockup. */
  body[data-hero="split"] .hero-mockup .app-mock,
  body:not([data-hero]) .hero-mockup .app-mock {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body[data-hero="split"] .hero-mockup .app-sidebar,
  body:not([data-hero]) .hero-mockup .app-sidebar {
    display: none !important;
  }

  /* Alle 4 KPIs in 2x2-Grid (gleich wie Tablet/Desktop) */
  .hero-mockup .app-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Topbar kompakter */
  .hero-mockup .app-topbar { padding: 8px 12px !important; }
  .hero-mockup .app-topbar-search { display: none !important; }
  .hero-mockup .app-icon-btn { width: 30px !important; height: 30px !important; }
  .hero-mockup .app-avatar { width: 26px !important; height: 26px !important; }

  /* Page-Head kompakt + 1-zeilig */
  .hero-mockup .app-page-head {
    padding: 10px 14px 4px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .hero-mockup .app-page-head h1,
  .hero-mockup .app-page-head .app-page-title {
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: normal;
  }
  .hero-mockup .app-page-head .sub { font-size: 11px !important; }
  .hero-mockup .app-page-head .app-btn { display: none !important; }

  .hero-mockup .app-page-body {
    padding: 0 12px 10px !important;
    gap: 10px !important;
  }

  /* KPIs auf 2 Cols, kompakter */
  .hero-mockup .app-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .hero-mockup .app-kpi {
    padding: 12px 14px !important;
    gap: 6px !important;
    min-width: 0;
  }
  .hero-mockup .app-kpi .label {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-mockup .app-kpi .value { font-size: 19px !important; }
  .hero-mockup .app-kpi .delta { font-size: 10px !important; padding: 1px 6px !important; }
  .hero-mockup .app-kpi .kpi-icon { width: 24px !important; height: 24px !important; flex: 0 0 auto; }

  /* Bruno-Briefing radikal kompakt: kurze Summary, kompakte Inline-Stats */
  .hero-mockup .app-bruno-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .hero-mockup .app-bruno-card .head { gap: 8px !important; }
  .hero-mockup .app-bruno-card .bruno-icon { width: 24px !important; height: 24px !important; }
  .hero-mockup .app-bruno-card .title-text { font-size: 12px !important; }
  .hero-mockup .app-bruno-card .time { font-size: 10px !important; }
  .hero-mockup .app-bruno-card .summary {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
  }
  /* Mini-Stats inline horizontal, keine Cards mehr - spart viel Hoehe */
  .hero-mockup .app-bruno-card .mini-stats {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
    margin: 0 !important;
  }
  .hero-mockup .app-bruno-card .ms {
    padding: 0 !important;
    background: transparent !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 4px !important;
  }
  .hero-mockup .app-bruno-card .ms .n { font-size: 13px !important; font-weight: 700; }
  .hero-mockup .app-bruno-card .ms .l { font-size: 10px !important; }

  /* Bleed-Over auf Mobile aus */
  .hero-mockup { margin-right: 0 !important; }

  /* Mobile-Brand im Topbar einblenden, links aussen */
  .hero-mockup .app-topbar { gap: 8px !important; }
  .hero-mockup .app-mobile-brand {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 4px;
  }
  .hero-mockup .app-mobile-brand img {
    height: 18px;
    width: auto;
  }
  /* Search im Topbar verstecken auf Mobile, Bell+Avatar bleiben */
  .hero-mockup .app-topbar-search { display: none !important; }

  /* Bottom-Nav als floating Overlay - Bruno-Card scrollt teils dahinter
     fuer den echten Mobile-App-Look. Mockup wird position:relative. */
  body .hero-mockup { position: relative !important; }
  .hero-mockup .app-bottom-nav {
    display: flex !important;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: 6px 4px;
    border-top: 1px solid var(--app-gray-200);
    background: #ffffff;
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    box-shadow: 0 -8px 16px -8px rgba(10, 11, 26, .08);
  }
  /* Page-Body bekommt etwas Padding-Bottom damit ein Teil der Bruno-Card
     unter der Bottom-Nav durchscheinen kann (50px statt voller 60px nav). */
  .hero-mockup .app-page-body {
    padding-bottom: 50px !important;
  }
  .hero-mockup .bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    color: var(--app-gray-500);
    font-size: 9.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    min-width: 0;
  }
  .hero-mockup .bn-item svg {
    width: 16px; height: 16px;
  }
  .hero-mockup .bn-item.active {
    color: var(--brand-500);
  }
  .hero-mockup .bn-item.bn-bruno {
    color: var(--brand-500);
  }
  .hero-mockup .bn-item.bn-bruno .bn-bruno-icon {
    width: 26px; height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px -2px rgba(70,95,255,.5);
    margin-top: -6px;
  }
  .hero-mockup .bn-item.bn-bruno .bn-bruno-icon svg {
    width: 14px; height: 14px;
  }
}

/* === Mobile + Tablet: Mobile-Brand und Bottom-Nav generell ausblenden === */
.app-mobile-brand { display: none; }
.app-bottom-nav { display: none; }

/* =========================================================
   Hero-CTAs ueber alle Viewports auf 1 Strategie:
   - <=860px: untereinander + fullwidth (was site.css nur bei <=720
     gemacht hat - jetzt konsistent mit unserem Mockup-Boundary)
   - >860px:  nebeneinander, flex-wrap:wrap als Safety-Net
   ========================================================= */
@media (max-width: 860px) {
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .hero-ctas .btn {
    justify-content: center !important;
    width: 100% !important;
  }
}
@media (min-width: 861px) {
  .hero-ctas { flex-wrap: wrap; }
  .hero-ctas .btn { flex: 0 0 auto; }
}

/* =========================================================
   Hero-Mockup Globale Aufraeumung:
   - "Dashboard anpassen"-Button wird in allen Viewports ausgeblendet
     (er passt visuell ohnehin nirgendwo sauber rein und wirkt im
     Marketing-Mockup wie Funktions-Lärm)
   - Page-Head bleibt 1 Spalte links
   ========================================================= */
.hero-mockup .app-page-head .app-btn { display: none !important; }
.hero-mockup .app-page-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.hero-mockup .app-page-head h1,
.hero-mockup .app-page-head .app-page-title {
  font-size: 16px !important;
  line-height: 1.25 !important;
}
.hero-mockup .app-page-head .sub { font-size: 12px !important; }

/* =========================================================
   Logos-Section: ein einziges Grid (kein Switcher mehr).
   Echte SVG-Logos mit grayscale + Opacity-Hover (Brand-Trust-
   Standard).
   ========================================================= */
.logos-section {
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 0 24px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.logos-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.logos-title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 600;
  max-width: 720px;
  font-family: "Outfit", sans-serif;
  color: var(--app-gray-900);
  letter-spacing: -0.015em;
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: #ffffff;
  border: 1px solid var(--app-gray-200);
  border-radius: 16px;
  overflow: hidden;
}
.logos-grid .logo-cell {
  display: grid;
  place-items: center;
  padding: 24px 20px;
  border-right: 1px solid var(--app-gray-100);
  border-bottom: 1px solid var(--app-gray-100);
  min-height: 220px;
}
/* 8 Logos = 4 Spalten x 2 Reihen */
.logos-grid .logo-cell:nth-child(4n) { border-right: 0; }
.logos-grid .logo-cell:nth-last-child(-n+4) { border-bottom: 0; }
.logos-grid .logo-cell img {
  max-width: 100%;
  max-height: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter .25s ease, opacity .25s ease;
}
.logos-grid .logo-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Tablet: 2 Spalten x 4 Reihen */
@media (max-width: 860px) {
  .logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-grid .logo-cell {
    padding: 24px 18px;
    min-height: 180px;
    border-right: 1px solid var(--app-gray-100) !important;
    border-bottom: 1px solid var(--app-gray-100) !important;
  }
  .logos-grid .logo-cell:nth-child(2n) { border-right: 0 !important; }
  .logos-grid .logo-cell:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .logos-grid .logo-cell img { max-height: 120px; }
}
/* Mobile */
@media (max-width: 480px) {
  .logos-section { padding: 0 16px; margin-top: 56px; margin-bottom: 56px; }
  .logos-grid .logo-cell {
    padding: 20px 12px;
    min-height: 130px;
  }
  .logos-grid .logo-cell img { max-height: 90px; }
  .logos-title { font-size: 18px; }
}

/* =========================================================
   Team-Karten: Portrait im 4:5-Format mit abgerundeten Ecken
   (16px Radius - matched die App-Card-Optik aus Bento/Hero-Mockup).
   ========================================================= */
.team-grid .person {
  align-items: stretch;
  text-align: left;
  padding: 24px !important;
}
.team-grid .ph {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: var(--app-gray-100) !important;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}
.team-grid .ph::before { display: none !important; }
.team-grid .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-grid .ph .initials {
  font-size: 64px !important;
  color: var(--app-gray-400);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.team-grid .person .role {
  margin-top: 6px;
}
.team-grid .person h4 {
  font-size: 20px !important;
}
.team-grid .person p {
  font-size: 14px;
  color: var(--app-gray-600);
}
.team-grid .person .tag-row {
  justify-content: flex-start;
}

@media (max-width: 720px) {
  .team-grid .person { padding: 18px !important; }
  .team-grid .ph { aspect-ratio: 1 / 1 !important; }
}

/* =========================================================
   Logos-Foot: "Alle Referenzen ansehen"-Link unter dem Grid
   ========================================================= */
.logos-foot {
  margin-top: 18px;
  text-align: center;
}
.logos-foot a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
  padding: 8px 4px;
  transition: color .2s ease;
}
.logos-foot a:hover {
  color: var(--brand-700);
}
.logos-foot a span:first-of-type {
  transition: transform .2s ease;
  display: inline-block;
}
.logos-foot a:hover span:first-of-type {
  transform: translateX(3px);
}
.logos-foot a .src {
  font-weight: 400;
  color: var(--app-gray-500);
  font-size: 12.5px;
}
@media (max-width: 480px) {
  .logos-foot a { font-size: 12px; flex-wrap: wrap; justify-content: center; }
  .logos-foot a .src { font-size: 11.5px; }
}

/* =========================================================
   Wide-Screen / TV-Optimierung:
   - Container skaliert fluid bis zu 1640px (statt fix 1240px)
   - Hero-Mockup bleed-out fuer ALLE 2-Col-Viewports (>=861px),
     nicht nur >=1280px. Bleed-Amount skaliert mit Viewport.
   ========================================================= */

/* Container fluid: 92vw bis maximal 1640px - so wird Content auf
   grossen Monitoren breiter, schmuegt aber nicht in 4K-Riesigkeit */
body .container {
  max-width: min(92vw, 1640px) !important;
  padding: 0 clamp(16px, 3vw, 40px) !important;
}
body .container-sm {
  max-width: min(92vw, 1100px) !important;
  padding: 0 clamp(16px, 3vw, 32px) !important;
}

/* Hero-Mockup Bleed-Out: aktiv ab 2-Col-Layout (>=861px), nicht
   erst ab 1280px. Bleed-Amount skaliert ueber clamp() mit dem
   Viewport - kleiner Bleed auf Tablet, grosser Bleed auf TV. */
@media (min-width: 861px) {
  body[data-hero="split"] .hero-mockup,
  body:not([data-hero]) .hero-mockup {
    margin-right: calc(((100vw - 100%) / -2) - clamp(20px, 3vw, 100px)) !important;
    max-width: none !important;
  }
  body[data-hero="split"] .hero-mockup::after,
  body:not([data-hero]) .hero-mockup::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 0;
    top: 0;
    bottom: 0;
    width: clamp(60px, 8vw, 160px) !important;
    background: linear-gradient(to right, transparent, #fafaf9 60%) !important;
    pointer-events: none;
  }
}

/* Hero-Section selber muss overflow:hidden haben, sonst macht der
   Bleed die ganze Page horizontal scrollbar. Sicherheits-Override. */
.hero { overflow: hidden !important; }

/* Sehr breite Bildschirme: Headlines + Sub-Text duerfen noch etwas
   atmen ohne die Lesbarkeit zu zerstoeren. h1 + sub bleiben bei
   sinnvollen Zeilenlaengen. */
@media (min-width: 1500px) {
  body .hero-text h1 {
    font-size: clamp(52px, 5.6vw, 104px) !important;
  }
  body .hero-text .hero-sub {
    font-size: clamp(17px, 1.4vw, 22px) !important;
    max-width: 56ch;
  }
}

/* Auf TV/4K-Monitoren (>=1920px): Hero darf auch breiter werden,
   Mockup wird groesser, alles atmet. */
@media (min-width: 1920px) {
  body .container { max-width: 1640px !important; }
  body .hero-text h1 { font-size: 96px !important; line-height: 1.05; }
}

/* =========================================================
   Compare-Block v2: zwei nebeneinander stehende App-Cards
   (statt 3-Spalten-Tabelle mit dunklem Gradient-Block).
   Links: roter Stack (Heute), Rechts: gruener Stack (Morgen).
   ========================================================= */
.cmp2 {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}

.cmp2-card {
  background: #ffffff;
  border: 1px solid var(--app-gray-200);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-app-sm);
  font-family: "Outfit", sans-serif;
}
.cmp2-old { background: #fffaf9; border-color: #fee0d8; }
.cmp2-new { background: var(--brand-50); border-color: var(--brand-200); }

.cmp2-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed currentColor;
  border-color: var(--app-gray-200);
}
.cmp2-old .cmp2-head { border-bottom-color: #fcd9d0; }
.cmp2-new .cmp2-head { border-bottom-color: var(--brand-200); }

.cmp2-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cmp2-icon-old { background: #fee2e2; color: #dc2626; }
.cmp2-icon-new { background: var(--brand-100); color: var(--brand-600); }

.cmp2-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--app-gray-500);
}
.cmp2-old .cmp2-label { color: #c2410c; }
.cmp2-new .cmp2-label { color: var(--brand-700); }

.cmp2-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--app-gray-900);
  letter-spacing: -0.015em;
  margin-top: 2px;
}

.cmp2-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.cmp2-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--app-gray-700);
  line-height: 1.45;
}
.cmp2-old .cmp2-list li .t {
  color: var(--app-gray-500);
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, .35);
  text-decoration-thickness: 1.5px;
}
.cmp2-list .dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  margin-top: 2px;
}
.cmp2-list .dot-old { background: #fee2e2; color: #dc2626; }
.cmp2-list .dot-new { background: var(--brand-100); color: var(--brand-600); }

.cmp2-total {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp2-total .sum {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  opacity: .7;
}
.cmp2-total-old {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}
.cmp2-total-new {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(70, 95, 255, .45);
}

/* Pfeil zwischen den Cards */
.cmp2-arrow {
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--brand-500);
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  user-select: none;
  padding: 0 4px;
}

/* Tablet/Mobile: untereinander, Pfeil dreht 90° */
@media (max-width: 860px) {
  .cmp2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cmp2-arrow {
    transform: rotate(90deg);
    padding: 8px 0;
    font-size: 28px;
  }
  .cmp2-card { padding: 22px; }
  .cmp2-title { font-size: 16px; }
  .cmp2-list li { font-size: 13.5px; }
}

/* Old fallback CSS aus site.css ist im Markup nicht mehr da -
   .cmp / .cmp-row / etc. werden nicht mehr gerendert. */

/* =========================================================
   Calculator-Modal: kompakter, damit alles ohne Scroll passt.
   ========================================================= */
body .modal {
  max-width: 720px !important;
  padding: 24px !important;
  max-height: 92vh !important;
}
body .modal h3 {
  font-size: 22px !important;
  margin-top: 4px !important;
}
body .modal > p {
  font-size: 13px !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

/* Slider-Reihen kompakter */
body .calc-field { margin-top: 12px !important; }
body .calc-field .row { margin-bottom: 4px !important; }
body .calc-field label { font-size: 13px !important; }

/* Output-Card kompakter */
body .calc-output {
  margin-top: 16px !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
}
body .calc-output :is(h3, h4) {
  font-size: 11px !important;
  margin-bottom: 12px !important;
}
body .calc-output .big-grid {
  gap: 12px !important;
}
body .calc-output .big {
  font-size: 28px !important;
}
body .calc-output .big-label {
  font-size: 11px !important;
}
body .calc-output .team {
  margin-top: 10px !important;
  padding-top: 10px !important;
  font-size: 12.5px !important;
}

/* Savings-Block: Year + Month nebeneinander statt untereinander */
body .calc-output .savings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #d7deff;
}
body .calc-output .savings-row .savings-year .big { color: var(--brand-500); font-size: 28px; }
body .calc-output .savings-row .savings-month .big { color: var(--brand-500); font-size: 22px; }

body .modal .btn {
  margin-top: 14px !important;
  padding: 12px 20px !important;
}

/* Mobile bleibt mit Scroll fallback */
@media (max-width: 720px) {
  body .calc-output .savings-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body .calc-output .big { font-size: 24px !important; }
  body .calc-output .savings-row .savings-month .big { font-size: 20px; }
}

/* =========================================================
   Calculator-Tabelle: klares Zeit/Geld-Aufschlüsseln
   ========================================================= */
.calc-output .calc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
}
.calc-output .calc-table thead th {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-gray-500);
  text-align: right;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--brand-200);
}
.calc-output .calc-table thead th:first-child { text-align: left; }
.calc-output .calc-table tbody td {
  padding: 7px 0;
  text-align: right;
  color: var(--app-gray-700);
  border-bottom: 1px dashed var(--brand-200);
}
.calc-output .calc-table tbody td:first-child {
  text-align: left;
  color: var(--app-gray-600);
  font-weight: 500;
}
.calc-output .calc-table tbody td b {
  color: var(--brand-700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc-output .calc-table tr.muted td b {
  color: var(--app-gray-600);
  font-weight: 600;
}
.calc-output .calc-table tr:last-child td {
  border-bottom: 0;
}
.calc-output .basis-note {
  font-size: 11px;
  color: var(--app-gray-500);
  margin-top: 6px;
  font-family: "Outfit", sans-serif;
}

/* Kosten-Tabelle: Total-Zeile prominent */
.calc-output .calc-table-cost tr.total td {
  border-top: 2px solid var(--brand-300);
  border-bottom: 0;
  padding-top: 12px;
  padding-bottom: 0;
}
.calc-output .calc-table-cost tr.total td:first-child {
  color: var(--app-gray-900);
  font-size: 14px;
}
.calc-output .calc-table-cost .big-total {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--brand-500) !important;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.1;
}
.calc-output .calc-table-cost .hint {
  font-size: 12px;
  color: var(--app-gray-500);
  font-weight: 400;
  display: inline-block;
  margin-left: 6px;
}
.calc-output .calc-table-cost .hint b {
  color: var(--brand-600) !important;
  font-weight: 700;
}
.calc-output .calc-table-cost tr.total .hint {
  display: block;
  margin-left: 0;
  margin-top: 2px;
}

/* Mobile: Tabelle bleibt 3-spaltig aber kompakter */
@media (max-width: 720px) {
  .calc-output .calc-table { font-size: 12.5px; }
  .calc-output .calc-table thead th { font-size: 9.5px; }
  .calc-output .calc-table-cost .big-total { font-size: 22px !important; }
}

/* =========================================================
   Calculator-Inputs v2: Number-Input + visueller Slider drunter.
   Beide bidirektional gekoppelt via syncCalc().
   ========================================================= */
.calc-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.calc-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-input .ci-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.calc-input label {
  font-family: "Outfit", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-gray-700);
}
.calc-input .ci-hint {
  font-size: 10.5px;
  color: var(--app-gray-400);
  font-family: "Outfit", sans-serif;
}
.calc-input .ci-row {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  padding: 0 12px;
  height: 40px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-input .ci-row:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(70, 95, 255, .12);
}
.calc-input input[type="number"] {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--app-gray-900);
  padding: 0;
  width: 100%;
  -moz-appearance: textfield;
}
.calc-input input[type="number"]::-webkit-outer-spin-button,
.calc-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc-input .ci-suffix {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  color: var(--app-gray-500);
  font-weight: 500;
  white-space: nowrap;
  margin-left: 8px;
}

/* Slider als visueller Position-Indicator */
.calc-input input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--app-gray-200);
  border-radius: 999px;
  outline: 0;
  margin: 4px 2px 0;
  cursor: pointer;
}
.calc-input input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--brand-500);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(70, 95, 255, .35);
  cursor: pointer;
  margin-top: -1px;
}
.calc-input input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--brand-500);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(70, 95, 255, .35);
  cursor: pointer;
}

/* Mobile: stack 1-spaltig */
@media (max-width: 720px) {
  .calc-inputs { grid-template-columns: 1fr; gap: 12px; }
  .calc-input .ci-row { height: 44px; }
  .calc-input input[type="number"] { font-size: 17px; }
}

/* =========================================================
   Inline Calculator-Section: groessere Card mit hellem
   Brand-Tint im Hintergrund, damit sich der Block visuell
   abhebt von Compare und Team.
   ========================================================= */
.calc-section { padding: 80px 0 !important; }
.calc-section .calc-card {
  background: #ffffff;
  border: 1px solid var(--app-gray-200);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow-app-sm);
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .calc-section { padding: 56px 0 !important; }
  .calc-section .calc-card { padding: 20px; border-radius: 14px; }
}

/* =========================================================
   About-Section v2: Mission/Vision prominent, kompaktes
   Team-Layout, Werte-Section, clickpuls-Footer.
   ========================================================= */
.about-section { padding: 96px 0 !important; }

/* Header */
.about-section .about-head { max-width: 760px; margin-bottom: 40px; }
.about-section .about-head h2 { margin-top: 12px; }
.about-section .about-intro {
  margin-top: 14px;
  font-size: 17px;
  color: var(--app-gray-600);
  line-height: 1.55;
}

/* Mission + Vision Cards */
.about-section .about-mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 56px;
}
.about-section .about-mv-card {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 16px;
  padding: 24px 28px;
}
.about-section .about-mv-card .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 8px;
}
.about-section .about-mv-card p {
  margin: 0;
  color: var(--app-gray-800);
  font-size: 15px;
  line-height: 1.55;
}

/* Team-Heading + kompakte Cards */
.about-section .about-team-head { text-align: center; margin-bottom: 24px; }
.about-section .about-team-head h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--app-gray-900);
  margin: 0;
}
.about-section .about-team-head p {
  font-size: 14px;
  color: var(--app-gray-500);
  margin: 6px 0 0;
}
.about-section .about-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 56px;
}
.about-section .about-person {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-app-xs);
}
.about-section .about-person .ap-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--app-gray-100);
  position: relative;
}
.about-section .about-person .ap-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-section .about-person .ap-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 700;
  color: var(--app-gray-400);
}
.about-section .about-person h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--app-gray-900);
  margin: 0;
  letter-spacing: -0.01em;
}
.about-section .about-person .ap-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brand-600);
  margin-top: 2px;
}
.about-section .about-person .ap-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.about-section .about-person p {
  font-size: 13.5px;
  color: var(--app-gray-600);
  line-height: 1.5;
  margin: 8px 0 0;
}
.about-section .about-person .ap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* margin-top: auto schiebt Tags an den Boden, damit sie ueber alle
     drei Cards in einer Linie sitzen, egal wie lang die Bio ist. */
  margin-top: auto;
  padding-top: 12px;
}
.about-section .about-person .ap-tags span {
  font-size: 10.5px;
  font-weight: 500;
  background: var(--app-gray-50);
  border: 1px solid var(--app-gray-200);
  color: var(--app-gray-600);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Werte-Section */
.about-section .about-values-head { text-align: center; margin-bottom: 24px; }
.about-section .about-values-head h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--app-gray-900);
  margin: 0;
}
.about-section .about-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.about-section .about-value {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 14px;
  padding: 24px 22px;
  text-align: left;
}
.about-section .about-value .av-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.about-section .about-value .av-icon svg { width: 22px; height: 22px; }
.about-section .about-value h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--app-gray-900);
  margin: 0 0 6px;
}
.about-section .about-value p {
  margin: 0;
  font-size: 13.5px;
  color: var(--app-gray-600);
  line-height: 1.5;
}

/* Footer-Note */
.about-section .about-footer {
  text-align: center;
  font-size: 13px;
  color: var(--app-gray-500);
  padding-top: 24px;
  border-top: 1px dashed var(--app-gray-200);
}

/* Mobile/Tablet */
@media (max-width: 860px) {
  .about-section { padding: 64px 0 !important; }
  .about-section .about-mv,
  .about-section .about-team,
  .about-section .about-values {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================================================
   Beta-Form Multi-Step (3 Steps + Progress)
   ========================================================= */
/* Formular fullwidth innerhalb des Containers – linksbündig zur Headline,
   2-spaltige beta-grid kann so ihre volle Breite nutzen. */
.beta-stepper { width: 100%; margin: 40px 0 0; }

.step-progress { margin-bottom: 32px; }
.step-progress-track {
  height: 6px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden;
}
.step-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--ai), var(--brand-400));
  border-radius: 99px; transition: width .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(99,102,241,.5);
}
.step-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; font-family: 'Outfit', sans-serif;
}
.step-progress-meta .step-num { font-size: 13px; color: #8b93c2; font-weight: 600; letter-spacing: .04em; }
.step-progress-meta .step-label { font-size: 16px; color: #fff; font-weight: 600; }

.step-pane { animation: step-fade .3s ease; }
@keyframes step-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.step-nav .btn { min-width: 140px; }
.step-nav .btn-ghost {
  background: transparent; color: #d1d5ea; border: 1px solid rgba(255,255,255,.18);
}
.step-nav .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }

/* Field-Verbesserungen für Step-Layout */
.beta-section .field input,
.beta-section .field select,
.beta-section .field textarea {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
}
.beta-section .field label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 13px;
  color: #d1d5ea; margin-bottom: 6px;
}
.beta-section .field .opt {
  font-size: 11px; color: #8b93c2; font-weight: 400;
  background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 99px;
}
.beta-section .field .req { color: var(--ai); font-weight: 700; }

@media(max-width: 720px) {
  .step-progress-meta .step-label { font-size: 14px; }
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav .btn { width: 100%; }
}

/* =========================================================
   FOOTER — minimal, hell, Trust-Badges
   Überschreibt komplett den alten dunklen Footer aus site.css
   ========================================================= */
footer.site-footer {
  background: var(--navy, #050610);
  color: #cbd2ee;
  padding: 56px 0 28px;
  border-top: none;
  font-family: 'Outfit', sans-serif;
}

/* =========================================================
   FOOTER – Newsletter-Band + 4-Spalter + Bottom-Bar
   ========================================================= */

/* --- 1) Newsletter-Band (oberhalb des 4-Spalters) ---------- */
.footer-newsletter-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  padding: 22px 28px;
  margin-bottom: 36px;
  background: linear-gradient(135deg, rgba(124,131,255,.08), rgba(124,131,255,.02));
  border: 1px solid rgba(124,131,255,.18);
  border-radius: 14px;
}
.footer-newsletter-band__text { flex: 1 1 320px; min-width: 0; }
.footer-newsletter-band__title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px; font-weight: 600;
  color: #fff; margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.footer-newsletter-band__icon { color: var(--ai); flex-shrink: 0; }
.footer-newsletter-band__subtitle {
  font-size: 13.5px; line-height: 1.5;
  color: #8b93c2; margin: 0;
  max-width: 480px;
}
.footer-newsletter-band__action { flex: 0 1 420px; min-width: 280px; }

/* --- 2) Newsletter-Form (innerhalb Action-Spalte) ---------- */
.footer-newsletter__form {
  display: flex; align-items: stretch; gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.footer-newsletter__form:focus-within {
  border-color: rgba(124,131,255,.55);
  background: rgba(255,255,255,.06);
}
.footer-newsletter__input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 12px 14px;
  color: #fff; font-size: 14px;
  font-family: inherit;
}
.footer-newsletter__input::placeholder { color: #6b7299; }
.footer-newsletter__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 18px;
  background: linear-gradient(90deg, var(--ai), var(--ai-2));
  color: #fff; border: 0; cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}
.footer-newsletter__btn:hover { filter: brightness(1.08); }
.footer-newsletter__btn:active { transform: translateY(1px); }
.footer-newsletter__btn svg { display: block; opacity: .9; }
.footer-newsletter__success {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: rgba(80,200,120,.10);
  border: 1px solid rgba(80,200,120,.30);
  border-radius: 10px;
  color: #a8e6c0; font-size: 14px; font-weight: 500;
}
.footer-newsletter__hint {
  font-size: 11.5px; line-height: 1.5;
  color: #6b7299; margin: 8px 0 0;
  font-family: inherit;
}
.footer-newsletter__hint a {
  color: #8b93c2;
  font-size: inherit; font-weight: inherit; font-family: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(139,147,194,.35);
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.footer-newsletter__hint a:hover { color: #cbd2ee; }
[x-cloak] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- 3) Hauptzone: 4 Spalten ------------------------------- */
.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 22px;
}
.footer-col { min-width: 0; }
.footer-col__title {
  font-family: 'Outfit', sans-serif;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; margin: 0 0 14px;
}

/* Spalte 1: Brand */
.footer-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px;
}
.footer-logo img { height: 36px; width: auto; display: block; }
.footer-address {
  font-style: normal; font-size: 13px; line-height: 1.65;
  color: #8b93c2; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.footer-social {
  display: inline-flex; align-items: center; gap: 6px;
  color: #cbd2ee !important;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-social svg { display: block; opacity: .85; transition: opacity .15s ease; }
.footer-social:hover { color: #fff !important; }
.footer-social:hover svg { opacity: 1; }

/* Spalten 2 + 3: Sitemap-Nav */
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  font-size: 14px; line-height: 1.4;
  color: #cbd2ee; text-decoration: none;
  transition: color .15s ease;
}
.footer-nav a:hover { color: #fff; }

/* --- 4) Bottom row ----------------------------------------- */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-top: 6px;
}
.footer-copy {
  font-size: 13px; color: #8b93c2;
  font-family: inherit; line-height: 1.5;
}
.footer-copy a {
  color: #cbd2ee;
  font-size: inherit; font-weight: inherit; font-family: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-copy a:hover { color: #fff; }

/* Trust-Badges (in Bottom-Bar, klein & dezent, nebeneinander) */
.footer-trust {
  display: inline-flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 5px;
  color: #6b7299;
  font-size: 11px; font-weight: 400;
  line-height: 1;
}
.trust-item b { color: #cbd2ee; font-weight: 600; }
.trust-laurel {
  width: 6px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.30);
  flex-shrink: 0;
}
.trust-laurel svg { width: 100%; height: 100%; display: block; }
.trust-laurel:not(.trust-laurel-r) svg { transform: scaleX(-1); }

/* --- 5) Responsive ----------------------------------------- */

/* Tablet: 4 Spalten beibehalten, nur enger */
@media (min-width: 721px) and (max-width: 1024px) {
  .footer-main {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 28px;
  }
  .footer-col__title { font-size: 11.5px; }
  .footer-nav a { font-size: 13.5px; }
  .footer-newsletter-band { padding: 20px 22px; gap: 28px; }
  .footer-newsletter-band__text { flex-basis: 280px; }
  .footer-newsletter-band__action { flex-basis: 340px; min-width: 240px; }
}

/* Mobile */
@media (max-width: 720px) {
  footer.site-footer { padding: 40px 0 20px; }
  /* Newsletter-Band: Flex-Basis-Fix (sonst werden Spalten zu Höhen!) */
  .footer-newsletter-band {
    flex-direction: column; align-items: stretch;
    gap: 16px; padding: 20px 18px; margin-bottom: 28px;
  }
  .footer-newsletter-band__text,
  .footer-newsletter-band__action {
    flex: 0 0 auto; width: 100%; min-width: 0; max-width: none;
  }
  .footer-newsletter-band__title { font-size: 16px; }
  .footer-newsletter-band__subtitle { font-size: 13px; }

  /* 2x2 Grid für die 4 Footer-Spalten */
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    padding-bottom: 22px; margin-bottom: 18px;
  }
  .footer-brand { gap: 12px; }
  .footer-logo img { height: 30px; }
  .footer-address { font-size: 12.5px; }
  .footer-col__title { font-size: 11px; margin-bottom: 12px; }
  .footer-nav { gap: 8px; }
  .footer-nav a { font-size: 13.5px; }

  /* Bottom: Trust-Badges oben, Copyright als Abschluss unten */
  .footer-bottom {
    flex-direction: column-reverse; align-items: flex-start; gap: 14px;
  }
  .footer-trust { gap: 12px 14px; }
}

/* =========================================================
   BETA-FORM — hell statt dunkel
   ========================================================= */
.beta-section {
  background: var(--app-gray-50) !important;
  color: var(--app-gray-900) !important;
  padding: 100px 0 !important;
  border-top: 1px solid var(--app-gray-200);
  border-bottom: 1px solid var(--app-gray-200);
}
.beta-section h2 { color: var(--app-gray-900) !important; }
.beta-section .eyebrow { color: var(--brand-600) !important; }
.beta-section .beta-sub { color: var(--app-gray-600); }

/* Inputs */
.beta-section .field input,
.beta-section .field select,
.beta-section .field textarea {
  background: #fff;
  border: 1px solid var(--app-gray-300);
  color: var(--app-gray-900);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.beta-section .field input:focus,
.beta-section .field select:focus,
.beta-section .field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(70,95,255,.12);
}
.beta-section .field label {
  color: var(--app-gray-700);
  font-weight: 600;
}
.beta-section .field .opt {
  color: var(--app-gray-500);
  background: var(--app-gray-100);
}
.beta-section .field .req { color: var(--brand-600); }

/* Size radios */
.beta-section .size-row label {
  background: #fff;
  border: 1px solid var(--app-gray-300);
  color: var(--app-gray-700);
}
.beta-section .size-row label.active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.beta-section .size-row--compact {
  flex-wrap: wrap;
  gap: 6px;
}
.beta-section .size-row--compact label {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 0;
  padding: 10px 4px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Module-Pills (Step 3) */
.beta-section .field-hint {
  margin: 4px 0 12px;
  color: var(--app-gray-500);
  font-size: 13px;
  line-height: 1.4;
}
.beta-section .module-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .beta-section .module-pills { grid-template-columns: 1fr; }
}
.beta-section .module-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 16px 16px 16px 44px;
  background: #fff;
  border: 1px solid var(--app-gray-300);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.beta-section .module-pill:hover {
  border-color: var(--brand-400, var(--brand-500));
  background: var(--app-gray-50, #f7f8fc);
}
.beta-section .module-pill input[type="checkbox"] {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-600);
  cursor: pointer;
}
.beta-section .module-pill-label {
  color: var(--app-gray-900);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}
.beta-section .module-pill-desc {
  color: var(--app-gray-500);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.beta-section .module-pill.active {
  border-color: var(--brand-600);
  background: rgba(70,95,255,.06);
  box-shadow: 0 0 0 3px rgba(70,95,255,.10);
}
.beta-section .module-pill.active .module-pill-label { color: var(--brand-700, var(--brand-600)); }

/* DSGVO check row */
.beta-section .check-row {
  background: #fff;
  border: 1px solid var(--app-gray-200);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
}
.beta-section .check-row label { color: var(--app-gray-700); font-weight: 400; }

/* Step progress (hell) */
.beta-section .step-progress-track {
  background: var(--app-gray-200);
}
.beta-section .step-progress-meta .step-num { color: var(--app-gray-500); }
.beta-section .step-progress-meta .step-label { color: var(--app-gray-900); }

/* Step nav */
.beta-section .step-nav {
  border-top-color: var(--app-gray-200);
}
.beta-section .step-nav .btn-ghost {
  background: #fff;
  color: var(--app-gray-700);
  border: 1px solid var(--app-gray-300);
}
.beta-section .step-nav .btn-ghost:hover {
  background: var(--app-gray-100);
  border-color: var(--app-gray-400);
}

/* Disclaimer + global error */
.beta-section .err { color: #d92d20; font-size: 13px; margin-top: 4px; }
.beta-section form > p { color: var(--app-gray-500) !important; }

/* Success state */
.beta-section .success .ic {
  background: #d1fadf; color: #027a48;
}
.beta-section .success h3 { color: var(--app-gray-900) !important; }
.beta-section .success p { color: var(--app-gray-600) !important; }
.beta-section .success p b { color: var(--app-gray-900) !important; }

/* === Header cleanup ===
   Old legacy .flag element is no longer rendered, but kept hidden as a
   safety net in case the Stitch bundle re-introduces it. */
.nav-right .flag { display: none !important; }

/* === Footer language switcher ===
   Lives in the brand column directly under the LinkedIn link. Dark-on-dark
   theme to match the rest of the footer. Lives here (not site.css) so a
   re-run of scripts/extract-stitch-bundle.php doesn't wipe it. */
.footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  font-family: "Geist Mono", monospace;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #cbd2ee;
}
.footer-lang__icon { color: #cbd2ee; opacity: .7; flex-shrink: 0; }
.footer-lang__sep {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-family: "Geist Mono", monospace;
  font-weight: 500;
  color: rgba(255,255,255,0.25);
  user-select: none;
}
/* Critical: links inside flex containers don't reliably inherit font-size
   or line-height from the parent — browsers apply their own defaults to
   <a>. We set all typographic props explicitly on BOTH the link and the
   active span so DE and EN end up as visually identical glyphs. The only
   visual difference is color. */
.footer-lang__link,
.footer-lang__current {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-family: "Geist Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-lang__link {
  color: rgba(203,210,238,0.65) !important;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-lang__link:hover { color: #fff !important; }
.footer-lang__current { color: #fff; }

@media (max-width: 860px) {
  .footer-lang { font-size: 11px; gap: 4px; }
  .footer-lang__icon { width: 12px; height: 12px; }
}

/* === Fixed site header (authoritative; survives Stitch re-extract of site.css) === */
header.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(250, 250, 249, 0.82) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
body > main {
  padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important;
}
html {
  scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px));
}
html:has(body[data-preview]) {
  scroll-padding-top: calc(68px + 40px + env(safe-area-inset-top, 0px));
}
body[data-preview] header.nav {
  top: 40px !important;
}
body[data-preview] > main {
  padding-top: calc(68px + 40px + env(safe-area-inset-top, 0px)) !important;
}