/* ==========================================================================
   comply-theme – richtung-b.css (Redesign Etappe 2+3, Stand 2026-09-19)
   Richtung B „Dossier monochrom" (Peter-Wahl 26.08.2026, Ausbau V2).
   Lädt NACH custom.css und überschreibt die Startseiten-Sektionen, Kopf- und
   Fußzeile. Regelwerk: Rot nie als Buchstabe, nie als Fläche hinter Schrift;
   Buttons ohne Umbruch; nur das ZFU-Originalsiegel; Linien statt Karten,
   eckig, ohne Schatten; Display-Schrift nur H1/H2; Mono für Daten.
   ========================================================================== */

:root {
  --rb-line: var(--color-gray-200);
  --rb-ink: var(--color-gray-900);
  --rb-muted: var(--color-gray-500);
  --rb-sub: var(--color-gray-700);
  --rb-akte: var(--color-gray-100);
  --rb-max: 1240px;
}

/* --------------------------------------------------------------------------
   Grundraster
   -------------------------------------------------------------------------- */
.container { max-width: var(--rb-max); }

.rb-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rb-kicker--right { letter-spacing: 0.1em; text-align: right; }

.rb-h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--rb-ink);
}
.rb-mark { border-bottom: 5px solid var(--color-primary); padding-bottom: 0.02em; }

.rb-section { border-top: 1px solid var(--rb-line); background: var(--color-white); }
.rb-section--akte { background: var(--rb-akte); }
.rb-section--ink { background: var(--rb-ink); color: var(--color-white); border-top: 0; }
.rb-section__inner { padding: clamp(3rem, 6vw, 5.5rem) 0; }

.rb-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8);
}
.rb-lead { font-size: 1rem; line-height: 1.6; color: var(--rb-sub); max-width: 640px; }

/* Buttons – Aktenzeichen-Rolle, Ink; Preisfahne als zweites Glied */
.rb-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
.rb-actions .btn { white-space: nowrap; }
.rb-actions .btn--primary { background: var(--rb-ink); border-color: var(--rb-ink); color: var(--color-white); padding: 1.1rem 1.9rem; }
.rb-actions .btn--primary:hover { background: #2b2b26; border-color: #2b2b26; }
.rb-tag {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--rb-ink); padding: 1.1rem 1.4rem;
  font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; color: var(--rb-ink);
}
.rb-link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--rb-ink); text-decoration: underline; text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.comply-topbar { display: none; }               /* im Canvas nicht vorgesehen */
.site-header { border-bottom: 2px solid var(--rb-ink); box-shadow: none; background: var(--color-white); }
.site-header__inner { padding: 1.1rem 0; }
.site-header__logo { display: flex; align-items: baseline; gap: 14px; }
.site-header__zfu { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--rb-muted); white-space: nowrap; }
.main-nav .nav-link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  text-transform: none; color: var(--rb-ink); text-decoration: none;
}
.main-nav .nav-link:hover { color: var(--rb-sub); }
.nav-cta .btn--primary { background: var(--rb-ink); border-color: var(--rb-ink); color: var(--color-white); padding: 0.75rem 1.5rem; }
.nav-cta .btn--primary:hover { background: #2b2b26; }

/* --------------------------------------------------------------------------
   Hero – 8/4-Raster, Artwork mit rotem Offset-Panel, Prüfvermerk überlappend
   -------------------------------------------------------------------------- */
.hero { background: var(--color-white); color: var(--rb-ink); padding: 0; }
.hero::before, .hero::after { display: none; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0;
  align-items: stretch; max-width: none; padding: 0;
}
.hero__content {
  display: flex; flex-direction: column; gap: 30px;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(2rem, 4vw, 4rem) clamp(3.5rem, 6vw, 6rem) 0;
  border-right: 1px solid var(--rb-line);
}
.hero__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rb-muted); margin: 0; }
.hero__kicker::before { display: none; }
.hero__title {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 4.125rem); line-height: 1.04;
  text-transform: uppercase; color: var(--rb-ink); margin: 0;
}
/* Mehrzeilige Markierung (Hero A, 21.09.2026): Linie unter jeder Zeile ohne Kollision mit der Folgezeile –
   box-decoration-break + Unterstreichung statt border-bottom, Versatz unter die Grundlinie. */
.hero__title mark { background: none; color: inherit; padding: 0; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 5px; text-underline-offset: 0.08em; text-decoration-skip-ink: none; }
.hero__subtitle { font-size: 1.125rem; line-height: 1.65; color: var(--rb-sub); max-width: 560px; margin: 0; }
.hero__actions { margin: 0; }
.hero__aside { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero__days { font-family: var(--font-mono); font-size: 12px; color: var(--rb-muted); }

.hero__visual {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 3vw, 3rem);
}
.rb-artwork { position: relative; padding: 0 0 44px 0; }
.rb-artwork__offset { position: absolute; top: 26px; left: -20px; right: 34px; bottom: 18px; background: var(--color-primary); }
.rb-artwork__frame { position: relative; border: 2px solid var(--rb-ink); background: var(--rb-ink); margin-left: 14px; }
.rb-artwork__frame img { width: 100%; height: auto; display: block; }
.rb-vermerk {
  position: absolute; bottom: 0; right: -6px;
  border: 1.5px solid var(--color-primary); background: var(--color-white);
  padding: 14px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--rb-ink);
}
.rb-vermerk img { width: 46px; height: auto; }
.rb-vermerk__label { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; font-weight: 500; }
.rb-vermerk__label::before { content: ''; width: 7px; height: 7px; background: var(--color-primary); }
.rb-vermerk__text { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Fakten-Linienband (ersetzt roten Stats-Balken)
   -------------------------------------------------------------------------- */
.stats-bar { background: var(--color-white); color: var(--rb-ink); border-top: 2px solid var(--rb-ink); border-bottom: 1px solid var(--rb-line); padding: 0; }
.stats-bar__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; text-align: left; }
.stat-item { padding: 20px 18px; border-right: 1px solid var(--rb-line); display: flex; flex-direction: column; gap: 3px; }
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border-right: 0; padding-right: 0; }
.stat-item__number { font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--rb-ink); line-height: 1.3; }
.stat-item__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rb-muted); }

/* --------------------------------------------------------------------------
   Pflichtenfelder (section-problem)
   -------------------------------------------------------------------------- */
.problem-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.problem-card {
  background: none; border: 0; border-top: 2px solid var(--rb-ink); border-radius: 0; box-shadow: none;
  padding: 16px 0 0; display: flex; flex-direction: column; gap: 10px; transform: none;
}
.problem-card:hover { transform: none; box-shadow: none; }
.problem-card--highlight { border-top: 5px solid var(--color-primary); padding-top: 13px; background: none; }
.problem-card__icon { display: none; }
.problem-card__title { font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; margin: 0; }
.problem-card__text { font-size: var(--text-sm); line-height: 1.6; color: var(--rb-sub); margin: 0; }
.problem-card__fine { font-family: var(--font-mono); font-size: 11px; color: var(--rb-muted); margin-top: auto; border: 0; padding: 0; background: none; }
.problem-card--highlight .problem-card__fine { color: var(--rb-ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   Realität (section-pain) – schwarzes Zahlenband, Linien statt Kacheln
   -------------------------------------------------------------------------- */
#pain.section--dark { background: var(--rb-ink); }
.pain-frame { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(255,255,255,0.18); }
.pain-item { padding: 28px 26px; border-right: 1px solid rgba(255,255,255,0.18); background: none; text-align: left; }
.pain-item:last-child { border-right: 0; }
.pain-item--highlight { background: rgba(255,255,255,0.06); }
.pain-item__number { font-family: var(--font-headline); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--color-white); }
.pain-item__number--symbol { font-family: var(--font-body); }
.pain-item__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #B8B3AE; margin: 8px 0 12px; }
.pain-item--highlight .pain-item__label { color: var(--color-white); border-bottom: 3px solid var(--color-primary); display: inline-block; padding-bottom: 3px; }
.pain-item__text { font-size: var(--text-sm); line-height: 1.6; color: #B8B3AE; }

/* --------------------------------------------------------------------------
   Kurs – 5/7-Raster mit Kapitel-Register
   -------------------------------------------------------------------------- */
.course-overview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.rb-course__copy { display: flex; flex-direction: column; gap: 24px; }
.rb-course__text { font-size: 1rem; line-height: 1.65; color: var(--rb-sub); margin: 0; }
.rb-course__facts { border-left: 2px solid var(--rb-ink); padding: 4px 0 4px 20px; font-size: var(--text-sm); line-height: 1.7; color: var(--rb-sub); margin: 0; }
.course-modules { display: flex; flex-direction: column; gap: 0; }
.course-module {
  display: grid; grid-template-columns: 90px minmax(0, 5fr) minmax(0, 6fr); gap: 20px;
  padding: 15px 2px; border-bottom: 1px solid var(--rb-line); border-left: 0; background: none; align-items: baseline;
}
.course-module:last-child { border-bottom: 0; background: var(--rb-akte); padding-left: 10px; padding-right: 10px; }
.course-module__number { font-family: var(--font-mono); font-size: 12px; color: var(--rb-muted); background: none; width: auto; height: auto; }
.course-module:last-child .course-module__number { font-weight: 500; color: var(--rb-ink); }
.course-module__content { display: contents; }
.course-module__title { font-weight: 600; font-size: 15px; }
.course-module__desc { font-size: var(--text-sm); color: var(--rb-sub); margin: 0; }

/* --------------------------------------------------------------------------
   Kursmaterial-Streifen (neu)
   -------------------------------------------------------------------------- */
.rb-material { background: var(--rb-ink); color: var(--color-white); }
.rb-material .rb-h2 { color: var(--color-white); font-size: 2rem; }
.rb-material .rb-kicker { color: #8A8580; }
.rb-material__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rb-material__item { display: flex; flex-direction: column; gap: 10px; }
.rb-material__pic { border-top: 4px solid var(--color-primary); background: var(--color-white); }
.rb-material__pic img { width: 100%; height: auto; display: block; }
.rb-material__cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8580; }

/* --------------------------------------------------------------------------
   Zielgruppen (section-cluster) – Linienraster
   -------------------------------------------------------------------------- */
.cluster-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rb-line); }
.cluster-card {
  background: var(--color-white); border: 0; border-right: 1px solid var(--rb-line); border-bottom: 1px solid var(--rb-line);
  border-radius: 0; box-shadow: none; padding: 28px 26px; text-decoration: none; transform: none;
}
.cluster-card:nth-child(3n) { border-right: 0; }
.cluster-card:nth-last-child(-n+3) { border-bottom: 0; }
.cluster-card:hover { transform: none; box-shadow: none; background: var(--rb-akte); }
.cluster-card__icon { display: none; }
.cluster-card__title { font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; }
.cluster-card__desc { font-size: var(--text-sm); color: var(--rb-sub); }
.cluster-card__arrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--rb-ink); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Risikostufen (section-risktable) – Akte, weiße Tabelle, Linien
   -------------------------------------------------------------------------- */
#risikostufen.section--dark { background: var(--rb-akte); color: var(--rb-ink); border-top: 1px solid var(--rb-line); }
#risikostufen .section-kicker, #risikostufen .section-lead, #risikostufen .section-title { color: var(--rb-ink) !important; opacity: 1 !important; }
#risikostufen .section-lead { color: var(--rb-sub) !important; }
.risk-table { background: var(--color-white); border: 1px solid var(--rb-line); border-collapse: collapse; width: 100%; }
.risk-table th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400;
  color: var(--rb-muted); background: none; border-bottom: 2px solid var(--rb-ink); padding: 14px 26px; text-align: left;
}
.risk-table td { padding: 18px 26px; border-bottom: 1px solid var(--rb-line); font-size: var(--text-sm); line-height: 1.55; color: var(--rb-sub); vertical-align: top; background: none; }
.risk-table tr:last-child td { border-bottom: 0; }
.risk-table td:nth-child(3) { color: var(--rb-ink); }
.risk-table td:nth-child(4) { font-family: var(--font-mono); font-size: 13px; color: var(--rb-ink); }
.section--dark .risk-table tr:hover td, .risk-table tr:hover td { background: none; color: inherit; }
.risk-level { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0; padding: 0; background: none; color: var(--rb-sub); }
.risk-level--high { font-weight: 500; color: var(--rb-ink); border-bottom: 3px solid var(--color-primary); padding-bottom: 2px; }
.risk-level--minimal { background: var(--rb-ink); color: var(--color-white); padding: 4px 10px; }
.risk-level--low { color: #A6A19C; }
#risikostufen .btn--outline-white { border-color: var(--rb-ink); color: var(--rb-ink); background: none; }
#risikostufen .btn--outline-white:hover { background: var(--rb-ink); color: var(--color-white); }

/* --------------------------------------------------------------------------
   ZFU + ROI (section-zfu) – auf Akte gestellt, kein Gradient
   -------------------------------------------------------------------------- */
.zfu-section { background: var(--color-white); color: var(--rb-ink); border-top: 1px solid var(--rb-line); }
.zfu-section::before, .zfu-section::after { display: none; }
.zfu-section h2, .zfu-section .section-kicker, .zfu-section p, .zfu-section .text-white { color: var(--rb-ink) !important; opacity: 1 !important; }
.zfu-section .zfu-copy p { color: var(--rb-sub) !important; }
.zfu-section .zfu-copy a { color: var(--rb-ink) !important; }
.zfu-badge__image { width: 160px; height: auto; border-radius: 0; box-shadow: none; }
.zfu-badge__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--rb-muted); }
.zfu-section .zfu-copy > div > div { color: var(--rb-muted) !important; }
.roi-table { background: var(--color-white); border: 1px solid var(--rb-line); border-collapse: collapse; }
.roi-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--rb-muted); background: none; border-bottom: 2px solid var(--rb-ink); padding: 14px 26px; }
.roi-table td { padding: 16px 26px; border-bottom: 1px solid var(--rb-line); font-size: var(--text-sm); color: var(--rb-ink); background: none; }
.roi-table tr:last-child td { border-bottom: 0; }
.roi-table tr:hover td { background: none; }
.roi-table td[style*="color:var(--color-primary)"] { color: var(--rb-ink) !important; }   /* Rot nie als Buchstabe */
.roi-table__highlight { background: var(--rb-akte) !important; color: var(--rb-ink) !important; font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Zertifikat (section-certification) – Karte mit rotem Offset-Panel
   -------------------------------------------------------------------------- */
.cert-showcase { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.cert-features { display: flex; flex-direction: column; gap: 0; }
.cert-feature { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--rb-line); }
.cert-feature:last-child { border-bottom: 0; }
.cert-feature__check { display: none; }
.cert-feature::before { content: ''; width: 6px; height: 6px; background: var(--rb-ink); flex: none; }
.cert-feature__text { font-size: 15px; }
.cert-feature__text strong { font-weight: 600; display: inline; }
.cert-feature__text span { display: inline; color: var(--rb-sub); }
.cert-feature__text span::before { content: ' – '; color: var(--rb-sub); }
.rb-certcard-wrap { position: relative; display: flex; justify-content: center; padding: 26px 0; }
.rb-certcard-wrap__offset { position: absolute; top: 0; right: 8px; width: 340px; bottom: 0; background: var(--color-primary); }
.rb-certcard {
  position: relative; border: 2px solid var(--rb-ink); background: var(--color-white);
  padding: 44px 48px; width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; margin-right: 70px;
}
.rb-certcard__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rb-certcard__title { font-family: var(--font-headline); font-weight: 700; font-size: 19px; text-transform: uppercase; }
.rb-certcard__head img { width: 54px; height: auto; }
.rb-certcard__rule { height: 1px; background: var(--rb-line); }
.rb-certcard__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--rb-muted); }
.rb-certcard__value { font-size: 19px; font-weight: 600; }
.rb-certcard__mono { font-family: var(--font-mono); font-size: 14px; }
.rb-certcard__row { display: flex; gap: 36px; }
.rb-certcard__ok { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Preise (section-pricing) – ein Rahmen, drei Spalten, Team auf Akte
   -------------------------------------------------------------------------- */
#preise.section--gray { background: var(--color-white); border-top: 1px solid var(--rb-line); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rb-line); align-items: stretch; }
.pricing-card {
  background: var(--color-white); border: 0; border-right: 1px solid var(--rb-line); border-radius: 0; box-shadow: none;
  padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; transform: none;
}
.pricing-card:last-child { border-right: 0; }
.pricing-card--featured { background: var(--rb-akte); border: 0; border-right: 1px solid var(--rb-line); transform: none; }
.pricing-card__badge { display: none; }
.pricing-card__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rb-muted); margin: 0; font-weight: 400; }
.pricing-card--featured .pricing-card__name { color: var(--rb-ink); font-weight: 500; border-bottom: 3px solid var(--color-primary); padding-bottom: 3px; align-self: flex-start; }
.pricing-card__tagline { font-size: var(--text-sm); color: var(--rb-sub); margin: 0; }
.pricing-card__price { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pricing-card__amount { font-family: var(--font-headline); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--rb-ink); }
.pricing-card__amount .pricing-badge { font-family: var(--font-headline); font-size: 2rem; line-height: 1.1; text-transform: uppercase; background: none; color: var(--rb-ink); padding: 0; border-radius: 0; }
.pricing-card__period { font-size: 13px; color: var(--rb-muted); }
.pricing-card__features { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pricing-card__feature { font-size: var(--text-sm); line-height: 1.55; color: var(--rb-sub); padding: 0; border: 0; }
.pricing-card__feature::before { display: none; }
.pricing-card__cta { margin-top: auto; white-space: nowrap; text-align: center; }
.pricing-card .btn--outline, .pricing-card .btn--black { background: none; border: 1.5px solid var(--rb-ink); color: var(--rb-ink); }
.pricing-card .btn--primary { background: var(--rb-ink); border-color: var(--rb-ink); color: var(--color-white); }
.rb-pricing-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--rb-muted); margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Stimmen (section-testimonials) – Linien-Zitatzeile
   -------------------------------------------------------------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rb-line); }
.testimonial-card { background: none; border: 0; border-right: 1px solid var(--rb-line); border-radius: 0; box-shadow: none; padding: 28px 26px 28px 0; }
.testimonial-card + .testimonial-card { padding-left: 26px; }
.testimonial-card:last-child { border-right: 0; padding-right: 0; }
.testimonial-card__text { font-size: 15px; line-height: 1.65; color: var(--rb-sub); }
.testimonial-card__text::before { content: '„'; font-family: var(--font-headline); font-size: 2rem; color: var(--color-primary); line-height: 0; margin-right: 4px; }
.testimonial-card__avatar--initial { display: none; }
.testimonial-card__author { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rb-line); }
.testimonial-card__name { font-weight: 600; }
.testimonial-card__role, .testimonial-card__company { font-family: var(--font-mono); font-size: 11px; color: var(--rb-muted); }

/* --------------------------------------------------------------------------
   FAQ – Linienliste
   -------------------------------------------------------------------------- */
#faq.section--gray { background: var(--color-white); border-top: 1px solid var(--rb-line); }
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item { border: 0; border-bottom: 1px solid var(--rb-line); border-radius: 0; background: none; box-shadow: none; margin: 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-question { font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 20px 2px; background: none; text-align: left; }
.faq-question__icon { font-family: var(--font-mono); font-size: 18px; color: var(--rb-muted); }
.faq-answer p { color: var(--rb-sub); font-size: 15px; line-height: 1.65; padding: 0 2px 20px; }

/* --------------------------------------------------------------------------
   Abschluss-CTA – schwarzes Band, 7/5
   -------------------------------------------------------------------------- */
.cta-banner { background: var(--rb-ink); color: var(--color-white); text-align: left; padding: 0; }
.cta-banner::before, .cta-banner::after { display: none; }
.rb-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding: clamp(3rem, 6vw, 5rem) 0; }
.cta-banner h2 { font-family: var(--font-headline); font-weight: 700; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.04; text-transform: uppercase; color: var(--color-white); margin: 0 0 18px; }
.cta-banner p { font-size: 1rem; line-height: 1.6; color: #B8B3AE; margin: 0; max-width: none; }
.cta-banner p strong { color: var(--color-white) !important; font-weight: 600; }
.cta-banner__actions { display: flex; align-items: stretch; justify-content: flex-end; gap: 0; margin: 0; flex-wrap: wrap; }
.cta-banner__actions .btn { white-space: nowrap; }
.cta-banner__actions .btn--primary { background: var(--color-white); border-color: var(--color-white); color: var(--rb-ink); }
.cta-banner__actions .btn--outline-white { border: 1.5px solid var(--color-white); color: var(--color-white); background: none; }

/* --------------------------------------------------------------------------
   Fußzeile – vier Spalten, Linie, roter Fußbalken 12 px
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-white); color: var(--rb-ink); border-top: 1px solid var(--rb-line); padding: 0; }
.site-footer::before, .site-footer::after { display: none; }
.rb-footer { padding: 56px 0 40px; display: flex; flex-direction: column; gap: 32px; }
.rb-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rb-footer__col { display: flex; flex-direction: column; gap: 10px; }
.rb-footer__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rb-muted); margin: 0; font-weight: 400; }
.rb-footer__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); line-height: 2.1; color: var(--rb-sub); }
.rb-footer__list a { color: var(--rb-sub); text-decoration: none; }
.rb-footer__list a:hover { color: var(--rb-ink); text-decoration: underline; }
.rb-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--rb-line); padding-top: 24px; }
.rb-footer__brand { font-family: var(--font-headline); font-weight: 700; font-size: 1rem; text-transform: uppercase; }
.rb-footer__brand span { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--rb-muted); text-transform: none; margin-left: 8px; }
.rb-footer__nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: var(--text-sm); }
.rb-footer__nav a { color: var(--rb-sub); text-decoration: none; }
.rb-footer__nav a:hover { color: var(--rb-ink); text-decoration: underline; }
.rb-footer__bar { height: 12px; background: var(--color-primary); }

/* Nachbesserungen nach Sichtprüfung 19.09. (Rot nie als Buchstabe, keine Versalien unter H2) */
.pain-item { border-left: 0 !important; }
.pain-item::before, .pain-item--highlight::before, .pain-item::after { display: none !important; }
.pain-item__number, .pain-item--highlight .pain-item__number { color: var(--color-white) !important; }
.course-module__title { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-body) !important; }
#risikostufen h2, #risikostufen .rb-h2 { color: var(--rb-ink) !important; }
#risikostufen .risk-table td { font-family: var(--font-body) !important; }
#risikostufen .risk-table td[style], #risikostufen .risk-table small { color: var(--rb-ink) !important; }
#risikostufen .risk-table td[style] { font-weight: 600; }
.zfu-badge-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: center; }
.zfu-badge { justify-self: start; }

.testimonial-card::before, .testimonial-card::after { display: none !important; }
.testimonial-card__company::before { content: ' · '; }
.faq-question { text-transform: none !important; letter-spacing: 0 !important; }
.rb-footer__list a { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: var(--text-sm) !important; text-transform: none !important; }

/* --------------------------------------------------------------------------
   Etappe 3 – Mobile-Ableitung
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .problem-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pain-frame { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-item:nth-child(2) { border-right: 0; }
  .pain-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.18); }
  .course-overview { grid-template-columns: 1fr; gap: 40px; }
  .cert-showcase { grid-template-columns: 1fr; gap: 40px; }
  .rb-certcard { margin-right: 40px; }
  .rb-certcard-wrap__offset { width: 60%; }
  .cluster-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cluster-card:nth-child(3n) { border-right: 1px solid var(--rb-line); }
  .cluster-card:nth-child(2n) { border-right: 0; }
  .cluster-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--rb-line); }
  .cluster-card:nth-last-child(-n+2) { border-bottom: 0; }
  .rb-cta { grid-template-columns: 1fr; gap: 28px; }
  .cta-banner__actions { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .zfu-badge-wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { border-right: 0; padding-right: 0; padding-bottom: 2rem; }
  .hero__visual { padding: 0 0 3rem 0; }
  .rb-artwork__offset { left: 0; }
  .rb-artwork__frame { margin-left: 20px; }
  .rb-vermerk { right: 0; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .stats-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item { padding: 16px 12px; border-bottom: 1px solid var(--rb-line); }
  .stat-item:first-child { padding-left: 12px; }
  .stat-item:nth-child(2n) { border-right: 0; }
  .stat-item:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .problem-cards { grid-template-columns: 1fr; }
  .pain-frame { grid-template-columns: 1fr; }
  .pain-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .pain-item:last-child { border-bottom: 0; }
  .course-module { grid-template-columns: 48px minmax(0, 1fr); }
  .course-module__desc { grid-column: 2; }
  .rb-material__grid { grid-template-columns: 1fr; }
  .cluster-nav { grid-template-columns: 1fr; }
  .cluster-card, .cluster-card:nth-child(3n), .cluster-card:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--rb-line); }
  .cluster-card:last-child { border-bottom: 0; }
  .risk-table th, .risk-table td, .roi-table th, .roi-table td { padding: 12px 14px; }
  .rb-certcard { width: 100%; margin-right: 24px; padding: 28px 24px; }
  .rb-certcard-wrap__offset { right: 0; width: 50%; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card, .pricing-card--featured { border-right: 0; border-bottom: 1px solid var(--rb-line); }
  .pricing-card:last-child { border-bottom: 0; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card, .testimonial-card + .testimonial-card { border-right: 0; border-bottom: 1px solid var(--rb-line); padding: 22px 0; }
  .testimonial-card:last-child { border-bottom: 0; }
  .rb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-actions .btn, .rb-tag, .cta-banner__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 480px) {
  .rb-footer__grid { grid-template-columns: 1fr; }
  .rb-head { flex-direction: column; align-items: flex-start; }
  .rb-kicker--right { text-align: left; }
}

/* Antworten auf Käuferfragen – Startseiten-Links auf die drei Antwortseiten (21.09.2026) */
.rb-antworten__liste { list-style: none; margin: 0; padding: 0; }
.rb-antworten__liste li { border-top: 1px solid var(--rb-line); padding: 1rem 0; }
.rb-antworten__liste li:last-child { border-bottom: 1px solid var(--rb-line); }
.rb-antworten__liste a { color: var(--rb-ink); text-decoration: none; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.4; font-family: var(--font-headline), "Archivo Condensed", sans-serif; font-weight: 700; }
.rb-antworten__liste a:hover { text-decoration: underline; text-decoration-color: var(--color-primary); }

/* Vertrauenszeile unter dem Kauf-Button (21.09.2026, Hebel 3b) */
.pricing-card__trust { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--rb-muted); margin: var(--space-3) 0 0; text-align: center; }