:root {
  --letter-width: 11vmin;     /* Breite einer Buchstaben-Zelle */
  --letter-height: 13vmin;    /* Höhe einer Buchstaben-Zelle */
  --font-size: 8vmin;        /* Schriftgröße gleich der Zellenhöhe */
  --background:#000;
  --accent:rgba(255,255,255,0.06);
}

* { box-sizing: border-box; }

body {
  background: var(--background);
  color: #fff;
  font-family: 'Montserrat';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.logo {
  position: absolute;
  top: 2vmin;       /* Abstand von oben */
  right: 1vmin;     /* Abstand von rechts */
  width: 10vmin;    /* Logo skalierend zur Viewport-Höhe/Breite */
  height: auto;
  z-index: 10;
}

h1 { 
  color: #1A76CF; 
  font-weight: 600;
  font-size: 8vmin; 
  margin-bottom: 5vmin;
  font-family: "Montserrat";
  letter-spacing: 0.2vmin;

}

footer { 
  color: rgba(255,255,255,0.3); 
  font-size: 6vmin;
  margin-top: 5vmin;
  font-family: "Montserrat";
}

#clock {
  font-family: "Montserrat";
  letter-spacing: 0.2vmin;
}

/* Board */
.tafel {
  display: inline-flex;
  gap: 0.2vmin;
  align-items: center;
  padding: 0.8vmin;
  background: rgba(31,31,31);
  border-radius: 1vmin;
  width: fit-content;   /* passt sich Inhalt an */
}

/* Letter cell */
.letter {
  width: var(--letter-width);
  height: var(--letter-height);
  background: #000;
  position: relative;
  perspective: 600px;
  display: inline-block;
  overflow: hidden;
  transform-style: preserve-3d;
  font-size: 0;
}

/* obere Hälfte */
.letter::before {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--font-size);
  line-height: var(--letter-height);
  color: #fff;
  background: #000;
  clip-path: inset(0 0 50% 0);
  transform-origin: bottom;
  backface-visibility: hidden;
  z-index: 2;
}

/* untere Hälfte */
.letter::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: var(--font-size);
  line-height: var(--letter-height);
  color: #fff;
  background: #000;
  clip-path: inset(50% 0 0 0);
  transform-origin: top;
  backface-visibility: hidden;
  z-index: 1;
  font-family: "Montserrat";
}

/* Leerzelle */
.letter-blank::before,
.letter-blank::after {
  content:' ';
}

/* Animation */
.letter.animate::before,
.letter.animate::after {
  animation-name: flip;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--i) * 0.25s);
}

@keyframes flip {
  0%   { transform: rotateX(0deg);   color:#000; }
  50%  { transform: rotateX(180deg); color:#fff; }
  100% { transform: rotateX(360deg); color:#fff; }
} 

.reel-container {
  position: relative;
  width: 30vmin;         /* du kannst das anpassen */
  aspect-ratio: 9 / 16;  /* garantiert 9:16 */
  overflow: hidden;
  border-radius: 1vmin;
  box-shadow: 0 0 3vmin rgba(255,255,255,0.1);
  margin-top: 1vmin;
  margin-bottom: 2vmin;
}

.reel-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;

}