/* ============================================================
   GALERIEN — Page-specific styles
   /galerien/index.php
   ============================================================ */

/* Override: stage-content h1 auf Open Sans (kein Newsreader) */
.stage--60 .stage-content h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}


/* ============================================================
   SECTION HEADLINES — 15% größer als global
   ============================================================ */
.teasers-headline {
  font-size: clamp(26px, 5.2vw, 36px);
}

@media (max-width: 810px) {
  .teasers-headline { font-size: 26px; }
}


/* ============================================================
   ARTIST STATEMENT
   Nutzt .header-wrapper p Typografie von der Home,
   überschreibt nur das übermäßige bottom-margin
   ============================================================ */
.galerien-statement .statement {
  margin-top: clamp(80px, 10vw, 160px);
  margin-bottom: 20px;
}

/* Statement-Klasse: responsives Padding links/rechts */
.statement {
  padding-left: clamp(40px, 11.4vw, 164px);
  padding-right: clamp(40px, 11.4vw, 164px);
}

/* Byline unter dem Statement */
.byline-name {
  font-weight: 400;
}

.statement-byline {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(12px, 1.2vw, 16px) !important;
  line-height: 1.4 !important;
  margin: 0 0 clamp(160px, 20vw, 320px) 0 !important;
  padding-left: clamp(40px, 11.4vw, 164px);
  padding-right: clamp(40px, 11.4vw, 164px);
}


/* ============================================================
   SERIEN-SECTION — Wrapper
   ============================================================ */
.serien-section {
  margin-top: clamp(64px, 8.33vw, 120px);
  margin-bottom: clamp(64px, 11.11vw, 160px);
}

/* H2 + Abstract: linkes Padding bündig mit Karteninhalt */
.serien-section .teasers-headline,
.serien-section .teasers-headline + p {
  padding-left: calc(var(--content-pad-x) + 8px); /* S: 12+8=20px */
}

@media (min-width: 811px) {
  .serien-section .teasers-headline,
  .serien-section .teasers-headline + p {
    padding-left: 24px; /* M */
  }
}

@media (min-width: 1400px) {
  .serien-section .teasers-headline,
  .serien-section .teasers-headline + p {
    padding-left: 32px; /* L */
  }
}


/* ============================================================
   BILD-TEXT-COMPONENT
   Gemessen aus Figma: bild-text-component + Responsive bild-text-component
   ============================================================ */

/* Container — nutzt globale Content-Width-Variablen */
.btc-wrap {
  width: var(--content-w);
  max-width: var(--content-max);
  padding: 0 var(--content-pad-x);
  margin: 0 auto;
  margin-bottom: clamp(24px, 4vw, 60px);
  box-sizing: border-box;
}
.btc-wrap:last-child {
  margin-bottom: 0;
}
.btc-wrap + .btc-wrap {
  border-top: 1px solid black;
  padding-top: clamp(24px, 4vw, 60px);
}
.btc-wrap:first-of-type {
  margin-top: 40px;
}
@media (min-width: 1400px) {
  .btc-wrap:first-of-type { margin-top: 80px; }
}

/* Komponente — S: vertikal */
.bild-text-component {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}

/* M + L: horizontal 50/50 */
@media (min-width: 811px) {
  .bild-text-component {
    flex-direction: row;
    align-items: flex-start;
  }
  .bild-text-component--image-right {
    flex-direction: row-reverse;
  }
}

/* ---- Bild ---- */
.btc__image {
  overflow: hidden;
  flex-shrink: 0;
  /* S: Bild oben, AR 3:2 */
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
}

@media (min-width: 811px) {
  .btc__image {
    width: 50%;
    aspect-ratio: 5 / 4;
    border-radius: 18px;
  }
}

@media (min-width: 1400px) {
  .btc__image {
    border-radius: 24px;
  }
}

.btc__image img,
.btc__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.bild-text-component:hover .btc__image img,
.bild-text-component:hover .btc__image video {
  transform: scale(1.12);
}

/* ---- Specs ---- */
.btc__specs {
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  /* S */
  gap: 12px;
  padding: 16px 8px 24px;
}

@media (min-width: 811px) {
  .btc__specs {
    /* M */
    width: 50%;
    gap: 12px;
    padding: 12px 24px 32px;
  }
}

@media (min-width: 1400px) {
  .btc__specs {
    /* L */
    gap: 16px;
    padding: 32px;
  }
}

/* ---- Titel ---- */
.btc__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  margin: 0;
  color: inherit;
}

@media (min-width: 811px) {
  .btc__title {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (min-width: 1400px) {
  .btc__title {
    font-size: 28px;
    line-height: 34px;
  }
}

/* ---- Inner block (Body + Separator + Rows) ---- */
.btc__inner {
  display: flex;
  flex-direction: column;
  /* S + M */
  gap: 16px;
}

@media (min-width: 1400px) {
  .btc__inner {
    /* L */
    gap: 24px;
  }
}

/* ---- Body text ---- */
.btc__body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
@media (min-width: 811px) {
  .btc__body { font-size: 16px; line-height: 26px; }
}

/* ---- Separator ---- */
.btc__sep {
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.15;
  margin: 0;
}

/* ---- Spec Rows (dl/dt/dd) ---- */
.btc__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.btc__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

@media (min-width: 811px) and (max-width: 1299px) {
  .btc__row {
    flex-direction: column;
    gap: 2px;
  }

  .btc__label {
    width: auto;
    font-weight: 700;
  }
}

.btc__label {
  width: 100px;
  flex-shrink: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
@media (min-width: 811px) {
  .btc__label { font-size: 16px; line-height: 26px; }
}

/* ---- Exposé-Link: nutzt globales .text-link aus generai-style.css ---- */
.btc__inner .text-link {
  display: inline-block;
  margin-top: 16px;
}

.btc__value {
  flex: 1;
  min-width: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
@media (min-width: 811px) {
  .btc__value { font-size: 16px; line-height: 26px; }
}


/* ============================================================
   ABOUT & RECOGNITION
   ============================================================ */
.about-section {
  margin-top: clamp(64px, 8.33vw, 120px);
  margin-bottom: clamp(64px, 11.11vw, 160px);
}

.about-section .teasers-headline,
.about-section .teasers-headline + p {
  padding-left: calc(var(--content-pad-x) + 8px);
}

@media (min-width: 811px) {
  .about-section .teasers-headline,
  .about-section .teasers-headline + p { padding-left: 24px; }
}

@media (min-width: 1400px) {
  .about-section .teasers-headline,
  .about-section .teasers-headline + p { padding-left: 32px; }
}

/* Fließtext-Variante: kein gap, kein separator, nur Absätze */
.about-btc__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 8px 24px;
}

@media (min-width: 811px) {
  .about-btc__text { padding: 12px 24px 32px; }
}

@media (min-width: 1400px) {
  .about-btc__text { padding: 32px; }
}

.about-btc__text p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  margin: 0;
}


/* ============================================================
   IMMERSIVE-SECTION
   ============================================================ */
.immersive-section {
  background-color: #efefef;
  margin-top: clamp(64px, 8.33vw, 120px);
  padding-top: clamp(64px, 8.33vw, 120px);
  padding-bottom: clamp(32px, 5.56vw, 80px);
  margin-bottom: 0;
}

.immersive-section .teasers-headline,
.immersive-section .teasers-headline + p {
  padding-left: calc(var(--content-pad-x) + 8px);
}

@media (min-width: 811px) {
  .immersive-section .teasers-headline,
  .immersive-section .teasers-headline + p {
    padding-left: 24px;
  }
}

@media (min-width: 1400px) {
  .immersive-section .teasers-headline,
  .immersive-section .teasers-headline + p {
    padding-left: 32px;
  }
}


/* ============================================================
   FEATURE BOX COMPONENT
   Figma: feature box component + Responsive feature box
   S: horizontal Karte (Bild links, Specs rechts)
   M/L: vertikale Karte (Bild oben, Specs unten) — 3 Spalten
   ============================================================ */

.features-section {
  margin-top: clamp(64px, 8.33vw, 120px);
  margin-bottom: clamp(64px, 11.11vw, 160px);
}

/* Content-Container */
.features-wrap {
  width: var(--content-w);
  max-width: var(--content-max);
  padding: 0 var(--content-pad-x);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Gelbe äußere Box (h2 + abstract + grid) */
.features-yellow-box {
  background: #FFF600;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow .25s ease;
}

.features-yellow-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 24px -34px rgba(0, 0, 0, .8);
}

@media (min-width: 811px) {
  .features-yellow-box {
    border-radius: 18px;
    padding: 20px;
    gap: 16px;
  }
}

@media (min-width: 1400px) {
  .features-yellow-box {
    border-radius: 24px;
    padding: 32px;
    gap: 20px;
  }
}

/* h2 + abstract innerhalb der gelben Box:
   globale content-container-Styles (padding, width, margin auto) rücksetzen */
.features-yellow-box .teasers-headline {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 811px) {
  .features-yellow-box .teasers-headline {
    width: 50%;
  }
}

.features-yellow-box .teasers-headline + p {
  padding: 0;
  margin: 0;
}

/* Grid-Container — kein eigener Wrapper mehr, sitzt in yellow-box */
.feature-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 811px) {
  .feature-grid {
    flex-direction: row;
    gap: 20px;
  }
}

/* Karte */
.feature-box {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: row; /* S: horizontal */
}

@media (min-width: 811px) {
  .feature-box {
    flex: 1;
    flex-direction: column; /* M/L: vertikal */
    border-radius: 18px;
  }
}

@media (min-width: 1400px) {
  .feature-box {
    border-radius: 24px;
  }
}

/* Bild-Bereich */
.fbox__image {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  /* S: clamp zwischen 160px und 200px */
  width: clamp(124px, 25vw, 200px);
}

@media (min-width: 811px) {
  .fbox__image {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}

.fbox__image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* kein Anschnitt */
  display: block;
}

/* Yellow-Multiply-Overlay */
.fbox__overlay {
  position: absolute;
  inset: 0;
  background-color: #FFF600;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Specs-Panel */
.fbox__specs {
  display: flex;
  flex-direction: column;
  flex: 1; /* füllt restliche Card-Höhe bei unterschiedlich hohen Karten */
  background-color: #FFF600;
  color: black;
  font-family: 'Open Sans', sans-serif;
  /* S */
  padding: 24px 12px 32px;
  gap: 8px;
}

@media (min-width: 811px) {
  .fbox__specs {
    /* M */
    padding: 24px 20px 32px;
    gap: 8px;
  }
}

@media (min-width: 1400px) {
  .fbox__specs {
    /* L */
    padding: 24px 32px 48px;
    gap: 12px;
  }
}

/* Titel */
.fbox__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: black;
  margin: 0;
  /* S + M */
  font-size: 20px;
  line-height: 24px;
}

@media (min-width: 1400px) {
  .fbox__title {
    font-size: 28px;
    line-height: 32px;
  }
}

/* Body */
.fbox__body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: black;
  margin: 0;
  font-size: 16px;
  line-height: 26px;
}

/* Links-Block — margin-top: auto drückt ihn zur Unterkante */
.fbox__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

/* ============================================================
   DOWNLOAD & KONTAKT SECTION
   Figma: "download component" + "Responsive download component"
   page: 🟡⚫️🟡⚫️ components
   Buttons nutzen .dark-Kontext aus generai-style.css
   ============================================================ */
.download-section {
  background: #000;
  width: 100%;
  box-sizing: border-box;
  margin-top: 240px;
  padding: 120px 0 160px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-section__title {
  font-family: var(--font-sans-serif), sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 5.2vw, 36px);
  line-height: 1.3;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0;
}

.download-section__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0 12.5%; /* size M: content width 75% */
}

/* size L (≥1300px): content width 50% */
@media (min-width: 1300px) {
  .download-section__inner {
    padding: 0 25%;
  }
}

.download-section__text {
  font-family: var(--font-sans-serif), sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  text-align: center;
}

.download-section__sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0;
}

.download-section__buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

/* Mobile S (≤810px) */
@media (max-width: 810px) {
  .download-section {
    padding: 80px 0 100px;
  }

  .download-section__inner {
    padding: 0 16px;
  }

  .download-section__text {
    font-size: 16px;
  }

  .download-section__buttons {
    flex-wrap: wrap;
  }
}


/* CTA unterhalb Immersive-BTCs */
.immersive-cta {
  display: flex;
  justify-content: center;
  padding-top: clamp(40px, 5.56vw, 80px);
  padding-bottom: clamp(32px, 5.56vw, 80px);
}

/* Text-Link-Variante für gelben Hintergrund */
.text-link.text-link--on-yellow {
  background-color: black;
  color: #FFF600;
}

.text-link.text-link--on-yellow:hover {
  background-color: white;
  color: black;
}