/* Seite „Ziel 2030": Globus, Weltkarte, Route.
   Flaechen und Schrift kommen aus den Variablen des jeweiligen Blogs
   (Phil: --paper-card/--ink/--line, Elephant: --bg/--text/--border).
   Die drei Abschnittsfarben sind die validierte Kategorienpalette
   (dataviz, Slots 1-3, alle Paare geprueft gegen #FAF7F1 und #221C16). */

.weltreise-seite {
    --wr-1: #2a78d6;
    --wr-2: #eb6834;
    --wr-3: #1baf7a;
    --wr-flaeche: var(--paper-card, var(--bg, #fcfcfb));
    --wr-text: var(--ink, var(--text, #1a1a1a));
    --wr-text-2: var(--grey-4, var(--text-secondary, #6b6860));
    --wr-linie: var(--line, var(--border, #d8d4cb));
    --wr-schrift: var(--sans, -apple-system, BlinkMacSystemFont, sans-serif);
    --wr-land: color-mix(in srgb, var(--wr-text) 9%, var(--wr-flaeche));
    --wr-grenze: color-mix(in srgb, var(--wr-text) 22%, var(--wr-flaeche));
    --wr-gitter: color-mix(in srgb, var(--wr-text) 6%, var(--wr-flaeche));
}

/* Dunkle Stufen derselben Farben — nur, wo der Blog ein dunkles Thema hat (Phil). */
[data-theme="dark"] .weltreise-seite.wr-themes {
    --wr-1: #3987e5;
    --wr-2: #d95926;
    --wr-3: #199e70;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .weltreise-seite.wr-themes {
        --wr-1: #3987e5;
        --wr-2: #d95926;
        --wr-3: #199e70;
    }
}

.weltreise-seite .wr-f1 { --wr-farbe: var(--wr-1); }
.weltreise-seite .wr-f2 { --wr-farbe: var(--wr-2); }
.weltreise-seite .wr-f3 { --wr-farbe: var(--wr-3); }

/* ---------- Abbildungen: breiter als der Text ---------- */

.weltreise-seite .wr-figur {
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
    margin: 48px 0 48px 50%;
    transform: translateX(-50%);
}
.weltreise-seite .wr-globus-figur { width: min(680px, calc(100vw - 32px)); }
/* Variante „unter_titel": der Globus ist das Erste im Artikel, kein Abstand obendrauf. */
article.weltreise-seite > .wr-globus-figur:first-child { margin-top: 0; }

.weltreise-seite .wr-figur figcaption {
    font-family: var(--wr-schrift);
    font-size: 12px;
    line-height: 1.5;
    color: var(--wr-text-2);
    margin-top: 10px;
    text-align: center;
}
.weltreise-seite .wr-legende { display: inline; margin: 0; font-size: inherit; }

.weltreise-seite .wr-globus,
.weltreise-seite .wr-karte {
    position: relative;
    border-radius: 6px;
}
.weltreise-seite .wr-globus { aspect-ratio: 1 / 1; max-width: 600px; margin: 0 auto; }
.weltreise-seite .wr-karte { aspect-ratio: 960 / 500; overflow-x: auto; }
.weltreise-seite .wr-ohne-js {
    position: absolute;
    inset: 40% 10% auto;
    margin: 0;
    text-align: center;
    font-family: var(--wr-schrift);
    font-size: 13px;
    color: var(--wr-text-2);
}

.weltreise-seite .wr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.weltreise-seite .wr-svg-globus { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.weltreise-seite .wr-svg-globus:active { cursor: grabbing; }

/* Unter 640 px wird die Weltkarte nicht kleiner, sondern seitlich verschiebbar —
   sonst schrumpfen die Beschriftungen unter 6 px. */
@media (max-width: 640px) {
    .weltreise-seite .wr-karte { aspect-ratio: auto; }
    .weltreise-seite .wr-svg-karte { min-width: 640px; }
}

/* ---------- Kartenebenen ---------- */

.weltreise-seite .wr-meer { fill: var(--wr-flaeche); stroke: var(--wr-grenze); stroke-width: 1; }
.weltreise-seite .wr-gitter { fill: none; stroke: var(--wr-gitter); stroke-width: 0.6; }
.weltreise-seite .wr-land { fill: var(--wr-land); stroke: none; }
.weltreise-seite .wr-grenzen { fill: none; stroke: var(--wr-flaeche); stroke-width: 0.7; }
.weltreise-seite .wr-besucht {
    fill: color-mix(in srgb, var(--wr-farbe) 32%, var(--wr-flaeche));
    stroke: none;
    transition: opacity 0.3s;
}
.weltreise-seite .wr-besucht.wr-optional { fill: color-mix(in srgb, var(--wr-farbe) 16%, var(--wr-flaeche)); }

.weltreise-seite .wr-linie {
    fill: none;
    stroke: var(--wr-farbe);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.3s;
}
.weltreise-seite .wr-linie.wr-optional { stroke-dasharray: 5 6; }

.weltreise-seite .wr-punkt { transition: opacity 0.3s; }
.weltreise-seite .wr-punkt circle {
    fill: var(--wr-flaeche);
    stroke: var(--wr-farbe);
    stroke-width: 2.5;
}
.weltreise-seite .wr-punkt.wr-optional circle { stroke-dasharray: 3 3; }
.weltreise-seite .wr-heim rect { fill: var(--wr-text); stroke: var(--wr-flaeche); stroke-width: 2; }
.weltreise-seite .wr-nummer {
    fill: var(--wr-text);
    font-family: var(--wr-schrift);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
}
.weltreise-seite .wr-svg-globus .wr-nummer { font-size: 14px; }
.weltreise-seite .wr-beschriftung text {
    fill: var(--wr-text);
    font-family: var(--wr-schrift);
    font-size: 13px;
    text-anchor: middle;
}
.weltreise-seite .wr-svg-globus .wr-beschriftung text { font-size: 16px; }
.weltreise-seite .wr-beschriftung rect {
    fill: var(--wr-flaeche);
    fill-opacity: 0.9;
    stroke: var(--wr-linie);
    stroke-width: 1;
}

.weltreise-seite .wr-aus { opacity: 0.18; }
.weltreise-seite .wr-punkt.wr-aus .wr-beschriftung { display: none; }

/* ---------- Abschnittswahl über dem Globus ---------- */

.weltreise-seite .wr-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 18px;
}
.weltreise-seite .wr-filter button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--wr-linie);
    border-radius: 999px;
    background: var(--wr-flaeche);
    color: var(--wr-text);
    font-family: var(--wr-schrift);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}
.weltreise-seite .wr-filter button[aria-pressed="true"] {
    border-color: var(--wr-text);
    box-shadow: inset 0 0 0 1px var(--wr-text);
}
.weltreise-seite .wr-filter button:focus-visible { outline: 2px solid var(--wr-text); outline-offset: 2px; }

.weltreise-seite .wr-muster {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 2px solid var(--wr-farbe, var(--wr-text-2));
    vertical-align: middle;
}
.weltreise-seite .wr-muster.wr-gestrichelt { border-top-style: dashed; margin-right: 6px; }

/* ---------- Route als Zeitleiste ---------- */

.weltreise-seite .wr-route {
    list-style: none;
    margin: 32px 0 0;
    padding: 0 0 0 28px;
    position: relative;
}
.weltreise-seite .wr-route::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    border-left: 2px dotted var(--wr-linie);
}
.weltreise-seite .wr-abschnitt { position: relative; margin: 0 0 30px; padding: 0; transition: opacity 0.3s; }
.weltreise-seite .wr-abschnitt::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wr-farbe, var(--wr-flaeche));
    border: 2px solid var(--wr-farbe, var(--wr-text-2));
}
.weltreise-seite .wr-zeit {
    font-family: var(--wr-schrift);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--wr-text-2);
    margin: 0 0 4px;
}
.weltreise-seite .wr-abschnitt h3 { margin: 0 0 10px; }
.weltreise-seite .wr-abschnitt > p:not(.wr-zeit) { margin: 0; }
.weltreise-seite .wr-stopps { list-style: none; margin: 0; padding: 0; }
.weltreise-seite .wr-stopps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 10px;
}
.weltreise-seite .wr-nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--wr-farbe);
    background: var(--wr-flaeche);
    color: var(--wr-text);
    font-family: var(--wr-schrift);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.weltreise-seite .wr-nr-offen { border-style: dashed; }
.weltreise-seite .wr-optional em { font-style: normal; color: var(--wr-text-2); }

.weltreise-seite .wr-stand {
    font-family: var(--wr-schrift);
    font-size: 12px;
    color: var(--wr-text-2);
    margin-top: 48px;
}

/* ---------- Variante „ueber_titel": Globus im Kopf, ueber der Ueberschrift ---------- */

.weltreise-seite.wr-kopf-globus { margin: 0 auto; }
.weltreise-seite.wr-kopf-globus .wr-figur {
    width: min(600px, 100%);
    margin: 0 auto 32px;
    transform: none;
}
/* Elephant: die Navigation liegt ueber dem Kopf, der Globus braucht darunter Platz —
   am Telefon bricht die Navigation in drei Zeilen um. */
.hero:has(.wr-kopf-globus.wr-blog-elephant) { padding-top: 96px; }
@media (max-width: 700px) {
    .hero:has(.wr-kopf-globus.wr-blog-elephant) { padding-top: 140px; }
}
/* Elephant: der Kopf ist dunkel, Bildunterschrift und Legendenstrich brauchen helle Farbe. */
.weltreise-seite.wr-kopf-globus.wr-blog-elephant .wr-figur figcaption { color: rgba(255, 255, 255, 0.72); }
.weltreise-seite.wr-kopf-globus.wr-blog-elephant .wr-muster.wr-gestrichelt { border-top-color: rgba(255, 255, 255, 0.72); }

@media (prefers-reduced-motion: reduce) {
    .weltreise-seite .wr-besucht,
    .weltreise-seite .wr-linie,
    .weltreise-seite .wr-punkt,
    .weltreise-seite .wr-abschnitt { transition: none; }
}