/* Einstiegsseite /start/ - nur Ergaenzungen zu app.css.

   Alle Farben, Abstaende und Schriften kommen aus den vorhandenen Variablen,
   damit die Seite in beiden Themes (dunkel und hell) stimmt. Kein eigenes
   Designsystem, keine externen Schriften, kein JavaScript. */

.st-hero { padding: 1.5rem 0 .5rem; }
.st-hero h1 {
  font-size: clamp(2.125rem, 7.5vw, 4rem);
  letter-spacing: -.035em;
  max-width: 18ch;
  margin: 0 0 1rem;
}
.st-hero .vorspann { max-width: 40rem; }
.st-hero .knoepfe { margin-top: 1.75rem; }

/* Drei Vorteile und die drei Schritte nutzen .gitter/.kachel aus app.css.
   Hier nur die Feinheiten, die eine Nicht-Link-Kachel braucht. */
.st-karte h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.st-karte p { margin: 0; color: var(--leise); font-size: .9375rem; line-height: 1.6; }
.st-karte:hover { transform: none; border-color: var(--glasrand); box-shadow: none; }

.st-schritt .st-nummer {
  display: inline-block;
  font-family: var(--zahl);
  font-size: .75rem;
  color: var(--cyan);
  margin-bottom: .5rem;
}
.st-schritt .st-weiter { display: block; margin-top: .75rem; font-size: .875rem; color: var(--cyan); }

/* Evidenzleiter: mobil untereinander, ab 48rem nebeneinander. */
.st-leiter { list-style: none; margin: 1.5rem 0 1rem; padding: 0; display: grid; gap: .625rem; counter-reset: stufe; }
.st-leiter li {
  counter-increment: stufe;
  position: relative;
  border: 1px solid var(--glasrand);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 45%), var(--tiefe);
  padding: .875rem 1rem .875rem 3rem;
}
.st-leiter li::before {
  content: counter(stufe);
  position: absolute;
  left: .875rem;
  top: .875rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--zahl);
  font-size: .75rem;
  display: grid;
  place-items: center;
}
.st-leiter b { display: block; font-size: .9375rem; }
.st-leiter span { display: block; margin-top: .1875rem; color: var(--leise); font-size: .875rem; line-height: 1.5; }
.st-leiter-balken { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--marine), var(--cyan)); margin: .25rem 0 0; }
.st-leiter-enden { display: flex; justify-content: space-between; gap: 1rem; margin: .4375rem 0 0; font-family: var(--zahl); font-size: .6875rem; color: var(--fein); }

@media (min-width: 48rem) {
  .st-leiter { grid-template-columns: repeat(5, 1fr); gap: .5rem; }
  .st-leiter li { padding: 2.5rem .875rem 1rem; }
  .st-leiter li::before { top: .875rem; left: .875rem; }
}

.st-abschluss {
  margin: 1.5rem 0 0;
  border: 1px solid var(--glasrand);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 40%), var(--tiefe);
  box-shadow: var(--schatten);
  padding: 1.75rem 1.5rem;
}
.st-abschluss h2 { margin-top: 0; }
.st-abschluss p { color: var(--leise); max-width: var(--spalte); }

@media (max-width: 30rem) {
  .st-hero .knoepfe .knopf { flex: 1 1 100%; text-align: center; }
  .st-abschluss { padding: 1.25rem 1.125rem; }
}

/* Checkliste auf /start/quellen-pruefen/: immer einspaltig, damit die
   laengeren Erklaerungen lesbar bleiben. */
.st-leiter.st-liste { grid-template-columns: 1fr; }
.st-leiter.st-liste li { padding: .875rem 1rem .875rem 3rem; }
.st-leiter.st-liste li::before { top: .875rem; left: .875rem; }

/* ─────────────────────────────────── Einstiegsnavigation auch mobil sichtbar

   app.css blendet .kopf nav unter 52rem aus, weil das Hauptangebot dort die
   untere Leiste (mehr.js) einblendet. Die Social-Reise laedt diese Leiste
   bewusst nicht. Deshalb bleibt die Navigation hier oben stehen und darf in
   eine zweite Zeile umbrechen. Dieses Stylesheet laedt ausschliesslich unter
   /start/, die uebrigen Seiten bleiben unveraendert. */
@media (max-width: 52rem) {
  .kopf-in {
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .625rem 1rem .6875rem;
  }
  .kopf nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    gap: .375rem;
    overflow-x: visible;
  }
  .kopf nav a {
    font-size: .8125rem;
    padding: .5rem .6875rem;
    border: 1px solid var(--glasrand);
    border-radius: 8px;
    background: var(--tiefe);
  }
  .kopf nav a[aria-current] { border-color: var(--cyan); }
}

/* Sehr schmale Geraete: etwas kompakter, damit alle vier Punkte ohne
   horizontales Scrollen in zwei Zeilen passen. */
@media (max-width: 23.5rem) {
  .kopf nav { gap: .3125rem; }
  .kopf nav a { font-size: .78125rem; padding: .4375rem .5625rem; }
}

/* ───────────────────────────────── Übergang zur vollständigen Website

   Steht auf jeder /start/-Seite unmittelbar vor der Fußzeile. Bewusst
   deutlich sichtbar, damit der Weg ins vollständige Angebot eindeutig und
   freiwillig ist - ohne Weiterleitung und ohne Unterscheidung nach Herkunft. */
.st-uebergang {
  margin: 1.5rem 0 0;
  border: 1px solid var(--cyan);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(62, 200, 242, .10), transparent 60%),
    var(--tiefe);
  padding: 1.75rem 1.5rem;
}
.st-uebergang h2 { margin-top: 0; }
.st-uebergang p { color: var(--leise); max-width: var(--spalte); }
.st-uebergang .knoepfe { margin-top: 1.25rem; }

@media (max-width: 30rem) {
  .st-uebergang { padding: 1.25rem 1.125rem; }
  .st-uebergang .knoepfe .knopf { flex: 1 1 100%; text-align: center; }
}