/* =========================================================================
   Vergleichsseiten im 100k-Look (11.10.2026): /vergleich/ und alle Seiten
   darunter. Laedt nach seiten-neu/inhalt.css, start-100k.css und
   unterseite-100k.css (werkzeuge/vergleich-bauen.py, extra_css).
     1. Vergleich im dunklen Panel (Raster der Startseite, drei Spalten)
     2. Arbeitsteilung hell (Funnel-Seiten)
     3. Kostenkarten mit Glas
     4. Handy
   ========================================================================= */

/* ---------- 1. Vergleich im dunklen Panel -------------------------------- */
.ih-dpanel .dp-titel { padding-right: 140px; }
.ih-dp-lead { margin: 16px 0 0; max-width: 40em; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ih-dp-glas { width: 104px; right: 64px; top: 56px; rotate: 8deg; filter: drop-shadow(0 26px 30px rgba(5, 2, 15, .55)); }
.ih-dp-fuss { margin: 22px 0 0; max-width: 860px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .56); }

/* ClosingHub zuerst, Spalten breiter als der Zeilenname, Text oben buendig. */
.ih-vgl .vg-zeile { grid-template-columns: minmax(0, .78fr) repeat(var(--spalten, 2), minmax(0, 1.1fr)); align-items: stretch; }
.ih-vgl .vg-zeile > span { line-height: 1.5; }
.ih-vgl .vg-kopf > span { display: flex; align-items: center; padding-top: 20px; padding-bottom: 20px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.ih-vgl .vg-kopf .vg-wir { color: #fff !important; }
.ih-vgl .ih-wir { font: 600 16px/1 var(--head); }
.ih-vgl .u-nein { display: inline-flex; width: 20px; height: 20px; color: rgba(255, 255, 255, .4); }
.ih-vgl .u-nein svg { width: 20px; height: 20px; }

/* ---------- 2. Arbeitsteilung hell --------------------------------------- */
.ih-vgl--hell { margin-top: 36px; border-color: var(--rahmen); background: var(--paper); box-shadow: 0 30px 60px -44px rgba(60, 30, 120, .4); }
.ih-vgl--hell .vg-zeile > span { color: var(--ink-2); border-top-color: var(--line); }
.ih-vgl--hell .vg-zeile > span:first-child { color: var(--ink); }
.ih-vgl--hell .vg-kopf > span { color: var(--ink-2); background: var(--tint-weak); }
.ih-vgl--hell .vg-wir { background: var(--tint-weak); color: var(--ink) !important; }
.ih-vgl--hell .vg-kopf .vg-wir { background: var(--tint); color: var(--ink) !important; }
.ih-vgl--hell .u-nein { color: var(--ink-4); }
.ih-vgl-fuss { margin-top: 20px; }

/* ---------- 3. Kostenkarten mit Glas ------------------------------------- */
.ih-kosten .pr-kopf { gap: 12px; }
.ih-kosten .pr-preis b { white-space: nowrap; }
.ih-kosten .pr-glas.ih-mono { font: 600 24px/1 var(--head); color: #5E5772; background: #F5F4F8; box-shadow: inset 0 0 0 1px #E8E5EF; }

/* ---------- 4. Handy ----------------------------------------------------- */
@media (max-width: 980px) {
  .ih-dp-glas { width: 76px; right: 28px; top: 32px; }
  .ih-dpanel .dp-titel { padding-right: 96px; }
}
@media (max-width: 760px) {
  /* Je Zeile eine Karte: Beschriftung links, Wert links buendig daneben. */
  .ih-vgl .vg-zeile { grid-template-columns: minmax(0, 1fr); }
  .ih-vgl .vg-zeile:nth-child(2) { border-top: 0; }
  .ih-vgl .vg-zeile > span[data-label] { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; text-align: left; }
  .ih-vgl .vg-zeile > span[data-label]::before { font-size: 13px; }
  .ih-vgl .vg-zeile > .vg-wir { margin: 4px -10px 2px; padding: 10px; }
  .ih-vgl--hell .vg-zeile { border-top-color: var(--line); }
  .ih-vgl--hell .vg-zeile > span { background: none; }
  .ih-vgl--hell .vg-zeile > .vg-wir { background: var(--tint-weak); }
  .ih-vgl--hell .vg-zeile > span[data-label]::before { color: var(--ink-4); }
}
@media (max-width: 620px) {
  .ih-dp-glas { width: 52px; right: 14px; top: 16px; }
  .ih-dpanel .dp-titel { padding-right: 52px; }
  .ih-dp-lead { font-size: 16px; }
  .ih-kosten .pr-glas.ih-mono { font-size: 20px; }
}