/* ============================================================
   LANDINGPAGES — The Cube 3.0
   Ergänzt styles.css für die SEO-Landingpages
   ============================================================ */

/* ---- Landing Hero ---- */
.lp-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  padding-top: 80px;
}
.lp-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.42) saturate(.85) contrast(1.05);
  z-index: 0;
}
.lp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,.95) 100%);
  z-index: 1;
}
.lp-hero__content {
  position: relative; z-index: 2;
  max-width: 880px;
  padding: 3rem 1.4rem;
}
.lp-hero__eyebrow {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 1.2rem;
}
.lp-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 0 0 1.4rem;
}
.lp-hero__title .accent { color: var(--accent); font-style: italic; }
.lp-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,.88);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 2.4rem;
  font-weight: 300;
}
.lp-hero__cta {
  display: flex; gap: .9rem;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-hero__cta .btn--primary { background: transparent; color: var(--accent); border-color: var(--accent); }
.lp-hero__cta .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--black); }

/* ---- Intro / Lead ---- */
.lp-intro { background: var(--bg); }
.lp-intro__lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  max-width: 860px;
}
.lp-prose { max-width: 760px; }
.lp-prose p {
  color: rgba(255,255,255,.72);
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 0 0 1.2rem;
}
.lp-prose strong { color: var(--accent-2); font-weight: 500; }

/* ---- Benefit-Cards ---- */
.lp-benefits { background: var(--bg-alt); }
.lp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .lp-benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-benefit-grid { grid-template-columns: 1fr; } }

/* CTA-Kachel im Benefit-Grid — identischer Look wie die Startseite (links-bündig, spannt 2 Spalten) */
.lp-benefit--cta {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(201,168,117,.18) 0%, rgba(201,168,117,.06) 100%) !important;
  border-top: 1px solid rgba(201,168,117,.3);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: .7rem;
  padding: 2.6rem 2.6rem;
}
.lp-benefit--cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.lp-benefit--cta::after {
  content: '';
  position: absolute;
  right: -60px; bottom: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,117,.18) 0%, rgba(201,168,117,0) 70%);
  pointer-events: none;
}
.lp-benefit--cta__eyebrow {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  line-height: 1;
}
.lp-benefit--cta h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 400; line-height: 1.15; color: var(--white);
  margin: .1rem 0 .3rem;
}
.lp-benefit--cta__desc {
  font-size: .92rem !important;
  color: rgba(255,255,255,.65) !important;
  margin: 0 0 1.2rem !important;
  max-width: 480px;
}
.lp-benefit--cta__actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  position: relative; z-index: 2;
}
.lp-benefit--cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.5rem;
  background: var(--accent);
  color: var(--black);
  border: 1px solid var(--accent);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.lp-benefit--cta__btn svg { width: 15px; height: 15px; transition: transform var(--t-fast); flex-shrink: 0; }
.lp-benefit--cta__btn:hover { background: var(--accent-2); border-color: var(--accent-2); opacity: 1; }
.lp-benefit--cta__btn:not(.lp-benefit--cta__btn--ghost):hover { transform: translateX(2px); }
.lp-benefit--cta__btn:not(.lp-benefit--cta__btn--ghost):hover svg { transform: translateX(3px); }
.lp-benefit--cta__btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.lp-benefit--cta__btn--ghost:hover { background: var(--accent); color: var(--black); }

/* Responsive CTA: muss NACH der span-2-Basis stehen, damit es greift.
   Bei 2 Spalten spannt die 7. Box (vor der CTA) volle Breite → keine Lücke. */
@media (max-width: 900px) {
  .lp-benefit-grid > .lp-benefit:nth-last-child(2) { grid-column: 1 / -1; }
  .lp-benefit--cta { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .lp-benefit-grid > .lp-benefit { grid-column: auto; }
  .lp-benefit--cta { grid-column: 1 / -1; }
}

/* ============================================================
   FOTO-SLIDER (Karussell) + Lightbox
   ============================================================ */
.lp-carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.lp-carousel__viewport {
  overflow: hidden;
}
.lp-carousel__track {
  display: flex;
  gap: 8px;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
/* Desktop: 4 Bilder nebeneinander */
.lp-carousel__slide {
  flex: 0 0 calc((100% - 24px) / 4);
  aspect-ratio: 1 / 1;
  background: var(--bg-deep);
}
.lp-carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.lp-carousel__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201,168,117,.4);
  color: var(--accent);
  font-size: 1.8rem; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  z-index: 3;
}
.lp-carousel__arrow:hover { background: var(--accent); color: var(--black); }
.lp-carousel__arrow--prev { left: .8rem; }
.lp-carousel__arrow--next { right: .8rem; }
.lp-carousel__dots {
  display: flex; gap: .5rem; justify-content: center;
  margin-top: 1.2rem;
}
.lp-carousel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: 0; cursor: pointer; padding: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lp-carousel__dot.is-active { background: var(--accent); transform: scale(1.3); }

/* Tablet: 2 Bilder nebeneinander */
@media (max-width: 900px) {
  .lp-carousel__slide { flex-basis: calc((100% - 8px) / 2); }
}
/* Mobile: 1 Bild */
@media (max-width: 600px) {
  .lp-carousel__arrow { width: 40px; height: 40px; font-size: 1.5rem; }
  .lp-carousel__slide { flex-basis: 100%; aspect-ratio: 4 / 3; }
}

/* Lightbox */
.lp-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med);
}
.lp-lightbox.is-open { opacity: 1; pointer-events: auto; }
.lp-lightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.lp-lightbox__close,
.lp-lightbox__nav {
  position: absolute;
  color: rgba(255,255,255,.85);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 2.2rem; line-height: 1;
  background: none; border: 0; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lp-lightbox__close { top: 1rem; right: 1rem; font-size: 2rem; }
.lp-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lp-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lp-lightbox__close:hover,
.lp-lightbox__nav:hover { background: rgba(255,255,255,.1); color: #fff; }
.lp-benefit {
  background: var(--bg-alt);
  padding: 2.2rem 1.8rem;
  display: flex; flex-direction: column; gap: .8rem;
  transition: background var(--t-med);
}
.lp-benefit:hover { background: var(--bg-deep); }
.lp-benefit__icon { width: 40px; height: 40px; color: var(--accent); }
.lp-benefit__icon svg { width: 100%; height: 100%; }
.lp-benefit h3 { font-size: 1.3rem; font-weight: 500; color: var(--white); }
.lp-benefit p { font-size: .94rem; color: var(--muted); line-height: 1.7; margin: 0; }

/* ---- Foto-Strip ---- */
.lp-strip { background: var(--bg-deep); padding-top: 0; }
.lp-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.lp-strip__grid img {
  width: 100%; height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .lp-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Fakten-Leiste ---- */
.lp-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-strong);
}
.lp-facts > div { display: flex; flex-direction: column; gap: .2rem; }
.lp-facts strong {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--accent);
}
.lp-facts span {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 560px) { .lp-facts { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; } }

/* ---- CTA-Band ---- */
.lp-cta-band {
  background: linear-gradient(135deg, rgba(201,168,117,.14) 0%, rgba(201,168,117,.04) 100%);
  border-top: 1px solid rgba(201,168,117,.25);
  border-bottom: 1px solid rgba(201,168,117,.25);
  text-align: center;
}
.lp-cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 400;
  color: var(--white);
  margin: 0 0 1rem;
}
.lp-cta-band p {
  color: rgba(255,255,255,.75);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto 2rem;
}
.lp-cta-band__row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.lp-cta-band .btn--primary { background: var(--accent); color: var(--black); border-color: var(--accent); }
.lp-cta-band .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--black); }

/* ---- Crosslinks zu anderen Landingpages ---- */
.lp-crosslinks { background: var(--bg); }
.lp-crosslink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2.4rem;
}
.lp-crosslink {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.15rem;
  transition: all var(--t-fast);
}
.lp-crosslink:hover { border-color: var(--accent); background: rgba(201,168,117,.1); color: var(--accent); opacity: 1; }
.lp-crosslink svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ---- Breadcrumb ---- */
.lp-breadcrumb {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.lp-breadcrumb a { color: var(--accent); }
.lp-breadcrumb span { margin: 0 .5rem; opacity: .5; }

/* ============================================================
   Inhalts-<section> innerhalb des Landingpage-Artikels:
   Die globale section-Padding (clamp(4rem, 9vw, 7rem) 0) wird
   neutralisiert — H2-margin-top steuert hier die Abstände.
   ============================================================ */
.lp-article section { padding: 0; }

/* ============================================================
   STICKY TOC-SIDEBAR für Landingpages (Desktop ≥ 1024px)
   Greift überall, wo <div class="lp-article__layout"> vorhanden ist.
   ============================================================ */
.lp-article__layout { display: block; }

@media (min-width: 1024px) {
  /* Breitere Inhaltsbreite, wenn Sidebar aktiv */
  .lp-article .lp-article__inner:has(.lp-article__layout) { max-width: 1180px; }
  .lp-article__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
  }
  .lp-toc-sidebar {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Dezente Scrollbar */
  .lp-toc-sidebar::-webkit-scrollbar { width: 4px; }
  .lp-toc-sidebar::-webkit-scrollbar-track { background: transparent; }
  .lp-toc-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
  .lp-toc-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(201,168,117,.4); }
  .lp-toc-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
  /* TOC im Sidebar-Mode: kompakter, ohne Außenabstände */
  .lp-toc-sidebar nav[aria-label="Inhaltsverzeichnis"] { margin: 0; padding: 22px 22px; }
  .lp-toc-sidebar nav[aria-label="Inhaltsverzeichnis"] ol li { margin-bottom: .55em; line-height: 1.45; }
  /* Erstes Element im Main-Bereich ohne extra Top-Abstand */
  .lp-article__main > time,
  .lp-article__main > nav,
  .lp-article__main > p:first-child { margin-top: 0; }
}

/* Active-State (Scroll-Spy) — multi-property für Robustheit */
.lp-article nav[aria-label="Inhaltsverzeichnis"] ol li {
  position: relative;
  transition: padding-left .2s, background .2s;
}
.lp-article nav[aria-label="Inhaltsverzeichnis"] ol li a {
  display: inline-block;
  padding: 4px 8px 4px 10px;
  border-radius: 2px;
  transition: color .2s, background .2s, font-weight .2s;
}
.lp-article nav[aria-label="Inhaltsverzeichnis"] ol li a.is-active {
  color: #c9a875 !important;
  background: rgba(201, 168, 117, 0.10);
  font-weight: 500;
  box-shadow: inset 3px 0 0 #c9a875;
}

/* ============================================================
   MOBILE — Vergleichstabellen als Card-Stack
   Greift für .cmp-table (airbnb), .cube-compare-table (monteur),
   .vergleich-table (wohnen-auf-zeit) und .pv-table (pension).
   Statt horizontalem Scroll: jede Zeile wird zur Karte.
   ============================================================ */
@media (max-width: 600px) {
  /* Wrapper darf wieder normal fließen */
  .cmp-table-wrap,
  .cube-compare-wrap,
  .pv-table-wrap,
  .vergleich-wrapper > div[style*="overflow"] {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Header verstecken — die Spaltennamen kommen via ::before in den Cells */
  .cmp-table thead,
  .cube-compare-table thead,
  .vergleich-table thead,
  .pv-table thead { display: none; }

  /* Tabelle/Body/Row/Cell → Block-Layout */
  .cmp-table,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table td,
  .cube-compare-table,
  .cube-compare-table tbody,
  .cube-compare-table tr,
  .cube-compare-table td,
  .vergleich-table,
  .vergleich-table tbody,
  .vergleich-table tr,
  .vergleich-table td,
  .pv-table,
  .pv-table tbody,
  .pv-table tr,
  .pv-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Jede Zeile wird zur eigenständigen Karte */
  .cmp-table tr,
  .cube-compare-table tr,
  .vergleich-table tr,
  .pv-table tr {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 4px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }
  .cmp-table tr:hover td,
  .cube-compare-table tr:hover td,
  .vergleich-table tr:hover td,
  .pv-table tr:hover td { background: transparent !important; }

  /* Einzelne Cells: kein Rand, schmales padding, links-bündig */
  .cmp-table td,
  .cube-compare-table td,
  .vergleich-table td,
  .pv-table td {
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: top !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  /* ERSTE td (Kriterium): Card-Header in Gold */
  .cmp-table td:first-child,
  .cube-compare-table td:first-child,
  .vergleich-table td:first-child,
  .pv-table td:first-child,
  .pv-table td.pv-label-col {
    color: #c9a875 !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding-bottom: 10px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    white-space: normal !important;
  }
  /* cmp-label-Span im ersten td: Stil erben (sonst doppelt uppercase/farbe) */
  .cmp-table td:first-child .cmp-label {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
  }

  /* ---------- Pseudo-Labels: cmp-table (airbnb) ---------- */
  .cmp-table td.cmp-highlight::before {
    content: "Direkt buchen · The Cube 3.0";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(201, 168, 117, .85);
    margin-bottom: 3px;
  }
  .cmp-table td:not(.cmp-highlight):not(:first-child)::before {
    content: "Über Airbnb-Plattform";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .42);
    margin-bottom: 3px;
  }

  /* ---------- Pseudo-Labels: cube-compare-table (monteur) ---------- */
  .cube-compare-table td.col-highlight::before {
    content: "The Cube 3.0";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(201, 168, 117, .85);
    margin-bottom: 3px;
  }
  .cube-compare-table td.col-negative::before {
    content: "Typisches Monteurzimmer";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .42);
    margin-bottom: 3px;
  }

  /* ---------- Pseudo-Labels: vergleich-table (wohnen-auf-zeit) ---------- */
  /* 4 Spalten: Kriterium | The Cube 3.0 (col-highlight) | Monteurzimmer | Hotel Hagen */
  .vergleich-table td.col-highlight::before {
    content: "The Cube 3.0";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(201, 168, 117, .85);
    margin-bottom: 3px;
  }
  .vergleich-table td:nth-child(3):not(.col-highlight)::before {
    content: "Monteurzimmer";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .42);
    margin-bottom: 3px;
  }
  .vergleich-table td:nth-child(4):not(.col-highlight)::before {
    content: "Hotel Hagen";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .42);
    margin-bottom: 3px;
  }

  /* ---------- Pseudo-Labels: pv-table (pension) ---------- */
  /* 3 Spalten: Kriterium | Klassische Pension | The Cube 3.0 (pv-col-highlight) */
  .pv-table td.pv-col-highlight::before {
    content: "The Cube 3.0 Apartment";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(201, 168, 117, .85);
    margin-bottom: 3px;
  }
  .pv-table td:nth-child(2):not(.pv-col-highlight)::before {
    content: "Klassische Pension Hagen";
    display: block;
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .42);
    margin-bottom: 3px;
  }

  /* Cube-Cells (Highlight) visuell hervorheben — subtiler gold-Streifen */
  .cmp-table td.cmp-highlight,
  .cube-compare-table td.col-highlight,
  .vergleich-table td.col-highlight,
  .pv-table td.pv-col-highlight {
    background: rgba(201, 168, 117, .06) !important;
    border-left: 2px solid #c9a875 !important;
    border-right: none !important;
    border-radius: 2px;
    padding: 8px 10px !important;
    margin-top: 6px !important;
  }
  .cmp-table td:not(.cmp-highlight):not(:first-child),
  .cube-compare-table td.col-negative,
  .vergleich-table td:nth-child(3):not(.col-highlight),
  .vergleich-table td:nth-child(4):not(.col-highlight),
  .pv-table td:nth-child(2):not(.pv-col-highlight) {
    margin-top: 4px !important;
    padding: 6px 0 !important;
  }

  /* pv-table: tr:last-child border-bottom Reset (Original setzt 2px gold border) */
  .pv-table tr:last-child td.pv-col-highlight { border-bottom: none !important; }
  /* pv-table pv-label-col white-space normal (war nowrap) */
  .pv-table .pv-label-col { white-space: normal !important; }

  /* Outer Wrapper (interactive-element > div) padding reduzieren */
  .interactive-element > div {
    padding: 1.1rem !important;
    overflow-x: visible !important;
  }
  /* Titel + Untertitel-Margin kompakter */
  .cmp-title, .cube-compare-title, .vergleich-wrapper h3 { margin-bottom: 18px !important; }
  .cube-compare-sub, .vergleich-sub { margin-bottom: 18px !important; }
}

/* ============================================================
   AUTO-HEIGHT für alle Bilder im Landingpage-Artikel
   Verhindert Verzerrung wenn das HTML-Attribut height anders als
   die natürliche Bildhöhe ist (z. B. nach EXIF-Auto-Rotation).
   ============================================================ */
.lp-article img,
.lp-article figure img,
.lp-strip img,
.lp-carousel img {
  height: auto;
}