/* ══ Onboarding im neuen App-Design (Leandro, 24.10.2026) ═════════════════════
   Gleiche Farben, Schrift, Karten und Knoepfe wie die App (css/home-neu.css),
   fester Punkteraster-Hintergrund. Das Logo bleibt Stellio Blue (Bild).
   Nur Aussehen: Schritte, Fragen und die Profil-Karte rechts bleiben gleich.
   Wird nur in onboarding.html geladen, nach dem eigenen <style>-Block. */

/* ── Farben und Schrift (wie App) ─────────────────────────────────────────── */
body {
  --hn-bg:        #F7F3EC;
  --hn-surface:   #FBF8F2;
  --hn-second:    #EDE2D5;
  --hn-hover:     #E5D5C5;
  --hn-line:      #DED2C5;
  --hn-primary:   #8A7765;
  --hn-primary-h: #7B6857;
  --hn-primary-p: #705E4E;
  --hn-text:      #302823;
  --hn-text-2:    #756B63;
  --hn-shadow:    0 1px 2px rgba(112, 94, 78, .05), 0 14px 34px -14px rgba(112, 94, 78, .22);
  --hn-shadow-sm: 0 1px 2px rgba(112, 94, 78, .05), 0 10px 24px -14px rgba(112, 94, 78, .20);

  /* bestehende Variablen auf die App-Leiste setzen (Ring, Auswahl, Fokus, Eingabefelder) */
  --bg-main: var(--hn-bg);
  --bg-second: var(--hn-second);
  --card-bg: var(--hn-surface);
  --card-border: var(--hn-line);
  --text: var(--hn-text);
  --text-secondary: var(--hn-text-2);
  --text-muted: var(--hn-text-2);
  --text-faint: var(--hn-text-2);
  --gold: var(--hn-primary);
  --gold-hover: var(--hn-primary-p);
  --gold-text: var(--hn-primary-p);
  --gold-light: var(--hn-second);
  --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-family: var(--font-body); color: var(--hn-text); background: var(--hn-bg);
}

/* fester Punkteraster: steht still, der Inhalt gleitet darueber (wie in der App) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--hn-bg);
  background-image: radial-gradient(circle, rgba(138, 119, 101, .20) 1px, transparent 1.6px);
  background-size: 22px 22px;
}
.ob-wrap { background: transparent; }

/* ── Kopfzeile: blaues Logo bleibt, Schriftzug wie die App ────────────────── */
.ob-topbar .logo-word { font-family: var(--font-body); font-weight: 700; color: var(--hn-text); letter-spacing: 0; }
.ob-topbar-login { color: var(--hn-text-2); font-weight: 500; border-radius: 999px; }
.ob-topbar-login:hover { color: var(--hn-text); background: var(--hn-second); }

/* ── Frage-Seite ──────────────────────────────────────────────────────────── */
.auth-title {
  font-family: var(--font-title); font-weight: 700; font-size: 30px; line-height: 1.2;
  letter-spacing: -.005em; color: var(--hn-text);
}
@media (max-width: 480px) { .auth-title { font-size: 26px; } }
.auth-sub { color: var(--hn-text-2); margin-top: 8px; }
.ob-step { color: var(--hn-primary-p); letter-spacing: .08em; }
.ob-icon-badge {
  background: var(--hn-surface); border: 1px solid rgba(222, 210, 197, .7); border-radius: 18px;
  box-shadow: var(--hn-shadow-sm);
}
.ob-ring-bg { stroke: var(--hn-second); }
.ob-ring-label { color: var(--hn-text); font-weight: 700; }

/* Antworten und Chips: helle Karten, gewaehlt = warmes Beige mit braunem Rand */
.ob-option, .ob-chip {
  background: var(--hn-surface); color: var(--hn-text);
  border: 1px solid rgba(222, 210, 197, .6); box-shadow: var(--hn-shadow-sm);
}
.ob-option { border-radius: 18px; }
.ob-option:hover, .ob-chip:hover { background: #FFFDF9; box-shadow: var(--hn-shadow); }
.ob-option.selected, .ob-chip.selected {
  background: var(--hn-second); color: var(--hn-text); font-weight: 600;
  border-color: var(--hn-primary); box-shadow: 0 0 0 1px var(--hn-primary) inset;
}

/* Knoepfe wie in der App: braun, rund, leichter Verlauf */
.btn-primary {
  height: 50px; border-radius: 999px; font-weight: 600;
  background: linear-gradient(180deg, var(--hn-primary), var(--hn-primary-h)); color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(112, 94, 78, .25), 0 8px 18px -8px rgba(112, 94, 78, .65);
}
.btn-primary:hover { background: var(--hn-primary-h); }
.btn-primary:active { background: var(--hn-primary-p); }
.btn:focus-visible { outline-color: var(--hn-primary-p); }

/* Eingabefelder und Konto-Schritt */
input, textarea { background: var(--hn-surface); border-color: var(--hn-line); border-radius: 14px; }
input:focus, textarea:focus { background: #FFFDF9; box-shadow: 0 0 0 2px var(--hn-primary); }
.consent input[type="checkbox"] { accent-color: var(--hn-primary); }
.auth-foot a, .consent a { color: var(--hn-primary-p); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#ob-done-card { background: var(--hn-second) !important; border-radius: 20px !important; }

/* ── Profil-Karte rechts (fuellt sich wie eine Notiz) ─────────────────────── */
.ob-doc-shadow-card { background: var(--hn-second); box-shadow: 0 20px 50px -18px rgba(112, 94, 78, .30); }
.ob-doc {
  background: var(--hn-surface); border: 1px solid rgba(222, 210, 197, .7); border-radius: 22px;
  box-shadow: 0 2px 6px rgba(112, 94, 78, .06), 0 26px 50px -20px rgba(112, 94, 78, .34);
}
.ob-doc-head { border-bottom: none; position: relative; }
.ob-doc-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 74%; height: 1px;
  background: linear-gradient(90deg, var(--hn-line), rgba(222, 210, 197, 0));
}
.ob-doc-avatar { background: var(--hn-second); color: var(--hn-primary-p); }
.ob-doc-head-text { color: var(--hn-text-2); }
.ob-doc-head-text b { font-family: var(--font-title); font-size: 13px; color: var(--hn-text); }
.ob-doc-line { color: var(--hn-text); }
.ob-doc-line svg { color: var(--hn-primary); }
.ob-doc-empty { color: var(--hn-text-2); }
.ob-doc-cursor { background: var(--hn-primary); }
.ob-visual-caption-title { font-family: var(--font-title); font-size: 18px; color: var(--hn-text); }
.ob-visual-caption-sub { color: var(--hn-text-2); }

/* ── Knoepfe und Antworten heben sich beim Darueberfahren leicht an (wie App) ── */
@media (hover: hover) {
  .btn, .ob-option, .ob-chip {
    transition: transform 160ms var(--ease-out, ease-out), box-shadow 160ms var(--ease-out, ease-out), background-color 160ms ease;
  }
  .btn:not(:disabled):hover, .ob-option:hover, .ob-chip:hover { transform: translateY(-2px); }
  .btn:not(:disabled):hover { box-shadow: 0 8px 18px -8px rgba(112, 94, 78, .45); }
  .btn:not(:disabled):active, .ob-option:active, .ob-chip:active { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .ob-option:hover, .ob-chip:hover, .btn:active, .ob-option:active, .ob-chip:active { transform: none; }
  .ob-doc-line, #ob-main-content > div:not(.hidden) { animation: none; }
}