/* content-section.css */
.content-section { margin-top: var(--space-section); }

/* Flex-/Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen,
   damit breite Tabellen (min-width) intern scrollen statt die Seite zu sprengen */
.platform-grid, .bonus-grid, .contact-grid { min-width: 0; }
.platform-card, .bonus-card, .contact-card { min-width: 0; }
.platform-card .table-wrap,
.bonus-card .table-wrap,
.contact-card .table-wrap { max-width: 100%; }

/* Bild nach H2 — VOLLSTÄNDIG anzeigen, nicht beschneiden */
.section__figure {
    margin: 0 0 var(--space-h2-text);
    background: var(--c-bg-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.section__img {
    width: 100%;
    height: auto;         /* kein festes Verhältnis => kein Beschneiden */
    object-fit: contain;
    display: block;
}

/* Bonus-Karten-Raster (Bonus-Seite): 4 Spalten / 2 Reihen, mobil 1 Spalte */
.bonus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-cards);
    margin-top: var(--space-h2-text);
}
.bonus-card {
    background: var(--c-card);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--shadow-soft);
}
.bonus-card__media {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-bg-dark);
}
.bonus-card__img {
    width: 100%;
    height: auto;         /* Bonusbilder vollständig, nicht beschnitten */
    object-fit: contain;
    display: block;
}
.bonus-card__title { color: var(--c-white); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.bonus-card__amount { color: var(--c-heading); font-weight: var(--fw-bold); }
.bonus-card__text { color: var(--c-text); flex: 1 1 auto; }
.bonus-card .btn { margin-top: auto; }

/* Plattform-Karten (App-Seite): Android / iOS */
.platform-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-cards);
    margin-top: var(--space-h2-text);
}
.platform-card {
    background: var(--c-card);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.platform-card__head { display: flex; align-items: center; gap: 0.85rem; }
.platform-card__icon { width: 48px; height: 48px; object-fit: contain; }
.platform-card__name { color: var(--c-white); font-size: var(--fs-h3); font-weight: var(--fw-bold); }

/* Kontakt-Karten (Support-Seite) */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-cards);
    margin-top: var(--space-h2-text);
}
.contact-card {
    background: var(--c-card);
    border-radius: var(--radius-md);
    padding: var(--pad-card);
    display: grid;
    gap: 0.5rem;
}
.contact-card__title { color: var(--c-heading); font-weight: var(--fw-bold); }
.contact-card a { color: var(--c-heading); word-break: break-word; }

/* 404 */
.error-page { text-align: center; padding-block: clamp(2.5rem, 8vw, 6rem); display: grid; gap: 1rem; justify-items: center; }
.error-page__code { font-size: clamp(5rem, 18vw, 10rem); font-weight: var(--fw-black); color: var(--c-heading); line-height: 1; }
.error-page__title { color: #fff; font-size: var(--fs-h2); }
.error-page__text { color: var(--c-text); max-width: 52ch; }

@media (min-width: 480px) {
    .bonus-grid, .platform-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .bonus-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .platform-grid { grid-template-columns: repeat(2, 1fr); }
}