/* ==========================================================================
   gernotknes.com — site stylesheet
   Sections: fonts · tokens · base · header · lang switch · hero · legal ·
             not found · footer · focus · mobile
   No inline styles anywhere (CSP without 'unsafe-inline').
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, SIL OFL — see /fonts/OFL-*.txt) ---------- */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/archivo-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/archivo-latin-800-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
    --bg: #0E1116;
    --surface: #12161C;
    --surface-2: #1A2028;
    --surface-hover: #171C24;
    --border: #232A33;
    --border-strong: #3A4450;
    --text: #E6EAF0;
    --text-2: #B9C2CD;
    --text-3: #A3ADBA;
    --text-4: #8C97A4;
    /* Between the original logo orange and the former amber; contrast on --bg 7.9:1. */
    --accent: #F88D22;
    --accent-hover: #FFA64D;
    --logo-text: var(--text);

    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --gutter: 32px;
    --content-max: 1240px;
    --wide-max: 1320px;

    --ease-out: cubic-bezier(.2, .7, .2, 1);

    /* Header height for the mobile menu; header.js overwrites it with the measured value. */
    --header-h: 64px;
    /* Anchor jumps stop below the compact sticky header. */
    --scroll-offset: 76px;

    color-scheme: dark;
}

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

html {
    scroll-padding-top: var(--scroll-offset);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
}

picture {
    display: block;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page > main {
    flex: 1 0 auto;
}

/* Small mono label above headings ("01", "rechtliches", "404"). */
.eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
}

/* ---------- Header (LogoFinal / LogoFinalMobile) ----------
   Sticky header; sizes depend only on .is-compact (set by header.js while scrolling) or an
   open mobile menu. Without JS the header stays large.
   header.js fixes the header's own height to its large height (--header-large-h), so the page
   height never changes while scrolling; only the visible bar (.site-header__inner) shrinks.
   The transparent rest of the header lets clicks through to the content below. */
.site-header {
    --logo-h-large: 84px;
    --logo-h-small: 40px;
    --bar-pad-large: 24px;
    --bar-pad-small: 10px;
    --logo-h: var(--logo-h-large);
    --bar-pad: var(--bar-pad-large);
    --line-gap: 10px;
    --bar-bg: rgba(14, 17, 22, .78);

    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    height: var(--header-large-h, auto);
    pointer-events: none;
}

.site-header.is-compact {
    --logo-h: var(--logo-h-small);
    --bar-pad: var(--bar-pad-small);
}

/* Separate rule: browsers without :has() must not drop the .is-compact rule above. */
.site-header:has(.menu:popover-open) {
    --logo-h: var(--logo-h-small);
    --bar-pad: var(--bar-pad-small);
}

/* Full-width bar (glass background when compact); content centred within --wide-max. */
.site-header__inner {
    padding: var(--bar-pad) max(var(--gutter), calc((100% - var(--wide-max)) / 2 + var(--gutter)));
    display: flex;
    align-items: flex-end;
    background-color: rgba(14, 17, 22, 0);
    pointer-events: auto;
    transition: padding .28s var(--ease-out), background-color .28s ease;
}

.site-header.is-compact .site-header__inner {
    background-color: var(--bar-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.site-header:has(.menu:popover-open) .site-header__inner {
    background-color: var(--bar-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.brand {
    flex: none;
    display: inline-flex;
    align-items: flex-end;
    min-height: 44px;
    text-decoration: none;
}

.logo {
    display: block;
    height: var(--logo-h);
    width: auto;
    aspect-ratio: 1190 / 490;
    transition: height .28s var(--ease-out);
}

.logo__text {
    fill: var(--logo-text);
}

.logo__accent {
    fill: var(--accent);
}

/* Accent line from just right of the "t" to the right content edge, on the logo baseline
   (glyphs end 18 of 490 viewBox units above the bottom edge). Nav sits on it. */
.site-header__line {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 26px;
    margin-left: var(--line-gap);
    margin-bottom: calc(var(--logo-h) * 18 / 490);
    border-bottom: 1px solid var(--accent);
    transition: margin-bottom .28s var(--ease-out);
}

.site-header__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 22px;
}

.back-link {
    font-size: 15px;
    color: var(--text);
    text-decoration: none;
    padding: 12px 0;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 500;
}

/* Text links with an underline that grows in from the left on hover. */
.site-nav a,
.back-link {
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
    transition: background-size .25s ease, color .2s ease;
}

.site-nav a {
    color: var(--text);
    text-decoration: none;
    padding: 12px 0;
}

.site-nav a:hover,
.back-link:hover {
    color: var(--text);
    background-size: 100% 1px;
}

/* ---------- Language switch ---------- */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 0 14px;
    padding-left: 22px;
    border-left: 1px solid var(--border);
    font-size: 15px;
}

.lang-switch a {
    color: var(--text-3);
    text-decoration: none;
    padding: 12px 0;
}

.lang-switch a:hover {
    color: var(--text);
}

.lang-switch a.is-active {
    color: var(--text);
    font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
    max-width: var(--wide-max);
    margin: 0 auto;
    padding: 24px var(--gutter) 96px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: stretch;
}

.hero__text {
    flex: 999 1 620px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 24px 0;
}

.hero__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(64px, 11vw, 168px);
    line-height: 0.88;
    letter-spacing: -0.045em;
}

.hero__name span {
    display: block;
}

.hero__lead {
    margin: 0;
    max-width: 580px;
    font-size: 22px;
    line-height: 1.45;
}

.hero__lead span {
    color: var(--text-3);
}

.hero > picture {
    flex: 1 1 340px;
    max-width: 460px;
}

.hero__photo {
    display: block;
    width: 100%;
    height: 600px;
    min-height: 520px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 24px;
    background: var(--surface-2);
}

/* ---------- Key facts ---------- */
.facts {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.facts__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 36px var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}

.facts__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.02em;
    color: var(--accent);
}

.facts__label {
    font-size: 15px;
    color: var(--text-3);
}

/* ---------- Tech strip ---------- */
.tech {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tech__list {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 20px var(--gutter);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-4);
}

/* ---------- Sections: shared split layout (head left, body right; wraps when narrow) ---------- */
.section--bordered {
    border-top: 1px solid var(--border);
}

.split {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 112px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.section--competence .split {
    padding-bottom: 56px;
}

.section--ai .split {
    padding-top: 56px;
}

.section--contact {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.section--contact .split {
    padding-top: 96px;
    padding-bottom: 72px;
}

.split__head {
    flex: 1 1 260px;
}

.split__body {
    flex: 999 1 640px;
    min-width: 0;
}

.section-title {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.15;
}

.section-intro {
    margin: 16px 0 0;
    font-size: 16px;
    color: var(--text-2);
}

/* Small mono label inside tiles/cards ("verstehen", "app · windows"). */
.tag {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-4);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- 01 Competence tiles ---------- */
.tiles {
    display: grid;
    /* 320 px (design: 280) → always 2 × 2 on desktop instead of 3 + 1 with an empty cell. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.tile {
    background: var(--surface);
    padding: 32px;
    transition: background-color .25s ease;
}

.tile:hover {
    background-color: var(--surface-hover);
}

.tile .tag {
    margin-bottom: 14px;
}

.tile__title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 600;
}

.tile__text {
    margin: 0;
    font-size: 16px;
    color: var(--text-2);
}

/* ---------- Code-file box (ablauf.md, suche.log) ---------- */
.codefile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.8;
}

.codefile__name {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-4);
}

.codefile__body {
    margin: 0;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
    gap: 6px 20px;
}

.codefile__body dt {
    color: var(--accent);
}

.codefile__body dd {
    margin: 0;
    color: var(--text-2);
}

/* ---------- Cards (stats, feature cards) ---------- */
.card {
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.stat {
    padding: 20px;
}

.stat__value {
    font-size: 28px;
    font-weight: 600;
}

.stat__label {
    font-size: 15px;
    color: var(--text-3);
}

/* ---------- 03 Career ----------
   Desktop: head + education left, jobs right. Narrow: head, jobs, education
   (MixMobile order) — needs grid areas, flex-wrap cannot reorder. */
.career {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 112px var(--gutter);
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "head jobs"
        "edu  jobs";
    column-gap: 48px;
}

.career__head {
    grid-area: head;
    padding-bottom: 32px;
}

.career__jobs {
    grid-area: jobs;
    margin: 0;
    padding: 0;
    list-style: none;
}

.career__edu {
    grid-area: edu;
}

.career__edu .tag {
    margin-bottom: 8px;
}

.career__edu-list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    color: var(--text-2);
}

.career__certs {
    margin: 0;
    font-size: 15px;
    color: var(--text-2);
}

.career-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
    transition: background-color .2s ease;
}

.career-row:last-child {
    border-bottom: 1px solid var(--border);
}

.career-row:hover {
    background-color: var(--surface);
}

.career-row__period {
    flex: 0 0 140px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-4);
}

.career-row__period.is-current {
    color: var(--accent);
}

.career-row__body {
    flex: 1 1 360px;
}

.career-row__role,
.career-row__link {
    font-size: 16px;
}

.career-row__role {
    color: var(--text-2);
}

/* ---------- 04/05 Feature cards ---------- */
.feature {
    background: var(--surface);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.feature__media {
    display: block;
    min-width: 0;
    line-height: 0;
    overflow: hidden;
}

.feature__media--wide {
    flex: 1 1 100%;
}

.feature__media--band {
    flex: 1 1 300px;
    background: #FFFFFF;
}

.feature__img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
}

.card:hover .feature__img {
    transform: scale(1.02);
}

.feature__img--sr {
    aspect-ratio: 16 / 9;
    height: auto;
    background: var(--surface-2);
}

/* Band photo: lots of white space on top — show the lower part. */
.feature__img--band {
    height: 280px;
    object-position: center 88%;
}

.feature__body {
    flex: 999 1 340px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature__title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.feature__text {
    margin: 0;
    font-size: 16px;
    color: var(--text-2);
}

.feature__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
}

.more {
    padding: 10px 0;
}

.arrow {
    display: inline-block;
    transition: transform .2s ease;
}

a:hover .arrow {
    transform: translateX(4px);
}

a:hover .arrow--back {
    transform: translateX(-4px);
}

/* ---------- 06 Contact ---------- */
.contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact__mail {
    font-family: var(--font-mono);
    font-size: 22px;
    padding: 8px 0;
    overflow-wrap: anywhere;
}

.contact__linkedin {
    font-family: var(--font-mono);
    font-size: 17px;
    color: var(--text-2);
    padding: 8px 0;
    align-self: flex-start;
}

/* ---------- Legal pages ---------- */
.legal {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 72px var(--gutter) 96px;
    line-height: 1.65;
}

.legal p {
    margin: 0 0 12px;
    color: var(--text-2);
}

.legal .eyebrow {
    color: var(--accent);
}

.legal__title {
    margin: 0 0 40px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(44px, 7vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.legal__title--tight {
    margin-bottom: 24px;
}

.legal p.legal__lead {
    margin-bottom: 40px;
}

.legal p.legal__summary {
    margin-bottom: 48px;
    font-size: 19px;
}

.legal p.legal__block {
    margin-bottom: 40px;
}

.legal p.legal__last {
    margin-bottom: 0;
}

.legal p.legal__stand {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-4);
}

/* "The German version is legally binding." on English legal pages. */
.legal p.legal__binding {
    margin: 0 0 32px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-size: 15px;
    color: var(--text-3);
}

.legal__h2 {
    margin: 40px 0 12px;
    font-size: 22px;
    font-weight: 600;
}

.legal__h2--first {
    margin-top: 56px;
}

.legal__h2--numbered {
    margin-top: 0;
}

.legal__num {
    margin-right: 12px;
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--accent);
}

.legal__list {
    margin: 0 0 12px;
    padding-left: 22px;
    color: var(--text-2);
}

/* Label/value table of the imprint. */
.facts-table {
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}

.facts-table__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.facts-table dt {
    flex: 0 0 220px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-4);
}

.facts-table dd {
    flex: 1 1 360px;
    margin: 0;
}

/* ---------- Not found ---------- */
.not-found {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 48px var(--gutter) 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px 64px;
    align-items: center;
}

.not-found__text {
    flex: 999 1 520px;
    min-width: 0;
}

.not-found__title {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(48px, 8vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

/* Lyric line with chord symbols above the words. */
.lyric {
    margin: 0 0 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.2;
}

.lyric__cell {
    display: inline-flex;
    flex-direction: column;
}

.lyric__chord {
    font-family: var(--font-mono);
    font-size: 0.7em;
    color: var(--accent);
}

.lyric__word {
    white-space: pre;
}

.not-found__copy {
    margin: 0 0 36px;
    max-width: 540px;
    color: var(--text-2);
}

.not-found__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    align-items: center;
}

.not-found__home {
    font-size: 19px;
    font-weight: 600;
    padding: 10px 0;
}

.not-found__direct {
    font-size: 15px;
    color: var(--text-4);
}

.not-found__direct a {
    color: var(--text-2);
}

.not-found__log {
    flex: 1 1 360px;
    min-width: 0;
    font-size: 14px;
}

.log {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px 16px;
}

.codefile__body .log__prompt {
    color: var(--text-4);
}

.codefile__body .log__strong {
    color: var(--text);
}

@keyframes gk-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cursor {
    display: inline-block;
    width: 9px;
    height: 1.1em;
    vertical-align: -3px;
    background: currentColor;
    animation: gk-blink 1.1s steps(1) infinite;
}

/* ---------- Load animation (CSS only, once) ---------- */
@keyframes gk-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes gk-photo {
    from { opacity: 0; transform: scale(1.04); }
    to { opacity: 1; transform: none; }
}

@keyframes gk-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.gk-in {
    animation: gk-up .8s var(--ease-out) both;
}

.gk-photo {
    animation: gk-photo 1.1s var(--ease-out) .35s both;
}

.gk-d1 { animation-delay: .05s; }
.gk-d2 { animation-delay: .18s; }
.gk-d3 { animation-delay: .38s; }
.gk-d4 { animation-delay: .55s; }

/* ---------- Scroll reveal (reveal.js) ----------
   Hidden only when the script runs (html.gk-anim). The reveal transition and its stagger
   delay apply only until the element is done (.is-done), so hover effects stay instant. */
.gk-anim [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(24px);
}

.gk-anim [data-reveal]:not(.is-done) {
    transition: opacity .7s ease, transform .7s var(--ease-out);
}

.gk-anim .reveal-d1:not(.is-done) { transition-delay: 90ms; }
.gk-anim .reveal-d2:not(.is-done) { transition-delay: 180ms; }
.gk-anim .reveal-d3:not(.is-done) { transition-delay: 270ms; }

/* ---------- Mobile menu (popover) ---------- */
.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
}

.menu-button__icon--close {
    display: none;
}

.site-header:has(.menu:popover-open) .menu-button__icon--open {
    display: none;
}

.site-header:has(.menu:popover-open) .menu-button__icon--close {
    display: block;
}

/* Popover sits in the top layer; placed directly below the header. */
.menu {
    pointer-events: auto;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px var(--gutter) 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.menu:popover-open {
    display: flex;
    flex-direction: column;
    animation: gk-drop .22s ease-out both;
}

.menu a {
    color: var(--text);
    text-decoration: none;
    font-size: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.menu a:last-child {
    border-bottom: 0;
}

.menu__num {
    margin-right: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
}

.menu::backdrop {
    background: transparent;
}

/* ---------- Navigation breakpoint (the only "real" one, handover §3) ---------- */
@media (max-width: 899px) {
    :root {
        --scroll-offset: 68px;
    }

    .site-header {
        --logo-h-large: 52px;
        --logo-h-small: 32px;
        --bar-pad-large: 16px;
        --bar-pad-small: 6px;
        --line-gap: 8px;
        --bar-bg: rgba(14, 17, 22, .82);
    }

    .site-header__line {
        gap: 4px;
        padding-bottom: 6px;
    }

    .site-header--home .site-nav {
        display: none;
    }

    .site-header--home .site-header__end {
        gap: 4px;
    }

    .site-header--home .lang-switch {
        padding-left: 0;
        border-left: 0;
        gap: 0;
        font-size: 14px;
    }

    .site-header--home .lang-switch a {
        padding: 12px 8px;
    }

    .menu-button {
        display: inline-flex;
    }
}

@media (min-width: 900px) {
    /* Never show the mobile menu on desktop, even if left open while resizing. */
    .menu {
        display: none !important;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.site-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 24px var(--gutter) 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-4);
}

.site-footer__links {
    display: flex;
    gap: 24px;
}

.site-footer__links a {
    color: var(--text-3);
}

.site-footer__links a.is-active,
.site-footer__links a:hover {
    color: var(--text);
}

/* ---------- Focus (keyboard only) ---------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- Career: single column below head + body width (260 + 48 + 640) ---------- */
@media (max-width: 947px) {
    .career {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "head"
            "jobs"
            "edu";
    }

    .career__jobs {
        margin-bottom: 40px;
    }
}

/* ---------- Mobile (≈ MixMobile.dc.html, 390 px) ---------- */
@media (max-width: 640px) {
    :root {
        --gutter: 16px;
    }

    body {
        font-size: 16px;
    }

    .hero {
        flex-direction: column;
        gap: 24px;
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .hero__text {
        /* In column direction flex-basis would act as height. */
        flex: none;
        gap: 24px;
        padding: 0;
    }

    .hero__name {
        font-size: 76px;
    }

    .hero__lead {
        font-size: 18px;
    }

    .hero > picture {
        flex: none;
        max-width: none;
    }

    .hero__photo {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 5;
        border-radius: 20px;
    }

    /* Key facts + tech strip */
    .facts__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .facts__value {
        font-size: 24px;
        line-height: 1.15;
    }

    .facts__label {
        font-size: 14px;
        line-height: 1.4;
    }

    .tech__list {
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 6px 18px;
        font-size: 13px;
    }

    /* Sections */
    .split,
    .career {
        padding-top: 64px;
        padding-bottom: 64px;
        gap: 24px;
    }

    .section--competence .split {
        padding-bottom: 32px;
    }

    .section--ai .split {
        padding-top: 32px;
    }

    .section--contact .split {
        padding-bottom: 40px;
        gap: 20px;
    }

    .eyebrow {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .section-title {
        font-size: 30px;
    }

    .section-intro {
        font-size: 15px;
        margin-top: 12px;
    }

    .tag {
        font-size: 12px;
    }

    /* Tiles */
    .tile {
        padding: 22px 20px;
    }

    .tile .tag {
        margin-bottom: 8px;
    }

    .tile__title {
        font-size: 19px;
        margin-bottom: 6px;
    }

    .tile__text {
        font-size: 15px;
    }

    /* ablauf.md: label above text */
    .codefile {
        font-size: 14px;
        line-height: 1.5;
    }

    .codefile__name {
        padding: 8px 16px;
        font-size: 12px;
    }

    .codefile__body {
        padding: 16px;
    }

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

    .steps dd {
        margin-bottom: 14px;
    }

    .steps dd:last-child {
        margin-bottom: 0;
    }

    .stack {
        gap: 16px;
    }

    .stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .stat {
        padding: 16px 18px;
    }

    .stat__value {
        font-size: 24px;
    }

    .stat__label {
        font-size: 14px;
    }

    /* Career */
    .career {
        row-gap: 0;
    }

    .career__head {
        padding-bottom: 24px;
    }

    .career-row {
        display: block;
        padding: 16px 0;
    }

    .career-row__period {
        font-size: 13px;
    }

    .career-row__role,
    .career-row__link {
        font-size: 15px;
    }

    .career-row__sep {
        display: none;
    }

    .career-row__link {
        display: block;
        width: fit-content;
        padding: 6px 0;
    }

    .career__edu-list {
        margin-bottom: 24px;
    }

    /* Feature cards */
    .feature__img--sr {
        aspect-ratio: 16 / 10;
        object-position: 60% center;
    }

    .feature__img--band {
        height: 240px;
    }

    .feature__body {
        padding: 20px;
        gap: 10px;
    }

    .feature__title {
        font-size: 22px;
    }

    .feature__title--desktop {
        display: none;
    }

    .feature__text {
        font-size: 15px;
    }

    .feature__links {
        gap: 0 24px;
    }

    /* Contact */
    .contact {
        gap: 4px;
    }

    .contact__mail {
        font-size: 18px;
        padding: 10px 0;
    }

    .contact__linkedin {
        font-size: 15px;
        padding: 10px 0;
    }

    /* Footer: stacked, 44 px touch targets */
    .site-footer__inner {
        flex-direction: column;
        gap: 8px;
        padding-top: 20px;
        font-size: 12px;
    }

    .site-footer__links a {
        padding: 10px 0;
    }

    /* Legal */
    .facts-table dt {
        flex-basis: 100%;
    }
}

/* ---------- Browsers without popover: keep the plain link list, hide the menu ---------- */
@supports not selector(:popover-open) {
    .menu,
    .menu-button {
        display: none !important;
    }

    .site-header--home .site-nav {
        display: flex !important;
    }
}

/* ---------- Reduced motion: no animations, no transitions, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .gk-anim [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .card:hover,
    .card:hover .feature__img,
    a:hover .arrow {
        transform: none !important;
    }
}