/* ===== Interaktive Grafiken im Artikeltext =====
   Gehört zu inc/news-grafik.php. Wird von article.php NUR geladen, wenn der
   Artikel mindestens eine Grafik enthält.

   FARBEN: alles aus den Lesemodus-Tokens abgeleitet (--lese-ink), damit die
   Grafiken in Hell-, Dunkel- und Blau-Modus und in der hellen Lesefläche
   automatisch mitgehen. Die Statusfarben „gut/schlecht" sind MISCHUNGEN aus
   einem Grundton und der Textfarbe — dadurch werden sie im hellen Modus dunkel
   und im dunklen Modus hell und bleiben in beiden über 4,5:1.
   ORANGE nur als Fläche mit dunkler Schrift, nie als Schrift (Orange-Regel).

   SPEZIFITÄT: news.css setzt .news-article__text figure / figcaption / p / b
   mit (0,1,1). Deshalb hier figure.ng und .ng .ng__quelle — und diese Datei
   wird NACH news.css geladen. */

figure.ng {
  --ng-ink: var(--lese-ink, var(--text, #083145));
  --ng-leise: color-mix(in srgb, var(--ng-ink) 72%, transparent);
  --ng-flaeche: color-mix(in srgb, var(--ng-ink) 5%, transparent);
  --ng-flaeche-2: color-mix(in srgb, var(--ng-ink) 9%, transparent);
  --ng-spur: color-mix(in srgb, var(--ng-ink) 16%, transparent);
  --ng-rand: color-mix(in srgb, var(--ng-ink) 15%, transparent);
  --ng-orange: var(--brand-sun, #f4a932);
  --ng-orange-tief: var(--brand-sun-deep, #dc661e);
  --ng-orange-ink: var(--brand-sun-ink, #1a0d02);
  --ng-gut: color-mix(in srgb, #1fa0c8 60%, var(--ng-ink));
  --ng-schlecht: color-mix(in srgb, #e5533d 62%, var(--ng-ink));
  margin: 28px 0;
  padding: 20px 22px 16px;
  border: 1px solid var(--ng-rand);
  border-radius: var(--radius, 14px);
  background: var(--ng-flaeche);
  color: var(--ng-ink);
  font-size: calc(var(--lese-schrift, 16px) * .92);
  line-height: 1.45;
}
.ng p { margin: 0; }
.ng b { color: var(--ng-ink); }
.ng [hidden] { display: none !important; }

.ng__kopf { margin-bottom: 14px; }
.ng__titel {
  font-family: var(--font-display, inherit);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.ng__unter { color: var(--ng-leise); font-size: .88em; margin-top: 3px; }

.ng .ng__quelle {
  margin: 16px 0 0;
  padding: 10px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ng-rand);
  border-radius: 0;
  font-size: .78em;
  color: var(--ng-leise);
}

.ng__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.ng__knopf {
  font: inherit;
  font-size: .9em;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ng-rand);
  background: transparent;
  color: var(--ng-ink);
  transition: background .2s, border-color .2s, color .2s;
}
.ng__knopf:hover { border-color: var(--ng-orange-tief); }
.ng__knopf[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--ng-orange), var(--ng-orange-tief));
  color: var(--ng-orange-ink);
  border-color: transparent;
}
.ng__knopf:focus-visible, .ng-tag:focus-visible, .ng summary:focus-visible {
  outline: 2px solid var(--ng-orange-tief);
  outline-offset: 2px;
}
.ng__knopf-nr {
  display: inline-grid; place-items: center;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  font-size: .82em; font-weight: 700;
  background: var(--ng-spur);
}
.ng__knopf[aria-pressed="true"] .ng__knopf-nr { background: rgba(26, 13, 2, .15); }

.ng__tafel {
  margin-top: 12px !important;
  background: var(--ng-flaeche-2);
  border-radius: 10px;
  padding: 12px 14px;
}

/* ----- Zahlen-Kacheln ----- */
.ng-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ng-kachel { background: var(--ng-flaeche-2); border-radius: 12px; padding: 14px 16px; }
.ng-kachel__zahl {
  display: inline-grid; place-items: center;
  min-width: 2em; height: 2em; padding: 0 .35em;
  border-radius: 999px;
  font-family: var(--font-display, inherit);
  font-weight: 800; font-size: 1.9em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--ng-spur);
  color: var(--ng-ink);
}
.ng-kachel__zahl--null {
  background: linear-gradient(135deg, var(--ng-orange), var(--ng-orange-tief));
  color: var(--ng-orange-ink);
}
.ng-kachel__name { font-weight: 700; margin-top: 10px !important; }
.ng-kachel__text { color: var(--ng-leise); font-size: .88em; margin-top: 3px !important; }
.ng-kachel__prognose {
  font-size: .82em; color: var(--ng-leise);
  margin-top: 9px !important; padding-top: 8px;
  border-top: 1px dashed var(--ng-rand);
}
.ng-balken { height: 10px; border-radius: 5px; background: var(--ng-spur); overflow: hidden; margin-top: 10px; }
.ng-balken__wert {
  height: 100%; width: var(--ng-wert, 0%); border-radius: 5px;
  background: linear-gradient(90deg, var(--ng-orange), var(--ng-orange-tief));
  transition: width 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ng-balken__legende { display: flex; justify-content: space-between; font-size: .76em; color: var(--ng-leise); margin-top: 4px; }

.ng-klappe { margin-top: 8px; }
.ng-klappe > summary, .ng-baustein > summary { list-style: none; cursor: pointer; }
.ng-klappe > summary::-webkit-details-marker, .ng-baustein > summary::-webkit-details-marker { display: none; }
.ng-klappe > summary { display: inline-flex; align-items: center; gap: 4px; font-size: .85em; font-weight: 700; color: var(--ng-gut); }
.ng-klappe > summary::after, .ng-baustein > summary::after { content: "▾"; transition: transform .2s; }
.ng-klappe[open] > summary::after, .ng-baustein[open] > summary::after { transform: rotate(180deg); }
.ng-klappe .ng-kachel__text { margin-top: 6px !important; }

/* ----- Saison-Zeitachse + Lupe ----- */
.ng-saison__achse { margin: 6px 0 2px; }
.ng-saison__spur { position: relative; height: 14px; border-radius: 7px; background: var(--ng-spur); }
.ng-saison__fuellung {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--ng-anteil, 0%); border-radius: 7px;
  background: linear-gradient(90deg, var(--ng-orange), var(--ng-orange-tief));
  transition: width 1.4s cubic-bezier(.2, .7, .2, 1);
}
.ng-saison__marke { position: absolute; top: -5px; width: 3px; height: 24px; margin-left: -1.5px; border-radius: 2px; background: var(--ng-ink); }
.ng-saison__monate { position: relative; height: 18px; margin-top: 6px; font-size: .78em; color: var(--ng-leise); }
.ng-saison__monate span { position: absolute; transform: translateX(-50%); }
.ng-saison__stand { margin-top: 10px !important; font-weight: 600; }

.ng-lupe { margin-top: 18px; }
.ng-lupe__titel { font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ng-leise); margin-bottom: 8px !important; }
.ng-lupe__tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ng-tag {
  font: inherit; color: var(--ng-ink);
  border: 1px solid var(--ng-rand); background: var(--ng-flaeche-2);
  border-radius: 10px; padding: 8px 2px 7px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
button.ng-tag { cursor: pointer; }
.ng-tag__zahl { font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.15em; line-height: 1; }
.ng-tag__mon { font-size: .68em; color: var(--ng-leise); }
.ng-tag__schild { font-size: .64em; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ng-leise); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-tag--vergangen, .ng-tag--zukunft { opacity: .5; }
.ng-tag--zukunft { border-style: dashed; }
.ng-tag--heute { background: linear-gradient(135deg, var(--ng-orange), var(--ng-orange-tief)); color: var(--ng-orange-ink); border-color: transparent; }
.ng-tag--heute .ng-tag__mon, .ng-tag--heute .ng-tag__schild { color: var(--ng-orange-ink); }
.ng-tag[aria-pressed="true"] { outline: 2px solid var(--ng-ink); outline-offset: 2px; }

/* ----- Schema-Grafiken (SVG) ----- */
.ng-szene { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto 14px; border-radius: 12px; }
.ng-szene text { font-family: var(--font-display, "Avenir Next", system-ui, sans-serif); }
.ng-sal { stroke: transparent; stroke-width: 0; transition: stroke .3s; }
.ng[data-ng-zustand="1"] .ng-sal { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 7 6; }
.ng-welle { stroke-width: 2.5; opacity: .7; transition: opacity .3s, stroke-width .3s; }
.ng[data-ng-zustand="2"] .ng-welle { stroke-width: 4; opacity: 1; }
.ng-erosion { opacity: .5; transition: opacity .3s; }
.ng[data-ng-zustand="3"] .ng-erosion { opacity: 1; }
.ng-marke circle { fill: rgba(255, 255, 255, .16); stroke: #ffffff; stroke-width: 2; transition: fill .2s; }
.ng-marke text { fill: #ffffff; font-weight: 700; }
.ng[data-ng-zustand="1"] .ng-marke--1 circle,
.ng[data-ng-zustand="2"] .ng-marke--2 circle,
.ng[data-ng-zustand="3"] .ng-marke--3 circle { fill: #f4a932; stroke: #1a0d02; }
.ng[data-ng-zustand="1"] .ng-marke--1 text,
.ng[data-ng-zustand="2"] .ng-marke--2 text,
.ng[data-ng-zustand="3"] .ng-marke--3 text { fill: #1a0d02; }

.ng-schicht { transition: transform .9s cubic-bezier(.3, .6, .2, 1), opacity .9s; transform-box: fill-box; transform-origin: 50% 50%; }
.ng[data-ng-zustand="stark"] .ng-schicht--2 { transform: translateX(24px); }
.ng[data-ng-zustand="stark"] .ng-schicht--3 { transform: translateX(56px) rotate(5deg); opacity: .85; }
.ng[data-ng-zustand="stark"] .ng-schicht--4 { transform: translateX(100px) rotate(8deg); opacity: .8; }
.ng-pfeile { transition: opacity .6s; }
.ng-pfeile--stark { opacity: 0; }
.ng[data-ng-zustand="stark"] .ng-pfeile--stark { opacity: 1; }
.ng[data-ng-zustand="stark"] .ng-pfeile--gering { opacity: 0; }

/* ----- Bausteine ----- */
.ng-bausteine { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ng-baustein { background: var(--ng-flaeche-2); border-radius: 10px; }
.ng-baustein > summary { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.ng-baustein > summary::after { color: var(--ng-leise); }
.ng-symbol { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.ng-symbol svg { width: 14px; height: 14px; }
.ng-baustein--gut .ng-symbol { background: color-mix(in srgb, var(--ng-gut) 18%, transparent); color: var(--ng-gut); }
.ng-baustein--schlecht .ng-symbol { background: color-mix(in srgb, var(--ng-schlecht) 18%, transparent); color: var(--ng-schlecht); }
.ng-baustein__kopf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ng-baustein__name { font-weight: 700; line-height: 1.25; }
.ng-baustein__status { font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ng-baustein--gut .ng-baustein__status { color: var(--ng-gut); }
.ng-baustein--schlecht .ng-baustein__status { color: var(--ng-schlecht); }
.ng-baustein__text { padding: 0 12px 12px 48px; color: var(--ng-leise); font-size: .9em; }

/* ----- Späte Saisonstarts ----- */
.ng-starts { margin-top: 4px; }
.ng-start, .ng-starts__achse { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: end; }
.ng-start__jahr { font-family: var(--font-display, inherit); font-weight: 700; padding-bottom: 3px; }
.ng-start--jetzt .ng-start__jahr { font-weight: 800; }
.ng-start__spur { position: relative; height: 40px; }
.ng-start__spur::before { content: ""; position: absolute; left: 0; right: 0; top: 29px; height: 2px; background: var(--ng-rand); }
.ng-start__punkt { position: absolute; top: 30px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ng-ink); }
.ng-start--historisch .ng-start__punkt { background: transparent; border: 2px dashed var(--ng-ink); }
.ng-start__label { position: absolute; top: 2px; transform: translateX(-8px); font-size: .82em; white-space: nowrap; }
.ng-start__label--links { transform: translateX(calc(-100% + 8px)); }
.ng-start--jetzt .ng-start__label { transform: none; font-weight: 700; }
.ng-start__lauf { position: absolute; left: 0; top: 27px; height: 6px; width: var(--ng-bis, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--ng-orange), var(--ng-orange-tief)); }
.ng-start__weiter { position: absolute; top: 29px; left: var(--ng-bis, 0%); right: 16px; border-top: 2px dashed var(--ng-orange-tief); }
.ng-start__frage { position: absolute; right: 0; top: 19px; font-family: var(--font-display, inherit); font-weight: 800; color: var(--ng-ink); }
.ng-starts__ticks { position: relative; height: 20px; margin-top: 4px; font-size: .74em; color: var(--ng-leise); }
.ng-starts__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ng-starts__ticks span:first-child { transform: none; }
.ng-starts__ticks span:last-child { transform: translateX(-100%); }

/* Animationen erst beim Hineinscrollen: news-grafik.js setzt .ng-js an
   Grafiken, die beim Laden noch NICHT sichtbar sind, und .ng--sichtbar, sobald
   sie ins Bild kommen. Ohne Skript bleibt alles in der Endstellung stehen. */
.ng-js:not(.ng--sichtbar) .ng-saison__fuellung,
.ng-js:not(.ng--sichtbar) .ng-balken__wert { width: 0; }

@media (max-width: 520px) {
  figure.ng { padding: 16px 14px 12px; margin: 22px 0; }
  .ng-szene .ng-klein { display: none; }
  .ng-kachel__zahl { font-size: 1.6em; }
  .ng-baustein__text { padding-left: 12px; }
  /* Lupe: am Handy nur 9.–13. September, sonst werden „Spitze"/„Rekord" abgeschnitten */
  .ng-lupe__tage { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ng-tag--rand { display: none; }
  .ng-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ng-kachel { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ng *, .ng *::after { transition: none !important; animation: none !important; }
}

/* ----- Rangliste (z. B. aena-2026-08) -----
   Spalten: Rang | Name | Balken | Wert. Der Wert steht in einer eigenen Spalte,
   damit er nie mit dem Balken kollidiert — auch nicht bei negativen Werten,
   die von der Nulllinie nach links laufen. Hervorhebung (Málaga) = Orange als
   FLÄCHE, Schrift bleibt in der Textfarbe (Orange-Regel). */
.ng-rang { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ng-rang__zeile {
  display: grid; grid-template-columns: 1.6em minmax(0, 11em) minmax(0, 1fr) 4.8em;
  align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
}
.ng-rang__nr { font-weight: 700; color: var(--ng-leise); text-align: right; font-variant-numeric: tabular-nums; }
.ng-rang__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-rang__spur { position: relative; height: 12px; border-radius: 6px; background: var(--ng-flaeche-2); }
.ng-rang__balken {
  position: absolute; top: 0; bottom: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--ng-ink) 42%, transparent);
  transform-origin: left center; transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}
.ng-rang__null { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ng-leise); }
.ng-rang__wert { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-rang__zeile--minus .ng-rang__balken { background: var(--ng-schlecht); transform-origin: right center; }
.ng-rang__zeile--minus .ng-rang__wert { color: var(--ng-schlecht); }
.ng-rang__zeile--fokus { background: var(--ng-flaeche-2); }
.ng-rang__zeile--fokus .ng-rang__balken { background: linear-gradient(90deg, var(--ng-orange), var(--ng-orange-tief)); }
.ng-rang__zeile--fokus .ng-rang__name,
.ng-rang__zeile--fokus .ng-rang__wert { font-weight: 800; }
.ng-js:not(.ng--sichtbar) .ng-rang__balken { transform: scaleX(0); }
@media (max-width: 520px) {
  .ng-rang__zeile {
    grid-template-columns: 1.4em minmax(0, 1fr) auto;
    grid-template-areas: "nr name wert" ". spur spur"; row-gap: 6px;
  }
  .ng-rang__nr { grid-area: nr; } .ng-rang__name { grid-area: name; }
  .ng-rang__wert { grid-area: wert; } .ng-rang__spur { grid-area: spur; }
}

/* ----- Jahreszeiten-Leisten (herbstanfang-2026) -----
   Eigene helle Flächen mit dunkler Schrift, in allen Farbmodi gleich (wie ein
   Foto). Die nicht gewählte Reihe wird gedimmt, die Markierung läuft über
   beide Leisten. Die Beschriftung der Markierung endet an der Linie
   (translateX(-100%)), damit sie am rechten Rand nie herausragt. */
.ng-jz { position: relative; padding-top: 30px; }
.ng-jz__reihe { margin-bottom: 12px; transition: opacity .35s; }
.ng-jz__name { font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ng-leise); margin-bottom: 4px !important; }
.ng-jz__leiste { position: relative; height: 34px; border-radius: 8px; overflow: hidden; }
.ng-jz__abschnitt {
  position: absolute; top: 0; bottom: 0; display: grid; place-items: center;
  font-size: .8em; font-weight: 700; color: #1a0d02; white-space: nowrap; overflow: hidden;
  border-right: 2px solid rgba(255, 255, 255, .7);
}
.ng-jz__abschnitt--w { background: #bfe0f2; }
.ng-jz__abschnitt--f { background: #cde9c1; }
.ng-jz__abschnitt--s { background: #f6c86a; }
.ng-jz__abschnitt--h { background: #e9a36b; }
.ng[data-ng-zustand="astro"] .ng-jz__reihe--meteo,
.ng[data-ng-zustand="meteo"] .ng-jz__reihe--astro { opacity: .4; }
.ng-jz__marke { position: absolute; top: 0; bottom: 22px; width: 0; border-left: 2px dashed var(--ng-ink); z-index: 2; }
.ng-jz__marke-text {
  position: absolute; top: 0; right: 6px; white-space: nowrap;
  font-size: .78em; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--ng-orange), var(--ng-orange-tief)); color: var(--ng-orange-ink);
}
.ng-jz__monate { position: relative; height: 16px; font-size: .72em; color: var(--ng-leise); }
.ng-jz__monate span { position: absolute; transform: translateX(-50%); }
@media (max-width: 520px) {
  .ng-jz__abschnitt { font-size: .68em; }
}