/* Gemeinsames Design der deutschen (/) und englischen (/en/) Startseite. */

/* Inter 3.12 als variable Schrift: alle Stärken (100–900) in einer Datei, gleiches Schriftbild wie die früheren Einzeldateien. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-roman.var.woff2') format('woff2-variations'), url('../fonts/Inter-roman.var.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --brand-blue: #33a7ff;
    --film-yellow: #ffd200;
    --writing-pink: #ff2e72;
    --theme-accent: #ffffff;
    --theme-accent-rgb: 255, 255, 255;
    --theme-accent-contrast: #050505;
    --theme-shell-background: #000000;
    --theme-shell-text: #ffffff;
    --theme-shell-muted: #e2e8f0;
    --theme-shell-glow: rgba(255, 255, 255, 0.42);
    --cv-theme-accent: var(--brand-blue);
}

html[data-site-theme="journalism"] {
    --theme-accent: var(--brand-blue);
    --theme-accent-rgb: 51, 167, 255;
    --theme-accent-contrast: #ffffff;
    --theme-shell-background: var(--brand-blue);
    --theme-shell-text: #ffffff;
    --theme-shell-muted: #ffffff;
    --theme-shell-glow: rgba(255, 255, 255, 0.48);
    --cv-theme-accent: var(--brand-blue);
}

html[data-site-theme="film"] {
    --theme-accent: var(--film-yellow);
    --theme-accent-rgb: 255, 210, 0;
    --theme-accent-contrast: #080808;
    --theme-shell-background: var(--film-yellow);
    --theme-shell-text: #080808;
    --theme-shell-muted: #171717;
    --theme-shell-glow: rgba(0, 0, 0, 0.28);
    --cv-theme-accent: var(--film-yellow);
}

html[data-site-theme="books"] {
    --theme-accent: var(--writing-pink);
    --theme-accent-rgb: 255, 46, 114;
    --theme-accent-contrast: #080808;
    --theme-shell-background: var(--writing-pink);
    --theme-shell-text: #080808;
    --theme-shell-muted: #171717;
    --theme-shell-glow: rgba(0, 0, 0, 0.28);
    --cv-theme-accent: var(--writing-pink);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
}

/* Sternenhimmel nur rund um „Entdecken“: blendet davor und danach sehr weich ein und aus. */
#weltkarte {
    position: relative;
}

#weltkarte::before {
    content: '';
    position: absolute;
    top: -55vh;
    bottom: -55vh;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 90px 20px at 73% 29%, rgba(147, 199, 255, 0.09) 0%, rgba(51, 167, 255, 0.035) 46%, transparent 78%),
        radial-gradient(ellipse 72px 16px at 27% 76%, rgba(125, 186, 255, 0.07) 0%, rgba(51, 167, 255, 0.028) 48%, transparent 80%),
        radial-gradient(circle at 14% 23%, rgba(51, 167, 255, 0.052) 0%, transparent 22%),
        radial-gradient(circle at 88% 69%, rgba(51, 167, 255, 0.04) 0%, transparent 24%),
        radial-gradient(circle at 52% 91%, rgba(51, 167, 255, 0.035) 0%, transparent 19%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0%200%201920%201080'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='63' cy='94' r='1.1' opacity='.68'/%3E%3Ccircle cx='171' cy='322' r='.7' opacity='.42'/%3E%3Ccircle cx='286' cy='157' r='1.35' opacity='.76'/%3E%3Ccircle cx='397' cy='491' r='.8' opacity='.5'/%3E%3Ccircle cx='512' cy='76' r='.65' opacity='.36'/%3E%3Ccircle cx='622' cy='278' r='1.05' opacity='.7'/%3E%3Ccircle cx='741' cy='612' r='.75' opacity='.43'/%3E%3Ccircle cx='854' cy='184' r='1.4' opacity='.78'/%3E%3Ccircle cx='963' cy='438' r='.7' opacity='.4'/%3E%3Ccircle cx='1092' cy='92' r='.9' opacity='.56'/%3E%3Ccircle cx='1211' cy='356' r='1.2' opacity='.72'/%3E%3Ccircle cx='1338' cy='703' r='.65' opacity='.38'/%3E%3Ccircle cx='1459' cy='214' r='1.05' opacity='.66'/%3E%3Ccircle cx='1574' cy='534' r='.75' opacity='.46'/%3E%3Ccircle cx='1712' cy='121' r='1.3' opacity='.75'/%3E%3Ccircle cx='1841' cy='407' r='.7' opacity='.4'/%3E%3Ccircle cx='103' cy='783' r='.85' opacity='.52'/%3E%3Ccircle cx='231' cy='988' r='1.15' opacity='.69'/%3E%3Ccircle cx='348' cy='734' r='.65' opacity='.35'/%3E%3Ccircle cx='469' cy='931' r='1.25' opacity='.74'/%3E%3Ccircle cx='581' cy='687' r='.75' opacity='.45'/%3E%3Ccircle cx='702' cy='1031' r='.9' opacity='.58'/%3E%3Ccircle cx='819' cy='826' r='1.1' opacity='.68'/%3E%3Ccircle cx='947' cy='965' r='.65' opacity='.38'/%3E%3Ccircle cx='1068' cy='751' r='1.25' opacity='.73'/%3E%3Ccircle cx='1187' cy='1014' r='.75' opacity='.45'/%3E%3Ccircle cx='1304' cy='889' r='.9' opacity='.55'/%3E%3Ccircle cx='1428' cy='978' r='1.15' opacity='.7'/%3E%3Ccircle cx='1543' cy='812' r='.65' opacity='.38'/%3E%3Ccircle cx='1666' cy='1039' r='1.3' opacity='.76'/%3E%3Ccircle cx='1793' cy='746' r='.8' opacity='.48'/%3E%3Ccircle cx='1886' cy='921' r='1' opacity='.62'/%3E%3Ccircle cx='128' cy='542' r='.6' opacity='.38'/%3E%3Ccircle cx='253' cy='599' r='.95' opacity='.58'/%3E%3Ccircle cx='444' cy='247' r='.62' opacity='.4'/%3E%3Ccircle cx='557' cy='532' r='.72' opacity='.44'/%3E%3Ccircle cx='674' cy='118' r='.58' opacity='.35'/%3E%3Ccircle cx='788' cy='403' r='.92' opacity='.55'/%3E%3Ccircle cx='905' cy='281' r='.62' opacity='.39'/%3E%3Ccircle cx='1036' cy='307' r='.76' opacity='.47'/%3E%3Ccircle cx='1151' cy='572' r='.6' opacity='.36'/%3E%3Ccircle cx='1269' cy='181' r='.88' opacity='.53'/%3E%3Ccircle cx='1396' cy='571' r='.66' opacity='.4'/%3E%3Ccircle cx='1518' cy='349' r='.9' opacity='.55'/%3E%3Ccircle cx='1631' cy='274' r='.6' opacity='.38'/%3E%3Ccircle cx='1764' cy='506' r='.78' opacity='.48'/%3E%3Ccircle cx='1901' cy='648' r='.58' opacity='.34'/%3E%3Ccircle cx='156' cy='894' r='.66' opacity='.4'/%3E%3Ccircle cx='395' cy='1042' r='.72' opacity='.44'/%3E%3Ccircle cx='646' cy='846' r='.58' opacity='.35'/%3E%3Ccircle cx='897' cy='715' r='.86' opacity='.52'/%3E%3Ccircle cx='1114' cy='902' r='.62' opacity='.38'/%3E%3Ccircle cx='1372' cy='799' r='.74' opacity='.46'/%3E%3Ccircle cx='1608' cy='913' r='.6' opacity='.36'/%3E%3Ccircle cx='1824' cy='1012' r='.82' opacity='.5'/%3E%3Ccircle cx='92' cy='438' r='.54' opacity='.33'/%3E%3Ccircle cx='208' cy='194' r='.76' opacity='.47'/%3E%3Ccircle cx='335' cy='566' r='.58' opacity='.36'/%3E%3Ccircle cx='483' cy='651' r='.84' opacity='.51'/%3E%3Ccircle cx='596' cy='387' r='.55' opacity='.34'/%3E%3Ccircle cx='721' cy='749' r='.7' opacity='.43'/%3E%3Ccircle cx='839' cy='521' r='.57' opacity='.35'/%3E%3Ccircle cx='976' cy='132' r='.82' opacity='.49'/%3E%3Ccircle cx='1137' cy='694' r='.58' opacity='.36'/%3E%3Ccircle cx='1248' cy='485' r='.74' opacity='.45'/%3E%3Ccircle cx='1361' cy='312' r='.52' opacity='.32'/%3E%3Ccircle cx='1487' cy='642' r='.8' opacity='.48'/%3E%3Ccircle cx='1619' cy='67' r='.6' opacity='.37'/%3E%3Ccircle cx='1751' cy='856' r='.72' opacity='.44'/%3E%3Ccircle cx='1867' cy='569' r='.56' opacity='.35'/%3E%3Ccircle cx='308' cy='879' r='.82' opacity='.5'/%3E%3Ccircle cx='529' cy='1018' r='.57' opacity='.35'/%3E%3Ccircle cx='1004' cy='847' r='.69' opacity='.42'/%3E%3Ccircle cx='1278' cy='1051' r='.55' opacity='.34'/%3E%3Ccircle cx='1694' cy='681' r='.78' opacity='.47'/%3E%3C/g%3E%3Cg fill='%23b9ddff'%3E%3Ccircle cx='331' cy='386' r='.85' opacity='.48'/%3E%3Ccircle cx='774' cy='47' r='.7' opacity='.42'/%3E%3Ccircle cx='1017' cy='625' r='.9' opacity='.5'/%3E%3Ccircle cx='1384' cy='445' r='.75' opacity='.44'/%3E%3Ccircle cx='1748' cy='628' r='.85' opacity='.48'/%3E%3Ccircle cx='216' cy='688' r='.62' opacity='.35'/%3E%3Ccircle cx='603' cy='945' r='.72' opacity='.4'/%3E%3Ccircle cx='1182' cy='246' r='.64' opacity='.36'/%3E%3Ccircle cx='1497' cy='1022' r='.76' opacity='.42'/%3E%3Ccircle cx='1871' cy='212' r='.66' opacity='.38'/%3E%3Ccircle cx='451' cy='119' r='.58' opacity='.34'/%3E%3Ccircle cx='888' cy='983' r='.66' opacity='.38'/%3E%3Ccircle cx='1322' cy='118' r='.61' opacity='.36'/%3E%3Ccircle cx='1578' cy='721' r='.7' opacity='.41'/%3E%3Ccircle cx='1819' cy='337' r='.56' opacity='.33'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 1920px 1080px;
    background-attachment: fixed;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.0086) 7vh,
        rgba(0, 0, 0, 0.0579) 14vh,
        rgba(0, 0, 0, 0.1631) 21vh,
        rgba(0, 0, 0, 0.3174) 28vh,
        rgba(0, 0, 0, 0.5) 35vh,
        rgba(0, 0, 0, 0.6826) 42vh,
        rgba(0, 0, 0, 0.8369) 49vh,
        rgba(0, 0, 0, 0.9421) 56vh,
        rgba(0, 0, 0, 0.9914) 63vh,
        rgba(0, 0, 0, 1) 70vh,
        rgba(0, 0, 0, 1) calc(100% - 70vh),
        rgba(0, 0, 0, 0.9914) calc(100% - 63vh),
        rgba(0, 0, 0, 0.9421) calc(100% - 56vh),
        rgba(0, 0, 0, 0.8369) calc(100% - 49vh),
        rgba(0, 0, 0, 0.6826) calc(100% - 42vh),
        rgba(0, 0, 0, 0.5) calc(100% - 35vh),
        rgba(0, 0, 0, 0.3174) calc(100% - 28vh),
        rgba(0, 0, 0, 0.1631) calc(100% - 21vh),
        rgba(0, 0, 0, 0.0579) calc(100% - 14vh),
        rgba(0, 0, 0, 0.0086) calc(100% - 7vh),
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.0086) 7vh,
        rgba(0, 0, 0, 0.0579) 14vh,
        rgba(0, 0, 0, 0.1631) 21vh,
        rgba(0, 0, 0, 0.3174) 28vh,
        rgba(0, 0, 0, 0.5) 35vh,
        rgba(0, 0, 0, 0.6826) 42vh,
        rgba(0, 0, 0, 0.8369) 49vh,
        rgba(0, 0, 0, 0.9421) 56vh,
        rgba(0, 0, 0, 0.9914) 63vh,
        rgba(0, 0, 0, 1) 70vh,
        rgba(0, 0, 0, 1) calc(100% - 70vh),
        rgba(0, 0, 0, 0.9914) calc(100% - 63vh),
        rgba(0, 0, 0, 0.9421) calc(100% - 56vh),
        rgba(0, 0, 0, 0.8369) calc(100% - 49vh),
        rgba(0, 0, 0, 0.6826) calc(100% - 42vh),
        rgba(0, 0, 0, 0.5) calc(100% - 35vh),
        rgba(0, 0, 0, 0.3174) calc(100% - 28vh),
        rgba(0, 0, 0, 0.1631) calc(100% - 21vh),
        rgba(0, 0, 0, 0.0579) calc(100% - 14vh),
        rgba(0, 0, 0, 0.0086) calc(100% - 7vh),
        rgba(0, 0, 0, 0) 100%
    );
}

#about,
#portfolio,
#awards,
#cv,
#contact {
    position: relative;
    isolation: isolate;
    background-color: transparent !important;
}

#about::before,
#portfolio::before,
#cv::before,
#contact::before {
    content: '';
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    pointer-events: none;
}

#about::before { background: #000000; }

#portfolio::before {
    background: linear-gradient(
        to bottom,
        #000000 0%,
        #000000 74%,
        rgba(0, 0, 0, 0.96) 82%,
        rgba(0, 0, 0, 0.72) 90%,
        rgba(0, 0, 0, 0.28) 96%,
        rgba(0, 0, 0, 0) 100%
    );
}

#cv::before,
#contact::before {
    background: #000000;
}

#weltkarte,
#awards,
#cv,
#contact {
    border-top: 0 !important;
}

/* Eigene Scrollleiste (nur mit Maus/Trackpad): schlank, halbtransparent, in der Farbe des Farbmodus. */
@media (hover: hover) and (pointer: fine) {
    html {
        scrollbar-width: none;
    }

    html::-webkit-scrollbar {
        display: none;
    }
}

.page-scrollbar {
    position: fixed;
    top: 2px;
    right: 0;
    bottom: 2px;
    z-index: 70;
    width: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-scrollbar.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.page-scrollbar__thumb {
    position: absolute;
    top: 0;
    right: 3px;
    width: 7px;
    min-height: 36px;
    border-radius: 999px;
    background: rgba(var(--theme-accent-rgb), 0.5);
    transition: width 0.15s ease, background-color 0.42s ease;
    will-change: transform;
}

.page-scrollbar.is-hovered .page-scrollbar__thumb,
.page-scrollbar.is-dragging .page-scrollbar__thumb {
    width: 10px;
    background: rgba(var(--theme-accent-rgb), 0.65);
}

@media (hover: none), (pointer: coarse) {
    .page-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-scrollbar,
    .page-scrollbar__thumb { transition: none; }
}

/* Abstände zwischen den Themenblöcken: halb so groß wie die ursprünglichen 6rem (Tailwind py-24/pb-24). */
#portfolio,
#weltkarte,
#awards,
#cv,
#contact {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

section[aria-labelledby="portfolio-gallery-title"] {
    padding-bottom: 3rem;
}

/* Sprungziele (Menü, Links) halten Abstand zum festen Header, wie vor der Halbierung der Abstände. */
html {
    scroll-padding-top: 3rem;
}

/* Navigation und Footer: neutral schwarz, nach Themenwahl farbig, jeweils mit weichem Tiefenschatten. */
.site-header {
    background: var(--theme-shell-background);
    border: 0;
    color: var(--theme-shell-text);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.58), 0 20px 48px rgba(0, 0, 0, 0.4);
    transition: background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.32s ease, box-shadow 0.32s ease;
}

/* Das ausgeklappte Handy-Menü übernimmt den aktuellen Navigationsmodus. */
.mobile-menu-panel {
    background: var(--theme-shell-background);
    border: 0;
    color: var(--theme-shell-text);
    transition: background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.32s ease;
}

footer.glass {
    border: 0;
    background: var(--theme-shell-background);
    color: var(--theme-shell-text) !important;
    box-shadow: 0 -5px 14px rgba(0, 0, 0, 0.58), 0 -20px 48px rgba(0, 0, 0, 0.4);
    transition: background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.32s ease, box-shadow 0.32s ease;
}

footer.glass > div {
    color: var(--theme-shell-text) !important;
}

/* Kontakt-Hintergrund: Foto wie im Hero, oben weich aus Schwarz eingeblendet. */
.contact-backdrop {
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Ausschnitt rechts verankert: Helme und Lichter rechts sichtbar, der dunkle Baum links liegt unter dem Text. */
.contact-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 60%;
    opacity: 0.75;
}

.contact-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            #000000 0,
            rgba(0, 0, 0, 0.96) 20px,
            rgba(0, 0, 0, 0.86) 45px,
            rgba(0, 0, 0, 0.7) 65px,
            rgba(0, 0, 0, 0.5) 85px,
            rgba(0, 0, 0, 0.3) 105px,
            rgba(0, 0, 0, 0.14) 125px,
            rgba(0, 0, 0, 0.04) 150px,
            rgba(0, 0, 0, 0) 170px
        ),
        radial-gradient(ellipse 75% 65% at 0% 100%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 12%, rgba(0, 0, 0, 0.12) 25%, rgba(0, 0, 0, 0) 40%),
        linear-gradient(
            to right,
            #000000 0%,
            rgba(0, 0, 0, 0.97) 10%,
            rgba(0, 0, 0, 0.93) 20%,
            rgba(0, 0, 0, 0.89) 30%,
            rgba(0, 0, 0, 0.84) 40%,
            rgba(0, 0, 0, 0.77) 50%,
            rgba(0, 0, 0, 0.67) 60%,
            rgba(0, 0, 0, 0.53) 70%,
            rgba(0, 0, 0, 0.4) 80%,
            rgba(0, 0, 0, 0.27) 90%,
            rgba(0, 0, 0, 0.17) 100%
        );
}

::selection { background: var(--brand-blue); color: #ffffff; }

[class~="text-sky-400"], [class~="text-sky-300"], [class~="text-sky-400/90"] { color: var(--brand-blue) !important; }
[class~="bg-sky-500"], [class~="bg-sky-600"] { background-color: var(--brand-blue) !important; }
[class~="bg-sky-500/90"] { background-color: rgba(51, 167, 255, 0.90) !important; }
[class~="bg-sky-500/10"], [class~="bg-sky-600/10"] { background-color: rgba(51, 167, 255, 0.10) !important; }
[class~="border-sky-500/20"] { border-color: rgba(51, 167, 255, 0.20) !important; }
[class~="border-sky-500/30"] { border-color: rgba(51, 167, 255, 0.30) !important; }
[class~="hover:border-sky-500/40"]:hover { border-color: rgba(51, 167, 255, 0.40) !important; }
[class~="hover:border-sky-500/50"]:hover { border-color: rgba(51, 167, 255, 0.50) !important; }
[class~="hover:text-sky-400"]:hover, [class~="hover:text-sky-300"]:hover { color: var(--brand-blue) !important; }
[class~="group-hover:text-sky-400"] { transition-property: color, transform, text-shadow; }
.group:hover [class~="group-hover:text-sky-400"] { color: var(--brand-blue) !important; }
[class~="hover:bg-sky-400"]:hover, [class~="hover:bg-sky-500"]:hover, [class~="hover:bg-sky-600"]:hover { background-color: var(--brand-blue) !important; }
[class~="shadow-sky-500/25"] { --tw-shadow-color: rgba(51, 167, 255, 0.25) !important; }

[class~="text-yellow-400"], [class~="text-yellow-300"] { color: var(--film-yellow) !important; }
[class~="bg-yellow-400"] { background-color: var(--film-yellow) !important; }
[class~="bg-yellow-400/5"] { background-color: rgba(255, 210, 0, 0.05) !important; }
[class~="bg-yellow-400/10"] { background-color: rgba(255, 210, 0, 0.10) !important; }
[class~="bg-yellow-400/15"] { background-color: rgba(255, 210, 0, 0.15) !important; }
[class~="border-yellow-400/20"] { border-color: rgba(255, 210, 0, 0.20) !important; }
[class~="border-yellow-400/30"] { border-color: rgba(255, 210, 0, 0.30) !important; }
[class~="hover:border-yellow-400/50"]:hover { border-color: rgba(255, 210, 0, 0.50) !important; }
[class~="hover:border-yellow-400/60"]:hover { border-color: rgba(255, 210, 0, 0.60) !important; }
[class~="hover:border-yellow-400/70"]:hover { border-color: rgba(255, 210, 0, 0.70) !important; }
[class~="hover:text-yellow-300"]:hover { color: var(--film-yellow) !important; }
[class~="group-hover:text-yellow-400"] { transition-property: color, transform, text-shadow; }
.group:hover [class~="group-hover:text-yellow-400"] { color: var(--film-yellow) !important; }
[class~="decoration-yellow-400/40"] { text-decoration-color: rgba(255, 210, 0, 0.40) !important; }

[class~="text-pink-400"], [class~="text-pink-300"] { color: var(--writing-pink) !important; }
[class~="bg-pink-500"] { background-color: var(--writing-pink) !important; }
[class~="hover:bg-pink-500"]:hover { background-color: var(--writing-pink) !important; }
[class~="hover:border-pink-400/50"]:hover { border-color: rgba(255, 46, 114, 0.50) !important; }
[class~="hover:text-pink-300"]:hover, [class~="hover:text-pink-400"]:hover { color: var(--writing-pink) !important; }
.group:hover [class~="group-hover:text-pink-400"] { color: var(--writing-pink) !important; }
h1, h2, h3, .font-serif { font-family: 'Inter', sans-serif; }
.glass { background: rgba(12, 16, 28, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(51, 167, 255, 0.15); }
.glass-hover:hover { background: rgba(20, 28, 48, 0.95); border-color: rgba(51, 167, 255, 0.4); }

.hero-word {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
.hero-word:hover,
.hero-word:focus-visible {
    transform: translateY(-4px) scale(1.02);
}
.hero-word:focus-visible {
    border-radius: 0.15em;
    outline: 2px solid currentColor;
    outline-offset: 6px;
}
.hero-word--journalism:hover,
.hero-word--journalism:focus-visible {
    color: var(--brand-blue);
    text-shadow: 0 0 35px rgba(51, 167, 255, 0.6);
}
.hero-word--film:hover,
.hero-word--film:focus-visible {
    color: var(--film-yellow);
    text-shadow: 0 0 35px rgba(255, 210, 0, 0.55);
}
.hero-word--writing:hover,
.hero-word--writing:focus-visible {
    color: var(--writing-pink);
    text-shadow: 0 0 35px rgba(255, 46, 114, 0.55);
}

h1:not(.hero-title), h2, h3, h4 {
    transform-origin: center;
    transition: color 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.28s ease;
    will-change: transform;
}

h1:not(.hero-title):hover, h3:hover, h4:hover {
    color: var(--brand-blue) !important;
    transform: scale(1.035);
    text-shadow: 0 0 24px rgba(51, 167, 255, 0.62);
}

h2 {
    letter-spacing: 0.025em;
}

.site-brand {
    display: inline-block;
    font-weight: 900;
    transform: scale(1);
    transform-origin: left center;
    transition: color 0.24s ease, text-shadow 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header .site-brand {
    color: var(--theme-shell-text) !important;
}

.site-brand:hover,
.site-brand:focus-visible {
    color: var(--theme-shell-text) !important;
    font-weight: 900;
    transform: scale(1.018);
    text-shadow: 0 0 22px var(--theme-shell-glow);
}

.top-nav-link {
    display: inline-block;
    color: var(--theme-shell-muted);
    font-weight: 500;
    transform: translateY(0);
    text-shadow: 0 0 0 transparent;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.3s ease;
}

.top-nav-link:hover,
.top-nav-link:focus-visible {
    color: var(--theme-shell-text) !important;
    transform: translateY(-1px);
    text-shadow: -0.35px 0 currentColor, 0.35px 0 currentColor, 0 0 12px var(--theme-shell-glow);
}

.footer-legal-link {
    display: inline-block;
    color: var(--theme-shell-text) !important;
    transform: scale(1);
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.3s ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
    color: var(--theme-shell-text) !important;
    transform: scale(1.018);
    text-shadow: 0 0 12px var(--theme-shell-glow);
}

.site-header .mobile-menu-button,
.site-header .mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
    color: var(--theme-shell-text) !important;
}

.mobile-menu-button:focus-visible {
    outline: 2px solid var(--theme-shell-text);
    outline-offset: 2px;
}

.work-discover-cta {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 10px 26px rgba(255, 255, 255, 0.12);
    transition: color 0.24s ease, background-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.work-discover-cta:hover,
.work-discover-cta:focus-visible {
    background: #000000;
    color: #ffffff;
    transform: scale(1.025);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.5);
}

/* Nebenbutton: Glas mit weißem Rand, bewusst zurückhaltender als der Hauptbutton. */
.work-discover-cta--secondary {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.work-discover-cta--secondary:hover,
.work-discover-cta--secondary:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: scale(1.015);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

.work-discover-cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.filter-btn[data-filter="all"] {
    border-color: #ffffff !important;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.filter-btn[data-filter="all"].active,
.filter-btn[data-filter="all"]:hover,
.filter-btn[data-filter="all"]:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.filter-btn[data-filter="all"]:not(.active):not(:hover):not(:focus-visible) {
    border-color: #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
}

.filter-btn[data-filter="all"]:hover,
.filter-btn[data-filter="all"]:focus-visible {
    transform: scale(1.035);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.32);
}

.filter-btn[data-filter="journalism"],
.filter-btn[data-filter="film"],
.filter-btn[data-filter="books"] {
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.filter-btn[data-filter="journalism"] {
    border-color: rgba(51, 167, 255, 0.72) !important;
}

.filter-btn[data-filter="film"] {
    border-color: rgba(255, 210, 0, 0.72) !important;
}

.filter-btn[data-filter="books"] {
    border-color: rgba(255, 46, 114, 0.72) !important;
}

.filter-btn[data-filter="journalism"]:hover,
.filter-btn[data-filter="journalism"]:focus-visible {
    color: #ffffff !important;
    background: var(--brand-blue) !important;
    transform: scale(1.035);
    box-shadow: 0 0 18px rgba(51, 167, 255, 0.35);
}

.filter-btn[data-filter="film"]:hover,
.filter-btn[data-filter="film"]:focus-visible {
    color: #0f172a !important;
    background: var(--film-yellow) !important;
    transform: scale(1.035);
    box-shadow: 0 0 18px rgba(255, 210, 0, 0.32);
}

.filter-btn[data-filter="books"]:hover,
.filter-btn[data-filter="books"]:focus-visible {
    color: #0f172a !important;
    background: var(--writing-pink) !important;
    transform: scale(1.035);
    box-shadow: 0 0 18px rgba(255, 46, 114, 0.32);
}

.portfolio-heading--film:hover {
    color: var(--film-yellow) !important;
    text-shadow: 0 0 24px rgba(255, 210, 0, 0.58);
}

.portfolio-heading--writing:hover {
    color: var(--writing-pink) !important;
    text-shadow: 0 0 24px rgba(255, 46, 114, 0.58);
}

.portfolio-item h3 {
    transform-origin: left center;
}

.portfolio-title-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.portfolio-title-link:focus-visible {
    border-radius: 0.2rem;
    outline: 2px solid currentColor;
    outline-offset: 4px;
}


/* Font-Awesome-Icons als lokales SVG: so hoch wie die Schrift, Farbe über currentColor. */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: auto;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: visible;
}
/* Startbereich: Einleitung links, Porträt im Kreis rechts. */
.hero-intro {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-intro__text > * + * {
    margin-top: 2.5rem;
}

.hero-portrait {
    order: -1;
    flex: none;
    width: 7.5rem;
    height: 7.5rem;
    margin: 0;
    padding: 4px;
    border-radius: 50%;
    background: var(--theme-accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 40px rgba(var(--theme-accent-rgb), 0.35);
    transition: background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease;
}

.hero-portrait picture,
.hero-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.hero-portrait img {
    object-fit: cover;
    object-position: center;
    border: 3px solid #000000;
}

@media (min-width: 768px) {
    .hero-intro {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }

    .hero-portrait {
        order: 0;
        width: 13rem;
        height: 13rem;
        padding: 5px;
    }
}

@media (min-width: 1024px) {
    .hero-portrait {
        width: 16.25rem;
        height: 16.25rem;
        padding: 6px;
    }
}

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

/* Handy: Filter-Buttons als eine wischbare Reihe (wie Kategorie-Leisten bei YouTube/Instagram). */
@media (max-width: 639px) {
    #portfolio .portfolio-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.25rem 1rem;
        scroll-padding-inline: 1rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #portfolio .portfolio-filters::-webkit-scrollbar {
        display: none;
    }

    #portfolio .portfolio-filters > .filter-btn {
        flex: none;
        scroll-snap-align: start;
    }
}

.portfolio-image-link {
    display: block;
}

/* Plaketten liegen über dem Bild, aber außerhalb des Links: so lässt sich ihr Text markieren und kopieren. */
.portfolio-badge {
    z-index: 1;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}

.portfolio-image-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
}

.portfolio-link {
    transform-origin: left center;
    transition: color 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.22s ease;
    will-change: transform;
}

.portfolio-link:hover,
.portfolio-link:focus-visible {
    transform: scale(1.055);
    filter: drop-shadow(0 0 7px currentColor);
}

.portfolio-link:focus-visible {
    border-radius: 0.2rem;
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

#cv .cv-timeline h4 {
    transition: none;
    will-change: auto;
}

#cv .cv-timeline h4:hover {
    color: #ffffff !important;
    transform: none;
    text-shadow: none;
}

/* h3.… schlägt die allgemeine h3:hover-Regel – deshalb ohne !important. */
h3.cv-section-heading,
h3.cv-section-heading:hover {
    transition: none;
    transform: none;
    text-shadow: none;
    will-change: auto;
}

.cv-section-heading:hover {
    color: #ffffff !important;
    transform: none !important;
    text-shadow: none !important;
}

/* Stationstitel in der Infobox bleiben beim Hover unverändert. */
#map-title,
#map-title:hover {
    color: #ffffff !important;
    transform: none !important;
    text-shadow: none !important;
}

.station-shortcut {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.46);
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.82);
    color: var(--theme-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.station-shortcut:hover,
.station-shortcut:focus-visible,
.station-shortcut.is-active {
    color: var(--theme-accent);
    border-color: rgba(var(--theme-accent-rgb), 0.9);
    background: rgba(var(--theme-accent-rgb), 0.2);
    box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), 0.25);
    transform: translateY(-1px);
    outline: none;
}

.station-shortcut:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 3px;
}

#map-tag {
    color: var(--theme-accent) !important;
    border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
    background: rgba(var(--theme-accent-rgb), 0.12) !important;
    box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), 0.08);
}

.laurel-wreath {
    position: relative;
    width: 6.25rem;
    height: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--film-yellow);
}

.laurel-wreath svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.laurel-wreath__year {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    color: var(--film-yellow);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.laurel-mini {
    width: 1.75rem;
    height: 1.35rem;
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--film-yellow);
}

.laurel-mini svg {
    width: 100%;
    height: 100%;
}

.laurel-award-icon {
    width: 2.25rem;
    height: 1.8rem;
    display: block;
    color: var(--film-yellow);
}

.award-card {
    min-width: 0;
    min-height: 15.75rem;
    height: 100%;
    background: rgba(12, 16, 28, 0.85) !important;
    border-color: rgba(51, 65, 85, 0.65) !important;
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}

.award-card h3 {
    color: #ffffff !important;
    transform-origin: left center;
    transition: none !important;
}

/* Lange Wörter brechen an den ­-Stellen bzw. notfalls im Wort um, statt aus der Box zu ragen. */
main h2,
main h3,
main h4,
main p {
    overflow-wrap: break-word;
}

/* Wort wandert lieber komplett in die nächste Zeile; getrennt wird nur, wenn es allein nicht passt. */
.keep-word {
    display: inline-block;
}

.award-card h3 a {
    color: inherit !important;
    transition: none !important;
}

.award-card p,
.award-card [class~="text-slate-400"] {
    color: #e2e8f0 !important;
}

.award-card [class~="text-slate-500"] {
    color: #ffffff !important;
}

.award-card > span.font-mono {
    font-size: 1rem;
    font-family: inherit;
}

.award-card:hover {
    border-color: rgba(51, 167, 255, 0.65) !important;
    box-shadow: 0 20px 52px rgba(51, 167, 255, 0.16);
}

.award-card:hover h3,
.award-card:hover h3 a {
    transform: scale(1.055);
}

.award-card__symbol {
    transition: color 0.25s ease, background-color 0.25s ease, filter 0.25s ease;
}

.award-card--blue .award-card__symbol {
    color: var(--brand-blue) !important;
    background-color: rgba(51, 167, 255, 0.1) !important;
}

.award-card--blue:hover h3,
.award-card--blue:hover h3 a {
    color: var(--brand-blue) !important;
    text-shadow: 0 0 18px rgba(51, 167, 255, 0.48);
}

.award-card--film .award-card__symbol {
    color: var(--film-yellow) !important;
    background-color: rgba(255, 210, 0, 0.1) !important;
}

.award-card--film:hover {
    border-color: rgba(255, 210, 0, 0.68) !important;
    box-shadow: 0 20px 52px rgba(255, 210, 0, 0.14);
}

.award-card--film:hover h3,
.award-card--film:hover h3 a {
    color: var(--film-yellow) !important;
    text-shadow: 0 0 18px rgba(255, 210, 0, 0.5);
}

.award-card--writing .award-card__symbol {
    color: var(--writing-pink) !important;
    background-color: rgba(255, 46, 114, 0.1) !important;
}

.award-card--writing:hover {
    border-color: rgba(255, 46, 114, 0.65) !important;
    box-shadow: 0 20px 52px rgba(255, 46, 114, 0.14);
}

.award-card--writing:hover h3,
.award-card--writing:hover h3 a {
    color: var(--writing-pink) !important;
    text-shadow: 0 0 18px rgba(255, 46, 114, 0.48);
}

.award-card:hover h3,
.award-card:hover h3 a,
.award-card h3:hover,
.award-card h3:hover a {
    color: #ffffff !important;
    transform: none !important;
    text-shadow: none !important;
}

.festival-details summary::-webkit-details-marker {
    display: none;
}

.festival-details[open] .festival-details__chevron {
    transform: rotate(180deg);
}

.canvas-container {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: clamp(240px, 42vh, 290px);
    margin-inline: auto;
    touch-action: none;
    overflow: hidden;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 48% 42%, rgba(8, 33, 63, 0.12), transparent 42%),
        radial-gradient(circle at 50% 50%, #01040d 0%, #000107 70%, #000002 100%);
}

.globe-zoom-controls {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.globe-zoom-controls[hidden] {
    display: none;
}

.globe-zoom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.46);
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.globe-zoom-button:hover,
.globe-zoom-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.26);
    transform: scale(1.04);
}

.globe-zoom-button:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

.globe-zoom-hint {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    max-width: calc(100% - 5rem);
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.85rem;
    background: rgba(2, 6, 23, 0.64);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.35rem);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.globe-zoom-hint.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.map-layout {
    grid-template-columns: minmax(0, 1fr);
}

.contact-icon-button:focus-visible,
.email-copy-button:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

.contact-icon-button,
.social-button {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-sizing: border-box;
}

.contact-icon-button {
    border-color: rgba(255, 255, 255, 0.15);
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.contact-icon-button:hover,
.contact-icon-button:focus-visible {
    color: #ffffff;
    background-color: var(--brand-blue);
    transform: translateY(-1px);
}

.contact-email-link {
    display: inline-block;
    transform: scale(1);
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.3s ease;
}

.contact-email-link:hover,
.contact-email-link:focus-visible {
    color: #ffffff;
    transform: scale(1.02);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.social-button {
    border-color: rgba(255, 255, 255, 0.15);
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.social-button--instagram { --social-color: #d62ce6; --social-glow: rgba(214, 44, 230, 0.38); }
.social-button--youtube { --social-color: #ff2e2e; --social-glow: rgba(255, 46, 46, 0.36); }
.social-button--linkedin { --social-color: var(--brand-blue); --social-glow: rgba(51, 167, 255, 0.4); }

.social-button:hover,
.social-button:focus-visible {
    color: #ffffff;
    background-color: var(--social-color);
    box-shadow: 0 0 16px var(--social-glow);
}

.email-copy-button {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    background: transparent;
    font-size: 1.25rem;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.email-copy-button:hover {
    color: #ffffff;
    background: transparent;
    transform: scale(1.06);
}

.email-copy-feedback {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    z-index: 20;
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0.45rem;
    color: #ffffff;
    background: rgba(2, 8, 20, 0.96);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 0.3rem);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.email-copy-feedback.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (min-width: 1024px) and (min-height: 721px) {
    .map-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.78fr);
    }

    .canvas-container {
        height: auto;
        min-height: 0;
        align-self: stretch;
    }
}

@media (max-height: 720px) {
    #weltkarte {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #weltkarte > .text-center {
        margin-bottom: 1.5rem !important;
    }

    .canvas-container {
        height: clamp(240px, 42vh, 275px);
    }
}

@media (max-width: 640px) {
    .canvas-container { height: clamp(240px, 64vw, 270px); }

    .globe-zoom-controls {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .globe-zoom-hint {
        top: 0.75rem;
        left: 0.75rem;
        max-width: calc(100% - 4.5rem);
        font-size: 0.6875rem;
    }
}

#globeCanvas,
#globeCanvas > div,
#globeCanvas canvas {
    width: 100% !important;
    height: 100% !important;
}

#globeCanvas {
    position: relative;
    z-index: 1;
}

#globeCanvas canvas {
    display: block;
    cursor: grab;
}

#globeCanvas canvas:active { cursor: grabbing; }

.station-marker {
    position: relative;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    outline: none;
    pointer-events: auto;
}

.station-marker__pulse,
.station-marker__dot {
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.station-marker__pulse {
    width: 22px;
    height: 22px;
    background: rgba(239, 68, 68, 0.28);
    animation: station-pulse 2.2s ease-out infinite;
}

.station-marker__dot {
    width: 12px;
    height: 12px;
    background: #ef4444;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 0 18px rgba(239, 68, 68, 0.9);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.station-marker__label {
    position: absolute;
    left: 27px;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 6px 10px;
    border: 1px solid rgba(51, 167, 255, 0.45);
    border-radius: 8px;
    background: rgba(5, 11, 24, 0.94);
    color: #ffffff;
    font: 600 12px/1.2 'Inter', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

.station-marker:hover .station-marker__dot,
.station-marker:focus-visible .station-marker__dot,
.station-marker.is-selected .station-marker__dot {
    width: 17px;
    height: 17px;
    background: #ff3f3f;
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.2), 0 0 26px rgba(239, 68, 68, 1);
}

.station-marker:hover .station-marker__label,
.station-marker:focus-visible .station-marker__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.map-easter-egg {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    outline: none;
    pointer-events: auto;
    user-select: none;
}

.map-easter-egg::before {
    content: '';
    position: absolute;
    inset: 16%;
    z-index: -1;
    border-radius: 999px;
    opacity: 0.3;
    filter: blur(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.map-easter-egg--bathrobe {
    width: clamp(44px, 7vw, 62px);
}

.map-easter-egg--bathrobe::before { background: rgba(255, 46, 114, 0.72); }

.map-easter-egg--yacht {
    width: 44px;
    height: 44px;
}

.map-easter-egg--yacht::before { background: rgba(255, 255, 255, 0.62); }

.map-easter-egg--yellowhood {
    width: clamp(22px, 3.1vw, 29px);
}

.map-easter-egg--yellowhood::before { background: rgba(255, 210, 0, 0.6); }

.map-easter-egg--cleanmeat {
    width: clamp(23px, 3.3vw, 31px);
}

.map-easter-egg--cleanmeat::before { background: rgba(239, 68, 68, 0.42); }

.map-easter-egg--rocket {
    width: clamp(54px, 7vw, 72px);
    height: clamp(72px, 9.5vw, 98px);
}

.map-easter-egg--rocket::before {
    inset: 34% 28%;
    background: rgba(87, 174, 255, 0.58);
    filter: blur(10px);
}

.map-easter-egg__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0.82;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.72));
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.map-easter-egg--bathrobe .map-easter-egg__image {
    transform: rotate(-12deg);
    animation: bathrobe-drift 8s ease-in-out infinite;
}

.map-easter-egg--yacht .map-easter-egg__image {
    width: clamp(27px, 4vw, 38px);
    transform: rotate(-4deg);
    animation: yacht-drift 7s ease-in-out infinite;
}

.map-easter-egg--yellowhood .map-easter-egg__image {
    filter: drop-shadow(0 5px 8px rgba(255, 210, 0, 0.22)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.76));
}

.map-easter-egg--cleanmeat .map-easter-egg__image {
    transform: rotate(2deg);
}

.map-easter-egg__rocket-visual {
    position: absolute;
    left: 50%;
    top: 44%;
    display: block;
    width: 50%;
    height: 50%;
    animation: rocket-drift 6.8s ease-in-out infinite;
}

.map-easter-egg__rocket-image,
.map-easter-egg__rocket-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.78));
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.map-easter-egg__rocket-fallback .map-easter-egg__rocket-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(38deg);
    transform-origin: center;
}

.rocket-engine-flame {
    position: absolute;
    left: 7%;
    top: 72%;
    width: 36%;
    height: 29%;
    filter: drop-shadow(0 0 3px rgba(255, 157, 34, 0.9)) drop-shadow(0 0 6px rgba(255, 72, 20, 0.55));
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transform-origin: 92% 8%;
    animation: rocket-engine-cycle 4.2s linear infinite;
}

.rocket-engine-flame::before,
.rocket-engine-flame::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(100% 0%, 80% 43%, 0% 100%, 34% 24%);
    transform-origin: 92% 8%;
}

.rocket-engine-flame::before {
    background: linear-gradient(to bottom left, #fffde3 0%, #ffe05a 24%, #ff8a21 55%, rgba(255, 54, 17, 0) 100%);
    animation: rocket-engine-flicker 0.17s ease-in-out infinite alternate;
}

.rocket-engine-flame::after {
    inset: 4% 7% 20% 25%;
    background: linear-gradient(to bottom left, #ffffff 0%, #fffbd0 35%, rgba(255, 190, 38, 0) 100%);
    filter: blur(0.4px);
    animation: rocket-engine-core 0.11s ease-in-out infinite alternate;
}

.map-easter-egg__rocket-visual.uses-fallback .rocket-engine-flame {
    display: none;
}

.rocket-flame {
    transform-box: fill-box;
    transform-origin: center top;
}

.rocket-flame--outer {
    animation: rocket-flame-outer 0.52s ease-in-out infinite alternate;
}

.rocket-flame--inner {
    animation: rocket-flame-inner 0.34s ease-in-out infinite alternate;
}

.map-easter-egg__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(4px);
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(5, 11, 24, 0.94);
    color: #ffffff;
    font: 600 12px/1.2 'Inter', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

.map-easter-egg:hover::before,
.map-easter-egg:focus-visible::before,
.map-easter-egg.is-selected::before {
    opacity: 0.72;
    transform: scale(1.18);
}

.map-easter-egg:hover .map-easter-egg__image,
.map-easter-egg:focus-visible .map-easter-egg__image,
.map-easter-egg.is-selected .map-easter-egg__image,
.map-easter-egg:hover .map-easter-egg__rocket-image,
.map-easter-egg:focus-visible .map-easter-egg__rocket-image,
.map-easter-egg.is-selected .map-easter-egg__rocket-image,
.map-easter-egg:hover .map-easter-egg__rocket-fallback,
.map-easter-egg:focus-visible .map-easter-egg__rocket-fallback,
.map-easter-egg.is-selected .map-easter-egg__rocket-fallback {
    opacity: 1;
    filter: drop-shadow(0 8px 15px rgba(255, 255, 255, 0.28));
}

.map-easter-egg:hover .map-easter-egg__label,
.map-easter-egg:focus-visible .map-easter-egg__label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rocket-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    border-radius: 0.3rem;
    font-size: 1.15em;
    line-height: 1;
    text-decoration: none;
    transform-origin: center;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.rocket-contact-link:hover,
.rocket-contact-link:focus-visible {
    transform: scale(1.14);
    filter: drop-shadow(0 0 8px rgba(51, 167, 255, 0.9));
}

.rocket-contact-link:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

.map-tag-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin: -0.25rem -0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.map-tag-contact-link:hover,
.map-tag-contact-link:focus-visible {
    color: var(--theme-accent);
}

/* Inhalt der Plakette (Schrift und Symbol) vertikal mittig im Oval. */
#map-tag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
}

/* „Zum Kontakt“: beim Hover übernimmt auch die Umrandung den aktuellen Akzent. */
#map-tag {
    transition: border-color 0.2s ease;
}

#map-tag:has(.map-tag-contact-link:hover),
#map-tag:has(.map-tag-contact-link:focus-visible) {
    border-color: var(--theme-accent) !important;
}

.map-tag-contact-link:focus-visible {
    border-radius: 0.25rem;
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.portfolio-photo-gallery {
    column-count: 1;
    column-gap: 1rem;
}

.portfolio-photo-gallery__item {
    break-inside: avoid;
    margin: 1rem 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    background: #020617;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

/* „Mehr Bilder“: Form wie „Weitere Auszeichnungen“, Farbe aus dem Farbmodus (Standard: weiß auf schwarz). */
/* Abstand sitzt über den Bildern (nicht darunter): Safari schneidet Abstände am Spaltenende ab. */
.portfolio-photo-gallery__item:first-child {
    margin-top: 0;
}

.gallery-more {
    margin-top: 1rem;
}

.gallery-more[hidden] {
    display: none;
}

.gallery-more-toggle {
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-accent);
    transition: border-color 0.2s ease, background-color 0.42s ease, color 0.42s ease;
}

.gallery-more-toggle:hover,
.gallery-more-toggle:focus-visible {
    border-color: rgba(var(--theme-accent-rgb), 0.7);
    background: rgba(var(--theme-accent-rgb), 0.15);
}

.gallery-more-toggle:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 3px;
}

.portfolio-photo-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.portfolio-photo-gallery__item:hover img {
    transform: scale(1.015);
    filter: saturate(1.06) contrast(1.02);
}

@media (min-width: 640px) {
    .portfolio-photo-gallery { column-count: 2; }
}

@media (min-width: 1024px) {
    .portfolio-photo-gallery { column-count: 3; }
}

@media (min-width: 1280px) {
    .portfolio-photo-gallery { column-count: 4; }
}

#map-coords {
    font-family: inherit;
}

.cv-timeline {
    position: relative;
    padding-left: 2rem;
}

.cv-timeline h4 {
    font-size: 1.25rem;
}

.cv-timeline > .relative > span.font-mono {
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--theme-accent) !important;
    transition: color 0.32s ease;
}

.cv-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
    width: 2px;
    background: #1e293b;
}

.cv-timeline__dot {
    position: absolute;
    left: -2rem;
    top: 0.375rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #000000;
    border: 2px solid var(--cv-theme-accent);
    transition: none;
}

.group:hover .cv-timeline__dot { transform: none; }

#cv .cv-section-heading .icon {
    color: var(--cv-theme-accent) !important;
    transition: color 0.32s ease;
}

/* h2.… ist spezifischer als Tailwinds .text-white – deshalb ohne !important. */
h2.section-theme-heading,
h2.section-theme-heading:hover,
h2.section-theme-heading:focus-visible {
    color: var(--theme-accent);
    transform: none;
    text-shadow: none;
    transition: color 0.32s ease;
    will-change: auto;
}

@keyframes station-pulse {
    0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.85; }
    75%, 100% { transform: translate(-50%, -50%) scale(1.85); opacity: 0; }
}

@keyframes bathrobe-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-12deg); }
    50% { transform: translate3d(7px, -6px, 0) rotate(-6deg); }
}

@keyframes yacht-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
    50% { transform: translate3d(2px, -3px, 0) rotate(-1deg); }
}

@keyframes rocket-drift {
    0%, 100% { transform: translate3d(-50%, -55%, 0) rotate(-4deg); }
    50% { transform: translate3d(calc(-50% + 4px), calc(-55% - 6px), 0) rotate(1deg); }
}

@keyframes rocket-engine-cycle {
    0%, 8% { opacity: 0; transform: scale(0.45); }
    11% { opacity: 0.9; transform: scale(0.92); }
    14% { opacity: 0.28; transform: scale(0.64); }
    17%, 39% { opacity: 1; transform: scale(1); }
    42%, 55% { opacity: 0; transform: scale(0.38); }
    59% { opacity: 0.88; transform: scale(0.9); }
    62% { opacity: 0.24; transform: scale(0.58); }
    65%, 91% { opacity: 1; transform: scale(1.04); }
    94%, 100% { opacity: 0; transform: scale(0.42); }
}

@keyframes rocket-engine-flicker {
    0% { transform: scaleX(0.82) scaleY(0.76) skewX(-3deg); }
    100% { transform: scaleX(1.08) scaleY(1.14) skewX(3deg); }
}

@keyframes rocket-engine-core {
    0% { transform: scaleX(1.08) scaleY(0.86); opacity: 0.72; }
    100% { transform: scaleX(0.9) scaleY(1.16); opacity: 1; }
}

@keyframes rocket-flame-outer {
    0% { transform: scaleX(0.92) scaleY(0.78); opacity: 0.72; }
    100% { transform: scaleX(1.08) scaleY(1.18); opacity: 1; }
}

@keyframes rocket-flame-inner {
    0% { transform: scaleX(1.08) scaleY(0.82); opacity: 0.82; }
    100% { transform: scaleX(0.9) scaleY(1.13); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .station-marker__pulse,
    .map-easter-egg__image,
    .map-easter-egg__rocket-visual,
    .map-easter-egg__rocket-svg,
    .rocket-flame,
    .rocket-engine-flame,
    .rocket-engine-flame::before,
    .rocket-engine-flame::after { animation: none !important; }
    h1:not(.hero-title), h2, h3, h4,
    h1:not(.hero-title):hover, h2:hover, h3:hover, h4:hover,
    .contact-email-link:hover,
    .contact-email-link:focus-visible,
    .hero-word:hover,
    .hero-word:focus-visible,
    .work-discover-cta:hover,
    .work-discover-cta:focus-visible {
        transform: none !important;
        transition: color 0.15s ease, text-shadow 0.15s ease;
    }

    html {
        scroll-behavior: auto !important;
    }

    .globe-zoom-hint,
    .globe-zoom-button {
        transition: none !important;
    }

    .site-header,
    .mobile-menu-panel,
    footer.glass,
    #cv .cv-section-heading .icon,
    .cv-timeline > .relative > span.font-mono,
    .section-theme-heading,
    .station-shortcut {
        transition: none !important;
    }

    .globe-zoom-hint,
    .globe-zoom-hint.is-visible,
    .globe-zoom-button:hover,
    .globe-zoom-button:focus-visible {
        transform: none !important;
    }
}

/* Sprachumschalter DE | EN in der Navigation */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-shell-muted);
}

.lang-switch--desktop {
    padding-left: 2rem;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
}

.lang-switch--mobile {
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.lang-switch__current {
    color: var(--theme-shell-text);
    font-weight: 700;
}

.lang-switch__divider {
    opacity: 0.5;
}