/* Kundenanzeige — Wallboard 5, Lastenheft Kapitel 5.
 *
 * Zielformat ist Portrait 9:16 (Digital-Signage-Standard). Die
 * Landscape-Variante entsteht über eine einzige Medienabfrage am Ende: Das
 * Lastenheft verlangt sie als Lieferung, aber ein zweiter Satz Seiten wäre
 * doppelte Pflege für dieselben Inhalte.
 *
 * Schriftgrößen nach 5.3: Hauptzahl mindestens 200 px, Aussagesatz mindestens
 * 48 px. Beides in Vielfachen der Viewport-Breite, damit es auf jedem
 * Bildschirm gleich wirkt — feste Pixel wären auf einem 4K-Display halb so
 * groß wie gedacht.
 */

:root {
  --rot: #c4161c;
  --rot-hell: #e8434a;
  --dunkel: #0d1117;
  --dunkel2: #161b26;
  --weiss: #ffffff;
  --grau: #9aa4b2;
  --gruen: #12b981;
  --gold: #f5b100;

  /* Schriftgrößen, Portrait. 1vw ist bei 2160 px Breite gut 21 px. */
  --zahl-riesig: 19vw;    /* ≈ 410 px auf 9:16-4K — die Hauptzahl */
  --zahl-gross: 12vw;
  --zahl-mittel: 7vw;
  --satz: 3.6vw;          /* ≈ 78 px — Aussagesatz */
  --klein: 2.2vw;
  --winzig: 1.5vw;
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--dunkel);
  color: var(--weiss);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Tabellarische Ziffern: Ohne sie springt die Breite jeder Zahl beim
   * Hochzählen, und die ganze Zeile zappelt. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  cursor: none;                    /* Kiosk: kein Zeiger sichtbar */
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Seiten und Übergänge

   Sanftes Ein- und Ausblenden mit leichter Bewegung. Keine harten Schnitte
   und nichts, was blinkt (Lastenheft 5.3) — Blinken wirkt billig und ist für
   Menschen mit Photosensibilität ein Problem.
   ───────────────────────────────────────────────────────────────────────── */
.seite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6vw 5vw;
  opacity: 0;
  transform: translateY(2.5vh) scale(0.995);
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
  text-align: center;
}
.seite.aktiv { opacity: 1; transform: none; }

/* Fortschrittspunkte unten — der Slide-Indikator aus Lastenheft 0.4 */
.punkte {
  position: absolute; bottom: 2.6vh; left: 0; right: 0;
  display: flex; justify-content: center; gap: 1.1vw;
  z-index: 20;
}
.punkt {
  width: 0.9vw; height: 0.9vw; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .5s ease, transform .5s ease;
}
.punkt.an { background: var(--rot-hell); transform: scale(1.45); }

/* Kopfzeile mit Marke und Demo-Hinweis */
.kopf {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.2vh 4vw; z-index: 15;
}
.marke { display: flex; align-items: center; gap: 1vw;
         font-size: var(--klein); font-weight: 700; letter-spacing: .04em; }
.marke .flamme { color: var(--rot); font-size: calc(var(--klein) * 1.3); }
.demo {
  font-size: var(--winzig); color: var(--grau); text-align: right;
  line-height: 1.45; letter-spacing: .02em;
}
.demo b { color: var(--gold); }

/* ─────────────────────────────────────────────────────────────────────────
   Bausteine
   ───────────────────────────────────────────────────────────────────────── */
.aussage {
  font-size: var(--satz); font-weight: 400; color: var(--grau);
  line-height: 1.35; max-width: 82%;
}
.aussage b, .aussage strong { color: var(--weiss); font-weight: 700; }

.zahl {
  font-size: var(--zahl-riesig); font-weight: 800; line-height: .95;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 30%, #b8c2d0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zahl.rot {
  background: linear-gradient(180deg, var(--rot-hell) 20%, var(--rot) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.zahl.gruen {
  background: linear-gradient(180deg, #34e5a8 20%, var(--gruen) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.zahl-mittel { font-size: var(--zahl-mittel); font-weight: 800; }
.einheit { font-size: var(--zahl-mittel); font-weight: 600; color: var(--grau); }

.reihe { display: flex; gap: 5vw; align-items: flex-end;
         justify-content: center; flex-wrap: wrap; }
.block { display: flex; flex-direction: column; align-items: center;
         gap: 0.8vh; }
.block .beschriftung { font-size: var(--klein); color: var(--grau);
                       letter-spacing: .05em; text-transform: uppercase; }

/* ─────────────────────────────────────────────────────────────────────────
   Karte (Seite 2)

   Pulsierende Punkte, keine blinkenden: Die Animation läuft langsam und
   endet in Ruhe, statt an- und auszugehen.
   ───────────────────────────────────────────────────────────────────────── */
.karte { width: 92%; height: 52vh; position: relative; }
.karte svg { width: 100%; height: 100%; }
.land { fill: #1e2634; stroke: #2c3646; stroke-width: 0.6; }
.punkt-ort { fill: var(--rot-hell); }
.puls {
  fill: none; stroke: var(--rot-hell); stroke-width: 1.6;
  transform-origin: center; transform-box: fill-box;
  animation: pulsieren 3.4s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes pulsieren {
  0%   { r: 2;  opacity: .85; }
  70%  { r: 16; opacity: 0; }
  100% { r: 16; opacity: 0; }
}
.ortname { fill: #c8d2e0; font-size: 5px; text-anchor: middle;
           font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────
   Sterne, Balken, Ring
   ───────────────────────────────────────────────────────────────────────── */
.sterne { font-size: calc(var(--zahl-mittel) * 0.9); color: var(--gold);
          letter-spacing: 0.6vw; }
.balkenliste { width: 74%; display: flex; flex-direction: column;
               gap: 1.8vh; margin-top: 3vh; }
.balkenzeile { display: flex; align-items: center; gap: 1.6vw; }
.balkenzeile .rang {
  font-size: var(--klein); font-weight: 800; color: var(--rot-hell);
  width: 3vw; text-align: right;
}
.balkenzeile .name { font-size: var(--klein); text-align: left; flex: 0 0 34%;
                     white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; }
.balkenzeile .bahn { flex: 1; height: 2.2vh; background: #202836;
                     border-radius: 1.1vh; overflow: hidden; }
.balkenzeile .fuell {
  height: 100%; border-radius: 1.1vh;
  background: linear-gradient(90deg, var(--rot), var(--rot-hell));
  width: 0; transition: width 1.6s cubic-bezier(.22, .8, .3, 1);
}

.ring { width: 34vw; height: 34vw; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .bahn { fill: none; stroke: #202836; }
.ring .wert { fill: none; stroke: var(--gruen); stroke-linecap: round;
              transition: stroke-dashoffset 1.8s cubic-bezier(.22,.8,.3,1); }
.ring .mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* Fortschrittsbalken (Seite 8) */
.fortschritt { width: 78%; display: flex; flex-direction: column; gap: 2.4vh;
               margin-top: 3vh; }
.fz { display: flex; flex-direction: column; gap: 0.7vh; }
.fz .zeile { display: flex; justify-content: space-between;
             font-size: var(--klein); }
.fz .bahn { height: 1.8vh; background: #202836; border-radius: 0.9vh;
            overflow: hidden; }
.fz .fuell { height: 100%; border-radius: 0.9vh; width: 0;
             background: linear-gradient(90deg, var(--gruen), #34e5a8);
             transition: width 1.8s cubic-bezier(.22,.8,.3,1); }

/* Sortimentskacheln (Seite 7) */
.kachelwolke { display: flex; flex-wrap: wrap; gap: 1.4vw;
               justify-content: center; width: 84%; margin-top: 3vh; }
.kachel {
  padding: 1.6vh 2.4vw; border-radius: 1.2vh;
  background: var(--dunkel2); border: 1px solid #232c3a;
  font-size: var(--klein);
}
.kachel.gross { font-size: calc(var(--klein) * 1.5); font-weight: 700;
                border-color: var(--rot); }

/* Aktionsseite (Seite 9) */
.qr { background: #fff; padding: 2vh; border-radius: 1.6vh; width: 26vw;
      height: 26vw; display: flex; align-items: center;
      justify-content: center; }
.qr svg { width: 100%; height: 100%; }
.code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: calc(var(--zahl-mittel) * .8); font-weight: 700;
  letter-spacing: 0.4vw; color: var(--gold);
  border: 0.4vh dashed var(--gold); border-radius: 1.4vh;
  padding: 1.6vh 3vw;
}

/* ─────────────────────────────────────────────────────────────────────────
   Landscape-Variante (Lastenheft 5: muss mitgeliefert werden)

   Dieselben Seiten, andere Verhältnisse: Auf einem liegenden Bildschirm ist
   die Höhe knapp, deshalb kleinere Zahlen und Inhalte nebeneinander statt
   untereinander.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-aspect-ratio: 1/1) {
  :root {
    --zahl-riesig: 11vw;
    --zahl-gross: 7.5vw;
    --zahl-mittel: 4.4vw;
    --satz: 2.1vw;
    --klein: 1.35vw;
    --winzig: 0.95vw;
  }
  .karte { height: 62vh; width: 78%; }
  .ring { width: 19vw; height: 19vw; }
  .qr { width: 15vw; height: 15vw; }
  .balkenliste, .fortschritt { width: 62%; }
  .seite.quer-nebeneinander { flex-direction: row; gap: 6vw; }
}