/* Die vier Preismodelle im Abschnitt #vergleich der Kostenseite.

   Bis zum 28.08.2026 lag hier auch der Fuenfjahresrechner (.vg-*). Er ist
   weg: Er verlangte vom Leser Zahlen aus einem fremden Angebot, die er beim
   Lesen nicht zur Hand hat.

   Seit dem 29.08.2026 sind die vier Modelle eine Liste statt vier Karten.
   Links steht, was das Modell ist, rechts die eine Frage dazu — vier Zeilen
   liest man in derselben Zeit, in der man vier Karten sortiert. */

.mo-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
}

.mo-zeile {
  background: var(--karte);
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 10px 22px;
  padding: 14px 20px;
  align-items: baseline;
}

/* Die eigene Zeile bleibt erkennbar, ohne dass ein Wort daruebersteht. */
.mo-zeile-eigen { background: color-mix(in srgb, #D8BF92 12%, var(--karte)); }

.mo-was { display: block; }

.mo-name {
  display: block;
  font-size: 15.5px;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}

.mo-marke {
  margin-left: 8px;
  background: var(--wein);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: 2px;
  white-space: nowrap;
}

.mo-wie {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--matt);
}

.mo-frage { display: block; }

.mo-etikett {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wein);
  margin-bottom: 2px;
}

.mo-satz {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--tinte);
}

@media (max-width: 760px) {
  .mo-zeile { grid-template-columns: 1fr; gap: 8px; padding: 13px 16px; }
  .mo-was { padding-bottom: 6px; border-bottom: 1px solid var(--linie-fein); }
}