:root{
   /* Light theme: white/gray/black with cherry red accents */
  --bg:#ffffff;          /* page background */
  --card:#ffffff;        /* cards / panels */
  --line:#e6e8eb;        /* borders */
  --fg:#111317;          /* primary text */
  --muted:#616671;       /* secondary text */
  --accent:#cc1f2f;      /* cherry red */
  --radius:18px;
  --shadow:0 10px 30px rgba(17,19,23,.06);
}

/* i18n via CSS: nur die gewählte Sprache anzeigen */
[data-lang]{display:none !important}
html[lang="en"] [data-lang="en"]{display:initial !important}
html[lang="de"] [data-lang="de"]{display:initial !important}
html[lang="uk"] [data-lang="uk"]{display:initial !important}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--fg);
  background:var(--bg);
}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}

.wrap{max-width:1200px;margin:0 auto;padding:24px}

/* Header / Menu */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;letter-spacing:.04em}
.menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.menu a{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f6f7f9;
}
.menu a:hover{border-color:var(--accent)}
.lang select{
  padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:#f6f7f9;color:var(--fg)
}

/* Cards/Sections */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{padding:22px}
.section{margin:46px 0 18px}

/* Hero */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:22px;overflow:hidden;
}
.hero-text{padding:22px}
.title{font-size:clamp(28px,5vw,50px);line-height:1.1;margin:.2em 0}
.lead{color:var(--muted)}
.chip{
  display:inline-block;padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:#f6f7f9;color:var(--muted)
}

/* Projects grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proj .cover{display:block;overflow:hidden;border-bottom:1px solid var(--line)}
.proj img{transition:transform .5s ease}
.proj:hover img{transform:scale(1.04)}
.proj-meta{display:flex;justify-content:space-between;padding:14px}
.badge{
  padding:4px 8px;border:1px solid var(--line);border-radius:999px;
  background:#f6f7f9;color:var(--muted);font-size:12px
}

/* Footer */
.foot{
  margin:48px 0 24px;color:var(--muted);font-size:14px;
  display:flex;justify-content:center;gap:6px;flex-wrap:wrap
}

/* Aspect helpers */
.img-portrait{aspect-ratio:2/3;object-fit:cover;width:100%;height:auto;border-radius:12px}
.img-landscape{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;border-radius:12px}

/* Accessibility */
:focus{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:white}

/* Responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
}

/* Header über dem Video schweben lassen */
.header-overlay { position:absolute; top:0; left:0; right:0; z-index:3; }

/* Hamburger sichtbar nur auf Mobile */
.hamburger { display:none; }
@media (max-width:768px){
  .menu { display:none; }                 /* Desktop-Menü ausblenden */
  .hamburger{ 
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border:1px solid var(--line); border-radius:12px;
    background:#f6f7f9; color:var(--fg);
  }
}

/* Mobile Drawer */
.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(110%) blur(2px);
  display:none; z-index:40;
}
.mobile-nav{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .25s ease; z-index:41; padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.mobile-nav .mbrand{ font-weight:700; margin-bottom:4px; }
.mobile-nav a{ padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#f6f7f9; }
.mobile-nav .close{ align-self:flex-end; margin-bottom:8px; }

/* Offen-Zustände */
.mobile-open .mobile-nav-overlay{ display:block; }
.mobile-open .mobile-nav{ transform:translateX(0); }
.mobile-open { overflow:hidden; } /* Scroll lock */