/* Floating label styles */
.fieldwithfloatinglabel {
    position: relative;
    margin-top: 7px;
}
.fieldwithfloatinglabel label {
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 20px;
    transform: translateY(-50%);
    background: #f8f9fa; /* umbauen auf variable Farbe, je nach Theme */
    padding: 0 4px;
    transition: 0.2s ease all;
    font-size: 15px;
}
.fieldwithfloatinglabel input {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #e0e0e0; /* umbauen auf variable Farbe, je nach Theme */
    border-radius: 8px;
    box-sizing: border-box;
    background: #f6f8fc; /* umbauen auf variable Farbe, je nach Theme */
}
.fieldwithfloatinglabel input:focus {
    border-color: #1a73e8 !important;
    outline: none;
    background: #fff;
}
.fieldwithfloatinglabel input:focus ~ label,
.fieldwithfloatinglabel input:not(:placeholder-shown) ~ label {
    top: -8px;
    left: 8px;
    font-size: 12px;
    transform: none;
    color: #1a73e8;
}
.fieldwithfloatinglabel textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #e0e0e0; /* umbauen auf variable Farbe, je nach Theme */
    border-radius: 8px;
    box-sizing: border-box;
    background: #f6f8fc; /* umbauen auf variable Farbe, je nach Theme */
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}
.fieldwithfloatinglabel textarea:focus {
    border-color: #1a73e8 !important;
    outline: none;
    background: #fff;
}
.fieldwithfloatinglabel textarea:focus ~ label,
.fieldwithfloatinglabel textarea:not(:placeholder-shown) ~ label {
    top: -8px;
    left: 8px;
    font-size: 12px;
    transform: none;
    color: #1a73e8;
}

/* Checkbox styles passend zu Floating Labels */
.checkboxwithlabel {
    display: flex;
    align-items: center;
}
.checkboxwithlabel input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #1a73e8;
    border-radius: 6px;
    margin-right: 10px;
    border: 1px solid #e0e0e0;
    background: #f6f8fc;
}
.checkboxwithlabel label {
    font-size: 15px;
    color: #333;
    margin-bottom: 0;
    cursor: pointer;
}

.checkbox-row {
    display: flex;
    gap: 32px; /* Abstand zwischen den Checkboxen */
}

/* Select with floating label styles - identical to fieldwithfloatinglabel */
.selectwithfloatinglabel {
    position: relative;
    margin-top: 7px;
}
.selectwithfloatinglabel label {
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 20px;
    transform: translateY(-50%);
    background: #f8f9fa; /* umbauen auf variable Farbe, je nach Theme */
    padding: 0 4px;
    transition: 0.2s ease all;
    font-size: 15px;
}
.selectwithfloatinglabel select {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #e0e0e0; /* umbauen auf variable Farbe, je nach Theme */
    border-radius: 8px;
    box-sizing: border-box;
    background: #f6f8fc; /* umbauen auf variable Farbe, je nach Theme */
    appearance: none; /* Remove default select styling */
    cursor: pointer;
}
.selectwithfloatinglabel select:focus {
    border-color: #1a73e8 !important;
    outline: none;
    background: #fff;
}
.selectwithfloatinglabel select:focus ~ label,
.selectwithfloatinglabel select:not([value=""]):not(:invalid) ~ label {
    top: -8px;
    left: 8px;
    font-size: 12px;
    transform: none;
    color: #1a73e8;
}

/* Custom dropdown arrow for select */
.selectwithfloatinglabel::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 14px; /* Match select padding-right */
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 12px;
}
.selectwithfloatinglabel select {
    width: 100%;
    padding: 10px 35px 10px 14px; /* Add right padding to make room for arrow */
    font-size: 16px;
    border: 1px solid #e0e0e0; /* umbauen auf variable Farbe, je nach Theme */
    border-radius: 8px;
    box-sizing: border-box;
    background: #f6f8fc; /* umbauen auf variable Farbe, je nach Theme */
    appearance: none; /* Remove default select styling */
    cursor: pointer;
}

/* Button styles passend zu den Eingabefeldern */
/* Beispiel: */
/* <!-- Einzelner Primary Button -->
<button class="button-primary">Absenden</button>

<!-- Einzelner Secondary Button -->
<button class="button-secondary">Abbrechen</button>

<!-- Button Gruppe -->
<div class="button-group">
    <button class="button-secondary">Abbrechen</button>
    <button class="button-primary">Senden</button>
</div> */

.button-primary {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    background: #1a73e8;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-top: 16px;
}

.button-primary:hover {
    background: #1557b0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.button-primary:active {
    background: #1043a0;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.4);
}

.button-secondary {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f6f8fc;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-top: 16px;
}

.button-secondary:hover {
    background: #fff;
    border-color: #1a73e8;
    color: #1a73e8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.button-secondary:active {
    background: #f0f4ff;
    transform: translateY(0);
}

/* Inline Button Gruppe für nebeneinander stehende Buttons */
.button-group {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.button-group .button-primary,
.button-group .button-secondary {
    margin-top: 0;
    flex: 1;
}