/* Allgemeines Layout */
html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wrapper */
#main-frame-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* <-- Mitte! */
  overflow: hidden;
  position: relative;
}
/* Skalierter Container */
.scale-container {
  width: 1200px;
  height: 600px;
  transform-origin: top center;
  transform: scale(1);
}

/* Frame */
.frame {
  width: 1200px;
  height: 600px;
  background: url('bilder/page01.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* Welten */
.world {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 0;
  visibility: hidden;  /* NEU: verhindert Paginator-Überlagerung */
}

.world.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
  visibility: visible; /* NEU */
}

/* Startseite */
#start {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start-buttons img {
  margin: 0 10px;
  cursor: pointer;
}

/* Swipe-System */
.swipe-wrapper {
  display: flex;
  width: 6000px; /* 5 Seiten je 1200px */
  height: 100%;
  transition: transform 0.3s ease;
}

.swipe-page {
  width: 1200px;
  height: 600px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Paginator */
/* Allgemeine Dots */
.pagination {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* Standard Dot */
.dot {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
}

/* Aktiver Standard Dot */
.dot.active {
  background-color: #fff;
}

/* ---------- ABOUT (Kreise, rot) ---------- */
#about .dot {
  border-radius: 50%;
  background-color: #f3c9d1; /* zartes Rosa */
}

#about .dot.active {
  background-color: #c12b47; /* kräftiges Rot */
}

/* ---------- SKILLS (Quadrate, grün) ---------- */
#skills .dot {
  border-radius: 0; /* Quadrat */
  background-color: #cde7bd; /* zartes Grün */
}

#skills .dot.active {
  background-color: #4ea11c; /* kräftiges Grün */
}

/* ---------- PRACTICE (Dreiecke, blau) ---------- */
#practice .dot {
  width: 0;
  height: 0;
  margin: 0 12px;
  background: none;
  border: none;
  position: relative;
}

#practice .dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #a3b5e7; /* zartes Blau */
}

#practice .dot.active::before {
  border-bottom-color: #5475c2; /* kräftiges Blau */
}

/* Skalierung der Dots bei kleineren Viewports */
@media (max-width: 1250px) {
  .dot {
    width: 10px;
    height: 10px;
  }

  #practice .dot {
    margin: 0 10px;
  }

  #practice .dot::before {
    left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #a3b5e7;
  }

  #practice .dot.active::before {
    border-bottom-color: #5475c2;
  }
}

/* Floating Navigation */
.floating-nav {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column; /* vertikal statt horizontal */
  gap: 10px;
  z-index: 9999;
}

.hidden {
  display: none;
}

/* Footer */
.footer-frame {
  width: 1200px;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px 20px 0 20px;
  box-sizing: border-box;
  margin-top: 10px;
}

.footer-frame a {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
}

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

/* Impressum */
.impressum-content {
  color: white;
  text-align: center;                /* Text zentriert */
  padding: 60px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  max-width: 600px;                  /* Optionale Begrenzung */
  margin: 0 auto;                    /* Block zentrieren */
  position: relative;               /* Für zusätzliche Kontrolle */
  top: 50%;                         /* Vertikal zentriert */
  transform: translateY(-50%);     /* Korrektur der Vertikalen */
}
}

/* Skalierung bei kleiner Bildschirmbreite */
@media (max-width: 1200px) {
  .scale-container {
    transform: scale(calc(100vw / 1200));
  }
}

body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Standard */
}