/* ── Baustellengalerie ──────────────────────────────────────────────────────
   Werte aus dem Theme übernommen: Flächenton #AEA69B, Abstände 30px,
   Inhaltsbreite 1364px, border-radius 0. Schriften erbt der Block vom Theme. */
/* KEIN eigener Hintergrund: der Block soll den Seitenton uebernehmen, nicht ueberdecken.
   In der Vorschau stand hier Weiss (dort gab es keine Seite drumherum). Live wirkte der
   Block dadurch wie ein eingesetztes Rechteck auf dem warmen Grau der Seite — "sieht aus
   wie ein iframe" (Mathias, 31.08.2026). Die Theme-Bausteine daneben sind ebenfalls
   transparent; so fuegt sich die Galerie ein. */
/* ⚠️ Doppelte Klasse im Selektor ist ABSICHT, nicht Schludrigkeit:
   Das Theme setzt `.custom-part { background: #fff }`. Unser Block traegt diese Klasse
   (Theme-Konvention) und erbt damit den weissen Grund — auf der grauen Seite wirkte er
   dadurch wie ein eingesetztes Rechteck ("sieht aus wie ein iframe", Mathias 31.08.2026).
   `.custom-part.baustellen-part` hat hoehere Spezifitaet und gewinnt unabhaengig davon,
   in welcher Reihenfolge die Stylesheets geladen werden. */
.custom-part.baustellen-part { background: transparent; }

/* Abstand nach oben: 117px ist der Wert, den das Theme zwischen seinen eigenen Bausteinen
   verwendet (aus style.css uebernommen, nicht geschaetzt). Ohne ihn stiess die Galerie
   direkt an den dunklen Balken des Karussells (Mathias, 31.08.2026).
   Auf schmalen Bildschirmen die Haelfte — 117px waeren dort ein Loch. */
.baustellen-part { max-width: calc(1364px + 40px); margin: 117px auto 0; padding: 0 20px;
  box-sizing: border-box; }
@media (max-width: 768px) {
  .baustellen-part { margin-top: 58px; }
}
.baustellen-kopf { margin-bottom: 32px; text-align: center; }   /* zentriert, Wunsch Paul 29.08. */
.baustellen-kopf h2 { margin: 0 0 6px; }
.baustellen-sub { margin: 0 auto; font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: #AEA69B; max-width: 60ch; }

.baustellen-galerie { display: grid; gap: 30px;
  grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .baustellen-galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .baustellen-galerie { grid-template-columns: 1fr; } }

.kachel { position: relative; margin: 0; overflow: hidden; background: rgba(174,166,155,.2);
  aspect-ratio: 4 / 3;
  min-width: 0;   /* Grid-Items haben per Vorgabe min-width:auto und schrumpfen sonst nicht */
  width: 100%; box-sizing: border-box; }
.kachel img, .kachel video { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.kachel-bild:hover img { transform: scale(1.04); }

/* Datumsstempel auf den Kacheln entfernt (Paul, 29.08.2026: "weg, der stoert").
   Die zeitliche Einordnung laeuft ueber die Textkacheln, die Sortierung zeigt das Neueste oben. */

/* Textkachel: gleiche Fläche wie ein Bild, im Sandton, damit sie im Raster mitläuft */
.kachel-text { display: flex; flex-direction: column; justify-content: center;
  padding: 32px 28px; background: #AEA69B; }
.kachel-text .bau-datum { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #161615; margin: 0 0 10px; }
.kachel-text p { margin: 0; color: #161615; line-height: 1.7; font-size: 15px; }

/* ── Hochformat-Videos ──────────────────────────────────────────────────────
   Handyaufnahmen sind 9:16. In einer 4:3-Kachel schneidet object-fit:cover
   mittig — dabei fällt der Kopf aus dem Bild. Zwei Wege: */

/* A) Die Kachel wird selbst hochformatig und überspannt zwei Rasterzeilen.
      Nichts wird beschnitten, das Hochformat wirkt gewollt statt versehentlich. */
.kachel-video-hoch {
  /* Bündig über zwei Rasterzeilen. Zwei Fallstricke, beide am 28.08.2026 real getroffen:
     1) aspect-ratio: 9/16 ergäbe bei 435px Breite 773px Höhe — zwei Zeilen sind aber nur
        326+30+326 = 682px. Die Kachel stand 91px über.
     2) Danach zog das <video> mit seiner eigenen Größe (1080×1920) die Zeile auf, weil es
        im Fluss steht. Deshalb wird es absolut positioniert: so bestimmt die KACHEL die
        Größe des Videos und nicht umgekehrt. */
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
  position: relative;
}
.kachel-video-hoch video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* B) Kachel bleibt 4:3, aber der sichtbare Ausschnitt sitzt oben.
      Spart Platz, beschneidet aber weiterhin unten. */
.kachel-video-oben { aspect-ratio: 4 / 3; }
.kachel-video-oben video { object-fit: cover; object-position: center 12%; }

/* Auf schmalen Bildschirmen ist ohnehin nur eine Spalte — dort kein Zeilen-Span,
   sonst entsteht eine übergroße Lücke.
   ⚠️ ABER: Ohne den Span verliert die Kachel ihre Höhenquelle. Auf dem Desktop kommt die
   Höhe aus 'grid-row: span 2' + 'height: 100%'; 'aspect-ratio' steht dort bewusst auf auto.
   Faellt der Span weg, ist 'height: 100%' in einer automatischen Zeile undefiniert, und das
   absolut positionierte Video traegt selbst nichts bei — die Kachel fiel auf HOEHE 0 zusammen
   und das Video war auf dem Handy unsichtbar (gefunden von Mathias, 28.08.2026).
   Deshalb bekommt sie hier ihr Seitenverhaeltnis zurueck. */
@media (max-width: 600px) {
  .kachel-video-hoch { grid-row: auto; aspect-ratio: 9 / 16; height: auto; }
}

/* ⚠️ HIER LAG DER FEHLER (28.08.2026): 'grid-auto-rows: 1fr' fixierte die Zeilenhöhe
   auf 371px. aspect-ratio: 4/3 rechnete daraus die BREITE (371 × 4/3 = 495px) — mehr
   als die Spalte (434px) hergibt. Zusammen mit dem Grid-Standard 'min-width: auto'
   schrumpften die Kacheln nicht, sondern schoben sich um 31px übereinander.
   Richtig ist: Breite kommt aus der Spalte, Höhe aus dem Seitenverhältnis. */
.baustellen-galerie { align-items: start; }

/* ── Variante B: Video startet erst auf Klick ───────────────────────────────
   Alternative zum automatisch laufenden Video. Zwei Gründe, die dafür sprechen:
   Bewegtbild ohne Zutun kann als aufdringlich empfunden werden, und wer im System
   „Bewegung reduzieren" eingestellt hat, soll es gar nicht erst bekommen. */
.kachel-video-klick { position: relative; cursor: pointer; }
.kachel-video-klick video { position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover; }

.kachel-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(22,22,21,.28); border: 0; padding: 0; cursor: pointer;
  transition: background .3s ease;
}
.kachel-play:hover { background: rgba(22,22,21,.42); }
.kachel-play::before {
  content: ""; width: 0; height: 0;
  border-left: 26px solid #fff; border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  margin-left: 6px;                      /* optischer Ausgleich der Dreiecksform */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.kachel-play[hidden] { display: none; }
.kachel-play:focus-visible { outline: 2px solid #AEA69B; outline-offset: -4px; }

/* Wer Bewegung reduziert haben will, bekommt auch bei Variante A kein Autoplay */
@media (prefers-reduced-motion: reduce) {
  .kachel-video-hoch video { animation: none; }
}

/* ── Großansicht ────────────────────────────────────────────────────────────
   Eigenbau statt Plugin: keine Abhängigkeit, keine Update-Überraschungen,
   und die Optik folgt dem Theme (kantig, #161615, Roboto Mono). */
.kachel-bild, .kachel-video { cursor: zoom-in; }

.lb { position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(22,22,21,.94); }
.lb[open], .lb.auf { display: flex; align-items: center; justify-content: center; }

.lb-buehne { max-width: min(92vw, 1600px); max-height: 92vh;
  display: flex; flex-direction: column; gap: 14px; }
.lb-buehne img, .lb-buehne video { max-width: 100%; max-height: 78vh;
  width: auto; height: auto; display: block; margin: 0 auto; }

/* Hochformat-Videos in der Großansicht die Bühnenhöhe füllen lassen.
   Ohne das blieb ein 406×720-Video bei seiner nativen Größe stehen und wirkte in der
   Großansicht KLEINER als in der Kachel (Befund Mathias, 28.08.2026) — was den Sinn des
   Anklickens umkehrt. max-height greift weiterhin, es wird also nicht über die Bühne hinaus
   gedehnt. */
.lb-buehne video { height: 85vh; }   /* Hochformat: so viel Bühne wie vertretbar */
@media (max-width: 600px) { .lb-buehne video { height: auto; max-height: 72vh; } }

.lb-text { color: #fff; font-family: "Roboto Mono", monospace; font-size: 13px;
  line-height: 1.6; display: flex; justify-content: space-between; gap: 24px; }
.lb-datum { color: #AEA69B; white-space: nowrap; }

.lb-schliessen, .lb-vor, .lb-zurueck {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font-family: "Roboto Mono", monospace; line-height: 1; padding: 12px;
}
.lb-schliessen { top: 18px; right: 22px; font-size: 30px; }
.lb-zurueck { left: 12px; top: 50%; transform: translateY(-50%); font-size: 40px; }
.lb-vor      { right: 12px; top: 50%; transform: translateY(-50%); font-size: 40px; }
.lb-schliessen:hover, .lb-vor:hover, .lb-zurueck:hover { color: #AEA69B; }
.lb-schliessen:focus-visible, .lb-vor:focus-visible, .lb-zurueck:focus-visible,
.kachel:focus-visible { outline: 2px solid #AEA69B; outline-offset: 3px; }

.lb-zaehler { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #AEA69B; font-family: "Roboto Mono", monospace; font-size: 12px;
  letter-spacing: .08em; }

@media (max-width: 600px) {
  .lb-zurueck, .lb-vor { font-size: 30px; padding: 8px; }
  .lb-buehne { max-width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
  .kachel img, .kachel video { transition: none; }
}