/* Kwang-Sik Im — weiß und still: die Bilder stehen vorn, alles andere tritt zurück. Eine einzige
   Schrift (Instrument Sans), Werktitel so groß wie die Angaben darunter. Werkgruppen als Register,
   eine Wand mit allen Arbeiten im gleichen Maßstab, Werkfolge im Wechsel, Werkseiten mit Formatskizze.
   Werke stehen immer im Format, in dem sie gemalt sind: Breite aus der Bilddatei, gedeckelt durch
   Spalte und Bildschirmhöhe, nie zugeschnitten. Bewegung nur mit .bewegt und dezent. */

@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --papier: #ffffff;
  --wand: #f5f4f1;      /* warmes Galerieweiß hinter der Maßstabswand */
  --tinte: #121212;
  --grau: #666666;      /* 5,7 : 1 auf Weiß, 5,3 : 1 auf der Wand */
  --linie: #e4e4e4;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(20px, 4.5vw, 72px);
  --luft: clamp(96px, 15vh, 180px);
  --hoehe: 78vh;
  --sanft: cubic-bezier(.2, .65, .2, 1);
}
@supports (height: 1svh) { :root { --hoehe: 78svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
h1, h2, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: var(--rand); top: -60px; z-index: 20; padding: 8px 12px; background: var(--tinte); color: var(--papier); text-decoration: none; }
.sprung:focus { top: 12px; }

.daten { display: block; color: var(--grau); font-size: .875rem; font-variant-numeric: tabular-nums; }
/* Werktitel: gleiche Schrift und Größe wie die Angaben darunter, nur dunkler */
.titel { display: block; font: 400 .875rem/1.5 var(--sans); }
.titel a { display: inline-block; padding-block: 3px; text-decoration: none; }
.titel a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.auszeichnung { display: block; color: var(--grau); font-size: .875rem; }
.abschnitt { color: var(--grau); font: 500 .8125rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.abschnitt small { font-size: inherit; letter-spacing: inherit; opacity: .8; }
.abschnitt small::before { content: "· "; }

/* ---------------------------------------------------------------- Kopf */
.kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; padding: clamp(20px, 3.4vw, 40px) var(--rand) 0; }
.marke { font: 400 .95rem/1.55 var(--sans); }
.marke a { display: inline-block; padding-block: 6px; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 36px; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.nav a { display: inline-block; padding-block: 6px; font-size: .95rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size .35s var(--sanft), color .2s; }
.nav-neben a { color: var(--grau); }
.nav a:hover, .nav a[aria-current] { color: var(--tinte); background-size: 100% 1px; }
.sprache a { min-width: 28px; text-align: center; letter-spacing: .04em; }

.fortschritt { display: none; }
.js .fortschritt { display: block; position: fixed; inset: 0 0 auto; z-index: 10; height: 2px; pointer-events: none; }
.fortschritt i { display: block; height: 100%; background: var(--tinte); transform: scaleX(0); transform-origin: 0 50%; }

main { padding-inline: var(--rand); container-type: inline-size; }

.krumen ol { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--grau); font-size: .875rem; }
.krumen li + li::before { content: "/"; margin-right: 8px; opacity: .7; }
.krumen a { display: inline-block; padding-block: 3px; text-decoration: none; }
.krumen a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Startseite */
.auftakt { padding-top: clamp(40px, 8vh, 96px); }
.auftakt-bild { container-type: inline-size; }
.auftakt-bild a { display: block; width: fit-content; max-width: 100%; }
.auftakt-bild img { width: auto; height: auto; max-width: 100%; width: min(calc(var(--b) * 1.35), 100cqw, calc(74vh * var(--r))); }
.auftakt-bild figcaption { margin-top: 12px; }

.gruppen { margin-top: var(--luft); }
.gruppe { padding-block: 26px 38px; }
.gruppe + .gruppe { border-top: 1px solid var(--linie); }
/* Die Gruppen haben weder Namen noch Nummern: Anzahl, Zeitraum, Technik und die Bilder selbst */
.gruppe-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 28px; text-decoration: none; }
.gruppe-kopf .pfeil { font-size: 1rem; transition: transform .4s var(--sanft); }
.gruppe-kopf:hover .pfeil { transform: translateX(6px); }
.gruppe-kopf:hover .daten { color: var(--tinte); }
.streifen { position: relative; display: flex; align-items: flex-end; gap: 14px; margin-top: 18px; overflow-x: auto; scrollbar-width: thin; }
.streifen li { flex: none; }
.streifen a { display: block; text-decoration: none; transition: opacity .3s; }
.streifen a:hover { opacity: .78; }
.streifen img { width: auto; height: clamp(72px, 7.4vw, 116px); }
.streifen-rest a { display: grid; place-items: center; min-width: 76px; height: clamp(72px, 7.4vw, 116px); border: 1px solid var(--linie); font-size: 1rem; }

.liste-dl .zeile { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 2px 24px; padding-block: 12px; border-top: 1px solid var(--linie); }
.liste-dl .zeile:first-child { border-top: 0; padding-top: 0; }
.liste-dl dt { color: var(--grau); font-variant-numeric: tabular-nums; }
.liste-dl dd { grid-column: 2; }
.kontakt-band { margin-top: var(--luft); padding-top: 18px; border-top: 1px solid var(--linie); }
.kontakt-klein { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.kontakt-klein a { display: inline-block; padding-block: 3px; color: var(--grau); font-size: .875rem; text-decoration: none; overflow-wrap: anywhere; }
.kontakt-klein a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Werkgruppe */
.gruppe-seitenkopf { padding-block: clamp(28px, 5vh, 60px) clamp(32px, 6vh, 64px); }
.gruppe-seitenkopf h1 { margin-top: 18px; font: 400 1.25rem/1.3 var(--sans); }
.gruppe-seitenkopf .daten { margin-top: 14px; font-size: .95rem; }
/* Wechsel zwischen den Gruppen über je ein Bild; das der aktuellen Gruppe ist gerahmt */
.gruppen-bilder ol { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.gruppen-bilder a { display: block; padding: 3px; border: 1px solid transparent; transition: border-color .25s; }
.gruppen-bilder img { width: auto; height: clamp(56px, 6vw, 80px); opacity: .55; transition: opacity .25s; }
.gruppen-bilder a:hover img, .gruppen-bilder a[aria-current] img { opacity: 1; }
.gruppen-bilder a[aria-current] { border-color: var(--tinte); }

.wand { margin-top: clamp(24px, 4vh, 48px); margin-inline: calc(var(--rand) * -1); padding: clamp(28px, 4vw, 56px) var(--rand) clamp(36px, 5vw, 64px); background: var(--wand); }
.wand-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.wand-info { min-height: 1.5em; font-size: .875rem; }
.wand-reihe { --f: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(16px, 2.4vw, 34px) clamp(14px, 2vw, 30px); margin-top: clamp(26px, 4vw, 48px); }
.wand-reihe a { display: block; }
.wand-reihe img { width: max(24px, calc(var(--wcm) * var(--s) * var(--f))); height: auto; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 10px 22px rgba(0, 0, 0, .08); }
.bewegt .wand-reihe img { transition: transform .45s var(--sanft), box-shadow .45s var(--sanft); }
.bewegt .wand-reihe a:hover img, .bewegt .wand-reihe a:focus-visible img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 16px 30px rgba(0, 0, 0, .12); }

.folge { margin-top: var(--luft); }
.station { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 48px); align-items: end; scroll-margin-top: 40px; }
.station + .station { margin-top: clamp(96px, 18vh, 200px); }
.station-bild { container-type: inline-size; display: flex; }
.station.links .station-bild { grid-column: 1 / span 8; }
.station.links .station-text { grid-column: 9 / span 4; }
.station.rechts .station-bild { grid-column: 5 / span 8; grid-row: 1; justify-content: flex-end; }
.station.rechts .station-text { grid-column: 1 / span 4; grid-row: 1; }
.station-bild img { width: auto; height: auto; max-width: 100%; width: min(calc(var(--b) * 1.25), 100cqw, calc(var(--hoehe) * var(--r))); }
.station-text .daten { margin-top: 0; }

.weiter { margin-top: var(--luft); padding-top: 24px; border-top: 1px solid var(--linie); }
.weiter ul { display: flex; flex-wrap: wrap; gap: 8px 56px; }
.weiter a { display: inline-flex; align-items: center; gap: 16px; padding-block: 4px; text-decoration: none; }
.weiter img { width: auto; height: 72px; }
.weiter .daten::after { content: " →"; }
.weiter a:hover .daten { color: var(--tinte); }

/* ---------------------------------------------------------------- Werkseite */
.werk-seite .krumen { padding-top: clamp(28px, 5vh, 60px); }
.werk-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 72px); align-items: start; margin-top: clamp(28px, 5vh, 56px); }
.werk-gross { grid-column: 1 / span 8; container-type: inline-size; }
.werk-gross img { width: auto; height: auto; max-width: 100%; width: min(calc(var(--b) * 1.35), 100cqw, calc(80vh * var(--r))); }
.werk-angaben { grid-column: 9 / span 4; }
.werk-angaben h1.titel { font-size: 1rem; }
.angaben { margin-top: 26px; }
.angaben div { padding-block: 11px; border-top: 1px solid var(--linie); }
.angaben dt { color: var(--grau); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.angaben dd { margin-top: 2px; }
.angaben a { display: inline-block; padding-block: 2px; text-underline-offset: 3px; }
.format { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linie); }
.skizze { display: block; max-width: 100%; height: auto; overflow: visible; }
.sk-werk { fill: #efede8; stroke: var(--tinte); stroke-width: 1; }
.sk-meter { fill: none; stroke: var(--tinte); stroke-width: 1; }
.sk-text { fill: var(--grau); font: 12px var(--sans); }
.format figcaption { margin-top: 8px; }

.blaettern { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px 28px; margin-top: var(--luft); padding-top: 24px; border-top: 1px solid var(--linie); }
.blatt { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.blatt img { width: auto; height: 76px; }
.blatt.nach { justify-self: end; flex-direction: row-reverse; text-align: right; }
.blatt .daten { font-size: .8125rem; }
.blatt:hover .titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.alle { display: inline-block; padding-block: 6px; font-size: .95rem; text-decoration: none; }
.alle:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- Biografie, Presse, Kontakt */
.bio-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 72px); align-items: start; }
.bio-bild { grid-column: 1 / span 4; position: sticky; top: 32px; container-type: inline-size; }
.bio-bild img { width: auto; height: auto; max-width: 100%; width: min(calc(var(--b) * 1.2), 100cqw); }
.bio-bild figcaption { margin-top: 12px; }
.bio-raster > div { grid-column: 6 / span 7; }
.liste + .liste { margin-top: clamp(56px, 9vh, 96px); }
.liste .abschnitt { margin-bottom: 18px; }
.legende { margin-top: 18px; color: var(--grau); font-size: .875rem; }

.presse-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 8vh, 96px) clamp(28px, 4vw, 72px); align-items: start; }
.presse { scroll-margin-top: 40px; }
.presse-scan { display: block; container-type: inline-size; }
.presse-scan img { width: auto; height: auto; max-width: 100%; width: min(var(--b), 100cqw); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 24px rgba(0, 0, 0, .07); }
.presse-text { margin-top: 20px; }
.thema { color: var(--grau); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.schlagzeile { display: block; margin-top: 8px; font: 500 1rem/1.4 var(--sans); }
.unterzeile { margin-top: 2px; font-size: .9375rem; }
.presse .daten { margin-top: 8px; }
.presse .daten a { display: inline-block; padding-block: 3px; text-underline-offset: 3px; }

.kontakt-dl { max-width: 560px; }
.kontakt-dl div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 2px 24px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--linie); }
.kontakt-dl dt { color: var(--grau); }
.kontakt-dl dd { overflow-wrap: anywhere; }
.kontakt-dl a { text-decoration: none; }
.kontakt-dl a { display: inline-block; padding-block: 2px; }
.kontakt-dl a:hover { text-decoration: underline; text-underline-offset: 3px; }

.recht { max-width: 720px; }
.recht section { margin-top: 28px; }
.recht h2 { margin-bottom: 6px; font-size: 1rem; font-weight: 600; }
.recht a { display: inline-block; text-underline-offset: 3px; }
.hinweis { padding: 14px 16px; border: 1px solid #d9d9d9; background: #fafafa; font-size: .9375rem; }
.recht > p + p, .recht > .hinweis + p { margin-top: 16px; }
.fehlt { padding: 1px 6px; border: 1px dashed #b5852b; background: #fff6e0; color: #6b4a00; }

/* ---------------------------------------------------------------- Fuß */
.fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 40px; align-items: baseline; margin-top: var(--luft); padding: 26px var(--rand) clamp(28px, 4vw, 44px); border-top: 1px solid var(--linie); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fuss-links a { display: inline-block; padding-block: 4px; font-size: .9375rem; text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss-recht { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--grau); font-size: .875rem; }
.fuss-recht a { display: inline-block; padding-block: 3px; text-decoration: none; }
.fuss-recht a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Bewegung, nur wenn erlaubt */
.js.bewegt :is(.auftakt-bild, .wand-reihe li, .station-bild, .werk-gross, .presse-scan, .bio-bild, .streifen li) img {
  opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--sanft), transform 1.1s var(--sanft); }
/* gleiche :is()-Liste, damit die Spezifität die Ausgangsregel sicher schlägt */
.js.bewegt :is(.auftakt-bild, .wand-reihe li, .station-bild, .werk-gross, .presse-scan, .bio-bild, .streifen li).da img { opacity: 1; transform: none; }
.js.bewegt .wand-reihe .da a:hover img, .js.bewegt .wand-reihe .da a:focus-visible img { transform: translateY(-4px); }

/* ---------------------------------------------------------------- Schmal */
@media (max-width: 900px) {
  .station { grid-template-columns: minmax(0, 1fr); }
  .station.links .station-bild, .station.rechts .station-bild, .station.links .station-text, .station.rechts .station-text { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .werk-raster, .bio-raster { grid-template-columns: minmax(0, 1fr); }
  .werk-gross, .werk-angaben, .bio-raster > div { grid-column: 1; }
  .bio-bild { grid-column: 1; position: static; max-width: 260px; }
  .presse-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nav { gap: 0 26px; }
  .nav ul { gap: 0 16px; }
  .weiter a { flex-direction: column; align-items: flex-start; gap: 8px; }
  .streifen { flex-wrap: nowrap; overflow-x: auto; padding: 0 0 8px; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scroll-snap-type: x proximity; }
  .streifen li { flex: none; scroll-snap-align: start; }
  .streifen img, .streifen-rest a { height: 96px; }
  .wand-reihe { --f: .5; }
  .liste-dl .zeile, .kontakt-dl div { grid-template-columns: minmax(0, 1fr); }
  .liste-dl dd { grid-column: 1; }
  .blaettern { grid-template-columns: minmax(0, 1fr); }
  .blatt.nach { justify-self: start; flex-direction: row; text-align: left; }
  .alle { order: 3; }
  .fuss { grid-template-columns: minmax(0, 1fr); }
}