body {
	font-family: Arial, sans-serif;
	font-size: 18px;
}

p {
   text-align: center;	
}

table{
	width: 100%;
	table-layout: fixed;
	margin: 0 auto;
	border: 3px solid lightblue;
	border-collapse: collapse;
	padding: 8px;
	text-align: center;
}

th, td{
	width: 33.3%;
	margin: 0 auto;
	border: 3px solid lightblue;
	border-collapse: collapse;
	padding: 8px;
	text-align: center;
}


#centerdiv {
  width: 80%; /* Oder eine feste Breite wie 300px */
  margin-left: auto;
  margin-right: auto;
  /* Oder einfach: */
  /* margin: 0 auto; */ /* 0 für oben/unten, auto für links/rechts */

  background-color: transparent;
  padding: 20px;
  text-align: center;	
}

#dreher{
  width: 150px;
  animation: pendeln 2s ease-in-out infinite;
  border-radius: 45%;
}

#dreher2{
  width: 180px;
  animation: pendeln 1.8s ease-in-out infinite;
  border-radius: 45%;
}

#dreher3{
  width: 110px;
  animation: pendeln 1.5s ease-in-out infinite;
  border-radius: 5%;
}

#dreher4{
  width: 110px;
  animation: pendeln 1.7s ease-in-out infinite;
  border-radius: 5%;
}

#dreher5{
  width: 110px;
  animation: pendeln 1.4s ease-in-out infinite;
  border-radius: 5%;
}

#dreher6{
  width: 110px;
  animation: pendeln 1.9s ease-in-out infinite;
  border-radius: 5%;
}

@keyframes pendeln {
  0% {
    transform: rotate(12deg);
  }
  
  50% {
    transform: rotate(-12deg);
  }
  
  100% {
    transform: rotate(12deg);
  }
}


.pendler{
  width: 110px;
  animation: pendeln 2.5s ease-in-out infinite;
  border-radius: 5%;
}

@keyframes pendler {
  0% {
    transform: rotate(8deg);
  }
  
  50% {
    transform: rotate(-8deg);
  }
  
  100% {
    transform: rotate(8deg);
  }
}	




.btn-container {
            position: relative;
        }

        .custom-button {
            /* Farben & Design */
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 18px 35px;
            font-size: 20px;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            border: none;
            cursor: pointer;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        /* Hover-Effekt: Vergrößern und Farbwechsel */
        .custom-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
            background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
        }

        /* Aktiver Klick-Zustand */
        .custom-button:active {
            transform: translateY(1px);
        }

        /* Die Puls-Animation im Hintergrund */
        .btn-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background-color: rgba(59, 130, 246, 0.4);
            border-radius: 50px;
            z-index: 0;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                width: 100%;
                height: 100%;
                opacity: 0.7;
            }
            100% {
                width: 120%;
                height: 160%;
                opacity: 0;
            }
        }