/* Vergleichsseiten „Art A oder Art B?“ (/vergleich/…) – ergänzt rechtliches.css, artseite.css und ratgeber.css.
   Farben nur über die gemeinsamen Variablen, damit Hell- und Dunkelmodus von selbst mitziehen. */

/* Zwei Fotos nebeneinander, auf dem Handy untereinander */
.vg-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.vg-bild { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.vg-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.vg-leer { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 3 / 2;
  background: var(--accent-soft); color: var(--accent); font-size: .85rem; }
.vg-leer svg { width: 64px; height: 64px; opacity: .6; }
.vg-bild figcaption { padding: 10px 14px 12px; line-height: 1.35; }
.vg-bild figcaption i { color: var(--ink-2); font-size: .9rem; }
.vg-name { display: block; font: 600 1.15rem/1.25 var(--f-display); color: var(--ink); text-decoration: none; }
.vg-name:hover { color: var(--accent); }
.vg-bild .partner-nachweis { margin: 6px 0 0; }
@media (max-width: 559px) { .vg-bilder { grid-template-columns: 1fr; } }

/* Tabelle „Auf einen Blick“: auf schmalen Bildschirmen seitlich verschiebbar statt zu quetschen */
.vg-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.vg-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vg-tabelle th, .vg-tabelle td { padding: 9px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.vg-tabelle thead th { border-top: 0; background: var(--accent-soft); font-weight: 600; }
.vg-tabelle tbody th { font-weight: 600; color: var(--ink-2); white-space: nowrap; width: 1%; }
.vg-tabelle td { width: 49%; }
.vg-tabelle tr.vg-anders td { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 559px) {
  .vg-tabelle { font-size: .88rem; }
  .vg-tabelle th, .vg-tabelle td { padding: 8px; }
}

/* Urteil zur Verträglichkeit – farbiger Streifen links, Text bleibt in Grundfarbe */
.vg-urteil { padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--line); background: var(--surface); }
.vg-ja { border-left-color: #2E8B57; }
.vg-nein { border-left-color: #C0392B; }
.vg-offen { border-left-color: #B8860B; }

@media print {
  .vg-bilder img, .vg-leer, .partner-nachweis { display: none !important; }
}

/* .doc ist ein Raster; ohne min-width: 0 dehnt die breite Tabelle die Seite auf dem Handy über den Rand
   (31.10.2026 bei 375 px bemerkt). So scrollt nur die Tabelle selbst seitlich. */
.vg-seite > * { min-width: 0; }
.vg-tabelle thead th { hyphens: auto; overflow-wrap: break-word; }

/* Übersicht /vergleich/: zwei kleine Fotos je Kasten (seit 07.11.2026, Olivers Wunsch).
   Der Kasten ist ein <div>, nicht mehr ein <a> – sonst lägen die Links der Fotonachweise in
   einem Link. Klickbar ist er über das gestreckte ::after des Titels; der Nachweis liegt per
   z-index darüber und bleibt einzeln anklickbar, wie bei den Artkarten auf der Startseite. */
.vkarte { position: relative; }
.vk-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vk-bilder img,
.vk-leer {
  width: 100%; height: 96px; display: block; object-fit: cover;
  border-radius: 10px; background: var(--surface-2, rgba(127, 127, 127, .12));
}
.vk-leer { display: grid; place-items: center; }
.vk-leer svg { width: 44px; height: 44px; opacity: .4; }
.vk-link { text-decoration: none; color: inherit; }
.vk-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.vk-nachweis { position: relative; z-index: 1; display: grid; gap: 2px; }
.vk-nachweis .partner-nachweis { font-size: .72rem; line-height: 1.3; }

@media print { .vk-bilder, .vk-nachweis { display: none; } }