.form-row {
  margin-bottom: 1.2em;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.4em;
  font-size: 0.85em;
}

.required {
  color: red;
}

.form-name-group,
.form-select-group {
  display: flex;
  gap: 1em;
}

.form-name-group input,
.form-select-group select {
  flex: 1;
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.85em;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}

.form-name-group input:focus,
.form-select-group select:focus {
  border-color: #0077cc;
  outline: none;
  background-color: #fff;
}

.form-textarea-group textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.85em;
  background-color: #f9f9f9;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.3s;
}

.form-textarea-group textarea:focus {
  border-color: #0077cc;
  outline: none;
  background-color: #fff;
}

.contact-options {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.contact-option input[type="checkbox"] {
  display: none;
}

.contact-option i {
  font-size: 1.4em;
  color: #0077cc;
}

.contact-option input[type="checkbox"]:checked + i {
  color: #fff;
}

.contact-option input[type="checkbox"]:checked ~ * {
  background-color: #0077cc;
  color: #fff;
  box-shadow: 0 0 0 2px #0077cc33;
  border-radius: 6px;
}

.dsgvo-container {
  background-color: #f0f4f8;
  padding: 1em;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.dsgvo-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.8em;
  line-height: 1.4;
}

.dsgvo-text {
  margin-top: 0.2em;
}