/* ============================================================
   Verdor — RASTER-BAUSTEINE
   Ergaenzt components.css. Alle Raster brechen mobil auf eine
   Spalte um; deshalb nie ein Grid inline im Seiten-Code setzen.
   ============================================================ */

.g-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.g-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.g-3--wide { gap: var(--s-7); }
.g-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); align-items: center; }
.split--top { align-items: start; }
.split--a { grid-template-columns: 0.85fr 1.15fr; }
.split--b { grid-template-columns: 1.05fr 0.95fr; }

/* Freigestellte Preis-Plakette am Werkstattbild */
.badge-price {
  position: absolute; right: -32px; bottom: -32px;
  background: var(--accent); color: #fff;
  padding: 28px 32px; border-radius: var(--r-card);
  box-shadow: var(--shadow-lift); max-width: 260px;
}
/* Raster- und Flex-Kinder duerfen unter ihre Inhaltsbreite schrumpfen —
   sonst schiebt ein langes Wort die ganze Spalte aus dem Bild. */
.g-2 > *, .g-3 > *, .g-foot > *, .split > * { min-width: 0; }

.media-stack { display: flex; flex-direction: column; gap: 16px; }
.media-tall { height: 520px; border-radius: var(--r-card); }
.media-wide { height: 260px; border-radius: var(--r-card); }

/* Kopfzeilen-Button bleibt immer schmal */
.nav .btn { width: auto; }

@media (max-width: 1100px) {
  .g-3--wide { gap: var(--s-6); }
  .g-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
  .split, .split--a, .split--b { grid-template-columns: 1fr; gap: var(--s-7); }
  .media-tall { height: 420px; }
  .media-wide { height: 220px; }
  .badge-price { right: 20px; bottom: -24px; }
}

@media (max-width: 760px) {
  .g-2, .g-3, .g-foot { grid-template-columns: 1fr; gap: var(--s-5); }
  .g-3--wide { gap: var(--s-6); }
  .split, .split--a, .split--b { gap: var(--s-6); }
  .media-tall { height: 300px; }
  .media-wide { height: 180px; }
  .badge-price {
    position: static; max-width: none; margin-top: 16px;
    padding: 22px 24px; box-shadow: none;
  }
  .card { padding: var(--s-5); }
}