/* ============================================================
   Kay B. Rogalla – Landingpage · Sektion-Styles
   Ergänzt design-system.css. Nur var(--token)-Referenzen.
   Jede Sektion ist ein autarker Block (.<name>-section).
   ============================================================ */

/* Globaler Helper für JS-Toggles */
[hidden] { display: none !important; }

/* ===== HERO ===== */
.hero {
  position: relative; width: 100%; height: 100svh; max-height: 980px;
  overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 1024px) { .hero { display: block; } }
.hero__media { position: absolute; inset: 0; }
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2), #000); }
@media (min-width: 1024px) { .hero__overlay { background: linear-gradient(to right, #000, rgba(0,0,0,.4)); } }
.hero__inner { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
@media (min-width: 1024px) {
  .hero__inner { flex-direction: row; align-items: center; height: 100%; max-width: var(--max-desktop); margin-inline: auto; }
}
.hero__col {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-6);
  justify-content: center; align-items: center; text-align: center;
  padding: var(--space-10) var(--space-4);
}
@media (min-width: 768px) { .hero__col { padding-inline: var(--space-8); } }
@media (min-width: 1024px) {
  .hero__col { flex: 0 0 auto; width: 620px; gap: var(--space-8);
    align-items: flex-start; text-align: left;
    padding: var(--space-10) 0 var(--space-10) var(--space-20); }
}
.hero__logo { height: 48px; width: auto; object-fit: contain; }
.hero__h1 { font-size: 40px; font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -2px; color: var(--color-light); margin: 0; }
@media (min-width: 768px) { .hero__h1 { font-size: 48px; letter-spacing: -2.4px; } }
.hero__sub { font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -1px; line-height: 1.5; color: var(--color-light); margin: 0; }
@media (min-width: 768px) { .hero__sub { font-size: 20px; } }
.hero__body { font-size: 16px; line-height: 1.5; color: var(--color-light); margin: 0; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
@media (min-width: 1024px) { .hero__badges { justify-content: flex-start; } }
.hero__photo {
  position: absolute; right: clamp(-300px, -50vw, 0px); bottom: -20px;
  height: 95%; max-width: 78%; width: auto; object-fit: contain; object-position: bottom right;
  filter: drop-shadow(var(--shadow-photo)); pointer-events: none;
  animation: kr-float 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero__photo { animation: none; } }

/* Countdown (Hero) – aus Figma `countdown` rekonstruiert */
.kr-countdown { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.kr-countdown__unit { display: flex; flex-direction: column; align-items: center; }
.kr-countdown__label { font-size: 14px; font-weight: var(--fw-medium); color: var(--color-light); line-height: 1.4; }
.kr-countdown__value { font-family: var(--font-counter); font-size: 56px; font-weight: var(--fw-bold); line-height: 1; color: var(--color-primary); }
.kr-countdown__sep { font-family: var(--font-counter); font-size: 28px; font-weight: var(--fw-bold); line-height: 1.2; color: var(--color-light); }
@media (min-width: 768px) {
  .kr-countdown__value { font-size: 72px; }
  .kr-countdown__sep { font-size: 32px; }
}

/* ===== LOGOS ===== */
.logos-section { padding-top: var(--space-6); padding-bottom: var(--space-6); background: var(--color-surface); overflow: hidden; }
.logos-track { display: flex; align-items: center; gap: 56px; width: max-content; }
.logos-item { height: 42px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .5; transition: opacity .25s ease, filter .25s ease; }
.logos-item:hover { filter: grayscale(0); opacity: .9; }

/* ===== REGISTRATION ===== */
.registration-section { background: var(--color-surface); }
.registration-grid { display: flex; flex-direction: column; gap: var(--space-10); align-items: center; }
.registration-copy { width: 100%; }
.registration-date { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.registration-date-icon {
  display: inline-flex; align-items: center; justify-content: center; padding: 6px;
  background: var(--color-secondary-50); border: 1px solid var(--color-secondary-100);
  border-radius: var(--radius-pill); color: var(--color-heading);
}
.registration-date .kr-eyebrow { margin: 0; }
.registration-form {
  width: 100%; display: flex; flex-direction: column; gap: var(--space-8);
  background: var(--color-secondary-50); border: 1px solid var(--color-secondary-100);
  border-radius: var(--radius-sm); padding: var(--space-6);
}
.registration-field { display: flex; flex-direction: column; gap: var(--space-2); }
.registration-label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-heading); }
.registration-input {
  display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.registration-input i { color: var(--color-muted); font-size: 14px; }
.registration-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--color-body); }
.registration-input input::placeholder { color: var(--color-muted); }
@media (min-width: 1024px) {
  .registration-grid { flex-direction: row; align-items: center; }
  .registration-copy { width: 620px; flex-shrink: 0; }
  .registration-form { flex: 1; }
}

/* ===== QUOTE ===== */
.quote-section { background: var(--color-secondary-50); text-align: center; }
.quote-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.quote-text { margin: 0; max-width: 860px; font-size: 24px; font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: -1.5px; font-style: italic; color: var(--color-heading); }
.quote-cite { font-size: 16px; font-weight: var(--fw-semibold); font-style: normal; color: var(--color-primary-dark); }
@media (min-width: 768px) { .quote-text { font-size: 32px; } }

/* ===== PROBLEM (Scroll-Stacking) ===== */
/* Default (kein JS / reduced-motion): Reihen normal gestapelt.
   Mit .is-sticky (JS aktiv): Sticky-Bühne, Reihen fahren von unten hoch. */
.problem-section { background: var(--color-surface); }
.problem-scroll { position: relative; width: 100%; }
.problem-stage-inner { position: relative; max-width: var(--max-desktop); margin-inline: auto; }
.problem-row { padding-inline: var(--space-4); }
.problem-row__content { display: flex; flex-direction: column; gap: var(--space-8); align-items: center; padding-block: var(--space-10); }
.problem-text { display: flex; flex-direction: column; gap: var(--space-5); }
.problem-heading { font-size: 28px; font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: -1.4px; color: var(--color-heading); margin: 0; }
.problem-media { width: 100%; }
.problem-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); }

/* Sticky-Stacking aktiv */
.problem-section.is-sticky { padding: 0; }
.problem-section.is-sticky .problem-stage { position: sticky; overflow: hidden; }
.problem-section.is-sticky .problem-stage-inner { height: 100%; }
.problem-section.is-sticky .problem-row {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: var(--color-surface); will-change: transform;
}

@media (min-width: 768px) {
  .problem-row { padding-inline: var(--space-8); }
  .problem-heading { font-size: 32px; letter-spacing: -1.6px; }
}
@media (min-width: 1024px) {
  .problem-row { padding-inline: var(--space-20); }
  .problem-row__content { flex-direction: row; gap: 64px; }
  .problem-text { flex: 1; }
  .problem-media { width: 50%; flex-shrink: 0; }
  .problem-heading { font-size: 36px; letter-spacing: -1.8px; }
}

/* ===== CTA-BANNER (shared für #cta-1 centered & #cta-2 left) ===== */
.cta-section { position: relative; overflow: hidden; padding: 0; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-overlay { position: absolute; inset: 0; z-index: 1; }
.cta-h2, .cta-sub, .cta-body { color: var(--color-light); }
.cta-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* -- Variante centered (#cta-1) -- */
.cta-section--centered { min-height: 600px; display: flex; align-items: center; justify-content: center; padding-block: 80px; }
.cta-section--centered .cta-overlay { background: linear-gradient(to right, rgba(0,0,0,.4), #000 50%, rgba(0,0,0,.4)); opacity: .85; }
.cta-inner {
  position: relative; z-index: 2; width: 100%; max-width: 620px; margin-inline: auto;
  padding-inline: var(--space-5); text-align: center; color: var(--color-light);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.cta-inner .cta-h2, .cta-inner .cta-sub, .cta-inner .cta-body { margin: 0; }
.cta-inner .cta-badges { justify-content: center; }

/* -- Variante left (#cta-2) -- */
.cta-section--left .cta-overlay { background: linear-gradient(to right, #000 50%, rgba(0,0,0,.4)); }
.cta-container {
  position: relative; z-index: 1; max-width: var(--max-desktop); margin: 0 auto;
  padding: 80px var(--space-4); display: flex; flex-direction: column; gap: var(--space-10);
}
.cta-text { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-light); }
.cta-text .cta-badges { margin-top: var(--space-2); }
.cta-form {
  background: var(--color-overlay-dark); border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-8);
}
.cta-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cta-label { font-size: 14px; color: var(--color-muted); }
.cta-input-wrap { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.cta-input-wrap i { color: var(--color-caption); font-size: 16px; }
.cta-input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: var(--color-body); height: 100%; }
.cta-form-note { color: var(--color-light); }
@media (min-width: 768px) { .cta-container { padding-left: var(--space-8); padding-right: var(--space-8); } }
@media (min-width: 1024px) {
  .cta-container { flex-direction: row; align-items: center; gap: 80px; }
  .cta-text { width: 620px; max-width: 620px; flex-shrink: 0; }
  .cta-form { flex: 1; }
}

/* ===== VIDEO ===== */
.video-section { background: var(--color-surface); }
.video-inner { display: flex; flex-direction: column; gap: var(--space-10); }
.video-top { max-width: 853px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.video-frame { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-placeholder-bg); }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-features { display: flex; flex-direction: column; gap: var(--space-10); }
.video-feature { display: flex; flex-direction: column; gap: var(--space-3); }
.video-feature-icon { font-size: 40px; line-height: 1; color: var(--color-primary); }
.video-feature-title { font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -1px; margin: 0; }
@media (min-width: 768px) { .video-features { flex-direction: row; } .video-feature { flex: 1; } }
@media (min-width: 1024px) { .video-feature-title { font-size: 20px; } }

/* ===== CTA-IMAGE ===== */
.cta-image-section { position: relative; overflow: hidden; padding: 0; background-color: #000; }
.cta-image-section::before { content: ""; position: absolute; inset: 0; background-image: url("images/hero-bg.jpg"); background-size: cover; background-position: center; z-index: 0; }
.cta-image-section::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, #000 50%, rgba(0,0,0,.4)); z-index: 1; }
/* padding-bottom:0 → das Foto reicht bis an die Element-Unterkante */
.cta-image-inner { position: relative; z-index: 2; width: 100%; max-width: var(--max-desktop); margin-inline: auto; padding: var(--space-16) var(--space-6) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.cta-image-content { color: var(--color-light); width: 100%; padding-bottom: var(--space-10); }
.cta-image-h2, .cta-image-sub, .cta-image-body { color: var(--color-light); }
.cta-image-badges { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-image-badges li { margin: 0; }
/* Foto am UNTEREN Element-Rand verankert (kommt unten heraus, statt frei zu schweben) */
.cta-image-media { width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.cta-image-photo { display: block; height: 320px; width: auto; max-width: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(var(--shadow-photo)); animation: kr-float 7s ease-in-out infinite; }
@media (min-width: 768px) {
  .cta-image-inner { padding: var(--space-20) var(--space-8) 0; }
  .cta-image-photo { height: 480px; }
}
@media (min-width: 1024px) {
  .cta-image-section { min-height: 680px; }
  .cta-image-inner { flex-direction: row; align-items: stretch; gap: var(--space-20); min-height: 680px; padding-bottom: 0; }
  .cta-image-content { width: 620px; max-width: 620px; flex-shrink: 0; align-self: center; }
  .cta-image-media { flex: 1; width: auto; align-items: flex-end; }
  .cta-image-photo { height: 100%; max-height: 660px; margin-bottom: -20px; object-position: bottom right; }
}
@media (prefers-reduced-motion: reduce) { .cta-image-photo { animation: none; } }

/* ===== AGENDA ===== */
.agenda-section { background: var(--color-surface); }
.agenda-tabs { display: inline-flex; gap: var(--space-1); background: var(--color-secondary-100); border-radius: var(--radius-pill); padding: 4px; margin-bottom: var(--space-8); }
.agenda-tab { border: 1px solid transparent; background: transparent; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-6); font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-caption); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.agenda-tab.is-active { background: var(--color-surface); border-color: var(--color-secondary-200); box-shadow: var(--shadow-sm); color: var(--color-heading); }
.agenda-session { margin-bottom: var(--space-8); }
.agenda-session-title { font-size: 26px; font-weight: var(--fw-bold); color: var(--color-heading); margin: 0 0 var(--space-3); }
.agenda-session-time { margin-bottom: var(--space-4); }
.agenda-faqs { margin-bottom: var(--space-8); }
.agenda-acc { background: var(--color-secondary-50); border: 1px solid var(--color-secondary-300); border-radius: var(--radius-sm); margin-bottom: var(--space-2); overflow: hidden; }
.agenda-acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: transparent; border: none; text-align: left; cursor: pointer; padding: var(--space-4) var(--space-5); font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-heading); }
.agenda-acc-chevron { flex-shrink: 0; transition: transform .3s ease; color: var(--color-caption); }
.agenda-acc.is-open .agenda-acc-chevron { transform: rotate(180deg); }
.agenda-acc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.agenda-acc.is-open .agenda-acc-body { max-height: 400px; }
.agenda-acc-body .kr-text { margin: 0; padding: 0 var(--space-5) var(--space-4); }
@media (min-width: 1024px) {
  .agenda-session-title { font-size: 30px; }
  .agenda-acc-trigger { font-size: 20px; }
  .agenda-acc.is-open .agenda-acc-body { max-height: 320px; }
}

/* ===== COMPARISON ===== */
.comparison-section { background: var(--color-surface); }
.comparison-section .kr-container { display: flex; flex-direction: column; gap: var(--space-10); }
.comparison-header { max-width: 853px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-4); }
.comparison-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; }
.comparison-th, .comparison-td { text-align: left; vertical-align: middle; padding: var(--space-4); }
.comparison-th { font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -1px; color: var(--color-heading); background: var(--color-secondary-50); }
.comparison-td { font-size: 14px; color: var(--color-body); }
.comparison-label { font-weight: var(--fw-semibold); color: var(--color-heading); }
.comparison-col-area { width: 300px; }
.comparison-table tbody tr:nth-child(odd) .comparison-td { background: var(--color-surface); }
.comparison-table tbody tr:nth-child(even) .comparison-td { background: var(--color-secondary-100); }
.comparison-th--va, .comparison-td--va { border-left: 4px solid var(--color-primary); border-right: 4px solid var(--color-primary); }
.comparison-th--va { border-top: 4px solid var(--color-primary); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); text-align: center; }
.comparison-td--va-last { border-bottom: 4px solid var(--color-primary); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.comparison-logo { height: 56px; width: auto; object-fit: contain; display: inline-block; }
.comparison-cta { display: flex; justify-content: center; }
.comparison-cta .kr-btn { max-width: 360px; }
@media (min-width: 768px) { .comparison-th { font-size: 20px; } .comparison-td { font-size: 16px; } }
@media (min-width: 1024px) { .comparison-col-area { width: 426px; } }

/* ===== ABOUT ===== */
.about-section { background: var(--color-surface); }
.about-section .kr-container { display: flex; flex-direction: column; gap: var(--space-20); }
.about-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.about-text { display: flex; flex-direction: column; gap: var(--space-4); }
.about-heading { font-size: 28px; font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: -1.4px; color: var(--color-heading); margin: 0; }
.about-media { width: 100%; }
.about-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); display: block; }
@media (min-width: 768px) { .about-heading { font-size: 32px; letter-spacing: -1.6px; } }
@media (min-width: 1024px) {
  .about-row { flex-direction: row; gap: 64px; }
  .about-text, .about-media { width: 50%; }
  .about-heading { font-size: 36px; letter-spacing: -1.8px; }
  .about-row--reverse { flex-direction: row-reverse; }
}

/* ===== AWARDS ===== */
.awards-section { background: var(--color-surface); }
.awards-section .kr-container { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.awards-title { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -1px; color: var(--color-heading); text-align: center; margin: 0; }
.awards-track { gap: var(--space-10); }
.awards-badge { height: 160px; width: auto; object-fit: contain; flex: 0 0 auto; }
@media (min-width: 768px) { .awards-badge { height: 200px; } }
@media (min-width: 1024px) { .awards-badge { height: 260px; } }

/* ===== TESTIMONIALS ===== */
.testimonials-section { background: var(--color-surface); }
.testimonials-inner { display: flex; flex-direction: column; gap: var(--space-10); }
.testimonials-title { text-align: center; }
.testimonials-viewport { overflow: hidden; width: 100%; }
.testimonials-track { position: relative; width: 100%; }
.testimonials-slide { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.testimonials-slide--text { align-items: center; }
.testimonials-media { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
.testimonials-media--video { aspect-ratio: 1 / 1; background: var(--color-placeholder-bg); }
.testimonials-media--image { aspect-ratio: 1 / 1; background: var(--color-secondary-200); }
.testimonials-media-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.testimonials-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: var(--radius-pill); border: none; background: #fff; color: var(--color-heading); font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.testimonials-content { display: flex; flex-direction: column; gap: var(--space-5); }
.testimonials-content--center { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.testimonials-stars { display: flex; gap: 4px; color: var(--color-primary); font-size: 20px; }
.testimonials-quote { margin: 0; }
.testimonials-author { display: flex; align-items: center; gap: var(--space-4); }
.testimonials-author--center { justify-content: center; }
.testimonials-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-secondary-200); color: var(--color-secondary-900); font-size: 18px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }
.testimonials-author-meta { display: flex; flex-direction: column; text-align: left; }
.testimonials-name { font-size: 16px; font-weight: var(--fw-bold); color: var(--color-heading); }
.testimonials-role { font-size: 16px; color: var(--color-caption); }
.testimonials-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.testimonials-dots { display: flex; align-items: center; gap: var(--space-2); }
.testimonials-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--radius-pill); background: rgba(22,21,21,.1); cursor: pointer; }
.testimonials-dot.is-active { background: var(--color-primary); }
.testimonials-arrows { display: flex; gap: var(--space-3); }
.testimonials-arrow { display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-secondary-200); background: var(--color-surface); color: var(--color-heading); font-size: 18px; cursor: pointer; line-height: 1; }
.testimonials-arrow:hover { border-color: var(--color-secondary-100); }
@media (min-width: 1024px) {
  .testimonials-slide--media { flex-direction: row; align-items: center; gap: var(--space-10); }
  .testimonials-media--video { width: 640px; max-width: 50%; }
  .testimonials-media--image { width: 320px; max-width: 40%; }
  .testimonials-content { flex: 1; }
}

/* ===== BEFORE / AFTER ===== */
.before-after-section { background: var(--color-surface); }
.before-after-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.before-after-header { max-width: 853px; text-align: center; display: flex; flex-direction: column; gap: var(--space-4); }
.before-after-stage { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); }
.before-after-panel { display: flex; flex-direction: column; border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid var(--color-border); }
.before-after-panel--before { background: var(--color-secondary-50); border-color: var(--color-border); color: var(--color-heading); }
.before-after-panel--after { background: var(--color-secondary-900); border-color: var(--color-secondary-300); color: var(--color-light); }
.before-after-image-wrap { flex-shrink: 0; }
.before-after-image { display: block; width: 100%; height: 224px; object-fit: cover; }
.before-after-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.before-after-headline { margin: 0; font-size: 24px; font-weight: var(--fw-semibold); }
.before-after-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.before-after-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 16px; }
.before-after-panel--before .before-after-list i { color: var(--color-heading); margin-top: 3px; }
.before-after-panel--after .before-after-list i { color: var(--color-primary); margin-top: 3px; }
.before-after-toggle { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-secondary-200); border: none; border-radius: var(--radius-md); padding: var(--space-4); font-size: 16px; color: var(--color-heading); cursor: pointer; }
@media (min-width: 1024px) {
  .before-after-panel { flex-direction: row; align-items: stretch; }
  .before-after-image-wrap { width: 552px; max-width: 50%; }
  .before-after-image { height: 100%; min-height: 552px; }
  .before-after-body { flex: 1; padding: var(--space-10); justify-content: center; }
  .before-after-headline { font-size: 32px; }
}

/* ===== FOOTER ===== */
.footer-section { background: var(--color-surface-dark); }
.footer-inner { padding-top: var(--space-10); padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: var(--space-8); }
.footer-top { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.footer-logo { height: 40px; width: auto; }
.footer-socials { display: flex; gap: var(--space-3); }
.footer-social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 16px; text-decoration: none; transition: border-color .2s, color .2s; }
.footer-social:hover { border-color: var(--color-primary); color: var(--color-primary); }
.footer-divider { width: 100%; margin: 0; border: none; border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-copy { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; }
.footer-legal a:hover { color: #fff; }
@media (min-width: 768px) {
  .footer-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}