/* ==============================
   Allgemeines Layout
============================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 5px;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  background-color: #f2e6ff;
}

/* ==============================
   Navigation Bar
============================== */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color 5s ease;
}

ul li a:hover:not(.active) {
  background-color: #F0003A;
  transform: scale(1.5);      /////////////
  transition: transform 1s ease, background-color 1s ease;
}

ul li a.active {
  background-color: #04AA6D;
}

/* Etwas Abstand unter der Navbar */
h1, form, table {
  margin: 15px;
}

/* ==============================
   Tabellen & Beschriftungen
============================== */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

label {
  display: inline-block;
  width: 120px;
  margin-top: 5px;
}

/* ==============================
   Eingabefelder & Textbereiche
============================== */
input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
  background-color: #e7f0ff;
  border: 1px solid #0078d7;
  border-radius: 30px;
  padding: 6px 10px;
  font-size: 15px;
  color: #000;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  margin-bottom: 10px;
  -webkit-appearance: none;
  appearance: none;
}

/* Dropdown mit eigenem Pfeil */
select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #005fa3 50%),
                    linear-gradient(135deg, #005fa3 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px),
                       calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Fokuszustand */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #005fa3;
  box-shadow: 0 0 6px rgba(0,120,215,0.45);
  transform: translateY(-1px);
}

/* ==============================
   Buttons
============================== */
input[type="button"],
button {
  background-color: #0078d7;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.5 ease, background-color 2s ease, box-shadow 0.18s ease;
}

input[type="button"]:hover,
button:hover {
  transform: scale(3);
  background-color: #005fa3;
  box-shadow: 0 6px 14px rgba(0,95,163,0.25);
}

input[type="button"]:focus,
button:focus {
  outline: 3px solid #cde4ff;
  outline-offset: 2px;
}

/* ==============================
   Mobile Ansicht
============================== */
@media (max-width: 600px) {
  input,
  select,
  textarea {
    width: 100%;
  }

  ul {
    flex-direction: column;
  }

  ul li a {
    text-align: center;
  }
}

/* ==============================
   Crazy Button mit animierendem Farbverlauf
============================== */
.crazy {
  position: relative;
  display: inline-block;      /* kleiner, nicht volle Breite */
  width: auto;
  height: auto;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  background: #0078d7;
  z-index: 0;
  transition: transform 0.2s ease;
  animation: bounce 1.5s ease-in-out infinite; /* Hüpfen! */
}

/* Farbverlaufsebene */
.crazy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet, red);
  background-size: 600% 600%;
  z-index: -1;
  animation: crazyGradient 6s linear infinite;
}

/* Hüpfanimation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-10px) scale(1.05);
  }
  50% {
    transform: translateY(0) scale(0.97);
  }
  75% {
    transform: translateY(-5px) scale(1.03);
  }
}

/* Farbverlaufsbewegung */
@keyframes crazyGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}