/* ==========================================================================
   SECTION HERO Hintergrund Overlay
   ========================================================================== */

.section-hero:not(:has(.hero-bg-video))::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* FIX: Holt den bestehenden main-wrapper mitsamt Text sicher nach vorne auf z-index: 3 */
.section-hero .main-wrapper {
    position: relative;
    z-index: 3;
}

/* ==========================================================================
   SECTION CONTENT
   ========================================================================== */

.section-content {
    background-color: var(--meinmaturaball-druck-gruen); /* Verhindert das Durchscheinen beim Scrollen */
	padding: 110px 0 110px 0;
}

/* ==========================================================================
   PRODUCT INTERACTION GRID (4-COL) - STATISCHER SCHATTEN & GPU-ENGINE
   ========================================================================== */

/* Fluid Grid Engine für automatischen Reihenumbruch */
.product-grid-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 30px; 
}

/* Berechnet die Basisbreite der Boxen dynamisch abzüglich des Gaps */
.product-grid-fluid .flexbox-4col {
    /* (100% Breite - 3 Gaps à 30px = 90px) / 4 Spalten */
    width: calc((100% - 90px) / 4) !important;
    max-width: calc((100% - 90px) / 4) !important;
    flex: 0 0 calc((100% - 90px) / 4) !important;
    margin: 0 !important; /* Verhindert alte Layout-Interferenzen */
}

.product-grid-fluid a.flexbox-4col.flexbox-4col-product-card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
    box-sizing: border-box;
    
    /* HIER DIE KORREKTUR: Erzwingt exakt 4 Spalten im Grid über Kombi-Selektor und Flex-Reset */
    width: calc((100% - 90px) / 4) !important;
    max-width: calc((100% - 90px) / 4) !important;
    flex: 0 0 calc((100% - 90px) / 4) !important;
    margin: 0 !important; 
    
    /* Permanenter, statischer Schatten ohne Hover-Veränderung */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    
    /* Fixiert die Kachel auf der GPU-Ebene */
    transform: translateZ(0);
}

.flexbox-4col-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* Schwarzer Verlauf */
.flexbox-4-col-photo-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%; /* Von 50% auf 65% erhöht (fährt weiter rauf) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%); /* Start-Opacity von 0.85 auf 0.95 erhöht */
    z-index: 2;
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* KATEGORIE: Startet auf 50% Mittellinie + 110px Versatz nach unten */
.flexbox-4col-category {
    position: absolute;
    top: 50%; 
    left: 0;
    width: 100%;
    z-index: 5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    
    transform: translateY(calc(-50% + 110px)); 
    will-change: transform;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Lila Hintergrund */
.flexbox-4col-product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--meinmaturaball-lila, #7A3B82);
    opacity: 0;
    z-index: 3;
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* LINK-TEXT: Fährt von unten rein */
.flexbox-4col-link {
    position: absolute;
    bottom: 30px; 
    left: 0;
    width: 100%;
    z-index: 5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 110%;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- TRIGGER ZUSTÄNDE BEIM HOVERN (1 SEKUNDE) --- */

.flexbox-4col-product-card:hover::before {
    opacity: 1;
}

.flexbox-4col-product-card:hover .flexbox-4-col-photo-layer {
    opacity: 0;
}

/* Gleitet exakt auf die animierte Mittellinie (-50%) */
.flexbox-4col-product-card:hover .flexbox-4col-category {
    transform: translateY(-50%);
}

/* Link-Text rastet bei bottom: 30px ein */
.flexbox-4col-product-card:hover .flexbox-4col-link {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   PRODUCT QUICKLINKS GRID & BUTTONS (16PX GAP ENGINE)
   ========================================================================== */

.product-grid-quicklinks {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
}

.product-grid-quicklinks .flexbox-4-col-produktbutton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    background-color: var(--meinmaturaball-lila, #7A3B82);
    text-decoration: none;
    box-sizing: border-box;
    padding: 0 15px;
    
    /* Mathematisch exakte Breite für 4 Spalten bei 16px Gap (3 x 16px = 48px) */
    width: calc((100% - 48px) / 4);
    max-width: calc((100% - 48px) / 4);
    flex: 0 0 calc((100% - 48px) / 4);
    margin: 0;
    
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    transition: background-color 0.4s ease;
}

.product-grid-quicklinks .flexbox-4-col-produktbutton span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.4s ease;
}

/* INTERAKTIONS-STATES (FARBINVERTIERUNG) */
.product-grid-quicklinks .flexbox-4-col-produktbutton:hover {
    background-color: #ffffff;
}

.product-grid-quicklinks .flexbox-4-col-produktbutton:hover span {
    color: var(--meinmaturaball-lila, #7A3B82);
}

/* AKTIVER ZUSTAND (AKTUELLE UNTERSEITE FIXIERT) */
.product-grid-quicklinks .flexbox-4-col-produktbutton.active {
    background-color: #ffffff;
    pointer-events: none;
}

.product-grid-quicklinks .flexbox-4-col-produktbutton.active span {
    color: var(--meinmaturaball-lila, #7A3B82);
    font-weight: 700;
}

/* ==========================================================================
   SECTION DETAILINFOS (MATURAZEITUNG VARIANTEN-VERGLEICH)
   ========================================================================== */

.section-detailinfos {
    background-color: var(--meinmaturaball-mittelgrau);
    padding: 110px 0;
    color: #ffffff;
}

/* FIX: Entfernt den vererbten Margin-Bottom des Flexbox-Rasters unter den Boxen */
.section-detailinfos .flexbox-2col {
    margin-bottom: 0 !important;
}

.detailinfos-main-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Montserrat SemiBold */
    font-size: 40px;
    line-height: 110%;
    color: #ffffff;
    text-align: center;
    margin: 0 0 20px 0;
}

.detailinfos-intro-text {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 60px auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 130%;
    color: #ffffff;
}

/* ==========================================================================
   CREATIVE PREMIUM CARDS (detailinfos-card-2col-ENGINE)
   ========================================================================== */

/* Haupt-Karten-Container mit weichem Verlauf nach unten und runden Ecken */
.flexbox-2col .detailinfos-card-2col {
    background: linear-gradient(to bottom, #ffffff 0%, #f4f5f7 100%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border-radius: 0 0 16px 16px; /* Oben scharf (0), unten rund (16px) gegen Blitzer */
    display: flex;
    flex-direction: column;
    border: none !important;
    overflow: hidden; /* Zwingt alles in die Eckenrundung */
    margin-bottom: 0 !important; /* Sicherheitshalber auch direkt auf der Spalte genullt */
}

/* Farbiger Header-Bereich mit der originalen, schönen Ellipse */
.detailinfos-card-2col-header {
    position: relative;
    background: linear-gradient(135deg, var(--meinmaturaball-darklila) 0%, var(--meinmaturaball-lila) 100%);
    padding: 40px 30px 41px 30px; /* Um 24px verknappt für die perfekte Höhe */
    text-align: center;
    
    /* Die originale, weiche Wölbung nach unten */
    clip-path: ellipse(85% 100% at 50% 0%);
}

/* Upgrade-Header für die Premium-Variante (Druck-Grün zu Lila-Verlauf) */
.detailinfos-card-2col-header-premium {
    background: linear-gradient(135deg, var(--meinmaturaball-druck-gruen) 0%, var(--meinmaturaball-lila) 100%);
}

/* Entfernt alte Pseudoelemente restlos */
.detailinfos-card-2col-header::after,
.detailinfos-card-2col-body::after {
    display: none !important;
}

/* Headlines innerhalb der Header */
.detailinfos-card-2col-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Standardgewicht bleibt fett für "Standard" / "Premium" */
    font-size: 32px;
    line-height: 120%;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Sorgt dafür, dass das erste Wort "Maturazeitung" elegant dünn (Light) dargestellt wird */
.detailinfos-card-2col-headline span:first-child {
    font-weight: 300 !important; /* Montserrat Light */
    text-transform: uppercase;
}

.detailinfos-card-2col-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
    color: rgba(255, 255, 255, 0.85);
}

/* Content-Body unterhalb des farbigen Headers */
.detailinfos-card-2col-body {
    padding: 40px 30px 24px 30px; 
    margin-top: -15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Feature-Liste mit Zebra-Streifen-Logik */
.detailinfos-card-2col-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    line-height: 150%;
    color: var(--meinmaturaball-darklila);
}

.detailinfos-card-2col-feature-list li {
    padding: 12px 15px 12px 30px;
    margin: 0;
    position: relative;
    border-radius: 6px;
}

/* Zebra-Effekt */
.detailinfos-card-2col-feature-list li:nth-child(even) {
    background-color: rgba(57, 64, 70, 0.10);
}

.detailinfos-card-2col-feature-list li::before {
    content: '•';
    color: var(--meinmaturaball-lila);
    position: absolute;
    left: 12px;
    top: 10px;
    font-weight: 700;
    font-size: 28px;
}

/* Unterer Tabellen-Bereich für die harten Fakten */
.detailinfos-card-2col-specs-wrapper {
    margin-top: auto;
    padding-top: 30px;
}

.detailinfos-card-2col-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
}

.detailinfos-card-2col-specs-table td {
    padding: 10px 0;
    border-bottom: 1px solid rgba(57, 64, 70, 0.1);
}

.detailinfos-card-2col-specs-table tr:last-child td {
    border-bottom: none;
}

.detailinfos-card-2col-specs-table td:first-child {
    color: var(--meinmaturaball-mittelgrau);
    text-align: left;
    font-weight: 500;
}

/* Rechte Spalte: Textfarbe auf euer meinmaturaball-lila umgestellt */
.detailinfos-card-2col-specs-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--meinmaturaball-lila);
}

/* ==========================================================================
   SECTION DESIGNSERVICE (BASIS-STYLING)
   ========================================================================== */

.section-designservice {
    background-color: var(--meinmaturaball-darklila);
    padding: 110px 0; /* Exakt 110px Padding wie besprochen */
    color: #ffffff;
}

/* FIX: Verhindert zusätzliche Abstände des Flex-Rasters nach unten */
.section-designservice .flexbox-2col {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   ZUSATZ-STYLES FÜR DIE ICONS IM DESIGN-SERVICE
   ========================================================================== */

/* Richtet Icon + Text im Header nebeneinander aus */
.designservice-flex-header {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left !important; /* Überschreibt das zentrierte Text-Align der oberen Boxen */
}

.designservice-header-text {
    flex-grow: 1;
}

/* Der quadratische Container für deine Icons */
.designservice-icon-container {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.designservice-icon-container img {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
}

/* ==========================================================================
   SECTION VORTEILE
   ========================================================================== */
   
.section-vorteile {
    background-color: var(--meinmaturaball-lila);
}

/* ==========================================================================
   BALLDRUCK UNTERSEITEN
   ========================================================================== */

.flexbox-col-product-main h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    margin: 25px 0 10px 0;
    text-transform: uppercase;
}

/* Der kleine Trenner links wird rein weiß für maximalen, edlen Kontrast */
.flexbox-col-product-section-divider {
    width: 40px;
    height: 2px;
    background-color: #ffffff;
    margin: 30px 0;
}

/* Die rechte Feature-Box bekommt ein tiefes, sattes Dunkelviolett/Blau für perfekten Kontrast zum Türkis */
.flexbox-col-product-features {
    background: var(--meinmaturaball-darklila); /* Knackiger, dunkler Kontrast-Körper */
    border: 1px solid rgba(7, 157, 146, 1.0);
    padding: 35px 30px;
    box-sizing: border-box;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.55); /* Gibt der Box Tiefe auf dem hellen Untergrund */
}

/* Der Titel innerhalb der rechten Box */
.flexbox-col-product-features h3 {
    color: #ffffff;
}

.flexbox-col-product-feature-item {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.flexbox-col-product-feature-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Die USP-Überschriften strahlen jetzt in einem hellen, elektrisierenden Cyan statt im beißenden Orange */
.flexbox-col-product-feature-item h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--meinmaturaball-tuerkis);
    margin: 0 0 8px 0;
    text-transform: uppercase;
}

.flexbox-col-product-feature-item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85); /* Etwas angehoben für perfekte Lesbarkeit auf Dunkel */
}

/* ==========================================================================
   PRODUCT GALLERY: 3-COLUMN RASTER (FIXED LEFT-ALIGN)
   ========================================================================== */

.flexbox-3col-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* ÄNDERUNG: Zwingt Elemente nach links */
    gap: 30px; 
    width: 100%;
}

.flexbox-3col-gallery-item {
    /* ÄNDERUNG: Berechnet die Breite für genau 3 Spalten inkl. Gaps */
    flex: 0 0 calc((100% - 60px) / 3); 
    max-width: calc((100% - 60px) / 3);
    position: relative;
    overflow: hidden;
    line-height: 0;
    box-sizing: border-box;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.flexbox-3col-gallery-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.flexbox-3col-gallery-item:hover .flexbox-3col-gallery-image {
    transform: scale(1.10);
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.breadcrumb-nav {
    width: 100%;
    margin-bottom: 40px;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline; /* Standardmäßig unterstrichen */
    font-weight: 300; /* Montserrat Light */
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #06857C; /* Dein Deep-Cyan Akzent */
    text-decoration: none; /* Unterstreichung verschwindet beim Hovern */
}

/* Das Trennzeichen via CSS injection */
.breadcrumb-item + .breadcrumb-item::before {
    content: '>';
    display: inline-block;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 300;
}

/* Der aktive, letzte Zustand (Produktseite selbst) */
.breadcrumb-item.active {
    color: #ffffff;
    font-weight: 600; /* Montserrat SemiBold */
}

/* ==========================================================================
   RESPONSIVE LAYOUT
   ========================================================================== */
   
@media (max-width: 1268px) {

    /* Galerie: 2 Spalten */
    .flexbox-3col-gallery-container {
        gap: 30px !important;
    }
    .flexbox-3col-gallery-item {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
    }
}   
   
@media (max-width: 1024px) {
    /* 1. Haupt-Layout: Flexbox-2col stapeln */
    .flexbox-2col {
        flex-wrap: wrap !important;
        gap: 30px !important;
    }
    .flexbox-col {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* 2. Produkt-Quicklinks: Stapelung korrigieren */
    .product-grid-quicklinks .flexbox-4-col-produktbutton {
        width: calc((100% - 16px) / 2) !important; /* 2 Spalten auf Tablet */
        max-width: calc((100% - 16px) / 2) !important;
        flex: 0 0 calc((100% - 16px) / 2) !important;
    }
	
	.detailinfos-main-headline { font-size: 32px; }
	.detailinfos-intro-text { font-size: 22px; }
	.detailinfos-card-2col-headline { font-size: 28px; }
	.detailinfos-card-2col-sub { font-size: 18px; }
}

@media (max-width: 600px) {
    /* 1. Produkt-Quicklinks: 1 Spalte auf Smartphone */
    .product-grid-quicklinks .flexbox-4-col-produktbutton {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

	.flexbox-3col-gallery-container {
        gap: 10px !important;
    }
    /* 2. Galerie: 1 Spalte auf Smartphone */
    .flexbox-3col-gallery-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
	
	.flexbox-4col-category { font-size: 20px; }	
	.flexbox-col-product-features h3 { font-size: 20px; }	
    
    /* 3. Feature-Box Padding reduzieren */
    .flexbox-col-product-features {
        padding: 25px 20px !important;
    }
	.detailinfos-main-headline { font-size: 24px; }
	.detailinfos-intro-text { font-size: 16px; }
	.detailinfos-card-2col-body { padding: 40px 16px 16px 16px; }
	.detailinfos-card-2col-header { padding: 32px 20px 28px 20px; clip-path: ellipse(120% 100% at 50% 0%); }
	.detailinfos-card-2col-headline { font-size: 22px; }
	.detailinfos-card-2col-sub  { font-size: 17px; }
	.detailinfos-card-2col-feature-list { font-size: 16px; }
	.flexbox-col-product-features p:last-of-type { margin-bottom: 0px !important; }
	.detailinfos-card-2col-specs-table { font-size: 16px; }
	.designservice-flex-header { align-items: flex-start; gap: 12px; }
}