/*
 * css/markenauftritt.css
 * Seitenspezifische Stile für markenauftritt.html
 * Basis: css/funnelbasis.css + css/funnelstyle.css (unverändert)
 * Farbschema: Tiefes Indigo/Violett → Gold
 * --ma-accent: #4a3580 (Indigo/Violett), Komplementär: --ma-rose #c45c7a
 */

/* ─── CSS-Variablen (Violett-Farbwelt) ─────────────────────── */
:root {
  --ma-accent:        #4a3580;
  --ma-accent-dark:   #341f63;
  --ma-accent-light:  #8b75c8;
  --ma-rose:          #c45c7a;
  --ma-rose-light:    #e0909f;
  --ma-hero-from:     #0d0a1a;
  --ma-hero-mid:      #160f2e;
  --ma-hero-to:       #1a0e30;
}

/* ─── Hero – kein eigener Gradient, nutzt .wf-hero als Basis ─── */
/* Violett-Radial-Akzente als zusätzliches ::before-Layer */
.ma-hero::before {
  background:
    radial-gradient(ellipse 60% 50% at 80% 40%, rgba(74,53,128,.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 70%, rgba(196,92,122,.08) 0%, transparent 60%);
  /* Das wf-hero::before overlay bleibt erhalten (Gold-Radials),
     dieses ergänzt nur dezente Violett-Töne darüber */
}

/* Hero Badge – dezenter Violett-Ton */
.ma-hero .hero__badge {
  background: rgba(74,53,128,.20);
  border: 1px solid rgba(74,53,128,.50);
  color: var(--ma-accent-light);
}

/* Hero Titel Accent */
.ma-hero .sw-hero__title-accent {
  color: var(--ma-accent-light);
}

/* Hero Subtitle italic in Violett-Hell */
.ma-hero .sw-hero__subtitle1,
.ma-hero .wf-hero__subtitle {
  color: var(--ma-accent-light);
  font-style: italic;
}

/* Claim-Zeile (hero__sub--claim) */
.ma-hero .hero__sub--claim {
  font-size: .97rem;
  font-style: italic;
  color: rgba(255,255,255,.70);
  border-left: 3px solid var(--ma-accent-light);
  padding-left: 14px;
  margin: 4px 0 22px;
  text-align: left;
  line-height: 1.55;
  align-self: flex-start;
}

/* Hero Body-Text */
.ma-hero__body {
  font-size: clamp(.9rem, 1.7vw, 1.05rem);
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin-bottom: 10px;
  max-width: 660px;
  text-align: center;
}

/* Hero Claim inline */
.ma-hero__claim--inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .88rem;
  color: rgba(255,255,255,.50);
  font-style: italic;
  margin-bottom: 22px;
  text-align: center;
  justify-content: center;
}
.ma-hero__claim--inline i {
  color: var(--ma-accent-light);
  font-size: .82rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Trust-Strip: dezente Violett-Border */
.ma-hero .hero__trust-row {
  border-top-color: rgba(74,53,128,.22) !important;
}
.ma-hero .hero__trust-item i { color: var(--ma-accent-light); }

/* ─── section-label, section-title Violett-Akzente ──────────── */
.ma-section-label {
  color: var(--ma-accent);
  background: rgba(74,53,128,.09);
  border-color: rgba(74,53,128,.28);
}

/* section-title accent für diese Seite */
.ma-headline-accent { color: var(--ma-accent-light); }

/* ─── Sofort-Benefits (Benefits-Strip) ──────────────────────── */
.ma-benefits { background: #f5f3fb; }
.ma-benefits .wf-benefit__icon { color: #fff; }
.ma-benefits .wf-benefit { border-color: rgba(74,53,128,.15); }

/* ─── Problem-Sektion ────────────────────────────────────────── */
.ma-problem { background: var(--clr-surface); }
.ma-problem .problem__card--red    .problem__icon { color: #e05252; }
.ma-problem .problem__card--orange .problem__icon { color: #e0874a; }
.ma-problem .problem__card--yellow .problem__icon { color: var(--ma-accent); }

/* "Warum wir?" Pillar-Boxen in Violett */
.ma-problem .wf-why {
  background: rgba(74,53,128,.04);
  border: 1px solid rgba(74,53,128,.15);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-top: 32px;
}
.ma-problem .wf-why__label { color: var(--ma-accent); }
.ma-problem .wf-why__pillar {
  background: rgba(74,53,128,.09);
  border-color: rgba(74,53,128,.30);
  color: var(--ma-accent-dark);   /* dunkles Indigo – gut lesbar auf hellem BG */
}
.ma-problem .wf-why__pillar i { color: var(--ma-accent); }
.ma-problem .wf-why__pillar--result {
  background: rgba(200,169,110,.22);
  border-color: rgba(200,169,110,.55);
  color: var(--clr-primary);      /* Navy – lesbar auf dem Gold-Hintergrund */
}
.ma-problem .wf-why__pillar--result i { color: var(--clr-accent-dark); }
.ma-problem .wf-why__connector { color: var(--ma-accent); font-weight: 700; }

/* ─── CTA-Interstitials Violett ──────────────────────────────── */
.ma-cta-interstitial {
  background: linear-gradient(135deg, var(--ma-accent-dark) 0%, #1e0a38 100%);
}
.ma-cta-interstitial .btn--white { color: var(--ma-accent-dark); }

/* ─── "Unser Ansatz" – 4 Karten (Vorteil-Grid) ──────────────── */
/* Violett-Icon-Variante */
.vorteil__icon--indigo {
  background: linear-gradient(135deg, rgba(74,53,128,.15), rgba(74,53,128,.05));
  border: 1px solid rgba(74,53,128,.28);
  color: var(--ma-accent);
}
.vorteil__icon--rose {
  background: linear-gradient(135deg, rgba(196,92,122,.15), rgba(196,92,122,.05));
  border: 1px solid rgba(196,92,122,.28);
  color: var(--ma-rose);
}
.vorteil__icon--teal {
  background: linear-gradient(135deg, rgba(0,105,92,.12), rgba(0,150,136,.06));
  border: 1px solid rgba(0,105,92,.2);
  color: #00695c;
}

/* Badge Violett-Variante */
.vorteil__badge--indigo {
  background: rgba(74,53,128,.10);
  border: 1px solid rgba(74,53,128,.28);
  color: var(--ma-accent-dark);
}

/* ─── Ablauf (Violett-Nummern) ───────────────────────────────── */
.ma-ablauf { background: var(--clr-surface); }
.ma-ablauf__steps {
  position: relative;
  margin-top: 48px;
}
.ma-ablauf__steps::before {
  content: '';
  position: absolute;
  left: 30px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--ma-accent), var(--clr-accent));
  opacity: .22;
}
.ma-ablauf__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  margin-bottom: 40px;
  position: relative;
}
.ma-ablauf__step:last-child { margin-bottom: 0; }
.ma-ablauf__step-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ma-accent), var(--ma-accent-dark));
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(74,53,128,.38);
  z-index: 1;
  position: relative;
}
.ma-ablauf__step-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 8px;
}
.ma-ablauf__step-content h3 i {
  color: var(--ma-accent);
  margin-right: 8px;
  font-size: .95rem;
}
.ma-ablauf__step-content p {
  font-size: .9rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 10px;
}
.ma-ablauf__step-output {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,53,128,.07);
  border: 1px solid rgba(74,53,128,.25);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: .82rem;
  color: var(--ma-accent-dark);
}
.ma-ablauf__step-output strong {
  font-weight: 700;
  color: var(--ma-accent-dark);
}
.ma-ablauf__step-output strong::after { content: ':'; margin-right: 4px; }

/* ─── Pakete – Gold Featured-Card (analog webdesign.html) ──────── */
.ma-pakete .pakete__card--featured {
  background: linear-gradient(160deg, #fdf4e3 0%, #fef9f0 100%);
  border-color: rgba(200,169,110,.50);
  box-shadow: 0 0 0 3px rgba(200,169,110,.18), var(--shadow-md);
}
.ma-pakete .pakete__card--featured h3             { color: var(--clr-primary); }
.ma-pakete .pakete__card--featured .pakete__price { color: var(--clr-accent-dark); }
.ma-pakete .pakete__card--featured .pakete__for   { color: var(--clr-text-muted); }
.ma-pakete .pakete__card--featured .pakete__features li { color: var(--clr-text); }
.ma-pakete .pakete__card--featured .pakete__features li i { color: var(--clr-accent-dark); }
.ma-pakete .pakete__card--featured .pakete__features li + li { border-color: rgba(200,169,110,.18); }
.ma-pakete .pakete__card--featured .pakete__card-header { border-bottom-color: rgba(200,169,110,.22); }
.ma-pakete .pakete__featured-label { display: none; }
.ma-pakete .pakete__card--featured:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 3px rgba(200,169,110,.28),
    0 12px 40px rgba(200,169,110,.30),
    0 4px 12px rgba(200,169,110,.18);
}

/* ─── No-Brainer Section – nb-* Anpassungen ─────────────────── */
.ma-nb-accent { color: var(--ma-accent-light); }
/* nb-headline-accent in Violett */
.ma-nb .nb-headline-accent { color: var(--ma-accent); }
/* Aktive Karte in Violett statt Gold */
.ma-nb .nb-card--active {
  border-color: var(--ma-accent) !important;
  box-shadow: 0 0 0 3px rgba(74,53,128,.20), var(--shadow-md) !important;
  background: #faf8ff;
}
.ma-nb .nb-card--active .nb-card__selector {
  background: var(--ma-accent);
  border-color: var(--ma-accent);
}
.ma-nb .nb-card--active .nb-card__radio {
  background: #fff;
  box-shadow: 0 0 0 3px var(--ma-accent);
}
/* nb-grid für 2 Karten */
.nb-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .nb-grid--two { grid-template-columns: 1fr; } }

/* Violett-Variante nb-card__icon */
.nb-card__icon--indigo {
  background: linear-gradient(135deg, rgba(74,53,128,.14), rgba(74,53,128,.05));
  border: 1px solid rgba(74,53,128,.28);
  color: var(--ma-accent);
}
/* nb-card__badge Violett */
.nb-card__badge--indigo {
  background: rgba(74,53,128,.08);
  border-color: rgba(74,53,128,.22);
  color: var(--ma-accent-dark);
}

/* ─── Trust-Sektion (analog webdesign.html) ─────────────────── */
/* Akzent-Farbe in Credentials auf Violett */
.ma-trust .wf-trust-half__name { color: var(--ma-accent); }
.ma-trust .wf-trust-cred-list li i { color: var(--ma-accent); }
.ma-trust .wf-trust-links a:hover { color: var(--ma-accent-light); }

/* ─── Footer-Links in Violett ────────────────────────────────── */
/* (Footer selbst bleibt dunkel, keine Änderung nötig) */

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ma-ablauf__steps::before { display: none; }
  .ma-ablauf__step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }
  .ma-ablauf__step-num {
    width: 48px; height: 48px; font-size: .85rem;
  }
}
@media (max-width: 580px) {
  .ma-hero .sw-hero__title { font-size: 2rem; }
}