/*
 * markenauftritt.css – Stile für markenauftritt.html & markenauftritt2.html
 * Markenauftritt & Corporate-Identity-Funnel
 * Enthält alle seitenspezifischen Stile – nur style.css als Basis nötig.
 *
 * Farbschema: Tiefes Indigo/Violett → Gold (Brandfarben bleiben erhalten)
 * MA-Akzent: --ma-accent #4a3580 (Indigo), Sekundär: --ma-rose #c45c7a
 */

:root {
  --ma-accent:       #4a3580;   /* Tiefes Indigo/Violett */
  --ma-accent-dark:  #341f63;
  --ma-accent-light: #8b75c8;
  --ma-rose:         #c45c7a;   /* Komplementär-Akzent für Highlights */
  --ma-rose-light:   #e0909f;
  --ma-hero-from:    #0d0a1a;
  --ma-hero-mid:     #160f2e;
  --ma-hero-to:      #1a0e30;
}

/* ─── Hero ──────────────────────────────────────────────────── */
.ma-hero {
  background: linear-gradient(160deg, var(--ma-hero-from) 0%, var(--ma-hero-mid) 55%, var(--ma-hero-to) 100%);
  padding: calc(var(--nav-h) + 48px) 0 56px;
  position: relative;
  overflow: hidden;
}
/* Schattenkante am unteren Hero-Rand */
.ma-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.38) 100%);
  pointer-events: none;
  z-index: 1;
}
.ma-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 40%, rgba(74,53,128,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 70%, rgba(196,92,122,.10) 0%, transparent 60%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,.012) 40px,
      rgba(255,255,255,.012) 41px
    );
  pointer-events: none;
}

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

/* Headline accent */
.ma-hero .hero__headline--accent {
  color: var(--ma-accent-light);
}
.ma-hero .hero__headline--legal {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  font-family: var(--font-sans);
  color: rgba(255,255,255,.62);
}

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

/* ─── Problem ────────────────────────────────────────────────── */
.ma-problem {
  background: var(--clr-surface);
}

/* Problem-Cards Farb-Akzente */
.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); }

/* Why-Pillars */
.ma-problem .problem__why-pillar {
  background: rgba(74,53,128,.09);
  border-color: rgba(74,53,128,.28);
}
.ma-problem .problem__why-pillar i { color: var(--ma-accent); }
.ma-problem .problem__why-pillar--result {
  background: rgba(200,169,110,.1);
  border-color: rgba(200,169,110,.35);
}
.ma-problem .problem__why-pillar--result i { color: var(--clr-accent-dark); }

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

/* ─── Leistungsbereiche / Was gestaltet wird ─────────────────── */
.ma-leistungen {
  background: var(--clr-bg);
}
.ma-leistungen__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.ma-leistung-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.ma-leistung-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(74,53,128,.32);
}
.ma-leistung-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(74,53,128,.13), rgba(196,92,122,.07));
  border: 1px solid rgba(74,53,128,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--ma-accent);
  margin-bottom: 16px;
}
.ma-leistung-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 8px;
}
.ma-leistung-card p {
  font-size: .875rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
  margin-bottom: 12px;
}
.ma-leistung-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.ma-leistung-card__list li {
  font-size: .84rem;
  color: var(--clr-text-muted);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.ma-leistung-card__list li i {
  color: var(--ma-accent);
  font-size: .78rem;
  margin-top: 4px;
  flex-shrink: 0;
}
.ma-leistung-card__tag {
  display: inline-block;
  background: rgba(74,53,128,.08);
  border: 1px solid rgba(74,53,128,.22);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ma-accent-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Featured (Gold) Card */
.ma-leistung-card--featured {
  border-color: rgba(200,169,110,.42);
  background: linear-gradient(135deg, #fffdf7, #fdf8ef);
}
.ma-leistung-card--featured .ma-leistung-card__icon {
  background: linear-gradient(135deg, rgba(200,169,110,.2), rgba(160,129,62,.1));
  border-color: rgba(200,169,110,.4);
  color: var(--clr-accent-dark);
}
.ma-leistung-card--featured:hover { border-color: var(--clr-accent); }
.ma-leistung-card--featured .ma-leistung-card__tag {
  background: rgba(200,169,110,.1);
  border-color: rgba(200,169,110,.35);
  color: var(--clr-accent-dark);
}

/* ─── Ablauf ─────────────────────────────────────────────────── */
.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; }

/* ─── Vorteile ───────────────────────────────────────────────── */
.ma-vorteil {
  background: var(--clr-bg);
}
.ma-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);
}

/* ─── No-Brainer Sektion ─────────────────────────────────────── */
/* Nutzt globale nb-* Klassen aus webdesign.css – keine Überschreibung nötig */
.ma-nb-accent { color: var(--ma-accent-light); }

/* ─── Pakete – Featured-Card ─────────────────────────────────── */
.ma-pakete .pakete__card--featured {
  background: linear-gradient(135deg, #120820 0%, #2a1550 100%);
  border-color: rgba(74,53,128,.55);
  box-shadow: 0 0 0 3px rgba(74,53,128,.15);
}
.ma-pakete .pakete__card--featured h3,
.ma-pakete .pakete__card--featured .pakete__price {
  color: #fff;
}
.ma-pakete .pakete__card--featured .pakete__for { color: rgba(255,255,255,.55); }
.ma-pakete .pakete__card--featured .pakete__features li { color: rgba(255,255,255,.85); }
.ma-pakete .pakete__card--featured .pakete__features li i { color: var(--ma-accent-light); }
.ma-pakete .pakete__card--featured .pakete__features li + li { border-color: rgba(74,53,128,.18); }
.ma-pakete .pakete__featured-label {
  background: var(--ma-accent);
  color: #fff;
}

/* ─── Vertrauen ──────────────────────────────────────────────── */
.ma-vertrauen .ma-vertrauen__cred--ma {
  background: rgba(74,53,128,.06);
  border-color: rgba(74,53,128,.22);
}
.ma-vertrauen .ma-vertrauen__cred--ma .vertrauen__cred-icon {
  background: linear-gradient(135deg, rgba(74,53,128,.15), rgba(74,53,128,.05));
  color: var(--ma-accent);
}

/* ─── Hero kompakt (markenauftritt2.html) ────────────────────── */
.ma-hero--compact {
  padding: calc(var(--nav-h) + 32px) 0 36px;
}
.ma-hero__compact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  gap: 0;
}

/* Haupttitel */
.ma-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 14px;
}

/* Untertitel 1: stimmig, konsistent … */
.ma-hero__subtitle1 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  color: var(--ma-accent-light);
  margin: 0 0 10px;
  line-height: 1.25;
}

/* Untertitel 2: Markendesign, CI … */
.ma-hero__subtitle2 {
  font-size: clamp(.9rem, 1.8vw, 1.1rem);
  font-weight: 500;
  color: rgba(255,255,255,.60);
  margin: 0 0 22px;
  line-height: 1.45;
}

/* Fließtext */
.ma-hero__body {
  font-size: clamp(.88rem, 1.6vw, 1rem);
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin: 0 0 10px;
}

/* Claim-Zeile unter Fließtext */
.ma-hero__claim {
  font-size: .92rem;
  font-style: italic;
  color: var(--ma-accent-light);
  border-left: 3px solid var(--ma-accent-light);
  padding-left: 12px;
  text-align: left;
  margin: 0 0 26px;
  opacity: .88;
  align-self: flex-start;
}

/* CTA-Gruppe zentriert – reduzierter Abstand nach unten */
.ma-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;   /* weniger Abstand zum Trust-Strip */
}

/* Claim inline – kein linker Balken, stattdessen Icon + gedimmter Text */
.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: 0 0 20px;
  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 kompakter Abstand oben beim compact-Hero */
.ma-hero--compact .hero__trust-row {
  margin-top: 0;
  padding-top: 14px;
}

/* ─── Claim-Zeile (markenauftritt.html, mit Balken links) ────── */
.hero__sub--claim {
  font-size: .95rem;
  font-style: italic;
  color: var(--ma-accent-light);
  border-left: 3px solid var(--ma-accent-light);
  padding-left: 12px;
  margin-top: 10px;
  opacity: .88;
}

/* ─── Fade-up Animation ──────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ma-leistungen__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ma-leistungen__grid {
    grid-template-columns: 1fr;
  }
  .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;
  }
}


/* =========================================================
   AUS MARKEN.CSS – benötigte Klassen für markenauftritt*.html
   ========================================================= */

/* Hero-Variante (mk-hero wird hier nicht direkt genutzt,
   aber .hero__sub--claim, .kontakt__form--grid etc. schon) */
.mk-hero .hero__sub--claim {
  margin-top: -4px;
  padding-left: 14px;
  border-left: 2px solid var(--clr-accent);
  font-size: .9rem;
  font-style: italic;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
}

/* Pakete: Featured-Karte */
.pakete__card--featured {
  background: linear-gradient(160deg, #fdf4e3 0%, #fef9f0 100%) !important;
  border-color: #e8d5a8 !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.18), var(--shadow-md) !important;
}
.pakete__card--featured .pakete__card-header h3 { color: var(--clr-primary) !important; }
.pakete__card--featured .pakete__for             { color: var(--clr-text-muted) !important; }
.pakete__card--featured .pakete__price           { color: var(--clr-accent-dark) !important; }
.pakete__card--featured .pakete__featured-label  {
  background: var(--clr-accent) !important;
  color: var(--clr-primary-dark) !important;
}
.pakete__card--featured .pakete__features li     { color: var(--clr-text) !important; border-bottom-color: rgba(200,169,110,.18) !important; }
.pakete__card--featured .pakete__features li i   { color: var(--clr-accent-dark) !important; }

/* Markenauftritt spezifisch: ma-pakete überschreibt zu dark */
.ma-pakete .pakete__card--featured {
  background: linear-gradient(135deg, #120820 0%, #2a1550 100%) !important;
  border-color: rgba(74,53,128,.55) !important;
  box-shadow: 0 0 0 3px rgba(74,53,128,.15) !important;
}
.ma-pakete .pakete__card--featured h3,
.ma-pakete .pakete__card--featured .pakete__price { color: #fff !important; }
.ma-pakete .pakete__card--featured .pakete__for   { color: rgba(255,255,255,.55) !important; }
.ma-pakete .pakete__card--featured .pakete__features li { color: rgba(255,255,255,.85) !important; }
.ma-pakete .pakete__card--featured .pakete__features li i { color: var(--ma-accent-light) !important; }
.ma-pakete .pakete__card--featured .pakete__features li + li { border-color: rgba(74,53,128,.18) !important; }
.ma-pakete .pakete__featured-label { background: var(--ma-accent); color: #fff; }

/* Kontakt-Formular: 2-Spalten-Grid */
.kontakt__form--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
  width: 100%;
  box-sizing: border-box;
}
.kontakt__form--grid .form-group { margin: 0; min-width: 0; }
.kontakt__form--grid .form-group input,
.kontakt__form--grid .form-group select,
.kontakt__form--grid .form-group textarea { width: 100%; box-sizing: border-box; }
.kontakt__form--grid .form-group--full,
.kontakt__form--grid button,
.kontakt__form--grid .kontakt__form-hint,
.kontakt__form--grid .kontakt__success { grid-column: 1 / -1; }

/* Sidebar */
.kontakt__sidebar {
  min-width: 0;
  overflow: visible;
  max-width: 100%;
}
.kontakt__sidebar-card {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* SourceWeb-Credential */
.vertrauen__cred--sourceweb {
  background: #fdf8ef;
  border-color: #e8d5a8;
}
.vertrauen__cred--sourceweb:hover {
  box-shadow: 0 4px 16px rgba(200,169,110,.25);
}
.vertrauen__cred--sourceweb .vertrauen__cred-icon {
  color: var(--clr-accent-dark);
  font-size: 1.4rem;
}

@media (max-width: 600px) {
  .kontakt__form--grid { grid-template-columns: 1fr; }
}


/* =========================================================
   AUS WEBDESIGN.CSS – No-Brainer-Komponente (nb-*)
   ========================================================= */

/* ─── Headline Accent ─────────────────────────────────── */
.nb-headline-accent { color: var(--clr-accent); }

/* ─── Scarcity-Banner ─────────────────────────────────── */
.nb-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(230,81,0,.07);
  border: 1px solid rgba(230,81,0,.28);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: .85rem;
  font-weight: 500;
  color: #bf360c;
  margin-bottom: 40px;
}
.nb-scarcity i { color: #e65100; font-size: .9rem; }

/* ─── Grid ────────────────────────────────────────────── */
.nb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* ─── Karte ───────────────────────────────────────────── */
.nb-card {
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 28px 24px 24px;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nb-card:hover {
  border-color: var(--clr-accent-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.nb-card--active {
  border-color: var(--clr-accent) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.22), var(--shadow-md) !important;
  transform: translateY(-4px) !important;
  background: #fffdf8;
}
.nb-card--active .nb-card__selector {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
}
.nb-card--active .nb-card__radio {
  background: #fff;
  box-shadow: 0 0 0 3px var(--clr-accent);
}
.nb-card--active .nb-card__select-label { color: var(--clr-primary-dark); }

/* Selector */
.nb-card__selector {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  transition: background var(--transition), border-color var(--transition);
}
.nb-card__radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  background: #fff;
  flex-shrink: 0;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.nb-card--active .nb-card__radio { border-color: transparent; }
.nb-card__select-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Icon */
.nb-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.nb-card__icon--blue {
  background: linear-gradient(135deg, rgba(26,58,92,.12), rgba(42,82,152,.07));
  border: 1px solid rgba(26,58,92,.18);
  color: var(--clr-primary);
}
.nb-card__icon--gold {
  background: linear-gradient(135deg, rgba(200,169,110,.18), rgba(200,169,110,.06));
  border: 1px solid rgba(200,169,110,.35);
  color: var(--clr-accent-dark);
}
.nb-card__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 */
.nb-card__badge {
  display: inline-block;
  background: rgba(26,58,92,.08);
  border: 1px solid rgba(26,58,92,.15);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 12px;
}
.nb-card__badge--gold {
  background: rgba(200,169,110,.1);
  border-color: rgba(200,169,110,.35);
  color: var(--clr-accent-dark);
}
.nb-card__badge--teal {
  background: rgba(0,105,92,.08);
  border-color: rgba(0,105,92,.2);
  color: #00695c;
}

/* Headline */
.nb-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 6px;
  line-height: 1.3;
  padding-right: 60px;
}

/* Subtitle */
.nb-card__subtitle {
  font-size: .85rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Feature-Liste */
.nb-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.nb-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
}
.nb-card__list li i {
  color: var(--clr-success);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: .8rem;
}
.nb-card__list li .nb-highlight { color: var(--clr-accent-dark); }

/* Why-Box */
.nb-card__why {
  margin-top: auto;
  background: rgba(200,169,110,.07);
  border: 1px solid rgba(200,169,110,.22);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .8rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.nb-card__why i { color: var(--clr-accent); flex-shrink: 0; margin-top: 1px; }

/* ─── CTA-Block ───────────────────────────────────────── */
.nb-cta { animation: nbFadeIn .35s ease; }
@keyframes nbFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nb-cta__inner {
  background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-lg);
}
.nb-cta__header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.nb-cta__chosen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,169,110,.18);
  border: 1px solid rgba(200,169,110,.4);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-accent);
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nb-cta__header p {
  font-size: .92rem;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  margin: 0;
}
.nb-cta__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nb-cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.nb-cta__form .form-group label  { color: rgba(255,255,255,.7); }
.nb-cta__form .form-group input,
.nb-cta__form .form-group textarea {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.nb-cta__form .form-group input::placeholder,
.nb-cta__form .form-group textarea::placeholder { color: rgba(255,255,255,.35); }
.nb-cta__form .form-group input:focus,
.nb-cta__form .form-group textarea:focus {
  background: rgba(255,255,255,.14);
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(200,169,110,.2);
  outline: none;
}
.nb-cta__form .form-group input.error { border-color: #ef9a9a; }
.nb-cta__form .form-group textarea { resize: vertical; min-height: 80px; }
.nb-cta__btn {
  width: 100%;
  justify-content: center;
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-primary-dark);
  font-weight: 700;
}
.nb-cta__btn:hover {
  background: var(--clr-accent-dark);
  border-color: var(--clr-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,169,110,.4);
}
.nb-cta__success { text-align: center; padding: 32px 0; }
.nb-cta__success-icon { font-size: 2.8rem; color: var(--clr-accent); margin-bottom: 14px; }
.nb-cta__success h3  { font-size: 1.4rem; color: #fff; margin-bottom: 10px; }
.nb-cta__success p   { color: rgba(255,255,255,.72); font-size: .95rem; }

@media (max-width: 960px) {
  .nb-grid { grid-template-columns: 1fr; }
  .nb-card h3 { padding-right: 50px; }
  .nb-cta__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nb-cta__inner  { padding: 24px 20px; gap: 18px; }
  .nb-cta__header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nb-cta__row    { grid-template-columns: 1fr; }
}