/* ══════════════════════════════════════════════════════════
   KONTAKT.CSS – Greenstein Design (Kontaktseite)
   Nur seitenspezifische Styles. Globale Styles in global.css.
   ══════════════════════════════════════════════════════════ */

/* ── Body Flex für Mini-Footer unten ── */
body { display: flex; flex-direction: column; }

/* ── CONTACT GRID ── */
.contact-grid {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px;
    align-items: start;
}

/* ── FORM CARD ── */
.contact-form-card {
    background: rgba(15,15,15,0.8);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl); padding: 44px 40px;
    position: relative; overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.contact-form-card::before {
    content: ''; position: absolute; top: -1px; left: 40px; right: 40px; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}
.contact-form-card .form-hint { margin-bottom: 24px; }

/* ── SUBMIT BUTTON ── */
.btn-submit {
    width: 100%; padding: 16px 32px;
    background: var(--accent); color: #000;
    font-weight: 700; font-size: 0.95rem; border-radius: 100px;
    border: none; cursor: pointer; transition: var(--transition);
    font-family: var(--font-main);
    box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 15%, transparent);
}
.btn-submit:hover {
    background: #78ff33; transform: translateY(-2px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── SUCCESS STATE ── */
.form-success { display: none; text-align: center; padding: 40px 0; }
.form-success.visible { display: block; animation: fadeIn 0.4s ease; }
.form-success .success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 85%, black));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px; font-size: 1.8rem; color: #000;
    box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 25%, transparent);
}
.form-success h3 {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
    margin-bottom: 10px;
}
.form-success p {
    color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7;
    max-width: 360px; margin: 0 auto 28px;
}
.btn-back-home {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: 100px;
    color: var(--text-primary); font-weight: 600; font-size: 0.875rem;
    transition: var(--transition);
}
.btn-back-home:hover { border-color: var(--border-light); background: rgba(255,255,255,0.06); }

/* ── CONTACT INFO SIDEBAR ── */
.contact-info { display: flex; flex-direction: column; gap: 16px; }

/* ── INFO LINKS (Telefon/Email) ── */
.info-link {
    display: flex; flex-direction: column; padding: 12px 0;
    border-bottom: 1px solid var(--border); transition: var(--transition);
}
.info-link:last-of-type { border-bottom: none; }
.info-link:hover .info-link-value { color: var(--accent); }
.info-link-label {
    font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.08em; font-weight: 500; margin-bottom: 2px;
}
.info-link-value {
    font-family: var(--font-display); font-size: 1rem; font-weight: 600;
    color: var(--text-primary); transition: color 0.25s ease;
}

/* ── ADDRESS ── */
.info-address {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6;
}
/* ── CTA CARD ── */
.cta-card {
    border-color: var(--border-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 3%, transparent), color-mix(in srgb, var(--accent) 1%, transparent));
    position: relative; overflow: hidden;
}
.cta-card::before {
    content: ''; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 25%, transparent), transparent);
}
.cta-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.cta-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.btn-funnel {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; background: var(--accent); color: #000;
    font-weight: 700; font-size: 0.85rem; border-radius: 100px;
    transition: var(--transition);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
}
.btn-funnel:hover {
    background: #78ff33; transform: translateY(-1px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-analyse {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 700; font-size: 0.85rem; border-radius: 100px;
    transition: var(--transition);
}
.btn-analyse:hover {
    background: var(--accent); color: #000;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── RESPONSIVE (Kontakt-spezifisch) ── */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
    .contact-form-card { padding: 32px 24px; }
    .page-header h1 { font-size: 1.8rem; }
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════════════════ */

[data-theme="light"] .contact-form-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .contact-form-card::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}

[data-theme="light"] .btn-back-home {
    background: #f5f6f8;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .btn-back-home:hover {
    background: #eef0f3;
    border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .cta-card {
    background: color-mix(in srgb, var(--accent) 3%, transparent);
    border-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
[data-theme="light"] .cta-card::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
}

[data-theme="light"] .info-link {
    border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .btn-submit {
    color: white;
}
[data-theme="light"] .btn-submit:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, black), var(--accent));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="light"] .btn-funnel {
    color: white;
}
[data-theme="light"] .btn-funnel:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, black), var(--accent));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

[data-theme="light"] .btn-analyse:hover {
    color: white;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, black), var(--accent));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}