@font-face {
  font-family: "ZdH Symbols";
  src: url("/fonts/Zdh_symbols_2026-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  /* Grundfarben */
  --zdh-die-weiss: #ffffff;
  --zdh-die-schwarz: #000000;
  --zdh-die-rot: #9e1b1b;
  --zdh-die-blau: #2f64b7;
  --zdh-die-orange: #c45a14;
  --zdh-die-gruen: #4a8f2b;
  --zdh-die-grau: #7e8585;
  --zdh-die-lila: #6f4aa8;
  --zdh-die-gelb: #d8be18;
  --zdh-die-rosa: #d98ab8;
  --zdh-die-frost: #86d7e5;
  --zdh-die-feuer: #b64a1a;
  --zdh-die-gold: #b9932f;

  /* Texturen für Sonderfarben */
  --zdh-die-texture-feuer: url("/img/wuerfelfarbe_feuer.png");
  --zdh-die-texture-frost: url("/img/wuerfelfarbe_frost.png");
  --zdh-die-texture-gold: url("/img/wuerfelfarbe_gold.png");

  /* Konturen */
  --zdh-die-outline-none: none;
  --zdh-die-special-outline: #1f1a14;

  --zdh-die-outline-dark:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
     0   -1px 0 #000000,
     0    1px 0 #000000,
    -1px  0   0 #000000,
     1px  0   0 #000000;

  --zdh-die-outline-light:
    -1px -1px 0 #f3efe4,
     1px -1px 0 #f3efe4,
    -1px  1px 0 #f3efe4,
     1px  1px 0 #f3efe4;
}

/* Grundstruktur */

.symbol {
  font-family: "ZdH Symbols", Georgia, serif;
}

.die {
  --die-color: #444444;
  --die-outline: var(--zdh-die-outline-none);
}

.die .symbol {
  color: var(--die-color);
  -webkit-text-fill-color: var(--die-color);
  text-shadow: var(--die-outline);
}

/* Farbklassen */

.die-weiss,
.die-white {
  --die-color: var(--zdh-die-weiss);
  --die-outline: var(--zdh-die-outline-dark);
}

.die-schwarz,
.die-black {
  --die-color: var(--zdh-die-schwarz);
  --die-outline: var(--zdh-die-outline-light);
}

.die-rot,
.die-red {
  --die-color: var(--zdh-die-rot);
  --die-outline: var(--zdh-die-outline-none);
}

.die-blau,
.die-blue {
  --die-color: var(--zdh-die-blau);
  --die-outline: var(--zdh-die-outline-none);
}

.die-orange {
  --die-color: var(--zdh-die-orange);
  --die-outline: var(--zdh-die-outline-none);
}

.die-gruen,
.die-grün,
.die-green {
  --die-color: var(--zdh-die-gruen);
  --die-outline: var(--zdh-die-outline-none);
}

.die-grau,
.die-gray,
.die-grey {
  --die-color: var(--zdh-die-grau);
  --die-outline: var(--zdh-die-outline-none);
}

.die-lila,
.die-purple {
  --die-color: var(--zdh-die-lila);
  --die-outline: var(--zdh-die-outline-none);
}

.die-gelb,
.die-yellow {
  --die-color: var(--zdh-die-gelb);
  --die-outline: var(--zdh-die-outline-dark);
}

.die-rosa {
  --die-color: var(--zdh-die-rosa);
  --die-outline: var(--zdh-die-outline-dark);
}

.die-frost {
  --die-color: var(--zdh-die-frost);
  --die-outline: var(--zdh-die-outline-dark);
}

.die-feuer,
.die-fire {
  --die-color: var(--zdh-die-feuer);
  --die-outline: var(--zdh-die-outline-dark);
}

.die-gold {
  --die-color: var(--zdh-die-gold);
  --die-outline: var(--zdh-die-outline-dark);
}

/* Texturfüllung für Feuer, Frost und Gold am Bildschirm.
   Die Kontur liegt als eigene Ebene hinter der Füllung. */

.die-feuer .symbol,
.die-fire .symbol,
.die-frost .symbol,
.die-gold .symbol {
  position: relative;
  display: inline-block;
  overflow: visible;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  background: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Kontur hinter der Füllung */

.die-feuer .symbol::before,
.die-fire .symbol::before,
.die-frost .symbol::before,
.die-gold .symbol::before {
  content: attr(data-symbol);
  position: absolute;
  inset: 0;
  z-index: 0;

  color: #1f1a14;
  -webkit-text-fill-color: #1f1a14;

  text-shadow:
    -1px -1px 0 #1f1a14,
     1px -1px 0 #1f1a14,
    -1px  1px 0 #1f1a14,
     1px  1px 0 #1f1a14,
     0   -1px 0 #1f1a14,
     0    1px 0 #1f1a14,
    -1px  0   0 #1f1a14,
     1px  0   0 #1f1a14;

  pointer-events: none;
}

/* Texturfüllung vor der Kontur */

.die-feuer .symbol::after,
.die-fire .symbol::after,
.die-frost .symbol::after,
.die-gold .symbol::after {
  content: attr(data-symbol);
  position: absolute;
  inset: 0;
  z-index: 1;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 150% 150%;

  -webkit-background-clip: text;
  background-clip: text;

  pointer-events: none;
}

.die-feuer .symbol::after,
.die-fire .symbol::after {
  background-image: var(--zdh-die-texture-feuer);
}

.die-frost .symbol::after {
  background-image: var(--zdh-die-texture-frost);
}

.die-gold .symbol::after {
  background-image: var(--zdh-die-texture-gold);
}

/* Einfache Darstellung ohne Textur.
   Nutzbar mit <body class="die-flat"> oder mit .die.die-flat am einzelnen Würfel. */

.die-flat .die-feuer .symbol,
.die-flat .die-fire .symbol,
.die-flat .die-frost .symbol,
.die-flat .die-gold .symbol,
.die.die-flat.die-feuer .symbol,
.die.die-flat.die-fire .symbol,
.die.die-flat.die-frost .symbol,
.die.die-flat.die-gold .symbol {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--zdh-die-outline-dark) !important;
}

.die-flat .die-feuer .symbol,
.die-flat .die-fire .symbol,
.die.die-flat.die-feuer .symbol,
.die.die-flat.die-fire .symbol {
  color: var(--zdh-die-feuer) !important;
  -webkit-text-fill-color: var(--zdh-die-feuer) !important;
}

.die-flat .die-frost .symbol,
.die.die-flat.die-frost .symbol {
  color: var(--zdh-die-frost) !important;
  -webkit-text-fill-color: var(--zdh-die-frost) !important;
}

.die-flat .die-gold .symbol,
.die.die-flat.die-gold .symbol {
  color: var(--zdh-die-gold) !important;
  -webkit-text-fill-color: var(--zdh-die-gold) !important;
}

.die-flat .die-feuer .symbol::before,
.die-flat .die-fire .symbol::before,
.die-flat .die-frost .symbol::before,
.die-flat .die-gold .symbol::before,
.die-flat .die-feuer .symbol::after,
.die-flat .die-fire .symbol::after,
.die-flat .die-frost .symbol::after,
.die-flat .die-gold .symbol::after,
.die.die-flat.die-feuer .symbol::before,
.die.die-flat.die-fire .symbol::before,
.die.die-flat.die-frost .symbol::before,
.die.die-flat.die-gold .symbol::before,
.die.die-flat.die-feuer .symbol::after,
.die.die-flat.die-fire .symbol::after,
.die.die-flat.die-frost .symbol::after,
.die.die-flat.die-gold .symbol::after {
  content: none !important;
}

/* Druck: immer einfache Darstellung ohne Textur */

@media print {
  .die-feuer .symbol,
  .die-fire .symbol,
  .die-frost .symbol,
  .die-gold .symbol {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: var(--zdh-die-outline-dark) !important;
  }

  .die-feuer .symbol,
  .die-fire .symbol {
    color: var(--zdh-die-feuer) !important;
    -webkit-text-fill-color: var(--zdh-die-feuer) !important;
  }

  .die-frost .symbol {
    color: var(--zdh-die-frost) !important;
    -webkit-text-fill-color: var(--zdh-die-frost) !important;
  }

  .die-gold .symbol {
    color: var(--zdh-die-gold) !important;
    -webkit-text-fill-color: var(--zdh-die-gold) !important;
  }

  .die-feuer .symbol::before,
.die-fire .symbol::before,
.die-frost .symbol::before,
.die-gold .symbol::before,
.die-feuer .symbol::after,
.die-fire .symbol::after,
.die-frost .symbol::after,
.die-gold .symbol::after {
  content: none !important;
}