:root {
      --bg: #07101c;
      --bg2: #0d1730;
      --bg3: #13223d;
      --bg4: #1a3156;
      --text: #edf4ff;
      --text2: #95a9c6;
      --accent: #79d5ff;
      --accent2: #5f9bff;
      --accent-glow: rgba(121,213,255,0.12);
      --green: #74dca8;
      --red: #ef6b8b;
      --blue: #5f9bff;
      --purple: #bdaeff;
      --border: rgba(149,174,214,0.12);
      --glass: rgba(255,255,255,0.035);
      --glass-border: rgba(149,174,214,0.16);
      --radius: 18px;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    /* Skip-Navigation (Accessibility) */
    .skip-link { position:absolute; top:-50px; left:16px; z-index:9999; padding:8px 16px; background:var(--accent); color:#000; font-weight:700; border-radius:0 0 8px 8px; transition:top .2s; }
    .skip-link:focus { top:0; }
    /* Focus-visible for keyboard navigation */
    :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
    body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: radial-gradient(circle at top, #183259 0%, #0c1831 28%, #07101c 64%), linear-gradient(180deg, #07101c 0%, #0b1529 100%); color: var(--text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
    body::before { content:''; position:fixed; inset:0; background:radial-gradient(circle at 15% 8%, rgba(121,213,255,0.12), transparent 18%), radial-gradient(circle at 82% 10%, rgba(189,174,255,0.10), transparent 16%); pointer-events:none; z-index:0; }
    nav, .page { position: relative; z-index: 1; }
    a { color: var(--accent); text-decoration: none; }
    button { cursor:pointer; font-family:inherit; }
    input, select, textarea { font-family: inherit; font-size: 1rem; }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

    /* ── NAV ── */
    nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0; background:rgba(7,16,28,0.84); backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid var(--glass-border); }
    nav .container { display:flex; align-items:center; justify-content:space-between; }
    .nav-logo { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:10px; letter-spacing:-0.02em; }
    .nav-logo .logo-icon { width:36px; height:36px; border-radius:10px; object-fit:contain; }
    .nav-logo .logo-text { color:var(--text); }
    .nav-logo .logo-text span { color:var(--accent); }
    .nav-links { display:flex; gap:6px; align-items:center; }
    .nav-links a, .nav-links button { padding:8px 16px; border-radius:8px; border:none; background:none; color:var(--text2); font-size:0.88rem; font-weight:500; transition:all .2s; }
    .nav-links a:hover, .nav-links button:hover { color:var(--text); background:rgba(255,255,255,0.05); }
    .nav-links .btn-accent { background:var(--accent); color:#000; font-weight:600; }
    .nav-links .btn-accent:hover { background:var(--accent2); }
    .nav-links .btn-outline { border:1px solid var(--glass-border); }
    .mobile-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; }

    /* ── PAGES (SPA) ── */
    .page { display:none; padding-top:70px; min-height:100vh; }
    .page.active { display:block; }

    /* ── LANDING ── */
    .hero { text-align:center; padding:100px 20px 80px; position:relative; overflow:hidden; }
    .hero::before { content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:800px; height:500px; background:radial-gradient(ellipse, rgba(121,213,255,0.15), rgba(168,85,247,0.05) 50%, transparent 70%); pointer-events:none; filter:blur(40px); }
    .hero::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1200px; height:600px; background:radial-gradient(circle at 30% 40%, rgba(121,213,255,0.04), transparent 50%), radial-gradient(circle at 70% 60%, rgba(168,85,247,0.04), transparent 50%); pointer-events:none; }
    .hero h1 { font-size:clamp(2.5rem,6vw,4rem); font-weight:800; line-height:1.1; margin-bottom:24px; letter-spacing:-0.03em; position:relative; }
    .hero h1 .highlight { background:linear-gradient(135deg, var(--accent), #c7f1ff, var(--accent)); background-size:200% auto; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 3s linear infinite; }
    @keyframes shimmer { to { background-position:200% center; } }
    .hero p { font-size:1.15rem; color:var(--text2); max-width:620px; margin:0 auto 36px; line-height:1.7; position:relative; }
    .hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }
    .btn-lg { padding:14px 32px; border-radius:12px; font-size:1.05rem; font-weight:600; border:none; transition:all .25s cubic-bezier(0.4,0,0.2,1); }
    .btn-primary { background:linear-gradient(135deg, var(--accent), #c7f1ff); color:#000; box-shadow:0 4px 24px rgba(121,213,255,0.25); }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(121,213,255,0.35); }
    .btn-ghost { background:var(--glass); color:var(--text); border:1px solid var(--glass-border); backdrop-filter:blur(8px); }
    .btn-ghost:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); }
    .hero-badge { display:inline-flex; align-items:center; gap:6px; margin-bottom:24px; padding:8px 18px; border-radius:24px; background:rgba(121,213,255,0.08); border:1px solid rgba(121,213,255,0.2); color:var(--accent); font-size:0.85rem; font-weight:600; backdrop-filter:blur(8px); position:relative; }

    /* Features grid */
    .features { padding:80px 20px; }
    .section-title { text-align:center; font-size:1.8rem; font-weight:800; margin-bottom:12px; letter-spacing:-0.02em; }
    .section-sub { text-align:center; color:var(--text2); margin-bottom:48px; font-size:1.05rem; }
    .features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
    .feature-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:32px; transition:all .3s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
    .feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(121,213,255,0.3), transparent); opacity:0; transition:opacity .3s; }
    .feature-card:hover { border-color:rgba(121,213,255,0.3); transform:translateY(-4px); background:rgba(255,255,255,0.04); }
    .feature-card:hover::before { opacity:1; }
    .feature-icon { font-size:2.2rem; margin-bottom:16px; }
    .feature-card h3 { font-size:1.1rem; margin-bottom:8px; font-weight:700; }
    .feature-card p { color:var(--text2); font-size:0.92rem; line-height:1.6; }

    /* Modules preview */
    .modules-preview { padding:80px 20px; background:linear-gradient(180deg, var(--bg2), var(--bg)); }
    .cat-row { margin-bottom:32px; }
    .cat-label { font-size:1rem; font-weight:600; color:var(--text2); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
    .mod-row { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
    .mod-pill { flex-shrink:0; padding:10px 18px; border-radius:10px; background:var(--bg3); border:1px solid var(--border); font-size:0.9rem; display:flex; align-items:center; gap:6px; white-space:nowrap; }
    .mod-pill.free { border-color:var(--green); }
    .mod-pill .lock { opacity:0.5; font-size:0.75rem; }

    /* Pricing */
    .pricing { padding:80px 20px; }
    .pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; max-width:750px; margin:0 auto; }
    .price-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:40px; text-align:center; transition:all .3s; }
    .price-card:hover { transform:translateY(-4px); }
    .price-card.premium { border-color:var(--accent); position:relative; background:linear-gradient(180deg, rgba(121,213,255,0.06), var(--glass)); box-shadow:0 8px 40px rgba(121,213,255,0.1); }
    .price-card.premium::before { content:'BELIEBT'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#000; font-size:0.75rem; font-weight:700; padding:4px 16px; border-radius:12px; }
    .price-card h3 { font-size:1.3rem; margin-bottom:8px; }
    .price { font-size:2.5rem; font-weight:800; margin:16px 0 4px; }
    .price span { font-size:1rem; font-weight:400; color:var(--text2); }
    .price-card .subprice { color:var(--text2); font-size:0.85rem; margin-bottom:24px; }
    .price-features { text-align:left; list-style:none; margin-bottom:28px; }
    .price-features li { padding:8px 0; display:flex; align-items:center; gap:8px; font-size:0.92rem; }
    .price-features li::before { content:'✓'; color:var(--green); font-weight:700; }
    .price-features li.no::before { content:'✗'; color:var(--text2); }
    .price-card .btn-lg { width:100%; }

    /* Methodik */
    .methodik { padding:80px 20px; background:linear-gradient(180deg, var(--bg), var(--bg2)); }
    .methodik-content { max-width:700px; margin:0 auto; }
    .methodik-item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); }
    .methodik-item:last-child { border:none; }
    .methodik-num { flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#000; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; }
    .methodik-item h4 { margin-bottom:4px; }
    .methodik-item p { color:var(--text2); font-size:0.9rem; }

    /* Footer */
    footer { padding:40px 20px; border-top:1px solid var(--glass-border); text-align:center; color:var(--text2); font-size:0.85rem; }
    footer .footer-links { display:flex; gap:20px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
    footer .footer-links a { color:var(--text2); text-decoration:none; font-size:0.85rem; transition:color .2s; }
    footer .footer-links a:hover { color:var(--accent); }

    /* Legal Pages */
    .legal-wrap { max-width:800px; margin:0 auto; padding:40px 20px 80px; }
    .legal-wrap h1 { font-size:1.8rem; margin-bottom:8px; }
    .legal-wrap .legal-date { color:var(--text2); font-size:0.85rem; margin-bottom:32px; }
    .legal-wrap h2 { font-size:1.2rem; margin-top:32px; margin-bottom:12px; color:var(--text); }
    .legal-wrap h3 { font-size:1.05rem; margin-top:20px; margin-bottom:8px; }
    .legal-wrap p, .legal-wrap li { color:var(--text2); font-size:0.92rem; line-height:1.7; margin-bottom:8px; }
    .legal-wrap ul, .legal-wrap ol { padding-left:24px; margin-bottom:12px; }
    .legal-wrap a { color:var(--accent); }
    .legal-wrap .legal-back { display:inline-block; margin-bottom:24px; color:var(--accent); text-decoration:none; font-size:0.9rem; }
    .legal-wrap .legal-back:hover { text-decoration:underline; }

    /* Blog */
    .blog-card:hover { border-color:var(--accent) !important; }
    .blog-content h2 { font-size:1.3rem; margin:28px 0 10px; }
    .blog-content h3 { font-size:1.1rem; margin:20px 0 8px; }
    .blog-content p { margin-bottom:14px; }
    .blog-content ul { margin:10px 0 18px 20px; }
    .blog-content li { margin-bottom:6px; }
    .blog-content table { font-size:0.9rem; }
    .blog-content em { color:var(--accent); }

    /* Abo Status Card */
    .abo-status-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:20px; }
    .abo-status-card .abo-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.92rem; }
    .abo-status-card .abo-row:last-child { border:none; }
    .abo-status-card .abo-label { color:var(--text2); }
    .abo-status-card .abo-value { font-weight:600; }
    .abo-status-card .abo-value.active { color:#22c55e; }
    .abo-status-card .abo-value.canceling { color:#f59e0b; }
    .abo-status-card .abo-value.inactive { color:var(--text2); }
    .abo-status-card .abo-actions { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
    .abo-cancel-btn { padding:8px 20px; border-radius:8px; border:1px solid #ef4444; background:transparent; color:#ef4444; font-weight:600; font-size:0.85rem; cursor:pointer; transition:all .2s; }
    .abo-cancel-btn:hover { background:#ef4444; color:#fff; }
    .abo-reactivate-btn { padding:8px 20px; border-radius:8px; border:1px solid #22c55e; background:transparent; color:#22c55e; font-weight:600; font-size:0.85rem; cursor:pointer; transition:all .2s; }
    .abo-reactivate-btn:hover { background:#22c55e; color:#fff; }

    /* Referral System */
    .referral-card { background:linear-gradient(135deg, rgba(243,122,34,0.06), rgba(24,50,71,0.04)); border:1px solid rgba(243,122,34,0.2); border-radius:14px; padding:24px; }
    .referral-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .referral-header .ref-icon { font-size:2rem; }
    .referral-header h4 { font-size:1.05rem; margin:0; }
    .referral-header .ref-tier { font-size:0.8rem; padding:3px 10px; border-radius:20px; background:var(--accent); color:#000; font-weight:600; }
    .referral-link-box { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:16px; }
    .referral-link-box input { flex:1; background:none; border:none; font-size:0.88rem; color:var(--text1); font-family:monospace; outline:none; }
    .referral-link-box button { padding:6px 14px; border-radius:8px; background:var(--accent); color:#000; border:none; font-weight:600; font-size:0.82rem; cursor:pointer; white-space:nowrap; }
    .referral-share-btns { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
    .referral-share-btns button { padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text1); font-size:0.82rem; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:6px; }
    .referral-share-btns button:hover { border-color:var(--accent); background:rgba(243,122,34,0.08); }
    .referral-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:16px; }
    .referral-stat { text-align:center; padding:12px; background:var(--bg3); border-radius:10px; border:1px solid var(--border); }
    .referral-stat .rs-value { font-size:1.4rem; font-weight:700; color:var(--accent); }
    .referral-stat .rs-label { font-size:0.75rem; color:var(--text2); margin-top:2px; }
    .referral-tier-progress { margin-top:12px; }
    .referral-tier-bar { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; margin:8px 0; }
    .referral-tier-bar .fill { height:100%; background:linear-gradient(90deg, var(--accent), #f59e0b); border-radius:4px; transition:width .5s ease; }
    .referral-tier-info { font-size:0.82rem; color:var(--text2); }
    .referral-rewards-list { margin-top:12px; }
    .referral-rewards-list .reward-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
    .referral-rewards-list .reward-row:last-child { border:none; }
    .referral-rewards-list .reward-label { color:var(--text2); }
    .referral-rewards-list .reward-value { font-weight:600; color:var(--accent); }
    .referral-rewards-list .reward-value.achieved { color:#22c55e; }
    .referral-code-input { text-transform:uppercase; font-family:monospace; letter-spacing:1px; }
    .referral-code-highlighted { background:rgba(243,122,34,0.06); border-radius:8px; padding:12px; border:1px dashed rgba(243,122,34,0.3); }
    .referral-code-highlighted label { color:var(--accent); font-weight:600; }
    @media (max-width:640px) {
      .referral-stats { grid-template-columns:1fr; gap:8px; }
      .referral-share-btns { flex-direction:column; }
      .referral-share-btns button { width:100%; justify-content:center; }
      .referral-link-box { flex-direction:column; }
      .referral-link-box input { width:100%; font-size:0.82rem; }
      .referral-link-box button { width:100%; padding:10px; }
      .referral-header { flex-wrap:wrap; gap:8px; }
      .referral-header .ref-tier { order:-1; }
    }

    /* Premium Feature Teaser */
    .premium-teaser { background:linear-gradient(135deg, rgba(243,122,34,0.08), rgba(243,122,34,0.02)); border:1px solid rgba(243,122,34,0.2); border-radius:12px; padding:20px; margin:16px 0; }
    .premium-teaser h4 { font-size:1rem; margin-bottom:8px; }
    .premium-teaser .feature-list { list-style:none; padding:0; margin:0 0 12px 0; }
    .premium-teaser .feature-list li { padding:6px 0; font-size:0.88rem; color:var(--text2); display:flex; align-items:center; gap:8px; }
    .premium-teaser .feature-list li::before { content:'🔒'; font-size:0.8rem; }
    .premium-teaser .feature-list li.unlocked::before { content:'✅'; }
    .premium-teaser .teaser-cta { display:inline-block; padding:10px 24px; border-radius:8px; background:var(--accent); color:#000; font-weight:600; font-size:0.9rem; text-decoration:none; border:none; cursor:pointer; }

    /* Locked module overlay in sidebar */
    .module-locked-hint { font-size:0.72rem; color:var(--accent); margin-top:2px; }

    /* Comeback/Inaktivitäts-Alert */
    .comeback-alert { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:20px; margin:16px 0; }
    .comeback-header { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
    .comeback-days { font-size:2.4rem; font-weight:800; color:var(--accent); line-height:1; min-width:60px; text-align:center; }
    .comeback-header div { flex:1; }
    .comeback-header strong { display:block; font-size:1rem; margin-bottom:2px; }
    .comeback-header span { font-size:0.85rem; color:var(--text2); }
    .comeback-body p { font-size:0.9rem; color:var(--text2); line-height:1.6; margin-bottom:6px; }
    .comeback-body strong { color:var(--text); }

    /* ── ZERTIFIKATE / PRÜFUNGEN ── */
    .cert-hero { text-align:center; padding:40px 20px 20px; }
    .cert-hero h1 { font-size:1.8rem; margin-bottom:8px; }
    .cert-hero p { color:var(--text2); font-size:0.95rem; }
    .cert-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; max-width:1100px; margin:0 auto; padding:0 20px 40px; }
    .cert-branch-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px; }
    .cert-branch-card h3 { font-size:1.1rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
    .cert-level { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:10px; margin-bottom:8px; background:var(--bg3); border:1px solid var(--border); transition:all .2s; }
    .cert-level:hover { border-color:var(--accent); }
    .cert-level.passed { background:rgba(34,197,94,0.06); border-color:rgba(34,197,94,0.3); }
    .cert-level.locked { opacity:0.5; pointer-events:none; }
    .cert-level-info { display:flex; flex-direction:column; gap:2px; }
    .cert-level-badge { font-size:1.1rem; margin-right:8px; }
    .cert-level-title { font-weight:600; font-size:0.9rem; }
    .cert-level-meta { font-size:0.78rem; color:var(--text2); }
    .cert-level-status { font-size:0.82rem; font-weight:600; }
    .cert-level-status.passed { color:#22c55e; }
    .cert-level-status.locked { color:var(--text2); }
    .cert-company-section { max-width:1100px; margin:0 auto; padding:0 20px 40px; }
    .cert-company-section h2 { font-size:1.2rem; margin-bottom:14px; }
/* ── FIRMEN-TEST BUILDER ── */
.exam-builder { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px; margin-bottom:20px; }
.exam-builder h3 { margin-bottom:16px; }
.ebq-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.ebq-item { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:16px; position:relative; }
.ebq-item .ebq-remove { position:absolute; top:8px; right:8px; background:none; border:none; cursor:pointer; font-size:1rem; color:var(--text2); }
.ebq-item .ebq-remove:hover { color:#ef4444; }
.ebq-item label { font-size:0.82rem; font-weight:600; color:var(--text2); display:block; margin-bottom:4px; }
.ebq-item input, .ebq-item textarea, .ebq-item select { width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--bg2); color:var(--text); font-family:inherit; font-size:0.9rem; box-sizing:border-box; }
.ebq-item textarea { resize:vertical; min-height:60px; }
.ebq-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.ebq-opts input { font-size:0.85rem; }
.ebq-correct-row { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:0.82rem; }
.company-exam-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px; }
.company-exam-card h4 { margin:0 0 6px; font-size:0.95rem; }
    /* Exam UI */
    .exam-wrap { max-width:800px; margin:0 auto; padding:20px; }
    .exam-header { text-align:center; margin-bottom:24px; }
    .exam-header h2 { font-size:1.4rem; }
    .exam-progress { display:flex; align-items:center; gap:12px; margin:16px 0; }
    .exam-progress-bar { flex:1; height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
    .exam-progress-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }
    .exam-progress-text { font-size:0.82rem; color:var(--text2); min-width:50px; text-align:right; }
    .exam-question { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px; margin-bottom:20px; }
    .exam-question h3 { font-size:0.82rem; color:var(--text2); text-transform:uppercase; margin-bottom:8px; }
    .exam-question p { font-size:1rem; line-height:1.6; margin-bottom:16px; }
    .exam-options { display:flex; flex-direction:column; gap:8px; }
    .exam-option { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); cursor:pointer; transition:all .15s; font-size:0.92rem; }
    .exam-option:hover { border-color:var(--accent); }
    .exam-option.selected { border-color:var(--accent); background:rgba(243,122,34,0.08); }
    .exam-option-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
    .exam-option.selected .exam-option-radio { border-color:var(--accent); }
    .exam-option.selected .exam-option-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--accent); }
    .exam-scenario-input { width:100%; min-height:120px; padding:14px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-family:inherit; font-size:0.95rem; resize:vertical; }
    .exam-scenario-input:focus { border-color:var(--accent); outline:none; }
    .exam-nav { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
    .exam-nav button { padding:10px 24px; border-radius:8px; font-weight:600; font-size:0.9rem; cursor:pointer; border:none; }
    .exam-submit-btn { background:var(--accent); color:#000; }
    .exam-next-btn { background:var(--accent); color:#000; }
    .exam-prev-btn { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
    /* Results */
    .exam-result { text-align:center; padding:40px 20px; }
    .exam-result-icon { font-size:4rem; margin-bottom:16px; }
    .exam-result h2 { font-size:1.6rem; margin-bottom:8px; }
    .exam-result-score { font-size:2.5rem; font-weight:800; color:var(--accent); }
    .exam-result-detail { color:var(--text2); font-size:0.9rem; margin:8px 0 24px; }
    .exam-result-items { text-align:left; max-width:600px; margin:0 auto; }
    .exam-result-item { padding:12px; border-radius:8px; margin-bottom:8px; font-size:0.88rem; }
    .exam-result-item.correct { background:rgba(34,197,94,0.08); border-left:3px solid #22c55e; }
    .exam-result-item.wrong { background:rgba(239,68,68,0.08); border-left:3px solid #ef4444; }
    .exam-result-item.partial { background:rgba(243,122,34,0.08); border-left:3px solid var(--accent); }
    @media (max-width:640px) {
      .cert-grid { grid-template-columns:1fr; padding:0 14px 30px; }
      .cert-branch-card { padding:18px; }
      .exam-wrap { padding:14px; }
      .exam-question { padding:18px; }
      .exam-option { padding:10px 14px; font-size:0.88rem; }
    }

    /* ── RANKING / LEADERBOARD ── */
    .ranking-hero { text-align:center; padding:40px 20px 20px; }
    .ranking-hero h1 { font-size:1.8rem; margin-bottom:8px; }
    .ranking-hero p { color:var(--text2); font-size:0.95rem; }
    .ranking-filters { display:flex; gap:10px; justify-content:center; padding:0 20px 20px; flex-wrap:wrap; }
    .ranking-filters select { padding:8px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-size:0.85rem; }
    .ranking-table { background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:0 auto; max-width:900px; }
    .ranking-row { display:grid; grid-template-columns:50px 1fr 100px 80px 80px 80px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); font-size:0.88rem; transition:background .15s; }
    .ranking-row:last-child { border:none; }
    .ranking-row:hover { background:rgba(243,122,34,0.04); }
    .ranking-row.header { font-weight:700; font-size:0.78rem; text-transform:uppercase; color:var(--text2); letter-spacing:0.04em; background:var(--bg3); }
    .ranking-rank { font-weight:800; color:var(--accent); font-size:1.1rem; text-align:center; }
    .ranking-rank.gold { color:#f59e0b; }
    .ranking-rank.silver { color:#94a3b8; }
    .ranking-rank.bronze { color:#c2855a; }
    .ranking-user { display:flex; flex-direction:column; }
    .ranking-user-name { font-weight:600; }
    .ranking-user-meta { font-size:0.78rem; color:var(--text2); }
    .ranking-score { font-weight:700; text-align:center; }
    .ranking-score.high { color:#22c55e; }
    .ranking-score.mid { color:var(--accent); }
    .ranking-trend { text-align:center; }
    .ranking-lead { text-align:center; font-weight:700; color:var(--accent); }
    .ranking-sessions { text-align:center; color:var(--text2); }
    .ranking-public-toggle { margin:20px auto; max-width:900px; padding:20px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; }
    .ranking-public-toggle h3 { margin-bottom:10px; font-size:1rem; }
    .ranking-empty { text-align:center; padding:60px 20px; color:var(--text2); }
    @media (max-width:640px) {
      .ranking-row { grid-template-columns:40px 1fr 70px 60px; font-size:0.82rem; padding:10px 12px; }
      .ranking-row .ranking-sessions, .ranking-row .ranking-trend { display:none; }
    }

    /* ── MARKTPLATZ / AUFTRÄGE ── */
    .market-hero { text-align:center; padding:40px 20px 20px; }
    .market-hero h1 { font-size:1.8rem; margin-bottom:8px; }
    .market-tabs { display:flex; gap:8px; justify-content:center; padding:0 20px 20px; flex-wrap:wrap; }
    .market-tab { padding:8px 20px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); cursor:pointer; font-size:0.85rem; font-weight:500; transition:all .2s; }
    .market-tab.active { background:var(--accent); color:#000; border-color:var(--accent); }
    #marketPayments table th, #marketPayments table td { padding:8px 12px; }
    #marketPayments table tr:hover { background:var(--bg3); }
    .assignment-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; max-width:1100px; margin:0 auto; padding:0 20px 40px; }
    .assignment-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s; }
    .assignment-card:hover { border-color:var(--accent); }
    .assignment-card .ac-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
    .assignment-card .ac-company { font-size:0.78rem; color:var(--text2); display:flex; align-items:center; gap:4px; }
    .assignment-card .ac-company .verified { color:#22c55e; }
    .assignment-card h3 { font-size:1.05rem; margin:0; line-height:1.3; }
    .assignment-card .ac-desc { font-size:0.88rem; color:var(--text2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .assignment-card .ac-tags { display:flex; gap:6px; flex-wrap:wrap; }
    .assignment-card .ac-tag { padding:3px 10px; border-radius:20px; font-size:0.75rem; background:var(--bg3); color:var(--text2); border:1px solid var(--border); }
    .assignment-card .ac-tag.commission { background:rgba(34,197,94,0.1); color:#22c55e; border-color:rgba(34,197,94,0.2); font-weight:600; }
    .assignment-card .ac-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
    .assignment-card .ac-reqs { font-size:0.78rem; color:var(--text2); }
    .ac-apply-btn { padding:8px 20px; border-radius:8px; background:var(--accent); color:#000; font-weight:600; font-size:0.85rem; border:none; cursor:pointer; }
    .company-form { max-width:600px; margin:0 auto; padding:0 20px 40px; }
    .company-form .form-group { margin-bottom:16px; }
    .company-dash { max-width:900px; margin:0 auto; padding:0 20px 40px; }
    .company-dash h2 { font-size:1.2rem; margin-bottom:16px; }
    @media (max-width:640px) {
      .assignment-grid { grid-template-columns:1fr; }
    }

    /* ── AUTH PAGES ── */
    .auth-wrap { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 70px); padding:20px; }
    .auth-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:40px; width:100%; max-width:420px; }
    .auth-box h2 { margin-bottom:24px; text-align:center; }
    .form-group { margin-bottom:16px; }
    .form-group label { display:block; margin-bottom:6px; font-size:0.9rem; color:var(--text2); }
    .form-group input, .form-group select { width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-size:1rem; outline:none; transition:border .2s; }
    .form-group input:focus, .form-group select:focus { border-color:var(--accent); }
    .form-error { color:var(--red); font-size:0.85rem; margin-top:4px; display:none; }
    .form-error.show { display:block; }
    .auth-box .btn-lg { width:100%; margin-top:8px; }
    .auth-switch { text-align:center; margin-top:16px; font-size:0.9rem; color:var(--text2); }

    /* ── APP PAGE ── */
    .app-layout { display:grid; grid-template-columns:320px 1fr; height:calc(100vh - 70px); }
    .app-sidebar { background:var(--bg2); border-right:1px solid var(--border); overflow-y:auto; padding:20px; }
    .app-main { display:flex; flex-direction:column; position:relative; }
    .sidebar-section { margin-bottom:24px; }
    .sidebar-section h3 { font-size:0.85rem; color:var(--text2); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
    .module-btn { width:100%; text-align:left; padding:12px 14px; border-radius:8px; border:none; background:transparent; color:var(--text); font-size:0.9rem; display:flex; align-items:center; gap:10px; transition:all .15s; margin-bottom:4px; }
    .module-btn:hover { background:var(--bg3); }
    .module-btn.active { background:var(--bg4); border-left:3px solid var(--accent); }
    .module-btn.locked { opacity:0.5; }
    .module-btn .m-icon { font-size:1.2rem; flex-shrink:0; }
    .module-btn .m-name { flex:1; }
    .module-btn .m-lock { font-size:0.7rem; color:var(--text2); }
    .module-btn .m-diff { font-size:0.7rem; padding:2px 6px; border-radius:4px; background:var(--bg); color:var(--text2); }

    /* Chat area */
    .chat-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg2); gap:10px; }
    .chat-header h2 { font-size:1.05rem; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .chat-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .chat-actions button { padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:0.8rem; transition:all .2s; cursor:pointer; }
    .chat-actions button:hover { border-color:var(--accent); color:var(--text); }
    .chat-actions button.active { background:var(--accent); color:#000; border-color:var(--accent); }

    /* Mode Switcher */
    .mode-switcher { display:flex; background:var(--bg3); border-radius:10px; border:1px solid var(--border); overflow:hidden; }
    .mode-switcher button { padding:7px 14px; border:none; background:transparent; color:var(--text2); font-size:0.82rem; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:5px; white-space:nowrap; }
    .mode-switcher button.active { background:var(--accent); color:#000; box-shadow:0 1px 4px rgba(243,122,34,0.2); }
    .mode-switcher button:not(.active):hover { background:var(--bg4); color:var(--text); }

    .chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
    .msg { max-width:80%; padding:14px 18px; border-radius:14px; font-size:0.95rem; line-height:1.55; white-space:pre-wrap; }
    .msg.user { align-self:flex-end; background:var(--accent); color:#000; border-bottom-right-radius:4px; }
    .msg.assistant { align-self:flex-start; background:var(--bg3); border:1px solid var(--border); border-bottom-left-radius:4px; }
    .msg.system { align-self:center; background:none; color:var(--text2); font-size:0.85rem; text-align:center; padding:8px; }
    .msg .score-badge { display:inline-block; margin-top:8px; padding:4px 10px; border-radius:6px; background:var(--accent); color:#000; font-weight:700; font-size:0.85rem; }
    .typing-indicator { align-self:flex-start; padding:14px 20px; background:var(--bg3); border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:4px; display:flex; align-items:center; gap:12px; }
    .typing-indicator .skel-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg, #183247, #2a4a62); display:flex; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; }
    .typing-indicator .skel-lines { display:flex; flex-direction:column; gap:6px; }
    .typing-indicator .skel-line { height:8px; border-radius:4px; background:linear-gradient(90deg, var(--border) 25%, var(--bg2) 50%, var(--border) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
    .typing-indicator .skel-line:nth-child(1) { width:140px; }
    .typing-indicator .skel-line:nth-child(2) { width:100px; }
    .typing-indicator .skel-dots { display:flex; gap:4px; margin-top:2px; }
    .typing-indicator .skel-dots span { display:inline-block; width:7px; height:7px; background:var(--text2); border-radius:50%; animation:bounce .6s infinite alternate; }
    .typing-indicator .skel-dots span:nth-child(2) { animation-delay:.15s; }
    .typing-indicator .skel-dots span:nth-child(3) { animation-delay:.3s; }
    @keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
    @keyframes bounce { to { transform:translateY(-5px); opacity:.4; } }

    .chat-input-area { padding:14px 20px; border-top:1px solid var(--border); background:var(--bg2); display:flex; gap:10px; align-items:flex-end; flex-shrink:0; }
    .chat-input-wrap { flex:1; position:relative; }
    .chat-input-wrap textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.95rem; resize:none; min-height:46px; max-height:150px; outline:none; transition:border .2s, box-shadow .2s; line-height:1.4; }
    .chat-input-wrap textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(243,122,34,0.08); }
    .chat-btns { display:flex; gap:6px; }
    .chat-btns button { width:44px; height:44px; border-radius:12px; border:none; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:all .15s; cursor:pointer; }
    .btn-send { background:var(--accent); color:#000; }
    .btn-send:hover { background:var(--accent2); transform:scale(1.04); }
    .btn-send:disabled { opacity:.4; cursor:default; transform:none; }
    .btn-mic { background:var(--bg3); color:var(--text2); border:1px solid var(--border) !important; }
    .btn-mic:hover { border-color:var(--accent) !important; color:var(--text); }
    .btn-mic.recording { background:var(--red); color:#fff; border-color:var(--red) !important; animation:pulse 1s infinite; }
    @keyframes pulse { 50% { opacity:.7; } }

    /* Write mode: textarea prominent, mic hidden */
    .write-mode .btn-mic { display:none !important; }
    .write-mode .chat-input-wrap textarea { min-height:52px; }
    .write-mode .chat-input-area { padding:16px 20px; }

    /* Welcome screen (no module selected) */
    .welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; }
    .welcome-screen h2 { font-size:1.5rem; margin-bottom:12px; }
    .welcome-screen p { color:var(--text2); max-width:400px; margin-bottom:24px; }
    .quick-start { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
    .quick-start button { padding:10px 20px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-size:0.9rem; display:flex; align-items:center; gap:6px; transition:all .2s; }
    .quick-start button:hover { border-color:var(--accent); }

    /* Premium upgrade banner */
    .upgrade-banner { padding:8px 16px; background:rgba(243,122,34,0.05); border-bottom:1px solid rgba(243,122,34,0.1); text-align:center; font-size:0.82rem; color:var(--text2); }
    .upgrade-banner p { font-size:0.82rem; color:var(--text2); margin:0; }
    .upgrade-banner button { padding:6px 16px; border-radius:6px; border:none; background:var(--accent); color:#000; font-weight:600; font-size:0.82rem; }

    /* Sidebar promo (free users) */
    .sidebar-promo { padding:12px; margin-top:8px; }
    .sidebar-promo .promo-card { background:linear-gradient(135deg, rgba(121,213,255,0.08), rgba(168,85,247,0.06)); border:1px solid rgba(121,213,255,0.2); border-radius:12px; padding:16px; margin-bottom:10px; }
    .sidebar-promo .promo-card h4 { font-size:0.9rem; margin-bottom:6px; font-weight:700; }
    .sidebar-promo .promo-card p { font-size:0.8rem; color:var(--text2); line-height:1.5; margin-bottom:10px; }
    .sidebar-promo .promo-card .promo-cta { display:inline-block; padding:6px 14px; border-radius:6px; background:var(--accent); color:#000; font-size:0.78rem; font-weight:600; text-decoration:none; transition:all .2s; }
    .sidebar-promo .promo-card .promo-cta:hover { background:var(--accent2); }
    .sidebar-promo .promo-dismiss { background:none; border:none; color:var(--text2); font-size:0.7rem; float:right; cursor:pointer; opacity:0.5; }
    .sidebar-promo .promo-dismiss:hover { opacity:1; }

    /* Dashboard promo / offers area */
    .promo-banner-dash { background:linear-gradient(135deg, rgba(121,213,255,0.1), rgba(121,213,255,0.03)); border:1px solid rgba(121,213,255,0.25); border-radius:var(--radius); padding:20px 24px; display:flex; align-items:center; gap:16px; }
    .promo-banner-dash .pbd-icon { font-size:2rem; flex-shrink:0; }
    .promo-banner-dash .pbd-text h4 { font-size:1rem; margin-bottom:4px; }
    .promo-banner-dash .pbd-text p { font-size:0.88rem; color:var(--text2); }
    .promo-banner-dash .pbd-cta { flex-shrink:0; padding:10px 20px; border-radius:8px; background:var(--accent); color:#000; border:none; font-weight:600; font-size:0.88rem; cursor:pointer; }

    /* Special offers grid (premium) */
    .offers-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
    .offer-card { background:linear-gradient(135deg, rgba(168,85,247,0.08), rgba(59,130,246,0.06)); border:1px solid rgba(168,85,247,0.2); border-radius:12px; padding:20px; transition:all .2s; }
    .offer-card:hover { border-color:rgba(168,85,247,0.4); transform:translateY(-2px); }
    .offer-card .offer-badge { font-size:1.5rem; margin-bottom:8px; }
    .offer-card h4 { font-size:0.95rem; margin-bottom:6px; }
    .offer-card p { font-size:0.82rem; color:var(--text2); line-height:1.5; margin-bottom:12px; }
    .offer-card .offer-cta { display:inline-block; padding:6px 14px; border-radius:6px; background:var(--purple); color:#fff; font-size:0.8rem; font-weight:600; text-decoration:none; transition:all .2s; }
    .offer-card .offer-cta:hover { opacity:0.85; }

    /* Chat promo inline (between messages) */
    .chat-promo-inline { align-self:center; max-width:80%; padding:14px 20px; border-radius:12px; background:linear-gradient(135deg, rgba(121,213,255,0.06), rgba(121,213,255,0.02)); border:1px solid rgba(121,213,255,0.15); text-align:center; margin:8px 0; }
    .chat-promo-inline p { font-size:0.82rem; color:var(--text2); margin-bottom:8px; }
    .chat-promo-inline a { font-size:0.82rem; font-weight:600; color:var(--accent); }

    /* ── DASHBOARD ── */
    .dash-layout { padding:20px; }
    .dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:32px; }
    .stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
    .stat-card .stat-label { font-size:0.8rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
    .stat-card .stat-value { font-size:2rem; font-weight:700; margin:4px 0; }
    .stat-card .stat-value.accent { color:var(--accent); }
    .stat-card .stat-sub { font-size:0.8rem; color:var(--text2); }

    .dash-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; }
    .dash-section h3 { font-size:1.1rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
    .history-item { display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:8px; border:1px solid var(--border); margin-bottom:8px; cursor:pointer; transition:all .15s; }
    .history-item:hover { border-color:var(--accent); background:var(--bg3); }
    .history-item .hi-left { display:flex; align-items:center; gap:10px; }
    .history-item .hi-module { font-weight:600; }
    .history-item .hi-date { font-size:0.8rem; color:var(--text2); }
    .history-item .hi-count { font-size:0.8rem; color:var(--text2); }
    .history-item .hi-actions button { padding:4px 8px; border-radius:4px; border:1px solid var(--border); background:none; color:var(--text2); font-size:0.75rem; margin-left:4px; cursor:pointer; }
    .history-item .hi-actions button:hover { border-color:var(--red); color:var(--red); }

    .module-score { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
    .module-score:last-child { border:none; }
    .module-score .ms-name { display:flex; align-items:center; gap:8px; }
    .module-score .ms-bar { width:120px; height:8px; background:var(--bg); border-radius:4px; overflow:hidden; }
    .module-score .ms-bar-fill { height:100%; border-radius:4px; background:var(--accent); transition:width .5s; }
    .module-score .ms-val { font-weight:600; font-size:0.9rem; width:40px; text-align:right; }
    .empty-state { text-align:center; padding:32px; color:var(--text2); }

    /* ── PROFILE ── */
    .profile-layout { padding:20px; max-width:700px; margin:0 auto; }
    .profile-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin-bottom:20px; }
    .profile-section h3 { margin-bottom:16px; display:flex; align-items:center; gap:8px; }
    .profile-section .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .profile-section .btn-lg { margin-top:12px; }
    .plan-badge { display:inline-block; padding:4px 12px; border-radius:6px; font-size:0.8rem; font-weight:600; }
    .plan-badge.free { background:var(--bg3); color:var(--text2); }
    .plan-badge.premium { background:var(--accent); color:#000; }

    /* ── FREELANCER PROFIL ── */
    .fl-activate-box { background:linear-gradient(135deg, rgba(243,122,34,0.08), rgba(24,50,71,0.04)); border:1px dashed var(--accent); border-radius:var(--radius); padding:24px; text-align:center; }
    .fl-activate-box p { margin:8px 0 16px; color:var(--text2); font-size:0.9rem; }
    .fl-form label { display:block; font-weight:600; margin:12px 0 4px; font-size:0.85rem; }
    .fl-form textarea, .fl-form input[type="text"] { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:0.9rem; background:var(--bg1); }
    .fl-form textarea { resize:vertical; min-height:80px; }
    .fl-skills-grid { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
    .fl-skill-tag { padding:6px 14px; border-radius:20px; font-size:0.8rem; cursor:pointer; border:1px solid var(--border); background:var(--bg2); transition:all 0.2s; }
    .fl-skill-tag.selected { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
    .fl-consent { display:flex; align-items:flex-start; gap:10px; margin:16px 0; padding:12px; background:rgba(243,122,34,0.06); border-radius:8px; font-size:0.82rem; color:var(--text2); }
    .fl-consent input[type="checkbox"] { margin-top:2px; min-width:18px; min-height:18px; accent-color:var(--accent); }
    .fl-status { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
    .fl-status-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:0.8rem; font-weight:600; }
    .fl-status-badge.active { background:rgba(40,167,69,0.12); color:#28a745; }
    .fl-status-badge.inactive { background:var(--bg3); color:var(--text2); }
    .fl-profile-card { border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:12px 0; }
    .fl-profile-card .fl-meta { display:flex; gap:16px; flex-wrap:wrap; margin:8px 0; font-size:0.85rem; color:var(--text2); }

    /* ── Responsive ── */
    @media(max-width:768px) {
      .app-layout { grid-template-columns:1fr; }
      .app-sidebar { display:none; }
      .app-sidebar.open { display:block; }
      .mobile-toggle { display:block; }
      .nav-links { display:none; }
      .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--border); padding:12px; }
      .msg { max-width:90%; }
      .pricing-grid { grid-template-columns:1fr; }
      .profile-section .form-row { grid-template-columns:1fr; }
      .hero h1 { font-size:2rem; }
      .features-grid { grid-template-columns:1fr; }
    }

    /* scrollbar */
    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:var(--text2); }

    /* Voice indicator */
    .voice-indicator { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 20px; background:linear-gradient(180deg, var(--bg2), rgba(243,122,34,0.03)); border-bottom:1px solid var(--border); }
    .vi-avatar { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
    .vi-icon { width:52px; height:52px; background:linear-gradient(135deg, var(--accent), #1f6d82); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; z-index:2; position:relative; transition:transform .3s, box-shadow .3s; }
    .vi-rings { position:absolute; inset:0; }
    .vi-rings span { position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); opacity:0; }
    .voice-indicator.speaking .vi-rings span { animation:voiceRing 1.8s ease-out infinite; }
    .voice-indicator.speaking .vi-rings span:nth-child(2) { animation-delay:0.4s; }
    .voice-indicator.speaking .vi-rings span:nth-child(3) { animation-delay:0.8s; }
    .voice-indicator.speaking .vi-icon { transform:scale(1.08); box-shadow:0 0 24px rgba(243,122,34,0.25); }
    .voice-indicator.listening .vi-icon { background:linear-gradient(135deg, var(--green), #34d399); box-shadow:0 0 24px rgba(15,118,110,0.25); transform:scale(1.08); }
    .voice-indicator.listening .vi-rings span { animation:voiceRing 1.2s ease-out infinite; border-color:var(--green); }
    .voice-indicator.listening .vi-rings span:nth-child(2) { animation-delay:0.3s; }
    .voice-indicator.listening .vi-rings span:nth-child(3) { animation-delay:0.6s; }
    .voice-indicator.thinking .vi-icon { animation:thinkPulse 1.5s ease-in-out infinite; }
    @keyframes voiceRing { 0% { transform:scale(0.7); opacity:0.6; } 100% { transform:scale(1.4); opacity:0; } }
    @keyframes thinkPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.6; transform:scale(0.95); } }
    .vi-status { font-size:0.85rem; color:var(--text2); font-weight:500; letter-spacing:0.02em; }
    .vi-timer { font-size:0.75rem; color:var(--text2); opacity:0.6; min-height:1em; }

    /* Silence setting slider */
    .silence-setting { display:flex; align-items:center; gap:10px; padding:8px 20px; background:var(--bg2); border-top:1px solid var(--glass-border); font-size:0.8rem; color:var(--text2); }
    .silence-setting label { white-space:nowrap; }
    .silence-setting input[type=range] { flex:1; max-width:160px; accent-color:var(--accent); height:4px; }
    .silence-setting span { min-width:32px; font-weight:600; color:var(--accent); }

    /* Voice select dropdown in header */
    .voice-select-wrap { position:relative; }
    .voice-select-wrap select { appearance:none; padding:6px 24px 6px 10px; border-radius:6px; border:1px solid var(--glass-border); background:var(--bg3); color:var(--text2); font-size:0.8rem; cursor:pointer; transition:all .2s; font-family:inherit; }
    .voice-select-wrap select:hover { border-color:var(--accent); color:var(--text); }
    .voice-select-wrap::after { content:'▾'; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--text2); font-size:0.7rem; pointer-events:none; }

    /* Enhanced message bubbles — Conversational Design */
    .msg-wrap { display:flex; gap:10px; max-width:82%; animation:msgIn .35s ease-out; }
    .msg-wrap.user-wrap { flex-direction:row-reverse; align-self:flex-end; }
    .msg-wrap.assistant-wrap { align-self:flex-start; }
    .msg-wrap.system-wrap { align-self:center; max-width:90%; }
    .msg-avatar { width:32px; height:32px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; margin-top:2px; }
    .msg-wrap.assistant-wrap .msg-avatar { background:linear-gradient(135deg, var(--accent), #1f6d82); color:#fff; }
    .msg-wrap.user-wrap .msg-avatar { background:var(--bg4); color:var(--text); }
    .msg-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
    .msg-meta { display:flex; align-items:center; gap:8px; }
    .msg-wrap.user-wrap .msg-meta { flex-direction:row-reverse; }
    .msg-name { font-size:0.7rem; color:var(--text2); font-weight:600; letter-spacing:0.02em; text-transform:uppercase; }
    .msg-time { font-size:0.65rem; color:var(--text2); opacity:0.5; }
    .msg-bubble { padding:13px 16px; border-radius:18px; font-size:0.93rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; transition:border-color .3s, box-shadow .3s; }
    .msg-wrap.user-wrap .msg-bubble { background:var(--accent); color:#000; border-bottom-right-radius:4px; }
    .msg-wrap.assistant-wrap .msg-bubble { background:rgba(255,255,255,0.85); border:1px solid var(--border); border-bottom-left-radius:4px; }
    .msg-wrap.system-wrap .msg-bubble { background:none; color:var(--text2); font-size:0.85rem; text-align:center; padding:8px; }
    .theory-box.open .theory-content { display:block !important; }
    @keyframes tipSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .msg-bubble .score-badge { display:inline-block; margin-top:8px; padding:4px 10px; border-radius:6px; background:var(--accent); color:#000; font-weight:700; font-size:0.85rem; }
    .msg-bubble.streaming::after { content:'▌'; color:var(--accent); animation:curBlink .6s step-end infinite; margin-left:1px; }
    @keyframes curBlink { 50% { opacity:0; } }
    @keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
    .msg-audio-btn { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:4px 10px; border-radius:6px; border:1px solid var(--glass-border); background:var(--glass); color:var(--text2); font-size:0.75rem; cursor:pointer; transition:all .2s; }
    .msg-audio-btn:hover { border-color:var(--accent); color:var(--accent); }
    .msg-audio-btn.playing { color:var(--accent); border-color:var(--accent); }
    .msg-wrap.assistant-wrap.speaking-msg .msg-bubble { border-color:var(--accent); box-shadow:0 0 12px rgba(243,122,34,0.1); }

    /* Feedback visual breakdown (inside assistant bubble) */
    .fb-breakdown { margin-top:14px; display:flex; flex-direction:column; gap:5px; }
    .fb-row { display:flex; align-items:center; gap:10px; padding:6px 10px; background:rgba(24,50,71,0.04); border-radius:8px; font-size:0.84rem; }
    .fb-row .fb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fb-row .fb-bar { width:72px; height:5px; background:rgba(24,50,71,0.08); border-radius:3px; overflow:hidden; flex-shrink:0; }
    .fb-row .fb-fill { height:100%; border-radius:3px; transition:width .5s; }
    .fb-row .fb-val { font-weight:700; min-width:38px; text-align:right; flex-shrink:0; }
    .fb-summary { margin-top:10px; padding:12px; border-radius:10px; background:linear-gradient(135deg, rgba(243,122,34,0.08), rgba(31,109,130,0.04)); border:1px solid rgba(243,122,34,0.1); font-size:0.85rem; line-height:1.6; }
    .fb-summary strong { color:var(--accent); }
    .fb-summary ul { padding-left:18px; margin:6px 0 0; }

    /* Growth: Schwachstellen & Empfehlungen */
    .weakness-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
    .weakness-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:8px; }
    .weakness-card .wk-head { display:flex; align-items:center; gap:10px; }
    .weakness-card .wk-icon { font-size:1.3rem; }
    .weakness-card .wk-title { font-size:0.95rem; font-weight:700; }
    .weakness-card .wk-score { font-size:1.4rem; font-weight:800; color:var(--accent); }
    .weakness-card .wk-text { font-size:0.82rem; color:var(--text2); line-height:1.5; }
    .weakness-card .wk-bar { height:6px; background:rgba(24,50,71,0.06); border-radius:3px; overflow:hidden; }
    .weakness-card .wk-bar-fill { height:100%; border-radius:3px; transition:width .5s; }
    .weakness-card .wk-action { margin-top:auto; padding:8px 16px; border-radius:8px; border:1px solid var(--accent); color:var(--accent); background:none; font-size:0.82rem; cursor:pointer; transition:all .2s; align-self:flex-start; }
    .weakness-card .wk-action:hover { background:var(--accent); color:#000; }
    .recommended-next { background:linear-gradient(135deg, rgba(243,122,34,0.08), rgba(31,109,130,0.04)); border:1px solid rgba(243,122,34,0.15); border-radius:16px; padding:24px; }
    .recommended-next h4 { font-size:1rem; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
    .recommended-next .rec-reason { font-size:0.88rem; color:var(--text2); line-height:1.5; margin-bottom:14px; }
    .recommended-next .rec-btn { padding:10px 24px; border-radius:10px; border:none; background:var(--accent); color:#000; font-weight:600; font-size:0.9rem; cursor:pointer; transition:all .15s; }
    .recommended-next .rec-btn:hover { background:var(--accent2); }

    /* Voice mode active - change input area */
    .voice-mode .chat-input-area { background:linear-gradient(180deg, var(--bg2), var(--bg)); }
    .voice-mode .btn-mic { width:56px; height:56px; border-radius:50% !important; font-size:1.4rem; transition:all .3s cubic-bezier(0.4,0,0.2,1); }
    .voice-mode .btn-mic.recording { width:56px; height:56px; animation:micPulse 1.5s ease-in-out infinite; box-shadow:0 0 24px rgba(239,68,68,0.4); }
    @keyframes micPulse { 0%,100% { box-shadow:0 0 16px rgba(239,68,68,0.3); } 50% { box-shadow:0 0 32px rgba(239,68,68,0.5); transform:scale(1.05); } }

    /* toast */
    .toast { position:fixed; bottom:20px; right:20px; padding:12px 20px; border-radius:8px; font-size:0.9rem; z-index:9999; transform:translateY(100px); opacity:0; transition: all .3s; pointer-events:none; }
    .toast.show { transform:translateY(0); opacity:1; }
    .toast.success { background:var(--green); color:#fff; }
    .toast.error { background:var(--red); color:#fff; }

    /* ── ADMIN DASHBOARD ── */
    .admin-tab-btn { padding:8px 16px; border-radius:8px; border:1px solid var(--glass-border); background:var(--glass); color:var(--text2); font-size:0.82rem; font-weight:500; cursor:pointer; transition:all .2s; }
    .admin-tab-btn.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
    .admin-tab-btn:hover:not(.active) { background:rgba(255,255,255,0.06); color:var(--text); }
    .admin-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:24px; }
    .admin-kpi { background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:20px; }
    .admin-kpi .kpi-label { font-size:0.75rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
    .admin-kpi .kpi-value { font-size:1.8rem; font-weight:800; letter-spacing:-0.02em; }
    .admin-kpi .kpi-value.gold { color:var(--accent); }
    .admin-kpi .kpi-value.green { color:var(--green); }
    .admin-kpi .kpi-value.purple { color:var(--purple); }
    .admin-kpi .kpi-sub { font-size:0.78rem; color:var(--text2); margin-top:2px; }

    .admin-table { width:100%; border-collapse:collapse; }
    .admin-table th { text-align:left; padding:10px 12px; font-size:0.75rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--glass-border); }
    .admin-table td { padding:10px 12px; font-size:0.88rem; border-bottom:1px solid rgba(255,255,255,0.03); }
    .admin-table tr:hover td { background:rgba(255,255,255,0.02); }
    .admin-table .plan-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.72rem; font-weight:600; }
    .admin-table .plan-tag.free { background:var(--bg3); color:var(--text2); }
    .admin-table .plan-tag.premium { background:rgba(121,213,255,0.15); color:var(--accent); }
    .admin-table .plan-tag.admin { background:rgba(168,85,247,0.15); color:var(--purple); }
    .admin-table .user-link { cursor:pointer; color:var(--accent); }
    .admin-table .user-link:hover { text-decoration:underline; }

    .admin-detail-panel { background:var(--bg2); border:1px solid var(--glass-border); border-radius:var(--radius); padding:24px; margin-top:16px; }
    .admin-detail-panel h3 { margin-bottom:16px; display:flex; align-items:center; gap:8px; }
    .admin-detail-panel .detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:20px; }
    .admin-detail-panel .detail-item { font-size:0.88rem; }
    .admin-detail-panel .detail-item label { display:block; font-size:0.75rem; color:var(--text2); text-transform:uppercase; margin-bottom:2px; }
    .admin-detail-panel .close-btn { float:right; background:none; border:1px solid var(--glass-border); color:var(--text2); padding:4px 12px; border-radius:6px; cursor:pointer; font-size:0.8rem; }
    .admin-detail-panel .close-btn:hover { border-color:var(--red); color:var(--red); }

    .admin-bar-chart { display:flex; flex-direction:column; gap:4px; }
    .admin-bar-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
    .admin-bar-row .bar-label { width:200px; font-size:0.85rem; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .admin-bar-row .bar-track { flex:1; height:24px; background:var(--bg3); border-radius:6px; overflow:hidden; position:relative; }
    .admin-bar-row .bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg, var(--accent), #c7f1ff); transition:width .5s; display:flex; align-items:center; padding-left:8px; font-size:0.75rem; font-weight:600; color:#000; }
    .admin-bar-row .bar-value { width:60px; text-align:right; font-size:0.82rem; color:var(--text2); flex-shrink:0; }

    .admin-activity-row { display:flex; align-items:flex-end; gap:3px; height:120px; padding:0 4px; }
    .admin-activity-bar { flex:1; min-width:8px; border-radius:3px 3px 0 0; transition:height .3s; position:relative; cursor:pointer; }
    .admin-activity-bar:hover::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--bg2); border:1px solid var(--glass-border); border-radius:6px; padding:4px 8px; font-size:0.7rem; white-space:nowrap; z-index:10; margin-bottom:4px; }
    .admin-feedback-item { padding:14px; border:1px solid var(--glass-border); border-radius:10px; margin-bottom:10px; background:var(--glass); }
    .admin-feedback-item .fb-meta { font-size:0.78rem; color:var(--text2); margin-bottom:6px; }
    .admin-feedback-item .fb-msg { font-size:0.9rem; line-height:1.5; }

    /* ── PREMIUM GROWTH DASHBOARD ── */
    .growth-kpi-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:28px; }
    .growth-kpi { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:20px; text-align:center; }
    .growth-kpi .gkpi-icon { font-size:1.5rem; margin-bottom:6px; }
    .growth-kpi .gkpi-label { font-size:0.72rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
    .growth-kpi .gkpi-value { font-size:1.6rem; font-weight:800; margin-top:4px; }
    .growth-trend-badge { padding:6px 16px; border-radius:20px; font-size:0.85rem; font-weight:600; }
    .growth-trend-badge.up { background:rgba(34,197,94,0.15); color:var(--green); }
    .growth-trend-badge.down { background:rgba(239,68,68,0.15); color:var(--red); }
    .growth-trend-badge.stable { background:rgba(121,213,255,0.15); color:var(--accent); }
    .growth-trend-badge.neutral { background:var(--glass); color:var(--text2); }
    .growth-section { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:24px; margin-bottom:20px; }
    .growth-section h3 { margin-bottom:16px; font-size:1.1rem; }
    .growth-chart { display:flex; align-items:flex-end; gap:6px; height:160px; padding:8px 0; }
    .growth-bar { display:flex; flex-direction:column; align-items:center; flex:1; justify-content:flex-end; gap:4px; }
    .growth-bar-fill { width:100%; border-radius:6px 6px 0 0; min-height:4px; transition:height .4s ease; position:relative; cursor:pointer; }
    .growth-bar-fill.score { background:var(--accent); opacity:0.8; }
    .growth-bar-fill.sessions { background:var(--purple); opacity:0.6; }
    .growth-bar-label { font-size:0.62rem; color:var(--text2); writing-mode:vertical-lr; text-orientation:mixed; max-height:50px; overflow:hidden; }
    .growth-bar-val { font-size:0.65rem; color:var(--text2); }
    .mastery-item { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--glass-border); border-radius:10px; margin-bottom:10px; background:rgba(255,255,255,0.02); }
    .mastery-icon { font-size:1.4rem; }
    .mastery-info { flex:1; }
    .mastery-name { font-weight:600; margin-bottom:4px; }
    .mastery-bar { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; margin-bottom:4px; }
    .mastery-bar-fill { height:100%; border-radius:4px; transition:width .4s; }
    .mastery-meta { font-size:0.78rem; color:var(--text2); display:flex; gap:12px; }
    .mastery-level { padding:3px 10px; border-radius:6px; font-size:0.72rem; font-weight:600; }
    .mastery-level.anfänger { background:var(--bg3); color:var(--text2); }
    .mastery-level.fortgeschritten { background:rgba(59,130,246,0.15); color:#60a5fa; }
    .mastery-level.gut { background:rgba(34,197,94,0.15); color:var(--green); }
    .mastery-level.meister { background:rgba(121,213,255,0.15); color:var(--accent); }
    .protocol-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.88rem; }
    .protocol-item:last-child { border-bottom:none; }
    .protocol-date { font-size:0.78rem; color:var(--text2); min-width:80px; }
    .protocol-score { font-weight:700; min-width:50px; text-align:right; }
    .protocol-score.high { color:var(--green); }
    .protocol-score.mid { color:var(--accent); }
    .protocol-score.low { color:var(--red); }
    @media (max-width:640px) { .growth-kpi-grid { grid-template-columns:repeat(2, 1fr); } }

    /* ── DESIGN REFRESH 2026 ── */
    :root {
      --bg: #f6f1e8;
      --bg2: #fffdf8;
      --bg3: #f1eadf;
      --bg4: #e6dccd;
      --text: #183247;
      --text2: #65778a;
      --accent: #f37a22;
      --accent2: #d85f14;
      --green: #0f766e;
      --red: #dc2626;
      --blue: #2563eb;
      --purple: #155e75;
      --border: rgba(24,50,71,0.09);
      --glass: rgba(255,255,255,0.7);
      --glass-border: rgba(255,255,255,0.85);
      --radius: 22px;
      --shadow-sm: 0 8px 20px rgba(32, 48, 65, 0.07);
      --shadow-md: 0 18px 45px rgba(32, 48, 65, 0.11);
      --shadow-lg: 0 28px 70px rgba(32, 48, 65, 0.13);
    }
    body {
      font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(243, 122, 34, 0.16), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(21, 94, 117, 0.14), transparent 22%),
        linear-gradient(180deg, #fbf7f0 0%, #f4ede2 46%, #faf7f2 100%);
      position: relative;
    }
    body::before,
    body::after {
      content: '';
      position: fixed;
      pointer-events: none;
      inset: auto;
      z-index: -1;
      border-radius: 999px;
      filter: blur(50px);
      opacity: 0.7;
    }
    body::before {
      width: 280px;
      height: 280px;
      top: 110px;
      right: -80px;
      background: rgba(243, 122, 34, 0.12);
    }
    body::after {
      width: 260px;
      height: 260px;
      left: -80px;
      bottom: 12vh;
      background: rgba(21, 94, 117, 0.12);
    }
    h1, h2, h3, h4, .nav-logo .logo-text, .hero-proof-card strong { font-family: 'Sora', 'Manrope', sans-serif; }
    .container { max-width: 1160px; padding: 0 24px; }
    nav {
      top: 16px;
      left: 20px;
      right: 20px;
      border-radius: 22px;
      padding: 12px 0;
      background: rgba(255, 252, 246, 0.82);
      border: 1px solid rgba(255,255,255,0.95);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(18px) saturate(160%);
    }
    .nav-logo .logo-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(243, 122, 34, 0.24);
      object-fit: contain;
    }
    .nav-links a, .nav-links button {
      color: var(--text);
      border-radius: 12px;
    }
    .nav-links a:hover, .nav-links button:hover {
      background: rgba(24, 50, 71, 0.06);
      color: var(--text);
    }
    .nav-links .btn-outline {
      border: 1px solid rgba(24, 50, 71, 0.12);
      background: rgba(255,255,255,0.65);
    }
    .nav-links .btn-accent {
      box-shadow: 0 12px 24px rgba(243, 122, 34, 0.22);
    }
    #navLoggedOut,
    #navLoggedIn {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .page { padding-top: 108px; }
    .hero {
      padding: 52px 18px 56px;
      text-align: left;
    }
    .hero::before {
      top: -30px;
      left: auto;
      right: -120px;
      transform: none;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(243,122,34,0.16), transparent 65%);
      filter: blur(20px);
    }
    .hero::after {
      top: auto;
      bottom: -120px;
      left: -120px;
      transform: none;
      width: 540px;
      height: 540px;
      background: radial-gradient(circle, rgba(21,94,117,0.14), transparent 65%);
    }
    .hero .container {
      max-width: 1040px;
      padding: 54px 52px;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,0.9);
      background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.52));
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
    }
    .hero .container::before {
      content: '';
      position: absolute;
      inset: 18px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,0.55);
      pointer-events: none;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
      gap: 24px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .hero-copy {
      max-width: 620px;
    }
    .hero-badge {
      background: rgba(255,255,255,0.88);
      border-color: rgba(243, 122, 34, 0.2);
      color: #9a4e12;
      box-shadow: var(--shadow-sm);
    }
    .hero h1 {
      color: var(--text);
      max-width: 11ch;
      font-size: clamp(3rem, 6vw, 5rem);
      margin-bottom: 18px;
    }
    .hero h1 .highlight {
      background: linear-gradient(135deg, var(--accent), #b8ecff, #1f6d82);
      background-size: 200% auto;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero p {
      margin: 0 0 28px;
      max-width: 640px;
      font-size: 1.08rem;
      color: var(--text2);
    }
    .hero-cta {
      justify-content: flex-start;
      gap: 14px;
    }
    .hero-microproof {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .hero-microproof span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(24,50,71,0.08);
      color: var(--text);
      font-size: 0.84rem;
      font-weight: 600;
      box-shadow: var(--shadow-sm);
    }
    .hero-stage {
      position: relative;
      padding: 24px;
      border-radius: 30px;
      background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(255,247,238,0.82));
      border: 1px solid rgba(255,255,255,0.95);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .hero-stage::before {
      content: '';
      position: absolute;
      inset: auto -60px -70px auto;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(180,232,255,0.7), transparent 68%);
      pointer-events: none;
    }
    .hero-stage-head {
      position: relative;
      z-index: 1;
      margin-bottom: 18px;
    }
    .hero-stage-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(243,122,34,0.12);
      color: var(--accent2);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }
    .hero-stage-head strong {
      display: block;
      font-family: 'Sora', 'Manrope', sans-serif;
      font-size: 1.35rem;
      line-height: 1.25;
      margin-bottom: 8px;
    }
    .hero-stage-head p {
      color: var(--text2);
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .hero-stage-stack {
      display: grid;
      gap: 12px;
      position: relative;
      z-index: 1;
    }
    .hero-stage-item {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 14px;
      border-radius: 20px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(24,50,71,0.08);
      box-shadow: var(--shadow-sm);
    }
    .hero-stage-item.active {
      background: linear-gradient(135deg, rgba(243,122,34,0.18), rgba(180,232,255,0.52), rgba(255,255,255,0.96));
      border-color: rgba(243,122,34,0.18);
    }
    .hero-stage-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(24,50,71,0.06);
      font-size: 1.2rem;
    }
    .hero-stage-item strong {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 2px;
    }
    .hero-stage-item span {
      display: block;
      color: var(--text2);
      font-size: 0.82rem;
      line-height: 1.45;
    }
    .hero-stage-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      border: 1px solid rgba(24,50,71,0.08);
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
    }
    .hero-stage-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 20px;
      background: rgba(255,255,255,0.88);
      border: 1px solid rgba(24,50,71,0.08);
      box-shadow: var(--shadow-sm);
      position: relative;
      z-index: 1;
    }
    .hero-stage-note strong {
      display: block;
      font-size: 0.96rem;
      margin-bottom: 4px;
    }
    .hero-stage-note span {
      color: var(--text2);
      font-size: 0.82rem;
      line-height: 1.45;
    }
    .btn-lg {
      border-radius: 14px;
      padding: 15px 28px;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #b4e8ff);
      color: #fffaf3;
      box-shadow: 0 16px 28px rgba(243,122,34,0.22);
    }
    .btn-primary:hover {
      box-shadow: 0 18px 34px rgba(243,122,34,0.28);
    }
    .btn-ghost {
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(24,50,71,0.12);
      color: var(--text);
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,0.95);
      border-color: rgba(24,50,71,0.18);
    }
    .hero-proof {
      margin-top: 32px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .hero-proof-card {
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(24,50,71,0.08);
      box-shadow: var(--shadow-sm);
    }
    .hero-proof-card strong {
      display: block;
      margin-bottom: 6px;
      font-size: 0.95rem;
      color: var(--text);
    }
    .hero-proof-card span {
      display: block;
      color: var(--text2);
      font-size: 0.88rem;
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }
    .section-head .section-sub {
      margin: 0;
      max-width: 420px;
      text-align: left;
    }
    .sales-flow-grid,
    .sales-outcome-grid,
    .audience-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .flow-card,
    .outcome-card,
    .audience-card,
    .cta-ribbon {
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(255,255,255,0.9);
      border-radius: 24px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
    }
    .flow-card,
    .outcome-card,
    .audience-card {
      padding: 24px;
    }
    .flow-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: rgba(243,122,34,0.14);
      color: var(--accent2);
      font-weight: 800;
      margin-bottom: 16px;
    }
    .flow-card h3,
    .outcome-card h3,
    .audience-card h3 {
      font-size: 1.05rem;
      margin-bottom: 10px;
    }
    .flow-card p,
    .outcome-card p,
    .audience-card p,
    .audience-card li,
    .cta-ribbon p {
      color: var(--text2);
      font-size: 0.93rem;
      line-height: 1.65;
    }
    .outcome-card ul,
    .audience-card ul {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .outcome-card li,
    .audience-card li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .outcome-card li::before,
    .audience-card li::before {
      content: '•';
      color: var(--accent);
      font-size: 1.1rem;
      line-height: 1;
      margin-top: 2px;
    }
    .cta-ribbon {
      margin-top: 24px;
      padding: 30px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      background: linear-gradient(135deg, rgba(243,122,34,0.12), rgba(21,94,117,0.08), rgba(255,255,255,0.84));
    }
    .cta-ribbon h3 {
      font-size: 1.45rem;
      margin-bottom: 8px;
    }
    .cta-ribbon .btn-lg {
      flex-shrink: 0;
    }
    .price-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(24,50,71,0.06);
      border: 1px solid rgba(24,50,71,0.08);
      color: var(--text2);
      font-size: 0.76rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 14px;
    }
    .faq {
      padding: 0 0 72px;
    }
    .faq-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .faq-card {
      padding: 24px;
      border-radius: 24px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(255,255,255,0.92);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
    }
    .faq-card h3 {
      font-size: 1rem;
      margin-bottom: 10px;
    }
    .faq-card p {
      color: var(--text2);
      font-size: 0.92rem;
      line-height: 1.65;
    }
    .app-shell-toolbar {
      max-width: 1380px;
      margin: 0 auto 16px;
      padding: 0 20px;
    }
    .app-shell-card,
    .dashboard-lead,
    .profile-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 24px 26px;
      border-radius: 28px;
      background: rgba(255,255,255,0.76);
      border: 1px solid rgba(255,255,255,0.9);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(16px);
      margin-bottom: 18px;
    }
    .shell-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(243,122,34,0.1);
      color: var(--accent2);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      margin-bottom: 10px;
    }
    .app-shell-card h1,
    .dashboard-lead h1,
    .profile-hero h1 {
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      margin-bottom: 8px;
    }
    .app-shell-card p,
    .dashboard-lead p,
    .profile-hero p {
      color: var(--text2);
      max-width: 640px;
    }
    .shell-actions,
    .profile-tags,
    .dashboard-lead-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }
    .shell-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 16px;
      border-radius: 14px;
      border: 1px solid rgba(24,50,71,0.1);
      background: rgba(255,255,255,0.92);
      color: var(--text);
      font-weight: 600;
      transition: all .2s;
    }
    .shell-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .shell-btn.primary {
      background: linear-gradient(135deg, var(--accent), #b4e8ff);
      color: #fffaf4;
      border-color: transparent;
    }
    .profile-tag,
    .snapshot-card {
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(24,50,71,0.08);
      min-width: 120px;
    }
    .profile-tag strong,
    .snapshot-card strong {
      display: block;
      font-size: 0.92rem;
      color: var(--text);
      margin-bottom: 4px;
    }
    .profile-tag span,
    .snapshot-card span {
      display: block;
      font-size: 0.82rem;
      color: var(--text2);
    }
    .welcome-grid {
      width: 100%;
      max-width: 980px;
      display: grid;
      grid-template-columns: 1.35fr 0.85fr;
      gap: 18px;
    }
    .welcome-card {
      padding: 26px;
      border-radius: 24px;
      background: rgba(255,255,255,0.76);
      border: 1px solid rgba(255,255,255,0.9);
      box-shadow: var(--shadow-sm);
      text-align: left;
    }
    .welcome-card.main {
      background: linear-gradient(135deg, rgba(243,122,34,0.12), rgba(255,255,255,0.82));
    }
    .welcome-icon {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--accent), #b4e8ff);
      color: #fff8f0;
      font-size: 2rem;
      box-shadow: 0 16px 24px rgba(243,122,34,0.18);
      margin-bottom: 18px;
    }
    .welcome-list {
      list-style: none;
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }
    .welcome-list li {
      display: flex;
      gap: 12px;
      color: var(--text2);
      font-size: 0.93rem;
      line-height: 1.55;
    }
    .welcome-list li strong {
      color: var(--text);
      display: block;
      margin-bottom: 2px;
    }
    .welcome-list li::before {
      content: '✓';
      width: 26px;
      height: 26px;
      border-radius: 8px;
      background: rgba(15,118,110,0.12);
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .chat-stage-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      padding: 0 22px 14px;
      border-bottom: 1px solid rgba(24,50,71,0.08);
      background: rgba(255,255,255,0.35);
      backdrop-filter: blur(12px);
    }
    .chat-stage-chip {
      display: inline-flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(243,122,34,0.12);
      color: var(--accent2);
      font-size: 0.78rem;
      font-weight: 700;
    }
    .chat-stage-text {
      color: var(--text2);
      font-size: 0.88rem;
    }
    .guide-progress-bar {
      display: flex;
      gap: 4px;
      padding: 8px 22px 10px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .guide-progress-bar::-webkit-scrollbar { display: none; }
    .guide-step {
      flex: 1;
      min-width: 0;
      padding: 6px 8px;
      border-radius: 8px;
      background: var(--bg2);
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }
    .guide-step .gs-num {
      display: block;
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--text2);
      margin-bottom: 2px;
    }
    .guide-step .gs-name {
      display: block;
      font-size: 0.7rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .guide-step.gs-active {
      border-color: var(--accent);
      background: rgba(243,122,34,0.1);
    }
    .guide-step.gs-active .gs-num { color: var(--accent); }
    .guide-step.gs-done {
      border-color: #22c55e;
      background: rgba(34,197,94,0.08);
    }
    .guide-step.gs-done .gs-num { color: #22c55e; }
    .guide-step:hover { background: rgba(243,122,34,0.06); }
    .guide-step-tooltip {
      position: fixed;
      z-index: 9999;
      background: var(--bg1);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      max-width: 280px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      font-size: 0.82rem;
      line-height: 1.5;
      pointer-events: none;
    }
    .guide-step-tooltip .gst-title { font-weight: 700; margin-bottom: 4px; }
    .guide-step-tooltip .gst-desc { color: var(--text2); margin-bottom: 6px; }
    .guide-step-tooltip .gst-example { color: var(--accent); font-style: italic; }
    .dashboard-snapshot {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 20px;
    }
    .features,
    .modules-preview,
    .methodik,
    .pricing,
    .faq {
      padding: 72px 0;
      background: transparent;
    }
    .section-title {
      color: var(--text);
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      margin-bottom: 14px;
    }
    .section-sub {
      color: var(--text2);
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .feature-card,
    .price-card,
    .auth-box,
    .stat-card,
    .dash-section,
    .profile-section,
    .admin-kpi,
    .admin-detail-panel,
    .growth-kpi,
    .growth-section,
    .admin-feedback-item {
      background: rgba(255,255,255,0.75);
      border: 1px solid rgba(255,255,255,0.9);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
    }
    .feature-card:hover,
    .price-card:hover,
    .history-item:hover,
    .offer-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
    }
    .feature-card p,
    .methodik-item p,
    .price-card .subprice,
    .offer-card p,
    .promo-banner-dash .pbd-text p,
    .upgrade-banner p,
    .welcome-screen p,
    .auth-switch,
    .stat-card .stat-label,
    .stat-card .stat-sub,
    .history-item .hi-date,
    .history-item .hi-count,
    .profile-section .form-group label,
    .admin-kpi .kpi-label,
    .admin-kpi .kpi-sub,
    .growth-kpi .gkpi-label,
    .growth-bar-val,
    .growth-bar-label,
    .mastery-meta,
    .vi-status,
    .vi-timer,
    .silence-setting,
    footer {
      color: var(--text2);
    }
    .feature-card::before,
    .price-card.premium::before {
      box-shadow: none;
    }
    .mod-pill,
    .methodik-item,
    .sidebar-promo .promo-card,
    .offer-card,
    .chat-promo-inline,
    .history-item,
    .module-score,
    .mastery-item,
    .protocol-item,
    .admin-table th,
    .admin-table td {
      border-color: rgba(24,50,71,0.08);
    }
    .mod-pill,
    .module-btn,
    .quick-start button,
    .chat-actions button,
    .voice-select-wrap select,
    .history-item .hi-actions button,
    .admin-tab-btn {
      background: rgba(255,255,255,0.72);
      color: var(--text);
      border: 1px solid rgba(24,50,71,0.08);
    }
    .module-btn:hover,
    .quick-start button:hover,
    .chat-actions button:hover,
    .history-item:hover,
    .admin-tab-btn:hover:not(.active) {
      background: rgba(255,255,255,0.95);
    }
    .module-btn.active {
      background: rgba(243,122,34,0.14);
      border-left: none;
      box-shadow: inset 0 0 0 1px rgba(243,122,34,0.22);
    }
    .modules-preview { position: relative; }
    .mod-row { padding-bottom: 12px; }
    .mod-pill.free { background: rgba(15,118,110,0.08); }
    .methodik-content,
    .pricing-grid {
      position: relative;
      z-index: 1;
    }
    .methodik-content {
      padding: 24px 28px;
      border-radius: 28px;
      background: rgba(255,255,255,0.58);
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: var(--shadow-sm);
    }
    .methodik-num {
      box-shadow: 0 10px 18px rgba(243,122,34,0.2);
    }
    .price-card.premium {
      background: linear-gradient(180deg, rgba(243,122,34,0.1), rgba(255,255,255,0.78));
    }
    .price-card.premium::before {
      color: #fffaf2;
      border-radius: 999px;
      box-shadow: 0 10px 18px rgba(243,122,34,0.18);
    }
    .auth-wrap {
      padding: 44px 20px;
    }
    .auth-box {
      max-width: 460px;
      padding: 42px;
      border-radius: 28px;
      box-shadow: var(--shadow-lg);
    }
    .form-group input,
    .form-group select,
    .chat-input-wrap textarea,
    #profFeedback,
    #adminUserSearch {
      background: rgba(255,255,255,0.92) !important;
      color: var(--text) !important;
      border: 1px solid rgba(24,50,71,0.12) !important;
      border-radius: 14px !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
    }
    .form-group input:focus,
    .form-group select:focus,
    .chat-input-wrap textarea:focus,
    #profFeedback:focus,
    #adminUserSearch:focus {
      border-color: rgba(243,122,34,0.45) !important;
      box-shadow: 0 0 0 4px rgba(243,122,34,0.12);
    }
    .app-layout {
      max-width: 1380px;
      margin: 0 auto;
      padding: 0 20px 24px;
      gap: 18px;
      grid-template-columns: 320px minmax(0, 1fr);
      height: calc(100vh - 132px);
    }
    .app-sidebar,
    .app-main {
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,0.88);
      box-shadow: var(--shadow-md);
      background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.58));
      backdrop-filter: blur(16px);
    }
    .app-sidebar {
      border-right: 1px solid rgba(255,255,255,0.88);
      padding: 22px;
    }
    .app-main {
      overflow: hidden;
    }
    .chat-header,
    .chat-input-area,
    .silence-setting,
    .voice-mode .chat-input-area {
      background: transparent;
    }
    .chat-header {
      padding: 18px 22px;
      border-bottom: 1px solid rgba(24,50,71,0.08);
      gap: 12px;
      flex-wrap: wrap;
    }
    .chat-actions {
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .chat-messages {
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.18));
      gap: 14px;
    }
    .msg {
      border-radius: 18px;
      box-shadow: var(--shadow-sm);
    }
    .msg.user {
      background: linear-gradient(135deg, var(--accent), #a6e2ff);
      color: #fffaf4;
    }
    .msg.assistant {
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(24,50,71,0.08);
      color: var(--text);
    }
    .typing-indicator {
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(24,50,71,0.08);
    }
    .chat-input-area {
      padding: 16px 20px;
      border-top: 1px solid rgba(24,50,71,0.08);
      display: flex;
      gap: 10px;
      align-items: flex-end;
      box-shadow: 0 -14px 30px rgba(32,48,65,0.06);
    }
    .welcome-screen {
      padding: 54px;
      background: radial-gradient(circle at top, rgba(243,122,34,0.12), transparent 40%);
    }
    .upgrade-banner,
    .promo-banner-dash,
    .sidebar-promo .promo-card,
    .offer-card,
    .chat-promo-inline {
      box-shadow: var(--shadow-sm);
    }
    .sidebar-promo .promo-card,
    .offer-card,
    .chat-promo-inline {
      background: rgba(255,255,255,0.82);
    }
    .dash-layout,
    .profile-layout {
      padding: 8px 20px 24px;
    }
    .dash-grid,
    .growth-kpi-grid {
      gap: 18px;
    }
    .history-item,
    .module-score,
    .mastery-item,
    .protocol-item {
      background: rgba(255,255,255,0.54);
      border-radius: 16px;
      padding: 14px 16px;
      margin-bottom: 10px;
      border: 1px solid rgba(24,50,71,0.08);
    }
    .module-score .ms-bar,
    .mastery-bar,
    .admin-bar-row .bar-track {
      background: rgba(24,50,71,0.08);
    }
    .toast {
      box-shadow: var(--shadow-md);
      border-radius: 14px;
    }
    .admin-hero {
      flex-wrap: wrap;
    }
    .admin-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    @media (max-width: 1100px) {
      .hero .container {
        padding: 42px 38px;
      }
      .hero-grid {
        grid-template-columns: 1fr;
      }
      .hero-copy {
        max-width: none;
      }
      .hero-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .sales-flow-grid,
      .sales-outcome-grid,
      .audience-grid,
      .dashboard-snapshot,
      .welcome-grid {
        grid-template-columns: 1fr 1fr;
      }
      .app-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 132px);
        height: calc(100dvh - 132px);
      }
      .app-sidebar {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 14px;
        top: auto;
        max-height: 72vh;
        z-index: 200;
        display: none;
        border-radius: 20px;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
        background: var(--bg2);
      }
      .app-sidebar.open {
        display: block;
      }
      .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 199;
        background: rgba(0,0,0,0.35);
      }
      .sidebar-overlay.open {
        display: block;
      }
      .app-main {
        height: 100%;
        overflow: hidden;
      }
    }
    @media (max-width: 768px) {
      .container {
        padding: 0 18px;
      }
      nav {
        top: 12px;
        left: 12px;
        right: 12px;
      }
      .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(24,50,71,0.1);
        background: rgba(255,255,255,0.9);
        box-shadow: var(--shadow-sm);
        color: var(--text);
      }
      .nav-links {
        display: none;
      }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        padding: 14px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.95);
        background: rgba(255,252,246,0.96);
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(18px);
      }
      #navLoggedOut,
      #navLoggedIn {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
      }
      .nav-links a,
      .nav-links button {
        width: 100%;
        justify-content: center;
        display: flex;
      }
      .page {
        padding-top: 96px;
      }
      .hero {
        padding: 22px 12px 36px;
      }
      .hero .container {
        padding: 34px 24px;
        border-radius: 28px;
      }
      .hero-grid {
        gap: 18px;
      }
      .hero h1 {
        max-width: none;
        font-size: clamp(2.5rem, 10vw, 4rem);
      }
      .hero-cta {
        flex-direction: column;
        align-items: stretch;
      }
      .hero-microproof {
        gap: 8px;
      }
      .hero-microproof span {
        width: 100%;
        justify-content: flex-start;
      }
      .hero-stage {
        padding: 18px;
        border-radius: 24px;
      }
      .hero-stage-item {
        grid-template-columns: 40px minmax(0, 1fr);
      }
      .hero-stage-tag {
        grid-column: 2;
        justify-self: start;
      }
      .hero-stage-note {
        flex-direction: column;
        align-items: flex-start;
      }
      .hero-proof {
        grid-template-columns: 1fr;
      }
      .features,
      .modules-preview,
      .methodik,
      .pricing,
      .faq {
        padding: 54px 0;
      }
      .features-grid,
      .pricing-grid,
      .faq-grid,
      .dash-grid,
      .growth-kpi-grid,
      .sales-flow-grid,
      .sales-outcome-grid,
      .audience-grid,
      .dashboard-snapshot,
      .welcome-grid {
        grid-template-columns: 1fr;
      }
      .section-head,
      .app-shell-card,
      .dashboard-lead,
      .profile-hero,
      .cta-ribbon {
        flex-direction: column;
        align-items: flex-start;
      }
      .section-head .section-sub {
        max-width: none;
      }
      .auth-box,
      .stat-card,
      .dash-section,
      .profile-section,
      .growth-section,
      .admin-detail-panel {
        border-radius: 22px;
      }
      .app-layout {
        padding: 0 12px 18px;
      }
      .app-main {
        height: 100%;
        overflow: hidden;
      }
      .chat-header h2 {
        font-size: 1rem;
      }
      .chat-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .chat-stage-meta {
        padding: 0 14px 12px;
        align-items: flex-start;
      }
      .app-shell-toolbar {
        padding: 0 12px;
      }
      .shell-actions .shell-btn,
      .dashboard-lead-actions .shell-btn,
      .growth-hero-side,
      .growth-trend-card {
        width: 100%;
      }
      .chat-actions button,
      .voice-select-wrap {
        flex: 1 1 calc(50% - 6px);
      }
      .voice-select-wrap select {
        width: 100%;
      }
      .welcome-screen {
        padding: 32px 20px;
      }
      .quick-start {
        width: 100%;
      }
      .quick-start button {
        width: 100%;
        justify-content: center;
      }
      .chat-messages {
        padding: 16px;
      }
      .chat-input-area {
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
      }
      .chat-input-wrap textarea {
        font-size: 16px;
      }
      .msg {
        max-width: 92%;
        padding: 12px 14px;
      }
      .history-item,
      .module-score,
      .mastery-item,
      .protocol-item {
        flex-direction: column;
        align-items: flex-start;
      }
      .shell-actions,
      .profile-tags,
      .dashboard-lead-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .history-item .hi-left,
      .mastery-meta {
        flex-wrap: wrap;
      }
      .module-score .ms-bar {
        width: 100%;
      }
      .admin-tabs,
      .growth-hero-side {
        width: 100%;
      }
      .admin-tab-btn {
        flex: 1 1 calc(50% - 6px);
      }
      .admin-bar-row {
        flex-direction: column;
        align-items: stretch;
      }
      .admin-bar-row .bar-label,
      .admin-bar-row .bar-value {
        width: auto;
        text-align: left;
      }
      .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }
      .landing-sticky-cta {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        display: flex;
        gap: 10px;
        padding: 10px;
        border-radius: 20px;
        background: rgba(255,252,246,0.92);
        border: 1px solid rgba(255,255,255,0.95);
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(18px);
        z-index: 120;
      }
      .landing-sticky-cta .btn-lg {
        margin: 0;
        width: auto;
        flex: 1 1 0;
        padding: 13px 16px;
        font-size: 0.95rem;
      }
    }
    @media (max-width: 480px) {
      .hero .container,
      .auth-box {
        padding: 28px 20px;
      }
      .welcome-card,
      .flow-card,
      .outcome-card,
      .audience-card,
      .cta-ribbon,
      .app-shell-card,
      .dashboard-lead,
      .profile-hero {
        padding: 22px 18px;
      }
      .btn-lg {
        width: 100%;
      }
      .chat-actions button,
      .voice-select-wrap {
        flex-basis: 100%;
      }
    }
    .module-lane-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 18px;
    }
    .module-lane-card {
      padding: 26px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,247,238,0.78));
      border: 1px solid rgba(255,255,255,0.94);
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(16px);
    }
    .module-lane-card.communication {
      background: linear-gradient(180deg, rgba(180,232,255,0.3), rgba(255,255,255,0.86));
    }
    .module-lane-card.sales {
      background: linear-gradient(180deg, rgba(243,122,34,0.18), rgba(255,255,255,0.86));
    }
    .module-lane-card.addons {
      background: linear-gradient(180deg, rgba(21,94,117,0.16), rgba(255,255,255,0.84));
    }
    .module-lane-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .module-lane-kicker {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text2);
      display: block;
      margin-bottom: 6px;
    }
    .module-lane-card h3 {
      font-size: 1.12rem;
      line-height: 1.25;
    }
    .module-lane-count {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(24,50,71,0.08);
      font-size: 0.82rem;
      color: var(--text);
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
    }
    .module-lane-card p {
      color: var(--text2);
      font-size: 0.92rem;
      line-height: 1.6;
    }
    .module-lane-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .module-lane-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(24,50,71,0.08);
      font-size: 0.84rem;
      color: var(--text);
    }
    .module-lane-pill.locked {
      opacity: 0.7;
    }
    .module-lane-foot {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-top: auto;
      color: var(--text2);
      font-size: 0.84rem;
      line-height: 1.5;
    }
    .module-lane-foot a {
      color: var(--accent2);
      font-weight: 800;
      white-space: nowrap;
    }
    .module-sidebar-intro {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 18px;
    }
    .sidebar-lane-card {
      padding: 15px 16px;
      border-radius: 20px;
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(24,50,71,0.08);
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: var(--shadow-sm);
    }
    .sidebar-lane-card.active {
      border-color: rgba(243,122,34,0.18);
      background: linear-gradient(180deg, rgba(243,122,34,0.16), rgba(255,255,255,0.9));
    }
    .sidebar-lane-card strong {
      font-size: 1rem;
      color: var(--text);
    }
    .sidebar-lane-card span:last-child {
      color: var(--text2);
      font-size: 0.82rem;
      line-height: 1.5;
    }
    .sidebar-section-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 8px;
    }
    .sidebar-section-count {
      font-size: 0.74rem;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .sidebar-section-text {
      color: var(--text2);
      font-size: 0.82rem;
      line-height: 1.55;
      margin-bottom: 10px;
    }
    .module-btn {
      align-items: flex-start;
    }
    .module-btn .m-copy {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .module-btn .m-meta {
      color: var(--text2);
      font-size: 0.76rem;
      line-height: 1.4;
    }
    .module-btn .m-status {
      flex-shrink: 0;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(24,50,71,0.06);
      border: 1px solid rgba(24,50,71,0.08);
      color: var(--text2);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .module-btn.active .m-status {
      background: rgba(243,122,34,0.14);
      border-color: rgba(243,122,34,0.18);
      color: var(--accent2);
    }
    .module-btn.locked .m-status {
      background: rgba(220,38,38,0.08);
      border-color: rgba(220,38,38,0.12);
      color: #b91c1c;
    }
    .training-feedback-panel {
      margin: 0 20px 18px;
      padding: 22px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,248,240,0.8));
      border: 1px solid rgba(255,255,255,0.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(14px);
    }
    .training-feedback-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    .training-feedback-kicker {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(243,122,34,0.12);
      color: var(--accent2);
      font-size: 0.74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }
    .training-feedback-head h3 {
      font-size: 1rem;
      line-height: 1.4;
    }
    .training-feedback-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(24,50,71,0.06);
      border: 1px solid rgba(24,50,71,0.08);
      color: var(--text2);
      font-size: 0.78rem;
      white-space: nowrap;
    }
    .training-feedback-status.success {
      background: rgba(34,197,94,0.12);
      color: var(--green);
    }
    .training-feedback-status.info {
      background: rgba(59,130,246,0.12);
      color: var(--blue);
    }
    .training-feedback-rating {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }
    .training-feedback-rating button {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(24,50,71,0.1);
      background: rgba(255,255,255,0.84);
      color: var(--text);
      font-weight: 700;
      font-size: 0.92rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
    }
    .training-feedback-rating button.active {
      border-color: rgba(243,122,34,0.22);
      background: linear-gradient(135deg, rgba(243,122,34,0.2), rgba(180,232,255,0.56));
      color: var(--accent2);
    }
    .training-feedback-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 14px;
    }
    .training-feedback-grid textarea,
    .training-feedback-grid input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(24,50,71,0.1);
      background: rgba(255,255,255,0.9);
      color: var(--text);
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
    }
    .training-feedback-grid textarea:focus,
    .training-feedback-grid input:focus {
      border-color: rgba(243,122,34,0.4);
      box-shadow: 0 0 0 4px rgba(243,122,34,0.12);
    }
    .training-feedback-check {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--text2);
      font-size: 0.84rem;
      margin-top: 10px;
    }
    .training-feedback-check input {
      margin-top: 3px;
    }
    .training-feedback-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px;
    }
    .training-feedback-actions .btn-lg {
      width: auto;
      min-width: 180px;
      padding: 12px 18px;
      font-size: 0.95rem;
    }
    .profile-helper {
      margin-top: 8px;
      color: var(--text2);
      font-size: 0.84rem;
      line-height: 1.5;
    }
    #profFeedback,
    #adminUserSearch {
      width: 100%;
      padding: 12px 14px;
      font-size: 0.95rem;
      outline: none;
    }
    #profFeedback {
      min-height: 112px;
      resize: vertical;
    }
    .profile-package-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }
    .package-card {
      padding: 20px;
      border-radius: 20px;
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(24,50,71,0.08);
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: var(--shadow-sm);
    }
    .package-card.active {
      border-color: rgba(15,118,110,0.2);
      background: linear-gradient(180deg, rgba(15,118,110,0.1), rgba(255,255,255,0.88));
    }
    .package-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .package-badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(24,50,71,0.06);
      color: var(--text2);
      font-size: 0.74rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .package-card.active .package-badge {
      background: rgba(34,197,94,0.12);
      color: var(--green);
    }
    .package-card p {
      color: var(--text2);
      font-size: 0.84rem;
      line-height: 1.55;
    }
    .package-action {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(24,50,71,0.08);
      background: rgba(255,255,255,0.9);
      color: var(--text);
      font-weight: 700;
      font-size: 0.86rem;
    }
    .package-card.active .package-action {
      border-color: rgba(34,197,94,0.2);
      color: var(--green);
    }
    .admin-addon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .admin-addon-card {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(24,50,71,0.08);
      background: rgba(255,255,255,0.84);
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: var(--shadow-sm);
    }
    .admin-addon-card.active {
      border-color: rgba(15,118,110,0.2);
      background: linear-gradient(180deg, rgba(15,118,110,0.1), rgba(255,255,255,0.88));
    }
    .admin-addon-card strong {
      display: block;
      margin-bottom: 4px;
    }
    .admin-addon-card span {
      color: var(--text2);
      font-size: 0.82rem;
      line-height: 1.45;
    }
    .admin-addon-card button {
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(24,50,71,0.08);
      background: rgba(255,255,255,0.92);
      color: var(--text);
      font-weight: 700;
      font-size: 0.82rem;
    }
    .admin-addon-card.active button {
      color: #fca5a5;
      border-color: rgba(239,68,68,0.18);
    }
    .growth-layout,
    .admin-layout {
      padding: 8px 20px 24px;
    }
    .growth-layout {
      max-width: 1040px;
    }
    .admin-layout {
      max-width: 1240px;
    }
    .growth-hero,
    .admin-hero {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 20px;
      padding: 26px 28px;
      border-radius: 30px;
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(255,255,255,0.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(16px);
      margin-bottom: 20px;
    }
    .growth-hero h1,
    .admin-hero h1 {
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      margin-bottom: 8px;
    }
    .growth-hero p,
    .admin-hero p {
      color: var(--text2);
      max-width: 640px;
    }
    .growth-hero-side {
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
    }
    .growth-trend-card {
      min-width: 220px;
      padding: 18px 20px;
      border-radius: 22px;
      background: linear-gradient(135deg, rgba(243,122,34,0.14), rgba(180,232,255,0.54), rgba(255,255,255,0.94));
      border: 1px solid rgba(255,255,255,0.94);
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
    }
    .growth-trend-card span {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text2);
    }
    .admin-tabs {
      justify-content: flex-end;
      align-content: flex-start;
    }
    .admin-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .admin-range-switch {
      margin-bottom: 12px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .admin-range-switch .btn-ghost {
      padding: 8px 14px;
      font-size: 0.82rem;
    }
    .landing-sticky-cta {
      display: none;
    }
    @media (max-width: 900px) {
      .training-feedback-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .module-lane-head,
      .module-lane-foot,
      .training-feedback-head,
      .package-top {
        flex-direction: column;
        align-items: flex-start;
      }
      .training-feedback-panel {
        margin: 0 14px 14px;
        padding: 16px;
      }
      .training-feedback-actions {
        flex-direction: column;
      }
      .training-feedback-actions .btn-lg {
        width: 100%;
      }
    }

    /* ══════════════════════════════════════════════
       MOBILE OPTIMIERUNGEN – alle Seiten
       ══════════════════════════════════════════════ */

    /* Legal Pages: Impressum, Datenschutz, AGB, Widerruf */
    @media (max-width: 768px) {
      .legal-wrap { padding: 24px 16px 60px; }
      .legal-wrap h1 { font-size: 1.4rem; }
      .legal-wrap h2 { font-size: 1.05rem; margin-top: 24px; }
      .legal-wrap h3 { font-size: 0.95rem; }
      .legal-wrap p, .legal-wrap li { font-size: 0.87rem; line-height: 1.65; }
      .legal-wrap ul, .legal-wrap ol { padding-left: 18px; }
      .legal-wrap table { display: block; overflow-x: auto; white-space: nowrap; font-size: 0.82rem; }
      .legal-wrap .legal-back { font-size: 0.85rem; }
    }
    @media (max-width: 480px) {
      .legal-wrap { padding: 18px 14px 50px; }
      .legal-wrap h1 { font-size: 1.2rem; word-break: break-word; }
      .legal-wrap h2 { font-size: 0.98rem; }
      .legal-wrap p, .legal-wrap li { font-size: 0.84rem; line-height: 1.6; }
    }

    /* Ranking: tieferes mobiles Breakpoint */
    @media (max-width: 480px) {
      .ranking-hero { padding: 24px 14px 14px; }
      .ranking-hero h1 { font-size: 1.3rem; }
      .ranking-hero p { font-size: 0.85rem; }
      .ranking-row { grid-template-columns: 32px 1fr 55px 50px; font-size: 0.78rem; padding: 8px 10px; gap: 4px; }
      .ranking-rank { font-size: 0.95rem; }
      .ranking-user-name { font-size: 0.82rem; }
      .ranking-user-meta { font-size: 0.72rem; }
      .ranking-table { border-radius: 10px; margin: 0 8px; }
      .ranking-public-toggle { margin: 16px 8px; padding: 16px; border-radius: 10px; }
      .ranking-public-toggle h3 { font-size: 0.9rem; }
      .ranking-filters { padding: 0 14px 14px; }
      .ranking-filters select { padding: 6px 10px; font-size: 0.82rem; }
    }

    /* Marktplatz: tieferes mobiles Breakpoint */
    @media (max-width: 768px) {
      .market-hero { padding: 24px 16px 14px; }
      .market-hero h1 { font-size: 1.4rem; }
      .market-tabs { gap: 6px; padding: 0 14px 14px; }
      .market-tab { padding: 7px 14px; font-size: 0.82rem; }
      .assignment-grid { padding: 0 14px 30px; gap: 12px; }
      .assignment-card { padding: 18px; gap: 10px; border-radius: 12px; }
      .assignment-card h3 { font-size: 0.95rem; }
      .assignment-card .ac-desc { font-size: 0.84rem; -webkit-line-clamp: 2; }
      .assignment-card .ac-footer { flex-direction: column; align-items: stretch; gap: 10px; }
      .ac-apply-btn { width: 100%; text-align: center; }
      .assignment-card .ac-tags { gap: 4px; }
      .assignment-card .ac-tag { font-size: 0.72rem; padding: 2px 8px; }
      .company-form { padding: 0 14px 30px; }
      .company-dash { padding: 0 14px 30px; }
    }
    @media (max-width: 480px) {
      .market-hero { padding: 18px 12px 10px; }
      .market-hero h1 { font-size: 1.2rem; }
      .market-hero p { font-size: 0.85rem; }
      .market-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .market-tabs::-webkit-scrollbar { display: none; }
      .market-tab { flex-shrink: 0; padding: 6px 12px; font-size: 0.78rem; }
      .assignment-card { padding: 14px; }
      .assignment-card .ac-header { flex-direction: column; gap: 4px; }
    }

    /* Company Dashboard Mobile */
    @media (max-width: 640px) {
      .company-dash h2 { font-size: 1rem; }
      #newAssignmentForm .form-group label { font-size: 0.84rem; }
      #newAssignmentForm div[style*="grid-template-columns"] { display: flex !important; flex-direction: column !important; gap: 12px !important; }
    }

    /* Profile & Dashboard Sections Mobile */
    @media (max-width: 480px) {
      .profile-hero { border-radius: 18px; }
      .profile-hero h2 { font-size: 1.1rem; }
      .profile-section, .dash-section, .growth-section { padding: 16px; border-radius: 16px; }
      .stat-card { padding: 14px; border-radius: 14px; }
      .stat-card .stat-value { font-size: 1.5rem; }
    }

    /* Sidebar Mobile-Overlay Improvements */
    @media (max-width: 768px) {
      .app-sidebar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        top: auto;
        height: auto; max-height: 65vh;
        z-index: 200;
        border-right: none;
        border-top: 1px solid var(--border);
        border-radius: 20px 20px 0 0;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: var(--bg2);
        box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
        display: none;
      }
      .app-sidebar.open {
        display: block;
      }
      .app-sidebar::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin: 0 auto 10px;
      }
      .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 199;
        background: rgba(0,0,0,0.35);
      }
      .sidebar-overlay.open {
        display: block;
      }
      .module-btn { padding: 10px 12px; font-size: 0.85rem; }
    }

    /* Nav dropdown mobile touch targets */
    @media (max-width: 768px) {
      .nav-links.open a,
      .nav-links.open button {
        min-height: 44px;
        font-size: 0.95rem;
      }
    }

    /* Global touch-friendly inputs on mobile */
    @media (max-width: 640px) {
      .form-group input,
      .form-group select,
      .form-group textarea {
        font-size: 16px; /* prevents iOS zoom */
        padding: 12px;
      }
      .btn-lg {
        min-height: 48px;
        font-size: 0.95rem;
      }
    }

    /* Growth Dashboard mobile */
    @media (max-width: 480px) {
      .growth-kpi-grid { grid-template-columns: 1fr !important; gap: 10px; }
      .growth-kpi-card { padding: 14px; }
      .growth-trend-card { padding: 16px; border-radius: 14px; }
    }

    /* Premium Teaser & Comeback Alert mobile */
    @media (max-width: 480px) {
      .premium-teaser { padding: 16px; border-radius: 10px; }
      .premium-teaser h4 { font-size: 0.92rem; }
      .comeback-alert { padding: 16px; border-radius: 10px; }
      .comeback-days { font-size: 2rem; min-width: 48px; }
      .comeback-header strong { font-size: 0.92rem; }
    }

    /* Modules-Preview horizontal scroll improvements */
    @media (max-width: 640px) {
      .module-lane-grid { grid-template-columns: 1fr !important; gap: 12px; }
      .module-lane-card { padding: 18px; border-radius: 18px; }
    }

    /* ── MOBILE DASHBOARD & VOICE OVERHAUL ── */
    @media (max-width: 768px) {
      .dash-layout { padding: 14px 4px; }
      .dashboard-snapshot { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .snapshot-card { min-width: 0; padding: 10px 12px; }
      .snapshot-card strong { font-size: 0.85rem; word-break: break-word; }
      .snapshot-card span { font-size: 0.75rem; }
      .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .stat-card { padding: 14px; }
      .stat-card .stat-value { font-size: 1.5rem; }
      .stat-card .stat-label { font-size: 0.72rem; }
      .dash-section { padding: 16px 14px; margin-bottom: 14px; }
      .dash-section h3 { font-size: 1rem; }
      .history-item { padding: 10px; gap: 6px; }
      .history-item .hi-module { font-size: 0.85rem; }
      .history-item .hi-date { font-size: 0.72rem; }
      .history-item .hi-actions { align-self: flex-end; }
      .module-score { padding: 8px 0; }
      .comeback-alert { padding: 14px; border-radius: 14px; }
      .comeback-days { font-size: 2.2rem; min-width: 44px; }
      .premium-teaser { padding: 16px; }
      .premium-teaser ul { padding-left: 16px; }
      .voice-indicator { padding: 14px 12px; gap: 8px; }
      .vi-avatar { width: 60px; height: 60px; }
      .vi-icon { width: 44px; height: 44px; font-size: 1.2rem; }
      .vi-status { font-size: 0.8rem; }
      .silence-setting { padding: 6px 14px; gap: 8px; }
      .silence-setting input[type=range] { max-width: none; }
      .growth-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .growth-kpi { padding: 14px; }
      .growth-kpi .gkpi-value { font-size: 1.3rem; }
      .growth-section { padding: 16px; }
      .growth-section h3 { font-size: 1rem; }
      .growth-chart { height: 120px; }
      .growth-bar-label { font-size: 0.55rem; max-height: 36px; }
      .mastery-item { padding: 10px; gap: 10px; }
      .mastery-icon { font-size: 1.1rem; }
      .mastery-name { font-size: 0.88rem; }
      .mastery-bar { margin-bottom: 2px; }
      .mastery-meta { font-size: 0.72rem; }
      .weakness-grid { grid-template-columns: 1fr; gap: 10px; }
      .weakness-card { padding: 14px; }
      .protocol-item { padding: 8px 10px; font-size: 0.82rem; }
      .protocol-date { font-size: 0.72rem; min-width: 64px; }
      .protocol-score { min-width: 40px; }
      .growth-layout { padding: 8px 12px 24px; }
      .growth-hero { flex-direction: column; padding: 18px; border-radius: 22px; gap: 14px; }
      .growth-hero h1 { font-size: 1.4rem !important; }
      .growth-hero p { font-size: 0.85rem; }
      .growth-hero-side { width: 100%; }
      .growth-trend-card { min-width: 0; width: 100%; flex-direction: row; align-items: center; padding: 14px 16px; border-radius: 14px; }
    }
    @media (max-width: 380px) {
      .dashboard-snapshot { grid-template-columns: 1fr; gap: 8px; }
      .dash-grid { grid-template-columns: 1fr; gap: 8px; }
      .stat-card .stat-value { font-size: 1.3rem; }
      .dashboard-lead h1 { font-size: 1.3rem !important; }
      .growth-kpi-grid { grid-template-columns: 1fr; }
      .growth-hero { padding: 14px; border-radius: 16px; }
      .growth-hero h1 { font-size: 1.2rem !important; }
      .growth-trend-card { padding: 10px 12px; }
      .growth-layout { padding: 6px 8px 20px; }
      .qm-radar-container { max-width: 260px; }
      .qm-trends-grid { grid-template-columns: 1fr; }
    }

/* ═══════════════════════════════════════
   QM – QUALITÄTSMESSSYSTEM
   ═══════════════════════════════════════ */
.qm-section { border-top: 1px solid rgba(24,50,71,0.08); padding-top: 24px; }
.qm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.qm-badge { background: var(--petrol); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }

/* Radar */
.qm-radar-container { max-width: 360px; margin: 0 auto; }
.qm-radar-svg { width: 100%; height: auto; }
.qm-radar-grid { fill: none; stroke: rgba(24,50,71,0.08); stroke-width: 1; }
.qm-radar-axis { stroke: rgba(24,50,71,0.06); stroke-width: 1; }
.qm-radar-fill { fill: rgba(243,122,34,0.15); }
.qm-radar-stroke { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.qm-radar-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.qm-radar-label { font-size: 9px; fill: var(--petrol); font-weight: 600; }
.qm-radar-val { font-size: 10px; fill: var(--accent); font-weight: 700; }
.qm-radar-label-score { font-size: 8px; fill: var(--text2); }

/* Trends */
.qm-trends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.qm-trend-item { background: rgba(24,50,71,0.03); border: 1px solid rgba(24,50,71,0.08); border-radius: 12px; padding: 14px 16px; }
.qm-trend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.qm-trend-name { font-weight: 600; font-size: 0.88rem; color: var(--petrol); }
.qm-trend-arrow { font-weight: 700; font-size: 0.85rem; }
.qm-trend-bar { height: 6px; background: rgba(24,50,71,0.06); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.qm-trend-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.qm-trend-meta { display: flex; gap: 12px; font-size: 0.75rem; color: var(--text2); }

/* Patterns */
.qm-patterns { display: flex; flex-direction: column; gap: 10px; }
.qm-pattern-card { display: flex; gap: 14px; align-items: flex-start; background: rgba(243,122,34,0.04); border: 1px solid rgba(243,122,34,0.15); border-radius: 12px; padding: 14px 16px; }
.qm-pattern-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.qm-pattern-info { flex: 1; }
.qm-pattern-name { font-weight: 700; font-size: 0.92rem; color: var(--petrol); margin-bottom: 2px; }
.qm-pattern-score { font-size: 0.78rem; color: var(--text2); margin-bottom: 6px; }
.qm-pattern-advice { font-size: 0.82rem; color: var(--text1); line-height: 1.5; }

/* Recent */
.qm-recent-list { display: flex; flex-direction: column; gap: 10px; }
.qm-recent-item { background: rgba(24,50,71,0.02); border: 1px solid rgba(24,50,71,0.08); border-radius: 12px; padding: 14px 16px; }
.qm-recent-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.qm-recent-module { font-weight: 700; font-size: 0.9rem; color: var(--petrol); }
.qm-recent-date { font-size: 0.78rem; color: var(--text2); }
.qm-recent-score { font-weight: 700; font-size: 0.85rem; margin-left: auto; padding: 2px 10px; border-radius: 12px; }
.qm-recent-score.high { background: rgba(34,197,94,0.12); color: #16a34a; }
.qm-recent-score.mid { background: rgba(243,122,34,0.12); color: var(--accent); }
.qm-recent-score.low { background: rgba(239,68,68,0.12); color: #dc2626; }
.qm-recent-criteria { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qm-crit-tag { font-size: 0.72rem; padding: 2px 8px; border-radius: 8px; border: 1px solid; background: rgba(255,255,255,0.6); color: var(--petrol); font-weight: 500; }
.qm-recent-detail { font-size: 0.8rem; color: var(--text2); line-height: 1.5; margin-top: 4px; }

/* ═══════════════════════════════════════
   ADMIN QM DASHBOARD
   ═══════════════════════════════════════ */
.aqm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.aqm-kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.aqm-kpi-val { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.aqm-kpi-label { font-size: 0.75rem; color: var(--text2); margin-top: 4px; display: block; }
.aqm-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.aqm-section h3 { font-size: 0.95rem; margin-bottom: 14px; }
.aqm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aqm-half { margin-bottom: 0; }

/* Funnel */
.aqm-funnel { display: flex; flex-direction: column; gap: 8px; }
.aqm-funnel-step { position: relative; }
.aqm-funnel-bar { height: 36px; background: linear-gradient(90deg, var(--accent), rgba(243,122,34,0.4)); border-radius: 8px; min-width: 20px; }
.aqm-funnel-info { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; gap: 8px; font-size: 0.82rem; }
.aqm-funnel-info strong { margin-left: auto; font-size: 1rem; }
.aqm-funnel-pct { font-size: 0.72rem; color: var(--text2); }

/* Score Distribution */
.aqm-dist-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.aqm-dist-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.aqm-dist-val { font-size: 0.72rem; font-weight: 700; margin-bottom: 4px; }
.aqm-dist-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.5s ease; }
.aqm-dist-label { font-size: 0.72rem; color: var(--text2); margin-top: 4px; }

/* Timeline */
.aqm-timeline-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.aqm-tl-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.aqm-tl-val { font-size: 0.72rem; font-weight: 700; margin-bottom: 2px; }
.aqm-tl-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.5s ease; }
.aqm-tl-label { font-size: 0.68rem; color: var(--text2); margin-top: 4px; }
.aqm-tl-sub { font-size: 0.62rem; color: var(--text2); }

/* Heatmap */
.aqm-hm-title { font-size: 0.78rem; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.aqm-hm-row { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.aqm-hm-cell { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: var(--text2); cursor: default; }
.aqm-hm-dow { display: flex; flex-direction: column; gap: 4px; }
.aqm-dow-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.aqm-dow-item span:first-child { width: 24px; font-weight: 600; color: var(--text2); }
.aqm-dow-bar { height: 14px; background: var(--accent); border-radius: 4px; transition: width 0.4s ease; }

/* Drop-offs */
.aqm-drop-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.aqm-drop-item:last-child { border-bottom: none; }
.aqm-drop-name { font-weight: 600; flex: 1; min-width: 120px; }
.aqm-drop-rate { font-weight: 700; }
.aqm-drop-meta { font-size: 0.72rem; color: var(--text2); width: 100%; }

/* Module Table */
.aqm-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.aqm-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text2); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.aqm-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.aqm-table tbody tr:hover { background: rgba(243,122,34,0.04); }

/* Weak Criteria */
.aqm-wc-item { margin-bottom: 12px; }
.aqm-wc-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-bottom: 4px; }
.aqm-wc-bar { height: 6px; background: rgba(24,50,71,0.06); border-radius: 3px; overflow: hidden; }
.aqm-wc-bar div { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.aqm-wc-meta { font-size: 0.72rem; color: var(--text2); margin-top: 2px; }

@media (max-width: 768px) {
  .aqm-row { grid-template-columns: 1fr; }
  .aqm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .aqm-hm-row { grid-template-columns: repeat(12, 1fr); }
}