/* Shared look of all BIFOLD signage pages (styled after bifold.berlin) */
@font-face { font-family: Catamaran; src: url(fonts/Catamaran-Light.ttf);    font-weight: 300; }
@font-face { font-family: Catamaran; src: url(fonts/Catamaran-Regular.ttf);  font-weight: 400; }
@font-face { font-family: Catamaran; src: url(fonts/Catamaran-Medium.ttf);   font-weight: 500; }
@font-face { font-family: Catamaran; src: url(fonts/Catamaran-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: Catamaran; src: url(fonts/Catamaran-Bold.ttf);     font-weight: 700; }

/* Colors from bifold.berlin */
:root {
  --navy: #002F63;
  --navy-dark: #001F42;
  --cyan: #2EBAD5;
  --cyan-light: #7FCCE0;
  --ink: #202529;
  --grey: #ABACAE;
  --tint: #F4FCFD;
  --white: #FFFFFF;
  /* Everything scales with the short side -> identical at 2160x3840 and 3840x2160 */
  --u: 1vmin;
  --gutter: calc(var(--u) * 5);
  --fade: 1.2s; /* overridden by the script settings / ?fade= */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: Catamaran, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ---------- Header ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 3.2) var(--gutter);
  border-bottom: calc(var(--u) * .35) solid var(--navy);
}
.kicker { display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.kicker .eyebrow {
  font-size: calc(var(--u) * 1.9); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
}
.kicker h1 {
  font-size: calc(var(--u) * 4.4); font-weight: 700; line-height: 1; color: var(--navy);
}
header .logo { height: calc(var(--u) * 7.5); width: auto; display: block; }

main { position: relative; overflow: hidden; min-height: 0; }

/* ---------- Footer ---------- */
footer {
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2.2) var(--gutter);
  font-size: calc(var(--u) * 1.9); position: relative;
}
footer .src { font-weight: 300; }
footer .src b { font-weight: 600; }
footer .dots { display: flex; gap: calc(var(--u) * 1); }
footer .dots i {
  width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%;
  background: rgba(255,255,255,.3); transition: background .4s, transform .4s;
}
footer .dots i.on { background: var(--cyan); transform: scale(1.35); }
.progress {
  position: absolute; left: 0; top: 0; height: calc(var(--u) * .45);
  background: var(--cyan); width: 0;
}

/* ---------- Media: show images in full (contain); a blurred copy fills the margins ---------- */
.media { position: relative; overflow: hidden; background: var(--navy); }
.media figure { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) ease; }
.media figure.active { opacity: 1; }
.media .bg {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; filter: blur(calc(var(--u) * 4)) saturate(1.1) brightness(.75);
}
.media .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Images with transparency (e.g. logos): light background instead of the dark blurred copy */
.media figure.transparent { background: var(--tint); }
.media figure.transparent .bg { display: none; }

.empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: var(--gutter);
  font-size: calc(var(--u) * 3); color: var(--navy);
}