/* ==========================================================================
   Lena Labusga, Schauspielerin
   Gestaltung: Filmvorspann. Der Hero ist ein ganzseitiges Farbfoto; darüber
   liegen die Produktionen wie Titelkarten in Literata, der Name steht klein
   am unteren Rand wie ein Abspann. Die Inhaltsseiten sind warmes Papier,
   Fotos bleiben farbig. Ein warmer Ockerton als einziger Akzent.
   ========================================================================== */

@font-face {
  font-family: "Literata";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/literata-300.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/literata-400.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/literata-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/literata-500.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/literata-600.woff2") format("woff2");
}

@font-face {
  font-family: "Literata";
  font-weight: 200 900;              /* whole range available */
  font-style: normal;
  font-display: swap;
  src: url("../fonts/literata-var.ttf") format("truetype-variations");
}

:root {
  --paper:    #f4f0e9;   /* warmes Papier                       */
  --paper-2:  #ece5d9;   /* etwas tiefer, für Wechselflächen    */
  --ink:      #211d17;   /* warmes Fast-Schwarz                 */
  --muted:    #6f6555;   /* warmes Grau-Braun                   */
  --line:     rgba(33, 29, 23, 0.15);
  --accent:   #a06b34;   /* Ocker, aus dem Holzrahmen des Fotos */
  --accent-d: #855824;   /* dunkler für Hover                   */

  --display:  "Literata", Georgia, "Times New Roman", serif;
  --body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --wrap:     1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

section { scroll-margin-top: 4rem; }

/* --------------------------------------------------------------------------
   HERO: ganzseitiges Farbfoto, Titel wie ein Filmvorspann
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 28%;
}

/* Navigation oben: gesperrt, klein, ohne Balken – direkt auf dem Foto */
.hero-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
}

.hero-nav a {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s var(--ease);
}
.hero-nav a:hover { opacity: 0.65; }

/* Titelkarten in der Mitte */
.hero-titles {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem clamp(1.5rem, 6vw, 6rem);
  text-align: center;
}

.titles-line {
  font-family: var(--display);
  font-weight: 200;                       /* Literata Light, wie im Original */
  color: #fff;
  font-size: clamp(1.85rem, 2.95vw, 3.6rem);
  line-height: 1.2;                      /* eng gesetzt wie im Original */
  letter-spacing: 0.005em;
  max-width: min(1120px, 90vw);           /* breites Satzmaß, Umbruch auf ~3 Zeilen */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.38);
}

/* Titel dürfen normal umbrechen (z. B. „Der Rheinische / Cowboy") */
.titel { white-space: normal; }

.titel sup {
  font-family: var(--body);
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.08em;
  vertical-align: super;
  margin-left: 0.12em;
  opacity: 0.7;
}

.titles-line .sep {
  color: #fff;
  opacity: 0.55;
  margin: 0 0.12em;
  font-weight: 400;
}

/* Name + Bio unten, wie eine Abspann-Karte */
.hero-credit {
  text-align: center;
  padding: 1rem clamp(1.5rem, 6vw, 6rem) clamp(1.5rem, 3.5vh, 2.5rem);
  color: #fff;
}

.hero-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero-name span { margin: 0 0.4em; opacity: 0.7; }

.hero-bio {
  max-width: 62ch;
  margin: 0.3rem auto 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   VITA
   -------------------------------------------------------------------------- */

.vita {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem 3rem;
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 6vw, 4rem) 0;
}

.vita-text { grid-column: 1 / 7; }
.vita h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }

.vita-bio {
  margin-top: 1.6rem;
  max-width: 52ch;
  color: var(--muted);
}

.steckbrief {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 2.5rem;
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.fakt dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.fakt dd { margin-top: 0.3rem; font-weight: 500; }

.vita-figure {
  grid-column: 8 / 13;
  margin-top: 3.5rem;
}
.vita-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}

/* --------------------------------------------------------------------------
   REFERENZEN
   -------------------------------------------------------------------------- */

.referenzen {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 6vw, 4rem) 0;
}
.referenzen h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }

.credit-groups {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem 3rem;
  margin-top: 2.8rem;
}
.credit-group { grid-column: span 6; padding-top: 1.4rem; border-top: 1px solid var(--line); }

.credit-group h3 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.credit-list ul { list-style: none; margin-top: 1rem; }
.credit-list li { padding: 0.3rem 0; color: var(--muted); }
.credit-list li strong {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  margin-right: 0.5rem;
}
.credit-list a { color: var(--accent); }
.credit-list a:hover { color: var(--ink); }

.profile { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 3rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.5rem 0.5rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(33, 29, 23, 0.08);
  font-size: 0.85rem;
  transition: transform 0.35s var(--ease);
}
.pill:hover { border-color: var(--accent); }
.pill:hover .pill-icon { transform: translate(2px, -2px); }
.pill:active { transform: scale(0.98); }

.pill-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-primary .pill-icon { background: rgba(255, 255, 255, 0.22); }
.pill-primary:hover { background: var(--accent-d); border-color: var(--accent-d); }

/* --------------------------------------------------------------------------
   BÜHNE / ZITAT: farbiges Foto mit Zitat
   -------------------------------------------------------------------------- */

.buehne {
  position: relative;
  margin-top: clamp(5rem, 11vw, 9rem);
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.buehne-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dezenter Verlauf nur rechts, damit das Zitat lesbar bleibt und das
   Gesicht links frei bleibt – kein Vollflächen-Filter */
.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(265deg, rgba(20, 17, 13, 0.72) 6%, rgba(20, 17, 13, 0.25) 52%, rgba(20, 17, 13, 0) 100%);
}

.buehne blockquote {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: 5rem clamp(1.5rem, 6vw, 4rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-end;      /* Zitat rechts, weg vom Gesicht */
  text-align: left;
}
.buehne p {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.36;
  max-width: 24ch;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.buehne cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
.buehne cite span::before { content: " \00b7 "; }

/* --------------------------------------------------------------------------
   FOTOS: blätterbarer Filmstreifen (Scroll-Snap), beliebig viele Bilder
   -------------------------------------------------------------------------- */

.fotos {
  /* volle Breite, der Streifen darf bis an den Rand laufen */
  padding: clamp(5rem, 11vw, 9rem) 0 0;
}

.fotos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: 0 clamp(1.5rem, 6vw, 4rem);
}

.fotos h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }

.strip-controls { display: flex; align-items: center; gap: 0.75rem; }

.strip-counter {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35rem;
}

.strip-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.25s ease-out, background-color 0.25s ease-out, transform 0.25s ease-out;
}
.strip-btn:hover { border-color: var(--accent); }
.strip-btn:active { transform: scale(0.94); }
.strip-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--line); }

.foto-strip {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: 2.2rem;
  padding: 0 clamp(1.5rem, 6vw, 4rem) 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox */
  overscroll-behavior-x: contain;
}
.foto-strip::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .foto-strip { scroll-behavior: smooth; }
}

.foto-strip figure {
  flex: 0 0 min(78%, 780px);
  scroll-snap-align: center;
  overflow: hidden;
}

.foto-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  user-select: none;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.foto-strip figure:hover img { transform: scale(1.03); }

@media (max-width: 620px) {
  .foto-strip figure { flex-basis: 84%; }
}

/* --------------------------------------------------------------------------
   KONTAKT & FUSS
   -------------------------------------------------------------------------- */

.kontakt {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 6vw, 4rem);
}
.kontakt h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
.kontakt p { margin-top: 1.3rem; color: var(--muted); max-width: 40ch; }
.kontakt .pill { margin-top: 2rem; font-size: 1.05rem; }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: 2rem clamp(1.5rem, 6vw, 4rem) 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.footer-links { display: flex; gap: 1.6rem; }
.footer-links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Auftritt beim Scrollen (nur mit JS; ohne JS bleibt alles sichtbar)
   Ruhige Bewegung: kurze Wege, ease-out, alles respektiert reduced motion.
   -------------------------------------------------------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease) calc(var(--d, 0) * 80ms),
              transform 0.9s var(--ease) calc(var(--d, 0) * 80ms);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* Überschriften-Linie: kleine Ocker-Regel wächst beim Erscheinen ein */
h2 { position: relative; padding-bottom: 0.9rem; }
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 3rem;
  background: var(--accent);
  transform-origin: left;
}
html.js .reveal h2::after,
html.js h2.reveal::after {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease) 0.25s;
}
html.js .reveal.in h2::after,
html.js h2.reveal.in::after { transform: scaleX(1); }

/* Steckbrief: Fakten treten leicht gestaffelt auf (Liste, daher legitim) */
html.js .reveal .fakt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease) calc(0.15s + var(--f, 0) * 60ms),
              transform 0.7s var(--ease) calc(0.15s + var(--f, 0) * 60ms);
}
html.js .reveal.in .fakt { opacity: 1; transform: none; }

/* Bilder: sanftes Aufdecken, Startzustand bleibt sichtbar (nur leicht größer) */
html.js .vita-figure img,
html.js .foto-strip img {
  transform: scale(1.04);
  transition: transform 1.2s var(--ease);
}
html.js .vita-figure.reveal.in img,
html.js .reveal.in .foto-strip img,
html.js .foto-strip.reveal.in img { transform: scale(1); }

/* Ruhige Tiefe: die beiden vollflächigen Fotos driften minimal beim Scrollen.
   Nur als Progressive Enhancement (scroll-driven animations), sonst statisch. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .buehne-bg {
      height: 112%;
      top: -6%;
      animation: drift linear both;
      animation-timeline: view();
    }
    .hero-bg {
      animation: settle 1.6s var(--ease) both;
    }
  }
}

@keyframes drift {
  from { transform: translateY(-2.5%); }
  to   { transform: translateY(2.5%); }
}

/* Hero-Bild kommt beim Laden minimal zur Ruhe (einmalig, dezent) */
@keyframes settle {
  from { transform: scale(1.025); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .foto-strip img, .pill, .pill-icon, .strip-btn,
  html.js .reveal, html.js .reveal .fakt,
  html.js .vita-figure img, html.js .foto-strip img { transition: none !important; }
  html.js .reveal, html.js .reveal .fakt { opacity: 1; transform: none; }
  html.js .vita-figure img, html.js .foto-strip img { transform: none; }
  h2::after { transform: none !important; transition: none !important; }
  .hero-bg, .buehne-bg { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .vita, .credit-groups { grid-template-columns: 1fr; }
  .vita-text, .vita-figure, .credit-group { grid-column: 1 / -1; }
  .vita-figure { margin-top: 1rem; }
}

@media (max-width: 620px) {
  .hero-nav { gap: 0.75rem; justify-content: center; }
  .hero-nav a { font-size: 0.72rem; letter-spacing: 0.16em; }
  .steckbrief { gap: 1.2rem 1.5rem; }
  .titles-line {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    line-height: 1.3;              /* mobil offener gesetzt, keine Kollisionen */
  }
}