/* gos:heating-oil-map v2.0 — Heizoel-Preiskarte, zwei Ansichten
   Landkarte UND Raster-Kartogramm, umschaltbar. Weiterhin KEIN Kartenlayer
   (Leaflet/Mapbox/OSM-Tiles): Tile-Server sind DSGVO-Fremdhosts (Standing
   Rule YYYYYYYYY). Die Umrisse liegen stattdessen als SVG-Pfade in
   assets/heating-oil-geo.js (Natural Earth, gemeinfrei) und werden
   eingebettet ausgeliefert - zur Laufzeit wird nichts von Dritten geladen.

   Warum die Kacheln bleiben: Die erhobenen US-Staaten sind fast alle kleine
   Nordost-Staaten. Auf der flaechentreuen Karte ueberlagern sich dort
   Connecticut, Rhode Island, Massachusetts, New Jersey, Delaware und Maryland
   zu einem Knaeuel - und das sind ausgerechnet die teuersten. Im Raster
   bekommt jedes Gebiet gleich viel Platz. Dasselbe gilt in Europa fuer Malta
   (Flaeche 8,5 gegen 34.423 bei Frankreich), Luxemburg und Zypern.

   Sequentielle Rampe, einfarbig, 5 Stufen, beide Modi getrennt gewaehlt und
   mit scripts/validate_palette.js --ordinal geprueft:
     hell  auf #f7f5f2: Hell-Ende 2,13:1, Delta-L-Abstaende alle >= 0,06
     dunkel auf #0c1320: Hell-Ende 2,56:1, Delta-L-Abstaende alle >= 0,06
   =================================================================== */

.gos-hom {
  --hom-s0: #8a4318;
  --hom-s1: #a85520;
  --hom-s2: #c66a2c;
  --hom-s3: #e28a45;
  --hom-s4: #f6ad70;
  --hom-i0: #ffffff;
  --hom-i1: #ffffff;
  --hom-i2: #ffffff;
  --hom-i3: #14202e;
  --hom-i4: #14202e;
  --hom-nodata: #161f2c;
  --hom-nodata-ink: #6d7a8d;
  --hom-own-ink: #c9a15a;
  --hom-surface: rgba(255, 255, 255, .04);
  --hom-line: rgba(255, 255, 255, .10);
  --hom-ink: #e9eef7;
  --hom-muted: #9aa6bd;
  --hom-gap: 3px;

  margin: 28px 0;
  color: var(--hom-ink);
}

:root[data-theme="light"] .gos-hom {
  --hom-s0: #e99762;
  --hom-s1: #d8783c;
  --hom-s2: #bd5b22;
  --hom-s3: #974316;
  --hom-s4: #682c0c;
  --hom-i0: #2b1407;
  --hom-i1: #2b1407;
  --hom-i2: #ffffff;
  --hom-i3: #ffffff;
  --hom-i4: #ffffff;
  --hom-nodata: #eae5dd;
  --hom-nodata-ink: #77808c;
  --hom-own-ink: #8a6420;
  --hom-surface: #ffffff;
  --hom-line: #d7d1c9;
  --hom-ink: #14202e;
  --hom-muted: #5a6673;
}

/* ---------- Karte: Kopf ---------- */
.gos-hom__panel {
  background: var(--hom-surface);
  border: 1px solid var(--hom-line);
  border-radius: 16px;
  padding: 18px 16px 16px;
  margin-bottom: 20px;
}
.gos-hom__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 4px;
}
.gos-hom__title {
  font: 700 1.05rem/1.3 inherit;
  margin: 0;
  letter-spacing: .01em;
}
.gos-hom__unit {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hom-muted);
  border: 1px solid var(--hom-line);
  border-radius: 999px;
  padding: 2px 9px;
}
.gos-hom__meta {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--hom-muted);
  margin: 0 0 14px;
}
.gos-hom__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gos-hom__flag {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 7px;
  margin-right: 7px;
  background: rgba(245, 158, 11, .16);
  color: #f5b544;
  border: 1px solid rgba(245, 158, 11, .35);
}
:root[data-theme="light"] .gos-hom__flag { background: #fdf1dc; color: #7a4a04; border-color: #e6c98d; }

/* ---------- Raster ---------- */
.gos-hom__gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gos-hom__grid {
  display: grid;
  gap: var(--hom-gap);
  min-width: 280px;
}
.gos-hom__grid--us { grid-template-columns: repeat(12, minmax(19px, 1fr)); }
@media (min-width: 620px) { .gos-hom__grid--us { grid-template-columns: repeat(12, minmax(34px, 1fr)); } }
.gos-hom__grid--eu { grid-template-columns: repeat(6, minmax(42px, 1fr)); max-width: 460px; }

.gos-hom__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 5px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font: inherit;
  cursor: default;
  background: var(--hom-nodata);
  color: var(--hom-nodata-ink);
  overflow: hidden;
}
.gos-hom__cell[data-has="1"] { cursor: pointer; }
.gos-hom__cell:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  z-index: 3;
}
/* Textur statt Farbe allein: "keine Erhebung" traegt Schraffur.
   Bewusst zurueckhaltend - die Leerflaeche ist Information, kein Blickfang. */
.gos-hom__cell[data-has="0"]::after,
.gos-hom__cell[data-has="2"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg,
    currentColor 0 1px, transparent 1px 7px);
  opacity: .16;
  pointer-events: none;
}
/* Land ohne Bulletin-Wert, aber mit eigener Quelle: gestrichelter Rahmen */
.gos-hom__cell[data-has="2"] {
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--hom-own-ink);
}
.gos-hom__cell[data-has="2"] .gos-hom__code::after {
  content: "*";
  font-size: .8em;
  vertical-align: super;
}
.gos-hom__cell[data-bin="0"] { background: var(--hom-s0); color: var(--hom-i0); }
.gos-hom__cell[data-bin="1"] { background: var(--hom-s1); color: var(--hom-i1); }
.gos-hom__cell[data-bin="2"] { background: var(--hom-s2); color: var(--hom-i2); }
.gos-hom__cell[data-bin="3"] { background: var(--hom-s3); color: var(--hom-i3); }
.gos-hom__cell[data-bin="4"] { background: var(--hom-s4); color: var(--hom-i4); }

.gos-hom__code {
  font-size: clamp(.58rem, 1.7vw, .74rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
.gos-hom__val {
  font-size: clamp(.5rem, 1.45vw, .64rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: .92;
}
.gos-hom__grid--us .gos-hom__val { display: none; }
@media (min-width: 620px) { .gos-hom__grid--us .gos-hom__val { display: block; } }

/* ---------- Legende ---------- */
.gos-hom__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 14px;
  font-size: .76rem;
  color: var(--hom-muted);
}
.gos-hom__scale { display: flex; align-items: center; gap: 2px; }
.gos-hom__sw {
  width: 30px;
  height: 13px;
  border-radius: 3px;
  display: block;
}
.gos-hom__scale-ends {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.gos-hom__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gos-hom__legend-nd {
  position: relative;
  width: 14px; height: 13px;
  border-radius: 3px;
  background: var(--hom-nodata);
  color: var(--hom-nodata-ink);
  overflow: hidden;
}
.gos-hom__legend-nd::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 6px);
  opacity: .5;
}

/* ---------- Tooltip ---------- */
/* Der Tooltip haengt am <body>, nicht innerhalb von .gos-hom - die dort
   definierten Farbtoken sind hier also unbekannt. Ohne diesen Block ergibt
   "stroke: var(--hom-s3)" den Wert none, und die Verlaufslinie ist zwar
   korrekt gezeichnet, aber unsichtbar. Dasselbe traf --hom-muted bereits
   vorher fuer den Zusatztext. */
.gos-hom__tip {
  --hom-s3: #e28a45;
  --hom-s4: #f6ad70;
  --hom-line: rgba(255, 255, 255, .14);
  --hom-muted: #9aa6bd;
}
:root[data-theme="light"] .gos-hom__tip {
  --hom-s3: #974316;
  --hom-s4: #682c0c;
  --hom-line: #d7d1c9;
  --hom-muted: #5a6673;
}
.gos-hom__tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  max-width: 230px;
  background: #0f1826;
  color: #e9eef7;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: .8rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
:root[data-theme="light"] .gos-hom__tip {
  background: #ffffff; color: #14202e;
  border-color: #d7d1c9;
  box-shadow: 0 8px 24px rgba(20, 32, 46, .16);
}
.gos-hom__tip[data-open="1"] { opacity: 1; transform: translateY(0); }
.gos-hom__tip b { display: block; font-size: .86rem; }
.gos-hom__tip .v { font-variant-numeric: tabular-nums; font-weight: 700; }
.gos-hom__tip .s { color: var(--hom-muted); font-size: .74rem; }

/* ---------- Tabellenansicht ---------- */
.gos-hom__toggle {
  margin-top: 12px;
  background: none;
  border: 1px solid var(--hom-line);
  border-radius: 999px;
  color: var(--hom-muted);
  font: 600 .78rem/1 inherit;
  padding: 7px 14px;
  cursor: pointer;
}
.gos-hom__toggle:hover { color: var(--hom-ink); }
.gos-hom__table { margin-top: 12px; overflow-x: auto; }
.gos-hom__table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gos-hom__table th, .gos-hom__table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hom-line);
}
.gos-hom__table th { font-weight: 700; color: var(--hom-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.gos-hom__table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Benchmark-Zeile ---------- */
.gos-hom__bench {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.gos-hom__bcard {
  flex: 1 1 170px;
  background: var(--hom-surface);
  border: 1px solid var(--hom-line);
  border-radius: 12px;
  padding: 12px 14px;
}
.gos-hom__blabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hom-muted); }
.gos-hom__bval { font: 700 1.35rem/1.2 inherit; font-variant-numeric: tabular-nums; margin-top: 3px; }
.gos-hom__bsub { font-size: .74rem; color: var(--hom-muted); margin-top: 2px; }

.gos-hom__err {
  border: 1px solid var(--hom-line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--hom-muted);
  font-size: .88rem;
}

/* ---------- DACH: Laenderzeile ---------- */
.gos-hom__countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.gos-hom__country {
  border: 1px solid var(--hom-line);
  border-radius: 12px;
  padding: 14px 16px;
}
.gos-hom__clabel {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hom-muted);
}
.gos-hom__cval { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.gos-hom__cnum { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.gos-hom__cunit { font-size: .8rem; color: var(--hom-muted); }
.gos-hom__csub { font-size: .74rem; color: var(--hom-muted); margin-top: 5px; line-height: 1.45; }
.gos-hom__foot { font-size: .76rem; color: var(--hom-muted); line-height: 1.5; margin: 12px 0 0; }

/* ---------- DACH: Regionenkarten ---------- */
.gos-hom__regrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 22px;
  align-items: start;
}
.gos-hom__regblock { min-width: 0; }
.gos-hom__regname {
  font: 700 .86rem/1.3 inherit;
  margin: 0 0 8px;
  letter-spacing: .02em;
}
.gos-hom__grid--reg { max-width: 260px; }
.gos-hom__cell--reg .gos-hom__code { font-size: clamp(.5rem, 1.5vw, .66rem); }

.gos-hom__legend--steps { align-items: flex-start; gap: 6px 12px; }
.gos-hom__legend-cap { font-weight: 700; }
.gos-hom__sw--sm { width: 15px; height: 11px; }

/* ---------- Rheinpegel ---------- */
.gos-hom__panel--rhine { border-color: color-mix(in srgb, var(--hom-s2) 45%, var(--hom-line)); }
.gos-hom__rhine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
}
.gos-hom__rval { display: flex; align-items: baseline; gap: 6px; }
.gos-hom__rinfo { flex: 1 1 240px; min-width: 0; }
.gos-hom__rband {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hom-s2);
}
:root[data-theme="light"] .gos-hom__rband { color: var(--hom-s3); }
.gos-hom__rtext { margin: 3px 0 0; font-size: .85rem; line-height: 1.55; color: var(--hom-muted); }

.gos-hom__rscale { margin: 20px 0 6px; padding: 0 2px; }
.gos-hom__rtrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--hom-s4) 0%, var(--hom-s3) 11%, var(--hom-s2) 21%, var(--hom-nodata) 40%,
    var(--hom-nodata) 88%, var(--hom-s2) 100%);
}
:root[data-theme="light"] .gos-hom__rtrack {
  background: linear-gradient(90deg,
    var(--hom-s4) 0%, var(--hom-s3) 11%, var(--hom-s2) 21%, var(--hom-nodata) 40%,
    var(--hom-nodata) 88%, var(--hom-s2) 100%);
}
.gos-hom__rmark {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 16px;
  background: var(--hom-muted);
  opacity: .55;
}
.gos-hom__rmark::after {
  content: attr(data-l);
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .64rem;
  color: var(--hom-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gos-hom__rdot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hom-ink);
  border: 3px solid var(--hom-surface);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--hom-line);
}
.gos-hom__rscale { padding-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .gos-hom__tip { transition: none; }
}

/* ======================================================================
   Ansicht 2: Landkarte
   ====================================================================== */
.gos-hom__views {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
}
.gos-hom__view {
  font: inherit;
  font-size: .78rem;
  line-height: 1;
  padding: 7px 13px;
  border: 1px solid var(--hom-line);
  border-radius: 999px;
  background: transparent;
  color: var(--hom-muted);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.gos-hom__view:hover { color: var(--hom-ink); border-color: var(--hom-ink); }
.gos-hom__view[aria-pressed="true"] {
  color: var(--hom-i2);
  background: var(--hom-s2);
  border-color: var(--hom-s2);
}
.gos-hom__view:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.gos-hom__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  margin-inline: auto;
}
/* Hoehen bewusst in Pixeln: vh richtet sich nach dem Fenster, nicht nach der
   Karte - auf einem flachen Laptop schrumpft die Karte sonst ins Briefmarkenformat. */
.gos-hom__svg--us  { max-height: 540px; }
.gos-hom__svg--eu  { max-height: 660px; }
.gos-hom__svg--reg { max-height: 330px; }

/* Umland: Nachbarlaender ohne Daten. Stumm, nicht bedienbar - aber mit
   Grenzen, sonst liest sich der Hintergrund wie graue Pappe statt wie Karte. */
.gos-hom__ctx {
  fill: var(--hom-nodata);
  stroke: var(--hom-line);
  stroke-width: 1;
  opacity: .55;
  pointer-events: none;
}

.gos-hom__area {
  fill: var(--hom-nodata);
  stroke: var(--hom-surface);
  stroke-width: 1.1;
  stroke-linejoin: round;
  cursor: default;
  transition: filter .12s ease, stroke-width .12s ease;
}
.gos-hom__area[data-has="1"], .gos-hom__area[data-has="2"] { cursor: pointer; }
.gos-hom__area[data-bin="0"] { fill: var(--hom-s0); }
.gos-hom__area[data-bin="1"] { fill: var(--hom-s1); }
.gos-hom__area[data-bin="2"] { fill: var(--hom-s2); }
.gos-hom__area[data-bin="3"] { fill: var(--hom-s3); }
.gos-hom__area[data-bin="4"] { fill: var(--hom-s4); }
/* "keine Erhebung" traegt Schraffur, nie Farbe allein. Das Muster setzt das
   Skript je Karte als fill-Attribut mit eigener id - hier KEIN fill, sonst
   ueberschreibt die Regel den Verweis und die Flaeche bliebe leer. */
.gos-hom__area[data-has="0"] { opacity: 1; }

.gos-hom__dot {
  stroke: var(--hom-surface);
  stroke-width: 1.4;
  fill: var(--hom-nodata);
  pointer-events: none;
}
.gos-hom__dot[data-bin="0"] { fill: var(--hom-s0); }
.gos-hom__dot[data-bin="1"] { fill: var(--hom-s1); }
.gos-hom__dot[data-bin="2"] { fill: var(--hom-s2); }
.gos-hom__dot[data-bin="3"] { fill: var(--hom-s3); }
.gos-hom__dot[data-bin="4"] { fill: var(--hom-s4); }

/* Unsichtbare, groessere Trefferflaeche fuer winzige Gebiete */
.gos-hom__hit { fill: transparent; cursor: pointer; }

.gos-hom__labels { pointer-events: none; }
/* Farbe setzt das Skript je Stufe (siehe renderSvg): Weiss auf der hellsten
   Rampenstufe erreichte gemessen 1,89:1. Hier nur die Technik, keine Farbe -
   sonst ueberschriebe die Regel die geprueften Paare. */
.gos-hom__slabel {
  font-weight: 700;
  text-anchor: middle;
  fill: var(--hom-ink);
  paint-order: stroke fill;
  stroke: var(--hom-nodata);
  stroke-width: 2.6px;
  stroke-linejoin: round;
}
.gos-hom__slabel-v { font-weight: 600; font-size: 13px; }

/* ---------- Rueckmeldung beim Zeigen ----------
   Vorher gab es keine einzige :hover-Regel. Die Tooltips waren da, aber
   nichts zeigte das an - die Karte wirkte tot, obwohl sie es nicht war. */
.gos-hom__area[data-has="1"]:hover,
.gos-hom__area[data-has="2"]:hover,
.gos-hom__area[data-has="1"]:focus-visible,
.gos-hom__area[data-has="2"]:focus-visible {
  filter: brightness(1.18);
  stroke: var(--hom-ink);
  stroke-width: 2.2;
  outline: none;
}
.gos-hom__cell[data-has="1"]:hover,
.gos-hom__cell[data-has="2"]:hover {
  filter: brightness(1.14);
  box-shadow: inset 0 0 0 2px var(--hom-ink);
}
.gos-hom__cell--reg:hover { filter: brightness(1.14); }

/* Vergleichswert: bleibt sichtbar markiert, auch ohne Zeiger */
.gos-hom__area[data-cmp="1"] {
  stroke: var(--hom-ink);
  stroke-width: 2.6;
  filter: brightness(1.1);
}
.gos-hom__cell[data-cmp="1"] {
  box-shadow: inset 0 0 0 2.5px var(--hom-ink);
}

.gos-hom__cmpbar[hidden] { display: none; }
.gos-hom__cmpbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--hom-line);
  border-radius: 8px;
  font-size: .82rem;
}
.gos-hom__cmptxt { color: var(--hom-ink); }
.gos-hom__cmpclear {
  font: inherit;
  font-size: .78rem;
  padding: 4px 10px;
  border: 1px solid var(--hom-line);
  border-radius: 999px;
  background: transparent;
  color: var(--hom-muted);
  cursor: pointer;
}
.gos-hom__cmpclear:hover { color: var(--hom-ink); border-color: var(--hom-ink); }

.gos-hom__hint {
  margin: 8px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--hom-muted);
}

/* ---------- Verlaufslinie im Tooltip ---------- */
.gos-hom__spark { display: block; margin-top: 7px; }
.gos-hom__spark svg {
  display: block;
  width: 140px;
  height: 34px;
  overflow: visible;
}
.gos-hom__spark path {
  fill: none;
  stroke: var(--hom-s3);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gos-hom__spark circle { fill: var(--hom-s4); }
.gos-hom__sparkcap {
  display: block;
  margin-top: 3px;
  font-size: .7rem;
  color: var(--hom-muted);
}
.gos-hom__diff {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--hom-line);
  font-size: .76rem;
  color: var(--hom-muted);
}

/* ---------- Sortierbare Tabelle ---------- */
.gos-hom__sort {
  font: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
.gos-hom__sort:hover { text-decoration: underline; }
.gos-hom__table th[aria-sort] .gos-hom__sort::after {
  content: " \2191";
  font-size: .8em;
}
.gos-hom__table th[aria-sort="descending"] .gos-hom__sort::after { content: " \2193"; }

@media (prefers-reduced-motion: reduce) {
  .gos-hom__area, .gos-hom__view { transition: none; }
}

@media (max-width: 620px) {
  .gos-hom__svg { max-height: none; }
  /* Fingerkuppe braucht Flaeche: auf schmalen Schirmen groesserer Treffradius */
  .gos-hom__hit { r: 16; }
}