/* Existing CSS code from the user's file continues here */
/* =======================
       Design Tokens / Globals
       ======================= */

main{
 max-width: 1100px; /* anpassen */
 margin: 0 auto;
 padding: 0 20px;
}

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: #0b0e14;
      color: #eaeaea;
      overflow: hidden;
    }

    body{ display:flex; flex-direction:column; align-items:center; }
main{ width:100%; max-width:1100px; }

    #starfield,
    #aurora {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .content {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 20px;
      text-align: center;
    }

    .box {
      max-width: 520px;
      width: 100%;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(10px);
      border-radius: 14px;
      padding: 40px 30px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    }

    h1 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 16px;
      color: #b9c0ff;
      margin-bottom: 40px;
    }

    .option {
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .option h2 {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .option p {
      font-size: 14px;
      color: #cfd3ff;
      margin-bottom: 14px;
    }

    .option a {
      display: inline-block;
      padding: 12px 26px;
      border-radius: 30px;
      text-decoration: none;
      background: linear-gradient(135deg, #7f8cff, #b388ff);
      color: #000;
      font-weight: bold;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .option a:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(179,136,255,0.4);
    }

    footer {
      margin-top: 30px;
      font-size: 12px;
      color: #aaa;
    }

    footer a {
      color: #aaa;
      text-decoration: none;
      margin: 0 6px;
    }

    footer a:hover {
      text-decoration: underline;
    }



       
:root{
  --accent:#0b6ef6;
  --accent-2:#5aa0ff;
  --bg:#0a0a0a;
  --card:#16181d;
  --muted:#9ca3af;
  --text:#eef2ff;

  --glow:rgba(11,110,246,.25);
  --border:rgba(255,255,255,.22);

  --glass: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  /* stärkerer, dunklerer Glaslook für den TOP-Banner */
  --glass-strong-top: linear-gradient(180deg, rgba(16,20,28,.78), rgba(16,20,28,.48));
  /* neutraler Glaslook für die PDF-Sidebar */
  --glass-strong: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));

  --ring: 0 0 0 2px rgba(11,110,246,.65), 0 10px 26px rgba(11,110,246,.20);

  --radius-xl: 26px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --elev-1: 0 6px 18px rgba(0,0,0,.35);
  --elev-2: 0 10px 26px rgba(0,0,0,.45);
  --elev-3: 0 14px 34px rgba(0,0,0,.46);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
	align-items:center;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; overflow-y: auto; 
  -webkit-tap-highlight-color:transparent;
}

.hide-cursor, .hide-cursor *{cursor:none !important}

/* =======================
   Background Layers
   ======================= */
#starfield{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 800px at 50% -20%, #0b0f19 30%, transparent 60%),
  linear-gradient(#05060b,#070a13 60%, #06070d)}
#aurora{position:fixed;inset:-12% -22%;z-index:-1;pointer-events:none;filter:blur(52px) saturate(115%);opacity:.55;background:
  radial-gradient(ellipse at 18% 78%, rgba(0,0,0,.38), transparent 46%),
  radial-gradient(ellipse at 82% 22%, rgba(70,70,70,.32), transparent 46%),
  radial-gradient(ellipse at 60% 92%, rgba(30,30,30,.30), transparent 50%),
  radial-gradient(ellipse at 12% 18%, rgba(90,90,90,.22), transparent 50%);
  animation: auroraShift 22s ease-in-out infinite alternate}
@keyframes auroraShift{0%{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:.5}50%{transform:translate3d(-2%,-3%,0) scale(1.04) rotate(2deg);opacity:.62}100%{transform:translate3d(2%,3%,0) scale(1.02) rotate(-2deg);opacity:.55}}
@media (prefers-reduced-motion: reduce){ #aurora{animation:none} }





/*Gate Steuerung*/
.gate{
 position:fixed;
 inset:0;
 z-index:10;
 background:rgba(0,0,0,.65);
 display:none;
 align-items:center;
 justify-content:center;
 padding:16px; /* NEU: Abstand zum Rand */
 overflow:auto; /* NEU: falls Box größer als Viewport */
}

.gate.open{display:flex}

.gate .box{
 width:min(720px,calc(100% - 32px));
 background:#fff;
 color:#111;
 border-radius:12px;
 padding:20px;
 box-shadow:0 20px 60px rgba(0,0,0,.35);
 max-height:calc(100svh - 32px); /* NEU: mobile-safe Höhe */
 overflow:auto; /* NEU: Inhalt scrollt */
 -webkit-overflow-scrolling:touch; /* NEU: smooth iOS */
}

.gate .actions{margin-top:16px;display:flex;justify-content:flex-end;gap:12px}