/* Elospeed Startseite - ein Stylesheet für EN und DE */
:root { --bg:#121315; --bg-2:#18191c; --panel:#1f2023; --line:#2c2e32; --text:#e8e8e8; --muted:#9a9ca1; --link:#56b4e9; --accent:#3ddc84; --dj:#cc79a7; --net:#56b4e9; --elec:#ffb347; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.6; }
a { color:var(--link); }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1000px; margin:0 auto; padding:0 20px; }
header.top { border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; height:60px; }
header.top .brand { font-weight:700; color:var(--text); text-decoration:none; }
header.top .lang { margin-left:auto; color:var(--muted); font-size:15px; text-decoration:none; }
.hero { padding-top:56px; padding-bottom:24px; }
.hero h1 { font-size:clamp(32px,5vw,46px); margin:0 0 8px; line-height:1.15; }
.hero p { color:var(--muted); margin:0; max-width:640px; }
section { padding:32px 0; }
section h2 { font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 16px; color:var(--muted); display:flex; align-items:center; gap:10px; }
section h2::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); }
section.dj h2::before { background:var(--dj); }
section.net h2::before { background:var(--net); }
section.elec h2::before { background:var(--elec); }
.project > * { min-width:0; }
.project { display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; }
.project img { border-radius:8px; border:1px solid var(--line); }
.project h3 { margin:0 0 6px; font-size:24px; }
.project p { margin:0 0 14px; color:var(--muted); }
.project .tags { font-size:14px; color:var(--muted); margin-bottom:16px; }
.btn { display:inline-block; background:var(--accent); color:#0c0d0e; font-weight:700; text-decoration:none; padding:9px 18px; border-radius:8px; }
.btn:hover { color:#0c0d0e; filter:brightness(1.1); }
footer p { margin:0 0 8px; }
footer { border-top:1px solid var(--line); margin-top:32px; padding:24px 0 40px; color:var(--muted); font-size:14px; }
@media (max-width:760px) { .project { grid-template-columns:1fr; } }
.shots { display:grid; grid-template-columns:1.6fr 1fr; gap:10px; align-items:start; }
.shots > * { min-width:0; }
.project + .project { margin-top:16px; }