/* ==========================================
   Main 150
========================================== */

.main-150 {
    padding-top: 0 !important;

    /* 👉 +30% Basis */
    font-size: 1.3rem;

    /* Typo-Skala (ebenfalls ~30% größer) */
    --wp--preset--font-size--x-small: 1.15rem;
    --wp--preset--font-size--small: 1.3rem;
    --wp--preset--font-size--medium: 1.3rem;   /* Basis */
    --wp--preset--font-size--large: 1.95rem;
    --wp--preset--font-size--x-large: 2.9rem;
    --wp--preset--font-size--xx-large: clamp(2.9rem, 6vw, 4.5rem);
    --wp--preset--font-size--xxx-large: clamp(3.2rem, 8vw, 6.5rem);
}

/* Text */
.main-150 p {
    font-size: inherit;
    line-height: 1.6;
    margin: 0 auto 1.2em;
}

/* Desktop leicht mehr */
@media (min-width: 768px) {

    .main-150 {
        font-size: 1.35rem; /* minimal größer */
    }
}

.section-150-header {
    background-color: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: clamp(0.5rem, 2vw, 1rem);
    padding-bottom: clamp(0.5rem, 2vw, 1rem);
}

/* ==========================================
    LAYOUT FIX: Menü links, Logo mittig
========================================== */

.section-150-header .section-150-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(12px, 2vw, 24px);
}


/* Logo exakt mittig */
.section-150-header .header-150-image-desktop,
.section-150-header .header-150-image-mobile {
    grid-column: 2;
    justify-self: center;
    margin: 0;
}

/* rechter Platzhalter für echtes Zentrieren */
.section-150-header .section-150-header-inner::after {
    content: "";
    grid-column: 3;
}

/* Desktop Logo */
.section-150-header .header-150-image-desktop {
    width: clamp(260px, 38vw, 700px);
}

.section-150-header .header-150-image-desktop .theme-svg > svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Logo initial aus */
.section-150-header .header-150-image-mobile {
    display: none;
}

/* ==========================================
    Mobile
========================================== */

@media (max-width: 900px) {

    .section-150-header .section-150-header-inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .section-150-header .header-150-image-desktop {
        display: none;
    }

    .section-150-header .header-150-image-mobile {
        display: block;
        width: min(220px, 100%);
    }

    .section-150-header .header-150-image-mobile .theme-svg > svg {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* ==========================================
   Burger Menü Größe FIX (Desktop + Mobile)
========================================== */
.wp-block-navigation__responsive-container-open {
    border-radius: 6px;
    transition: background 0.2s ease;
    background: rgba(255,255,255,0.1);
}

.wp-block-navigation__responsive-container-open:hover {
    background-color: var(--wp--preset--color--contrast);
}

/* Icon (die 3 Linien / SVG) */
.wp-block-navigation__responsive-container-open svg {
    width: clamp(35px, 5vw, 70px);
    height: clamp(35px, 5vw, 70px);
}


/* ==========================================
   150 JAHRE SECTION SPACING
========================================== */

@media (max-width: 1200px) {
    .section-150-header .section-150-header-inner,
    .section-150-counter > .wp-block-group,
    .section-150-festprogramm > .wp-block-group,
    .section-150-festausschuss > .wp-block-group,
    .section-150-festdamen > .wp-block-group,
    .section-150-festplatz > .wp-block-group,
    .section-150-sponsoren > .wp-block-group,
    .section-150-footer .section-150-footer-inner {
        padding-inline: clamp(12px, 2.8vw, 24px);
    }
}


.section-150-counter {
    margin-block-start: 0 !important;
    padding-block: clamp(2rem, 10vw, 4rem);
}

.section-150-festprogramm,
.section-150-festausschuss,
.section-150-festdamen,
.section-150-festplatz,
.section-150-sponsoren {
    padding-block: clamp(1rem, 8vw, 3rem);
}

/* iOS landscape: alignfull wirklich bis zum Viewport-Rand ziehen */
.section-150-counter.alignfull,
.section-150-festprogramm.alignfull,
.section-150-festausschuss.alignfull,
.section-150-festdamen.alignfull,
.section-150-festplatz.alignfull,
.section-150-sponsoren.alignfull {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Neuere Viewport-Units vermeiden iOS-Viewport-Spruenge */
@supports (width: 100dvw) {
    .section-150-counter.alignfull,
    .section-150-festprogramm.alignfull,
    .section-150-festausschuss.alignfull,
    .section-150-festdamen.alignfull,
    .section-150-festplatz.alignfull,
    .section-150-sponsoren.alignfull {
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
    }
}

/* ==========================================
   COUNTER SECTION
========================================== */

.section-150-counter {
    background-image: var(--bg-section-150-counter);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: cover;
    padding-top: clamp(1rem, 5vw, 2rem);
    padding-left: clamp(0.5rem, 5vw, 1rem);
    padding-right: clamp(0.5rem, 5vw, 1rem);
    color: var(--wp--preset--color--white);
    margin-block-start: 0 !important;
}

.section-150-counter > .wp-block-group {
    position: relative;
    z-index: 2;
    padding-right: clamp(0, 0.1vw, var(--wp--style--root--padding-right));
    padding-left: clamp(0, 0.1vw, var(--wp--style--root--padding-left));
}

.section-150-counter > .wp-block-group > hr {
    width: 100%;
    color: var(--wp--preset--color--white);
}

.section-150-counter > .wp-block-group > p {
    text-align: justify;
}

/* Counter Layout */

.counter-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.counter-item {
    text-align: center;
    position: relative;
    font-size: 2rem;
}

.counter-item:not(:last-child)::after {
    content: ":";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: 700;
}

/* ==========================================
   COUNTER LABELS MOBILE VERKÜRZEN
========================================== */

@media (max-width: 767px) {

    .counter-item small {
        font-size: 0; /* Originaltext ausblenden */
    }

    .counter-item:nth-child(1) small::after {
        content: "T";
        font-size: 0.7rem;
    }

    .counter-item:nth-child(2) small::after {
        content: "Std";
        font-size: 0.7rem;
    }

    .counter-item:nth-child(3) small::after {
        content: "Min";
        font-size: 0.7rem;
    }

    .counter-item:nth-child(4) small::after {
        content: "Sek";
        font-size: 0.7rem;
    }

}