/* Kachel-Raster */
.kr-raster {
  --kr-spalten: 3;
  --kr-gap: 20px;
  --kr-verhaeltnis: 16 / 9;
  --kr-radius: 4px;
  --kr-overlay: rgba(22, 22, 22, .65);
  position: relative;
  margin: 0 0 1.5em;
}
.kr-mehrzeilig {
  display: grid;
  grid-template-columns: repeat(var(--kr-spalten), minmax(0, 1fr));
  gap: var(--kr-gap);
}
.kr-spur {
  display: flex;
  gap: var(--kr-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
}
.kr-spur::-webkit-scrollbar { display: none; }
.kr-spur .kr-kachel {
  flex: 0 0 calc((100% - (var(--kr-spalten) - 1) * var(--kr-gap)) / var(--kr-spalten));
  scroll-snap-align: start;
}
@media (max-width: 979px) {
  .kr-mehrzeilig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-spur .kr-kachel { flex-basis: calc((100% - var(--kr-gap)) / 2); }
}
@media (max-width: 600px) {
  .kr-mehrzeilig { grid-template-columns: 1fr; }
  .kr-spur .kr-kachel { flex-basis: 100%; }
}

.kr-kachel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--kr-radius);
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}
.kr-kachel:hover, .kr-kachel:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.kr-medien { display: block; aspect-ratio: var(--kr-verhaeltnis); overflow: hidden; background: #e9e4e6; }
.kr-medien img.kr-bild { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.kr-kachel:hover img.kr-bild { transform: scale(1.05); }

/* Stil "overlay": Titel auf dem Bild, Farbverlauf von unten (wie der frühere Skin) */
.kr-stil-overlay .kr-kachel { color: #ffffff; }
.kr-stil-overlay .kr-ohne-bild .kr-medien { background: linear-gradient(135deg, #8a2a52, #5a1632); }
.kr-stil-overlay .kr-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px 16px;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0) 35%, var(--kr-overlay) 100%);
}
.kr-stil-overlay .kr-titel { display: block; font-weight: 700; font-size: 1.1em; line-height: 1.25; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.kr-stil-overlay .kr-mehr { display: block; margin-top: 6px; font-size: .8em; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.kr-stil-overlay .kr-mehr::before { content: "+ "; }

/* Stil "karte": Titel (und Kurztext) unter dem Bild */
.kr-stil-karte .kr-text { display: block; padding: 16px 18px 18px; }
.kr-stil-karte .kr-ohne-bild .kr-medien { display: none; }
.kr-stil-karte .kr-titel { display: block; font-weight: 700; font-size: 1.05em; line-height: 1.3; color: #333333; }
.kr-stil-karte .kr-auszug { display: block; margin-top: 8px; font-size: .92em; line-height: 1.5; color: #666666; }

/* Pfeile der Zeilen-Darstellung */
.kr-pfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #741f41;
  font-size: 28px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: opacity .2s ease, background .2s ease;
}
.kr-pfeil:hover, .kr-pfeil:focus-visible { background: #ffffff; }
.kr-pfeil-links { left: -14px; }
.kr-pfeil-rechts { right: -14px; }
.kr-pfeil[disabled] { opacity: .25; cursor: default; }
.kr-zeile.kr-ohne-pfeile .kr-pfeil { display: none; }
@media (max-width: 600px) { .kr-pfeil-links { left: 4px; } .kr-pfeil-rechts { right: 4px; } }

@media (prefers-reduced-motion: reduce) {
  .kr-kachel, .kr-medien img.kr-bild, .kr-pfeil { transition: none; }
  .kr-spur { scroll-behavior: auto; }
}