/* =========================================================
   XPROMEDIA — Subpage components
   Additive stylesheet only. Loaded AFTER css/style.css.
   Relies on the design tokens and base rules already defined
   there (colors, buttons, header, footer, .section, .eyebrow,
   .contact-item, .hero-actions, .cta …) — nothing here
   overrides or redefines an existing homepage rule.
   ========================================================= */

/* ---------- active nav state (subpages only) ---------- */
.main-nav a.active{ color: var(--white); }
.main-nav a.active::after{ right: 0; }

/* ---------- dezenter Scroll-Reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in-view{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   PAGE HERO — fullbleed photo hero for subpages
   ========================================================= */
.pagehero{
  position: relative;
  min-height: 84svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pagehero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #0a0a0a;
}
.pagehero--film .pagehero-bg{
  background-image: url("../assets/images/poster_film.png");
  background-position: center 42%;
}
.pagehero--werbung .pagehero-bg{
  background-image: url("../assets/images/werbung_header.png");
  background-position: center 38%;
}
.pagehero--content .pagehero-bg{
  background-image: url("../assets/images/header.png");
  background-position: center 30%;
}
.pagehero--music .pagehero-bg{
  background-image: url("../assets/images/poster_video.png");
  background-position: center 28%;
}
.pagehero--sound .pagehero-bg{
  /* Absolute path: the site's webroot on the server is the /2026
     folder, so this resolves to /2026/assets/images/sound_header.png
     — a relative "../assets/..." path would break there. */
  background-image: url('/assets/images/sound_header.png');
  /* Keeps the mixing desk/monitor — the image's focal point — centered
     and fully visible; cover fills the hero without distorting it. */
  background-position: center 42%;
}
.pagehero--about .pagehero-bg{
  background-image: url('/assets/images/about_header.png');
  background-position: center;
}
.pagehero--kontakt .pagehero-bg{
  background-image: url('/assets/images/kontakt.png');
  background-position: center;
}
.pagehero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 70%, rgba(0,0,0,0.35) 100%);
}
.pagehero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad) clamp(56px, 8vw, 104px);
  max-width: var(--container);
  margin-inline: auto;
}
.pagehero .eyebrow{ margin-bottom: 20px; }
.pagehero-title{
  font-size: clamp(2.3rem, 5.6vw, 5rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 26px;
  color: var(--white);
  max-width: 900px;
}
.pagehero-text{
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--gray-300);
  max-width: 560px;
  line-height: 1.6;
  margin: 0 0 8px;
}

/* =========================================================
   INTRO — centered copy block (used on light sections)
   ========================================================= */
.intro{
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
/* Scoped fix (Sound page only): keeps the last child's trailing margin
   inside the .intro box instead of collapsing out into the section's
   padding, so the block sits truly centered without changing the
   section's own height. Only applied where this modifier is used. */
.intro--contained{ display: flow-root; }
.intro-title{
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
}
.intro p{
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0 0 20px;
}
.intro p:last-of-type{ margin-bottom: 44px; }
.intro--on-dark p{ color: var(--gray-300); }
.intro--on-dark{ color: var(--white); }
.intro--left{ text-align: left; margin-inline: 0; }

/* ---------- Leistungen tag line ---------- */
.tag-line{
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  line-height: 2.1;
}
.tag-line .dot{ color: var(--red); margin: 0 12px; }

/* Scoped fix (Sound page only): exact horizontal centering of the
   tag-line row via flexbox, as one coherent container — words are
   never repositioned individually. */
.tagline-center{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* Flex items default to min-width:auto, which blocks the text from
   shrinking/wrapping on narrow screens — this restores normal wrapping
   while the row itself stays centered as one unit. */
.tagline-center .tag-line{ min-width: 0; }
/* Wrapping the tag-line in .tagline-center makes it a nested <p>,
   which shifts :last-of-type to the paragraph right before it —
   this restores that paragraph's original spacing (20px) so no
   other spacing on the page changes. */
.intro p:has(+ .tagline-center){ margin-bottom: 20px; }
.tag-line.on-dark{ color: var(--gray-300); }

/* =========================================================
   KONTAKT — compact light intro section (kontakt.html only)
   The shared .section padding (--section-pad, 80–160px) is meant for
   sections with real visual weight; stacked above the pagehero and
   below this short paragraph text it left far too much whitespace
   before the "KEINE KOMPLIZIERTE ANFRAGE…" headline. Height still
   comes purely from content + this padding — no fixed height or
   min-height. Scoped to kontakt.html only, doesn't touch the shared
   .section rule or any other page.
   ========================================================= */
.kontakt-intro{
  padding-block: clamp(70px, 5vw, 90px);
}
@media (max-width: 1024px){
  .kontakt-intro{ padding-block: clamp(55px, 6vw, 70px); }
}
@media (max-width: 640px){
  .kontakt-intro{ padding-block: clamp(40px, 8vw, 55px); }
}
/* The STATEMENT section right after it ("KEINE KOMPLIZIERTE
   ANFRAGE…") normally adds its own full --section-pad on top too —
   stacked with .kontakt-intro's bottom padding above, that reads as
   two gaps in a row. Zeroing just its top padding here (only when it
   directly follows .kontakt-intro, i.e. only on this page) leaves
   .kontakt-intro's own bottom padding as the single visible gap.
   Its bottom padding (spacing before the CTA section) is untouched. */
.kontakt-intro + .statement{ padding-top: 0; }

/* =========================================================
   SPLIT — two-column hero (headline+text beside image)
   ========================================================= */
.split{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.split-media{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
}
.split-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split-title{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 26px;
  color: var(--white);
}
.split-text{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-300);
  margin: 0 0 18px;
  max-width: 480px;
}

/* =========================================================
   STATEMENT — full-width typographic statement
   ========================================================= */
.statement{ text-align: center; }
.statement-inner{
  max-width: 1150px;
  margin-inline: auto;
}
.statement-text{
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.statement--xl .statement-text{
  font-size: clamp(2.8rem, 9vw, 7.5rem);
  line-height: 1.05;
}
.statement--lg{ padding-top: clamp(120px, 15vw, 200px); padding-bottom: clamp(120px, 15vw, 200px); }

.statement--photo{
  position: relative;
  overflow: hidden;
}
.statement-photo-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.28;
  filter: grayscale(55%);
}
.statement-photo-bg--about{
  background-image: url("../assets/images/header.png");
  background-position: center 25%;
}
.statement-photo-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.9) 100%);
}
.statement--photo .statement-inner{ position: relative; z-index: 2; }

/* =========================================================
   CONTACT GRID (Kontakt page)
   ========================================================= */
.contact-grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  justify-content: center;
  align-items: center;
}

/* =========================================================
   LEGAL PAGES — Impressum / Datenschutz
   Readable long-form text, deliberately restrained typography
   (no large marketing-style headlines within the legal copy).
   ========================================================= */
.legal-hero{
  background: var(--black);
  color: var(--off-white);
  padding: clamp(120px, 15vw, 176px) var(--pad) clamp(40px, 6vw, 56px);
}
.legal-hero-inner{
  max-width: 760px;
  margin-inline: auto;
}
.legal-hero h1{
  font-size: clamp(1.15rem, 5.8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.legal-hero p{
  margin: 14px 0 0;
  color: var(--gray-300);
  font-size: 0.95rem;
  line-height: 1.6;
}

.legal{
  max-width: 760px;
  margin-inline: auto;
}
.legal h2{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--black);
  margin: 44px 0 14px;
}
.legal h2:first-child{ margin-top: 0; }
.legal h3{
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin: 22px 0 8px;
}
.legal p{
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0 0 16px;
}
.legal ul{
  margin: 0 0 16px;
  padding-left: 20px;
}
.legal li{
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin-bottom: 6px;
  list-style: disc;
}
.legal a{
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.3);
  text-underline-offset: 3px;
}
.legal a:hover{ text-decoration-color: var(--red); }
.legal strong{ font-weight: 700; color: var(--black); }

/* =========================================================
   CINEMATIC PAGE VISUALS — full-bleed images (film.html, werbung.html)
   Natural aspect ratio, edge-to-edge width, no crop on desktop;
   sensibly cropped via object-fit on small screens.
   ========================================================= */
.film-media{
  margin-block: clamp(48px, 7vw, 96px);
}
.film-shot{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .split{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split-media{ aspect-ratio: 16/10; order: -1; }
  .split-text{ max-width: none; }
}

@media (max-width: 640px){
  .pagehero{ min-height: 78svh; }
  .tag-line{ line-height: 2.4; }
  .contact-grid{ flex-direction: column; align-items: flex-start; }

  .film-shot{
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
  }
}