/* ============================================================
   Komponente: wortmarke
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web"
     · Logo-Frame  13832:13923 (Vektor-Positionen)
     · Instanzen   13835:51477 (Onboarding, 262 x 148)
                   13866:15969 (Nav-Streifen, 62,9 x 35,6)
   ausgelesen am 04.09.2026.

   Das Logo besteht aus zwei Teilen: der Schrift („share
   magazines", zweizeilig) und den beiden Spiralen, die oben
   rechts darüberliegen. Beide liegen als eigene Symbole im
   Sprite, weil die Spirale ihre Markenfarben behält und die
   Schrift die Textfarbe erbt.

   EINE KOMPONENTE FÜR BEIDE GRÖSSEN. Die Instanzen im
   Onboarding und im Nav-Streifen haben dasselbe
   Seitenverhältnis (1,765) — es ist dieselbe Sperrung in zwei
   Größen, nicht zwei Logos. Die Teile sind deshalb in Prozent
   positioniert und skalieren mit.

   Setzt tokens.css voraus.

   VERWENDUNG
     <div class="wortmarke" role="img" aria-label="sharemagazines">
       <svg class="wortmarke__schrift"><use href="#icon-logo-font"></use></svg>
       <svg class="wortmarke__spirale"><use href="#icon-logo-spirale"></use></svg>
     </div>

   Die Größe kommt von außen über die Breite; die Höhe folgt aus
   aspect-ratio.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
   Aus dem Logo-Frame 13832:13923 (257,04 x 145,6):
     Schrift   x 0     y 57,574   257,04 x 88,02
     Spirale   x 77,5  y 0        118,43 x  95,5
   Als Prozent umgerechnet — die absoluten Zahlen würden nur für
   eine der beiden Größen stimmen.
   ============================================================ */

.wortmarke {
  position: relative;
  aspect-ratio: 257.04 / 145.6;
  flex-shrink: 0;
}

.wortmarke > svg {
  position: absolute;
  display: block;
  overflow: visible;
}

.wortmarke__schrift {
  left: 0;
  top: 39.54%;                             /* 57,574 / 145,6 */
  width: 100%;
  height: 60.45%;                          /*  88,02 / 145,6 */
  /* Die Schrift erbt die Textfarbe — weiß in Dark, schwarz in
     Light. Die Spirale nicht: sie trägt die Markenfarben und
     zeigt im Sprite auf blue-300 und green-300. */
  color: var(--text-primary);
}

.wortmarke__spirale {
  left: 30.15%;                            /*  77,5  / 257,04 */
  top: 0;
  width: 46.07%;                           /* 118,43 / 257,04 */
  height: 65.59%;                          /*  95,5  / 145,6 */
}

/* Zwei Größen aus Figma, als Modifier statt als freie Zahl. */
.wortmarke--onboarding {
  width: 262px;
  max-width: 100%;
}

.wortmarke--rail {
  width: 62.878px;
}