/* Signage Player — Glass-Design wie die Wetter-Kachel: mattierte Flächen,
   feiner weißer Rand, große Radien, tabellarische Ziffern. Alle Größen in em,
   die Basis setzt player.js anhand der echten Renderfläche (1080p ≙ 16px). */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* ------------------------------------------------------------ Ebenen */

.layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  -webkit-transition: opacity 600ms ease-in-out;
  transition: opacity 600ms ease-in-out;
  background: #000;
  overflow: hidden;
}
.layer.show { opacity: 1; }

.layer img,
.layer video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.layer img.fit-contain, .layer video.fit-contain { object-fit: contain; }
.layer img.fit-cover,   .layer video.fit-cover   { object-fit: cover; }
.layer img.fit-fill,    .layer video.fit-fill    { object-fit: fill; }

.layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* ---------------------------------------------------------- Glas-Kachel */

.glass {
  background: rgba(22, 26, 34, .38);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1.65em;
  box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------ Textfolie */

.layer .textslide {
  width: 100%; height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 4em 6em;
  background: -webkit-linear-gradient(290deg, #1b3a6b 0%, #2d6bb0 45%, #7fb3dd 100%);
  background: linear-gradient(160deg, #1b3a6b 0%, #2d6bb0 45%, #7fb3dd 100%);
}
.layer .textslide .card {
  max-width: 82%;
  padding: 2.6em 3.2em;
  text-align: center;
}
.layer .textslide .card .title {
  font-size: 1.15em;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 1em;
}
.layer .textslide .card .body {
  font-size: 4.2em;
  line-height: 1.22;
  font-weight: 300;
  letter-spacing: -.015em;
  white-space: pre-wrap;
}
.layer .textslide .card .body.long { font-size: 2.9em; }

/* ------------------------------------------------------- Daten-Kacheln */

.layer .tileslide {
  width: 100%; height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 2.2em 2.6em;
  background: -webkit-linear-gradient(290deg, #1b3a6b 0%, #2d6bb0 45%, #7fb3dd 100%);
  background: linear-gradient(160deg, #1b3a6b 0%, #2d6bb0 45%, #7fb3dd 100%);
}
/* Kacheln nutzen die volle Fläche — ohne backdrop-filter (Vollbild-Blur frisst GPU-Speicher) */
.layer .tileslide .card, .layer .textslide .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 26, 50, .42); }
.layer .tileslide .card {
  width: 100%;
  height: 100%;
  padding: 2em 2.6em;
  overflow: hidden;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.layer .tileslide .card > .tile-foot { margin-top: auto; padding-top: 1em; }
.tile-head {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;
  margin-bottom: 1.2em;
}
.tile-title { font-size: 2.4em; font-weight: 500; letter-spacing: -.01em; }
.tile-sub { font-size: 1.15em; color: rgba(255, 255, 255, .72); margin-top: .25em; }
.tile-stamp { font-size: 1.05em; color: rgba(255, 255, 255, .6); margin-top: .6em; white-space: nowrap; }
.tile-empty { font-size: 1.5em; color: rgba(255, 255, 255, .75); padding: 1em 0; }
.tile-foot { font-size: .85em; color: rgba(255, 255, 255, .45); margin-top: 1.2em; }
.sub { display: block; font-size: .8em; color: rgba(255, 255, 255, .62); margin-top: .15em; }
.dim { color: rgba(255, 255, 255, .4); }

table.fuel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.fuel th { font-size: 1.1em; font-weight: 500; color: rgba(255, 255, 255, .6); text-align: right; padding: 0 .6em .5em; letter-spacing: .04em; }
table.fuel th.hi { color: #fff; }
table.fuel td { padding: .7em .8em; border-top: 1px solid rgba(255, 255, 255, .14); vertical-align: middle; }
table.fuel td.name { font-size: 1.55em; font-weight: 500; width: 55%; }
table.fuel td.name .sub { font-size: .7em; }
table.fuel td.p { font-size: 2.1em; text-align: right; color: rgba(255, 255, 255, .7); font-weight: 300; white-space: nowrap; }
table.fuel td.p.hi { color: #fff; font-weight: 500; }
table.fuel td.p sup { font-size: .55em; vertical-align: top; position: relative; top: .15em; }
table.fuel tr.best td.p.hi { color: #f5d442; }

.cal-day { font-size: 1.1em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin: 1em 0 .4em; }
.cal-day:first-child { margin-top: 0; }
.cal-ev { display: -webkit-box; display: -webkit-flex; display: flex; padding: .6em 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.cal-time { -webkit-box-flex: 0; -webkit-flex: 0 0 9em; flex: 0 0 9em; font-size: 1.5em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.cal-sum { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; font-size: 1.6em; font-weight: 500; min-width: 0; }

/* Sprit-Verlauf */
.fh { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.fh-chart { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; height: 100%; }
.fh-chart svg { width: 100%; height: 100%; display: block; }
.fh-legend { -webkit-box-flex: 0; -webkit-flex: 0 0 19em; flex: 0 0 19em; margin-left: 2em; }
.fh-now { font-size: 2.4em; }
.fh-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; padding: 1em 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.fh-item:first-child { border-top: 0; padding-top: 0; }
.fh-dot { width: .8em; height: .8em; border-radius: 50%; margin: .55em .7em 0 0; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.fh-name { font-size: 1.15em; color: rgba(255, 255, 255, .7); }
.fh-now { font-size: 1.9em; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fh-now sup { font-size: .5em; vertical-align: top; position: relative; top: .15em; }
.fh-diff { font-size: .5em; font-weight: 500; margin-left: .4em; color: rgba(255, 255, 255, .7); }
.fh-diff.down { color: #7be38f; } .fh-diff.up { color: #ff9a8a; }
.fh-range { font-size: 1.05em; color: rgba(255, 255, 255, .6); margin-top: .15em; }

/* Nachrichten als 3D-Coverflow */
.coverflow {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #0c0a09; color: #fff; overflow: hidden;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
}
.coverflow .tile-empty { position: relative; z-index: 2; }
.cf-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
.cf-bg-img {
  position: absolute; top: -8%; left: -8%; width: 116%; height: 116%;
  background-size: cover; background-position: center;
  /* Unschärfe kommt aus einem winzigen, hochskalierten Bild (siehe player.js) — kein filter: blur */
  -webkit-transition: background-image 1s ease; transition: background-image 1s ease;
}
.cf-bg-vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: -webkit-radial-gradient(center, circle, rgba(12,10,9,.3) 0%, rgba(12,10,9,.92) 100%);
  background: radial-gradient(circle at center, rgba(12,10,9,.3) 0%, rgba(12,10,9,.92) 100%); }
.cf-eyebrow { position: relative; z-index: 2; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 1.2em; }
.cf-eyebrow h3 { margin: 0 1em; font-size: 1.3em; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #c5a880; }
.cf-eyebrow .l, .cf-eyebrow .r { display: block; width: 3.2em; height: 1px; }
.cf-eyebrow .l { background: -webkit-linear-gradient(left, transparent, #c5a880); background: linear-gradient(90deg, transparent, #c5a880); }
.cf-eyebrow .r { background: -webkit-linear-gradient(left, #c5a880, transparent); background: linear-gradient(90deg, #c5a880, transparent); }
.cf-stage { position: relative; z-index: 2; width: 100%; height: 52em; -webkit-perspective: 100em; perspective: 100em;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 1.2em; }
.cf-card {
  position: absolute; width: 46em; height: 50em; border-radius: 1.1em; overflow: hidden;
  background: #171311; border: 1px solid rgba(255,255,255,.12);
  -webkit-transform-origin: center center; transform-origin: center center;
  -webkit-transition: all 800ms cubic-bezier(.25, 1, .5, 1); transition: all 800ms cubic-bezier(.25, 1, .5, 1);
  box-shadow: 0 .9em 2.2em rgba(0,0,0,.5);
  opacity: 0; -webkit-transform: translateX(0) scale(.4) rotateY(0); transform: translateX(0) scale(.4) rotateY(0);
  -webkit-filter: brightness(.4); filter: brightness(.4); z-index: 0;
}
.cf-card.hide { display: none; }
.cf-card.c0 { opacity: 1; z-index: 30; -webkit-transform: translateX(0) scale(1) rotateY(0); transform: translateX(0) scale(1) rotateY(0); -webkit-filter: brightness(1); filter: brightness(1); box-shadow: 0 1.6em 3.8em rgba(0,0,0,.9), 0 0 2.2em rgba(197,168,128,.25); }
.cf-card.r1 { opacity: .65; z-index: 20; -webkit-transform: translateX(40em) scale(.84) rotateY(-24deg); transform: translateX(40em) scale(.84) rotateY(-24deg); -webkit-filter: brightness(.75); filter: brightness(.75); }
.cf-card.r2 { opacity: .38; z-index: 10; -webkit-transform: translateX(70em) scale(.68) rotateY(-38deg); transform: translateX(70em) scale(.68) rotateY(-38deg); -webkit-filter: brightness(.55); filter: brightness(.55); }
.cf-card.l1 { opacity: .65; z-index: 20; -webkit-transform: translateX(-40em) scale(.84) rotateY(24deg); transform: translateX(-40em) scale(.84) rotateY(24deg); -webkit-filter: brightness(.75); filter: brightness(.75); }
.cf-card.l2 { opacity: .38; z-index: 10; -webkit-transform: translateX(-70em) scale(.68) rotateY(38deg); transform: translateX(-70em) scale(.68) rotateY(38deg); -webkit-filter: brightness(.55); filter: brightness(.55); }
.cf-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.cf-img.none { background: -webkit-linear-gradient(315deg, #2a2320, #171311); background: linear-gradient(135deg, #2a2320, #171311); }
.cf-shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
  background: -webkit-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.97) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.97) 100%); }
.cf-content { position: relative; z-index: 2; width: 100%; height: 100%; padding: 1.4em 2.2em 1.8em; box-sizing: border-box;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; text-align: center;
  opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, transform 500ms ease; }
.cf-card.c0 .cf-content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.cf-tag { text-align: right; font-size: .95em; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.9); text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.cf-body { margin-top: auto; }
.cf-body h2 { margin: 0; font-size: 2.1em; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; line-height: 1.12; text-shadow: 0 3px 12px rgba(0,0,0,.95); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.cf-line { width: 2.1em; height: 2px; background: #c5a880; border-radius: 2px; margin: .5em auto .4em; box-shadow: 0 0 .5em rgba(197,168,128,.7); }
.cf-body p { font-size: 1.2em; font-style: italic; color: rgba(255,255,255,.92); margin: 0 auto .9em; line-height: 1.38; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,.9); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
.cf-pill { display: inline-block; padding: .45em 1.1em; border-radius: 999px; font-size: .7em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #110d0c;
  background: -webkit-linear-gradient(315deg, #c5a880 0%, #a48256 100%); background: linear-gradient(135deg, #c5a880 0%, #a48256 100%); box-shadow: 0 .25em .9em rgba(0,0,0,.4), 0 0 1em rgba(197,168,128,.3); }
.cf-dots { position: relative; z-index: 2; display: -webkit-box; display: -webkit-flex; display: flex; }
.cf-dots span { display: block; width: .5em; height: .5em; border-radius: 999px; background: rgba(255,255,255,.25); margin: 0 .25em; -webkit-transition: all 300ms ease; transition: all 300ms ease; }
.cf-dots span.on { width: 1.75em; background: #c5a880; box-shadow: 0 0 .6em rgba(197,168,128,.7); }

/* Schlagzeilen-Modus (Feeds ohne Bilder) */
.headlines {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  padding: 3em 4em 2.6em; box-sizing: border-box; color: #fff;
  background: -webkit-linear-gradient(300deg, #0f1c33 0%, #1d3a6a 55%, #2b5a9e 100%);
  background: linear-gradient(150deg, #0f1c33 0%, #1d3a6a 55%, #2b5a9e 100%);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.headlines:before {
  content: ''; position: absolute; right: -12em; top: -12em; width: 44em; height: 44em; border-radius: 50%;
  background: -webkit-radial-gradient(center, circle, rgba(94,200,216,.22) 0%, rgba(94,200,216,0) 70%);
  background: radial-gradient(circle at center, rgba(94,200,216,.22) 0%, rgba(94,200,216,0) 70%);
}
.hl-head { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 2em; }
.hl-source { font-size: 1.3em; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #5ec8d8; }
.hl-source:before { content: ''; display: inline-block; width: 2.6em; height: 2px; background: #5ec8d8; vertical-align: middle; margin-right: 1em; }
.hl-stamp { font-size: 1.05em; color: rgba(255,255,255,.55); }
.hl-body { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; display: -webkit-box; display: -webkit-flex; display: flex; }
.hl-main { -webkit-box-flex: 0; -webkit-flex: 0 0 58%; flex: 0 0 58%; padding-right: 4em; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); }
.hl-main.in { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 600ms ease, -webkit-transform 600ms ease; transition: opacity 600ms ease, transform 600ms ease; }
.hl-num { font-size: 1.1em; font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; margin-bottom: 1em; }
.hl-title { margin: 0; font-size: 3.6em; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-shadow: 0 .05em .3em rgba(0,0,0,.35); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.hl-line { width: 3.2em; height: 3px; background: #5ec8d8; border-radius: 2px; margin: 1.2em 0 1em; box-shadow: 0 0 .6em rgba(94,200,216,.7); }
.hl-text { margin: 0; font-size: 1.55em; line-height: 1.45; color: rgba(255,255,255,.85); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.hl-time { margin-top: 1.2em; font-size: 1em; color: rgba(255,255,255,.5); }
.hl-list { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; border-left: 1px solid rgba(255,255,255,.16); padding-left: 3em; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.hl-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; padding: .7em 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); -webkit-transition: color 400ms ease; transition: color 400ms ease; }
.hl-item:first-child { border-top: 0; }
.hl-item.on { color: #fff; }
.hl-item.done { color: rgba(255,255,255,.35); }
.hl-i { -webkit-box-flex: 0; -webkit-flex: 0 0 2.4em; flex: 0 0 2.4em; font-size: 1.05em; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(94,200,216,.6); }
.hl-item.on .hl-i { color: #5ec8d8; }
.hl-t { font-size: 1.35em; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hl-progress { position: relative; height: .35em; border-radius: .2em; background: rgba(255,255,255,.14); margin-top: 1.6em; overflow: hidden; }
.hl-progress i { display: block; height: 100%; width: 0; background: -webkit-linear-gradient(left, #5ec8d8, #f5d442); background: linear-gradient(90deg, #5ec8d8, #f5d442); }

/* Nachrichten */
.news { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; display: -webkit-box; display: -webkit-flex; display: flex; }
.news-top { -webkit-box-flex: 0; -webkit-flex: 0 0 46%; flex: 0 0 46%; margin-right: 2em; min-width: 0; }
.news-img { width: 100%; padding-top: 56%; border-radius: 1em; background-size: cover; background-position: center; background-color: rgba(0, 0, 0, .25); margin-bottom: .9em; }
.news-top-title { font-size: 2.1em; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.news-top-text { font-size: 1.25em; line-height: 1.4; color: rgba(255, 255, 255, .8); margin-top: .5em; }
.news-time { font-size: .85em; color: rgba(255, 255, 255, .55); margin-top: .4em; }
.news-list { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.news-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .75em 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.news-row:first-child { border-top: 0; padding-top: 0; }
.news-thumb { -webkit-box-flex: 0; -webkit-flex: 0 0 7.2em; flex: 0 0 7.2em; height: 4.5em; border-radius: .5em; background-size: cover; background-position: center; background-color: rgba(0, 0, 0, .25); margin-right: .9em; }
.news-thumb.none { background: rgba(255, 255, 255, .08); }
.news-row-body { min-width: 0; }
.news-row-title { font-size: 1.4em; font-weight: 500; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-row .news-time { margin-top: .2em; }

/* ------------------------------------------------------------- Uhr-Folie */

.layer .clockslide {
  width: 100%; height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  background: -webkit-radial-gradient(center, ellipse, #22344f 0%, #0d131c 70%);
  background: radial-gradient(ellipse at center, #22344f 0%, #0d131c 70%);
}
.layer .clockslide .big {
  font-size: 15em;
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .96;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.layer .clockslide .big .sec {
  font-size: .32em;
  font-weight: 400;
  opacity: .6;
  margin-left: .2em;
}
.layer .clockslide .sub {
  font-size: 2.4em;
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
  margin-top: .8em;
}

/* ---------------------------------------------------------- Standby */

.notice {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: #101214;
  text-align: center;
  padding: 0 8%;
  z-index: 5;
}
.notice.hidden { display: none; }
.notice-clock {
  font-size: 9em;
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.notice-date { font-size: 1.6em; color: rgba(255, 255, 255, .7); margin-top: .6em; margin-bottom: 2.2em; }
.notice h1 { font-size: 2.2em; font-weight: 500; margin: 0 0 .6em; letter-spacing: -.01em; }
.notice p { font-size: 1.2em; line-height: 1.5; margin: 0; color: #9aa3ab; max-width: 30em; }
.notice p span { color: #cfd5da; }

/* -------------------------------------------------------------- Uhr */

.clock {
  position: absolute;
  display: none;
  z-index: 20;
  padding: 1.4em 1.9em 1.5em;
  border-radius: 1.65em;
  background: rgba(22, 26, 34, .38);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  color: #fff;
  text-align: left;
  -webkit-transition: opacity 400ms ease, -webkit-transform 2s linear;
  transition: opacity 400ms ease, transform 2s linear;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.clock.on { display: block; }
.clock.faded { opacity: 0; }
.clock .time {
  font-size: 4.25em;
  line-height: .96;
  font-weight: 500;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.clock .time .sec { font-size: .42em; font-weight: 400; opacity: .65; margin-left: .18em; }
.clock .date {
  font-size: 1.32em;
  font-weight: 400;
  margin-top: .72em;
  color: rgba(255, 255, 255, .82);
}
.clock .wx {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  margin-top: .9em;
  padding-top: .8em;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.clock .wx svg { width: 2.6em; height: 2.6em; margin-right: .5em; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.clock .wx .wx-temp { font-size: 2.1em; font-weight: 400; letter-spacing: -.02em; margin-right: .35em; font-variant-numeric: tabular-nums; }
.clock .wx .wx-text { font-size: 1.05em; line-height: 1.25; color: rgba(255, 255, 255, .85); }
.clock .wx .wx-hl { color: rgba(255, 255, 255, .6); font-size: .9em; }
.clock.compact .wx { margin-top: .6em; padding-top: .55em; }
.clock.compact .wx svg { width: 2em; height: 2em; }
.clock.compact .wx .wx-temp { font-size: 1.6em; }
.clock.compact .wx .wx-text { font-size: .9em; }
.clock.plain .wx { border-top: 0; padding-top: 0; }

.clock.plain {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.clock.compact { padding: .9em 1.3em 1em; border-radius: 1.25em; }
.clock.compact .time { font-size: 2.75em; }
.clock.compact .date { font-size: 1em; margin-top: .5em; }

/* ---------------------------------------------------------- Laufband */

.ticker {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  z-index: 15;
  display: none;
  padding: .85em 0;
  font-size: 1.7em;
  font-weight: 400;
  background: rgba(10, 12, 18, .62);
  border-top: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  white-space: nowrap;
  overflow: hidden;
}
.ticker.on { display: block; }
.ticker.warn { background: rgba(140, 70, 10, .78); border-top-color: rgba(255, 138, 31, .7); }
.ticker.severe { background: rgba(150, 20, 20, .82); border-top-color: rgba(255, 110, 110, .8); font-weight: 600; }
.ticker-track {
  display: inline-block;
  padding-left: 100%;
  -webkit-animation: ticker-run 28s linear infinite;
  animation: ticker-run 28s linear infinite;
}
@-webkit-keyframes ticker-run { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ------------------------------------------------------------ Status */

.status {
  position: absolute;
  left: 1.2em; top: 1.2em;
  z-index: 40;
  display: none;
  padding: .55em 1em;
  font-size: 1em;
  border-radius: .9em;
  background: rgba(160, 40, 40, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.status.on { display: block; }

#debug {
  position: absolute;
  right: 0; bottom: 0;
  max-width: 46%; max-height: 45%;
  overflow: hidden;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .72);
  font-size: 13px;
  line-height: 1.45;
  color: #8fe3a0;
  display: none;
  white-space: pre-wrap;
  font-family: Menlo, Consolas, monospace;
  z-index: 50;
}
body.debug #debug { display: block; }

/* Vorschau in der Verwaltung: Status-Meldungen ausblenden, Standby kompakter */
body.preview .status { display: none !important; }

/* ---------------------------------------------------------- Speisekarte */
.menuboard { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; color: #fff; background: #111; overflow: hidden; }
.menuboard .tile-empty { padding: 3em; }
.mb-side {
  position: relative; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; flex: 0 0 25%; overflow: hidden;
  padding: 2.4em 2em; box-sizing: border-box;
  background: -webkit-linear-gradient(top, #1c8a45 0%, #0f5c2e 60%, #0a4a24 100%);
  background: linear-gradient(180deg, #1c8a45 0%, #0f5c2e 60%, #0a4a24 100%);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  box-shadow: .5em 0 2em rgba(0,0,0,.5); z-index: 2;
}
.mb-rays {
  position: absolute; left: 50%; top: 22%; width: 56em; height: 56em; margin: -28em 0 0 -28em; opacity: .16;
  background: -webkit-repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg 10deg, rgba(255,255,255,.9) 10deg 14deg);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg 10deg, rgba(255,255,255,.9) 10deg 14deg);
  -webkit-animation: mb-spin 90s linear infinite; animation: mb-spin 90s linear infinite;
}
@-webkit-keyframes mb-spin { to { -webkit-transform: rotate(360deg); } } @keyframes mb-spin { to { transform: rotate(360deg); } }
.mb-brand { position: relative; text-align: center; }
.mb-name { font-size: 2.6em; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 .1em .4em rgba(0,0,0,.45); }
.mb-sub { font-size: 1.25em; font-style: italic; color: rgba(255,255,255,.85); margin-top: .5em; }
.mb-cat { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
.mb-cat-label { font-size: 1em; letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mb-cat-name { margin: .2em 0 0; font-size: 4.2em; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -.02em; text-shadow: 0 .08em .3em rgba(0,0,0,.5); }
.mb-sizes { margin-top: 1em; font-size: 1.1em; color: rgba(255,255,255,.8); }
.mb-foot { position: relative; text-align: center; font-size: 1.05em; color: rgba(255,255,255,.8); }
.mb-page { margin-top: .4em; color: rgba(255,255,255,.55); }
.mb-board {
  position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; padding: 2em 2.4em; box-sizing: border-box;
  background: -webkit-radial-gradient(30% 20%, ellipse, #2a2a2a 0%, #141414 55%, #0a0a0a 100%);
  background: radial-gradient(ellipse at 30% 20%, #2a2a2a 0%, #141414 55%, #0a0a0a 100%);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.smoke { position: absolute; border-radius: 50%; pointer-events: none;
  background: -webkit-radial-gradient(center, ellipse, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 40%, rgba(255,255,255,0) 70%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 40%, rgba(255,255,255,0) 70%); }
.smoke.s1 { width: 30em; height: 18em; left: 20%; bottom: -8em; -webkit-animation: smoke-a 22s ease-in-out infinite; animation: smoke-a 22s ease-in-out infinite; }
.smoke.s2 { width: 24em; height: 14em; left: 55%; bottom: -6em; -webkit-animation: smoke-b 27s ease-in-out infinite; animation: smoke-b 27s ease-in-out infinite; }
.smoke.s3 { width: 20em; height: 12em; left: 5%; top: 30%; opacity: .6; -webkit-animation: smoke-c 31s ease-in-out infinite; animation: smoke-c 31s ease-in-out infinite; }
@-webkit-keyframes smoke-a { 0%,100% { -webkit-transform: translate(0,0) scale(1); opacity: .5; } 50% { -webkit-transform: translate(6em,-22em) scale(1.4); opacity: .9; } }
@keyframes smoke-a { 0%,100% { transform: translate(0,0) scale(1); opacity: .5; } 50% { transform: translate(6em,-22em) scale(1.4); opacity: .9; } }
@-webkit-keyframes smoke-b { 0%,100% { -webkit-transform: translate(0,0) scale(1); opacity: .4; } 50% { -webkit-transform: translate(-8em,-26em) scale(1.5); opacity: .8; } }
@keyframes smoke-b { 0%,100% { transform: translate(0,0) scale(1); opacity: .4; } 50% { transform: translate(-8em,-26em) scale(1.5); opacity: .8; } }
@-webkit-keyframes smoke-c { 0%,100% { -webkit-transform: translate(0,0); opacity: .3; } 50% { -webkit-transform: translate(10em,-6em); opacity: .6; } }
@keyframes smoke-c { 0%,100% { transform: translate(0,0); opacity: .3; } 50% { transform: translate(10em,-6em); opacity: .6; } }
.mb-grid { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: space-around; align-content: space-around; }
.mb-item { box-sizing: border-box; padding: .4em 1em; text-align: center; opacity: 0; -webkit-transform: translateY(2em) scale(.9); transform: translateY(2em) scale(.9); -webkit-transition: opacity 600ms ease, -webkit-transform 600ms cubic-bezier(.2,.9,.3,1.2); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.9,.3,1.2); }
.mb-item.in { opacity: 1; -webkit-transform: none; transform: none; }
.mb-grid.cols-4 .mb-item { width: 25%; } .mb-grid.cols-3 .mb-item { width: 33.333%; } .mb-grid.cols-2 .mb-item { width: 50%; }
.mb-pic { position: relative; width: 9.2em; height: 9.2em; margin: 0 auto .6em; }
.mb-grid.rows-4 .mb-pic { width: 7.2em; height: 7.2em; }
.mb-grid.rows-2 .mb-pic, .mb-grid.rows-1 .mb-pic { width: 12em; height: 12em; }
.mb-img { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; border: .28em solid #fff; box-sizing: border-box; box-shadow: 0 .6em 1.6em rgba(0,0,0,.6); background-color: #222; }
.mb-img.icon { padding: 14%; background: -webkit-linear-gradient(315deg, #3a3a3a, #1c1c1c); background: linear-gradient(135deg, #3a3a3a, #1c1c1c); }
.mb-img.icon svg { width: 100%; height: 100%; display: block; }
.mb-price { position: absolute; right: -.4em; bottom: .2em; min-width: 3.6em; padding: .45em .5em; border-radius: 2em; background: #7cb342; color: #fff; font-size: 1.05em; font-weight: 800; line-height: 1; text-align: center; box-shadow: 0 .3em .8em rgba(0,0,0,.5); border: .15em solid #fff; -webkit-transform: rotate(-8deg); transform: rotate(-8deg); }
.mb-price small { font-size: .7em; margin-left: .1em; }
.mb-item.in .mb-price { -webkit-animation: mb-pop 500ms 400ms cubic-bezier(.2,.9,.3,1.4) both; animation: mb-pop 500ms 400ms cubic-bezier(.2,.9,.3,1.4) both; }
@-webkit-keyframes mb-pop { from { -webkit-transform: rotate(-8deg) scale(0); } to { -webkit-transform: rotate(-8deg) scale(1); } }
@keyframes mb-pop { from { transform: rotate(-8deg) scale(0); } to { transform: rotate(-8deg) scale(1); } }
.mb-title { font-size: 1.35em; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; text-shadow: 0 .1em .3em rgba(0,0,0,.6); }
.mb-grid.rows-4 .mb-title { font-size: 1.15em; }
.mb-no { display: inline-block; font-size: .7em; font-weight: 700; color: #7cb342; margin-right: .5em; vertical-align: middle; }
.mb-title sup { font-size: .55em; font-weight: 500; color: rgba(255,255,255,.55); margin-left: .3em; }
.mb-desc { font-size: .98em; color: rgba(255,255,255,.78); line-height: 1.3; margin-top: .3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mb-more { font-size: .9em; color: #c5e1a5; margin-top: .3em; font-variant-numeric: tabular-nums; }
.mb-notes { position: relative; font-size: .95em; color: rgba(255,255,255,.5); text-align: center; min-height: 1.3em; margin-top: .6em; }

/* Speisekarte ohne Fotos: Text-Layout */
.mb-grid.text { -webkit-align-content: stretch; align-content: stretch; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.mb-tcol { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; padding: 0 1.2em; }
.mb-grid.text.cols-1 .mb-tcol { max-width: 70%; margin: 0 auto; }
.mb-tcol + .mb-tcol { border-left: 1px solid rgba(255,255,255,.12); }
.mb-thead { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: #a5d6a7; padding-bottom: .5em; border-bottom: 1px solid rgba(255,255,255,.18); }
.mb-thead .mb-col { width: 6.6em; font-size: 1.15em; letter-spacing: 0; }
.mb-thead-name { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.mb-col { display: inline-block; width: 5.7em; text-align: right; font-variant-numeric: tabular-nums; }
.mb-col i { color: rgba(255,255,255,.3); font-style: normal; }
.mb-col.single { width: auto; min-width: 5em; font-size: 1.35em; font-weight: 800; color: #aed581; }
.mb-col.single small { font-size: .65em; margin-left: .15em; font-weight: 600; }
.mb-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .62em 0; border-bottom: 1px dashed rgba(255,255,255,.14);
  opacity: 0; -webkit-transform: translateX(-1.5em); transform: translateX(-1.5em); -webkit-transition: opacity 500ms ease, -webkit-transform 500ms cubic-bezier(.2,.9,.3,1.1); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.9,.3,1.1); }
.mb-row.in { opacity: 1; -webkit-transform: none; transform: none; }
.mb-row:last-child { border-bottom: 0; }
.mb-badge { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 2.3em; padding: .3em .45em; box-sizing: border-box; border-radius: 1.5em; background: #7cb342; color: #fff; font-size: .95em; font-weight: 800; text-align: center; margin-right: .9em; box-shadow: 0 .2em .6em rgba(0,0,0,.5); }
.mb-rowbody { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; padding-right: .8em; }
.mb-rname { display: block; font-size: 1.45em; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mb-rname sup { font-size: .55em; font-weight: 500; color: rgba(255,255,255,.55); margin-left: .3em; }
.mb-rdesc { display: block; font-size: 1.05em; color: rgba(255,255,255,.72); line-height: 1.25; margin-top: .15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-prices { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.3em; font-weight: 700; color: #e8f5e9; white-space: nowrap; }
.mb-prices .mb-col { font-weight: 700; }
.mb-prices .mb-col:first-child { color: #aed581; }

/* Angebots-Banner auf der Speisekarte */
.mb-offer { position: relative; margin: 1.6em auto 0; padding: 1em 1.2em 1.1em; max-width: 92%; border-radius: 1em; text-align: center;
  background: -webkit-linear-gradient(315deg, #ffb300, #ff6f00); background: linear-gradient(135deg, #ffb300, #ff6f00);
  color: #1a1200; box-shadow: 0 .6em 1.6em rgba(0,0,0,.45), 0 0 0 .25em rgba(255,255,255,.35);
  -webkit-transform: rotate(-3deg); transform: rotate(-3deg);
  -webkit-animation: mb-wobble 4s ease-in-out infinite; animation: mb-wobble 4s ease-in-out infinite; }
.mb-offer:after { content: ''; position: absolute; left: 1em; right: 1em; bottom: -.55em; height: .5em; border-radius: 0 0 .5em .5em; background: rgba(0,0,0,.25); z-index: -1; }
.mb-offer-tag { display: block; font-size: .85em; font-weight: 900; letter-spacing: .35em; text-transform: uppercase; color: #7a1f00; }
.mb-offer-text { display: block; margin-top: .15em; font-size: 1.9em; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 .05em 0 rgba(255,255,255,.35); }
@-webkit-keyframes mb-wobble { 0%,100% { -webkit-transform: rotate(-3deg) scale(1); } 50% { -webkit-transform: rotate(-1deg) scale(1.05); } }
@keyframes mb-wobble { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(-1deg) scale(1.05); } }
.mb-ribbon { position: relative; z-index: 1; margin: -.6em -2.4em 1.2em; padding: .55em 2em; text-align: center; white-space: nowrap; overflow: hidden;
  background: -webkit-linear-gradient(left, #ff6f00, #ffb300 30%, #ffd54f 50%, #ffb300 70%, #ff6f00); background: linear-gradient(90deg, #ff6f00, #ffb300 30%, #ffd54f 50%, #ffb300 70%, #ff6f00);
  background-size: 200% 100%; color: #1a1200; box-shadow: 0 .4em 1.2em rgba(0,0,0,.5);
  -webkit-animation: mb-shine 3s linear infinite; animation: mb-shine 3s linear infinite; }
.mb-ribbon span { font-size: .9em; font-weight: 800; letter-spacing: .3em; margin: 0 1.4em; color: #7a1f00; }
.mb-ribbon b { font-size: 1.6em; font-weight: 900; letter-spacing: .02em; }
@-webkit-keyframes mb-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes mb-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------- Nachrichten: Editorial */
.layer.light { background: #f6f5f1; }
.editorial { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f6f5f1; color: #1a1a1a; overflow: hidden;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: none; }
.ed-empty { padding: 3em; font-size: 1.4em; color: #666; }
/* Textblock sitzt fest oben: 3,125em ≙ 50 px bei Full HD (100 px bei 4K) */
.ed-top { position: relative; z-index: 2; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 38%; padding: 3.125em 6em 1.6em; box-sizing: border-box;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;
  opacity: 0; -webkit-transform: translateY(.6em); transform: translateY(.6em); }
.ed-top.in { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: opacity 700ms ease, -webkit-transform 700ms ease; transition: opacity 700ms ease, transform 700ms ease; }
.ed-left { -webkit-box-flex: 0; -webkit-flex: 0 0 34%; flex: 0 0 34%; padding-right: 4em; padding-top: .6em; box-sizing: border-box; font-size: 1.05em; line-height: 1.5; color: #6b6b6b; }
.ed-source { color: #1a1a1a; font-weight: 600; letter-spacing: .02em; }
.ed-meta { margin-top: .2em; }
.ed-count { margin-top: 1.2em; font-variant-numeric: tabular-nums; color: #9a9a9a; letter-spacing: .1em; }
.ed-right { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.ed-title { margin: 0; font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-weight: 400; font-size: 3.6em; line-height: 1.08; letter-spacing: -.02em; color: #141414;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ed-text { margin: 1.1em 0 0; max-width: 46em; font-size: 1.25em; line-height: 1.5; color: #5a5a5a; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* Bild beginnt schon unter dem Textblock (weich ausgeblendet) und ist oben verankert,
   damit Köpfe/Motiv oben nicht abgeschnitten werden */
.ed-image { position: absolute; left: 0; right: 0; top: 26%; bottom: 0; }
.ed-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center top; -webkit-transition: opacity 600ms ease; transition: opacity 600ms ease; }
.ed-img.none { background: -webkit-linear-gradient(top, #f6f5f1, #d9d4c7); background: linear-gradient(180deg, #f6f5f1, #d9d4c7); }
.ed-fade { position: absolute; top: 0; left: 0; width: 100%; height: 40%;
  background: -webkit-linear-gradient(top, #f6f5f1 0%, #f6f5f1 22%, rgba(246,245,241,.9) 45%, rgba(246,245,241,0) 100%);
  background: linear-gradient(180deg, #f6f5f1 0%, #f6f5f1 22%, rgba(246,245,241,.9) 45%, rgba(246,245,241,0) 100%); }
.ed-dots { position: absolute; right: 6em; bottom: 2.4em; z-index: 3; display: -webkit-box; display: -webkit-flex; display: flex; }
.ed-dots span { display: block; width: .55em; height: .55em; border-radius: 50%; background: rgba(255,255,255,.55); margin-left: .45em; box-shadow: 0 0 .3em rgba(0,0,0,.35); -webkit-transition: all 300ms ease; transition: all 300ms ease; }
.ed-dots span.on { width: 1.8em; border-radius: .3em; background: #fff; }

/* ---------- Strom & Energie ---------- */
.energy {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
  padding: 2.6em 4em 2.2em; box-sizing: border-box; color: #fff;
  background: -webkit-linear-gradient(300deg, #0b1220 0%, #101a2c 50%, #13233d 100%);
  background: linear-gradient(150deg, #0b1220 0%, #101a2c 50%, #13233d 100%);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.en-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.en-glow.g1 { width: 60em; height: 60em; right: -20em; top: -28em; background: -webkit-radial-gradient(center, circle, rgba(57,135,229,.22) 0%, rgba(57,135,229,0) 68%); background: radial-gradient(circle at center, rgba(57,135,229,.22) 0%, rgba(57,135,229,0) 68%); -webkit-animation: en-drift 14s ease-in-out infinite alternate; animation: en-drift 14s ease-in-out infinite alternate; }
.en-glow.g2 { width: 50em; height: 50em; left: -18em; bottom: -26em; background: -webkit-radial-gradient(center, circle, rgba(25,158,112,.18) 0%, rgba(25,158,112,0) 68%); background: radial-gradient(circle at center, rgba(25,158,112,.18) 0%, rgba(25,158,112,0) 68%); -webkit-animation: en-drift 18s ease-in-out infinite alternate-reverse; animation: en-drift 18s ease-in-out infinite alternate-reverse; }
@-webkit-keyframes en-drift { from { -webkit-transform: translate(0, 0); } to { -webkit-transform: translate(-6em, 4em); } }
@keyframes en-drift { from { transform: translate(0, 0); } to { transform: translate(-6em, 4em); } }

.en-head { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; margin-bottom: 1.6em; }
.en-eyebrow { font-size: .95em; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.en-title { font-size: 2.6em; font-weight: 600; letter-spacing: -.02em; margin: .1em 0 0; }
.en-stamp { font-size: 1em; color: rgba(255,255,255,.55); white-space: nowrap; }
.en-grid { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; display: -webkit-box; display: -webkit-flex; display: flex; }
.en-col { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); border-radius: 1.4em; padding: 1.5em 1.7em; box-sizing: border-box; min-width: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
.en-col + .en-col { margin-left: 1.6em; }
.en-signal { -webkit-box-flex: 0; -webkit-flex: 0 0 29em; flex: 0 0 29em; }
.en-mix { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; }
.en-price { -webkit-box-flex: 1.35; -webkit-flex: 1.35 1 0; flex: 1.35 1 0; }
.en-in { opacity: 0; -webkit-transform: translateY(1.2em); transform: translateY(1.2em); -webkit-animation: en-in .7s cubic-bezier(.2,.7,.2,1) forwards; animation: en-in .7s cubic-bezier(.2,.7,.2,1) forwards; }
.en-in:nth-child(2) { -webkit-animation-delay: .15s; animation-delay: .15s; }
.en-in:nth-child(3) { -webkit-animation-delay: .3s; animation-delay: .3s; }
@-webkit-keyframes en-in { to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes en-in { to { opacity: 1; transform: translateY(0); } }
.en-sec { font-size: 1.05em; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1em; }
.en-sec small { letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.45); margin-left: .6em; }
.en-hero { font-size: 3.6em; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.en-foot { position: relative; font-size: .85em; color: rgba(255,255,255,.4); margin-top: 1.2em; }

/* Ampel */
.en-gauge { position: relative; width: 19em; height: 19em; margin: .4em auto 1em; }
.en-gauge svg { width: 100%; height: 100%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.en-g-track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 14; }
.en-g-fill { fill: none; stroke-width: 14; stroke-linecap: round; -webkit-transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1); transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1); }
.en-g-center { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; }
.en-g-sub { font-size: 1em; color: rgba(255,255,255,.6); margin-top: .5em; }
.en-status { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 1.15em; color: rgba(255,255,255,.85); margin-bottom: 1.4em; }
.en-status b { margin-right: .3em; }
.en-status i { width: 1em; height: 1em; border-radius: 50%; margin-right: .6em; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; -webkit-animation: en-blink 2.4s ease-in-out infinite; animation: en-blink 2.4s ease-in-out infinite; }
.en-status.good i, .en-legend i.good, .en-cells i.good { background: #0ca30c; }
.en-status.warn i, .en-legend i.warn, .en-cells i.warn { background: #fab219; }
.en-status.bad i, .en-legend i.bad, .en-cells i.bad { background: #d03b3b; }
.en-status.good i { box-shadow: 0 0 1.2em rgba(12,163,12,.9); }
.en-status.warn i { box-shadow: 0 0 1.2em rgba(250,178,25,.9); }
.en-status.bad i { box-shadow: 0 0 1.2em rgba(208,59,59,.9); }
@-webkit-keyframes en-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes en-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.en-strip { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-top: .7em; }
.en-status + .en-strip { margin-top: auto; }
.en-strip-day { -webkit-box-flex: 0; -webkit-flex: 0 0 4.4em; flex: 0 0 4.4em; font-size: .95em; color: rgba(255,255,255,.6); }
.en-cells { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; height: 1.4em; display: -webkit-box; display: -webkit-flex; display: flex; border-radius: .45em; overflow: hidden; }
.en-cells i { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; opacity: 0; -webkit-animation: en-cell .5s ease-out forwards; animation: en-cell .5s ease-out forwards; }
.en-cells i.past { opacity: 0; -webkit-animation-name: en-cell-past; animation-name: en-cell-past; }
.en-cells i.now { position: relative; -webkit-box-flex: 2.5; -webkit-flex: 2.5 1 0; flex: 2.5 1 0; box-shadow: inset 0 0 0 2px #fff; z-index: 2; }
@-webkit-keyframes en-cell { to { opacity: .95; } } @keyframes en-cell { to { opacity: .95; } }
@-webkit-keyframes en-cell-past { to { opacity: .38; } } @keyframes en-cell-past { to { opacity: .38; } }
.en-legend { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: .9em; color: rgba(255,255,255,.6); margin-top: 1em; }
.en-legend span { margin-right: 1.1em; white-space: nowrap; }
.en-legend i { display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .35em; vertical-align: -.02em; }
.en-legend .en-win { margin: 0 0 0 auto; color: #7be38f; font-weight: 500; white-space: normal; text-align: right; }

/* Strommix */
.en-kpis { display: -webkit-box; display: -webkit-flex; display: flex; margin-bottom: 1.2em; }
.en-kpis > div { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; }
.en-kpi { font-size: 2em; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.en-kpi-l { font-size: .9em; color: rgba(255,255,255,.55); margin-top: .2em; }
.en-rows { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; }
.en-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; opacity: 0; -webkit-animation: en-in .6s ease-out forwards; animation: en-in .6s ease-out forwards; }
.en-lab { -webkit-box-flex: 0; -webkit-flex: 0 0 9.6em; flex: 0 0 9.6em; font-size: 1.1em; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; white-space: nowrap; }
.en-ico { width: 1.7em; height: 1.7em; margin-right: .55em; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.en-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.en-track { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; height: 1.3em; background: rgba(255,255,255,.07); border-radius: .3em; overflow: hidden; }
.en-bar { width: 0; height: 100%; border-radius: 0 .3em .3em 0; -webkit-transition: width 1.4s cubic-bezier(.2,.7,.2,1); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.en-val { -webkit-box-flex: 0; -webkit-flex: 0 0 8.4em; flex: 0 0 8.4em; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.15; }
.en-val b { display: block; font-size: 1.15em; font-weight: 600; }
.en-val span { font-size: .9em; color: rgba(255,255,255,.55); }
/* Icon-Animationen */
.en-rays { -webkit-transform-origin: 20px 20px; transform-origin: 20px 20px; -webkit-animation: en-spin 16s linear infinite; animation: en-spin 16s linear infinite; }
.en-blades { -webkit-transform-origin: 20px 20px; transform-origin: 20px 20px; -webkit-animation: en-spin 3.2s linear infinite; animation: en-spin 3.2s linear infinite; }
@-webkit-keyframes en-spin { to { -webkit-transform: rotate(360deg); } } @keyframes en-spin { to { transform: rotate(360deg); } }
.en-wave { -webkit-animation: en-wave 2.6s linear infinite; animation: en-wave 2.6s linear infinite; }
@-webkit-keyframes en-wave { to { -webkit-transform: translateX(20px); } } @keyframes en-wave { to { transform: translateX(20px); } }
.en-leaf { -webkit-transform-origin: 9px 30px; transform-origin: 9px 30px; -webkit-animation: en-sway 3.4s ease-in-out infinite alternate; animation: en-sway 3.4s ease-in-out infinite alternate; }
@-webkit-keyframes en-sway { from { -webkit-transform: rotate(-7deg); } to { -webkit-transform: rotate(7deg); } } @keyframes en-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.en-flame { -webkit-transform-origin: 20px 34px; transform-origin: 20px 34px; -webkit-animation: en-flicker 1.1s ease-in-out infinite alternate; animation: en-flicker 1.1s ease-in-out infinite alternate; }
@-webkit-keyframes en-flicker { from { -webkit-transform: scale(1, 1); } 50% { -webkit-transform: scale(1.06, .94) skewX(2deg); } to { -webkit-transform: scale(.95, 1.05) skewX(-2deg); } }
@keyframes en-flicker { from { transform: scale(1, 1); } 50% { transform: scale(1.06, .94) skewX(2deg); } to { transform: scale(.95, 1.05) skewX(-2deg); } }

/* Preis */
.en-price-now { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; margin-bottom: .6em; }
.en-price-l { font-size: 1.05em; color: rgba(255,255,255,.7); margin-left: .8em; line-height: 1.25; padding-bottom: .1em; }
.en-price-l b { color: #fff; }
.en-price-l small { font-size: .85em; color: rgba(255,255,255,.45); }
.en-chart-wrap { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; }
.en-chart { width: 100%; height: 100%; display: block; }
.en-line { -webkit-transition: stroke-dashoffset 2.2s cubic-bezier(.3,.6,.3,1); transition: stroke-dashoffset 2.2s cubic-bezier(.3,.6,.3,1); }
.en-area { opacity: 0; -webkit-transition: opacity 1s 1.4s; transition: opacity 1s 1.4s; }
.energy.drawn .en-area { opacity: 1; }
.en-pulse { -webkit-transform-origin: center; transform-origin: center; -webkit-transform-box: fill-box; transform-box: fill-box; -webkit-animation: en-pulse 2s ease-out infinite; animation: en-pulse 2s ease-out infinite; }
@-webkit-keyframes en-pulse { 0% { -webkit-transform: scale(.6); opacity: 1; } 100% { -webkit-transform: scale(2.4); opacity: 0; } }
@keyframes en-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.en-stat { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: 1em; color: rgba(255,255,255,.72); margin-top: .55em; font-variant-numeric: tabular-nums; }
.en-stat > span { margin-right: 1.4em; white-space: nowrap; }
.en-stat b { color: #fff; font-weight: 600; }
.en-stat small { color: rgba(255,255,255,.45); margin-left: .25em; }
.en-stat-day { -webkit-box-flex: 0; -webkit-flex: 0 0 4.4em; flex: 0 0 4.4em; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; font-size: .85em; }
.en-stat-x { color: rgba(255,255,255,.4); }
.en-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .4em; vertical-align: .05em; }
.en-dot.lo { background: #0ca30c; } .en-dot.hi { background: #e66767; }

/* ---------- Warn-Banner (NINA) ---------- */
.warn {
  position: absolute; left: 50%; top: 1.5em; z-index: 25;
  display: none; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  max-width: 80em; min-width: 40em; padding: 1.15em 1.9em 1.2em 1.4em; border-radius: 1.5em;
  background: rgba(22, 26, 34, .6); border: 2px solid rgba(255, 255, 255, .22);
  box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35); color: #fff;
  -webkit-transform: translate(-50%, -1em); transform: translate(-50%, -1em); opacity: 0;
  -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, transform 500ms ease;
}
.warn.on { display: -webkit-box; display: -webkit-flex; display: flex; }
.warn.in { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.warn.bottom { top: auto; }
.warn:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .7em; border-radius: 1.5em 0 0 1.5em; background: #f2a516; }
.warn.minor:before { background: #f0e641; } .warn.minor .warn-ico { color: #f0e641; } .warn.minor { background: rgba(120, 110, 20, .55); border-color: rgba(240, 230, 65, .55); }
.warn.moderate:before { background: #ff8a1f; } .warn.moderate .warn-ico { color: #ff8a1f; } .warn.moderate { background: rgba(140, 70, 10, .6); border-color: rgba(255, 138, 31, .6); }
.warn.severe:before { background: #ff5050; } .warn.severe .warn-ico { color: #ff5050; } .warn.severe { background: rgba(150, 20, 20, .72); border-color: rgba(255, 110, 110, .75); }
.warn.extreme:before { background: #e060ff; } .warn.extreme .warn-ico { color: #e060ff; } .warn.extreme { background: rgba(110, 20, 130, .75); border-color: rgba(230, 120, 255, .75); }
.warn.severe, .warn.extreme { -webkit-animation: warn-glow 1.6s ease-in-out infinite; animation: warn-glow 1.6s ease-in-out infinite; }
.warn.severe .warn-head, .warn.extreme .warn-head { font-size: 2.1em; }
@-webkit-keyframes warn-glow { 0%, 100% { box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .4), 0 0 1.5em rgba(255, 60, 60, .5); } 50% { box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .4), 0 0 4em 1em rgba(255, 60, 60, .8); } }
@keyframes warn-glow { 0%, 100% { box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .4), 0 0 1.5em rgba(255, 60, 60, .5); } 50% { box-shadow: 0 .75em 2.5em rgba(0, 0, 0, .4), 0 0 4em 1em rgba(255, 60, 60, .8); } }
/* Rahmen um die ganze Fläche bei schweren Warnungen */
.warn-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 24; pointer-events: none; display: none; }
.warn-frame.on { display: block; -webkit-animation: warn-frame 1.6s ease-in-out infinite; animation: warn-frame 1.6s ease-in-out infinite; }
.warn-frame.extreme { -webkit-animation-name: warn-frame-x; animation-name: warn-frame-x; }
@-webkit-keyframes warn-frame { 0%, 100% { box-shadow: inset 0 0 0 .35em rgba(255, 60, 60, .55), inset 0 0 3em rgba(255, 60, 60, .25); } 50% { box-shadow: inset 0 0 0 .9em rgba(255, 60, 60, .95), inset 0 0 7em rgba(255, 60, 60, .5); } }
@keyframes warn-frame { 0%, 100% { box-shadow: inset 0 0 0 .35em rgba(255, 60, 60, .55), inset 0 0 3em rgba(255, 60, 60, .25); } 50% { box-shadow: inset 0 0 0 .9em rgba(255, 60, 60, .95), inset 0 0 7em rgba(255, 60, 60, .5); } }
@-webkit-keyframes warn-frame-x { 0%, 100% { box-shadow: inset 0 0 0 .35em rgba(224, 96, 255, .55), inset 0 0 3em rgba(224, 96, 255, .25); } 50% { box-shadow: inset 0 0 0 .9em rgba(224, 96, 255, .95), inset 0 0 7em rgba(224, 96, 255, .5); } }
@keyframes warn-frame-x { 0%, 100% { box-shadow: inset 0 0 0 .35em rgba(224, 96, 255, .55), inset 0 0 3em rgba(224, 96, 255, .25); } 50% { box-shadow: inset 0 0 0 .9em rgba(224, 96, 255, .95), inset 0 0 7em rgba(224, 96, 255, .5); } }
.warn-ico { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 4.4em; height: 4.4em; margin: 0 1.2em 0 .5em; -webkit-animation: warn-pulse 1.8s ease-in-out infinite; animation: warn-pulse 1.8s ease-in-out infinite; }
.warn-ico svg { width: 100%; height: 100%; display: block; }
@-webkit-keyframes warn-pulse { 0%, 100% { -webkit-transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.1); opacity: .75; } }
@keyframes warn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .75; } }
.warn-body { min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.warn-kicker { font-size: .95em; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); font-weight: 600; }
.warn-head { font-size: 1.85em; font-weight: 700; letter-spacing: -.01em; line-height: 1.12; margin-top: .15em; }
.warn-text { font-size: 1.15em; color: rgba(255, 255, 255, .9); margin-top: .35em; line-height: 1.3; }
.warn-count { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 1.2em; font-size: .9em; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }

/* ---------- Verkehr (Autobahn) ---------- */
.traffic, .liga, .air {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
  padding: 2.6em 4em 2.2em; box-sizing: border-box; color: #fff;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
.traffic { background: -webkit-linear-gradient(300deg, #0c1018 0%, #141a26 50%, #1c2333 100%); background: linear-gradient(150deg, #0c1018 0%, #141a26 50%, #1c2333 100%); }
.tr-g1 { background: -webkit-radial-gradient(center, circle, rgba(242,165,22,.16) 0%, rgba(242,165,22,0) 68%) !important; background: radial-gradient(circle at center, rgba(242,165,22,.16) 0%, rgba(242,165,22,0) 68%) !important; }
.tr-g2 { background: -webkit-radial-gradient(center, circle, rgba(57,135,229,.16) 0%, rgba(57,135,229,0) 68%) !important; background: radial-gradient(circle at center, rgba(57,135,229,.16) 0%, rgba(57,135,229,0) 68%) !important; }
.tr-side { -webkit-box-flex: 0; -webkit-flex: 0 0 30em; flex: 0 0 30em; }
.tr-list { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; }
.tr-kpis { display: -webkit-box; display: -webkit-flex; display: flex; margin-bottom: 1.4em; }
.tr-kpi { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; padding: .9em 0 .8em 1em; border-left: .3em solid; border-radius: .3em; background: rgba(255,255,255,.04); }
.tr-kpi + .tr-kpi { margin-left: .8em; }
.tr-kpi.closure { border-color: #d03b3b; } .tr-kpi.warning { border-color: #f2a516; } .tr-kpi.roadworks { border-color: #ff8a1f; }
.tr-kpi-n { font-size: 2.6em; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.tr-kpi-l { font-size: .85em; color: rgba(255,255,255,.6); margin-top: .35em; }
.tr-badge { display: inline-block; padding: .12em .5em; border-radius: .35em; background: #1f5bb5; color: #fff; font-weight: 700; font-size: .9em; letter-spacing: .02em; border: 2px solid #fff; line-height: 1.15; }
.tr-badge.big { font-size: 1.3em; margin-right: .8em; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.tr-roads { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.tr-road { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .9em 0; border-top: 1px solid rgba(255,255,255,.08); }
.tr-road-stat { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; font-size: 1em; color: rgba(255,255,255,.8); line-height: 1.3; }
.tr-flow { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; font-size: .9em; margin-left: .8em; white-space: nowrap; color: rgba(255,255,255,.75); }
.tr-flow i { display: inline-block; width: .75em; height: .75em; border-radius: 50%; margin-right: .4em; vertical-align: -.02em; -webkit-animation: en-blink 2.4s ease-in-out infinite; animation: en-blink 2.4s ease-in-out infinite; }
.tr-flow.ok i { background: #0ca30c; box-shadow: 0 0 .8em rgba(12,163,12,.9); } .tr-flow.warn i { background: #fab219; box-shadow: 0 0 .8em rgba(250,178,25,.9); } .tr-flow.bad i { background: #d03b3b; box-shadow: 0 0 .8em rgba(208,59,59,.9); }
/* kleine animierte Fahrbahn */
.tr-lane { position: relative; height: 3.2em; margin-top: 1em; border-radius: .6em; background: #2a2f3a; overflow: hidden; }
.tr-lane-line { position: absolute; left: 0; right: 0; top: 50%; height: .22em; margin-top: -.11em; background: -webkit-repeating-linear-gradient(left, #fff 0, #fff 1.6em, transparent 1.6em, transparent 3.2em); background: repeating-linear-gradient(90deg, #fff 0, #fff 1.6em, transparent 1.6em, transparent 3.2em); -webkit-animation: tr-dash 1.2s linear infinite; animation: tr-dash 1.2s linear infinite; opacity: .7; }
@-webkit-keyframes tr-dash { to { -webkit-transform: translateX(-3.2em); } } @keyframes tr-dash { to { transform: translateX(-3.2em); } }
.tr-car { position: absolute; width: 1.8em; height: .9em; border-radius: .3em; background: #fff; box-shadow: -1.2em 0 .6em rgba(255,255,255,.25); }
.tr-car.c1 { top: .45em; -webkit-animation: tr-drive 7s linear infinite; animation: tr-drive 7s linear infinite; background: #8FD3FF; }
.tr-car.c2 { bottom: .45em; -webkit-animation: tr-drive 5.2s linear infinite -2s; animation: tr-drive 5.2s linear infinite -2s; background: #ffd166; }
.tr-car.c3 { top: .45em; -webkit-animation: tr-drive 9s linear infinite -5s; animation: tr-drive 9s linear infinite -5s; background: #fff; }
@-webkit-keyframes tr-drive { from { left: -3em; } to { left: 105%; } } @keyframes tr-drive { from { left: -3em; } to { left: 105%; } }
.traffic.free .tr-lane-line { -webkit-animation-duration: .8s; animation-duration: .8s; }
.tr-cards { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; min-height: 0; }
.tr-card { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .8em 1.1em .8em 1.3em; margin-bottom: .7em; border-radius: 1em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); opacity: 0; -webkit-animation: en-in .55s cubic-bezier(.2,.7,.2,1) forwards; animation: en-in .55s cubic-bezier(.2,.7,.2,1) forwards; }
.tr-rail { position: absolute; left: 0; top: .7em; bottom: .7em; width: .3em; border-radius: 0 .3em .3em 0; }
.tr-card.closure .tr-rail { background: #d03b3b; } .tr-card.warning .tr-rail { background: #f2a516; } .tr-card.roadworks .tr-rail { background: #ff8a1f; }
.tr-card.blocked { background: rgba(208,59,59,.12); border-color: rgba(208,59,59,.35); }
.tr-card.warning .tr-ico { -webkit-animation: warn-pulse 1.6s ease-in-out infinite; animation: warn-pulse 1.6s ease-in-out infinite; }
.tr-ico { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 3.2em; height: 3.2em; margin-right: 1.1em; }
.tr-ico svg { width: 100%; height: 100%; display: block; }
.tr-main { min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.tr-top { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: .9em; color: rgba(255,255,255,.6); }
.tr-type { margin-left: .7em; text-transform: uppercase; letter-spacing: .14em; font-size: .85em; }
.tr-dir { margin-left: auto; white-space: nowrap; }
.tr-title { font-size: 1.45em; font-weight: 600; letter-spacing: -.01em; margin-top: .2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-text { font-size: 1em; color: rgba(255,255,255,.8); margin-top: .15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-meta { font-size: .85em; color: rgba(255,255,255,.55); margin-top: .3em; }
.tr-meta span + span:before { content: '·'; margin: 0 .5em; }
.tr-meta b { color: #ff8a8a; font-weight: 600; }
.tr-free { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
.tr-free svg { width: 9em; height: 9em; margin-bottom: 1em; }
.tr-check { stroke-dasharray: 60; stroke-dashoffset: 60; -webkit-animation: tr-check 1s .4s ease-out forwards; animation: tr-check 1s .4s ease-out forwards; }
@-webkit-keyframes tr-check { to { stroke-dashoffset: 0; } } @keyframes tr-check { to { stroke-dashoffset: 0; } }
.tr-free-t { font-size: 2.4em; font-weight: 600; letter-spacing: -.02em; }
.tr-free-s { font-size: 1.1em; color: rgba(255,255,255,.65); margin-top: .4em; }

/* ---------- Fußball (OpenLigaDB) ---------- */
.liga { background: -webkit-linear-gradient(300deg, #071a11 0%, #0d2b1c 50%, #113a25 100%); background: linear-gradient(150deg, #071a11 0%, #0d2b1c 50%, #113a25 100%); }
.lg-g1 { background: -webkit-radial-gradient(center, circle, rgba(60,200,120,.18) 0%, rgba(60,200,120,0) 68%) !important; background: radial-gradient(circle at center, rgba(60,200,120,.18) 0%, rgba(60,200,120,0) 68%) !important; }
.lg-g2 { background: -webkit-radial-gradient(center, circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 68%) !important; background: radial-gradient(circle at center, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 68%) !important; }
/* Rasenstreifen */
.lg-pitch { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; opacity: .5; background: -webkit-repeating-linear-gradient(left, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 8em, transparent 8em, transparent 16em); background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 8em, transparent 8em, transparent 16em); }
.lg-table { -webkit-box-flex: 1.2; -webkit-flex: 1.2 1 0; flex: 1.2 1 0; }
.lg-matches { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; }
.lg-rows { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; min-height: 0; }
.lg-row { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: 1.05em; padding: .18em .6em .18em .9em; border-radius: .5em; font-variant-numeric: tabular-nums; opacity: 0; -webkit-animation: en-in .5s ease-out forwards; animation: en-in .5s ease-out forwards; }
.lg-row.head { opacity: 1; -webkit-animation: none; animation: none; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); padding-bottom: .6em; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: .3em; }
.lg-row:before { content: ''; position: absolute; left: 0; top: .3em; bottom: .3em; width: .28em; border-radius: .2em; }
.lg-row.z-cl:before, .lg-legend i.z-cl { background: #3987e5; } .lg-row.z-el:before, .lg-legend i.z-el { background: #e08f1a; } .lg-row.z-ecl:before, .lg-legend i.z-ecl { background: #19a06d; } .lg-row.z-rel:before, .lg-legend i.z-rel { background: #c7a600; } .lg-row.z-down:before, .lg-legend i.z-down { background: #d03b3b; }
.lg-row.fav, .lg-match.fav { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.lg-rank { -webkit-box-flex: 0; -webkit-flex: 0 0 1.8em; flex: 0 0 1.8em; text-align: right; color: rgba(255,255,255,.7); margin-right: .7em; }
.lg-ico, .layer .liga img.lg-ico { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 1.7em; height: 1.7em; object-fit: contain; margin-right: .7em; display: inline-block; vertical-align: middle; }
.layer .liga img.lg-ico { background: none; }
.lg-ico.blank { background: rgba(255,255,255,.08); border-radius: 50%; }
.lg-name { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.lg-n { -webkit-box-flex: 0; -webkit-flex: 0 0 3.6em; flex: 0 0 3.6em; text-align: right; }
.lg-n.dim { color: rgba(255,255,255,.55); -webkit-flex-basis: 4.6em; flex-basis: 4.6em; }
.lg-pts { position: relative; -webkit-box-flex: 0; -webkit-flex: 0 0 5.2em; flex: 0 0 5.2em; margin-left: .8em; text-align: right; height: 1.5em; line-height: 1.5em; }
.lg-pts b { position: relative; font-size: 1.1em; font-weight: 700; padding-right: .3em; }
.lg-ptbar { position: absolute; right: 0; top: 0; height: 100%; width: 0; border-radius: .3em; background: rgba(255,255,255,.12); -webkit-transition: width 1.3s cubic-bezier(.2,.7,.2,1); transition: width 1.3s cubic-bezier(.2,.7,.2,1); }
.lg-legend { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; font-size: .8em; color: rgba(255,255,255,.55); margin-top: .8em; }
.lg-legend span { margin-right: 1.1em; white-space: nowrap; }
.lg-legend i { display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .35em; }
.lg-list { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; }
.lg-day { font-size: .85em; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: .7em 0 .3em; }
.lg-day:first-child { margin-top: 0; }
.lg-match { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .42em .7em; border-radius: .6em; font-size: 1.1em; opacity: 0; -webkit-animation: en-in .5s ease-out forwards; animation: en-in .5s ease-out forwards; }
.lg-team { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.lg-team.home { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; }
.lg-team.home .lg-ico { margin: 0 0 0 .6em; } .lg-team.away .lg-ico { margin: 0 .6em 0 0; }
.lg-score { -webkit-box-flex: 0; -webkit-flex: 0 0 5.4em; flex: 0 0 5.4em; text-align: center; font-weight: 700; font-size: 1.15em; letter-spacing: .02em; padding: .1em 0; margin: 0 .6em; border-radius: .4em; background: rgba(255,255,255,.1); font-variant-numeric: tabular-nums; }
.lg-score.time { font-weight: 500; font-size: .85em; color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); padding: .35em 0; }
.lg-score.live { background: rgba(208,59,59,.25); color: #fff; }
.lg-score.live i, .lg-live i { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: #ff5050; margin-right: .4em; vertical-align: .1em; box-shadow: 0 0 .6em #ff5050; -webkit-animation: en-blink 1.2s ease-in-out infinite; animation: en-blink 1.2s ease-in-out infinite; }
.lg-live { color: #ff8a8a; font-weight: 700; letter-spacing: .1em; }
.lg-state { color: rgba(255,255,255,.75); }
.lg-next-sec { margin-top: 1.2em; padding-top: 1em; border-top: 1px solid rgba(255,255,255,.1); }
.lg-next { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.lg-match.compact { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; flex: 0 0 50%; font-size: .9em; padding: .25em .5em; box-sizing: border-box; }
.lg-match.compact .lg-ico, .layer .liga .lg-match.compact img.lg-ico { width: 1.3em; height: 1.3em; }
.lg-match.compact .lg-score { -webkit-flex-basis: 4.6em; flex-basis: 4.6em; margin: 0 .4em; }

/* ---------- Pollen & Luftqualität ---------- */
.air { background: #0d1a2c; }
.air-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: opacity 2s; transition: opacity 2s;
  background: -webkit-linear-gradient(300deg, #0b1e2e 0%, #13304a 50%, #1a4a5c 100%); background: linear-gradient(150deg, #0b1e2e 0%, #13304a 50%, #1a4a5c 100%); }
.air.lvl-2 .air-bg { background: -webkit-linear-gradient(300deg, #1a2416 0%, #2c3c1c 50%, #4a5a22 100%); background: linear-gradient(150deg, #1a2416 0%, #2c3c1c 50%, #4a5a22 100%); }
.air.lvl-3 .air-bg { background: -webkit-linear-gradient(300deg, #2a1414 0%, #4a1c1c 50%, #5c2a22 100%); background: linear-gradient(150deg, #2a1414 0%, #4a1c1c 50%, #5c2a22 100%); }
.air.lvl-4 .air-bg, .air.lvl-5 .air-bg { background: -webkit-linear-gradient(300deg, #200a16 0%, #3a1030 50%, #4a1848 100%); background: linear-gradient(150deg, #200a16 0%, #3a1030 50%, #4a1848 100%); }
.air-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.air-fx i { position: absolute; display: block; border-radius: 50%; -webkit-animation: air-rise linear infinite, air-sway ease-in-out infinite alternate; animation: air-rise linear infinite, air-sway ease-in-out infinite alternate; }
.air-fx i.grain { background: #ffe066; box-shadow: 0 0 .6em rgba(255,224,102,.9), 0 0 1.4em rgba(255,200,40,.5); }
.air-fx i.dust { background: rgba(255,255,255,.55); box-shadow: 0 0 .5em rgba(255,255,255,.4); }
@-webkit-keyframes air-rise { 0% { -webkit-transform: translateY(0); opacity: 0; } 8% { opacity: .95; } 85% { opacity: .8; } 100% { -webkit-transform: translateY(-90em); opacity: 0; } }
@keyframes air-rise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .95; } 85% { opacity: .8; } 100% { transform: translateY(-90em); opacity: 0; } }
@-webkit-keyframes air-sway { from { margin-left: -1.5em; } to { margin-left: 1.5em; } } @keyframes air-sway { from { margin-left: -1.5em; } to { margin-left: 1.5em; } }
.air .en-head, .air .en-grid, .air .en-foot { position: relative; }
.air-aqi { -webkit-box-flex: 0; -webkit-flex: 0 0 29em; flex: 0 0 29em; }
.air-pollutants { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; }
.air-pollen { -webkit-box-flex: 1.15; -webkit-flex: 1.15 1 0; flex: 1.15 1 0; }
.air-gauge { width: 14em; height: 14em; margin-bottom: .6em; }
.air-g-fill { -webkit-filter: drop-shadow(0 0 .4em currentColor); filter: drop-shadow(0 0 .4em currentColor); }
.air-g-label { font-size: 1.1em; font-weight: 600; margin-top: .4em; }
.air-scale { display: -webkit-box; display: -webkit-flex; display: flex; height: .7em; border-radius: .35em; overflow: hidden; }
.air-scale i { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; opacity: .45; }
.air-scale i.on { opacity: 1; box-shadow: inset 0 0 0 2px #fff; }
.air-scale-l { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; font-size: .8em; color: rgba(255,255,255,.5); margin-top: .3em; }
.air-sub { margin-top: 1.2em; }
.air-chart { width: 100%; height: auto; display: block; }
.air-line { -webkit-transition: stroke-dashoffset 2s cubic-bezier(.3,.6,.3,1); transition: stroke-dashoffset 2s cubic-bezier(.3,.6,.3,1); }
.air-area { opacity: 0; -webkit-transition: opacity 1s 1.2s; transition: opacity 1s 1.2s; }
.air.drawn .air-area { opacity: 1; }
.air-uv { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-top: auto; padding-top: 1em; font-size: 1em; }
.air-uv-l { color: rgba(255,255,255,.6); margin-right: .8em; white-space: nowrap; }
.air-uv-track { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; height: .6em; border-radius: .3em; background: rgba(255,255,255,.08); overflow: hidden; margin-right: .8em; }
.air-uv-track i { display: block; height: 100%; border-radius: .3em; }
.air-uv b { font-size: 1.4em; margin-right: .5em; }
.air-uv small { color: rgba(255,255,255,.55); white-space: nowrap; }
.air-rows { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; }
.air-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.air-lab { -webkit-box-flex: 0; -webkit-flex: 0 0 10.5em; flex: 0 0 10.5em; font-size: 1.05em; white-space: nowrap; }
.air-track { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; height: 1.2em; background: rgba(255,255,255,.07); border-radius: .3em; overflow: hidden; }
.air-bar { width: 0; height: 100%; border-radius: 0 .3em .3em 0; -webkit-transition: width 1.4s cubic-bezier(.2,.7,.2,1); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.air-ticks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; }
.air-ticks i { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; border-right: 1px solid rgba(0,0,0,.35); }
.air-ticks i:last-child { border-right: 0; }
.air-val { -webkit-box-flex: 0; -webkit-flex: 0 0 5.6em; flex: 0 0 5.6em; text-align: right; font-variant-numeric: tabular-nums; margin-left: .8em; }
.air-val b { font-size: 1.2em; font-weight: 600; } .air-val small { display: block; font-size: .75em; color: rgba(255,255,255,.5); }
.air-pill { -webkit-box-flex: 0; -webkit-flex: 0 0 7.8em; flex: 0 0 7.8em; margin-left: .9em; text-align: center; font-size: .8em; font-weight: 600; color: #101a2c; padding: .3em .5em; border-radius: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air-legend { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; font-size: .8em; color: rgba(255,255,255,.55); margin-top: .9em; }
.air-legend span { margin-right: 1em; white-space: nowrap; }
.air-legend i { display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .35em; }
.air-pols { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; }
.air-pol { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .5em .7em; border-radius: .8em; }
.air-pol.active { background: rgba(255,255,255,.05); }
.air-pol-ico { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 2.8em; height: 2.8em; margin-right: .9em; }
.air-pol-ico svg { width: 100%; height: 100%; display: block; }
.air-pol.active .air-pol-ico { -webkit-animation: en-sway 3s ease-in-out infinite alternate; animation: en-sway 3s ease-in-out infinite alternate; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.air-pol-main { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.air-pol-name { font-size: 1.15em; font-weight: 500; }
.air-pol-name small { font-size: .75em; color: rgba(255,255,255,.5); margin-left: .5em; font-weight: 400; }
.air-fcs { display: -webkit-box; display: -webkit-flex; display: flex; margin-top: .25em; font-size: .8em; color: rgba(255,255,255,.55); }
.air-fc { margin-right: .9em; white-space: nowrap; }
.air-fc i { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: .3em; vertical-align: -.02em; }
.air-pips { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -webkit-flex; display: flex; margin: 0 1em; }
.air-pips i { display: block; width: 1.1em; height: 1.8em; border-radius: .3em; background: rgba(255,255,255,.1); margin-left: .3em; }
.air-pips i.on { -webkit-animation: air-pip .5s ease-out both; animation: air-pip .5s ease-out both; }
.air-pips i.on:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; } .air-pips i.on:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; } .air-pips i.on:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }
@-webkit-keyframes air-pip { from { -webkit-transform: scaleY(.2); opacity: 0; } to { -webkit-transform: scaleY(1); opacity: 1; } } @keyframes air-pip { from { transform: scaleY(.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.air-pol-lvl { -webkit-box-flex: 0; -webkit-flex: 0 0 5.6em; flex: 0 0 5.6em; text-align: right; font-weight: 600; font-size: 1.05em; }