/* Grundkonfiguration */
:root {
    --dark-slate: #1a1c1e;
    --dark-bg: #121416;
    --copper: #b87333;
    --silver: #e5e4e2;
    --text-light: #f0f0f0;
    --text-dim: #a0a0a0;
    --phi: 1.618;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 240px; }
body { background-color: var(--dark-bg); color: var(--text-light); font-family: 'Inter', sans-serif; margin: 0; line-height: var(--phi); overflow-x: hidden; }

/* Überschriften */
h1, h2, h3 { font-family: 'Orbitron', sans-serif; text-transform: uppercase; margin: 0; }
h1 { letter-spacing: 5px; word-spacing: 12px; font-weight: 700; color: var(--silver); }
h2 { color: var(--copper); font-size: 2rem; margin-bottom: 3.5rem; border-left: 4px solid var(--copper); padding-left: 1.5rem; letter-spacing: 3px; }

.container { width: 90%; max-width: 1250px; margin: 0 auto; }

/* Header & Nav */
header { background-color: rgba(26, 28, 30, 0.98); border-bottom: 1px solid rgba(184, 115, 51, 0.3); padding: calc(0.4rem * var(--phi)) 0; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(15px); }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo { height: 180px; width: auto; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.7)); }
nav ul { list-style: none; display: flex; gap: calc(1.5rem * var(--phi)); margin: 0; padding: 0; }
nav a { color: var(--silver); text-decoration: none; font-size: 0.9rem; letter-spacing: 1.5px; text-transform: uppercase; transition: var(--transition); }
nav a:hover { color: var(--copper); }

/* Hero */
.hero { height: 75vh; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at center, #1e2124 0%, var(--dark-bg) 100%); }
.divider { height: 2px; width: 120px; background: linear-gradient(90deg, transparent, var(--copper), transparent); margin: 2rem auto; }
.hero-subline { color: var(--text-dim); font-size: 1.2rem; margin-bottom: 3rem; }
.btn-primary { display: inline-block; padding: 1.2rem 2.8rem; border: 1px solid var(--copper); color: var(--copper); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: var(--transition); }
.btn-primary:hover { background: var(--copper); color: var(--dark-slate); }

/* Services */
.section { padding: calc(5rem * var(--phi)) 0; }
.services-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; width: 100%; }
.service-card { background: #1e2124; padding: 2.5rem; border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); flex: 0 1 380px; min-width: 320px; display: flex; flex-direction: column; }

/* FIX FÜR DIE I-T-K ICONS */
.card-icon { font-family: 'Orbitron', sans-serif; color: var(--copper); font-size: 3.5rem; font-weight: 700; opacity: 0.25; margin-bottom: 0.5rem; }

.service-card h3 { color: var(--copper); font-size: 1.1rem; margin-bottom: 1.5rem; min-height: 3rem; display: flex; align-items: center; }
.service-card ul { list-style: none; padding: 0; flex-grow: 1; margin: 0; }
.service-card li { padding: 0.6rem 0; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.95rem; }

/* APK DOWNLOAD BEREICH */
.service-cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dotted rgba(184, 115, 51, 0.3); }
.cta-desc { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.2rem; line-height: 1.4; }
.btn-download { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.8rem; border: 1px solid var(--copper); color: var(--copper); text-decoration: none; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 1px; transition: var(--transition); text-transform: uppercase; }
.btn-download:hover { background: var(--copper); color: var(--dark-bg); }

/* Über mich & Kontakt */
.bg-alt { background-color: var(--dark-slate); }
.about-text { max-width: 850px; color: var(--text-dim); }

.contact-grid-main { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; }
.itk-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: var(--copper); }
input, textarea, select { background: #1e2124; border: 1px solid rgba(255,255,255,0.1); padding: 1rem; color: #fff; width: 100%; }

.contact-sidebar { display: flex; flex-direction: column; gap: 3rem; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 3rem; }
.sidebar-item .label { display: block; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: var(--copper); margin-bottom: 0.5rem; text-transform: uppercase; }
.sidebar-text { color: var(--text-dim); margin: 0; }
.link-copper { color: var(--copper); text-decoration: none; transition: var(--transition); }
.link-copper:hover { color: var(--silver); }

/* Footer */
footer { padding: 4rem 0; background: #0d0e10; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; color: var(--text-dim); }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-nav a { color: var(--text-dim); text-decoration: none; margin-left: 2rem; transition: var(--transition); }
.footer-nav a:hover { color: var(--copper); }

@media (max-width: 900px) {
    .header-content { flex-direction: column; text-align: center; gap: 1.5rem; }
    .logo { height: 130px; }
    .contact-grid-main { grid-template-columns: 1fr; }
    .contact-sidebar { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 3rem; }
}