/* ============================================================
   shared-hero.css
   Gemeinsame Hero-Banner Styles für alle Unterseiten
   (Über Uns, Kontakt, AGB, Widerrufsrecht, Datenschutz,
    Impressum, Versandkosten)
   ============================================================ */

/* ── Äußerer Container ─────────────────────────────────────── */
.hero-outer {
    --display: flex;
    --min-height: 0px;
    --flex-direction: row;
    --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap-mobile: wrap;
    --align-items: center;
    --padding-top: 80px;
    --padding-bottom: 60px;
    --padding-left: 0px;
    --padding-right: 0px;
}

/* Explizites Padding als Fallback */
.hero-outer>.e-con-inner {
    padding-block-start: 80px;
    padding-block-end: 60px;
    padding-inline: 0;
}

/* ── Innere Card (Grid-Hintergrund, Border, Gradient) ──────── */
.hero-inner {
    --display: flex;
    --min-height: 0px;
    --flex-direction: column;
    --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --align-items: center;
    --padding-top: 60px;
    --padding-bottom: 60px;
    --padding-left: 2em;
    --padding-right: 2em;
    border-style: solid;
    --border-style: solid;
    border-width: 1px;
    --border-top-width: 1px;
    --border-right-width: 1px;
    --border-bottom-width: 1px;
    --border-left-width: 1px;
    border-color: rgba(255, 255, 255, 0.25);
    --border-color: rgba(255, 255, 255, 0.25);
    --border-radius: 20px 20px 20px 20px;
    border-radius: 20px;
    text-align: center;
    width: 100%;
    /* Explizite Fallback-Werte */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 2em;
    position: relative;
    overflow: hidden;
}

/* Grid-Hintergrund – via ::after mit Inset damit es nicht bis zum Border reicht */
.hero-inner::after {
    content: '';
    position: absolute;
    inset: 20px;
    background-image: url("/images/uploads/2025/01/Grid-2.png");
    background-position: center center;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
}

/* Radialer Gradient-Overlay über dem Grid */
.hero-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: radial-gradient(at center center, #02010100 0%, var(--e-global-color-secondary) 75%);
    pointer-events: none;
    z-index: 1;
}

/* Kinder über Grid (z:0) und Overlay (z:1) */
.hero-inner>* {
    position: relative;
    z-index: 2;
}

/* ── Hero-Titel ────────────────────────────────────────────── */
.hero-title {
    font-family: var(--e-global-typography-65b2f82-font-family), Sans-serif;
    font-size: var(--e-global-typography-65b2f82-font-size);
    font-weight: var(--e-global-typography-65b2f82-font-weight);
    line-height: var(--e-global-typography-65b2f82-line-height);
    color: var(--e-global-color-primary);
    text-align: center;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.hero-breadcrumb {
    text-align: center;
    color: var(--e-global-color-primary);
}

.hero-breadcrumb a {
    color: var(--e-global-color-primary);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.hero-breadcrumb a:hover {
    opacity: 1;
}

/* ── Responsive: Tablet ────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-inner {
        --padding-top: 3em;
        --padding-bottom: 3em;
        --padding-left: 3em;
        --padding-right: 3em;
        padding: 3em;
    }
}

/* ── Responsive: Mobile ────────────────────────────────────── */
@media (max-width: 767px) {
    .hero-outer {
        --padding-top: 4em;
        --padding-bottom: 5em;
    }

    .hero-outer>.e-con-inner {
        padding-block-start: 4em;
        padding-block-end: 5em;
    }

    .hero-inner {
        --padding-top: 2em;
        --padding-bottom: 2em;
        --padding-left: 2em;
        --padding-right: 2em;
        padding: 2em;
    }
}