/* SupplySphere — Öffentliche Seiten (Modul I): Startseite, How it works, Sell surplus, Rechtstexte.
   Ergänzt supplysphere.css; Tokens von dort. Kein Border-Radius, keine Schatten. */

/* ---------- Startseite ---------- */
.neueste { padding-top: 56px; padding-bottom: 24px; }
.alle-link { font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; }
.typen { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 22px; }
.typen-raster { gap: 14px; }
.typ-karte { padding: 18px; gap: 10px; min-height: 130px; color: var(--ink); }
.typ-karte:hover { border-color: var(--yellow); color: var(--ink); }
.typ-karte:hover .typ-name { color: var(--yellow); }
.typ-name { font-size: 20px; font-weight: 600; line-height: 1.1; text-transform: none; }
.typ-zahl { margin-top: auto; }

.verkauf-block {
  border: 1px solid var(--yellow); background: var(--panel-3); padding: 48px 56px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-bottom: 64px;
}
.verkauf-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.verkauf-titel { font-size: 48px; line-height: 0.98; font-weight: 700; }
.verkauf-absatz { font-size: 17px; max-width: 520px; margin: 0; }
.verkauf-text .btn { margin-top: 8px; font-size: 19px; padding: 12px 22px; }

/* ---------- Schritte (nummerierte Liste, Entwurf rechts im Verkäufer-Block) ---------- */
.schritte { list-style: none; margin: 0; padding: 0 0 0 40px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.schritte li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.schritte li:last-child { border-bottom: 0; }
.schritte li > div { display: flex; flex-direction: column; min-width: 0; }
.schritt-nr { font-size: 30px; font-weight: 700; color: var(--yellow); width: 36px; flex-shrink: 0; line-height: 1; }
.schritt-nr.gross { font-size: 44px; }
.schritt-titel { font-size: 21px; font-weight: 600; text-transform: uppercase; }
.rolle .schritte { padding-left: 0; border-left: 0; }
.rolle .btn-ghost { align-self: flex-start; margin-top: 6px; }
.rolle-titel { font-size: 30px; }
.karte-h { font-size: 22px; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seite-kopf { padding-top: 64px; padding-bottom: 40px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.seite-titel { font-size: 64px; line-height: 0.95; max-width: 900px; }
.seite-knoepfe { margin-top: 32px; }

/* ---------- Fünf Zusagen ---------- */
.zusagen-abschnitt { display: flex; flex-direction: column; gap: 22px; }
.zusagen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: zusage; }
.zusagen li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); counter-increment: zusage; }
.zusagen li::before { content: counter(zusage); font-family: var(--cond); font-size: 30px; font-weight: 700; color: var(--yellow); width: 36px; flex-shrink: 0; line-height: 1; }
.zusagen li .ic { margin-top: 3px; }
.zusagen li > div { display: flex; flex-direction: column; gap: 4px; }
.zusage-titel { font-size: 24px; font-weight: 600; text-transform: uppercase; }

/* ---------- Sell surplus ---------- */
.schritt-karte { gap: 12px; }
.schritt-karte-titel { font-size: 24px; }
.angebot { display: flex; flex-direction: column; gap: 14px; }
.angebot-form { margin-top: 10px; }
.angebot-band { margin-bottom: 8px; }
.honig { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.punkte { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: calc(860px + 2 * var(--rand)); margin-left: 0; display: flex; flex-direction: column; gap: 32px; }
.rechtstext h2 { font-size: 24px; margin-bottom: 10px; }
.rechtstext p { color: var(--ink-2); }
.platzhalter {
  font-family: var(--mono); font-size: 13px; color: var(--yellow);
  border: 1px dashed var(--yellow); padding: 2px 8px; display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .neueste { padding-top: 28px; padding-bottom: 12px; }
  .typen { padding-top: 20px; padding-bottom: 28px; gap: 14px; }
  .typen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .typ-karte { min-height: 96px; padding: 14px; }
  .typ-name { font-size: 18px; }
  .verkauf-block { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 24px; margin-bottom: 28px; }
  .verkauf-titel { font-size: 32px; }
  .verkauf-absatz { font-size: 15px; }
  .schritte { padding-left: 0; border-left: 0; }
  .schritt-titel { font-size: 19px; }
  .seite-kopf { padding-top: 32px; padding-bottom: 24px; }
  .seite-titel { font-size: 36px; }
  .zusage-titel { font-size: 20px; }
  .rolle-titel { font-size: 24px; }
  .abschnitt-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Tippziele ≥ 44 px (Bauplan Kapitel 5) */
  .alle-link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 480px) {
  .typen-raster { grid-template-columns: minmax(0, 1fr); }
}