:root{
      --bg:#0d1117; 
      --fg:#e8edf2; 
      --muted:#9aa6b2;
      --accent:#5eead4; 
      --accent-2:#8b5cf6;
      --card:#141a22;   
      --card-2:#1a2029; 
      --border:#22303c;
      --maxw:1200px; 
      --radius:20px; 
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --pad:clamp(1rem,1rem + 1vw,2rem);
    }
    *{ box-sizing:border-box; }
    body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; background:var(--bg); color:var(--fg); line-height:1.6; }
    .container{ max-width:var(--maxw); margin:auto; padding-inline:var(--pad); }

    /* Header / Brand */
    header{ position:sticky; top:0; z-index:500; background:rgba(0,0,0,.7); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
    .navbar{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; }
    .brand{ display:flex; align-items:center; gap:.75rem; }
    .brand img{ height:40px; width:auto; }
    .brand-text{ display:flex; flex-direction:column; font-weight:600; line-height:1.2; }
    .brand-text small{ font-weight:400; font-size:.8rem; color:var(--muted); }

   /* — Header-Schatten bei Scroll — */
   header { transition: box-shadow .2s ease, background-color .2s ease; }
   header.is-scrolled { box-shadow: 0 6px 18px rgba(0,0,0,.12)}

   /* — Scroll-Reveal — */
   .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1.5s ease, transform 1.5s cubic-bezier(.2,.6,.2,1); }
   .reveal.is-in { opacity: 1; transform: none; }

   /* — Button-Micro-Hover (optional) — */
   .button, .btn, a.cta { transition: transform .15s ease, box-shadow .2s ease; }
   .button:hover, .btn:hover, a.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }

   /* — aktive Nav bei Ankern — */
   .desktop-nav a.is-active { color: #0ea5e9; font-weight: 600; }

   /* — Motion reduzieren respektieren — */
   @media (prefers-reduced-motion: reduce) {
     header { transition: none; }
     .reveal { opacity: 1; transform: none; transition: none; }
     .button, .btn, a.cta { transition: none; }
   }


    /* Desktop-Nav */
    .desktop-nav{ display:flex; align-items:center; gap:.5rem; }
    .desktop-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
    .desktop-nav a{ color:var(--fg); text-decoration:none; padding:.55rem .85rem; border-radius:.5rem; font-weight:600; }
    .desktop-nav a:hover{ background:rgba(255,255,255,.1); }

    /* Burger */
    .nav-toggle{ display:none; align-items:center; gap:.5rem; border:1px solid var(--border); background:var(--card-2); color:var(--fg); padding:.6rem .75rem; border-radius:12px; font-weight:700; }
    .nav-toggle .bars{ width:22px; height:14px; position:relative; display:inline-block; }
    .nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{ content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; }
    .nav-toggle .bars::before{ top:0; } .nav-toggle .bars span{ top:6px; } .nav-toggle .bars::after{ bottom:0; }

    .menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); z-index:900; display:none; }
    #mobile-nav{
      position:fixed; left:0; right:0; top:56px; bottom:auto;
      background:var(--card); border-top:1px solid var(--border);
      border-radius:16px 16px 0 0; padding:1rem var(--pad);
      z-index:1000; max-height:calc(100vh - 56px); overflow:auto;
      display:none; opacity:0; transform:translateY(-8px); pointer-events:none;
    }
    #mobile-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
    #mobile-nav a{ color:var(--fg); text-decoration:none; padding:.75rem 1rem; border-radius:.65rem; font-weight:600; }
    #mobile-nav a:hover{ background:rgba(255,255,255,.08); }

    @media (max-width:880px){ .desktop-nav{ display:none; } .nav-toggle{ display:inline-flex; } }
    @media (min-width:881px){ #mobile-nav, .menu-backdrop{ display:none !important; } }

    /* Hero */
    .hero{ display:grid; gap:2rem; align-items:center; grid-template-columns:1fr 1fr; padding:3rem 0; }
    .hero h1{ font-size:2rem; margin:.5rem 0; }
    .hero p{ color:var(--muted); font-size:1.1rem; }
    .hero img{ width:100%; border-radius:1rem; border:1px solid var(--border); object-fit:cover; }
    @media(max-width:640px){ .hero{ grid-template-columns:1fr; } }

    /* Sections */
    .section{ padding:3rem 0; }
    .section h2{ text-align:center; margin-bottom:1.5rem; font-size:2rem; }
    .grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
    .card{ background:var(--card); padding:1.5rem; border-radius:var(--radius); text-align:center; border:1px solid var(--border); }
    .card img{ max-width:100%; height:auto; object-fit:contain; margin-top:.5rem; }

    /* Footer */
    footer{ border-top:1px solid var(--border); padding:2rem 0; color:var(--muted); }
    .footer-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    footer a{ color:var(--fg); }

    /* Buttons */
    .btn{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); background:var(--card-2); color:var(--fg); padding:.7rem 1rem; border-radius:12px; font-weight:700; text-decoration:none; }
    .btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#051012; border:none; }
    .btn.small{ padding:0.4rem 0.7rem; font-size:0.85rem; border-radius:8px; font-weight:600; }

    /* Linkfarben passend zum Logo */
    a{ color:#4db8ff; text-decoration:none; transition:color 0.2s ease; }
    a:hover{ color:#3399ff; text-decoration:underline; }

    /* Cookie Banner/Dialog lesbarer */
    .cookie-banner,
    #consent-modal form { color:#fff; }
    .cookie-banner p,
    #consent-modal p,
    #consent-modal h2,
    #consent-modal label span { color:#fff; }

    /* Extra Abstände für Smartphones */
    @media (max-width: 640px) {
      .container { padding-left:1.25rem; padding-right:1.25rem; }
      #mobile-nav { padding-left:1.5rem; padding-right:1.5rem; }
    }
    
    .about-text {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.0rem;   /* wie im Hero */
  line-height: 1.75rem; /* wie im Hero */
  color: #d1d5db;       /* helles Grau wie im Hero */
   }

    .about-text p {
   margin-bottom: 1.2em; /* mehr Abstand zwischen Absätzen */
   }



header { 
  border-bottom: none;      /* alte statische Linie ausschalten */
  position: sticky;         /* oder fixed, wie bei dir */
  top: 0;
  z-index: 100;
}

header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #4db8ff, transparent);
  background-size: 200% 100%;
  animation: ltLine 10s ease-in-out infinite alternate;
  opacity: .75;
}

@keyframes ltLine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  header::after { animation: none; }
}