/* ============================================================
   hero.css — Startseite Hero + "Die Künstlerin"-Teaser + Werk-Teaser
   Galerie-Raum: heller Saal, Werk als Akzent, Parallax. KEIN zentrierter
   Hero-Block-mit-2-Buttons (Anti-Template). Asymmetrisches editorial Layout.
   ============================================================ */

/* ----------------------- HERO ----------------------- */
.hero {
  position: relative;
  min-height: clamp(640px, 92vh, 920px);
  display: flex; align-items: center;
  padding-block: var(--block-y);
  background: var(--paper);
  overflow: clip;
}
.hero__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.hero__copy { position: relative; z-index: 2; }
.hero__claim {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600; letter-spacing: -.02em;
  margin-top: 1.1rem;
}
.hero__claim .accent { font-style: italic; color: var(--bordeaux); }
.hero__lead {
  margin-top: 1.6rem; color: var(--ink-600);
  font-size: var(--fs-lead); line-height: 1.62; max-width: 46ch;
}
.hero__lead + .hero__lead { margin-top: 1rem; }
.hero__sign { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.hero__sign-name {
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink-900);
}
.hero__sign-rule { flex: 1; height: 1px; background: var(--line-strong); max-width: 120px; }

/* Bild-Säule: gerahmtes Werk (Passepartout) + Parallax */
.hero__art { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 520px; }
.hero__frame { position: relative; }
.hero__frame img, .hero__frame .art-ph {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px;
}
.hero__badge {
  position: absolute; left: -1.5rem; bottom: 2rem; z-index: 3;
  padding: 1rem 1.25rem; max-width: 240px;
}
.hero__badge .eyebrow { color: var(--bordeaux); }
.hero__badge p { font-size: .9rem; color: var(--ink-600); margin-top: .4rem; }

/* dezente Gold-Faden-Deko hinter dem Werk */
.hero__halo {
  position: absolute; z-index: 0; inset: auto -8% -12% auto;
  width: 60%; height: 70%;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 72%);
  filter: blur(8px); pointer-events: none;
}

/* ----------------------- DIE KÜNSTLERIN (Teaser) ----------------------- */
.artist-teaser { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.artist-teaser__portrait { position: relative; }
.artist-teaser__portrait img, .artist-teaser__portrait .art-ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.artist-teaser__body p { color: var(--ink-600); }
.artist-teaser__body p + p { margin-top: 1rem; }
.quote {
  margin: 1.6rem 0; padding-left: 1.4rem; border-left: 2px solid var(--gold);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3; color: var(--ink-900);
}
.quote cite { display: block; margin-top: .7rem; font-style: normal; font-family: var(--font-body);
  font-size: .85rem; letter-spacing: .04em; color: var(--ink-400); text-transform: uppercase; }
.artist-teaser__mono { height: 64px; width: auto; margin: 1.4rem 0; }
.artist-teaser__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }

/* ----------------------- WERK-TEASER (3-4 ausgewählte Werke) ----------------------- */
.teaser-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
  margin-top: var(--block-y);
}
/* kuratierte, ungleiche Höhen */
.teaser-grid .work-card:nth-child(1) { grid-column: span 5; }
.teaser-grid .work-card:nth-child(2) { grid-column: span 4; margin-top: clamp(1.5rem,4vw,3.5rem); }
.teaser-grid .work-card:nth-child(3) { grid-column: span 3; }

/* ----------------------- KONTAKT-Sektion ----------------------- */
.contact { position: relative; }
.contact .section-head__lead { color: var(--on-dark-soft); }

@media (max-width: 980px) {
  .hero { min-height: auto; padding-block: var(--block-y) var(--section-y); }
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__art { order: -1; max-width: 420px; justify-self: start; }
  .hero__badge { left: 0; }
  .artist-teaser { grid-template-columns: 1fr; }
  .artist-teaser__portrait { max-width: 420px; }
  .teaser-grid .work-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
}
@media (max-width: 620px) {
  .teaser-grid .work-card:nth-child(n) { grid-column: span 12; }
  .form-row { grid-template-columns: 1fr; }
}