:root{
  --red: #ff2a2a;
  --red2:#ff3a3a;
  --bg: #050505;
}

html, body{
  margin:0;
  height:100%;
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-family:"Space Grotesk", Arial, sans-serif;
  text-align:center;
  overflow:hidden;
}

/* Hintergrund: Vignette + leichter roter Schimmer */
.bg{
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,42,42,0.08), rgba(0,0,0,0.0) 55%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.0), rgba(0,0,0,0.65) 70%);
  z-index: 0;
}

/* Red scanlines */
.scanlines{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 3;

  /* horizontale Linien */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,42,42,0.06) 0px,
      rgba(255,42,42,0.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );

  opacity: 0.35;
  mix-blend-mode: screen;
  animation: scanMove 6s linear infinite;
}

/* leichter "Sweep" fuer CRT feeling */
.scanlines::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-30%;
  height:35%;
  background: linear-gradient(to bottom,
    rgba(255,42,42,0.0),
    rgba(255,42,42,0.08),
    rgba(255,42,42,0.0)
  );
  animation: sweep 7.5s linear infinite;
  opacity: 0.65;
}

@keyframes scanMove{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(24px); }
}

@keyframes sweep{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(220%); }
}

/* Matrix Canvas hinter Text */
#matrix{
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.25;          /* dezent */
  filter: blur(0.2px);
}

/* Inhalt */
.wrap{
  position: relative;
  z-index: 2;
  padding: 24px;
}

/* Titel */
.title{
  font-size: clamp(42px, 8vw, 96px);
  letter-spacing:0.18em;
  color: var(--red);
  margin:0 0 18px 0;

  text-shadow:
    0 0 4px rgba(255,0,0,0.35),
    0 0 10px rgba(255,0,0,0.25);

  user-select:none;
}

/* Glitch Effekt: nur waehrend Intro */
.glitch{
  position: relative;
}

.glitch::before,
.glitch::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.0; /* wird per Klasse aktiviert */
}

.intro .glitch::before{
  opacity: 0.9;
  color: rgba(255,42,42,0.75);
  transform: translate(2px, 0);
  clip-path: inset(0 0 55% 0);
  animation: glitchTop 850ms steps(18) 1;
}

.intro .glitch::after{
  opacity: 0.9;
  color: rgba(255,42,42,0.55);
  transform: translate(-2px, 0);
  clip-path: inset(45% 0 0 0);
  animation: glitchBot 850ms steps(18) 1;
}

@keyframes glitchTop{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(2px,-1px); }
  40%{ transform: translate(-2px,1px); }
  60%{ transform: translate(3px,0); }
  80%{ transform: translate(-1px,-1px); }
  100%{ transform: translate(0,0); }
}

@keyframes glitchBot{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(-2px,1px); }
  40%{ transform: translate(2px,-1px); }
  60%{ transform: translate(-3px,0); }
  80%{ transform: translate(1px,1px); }
  100%{ transform: translate(0,0); }
}

/* Untertitel */
.subtitle{
  font-size: clamp(14px, 2.2vw, 22px);
  letter-spacing:0.22em;
  color: var(--red2);
  opacity: 0.92;

  text-shadow: 0 0 10px rgba(255,0,0,0.22);

  user-select:none;
}

/* Matrix-Reveal Look (monospace waehrend reveal) */
.reveal{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Zurueck */
.back{
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);

  color:#888;
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.18em;
}

.back:hover{
  color:#bbb;
}

.back:hover{ color:#bbb; }

/* Top Navigation */
.topnav{
  position: fixed;
  top: 22vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
}

.navbtn{
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 17px;
  border: 1px solid rgba(255,42,42,0.35);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.82);
  font-family: "Space Grotesk", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.navbtn:hover{ color: rgba(255,255,255,0.95); }

/* White Panel Overlay (Portal) */
.panel{
  position: fixed;
  inset: 0;
  z-index: 5;

  background: rgba(255,255,255,0.98);

  /* Standard: geschlossen */
  pointer-events: none;

  --px: 50vw;
  --py: 50vh;
  clip-path: circle(0px at var(--px) var(--py));
  -webkit-clip-path: circle(0px at var(--px) var(--py));

  transition:
    clip-path 620ms cubic-bezier(.2,.9,.2,1),
    -webkit-clip-path 620ms cubic-bezier(.2,.9,.2,1);
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iPhone smooth */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.light .panel{
  pointer-events: auto;
  clip-path: circle(160vmax at var(--px) var(--py));
  -webkit-clip-path: circle(160vmax at var(--px) var(--py));
}

.panel-inner{
  max-width: 860px;
  margin: 0 auto;
  padding: 86px 22px 40px;
  color: #0b0b0b;
  margin-top: 2px;

}

.panel-page h2{
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: 0.08em;
}

.panel-page p{
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.7;
}

/* Back button inside white mode */
.back2{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 6;

  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  color: #0b0b0b;
  font-family: "Space Grotesk", Arial, sans-serif;
  letter-spacing: 0.14em;
  cursor: pointer;
}


body.light #matrix{ opacity: 0; }
body.light .scanlines{ opacity: 0; }
body.light .bg{ opacity: 0; }
body.light .wrap{ opacity: 0; }

body.light{
  overflow: auto; /* damit du im White Mode scrollen kannst */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .scanlines, .scanlines::after { animation: none; }
  #matrix{ display:none; }
}

#terms .terms-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

#terms .terms-list li{
  margin-bottom: 38px;   /* Abstand zum nächsten Titel */
}

#terms .terms-list li strong{
  display: block;
  margin-bottom: 6px;    /* Abstand zwischen Titel und eigenem Text */
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#terms .terms-list li br{
  display:none;
}

#terms .terms-list li{
  line-height: 1.7;
}

#about ul{
  list-style: none;
  padding: 0;
}

#about .about-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 24px 0;
}

#about .about-list li{
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

#about p strong{
  display: block;
  margin-top: 36px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  opacity: 0.85;
}
.access-btn{
  margin-top: 60px;

  padding: 16px 36px;
  border-radius: 18px;

  border: 1px solid rgba(255,42,42,0.35);
  background: rgba(0,0,0,0.25);

  color: rgba(255,255,255,0.85);
  font-family: "Space Grotesk", Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  font-size: 15px;

  backdrop-filter: blur(6px);
  cursor: pointer;

  transition: all 280ms ease;
}

.access-btn:hover{
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,42,42,0.6);
  box-shadow: 0 0 18px rgba(255,42,42,0.15);
}
/* Zugang Panel linksbuendig */
#access{
  text-align: left;
}

#access p{
  text-align: left;
}

#access .about-list{
  text-align: left;
}

#access .about-list li{
  text-align: left;
}
/* iOS Safari: Querformat -> weniger Hoehe, fixed Elemente kollidieren */
@media (orientation: landscape) and (max-height: 520px){

  /* Top Buttons hoeher platzieren + kleiner machen */
  .topnav{
    top: 10px;
    gap: 8px;
    padding-top: env(safe-area-inset-top); 
 }

  .navbtn{
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 14px;
    letter-spacing: 0.14em;
  }

  /* Zugang Button: weniger Abstand nach oben + kleiner */
  .access-btn{
    margin-top: 22px;     /* vorher 60px -> in Landscape zu tief */
    padding: 12px 22px;
    font-size: 12px;
    border-radius: 14px;
    letter-spacing: 0.18em;
  }

  /* Zurueck Link unten: etwas naeher an den Rand + kleiner */
  .back{
    bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.16em;
    padding-bottom: env(safe-area-inset-bottom);  
  }