/* ============================================================
   Tekari – Landing Page Styles
   Dark default, Light toggle, Blue accents
   ============================================================ */

:root {
    --bg:           #080d1a;
    --bg-2:         #0d1530;
    --bg-3:         #111d3c;
    --border:       rgba(59, 130, 246, 0.15);
    --text:         #e2e8f0;
    --text-muted:   #64748b;
    --text-light:   #94a3b8;
    --blue:         #3b82f6;
    --blue-dark:    #2563eb;
    --blue-glow:    rgba(59, 130, 246, 0.2);
    --grad:         linear-gradient(135deg, #3b82f6, #6366f1);
    --grad-subtle:  linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.08));
    --radius:       12px;
    --radius-lg:    20px;
    --shadow:       0 4px 24px rgba(0,0,0,0.4);
    --shadow-blue:  0 4px 32px rgba(59,130,246,0.25);
    --transition:   0.2s ease;
}

html.light {
    --bg:           #f8fafc;
    --bg-2:         #ffffff;
    --bg-3:         #f1f5f9;
    --border:       rgba(59, 130, 246, 0.2);
    --text:         #0f172a;
    --text-muted:   #64748b;
    --text-light:   #475569;
    --blue-glow:    rgba(59, 130, 246, 0.1);
    --grad-subtle:  linear-gradient(135deg, rgba(59,130,246,0.05), rgba(99,102,241,0.05));
    --shadow:       0 4px 24px rgba(0,0,0,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: color var(--transition);
    overflow-x: hidden;
    /* Fixes Sternenfeld: bleibt beim Scrollen stehen (background-attachment:fixed),
       der Seiteninhalt scrollt darüber. Nur Ambient-Glows in Blau/Violett – die
       funkelnden ✦ (.sparkle-field) + die blau leuchtenden Drift-Punkte
       (body::before) übernehmen den Stern-Effekt. Die alten statischen weißen
       Punkt-Sterne sind entfernt. Im Light-Mode (html.light) wird das unten entfernt. */
    background-image:
        radial-gradient(ellipse at 18% 12%, rgba(59,130,246,0.16), transparent 52%),
        radial-gradient(ellipse at 85% 22%, rgba(99,102,241,0.14), transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(59,130,246,0.10), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg-2));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Light-Mode: keine Sterne, klarer heller Hintergrund */
html.light body {
    background-image: none;
    background-color: var(--bg);
}

/* ── Typografie ─────────────────────────────────────────── */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--text-light); }

.gradient-text {
    background: linear-gradient(110deg, #3b82f6, #6366f1, #60a5fa, #6366f1, #3b82f6);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes gradientShimmer { to { background-position: 220% center; } }

/* ── Layout ─────────────────────────────────────────────── */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

section { padding: 96px 0; }

/* ── Navigation ─────────────────────────────────────────── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 13, 26, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

html.light nav { background: rgba(248,250,252,0.85); }

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition);
}
.nav-links a:hover { color: var(--text); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 8px 40px rgba(59,130,246,0.4);
}

.btn-ghost {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border);
}
.btn-ghost:hover {
    border-color: var(--blue);
    color: var(--text);
}

.btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

/* Theme Toggle */
.theme-toggle {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-light);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition);
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--text); }

/* Lang Toggle */
.lang-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    letter-spacing: 0.05em;
}
.lang-toggle:hover { border-color: var(--blue); color: var(--text); }

/* ── Hero ─────────────────────────────────────────────────── */
#hero {
    min-height: calc(100vh - 64px); /* 64px = Nav-Höhe */
    display: flex;
    align-items: center;
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#hero .container { width: 100%; }

.hero-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(59,130,246,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad-subtle);
    border: 1px solid var(--border);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--blue);
    margin-bottom: 28px;
}

#hero h1 { margin-bottom: 20px; }

.hero-sub {
    font-size: 1.15rem;
    max-width: 540px;
    margin: 0 auto 40px;
    color: var(--text-light);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-note {
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Features ─────────────────────────────────────────────── */
#features { background: var(--bg-2); }

.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header p {
    margin-top: 12px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.feature-card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.feature-card:hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue-glow), var(--shadow-blue);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--grad-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: 0.9rem; }

/* ── Fokus-Block (Tekari + dein POS) ────────────────────── */
.section-note {
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}
.section-note::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(59,130,246,0.10), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(99,102,241,0.08), transparent 70%);
    pointer-events: none;
}

.note-card {
    position: relative;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 56px 48px;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 8px 60px rgba(59,130,246,0.10);
}

.note-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--blue);
    background: var(--grad-subtle);
    border: 1px solid var(--border);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.note-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--text);
    letter-spacing: -0.01em;
}

.note-lead {
    font-size: 1rem;
    color: var(--text-light);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.note-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: left;
}

.note-col {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 26px;
    transition: border-color var(--transition);
}

.note-col-tekari {
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.04));
    border-color: rgba(59,130,246,0.3);
}

.note-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    flex-wrap: wrap;
}

.note-col-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--grad);
    color: #fff;
    padding: 3px 10px;
    border-radius: 100px;
}
.note-col-tag-muted {
    background: var(--bg-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.note-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.note-col ul li {
    font-size: 0.9rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.note-col-tekari ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px rgba(59,130,246,0.6);
    flex-shrink: 0;
}
.note-col-pos ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .section-note { padding: 64px 0; }
    .note-grid { grid-template-columns: 1fr; }
    .note-card { padding: 36px 24px; }
}

/* ── How it works ─────────────────────────────────────────── */
#wie {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    position: relative;
}

.steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
    opacity: 0.4;
}

.step {
    text-align: center;
    padding: 0 24px;
}

.step-num {
    width: 56px;
    height: 56px;
    background: var(--grad);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-blue);
}

.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.9rem; }

/* ── Pricing ─────────────────────────────────────────────── */
#preise {
    background: transparent;
    border-top: 1px solid var(--border);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.pricing-card {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: baseline;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    transition: border-color var(--transition);
}

.pricing-card.featured {
    border-color: var(--blue);
    box-shadow: var(--shadow-blue);
    background: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, var(--bg-3) 100%);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 100px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.plan-price {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); }

.plan-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.plan-features {
    list-style: none;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-light);
}

.plan-features li::before {
    content: '✓';
    color: var(--blue);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.btn-plan {
    width: 100%;
    justify-content: center;
}

/* ── CTA Banner ──────────────────────────────────────────── */
#cta {
    padding: 80px 0;
}

.cta-box {
    background: var(--grad);
    border-radius: var(--radius-lg);
    padding: 64px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
}

.cta-box h2 { color: #fff; position: relative; }
.cta-box p  { color: rgba(255,255,255,0.8); margin-top: 12px; position: relative; }

.cta-box .btn-cta {
    margin-top: 32px;
    display: inline-flex;
    background: #fff;
    color: var(--blue-dark);
    font-weight: 700;
    padding: 14px 36px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-size: 1rem;
    transition: all var(--transition);
    position: relative;
}
.cta-box .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }

/* ── Footer ──────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border);
    padding: 40px 0;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--text); }

.footer-copy {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Form (registrierung.php) ────────────────────────────── */
.form-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.form-wrap {
    flex: 1;
    padding: 80px 0;
}

.reg-layout {
    display: grid;
    grid-template-columns: minmax(0, 660px) 320px;
    gap: 32px;
    align-items: start;
    max-width: 1020px;
    margin: 0 auto;
}

.form-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    min-width: 0;
}

/* ── Sidebar (Feature-Liste) ──────────────────────────────── */
.reg-sidebar {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    position: sticky;
    top: 88px;
}

.sidebar-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 16px;
}

.sidebar-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.sidebar-features li {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.sidebar-features li::before {
    content: '✓';
    color: var(--blue);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.sidebar-perks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.perk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.perk-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.perk strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 2px;
}
.perk span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: block;
}

.form-title { margin-bottom: 8px; }
.form-subtitle { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 36px; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full { grid-column: 1 / -1; }

label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.02em;
}

label .optional {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}

input, select, textarea {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 11px 14px;
    color: var(--text);
    font-size: 0.9rem;
    width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-glow);
}

input::placeholder { color: var(--text-muted); }

select option { background: var(--bg-3); }

.plan-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.plan-option { display: none; }

.plan-option + label {
    display: block;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--text-light);
    letter-spacing: normal;
}

.plan-option:checked + label {
    border-color: var(--blue);
    background: var(--grad-subtle);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--blue-glow);
}

.plan-label-name { font-weight: 700; font-size: 0.95rem; color: var(--text); display: block; margin-bottom: 4px; }
.plan-label-price { color: var(--blue); font-weight: 600; display: block; }

.form-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

.form-submit {
    margin-top: 28px;
}

.form-legal {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 14px;
    line-height: 1.6;
}
.form-legal a { color: var(--blue); text-decoration: none; }

.paypal-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(0, 112, 186, 0.08);
    border: 1px solid rgba(0, 112, 186, 0.25);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: var(--text-light);
}
.paypal-info svg { flex-shrink: 0; margin-top: 2px; }

.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 0.88rem;
    margin-bottom: 24px;
    border: 1px solid;
}
.alert-error   { background: rgba(239,68,68,0.08);   border-color: rgba(239,68,68,0.3);   color: #f87171; }
.alert-success { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.3);   color: #4ade80; }

.field-error {
    font-size: 0.78rem;
    color: #f87171;
    margin-top: 2px;
}

input.invalid, select.invalid { border-color: rgba(239,68,68,0.5); }

/* ── Impressum ────────────────────────────────────────────── */
.legal-page { padding: 80px 0; }

.legal-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    max-width: 800px;
    margin: 0 auto;
}

.legal-card h1 { font-size: 1.8rem; margin-bottom: 8px; }
.legal-card h2 { font-size: 1.15rem; margin: 32px 0 10px; }
.legal-card p  { font-size: 0.9rem; margin-bottom: 12px; }
.legal-card a  { color: var(--blue); }

.legal-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.legal-tab {
    flex: 1;
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted);
    transition: all var(--transition);
}

.legal-tab.active {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
    .reg-layout {
        grid-template-columns: 1fr;
        max-width: 660px;
    }
    .reg-sidebar { position: static; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }

    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: 1; }
    .plan-selector { grid-template-columns: 1fr; }
    .form-card { padding: 28px 20px; }

    .steps::before { display: none; }

    .cta-box { padding: 40px 24px; }

    .footer-inner { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }

    .legal-card { padding: 28px 20px; }
}

@media (max-width: 480px) {
    section { padding: 64px 0; }
}

/* ══ Hero-Animationen (P7b – mikuni.dev-Stil, bestehende Blau-Palette) ══════ */
#hero { isolation: isolate; }

/* Ambient-Drift-Layer: einige weiche, leuchtende Sternpunkte, die ganz langsam
   driften – fixed im Viewport, liegt hinter dem Inhalt. Nur Dark-Mode. */
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(2px 2px at 22% 32%, rgba(96,165,250,0.9), transparent),
        radial-gradient(2px 2px at 62% 68%, rgba(129,140,248,0.85), transparent),
        radial-gradient(1.6px 1.6px at 82% 22%, rgba(147,197,253,0.9), transparent),
        radial-gradient(1.6px 1.6px at 36% 86%, rgba(99,102,241,0.85), transparent),
        radial-gradient(1.6px 1.6px at 70% 44%, rgba(96,165,250,0.8), transparent);
    opacity: 0.55;
    animation: starDrift 22s ease-in-out infinite alternate;
}
html.light body::before { display: none; }
@keyframes starDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(22px, -28px); }
}

/* Sparkle-Field: funkelnde ✦ über die ganze Seite, fixed im Viewport ("bleibt
   stehen, Text scrollt drüber"). Pro Sparkle eigene Position/Verzögerung. */
.sparkle-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
html.light .sparkle-field { opacity: 0.35; }
.sparkle-field .sparkle {
    position: absolute;
    opacity: 0;
    color: #93c5fd;
    text-shadow: 0 0 12px currentColor;
    animation: twinkle 3.6s ease-in-out infinite;
    will-change: transform, opacity;
}
.sparkle-field .sparkle:nth-child(1)  { top:  6%; left:  8%; color:#60a5fa; font-size:1.3rem; animation-delay:0s;   }
.sparkle-field .sparkle:nth-child(2)  { top: 12%; left: 33%; color:#818cf8; font-size:0.9rem; animation-delay:1.2s; animation-duration:3s;   }
.sparkle-field .sparkle:nth-child(3)  { top:  5%; left: 60%; color:#93c5fd; font-size:1.1rem; animation-delay:0.6s; animation-duration:4s;   }
.sparkle-field .sparkle:nth-child(4)  { top: 18%; left: 80%; color:#60a5fa; font-size:1.4rem; animation-delay:2s;   }
.sparkle-field .sparkle:nth-child(5)  { top: 26%; left: 92%; color:#818cf8; font-size:0.85rem;animation-delay:0.8s; animation-duration:3s;   }
.sparkle-field .sparkle:nth-child(6)  { top: 35%; left:  5%; color:#60a5fa; font-size:1rem;   animation-delay:1.5s; animation-duration:3s;   }
.sparkle-field .sparkle:nth-child(7)  { top: 42%; left: 24%; color:#93c5fd; font-size:1.2rem; animation-delay:2.3s; animation-duration:4s;   }
.sparkle-field .sparkle:nth-child(8)  { top: 48%; left: 88%; color:#818cf8; font-size:0.95rem;animation-delay:0.4s; animation-duration:4s;   }
.sparkle-field .sparkle:nth-child(9)  { top: 31%; left: 49%; color:#60a5fa; font-size:1rem;   animation-delay:0.3s; animation-duration:4.5s; }
.sparkle-field .sparkle:nth-child(10) { top: 55%; left: 13%; color:#93c5fd; font-size:1.3rem; animation-delay:1.8s; }
.sparkle-field .sparkle:nth-child(11) { top: 60%; left: 39%; color:#818cf8; font-size:0.85rem;animation-delay:0.7s; animation-duration:3s;   }
.sparkle-field .sparkle:nth-child(12) { top: 65%; left: 73%; color:#60a5fa; font-size:1.1rem; animation-delay:2.5s; animation-duration:3s;   }
.sparkle-field .sparkle:nth-child(13) { top: 72%; left: 95%; color:#93c5fd; font-size:1rem;   animation-delay:0s;   }
.sparkle-field .sparkle:nth-child(14) { top: 78%; left:  6%; color:#818cf8; font-size:1.4rem; animation-delay:1.3s; animation-duration:4s;   }
.sparkle-field .sparkle:nth-child(15) { top: 82%; left: 31%; color:#60a5fa; font-size:1rem;   animation-delay:2.8s; }
.sparkle-field .sparkle:nth-child(16) { top: 86%; left: 60%; color:#93c5fd; font-size:1.05rem;animation-delay:0.9s; animation-duration:4s;   }
.sparkle-field .sparkle:nth-child(17) { top: 90%; left: 82%; color:#818cf8; font-size:1.2rem; animation-delay:1.6s; }
.sparkle-field .sparkle:nth-child(18) { top: 94%; left: 18%; color:#60a5fa; font-size:0.85rem;animation-delay:2.2s; animation-duration:3s;   }
@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1)   rotate(180deg); }
}

/* Seiteninhalt liegt ÜBER dem fixen Sternenfeld (das bei z-index:0 fixed sitzt) */
section, footer { position: relative; z-index: 1; }

/* (alt) zentriertes Sternenfeld – ersetzt durch fixes Sternenfeld auf body */
.hero-stars, .hero-stars2 {
    position: absolute; top: 0; left: 50%; width: 2px; height: 2px;
    border-radius: 50%; pointer-events: none; z-index: 0;
    transform: translateX(-50%);
    display: none;   /* nicht mehr genutzt */
}
.hero-stars  { box-shadow: 732px 309px rgba(255,255,255,0.9), -241px 346px rgba(255,255,255,0.9), -418px 191px rgba(255,255,255,0.9), -173px 192px rgba(255,255,255,0.9), 17px 153px rgba(255,255,255,0.9), 173px 390px rgba(255,255,255,0.9), -59px 486px rgba(255,255,255,0.9), -89px 341px rgba(255,255,255,0.9), -460px 527px rgba(255,255,255,0.9), -196px 9px rgba(255,255,255,0.9), -196px 439px rgba(255,255,255,0.9), 632px 166px rgba(255,255,255,0.9), 49px 201px rgba(255,255,255,0.9), 572px 16px rgba(255,255,255,0.9), -601px 613px rgba(255,255,255,0.9), -256px 432px rgba(255,255,255,0.9), 451px 35px rgba(255,255,255,0.9), -272px 98px rgba(255,255,255,0.9), -266px 471px rgba(255,255,255,0.9), 588px 503px rgba(255,255,255,0.9), 676px 567px rgba(255,255,255,0.9), 100px 594px rgba(255,255,255,0.9), -567px 311px rgba(255,255,255,0.9), -104px 153px rgba(255,255,255,0.9), -87px 515px rgba(255,255,255,0.9), 39px 22px rgba(255,255,255,0.9), -171px 216px rgba(255,255,255,0.9), -70px 346px rgba(255,255,255,0.9), -304px 603px rgba(255,255,255,0.9), 724px 476px rgba(255,255,255,0.9), 280px 41px rgba(255,255,255,0.9), -168px 594px rgba(255,255,255,0.9), 309px 351px rgba(255,255,255,0.9), -728px 489px rgba(255,255,255,0.9), 584px 497px rgba(255,255,255,0.9), -623px 135px rgba(255,255,255,0.9), -126px 604px rgba(255,255,255,0.9), -352px 271px rgba(255,255,255,0.9), -647px 236px rgba(255,255,255,0.9), -68px 464px rgba(255,255,255,0.9), 631px 60px rgba(255,255,255,0.9), 659px 113px rgba(255,255,255,0.9), -430px 170px rgba(255,255,255,0.9), 130px 139px rgba(255,255,255,0.9), 447px 431px rgba(255,255,255,0.9), 556px 389px rgba(255,255,255,0.9), 168px 389px rgba(255,255,255,0.9), 433px 587px rgba(255,255,255,0.9), 131px 619px rgba(255,255,255,0.9), -425px 539px rgba(255,255,255,0.9); animation: starTwinkle 3.6s ease-in-out infinite alternate; opacity: 0.6; }
.hero-stars2 { width: 1px; height: 1px; box-shadow: 732px 309px rgba(255,255,255,0.9), -241px 346px rgba(255,255,255,0.9), -418px 191px rgba(255,255,255,0.9), -173px 192px rgba(255,255,255,0.9), 17px 153px rgba(255,255,255,0.9), 173px 390px rgba(255,255,255,0.9), -59px 486px rgba(255,255,255,0.9), -89px 341px rgba(255,255,255,0.9), -460px 527px rgba(255,255,255,0.9), -196px 9px rgba(255,255,255,0.9), -196px 439px rgba(255,255,255,0.9), 632px 166px rgba(255,255,255,0.9), 49px 201px rgba(255,255,255,0.9), 572px 16px rgba(255,255,255,0.9), -601px 613px rgba(255,255,255,0.9), -256px 432px rgba(255,255,255,0.9), 451px 35px rgba(255,255,255,0.9), -272px 98px rgba(255,255,255,0.9), -266px 471px rgba(255,255,255,0.9), 588px 503px rgba(255,255,255,0.9), 676px 567px rgba(255,255,255,0.9), 100px 594px rgba(255,255,255,0.9), -567px 311px rgba(255,255,255,0.9), -104px 153px rgba(255,255,255,0.9), -87px 515px rgba(255,255,255,0.9), 39px 22px rgba(255,255,255,0.9), -171px 216px rgba(255,255,255,0.9), -70px 346px rgba(255,255,255,0.9), -304px 603px rgba(255,255,255,0.9), 724px 476px rgba(255,255,255,0.9); animation: starTwinkle2 5.4s ease-in-out infinite alternate; opacity: 0.4; }
/* Sterne stehen fix – nur sanftes, versetztes Funkeln (zwei Raten = Schimmer-Tiefe) */
@keyframes starTwinkle  { from { opacity: 0.30; } to { opacity: 0.75; } }
@keyframes starTwinkle2 { from { opacity: 0.18; } to { opacity: 0.55; } }

/* Bewegtes blaues Spotlight über dem Text */
.hero-glow { animation: spotlightDrift 14s ease-in-out infinite alternate; z-index: 0; }
@keyframes spotlightDrift {
    0%   { transform: translateX(-50%) translate(-60px, 0)   scale(1);    opacity: 0.85; }
    50%  { transform: translateX(-50%) translate(50px, 18px) scale(1.12); opacity: 1; }
    100% { transform: translateX(-50%) translate(70px, -10px) scale(1.05); opacity: 0.9; }
}

/* Hero-Inhalt über den Sternen + Lade-Animation (gestaffelt) */
#hero .container { position: relative; z-index: 1; }
#hero .hero-badge, #hero h1, #hero .hero-sub, #hero .hero-actions, #hero .hero-note {
    opacity: 0; animation: heroFly 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}
#hero .hero-badge   { animation-delay: 0.05s; }
#hero h1            { animation-delay: 0.20s; }
#hero .hero-sub     { animation-delay: 0.36s; }
#hero .hero-actions { animation-delay: 0.52s; }
#hero .hero-note    { animation-delay: 0.66s; }
/* Text gleitet/fliegt von links über das statische Sternenfeld herein */
@keyframes heroFly {
    from { opacity: 0; transform: translateX(-60px) translateY(6px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* sanfter Schwebe-Effekt auf dem Gradient-Wort */
.gradient-text { display: inline-block; animation: wordFloat 5s ease-in-out infinite, gradientShimmer 7s linear infinite; }
@keyframes wordFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Respektiert reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .hero-glow, .gradient-text, body::before, .sparkle-field .sparkle,
    #hero .hero-badge, #hero h1, #hero .hero-sub, #hero .hero-actions, #hero .hero-note {
        animation: none;
    }
    #hero .hero-badge, #hero h1, #hero .hero-sub, #hero .hero-actions, #hero .hero-note { opacity: 1; }
    .sparkle-field .sparkle { opacity: 0.5; }
}

/* ── UI-3: Checkboxen systemweit als Apple-Style Toggle-Slider ──────────────
   Reine CSS-Lösung (appearance:none) – KEINE Markup-Änderung nötig. Radios
   bleiben Radios. !important, weil manche Checkboxen inline width gesetzt haben.
   Escape-Hatch: class="no-toggle" lässt eine Checkbox normal. */
input[type="checkbox"]:not(.no-toggle) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    display: inline-block;
    width: 42px !important;
    min-width: 42px;
    height: 24px !important;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 999px;
    background: var(--border, #cbd5e1);
    box-shadow: none !important;
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 auto;
    transition: background 0.2s ease;
}
input[type="checkbox"]:not(.no-toggle)::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: transform 0.2s ease;
}
input[type="checkbox"]:not(.no-toggle):checked { background: var(--primary, #3b82f6); }
input[type="checkbox"]:not(.no-toggle):checked::before { transform: translateX(18px); }
input[type="checkbox"]:not(.no-toggle):focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; }
input[type="checkbox"]:not(.no-toggle):disabled { opacity: 0.5; cursor: not-allowed; }

/* ── UI-4: Lange User-Texte global umbrechen ────────────────────────────────
   Lange ununterbrochene Eingaben (Beschreibung/Seriennr. ohne Leerzeichen)
   sprengten das Layout nach rechts → horizontaler Scroll. Jetzt wrappt der Text
   überall (Werkstatt/Endkunde/Admin), kein Seitwärts-Scrollen mehr. */
body { overflow-wrap: break-word; }
dd, td, th, p, li, blockquote, dl, .lead { overflow-wrap: anywhere; }

/* Sticky-Topbar: Banner + Nav zusammen oben fixiert (Banner immer sichtbar).
   nav hat eine eigene position:sticky – innerhalb des Topbars auf static, sonst
   doppeltes Sticky-Verhalten. */
.tk-topbar { position: sticky; top: 0; z-index: 100; }
.tk-topbar nav { position: static; }