/* ========================= 3D HOLOGRAMM – KONTAKT ========================= */
.contact-card { position: relative; overflow: hidden; max-width: 900px; margin: 2rem auto; padding: 2rem; background: rgba(10,10,10,.45); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-radius: 18px; box-shadow: 0 0 35px rgba(0,180,255,.35), inset 0 0 35px rgba(150,0,255,.35); color: #fff; }

.contact-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 2px, transparent 3px, transparent 6px); animation: contactScan 6s linear infinite; z-index: -1; }
@keyframes contactScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

.contact-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 30% 40%, rgba(255,0,255,.35), transparent 70%); filter: blur(55px); animation: contactGlow 8s ease-in-out infinite; z-index: -1; }
@keyframes contactGlow { 0%,100% { opacity: .35; transform: translateX(0); } 50% { opacity: .75; transform: translateX(35px); } }

/* ========================= HEADLINES & TEXT ========================= */
.contact-card h1 { font-size: 2rem; margin-bottom: 1rem; text-align: center; color: #00d1ff; text-shadow: 0 0 12px rgba(0,200,255,.8), 0 0 25px rgba(150,0,255,.6); position: relative; z-index: 5; }
.contact-intro { opacity: .9; margin-bottom: 15px; position: relative; z-index: 5; }

/* ========================= FORMULAR ========================= */
.contact-form { display: flex; flex-direction: column; gap: 15px; position: relative; z-index: 5; }
.contact-form input, .contact-form textarea { padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; font-size: 1rem; transition: .25s ease; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #00c8ff; box-shadow: 0 0 12px rgba(0,200,255,.6), 0 0 25px rgba(150,0,255,.4); }

/* ========================= BUTTON ========================= */
.contact-form button { padding: 12px; border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer; background: linear-gradient(45deg,#008cff,#00ffaa); color: #000; box-shadow: 0 0 15px rgba(0,200,255,.6), 0 0 25px rgba(150,0,255,.4); transition: .25s ease; }
.contact-form button:hover { filter: brightness(1.15); transform: translateY(-2px); }

/* ========================= STATUS ========================= */
.success-msg { color: #00ff7f; font-weight: bold; text-shadow: 0 0 10px rgba(0,255,127,.6); }
.error-msg { color: #ff5555; font-weight: bold; text-shadow: 0 0 10px rgba(255,85,85,.6); }

.hp-field { display: none; }

/* ========================= MOBILE ========================= */
@media (max-width: 768px) { .contact-card { padding: 1.5rem; border-radius: 14px; } }