/* ==========================================================================
   Startseite
   ========================================================================== */

/* --- Begruessungsbereich mit grossem Bild -------------------------------- */

.begruessung {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(28rem, 22rem + 20vw, 40rem);
    padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
    background: var(--anthrazit);
    overflow: hidden;
    isolation: isolate;
}

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

.begruessung__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.begruessung::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg,
            rgba(17, 21, 26, .95) 0%,
            rgba(17, 21, 26, .88) 38%,
            rgba(17, 21, 26, .52) 72%,
            rgba(17, 21, 26, .38) 100%);
}

.begruessung__inhalt {
    position: relative;
    max-width: 100%;
}

.begruessung__ueberzeile {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.1rem;
    padding: .4rem .95rem .4rem .75rem;
    border-radius: 999px;
    background: rgba(225, 9, 22, .16);
    border: 1px solid rgba(225, 9, 22, .5);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffd9d9;
}

.begruessung__ueberzeile::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--rot);
    box-shadow: 0 0 0 4px rgba(225, 9, 22, .28);
}

.begruessung__titel {
    max-width: 20ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 1rem + 3.6vw, 4rem);
    line-height: 1.08;
    hyphens: none;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.begruessung__akzent {
    background: linear-gradient(90deg, var(--orange), #ffb45c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.begruessung__text {
    max-width: 44rem;
    margin: 1.4rem 0 0;
    font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, .84);
}

.begruessung .knopf-reihe { margin-top: var(--abstand-l); }

/* --- Sektor-Karten -------------------------------------------------------- */

.sektor { border-top: 4px solid var(--rot); }
.sektor:has(.karte__symbol--orange) { border-top-color: var(--orange); }

/* --- Anriss des aktuellen Heftes ------------------------------------------ */

.heft-anriss {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
    background: var(--weiss);
    border: 1px solid var(--grau-hell);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-mittel);
}

.heft-anriss__cover {
    position: relative;
    border-radius: 4px 10px 10px 4px;
    overflow: hidden;
    box-shadow: var(--schatten-gross);
    rotate: -2deg;
    transition: rotate var(--uebergang), transform var(--uebergang);
}

.heft-anriss__cover::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 10px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .04) 60%, rgba(255, 255, 255, .3));
}

.heft-anriss:hover .heft-anriss__cover { rotate: 0deg; transform: translateY(-4px); }

.heft-anriss__cover img { display: block; width: 100%; }

.heft-anriss__text h2 { margin-bottom: .2rem; }

.heft-anriss__ausgabe {
    margin-bottom: 1rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--rot-dunkel);
}

.knopf__zusatz { font-weight: 500; opacity: .85; }

@media (max-width: 767.98px) {
    .heft-anriss {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .heft-anriss__cover { max-width: 11rem; }
    .heft-anriss .knopf-reihe { justify-content: center; }
}

/* --- Übergeordnete Vereinigung (Stiftungsfamilie) ------------------------- */

.traeger {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    background: var(--weiss);
    border: 1px solid var(--grau-hell);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-klein);
}

.traeger__logo {
    display: block;
    padding: 1rem;
    border-radius: var(--radius-m);
    background: var(--weiss);
    transition: transform var(--uebergang), box-shadow var(--uebergang);
}

.traeger__logo:hover,
.traeger__logo:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--schatten-mittel);
}

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

.traeger__text h2 { margin-bottom: .7rem; }
.traeger__text > p { line-height: 1.75; color: var(--text-leise); }

.traeger__hinweis {
    margin: .9rem 0 0;
    font-size: .82rem;
    color: var(--grau);
}

.traeger__hinweis span { font-weight: 600; }

@media (max-width: 767.98px) {
    .traeger {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .traeger__logo { max-width: 15rem; }
    .traeger .knopf-reihe { justify-content: center; }
}