/* CHARAKTER · imke-lohmann.de – eine Galerie. Eigenes Material: das Gemälde im Passepartout. */
:root { --titel-gewicht: 500; --ecke: 4px; }

h1, h2, h3 { font-weight: var(--titel-gewicht); color: var(--blaugrau-dunkel); }
h4 { font-weight: 600; color: var(--blaugrau-dunkel); }

.vorzeile { font-size: var(--stufe-klein); color: var(--dunkelgrau); margin-bottom: var(--a2); max-width: 30rem; }

h2:has(+ .unterzeile), h3:has(+ .unterzeile) { margin-bottom: var(--a1); }
.unterzeile { font-size: var(--stufe-klein); font-weight: 500; margin-top: 0; margin-bottom: var(--a3); }

.leitsatz { font-weight: 400; font-style: italic; color: var(--blaugrau-dunkel); }
blockquote { border-left: 2px solid var(--blaugrau); font-style: italic; font-weight: 400; color: var(--blaugrau-dunkel); }

/* Gemälde im Passepartout – nie beschnitten. Porträts ausgenommen. */
.zweispalter-bild:not(.portraet) img,
.bild-allein.gemaelde img,
.breitbild.gemaelde img {
  background: #fff;
  padding: clamp(.75rem, .4rem + 1.4vw, 2rem);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(41, 40, 36, .06), 0 12px 32px -12px rgba(41, 40, 36, .22);
}
.portraet img { border-radius: var(--ecke); }

.galerie { gap: var(--a5) var(--a4); }
.werk-knopf img {
  background: #fff; padding: .6rem; border-radius: 2px;
  box-shadow: 0 8px 22px -12px rgba(41, 40, 36, .3);
  transition: transform .4s var(--sanft), box-shadow .4s var(--sanft);
}
.werk-knopf:hover img,
.werk-knopf:focus-visible img { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(41, 40, 36, .38); }

.ort + .ort { margin-top: var(--a5); padding-top: var(--a5); }
.stimmen { gap: var(--a5) var(--a6); }
.tueren { font-size: var(--stufe-text); }
.knopf { border-radius: 999px; }

.fuss-leitsatz { color: #fff; margin-bottom: var(--a5); }
.fuss-block h2 { font-size: var(--stufe-klein); letter-spacing: .08em; }

/* Die Kunst-Seite: leise. Nur mit <body class="seite-kunst"> auf kunst.php. */
.seite-kunst .abschnitt { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }

/* Kein Bild höher als 22 rem (352 px), nie beschnitten. */
.seite-kunst main img { max-height: 22rem; width: auto; max-width: 100%; }

/* Passepartout nur angedeutet. */
.seite-kunst .zweispalter-bild:not(.portraet) img,
.seite-kunst .werk-knopf img { padding: .4rem; box-shadow: 0 6px 16px -12px rgba(41, 40, 36, .35); }

/* Doppelseite: der Text führt (Bild 4 : Text 6), das Bild läuft nicht mit. */
.seite-kunst .zweispalter > :not(.zweispalter-text) { flex: 4 1 0; position: static; }
.seite-kunst .zweispalter > .zweispalter-text { flex: 6 1 0; }
.seite-kunst .zweispalter-bild { display: flex; justify-content: center; }

/* Werke: eine ruhige Reihe, unten bündig, höchstens 15 rem hoch. */
.seite-kunst .galerie {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  align-items: end;
  gap: var(--a5) var(--a4);
}
.seite-kunst .werk-knopf { display: flex; justify-content: center; }
.seite-kunst .werk-knopf img { max-height: 15rem; height: auto; width: auto; }
/* Werktitel bleiben sichtbar: klein und ruhig unter dem Werk. */
.seite-kunst .werk-zeile,
.seite-kunst .schicht-zeile {
  font-size: var(--stufe-fein); line-height: 1.45; text-align: center; margin-top: var(--a1);
}
.seite-kunst .galerie .bild-fehlt { min-height: 15rem; }

.seite-kunst .schichten img { max-height: 15rem; }

.seite-kunst .breitbild,
.seite-kunst .bildpaar { max-width: var(--lesespalte); }
.seite-kunst .breitbild img { max-height: 20rem; }
.seite-kunst .bildpaar img { max-height: 16rem; }

/* Die Lupe bleibt groß. */
.seite-kunst .lupe img { max-height: 78vh; height: auto; width: 100%; padding: 0; box-shadow: none; }

@media (max-width: 900px) {
  .seite-kunst main img { max-height: 18rem; }
  .seite-kunst .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seite-kunst .werk-knopf img { max-height: 12rem; }
}