/* ==========================================================
   Lars Keller – Portfolio & Vision
   Statisch, ohne Frameworks. Systemschriften, keine externen Requests.
   ========================================================== */

:root {
    --bg: #f1f1ee;
    --bg-soft: #e7e7e3;
    --ink: #15161a;
    --ink-soft: #5b5d63;
    --line: rgba(21, 22, 26, .16);
    --accent: #2a3cff;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

    --pad: clamp(1.25rem, 4vw, 3.5rem);
    --ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #0d0e10;
    --bg-soft: #181a1d;
    --ink: #efefec;
    --ink-soft: #9a9ca2;
    --line: rgba(239, 239, 236, .18);
    --accent: #8d98ff;
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color .5s var(--ease), color .5s var(--ease);
}

h1,
h2,
h3,
p,
ul,
figure {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

::selection {
    background: var(--ink);
    color: var(--bg);
}

/* ---------- Layout ---------- */
.wrap {
    max-width: 96rem;
    margin-inline: auto;
    padding-inline: var(--pad);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(.75rem, 2vw, 2rem);
}

main>section {
    position: relative;
}

/* ---------- Schwebende Elemente (Kontrast zum Untergrund) ---------- */
.name,
.toggle {
    position: fixed;
    z-index: 50;
    color: #fff;
    mix-blend-mode: difference;
    /* weiß auf dunkel, dunkel auf hell */
}

.name {
    top: 1.1rem;
    left: var(--pad);
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    letter-spacing: -.01em;
    line-height: 1;
    transition: transform .5s var(--ease);
}

.name:hover {
    transform: translateX(.35rem);
}

.name:active {
    transform: scale(.98);
}

/* Weicher Blur hinter Name und Schalter (eigene Ebene, damit der Blend-Effekt sauber bleibt) */
.veil {
    position: fixed;
    top: 0;
    z-index: 49;
    height: 6.5rem;
    pointer-events: none;
    opacity: 0;
    background: color-mix(in srgb, var(--bg) 30%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: opacity .5s var(--ease);
}

.veil--l {
    left: 0;
    width: min(30rem, 85vw);
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 25% 25%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 100% at 25% 25%, #000 40%, transparent 100%);
}

.veil--r {
    right: 0;
    width: 12rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 75% 25%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 100% at 75% 25%, #000 40%, transparent 100%);
}

.scrolled .veil {
    opacity: 1;
}

/* Lesefortschritt */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 60;
    background: var(--accent);
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
}

.toggle {
    top: 1.7rem;
    right: var(--pad);
    display: flex;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 0;
    padding: .25rem 0;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.toggle-dot {
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    transition: transform .6s var(--ease);
}

.toggle:hover .toggle-dot {
    transform: rotate(180deg);
}

.toggle:active .toggle-dot {
    scale: .85;
}

:root[data-theme="dark"] .toggle-dot {
    transform: rotate(180deg);
}

:root[data-theme="dark"] .toggle:hover .toggle-dot {
    transform: rotate(360deg);
}

/* ---------- Punkt-Navigation ---------- */
.dots {
    position: fixed;
    z-index: 50;
    left: calc(var(--pad) - 1.1rem);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.1rem;
    color: var(--ink);
    font-size: .85rem;
    border-radius: 1.25rem;
    border: 1px solid transparent;
    background: transparent;
    transition: font-size .45s var(--ease), padding .45s var(--ease), background-color .45s var(--ease),
        border-color .45s var(--ease), box-shadow .45s var(--ease);
}

@media (min-width: 64rem) {
    .dots {
        display: flex;
    }
}

.dots a {
    display: flex;
    align-items: center;
    gap: 0;
    padding: .45rem 0;
    white-space: nowrap;
}

.dots i {
    flex: none;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    transition: transform .35s var(--ease), background-color .35s var(--ease);
}

.dots a::after {
    content: attr(data-label);
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-.4rem);
    transition: max-width .5s var(--ease), opacity .35s var(--ease), transform .5s var(--ease), margin .5s var(--ease);
}

/* Beim Hovern über das Menü erscheinen alle Beschriftungen gleichzeitig */
.dots:hover,
.dots:focus-within {
    font-size: 1.05rem;
    padding: 1.25rem 1.6rem 1.25rem 1.1rem;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-color: var(--line);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .3);
}

.dots:hover a::after,
.dots:focus-within a::after {
    max-width: 14rem;
    margin-left: 1rem;
    opacity: .6;
    transform: none;
}

.dots a:hover::after,
.dots a:focus-visible::after,
.dots a[aria-current="true"]::after {
    opacity: 1;
}

.dots a:hover i {
    transform: scale(1.35);
}

.dots a[aria-current="true"] i {
    background: currentColor;
    transform: scale(1.35);
}

/* ---------- Hero ---------- */
.hero {
    min-height: 100svh;
    padding-block: 7rem 4rem;
    display: flex;
    align-items: center;
}

.hero .grid {
    width: 100%;
    row-gap: 2.5rem;
    align-items: start;
}

.hero-title {
    grid-column: 1 / -1;
    grid-row: 1;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.1rem, 6.6vw, 6.4rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    position: relative;
    z-index: 2;
}

@media (min-width: 64rem) {
    .hero-title {
        grid-column: 2 / 11;
    }
}

.hero-title .line {
    display: block;
    overflow: hidden;
    padding-bottom: .08em;
}

.hero-title .line>span {
    display: block;
    transform: translateY(105%);
    animation: rise 1.1s var(--ease) forwards;
}

.hero-title .line:nth-child(2)>span {
    animation-delay: .1s;
    padding-left: 1.2em;
}

.hero-title .line:nth-child(3)>span {
    animation-delay: .2s;
}

.hero-title .line:nth-child(4)>span {
    animation-delay: .3s;
    padding-left: 1.2em;
    color: var(--ink-soft);
}

@keyframes rise {
    to {
        transform: none;
    }
}

.portrait {
    grid-column: 4 / 11;
    grid-row: 2;
}

.portrait-frame {
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--bg-soft), color-mix(in srgb, var(--ink) 22%, var(--bg-soft)));
    overflow: hidden;
    border-radius: 4px;
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate3d(0, var(--py, 0px), 0) scale(1.05);
    transition: transform .6s var(--ease);
    will-change: transform;
}

.portrait-frame:hover img {
    transform: translate3d(0, var(--py, 0px), 0) scale(1.15);
}

.portrait img.is-missing {
    display: none;
}

.portrait figcaption {
    margin-top: .75rem;
    font-size: .85rem;
    color: var(--ink-soft);
}

.hero-intro {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 28rem;
    color: var(--ink-soft);
}

.scroll-hint {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    font-size: .9rem;
    border-bottom: 1px solid var(--line);
    transition: border-color .3s, color .3s;
}

.scroll-hint:hover {
    border-color: var(--ink);
}

@media (min-width: 64rem) {
    .hero {
        padding-block: 8rem 5rem;
    }

    .hero .grid {
        row-gap: 0;
    }

    .hero-title {
        grid-row: 1 / 3;
    }

    .portrait {
        grid-column: 9 / 13;
        grid-row: 2 / 5;
        margin-top: clamp(4rem, 12vh, 9rem);
    }

    .hero-intro {
        grid-column: 2 / 6;
        grid-row: 3;
        margin-top: 3rem;
    }

    .scroll-hint {
        grid-column: 2 / 6;
        grid-row: 4;
        margin-top: 2rem;
    }
}

/* ---------- Abschnitte ---------- */
.block {
    padding-block: clamp(5rem, 14vw, 11rem);
    border-top: 1px solid var(--line);
}

.block-title {
    grid-column: 1 / -1;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    letter-spacing: -.015em;
    line-height: 1.1;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 64rem) {
    .block-title {
        grid-column: 2 / 6;
    }
}

/* Über mich */
.prose {
    grid-column: 1 / -1;
    display: grid;
    gap: 1.25rem;
    max-width: 40rem;
}

.prose p {
    color: var(--ink-soft);
}

.prose .lead {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: .75rem;
}

@media (min-width: 64rem) {
    .prose {
        grid-column: 6 / 12;
    }
}

/* Vision */
.vision {
    background: var(--bg-soft);
    transition: background-color .5s var(--ease);
}

.principles {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}

.principle {
    display: grid;
    gap: .75rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
}

.principle h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
}

.eu-title {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.principle p {
    color: var(--ink-soft);
    max-width: 36rem;
}

@media (min-width: 48rem) {
    .principle {
        grid-template-columns: 1fr 1.4fr;
        gap: 3rem;
    }
}

@media (min-width: 64rem) {
    .principles {
        grid-column: 2 / 12;
    }
}

.vision-note {
    grid-column: 1 / -1;
    margin-top: 2.5rem;
    font-size: .95rem;
    color: var(--ink-soft);
}

@media (min-width: 64rem) {
    .vision-note {
        grid-column: 2 / 12;
    }
}

/* Projekte */
.projects {
    grid-column: 1 / -1;
    display: grid;
    gap: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 64rem) {
    .projects {
        grid-column: 2 / 12;
    }
}

.group-title {
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--ink);
}

.rows a {
    display: grid;
    gap: .35rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--line);
    transition: padding .45s var(--ease), color .3s;
}

.row-title {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.15;
}

.row-text {
    color: var(--ink-soft);
    max-width: 36rem;
}

.row-meta {
    font-size: .85rem;
    color: var(--ink-soft);
}

@media (min-width: 48rem) {
    .rows a {
        grid-template-columns: 1.2fr 1.4fr auto;
        gap: 2rem;
        align-items: baseline;
    }
}

.rows a:hover {
    padding-left: 1rem;
}

.rows a:hover .row-title {
    color: var(--accent);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
    margin-top: 1.5rem;
    align-items: end;
}

.gallery .ph {
    background: linear-gradient(150deg, var(--bg-soft), color-mix(in srgb, var(--ink) 28%, var(--bg-soft)));
    transition: transform .8s var(--ease);
}

.gallery figure {
    overflow: hidden;
}

.gallery figure:hover .ph {
    transform: scale(1.04);
}

.g1 {
    grid-column: 1 / 4;
}

.g1 .ph {
    aspect-ratio: 4 / 5;
}

.g2 {
    grid-column: 4 / 7;
}

.g2 .ph {
    aspect-ratio: 1 / 1;
}

.g3 {
    grid-column: 2 / 7;
}

.g3 .ph {
    aspect-ratio: 16 / 9;
}

.group-note {
    margin-top: .9rem;
    font-size: .85rem;
    color: var(--ink-soft);
}

code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .9em;
}

/* Social */
.social {
    padding-bottom: clamp(6rem, 16vw, 13rem);
}

.social-body {
    grid-column: 1 / -1;
    display: grid;
    gap: 3rem;
}

@media (min-width: 64rem) {
    .social-body {
        grid-column: 2 / 12;
    }
}

.social-lead {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1.28;
    max-width: 40rem;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

@media (min-width: 40rem) {
    .social-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 64rem) {
    .social-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.social-grid li {
    background: var(--bg);
}

.social-grid a {
    position: relative;
    display: grid;
    gap: .25rem;
    align-content: end;
    min-height: 12rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: background-color .45s var(--ease), color .45s var(--ease);
}

.s-icon {
    display: block;
    margin-bottom: auto;
    transition: transform .6s var(--ease);
}

.s-name {
    font-family: var(--serif);
    font-size: 1.6rem;
    line-height: 1.1;
}

.s-handle {
    font-size: .9rem;
    color: var(--ink-soft);
    transition: color .45s var(--ease);
}

.social-grid a:hover {
    background: var(--ink);
    color: var(--bg);
}

.social-grid a:hover .s-handle {
    color: var(--bg);
    opacity: .7;
}

.social-grid a:hover .s-icon {
    transform: translate(.35rem, -.35rem) rotate(-8deg) scale(1.12);
}

.social-grid a:active {
    transform: scale(.985);
}

/* Footer */
.footer {
    border-top: 1px solid var(--line);
    padding-block: 1.5rem;
    font-size: .85rem;
    color: var(--ink-soft);
}

.footer-in {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.footer a {
    border-bottom: 1px solid transparent;
    transition: border-color .3s, color .3s;
}

.footer a:hover {
    color: var(--ink);
    border-color: var(--ink);
}


/* ---------- Rechtstexte (Impressum) ---------- */
.legal {
    padding-block: clamp(8rem, 18vw, 12rem) clamp(4rem, 10vw, 8rem);
    min-height: 80svh;
}

.legal .block-title {
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.legal-body {
    grid-column: 1 / -1;
    display: grid;
    gap: 2.5rem;
    max-width: 40rem;
}

@media (min-width: 64rem) {
    .legal-body {
        grid-column: 2 / 9;
    }
}

.legal h2 {
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .6rem;
}

.legal p {
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.45;
}

.legal a:not(.back) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    transition: color .3s;
}

.legal a:not(.back):hover {
    color: var(--accent);
}

.legal-note {
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--ink-soft);
}

.back {
    font-family: var(--sans);
    font-size: .95rem;
    border-bottom: 1px solid var(--line);
    transition: border-color .3s;
}

.back:hover {
    border-color: var(--ink);
}

/* ---------- Scroll-Reveal ---------- */
.js .reveal,
.js .principle,
.js .social-grid li {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.js .reveal.in,
.js .principle.in,
.js .social-grid li.in {
    opacity: 1;
    transform: none;
}

/* ---------- Theme-Wechsel: Kreis breitet sich vom Schalter aus ---------- */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
}

/* ==========================================================
   Redesign: Hero, Radar („Über mich“), Feinschliff
   ========================================================== */

/* Hero: Aurora, Zitat-Zeichen, Betonung */
.hero {
    overflow: clip;
}

.aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
}

.aurora i {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    transition: translate .8s var(--ease);
}

.aurora i:nth-child(1) {
    width: 42vw;
    height: 42vw;
    left: 52%;
    top: 4%;
    background: color-mix(in srgb, var(--accent) 34%, transparent);
    translate: calc(var(--mx, 0) * -70px) calc(var(--my, 0) * -50px);
    animation: drift 16s ease-in-out infinite alternate;
}

.aurora i:nth-child(2) {
    width: 32vw;
    height: 32vw;
    left: -6%;
    top: 46%;
    background: color-mix(in srgb, #ff8a5c 26%, transparent);
    translate: calc(var(--mx, 0) * 60px) calc(var(--my, 0) * 40px);
    animation: drift 21s ease-in-out -6s infinite alternate-reverse;
}

:root[data-theme="dark"] .aurora i {
    opacity: .6;
}

@keyframes drift {
    to {
        transform: translate(6vw, 5vh) scale(1.15);
    }
}

.hero .grid {
    position: relative;
    z-index: 1;
}

/* Porträt: Versatz-Rahmen und rotierende Marke */
.portrait {
    position: relative;
    isolation: isolate;
}

.portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--accent);
    border-radius: 12px;
    translate: .9rem .9rem;
    transition: translate .6s var(--ease);
}

.portrait:hover::before {
    translate: 1.4rem 1.4rem;
}

.portrait-frame {
    border-radius: 12px;
}

.badge {
    position: absolute;
    left: -2.2rem;
    bottom: 2.5rem;
    width: 6.5rem;
    height: 6.5rem;
    padding: .2rem;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    animation: spin 20s linear infinite;
}

.badge text {
    font: 500 9.4px var(--sans);
    letter-spacing: .1em;
    fill: currentColor;
}

.badge circle {
    fill: var(--accent);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 63.99rem) {
    .badge {
        left: -.6rem;
        width: 5rem;
        height: 5rem;
    }
}

/* Projekte: Pfeil bei Links */
.rows a[href] .row-title::after {
    content: "↗";
    display: inline-block;
    margin-left: .4em;
    color: var(--accent);
    opacity: 0;
    translate: -.4em .4em;
    transition: opacity .3s, translate .45s var(--ease);
}

.rows a:hover .row-title::after {
    opacity: 1;
    translate: 0;
}

/* Über mich: horizontaler Karten-Stapel (erste Karte vorn, dahinter absteigend) */
.deck-wrap {
    grid-column: 1 / -1;
    margin-top: clamp(3rem, 7vw, 5rem);
}

@media (min-width: 64rem) {
    .deck-wrap {
        grid-column: 2 / 12;
    }
}

.deck {
    --n: 3;
    --p: 2.6rem;
    position: relative;
    height: 17.5rem;
    max-width: 26rem;
    margin-inline: auto;
}

.card {
    --pos: var(--i);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - (var(--n) - 1) * var(--p));
    height: 16.5rem;
    padding: 1.25rem 2.1rem 1.25rem 1.25rem;
    z-index: calc(var(--n) - var(--pos));
    translate: calc(var(--pos) * var(--p)) 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--accent) calc(2% + var(--i) * 3%), var(--bg));
    box-shadow: -.9rem 0 1.6rem -1.2rem rgba(0, 0, 0, .45);
    cursor: pointer;
    outline-offset: 3px;
    transition: translate .6s var(--ease), rotate .6s var(--ease), border-color .3s;
    will-change: translate;
}

/* Beschriftung am rechten Rand: bleibt sichtbar, wenn die Karte teilweise verdeckt ist */
.card::after {
    content: attr(data-tag);
    position: absolute;
    top: 1.25rem;
    right: .75rem;
    writing-mode: vertical-rl;
    font-size: .7rem;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.card h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.2rem, 5vw, 1.45rem);
    line-height: 1.15;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.card p {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-soft);
    hyphens: auto;
}

.card:hover {
    border-color: var(--ink);
}

/* Desktop (ab 64rem, unabhängig vom Hover-Support des Geräts): Stapel liegt mittig,
   beim Hovern (oder per Tastaturfokus) fächert er zu einer Reihe auf.
   Maße kommen aus Container-Einheiten (cqw) – keine Prozent-Rechnung im translate mehr. */
@media (min-width: 64rem) {
    .deck {
        --step: 3rem;
        --w: calc((100cqw - (var(--n) - 1) * 1rem) / var(--n));
        container-type: inline-size;
        max-width: none;
        height: 16rem;
    }

    .card {
        width: var(--w);
        height: 15rem;
        padding: 1.4rem 2.4rem 1.4rem 1.5rem;
        translate: calc((100cqw - var(--w)) / 2 + (var(--pos) - (var(--n) - 1) / 2) * var(--step)) 0;
        rotate: calc((var(--pos) - (var(--n) - 1) / 2) * 1.2deg);
        transition-delay: calc(var(--i) * 45ms);
    }

    .card h3 {
        font-size: clamp(1.2rem, 1.9vw, 1.6rem);
    }

    .card p {
        font-size: .95rem;
    }

    .deck:hover .card,
    .deck:has(.card:focus-visible) .card {
        translate: calc(var(--i) * (var(--w) + 1rem)) 0;
        rotate: 0deg;
        z-index: 1;
    }

    .deck:hover .card:hover,
    .deck:has(.card:focus-visible) .card:focus-visible {
        translate: calc(var(--i) * (var(--w) + 1rem)) -.6rem;
        transition-delay: 0s;
    }
}

/* Social: flüssigere Hover-Animation (nur Transform, keine Hintergrund-Überblendung) */
.social-grid a {
    isolation: isolate;
    transition: color .35s var(--ease);
}

.social-grid a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform .5s var(--ease);
    will-change: transform;
}

.social-grid a:hover,
.social-grid a:focus-visible {
    background: none;
    color: var(--bg);
}

.social-grid a:hover::before,
.social-grid a:focus-visible::before {
    transform: none;
}

.s-icon {
    will-change: transform;
    backface-visibility: hidden;
    transition: transform .5s var(--ease);
}

/* Hero-Schriftzug: Platz für Unterlängen (g, j, p …) */
.hero-title .line {
    padding-bottom: .24em;
    margin-bottom: -.16em;
}

.hero-title .line>span {
    transform: translateY(130%);
}

/* Themen & Vision */
.vision {
    overflow-x: clip;
}

.vision .block-title {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 .3em;
    font-size: clamp(2.8rem, 9.5vw, 8.5rem);
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.split-l,
.split-r {
    display: inline-block;
}

.split-r {
    font-style: italic;
    color: var(--accent);
}

/* Läuft die ganze Zeit mit dem Scrollen: von den Seiten herein, in der Mitte zusammen, danach wieder auseinander (--d wird in script.js gesetzt) */
.js .split-l {
    opacity: calc(1 - var(--d, 0) * var(--d, 0) * var(--d, 0) * .85);
    transform: translateX(calc(var(--d, 0) * var(--d, 0) * -42vw));
}

.js .split-r {
    opacity: calc(1 - var(--d, 0) * var(--d, 0) * var(--d, 0) * .85);
    transform: translateX(calc(var(--d, 0) * var(--d, 0) * 42vw));
}

/* Europa: Schrift mit wanderndem Sternenfeld */
.eu-title {
    align-items: center;
}

.eu-word {
    --eu-a: #0a35a8;
    --eu-b: #2457e6;
    font-size: 1.18em;
    font-weight: 700;
    letter-spacing: -.01em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpolygon fill='%23fc0' points='9.00,4.80 10.00,7.62 12.99,7.70 10.62,9.53 11.47,12.40 9.00,10.70 6.53,12.40 7.38,9.53 5.01,7.70 8.00,7.62'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpolygon fill='%23fc0' points='9.00,4.80 10.00,7.62 12.99,7.70 10.62,9.53 11.47,12.40 9.00,10.70 6.53,12.40 7.38,9.53 5.01,7.70 8.00,7.62'/%3E%3C/svg%3E"), linear-gradient(120deg, var(--eu-a), var(--eu-b));
    background-size: 18px 18px, 18px 18px, 100% 100%;
    background-position: 0 0, 9px 9px, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: stars 9s linear infinite;
}

:root[data-theme="dark"] .eu-word {
    --eu-a: #2f61f0;
    --eu-b: #6d93ff;
}

@keyframes stars {
    to {
        background-position: 18px 0, 27px 9px, 0 0;
    }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }

    .hero-title .line>span {
        transform: none;
    }

    .js .reveal,
    .js .principle,
    .js .social-grid li {
        opacity: 1;
        transform: none;
    }

    .portrait img {
        transform: none;
    }
}

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

    .badge,
    .aurora i,
    .eu-word {
        animation: none;
    }

}

/* ==========================================================
   Feinschliff
   ========================================================== */

/* Ruhigere Zeilenumbrüche */
h1,
h2,
h3,
.lead,
.social-lead {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* Themen: Akzentlinie läuft beim Hovern/Fokus unter der Zeile entlang */
.principle {
    position: relative;
}

.principle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .7s var(--ease);
    pointer-events: none;
}

.principle:hover::after,
.principle:focus-within::after {
    transform: scaleX(1);
}

.principle h3 {
    transition: translate .5s var(--ease), color .3s;
}

.principle:hover h3 {
    translate: .5rem 0;
}

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

    .principle::after,
    .principle h3 {
        transition: none;
    }
}

/* ==========================================================
   Porträt: bleibt beim Scrollen im Rahmen
   Das Bild ist größer als der Rahmen (Reserve rundum), die Parallax-
   Verschiebung wird in script.js auf diese Reserve begrenzt.
   ========================================================== */
.portrait img {
    transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
}

.portrait-frame:hover img {
    transform: translate3d(0, var(--py, 0px), 0) scale(1.18);
}

/* ==========================================================
   Eigener Cursor: Punkt, der sich per Differenz-Mischung
   mit dem Hintergrund verrechnet (hell auf dunkel, dunkel auf hell,
   und eine Gegenfarbe über der Aurora / dem Akzent)
   ========================================================== */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: .8rem;
    height: .8rem;
    margin: -.4rem 0 0 -.4rem;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 0;
    scale: 1;
    will-change: translate, scale;
    transition: opacity .3s, scale .45s var(--ease), width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease);
}

.cursor.is-on {
    opacity: 1;
}

.cursor.is-hot {
    scale: 4.5;
}

.cursor.is-down {
    scale: .6;
}

.cursor.is-hot.is-down {
    scale: 3.6;
}

/* Über Fotos: der Differenz-Effekt wirkt dort unruhig, stattdessen eine Liquid-Glass-Linse.
   Gleiche Größe-Animation wie bisher (wächst beim Eintritt, schrumpft beim Klick). */
.cursor.is-glass {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    scale: 1;
    mix-blend-mode: normal;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(5px) saturate(1.7) brightness(1.08);
    backdrop-filter: blur(5px) saturate(1.7) brightness(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .4),
        inset 0 1.5px 2px rgba(255, 255, 255, .75),
        inset 0 -8px 14px -8px rgba(255, 255, 255, .35),
        0 10px 26px rgba(0, 0, 0, .28);
}

/* Chromium: echte Lichtbrechung durch den SVG-Filter (siehe script.js) */
.has-lens .cursor.is-glass {
    -webkit-backdrop-filter: url(#lk-lens) blur(.6px) saturate(1.6) brightness(1.06);
    backdrop-filter: url(#lk-lens) blur(.6px) saturate(1.6) brightness(1.06);
}

.cursor.is-glass.is-down {
    scale: .88;
}

/* Glanzlicht oben links */
.cursor::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .6), transparent 40%);
    opacity: 0;
    transition: opacity .3s;
}

.cursor.is-glass::after {
    opacity: 1;
}

html.has-cursor,
html.has-cursor *,
html.has-cursor *::before,
html.has-cursor *::after {
    cursor: none !important;
}

/* Magnetische Elemente werden leicht zum Zeiger gezogen */
.toggle,
.scroll-hint {
    transition: translate .45s var(--ease);
}

/* Themen: weiches Licht folgt dem Zeiger */
.vision::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(30rem circle at var(--sx, 50%) var(--sy, 50%),
            color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
    transition: opacity .6s var(--ease);
}

.vision.is-lit::before {
    opacity: 1;
}

.vision>.wrap {
    position: relative;
    z-index: 1;
}

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

    .toggle,
    .scroll-hint {
        transition: none;
    }
}

/* ==========================================================
   Handy (bis 48rem): natives App-Gefühl
   - Landing: eine Bildschirmhöhe, Porträt als große Karte,
     Hauptaktion als Pill-Button, Schalter als runde Touch-Fläche
   - Kontakt: kompakte 2×2-Kacheln statt vier hoher Einzelkacheln
   ========================================================== */
@media (max-width: 47.99rem) {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    /* Schwebende Leiste: Name links, Schalter rechts, unterhalb der Notch */
    .name {
        top: calc(env(safe-area-inset-top, 0px) + .9rem);
        font-size: 1.55rem;
    }

    .toggle {
        top: calc(env(safe-area-inset-top, 0px) + .6rem);
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        justify-content: center;
        border: 1px solid currentColor;
        border-radius: 50%;
        -webkit-tap-highlight-color: transparent;
        transition: scale .25s var(--ease);
    }

    .toggle:active {
        scale: .9;
    }

    /* Beschriftung nur für Screenreader */
    .toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .toggle-dot {
        width: 1.2rem;
        height: 1.2rem;
    }

    .veil {
        height: calc(env(safe-area-inset-top, 0px) + 4.5rem);
    }

    /* ---------- Landing ---------- */
    .hero {
        min-height: 100svh;
        padding-block: calc(env(safe-area-inset-top, 0px) + 5.25rem) calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
        align-items: stretch;
    }

    .hero .grid {
        display: flex;
        flex-direction: column;
        row-gap: 0;
        min-height: 100%;
    }

    .hero-title {
        font-size: clamp(2rem, 9.4vw, 2.7rem);
        line-height: 1.05;
    }

    .hero-title .line:nth-child(2)>span,
    .hero-title .line:nth-child(4)>span {
        padding-left: .6em;
    }

    /* Porträt: breite Karte; der Versatz-Rahmen bekommt Platz rechts und unten */
    .portrait {
        margin: 1.4rem .9rem .9rem 0;
    }

    .portrait-frame,
    .portrait::before {
        border-radius: 1.6rem;
    }

    .portrait-frame {
        aspect-ratio: 8 / 7;
    }

    .portrait img {
        object-position: 50% 18%;
    }

    /* Rotierende Marke als Sticker in der Bildecke */
    .badge {
        left: .7rem;
        bottom: .7rem;
        width: 4.4rem;
        height: 4.4rem;
        box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18);
    }

    .hero-intro {
        max-width: none;
        font-size: .95rem;
        line-height: 1.45;
        margin-top: .4rem;
    }

    /* Hauptaktion: Pill-Button über die volle Breite, am unteren Rand der Landing */
    .scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        align-self: stretch;
        margin-top: auto;
        min-height: 3.25rem;
        padding: .9rem 1.25rem;
        border: 0;
        border-radius: 999px;
        background: var(--ink);
        color: var(--bg);
        font-size: 1rem;
        font-weight: 500;
        -webkit-tap-highlight-color: transparent;
        transition: scale .25s var(--ease), opacity .25s;
    }

    .hero-intro {
        margin-bottom: 1.5rem;
    }

    .scroll-hint::after {
        content: "↓";
        font-size: 1.1em;
        line-height: 1;
    }

    .scroll-hint:active {
        scale: .97;
        opacity: .85;
    }

    /* Aurora größer, damit sie auf schmalen Displays sichtbar bleibt */
    .aurora i {
        filter: blur(56px);
    }

    .aurora i:nth-child(1) {
        width: 78vw;
        height: 78vw;
        left: 38%;
        top: 2%;
    }

    .aurora i:nth-child(2) {
        width: 66vw;
        height: 66vw;
        left: -18%;
        top: 52%;
    }

    /* ---------- Kontakt: kompakte 2×2-Kacheln ---------- */
    .social {
        padding-bottom: 4rem;
    }

    .social .block-title {
        margin-bottom: 1.5rem;
    }

    .social-body {
        gap: 1.5rem;
    }

    .social-lead {
        font-size: 1.15rem;
        line-height: 1.35;
    }

    .social-grid {
        grid-template-columns: 1fr 1fr;
        border-radius: 1rem;
        overflow: hidden;
    }

    .social-grid a {
        min-height: 6.75rem;
        padding: .9rem 1rem;
        gap: .1rem;
    }

    .s-icon svg {
        width: 1.45rem;
        height: 1.45rem;
    }

    .s-name {
        font-size: 1.15rem;
    }

    .s-handle {
        font-size: .78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Touch: Rückmeldung beim Antippen statt hängenbleibendem Hover */
@media (max-width: 47.99rem) and (hover: none) {
    .social-grid a:active {
        background: none;
        color: var(--bg);
        transform: none;
    }

    .social-grid a:active::before {
        transform: none;
    }
}

/* ==========================================================
   Baustellen-Hinweis
   ========================================================== */
.notice {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

.notice[hidden] {
    display: none;
}

.notice-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    animation: notice-fade .5s var(--ease) both;
}

.notice-card {
    position: relative;
    width: min(100%, 30rem);
    overflow: hidden;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .45);
    animation: notice-rise .8s var(--ease) both;
}

.notice-art {
    color: var(--ink);
    background:
        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
        var(--bg-soft);
    border-bottom: 1px solid var(--line);
}

.notice-art svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 11rem;
}

.n-sun {
    fill: color-mix(in srgb, var(--accent) 45%, transparent);
}

.n-fill {
    fill: color-mix(in srgb, var(--ink) 14%, transparent);
}

.n-accent {
    fill: var(--accent);
    stroke: var(--accent);
}

.n-swing {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: notice-swing 4.5s ease-in-out infinite alternate;
}

.notice-body {
    display: grid;
    gap: .75rem;
    padding: 1.5rem 1.6rem 1.7rem;
}

.notice-tag {
    justify-self: start;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: #fc0;
    color: #15161a;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.notice-body h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -.015em;
}

.notice-body p:not(.notice-tag) {
    color: var(--ink-soft);
    font-size: .98rem;
    line-height: 1.5;
}

.notice-btn {
    margin-top: .6rem;
    min-height: 3rem;
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font: inherit;
    font-size: .98rem;
    font-weight: 500;
    cursor: pointer;
    transition: scale .25s var(--ease), opacity .25s;
}

.notice-btn:hover {
    opacity: .88;
}

.notice-btn:active {
    scale: .97;
}

.notice-x {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink);
    cursor: pointer;
    transition: rotate .5s var(--ease), border-color .3s;
}

.notice-x:hover {
    rotate: 90deg;
    border-color: var(--ink);
}

.notice.is-closing .notice-backdrop {
    animation: notice-fade .3s var(--ease) reverse both;
}

.notice.is-closing .notice-card {
    animation: notice-rise .3s var(--ease) reverse both;
}

html.notice-open {
    overflow: hidden;
}

@keyframes notice-fade {
    from {
        opacity: 0;
    }
}

@keyframes notice-rise {
    from {
        opacity: 0;
        transform: translateY(1.5rem) scale(.97);
    }
}

@keyframes notice-swing {
    from {
        transform: rotate(-3deg);
    }

    to {
        transform: rotate(3deg);
    }
}

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