:root {
    color-scheme: dark;
    --bg: #07080d;
    --panel: rgba(255, 255, 255, .075);
    --panel-strong: rgba(255, 255, 255, .12);
    --text: #f5f2ea;
    --muted: rgba(245, 242, 234, .68);
    --line: rgba(245, 242, 234, .16);
    --accent: #d8ff66;
    --accent-2: #72f2ff;
    --danger: #ff7d7d;
    --max: 1180px;
    --radius: 28px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(114, 242, 255, .14), transparent 32rem),
        radial-gradient(circle at 80% 20%, rgba(216, 255, 102, .10), transparent 26rem),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.72; }

.ambient { position: fixed; width: 42vw; aspect-ratio: 1; border-radius: 999px; filter: blur(64px); opacity: .25; pointer-events: none; }
.ambient--one { left: -18vw; bottom: 5vh; background: var(--accent-2); }
.ambient--two { right: -16vw; top: 28vh; background: var(--accent); }

.site-header, main, .site-footer { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    position: relative;
    z-index: 10;
}
.site-header--glass { position: sticky; top: 0; backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.02em; }
.brand__mark {
    display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); color: #d8ff66;
}
.top-nav { display: flex; gap: 8px; align-items: center; }
.top-nav a { padding: 10px 14px; border: 1px solid transparent; color: var(--muted); border-radius: 999px; transition: .2s ease; }
.top-nav a:hover { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.06); }

.hero, .application-hero { min-height: 74vh; display: grid; grid-template-columns: 1fr 340px; gap: 42px; align-items: center; }
.eyebrow, .section-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 800; }
h1, h2, h3 { margin: 0; letter-spacing: -.055em; line-height: .95; }
h1 { font-size: clamp(3.4rem, 7vw, 6rem); max-width: 980px; }
h2 { font-size: clamp(2rem, 4vw, 4.5rem); }
h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.hero__lead, .application-hero p { max-width: 760px; font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 800; border: 1px solid var(--line); cursor: pointer; }
.button--primary { background: var(--accent); color: #101207; border-color: transparent; box-shadow: 0 0 40px rgba(216,255,102,.18); }
.button--ghost { background: rgba(255,255,255,.06); }

.signal-card, .tile, .access, .content-panel, .final-cta, .contact-strip {
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.signal-card { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(1.4deg); }
.signal-card__topline { color: var(--muted); }
.signal-card__pulse { width: 120px; aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, var(--accent), transparent 64%); align-self: flex-end; animation: breathe 3s ease-in-out infinite; }
.mini-stats { display: grid; grid-template-columns: repeat(1,1fr); gap: 10px; }
.mini-stats div { border-top: 1px solid var(--line); padding-top: 14px; }
.mini-stats div:first-child { border-top: 0; padding-top: 0; }
.mini-stats dt { font-size: 1.6rem; font-weight: 900; }
.mini-stats dd { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.public-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 18px; margin: 48px auto; }
.tile { padding: 28px; min-height: 270px; }
.tile--wide { background: linear-gradient(135deg, rgba(216,255,102,.14), rgba(255,255,255,.05)); }
.tile__index { color: var(--accent-2); font-weight: 900; }
.tile h2 { margin-top: 50px; font-size: clamp(1.8rem, 2.8vw, 3rem); }

.access { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: clamp(24px, 5vw, 60px); margin: 80px auto; }
.access-form label { display: block; margin-bottom: 10px; color: var(--muted); }
.access-form__row { display: flex; gap: 10px; }
input { width: 100%; min-height: 52px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--text); padding: 0 18px; font: inherit; outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(216,255,102,.1); }
.form-error { color: var(--danger); }
.form-hint, .notice { font-size: .9rem; }

.application-hero { min-height: 58vh; grid-template-columns: 1fr 340px; }
.contact-strip { padding: 24px; display: grid; gap: 18px; color: var(--muted); }
.contact-strip a { color: var(--accent); }
.contact-strip img { max-width: 18em; border-radius: var(--radius); margin: 0 auto; }
.content-panel { margin: 22px 0; padding: clamp(24px, 5vw, 56px); }
.two-column { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; }
.richtext p:first-child { margin-top: 0; }
.timeline { display: grid; gap: 0; margin-top: 26px; }
.timeline__item { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.timeline__item time { color: var(--accent-2); font-weight: 900; }
.timeline__item p { margin: 8px 0 0; }
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.skill-card { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(0,0,0,.18); }
.skill-card h2 { font-size: 1.5rem; margin-bottom: 16px; }
.tag-list, .certificate-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list li, .certificate-list li, .reference-cloud span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: var(--muted); background: rgba(255,255,255,.045); }
.reference-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.final-cta { margin: 38px 0 80px; padding: clamp(24px, 5vw, 58px); text-align: center; }
.final-cta p { margin-inline: auto; max-width: 620px; }
.site-footer { padding: 30px 0 50px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .72; } }

@media (max-width: 860px) {
    .top-nav { display: none; }
    .hero, .application-hero, .access, .two-column { grid-template-columns: 1fr; min-height: auto; padding-top: 42px; }
    .public-grid, .skill-grid { grid-template-columns: 1fr; }
    .signal-card { transform: none; }
    .timeline__item { grid-template-columns: 1fr; gap: 8px; }
    .access-form__row { flex-direction: column; }
}

button.button { font: inherit; appearance: none; }
textarea {
    width: 100%;
    min-height: 150px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.25);
    color: var(--text);
    padding: 16px 18px;
    font: inherit;
    outline: none;
    resize: vertical;
}
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(216,255,102,.1); }
.invisible {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.footer-actions { margin-top: 12px; }
.footer-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text) !important;
    text-decoration: none !important;
    background: rgba(255,255,255,.045);
}
.footer-pill:hover { border-color: var(--accent); background: rgba(216,255,102,.08); }
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.is-open { display: flex; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,8,13,.72);
    backdrop-filter: blur(18px);
}
.modal__dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(88vh, 920px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at top right, rgba(216,255,102,.12), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
    box-shadow: 0 30px 120px rgba(0,0,0,.55);
    padding: clamp(24px, 5vw, 44px);
}
.modal__dialog h2 { margin-bottom: 22px; font-size: clamp(2rem, 5vw, 4rem); }
.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.form-grid label { color: var(--muted); font-size: .92rem; }
.form-grid input, .form-grid textarea { margin-top: 8px; }
.form-grid__wide { grid-column: 1 / -1; }
.callback { min-height: 0; margin-bottom: 14px; }
.callback div {
    border-radius: 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.055);
}
.callback .success { border-color: rgba(216,255,102,.55); color: var(--accent); }
.callback .err { border-color: rgba(255,125,125,.55); color: var(--danger); }
.contact-form .error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255,125,125,.1); }
.contact-form.is-loading button[type="submit"] { opacity: .72; cursor: wait; }
.contact-form.is-loading button[type="submit"]::after { content: "…"; }
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}
.legal-copy { margin-top: 34px; max-width: 860px; }
.legal-copy h2 { margin-top: 34px; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.legal-copy a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(216,255,102,.35); }
/* Mail Schutz */
del.schutz {
text-decoration: none;
}

/* Arbeitsproben */
.section-headline {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px);
    gap: 28px;
    align-items: end;
    margin-bottom: 30px;
}
.section-headline p { margin: 0; }
.work-sample-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.work-sample-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(114,242,255,.10), transparent 14rem),
        rgba(0,0,0,.18);
}
.work-sample-card:nth-child(2) {
    background:
        radial-gradient(circle at top right, rgba(216,255,102,.10), transparent 14rem),
        rgba(0,0,0,.18);
}
.work-sample-card__number {
    color: var(--accent-2);
    font-weight: 900;
    letter-spacing: .16em;
}
.work-sample-card h3 {
    font-size: clamp(1.8rem, 2.6vw, 3rem);
    letter-spacing: -.055em;
    line-height: .95;
}
.work-sample-card__flow {
    color: var(--accent);
    font-size: .92rem;
    line-height: 1.55;
}
.work-sample-card__tags { margin-top: auto; }
.work-sample-card .button { align-self: flex-start; }

.page--case main { padding-top: 28px; }
.case-hero {
    min-height: 58vh;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 42px;
    align-items: center;
}
.case-meta {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at top right, rgba(216,255,102,.13), transparent 16rem),
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    padding: 28px;
}
.case-meta__number {
    display: block;
    color: var(--accent-2);
    font-weight: 900;
    letter-spacing: .16em;
    margin-bottom: 40px;
}
.case-meta p {
    margin: 0 0 16px;
    color: var(--text);
    font-weight: 800;
}
.system-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.system-chain li {
    position: relative;
    padding: 12px 14px 12px 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.045);
}
.system-chain li::before {
    content: "→";
    position: absolute;
    left: 14px;
    color: var(--accent);
}
.case-sections {
    display: grid;
    gap: 22px;
}
.case-sections article {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.case-sections article:first-child { border-top: 0; padding-top: 0; }
.case-sections h2 {
    font-size: clamp(1.5rem, 2.3vw, 2.2rem);
}
.case-sections p { margin: 0; }
.case-tags { margin-top: 22px; }
.case-note {
    margin-top: 28px;
    font-size: .92rem;
}
.case-nav {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 38px 0 80px;
}

@media (max-width: 980px) {
    .work-sample-grid,
    .section-headline,
    .case-hero,
    .case-sections article {
        grid-template-columns: 1fr;
    }
    .work-sample-card { min-height: auto; }
}

@media (max-width: 640px) {
    .case-nav { flex-direction: column; }
}

/* ------------------------------------------------------------
   Print CSS
   ------------------------------------------------------------ */
@media print {
    @page {
        size: A4 portrait;
        margin: 14mm 14mm 16mm;
    }

    :root {
        color-scheme: light;
        --bg: #ffffff;
        --text: #111111;
        --muted: #444444;
        --line: #dddddd;
        --accent: #111111;
        --accent-2: #111111;
        --panel: transparent;
        --panel-strong: transparent;
        --radius: 0;
    }

    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }

    html {
        scroll-behavior: auto !important;
        font-size: 10pt;
    }

    body {
        margin: 0 !important;
        background: #ffffff !important;
        color: #111111 !important;
        min-height: auto !important;
        overflow: visible !important;
        font-family: Arial, Helvetica, sans-serif !important;
        line-height: 1.45;
    }

    body::before,
    .ambient,
    .modal,
    .top-nav,
    .hero__actions,
    .final-cta,
    .footer-actions,
    .button,
    button,
    form,
    .access,
    [data-contact-open],
    [data-contact-modal] {
        display: none !important;
    }

    a {
        color: #111111 !important;
        text-decoration: none !important;
    }

    p {
        color: #333333 !important;
        line-height: 1.55 !important;
        margin: 0 0 7pt !important;
    }

    h1,
    h2,
    h3 {
        color: #111111 !important;
        letter-spacing: normal !important;
        line-height: 1.12 !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    h1 {
        font-size: 28pt !important;
        margin: 0 0 10pt !important;
        max-width: none !important;
    }

    h2 {
        font-size: 18pt !important;
        margin: 0 0 10pt !important;
    }

    h3 {
        font-size: 11pt !important;
        margin: 0 0 3pt !important;
    }

    .eyebrow,
    .section-kicker {
        color: #111111 !important;
        font-size: 8pt !important;
        letter-spacing: .08em !important;
        margin: 0 0 8pt !important;
    }

    .site-header,
    main,
    .site-footer {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .site-header {
        position: static !important;
        display: block !important;
        padding: 0 0 12pt !important;
        border-bottom: 1px solid #dddddd !important;
        margin-bottom: 14pt !important;
        backdrop-filter: none !important;
    }

    .brand {
        display: flex !important;
        gap: 8pt !important;
        align-items: center !important;
        font-weight: 700 !important;
    }

    .brand__mark {
        width: 26pt !important;
        height: 26pt !important;
        border: 1px solid #999999 !important;
        border-radius: 6pt !important;
        background: #ffffff !important;
        color: #111111 !important;
        font-size: 9pt !important;
    }

    .brand__text {
        color: #111111 !important;
    }

    .hero,
    .application-hero {
        display: block !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 0 16pt !important;
    }

    .hero__lead,
    .application-hero p {
        max-width: none !important;
        font-size: 11pt !important;
        color: #333333 !important;
    }

    .signal-card {
        display: none !important;
    }

    .contact-strip {
        display: grid !important;
        grid-template-columns: 75pt 1fr !important;
        gap: 6pt 12pt !important;
        align-items: center !important;
        margin-top: 12pt !important;
        padding: 10pt !important;
        border: 1px solid #dddddd !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        color: #333333 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .contact-strip img {
        grid-row: span 4;
        max-width: 70pt !important;
        border-radius: 8pt !important;
        margin: 0 !important;
    }

    .contact-strip a {
        color: #111111 !important;
    }

    .content-panel,
    .tile,
    .skill-card {
        border: 1px solid #dddddd !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        padding: 12pt !important;
        margin: 0 0 12pt !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .two-column {
        display: block !important;
    }

    .richtext {
        margin-top: 8pt !important;
    }

    .timeline {
        display: block !important;
        margin-top: 6pt !important;
    }

    .timeline__item {
        display: grid !important;
        grid-template-columns: 90pt 1fr !important;
        gap: 10pt !important;
        padding: 7pt 0 !important;
        border-top: 1px solid #dddddd !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .timeline__item time {
        color: #111111 !important;
        font-weight: 700 !important;
    }

    .timeline__item p {
        margin: 2pt 0 0 !important;
    }

    .skill-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8pt !important;
    }

    .skill-card h2 {
        font-size: 12pt !important;
        margin-bottom: 6pt !important;
    }

    .tag-list,
    .certificate-list,
    .reference-cloud {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4pt !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .tag-list li,
    .certificate-list li,
    .reference-cloud span {
        border: 1px solid #cccccc !important;
        background: #ffffff !important;
        color: #222222 !important;
        border-radius: 999px !important;
        padding: 3pt 6pt !important;
        font-size: 8.5pt !important;
        line-height: 1.3 !important;
    }

    .public-grid {
        display: block !important;
        margin: 0 !important;
    }

    .tile {
        min-height: auto !important;
    }

    .tile h2 {
        margin-top: 8pt !important;
        font-size: 15pt !important;
    }

    .tile__index {
        color: #111111 !important;
        font-weight: 700 !important;
    }

    .site-footer {
        display: block !important;
        border-top: 1px solid #dddddd !important;
        padding: 10pt 0 0 !important;
        margin-top: 16pt !important;
        color: #444444 !important;
        font-size: 8.5pt !important;
    }

    .site-footer p {
        color: #444444 !important;
        margin: 0 !important;
    }

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

    /* Arbeitsproben / Case Studies */
    .work-sample-grid,
    .case-grid,
    .sample-grid {
        display: block !important;
    }

    .work-sample-card,
    .case-card,
    .sample-card,
    .case-section,
    .system-flow,
    .screenshot-card {
        border: 1px solid #dddddd !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        padding: 12pt !important;
        margin: 0 0 12pt !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .legal-copy {
        max-width: none !important;
        margin-top: 12pt !important;
    }

    .legal-copy h2 {
        font-size: 15pt !important;
        margin-top: 16pt !important;
    }
}