/*
 * home.css – Seitenspezifische Stile für die Homepage (front-page.php)
 */

/* ============================================================
   HERO — Premium Full-Bleed (E.ON Firmenlauf Design)
   ============================================================ */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--hero-ground);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__video,
.hero__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* ============================================================
   HERO — Bilderwechsel (Kollektion `hero_slider`)
   ------------------------------------------------------------
   Jedes Bild steht 6 Sekunden, das Ueberblenden dauert 1,2 Sekunden. Der Wechsel laeuft
   bewusst in CSS statt in JavaScript: er funktioniert dann auch, wenn ein Skript spaeter
   laedt oder ausfaellt, und belastet den Haupt-Thread nicht. Die Versaetze setzt das
   Template ueber animation-delay, die Gesamtdauer kommt als Variable aus dem PHP.
   ============================================================ */

.hero__slider { position: absolute; inset: 0; }

.hero__slider-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0;
    animation-duration: var(--hero-slider-dauer, 18s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes heroWechsel2 {
    0%      { opacity: 0; }
    10.0%  { opacity: 1; }
    50.0%  { opacity: 1; }
    60.0%  { opacity: 0; }
    100%    { opacity: 0; }
}
.hero__slider[data-anzahl="2"] .hero__slider-bild { animation-name: heroWechsel2; }

@keyframes heroWechsel3 {
    0%      { opacity: 0; }
    6.667%  { opacity: 1; }
    33.333%  { opacity: 1; }
    40.0%  { opacity: 0; }
    100%    { opacity: 0; }
}
.hero__slider[data-anzahl="3"] .hero__slider-bild { animation-name: heroWechsel3; }

@keyframes heroWechsel4 {
    0%      { opacity: 0; }
    5.0%  { opacity: 1; }
    25.0%  { opacity: 1; }
    30.0%  { opacity: 0; }
    100%    { opacity: 0; }
}
.hero__slider[data-anzahl="4"] .hero__slider-bild { animation-name: heroWechsel4; }

@keyframes heroWechsel5 {
    0%      { opacity: 0; }
    4.0%  { opacity: 1; }
    20.0%  { opacity: 1; }
    24.0%  { opacity: 0; }
    100%    { opacity: 0; }
}
.hero__slider[data-anzahl="5"] .hero__slider-bild { animation-name: heroWechsel5; }

@keyframes heroWechsel6 {
    0%      { opacity: 0; }
    3.333%  { opacity: 1; }
    16.667%  { opacity: 1; }
    20.0%  { opacity: 0; }
    100%    { opacity: 0; }
}
.hero__slider[data-anzahl="6"] .hero__slider-bild { animation-name: heroWechsel6; }

/* Wer Bewegung reduziert haben moechte, bekommt ein stehendes Bild statt eines Wechsels. */
@media (prefers-reduced-motion: reduce) {
    .hero__slider-bild { animation: none; opacity: 0; }
    .hero__slider-bild:first-child { opacity: 1; }
}

.hero__placeholder {
    width: 100%;
    height: 100%;
    background: var(--hero-placeholder);
}


/* Diagonaler Marken-Overlay über dem Hero-Foto. Beide Verlaufsstufen kommen aus Token,
   damit jedes Event seine eigene Lichtstimmung bekommt statt des E.ON-Rots. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        var(--hero-overlay),
        linear-gradient(to top, var(--hero-overlay-foot) 0%, transparent 55%);
}

.hero__content {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-20);
    width: 100%;

    color: var(--color-white);
}

.hero__inner {
    max-width: 640px;
}

.hero__brand {
    margin-bottom: var(--space-6);
}

.hero__brand-logo {
    height: 56px;
    width: auto;
    max-width: 260px;
}

.hero__eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    margin-bottom: var(--space-5);
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--hero-title-size);
    font-weight: var(--hero-title-weight);
    line-height: 0.95;
    letter-spacing: var(--hero-title-tracking);
    text-transform: var(--hero-title-transform);
    color: var(--color-white);
    margin-bottom: var(--space-6);
}

/* ⚠️ Ab 640 px trennt der Hero-Titel NICHT automatisch.
 *
 * `hyphens: auto` steht in main.css auf allen Überschriften und ist dort richtig: auf schmalen
 * Geräten laufen lange deutsche Wörter sonst über den Rand. In einer Schlagzeile greift die
 * Trennung aber auch dann, wenn das ganze Wort noch in die nächste Zeile gepasst hätte —
 * gemessen am Mülheimer Firmenlauf wurde aus „Die sportlichste Betriebsfeier der Stadt" ein
 * „DIE SPORTLICHSTE BE-TRIEBSFEIER DER STADT". Ein getrenntes Wort in der größten Schrift der
 * Seite liest sich wie ein Fehler.
 *
 * Unter 640 px bleibt die Trennung: dort ist der Überlauf das größere Problem, und die
 * Schriftgrößen sind so klein, dass eine Trennung nicht mehr als Schaden auffällt.
 */
@media (min-width: 640px) {
    .hero__title { hyphens: manual; }
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
}

.hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hero__meta-item .icon-location {
    font-size: 0.85em;
    opacity: 0.70;
}

/* Letzte Titelzeile in der Akzentfarbe (Branding-Schalter hero_title_akzent).
   Der Kunde steuert das ueber den Zeilenumbruch im Titel, nicht ueber ein Sonderzeichen. */
.hero__title-akzent { color: var(--color-accent, var(--color-primary)); }

.hero__meta-sep {
    color: rgba(255, 255, 255, 0.30);
    font-weight: 300;
}

/* Datum und Ort passen auf schmalen Bildschirmen nicht nebeneinander. Beim Umbruch blieb der
   Trennstrich als letztes Zeichen der ersten Zeile stehen und sah aus wie ein leeres Feld
   hinter dem Datum. Untereinander braucht es ihn nicht. */
@media (max-width: 640px) {
    .hero__meta { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .hero__meta-sep { display: none; }
    body.be-hero-mitte .hero__meta { align-items: center; }
}

.hero__countdown-wrapper {
    margin-bottom: var(--space-8);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.hero__scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.50));
    animation: scrollPulse 2s ease-in-out infinite;
}

@media (max-width: 767px) {
    .hero__title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }
    .hero__brand-logo {
        height: 40px;
    }
    .hero__inner {
        max-width: 100%;
    }
}

/* ============================================================
   FACTS BAR
   ============================================================ */

.facts-bar {
    /* Eigenes Token, damit die Fakten-Leiste unabhängig vom Marken-Verlauf gesetzt werden kann.
       Ohne gepflegten Wert bleibt es exakt beim bisherigen Verhalten. */
    background: var(--surface-band, var(--gradient-eon));
    padding-block: var(--space-6);
    border-bottom: none;
}

.facts-bar__inner {
    display: flex;
    flex-wrap: wrap;
    /* Der Abstand ersetzt das frühere `space-between`: er hält die Fakten auch ohne
       Wachstum über die Breite verteilt, statt sie in der Mitte zusammenzuziehen. */
    gap: clamp(1.5rem, 3.5vw, 4.5rem);
    align-items: center;
    /* ⚠️ Bewusst NICHT `space-between`. Solange alle Fakten in eine Zeile passen, sieht man
       keinen Unterschied. Sobald sie umbrechen — bei fünf Fakten gemessen ab etwa 1200 px —
       verteilt `space-between` die volle Reihe über die Breite und lässt den einzelnen Rest
       LINKS stehen. Bei 1100 px ergab das 4 + 1 mit dem letzten Fakt am linken Rand.
       Zentriert steht eine unvollständige Reihe mittig unter der vollen. Dieselbe Überlegung
       wie bei der Partnerwand, wo `justify-content: center` genau deshalb gesetzt ist. */
    justify-content: center;
}

.facts-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* ⚠️ Bewusst KEIN `flex-grow`. Mit `flex: 1 1 auto` zieht sich ein einzelner Fakt, der in
       die nächste Reihe rutscht, über die volle Breite — und weil der Inhalt in Zeilenrichtung
       am Anfang gepackt ist, steht er dann linksbündig unter vier zentrierten. Gemessen bei
       1100 px. Dieselbe Falle wurde unter 640 px schon einmal behoben, dort im Raster.
       Ohne Wachstum trägt `justify-content: center` des Elternteils auch unvollständige Reihen. */
    flex: 0 1 auto;
    min-width: 160px;
}

.facts-bar__icon {
    font-size: 3rem;
    flex-shrink: 0;
    color: var(--color-white);
    opacity: 0.90;
    line-height: 1;
}

.facts-bar__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.facts-bar__value {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: var(--tracking-tight);

    line-height: 1;
    text-transform: uppercase;
}

/* Der Textblock muss schrumpfen dürfen: ohne `min-width: 0` bleibt ein Flex-Element mindestens
   so breit wie sein längstes Wort, und „DÜSSELDORF" oder „ELEKTRONISCHE" schoben die Leiste
   über den Bildschirmrand hinaus. */
.facts-bar__item > div { min-width: 0; }
/* `anywhere` bricht MITTEN im Wort, auch wenn es gar nicht noetig waere: aus
   „Veranstaltungsort" wurde auf dem Handy „Veranstaltungs / ort". `break-word` bricht nur, wenn
   ein Wort sonst wirklich ueberliefe, und trennt bei deutschen Komposita zusaetzlich sauber,
   wo `hyphens` greifen darf. */
.facts-bar__value,
.facts-bar__label { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 767px) {
    .facts-bar__inner {
        gap: var(--space-5);
    }
    .facts-bar__item {
        min-width: 140px;
    }
}

/* Auf schmalen Geräten steht das Icon ÜBER dem Text statt daneben. Nebeneinander bleiben bei
   390 px nach Icon und Abstand nur rund 105 px für die Beschriftung — zu wenig für
   „Elektronische Zeitmessung".

   Bewusst RASTER statt Flexbox: `minmax(0, 1fr)` garantiert, dass eine Spalte schmaler werden
   darf als ihr Inhalt. Mit Flexbox hing genau das an `min-width: 0` und an der Frage, ob die
   Summe aus Basisbreiten und Abstand in die Zeile passt — beides hatte ich falsch, die zweite
   Spalte lief über den Bildschirmrand hinaus. */
@media (max-width: 640px) {
    .facts-bar__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-4);
    }
    .facts-bar__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        min-width: 0;
        /* ⚠️ `.facts-bar__item` ist ZWEIMAL definiert: hier und in layout.css. Dort steht
           `text-align: center`. Diese Regel setzte bisher nur die Flex-Achse zurueck, nicht die
           Textausrichtung — die Icons standen also links, die Beschriftungen darunter mittig.
           Genau das sah "verschoben" aus. Wer hier etwas aendert, prueft immer beide Dateien. */
        text-align: left;
    }
    .facts-bar__icon { font-size: 2.25rem; }
    /* Bei ungerader Anzahl steht der letzte Fakt allein in der Reihe. Ueber beide Spalten
       GESTRECKT sah er aus wie eine Stufe; zentriert wirkt er gesetzt statt uebrig. */
    .facts-bar__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   INTRO-SEKTION
   ============================================================ */

.intro-section {
    background: var(--surface-page);
    padding-block: var(--section-gap);
}

.intro-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

@media (max-width: 900px) {
    .intro-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .intro-section__photo {
        order: -1;
    }
}

.intro-section__title {
    font-size: var(--text-5xl);
    font-weight: 900;
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-bottom: var(--space-8);
}

.intro-section__body {
    font-size: var(--text-lg);   /* war eine feste Zahl (22 px), siehe Hinweis bei `p` in main.css */
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.intro-section__claim {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
}

.intro-section__photo {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.intro-section__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.intro-section__photo:hover img {
    transform: scale(1.03);
}

.intro-section__photo-accent {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.12) 0%,
        rgba(var(--color-dark-rgb), 0.06) 60%,
        transparent 100%
    );
    pointer-events: none;
}

/* ============================================================
   CTA-GRID (3 Karten)
   ============================================================ */

.cta-grid {
    padding-block: var(--section-gap);
}

.cta-grid__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .cta-grid__inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .cta-grid__inner > :first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .cta-grid__inner {
        grid-template-columns: repeat(3, 1fr);
    }
    .cta-grid__inner > :first-child {
        grid-column: auto;
    }
}

/* ============================================================
   NEWS-SECTION
   ============================================================ */

.news-section {
    padding-block: var(--section-gap);
    background: var(--surface-sunken);
}

/* Ergänzt die Grundregel aus layout.css, statt sie zu wiederholen.
 *
 * Vorher stand hier derselbe Block noch einmal, und er unterschied sich in genau zwei Werten.
 * Weil home.css nach layout.css lädt, gewann er auf der Startseite — auf Unterseiten (Sponsoren)
 * galt dagegen die Fassung aus layout.css. Dieselbe Klasse sah also je nach Seite anders aus,
 * und wer künftig an layout.css schraubt, hätte auf der Startseite keine Wirkung gesehen.
 *
 * Die zwei Abweichungen bleiben absichtlich: Die Startseite setzt ihre Abschnitte großzügiger
 * ab, und dort steht neben der Überschrift oft ein Verweis, der an der Grundlinie der Unterkante
 * besser sitzt als an der Schriftgrundlinie. Die Darstellung ändert sich durch diesen Umbau
 * nirgends — nur die Herkunft der Werte ist jetzt eindeutig. */
.section__header {
    align-items: flex-end;
    margin-bottom: var(--space-12);
}

/* .section__kicker → components.css (global) */

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .news-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ALLGEMEINE SECTION-BASIS
   ============================================================ */

.section {
    padding-block: var(--section-gap);
}

.section--dark {
    background: var(--gradient-eon-dark);
    color: var(--color-text-white);
}

.section--surface {
    background: var(--color-surface);
}

/* layout.css setzt bereits Spaltenrichtung, Zentrierung und Textausrichtung. Hier bleibt nur,
 * was dort fehlt — und das Zurücknehmen des flex-end von oben. */
.section__header--center {
    justify-content: center;
    align-items: center;
}

.section__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.section__link:hover { color: var(--color-primary-dark); }

/* ============================================================
   COUNTDOWN-SEKTION (dunkler Hintergrund, 2-spaltig)
   ============================================================ */

.countdown-section {
    padding-block: var(--section-gap);
    background: var(--gradient-eon);
    color: var(--color-text-white);
}

.countdown-section__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;

    flex-direction: column;
    text-align: center;
}

@media (min-width: 860px) {
    .countdown-section__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
}

/* Kicker */
.countdown-section__kicker {
    color: rgba(255,255,255,0.60) !important;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 600;
    display: block;
    margin-bottom: var(--space-3);
}

/* Datum als Headline — groß, mutig */
.countdown-section__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
}

/* Ort */
.countdown-section__location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: rgba(255,255,255,0.60);
    margin-bottom: var(--space-5);
}

.countdown-section__location svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Beschreibung + Preis */
.countdown-section__subtitle {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.70);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-8);
    max-width: 38ch;
}

.countdown-section__subtitle strong {
    color: var(--color-white);
    font-weight: 700;
}

/* Anmeldung geschlossen */
.countdown-section__closed {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.50);
    margin-top: var(--space-4);
}

/* Widget-Seite */
.countdown-section__widget {
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-section__widget-inner {
    text-align: center;
}

.countdown-section__widget-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: rgba(255,255,255,0.45);
    margin-top: var(--space-4);
}

.countdown-section .section__kicker {
    color: var(--color-accent);
}

.countdown-section__cta {
    margin-top: var(--space-10);
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   SPONSOR-WALL
   ============================================================ */

/* Sponsor-Wall-Styles → components.css (dort global verfügbar) */

/* ============================================================
   CTA-KARTEN MIT FOTO-HINTERGRUND
   ============================================================ */

.cta-card--photo {
    background-image: var(--card-photo);
    background-size: cover;
    background-position: center;
    border-color: transparent;
    color: var(--color-white);
    min-height: 280px;
}

.cta-card--photo::before {
    background: var(--overlay-card);
    height: 100%;
    top: 0;
}

.cta-card--photo:hover {
    border-color: transparent;
    color: var(--color-white);
    filter: brightness(1.06);
}

.cta-card--photo .cta-card__icon,
.cta-card--photo .cta-card__title,
.cta-card--photo .cta-card__text,
.cta-card--photo .cta-card__arrow {
    position: relative;
    z-index: 1;
    color: var(--color-white);
}

.cta-card--photo .cta-card__icon {
    color: rgba(255, 255, 255, 0.90);
}

.cta-card--photo .cta-card__text {
    opacity: 0.85;
}

/* ============================================================
   FOTO-GALERIE 2025
   ============================================================ */

.gallery-section {
    background: var(--surface-sunken);
    padding-block: var(--section-gap);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.00) 0%,
        rgba(var(--color-dark-rgb), 0.00) 100%
    );
    transition: background 0.35s ease;
}

.gallery-item:hover .gallery-item__overlay {
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.30) 0%,
        rgba(var(--color-dark-rgb), 0.45) 100%
    );
}

/* ============================================================
   FOTO-BAND (Panorama-Banner vor Sponsoren)
   ============================================================ */

.photo-band {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: var(--band-photo);
    background-size: cover;
    background-position: center 40%;
    background-attachment: fixed;
}

@media (max-width: 767px) {
    .photo-band {
        background-attachment: scroll;
        min-height: 400px;
    }
}

.photo-band__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-band);
}

.photo-band__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-20);
    max-width: 720px;
}

.photo-band__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70) !important;
    margin-bottom: var(--space-3);
}

.photo-band__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: var(--leading-tight);
    color: var(--color-white) !important;
    margin-bottom: var(--space-6);
}

.photo-band__text {
    font-size: var(--text-lg);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82) !important;
    margin-bottom: var(--space-8);
    max-width: 560px;
}


/* Startpaket mit Foto statt Leucht-Grafik: das Bild bekommt eine helle Fläche, weil solche
   Produktfotos meist auf Weiß freigestellt sind und auf dunklem Grund sonst als heller Klotz
   ohne Kante stehen. */
.startpaket__art--foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: var(--radius-2xl);
    padding: clamp(.75rem, 2vw, 1.5rem);
}
.startpaket__art--foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Freigestellte Grafik: keine weiße Karte. Der weiße Untergrund oben ist für echte
   Produktfotos gedacht, die auf Weiß freigestellt AUSGELIEFERT werden. Eine Grafik mit
   durchsichtigem Hintergrund braucht ihn nicht — auf einer dunklen Seite steht sie darin
   wie ein Fremdkörper (gemeldet 18.08.2026 für park und runs). */
.startpaket__art--frei {
    background: none;
    padding: 0;
    border-radius: 0;
}