/* ---- design tokens (Semantic-UI-inspired, gently modernized) ---- */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap");

:root {
  --bg: #ffffff;
  --fg: #1b1c1d;
  --muted: #6b6f73;
  --line: #e4e6e8;
  --accent: #1b1c1d;
  --maxw: 960px;
  --gap: clamp(1rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-weight: 400; line-height: 1.6; font-size: 17px;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }

/* ---- header / nav ---- */
.site-header { text-align: center; padding: 0 1rem 1.5rem; }
.site-header h1 { font-weight: 700; letter-spacing: .02em; margin: 0 0 .25rem; font-size: 1.9rem; }
.site-header .tagline { color: var(--muted); margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; }

/* top bar: contact left, social icons right */
.site-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 1.25rem 0 2.25rem; }
.site-top .contact a { color: var(--muted); text-decoration: none; font-size: .85rem; margin-right: 1.25rem; }
.site-top .contact a:hover { color: var(--fg); }
.site-social { display: flex; gap: .5rem; }
.site-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: #fff; transition: opacity .2s ease; }
.site-social a:hover { opacity: .85; }
.site-social svg { width: 16px; height: 16px; fill: currentColor; }
.site-social a[aria-label="Facebook"] { background: #1877F2; }
.site-social a[aria-label="Instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.site-social a[aria-label="XING"] { background: #006567; }

.site-nav { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; padding-top: .5rem; }
.site-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--muted); padding-bottom: .4rem; }
.site-nav a.active, .site-nav a:hover { color: var(--fg); border-bottom: 2px solid var(--fg); }

/* ---- layout ---- */
main { max-width: var(--maxw); margin: 0 auto; padding: var(--gap) 1rem 4rem; }
.project { margin: 0 0 4rem; }
.project[data-visible="false"] { display: none; }   /* <-- toggle feature */
.project h2 { font-weight: 700; font-size: 1.5rem; margin: 0 0 .5rem; }
.project p { margin: .25rem 0; }
.project .award { color: var(--muted); font-size: .9rem; }
.media { margin-top: 1.25rem; }

/* ---- image grid (lightbox cases) — fluid & responsive ----
   Caps at --cols on wide screens, reflows to fewer columns as width shrinks
   (min tile width --grid-min). --cols:1 projects stay full width at any size. */
.grid {
  --gap: .9rem;
  --grid-min: 240px;
  display: grid;
  gap: var(--gap);
  align-items: start;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-min), (100% - (var(--cols, 3) - 1) * var(--gap)) / var(--cols, 3)), 1fr)
  );
}
.grid a { display: block; cursor: zoom-in; }
.grid img { width: 100%; height: auto; transition: opacity .2s ease; }
.grid a:hover img { opacity: .9; }
/* mobile: always one full-width image per row */
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

/* ---- slider (replaces slick) ---- */
.slider { position: relative; }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: thin; }
.slider-track img { scroll-snap-align: center; flex: 0 0 auto; max-height: 70vh; width: auto; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; padding: 0; background: rgba(0,0,0,.55); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.slider-btn:hover { background: rgba(0,0,0,.72); }
.slider-btn svg { width: 22px; height: 22px; }
.slider-btn.prev { left: .5rem; } .slider-btn.next { right: .5rem; }

/* ---- video / audio ---- */
.media video { width: 100%; background: #000; }
.media audio { width: 100%; margin: .35rem 0; }
.media .audio-label { font-weight: 700; margin-top: 1rem; }
.embed { position: relative; padding-top: 56.25%; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- lightbox (<dialog>) — fullscreen gallery slider ---- */
dialog.lightbox { border: 0; padding: 0; background: transparent; }
dialog.lightbox[open] { display: grid; place-items: center; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow: hidden; }
dialog.lightbox::backdrop { background: rgba(0,0,0,.92); }
dialog.lightbox img { max-width: 92vw; max-height: 92vh; width: auto; height: auto; }
dialog.lightbox .lb-close { position: fixed; top: 1rem; right: 1.25rem; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: #fff; background: none; border: 0; cursor: pointer; z-index: 2; }
dialog.lightbox .lb-close svg { width: 24px; height: 24px; }
dialog.lightbox .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; z-index: 2; }
dialog.lightbox .lb-nav:hover { background: rgba(255,255,255,.28); }
dialog.lightbox .lb-nav svg { width: 26px; height: 26px; }
dialog.lightbox .lb-nav.prev { left: 1rem; }
dialog.lightbox .lb-nav.next { right: 1rem; }
dialog.lightbox .lb-nav[hidden] { display: none; }

/* ---- CV / contact / impressum ---- */
.prose { max-width: 640px; }
.cv { list-style: none; padding: 0; }
.cv li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.cv .years { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .85rem; }
.site-footer a { color: var(--muted); margin: 0 .5rem; }

@media (max-width: 600px) {
  .cv li { grid-template-columns: 5rem 1fr; }
  .site-header { padding-top: 2rem; }
}