/* op-brand.css — Online-Planer Produkt-Branding
   Wird NUR auf online-planer.html geladen (zusätzlich zu styles.css).
   Überschreibt die OCD-Farbpalette mit dem Online-Planer-Look:
   deep navy + electric cyan accent, klar abgesetzt vom OCD-Blau/Grün. */

.brand-op {
  /* Übergeordnete Brand-Variablen umfärben */
  --c-blue: #5B7BFA;          /* electric indigo */
  --c-blue-deep: #2A3FA0;     /* deeper indigo */
  --c-blue-tint: #EEF1FE;
  --c-green: #00C9A7;         /* teal/cyan accent */
  --c-green-deep: #008A75;
  --c-green-tint: #E5F8F4;
  --c-bg-warm: #F4F6FB;
}

.brand-op .word-gradient {
  background: linear-gradient(105deg, #2A3FA0 0%, #00C9A7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.brand-op .btn-brand {
  background: linear-gradient(135deg, #5B7BFA 0%, #00C9A7 100%);
  box-shadow: 0 6px 20px rgba(42,63,160,.22);
}
.brand-op .btn-brand:hover { box-shadow: 0 10px 28px rgba(42,63,160,.32); }

.brand-op .why-card.duo {
  background: linear-gradient(135deg, #1B2358 0%, #008A75 100%);
}

.brand-op .case.brand-bg {
  background: linear-gradient(135deg, #0E1335 0%, #1A2058 50%, #003B33 100%);
}
.brand-op .case-bg-art {
  background:
    radial-gradient(600px 200px at 80% 100%, rgba(0,201,167,.4), transparent 70%),
    radial-gradient(500px 200px at 20% 0%, rgba(91,123,250,.4), transparent 70%);
}

.brand-op .eyebrow { color: #2A3FA0; }
.brand-op .eyebrow::before { background: #00C9A7; }

.brand-op .svc-num .ic { background: #EEF1FE; color: #2A3FA0; }
.brand-op .svc:nth-child(3n+2) .svc-num .ic { background: #E5F8F4; color: #008A75; }
.brand-op .svc:hover { border-color: rgba(91,123,250,.45); box-shadow: 0 12px 30px -10px rgba(42,63,160,.18); }

.brand-op .step-num { color: #2A3FA0; }
.brand-op .step:nth-child(2) .step-num,
.brand-op .step:nth-child(4) .step-num { color: #008A75; }

.brand-op .cta.brand {
  background: linear-gradient(120deg, #5B7BFA 0%, #00C9A7 100%);
}

/* Distinct "product" mark in topbar / hero (subtle indigo dot before brand name) */
.brand-op .op-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #2A3FA0;
  padding: 6px 10px;
  border: 1px solid rgba(91,123,250,.3);
  background: #EEF1FE;
  border-radius: 999px;
  margin-bottom: 16px;
}
.brand-op .op-mark::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #5B7BFA, #00C9A7);
}

/* Product feature grid */
.op-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .op-modules { grid-template-columns: 1fr; } }
.op-module {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--s-5); position: relative;
}
.op-module .op-module-ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: #EEF1FE; color: #2A3FA0; margin-bottom: 12px;
}
.op-module:nth-child(3n+2) .op-module-ic { background: #E5F8F4; color: #008A75; }
.op-module:nth-child(3n+3) .op-module-ic { background: linear-gradient(135deg, #EEF1FE, #E5F8F4); color: #1B2358; }
.op-module h4 { font-family: var(--f-display); font-size: 16px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.op-module p { font-size: 13px; color: var(--c-ink-2); line-height: 1.5; }

/* iOS screenshot + product info side by side */
.op-app-row { display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .op-app-row { grid-template-columns: 1fr; } }
.op-screenshot {
  max-width: 320px; margin: 0 auto;
  border-radius: 36px;
  box-shadow: 0 30px 60px -20px rgba(42,63,160,.35), 0 8px 24px -8px rgba(0,0,0,.18);
  overflow: hidden;
  background: #000;
}
.op-screenshot img { display: block; width: 100%; }

/* Testimonials */
.op-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .op-quotes { grid-template-columns: 1fr; } }
.op-quote {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.op-quote p { font-size: 15px; color: var(--c-ink); line-height: 1.5; font-style: italic; }
.op-quote .who { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--c-line-2); font-size: 12px; color: var(--c-muted); font-family: var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; }

/* Trial banner */
.op-trial {
  background: linear-gradient(135deg, #1B2358 0%, #008A75 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center;
}
@media (max-width: 900px) { .op-trial { grid-template-columns: 1fr; } }
.op-trial h2 { font-family: var(--f-display); font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 8px; }
.op-trial p { font-size: 16px; opacity: .9; max-width: 56ch; }
.op-trial .btn { background: #fff; color: #1B2358; }
.op-trial .btn:hover { background: #F4F6FB; }

/* Dark mode adjustments for Online-Planer brand */
.theme-dark.brand-op .op-module,
.theme-dark .brand-op .op-module { background: var(--c-bg-soft); }
.theme-dark.brand-op .op-quote,
.theme-dark .brand-op .op-quote { background: var(--c-bg-soft); }
.theme-dark.brand-op .op-mark,
.theme-dark .brand-op .op-mark { background: rgba(91,123,250,.18); color: #9AB4FF; border-color: rgba(91,123,250,.35); }