/* Vergleichsseiten (/zerolog-vs-*, /claude-code-local-vs-swiss-cloud). Lädt nach produkt.css; Präfix .v-.
   Gestaltung: ruhig, die Tabelle ist das tragende Element. Keine Marken, keine Bilder. */

.v-seite .p-hero{padding:64px 0 40px}
.v-seite .p-hero::before{height:360px}
.v-seite .p-hero h1{max-width:20ch}
.v-stand{display:inline-block;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font:11px/1.6 var(--mono);color:var(--muted)}
.v-seite .p-lead{max-width:62ch}

/* "Die kurze Antwort": zwei Spalten, jede mit eigener Kopfzeile. Beide gleich gewichtet (kein Sieger). */
.v-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.v-wahl-seite{padding:22px 22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v-wahl-seite:last-child{border-color:rgba(var(--tint),.38)}
.v-wahl h3{margin:0 0 14px;font-size:16px;font-weight:560;line-height:1.4;letter-spacing:-.01em}
.v-wahl ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v-wahl li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;color:var(--muted)}
.v-wahl li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--dim)}

/* Tabelle: echte <table>. Ab 650 px werden die Zeilen gestapelt; jede Zelle trägt ihre Spaltenbeschriftung. */
.v-tabellen-rahmen{width:100%}
.v-tabelle{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6;text-align:left}
.v-tabelle caption{caption-side:top;padding:0 0 14px;text-align:left;font-size:13px;color:var(--muted)}
.v-tabelle th,.v-tabelle td{padding:16px 16px 16px 0;vertical-align:top;border-top:1px solid var(--line);font-weight:400}
.v-tabelle tbody tr:last-child>*{border-bottom:1px solid var(--line)}
.v-tabelle thead th{padding-top:0;padding-bottom:12px;border-top:0;border-bottom:1px solid var(--line);font:11px/1.5 var(--mono);color:var(--dim)}
.v-tabelle tbody th{width:17%;font-weight:560;color:var(--text)}
.v-tabelle td{width:41.5%;color:var(--muted)}
.v-tabelle td:last-child{padding-right:0;color:#d8d0e4}
.v-tabelle a,.v-wahl a,.v-frage a,.v-quellen a,.p-zeilen a{color:#d3c3ef;text-decoration:underline;text-decoration-color:#d3c3ef66;text-underline-offset:3px}
.v-tabelle a:hover,.v-wahl a:hover,.v-frage a:hover,.v-quellen a:hover,.p-zeilen a:hover{color:#fff}
.v-tabelle code{font:12.5px var(--mono);color:#ddd5ea;overflow-wrap:anywhere}

/* Häufige Fragen, Quellen */
.v-frage+.v-frage{margin-top:26px}
.v-frage h3{margin:0 0 8px;font-size:16px;font-weight:560;line-height:1.5}
.v-frage p{font-size:15px;line-height:1.65;color:var(--muted);max-width:66ch}
.v-unter{margin:28px 0 10px;font:11px/1.5 var(--mono);font-weight:400;color:var(--dim)}
.v-quellen{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.v-quellen a{overflow-wrap:anywhere}
.v-abruf{white-space:nowrap;color:var(--dim);font-size:12px}
.v-abruf::before{content:"· "}

/* Weiterführende Links am Ende */
.v-weiter{padding:64px 0 24px;border-top:1px solid var(--line)}
.v-weiter h2{font-size:17px;font-weight:540;margin:0 0 18px}
.v-weiter-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v-weiter-liste a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v-weiter-liste strong{display:block;font-size:14px;font-weight:540}
.v-weiter-liste span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.v-weiter-liste a:hover{border-color:#bea0e763}}

@media (max-width:900px){
  .v-wahl{grid-template-columns:minmax(0,1fr)}
  .v-weiter-liste{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:650px){
  .v-seite .p-hero{padding:40px 0 28px}
  .v-seite .p-hero h1{max-width:none}
  /* Kopfzeile bleibt für Screenreader, wird nur ausgeblendet. */
  .v-tabelle caption{display:block;width:auto;padding:0 0 14px}
  .v-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .v-tabelle,.v-tabelle tbody,.v-tabelle tr,.v-tabelle th,.v-tabelle td{display:block;width:auto}
  .v-tabelle tr{padding:18px 0;border-top:1px solid var(--line)}
  .v-tabelle tbody tr:last-child{border-bottom:1px solid var(--line)}
  .v-tabelle th,.v-tabelle td{padding:0;border:0}
  .v-tabelle tbody tr:last-child>*{border-bottom:0}
  .v-tabelle tbody th{width:auto;margin-bottom:10px;font-size:15px}
  .v-tabelle td{width:auto;margin-top:12px;padding:0 0 0 12px;border-left:2px solid var(--line)}
  .v-tabelle td:last-child{padding:0 0 0 12px;border-left-color:rgba(var(--tint),.55)}
  .v-tabelle td::before{content:attr(data-label);display:block;margin-bottom:2px;font:11px/1.5 var(--mono);color:var(--dim)}
}