/* v1: gamified onboarding layer (/onboarding) — Spielgefühl über dem echten Builder, keine Logik-Änderungen */
body.onboarding-page #create{display:none!important}
body.onboarding-page.ob-editing #create{display:grid!important}
body.onboarding-page .story-rail,body.onboarding-page .sticky-spot{display:none!important}

.ob-layer{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:150px 20px 48px;overflow:auto;background:radial-gradient(58% 40% at 50% 16%,rgba(200,242,62,.09),transparent 70%),radial-gradient(40% 30% at 82% 70%,rgba(255,75,43,.06),transparent 70%),linear-gradient(180deg,#0b0b09,#070706 58%,#0d0d0a)}
.ob-layer[hidden]{display:none!important}
.ob-layer{align-content:center;justify-items:center;grid-template-rows:auto auto}
.ob-progress{position:fixed;top:calc(var(--pill-nav-offset,86px) + 14px);left:50%;transform:translateX(-50%);z-index:61;display:grid;grid-template-columns:auto minmax(260px,480px);align-items:center;gap:18px;width:min(720px,calc(100vw - 40px));padding:12px 16px;border:1px solid rgba(200,242,62,.24);border-radius:18px;background:rgba(10,11,9,.92);backdrop-filter:blur(14px);box-shadow:0 18px 60px rgba(0,0,0,.34)}
.ob-progress[hidden]{display:none!important}
.ob-progress-copy{display:grid;gap:3px;min-width:128px;text-align:left}.ob-progress-copy b{font:900 12px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;color:var(--cc-green,#c8f23e)}.ob-progress-copy small{font:700 11px/1.2 Archivo,system-ui,sans-serif;color:rgba(241,235,221,.62)}
.ob-progress-track{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ob-progress i{width:100%;height:7px;border-radius:99px;background:rgba(241,235,221,.16)}
.ob-progress i.is-done{background:var(--cc-green,#c8f23e)}
.ob-progress i.is-now{background:var(--cc-green,#c8f23e);animation:obPulse 1.4s ease-in-out infinite alternate}
@keyframes obPulse{to{opacity:.5}}

.ob-stage{width:min(900px,100%);text-align:center;color:#F1EBDD}
.ob-stage[data-ob-stage="1"],.ob-stage[data-ob-stage="2"]{padding-top:58px}
.ob-stage[data-ob-stage="1"]>.ob-eyebrow,.ob-stage[data-ob-stage="2"]>.ob-eyebrow{display:none}
.ob-eyebrow{margin:0;font:800 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cc-green,#c8f23e)}
.ob-stage h2{margin:14px 0 16px;font:800 clamp(42px,6.2vw,86px)/.9 'Saira Condensed',Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.ob-hint{max-width:520px;margin:0 auto 10px;color:rgba(241,235,221,.74);font-size:16px;line-height:1.5}
.ob-rules{display:inline-block;margin-top:22px;color:rgba(241,235,221,.55);font-size:13px}

.ob-choices{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ob-choice{position:relative;display:grid;gap:7px;justify-items:center;width:min(300px,84vw);padding:30px 22px;border-radius:26px;border:2px solid rgba(200,242,62,.35);background:linear-gradient(160deg,rgba(200,242,62,.1),rgba(241,235,221,.04));color:#F1EBDD;text-decoration:none;cursor:pointer;font:inherit;transition:transform .22s cubic-bezier(.34,1.4,.5,1),border-color .2s ease,box-shadow .2s ease}
.ob-choice:hover{transform:translateY(-7px) scale(1.02);border-color:var(--cc-green,#c8f23e);box-shadow:0 26px 64px rgba(200,242,62,.18)}
.ob-ico{display:grid;place-items:center;width:78px;height:78px;border-radius:22px;background:var(--cc-green,#c8f23e);box-shadow:0 12px 30px rgba(200,242,62,.22)}
.ob-ico img{width:58px;height:58px;display:block}
.ob-choice:hover .ob-ico{transform:rotate(-4deg) scale(1.06);transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.ob-ico-big{width:104px;height:104px;border-radius:28px;margin:0 auto 20px}
.ob-ico-big img{width:78px;height:78px}
.ob-choice b{font:900 22px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.ob-choice small{color:rgba(241,235,221,.66);font-size:13px;line-height:1.4}

.ob-ring{display:block;width:76px;height:76px;margin:28px auto 22px;border-radius:50%;background:conic-gradient(from .25turn,rgba(200,242,62,0),var(--cc-green,#c8f23e));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));animation:obSpin 1s linear infinite}
.ob-ring.is-paused{animation-play-state:paused;opacity:.3}
@keyframes obSpin{to{transform:rotate(1turn)}}
.ob-status{min-height:26px;max-width:560px;margin:0 auto;color:rgba(241,235,221,.82);font-size:15px;line-height:1.45}
.ob-retry{margin-top:22px;padding:15px 28px;border:0;border-radius:999px;background:var(--cc-green,#c8f23e);color:#0F1011;font:900 15px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;cursor:pointer;transition:transform .2s ease}
.ob-retry:hover{transform:scale(1.05)}

.ob-guide{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:min(720px,calc(100vw - 24px));padding:12px 14px;border-radius:18px;border:1px solid rgba(200,242,62,.32);background:rgba(10,11,9,.96);backdrop-filter:blur(14px);color:#F1EBDD;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.ob-guide[hidden]{display:none!important}
.ob-guide-label{font:800 11px/1.4 'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--cc-green,#c8f23e)}
.ob-guide button{margin-left:auto;flex:none;padding:14px 22px;border:0;border-radius:12px;background:var(--cc-green,#c8f23e);color:#0F1011;font:900 14px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;cursor:pointer;transition:transform .2s ease}
.ob-guide button:hover{transform:scale(1.04)}

.ob-done h2{animation:obDonePop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes obDonePop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

@media(max-width:640px){
.ob-layer{padding:104px 16px 40px}
.ob-choices{gap:10px}
.ob-choice{width:100%;padding:22px 18px}
.ob-guide{flex-wrap:wrap;gap:10px}
.ob-guide button{width:100%;margin-left:0}
}
@media(prefers-reduced-motion:reduce){.ob-ring,.ob-progress i.is-now,.ob-done h2{animation:none!important}.ob-choice,.ob-retry,.ob-guide button{transition:none!important}}


/* v4: Feedback-Runde — Zurück-Buttons, Scan-Vorschau, Desktop ohne Kamera-Card, Stage-3-UX */
.ob-back{position:fixed;top:96px;left:clamp(16px,3vw,36px);z-index:3;padding:11px 18px;border-radius:999px;border:1px solid rgba(241,235,221,.25);background:rgba(241,235,221,.06);color:rgba(241,235,221,.85);font:800 13px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.ob-back:hover{border-color:var(--cc-green,#c8f23e);color:var(--cc-green,#c8f23e)}
.ob-warn{color:#ffb09c;font-weight:700;max-width:520px;margin:22px auto 0}
.ob-scanwrap{position:relative;width:min(360px,78vw);margin:26px auto 22px;border-radius:22px;overflow:hidden;border:2px solid rgba(200,242,62,.4);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.ob-scanwrap img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) brightness(.85)}
.ob-scanwrap .ob-ring{position:absolute;left:50%;top:50%;margin:-38px 0 0 -38px}
.ob-scanwrap:after{content:"";position:absolute;left:6%;right:6%;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(200,242,62,.95),transparent);box-shadow:0 0 22px rgba(200,242,62,.8);animation:obScanline 1.6s ease-in-out infinite alternate}
@keyframes obScanline{to{transform:translateY(min(240px,52vw))}}
.ob-scanwrap:not([hidden])~.ob-ring-solo{display:none}
@media(hover:hover) and (pointer:fine){.ob-choice[data-ob-upload="camera"]{display:none}}
.ob-guide-back{flex:none;padding:12px 16px;border-radius:12px;border:1px solid rgba(241,235,221,.25);background:transparent;color:rgba(241,235,221,.85);font:800 12px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;cursor:pointer}
.ob-guide-back:hover{border-color:var(--cc-green,#c8f23e);color:var(--cc-green,#c8f23e)}
/* Stage 3: Builder entrümpeln — nur Vorschau, KI-Ergebnis, Werte, Speichern */
body.onboarding-page.ob-editing #create .creator-panel>.eyebrow,body.onboarding-page.ob-editing #create .creator-panel>h2,body.onboarding-page.ob-editing #create .creator-panel>p.muted,body.onboarding-page.ob-editing #create .card-mode-picker,body.onboarding-page.ob-editing #create #flowSteps,body.onboarding-page.ob-editing #create .upload-rules-notice{display:none!important}
body.onboarding-page.ob-editing #create{padding-bottom:72px!important;margin-top:0!important}
body.onboarding-page.ob-editing #create .creator-panel:before{content:"Check deine Karte.";display:block;margin:6px 0 18px;font:800 clamp(38px,4.6vw,64px)/.9 'Saira Condensed',Archivo,system-ui,sans-serif;text-transform:uppercase;color:#F1EBDD}
@media(max-width:640px){.ob-back{top:88px}.ob-guide{bottom:12px}.ob-guide-back{width:auto}}

/* v5: Feedback — Guide-Bar im Wizard-Look, Foto-Buttons in Stage 3, Garage-Dialog aus einem Guss */
.ob-guide{gap:18px;padding:14px 16px;border-radius:20px;border:1px solid rgba(200,242,62,.28);background:linear-gradient(180deg,rgba(11,11,9,.92),rgba(7,7,6,.97))}
body.onboarding-page.ob-editing #create .upload-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
body.onboarding-page.ob-editing #create .upload-actions .upload-choice{border:1px solid rgba(200,242,62,.3);border-radius:14px}
body.onboarding-page .garage-modal{background:radial-gradient(58% 40% at 50% 16%,rgba(200,242,62,.09),transparent 70%),linear-gradient(180deg,rgba(11,11,9,.97),rgba(7,7,6,.99))}
body.onboarding-page .garage-modal{padding-top:calc(var(--pill-nav-offset,86px) + 22px);background:radial-gradient(58% 40% at 50% 16%,rgba(200,242,62,.09),transparent 70%),linear-gradient(180deg,rgba(11,11,9,.98),rgba(7,7,6,.995))}
body.onboarding-page .garage-modal-card{max-width:720px;border:1px solid rgba(200,242,62,.24);border-radius:26px;padding:clamp(24px,4vw,42px);background:linear-gradient(160deg,rgba(200,242,62,.055),rgba(241,235,221,.025));box-shadow:0 30px 100px rgba(0,0,0,.42)}
body.onboarding-page .garage-modal-card>.eyebrow{font:800 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;color:var(--cc-green,#c8f23e)}
body.onboarding-page .garage-modal-card h2{font:800 clamp(40px,5.4vw,72px)/.9 'Saira Condensed',Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#F1EBDD}
.garage-flow-status{display:none}
body.onboarding-page .garage-flow-status{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin:0 54px 28px 0;padding-bottom:18px;border-bottom:1px solid rgba(241,235,221,.1)}
.garage-flow-status>span:first-child{display:grid;gap:3px;min-width:128px}.garage-flow-status b{font:900 12px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;color:var(--cc-green,#c8f23e)}.garage-flow-status small{font:700 11px/1.2 Archivo,system-ui,sans-serif;color:rgba(241,235,221,.62)}
.garage-flow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.garage-flow-track i{height:7px;border-radius:99px;background:var(--cc-green,#c8f23e)}.garage-flow-track i.is-now{animation:obPulse 1.4s ease-in-out infinite alternate}
@media(max-width:640px){body.onboarding-page.ob-editing #create .upload-actions{grid-template-columns:1fr}}

/* v6: Erwartungsmanagement — Beta-Hinweis Foto, Tuning-Hinweis in Guide-Bar */
.ob-fineprint{margin:20px auto 0;max-width:460px;color:rgba(241,235,221,.5);font-size:13px;line-height:1.45}
.ob-guide-label{display:grid;gap:3px}
.ob-guide-label small{font:600 10px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:none;color:rgba(241,235,221,.6)}

/* v7: Onboarding-Registrierung schlank und im Wizard-Look — optionale Profilfelder
   kommen später im Profil, hier zählen nur E-Mail, Handle und Zustimmung */
body.onboarding-page .garage-modal-card .lead-form-grid > label:not(.wide):not(:nth-of-type(2)),
body.onboarding-page .garage-modal-card label[for="profileDisplayName"],
body.onboarding-page #profileGarageTitle,
body.onboarding-page #profileBio,
body.onboarding-page #profileTiktok,
body.onboarding-page #profileInstagram,
body.onboarding-page #profileWebsite,
body.onboarding-page #profileCity,
body.onboarding-page #profileAgeRange,
body.onboarding-page #profilePhone,
body.onboarding-page #profileDisplayName{display:none!important}
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileGarageTitle),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileBio),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileTiktok),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileInstagram),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileWebsite),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileCity),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileAgeRange),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profilePhone),
body.onboarding-page .garage-modal-card .lead-form-grid label:has(#profileDisplayName),
body.onboarding-page .garage-modal-card label:has(#profileMarketingConsent),
body.onboarding-page .garage-modal-card label:has(#communityUseOptOut){display:none!important}
body.onboarding-page .garage-modal-card .lead-form-grid{grid-template-columns:1fr!important;gap:16px}
body.onboarding-page .garage-modal-card .lead-form-grid label{font:800 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,235,221,.6)}
body.onboarding-page .garage-modal-card .lead-form-grid input{min-height:58px!important;font-size:17px!important;border-radius:16px!important}
body.onboarding-page .garage-modal-card label:has(#profileConsent){margin-top:6px;font:700 14px/1.4 Archivo,system-ui,sans-serif;text-transform:none;letter-spacing:0;color:rgba(241,235,221,.82)}
body.onboarding-page .garage-modal-card button[type="submit"],body.onboarding-page #garageModalLater{min-height:56px;font-size:16px}
body.onboarding-page .garage-modal-card>p{max-width:620px;font-size:17px;line-height:1.5;color:rgba(241,235,221,.75)}

/* v7b: Fortschritt bleibt auch im Editor-Schritt sichtbar, Guide-Bar darunter */
body.onboarding-page.ob-editing #create{padding-top:34px!important}
@media(max-width:640px){.ob-progress{top:calc(var(--pill-nav-offset,72px) + 10px);grid-template-columns:1fr;width:calc(100vw - 24px);gap:9px;padding:10px 12px}.ob-progress-copy{display:flex;justify-content:space-between;align-items:baseline}.ob-progress i{height:6px}.garage-flow-status{grid-template-columns:1fr;gap:10px;margin-right:42px}.ob-guide{grid-template-columns:auto 1fr}.ob-guide>button:last-child{grid-column:1/-1;width:100%}body.onboarding-page .garage-modal{padding:calc(var(--pill-nav-offset,72px) + 12px) 10px 10px}body.onboarding-page .garage-modal-card{border-radius:22px;padding:22px 18px}}

/* v7c: Editor-Schritt in Wizard-Sprache — Foto-Buttons als Kacheln, Guide-Bar in Marken-Typo */
body.onboarding-page.ob-editing #create .upload-actions .upload-choice{display:grid;justify-items:center;gap:4px;padding:16px 14px;border-radius:16px;border:2px solid rgba(200,242,62,.3);background:linear-gradient(160deg,rgba(200,242,62,.08),rgba(241,235,221,.03));text-align:center;transition:border-color .2s ease,transform .2s ease}
body.onboarding-page.ob-editing #create .upload-actions .upload-choice:hover{border-color:var(--cc-green,#c8f23e);transform:translateY(-2px)}
body.onboarding-page.ob-editing #create .upload-actions .upload-choice strong{font:900 15px/1 Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#F1EBDD}

/* v10: Back navigation clears the full-width progress panel on phones/tablets. */
@media(max-width:900px){.ob-back{top:calc(var(--pill-nav-offset,86px) + 80px)}}
@media(max-width:640px){.ob-back{top:calc(var(--pill-nav-offset,72px) + 70px)}}
body.onboarding-page.ob-editing #create .upload-actions .upload-choice small{color:rgba(241,235,221,.6);font-size:12px}
.ob-guide-label{font:900 13px/1.3 Archivo,system-ui,sans-serif!important;letter-spacing:.02em;text-transform:uppercase;color:var(--cc-green,#c8f23e)}
.ob-guide-label small{font:700 12px/1.4 Archivo,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none;color:rgba(241,235,221,.62)}

/* v8: hidden schlägt die globale button-Regel — sonst stehen Zurück und
   "Anderes Foto wählen" sichtbar, aber funktionslos im Wizard */
.ob-back[hidden],.ob-retry[hidden],.ob-guide[hidden],.ob-progress[hidden],.ob-layer[hidden],#obUploadNote[hidden],.ob-stage[hidden]{display:none!important}
.ob-back{display:inline-flex;align-items:center}

/* v12: one decisive finish; the same four-part progress remains visible in Auth step 4. */
body.onboarding-page.ob-editing #create .builder-final-action{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:18px!important}
body.onboarding-page.ob-editing #create .builder-final-action #save{width:100%;min-height:58px;border-radius:999px;font-size:16px;box-shadow:0 14px 36px rgba(200,242,62,.16)}
body.onboarding-page.ob-editing #create .builder-save-promise{display:block;text-align:center;color:rgba(241,235,221,.58);font:700 12px/1.4 Archivo,system-ui,sans-serif}
body.onboarding-page.ob-editing #create .caption-box{display:none!important}
body.onboarding-page.ob-editing #create .fineprint{margin-top:14px!important}
body.onboarding-page.ob-editing #create .creator-panel{align-self:start}
body.onboarding-page.onboarding-auth-save #authModalIntro{max-width:480px}
@media(max-width:640px){body.onboarding-page.ob-editing #create{padding-bottom:48px!important}body.onboarding-page.ob-editing #create .builder-final-action #save{min-height:60px}}

/* v13: Im geführten Flow trägt die Kopfzeile nur Logo und Login. Die
   Menüpunkte zeigen alle auf Anker der Startseite und laufen hier ins
   Leere; das Logo führt stattdessen zurück (siehe app.js). */
body.onboarding-page .site-header nav{display:none}