/* ============================================================
   VK Bautrocknung – Modernisierte Formularbereiche
   Eigenständige Datei: Entfernen des <link> stellt den alten
   Zustand des Layouts wieder her.
   ============================================================ */

:root {
    --vk-orange:      #ec671b;
    --vk-orange-dark: #cf560f;
    --vk-amber:       #FF9933;
    --vk-dark:        #2a2d33;
    --vk-slate:       #596570;
    --vk-muted:       #7b848d;
    --vk-line:        #e3e7ea;
    --vk-field:       #f6f8f9;
    --vk-radius:      10px;
}

/* ---------- gemeinsame Formular-Karte ---------- */
.vk-card {
    background: #fff;
    border: 1px solid var(--vk-line);
    border-radius: var(--vk-radius);
    box-shadow: 0 3px 18px rgba(28, 36, 43, .07);
    overflow: hidden;
}
.vk-card__head {
    background: var(--vk-dark);
    padding: 20px 26px;
    border-bottom: 3px solid var(--vk-orange);
}
.vk-card__head h3,
.vk-card__head .vk-card__title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.35;
}
.vk-card__head p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #b3bcc4;
    margin: 0;
    font-weight: 400;
}
.vk-card__body { padding: 24px 26px 26px; }

/* ---------- Felder ---------- */
.vk-form .vk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}
.vk-form .vk-col     { flex: 1 1 100%; min-width: 0; }
/* Zweispaltig, wenn Platz ist - bricht in schmalen Seitenleisten
   automatisch auf eine Spalte um. */
.vk-form .vk-col-2   { flex: 1 1 195px; min-width: 0; }

.vk-field { margin-bottom: 16px; }
.vk-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--vk-slate);
    margin-bottom: 6px;
}
.vk-field label .req { color: var(--vk-orange); margin-left: 2px; }

.vk-form input[type="text"],
.vk-form input[type="email"],
.vk-form input[type="tel"],
.vk-form select,
.vk-form textarea {
    width: 100%;
    background: var(--vk-field);
    border: 1px solid var(--vk-line);
    border-radius: 7px;
    padding: 12px 14px;
    font: 400 15px/1.5 "Poppins", Arial, sans-serif;
    color: var(--vk-dark);
    transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
    height: auto;
    box-shadow: none;
}
.vk-form textarea { min-height: 132px; resize: vertical; }
.vk-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237b848d' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
.vk-form input::placeholder,
.vk-form textarea::placeholder { color: #a8b0b7; }

.vk-form input:focus,
.vk-form select:focus,
.vk-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--vk-orange);
    box-shadow: 0 0 0 3px rgba(236, 103, 27, .13);
}
.vk-form input.error,
.vk-form textarea.error,
.vk-form select.error {
    border-color: #d9534f;
    background: #fdf5f5;
}

/* ---------- Button ---------- */
.vk-form .vk-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: var(--vk-orange);
    border: none;
    border-radius: 7px;
    padding: 14px 22px;
    font: 600 14.5px/1 "Poppins", Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .08s, box-shadow .15s;
    box-shadow: 0 2px 10px rgba(236, 103, 27, .28);
}
.vk-form .vk-submit:hover,
.vk-form .vk-submit:focus {
    background: var(--vk-orange-dark);
    color: #fff;
    box-shadow: 0 4px 16px rgba(236, 103, 27, .34);
}
.vk-form .vk-submit:active   { transform: translateY(1px); }
.vk-form .vk-submit[disabled] { opacity: .7; cursor: default; }

.vk-consent {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--vk-muted);
    margin: 4px 0 16px;
}
.vk-consent a { color: var(--vk-orange); font-weight: 600; text-decoration: none; }
.vk-consent a:hover { text-decoration: underline; }

/* Ergebnis-Box des Formular-Skripts */
.vk-form .form-results { margin-bottom: 14px; }
.vk-form .form-results:empty { margin: 0; }

/* ---------- Direktruf unter dem Formular ---------- */
.vk-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #fdf3ec;
    border: 1px solid #f6dcc8;
    border-radius: 8px;
}
.vk-callout .vk-callout__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vk-orange);
    border-radius: 50%;
    color: #fff; font-size: 16px;
}
.vk-callout .vk-callout__txt { font-size: 13px; line-height: 1.45; color: var(--vk-slate); }
.vk-callout .vk-callout__txt strong { display: block; font-size: 17px; color: var(--vk-dark); font-weight: 600; }
.vk-callout a { color: inherit; text-decoration: none; }
.vk-callout a:hover strong { color: var(--vk-orange); }

/* ---------- Fließtext-Spalte ---------- */
.vk-lead {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--vk-dark);
    font-weight: 500;
    margin-bottom: 18px;
}
.vk-prose p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #5d666e;
    margin-bottom: 16px;
}
.vk-checklist {
    list-style: none;
    padding: 0;
    margin: 22px 0 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 22px;
}
.vk-checklist li {
    position: relative;
    padding-left: 30px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--vk-dark);
    font-weight: 500;
}
.vk-checklist li::before {
    content: "";
    position: absolute;
    left: 0; top: 1px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(236, 103, 27, .12) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath fill='none' stroke='%23ec671b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4.6 4 7.6 10 1.4'/%3E%3C/svg%3E") no-repeat center;
}

/* ---------- Info-Karte (Anfrageseite) ---------- */
.vk-info { border-radius: var(--vk-radius); overflow: hidden; border: 1px solid var(--vk-line); background: #fff; }
.vk-info__head {
    background: var(--vk-dark);
    padding: 16px 22px;
    font: 600 15px/1.3 "Poppins", Arial, sans-serif;
    color: #fff;
    border-bottom: 3px solid var(--vk-orange);
}
.vk-info__body { padding: 20px 22px; }
.vk-info__row {
    display: flex;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid #eef1f3;
}
.vk-info__row:first-child { padding-top: 0; }
.vk-info__row:last-child  { border-bottom: none; padding-bottom: 0; }
.vk-info__ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(236, 103, 27, .1);
    color: var(--vk-orange);
    font-size: 14px;
}
.vk-info__txt   { font-size: 14px; line-height: 1.6; color: #5d666e; }
.vk-info__txt b { display: block; color: var(--vk-dark); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.vk-info__txt a { color: #5d666e; text-decoration: none; }
.vk-info__txt a:hover { color: var(--vk-orange); }

.vk-emergency {
    margin-top: 18px;
    border-radius: var(--vk-radius);
    background: linear-gradient(135deg, var(--vk-orange) 0%, var(--vk-amber) 100%);
    padding: 20px 22px;
    color: #fff;
    text-align: center;
}
.vk-emergency span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .9;
    margin-bottom: 6px;
}
.vk-emergency a {
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}
.vk-emergency a:hover { color: #fff; text-decoration: underline; }
.vk-emergency small { display: block; font-size: 12.5px; opacity: .9; margin-top: 6px; font-weight: 400; }

/* ---------- Abschnittsüberschrift im Formular ---------- */
.vk-fieldset { margin-bottom: 6px; }
.vk-fieldset__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 12.5px/1 "Poppins", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vk-muted);
    margin: 4px 0 16px;
}
.vk-fieldset__title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--vk-line);
}

/* ---------- Responsiv ---------- */
@media (max-width: 991px) {
    .vk-sticky { position: static !important; }
}
@media (max-width: 767px) {
    .vk-form .vk-col-2 { flex: 1 1 100%; }
    .vk-checklist { grid-template-columns: 1fr; }
    .vk-card__body { padding: 20px 18px 22px; }
    .vk-card__head { padding: 17px 18px; }
    .vk-info__body { padding: 18px; }
    .vk-lead { font-size: 16.5px; }
}

/* ---------- "Ein Betrieb von" neben dem Baukonzept-Logo ---------- */
.vk-byline {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 2px 0 16px;
    padding: 7px 14px 7px 12px;
    background: #f6f8f9;
    border: 1px solid var(--vk-line);
    border-radius: 40px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.vk-byline:hover,
.vk-byline:focus {
    background: #fff;
    border-color: #d6dde2;
    text-decoration: none;
}
.vk-byline__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vk-muted);
    white-space: nowrap;
}
.vk-byline__sep {
    width: 1px;
    height: 18px;
    background: var(--vk-line);
    flex: 0 0 auto;
}
.vk-byline img {
    display: block;
    width: 108px;
    height: auto;
}
@media (max-width: 480px) {
    .vk-byline { gap: 9px; padding: 6px 12px 6px 11px; }
    .vk-byline__label { font-size: 10.5px; letter-spacing: .07em; }
    .vk-byline img { width: 92px; }
}

/* ---------- Einsatzgebiet-Leiste ---------- */
.vk-regions {
    background: #f5f8f8;
    border-top: 1px solid #e6ebec;
    padding: 26px 0;
}
.vk-regions__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
}
.vk-regions__label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vk-muted);
    white-space: nowrap;
}
.vk-regions ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.vk-regions li { margin: 0; }
.vk-regions a {
    display: inline-block;
    padding: 6px 13px;
    background: #fff;
    border: 1px solid var(--vk-line);
    border-radius: 40px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #5d666e;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.vk-regions a:hover,
.vk-regions a:focus {
    border-color: var(--vk-orange);
    color: var(--vk-orange);
    background: #fff;
    text-decoration: none;
}
@media (max-width: 767px) {
    .vk-regions { padding: 22px 0; }
    .vk-regions__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .vk-regions a { font-size: 13px; padding: 6px 11px; }
}