/* ==========================================================================
   GLOSSAR – ABBILDUNGEN
   ==========================================================================
   Eine Bausteinsammlung für SVG-Abbildungen in Lexikoneinträgen.

   WARUM DIESE DATEI EXISTIERT
   ---------------------------
   Die 461 Beiträge des alten Glossars brachten jeder sein eigenes
   <style>-Element mit: zwischen 3.290 und 7.579 Zeichen, mit einem
   eigenen Klassenpräfix je Beitrag (.wmk, .kwr, .lnk …). Zusammen
   waren das 14,2 % des gesamten Textvolumens – Regeln, die sich von
   Eintrag zu Entrag wiederholten, aber nirgends gemeinsam pflegbar
   waren. Eine Farbkorrektur hätte 461 Änderungen bedeutet.

   Hier steht dieselbe Gestaltung einmal. Die Einträge enthalten nur
   noch Auszeichnung, kein Aussehen.

   LESBARKEIT IST DIE VORGABE, NICHT DIE ZIERDE
   --------------------------------------------
   Alle Schriftgrößen sind in px im SVG-Koordinatensystem angegeben.
   Die Abbildungen benutzen durchgehend viewBox="0 0 760 …" und
   skalieren auf die Breite der Textspalte (rund 700 px). Aus 15 px
   werden dabei knapp 14 px – die untere Grenze für Fließtext. Kleiner
   als 12 px darf im Koordinatensystem nichts sein.

   Textfarben stammen aus den *-text-Variablen des Kerns. Die
   Flächenfarben (--primary, --accent) erreichen als Schrift auf Weiß
   keine 4,5:1; das ist in verzeichnis.css dokumentiert und gilt hier
   genauso.

   Farbe trägt nie allein die Bedeutung: Jede farbig abgesetzte Fläche
   hat zusätzlich eine Beschriftung oder ein Vorzeichen (+/−, ✓/✗).
   ========================================================================== */

/* --- Rahmen ------------------------------------------------------------ */

.a-fig {
    margin: 2.25rem 0;
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.1rem;
}

/* overflow:visible – Pfeilspitzen und Textanker ragen bei einigen
   Abbildungen um wenige Pixel über die viewBox hinaus. Ohne das
   schneidet der Browser sie ab. */
.a-fig svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.a-fig figcaption {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--light-gray);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-medium);
}

.a-fig figcaption b {
    color: var(--text-dark);
    font-weight: 700;
}

/* Sehr breite Abbildungen dürfen auf schmalen Schirmen scrollen,
   statt bis zur Unleserlichkeit zu schrumpfen. */
.a-fig--wide {
    overflow-x: auto;
}

.a-fig--wide svg {
    min-width: 560px;
}

@media (max-width: 640px) {
    .a-fig { padding: 1.1rem 1.1rem 0.9rem; border-radius: 12px; }
}

/* --- Flächen ----------------------------------------------------------- */

.f-card       { fill: var(--white);  stroke: var(--light-gray);   stroke-width: 1.5; }
.f-card--pri  { fill: #E0F2FE;       stroke: var(--primary-dark); stroke-width: 1.5; }
.f-card--acc  { fill: #F3E8FF;       stroke: var(--accent-dark);  stroke-width: 1.5; }
.f-card--ok   { fill: #D1FAE5;       stroke: var(--success-text); stroke-width: 1.5; }
.f-card--warn { fill: #FEF3C7;       stroke: var(--warning-text); stroke-width: 1.5; }
.f-card--bad  { fill: #FEE2E2;       stroke: #B91C1C;             stroke-width: 1.5; }
.f-card--mute { fill: var(--light);  stroke: var(--light-gray);   stroke-width: 1.5; }

/* Vollflächig eingefärbt, Schrift steht weiß darauf */
.f-solid      { fill: var(--navy); }
.f-solid--pri { fill: var(--primary-dark); }
.f-solid--acc { fill: var(--accent-dark); }

/* --- Schrift ----------------------------------------------------------- */

/* Die Schriftfamilie erbt nicht in SVG, sie muss gesetzt werden. */
.a-fig text {
    font-family: inherit;
    dominant-baseline: middle;
}

.f-h  { fill: var(--text-dark);    font-size: 16px; font-weight: 800; }
.f-t  { fill: var(--text-dark);    font-size: 15px; font-weight: 700; }
.f-s  { fill: var(--text-medium);  font-size: 13px; font-weight: 400; }
.f-n  { fill: var(--text-dark);    font-size: 22px; font-weight: 800; }
.f-inv{ fill: var(--white);        font-size: 15px; font-weight: 700; }
.f-inv-s { fill: #E2E8F0;          font-size: 12.5px; font-weight: 400; }

/* Bereichsbeschriftung über einer Gruppe */
.f-k {
    fill: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.f-ok  { fill: var(--success-text); font-weight: 700; }
.f-bad { fill: #B91C1C;             font-weight: 700; }
.f-warn{ fill: var(--warning-text); font-weight: 700; }

.f-mono {
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 13px;
    fill: var(--primary-text);
}

/* --- Linien und Pfeile ------------------------------------------------- */

.f-line  { stroke: var(--medium-gray); stroke-width: 2;   fill: none; }
.f-line--thin { stroke: var(--light-gray); stroke-width: 1.5; fill: none; }
.f-line--dash { stroke: var(--medium-gray); stroke-width: 2; fill: none;
                stroke-dasharray: 6 5; }
.f-line--ok   { stroke: var(--success-text); stroke-width: 2.5; fill: none; }
.f-line--bad  { stroke: #B91C1C; stroke-width: 2.5; fill: none; }

.f-fill      { fill: var(--medium-gray); }
.f-fill--ok  { fill: var(--success-text); }
.f-fill--bad { fill: #B91C1C; }
.f-fill--pri { fill: var(--primary-dark); }

/* Achsen und Raster in Diagrammen */
.f-axis { stroke: var(--medium-gray); stroke-width: 1.5; }
.f-grid { stroke: var(--light-gray);  stroke-width: 1; }

/* --- Balken ------------------------------------------------------------ */

.f-bar      { fill: var(--primary-dark); }
.f-bar--acc { fill: var(--accent-dark); }
.f-bar--ok  { fill: var(--success-text); }
.f-bar--mute{ fill: var(--light-gray); }