/*
 * Wortmarke "dadirri": SVG-Tropfen-d + "adirri" in Barlow Condensed Bold.
 *
 * Größe: vom umgebenden font-size geerbt (1em-Logik im Tropfen).
 * Kerning: kleiner negativer margin am Tropfen, damit Glyph-Übergang
 * zum "a" eng wirkt wie in einem Schriftzug.
 */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlowcondensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-special);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__droplet {
  display: inline-flex;
  align-items: flex-end;
  block-size: 1em;
  inline-size: 0.62em;
  overflow: visible;
  margin-inline-end: -0.04em;
  position: relative;
  /* Der SVG-Pfad nutzt nur einen Teil der quadratischen viewBox.
   * Wir trimmen die Box visuell, indem wir das svg auf 1em quadratisch
   * lassen, aber den Container schmaler halten. svg überschießt nach
   * rechts (wo nichts ist). */
}

.wordmark__droplet > svg {
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: 0;
  /* Pfad ist um x=12 bis x=88 zentriert. Wir verschieben das SVG nach
   * links, damit das d optisch links bündig in der schmalen Box sitzt. */
  transform: translateX(-0.075em);
}

.wordmark__rest {
  display: inline-block;
  margin-inline-start: 0;
}

/* Größenvarianten */
.wordmark--small {
  font-size: var(--s1);
}

.wordmark--hero {
  font-size: var(--s5);
}