/* Rufnummernanalyse — Darstellung der Komponente.

   Alles haengt unter .rufnummern, und alle Farbwerte heissen --rn-*. Der
   Grund ist die Einbettung: als eigenstaendige Seite durfte hier "form" und
   "a" stehen, in einem fremden Layout wuerde genau das die Formulare und
   Verweise der Wirtsseite umgestalten. Ein Klassenname mehr, dafuer keine
   Ueberraschung im Lexikon.

   Die Wirtsseite darf jedes --rn-* auf .rufnummern ueberschreiben und damit
   die Komponente an ihre eigenen Farben angleichen. */

.rufnummern {
  color-scheme: light dark;
  --rn-bg: #fbfaf8;
  --rn-panel: #ffffff;
  --rn-ink: #1b1a17;
  --rn-muted: #6a6761;
  --rn-line: #e3e0da;
  --rn-accent: #14564f;
  --rn-ok: #1d6a3a;
  --rn-warn: #8a5a12;
  --rn-bad: #97331f;
  --rn-water: #a8c4d4;
  --rn-urban: #ebe7e0;
  --rn-border: #cfcac1;
  /* Schrift auf dem Akzent. Eigene Variable, weil der Akzent selbst eine ist:
     wer ihn austauscht, muss auch sagen koennen, was darauf lesbar ist. */
  --rn-on-accent: #fff;
  --rn-radius: 10px;
  --rn-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rn-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --rn-font-size: 16px;
  --rn-line-height: 1.55;
  color: var(--rn-ink);
  font-family: var(--rn-font);
  font-size: var(--rn-font-size);
  line-height: var(--rn-line-height);
}
@media (prefers-color-scheme: dark) {
  .rufnummern {
    --rn-bg: #17181a;
    --rn-panel: #1f2123;
    --rn-ink: #eceae6;
    --rn-muted: #a3a099;
    --rn-line: #32353a;
    --rn-accent: #6fbfb4;
    --rn-ok: #74c68d;
    --rn-warn: #d9ab5c;
    --rn-bad: #e08a72;
    --rn-water: #47606e;
    --rn-urban: #24262a;
    --rn-border: #3d4148;
    --rn-on-accent: #10221f;
  }
}
.rufnummern * { box-sizing: border-box; }
.rufnummern a { color: var(--rn-accent); }

/* Die Wirtsseite gestaltet ihre eigenen Formulare, und unseres ist auch eines.
   Was wir nicht selbst setzen, erbt es von dort -- Rahmen, Polster, Hintergrund.
   Deshalb hier zurueckgesetzt statt darauf zu hoffen. */
.rufnummern form {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px;
  border: 0; padding: 0; background: none; box-shadow: none;
}
.rufnummern input[type="tel"] {
  flex: 1 1 260px; min-width: 0;
  padding: 12px 14px; font-size: 1.1rem; font-variant-numeric: tabular-nums;
  /* Eingabefelder, Auswahl und Schalter erben die Schriftfamilie nicht von
     selbst, die setzt der Browser. Ohne das bliebe --rn-font hier wirkungslos. */
  font-family: inherit;
  border: 1px solid var(--rn-line); border-radius: var(--rn-radius);
  background: var(--rn-panel); color: var(--rn-ink);
}
.rufnummern input[type="tel"]:focus-visible,
.rufnummern select:focus-visible,
.rufnummern button:focus-visible {
  outline: 2px solid var(--rn-accent); outline-offset: 2px;
}
.rufnummern select, .rufnummern button {
  padding: 12px 14px; font-size: 1rem; border-radius: var(--rn-radius);
  font-family: inherit;
  border: 1px solid var(--rn-line); background: var(--rn-panel); color: var(--rn-ink);
}
.rufnummern button {
  background: var(--rn-accent); color: var(--rn-on-accent);
  border-color: var(--rn-accent); cursor: pointer; font-weight: 600;
}
.rufnummern .hint { color: var(--rn-muted); font-size: .85rem; margin: 0 0 24px; }
.rufnummern .live { font-variant-numeric: tabular-nums; }
.rufnummern .rufnummern-quellen {
  color: var(--rn-muted); font-size: .8rem;
  border-top: 1px solid var(--rn-line); padding-top: 14px; margin-top: 32px;
}

.rufnummern .card {
  background: var(--rn-panel); border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius); padding: 16px 18px; margin-bottom: 14px;
}
.rufnummern .card h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--rn-muted); margin: 0 0 12px; font-weight: 600;
}
.rufnummern .verdict { font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }
.rufnummern .verdict.ok { color: var(--rn-ok); }
.rufnummern .verdict.warn { color: var(--rn-warn); }
.rufnummern .verdict.bad { color: var(--rn-bad); }
.rufnummern dl {
  display: grid; grid-template-columns: minmax(130px, 32%) 1fr;
  gap: 8px 18px; margin: 0;
}
.rufnummern dt { color: var(--rn-muted); }
.rufnummern dd { margin: 0; overflow-wrap: anywhere; }
.rufnummern dd.mono, .rufnummern .split {
  font-family: var(--rn-font-mono); font-size: .95rem;
}
.rufnummern .split b { color: var(--rn-accent); }
.rufnummern .note { color: var(--rn-muted); font-size: .85rem; margin: 10px 0 0; }
.rufnummern .tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none;
}
.rufnummern .tags li {
  border: 1px solid var(--rn-line); border-radius: 999px; padding: 2px 10px; font-size: .85rem;
}

.rufnummern .map {
  width: 100%; height: auto; display: block; margin: 0 0 14px;
  border: 1px solid var(--rn-line); border-radius: 8px; background: var(--rn-bg);
}
.rufnummern .map .area {
  fill: var(--rn-accent); fill-opacity: .1; stroke: var(--rn-accent);
  stroke-opacity: .55; stroke-width: 1.5;
}
/* Gewaesser als Hintergrund, zurueckhaltend: sie sollen die Orientierung
   stuetzen, nicht mit dem Vorwahlgebiet um Aufmerksamkeit streiten. */
.rufnummern .map .bg {
  fill: none; stroke: var(--rn-water); stroke-linejoin: round; stroke-linecap: round;
}
.rufnummern .map .bg.rivers { stroke-width: 1.1; }
.rufnummern .map .bg.coast { stroke-width: 1.4; }
.rufnummern .map .bg.lakes { fill: var(--rn-water); fill-opacity: .5; stroke-width: .8; }
/* Bebaute Flaechen geben den Staedten eine Gestalt, ohne sich vorzudraengen. */
.rufnummern .map .bg.urban { fill: var(--rn-urban); fill-opacity: .55; stroke: none; }
/* Verwaltungsgrenzen gestrichelt: sie ordnen ein, sind aber nichts Physisches.
   Die Staatsgrenze bekommt mehr Gewicht als die Regionsgrenze darunter. */
.rufnummern .map .bg.admin1 {
  stroke: var(--rn-border); stroke-width: .9; stroke-dasharray: 5 4;
}
.rufnummern .map .bg.admin0 {
  stroke: var(--rn-muted); stroke-opacity: .65; stroke-width: 1.6; stroke-dasharray: 9 5;
}
.rufnummern .map text.region {
  font-size: 15px; font-weight: 600; letter-spacing: .12em;
  fill: var(--rn-border); stroke: none;
}
.rufnummern .map .dot { fill: var(--rn-muted); fill-opacity: .8; }
.rufnummern .map .here { fill: var(--rn-accent); }
/* Kontur in Hintergrundfarbe, damit Namen über Kreis und Punkten lesbar bleiben. */
.rufnummern .map text {
  font: 11px var(--rn-font); fill: var(--rn-muted);
  paint-order: stroke; stroke: var(--rn-bg); stroke-width: 3px; stroke-linejoin: round;
}
.rufnummern .map text.here { fill: var(--rn-ink); font-weight: 600; font-size: 12.5px; }
.rufnummern .map .scale { stroke: var(--rn-muted); stroke-width: 1.25; fill: none; }
/* Zurueckhaltend: ein Zeichen, kein Wasserzeichen. Die Kontur der Kartenschrift
   traegt es auch ueber Kuestenlinien und Ortspunkten. */
.rufnummern .map text.signatur { font-size: 10px; fill: var(--rn-muted); opacity: .7; }
/* Uebersichtsfenster: deutlich als Einschub lesbar, aber ohne Gewicht. */
.rufnummern .map .inset .frame {
  fill: var(--rn-panel); fill-opacity: .92; stroke: var(--rn-line);
}
.rufnummern .map .inset .land {
  fill: var(--rn-urban); stroke: var(--rn-border); stroke-width: .5;
}
.rufnummern .map .inset .halo { fill: var(--rn-accent); fill-opacity: .25; }
.rufnummern .map .inset .pin { fill: var(--rn-accent); }
.rufnummern .map .country {
  fill: var(--rn-urban); stroke: var(--rn-border); stroke-width: 1.2; stroke-linejoin: round;
}
.rufnummern .map .regionarea {
  fill: var(--rn-accent); fill-opacity: .14; stroke: var(--rn-accent);
  stroke-opacity: .5; stroke-width: 1.2; stroke-linejoin: round;
}

@media (max-width: 520px) {
  .rufnummern dl { grid-template-columns: 1fr; gap: 2px 0; }
  .rufnummern dd { margin-bottom: 8px; }
}