/*
 * steffengoldkamp.de - statische Fassung (ohne Cargo)
 * Schrift: KMR Melange Grotesk Medium (kimera). Alles in Medium, Kursiv = Medium Italic.
 */
@font-face { font-family: "KMR Melange Grotesk"; src: url("fonts/kmrmelangegrotesk-medium.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("fonts/kmrmelangegrotesk-mediumitalic.woff2") format("woff2"); font-weight: 1 1000; font-style: italic; font-display: swap; }

:root {
  --font: "KMR Melange Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { font-size: 1.08vw; -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) { html { font-size: 2.9vw; } }

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #000; font-family: var(--font); }

a:active { opacity: .7; }
i, em { font-style: italic; }
b, strong { font-weight: inherit; }
img { border: 0; padding: 0; }

.page { position: relative; z-index: 2; min-height: 100vh; }

.bodycopy {
  display: block;
  padding: 1.4rem;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(0, 0, 0, .85);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.bodycopy a {
  color: rgb(105, 143, 255);
  padding-bottom: .1em;
  text-decoration: none;
}
.bodycopy h1 {
  font-family: var(--font); font-weight: 400; font-size: 2rem; line-height: 1.2;
  margin: 0; padding: 0; color: rgba(0, 0, 0, .85);
}
.bodycopy h1 a { color: rgba(0, 0, 0, .85); }
.bodycopy small {
  display: inline-block; font-size: 1rem; line-height: 1.3; color: #fff;
}
.bodycopy small a { color: #000; }

/* Bilder im Text: nie breiter als die Spalte, nie hoeher als das Fenster */
.bodycopy img { display: inline-block; vertical-align: bottom; height: auto; max-width: 100%; margin-bottom: .5em; }

/* Videos */
.video { position: relative; width: 100%; max-width: 100%; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Cargo-Raster */
[grid-row] { display: flex; flex-wrap: wrap; align-items: flex-start; }
[grid-col] { box-sizing: border-box; }
[grid-col="x12"] { width: 100%; }
[grid-col="x11"] { width: 50%; }
[grid-col="x10"] { width: 33.33%; }
[grid-col="x9"] { width: 25%; }
[grid-col="3"] { width: 25%; }
[grid-col="9"] { width: 75%; }
[grid-pad="0"] { padding: 0; }
[grid-pad="2"] { padding: 1rem; }
[grid-pad="2.5"] { padding: 1.25rem; }
[grid-pad="10"] { padding: 5rem; }
[grid-gutter="0"] { margin: 0; }
[grid-gutter="4"] { margin: -2rem; }
[grid-gutter="5"] { margin: -2.5rem; }
[grid-gutter="20"] { margin: -10rem; }
@media (max-width: 767px) {
  [grid-responsive] [grid-col] { width: 100%; }
}

/* ---------- Startseite ---------- */
body.home { background: #000; }
body.home .page { background: transparent; }
body.home .bodycopy,
body.home .bodycopy a,
body.home .bodycopy small,
body.home .bodycopy small a { color: #fff; }

#backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: #000; pointer-events: none;
}
#backdrop video, #backdrop img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* iOS: keinen System-Play-Knopf ueber Hintergrund-Videos zeigen (z.B. im Stromsparmodus) */
#backdrop video::-webkit-media-controls,
#backdrop video::-webkit-media-controls-start-playback-button,
.hover-image video::-webkit-media-controls,
.hover-image video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0; }

.hover-title { display: inline; cursor: pointer; }
.segh .hover-title a { text-decoration: none; text-underline-offset: .12em; text-decoration-thickness: .06em; }
.segh .hover-title a:hover { text-decoration: underline; }
.home-footer { position: fixed; left: 1.4rem; bottom: 1.4rem; right: 1.4rem; z-index: 3; display: flex;
  font-size: 2rem; line-height: 1.3; font-family: var(--font); }
.home-footer a { width: 25%; color: #fff; text-decoration: none; }
body.home .page { padding-bottom: 5rem; }
@media (max-width: 767px) { .home-footer a { width: 50%; } }
.hover-image {
  display: none;
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none;
  width: 90vw; height: 90vh;
  flex-direction: column; align-items: center; justify-content: center;
}
.hover-image img, .hover-image video {
  max-width: 100% !important; max-height: 100% !important;
  width: auto !important; height: auto !important; margin: 0; display: block;
}
@media (hover: hover) and (min-width: 768px) {
  .hover-title:hover + .hover-image { display: flex; }
}

/* ---------- Seiten mit Hintergrund-Video (Impressum) ---------- */
body.has-bgvideo { background: #000; }
body.has-bgvideo .page { background: transparent; }
body.has-bgvideo .bodycopy, body.has-bgvideo .bodycopy small, body.has-bgvideo .bodycopy a { color: #fff; }

/* ---------- Impressum: Text immer lesbar ueber dem Stroboskop ---------- */
body.has-bgvideo .impressum { max-width: 62rem; color: #fff; mix-blend-mode: difference; }
body.has-bgvideo .impressum a { color: #fff; }

/* ---------- Grafik: Raster + Vollbild ---------- */
.gallery-grid { --row-h: 22rem; display: flex; flex-wrap: wrap; gap: 1.4rem; line-height: 0; }
.gallery-grid .gg-item { display: block; position: relative; padding: 0 !important; margin: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-grid .gg-item img { display: block; width: 100%; height: auto; max-height: none; margin: 0 !important; }
.gallery-grid .gg-fill { flex-grow: 1000; }
@media (max-width: 767px) { .gallery-grid { --row-h: 30vw; gap: .8rem; } }
/* Grafik: einheitliche Raster fuer Poster und Titel, Zeilen-Raster fuer den Rest */
.gallery-grid + .gallery-grid { margin-top: 4.2rem; }
.gallery-grid.gg-posters, .gallery-grid.gg-titles, .gallery-grid.gg-rest { display: grid; gap: 1.4rem; }
.gallery-grid.gg-rest { grid-template-columns: repeat(3, 1fr); }
.gallery-grid.gg-rest .gg-item { aspect-ratio: 3 / 2; background: #000; }
.gallery-grid.gg-rest .gg-item img { width: 100%; height: 100%; object-fit: contain; }
.gallery-grid.gg-posters { grid-template-columns: repeat(6, 1fr); }
.gallery-grid.gg-titles { grid-template-columns: repeat(3, 1fr); }
.gallery-grid.gg-posters .gg-item { aspect-ratio: 1 / 1.414; }
.gallery-grid.gg-titles .gg-item { aspect-ratio: 16 / 9; background: #000; }
.gallery-grid.gg-posters .gg-item img, .gallery-grid.gg-titles .gg-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid.gg-titles .gg-item img { object-fit: contain; }
/* erstes Poster gross (2x2) - so gehen die Reihen bei 6 und bei 3 Spalten genau auf */
.gallery-grid.gg-posters .gg-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 1100px) { .gallery-grid.gg-posters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .gallery-grid.gg-posters { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .gallery-grid.gg-titles, .gallery-grid.gg-rest { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .gallery-grid.gg-titles .gg-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .gallery-grid + .gallery-grid { margin-top: 2.4rem; }
}
.lightbox { position: fixed; inset: 0; box-sizing: border-box; padding: 2rem 0; z-index: 50; background: rgba(0,0,0,.96); display: none;
  align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.open { display: flex; flex-direction: column; gap: 1.6rem; }
.lightbox img { max-width: 94vw; max-height: calc(100vh - 9rem); width: auto; height: auto; display: block; }
.lightbox .lb-prev, .lightbox .lb-next { position: absolute; top: 0; bottom: 0; width: 30%; background: none; border: 0; padding: 0; }
.lightbox .lb-prev { left: 0; cursor: w-resize; }
.lightbox .lb-next { right: 0; cursor: e-resize; }
.lightbox .lb-count { position: absolute; left: 2.4rem; bottom: 2rem; color: rgba(255,255,255,.7); font-size: 1.6rem; line-height: 1; }

/* ---------- Slideshows ---------- */
.slideshow { position: relative; width: 100%; line-height: 0; user-select: none; -webkit-user-select: none; }
.slideshow .ss-track { display: grid; overflow: hidden; }
.slideshow .ss-slide {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.slideshow .ss-slide.is-active { opacity: 1; pointer-events: auto; }
.slideshow .ss-slide.is-leaving { opacity: 1; }
.slideshow img { margin: 0 !important; display: block; }
.slideshow[data-constrain="false"] img { width: 100% !important; }
.slideshow .ss-prev, .slideshow .ss-next {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3;
  background: none; border: 0; padding: 0; margin: 0;
}
.slideshow .ss-prev { left: 0; cursor: w-resize; }
.slideshow .ss-next { right: 0; cursor: e-resize; }
.slideshow[data-arrows="false"] .ss-prev,
.slideshow[data-arrows="false"] .ss-next { cursor: pointer; }

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt kein Stroboskop */
@media (prefers-reduced-motion: reduce) {
  body.has-bgvideo #backdrop video { display: none; }
}

/* ---------- Pfeile (Slideshow + Vollbild) ---------- */
.arrow { display: block; width: 3.4rem; height: auto; fill: currentColor; }
.arrow.back { transform: scaleX(-1); }
.ss-nav { display: flex; align-items: center; gap: 1.6rem; margin-top: 1rem; line-height: 1.3; }
.ss-nav button { background: none; border: 0; padding: .4rem 0; margin: 0; color: inherit; cursor: pointer; }
.ss-nav .ss-count { font-size: 2rem; min-width: 5ch; text-align: center; }
.slideshow .ss-prev, .slideshow .ss-next { bottom: auto; height: calc(100% - 4.4rem); }
.lightbox .lb-nav { position: relative; display: flex; justify-content: center;
  align-items: center; gap: 1.6rem; color: #fff; z-index: 4; }
.lightbox .lb-nav button { background: none; border: 0; padding: .4rem 0; color: #fff; cursor: pointer; }
.lightbox .lb-count { position: static; font-size: 2rem; }
.lightbox .lb-close { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 5; background: none; border: 0; padding: 0;
  color: #fff; font: inherit; font-family: var(--font); font-size: 2rem; line-height: 1.3; cursor: pointer; }
.lightbox .lb-close:hover { text-decoration: underline; text-underline-offset: .12em; }
.lightbox .lb-prev, .lightbox .lb-next { bottom: 6rem; }

/* ---------- Video-Player ---------- */
.vplayer { width: 100%; margin: .4rem 0; }
.vplayer .vp-frame { position: relative; width: 100%; background: #000 center / cover no-repeat; overflow: hidden; }
.vplayer .vp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.vplayer .vp-bar { display: flex; align-items: center; gap: 2rem; padding-top: .8rem; font-size: 2rem; line-height: 1.3; }
.vplayer button { white-space: nowrap; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
@media (hover: hover) { .vplayer button:hover, .vplayer .vp-ext:hover { text-decoration: underline; text-underline-offset: .12em; } }
.vplayer .vp-ext { text-decoration: none; padding: 0 !important; }
.vplayer .vp-sound.muted { text-decoration: line-through; text-decoration-thickness: .07em; }
/* Sound: kein Hover-Effekt, nur der Zustand (klar = an, durchgestrichen = aus) */
@media (hover: hover) {
  .vplayer .vp-sound:hover { text-decoration: none; }
  .vplayer .vp-sound.muted:hover { text-decoration: line-through; text-decoration-thickness: .07em; }
}
/* Vollbild: schwarzes Letterboxing statt Standbild im Hintergrund */
.vplayer .vp-frame:fullscreen { background: #000 !important; aspect-ratio: auto !important; width: 100%; height: 100%; }
.vplayer .vp-frame:-webkit-full-screen { background: #000 !important; aspect-ratio: auto !important; width: 100%; height: 100%; }
.vplayer .vp-frame:fullscreen::backdrop { background: #000; }
.vplayer .vp-time { white-space: nowrap; min-width: 7ch; }
.vplayer .vp-progress { flex: 1; height: 2px; background: rgba(0,0,0,.2); cursor: pointer; position: relative; }
.vplayer .vp-progress b { position: absolute; left: 0; top: -1px; bottom: -1px; width: 0; background: currentColor; }
.vplayer .vp-note { font-size: 1.4rem; opacity: .6; }
/* Hochformat: Fortschrittslinie direkt unter dem Bild, Bedienung in einer Zeile */
@media (max-width: 767px) {
  .vplayer .vp-bar { position: relative; flex-wrap: nowrap; gap: 1.4rem; padding-top: 1.4rem; font-size: 1.6rem; }
  .vplayer .vp-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; flex: none; }
  .vplayer .vp-time { min-width: 0; margin-right: auto; }
  .vplayer .vp-note { display: none; }
}
/* Touch-Geraete: Tippen geht direkt ins Video (iOS erlaubt Wiedergabe nur bei echter Beruehrung im Player) */
@media (pointer: coarse) { .vplayer .vp-frame iframe { pointer-events: auto; } }

/* Index-Link rechtsbuendig */
.index-row { height: 1.3em; margin-bottom: 1.3em; font-size: inherit; }
.index-row a { position: fixed; top: 1.4rem; right: 1.4rem; z-index: 40; text-decoration: none !important; line-height: 1.3; }
@media (hover: hover) { .index-row a:hover { text-decoration: underline !important; text-underline-offset: .12em; } }
/* Hochformat: Korn-Hintergrund so verschieben, dass das Licht rechts im Bild sitzt */
@media (orientation: portrait) { body.home #backdrop video, body.home #backdrop img { object-position: 85% 50%; } }

/* Artefakt-Vorschau: Vimeo kann hier nicht eingebettet werden */
.video-link { width: 100%; background: #111; display: flex; align-items: center; justify-content: center; }
.bodycopy .video-link a { color: #fff; font-size: 1.6rem; text-decoration: underline; }