/* Anleitung hinter „So verbindest du ChatGPT und Claude" (13.10.2026). Schritte gemessen an der Live-Seite
   velares-stripe/projekt/site/index.html, Zeilen 72 bis 92; Tarife laut ceo/netz/freundestest-11-10-2026.md. */
.seite { max-width: 1120px; margin: 0 auto; padding: 112px var(--rand) 72px; }
h1 { font: 500 clamp(36px, 5vw, 64px)/1.04 'Fraunces', Georgia, serif; letter-spacing: -.02em; margin: 6px 0 14px; }
.kicker { font: 400 13px/1.4 'IBM Plex Mono', monospace; color: var(--leise); }
.vorspann { color: var(--leise); max-width: 34em; margin: 0 0 22px; }
.adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-bottom: 52px; }
.adresse p { margin: 0; color: var(--leise); font-size: 15px; max-width: 26em; }
.reiter { display: flex; gap: 6px; border-bottom: 1px solid var(--linie); margin-bottom: 30px; }
.reiter button { position: relative; min-height: 48px; padding: 0 18px; border: 0; background: none; color: var(--leise); font: 500 17px/1 'IBM Plex Sans', sans-serif; cursor: pointer; }
.reiter button[aria-selected="true"] { color: var(--text); }
.reiter svg { position: absolute; left: 6px; right: 6px; bottom: -3px; width: calc(100% - 12px); height: 8px; overflow: visible; pointer-events: none; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 36px 24px; }   /* Desktop: vier Schritte in einer Reihe */
.schritte li svg { width: 100%; height: auto; display: block; margin-bottom: 14px; }
.schritte .nr { font: 400 13px/1 'IBM Plex Mono', monospace; color: var(--leise); margin: 0 0 8px; }
.schritte p { margin: 0; font-size: 16px; }
.schritte a { color: var(--text); text-underline-offset: 3px; }
.andere p { max-width: 38em; margin: 0 0 12px; }
.danach { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.danach h2 { font: 500 24px/1.15 'Fraunces', Georgia, serif; margin: 0 0 8px; }
.danach p { margin: 0; color: var(--leise); font-size: 15px; }
@media (max-width: 360px) {   /* sehr schmal: Knopf und Reiter passen ohne waagerechtes Scrollen */
  .skizzenknopf { font-size: 15px; padding: 0 14px; gap: 10px; }
  .reiter button { padding: 0 10px; font-size: 15px; }
}
.danach code { font: 400 14px/1 'IBM Plex Mono', monospace; color: var(--text); }