/* ==========================================================================
   AffiliatePoint – Responsive Kompositionen
   Large Desktop ≥1440 | Desktop 1024–1439 | Tablet 768–1023 | Mobile ≤767
   Mobile ist KEINE skalierte Desktop-Version – eigene Kompositionen.
   ========================================================================== */

/* ---------- Large Desktop (≥1440px) ---------- */
@media (min-width: 1440px) {
  .hero__inner { min-height: 840px; }
}

/* ---------- Desktop (1024–1439px) ---------- */
@media (max-width: 1279px) {
  .site-header__inner { height: 84px; }
  .site-nav a { padding: 0 9px; font-size: 13.5px; }
  .hero__inner { min-height: 760px; }
  .hero__content { top: 300px; max-width: 560px; }
  .collage-group--left { right: calc(50% + 270px); }
  .collage-group--right { left: calc(50% + 270px); }
  .collage-group { transform: scale(.86); transform-origin: top right; }
  .collage-group--right { transform-origin: top left; }
  .feature-card { padding: 30px 30px 28px; min-height: 350px; }
  .feature-card__title { font-size: 23px; }
  .creator__card { grid-template-columns: minmax(280px, 360px) 1fr; }
  .assistant-card { min-width: 280px; }
  .integrations-card { padding: 30px; }
  .integration-grid { grid-template-columns: repeat(3, 74px); gap: 12px; }
  .cta__card { grid-template-columns: minmax(360px, 560px) 1fr; }
  .cta__benefits { right: 24px; }
}

/* ---------- Header: ab 1120px abwärts kompakt (Logo | Login | Burger) ---------- */
@media (max-width: 1120px) {
  .site-nav { display: none; }
  .site-header__actions { display: none; }
  .site-header__mobile { display: flex; align-items: center; gap: 8px; }
  .site-header__mobile .btn { min-height: 38px; padding: 0 18px; font-size: 13px; }
}

/* ---------- Tablet (768–1023px) ---------- */
@media (max-width: 1023px) {
  :root { --card-gap: 22px; }
  .site-header__inner { height: 76px; }

  /* Hero: Tablet nutzt bereits die Mobile-Komposition (Bild oben, Text unten), aber in zwei Spalten */
  .hero__inner { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 20px 0 8px; }
  .hero__collage { display: none; }
  .hero__content { position: static; transform: none; max-width: none; order: 1; }
  .hero__mobile-visual { display: block; order: 2; position: relative; width: 100%; aspect-ratio: 358 / 425; max-height: 560px; border-radius: 26px; overflow: hidden; background: var(--surface-soft); }
  .hero__mobile-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
  .hero__mobile-visual .metric-card { position: absolute; box-shadow: var(--shadow-lg); }
  .hero__mobile-visual .metric-card--performance-m { left: 14px; top: 82px; width: 178px; transform: rotate(-4deg); padding: 14px 16px 12px; }
  .hero__mobile-visual .metric-card--performance-m .sparkline { height: 64px; }
  .hero__mobile-visual .metric-card--revenue-m { right: 16px; bottom: 32px; width: 186px; transform: rotate(5deg); grid-template-columns: 1fr auto; display: grid; column-gap: 12px; align-items: end; }
  .hero__mobile-visual .metric-card--revenue-m .minibars { grid-column: 2; grid-row: 1 / 4; width: 54px; }
  .hero__mobile-visual .metric-card__value { font-size: 22px; }
  .hero__title { font-size: clamp(38px, 5.2vw, 52px); max-width: none; }
  .hero__actions .btn { min-height: 52px; }

  .logo-strip { padding-top: 40px; }
  .logo-strip__row { flex-wrap: wrap; justify-content: center; gap: 24px 40px; }
  .logo-strip__item img { height: 30px; }
  .logo-strip__item--beraterportal img { height: 48px; }

  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .section-head__text { justify-self: start; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; padding-bottom: 28px; }
  .feature-card--campaign { padding-bottom: 300px; }
  .feature-card--campaign .feature-card__visual { right: 0; top: auto; bottom: -22%; width: 70%; max-width: 520px; left: auto; aspect-ratio: 1; }
  .feature-card--analytics { padding-right: 36px; }
  .feature-card--analytics .feature-card__visual { position: static; width: 100%; margin-top: 24px; }
  .feature-card--analytics .chart-card { height: auto; }
  .chart { min-height: 220px; }
  .feature-card__text { max-width: 520px; }
  .feature-card__title { max-width: none; }

  .creator__card { grid-template-columns: 1fr; padding: 36px 30px 40px; }
  .creator__visual { min-height: 460px; max-width: 620px; margin: 0 auto; width: 100%; }

  .integrations-row { grid-template-columns: 1fr; }
  .integrations-card { grid-template-columns: 1fr auto; min-height: 0; }
  .testimonial { padding: 8px 4px; }

  .steps__grid { grid-template-columns: 1fr; gap: 18px; }

  .cta__card { grid-template-columns: 1fr; }
  .cta__visual { min-height: 320px; }
  .cta__visual::before { background: linear-gradient(180deg, var(--green) 0%, rgba(6,60,43,0.4) 30%, rgba(6,60,43,0) 60%); }
  .cta__visual img { object-position: 60% 20%; }

  .faq__inner { grid-template-columns: 1fr; gap: 24px; }

  .site-footer__inner { grid-template-columns: 1fr; justify-items: start; }
  .site-footer__nav { justify-content: flex-start; }

  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__visual { max-width: 640px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--reverse > :first-child { order: 0; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-simple { grid-template-columns: 1fr; }
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
  :root { --section-gap: 56px; --card-gap: 16px; }
  body { font-size: 15px; }

  /* Header: Logo | Login | Burger */
  .site-header__inner { height: 64px; gap: 10px; }
  .site-header__logo img { height: 26px; }
  .site-header__mobile .btn { min-height: 34px; padding: 0 16px; font-size: 12.5px; border-width: 1px; }
  .menu-toggle { width: 40px; height: 40px; }

  /* Hero: Bild oben mit Overlay-Karten, Text darunter */
  .hero__inner { display: flex; flex-direction: column; gap: 0; padding: 6px 0 0; }
  .hero__mobile-visual { order: 0; max-height: 480px; }
  .hero__content { order: 1; padding-top: 34px; }
  .hero__content .eyebrow { margin-bottom: 14px; line-height: 1.5; letter-spacing: 0.14em; font-size: 10.5px; }
  .hero__title { font-size: clamp(34px, 10.5vw, 44px); line-height: 1.06; max-width: none; }
  .hero__text { margin-top: 18px; font-size: 15px; line-height: 1.6; }
  .hero__actions { margin-top: 26px; flex-direction: column; width: 100%; gap: 10px; }
  .hero__actions .btn { width: 100%; min-height: 56px; }

  /* Logos: ausgewogenes Mehrzeilen-Raster */
  .logo-strip { padding-top: 40px; }
  .logo-strip__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; justify-items: center; align-items: center; background: var(--surface-soft); border-radius: 26px; padding: 30px 20px; }
  .logo-strip__item--beraterportal { grid-column: 1 / -1; }
  .logo-strip__item--magento { grid-column: 1 / -1; }
  .logo-strip__item img { height: 26px; }
  .logo-strip__item--beraterportal img { height: 50px; }
  .logo-strip__item--magento img { height: 30px; }

  /* Produkt-Intro */
  .section-head__title { font-size: clamp(32px, 9.2vw, 40px); max-width: none; }
  .section-head__text { font-size: 15px; }

  /* Feature-Cards: volle Breite, Icon-Chip + Eyebrow, Visual unten */
  .feature-grid { margin-top: 28px; }
  .feature-card { padding: 26px 22px 22px; border-radius: 26px; }
  .feature-card__head .icon-chip { display: inline-flex; }
  .feature-card__title { font-size: 26px; margin-top: 18px; }
  .feature-card__text { font-size: 15px; max-width: none; }
  .feature-card--campaign { padding-bottom: 22px; }
  .feature-card--campaign .feature-card__badge { display: none; }
  .feature-card--campaign .feature-card__visual { display: none; }
  .feature-card__visual--mobile { display: block; position: relative; margin: 20px -22px -8px; width: calc(100% + 44px); aspect-ratio: 820 / 520; overflow: hidden; }
  .feature-card__visual--mobile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .feature-card__action { padding-top: 18px; }
  .feature-card--analytics .feature-card__visual { margin-top: 20px; }
  .chart-card { padding: 18px 16px 14px; }
  .chart { min-height: 190px; }
  .chart text { font-size: 10px; }

  /* Creator: pfirsichfarbene Karte, Text → CTA → Assistent → Metriken */
  .creator__card { background: var(--surface-peach); padding: 34px 18px 26px; gap: 28px; }
  .creator__title { font-size: 30px; }
  .creator__text { font-size: 15px; }
  .creator__content .btn { width: 100%; min-height: 56px; justify-content: space-between; padding: 0 24px; }
  .creator__visual { min-height: 0; max-width: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .creator__blob { left: -4%; top: -4%; width: 108%; height: 70%; border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%; }
  .creator__dash { position: static; max-width: none; height: auto; display: contents; }
  .creator__dash svg.dash-line { display: none; }
  .creator__dash .spark { top: 2px; right: 6px; width: 36px; height: 36px; }
  .assistant-card { position: relative; grid-column: 1 / -1; left: auto; top: auto; width: 100%; min-width: 0; transform: rotate(-2deg); margin: 16px 0 10px; padding: 22px 18px 18px; }
  .assistant-card__item { font-size: 13px; padding: 12px 14px; }
  .creator__metric { position: relative; transform: none !important; inset: auto; width: auto !important; }
  .creator__metric--leads { padding-top: 34px; }
  .creator__metric--commissions { grid-template-columns: 1fr; }
  .creator__metric--commissions .minibars { grid-column: 1; grid-row: auto; width: 56px; margin-top: 8px; }
  .creator__metric--payout { grid-column: 1 / -1; }

  /* Integrationen: 3-Spalten-Icon-Raster mit Labels, Testimonial als Karte */
  .integrations-card { grid-template-columns: 1fr; padding: 28px 20px 24px; gap: 20px; background: transparent; border: 1px solid var(--line); background: #fff; }
  .integrations-card__title { font-size: 28px; }
  .integrations-card__text { font-size: 15px; max-width: none; }
  .integration-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
  .integration-tile { aspect-ratio: auto; padding: 18px 8px 12px; background: var(--surface-soft); border: 0; box-shadow: none; }
  .integration-tile img { width: 40px; height: 40px; }
  .integration-tile img.is-wide { width: 54px; }
  .integration-tile span { display: block; }
  .integrations-card .btn-circle { margin-top: 4px; }

  .testimonial { background: #fff; border-radius: 26px; padding: 28px 22px 24px; border: 1px solid var(--line); }
  .testimonial__mark { display: block; width: 30px; height: 30px; color: var(--orange); margin-bottom: 14px; }
  .testimonial__quote { font-size: 23px; font-weight: 500; }
  .testimonial__author { margin-top: 22px; }
  .testimonial__dots { display: flex; gap: 6px; margin-top: 20px; }
  .testimonial__dots i { width: 6px; height: 6px; border-radius: 50%; background: #d8d4c9; }
  .testimonial__dots i.is-active { background: var(--green); }

  /* So funktioniert's: vertikaler nummerierter Ablauf */
  .steps__title { font-size: clamp(32px, 9.2vw, 40px); max-width: none; }
  .steps__grid { margin-top: 28px; gap: 0; }
  .step { background: transparent; padding: 0 0 36px 60px; border-radius: 0; }
  .step__num { left: 0; right: auto; top: 0; width: 40px; height: 40px; background: var(--orange-tint); color: var(--orange); font-size: 15px; }
  .step .icon-chip { width: 64px; height: 64px; border-radius: 20px; }
  .step .icon-chip .icon { width: 28px; height: 28px; }
  .step__title { margin-top: 18px; font-size: 20px; }
  .step__text { font-size: 15px; }
  .step__connector { display: block; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 2px; background: #e9e4d8; }
  .step:last-child .step__connector { display: none; }

  /* CTA: vertikale Vollbreiten-Karte */
  .cta__card { grid-template-columns: 1fr; border-radius: 26px; }
  .cta__content { padding: 34px 22px 26px; }
  .cta__content .eyebrow { line-height: 1.5; font-size: 10.5px; letter-spacing: 0.14em; }
  .cta__title { font-size: clamp(32px, 9.2vw, 40px); }
  .cta__text { font-size: 15px; }
  .cta__form { max-width: none; padding-left: 18px; }
  .cta__form .btn-circle { width: 46px; height: 46px; }
  .cta__visual { display: none; }
  .cta__benefits--mobile { display: flex; position: static; background: transparent; box-shadow: none; padding: 22px 0 0; gap: 14px; color: #fff; }
  .cta__benefits--mobile li { font-size: 15px; font-weight: 500; }
  .cta__benefits--mobile .check { width: 30px; height: 30px; background: #fff; color: var(--green); }
  .cta__benefits--mobile .check .icon { width: 13px; height: 13px; }
  .cta__note { margin-top: 24px; }

  /* FAQ: Akkordeon-Karten + Kontakt-Karte */
  .faq__title { font-size: clamp(36px, 10vw, 44px); }
  .faq__list { gap: 12px; }
  .faq-item, .faq-item:first-child { border: 0; background: #fff; border-radius: 20px; border: 1px solid var(--line); }
  .faq-item__btn { padding: 18px 18px; font-size: 15.5px; font-weight: 600; }
  .faq-item__icon { width: 30px; height: 30px; background: var(--green); color: #fff; }
  .faq-item__content { padding: 0 18px 18px; }
  .faq__contact { display: block; margin-top: 24px; background: var(--green-tint); border-radius: 26px; padding: 30px 22px; text-align: center; }
  .faq__contact .icon-chip { margin: 0 auto 14px; }
  .faq__contact__title { font-size: 20px; }
  .faq__contact__text { margin-top: 6px; font-size: 14px; color: var(--muted); }
  .faq__contact .btn { margin-top: 18px; }

  /* Footer: vertikale Liste, Social-Icons */
  .site-footer { padding-bottom: 40px; }
  .site-footer__logo img { height: 30px; }
  .site-footer__nav { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 6px; }
  .site-footer__nav a { font-size: 15px; padding: 7px 0; }
  .site-footer__nav .spacer { width: 0; height: 12px; }
  .site-footer__social { display: flex; }
  .site-footer__copy { font-size: 13px; line-height: 1.6; }

  /* Unterseiten */
  h1, h2, h3 { overflow-wrap: break-word; }
  .page-hero { padding-top: 16px; }
  .page-hero__title { font-size: clamp(34px, 10.5vw, 44px); }
  .page-hero__text { font-size: 15px; }
  .page-hero__actions { flex-direction: column; }
  .page-hero__actions .btn { width: 100%; }
  .card-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .info-card { padding: 24px 22px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 18px; }
  .stat__value { font-size: 28px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 22px; }
  .cta-simple { padding: 32px 22px; }
  .cta-simple__actions .btn { width: 100%; }
  .prose h2 { font-size: 22px; }
}

/* ---------- Sehr kleine Geräte (≤360px) ---------- */
@media (max-width: 360px) {
  .hero__mobile-visual .metric-card--performance-m { width: 160px; top: 60px; }
  .hero__mobile-visual .metric-card--revenue-m { width: 168px; bottom: 20px; }
  .creator__visual { grid-template-columns: 1fr; }
  .integration-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: 1fr; }
  .site-header__mobile .btn { padding: 0 12px; }
}