#kontakt {display:flex; justify-content:center; align-items:center; padding:20px;}

.floating-group {
  position: relative;
  margin-bottom: 20px;
}

.kurz {
  width:calc(45vw - 6px); max-width: 248px; display:inline-block;
}

.lang {
  width:90vw; max-width: 500px; display:block;
}


/* Input-Styling */
.floating-group input {
  width: 100%;
  padding: 12px 10px 5px 10px; /* Mehr Platz oben für das Label */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

/* Label-Standardposition (sieht aus wie ein Platzhalter) */
.floating-group label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 16px;
  transition: all 0.2s ease; /* Macht die Animation flüssig */
  pointer-events: none; /* Klicks gehen durch das Label aufs Input-Feld */
}

/* Wenn das Input fokussiert ist ODER nicht leer ist (:not(:placeholder-shown)) */
.floating-group input:focus ~ label, 
.floating-group input:not(:placeholder-shown) ~ label {
  top: 0px;
  transform: translateY(-50%); 
  font-size: 12px;
  color: #007bff; /* Farbe des Labels im aktiven Zustand */
  background-color: white; /* Verhindert, dass der Rahmen durchschaut */
  padding: 0 4px;
  left: 8px;
}

/* Optional: Rahmenfarbe ändern bei Fokus */
.floating-group input:focus {
  border-color: #007bff;
}


.floating-group {
  position: relative;
  margin-bottom: 25px;


}

.floating-group textarea,
.floating-group select {
  width: 100%;
  padding: 14px 10px 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  background-color: white;
  outline: none;
  box-sizing: border-box;
}

.floating-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Label-Standardposition (im Feld) */
.floating-group label {
  position: absolute;
  left: 10px;
  top: 18px; /* Leicht angepasst für die Höhe */
  color: #999;
  font-size: 16px;
  transition: all 0.2s ease;
  pointer-events: none;
}

/* Für Textarea: Wenn fokussiert oder Text drin ist */
.floating-group textarea:focus ~ label,
.floating-group textarea:not(:placeholder-shown) ~ label,
/* Für Select: Wenn fokussiert oder eine valide Option (nicht die leere erste) gewählt ist */
.floating-group select:focus ~ label,
.floating-group select:valid ~ label {
  top: 0;
  transform: translateY(-50%); /* Setzt das Label genau auf den oberen Rahmen */
  font-size: 12px;
  color: #007bff;
  background-color: white;
  padding: 0 4px;
  left: 8px;
}

/* Fokus-Rahmenfarbe */
.floating-group textarea:focus,
.floating-group select:focus {
  border-color: #007bff;
}