/* Stile fuer die Eintrittsseite (eintritt-vorschau.html, zum Launch
   index.html) - NUR das, was die Vorseite noch nicht hat: Werbekarte,
   grosser Los-geht's-Knopf, Screenshot-Zeile, Schritte, feste Leiste.
   Alles andere kommt unveraendert aus vorseite-design.css und
   vorseite-layout.css; die Farb- und Formwerte hier sind deren Tokens.
   Entstanden am 13.08.2026 aus dem Design-Board (eintrittsseite-vorschlag.md,
   5. Fassung). Die Seite gibt es wie die Vorseite nur hell. */

/* ---- Die Werbekarte (nur bei #ort=... sichtbar) ---- */

.ortskarte {
  background: linear-gradient(180deg, var(--color-accent-2-100), var(--color-accent-2-200));
  border: 1px solid color-mix(in srgb, var(--color-accent-2-700) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4) var(--space-4);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-6);
}
.ortskarte[hidden] { display: none; }

.ok-kicker {
  display: flex; align-items: center; gap: 8px;
  color: var(--color-accent-2-700);
}
.ok-kicker svg { flex: none; }

.ok-titel {
  font-size: clamp(24px, 5.5vw, 31px); line-height: 1.15;
  color: var(--color-accent-2-800);
  margin: 10px 0 6px;
}

.ok-satz {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 86%, transparent);
  margin-bottom: var(--space-4);
}

.ortskarte .gross-block { margin-inline: auto; }

.ok-zusagen {
  margin-top: var(--space-3);
  font-size: 12.5px; text-align: center;
  color: var(--color-accent-2-700);
}
.ok-zusagen b { font-weight: 600; }

/* ---- "Los geht's" in gross: im Hero, in der Karte, in der Leiste.
   Volle Breite bis 420px - auf dem Handy fuellt der Knopf die Zeile,
   am grossen Bildschirm bleibt er eine Hand breit statt ein Balken. ---- */

.gross-block {
  display: block; width: 100%; max-width: 420px;
  text-align: center;
  font-size: 17px; padding: 13px 20px;
}

/* Der Ghost-Link rutscht unter den breiten Knopf; etwas Luft dazwischen. */
.hero .row { row-gap: var(--space-2); }

/* ---- "So funktioniert es" ---- */

.sofunk { margin-top: var(--space-8); }

/* ---- Die zwei App-Bildschirme auf ihrer Buehne (Variante D) ----

   Gewaehlt am 13.08.2026 aus vier gezeigten Varianten. Die Buehne laeuft
   ueber die volle Breite und macht aus den Screenshots ein eigenes Kapitel.
   Sie traegt denselben Salbeiton wie die Werbekarte oben, aber FLACH und im
   hellsten Schritt - die Karte behaelt Verlauf, Rahmen und den kraeftigeren
   Ton und bleibt damit das lautere Element. Ohne diesen Unterschied stuenden
   zwei gleich starke gruene Flaechen uebereinander, und die Karte, an der
   die QR-Ankunft haengt, ginge unter.

   Das negative margin sprengt den Seitenrand von .wrap, das Padding gibt
   ihn innen wieder zurueck. */
.shot-buehne {
  margin: var(--space-6) calc(var(--space-4) * -1) 0;
  padding: var(--space-6) var(--space-4);
  background: var(--color-accent-2-100);
}

/* Nebeneinander, auch auf dem Handy (Betreiber-Entscheid 13.08.2026).
   Jedes Bild bekommt dort rund 150px - die Schrift darin ist nicht mehr zu
   lesen, aber Vogelfotos, Zaehlhaken und der Aufbau bleiben erkennbar, und
   genau das soll ein Blick in die App zeigen. Die Aussage tragen die
   Bildunterschriften. */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }

@media (min-width: 640px) {
  .shots { gap: var(--space-4); max-width: 560px; margin-inline: auto; }
}

.shot { margin: 0; min-width: 0; }

/* Fester Deckel mit overflow: Die beiden Bildschirme sind verschieden lang;
   ohne ihn stuende einer als Turm neben dem anderen. Angeschnitten wirken
   sie ausserdem wie ein Blick in eine laufende App statt wie ein abgelegtes
   Bild. */
.shot img {
  display: block; width: 100%; height: 240px;
  object-fit: cover; object-position: top center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg);
}

@media (min-width: 640px) {
  .shot img { height: 320px; }
}

.shot figcaption {
  margin-top: var(--space-3);
  font-size: 12.5px; line-height: 1.45; text-align: center;
  color: var(--color-accent-2-800);
}

.raster-nachweis {
  margin-top: var(--space-3);
  font-size: 11.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.raster-nachweis a { color: inherit; }

.schritte { margin-top: var(--space-4); display: grid; gap: var(--space-3); font-size: 14.5px; }

.schritt { display: flex; gap: var(--space-3); align-items: flex-start; }

.schritt .nr {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent-100); color: var(--color-accent-600);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ---- Die feste Leiste am unteren Rand ---- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: 30px var(--space-4) calc(12px + env(safe-area-inset-bottom));
  /* Weicher Verlauf statt harter Kante, damit sie zum Papierton passt.
     pointer-events nur auf dem Knopf: Der durchsichtige Teil des Verlaufs
     soll nichts verdecken, was darunter angetippt wird. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-bg) 0%, transparent),
    color-mix(in srgb, var(--color-bg) 94%, transparent) 42%,
    var(--color-bg) 75%);
  pointer-events: none;
}
.sticky-cta[hidden] { display: none; }

.sticky-cta .btn {
  pointer-events: auto;
  display: block; width: 100%; max-width: 420px;
  text-align: center; font-size: 17px; padding: 13px 20px;
  box-shadow: var(--shadow-md);
}