/* ==========================================================================
   components.css — Hero, Werkraster, Werkkarte, Lightbox, Vita, Formulare
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Kein Bildhintergrund, kein Overlay-Text: Der Name steht für sich,
   die Arbeit folgt darunter.                                               */

.hero {
  padding-block: clamp(var(--space-2xl), 14vh, var(--space-4xl)) var(--space-xl);
}

/* Kopf der Startseite: Text und Arbeit nebeneinander, beides über der Falz.
   Der obere Abstand ist bewusst kleiner als beim reinen Textkopf — das Bild
   soll ohne Scrollen vollständig zu sehen sein. */
.hero--split {
  padding-block: clamp(var(--space-l), 6vh, var(--space-2xl)) var(--space-xl);
  display: grid;
  gap: var(--space-l) var(--gutter);
  align-items: center;
}

@media (min-width: 900px) {
  .hero--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-xl);
  }
}

.hero__figure { margin: 0; position: relative; }

/* Nicht beschneiden: Die Arbeiten bringen eigene Ränder und Hintergrundfarben
   mit. Die Höhe wird begrenzt, damit das Bild in den ersten Bildschirm passt. */
.hero__figure img {
  width: auto;
  max-width: 100%;
  max-height: min(62svh, 640px);
  height: auto;
}

.hero__figure figcaption {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}
.hero__figure-year { color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.hero__figure a { display: block; }
.hero__figure a:hover .hero__figure-title { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

@media (max-width: 899px) {
  /* Auf dem Telefon rückt der Name enger zusammen, damit vom Bild noch etwas
     über der Falz übrig bleibt. */
  .hero--split { padding-block: var(--space-m) var(--space-l); }
  .hero--split .hero__name { font-size: var(--step-6); }
  .hero--split .hero__claim { margin-top: var(--space-s); }
  .hero--split .hero__meta { margin-top: var(--space-m); }
  .hero__figure img { max-height: 52svh; }
}

.hero__name {
  font-size: var(--step-7);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.hero__name em {
  font-style: normal;
  font-weight: 500;
  display: block;
}

/* Der Name auf der Startseite folgt der Wortmarke im Kopf: eine Zeile,
   Versalien, gesperrt — und deutlich kleiner als eine Schlagzeile. */
.hero__name--mark {
  font-size: var(--step-5);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
  white-space: nowrap;
}
.hero__name--mark em {
  display: inline;
  font-weight: 300;
}

@media (max-width: 520px) {
  .hero__name--mark { font-size: var(--step-4); letter-spacing: 0.05em; }
}

.hero__claim {
  margin-top: var(--space-m);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--c-ink-muted);
}

.hero__meta {
  margin-top: var(--space-l);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
}
.hero__meta li { list-style: none; }
.hero__meta li + li::before { content: "·"; margin-inline-end: var(--space-s); color: var(--c-rule); }

/* Auf schmalen Schirmen untereinander — ein Trennpunkt am Zeilenanfang
   sähe aus wie ein Fehler. */
@media (max-width: 640px) {
  .hero__meta { display: grid; gap: var(--space-3xs); }
  .hero__meta li + li::before { content: none; }
}

/* --- Zitatblock (Leitsatz aus dem Statement) ------------------------------ */

.credo {
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--space-xl);
  text-align: center;
}
.credo p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  max-width: 24ch;
  margin-inline: auto;
}
.credo p span { display: block; }
.credo p span + span { color: var(--c-ink-muted); }
.credo p span + span + span { color: var(--c-ink-faint); }

/* --- Fragment-Raster ------------------------------------------------------
   12 Spalten. Karten belegen unterschiedlich viele davon und sitzen
   optional vertikal versetzt — Schichtung statt Schema.
   Bilder werden nie beschnitten: Höhe folgt dem Seitenverhältnis.          */

.grid-works {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(var(--space-m), 4vw, var(--space-2xl)) var(--gutter);
  align-items: start;
}

.work-card { grid-column: span 12; }

@media (min-width: 700px) {
  .work-card[data-span="4"]  { grid-column: span 4; }
  .work-card[data-span="5"]  { grid-column: span 5; }
  .work-card[data-span="6"]  { grid-column: span 6; }
  .work-card[data-span="7"]  { grid-column: span 7; }
  .work-card[data-span="8"]  { grid-column: span 8; }
  .work-card[data-span="12"] { grid-column: span 12; }
  .work-card[data-offset="true"] { margin-top: var(--space-3xl); }
}

.work-card__media {
  background: var(--c-bg-sunken);
  overflow: hidden;
}
.work-card__media img {
  width: 100%;
  height: auto;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.work-card:hover .work-card__media img,
.work-card:focus-within .work-card__media img { transform: scale(1.012); }

.work-card__caption {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}
.work-card a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.work-card { position: relative; }

.work-card__meta,
.meta-line {
  font-size: var(--step--1);
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Bereichs-Einstiege (Malerei · Film · Installation) ------------------- */

.domains {
  display: grid;
  gap: var(--space-l) var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border-top: 1px solid var(--c-rule);
}

.domain {
  position: relative;
  padding-top: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 190px;
}
.domain__index {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wider);
  color: var(--c-ink-faint);
}
.domain__title {
  font-size: var(--step-3);
  font-weight: 300;
  transition: transform var(--dur) var(--ease);
}
.domain:hover .domain__title { transform: translateX(0.35rem); }
.domain__desc { font-size: var(--step--1); color: var(--c-ink-muted); max-width: 32ch; }
.domain__count { margin-top: auto; font-family: var(--font-display); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-ink-faint); }
.domain a::after { content: ""; position: absolute; inset: 0; }

/* --- Werkdetail ----------------------------------------------------------- */

.work-head { padding-block: var(--space-2xl) var(--space-l); }
.work-head h1 { font-size: var(--step-6); font-weight: 300; }

.work-facts {
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  max-width: 46ch;
}
.work-facts div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-s);
  padding-block: var(--space-3xs);
  border-bottom: 1px solid var(--c-rule);
}
.work-facts dt {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.work-plates { display: grid; gap: var(--space-2xl); margin-top: var(--space-xl); }
.work-plate { margin-inline: auto; width: 100%; }
.work-plate img {
  /* Hochformate sollen in den Schirm passen, statt ihn zu sprengen. */
  width: auto;
  max-width: 100%;
  max-height: 86svh;
  height: auto;
  margin-inline: auto;
  cursor: zoom-in;
}
.work-plate figcaption { margin-top: var(--space-2xs); font-size: var(--step--2); color: var(--c-ink-faint); }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100svh;
  width: 100%;
  height: 100%;
  background: var(--c-bg);
  color: var(--c-ink);
}
.lightbox::backdrop { background: var(--c-bg); }
.lightbox__stage {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-s) var(--gutter) var(--space-m);
  gap: var(--space-s);
}
.lightbox__fig {
  display: grid;
  place-items: center;
  min-height: 0;
}
.lightbox__fig img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}
.lightbox__bar button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding: var(--space-3xs) var(--space-2xs);
}
.lightbox__bar button:hover { color: var(--c-ink); }
.lightbox__nav { display: flex; gap: var(--space-s); }

/* --- Vita ----------------------------------------------------------------- */

.cv-list { list-style: none; padding: 0; display: grid; }
.cv-item {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--c-rule);
}
@media (min-width: 700px) {
  .cv-item { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 0.7fr); align-items: baseline; }
}
.cv-item__year {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}
.cv-item__title { font-size: var(--step-0); }
.cv-item__place { font-size: var(--step--1); color: var(--c-ink-muted); }
.cv-item__note { font-size: var(--step--1); color: var(--c-ink-faint); grid-column: 1 / -1; max-width: var(--measure); }
@media (min-width: 700px) { .cv-item__note { grid-column: 2 / -1; } }

/* --- Hinweis auf fehlende Angaben -----------------------------------------
   Bewusst unauffällig, solange Catori Bela die Inhalte selbst durchgeht:
   kein gelber Kasten mehr, nur stiller Text in der Grundschrift. Sobald ein
   Feld ausgefüllt wird, verschwindet diese Stelle ohnehin von selbst — die
   Regel muss dafür nicht zurückgestellt werden. */

.todo {
  color: var(--c-ink-faint);
  font-style: italic;
}

/* --- Kontakt -------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--space-xl) var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.contact-item h2 {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: var(--space-2xs);
}
.contact-item a { font-size: var(--step-1); }

/* --- Einblenden beim Scrollen --------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Nachträge: Platzhalter, Seitenwechsel, Rechtstexte ------------------- */

.work-card__placeholder {
  display: grid;
  place-items: center;
  background: var(--c-bg-sunken);
  border: 1px dashed var(--c-rule);
  aspect-ratio: 4 / 3;
  padding: var(--space-m);
  text-align: center;
}

.work-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-rule);
  font-size: var(--step--1);
}

.more-line { margin-top: var(--space-l); font-size: var(--step--1); }

.plain-list { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); font-size: var(--step--1); }
.plain-list li { padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--c-rule); }

.legal-note {
  background: var(--c-bg-sunken);
  border-left: 2px solid var(--c-rule-strong);
  padding: var(--space-s);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}

.work-facts dd { margin: 0; }

.todo-line { margin-bottom: var(--space-2xs); }


/* Zitat am Ende des Statements */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-l) !important;
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-rule);
  max-width: 34ch;
}

/* --- Bewegte Arbeit im Kopf der Startseite -------------------------------- */

.hero__figure--video { position: relative; }

.hero__video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(62svh, 640px);
}

/* Der Knopf liegt über dem Bild, hält sich aber zurück, bis man ihn sucht. */
.video-toggle {
  position: absolute;
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  z-index: 2;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.45em 0.9em;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.hero__figure--video:hover .video-toggle,
.video-toggle:focus-visible { opacity: 1; }
.video-toggle:hover { background: rgba(0, 0, 0, 0.62); }

/* Ohne Zeigegerät gibt es kein Überfahren — dann ist der Knopf immer da. */
@media (hover: none) {
  .video-toggle { opacity: 1; }
}

/* --- Porträt: Schwarzweiß, Farbe auf Berührung ---------------------------- */

.portrait {
  position: relative;
  margin: 0;
  max-width: 420px;
  cursor: pointer;
}
.portrait img {
  width: 100%;
  height: auto;
  display: block;
}
.portrait__colour {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms var(--ease);
}
.portrait:hover .portrait__colour,
.portrait:focus-within .portrait__colour,
.portrait[data-colour="true"] .portrait__colour { opacity: 1; }

.portrait__hint {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  transition: opacity var(--dur) var(--ease);
}
.portrait[data-colour="true"] + .portrait__hint { opacity: 0; }

/* Der unsichtbare Knopf macht das Porträt mit der Tastatur bedienbar. */
.portrait__button {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .portrait__colour { transition: none; }
}

/* --- Film: Stills als Einzelbild-Folge ------------------------------------ */

.stills {
  position: relative;
  margin-top: var(--space-xl);
}
.stills__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.stills__frame:first-child { position: relative; }
.stills__frame[data-current="true"] { opacity: 1; }
.stills__frame img { width: 100%; height: auto; }

.stills__bar {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.stills__bar button {
  border: 0;
  background: none;
  padding: 0.2em 0;
  cursor: pointer;
  font: inherit;
  color: var(--c-ink-muted);
}
.stills__bar button:hover { color: var(--c-ink); }

/* Fortschritt als schmale Reihe von Strichen, einer je Standbild. */
.stills__ticks { display: flex; gap: 5px; margin-inline-start: auto; }
.stills__tick {
  width: 22px;
  height: 2px;
  background: var(--c-rule);
  transition: background var(--dur) var(--ease);
}
.stills__tick[data-current="true"] { background: var(--c-ink); }

/* Nur das sichtbare Standbild nimmt Klicks an — sonst öffnete die Lightbox
   ein Bild, das gar nicht zu sehen ist. */
.stills__frame { pointer-events: none; }
.stills__frame[data-current="true"] { pointer-events: auto; }

/* --- Video auf einer Werkseite -------------------------------------------- */

.work-video {
  position: relative;
  margin: var(--space-xl) 0 0;
}
.work-video__el {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 82svh;
}
.work-video figcaption { margin-top: var(--space-2xs); }

/* --- Film: alle Arbeiten gleich breit, zentriert, gestapelt ---------------
   Statt des unregelmäßigen Rasters eine einzige, ruhige Spalte — passend zu
   einer Filmografie, die zeitlich (nicht kompositorisch) geordnet ist. */
.grid-works--stack {
  display: block;
  max-width: 900px;
  margin-inline: auto;
}
.grid-works--stack .work-card {
  margin-inline: auto;
}
.grid-works--stack .work-card + .work-card {
  margin-top: var(--space-2xl);
}