/*!
 * bausteine.css - Paket 27 des Sanierungsfahrplans.
 *
 * Das CSS der Bausteine, aus denen ein Reisebericht besteht. Bis Paket 27
 * trug jeder Baustein sein CSS selbst: ein wp:html-Block mit eigenem
 * <style data-wp-block-html="css">, in jedem Bericht so oft kopiert, wie der
 * Baustein vorkommt. Ab Stufe E ist ein Baustein ein synchronisiertes Muster
 * aus Kernbloecken - und Kernbloecke tragen kein <style>. Ihr CSS steht hier,
 * einmal. Z07, Z09 Entscheidung 3.
 *
 * ES IST KEIN UMZUG, SONDERN EIN NEUBAU NEBEN DEM BESTAND. Die drei Berichte
 * behalten ihre Kopien samt eingebettetem CSS, bis Paket 37 bis 39 sie
 * umstellen. Die Werte darunter sind deshalb Zeichen fuer Zeichen die der
 * Kopien - nur ohne die zwei !important. Stehen beide auf einer Seite,
 * gewinnt bei Gleichstand das eingebettete CSS, weil es im Rumpf spaeter
 * steht als dieser <link> im Kopf. Es kann sich also nichts verschieben.
 *
 * GELADEN AM HAKEN, NICHT IM BLOCK. seeley_logbuch_bausteine_anmelden()
 * meldet die Datei an wp_enqueue_scripts an, unter is_singular( 'post' ) -
 * dort, wo Berichte gerendert werden. Am Haken steht sie HINTER
 * global-styles-inline-css, und das ist die Lehre aus Paket 18:
 *
 *     .seeley-spacer-outer               { margin-bottom:    -1px }
 *     :root :where(.is-layout-flow) > *  { margin-block-end:  0   }
 *
 * Gleiche Spezifitaet, also entscheidet die Reihenfolge. Die Muster rendern
 * als core/group ohne Layout-Angabe, also mit is-layout-flow - die zweite
 * Regel trifft sie wirklich.
 *
 * WARUM DIE ZWEI !important FEHLEN. In den Kopien standen sie auf
 * margin-left und margin-right des Containers. Die innere Gruppe steht in
 * einer Gruppe ohne Layout-Angabe (is-layout-flow); keine Regel des Themes
 * oder von core setzt dort seitliche Aussenabstaende - die Layout-Regel, die
 * mit !important zentriert, gehoert zu is-layout-constrained. Gemessen bei
 * 375, 768 und 1440 im Testbeitrag nur mit den drei Mustern.
 *
 * WEG ZURUECK: die Anmeldung in seeley-logbuch.php entfernen. Diese Datei
 * darf dann liegen bleiben, sie holt dann niemand mehr.
 */

/* === Abstandhalter - Muster 1272 / 1273 / 1274 ============================ */

.seeley-spacer-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-spacer-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
}

/*
 * FESTE PIXEL, UND DAS IST ABSICHT. Die Regel lautet sonst: Groessen ueber
 * Container-Query-Einheiten, keine festen Pixelwerte. Hier nicht - entschieden
 * von Dennis am 14.09.2026 (Paket 27, Entscheidung 2): beim Umstellen der
 * Berichte in Paket 37 bis 39 darf sich nichts Sichtbares aendern, und die
 * Kopien stehen heute auf genau 24 / 48 / 96 px. Wer das skalieren will,
 * macht daraus ein eigenes Paket mit eigenem Vorher.
 */
.seeley-spacer-s {
    height: 24px;
}
.seeley-spacer-m {
    height: 48px;
}
.seeley-spacer-l {
    height: 96px;
}

/*
 * === PAKET 28 ===============================================================
 *
 * Autor Dennis (1265), Autor Sarah (1269), die WhatsApp-Spalte als eigenes
 * Muster in beiden, und Weitere Blog-Beitraege (1270). Die Werte sind die der
 * Kopien in vorlagen/12 bis 14 (Stand 4b4a369), ohne deren !important. Vor
 * dem Anlegen im ganzen Repo gesucht: keine Datei ausser den eingebetteten
 * Kopien kennt diese Klassen (Regel 1).
 *
 * WO EIN KERNBLOCK EINE HUELLE BRINGT, FOLGT DAS CSS DER HUELLE:
 *
 *   core/image   <figure class="wp-block-image seeley-author-photo-wrap"><img>
 *   core/button  <div class="wp-block-buttons">
 *                  <div class="wp-block-button seeley-wa-btn">
 *                    <a class="wp-block-button__link wp-element-button">
 *
 * Die Klasse aus dem Block steht am <div class="wp-block-button">, nicht am
 * Link. Was in der Kopie am <a class="seeley-wa-btn"> stand, steht deshalb an
 * .seeley-wa-btn .wp-block-button__link - Spezifitaet (0,2,0) gegen
 * :root :where(.wp-element-button, .wp-block-button__link) mit (0,1,0) aus
 * den globalen Stilen. Das ersetzt die !important der Kopie.
 *
 * BEI DEN KOPIEN AENDERT SICH NICHTS. Sie tragen dieselben Klassennamen und
 * stehen auf den drei Berichten neben diesem <link>. Ihr eingebettetes CSS
 * steht spaeter und gewinnt bei Gleichstand; die Regeln unten, die es dort
 * nicht gibt, zielen auf Huellen der Kernbloecke, die in keiner Kopie stehen.
 */

/* === Autor Dennis / Sarah - Muster 1265 / 1269 ============================= */

.seeley-authorwa-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-authorwa-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px) 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-authorwa-cq;
}
/*
 * ZWEI KLASSEN IM SELEKTOR, UND DAS IST DIE LEHRE AUS PAKET 27. Die Linie ist
 * das erste Kind der Gruppe .seeley-authorwa-container (is-layout-flow), und
 * dort gewinnt aus den globalen Stilen
 *
 *     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 *
 * mit (0,2,0) gegen eine einzelne Klasse (0,1,0) - auch wenn diese Datei
 * dahinter steht. Gemessen von der Hauptsitzung am 14.09.2026: mit nur
 * .seeley-authorwa-topline stand die Linie oben auf 0 statt 32px, der
 * Autorenblock war 32px niedriger. Mit dem Elternteil im Selektor ist es
 * (0,2,0), und die Reihenfolge entscheidet fuer diese Datei. Die Kopien haben
 * dieselbe Struktur und dieselben 32px - dort aendert sich nichts.
 */
.seeley-authorwa-container > .seeley-authorwa-topline {
    width: 70%;
    height: 1px;
    background-color: rgba(225, 214, 169, 0.2);
    margin: 32px auto 32px auto;
}
.seeley-authorwa-row {
    display: flex;
    align-items: center;
    gap: clamp(28px, 3.3cqw, 64px);
}
.seeley-author-col {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}
/*
 * Die Huelle von core/image ist ein <figure>, und :where(figure) bringt
 * margin: 0 0 1em. In der Kopie war es ein <div> ohne Aussenabstand - daher
 * margin: 0. Auf der Kopie selbst aendert das nichts: ein <div> hat ohnehin
 * keinen, und unter 640 px setzt ihr eingebettetes CSS den Rand spaeter.
 */
.seeley-author-photo-wrap {
    flex: 0 0 auto;
    width: clamp(72px, 52px + 3.2cqw, 130px);
    height: clamp(72px, 52px + 3.2cqw, 130px);
    margin: 0;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid #E1D6A9;
}
.seeley-author-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.seeley-author-textwrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.seeley-author-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 13.15px + 0.4cqw, 22px);
    letter-spacing: 0.04em;
    text-transform: none;
    color: #E1D6A9;
    margin: 0 0 8px 0;
}
.seeley-author-bio {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 11.6px + 0.28cqw, 17px);
    line-height: 1.55;
    color: #C5C5C5;
    margin: 0;
    text-transform: none;
}
.seeley-authorwa-divider {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    background-color: rgba(225, 214, 169, 0.2);
}

/* === WhatsApp-Spalte - eigenes Muster, in 1265 und 1269 eingesetzt ========= */

.seeley-wa-col {
    flex: 1 1 0;
    text-align: left;
}
.seeley-wa-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 13.15px + 0.4cqw, 22px);
    letter-spacing: 0.02em;
    color: #E1D6A9;
    margin: 0 0 8px 0;
    text-transform: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
}

/*
 * DAS "LIVE"-ABZEICHEN IST EIN CSS-VORSATZ, KEIN <span> IM BLOCK. Gemessen auf
 * der Werkbank mit dem Serialisierer von core: die Kopie traegt
 *
 *   <span class="seeley-wa-live-badge"><span class="seeley-wa-live-dot"></span>Live</span>
 *
 * In core/heading uebersteht das parse() nicht (isValid: false), und
 * RichText macht aus dem leeren Punkt ein Objekt und schachtelt den Rest um -
 * ein Speichern im Editor haette das Abzeichen zerstoert. Die Ueberschrift
 * traegt deshalb nur ihren Text, und das Abzeichen kommt von hier:
 *
 *   ::before  die Pille mit "Live" - links 23px Innenabstand statt 10px:
 *             10px Rand + 7px Punkt + 6px Abstand, wie in der Kopie
 *   ::after   der Punkt, per order: -1 vor die Pille gezogen und mit
 *             negativem Rand in ihren linken Innenabstand geschoben;
 *             z-index hebt ihn ueber die Pille, wie in der Kopie
 *
 * Die Ueberschrift ist ein Flex-Container mit gap: 0.4em. Der Punkt nimmt
 * 10px + 7px - 17px - 0.4em ein, das gap danach gibt die 0.4em zurueck - er
 * zaehlt also fuer Umbruch und Zentrierung nicht mit, wie in der Kopie.
 *
 * NUR AN DER HUELLE VON core/heading (.wp-block-heading). Die alte Kopie traegt
 * dieselbe Klasse seeley-wa-heading an einem <h3> ohne wp-block-heading, und
 * ihr eingebettetes CSS setzt ::before und ::after nicht - ohne diese Klasse
 * im Selektor stuende auf den drei Berichten ein zweites Abzeichen. Gefunden
 * beim Abgleich der Selektoren gegen die Kopien, bevor die Datei live ging.
 */
.wp-block-heading.seeley-wa-heading::before {
    content: "Live";
    display: inline-flex;
    align-items: center;
    background-color: rgba(230, 57, 70, 0.15);
    color: #E63946;
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px 4px 23px;
    border-radius: 999px;
}
.wp-block-heading.seeley-wa-heading::after {
    content: "";
    order: -1;
    z-index: 1;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    margin-right: calc(-17px - 0.4em);
    border-radius: 999px;
    background-color: #E63946;
    animation: seeley-wa-pulse 1.6s ease-in-out infinite;
}
@keyframes seeley-wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6); }
    70% { box-shadow: 0 0 0 7px rgba(230, 57, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}
.seeley-wa-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 11.6px + 0.28cqw, 17px);
    line-height: 1.55;
    color: #C5C5C5;
    margin: 0 0 18px 0;
    text-transform: none;
}
.seeley-wa-btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #E1D6A9;
    color: #262626;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 10.65px + 0.35cqw, 17px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: clamp(9px, 7.4px + 0.44cqw, 14px) clamp(18px, 14.8px + 0.87cqw, 28px);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.seeley-wa-btn .wp-block-button__link:hover {
    background-color: #FFFBE8;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}
/*
 * DAS WHATSAPP-SYMBOL IST EINE MASKE, KEIN <svg> IM BLOCK - core/button kann
 * keines tragen. Derselbe Pfad wie in der Kopie (viewBox 24 x 24), 20 x 20 px,
 * gefaerbt ueber background-color statt fill.
 */
.seeley-wa-btn .wp-block-button__link::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: #262626;
}
/*
 * PAKET 34: DIESELBE MASKE TRAEGT AUCH DAS WHATSAPP-SYMBOL IM FUSSBEREICH (1271).
 * Der Pfad ist Zeichen fuer Zeichen derselbe wie in der Fuss-Kopie - ein
 * zweiter Traeger fuer dieselbe Zeichnung waere eine zweite Wahrheit. Die
 * Maske steht deshalb in einer eigenen Regel an beiden Selektoren; Groesse
 * und Farbe bleiben an der jeweiligen Regel.
 */
.seeley-wa-btn .wp-block-button__link::before,
.seeley-footer-cta-socials .wp-social-link-whatsapp .wp-block-button__link::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.29-.15-1.72-.85-1.99-.94-.27-.1-.46-.15-.66.15-.2.29-.76.94-.93 1.13-.17.2-.34.22-.63.07-.29-.15-1.22-.45-2.33-1.44-.86-.77-1.44-1.71-1.61-2-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.51-.07-.15-.66-1.58-.9-2.17-.24-.57-.48-.5-.66-.51h-.56c-.2 0-.51.07-.78.37-.27.29-1.02 1-1.02 2.44s1.04 2.83 1.19 3.03c.15.2 2.05 3.13 4.97 4.39.69.3 1.23.48 1.65.61.69.22 1.32.19 1.82.11.55-.08 1.72-.7 1.96-1.38.24-.68.24-1.26.17-1.38-.07-.12-.27-.2-.56-.35zM12.02 2C6.5 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.08-1.33A9.94 9.94 0 0 0 12.02 22C17.53 22 22 17.52 22 12S17.53 2 12.02 2zm0 18.24c-1.61 0-3.11-.47-4.38-1.28l-.31-.19-3.02.79.81-2.94-.2-.3A8.18 8.18 0 0 1 3.8 12c0-4.53 3.68-8.2 8.22-8.2 4.53 0 8.2 3.67 8.2 8.2s-3.67 8.24-8.2 8.24z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.29-.15-1.72-.85-1.99-.94-.27-.1-.46-.15-.66.15-.2.29-.76.94-.93 1.13-.17.2-.34.22-.63.07-.29-.15-1.22-.45-2.33-1.44-.86-.77-1.44-1.71-1.61-2-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.51-.07-.15-.66-1.58-.9-2.17-.24-.57-.48-.5-.66-.51h-.56c-.2 0-.51.07-.78.37-.27.29-1.02 1-1.02 2.44s1.04 2.83 1.19 3.03c.15.2 2.05 3.13 4.97 4.39.69.3 1.23.48 1.65.61.69.22 1.32.19 1.82.11.55-.08 1.72-.7 1.96-1.38.24-.68.24-1.26.17-1.38-.07-.12-.27-.2-.56-.35zM12.02 2C6.5 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.08-1.33A9.94 9.94 0 0 0 12.02 22C17.53 22 22 17.52 22 12S17.53 2 12.02 2zm0 18.24c-1.61 0-3.11-.47-4.38-1.28l-.31-.19-3.02.79.81-2.94-.2-.3A8.18 8.18 0 0 1 3.8 12c0-4.53 3.68-8.2 8.22-8.2 4.53 0 8.2 3.67 8.2 8.2s-3.67 8.24-8.2 8.24z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@container seeley-authorwa-cq (max-width: 640px) {
    .seeley-authorwa-row {
        flex-direction: column;
        align-items: stretch;
    }
    .seeley-authorwa-divider {
        width: auto;
        height: 1px;
        align-self: stretch;
    }
    .seeley-author-col {
        flex-direction: column;
        text-align: center;
    }
    .seeley-author-photo-wrap {
        width: clamp(120px, 90px + 5.5cqw, 190px);
        height: clamp(120px, 90px + 5.5cqw, 190px);
        margin: 0 auto -6px auto;
    }
    .seeley-author-name {
        font-size: clamp(22px, 18.65px + 0.836cqw, 38px);
        margin: 0 0 8px 0;
    }
    .seeley-author-bio {
        font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    }
    .seeley-wa-heading {
        font-size: clamp(22px, 18.65px + 0.836cqw, 38px);
        justify-content: center;
    }
    .seeley-wa-text {
        font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    }
    .seeley-wa-col {
        text-align: center;
    }
    /*
     * In der Kopie zentrierte text-align den Link, der inline-flex im Rumpf der
     * Spalte stand. Die Huelle von core/buttons ist ein Flex-Container - dort
     * wirkt text-align auf den Knopf nicht, justify-content schon.
     */
    .seeley-wa-col .wp-block-buttons {
        justify-content: center;
    }
}

/* === Weitere Blog-Beitraege - Muster 1270 ================================= */

.seeley-related-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-related-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 44px clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-related-cq;
}
.seeley-related-heading {
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 17.45px + 0.654cqw, 30px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E1D6A9;
    margin: 0 0 28px 0;
}
.seeley-related-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/*
 * Die Pfeile sind core/button mit tagName: button. In der Reihe steht deshalb
 * die Huelle <div class="wp-block-buttons"> statt des <button>, und die Masse
 * des Pfeils stehen am <button class="wp-block-button__link">.
 */
.seeley-related-row > .wp-block-buttons {
    flex: 0 0 auto;
}
/*
 * Die letzten fuenf Zeilen stehen in der Kopie nicht: dort war es ein nacktes
 * <button>, und Schriftart, Schriftgewicht, Zeilenhoehe, Innenabstand,
 * Laufweite und Schreibweise kamen aus dem Browser. Am Kernblock setzt sie
 * :root :where(.wp-element-button, .wp-block-button__link) aus den globalen
 * Stilen anders. Die Werte sind am alten Pfeil auf Uganda gemessen (Chrome,
 * Werkbank, 14.09.2026): Arial, 400, normal, 1px 6px.
 */
.seeley-related-arrow .wp-block-button__link {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 2px solid #E1D6A9;
    background: transparent;
    color: #E1D6A9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
    font-weight: 400;
    line-height: normal;
    padding: 1px 6px;
    letter-spacing: normal;
    text-transform: none;
}
.seeley-related-arrow .wp-block-button__link:hover {
    background-color: rgba(225, 214, 169, 0.2);
    transform: translateY(-2px);
}
.seeley-related-track {
    display: flex;
    justify-content: center;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 8px 4px;
    scroll-behavior: smooth;
}
.seeley-related-track::-webkit-scrollbar { display: none; }
.seeley-related-card {
    flex: 0 0 auto;
    width: 260px;
    scroll-snap-align: start;
    text-decoration: none;
    display: block;
    text-align: center;
}
.seeley-related-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background-color: #3B3F3A;
    margin-bottom: 14px;
}
.seeley-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 0;
}
.seeley-related-card:hover .seeley-related-media img {
    transform: scale(1.05);
}
.seeley-related-darken {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.34);
    pointer-events: none;
}
.seeley-related-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 3;
    background-color: #6F7668;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 9.3px + 0.14cqw, 12px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}
.seeley-related-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 46px 16px 16px 16px;
    box-sizing: border-box;
}
.seeley-related-ovl-heading {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.seeley-related-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 12.6px + 0.35cqw, 18px);
    line-height: 1.35;
    color: #F2EBD0;
    margin: 0 0 8px 0;
    text-transform: none;
    overflow-wrap: break-word;
}
.seeley-related-meta {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: clamp(11px, 10.2px + 0.14cqw, 13px);
    color: #9C9C96;
    margin: 0;
}

/*
 * === PAKET 29 ===============================================================
 *
 * Header (1510), Einleitung (1254) und Highlight (1258). Was je Bericht
 * wechselt, sind Muster-Ueberschreibungen (core/pattern-overrides) - Bild,
 * Land, Datum, Lesezeit, Titel, Untertitel, Einleitung, Ueberschrift, Text.
 * Die Werte sind die der Kopien in vorlagen/01, 02 und 05 (Stand 1dbbced),
 * ohne deren !important. Vor dem Anlegen im ganzen Repo gesucht: keine
 * CSS-Datei und nicht das Zusaetzliche CSS kennt diese Klassen, nur die
 * eingebetteten Kopien (Regel 1).
 *
 * WARUM DIE !important DER KOPIE HIER NICHT GEBRAUCHT WERDEN. Die Kopie trug
 * sie auf Schrift, Groesse, Farbe, Zeilenhoehe, Rand und Schreibweise. Die
 * Gegenspieler aus den globalen Stilen sind Elementselektoren oder :where():
 *
 *   h1, h2, ... { font-weight: 100; line-height: 1.02; ... }    (0,0,1)
 *   h1 { font-size: ... }                                        (0,0,1)
 *   body { text-transform: capitalize }                          geerbt
 *   :root :where(.is-layout-flow) > * { margin-block: 0 }        (0,1,0)
 *
 * Eine Klasse schlaegt die ersten zwei, die Vererbung ohnehin, und gegen die
 * letzte entscheidet die Reihenfolge - diese Datei steht hinter
 * global-styles-inline-css. Gemessen am Testbeitrag, nicht angenommen.
 *
 * DIE FALLE AUS PAKET 28 - erste und letzte Kinder einer Flow-Gruppe:
 *
 *   :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 *   :root :where(.is-layout-flow) > :last-child  { margin-block-end: 0 }
 *
 * (0,2,0). Geprueft je Regel mit Blockrand: der Untertitel setzt margin-top
 * und ist das LETZTE Kind - betroffen waere nur sein unterer Rand, und der
 * ist 0. Die Highlight-Ueberschrift setzt margin-bottom und ist das ERSTE
 * Kind - betroffen waere nur ihr oberer Rand, und der ist 0. Alle anderen
 * Blockraender sind 0 wie die Regel selbst. Einzig die drei -outer mit
 * margin-bottom: -1px verlieren als letztes Kind des Inhalts, genau wie die
 * Kopie (siehe Paket 27).
 *
 * BEI DEN KOPIEN AENDERT SICH NICHTS. Gleichnamige Regeln setzen nur, was die
 * Kopie selbst setzt, mit denselben Werten; die Regeln fuer die Huellen
 * (figure > img, .wp-block-button__link) treffen in keiner Kopie ein Element.
 */

/* === Header - Muster 1510 ================================================= */

.seeley-header-hero-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-header-hero-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    container-type: inline-size;
    container-name: seeley-header-hero-cq;
}
.seeley-header-hero {
    position: relative;
    overflow: hidden;
}
/*
 * Die Huelle von core/image ist ein <figure>, die Klasse steht an ihm, nicht
 * am <img>. In der Kopie stand .seeley-header-hero-bg am <img>. Die Lage
 * (absolut, ueber die ganze Flaeche, Ebene 1) gehoert deshalb an das
 * <figure>, das Fuellen des Bildes (object-fit, object-position) an das
 * <img> darin. margin: 0 ersetzt zugleich :where(figure) { margin: 0 0 1em }.
 */
.seeley-header-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
    display: block;
}
.seeley-header-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.seeley-header-hero-content {
    position: relative;
    z-index: 2;
    padding: 6cqw clamp(19.5px, 4.06px + 3.96cqw, 80.06px) 6cqw clamp(19.5px, 4.06px + 3.96cqw, 80.06px);
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.2cqw + 6px, 40px);
}
.seeley-header-hero-meta {
    display: flex;
    align-items: center;
    gap: clamp(15.6px, 5.04px + 2.71cqw, 57.02px);
    height: clamp(25.35px, 16.64px + 2.23cqw, 59.52px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/*
 * Das Land ist core/button. Die Klasse steht am <div class="wp-block-button">,
 * die Masse der Kopie gehoeren an den Link darin - (0,2,0) gegen
 * :root :where(.wp-element-button, .wp-block-button__link) mit (0,1,0) und
 * gegen .wp-block-buttons .wp-block-button__link { width: 100% } mit (0,2,0),
 * dort entscheidet die Reihenfolge fuer diese Datei. padding: 0 steht nicht
 * in der Kopie: dort war es ein nacktes <a> ohne Innenabstand, am Kernblock
 * setzen die globalen Stile 1rem 2.25rem.
 */
.seeley-header-hero-tag .wp-block-button__link {
    height: clamp(25.35px, 16.64px + 2.23cqw, 59.52px);
    width: clamp(78px, 55.79px + 5.69cqw, 165.12px);
    white-space: nowrap;
    background-color: #6F7668;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(11.7px, 8.08px + 0.93cqw, 25.92px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0.154cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    padding: 0;
}
.seeley-header-hero-tag .wp-block-button__link:hover {
    background-color: #545A4D;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}
.seeley-header-hero-metatext {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(12.48px, 8.56px + 1.00cqw, 27.84px);
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    text-transform: none;
    opacity: 0.8;
    margin: 0;
}
.seeley-header-hero-dot {
    color: #ffffff;
    font-weight: 900;
    font-size: clamp(13.26px, 8.81px + 1.14cqw, 30.72px);
    opacity: 0.8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.seeley-header-hero-heading {
    width: 90cqw;
    max-width: 900px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: clamp(31.2px, 14.19px + 4.36cqw, 97.92px);
    line-height: 1.02;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    margin: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.seeley-header-hero-subtitle {
    width: 85cqw;
    max-width: 550px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(14.04px, 10.03px + 1.03cqw, 29.76px);
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    text-transform: none;
    margin: clamp(10px, 1cqw + 4px, 24px) 0 0 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@container seeley-header-hero-cq (min-width: 900px) {
    .seeley-header-hero {
        min-height: 41.15cqw;
    }
    .seeley-header-hero-bg img {
        object-position: center center;
    }
    .seeley-header-hero-heading {
        width: 66cqw;
        max-width: 1300px;
    }
    .seeley-header-hero-subtitle {
        width: 36cqw;
        max-width: 700px;
    }
}

/* === Einleitung - Muster 1254 ============================================= */

.seeley-dropcap-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-dropcap-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    container-type: inline-size;
    container-name: seeley-dropcap-cq;
    padding: 0 clamp(20px, 4cqw, 70px);
    box-sizing: border-box;
}
.seeley-dropcap-textwrap {
    max-width: clamp(300px, 66.32px + 59.06cqw, 1200px);
    margin: 0 auto;
}
.seeley-dropcap-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    line-height: 1.7;
    color: #C5C5C5;
    margin: 0;
    text-transform: none;
}
.seeley-dropcap-text::first-letter {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6.2em;
    font-weight: 700;
    line-height: 0.78;
    float: left;
    padding-right: 14px;
    padding-top: 0px;
    color: #E1D6A9;
    text-transform: none;
}
@container seeley-dropcap-cq (max-width: 700px) {
    .seeley-dropcap-textwrap {
        max-width: 100%;
    }
}

/* === Highlight - Muster 1258 ============================================== */

.seeley-heading-text-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-heading-text-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    container-type: inline-size;
    container-name: seeley-heading-text-cq;
    padding: 0 clamp(20px, 4cqw, 70px);
    box-sizing: border-box;
}
.seeley-heading-text-textwrap {
    max-width: clamp(300px, 66.32px + 59.06cqw, 1200px);
    margin: 0 auto;
}
.seeley-heading-text-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 18.65px + 0.836cqw, 38px);
    letter-spacing: 0.04em;
    text-transform: none;
    text-align: left;
    color: #E1D6A9;
    margin: 0 0 16px 0;
}
.seeley-heading-text-body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    line-height: 1.7;
    color: #C5C5C5;
    margin: 0;
    text-transform: none;
}
@container seeley-heading-text-cq (max-width: 700px) {
    .seeley-heading-text-textwrap {
        max-width: 100%;
    }
}

/*
 * === PAKET 30 ===============================================================
 *
 * Zitat (1256), schmales Bild (1260) und YouTube (1277). Was je Bericht
 * wechselt, sind Muster-Ueberschreibungen (core/pattern-overrides) - Bild,
 * Zitat, Name; Bild; Bild, Ueberschrift, Link. Die Werte sind die der Kopien
 * in vorlagen/04, 07 und 08 (Stand a0d3b0f), ohne deren !important. Vor dem
 * Anlegen im ganzen Repo gesucht: keine CSS-Datei und nicht das Zusaetzliche
 * CSS kennt diese Klassen, nur die eingebetteten Kopien (Regel 1).
 *
 * WARUM DIE !important DER KOPIE HIER NICHT GEBRAUCHT WERDEN.
 *
 *   Container   margin-left/-right: auto - wie in Paket 27, keine Regel setzt
 *               in einer Flow-Gruppe seitliche Aussenabstaende.
 *   Zitatbild   width, height, max-width, margin. Am <figure> steht nur
 *               :where(figure) { margin: 0 0 1em } (0,0,0); am <img> darin
 *               .wp-block-image img { height: auto; max-width: 100% } (0,1,1)
 *               - dieselben Werte wie die Kopie.
 *   Zitattext   text-transform - body { text-transform: capitalize } wird nur
 *               geerbt, eine Klasse schlaegt das.
 *   Knopf       alles - die Klasse steht am <div class="wp-block-button">,
 *               die Werte am Link darin: (0,2,0) gegen
 *               :root :where(.wp-element-button, .wp-block-button__link) und
 *               :root :where(.wp-block-button__link:hover) mit (0,1,0). Die
 *               Hover-Regel der globalen Stile setzt color und border-color -
 *               die Regel ohne :hover gewinnt dort mit (0,2,0) weiter.
 *   Kreis       position: absolute - kein Gegenspieler an core/group.
 *
 * DIE FALLE AUS PAKET 28 - erste und letzte Kinder einer Flow-Gruppe.
 * Blockraender ungleich 0 setzt nur .seeley-quote-text (margin-bottom: 0.4em),
 * und er ist das ERSTE Kind von .seeley-quote-content, nicht das letzte -
 * betroffen waere nur sein oberer Rand, und der ist 0. Gegen
 * :root :where(.is-layout-flow) > * (0,1,0) entscheidet die Reihenfolge. Die
 * drei -outer mit margin-bottom: -1px verlieren als letztes Kind des Inhalts,
 * genau wie die Kopie (Paket 27).
 *
 * BEI DEN KOPIEN AENDERT SICH NICHTS. Gleichnamige Regeln setzen nur, was die
 * Kopie selbst setzt, mit denselben Werten - dazu margin: 0 an den Bildern, am
 * <img> der Kopie ohnehin 0. Was die Kopie nicht hat, zielt auf Huellen der
 * Kernbloecke (figure > img, .wp-block-button__link, .wp-block-buttons) oder
 * steht an .wp-block-group.seeley-video-banner-play - der Abspielknopf der
 * Kopie ist ein <a> mit derselben Klasse und bekommt davon nichts.
 */

/* === Zitat - Muster 1256 ================================================== */

.seeley-quote-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-quote-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-quote-cq;
}
.seeley-quote-block {
    position: relative;
    display: grid;
}
/*
 * Die Huelle von core/image ist ein <figure>, die Klasse steht an ihm. Die Lage
 * im Raster gehoert an das <figure>, die Masse des Bildes an das <img> darin.
 */
.seeley-quote-bg {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    max-width: 100%;
    align-self: start;
    display: block;
    margin: 0;
}
.seeley-quote-bg img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.seeley-quote-content {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-left: 72.9cqw;
    width: 21.9cqw;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 6cqw;
}
.seeley-quote-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(9px, 2.6cqw, 48px);
    line-height: 1.25;
    color: #3B3F3A;
    margin: 0 0 0.4em 0;
    text-transform: none;
}
.seeley-quote-attribution {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(6px, 1.3cqw, 22px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6F7668;
    margin: 0;
}

/* === Schmales Bild - Muster 1260 ========================================== */

.seeley-imageonly-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-imageonly-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
}
.seeley-imageonly-wrap {
    position: relative;
    width: 100%;
    padding-top: 20.8333%;
    overflow: hidden;
}
/*
 * Wie beim Header: die Lage an das <figure>, das Fuellen an das <img>.
 */
.seeley-imageonly-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
}
.seeley-imageonly-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === YouTube - Muster 1277 ================================================ */

.seeley-video-banner-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-video-banner-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-video-banner-cq;
}
.seeley-video-banner {
    position: relative;
    aspect-ratio: 1920 / 400;
    overflow: hidden;
}
.seeley-video-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
    display: block;
}
.seeley-video-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.seeley-video-banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.6cqw;
    box-sizing: border-box;
}
.seeley-video-banner-heading {
    width: 40cqw;
    margin: 0;
    color: #E1D6A9;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(0px, 3.1cqw, 60px);
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/*
 * In der Kopie stand der Link mit align-self: flex-start direkt in der Spalte.
 * Am Kernblock steht dort die Huelle <div class="wp-block-buttons"> - sie
 * bekommt das align-self, sonst waere sie so breit wie die Spalte.
 */
.seeley-video-banner-content > .wp-block-buttons {
    align-self: flex-start;
}
/*
 * DER KNOPF IST DER EINZIGE LINK, UND ER DECKT DAS GANZE BANNER (Paket 30,
 * Variante A). Sein ::after liegt absolut ueber inset: 0 - der naechste
 * positionierte Vorfahr ist .seeley-video-banner-content, und der deckt das
 * Banner. Ein Klick irgendwo aufs Banner ist also ein Klick auf diesen Link;
 * sein Name bleibt "Auf YouTube ansehen", ::after und ::before tragen keinen
 * Text.
 *
 * DAS HAT ZWEI FOLGEN, UND BEIDE SIND ABSICHT:
 *
 * 1. Die Hover-Regel des Knopfs wirkt, sobald die Maus ueber dem Banner steht -
 *    ::after gehoert zum Link.
 *
 * 2. Der Link darf KEIN transform tragen, auch nicht im Hover. Ein transform
 *    macht ihn zum Bezugsrahmen seines ::after: es schrumpfte beim Hover auf
 *    die Groesse des Knopfs, die Maus stuende nicht mehr darueber, der Hover
 *    fiele weg - es flackerte. Das Anheben um 2px der Kopie
 *    (translateY(-2px)) ist deshalb margin-top: -2px und margin-bottom: 2px:
 *    die Huelle ist ein eigener Formatierungskontext, ihre Hoehe bleibt, der
 *    Knopf sitzt 2px hoeher.
 *
 * display: flex statt inline-flex: in der Kopie war der Link Kind der
 * Flex-Spalte und damit ohnehin flex. Hier steht er in einem Block; inline-flex
 * braechte eine Zeilenbox mit Unterlaenge.
 */
.seeley-video-banner-btn .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    white-space: nowrap;
    background-color: transparent;
    color: #E1D6A9;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(0px, 1.3cqw, 22px);
    padding: clamp(0px, 1cqw, 16px) clamp(0px, 1.9cqw, 30px);
    border-radius: 999px;
    border: 1.5px solid #E1D6A9;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, margin 0.25s ease, box-shadow 0.25s ease;
}
.seeley-video-banner-btn .wp-block-button__link:hover {
    background-color: rgba(225, 214, 169, 0.20);
    margin-top: -2px;
    margin-bottom: 2px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
/*
 * DAS YOUTUBE-SYMBOL IST EINE MASKE, KEIN <svg> IM BLOCK - core/button kann
 * keines tragen. Derselbe Pfad wie in der Kopie (viewBox 24 x 24), gefaerbt
 * ueber background-color statt fill.
 */
.seeley-video-banner-btn .wp-block-button__link::before {
    content: "";
    flex: 0 0 auto;
    width: clamp(0px, 1.5cqw, 26px);
    height: clamp(0px, 1.5cqw, 26px);
    background-color: #E1D6A9;
}
/*
 * PAKET 34: DIESELBE MASKE TRAEGT AUCH DAS YOUTUBE-SYMBOL IM FUSSBEREICH (1271).
 * Derselbe Pfad wie in der Fuss-Kopie; Groesse und Farbe bleiben an der
 * jeweiligen Regel.
 */
.seeley-video-banner-btn .wp-block-button__link::before,
.seeley-footer-cta-socials .wp-social-link-youtube .wp-block-button__link::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.8 8.001s-.2-1.4-.8-2.02c-.77-.8-1.63-.81-2.02-.86C16.14 5 12 5 12 5h-.01s-4.14 0-6.98.12c-.39.05-1.25.06-2.02.86-.6.62-.8 2.02-.8 2.02S2 9.63 2 11.26v1.48c0 1.63.2 3.26.2 3.26s.2 1.4.8 2.02c.77.8 1.78.77 2.23.86C6.8 19 12 19 12 19s4.15-.01 6.99-.13c.39-.05 1.25-.06 2.02-.86.6-.62.8-2.02.8-2.02s.2-1.63.2-3.26v-1.48c0-1.63-.2-3.26-.2-3.26zM9.98 14.51v-5.5l5.28 2.76-5.28 2.74z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.8 8.001s-.2-1.4-.8-2.02c-.77-.8-1.63-.81-2.02-.86C16.14 5 12 5 12 5h-.01s-4.14 0-6.98.12c-.39.05-1.25.06-2.02.86-.6.62-.8 2.02-.8 2.02S2 9.63 2 11.26v1.48c0 1.63.2 3.26.2 3.26s.2 1.4.8 2.02c.77.8 1.78.77 2.23.86C6.8 19 12 19 12 19s4.15-.01 6.99-.13c.39-.05 1.25-.06 2.02-.86.6-.62.8-2.02.8-2.02s.2-1.63.2-3.26v-1.48c0-1.63-.2-3.26-.2-3.26zM9.98 14.51v-5.5l5.28 2.76-5.28 2.74z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.seeley-video-banner-btn .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.seeley-video-banner-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: clamp(0px, 6cqw, 110px);
    height: clamp(0px, 6cqw, 110px);
    border-radius: 999px;
    background-color: transparent;
    border: 1.5px solid #E1D6A9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}
/*
 * DER ABSPIELKNOPF IST GESTALTUNG, KEIN LINK - eine leere core/group. Alles
 * darunter nur an .wp-block-group.seeley-video-banner-play: die Kopie traegt
 * dieselbe Klasse an einem <a>, und dort soll weder ein zweites Dreieck
 * entstehen noch der Klick verschwinden.
 *
 *   box-sizing: content-box   .wp-block-group setzt border-box; das <a> der
 *                             Kopie war content-box, der Kreis mit Rand also
 *                             3px groesser als width. (0,2,0) gegen (0,1,0).
 *   pointer-events: none      der Kreis liegt mit z-index 3 ueber dem Link -
 *                             ohne das fiele ein Klick auf den Kreis ins Leere.
 *   Hover                     am Banner, nicht am Kreis: er wird nie selbst
 *                             getroffen.
 */
.wp-block-group.seeley-video-banner-play {
    box-sizing: content-box;
    pointer-events: none;
}
.seeley-video-banner:hover .wp-block-group.seeley-video-banner-play {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: rgba(225, 214, 169, 0.15);
}
/*
 * Das Dreieck ist eine Maske mit dem Pfad der Kopie (viewBox 24 x 24), 34 %
 * gross und 4 % nach rechts versetzt wie das <svg> dort.
 */
.wp-block-group.seeley-video-banner-play::before {
    content: "";
    width: 34%;
    height: 34%;
    margin-left: 4%;
    background-color: #E1D6A9;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.25s ease;
}
.seeley-video-banner:hover .wp-block-group.seeley-video-banner-play::before {
    transform: scale(1.18);
}

/*
 * === PAKET 31 ===============================================================
 *
 * Textblock mit Bild rechts (1262) und Textblock mit Bild links (1264). Was je
 * Bericht wechselt, sind Muster-Ueberschreibungen (core/pattern-overrides) -
 * in beiden gleich: Bild, Ueberschrift, Text. Die Werte sind die der Kopien in
 * vorlagen/09 und 11 (Stand b5f50c2), ohne deren !important. Vor dem Anlegen
 * im ganzen Repo gesucht: keine CSS-Datei und nicht das Zusaetzliche CSS kennt
 * seeley-image-text- oder seeley-text-image-, kein PHP und kein JavaScript
 * liest dieses Markup - nur die eingebetteten Kopien (Regel 1).
 *
 * ZWEI MUSTER, EINE REGEL JE WERT. Die zwei Kopien unterscheiden sich nur im
 * Klassenpraefix (seeley-image-text- = Bild rechts, seeley-text-image- = Bild
 * links), im Container-Namen und in flex-direction: row-reverse bei rechts.
 * Jede Regel steht deshalb an beiden Praefixen; rechts kommt row-reverse dazu.
 * Das Bild steht im Markup in beiden zuerst - unter 700 px also in beiden oben.
 *
 * DIE CONTAINER-ABFRAGE HAT KEINEN NAMEN. Die Kopien fragen je ihren eigenen
 * Container ab (seeley-image-text-cq / seeley-text-image-cq) und brauchten
 * dafuer zwei gleiche @container-Bloecke. Eine Abfrage ohne Namen trifft den
 * naechsten Vorfahren mit container-type - das ist in beiden der -container,
 * kein Element dazwischen setzt einen. So stehen die Werte unter 700 px nur
 * einmal. Gemessen auf der Werkbank: Umschlag zwischen 699.3 und 700.2 px
 * Containerbreite, in beiden Mustern gleich den Kopien.
 *
 * WARUM DIE !important DER KOPIE HIER NICHT GEBRAUCHT WERDEN.
 *
 *   Container   margin-left/-right: auto - wie in Paket 27, keine Regel setzt
 *               in einer Flow-Gruppe seitliche Aussenabstaende.
 *   Ueberschrift, Text   text-transform - body { text-transform: capitalize }
 *               wird nur geerbt, eine Klasse schlaegt das. Gegen
 *               h1, h2, ... { font-weight: 100; letter-spacing: -0.02em } und
 *               h2 { font-size: x-large } (0,0,1) gewinnt die Klasse ohnehin.
 *               line-height setzt die Kopie nicht - sie bekommt wie das
 *               core/heading 1.02 aus den globalen Stilen.
 *
 * DIE HUELLE VON core/image IST EIN <figure>, die Klasse steht an ihm. Die
 * Masse der Spalte (flex, 45 %, Rundung, overflow) gehoeren an das <figure>,
 * das Fuellen an das <img> darin - wie der Header in Paket 29. margin: 0
 * ersetzt :where(figure) { margin: 0 0 1em }. Gegen
 * .wp-block-image img { height: auto } (0,1,1) steht .seeley-...-media img mit
 * derselben Spezifitaet dahinter - gemessen: height gleich der Spalte.
 *
 * DIE FALLE AUS PAKET 28 - erste und letzte Kinder einer Flow-Gruppe.
 * Blockraender ungleich 0 setzt nur die Ueberschrift (margin-bottom: 16px),
 * und sie ist das ERSTE Kind von -content, nicht das letzte - betroffen waere
 * nur ihr oberer Rand, und der ist 0. Gegen :root :where(.is-layout-flow) > *
 * (0,1,0) entscheidet die Reihenfolge. Die zwei -outer mit margin-bottom: -1px
 * verlieren als letztes Kind des Inhalts, genau wie die Kopie (Paket 27).
 *
 * BEI DEN KOPIEN AENDERT SICH NICHTS. Gleichnamige Regeln setzen nur, was die
 * Kopie selbst setzt, mit denselben Werten - dazu margin: 0 an der Bildspalte,
 * am <div> der Kopie ohnehin 0. row-reverse steht nur an seeley-image-text-,
 * und das ist auch in der Kopie die rechte.
 */

/* === Textblock mit Bild rechts / links - Muster 1262 / 1264 =============== */

.seeley-image-text-outer,
.seeley-text-image-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-image-text-container,
.seeley-text-image-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
}
.seeley-image-text-row,
.seeley-text-image-row {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 2.9cqw, 56px);
}
.seeley-image-text-row {
    flex-direction: row-reverse;
}
.seeley-image-text-media,
.seeley-text-image-media {
    flex: 0 0 45%;
    width: 45%;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
}
.seeley-image-text-media img,
.seeley-text-image-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.seeley-image-text-content,
.seeley-text-image-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.seeley-image-text-heading,
.seeley-text-image-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 18.65px + 0.836cqw, 38px);
    letter-spacing: 0.04em;
    text-transform: none;
    text-align: left;
    color: #E1D6A9;
    margin: 0 0 16px 0;
}
.seeley-image-text-body,
.seeley-text-image-body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    line-height: 1.7;
    color: #C5C5C5;
    margin: 0;
    text-transform: none;
}
@container (max-width: 700px) {
    .seeley-image-text-row,
    .seeley-text-image-row {
        flex-direction: column;
        align-items: center;
    }
    .seeley-image-text-media,
    .seeley-text-image-media {
        width: min(600px, 78vw);
        flex: 0 0 auto;
        aspect-ratio: 940 / 740;
        max-height: none;
    }
}

/*
 * === PAKET 32 ===============================================================
 *
 * Impact-Zahlen / Gebetsanliegen (1255) und Icon Short Facts (1263). Was je
 * Bericht wechselt, sind Muster-Ueberschreibungen (core/pattern-overrides):
 *
 *   Impact            Zahl 1-4, Beschriftung 1-4, Gebet
 *   Icon Short Facts  Icon 1-4, Titel 1-4, Text 1-4
 *
 * "Bete mit uns" steht fest im Muster. Die Werte sind die der Kopien in
 * vorlagen/03 und 10 (Stand b86a40b), ohne deren !important. Vor dem Anlegen
 * im ganzen Repo gesucht: keine CSS-Datei und nicht das Zusaetzliche CSS kennt
 * seeley-impact- oder seeley-features- - nur die eingebetteten Kopien
 * (Regel 1). Die Zaehlanimation und die Icon-Masken stehen in bausteine.js.
 *
 * VIER FESTE STECKPLAETZE JE MUSTER. Ein Steckplatz, dessen Felder in der
 * Instanz alle geleert sind, verschwindet (Regeln "Leerer Steckplatz" unten).
 * Leer heisst im ausgelieferten HTML: der Absatz hat keinen Inhalt
 * (<p class="..."></p>, :empty), und ein Bild ohne Adresse rendert core gar
 * nicht (render_block_core_image gibt '' zurueck) - das <figure> fehlt. Ist
 * nur ein Teil leer, bleibt der Steckplatz stehen: ein halb gefuellter
 * Steckplatz ist ein sichtbarer Fehler, kein still verschwundener.
 *
 * WARUM DIE !important DER KOPIE HIER NICHT GEBRAUCHT WERDEN.
 *
 *   Container   margin-left/-right: auto - wie in Paket 27, keine Regel setzt
 *               in einer Flow-Gruppe seitliche Aussenabstaende (im
 *               ausgelieferten CSS nur .is-layout-flow > .aligncenter und
 *               .alignfull - beide Klassen traegt hier nichts).
 *   Beschriftung, Gebetstext, Text   text-transform - body { text-transform:
 *               capitalize } wird nur geerbt, eine Klasse schlaegt das. Keine
 *               andere Regel im ausgelieferten CSS setzt text-transform auf
 *               p oder .wp-block-paragraph.
 *
 * DIE HUELLEN DER KERNBLOECKE.
 *
 *   core/group  .wp-block-group { box-sizing: border-box } aus core. Die <div>
 *               der Kopie rechnen content-box. Fuer die zwei Gruppen mit
 *               Innenabstand - eine Zahl, ein Punkt - aendert das die Breite
 *               bei min-width und flex-basis 45 % und damit den Umbruch.
 *               Deshalb content-box an .wp-block-group.seeley-impact-stat und
 *               .wp-block-group.seeley-features-item (0,2,0), wie der
 *               Abspielknopf in Paket 30. Die uebrigen Gruppen haben keinen
 *               Innenabstand oder setzen border-box selbst (Container).
 *   core/image  <figure class="wp-block-image seeley-features-icon-wrap"><img>.
 *               Die beige Flaeche mit der Maske ist das <figure> - in der
 *               Kopie ein <div>, gleiche Werte, margin ersetzt zugleich
 *               :where(figure) { margin: 0 0 1em }. Das <img> ist unsichtbar
 *               wie in der Kopie; es traegt nur die Adresse.
 *   Gebet       das Symbol ist eine leere core/group mit einer Maske - der
 *               Pfad Zeichen fuer Zeichen der des <svg> der Kopie (viewBox
 *               -9 0 163 163), gefaerbt ueber background-color statt fill.
 *               Die Maske steht nur an .wp-block-group.seeley-impact-prayer-icon:
 *               die Kopie traegt dieselbe Klasse am <svg>.
 *
 * DIE FALLE AUS PAKET 28 - erste und letzte Kinder einer Flow-Gruppe.
 *
 *   :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 *   :root :where(.is-layout-flow) > :last-child  { margin-block-end: 0 }
 *
 * (0,2,0). Unter 640 px Containerbreite setzen Zahl und Punkt margin-bottom -
 * und der vierte ist das LETZTE Kind seiner Reihe (einer core/group, also
 * is-layout-flow, auch wenn sie display: flex traegt). Mit einer Klasse
 * stuende er dort auf 0. Deshalb steht der Elternteil im Selektor (0,2,0),
 * und die Reihenfolge entscheidet fuer diese Datei - wie die obere Linie im
 * Autor. Alle anderen Blockraender liegen unten an ersten oder mittleren
 * Kindern (Zahl, Symbol, Titel, "Bete mit uns", Statistikreihe) oder sind 0;
 * die zwei -outer mit margin-bottom: -1px verlieren als letztes Kind des
 * Inhalts, genau wie die Kopie (Paket 27).
 *
 * BEI DEN KOPIEN AENDERT SICH NICHTS. Gleichnamige Regeln setzen nur, was die
 * Kopie selbst setzt, mit denselben Werten. Was die Kopie nicht hat, zielt auf
 * .wp-block-group, auf das <img> im Icon (in der Kopie ohnehin display: none)
 * oder auf leere Absaetze - die Kopie hat keinen leeren Absatz, ihre Zahl
 * traegt zwei <span>.
 */

/* === Impact-Zahlen / Gebetsanliegen - Muster 1255 ========================= */

.seeley-impact-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-impact-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-impact-cq;
}
.seeley-impact-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(28px, 3.5cqw, 60px);
}
.seeley-impact-stat {
    flex: 1 1 0;
    min-width: 130px;
    text-align: center;
    padding: 0 clamp(14px, 1.8cqw, 30px);
    position: relative;
}
.wp-block-group.seeley-impact-stat {
    box-sizing: content-box;
}
.seeley-impact-stat:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background-color: rgba(225, 214, 169, 0.25);
}
/*
 * Die Zahl ist ein core/paragraph mit der Zahl als Text. bausteine.js setzt sie
 * auf 0 und zaehlt beim Hereinscrollen hoch - aber nur, wenn der Text eine
 * reine Ziffernfolge ist. "1.600" oder "ueber 40" bleiben stehen, wie getippt.
 */
.seeley-impact-number {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 24.31px + 2.484cqw, 72px);
    color: #E1D6A9;
    margin: 0 0 6px 0;
    line-height: 1;
}
.seeley-impact-label {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    letter-spacing: 0.04em;
    color: #C5C5C5;
    margin: 0;
    text-transform: none;
}
.seeley-impact-divider {
    width: 48px;
    height: 1px;
    background-color: rgba(225, 214, 169, 0.35);
    margin: 0 auto clamp(28px, 3.5cqw, 60px) auto;
}
.seeley-impact-prayer {
    max-width: clamp(280px, 220px + 27.13cqw, 700px);
    margin: 0 auto;
    text-align: center;
}
.seeley-impact-prayer-icon {
    display: block;
    margin: 0 auto 14px auto;
    width: clamp(28px, 22.4px + 1.75cqw, 52px);
    height: clamp(28px, 22.4px + 1.75cqw, 52px);
    color: #E1D6A9;
    opacity: 0.9;
}
.wp-block-group.seeley-impact-prayer-icon {
    background-color: #E1D6A9;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 0 163 163'%3E%3Cpath d='M2.80591 124.279L4.16922 126.165C8.63557 132.343 13.2548 138.733 17.9693 144.888C21.4151 149.385 25.0729 153.66 29.1527 158.383C31.5208 161.123 33.1314 161.504 36.0442 160.012C42.0063 157.041 47.4438 153.117 52.1428 148.395C53.6379 146.874 53.9804 145.259 53.2551 143.16C53.066 142.643 52.8502 142.136 52.6081 141.643C52.5274 141.47 52.4441 141.292 52.3594 141.106C53.1286 140.533 53.9031 139.974 54.6736 139.418C56.5494 138.065 58.4888 136.666 60.2425 135.123C62.9085 132.858 65.3548 130.347 67.5482 127.622C68.9002 125.759 70.0974 123.788 71.1279 121.73C71.5098 121.019 71.9023 120.286 72.3132 119.554C74.5093 126.468 78.9317 132.278 86.1711 137.784C87.3853 138.707 88.572 139.697 89.7153 140.654C90.1905 141.048 90.6624 141.442 91.133 141.831C91.1101 141.953 91.0923 142.066 91.0766 142.17C91.0628 142.358 91.0169 142.543 90.9407 142.715C89.3412 145.355 89.6937 147.755 92.0079 150.051C96.5025 154.496 101.581 158.309 107.104 161.385C107.927 161.872 108.862 162.14 109.818 162.161C110.545 162.137 111.258 161.96 111.911 161.642C112.564 161.324 113.143 160.872 113.609 160.314L114.493 159.372C116.098 157.665 117.758 155.899 119.27 154.055C127.157 144.436 134.099 135.884 140.491 127.912C141.657 126.37 142.657 124.711 143.476 122.961C144.377 121.16 143.976 119.645 142.285 118.458C140.567 117.254 138.883 115.934 137.253 114.657C136.528 114.088 135.801 113.52 135.07 112.96C134.317 112.381 133.571 111.797 132.824 111.211C131.122 109.877 129.363 108.497 127.558 107.238C124.342 104.993 122.942 105.097 120.069 107.799C119.665 108.179 119.243 108.531 118.711 108.98C118.514 109.147 118.298 109.325 118.068 109.52C117.952 109.364 117.841 109.214 117.732 109.067C117.39 108.605 117.067 108.166 116.714 107.765C110.545 100.651 105.825 92.3991 102.822 83.4742C96.4494 65.1399 92.2967 46.1081 90.4531 26.7856C89.8492 21.0847 88.7663 15.4448 87.216 9.9256C86.6837 7.9113 85.289 5.70075 83.0712 3.35697C80.8791 1.04141 77.875 0.958734 75.0324 3.13712C74.7344 3.36552 74.4456 3.60507 74.1634 3.84004L74.019 3.9595C71.8196 1.96292 69.7134 1.07162 67.7517 1.31184C65.8174 1.54878 64.0521 2.88309 62.5012 5.27807C60.8454 7.85439 59.6534 10.7009 58.9798 13.6884C57.7203 19.4399 56.6779 25.5845 55.8811 31.9497C54.2534 44.9524 50.7618 57.2968 47.0168 69.8486C42.9586 83.4578 38.3969 93.1289 32.2254 101.206C30.4179 103.573 28.4471 105.81 26.327 107.901L25.8412 107.38C25.4126 106.921 25.0603 106.537 24.7 106.164C21.9985 103.365 20.6056 103.198 17.2524 105.264C16.4228 105.775 15.622 106.352 14.8475 106.909L14.7354 106.989C13.4122 107.941 12.0918 108.896 10.7739 109.854C7.87816 111.955 4.88325 114.126 1.90216 116.207C0.40768 117.251 -0.0413887 118.546 0.567693 120.058C1.13767 121.552 1.88946 122.969 2.80591 124.279ZM70.5523 64.2992L70.5129 64.3242C70.4558 64.3603 70.3606 64.42 70.3514 64.4272C64.3193 63.574 60.5157 65.5699 58.0235 70.8955C57.0174 73.0516 56.2606 75.3159 55.7677 77.644C53.7285 87.3656 53.1567 96.0411 54.0198 104.165L54.0416 104.371C54.0838 105.345 54.2981 106.304 54.6748 107.203C54.9995 107.733 55.4459 108.177 55.977 108.499C56.1837 108.649 56.3905 108.799 56.5756 108.959L56.8381 109.186L57.0573 108.916C57.2476 108.693 57.45 108.48 57.6633 108.279C58.2187 107.855 58.6183 107.26 58.7994 106.585C58.9825 104.93 59.0153 103.238 59.0462 101.602C59.0633 100.683 59.081 99.7586 59.1244 98.8391C59.396 91.5741 60.4587 84.3596 62.2942 77.325C62.8843 75.3356 63.8194 73.4657 65.0567 71.8006C65.1905 71.5545 65.3781 71.3418 65.6054 71.179C65.8325 71.0156 66.0938 70.9053 66.3694 70.8568C66.9129 70.8666 67.411 71.4475 67.7339 71.9292C69.1234 74.0151 70.3389 76.1351 69.9556 79.1286C68.7611 88.4585 67.8888 97.8342 66.9536 108.249C66.0885 117.875 61.7324 125.169 53.6372 130.547C52.2471 131.47 50.9082 132.485 49.4912 133.559C48.8899 134.015 48.2709 134.483 47.6231 134.965L29.9789 112.177C30.8052 111.258 31.6316 110.365 32.4507 109.477C34.3915 107.373 36.2246 105.385 37.9639 103.248C45.7402 93.6895 49.9985 82.2173 53.4423 71.2447C58.4618 55.2833 62.1221 38.9259 64.3841 22.3475C64.8594 19.3997 65.5485 16.4904 66.4455 13.6424C66.6379 12.9756 66.8302 12.3101 67.0166 11.6445C67.2896 10.8317 67.6604 10.0551 68.1212 9.33227C68.2524 9.10846 68.3837 8.8794 68.515 8.63983C71.8498 18.1948 71.3484 51.842 70.5523 64.2992ZM6.75162 119.629L19.1422 110.805L46.3145 145.629L34.431 154.398L6.75162 119.629ZM77.071 78.6022L77.2994 75.0954C77.3066 74.9116 77.327 74.7285 77.3598 74.548L77.4418 74.1372C77.6702 72.9649 77.8862 71.8584 79.0905 71.5919C79.2343 71.5591 79.3813 71.5427 79.5283 71.542C80.4367 71.542 81.1692 72.2246 81.7133 73.5767C82.661 75.8253 83.3981 78.1572 83.9159 80.5417C85.4236 88.5799 86.0878 96.7533 85.8988 104.929C85.8988 105.148 85.8784 105.372 85.862 105.597C85.774 106.194 85.8101 106.802 85.967 107.385C86.2131 108.086 86.8485 109.323 87.6735 109.505C88.4716 109.682 89.5815 108.68 89.9812 108.07C90.4294 107.236 90.6867 106.311 90.7353 105.365C92.0138 95.6158 91.5157 85.7163 89.2638 76.1449C88.5431 73.408 87.3814 70.8069 85.8246 68.4434C84.2992 66.0609 81.7874 64.7147 77.9341 64.2225V63.343C77.9341 62.5212 77.9341 61.7192 77.9341 60.9145L77.8927 54.3511C77.8461 46.9962 77.7923 39.6415 77.7306 32.287C77.7083 29.9334 77.6118 28.0011 77.4261 26.2047C76.9109 20.9815 77.2712 15.7088 78.4926 10.6043C78.5878 10.245 78.704 9.89167 78.8405 9.54624C78.8772 9.44582 78.9166 9.33949 78.958 9.22594C79.0597 9.34474 79.1581 9.45697 79.2527 9.56396C79.571 9.8645 79.823 10.2271 79.995 10.6292C80.1919 11.3249 80.4006 12.02 80.6067 12.7157C81.4068 15.2113 82.0441 17.756 82.5153 20.3338C83.0758 23.8557 83.5392 27.4597 83.9881 30.9442C84.6963 36.4469 85.4281 42.136 86.561 47.6545C89.5854 62.3795 92.7909 76.7304 98.7249 90.3999C102.089 98.4394 107.003 105.739 113.184 111.882C113.554 112.257 113.905 112.652 114.234 113.063C114.369 113.226 114.51 113.396 114.661 113.573L96.41 135.725C87.0191 129.627 78.3095 122.109 77.7221 108.719C77.6053 106.051 77.365 103.347 77.1314 100.733C76.6916 95.7766 76.2374 90.6519 76.6063 85.5824C76.7711 83.255 76.9207 80.9257 77.071 78.5996V78.6022ZM97.5487 146.422C97.6564 146.261 97.7627 146.099 97.869 145.937C98.2175 145.384 98.5976 144.852 99.0065 144.342C106.342 135.568 113.687 126.802 121.15 117.897L125.498 112.708L137.356 121.692C129.805 131.41 122.06 140.313 113.866 149.734C112.163 151.691 110.457 153.656 108.747 155.631L97.8513 147.164L97.6833 146.776C97.638 146.683 97.5999 146.588 97.5711 146.489C97.556 146.466 97.5514 146.441 97.5461 146.419L97.5487 146.422Z'/%3E%3Cpath d='M37.0352 148.643C37.5578 148.639 38.074 148.528 38.552 148.316C39.0301 148.105 39.4599 147.799 39.8147 147.415C40.1695 147.031 40.4415 146.578 40.6146 146.086C40.7878 145.593 40.858 145.069 40.821 144.548C40.7908 143.505 40.3595 142.514 39.6167 141.781C38.8738 141.049 37.8768 140.631 36.8336 140.616H36.7884C36.3138 140.596 35.8401 140.674 35.3966 140.844C34.9531 141.014 34.5492 141.273 34.2095 141.605C33.8413 142.037 33.564 142.537 33.3942 143.078C33.2245 143.619 33.1659 144.189 33.2218 144.753C33.2 145.307 33.2901 145.86 33.4863 146.378C33.6824 146.897 33.9809 147.371 34.364 147.772C35.0411 148.373 35.926 148.686 36.8304 148.644C36.8974 148.647 36.9663 148.645 37.0352 148.643Z'/%3E%3Cpath d='M106.699 149.935H106.785C109.017 149.89 110.349 148.34 110.352 145.788C110.352 143.459 109.051 142.025 106.866 141.954C106.324 141.936 105.783 142.03 105.279 142.23C104.774 142.431 104.316 142.733 103.934 143.119C103.543 143.51 103.236 143.976 103.032 144.489C102.827 145.002 102.73 145.552 102.746 146.104C102.77 147.134 103.197 148.113 103.937 148.83C104.677 149.547 105.669 149.944 106.699 149.935Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 0 163 163'%3E%3Cpath d='M2.80591 124.279L4.16922 126.165C8.63557 132.343 13.2548 138.733 17.9693 144.888C21.4151 149.385 25.0729 153.66 29.1527 158.383C31.5208 161.123 33.1314 161.504 36.0442 160.012C42.0063 157.041 47.4438 153.117 52.1428 148.395C53.6379 146.874 53.9804 145.259 53.2551 143.16C53.066 142.643 52.8502 142.136 52.6081 141.643C52.5274 141.47 52.4441 141.292 52.3594 141.106C53.1286 140.533 53.9031 139.974 54.6736 139.418C56.5494 138.065 58.4888 136.666 60.2425 135.123C62.9085 132.858 65.3548 130.347 67.5482 127.622C68.9002 125.759 70.0974 123.788 71.1279 121.73C71.5098 121.019 71.9023 120.286 72.3132 119.554C74.5093 126.468 78.9317 132.278 86.1711 137.784C87.3853 138.707 88.572 139.697 89.7153 140.654C90.1905 141.048 90.6624 141.442 91.133 141.831C91.1101 141.953 91.0923 142.066 91.0766 142.17C91.0628 142.358 91.0169 142.543 90.9407 142.715C89.3412 145.355 89.6937 147.755 92.0079 150.051C96.5025 154.496 101.581 158.309 107.104 161.385C107.927 161.872 108.862 162.14 109.818 162.161C110.545 162.137 111.258 161.96 111.911 161.642C112.564 161.324 113.143 160.872 113.609 160.314L114.493 159.372C116.098 157.665 117.758 155.899 119.27 154.055C127.157 144.436 134.099 135.884 140.491 127.912C141.657 126.37 142.657 124.711 143.476 122.961C144.377 121.16 143.976 119.645 142.285 118.458C140.567 117.254 138.883 115.934 137.253 114.657C136.528 114.088 135.801 113.52 135.07 112.96C134.317 112.381 133.571 111.797 132.824 111.211C131.122 109.877 129.363 108.497 127.558 107.238C124.342 104.993 122.942 105.097 120.069 107.799C119.665 108.179 119.243 108.531 118.711 108.98C118.514 109.147 118.298 109.325 118.068 109.52C117.952 109.364 117.841 109.214 117.732 109.067C117.39 108.605 117.067 108.166 116.714 107.765C110.545 100.651 105.825 92.3991 102.822 83.4742C96.4494 65.1399 92.2967 46.1081 90.4531 26.7856C89.8492 21.0847 88.7663 15.4448 87.216 9.9256C86.6837 7.9113 85.289 5.70075 83.0712 3.35697C80.8791 1.04141 77.875 0.958734 75.0324 3.13712C74.7344 3.36552 74.4456 3.60507 74.1634 3.84004L74.019 3.9595C71.8196 1.96292 69.7134 1.07162 67.7517 1.31184C65.8174 1.54878 64.0521 2.88309 62.5012 5.27807C60.8454 7.85439 59.6534 10.7009 58.9798 13.6884C57.7203 19.4399 56.6779 25.5845 55.8811 31.9497C54.2534 44.9524 50.7618 57.2968 47.0168 69.8486C42.9586 83.4578 38.3969 93.1289 32.2254 101.206C30.4179 103.573 28.4471 105.81 26.327 107.901L25.8412 107.38C25.4126 106.921 25.0603 106.537 24.7 106.164C21.9985 103.365 20.6056 103.198 17.2524 105.264C16.4228 105.775 15.622 106.352 14.8475 106.909L14.7354 106.989C13.4122 107.941 12.0918 108.896 10.7739 109.854C7.87816 111.955 4.88325 114.126 1.90216 116.207C0.40768 117.251 -0.0413887 118.546 0.567693 120.058C1.13767 121.552 1.88946 122.969 2.80591 124.279ZM70.5523 64.2992L70.5129 64.3242C70.4558 64.3603 70.3606 64.42 70.3514 64.4272C64.3193 63.574 60.5157 65.5699 58.0235 70.8955C57.0174 73.0516 56.2606 75.3159 55.7677 77.644C53.7285 87.3656 53.1567 96.0411 54.0198 104.165L54.0416 104.371C54.0838 105.345 54.2981 106.304 54.6748 107.203C54.9995 107.733 55.4459 108.177 55.977 108.499C56.1837 108.649 56.3905 108.799 56.5756 108.959L56.8381 109.186L57.0573 108.916C57.2476 108.693 57.45 108.48 57.6633 108.279C58.2187 107.855 58.6183 107.26 58.7994 106.585C58.9825 104.93 59.0153 103.238 59.0462 101.602C59.0633 100.683 59.081 99.7586 59.1244 98.8391C59.396 91.5741 60.4587 84.3596 62.2942 77.325C62.8843 75.3356 63.8194 73.4657 65.0567 71.8006C65.1905 71.5545 65.3781 71.3418 65.6054 71.179C65.8325 71.0156 66.0938 70.9053 66.3694 70.8568C66.9129 70.8666 67.411 71.4475 67.7339 71.9292C69.1234 74.0151 70.3389 76.1351 69.9556 79.1286C68.7611 88.4585 67.8888 97.8342 66.9536 108.249C66.0885 117.875 61.7324 125.169 53.6372 130.547C52.2471 131.47 50.9082 132.485 49.4912 133.559C48.8899 134.015 48.2709 134.483 47.6231 134.965L29.9789 112.177C30.8052 111.258 31.6316 110.365 32.4507 109.477C34.3915 107.373 36.2246 105.385 37.9639 103.248C45.7402 93.6895 49.9985 82.2173 53.4423 71.2447C58.4618 55.2833 62.1221 38.9259 64.3841 22.3475C64.8594 19.3997 65.5485 16.4904 66.4455 13.6424C66.6379 12.9756 66.8302 12.3101 67.0166 11.6445C67.2896 10.8317 67.6604 10.0551 68.1212 9.33227C68.2524 9.10846 68.3837 8.8794 68.515 8.63983C71.8498 18.1948 71.3484 51.842 70.5523 64.2992ZM6.75162 119.629L19.1422 110.805L46.3145 145.629L34.431 154.398L6.75162 119.629ZM77.071 78.6022L77.2994 75.0954C77.3066 74.9116 77.327 74.7285 77.3598 74.548L77.4418 74.1372C77.6702 72.9649 77.8862 71.8584 79.0905 71.5919C79.2343 71.5591 79.3813 71.5427 79.5283 71.542C80.4367 71.542 81.1692 72.2246 81.7133 73.5767C82.661 75.8253 83.3981 78.1572 83.9159 80.5417C85.4236 88.5799 86.0878 96.7533 85.8988 104.929C85.8988 105.148 85.8784 105.372 85.862 105.597C85.774 106.194 85.8101 106.802 85.967 107.385C86.2131 108.086 86.8485 109.323 87.6735 109.505C88.4716 109.682 89.5815 108.68 89.9812 108.07C90.4294 107.236 90.6867 106.311 90.7353 105.365C92.0138 95.6158 91.5157 85.7163 89.2638 76.1449C88.5431 73.408 87.3814 70.8069 85.8246 68.4434C84.2992 66.0609 81.7874 64.7147 77.9341 64.2225V63.343C77.9341 62.5212 77.9341 61.7192 77.9341 60.9145L77.8927 54.3511C77.8461 46.9962 77.7923 39.6415 77.7306 32.287C77.7083 29.9334 77.6118 28.0011 77.4261 26.2047C76.9109 20.9815 77.2712 15.7088 78.4926 10.6043C78.5878 10.245 78.704 9.89167 78.8405 9.54624C78.8772 9.44582 78.9166 9.33949 78.958 9.22594C79.0597 9.34474 79.1581 9.45697 79.2527 9.56396C79.571 9.8645 79.823 10.2271 79.995 10.6292C80.1919 11.3249 80.4006 12.02 80.6067 12.7157C81.4068 15.2113 82.0441 17.756 82.5153 20.3338C83.0758 23.8557 83.5392 27.4597 83.9881 30.9442C84.6963 36.4469 85.4281 42.136 86.561 47.6545C89.5854 62.3795 92.7909 76.7304 98.7249 90.3999C102.089 98.4394 107.003 105.739 113.184 111.882C113.554 112.257 113.905 112.652 114.234 113.063C114.369 113.226 114.51 113.396 114.661 113.573L96.41 135.725C87.0191 129.627 78.3095 122.109 77.7221 108.719C77.6053 106.051 77.365 103.347 77.1314 100.733C76.6916 95.7766 76.2374 90.6519 76.6063 85.5824C76.7711 83.255 76.9207 80.9257 77.071 78.5996V78.6022ZM97.5487 146.422C97.6564 146.261 97.7627 146.099 97.869 145.937C98.2175 145.384 98.5976 144.852 99.0065 144.342C106.342 135.568 113.687 126.802 121.15 117.897L125.498 112.708L137.356 121.692C129.805 131.41 122.06 140.313 113.866 149.734C112.163 151.691 110.457 153.656 108.747 155.631L97.8513 147.164L97.6833 146.776C97.638 146.683 97.5999 146.588 97.5711 146.489C97.556 146.466 97.5514 146.441 97.5461 146.419L97.5487 146.422Z'/%3E%3Cpath d='M37.0352 148.643C37.5578 148.639 38.074 148.528 38.552 148.316C39.0301 148.105 39.4599 147.799 39.8147 147.415C40.1695 147.031 40.4415 146.578 40.6146 146.086C40.7878 145.593 40.858 145.069 40.821 144.548C40.7908 143.505 40.3595 142.514 39.6167 141.781C38.8738 141.049 37.8768 140.631 36.8336 140.616H36.7884C36.3138 140.596 35.8401 140.674 35.3966 140.844C34.9531 141.014 34.5492 141.273 34.2095 141.605C33.8413 142.037 33.564 142.537 33.3942 143.078C33.2245 143.619 33.1659 144.189 33.2218 144.753C33.2 145.307 33.2901 145.86 33.4863 146.378C33.6824 146.897 33.9809 147.371 34.364 147.772C35.0411 148.373 35.926 148.686 36.8304 148.644C36.8974 148.647 36.9663 148.645 37.0352 148.643Z'/%3E%3Cpath d='M106.699 149.935H106.785C109.017 149.89 110.349 148.34 110.352 145.788C110.352 143.459 109.051 142.025 106.866 141.954C106.324 141.936 105.783 142.03 105.279 142.23C104.774 142.431 104.316 142.733 103.934 143.119C103.543 143.51 103.236 143.976 103.032 144.489C102.827 145.002 102.73 145.552 102.746 146.104C102.77 147.134 103.197 148.113 103.937 148.83C104.677 149.547 105.669 149.944 106.699 149.935Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.seeley-impact-prayer-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 10.8px + 0.28cqw, 16px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E1D6A9;
    margin: 0 0 14px 0;
}
.seeley-impact-prayer-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    line-height: 1.7;
    color: #C5C5C5;
    margin: 0;
    text-transform: none;
}
/* Leerer Steckplatz: Zahl und Beschriftung in der Instanz geleert. */
.seeley-impact-stat:has(> .seeley-impact-number:empty):has(> .seeley-impact-label:empty) {
    display: none;
}
@container seeley-impact-cq (max-width: 640px) {
    .seeley-impact-stats > .seeley-impact-stat {
        flex: 1 1 45%;
        margin-bottom: 24px;
    }
    .seeley-impact-stat:not(:first-child)::before {
        display: none;
    }
}

/* === Icon Short Facts - Muster 1263 ======================================= */

.seeley-features-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-features-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-features-cq;
}
.seeley-features-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.seeley-features-item {
    flex: 1 1 0;
    min-width: 150px;
    text-align: center;
    padding: 0 clamp(14px, 1.8cqw, 30px);
    position: relative;
}
.wp-block-group.seeley-features-item {
    box-sizing: content-box;
}
.seeley-features-item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background-color: rgba(225, 214, 169, 0.25);
}
/*
 * Die Maske selbst - die Adresse des Bildes - setzt bausteine.js als
 * Inline-Stil, wie das Script der Kopie. Ohne Script bliebe die Flaeche ein
 * beiges Quadrat: die SVG-Dateien sind dunkel auf dunklem Grund.
 */
.seeley-features-icon-wrap {
    width: clamp(32px, 26.4px + 1.75cqw, 56px);
    height: clamp(32px, 26.4px + 1.75cqw, 56px);
    margin: 0 auto 14px auto;
    background-color: #E1D6A9;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.seeley-features-icon-wrap img {
    display: none;
}
.seeley-features-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 10.8px + 0.28cqw, 16px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #E1D6A9;
    margin: 0 0 8px 0;
}
.seeley-features-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 12.32px + 0.35cqw, 19px);
    line-height: 1.5;
    color: rgba(225, 214, 169, 0.75);
    margin: 0;
    text-transform: none;
}
/* Leerer Steckplatz: kein Icon, Titel und Text in der Instanz geleert. */
.seeley-features-item:not(:has(> .seeley-features-icon-wrap)):has(> .seeley-features-title:empty):has(> .seeley-features-text:empty) {
    display: none;
}
@container seeley-features-cq (max-width: 640px) {
    .seeley-features-row > .seeley-features-item {
        flex: 1 1 45%;
        margin-bottom: 32px;
    }
    .seeley-features-item:not(:first-child)::before {
        display: none;
    }
    .seeley-features-title {
        font-size: clamp(22px, 18.65px + 0.836cqw, 38px);
    }
    .seeley-features-text {
        font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    }
}

/*
 * === PAKET 33 ===============================================================
 *
 * Galerie (1259). Die Werte sind die der Kopie in vorlagen/06 (Stand 85e6b08),
 * ohne deren zwei !important. Vor dem Anlegen im ganzen Repo gesucht:
 * seeley-gallery steht nur in den drei Berichten und in vorlagen/06 - in
 * keiner CSS-Datei, keinem Plugin, nicht im Zusaetzlichen CSS (Regel 1).
 *
 * WO EIN KERNBLOCK EINE HUELLE BRINGT, FOLGT DAS CSS DER HUELLE:
 *
 *   core/image   <figure class="wp-block-image seeley-gallery-img">
 *                  <img decoding="async" src="..." alt="...">
 *   core/button  <div class="wp-block-buttons">
 *                  <div class="wp-block-button seeley-gallery-arrow ...">
 *                    <button class="wp-block-button__link wp-element-button">
 *
 * DER STECKPLATZ IST DAS <figure>. Die Lage in der Leiste (flex,
 * scroll-snap-align) steht am <figure>, die Masse, der Radius und das
 * Anheben beim Hover am <img> darin - so wie in der Kopie am <img>. Die Regeln
 * stehen an der Struktur (.wp-block-group.seeley-gallery-track > figure),
 * nicht an der Klasse: bausteine.js klont die Steckplaetze fuer den
 * Endlos-Sprung und nimmt dem Klon wie die Kopie das class-Attribut.
 *
 * Ein leerer Steckplatz braucht keine Regel: core/image ohne Adresse wird gar
 * nicht ausgeliefert (render_block_core_image(), blocks/image.php:56).
 *
 * DIE LIGHTBOX STEHT NICHT IM MUSTER. bausteine.js legt sie je Galerie an,
 * mit den Klassen der Kopie; ihre Regeln sind die der Kopie.
 *
 * BEI DEN KOPIEN AENDERT SICH NICHTS. Gleichnamige Regeln setzen nur, was die
 * Kopie selbst setzt, mit denselben Werten; die Regeln fuer die Huellen
 * (.wp-block-group..., figure, .wp-block-button__link, .wp-block-buttons)
 * treffen in keiner Kopie ein Element - dort sind es nackte <div>, <img> und
 * <button>.
 */

/* === Galerie - Muster 1259 ================================================ */

.seeley-gallery-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-gallery {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    padding: 0 clamp(20px, 5vw, 60px);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: seeley-gallery-cq;
}
.seeley-gallery-heading {
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 17.45px + 0.654cqw, 30px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E1D6A9;
    margin: 0;
    padding: 0 0 28px 0;
}
.seeley-gallery-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 8px 4px;
    scroll-behavior: smooth;
}
.seeley-gallery-track::-webkit-scrollbar { display: none; }
/*
 * Der Steckplatz. margin: 0 ersetzt :where(figure) { margin: 0 0 1em } und
 * .wp-block-image { margin: 0 0 1em } aus core - das <img> der Kopie hatte
 * keinen Rand.
 */
.wp-block-group.seeley-gallery-track > figure {
    scroll-snap-align: center;
    flex: 0 0 auto;
    margin: 0;
}
/*
 * Die Werte der Kopie fuer .seeley-gallery-track img. max-width: none steht
 * dort nicht: das <img> der Kopie hatte keine Obergrenze, am Kernblock setzt
 * .wp-block-image img { max-width: 100% } eine - gegen die Breite eines
 * <figure>, das sich selbst erst nach dem Bild richtet.
 */
.wp-block-group.seeley-gallery-track > figure img {
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    display: block;
    max-width: none;
    transition: transform 0.25s ease;
}
.wp-block-group.seeley-gallery-track > figure img:hover {
    transform: translateY(-3px);
}
.wp-block-group.seeley-gallery-small > figure img {
    width: 200px;
    aspect-ratio: 500 / 400;
    height: auto;
}
.seeley-gallery-small {
    padding-left: calc(50% - 100px);
    padding-right: calc(50% - 100px);
}
.seeley-gallery-large-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.seeley-gallery-large-wrap.is-open {
    max-height: 700px;
    margin-bottom: 14px;
}
.wp-block-group.seeley-gallery-large > figure img {
    width: min(600px, 78vw);
    aspect-ratio: 940 / 740;
    height: auto;
}
.seeley-gallery-large {
    padding-left: calc(50% - min(300px, 39vw));
    padding-right: calc(50% - min(300px, 39vw));
}
.seeley-gallery-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/*
 * Die Pfeile sind core/button mit tagName: button, wie in Paket 28. In der
 * Reihe steht die Huelle <div class="wp-block-buttons">, die Masse des Pfeils
 * stehen am <button class="wp-block-button__link">. Die letzten fuenf Zeilen
 * stehen in der Kopie nicht - sie kamen dort aus dem Browser; die Werte sind
 * die in Paket 28 am alten Pfeil auf Uganda gemessenen (dieselbe Regel, nur
 * mit seeley-related-arrow).
 */
.seeley-gallery-row > .wp-block-buttons {
    flex: 0 0 auto;
}
.seeley-gallery-arrow .wp-block-button__link {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 2px solid #E1D6A9;
    background: transparent;
    color: #E1D6A9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
    font-weight: 400;
    line-height: normal;
    padding: 1px 6px;
    letter-spacing: normal;
    text-transform: none;
}
.seeley-gallery-arrow .wp-block-button__link:hover {
    background-color: rgba(225, 214, 169, 0.2);
    transform: translateY(-2px);
}
/*
 * Der Umschaltknopf. Die Kopie setzt Schrift, Groesse, Laufweite, Schreibweise
 * und Innenabstand selbst; nur die Zeilenhoehe kam aus dem Browser (normal) -
 * :root :where(.wp-block-button__link) setzt sie auf inherit.
 */
.seeley-gallery-toggle-row > .wp-block-buttons {
    justify-content: center;
}
.seeley-gallery-toggle .wp-block-button__link {
    display: block;
    margin: 0 auto;
    background-color: transparent;
    color: #E1D6A9;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 999px;
    border: 2px solid #E1D6A9;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    line-height: normal;
}
.seeley-gallery-toggle .wp-block-button__link:hover {
    background-color: rgba(225, 214, 169, 0.2);
    transform: translateY(-2px);
}
.seeley-gallery-toggle-row {
    padding: 24px 0 32px 0;
    text-align: center;
}
/*
 * Alle acht grossen Steckplaetze leer: kein Umschaltknopf - sonst klappte er
 * eine leere Flaeche auf. Nur am Muster (.wp-block-group): in der Kopie steht
 * in der grossen Leiste ein <img>, kein <figure>, und die Regel wuerde dort
 * den Knopf verstecken.
 */
.wp-block-group.seeley-gallery:not(:has(.seeley-gallery-large > figure)) .seeley-gallery-toggle-row {
    display: none;
}
.seeley-gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.seeley-gallery-lightbox.is-open {
    display: flex;
}
.seeley-gallery-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
}
.seeley-gallery-lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.seeley-gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 26px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    cursor: pointer;
}
.seeley-gallery-lightbox-nav.prev { left: 16px; }
.seeley-gallery-lightbox-nav.next { right: 16px; }

/*
 * === PAKET 34 ===============================================================
 *
 * Fussbereich (1271). Ein synchronisiertes Muster aus Kernbloecken ohne
 * Muster-Ueberschreibungen: was je Bericht wechselt, liest die Bindings-Quelle
 * seeley/reiseziel aus dem Reiseziel des Beitrags (seeley-logbuch.php, am
 * Ende) - Titel im Feld neben der Nadel, fuenf Landesangaben, Name und Link
 * der Nadel. Die Nadelposition setzt ein Filter als zwei CSS-Variablen an
 * .seeley-footer-cta-globe.
 *
 * REGEL 1. seeley-footer-cta stand vor dem Paket nur in den drei Berichten
 * und in vorlagen/15 - im Zusaetzlichen CSS 0, in dieser Datei 0, in
 * seeley-basis nur ein Kommentar, in footer-pruefen.php als "darf auf
 * Berichten nicht kommen". Die Regeln sind neu, die Werte die der
 * Uganda-Kopie (= vorlagen/15 vor Paket 34), ohne ihre 54 !important.
 *
 * DIE GLEICHNAMIGEN REGELN TREFFEN AUCH DIE KOPIEN - die Klassennamen sind
 * dieselben. Deshalb setzt jede Regel, deren Selektor auch in der Kopie steht,
 * nur Eigenschaften, die die Kopie selbst setzt, mit denselben Werten. Die
 * Kopie steht spaeter im Dokument und gewinnt ohnehin. Alles, was nur das
 * Muster braucht, steht an einer Huelle, die keine Kopie hat
 * (.wp-block-group, .wp-block-image, .wp-block-button, .wp-block-buttons,
 * .wp-block-button__link, p).
 *
 * NICHT UEBERNOMMEN, weil sie am Muster die falsche Huelle traefen - ihre
 * Werte stehen an den Huellenregeln:
 *   .seeley-footer-cta-btn (+ :hover)   Klasse am <div class="wp-block-button">,
 *                                       nicht am Link - dort gaebe es einen
 *                                       zweiten Rahmen
 *   .seeley-footer-cta-pin img          kein <img>, das Nadelbild ist Hintergrund
 *   .seeley-footer-cta-tooltip-row span:first-child / :last-child
 *   .seeley-footer-cta-socials .wp-social-link svg
 *   left / top der Nadel                stehen in jeder Kopie selbst; am Muster
 *                                       ueber die zwei Variablen
 *
 * DIE HUELLEN.
 *
 *   Bilder      core/image, die Klasse am <figure>. margin: 0 ersetzt
 *               .wp-block-image und :where(figure) { margin: 0 0 1em } - unter
 *               der Karte stuende sonst 1em, und der Globus waere hoeher.
 *   Knopf       core/button. Die Werte der Kopie am Link. Die Huelle
 *               .wp-block-buttons im Textblock ist display: block: der Link der
 *               Kopie stand inline im Textblock und folgte dessen text-align
 *               (mittig, ab 900 px links); in einem Flex-Container wirkt
 *               text-align nicht. width: auto gegen
 *               .wp-block-buttons .wp-block-button__link { width: 100% }.
 *   Nadel       core/button mit gebundenem Link und Text (Entscheidung B). Der
 *               Text ist der zugaengliche Name ("Uganda") und nur fuer
 *               Screenreader da: text-indent: 100% mit overflow: hidden. Das
 *               Nadelbild ist Hintergrund, 100 % x 100 % wie das <img> der
 *               Kopie. Gegen core: padding 0, border-radius 0 (sonst schnitte
 *               :where(.wp-block-button__link) { border-radius: 9999px } die
 *               Ecken des Bilds ab), Hintergrundfarbe transparent - auch im
 *               Hover, (0,2,0) gegen :root :where(...:hover) (0,1,0).
 *   Tooltip     core/group, Zeilen aus zwei core/paragraph statt zwei <span>.
 *               margin: 0 an den Absaetzen.
 *   Social      core/buttons mit vier core/button, Klassen wp-social-link und
 *               wp-social-link-<netz> wie die Kopie bzw. core. Das Symbol ist
 *               eine Maske am ::before, inset 20 % - so gross und so mittig wie
 *               das <svg> der Kopie mit 60 %. Der Text ist der Name, den die
 *               Kopie als aria-label trug, und nur fuer Screenreader da.
 *
 * border-box AUS PAKET 32. core/group rechnet border-box, die <div> der Kopie
 * content-box. Betroffen ist nur eine Gruppe mit Innenabstand UND Mass: der
 * Tooltip (padding 14px 18px, min-width 200px, max-width 80vw). Bei 375 px
 * waeren das 262 statt 300 px Inhalt, und die Zeilen stehen nowrap -
 * "Waehrung  Uganda-Schilling (UGX)" liefe hinaus. Deshalb content-box an
 * .wp-block-group.seeley-footer-cta-tooltip. -content hat Innenabstand, aber
 * kein Mass (unter 900 px Flex-Spalte mit width auto, darueber padding 0).
 * Gerechnet, nicht im Browser gemessen.
 *
 * DIE FALLE AUS PAKET 28 - Blockrand an einem ersten oder letzten Kind einer
 * Flow-Gruppe. Ueberschrift (0 0 0.5em), Titel "Folge uns" (0 0 8px) und
 * Tooltip-Titel (0 0 10px) sind je ERSTES Kind; der Untertext (0 0 1.2em) ist
 * mittleres Kind. Keiner verliert etwas. -outer mit margin-bottom: -1px
 * verliert als letztes Kind des Inhalts, genau wie die Kopie (Paket 27).
 *
 * WARUM DIE 54 !important FEHLEN. Gegen die Ueberschrift, den Untertext und
 * die Social-Links setzt auf einem Bericht keine Regel dieselben
 * Eigenschaften mit hoeherer Spezifitaet: p bekommt aus den globalen Stilen nur
 * text-wrap, die Button-Regeln der globalen Stile stehen unter :root :where()
 * (0,1,0), die von core unter :where() (0,0,0) oder mit (0,2,0) VOR dieser
 * Datei. position: absolute an Nadel und Tooltip setzt keine Regel fuer
 * .wp-block-group anders. Die Zentrierung des Containers wie in Paket 27.
 *
 * WEG ZURUECK: diesen Abschnitt bis zum Dateiende entfernen, dazu die zwei
 * Selektoren -whatsapp / -youtube in den Maskenregeln oben.
 */

/* === Fussbereich - Muster 1271 ============================================ */

.seeley-footer-cta-outer {
    background-color: #262626;
    width: 100%;
    margin-bottom: -1px;
}
.seeley-footer-cta-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: #262626;
    container-type: inline-size;
    container-name: seeley-footer-cta-cq;
}
.seeley-footer-cta {
    position: relative;
}
.seeley-footer-cta-bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.seeley-footer-cta-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.wp-block-image.seeley-footer-cta-bg {
    margin: 0;
}
.wp-block-image.seeley-footer-cta-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.seeley-footer-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(24px, 4cqw, 40px);
    padding: clamp(56px, 10cqw, 90px) clamp(20px, 5cqw, 56px) clamp(28px, 5cqw, 56px) clamp(20px, 5cqw, 56px);
}
.seeley-footer-cta-textblock {
    width: 100%;
    max-width: 520px;
}
.seeley-footer-cta-heading {
    color: #E1D6A9;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 18.65px + 0.836cqw, 38px);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 0.5em 0;
}
.seeley-footer-cta-subtext {
    color: #E1D6A9;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 13.96px + 0.523cqw, 24px);
    line-height: 1.45;
    text-transform: none;
    margin: 0 0 1.2em 0;
}
.seeley-footer-cta-textblock > .wp-block-buttons {
    display: block;
}
.seeley-footer-cta-btn .wp-block-button__link {
    width: auto;
    white-space: nowrap;
    background-color: transparent;
    color: #E1D6A9;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 12.32px + 0.35cqw, 19px);
    padding: clamp(11px, 8px + 0.6cqw, 18px) clamp(22px, 16px + 1.2cqw, 36px);
    border-radius: 999px;
    border: 2px solid #E1D6A9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.seeley-footer-cta-btn .wp-block-button__link:hover {
    background-color: rgba(225, 214, 169, 0.20);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.seeley-footer-cta-globe {
    position: relative;
    width: min(360px, 88cqw);
}
.seeley-footer-cta-map {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.wp-block-image.seeley-footer-cta-map {
    margin: 0;
}
.wp-block-image.seeley-footer-cta-map img {
    display: block;
    width: 100%;
    height: auto;
}
/*
 * PAKET P7 (20.09.2026): DER SCHUB DER NADEL. --seeley-nadel-schub setzt
 * bausteine.js, wenn die Nadel sonst aus dem FENSTER ragte - nicht aus der
 * Karte: ueber den Kartenrand darf sie hinaushaengen, das tut sie seit
 * Paket 27. Ohne JavaScript ist er 0px und alles steht wie vor P7.
 *
 * Gemessen: bei 1440 px kommt die Karte nur 14,4 px an den Fensterrand, und
 * die Nadel ist 32,2 px breit. Eine Nadel auf 100 % ragte deshalb 1,7 px
 * hinaus - und beim Ueberfahren, wo sie auf 135 % waechst, 7,3 px. Das war
 * der Restbefund von P6.
 */
.seeley-footer-cta-pin-wrap {
    position: absolute;
    width: 5.2%;
    aspect-ratio: 1 / 1;
    transform: translate(calc(-50% + var(--seeley-nadel-schub, 0px)), -100%);
    z-index: 3;
}
/*
 * Die Nadelposition. Die zwei Variablen setzt seeley_logbuch_nadel_position()
 * an .seeley-footer-cta-globe, aus seeley_ziel_karte_links / _oben des
 * Reiseziels. Die Spitze der Nadel ist der Anker: translate(-50%, -100%) wie
 * in der Kopie (Entscheidung A).
 *
 * KEIN RUECKFALL IM var() (Nachtrag 2, Dennis 15.09.2026). Ohne Reiseziel oder
 * ohne einen der zwei Werte liefert derselbe Filter die Nadel gar nicht aus -
 * steht sie im HTML, stehen beide Variablen an .seeley-footer-cta-globe. Der
 * Rueckfall 58 % / 62 % trug nur den Fall ohne Reiseziel, und dort stand die
 * Nadel sichtbar bei Uganda. Im Block-Editor laedt diese Datei nicht
 * (seeley_logbuch_bausteine_anmelden: wp_enqueue_scripts unter is_singular).
 */
.wp-block-group.seeley-footer-cta-pin-wrap {
    left: var(--seeley-nadel-links);
    top: var(--seeley-nadel-oben);
}
.seeley-footer-cta-pin {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
    transition: transform 0.25s ease, filter 0.25s ease;
}
.seeley-footer-cta-pin-wrap:hover .seeley-footer-cta-pin {
    transform: scale(1.35);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
/*
 * Die Nadel am Kernblock: die Huelle .wp-block-buttons fuellt die Nadel,
 * .wp-block-button traegt Schatten und Hover (Klasse seeley-footer-cta-pin,
 * Regeln darueber) - gegen .wp-block-buttons > .wp-block-button
 * { display: inline-block } (0,2,0) mit derselben Spezifitaet dahinter.
 */
.seeley-footer-cta-pin-wrap > .wp-block-buttons {
    display: block;
    width: 100%;
    height: 100%;
}
.wp-block-button.seeley-footer-cta-pin {
    display: block;
}
.seeley-footer-cta-pin .wp-block-button__link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent url("https://seeley-ontourwithgod.de/wp-content/uploads/2026/07/2026-07-02-Blog-Footer-Pin.png") center / 100% 100% no-repeat;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
/*
 * PAKET P6 (20.09.2026): DER SCHUB. --seeley-tooltip-schub setzt
 * bausteine.js, wenn der Tooltip sonst aus dem Fenster liefe; ohne JavaScript
 * ist er 0px und alles steht wie vor P6. Der Zeiger unten bekommt ihn mit
 * umgekehrtem Vorzeichen, damit er auf der Nadel bleibt - er wandert also im
 * Tooltip nach der anderen Seite. clamp() haelt ihn dabei im Kasten: 14 px
 * vom Rand, das ist genau seine Breite (2 x 7 px Rahmen).
 */
.seeley-footer-cta-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(calc(-50% + var(--seeley-tooltip-schub, 0px)), -14px);
    background-color: #1c1f1a;
    border: 1px solid rgba(225, 214, 169, 0.3);
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 200px;
    max-width: 80vw;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.wp-block-group.seeley-footer-cta-tooltip {
    box-sizing: content-box;
}
.seeley-footer-cta-pin-wrap:hover .seeley-footer-cta-tooltip {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.01s, visibility 0s linear 0s;
}
.seeley-footer-cta-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: clamp(14px, calc(50% - var(--seeley-tooltip-schub, 0px)), calc(100% - 14px));
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #1c1f1a;
}
.seeley-footer-cta-tooltip-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #E1D6A9;
    margin: 0 0 10px 0;
    white-space: nowrap;
    display: block;
}
.seeley-footer-cta-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.9;
    white-space: nowrap;
}
/*
 * NACHTRAG PAKET 34 (Regel 5 der Hauptsitzung, 15.09.2026): white-space:
 * nowrap STEHT HIER NOCHMAL, obwohl -tooltip-row es schon setzt. In der Kopie
 * erbten die zwei <span> das nowrap der Zeile. Ein <p> erbt es nicht: das
 * Theme setzt p { text-wrap: pretty } (twentytwentyfive-style-inline-css), und
 * die Kurzschreibweise setzt text-wrap-mode am <p> auf wrap - das schlaegt das
 * geerbte nowrap. Gemessen: Tooltip 242 statt 306 px breit, drei Zeilen
 * zweizeilig, bei 1440 / 768 / 375. (0,2,1) gegen (0,0,1).
 */
.wp-block-group.seeley-footer-cta-tooltip-row > p {
    margin: 0;
    white-space: nowrap;
}
.wp-block-group.seeley-footer-cta-tooltip-row > p:first-child {
    color: #C7C7BF;
    font-weight: 700;
}
.wp-block-group.seeley-footer-cta-tooltip-row > p:last-child {
    color: #E1D6A9;
    font-weight: 500;
}

/*
 * PAKET P5b (20.09.2026): UNTER 360 px DARF DER TOOLTIP UMBRECHEN.
 *
 * Er lief bei 320 px aus dem Fenster - 0,7 px auf dem Namibia-Bericht,
 * 9,5 px auf dem Uganda-Bericht, und das war der Querlauf der ganzen Seite.
 * Gemessen, warum: eine Zeile braucht 268 px, dazu 36 px Innenabstand und
 * 2 px Rahmen, also 306 px Gesamtbreite. Die Nadel steht bei 320 px Fenster
 * auf 182,5 px (Uganda) - mittig darueber braeuchte der Tooltip rechts
 * 153 px, vorhanden sind 137,5. Er kann bei dieser Breite nicht beides
 * sein: mittig ueber der Nadel und im Fenster.
 *
 * WAS HIER NICHT GEHT, und beides ist nachgerechnet statt vermutet:
 * box-sizing auf border-box zu stellen nimmt bei 375 px 6 px zu viel weg
 * (262 statt 268 px Inhalt) - genau die Falle, die Paket 32 im Kopf dieser
 * Datei beschrieben hat. max-width kuerzen tut dasselbe.
 *
 * ALSO DARF DER INHALT UMBRECHEN, aber nur dort, wo es sonst nicht passt.
 * Oberhalb bleibt alles wie es ist: bei 375 px steht der Tooltip mit
 * 306 px Breite und rechtem Rand 367,1 px im Fenster (gemessen).
 *
 * border-box gilt hier ausdruecklich, damit der Deckel die 100vw wirklich
 * einhaelt - 100vw - 64px sind bei 320 px Fenster 256 px Gesamtbreite,
 * mittig ueber der Nadel also 54,5 bis 310,5 px. 9,5 px Luft.
 *
 * DIE GRENZE DIESER LOESUNG steht in der Karte: steht eine kuenftige Nadel
 * weit am Kartenrand, reicht auch das nicht. Dennis hat sie am 20.09.2026
 * in Kenntnis dessen gewaehlt - der Weg fuer diesen Fall waere ein Schubs
 * in bausteine.js.
 */
@media (max-width: 360px) {
    .wp-block-group.seeley-footer-cta-tooltip {
        box-sizing: border-box;
        max-width: calc(100vw - 64px);
    }
    .wp-block-group.seeley-footer-cta-tooltip-row > p {
        white-space: normal;
    }
}
.seeley-footer-cta-follow {
    text-align: center;
}
.seeley-footer-cta-follow-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 10.65px + 0.35cqw, 17px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E1D6A9;
    margin: 0 0 8px 0;
    white-space: nowrap;
}
.seeley-footer-cta-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 7px + 1cqw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Die Liste der Kopie bricht nicht um; .is-layout-flex setzt flex-wrap: wrap. */
.wp-block-buttons.seeley-footer-cta-socials {
    flex-wrap: nowrap;
}
.seeley-footer-cta-socials .wp-social-link {
    background: transparent;
    border-radius: 999px;
    width: clamp(34px, 27px + 2.3cqw, 48px);
    height: clamp(34px, 27px + 2.3cqw, 48px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.seeley-footer-cta-socials .wp-social-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.seeley-footer-cta-socials .wp-social-link:hover {
    opacity: 1;
    transform: translateY(-2px);
}
/*
 * Der Social-Link am Kernblock. Der Text (Instagram, Facebook, ...) ist der
 * zugaengliche Name - in der Kopie das aria-label - und nur fuer
 * Screenreader da. (0,3,0) gegen die Regel darueber (0,2,1), die am Muster
 * display: flex setzen wuerde: der Text naehme dann Platz neben dem Symbol.
 */
.seeley-footer-cta-socials .wp-social-link .wp-block-button__link {
    position: relative;
    display: block;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.seeley-footer-cta-socials .wp-social-link .wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: 20%;
    background-color: #E1D6A9;
}
/*
 * Instagram und Facebook - die Pfade der Kopie (viewBox 24 x 24). WhatsApp und
 * YouTube stehen an den Maskenregeln oben, bei "WhatsApp-Spalte" und "YouTube".
 */
.seeley-footer-cta-socials .wp-social-link-instagram .wp-block-button__link::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.72 0 3.06.01 4.12.06 1.07.05 1.79.22 2.43.46.66.25 1.22.6 1.77 1.15.55.55.9 1.11 1.15 1.77.24.64.41 1.36.46 2.43C21.99 8.94 22 9.28 22 12s-.01 3.06-.06 4.12c-.05 1.07-.22 1.79-.46 2.43a4.9 4.9 0 0 1-1.15 1.77 4.9 4.9 0 0 1-1.77 1.15c-.64.24-1.36.41-2.43.46C15.06 21.99 14.72 22 12 22s-3.06-.01-4.12-.06c-1.07-.05-1.79-.22-2.43-.46a4.9 4.9 0 0 1-1.77-1.15 4.9 4.9 0 0 1-1.15-1.77c-.24-.64-.41-1.36-.46-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.07.22-1.79.46-2.43.25-.66.6-1.22 1.15-1.77A4.9 4.9 0 0 1 5.44 2.53c.64-.24 1.36-.41 2.43-.46C8.94 2.01 9.28 2 12 2zm0 1.8c-2.67 0-2.99.01-4.04.06-.98.04-1.5.2-1.86.34-.47.18-.8.4-1.15.75-.35.35-.57.68-.75 1.15-.14.36-.3.88-.34 1.86C3.81 9 3.8 9.33 3.8 12s.01 2.99.06 4.04c.04.98.2 1.5.34 1.86.18.47.4.8.75 1.15.35.35.68.57 1.15.75.36.14.88.3 1.86.34 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.98-.04 1.5-.2 1.86-.34.47-.18.8-.4 1.15-.75.35-.35.57-.68.75-1.15.14-.36.3-.88.34-1.86.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.98-.2-1.5-.34-1.86a3.1 3.1 0 0 0-.75-1.15 3.1 3.1 0 0 0-1.15-.75c-.36-.14-.88-.3-1.86-.34C14.99 3.81 14.67 3.8 12 3.8zm0 3.05a5.15 5.15 0 1 1 0 10.3 5.15 5.15 0 0 1 0-10.3zm0 1.8a3.35 3.35 0 1 0 0 6.7 3.35 3.35 0 0 0 0-6.7zm5.35-1.99a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.72 0 3.06.01 4.12.06 1.07.05 1.79.22 2.43.46.66.25 1.22.6 1.77 1.15.55.55.9 1.11 1.15 1.77.24.64.41 1.36.46 2.43C21.99 8.94 22 9.28 22 12s-.01 3.06-.06 4.12c-.05 1.07-.22 1.79-.46 2.43a4.9 4.9 0 0 1-1.15 1.77 4.9 4.9 0 0 1-1.77 1.15c-.64.24-1.36.41-2.43.46C15.06 21.99 14.72 22 12 22s-3.06-.01-4.12-.06c-1.07-.05-1.79-.22-2.43-.46a4.9 4.9 0 0 1-1.77-1.15 4.9 4.9 0 0 1-1.15-1.77c-.24-.64-.41-1.36-.46-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.07.22-1.79.46-2.43.25-.66.6-1.22 1.15-1.77A4.9 4.9 0 0 1 5.44 2.53c.64-.24 1.36-.41 2.43-.46C8.94 2.01 9.28 2 12 2zm0 1.8c-2.67 0-2.99.01-4.04.06-.98.04-1.5.2-1.86.34-.47.18-.8.4-1.15.75-.35.35-.57.68-.75 1.15-.14.36-.3.88-.34 1.86C3.81 9 3.8 9.33 3.8 12s.01 2.99.06 4.04c.04.98.2 1.5.34 1.86.18.47.4.8.75 1.15.35.35.68.57 1.15.75.36.14.88.3 1.86.34 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.98-.04 1.5-.2 1.86-.34.47-.18.8-.4 1.15-.75.35-.35.57-.68.75-1.15.14-.36.3-.88.34-1.86.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.98-.2-1.5-.34-1.86a3.1 3.1 0 0 0-.75-1.15 3.1 3.1 0 0 0-1.15-.75c-.36-.14-.88-.3-1.86-.34C14.99 3.81 14.67 3.8 12 3.8zm0 3.05a5.15 5.15 0 1 1 0 10.3 5.15 5.15 0 0 1 0-10.3zm0 1.8a3.35 3.35 0 1 0 0 6.7 3.35 3.35 0 0 0 0-6.7zm5.35-1.99a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.seeley-footer-cta-socials .wp-social-link-facebook .wp-block-button__link::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.51 17.52 2 12 2S2 6.51 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.87h2.78l-.44 2.91h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.51 17.52 2 12 2S2 6.51 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.87h2.78l-.44 2.91h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@container seeley-footer-cta-cq (min-width: 900px) {
    .seeley-footer-cta {
        aspect-ratio: 1920 / 503;
    }
    .seeley-footer-cta-bg {
        object-position: center;
    }
    .wp-block-image.seeley-footer-cta-bg img {
        object-position: center;
    }
    .seeley-footer-cta-content {
        position: absolute;
        inset: 0;
        display: block;
        padding: 0;
        text-align: left;
    }
    .seeley-footer-cta-textblock {
        position: absolute;
        left: 4%;
        top: 50%;
        transform: translateY(-50%);
        width: 40cqw;
        max-width: none;
        text-align: left;
    }
    .seeley-footer-cta-heading {
        white-space: nowrap;
        font-size: clamp(11px, 5.3px + 1.4cqw, 32px);
    }
    .seeley-footer-cta-subtext {
        font-size: clamp(9px, 4.2px + 1.2cqw, 22px);
    }
    .seeley-footer-cta-btn .wp-block-button__link {
        font-size: clamp(8px, 3.6px + 0.87cqw, 20px);
        padding: clamp(6px, 2.6px + 0.96cqw, 24px) clamp(12px, 5.2px + 1.9cqw, 48px);
    }
    .seeley-footer-cta-globe {
        position: absolute;
        right: 1%;
        top: 50%;
        transform: translateY(-50%);
        width: 43cqw;
    }
    .seeley-footer-cta-follow {
        position: absolute;
        left: 50%;
        bottom: 5%;
        transform: translateX(-50%);
    }
    .seeley-footer-cta-follow-title {
        font-size: clamp(7px, 3.6px + 0.47cqw, 17px);
    }
    .seeley-footer-cta-socials {
        gap: clamp(5px, 1.9px + 0.66cqw, 19px);
    }
    .seeley-footer-cta-socials .wp-social-link {
        width: clamp(22px, 10.2px + 1.5cqw, 50px);
        height: clamp(22px, 10.2px + 1.5cqw, 50px);
    }
}

/*
 * === PAKET 34b ==============================================================
 *
 * Tastaturfokus der neun Button-Arten aus den Mustern: Header-Tag (1510),
 * WhatsApp (1964), Pfeile "Weitere Blog-Beitraege" (1270), YouTube-Banner
 * (1277), Galerie-Pfeile und -Umschalter (1259), Knopf, Nadel und
 * Social-Links des Fussbereichs (1271).
 *
 * WARUM. Alle neun tragen .wp-block-button__link und bekommen aus den
 * globalen Stilen :root :where(.wp-element-button:focus,
 * .wp-block-button__link:focus) { outline-color: accent-4 } - Grau
 * rgb(104, 104, 104), gegen den dunklen Grund #262626 nur 2,72 : 1 (WCAG
 * verlangt fuer Fokusanzeigen 3 : 1). Die alten Kopien hatten keinen
 * gestalteten Ring, nur die Fokusfarbe des Browsers. Beige #E1D6A9 steht
 * gegen #262626 bei 10,37 : 1 (Dennis, Entscheidung A).
 *
 * NUR DIE FARBE. Stil, Breite und Abstand 2 px kommen weiter aus den
 * globalen Stilen (Entscheidung B) - neben dem Knopf liegt der Ring auf dem
 * Grund, am beigen WhatsApp-Knopf ist er nur so sichtbar.
 *
 * :focus STATT :focus-visible, weil die globale Regel an :focus haengt -
 * sonst bliebe der Ring nach einem Mausklick grau. (0,3,0) gegen (0,1,0),
 * kein !important.
 *
 * REGEL 1. Vor dem Anlegen: in dieser Datei stand keine Fokusregel
 * (grep focus: 0). Die Kopien tragen die Klassen am <a> selbst, nicht an
 * einer Huelle mit .wp-block-button__link darin - sie trifft die Regel nicht.
 * Die Lightbox-Pfeile (.seeley-gallery-lightbox-nav) haben keine
 * .wp-block-button__link und sind nicht betroffen.
 *
 * WEG ZURUECK: diesen Abschnitt bis zum Dateiende entfernen.
 */

.seeley-header-hero-tag .wp-block-button__link:focus,
.seeley-wa-btn .wp-block-button__link:focus,
.seeley-related-arrow .wp-block-button__link:focus,
.seeley-video-banner-btn .wp-block-button__link:focus,
.seeley-gallery-arrow .wp-block-button__link:focus,
.seeley-gallery-toggle .wp-block-button__link:focus,
.seeley-footer-cta-btn .wp-block-button__link:focus,
.seeley-footer-cta-pin .wp-block-button__link:focus,
.seeley-footer-cta-socials .wp-social-link .wp-block-button__link:focus {
    outline-color: #E1D6A9;
}


/* === Lange Woerter - Paket P5c ============================================ */
/*
 * DEUTSCHE WOERTER SIND LANG, UND DIE KAESTCHEN DER MUSTER SIND SCHMAL.
 *
 * Gemessen am 20.09.2026 auf dem Uganda-Bericht: "EIGENVERANTWORTUNG" braucht
 * in .seeley-features-title 330,7 px (22 px Schrift, letter-spacing 2,2), sein
 * Kaestchen ist bei 320 px Fenster 252 px breit und bei 375 px 307 px.
 * "Entwicklungsprojekte" braucht in .seeley-impact-label 207,1 px bei 144,8 px
 * Kaestchen. overflow-wrap stand auf normal, hyphens auf manual - also lief
 * der Text aus seinem Kaestchen heraus und zog die ganze Seite in den
 * Querlauf: 45 px bei 320, 25 bei 340, 5 bei 360, 10 bei 768.
 *
 * DAS KAESTCHEN VERRAET ES NICHT. getBoundingClientRect() des Absatzes bleibt
 * 252 px breit; nur der gezeichnete Text ragt hinaus. Gefunden wurde es, indem
 * der rechte Rand des Scrollbereichs abgetastet wurde - siehe den Kopf von
 * werkzeuge/querlauf-pruefen.mjs.
 *
 * ZWEI EIGENSCHAFTEN, EIN AUFHAENGER. hyphens und overflow-wrap werden
 * geerbt, und bausteine.css laedt nur auf Einzelbeitraegen
 * (is_singular('post') in seeley-logbuch.php) - .entry-content ist deshalb
 * genau die Wurzel der Berichtsinhalte und keine Zeile mehr.
 *
 *   hyphens: auto          trennt nach deutschen Regeln, mit Trennstrich.
 *                          Die Seite meldet lang="de", sonst tut es nichts.
 *   overflow-wrap: break-word   ist die Notbremse fuer Woerter, die auch
 *                          getrennt nicht passen. Sie greift nur dann.
 *
 * Es gilt damit fuer jeden kuenftigen Bericht mit, ohne dass jemand daran
 * denken muss - so entschieden von Dennis am 20.09.2026. Die Schreibweise
 * ist nicht neu in dieser Datei: .seeley-related-title tragt overflow-wrap:
 * break-word seit Paket 30.
 *
 * DIE TRENNUNG GILT NUR BIS 900 px, und das ist gemessen entschieden. Ein
 * erster Bau hatte sie ohne Grenze: der Fliesstext eines Berichts bekam
 * dadurch 48 Trennungen bei 375 px, 31 bei 768 - und 27 bei 1440, wo
 * ueberhaupt nichts ueberlaeuft. Am Schreibtisch bringt sie also nichts fuer
 * den Fehler und aendert nur das Schriftbild. Darueber bleibt die Notbremse
 * allein stehen: ein Wort, das auch dort nicht passt, bricht ohne
 * Trennstrich um, statt die Seite quer zu ziehen.
 *
 * WEG ZURUECK: diesen Abschnitt entfernen.
 */
.entry-content {
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .entry-content {
        hyphens: auto;
    }
}