/* =====================================================
MyFinIQ – styles.css
Premium Dark / Gold Design
Vollständig überarbeitet
Stand: optimierte Desktop- und Mobile-Ansicht
===================================================== */


/* =====================================================
1. ROOT / GRUNDLAGEN
===================================================== */

:root {
--bg-main: #06070b;
--bg-soft: #0c0f16;
--bg-card: rgba(255, 255, 255, 0.06);
--bg-card-light: rgba(255, 255, 255, 0.085);

--text-main: #ffffff;
--text-soft: rgba(255, 255, 255, 0.82);
--text-muted: rgba(255, 255, 255, 0.62);

--gold: #f4c542;
--gold-dark: #c89422;
--gold-soft: rgba(244, 197, 66, 0.16);

--purple: #6f35ff;
--purple-soft: rgba(111, 53, 255, 0.18);

--border-soft: rgba(255, 255, 255, 0.12);
--border-strong: rgba(255, 255, 255, 0.18);
--border-gold: rgba(244, 197, 66, 0.42);

--shadow-soft: 0 22px 70px rgba(0, 0, 0, 0.34);
--shadow-strong: 0 30px 90px rgba(0, 0, 0, 0.44);
--shadow-gold: 0 18px 55px rgba(244, 197, 66, 0.22);

--radius-xl: 34px;
--radius-lg: 26px;
--radius-md: 18px;
--radius-sm: 12px;

--container: 1180px;
--container-wide: 1280px;

--header-height: 84px;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
overflow-x: hidden;
}

body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
color: var(--text-main);
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;
background:
radial-gradient(circle at 12% 12%, rgba(244, 197, 66, 0.075), transparent 28%),
radial-gradient(circle at 92% 10%, rgba(111, 53, 255, 0.13), transparent 34%),
radial-gradient(circle at 70% 78%, rgba(244, 197, 66, 0.055), transparent 32%),
linear-gradient(135deg, #05060a 0%, #0b0e15 46%, #11131f 100%);
}

body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.035), transparent 18%),
radial-gradient(circle at 68% 34%, rgba(244, 197, 66, 0.035), transparent 22%),
radial-gradient(circle at 88% 78%, rgba(111, 53, 255, 0.045), transparent 24%);
}

a {
color: inherit;
text-decoration: none;
}

img {
display: block;
max-width: 100%;
}

p {
margin: 0;
}

ul,
ol {
margin: 16px 0 0;
padding-left: 22px;
}

li {
margin-bottom: 10px;
color: var(--text-soft);
line-height: 1.65;
}

button,
input,
select,
textarea {
font: inherit;
}

.hidden {
display: none !important;
}


/* =====================================================
2. TYPOGRAFIE
===================================================== */

h1,
h2,
h3,
h4 {
margin: 0;
color: #ffffff;
letter-spacing: -0.04em;
}

h1 {
font-size: clamp(2.35rem, 4.4vw, 4.85rem);
line-height: 1.02;
font-weight: 700;
}

h2 {
font-size: clamp(1.75rem, 3vw, 3.15rem);
line-height: 1.08;
font-weight: 690;
}

h3 {
font-size: clamp(1.22rem, 1.6vw, 1.58rem);
line-height: 1.18;
font-weight: 700;
}

h4 {
font-size: 1.08rem;
line-height: 1.25;
font-weight: 700;
}

.lead {
margin-top: 18px;
max-width: 760px;
color: var(--text-soft);
font-size: clamp(1rem, 1.22vw, 1.14rem);
line-height: 1.72;
}

.gold-title,
.module-gold-title,
.content-section h2,
.lesson h2,
.module-box h2 {
color: var(--gold);
text-shadow: 0 0 18px rgba(244, 197, 66, 0.18);
}

.eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 9px 15px;
margin-bottom: 18px;
border-radius: 999px;
color: var(--gold);
background: rgba(255, 255, 255, 0.065);
border: 1px solid rgba(244, 197, 66, 0.42);
font-size: 0.82rem;
font-weight: 820;
line-height: 1;
letter-spacing: -0.01em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* =====================================================
3. HEADER / NAVIGATION
===================================================== */

.site-header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
background: rgba(7, 8, 12, 0.78);
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
backdrop-filter: blur(18px);
}

.header-inner {
width: min(var(--container), calc(100% - 48px));
min-height: var(--header-height);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}

.site-logo {
color: #ffffff;
white-space: nowrap;
font-size: clamp(1.95rem, 3vw, 2.75rem);
font-weight: 850;
letter-spacing: -0.065em;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.24);
}

.main-nav {
display: flex;
align-items: center;
gap: clamp(14px, 1.4vw, 22px);
}

.main-nav a {
color: rgba(255, 255, 255, 0.88);
font-size: 0.94rem;
font-weight: 720;
line-height: 1;
white-space: nowrap;
transition:
color 0.22s ease,
transform 0.22s ease,
opacity 0.22s ease;
}

.main-nav a:hover,
.main-nav a.active {
color: var(--gold);
}

.main-nav a:hover {
transform: translateY(-1px);
}

.nav-btn {
padding: 13px 20px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
}

.login-btn,
.logout-btn,
.register-btn {
background: rgba(255, 255, 255, 0.045);
}

.nav-toggle {
display: none;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
font-size: 1.25rem;
cursor: pointer;
}


/* =====================================================
4. BUTTONS
===================================================== */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 14px 24px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.98rem;
font-weight: 780;
line-height: 1.1;
cursor: pointer;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
background 0.22s ease,
border-color 0.22s ease;
}

.btn:hover {
transform: translateY(-2px);
}

.btn-primary {
color: #15100a;
background: linear-gradient(135deg, var(--gold), #e2a916);
box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
box-shadow: 0 22px 70px rgba(244, 197, 66, 0.32);
}

.btn-secondary {
color: #ffffff;
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.13);
}

.btn-purple {
color: #ffffff;
background: linear-gradient(135deg, #7c4dff, #5328e8);
box-shadow: 0 18px 55px rgba(111, 53, 255, 0.28);
}

.hero-actions,
.card-actions,
.module-actions,
.form-actions,
.quick-access,
.module-nav {
display: flex;
flex-wrap: wrap;
gap: 16px;
}


/* =====================================================
5. ALLGEMEINE CONTAINER / ABSCHNITTE
===================================================== */

.container {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
}

.section {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 82px 0;
}

.section + .section {
padding-top: 54px;
}

.section-header {
max-width: 860px;
margin-bottom: 38px;
}

.section-header.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}

.section-header h2 {
text-shadow: 0 0 22px rgba(255, 255, 255, 0.18);
}

.section-header p {
margin-top: 18px;
color: var(--text-soft);
font-size: clamp(1rem, 1.24vw, 1.12rem);
line-height: 1.72;
}


/* =====================================================
6. GRIDS / CARDS
===================================================== */

.grid-2,
.grid-3,
.grid-4 {
display: grid;
gap: 24px;
}

.grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
position: relative;
overflow: hidden;
padding: 30px;
border-radius: var(--radius-lg);
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 38%),
linear-gradient(145deg, rgba(255, 255, 255, 0.073), rgba(255, 255, 255, 0.034));
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(14px);
}

.card.gold {
border-color: var(--border-gold);
background:
radial-gradient(circle at top left, rgba(244, 197, 66, 0.18), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}

.card.purple {
border-color: rgba(111, 53, 255, 0.45);
background:
radial-gradient(circle at top left, rgba(111, 53, 255, 0.22), transparent 36%),
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}

.card h2,
.card h3 {
margin-bottom: 14px;
}

.card p {
color: var(--text-soft);
line-height: 1.68;
font-size: 1rem;
}

.card p + p {
margin-top: 14px;
}

.card .btn {
margin-top: 24px;
}


/* =====================================================
7. INDEX HERO – KORRIGIERTE ANORDNUNG
===================================================== */

.hero-section {
width: 100%;
padding: 92px 0 86px;
}

.hero-container {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
align-items: center;
gap: 64px;
}

.hero-content {
max-width: 680px;
}

.hero-content h1 {
margin: 18px 0 22px;
color: #ffffff;
font-size: clamp(2.55rem, 4.7vw, 4.85rem);
line-height: 0.98;
font-weight: 700;
letter-spacing: -0.06em;
text-shadow: 0 0 24px rgba(255, 255, 255, 0.22);
}

.hero-content .lead {
max-width: 650px;
margin-top: 0;
color: rgba(255, 255, 255, 0.86);
font-size: clamp(1rem, 1.22vw, 1.12rem);
line-height: 1.68;
}

.hero-actions {
margin-top: 30px;
}

.hero-card {
width: 100%;
max-width: 470px;
justify-self: end;
padding: 36px;
border-radius: var(--radius-xl);
background:
radial-gradient(circle at top left, rgba(244, 197, 66, 0.16), transparent 36%),
linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 28px 90px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(18px);
}

.hero-card h2 {
margin: 12px 0 14px;
color: #ffffff;
font-size: clamp(1.65rem, 2.55vw, 2.35rem);
line-height: 1.1;
font-weight: 720;
letter-spacing: -0.035em;
}

.hero-card p {
color: rgba(255, 255, 255, 0.82);
line-height: 1.62;
font-size: 0.98rem;
}

.hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
margin-top: 26px;
}

.hero-stat-box {
min-height: 92px;
padding: 17px 18px;
border-radius: 22px;
background: rgba(12, 14, 20, 0.62);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 14px 35px rgba(0, 0, 0, 0.25);
}

.hero-stat-box strong {
display: block;
margin-bottom: 8px;
color: var(--gold);
font-size: clamp(1.45rem, 2.2vw, 1.95rem);
font-weight: 820;
line-height: 1;
text-shadow: 0 0 18px rgba(244, 197, 66, 0.28);
}

.hero-stat-box span {
display: block;
color: #ffffff;
font-size: 0.94rem;
font-weight: 650;
line-height: 1.25;
}


/* =====================================================
8. PAGE HERO FÜR UNTERSEITEN
===================================================== */

.page-hero {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 88px 0 56px;
}

.page-hero .container {
width: 100%;
}

.page-hero h1 {
max-width: 920px;
font-size: clamp(2.15rem, 3.7vw, 3.75rem);
line-height: 1.05;
font-weight: 690;
}

.page-hero .lead {
max-width: 820px;
}

.module-title {
color: #ffffff;
font-weight: 700;
text-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}


/* =====================================================
9. EBOOKS
===================================================== */

.ebooks-hero {
padding-bottom: 44px;
}

.ebooks-grid {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 24px 0 70px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}

.ebook-card {
overflow: hidden;
border-radius: var(--radius-lg);
background:
radial-gradient(circle at top left, rgba(244, 197, 66, 0.12), transparent 32%),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(14px);
}

.ebook-cover {
width: 100%;
height: 250px;
object-fit: contain;
padding: 22px;
background:
radial-gradient(circle at center, rgba(244, 197, 66, 0.12), transparent 42%),
rgba(0, 0, 0, 0.24);
}

.ebook-card-content {
padding: 26px;
}

.ebook-card h2 {
margin-bottom: 12px;
color: #ffffff;
font-size: clamp(1.3rem, 1.85vw, 1.7rem);
font-weight: 700;
}

.ebook-card p {
color: var(--text-soft);
line-height: 1.65;
font-size: 0.98rem;
}

.ebook-card p + p {
margin-top: 12px;
}

.ebook-price {
display: block;
margin-top: 22px;
color: var(--gold);
font-size: 1.25rem;
font-weight: 830;
}

.bundle-card {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto 90px;
padding: 40px;
border-radius: var(--radius-xl);
background:
radial-gradient(circle at top left, rgba(244, 197, 66, 0.18), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
border: 1px solid var(--border-gold);
box-shadow: var(--shadow-soft);
}

.bundle-card .container {
width: 100%;
}

.bundle-card h2 {
margin-bottom: 16px;
color: var(--gold);
}

.bundle-card p {
max-width: 850px;
color: var(--text-soft);
line-height: 1.7;
}

.bundle-card p + p {
margin-top: 14px;
}

.ebook-detail-layout {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 72px 0 90px;
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.38fr);
gap: 44px;
align-items: start;
}

.ebook-detail-content {
display: grid;
gap: 24px;
}

.ebook-detail-cover {
position: sticky;
top: 112px;
padding: 24px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.055);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
}

.ebook-detail-cover img {
width: 100%;
max-height: 540px;
object-fit: contain;
border-radius: 16px;
}


/* =====================================================
10. MODULE / PRO / ELITE
===================================================== */

.module-page {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 72px 0 90px;
}

.module-hero {
padding: 64px 0 38px;
}

.module-hero h1 {
color: var(--gold);
font-size: clamp(2rem, 3.25vw, 3.35rem);
line-height: 1.08;
font-weight: 700;
}

.module-hero p {
max-width: 900px;
margin-top: 16px;
color: var(--text-soft);
line-height: 1.7;
}

.module-progress {
margin-top: 22px;
padding: 18px 22px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.055);
border: 1px solid var(--border-soft);
}

.content-section,
.lesson,
.module-box {
margin: 24px 0;
padding: 32px;
border-radius: var(--radius-lg);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
border: 1px solid var(--border-soft);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.content-section.gold,
.lesson.gold,
.module-box.gold {
border-color: var(--border-gold);
background:
radial-gradient(circle at top left, rgba(244, 197, 66, 0.13), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.content-section h2,
.lesson h2,
.module-box h2 {
margin-bottom: 16px;
color: var(--gold);
font-size: clamp(1.45rem, 2.25vw, 2.35rem);
font-weight: 700;
}

.content-section h3,
.lesson h3,
.module-box h3 {
margin-top: 22px;
margin-bottom: 12px;
color: #ffffff;
}

.content-section p,
.lesson p,
.module-box p {
color: var(--text-soft);
line-height: 1.72;
font-size: 1rem;
}

.content-section p + p,
.lesson p + p,
.module-box p + p {
margin-top: 14px;
}

.module-nav {
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
}

.module-nav .btn,
.module-actions .btn {
color: #15100a;
background: linear-gradient(135deg, var(--gold), #e2a916);
box-shadow: var(--shadow-gold);
}

.access-banner {
margin: 26px 0;
padding: 18px 22px;
border-radius: var(--radius-md);
background: rgba(244, 197, 66, 0.09);
border: 1px solid var(--border-gold);
color: #ffffff;
font-weight: 650;
}

.access-banner.success {
border-color: rgba(72, 220, 128, 0.5);
background: rgba(72, 220, 128, 0.1);
}

.access-banner.error {
border-color: rgba(255, 90, 90, 0.5);
background: rgba(255, 90, 90, 0.1);
}

.premium-grid,
.modules-grid {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 34px 0 90px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}

.module-card {
padding: 28px;
border-radius: var(--radius-lg);
background:
radial-gradient(circle at top left, rgba(111, 53, 255, 0.15), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
border: 1px solid rgba(111, 53, 255, 0.38);
box-shadow: var(--shadow-soft);
}

.module-card.gold,
.premium-grid .gold {
border-color: var(--border-gold);
background:
radial-gradient(circle at top left, rgba(244, 197, 66, 0.16), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.module-card h2,
.module-card h3 {
margin-bottom: 12px;
color: #ffffff;
}

.module-card p {
color: var(--text-soft);
line-height: 1.65;
}


/* =====================================================
11. DASHBOARD
===================================================== */

.dashboard-hero {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
padding: 74px 0 44px;
text-align: center;
}

.dashboard-hero h1 {
color: #ffffff;
font-size: clamp(2rem, 3.8vw, 3.8rem);
}

.dashboard-hero p {
margin-top: 14px;
color: var(--text-soft);
}

.dashboard-card {
width: min(980px, calc(100% - 48px));
margin: 0 auto 80px;
padding: 36px;
border-radius: var(--radius-xl);
background:
radial-gradient(circle at top right, rgba(111, 53, 255, 0.16), transparent 36%),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
}

.dashboard-card h2 {
margin-bottom: 18px;
color: #ffffff;
}

.profile-row {
margin: 10px 0;
color: var(--text-soft);
font-size: 1.05rem;
}

.profile-row strong {
color: #ffffff;
}

.quick-access {
margin-top: 24px;
}


/* =====================================================
12. FORMULARE
===================================================== */

.form-section {
width: min(620px, calc(100% - 48px));
margin: 0 auto;
padding: 86px 0;
}

.form-card {
padding: 36px;
border-radius: var(--radius-xl);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
}

.form-card h1,
.form-card h2 {
margin-bottom: 18px;
}

.form-card p {
margin-bottom: 24px;
color: var(--text-soft);
line-height: 1.65;
}

.form-group {
margin-bottom: 18px;
}

label {
display: block;
margin-bottom: 8px;
color: #ffffff;
font-weight: 700;
}

input,
select,
textarea {
width: 100%;
padding: 15px 16px;
border-radius: 16px;
outline: none;
color: #ffffff;
background: rgba(255, 255, 255, 0.075);
border: 1px solid var(--border-soft);
}

input:focus,
select:focus,
textarea:focus {
border-color: var(--border-gold);
box-shadow: 0 0 0 4px rgba(244, 197, 66, 0.12);
}

input::placeholder,
textarea::placeholder {
color: rgba(255, 255, 255, 0.45);
}


/* =====================================================
13. TOOLS / KLEINE BOXEN
===================================================== */

.tool-result,
.calculator-box {
margin-top: 24px;
padding: 22px;
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.24);
border: 1px solid var(--border-soft);
}

.result-value {
color: var(--gold);
font-size: 1.45rem;
font-weight: 820;
}

.price-box {
margin-top: 18px;
padding: 20px;
border-radius: var(--radius-md);
background: rgba(244, 197, 66, 0.08);
border: 1px solid var(--border-gold);
}

.price-box strong {
color: var(--gold);
font-size: 1.3rem;
}


/* =====================================================
14. COOKIE / FOOTER / BADGES
===================================================== */

.cookie-banner {
position: fixed;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 2000;
max-width: 920px;
margin: 0 auto;
padding: 20px;
border-radius: var(--radius-lg);
background: rgba(10, 12, 18, 0.94);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(16px);
}

.cookie-banner p {
color: var(--text-soft);
line-height: 1.55;
}

.cookie-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}

.site-footer {
width: 100%;
padding: 42px 24px;
text-align: center;
color: rgba(255, 255, 255, 0.58);
border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.site-footer p {
color: rgba(255, 255, 255, 0.58);
}

.badge,
.status-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 8px 13px;
border-radius: 999px;
background: rgba(244, 197, 66, 0.12);
border: 1px solid var(--border-gold);
color: var(--gold);
font-size: 0.82rem;
font-weight: 800;
}

.badge.purple,
.status-badge.purple {
background: rgba(111, 53, 255, 0.14);
border-color: rgba(111, 53, 255, 0.45);
color: #b99cff;
}

.divider {
width: 100%;
height: 1px;
margin: 32px 0;
background: var(--border-soft);
}


/* =====================================================
15. WICHTIGE KORREKTUREN FÜR INDEX-ABSTÄNDE
===================================================== */

.hero-section + .section {
padding-top: 70px;
}

.section .grid-2,
.section .grid-3,
.section .grid-4 {
margin-top: 32px;
}

main > .section:last-of-type {
padding-bottom: 92px;
}


/* =====================================================
16. RESPONSIVE – TABLET
===================================================== */

@media (max-width: 1100px) {
.hero-container {
grid-template-columns: 1fr;
gap: 42px;
}

.hero-card {
max-width: 720px;
justify-self: start;
}

.grid-3,
.ebooks-grid,
.premium-grid,
.modules-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ebook-detail-layout {
grid-template-columns: 1fr;
}

.ebook-detail-cover {
position: relative;
top: auto;
}
}


/* =====================================================
17. RESPONSIVE – MOBILE / IPHONE
===================================================== */

@media (max-width: 900px) {
:root {
--header-height: 76px;
}

.header-inner {
width: calc(100% - 32px);
min-height: var(--header-height);
}

.nav-toggle {
display: inline-flex;
}

.main-nav {
position: absolute;
top: 76px;
left: 16px;
right: 16px;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 22px;
border-radius: 24px;
background: rgba(7, 8, 12, 0.96);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
}

.main-nav.open {
display: flex;
}

.main-nav a {
width: 100%;
padding: 14px 0;
font-size: 1.05rem;
}

.nav-btn {
width: 100%;
margin-top: 8px;
padding: 15px 18px !important;
justify-content: center;
text-align: center;
}

.container,
.section,
.page-hero,
.ebooks-grid,
.bundle-card,
.premium-grid,
.modules-grid,
.module-page,
.dashboard-card,
.dashboard-hero,
.form-section {
width: calc(100% - 32px);
}

.hero-section {
padding: 74px 0 62px;
}

.hero-container {
width: calc(100% - 32px);
grid-template-columns: 1fr;
gap: 34px;
}

.hero-content {
max-width: 100%;
}

.hero-content h1 {
font-size: clamp(2.25rem, 10.5vw, 3.35rem);
line-height: 1.02;
}

.hero-content .lead {
font-size: 1rem;
line-height: 1.64;
}

.hero-card {
max-width: 100%;
padding: 28px;
border-radius: 28px;
}

.section {
padding: 62px 0;
}

.section + .section {
padding-top: 36px;
}

.page-hero {
padding: 68px 0 42px;
}

.grid-2,
.grid-3,
.grid-4,
.ebooks-grid,
.premium-grid,
.modules-grid {
grid-template-columns: 1fr;
}
}


/* =====================================================
18. RESPONSIVE – KLEINE HANDYS
===================================================== */

@media (max-width: 620px) {
.site-logo {
font-size: 2rem;
}

.hero-section {
padding-top: 62px;
}

.hero-content h1 {
font-size: clamp(2.1rem, 11vw, 3.05rem);
letter-spacing: -0.05em;
}

.hero-actions,
.card-actions,
.module-actions,
.module-nav,
.quick-access {
width: 100%;
}

.btn,
.hero-actions .btn,
.card-actions .btn,
.module-actions .btn,
.module-nav .btn,
.quick-access .btn {
width: 100%;
}

.hero-card {
padding: 24px;
border-radius: 24px;
}

.hero-stats {
grid-template-columns: 1fr;
gap: 12px;
}

.hero-stat-box {
min-height: auto;
padding: 16px;
}

.card,
.form-card,
.dashboard-card,
.content-section,
.lesson,
.module-box,
.module-card {
padding: 24px;
border-radius: 22px;
}

.bundle-card {
padding: 26px;
border-radius: 24px;
}

.ebook-cover {
height: 215px;
}

h1 {
font-size: clamp(2.05rem, 11vw, 3.1rem);
}

h2 {
font-size: clamp(1.55rem, 8vw, 2.35rem);
}

.section-header {
margin-bottom: 28px;
}
}


/* =====================================================
19. FEINKORREKTUR GEGEN ZU FETTE ÜBERSCHRIFTEN
===================================================== */

.page-hero h1,
.hero-content h1,
.section-header h2,
.module-hero h1 {
font-weight: 690;
}

.card h2,
.card h3,
.ebook-card h2,
.content-section h2,
.lesson h2,
.module-box h2 {
font-weight: 690;
}


/* =====================================================
20. PRINT
===================================================== */

@media print {
body {
background: #ffffff;
color: #000000;
}

.site-header,
.site-footer,
.btn,
.nav-toggle,
.cookie-banner {
display: none !important;
}

.card,
.content-section,
.lesson,
.module-box,
.hero-card {
box-shadow: none;
border: 1px solid #cccccc;
background: #ffffff;
color: #000000;
}

h1,
h2,
h3,
h4,
p,
li {
color: #000000 !important;
text-shadow: none !important;
}
}