/**
 * Sponsoren Screen CSS – mobile-first, eine Klasse pro Element (011-ui-html 021).
 */

.screen-sponsoren-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}

.screen-sponsoren-headline-section {
    margin: 15px 0;
    padding: 15px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 30px;
}

.screen-sponsoren-headline-section .base-headline-h1 {
    margin: 0;
}

/* .screen-sponsoren-thanks-section | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Dankes-Bereich Layout */
.screen-sponsoren-thanks-section {
    margin: 15px 0 40px 0;
    padding: 30px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--color-white);
    border-radius: 12px;
}

.screen-sponsoren-thanks-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.screen-sponsoren-thanks-intro,
.screen-sponsoren-thanks-main,
.screen-sponsoren-thanks-closing {
    font-family: var(--font-family-primary);
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 20px 0;
}

.screen-sponsoren-thanks-closing {
    margin-bottom: 0;
}

.screen-sponsoren-thanks-main strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* .screen-sponsoren-grid | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Grid-Layout Sponsoren-Karten */
.screen-sponsoren-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

/* .screen-sponsoren-card | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Sponsor-Karte Layout */
.screen-sponsoren-card {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 25px 20px;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* .screen-sponsoren-logo-link | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Logo groß oberhalb der Beschreibung, ohne Float */
.screen-sponsoren-logo-link {
    text-decoration: none;
    float: none;
    width: min(100%, 32rem);
    max-width: min(100%, 32rem);
    margin: 0 auto 1rem auto;
    display: block;
}

/* .screen-sponsoren-card-header | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Name und Slogan in eigener Zeile oberhalb von Logo und Beschreibung */
.screen-sponsoren-card-header {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
    margin: 0 0 15px 0;
}

.screen-sponsoren-card-header .base-headline-h3 {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* .screen-sponsoren-card-header .base-headline-h3 h3 | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Domain in H3 ohne Uppercase-Transform */
.screen-sponsoren-card-header .base-headline-h3 h3 {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: 0;
}

/* .screen-sponsoren-card-text-with-logo | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Neue Zeile unter Header, Logo-Float mit Textumlauf */
.screen-sponsoren-card-text-with-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    clear: both;
}

.screen-sponsoren-card-text-with-logo::after {
    content: "";
    display: table;
    clear: both;
}

/* .screen-sponsoren-logo-container | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Logo linksbündig zur H3-Kante statt zentriert */
.screen-sponsoren-logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    background-color: var(--color-white);
    border-radius: 8px;
    box-sizing: border-box;
}

/* .screen-sponsoren-logo | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Sponsor-Logo im Float-Container ohne Text-Überlagerung skalieren */
.screen-sponsoren-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 307px;
    height: auto;
    object-fit: contain;
}

/* .screen-sponsoren-card-content | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Karteninhalt: Titel oben, Float-Umlauf im Beschreibungs-Wrapper */
.screen-sponsoren-card-content {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* .screen-sponsoren-card .base-headline-h3 | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | H3 im Header-Block volle Breite */
.screen-sponsoren-card-header .base-headline-h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 10px 0;
    text-align: left;
}

/* .screen-sponsoren-sponsor-slogan | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Einheitliche Slogan-Höhe für gleich hohe Karten-Header */
.screen-sponsoren-card-header .screen-sponsoren-sponsor-slogan {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: var(--line-height-base);
    color: var(--color-gold);
    margin: 0;
    min-height: 2.8em;
    text-align: left;
    font-style: italic;
}

/* .screen-sponsoren-sponsor-description | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Beschreibung startet auf allen Breakpoints unter dem Logo */
.screen-sponsoren-sponsor-description {
    font-family: var(--font-family-primary);
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
    text-align: left;
    clear: both;
    overflow: visible;
}

/* .screen-sponsoren-cta-button | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | CTA unter Logo-Text-Block */
.screen-sponsoren-cta-button {
    display: block;
    width: fit-content;
    padding: 8px 16px;
    background-color: var(--color-gold);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 6px;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease;
    clear: both;
    margin: 20px auto 0 auto;
}

.screen-sponsoren-cta-button:hover {
    background-color: var(--color-gold-dark);
}

@media (min-width: 600px) {
    .screen-sponsoren-container {
        padding: 50px 30px;
    }

    .screen-sponsoren-headline-section {
        margin-bottom: 40px;
    }

    .screen-sponsoren-thanks-section {
        padding: 40px;
        margin-bottom: 60px;
    }

    .screen-sponsoren-thanks-content {
        font-size: 17px;
    }

    .screen-sponsoren-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .screen-sponsoren-card {
        padding: 35px 20px;
    }

    /* .screen-sponsoren-logo-link | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tablet: Logo bleibt ohne Float oberhalb der Beschreibung */
    .screen-sponsoren-logo-link {
        float: none;
        width: min(100%, 34rem);
        max-width: min(100%, 34rem);
        margin: 0 auto 1.15rem auto;
    }

    .screen-sponsoren-sponsor-description {
        clear: both;
    }

    .screen-sponsoren-logo-container {
        min-height: 0;
        padding: 0;
    }

    .screen-sponsoren-logo {
        max-height: 384px;
    }

    .screen-sponsoren-card-header .base-headline-h3 {
        font-size: 20px;
    }

    .screen-sponsoren-card-header .screen-sponsoren-sponsor-slogan {
        font-size: 15px;
    }

    .screen-sponsoren-sponsor-description {
        font-size: 15px;
    }

    .screen-sponsoren-cta-button {
        padding: 10px 20px;
        font-size: var(--font-size-base);
    }
}

@media (min-width: 1024px) {
    .screen-sponsoren-container {
        padding: 60px 40px;
    }

    .screen-sponsoren-grid {
        gap: 40px;
    }

    .screen-sponsoren-card {
        padding: 40px;
    }

    /* .screen-sponsoren-logo-link | Änderungsprotokoll: 2026-06-16 | cursor-agent | @skill-css-rules, @skill-change-provenance | Desktop: Logo bleibt ohne Float oberhalb der Beschreibung */
    .screen-sponsoren-logo-link {
        float: none;
        width: min(100%, 36rem);
        max-width: min(100%, 36rem);
        margin: 0 auto 1.25rem auto;
    }

    .screen-sponsoren-logo-container {
        min-height: 0;
        padding: 0;
    }

    .screen-sponsoren-card-header .base-headline-h3 {
        font-size: 22px;
    }

    .screen-sponsoren-sponsor-description {
        font-size: 16px;
    }
}