/* Bausteine, die nur die Startseite braucht: der Leuchtkasten fuer "An Bord",
   die Wasserblasen der Woche und die Karte der Aegaeis. Bewusst eine eigene
   Datei — die Unterseiten sollen dafuer nichts laden. */

/* --------------------------------------------------------------------------
   Leuchtkasten — die Bilder von "An Bord" oeffnen sich mit Text dazu
   -------------------------------------------------------------------------- */

:root {
    --page-slide-dur: 200ms;
    --page-fade-dur: 200ms;
    --page-slide-distance: 8px;
    --page-blur: 3px;
    --page-stagger: 0ms;
    --page-exit-enabled: 1;
    --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.galerie button {
    /* Die Kacheln sind Schaltflaechen, sehen aber aus wie Bilder. */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    font: inherit;
}

.galerie button::after {
    /* Ein Pluszeichen in der Ecke — sonst haelt niemand die Kachel fuer
       anklickbar. Es erscheint beim Zeigen und beim Tastaturfokus. */
    content: '';
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(247, 242, 231, 0.5);
    background: rgba(4, 16, 26, 0.42) center/12px 12px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23f7f2e7' stroke-width='1.4'/%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity 0.25s;
}

.galerie button:hover::after,
.galerie button:focus-visible::after {
    opacity: 1;
}

.leuchtkasten {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: clamp(14px, 4vw, 48px);
    background: rgba(4, 16, 26, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.leuchtkasten[hidden] {
    display: none;
}

.t-page-slide {
    position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
    --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
    --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
    filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
    transition:
        opacity   var(--page-fade-dur)  var(--page-fade-ease),
        transform var(--page-slide-dur) var(--page-slide-ease),
        filter    var(--page-slide-dur) var(--page-slide-ease);
    will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    filter: blur(0);
    transition-delay: var(--page-stagger);
}

@media (prefers-reduced-motion: reduce) {
    .t-page-slide .t-page { transition: none !important; }
}

.leuchtkasten-slider {
    width: 100%;
    max-width: 1080px;
    height: min(620px, calc(100svh - 96px));
    touch-action: pan-y;
}

.leuchtkasten-tafel {
    background: var(--nacht);
    color: var(--creme);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
}

.leuchtkasten-tafel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 0;
}

.leuchtkasten-text {
    padding: clamp(24px, 3vw, 44px);
    display: grid;
    align-content: center;
    gap: 16px;
    overflow-y: auto;
}

.leuchtkasten-zu {
    position: absolute;
    right: clamp(14px, 4vw, 48px);
    top: clamp(14px, 4vw, 48px);
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(243, 236, 222, 0.34);
    background: rgba(4, 16, 26, 0.5);
    color: var(--creme);
    cursor: pointer;
    z-index: 3;
}

.leuchtkasten-zu:hover {
    border-color: var(--messing-hell);
    color: var(--messing-hell);
}

.leuchtkasten-pfeil,
.leuchtkasten-seiten {
    display: none;
}

@media (max-width: 900px) {
    .leuchtkasten {
        padding: 74px 14px 68px;
    }

    .leuchtkasten-slider {
        height: min(520px, calc(100svh - 150px));
    }

    .leuchtkasten-tafel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .leuchtkasten-tafel img {
        aspect-ratio: 3 / 2;
        height: auto;
    }

    .leuchtkasten-text {
        padding: 22px;
    }

    .leuchtkasten-pfeil {
        position: absolute;
        top: 36%;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(243, 236, 222, 0.48);
        border-radius: 999px;
        background: rgba(4, 16, 26, 0.72);
        color: var(--creme);
        box-shadow: 0 8px 24px rgba(4, 16, 26, 0.26);
        cursor: pointer;
    }

    .leuchtkasten-zurueck {
        left: 22px;
    }

    .leuchtkasten-weiter {
        right: 22px;
    }

    .leuchtkasten-seiten {
        position: absolute;
        bottom: 20px;
        left: 50%;
        z-index: 3;
        display: grid;
        justify-items: center;
        gap: 9px;
        transform: translateX(-50%);
        color: rgba(243, 236, 222, 0.76);
    }

    .leuchtkasten-status {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
    }

    .leuchtkasten-punkte {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .leuchtkasten-punkt {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 1px solid rgba(243, 236, 222, 0.7);
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
        transition:
            transform var(--page-slide-dur) var(--page-slide-ease),
            background-color var(--page-fade-dur) var(--page-fade-ease),
            border-color var(--page-fade-dur) var(--page-fade-ease);
    }

    .leuchtkasten-punkt[aria-current="true"] {
        background: var(--messing-hell);
        border-color: var(--messing-hell);
        transform: scale(1.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .leuchtkasten-punkt { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Wasserblasen — "Die Woche"
   Fuenf Punkte, die nicht als Liste dastehen, sondern als Blasen treiben.
   In eine Blase passt ein Stichwort und eine Zeile — und das ist der Punkt.
   -------------------------------------------------------------------------- */

.blasen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* align-items: center ist Pflicht: mit dem voreingestellten stretch zieht
       der Flexbehaelter die Blasen in die Hoehe, und aus dem Kreis wird ein Ei. */
    align-items: center;
    gap: clamp(14px, 2.2vw, 28px);
    margin-top: clamp(20px, 3.5vh, 40px);
}

.blase {
    position: relative;
    flex: 0 0 auto;
    /* Ohne min-width: 0 zieht die inhaltsbasierte Mindestbreite eines
       Flex-Elements den Tropfen ueber die gesetzte Breite hinaus. */
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 7px;
    padding: 20px 22px;

    /* Der Tropfen selbst ist ein SVG im Hintergrund, kein CSS-Kreis.

       Der Grund: zwei der fuenf Formen laufen oben spitz zu, eine zieht sich
       unten in einen Schweif — das kann border-radius nicht, das kann nur ein
       Pfad. Und weil jede Form ihre eigene Haut, ihren eigenen Lichtbogen und
       ihre eigenen Luftblaeschen braucht, sitzt alles im selben SVG statt in
       vier uebereinandergelegten CSS-Ebenen.

       Als Hintergrundbild und nicht als Markup, damit die <dl>-Struktur
       gueltig bleibt: zwischen dt und dd darf kein <svg> stehen.

       Der Schatten kommt von drop-shadow, nicht von box-shadow: box-shadow
       wirft den Schatten des rechteckigen Kastens, drop-shadow den der
       tatsaechlichen Silhouette. */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 14px 18px rgba(20, 66, 92, 0.2))
        drop-shadow(0 3px 4px rgba(20, 66, 92, 0.14));
    animation: treiben 9s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.blase:nth-child(1) {
    width: clamp(152px, 14.6vw, 210px);
    aspect-ratio: 210 / 178;
    animation-duration: 9s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 178'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.88'/%3E%3Cstop offset='.16' stop-color='%23dbeaf3' stop-opacity='.5'/%3E%3Cstop offset='.44' stop-color='%23b6d5e5' stop-opacity='.52'/%3E%3Cstop offset='.7' stop-color='%238dbcd3' stop-opacity='.62'/%3E%3Cstop offset='.88' stop-color='%236ba5c1' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%234e8dac' stop-opacity='.84'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='.1' y1='.05' x2='.9' y2='.95'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M112,3 C166,3 206,42 205,90 C204,133 166,175 110,176 C62,177 12,150 5,106 C1,66 24,20 68,8 C82,4 97,3 112,3 Z' fill='url(%23k)'/%3E%3Cpath d='M112,3 C166,3 206,42 205,90 C204,133 166,175 110,176 C62,177 12,150 5,106 C1,66 24,20 68,8 C82,4 97,3 112,3 Z' fill='none' stroke='%235f97b4' stroke-opacity='.62' stroke-width='1.7'/%3E%3Cpath d='M112,3 C166,3 206,42 205,90 C204,133 166,175 110,176 C62,177 12,150 5,106 C1,66 24,20 68,8 C82,4 97,3 112,3 Z' fill='none' stroke='url(%23b)' stroke-width='3.4'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.3'%3E%3Ccircle cx='58' cy='44' r='3'/%3E%3Ccircle cx='70' cy='37' r='2'/%3E%3Ccircle cx='49' cy='53' r='1.5'/%3E%3Ccircle cx='72' cy='140' r='4'/%3E%3Ccircle cx='86' cy='148' r='2.5'/%3E%3Ccircle cx='60' cy='149' r='2'/%3E%3Ccircle cx='98' cy='141' r='1.5'/%3E%3Ccircle cx='152' cy='108' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

.blase:nth-child(2) {
    width: clamp(160px, 15.6vw, 224px);
    aspect-ratio: 226 / 212;
    animation-duration: 11s;
    animation-delay: -2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 226 212'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.88'/%3E%3Cstop offset='.16' stop-color='%23dbeaf3' stop-opacity='.5'/%3E%3Cstop offset='.44' stop-color='%23b6d5e5' stop-opacity='.52'/%3E%3Cstop offset='.7' stop-color='%238dbcd3' stop-opacity='.62'/%3E%3Cstop offset='.88' stop-color='%236ba5c1' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%234e8dac' stop-opacity='.84'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='.1' y1='.05' x2='.9' y2='.95'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M126,4 C182,4 220,44 218,92 C216,132 190,164 150,182 C120,196 84,202 58,192 C30,181 10,152 8,118 C6,80 30,36 70,16 C88,7 106,4 126,4 Z' fill='url(%23k)'/%3E%3Cpath d='M126,4 C182,4 220,44 218,92 C216,132 190,164 150,182 C120,196 84,202 58,192 C30,181 10,152 8,118 C6,80 30,36 70,16 C88,7 106,4 126,4 Z' fill='none' stroke='%235f97b4' stroke-opacity='.62' stroke-width='1.7'/%3E%3Cpath d='M126,4 C182,4 220,44 218,92 C216,132 190,164 150,182 C120,196 84,202 58,192 C30,181 10,152 8,118 C6,80 30,36 70,16 C88,7 106,4 126,4 Z' fill='none' stroke='url(%23b)' stroke-width='3.4'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.3'%3E%3Ccircle cx='80' cy='54' r='3'/%3E%3Ccircle cx='92' cy='47' r='2'/%3E%3Ccircle cx='68' cy='64' r='1.5'/%3E%3Ccircle cx='74' cy='158' r='4.5'/%3E%3Ccircle cx='88' cy='166' r='2.5'/%3E%3Ccircle cx='62' cy='166' r='2'/%3E%3Ccircle cx='100' cy='158' r='1.5'/%3E%3Ccircle cx='160' cy='120' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

.blase:nth-child(3) {
    width: clamp(146px, 14vw, 200px);
    aspect-ratio: 200 / 264;
    /* Spitze oben: der Text gehoert in den Bauch. */
    padding-top: clamp(64px, 6.2vw, 88px);
    animation-duration: 8.5s;
    animation-delay: -5s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 264'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.88'/%3E%3Cstop offset='.16' stop-color='%23dbeaf3' stop-opacity='.5'/%3E%3Cstop offset='.44' stop-color='%23b6d5e5' stop-opacity='.52'/%3E%3Cstop offset='.7' stop-color='%238dbcd3' stop-opacity='.62'/%3E%3Cstop offset='.88' stop-color='%236ba5c1' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%234e8dac' stop-opacity='.84'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='.1' y1='.05' x2='.9' y2='.95'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M100,2 C104,36 118,64 140,96 C161,127 180,151 180,181 C180,222 144,256 100,256 C56,256 20,222 20,181 C20,151 39,127 60,96 C82,64 96,36 100,2 Z' fill='url(%23k)'/%3E%3Cpath d='M100,2 C104,36 118,64 140,96 C161,127 180,151 180,181 C180,222 144,256 100,256 C56,256 20,222 20,181 C20,151 39,127 60,96 C82,64 96,36 100,2 Z' fill='none' stroke='%235f97b4' stroke-opacity='.62' stroke-width='1.7'/%3E%3Cpath d='M100,2 C104,36 118,64 140,96 C161,127 180,151 180,181 C180,222 144,256 100,256 C56,256 20,222 20,181 C20,151 39,127 60,96 C82,64 96,36 100,2 Z' fill='none' stroke='url(%23b)' stroke-width='3.4'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.3'%3E%3Ccircle cx='108' cy='112' r='2.5'/%3E%3Ccircle cx='120' cy='104' r='1.8'/%3E%3Ccircle cx='96' cy='122' r='1.4'/%3E%3Ccircle cx='78' cy='214' r='4'/%3E%3Ccircle cx='92' cy='222' r='2.5'/%3E%3Ccircle cx='65' cy='221' r='2'/%3E%3Ccircle cx='104' cy='215' r='1.5'/%3E%3Ccircle cx='140' cy='196' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

.blase:nth-child(4) {
    width: clamp(152px, 15vw, 212px);
    aspect-ratio: 212 / 204;
    animation-duration: 12s;
    animation-delay: -1s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 212 204'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.88'/%3E%3Cstop offset='.16' stop-color='%23dbeaf3' stop-opacity='.5'/%3E%3Cstop offset='.44' stop-color='%23b6d5e5' stop-opacity='.52'/%3E%3Cstop offset='.7' stop-color='%238dbcd3' stop-opacity='.62'/%3E%3Cstop offset='.88' stop-color='%236ba5c1' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%234e8dac' stop-opacity='.84'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='.1' y1='.05' x2='.9' y2='.95'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M108,3 C164,1 210,40 207,90 C204,133 180,172 130,190 C88,205 34,192 14,156 C0,130 6,84 30,50 C50,22 76,5 108,3 Z' fill='url(%23k)'/%3E%3Cpath d='M108,3 C164,1 210,40 207,90 C204,133 180,172 130,190 C88,205 34,192 14,156 C0,130 6,84 30,50 C50,22 76,5 108,3 Z' fill='none' stroke='%235f97b4' stroke-opacity='.62' stroke-width='1.7'/%3E%3Cpath d='M108,3 C164,1 210,40 207,90 C204,133 180,172 130,190 C88,205 34,192 14,156 C0,130 6,84 30,50 C50,22 76,5 108,3 Z' fill='none' stroke='url(%23b)' stroke-width='3.4'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.3'%3E%3Ccircle cx='72' cy='50' r='3.5'/%3E%3Ccircle cx='84' cy='42' r='2'/%3E%3Ccircle cx='60' cy='60' r='1.5'/%3E%3Ccircle cx='70' cy='158' r='4'/%3E%3Ccircle cx='84' cy='166' r='2.5'/%3E%3Ccircle cx='57' cy='166' r='2'/%3E%3Ccircle cx='96' cy='159' r='1.5'/%3E%3Ccircle cx='152' cy='146' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

.blase:nth-child(5) {
    width: clamp(140px, 13.5vw, 192px);
    aspect-ratio: 190 / 268;
    /* Spitze oben: der Text gehoert in den Bauch. */
    padding-top: clamp(63px, 6.1vw, 86px);
    animation-duration: 10s;
    animation-delay: -7s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 268'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.88'/%3E%3Cstop offset='.16' stop-color='%23dbeaf3' stop-opacity='.5'/%3E%3Cstop offset='.44' stop-color='%23b6d5e5' stop-opacity='.52'/%3E%3Cstop offset='.7' stop-color='%238dbcd3' stop-opacity='.62'/%3E%3Cstop offset='.88' stop-color='%236ba5c1' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%234e8dac' stop-opacity='.84'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='.1' y1='.05' x2='.9' y2='.95'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M95,2 C99,37 115,68 135,98 C155,128 171,150 171,181 C171,222 137,256 95,256 C53,256 19,222 19,181 C19,150 35,128 55,98 C75,68 91,37 95,2 Z' fill='url(%23k)'/%3E%3Cpath d='M95,2 C99,37 115,68 135,98 C155,128 171,150 171,181 C171,222 137,256 95,256 C53,256 19,222 19,181 C19,150 35,128 55,98 C75,68 91,37 95,2 Z' fill='none' stroke='%235f97b4' stroke-opacity='.62' stroke-width='1.7'/%3E%3Cpath d='M95,2 C99,37 115,68 135,98 C155,128 171,150 171,181 C171,222 137,256 95,256 C53,256 19,222 19,181 C19,150 35,128 55,98 C75,68 91,37 95,2 Z' fill='none' stroke='url(%23b)' stroke-width='3.4'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.3'%3E%3Ccircle cx='104' cy='116' r='2.5'/%3E%3Ccircle cx='116' cy='108' r='1.8'/%3E%3Ccircle cx='92' cy='126' r='1.4'/%3E%3Ccircle cx='76' cy='218' r='4'/%3E%3Ccircle cx='90' cy='226' r='2.5'/%3E%3Ccircle cx='63' cy='225' r='2'/%3E%3Ccircle cx='102' cy='219' r='1.5'/%3E%3Ccircle cx='134' cy='200' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

.blase:hover {
    transform: translateY(-10px) scale(1.03);
    filter: drop-shadow(0 22px 24px rgba(12, 44, 58, 0.2))
        drop-shadow(0 4px 5px rgba(12, 44, 58, 0.12));
}

/* Die Ueberschrift traegt Messing wie das "Eine Woche" darueber, aber eine
   Stufe tiefer.

   var(--messing) ist auf dem Papier der Sektion gemacht. Der Tropfen ist
   inzwischen blau, und darauf faellt derselbe Ton auf etwa 3:1 zurueck — zwei
   der fuenf Stichworte waren kaum noch zu lesen. Dieses Bronze kommt auf rund
   6:1 und bleibt im selben Farbklang. */
.blase dt {
    position: relative;
    font-family: var(--display);
    font-size: clamp(11px, 1.05vw, 13.5px);
    letter-spacing: 0.14em;
    margin-right: -0.14em;
    text-transform: uppercase;
    color: #5c4310;
    line-height: 1.35;
}

.blase dd {
    position: relative;
    margin: 0;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.4;
    color: rgba(8, 38, 50, 0.82);
}

@keyframes treiben {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

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

    .blase:hover {
        transform: none;
    }
}

/* Auf dem Handy stehen die Tropfen zu zweit nebeneinander. Nur die Breite
   wird gedeckelt — das Seitenverhaeltnis bleibt, sonst verzerrt die Form. */
@media (max-width: 560px) {
    .blase:nth-child(n) {
        width: min(158px, 43vw);
        /* Mehr Luft zur Seite als auf dem Schreibtisch, nicht weniger.

           Der Kasten ist rechteckig, der Tropfen nicht: auf Hoehe der
           Ueberschrift ist die Silhouette schmaler als der Kasten. Bei 390px
           Fensterbreite blieben von 158px Kasten je nach Form nur 104 bis
           141px Tropfen — "April bis Oktober" stand mit 130px Text also 13px
           ueber den Rand hinaus, "Das ganze Schiff" klebte mit 6px daran.

           22px Innenabstand plus die engere Laufweite unten zwingen die langen
           Stichworte in zwei Zeilen. Zwei kurze Zeilen passen in jede der fuenf
           Formen; eine lange passt in keine. */
        padding-left: 22px;
        padding-right: 22px;
    }

    /* Cinzel mit 0.14em Laufweite ist auf 11px der eigentliche Breitmacher:
       "APRIL BIS OKTOBER" gewinnt dadurch allein 14px. Auf dem Handy enger. */
    .blase dt {
        letter-spacing: 0.08em;
        margin-right: -0.08em;
    }

    .blase:nth-child(3) {
        padding-top: min(70px, 19vw);
    }

    .blase:nth-child(5) {
        padding-top: min(71px, 19.4vw);
    }

    .blase dd {
        font-size: 13px;
    }
}

/* Hier lag ein blasser Wassergrund — ein Ausschnitt Meer, damit die damals
   noch durchsichtigen Kreise etwas zu brechen hatten.

   Er ist weg, und zwar aus zwei Gruenden. Erstens tragen die Tropfen ihre
   Plastik inzwischen selbst: Haut, Lichtbogen und Blaeschen stecken im SVG
   und brauchen keine Textur mehr dahinter. Zweitens kostete er die Lesbarkeit
   — auf dem blaugrauen Wasser stand das Messing der Ueberschriften so
   schwach, dass zwei der fuenf Stichworte praktisch verschwanden.

   Bleibt also das Papier der Sektion, so wie im Entwurf. */

/* --------------------------------------------------------------------------
   Routen — Karte der Aegaeis
   Die Kuestenlinie ist ein eigenes SVG (aus Natural Earth 10m geschnitten und
   vereinfacht), damit der Browser sie zwischenspeichert. Routen, Punkte und
   Beschriftungen liegen als zweites SVG exakt darueber — gleicher viewBox,
   also stimmen die Koordinaten ohne Umrechnung.
   -------------------------------------------------------------------------- */

#routen .szene-innen {
    padding: calc(var(--kopfhoehe) + 20px) clamp(16px, 3vw, 40px)
        calc(var(--leiste) + 18px);
    justify-content: flex-start;
    gap: 14px;
}

.routen-kopf {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
    max-width: var(--bahn);
    width: 100%;
    margin: 0 auto;
}

.routen-kopf .satz {
    font-size: clamp(20px, 2.1vw, 27px);
    max-width: 34ch;
}

.karte {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #e8f0f4;
    width: 100%;
    max-width: var(--bahn);
    margin: 0 auto;
}

.karte-grund,
.karte-lagen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Die Karte fuellt den Rahmen aus, statt darin zu schweben. Der Ausschnitt
   hat nach allen Seiten Luft — was beim Fuellen wegfaellt, ist Rand, nie eine
   Route. Die Ueberlagerung nutzt dieselbe Passung (slice), damit die Haefen
   auf ihren Kuesten bleiben. */
.karte-grund {
    object-fit: cover;
    object-position: center;
}

/* Die Linie zeichnet sich, wenn eine Route gewaehlt wird. */
.route-linie {
    fill: none;
    stroke: #8a6a22;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--laenge);
    stroke-dashoffset: var(--laenge);
    transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-linie.gezeichnet {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .route-linie {
        transition: none;
    }
}

/* Die Spur: ein kurzer heller Strich, der die Route abfaehrt. Zusammen mit
   dem Schiff darueber ergibt das eine Fahrt statt einer Zeichnung. */
.route-spur {
    fill: none;
    stroke: #f6d79a;
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(200, 150, 40, 0.55));
    pointer-events: none;
}

.route-schiff {
    fill: #6b4f14;
    pointer-events: none;
    /* Weicher als zuvor: der harte Schlagschatten hat die duennen Segel
       zugeschmiert, statt den Rumpf abzuheben. */
    filter: drop-shadow(0 1px 2px rgba(12, 44, 58, 0.28));
}

/* Ein heller Saum, damit das Schiff auf der goldenen Linie nicht mit ihr
   verschmilzt. paint-order setzt den Strich hinter die Fuellung — sonst
   fraesse die Kontur die Segelspitzen weg. */
.route-schiff path {
    stroke: rgba(246, 242, 232, 0.9);
    stroke-width: 1.6;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

.route-punkt {
    cursor: pointer;
    /* Die Haefen tauchen der Reihe nach auf, waehrend die Linie laeuft. */
    animation: hafen-auf 0.5s both;
}

@keyframes hafen-auf {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

.route-punkt circle {
    fill: #fdfaf3;
    stroke: #8a6a22;
    stroke-width: 3;
    transition: fill 0.2s ease;
}

.route-punkt:hover circle,
.route-punkt[aria-pressed='true'] circle {
    fill: #8a6a22;
    stroke: #fdfaf3;
}

.route-punkt text {
    font-family: var(--text-schrift);
    font-size: 16px;
    font-weight: 600;
    fill: #14313f;
    /* Weisser Rand hinter der Schrift — sonst verschwindet sie ueber Land. */
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.88);
    stroke-width: 4;
    stroke-linejoin: round;
}

/* Tafel, die beim Klick auf einen Ort aufgeht. Sie sitzt oben und wechselt
   die Seite, je nachdem wo der angeklickte Hafen liegt — sonst deckt sie die
   Route zu, die sie erklaeren soll. */
.ort-tafel {
    position: absolute;
    top: 16px;
    left: auto;
    right: 16px;
    width: min(320px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    background: rgba(6, 19, 27, 0.94);
    color: var(--creme);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(4, 16, 26, 0.32);
}

.ort-tafel.links {
    left: 16px;
    right: auto;
}

.ort-tafel[hidden] {
    display: none;
}

/* height: auto ist Pflicht — die height-Attribute im Markup gelten als
   Praesentationshinweis und wuerden das Bild sonst auf seine volle
   Originalhoehe aufziehen, trotz aspect-ratio. */
.ort-tafel img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ort-tafel-text {
    padding: 15px 18px 17px;
    display: grid;
    gap: 7px;
}

.ort-tafel h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.16em;
    margin-right: -0.16em;
    text-transform: uppercase;
}

.ort-tafel p {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(243, 236, 222, 0.74);
}

.ort-tafel .tun {
    font-size: 14.5px;
    color: var(--messing-hell);
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.ort-tafel-zu {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(243, 236, 222, 0.34);
    background: rgba(4, 16, 26, 0.62);
    color: var(--creme);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.ort-tafel-zu:hover {
    border-color: var(--messing-hell);
}

/* Kartenreihe — sie greift ueber den unteren Rand der Karte, wie in der
   Vorlage. Damit bleibt der Karte die volle Hoehe. */
.routen-reihe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: calc(var(--bahn) - 36px);
    margin: -96px auto 0;
    position: relative;
    z-index: 2;
}

.routen-karte {
    position: relative;
    text-align: left;
    border: 1px solid var(--linie);
    border-radius: 20px;
    background: rgba(253, 250, 243, 0.985);
    box-shadow: 0 12px 30px rgba(10, 29, 39, 0.12);
    /* Oben Platz fuer die Tagesangabe, die als Marke in der Ecke sitzt. */
    padding: 46px 18px 16px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: grid;
    gap: 5px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s;
}

.routen-karte:hover {
    transform: translateY(-3px);
    border-color: #8a6a22;
}

.routen-karte[aria-pressed='true'] {
    border-color: #8a6a22;
    color: #f7f2e7;
}

.routen-karte-bild {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.routen-karte[aria-pressed='true'] .routen-karte-bild {
    opacity: 1;
}

.routen-karte[aria-pressed='true']::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to top,
        rgba(4, 16, 26, 0.88) 0%,
        rgba(4, 16, 26, 0.52) 55%,
        rgba(4, 16, 26, 0.3) 100%
    );
}

/* Alles ausser dem Bild steht ueber der Abdunklung. Zwei Ausnahmen bleiben
   absolut: das Bild (sonst schiebt es die Karte auf dreifache Hoehe) und die
   Tagesangabe (sonst faellt sie in den Fluss und schiebt die Seemeilen nach
   unten — genau das ist hier passiert). */
.routen-karte > :not(.routen-karte-bild):not(.routen-tage) {
    position: relative;
    z-index: 1;
}

.routen-zahl {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.routen-zahl strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(25px, 2.5vw, 33px);
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.routen-zahl span,
.routen-orte,
.routen-tage {
    color: var(--dunst);
}

.routen-zahl span {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.routen-karte[aria-pressed='true'] .routen-zahl span,
.routen-karte[aria-pressed='true'] .routen-orte,
.routen-karte[aria-pressed='true'] .routen-tage {
    color: rgba(247, 242, 231, 0.82);
}

.routen-karte h3 {
    font-size: 18.5px;
    font-weight: 600;
}

.routen-orte {
    font-size: 14px;
    line-height: 1.45;
}

.routen-tage {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Laptop-Hoehen. Die Szene ist auf einen vollen Bildschirm gebaut: die Karte
   bekommt die Resthoehe (flex: 1) und die Kartenreihe greift -96px in sie
   hinein. Unter etwa 900px Fensterhoehe kippt das: die Karte schrumpft, ihr
   cover-Zuschnitt frisst Marina Zeas am oberen und Sifnos am unteren Rand,
   und die Reihe legt sich ueber Ortsnamen und die aufgeklappte Ort-Tafel.

   Hier gilt darum: Karte im echten Seitenverhaeltnis ihres Bildes (kein
   Zuschnitt, jede Beschriftung sichtbar), Reihe darunter statt darueber.
   Die Szene wird dadurch hoeher als das Fenster — das darf sie, .szene-innen
   ist ein min-height und das Deck scrollt in ihr weiter; der Scroll-Snap
   laesst uebergrosse Abschnitte frei durchlaufen. Lesbarkeit schlaegt hier
   die Ein-Bildschirm-Choreografie. */
@media (min-width: 901px) and (max-height: 900px) {
    /* Die Szene muss auf EINEN Laptop-Bildschirm passen, mit einer Karte,
       die man lesen kann. Der Trick ist das 5:2-Fenster: alle Beschriftungen
       der Aegaeis liegen im Band von etwa y=160 bis y=660 des 1400x808er
       viewBox — genau das schneidet object-fit: cover bei diesem Verhaeltnis
       heraus. Weggeschnitten wird nur leeres Meer oben und unten, nie ein
       Ortsname (fuer jede Groesse zwischen Boden und Deckel nachgerechnet).
       Die Ueberlagerung nutzt dasselbe slice-Verhalten und bleibt passgenau. */
    #routen .szene-innen {
        padding-top: calc(var(--kopfhoehe) + 8px);
        padding-bottom: calc(var(--leiste) + 8px);
    }

    /* Die Einordnungszeile faellt weg — auf knapper Hoehe zaehlt die Karte. */
    .routen-kopf .klein {
        display: none;
    }

    .karte {
        flex: none;
        height: clamp(300px, calc(100svh - 330px), 560px);
        aspect-ratio: 5 / 2;
        width: auto;
        max-width: 100%;
    }

    /* Die drei Karten schrumpfen zu Chips in einer Reihe: Zahl, Name,
       Etikett. Das Bild und die Inselliste braucht hier niemand — sie
       kosteten die Hoehe, die jetzt der Karte gehoert. */
    .routen-reihe {
        margin-top: 12px;
        gap: 10px;
    }

    .routen-karte {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 12px 16px;
    }

    .routen-karte-bild,
    .routen-orte {
        display: none;
    }

    .routen-tage {
        position: static;
        order: 3;
        margin-left: auto;
        white-space: nowrap;
    }

    .routen-zahl {
        gap: 6px;
    }

    .routen-zahl strong {
        font-size: 22px;
    }

    .routen-karte h3 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Die Beschriftung skaliert mit dem viewBox — auf der kleineren Karte
       braucht sie einen moderaten Ausgleich, bleibt aber bewusst kompakt. */
    .route-punkt text {
        font-size: 24px;
        stroke-width: 5;
    }

    .route-punkt circle {
        r: 11;
    }
}

@media (max-width: 900px) {
    #routen .szene-innen {
        padding: calc(var(--kopfhoehe) + 30px) 16px calc(var(--leiste) + 24px);
    }

    .karte {
        aspect-ratio: 4 / 3;
        flex: none;
    }

    .routen-reihe {
        grid-template-columns: 1fr;
        margin-top: 12px;
        max-width: none;
    }

    /* Auf schmalen Fenstern steht die Tagesangabe in der Reihe statt als
       Marke in der Ecke — dort ueberlappte sie die Seemeilen. */
    .routen-tage {
        position: static;
    }

    .routen-karte {
        padding-top: 16px;
    }

    /* Auf dem Handy braucht die SVG-Schrift wegen der starken viewBox-
       Verkleinerung mehr Ausgleich als auf dem Desktop. */
    .route-punkt text {
        font-size: 34px;
        stroke-width: 7;
    }

    .route-punkt circle {
        r: 11;
    }

    /* Als echtes Overlay behalten: position: static legt den Inhalt hinter
       die absolut positionierten Kartenebenen, sodass nur das X sichtbar ist. */
    .ort-tafel,
    .ort-tafel.links {
        position: absolute;
        inset: 12px 12px auto;
        width: auto;
        max-height: calc(100% - 24px);
        margin: 0;
        overflow-y: auto;
        z-index: 3;
    }
}


/* Rueckfallebene fuer Browser ohne aspect-ratio (Safari vor 15). */
@supports not (aspect-ratio: 1 / 1) {
    .blase {
        height: 200px;
    }

    .ort-tafel img {
        height: 180px;
    }

    @media (max-width: 900px) {
        .leuchtkasten-tafel img {
            height: 240px;
        }

        .karte {
            height: 300px;
        }
    }

    @media (max-width: 560px) {
        .blase {
            height: 160px;
        }
    }
}

/* Handy nach der Design-Vorlage. Die Wasserblasen sind auf dem Daumen zu
   gross und zu verspielt: aus ihnen werden schlichte Chips im Raster. Die
   Routenkarten werden Listenzeilen mit Vorschaubild, Meta-Zeile, Titel und
   Inselliste — wie in der Vorlage. */
@media (max-width: 560px) {
    /* Das Erlebnisbild bleibt sichtbar, wird aber zum flachen Panorama. So
       passen Motiv, Name und Aktivitaet gemeinsam in die flache Handykarte,
       ohne dass wie zuvor nur noch der Schliessen-Knopf zu sehen ist. */
    .ort-tafel img {
        display: block;
        aspect-ratio: 3.5 / 1;
    }

    .ort-tafel-text {
        padding: 11px 14px 12px;
        gap: 5px;
    }

    .ort-tafel p {
        font-size: 14px;
        line-height: 1.4;
    }

    .ort-tafel .tun {
        font-size: 13.5px;
    }

    .ort-tafel h3 {
        padding-right: 38px;
    }

    .blasen {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .blase,
    .blase:nth-child(n) {
        width: auto;
        aspect-ratio: auto;
        background-image: none;
        filter: none;
        animation: none;
        padding: 14px 12px;
        border: 1px solid var(--linie);
        border-radius: 14px;
        background-color: rgba(20, 66, 92, 0.06);
    }

    .blase:hover {
        transform: none;
        filter: none;
    }

    .routen-karte {
        display: grid;
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            'bild zahl tage'
            'bild titel titel'
            'bild orte orte';
        align-items: center;
        column-gap: 14px;
        row-gap: 3px;
        padding: 12px;
    }

    .routen-karte-bild {
        position: static;
        grid-area: bild;
        width: 64px;
        height: 64px;
        border-radius: 12px;
        opacity: 1;
        align-self: start;
    }

    .routen-zahl {
        grid-area: zahl;
        gap: 5px;
    }

    .routen-zahl strong {
        font-size: 15px;
    }

    .routen-zahl span {
        font-size: 10px;
    }

    .routen-tage {
        grid-area: tage;
        font-size: 10px;
        white-space: nowrap;
    }

    .routen-karte h3 {
        grid-area: titel;
        font-size: 15px;
    }

    .routen-orte {
        grid-area: orte;
        font-size: 12px;
        line-height: 1.35;
    }
}

/* ══ Handy nach Vorlage, zweiter Teil: die Wochen-Chips werden EINE Reihe
   mit Zeichen und feinen Trennlinien; die Karte wird dunkel, die
   Routenkarten werden dunkle Listenzeilen mit goldener Meta-Zeile. ══ */
@media (max-width: 560px) {
    .blasen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        border: 1px solid var(--linie);
        border-radius: 14px;
        overflow: hidden;
    }

    .blase,
    .blase:nth-child(n) {
        border: 0;
        border-radius: 0;
        background-color: transparent;
        padding: 14px 6px;
        gap: 5px;
    }

    .blase + .blase {
        border-left: 1px solid var(--linie);
    }

    /* Reihenfolge der Vorlage: Schiff, Route, Crew, Piraeus — die Saison
       faellt auf dem Handy weg (steht im Preistext darunter). */
    .blase:nth-child(1) { order: 1; }
    .blase:nth-child(3) { order: 2; }
    .blase:nth-child(2) { order: 3; }
    .blase:nth-child(4) { order: 4; border-left: 1px solid var(--linie); }

    .blase:nth-child(5) {
        display: none;
    }

    .blase dt {
        font-size: 9px;
        letter-spacing: 0.08em;
        margin-right: 0;
    }

    .blase dd {
        font-size: 9px;
        line-height: 1.35;
        opacity: 0.75;
    }

    .blase dt::before {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        margin: 0 auto 7px;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .blase:nth-child(1) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 3v13M12 5l4.5 4.5M12 5 7.5 9.5M4 17c2.4 2.2 4.4 3 8 3s5.6-.8 8-3'/%3E%3C/svg%3E");
    }

    .blase:nth-child(3) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Cpath d='M8 19h6a4 4 0 0 0 0-8H9a4 4 0 0 1 0-8h7' stroke-dasharray='3 2.4'/%3E%3C/svg%3E");
    }

    .blase:nth-child(2) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c.5-3.5 3-5 6-5s5.5 1.5 6 5M16 5a3 3 0 0 1 0 6M18 15c2 .6 3 2 3.3 4.6'/%3E%3C/svg%3E");
    }

    .blase:nth-child(4) dt::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 8v13M12 21c-4 0-7-2.5-7.5-6M12 21c4 0 7-2.5 7.5-6M9 8h6'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3C/svg%3E");
    }

    /* ── Die Karte wird dunkel wie in der Vorlage. Der Grund ist dasselbe
       helle SVG — invertiert und zurueckgedreht wird die See tiefblau und
       das Land dunkel; die Beschriftung wechselt auf Weiss ohne Rand. ── */
    .karte {
        background: #0d2331;
    }

    .karte-grund {
        filter: invert(0.92) hue-rotate(185deg) saturate(0.55) brightness(0.72);
    }

    .route-punkt text {
        fill: #f3ecde;
        stroke: rgba(6, 19, 27, 0.65);
        stroke-width: 5;
    }

    .route-punkt circle {
        fill: #0d2331;
    }

    .ort-tafel {
        border: 1px solid rgba(243, 236, 222, 0.16);
    }

    /* ── Routen-Listenzeilen: dunkel, goldene Meta, Pfeil rechts. ── */
    .routen-reihe {
        gap: 10px;
    }

    .routen-karte {
        background: #0d2331;
        border-color: rgba(243, 236, 222, 0.14);
        color: #f3ecde;
        grid-template-columns: 64px 1fr 16px;
        grid-template-areas:
            'bild meta meta'
            'bild titel pfeil'
            'bild orte pfeil';
    }

    /* Auch die GEWAEHLTE Karte behaelt den Pfeil: die speziellere
       Abdunklungs-Regel des Schreibtischs wuerde ihn sonst ersetzen. */
    .routen-karte::after,
    .routen-karte[aria-pressed='true']::after {
        position: static;
        inset: auto;
        background: none;
        opacity: 1;
        content: '\2192';
        grid-area: pfeil;
        align-self: center;
        color: rgba(243, 236, 222, 0.55);
        font-size: 15px;
    }

    .routen-zahl {
        grid-area: meta;
        flex-direction: row;
        align-items: baseline;
    }

    /* Meta-Zeile wie in der Vorlage: "7 Tage · 8 Stationen", alles Gold. */
    .routen-tage {
        grid-area: meta;
        justify-self: end;
    }

    .routen-zahl strong,
    .routen-zahl span,
    .routen-tage {
        color: var(--messing-hell, #cfae68);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-family: inherit;
        font-weight: 600;
    }

    .routen-karte h3 {
        color: #f7f2e7;
    }

    .routen-orte {
        color: rgba(243, 236, 222, 0.66);
    }

    .routen-karte[aria-pressed='true'] {
        border-color: #cfae68;
    }

    /* Der Routen-Kopf der Vorlage ist still: Zeile klein, kein grosser Satz. */
    .routen-kopf .satz {
        font-size: 15px;
        color: var(--dunst, rgba(20, 49, 63, 0.7));
    }

    /* Die Routen-Szene ist in der Vorlage dunkel — Karte, Listenzeilen und
       Kopf sitzen auf Nachtgrund. */
    #routen .szene-innen {
        background: var(--nacht, #0b1f2a);
    }

    #routen .routen-kopf .satz {
        color: rgba(243, 236, 222, 0.75);
    }

    #routen .routen-kopf .klein {
        color: rgba(243, 236, 222, 0.55);
    }

    #routen .routen-kopf .titel {
        color: var(--messing-hell, #cfae68);
    }
}