/*
 * Die Wabe – ein echtes versetztes Sechseckraster aus clip-path und negativem
 * Zeilenabstand, kein Bild davon. Startseite und App zeigen dieselbe Figur,
 * deshalb steht die Geometrie einmal hier. Beide brauchen `.comb > .row > .cell`
 * als Struktur, eine Reihe darf `.offset` tragen, eine Zelle `.empty` oder
 * `.lit`, und `--i` je Zelle staffelt den Aufbau.
 *
 * Zur Rechnung:
 *
 * - Spitze oben und unten: Höhe = Breite × 2/√3. Gerechnet, nicht gerundet –
 *   sonst ist das Sechseck schon um einen Viertelpixel unregelmäßig.
 * - Der Zeilenschritt ist 3/4 der Zellhöhe. Dazu kommt der Anteil der Fuge,
 *   der senkrecht zwischen den Reihen liegt (√3/2). Ohne diesen Zuschlag
 *   sitzen die Reihen enger aufeinander als die Zellen nebeneinander, und die
 *   Fuge ist waagerecht breiter als schräg.
 * - Die versetzte Reihe rückt um eine halbe Rasterbreite ein, Fuge inbegriffen.
 *
 * Farben und Maße kommen von aussen. Wer die Wabe einbindet, setzt auf `.comb`:
 *
 *   --zelle                 Breite einer Zelle, Höhe folgt daraus
 *   --fuge                  Abstand zwischen zwei Zellen, in jede Richtung gleich
 *   --zelle-polster         seitliches Polster für die Beschriftung
 *   --zelle-schriftgroesse  Schriftgrad der Beschriftung
 *   --zelle-fuellung        Fläche einer belegten Zelle
 *   --zellwand              Umriss einer leeren Zelle
 *   --zelle-grund           Untergrund hinter der Wabe (Kern der leeren Zelle)
 *   --zelle-schrift         Farbe der Beschriftung
 *   --zelle-akzent          Fläche der hervorgehobenen Zelle
 *   --zelle-akzent-schrift  Beschriftung der hervorgehobenen Zelle
 *
 * Die Vorgaben unten sind die Werte der Startseite; die App überschreibt, was
 * bei ihr anders ist.
 */

.comb {
  --zelle: 112px;
  --fuge: 5px;
  --zelle-h: calc(var(--zelle) * 1.1547005);
  --zelle-polster: 1rem;
  --zelle-schriftgroesse: 0.66rem;

  padding: 0.5rem 0;
}

.comb .row {
  display: flex;
  gap: var(--fuge);
  /* Zeilen greifen ineinander – das erzeugt den Wabenverbund. */
  margin-bottom: calc(var(--fuge) * 0.8660254 - var(--zelle-h) * 0.25);
}
.comb .row.offset { margin-left: calc((var(--zelle) + var(--fuge)) * 0.5); }

.comb .cell {
  position: relative;
  width: var(--zelle);
  height: var(--zelle-h);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--zelle-fuellung);
  display: grid;
  place-items: center;
  padding: 0 var(--zelle-polster);
  text-align: center;
  font-style: normal;

  /* Aufbau beim Laden: Zelle für Zelle, gesteuert über --i */
  opacity: 0;
  transform: scale(0.82);
  animation: zelle-setzen 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}

.comb .cell b {
  font-family: var(--grund-mono);
  font-weight: 400;
  font-size: var(--zelle-schriftgroesse);
  line-height: 1.25;
  color: var(--zelle-schrift);
  letter-spacing: -0.01em;
}

/* Leere Zelle: Umriss statt Fläche. Ein inset-Schatten liegt auf dem Rechteck
   und wird vom clip-path an den Schrägen weggeschnitten – übrig blieben zwei
   senkrechte Striche. Deshalb die Wand als Hintergrund und darüber ein um 1px
   kleineres Sechseck. */
.comb .cell.empty { background: var(--zellwand); }
.comb .cell.empty::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  background: var(--zelle-grund);
}

.comb .cell.lit { background: var(--zelle-akzent); }
.comb .cell.lit b { color: var(--zelle-akzent-schrift); }

@keyframes zelle-setzen {
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .comb .cell { animation: none; opacity: 1; transform: none; }
}