/* Cortexion — Components (Light Theme, Langdock × peec Mix) */

/* ============================================================
   BUTTONS
   Langdock-Stil: schwarzer Primary, weißer Secondary,
   klare 1px-Border, subtiler Shadow, kompakter Radius
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  isolation: isolate;
}
.btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* PRIMARY — schwarz/dunkel, langdock-Signature */
.btn-primary {
  background-color: #0a0b14;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    0 1px 2px 0 rgba(15, 23, 42, 0.10),
    0 8px 24px -10px rgba(15, 23, 42, 0.35);
}
.btn-primary:hover {
  background-color: #1a1c2e;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    0 2px 6px 0 rgba(15, 23, 42, 0.12),
    0 14px 36px -8px rgba(15, 23, 42, 0.45),
    0 0 60px -12px rgba(15, 23, 42, 0.35);
}
.btn-primary:active {
  transform: translateY(0);
  background-color: #000000;
}

/* SECONDARY — weiß mit hairline border, peec-clean */
.btn-secondary {
  background-color: #ffffff;
  color: #0a0b14;
  border: 1px solid #e0e1e8;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
    0 1px 2px 0 rgba(15, 23, 42, 0.04);
}
.btn-secondary:hover {
  background-color: #ffffff;
  border-color: #b8bac7;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
    0 4px 12px -4px rgba(15, 23, 42, 0.10);
}

/* GHOST — minimal */
.btn-ghost {
  background-color: transparent;
  color: #2c2e44;
}
.btn-ghost:hover {
  color: #0a0b14;
  background-color: rgba(15, 23, 42, 0.04);
}

/* OUTLINE — neutrale Border auf weiss */
.btn-outline {
  background-color: #ffffff;
  color: #0a0b14;
  border: 1px solid #d4d5e0;
}
.btn-outline:hover {
  background-color: #f7f8fa;
  border-color: #0a0b14;
  color: #0a0b14;
}

.btn-lg {
  padding: 0.9375rem 1.75rem;
  font-size: 1rem;
}
.btn-sm {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
}

/* ============================================================
   CARDS — weiß, klare Hairline, subtiler Hover-Lift
   ============================================================ */
.card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  border-color: #b8bac7;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.30);
}

.card-feature {
  position: relative;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid #e8e9ee;
  border-radius: 1rem;
  padding: 1.75rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.card-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 240px 140px at 0% 0%, rgba(15, 23, 42, 0.10), transparent 60%),
    radial-gradient(ellipse 200px 120px at 100% 100%, rgba(15, 23, 42, 0.04), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card-feature::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.20), transparent);
  opacity: 0.5;
  pointer-events: none;
}
.card-feature:hover {
  border-color: #b8bac7;
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.35);
}
.card-feature:hover::before {
  opacity: 1;
}

.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.12) 0%, rgba(15, 23, 42, 0.05) 100%);
  border: 1px solid rgba(15, 23, 42, 0.22);
  color: #0a0b14;
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ============================================================
   FORMS — langdock-clean light
   ============================================================ */
.input, .textarea, .select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #d4d5e0;
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  color: #0a0b14;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.input::placeholder, .textarea::placeholder {
  color: #9092a8;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary-500);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.15);
}
.textarea {
  min-height: 140px;
  resize: vertical;
}
.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2c2e44;
  margin-bottom: 0.5rem;
}
.help-text {
  font-size: 0.8125rem;
  color: #6b6e85;
  margin-top: 0.375rem;
}

/* ============================================================
   TABS
   ============================================================ */
.tab-button {
  padding: 0.625rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #65687e; /* >=4.5:1 Kontrast auch auf #f1f2f6 */
  cursor: pointer;
  border: 1px solid transparent;
  background-color: transparent;
  transition: all 0.2s ease;
}
.tab-button:hover {
  color: #0a0b14;
  background-color: rgba(15, 23, 42, 0.04);
}
.tab-button[aria-selected="true"] {
  color: #0a0b14;
  background-color: #ffffff;
  border-color: #d4d5e0;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
}
.tab-panel[hidden] { display: none; }

/* ============================================================
   INTEGRATION LOGO TILES
   ============================================================ */
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  transition: all 0.25s ease;
}
.logo-tile:hover {
  background-color: #ffffff;
  border-color: #b8bac7;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.30);
}
.logo-tile-icon {
  width: 32px;
  height: 32px;
  color: #2c2e44;
}
.logo-tile-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4a4d63;
}

/* ============================================================
   PRICING CARD — langdock-strukturiert, dezenter Glow auf featured
   ============================================================ */
.price-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.price-card:hover {
  border-color: #b8bac7;
}
.price-card-featured {
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border-color: #0a0b14;
  box-shadow:
    0 0 0 1px #0a0b14,
    0 30px 80px -20px rgba(15, 23, 42, 0.25),
    0 0 120px -30px rgba(15, 23, 42, 0.30);
  transform: scale(1.02);
}
.price-badge {
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0a0b14;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.35);
}
.checkmark {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #0a0b14;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-logo {
  font-weight: 700;
  font-size: 1.125rem;
  color: #9092a8;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.trust-logo:hover {
  color: #2c2e44;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: rgba(15, 23, 42, 0.06);
  color: #0a0b14;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
.badge-violet {
  background-color: rgba(15, 23, 42, 0.06);
  color: #0a0b14;
  border-color: rgba(15, 23, 42, 0.10);
}
.badge-roadmap {
  background-color: transparent;
  color: #2c2e44;
  border: 1px dashed rgba(15, 23, 42, 0.45);
  letter-spacing: 0.02em;
}
.badge-roadmap::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background-color: #0a0b14;
  margin-right: 0.4rem;
  animation: roadmap-pulse 2.2s ease-in-out infinite;
}
@keyframes roadmap-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-roadmap::before { animation: none; }
}

/* ============================================================
   KREISFLAGGEN (DE / EU) — Vertrauens-Marker, siehe includes/flags.php
   ============================================================ */
.cx-flag {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  border-radius: 9999px;
  flex: none;
}
.cx-flag-pair {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.18em;
  flex: none;
}
.cx-flag-pair .cx-flag { vertical-align: baseline; }
.cx-flag-pair .cx-flag + .cx-flag {
  margin-left: -0.33em;
  /* heller Trenn-Ring, damit sich die überlappenden Flaggen absetzen */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
/* In Badges und Checklisten: fester Abstand zum Text */
.badge .cx-flag,
.badge .cx-flag-pair { margin-right: 0.45em; }

/* ============================================================
   STEP NUMBER
   ============================================================ */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background-color: #0a0b14;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.125rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -6px rgba(15, 23, 42, 0.30);
}

/* ============================================================
   MODULAR GROWTH — JOURNEY
   ============================================================ */
.journey {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid #e8e9ee;
  background-color: #ffffff;
  padding: 1.75rem 1.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.journey:hover {
  border-color: #b8bac7;
  box-shadow: 0 16px 40px -22px rgba(15, 23, 42, 0.30);
}
.journey-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
.journey-header .icon-square {
  margin-bottom: 0;
  width: 2.5rem;
  height: 2.5rem;
}
.journey-header h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0a0b14;
  letter-spacing: -0.01em;
}
.journey-header p {
  font-size: 0.8125rem;
  color: #6b6e85;
  margin-top: 0.125rem;
}

/* Journey rail */
.journey-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 640px) {
  .journey-rail {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
}

.module-step {
  position: relative;
  border-radius: 0.875rem;
  padding: 0.875rem 0.875rem 0.875rem 1rem;
  background-color: #fafbfd;
  border: 1px solid #e8e9ee;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 88px;
  justify-content: center;
}
.module-step.is-start {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.03) 100%);
  border-color: rgba(15, 23, 42, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.module-step-prefix {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a4d63;
}
.module-step.is-start .module-step-prefix {
  color: #0a0b14;
}
.module-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.3;
}
.module-step-meta {
  font-size: 0.75rem;
  color: #6b6e85;
  line-height: 1.3;
  margin-top: 0.125rem;
}

/* Verbindung zwischen Modul-Stufen */
.module-step + .module-step::before {
  content: "";
  position: absolute;
  background-color: rgba(15, 23, 42, 0.40);
}
@media (max-width: 639px) {
  .module-step + .module-step::before {
    left: 50%;
    top: -0.75rem;
    transform: translateX(-50%);
    width: 1px;
    height: 0.625rem;
  }
}
@media (min-width: 640px) {
  .module-step + .module-step::before {
    top: 50%;
    left: -0.4375rem;
    transform: translateY(-50%);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.12);
  }
  .module-step + .module-step::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.5rem;
    transform: translate(-100%, -50%);
    width: calc(0.5rem - 4px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.55));
  }
}

/* ============================================================
   CANCEL-ANYTIME CALLOUT
   ============================================================ */
.callout-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: #0a0b14;
  font-size: 0.875rem;
  font-weight: 600;
}
.callout-cancel svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #0a0b14;
}

/* ============================================================
   PRICE HINT
   ============================================================ */
.price-hint {
  font-size: 0.75rem;
  color: #6b6e85;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.price-hint svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #6b6e85;
}

/* ============================================================
   ADD-ON ROW
   ============================================================ */
.addon-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background-color: #ffffff;
  border: 1px solid #e8e9ee;
  transition: border-color 0.2s ease;
}
.addon-row:hover {
  border-color: #b8bac7;
}
@media (min-width: 768px) {
  .addon-row {
    grid-template-columns: 1.4fr 2fr 1fr;
    gap: 1.25rem;
    align-items: center;
  }
}
.addon-row + .addon-row {
  margin-top: 0.625rem;
}
.addon-title {
  font-weight: 700;
  color: #0a0b14;
  font-size: 0.9375rem;
}
.addon-desc {
  color: #4a4d63;
  font-size: 0.875rem;
}
.addon-price {
  color: #0a0b14;
  font-weight: 700;
  font-size: 0.9375rem;
}

/* ============================================================
   APP ADD-ON CARD — einzelne App-Preise mit Wettbewerbsvergleich
   ============================================================ */
.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.app-card:hover {
  border-color: #b8bac7;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.22);
}
.app-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.app-card-icon {
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background-color: #f4f5f8;
  border: 1px solid #e8e9ee;
  color: #0a0b14;
}
.app-card-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.3;
}
.app-card-desc {
  font-size: 0.85rem;
  color: #4a4d63;
  margin-top: 0.875rem;
  flex-grow: 1;
}
.app-card-pricerow {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #eef0f4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.app-card-price {
  font-size: 1.625rem;
  font-weight: 800;
  color: #0a0b14;
  line-height: 1;
}
.app-card-unit {
  font-size: 0.75rem;
  color: #65687e; /* >=4.5:1 Kontrast auch auf #f1f2f6 */
  margin-left: 0.25rem;
  font-weight: 500;
}
.app-card-savings {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background-color: #0a0b14;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}
.app-card-vs {
  margin-top: 0.5rem;
  width: 100%;
  font-size: 0.7rem;
  color: #6b6e85;
}
.app-card-vs strong {
  color: #4a4d63;
  text-decoration: line-through;
  font-weight: 600;
}

/* Wide-Variante der App-Card für Multi-Tier-Apps (z. B. KI-Chat) */
.app-card.is-wide {
  grid-column: span 1;
}
@media (min-width: 1024px) {
  .app-card.is-wide { grid-column: span 2; }
}
.app-card-startprice {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #eef0f4;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.app-card-startprice-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4d63;
}
.app-card-startprice-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0a0b14;
}
.app-card-startprice-unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6e85;
  margin-left: 0.25rem;
}

/* Multi-Tier-Liste innerhalb einer App-Card */
.app-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
@media (min-width: 640px) {
  .app-tiers { grid-template-columns: repeat(2, 1fr); }
}
.app-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.9375rem 1rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  background-color: #fafbfd;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.app-tier:hover {
  border-color: #b8bac7;
  background-color: #ffffff;
  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.18);
}
.app-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.app-tier-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0a0b14;
  letter-spacing: -0.005em;
}
.app-tier-price {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0a0b14;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.app-tier-price-unit {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b6e85;
  margin-left: 0.125rem;
}
.app-tier-for {
  font-size: 0.78rem;
  color: #4a4d63;
  line-height: 1.45;
}
.app-tier-for strong {
  color: #2c2e44;
  font-weight: 700;
}
.app-tier-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  color: #6b6e85;
  font-weight: 500;
}
.app-tier-meta svg {
  width: 0.8rem;
  height: 0.8rem;
  color: #4a4d63;
}

/* ============================================================
   SAVINGS TABLE — Cortexion vs. Einzelabos
   ============================================================ */
.savings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.savings-table thead th {
  text-align: left;
  padding: 0.875rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #6b6e85;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #e8e9ee;
  background-color: #f7f8fa;
}
.savings-table thead th:first-child { border-top-left-radius: 0.75rem; }
.savings-table thead th:last-child  { border-top-right-radius: 0.75rem; text-align: right; }
.savings-table thead th.col-mid     { text-align: right; }
.savings-table thead th.col-bundle  {
  background-color: #0a0b14;
  color: #ffffff;
  text-align: right;
}
.savings-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #eef0f4;
  color: #2c2e44;
}
.savings-table tbody td:nth-child(2),
.savings-table tbody td:nth-child(3),
.savings-table tbody td:nth-child(4) { text-align: right; white-space: nowrap; }
.savings-table tbody td:nth-child(2) {
  color: #6b6e85;
  text-decoration: line-through;
  font-weight: 600;
}
.savings-table tbody td:nth-child(3) {
  color: #0a0b14;
  font-weight: 700;
}
.savings-table tbody td:nth-child(4) {
  background-color: #fafbfd;
  color: #0a0b14;
  font-weight: 700;
  border-left: 1px solid #e8e9ee;
}
.savings-table tbody td .vendor {
  color: #6b6e85;
  font-size: 0.78rem;
  margin-left: 0.375rem;
}
.savings-table tbody td.included {
  color: #0a0b14;
  font-weight: 700;
}
.savings-table tbody tr:hover td:nth-child(1),
.savings-table tbody tr:hover td:nth-child(2),
.savings-table tbody tr:hover td:nth-child(3) {
  background-color: #fafbfd;
}
.savings-table tbody tr:hover td:nth-child(4) {
  background-color: #f3f4f7;
}
.savings-table tfoot td {
  padding: 1.125rem 1rem;
  font-weight: 800;
  font-size: 1.0625rem;
  color: #0a0b14;
  background-color: #f7f8fa;
  border-top: 2px solid #0a0b14;
}
.savings-table tfoot td:first-child { border-bottom-left-radius: 0.75rem; }
.savings-table tfoot td:last-child  { border-bottom-right-radius: 0.75rem; }
.savings-table tfoot td:nth-child(2),
.savings-table tfoot td:nth-child(3),
.savings-table tfoot td:nth-child(4) { text-align: right; }
.savings-table tfoot td:nth-child(2) { color: #6b6e85; text-decoration: line-through; font-weight: 600; }
.savings-table tfoot td:nth-child(4) {
  background-color: #0a0b14;
  color: #ffffff;
  border-top-color: #0a0b14;
}
.savings-table tfoot td.cell-cta {
  padding: 0.75rem 0.875rem;
  text-align: right;
}
.btn-table-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  background-color: #ffffff;
  color: #0a0b14;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn-table-cta:hover {
  transform: translateY(-1px);
  background-color: #f7f8fa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 6px 18px -6px rgba(15, 23, 42, 0.45);
}
.btn-table-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.btn-table-cta svg { transition: transform 0.18s ease; }
.btn-table-cta:hover svg { transform: translateX(2px); }
.savings-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background-color: #0a0b14;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}

/* ============================================================
   CTA BANNER (DARK) — langdock-Signature: schwarzer Banner
   ============================================================ */
.cta-dark {
  position: relative;
  background-color: #0a0b14;
  background-image: linear-gradient(135deg, #0a0b14 0%, #1a1c2e 100%);
  border: 1px solid #1a1c2e;
  box-shadow:
    0 24px 60px -24px rgba(15, 23, 42, 0.45),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.cta-dark::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 70%;
  background: radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
  pointer-events: none;
}
.cta-dark .heading-1,
.cta-dark .heading-2,
.cta-dark .heading-3 {
  color: #ffffff;
}
.cta-dark .subheading {
  color: #f1f2f6;
}
.cta-dark .gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #e8e9ee 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.cta-dark .text-base-300,
.cta-dark .text-base-400,
.cta-dark .text-base-500 {
  color: #e8e9ee !important;
}
/* OUTLINE button on dark CTA — sichtbarer Rahmen, klar lesbarer Text */
.cta-dark .btn-outline {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.cta-dark .btn-outline:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #0a0b14;
}
.cta-dark .eyebrow {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.cta-dark .btn-secondary {
  background-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}
.cta-dark .btn-secondary:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #0a0b14;
}
/* CTA-DARK Primary: weißer Button mit echter Tiefe + hellem Glow auf Dunkel.
   Ohne diese Overrides erbt der Button die dunklen Shadows von .btn-primary,
   die auf dunklem Hintergrund unsichtbar sind — der Button wirkt dann flach. */
.cta-dark .btn-primary {
  background-color: #ffffff;
  color: #0a0b14;
  border: 1.5px solid #ffffff;
  font-weight: 700;
  box-shadow:
    inset 0 -1px 0 0 rgba(15, 23, 42, 0.08),
    0 2px 0 0 rgba(255, 255, 255, 0.25),
    0 10px 28px -8px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(255, 255, 255, 0.08),
    0 0 50px -10px rgba(255, 255, 255, 0.35);
}
.cta-dark .btn-primary:hover {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 -1px 0 0 rgba(15, 23, 42, 0.10),
    0 4px 0 0 rgba(255, 255, 255, 0.30),
    0 18px 40px -10px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(255, 255, 255, 0.12),
    0 0 70px -10px rgba(255, 255, 255, 0.5);
}
.cta-dark .btn-primary:active {
  transform: translateY(0);
}

/* ============================================================
   MANIFESTO CARD (heller Hinweis-Block, hoher Kontrast)
   ============================================================ */
.manifesto-card {
  position: relative;
  background-color: #ffffff;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%);
  border: 1px solid #e8e9ee;
  box-shadow:
    0 24px 60px -28px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 1);
  overflow: hidden;
}
.manifesto-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.15) 50%, transparent 100%);
  pointer-events: none;
}
.manifesto-card .eyebrow {
  background-color: #ffffff;
  border-color: #d4d5dc;
  color: #0a0b14;
}
.manifesto-tile {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e3ea;
  border-radius: 0.875rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.manifesto-tile:hover {
  border-color: #b8bac7;
  box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

/* ============================================================
   NAVIGATION FLYOUT (Plattform-Dropdown)
   ============================================================ */
.nav-dropdown {
  position: relative;
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-family: inherit;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
.nav-trigger.is-active {
  color: var(--text-strong);
  background-color: var(--bg-elev-2);
}
.nav-trigger-caret {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease;
}
.nav-trigger[aria-expanded="true"] .nav-trigger-caret {
  transform: rotate(180deg);
}

.nav-flyout {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(720px, calc(100vw - 2rem));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 50;
}
.nav-dropdown:hover .nav-flyout,
.nav-dropdown:focus-within .nav-flyout,
.nav-flyout.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.nav-flyout-inner {
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 48px -16px rgba(15, 23, 42, 0.18),
    0 8px 24px -8px rgba(15, 23, 42, 0.10);
  padding: 1.25rem;
  overflow: hidden;
}
.nav-flyout-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 1.25rem;
}
.nav-flyout-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-flyout-col-apps {
  border-left: 1px solid var(--border-hairline);
  padding-left: 1.25rem;
}
.nav-flyout-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0.5rem 0.5rem;
}
.nav-flyout-label-link {
  color: var(--text-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}
.nav-flyout-label-link:hover {
  color: var(--text-body);
}
.nav-flyout-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--text-body);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav-flyout-item:hover,
.nav-flyout-item:focus-visible {
  background-color: var(--bg-elev-2);
  color: var(--text-strong);
  outline: none;
}
.nav-flyout-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--bg-elev-2);
  color: var(--text-strong);
  border: 1px solid var(--border-hairline);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.nav-flyout-icon svg {
  width: 1rem;
  height: 1rem;
}
.nav-flyout-item:hover .nav-flyout-icon {
  background: #ffffff;
  border-color: var(--border-soft);
}
.nav-flyout-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.nav-flyout-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.2;
}
.nav-flyout-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.nav-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
  padding: 0 0.25rem;
}
.nav-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--text-body);
  text-align: center;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.nav-app-tile:hover,
.nav-app-tile:focus-visible {
  background-color: var(--bg-elev-2);
  color: var(--text-strong);
  outline: none;
}
.nav-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-hairline);
  color: var(--text-strong);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-app-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.nav-app-tile:hover .nav-app-icon {
  background: #ffffff;
  border-color: var(--border-soft);
  transform: translateY(-1px);
}
.nav-app-name {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.nav-flyout-footer-link {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  border-top: 1px solid var(--border-hairline);
  padding-top: 0.75rem;
  transition: color 0.18s ease;
}
.nav-flyout-footer-link:hover {
  color: var(--text-body);
}

/* ============================================================
   MOBILE NAV-GROUPS (Plattform / Apps Accordion)
   ============================================================ */
.mobile-nav-group,
.mobile-nav-subgroup {
  display: block;
}
.mobile-nav-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  color: var(--text-body);
}
.mobile-nav-summary::-webkit-details-marker {
  display: none;
}
.mobile-nav-summary:hover {
  background-color: var(--bg-elev-2);
}
.mobile-nav-summary-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding-left: 0.75rem;
}
.mobile-nav-caret {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
details[open] > .mobile-nav-summary .mobile-nav-caret {
  transform: rotate(180deg);
}
.mobile-nav-children {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem 0 0.5rem 0.75rem;
  border-left: 1px solid var(--border-hairline);
  margin-left: 0.75rem;
}

/* Flow-Step (Berechtigungen-Page) */
.flow-step {
  padding: 1.25rem 1.5rem;
}

/* ============================================================
   BLOG-ARTIKEL-TYPOGRAFIE
   ============================================================ */
.prose-blog {
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.prose-blog > * + * {
  margin-top: 1.25em;
}
.prose-blog h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  line-height: 1.25;
}
.prose-blog h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-strong);
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  line-height: 1.3;
}
.prose-blog h2 + h3,
.prose-blog h3 + p {
  margin-top: 0.8em;
}
.prose-blog p {
  color: var(--text-body);
}
.prose-blog strong, .prose-blog b {
  color: var(--text-strong);
  font-weight: 600;
}
.prose-blog a:not(.btn) {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: rgba(15, 23, 42, 0.35);
  text-underline-offset: 3px;
  font-weight: 500;
}
.prose-blog a:not(.btn):hover {
  text-decoration-color: var(--text-strong);
}
.prose-blog ul, .prose-blog ol {
  padding-left: 1.5rem;
}
.prose-blog ul { list-style-type: disc; }
.prose-blog ol { list-style-type: decimal; }
.prose-blog li {
  margin-top: 0.5em;
  color: var(--text-body);
}
.prose-blog li::marker {
  color: var(--text-muted);
}
.prose-blog blockquote {
  border-left: 3px solid var(--text-strong);
  padding: 0.25em 0 0.25em 1.25rem;
  font-style: italic;
  color: var(--text-strong);
  margin: 1.5em 0;
}
.prose-blog code {
  background-color: var(--bg-elev-2);
  border: 1px solid var(--border-hairline);
  border-radius: 0.375rem;
  padding: 0.125em 0.375em;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-strong);
}
.prose-blog table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95rem;
}
.prose-blog th, .prose-blog td {
  border: 1px solid var(--border-hairline);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.prose-blog th {
  background-color: var(--bg-elev-2);
  font-weight: 600;
  color: var(--text-strong);
}
.prose-blog hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: 2.5em 0;
}
.prose-blog .lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-strong);
  font-weight: 500;
}

/* ============================================================
   KI-ORGANISATION / ORG-CHART
   ============================================================ */
.org-chart {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.org-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(135deg, #d4d5e0 0%, #6b6e85 100%);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  font-size: 0.75rem;
  width: 2rem;
  height: 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.org-avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
  background: linear-gradient(135deg, #4a4d63 0%, #0a0b14 100%);
}
.org-avatar-strategy {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
  background: linear-gradient(135deg, #2c2e44 0%, #0a0b14 100%);
}

/* Strategy node */
.org-strategy {
  display: flex;
  justify-content: center;
}
.org-strategy-card {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.5rem 0.875rem 1rem;
  background: #ffffff;
  border: 1px solid #0a0b14;
  border-radius: 9999px;
  box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.35);
  max-width: 100%;
}
.org-strategy-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.org-strategy-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #4a4d63;
  line-height: 1;
}
.org-strategy-name {
  font-size: 1rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.2;
  margin-top: 0.25rem;
}
.org-strategy-tagline {
  font-size: 0.75rem;
  color: #4a4d63;
  line-height: 1.2;
  margin-top: 0.0625rem;
}

/* Connector lines between tiers */
.org-connector {
  position: relative;
  height: 1.25rem;
  margin: 0 auto;
  width: 1px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.40), rgba(15, 23, 42, 0.10));
}
.org-connector-wide {
  height: 1.25rem;
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, 0.40), rgba(15, 23, 42, 0.10));
  background-position: center top;
  background-size: 1px 100%;
  background-repeat: no-repeat;
  display: none;
}
@media (min-width: 1024px) {
  .org-connector-wide { display: block; }
}

/* Department columns */
.org-depts {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .org-depts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .org-depts { grid-template-columns: repeat(4, 1fr); }
}

.org-dept {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 1.25rem;
  padding: 1.25rem 1rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.org-dept:hover {
  border-color: #b8bac7;
  box-shadow: 0 14px 36px -22px rgba(15, 23, 42, 0.30);
}

.org-dept-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px dashed #e8e9ee;
}
.org-dept-head-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.org-dept-name {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: #4a4d63;
  line-height: 1;
}
.org-dept-lead {
  font-size: 1rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.2;
  margin-top: 0.25rem;
}
.org-dept-role {
  font-size: 0.6875rem;
  color: #6b6e85;
  line-height: 1.2;
  margin-top: 0.0625rem;
}
.org-dept-mission {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #4a4d63;
  line-height: 1.45;
}

.org-team {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.org-member {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: #fafbfd;
  border: 1px solid #eef0f3;
  border-radius: 0.625rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.org-member:hover {
  border-color: #b8bac7;
  background: #ffffff;
}
.org-member-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.org-member-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.2;
}
.org-member-role {
  font-size: 0.6875rem;
  color: #6b6e85;
  line-height: 1.25;
  margin-top: 0.0625rem;
}
.org-member .org-avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.6875rem;
}

/* Bookable pill */
.org-bookable {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #0a0b14;
  background: #ffffff;
  padding: 0.25rem 0.5rem 0.25rem 0.4375rem;
  border-radius: 9999px;
  border: 1px solid #d4d5e0;
  margin-top: 0.875rem;
  align-self: flex-start;
}
.org-bookable::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
  background: #0a0b14;
  flex-shrink: 0;
}

/* Shared experts + Control instances rows */
.org-bands {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .org-bands { grid-template-columns: 3fr 2fr; }
}
.org-band {
  border-radius: 1.25rem;
  border: 1px solid #e8e9ee;
  background: #ffffff;
  padding: 1.25rem;
}
.org-band-control {
  background: #0a0b14;
  border-color: #0a0b14;
  color: #ffffff;
}
.org-band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.org-band-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #4a4d63;
  display: block;
}
.org-band-control .org-band-eyebrow {
  color: #b8bac7;
}
.org-band-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0a0b14;
  margin-top: 0.25rem;
  line-height: 1.3;
}
.org-band-control .org-band-title {
  color: #ffffff;
}
.org-band-hint {
  font-size: 0.75rem;
  color: #6b6e85;
  text-align: right;
  max-width: 9rem;
}
.org-band-control .org-band-hint {
  color: #d4d5e0;
}

.org-experts {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .org-experts { grid-template-columns: repeat(3, 1fr); }
}

.org-band-control .org-member {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.org-band-control .org-member:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}
.org-band-control .org-member-name {
  color: #ffffff;
}
.org-band-control .org-member-role {
  color: #b8bac7;
}
.org-band-control .org-avatar {
  background: linear-gradient(135deg, #d4d5e0 0%, #6b6e85 100%);
  color: #0a0b14;
}

/* Modularity hint banner */
.org-hint {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: #ffffff;
  border: 1px dashed #c4c6d2;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  color: #4a4d63;
  text-align: center;
  flex-wrap: wrap;
  line-height: 1.4;
}
.org-hint strong {
  color: #0a0b14;
  font-weight: 700;
}
.org-hint svg {
  width: 1.125rem;
  height: 1.125rem;
  color: #0a0b14;
  flex-shrink: 0;
}

/* Interactive builder: control bar + inactive/active states */
.org-builder-bar {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 1rem;
  box-shadow: 0 6px 20px -16px rgba(15, 23, 42, 0.20);
}
@media (min-width: 768px) {
  .org-builder-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }
}
.org-builder-status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.org-builder-counter {
  font-size: 0.9375rem;
  color: #4a4d63;
  line-height: 1.3;
}
.org-builder-counter strong {
  color: #0a0b14;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.org-builder-hint {
  font-size: 0.75rem;
  color: #6b6e85;
  line-height: 1.35;
}
.org-builder-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.org-builder-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.625rem;
  border: 1px solid #d4d5e0;
  background: #ffffff;
  color: #0a0b14;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.org-builder-btn:hover {
  border-color: #0a0b14;
  background: #fafbfd;
}
.org-builder-btn:active {
  transform: translateY(1px);
}
.org-builder-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.18);
}
.org-builder-btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}
.org-builder-btn-primary {
  background: #0a0b14;
  color: #ffffff;
  border-color: #0a0b14;
}
.org-builder-btn-primary:hover {
  background: #2c2e44;
  border-color: #2c2e44;
}
.org-builder-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Inactive department: light gray, blurred-out content, big + overlay */
.org-dept.is-inactive {
  background: #f4f5f8;
  border: 1px dashed #d4d5e0;
  cursor: pointer;
  box-shadow: none;
}
.org-dept.is-inactive .org-dept-head,
.org-dept.is-inactive .org-dept-mission,
.org-dept.is-inactive .org-team,
.org-dept.is-inactive .org-bookable {
  filter: grayscale(1) opacity(0.42);
  transition: filter 0.4s ease;
}
.org-dept.is-inactive:hover {
  border-color: #0a0b14;
  background: #eef0f3;
}
.org-dept.is-inactive:hover .org-dept-add {
  background: #0a0b14;
  color: #ffffff;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.45);
}
.org-dept.is-inactive:focus-visible {
  outline: none;
  border-color: #0a0b14;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.18);
}

/* The + button overlay */
.org-dept-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #0a0b14;
  color: #0a0b14;
  cursor: pointer;
  z-index: 2;
  pointer-events: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.25);
}
.org-dept-add svg {
  width: 1.5rem;
  height: 1.5rem;
}
.org-dept-add::after {
  content: "Hinzufügen";
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #4a4d63;
  white-space: nowrap;
  pointer-events: none;
}
.org-dept.is-active .org-dept-add {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
}

/* Active department: animate in */
.org-dept.is-active {
  animation: orgDeptIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes orgDeptIn {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.30);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(15, 23, 42, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .org-dept,
  .org-dept.is-active,
  .org-dept-add,
  .org-dept.is-inactive .org-dept-head,
  .org-dept.is-inactive .org-dept-mission,
  .org-dept.is-inactive .org-team,
  .org-dept.is-inactive .org-bookable {
    animation: none !important;
    transition: none !important;
  }
}

/* Compact variant used on homepage */
.org-chart-compact .org-dept {
  padding: 1rem 0.875rem;
  border-radius: 1rem;
}
.org-chart-compact .org-dept-head {
  padding-bottom: 0.625rem;
}
.org-chart-compact .org-avatar-lg {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.8125rem;
}
.org-chart-compact .org-dept-lead {
  font-size: 0.9375rem;
}
.org-chart-compact .org-team {
  margin-top: 0.625rem;
  gap: 0.375rem;
}
.org-chart-compact .org-member {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
}
.org-chart-compact .org-member .org-avatar {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
}
.org-chart-compact .org-member-name {
  font-size: 0.75rem;
}
.org-chart-compact .org-member-role {
  font-size: 0.625rem;
}

/* ============================================================
   TWO-PATH CHOICE — Standard vs. Eigener Prozess
   ============================================================ */
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 1.5rem;
  border: 1px solid #e8e9ee;
  background-color: #ffffff;
  padding: 2rem 1.75rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
@media (min-width: 640px) {
  .choice-card { padding: 2.25rem 2rem; }
}
.choice-card:hover {
  border-color: #b8bac7;
  box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.30);
  transform: translateY(-2px);
}
.choice-card.is-primary {
  background-color: #ffffff;
}
.choice-card.is-secondary {
  background-color: #f7f8fa;
  border-color: #0a0b14;
}
.choice-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #0a0b14;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.choice-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4a4d63;
}

/* INTEGRATION TILE GRID — kompakt für Choice-Card-Spalte */
.integ-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 480px) {
  .integ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.integ-tile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.625rem;
  background-color: #ffffff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.integ-tile:hover {
  border-color: #b8bac7;
  background-color: #fafbfc;
}
.integ-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  background-color: #f4f5f8;
  color: #0a0b14;
  flex-shrink: 0;
}
.integ-tile-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}
.integ-tile-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PATH STEP — nummerierte Schritte rechts (vertikale Timeline) */
.path-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.path-steps::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: linear-gradient(180deg, #e8e9ee 0%, #d4d5e0 100%);
  z-index: 0;
}
.path-step {
  position: relative;
  display: flex;
  gap: 1rem;
  z-index: 1;
}
.path-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #0a0b14;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 0 0 4px #f7f8fa;
}
.path-step-body {
  padding-top: 0.25rem;
}
.path-step-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0a0b14;
  line-height: 1.35;
}
.path-step-text {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: #4a4d63;
  line-height: 1.5;
}

/* HÜRDE-Callout */
.hurdle-callout {
  margin-top: 0.5rem;
  padding: 1.25rem;
  border: 1px solid #e8e9ee;
  border-left: 3px solid #0a0b14;
  border-radius: 0.625rem;
  background-color: #ffffff;
}
.hurdle-callout p {
  margin: 0;
  font-size: 0.875rem;
  color: #2c2e44;
  line-height: 1.55;
}
.hurdle-callout p + p {
  margin-top: 0.65rem;
}
.hurdle-callout strong {
  color: #0a0b14;
}
.hurdle-callout .hurdle-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4a4d63;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: #f1f2f6;
  border: 1px solid #e8e9ee;
}
.hurdle-callout .hurdle-headline {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.4;
}

/* PATH-QUOTE — Zitat-Karte im Eigenen-Prozess-Pfad */
.path-quote {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.875rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}
.path-quote-mark {
  position: absolute;
  top: 0.85rem;
  left: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  color: #d4d4d8;
}
.path-quote blockquote {
  margin: 0 0 0.65rem;
  padding-left: 2rem;
}
.path-quote blockquote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #0a0b14;
  font-style: italic;
  font-weight: 500;
}
.path-quote figcaption {
  padding-left: 2rem;
  font-size: 0.8125rem;
  color: #6b6e85;
  letter-spacing: 0.01em;
}

/* PATH-QUOTE-CLOSER — Voller-Breite-Abbinder unter zweispaltigem Pfad */
.path-quote-closer {
  position: relative;
  margin: 4.5rem auto 0;
  max-width: 56rem;
  padding: 2.75rem 2.25rem 2.5rem;
  border: 1px solid #e8e9ee;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  text-align: center;
}
.path-quote-closer .path-quote-mark {
  position: static;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 1rem;
  color: #d4d4d8;
}
.path-quote-closer blockquote {
  margin: 0 0 1rem;
  padding: 0;
}
.path-quote-closer blockquote p {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.45;
  color: #0a0b14;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.path-quote-closer figcaption {
  padding: 0;
  font-size: 0.875rem;
  color: #6b6e85;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .path-quote-closer {
    padding: 3.25rem 3rem 3rem;
  }
  .path-quote-closer blockquote p {
    font-size: 1.625rem;
  }
}

/* SIMPLE-BENEFITS — Bullet-Liste links */
.simple-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.simple-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: #2c2e44;
  line-height: 1.5;
}
.simple-benefits li svg {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  color: #0a0b14;
}
.simple-benefits li strong {
  color: #0a0b14;
  font-weight: 700;
}

/* TWO-WAYS-Headline-Block */
.two-ways-intro {
  display: grid;
  gap: 1.25rem;
  align-items: end;
}
@media (min-width: 1024px) {
  .two-ways-intro {
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
  }
}

/* TWO-WAYS-Grid */
.two-ways {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .two-ways { grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch; }
}
.two-ways > .choice-card { height: 100%; }

/* Single-column variant: when only one choice is rendered */
.two-ways.is-single { display: block; max-width: 880px; margin-inline: auto; }
.two-ways.is-single > .choice-card { height: auto; }

/* === INTEGRATION ACCORDION =========================================== */
/* Pattern: <details class="integration"> mit <summary class="integration-summary">
   und Body via .integration-body. Echte Logos aus /img/integrations/. */

.integration-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 768px) {
  .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.integration {
  border-radius: 1rem;
  border: 1px solid #e8e9ee;
  background: #ffffff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.integration:hover {
  border-color: #d4d5e0;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.16);
}
.integration[open] {
  border-color: #b8bac7;
  box-shadow: 0 14px 40px -22px rgba(15, 23, 42, 0.18);
}

.integration-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.integration-summary::-webkit-details-marker { display: none; }
.integration-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.18);
  border-radius: 1rem;
}

.integ-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: #f7f8fa;
  border: 1px solid #eef0f3;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0.4rem;
}
.integ-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.integ-logo svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #0a0b14;
}

.integration-summary-text {
  min-width: 0;
  flex: 1;
}
.integration-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.25;
  margin: 0;
}
.integration-short {
  font-size: 0.875rem;
  color: #4a4d63;
  line-height: 1.45;
  margin: 0.2rem 0 0;
}

.integration-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}
.integration-category {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4d63;
  white-space: nowrap;
}
.integration-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #f4f5f8;
  color: #0a0b14;
  transition: transform .25s ease, background-color .2s ease;
}
.integration:hover .integration-toggle { background: #eaecf1; }
.integration[open] .integration-toggle { transform: rotate(180deg); background: #0a0b14; color: #ffffff; }
.integration-toggle svg { width: 0.9rem; height: 0.9rem; }

.integration-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid #f0f1f4;
  margin-top: 0;
}
.integration-body-inner {
  padding-top: 1rem;
}
.integration-body-headline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a4d63;
  margin: 0 0 0.6rem;
}
.integration-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .integration-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.integration-tools li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: #2c2e44;
  line-height: 1.5;
}
.integration-tools li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.18rem;
  color: #0a0b14;
}
.integration-body-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed #eef0f3;
}
.integration-tools-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
}
.integration-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: #f4f5f8;
  color: #0a0b14;
  border: 1px solid #e8e9ee;
}
.integration-status .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #16a34a;
}
.integration-status.is-plugin .dot { background: #2563eb; }
.integration-status.is-custom .dot { background: #f59e0b; }
.integration-status.is-in-progress { background: #fff8eb; border-color: #f8e3b0; color: #5b4209; }
.integration-status.is-in-progress .dot {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  animation: status-pulse 2s ease-in-out infinite;
}
.integration-status.is-planned { background: #f4f5f8; border-color: #e1e3ea; color: #4a4d63; }
.integration-status.is-planned .dot {
  background: transparent;
  border: 1.5px dashed #6b6e85;
  width: 0.6rem;
  height: 0.6rem;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

/* ============================================================
   STATUS-INDIKATOREN auf Logo-Tiles und Integ-Tiles
   Kleines Badge auf In-Arbeit / Geplant Tiles + visuelle Differenzierung.
   ============================================================ */
.logo-tile { position: relative; }
.logo-tile.is-in-progress .logo-tile-icon img,
.logo-tile.is-planned .logo-tile-icon img {
  filter: grayscale(0.45) opacity(0.85);
}
.logo-tile.is-planned .logo-tile-icon img {
  filter: grayscale(0.75) opacity(0.65);
}
.tile-status-pill {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e8e9ee;
  color: #4a4d63;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.tile-status-pill.is-in-progress {
  background: #fff8eb;
  border-color: #f8e3b0;
  color: #5b4209;
}
.tile-status-pill.is-in-progress::before {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  background: #f59e0b;
  border-radius: 999px;
  margin-right: 0.25rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  animation: status-pulse 2s ease-in-out infinite;
}
.tile-status-pill.is-planned {
  background: #f4f5f8;
  border-color: #e1e3ea;
  color: #4a4d63;
}
.tile-status-pill.is-planned::before {
  content: "";
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  border: 1.2px dashed #6b6e85;
  border-radius: 999px;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* Auf den kleineren Integ-Tiles (use-cases) zeigen wir nur einen Status-Dot oben rechts */
.integ-tile { position: relative; }
.integ-tile.is-in-progress .integ-tile-icon img,
.integ-tile.is-planned .integ-tile-icon img {
  filter: grayscale(0.5) opacity(0.8);
}
.integ-tile.is-planned .integ-tile-icon img {
  filter: grayscale(0.8) opacity(0.6);
}
.integ-tile-status-dot {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 2px #fff;
}
.integ-tile-status-dot.is-planned {
  background: transparent;
  border: 1.2px dashed #6b6e85;
}

/* Status-Legende (kleine Box, die die drei Statuses erklärt) */
.status-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e8e9ee;
  font-size: 0.75rem;
  color: #4a4d63;
}
.status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.status-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.status-legend-dot.is-live { background: #16a34a; }
.status-legend-dot.is-in-progress {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  animation: status-pulse 2s ease-in-out infinite;
}
.status-legend-dot.is-planned {
  background: transparent;
  border: 1.5px dashed #6b6e85;
}

/* INTEGRATION TILE in Index-Page (Standard-Block & Trust-Bar):
   Vorhandene .integ-tile soll Logos statt SVG-Glyphen rendern. */
.integ-tile-icon.has-logo {
  background: #ffffff;
  border: 1px solid #e8e9ee;
  padding: 2px;
}
.integ-tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Logo-Tile (grosse Trust-Bar Tiles auf der Integrationen-Sektion) */
.logo-tile.has-logo .logo-tile-icon {
  background: #ffffff;
  border: 1px solid #e8e9ee;
  padding: 0.45rem;
}
.logo-tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   BILLING TOGGLE (Jährlich / Monatlich)
   Pill-Switch in Langdock-Stil: weiße Pille auf hellgrauem Track,
   schwarzer Active-State, dezenter Shadow.
   ============================================================ */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem;
  background-color: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 999px;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
}
.billing-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  background: transparent;
  color: #4a4d63;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.billing-toggle-btn:hover {
  color: #0a0b14;
}
.billing-toggle-btn:focus-visible {
  outline: 2px solid #0a0b14;
  outline-offset: 2px;
}
.billing-toggle-btn.is-active {
  background-color: #0a0b14;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    0 1px 2px 0 rgba(15, 23, 42, 0.10),
    0 6px 18px -10px rgba(15, 23, 42, 0.35);
}
.billing-toggle-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.08);
  color: #0a0b14;
}
.billing-toggle-btn.is-active .billing-toggle-badge {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.price-value {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.15s ease;
}
.price-value.is-switching {
  opacity: 0.4;
}

/* ===== App-Tier-Card (Multi-KI-Chat 4 Stufen) ===== */
.app-tier-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.app-tier-card:hover {
  border-color: var(--border-soft);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -18px rgba(15, 23, 42, 0.18);
}
.app-tier-card.is-featured {
  border-color: #0a0b14;
  box-shadow: 0 16px 40px -20px rgba(15, 23, 42, 0.28);
}
.app-tier-card-badge {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: #0a0b14;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.app-tier-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.app-tier-card-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a0b14;
}
.app-tier-card-tagline {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.app-tier-card-price {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
}
.app-tier-card-amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0a0b14;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-tier-card-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.app-tier-card-list {
  margin-top: 1.25rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.app-tier-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.45;
}

/* ===== Zusatz-Apps Collapsible ===== */
.zusatz-apps {
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1.25rem;
  overflow: hidden;
}
.zusatz-apps[open] {
  border-color: var(--border-soft);
}
.zusatz-apps-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.75rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: background-color 0.15s ease;
}
.zusatz-apps-summary::-webkit-details-marker { display: none; }
.zusatz-apps-summary:hover {
  background-color: var(--bg-elev-2);
}
.zusatz-apps-summary-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.zusatz-apps-summary-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zusatz-apps-summary-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a0b14;
}
.zusatz-apps-summary-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.zusatz-apps-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0a0b14;
  background: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}
.zusatz-apps-summary-label-open { display: none; }
.zusatz-apps[open] .zusatz-apps-summary-label-closed { display: none; }
.zusatz-apps[open] .zusatz-apps-summary-label-open { display: inline; }
.zusatz-apps[open] .zusatz-apps-summary-toggle svg { transform: rotate(180deg); }
.zusatz-apps-body {
  padding: 0 1.75rem 1.75rem;
  border-top: 1px solid var(--border-hairline);
  padding-top: 1.5rem;
}
.zusatz-apps-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-elev-2);
  border-radius: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.55;
}
.zusatz-apps-note svg {
  color: #0a0b14;
}

/* App-Card Flag (Kampfpreis) */
.app-card-flag {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: #0a0b14;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  z-index: 1;
}

/* ===== Website-Builder-Card ===== */
.website-builder-card {
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1.5rem;
  padding: 2.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .website-builder-card { grid-template-columns: 1.6fr 1fr; align-items: center; }
}
.website-builder-features {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.website-builder-features > div {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.55;
}
.website-builder-price {
  background: var(--bg-elev-2);
  border-radius: 1rem;
  padding: 1.75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ===== Beispielrechnungen ===== */
.example-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.example-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -18px rgba(15, 23, 42, 0.18);
}
.example-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.example-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a0b14;
  margin-top: 0.6rem;
}
.example-card-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.example-card-rows {
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.example-card-rows li {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.45;
}
.example-card-rows li span:last-child {
  font-weight: 600;
  color: #0a0b14;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.example-card-total {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.example-card-total span:first-child {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.example-card-total span:last-child {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0a0b14;
  font-variant-numeric: tabular-nums;
}

/* ===== Volume-Card (Sonderpreise) ===== */
.volume-card {
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.volume-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -18px rgba(15, 23, 42, 0.18);
}
.volume-card.is-featured {
  border-color: #0a0b14;
  box-shadow: 0 16px 40px -20px rgba(15, 23, 42, 0.28);
}
.volume-card-tier {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.volume-card-count {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0a0b14;
  line-height: 1;
  margin-top: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.volume-card-label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.volume-card-desc {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.55;
}

/* ============================================================
   SEARCH-SLIT — E-Mail-Capture im Hero (peec.ai-Stil)
   Pill-Container mit Icon links, Input mittig, Button rechts
   ============================================================ */
.search-slit-form {
  position: relative;
}

.search-slit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border: 1px solid #e8e9ee;
  border-radius: 9999px;
  padding: 6px 6px 6px 18px;
  box-shadow:
    0 1px 2px 0 rgba(15, 23, 42, 0.04),
    0 12px 32px -16px rgba(15, 23, 42, 0.18);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.search-slit:focus-within {
  border-color: #0a0b14;
  box-shadow:
    0 0 0 4px rgba(15, 23, 42, 0.08),
    0 1px 2px 0 rgba(15, 23, 42, 0.06),
    0 16px 40px -16px rgba(15, 23, 42, 0.25);
}

.search-slit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b6e85;
  margin-right: 10px;
  flex-shrink: 0;
}

.search-slit-icon svg {
  width: 18px;
  height: 18px;
}

.search-slit-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  color: #0a0b14;
  padding: 12px 8px 12px 0;
  font-family: inherit;
  letter-spacing: -0.01em;
}

.search-slit-input::placeholder {
  color: #9ca0b3;
}

.search-slit-input:focus {
  outline: 0;
  box-shadow: none;
}

.search-slit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  padding: 0.7rem 1.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background-color: #0a0b14;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    0 1px 2px 0 rgba(15, 23, 42, 0.10);
  transition: transform 0.15s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.search-slit-btn:hover {
  background-color: #1a1c2e;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    0 2px 6px 0 rgba(15, 23, 42, 0.14),
    0 12px 30px -10px rgba(15, 23, 42, 0.45);
}

.search-slit-btn:active {
  transform: translateY(0);
}

.search-slit-btn:focus-visible {
  outline: 2px solid #0a0b14;
  outline-offset: 3px;
}

.search-slit-btn:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.search-slit-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: #4a4d63;
  line-height: 1.5;
}

.search-slit-hint svg {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  color: #6b6e85;
}

/* Mobile: Suchschlitz wird zur Spalte, damit der Button auf kleinen Screens nicht abschneidet */
@media (max-width: 520px) {
  .search-slit {
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    padding: 14px;
    gap: 10px;
  }
  .search-slit-icon {
    display: none;
  }
  .search-slit-input {
    padding: 6px 10px;
    text-align: left;
    font-size: 1rem;
  }
  .search-slit-btn {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
  }
}

/* Statusmeldungen */
#website-draft-status:empty {
  display: none;
}
#website-draft-status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}
#website-draft-status.is-success {
  color: #0a0b14;
  font-weight: 600;
}
#website-draft-status.is-error {
  color: #b91c1c;
}


/* ============================================================
   3D-Logo-Orbit (partials/components/orbit-stage.php)
   Live-Integrationen kreisen in einer grauen Punktwolke um das
   Cortexion-Zentrum. Genutzt auf Startseite + Integrationen-Seite.
   ============================================================ */

/* Zweispaltiges Layout ab Desktop: Text links, Orbit rechts */
.integrations-hero-grid {
  display: block;
}
@media (min-width: 1024px) {
  .integrations-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    gap: 3rem;
    align-items: center;
  }
}

/* Bühne für Punktwolke + Logos */
.orbit-stage {
  position: relative;
  height: clamp(300px, 82vw, 430px);
  max-width: 34rem;
  margin: 3rem auto 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 1024px) {
  .orbit-stage {
    height: 480px;
    max-width: none;
    margin: 0;
  }
}

.orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orbit-canvas-front {
  z-index: 2000;
}

/* Logo-Chips: Position/Skalierung setzt js/integrations-orbit.js.
   scale(0) als Startwert verhindert einen Flash oben links vor dem ersten Frame. */
.orbit-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px -12px rgba(10, 11, 20, 0.22);
  transform: translate(-50%, -50%) scale(0);
  will-change: transform, opacity;
}
.orbit-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Cortexion-Zentrum mit Puls-Ring */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid var(--border-hairline);
  border-radius: 1rem;
  box-shadow: 0 18px 40px -16px rgba(10, 11, 20, 0.3);
  transform: translate(-50%, -50%);
}
.orbit-center svg {
  width: 100%;
  height: 100%;
  display: block;
}
.orbit-center::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(107, 110, 133, 0.4);
  animation: orbit-pulse 3.2s ease-out infinite;
  pointer-events: none;
}

@keyframes orbit-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.4); }
  100% { opacity: 0;   transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-center::before {
    animation: none;
    opacity: 0;
  }
}


/* ============================================================
   Modell-Router (partials/components/model-router-stage.php)
   Animierte Chat-Bühne: Beispiel-Prompt wird getippt und in vier
   Aufgaben mit jeweils passendem KI-Modell zerlegt.
   Genutzt auf Startseite + KI-Chat-Seite ("Pro Aufgabe das
   richtige Modell"). Ohne JS / bei reduzierter Bewegung zeigt
   die Bühne den Endzustand (Default-Styles); die Klasse .mr-anim
   wird nur von js/model-router.js gesetzt.
   ============================================================ */

.mr-stage {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .mr-stage { max-width: none; }
}

.mr-window {
  background: #ffffff;
  border: 1px solid #e0e1e8;
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 24px 60px -28px rgba(15, 23, 42, 0.28);
  padding-bottom: 1rem;
  overflow: hidden;
}

.mr-titlebar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #eef0f4;
  background: #fafbfc;
}
.mr-tb-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #e0e1e8;
}
.mr-tb-title {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b6e85;
}

/* Eingabefeld mit getipptem Prompt */
.mr-input {
  margin: 1rem 1rem 0;
  border: 1px solid #e0e1e8;
  border-radius: 0.875rem;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
  padding: 0.85rem 0.95rem 0.75rem;
  transition: border-color 0.3s ease, opacity 0.45s ease;
}
.mr-anim:not(.is-sent) .mr-input { border-color: #c7c9d4; }

.mr-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #2c2e44;
  min-height: var(--mr-text-h, auto);
  transition: opacity 0.35s ease;
}
.is-sent .mr-text { opacity: 0.5; }

.mr-caret {
  display: none;
  width: 2px;
  height: 1.05em;
  background: #0a0b14;
  vertical-align: -0.15em;
  margin-left: 1px;
  animation: mr-caret 1s steps(2, start) infinite;
}
.mr-anim .mr-caret { display: inline-block; }
.mr-anim.is-sent .mr-caret { display: none; }
@keyframes mr-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.mr-inputbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.mr-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  color: #6b6e85;
  flex: none;
}
.mr-plus svg { width: 0.85rem; height: 0.85rem; }

.mr-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2c2e44;
  background: #fafbfc;
  white-space: nowrap;
  min-width: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mr-auto svg { width: 0.8rem; height: 0.8rem; color: #8b5cf6; flex: none; }
.mr-auto-sub {
  font-weight: 500;
  color: #6b6e85;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 460px) {
  .mr-auto-sub { display: none; }
}
.is-routing .mr-auto {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.mr-send {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.55rem;
  background: #0a0b14;
  color: #ffffff;
  flex: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mr-send svg { width: 0.9rem; height: 0.9rem; }
.is-sent .mr-send {
  transform: scale(0.9);
  box-shadow: 0 0 0 4px rgba(10, 11, 20, 0.12);
}

/* Statuszeile zwischen Eingabe und Aufgabenliste */
.mr-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 1rem 0;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
  transition: opacity 0.3s ease;
}
.mr-anim .mr-status { opacity: 0; }
.mr-anim.is-routing .mr-status { opacity: 1; }
.mr-status > .mr-spinner { display: none; }
.mr-anim .mr-status > .mr-spinner { display: inline-block; }
.mr-anim.is-planned .mr-status > .mr-spinner { display: none; }
.mr-status-check {
  width: 0.9rem;
  height: 0.9rem;
  color: #16a34a;
  flex: none;
}
.mr-anim .mr-status-check { display: none; }
.mr-anim.is-planned .mr-status-check { display: block; }

.mr-spinner {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid #e0e1e8;
  border-top-color: #6b6e85;
  animation: mr-spin 0.8s linear infinite;
  flex: none;
}
@keyframes mr-spin {
  to { transform: rotate(360deg); }
}

/* Aufgabenliste: pro Aufgabe das passende Modell */
.mr-tasks {
  list-style: none;
  margin: 0.7rem 1rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.45s ease;
}
.mr-task {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #fafbfc;
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease;
}
/* Vor dem Einblenden: Zeile als dezenter Skeleton-Platzhalter,
   die Inhalte selbst faden erst mit .is-on ein. */
.mr-anim .mr-task {
  border-color: #f1f2f6;
  background: #fbfbfd;
}
.mr-anim .mr-task > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mr-anim .mr-task.is-on {
  border-color: #e8e9ee;
  background: #fafbfc;
}
.mr-anim .mr-task.is-on > * {
  opacity: 1;
  transform: none;
}
.mr-anim .mr-task.is-done { border-color: #bbf7d0; }

.mr-task-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: #ffffff;
  border: 1px solid #e8e9ee;
  color: #4a4d63;
  flex: none;
}
.mr-task-icon svg { width: 1rem; height: 1rem; }

.mr-task-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.mr-task-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.3;
}
.mr-task-why {
  font-size: 0.68rem;
  color: #6b6e85;
  line-height: 1.3;
}
@media (max-width: 400px) {
  .mr-task-why { display: none; }
}

.mr-model {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: none;
}
.mr-model > .mr-spinner { display: none; }
.mr-anim .mr-task.is-on:not(.is-resolved) .mr-model > .mr-spinner { display: inline-block; }

.mr-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #e0e1e8;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 400px) {
  .mr-model-chip { font-size: 0.65rem; padding: 0.2rem 0.45rem; }
}
.mr-anim .mr-model-chip {
  opacity: 0;
  transform: scale(0.8);
}
.mr-anim .mr-task.is-resolved .mr-model-chip {
  opacity: 1;
  transform: none;
}

.mr-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}
.mr-dot-anthropic { background: #d97757; }
.mr-dot-openai { background: #10a37f; }
.mr-dot-google { background: #4285f4; }
.mr-dot-mistral { background: #fa500f; }

.mr-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  flex: none;
  margin-left: 0.35rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mr-check svg { width: 0.65rem; height: 0.65rem; }
.mr-anim .mr-task:not(.is-done) > .mr-check {
  opacity: 0;
  transform: scale(0.5);
}
.mr-anim .mr-task.is-done > .mr-check {
  opacity: 1;
  transform: none;
}

/* Sanfter Abgang vor dem Loop-Neustart */
.is-leaving .mr-input,
.is-leaving .mr-tasks,
.is-leaving .mr-status { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mr-spinner,
  .mr-caret { animation: none; }
}


/* ============================================================
   Team-Freigabe (partials/components/share-stage.php)
   Animierter "Chat freigeben"-Dialog: Ein Cursor setzt Häkchen
   bei Kollegen, wählt Rechte-Stufen (Ansehen/Bearbeiten/
   Vollzugriff) und speichert die Freigabe. Fenster-Rahmen kommt
   von den generischen .mr-window/.mr-titlebar-Klassen.
   Genutzt auf Startseite + KI-Chat-Seite ("Ein Chat. Alle
   Top-Modelle. Das ganze Team."). Ohne JS / bei reduzierter
   Bewegung zeigt die Bühne den Endzustand (Default-Styles);
   die Klasse .sh-anim wird nur von js/share-stage.js gesetzt.
   ============================================================ */

.sh-stage {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .sh-stage { max-width: none; }
}

.sh-window { position: relative; }

.sh-dialog {
  padding: 1rem 1rem 0;
  transition: opacity 0.45s ease;
}

.sh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sh-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0a0b14;
}
.sh-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  color: #6b6e85;
}
.sh-close svg { width: 0.8rem; height: 0.8rem; }

.sh-sub {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #6b6e85;
}

/* Zielgruppen-Tabs: Personen / Gruppen / Mandant */
.sh-tabs {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.8rem;
  background: #f3f4f7;
  border: 1px solid #e8e9ee;
  border-radius: 0.6rem;
  padding: 0.25rem;
}
.sh-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5c5f76;
  white-space: nowrap;
}
.sh-tab svg { width: 0.8rem; height: 0.8rem; flex: none; }
.sh-tab.is-active {
  background: #ffffff;
  color: #0a0b14;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.sh-tab-count {
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0a0b14;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
}
.sh-anim .sh-tab-count {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sh-anim .sh-tab-count.has-count {
  opacity: 1;
  transform: none;
  animation: sh-pop 0.32s ease;
}
@keyframes sh-pop {
  0% { transform: scale(0.55); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Personenliste mit Checkboxen */
.sh-people {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sh-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: #fafbfc;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.sh-person.is-checked {
  border-color: #d9cdf5;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sh-person.is-menu-open { z-index: 5; }
.sh-anim .sh-person.is-done { border-color: #bbf7d0; }

.sh-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid #c7c9d4;
  border-radius: 0.3rem;
  background: #ffffff;
  color: #ffffff;
  flex: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sh-box svg {
  width: 0.72rem;
  height: 0.72rem;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}
.sh-person.is-checked .sh-box {
  background: #0a0b14;
  border-color: #0a0b14;
}
/* Häkchen wird während der Animation "gezeichnet" */
.sh-anim .sh-person:not(.is-checked) .sh-box svg { stroke-dashoffset: 24; }
.sh-anim .sh-person.is-checked .sh-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease 0.05s;
}

.sh-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  flex: none;
}
.sh-av-violet { background: #6d28d9; }
.sh-av-teal { background: #0f766e; }
.sh-av-rose { background: #be123c; }
.sh-av-amber { background: #b45309; }

.sh-person-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.sh-person-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-person-role {
  font-size: 0.65rem;
  color: #6b6e85;
  line-height: 1.3;
}
@media (max-width: 400px) {
  .sh-person-role { display: none; }
}

/* Rechte-Chip (sieht aus wie ein kleines Select) */
.sh-right-wrap {
  margin-left: auto;
  position: relative;
  flex: none;
}
.sh-right {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #e0e1e8;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.28rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (max-width: 400px) {
  .sh-right { font-size: 0.62rem; padding: 0.22rem 0.4rem; }
}
.sh-right svg { width: 0.75rem; height: 0.75rem; flex: none; color: #4a4d63; }
.sh-right svg.sh-chev { width: 0.65rem; height: 0.65rem; color: #9ca0b5; }
.sh-right-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.sh-anim .sh-person:not(.is-checked) .sh-right {
  opacity: 0;
  transform: scale(0.85);
}
.sh-person.is-menu-open .sh-right {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

/* Label-Wechsel Ansehen -> Bearbeiten in der Dropdown-Zeile */
[data-sh-menu-row]:not(.is-edit) .sh-opt-edit { display: none; }
[data-sh-menu-row].is-edit .sh-opt-view { display: none; }

/* Rechte-Dropdown (öffnet nur während der Animation) */
.sh-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 30;
  min-width: 9.5rem;
  background: #ffffff;
  border: 1px solid #e0e1e8;
  border-radius: 0.6rem;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.3);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sh-person.is-menu-open .sh-menu {
  opacity: 1;
  transform: none;
}
.sh-menu-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.sh-menu-item svg { width: 0.75rem; height: 0.75rem; flex: none; color: #4a4d63; }
.sh-menu-item.is-hover { background: #f1ecfc; color: #0a0b14; }

/* Fußzeile mit Speichern-Button */
.sh-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.sh-pill {
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #4a4d63;
  white-space: nowrap;
}
.sh-pill-right { margin-left: auto; }
@media (max-width: 400px) {
  .sh-pill:not(.sh-pill-right) { display: none; }
  .sh-pill-right { margin-left: auto; }
}
.sh-save {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: #0a0b14;
  color: #ffffff;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sh-anim.is-pressed .sh-save {
  transform: scale(0.93);
  box-shadow: 0 0 0 4px rgba(10, 11, 20, 0.12);
}

/* Statuszeile unter dem Dialog (nutzt .mr-spinner) */
.sh-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 1rem 0;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
  transition: opacity 0.3s ease;
}
.sh-anim .sh-status { opacity: 0; }
.sh-anim.is-saving .sh-status { opacity: 1; }
.sh-status > .mr-spinner { display: none; }
.sh-anim .sh-status > .mr-spinner { display: inline-block; }
.sh-anim.is-saved .sh-status > .mr-spinner { display: none; }
.sh-status-check {
  width: 0.9rem;
  height: 0.9rem;
  color: #16a34a;
  flex: none;
}
.sh-anim .sh-status-check { display: none; }
.sh-anim.is-saved .sh-status-check { display: block; }

/* Animierter Maus-Cursor */
.sh-cursor {
  position: absolute;
  left: 70%;
  top: 80%;
  z-index: 40;
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  opacity: 0;
  transform: translate(-3px, -2px);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
  transition:
    left 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    top 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    opacity 0.3s ease,
    transform 0.15s ease;
}
.sh-anim .sh-cursor { display: block; }
.sh-anim.is-live .sh-cursor { opacity: 1; }
.sh-cursor svg { width: 100%; height: 100%; display: block; }
.sh-cursor.is-click { transform: translate(-3px, -2px) scale(0.8); }
.sh-cursor::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.55);
  opacity: 0;
  transform: scale(0.4);
}
.sh-cursor.is-click::after { animation: sh-ripple 0.35s ease-out; }
@keyframes sh-ripple {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* Sanfter Abgang vor dem Loop-Neustart */
.is-leaving .sh-dialog,
.is-leaving .sh-status { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sh-tab-count,
  .sh-cursor { animation: none; }
}

/* ============================================================
   Automatisierungs-Builder (partials/components/workflow-stage.php)
   Animierte "per Chat gebaut"-Bühne: Ein Cursor tippt den Workflow-
   Wunsch in die Chat-Zeile und sendet ab — danach baut Cortexion
   den Workflow selbst (Bausteine fliegen ohne Cursor auf die
   Leinwand), startet den Testlauf ohne Klick und jeder Schritt
   wird samt Token-Verbrauch protokolliert. Fenster-Rahmen kommt
   von den generischen .mr-window/.mr-titlebar-Klassen.
   Genutzt auf der Startseite ("Von einer Idee zum produktiven
   KI-Prozess"). Ohne JS / bei reduzierter Bewegung zeigt die
   Bühne den Endzustand (Default-Styles); die Klasse .wf-anim
   wird nur von js/workflow-stage.js gesetzt.
   ============================================================ */

.wf-stage {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .wf-stage { max-width: none; }
}

.wf-window { position: relative; }

/* Kopfzeile: Name der Automatisierung, Status-Pill, Testlauf-Button */
.wf-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 1rem 0;
  transition: opacity 0.45s ease;
}
.wf-name {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  margin-right: auto;
}
.wf-name-main {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-name-sub {
  font-size: 0.62rem;
  color: #6b6e85;
  line-height: 1.3;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .wf-name-sub { display: none; }
}

.wf-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #e0e1e8;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #4a4d63;
  background: #fafbfc;
  white-space: nowrap;
  flex: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.wf-state-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #9ca0b5;
  flex: none;
  transition: background-color 0.3s ease;
}
.wf-state.is-live {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
.wf-state.is-live .wf-state-dot { background: #22c55e; }

.wf-test {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: #0a0b14;
  color: #ffffff;
  white-space: nowrap;
  flex: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wf-anim.is-pressed .wf-test {
  transform: scale(0.93);
  box-shadow: 0 0 0 4px rgba(10, 11, 20, 0.12);
}

/* Chat-Zeile: Hier wird der Workflow per Satz in Auftrag gegeben.
   Default (ohne JS / reduzierte Bewegung) = Endzustand: Satz steht
   im Feld, Send-Button zeigt den grünen Gesendet-Haken. */
.wf-prompt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.8rem 1rem 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.7rem;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.45s ease;
}
.wf-anim.is-focus .wf-prompt {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.wf-prompt-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.45rem;
  background: #ede9fe;
  color: #6d28d9;
  flex: none;
}
.wf-prompt-ic svg { width: 0.85rem; height: 0.85rem; }
.wf-prompt-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  min-height: 2.7em;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #2c2e44;
}
@media (max-width: 480px) {
  .wf-prompt-text { min-height: 4.05em; font-size: 0.7rem; }
}
.wf-caret {
  display: none;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  background: #0a0b14;
  vertical-align: -0.15em;
  animation: mr-caret 1s steps(2, start) infinite;
}
.wf-anim.is-focus:not(.is-sent) .wf-caret { display: inline-block; }
.wf-placeholder { display: none; color: #6b6e85; }
.wf-anim .wf-prompt-text span[data-wf-text]:empty ~ .wf-placeholder { display: inline; }
.wf-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.55rem;
  background: #16a34a;
  color: #ffffff;
  flex: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.wf-send svg { width: 0.8rem; height: 0.8rem; }
.wf-send .wf-send-arrow { display: none; }
.wf-anim:not(.is-sent) .wf-send { background: #0a0b14; }
.wf-anim:not(.is-sent) .wf-send .wf-send-arrow { display: block; }
.wf-anim:not(.is-sent) .wf-send .wf-send-check { display: none; }
.wf-anim.is-sent .wf-send {
  transform: scale(0.92);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}
/* Nach dem Senden bleibt der Satz sichtbar, tritt aber zurück */
.wf-anim.is-sent .wf-prompt-text { color: #6b6e85; }

/* Sobald Cortexion übernimmt, verschwindet der Mauszeiger:
   Bauen und Testlauf laufen ohne einen einzigen Klick.
   (.is-live.is-handsfree schlägt die spätere .is-live-Regel) */
.wf-anim.is-live.is-handsfree .wf-cursor { opacity: 0; }

/* Baustein-Leiste (Palette) */
.wf-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.8rem 1rem 0;
  padding: 0.5rem 0.6rem;
  background: #f7f8fa;
  border: 1px solid #eef0f4;
  border-radius: 0.7rem;
  transition: opacity 0.45s ease;
}
.wf-palette-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c5f76;
  margin-right: 0.15rem;
}
@media (max-width: 460px) {
  .wf-palette-label { width: 100%; }
}

.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #e0e1e8;
  background: #ffffff;
  border-radius: 0.55rem;
  padding: 0.28rem 0.55rem 0.28rem 0.32rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
@media (max-width: 400px) {
  .wf-chip { font-size: 0.65rem; }
}
.wf-chip.is-grabbed {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
  transform: scale(0.95);
  opacity: 0.55;
}

/* Getönte Icon-Kacheln pro Baustein-Typ */
.wf-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 0.4rem;
  flex: none;
}
.wf-ic svg { width: 0.75rem; height: 0.75rem; }
.wf-ic-trigger { background: #fef3c7; color: #b45309; }
.wf-ic-assist { background: #ede9fe; color: #6d28d9; }
.wf-ic-cond { background: #e0f2fe; color: #0369a1; }
.wf-ic-action { background: #d1fae5; color: #047857; }

/* Leinwand: vier Baustein-Slots, verbunden durch Linien */
.wf-canvas {
  margin: 0.8rem 1rem 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.45s ease;
}

.wf-slot { position: relative; }

.wf-node {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: #fafbfc;
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.wf-node .wf-ic {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
}
.wf-node .wf-ic svg { width: 1rem; height: 1rem; }

.wf-node-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.wf-node-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0a0b14;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-node-sub {
  font-size: 0.66rem;
  color: #6b6e85;
  line-height: 1.3;
}
@media (max-width: 400px) {
  .wf-node-sub { display: none; }
}

/* Während der Animation: Slot als gestrichelte Ablagefläche,
   der Baustein selbst faded erst beim Drop ein. */
.wf-drop {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #d4d6df;
  border-radius: 0.75rem;
  background: #fbfbfd;
  font-size: 0.66rem;
  font-weight: 600;
  color: #5c5f76;
  transition: opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.wf-anim .wf-drop { display: flex; }
.wf-drop.is-target {
  border-color: #8b5cf6;
  color: #7c3aed;
  background: #f7f4fe;
}
.wf-anim .wf-slot.is-on .wf-drop { opacity: 0; }

.wf-anim .wf-slot:not(.is-on) .wf-node {
  opacity: 0;
  transform: scale(0.94);
}
.wf-slot.is-flash .wf-node { animation: wf-land 0.5s ease-out; }
@keyframes wf-land {
  0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.35); }
  100% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
}

/* Testlauf: laufender Schritt violett, fertiger Schritt grün */
.wf-anim .wf-slot.is-running .wf-node {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.wf-anim .wf-slot.is-done .wf-node { border-color: #bbf7d0; }

/* Verbindungslinien zwischen den Bausteinen */
.wf-link {
  width: 2px;
  height: 1.05rem;
  margin-left: calc(1.7rem - 1px);
  background: #e0e1e8;
  transform-origin: top;
  transition: transform 0.35s ease, background-color 0.3s ease;
}
.wf-anim .wf-link:not(.is-draw) { transform: scaleY(0); }
.wf-link.is-flow { background: #8b5cf6; }

/* Rechte Seite eines Bausteins: Spinner -> Protokoll-Chip + Häkchen */
.wf-run {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}
.wf-run > .mr-spinner { display: none; }
.wf-anim .wf-slot.is-running .wf-run > .mr-spinner { display: inline-block; }

.wf-meta {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0e1e8;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (max-width: 400px) {
  .wf-meta { font-size: 0.6rem; padding: 0.18rem 0.4rem; }
}
.wf-anim .wf-meta {
  opacity: 0;
  transform: scale(0.8);
}
.wf-anim .wf-slot.is-done .wf-meta {
  opacity: 1;
  transform: none;
}

.wf-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  flex: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wf-check svg { width: 0.65rem; height: 0.65rem; }
.wf-anim .wf-slot:not(.is-done) .wf-check {
  opacity: 0;
  transform: scale(0.5);
}

/* Statuszeile unter der Leinwand (nutzt .mr-spinner) */
.wf-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 1rem 0;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
  transition: opacity 0.3s ease;
}
/* Auf schmalen Screens bricht der End-Status auf 2 Zeilen um —
   Platz dafür fest reservieren, damit das Fenster nicht springt. */
@media (max-width: 480px) {
  .wf-status { min-height: 3em; }
}
.wf-anim .wf-status { opacity: 0; }
.wf-anim.is-building .wf-status,
.wf-anim.is-testing .wf-status,
.wf-anim.is-tested .wf-status { opacity: 1; }
.wf-status > .mr-spinner { display: none; }
.wf-anim.is-building .wf-status > .mr-spinner,
.wf-anim.is-testing .wf-status > .mr-spinner { display: inline-block; }
.wf-status-check {
  width: 0.9rem;
  height: 0.9rem;
  color: #16a34a;
  flex: none;
}
.wf-anim .wf-status-check { display: none; }
.wf-anim.is-tested .wf-status-check { display: block; }

/* Ghost-Chip, der beim Ziehen am Cursor hängt.
   Bewegung über transform + CSS-Variablen (--wf-x/--wf-y aus dem JS)
   statt left/top — so zählt die Fahrt nicht als Layout-Shift. */
.wf-ghost {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 35;
  display: none;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #c9b8f2;
  background: #ffffff;
  border-radius: 0.55rem;
  padding: 0.28rem 0.55rem 0.28rem 0.32rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--wf-x, 0px), var(--wf-y, 0px)) translate(-50%, -135%) rotate(-2deg);
  pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.35);
  transition:
    transform 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    opacity 0.25s ease;
}
.wf-anim .wf-ghost { display: inline-flex; }
.wf-ghost.is-on { opacity: 1; }
.wf-ghost.is-drop {
  opacity: 0;
  transform: translate(var(--wf-x, 0px), var(--wf-y, 0px)) translate(-50%, -135%) rotate(-2deg) scale(0.85);
}

/* Animierter Maus-Cursor (gleiche Machart wie .sh-cursor);
   Bewegung wie beim Ghost über transform-Variablen, der Klick-Squash
   liegt auf dem SVG, damit er die Fahrt nicht unterbricht. */
.wf-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  opacity: 0;
  transform: translate(var(--wf-x, 0px), var(--wf-y, 0px)) translate(-3px, -2px);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
  transition:
    transform 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    opacity 0.3s ease;
}
.wf-anim .wf-cursor { display: block; }
.wf-anim.is-live .wf-cursor { opacity: 1; }
.wf-cursor svg { width: 100%; height: 100%; display: block; transition: transform 0.15s ease; }
.wf-cursor.is-click svg { transform: scale(0.78); }
.wf-cursor::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.55);
  opacity: 0;
  transform: scale(0.4);
}
.wf-cursor.is-click::after { animation: sh-ripple 0.35s ease-out; }

/* Sanfter Abgang vor dem Loop-Neustart */
.is-leaving .wf-head,
.is-leaving .wf-prompt,
.is-leaving .wf-palette,
.is-leaving .wf-canvas,
.is-leaving .wf-status { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wf-cursor,
  .wf-slot.is-flash .wf-node { animation: none; }
}

/* ============================================================
   Wissensdatenbank (partials/components/kb-stage.php)
   Animierte Bühne mit zwei Szenen: 1) Eine eingehende Kunden-Mail
   wird mit zitiertem Firmenwissen (Produktkatalog, Branchen-Regeln,
   Blog, gesendete E-Mails) beantwortet. 2) Ein neuer Mitarbeiter
   fragt das Firmenwissen und bekommt konkrete Antworten (Spesen,
   Sommerfest, Ansprechpartner). Fenster-Rahmen kommt von den
   generischen .mr-window/.mr-titlebar-Klassen, Status-Pill von
   .wf-state. Ohne JS / bei reduzierter Bewegung zeigt die Bühne
   den Endzustand von Szene 1 (Default-Styles); die Klasse .kb-anim
   wird nur von js/kb-stage.js gesetzt.
   ============================================================ */

.kb-stage {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .kb-stage { max-width: none; }
}

/* Kopfzeile: Titel + Szenen-Label + Auto-Sync-Pill */
.kb-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 1rem 0;
  transition: opacity 0.45s ease;
}
.kb-head-name {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  margin-right: auto;
}
.kb-head-main {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-head-sub {
  font-size: 0.62rem;
  color: #6b6e85;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zweispaltiger Rumpf: Quellen-Leiste + Szenen-Panel */
.kb-body {
  display: grid;
  gap: 0.7rem;
  margin: 0.8rem 1rem 0;
  transition: opacity 0.45s ease;
}
@media (min-width: 640px) {
  .kb-body { grid-template-columns: 13.5rem minmax(0, 1fr); }
}

.kb-sources {
  border: 1px solid #eef0f4;
  border-radius: 0.7rem;
  background: #f7f8fa;
  padding: 0.55rem 0.6rem;
  align-self: start;
}
.kb-sources-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c5f76;
  margin-bottom: 0.45rem;
}
.kb-src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* Unter 640px wird die Leiste zu einer Chip-Reihe über dem Panel */
@media (max-width: 639px) {
  .kb-src-list { flex-direction: row; flex-wrap: wrap; }
}

.kb-src {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #e0e1e8;
  background: #ffffff;
  border-radius: 0.55rem;
  padding: 0.32rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: #2c2e44;
  min-width: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.kb-src.is-read {
  border-color: #8b5cf6;
  background: #f7f4fe;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.kb-src-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.4rem;
  border: 1px solid #e8e9ee;
  background: #fafbfc;
  color: #4a4d63;
  flex: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.kb-src-ic svg { width: 0.78rem; height: 0.78rem; }
.kb-src.is-read .kb-src-ic { color: #7c3aed; border-color: #ddd0f8; }
.kb-src-label {
  line-height: 1.25;
  min-width: 0;
}
@media (max-width: 639px) {
  .kb-src-label { white-space: nowrap; }
}
.kb-src-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  flex: none;
  margin-left: auto;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.kb-src-check svg { width: 0.55rem; height: 0.55rem; }
.kb-src.is-used .kb-src-check {
  opacity: 1;
  transform: none;
}
@media (max-width: 639px) {
  .kb-src-check { margin-left: 0.05rem; }
}

/* Szenen-Panel: immer nur eine Szene sichtbar, Höhe wird per JS
   auf die höhere der beiden Szenen fixiert (kein Layout-Springen) */
.kb-panel {
  position: relative;
  min-width: 0;
}
.kb-scene {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  transition: opacity 0.4s ease;
}
.kb-scene.is-active { display: flex; }
.kb-scene.is-out { opacity: 0; }

/* Eingehende E-Mail (Szene 1) */
.kb-mail {
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  background: #fafbfc;
  padding: 0.6rem 0.7rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.kb-anim .kb-mail {
  opacity: 0;
  transform: translateY(-8px);
}
.kb-anim .kb-mail.is-in {
  opacity: 1;
  transform: none;
}
.kb-mail-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.kb-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.62rem;
  font-weight: 700;
  flex: none;
}
.kb-avatar-new {
  background: #fef3c7;
  color: #b45309;
}
.kb-mail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}
.kb-mail-from {
  font-size: 0.66rem;
  color: #6b6e85;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-mail-subj {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.3;
}
.kb-mail-badge {
  margin-left: auto;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  flex: none;
}
.kb-mail-body {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #4a4d63;
}

/* Frage des neuen Mitarbeiters (Szene 2) */
.kb-q {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  background: #fafbfc;
  padding: 0.6rem 0.7rem;
}
.kb-q-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.kb-q-name {
  font-size: 0.66rem;
  color: #6b6e85;
  line-height: 1.3;
}
.kb-q-text {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #2c2e44;
  min-height: var(--kb-q-h, auto);
}
.kb-q-text .mr-caret { display: none; }
.kb-anim .kb-q-text .mr-caret { display: inline-block; }
.kb-anim .is-asked .kb-q-text .mr-caret { display: none; }

/* Antwort-Karte mit zitierten Quellen (beide Szenen) */
.kb-draft {
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.6rem 0.7rem 0.7rem;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.kb-draft.is-done {
  border-color: #bbf7d0;
  animation: kb-ready 0.55s ease-out;
}
@keyframes kb-ready {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
  100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}
.kb-draft-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  transition: opacity 0.35s ease;
}
.kb-anim .kb-scene:not(.is-writing):not(.is-answered) .kb-draft-head { opacity: 0.35; }
.kb-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #ddd0f8;
  background: #f7f4fe;
  color: #6d28d9;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.kb-ai-badge svg { width: 0.7rem; height: 0.7rem; flex: none; }
.kb-draft-to {
  font-size: 0.62rem;
  color: #6b6e85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kb-line {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.6rem;
  background: #fafbfc;
  padding: 0.45rem 0.55rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
/* Vor dem Einblenden: Zeile als dezenter Skeleton-Platzhalter,
   die Inhalte selbst faden erst mit .is-on ein (gleiches Muster
   wie .mr-task). */
.kb-anim .kb-line {
  border-color: #f1f2f6;
  background: #fbfbfd;
}
.kb-anim .kb-line > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.kb-anim .kb-line.is-on {
  border-color: #e8e9ee;
  background: #fafbfc;
}
.kb-anim .kb-line.is-on > * {
  opacity: 1;
  transform: none;
}
.kb-line-text {
  font-size: 0.74rem;
  line-height: 1.5;
  color: #2c2e44;
}
.kb-cite {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  border: 1px solid #e0e1e8;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  color: #4a4d63;
  max-width: 100%;
}
.kb-cite svg { width: 0.6rem; height: 0.6rem; flex: none; color: #7c3aed; }

/* Statuszeile unter dem Rumpf (nutzt .mr-spinner) */
.kb-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 1rem 0;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
  transition: opacity 0.3s ease;
}
.kb-anim .kb-status { opacity: 0; }
.kb-anim.is-busy .kb-status,
.kb-anim.is-ready .kb-status { opacity: 1; }
.kb-status > .mr-spinner { display: none; }
.kb-anim.is-busy .kb-status > .mr-spinner { display: inline-block; }
.kb-status-check {
  width: 0.9rem;
  height: 0.9rem;
  color: #16a34a;
  flex: none;
}
.kb-anim .kb-status-check { display: none; }
.kb-anim.is-ready .kb-status-check { display: block; }

/* Sanfter Abgang vor dem Loop-Neustart */
.is-leaving .kb-head,
.is-leaving .kb-body,
.is-leaving .kb-status { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .kb-draft.is-done { animation: none; }
}


/* ============================================================
   Zusammenarbeit im geteilten Chat (partials/components/collab-stage.php)
   Animierte Bühne: Im geteilten Chat "Angebot Anton Meyer" baut
   sich ein KI-Arbeitsergebnis (Angebots-Kalkulation) auf, Kollegen
   schreiben live dazu, Miriam Otto tritt bei und reagiert, ein
   Cursor teilt das Ergebnis mit dem Team. Fenster-Rahmen von
   .mr-window/.mr-titlebar, Avatar-Farben von .sh-av-*, Präsenz-Pill
   von .wf-state, KI-Badge von .kb-ai-badge. Ohne JS / bei
   reduzierter Bewegung zeigt die Bühne den Endzustand
   (Default-Styles); .cl-anim setzt nur js/collab-stage.js.
   ============================================================ */

.cl-stage {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .cl-stage { max-width: none; }
}

.cl-window { position: relative; }

/* Chat-Kopf: Titel, Avatar-Stapel, Präsenz-Pill */
.cl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem 0.65rem;
  border-bottom: 1px solid #eef0f4;
  transition: opacity 0.45s ease;
}
.cl-head-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.cl-head-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-head-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.64rem;
  font-weight: 600;
  color: #6b6e85;
}
.cl-head-sub svg { width: 0.68rem; height: 0.68rem; flex: none; }
.cl-head-people {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.cl-presence { white-space: nowrap; }
.cl-anim [data-cl-presence].has-pop {
  display: inline-block;
  animation: sh-pop 0.32s ease;
}

.cl-stack { display: flex; }
.cl-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  flex: none;
}
.cl-stack .cl-avatar { border: 2px solid #ffffff; }
.cl-stack .cl-avatar + .cl-avatar { margin-left: -0.45rem; }
/* Miriam Otto tritt während der Animation bei */
.cl-anim .cl-av-join {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cl-anim .cl-av-join.is-in {
  opacity: 1;
  transform: none;
  animation: sh-pop 0.32s ease;
}

/* Nachrichten-Spalte */
.cl-chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0;
  transition: opacity 0.45s ease;
}

/* KI-Arbeitsergebnis: Angebots-Kalkulation */
.cl-result {
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  background: #fafbfc;
  padding: 0.65rem 0.8rem 0.7rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cl-anim .cl-result {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
.cl-anim .cl-result.is-in {
  opacity: 1;
  transform: none;
}
.cl-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cl-result-ref {
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b6e85;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .cl-result-ref { display: none; }
}

.cl-table {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.36rem 0;
  border-top: 1px solid #eef0f4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cl-row:first-child { border-top: 0; padding-top: 0.1rem; }
.cl-anim .cl-row {
  opacity: 0;
  transform: translateY(5px);
}
.cl-anim .cl-row.is-in {
  opacity: 1;
  transform: none;
}
.cl-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.cl-row-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2c2e44;
  line-height: 1.35;
}
.cl-row-note {
  font-size: 0.62rem;
  color: #6b6e85;
  line-height: 1.35;
}
.cl-row-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cl-row.is-total { border-top: 1px solid #d9dbe3; }
.cl-row.is-total .cl-row-label,
.cl-row.is-total .cl-row-price {
  font-weight: 800;
  color: #0a0b14;
}

/* Aktionen unter dem Ergebnis: Teilen, Kopieren, Reaktion */
.cl-result-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.cl-share {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.3rem 0.62rem;
  font-size: 0.68rem;
  font-weight: 600;
  background: #16a34a;
  color: #ffffff;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}
.cl-share svg { width: 0.72rem; height: 0.72rem; margin-right: 0.32rem; flex: none; }
.cl-share-idle,
.cl-share-done {
  display: inline-flex;
  align-items: center;
}
/* Label-Wechsel: Endzustand "Geteilt", während der Animation erst "Teilen" */
.cl-share .cl-share-idle { display: none; }
.cl-anim .cl-share { background: #0a0b14; }
.cl-anim .cl-share .cl-share-idle { display: inline-flex; }
.cl-anim .cl-share .cl-share-done { display: none; }
.cl-anim.is-shared .cl-share { background: #16a34a; }
.cl-anim.is-shared .cl-share .cl-share-idle { display: none; }
.cl-anim.is-shared .cl-share .cl-share-done { display: inline-flex; }
.cl-anim.is-pressed .cl-share {
  transform: scale(0.93);
  box-shadow: 0 0 0 4px rgba(10, 11, 20, 0.12);
}
.cl-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.28rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #4a4d63;
  white-space: nowrap;
}
.cl-ghost svg { width: 0.72rem; height: 0.72rem; flex: none; }
@media (max-width: 400px) {
  .cl-ghost { display: none; }
}
.cl-react {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #d9cdf5;
  background: #f1ecfc;
  color: #6d28d9;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 700;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cl-react svg { width: 0.72rem; height: 0.72rem; flex: none; }
.cl-anim .cl-react {
  opacity: 0;
  transform: scale(0.5);
}
.cl-anim .cl-react.is-in {
  opacity: 1;
  transform: none;
  animation: sh-pop 0.32s ease;
}

/* Kollegen-Nachrichten mit Tipp-Indikator */
.cl-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cl-anim .cl-msg {
  opacity: 0;
  transform: translateY(6px);
}
.cl-anim .cl-msg.is-typing,
.cl-anim .cl-msg.is-typed {
  opacity: 1;
  transform: none;
}
.cl-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: #f3f4f7;
  border: 1px solid #e8e9ee;
  border-radius: 0.2rem 0.75rem 0.75rem 0.75rem;
  padding: 0.45rem 0.7rem 0.5rem;
  min-width: 0;
}
.cl-msg-name {
  font-size: 0.62rem;
  font-weight: 700;
  color: #6b6e85;
  line-height: 1.3;
}
.cl-msg-text {
  font-size: 0.73rem;
  line-height: 1.45;
  color: #2c2e44;
}
.cl-dots {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0 0.12rem;
}
.cl-dots span {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #9ca0b5;
  animation: cl-dot 1s ease-in-out infinite;
}
.cl-dots span:nth-child(2) { animation-delay: 0.15s; }
.cl-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cl-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.cl-anim .cl-msg.is-typing .cl-dots { display: inline-flex; }
.cl-anim .cl-msg.is-typing .cl-msg-text { display: none; }

/* Statuszeile unter dem Chat (nutzt .mr-spinner) */
.cl-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.8rem 1rem 0;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
  transition: opacity 0.3s ease;
}
.cl-anim .cl-status { opacity: 0; }
.cl-anim.is-sharing .cl-status { opacity: 1; }
.cl-status > .mr-spinner { display: none; }
.cl-anim .cl-status > .mr-spinner { display: inline-block; }
.cl-anim.is-shared .cl-status > .mr-spinner { display: none; }
.cl-status-check {
  width: 0.9rem;
  height: 0.9rem;
  color: #16a34a;
  flex: none;
}
.cl-anim .cl-status-check { display: none; }
.cl-anim.is-shared .cl-status-check { display: block; }

/* Animierter Maus-Cursor (gleiche Optik wie .sh-cursor) */
.cl-cursor {
  position: absolute;
  left: 70%;
  top: 80%;
  z-index: 40;
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  opacity: 0;
  transform: translate(-3px, -2px);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
  transition:
    left 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    top 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    opacity 0.3s ease,
    transform 0.15s ease;
}
.cl-anim .cl-cursor { display: block; }
.cl-anim.is-live .cl-cursor { opacity: 1; }
.cl-cursor svg { width: 100%; height: 100%; display: block; }
.cl-cursor.is-click { transform: translate(-3px, -2px) scale(0.8); }
.cl-cursor::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.55);
  opacity: 0;
  transform: scale(0.4);
}
.cl-cursor.is-click::after { animation: sh-ripple 0.35s ease-out; }

/* Sanfter Abgang vor dem Loop-Neustart */
.cl-anim.is-leaving .cl-head,
.cl-anim.is-leaving .cl-chat,
.cl-anim.is-leaving .cl-status { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cl-av-join,
  .cl-react,
  .cl-dots span,
  .cl-cursor { animation: none; }
}

/* ============================================================
   Marktanalyse bis Geschäftsleitung (partials/components/market-stage.php)
   Animierte Bühne mit zwei Szenen: 1) Die GF-Assistenz beauftragt
   eine Marktanalyse — GPT-5.5 recherchiert, Claude Fable verdichtet,
   das Ergebnis geht an Vertrieb & Marketing, beide ergänzen ihren
   Input im selben Chat. 2) Die Wissensdatenbank gleicht alles mit
   der Unternehmensstrategie ab, die geprüften Empfehlungen gehen
   an die Geschäftsleitung. Fenster-Rahmen von .mr-window/.mr-titlebar, Chat-Kopf
   und Nachrichten von den ungegateten .cl-*-Basisklassen, Modell-
   Chips von .mr-model-chip/.mr-dot-*, Quellen-Chips von .kb-src,
   Zeilen/Zitate von .kb-line/.kb-cite, Avatar-Farben von .sh-av-*.
   Ohne JS / bei reduzierter Bewegung zeigt die Bühne den Endzustand
   von Szene 2 (Default-Styles); .mk-anim setzt nur js/market-stage.js.
   ============================================================ */

.mk-stage {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .mk-stage { max-width: none; }
}

.mk-window { position: relative; }

/* Weiche Blende für Kopf & Panel beim Loop-Neustart */
.mk-fade { transition: opacity 0.45s ease; }
.mk-anim.is-leaving .mk-fade,
.mk-anim.is-leaving .mk-status { opacity: 0; }

/* Präsenz-Pill poppt bei jedem Beitritt */
.mk-anim [data-mk-presence].has-pop {
  display: inline-block;
  animation: sh-pop 0.32s ease;
}

/* Kollegen treten während der Animation bei */
.mk-anim .mk-join {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mk-anim .mk-join.is-in {
  opacity: 1;
  transform: none;
  animation: sh-pop 0.32s ease;
}

/* Szenen-Panel: immer nur eine Szene sichtbar, Höhe wird per JS
   auf die höhere der beiden Szenen fixiert (kein Layout-Springen) */
.mk-panel {
  position: relative;
  margin: 0.85rem 1rem 0;
  min-width: 0;
}
.mk-scene {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  transition: opacity 0.4s ease;
}
.mk-scene.is-active { display: flex; }
.mk-scene.is-out { opacity: 0; }

/* Chat-Nachrichten (Basis-Look von .cl-msg/.cl-bubble) */
.mk-anim .mk-msg {
  opacity: 0;
  transform: translateY(6px);
}
.mk-anim .mk-msg.is-typing,
.mk-anim .mk-msg.is-typed {
  opacity: 1;
  transform: none;
}
.mk-anim .mk-msg.is-typing .cl-dots { display: inline-flex; }
.mk-anim .mk-msg.is-typing .cl-msg-text { display: none; }

/* Zwei Modelle arbeiten an der Analyse */
.mk-models {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.75rem;
  background: #fafbfc;
  padding: 0.55rem 0.7rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mk-anim .mk-models {
  opacity: 0;
  transform: translateY(8px);
}
.mk-anim .mk-models.is-in {
  opacity: 1;
  transform: none;
}
.mk-model {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  transition: opacity 0.3s ease;
}
.mk-anim .mk-model { opacity: 0.45; }
.mk-anim .mk-model.is-on,
.mk-anim .mk-model.is-done { opacity: 1; }
.mk-model-task {
  font-size: 0.68rem;
  font-weight: 600;
  color: #4a4d63;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-model > .mr-spinner { display: none; margin-left: auto; }
.mk-anim .mk-model.is-on > .mr-spinner { display: inline-block; }
.mk-model-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  flex: none;
  margin-left: auto;
}
.mk-model-check svg { width: 0.6rem; height: 0.6rem; }
.mk-anim .mk-model .mk-model-check { display: none; }
.mk-anim .mk-model.is-done .mk-model-check {
  display: flex;
  animation: sh-pop 0.32s ease;
}

/* Ergebnis-Karten (Basis-Look von .cl-result) */
.mk-anim .mk-result {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
.mk-anim .mk-result.is-in {
  opacity: 1;
  transform: none;
}
.mk-lines { margin-top: 0.55rem; }

/* Analyse-Zeilen (Basis-Look von .kb-line, gleiches Skeleton-Muster) */
.mk-anim .mk-line {
  border-color: #f1f2f6;
  background: #fbfbfd;
}
.mk-anim .mk-line > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mk-anim .mk-line.is-on {
  border-color: #e8e9ee;
  background: #fafbfc;
}
.mk-anim .mk-line.is-on > * {
  opacity: 1;
  transform: none;
}

/* Teilen-Knöpfe (Optik wie .cl-share, Zustand pro Knopf statt Bühne) */
.mk-share {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.3rem 0.62rem;
  font-size: 0.68rem;
  font-weight: 600;
  background: #16a34a;
  color: #ffffff;
  white-space: nowrap;
  max-width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}
.mk-share svg { width: 0.72rem; height: 0.72rem; margin-right: 0.32rem; flex: none; }
.mk-share-idle,
.mk-share-done {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* Label-Wechsel: Endzustand "Geteilt", während der Animation erst "Teilen" */
.mk-share .mk-share-idle { display: none; }
.mk-anim .mk-share { background: #0a0b14; }
.mk-anim .mk-share .mk-share-idle { display: inline-flex; }
.mk-anim .mk-share .mk-share-done { display: none; }
.mk-anim .mk-share.is-done { background: #16a34a; }
.mk-anim .mk-share.is-done .mk-share-idle { display: none; }
.mk-anim .mk-share.is-done .mk-share-done { display: inline-flex; }
.mk-anim .mk-share.is-pressed {
  transform: scale(0.93);
  box-shadow: 0 0 0 4px rgba(10, 11, 20, 0.12);
}

/* Strategie-Check: Abgleich mit der Wissensdatenbank */
.mk-check {
  border: 1px solid #eef0f4;
  border-radius: 0.75rem;
  background: #f7f8fa;
  padding: 0.55rem 0.6rem 0.6rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mk-anim .mk-check {
  opacity: 0;
  transform: translateY(8px);
}
.mk-anim .mk-check.is-in {
  opacity: 1;
  transform: none;
}
.mk-check-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c5f76;
  margin-bottom: 0.45rem;
}
/* Quellen-Chips: gestapelt wie in der Wissensdatenbank-Leiste (kb-src-list),
   aber nicht über die volle Panel-Breite gezogen */
.mk-src-list { max-width: 24rem; }

/* Empfehlungen für die Geschäftsleitung */
.mk-recos {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mk-reco {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid #e8e9ee;
  border-radius: 0.6rem;
  background: #fafbfc;
  padding: 0.45rem 0.55rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.mk-anim .mk-reco {
  border-color: #f1f2f6;
  background: #fbfbfd;
}
.mk-anim .mk-reco > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mk-anim .mk-reco.is-on {
  border-color: #e8e9ee;
  background: #fafbfc;
}
.mk-anim .mk-reco.is-on > * {
  opacity: 1;
  transform: none;
}
.mk-reco-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  flex: none;
  margin-top: 0.1rem;
}
.mk-reco-check svg { width: 0.6rem; height: 0.6rem; }
.mk-reco-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.mk-reco-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0a0b14;
  line-height: 1.35;
}
.mk-reco-note {
  font-size: 0.62rem;
  color: #6b6e85;
  line-height: 1.4;
}

/* Statuszeile unter dem Panel (nutzt .mr-spinner, kb-Muster) */
.mk-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 1rem 0;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a4d63;
  transition: opacity 0.3s ease;
}
.mk-anim .mk-status { opacity: 0; }
.mk-anim.is-busy .mk-status,
.mk-anim.is-ready .mk-status { opacity: 1; }
.mk-status > .mr-spinner { display: none; }
.mk-anim.is-busy .mk-status > .mr-spinner { display: inline-block; }
.mk-status-check {
  width: 0.9rem;
  height: 0.9rem;
  color: #16a34a;
  flex: none;
}
.mk-anim .mk-status-check { display: none; }
.mk-anim.is-ready .mk-status-check { display: block; }

/* Animierter Maus-Cursor (gleiche Optik wie .cl-cursor) */
.mk-cursor {
  position: absolute;
  left: 70%;
  top: 80%;
  z-index: 40;
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  opacity: 0;
  transform: translate(-3px, -2px);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
  transition:
    left 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    top 0.55s cubic-bezier(0.35, 0.8, 0.35, 1),
    opacity 0.3s ease,
    transform 0.15s ease;
}
.mk-anim .mk-cursor { display: block; }
.mk-anim.is-live .mk-cursor { opacity: 1; }
.mk-cursor svg { width: 100%; height: 100%; display: block; }
.mk-cursor.is-click { transform: translate(-3px, -2px) scale(0.8); }
.mk-cursor::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.55);
  opacity: 0;
  transform: scale(0.4);
}
.mk-cursor.is-click::after { animation: sh-ripple 0.35s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .mk-join,
  .mk-model-check,
  .mk-cursor { animation: none; }
}

/* ============================================================
   Willkommens-Dashboard (partials/components/welcome-stage.php)
   Hero-Bühne der Startseite: Cortexion-Dashboard mit App-Übersicht,
   ein Cursor klickt auf die Chat-App, das Chat-Fenster öffnet sich,
   die Wettbewerber-Frage wird getippt und beantwortet.
   Fenster-Rahmen von .mr-window/.mr-titlebar, Spinner .mr-spinner,
   Klick-Ripple von sh-ripple, Caret-Blinken von mr-caret.
   Ohne JS / bei reduzierter Bewegung zeigt die Bühne den Endzustand
   (geöffneter Chat mit fertiger Antwort); die Klasse .hw-anim wird
   nur von js/welcome-stage.js gesetzt.
   ============================================================ */

.hw-stage { width: 100%; }

.hw-window {
  position: relative;
  padding-bottom: 0;
  transition: opacity 0.5s ease;
}
.hw-anim.is-leaving .hw-window { opacity: 0; }

/* --- Dashboard --- */
/* Die Mindesthöhe entspricht den Proportionen des früheren Hero-
   Screenshots (luftiger Weißraum unten) und gibt dem Chat-Overlay
   genug Platz für Frage + Antwortkarte + Eingabefeld. */
.hw-body {
  display: flex;
  gap: 1.25rem;
  padding: 1.1rem 1.25rem 1.4rem;
  min-height: 31rem;
  transition: opacity 0.45s ease, filter 0.45s ease;
}
@media (min-width: 768px) {
  .hw-body { min-height: 31.5rem; }
}
/* Ohne JS (Endzustand): nur abdunkeln — kein Blur, der Erst-Paint
   bleibt billig. Während der Animation (nach dem Laden): mit Blur. */
.hw-stage:not(.hw-js) .hw-body { opacity: 0.4; }
.hw-anim.is-open .hw-body {
  opacity: 0.4;
  filter: blur(2.5px);
}

.hw-main { flex: 1 1 auto; min-width: 0; }

.hw-greet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.hw-greet-text { display: flex; flex-direction: column; min-width: 0; }
.hw-hello {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #181a2c;
}
.hw-sub {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: #6b6e85;
}
.hw-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  background: #fafbfc;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6e85;
  white-space: nowrap;
  flex: none;
}
.hw-edit svg { width: 0.7rem; height: 0.7rem; }

.hw-cat {
  display: block;
  margin-top: 1.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6e85;
}

.hw-grid {
  display: grid;
  gap: 0.55rem 0.4rem;
  margin-top: 0.7rem;
}
.hw-grid-fav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 26rem;
}
.hw-grid-apps { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.hw-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0 0.2rem;
  transition: transform 0.3s ease;
}
.hw-tile.is-hot { transform: translateY(-3px); }
.hw-tile.is-hot .hw-tile-icon { box-shadow: 0 10px 22px -8px rgba(79, 110, 247, 0.5); }
.hw-tile.is-press { transform: translateY(-1px) scale(0.94); }

.hw-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.25);
  transition: box-shadow 0.3s ease;
}
.hw-tile-icon svg { width: 1.35rem; height: 1.35rem; }
.hw-tile-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  color: #4a4d63;
}

.hw-tone-blue    { background: linear-gradient(135deg, #6d8cfa, #4f6ef7); }
.hw-tone-violet  { background: linear-gradient(135deg, #b18cfa, #8b5cf6); }
.hw-tone-cyan    { background: linear-gradient(135deg, #3fd6f0, #0cb8dd); }
.hw-tone-slate   { background: linear-gradient(135deg, #7c8496, #5b6372); }
.hw-tone-red     { background: linear-gradient(135deg, #f8837a, #ef4444); }
.hw-tone-amber   { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.hw-tone-teal    { background: linear-gradient(135deg, #34d399, #0d9488); }
.hw-tone-pink    { background: linear-gradient(135deg, #fb7185, #e11d48); }
.hw-tone-sky     { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.hw-tone-orange  { background: linear-gradient(135deg, #fb923c, #ea580c); }
.hw-tone-emerald { background: linear-gradient(135deg, #34d399, #059669); }
.hw-tone-indigo  { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.hw-tone-fuchsia { background: linear-gradient(135deg, #e879f9, #c026d3); }

/* --- Seitenleiste: Letzte Aktivität + Schnellzugriff --- */
.hw-side {
  flex: none;
  width: 15rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.hw-panel {
  border: 1px solid #e8eaf0;
  border-radius: 0.8rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.85rem 0.9rem;
}
.hw-panel-title {
  display: block;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #eef0f4;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2c2e44;
}
.hw-acts {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hw-act { display: flex; align-items: flex-start; gap: 0.5rem; }
.hw-act-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.45rem;
  background: #eef2ff;
  color: #6366f1;
  flex: none;
}
.hw-act-icon svg { width: 0.8rem; height: 0.8rem; }
.hw-act-body { display: flex; flex-direction: column; min-width: 0; }
.hw-act-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2c2e44;
}
.hw-act-time {
  margin-top: 0.05rem;
  font-size: 0.62rem;
  color: #6b6e85;
}

.hw-quick {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.hw-quick-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2c2e44;
}
.hw-quick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.45rem;
  flex: none;
}
.hw-quick-icon svg { width: 0.8rem; height: 0.8rem; }
.hw-qi-sky  { background: #e0f2fe; color: #0284c7; }
.hw-qi-rose { background: #ffe4e6; color: #e11d48; }
.hw-quick-count {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #eef0f4;
  font-size: 0.62rem;
  font-weight: 700;
  color: #4a4d63;
}

/* --- Chat-Fenster (Overlay über dem Dashboard) --- */
/* Abdunkelnder Scrim als eigenes Element (deutlich billiger zu malen
   als ein Box-Shadow mit Riesen-Spread) */
.hw-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(12, 14, 30, 0.16);
  pointer-events: none;
}
.hw-js .hw-scrim {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hw-js.is-open .hw-scrim { opacity: 1; }

.hw-chat {
  position: absolute;
  top: 3.1rem;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(32rem, calc(100% - 1.6rem));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e0e1e8;
  border-radius: 0.9rem;
  box-shadow: 0 18px 50px -18px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  z-index: 5;
}
.hw-js .hw-chat {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-js.is-open .hw-chat {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.hw-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #eef0f4;
  background: #fafbfc;
  flex: none;
}
.hw-chat-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #181a2c;
  white-space: nowrap;
}
.hw-chat-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.45rem;
  background: linear-gradient(135deg, #6d8cfa, #4f6ef7);
  color: #ffffff;
  flex: none;
}
.hw-chat-title-icon svg { width: 0.8rem; height: 0.8rem; }
.hw-chat-model {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  color: #2c2e44;
  white-space: nowrap;
  min-width: 0;
}
.hw-chat-model svg { width: 0.75rem; height: 0.75rem; color: #8b5cf6; flex: none; }
.hw-chat-model-sub {
  font-weight: 500;
  color: #6b6e85;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px) {
  .hw-chat-model-sub { display: none; }
}

.hw-chat-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.85rem 0.85rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: hidden;
}

.hw-bubble {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.8rem 0.8rem 0.2rem 0.8rem;
  background: #101223;
  color: #f6f7fb;
  font-size: 0.75rem;
  line-height: 1.55;
}
.hw-anim .hw-bubble {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hw-anim.is-sent .hw-bubble { opacity: 1; transform: none; }

/* Suchstatus (nutzt .mr-spinner) */
.hw-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #4a4d63;
}
.hw-anim .hw-search { opacity: 0; transition: opacity 0.3s ease; }
.hw-anim.is-searching .hw-search { opacity: 1; }
.hw-search > .mr-spinner { display: none; }
.hw-anim.is-searching:not(.is-done) .hw-search > .mr-spinner { display: inline-block; }
.hw-search-check {
  width: 0.85rem;
  height: 0.85rem;
  color: #16a34a;
  flex: none;
}
.hw-anim .hw-search-check { display: none; }
.hw-anim.is-done .hw-search-check { display: block; }
.hw-stage:not(.hw-anim) [data-hw-search-text],
.hw-anim.is-done [data-hw-search-text] { color: #15803d; }

/* Antwortkarte: Wettbewerber-Zeilen */
.hw-answer {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.6rem;
  border: 1px solid #eef0f4;
  border-radius: 0.8rem;
  background: #fafbfc;
}
.hw-anim .hw-answer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hw-anim.is-answer .hw-answer { opacity: 1; transform: none; }

.hw-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0;
}
.hw-row + .hw-row { border-top: 1px solid #eef0f4; }
.hw-anim .hw-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hw-anim .hw-row.is-on { opacity: 1; transform: none; }

.hw-row-who {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 800;
  flex: none;
}
.hw-who-violet { background: #ede9fe; color: #7c3aed; }
.hw-who-teal   { background: #ccfbf1; color: #0f766e; }
.hw-who-amber  { background: #fef3c7; color: #b45309; }
.hw-row-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hw-row-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #181a2c;
}
.hw-row-text {
  margin-top: 0.08rem;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #4a4d63;
}
.hw-row-src {
  flex: none;
  padding: 0.14rem 0.5rem;
  border: 1px solid #e0e1e8;
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  color: #6b6e85;
  white-space: nowrap;
}
@media (max-width: 460px) {
  .hw-row-src { display: none; }
}

/* Eingabefeld */
.hw-input {
  flex: none;
  margin: 0.35rem 0.85rem 0.85rem;
  padding: 0.6rem 0.7rem 0.55rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.8rem;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hw-anim.is-focus .hw-input {
  border-color: #8b8fa8;
  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.1);
}
.hw-input-text {
  margin: 0;
  min-height: 3.4em;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #2c2e44;
}
.hw-caret {
  display: none;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  background: #0a0b14;
  vertical-align: -0.15em;
  animation: mr-caret 1s steps(2, start) infinite;
}
.hw-anim.is-focus .hw-caret { display: inline-block; }
.hw-placeholder { display: none; color: #6b6e85; }
.hw-input-text span[data-hw-text]:empty ~ .hw-placeholder { display: inline; }

.hw-inputbar { display: flex; align-items: center; margin-top: 0.5rem; }
.hw-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid #e0e1e8;
  border-radius: 0.5rem;
  color: #6b6e85;
}
.hw-plus svg { width: 0.8rem; height: 0.8rem; }
.hw-send {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.55rem;
  background: #0a0b14;
  color: #ffffff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hw-send svg { width: 0.85rem; height: 0.85rem; }
.hw-anim.is-sent .hw-send {
  transform: scale(0.9);
  box-shadow: 0 0 0 4px rgba(10, 11, 20, 0.12);
}

/* Animierter Mauszeiger (Optik wie .cl-cursor) */
.hw-cursor {
  position: absolute;
  left: 40px;
  top: 30px;
  z-index: 30;
  width: 1.15rem;
  height: 1.15rem;
  display: none;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
  transition:
    left 0.85s cubic-bezier(0.45, 0.05, 0.25, 1),
    top 0.85s cubic-bezier(0.45, 0.05, 0.25, 1),
    opacity 0.35s ease,
    transform 0.15s ease;
}
.hw-anim .hw-cursor { display: block; }
.hw-anim.is-live .hw-cursor { opacity: 1; }
.hw-anim.is-calm .hw-cursor { opacity: 0; }
.hw-cursor svg { width: 100%; height: 100%; display: block; }
.hw-cursor.is-click { transform: translate(-3px, -2px) scale(0.8); }
.hw-cursor::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(79, 110, 247, 0.55);
  opacity: 0;
  transform: scale(0.4);
}
.hw-cursor.is-click::after { animation: sh-ripple 0.35s ease-out; }

/* --- Responsive --- */
@media (max-width: 767px) {
  .hw-side { display: none; }
}
@media (max-width: 639px) {
  .hw-body { padding: 0.85rem 0.8rem 1rem; }
  .hw-grid-fav { max-width: none; }
  .hw-grid-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hw-tile-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; }
  .hw-tile-icon svg { width: 1.15rem; height: 1.15rem; }
  .hw-tile-label { font-size: 0.58rem; }
  .hw-hello { font-size: 1rem; }
  .hw-chat {
    top: 2.7rem;
    bottom: 0.8rem;
    width: calc(100% - 1.2rem);
  }
  .hw-chat-body { padding: 0.7rem 0.7rem 0.4rem; gap: 0.5rem; }
  .hw-row { padding: 0.4rem 0; }
  .hw-input { margin: 0.3rem 0.7rem 0.7rem; }
  .hw-input-text { min-height: 2.4em; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-caret,
  .hw-cursor { animation: none; }
}

/* ============================================================
   SELF-SIGNUP (Registrierung & Provisioning)
   ============================================================ */

.signup-spinner {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid var(--border-soft);
  border-top-color: var(--text-strong);
  animation: signup-spin 0.9s linear infinite;
}
@keyframes signup-spin {
  to { transform: rotate(360deg); }
}

.step-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  background: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.step-dot.is-active {
  border-color: var(--text-strong);
  animation: step-pulse 1.4s ease-in-out infinite;
}
.step-dot.is-done {
  border-color: var(--text-strong);
  background: var(--text-strong);
}
.step-dot.is-done::after {
  content: "";
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--bg-elev-1);
  border-bottom: 2px solid var(--bg-elev-1);
  transform: rotate(-45deg) translate(1px, -1px);
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
  .signup-spinner { animation-duration: 1.8s; }
  .step-dot.is-active { animation: none; }
}

/* ============================================================
   Architecture-Stage — "So funktioniert Cortexion"
   Diagramm: Unternehmen -> Cortexion (EU > DE) -> KI-Modelle,
   darunter interne Systeme + Websuche. Mobile: vertikaler Stack,
   ab lg: 5-Spalten-Grid mit horizontalen Verbindungslinien.
   ============================================================ */

.arch-stage {
  max-width: 72rem;
  margin: 0 auto;
}

.arch-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Panels (Unternehmen / Modelle / Systeme) */
.arch-panel {
  position: relative;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-hairline);
  border-radius: 1rem;
  padding: 1.1rem 1.15rem 1.15rem;
  box-shadow: 0 14px 32px -22px rgba(15, 23, 42, 0.28);
}
.arch-panel-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.arch-panel-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border-hairline);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.arch-panel-note svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  margin-top: 0.05rem;
  color: var(--text-body);
}
.arch-panel-sub {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Mini-Organigramm im Unternehmens-Panel */
.arch-org {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.arch-org-head {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--text-strong);
  border-radius: 9999px;
  box-shadow: 0 8px 22px -14px rgba(15, 23, 42, 0.35);
}
.arch-org-head-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
}
.arch-org-line {
  width: 2px;
  height: 1rem;
  background: var(--border-soft);
  border-radius: 999px;
}
.arch-org-team {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.arch-org-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-hairline);
  border-radius: 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-body);
  min-width: 0;
}
.arch-org-member .org-avatar {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.6rem;
}

/* Verbindungen (mobil vertikal, ab lg horizontal) */
.arch-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: 0.5rem 0;
}
.arch-link-line {
  position: absolute;
  left: 50%;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(180deg, var(--border-soft) 0 5px, transparent 5px 10px);
}
/* Pfeilspitzen an beiden Enden (bidirektionaler Datenfluss) */
.arch-link-line::before,
.arch-link-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-left: 2px solid var(--border-soft);
  border-top: 2px solid var(--border-soft);
}
.arch-link-line::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}
.arch-link-line::after {
  bottom: 0;
  transform: translateX(-50%) rotate(225deg);
}
.arch-link-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-hairline);
  border-radius: 9999px;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.3);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-strong);
  white-space: nowrap;
}
.arch-link-tag svg {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
  color: var(--text-body);
}
.arch-link-tag .cx-flag,
.arch-link-tag .cx-flag-pair {
  font-size: 0.8rem;
}
.arch-link-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Animierter Datenfluss: wandernde Strichlinie (nur background-position,
   loest im Gegensatz zu top/left-Animationen kein Layout aus) */
.arch-link-line {
  animation: arch-dash-y 1.4s linear infinite;
}
@keyframes arch-dash-y {
  to { background-position: 0 10px; }
}
@keyframes arch-dash-x {
  to { background-position: 10px 0; }
}

/* EU- / DE-Rahmen um den Cortexion-Kern */
.arch-center {
  display: flex;
  justify-content: center;
}
.arch-frame {
  position: relative;
  border-radius: 1.25rem;
  width: 100%;
}
.arch-frame-eu {
  border: 1px dashed var(--border-soft);
  padding: 1.35rem 0.85rem 0.85rem;
  background: rgba(255, 255, 255, 0.5);
}
.arch-frame-de {
  border: 1px solid var(--border-soft);
  padding: 1.45rem 0.85rem 0.85rem;
  background: var(--bg-base);
}
.arch-frame-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-hairline);
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-strong);
  white-space: nowrap;
  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.25);
}
.arch-frame-tag .cx-flag { font-size: 0.85rem; }

/* Cortexion-Kern */
.arch-core {
  background: var(--bg-elev-1);
  border: 1px solid var(--text-strong);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 16px 36px -20px rgba(15, 23, 42, 0.4);
}
.arch-core-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.arch-core-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, #52525b 0%, #18181b 100%);
  color: #f8f8fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.arch-core-mark svg {
  width: 1.6rem;
  height: 1.6rem;
}
.arch-core-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.arch-core-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  line-height: 1.2;
}
.arch-core-sub {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}
.arch-core-stack {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.arch-core-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-hairline);
  border-radius: 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-body);
}
.arch-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 0.45rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-hairline);
  color: var(--text-body);
}
.arch-chip-icon svg {
  width: 0.85rem;
  height: 0.85rem;
}
.arch-core-arrow {
  display: flex;
  justify-content: center;
  padding: 0.12rem 0;
  color: var(--text-faint);
}
.arch-core-arrow svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Sprachmodelle */
.arch-providers {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.arch-provider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-hairline);
  border-radius: 0.65rem;
}
.arch-provider .mr-dot {
  width: 0.55rem;
  height: 0.55rem;
}
.arch-provider-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.arch-provider-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}
.arch-provider-models {
  font-size: 0.68rem;
  /* accent-600 statt text-muted: auf --bg-elev-2 braucht es >=4.5:1 Kontrast (WCAG AA) */
  color: var(--accent-600);
  line-height: 1.3;
}

/* Verbindung nach unten + Systeme/Websuche */
.arch-down {
  position: relative;
  min-height: 3.25rem;
}
.arch-link-line-v {
  top: 0.25rem;
  bottom: 0.25rem;
}
.arch-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}
@media (min-width: 480px) {
  .arch-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.arch-panel-sm {
  padding: 0.95rem 1rem 1rem;
}
.arch-systems {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.arch-system-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}
.arch-system-logo img {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
}
.arch-system-logo-icon {
  color: var(--text-body);
}
.arch-system-logo-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.arch-system-more {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.3rem 0.6rem;
  border: 1px dashed var(--border-soft);
  border-radius: 9999px;
  white-space: nowrap;
}

/* Desktop-Layout: 5 Spalten, Systeme unter der Mitte */
@media (min-width: 1024px) {
  .arch-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.25rem minmax(0, 1.12fr) 7.25rem minmax(0, 1fr);
    grid-template-areas:
      "company link1 center link2 models"
      ".       .     down   .     .     "
      ".       btm   btm    btm   .     ";
    align-items: center;
  }
  .arch-company { grid-area: company; }
  .arch-link-1  { grid-area: link1; }
  .arch-center  { grid-area: center; }
  .arch-link-2  { grid-area: link2; }
  .arch-models  { grid-area: models; }
  .arch-down    { grid-area: down; }
  .arch-bottom  { grid-area: btm; }

  .arch-link {
    min-height: 0;
    height: 100%;
    padding: 0 0.15rem;
  }
  .arch-link .arch-link-line {
    left: 0.3rem;
    right: 0.3rem;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(90deg, var(--border-soft) 0 5px, transparent 5px 10px);
  }
  .arch-link .arch-link-line::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
  }
  .arch-link .arch-link-line::after {
    top: 50%;
    left: auto;
    right: 0;
    bottom: auto;
    transform: translateY(-50%) rotate(135deg);
  }
  .arch-link .arch-link-line {
    animation-name: arch-dash-x;
  }
  .arch-link-tag {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.75rem;
    text-align: center;
    white-space: normal;
  }
  .arch-down {
    justify-self: center;
    width: 2px;
    min-height: 3.5rem;
    height: 3.5rem;
  }
  .arch-bottom {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arch-link-line { animation: none; }
}