:root{--slate-50:248 250 252;--slate-100:241 245 249;--slate-200:226 232 240;--slate-300:203 213 225;--slate-400:148 163 184;--slate-500:100 116 139;--slate-600:71 85 105;--slate-700:51 65 85;--slate-800:30 41 59;--slate-900:15 23 42;--slate-950:2 6 23;--cyan-50:236 254 255;--cyan-100:207 250 254;--cyan-200:165 243 252;--cyan-300:103 232 249;--cyan-400:34 211 238;--cyan-500:6 182 212;--cyan-600:8 145 178;--cyan-700:14 116 144;--cyan-800:21 94 117;--cyan-900:22 78 99;--cyan-950:8 51 68;--ink-1:10 11 14;--ink-2:18 20 26;--ink-3:22 26 35;--ink-4:13 15 20;--body:203 213 225;}
html[data-theme="bordeaux"]{--slate-50:252 244 247;--slate-100:248 232 238;--slate-200:238 212 222;--slate-300:226 192 206;--slate-400:196 148 168;--slate-500:156 104 128;--slate-600:118 66 90;--slate-700:90 44 66;--slate-800:68 30 50;--slate-900:52 22 38;--slate-950:38 14 26;--cyan-50:239 246 255;--cyan-100:219 234 254;--cyan-200:191 219 254;--cyan-300:147 197 253;--cyan-400:96 165 250;--cyan-500:59 130 246;--cyan-600:37 99 235;--cyan-700:29 78 216;--cyan-800:30 64 175;--cyan-900:30 58 138;--cyan-950:23 37 84;--ink-1:42 14 28;--ink-2:60 20 38;--ink-3:68 24 44;--ink-4:34 11 22;--body:238 212 222;}
html[data-theme="ozean"]{--slate-50:240 246 255;--slate-100:224 236 252;--slate-200:196 215 242;--slate-300:160 187 226;--slate-400:120 150 196;--slate-500:84 110 156;--slate-600:58 82 125;--slate-700:42 62 100;--slate-800:30 48 82;--slate-900:22 36 66;--slate-950:14 26 50;--cyan-50:236 254 255;--cyan-100:207 250 254;--cyan-200:165 243 252;--cyan-300:103 232 249;--cyan-400:34 211 238;--cyan-500:6 182 212;--cyan-600:8 145 178;--cyan-700:14 116 144;--cyan-800:21 94 117;--cyan-900:22 78 99;--cyan-950:8 51 68;--ink-1:16 28 54;--ink-2:24 40 74;--ink-3:30 48 86;--ink-4:12 22 44;--body:196 215 242;}
/* ==========================================================================
   UpgradeScope – eigene Styles
   Alles Layout/Farbe der Bausteine kommt aus Tailwind-Klassen (css/tailwind.css, wird beim
   Build erzeugt). Hier stehen nur Basis, Regler, Druck-Ansicht und feste Bausteine.
   ========================================================================== */

/* ---------- Basis ---------- */
:root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); background: rgb(var(--ink-1)); }
body { background-color: rgb(var(--ink-1)); color: rgb(var(--body)); margin: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--ink-1)); }
::-webkit-scrollbar-thumb { background: rgb(var(--slate-800)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* ---------- Schwebende Buttons ----------
   Ein Stapel unten RECHTS, bewusst über dem "Powered by Netlify"-Badge (sitzt ganz unten rechts).
   Physisch rechts (nicht "end"), damit er auch bei Arabisch (RTL) neben dem Badge bleibt. */
.scope-dock {
    position: fixed;
    right: 1rem;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.scope-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: rgb(var(--slate-400)); font: 600 14px system-ui, sans-serif; }
.scope-boot i { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgb(var(--slate-800)); border-top-color: rgb(var(--cyan-400)); animation: scope-spin .8s linear infinite; }
@keyframes scope-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scope-boot i { animation: none; } }

/* ---------- Budget-Regler ---------- */
.scope-slider { height: 32px; }
.scope-slider::-webkit-slider-runnable-track { background: transparent; height: 10px; }
.scope-slider::-moz-range-track { background: transparent; height: 10px; }
.scope-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; margin-top: -7px; border-radius: 999px;
    background: rgb(var(--ink-1)); border: 4px solid var(--thumb, #22d3ee); box-shadow: 0 0 12px var(--thumb, #22d3ee);
}
.scope-slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 999px;
    background: rgb(var(--ink-1)); border: 4px solid var(--thumb, #22d3ee); box-shadow: 0 0 12px var(--thumb, #22d3ee);
}

/* ---------- Druck / PDF (Upgrade-Plan) ---------- */
@media print {
    body * { visibility: hidden !important; }
    #scope-print, #scope-print * { visibility: visible !important; }
    #scope-print { position: absolute !important; left: 0; top: 0; width: 100%; }
    [role=dialog], [role=dialog] * { overflow: visible !important; max-height: none !important; }
    .fixed { position: static !important; }
    .no-print { display: none !important; }
}

/* Große-Schrift-Modus (für ältere Nutzer): skaliert alles, was in rem gesetzt ist */
html.big-text { font-size: 120%; }

/* Eigene Schrift (Systemschriften, keine Google-Fonts -> DSGVO-freundlich) */
html, body, button, input, select, textarea { font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, Verdana, 'DejaVu Sans', sans-serif; letter-spacing: .01em; }

/* ==========================================================
   UpgradeScope – Startseite (Home)
   Eigene CSS-Datei: alle Klassen beginnen mit "home-".
   Farben kommen aus den Theme-Variablen der Seite (siehe styles.css).
   ========================================================== */
.home { max-width: 64rem; margin: 0 auto; display: grid; gap: 2.5rem; }

/* Kopfbereich */
.home-hero { text-align: center; padding: 2rem 1rem 0.5rem; }
.home-hero h2 { font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 900; color: #fff; line-height: 1.15; margin: 0; }
.home-hero h2 span { color: #22d3ee; }
.home-hero p { max-width: 38rem; margin: 1rem auto 0; font-size: 1.05rem; color: #cbd5e1; line-height: 1.6; }
.home-cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 2rem; border-radius: .9rem; border: 1px solid #22d3ee; background: #0891b2; color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: 0 8px 28px rgba(8, 145, 178, .35); transition: transform .15s, background .15s; }
.home-cta:hover { background: #0e7490; transform: translateY(-1px); }
.home-resume { margin: 1rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; padding: .7rem 1rem; max-width: 34rem; border: 1px solid #1e293b; border-radius: .8rem; background: rgba(15, 23, 42, .6); font-size: .9rem; color: #94a3b8; }
.home-resume button { border: 1px solid #0e7490; background: transparent; color: #67e8f9; font-weight: 700; padding: .35rem .9rem; border-radius: .6rem; cursor: pointer; }
.home-resume button:hover { background: rgba(8, 145, 178, .2); }

/* Abschnitte */
.home-section h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin: 0 0 .35rem; }
.home-section > p { margin: 0 0 1rem; color: #94a3b8; font-size: .92rem; }

/* Geräte-Kacheln */
.home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.1rem .5rem; border: 1px solid #1e293b; border-radius: 1rem; background: #0f172a; color: #e2e8f0; font-weight: 700; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, background .15s; }
.home-tile:hover { border-color: #0891b2; background: #111c33; transform: translateY(-2px); }
.home-tile svg { color: #22d3ee; }
.home-tile small { font-weight: 400; font-size: .72rem; color: #64748b; }

/* Anleitung in 3 Schritten */
.home-steps { display: grid; gap: .75rem; counter-reset: step; }
@media (min-width: 768px) { .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-step { position: relative; padding: 1.1rem 1.1rem 1.1rem 3.4rem; border: 1px solid #1e293b; border-radius: 1rem; background: #0f172a; counter-increment: step; }
.home-step::before { content: counter(step); position: absolute; inset-inline-start: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: #0891b2; color: #fff; font-weight: 900; display: grid; place-items: center; }
.home-step b { display: block; color: #fff; margin-bottom: .2rem; }
.home-step span { font-size: .88rem; color: #94a3b8; line-height: 1.5; }

/* Stufen-Erklärung und Hinweise */
.home-cards { display: grid; gap: .75rem; }
@media (min-width: 768px) { .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-card { padding: 1rem 1.1rem; border: 1px solid #1e293b; border-radius: 1rem; background: #0f172a; }
.home-card b { display: block; color: #fff; margin-bottom: .25rem; }
.home-card span { font-size: .88rem; color: #94a3b8; line-height: 1.5; }

/* Noch nicht verfügbar (deaktiviert) */
.home-soon { display: grid; gap: .75rem; }
@media (min-width: 768px) { .home-soon { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-soon-item { padding: 1rem 1.1rem; border: 1px dashed #334155; border-radius: 1rem; background: rgba(15, 23, 42, .5); opacity: .8; }
.home-soon-item button { margin-top: .6rem; width: 100%; padding: .55rem; border-radius: .6rem; border: 1px solid #334155; background: #1e293b; color: #94a3b8; font-weight: 700; cursor: not-allowed; }
.home-badge { display: inline-block; margin-inline-start: .4rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid #b45309; background: rgba(120, 53, 15, .3); color: #fcd34d; font-size: .65rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }

/* Link- und Vertrauensliste */
.home-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-links a { padding: .45rem .9rem; border: 1px solid #1e293b; border-radius: 999px; background: #0f172a; color: #67e8f9; font-size: .85rem; text-decoration: none; }
.home-links a:hover { border-color: #0891b2; }
.home-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: #cbd5e1; font-size: .92rem; }
@media (min-width: 640px) { .home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-trust li::before { content: "✓"; color: #22d3ee; font-weight: 900; margin-inline-end: .5rem; }

/* Logo als Knopf in der Kopfzeile */
.brand-home { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; gap: .75rem; }
.brand-home:focus-visible { outline: 2px solid #22d3ee; outline-offset: 4px; border-radius: .5rem; }