/* =============================================================
   Haruby Background Image – Frontend Styles
   ============================================================= */

.hbgi-section {
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: hidden;
}

/* Dunkles / helles Overlay für Lesbarkeit */
.hbgi-overlay {
    position: absolute;
    inset: 0;            /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Inhalt liegt ÜBER dem Overlay */
.hbgi-content {
    position: relative;
    z-index: 2;
    padding: 40px 32px;
    box-sizing: border-box;
}

/* ---- Lesbarkeits-Helfer ---- */
/* Alle direkten Textelemente erben die gewählte Textfarbe */
.hbgi-content,
.hbgi-content p,
.hbgi-content h1,
.hbgi-content h2,
.hbgi-content h3,
.hbgi-content h4,
.hbgi-content h5,
.hbgi-content h6,
.hbgi-content li,
.hbgi-content span,
.hbgi-content a {
    color: inherit;
    -webkit-text-fill-color: inherit !important;
}

.hbgi-content a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Blogarise-Override: Verhindere Theme-Eingriffe */
.hbgi-section .hbgi-content,
.hbgi-section .hbgi-content p,
.hbgi-section .hbgi-content h1,
.hbgi-section .hbgi-content h2,
.hbgi-section .hbgi-content h3,
.hbgi-section .hbgi-content h4,
.hbgi-section .hbgi-content h5,
.hbgi-section .hbgi-content h6 {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Fehlermeldung */
.hbgi-error {
    background: #fff3cd !important;
    color: #856404 !important;
    -webkit-text-fill-color: #856404 !important;
    padding: 8px 12px;
    border-left: 4px solid #ffc107;
    margin: 8px 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 767px) {
    .hbgi-content {
        padding: 28px 18px;
    }
}