/* Velojournal Abo-Übersicht (Entwurf A) – geladen von tnt_shop Cart/ListProducts (AboOverview) */

/* Volle Breite: Entwurf A hat keine Sidebar. Blendet auf Seiten mit diesem Element die
   Sidebar aus und zieht die Inhaltsspalte über die ganze Breite.
   Diesen Block entfernen, wenn die Sidebar (Werbung, Meistgelesen) bleiben soll. */
.mainGrid > .row > .leftbar:has(.vj-abo) { flex: 0 0 100%; max-width: 100%; }
.mainGrid:has(.vj-abo) .sidebar { display: none; }

/* ---- Grundgerüst ---- */
.vj-abo { container-type: inline-size; display: flex; flex-direction: column; margin: 30px 0 70px; font-family: "jaf-domus", sans-serif; color: #333; }
.vj-abo *, .vj-abo *::before, .vj-abo *::after { box-sizing: border-box; }
.vj-abo h1, .vj-abo h2, .vj-abo h3, .vj-abo p, .vj-abo ul, .vj-abo li, .vj-abo dl, .vj-abo dt, .vj-abo dd { margin: 0; padding: 0; letter-spacing: 0; color: inherit; }
.vj-abo ul { list-style: none; }
.vj-abo img { display: block; max-width: 100%; }
.vj-abo a { text-decoration: none; }

.vj-abo .vj-abo-section { margin-top: 70px; }
.vj-abo .vj-abo-h2 { font: 700 34px/38px "jaf-domus", sans-serif; margin-bottom: 32px; }
.vj-abo .vj-abo-h3 { font: 700 22px/26px "jaf-domus", sans-serif; margin-bottom: 8px; }
.vj-abo .vj-abo-text { font: 17px/24px "jaf-domus", sans-serif; }
.vj-abo .vj-abo-big { font: 700 44px/48px "jaf-domus", sans-serif; color: #44ade2; margin-bottom: 8px; }

/* ---- Buttons & Links ---- */
.vj-abo .vj-abo-btn { display: inline-block; min-width: 220px; padding: .9rem .75rem; border: 1px solid #44ade2; border-radius: 8px; background: #44ade2; color: #f6f9fb; font: 700 14px/17px "jaf-domus", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; transition: .5s ease all; }
.vj-abo .vj-abo-btn:hover, .vj-abo .vj-abo-btn:focus { background: #1f83b5; border-color: #1f83b5; color: #f6f9fb; }
.vj-abo .vj-abo-btn--outline { background: transparent; color: #1f83b5; }
.vj-abo .vj-abo-btn--outline:hover, .vj-abo .vj-abo-btn--outline:focus { color: #fff; }
.vj-abo .vj-abo-btn--block { display: block; min-width: 0; padding: .8rem .75rem; }
.vj-abo .vj-abo-link { font: 17px/23px "jaf-domus", sans-serif; color: #44ade2; border-bottom: 1px solid #44ade2; }
.vj-abo .vj-abo-link:hover { color: #1f83b5; border-color: #1f83b5; }
/* Eingeloggt mit laufendem Abo: Bestellen nicht möglich */
.vj-abo .vj-abo-btn[disabled], .vj-abo .vj-abo-link[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.vj-abo button.vj-abo-link { padding: 0; border-width: 0 0 1px; background: none; }

/* ---- Hero ---- */
.vj-abo .vj-abo-hero { display: flex; align-items: center; gap: 60px; }
.vj-abo .vj-abo-hero-text { flex: 1; min-width: 0; }
.vj-abo .vj-abo-eyebrow { font: 700 14px/17px "jaf-domus", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #1f83b5; margin-bottom: 14px; }
.vj-abo .vj-abo-h1 { font: 700 60px/62px "jaf-domus", sans-serif; margin-bottom: 20px; text-wrap: pretty; }
.vj-abo .vj-abo-lead { font: 22px/30px "jaf-domus", sans-serif; margin-bottom: 28px; text-wrap: pretty; }
.vj-abo .vj-abo-hero-img { flex: 0 0 420px; width: 420px; height: 380px; object-fit: cover; }
.vj-abo .vj-abo-price { border-top: 1px solid rgba(112,112,112,.4); border-bottom: 1px solid rgba(112,112,112,.4); padding: 20px 0; margin-bottom: 28px; }
.vj-abo .vj-abo-price-main { font: 700 34px/38px "jaf-domus", sans-serif; }
.vj-abo .vj-abo-price-old { font-weight: 400; color: #74878b; text-decoration: line-through; }
.vj-abo .vj-abo-price-note { font: 17px/23px "jaf-domus", sans-serif; color: #74878b; margin-top: 6px; }
.vj-abo .vj-abo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 26px; }
.vj-abo .vj-abo-trial { font: 17px/23px "jaf-domus", sans-serif; }
.vj-abo .vj-abo-usps { display: flex; flex-wrap: wrap; gap: 4px 26px; font: 16px/20px "jaf-domus", sans-serif; color: #74878b; }

/* ---- Was im Abo steckt ---- */
.vj-abo .vj-abo-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

/* ---- Abo-Karten ---- */
.vj-abo .vj-abo-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.vj-abo .vj-abo-plan { position: relative; overflow: hidden; border: 1px solid rgba(112,112,112,.4); border-radius: 12px; background: #fff; }
.vj-abo .vj-abo-plan--featured { border: 2px solid #44ade2; background: #eef8fc; }
.vj-abo .vj-abo-badge { position: absolute; top: 0; left: 0; z-index: 1; padding: 2px 12px; border-bottom-right-radius: 12px; background: #44ade2; color: #fff; font: 700 11px/22px "jaf-domus", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.vj-abo .vj-abo-plan-img { width: 100%; height: 180px; object-fit: cover; }
.vj-abo .vj-abo-plan-body { padding: 24px; }
.vj-abo .vj-abo-plan-title { font: 700 25px/28px "jaf-domus", sans-serif; margin-bottom: 10px; }
.vj-abo .vj-abo-plan-price { font: 700 36px/40px "jaf-domus", sans-serif; color: #1f83b5; }
.vj-abo .vj-abo-plan-note { font: 15px/20px "jaf-domus", sans-serif; color: #74878b; margin: 6px 0 18px; }
.vj-abo .vj-abo-plan-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.vj-abo .vj-abo-plan-list li { font: 17px/23px "jaf-domus", sans-serif; }

/* ---- Weitere Angebote (übrige Shop-Produkte) ---- */
.vj-abo .vj-abo-others-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: start; }
.vj-abo .vj-abo-plan-desc { margin-bottom: 22px; }
.vj-abo .vj-abo-plan-desc p, .vj-abo .vj-abo-plan-desc li { font: 15px/21px "jaf-domus", sans-serif; }
.vj-abo .vj-abo-plan-desc p + p { margin-top: 8px; }
.vj-abo .vj-abo-others .vj-abo-plan-price { margin-bottom: 12px; }

/* ---- Warum Velojournal ---- */
.vj-abo .vj-abo-why { margin-top: 70px; padding: 60px; background: #44ade2; color: #fff; }
.vj-abo .vj-abo-why .vj-abo-h2 { margin-bottom: 16px; }
.vj-abo .vj-abo-why-lead { font: 22px/30px "jaf-domus", sans-serif; max-width: 820px; margin-bottom: 40px; text-wrap: pretty; }
.vj-abo .vj-abo-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 44px; }
.vj-abo .vj-abo-why .vj-abo-big { color: #fff; margin-bottom: 0; }
.vj-abo .vj-abo-why .vj-abo-h3 { margin: 8px 0; }
.vj-abo .vj-abo-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.5); }
.vj-abo .vj-abo-quote { font: 25px/32px "jaf-domus", sans-serif; text-wrap: pretty; }

/* ---- FAQ ---- */
.vj-abo .vj-abo-faq .vj-abo-h2 { margin-bottom: 28px; }
.vj-abo .vj-abo-faq-list { border-top: 1px solid rgba(112,112,112,.4); }
.vj-abo .vj-abo-faq-item { display: grid; grid-template-columns: 340px 1fr; gap: 40px; padding: 18px 0; border-bottom: 1px solid rgba(112,112,112,.4); }
.vj-abo .vj-abo-faq-item dt { font: 700 18px/25px "jaf-domus", sans-serif; }
.vj-abo .vj-abo-faq-item dd { font: 18px/25px "jaf-domus", sans-serif; }

/* ---- Abschluss ---- */
.vj-abo .vj-abo-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 70px; padding: 36px 40px; border-radius: 12px; background: #ddf0fa; }
.vj-abo .vj-abo-cta-title { font: 700 34px/40px "jaf-domus", sans-serif; text-wrap: pretty; }

/* ---- Tablet / Inhaltsspalte mit Sidebar ---- */
@container (max-width: 899px) {
  .vj-abo .vj-abo-hero { gap: 40px; }
  .vj-abo .vj-abo-hero-img { flex-basis: 280px; width: 280px; height: 340px; }
  .vj-abo .vj-abo-h1 { font-size: 44px; line-height: 48px; }
  .vj-abo .vj-abo-lead { font-size: 19px; line-height: 27px; }
  .vj-abo .vj-abo-features-grid { grid-template-columns: repeat(2, 1fr); }
  .vj-abo .vj-abo-plans-grid, .vj-abo .vj-abo-others-grid { gap: 16px; }
  .vj-abo .vj-abo-plan-img { height: 140px; }
  .vj-abo .vj-abo-plan-body { padding: 18px; }
  .vj-abo .vj-abo-plan-title { font-size: 21px; line-height: 25px; }
  .vj-abo .vj-abo-plan-price { font-size: 30px; line-height: 34px; }
  .vj-abo .vj-abo-plan-list li { font-size: 15px; line-height: 20px; }
  .vj-abo .vj-abo-why { padding: 40px; }
  .vj-abo .vj-abo-why-grid, .vj-abo .vj-abo-quotes { grid-template-columns: 1fr; gap: 24px; }
  .vj-abo .vj-abo-faq-item { grid-template-columns: 40% 1fr; gap: 24px; }
  .vj-abo .vj-abo-cta-title { font-size: 28px; line-height: 34px; }
}

/* ---- Mobil (Entwurf A Mobil) ---- */
@container (max-width: 640px) {
  .vj-abo .vj-abo-hero { order: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .vj-abo .vj-abo-plans { order: 2; }
  .vj-abo .vj-abo-others { order: 3; }
  .vj-abo .vj-abo-features { order: 4; }
  .vj-abo .vj-abo-why { order: 5; }
  .vj-abo .vj-abo-faq { order: 6; }
  .vj-abo .vj-abo-cta { order: 7; }

  .vj-abo .vj-abo-section, .vj-abo .vj-abo-why, .vj-abo .vj-abo-cta { margin-top: 28px; }
  .vj-abo .vj-abo-h2 { font-size: 25px; line-height: 28px; margin-bottom: 16px; }
  .vj-abo .vj-abo-h3 { font-size: 21px; line-height: 25px; margin: 4px 0 6px; }
  .vj-abo .vj-abo-big { font-size: 34px; line-height: 38px; margin-bottom: 0; }

  /* Hero: Bild zwischen Einleitung und Preis */
  .vj-abo .vj-abo-hero-text { display: contents; }
  .vj-abo .vj-abo-eyebrow { order: 1; font-size: 11px; line-height: 22px; margin-bottom: 0; }
  .vj-abo .vj-abo-h1 { order: 2; font-size: 32px; line-height: 34px; margin: 4px 0 12px; }
  .vj-abo .vj-abo-lead { order: 3; font-size: 17px; line-height: 23px; margin-bottom: 18px; }
  .vj-abo .vj-abo-hero-img { order: 4; flex: none; width: 100%; height: 180px; margin-bottom: 18px; }
  .vj-abo .vj-abo-price { order: 5; padding: 14px 0; margin-bottom: 18px; }
  .vj-abo .vj-abo-price-main { font-size: 25px; line-height: 28px; }
  .vj-abo .vj-abo-price-note { font-size: 15px; line-height: 20px; margin-top: 4px; }
  .vj-abo .vj-abo-hero-actions { order: 6; display: block; margin-bottom: 14px; }
  .vj-abo .vj-abo-hero-actions .vj-abo-btn { display: block; min-width: 0; }
  .vj-abo .vj-abo-trial { display: none; }
  .vj-abo .vj-abo-usps { order: 7; gap: 0 10px; font-size: 15px; line-height: 20px; }

  /* Karten ohne Bild und Liste */
  .vj-abo .vj-abo-plans-grid, .vj-abo .vj-abo-others-grid { grid-template-columns: 1fr; gap: 16px; }
  .vj-abo .vj-abo-plan-img, .vj-abo .vj-abo-plan-list { display: none; }
  .vj-abo .vj-abo-badge { position: static; display: block; padding: 18px 18px 0; border-radius: 0; background: none; color: #1f83b5; }
  .vj-abo .vj-abo-plan--featured .vj-abo-plan-body { padding-top: 0; }
  .vj-abo .vj-abo-plan-title { font-size: 21px; line-height: 25px; margin: 2px 0 6px; }
  .vj-abo .vj-abo-plan-price { font-size: 28px; line-height: 32px; }
  .vj-abo .vj-abo-plan-note { margin: 4px 0 14px; }
  .vj-abo .vj-abo-btn--block { padding: .7rem; }

  .vj-abo .vj-abo-features-grid { grid-template-columns: 1fr; gap: 20px; }

  .vj-abo .vj-abo-why { padding: 28px 20px; }
  .vj-abo .vj-abo-why .vj-abo-h2 { margin-bottom: 12px; }
  .vj-abo .vj-abo-why-lead { font-size: 18px; line-height: 25px; margin-bottom: 26px; }
  .vj-abo .vj-abo-why-grid { gap: 22px; margin-bottom: 26px; }
  .vj-abo .vj-abo-why .vj-abo-h3 { margin: 4px 0 6px; }
  .vj-abo .vj-abo-quotes { gap: 18px; padding-top: 22px; }
  .vj-abo .vj-abo-quote { font-size: 21px; line-height: 28px; }

  .vj-abo .vj-abo-faq .vj-abo-h2 { margin-bottom: 6px; }
  .vj-abo .vj-abo-faq-list { border-top: 0; }
  .vj-abo .vj-abo-faq-item { display: block; padding: 16px 0; border-top: 1px solid rgba(112,112,112,.4); border-bottom: 0; }
  .vj-abo .vj-abo-faq-item:last-child { border-bottom: 1px solid rgba(112,112,112,.4); }
  .vj-abo .vj-abo-faq-item dt { margin-bottom: 4px; }

  .vj-abo .vj-abo-cta { display: block; padding: 24px; }
  .vj-abo .vj-abo-cta-title { font-size: 25px; line-height: 30px; margin-bottom: 18px; }
  .vj-abo .vj-abo-cta .vj-abo-btn { display: block; min-width: 0; }
}