:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --card: #fafafa;
    --fg: #09090b;
    --muted: #52525b;
    --accent: #0066b8;
    --accent-2: #3794ff;
    --on-accent: #ffffff;
    --line: rgba(0, 0, 0, 0.1);
    --line-hover: rgba(0, 102, 184, 0.5);
    --glow: rgba(0, 102, 184, 0.12);
    --shadow: rgba(0, 0, 0, 0.12);
    --code-bg: #f4f4f5;
    --tok-comment: #5c6370;
    --tok-keyword: #0066b8;
    --tok-string: #166534;
    --tok-func: #795e26;
    --measure: 46rem;
    --radius: 0.875rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #09090b;
        --card: #111113;
        --fg: #fafafa;
        --muted: #a1a1aa;
        --accent: #3794ff;
        --accent-2: #8cc4ff;
        --on-accent: #09090b;
        --line: rgba(255, 255, 255, 0.09);
        --line-hover: rgba(55, 148, 255, 0.6);
        --glow: rgba(55, 148, 255, 0.2);
        --shadow: rgba(0, 0, 0, 0.5);
        --code-bg: #0f0f12;
        --tok-comment: #8b949e;
        --tok-keyword: #3794ff;
        --tok-string: #86efac;
        --tok-func: #dcdcaa;
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* Sanfter Glow oben, hinter dem Inhalt */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 34rem;
    background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--glow), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

a {
    color: var(--accent);
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-thickness: 2px;
}

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    padding: 0.5rem 1rem;
    background: var(--fg);
    color: var(--bg);
    z-index: 20;
}

.skip-link:focus {
    top: 1rem;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--line);
}

.site-header .bar,
main,
.site-footer {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 1rem;
}

.site-header .bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.75rem;
}

.site-name {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--fg);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
}

.site-tagline {
    color: var(--fg);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.site-name img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    transition: transform 0.25s ease;
}

.site-name:hover img {
    transform: rotate(-6deg) scale(1.08);
}

.site-header ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header nav a {
    display: block;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.site-header nav a:hover {
    color: var(--fg);
    background: var(--line);
}

.site-header nav a[aria-current="page"] {
    color: var(--fg);
    background: var(--line);
}

/* Inhalt */
main {
    flex: 1;
    padding-block: 2.5rem 4rem;
}

h1,
h2,
h3 {
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 6vw, 2.75rem);
}

h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.5rem;
}

h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.1875rem;
}

.lead {
    font-size: 1.25rem;
    color: var(--muted);
}

.gradient-text {
    background: linear-gradient(135deg, var(--fg) 0%, var(--muted) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.accent-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Hero */
.hero {
    padding-block: 2rem 1rem;
    text-align: center;
}

.hero-logo {
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid var(--line);
    box-shadow: 0 0 0 6px var(--glow), 0 12px 40px var(--shadow);
}

/* Animiertes Logo: Bild dient als Maske, der Verlauf füllt sie aus */
.logo-anim {
    display: none;
}

@supports ((mask-image: url("x.png")) or (-webkit-mask-image: url("x.png"))) {
    .hero-logo {
        display: none;
    }

    .logo-anim {
        display: block;
        width: 10rem;
        height: 10rem;
        margin: 0 auto 1rem;
        filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 45%, transparent));
    }

    .logo-anim-fill {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(105deg, var(--accent) 0%, var(--accent) 40%, var(--accent-2) 50%, var(--accent) 60%, var(--accent) 100%);
        background-size: 250% 100%;
        background-position: 100% 0;
        -webkit-mask: url("/img/logo-mask.png") center / contain no-repeat;
        mask: url("/img/logo-mask.png") center / contain no-repeat;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: 0.875rem;
}

.hero-badge-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
}

.hero h1 {
    margin-bottom: 1.25rem;
    font-size: clamp(2.5rem, 10vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.hero .lead {
    max-width: 34rem;
    margin: 0 auto 1.75rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}

.button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--glow);
}

.button-ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--line);
}

.button-ghost:hover {
    border-color: var(--line-hover);
}

/* Über mich */
.about {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}

.about h2 {
    margin-top: 0;
}

.about .tags {
    margin-top: 1.25rem;
}

/* Karten */
.card-list {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.card-list li {
    position: relative;
    padding: 1.125rem 1.375rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card-list li:hover {
    transform: translateY(-3px);
    border-color: var(--line-hover);
    box-shadow: 0 12px 32px var(--shadow);
}

.card-list li:has(a:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.card-list a:focus-visible {
    outline: none;
}

/* ganze Karte klickbar */
.card-list a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card-list h2,
.card-list h3 {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
}

.card-list h2 a,
.card-list h3 a {
    color: var(--fg);
    text-decoration: none;
}

.card-list p {
    margin: 0;
    color: var(--muted);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.card-list .tags li,
.tags li {
    position: static;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    transform: none;
}

/* Footer */
.site-footer {
    width: calc(100% - 2rem);
    max-width: calc(var(--measure) - 2rem);
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9375rem;
}

.site-footer p {
    margin: 0;
}

/* Code */
code,
pre {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 0.9375rem;
}

:not(pre) > code {
    padding: 0.1em 0.35em;
    background: var(--code-bg);
    border-radius: 0.25rem;
}

pre {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    background: var(--code-bg);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: 0.625rem;
    line-height: 1.5;
    tab-size: 4;
}

pre code {
    padding: 0;
    background: none;
}

.token.comment {
    color: var(--tok-comment);
    font-style: italic;
}

.token.keyword,
.token.operator,
.token.tag {
    color: var(--tok-keyword);
}

.token.string,
.token.attr-value {
    color: var(--tok-string);
}

.token.function,
.token.number,
.token.attr-name,
.token.property {
    color: var(--tok-func);
}

/* Animationen: nur wenn der Nutzer sie nicht abgeschaltet hat */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes pulse {
        0%,
        100% {
            box-shadow: 0 0 0 0 var(--line-hover);
        }

        50% {
            box-shadow: 0 0 0 6px transparent;
        }
    }

    .hero > * {
        animation: fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .hero > :nth-child(2) {
        animation-delay: 0.08s;
    }

    .hero > :nth-child(3) {
        animation-delay: 0.16s;
    }

    .hero > :nth-child(4) {
        animation-delay: 0.24s;
    }

    .hero > :nth-child(5) {
        animation-delay: 0.32s;
    }

    .hero > :nth-child(6) {
        animation-delay: 0.4s;
    }

    @keyframes logo-reveal {
        from {
            clip-path: inset(0 100% 0 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    @keyframes logo-sweep {
        from {
            background-position: 100% 0;
        }

        to {
            background-position: 0 0;
        }
    }

    @keyframes logo-glow {
        0%,
        100% {
            filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent));
        }

        50% {
            filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 60%, transparent));
        }
    }

    @supports ((mask-image: url("x.png")) or (-webkit-mask-image: url("x.png"))) {
        .logo-anim-fill {
            animation:
                logo-reveal 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both,
                logo-sweep 4.5s ease-in-out 1.6s infinite;
        }

        .logo-anim {
            animation: fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both, logo-glow 4.5s ease-in-out 1.4s infinite;
        }
    }

    .hero-badge-dot {
        animation: pulse 2s infinite;
    }

    /* Karten blenden beim Scrollen ein (wo der Browser es kann) */
    @supports (animation-timeline: view()) {
        .card-list > li {
            animation: fade-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }
    }

    /* weiche Seitenwechsel (Chromium) */
    @view-transition {
        navigation: auto;
    }
}

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

    * {
        transition: none !important;
    }
}