/* Kopfzeile: Wortmarke links, Menue rechts.

   Die vier Menuepunkte stehen am Desktop offen in der Kopfzeile.
   Der Punkt "Aktivitaeten" klappt ein schmales Band direkt unter
   der Kopfzeile auf, in dem alle Aktivitaeten verlinkt sind.
   Auf schmalen Bildschirmen uebernimmt ein Burger-Knopf.

   Die Grundfarbe der Kopfzeile kommt aus dem Site Editor und
   steht als Inline-Stil am Element. Diese Datei legt deshalb nur
   einen Verlauf als background-image darueber – der ueberlagert
   die Inline-Farbe, ohne mit ihr zu streiten, und braucht kein
   !important.

   WIE DIE KOPFZEILE ERKANNT WIRD
   Jede Regel nennt zwei Selektoren:

     header.wp-block-template-part          das <header>-Element
     .wp-block-template-part:has(.jf-nav)   irgendein Element,
                                            das unsere Navigation
                                            enthaelt

   Grund: Welches Tag und welche Klassen der Template-Teil bekommt,
   entscheidet der Site Editor - bei einer selbst gebauten Kopfzeile
   ist es nicht zwingend ein <header>. Der zweite Selektor erkennt
   ihn stattdessen an seinem Inhalt und greift in jedem Fall. */


/* ---------------------------------------------------------------
 * KOPFZEILE
 * --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   AUFBAU DER KOPFZEILE  

   <header class="wp-block-template-part">      transparent!
       <div class="wp-block-group ..."          <- traegt die Farbe
            style="background-color:#5b818f;
                   padding-top:var(--wp--preset--spacing--30);
                   padding-bottom:var(--wp--preset--spacing--30)">

   Entscheidend: Die Farbe sitzt auf der inneren Gruppe, nicht am
   <header>. Alles, was dem <header> an Innenabstand gegeben wird,
   erscheint deshalb als weisser Streifen ober- und unterhalb des
   farbigen Bandes.

   Daraus folgt die Aufteilung:
     <header>        keine Abstaende, traegt nur Lage und Goldlinie
     innere Gruppe   Farbe, Verlauf und die Hoehe der Kopfzeile
   --------------------------------------------------------------- */

header.wp-block-template-part,
.wp-block-template-part:has(.jf-nav) {
    position: relative;
    z-index: 300;

    /* Keine eigenen Abstaende - sonst weisse Streifen. */
    padding-block: 0 !important;
    margin-block: 0 !important;
}

.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:has(.jf-nav) {
    margin-block-start: 0 !important;
}

/* Der Block direkt darunter rueckt buendig an. */
header.wp-block-template-part + *,
.wp-block-template-part:has(.jf-nav) + * {
    margin-block-start: 0 !important;
}

.wp-site-blocks {
    padding-top: 0 !important;
}


/* Die innere Gruppe traegt Farbe, Verlauf und Hoehe.

   STELLSCHRAUBEN fuer die Hoehe:
     padding-block hier    ... Luft ober- und unterhalb
     max-height am Logo    ... Groesse des Zeichens
   Das etwas groessere Logo und 12px Innenabstand ergeben eine
   rund 15 Prozent hoehere, weiterhin kompakte Kopfzeile. */

header.wp-block-template-part > .wp-block-group,
.wp-block-template-part:has(.jf-nav) > .wp-block-group {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    /* Verlauf ueber der Farbe aus dem Site Editor - als
       background-image, damit er die Inline-Farbe ueberlagert,
       ohne mit ihr zu streiten. Oben etwas Licht, nach unten
       tiefer: dasselbe Prinzip wie in der Fusszeile, nur in
       umgekehrter Richtung.

       AUSSCHALTER: Solange die Logo-Datei den alten Kopfzeilenton
       #5b818f fest eingebacken hat, zeichnet sich um das Logo ein
       helleres Rechteck ab - die Datei bleibt flach, waehrend der
       Verlauf ringsum dunkler wird. Bis das Logo einen
       durchsichtigen Hintergrund hat, kann der Verlauf hier mit
       einer Zeile stillgelegt werden:

           --jf-kopf-verlauf: none;
    */
    --jf-kopf-verlauf: radial-gradient( 110% 160% at 12% -30%, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0) 62% ), linear-gradient( 180deg, rgb(255 255 255 / 6%) 0%, rgb(18 35 42 / 6%) 55%, rgb(18 35 42 / 20%) 100% );
    --jf-kopf-verlauf: none;
    background-image: var(--jf-kopf-verlauf);
}

/* Tieferliegende Gruppen bringen keine eigene Hoehe mit. */
header.wp-block-template-part .wp-block-group .wp-block-group,
.wp-block-template-part:has(.jf-nav) .wp-block-group .wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Feine Goldlinie an der Unterkante - Gegenstueck zur Linie an
   der Oberkante der Fusszeile. Sie laeuft in die andere Richtung
   aus, damit Kopf und Fuss die Seite wie eine Klammer fassen. */

header.wp-block-template-part::after,
.wp-block-template-part:has(.jf-nav)::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    height: 2px;

    background: linear-gradient(
        270deg,
        var(--jf-gold) 0%,
        rgb(219 197 143 / 25%) 45%,
        rgb(219 197 143 / 0) 100%
    );
}


/* Das Logo. Breit adressiert, weil der Site Editor entscheidet, ob
   es als Bild-Block, Website-Logo-Block oder klassisches
   Custom-Logo im Template steckt. */

header.wp-block-template-part .wp-block-site-logo img,
header.wp-block-template-part .wp-block-image img,
header.wp-block-template-part .custom-logo,
header.wp-block-template-part figure img,
.wp-block-template-part:has(.jf-nav) .wp-block-site-logo img,
.wp-block-template-part:has(.jf-nav) .wp-block-image img,
.wp-block-template-part:has(.jf-nav) .custom-logo,
.wp-block-template-part:has(.jf-nav) figure img {
    max-height: 115px !important;
    width: auto !important;
    height: auto !important;
    transition: max-height 0.3s var(--jf-ease);
}

header.wp-block-template-part figure,
.wp-block-template-part:has(.jf-nav) figure {
    margin-block: 0 !important;
}


/* ---------------------------------------------------------------
 * NAVIGATION
 * --------------------------------------------------------------- */

.jf-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    /* Das Menue steht in derselben Zeile wie die Wortmarke, ganz
       rechts und mit deutlichem Abstand zum Zeichen. */
    margin-left: auto;
    padding-left: clamp(32px, 6vw, 96px);

    min-width: 0;
    flex: 0 0 auto;
}

/* Kopfzeile in einer Zeile halten und das Aufklappmenue nicht
   am Rand des Containers abschneiden. */
header .wp-block-group.is-layout-flex {
    flex-wrap: nowrap;
}

header.wp-block-template-part,
.wp-block-template-part:has(.jf-nav),
header .wp-block-group {
    overflow: visible;
}

/* WordPress verpackt Shortcode-Ausgaben gern in <p>. */
.jf-nav p,
.jf-band p {
    display: contents !important;
}

.jf-nav br,
.jf-band br {
    display: none !important;
}


/* Menueliste */

.jf-nav-liste {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.2vw, 34px);

    margin: 0;
    padding: 0;

    list-style: none;
}

.jf-nav-punkt {
    margin: 0;
    padding: 0;
}

/* Punkte und aufklappender Knopf sehen gleich aus */
.jf-nav-liste > li > a,
.jf-nav-aufklapp {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 2px;

    border: 0;
    background: none;

    color: var(--jf-text-hell);

    font-family: var(--jf-schrift);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition: color 0.2s var(--jf-ease);
}

/* Feine Linie, die beim Ueberfahren von links einwaechst */
.jf-nav-liste > li > a::after,
.jf-nav-aufklapp::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 2px;

    width: 100%;
    height: 2px;

    background: var(--jf-gold);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.25s var(--jf-ease);
}

.jf-nav-liste > li > a,
.jf-nav-aufklapp {
    position: relative;
}

.jf-nav-liste > li > a:hover,
.jf-nav-liste > li > a:focus-visible,
.jf-nav-aufklapp:hover,
.jf-nav-aufklapp:focus-visible {
    color: var(--jf-gold);
}

.jf-nav-liste > li > a:hover::after,
.jf-nav-liste > li > a:focus-visible::after,
.jf-nav-aufklapp:hover::after,
.jf-nav-aufklapp:focus-visible::after,
.jf-nav-liste > li > a[aria-current="page"]::after {
    transform: scaleX(1);
}

.jf-nav-liste > li > a[aria-current="page"] {
    color: var(--jf-gold);
}


/* Pfeil am Punkt "Aktivitaeten" */

.jf-nav-pfeil {
    width: 8px;
    height: 8px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: translateY(-2px) rotate(45deg);

    transition: transform 0.25s var(--jf-ease);
}

.jf-nav-aufklapp[aria-expanded="true"] {
    color: var(--jf-gold);
}

.jf-nav-aufklapp[aria-expanded="true"] .jf-nav-pfeil {
    transform: translateY(1px) rotate(-135deg);
}

.jf-nav-aufklapp[aria-expanded="true"]::after {
    transform: scaleX(1);
}


/* Hinweis "Entwurf" / "fehlt" – nur fuer angemeldete Redakteure */

.jf-nav-hinweis {
    padding: 2px 6px;

    border-radius: 3px;
    background: rgb(255 255 255 / 22%);

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * AUFKLAPPLISTE MIT DEN AKTIVITAETEN
 *
 * Sie haengt unter dem Punkt "Aktivitaeten", liegt ueber dem
 * Seiteninhalt und verschiebt ihn nicht. Alle Eintraege stehen
 * untereinander; ab zwoelf Zeilen scrollt die Liste in sich.
 * --------------------------------------------------------------- */

.jf-nav-punkt-band {
    position: relative;
}

.jf-band {
    /* Hoehe einer Zeile – daraus ergibt sich, ab wann gescrollt
       wird. Zwoelf Zeilen passen ohne Scrollbalken. */
    --jf-band-zeile: 40px;

    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 290;

    width: 292px;
    max-width: calc(100vw - 2 * var(--jf-rand));

    max-height: calc(12 * var(--jf-band-zeile) + 16px);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 8px;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            180deg,
            var(--jf-kopf-mitte) 0%,
            var(--jf-kopf-tief) 100%
        );

    box-shadow: 0 20px 40px rgb(18 35 42 / 34%);

    /* Ein dezenter Scrollbalken, der zum dunklen Grund passt */
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 32%) transparent;

    animation: jf-band-auf 0.22s var(--jf-ease);
}

.jf-band::-webkit-scrollbar {
    width: 8px;
}

.jf-band::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 30%);
    border-radius: 999px;
}

@keyframes jf-band-auf {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .jf-band { animation: none; }
}

.jf-band-liste {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    list-style: none;
}

.jf-band-liste li {
    margin: 0;
}

.jf-band-liste a {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: var(--jf-band-zeile);
    padding: 8px 10px;

    border-radius: 6px;

    color: var(--jf-text-hell);

    font-family: var(--jf-schrift);
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-decoration: none;
    text-transform: none;
    white-space: normal;

    transition:
        background 0.18s var(--jf-ease),
        color 0.18s var(--jf-ease);
}

.jf-band-liste a:hover,
.jf-band-liste a:focus-visible {
    background: rgb(255 255 255 / 12%);
    color: var(--jf-gold);
}

.jf-band-liste a[aria-current="page"] {
    color: var(--jf-gold);
}


/* ---------------------------------------------------------------
 * BURGER-KNOPF – nur auf schmalen Bildschirmen
 * --------------------------------------------------------------- */

.jf-nav-burger {
    display: none;
    align-items: center;
    gap: 10px;

    padding: 9px 16px;

    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);

    color: var(--jf-text-hell);

    font-family: var(--jf-schrift);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.2s var(--jf-ease),
        border-color 0.2s var(--jf-ease);
}

.jf-nav-burger:hover,
.jf-nav-burger:focus-visible {
    background: rgb(255 255 255 / 18%);
    border-color: var(--jf-gold);
}

.jf-nav-striche {
    display: grid;
    gap: 3px;
}

.jf-nav-striche span {
    display: block;

    width: 17px;
    height: 2px;

    background: currentColor;
    border-radius: 2px;

    transition: transform 0.25s var(--jf-ease), opacity 0.2s;
}

.jf-nav-burger[aria-expanded="true"] .jf-nav-striche span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.jf-nav-burger[aria-expanded="true"] .jf-nav-striche span:nth-child(2) {
    opacity: 0;
}

.jf-nav-burger[aria-expanded="true"] .jf-nav-striche span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}


/* ---------------------------------------------------------------
 * SCHMALE BILDSCHIRME
 * --------------------------------------------------------------- */

@media (max-width: 900px) {

    .jf-nav-burger {
        display: inline-flex;
    }

    /* Die Liste faellt als Klappe unter die Kopfzeile */
    .jf-nav-liste {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 295;

        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 10px var(--jf-rand) 18px;

        /* Bei vielen Aktivitaeten wird die Klappe laenger als der
           Bildschirm – dann scrollt sie in sich selbst. */
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;

        background: linear-gradient(
            180deg,
            var(--jf-kopf-mitte) 0%,
            var(--jf-kopf-tief) 100%
        );

        box-shadow: 0 18px 34px rgb(18 35 42 / 26%);
    }

    .jf-nav.liste-offen .jf-nav-liste {
        display: flex;
    }

    .jf-nav-liste > li > a,
    .jf-nav-aufklapp {
        justify-content: space-between;

        width: 100%;
        padding: 14px 4px;

        border-bottom: 1px solid rgb(255 255 255 / 14%);

        font-size: 1rem;
    }

    .jf-nav-liste > li > a::after,
    .jf-nav-aufklapp::after {
        display: none;
    }

    /* Das Band liegt im Markup im Punkt "Aktivitaeten" und haengt
       sich hier einfach darunter, statt zu schweben. */
    .jf-nav-punkt-band {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .jf-band {
        position: static;

        width: auto;
        max-width: none;
        max-height: none;
        overflow: visible;

        margin-top: 8px;
        padding: 8px 0 0;

        border-top: 1px solid rgb(255 255 255 / 18%);
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .jf-band-liste a {
        padding: 11px 4px 11px 16px;
        font-size: 0.95rem;
    }
}


@media (max-width: 600px) {

    header.wp-block-template-part .wp-block-site-logo img,
    header.wp-block-template-part .wp-block-image img,
    header.wp-block-template-part .custom-logo,
    header.wp-block-template-part figure img,
    .wp-block-template-part:has(.jf-nav) .wp-block-site-logo img,
    .wp-block-template-part:has(.jf-nav) .wp-block-image img,
    .wp-block-template-part:has(.jf-nav) .custom-logo,
    .wp-block-template-part:has(.jf-nav) figure img {
        max-height: 58px !important;
    }

    .jf-nav-burger {
        padding: 8px 13px;
        font-size: 0.8rem;
    }
}