/* Startseite.

   Wird nur auf der Startseite geladen (Snippet "Website - CSS und
   Schriften laden"). Alles, was auf jeder Seite gilt, steht
   weiterhin in site-base.css, header.css und footer.css. */


/* ---------------------------------------------------------------
   ABSCHNITTE OHNE WEISSE ZWISCHENSTREIFEN

   WordPress setzt zwischen den direkten Inhaltsbloecken einen
   globalen Block-Gap. Unsere Abschnitte besitzen bereits eigene
   Innenabstaende und Hintergruende; der zusaetzliche Theme-Abstand
   wuerde deshalb als ungewollter weisser Streifen sichtbar.
   --------------------------------------------------------------- */

body.home .wp-site-blocks > main,
body.home .wp-site-blocks > main > .wp-block-group,
body.home .wp-site-blocks main .wp-block-post-content,
body.home .wp-site-blocks main .entry-content {
    width: 100%;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    gap: 0 !important;
    --wp--style--block-gap: 0;
    background: var(--jf-hintergrund-2);
}

body.home .wp-site-blocks main .wp-block-post-content > *,
body.home .wp-site-blocks main .entry-content > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

body.home .wp-block-shortcode:has(> .jf-wer),
body.home .wp-block-shortcode:has(> .jf-tk-vorschau),
body.home .wp-block-shortcode:has(> .jf-termine-neu),
body.home .wp-block-shortcode:has(> .jf-statements),
body.home .wp-block-shortcode:has(> .jf-aktivitaeten-kompakt),
body.home .wp-block-shortcode:has(> .jfp-new-dates),
body.home .wp-block-shortcode:has(> .jfp-new-cards),
body.home .wp-block-group:has(> .wp-block-shortcode > .jf-wer),
body.home .wp-block-group:has(> .wp-block-shortcode > .jf-tk-vorschau),
body.home .wp-block-group:has(> .wp-block-shortcode > .jf-termine-neu),
body.home .wp-block-group:has(> .wp-block-shortcode > .jf-statements),
body.home .wp-block-group:has(> .wp-block-shortcode > .jf-aktivitaeten-kompakt),
body.home .wp-block-group:has(> .wp-block-shortcode > .jfp-new-dates),
body.home .wp-block-group:has(> .wp-block-shortcode > .jfp-new-cards) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    margin-block: 0 !important;
    padding-block: 0 !important;
}

body.home .jf-wer,
body.home .jf-tk-vorschau,
body.home .jf-termine-neu,
body.home .jf-statements,
body.home .jf-aktivitaeten-kompakt,
body.home .jfp-new-dates,
body.home .jfp-new-cards {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
}

/* Statische Flyer-Gruppe im Gutenberg-Editor: der Gruppe die zusaetzliche
   CSS-Klasse "jf-flyer" geben. Sie schliesst dann ohne weissen Zwischenraum
   an den dunklen Aktivitaeten-Abschnitt und an den Footer an. */
body.home .wp-block-group.jf-flyer,
body.home .jf-flyer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: var(--jf-hintergrund-2) !important;
}

/* Startseitenabschnitte erhalten etwas mehr Luft, ohne neue Zwischenräume
   zwischen den wechselnden Hintergrundflächen zu erzeugen. */
body.home .jf-wer-kurz { padding-block: clamp(54px, 5.2vw, 78px); }
body.home .jf-statements { padding-block: clamp(58px, 4.8vw, 80px) !important; }
body.home .jfp-new-cards--home { padding-block: clamp(60px, 5.2vw, 88px) !important; }
body.home .jfp-new-dates,
body.home .jf-termine-neu { padding-block: clamp(48px, 4.6vw, 76px) !important; }
body.home .jf-flyer { padding-block: clamp(46px, 5vw, 76px) !important; }

/* Der Flyer bleibt proportional und rund zehn Prozent kleiner. */
body.home .jf-flyer .wp-block-image img {
    display: block;
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    margin-inline: auto;
    object-fit: contain;
}

/* Die Social-Icon-Leiste unter dem Flyer gehört nicht mehr zu diesem Abschnitt. */
body.home .jf-flyer .wp-block-social-links,
body.home .jf-flyer .wp-block-social-link,
body.home .jf-flyer a[href*="whatsapp.com"],
body.home .jf-flyer a[href*="facebook.com"],
body.home .jf-flyer a[href*="instagram.com"] { display: none !important; }


/* ---------------------------------------------------------------
   TITELBAND MIT DEM BILDKARUSSELL

   Das Karussell kommt aus einem Plugin, dessen Markup wir nicht
   in der Hand haben. Statt auf dessen Klassen zu zielen, bekommt
   es im Editor eine eigene Huelle:

     Gruppe um das Karussell auswaehlen
     -> Reiter "Erweitert"
     -> Zusaetzliche CSS-Klasse:  jf-titelband

   Damit greifen die Regeln hier unabhaengig davon, welches Plugin
   das Karussell erzeugt und wie es sein Markup aufbaut.

   Die Hoehe steht als Variable ganz oben: eine Zahl aendern
   genuegt, um das Band hoeher oder flacher zu machen.
   --------------------------------------------------------------- */

.jf-titelband {
    /* Zwischen 220px und 420px, je nach Fensterbreite.
       Zum Vergleich: vorher waren es rund 620px. */
    --jf-titelband-hoehe: clamp(220px, 34vh, 420px);

    position: relative;

    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Kein Abstand zur Kopfzeile und zum Abschnitt darunter -
       das Band soll bündig sitzen. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}

/* Das Karussell selbst und alles, was es umschliesst, auf die
   gewuenschte Hoehe begrenzen. */
.jf-titelband,
.jf-titelband > *,
.jf-titelband .wp-block-cover,
.jf-titelband .wp-block-group {
    max-height: var(--jf-titelband-hoehe);
}

.jf-titelband img {
    display: block;

    width: 100%;
    height: var(--jf-titelband-hoehe);

    /* Der Bildausschnitt wird beschnitten statt gestaucht.
       "center 40%" nimmt etwas mehr vom oberen Bildteil - bei
       Aufnahmen von Menschen sitzen die Gesichter dort. */
    object-fit: cover;
    object-position: center 40%;
}

/* Der Blockabstand, den WordPress zwischen Kopfzeile und erstem
   Block setzt, faellt hier weg. */
.wp-site-blocks > .jf-titelband,
.jf-titelband + * {
    margin-block-start: 0 !important;
}


/* Handy: flacher, sonst fuellt das Band den halben Bildschirm. */

@media (max-width: 700px) {
    .jf-titelband {
        --jf-titelband-hoehe: clamp(170px, 28vh, 240px);
    }
}