/* ============================================================
   idf-kreis-position - Kreis mit zwei Achsen, vier Feldern und
   Punkten darin (IDF.kreisPosition). Zweck und API: README.md im
   selben Ordner.

   Achsen, Feldnamen und Legende sind HTML um das SVG herum: die
   Schrift kommt aus den Tokens und waechst nicht mit dem Kreis.
   Die Linien tragen `vector-effect: non-scaling-stroke`, sonst
   waeren sie in den Einheiten des Kreises (Radius 1) unsichtbar
   duenn oder bei jeder Groesse anders dick.
   ============================================================ */

/* Steuerbar am Host oder an einem Eltern-Element, nur mit Tokens:
   --idf-kreis-groesse (Default 18rem), --idf-kreis-voll (Default
   --primary), --idf-kreis-ring (Default --accent). Die Defaults stehen als
   Rueckfall an der Lesestelle und NICHT als Deklaration an .idf-kreis: dort
   ueberdeckten sie den Wert, den der Konsument am Eltern-Element setzt. */
.idf-kreis {
  display: grid;
  grid-template-columns: auto minmax(0, var(--idf-kreis-groesse, 18rem)) auto;
  grid-template-areas:
    ".       oben    .     "
    "links   flaeche rechts"
    ".       unten   .     "
    "legende legende legende";
  align-items: center;
  justify-items: center;
  justify-content: start;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  margin: 0;
}

/* Achsen und Feldnamen in Lese-Schrift (16 px), nicht als Meta-Zeile:
   sie sind der Inhalt des Bilds (Joerg, 03.10.2026: „Auch der Kreis hat
   wieder kleine Schrift"). */
.idf-kreis-achse {
  font-size: var(--font-base);
  line-height: var(--leading-snug);
  color: var(--ink-75);
}
.idf-kreis-achse.is-oben   { grid-area: oben; }
.idf-kreis-achse.is-unten  { grid-area: unten; }
.idf-kreis-achse.is-links  { grid-area: links;  justify-self: end;   text-align: right; }
.idf-kreis-achse.is-rechts { grid-area: rechts; justify-self: start; text-align: left; }

.idf-kreis-flaeche {
  grid-area: flaeche;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.idf-kreis-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.idf-kreis-feld          { fill: var(--idf-kreis-feld-farbe, transparent); }
.idf-kreis-feld.is-aktiv { fill: var(--idf-kreis-feld-farbe, var(--ink-4-a)); }

/* Mit Farben je Feld (felder[i].farbe, Pastell-Token): steht ein Feld
   aktiv, treten die drei anderen zurueck, damit das eigene sofort ins
   Auge faellt. */
.idf-kreis.hat-farben.hat-aktiv .idf-kreis-feld:not(.is-aktiv) { opacity: 0.4; }

.idf-kreis-rand,
.idf-kreis-achslinie {
  fill: none;
  stroke: var(--ink-10);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.idf-kreis-punkt.is-voll { fill: var(--idf-kreis-voll, var(--primary)); }
.idf-kreis-punkt.is-ring {
  fill: var(--white);
  stroke: var(--idf-kreis-ring, var(--accent));
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

/* Feldnamen: Kuerzel gross, Name klein, mittig im Viertel. Grau, bis
   das Feld aktiv ist; dann in voller Schrift. */
.idf-kreis-feldname {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ink-75);
  pointer-events: none;
}
.idf-kreis-feldname[data-feld="0"] { left: 30%; top: 30%; }
.idf-kreis-feldname[data-feld="1"] { left: 70%; top: 30%; }
.idf-kreis-feldname[data-feld="2"] { left: 70%; top: 70%; }
.idf-kreis-feldname[data-feld="3"] { left: 30%; top: 70%; }
.idf-kreis-feldname.is-aktiv { color: var(--ink); }

.idf-kreis-kuerzel {
  display: block;
  font-size: var(--font-xxl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
}
.idf-kreis-name {
  display: block;
  font-size: var(--font-base);
  line-height: var(--leading-snug);
}

/* Legende unter dem Kreis: je Punkt eine Zeile mit Marke, Titel und
   Zusatz. Ein Punkt ohne Lage traegt eine gestrichelte Marke. */
.idf-kreis-legende {
  grid-area: legende;
  justify-self: start;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.idf-kreis-eintrag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  font-size: var(--font-base);
  color: var(--ink);
}

.idf-kreis-marke {
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}
.idf-kreis-marke.is-voll { background: var(--idf-kreis-voll, var(--primary)); }
.idf-kreis-marke.is-ring { border: 3px solid var(--idf-kreis-ring, var(--accent)); }
.idf-kreis-marke.is-offen {
  background: transparent;
  border: 1px dashed var(--ink-50);
}

.idf-kreis-zusatz { color: var(--ink-75); }