/* Base Styles – moderne, zugängliche, responsive */
:root{
  --bg: #0b1020;
  --bg-2: #0f152b;
  --text: #e6e9f2;
  --muted: #b8bfd6;
  --card: #111832;
  --accent-400: #38bdf8;
  --accent-500: #0ea5e9;
  --accent-600: #0284c7;
  --ring: rgba(56, 189, 248, 0.5);
  --shadow: rgba(2, 8, 23, 0.6);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f8fafc;
    --bg-2: #ffffff;
    --text: #0f172a;
    --muted: #334155;
    --card: #ffffff;
    --shadow: rgba(2, 8, 23, 0.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -20%, rgba(56,189,248,.08), transparent), var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2rem, 3.6vw + 1rem, 3.25rem)}
h2{font-size:clamp(1.4rem, 1.6vw + 1rem, 2rem)}
h3{font-size:1.1rem}

.container{width:min(1100px, 92%); margin-inline:auto}
.readable{max-width:70ch}
.section{padding:clamp(2.5rem, 5vw, 5rem) 0}
.section.alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,.04))}
.section.center{display:grid; place-items:center; min-height:60vh}

.site-header{
  position:sticky; top:0; z-index:50; background:rgba(10, 14, 28, .6);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition: box-shadow .2s ease;
}
.site-header[data-elevated="true"]{ box-shadow: 0 8px 30px -12px var(--shadow) }

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px}
.brand img{filter:drop-shadow(0 2px 8px rgba(2,8,23,.2))}

.nav ul{display:flex; align-items:center; list-style:none; gap:1rem; margin:0; padding:0}
.nav a{padding:.4rem .6rem; border-radius:.5rem}
.nav .divider{width:1px; height:20px; background:rgba(255,255,255,.14)}
.mode-toggle{border:none; background:transparent; padding:.4rem .6rem; font-size:1rem; cursor:pointer}

.nav-toggle{display:none; border:1px solid rgba(255,255,255,.2); background:transparent; padding:.5rem .6rem; border-radius:.6rem; cursor:pointer}
.nav-toggle .bars{display:block; width:22px; height:2px; background:currentColor; position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; transform-origin:left center}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}

.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:var(--accent-500); color:#000; padding:.5rem .75rem; border-radius:.5rem}

.hero{padding:clamp(3rem, 8vw, 7rem) 0}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.lead{font-size:1.1rem; color:var(--muted)}
.accent{color:var(--accent-400)}
.hero-media{margin-top:1.25rem; border-radius:1rem; overflow:hidden; box-shadow:0 24px 80px -30px var(--shadow)}

.feature-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; padding:0; list-style:none}
.feature-grid li{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:1rem; border-radius:.9rem; box-shadow:0 16px 40px -28px var(--shadow)}
.feature-grid .icon{font-size:1.4rem}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:1rem; border-radius:.9rem; display:flex; flex-direction:column; gap:.6rem}

.stats{display:flex; flex-wrap:wrap; gap:1.5rem; padding:0; list-style:none}
.stats strong{font-size:1.8rem; display:block}
.stats span{color:var(--muted)}

.contact{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field.half{grid-column: span 1}
.field.chk{grid-column: 1/-1; flex-direction:row; align-items:flex-start; gap:.6rem}
input,textarea{border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.02); color:inherit; border-radius:.6rem; padding:.7rem .85rem; outline:none}
input:focus,textarea:focus{box-shadow:0 0 0 .2rem var(--ring); border-color:transparent}
.error{color:#ffb4b4; min-height:1.2em}
.form-status{min-height:1.4em; margin-top:.4rem}

.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.14); font-weight:600; text-align:center; cursor:pointer}
.btn.primary{background:linear-gradient(180deg, var(--accent-400), var(--accent-600)); color:#001222; border:none}
.btn.ghost{background:transparent}
.btn.small{padding:.45rem .7rem; font-size:.9rem}

.site-footer{padding:2rem 0; border-top:1px solid rgba(255,255,255,.06); background:var(--bg-2)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .feature-grid{grid-template-columns: repeat(2, 1fr)}
  .cards{grid-template-columns: 1fr}
  .contact{grid-template-columns:1fr}
  .field.half{grid-column:1/-1}
  .nav-toggle{display:inline-block}
  .nav{position:fixed; inset:64px 0 auto; transform:translateY(-30px); opacity:0; pointer-events:none; transition:.2s ease; background:var(--bg-2); border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav ul{padding:1rem; gap:.5rem; justify-content:flex-start; flex-wrap:wrap}
  .nav .divider{display:none}
}

/* Light/Dark switch helper */
:root[data-theme="light"]{
  --bg:#ffffff; --bg-2:#ffffff; --text:#0f172a; --muted:#334155; --card:#ffffff; --shadow:rgba(2,8,23,.08);
}