/* ====================================================================
   OBSIDIAN-PEARL-BADGES — die Symbolkacheln der ganzen App
   ====================================================================
   EINE DATEI FUER DREI WELTEN. app.html laedt src/style.css,
   index.html laedt assets/theme.css, und die vorgerenderten Seiten
   unter public/ laden theme.css plus ihr eigenes pages.css. Dreimal
   dieselbe Komponente zu pflegen ist genau die Doppelpflege, an der in
   diesem Projekt schon das Stimmungsbild (volle Deckkraft statt 24 %)
   und die erste Fassung dieser Badges (ohne Flaeche, ohne Rand)
   gescheitert sind. Deshalb steht sie hier einmal, und alle drei
   verlinken sie.

   WAS HIER NICHT STEHT: die --pearl-*-Tokens. Die wechseln mit dem
   Design und muessen dort liegen, wo der jeweilige Theme-Block liegt —
   in theme.css fuer die Startseite und die statischen Seiten, in
   style.css fuer die App. scripts/check-tokens.mjs prueft fuer jede
   Einstiegsseite, dass alle vorhanden sind.

   AUFBAU: Der Koerper ist ein Verlauf mit innerem Glanzsteg und
   aeusserem Schatten. Darauf liegt eine Spiegelung im oberen Drittel,
   darin das Symbol als Linienzeichnung. Genau ein Element je Symbol
   traegt .pearl-fokus. */

/* EINE GROESSE ALS RECHENGROESSE (--pb), nicht drei Regelsaetze.
   Radius und Symbolgroesse haengen daran; wer eine neue Variante
   braucht, setzt eine Zeile und nicht vier. Die Verhaeltnisse stammen
   aus der 48er-Perle: 14/48 Radius, 26/48 Symbol. */
.pearl-badge{
  --pb:48px;
  position:relative; overflow:hidden; flex:0 0 auto;
  width:var(--pb); height:var(--pb);
  border-radius:calc(var(--pb) * 0.292);
  display:flex; align-items:center; justify-content:center;
  background:var(--pearl-flaeche);
  border:1px solid var(--pearl-kante);
  box-shadow:var(--pearl-schatten);
}
/* Quiz-Kategoriekarten (.lesson-icon ist 34 px) und Abschnittskoepfe. */
.pearl-badge-m{ --pb:34px; }
.pearl-badge-s{ --pb:30px; }
/* Die Spiegelung: ein Streifen im oberen Drittel, seitlich
   eingerueckt, unten weich auslaufend. Sie faengt nichts ab — sonst
   laege sie ueber dem Knopf, auf dem sie sitzt. */
.pearl-badge::before{
  content:''; position:absolute; top:1px; left:10%; right:10%; height:42%;
  background:var(--pearl-spiegel);
  border-radius:10px 10px 16px 16px;
  pointer-events:none;
}
/* DIE LINIENFARBE KOMMT AUS EINEM TOKEN, NICHT AUS currentColor.
   Bis hierher erbte das Symbol die Textfarbe der Karte — das war
   richtig, solange die Perle die Farbe der Karte hatte. Seit der
   Grund im Hellen Terrakotta und im Dunklen Obsidian ist, steht die
   Kartenschrift auf dem falschen Grund: dunkles Anthrazit auf
   dunklem Obsidian war praktisch unsichtbar. Weiss traegt auf beiden
   Gruenden (gemessen: 3,02:1 auf dem hellsten Punkt des Terrakotta-
   Verlaufs, 14,18:1 auf dem hellsten Punkt des Obsidian). */
.pearl-badge svg{
  position:relative;
  width:calc(var(--pb) * 0.542); height:calc(var(--pb) * 0.542);
  display:block;
  stroke:var(--pearl-linie);
  stroke-width:1.8;
}
/* Gefuellte Teile eines Motivs (Lochung, Ball) folgen derselben
   Farbe — sonst haengen sie im Hellen als dunkle Flecken im
   Terrakotta. */
.pearl-badge svg .pearl-voll{ fill:var(--pearl-linie); stroke:none; }

/* DER FOKUSPUNKT. Genau einer je Symbol, in Terrakotta, mit einem
   weichen Schein. Er zeigt, worum es in der Kachel geht — die Zone,
   der Treffpunkt, der suesse Punkt des Schlaegers. */
/* DER FOKUSPUNKT. Genau einer je Symbol.
   Im Dunklen ist er Terrakotta auf Obsidian und leuchtet leicht.
   Im Hellen KANN er nicht Terrakotta sein: der Grund ist es selbst
   geworden. Gemessen lag #C2410C dort bei 1,05:1 gegen das untere
   Ende des Verlaufs — nicht schwach, sondern weg. Er ist deshalb
   eine ausgestanzte Vertiefung im Terrakotta (#2E0F06, derselbe Ton
   wie --court-chip): 5,86:1 bzw. 3,25:1 gegen den Grund und 15,65:1
   gegen die weissen Linien, also auch von ihnen klar zu trennen.
   Ein cremefarbener Punkt waere von der Linie nicht zu unterscheiden
   gewesen (1,09:1), ein gelber zu schwach (1,97:1). */
.pearl-fokus{
  fill:var(--pearl-fokus); stroke:none;
  filter:var(--pearl-fokus-schein);
}

/* Auf sehr schmalen Geraeten wird die Perle eine Spur kleiner, damit
   der Titel daneben nicht in die zweite Zeile rutscht. */
@media (max-width: 359px){
  .pearl-badge{ --pb:42px; }
  .pearl-badge-m{ --pb:32px; }
}

/* ---- DIE HUELLE -----------------------------------------------------
   Die Plaetze, an denen die Perle jetzt sitzt, hatten alle einen
   eigenen Rahmen: .lesson-icon einen 34er Kasten mit Rand, .coach-thumb
   eine 48er Kachel mit Goldkante, .hub-section-ico ein 22er Feld. Die
   Perle bringt Flaeche, Rand und Schatten selbst mit — zwei Rahmen
   uebereinander sehen aus wie ein Fehler, und einer davon ist es dann
   auch. .pearl-huelle raeumt den aeusseren weg.

   EIGENE KLASSE STATT :has(.pearl-badge): die Huelle steht im Markup
   genau dort, wo eine Perle drin ist, und das ist nachlesbar. Ein
   :has() haette dieselbe Wirkung, aber niemand sieht der Zeile im
   Modul dann noch an, warum der Rahmen fehlt. */
.pearl-huelle{
  width:auto; height:auto; padding:0;
  background:none; border:0; box-shadow:none; border-radius:0;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}