/* ====== Basis, Variablen, Reset ====== */
:root{
  --bg: #0b0c10;
  --surface: #13151b;
  --muted: #1d2030;
  --text: #e9ecf1;
  --text-dim: #b6bcc8;
  --brand: #5ba8ff;
  --brand-2: #7cffb8;
  --danger: #ff6b6b;
  --radius: 16px;
  --shadow: 0 8px 20px rgba(0,0,0,.25);
  --container: clamp(320px, 92vw, 1120px);
  --gap: clamp(16px, 2.5vw, 32px);
  --card-gap: clamp(12px, 2vw, 20px);
  --h1: clamp(28px, 6vw, 56px);
  --h2: clamp(22px, 4vw, 32px);
  --h3: clamp(18px, 2.6vw, 22px);
  --lead: clamp(16px, 2.4vw, 18px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0b0c10 0%, #0f1220 40%, #0b0c10 100%);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ====== Utilities ====== */
.container{width:var(--container); margin-inline:auto; padding-inline:var(--gap)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none;
  border:1px solid transparent; box-shadow:var(--shadow); transition:transform .1s ease, background .2s ease, border-color .2s ease;
}
.button:active{transform:translateY(1px)}
.button--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081018}
.button--secondary{background:#0f1322; border-color:#2a3048; color:var(--text)}
.button--primary:hover{filter:saturate(1.1) brightness(1.05)}
.button--secondary:hover{border-color:#47507a}

/* ====== Header & Nav ====== */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(10,12,18,.85),rgba(10,12,18,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; padding-block:12px;
  gap:var(--gap);
}
.logo img{width:auto; height:40px; border-radius:10px; background:#0e1220}

.main-nav__toggle{
  display:inline-flex; align-items:center; gap:.6em; padding:10px 14px;
  border-radius:10px; background:#0f1322; color:var(--text); border:1px solid #212844;
}
.main-nav__list{
  list-style:none; margin:0; padding:0; display:flex; gap:20px; align-items:center;
}
.main-nav__list a{padding:10px 6px; color:var(--text-dim)}
.main-nav__list a:hover{color:var(--text)}

.header__cta{display:none}

@media (max-width: 880px){
  .main-nav__list{
    position:fixed; inset:auto 0 0 0; top:64px; background:#0b0f1c; border-top:1px solid rgba(255,255,255,.06);
    display:grid; gap:0; padding:8px 16px; transform:translateY(8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .main-nav[ data-open="true" ] .main-nav__list{opacity:1; transform:none; pointer-events:auto}
  .header__cta{display:none}
}
@media (min-width: 881px){
  .main-nav__toggle{display:none}
  .header__cta{display:inline-flex}
}

/* ====== Sections ====== */
section{padding-block: clamp(48px, 8vw, 96px)}
h1{font-size:var(--h1); line-height:1.05; margin:0 0 .5em}
h2{font-size:var(--h2); line-height:1.15; margin:0 0 .6em}
h3{font-size:var(--h3); margin:.2em 0 .2em}

/* ====== Hero ====== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(91,168,255,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(124,255,184,.18), transparent 60%);
}
.hero__inner{
  display:grid; gap:20px; align-items:center; text-align:center; padding-block: clamp(40px, 8vw, 96px);
}
.hero p{color:var(--text-dim); font-size:var(--lead); margin:0 auto; max-width:60ch}
.hero__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ====== How-to ====== */
.howto .howto__steps{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:var(--card-gap); counter-reset: steps;

  list-style:none; margin: 0 0 var(--gap); padding:0;
}
.howto__step{
  background:linear-gradient(180deg,#101426,#0d1120); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); position:relative;
}
.howto__step h3{margin:0 0 .35em}
.howto__step p{margin:0; color:var(--text-dim)}
@media (max-width: 900px){ .howto .howto__steps{grid-template-columns:1fr} }

/* ====== Portfolio Grid ====== */
.portfolio{position:relative}
.portfolio__bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(700px 260px at 20% 10%, rgba(91,168,255,.10), transparent 60%),
    radial-gradient(600px 260px at 80% 0%, rgba(124,255,184,.10), transparent 60%);
}
.portfolio .container{position:relative; z-index:1}
.portfolio__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--card-gap);
}
.card{
  background:linear-gradient(180deg,#0f1220,#0b0f1c); border:1px solid rgba(255,255,255,.06);
  border-radius:calc(var(--radius) + 2px); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:100%;
  transition:transform .15s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); border-color:#394162}
.card__media{aspect-ratio: 16/10; background:#0c1020}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__body{padding:14px 16px}
.card__title{margin:0 0 .25em}
.card__text{color:var(--text-dim); margin:0}

/* ====== CTA ====== */
.cta{
  text-align:center;
  background:
    linear-gradient(180deg, rgba(124,255,184,.08), rgba(91,168,255,.08)),
    linear-gradient(180deg,#0e1220,#0c0f19);
  border-block:1px solid rgba(255,255,255,.06);
}
.cta p{color:var(--text-dim); margin:.3em auto var(--gap); max-width:60ch}

/* ====== Kontakt / Formular ====== */
.contact__form{
  display:grid; gap:14px; max-width:680px;
}
.form__row{display:grid; gap:6px}
label{font-weight:600}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; color:var(--text);
  background:#0d1120; border:1px solid #1f2642; outline:none;
}
input:focus, textarea:focus{border-color:#3a4270; box-shadow:0 0 0 3px rgba(91,168,255,.15)}

/* ====== Social ====== */
.social{padding-block:40px; border-top:1px solid rgba(255,255,255,.06)}
.social__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--gap); flex-wrap:wrap}
.social__list{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.social__list a{color:var(--text-dim)}
.social__list a:hover{color:var(--text)}

/* ====== Footer ====== */
.footer{
  padding-block:28px; border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#0b0c10,#080a12);
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--gap); flex-wrap:wrap}
.footer__links{display:flex; gap:14px; list-style:none; margin:0; padding:0}
.footer a{color:var(--text-dim)} .footer a:hover{color:var(--text)}

/* ====== Motion preferences ====== */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important; scroll-behavior: auto !important;}
}