/* ==========================================
   Polyvista 3DVista Gallery – Design System
   Fonts: Basic Commercial LT
   Farbvarianten via Body-Class wählbar
   ========================================== */

/* (Optional) Lokale Font-Einbindung – nur verwenden,
   wenn du die Dateien hast und ablegen kannst.
   Ansonsten greift die Systemschrift mit dem Familiennamen. */
/*
@font-face {
  font-family: "Basic Commercial LT";
  src: url("../fonts/BasicCommercialLT.woff2") format("woff2"),
       url("../fonts/BasicCommercialLT.woff") format("woff");
  font-display: swap;
}
*/
/* ==========================================
   Polyvista Font-Einbindung – Basic Commercial LT Com
   ========================================== */

@font-face {
  font-family: "Basic Commercial LT Com";
  src: url("/wp-content/uploads/fonts/Basic-Commercial-LT-Com-Roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basic Commercial LT Com";
  src: url("/wp-content/uploads/fonts/Basic-Commercial-LT-Com-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basic Commercial LT Com";
  src: url("/wp-content/uploads/fonts/Basic-Commercial-LT-Com-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Schrift im Popup-Template erzwingen */
body.page-template-3dvista-popup,
.page-template-3dvista-popup .gallery-shell--popup,
.page-template-3dvista-popup .slide-text,
.page-template-3dvista-popup h1 {
  font-family: "Basic Commercial LT Com", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

:root {
  /* Globale Schriftfamilie */
--font-base: "Basic Commercial LT Com", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Standard-Akzent (Default, falls keine Klasse gesetzt ist) */
  --accent: #E1017E; /* Magenta als Default */

  /* Vordefinierte Akzentfarben (deine Vorgaben) */
  --accent-magenta: #E1017E;
  --accent-blue:    #0090D6;
  --accent-green:   #4BA22F;
  --accent-orange:  #F08714;

  /* Layout-Variablen */
  --page-pad-x: clamp(16px, 6vw, 64px);
  --page-pad-y: clamp(16px, 5vw, 56px);
  --grid-gap: clamp(20px, 3vw, 48px);
}

/* Schrift im Popup erzwingen */
body.page-template-3dvista-popup,
.page-template-3dvista-popup .gallery-shell--popup,
.page-template-3dvista-popup .slide-text {
  font-family: var(--font-base);
}

/* Farbvarianten – per Body-Class umschalten */
body.accent-magenta { --accent: var(--accent-magenta); }
body.accent-blue    { --accent: var(--accent-blue); }
body.accent-green   { --accent: var(--accent-green); }
body.accent-orange  { --accent: var(--accent-orange); }

/* Stellen, die die Akzentfarbe verwenden */
.gallery-headline h1 { color: var(--accent); }
.headline-icon       { stroke: var(--accent); }


/* =========================
   Popup-Reset & Theme-Hider
   ========================= */
.page-template-3dvista-popup,
.page-template-3dvista-popup body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.page-template-3dvista-popup header,
.page-template-3dvista-popup footer,
.page-template-3dvista-popup .site-header,
.page-template-3dvista-popup .site-footer,
.page-template-3dvista-popup #header-outer,
.page-template-3dvista-popup #footer-outer {
  display: none !important;
}

.page-template-3dvista-popup #ajax-content-wrap,
.page-template-3dvista-popup .container-wrap,
.page-template-3dvista-popup .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}


/* ==================
   Layout & Feinschliff
   ================== */
.gallery-shell--popup{
  padding: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) + 72px);
  min-height: 100vh;
  background: #fff;
  color: #111;
}

.gallery-frame--popup{
  max-width: 1600px;
  margin: 0 auto;
}

@media (min-width: 1600px){
  .gallery-frame--popup { max-width: 1600px; }
}

/* Headline wie in der Referenz (Pfeil + kräftige Farbe) */
.gallery-headline{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 clamp(16px, 2.2vw, 28px);
}

.gallery-headline h1{
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -.01em;
}

.headline-icon{
  width: clamp(22px, 2vw, 32px);
  stroke-width: 55;
  fill: none;
  stroke-linecap: square;
  stroke-miterlimit: 1.5;
}

/* Zwei-Spalten-Layout wie "groß/klein": links groß, rechts Text */
.slide-grid{
  display: grid;
  grid-template-columns: 2.2fr 1fr;   /* links größer als rechts */
  gap: var(--grid-gap);
  align-items: start;
}

/* Slide-Wrapper / Transition */
.slides-wrapper {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  display: block;
  height: 100%;
}

/* Bildhöhe an Viewport koppeln */
.slide-media { overflow: hidden; }
.media-figure { position: relative; margin: 0; }
.media-figure img{
  max-height: min(66vh, 820px);
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* Copyright klein, unten rechts im Bild */
.media-figure figcaption{
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12.5px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  opacity: .95;
  pointer-events: none;
}

/* Textspalte rechts ruhiger */
.slide-text{
  overflow: auto;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  color: rgba(0,0,0,.72);
}
.slide-text p{ margin: 0 0 1rem; }

/* Navigation unaufdringlich über dem Inhalt */
.gallery-controls{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
}
.gallery-btn{
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.15);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.gallery-btn:hover{ background: rgba(0,0,0,.25); }
.gallery-btn:disabled{ opacity: .45; cursor: not-allowed; }

.arrow{ width: 36px; height: 36px; stroke: #000; stroke-width: 100; fill: none; stroke-linecap: square; }
.arrow-left { transform: rotate(180deg); }

.gallery-counter{ font-size: 18px; font-weight: 600; opacity: .9; }

/* Weißraum unterhalb der Slides reduzieren */
.slide{ padding-bottom: 0; }


/* —— Responsive ——————————————————————————— */
@media (max-width: 1100px){
  .slide-grid{ grid-template-columns: 1fr; }
  .media-figure img{ max-height: min(58vh, 640px); }
  .gallery-controls{ bottom: 18px; }
}

@media (max-width: 720px){
  .gallery-shell--popup{
    padding: clamp(12px, 4.5vw, 20px) clamp(12px, 5vw, 20px) 72px;
  }
  .media-figure img{ max-height: 54vh; }
  .gallery-counter{ font-size: 16px; }
}
/* Viewport hart clippen + Layering fixen */
slide-gallery{
  display: block;
  position: relative;
  overflow: hidden;     /* wichtig: kein Bild darf „rausgucken“ */
}

.gallery-frame--popup,
.gallery-article{
  overflow: hidden;     /* zusätzlicher Sicherheitsgurt */
}

/* Controls immer sichtbar */
.gallery-controls{
  z-index: 5;           /* vor Bildern */
}

/* Falls bei sehr breiten Layouts ein Pixel durchrutscht: */
.slides-wrapper { transform: translateX(calc(-1 * var(--slide-index, 0) * 100%)); }
.slide { flex: 0 0 100%; min-width: 100%; }

/* ===== Pfeile unter das Bild verlegen – nur in Landscape ===== */
/* Landscape-Heuristik: Breiter als hoch UND genug Breite */
@media (min-aspect-ratio: 4/3) and (min-width: 960px) {
  /* Controls aus dem Overlay-Flow lösen und unterhalb platzieren */
  .gallery-controls{
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 18px auto 0;         /* Abstand zum Bild */
    justify-content: center;     /* mittig anordnen */
  }

  /* Falls nötig: ensure der Container lässt Platz unterm Bild */
  slide-gallery{
    display: block;
    position: relative;
    overflow: hidden;            /* kein Nachbar-Slide sichtbar */
    padding-bottom: 0;           /* kein extra Boden-Spacing */
  }

  /* Optional: etwas kompakter im Landscape */
  .gallery-btn{ width: 44px; height: 44px; }
  .gallery-counter{ font-size: 1.05rem; }
}

/* In Portrait (oder sehr schmal) weiterhin über dem Bild */
@media (max-aspect-ratio: 4/3), (max-width: 959px) {
  .gallery-controls{
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    margin: 0;
  }
}

/* ===== Layout-Switch feintunen: 2 Spalten in Landscape, 1 Spalte in Portrait/narrow ===== */

/* 1) Zweis­paltig behalten, solange Landscape und genug Breite */
@media (min-aspect-ratio: 4/3) and (min-width: 820px) {
  .slide-grid { grid-template-columns: 2.2fr 1fr; } /* links groß, rechts Text */
}

/* 2) Nur in Portrait ODER sehr schmal einkolumnig */
@media (max-aspect-ratio: 4/3), (max-width: 819px) {
  .slide-grid { grid-template-columns: 1fr; }
}

/* 3) Sicherheitsgurt: überschreibt die alte 1100px-Regel */
@media (max-width: 1100px){
  .page-template-3dvista-popup .slide-grid { grid-template-columns: 2.2fr 1fr; }
}
/* ===== Typografie-Fix: exakte Größen wie gemessen ===== */
/* Gilt in Landscape (breiter als hoch). In Portrait bleiben deine
   bisherigen clamp-Werte aktiv, damit es auf Mobil nicht zu groß wird. */
@media (min-aspect-ratio: 4/3) {
  /* Headline */
  .gallery-headline h1{
    font-size: 75px;
    line-height: 1.05;    /* optische Zeilenhöhe */
    letter-spacing: -0.02em;
    font-weight: 800;
  }

  /* Fließtext rechts */
  .slide-text{
    font-size: 25px;
    line-height: 1.5;
  }

  /* Zähler zwischen den Pfeilen */
  .gallery-counter{
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
  }

  /* (Optional) Pfeile leicht größer, damit’s proportional wirkt */
  .gallery-btn{ width: 56px; height: 56px; }
  .arrow{ width: 42px; height: 42px; }
}
/* ====== Ziel-Layout Feinschliff (wie Referenz) ====== */

/* Artikel/Innenabstand wie im Target: oben/seitlich 75px, unten 150px für Pfeile */
.page-template-3dvista-popup .gallery-article{
  padding: 75px 75px 150px !important;
}

/* Headline ~75px, kräftig, leicht negatives Tracking */
@media (min-aspect-ratio: 4/3) {
  .gallery-headline h1{
    font-size: 75px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
  }
}

/* Bild groß, aber nicht randlos; runde Ecken wie im Screenshot */
.page-template-3dvista-popup .media-figure img{
  max-height: min(66vh, 820px);
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px; /* etwas weicher */
}

/* Copyright klein links/unten (im Screen steht er links) – bei dir evtl. rechts lassen */
.page-template-3dvista-popup .media-figure figcaption{
  left: 12px; right: auto;
  bottom: 10px;
  font-size: 12.5px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Zwei-Spalten-Layout stabil: in Landscape immer 2 Spalten, erst in Portrait stacken */
@media (min-aspect-ratio: 4/3) and (min-width: 820px){
  .page-template-3dvista-popup .slide-grid{ grid-template-columns: 2.2fr 1fr; }
}
@media (max-aspect-ratio: 4/3), (max-width: 819px){
  .page-template-3dvista-popup .slide-grid{ grid-template-columns: 1fr; }
}

/* Fließtext rechts ~20–25px – Screenshot zeigte 20px; du wolltest 25px.
   Nimm 25px, gern auf 20px ändern falls 1:1 mit Screenshot nötig. */
@media (min-aspect-ratio: 4/3){
  .page-template-3dvista-popup .slide-text{
    font-size: 25px;   /* auf 20px ändern wenn exakt wie Inspect */
    line-height: 1.5;
  }
}

/* Pfeile UNTER dem Bild in Landscape (drüber in Portrait bleibt bestehen) */
@media (min-aspect-ratio: 4/3) and (min-width: 960px){
  .page-template-3dvista-popup .gallery-controls{
    position: static;
    left: auto; bottom: auto; transform: none;
    margin: 24px auto 0;
    justify-content: center;
    z-index: 5;
  }
  .page-template-3dvista-popup slide-gallery,
  .page-template-3dvista-popup .gallery-frame--popup,
  .page-template-3dvista-popup .gallery-article{
    overflow: hidden; /* kein "Durchbluten" des nächsten Bilds */
  }
}

/* Counter ~60px wie gemessen, Pfeile proportional */
@media (min-aspect-ratio: 4/3){
  .page-template-3dvista-popup .gallery-counter{
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
  }
  .page-template-3dvista-popup .gallery-btn{ width: 56px; height: 56px; }
  .page-template-3dvista-popup .arrow{ width: 42px; height: 42px; }
}

/* Sicherheit: Clips + Slide-Breiten exakt 100% */
.page-template-3dvista-popup slide-gallery{ display:block; position:relative; overflow:hidden; }
.page-template-3dvista-popup .slides-wrapper{ will-change: transform; }
.page-template-3dvista-popup .slide{ flex:0 0 100%; min-width:100%; }

/* headline-chevron stärker sichtbar (nutzt deine --accent) */
.page-template-3dvista-popup .headline-icon{
  stroke: var(--accent);
  stroke-width: 55;
}
/* ===== Bildhöhe so begrenzen, dass die Pfeile darunter Platz haben ===== */
:root{
  /* Höhe für Controls + Abstand (Counter + Buttons) */
  --controls-space: 140px;   /* bei Bedarf 120–160px feinjustieren */
  /* geschätzter Platzbedarf für Headline (75px) + Abstand */
  --headline-space: 120px;
}

@media (min-aspect-ratio: 4/3){
  /* Platz unten für Controls konsistent halten */
  .page-template-3dvista-popup .gallery-article{
    padding-bottom: var(--controls-space) !important;
  }

  /* Bild darf nur so hoch werden, dass Headline + Controls in den Viewport passen */
  .page-template-3dvista-popup .media-figure img{
    /* Niemals zu klein, niemals zu groß – und vor allem: unterhalb der Formel kappen */
    max-height: clamp(
      420px,
      calc(100vh - var(--page-pad-y) - var(--headline-space) - var(--controls-space)),
      720px
    );
  }

  /* Controls unter dem Bild zentriert (wie zuvor) */
  .page-template-3dvista-popup .gallery-controls{
    position: static;
    transform: none;
    margin: 24px auto 0;
    justify-content: center;
  }
}
/* ===== Polyvista Match: Container, Bildhöhe, Ecken, Typo-Alias ===== */

/* 1) Container exakt wie Vorlage */
.page-template-3dvista-popup .gallery-frame--popup{
  max-width: 1330px !important;   /* aus der Vorlage */
  margin: 0 auto;
}

/* 2) Bild-Höhe in Landscape auf Vorlage limitieren + Platz für Controls */
:root{
  --controls-space: 140px;   /* ggf. 120–160 feinjustieren */
  --headline-space: 120px;   /* Headline ~75px + Luft */
}
@media (min-aspect-ratio: 4/3){
  .page-template-3dvista-popup .gallery-article{
    padding-bottom: var(--controls-space) !important;
  }
  .page-template-3dvista-popup .media-figure img{
    /* exakt wie Vorlage: nie über 770px; trotzdem Viewport-respektvoll */
    max-height: min(
      770px,
      calc(100vh - var(--page-pad-y) - var(--headline-space) - var(--controls-space))
    ) !important;
  }
}

/* 3) Keine abgerundeten Ecken */
.page-template-3dvista-popup .media-figure img{
  border-radius: 0 !important;
}

/* 4) Pfeile bleiben unter dem Bild (Landscape) – aus vorheriger Regel behalten */
@media (min-aspect-ratio: 4/3) and (min-width: 960px){
  .page-template-3dvista-popup .gallery-controls{
    position: static; transform: none; margin: 24px auto 0; justify-content: center;
  }
}

/* 5) Font-Alias: Vorlage nutzt "BasicCommercialLT". 
      Wir mappen die vorhandenen Dateien zusätzlich auf diesen Familiennamen,
      damit DevTools exakt den Namen anzeigen. */
@font-face {
  font-family: "BasicCommercialLT";
  src: url("/wp-content/uploads/fonts/Basic-Commercial-LT-Com-Roman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BasicCommercialLT";
  src: url("/wp-content/uploads/fonts/Basic-Commercial-LT-Com-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BasicCommercialLT";
  src: url("/wp-content/uploads/fonts/Basic-Commercial-LT-Com-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}

/* 6) Und dann überall genau diesen Namen verwenden (zusätzlich zu deiner bestehenden Regel) */
.page-template-3dvista-popup,
.page-template-3dvista-popup .gallery-shell--popup,
.page-template-3dvista-popup .slide-text,
.page-template-3dvista-popup h1{
  font-family: "BasicCommercialLT","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

/* === Polyvista-Match: Bildhöhe 430px, keine runden Ecken, Controls sichtbar === */

/* 0) Container wie in der Vorlage */
.page-template-3dvista-popup .gallery-frame--popup{
  max-width: 1330px !important;
  margin: 0 auto;
}

/* 1) Landscape: Bild strikt auf 430px deckeln – wie "max-h-[430px]" im Original */
@media (min-aspect-ratio: 4/3){
  .page-template-3dvista-popup .media-figure img{
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 430px !important;   /* <- Kernfix */
    border-radius: 0 !important;     /* keine runden Ecken */
  }

  /* 2) Controls unter dem Bild, nicht abgeschnitten */
  .page-template-3dvista-popup .gallery-controls{
    position: static !important;
    left: auto; bottom: auto; transform: none;
    margin: 24px auto 0;
    display: flex; justify-content: center; align-items: center;
    z-index: 5;
  }

  /* 3) Nichts darf die Controls clippen */
  .page-template-3dvista-popup .gallery-article,
  .page-template-3dvista-popup .gallery-frame--popup,
  .page-template-3dvista-popup slide-gallery{
    overflow: visible !important;
  }

  /* 4) Layout: zweispaltig halten (links Bild ~60%, rechts Text ~40%) */
  .page-template-3dvista-popup .slide-grid{
    grid-template-columns: 3fr 2fr;   /* entspricht w-3/5 + w-2/5 in deiner Vorlage */
    gap: clamp(20px, 3vw, 48px);
  }

  /* 5) Innenabstand wie im Screenshot */
  .page-template-3dvista-popup .gallery-article{
    padding: 75px 75px 150px !important;  /* Platz für Headline + Chevrons */
  }

  /* 6) Counter & Pfeile (optional auf Wunsch anpassen) */
  .page-template-3dvista-popup .gallery-counter{ font-size: 60px; font-weight: 700; line-height: 1; }
  .page-template-3dvista-popup .gallery-btn{ width: 56px; height: 56px; }
  .page-template-3dvista-popup .arrow{ width: 42px; height: 42px; }
}

/* 7) Portrait/eng: darf stacken – Buttons wieder overlay (wie vorher) */
@media (max-aspect-ratio: 4/3){
  .page-template-3dvista-popup .gallery-controls{
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    margin: 0;
  }
}