/* Produktunterseite; gemeinsame Gestaltung aus style.css bleibt erhalten. */
.product-detail { padding-block: 30px 64px; }
.back-navigation { margin-bottom: 36px; font-size: 14px; }
.back-navigation a { color: var(--purple); text-underline-offset: 4px; }
.back-navigation a:hover { text-decoration-thickness: 2px; }
.product-detail a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.detail-introduction { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 64px; align-items: start; }
.detail-eyebrow { color: var(--purple); font-size: 13px; font-weight: 800; letter-spacing: .6px; line-height: 1.5; }
.detail-introduction h2 { color: var(--purple); font-size: 38px; font-weight: 900; line-height: 1.15; letter-spacing: -.8px; margin-top: 9px; }
.detail-subtitle { font-size: 25px; line-height: 1.4; margin-top: 8px; }
.detail-introduction > div > p:not(.detail-eyebrow):not(.detail-subtitle) { font-size: 16px; line-height: 1.75; margin-top: 20px; }
.detail-price { background: var(--purple); color: #fff; border-radius: 5px; padding: 29px; }
.detail-price h3 { font-size: 35px; font-weight: 900; line-height: 1.2; }
.detail-price-value { color: var(--gold); font-size: 33px; font-weight: 800; margin-top: 12px; }
.detail-price-note { font-size: 12px; line-height: 1.6; margin-top: 4px; }
.quick-specs { margin: 23px 0; font-size: 14px; line-height: 1.5; }
.quick-specs > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; border-bottom: 1px solid #ffffff40; }
.quick-specs dt { color: #ffffffd9; }
.quick-specs dd { margin: 0; font-weight: 700; text-align: right; }
.detail-guarantee { font-size: 14px; font-weight: 700; line-height: 1.6; }
 .consultation-voucher { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 30px; align-items: center; margin-top: 38px; padding: 26px 34px; border-radius: 5px; background: var(--gold); color: var(--purple); }
.voucher-value { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 138px; height: 138px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 28px; font-weight: 900; line-height: 1.2; }
.voucher-value span { margin-top: 7px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.consultation-voucher p { font-size: 20px; font-weight: 600; line-height: 1.6; }
.consultation-voucher strong { font-weight: 900; }
.feature-overview { height: auto; padding-block: 140px 125px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-card { padding: 29px; }
.feature-card h3 { font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: 0; margin-bottom: 0; }
.feature-card p { font-size: 15px; line-height: 1.75; margin-top: 14px; white-space: normal; }
.product-detail-continuation { padding-top: 0; }
.product-detail-continuation .technical-section { margin-top: 28px; }
.technical-section, .motif-section { margin-top: 60px; }
.product-detail section > h2 { color: var(--purple); font-size: 30px; font-weight: 800; line-height: 1.3; }
.technical-table { border-collapse: collapse; width: 100%; margin-top: 24px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.technical-table caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.technical-table th, .technical-table td { padding: 14px 22px; text-align: left; vertical-align: top; }
.technical-table thead { background: var(--purple); color: #fff; }
.technical-table tbody th { font-weight: 600; width: 36%; }
.technical-table tbody tr { border-bottom: 1px solid #e5dcea; }
.technical-table tbody tr:nth-child(even) { background: #f6f2f8; }
.technical-notes { font-size: 13px; line-height: 1.7; margin-top: 18px; color: #48424c; }
.technical-notes p + p { margin-top: 8px; }
.section-description { font-size: 16px; line-height: 1.7; margin-top: 12px; }
.motif-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; }
.motif-gallery figure { margin: 0; border: 1px solid #e5dcea; border-radius: 5px; overflow: hidden; }
.motif-gallery a { display: block; }
.motif-gallery img { width: 100%; height: auto; aspect-ratio: 1320 / 469; object-fit: contain; }
.motif-gallery figcaption { padding: 19px 22px; line-height: 1.6; }
.motif-gallery figcaption strong { display: block; color: var(--purple); font-size: 19px; }
.motif-gallery figcaption span { display: block; font-size: 14px; margin-top: 2px; }
.individual-motif { height: auto; margin-top: 28px; padding-block: 140px 125px; }
.product-detail-before-motif { padding-bottom: 0; }
.product-detail-after-motif { padding-top: 0; }
.product-detail-after-motif .regulation-section { margin-top: 28px; }
.individual-motif .detail-eyebrow { color: var(--gold); }
.individual-motif h3 { font-size: 26px; line-height: 1.3; font-weight: 800; margin-top: 8px; }
.individual-motif-inner > p:not(.detail-eyebrow) { font-size: 16px; line-height: 1.75; margin-top: 13px; max-width: 850px; }
.motif-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; margin-top: 21px; padding: 12px 24px; border-radius: 5px; background: var(--gold); color: var(--purple); font-size: 16px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.motif-button:hover { background: #fff; }
.regulation-section { margin-top: 55px; border-left: 4px solid var(--gold); padding-left: 26px; }
.regulation-section p { font-size: 15px; line-height: 1.75; margin-top: 17px; }
.regulation-functions { margin-top: 18px; padding: 17px 21px; background: #f6f2f8; color: var(--purple); font-size: 15px; }
.regulation-functions p { margin-top: 5px; }
.detail-closing { color: var(--purple); font-weight: 800; font-size: 22px; line-height: 1.4; text-align: center; margin-top: 56px; }

/* Responsive Änderungen ausschließlich per Mediaquery. */
@media (min-width: 769px) and (max-width: 1100px) {
  .detail-introduction { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .detail-introduction h2 { font-size: 32px; }
  .detail-price { padding: 24px; }
  .feature-grid { gap: 16px; }
  .feature-card { padding: 24px 20px; }
  .feature-card h3 { font-size: 20px; }
  .consultation-voucher { gap: 24px; padding: 24px; }
  .consultation-voucher p { font-size: 18px; }
}

@media (max-width: 768px) {
  .product-detail { padding-block: 24px 42px; }
  .back-navigation { margin-bottom: 28px; }
  .detail-introduction { grid-template-columns: 1fr; gap: 28px; }
  .detail-introduction h2 { font-size: 30px; }
  .detail-subtitle { font-size: 22px; }
  .detail-price { padding: 26px; }
  .feature-overview { padding-block: 100px 105px; }
  .feature-grid { grid-template-columns: 1fr; gap: 18px; }
  .feature-card { padding: 26px; }
  .consultation-voucher { grid-template-columns: 1fr; justify-items: center; gap: 20px; padding: 26px; margin-top: 28px; }
  .voucher-value { width: 124px; height: 124px; font-size: 26px; }
  .consultation-voucher p { font-size: 18px; text-align: center; }
  .technical-section, .motif-section { margin-top: 42px; }
  .product-detail section > h2 { font-size: 26px; }
  .technical-table { font-size: 14px; }
  .technical-table th, .technical-table td { padding: 12px 10px; }
  .technical-table tbody th { width: 43%; }
  .motif-gallery { grid-template-columns: 1fr; gap: 20px; }
  .individual-motif { padding-block: 100px 105px; }
  .individual-motif h3 { font-size: 23px; }
  .regulation-section { padding-left: 18px; margin-top: 40px; }
  .regulation-functions { padding: 15px; }
  .detail-closing { font-size: 20px; margin-top: 38px; }
}

@media (max-width: 380px) {
  .detail-introduction h2 { font-size: 27px; }
  .detail-eyebrow { font-size: 12px; }
  .technical-table { font-size: 13px; }
  .technical-table th, .technical-table td { padding: 10px 8px; }
}

/* Verlinkter Vereins-Störer unmittelbar über dem Footer. */
.club-promo { margin-bottom: 40px; }
.club-promo-content { padding: 30px 34px; border-radius: 5px; background: var(--gold); color: var(--purple); }
.club-promo-content > strong { display: block; font-size: 25px; font-weight: 800; line-height: 1.35; }
.club-promo-content > p { display: block; margin-top: 12px; font-size: 18px; line-height: 1.6; }
.club-promo-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; margin-top: 21px; padding: 12px 24px; border-radius: 5px; background: var(--purple); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.club-promo-button:hover { background: #111; }
.club-promo-button:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
@media (max-width: 768px) {
  .club-promo { margin-bottom: 30px; }
  .club-promo-content { padding: 24px; }
  .club-promo-content > strong { font-size: 22px; }
  .club-promo-content > p { font-size: 16px; }
}

.fanshop-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 60px; margin-top: 24px; padding: 18px 30px; border-radius: 5px; background: var(--purple); color: #fff; font-size: 20px; font-weight: 800; line-height: 1.4; text-align: center; white-space: normal; text-decoration: none; }
.fanshop-button:hover { background: #111; }

@media (max-width: 768px) {
  .fanshop-button { width: 100%; padding: 18px 22px; font-size: 18px; line-height: 1.55; }
}

/* W170-Galerie mit den drei Produktbildern aus dem Fanshop. */
.motif-gallery-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.motif-gallery-shop img { aspect-ratio: 1; object-fit: contain; }
@media (max-width: 768px) {
  .motif-gallery-shop { grid-template-columns: 1fr; }
}

/* Bildwechsel wie im Fanshop: Überblendung zum zweiten Produktbild. */
.motif-gallery-shop .motif-image-swap { position: relative; }
.motif-image-swap img { transition: opacity .25s; }
.motif-gallery-shop .motif-secondary { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.motif-image-swap:focus-visible img:first-child { opacity: 0; }
.motif-image-swap:focus-visible .motif-secondary { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .motif-image-swap:hover img:first-child { opacity: 0; }
  .motif-image-swap:hover .motif-secondary { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .motif-image-swap img { transition: none; }
}