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

:root {

  --bg-top: #0d1720;
  --bg-middle: #132330;
  --bg-bottom: #1c313d;

  --text-main: #e4edf3;
  --text-soft: #9fb2bf;

  --cyan: #89d7f0;
  --cyan-soft: #5baec9;

  --green: #7bc79c;
  --violet: #b39ddb;

  --gold: #d9c08b;

  --glass: rgba(18, 29, 40, 0.72);
  --glass-light: rgba(140, 190, 210, 0.12);

  --border: rgba(170, 220, 240, 0.14);

  --shadow:
    0 20px 40px rgba(0,0,0,0.25);
}

/* -------------------------------- */
/* Grundlayout */
/* -------------------------------- */

body {

  font-family: "Segoe UI", sans-serif;

  color: var(--text-main);

  background:
    radial-gradient(
      circle at top left,
      rgba(80, 180, 220, 0.12),
      transparent 35%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(120, 200, 160, 0.10),
      transparent 35%
    ),

    linear-gradient(
      to bottom,
      var(--bg-top),
      var(--bg-middle),
      var(--bg-bottom)
    );

  min-height: 100vh;

  overflow-x: hidden;
}

/* -------------------------------- */
/* Lichtnebel */
/* -------------------------------- */

.background-effects {

  position: fixed;

  inset: 0;

  overflow: hidden;

  z-index: -1;
}

.glow {

  position: absolute;

  border-radius: 50%;

  filter: blur(140px);

  opacity: 0.22;
}

.glow-cyan {

  width: 700px;
  height: 700px;

  background: #56c7ff;

  top: -250px;
  left: -200px;
}

.glow-green {

  width: 600px;
  height: 600px;

  background: #6be39d;

  bottom: -250px;
  right: -180px;
}

/* -------------------------------- */
/* Header */
/* -------------------------------- */

.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 34px 70px;

  border-bottom:
    1px solid rgba(255,255,255,0.04);
}

.logo {

  font-size: 50px;

  font-weight: 300;

  letter-spacing: 10px;

  text-transform: uppercase;

  color: #edf7ff;
}

.subtitle {

  margin-top: 10px;

  color: #7e95a3;

  letter-spacing: 2px;

  font-size: 14px;
}

/* -------------------------------- */
/* Navigation */
/* -------------------------------- */

.navigation {

  display: flex;

  gap: 34px;
}

.navigation a {

  text-decoration: none;

  color: #b4c5d0;

  text-transform: uppercase;

  letter-spacing: 3px;

  font-size: 13px;

  transition: 0.3s;
}

.navigation a:hover {

  color: white;

  text-shadow:
    0 0 12px rgba(130,220,255,0.45);
}

/* -------------------------------- */
/* Hero */
/* -------------------------------- */

.hero {

  padding:
    150px 40px 130px;

  text-align: center;
}

.hero-content {

  max-width: 1100px;

  margin: auto;
}

.hero-label {

  color: var(--cyan);

  letter-spacing: 6px;

  text-transform: uppercase;

  font-size: 12px;

  margin-bottom: 35px;
}

.hero h2 {

  font-size: 82px;

  font-weight: 300;

  line-height: 1.12;

  color: white;
}

.hero-text {

  max-width: 900px;

  margin: 48px auto 0;

  color: var(--text-soft);

  line-height: 1.9;

  font-size: 21px;
}

/* -------------------------------- */
/* Buttons */
/* -------------------------------- */

.hero-buttons {

  display: flex;

  justify-content: center;

  gap: 24px;

  margin-top: 65px;
}

.button-primary,
.button-secondary {

  padding: 18px 34px;

  border-radius: 18px;

  border:
    1px solid rgba(130,200,230,0.18);

  background:
    rgba(20,30,42,0.55);

  color: #edf7ff;

  letter-spacing: 2px;

  text-transform: uppercase;

  font-size: 13px;

  cursor: pointer;

  transition: all 0.35s ease;

  backdrop-filter: blur(12px);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.18);
}

.button-primary:hover,
.button-secondary:hover {

  transform: translateY(-4px);

  background:
    rgba(35,50,65,0.75);

  border:
    1px solid rgba(140,220,255,0.35);

  box-shadow:
    0 0 25px rgba(100,200,255,0.18);
}

/* -------------------------------- */
/* Charaktere */
/* -------------------------------- */

.characters {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

  gap: 40px;

  padding: 60px;
}

.character-card {

  background: var(--glass);

  border:
    1px solid var(--border);

  border-radius: 36px;

  overflow: hidden;

  backdrop-filter: blur(14px);

  box-shadow: var(--shadow);

  transition: 0.4s ease;
}

.character-card:hover {

  cursor: pointer;

  transform:
    translateY(-10px)
    scale(1.015);

  border:
    1px solid rgba(150,230,255,0.28);

  box-shadow:
    0 30px 60px rgba(0,0,0,0.30);
}

/* -------------------------------- */
/* Charakterbereiche */
/* -------------------------------- */

.character-visual {

  height: 300px;

  display: flex;

  justify-content: center;

  align-items: center;
}

.cyan-bg {

  background:
    linear-gradient(
      to bottom,
      rgba(70,180,230,0.18),
      rgba(15,23,32,0.0)
    );
}

.green-bg {

  background:
    linear-gradient(
      to bottom,
      rgba(110,220,150,0.18),
      rgba(15,23,32,0.0)
    );
}

.violet-bg {

  background:
    linear-gradient(
      to bottom,
      rgba(180,150,255,0.16),
      rgba(15,23,32,0.0)
    );
}

/* -------------------------------- */
/* Symbole */
/* -------------------------------- */

.character-symbol {

  width: 170px;
  height: 170px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,0.12);

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

  backdrop-filter: blur(10px);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 64px;

  color: #dcecf5;

  box-shadow:
    0 0 40px rgba(120,210,255,0.08);
}

/* -------------------------------- */
/* Inhalte */
/* -------------------------------- */

.character-content {

  padding: 44px;
}

.character-content h3 {

  margin:
    18px 0 24px;

  font-size: 40px;

  font-weight: 300;

  color: white;
}

.character-content p {

  color: var(--text-soft);

  line-height: 1.9;

  font-size: 17px;
}

/* -------------------------------- */
/* Kategorien */
/* -------------------------------- */

.category {

  text-transform: uppercase;

  letter-spacing: 5px;

  font-size: 12px;
}

.category-cyan {
  color: var(--cyan);
}

.category-green {
  color: var(--green);
}

.category-violet {
  color: var(--violet);
}

/* -------------------------------- */
/* Weltenbereich */
/* -------------------------------- */

.worlds {

  padding: 90px 60px;
}

.worlds-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;

  background:
    rgba(18,29,40,0.68);

  border:
    1px solid rgba(180,220,240,0.10);

  border-radius: 40px;

  padding: 70px;

  backdrop-filter: blur(14px);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.25);
}

.worlds h3 {

  font-size: 56px;

  line-height: 1.2;

  margin-bottom: 35px;

  font-weight: 300;

  color: white;
}

.worlds p {

  color: var(--text-soft);

  line-height: 1.9;

  font-size: 18px;
}

/* -------------------------------- */
/* Portal */
/* -------------------------------- */

.portal-box {

  position: relative;

  height: 420px;

  display: flex;

  justify-content: center;

  align-items: center;
}

.portal-ring {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid rgba(180,230,255,0.28);

  box-shadow:
    0 0 30px rgba(100,210,255,0.12);
}

.portal-ring:hover {

  cursor: pointer;

  transform:
    translateY(-10px)
    scale(1.015);

  border:
    1px solid rgba(150,230,255,0.28);

  box-shadow:
    0 30px 60px rgba(0,0,0,0.30);
}

.ring-1 {
  width: 320px;
  height: 320px;
}

.ring-2 {
  width: 220px;
  height: 220px;
}

.ring-3 {
  width: 120px;
  height: 120px;
}

.portal-text {

  text-align: center;
}

.portal-text p {

  text-transform: uppercase;

  letter-spacing: 4px;

  font-size: 12px;

  color: #8ca3b2;
}

.portal-text h4 {

  margin-top: 18px;

  font-size: 56px;

  font-weight: 300;

  color: white;
}

/* -------------------------------- */
/* Footer */
/* -------------------------------- */

.footer {

  text-align: center;

  padding: 60px 30px;

  color: #7c94a4;

  letter-spacing: 5px;

  font-size: 13px;
}

/* -------------------------------- */
/* Sterne */
/* -------------------------------- */

.star {

  position: fixed;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: white;

  opacity: 0.7;

  animation:
    floatStar linear forwards;
}

@keyframes floatStar {

  from {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-120px);
    opacity: 0;
  }
}

/* -------------------------------- */
/* Responsive */
/* -------------------------------- */
/* -------------------------------- */
/* Tablet */
/* -------------------------------- */

@media (max-width: 1100px) {

  .hero h2 {
    font-size: 64px;
  }

  .worlds-content {
    grid-template-columns: 1fr;
  }

  .portal-box {
    height: 320px;
  }
}

/* -------------------------------- */
/* Handy */
/* -------------------------------- */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* Header */

  .header {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 24px;

    padding: 24px 20px;
  }

  .logo {

    font-size: 34px;

    letter-spacing: 5px;
  }

  .subtitle {

    font-size: 12px;

    line-height: 1.5;
  }

  /* Navigation */

  .navigation {

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;
  }

  .navigation a {

    font-size: 11px;

    letter-spacing: 2px;
  }

  /* Hero */

  .hero {

    padding: 90px 20px 70px;
  }

  .hero-label {

    letter-spacing: 3px;

    font-size: 11px;
  }

  .hero h2 {

    font-size: 42px;

    line-height: 1.2;
  }

  .hero-text {

    margin-top: 30px;

    font-size: 17px;

    line-height: 1.8;
  }

  /* Buttons */

  .hero-buttons {

    flex-direction: column;

    align-items: center;

    gap: 16px;

    margin-top: 45px;
  }

  .button-primary,
  .button-secondary {

    width: 100%;

    max-width: 320px;

    padding: 16px 20px;

    font-size: 12px;
  }

  /* Charaktere */

  .characters {

    grid-template-columns: 1fr;

    padding: 20px;

    gap: 24px;
  }

  .character-card {

    border-radius: 28px;
  }

  .character-card:hover {

    transform: none;
  }

  .character-visual {

    height: 220px;
  }

  .character-symbol {

    width: 120px;
    height: 120px;

    font-size: 46px;
  }

  .character-content {

    padding: 28px;
  }

  .character-content h3 {

    font-size: 30px;

    margin-bottom: 18px;
  }

  .character-content p {

    font-size: 15px;

    line-height: 1.8;
  }

  .category {

    font-size: 10px;

    letter-spacing: 3px;
  }

  /* Welten */

  .worlds {

    padding: 20px;
  }

  .worlds-content {

    grid-template-columns: 1fr;

    gap: 40px;

    padding: 30px;

    border-radius: 30px;
  }

  .worlds h3 {

    font-size: 34px;

    margin-bottom: 22px;
  }

  .worlds p {

    font-size: 15px;

    line-height: 1.8;
  }

  /* Portal */

  .portal-box {

    height: 260px;
  }

  .ring-1 {
    width: 220px;
    height: 220px;
  }

  .ring-2 {
    width: 150px;
    height: 150px;
  }

  .ring-3 {
    width: 80px;
    height: 80px;
  }

  .portal-text h4 {

    font-size: 38px;
  }

  .portal-text p {

    font-size: 10px;
  }

  /* Footer */

  .footer {

    padding: 40px 20px;

    font-size: 11px;

    line-height: 1.8;

    letter-spacing: 3px;
  }
}

/* -------------------------------- */
/* Kleine Handys */
/* -------------------------------- */

@media (max-width: 480px) {

  .hero h2 {

    font-size: 34px;
  }

  .hero-text {

    font-size: 15px;
  }

  .logo {

    font-size: 28px;
  }

  .character-content {

    padding: 24px;
  }

  .worlds-content {

    padding: 24px;
  }

  .worlds h3 {

    font-size: 28px;
  }

  .portal-text h4 {

    font-size: 30px;
  }
}