/* ==========================================================================
   LIA'S KITCHEN – nur /impressionen/ (lädt nach css/stil.css, gleiche ?v=)
   Galerie als «edles Raster»: Reihen gleicher Höhe, jedes Foto in seinem eigenen Format
   (3:2, 4:5, 1:1, 16:9, 3:4, 2:3, 5:4). Die Reihenfolge bleibt die des HTML (Lesereihenfolge =
   Reihenfolge in der grossen Ansicht, VORLAGE §5). Ohne Skript: alles sichtbar, ein Klick öffnet das Foto.

   Wie die Reihen entstehen: Jedes Foto wächst im Verhältnis seines Formats (flex-grow ∝ Breite/Höhe,
   flex-basis = Format × Zeilenhöhe). So sind alle Fotos einer Reihe gleich hoch und die Reihe
   genau so breit wie die Seite. Die letzte Reihe wird nicht aufgeblasen (Füller am Ende).

   Bewegung (README «Bewegung»): nur transform und opacity; Einblenden beim Hereinscrollen über
   js/seite.js («zeigen», [data-zeigen="foto"]) – die erste Reihe steht beim Laden ohne Scrollen
   im Bild und erscheint sofort. Bei «Bewegung reduzieren» steht alles still.
   ========================================================================== */

/* --- Seiten-Kopf --- */

.galerie-kopf .einleitung { max-width: 32em; }

/* --- Raster --- */

.galerie.galerie-frei {
  --zeile: 132px;            /* Zielhöhe einer Reihe (wird beim Ausrichten etwas höher) */
  display: flex; flex-wrap: wrap; gap: 8px;
}

.galerie-frei > li {
  position: relative; flex: 100 1 calc(var(--ar) * var(--zeile)); min-width: 0; min-height: 0; aspect-ratio: var(--ar);
}

/* Formate: --ar = Breite / Höhe, flex-grow = 100 × --ar (ganze Zahlen, ohne calc für ältere Safari) */
.galerie-frei > .f-32  { --ar: 1.5;    flex-grow: 150; }
.galerie-frei > .f-45  { --ar: .8;     flex-grow: 80; }
.galerie-frei > .f-11  { --ar: 1;      flex-grow: 100; }
.galerie-frei > .f-169 { --ar: 1.7778; flex-grow: 178; }
.galerie-frei > .f-34  { --ar: .75;    flex-grow: 75; }
.galerie-frei > .f-23  { --ar: .6667;  flex-grow: 67; }
.galerie-frei > .f-54  { --ar: 1.25;   flex-grow: 125; }

/* Füller: die letzte Reihe behält ihre Zielhöhe statt riesig zu werden */
.galerie-frei::after { content: ""; flex: 10000 1 0px; }
/* Ist die letzte Reihe fast voll (js/lightbox.js, Lia 16.10.2026), streckt sie sich auf die ganze Breite: keine leere Fläche */
.galerie-frei.schluss-voll::after { display: none; }

/* Rundung über overflow (css/stil.css, nicht clip-path am Link): so bleibt der Fokusrahmen sichtbar */
.galerie-frei a {
  height: 100%; overflow: hidden; border-radius: 14px;
  transition: transform 700ms var(--aus);
}

.galerie-frei picture { height: 100%; clip-path: inset(0 round 14px); }
.galerie-frei img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

/* Überfahren: Foto hebt sich leicht, das Bild zieht heran (css/stil.css), ein runder Knopf «+» erscheint */
.galerie-frei a::before {
  content: ""; position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 44px; height: 44px;
  border: 1px solid var(--linie-gold); border-radius: 50%;
  background:
    linear-gradient(var(--gold-hell), var(--gold-hell)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--gold-hell), var(--gold-hell)) center / 1.5px 14px no-repeat,
    rgba(27,24,20,.74);
  opacity: 0; transform: translate3d(0, 6px, 0) scale(.9); pointer-events: none;
  transition: opacity 400ms ease, transform 600ms var(--aus);
}

.galerie-frei a:focus-visible::before { opacity: 1; transform: none; }

@media (hover: hover) {
  .galerie-frei a:hover::before { opacity: 1; transform: none; }
  .galerie-frei a:hover { transform: translate3d(0, -4px, 0); }
}

/* Videos in der Galerie (Lia 16.10.2026): stumme Kachel wie ein Foto, spielt nur im Bild (js/seite.js «clip», nie bei
   «Bewegung reduzieren»), oben links ein rundes Zeichen mit Play-Dreieck im Stil des «+» der Fotos */
.galerie-video .video-kachel { position: relative; height: 100%; overflow: hidden; border-radius: 14px; background: #1b1814; }
.galerie-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-zeichen {
  position: absolute; left: 10px; top: 10px; z-index: 2; width: 34px; height: 34px;
  border: 1px solid var(--linie-gold); border-radius: 50%; background: rgba(27,24,20,.74); pointer-events: none;
}
.video-zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--gold-hell);
}
@media (min-width: 900px) {
  .galerie-video .video-kachel { border-radius: 20px; }
  .video-zeichen { left: 14px; top: 14px; width: 38px; height: 38px; }
}

/* Platzhalter unter der Galerie (nur Testadresse) */
.galerie-offen { margin-top: 20px; }

/* Handy (unter 600 px): zwei ruhige Spalten mit quadratischen Fotos – die Reihenfolge bleibt, die grosse Ansicht
   zeigt jedes Foto ganz. Ab 600 px wieder Reihen in den eigenen Formaten. */
@media (max-width: 599px) {
  .galerie.galerie-frei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .galerie-frei > li { aspect-ratio: 1 / 1; }
  .galerie-frei::after { display: none; }
  /* ungerade Anzahl: das letzte Foto geht über beide Spalten, damit unten keine leere Fläche bleibt (Lia 16.10.2026) */
  .galerie-frei > li:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

@media (min-width: 600px) {
  .galerie.galerie-frei { --zeile: 200px; gap: 12px; }
}

@media (min-width: 900px) {
  .galerie.galerie-frei { --zeile: 290px; gap: 16px; }
  .galerie-frei a { border-radius: 20px; }
  .galerie-frei picture { clip-path: inset(0 round 20px); }
  .galerie-frei a::before { right: 14px; bottom: 14px; }
}

@media (min-width: 1200px) {
  .galerie.galerie-frei { --zeile: 320px; }
}

/* --- Einblenden: Foto steigt ruhig auf, das Bild setzt sich (versetzt innerhalb einer Viererreihe) --- */

@media (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] .galerie-frei [data-zeigen="foto"] {
    transition: opacity 900ms var(--aus) var(--verz, 0ms), transform 1100ms var(--aus) var(--verz, 0ms);
  }

  html[data-zeigen-an] .galerie-frei [data-zeigen="foto"]:not(.ist-da) { opacity: 0; transform: translate3d(0, 28px, 0); }
  html[data-zeigen-an] .galerie-frei [data-zeigen="foto"]:not(.ist-da) img { transform: scale(1.08); }
  html[data-zeigen-an] .galerie-frei [data-zeigen="foto"] img { transition: transform 1600ms var(--aus); } /* ohne Versatz: Überfahren reagiert sofort */
  .galerie-frei > :nth-child(4n+2) { --verz: 90ms; }
  .galerie-frei > :nth-child(4n+3) { --verz: 180ms; }
  .galerie-frei > :nth-child(4n+4) { --verz: 270ms; }
}

@media (prefers-reduced-motion: reduce) {
  .galerie-frei a, .galerie-frei a::before { transform: none; }

  @media (hover: hover) {
    .galerie-frei a:hover { transform: none; }
  }
}

@media print {
  .galerie-frei a::before { display: none; }
}

/* --- Aufruf am Ende: Satz mittig unter dem Titel (Regel seit 14.10.2026 in css/stil.css «Aufruf», gilt auch für
       /angebot/) --- */