/* rl-detail.css – Detaillayer der BDMP-Rangliste */

.rl-layer {
  --rl-fg: #1a1a1a;
  --rl-bg: #ffffff;
  --rl-schwach: #6b6b6b;
  --rl-rand: #d9d9d9;
  --rl-raster: #e8eef3;
  --rl-verlauf: #a4161a;   /* Verlaufslinie, wie im bisherigen Diagramm */
  --rl-wertung: #14448c;   /* Wertung / Schnitt */
  --rl-flaeche: #f5f7f9;

  width: min(56rem, calc(100vw - 2rem));
  max-height: min(90dvh, 52rem);
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--rl-fg);
  background: var(--rl-bg);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
  font: 400 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.rl-layer::backdrop { background: rgb(0 0 0 / 0.45); }

/* Bootstrap/docs.css setzen display auf Elementen mit [hidden] teilweise zurueck */
.rl-layer [hidden] { display: none !important; }

.rl-layer__kopf {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rl-rand);
  background: var(--rl-flaeche);
}

.rl-layer__titel { flex: 1 1 auto; min-width: 0; }
.rl-layer__titel h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  outline: none;
}
.rl-untertitel {
  margin: 0.15rem 0 0;
  color: var(--rl-schwach);
  font-size: 0.875rem;
}

.rl-layer button {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rl-zurueck {
  padding: 0.25rem 0.6rem;
  border-color: var(--rl-rand);
  font-size: 0.875rem;
}
.rl-schliessen {
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
}
.rl-layer button:hover { background: rgb(0 0 0 / 0.06); }
.rl-layer :focus-visible { outline: 2px solid var(--rl-wertung); outline-offset: 2px; }

.rl-layer__inhalt {
  max-height: calc(90dvh - 5.5rem);
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rl-laedt, .rl-fehler { margin: 2rem 0; color: var(--rl-schwach); text-align: center; }
.rl-fehler { color: var(--rl-verlauf); }

/* Kennzahlen */
.rl-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 0 0 1rem;
}
.rl-kennzahlen dt {
  color: var(--rl-schwach);
  font-size: 0.8125rem;
}
.rl-kennzahlen dd {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}

/* Chart */
.rl-chartbox { margin: 0 0 1.25rem; }
.rl-chart { display: block; width: 100%; height: auto; }

.rl-raster { stroke: var(--rl-raster); stroke-width: 1; }
.rl-achslinie { stroke: var(--rl-rand); stroke-width: 1; }
.rl-achse { fill: var(--rl-schwach); font-size: 11px; font-variant-numeric: tabular-nums; }

.rl-linie { fill: none; stroke: var(--rl-verlauf); stroke-width: 2; stroke-linejoin: round; }
.rl-linie--luecke { stroke-dasharray: 3 5; opacity: 0.55; }

.rl-schnitt { stroke: var(--rl-wertung); stroke-width: 1.5; }
.rl-schnitt--gestrichelt { stroke-dasharray: 4 4; }
.rl-schnitt-label { fill: var(--rl-wertung); font-size: 11px; }

.rl-treffer { fill: transparent; }          /* Touch-Zielfläche */
.rl-marke { fill: var(--rl-bg); stroke: var(--rl-verlauf); stroke-width: 2; }
.rl-punkt--wertung .rl-marke { fill: var(--rl-wertung); stroke: var(--rl-wertung); }
.rl-punkt--streich .rl-marke { fill: var(--rl-bg); stroke: var(--rl-wertung); stroke-dasharray: 2 2; }
.rl-punkt--best .rl-marke { stroke-width: 3; }
.rl-punkt:hover .rl-marke, .rl-punkt:focus-visible .rl-marke { r: 7; }
.rl-punkt:focus-visible { outline: none; }
.rl-punkt:focus-visible .rl-treffer { stroke: var(--rl-wertung); stroke-width: 2; }

.rl-dq-marke { fill: none; stroke: var(--rl-schwach); stroke-width: 2; stroke-linecap: round; }
.rl-punkt--dq:hover .rl-dq-marke,
.rl-punkt--dq:focus-visible .rl-dq-marke { stroke: var(--rl-verlauf); }

.rl-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  color: var(--rl-schwach);
  font-size: 0.8125rem;
}
.rl-lg::before {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  vertical-align: baseline;
  content: "";
}
.rl-lg--wertung::before { background: var(--rl-wertung); }
.rl-lg--streich::before { border: 2px solid var(--rl-wertung); }
.rl-lg--schnitt::before {
  height: 2px;
  border-radius: 0;
  background: var(--rl-wertung);
  transform: translateY(-0.25rem);
}
.rl-lg--dq::before {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--rl-schwach);
  font-weight: 700;
  content: "\2715";
}

/* Tabelle */
.rl-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.rl-tabelle th, .rl-tabelle td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--rl-rand);
  text-align: left;
}
.rl-tabelle thead th {
  position: sticky;
  top: 0;
  background: var(--rl-bg);
  font-size: 0.8125rem;
  font-weight: 600;
}
.rl-tabelle th button { padding: 0; font: inherit; text-decoration: underline dotted; }
.rl-num { text-align: right; font-variant-numeric: tabular-nums; }
.rl-tabelle a { color: var(--rl-wertung); text-decoration: none; }
.rl-tabelle a:hover { text-decoration: underline; }
.rl-tabelle tbody tr:hover { background: var(--rl-flaeche); }
.rl-best td { font-weight: 600; }
.rl-streich td { color: var(--rl-schwach); }
.rl-dq td { color: var(--rl-schwach); }
.rl-dq td[data-label="Ergebnis"] { font-weight: 600; }

/* Mobiler Umbruch: Zeile wird zum Block mit Beschriftungen */
@media (max-width: 560px) {
  .rl-layer { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .rl-layer__inhalt { max-height: calc(100dvh - 5.5rem); padding: 1rem; }

  .rl-tabelle thead { display: none; }
  .rl-tabelle tr {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rl-rand);
  }
  .rl-tabelle td { padding: 0.1rem 0; border: 0; }
  .rl-tabelle td[data-label="Wettkampf"], .rl-tabelle td[data-label="Name"] {
    grid-column: 1;
    font-weight: 500;
  }
  .rl-tabelle td[data-label="Ergebnis"] {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
  }
  .rl-tabelle td[data-label="Datum"], .rl-tabelle td[data-label="Verein"] {
    grid-column: 1;
    color: var(--rl-schwach);
    font-size: 0.8125rem;
  }
  .rl-tabelle td[data-label="Land"] {
    grid-column: 2;
    color: var(--rl-schwach);
    font-size: 0.8125rem;
    text-align: right;
  }
}

@media (prefers-color-scheme: dark) {
  .rl-layer {
    --rl-fg: #ececec;
    --rl-bg: #1c1d1f;
    --rl-schwach: #9a9a9a;
    --rl-rand: #3a3c3f;
    --rl-raster: #2c3237;
    --rl-verlauf: #ef6461;
    --rl-wertung: #6ea8fe;
    --rl-flaeche: #26282b;
  }
  .rl-layer button:hover { background: rgb(255 255 255 / 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-layer, .rl-layer * { transition: none !important; animation: none !important; }
}