/* Bothe Familien-Landingpage (statisch, ersetzt die frühere TYPO3-Seite) */

@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/heebo-v10-latin-500.woff2) format('woff2');
}

@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/heebo-v10-latin-700.woff2) format('woff2');
}

:root {
    --rot: #ed3e47;
    --gelb: #e0d631;
    --gruen: #9cbf07;
    --weiss: #fff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

/* Inhalt mittig, Fußzeile am unteren Rand */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Heebo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--weiss);
    background: #000 url(../img/hintergrund.jpg) center / cover no-repeat fixed;
}

/* Dunkle Abdeckung über dem Foto (wie das frühere Modal-Backdrop) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Zwei Karten nebeneinander; Zeilen per Subgrid gleich hoch */
.wahl {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    column-gap: 2rem;
    align-content: center;
}

.karte {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    text-align: center;
}

.karte__titel {
    margin: 0;
    padding: 2rem;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    align-self: end;
}

.karte__logo {
    background: var(--weiss);
}

.karte__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.karte__text {
    min-height: 8.125rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.karte__hinweis {
    margin-top: .5rem;
    font-weight: 700;
}

.karte__aktion {
    padding: 0 1rem 1rem;
}

.karte__button {
    display: block;
    padding: 6px 12px;
    font-weight: 700;
    color: var(--weiss);
    text-decoration: none;
    transition: background-color .15s ease-in-out;
}

.karte__button:hover,
.karte__button:focus-visible {
    background: #000;
    color: var(--weiss);
}

.karte__button:focus-visible {
    outline: 2px solid var(--weiss);
    outline-offset: 2px;
}

.karte--susanne .karte__text,
.karte--susanne .karte__aktion {
    background: var(--rot);
}

.karte--susanne .karte__button {
    background: rgba(0, 0, 0, .3);
}

.karte--familie .karte__text,
.karte--familie .karte__aktion {
    background: var(--gelb);
}

.karte--familie .karte__button {
    background: var(--gruen);
}

.fuss {
    position: relative;
    z-index: 1;
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: .875rem;
}

.fuss a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.fuss a:hover,
.fuss a:focus-visible {
    color: var(--weiss);
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    body {
        font-size: 1.25rem;
    }

    .karte__titel,
    .karte__text {
        padding: 1.5rem 1rem;
    }
}

/* Smartphone: Karten kompakt untereinander */
@media (max-width: 639.98px) {
    body {
        font-size: .9375rem;
        background-attachment: scroll;
    }

    .wahl {
        grid-template-columns: minmax(0, 300px);
        grid-template-rows: none;
        justify-content: center;
        row-gap: .75rem;
        padding: 1rem;
    }

    .karte {
        grid-row: auto;
        grid-template-rows: none;
    }

    .karte__titel {
        padding: .5rem 0;
    }

    .karte__logo img {
        width: 80%;
        margin: 0 auto;
    }

    .karte__text {
        min-height: 0;
        padding: .875rem 1rem;
    }

    .karte__hinweis {
        margin-top: .25rem;
    }

    .karte__aktion {
        padding: 0 .75rem .75rem;
    }

    .karte__button {
        padding: 6px 12px;
    }

    .fuss {
        padding: .75rem 1rem;
        font-size: .8125rem;
    }
}