/* Blurt-Guide Custom Styling */
:root {
    --cassiopeia-color-primary: #000000; /* Ein schönes, seriöses Blau */
    --cassiopeia-color-hover: #14365a;
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);;
}
/* 1. Den Header-Abstand zum Inhalt eliminieren */
.site-grid {
    padding-top: 0 !important;
    gap: 0 !important; /* Entfernt Grid-Lücken */
}

.header {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* 2. Das Banner-Modul auf volle Breite zwingen */
.full-width-banner {
    grid-column: full-start / full-end; /* Nutzt das gesamte Cassiopeia-Grid */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    line-height: 0; /* Verhindert kleinen Spalt unter dem Bild */
}

.full-width-banner img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

/* 3. Den Abstand nach dem Banner zum restlichen Inhalt wieder herstellen */
.full-width-banner {
    margin-bottom: 2rem;
}