/* insachenkunst — Komponenten: Künstlerraster, Galerie, Werkangaben */

/* --- Künstlerübersicht --------------------------------------------------
   Original: Kacheln 250px breit, drei je Reihe, 50px Abstand, 37px darunter.
   Hier als Raster, das sich auf zwei bzw. eine Spalte reduziert. */
.isk-kuenstler-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 250fr));
  column-gap: calc(50 / 850 * 100%);
  row-gap: 37px;
  margin-top: 2em;
}

.isk-kachel { min-height: 120px; }

.isk-kachel a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.isk-kachel-bild {
  float: right;
  width: 100px;
  height: 100px;
  margin-left: 12px;
  object-fit: cover;
  background: var(--isk-platzhalter);
}

.isk-kachel-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  width: 100px;
  height: 100px;
  margin-left: 12px;
  background: var(--isk-platzhalter);
  color: var(--isk-weiss);
  font: 300 13px/1 var(--isk-schrift);
  text-align: center;
}

.isk-kachel h2 {
  font: 700 var(--isk-fs-text)/var(--isk-fs-text) var(--isk-schrift);
  color: var(--isk-akzent-text);
  margin-top: 0;
}

.isk-kachel p { margin-top: .25em; line-height: 17px; }
.isk-kachel .isk-weiterlesen { font-style: italic; color: var(--isk-text); }
.isk-kachel a:hover .isk-weiterlesen { text-decoration: underline; }

@media (max-width: 899px) {
  .isk-kuenstler-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 559px) {
  .isk-kuenstler-raster { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}

/* --- Künstlerseite: Kopf ------------------------------------------------
   Original: Galerie 553px rechts, Name links auf 270px begrenzt. */
.isk-kuenstler-kopf {
  display: grid;
  grid-template-columns: minmax(0, 281fr) minmax(0, 20fr) minmax(0, 553fr);
  align-items: start;
}
.isk-kuenstler-kopf > h1 { grid-column: 1; max-width: 270px; }
.isk-kuenstler-kopf > .isk-galerie { grid-column: 3; }

@media (max-width: 899px) {
  .isk-kuenstler-kopf { display: block; }
  .isk-kuenstler-kopf > h1 { max-width: none; }
  .isk-kuenstler-kopf > .isk-galerie { margin-top: 1em; }
}

/* --- Galerie ------------------------------------------------------------ */
.isk-galerie { margin-top: 0; }

.isk-galerie-buehne {
  position: relative;
  aspect-ratio: 552 / 339;
  background: var(--isk-weiss);
  overflow: hidden;
}

.isk-galerie-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
}
.isk-galerie-bild[data-aktiv] { opacity: 1; }

.isk-galerie-knopf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .75);
  color: var(--isk-text);
  font: 500 22px/44px var(--isk-schrift);
  opacity: 0;
  transition: opacity .25s ease;
}
.isk-galerie:hover .isk-galerie-knopf,
.isk-galerie-knopf:focus-visible { opacity: 1; }
.isk-galerie-zurueck { left: 0; }
.isk-galerie-vor     { right: 0; }

.isk-galerie-angabe {
  margin-top: 8px;
  font-size: var(--isk-fs-klein);
  line-height: 1.5;
  color: var(--isk-text);
  min-height: 2.6em;
}
.isk-galerie-angabe b { font-weight: 700; }

.isk-galerie-streifen {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
}
.isk-galerie-streifen li { margin: 0; }

.isk-galerie-streifen button {
  display: block;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.isk-galerie-streifen img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
  opacity: .55;
  transition: opacity .25s ease;
}
.isk-galerie-streifen button[aria-current="true"] img,
.isk-galerie-streifen button:hover img { opacity: 1; }

@media (max-width: 559px) {
  .isk-galerie-streifen { gap: 8px; }
  .isk-galerie-streifen button, .isk-galerie-streifen img { width: 72px; height: 72px; }
}

/* --- Werkangaben unter der Galerie -------------------------------------- */
.isk-werkliste { list-style: none; margin: 1em 0 0; padding: 0; }
.isk-werkliste li { margin-top: .25em; font-size: var(--isk-fs-klein); }

/* --- Startseite --------------------------------------------------------- */
.isk-start .isk-galerie { max-width: 552px; margin-left: auto; }

/* --- Startseite: Schlagwörter links, Galerie rechts ---------------------- */
.isk-start-kopf {
  display: grid;
  grid-template-columns: minmax(0, 281fr) minmax(0, 20fr) minmax(0, 553fr);
  align-items: start;
}
.isk-start-kopf > .isk-schlagworte { grid-column: 1; }
.isk-start-kopf > .isk-galerie     { grid-column: 3; }

.isk-schlagworte {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: -8px;
}
.isk-schlagworte li {
  font: 500 var(--isk-fs-titel)/var(--isk-lh-titel) var(--isk-schrift);
  color: var(--isk-titel);
  margin: 0;
}

/* Lauftext: im Original ein scrollendes Marquee. Bewegter Text ist schwer
   zu lesen und für bewegungsempfindliche Nutzer belastend — hier ruhig gesetzt. */
.isk-ticker {
  margin-top: 3em;
  font: 700 var(--isk-fs-text)/var(--isk-zeile) var(--isk-schrift);
}
.isk-ticker a { text-decoration: underline; }

@media (max-width: 899px) {
  .isk-start-kopf { display: block; }
  .isk-schlagworte { top: 0; }
  .isk-schlagworte li { font-size: 28px; line-height: 34px; }
  .isk-start-kopf > .isk-galerie { margin-top: 1.5em; }
  .isk-start .isk-galerie { margin-left: 0; }
}

/* --- Handlungsaufforderung am Ende einer Künstlerseite ------------------- */
.isk-cta { margin-top: 2em; text-align: right; }
.isk-cta a { color: var(--isk-link); }


/* --- Team: Portrait links neben Name und Text ---------------------------
   Im Original per WordPress-Klasse "alignleft" umflossen. */
.isk-team-person { margin-top: 2.5em; }
.isk-team-person::after { content: ""; display: table; clear: both; }
.isk-team-person > figure {
  float: left;
  width: 262px;
  max-width: 40%;
  margin: 0 26px 12px 0;
}
.isk-team-person > figure img { display: block; width: 100%; }
.isk-team-person > h2 { margin-top: 0; }

@media (max-width: 559px) {
  .isk-team-person > figure { float: none; width: 100%; max-width: 240px; margin-bottom: 16px; }
}