/* ============================================================================
 *  SCREENS  ·  App-Shell, Screen-Layouts & responsives Desktop-Showcase
 * ========================================================================== */

/* App-Container: app-typische, feste Höhe mit internem Scroll je Screen */
#app {
  width:100%; max-width:var(--max); margin:0 auto; position:relative;
  height:100dvh; min-height:100vh; display:flex; flex-direction:column; overflow:hidden;
}
@supports (height:100dvh) { #app { min-height:auto; } }

.screen { display:none; flex-direction:column; height:100%; }
.screen.is-active { display:flex; animation:fadeIn var(--dur) var(--ease); }

.screen__body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:16px 20px 8px; display:flex; flex-direction:column; gap:12px; }
.screen__foot { flex:0 0 auto; padding:12px 20px; display:flex; flex-direction:column; gap:9px; }
/* Quiz-Fuß: nur noch „Zurück" (Auto-Advance ersetzt den großen Weiter-Button) */
.quiz__foot { flex-direction:row; justify-content:center; padding-top:4px; padding-bottom:4px; }
.quiz__back { background:transparent; color:var(--text-3); font-weight:500; font-size:14px; padding:9px 18px; }
.quiz__back::before { content:'‹'; margin-right:6px; opacity:.85; }
.quiz__back:hover { color:var(--text); }
/* Safe-Area unten, falls kein legalbar folgt (z. B. künftige Screens) */
.screen__foot:last-child { padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 12px; }
.topbar__brand { flex:1; min-width:0; display:flex; align-items:center; }
.topbar__logo { max-height:38px; width:auto; display:block; }
.topbar__title { font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.backlink { background:none; border:none; color:var(--accent-2); font-size:15px; cursor:pointer; padding:4px 2px; }
.counter { font-size:13px; color:var(--text-2); font-variant-numeric:tabular-nums; }

/* ── HERO (Start) ───────────────────────────────────────────────────────── */
.hero { text-align:center; padding:30px 22px 8px; }
.hero__icon { font-size:58px; display:inline-block; margin-bottom:18px; animation:float 5s var(--ease) infinite, glowPulse 6s var(--ease) infinite; filter:drop-shadow(0 8px 24px var(--glow)); }
.hero__title { font-size:33px; line-height:1.12; letter-spacing:-.025em; margin-bottom:12px; }
.hero__lead { font-size:16px; color:var(--text-2); font-weight:300; line-height:1.6; max-width:34ch; margin:0 auto; }

.highlights { display:flex; gap:9px; }
.highlight { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 8px; text-align:center; }
.highlight__icon { font-size:20px; }
.highlight__label { font-size:12.5px; font-weight:600; margin-top:5px; }
.highlight__note { font-size:10.5px; color:var(--text-3); margin-top:1px; line-height:1.3; }

.note { display:flex; gap:11px; align-items:flex-start; }
.note__tag { flex:0 0 auto; margin-top:1px; background:var(--accent-2-soft); color:var(--accent-2);
  font-size:10px; font-weight:700; letter-spacing:.05em; padding:3px 7px; border-radius:6px; }
.note__txt { font-size:12.5px; color:var(--text-2); line-height:1.6; }
.uspline { font-size:11px; color:var(--text-3); text-align:center; line-height:1.5; }

/* ── QUIZ ───────────────────────────────────────────────────────────────── */
.quiz__meta { display:flex; align-items:center; gap:10px; }
.phase { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 10px; border-radius:var(--r-pill); }
.quiz__dim { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); }
.quiz__q { font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; }
.options { display:flex; flex-direction:column; gap:9px; }

/* ── PROCESSING ─────────────────────────────────────────────────────────── */
.processing { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:40px 24px; text-align:center; }
.processing__ring { width:84px; height:84px; border-radius:50%; border:2.5px solid var(--sep); border-top-color:var(--accent); animation:spin 1s linear infinite; }
.processing__title { font-size:20px; font-weight:600; }
.psteps { display:flex; flex-direction:column; gap:11px; width:100%; max-width:280px; }
.pstep { display:flex; align-items:center; gap:11px; opacity:0; animation:stepIn .45s var(--ease-out) forwards; }
.pstep:nth-child(1){ animation-delay:.25s; } .pstep:nth-child(2){ animation-delay:.9s; }
.pstep:nth-child(3){ animation-delay:1.55s; } .pstep:nth-child(4){ animation-delay:2.2s; }
.pstep__dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--glow); flex:0 0 auto; }
.pstep__txt { font-size:14px; color:var(--text-2); text-align:left; }

/* ── SCORE ──────────────────────────────────────────────────────────────── */
.score__top { display:flex; flex-direction:column; align-items:center; padding-top:8px; }
.score__ring { position:relative; width:188px; height:188px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.score__ring svg { position:absolute; inset:0; filter:drop-shadow(0 0 14px var(--glow)); }
.ring-track { fill:none; stroke:var(--surface-3); stroke-width:10; }
.ring-arc   { fill:none; stroke:var(--tone, var(--accent)); stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset 1.6s var(--ease); }
.score__num { font-size:60px; font-weight:300; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.score__den { font-size:12px; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }
.score__title { font-size:23px; font-weight:600; text-align:center; }
.score__sub { font-size:15px; color:var(--text-2); font-weight:300; line-height:1.55; text-align:center; max-width:32ch; margin:6px auto 0; }
.global { display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; text-align:center; }
.global__val { font-size:13px; font-weight:600; color:var(--text); }
.global__hint { font-size:11.5px; color:var(--text-3); line-height:1.5; }

/* ── PROFILE ────────────────────────────────────────────────────────────── */
.type__icon { font-size:72px; text-align:center; display:block; margin:6px auto 14px; transform-origin:center;
  animation:float 5s var(--ease) infinite, glowPulse 4.5s var(--ease) infinite; }
.lever { background:radial-gradient(120% 120% at 0% 0%, var(--accent-soft), transparent 55%), var(--surface); }
.lever__title { font-size:17px; font-weight:600; letter-spacing:-.01em; margin:2px 0 6px; }
.type__name { font-size:27px; font-weight:600; letter-spacing:-.02em; text-align:center; margin-bottom:9px; }
.type__desc { font-size:15px; color:var(--text-2); font-weight:300; line-height:1.6; text-align:center; max-width:38ch; margin:0 auto; }
.reco__lbl { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); margin-bottom:7px; }
.reco__txt { font-size:15px; line-height:1.6; font-weight:300; }

/* ── TIPS ───────────────────────────────────────────────────────────────── */
.tips__list { display:flex; flex-direction:column; gap:12px; }
.section-title { font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:3px; }

/* ── DESKTOP SHOWCASE (ab 720px: schwebendes Premium-Panel) ─────────────── */
@media (min-width:720px) {
  body { display:flex; align-items:center; justify-content:center; padding:24px; min-height:100dvh; }
  #app {
    height:min(900px, 92vh); min-height:auto;
    border:1px solid var(--border); border-radius:34px; overflow:hidden;
    box-shadow:var(--shadow-pop);
    background:linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 92%, transparent), var(--surface-solid));
  }
}
@media (min-width:720px) and (prefers-reduced-motion:no-preference) {
  #app { transition:box-shadow var(--dur-slow) var(--ease); }
}

/* ── Kleine Telefone (≤ 360px): kompaktere Typo, weniger Rand ───────────── */
@media (max-width:360px) {
  .screen__body { padding-left:16px; padding-right:16px; }
  .hero { padding:24px 16px 6px; }
  .hero__icon { font-size:50px; margin-bottom:14px; }
  .hero__title { font-size:27px; }
  .hero__lead { font-size:15px; }
  .quiz__q { font-size:18px; }
  .score__ring { width:168px; height:168px; }
  .score__num { font-size:52px; }
  .type__name { font-size:24px; }
  .type__icon { font-size:62px; }
  .actionbtn span { font-size:10px; }
}