/* ════════════════════════════════════════════════════════════════
   upsell-modal.css — Parametrisierter Feature-Gate-Upsell

   Variants: 'ai' | 'board' | 'qr' | 'business' | 'custom-accent'
   Layout: zwei Spalten — Headline+Text+CTA links, Preview-Specimen rechts.
   Spec 2026-04-24 § 8.
   ════════════════════════════════════════════════════════════════ */

#um-overlay {
  position: fixed; inset: 0; z-index: 9050;
  background: rgba(28,5,13,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 40px 32px 80px;
  overflow-y: auto;
  font-family: var(--t-font-body);
}
#um-overlay.open { display: flex; }

.um-panel {
  position: relative; max-width: 1040px; width: 100%;
  overflow: hidden; border-radius: var(--t-modal-radius);
}
.um-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(138,32,64,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(107,0,24,0.32) 0%, transparent 60%),
    linear-gradient(180deg, var(--t-bordeaux) 0%, var(--t-bordeaux-deep) 100%);
}
.um-grain { position: absolute; inset: 0; z-index: 0; opacity: 0.22; mix-blend-mode: overlay; pointer-events: none; background-image: var(--t-grain-svg); }
.um-inner { position: relative; z-index: 1; padding: 44px 48px 36px; }

.um-marg { position: absolute; top: 26px; left: 28px; z-index: 2; display: flex; align-items: baseline; gap: 10px; }
.um-marg-num { font-family: var(--t-font-display); font-weight: var(--t-w-medium); font-size: 16px; color: var(--t-gold); }
.um-marg-label { font-size: 9px; letter-spacing: var(--t-ls-widest); text-transform: uppercase; color: var(--t-text-mute); font-weight: var(--t-w-medium); }
.um-marg-divider { position: absolute; top: 50px; left: 28px; right: 28px; z-index: 2; height: 1px; background: var(--t-marg-divider); }
.um-close {
  position: absolute; top: 22px; right: 26px; z-index: 3;
  background: none; border: none; cursor: pointer;
  color: var(--t-text-mute);
  font-family: var(--t-font-body); font-size: 22px; font-weight: var(--t-w-light);
  width: 28px; height: 28px;
}
.um-close:hover { color: var(--t-text); }

.um-head { padding-top: 18px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--t-line); max-width: 720px; }
.um-eyebrow {
  font-size: 9px; letter-spacing: var(--t-ls-wider); text-transform: uppercase;
  color: rgba(201,160,99,0.85); font-weight: var(--t-w-medium);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.um-eyebrow-mark { width: 22px; height: 1px; background: var(--t-gold); }
.um-title {
  font-family: var(--t-font-display); font-weight: var(--t-w-regular);
  font-size: 44px; line-height: 1.05;
  color: var(--t-text); letter-spacing: var(--t-ls-tight);
  font-variation-settings: "opsz" 100;
  margin-bottom: 14px;
}
.um-title .accent { color: var(--t-gold); font-weight: var(--t-w-medium); }
.um-lede { font-size: 15px; line-height: 1.6; color: var(--t-text-2); }
.um-lede .accent { color: var(--t-gold); font-weight: var(--t-w-medium); }

.um-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.um-col-cap {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-size: 9px; letter-spacing: var(--t-ls-wider); text-transform: uppercase;
  color: var(--t-text-mute); font-weight: var(--t-w-medium);
}
.um-col-cap .accent {
  font-family: var(--t-font-display); text-transform: none;
  color: rgba(201,160,99,0.9); letter-spacing: var(--t-ls-snug); font-size: 12px;
  font-weight: var(--t-w-medium);
}
.um-col-cap-rule { flex: 1; height: 1px; background: var(--t-line); }

/* Specimen variants (siehe ai-upsell-v6.html für Details) */
.um-specimen {
  background: rgba(244,235,220,0.025);
  border: 1px solid var(--t-line);
  padding: 20px 22px;
  position: relative;
  min-height: 320px;
  font-family: var(--t-font-body);
  color: var(--t-text-2);
  font-size: 13px;
  line-height: 1.6;
}
.um-specimen::before {
  content: '';
  position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--t-gold), transparent);
}

/* CTA strip */
.um-cta-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding-top: 26px; margin-top: 30px;
  border-top: 1px solid var(--t-line);
}
.um-bens { display: flex; gap: 28px; }
.um-ben { display: flex; flex-direction: column; gap: 3px; max-width: 170px; }
.um-ben-head {
  font-family: var(--t-font-display); font-weight: var(--t-w-medium);
  font-size: 14px; color: var(--t-text); letter-spacing: var(--t-ls-snug);
}
.um-ben-head .accent { color: var(--t-gold); }
.um-ben-sub { font-size: 11px; color: var(--t-text-3); line-height: 1.45; }

.um-buttons { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.um-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 0 5px 0;
  font-family: var(--t-font-display); font-weight: var(--t-w-medium);
  font-size: 18px; color: var(--t-gold);
  background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--t-gold);
  letter-spacing: var(--t-ls-snug);
}
.um-arrow {
  display: inline-block; width: 14px; height: 1px; background: var(--t-gold);
  position: relative; top: -4px;
}
.um-arrow::after {
  content: ''; position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid var(--t-gold); border-top: 1px solid var(--t-gold);
  transform: rotate(45deg);
}
.um-ghost {
  font-size: 10.5px; letter-spacing: var(--t-ls-wider); text-transform: uppercase;
  color: var(--t-text-3); font-weight: var(--t-w-medium);
  background: none; border: none; cursor: pointer;
}

@media (max-width: 900px) {
  .um-grid { grid-template-columns: 1fr; gap: 24px; }
  .um-title { font-size: 32px; }
  .um-cta-strip { flex-direction: column; align-items: flex-start; gap: 18px; }
  .um-bens { flex-wrap: wrap; }
}