/* Uebernommen aus bricks-child/style.css (Stand 28.10.2026) - CSS des Impressionen-Archivs.
   Ladeposition wie im Bestand: direkt nach dem Bricks-Frontend-CSS. */
/* ------------------------------------------------------------------
   Impressionen-Archiv (Bricks-Element "impressionen-archiv")

   Jede Kachel ist ein Jahrgang: Vorschaubild, darauf die Jahreszahl
   in der Headline-Schrift. Das neueste Jahr laeuft als Leitkachel
   ueber zwei Spalten und Zeilen.

   Spalten, Abstand und Bildformat sind im Builder ueber die
   CSS-Variablen --sk-arch-* steuerbar (inkl. Breakpoints).
   ------------------------------------------------------------------ */

.sk-impressionen-archiv {
  display: grid;
  /* Als Flex-Kind im Bricks-Container sonst shrink-to-fit -
     die 1fr-Spalten kollabieren dann auf 0. */
  width: 100%;
  grid-template-columns: repeat(var(--sk-arch-cols, 3), minmax(0, 1fr));
  gap: var(--sk-arch-gap, var(--space-s));
  grid-auto-flow: dense;
}

.sk-impressionen-archiv--featured > .sk-impressionen-archiv__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.sk-impressionen-archiv__item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--sk-arch-ratio, 4/3);
  text-decoration: none;
  color: inherit;
  background-color: var(--secondary, #222);
}

.sk-impressionen-archiv__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.sk-impressionen-archiv__image--leer {
  background: var(--secondary-light, #444);
}

/* Fuellt die Schlusszeile, wenn das Raster mit der Leitkachel
   nicht aufgeht - die Klasse setzt das Element je nach Anzahl. */
.sk-impressionen-archiv__item--breit {
  grid-column: span 2;
  aspect-ratio: auto;
}

.sk-impressionen-archiv__item--voll {
  grid-column: 1 / -1;
  aspect-ratio: 3/1;
}

/* Verlauf traegt die Jahreszahl - ohne ihn steht sie auf hellen
   Motiven (Himmel, Zeltplane) ohne Kontrast. Feste Hoehe statt
   inset:0, damit grosse Kacheln nicht flaechig abgedunkelt werden. */
.sk-impressionen-archiv__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(34, 34, 34, 0.92) 0%,
    rgba(34, 34, 34, 0.78) 25%,
    rgba(34, 34, 34, 0.42) 58%,
    rgba(34, 34, 34, 0) 100%
  );
  transition: opacity 0.4s ease;
}

.sk-impressionen-archiv--featured > .sk-impressionen-archiv__item:first-child::after {
  height: 42%;
}

.sk-impressionen-archiv__jahr {
  position: absolute;
  z-index: 1;
  right: var(--space-s);
  bottom: var(--space-xs);
  left: var(--space-s);
  margin: 0;
  color: var(--primary, #ffe6b8);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.sk-impressionen-archiv--featured > .sk-impressionen-archiv__item:first-child .sk-impressionen-archiv__jahr {
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
}

/* Zustaende */

.sk-impressionen-archiv__item:hover .sk-impressionen-archiv__image,
.sk-impressionen-archiv__item:focus-visible .sk-impressionen-archiv__image {
  transform: scale(1.05);
}

.sk-impressionen-archiv__item:hover::after,
.sk-impressionen-archiv__item:focus-visible::after {
  opacity: 0.82;
}

.sk-impressionen-archiv__item:focus-visible {
  outline: 3px solid var(--secondary, #222);
  outline-offset: 3px;
}

/* Breakpoints - Werte passen zu den Bricks-Standardbreakpoints */

@media (max-width: 991px) {
  .sk-impressionen-archiv {
    grid-template-columns: repeat(var(--sk-arch-cols, 2), minmax(0, 1fr));
  }

  /* Leitkachel steht hier allein in ihrer Zeile und braucht deshalb
     ein eigenes Format - sonst kollabiert die Zeilenhoehe. */
  .sk-impressionen-archiv--featured > .sk-impressionen-archiv__item:first-child {
    grid-row: span 1;
    aspect-ratio: 16/9;
  }

  /* Die Lueckenfueller sind fuer das dreispaltige Raster berechnet und
     wuerden hier erst eine Luecke erzeugen. */
  .sk-impressionen-archiv__item--breit,
  .sk-impressionen-archiv__item--voll {
    grid-column: span 1;
    aspect-ratio: var(--sk-arch-ratio, 4/3);
  }

  /* Zweispaltig faellt die Schlusszeile genau dann angebrochen aus,
     wenn die letzte Kachel an gerader Position steht. */
  .sk-impressionen-archiv--featured > .sk-impressionen-archiv__item:last-child:nth-child(even) {
    grid-column: span 2;
    aspect-ratio: 21/9;
  }
}

@media (max-width: 478px) {
  .sk-impressionen-archiv {
    grid-template-columns: repeat(var(--sk-arch-cols, 1), minmax(0, 1fr));
  }

  .sk-impressionen-archiv--featured > .sk-impressionen-archiv__item:first-child {
    grid-column: span 1;
    aspect-ratio: var(--sk-arch-ratio, 4/3);
  }

  /* Einspaltig gibt es keine Luecken zu fuellen. */
  .sk-impressionen-archiv__item--breit,
  .sk-impressionen-archiv__item--voll {
    grid-column: span 1;
    aspect-ratio: var(--sk-arch-ratio, 4/3);
  }

  .sk-impressionen-archiv__text {
    right: var(--space-xs);
    bottom: var(--space-xs);
    left: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-impressionen-archiv__image,
  .sk-impressionen-archiv__item::after {
    transition: none;
  }

  .sk-impressionen-archiv__item:hover .sk-impressionen-archiv__image,
  .sk-impressionen-archiv__item:focus-visible .sk-impressionen-archiv__image {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   FAQ-Seite (Post 3872) - mobiles Layout

   Der Container jeder FAQ-Kategorie (Bricks-Element "xlovjn") traegt
   die Winden-Klasse "w-3/4". Tailwind kennt hier keine Breakpoint-
   Variante davon, also gelten die 75 % auch auf dem Handy: bei 390 px
   Viewport bleiben 254 px Textbreite, rechts stehen 118 px leer. Die
   Fragen brechen dadurch drei- statt einzeilig um und stossen an den
   Chevron. Auf dem Desktop faellt es nicht auf - 75 % sind dort noch
   960 px.

   Neu kompilieren laesst sich das Winden-CSS nicht ohne den offenen
   v3/v4-Umbau (siehe CLAUDE.md), deshalb der Override hier. Die
   doppelte Klasse hebt die Spezifitaet ueber die von ".w-3\/4".
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .brxe-xlovjn.w-3\/4 {
    width: 100%;
  }
}

/* Ohne Abstand laeuft eine lange Frage bis unter den Pfeil; ohne das
   flex-shrink quetscht der Text ihn zusaetzlich schmal. */
.brxe-xlovjn .x-accordion_header {
  gap: var(--space-s, 1rem);
}

.brxe-xlovjn .x-accordion_icon {
  flex-shrink: 0;
}