/* ============ IMAGERY-SEITE — Vorlage für alle Bilderproduktionen (Inhalte aus src/content/imagery/<pfad>.json) ============ */
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

/* Haupt-Layout: Galerie (fluide, 1050 bei 1440) | 30 | Info-Spalte 300 — beginnt 80 unter der H1 */
.projekt{display:grid;grid-template-columns:minmax(0,1fr) calc(300 * var(--u));column-gap:var(--rand);align-items:start;margin-top:calc(80 * var(--u))}

/* Galerie: quer = volle Breite (1050×700), hoch = paarweise (510×765), Abstand 30 */
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:var(--rand)}
.galerie .g-bild{display:block;aspect-ratio:510/765;border-radius:var(--radius);overflow:hidden}
.galerie .g-bild.quer{grid-column:1 / -1;aspect-ratio:1050/700}
.galerie .g-bild :is(img,video){display:block;width:100%;height:100%;object-fit:cover}

/* Info-Spalte: klebt 100 unter der Oberkante und läuft am Galerie-Ende mit weg; Karten 300 breit, Abstand 6 */
.info{position:sticky;top:calc(100 * var(--u));display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.info-fakten{display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.info-karte{background:var(--weiss);border-radius:var(--radius);padding:calc(17 * var(--u)) calc(20 * var(--u))}
.info-karte dt{color:var(--gedaempft)}
.info-karte dd{font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h);margin-top:calc(6 * var(--u))}

/* Credits-Akkordeon: Rot, alles Ink 100 % (keine Deckkraftstufen) */
.credits{background:var(--rot);color:var(--ink);border-radius:var(--radius)}
.credits-kopf{position:relative;display:block;width:100%;padding:calc(17 * var(--u)) calc(20 * var(--u));border:0;border-radius:var(--radius);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.credits-kopf .label{display:block}
.credits-titel{display:block;font-family:var(--font-h);font-weight:600;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h);margin-top:calc(6 * var(--u))}
.credits-icon{position:absolute;left:calc(262 * var(--u));top:calc(14 * var(--u));font:600 calc(22 * var(--u))/calc(22 * var(--u)) var(--font-h)}
.credits-icon::before{content:"+"}
.credits.offen .credits-icon::before{content:"\2013"}
.credits-kopf:focus-visible{outline:none}
.credits:has(.credits-kopf:focus-visible){outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(2 * var(--u))} /* Fokusring um die ganze Karte */
/* Höhe animiert per JS (0 ↔ Inhalt, gedeckelt bis 6 über dem Widget); reicht der Platz nicht, scrollt der Inhalt intern */
.credits-inhalt{height:0;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none;transition:height .3s ease}
.credits-inhalt::-webkit-scrollbar{display:none}
.credits-inhalt.ueberlauf{overflow-y:auto}
.credits-inhalt.ueberlauf:not(.am-ende){-webkit-mask-image:linear-gradient(#000 calc(100% - calc(48 * var(--u))),transparent);mask-image:linear-gradient(#000 calc(100% - calc(48 * var(--u))),transparent)}
.credits-liste{list-style:none;padding:0 calc(20 * var(--u))}
.credits-liste,.credits-absatz{font-family:var(--font-h);font-weight:600;font-size:var(--fs-klein);line-height:var(--lh-klein);letter-spacing:var(--ls-klein)}
.credits-absatz{padding:calc(12 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u))}

/* Explore-Widget: dunkel, 300×80 (Höhe aus dem Innenabstand, Buttons zentrieren sonst vertikal), fix unten rechts unter der Info-Spalte; sichtbar nur solange das Panel klebt (JS) */
.explore{position:fixed;right:var(--rand);bottom:var(--rand);z-index:55;width:calc(300 * var(--u));padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));border:0;border-radius:var(--radius);background:var(--dunkel);color:var(--creme);text-align:left;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.explore.sichtbar{opacity:1;visibility:visible;transition:opacity .2s ease}
.explore .label{display:block;color:rgba(247,244,240,.55)}
.explore-titel{display:block;font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h);margin-top:calc(7 * var(--u))}
.explore-icon{position:absolute;left:calc(260 * var(--u));top:calc(16 * var(--u));font:500 calc(22 * var(--u))/calc(22 * var(--u)) var(--font-h)}
.explore:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(2 * var(--u))}

/* Explore-Pop-up (P-3 · dunkles Milchglas): volle Breite am unteren Rand, fährt 24 hoch und blendet ein, schließt nur per Ausblenden */
.explore-pop{position:fixed;left:0;right:0;bottom:0;z-index:56;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--rand);padding:var(--rand);background:rgba(26,26,24,.88);-webkit-backdrop-filter:blur(calc(24 * var(--u)));backdrop-filter:blur(calc(24 * var(--u)));opacity:0;visibility:hidden;transform:translateY(calc(24 * var(--u)));transition:opacity .2s ease,visibility 0s linear .2s,transform 0s linear .2s}
.explore-pop.offen{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease-out,transform .2s ease-out}
.explore-eintrag{display:block;color:rgba(247,244,240,.6);transition:color .2s ease}
.explore-eintrag:hover,.explore-eintrag:focus-visible{color:var(--creme)}
.explore-eintrag:focus-visible{outline:none}
.explore-eintrag:focus-visible .explore-bild{outline:calc(2 * var(--u)) solid var(--creme);outline-offset:calc(2 * var(--u))}
.explore-bild{display:block;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden}
.explore-bild img{transition:transform .3s ease}
/* Bild-Zoom erst nach der ersten Mausbewegung (das Pop-up liegt dort, wo eben das Widget war) */
.explore-pop.zoom .explore-eintrag:hover img{transform:scale(1.04)}
.explore-name{display:block;margin-top:calc(10 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein);line-height:var(--lh-klein);letter-spacing:var(--ls-klein)}

/* Film in der Galerie (quer): Standbild, Klick lädt den YouTube-Film ohne Cookies (case.js) */
.g-film{position:relative;width:100%;padding:0;border:0;background:var(--saum);cursor:pointer}
.g-film img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.g-film:hover img{transform:scale(1.015)}
.g-film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(26,26,26,.32),rgba(26,26,26,0));pointer-events:none}
.g-film-tag{position:absolute;z-index:1;left:calc(20 * var(--u));bottom:calc(18 * var(--u));color:#fff}
.g-film:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.g-film-video{display:block;width:100%;height:100%;border:0}

/* Erste Info-Karte als Link zur Marken-Case (Donna-Carolina-Vorlage) */
.info-link dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* Kontakt (Figma 209:3): Label in der Kerbe, Statement 32/35 zweifarbig ab x 200, Link 42 darunter; 150 unter der Galerie */
.kontakt-cta{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;padding:calc(148 * var(--u)) var(--rand) 0}
.kontakt-cta > .label{margin-top:calc(2 * var(--u))}
.kontakt-statement{max-width:calc(760 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m)}
.kontakt-text .link-l{margin-top:calc(42 * var(--u))}

/* More work: zwei Kacheln 675 × 427 wie in der Case-Vorlage, Marke + Typ 25 darunter, Titel 20/24 (max. 450); 150 bis zum Footer */
.mehr-arbeit{padding:calc(152 * var(--u)) var(--rand) calc(150 * var(--u))}
.mw-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--rand);margin-top:calc(40 * var(--u))}
.mw-karte{display:block}
.mw-bild{aspect-ratio:675/427;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.mw-bild img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mw-karte:hover .mw-bild img{transform:scale(1.04)}
.mw-meta{display:flex;justify-content:space-between;gap:calc(20 * var(--u));margin-top:calc(25 * var(--u));font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.mw-typ{color:var(--gedaempft)}
.mw-titel{max-width:calc(450 * var(--u));margin-top:calc(14 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-kachel);line-height:var(--lh-kachel);letter-spacing:var(--ls-kachel)}

/* Mobile Leiste + Schließen-Knopf der Fenster gibt es nur unter 1100 px */
.m-leiste,.blatt-zu{display:none}

/* Bewegung reduziert: Pop-up nur ein-/ausblenden, Credits sofort, kein Bild-Zoom */
@media (prefers-reduced-motion:reduce){
  .credits-inhalt{transition:none}
  .explore-pop,.explore-pop.offen{transform:none}
  .explore-pop.zoom .explore-eintrag:hover img{transform:none}
}

/* Unter 1100 px (Figma I-M1–I-M3, nach Skinn): Projektdaten und Explore als Vollbild-Fenster hinter einer festen Leiste;
   Tablet (nicht designt) behält die Hochformat-Paare, sonst wird jedes Hochformat fast zwei Bildschirme hoch */
@media (max-width:1100px){
  .projekt{display:block;margin-top:calc(60 * var(--u))}
  .galerie{gap:20px}
  .explore{display:none}
  .m-leiste{position:fixed;left:var(--rand);right:var(--rand);bottom:20px;z-index:57;display:grid;grid-template-columns:1fr 1fr;gap:6px;transition:opacity .2s ease,transform .2s ease}
  .m-leiste.weg{opacity:0;transform:translateY(12px);pointer-events:none}
  html.mm-offen .m-leiste,html.blatt-offen .m-leiste{display:none}
  .m-kachel{position:relative;height:72px;padding:16px;border:0;border-radius:var(--radius);text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
  .m-kachel .label{display:block}
  .m-titel{display:block;margin-top:6px;font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
  .m-plus{position:absolute;right:16px;top:14px;font:500 20px/20px var(--font-h)}
  .m-explore{background:rgba(26,26,24,.92);color:var(--creme)}
  .m-explore .label{color:rgba(247,244,240,.55)}
  .m-details{background:rgba(255,255,255,.92);color:var(--ink)}
  .m-details .label{color:var(--gedaempft)}
  .m-kachel:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* Vollbild-Fenster: dunkel, Inhalt oben, „Close“ fest unten auf einem Verlauf */
  html.blatt-offen{overflow:hidden}
  .info,.explore-pop{position:fixed;inset:0;z-index:70;display:block;max-width:none;margin:0;padding:20px var(--rand) 116px;background:var(--dunkel);overflow-y:auto;overscroll-behavior:contain;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;visibility:hidden;transform:none;transition:opacity .2s ease,visibility 0s linear .2s}
  .info.m-offen,.explore-pop.m-offen{opacity:1;visibility:visible;transition:opacity .2s ease}
  .info{top:0}
  .info-fakten,.info{gap:6px}
  .info-karte{padding:14px 16px}
  .info-karte dd{margin-top:6px}
  .info .credits{margin-top:6px}
  .credits-kopf{padding:14px 16px}
  .credits-titel{margin-top:6px}
  .credits-icon{left:auto;right:16px;top:12px;font-size:20px;line-height:20px}
  .credits-liste{padding:0 16px}
  .credits-absatz{padding:12px 16px 16px}
  .explore-eintrag + .explore-eintrag{margin-top:20px}
  .explore-name{font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
  .blatt-zu{position:fixed;left:0;right:0;bottom:0;z-index:71;display:block;height:96px;padding:50px 0 0;border:0;background:linear-gradient(to top,var(--dunkel) 55%,rgba(26,26,24,0));color:var(--creme);font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h);text-align:center;cursor:pointer}
  .blatt-zu:focus-visible{outline:none;text-decoration:underline;text-underline-offset:.2em}
  .kontakt-cta{padding-top:calc(100 * var(--u))}
  .mehr-arbeit{padding-top:calc(100 * var(--u));padding-bottom:calc(100 * var(--u))}
}

/* Mobil (I-M1): Galerie einspaltig, 40 unter der H1; Kontakt 80 unter der Galerie (Label → Statement 32 → Link 32); More work 80 darunter, Kacheln untereinander */
@media (max-width:760px){
  .projekt{margin-top:40px}
  .galerie{grid-template-columns:minmax(0,1fr)}
  .kontakt-cta{display:block;padding:80px var(--rand) 0}
  .kontakt-cta > .label{margin:0 0 32px}
  .kontakt-text .link-l{margin-top:32px}
  .mehr-arbeit{padding:77px var(--rand) 80px}
  .mw-raster{grid-template-columns:minmax(0,1fr);row-gap:64px;margin-top:32px}
  .mw-meta{margin-top:12px}
  .mw-titel{max-width:none;margin-top:8px}
  .g-film-tag{left:14px;bottom:12px}
}