/* ============================================================
   Herbano Ratgeber — Article-Hero
   Full-Bleed-Bild + Gradient + Pill + Breadcrumb +
   Titel + Lead + Meta-Row (Autor / Lesezeit / Datum) ohne Avatar.
   ============================================================ */

   .herbano-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: 560px;
    color: #fff;
    overflow: hidden;
    margin-bottom: var(--hb-sp-7);
    display: flex;
    align-items: flex-end;
}

/* ---------- Bild + Overlay ---------- */
.herbano-hero__image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.herbano-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.herbano-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.28) 50%,
        rgba(0, 0, 0, 0.835) 100%
    );
    pointer-events: none;
}

/* ---------- Content-Container ---------- */
.herbano-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--hb-container-base);
    margin: 0 auto;
    padding: var(--hb-sp-9) var(--hb-sp-5) var(--hb-sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--hb-sp-3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---------- Pill ---------- */
.herbano-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--hb-sp-2);
    padding: 6px var(--hb-sp-4);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--hb-r-pill);
    color: #fff;
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--hb-tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-self: flex-start;
    transition: background var(--hb-dur-base) var(--hb-ease);
    text-shadow: none;
}

.herbano-hero__pill:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    text-decoration: none;
}

/* ---------- Breadcrumb ---------- */
.herbano-hero__breadcrumb {
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-caption);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-sp-2);
    align-items: center;
    line-height: 1.4;
}

.herbano-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--hb-dur-micro) var(--hb-ease);
}

.herbano-hero__breadcrumb a:hover {
    color: #fff;
}

.herbano-hero__breadcrumb-sep {
    color: rgba(255, 255, 255, 0.45);
}

.herbano-hero__breadcrumb-current {
    color: rgba(255, 255, 255, 0.65);
}

.herbano-hero__breadcrumb-current-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--hb-sp-2);
    align-items: center;
}

/* ---------- Title ---------- */
.herbano-hero__title {
    font-family: var(--hb-f-display);
    font-size: var(--hb-fs-display);
    font-weight: 600;
    line-height: var(--hb-lh-tight);
    letter-spacing: var(--hb-tracking-tight);
    color: #fff;
    margin: 0;
    text-wrap: balance;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.45);
}

/* ---------- Lead ---------- */
.herbano-hero__lead {
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-lead);
    line-height: var(--hb-lh-body);
    color: rgba(255, 255, 255, 0.95);
    margin: var(--hb-sp-3) 0 0;
    max-width: 720px;
    text-wrap: pretty;
}

/* ---------- Meta-Row (Autor / Lesezeit / Datum) ---------- */
.herbano-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-sp-3) var(--hb-sp-5);
    align-items: center;
    margin-top: var(--hb-sp-5);
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-small);
    color: rgba(255, 255, 255, 0.9);
}

.herbano-hero__author-name,
.herbano-hero__reading-time,
.herbano-hero__date {
    display: inline-flex;
    align-items: center;
    gap: var(--hb-sp-2);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.herbano-hero__icon {
    flex-shrink: 0;
    stroke: currentColor;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .herbano-hero {
        min-height: 420px;
    }
    .herbano-hero__content {
        padding: var(--hb-sp-7) var(--hb-sp-4) var(--hb-sp-5);
        gap: var(--hb-sp-2);
    }
    .herbano-hero__title {
        font-size: 28px;
    }
    .herbano-hero__lead {
        font-size: var(--hb-fs-body);
    }

    /* Breadcrumb: Current-Page weglassen */
    .herbano-hero__breadcrumb-current-wrap {
        display: none;
    }

    /* Meta: vertikal stapeln, eng */
    .herbano-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: var(--hb-fs-caption);
        margin-top: var(--hb-sp-3);
    }
}