:root{
  --gap: clamp(14px, 2.4vw, 28px);
  --wrap: min(1180px, 92vw);
  --fg: #0e0e0e;
  --muted: #6a6a6a;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header-h: 60px;
}

/* RESET & BASE */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x: clip; } /* clip > hidden gegen iOS-Scroll */
body{
  font-family:var(--font);
  color:var(--fg);
  background:#fff;
  line-height:1.5;
}

/* WRAP – zentriert überall konsistent */
.wrap{
  max-width:1300px;
  margin:16px auto;
}

/* Sticky Header (transparent) */
.site-header.sticky{
  position:fixed; inset:0 auto auto 0;
  height:var(--header-h);
  z-index:50; background:transparent; border:none;
  width:100%; max-width:100%;
}
.site-header{ --header-wrap: min(1180px, 92vw); }
.site-header .wrap{
  max-width: var(--header-wrap);
  width: 100%;
  margin: 0 auto;
  padding: 12px var(--gap);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-width:0;
}

/* Brand & Nav */
.brand, .nav a{
  text-decoration:none; font-size:22px; letter-spacing:.02em; color:#e8e8e8;
}
.nav a{ margin-left: clamp(16px, 2vw, 28px); }

/* Footer */
.site-footer{ margin-top:48px; background: linear-gradient(#ffffff00, #fafafa00); }
.site-footer .wrap{ width:var(--wrap); margin:0 auto; padding:16px var(--gap); }
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:12px; text-align:center;
}
.footer-grid a{ color:var(--fg); text-decoration:none; }
@media (max-width:680px){
  .footer-grid{ grid-template-columns:1fr; gap:6px; }
}

/* Index / Hero */
.hero-full{
  position: relative;
  /* Fallback für Browser ohne dvh */
  height: calc(100vh + var(--header-h));
  margin-top: calc(-1 * var(--header-h));
  overflow: hidden; /* schneidet evtl. 1px-Rounding ab */
}
.hero-full img{
  position:absolute; inset:0; width:100%; height:107%;
  object-fit:cover; display:block;
}

/* Index-Stream */
.index-stream{
  width:100%; margin:80px auto; padding:0 var(--gap);
  display:grid; gap:var(--gap); grid-template-columns:1fr 1fr;
}
@media (max-width:1400px){ .index-stream{ grid-template-columns:1fr; } }
.index-stream figure{ aspect-ratio:5/4; overflow:hidden; margin:0; }
.index-stream img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Seiten-Top-Abstand unter Sticky Header */
.page-work main, .page-about main, .page-project main{
  padding-top: calc(var(--header-h) + 8px);
}

/* Work: größere Bühne */
.page-work{ --wrap: min(1800px, 98vw); }
.page-work .work-grid, .page-work .filters{
  width:var(--wrap); margin-left:auto; margin-right:auto;
}

/* === Projektseiten (global) ===================================== */

/* Desktop: 2 Spalten – Video links, Sidebar rechts; Titel & Meta darüber */
.page-project main.wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "meta  meta"
    "video sidebar";
  column-gap: clamp(24px, 5vw, 80px);
  row-gap: clamp(32px, 4vw, 48px);
  align-items: start;
}
.page-project h1{
  grid-area: title;
  text-align: center; margin: 0; line-height: 1;
  font-size: clamp(42px, 10vw, 120px); font-weight: 800;
}
.page-project .meta  { grid-area: meta;  text-align: center; margin: 0; color: #000; }
.page-project .video { grid-area: video; width: 100%; aspect-ratio: 16/9; }
.page-project .sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 12px; }

/* Credits */
.page-project .credit-list{ list-style:none; margin:0; padding:0; }
.page-project .credit-list li{
  display:flex; justify-content:space-between; gap:60px; margin:.2em 0; min-width:0;
}
.page-project .meta,
.page-project .credit-list,
.page-project .credit-list li{ overflow-wrap:anywhere; word-break:break-word; }

/* Embeds immer responsiv */
.video{ position:relative; aspect-ratio:16/9; background:#000; border:1px solid #eee; margin:10px 0 16px; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Work – Filter Chips */
.filters{
  width:var(--wrap); margin:12px auto 8px; padding:0 var(--gap);
  display:flex; gap:8px; align-items:center; justify-content:center;
}
.chip{ background:none; border:none; padding:0; cursor:pointer; font-size:18px; color:#bfbfbf; }
.chip.active{ color:#010101; font-weight:600; }

/* Work – Grid */
.work-grid{
  width:var(--wrap); margin:12px auto 24px; padding:0 var(--gap);
  display:grid; gap:5px; grid-template-columns:1fr 1fr 1fr;
}
@media (max-width:1100px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .work-grid{ grid-template-columns:1fr; } }

.work-card{ display:block; color:inherit; text-decoration:none; }
.work-card figure{ margin:0; }
.work-card img{ width:100%; height:auto; display:block; }
.work-card .caption{ padding:8px 2px; color:#111; font-size:14px; }

/* Detail – Sektionen, Typo */
.header-bar{ display:flex; align-items:center; gap:12px; padding:14px 12px; border-bottom:1px solid #e5e5e5; }
.header-bar a{ color:#0e0e0e; text-decoration:none; border:1px solid #ddd; padding:4px 8px; }

h1{ margin:8px 0 4px; font-size: clamp(22px, 4vw, 32px); }
h2{ margin:4px 0; font-size: clamp(44px, 4vw, 54px); line-height:1; padding:100px; }
.meta{ color:#000; font-size:16px; font-weight:400; }

.section{ margin:14px 0; }
.section h2{
  font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:#666; margin:0 0 6px;
}
.credit-list{ list-style:none; padding:0; margin:0; }
.credit-list li{ display:flex; gap:6px; }
.credit-role{ min-width:84px; color:#666; }

/* Cursor */
.page-work .chip{ cursor:pointer; }
.page-work .chip[data-filter="camera"]:hover,
.page-work .chip[data-filter="camera"]:focus-visible{ cursor:url("/assets/cursor/CAMERA.cur"), pointer; }
.page-work .chip[data-filter="edit"]:hover,
.page-work .chip[data-filter="edit"]:focus-visible{ cursor:url("/assets/cursor/Scissors.cur"), pointer; }
.page-work .chip[data-filter="sfx"]:hover,
.page-work .chip[data-filter="sfx"]:focus-visible{ cursor:url("/assets/cursor/SFX.cur"), pointer; }
.page-work .chip[data-filter="color"]:hover,
.page-work .chip[data-filter="color"]:focus-visible{ cursor:url("/assets/cursor/COLOR.cur"), pointer; }
body{ cursor:url("/assets/cursor/Normal\ Select.cur"), auto; }
a,button,.chip{ cursor:url("/assets/cursor/Link\ Select.cur"), pointer; }

/* Globale Kleinbuchstaben – falls bewusst gewollt */
*{ text-transform: lowercase; }

/* OVE – drei Bilder untereinander */
.quetuaimes{ margin-bottom:20px; text-align:center; }
.quetuaimes img{
  max-width:100%; height:auto; display:block; margin:0 auto;
}

/* Robustheits-Guards (Medien + Container) */
.page-project main.wrap > *{ min-width:0; }
.page-project .sidebar{ min-width:0; }
.credit-list li > *{ min-width:0; }
img,video,iframe{ max-width:100%; height:auto; display:block; }

/* Container sicherheitshalber auf Box-Sizing */
.index-stream, .work-grid, .site-footer .wrap{
  box-sizing:border-box; max-width:100%;
}

/* === Mobile-Regeln am Ende (ohne !important) ===================== */

/* Mobile: seitliches Padding vereinheitlichen */
@media (max-width:900px){
  .wrap{ padding-inline:16px; }
  .site-header .wrap{ padding-inline:16px; flex-wrap:wrap; }
  .nav{ display:flex; flex-wrap:wrap; gap:12px; min-width:0; }
  .brand,.nav a{ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
}

/* Project-Detail: Grid auf Mobile deaktivieren, schlicht stapeln */
@media (max-width: 900px) {
  .page-project main.wrap { display: block; }
  .page-project h1,
  .page-project .meta,
  .page-project .video,
  .page-project .sidebar 
}

/* Mobile: Reihenfolge hart festlegen – 1 Spalte, keine Lücken */
@media (max-width: 900px) {
  .page-project main.wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
      "title"
      "meta"
      "video"
      "sidebar";
    row-gap: clamp(20px, 4vw, 32px);
  }

  /* explizite Areas (wirken auch wenn DOM-Reihenfolge variiert) */
  .page-project h1       { grid-area: title; }
  .page-project .meta    { grid-area: meta; }
  .page-project .video   { grid-area: video; }
  .page-project .sidebar { grid-area: sidebar; }
}

@media (max-width: 900px) {
  .page-about h2 { padding: 16px 0; }
}

@media (max-width: 900px) {
  .hero-full img{
    position:absolute; inset:0; width:100%; height:109%;
    object-fit:cover; display:block;
  }
}

/* Hero: Bild & Video exakt gleich positionieren */
.hero-full .hero-img,
.hero-full .hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Standard: Desktop = Bild sichtbar, Video aus */
.hero-full .hero-video{ display: none; }

/* Mobile: Video an, Bild aus */
@media (max-width: 900px){
  .hero-full .hero-video{ display: block; }
  .hero-full .hero-img{ display: none; }
}

/* Accessibility: bei reduzierter Bewegung kein Video */
@media (prefers-reduced-motion: reduce){
  .hero-full .hero-video{ display: none; }
  .hero-full .hero-img{ display: block; }
}