/* ---------------------------------------------------
   UNVERÄNDERT – diese beiden sollen NICHT dynamisch sein
   --------------------------------------------------- */
#domain-unicode {
  color: black;
  font-family: Arial, Verdana, sans-serif;
  font-size: 35px;
  font-weight: bold;
}

#domain-unicode3 {
  color: black;
  font-family: Arial, Verdana, sans-serif;
  font-size: 35px;
  font-weight: bold;
}


/* ---------------------------------------------------
   DYNAMISCHE SCHRIFTGRÖSSE FÜR DOMAIN-UNICODE2
   ---------------------------------------------------
   WICHTIG:
   - Dieses Element muss ein Block/Inline-Block sein
   - Es muss in einem Container mit fester Breite stehen
   - Die Zeichenanzahl wird per JS gesetzt (--chars)
   
   Der height-Wert kann z.B. auch unter 52px auf 46px 
   reduziert werden in der #domain-box, dann wird das
   "g" unten nicht abgeschnitten.
   color:#0099cc; ist blau (websicher)
   color:#ffaf00; ist orange 
   color:#bf0000; ist das domaindo-rot 
   --------------------------------------------------- */
#domain-box {
  width: 420px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#domain-unicode2 {
  color: #bf0000;
  font-family: Arial, Verdana, sans-serif;
  font-weight: bold;

  /* WICHTIG: Inline-Elemente können keine Breite/Höhe haben */
  display: inline-block;

  /* Feste Fläche auf dem Firmenfahrzeug */
  width: 420px;
  height: 52px;
  line-height: 46px;

  /* Domain immer in einer Zeile */
  white-space: nowrap;
  overflow: hidden;
  text-align: center;

  /* Dynamische Schriftgröße:
     - clamp(Min, Ideal, Max)
     - Ideal = 420px / (Zeichenanzahl * Faktor)
     - Faktor 0.55 ergibt optisch sehr gute Ergebnisse */
  font-size: clamp(10px, calc(420px / (var(--chars) * 0.55)), 52px);

  /* Fallback-Wert, falls JS nicht greift */
  --chars: 20;
}

/* Unsichtbarer Mess-Text:
   Wird benötigt, damit CSS die Zeichenanzahl korrekt anwenden kann */
#domain-unicode2::before {
  content: attr(data-text);
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  font-family: inherit;
  font-weight: inherit;
}