:root {
    --pitcher-box: 1280px;
    --pitcher-header-height: 84px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.pitcher-shell {
    width: min(calc(100% - 40px), var(--pitcher-box));
    margin-inline: auto;
}

.pitcher-section {
    width: 100%;
    padding-block: clamp(4.5rem, 8vw, 7rem);
}

.pitcher-section--dark {
    background: var(--wp--preset--color--surface);
}

.pitcher-section--black {
    background: var(--wp--preset--color--black);
}

/* ==========================================================================
   Header
   ========================================================================== */
.pitcher-site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    background: rgba(8, 8, 8, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

/* URSACHE des Boxed-Overlay-Bugs: backdrop-filter (wie transform/filter/
   perspective/contain) erzeugt einen neuen Containing Block für
   position:fixed-Nachfahren. Das geöffnete Mobile-Menü liegt als
   position:fixed-Element innerhalb von .pitcher-site-header und wurde
   dadurch auf dessen Padding-Box statt auf den echten Viewport bezogen.
   Fix: backdrop-filter wird genau dann entfernt, wenn WordPress das Menü
   öffnet (html.has-modal-open) -- der Header ist während der geöffneten
   Vollbild-Overlay ohnehin nicht sichtbar, der optische Effekt geht nicht
   verloren. */
html.has-modal-open .pitcher-site-header {
    backdrop-filter: none;
}

.pitcher-site-header .wp-block-group {
    min-height: var(--pitcher-header-height);
    align-items: center;
    transition: min-height .3s ease;
}

.pitcher-site-header .wp-block-site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pitcher-site-header .wp-block-site-logo img {
    max-height: 40px;
    width: auto;
    transition: max-height .3s ease;
}

/* Startseite: Header schwebt transparent über dem Hero und wird erst beim
   Scrollen fest/dunkel -- auf allen anderen Seiten bleibt der Header wie
   zuvor durchgehend solide (Struktur/Verhalten dort unverändert). */
body.home .pitcher-site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
}

body.home .pitcher-site-header.is-scrolled {
    background: rgba(8, 8, 8, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.pitcher-site-header.is-scrolled .wp-block-group {
    min-height: calc(var(--pitcher-header-height) - 20px);
}

.pitcher-site-header.is-scrolled .wp-block-site-logo img {
    max-height: 32px;
}

/* Sichtbarer Fokuszustand für Tastaturbedienung (Logo-Link, Menülinks,
   Toggle-/Close-Button) -- ohne die native Navigation-Funktionalität
   anzufassen. */
.pitcher-site-header a:focus-visible,
.pitcher-site-header button:focus-visible {
    outline: 2px solid var(--wp--preset--color--white);
    outline-offset: 3px;
}

/* ==========================================================================
   Desktop navigation (>= 600px -- WordPress' eigener, fest im Navigation-
   Block einprogrammierter Umschaltpunkt, siehe wp-includes/blocks/
   navigation/style.min.css; bewusst nicht verschoben, um den nativen Block
   nicht durch einen eigenen Renderer zu ersetzen)
   ========================================================================== */
.pitcher-site-header .wp-block-navigation__container {
    gap: clamp(1.625rem, 2.4vw, 2.125rem); /* ~26-34px zwischen Menüpunkten */
}

.pitcher-site-header .wp-block-navigation-item__content {
    padding-block: 0.4rem;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 800;
    font-size: 0.9rem; /* ~14.4px */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color .22s ease, border-color .22s ease;
}

/* ==========================================================================
   Active states
   ========================================================================== */
.pitcher-site-header .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
}

.pitcher-site-header .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* Optionaler CTA: letzter Menüpunkt ("Veranstaltungen") als roter Button. */
.pitcher-site-header .pitcher-nav-cta .wp-block-navigation-item__content {
    padding: 0.55rem 1.1rem;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    border-bottom-color: transparent;
    border-radius: 2px;
}

.pitcher-site-header .pitcher-nav-cta .wp-block-navigation-item__content:hover,
.pitcher-site-header .pitcher-nav-cta .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--wp--preset--color--white);
    background: #ef2a31;
    border-bottom-color: transparent;
}

/* ==========================================================================
   Mobile toggle (Hamburger-Button, < 600px)
   Größe/Sichtbarkeit werden ausschließlich im gleichnamigen @media-Block
   unter "Mobile overlay" gesetzt (48x48px), um Spezifitätskonflikte mit
   einer zweiten, unskopierten Regel zu vermeiden -- hier nur die Farbe,
   die unabhängig vom Breakpoint gilt.
   ========================================================================== */
.pitcher-site-header .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Mobile overlay (< 600px)
   Alle Regeln in diesem Block gelten ausschließlich unterhalb des
   nativen 600px-Umschaltpunkts des Navigation-Blocks (siehe
   wp-includes/blocks/navigation/style.min.css) -- Desktop bleibt unberührt.
   ========================================================================== */
@media (max-width: 600px) {
    /* Vollbild-Overlay: unabhängig vom 1280px-Content-Container und vom
       WordPress-Root-Padding direkt über den gesamten Viewport gelegt.
       !important ist hier bewusst und begründet gesetzt: WordPress' eigene
       Core-Regeln für .is-menu-open verwenden selbst !important auf
       konkurrierenden Eigenschaften; ohne eigenes !important auf den
       geometriekritischen Properties (position/inset/Breite/Höhe/Margin)
       wäre der Sieg in der Kaskade nicht zuverlässig garantiert. */
    .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000;

        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0;

        background: #080808;
        color: #fff;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .wp-block-navigation__responsive-dialog {
        width: 100%;
        min-height: 100%;
        margin: 0;
    }

    .wp-block-navigation__responsive-container-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        min-height: 100dvh;

        padding:
            calc(env(safe-area-inset-top) + 78px)
            max(24px, env(safe-area-inset-right))
            calc(env(safe-area-inset-bottom) + 36px)
            max(24px, env(safe-area-inset-left));
    }

    /* Menüeinträge: linksbündig, groß, volle Breite -- neutralisiert die
       vom Desktop geerbten Regeln (justify-content:flex-end, text-align:
       right, nowrap, 14px), die sonst rechtsbündig/klein im Overlay
       hängen bleiben würden. */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        gap: 0;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: 100%;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 64px;
        padding: 14px 0;

        color: #fff;
        font-size: clamp(24px, 7vw, 32px);
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 0.01em;
        text-align: left;
        white-space: normal;

        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .wp-block-navigation__responsive-container .pitcher-nav-cta {
        width: auto;
        margin-top: 1rem;
        border-bottom: none;
    }

    .wp-block-navigation__responsive-container .pitcher-nav-cta .wp-block-navigation-item__content {
        display: inline-flex;
        width: auto;
        min-height: auto;
        padding: 0.7rem 1.3rem;
        border-bottom: none;
        border-radius: 2px;
    }

    /* Öffnen-/Schließen-Button: 48x48px, Schließen-Button fest oben rechts,
       überlagert nie Logo oder Menütext. */
    .wp-block-navigation__responsive-container-open {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
    }

    .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: max(16px, env(safe-area-inset-top));
        right: max(18px, env(safe-area-inset-right));

        display: grid;
        place-items: center;

        width: 48px;
        height: 48px;
        padding: 0;

        color: #fff;
        z-index: 2;
    }

    /* Untermenüs im Offcanvas: kein horizontaler Überlauf, klar erkennbare
       Einrückung -- greift nur, falls dem Menü künftig Unterpunkte
       hinzugefügt werden. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        max-width: 100%;
        padding-left: 1.25rem;
    }
}

/* WordPress setzt <html class="has-modal-open">, sobald das mobile Menü
   geöffnet ist -- Scrollen der Hintergrundseite unterbinden, ohne eine
   feste body-Breite zu setzen (vermeidet Layoutsprünge). */
html.has-modal-open,
html.has-modal-open body {
    overflow: hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 599px) {
    :root {
        --pitcher-header-height: 70px; /* ~68-72px mobiler Header */
    }

    .pitcher-site-header .wp-block-site-logo img {
        max-height: 32px;
    }
}

.pitcher-hero {
    min-height: calc(92vh - var(--pitcher-header-height));
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 24%, rgba(210, 31, 38, 0.34), transparent 30%),
        linear-gradient(112deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.68) 58%, rgba(0, 0, 0, 0.9)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 9px);
}

.pitcher-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    z-index: -1;
    background: linear-gradient(transparent, var(--wp--preset--color--background));
}

.pitcher-hero__content {
    max-width: 960px;
}

.pitcher-eyebrow {
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--display);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.pitcher-display {
    font-size: var(--wp--preset--font-size--hero);
    margin: 0;
}

.pitcher-lead {
    max-width: 680px;
    color: var(--wp--preset--color--muted);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.pitcher-button-secondary .wp-block-button__link {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.55);
}

.pitcher-button-secondary .wp-block-button__link:hover {
    color: #111;
    background: #fff;
    border-color: #fff;
}

.wp-block-button__link {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

.pitcher-section-title {
    font-size: clamp(2.7rem, 6vw, 5.2rem);
    margin-top: 0;
}

.pitcher-section-title::after {
    content: "";
    display: block;
    width: 72px;
    height: 5px;
    margin-top: 1.2rem;
    background: var(--wp--preset--color--accent);
}

.pitcher-split {
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.pitcher-card {
    height: 100%;
    padding: 1.5rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--line);
}

.pitcher-photo-placeholder {
    min-height: 460px;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
    background:
        linear-gradient(140deg, rgba(210, 31, 38, .22), transparent 45%),
        repeating-linear-gradient(45deg, #18181a 0 12px, #111113 12px 24px);
    border: 1px solid var(--wp--preset--color--line);
}

.pitcher-photo-placeholder strong {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.6rem;
    letter-spacing: .08em;
}

.pitcher-feature-grid {
    gap: 1rem;
}

.pitcher-feature {
    padding: 1rem;
    background: #111;
    border: 1px solid var(--wp--preset--color--line);
}

.pitcher-feature strong {
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--display);
}

.pitcher-event-section .wp-block-shortcode {
    margin-top: 2.5rem;
}

.pitcher-quote {
    text-align: center;
    background:
        linear-gradient(rgba(0, 0, 0, .74), rgba(0, 0, 0, .88)),
        radial-gradient(circle at center, rgba(210, 31, 38, .35), transparent 52%),
        #111;
}

.pitcher-quote h2 {
    font-size: clamp(3rem, 8vw, 7rem);
    margin-bottom: .5rem;
}

.pitcher-gallery .wp-block-image {
    overflow: hidden;
    min-height: 240px;
    background: #151517;
    border: 1px solid var(--wp--preset--color--line);
}

.pitcher-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.pitcher-gallery .wp-block-image:hover img {
    transform: scale(1.04);
}

.pitcher-cta {
    padding-block: clamp(3.5rem, 7vw, 5rem);
    background: var(--wp--preset--color--accent);
}

.pitcher-cta .pitcher-section-title::after {
    background: #fff;
}

.pitcher-accordion details {
    margin-bottom: .75rem;
    padding: 1rem 1.2rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--line);
}

.pitcher-accordion summary {
    cursor: pointer;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 900;
}

.pitcher-footer {
    background: #050505;
    border-top: 1px solid var(--wp--preset--color--line);
}

.pitcher-footer a {
    text-decoration: none;
}

.pitcher-footer a:hover {
    color: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
    :root {
        --pitcher-header-height: 72px;
    }

    .pitcher-shell {
        width: min(calc(100% - 28px), var(--pitcher-box));
    }

    .pitcher-hero {
        min-height: 76vh;
    }

    .pitcher-split {
        flex-direction: column;
    }

    .pitcher-split > * {
        width: 100% !important;
    }

    .pitcher-photo-placeholder {
        min-height: 340px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* 1.3.0 – Redesign "legendärer Rockclub": echtes Konzertfoto folgt später,
   bis dahin ein hochwertiger, rein atmosphärischer dunkler Hintergrund
   (kein Platzhaltertext, kein Rahmen). Sobald ein Bühnen-/Publikumsfoto in
   der Mediathek liegt, genügt es, es hier als background-image zu setzen
   -- Overlay-Verlauf (80% -> 40%) bleibt unverändert korrekt. */
.pitcher-home-hero {
    min-height: clamp(560px, 90vh, 900px);
    background-color: #0b0b0c;
    background-position: center;
    background-size: cover;
    background-image:
        radial-gradient(circle at 82% 20%, rgba(210, 31, 38, 0.22), transparent 42%),
        radial-gradient(circle at 15% 85%, rgba(210, 31, 38, 0.1), transparent 50%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 10px);
}

/* Overlay: ~80% schwarz links, ~40% rechts, damit ein echtes Hintergrundfoto
   dort sichtbar bleibt, sobald eines gesetzt ist. */
.pitcher-home-hero .wp-block-cover__background {
    background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.4) 100%) !important;
    opacity: 1 !important;
}

.pitcher-home-hero__inner {
    padding-block: clamp(4.5rem, 10vw, 8rem);
    text-align: left;
    animation: pitcher-fade-up .8s ease both;
}

.pitcher-home-title {
    max-width: 780px;
    margin: 0;
    font-size: var(--wp--preset--font-size--hero);
    line-height: .98;
    text-align: left;
}

@keyframes pitcher-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.pitcher-home-lead {
    max-width: 760px;
    margin-top: 1.7rem;
    color: #ddd;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.pitcher-home-section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.pitcher-home-events {
    background: var(--wp--preset--color--background);
}

.pitcher-home-about {
    background: var(--wp--preset--color--surface);
}

.pitcher-home-directions {
    background: #111113;
}

.pitcher-home-eyebrow {
    margin-bottom: .6rem;
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--display);
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.pitcher-home-heading {
    margin-top: 0;
    font-size: clamp(2.2rem, 4vw, 3rem);
}

/* Zweispaltiger Sektionskopf: links große Überschrift, rechts kurzer
   Einleitungstext -- für "Nächste Veranstaltungen" und "Über das Pitcher". */
.pitcher-home-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.pitcher-home-section-header .pitcher-home-heading {
    flex: 1 1 420px;
    margin-bottom: 0;
}

.pitcher-home-section-header__intro {
    flex: 1 1 320px;
    max-width: 420px;
    margin: 0;
    color: var(--wp--preset--color--muted);
}

@media (max-width: 780px) {
    .pitcher-home-section-header {
        align-items: flex-start;
    }
}

.pitcher-feature-cards {
    gap: 1rem;
    margin-top: 2.5rem;
}

.pitcher-home-card {
    position: relative;
    min-height: 190px;
    padding: 1.6rem;
    transition: transform .25s ease, box-shadow .25s ease;
    background: #111113;
    border: 1px solid var(--wp--preset--color--line);
    border-top: 4px solid var(--wp--preset--color--accent);
}

.pitcher-home-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .38);
    border-color: var(--wp--preset--color--accent);
}

.pitcher-home-card__number {
    margin: 0 0 .75rem;
    font-family: var(--wp--preset--font-family--display);
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(210, 31, 38, .4);
}

.pitcher-home-card__icon {
    margin-right: .5rem;
    font-size: 1.3rem;
}

.pitcher-home-card h3 {
    margin-top: 0;
    font-size: 1.45rem;
}

.pitcher-home-card p {
    color: var(--wp--preset--color--muted);
}

.pitcher-home-directions__grid {
    gap: clamp(2rem, 6vw, 5rem);
}

.pitcher-home-address-panel {
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--wp--preset--color--accent);
}

.pitcher-home-address-panel h3 {
    margin-top: 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.pitcher-home-final-cta {
    padding-block: clamp(4rem, 8vw, 7rem);
    text-align: center;
    background: var(--wp--preset--color--accent);
}

.pitcher-home-final-cta .pitcher-home-heading {
    margin-bottom: .8rem;
}

.pitcher-home-final-cta .wp-block-buttons {
    justify-content: center;
}

@media (max-width: 780px) {
    .pitcher-home-hero {
        min-height: 680px;
    }

    .pitcher-home-hero .wp-block-cover__background {
        background: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.9)) !important;
    }

    .pitcher-feature-cards {
        flex-direction: column;
    }

    .pitcher-feature-cards > .wp-block-column {
        flex-basis: 100% !important;
    }

    .pitcher-home-directions__grid {
        flex-direction: column;
    }

    .pitcher-home-directions__grid > .wp-block-column {
        flex-basis: 100% !important;
    }
}