/* Fernbedienung, Startseite (/remote). Eigene Klassen (rl-), Farben aus den
   Variablen in style.css. Die Bedienung selbst (/remote/app) hat remote.css. */

/* --- Abstände ------------------------------------------------------------- */

/* Die Seite ist eine Folge kurzer Abschnitte mit Kästen. Das Polster von
   .section (je 3,6 rem) und der Abstand unter dem Abschnittskopf (Einleitung
   1,4 rem) zogen Überschrift und Kästen weit auseinander. Hier dichter, nur auf
   dieser Seite (.rl-seite). */
.rl-seite .section { padding: clamp(1.4rem, 3vw, 2.2rem) 0; }
.rl-seite .abschnitt-kopf { margin-bottom: 1rem; }
.rl-seite .abschnitt-kopf h2 { margin-bottom: 0.4rem; }
.rl-seite .hero { padding-bottom: clamp(0.6rem, 2vw, 1.2rem); }

/* --- Kopf: Bild rechts ---------------------------------------------------- */

.rl-bild svg { width: 100%; height: auto; max-height: 340px; display: block; }
.rl-knoten rect, .rl-knoten circle {
  fill: var(--bg2); stroke: var(--border); stroke-width: 1.5;
}
.rl-knoten .rl-anzeige { fill: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.rl-knoten .rl-drehknopf { fill: color-mix(in srgb, var(--accent) 18%, var(--bg2)); }
.rl-mitte rect { fill: url(#rl-verlauf); stroke: none; }
.rl-marke { fill: var(--on-accent); font-weight: 700; font-size: 17px; }
.rl-freq { fill: var(--accent); font: 600 15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rl-freq.klein { font-size: 12px; }
.rl-mono { fill: var(--fg); font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rl-mono.gedimmt { fill: var(--muted); font-weight: 400; font-size: 10px; }
.rl-name { fill: var(--muted); font-size: 13px; }
.rl-klein { fill: var(--muted); font-size: 11px; }
.rl-klein.hell { fill: #fff; font-weight: 700; font-size: 8px; }
.rl-kabel { stroke: var(--muted); stroke-width: 3; fill: none; stroke-linecap: round; }
.rl-linie { stroke: var(--accent); stroke-width: 2; fill: none; opacity: 0.8; }
.rl-linie.gestrichelt { stroke: var(--accent2); stroke-dasharray: 5 6; opacity: 0.7; }
.rl-wf { stroke: var(--accent2); stroke-width: 1.6; fill: none; }
.rl-knoten .rl-ptt { fill: #e5484d; stroke: none; }

/* Eigene Stationen, nur für Angemeldete mit Stationen */
.rl-konto {
  margin-top: 1.4rem; padding: 0.8rem 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  align-items: center; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); font-size: 0.95rem;
}
.rl-konto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rl-konto li a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem;
  border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--fg);
}
.rl-konto li a:hover { border-color: var(--accent); }
.rl-punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--border); }
.rl-punkt.an { background: #10b981; box-shadow: 0 0 8px #10b981; }

/* --- Kette: vier Teile ---------------------------------------------------- */

.rl-kette {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .rl-kette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rl-kette { grid-template-columns: minmax(0, 1fr); } }
.rl-glied {
  position: relative; padding: 1.3rem 1.3rem 1.1rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card-bg);
}
.rl-glied h3 { margin: 0.6rem 0 0.4rem; }
.rl-glied p { margin: 0; color: color-mix(in srgb, var(--fg) 82%, var(--muted)); font-size: 0.96rem; }
.rl-nr {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-weight: 700; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
/* Pfeil zum nächsten Glied, nur wenn alle vier in einer Reihe stehen */
@media (min-width: 1101px) {
  .rl-glied:not(:last-child)::after {
    content: "→"; position: absolute; right: -0.95rem; top: 1.55rem; z-index: 1;
    color: var(--accent); font-weight: 700;
  }
}
.rl-hinweis { margin-top: 1.4rem; }

/* --- Endgeräte: drei Karten ---------------------------------------------- */

.rl-endgeraete {
  display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .rl-endgeraete { grid-template-columns: minmax(0, 1fr); } }
.rl-endgeraet {
  padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); min-width: 0;
}
.rl-endgeraet h3 { margin: 0 0 0.2rem; }
.rl-endgeraet-art { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.9rem; }
.rl-endgeraet > p:last-child {
  margin: 0; font-size: 0.95rem; color: color-mix(in srgb, var(--fg) 82%, var(--muted));
}

/* --- Geräte --------------------------------------------------------------- */

/* Vergleich als Erklärtabelle (feste Zeilen, keine Blätterung); auf schmalen Schirmen
   wird jede Zeile eine Karte, die Spaltennamen kommen aus data-label. */
.rl-geraete-tabelle td { vertical-align: top; }
.rl-geraete-tabelle .badge { white-space: nowrap; }
.rl-klein { color: var(--muted); font-size: 0.85em; }
.rl-einstellen-titel { margin: 2rem 0 0.7rem; }
@media (max-width: 760px) {
  .rl-geraete-wrap { overflow: visible; border: 0; background: none; }
  .rl-geraete-tabelle, .rl-geraete-tabelle tbody, .rl-geraete-tabelle tr, .rl-geraete-tabelle td { display: block; }
  .rl-geraete-tabelle thead { display: none; }
  .rl-geraete-tabelle tr { border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card-bg); padding: 0.8rem 1rem; margin-bottom: 0.8rem; }
  .rl-geraete-tabelle td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem;
    border: 0; padding: 0.15rem 0; }
  .rl-geraete-tabelle td::before { content: attr(data-label); flex: 0 0 6.5rem; color: var(--muted);
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .rl-geraete-tabelle td:first-child { font-size: 1.1rem; }
  .rl-geraete-tabelle td:first-child::before { display: none; }
}
.rl-fehlt { margin: 1.2rem 0 0; color: var(--muted); }

/* --- Funktionen: drei Gruppen ------------------------------------------- */

.rl-gruppen {
  display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .rl-gruppen { grid-template-columns: minmax(0, 1fr); } }
.rl-gruppe {
  padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); min-width: 0;
}
.rl-gruppe h3 { margin: 0 0 0.8rem; }
.rl-gruppe dl {
  margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem 0.9rem;
  font-size: 0.95rem;
}
.rl-gruppe dt { font-weight: 600; }
.rl-gruppe dd { margin: 0; color: color-mix(in srgb, var(--fg) 82%, var(--muted)); }

/* --- Sendeschutz ---------------------------------------------------------- */

.rl-schutz { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.2rem; }
@media (max-width: 900px) { .rl-schutz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rl-schutz .kennzahl-wert {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rl-text { margin: 0; color: color-mix(in srgb, var(--fg) 88%, var(--muted)); }

/* --- Dateien -------------------------------------------------------------- */

/* fünf Kacheln: breit in einer Reihe, mittel zu zweit und der Quelltext über beide Spalten */
.rl-dateien {
  display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .rl-dateien { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-dateien > .rl-datei:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .rl-dateien { grid-template-columns: minmax(0, 1fr); } }
.rl-datei {
  display: grid; gap: 0.25rem; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rl-datei:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.rl-datei-os { font-size: 1.2rem; font-weight: 700; }
.rl-datei-os::after { content: " ↓"; color: var(--accent); }
.rl-datei-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--accent); overflow-wrap: anywhere; }
.rl-datei-info { color: var(--muted); font-size: 0.9rem; }
.rl-datei-groesse { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; min-height: 1.2em; }

/* Innenraum der Klappkästen (.ausklapp aus style.css) */
.rl-ausklapp-innen { padding: 0 1rem 1rem; }
.rl-ausklapp-innen > p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.rl-ausklapp-innen.data-wrap { margin: 0 1rem 1rem; padding: 0; }
#rl-summen td.mono { overflow-wrap: anywhere; font-size: 0.85rem; }
.rl-neu-version:first-child { margin-top: 0; }
.rl-neu-version { margin: 1rem 0 0.3rem; font-size: 1rem; }
.rl-neu-version .badge { margin-left: 0.4rem; vertical-align: 0.1rem; }
#rl-neu-liste ul { margin: 0; padding-left: 1.2rem; }
#rl-neu-liste li { margin: 0.2rem 0; color: color-mix(in srgb, var(--fg) 88%, var(--muted)); }

/* --- Einrichten ----------------------------------------------------------- */

.rl-schritte {
  list-style: none; margin: 0 0 1.4rem; padding: 0; counter-reset: rl-schritt;
  display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .rl-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rl-schritte { grid-template-columns: minmax(0, 1fr); } }
.rl-schritte li { counter-increment: rl-schritt; padding-top: 0.2rem; }
.rl-schritte h3 { margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.6rem; }
.rl-schritte h3::before {
  content: counter(rl-schritt); display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 0.95rem; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.rl-schritte p { margin: 0; color: color-mix(in srgb, var(--fg) 85%, var(--muted)); font-size: 0.96rem; }

.rl-systeme {
  display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) { .rl-systeme { grid-template-columns: minmax(0, 1fr); } }
.rl-system {
  padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); min-width: 0;
}
.rl-system h3 { margin: 0 0 0.6rem; }
.rl-system ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.rl-befehle { margin: 0; display: grid; gap: 0.2rem; font-size: 0.95rem; }
.rl-befehle dt { margin-top: 0.5rem; }
.rl-befehle dd { margin: 0; color: color-mix(in srgb, var(--fg) 82%, var(--muted)); }

.rl-geraete-mehr { margin-top: 1rem; }

/* Reiter der Startseite (/remote) und der Geräteseiten: dicht unter dem Kopf */
.rl-reiter { margin: 0.4rem 0 0; }
.rl-seite .reiter-seite > .section:first-child { padding-top: 1.2rem; }
/* AFU-263: Support-Schlüssel erzeugen */
.rl-support { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.3rem; }