/* 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;  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 {  margin-bottom: 32px; }
.vj-abo .vj-abo-h3 { margin-bottom: 8px; }

.vj-abo .vj-abo-big { color: var(--vj-blue);; margin-bottom: 8px; font-size: var(--vj-font-size-big); line-height: var(--vj-line-height-big); }

/* ---- Buttons & Links ---- */
.vj-abo .vj-abo-link { color: var(--vj-blue);; border-bottom: 1px solid var(--vj-blue);; }
.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; }
.vj-abo-btn--outline { background: transparent; color: var(--vj-blue);; border: 1px solid var(--vj-blue);; }
.vj-abo-btn--outline:hover { background: var(--vj-blue);; color: #fff; }

/* ---- 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 { text-transform: uppercase; color: #1f83b5; }
.vj-abo .vj-abo-h1 {  margin-bottom: 20px; text-wrap: pretty; }
.vj-abo .vj-abo-lead { 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-old { font-weight: 400; color: #74878b; text-decoration: line-through; font-size: var(--vj-font-size-big); line-height: var(--vj-line-height-big); }
.vj-abo .vj-abo-price-note { color: #74878b; margin-top: 6px; font-size: var(--vj-font-size-small); line-height: var(--vj-line-height-small); }
.vj-abo .vj-abo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 26px; }
.vj-abo-price-main { font-size: var(--vj-font-size-big); line-height: var(--vj-line-height-big); }
.vj-abo .vj-abo-usps { display: flex; flex-wrap: wrap; gap: 4px 26px;  color: #74878b; font-size: var(--vj-font-size-small); line-height: var(--vj-line-height-small); }
.vj-abo-trial { font-size: var(--vj-font-size-small); line-height: var(--vj-line-height-small); }
/* ---- 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: var(--vj-border-radius); background: #fff; }
.vj-abo .vj-abo-plan--featured { border: 2px solid var(--vj-blue);; background: #eef8fc; }
.vj-abo .vj-abo-badge { position: absolute; top: 0; left: 0; z-index: 1; padding: 2px 12px; border-bottom-right-radius: var(--vj-border-radius); background: var(--vj-blue);; color: #fff; 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 { margin-bottom: 10px; }
.vj-abo .vj-abo-plan-price { color: #1f83b5; font-size: var(--vj-font-size-big); line-height: var(--vj-line-height-big); }
.vj-abo .vj-abo-plan-note { color: #74878b; margin: 6px 0 18px; font-size: var(--vj-font-size-small); line-height: var(--vj-line-height-small); }
.vj-abo .vj-abo-plan-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }


/* ---- 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 + p { margin-top: 8px; }
.vj-abo .vj-abo-others .vj-abo-plan-price { margin-bottom: 12px; font-size: var(--vj-font-size-big); line-height: var(--vj-line-height-big); }

/* ---- Warum Velojournal ---- */
.vj-abo .vj-abo-why { margin-top: 70px; padding: 60px; background: var(--vj-blue);; color: #fff; border-radius: var(--vj-border-radius); }
.vj-abo .vj-abo-why .vj-abo-h2 { margin-bottom: 16px; }
.vj-abo .vj-abo-why-lead { 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 { 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); }


/* ---- 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: var(--vj-border-radius); background: #ddf0fa; }
.vj-abo .vj-abo-cta-title {  text-wrap: pretty; }

/* ---- Tablet / Inhaltsspalte mit Sidebar ---- */
@media screen and (max-width: 1024px) {
  .vj-abo .vj-abo-hero { gap: 40px; }
  .vj-abo .vj-abo-hero-img { flex-basis: 280px; width: 280px; height: 340px; }
  .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-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; }
}

/* ---- Mobil (Entwurf A Mobil) ---- */
@media screen and (max-width: 768px) {
  .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 { margin-bottom: 16px; }
  .vj-abo .vj-abo-h3 { margin: 4px 0 6px; }
  .vj-abo .vj-abo-big {  margin-bottom: 0; }

  /* Hero: Bild zwischen Einleitung und Preis */
  .vj-abo .vj-abo-hero-text { display: contents; }
  .vj-abo .vj-abo-eyebrow { order: 1;   }
  .vj-abo .vj-abo-h1 { order: 2; margin: 4px 0 12px; }
  .vj-abo .vj-abo-lead { order: 3;  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-note {  margin-top: 4px; }
  .vj-abo .vj-abo-hero-actions { order: 6; display: block; margin-bottom: 14px; }

  .vj-abo .vj-abo-trial { display: none; }
  .vj-abo .vj-abo-usps { order: 7; gap: 0 10px;  }

  /* 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 {  margin: 2px 0 6px; }
  .vj-abo .vj-abo-plan-note { margin: 4px 0 14px; }

  .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 { 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-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 { margin-bottom: 18px; }
}