/* ================================================================
   Startseite – Hero mit zwei Einstiegen (Kanzlei / Softwarehersteller)
   ================================================================ */
.hero--doors { min-height: 0; padding: 130px 0 72px; }
.hero--doors .hero-inner { display: block; }
.hero-doors-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.hero-doors-head .hero-badge { animation: fadeInUp 0.6s ease both; }
.hero-doors-head .hero-title { margin: 18px auto 16px; max-width: 900px; text-wrap: balance; }
.hero-doors-head .hero-desc { max-width: 720px; margin: 0 auto; }
.hero-doors-head .hero-desc strong { color: var(--text); }
.hero-grad {
    background: linear-gradient(92deg, #ff9400 0%, #ff6b00 55%, #ff5fa2 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.door-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    position: relative; z-index: 1;
    animation: fadeInUp 0.7s 0.15s ease both;
}
.door {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px; text-align: left;
    padding: 34px 34px 30px; border-radius: 24px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.door-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 5px 12px; border-radius: 50px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--primary-bg); color: var(--brand-orange-dark); border: 1px solid var(--primary-border);
}
.door-eyebrow svg { width: 11px; height: 11px; }
.door h2 {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.75rem; font-weight: 800;
    line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin: 0;
}
.door h2 small { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin-top: 6px; letter-spacing: 0; }
.door > p { font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.door-list { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.door-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--text); line-height: 1.5; }
.door-list li svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 4px; color: #16a34a; }
.door-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.door-price { font-size: 0.8rem; color: var(--text-faint); }

/* Kanzlei-Tür: dunkel, KI-Look */
.door--dark {
    background: #0b1020;
    background-image:
        radial-gradient(ellipse 70% 60% at 85% 0%, rgba(255,148,0,0.28), transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(79,90,210,0.35), transparent 60%),
        linear-gradient(180deg, #0b1020, #141b36);
    border-color: rgba(255,148,0,0.35);
    box-shadow: 0 20px 60px rgba(11,16,32,0.35), 0 0 0 1px rgba(255,148,0,0.08);
}
.door--dark::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
}
.door--dark > * { position: relative; z-index: 1; }
.door--dark .door-eyebrow { background: rgba(255,148,0,0.16); color: #ffb347; border-color: rgba(255,148,0,0.4); }
.door--dark h2 { color: #fff; }
.door--dark h2 small { color: rgba(255,255,255,0.6); }
.door--dark > p { color: rgba(255,255,255,0.78); }
.door--dark .door-list li { color: rgba(255,255,255,0.9); }
.door--dark .door-list li svg { color: #86efac; }
.door--dark .door-price { color: rgba(255,255,255,0.5); }
.door--dark .btn-primary { box-shadow: 0 8px 28px rgba(255,148,0,0.45); }
.door--dark .btn-outline-white:hover { background: rgba(255,255,255,0.08); }
.door--dark:hover { box-shadow: 0 28px 70px rgba(11,16,32,0.45), 0 0 40px rgba(255,148,0,0.18); }

.hero-doors-foot {
    margin-top: 26px; text-align: center;
    font-size: 0.86rem; color: var(--text-muted);
    animation: fadeInUp 0.6s 0.35s ease both;
}
.hero-doors-foot a { color: var(--brand-orange-dark); font-weight: 600; text-decoration: none; }
.hero-doors-foot a:hover { text-decoration: underline; }
.hero--doors .hero-trust { text-align: center; margin-top: 18px; }

@media (max-width: 900px) {
    .hero--doors { padding-top: 110px; }
    .door-grid { grid-template-columns: 1fr; }
    .door { padding: 26px 22px 24px; }
    .door h2 { font-size: 1.5rem; }
    .door-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .door, .door-grid, .hero-doors-foot, .hero-doors-head .hero-badge { animation: none; transition: none; }
}