@charset "UTF-8";

/* Gemeinsame Counter-Gestaltung für die drei Head-Varianten.
   Alle Längen der Anzeigetafel beziehen sich auf die Breite des jeweiligen
   Counters – nicht auf die Fensterbreite. Referenz: 2048 x 419 Pixel. */
@font-face {
  font-family: "LCD Cabb";
  src: url("font/lcd-cabb-monop-02_bb.woff") format("woff"),
       url("font/lcd-cabb-monop-02_bb.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Einheitlicher Mintton, auch für den schmalen Rand der Anzeige. */
html, body {
  background-color: #9fd6d4;
}

.counter-host,
.counter-wrap {
  container-type: inline-size;
}

.counter-panel,
.counter-frame,
.counter-screen {
  box-sizing: border-box;
}

.counter-panel {
  display: block;
  width: 100%;
  aspect-ratio: 2048 / 419;
  padding: 0.439453125cqw;
  padding-right: 0.341796875cqw;
  background-color: #9fd6d4;
}

.counter-frame {
  width: 100%;
  height: 100%;
  padding: 1.50%;
  padding-left: 1.55%;
  padding-top: 1.60%;
  padding-right: 1.52%;
  padding-bottom: 1.46%;
  border: 0.075cqw solid #1e0e0e;
  background-color: #323232;
}

.counter-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Die untere Innenkante liegt vor den vertikalen Kanten: kein
     überstehender Streifen am rechten unteren Rahmenabschluss. */
  background:
    linear-gradient(to bottom, #1a1a1a 0%, #4d4d4d 17%, #515151 33%, #505050 50%, #525252 67%, #3d3d3d 83%, #303030 100%) bottom / 100% 0.34cqw no-repeat,
    linear-gradient(to bottom, #333 0%, #191919 50%, #000 100%) top / 100% 0.14cqw no-repeat,
    linear-gradient(to right, #2d2d2d 0%, #454545 15%, #6a6a6a 28%, #696969 45%, #6a6a6a 57%, #666 70%, #2a2a2a 85%, #020202 99%, #000 100%) left / 0.39cqw 100% no-repeat,
    linear-gradient(to right, #151515, #303030 80%, #323232) right / 0.15cqw 100% no-repeat,
    #000;
  color: #fd0200;
  font-family: "LCD Cabb", monospace;
  font-size: 8.1cqw;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 1.71cqw;
  padding-left: 1.60cqw;
  padding-top: 0.1cqw;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.counter-currency {
  font: inherit;
}

/* Website-Einbindung: Anzeige im vorhandenen iFrame vertikal zentrieren.
   Die iFrame-Höhe selbst wird von der einbettenden Website bestimmt.
   Diese Regeln gelten nur für die Version ohne Logo (counter-only). */
body.counter-only {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.counter-only .counter-host {
  /* Mehr Luft zum linken/rechten iFrame-Rand, auch bei schmalen Viewports. */
  width: calc(100% - 2 * clamp(20px, 4vw, 56px));
  flex: 0 0 auto;
}

/* Einheiten wie in den Monitor- und Extern-Versionen, unabhängig von
   der Höhe des iFrames. Positionen folgen den Zifferngruppen der LCD-Schrift. */
@font-face {
  font-family: "Ebert Counter Units";
  src: url("font/Ebert-Bold.woff2") format("woff2"),
       url("font/Ebert-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body.counter-only .counter-units {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: clamp(16px, 2.5cqw, 34px);
  margin-top: clamp(4px, 0.8cqw, 10px);
  color: #fff;
  font-family: "Ebert Counter Units", sans-serif;
  font-size: clamp(12px, 2cqw, 22px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
body.counter-only .counter-unit {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
}
body.counter-only .counter-unit--mrd { left: 13.85%; }
body.counter-only .counter-unit--mio { left: 36.65%; }
body.counter-only .counter-unit--tsd { left: 59.40%; }