/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}	  
	  
	  
    :root {
      --main: #37376a;
      --accent: #a0a0ff;
      --light: #e0e0ff;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', sans-serif;
      min-height: 100vh;
      background: url('../img/back.jpg') center center / cover no-repeat fixed;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 20px;
      position: relative;
	  overflow-y: scroll;   /* Immer Scrollbalken sichtbar */
      overflow-x: hidden;
    }

    /* Subtiles Dunkel-Overlay für Kontrast */
    body::after {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(15, 15, 35, 0.3);
      pointer-events: none;
      z-index: 0;
    }
    
      

    /* === Hintergrund-Sterne (wie in Version 2) === */
    .stars {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .star {
      position: absolute;
      background: radial-gradient(circle, rgba(180,180,255,0.3) 0%, transparent 70%);
      border-radius: 50%;
      animation: float 10s infinite ease-in-out;
      opacity: 0;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) scale(0.6); opacity: 0; }
      50% { transform: translateY(-100px) scale(1); opacity: 0.5; }
    }

    /* === Logo als SVG mit Wachstums-Animation === */
    .logo-container {
      position: relative;
      z-index: 2;
      margin-bottom: 40px;
      text-align: center;
    }

    .logo-svg {
      width: 120px;
      height: auto;
      filter: drop-shadow(0 0 20px rgba(255,255,255,0.6));
      opacity: 0;
      transform: scale(0.05);
      animation: growIn 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes growIn {
      0% {
        opacity: 0;
        transform: scale(0.05);
        filter: drop-shadow(0 0 30px rgba(255,255,255,0.9));
      }
      70% {
        opacity: 1;
        transform: scale(1.15);
        filter: drop-shadow(0 0 40px rgba(160,160,255,0.8));
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(255,255,255,0.4));
      }
    }

    /* === Glasmorphismus Info-Card === */
    .info-card {
      max-width: 740px;
      width: 100%;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 24px;
      padding: 36px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      z-index: 1;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1.2s ease-out 1s forwards;
      overflow:auto;
    }

    @keyframes fadeInUp {
      to { opacity: 1; transform: translateY(0); }
    }

    .info-card h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 20px;
      background: linear-gradient(90deg, #ffffff, var(--light));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .info-card p {
      font-weight: 300;
      margin-bottom: 18px;
      font-size: 1.15rem;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.92);
    }

    .info-card strong {
      font-weight: 600;
      color: var(--light);
    }

   .RGname {
	 overflow:visible;
	 margin-top:-40px;
	 margin-bottom:50px;
   }

    .RG {
		font-family:arial;
		font-size:36px;
		color:#ffffff !important;
    }

    .TNN {
		position:relative;
		top: -15px;
		left:100px;
		z-index:101;	
		font-family:arial;
		font-size:15px;
		color:#49acff;
    }  
    
    .start {
      display:block;
    }
    
    .impressum {
      display:none;  
    }

    .datenschutz {
      display:none;  
    }

    .datenschutz p {
      font-size: 14px !important;
    }
    
    .datenschutz a {
		color:#fff;
    }    
    
    .right {
		width:100%;
		text-align:right;
    }
    
    .right a {
        font-size:13px;
		color:#fff;
    }    
    
    .footer {
		font-size:14px;
		margin-top:40px;
		text-align:center;
    }
    
    .footer a {
		color:#fff;
    }    
    
    .Hinweis {
      position: fixed;
      bottom: 20px;   /* Abstand vom unteren Rand */
      right: 20px;    /* Abstand vom rechten Rand */
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      z-index: 1000;  /* Immer im Vordergrund */
    }
    
    
    /* === Responsive === */
    @media (max-width: 768px) {
      .logo-svg { width: 130px; }
      .info-card { padding: 28px; border-radius: 20px; }
      .info-card h1 { font-size: 2rem; }
    }

    @media (max-width: 480px) {
      .logo-svg { width: 100px; }
      .info-card { padding: 24px; }
      .info-card h1 { font-size: 1.8rem; }
      .info-card p { font-size: 1rem; }
    }