/* SAFECOR CONTECON OnePager - Layout und Darstellung */

:root {
  --brand-red:  #C90513;
  --brand-blue: #3172B6;
  --ink:        #0e1216;
  --paper:      #e9edf2;

  /* Zeiten der Videoblende. Muessen zu FADE_MS / HOLD_MS in app.js passen. */
  --fade: 600ms;
}

* { box-sizing: border-box; }

/* Muss nach .banner{display:flex} greifen, sonst bleibt [hidden] wirkungslos. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Buehne: Bild- und Videoebenen ---------- */

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }

/* Querformat: das Filmfenster fuellt den Bildschirm randlos. */
.stage__frame { position: absolute; inset: 0; overflow: hidden; }

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Vorschaubild: leicht unscharf, damit der Schaerfegewinn beim Nachladen sichtbar wird */
#imgSmall { filter: blur(5px); transform: scale(1.03); }

#imgFull { opacity: 0; transition: opacity 700ms ease; }
#imgFull.on { opacity: 1; }

video.layer { opacity: 0; transition: opacity var(--fade) ease; }
video.layer.on { opacity: 1; }

#gifFallback { display: none; }
#gifFallback.on { display: block; }

/* ---------- Kopfbanner ---------- */

.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem .9rem;
  padding: 1rem 1.2rem 1.5rem;
  background: linear-gradient(180deg, rgba(8,12,16,.78) 0%, rgba(8,12,16,.55) 55%, rgba(8,12,16,0) 100%);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 380ms ease, transform 380ms ease;
  pointer-events: none;
}

.banner.on { opacity: 1; transform: none; pointer-events: auto; }

.banner__text { font-size: .9rem; color: rgba(255,255,255,.88); }

.banner__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.banner__link:hover,
.banner__link:focus-visible { background: var(--brand-blue); border-color: var(--brand-blue); }

.banner__link::after { content: "\2192"; }

/* Sperrhinweis: dauerhaft sichtbar, kein Ausblenden */
.banner--denied {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  flex-direction: column;
  gap: .3rem;
  padding-top: 1.15rem;
  border-top: 3px solid var(--brand-red);
  background: linear-gradient(180deg, rgba(8,12,16,.9) 0%, rgba(8,12,16,.68) 55%, rgba(8,12,16,0) 100%);
}

.banner--denied .banner__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}

.banner--denied .banner__title::before {
  content: "";
  display: inline-block;
  width: .6rem; height: .6rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--brand-red);
  vertical-align: middle;
}

.banner--denied .banner__text {
  max-width: 62ch;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
  text-align: center;
}

/* ---------- Fusszeile ---------- */

.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .4rem 1.2rem;
  padding: 1.6rem 1.2rem .8rem;
  font-size: .74rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.68);
  background: linear-gradient(0deg, rgba(8,12,16,.72) 0%, rgba(8,12,16,.4) 55%, rgba(8,12,16,0) 100%);
}

.footer__hint { text-transform: uppercase; letter-spacing: .09em; }

.footer__nav { display: flex; gap: 1.1rem; }

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.footer__icon { flex: none; }

.footer__link:hover,
.footer__link:focus-visible { color: #fff; border-color: #fff; }

/* ---------- Popups ---------- */

dialog {
  width: min(720px, 92vw);
  max-height: min(82vh, 900px);
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(14,18,24,.94);
  color: var(--paper);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

@supports (backdrop-filter: blur(1px)) {
  dialog { backdrop-filter: blur(16px); background: rgba(14,18,24,.82); }
}

dialog::backdrop { background: rgba(6,9,12,.55); }

.dlg__head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: inherit;
}

.dlg__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }
.dlg__title::after {
  content: "";
  display: block;
  width: 2.2rem; height: 2px;
  margin-top: .45rem;
  background: var(--brand-red);
}

.dlg__close {
  flex: none;
  width: 2rem; height: 2rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}

.dlg__close:hover, .dlg__close:focus-visible { background: rgba(255,255,255,.14); }

.dlg__body {
  max-height: calc(min(82vh, 900px) - 4.6rem);
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.6rem;
  font-size: .88rem;
  line-height: 1.62;
}

.dlg__body h3 {
  margin: 1.5rem 0 .35rem;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.62);
}

.dlg__body h3:first-child { margin-top: 0; }
.dlg__body p { margin: 0 0 .7rem; }
.dlg__body ul { margin: 0 0 .7rem; padding-left: 1.15rem; }
.dlg__body li { margin-bottom: .2rem; }
.dlg__body a { color: #9cc4ea; }

/* ---------- Barrierefreiheit ---------- */

:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #imgSmall { filter: none; transform: none; }
  .banner, video.layer, #imgFull { transition-duration: 1ms; }
}

/* Hochformat: Randlos gefuellt bliebe von 16:9 nur ein schmaler Streifen der
   Bildmitte uebrig, das Logo faellt dabei aus dem Bild. Deshalb sitzt das
   Filmfenster hier mittig im Bildschirm und zeigt den vollstaendigen Ausschnitt.
   Fuer randlos auch im Hochformat diesen Block entfernen. */
@media (max-aspect-ratio: 1 / 1) {
  .stage { display: grid; place-items: center; }
  .stage__frame {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px) {
  .footer { justify-content: center; text-align: center; }
  .banner { padding: .85rem 1rem 1.3rem; }
}