/* ==========================================================================
   PERFEKT SYNCHRONISIERTES BIENENWABEN-GRID (SHAPE-OUTSIDE FIX)
   ========================================================================= */

.gestreift-waben-main {
    display: flex;
    justify-content: center;
    background-color: #0d0d0d;
    padding: 60px 20px;
    width: 100%;
    box-sizing: border-box;
    
    --s: 25vw;  
    --m: 1vw;    
    
    /* Die Frequenz einer vollen Doppelreihe */
    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
    /* NEU: Der exakte Versatz für die erste Reihe (Eckenhöhe der ersten Wabe) */
    --offset: calc(var(--s) * 1.1547 * 0.25); 
}

/* --- [ Treffsicher für gedrehte Handys ]---------------------------------- */
@media (min-width: 480px) and (max-width: 950px) and (orientation: landscape) {

    .gestreift-waben-main {
        --s: 20vw;  
        --m: 1vw;    
    }
}

/* ---[ kleine Geräte oder Hochformat ]------------------------------------- */
@media (min-width: 768px) and (orientation: portrait), (min-width: 951px) {

    .gestreift-waben-main {
        --s: 170px;  
        --m: 5px;    
    }
}

/* ---[ normaler Desktop ]-------------------------------------------------- */
@media (min-width: 1200px) {

    .gestreift-waben-main {
        --s: 170px;  
        --m: 5px;    
    }
}

.gestreift-waben-container {
    font-size: 0;
    width: 100%;
    /* Platz für genau 5 Waben in den ungeraden Reihen */
    max-width: calc((var(--s) + (var(--m) * 2)) * 5 + (var(--s) / 2)); 
    margin: 0 auto;
    position: relative;
}

/* DAS ZAHNRAD: Jetzt perfekt nach unten kalibriert */
.gestreift-waben-container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: var(--js-waben-height, 0px);
    
    /* KORREKTUR: Wir starten den ersten blockierenden Block (Zahn) erst 
       NACHDEM die erste Reihe ihre breiteste Stelle überschritten hat. */
    shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 3px),      
                   #000  0 var(--f));
}

/* DIE WABEN-ELEMENTE */
.gestreift-waben-container .waben-hex-item {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s) * 1.1547); 
    display: inline-block;
    font-size: initial;
    position: relative;
    overflow: hidden;
    vertical-align: top; 
    
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    
    /* Zieht die Reihen lückenlos zusammen */
    margin-bottom: calc(var(--m) - var(--s) * 0.2887); 
}

.gestreift-waben-container .waben-hex-item-tmp {
    left: 0;
    top: 157px;
    width: var(--s);
    margin: var(--m);
    margin-left: calc(-0.5*var(--s));
    height: calc(var(--s) * 1.1547); 
    display: inline-block;
    font-size: initial;
    position: absolute;
    overflow: hidden;
    vertical-align: top; 
    
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    
    /* Zieht die Reihen lückenlos zusammen */
    margin-bottom: calc(var(--m) - var(--s) * 0.2887); 
}

.gestreift-waben-container .waben-hex-item-big {
    opacity: 0.5;
    top: var(--m);
    left: calc(-0.5*var(--s));
    width: calc(3*var(--s) + 4*var(--m));
    height: calc(var(--s) * 1.1547 * 2.5 + 4*var(--m));
    margin: 0;
    display: inline-block;
    font-size: initial;
    position: absolute;
    overflow: hidden;
    vertical-align: top; 
    
    clip-path: polygon(
        33% 0%,     /* Oben links */
        67% 0%,     /* Oben rechts */
        83% 9.5%,
        83% 30.2%,   /* Rechts oben */
        100% 40.1%,
        100% 59.9%,   /* Rechts unten */
        83% 69.8%,
        83% 90.5%,
        67% 100%,   /* Unten rechts */
        51% 90.5%,
        49% 90.5%,
        33% 100%,   /* Unten links */
        0% 70.7%,     /* Links unten */
        0% 29.3%      /* Links oben */
    );

}

/* --- [ DESIGN & IMAGES ] --- */
.waben-hex-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #161617;
}

.waben-hex-item img {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55) grayscale(15%);
    transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.waben-hex-item:hover img,
.waben-hex-item.touch-active img {
    filter: brightness(1) grayscale(0%);
    transform: scale(1.05);
}

.waben-hex-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(13, 13, 13, 0.45);
    opacity: 0;
    padding: 30px 15px;
    text-align: center;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.waben-hex-item:hover .waben-hex-overlay,
.waben-hex-item.touch-active .waben-hex-overlay {
    opacity: 1;
}

.waben-hex-overlay h2 {
    font-family: 'Cormorant Garamond', serif;
    color: #dfcfb7;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 4px 0;
}

.waben-hex-overlay span {
    font-family: 'Montserrat', sans-serif;
    color: #cbcbc0;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Styling für die Navigationswaben */
.waben-pagination-item a {
    background-color: #121212; /* Etwas dunkler als normale Waben */
    border: 1px solid calc(var(--dfcfb7) + 20); /* Optional feine Kontur */
}

.waben-pagination-item .waben-hex-overlay {
    opacity: 1; /* Pfeile immer anzeigen, nicht nur bei Hover */
    background: transparent;
}

.waben-pagination-item:hover .waben-pagination-bg {
    background-color: #1a1a1b;
}

.arrow-icon {
    font-size: 2rem !important;
    color: #dfcfb7;
    margin-bottom: 5px;
}


/* --- [ GESTALTUNG DER PAGINATION-WABEN ] --- */

/* Gemeinsame Basis für die Navigationswaben */
.waben-pagination-kombi,
.waben-pagination-start {
    background: #111112;
    box-sizing: border-box;
}

/* Stil für die allererste "Weiter"-Wabe auf Seite 1 */
.waben-pagination-start a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border: 1px solid rgba(223, 207, 183, 0.15);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.waben-pagination-start:hover a {
    background-color: #161618;
    border-color: rgba(223, 207, 183, 0.4);
}

.waben-start-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.waben-start-content .start-total {
    font-family: 'Montserrat', sans-serif;
    color: #cbcbc0;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.waben-start-content .arrow-icon {
    font-family: 'Cormorant Garamond', serif;
    color: #dfcfb7;
    font-size: 2rem;
    margin: 5px 0;
    font-weight: 300;
}

.waben-start-content .start-label {
    font-family: 'Cormorant Garamond', serif;
    color: #dfcfb7;
    font-size: 1.1rem;
    font-style: italic;
}