/* styles for typography and textelements */

/* Plus Jakarta Sans – Fließtext */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-Italic-VariableFont_wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
}

/* JetBrains Mono */
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100;
    src: url("./fonts/jetbrains-mono-v24-latin-100.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 100;
    src: url("./fonts/jetbrains-mono-v24-latin-100italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 200;
    src: url("./fonts/jetbrains-mono-v24-latin-200.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 200;
    src: url("./fonts/jetbrains-mono-v24-latin-200italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 300;
    src: url("./fonts/jetbrains-mono-v24-latin-300.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 300;
    src: url("./fonts/jetbrains-mono-v24-latin-300italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 400;
    src: url("./fonts/jetbrains-mono-v24-latin-italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    src: url("./fonts/jetbrains-mono-v24-latin-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 500;
    src: url("./fonts/jetbrains-mono-v24-latin-500italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 600;
    src: url("./fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 600;
    src: url("./fonts/jetbrains-mono-v24-latin-600italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    src: url("./fonts/jetbrains-mono-v24-latin-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 700;
    src: url("./fonts/jetbrains-mono-v24-latin-700italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 800;
    src: url("./fonts/jetbrains-mono-v24-latin-800.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 800;
    src: url("./fonts/jetbrains-mono-v24-latin-800italic.woff2") format("woff2");
}

:root {
    color-scheme: dark;
    --c-lila: #4d104a;
    --c-gold: #b0926b;
    --c-gold-soft: #c9b294;
    --c-gold-warm: #8a7250;
    --c-pastell: #ddd5f9;
    --c-weiss: #f5efed;
    --c-schwarz: #140014;

    --ff-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

body,
.casa-wdg {
    color: var(--c-weiss) !important;
    background-color: var(--c-lila);
}

.casa-wdg,
.casa-row,
.casa-col-md-12 {
    display: contents;
}

/* Casablanca-Grundstruktur */
.casa-wdg {
    width: 100% !important;
    color: var(--c-weiss);
}

.casa-wdg .casa-row {
    width: 100% !important;
    margin: 0 !important;
}

.casa-wdg .casa-col-md-12 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

.casa-wdg [class*="casa-col-"] {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

.casa-wdg .casa-form-group {
    margin: 0 !important;
}

.casa-wdg .casa-form-group .casa-col-md-2,
.casa-wdg .casa-form-group .casa-col-xs-12 {
    color: var(--c-weiss);
}

.casa-wdg .casa-form-group .casa-text-danger {
    color: var(--c-weiss);
}

/* Vorname und Nachname entfernen */
.casa-wdg .casa-form-group:has(#prename),
.casa-wdg .casa-form-group:has(#surname) {
    display: none !important;
}

/* E-Mail-Bereich */
.casa-wdg .casa-form-group:has(#emailaddress) {
    order: 1;
    flex: 1 1 24rem;
    min-width: 0;
}

.casa-wdg label[for="emailaddress"] {
    position: relative;
    display: block !important;

    width: 100% !important;
    height: 100%;
    margin: 0 !important;
}

.casa-wdg label[for="emailaddress"] > span {
    position: absolute;
    top: 0.7rem;
    left: 1rem;
    z-index: 2;

    width: auto !important;
    margin: 0;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.casa-wdg label[for="emailaddress"] > div {
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-wdg #emailaddress {
    display: block;

    width: 100% !important;
    min-height: 4.5rem;
    margin: 0 !important;
    padding: 1.65rem 1rem 0.55rem !important;

    color: var(--c-weiss) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: var(--ff-sans);
    font-size: 0.9rem;
}

.casa-wdg #emailaddress::placeholder {
    color: rgba(255, 255, 255, 0.48);
    opacity: 1;
}

.casa-wdg #emailaddress:focus {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--c-gold-warm) !important;
    box-shadow: none !important;
    outline: none;
}

/* Button */
.casa-wdg .casa-btn {
    order: 2;
    flex: 0 0 auto;
    align-self: flex-start;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    height: 4.5rem;
    min-height: 4.5rem;
    margin: 0 !important;
    padding: 1rem 1.75rem !important;

    color: var(--c-weiss) !important;
    background: var(--c-gold-warm) !important;
    border: 1px solid var(--c-gold-warm) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: var(--ff-mono);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;

    float: none !important;
}

.casa-wdg .casa-btn:hover,
.casa-wdg .casa-btn:focus-visible {
    color: var(--c-lila) !important;
    background: var(--c-weiss) !important;
    border-color: var(--c-weiss) !important;
    outline: none;
}

/* Zustimmung unterhalb der Zeile */
.casa-wdg .casa-form-group:has(#storageCompliance) {
    order: 3;
    flex: 0 0 100%;

    margin-top: 0.85rem !important;
}

.casa-wdg .casa-checkbox {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-wdg .casa-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;

    width: 100%;
    margin: 0;

    color: var(--c-weiss);
    font-family: var(--ff-sans);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

.casa-wdg .casa-checkbox input[type="checkbox"] {
    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;
    margin: 0.1rem 0 0;

    accent-color: var(--c-gold-warm);
}

.casa-wdg .casa-checkbox .casa-text-danger {
    color: var(--c-weiss) !important;
}


/* Mobile: Feld und Button untereinander */
@media (max-width: 40em) {
    .casa-wdg .casa-col-md-12 {
        flex-direction: column !important;
    }

    .casa-wdg .casa-form-group:has(#emailaddress),
    .casa-wdg .casa-btn {
        flex: 0 0 100%;
        width: 100% !important;
    }
}


/* Ungültiges E-Mail-Feld */
.casa-wdg #emailaddress.k-invalid {
    border-color: var(--c-gold-warm) !important;
}

/* Fehlermeldung unter dem Feld */
.casa-wdg .help-block.k-invalid-msg {
    display: block !important;
    margin: 0.4rem 0 0 1rem !important;

    color: var(--c-gold-warm) !important;
    font-family: var(--ff-sans);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.3;
}


.casa-wdg .help-block.k-invalid-msg small {
    color: inherit !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* E-Mail und Button ohne Abstand verbinden */
.casa-wdg .casa-col-md-12 {
    gap: 0;
}

/* Validierungsfehler direkt unter dem E-Mail-Feld */
.casa-wdg .casa-form-group:has(#emailaddress) {
    position: relative;
}

.casa-wdg .casa-field-validation-error,
.casa-wdg .field-validation-error,
.casa-wdg [data-valmsg-for] {
    position: absolute;
    bottom: 0;
    left: 1rem;

    color: var(--c-gold-warm) !important;
    font-family: var(--ff-sans);
    font-size: 0.68rem;
    line-height: 1;
}

/* Checkbox besser ausrichten */
.casa-wdg .casa-form-group:has(#storageCompliance) {
    order: 3;
    flex: 0 0 100%;

    width: 100%;
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
}

.casa-wdg .casa-checkbox {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-wdg .casa-checkbox label {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.75rem;

    width: 100%;
    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ff-sans);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
}

.casa-wdg .casa-checkbox input[type="checkbox"] {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0.12rem 0 0;
}

.casa-wdg .casa-checkbox input[type="checkbox"]::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;

    background: var(--c-gold-warm);
    transform: scale(0);
    transition: transform 0.2s ease;
}

.casa-wdg .casa-checkbox input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.casa-wdg .casa-checkbox input[type="checkbox"]:focus-visible {
    outline: 1px solid var(--c-gold-warm);
    outline-offset: 2px;
}

/* Button gleich hoch wie das Feld */
.casa-wdg .casa-btn {
    min-width: 8rem;
    min-height: 4.5rem;
}