/* ═══════════════════════════════════════════════════════════════════════════
   Startseite (index.html) + App laden (beta.html) — seitenlokale Stile
   (2026-09-27, Verkaufs-Umbau). Baut auf assets/verkauf.css auf (--vk-*,
   .vk-*), wird NACH verkauf.css geladen. Namensraum: .sd-*
   Nur diese zwei Seiten binden die Datei ein.

   Formate: Handy (Basis, 390) · Tablet ≥ 600 (820) · Tablet quer ≥ 960 (1024)
            · Desktop ≥ 1280 (1440)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Board-Kopfzeile steht bereits unter der fixierten Navigation —
   der Hero braucht darum nicht noch einmal die volle Kopfhöhe als Abstand. */
.sd-seite .vk-hero { padding-top: var(--vk-s-6); }
@media (min-width: 960px) {
  .sd-seite .vk-hero { min-height: min(calc(100svh - 120px), 820px); padding-top: var(--vk-s-5); }
}

/* Web-App als leiser dritter Weg unter den Stores */
.sd-nebenweg {
  margin: 0;
  font-size: var(--vk-fs-klein);
  color: var(--vk-text-3);
}
.sd-nebenweg .vk-textlink { font-size: var(--vk-fs-klein); }

/* ─── Merch: zweiter Schwerpunkt ─────────────────────────────────────────── */
.sd-merch {
  display: grid;
  gap: var(--vk-s-6);
  align-items: center;
}
.sd-merch .vk-kicker { color: var(--vk-magenta); }
.sd-merch .vk-kopf { margin-bottom: 0; }

.sd-merch__fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: var(--vk-s-5) 0 0;
  padding: 0;
  list-style: none;
}
.sd-merch__fakten li {
  padding: 12px 14px;
  border-radius: var(--vk-r-s);
  background: rgb(210 123 255 / .07);
  border: 1px solid rgb(210 123 255 / .22);
  font-size: var(--vk-fs-klein);
  line-height: 1.4;
  color: var(--vk-text-2);
}
.sd-merch__fakten strong {
  display: block;
  font-size: 1rem;
  color: var(--vk-text);
}
.sd-merch__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: var(--vk-s-5);
}

/* Merch-Knopf: Magenta statt Cyan — Cyan bleibt dem Download vorbehalten */
.sd-btn-merch {
  background: linear-gradient(135deg, #e3a6ff 0%, var(--vk-magenta) 100%);
  color: #1a0526;
  box-shadow: 0 0 0 1px rgb(210 123 255 / .35), 0 18px 50px -18px rgb(210 123 255 / .6);
}
.sd-btn-merch:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(210 123 255 / .55), 0 22px 60px -18px rgb(210 123 255 / .8); }
.sd-btn-merch:focus-visible { outline: 3px solid var(--vk-magenta); outline-offset: 3px; }
.sd-merch .vk-textlink { color: #e3a6ff; }
.sd-merch .vk-textlink:focus-visible { outline: 3px solid var(--vk-magenta); outline-offset: 3px; }

/* Bento: großes Teil + vier Kategorien. Handy 2 Spalten, ab 600 px 4 Spalten
   (großes Teil 2×2 — ergibt exakt ein Quadrat, die kleinen je 1×1). */
.sd-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sd-teil {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vk-r-m);
  border: 1px solid var(--vk-linie-weich);
  background: #fff;
  aspect-ratio: 1;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .25s;
}
.sd-teil img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.sd-teil:hover { border-color: rgb(210 123 255 / .6); box-shadow: 0 18px 44px -20px rgb(210 123 255 / .55); }
.sd-teil:hover img { transform: scale(1.04); }
.sd-teil:focus-visible { outline: 3px solid var(--vk-magenta); outline-offset: 3px; }
.sd-teil--gross {
  grid-column: 1 / -1;
  background: #000;
  border-color: rgb(210 123 255 / .3);
}
/* Beschriftung als dunkle Plakette — Kontrast unabhängig vom Produktbild */
.sd-teil__name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(5 13 31 / .9);
  color: var(--vk-text);
  font: 700 .8125rem/1.25 var(--vk-schrift);
}
.sd-teil--gross .sd-teil__name {
  left: 12px;
  bottom: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1rem;
  border: 1px solid rgb(210 123 255 / .35);
}
.sd-teil__name small {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: .8125rem;
  color: var(--vk-text-2);
}

@media (min-width: 600px) {
  .sd-merch__fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sd-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .sd-teil--gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
/* Tablet quer (960–1279) bleibt einspaltig: zweispaltig wurde das große Teil
   nur ~220 px breit und „Bomberjacken“ abgeschnitten (gemessen bei 1024). */
@media (min-width: 960px) {
  .sd-bento { gap: 14px; }
}
@media (min-width: 1280px) {
  .sd-merch { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; }
  .sd-merch__fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-bento { gap: 16px; }
  .sd-teil__name { left: 10px; bottom: 10px; font-size: .875rem; }
}

/* ─── Schritte (App laden) ───────────────────────────────────────────────── */
.sd-nummer {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgb(0 179 255 / .12);
  border: 1px solid var(--vk-linie);
  font: 700 1.125rem/1 var(--vk-mono);
  color: var(--vk-akzent-hell);
}
.vk-karte .sd-karte-link { margin-top: 10px; }

/* Nach dem Abschluss: die Karte aller Bereiche als Übersicht */
.sd-atlas-vor { padding-top: var(--vk-s-6); }

@media (prefers-reduced-motion: reduce) {
  .sd-teil, .sd-teil img, .sd-btn-merch { transition: none; }
  .sd-teil:hover img { transform: none; }
}

.sd-mitte { margin-top: var(--vk-s-5); text-align: center; }

/* vk-beweis--rechts: verkauf.css tauscht nur die Reihenfolge, nicht die
   Spaltenbreiten — die Screens landeten in der schmalen Spalte (3 Screens
   in ~330 px bei 1440). Hier die Breiten mitdrehen. */
@media (min-width: 960px) {
  .sd-seite .vk-beweis--rechts { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
}
@media (min-width: 1280px) {
  .sd-seite .vk-beweis--rechts { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); }
}

/* Handy + Tablet: die Produktbilder direkt unter die Überschrift, vor Fakten
   und Knopf — erst sehen, dann entscheiden. Ab 1280 px zwei Spalten. */
@media (max-width: 1279px) {
  .sd-merch__text { display: contents; }
  .sd-merch > .sd-merch__text > .vk-kopf { order: 1; }
  .sd-merch > .sd-bento { order: 2; }
  .sd-merch > .sd-merch__text > .sd-merch__fakten { order: 3; margin-top: 0; }
  .sd-merch > .sd-merch__text > .sd-merch__aktion { order: 4; margin-top: 0; }
}

/* App laden (beta.html) liegt in der District-Bühne (Rail links). Zwischen
   960 und 1279 px ist die Inhaltsspalte zu schmal für Text + drei Screens
   nebeneinander — dort wie auf dem Tablet untereinander. */
@media (min-width: 960px) and (max-width: 1279px) {
  .sd-seite .district-buehne__inhalt .vk-beweis { grid-template-columns: minmax(0, 1fr); }
  .sd-seite .district-buehne__inhalt .vk-beweis--rechts .vk-beweis__text { order: 0; }
  .sd-seite .district-buehne__inhalt .vk-beweis__screens { max-width: 720px; }
}

/* Links in Antworten als eigene Tippflächen (≥ 44 px) statt Inline-Links */
.sd-links { display: flex; flex-wrap: wrap; gap: 0 20px; }

/* Startseite: district-shell.css hält #screens (alter Home-Block) im
   1600-px-Stadtrahmen mit eigenem Rand fest. Der neue Screens-Abschnitt ist
   ein vollbreites Band wie alle anderen vk-Abschnitte — Regel hier aufheben. */
body[data-page="home"] main.sd-seite[data-district="home"] > #screens {
  width: auto;
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

/* Fixe Helfer (District Passport links, Quest Log rechts) bis 1279 px nur
   als Symbol-Knopf: ausgeschrieben verdecken sie auf Tablet-Breiten Preise,
   Bildbeschriftungen und Karten. Beschriftung bleibt für Screenreader lesbar
   (visuell versteckt, nicht entfernt), Tippfläche bleibt ≥ 44 px. */
@media (max-width: 1279px) {
  body:has(main.sd-seite) .district-passport__trigger { grid-template-columns: 2.35rem; min-height: 44px; padding: .45rem; }
  body:has(main.sd-seite) .district-passport__trigger-copy,
  body:has(main.sd-seite) .dq__launcher-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body:has(main.sd-seite) .dq__launcher { min-width: 44px; min-height: 44px; grid-template-columns: 34px; padding: 5px; }
}