/* =====================================================
   TenDance Nimbuscloud Formular
===================================================== */

:root {
    --td-background: #16163f;
    --td-field-background: #ffffff;
    --td-field-text: #16163f;
    --td-placeholder: #8d8d99;
    --td-accent: #7676ff;
    --td-error: #ffaaaa;
    --td-radius: 22px;
    --td-gap: 30px;
}

/* =====================================================
   Grunddesign
===================================================== */

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--td-background) !important;
}

body {
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif;
}

/* Sämtliche Überschriften weiß darstellen */

h1,
h2,
h3,
h4,
h5,
h6,
.page-header,
.form-title,
.form-heading,
legend {
    color: #ffffff !important;
}

/* Optional vorhandene Abstände der Überschriften */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

/* Texte und Absätze innerhalb des Formulars */

form p,
form span,
form small {
    color: inherit;
}

/* =====================================================
   Überschriften innerhalb des Formular-Grids
===================================================== */

form > h1,
form > h2,
form > h3,
form > h4,
form > h5,
form > h6,
form > legend,
form > .form-title,
form > .form-heading {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;

    margin: 10px 0 0 !important;

    color: #ffffff !important;
    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box;
}
/* =====================================================
   Formular-Grid
===================================================== */

form {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--td-gap);
    row-gap: 32px;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 65px 70px;
    box-sizing: border-box;
}

/*
Standardmäßig nehmen normale Formulargruppen und
Icon-Auswahlfelder die gesamte Breite ein.
*/

form > .form-group,
form > .form-icon-choice {
    grid-column: span 12;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Falls .form-icon-choice innerhalb einer .form-group liegt */

form > .form-group > .form-icon-choice,
form .form-icon-choice {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
}

/* =====================================================
   Spaltenbreiten anhand der Klasse
===================================================== */

/*
Die Spaltenklasse kann entweder direkt auf der Formulargruppe,
auf .form-icon-choice oder auf einem darin enthaltenen Feld liegen.
*/

form > .form-group.col-100,
form > .form-icon-choice.col-100,
form > .form-group:has(.col-100),
form > .form-icon-choice:has(.col-100) {
    grid-column: span 12;
}

form > .form-group.col-75,
form > .form-icon-choice.col-75,
form > .form-group:has(.col-75),
form > .form-icon-choice:has(.col-75) {
    grid-column: span 9;
}

form > .form-group.col-66,
form > .form-icon-choice.col-66,
form > .form-group:has(.col-66),
form > .form-icon-choice:has(.col-66) {
    grid-column: span 8;
}

form > .form-group.col-50,
form > .form-icon-choice.col-50,
form > .form-group:has(.col-50),
form > .form-icon-choice:has(.col-50) {
    grid-column: span 6;
}

form > .form-group.col-33,
form > .form-icon-choice.col-33,
form > .form-group:has(.col-33),
form > .form-icon-choice:has(.col-33) {
    grid-column: span 4;
}

form > .form-group.col-25,
form > .form-icon-choice.col-25,
form > .form-group:has(.col-25),
form > .form-icon-choice:has(.col-25) {
    grid-column: span 3;
}

/*
Das eigentliche Eingabefeld füllt seinen Wrapper vollständig aus.
*/

form .form-control,
form input:not([type="radio"]):not([type="checkbox"]),
form select,
form textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* =====================================================
   Beschriftungen
===================================================== */

.form-group label,
.form-icon-choice label {
    display: inline-block;
    margin: 0 0 12px;
    color: #ffffff !important;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.required-item {
    display: inline-block;
    margin-left: 5px;
    color: #ffffff !important;
    font-size: 19px;
}

/* Falls der Stern durch Nimbuscloud in einer neuen Zeile landet */

.form-group label + .required-item,
.form-icon-choice label + .required-item {
    vertical-align: top;
}

/* =====================================================
   Eingabefelder
===================================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
    min-height: 66px;
    padding: 18px 24px !important;

    border: 2px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: var(--td-radius) !important;

    background: var(--td-field-background) !important;
    color: var(--td-field-text) !important;

    font-family: inherit;
    font-size: 18px !important;
    line-height: 1.4;

    outline: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Textbereich */

textarea.form-control,
textarea {
    min-height: 220px;
    padding: 22px 24px !important;
    resize: vertical;
}

/* Platzhalter */

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--td-placeholder) !important;
    opacity: 1;
}

/* Fokus */

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--td-accent) !important;
    box-shadow:
        0 0 0 5px rgba(118, 118, 255, 0.25),
        0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

/* =====================================================
   Auswahlfelder
===================================================== */

select {
    cursor: pointer;
}

select option {
    background: #ffffff;
    color: #16163f;
}

/* =====================================================
   Icon-Auswahl
===================================================== */

/*
Nimbuscloud kann die auswählbaren Elemente innerhalb von
.form-icon-choice unterschiedlich verschachteln. Deshalb werden
mehrere mögliche Strukturen unterstützt.
*/

.form-icon-choice {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(210px, 100%), 1fr)
    );
    gap: 18px;
    align-items: stretch;
}

/*
Überschriften und Beschreibungstexte innerhalb der Icon-Auswahl
sollen über die volle Breite laufen.
*/

.form-icon-choice > h1,
.form-icon-choice > h2,
.form-icon-choice > h3,
.form-icon-choice > h4,
.form-icon-choice > h5,
.form-icon-choice > h6,
.form-icon-choice > legend,
.form-icon-choice > p,
.form-icon-choice > .form-label,
.form-icon-choice > label {
    grid-column: 1 / -1;
    color: #ffffff !important;
}

/* Einzelne Auswahlkarten */

.form-icon-choice .form-check,
.form-icon-choice .radio,
.form-icon-choice .checkbox,
.form-icon-choice .choice,
.form-icon-choice .icon-choice {
    min-width: 0;
    box-sizing: border-box;
}

/*
Kartenartige Darstellung der Auswahl.
Die Selektoren greifen sowohl bei klassischen Labels
als auch bei direkt klickbaren Auswahlcontainern.
*/

.form-icon-choice .form-check,
.form-icon-choice .radio,
.form-icon-choice .checkbox,
.form-icon-choice .choice,
.form-icon-choice .icon-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 76px;
    padding: 18px 20px;

    border: 2px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--td-radius);

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

    cursor: pointer;
    box-sizing: border-box;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.form-icon-choice .form-check:hover,
.form-icon-choice .radio:hover,
.form-icon-choice .checkbox:hover,
.form-icon-choice .choice:hover,
.form-icon-choice .icon-choice:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Beschriftungen innerhalb der Auswahlkarten */

.form-icon-choice .form-check label,
.form-icon-choice .radio label,
.form-icon-choice .checkbox label,
.form-icon-choice .choice label,
.form-icon-choice .icon-choice label {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    margin: 0;

    color: #ffffff !important;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

/* Bilder und Icons */

.form-icon-choice img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: 0 0 auto;
}

.form-icon-choice i,
.form-icon-choice svg {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 32px;
}

/* =====================================================
   Radio-Buttons und Checkboxen
===================================================== */

input[type="radio"],
input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-height: auto !important;
    flex: 0 0 22px;

    margin: 0 9px 0 0;
    padding: 0 !important;

    vertical-align: middle;
    accent-color: var(--td-accent);
    box-shadow: none !important;
}

.form-check,
.radio,
.checkbox {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.7;
}

/* =====================================================
   Button
===================================================== */

button,
input[type="submit"],
.btn,
.btn-primary {
    min-height: 64px;
    padding: 17px 36px !important;

    border: 0 !important;
    border-radius: var(--td-radius) !important;

    background: #ffffff !important;
    color: #16163f !important;

    font-size: 18px !important;
    font-weight: 700;

    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.26);
}

/* =====================================================
   Fehlermeldungen
===================================================== */

.error,
.invalid-feedback,
.help-block {
    display: block;
    margin-top: 9px;
    color: var(--td-error) !important;
    font-size: 15px;
}

/* =====================================================
   Tablet
===================================================== */

@media (max-width: 900px) {

    form {
        padding: 40px 35px 60px;
        column-gap: 22px;
    }

    form > .form-group.col-75,
    form > .form-group.col-66,
    form > .form-icon-choice.col-75,
    form > .form-icon-choice.col-66,
    form > .form-group:has(.col-75),
    form > .form-group:has(.col-66),
    form > .form-icon-choice:has(.col-75),
    form > .form-icon-choice:has(.col-66) {
        grid-column: span 12;
    }

    form > .form-group.col-50,
    form > .form-group.col-33,
    form > .form-group.col-25,
    form > .form-icon-choice.col-50,
    form > .form-icon-choice.col-33,
    form > .form-icon-choice.col-25,
    form > .form-group:has(.col-50),
    form > .form-group:has(.col-33),
    form > .form-group:has(.col-25),
    form > .form-icon-choice:has(.col-50),
    form > .form-icon-choice:has(.col-33),
    form > .form-icon-choice:has(.col-25) {
        grid-column: span 6;
    }

    .form-icon-choice {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(180px, 100%), 1fr)
        );
    }
}

/* =====================================================
   Smartphone
===================================================== */

@media (max-width: 650px) {

    form {
        display: block !important;
        padding: 28px 20px 45px;
    }

    form > .form-group,
    form > .form-icon-choice {
        width: 100% !important;
        margin-bottom: 28px !important;
    }

    .form-group label,
    .form-icon-choice > label,
    .form-icon-choice > .form-label {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        min-height: 60px;
        padding: 16px 20px !important;
        border-radius: 19px !important;
        font-size: 17px !important;
    }

    textarea.form-control,
    textarea {
        min-height: 190px;
    }

    .form-icon-choice {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .form-icon-choice .form-check,
    .form-icon-choice .radio,
    .form-icon-choice .checkbox,
    .form-icon-choice .choice,
    .form-icon-choice .icon-choice {
        min-height: 68px;
        padding: 15px 17px;
        border-radius: 19px;
    }

    .form-icon-choice img {
        width: 44px;
        height: 44px;
    }
}


/* =====================================================
   KORREKTUR: Texte und Beschreibungselemente
   Diesen Block ganz am Ende des CSS einfügen
===================================================== */

/* Normale Formulargruppen dürfen ihren Inhalt nicht
   selbst als mehrspaltiges Grid darstellen */

form > .form-group {
    display: block !important;
    min-width: 0 !important;
}

/* Sämtliche normalen Texte erhalten die komplette Breite */

form > p,
form > div:not(.form-group):not(.form-icon-choice),
form > section,
form > article,
form > .description,
form > .form-description,
form > .help-text,
form > .form-text {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    display: block !important;
    box-sizing: border-box;
}

/* Texte innerhalb einer Formulargruppe */

.form-group p,
.form-group div,
.form-group span,
.form-group small,
.form-group .description,
.form-group .form-description,
.form-group .help-text,
.form-group .form-text {
    max-width: 100% !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

/* Normale Absatzdarstellung */

form p,
form .description,
form .form-description,
form .help-text,
form .form-text {
    margin: 0 0 20px !important;

    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    text-align: left !important;
    letter-spacing: normal !important;
}

/* Größere Beschreibungstexte oder Zwischenüberschriften */

form .description-title,
form .section-title {
    grid-column: 1 / -1 !important;
    width: 100% !important;

    margin: 18px 0 10px !important;

    color: #ffffff !important;
    font-size: clamp(28px, 3vw, 44px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Überschriften immer vollständig darstellen */

form h1,
form h2,
form h3,
form h4,
form h5,
form h6,
form legend {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    color: #ffffff !important;
    line-height: 1.25 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* =====================================================
   KORREKTUR: Icon-Auswahl
===================================================== */

/*
   Der bisherige Selektor

   .form-icon-choice > div

   ist zu allgemein und sorgt dafür, dass normale Textcontainer
   zu schmalen Grid-Spalten werden.
*/

.form-icon-choice > div {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* Nur tatsächliche Auswahlkarten sind einzelne Grid-Elemente */

.form-icon-choice > .form-check,
.form-icon-choice > .radio,
.form-icon-choice > .checkbox,
.form-icon-choice > .choice,
.form-icon-choice > .icon-choice {
    grid-column: auto !important;
    width: auto !important;
}

/* Textcontainer innerhalb einer Icon-Auswahl */

.form-icon-choice > p,
.form-icon-choice > small,
.form-icon-choice > span,
.form-icon-choice > .description,
.form-icon-choice > .form-description,
.form-icon-choice > .help-text,
.form-icon-choice > .form-text {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    color: #ffffff !important;
    line-height: 1.6 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* =====================================================
   KORREKTUR: Spaltenklassen
===================================================== */

/*
   Nur direkte Kinder werden geprüft.
   Dadurch lösen verschachtelte Klassen nicht versehentlich
   eine falsche Spaltenbreite aus.
*/

form > .form-group:has(> .col-100),
form > .form-icon-choice:has(> .col-100) {
    grid-column: span 12 !important;
}

form > .form-group:has(> .col-75),
form > .form-icon-choice:has(> .col-75) {
    grid-column: span 9 !important;
}

form > .form-group:has(> .col-66),
form > .form-icon-choice:has(> .col-66) {
    grid-column: span 8 !important;
}

form > .form-group:has(> .col-50),
form > .form-icon-choice:has(> .col-50) {
    grid-column: span 6 !important;
}

form > .form-group:has(> .col-33),
form > .form-icon-choice:has(> .col-33) {
    grid-column: span 4 !important;
}

form > .form-group:has(> .col-25),
form > .form-icon-choice:has(> .col-25) {
    grid-column: span 3 !important;
}

/* =====================================================
   Checkboxen mit langen Texten
===================================================== */

.form-group:has(input[type="checkbox"]),
.form-group:has(input[type="radio"]) {
    min-width: 0 !important;
}

.form-group input[type="checkbox"] + label,
.form-group input[type="radio"] + label {
    display: inline !important;

    width: auto !important;
    max-width: calc(100% - 45px) !important;
    margin: 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    vertical-align: middle;
    line-height: 1.5 !important;
}

/* Falls Checkbox und Text gemeinsam in einem Container liegen */

.form-check,
.radio,
.checkbox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* =====================================================
   Smartphone
===================================================== */

@media (max-width: 650px) {

    form p,
    form .description,
    form .form-description,
    form .help-text,
    form .form-text {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    form h1 {
        font-size: 32px !important;
    }

    form h2 {
        font-size: 27px !important;
    }

    form h3 {
        font-size: 23px !important;
    }

    form .description-title,
    form .section-title {
        font-size: 27px !important;
    }

    .form-icon-choice > div {
        width: 100% !important;
    }
}