/* Externe Schriftarten. Für eine vollständig lokale/offline Version hier entfernen
   und bei font-family auf Systemschriften umstellen. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Zentrale Designwerte: Hier lassen sich Farben und Grundstimmung der Seite ändern. */
:root { --ink:#111817; --muted:#687370; --teal:#087f78; --teal-dark:#06645f; --teal-pale:#e1f1ef; --paper:#f7faf9; --line:#d8e2df; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.container { width:min(1120px,calc(100% - 48px)); margin:auto; }
/* Navigation und Logo */
.site-header { position:sticky; top:0; z-index:10; background:rgba(247,250,249,.9); border-bottom:1px solid rgba(216,226,223,.8); backdrop-filter:blur(12px); }
.nav-wrap,.footer-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; }
.brand { font-size:1.4rem; font-weight:800; letter-spacing:-.08em; }
.brand span { color:var(--teal); }
.site-nav { display:flex; align-items:center; gap:32px; font-size:.82rem; font-weight:700; }
.site-nav a:not(.nav-cta),.text-link,.inline-link,.site-footer a { transition:color .2s; }
.site-nav a:not(.nav-cta):hover,.text-link:hover,.inline-link:hover,.site-footer a:hover { color:var(--teal); }
.nav-cta,.button { display:inline-flex; align-items:center; gap:12px; border-radius:2px; font-size:.82rem; font-weight:700; transition:transform .2s,background .2s,color .2s; }
.nav-cta { padding:11px 18px; color:var(--white); background:var(--teal); }
.nav-cta:hover,.button-primary:hover { background:var(--teal-dark); transform:translateY(-2px); }
.menu-toggle { display:none; border:0; color:var(--ink); background:none; font:inherit; font-size:.8rem; font-weight:700; }
/* Typografie und Hero-Bereich */
.hero { display:grid; grid-template-columns:1.35fr .65fr; gap:60px; align-items:end; min-height:590px; padding-top:105px; padding-bottom:95px; }
.eyebrow,.project-type,.section-label,.availability { color:var(--teal); font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow { margin:0 0 28px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { margin-bottom:28px; font-size:clamp(3rem,7vw,6.2rem); line-height:1.02; letter-spacing:-.075em; font-weight:700; }
h2 { font-size:clamp(2.4rem,4.5vw,4.5rem); }
em { color:var(--teal); font-style:normal; }
.hero-intro { max-width:590px; margin-bottom:34px; color:var(--muted); font-size:1.08rem; }
.hero-actions,.contact-links { display:flex; align-items:center; gap:26px; }
.button { padding:15px 20px; }
.button-primary { color:var(--white); background:var(--teal); }
.button-light { color:var(--ink); background:var(--white); }
.button-outline { color:var(--white); border:1px solid rgba(255,255,255,.55); }
.button-outline:hover { color:var(--teal); background:var(--white); }
.text-link,.inline-link { color:var(--teal-dark); font-size:.84rem; font-weight:700; }
.hero-meta { padding-bottom:8px; }
.availability { display:flex; align-items:center; gap:10px; margin-bottom:26px; font-size:.62rem; }
.availability i { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px var(--teal-pale); }
.hero-note { max-width:255px; margin:0; color:var(--muted); font-size:.88rem; }
/* Inhaltliche Abschnitte und Projektliste */
.section { padding-top:110px; padding-bottom:110px; border-top:1px solid var(--line); }
.split-section { display:grid; grid-template-columns:200px 1fr; gap:70px; }
.section-label { display:flex; gap:12px; padding-top:11px; font-size:.64rem; }
.section-label span:first-child { color:var(--ink); }
.section-content h2 { margin-bottom:0; }
.profile-grid,.experience-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.body-copy { max-width:430px; color:var(--muted); font-size:.95rem; }
.body-copy p { margin-bottom:22px; }
.inline-link { display:inline-flex; gap:10px; margin-top:10px; }
.section-heading-row { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:45px; }
.section-aside { max-width:210px; margin:0 0 7px; color:var(--muted); font-size:.82rem; }
.project-list { border-top:1px solid var(--line); }
.project-card { display:grid; grid-template-columns:55px 1fr 30px; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); transition:padding .25s,background .25s; }
.project-card:hover { padding-left:16px; padding-right:16px; background:var(--teal-pale); }
.project-number { color:var(--teal); font-family:'DM Mono',monospace; font-size:.72rem; }
.project-type { margin:0 0 9px; font-size:.62rem; }
.project-main h3 { margin-bottom:8px; font-size:1.2rem; letter-spacing:-.03em; }
.project-main p:not(.project-type) { max-width:510px; margin-bottom:12px; color:var(--muted); font-size:.86rem; }
.project-arrow { align-self:start; color:var(--teal); font-size:1.2rem; }
.focus-list { padding-top:4px; }
.focus-item { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:0 0 27px; margin-bottom:27px; border-bottom:1px solid var(--line); }
.focus-item > span { color:var(--teal); font: .7rem 'DM Mono',monospace; }
.focus-item h3 { margin:0 0 4px; font-size:1rem; }
.focus-item p { margin:0; color:var(--muted); font-size:.85rem; }
/* Kontakt- und Footer-Farben */
.contact-section { color:var(--white); background:var(--teal); }
.contact-inner { padding-top:100px; padding-bottom:100px; }
.contact-section .eyebrow { color:#bce4e0; }
.contact-section h2 { max-width:700px; margin-bottom:24px; }
.contact-section h2 em { color:#bce4e0; }
.contact-section p:not(.eyebrow) { max-width:430px; color:#d7efed; font-size:.95rem; }
.contact-links { margin-top:34px; }
.site-footer { background:#064e4a; color:#bce4e0; font: .68rem 'DM Mono',monospace; }
.footer-inner { min-height:80px; }
.footer-inner a { color:var(--white); }

/* Mobile Layout: Unter 760px wird die Navigation zum ausklappbaren Menü. */
@media (max-width:760px) {
  .container { width:min(100% - 36px,560px); }
  .site-header { position:relative; }
  .nav-wrap { min-height:68px; }
  .menu-toggle { display:block; }
  .site-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:15px 18px 22px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:16px; }
  .site-nav.is-open { display:flex; }
  .hero { display:block; min-height:0; padding-top:80px; padding-bottom:78px; }
  .hero-meta { margin-top:65px; }
  .split-section { display:block; padding-top:75px; padding-bottom:75px; }
  .section-label { margin-bottom:35px; }
  .profile-grid,.experience-grid { display:block; }
  .body-copy,.focus-list { margin-top:40px; }
  .section-heading-row { display:block; margin-bottom:35px; }
  .section-aside { margin-top:22px; }
  .project-card { grid-template-columns:34px 1fr 20px; gap:14px; }
  .project-card:hover { padding-left:8px; padding-right:8px; }
  .contact-inner { padding-top:75px; padding-bottom:75px; }
  .footer-inner { align-items:flex-start; flex-direction:column; justify-content:center; gap:8px; padding:18px 0; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }