/* Upgrades und Controller-Mods (app/content/seiten/upgrades.php). Kopf dunkel mit dem Stick-Modul als Produktbild,
   darunter die Controller als Karten mit Preis, die Upgrades als Kacheln und ein kurzer Ablauf. */

/* ---------- Kopf ---------- */
.upg-kopf .knopf-reihe { margin-top: 1.6em; }
.upg-kopf__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 900px) { .upg-kopf__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; } }
.upg-kopf__bild { position: relative; justify-self: center; width: min(100%, 360px); margin: 0; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #f4f5f7 0%, #d9dce1 58%, rgb(217 220 225 / 0) 71%); }
.upg-kopf__bild img { width: 62%; height: auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .35)); }
.upg-kopf__bild figcaption { position: absolute; right: 4%; bottom: 10%; padding: 10px 14px 9px; border-radius: 6px; background: #D40000; color: #fff;
  font: 700 1.5rem/1 var(--din); transform: rotate(-4deg); box-shadow: 0 8px 20px rgb(0 0 0 / .35); }
.upg-kopf__bild figcaption span { font-size: .85rem; font-weight: 400; }
@media (max-width: 599px) { .upg-kopf__bild { width: min(70%, 260px); } .upg-kopf__bild figcaption { font-size: 1.25rem; } }

/* ---------- Controller ---------- */
.upg-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 48px; align-items: center; margin-bottom: 28px; }
@media (min-width: 900px) { .upg-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.upg-intro .h2 { margin-bottom: 0; }
/* Vergleich „Neuer Controller“ gegen „Hall-Effekt-Upgrade“ (Verkaufsargument des Founders, 03.11.) */
.upg-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 519px) { .upg-vergleich { grid-template-columns: minmax(0, 1fr); } }
.upg-vergleich__spalte { padding: 18px 18px 16px; border: 2px solid transparent; border-radius: var(--radius-gross); background: var(--werkbank); }
.upg-vergleich__spalte--upgrade { border-color: var(--rot); background: #fff; }
.upg-vergleich__titel { margin: 0 0 10px; font: 700 1.05rem/1.2 var(--din); }
.upg-vergleich ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.upg-vergleich li { display: flex; gap: 8px; align-items: flex-start; font-size: .93rem; line-height: 1.4; color: var(--text-2); }
.upg-vergleich__spalte:not(.upg-vergleich__spalte--upgrade) li::before { content: ""; flex: none; width: 10px; height: 2px; margin: .62em 4px 0 2px; background: var(--stahl); }
.upg-vergleich .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gruen-text); }
.upg-vergleich strong { color: var(--schwarz); }

.upg-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .upg-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .upg-karten { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.upg-karte { display: flex; flex-direction: column; padding: 16px 16px 18px; border: 1px solid var(--alu); border-radius: var(--radius-gross); background: #fff; }
.upg-karte__bild { display: block; width: auto; height: 120px; margin: 4px auto 14px; object-fit: contain; }
.upg-karte__name { margin: 0; font: 700 1rem/1.25 var(--din); overflow-wrap: break-word; }
.upg-karte__was { margin: 4px 0 0; font-size: .86rem; line-height: 1.4; color: var(--text-2); }
.upg-karte__preis { margin: auto 0 0; padding-top: 12px; font: 700 1.6rem/1 var(--din); font-variant-numeric: tabular-nums; }
.upg-karte__knopf { margin-top: 12px; width: 100%; justify-content: center; }
.upg-klein { margin: 18px 0 0; font-size: .95rem; color: var(--text-2); }
.upg-klein a { color: var(--rot); font-weight: 600; }
@media (max-width: 420px) { .upg-karte { padding: 12px 12px 14px; } .upg-karte__bild { height: 92px; } .upg-karte__preis { font-size: 1.35rem; } }

/* ---------- Upgrades ---------- */
.upg-auf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .upg-auf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .upg-auf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.upg-auf__karte { display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: var(--radius-gross); background: #fff; }
.upg-auf__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 10px; background: var(--werkbank); color: var(--rot); }
.upg-auf__karte .h4 { margin: 0 0 8px; }
.upg-auf__karte p { margin: 0; color: var(--text-2); line-height: 1.5; }
.upg-auf__karte .upg-auf__fuss { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; color: var(--schwarz); }
.upg-auf__preis { font-size: .86rem; color: var(--stahl); }
.upg-auf__fuss .pfeil-link { color: var(--rot); }

/* ---------- Ablauf ---------- */
.upg-ablauf { display: grid; gap: 22px; margin: 26px 0 8px; padding: 0; list-style: none; }
@media (min-width: 800px) { .upg-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.upg-ablauf li { padding-top: 16px; border-top: 2px solid var(--schwarz); }
.upg-ablauf__nr { display: block; margin-bottom: 10px; font: 700 2.4rem/1 var(--din); color: var(--rot); }
.upg-ablauf p { margin: 0; color: var(--text-2); }