/*!
 * startseite.css - Paket 19 des Sanierungsfahrplans.
 *
 * Das Design der Startseite: Scroll-Pin, Karussell, Karten, Landkarte,
 * Panel-Navigation. Bis zum 12.09.2026 gab seeley_logbuch_landkarte_css()
 * diesen Text zurueck, und wp_add_inline_style() haengte ihn als
 * <style id="seeley-landkarte-inline-css"> in den Kopf. Jetzt ist er eine
 * Datei, die der Plugin-Datei-Editor als CSS kennt - mit Syntaxpruefung und
 * Klammernpaaren. Z09, Entscheidung 3.
 *
 * SIE HEISST startseite.css UND NICHT landkarte.css, weil sie mehr ist als
 * die Landkarte: 23 Abschnitte, von SCROLL-PIN bis REDUCED MOTION. Die
 * Kennung des <link> ist trotzdem seeley-landkarte-css - das ist der Haken,
 * unter dem Paket 12 Design und Skript angemeldet hat, und ein zweiter Name
 * dafuer waere eine zweite Aenderung in einem Paket (Regel 4).
 *
 * GELADEN AM HAKEN, NICHT IM SHORTCODE - wie logbuch.css seit Paket 18.
 * seeley_logbuch_landkarte_anmelden() meldet die Datei an wp_enqueue_scripts
 * an, unter der Bedingung seeley_logbuch_shortcode_noetig( 'seeley_landkarte' ).
 * Fuer diesen Shortcode greift deren ERSTER Zweig: er steht in
 * templates/startseite.html, nicht im Seiteninhalt. Der Ort ist derselbe wie
 * vorher - schon das eingebettete CSS hing an diesem Haken, seit Paket 12.
 *
 * DIE STELLE IN DER KASKADE AENDERT SICH NICHT, und das ist gemessen, nicht
 * erwartet. Vorher wie nachher ist es die ACHTE von neun Stilquellen im Kopf,
 * hinter global-styles-inline-css und vor twentytwentyfive-style-inline-css.
 * Der Grund ist die Warteschlange: WP_Styles druckt in der Reihenfolge des
 * Einreihens, und die haengt am Haken, nicht daran, ob eine Quelle eine Datei
 * ist oder eingebettet. Warum das ueberhaupt nachgesehen gehoert, steht bei
 * Paket 18 - dort haette die falsche Stelle eine Regel bei Gleichstand
 * gekippt.
 *
 * ES IST EIN UMZUG MIT GENAU EINER AUSNAHME. Der Abschnitt darunter steht
 * Zeichen fuer Zeichen wie im Heredoc SEELEYMAPCSS, das seinerseits Zeichen
 * fuer Zeichen aus Snippet 1603 stammt - abzueglich der einzigen toten Regel
 * des Bestands:
 *
 *     .seeley-scrollpin-inner.seeley-scrollpin-exhausted { position: static }
 *
 * 78 Bytes samt Leerzeile davor. Sie ist tot, und das ist nachgezaehlt statt
 * vermutet: seeley-scrollpin-exhausted kommt im ganzen Repo nur hier und in
 * der stillgelegten Kopie snippets/1603-blog-preview-css.php vor - in keinem
 * Markup, in keinem classList.add, in keiner Zeichenkette des JavaScripts.
 * Z09 hatte sie gefunden, der Fahrplan fuehrt sie bei Paket 19. Uebrig
 * bleiben 34.263 Zeichen; der Heredoc-Koerper mass 34.344, davon zwei
 * fuehrende Umbrueche und einer am Ende.
 *
 * WARUM DIESES CSS NIE AUS DEM SHORTCODE KAM - der Fund von Paket 12, und
 * er gilt weiter. Der erste Bau gab es aus seeley_logbuch_landkarte_render()
 * zurueck, so wie Paket 10 es fuer /blog/ tat. Gemessen kam es mit 781
 * <p>-Tags MITTEN IM STILBLOCK an: ein <p> vor einem Selektor macht die Regel
 * ungueltig, und der Browser wirft sie weg. Die Ursache steht in
 * wp-includes/block-template.php, get_the_block_template_html():
 *
 *     $content = shortcode_unautop( $content );
 *     $content = do_shortcode( $content );      // zuerst
 *     ...
 *     $content = do_blocks( $content );          // erst danach
 *
 * In einem BLOCK-TEMPLATE wird der Shortcode aufgeloest, BEVOR die Bloecke
 * laufen - render_block_core_shortcode() ist wpautop() und bekommt dadurch
 * die fertige Ausgabe zu fassen. In Seiteninhalt ist es umgekehrt (do_blocks
 * bei 9, wpautop bei 10, do_shortcode bei 11), deshalb kam /blog/ unbeschadet
 * durch. Das erklaert auch die sieben <p>-Reparaturen in 1600 und die
 * Umbruchloeschung in Zeile 1328 der Landkarte: sie sind lebendig und sie
 * wehren genau diesen Griff ab.
 *
 * DIE ABSCHNITTSMARKE IST NICHT DEKORATION. werkzeuge/css-datei-lib.php
 * schneidet an ihr, wenn ein Werkzeug diesen Stilblock mit dem Snippet im
 * Repo vergleicht. Wer sie umschreibt, macht die Werkzeuge blind - deshalb
 * steht derselbe Satz im Kopf jeder CSS-Datei.
 *
 * DIE !important SIND NICHT NEU. Es sind genau die, die im Snippet standen -
 * der ganze REDUCED-MOTION-Abschnitt am Ende lebt davon. Regel 2 aus
 * CLAUDE.md gilt fuer neue Regeln. Wer sie hier entfernt, aendert die
 * Website.
 *
 * WEG ZURUECK: seeley-logbuch.php auf den Stand vor Paket 19 zuruecksetzen.
 * Diese Datei darf dann liegen bleiben, sie wird von niemandem mehr geholt.
 */

/* === Startseite - Snippet 1603, Zeichen fuer Zeichen ============ */
/* =========================================================
   SCROLL-PIN – EINSEITIGES WHEEL-JACKING (DESKTOP-ONLY)
========================================================= */

.seeley-scrollpin-outer {
    position: relative;
    width: 100%;
}


.seeley-scrollpin-inner {
    width: 100%;
}

.seeley-scrollpin-inner {
    position: sticky;
    top: var(--seeley-scrollpin-offset, 0px);
    z-index: 40;
}

/* PAKET H9: Rastpunkte je Karte, gesetzt von startseite.js (Z27). */
html.seeley-rast {
    scroll-snap-type: y proximity;
}

.seeley-scrollpin-rast {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}




/* =========================================================
   GRUNDLAYOUT
========================================================= */

.seeley-mission {
    --m-bg: #F2EBD0;
    --m-text-dark: #262626;
    --m-text-muted: #8A8368;
    --m-green: #6F7668;
    --m-green-light: #8A9182;
    --m-beige: #E1D6A9;

    width: 100%;
    box-sizing: border-box;

    /* PAKET P9: die Farbe liegt hier, nicht auf .seeley-mission-inner. Die
       trug sie zusammen mit max-width: 1920px - ab 1921 px Fenster blieb
       links und rechts ein dunkler Streifen neben dem beigen Block. Warum,
       steht in doku/05-fahrplan.md bei P9. */
    background-color: var(--m-bg);

    display: flex;
    align-items: center;
    justify-content: center;

    container-type: inline-size;
    container-name: seeleyMission;
}

.seeley-scrollpin-inner .seeley-mission {

    min-height:
        calc(100vh - var(--seeley-scrollpin-header, 0px));
}

.seeley-mission-inner {
    width: 100%;
    max-width: 1920px;

    box-sizing: border-box;

    /* PAKET P9: die Farbe ist nach .seeley-mission gewandert. Der Deckel
       bleibt hier - er haelt den INHALT auf seiner Breite, und mit ihm den
       Container, auf den sich jedes cqw in dieser Datei bezieht. */
    align-self: stretch;

    padding:
        clamp(48px, 6cqw, 80px)
        clamp(24px, 4cqw, 56px);
}

.seeley-mission-header {
    text-align: center;

    max-width: 560px;

    margin:
        0 auto
        clamp(40px, 5cqw, 56px);
}

.seeley-mission-eyebrow {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 0.2em;

    font-size: 12px;

    color: var(--m-green);

    margin: 0 0 10px;
}

.seeley-mission-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;

    text-transform: none !important;

    font-size:
        clamp(
            1.5rem,
            1.1rem + 1.6cqw,
            2rem
        );

    color: var(--m-text-dark);

    margin: 0 0 12px;
}

.seeley-mission-intro {
    font-family: "Montserrat", sans-serif;
    font-weight: 200;

    text-transform: none !important;

    font-size:
        clamp(
            0.9rem,
            0.82rem + 0.3cqw,
            0.98rem
        );

    line-height: 1.65;

    color: var(--m-text-muted);

    margin: 0;
}

.seeley-mission-grid {
    display: grid;

    width: 100%;

    grid-template-columns: 1fr;

    gap:
        clamp(
            32px,
            5cqw,
            48px
        );

    align-items: center;
}

.seeley-mission-col--report {
    width: 100%;
    max-width: 480px;
    min-width: 0;

    min-width: 0;

    margin: 0;

    flex-shrink: 0;
}

.seeley-mission-label {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    font-size: 11px;

    color: var(--m-green);

    margin: 0 0 14px;

    text-align: center;
}


/* =========================================================
   CAROUSEL
========================================================= */

.seeley-carousel {
    position: relative;

    width: 100%;

    isolation: isolate;

    outline: none !important;
}

.seeley-carousel:focus,
.seeley-carousel:focus-visible,
.seeley-carousel:active {
    outline: none !important;
}

.seeley-carousel-track {
    position: relative;

    width: 480px;
    max-width: 100%;

    height: 610px;

    overflow: visible;

    transform-style: preserve-3d;

    outline: none !important;
}

.seeley-carousel-track:focus,
.seeley-carousel-track:focus-visible,
.seeley-carousel-track:active {
    outline: none !important;
}


/* =========================================================
   WORDPRESS / 2WP FIXES
========================================================= */

.seeley-carousel-track > p,
.seeley-teaser-card > p {
    margin: 0 !important;
    padding: 0 !important;
}

.seeley-teaser-card > p:empty,
.seeley-carousel-track > p:empty {
    display: none !important;
}

.seeley-teaser-image,
.seeley-teaser-image img {
    margin: 0 !important;
}


/* =========================================================
   STACKED CARDS
========================================================= */

.seeley-carousel-track >
.seeley-carousel-slide {

    position: absolute;

    inset: 0;

    width: 480px;
    max-width: 100%;

    height: 610px;

    display: flex;

    box-sizing: border-box;

    transform-origin:
        50% 50%;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    will-change:
        transform,
        opacity;

    transition:
        transform
        700ms
        cubic-bezier(.22,.78,.22,1),

        opacity
        460ms
        cubic-bezier(.22,.78,.22,1);

    -webkit-font-smoothing:
        antialiased;
}


/* =========================================================
   VERSTECKTE KARTE
========================================================= */

.seeley-carousel-slide.is-hidden {

    opacity: 0;

    pointer-events: none;

    z-index: 0;

    transform:
        translate3d(
            0,
            30px,
            0
        )
        scale(.88);
}


/* =========================================================
   AKTIVE KARTE
========================================================= */

.seeley-carousel-slide.is-active {

    opacity: 1;

    pointer-events: auto;

    z-index: 5;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    filter:
        brightness(1);

    box-shadow:
        0 30px 68px
        rgba(38,38,38,.18),

        0 10px 22px
        rgba(38,38,38,.07);
}


/* =========================================================
   AKTIVE KARTE FÄHRT NACH LINKS RAUS (Zurück-Pfeil)
   Kippt dabei nach hinten weg (kleiner, gedimmt) -
   wie eine Kreisbahn, die nach hinten wegdreht.
========================================================= */

.seeley-carousel-slide.is-exit-left {

    opacity: 0;

    pointer-events: none;

    z-index: 2;

    transform:
        translate3d(
            -620px,
            55px,
            0
        )
        scale(.5);

    filter:
        brightness(.8);

    box-shadow:
        0 14px 30px
        rgba(38,38,38,.09);
}


/* =========================================================
   AKTIVE KARTE FÄHRT NACH RECHTS RAUS (Weiter-Pfeil)
========================================================= */

.seeley-carousel-slide.is-exit-right {

    opacity: 0;

    pointer-events: none;

    z-index: 2;

    transform:
        translate3d(
            620px,
            55px,
            0
        )
        scale(.5);

    filter:
        brightness(.8);

    box-shadow:
        0 14px 30px
        rgba(38,38,38,.09);
}


/* =========================================================
   NEUE KARTE KOMMT VON RECHTS REIN (Zurück-Pfeil)
   Startpunkt: klein/gedimmt, wächst dann zur
   aktiven Größe beim Ankommen in der Front.
========================================================= */

.seeley-carousel-slide.is-enter-from-right {

    opacity: .55;

    pointer-events: none;

    z-index: 4;

    transform:
        translate3d(
            460px,
            38px,
            0
        )
        scale(.62);

    filter:
        brightness(.85);

    box-shadow:
        0 14px 30px
        rgba(38,38,38,.09);
}


/* =========================================================
   NEUE KARTE KOMMT VON LINKS REIN (Weiter-Pfeil)
========================================================= */

.seeley-carousel-slide.is-enter-from-left {

    opacity: .55;

    pointer-events: none;

    z-index: 4;

    transform:
        translate3d(
            -460px,
            38px,
            0
        )
        scale(.62);

    filter:
        brightness(.85);

    box-shadow:
        0 14px 30px
        rgba(38,38,38,.09);
}


/* =========================================================
   HILFSKLASSE: Startposition ohne Animation setzen,
   bevor der eigentliche Übergang losläuft.
========================================================= */

.seeley-notransition {

    transition:
        none !important;
}


/* =========================================================
   TEASER CARD
========================================================= */

.seeley-teaser-card {

    display: flex;

    flex-direction: column;

    width: 480px;
    max-width: 100%;

    height: 610px;

    box-sizing: border-box;

    background-color: #ffffff;

    border-radius: 22px;

    border: 2px solid transparent;

    overflow: hidden;

    padding-top: 22px;

    box-shadow:
        0 22px 48px
        rgba(38,38,38,.13),

        0 7px 18px
        rgba(38,38,38,.06);

    text-decoration: none;

    outline: none !important;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        box-shadow .3s ease,
        transform .3s ease;
}

.seeley-teaser-card:focus,
.seeley-teaser-card:focus-visible,
.seeley-teaser-card:active {
    outline: none !important;
}

@media (hover: hover) {
    .seeley-carousel-slide.is-active:hover {

        transform:
            translate3d(
                0,
                -3px,
                0
            )
            scale(1.006);

        box-shadow:
            0 34px 76px
            rgba(38,38,38,.20),

            0 12px 26px
            rgba(38,38,38,.08);
    }
}


/* =========================================================
   ANKOMMEN-LEUCHTEN
   Kurzer heller Rand-Blitz, wenn eine Karte
   neu zur aktiven Karte wird.
========================================================= */

@keyframes seeleyCardGlow {

    0% {

        box-shadow:
            0 0 0 0
            rgba(225, 214, 169, .95),

            0 30px 68px
            rgba(38,38,38,.18),

            0 10px 22px
            rgba(38,38,38,.07);

        border-color:
            rgba(225, 214, 169, .95);
    }

    100% {

        box-shadow:
            0 0 0 18px
            rgba(225, 214, 169, 0),

            0 30px 68px
            rgba(38,38,38,.18),

            0 10px 22px
            rgba(38,38,38,.07);

        border-color:
            transparent;
    }
}

.seeley-carousel-slide.is-active
.seeley-teaser-card {

    animation:
        seeleyCardGlow
        680ms
        ease-out;
}


/* =========================================================
   BILD
========================================================= */

.seeley-teaser-image {

    width: 100%;

    aspect-ratio:
        940 / 740;

    background-color:
        #ffffff;

    overflow: hidden;

    flex-shrink: 0;
}

.seeley-teaser-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.seeley-teaser-image-fallback {

    width: 100%;

    aspect-ratio:
        940 / 740;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color:
        var(--m-green);
}

.seeley-teaser-image-fallback img {

    width: 32%;

    height: auto;

    object-fit: contain;

    opacity: .3;
}


/* =========================================================
   TEXTBEREICH
========================================================= */

.seeley-teaser-caption {

    flex:
        1 1 auto;

    min-height: 0;

    box-sizing: border-box;

    padding:
        20px 22px;

    display: flex;

    flex-direction: column;

    overflow: hidden;
}

.seeley-teaser-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        0 0 8px;

    flex-shrink: 0;
}

.seeley-teaser-meta-item {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 500;

    text-transform: uppercase;

    font-size: 10.5px;

    letter-spacing: .08em;

    color:
        var(--m-text-muted);
}

.seeley-teaser-meta-country {

    color:
        var(--m-green);
}

.seeley-teaser-dot {

    color:
        var(--m-text-muted);

    opacity: .5;

    font-size: 10.5px;
}

.seeley-teaser-title {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 600;

    text-transform:
        none !important;

    font-size: 1.1rem;

    color:
        var(--m-text-dark);

    margin:
        0 0 4px;

    line-height: 1.3;

    flex-shrink: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.seeley-teaser-heading-line {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 700;

    text-transform:
        none !important;

    font-size: .85rem;

    color:
        var(--m-text-dark);

    margin:
        0 0 4px;

    line-height: 1.3;

    flex-shrink: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.seeley-teaser-subtitle {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 300;

    text-transform:
        none !important;

    font-size: .85rem;

    line-height: 1.45;

    color:
        var(--m-text-muted);

    margin: 0;

    flex-shrink: 0;

    overflow: hidden;

    display:
        -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient:
        vertical;
}

.seeley-teaser-spacer {

    flex:
        0 0 18px;

    min-height:
        18px;
}

.seeley-teaser-readmore {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 600;

    text-transform:
        none !important;

    font-size: 13px;

    letter-spacing: .02em;

    color:
        var(--m-green);

    display:
        inline-flex;

    align-items: center;

    gap: 6px;

    line-height: 1;

    flex-shrink: 0;
}

.seeley-teaser-arrow {

    width: 12px;

    height: 9px;

    display: block;

    flex-shrink: 0;

    transition:
        transform
        .25s ease;
}

@media (hover: hover) {
    .seeley-teaser-card:hover
    .seeley-teaser-arrow {

        transform:
            translateX(4px);
    }
}


/* =========================================================
   NAVIGATION
========================================================= */

.seeley-carousel-arrow {

    position: absolute;

    top: 50%;

    width: 42px;

    height: 60px;

    transform:
        translateY(-50%);

    padding: 0;

    border: none;

    outline: none !important;

    background:
        transparent;

    color:
        var(--m-green);

    cursor: pointer;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: .58;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.seeley-carousel-arrow:focus,
.seeley-carousel-arrow:focus-visible,
.seeley-carousel-arrow:active {

    outline:
        none !important;
}

.seeley-carousel-arrow--prev {

    /*
     * Wächst mit demselben Verhältnis wie der
     * Seitenrand von .seeley-mission-inner
     * (clamp(24px, 4cqw, 56px)) - dadurch passt
     * der Pfeil garantiert immer in den
     * vorhandenen Rand, egal wie breit der
     * Container ist.
     */

    left:
        clamp(
            -56px,
            -4cqw,
            -24px
        );
}

.seeley-carousel-arrow--next {

    right:
        clamp(
            -56px,
            -4cqw,
            -24px
        );
}


/*
 * Ab richtig breiten Fenstern existiert echter Platz
 * außerhalb des 1400px-Inhaltsbereichs - dort darf der
 * Pfeil wieder auf den ursprünglich gewünschten,
 * größeren Abstand raus. Bewusst eine normale Viewport-
 * Media-Query (nicht Container-Query), da Container-
 * Queries auf .seeley-mission-inner's max-width von
 * 1400px gedeckelt sind und diesen Außenrand nicht
 * "sehen" können.
 */

@media (hover: hover) {
    .seeley-carousel-arrow:hover {

        opacity: 1;
    }
}

@media (hover: hover) {
    .seeley-carousel-arrow--prev:hover {

        transform:
            translateY(-50%)
            translateX(-4px);
    }
}

@media (hover: hover) {
    .seeley-carousel-arrow--next:hover {

        transform:
            translateY(-50%)
            translateX(4px);
    }
}

.seeley-carousel-arrow::before {

    content: "";

    position: absolute;

    inset:
        4px -5px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.22);

    opacity: 0;

    transition:
        opacity .25s ease;
}

@media (hover: hover) {
    .seeley-carousel-arrow:hover::before {

        opacity: 1;
    }
}

.seeley-carousel-arrow svg {

    position: relative;

    z-index: 2;

    width: 17px;

    height: 30px;

    overflow: visible;

    display: block;
}

.seeley-carousel-arrow svg path {

    stroke-width: 1.05;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   MAP
========================================================= */

.seeley-mission-col--map {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.seeley-map {

    position: relative;

    width: calc(100% - clamp(16px, 4cqw, 40px));

    margin-left: auto;

    margin-right: auto;
}

.seeley-map-image {

    width: 100%;

    aspect-ratio:
        700 / 351;

    display: block;

    background-color:
        var(--m-green);

    -webkit-mask-image:
        url("https://seeley-ontourwithgod.de/wp-content/uploads/2026/07/2026-07-02-Blog-Footer-Karte.png");

    mask-image:
        url("https://seeley-ontourwithgod.de/wp-content/uploads/2026/07/2026-07-02-Blog-Footer-Karte.png");

    -webkit-mask-size:
        contain;

    mask-size:
        contain;

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;
}

.seeley-map-pin {

    position: absolute;

    transform:
        translate(-50%, -50%);

    background: none;

    border: none;

    padding: 0;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    outline:
        none !important;

    -webkit-tap-highlight-color:
        transparent;
}


.seeley-map-pin:focus,
.seeley-map-pin:focus-visible,
.seeley-map-pin:active {

    outline:
        none !important;
}

.seeley-map-pin-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background-color:
        var(--m-beige);

    border:
        1.5px solid
        var(--m-green);

    box-shadow:
        0 0 0 3px
        rgba(225,214,169,.35);

    display: block;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

@media (hover: hover) {
    .seeley-map-pin:hover
    .seeley-map-pin-dot {

        transform:
            scale(1.35);
    }
}

.seeley-map-pin.is-current
.seeley-map-pin-dot {

    animation:
        seeleyPinPulse
        1.6s
        ease-in-out
        infinite;
}

/*
 * Paket 24: ein Reiseziel ohne jeden Bericht. Die Nadel
 * steht gedaempft da und oeffnet ein Panel mit Untertitel
 * und Beschreibung. Sie wird nie is-current - das setzt
 * nur das Karussell, und ein leeres Land hat keine Slides.
 */

.seeley-map-pin--empty
.seeley-map-pin-dot {

    opacity: .5;
}

@keyframes seeleyPinPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 3px
            rgba(225,214,169,.4);

        transform:
            scale(1);
    }

    50% {

        box-shadow:
            0 0 0 9px
            rgba(225,214,169,.5);

        transform:
            scale(1.25);
    }
}

.seeley-map-pin-label {

    display: none;
}

.seeley-map-panel {

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 88%;

    max-width: 380px;

    box-sizing: border-box;

    z-index: 30;

    margin: 0;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    --seeley-panel-correction-x: 0px;

    transform:
        translate(
            calc(-50% + var(--seeley-panel-correction-x)),
            -50%
        )
        scale(.4);

    transition:
        opacity 280ms ease,
        transform 280ms
        cubic-bezier(.22, .78, .22, 1),
        visibility 0s linear 280ms;
}

.seeley-map-panel.is-active {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(
            calc(-50% + var(--seeley-panel-correction-x)),
            -50%
        )
        scale(1);

    transition:
        opacity 280ms ease,
        transform 280ms
        cubic-bezier(.22, .78, .22, 1),
        visibility 0s linear 0s;
}

.seeley-map-panel-stack {

    background-color:
        #ffffff;

    border-radius:
        16px;

    overflow: hidden;

    box-shadow:
        0 24px 48px
        rgba(38,38,38,.28);
}

.seeley-map-panel-card {

    display: none;

    flex-direction: column;

    text-decoration: none;

    outline:
        none !important;

    -webkit-tap-highlight-color:
        transparent;
}

.seeley-map-panel-card.is-active {

    display: flex;
}

.seeley-map-panel-card:focus,
.seeley-map-panel-card:focus-visible,
.seeley-map-panel-card:active {

    outline:
        none !important;
}

.seeley-map-panel-card img {

    width: 100%;

    aspect-ratio:
        940 / 740;

    object-fit: cover;

    display: block;
}

.seeley-map-panel-text {

    padding:
        20px 16px 20px;
}

.seeley-map-panel-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    margin:
        0 0 5px;
}

.seeley-map-panel-meta-item {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 400;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        10.5px;

    color:
        var(--m-text-muted);
}

.seeley-map-panel-meta-country {

    color:
        var(--m-green);
}

.seeley-map-panel-dot {

    color:
        var(--m-text-muted);

    opacity: .5;

    font-size:
        10.5px;
}

.seeley-map-panel-title {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 600;

    text-transform:
        none !important;

    font-size:
        15px;

    color:
        var(--m-text-dark);

    margin:
        0 0 4px;

    line-height:
        1.3;
}

.seeley-map-panel-heading {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 700;

    text-transform:
        none !important;

    font-size:
        12.5px;

    color:
        var(--m-text-dark);

    margin:
        0 0 4px;

    line-height:
        1.3;
}

.seeley-map-panel-subtitle {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 300;

    text-transform:
        none !important;

    font-size:
        12.5px;

    line-height:
        1.4;

    color:
        var(--m-text-muted);

    margin:
        0 0 8px;

    display:
        -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient:
        vertical;

    overflow: hidden;
}

/*
 * Paket 24: die Beschreibung im Panel eines Reiseziels
 * ohne Bericht. Nicht .seeley-map-panel-subtitle - der
 * schneidet nach zwei Zeilen ab, und eine Beschreibung
 * ist laenger. text-transform ohne !important: capitalize
 * kommt hier nur geerbt an (globale Stile, Typografie der
 * Website) - keine Regel trifft das Element selbst, und
 * gegen einen geerbten Wert gewinnt jede Angabe.
 */

.seeley-map-panel-desc {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 300;

    text-transform: none;

    font-size:
        12.5px;

    line-height:
        1.5;

    color:
        var(--m-text-muted);

    margin: 0;
}

.seeley-map-panel-link {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 500;

    text-transform:
        none !important;

    font-size:
        13px;

    color:
        var(--m-green);

    display:
        inline-flex;

    align-items:
        center;

    gap: 5px;
}

/*
 * WordPress (wpautop) wickelt den "Weiterlesen"-
 * Link zur Laufzeit manchmal in ein eigenes,
 * unstyltes <p> - das bringt sonst den Standard-
 * Absatzabstand des Browsers mit. Betrifft nur
 * <p>-Tags OHNE eigene Klasse (unsere echten
 * Textelemente wie Titel/Subtitle bleiben
 * unangetastet).
 */

.seeley-map-panel-text > p:not([class]) {

    margin: 0;
}

.seeley-map-panel-arrow-icon {

    width: 12px;

    height: 9px;

    display: block;

    flex-shrink: 0;

    transition:
        transform .25s ease;
}

.seeley-map-panel-arrow-icon path {

    stroke-width: 1.1;
}

@media (hover: hover) {
    .seeley-map-panel-card:hover
    .seeley-map-panel-arrow-icon {

        transform:
            translateX(3px);
    }
}


/* =========================================================
   PANEL-NAVIGATION
   Einfaches Durchwechseln (kein Animations-Effekt),
   falls ein Land mehrere Berichte hat.
========================================================= */

.seeley-map-panel-nav {

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: space-between;

    pointer-events: none;

    z-index: 6;
}

.seeley-map-panel-arrow {

    width: 28px;

    height: 28px;

    padding: 0;

    border: none;

    outline: none !important;

    background-color:
        #ffffff;

    color:
        var(--m-green);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        999px;

    box-shadow:
        0 4px 10px
        rgba(38,38,38,.18);

    transition:
        opacity .2s ease;

    pointer-events: auto;
}

.seeley-map-panel-arrow--prev {

    margin-left: -14px;
}

.seeley-map-panel-arrow--next {

    margin-right: -14px;
}

@media (hover: hover) {
    .seeley-map-panel-arrow:hover {

        opacity: .7;
    }
}

.seeley-map-panel-arrow svg {

    width: 8px;

    height: 13px;

    display: block;
}

.seeley-map-panel-arrow svg path {

    stroke-width: 1.4;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.seeley-map-footer {

    text-align:
        center;

    margin-top:
        24px;
}

.seeley-map-footer-text {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight:
        200;

    text-transform:
        none !important;

    font-size:
        .85rem;

    color:
        var(--m-text-muted);

    margin:
        0 0 12px;
}

.seeley-map-footer-btn {

    font-family:
        "Montserrat",
        sans-serif;

    font-weight:
        500;

    text-transform:
        none !important;

    font-size:
        13.5px;

    color:
        var(--m-beige);

    background-color:
        var(--m-green);

    display:
        inline-flex;

    align-items:
        center;

    padding:
        9px 26px;

    border-radius:
        999px;

    text-decoration:
        none;

    outline:
        none !important;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        background-color .25s ease,
        transform .25s ease;
}

.seeley-map-footer-btn:focus,
.seeley-map-footer-btn:focus-visible,
.seeley-map-footer-btn:active {

    outline:
        none !important;
}

@media (hover: hover) {
    .seeley-map-footer-btn:hover {

        background-color:
            var(--m-green-light);

        transform:
            translateY(-2px);
    }
}


/* Desktop: gleiche Außenluft wie beim Vision-Block */
@media (min-width: 1000px) {
    .seeley-scrollpin-inner .seeley-mission {
        min-height: auto;
    }

    .seeley-mission-inner {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

/* =========================================================
   DESKTOP GRID
========================================================= */

@container seeleyMission (min-width: 1000px) {

    .seeley-mission-grid {

        /* PAKET P5a: fr statt %. 38% + 62% ergeben 100 %, und der gap kommt
           obendrauf - der Inhalt ragte 48 px ueber sein Kaestchen, davon
           7 px als Querlauf bei 1024 px und 24 px im Querformat. Mit fr
           wird der Abstand zuerst abgezogen und der Rest im Verhaeltnis
           38 : 62 geteilt. Warum, steht in doku/05-fahrplan.md bei P5a. */
        grid-template-columns:
            38fr
            62fr;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@container seeleyMission (max-width: 999px) {

    .seeley-mission-inner {

        padding-left:
            18px;

        padding-right:
            18px;
    }

    .seeley-mission-col--report {

        width: 100%;

        max-width: 100%;

        display: flex;

        justify-content:
            center;

        transform:
            none !important;
    }

    .seeley-carousel {

        width: 82%;

        max-width: 82%;

        margin:
            0 auto;

        outline:
            none !important;
    }

    .seeley-carousel-track {

        width: 100%;

        max-width: 100%;

        height: auto;

        min-height: 0;

        overflow: hidden;

        border-radius:
            20px;

        transform-style:
            flat;

        outline:
            none !important;
    }

    .seeley-carousel-track >
    .seeley-carousel-slide {

        width: 100%;

        max-width: 100%;

        height: auto;

        position:
            absolute;

        inset: 0;

        opacity: 0;

        pointer-events:
            none;

        outline:
            none !important;

        transition:
            transform
            620ms
            cubic-bezier(.22,.78,.22,1),

            opacity
            420ms
            cubic-bezier(.22,.78,.22,1);
    }

    .seeley-carousel-track >
    .seeley-carousel-slide.is-active {

        position:
            relative;

        opacity: 1;

        pointer-events:
            auto;

        z-index: 5;

        transform:
            translate3d(0, 0, 0)
            scale(1) !important;

        filter:
            none !important;

        box-shadow:
            none !important;

        outline:
            none !important;
    }

    .seeley-carousel-slide.is-hidden {

        opacity: 0;

        pointer-events:
            none;

        transform:
            none !important;

        z-index: 0;
    }

    /*
     * Gleiche Kreisbewegung wie auf Desktop, nur
     * mit prozentualen statt festen Pixel-Werten,
     * damit es auf jeder Handy-Breite passt.
     */

    .seeley-carousel-slide.is-exit-left {

        opacity: 0 !important;

        pointer-events:
            none;

        z-index: 2;

        transform:
            translate3d(-130%, 18px, 0)
            scale(.55) !important;

        filter:
            brightness(.8) !important;
    }

    .seeley-carousel-slide.is-exit-right {

        opacity: 0 !important;

        pointer-events:
            none;

        z-index: 2;

        transform:
            translate3d(130%, 18px, 0)
            scale(.55) !important;

        filter:
            brightness(.8) !important;
    }

    .seeley-carousel-slide.is-enter-from-right {

        opacity: .5 !important;

        pointer-events:
            none;

        z-index: 4;

        transform:
            translate3d(95%, 12px, 0)
            scale(.68) !important;

        filter:
            brightness(.85) !important;
    }

    .seeley-carousel-slide.is-enter-from-left {

        opacity: .5 !important;

        pointer-events:
            none;

        z-index: 4;

        transform:
            translate3d(-95%, 12px, 0)
            scale(.68) !important;

        filter:
            brightness(.85) !important;
    }

    .seeley-teaser-card {

        width: 100%;

        max-width: 100%;

        height: auto;

        min-height: 0;

        border:
            2px solid transparent !important;

        outline:
            none !important;

        border-radius:
            20px;

        padding-top:
            18px;

        box-shadow:
            0 16px 36px
            rgba(38,38,38,.13),

            0 5px 14px
            rgba(38,38,38,.06);
    }

    .seeley-teaser-card:focus,
    .seeley-teaser-card:focus-visible,
    .seeley-teaser-card:active {

        outline:
            none !important;
    }

    .seeley-carousel-slide.is-active:hover {

        transform:
            translate3d(0, 0, 0)
            scale(1) !important;
    }

    .seeley-teaser-image {

        width: 100%;

        aspect-ratio:
            940 / 740;
    }

    .seeley-teaser-caption {

        padding:
            16px
            18px
            18px;
    }

    .seeley-teaser-meta-item {

        font-size:
            9.5px;
    }

    .seeley-teaser-dot {

        font-size:
            9.5px;
    }

    .seeley-teaser-title {

        font-size:
            .95rem;
    }

    .seeley-teaser-heading-line {

        font-size:
            .76rem;
    }

    .seeley-teaser-subtitle {

        font-size:
            .76rem;

        line-height:
            1.4;
    }

    .seeley-teaser-spacer {

        flex:
            0 0 14px;

        min-height:
            14px;
    }

    .seeley-teaser-readmore {

        font-size:
            12px;
    }

    .seeley-carousel-arrow {

        top: 43%;

        width: 30px;

        height: 42px;

        opacity:
            .58;

        z-index: 20;

        background:
            rgba(249,246,241,.13);

        backdrop-filter:
            blur(4px);

        -webkit-backdrop-filter:
            blur(4px);

        border:
            none !important;

        outline:
            none !important;

        border-radius:
            999px;
    }

    .seeley-carousel-arrow--prev {

        left:
            -32px;
    }

    .seeley-carousel-arrow--next {

        right:
            -32px;
    }

    .seeley-carousel-arrow::before {

        display:
            none;
    }

    .seeley-carousel-arrow svg {

        width:
            13px;

        height:
            23px;
    }

    .seeley-carousel-arrow svg path {

        stroke-width:
            1.05;
    }

    .seeley-carousel-arrow:hover,
    .seeley-carousel-arrow:focus,
    .seeley-carousel-arrow:focus-visible,
    .seeley-carousel-arrow:active {

        outline:
            none !important;

        opacity:
            .85;

        transform:
            translateY(-50%);
    }

    .seeley-carousel-arrow--prev:hover,
    .seeley-carousel-arrow--next:hover {

        transform:
            translateY(-50%);
    }
}

/* =========================================================
   QUERFORMAT-HANDY: NEBENEINANDER STATT GESTAPELT
========================================================= */

@media (max-height: 500px) and (min-width: 600px) {

    .seeley-mission-grid {

        /* PAKET P5a: fr statt %. 38% + 62% ergeben 100 %, und der gap kommt
           obendrauf - der Inhalt ragte 48 px ueber sein Kaestchen, davon
           7 px als Querlauf bei 1024 px und 24 px im Querformat. Mit fr
           wird der Abstand zuerst abgezogen und der Rest im Verhaeltnis
           38 : 62 geteilt. Warum, steht in doku/05-fahrplan.md bei P5a. */
        grid-template-columns:
            38fr
            62fr;
    }

    .seeley-mission-col--report {

        width: auto;

        max-width: none;

        display: block;

        transform: none !important;
    }

    .seeley-carousel {

        width: 100%;

        max-width: 100%;
    }

    .seeley-scrollpin-inner {

        position: static !important;

        top: auto !important;
    }

    .seeley-scrollpin-inner .seeley-mission {

        min-height: auto !important;
    }

    .seeley-mission-inner {

        padding-top: 14px !important;

        padding-bottom: 14px !important;
    }

    .seeley-mission-eyebrow {

        display: none !important;
    }

    .seeley-mission-intro {

        display: none !important;
    }

    .seeley-mission-heading {

        margin-bottom: 10px !important;

        font-size: 20px !important;
    }

    .seeley-mission-header {

        margin-bottom: 10px !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .seeley-carousel-track >
    .seeley-carousel-slide {

        transition:
            none !important;
    }

    .seeley-carousel-slide.is-active
    .seeley-teaser-card {

        animation:
            none !important;
    }

    .seeley-map-panel {

        transition:
            none !important;
    }
}