/* ==========================================================================
   Self-Service-Start (/start, /start/fertig): eine Seite, Handy zuerst.
   Kommt nach kiwerk-ui.css und funnel.css; nur --kw-* Tokens, keine Rohfarben.
   ========================================================================== */

.ss-view { display: grid; gap: 20px; align-content: start; }
.ss-view[hidden] { display: none !important; }
.ss-logo { display: inline-flex; min-height: var(--kw-tap); align-items: center; }
.ss-login { min-height: var(--kw-tap); text-decoration: none; color: var(--kw-fg); }
.funnel .ss-login { text-decoration: none; }

.ss-intro h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }

/* Abschnitte des Formulars (wie im Bedarfscheck): ohne Rahmen, Trennlinie zwischen den Gruppen */
.ss-form .funnel-group { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-form .funnel-group + .funnel-group { padding-top: 22px; border-top: 1px solid var(--kw-line); }
.ss-form .funnel-group > legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 650; color: var(--kw-fg); }
.ss-form .funnel-group > legend + * { clear: both; }

.ss-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-plans .kw-choice b { font-size: 16px; }
.ss-plans .kw-choice .ss-plan-price { font-size: 15px; font-weight: 600; color: var(--kw-fg-2); margin-top: 2px; white-space: nowrap; }
@media (max-width: 760px) { .ss-plans { grid-template-columns: 1fr; } }

.ss-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ss-fields .ss-span { grid-column: 1 / -1; }
@media (max-width: 640px) { .ss-fields { grid-template-columns: 1fr; } }
.ss-form .kw-msg[hidden] { display: none; }
/* Steht der rote Hinweis am Feld, tritt der graue Hilfetext zurück (sonst steht dieselbe Regel zweimal da). */
.ss-form .kw-field--error .kw-help { display: none; }
.ss-consents { gap: 2px; }
.ss-consents .kw-check__tx span { display: block; margin-top: 2px; }
.ss-consents .kw-check__tx a { color: var(--kw-fg); font-weight: 600; }

/* Honeypot: fuer Menschen unsichtbar und nicht erreichbar, fuer Bots ein normales Feld */
.ss-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ss-price { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--kw-r-lg); background: var(--kw-sand); border: 1px solid var(--kw-sand-2); color: var(--kw-fg-2); font-size: 15px; line-height: 1.5; }
.ss-price > p { margin: 0; }
.ss-price__today { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--kw-fg); }
#priceLine { color: var(--kw-fg); font-weight: 600; }
.ss-plan-note { margin: 0; }
.ss-pay-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kw-fg-2); }

.ss-telegram p { margin: 0; }
.ss-center { text-align: center; }
.ss-cancel[hidden], .ss-form [hidden] { display: none !important; }

.ss-done { display: grid; gap: 20px; }
.ss-steps .kw-step { padding-bottom: 28px; }
.ss-steps .kw-step:last-child { padding-bottom: 0; }
.ss-step-body { display: grid; gap: 10px; justify-items: start; }
.ss-step-body > * { margin: 0; }
.ss-qr { display: grid; gap: 6px; justify-items: start; margin: 4px 0 0; }
.ss-qr img { display: block; width: 168px; height: 168px; border: 1px solid var(--kw-line); border-radius: var(--kw-r-md); background: var(--kw-surface); padding: 6px; }
.ss-qr figcaption { font-size: 14px; color: var(--kw-fg-3); }
/* Am Handy oeffnet der Button Telegram direkt: der QR-Code ist nur fuer den Computer */
@media (max-width: 640px), (pointer: coarse) { .ss-qr { display: none !important; } }
@media (max-width: 640px) { .ss-step-body .kw-btn { width: 100%; } }

/* So läuft es (Anmeldung, oben): vier Zeilen zu Ablauf und Geld, bevor jemand etwas eingibt. */
.ss-flow { display: grid; gap: 10px; padding: 18px 20px; }
.ss-flow__title { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 650; color: var(--kw-fg); }
.ss-flow__list { list-style: decimal outside; margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--kw-fg-2); }
.ss-flow__list b { color: var(--kw-fg); }
.ss-flow__list a { color: var(--kw-fg); font-weight: 600; }