/* ============================================================
   DER KONRAD · Redesign-Schicht „Director's Cut" (nur film.html)
   Gleiche Welt (Espresso + Kupfer, Cormorant + Outfit), aber:
   mehr Bühne, weniger Kästen; größere Typo-Dramaturgie; die
   Kupfer-Schnittlinie des Films als roter Faden aller Sektionen.
   Texte bleiben 1:1 — hier wird nur inszeniert.
   ============================================================ */

:root {
  --section: clamp(120px, 15vw, 216px);
  --radius-img: 8px;
}

/* Oben Bühne, unten Schnitt: großer Auftritt, straffer Abgang —
   sonst stapeln sich Unterkante + nächste Oberkante zu toter Fläche */
.section-pad { padding-bottom: calc(var(--section) * .58); }

/* ---------- Typo-Dramaturgie ---------- */
.section-head h2,
.section-head-h2 {
  font-size: clamp(42px, 5.4vw, 78px) !important;
  line-height: 1.0 !important;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.section-head .lede { margin-top: 26px; font-size: clamp(17px, 1.5vw, 20px); }

/* Kicker: kein schwebendes Etikett mehr — er sitzt AUF der Schnittlinie */
.kicker {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 26px;
  letter-spacing: .26em;
}
.kicker::before,
.kicker::after {
  content: ""; height: 1px; background: var(--hairline);
  flex: 0 1 64px;
}
.kicker::after { flex: 1; }
.section-head--center .kicker { justify-content: center; }
.section-head--center .kicker::before,
.section-head--center .kicker::after { flex: 0 1 64px; }

/* Schnittlinie zwischen den Sektionen: Haarlinie mit kleiner Schere,
   ersetzt die stummen border-tops */
.welcome, .team, .gallery, .visit { border-top: 0; }
.cut-line {
  position: absolute; top: 0; left: 0; right: 0; height: 0;
  pointer-events: none;
}
/* Die Lücke entsteht in der Linie selbst (zwei Segmente), die Schere sitzt
   frei darin — kein Farb-Chip, der je nach Sektionshintergrund danebenliegt */
.cut-line::before {
  content: ""; position: absolute; top: 0;
  left: var(--pad); width: 26px;
  height: 1px; background: var(--hairline-soft);
}
.cut-line::after {
  content: ""; position: absolute; top: 0;
  left: calc(var(--pad) + 58px); right: var(--pad);
  height: 1px; background: var(--hairline-soft);
}
.cut-line svg {
  position: absolute; top: -7px; left: calc(var(--pad) + 35px);
  width: 14px; height: 14px; color: var(--copper);
}

/* ---------- Willkommen: Sitzung statt Spalten-Kiste ---------- */
.welcome-grid { gap: clamp(48px, 7vw, 120px); }
.welcome-list-title {
  font-size: 15px; font-family: var(--sans); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 14px;
}
.welcome-list li {
  padding: 24px 0 24px 34px; position: relative;
  font-size: 17px;
}
.welcome-list li::before {
  content: ""; position: absolute; left: 0; top: 35px;
  width: 18px; height: 1px; background: var(--copper);
}

/* ---------- Geschichte: Jahreszahlen als Kinoplakat ---------- */
.story-year { letter-spacing: -.03em; }
.story-flow .story-year { font-size: clamp(110px, 20vw, 240px); }
.story-place { margin-top: 14px; letter-spacing: .26em; }
.story-text { font-size: clamp(16.5px, 1.5vw, 19px); }
/* Lockup-Korrektur: Unterlänge der Ziffern schlug in die Ortszeile,
   und die Ortszeile saß nicht überall mittig unter der Jahreszahl */
.story-chapter .inner { justify-items: center; }
.story-chapter .story-place {
  margin-top: clamp(22px, 3.4vh, 38px);
  justify-self: center; text-align: center;
}

/* ---------- Team: Portraits statt Karten ---------- */
.team-card {
  border: 0; border-radius: 0; background: transparent; padding: 0;
}
.team-portrait {
  border-radius: var(--radius-img);
  aspect-ratio: 4 / 4.8;
  max-width: 520px;
}
.team-portrait::after {
  background: linear-gradient(to top, rgba(14, 9, 5, .55), transparent 46%);
}
/* Die Portraits bekommen die warme Bühnen-Gradierung der übrigen Bilderwelt
   (weiße Studio-Hintergründe rissen die dunkle Szene auf); dezent genug,
   dass Alex und Dorit natürlich bleiben */
.team-portrait img {
  filter: sepia(.2) saturate(.92) contrast(.97) brightness(.93);
}
.team-portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(201, 138, 94, .18), rgba(122, 74, 42, .12));
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Sanfterer Hover: die 900px-Quelle verträgt keine starke Vergrößerung */
.team-card:hover .team-portrait img { transform: scale(1.02); }
.team-body { padding: 30px 4px 0; }
.team-body h3 { font-size: clamp(30px, 2.8vw, 42px); }
.team-body .role {
  margin-top: 8px; letter-spacing: .14em; text-transform: uppercase;
  font-size: 12.5px;
}
.team-body p { font-size: 16px; max-width: 52ch; }
.team-points { margin-top: 20px; border-top: 1px solid var(--hairline-soft); }
.team-points li {
  padding: 12px 0 12px 30px; border-bottom: 1px solid var(--hairline-soft);
  font-size: 15.5px;
}
.team-points li:last-child { border-bottom: 0; }
.team-points li::before { top: 24px; width: 16px; }
.team-actions { padding-top: 26px; }

/* ---------- Leistungen: Preistafel mit mehr Luft ---------- */
.price-block h3 {
  font-size: clamp(26px, 2.2vw, 32px);
  border-bottom-color: var(--hairline);
  padding-bottom: 16px;
}
.price-row { padding: 15px 0; }
.price-row .name { font-size: 14px; letter-spacing: .08em; }
.price-row .amt { font-size: 17px; }
.price-columns { column-gap: clamp(48px, 6vw, 96px); }

/* ---------- Galerie: größere Bühne ---------- */
.shot {
  height: clamp(280px, 42vh, 440px);
  border-radius: var(--radius-img);
  border-color: transparent;
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/* ---------- Bewertungen: Zitate statt Kisten ---------- */
.review-card {
  border: 0; border-radius: 0;
  background: transparent;
  padding: 8px 28px 8px 30px;
  position: relative;
}
.review-card::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--hairline);
}
.review-card .body { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.52; }
.reviews-badge .num { letter-spacing: -.02em; }

/* ---------- Besuch: offene Bühne statt Karten-Kiste ---------- */
.location-card {
  border: 0; border-radius: 0; background: transparent; overflow: visible;
}
.location-map {
  border-radius: var(--radius-img); overflow: hidden;
  border: 1px solid var(--hairline-soft);
}
.location-info { padding: 26px 4px 0; }
.location-info h3 { font-size: clamp(24px, 2vw, 30px); }
.hours-row { padding: 17px 4px; }
.hours-row .day { width: 120px; }

/* ---------- Footer ---------- */
.foot { padding-top: clamp(72px, 10vw, 128px); }

/* ---------- Sanfte Ankunft der Sektionen (Statik/Reduced: aus) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.is-static) [data-reveal] { will-change: transform, opacity; }
}

/* ---------- Mobil: Preiszeilen als ruhige Blöcke ---------- */
@media (max-width: 640px) {
  /* Großbuchstaben sind nur ein CSS-Transform — der Text bleibt 1:1 */
  .price-row { flex-wrap: wrap; row-gap: 2px; }
  .price-row .name { text-transform: none; letter-spacing: .01em; font-size: 15.5px; }
  .price-row .leader { display: none; }
  .price-row .amt { margin-left: auto; }
}

/* ---------- Geschichte: Urkunde 1945 als Prolog (Desktop-Buehne) ----------
   Liegt gross mittig; main.js laesst sie beim Scrollen an ihren Platz als Bild
   von Kapitel 1945 gleiten (unten links, gekippt), die grosse 1945 blendet ein. */
.story-cert {
  --cw: min(58vw, 760px, 88svh);
  position: absolute; z-index: 4; margin: 0;
  width: var(--cw);
  left: calc(50% - var(--cw) / 2);
  top: calc(56% - var(--cw) * .3631);
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.story-cert img { display: block; width: 100%; height: auto; }
/* Vignette 1945 = Urkunde im Querformat, etwas breiter als die Fotos */
.story-chapter[data-chapter="0"] .story-vignette { width: clamp(190px, 19vw, 290px); border-radius: 6px; }
/* Mobil / Statik: Urkunde ueber dem Kapitel 1945 */
.story-cert-flow {
  margin: 0 auto clamp(8px, 2vw, 20px); max-width: 640px;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.story-cert-flow img { display: block; width: 100%; height: auto; }
body.is-static .story-cert { display: none; }