/* ====== Variablen (nutzt eure vorhandenen, hier defaults/fallbacks) ====== */
:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-opaque:rgba(255,255,255,0.88);
  --text:#111315;
  --muted:#5e6572;
  --border:#e6e8ec;
  --accent:#0ea5e9; /* ggf. eure Rot-/Türkis-Akzentfarbe */
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10;
    --surface:#111827;
    --surface-opaque:rgba(17,24,39,0.86);
    --text:#e5e7eb;
    --muted:#9aa2af;
    --border:#232a36;
    --shadow:0 20px 50px rgba(0,0,0,.6);
  }
}

/* ====== Hero: Fullscreen Medienbereich ====== */
.hero-video {
  position: relative;
  width: 100%;
  background: transparent; /* oder var(--bg), falls Hintergrund gewünscht */
  overflow: hidden;         /* clip nur, wenn nötig */
  aspect-ratio: auto;       /* keine erzwungene 16:9-Form */
  min-height: 0;     
  display: block;       /* entfernt die Mindesthöhe */
}

/* Normalzustand */
.page-wrapper {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* Wenn Video-Modal geöffnet wird */
.page-wrapper.dimmed {
  filter: blur(6px) brightness(0.6);
  opacity: 0.7;
  pointer-events: none; /* verhindert Klicks auf den Hintergrund */
}

.hero-media, .hero-gif {
  position: relative; /* nicht absolut, damit der Container mitwächst */
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero-gif {
  object-fit: contain;
  max-height: 90vh;
  padding-inline: 2vw;
  background-color: transparent; /* kein sichtbarer Rand */
  transform: scale(0.9);
  transform-origin: center;
}



/* ====== Overlay-Infokarte ====== */
.info-card {
  position: absolute;
  top: 50%;                      /* vertikal zentrieren */
  right: clamp(16px, 4vw, 40px); /* Abstand vom rechten Rand */
  transform: translateY(-50%);
  background: var(--surface-opaque, rgba(255,255,255,.88));
  color: var(--text, #111315);
  border: 1px solid var(--border, #e6e8ec);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: clamp(18px, 2vw, 26px);
  max-width: min(90%, 420px);     /* begrenzt die Breite */
  max-height: 90%;                /* verhindert Überragen nach oben/unten */
  overflow-y: auto;               /* falls Text länger wird */
}

/* Typografie wie im Screenshot */
.info-card h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.15;
}
.info-card p {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.5vw, 1.05rem);
  line-height: 1.6;
  color: var(--muted, #222);
}

.btn-primary {
  appearance: none;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.2em;
  font-weight: 800;
  letter-spacing: .06em;
  border: 1px solid transparent;
  background: #cf3b35;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:focus-visible { outline: 3px solid rgba(207,59,53,.35); outline-offset: 2px; }


/* ====== Responsive: Info-Karte unter dem Video auf klein ====== */
@media (max-width: 768px){
  .info-card {
    position: static;
    transform: none;
    max-width: 95%;
    max-height: none;
    margin-top: 16px;
  }
  .hero-video{
    display: flex;                  /* damit Info-Karte danach kommt */
    flex-direction: column;
    min-height: auto;
  }
  .hero-media{ position: relative; inset: auto; width: 100%; height: auto; }
  .hero-gif{ position: relative; width:100%; height:auto; object-fit: cover; }
}

/* ====== Modal / Lightbox ====== */
.video-modal[hidden]{ display: none; }
.video-modal{
  position: fixed; inset: 0; z-index: 9999;
}
.modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
}
.modal-content{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 960px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(12px, 2vw, 16px);
}

.video{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #000;
}

/* A11y helper */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}