/* ── CounterGuide provisorische Website (App-Design-Style) ────────────── */
:root {
    --bg-primary: #0F1115;
    --bg-secondary: #14171E;
    --bg-tertiary: #1E232F;
    --accent: #FF6B00;
    --accent-hover: #FF8C38;
    --border: #262B37;
    --text-primary: #F0F2F5;
    --text-secondary: #A0AAB8;
    --text-muted: #5D6878;
    --error: #E53935;
    --radius: 16px;
    --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--font);
    background: radial-gradient(circle at 80% 15%, rgba(255,107,0,.08) 0%, rgba(15,17,21,0) 50%),
                linear-gradient(135deg,#0B0C10 0%,#14171E 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height:100vh;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:700; letter-spacing:-.02em; line-height:1.2; }

/* ── GATE ─────────────────────────────────────────────────────────────── */
.gate {
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 50% 30%, rgba(255,107,0,.12) 0%, rgba(15,17,21,0) 60%), #0B0C10;
    z-index:999;
}
.gate-card {
    width:min(92vw,380px); padding:36px 32px; text-align:center;
    background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.gate-logo { width:72px; height:72px; margin:0 auto 12px; }
.gate-title { font-size:26px; margin-bottom:4px; }
.gate-sub { color:var(--text-secondary); font-size:14px; line-height:1.5; margin-bottom:22px; }
.gate-input {
    width:100%; padding:14px; border-radius:10px; border:1px solid var(--border);
    background:var(--bg-tertiary); color:var(--text-primary); font-size:15px; outline:none; text-align:center;
    transition:border-color .2s;
}
.gate-input:focus { border-color:var(--accent); }
.gate-btn {
    width:100%; margin-top:14px; padding:14px; border:none; border-radius:10px;
    background:var(--accent); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
    transition:background .2s;
}
.gate-btn:hover { background:var(--accent-hover); }
.gate-error { color:var(--error); font-size:13px; min-height:18px; margin-top:10px; font-weight:600; }
.gate-foot { color:var(--text-muted); font-size:12px; margin-top:20px; }

/* ── NAVBAR ───────────────────────────────────────────────────────────── */
.navbar {
    position:sticky; top:0; padding:0 24px; height:72px;
    display:flex; align-items:center;
    background:rgba(16,19,24,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
    z-index:100;
}
.nav-container { max-width:1100px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:.05em; text-transform:uppercase; }
.nav-logo img { height:34px; }
.nav-links { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.nav-links a { color:var(--text-secondary); font-size:14px; font-weight:600; }
.nav-links a:hover { color:var(--text-primary); }

/* ── HERO (CSS-Mockup statt echtes Screenshot) ────────────────────────── */
.hero { padding:80px 24px 60px; }
.hero-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.badge {
    align-self:flex-start; background:rgba(255,107,0,.15); color:var(--accent);
    border:1px solid rgba(255,107,0,.3); padding:6px 14px; border-radius:50px; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em;
}
.hero-title { font-size:48px; margin:18px 0; }
.hero-desc { color:var(--text-secondary); font-size:17px; line-height:1.6; }
.gradient { background:linear-gradient(135deg,#F0F2F5 30%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-store { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

.store-badge {
    display:inline-block; padding:12px 24px; border:1px solid var(--border);
    border-radius:12px; background:#000; color:#fff; font-weight:700; font-size:15px;
}
.hero-mock { display:flex; justify-content:center; }
.phone-mockup {
    width:270px; height:540px; background:#000; border:10px solid #242933; border-radius:42px;
    box-shadow:0 16px 40px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.05); position:relative; overflow:hidden;
}
.phone-mockup::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:20px; background:#242933; border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.mock-screen { position:absolute; top:34px; left:14px; right:14px; bottom:14px; padding:16px; background:var(--bg-primary); border-radius:18px; }
.mock-line { display:block; height:12px; border-radius:6px; background:#2A3140; margin-bottom:12px; }
.mock-line.orange { background:var(--accent); }
.w80{width:80%} .w60{width:60%} .w90{width:90%}
.mock-cards { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.mock-card { height:80px; border-radius:12px; background:var(--bg-tertiary); border:1px solid var(--border); }
.mock-card.dim { opacity:.55; }

/* ── FEATURES ─────────────────────────────────────────────────────────── */
.features { padding:60px 24px; background:var(--bg-secondary); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-head { max-width:720px; margin:0 auto 40px; text-align:center; }
.section-head h2 { font-size:32px; margin-bottom:12px; }
.section-head p { color:var(--text-secondary); font-size:15px; line-height:1.6; }
.features-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.feature-card {
    padding:24px; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius);
    transition:border-color .2s, transform .2s;
}
.feature-card:hover { border-color:var(--accent); transform:translateY(-4px); }
.feature-card h3 { font-size:18px; margin-bottom:8px; color:var(--accent); }
.feature-card p { color:var(--text-secondary); font-size:14px; line-height:1.5; }

/* ── CONTACT ──────────────────────────────────────────────────────────── */
.contact { padding:60px 24px; }
.contact-btn {
    display:inline-block; margin-top:20px; padding:14px 28px; border-radius:12px;
    background:var(--accent); color:#fff; font-weight:700; font-size:15px;
}
.contact-btn:hover { background:var(--accent-hover); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.footer { text-align:center; padding:40px 24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; line-height:1.7; }
.footer-links { display:flex; justify-content:center; gap:24px; margin-bottom:16px; }
.footer-links a { color:var(--text-secondary); font-weight:600; }
.footer-links a:hover { color:var(--text-primary); }

/* ── Impressum / Datenschutz Seiten ───────────────────────────────────── */
.legal { max-width:820px; margin:0 auto; padding:60px 24px 80px; }
.legal h1 { font-size:30px; margin-bottom:8px; }
.legal .legal-meta { color:var(--text-muted); font-size:13px; margin-bottom:30px; }
.legal h2 { font-size:20px; margin:26px 0 10px; color:var(--accent); }
.legal p, .legal li { color:var(--text-secondary); font-size:15px; line-height:1.7; }
.legal ul { padding-left:22px; }
.legal a { color:var(--accent); }
.legal .back { display:inline-block; margin-bottom:24px; color:var(--text-secondary); font-weight:600; }

@media (max-width:760px){
    .hero-grid { grid-template-columns:1fr; }
    .hero-title { font-size:36px; }
    .hero-mock { display:none; }
}