/* ============================================================
   assets/compare.css — DARSTELLUNGSEBENE (nur Startseite)

   Tokens, Kopfzeile, Nav und Umschalter: assets/theme.css
   Hier nur, was der Vergleich selbst braucht.

   Aufbau der Ergebnisliste nach dem Muster grosser Vergleichs-
   portale: eine waagerechte Zeile je Tarif, links der Betreiber,
   in der Mitte was drin ist, rechts der Preis.
   ============================================================ */

/* ---------- Regler ---------- */
.dial{padding:22px 0 20px;border-bottom:1px solid var(--line)}
.dial-q{font-size:19px;font-weight:600;letter-spacing:-.015em}
.readout{display:flex;align-items:flex-end;gap:10px;margin:14px 0 4px}
.readout .n{
  font-family:var(--mono);font-weight:700;font-size:52px;line-height:.86;
  letter-spacing:-.04em;color:var(--gold);
}
.readout .u{font-family:var(--mono);font-size:15px;color:var(--muted);padding-bottom:5px}
.hint{color:var(--muted);font-size:13.5px;min-height:20px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;
  margin:20px 0 6px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold) var(--fill,30%),var(--panel2) var(--fill,30%));
}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--panel2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--gold)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--panel);border:5px solid var(--gold);margin-top:-10px;box-shadow:var(--shadow);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--panel);border:5px solid var(--gold);
}
input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ---------- Filter ---------- */
.filters{padding:16px 0;border-bottom:1px solid var(--line)}
.frow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.frow:last-child{margin-bottom:0}
.chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  padding:6px 11px;border-radius:2px;cursor:pointer;
  background:var(--panel);color:var(--muted);
  border:1px solid var(--line);transition:all .13s ease;
}
.chip:hover{color:var(--paper)}
.chip[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:700}
.chip.op[aria-pressed=true]{background:var(--c);border-color:var(--c);color:#fff}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Sortierleiste ---------- */
.sortbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:14px 0 10px;border-bottom:1px solid var(--line);
}
.sortbar .lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
.sortbar .spacer{flex:1 1 auto}
.count{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Ergebniszeile ---------- */
#results{padding-top:12px}
.card{
  position:relative;display:grid;gap:0 16px;
  grid-template-columns:1fr;
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--c,var(--line));
  border-radius:4px;padding:14px 15px;margin-bottom:9px;
}
.card.best{border-color:var(--gold);border-left-color:var(--gold);box-shadow:var(--shadow)}
.badge{
  position:absolute;top:-9px;left:12px;
  background:var(--gold);color:#FFF8F0;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:2.5px 7px;border-radius:2px;
}
.cop{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.opdot{width:9px;height:9px;border-radius:2px;background:var(--c,var(--muted));flex:0 0 auto}
.opname{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c,var(--muted));font-weight:700;
}
.pname{font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.spec{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:3px 7px;
}
.spec.hi{color:var(--gold);border-color:var(--gold-soft)}
.spec.flag{color:var(--warn);border-color:var(--warn-soft)}
.extras{color:var(--muted);font-size:13px;margin-top:9px;line-height:1.4}

.cprice{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
}
.amt{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--paper)}
.per{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pergb{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.pergb b{color:var(--paper);font-weight:700;font-size:13px}
.verify{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  text-decoration:none;border-bottom:1px dotted var(--line);margin-left:auto;
}
.verify:hover{color:var(--gold);border-color:var(--gold)}

/* ab Tablet: echte Vergleichsportal-Zeile, Preis rechts */
@media (min-width:680px){
  .card{grid-template-columns:minmax(0,1fr) 186px;padding:15px 17px}
  .cmain{grid-column:1;grid-row:1}
  .cprice{
    grid-column:2;grid-row:1;margin-top:0;padding-top:0;padding-left:16px;
    border-top:0;border-left:1px solid var(--line);
    flex-direction:column;align-items:flex-end;text-align:right;gap:3px;
    align-self:stretch;justify-content:center;
  }
  .verify{margin-left:0;margin-top:6px}
  .amt{font-size:25px}
}

.empty{
  border:1px dashed var(--line);border-radius:4px;padding:26px 18px;text-align:center;
  color:var(--muted);font-size:14px;
}

/* ---------- Hinweise unten ---------- */
.notes{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.notes h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:12px;
}
.notes p{color:var(--muted);font-size:13.5px;margin-bottom:11px;line-height:1.55}
.notes strong{color:var(--paper);font-weight:600}
.stamp{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--muted);opacity:.75;margin-top:16px;
}

/* ---------- Abdeckungsfilter ---------- */
.covrow{align-items:center}
.covlbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
#distpick{
  font-family:var(--mono);font-size:11.5px;
  padding:6px 9px;border-radius:2px;
  background:var(--panel);color:var(--paper);
  border:1px solid var(--line);cursor:pointer;max-width:200px;
}
#distpick:disabled{opacity:.5;cursor:not-allowed}
#distpick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.covchips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chip.dist{
  background:var(--gold);border-color:var(--gold);color:#FFF8F0;font-weight:700;
}
.chip.dist span{opacity:.75;margin-left:3px}
.chip.dist:hover span{opacity:1}
.covnote{
  font-size:12px;line-height:1.45;color:var(--muted);
  margin-top:8px;padding-left:11px;border-left:2px solid var(--line);
}