:root {
    /* Light Default */
    --clr-bg: #f9fbfd;
    --clr-primary: #0f4ea8;   /* dunkleres Blau für höheren Kontrast */
    --clr-primary-light: #1e88e5;
    --clr-accent: #90caf9;
    --clr-font-dark: #222;
    --clr-font-mid: #555;
    --clr-shadow: rgba(0, 0, 0, 0.08);
    --radius: 14px;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --clr-bg: #121212;
        --clr-primary: #4d9bff;
        --clr-primary-light: #79b2ff;
        --clr-accent: #1e88e5;
        --clr-font-dark: #f3f3f3;
        --clr-font-mid: #cfcfcf;
        --clr-shadow: rgba(0, 0, 0, 0.4);
    }
    nav, footer, .nav-links { background: #1c1c1c; }
}

/* ===== Global ===== */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    background: var(--clr-bg);
    color: var(--clr-font-dark);
    line-height: 1.6;
}
h1, h2, h3 { margin: 0 0 .5em 0; line-height: 1.2; }
section { padding: 4rem 1rem; }
.container { max-width: 960px; margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== Header / Navigation ===== */
header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 8px var(--clr-shadow); }
@media (prefers-color-scheme: dark) { header { background:#1c1c1c; } }
.nav-wrapper { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; max-width:960px; margin-inline:auto; }
.nav-brand { font-weight:700; font-size:1.1rem; color:var(--clr-primary); }
.nav-toggle { display:none; background:none; border:none; font-size:1.75rem; color:var(--clr-primary); }
.nav-links { display:flex; gap:1rem; }
.nav-links a { text-decoration:none; color:var(--clr-font-mid); font-weight:500; position:relative; }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--clr-primary); border-radius:2px; }
.nav-links a:hover, .nav-links a:focus { color:var(--clr-primary-light); }

/* Mobile Off‑Canvas */
@media (max-width: 767px) {
    .nav-toggle { display:block; }
    .nav-links {
        flex-direction:column; position:fixed; inset-block-start:0; inset-inline-end:0; height:100%; width:70%; max-width:280px; padding:4rem 1.5rem; background:#fff; box-shadow:-2px 0 8px var(--clr-shadow);
        transform:translateX(100%); transition:transform .3s ease-out;
    }
    @media (prefers-color-scheme: dark) { .nav-links { background:#1c1c1c; } }
    .nav-links[data-open="true"] { transform:none; }
    .nav-links a { margin:0 0 1rem 0; font-size:1.1rem; }
}

/* ===== Hero ===== */
#hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:6rem 1rem; }
#hero h1 { font-size:clamp(2.5rem, 5vw + 1rem, 3.5rem); color:var(--clr-primary); }
#hero p { font-size:1.25rem; max-width:600px; margin-bottom:2rem; }
.btn { display:inline-block; padding:.75rem 1.5rem; border-radius:var(--radius); background:var(--clr-primary); color:#fff; border:none; text-decoration:none; cursor:pointer; transition:background .3s; }
.btn:hover, .btn:focus { background:var(--clr-primary-light); }

/* ===== About ===== */
#about .content-wrapper { display:flex; flex-direction:column; gap:1.5rem; }
.profile-photo { max-width:200px; border-radius:var(--radius); box-shadow:0 4px 16px var(--clr-shadow); }
@media (min-width:768px) { #about .content-wrapper { flex-direction:row; align-items:center; } }

/* ===== Skills ===== */
#skills ul { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
#skills li { background:#fff; border-radius:var(--radius); padding:1.25rem 1rem; box-shadow:0 4px 16px var(--clr-shadow); }
#skills li h3 { margin-bottom:.5rem; font-size:1.1rem; color:var(--clr-primary); }

/* ===== Vision ===== */
#vision { background:var(--clr-accent); }
#vision h2 { color:var(--clr-font-dark); }

/* ===== Contact ===== */
form { display:grid; gap:1rem; max-width:600px; margin-inline:auto; }
label { display:flex; flex-direction:column; font-weight:600; font-size:.9rem; }
input, textarea { padding:.75rem 1rem; border:1px solid #ccc; border-radius:var(--radius); font-size:1rem; resize:vertical; }
input:invalid, textarea:invalid { border-color:#b71c1c; }
input:focus, textarea:focus { outline:2px solid var(--clr-primary-light); border-color:transparent; }

/* ===== Footer ===== */
footer { background:#fff; text-align:center; padding:1rem; font-size:.875rem; box-shadow:0 -2px 8px var(--clr-shadow); }

/* ===== Scroll Fade‑in ===== */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease-out, transform .6s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .fade-in { opacity:1 !important; transform:none !important; transition:none !important; } }