/* =========================================================
   XPROMEDIA — Stylesheet
   Schwarz / Weiß-Grau / XPROMEDIA-Rot — cinematischer Look
   ========================================================= */

:root{
  --black: #0a0a0a;
  --black-soft: #111214;
  --off-white: #f4f3f1;
  --white: #ffffff;
  --gray-100: #ececec;
  --gray-300: #d8d6d2;
  --gray-500: #8a8a88;
  --gray-700: #4a4a49;
  --red: #e5202c;
  --red-dark: #b8121c;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Single shared content grid used site-wide (header, hero/page-hero,
     footer, CTA, cards, statements, …) — one source of truth so every
     section shares the same left/right content edge. 1280px (not the
     narrower 1180px some sections used before) is the smallest value
     that still lets logo + full nav + button fit the header without
     overflowing at wide desktop widths. */
  --container: 1280px;
  --pad: clamp(24px, 5vw, 64px);

  --section-pad: clamp(80px, 12vw, 160px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  background: var(--black);
  color: var(--off-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

ul, ol{ list-style: none; margin: 0; padding: 0; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.red{ color: var(--red); }

/* ---------- Eyebrow / small red label ---------- */
.eyebrow{
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  margin: 0 0 20px;
  text-transform: uppercase;
}
.eyebrow-center{ text-align: center; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 18px 30px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:hover{ transform: translateY(-2px); }

.btn-red{
  background: var(--red);
  color: var(--white);
}
.btn-red:hover{ background: var(--red-dark); }

.btn-header{
  padding: 13px 24px;
  font-size: 13px;
}

.btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: var(--white);
}
.btn-outline:hover{
  border-color: var(--white);
  background: rgba(255,255,255,0.06);
}

.btn-play{ position: relative; }
.play-icon{
  width: 10px; height: 12px;
  display: inline-block;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--white);
}

.arrow{ display: inline-block; transition: transform .25s ease; }
.btn:hover .arrow{ transform: translateX(4px); }

.btn-sub{
  display: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 22px 0;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.header-inner{
  /* Same shared grid as every other section (--container) — logo,
     nav and button always line up with the rest of the page. */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo{ display: flex; flex-direction: column; line-height: 1; margin-right: auto; flex-shrink: 0; }
.logo-mark{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--red);
}
.logo-rest{ color: var(--white); }
.logo-sub{
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gray-500);
}
.logo-small .logo-mark{ font-size: 18px; }

/* New XPROMEDIA logo image — replaces the text wordmark above.
   Height-only sizing (width:auto) keeps its native aspect ratio
   intact; never stretched, squeezed or cropped. */
.logo-img{
  display: block;
  height: clamp(40px, 4.4vw, 50px);
  width: auto;
}
.logo-img--small{ height: 28px; }

.main-nav ul{
  display: flex;
  gap: 34px;
}
.main-nav a{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray-300);
  transition: color .2s ease;
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transition: right .25s ease;
}
.main-nav a:hover{ color: var(--white); }
.main-nav a:hover::after{ right: 0; }

.nav-toggle{
  display: none;
  width: 32px; height: 22px;
  background: none; border: none;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  z-index: 300;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

.mobile-nav{
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.77,0,.18,1);
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.mobile-nav a{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--white);
}

/* =========================================================
   PHOTO VISUALS
   Real production imagery from /assets/images
   ========================================================= */
.hero-bg,
.cta-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #0a0a0a;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-bg{
  background-image: url("../assets/images/header.png");
  background-position: right center;
}
.cta-bg{
  background-image: url("../assets/images/footer.png");
  background-position: 60% center;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100vh;   /* Rückfallebene für Browser (u. a. viele Smart-TV-Browser),
                           die die neuere Einheit "svh" nicht unterstützen –
                           ohne diese Zeile wird der Hero-Bereich dort zu klein
                           berechnet und der Text rutscht in die Menüleiste. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 120px;  /* Fester Sicherheitsabstand oben: verhindert, dass der
                           unten ausgerichtete Text unter die feste Menüleiste
                           rutscht, wenn das Browserfenster (z. B. auf einem
                           externen Bildschirm/Fernseher) niedriger ist als
                           gedacht – unabhängig von 100vh/100svh. */
}
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.62) 32%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 78%),
    linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.3) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad) clamp(64px, 9vw, 110px);
  max-width: var(--container);
  margin-inline: auto;
}
.hero .eyebrow{ margin-bottom: 22px; }
.hero-title{
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  text-transform: uppercase;
}
.hero-text{
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--gray-300);
  max-width: 560px;
  line-height: 1.6;
  margin: 0 0 40px;
}
.hero-actions{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.scroll-cue{
  position: absolute;
  bottom: 28px;
  right: var(--pad);
  z-index: 2;
  width: 26px; height: 42px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 20px;
}
.scroll-cue span{
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--white);
  border-radius: 50%;
  animation: scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(14px); opacity: 0; }
  100%{ opacity: 0; }
}

/* =========================================================
   SECTIONS — shared
   ========================================================= */
.section{ padding: var(--section-pad) 0; }
.section-light{ background: var(--gray-100); color: var(--black); }
.section-dark{ background: var(--black); color: var(--off-white); }

.section-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 clamp(48px, 7vw, 88px);
  color: var(--black);
}
.section-title.light{ color: var(--white); }
.section-title-center{ text-align: center; max-width: 780px; margin-inline: auto; }
.section-title-center{ margin-bottom: clamp(56px, 8vw, 96px); }

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.services-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.service{
  padding: 0 28px;
  border-left: 1px solid rgba(0,0,0,0.1);
  text-align: left;
}
.service:first-child{ border-left: none; padding-left: 0; }
.service-icon{
  width: 72px; height: 72px;
  margin-bottom: 26px;
}
.service h3{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.service p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 18px;
}
.service::after{
  content: "";
  display: block;
  width: 26px; height: 3px;
  background: var(--red);
}

/* =========================================================
   SELECTED WORK
   ========================================================= */
.work-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.work-item{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  background: #0a0a0a;
}
.work-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.work-item:hover .work-img{
  transform: scale(1.04);
}
.work-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
}
.work-item .play-btn{
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  transition: background .25s ease, transform .25s ease;
  z-index: 2;
}
.work-item .play-btn::after{
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.work-item:hover .play-btn{
  background: var(--red);
  border-color: var(--red);
  transform: translate(-50%, -50%) scale(1.08);
}
.work-info{
  position: absolute;
  left: 22px; bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.work-label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
}
.work-line{
  width: 26px; height: 3px;
  background: var(--red);
}

/* Zentraler Wartungshinweis unter den drei Kacheln (statt auf jedem
   einzelnen Video) — ruhig, zurückhaltend, mit demselben roten
   Linien-Akzent wie die Kacheln selbst. */
.work-notice-global{
  margin-top: clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.work-notice-global-title{
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.work-notice-global-text{
  margin: 0;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: var(--gray-300);
}
.work-notice-global-line{
  width: 32px; height: 3px;
  background: var(--red);
  margin-top: 2px;
}

/* =========================================================
   ARBEITSWEISE / PROCESS
   ========================================================= */
.process{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.process-step{
  flex: 1;
  min-width: 0;
}
.step-icon{
  width: 42px; height: 42px;
  margin-bottom: 20px;
}
.step-num{
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}
.process-step h3{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.process-step p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0;
}
.process-arrow{
  color: rgba(0,0,0,0.2);
  font-size: 20px;
  padding-top: 4px;
  flex-shrink: 0;
}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cta-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.42) 68%, rgba(0,0,0,0.3) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%);
}
.cta-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--section-pad) var(--pad);
  max-width: var(--container);
  margin-inline: auto;
}
.cta-title{
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 48px;
}
.cta-actions{
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
}
.contact-item{
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-icon{
  width: 46px; height: 46px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: border-color .2s ease, background .2s ease;
}
.contact-icon svg{ width: 20px; height: 20px; }
.contact-item:hover .contact-icon{ border-color: var(--red); background: rgba(229,32,44,0.12); }
.contact-text{ display: flex; flex-direction: column; gap: 2px; }
.contact-text strong{ font-size: 13px; letter-spacing: 0.08em; }
.contact-text small{ font-size: 13px; color: var(--gray-300); }

.cta-actions .btn-red{
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 28px;
}
.cta-actions .btn-sub{
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.85;
  text-transform: none;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 32px 0;
}
.footer-inner{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.footer-links{ display: flex; gap: 28px; }
.footer-links a{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  transition: color .2s ease;
}
.footer-links a:hover{ color: var(--white); }
.footer-social{ display: flex; gap: 16px; }
.footer-social a{
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-300);
  transition: border-color .2s ease, color .2s ease;
}
.footer-social a svg{ width: 16px; height: 16px; }
.footer-social a:hover{ border-color: var(--red); color: var(--red); }
.footer-copy{
  width: 100%;
  order: 10;
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--gray-700);
}

/* Desktop/tablet: logo, copyright, nav links and social icons all on
   the shared content baseline, vertically centered. Scoped to the
   same breakpoint the mobile stack below uses (760px), so the two
   layouts never fight over the cascade. From ~900px up this is a
   single flat row (see the min-width:900px block); below that the
   content doesn't fit one line at this font size without shrinking
   the logo or copy, which the brief rules out — so 761–899px falls
   back to two clean full-width rows instead of a broken partial wrap. */
@media (min-width: 761px){
  .site-footer{ padding: 24px 0; }
  /* Spacing comes from the explicit margins below, not a flat gap —
     keeps each row as narrow as possible. */
  .footer-inner{ gap: 0; row-gap: 16px; flex-wrap: wrap; justify-content: flex-start; }
  /* Overrides the generic .logo{margin-right:auto} (shared with the
     header) with a tight, deliberate gap to the copyright next to it. */
  .site-footer .logo{ margin-right: 22px; flex-shrink: 0; }
  .footer-copy{
    order: 2;
    width: auto;
    /* auto right-margin pushes everything after it (links + social)
       to the far right edge on a single row — same trick the header
       uses for its nav. Cancelled below 900px, where that "everything
       after" group wraps to its own row instead. */
    margin: 0 auto 0 0;
    white-space: nowrap;
  }
  .footer-links{ order: 4; margin-right: 36px; flex-shrink: 0; }
  .footer-social{ order: 5; flex-shrink: 0; }
}

@media (min-width: 761px) and (max-width: 899px){
  /* Forces a full-width break right after the copyright, so links +
     social move together to a second row instead of the last item
     (social) wrapping on its own beneath an otherwise-full first row. */
  .footer-inner::before{
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }
  .footer-copy{ margin-right: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Nav/logo switch to the mobile hamburger a bit earlier than the
   1080px content breakpoint below — the header needs a bit more
   room than that for logo + full nav + button to fit without any
   of them shrinking or overflowing. Kept as its own query so it
   doesn't disturb the unrelated content breakpoints beneath it. */
@media (max-width: 1240px){
  .main-nav, .btn-header{ display: none; }
  .nav-toggle{ display: flex; }
}

@media (max-width: 1080px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .service:nth-child(3n+1){ border-left: none; padding-left: 0; }
  .service:not(:nth-child(3n+1)){ border-left: 1px solid rgba(0,0,0,0.1); }

  .process{ flex-wrap: wrap; row-gap: 40px; }
  .process-arrow{ display: none; }
  .process-step{ flex: 1 1 40%; }
}

@media (max-width: 760px){
  .work-grid{ grid-template-columns: 1fr; }

  /* Services grid: 2 equal columns, each tile a self-contained
     centered unit (icon, heading, text, red rule all centered) —
     symmetric padding replaces the desktop divider-border layout,
     which relied on asymmetric padding that no longer applies here. */
  .services-grid{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 44px;
  }
  .service{
    border-left: none !important;
    padding: 0 !important;
    text-align: center;
  }
  .service-icon{ margin: 0 auto 22px; }
  .service::after{ margin-inline: auto; }
  /* 5th tile (KONZEPT) has no partner in row 3 — span both columns
     so its centered content sits in the middle, not stuck left. */
  .service:nth-child(5){ grid-column: 1 / -1; }

  .process{ flex-direction: column; gap: 36px; }
  .process-step{ flex: none; }

  /* CTA contact actions: 3 equal columns, icon centered above its
     label — matches ANRUFEN / WHATSAPP / NACHRICHT as one symmetric
     row instead of a left-aligned stacked list. */
  .cta-actions{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 14px;
  }
  .contact-item{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .contact-text{ align-items: center; }

  /* Footer: one centered column so logo, links, social icons and
     copyright all sit the same distance from the screen edge
     instead of hugging the left one. */
  .footer-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
  }
  .footer-links{ justify-content: center; flex-wrap: wrap; }
  .footer-social{ justify-content: center; }
  .footer-copy{ text-align: center; }

  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ justify-content: center; }
}

/* Very narrow phones: three CTA columns get too tight for
   "0152 28825587" / "Formular öffnen" without awkward wrapping —
   drop to a single centered column instead. */
@media (max-width: 340px){
  .cta-actions{ grid-template-columns: 1fr; justify-items: center; gap: 26px; }
}

@media (max-width: 480px){
  .btn{ padding: 16px 22px; font-size: 13px; }
}