/* =========================
   NovaCraft Trading – Global
   ========================= */
:root{
  --bg-overlay: rgba(0,0,0,.30);
  --card-bg: rgba(10,20,24,.72);
  --card-border: rgba(0,255,255,.18);
  --neon: #11e6ff;                 /* Startbutton-Farbe */
  --text: #e9f9ff;
  --muted: #a7c7cf;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius: 22px;
  --radius-sm: 16px;
  --maxw: 1200px;
  --nav-h: 64px;
  --gap: 22px;
}

*{box-sizing:border-box}
html,body{
  height:100%; margin:0; padding:0; color:var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--neon); text-decoration:none}
a:hover{opacity:.9}

/* =========================
   Video Hintergrund
   ========================= */
.bg{ position:fixed; inset:0; overflow:hidden; z-index:-2 }
.bg video{
  position:absolute; min-width:100%; min-height:100%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  /* leicht dunkler als vorher: */
  filter:saturate(1.05) contrast(1.05) brightness(.84);
}
.bg::after{ content:""; position:absolute; inset:0; background:var(--bg-overlay); z-index:1 }

/* =========================
   Header / Navigation
   ========================= */
header{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  z-index:10; backdrop-filter: blur(10px);
}
.nav{
  width:100%; max-width:var(--maxw);
  display:flex; align-items:center; justify-content:center;
  gap:26px; padding:0 18px;
}
/* Icons + Text in Neon */
.nav a{
  display:inline-flex; flex-direction:row; align-items:center; gap:10px;
  color:var(--neon); font-weight:800; padding:10px 12px; border-radius:10px;
  transition:.2s ease; line-height:1; white-space:nowrap;
}
.nav a .ico{ font-size:18px }
.nav a:hover{ background:rgba(17,230,255,.12) }
/* Aktiver Link */
.nav a.active{
  box-shadow: inset 0 -2px 0 var(--neon);
}

/* NEU – Aktiver Link Datenschutz exakt wie Risiko-Hinweis */
.nav a.active.datenschutz {
  box-shadow: none;
  border-bottom: 3px solid var(--neon);
  border-radius: 6px;
  padding-bottom: 4px;
}

/* Abstand zum fixen Header */
.spacer{ height:var(--nav-h) }

/* =========================
   Layout / Cards / Typo
   ========================= */
.wrapper{ width:100%; max-width:var(--maxw); margin:0 auto; padding: clamp(18px,3vw,28px) }
.card{
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding: clamp(20px,3.2vw,32px);
}
h1{ margin:0 0 10px; font-weight:900; color:var(--neon);
    font-size: clamp(36px, 5vw, 56px);
    text-shadow: 0 0 16px color-mix(in srgb, var(--neon) 40%, transparent) }
h2{ margin:0 0 12px; font-weight:900; color:var(--neon); font-size: clamp(26px, 3.6vw, 36px) }
h3{ margin:0 0 8px; font-size: clamp(18px, 2.1vw, 22px) }
p,li{ font-size: clamp(15px, 1.5vw, 18px) }
.muted{ color:#a7c7cf }

/* =========================
   HERO Startseite – zentriert
   ========================= */
.hero{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px }
.hero .sub{ color:var(--muted) }

/* NEU – Hero-Überschrift & Untertitel in Button-Farbe */
.hero h1{
  color: var(--neon);
  text-shadow: 0 0 16px color-mix(in srgb, var(--neon) 40%, transparent);
}
.hero .sub{
  color: var(--neon);
  opacity: .9;
}

/* Logo über Überschrift – größer */
.hero-logo-big{
  width: clamp(200px, 24vw, 280px);
  height: clamp(130px, 16vw, 190px);
  border-radius:18px; overflow:hidden; border:1px solid var(--card-border);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* CTA */
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 26px; border-radius:14px;
  background:var(--neon); color:#002228; font-weight:900; border:none; cursor:pointer;
  box-shadow: 0 0 22px color-mix(in srgb, var(--neon) 38%, transparent);
}
.cta-btn:hover{ transform:translateY(-1px) }

/* Feature-Grid */
.grid3{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, 1fr) }
@media (max-width: 980px){ .grid3{ grid-template-columns: 1fr } }

/* Zertifikate */
.cert-grid{ margin-top:var(--gap); display:grid; gap:18px; grid-template-columns: repeat(3, 1fr) }
.cert{ background:rgba(0,0,0,.25); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/7; display:flex; align-items:center; justify-content:center }
.cert img{ width:100%; height:100%; object-fit:cover }

/* Kontaktformular */
.form{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
.form .row-2{ grid-column:1/-1 }
.input,.textarea{
  width:100%; background:rgba(0,0,0,.25); border:1px solid var(--card-border);
  color:var(--text); border-radius:14px; padding:14px 16px; outline:none;
}
.textarea{ min-height:180px; resize:vertical }
.submit{ background:var(--neon); color:#002228; font-weight:800; border-radius:14px; height:48px; border:none; cursor:pointer; box-shadow:0 0 22px color-mix(in srgb, var(--neon) 38%, transparent) }
.submit:hover{ transform:translateY(-1px) }
@media (max-width:900px){ .form{ grid-template-columns:1fr } }

/* Impressum / Datenschutz Listen */
.def-list dt{font-weight:800;color:var(--neon); margin-top:12px}
.def-list dd{margin:0 0 10px 0}

/* Footer */
footer{ position:fixed; inset:auto 0 0 0; z-index:5; background:linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.35)); backdrop-filter:blur(6px) }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:12px 18px; text-align:center; color:var(--text); font-size:14px }

/* ======= Lesbarkeit Hauptinhalte (ergänzt) ======= */
main, main p, main li, main h1, main h2, main h3{
  color:#ffffff;
  text-shadow:1px 1px 4px rgba(0,0,0,.85);
}