:root {
      --bg: #0f172a;        /* slate-900 */
      --panel: #111827;     /* gray-900 */
      --text: #e5e7eb;      /* gray-200 */
      --muted: #94a3b8;     /* slate-400 */
      --brand: #38bdf8;     /* sky-400 */
      --accent: #a78bfa;    /* violet-400 */
      --radius: 16px;
      --shadow: 0 20px 30px -12px rgba(0,0,0,0.45);
      --maxw: 1100px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Ubuntu, system-ui, -apple-system, Segoe UI, Roboto, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,0.12), transparent 60%),
                  radial-gradient(800px 400px at 90% -20%, rgba(167,139,250,0.10), transparent 60%),
                  var(--bg);
      line-height: 1.6;
    }

	body {
		background-image: url(/bg.jpg);
        background-repeat: no-repeat;
            background-position: left center;
            background-attachment: fixed;
            background-size: cover;
            height: 100vh;
            width: 100%;
	    }	
		
    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(17,24,39,0.7);
      backdrop-filter: blur(8px); 
      border-bottom: 1px solid rgba(148,163,184,0.15);
    }

    .nav {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

	#logohg {
        background-repeat:no-repeat;
		margin-top: 8px;
	}

	#soft {
      text-transform: none;
	  opacity: 0.8;
	  font-weight: 100 !important;
	  font-size: 1.25rem;
	}

	
	li {
	  opacity: 0.8;
	}
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-decoration: none;
      color: var(--text);
    }

    nav a {
      color: var(--muted);
      text-decoration: none;
      font-weight: 500;
      margin-left: 16px;
    }
    nav a:hover { color: var(--text); }

   

    /* Hero */
    .hero {
	  background: rgba(2,6,23,0.55);
      border: 1px solid rgba(148,163,184,0.15);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      max-width: var(--maxw);
      margin: 40px auto 0;
      padding: 28px 20px 32px;
    }

    h1 {
	  text-transform: uppercase;
	  opacity: 0.8;
	  font-weight: 100 !important;
	  font-size: 2.25rem;
      line-height: 1;
      margin: 0 0 0 14px;
    }

    .hero p,
    .hero p a	{ 
	color: #bec7d4; 
	margin: 0 0 18px; 
	}

    .datenschutz,
    .datenschutz a { 
	color: #bec7d4; 
	}

    .hero .media { aspect-ratio: 16 / 10; }
    .hero img { 
	margin: 20px auto 0;
	}

	
    .badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
    .badge {
      border: 1px solid rgba(148,163,184,0.25);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
    }

    /* Sektionen */
    section { 
	max-width: var(--maxw); 
	margin: 28px auto; 
	padding: 0 20px; 
	}
	
	
    h2 { 
	  font-weight: 100 !important;
	  font-size: 1.8rem;
	  margin: 0 0 8px; 
	  opacity: 0.8;
	}
	
    .lead, .about { 
	color: var(--muted); 
	}

	.inner { 
	margin: 28px auto;
    padding: 0 20px; 
	}
	
    .features { 
	display: grid; 
	grid-template-columns: repeat(2, 1fr); 
	gap: 18px; 
	}
    .feature { padding: 18px; }
    .feature h3 { margin: 8px 0 6px; font-size: 18px; }
    .feature p { color: var(--muted); margin: 0; }
    .feature img { margin: 2em 0 0 2em; }


    /* Footer */
    footer { border-top: 1px solid rgba(148,163,184,0.15); margin-top: 60px; }
    .foot { max-width: var(--maxw); margin: 0 auto; padding: 20px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }

    /* Responsiv */
    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
      .features { grid-template-columns: 1fr 1fr; }
      .about { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .features, .gallery { grid-template-columns: 1fr; }
	  .respond { 
	  width: 70%; 
	  padding: 0 0 0 3em;
	  }
	  nav, nav a { display: none; visibility: hidden}
    }