/* ===== Tokens ===== */
:root {
  --text-xs: clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm: clamp(.875rem,.8rem + .35vw,1rem);
  --text-base: clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl: clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl: clamp(2.5rem,1rem + 4vw,5rem);
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;
  --sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;--sp-20:5rem;--sp-24:6rem;--sp-32:8rem;
  --font-display:'DM Serif Display','Georgia',serif;
  --font-body:'Satoshi','Inter','Helvetica Neue',sans-serif;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
}

/* Light */
:root,[data-theme='light'] {
  --color-bg:#f5f4f0;--color-surface:#fff;--color-surface-2:#fafaf8;
  --color-divider:#dddcd8;--color-border:#d0cfcb;
  --color-text:#1a1a1a;--color-text-muted:#6b6b68;--color-text-faint:#a3a29e;--color-text-inv:#f5f4f0;
  --color-accent:#2c3e3e;--color-accent-hover:#1a2c2c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.07);--shadow-lg:0 12px 32px rgba(0,0,0,.1);
  --logo-filter: none;
}

/* Dark */
[data-theme='dark'] {
  --color-bg:#111110;--color-surface:#1a1918;--color-surface-2:#1f1e1d;
  --color-divider:#2a2928;--color-border:#333231;
  --color-text:#d4d3d1;--color-text-muted:#8a8987;--color-text-faint:#5a5958;--color-text-inv:#111110;
  --color-accent:#8fb0b0;--color-accent-hover:#a5c4c4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);--shadow-md:0 4px 12px rgba(0,0,0,.3);--shadow-lg:0 12px 32px rgba(0,0,0,.4);
  --logo-filter: invert(1);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#111110;--color-surface:#1a1918;--color-surface-2:#1f1e1d;
    --color-divider:#2a2928;--color-border:#333231;
    --color-text:#d4d3d1;--color-text-muted:#8a8987;--color-text-faint:#5a5958;--color-text-inv:#111110;
    --color-accent:#8fb0b0;--color-accent-hover:#a5c4c4;
    --shadow-sm:0 1px 2px rgba(0,0,0,.2);--shadow-md:0 4px 12px rgba(0,0,0,.3);--shadow-lg:0 12px 32px rgba(0,0,0,.4);
    --logo-filter: invert(1);
  }
}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider);padding:var(--sp-3) var(--sp-6)}
.header-inner{max-width:var(--content-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--color-text);font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.logo-img{width:32px;height:32px;border-radius:var(--radius-full);filter:var(--logo-filter)}
.nav-links{display:flex;align-items:center;gap:var(--sp-5);list-style:none}
.nav-links a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--color-text)}
.header-controls{display:flex;align-items:center;gap:var(--sp-2)}
.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700;letter-spacing:.03em}
.icon-btn:hover{color:var(--color-text);background:var(--color-surface)}
.lang-btn{font-family:var(--font-body)}

/* ===== Hero ===== */
.hero{text-align:center;padding:clamp(var(--sp-12),8vw,var(--sp-24)) var(--sp-6) clamp(var(--sp-4),2vw,var(--sp-8));max-width:var(--content-wide);margin:0 auto}
.hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-4);letter-spacing:-.01em}
.hero-tagline{font-size:var(--text-sm);color:var(--color-text-muted);letter-spacing:.2em;text-transform:uppercase;font-weight:600}

/* ===== Hero Animation ===== */
.hero-animation{max-width:var(--content-default);margin:clamp(var(--sp-6),4vw,var(--sp-12)) auto 0;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.hero-animation canvas{width:100%;height:100%;display:block}

/* ===== CTA ===== */
.hero-cta{text-align:center;padding:clamp(var(--sp-6),3vw,var(--sp-12)) var(--sp-6) clamp(var(--sp-8),4vw,var(--sp-16))}
.hero-cta a{display:inline-block;font-size:var(--text-sm);font-weight:600;color:var(--color-text-inv);background:var(--color-accent);padding:var(--sp-3) var(--sp-8);border-radius:var(--radius-full);text-decoration:none;letter-spacing:.03em}
.hero-cta a:hover{background:var(--color-accent-hover)}

/* ===== Page Content ===== */
.page-content{max-width:var(--content-default);margin:0 auto;padding:clamp(var(--sp-12),6vw,var(--sp-24)) var(--sp-6)}
.page-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-4)}
.page-intro{font-size:var(--text-base);color:var(--color-text-muted);max-width:60ch;margin-bottom:clamp(var(--sp-10),5vw,var(--sp-16));line-height:1.7}
.industry-note{font-size:var(--text-sm);color:var(--color-text);font-weight:500;border-left:2px solid var(--color-accent);padding-left:var(--sp-4);margin-bottom:clamp(var(--sp-10),5vw,var(--sp-16));max-width:60ch;line-height:1.7}

/* ===== Services ===== */
.section-heading{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-faint);margin-bottom:var(--sp-6)}
.services-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:clamp(var(--sp-12),6vw,var(--sp-20))}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.service-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--sp-6);transition:box-shadow .18s ease,border-color .18s ease}
.service-card:hover{border-color:var(--color-border);box-shadow:var(--shadow-md)}
.service-card h3{font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text);margin-bottom:var(--sp-3)}
.service-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}

/* ===== Experience ===== */
.experience-list{display:flex;flex-direction:column;margin-bottom:clamp(var(--sp-10),5vw,var(--sp-16))}
.exp-item{display:grid;grid-template-columns:140px 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--color-divider)}
.exp-item:first-child{border-top:1px solid var(--color-divider)}
.exp-date{font-size:var(--text-xs);color:var(--color-text-faint);font-weight:500;font-variant-numeric:tabular-nums;padding-top:2px}
.exp-details h4{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--sp-1)}
.exp-company{font-size:var(--text-xs);color:var(--color-text-muted)}
.exp-desc{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--sp-1)}

/* ===== Certs ===== */
.cert-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:clamp(var(--sp-10),5vw,var(--sp-16))}
.cert-tag{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-divider);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full);font-weight:500}

/* ===== Contact ===== */
.contact-section{text-align:center;padding:clamp(var(--sp-12),6vw,var(--sp-20)) var(--sp-6);border-top:1px solid var(--color-divider)}
.contact-section h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-4)}
.contact-section p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--sp-6);max-width:45ch;margin-left:auto;margin-right:auto}
.contact-links{display:flex;justify-content:center;gap:var(--sp-6);flex-wrap:wrap}
.contact-links a{font-size:var(--text-sm);font-weight:500;color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:var(--sp-2)}
.contact-links a:hover{color:var(--color-accent)}
.contact-links svg{width:16px;height:16px;flex-shrink:0}

/* ===== Privacy ===== */
.privacy-content{max-width:var(--content-narrow);margin:0 auto;padding:clamp(var(--sp-12),6vw,var(--sp-24)) var(--sp-6)}
.privacy-content h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--color-text);margin-bottom:var(--sp-8)}
.privacy-content h2{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.privacy-content h3{font-family:var(--font-body);font-size:var(--text-base);font-weight:600;color:var(--color-text);margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.privacy-content p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--sp-4)}
.privacy-content ul{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--sp-4);padding-left:var(--sp-6)}
.privacy-content li{margin-bottom:var(--sp-2)}
.privacy-content a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--color-divider);padding:var(--sp-8) var(--sp-6);text-align:center}
.footer-inner{max-width:var(--content-wide);margin:0 auto}
.footer-inner p{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ===== i18n ===== */
[data-lang='en'] [lang='de']{display:none}
[data-lang='de'] [lang='en']{display:none}

/* ===== Mobile ===== */
@media(max-width:640px){
  .nav-links{gap:var(--sp-3)}
  .exp-item{grid-template-columns:1fr;gap:var(--sp-1)}
  .hero h1{font-size:var(--text-2xl)}
}