:root {
      --bg: #0f172a;       /* dunkles Blau */
      --card: #111827;     /* fast Schwarz */
      --text: #e5e7eb;     /* helles Grau */
      --muted: #9ca3af;    /* mittleres Grau */
      --accent: #2484ad;   /* Cyan */
    }

    * { box-sizing: border-box; }

    html, body { height: 100%; }

    body {
      margin: 0;
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: radial-gradient(1200px 600px at 100% -10%, rgba(56,189,248,.2), transparent 45%),
                  radial-gradient(1400px 800px at -10% -50%, rgba(56,189,248,.15), transparent 40%),
                  linear-gradient(180deg, #0b1220, var(--bg));
      display: grid;
      grid-template-rows: auto 1fr auto; /* Header | Main | Footer */
      min-height: 100dvh; 
      justify-content: center;
    }

    header { 
      position: sticky; top: 0; 
      backdrop-filter: blur(8px);
      background: color-mix(in lab, var(--bg) 80%, transparent);
      border-bottom: 1px solid rgba(148,163,184,.2);
    } 

  
    .container { 
      max-width: 960px; 
      margin: 0 auto; 
      padding: 16px; 
    }

    .brand { 
      display: flex; 
      align-items: center; 
      gap: 10px; 
      font-weight: 700; 
    }

    .dot { 
      width: 10px; 
      height: 10px; 
      border-radius: 999px; 
      background: 
      var(--accent); 
      box-shadow: 0 0 24px var(--accent); 
    }

    nav { 
      display: flex; 
      gap: 16px; 
      align-items: center; 
    }

    nav a { 
      text-decoration: none; 
      color: var(--muted); 
    }

    nav a:hover { 
      color: var(--text); 
    } 

    main { 
      display: grid; 
      place-items: center; 
      padding: 32px 16px; 
    }

    .card { 
      width: min(720px, 100%);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(148,163,184,.25);
      border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.25); 
    }

    .card2 { 
      width: min(720px, 100%);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(148,163,184,.25);
      border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.25); 
    }

    h1 { 
      margin: 0 0 8px; 
      font-size: clamp(1.6rem, 2.6vw + .8rem, 2.4rem); 
    }

    p { 
      margin: 0 0 12px; 
      color: var(--muted); 
    }

    .btns { 
      display: flex; 
      gap: 12px; 
      margin-top: 18px; 
      flex-wrap: wrap; 
    }
    
    .btn {
      padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(148,163,184,.25);
      background: #0b1220; color: var(--text); text-decoration: none; font-weight: 600;
    }
    .btn.primary { background: var(--accent); color: #0b1220; border-color: transparent; }
    .btn:hover { transform: translateY(-1px); transition: transform .15s ease; }

    footer { border-top: 1px solid rgba(148,163,184,.2); color: var(--muted); }
    .footer-grid {
      display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    }
    small a { color: inherit; }