/* =========================================================
   /de/video + /ru/video-ru — Video hub redesign
   Scoped under .video-page so other pages stay untouched.
   Reuses tokens from design-system.css (:root --pa-*).
   Loads alongside preise-anthracite.css for shared section
   primitives (.trust-strip, .warum-kunden-*, .faq-accordion-*,
   .text-accent, .intro-lead, .intro-note). Note: pa-section
   background variants are calc-scoped in preise-anthracite,
   so we re-declare them here under .video-page.
   ========================================================= */

/* ── 0. Override legacy .video-card pseudo-elements ─────────
   style.min.css defines .video-card::before (dark gradient over
   whole card) and .video-card::after (gray play circle centered
   on the whole card incl. body). On our new markup those leak
   onto the body text. Kill them; we render our own play overlay
   inside the thumbnail container only.                        */
.video-page .video-card,
.video-page .video-card:hover,
.video-page .video-card:focus {
  overflow:   visible;
  max-width:  none;
  margin:     0;
}
.video-page .video-card::before,
.video-page .video-card::after { content: none !important; }
.video-page .video-card img { box-shadow: none; border-radius: 0; }
.video-page .video-card span.video-play { all: unset; }

/* ── 1. Page scope guard ─────────────────────────────────── */
.video-page { color: var(--pa-text, #1f2937); }

/* Suppress the global .page-title bottom border in hero */
.video-page .page-title {
  border-bottom: none;
  padding:       44px 0 28px;
  text-align:    left;
}

/* ── 2. Hero — overline + H1 + intro (preise rhythm) ─────── */
.video-page .video-overline {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--pa-accent, #c9a666);
  margin:         0 0 14px;
  line-height:    1;
}

.video-page h1 {
  width:          100%;
  max-width:      760px;
  font-size:      40px;
  line-height:    1.15;
  font-weight:    800;
  color:          var(--pa-text, #1f2937);
  margin:         0 0 22px;
  padding:        0;
  letter-spacing: -0.02em;
  text-align:     left;
}

.video-page h1 .text-accent { color: var(--pa-accent, #c9a666); }

.video-page .intro-lead,
.video-page .video-intro {
  font-size:  17px;
  line-height: 1.75;
  color:      var(--pa-text, #1f2937);
  max-width:  760px;
  margin:     0 0 14px;
  padding:    0;
}

.video-page .intro-note {
  font-size:  13px;
  line-height: 1.6;
  color:      var(--pa-text-muted, #6b7280);
  max-width:  640px;
  margin:     0 0 22px;
  padding:    0;
  opacity:    0.85;
}

/* ── 3. pa-section: base + background variants ──────────────
   preise-anthracite.css gates these on html:has(.calculator-layout).
   Re-declare under .video-page so video gets the section rhythm.
   Body background blends with pa-section-soft so the page reads
   as alternating bands.                                       */
.video-page { background: var(--pa-bg-alt, #f9f8f6); }

.video-page .pa-section {
  width:        100%;
  box-sizing:   border-box;
  padding:      48px 0;
  border-top:   1px solid var(--pa-border, #e5e7eb);
}
.video-page .pa-section-white       { background: #ffffff; }
.video-page .pa-section-soft        { background: var(--pa-bg-alt, #f9f8f6); }
.video-page .pa-section-accent-soft { background: #fbf7ef; }

@media (max-width: 767px) { .video-page .pa-section { padding: 32px 0; } }
@media (max-width: 480px) { .video-page .pa-section { padding: 24px 0; } }

/* Hero content wrapper sits in a content-section, no top border */
.video-page > .content-section:first-of-type,
.video-page main > .content-section:first-of-type { background: transparent; }

/* ── 4. Trust-strip — match preise visual; gold icons ────── */
.video-page .trust-strip .fa { color: var(--pa-accent, #c9a666); }

/* ── 5. Section headings (H2) — preise component sizing ──── */
.video-page .video-section-heading {
  font-size:      26px;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -0.01em;
  color:          var(--pa-primary, #1f2937);
  margin:         0 0 24px;
  text-align:     center;
}

.video-page .video-section-eyebrow {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--pa-accent, #c9a666);
  text-align:     center;
  margin:         0 0 10px;
}

.video-page .video-section-intro {
  font-size:   15.5px;
  line-height: 1.7;
  color:       var(--pa-text, #1f2937);
  max-width:   720px;
  margin:      0 auto 28px;
  text-align:  center;
}

/* ── 6. Video grid (3 cards) ─────────────────────────────── */
.video-page .video-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   24px;
  margin:                0;
  padding:               0;
  list-style:            none;
}
@media (max-width: 991px) {
  .video-page .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
  .video-page .video-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── 7. Video card ───────────────────────────────────────── */
.video-page .video-card {
  display:        flex;
  flex-direction: column;
  background:     #ffffff;
  border:         1px solid var(--pa-border, #e5e7eb);
  border-radius:  var(--pa-radius-card, 8px);
  box-shadow:     var(--pa-shadow-card, 0 1px 6px rgba(0,0,0,.07));
  overflow:       hidden;
  transition:     box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  position:       relative;
}

.video-page .video-card:hover,
.video-page .video-card:focus-within {
  border-color: var(--pa-accent, #c9a666);
  box-shadow:   0 6px 18px rgba(0,0,0,.10);
  transform:    translateY(-2px);
}

/* Thumbnail wrapper: own stacking context so overlay stays inside */
.video-page .video-card__thumb {
  position:        relative;
  display:         block;
  width:           100%;
  aspect-ratio:    16 / 9;
  background:      #0e141d;
  overflow:        hidden;
  cursor:          pointer;
  text-decoration: none;
  border:          0;
  padding:         0;
  line-height:     0;
  isolation:       isolate;
}

.video-page .video-card__thumb img {
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform .35s ease;
}

.video-page .video-card__thumb:hover img,
.video-page .video-card__thumb:focus img { transform: scale(1.03); }

/* Play button overlay — strictly inside .video-card__thumb */
.video-page .video-card__thumb .video-card__play {
  position:        absolute;
  top:             50%;
  left:            50%;
  width:           64px;
  height:          64px;
  margin:          -32px 0 0 -32px;
  border-radius:   50%;
  background:      rgba(38, 52, 69, .82);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .2s ease, transform .2s ease;
  pointer-events:  none;
  border:          0;
  z-index:         2;
}

.video-page .video-card__thumb:hover .video-card__play,
.video-page .video-card__thumb:focus .video-card__play {
  background: var(--pa-accent, #c9a666);
  transform:  scale(1.06);
}

.video-page .video-card__thumb .video-card__play::after {
  content:       '';
  display:       block;
  width:         0;
  height:        0;
  border-left:   18px solid #ffffff;
  border-top:    12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left:   4px;
}

/* Card body — always clean, no overlay */
.video-page .video-card__body {
  padding:        22px 22px 22px;
  display:        flex;
  flex-direction: column;
  flex:           1 1 auto;
  background:     #ffffff;
  position:       relative;
  z-index:        1;
}

.video-page .video-card__title {
  font-size:    18px;
  font-weight:  700;
  line-height:  1.35;
  color:        var(--pa-primary, #1f2937);
  margin:       0 0 10px;
  letter-spacing: -0.005em;
}

.video-page .video-card__title a {
  color:           inherit;
  text-decoration: none;
}
.video-page .video-card__title a:hover,
.video-page .video-card__title a:focus { color: var(--pa-accent, #c9a666); }

.video-page .video-card__text {
  font-size:   14.5px;
  line-height: 1.6;
  color:       var(--pa-text, #1f2937);
  margin:      0 0 16px;
  flex:        1 1 auto;
}

.video-page .video-card__caption {
  font-size:   12.5px;
  line-height: 1.45;
  color:       var(--pa-text-muted, #6b7280);
  margin:      0;
}

/* ── 8. Internal links grid ───────────────────────────────── */
.video-page .video-internal-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   18px;
  margin:                0;
}
@media (max-width: 991px) {
  .video-page .video-internal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .video-page .video-internal-grid { grid-template-columns: 1fr; }
}

.video-page .video-internal-card {
  display:         flex;
  flex-direction:  column;
  background:      #ffffff;
  border:          1px solid var(--pa-border, #e5e7eb);
  border-radius:   var(--pa-radius-card, 8px);
  padding:         20px 20px 18px;
  text-decoration: none;
  color:           var(--pa-primary, #1f2937);
  transition:      border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.video-page .video-internal-card:hover,
.video-page .video-internal-card:focus {
  border-color: var(--pa-accent, #c9a666);
  box-shadow:   0 4px 14px rgba(0,0,0,.08);
  transform:    translateY(-2px);
  text-decoration: none;
}

.video-page .video-internal-card__icon {
  width:           40px;
  height:          40px;
  border-radius:   10px;
  background:      rgba(201, 166, 102, .12);
  color:           var(--pa-accent, #c9a666);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   14px;
  font-size:       18px;
}

.video-page .video-internal-card__title {
  font-size:   16px;
  font-weight: 700;
  line-height: 1.3;
  margin:      0 0 6px;
  color:       var(--pa-primary, #1f2937);
}

.video-page .video-internal-card__text {
  font-size:   13.5px;
  line-height: 1.55;
  color:       var(--pa-text-muted, #6b7280);
  margin:      0;
}

/* ── 9. Price teaser ─────────────────────────────────────── */
.video-page .video-price-teaser {
  background:    #ffffff;
  border:        1px solid var(--pa-border, #e5e7eb);
  border-left:   4px solid var(--pa-accent, #c9a666);
  border-radius: var(--pa-radius-card, 8px);
  padding:       24px 26px;
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  justify-content: space-between;
  gap:           18px 24px;
}

.video-page .video-price-teaser__text {
  margin:      0;
  font-size:   15.5px;
  line-height: 1.6;
  color:       var(--pa-text, #1f2937);
  flex:        1 1 320px;
}

.video-page .video-price-teaser__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--pa-primary, #1f2937);
  color:           #ffffff !important;
  font-weight:     600;
  font-size:       14.5px;
  padding:         12px 22px;
  border-radius:   999px;
  text-decoration: none;
  transition:      background .2s ease, transform .2s ease;
  white-space:     nowrap;
}
.video-page .video-price-teaser__btn:hover,
.video-page .video-price-teaser__btn:focus {
  background: var(--pa-accent, #c9a666);
  color:      #ffffff;
  transform:  translateY(-1px);
  text-decoration: none;
}

/* ── 10. CTA strip ────────────────────────────────────────── */
.video-page .video-cta-strip {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             12px 14px;
  margin:          8px 0 0;
}

.video-page .video-cta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         12px 22px;
  font-size:       14.5px;
  font-weight:     600;
  border-radius:   999px;
  text-decoration: none;
  border:          2px solid transparent;
  transition:      background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor:          pointer;
  font-family:     inherit;
  line-height:     1.2;
}

.video-page .video-cta-btn--primary {
  background:   var(--pa-accent, #c9a666);
  color:        #ffffff;
  border-color: var(--pa-accent, #c9a666);
}
.video-page .video-cta-btn--primary:hover,
.video-page .video-cta-btn--primary:focus {
  background:   var(--pa-primary, #1f2937);
  border-color: var(--pa-primary, #1f2937);
  color:        #ffffff;
  transform:    translateY(-1px);
  text-decoration: none;
}

.video-page .video-cta-btn--secondary {
  background:   transparent;
  color:        var(--pa-primary, #1f2937);
  border-color: var(--pa-primary, #1f2937);
}
.video-page .video-cta-btn--secondary:hover,
.video-page .video-cta-btn--secondary:focus {
  background: var(--pa-primary, #1f2937);
  color:      #ffffff;
  transform:  translateY(-1px);
  text-decoration: none;
}

/* ── 11. FAQ teaser ───────────────────────────────────────── */
.video-page .video-faq-teaser {
  text-align: center;
  padding-bottom: 24px;
}

.video-page .video-faq-teaser__text {
  font-size:   15.5px;
  line-height: 1.6;
  color:       var(--pa-text, #1f2937);
  max-width:   640px;
  margin:      0 auto 16px;
}

.video-page .video-faq-teaser__link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-weight:     600;
  font-size:       15px;
  color:           var(--pa-primary, #1f2937);
  border-bottom:   2px solid var(--pa-accent, #c9a666);
  padding-bottom:  2px;
  text-decoration: none;
  transition:      color .2s ease;
}
.video-page .video-faq-teaser__link:hover,
.video-page .video-faq-teaser__link:focus {
  color:           var(--pa-accent, #c9a666);
  text-decoration: none;
}

/* Extra breathing room between FAQ block and footer */
.video-page .pa-section:last-of-type { padding-bottom: 72px; }
@media (max-width: 767px) {
  .video-page .pa-section:last-of-type { padding-bottom: 48px; }
}
@media (max-width: 480px) {
  .video-page .pa-section:last-of-type { padding-bottom: 40px; }
}

/* ── 12. "Why videos help" two-paragraph block ───────────── */
.video-page .video-why-block { max-width: 820px; margin: 0 auto; }

.video-page .video-why-block p {
  font-size:   15.5px;
  line-height: 1.75;
  color:       var(--pa-text, #1f2937);
  margin:      0 0 14px;
}
.video-page .video-why-block p:last-child { margin-bottom: 0; }

/* ── 13. Mobile typography + spacing tweaks ──────────────── */
@media (max-width: 767px) {
  .video-page .page-title { padding: 28px 0 20px; }
  .video-page h1 { font-size: 26px; line-height: 1.2; margin: 0 0 16px; }
  .video-page .intro-lead, .video-page .video-intro { font-size: 15px; }
  .video-page .video-section-heading { font-size: 22px; margin-bottom: 20px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .video-page h1 { font-size: 32px; }
}

@media (max-width: 640px) {
  .video-page .video-price-teaser {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .video-page .video-price-teaser__btn { width: 100%; }
  .video-page .video-cta-btn { width: 100%; max-width: 320px; }
  .video-page .video-card__body { padding: 18px 18px 20px; }
}