/* ============================================================
   Seitenfenster — Anbietervergleich neben der Trefferliste (Regal-Stil).
   Umgeschaltet 2026-09-10 aus dem Entwurf 4a (vorher Prototyp
   `panel-entwurf.css`). Geladen von results.html, kategorie.html und
   vehicle.html; der Inhalt kommt aus _panel.html per /vergleich/<slug>.
   Die HUELLE (`.vergleich`: sticky am Desktop, Seitenleiste mobil) steht
   weiter in style.css, ebenso `.vp-laedt`, der Platzhalter und die Abdunklung.

   Alle Werte aus den V1-Tokens (static/design/*.css) — keine Hardcodes.
   Praefix `sf-` (Seitenfenster).

   MASSGEBEND IST DIE ECHTE BREITE, NICHT DIE GEZEICHNETE: die Vergleichsspalte
   ist 380 px breit (style.css `.vergleich-spalte`), der Entwurf zeichnet 404.
   Innen bleiben nach Rahmen und 18 px Polsterung 342 px.
   Bericht und Messungen: docs/vergleichsseite-redesign-plan.md, Abschnitt 10;
   Abweichungen von der Vorlage: docs/design-abweichungen.md (S1-S11).
   ============================================================ */

/* --- Kopf ---------------------------------------------------------------- */
.sf-kopf {
  flex: none; padding: 16px 18px 14px;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 11px;
}
.sf-kopf-zeile { display: flex; align-items: flex-start; gap: 12px; }
.sf-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-pn { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.sf-name {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  line-height: 1.15; color: var(--fusion-deep); overflow-wrap: anywhere;
}
/* 68 px wie gezeichnet (Bestand: 72). `contain` und heller Grund wie ueberall
   sonst — die Fotos sind nicht freigestellt und haben kein einheitliches
   Seitenverhaeltnis (Messung: docs/vergleichsseite-redesign-plan.md, 9). */
.sf-bild {
  width: 68px; height: 68px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--paper-bright); color: var(--ink-mute); overflow: hidden;
}
.sf-bild img { width: 100%; height: 100%; object-fit: contain; }
.sf-zu {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--ink-2); cursor: pointer;
}
.sf-zu:hover { background: var(--paper-sunken); color: var(--ink); }

.sf-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sf-zahl {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: var(--radius-pill); background: var(--paper-bright);
  border: 1px solid var(--line-strong);
  font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2);
}
.sf-basis { font-size: var(--text-xs); color: var(--ink-3); }
/* Teilen ohne Beschriftung: die Zeile traegt schon Zaehler und Preisbasis.
   Die Optik kommt aus style.css (`.share-btn`), hier nur Mass und Platz. */
.sf-share { margin-left: auto; min-height: 30px; padding: 0 10px; }
.sf-share .share-txt { display: none; }

.sf-ampel {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--paper-bright);
}
.sf-ampel-grund { font-size: var(--text-xs); line-height: 1.5; color: var(--ink-2); }
/* Gezeichnet als goldene Box (Entwurf 4a) statt der grauen Zeile von heute —
   ohne Fahrzeug fehlt die halbe Aussage des Vergleichs, das darf auffallen. */
.sf-fzg {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--gold-soft); border: 1px solid var(--gold-deep);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink);
}
.sf-fzg svg { flex: none; stroke: var(--ink); }
.sf-credit { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

/* --- Liste --------------------------------------------------------------- */
.sf-liste { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.sf-zeile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
}
.sf-zeile:hover { background: var(--paper); }
.sf-zeile.neben { opacity: .82; }

/* Kopf: Foto links, Textspalte daneben (Hersteller, Balken, Chips, Shop).
   Der Preis laeuft darunter ueber die volle Breite (Walter, 2026-09-10). */
.sf-z-kopf { display: flex; align-items: flex-start; gap: 12px; }
.sf-foto {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--paper-bright); color: var(--ink-mute); overflow: hidden;
}
.sf-foto img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sf-z-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Hersteller und Zustands-Chip in einer Reihe. Umbruchfaehig, weil in 278 px
   Textspalte "Aircooledshop Classic Parts" + "Gebraucht" nicht nebeneinander
   passen; der Chip faellt dann unter den Namen statt ihn zu quetschen. */
.sf-z-oben { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-hersteller {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  letter-spacing: .01em; line-height: 1.15; color: var(--ink);
  overflow-wrap: anywhere;
}
/* Ersatztext ("Hersteller k. A.") grau — die Zeile soll nicht so aussehen, als
   haette sie eine Angabe, die sie nicht hat. */
.sf-hersteller.leer { color: var(--ink-3); }

.sf-zustand {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--ink);
  border: 1.5px solid var(--line-strong);
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 700;
  white-space: nowrap;
}
.sf-zustand svg { flex: none; }
.sf-zustand.z-neu { border-color: var(--success); }
.sf-zustand.z-neu svg { stroke: var(--success); }
.sf-zustand.z-gebraucht { border-color: var(--warning); }
.sf-zustand.z-gebraucht svg { stroke: var(--warning); }
/* P12 — NOS in Gold: weder "neu" (gruen) noch "gebraucht" (gelb). */
.sf-zustand.z-nos { border-color: var(--gold-deep); }
.sf-zustand.z-nos svg { stroke: var(--gold-deep); }

/* Der dreistufige Balken. 18 px je Segment wie in der schmalen Mobilfassung
   des Regals (teilekarten.css) — mit 26 px passte neben "keine
   Herstellerangabe" nichts mehr in die Textspalte. */
.sf-signal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: help; }
.sf-balken { display: flex; gap: 3px; flex: none; }
.sf-balken .seg { width: 18px; height: 4px; border-radius: 3px; background: var(--line); }
.sf-balken .seg.an { background: var(--ink-2); }
.sf-signal-txt { font-size: var(--text-2xs); color: var(--ink-2); }

.sf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sf-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--paper);
}
/* Der Mass-Chip traegt oft die EINZIGE Angabe, die zwei sonst gleiche Zeilen
   unterscheidet — Monoschrift und Blau wie im Regal der Einzelseite. */
.sf-mass {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  border-color: var(--fusion); color: var(--fusion-deep); background: var(--fusion-soft);
}
.sf-chip.warn { border-color: var(--line-strong); color: var(--ink-3); background: var(--paper-sunken); cursor: help; }

/* --- Shop, Preis und Aktion ---------------------------------------------- */
.sf-z-fuss { display: flex; flex-direction: column; gap: 2px; }
/* Shop ueber dem Preis, linksbuendig mit dem Hersteller — wie `.rk-shop` im
   Regal der Einzelseite. */
.sf-shop {
  max-width: 100%;
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Preis und Knoepfe auf einer Zeile, mittig zueinander. Umbruchfaehig: im
   schmalen Mobil-Panel rutschen die Knoepfe rechtsbuendig darunter, statt den
   Preis zu quetschen. */
.sf-preiszeile {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 10px; margin-bottom: 2px;
}
.sf-preis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-summe {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-lg); font-weight: 600; line-height: 1.05; color: var(--ink);
  white-space: nowrap;
}
.sf-summe.klein { font-size: var(--text-sm); color: var(--ink-3); }
.sf-summe.anfrage { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-3); }
.sf-tot { font-size: var(--text-2xs); color: var(--text-muted); }
.sf-aufschluss { font-size: var(--text-2xs); color: var(--ink-3); }
.sf-aufschluss s { color: var(--ink-mute); margin-right: 4px; }
.sf-rabatt { font-size: var(--text-2xs); font-weight: 600; color: var(--success); }
.sf-klein { font-size: var(--text-2xs); color: var(--ink-3); cursor: help; }
.sf-z-fuss .gutschein-chip { align-self: flex-start; margin-top: 5px; }

.sf-tun { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sf-zettel { width: 34px; height: 34px; }
.sf-cta {
  flex: none; height: 34px; padding: 0 13px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--fusion); color: var(--text-on-color);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.sf-cta:hover { background: var(--fusion-deep); text-decoration: none; }
.sf-cta.tot {
  background: var(--paper-sunken); color: var(--ink-mute);
  border: 1px solid var(--line-soft); cursor: default;
}
.sf-cta.tot svg { display: none; }

/* --- Fuss ---------------------------------------------------------------- */
.sf-fuss {
  flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px 16px; background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
/* Gezeichnete Rueckmeldung "N auf der Liste". Haengt an zettel.js: der setzt
   `.leer`, sobald nichts drauf liegt — dann ist der Hinweis weg. */
.sf-zettel-hinweis {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--gold-soft); border: 1px solid var(--gold-deep);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink);
}
.sf-zettel-hinweis:hover { text-decoration: none; }
.sf-zettel-hinweis[hidden], .sf-zettel-hinweis.leer { display: none; }
.sf-zettel-oeffnen { text-decoration: underline; text-underline-offset: 2px; }
.sf-alle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink); background: var(--paper-bright); color: var(--ink);
  font-size: var(--text-sm); font-weight: 700;
}
.sf-alle:hover { background: var(--paper-sunken); text-decoration: none; }
.sf-hinweis { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

/* --- Mobil (2026-09-10) ----------------------------------------------------
   Unter 900 px ist das Fenster eine Seitenleiste ueber der Flaeche — die Huelle
   `.vergleich` regelt das in style.css (fixed, 86 %, max. 460 px, Wisch zum
   Schliessen in vergleich.js). Hier nur, was der INHALT dafuer braucht — uebernommen aus den frueheren
   `vp-`-Regeln des alten Panels. */
@media (max-width: 900px) {
  /* Das GANZE Panel scrollt wie eine Seite (Walter, 2026-08-07) — die Liste
     darf kein eigener Scrollbereich sein, sonst blieben ihr bei 560 px Hoehe
     kaum anderthalb Zeilen. */
  .sf-liste { flex: none; overflow: visible; }
  /* Das × steht fest, sonst scrollt es davon. Der Kopf haelt ihm rechts Platz
     frei, sonst laege es auf dem Teilefoto. */
  .sf-kopf { padding-right: 56px; }
  .sf-zu {
    position: fixed; top: 12px; right: 12px; z-index: 3;
    width: 34px; height: 34px;
    background: var(--paper-bright); border: 1px solid var(--line-soft);
    box-shadow: 0 1px 4px rgba(42, 38, 32, .12);
  }
  /* Lange Bezeichnungen fressen sonst den halben Schirm; vollstaendig steht
     der Name auf der Einzelseite, auf die er verlinkt. */
  .sf-name {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  /* Fingerziele mindestens 44 px, wie im Bestand (.vp-zettel / .zettel-btn).
     Die 34-px-Regel oben saesse sonst gegen die Mobil-Regel aus style.css. */
  .sf-zettel { width: 44px; height: 44px; }
  .sf-cta { height: 44px; padding: 0 14px; }
  .sf-share { min-height: 40px; padding: 0 12px; }
  .sf-alle { min-height: 46px; }
  .sf-zettel-hinweis { min-height: 44px; }
  /* Preis und Knoepfe sollen auch am Telefon EINE Zeile bilden (Walter,
     2026-09-10). Gemessen auf 375 px (Innenbreite 287): mit 44-px-Knoepfen
     fehlten bei "2.672,00 €" und "Preis auf Anfrage" wenige Pixel. Das
     Pfeil-Symbol im Shop-Knopf spart 19 px, der Anfrage-Text setzt zweizeilig. */
  .sf-cta svg { display: none; }
  .sf-summe.anfrage { white-space: normal; max-width: 5.5em; line-height: 1.2; }
}
@media (max-width: 380px) {
  /* Kleine Telefone (320 px, Innenbreite 239): dort passte keine einzige
     Zeile mehr, der Preis eine Stufe kleiner holt die ueblichen Betraege zurueck
     auf eine Zeile. Vierstellige Preise brechen weiter um — selten. */
  .sf-summe { font-size: var(--text-md); }
}