@charset "UTF-8";
/*
 * Estrel Tower — Form Block (wraps Contao tl_form rendering)
 * Figma 682:279  (1980 × 770, x-off -30; ie full-bleed)
 *
 * Layout:
 *   BG  Cream #FEF5EC full-bleed
 *   BG-Image  1592 × 619  at x=193 y=96  (inset banner)
 *   Title left  Söhne 40/54 #14172D  3 lines  at x=235 y=121
 *   Form right   Inputs underline #14172D w1
 *      labels  Söhne 18/27 #14172D
 *      grid    2-col (Anrede|Betreff*) (Vorname|Nachname*) (E-Mail*|Telefon)
 *      Nachricht textarea full-width on cream #FFFBF7
 *      Datenschutz checkbox + label
 *      Submit  Pill #FED3CD GT Alpina italic 19/22 ls=2.09
 */

.estrel-form-block {
    container-type: inline-size;
    width: 100%;
    background: #FEF5EC;
    color: #14172D;
}

.estrel-form-block__inner {
    --u: calc(100cqi / 1920);
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding: calc(96 * var(--u)) calc(193 * var(--u));
    display: grid;
    grid-template-columns: minmax(0, calc(560 * var(--u))) minmax(0, 1fr);
    gap: calc(80 * var(--u));
    min-height: calc(770 * var(--u));
}

.estrel-form-block__bg {
    position: absolute;
    top: calc(96 * var(--u));
    left: calc(193 * var(--u));
    width: calc(1592 * var(--u));
    height: calc(619 * var(--u));
    object-fit: cover;
    z-index: 0;
    border-radius: calc(3 * var(--u));
    pointer-events: none;
}

.estrel-form-block__title-col,
.estrel-form-block__form-col {
    position: relative;
    z-index: 1;
}

.estrel-form-block__title-col {
    padding: calc(25 * var(--u)) 0 0 calc(42 * var(--u));
}

.estrel-form-block__title {
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(54 * var(--u));
    color: #14172D;
    margin: 0;
}

.estrel-form-block__title-line { display: block; }

/* First title line ("Get in touch") in GT Alpina italic */
.estrel-form-block__title-line:first-child {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
}

/* Form-Col rendering (Contao Form): form > .formbody > .widget */
.estrel-form-block__form-col form { width: 100%; }

.estrel-form-block__form-col .formbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(60 * var(--u));
    row-gap: calc(28 * var(--u));
    padding: calc(20 * var(--u)) 0 0;
}

.estrel-form-block__form-col .widget {
    margin: 0;
    width: 100%;
}

/* Full-width fields (textarea, submit, captcha, datenschutz, hidden) */
.estrel-form-block__form-col .widget-textarea,
.estrel-form-block__form-col .widget-submit,
.estrel-form-block__form-col .widget-checkbox,
.estrel-form-block__form-col .widget-explanation,
.estrel-form-block__form-col .widget-captcha {
    grid-column: 1 / -1;
}

/* Token / hidden inputs Contao injects at the top of formbody */
.estrel-form-block__form-col .formbody > input[type="hidden"] {
    display: none;
}

.estrel-form-block__form-col label {
    display: block;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: #14172D;
    margin: 0 0 calc(10 * var(--u));
}

/* Hide Contao's "Pflichtfeld" / "Mandatory field" screen-reader prefix in labels */
.estrel-form-block__form-col label .invisible,
.estrel-form-block__form-col legend .invisible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Inline the mandatory "*" tightly with the field label */
.estrel-form-block__form-col label .mandatory,
.estrel-form-block__form-col legend .mandatory {
    color: #14172D;
}

.estrel-form-block__form-col input[type="text"],
.estrel-form-block__form-col input[type="email"],
.estrel-form-block__form-col input[type="tel"],
.estrel-form-block__form-col input[type="number"],
.estrel-form-block__form-col select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #14172D;
    padding: calc(8 * var(--u)) 0;
    font-family: 'Söhne', sans-serif;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: #14172D;
    border-radius: 0;
    outline: none;
}

.estrel-form-block__form-col select { appearance: none; }

.estrel-form-block__form-col input:focus,
.estrel-form-block__form-col select:focus,
.estrel-form-block__form-col textarea:focus {
    border-color: #14172D;
    outline: 1px dotted rgba(20, 23, 45, .3);
    outline-offset: 4px;
}

.estrel-form-block__form-col textarea {
    width: 100%;
    background: #FFFBF7;
    border: 0;
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    font-family: 'Söhne', sans-serif;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: #14172D;
    min-height: calc(152 * var(--u));
    resize: vertical;
}

/* Datenschutz block — Contao renders <fieldset><legend>+<span><input><label></span></fieldset>.
   Hide native <legend> entirely; insert a generated label via the fieldset's
   ::before pseudo so we control the layout end-to-end. */
.estrel-form-block__form-col .widget-checkbox fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    position: relative;
}

.estrel-form-block__form-col .widget-checkbox legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    margin: -1px;
    padding: 0;
}

.estrel-form-block__form-col .widget-checkbox fieldset::before {
    content: 'Datenschutz*';
    display: block;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(15 * var(--u));
    line-height: calc(22.5 * var(--u));
    color: #14172D;
    margin: 0 0 calc(8 * var(--u));
}

.estrel-form-block__form-col .widget-checkbox span {
    display: flex;
    align-items: flex-start;
    gap: calc(12 * var(--u));
}

.estrel-form-block__form-col .widget-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: calc(18 * var(--u));
    height: calc(14 * var(--u));
    border: 1px solid #14172D;
    background: #FFF2E5;
    border-radius: 1px;
    margin: calc(4 * var(--u)) 0 0;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
}

.estrel-form-block__form-col .widget-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: calc(2 * var(--u));
    background: #14172D;
}

.estrel-form-block__form-col .widget-checkbox label {
    margin: 0;
    font-size: calc(14 * var(--u));
    line-height: calc(21 * var(--u));
    font-weight: 300;
    color: #14172D;
    cursor: pointer;
    flex: 1 1 auto;
}

.estrel-form-block__form-col .widget-checkbox .mandatory {
    color: inherit;
    margin-left: 2px;
}

/* Submit pill */
.estrel-form-block__form-col .widget-submit { margin-top: calc(16 * var(--u)); }

.estrel-form-block__form-col button[type="submit"],
.estrel-form-block__form-col input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(30 * var(--u));
    min-width: calc(234 * var(--u));
    padding: 0 calc(28 * var(--u));
    background: #FED3CD;
    color: #14172D;
    border: 0;
    border-radius: calc(41.5 * var(--u));
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0.11em;
    cursor: pointer;
    transition: opacity .15s ease;
}

/* Empty button (no inner text, only value attr) — show pseudo */
.estrel-form-block__form-col button[type="submit"]:empty::after {
    content: attr(value);
}

.estrel-form-block__form-col button[type="submit"]:hover,
.estrel-form-block__form-col input[type="submit"]:hover { opacity: .85; }

.estrel-form-block__form-col .error,
.estrel-form-block__form-col p.error {
    color: #b32d2e;
    font-size: calc(14 * var(--u));
    margin-top: calc(4 * var(--u));
}

@media (max-width: 1024px) {
    .estrel-form-block__inner {
        padding: 64px 32px;
        grid-template-columns: 1fr;
        gap: 32px;
        min-height: 0;
    }
    .estrel-form-block__bg { position: relative; top: 0; left: 0; width: 100%; height: 240px; }
    .estrel-form-block__title-col { padding: 0; }
    .estrel-form-block__title { font-size: 32px; line-height: 42px; }
    .estrel-form-block__form-col .formbody {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        row-gap: 20px;
        padding: 0;
    }
    .estrel-form-block__form-col label { font-size: 16px; line-height: 24px; }
    .estrel-form-block__form-col input,
    .estrel-form-block__form-col select,
    .estrel-form-block__form-col textarea { font-size: 16px; line-height: 24px; }
    .estrel-form-block__form-col textarea { min-height: 140px; }
    .estrel-form-block__form-col button[type="submit"],
    .estrel-form-block__form-col input[type="submit"] { font-size: 18px; height: 44px; padding: 0 24px; }
    .estrel-form-block__form-col .widget-checkbox input[type="checkbox"] { width: 16px; height: 16px; }
}

@media (max-width: 767px) {
    .estrel-form-block__inner { padding: 48px 20px; }
    .estrel-form-block__bg { height: 180px; }
    .estrel-form-block__title { font-size: 26px; line-height: 34px; }
    .estrel-form-block__form-col .formbody {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 18px;
        padding: 0;
    }
    .estrel-form-block__form-col label { font-size: 16px; }
    .estrel-form-block__form-col input,
    .estrel-form-block__form-col select,
    .estrel-form-block__form-col textarea { font-size: 16px; }
    .estrel-form-block__form-col input[type="text"],
    .estrel-form-block__form-col input[type="email"],
    .estrel-form-block__form-col input[type="tel"],
    .estrel-form-block__form-col select { padding: 10px 0; min-height: 44px; }
    .estrel-form-block__form-col textarea { min-height: 120px; }
    .estrel-form-block__form-col button[type="submit"],
    .estrel-form-block__form-col input[type="submit"] { width: 100%; }
}