.vlt-order-entry-page .entry-header,
.vlt-order-entry-page #content-wrap > .container > .page-header,
.vlt-order-entry-page .single-page-article > .entry-header {
    display: none !important;
}

/* V2.9.53: Der komplette Theme-Kopf (VL-Limburg-Banner + Portal-Menü) wird
   auf der Auftragsseite ausgeblendet - die eigene Sticky-Kopfleiste ersetzt
   ihn vollständig und bleibt so wirklich immer ganz oben. */
body.vlt-order-entry-page #site-header,
body.vlt-order-entry-page .site-header,
body.vlt-order-entry-page #masthead,
body.vlt-order-entry-page #site-logo,
body.vlt-order-entry-page .page-header,
body.vlt-order-entry-page .entry-title {
    display: none !important;
}

.vlt-order-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 30px 28px; /* V2.9.31: leicht kompakter */
    background: #ffffff;
    box-sizing: border-box;
}

/* V2.9.52: Kopfleiste (Konto/Zurück + Mini-Navigation) klebt beim Scrollen
   oben am Bildschirmrand - das Formular scrollt dahinter durch. */
.vlt-order-sticky {
    /* V2.9.93: Fest am oberen Bildschirmrand verankert. position:sticky pinnte
       in diesem Theme (verschachtelte Overflow-Container) nicht zuverlässig -
       die Leiste wanderte beim Scrollen mit. position:fixed ankert garantiert
       am Viewport. Die Höhe wird per JS als oberer Abstand am Formular
       reserviert (siehe order-form.js), damit nichts verdeckt wird. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin: 0;
    /* V2.9.176: Auf Desktop identisch zur Kopfleiste aller anderen Seiten
       (Mini-Nav nutzt 12px 12px 6px). Vorher 8px 30px 6px - dadurch saß das
       Logo weiter rechts und der Kopf etwas anders hoch ("versetzt"). Auf
       Mobile war es ohnehin schon 12px 12px 6px, deshalb fiel es nur in der
       Browser-Ansicht auf. */
    padding: 12px 12px 6px;
    background: #ffffff;
    border-bottom: 1px solid #e3ede5;
    box-shadow: 0 6px 14px rgba(23, 58, 35, .07);
}

body.admin-bar .vlt-order-sticky {
    top: 32px;
}

/* V2.9.102: Weiße Abdeckung oberhalb der festen Leiste - schließt die Lücke,
   die auf dem iPhone entsteht, wenn die (nicht fixierte) WordPress-Adminleiste
   wegscrollt. So sieht man oberhalb der Buttonleiste keinen Scroll mehr. */
.vlt-order-sticky::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 60px;
    background: #ffffff;
    pointer-events: none;
}

@media (max-width: 800px) {
    .vlt-order-sticky {
        margin: 0;
        padding: 12px 12px 6px;
    }
}

@media (max-width: 782px) {
    body.admin-bar .vlt-order-sticky {
        top: 46px;
    }
}

/* Diese Seite blendet den Theme-Header oben aus (siehe Regel ganz oben in
   dieser Datei), deshalb fehlt hier sonst jeder Weg zurück zum Cockpit -
   anders als bei allen anderen Masken im Tool. */
.vlt-order-form__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px; /* V2.9.94: flacher, damit die fixe Leiste weniger hoch baut */
}

/* V2.9.110: "Zurueck" bleibt mit Mein Konto/Abmelden zusammen (eine Gruppe),
   damit der Button nicht allein in die Markenzeile nach oben rutscht. */
.vlt-order-form__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* V2.9.99/2.9.101: Logo + Markenname links in der Kopfleiste, Konto/Zurück
   bleiben rechts. Der Marken-Block schiebt sich per margin-right:auto nach
   links, damit die Aktionen rechts sitzen. */
.vlt-order-form__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-right: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.vlt-order-form__brand:hover .vlt-order-form__brandname {
    color: #009039;
}
.vlt-order-form__topbar .vlt-page-logo {
    margin: 0 !important;
    height: calc(26px * var(--vlt-tool-logo-scale, 1)) !important;
    /* V2.9.176: gleiche Logo-Maße wie die Mini-Nav-Kopfleiste. */
    max-width: calc(130px * var(--vlt-tool-logo-scale, 1)) !important;
}
/* V2.9.107: Name + Version als schmale Spalte rechts neben dem Logo -
   Version sitzt direkt unter "VL LIMBURG TOOL", spart Hoehe im Hochformat. */
.vlt-order-form__brand-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1.05;
}
.vlt-order-form__brandname {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #173f27;
    white-space: nowrap;
}
.vlt-order-form__version {
    font-size: 9px;
    font-weight: 700;
    color: #9aada2;
    white-space: nowrap;
    letter-spacing: .01em;
    line-height: 1.1;
    margin-top: 1px;
}

/* V2.9.94: schlanker "Zurueck zum Cockpit" (gleiche Hoehe wie Konto/Abmelden),
   damit die fest verankerte Kopfleiste insgesamt niedriger ist. */
.vlt-order-form__back {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid #dce7df;
    border-radius: 999px;
    background: #fff;
    color: #173f27;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.vlt-order-form__back:hover {
    border-color: #009039;
    color: #009039;
}

.vlt-order-form {
    font-family: inherit;
    color: #111111;
}

.vlt-order-grid {
    display: grid;
    gap: 14px 18px; /* V2.9.31: leicht kompakter */
}

.vlt-order-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vlt-order-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vlt-install-grid {
    margin-bottom: 16px; /* V2.9.31: leicht kompakter */
}

.vlt-install-hint {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #666666;
}

.vlt-field {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* V2.9.28: Straße/Hausnummer als zwei nebeneinanderliegende Felder */
.vlt-street-split {
    display: flex;
    gap: 8px;
    width: 100%;
}
.vlt-street-split > * {
    min-width: 0;
}
.vlt-street-split > *:first-child {
    flex: 1 1 auto;
}
.vlt-street-split > *:last-child {
    flex: 0 0 84px; /* V2.9.54: passend für 5 Zeichen (z. B. "1000a") */
}
.vlt-street-split input:last-child,
.vlt-street-split .vlt-clear-wrap:last-child input {
    text-align: center;
}

.vlt-field label,
.vlt-aroundhome legend {
    margin: 0 0 5px; /* V2.9.31: leicht kompakter */
    padding: 0;
    border: 0;
    border-bottom: 0; /* V2.9.32: feine Linie unter der Aroundhome-Überschrift entfernen */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.vlt-required > label::after,
.vlt-required > legend::after {
    content: " *";
    color: #d63638;
}

.vlt-field input,
.vlt-field select,
.vlt-field textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #b7b7b7;
    border-radius: 2px;
    background: #ffffff;
    color: #111111;
    font: inherit;
    box-sizing: border-box;
}

.vlt-field input,
.vlt-field select {
    height: 40px; /* V2.9.31: leicht kompakter */
    min-height: 40px;
}

.vlt-field textarea {
    min-height: 150px;
    resize: vertical;
}

.vlt-required input,
.vlt-required select {
    background: #f5fff7;
    border-color: #74c98a;
}

/* V2.9.37: Kundenname/Kundenvorname behalten das normale Pflichtfeld-Grün -
   nur das kleine Häkchen-Kästchen darunter bleibt farblos (siehe
   V2.9.36-Block am Dateiende). */

.vlt-field input:focus,
.vlt-field select:focus,
.vlt-field textarea:focus {
    outline: 0;
    border-color: #00a739;
    box-shadow: 0 0 0 1px #00a739;
}

.vlt-field .is-error {
    border-color: #d63638 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 1px #d63638 !important;
}

/* V2.9.31: Haken unter Vorname/Nachname zum Ein-/Ausschalten der
   automatischen Formatierung */
.vlt-format-toggle {
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 7px 2px 0;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    cursor: pointer;
    user-select: none;
}

/* V2.9.32: natives Kästchen unsichtbar, aber weiter funktional - der große
   grüne Haken (.vlt-checkmark) übernimmt die Anzeige. */
.vlt-format-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* V2.9.32: gemeinsamer, großer grüner Haken - genutzt bei Aroundhome
   Ja/Nein sowie bei der Formatierungs-Umschaltung von Vorname/Nachname. */
.vlt-checkmark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid #b7b7b7;
    border-radius: 5px;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color .12s ease, background .12s ease;
}

.vlt-checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #173f27;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .12s ease;
}

/* V2.9.35: keine Flächenfarbe mehr hinter dem Haken - nur der Rahmen des
   kleinen Kästchens wird grün, der Haken selbst bleibt auf weißem Grund. */
input:checked + .vlt-checkmark,
label:has(input:checked) .vlt-checkmark {
    border-color: #173f27;
    background: #ffffff;
}

input:checked + .vlt-checkmark::after,
label:has(input:checked) .vlt-checkmark::after {
    opacity: 1;
}

/* V2.9.46: Label-Zeile mit Inline-Checkbox (E-Mail-Pflicht-Ausnahme) */
.vlt-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 5px;
}

.vlt-label-row > label {
    margin: 0 !important;
}

.vlt-email-field.vlt-required .vlt-label-row > label:first-child::after {
    content: " *";
    color: #d63638;
}

.vlt-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.vlt-inline-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#vlt-order-form .vlt-email-field input[disabled] {
    background: #f0f0f0 !important;
    border-color: #d6d6d6 !important;
    color: #9a9a9a !important;
    cursor: not-allowed;
}

/* V2.9.46: Abweichende Lieferanschrift (V2.9.48: sitzt jetzt direkt unter
   der Adresszeile, zwischen den beiden Feld-Rastern) */
/* V2.9.228: Die GESAMTE Sektion "Abweichende Lieferanschrift" (Umschalter +
   Felder) bekommt einen durchgehenden blauen Rahmen mit weichem Glow - im
   selben Look wie die Auftrags-Blöcke und der Aroundhome-Kasten. */
.vlt-delivery {
    /* V2.9.276: kein blauer Aussenkasten mehr - der blaue Eyecatcher-Rahmen
       sitzt (wie bei Aroundhome) nur noch auf der Ja/Nein-Zelle selbst. */
    margin: 14px 0 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.vlt-delivery-main-toggle {
    font-size: 14.5px;
    font-weight: 700;
    color: #173f27;
}

/* V2.9.275: Die Ja/Nein-Pflichtauswahl im Lieferanschrift-Kasten flach wie
   bei Aroundhome - die grossen Aussenabstaende des Aroundhome-Stils entfallen
   hier, weil der blaue Kasten selbst schon Innenabstand hat. */
.vlt-delivery .vlt-delivery-choice {
    margin: 0;
}

/* V2.9.228: Innenrahmen entfällt - der äußere .vlt-delivery-Rahmen umschließt
   jetzt alles, so wird nichts doppelt umrandet. */
.vlt-delivery-fields {
    margin-top: 12px;
    padding: 0;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.vlt-delivery-fields[hidden] {
    display: none !important;
}

.vlt-delivery-copy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 14px;
}

/* V2.9.49: Formular-Gruppen-Kästen, damit das Formular klar strukturiert
   wirkt statt "verloren". */
#vlt-order-form .vlt-form-section {
    margin: 0 0 20px;
    padding: 16px 16px 14px;
    border: 1px solid #d7e5da;
    border-radius: 12px;
    background: #fbfdfb;
    box-sizing: border-box;
}

#vlt-order-form .vlt-form-section__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #009039;
}

/* V2.9.49: Anzahl der Aufträge als 8 anklickbare Kästchen. */
#vlt-order-form .vlt-count-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#vlt-order-form .vlt-count-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    /* V2.9.277: flacher (Breite unveraendert) - wirkte vorher zu klobig. */
    height: 34px;
    margin: 0;
    border: 1px solid #74c98a;
    border-radius: 8px;
    background: #f5fff7;
    font-size: 16px;
    font-weight: 800;
    color: #2c4433;
    cursor: pointer;
    user-select: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

#vlt-order-form .vlt-count-box input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#vlt-order-form .vlt-count-box:has(input:checked) {
    background: #009039 !important;
    border-color: #009039 !important;
    color: #ffffff;
}

#vlt-order-form .vlt-count-box:has(input:focus-visible) {
    outline: 2px solid #00a739;
    outline-offset: 2px;
}

/* V2.9.53: gestufte Anzeige - zusätzliche Kästchen erst nach Klick auf
   "Mehr Aufträge". */
#vlt-order-form .vlt-count-box--hidden {
    display: none !important;
}

#vlt-order-form .vlt-count-more {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 8px 16px;
    border: 1px dashed #74c98a;
    border-radius: 8px;
    background: transparent;
    color: #009039;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#vlt-order-form .vlt-count-more:hover {
    background: #f0faf3;
}

#vlt-order-form .vlt-count-more[hidden] {
    display: none !important;
}

/* V2.9.50: Am Handy als symmetrisches 4x2-Raster (vorher brach die 8
   einsam in die zweite Zeile um). */
@media (max-width: 800px) {
    #vlt-order-form .vlt-count-boxes {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #vlt-order-form .vlt-count-box {
        width: auto !important;
        /* V2.9.277: auch am Handy flacher, bleibt gut tippbar. */
        height: 38px;
    }
}

/* V2.9.49: Jeder Auftrag als eigener, blau umrandeter Block. */
#vlt-order-form .vlt-contract-row:not([hidden]) {
    position: relative;
    border: 1px solid #2f6fed !important;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.10);
    padding: 16px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box;
}

/* V2.9.51: "Auftrag N"-Überschrift im blauen Kasten, über alle Spalten. */
#vlt-order-form .vlt-contract-row__title {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #2f6fed;
}

/* V2.9.49: Gesperrte Felder (Produktgruppe/Wert vor Stückzahl-Eingabe). */
#vlt-order-form .vlt-contract-row input[disabled] {
    background: #f0f0f0 !important;
    border-color: #d6d6d6 !important;
    color: #9a9a9a !important;
    cursor: not-allowed;
}

.vlt-aroundhome {
    width: 100%;
    max-width: calc((100% - 36px) / 3); /* V2.9.32: gleiche Breite wie das E-Mail-Feld darüber */
    margin: 30px 0 28px;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* ========================================================================
 * V2.9.753 - DER JA/NEIN-SCHALTER, NEU
 * ========================================================================
 *
 * Christian: "Aroundhome und abweichende Lieferadresse - die Auswahl-Buttons
 * finde ich nicht schoen. Haettest du da eine bessere Idee, den Schalter
 * moderner darzustellen und vielleicht auch nicht so ueberdimensioniert? Es
 * reicht ja ein Kippschalter wie bei Apple oder ein anderer Ja/Nein-Switcher."
 *
 * WARUM ES KEIN ECHTER APPLE-KIPPSCHALTER GEWORDEN IST
 *
 * Ein Apple-Schalter kennt genau zwei Zustaende: an und aus. Diese beiden
 * Felder kennen aber drei: Ja, Nein - und "noch nicht beantwortet". Und
 * gerade der dritte ist der wichtige. Beide sind Pflichtentscheidungen, der
 * Zaehler oben zaehlt sie mit, und in der Liste stehen sie als "–", solange
 * niemand geklickt hat. Ein Kippschalter muesste beim Laden auf einer Seite
 * stehen - und haette damit stillschweigend "Nein" fuer Christian
 * beantwortet. Genau das Loch im System, das er nicht will.
 *
 * Also: ein Segment-Schalter im selben Formensprache-Stil (Pille in einer
 * Rinne, weicher Schatten, weiche Farbe) - modern und klein, aber mit einem
 * sichtbaren Zustand "noch nichts gewaehlt": dann ist keine Pille da.
 *
 * Aus 100 % Breite und 40 px Hoehe werden Inhaltsbreite und 34 px.
 *
 * MERKSATZ: Ein Schalter mit zwei Stellungen darf keine Frage abbilden, die
 * drei Antworten hat - "noch keine" ist auch eine.
 */
.vlt-aroundhome-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    max-width: 100%;
}

.vlt-aroundhome-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    height: 34px;
    padding: 3px;
    border: 1px solid #dfe4ea;
    border-radius: 999px;
    overflow: hidden;
    background: #eef1f5;
    box-sizing: border-box;
}

.vlt-aroundhome-toggle label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
    min-width: 60px;
    margin: 0;
    padding: 0 15px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #5b6470;
    background: transparent;
    user-select: none;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.vlt-aroundhome-toggle label:first-child {
    border-right: 0;
}

/* Der Haken hat in einer Pille nichts mehr zu suchen. */
.vlt-aroundhome-toggle .vlt-checkmark {
    display: none;
}

.vlt-aroundhome-toggle label:has(input:checked) {
    background: #ffffff;
    color: #1f2933;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}

.vlt-aroundhome-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* V2.9.35: kein grüner Flächen-Hintergrund mehr für die ausgewählte Hälfte -
   stattdessen bekommt der gesamte Ja/Nein-Kasten einen dezenten blauen
   Eyecatcher-Rahmen, sobald eine Auswahl getroffen wurde. */
.vlt-aroundhome-toggle:has(input:checked) {
    border-color: #2f6fed;
    box-shadow: 0 0 0 1px rgba(47, 111, 237, 0.18);
}

.vlt-aroundhome-toggle label:has(input:focus-visible) {
    outline: 2px solid #00a739;
    outline-offset: -2px;
}

.vlt-aroundhome:has(input.is-error) .vlt-aroundhome-toggle {
    border-color: #d63638 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 1px #d63638 !important;
}

.vlt-advisor-grid {
    align-items: end;
    margin-bottom: 16px; /* V2.9.31: leicht kompakter */
}

.vlt-advisor-hint {
    display: flex;
    align-items: flex-end;
    min-height: 40px; /* V2.9.31: leicht kompakter */
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.vlt-order-count {
    width: calc((100% - 44px) / 3);
    max-width: none;
    margin-bottom: 32px; /* V2.9.31: leicht kompakter */
}

.vlt-contract-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 16px; /* V2.9.31: leicht kompakter */
    width: 100%;
    margin-bottom: 18px; /* V2.9.31: leicht kompakter */
}

.vlt-contract-row > .vlt-field,
.vlt-contract-row input,
.vlt-contract-row select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.vlt-contract-row input,
.vlt-contract-row select {
    height: 40px; /* V2.9.31: leicht kompakter */
    min-height: 40px;
}

.vlt-contract-row[hidden] {
    display: none;
}

.vlt-combobox-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    max-height: 280px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.vlt-combobox-list.is-open {
    display: block;
}

.vlt-combobox-list button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.vlt-combobox-list button:hover {
    background: #f3fff4;
}

.vlt-submit {
    display: inline-block;
    min-width: 142px;
    height: 40px; /* V2.9.31: leicht kompakter */
    margin-top: 14px; /* V2.9.31: leicht kompakter */
    padding: 0 28px;
    border: 0;
    border-radius: 2px;
    background: #00a63c;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 40px; /* V2.9.31: leicht kompakter */
    text-align: center;
    cursor: pointer;
}

.vlt-submit:hover {
    background: #008f34;
}

.vlt-submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* V2.9.130: Absenden + Abbrechen nebeneinander. Abbrechen springt zur
   Vorseite zurück (z. B. Tabellenübersicht beim Bearbeiten). */
.vlt-submit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vlt-submit-row .vlt-submit {
    margin-top: 14px;
}

.vlt-cancel {
    display: inline-block;
    min-width: 110px;
    height: 40px;
    margin-top: 14px;
    padding: 0 20px;
    border: 1px solid #c9d6cd;
    border-radius: 2px;
    background: #ffffff;
    color: #4a5a50;
    font-size: 14px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.vlt-cancel:hover {
    border-color: #00a63c;
    color: #00a63c;
}

.vlt-order-message {
    margin-bottom: 24px;
    padding: 14px;
    border-radius: 3px;
}

.vlt-order-message.is-error-message {
    background: #fde8e4;
    color: #6b1d15;
}

.vlt-order-message.is-success {
    background: #e8f8ed;
    color: #145c29;
}

.vlt-order-message.is-edit-notice {
    background: #eaf1fb;
    color: #1c3f66;
}

.vlt-order-message.is-duplicate-warning {
    background: #fef6e3;
    border: 1px solid #f0dba3;
    color: #6b5216;
}

.flatpickr-calendar {
    font-family: inherit;
}

/* Mobil: Der Kalender bleibt am Datumsfeld verankert. Seine exakte Position
   wird vom Formular-JavaScript gesetzt; währenddessen ist die Seite gesperrt. */
@media (max-width: 600px) {
    .flatpickr-calendar.open.vlt-mobile-calendar {
        position: fixed !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: min(400px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
    }

    .flatpickr-calendar.open.vlt-mobile-calendar::before,
    .flatpickr-calendar.open.vlt-mobile-calendar::after {
        display: none !important;
    }

    .flatpickr-calendar .flatpickr-rContainer,
    .flatpickr-calendar .flatpickr-days,
    .flatpickr-calendar .dayContainer {
        max-width: 100% !important;
    }

    body.vlt-datepicker-locked {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        touch-action: none;
    }

    body.vlt-datepicker-locked .flatpickr-calendar {
        touch-action: manipulation;
    }
}

.vlt-order-page-main {
    padding: 36px 20px 70px;
    background: #f4f4f4;
}

.vlt-order-page-container {
    max-width: 1240px;
    margin: 0 auto;
}

@media (max-width: 800px) {
    .vlt-order-shell {
        padding: 20px;
    }

    .vlt-order-grid--3,
    .vlt-order-grid--2,
    .vlt-contract-row {
        grid-template-columns: 1fr;
    }

    .vlt-aroundhome {
        max-width: 100%; /* V2.9.32: Grid ist einspaltig, Feld darf volle Breite nutzen */
        margin: 35px 0;
    }

    .vlt-advisor-hint {
        min-height: 0;
    }

    .vlt-order-count {
        margin-bottom: 32px;
    }

    .vlt-submit {
        width: 100%;
    }
}

/* V2.2.1 Korrekturen: Theme-Overrides zuverlässig neutralisieren */
#vlt-order-form .vlt-required > label::after {
    content: none !important;
}
#vlt-order-form .vlt-field.vlt-required > label::after,
#vlt-order-form fieldset.vlt-required > legend::after {
    content: " *" !important;
    color: #d63638 !important;
}

#vlt-order-form .vlt-contract-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
}
#vlt-order-form .vlt-contract-row > .vlt-field,
#vlt-order-form .vlt-contract-row input,
#vlt-order-form .vlt-contract-row select,
#vlt-order-form .vlt-contract-row input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    flex: 1 1 auto !important;
}

#vlt-order-form button.vlt-submit,
#vlt-order-form input[type="submit"].vlt-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 142px !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #00a63c !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
    text-transform: none !important;
    line-height: 1 !important;
}
#vlt-order-form button.vlt-submit:hover,
#vlt-order-form button.vlt-submit:focus {
    background: #008f34 !important;
    color: #fff !important;
}

.vlt-email-field { position: relative; }
.vlt-email-suggestion-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #aaa;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.vlt-email-suggestion-list.is-open { display: block; }
.vlt-email-suggestion-list button {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
    color: #111 !important;
    text-align: left !important;
    font: inherit !important;
}
.vlt-email-suggestion-list button:hover { background: #f3fff4 !important; }


/* V2.2.1 Finalkorrektur */
#vlt-order-form .vlt-contract-row[hidden] {
    display: none !important;
}

#vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]),
#vlt-order-form .vlt-required select,
#vlt-order-form .vlt-required textarea {
    background-color: #f5fff7 !important;
    border-color: #74c98a !important;
}

#vlt-order-form .vlt-required input.is-error,
#vlt-order-form .vlt-required select.is-error,
#vlt-order-form .vlt-required textarea.is-error {
    background-color: #fff5f5 !important;
    border-color: #d63638 !important;
}

.vlt-clear-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.vlt-clear-wrap > input,
.vlt-clear-wrap > textarea {
    padding-right: 38px !important;
}

.vlt-clear-field {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    z-index: 4 !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #666 !important;
    box-shadow: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.vlt-clear-field:hover,
.vlt-clear-field:focus {
    background: #e7e7e7 !important;
    color: #111 !important;
}

.vlt-clear-field[hidden] {
    display: none !important;
}

.vlt-field textarea + .vlt-clear-field {
    top: 18px !important;
    transform: none !important;
}

#vlt-order-count {
    -moz-appearance: textfield;
}
#vlt-order-count::-webkit-inner-spin-button,
#vlt-order-count::-webkit-outer-spin-button {
    opacity: 1;
}

/* V2.2.1 Nachkorrektur: Anzahl der Aufträge exakt ein Drittel */
#vlt-order-form .vlt-order-count {
    width: calc((100% - 44px) / 3) !important;
    max-width: none !important;
}
@media (max-width: 767px) {
    #vlt-order-form .vlt-order-count {
        width: 100% !important;
    }
}

/* V2.2.1 UX-Korrektur: X innerhalb der Felder, E-Mail-Liste und Anzahl 1–8 */
#vlt-order-form .vlt-clear-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
#vlt-order-form .vlt-clear-wrap > input,
#vlt-order-form .vlt-clear-wrap > select,
#vlt-order-form .vlt-clear-wrap > textarea {
    width: 100% !important;
    max-width: none !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}
#vlt-order-form .vlt-clear-field {
    right: 8px !important;
}
#vlt-order-form .vlt-clear-field.is-inactive,
#vlt-order-form .vlt-clear-field:disabled {
    display: block !important;
    opacity: .28 !important;
    cursor: default !important;
    pointer-events: none !important;
}

#vlt-order-form .vlt-email-field {
    position: relative !important;
    overflow: visible !important;
}
#vlt-order-form .vlt-email-suggestion-list {
    top: calc(100% + 2px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    min-width: 100% !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    background: #fff !important;
}
#vlt-order-form .vlt-email-suggestion-list.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#vlt-order-form .vlt-order-count {
    width: calc((100% - 44px) / 3) !important;
    min-width: 0 !important;
    max-width: none !important;
}
#vlt-order-form .vlt-count-combobox {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
#vlt-order-form #vlt-order-count {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    padding: 9px 72px 9px 11px !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
}
#vlt-order-form .vlt-count-toggle,
#vlt-order-form .vlt-count-clear {
    position: absolute !important;
    top: 50% !important;
    z-index: 5 !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    background: transparent !important;
    color: #555 !important;
    box-shadow: none !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
}
#vlt-order-form .vlt-count-toggle { right: 6px !important; font-size: 18px !important; }
#vlt-order-form .vlt-count-clear { right: 36px !important; font-size: 22px !important; }
#vlt-order-form .vlt-count-clear.is-inactive,
#vlt-order-form .vlt-count-clear:disabled { opacity: .28 !important; pointer-events: none !important; }
#vlt-order-form .vlt-count-options {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 99998;
    border: 1px solid #aaa;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
#vlt-order-form .vlt-count-options.is-open { display: block !important; }
#vlt-order-form .vlt-count-options button {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 7px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
    color: #111 !important;
    text-align: left !important;
    font: inherit !important;
}
#vlt-order-form .vlt-count-options button:hover { background: #f3fff4 !important; }

@media (max-width: 767px) {
    #vlt-order-form .vlt-order-count { width: 100% !important; }
}


/* V2.2.3: editierbare Stückzahl, sichere X-Buttons und sichtbare Vorschlagslisten */
#vlt-order-form .vlt-quantity-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}
#vlt-order-form .vlt-combobox-list button.is-active,
#vlt-order-form .vlt-email-suggestion-list button.is-active {
    background: #e8f8ed !important;
}
#vlt-order-form .vlt-combobox .vlt-clear-wrap {
    position: relative !important;
    z-index: 2 !important;
}
#vlt-order-form .vlt-combobox-list {
    z-index: 100000 !important;
}
#vlt-order-form .vlt-email-field {
    z-index: 20 !important;
}
#vlt-order-form .vlt-email-suggestion-list {
    top: calc(100% + 3px) !important;
    display: none !important;
    width: 100% !important;
    min-width: 260px !important;
    border-radius: 3px !important;
}
#vlt-order-form .vlt-email-suggestion-list.is-open {
    display: block !important;
}

/* V2.2.6: stabile E-Mail-Vorschläge, Telefonformatierung und mobile Hochformat-Ansicht */
#vlt-order-form .vlt-email-field {
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
}
#vlt-order-form .vlt-email-field .vlt-clear-wrap {
    position: relative !important;
    z-index: 2 !important;
}
#vlt-order-form #vlt-email-suggestions.vlt-email-suggestion-list {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    z-index: 2147483646 !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #vlt-order-form,
    #vlt-order-form .vlt-order-shell,
    #vlt-order-form .vlt-order-grid,
    #vlt-order-form .vlt-contracts,
    #vlt-order-form .vlt-contract-row,
    #vlt-order-form .vlt-field,
    #vlt-order-form .vlt-clear-wrap,
    #vlt-order-form .vlt-combobox,
    #vlt-order-form .vlt-email-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #vlt-order-form .vlt-order-grid--3,
    #vlt-order-form .vlt-order-grid--2,
    #vlt-order-form .vlt-advisor-grid,
    #vlt-order-form .vlt-contract-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    #vlt-order-form input,
    #vlt-order-form select,
    #vlt-order-form textarea,
    #vlt-order-form button {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #vlt-order-form input,
    #vlt-order-form select,
    #vlt-order-form textarea {
        font-size: 16px !important;
    }

    #vlt-order-form .vlt-contract-row > .vlt-field,
    #vlt-order-form .vlt-contract-row input,
    #vlt-order-form .vlt-contract-row select,
    #vlt-order-form .vlt-contract-row input[type="number"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #vlt-order-form .vlt-combobox-list,
    #vlt-order-form .vlt-count-options,
    #vlt-order-form .vlt-email-suggestion-list {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 240px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #vlt-order-form .vlt-order-shell {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* V2.2.7: E-Mail-Liste als Body-Portal, unabhängig von Theme-Overflows */
body #vlt-email-suggestions.vlt-email-suggestion-portal {
    display: none !important;
    position: fixed !important;
    right: auto !important;
    min-width: 0 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    z-index: 2147483647 !important;
    border: 1px solid #9d9d9d !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
    box-sizing: border-box !important;
}
body #vlt-email-suggestions.vlt-email-suggestion-portal.is-open { display: block !important; }
body #vlt-email-suggestions.vlt-email-suggestion-portal button {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
}
body #vlt-email-suggestions.vlt-email-suggestion-portal button:hover,
body #vlt-email-suggestions.vlt-email-suggestion-portal button.is-active { background: #e8f8ed !important; }


/* V2.2.8: verlässliche E-Mail-Vorschlagsliste */
body #vlt-email-suggestions-portal.vlt-email-suggestion-portal {
    display: none !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    border: 1px solid #9d9d9d !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
    box-sizing: border-box !important;
}
body #vlt-email-suggestions-portal.vlt-email-suggestion-portal.is-open { display: block !important; }
body #vlt-email-suggestions-portal button {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
}
body #vlt-email-suggestions-portal button:hover,
body #vlt-email-suggestions-portal button.is-active { background: #e8f8ed !important; }

@media (max-width: 800px) {
    #vlt-order-form .vlt-contract-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #vlt-order-form input,
    #vlt-order-form select,
    #vlt-order-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }
}


/* V2.3.3: touch-freundliche Vorschlagsfenster */
body #vlt-email-suggestions-portal.vlt-email-suggestion-portal {
    overscroll-behavior: contain !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 8px 10px 8px 14px !important;
    border-bottom: 1px solid #e4e4e4 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-header strong {
    flex: 1 1 auto !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-handle {
    display: none !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f1f1f1 !important;
    color: #222 !important;
    font-size: 26px !important;
    line-height: 1 !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-list {
    max-height: 232px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

body #vlt-email-suggestions-portal .vlt-email-domain-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
}

body #vlt-email-suggestions-portal .vlt-email-domain-option small {
    flex: 0 0 auto !important;
    color: #777 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

body #vlt-email-suggestions-portal .vlt-email-domain-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 800px), (pointer: coarse) {
    body #vlt-email-suggestions-portal.vlt-email-suggestion-portal.is-mobile {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(52vh, 430px) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -12px 35px rgba(0, 0, 0, .25) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    body #vlt-email-suggestions-portal.is-mobile .vlt-suggestion-panel-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        min-height: 58px !important;
        padding-top: 15px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    body #vlt-email-suggestions-portal.is-mobile .vlt-suggestion-panel-handle {
        display: block !important;
        position: absolute !important;
        top: 7px !important;
        left: 50% !important;
        width: 42px !important;
        height: 4px !important;
        border-radius: 999px !important;
        background: #c7c7c7 !important;
        transform: translateX(-50%) !important;
    }

    body #vlt-email-suggestions-portal.is-mobile .vlt-suggestion-panel-list {
        max-height: calc(min(52vh, 430px) - 58px) !important;
        padding-bottom: 8px !important;
    }

    body #vlt-email-suggestions-portal.is-mobile .vlt-email-domain-option {
        min-height: 52px !important;
        padding: 12px 18px !important;
        font-size: 16px !important;
    }

    /* Fachberater- und andere eigene Komboboxen ebenfalls als Bottom-Sheet. */
    #vlt-order-form .vlt-combobox-list.is-open {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(48vh, 390px) !important;
        margin: 0 !important;
        padding: 12px 0 calc(10px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        border: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -12px 35px rgba(0, 0, 0, .25) !important;
        z-index: 2147483646 !important;
        background: #fff !important;
    }

    #vlt-order-form .vlt-combobox-list.is-open::before {
        content: "" !important;
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        width: 42px !important;
        height: 4px !important;
        margin: 0 auto 10px !important;
        border-radius: 999px !important;
        background: #c7c7c7 !important;
        z-index: 2 !important;
    }

    #vlt-order-form .vlt-combobox-list button {
        min-height: 52px !important;
        padding: 12px 18px !important;
        font-size: 16px !important;
        touch-action: pan-y !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}


/* V2.3.4: Nur Smartphones – mittiges, vom Formular unabhängiges Auswahlfenster */
/* V2.9.45: fest unten ans E-Mail-Feld geheftet (absolute in Dokument-
   Koordinaten, scrollt mit der Seite) - das Feld bleibt beim Tippen immer
   frei sichtbar, auch mit geöffneter iOS-Tastatur. */
body.vlt-phone-ui #vlt-email-suggestions-portal.vlt-email-suggestion-portal.is-phone {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    max-width: calc(100vw - 24px) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .30) !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
}

body.vlt-phone-ui #vlt-email-suggestions-portal.is-phone .vlt-suggestion-panel-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 56px !important;
    padding: 10px 10px 10px 16px !important;
    border-radius: 16px 16px 0 0 !important;
}

body.vlt-phone-ui #vlt-email-suggestions-portal.is-phone .vlt-suggestion-panel-handle {
    display: none !important;
}

body.vlt-phone-ui #vlt-email-suggestions-portal.is-phone .vlt-suggestion-panel-list {
    max-height: calc(100% - 56px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 4px 0 8px !important;
}

body.vlt-phone-ui #vlt-email-suggestions-portal.is-phone .vlt-email-domain-option {
    min-height: 54px !important;
    padding: 13px 18px !important;
    font-size: 16px !important;
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Eigene Dropdowns auf Smartphones ebenfalls mittig und sicher scrollbar. */
body.vlt-phone-ui #vlt-order-form .vlt-combobox-list.is-open {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 430px !important;
    max-height: min(68vh, 430px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .30) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 10px 0 !important;
    background: #fff !important;
    z-index: 2147483646 !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-combobox-list.is-open::before {
    display: none !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-combobox-list button {
    min-height: 54px !important;
    padding: 13px 18px !important;
    font-size: 16px !important;
    touch-action: pan-y !important;
}

/* iPad und größere Tablets behalten ausdrücklich die normale Browser-Darstellung. */
@media (min-width: 601px) {
    body:not(.vlt-phone-ui) #vlt-email-suggestions-portal.vlt-email-suggestion-portal {
        transform: none !important;
    }
}


/* V2.3.5: Suche, Auswahl und ausdrückliche Bestätigung */
body #vlt-email-suggestions-portal .vlt-suggestion-panel-header,
#vlt-order-form .vlt-confirmable-list .vlt-list-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    background: #fff !important;
    border-bottom: 1px solid #e3e3e3 !important;
    box-sizing: border-box !important;
}

body #vlt-email-suggestions-portal .vlt-email-domain-search,
#vlt-order-form .vlt-confirmable-list .vlt-list-search {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #b8b8b8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-actions,
#vlt-order-form .vlt-confirmable-list .vlt-list-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-confirm,
body #vlt-email-suggestions-portal .vlt-suggestion-panel-close,
#vlt-order-form .vlt-confirmable-list .vlt-list-confirm,
#vlt-order-form .vlt-confirmable-list .vlt-list-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-confirm,
#vlt-order-form .vlt-confirmable-list .vlt-list-confirm {
    background: #16823b !important;
    color: #fff !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-confirm:disabled,
#vlt-order-form .vlt-confirmable-list .vlt-list-confirm:disabled {
    background: #c8c8c8 !important;
    color: #fff !important;
    cursor: default !important;
    opacity: .75 !important;
}

body #vlt-email-suggestions-portal .vlt-suggestion-panel-close,
#vlt-order-form .vlt-confirmable-list .vlt-list-cancel {
    background: #efefef !important;
    color: #222 !important;
}

/* V2.9.374 - FEHLERBEHEBUNG: Beim Wandern mit den Pfeiltasten war nicht zu
   sehen, auf welchem Namen man steht.

   Die Hervorhebung war an "#vlt-order-form ..." gebunden - also daran, dass
   die Liste INNERHALB des Formulars liegt. Genau das ist sie aber nicht: Die
   Auswahlliste wird bewusst als eigenstaendiges Fenster direkt an den
   Seitenkoerper gehaengt, damit Theme-Rahmen sie nicht abschneiden koennen.
   Dadurch traf die Regel ins Leere - der markierte Eintrag sah exakt aus wie
   jeder andere. Die Pfeiltasten funktionierten also die ganze Zeit, man sah
   es nur nicht.

   Die Regeln gelten jetzt unabhaengig davon, wo die Liste haengt. Zusaetzlich
   ist die Markierung kraeftiger: gruener Balken links, hellgruener Grund und
   fette Schrift - auf einen Blick erkennbar, auch aus zwei Metern Entfernung
   am Beamer. */
body #vlt-email-suggestions-portal .vlt-email-domain-option.is-selected,
body .vlt-confirmable-list .vlt-list-option.is-selected,
#vlt-order-form .vlt-confirmable-list .vlt-list-option.is-selected {
    background: #e7f6ec !important;
    box-shadow: inset 4px 0 0 #16823b !important;
    font-weight: 700 !important;
}

body #vlt-email-suggestions-portal .vlt-email-domain-option.is-active,
body .vlt-confirmable-list .vlt-list-option.is-active,
body .vlt-combobox-list .vlt-list-option.is-active,
#vlt-order-form .vlt-confirmable-list .vlt-list-option.is-active {
    background: #d8f0e0 !important;
    box-shadow: inset 5px 0 0 #16823b !important;
    font-weight: 700 !important;
    outline: 2px solid #16823b !important;
    outline-offset: -2px !important;
}

/* Gleiche Hervorhebung fuer Produktgruppe, Strasse und Ort (V2.9.372). */
body .vlt-product-option.is-active,
body .vlt-street-option.is-active,
body .vlt-city-option.is-active {
    background: #d8f0e0 !important;
    box-shadow: inset 5px 0 0 #16823b !important;
    font-weight: 700 !important;
}

body #vlt-email-suggestions-portal .vlt-list-empty,
#vlt-order-form .vlt-confirmable-list .vlt-list-empty {
    padding: 18px !important;
    color: #666 !important;
    text-align: center !important;
}

#vlt-order-form .vlt-confirmable-list {
    overflow: hidden !important;
    padding: 0 !important;
}

#vlt-order-form .vlt-confirmable-list .vlt-list-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

#vlt-order-form .vlt-confirmable-list .vlt-list-options {
    max-height: 280px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

#vlt-order-form .vlt-confirmable-list .vlt-list-option {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #ededed !important;
    background: #fff !important;
    color: #222 !important;
    text-align: left !important;
    font-size: 15px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body.vlt-phone-ui #vlt-email-suggestions-portal.is-phone .vlt-suggestion-panel-list {
    max-height: calc(100% - 63px) !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-confirmable-list.is-open {
    padding: 0 !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-confirmable-list .vlt-list-options {
    max-height: calc(min(68vh, 470px) - 63px) !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-confirmable-list .vlt-list-option,
body.vlt-phone-ui #vlt-email-suggestions-portal.is-phone .vlt-email-domain-option {
    min-height: 54px !important;
    padding: 13px 18px !important;
    font-size: 16px !important;
}


/* V2.3.7: Auswahl wird direkt übernommen – Bestätigungshaken entfällt */
#vlt-order-form .vlt-list-confirm,
body #vlt-email-suggestions-portal .vlt-suggestion-panel-confirm {
    display: none !important;
}


/* V2.3.8: Im großen Auswahlmenü bleibt nur das Suchfeld */
#vlt-order-form .vlt-list-cancel,
body #vlt-email-suggestions-portal .vlt-suggestion-panel-close {
    display: none !important;
}

#vlt-order-form .vlt-confirmable-list .vlt-list-actions,
body #vlt-email-suggestions-portal .vlt-suggestion-panel-actions {
    display: none !important;
}


/* V2.3.9: Fachberaterlisten auf Smartphones exakt im Visual Viewport zentrieren */
body.vlt-phone-ui #vlt-order-form .vlt-confirmable-list.is-open {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
    z-index: 2147483647 !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-confirmable-list .vlt-list-header {
    width: 100% !important;
}

body.vlt-phone-ui #vlt-order-form .vlt-confirmable-list .vlt-list-options {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}


/* V2.3.10: Komboboxen laufen als echtes body-Portal.
   Dadurch sind sie unabhängig von transformierten Theme-/Formular-Containern. */
body #vlt-order-form .vlt-combobox-list.vlt-combobox-portal,
body .vlt-combobox-list.vlt-combobox-portal {
    box-sizing: border-box !important;
    z-index: 2147483647 !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal.is-open {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .30) !important;
    overflow: hidden !important;
}

body .vlt-combobox-list.vlt-combobox-portal .vlt-list-options {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

body .vlt-combobox-list.vlt-combobox-portal .vlt-list-option {
    width: 100% !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
    touch-action: pan-y !important;
    cursor: pointer !important;
}


/* V2.3.11: Größeres Suchfeld und zuverlässigere Touch-Auswahl auf Smartphones */
body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-header {
    display: block !important;
    width: 100% !important;
    min-height: 68px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-search {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-options {
    max-height: calc(100% - 68px) !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-option {
    min-height: 58px !important;
    padding: 15px 18px !important;
    font-size: 17px !important;
}


/* V2.3.12: Suchfeld auf Smartphones deutlicher hervorheben */
body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-search {
    background: #fff9d9 !important;
    border: 1px solid #d8c86a !important;
    box-shadow: inset 0 0 0 1px rgba(216, 200, 106, .16) !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-search::placeholder {
    color: #6f6636 !important;
    opacity: .9 !important;
}


/* V2.3.13: Die Namensliste selbst scrollt, nicht der Seitenhintergrund */
body.vlt-combobox-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal.is-open {
    display: flex !important;
    flex-direction: column !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-header {
    flex: 0 0 70px !important;
    min-height: 70px !important;
}

body.vlt-phone-ui .vlt-combobox-list.vlt-combobox-portal .vlt-list-options {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}

/* Suchfeld auf Desktop, iPad und Smartphone größer und gut sichtbar */
body .vlt-combobox-list.vlt-combobox-portal .vlt-list-header {
    position: relative !important;
    padding: 11px 12px !important;
}

body .vlt-combobox-list.vlt-combobox-portal .vlt-list-search {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 46px 10px 14px !important;
    border: 1px solid #d8c86a !important;
    border-radius: 10px !important;
    background-color: #fff9d9 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* V2.9.370 - FEHLERBEHEBUNG: Fachberater-Liste liess sich nicht scrollen.
   Aufbau ist: aussen die Liste (max. 430 px hoch), darin oben das Suchfeld
   und darunter der Bereich mit den Eintraegen.

   Der Eintragsbereich hatte KEINE eigene Hoehenbegrenzung - er wuchs auf die
   volle Laenge aller Eintraege (1512 px) und wurde von der Liste einfach
   abgeschnitten. Scrollen haette also die aeussere Liste uebernehmen muessen.
   Genau das verhinderte aber "overscroll-behavior: contain" auf dem inneren
   Bereich: Diese Regel unterbindet, dass eine Scroll-Bewegung an das
   uebergeordnete Element weitergereicht wird. Da der innere Bereich selbst
   nichts zu scrollen hatte, passierte gar nichts - man sah die ersten sechs
   Namen und kam nicht weiter.

   Loesung: Die Liste wird eine Spalte (flex). Das Suchfeld behaelt seine
   Hoehe, der Eintragsbereich bekommt exakt den Rest und scrollt dadurch
   selbst. "min-height: 0" ist dabei entscheidend - ohne diese Angabe
   weigert sich ein Flex-Element, kleiner als sein Inhalt zu werden. */
body .vlt-combobox-list.vlt-combobox-portal.is-open {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body .vlt-combobox-list.vlt-combobox-portal .vlt-list-header {
    flex: 0 0 auto !important;
}

body .vlt-combobox-list.vlt-combobox-portal .vlt-list-options {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* V2.9.371 - Sonderquellen (Aroundhome & Co.) stehen bei Fachberater 2 ganz
   oben und werden durch eine Linie von den Vertriebspartnern getrennt.

   Die Linie haengt bewusst NICHT am letzten Sonderquellen-Eintrag, sondern am
   ERSTEN Eintrag danach, der keine Sonderquelle mehr ist. Grund: Beim Suchen
   werden Eintraege ausgeblendet - die Linie wandert dadurch automatisch an die
   richtige Stelle und bleibt weg, wenn gerade gar keine Sonderquelle in der
   gefilterten Liste steht. */
body .vlt-combobox-list.vlt-combobox-portal .vlt-list-option.is-special-source {
    background: #f4f8f5 !important;
    font-weight: 600 !important;
}

body .vlt-combobox-list.vlt-combobox-portal
    .vlt-list-option.is-special-source + .vlt-list-option:not(.is-special-source) {
    border-top: 2px solid #009039 !important;
}

body .vlt-combobox-list.vlt-combobox-portal .vlt-list-header::after {
    content: "🔍" !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* Fachberater 2 ist im leeren Zustand ebenfalls besser erkennbar */
#vlt-order-form [data-combobox="fb2"] input:placeholder-shown {
    background-color: #fff9d9 !important;
    border-color: #d8c86a !important;
}


/* V2.4.0 – einheitliche Suchfelder und scrollbare Auswahlfenster */
body.vlt-email-panel-open,
body.vlt-product-panel-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* E-Mail-Suche: gelb, größer, mit Lupe */
body #vlt-email-suggestions-portal .vlt-suggestion-panel-header {
    position: relative !important;
    padding: 11px 12px !important;
}
body #vlt-email-suggestions-portal .vlt-email-domain-search {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 46px 10px 14px !important;
    border: 1px solid #d8c86a !important;
    border-radius: 10px !important;
    background: #fff9d9 !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
}
body #vlt-email-suggestions-portal .vlt-suggestion-panel-header::after {
    content: "🔍" !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 19px !important;
    pointer-events: none !important;
}
body #vlt-email-suggestions-portal.is-phone.is-open {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
body #vlt-email-suggestions-portal.is-phone .vlt-suggestion-panel-header {
    flex: 0 0 70px !important;
}
body #vlt-email-suggestions-portal.is-phone .vlt-suggestion-panel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}

/* Produktgruppen-Auswahl */
body .vlt-product-suggestion-portal {
    display: none;
    position: fixed !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
}
body .vlt-product-suggestion-portal.is-open {
    display: flex !important;
    flex-direction: column !important;
}
body .vlt-product-panel-header {
    position: relative !important;
    flex: 0 0 70px !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
}
body .vlt-product-search {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px 46px 10px 14px !important;
    border: 1px solid #d8c86a !important;
    border-radius: 10px !important;
    background: #fff9d9 !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
}
body .vlt-product-panel-header::after {
    content: "🔍" !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 19px !important;
    pointer-events: none !important;
}
body .vlt-product-panel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}
body .vlt-product-option {
    display: block !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
    color: #222 !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
}
body .vlt-product-option:hover,
body .vlt-product-option:focus {
    background: #f6f6f6 !important;
}

/* V2.9.24: Straßenverzeichnis-Vorschläge - gleiches Muster wie Produktgruppen */
body.vlt-street-panel-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body .vlt-street-suggestion-portal {
    display: none;
    position: fixed !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
}
body .vlt-street-suggestion-portal.is-open {
    display: flex !important;
    flex-direction: column !important;
}
body .vlt-street-panel-header {
    position: relative !important;
    flex: 0 0 70px !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
}
body .vlt-street-search {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px 46px 10px 14px !important;
    border: 1px solid #d8c86a !important;
    border-radius: 10px !important;
    background: #fff9d9 !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
}
body .vlt-street-panel-header::after {
    content: "🔍" !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 19px !important;
    pointer-events: none !important;
}
body .vlt-street-panel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}
body .vlt-street-option {
    display: block !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
    color: #222 !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
}
body .vlt-street-option:hover,
body .vlt-street-option:focus {
    background: #f6f6f6 !important;
}
body .vlt-street-panel-list .vlt-list-empty {
    padding: 16px 18px !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* V2.9.27: Ortsauswahl bei mehrdeutiger PLZ - gleiches Muster */
body.vlt-city-panel-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body .vlt-city-suggestion-portal {
    display: none;
    position: fixed !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
}
body .vlt-city-suggestion-portal.is-open {
    display: flex !important;
    flex-direction: column !important;
}
body .vlt-city-panel-header {
    position: relative !important;
    flex: 0 0 70px !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
}
body .vlt-city-search {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px 46px 10px 14px !important;
    border: 1px solid #d8c86a !important;
    border-radius: 10px !important;
    background: #fff9d9 !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
}
body .vlt-city-panel-header::after {
    content: "🔍" !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 19px !important;
    pointer-events: none !important;
}
body .vlt-city-panel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}
body .vlt-city-option {
    display: block !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
    color: #222 !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
}
body .vlt-city-option:hover,
body .vlt-city-option:focus {
    background: #f6f6f6 !important;
}
body .vlt-city-panel-list .vlt-list-empty {
    padding: 16px 18px !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Fachberater 2 im leeren Zustand sichtbar hervorheben */
#vlt-order-form [data-combobox="fb2"] input:placeholder-shown,
#vlt-order-form #vlt-fb2:placeholder-shown {
    background-color: #fff9d9 !important;
    border-color: #d8c86a !important;
}


/* V2.4.1: Das eigentliche Hauptfeld „Fachberater 2“ dauerhaft sichtbar hervorheben */
#vlt-order-form #vlt-fb2 {
    background-color: #fff9d9 !important;
    border-color: #d8c86a !important;
}

#vlt-order-form #vlt-fb2:focus {
    background-color: #fffdf0 !important;
    border-color: #b9a936 !important;
    box-shadow: 0 0 0 2px rgba(216, 200, 106, .22) !important;
}


/* V2.4.2: Optionale Hauptfelder sichtbar hervorheben */
#vlt-order-form #vlt-email,
#vlt-order-form #vlt-phone2 {
    background-color: #fff9d9 !important;
    border-color: #d8c86a !important;
}

#vlt-order-form #vlt-email:focus,
#vlt-order-form #vlt-phone2:focus {
    background-color: #fffdf0 !important;
    border-color: #b9a936 !important;
    box-shadow: 0 0 0 2px rgba(216, 200, 106, .22) !important;
}

/* Hinweis oberhalb von Fachberater 2 optisch vom Feldtitel trennen */
#vlt-order-form .vlt-advisor-hint {
    color: #1f5b35 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}


/* V2.5.0 – sehr dezente Hervorhebung optionaler Hauptfelder */
#vlt-order-form #vlt-fb2,
#vlt-order-form #vlt-email,
#vlt-order-form #vlt-phone2 {
    background-color: #fffef4 !important;
    border-color: #e8dfae !important;
}

#vlt-order-form #vlt-fb2:focus,
#vlt-order-form #vlt-email:focus,
#vlt-order-form #vlt-phone2:focus {
    background-color: #fffef9 !important;
    border-color: #cfc277 !important;
    box-shadow: 0 0 0 2px rgba(207, 194, 119, .14) !important;
}

#vlt-order-form .vlt-new-advisor-option {
    background: #f3fbf5 !important;
    color: #195b32 !important;
    font-weight: 600 !important;
    border-top: 1px solid #d8eadc !important;
}

#vlt-order-form .vlt-new-advisor-option:hover,
#vlt-order-form .vlt-new-advisor-option:focus {
    background: #e5f5e9 !important;
}

#vlt-order-form .vlt-new-advisor-hint {
    padding: 14px 16px;
    color: #646970;
    font-size: 13px;
}

/* V2.5.1: eindeutige temporäre Fachberater-Übernahme */
.vlt-new-advisor-option{display:block!important;width:calc(100% - 20px)!important;margin:12px 10px!important;padding:16px 18px!important;background:#198754!important;color:#fff!important;border:0!important;border-radius:9px!important;font-size:18px!important;font-weight:700!important;text-align:center!important;box-shadow:0 2px 6px rgba(0,0,0,.14)!important}
.vlt-new-advisor-option:hover,.vlt-new-advisor-option:focus{background:#146c43!important;color:#fff!important}

/* Auftragseingabe: sichtbarer Titel und gesamter Arbeitsbereich wirklich mittig. */
body.vlt-order-entry-page {
    max-width: 100%;
}

.vlt-order-page-header {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.vlt-order-page-header h1 {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.vlt-mobile-center-view {
    display: none;
}

@media (max-width: 800px) {
    .vlt-order-page-main,
    .vlt-order-page-container,
    .vlt-order-shell,
    #vlt-order-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    html.vlt-horizontal-locked,
    body.vlt-order-entry-page.vlt-horizontal-locked {
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
    }

    body.vlt-order-entry-page.vlt-horizontal-locked .vlt-order-page-main,
    body.vlt-order-entry-page.vlt-horizontal-locked .vlt-order-page-container,
    body.vlt-order-entry-page.vlt-horizontal-locked .vlt-order-shell,
    body.vlt-order-entry-page.vlt-horizontal-locked #vlt-order-form {
        transform: translateX(0) !important;
    }

    .vlt-mobile-center-view {
        display: inline-flex;
        position: fixed;
        left: 50%;
        bottom: max(74px, calc(env(safe-area-inset-bottom) + 58px));
        transform: translateX(-50%);
        z-index: 99990;
        min-width: 88px;
        height: 36px;
        padding: 0 14px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 18px;
        background: rgba(255,255,255,.9);
        color: #245b36;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 3px 14px rgba(0,0,0,.16);
        opacity: .82;
        touch-action: manipulation;
    }

    .vlt-mobile-center-view[aria-pressed="true"] {
        background: rgba(36,91,54,.94);
        color: #fff;
        opacity: .94;
    }

    .vlt-mobile-center-view:active,
    .vlt-mobile-center-view:focus-visible {
        opacity: 1;
        outline: 2px solid rgba(36,91,54,.35);
        outline-offset: 2px;
    }
}


/* V2.5.8.7: OceanWP-/Theme-Seitentitel zuverlässig mittig und korrekt benennen. */
body.vlt-order-entry-page .page-header,
body.vlt-order-entry-page .page-header .container,
body.vlt-order-entry-page .page-header-title,
body.vlt-order-entry-page .entry-header,
body.vlt-order-entry-page .entry-title,
body.vlt-order-entry-page #content .page-header,
body.vlt-order-entry-page #content .entry-header,
body.vlt-order-entry-page #main .page-header,
body.vlt-order-entry-page #main .entry-header {
    text-align: center !important;
}

body.vlt-order-entry-page .page-header-title,
body.vlt-order-entry-page .entry-title,
body.vlt-order-entry-page h1.page-header-title,
body.vlt-order-entry-page h1.entry-title,
body.vlt-order-entry-page .vlt-order-page-header h1 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 800px) {
    .vlt-mobile-center-view {
        bottom: max(90px, calc(env(safe-area-inset-bottom) + 74px));
        background: rgba(255,255,255,.72);
        opacity: .68;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
    }

    .vlt-mobile-center-view[aria-pressed="true"] {
        background: rgba(36,91,54,.78);
        opacity: .82;
    }
}


/* V2.5.8.8: mobiler Datepicker scrollt mit dem Formular und bleibt bis zur Auswahl offen. */
@media (max-width: 600px) {
    .flatpickr-calendar.open.vlt-mobile-calendar {
        position: absolute !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: min(307.875px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 999999 !important;
    }

    body.vlt-datepicker-open {
        position: static !important;
        overflow-y: visible !important;
        touch-action: pan-y !important;
    }

    body.vlt-datepicker-open .flatpickr-calendar {
        touch-action: manipulation !important;
    }
}

/* V2.5.8.8: verschiebbarer Assistive-Touch-ähnlicher Fixierknopf. */
@media (max-width: 800px) {
    .vlt-mobile-center-view {
        display: inline-flex !important;
        position: fixed !important;
        top: max(10px, calc(env(safe-area-inset-top) + 8px));
        right: 10px;
        left: auto;
        bottom: auto;
        transform: none;
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.68);
        border-radius: 50%;
        background: rgba(60,60,60,.62);
        color: #fff;
        box-shadow: 0 3px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
        opacity: .82;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .vlt-mobile-center-view:active { cursor: grabbing; }

    .vlt-mobile-center-view__icon {
        display: block;
        font-size: 21px;
        line-height: 1;
    }

    .vlt-mobile-center-view__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .vlt-mobile-center-view[aria-pressed="true"] {
        background: rgba(36,91,54,.62);
        color: #fff;
        opacity: .9;
    }
}


/* V2.5.8.16 – WordPress/Elementor-Ausgabe unangetastet, mobile Seite dauerhaft horizontal fixiert. */
.vlt-mobile-center-view {
    display: none !important;
}

html.vlt-horizontal-fixed,
body.vlt-horizontal-fixed,
body.vlt-order-entry-page {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

body.vlt-order-entry-page #page,
body.vlt-order-entry-page #wrap,
body.vlt-order-entry-page #main,
body.vlt-order-entry-page #content-wrap,
body.vlt-order-entry-page .container,
body.vlt-order-entry-page .content-area,
body.vlt-order-entry-page .site-main,
body.vlt-order-entry-page .vlt-order-shell,
body.vlt-order-entry-page #vlt-order-form {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 800px) {
    body.vlt-order-entry-page {
        width: 100% !important;
        touch-action: pan-y !important;
    }

    body.vlt-order-entry-page .vlt-order-shell,
    body.vlt-order-entry-page #vlt-order-form {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* V2.5.8.17 – mobile Ansicht nicht nur sperren, sondern im sichtbaren Viewport zentrieren. */
@media (max-width: 800px) {
    html.vlt-horizontal-fixed,
    body.vlt-horizontal-fixed,
    body.vlt-order-entry-page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: clip !important;
    }

    body.vlt-order-entry-page #page,
    body.vlt-order-entry-page #wrap,
    body.vlt-order-entry-page #main,
    body.vlt-order-entry-page #content-wrap,
    body.vlt-order-entry-page #primary,
    body.vlt-order-entry-page .container,
    body.vlt-order-entry-page .content-area,
    body.vlt-order-entry-page .site-main,
    body.vlt-order-entry-page .vlt-order-page-main,
    body.vlt-order-entry-page .vlt-order-page-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.vlt-order-entry-page .vlt-order-shell,
    body.vlt-order-entry-page #vlt-order-form {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}


/* V2.5.8.21 – ruhige, rein CSS-basierte mobile Ausrichtung. */
@media (max-width: 800px) {
    html.vlt-horizontal-fixed,
    body.vlt-horizontal-fixed,
    body.vlt-order-entry-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
        touch-action: pan-y !important;
    }

    body.vlt-order-entry-page #page,
    body.vlt-order-entry-page #wrap,
    body.vlt-order-entry-page #main,
    body.vlt-order-entry-page #content-wrap,
    body.vlt-order-entry-page #primary,
    body.vlt-order-entry-page .container,
    body.vlt-order-entry-page .content-area,
    body.vlt-order-entry-page .site-main,
    body.vlt-order-entry-page .vlt-order-page-main,
    body.vlt-order-entry-page .vlt-order-page-container {
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* V2.9.41: volle Bildschirmbreite wie beim Cockpit (vorher blieb links
       und rechts je 1cm Rand stehen). */
    body.vlt-order-entry-page .vlt-order-shell {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        /* V2.9.52: contain entfernt - es hat die Sticky-Kopfleiste blockiert. */
    }

    body.vlt-order-entry-page #vlt-order-form,
    body.vlt-order-entry-page #vlt-order-form input:not([type="checkbox"]):not([type="radio"]),
    body.vlt-order-entry-page #vlt-order-form select,
    body.vlt-order-entry-page #vlt-order-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* V2.9.33: Felder haben von Anfang an (schon beim Laden) die volle Breite
   und mindestens 16px Schrift - dadurch zoomt iOS beim Antippen nicht mehr
   automatisch hinein, was vorher wie ein nachträgliches "Breiterwerden" des
   Feldes wirkte. */
@media (max-width: 800px) {
    body.vlt-order-entry-page #vlt-order-form input:not([type="checkbox"]):not([type="radio"]),
    body.vlt-order-entry-page #vlt-order-form select,
    body.vlt-order-entry-page #vlt-order-form textarea {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================================
   V2.9.36: WICHTIG - die Design/Branding-Einstellungen spritzen NACH
   dieser Datei Inline-Styles mit !important in die Seite (u.a.
   "Pflichtfelder-Hintergrund" = zartes Grün #f5fff7). Die haben die
   Regeln aus V2.9.33/2.9.35 bisher überstimmt - deshalb hier bewusst
   höhere Spezifität + !important, damit diese Regeln garantiert gelten.
   ===================================================================== */

/* Das kleine Häkchen-Kästchen: immer weißer Grund, nie Flächenfarbe.
   (Die Eingabefelder selbst behalten ihr normales Pflichtfeld-Grün.) */
#vlt-order-form .vlt-checkmark,
#vlt-order-form input:checked + .vlt-checkmark,
#vlt-order-form label:has(input:checked) .vlt-checkmark {
    background: #ffffff !important;
}

/* V2.9.753: Rinne grau, gewaehlte Seite als weisse Pille. Die alte Regel
   "beide Haelften immer weiss" ist entfallen - sie haette den Unterschied
   zwischen gewaehlt und nicht gewaehlt wieder eingeebnet. */
#vlt-order-form .vlt-aroundhome-toggle {
    background: #eef1f5 !important;
}
#vlt-order-form .vlt-aroundhome-toggle label {
    background: transparent !important;
}
#vlt-order-form .vlt-aroundhome-toggle label:has(input:checked) {
    background: #ffffff !important;
}

/* V2.9.37: Eyecatcher DAUERHAFT - der Aroundhome-Kasten faellt von Anfang an
   auf, nicht erst nach der Auswahl.
   V2.9.753: als feiner Ring statt als harter Rahmen - passt zur Pille. */
#vlt-order-form .vlt-aroundhome-toggle {
    border: 1px solid rgba(47, 111, 237, .35) !important;
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.10) !important;
}

/* Fehlerzustand (nichts ausgewählt beim Absenden) bleibt rot erkennbar. */
#vlt-order-form .vlt-aroundhome:has(input.is-error) .vlt-aroundhome-toggle {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.15) !important;
}

/* V2.9.49: Die gestrichelte Mobile-Trennlinie zwischen Auftrags-Blöcken ist
   entfallen - jeder Auftrag hat jetzt seinen eigenen blauen Rahmen. */

/* V2.9.52: overflow-x:hidden auf <body> machte den Body zum Scroll-Container
   und hebelte die Sticky-Kopfleiste komplett aus. "clip" clippt seitlichen
   Überstand genauso zuverlässig, erlaubt aber position:sticky.
   V2.9.92: Dasselbe gilt für <html>: dort stand auf dem Desktop noch
   overflow-x:hidden, was <html> zum Scroll-Container machte - dadurch pinnte
   die Sticky-Leiste nicht sauber (sie zuckte beim Scrollen bzw. wanderte mit).
   "clip" verhindert horizontales Scrollen komplett und lässt sticky ruhig
   stehen. overflow-y bleibt visible = normales Seiten-Scrollen im Viewport. */
html.vlt-horizontal-fixed,
body.vlt-order-entry-page {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* V2.9.54: iOS-"Gummiband" beim Runterziehen abschalten - dadurch wandert
   die Sticky-Kopfleiste beim Überziehen nicht mehr mit. */
html.vlt-horizontal-fixed,
body.vlt-order-entry-page {
    overscroll-behavior-y: none !important;
}

/* V2.9.397: Kurzes Aufblitzen, wenn ein Pflichtfeld den Fokus festhaelt.
   Ohne diesen Hinweis wirkt es, als haenge die Tabulatortaste - mit ihm
   ist sofort klar, dass hier noch etwas fehlt. */
.vlt-pflicht-hinweis {
    animation: vlt-pflicht-blitz .7s ease;
}
@keyframes vlt-pflicht-blitz {
    0%, 100% { box-shadow: none; }
    30%      { box-shadow: 0 0 0 3px rgba(179, 45, 46, .35); }
    60%      { box-shadow: 0 0 0 3px rgba(179, 45, 46, .18); }
}

/* V2.9.397: Der Hinweis selbst - klein, direkt unter dem Feld, blendet sich
   nach gut zwei Sekunden von allein wieder aus. */
.vlt-pflicht-meldung {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 999px;
    background: #b32d2e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    opacity: 1;
    transition: opacity .4s ease;
}
.vlt-pflicht-meldung.is-weg { opacity: 0; }


/* V2.9.423: Knopf "eigene Strasse uebernehmen" - hebt sich bewusst von
 * den Vorschlaegen ab, denn er legt einen neuen Wert an, statt einen
 * vorhandenen zu waehlen. */
.vlt-street-option.vlt-street-eigene {
    font-weight: 600;
    color: #8a5200;
    background: #fdf3e2;
}
.vlt-street-option.vlt-street-eigene:hover,
.vlt-street-option.vlt-street-eigene.is-active {
    background: #fbe9cd;
}

/* ==========================================================================
   V2.9.462: Kopfleiste des Auftragsformulars am Schreibtisch eine Stufe
   groesser - gleiche Massstaebe wie auf den uebrigen Tool-Seiten. Bis 760
   Pixel (Handy) bleibt alles unveraendert.
   ========================================================================== */
@media (min-width: 761px) {
    .vlt-order-form__topbar .vlt-page-logo {
        height: calc(36px * var(--vlt-tool-logo-scale, 1)) !important;
        max-width: calc(170px * var(--vlt-tool-logo-scale, 1)) !important;
    }
    .vlt-order-form__brand {
        gap: 12px;
    }
    .vlt-order-form__brandname {
        font-size: 15px;
    }
    .vlt-order-form__version {
        font-size: 11px;
    }
    /* V2.9.464: Knopfgroesse in der Mitte der beiden Staende. */
    .vlt-order-form__back {
        padding: 8px 15px;
        font-size: 12.5px;
    }
}

/* V2.9.701: Fachberater 2 ist durch "Aroundhome = Ja" festgeschrieben.
   Das Feld muss auf den ersten Blick als gesetzt zu erkennen sein - sonst
   tippt der Fachberater dagegen an und wundert sich. */
.vlt-field.is-festgeschrieben input {
    background: #eef1ef;
    color: #3d4a43;
    cursor: not-allowed;
}
.vlt-field.is-festgeschrieben label {
    color: #3d4a43;
}
/* V2.9.753: steht jetzt NEBEN dem Schalter, einzeilig, und darf die Kachel
   nicht hoeher machen. Deshalb: kein Umbruch, bei Platzmangel gekuerzt. */
.vlt-arho-hinweis {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.2;
    color: #5b6470;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}
.vlt-arho-hinweis strong {
    color: #1f2933;
    font-weight: 700;
}

/* ========================================================================
 * V2.9.761 - DER KIPPSCHALTER
 * ========================================================================
 *
 * Christian: "Würde gerne so einen Umschalter haben für Aroundhome und für
 * abweichende Lieferanschrift, natürlich mit dem schönen HEIM & HAUS Grün
 * dahinter. Sobald man den Haken betätigt, hat man Aroundhome."
 *
 * In 2.9.753 hatte ich gegen den Kippschalter argumentiert: Er kennt zwei
 * Stellungen, diese Felder haben drei Zustände - Ja, Nein und "noch gar
 * nicht beantwortet". Christian will ihn trotzdem, und die Form ist ja
 * richtig: Sie kennt jeder vom Telefon.
 *
 * Der dritte Zustand geht deswegen nicht verloren, er bekommt nur ein
 * eigenes Aussehen:
 *
 *   offen  - Knopf links, Rinne hell mit gestricheltem bernsteinfarbenem
 *            Rand, daneben das Wort "offen"
 *   Nein   - Knopf links, Rinne grau, daneben "Nein"
 *   Ja     - Knopf rechts, Rinne HEIM & HAUS grün, daneben "Ja"
 *
 * So ist "hat Nein gesagt" von "hat noch nichts gesagt" zu unterscheiden -
 * und der Zähler oben zählt den offenen Fall weiter mit.
 *
 * DIE BEDIENUNG ohne eine Zeile zusätzliches JavaScript: Die beiden Etiketten
 * der Radioknöpfe liegen unsichtbar über der Rinne - "Nein" auf der linken
 * Hälfte, "Ja" auf der rechten. Man tippt also dorthin, wo der Knopf hin
 * soll. Die Radioknöpfe bleiben, wie sie sind: dieselben Namen, dieselben
 * Werte, dieselbe Pflichtprüfung.
 *
 * MERKSATZ: Wenn die gewünschte Form einen Zustand nicht kennt, gibt man dem
 * Zustand ein eigenes Aussehen - statt ihn wegzulassen.
 * ===================================================================== */

#vlt-order-form .vlt-aroundhome-toggle {
    position: relative;
    display: block !important;
    flex: 0 0 auto;
    width: 56px !important;
    min-width: 56px;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid #cbd2d9 !important;
    background: #e4e8ec !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: background .16s ease, border-color .16s ease;
    cursor: pointer;
}

/* Der Knopf. */
#vlt-order-form .vlt-aroundhome-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .16s ease;
    pointer-events: none;
}

/* Die beiden Etiketten sind nur noch Tippflächen: links Nein, rechts Ja. */
#vlt-order-form .vlt-aroundhome-toggle label {
    position: absolute !important;
    top: 0;
    bottom: 0;
    width: 50% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    cursor: pointer;
    z-index: 2;
}
#vlt-order-form .vlt-aroundhome-toggle label:has(input[value="Nein"]) { left: 0; }
#vlt-order-form .vlt-aroundhome-toggle label:has(input[value="Ja"]) { right: 0; }
/* Reihenfolge im Markup ist Ja, Nein - falls :has() ausfällt, greift das hier. */
#vlt-order-form .vlt-aroundhome-toggle label:first-child { right: 0; left: auto; }
#vlt-order-form .vlt-aroundhome-toggle label:last-child { left: 0; right: auto; }
#vlt-order-form .vlt-aroundhome-toggle label span { display: none !important; }

/* Zustand: noch nichts gewählt. */
#vlt-order-form .vlt-aroundhome-toggle.is-offen {
    background: #fffaf0 !important;
    border: 1px dashed #d99a2b !important;
}

/* Zustand: Nein. */
#vlt-order-form .vlt-aroundhome-toggle.is-nein {
    background: #e4e8ec !important;
    border-color: #cbd2d9 !important;
}

/* Zustand: Ja - HEIM & HAUS Grün. */
#vlt-order-form .vlt-aroundhome-toggle.is-ja {
    background: #009039 !important;
    border-color: #009039 !important;
}
#vlt-order-form .vlt-aroundhome-toggle.is-ja::after {
    transform: translateX(24px);
}

/* Tastaturbedienung bleibt sichtbar. */
#vlt-order-form .vlt-aroundhome-toggle:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(0, 144, 57, .28) !important;
}

/* Das Wort daneben. */
.vlt-schalter-wort {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: #3d4a43;
    user-select: none;
}
.vlt-aroundhome-toggle.is-offen ~ .vlt-schalter-wort { color: #b4791f; font-weight: 700; }
.vlt-aroundhome-toggle.is-ja ~ .vlt-schalter-wort { color: #00752f; }
.vlt-aroundhome-toggle.is-nein ~ .vlt-schalter-wort { color: #6b7280; }

/* Fehlerzustand beim Absenden. */
#vlt-order-form .vlt-aroundhome:has(input.is-error) .vlt-aroundhome-toggle {
    border: 1px solid #d63638 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 2px rgba(214, 54, 56, .18) !important;
}

/* ------------------------------------------------------------------------
 * V2.9.762: Die Etiketten nehmen keine Klicks mehr entgegen - der ganze
 * Schalter tut das (siehe order-form.js, "EIN TIPP IRGENDWOHIN KIPPT DEN
 * SCHALTER"). Sie bleiben im Markup, damit die Radioknöpfe ihre Beschriftung
 * behalten und die Tastaturbedienung unverändert funktioniert.
 * ------------------------------------------------------------------------ */
#vlt-order-form .vlt-aroundhome-toggle label {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------------------
 * V2.9.763: Kein „offen"-Aussehen mehr.
 *
 * Christian: „Bitte die Schalter grundlegend nicht auf offen lassen, sondern
 * rechts steht einfach schon Ja, und der Schalter ist ausgeschaltet. Das
 * offen verwirrt dann die Mitarbeiter."
 *
 * Der unberührte Schalter sieht jetzt aus wie ein ausgeschalteter: Knopf
 * links, Rinne grau. „Ja" daneben ist ab jetzt die Beschriftung des
 * Schalters, keine Antwort.
 *
 * Was NICHT weggefallen ist: Wer ihn nie berührt, hat nichts geantwortet.
 * Der Zähler führt ihn weiter als fehlendes Feld, und beim Absenden bekommt
 * er den roten Rahmen. Weggefallen ist die Anzeige, nicht die Absicherung.
 * ------------------------------------------------------------------------ */
#vlt-order-form .vlt-aroundhome-toggle.is-offen {
    background: #e4e8ec !important;
    border: 1px solid #cbd2d9 !important;
}
.vlt-aroundhome-toggle.is-offen ~ .vlt-schalter-wort,
.vlt-aroundhome-toggle.is-nein ~ .vlt-schalter-wort {
    color: #6b7280;
    font-weight: 600;
}
.vlt-aroundhome-toggle.is-ja ~ .vlt-schalter-wort {
    color: #00752f;
    font-weight: 700;
}

/* ========================================================================
 * V2.9.773 - SECHZEHN PIXEL: DIE VERGRÖSSERUNG DES iPHONES ABSTELLEN
 * ========================================================================
 *
 * Christian, über Tage: „Die Eingabemaske lässt sich komplett nach rechts
 * und links schieben." – „Die Tabelle wird unterhalb abgeschnitten, auch
 * wenn ich fertig bin." – „Sobald ich in die Zelle reinklicke, springt die
 * ganze Tabelle ein Stück runter." – „Verdammt nochmal. Immer noch."
 *
 * Alle drei Beschwerden haben EIN gemeinsames Muster - und es ist das
 * Verhalten, das iPhones seit jeher zeigen, wenn ein Eingabefeld eine
 * Schrift KLEINER ALS 16 PX trägt: Safari vergrößert beim Antippen die
 * ganze Seite, damit die Eingabe lesbar ist. Eine vergrößerte Seite
 *
 *   - lässt sich seitlich schieben (sie ist breiter als der Bildschirm),
 *   - ist unten abgeschnitten (sie ist höher als der Bildschirm),
 *   - und der Moment des Vergrößerns sieht aus wie ein Sprung nach unten.
 *
 * Und: Die Vergrößerung bleibt nach dem Verlassen des Feldes BESTEHEN -
 * „auch wenn ich fertig bin". Genau sein Befund.
 *
 * Unsere Felder tragen 15 px (font:inherit auf dem 15-px-Grundtext). Das
 * viewport-Meta mit maximum-scale=1 SOLLTE die Vergrößerung unterbinden -
 * neuere iOS-Versionen setzen sich darüber aber teils hinweg. Worüber sich
 * Safari nie hinwegsetzt: Ein Feld mit 16 px braucht keine Vergrößerung.
 *
 * Deshalb tragen am Handy alle Eingabefelder 16 px. Nur die Felder - keine
 * Beschriftungen, keine Knöpfe: Vergrößert wird nur wegen des Feldes, in
 * dem man tippt.
 *
 * MERKSATZ: Wenn dieselbe Seite sich am Telefon schieben lässt, unten
 * abgeschnitten ist UND beim Antippen springt, ist sie vergrößert worden -
 * drei Symptome, eine Lupe.
 * ===================================================================== */
@media (max-width: 980px) {
    #vlt-order-form input:not([type="radio"]):not([type="checkbox"]),
    #vlt-order-form select,
    #vlt-order-form textarea,
    .vlt-product-suggestion-portal input,
    .vlt-street-suggestion-portal input,
    .vlt-city-suggestion-portal input,
    .vlt-email-suggestion-portal input,
    .vlt-product-search {
        font-size: 16px !important;
    }
}

/* ========================================================================
 * V2.9.793 - DER KALENDER WIRD AM HANDY KOMPAKTER
 * ========================================================================
 *
 * Christian (auf der 786er-Grundlinie): „Der Kalender muss ein bisschen
 * kleiner dargestellt sein, weil der ragt so weit nach unten raus - ein
 * bisschen von der Höhe verändern."
 *
 * Verkleinert wird die HÖHE, nicht die Tippflächen-Breite: flachere
 * Tageszellen (39 → 30 px), engerer Monatskopf, kleinere Wochentagszeile.
 * Die Tage bleiben volle Breite und damit gut treffbar. Insgesamt wird der
 * Kalender damit rund 70-80 px flacher und ragt nicht mehr unten heraus.
 * Nur am Handy - am Schreibtisch bleibt er, wie er ist.
 * ===================================================================== */
/*
 * 16.08. - Christian: "Der Kalender ist immer noch zu klein, und das Datum,
 * was heute ist, soll natuerlich schon markiert sein - damit man das direkt
 * so uebernehmen kann oder ein anderes Datum waehlt."
 *
 * Gemessen am Telefon: ein Tagesfeld war 30 px hoch bei 13,5 px Schrift, der
 * ganze Kalender 308 px breit. Unsere Tastatur daneben hat 55 px breite
 * Tasten - dagegen wirkt das winzig. Der Kalender bekommt jetzt 400 px Breite
 * (bzw. den Bildschirm minus 16 px) und 46 px hohe Tagesfelder bei 18 px
 * Schrift; das ergibt rund 55 px breite Felder, also dieselbe Groesse wie
 * eine Taste.
 *
 * Hier steht die Groesse des Kalenders am Telefon - und nur hier. In
 * cockpit-klar.css hatte kurzzeitig ein zweiter Satz Regeln dasselbe
 * geregelt; die haben verloren, weil diese hier eine Klasse mehr tragen.
 * Zwei Zustaendige fuer eine Groesse ist immer ein Fehler.
 */
@media (max-width: 600px) {
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-months {
        height: 44px;
    }
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-months .flatpickr-month,
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-months .flatpickr-prev-month,
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-months .flatpickr-next-month {
        height: 44px;
        padding-top: 8px;
        padding-bottom: 4px;
    }
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-current-month {
        font-size: 19px;
        padding-top: 6px;
    }
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-weekdays {
        height: 28px;
    }
    .flatpickr-calendar.vlt-mobile-calendar span.flatpickr-weekday {
        font-size: 13px;
        line-height: 28px;
    }
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-days,
    .flatpickr-calendar.vlt-mobile-calendar .dayContainer {
        min-height: 0 !important;
    }
    /*
     * Ohne diese Zeile bleibt das Tagesraster bei seinen eingebauten 307,875 px
     * stehen, waehrend der Kalender aussen herum 400 px breit ist - gemessen
     * 44 px breite Tagesfelder in einem 400 px breiten Kasten, also rechts eine
     * leere Spalte. Mit voller Breite werden die Felder 57 px breit, genau so
     * gross wie eine Taste unserer Tastatur.
     */
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-rContainer,
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-days,
    .flatpickr-calendar.vlt-mobile-calendar .dayContainer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-day {
        height: 46px;
        line-height: 46px;
        max-width: none;
        font-size: 18px;
        border-radius: 10px;
    }
    /*
     * Heute soll man auf den ersten Blick finden - auch dann, wenn gerade ein
     * anderer Tag gewaehlt ist. Deshalb ein deutlicher Rahmen statt des
     * blassen Standardrahmens.
     */
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-day.today {
        border-color: #2f6f3e;
        border-width: 2px;
        font-weight: 700;
    }
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-day.selected,
    .flatpickr-calendar.vlt-mobile-calendar .flatpickr-day.selected.today {
        font-weight: 700;
    }
}

/* ========================================================================
 * V2.9.808 - NEIN BEKOMMT EIN WORT UND EIN GESICHT
 *
 * Christian: "Ich hätte gerne einen Schalter, wo man auch auf Nein klicken
 * kann ... Klickt man auf die rechte Hälfte, springt er auf Ja, auf die
 * linke Hälfte auf Nein - das aber nur beim ersten Mal. Danach switcht
 * jeder Klick nur noch." Und: "Dasselbe auch bei abweichender Lieferadresse."
 *
 * Links vom Schalter steht jetzt klickbar "Nein", rechts weiterhin "Ja".
 * Ein gewähltes Nein färbt die Rinne DUNKELGRAU und das Wort fett - damit
 * unterscheidet es sich klar vom unberührten Schalter (blassgrau, beide
 * Wörter still). Die Absicherung aus 2.9.763 bleibt: Wer nie tippt, hat
 * nichts geantwortet - Zähler und roter Rahmen führen das weiter.
 * ======================================================================== */
.vlt-schalter-wort {
    cursor: pointer;
}

/* Gewähltes NEIN: dunkle Rinne, deutlich anders als das blasse "noch offen". */
#vlt-order-form .vlt-aroundhome-toggle.is-nein {
    background: #5b6862 !important;
    border-color: #4c5a53 !important;
}

/* Wortfarben über die Zeilen-Zustandsklassen (das Nein-Wort steht VOR dem
 * Schalter, deshalb nicht über Geschwister-Selektoren erreichbar). */
.vlt-aroundhome-zeile .vlt-schalter-wort--nein {
    color: #8a938d;
    font-weight: 600;
}
.vlt-aroundhome-zeile.ist-nein .vlt-schalter-wort--nein {
    color: #303a34;
    font-weight: 800;
}
.vlt-aroundhome-zeile.ist-ja .vlt-schalter-wort--nein {
    color: #9aa39d;
}
.vlt-aroundhome-zeile.ist-ja .vlt-schalter-wort:not(.vlt-schalter-wort--nein) {
    color: #00752f;
    font-weight: 800;
}
.vlt-aroundhome-zeile.ist-nein .vlt-schalter-wort:not(.vlt-schalter-wort--nein) {
    color: #9aa39d;
    font-weight: 600;
}

/* ========================================================================
 * V2.9.809 - DER BREITE SCHALTER: ZWEI FELDER IM SCHALTER
 *
 * Christian (mit Bildschirmfoto): "Ich habe eigentlich gedacht, der
 * Schalter sieht so aus: Nach rechts ist ein Feld, wo man schalten kann,
 * und nach links ist ein Feld. Also ein breiterer Schalter."
 *
 * Also: Die Woerter wandern IN den Schalter. Links steht "Nein", rechts
 * "Ja", dazwischen faehrt ein farbiger Schieber - dunkelgrau auf Nein,
 * HEIM & HAUS Gruen auf Ja. Unberuehrt: blasse Rinne, kein Schieber,
 * beide Woerter still (die Absicherung aus 2.9.763 bleibt).
 *
 * Die Radio-Etiketten, die seit 2.9.762 nur unsichtbare Tippflaechen
 * waren, bekommen ihre Beschriftung zurueck - jetzt duerfen sie sie
 * wieder zeigen, denn genau so ein Zwei-Felder-Schalter waren sie
 * urspruenglich einmal.
 * ======================================================================== */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle {
    width: 128px !important;
    min-width: 128px !important;
    height: 34px !important;
    background: #eef1f5 !important;
    border: 1px solid #cbd2d9 !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen,
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein,
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja {
    background: #eef1f5 !important;
    border-color: #cbd2d9 !important;
}

/* Der Schieber: halbe Breite, traegt die Farbe, faehrt links/rechts. */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle::after {
    width: calc(50% - 5px);
    height: calc(100% - 6px);
    top: 3px;
    left: 3px;
    border-radius: 999px;
    background: #ffffff;
    opacity: 0;
    transform: none;
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein::after {
    opacity: 1;
    background: #5b6862;
    transform: none;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after {
    opacity: 1;
    background: #009039;
    transform: translateX(calc(100% + 4px));
}

/* Die zwei Felder: Nein links, Ja rechts - mit sichtbarer Schrift. */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label {
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label:first-child { left: auto !important; right: 0 !important; }
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label:last-child { left: 0 !important; right: auto !important; }
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label:has(input[value="Ja"]) { left: auto !important; right: 0 !important; }
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label:has(input[value="Nein"]) { left: 0 !important; right: auto !important; }

#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label span:last-child {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #66727b !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein label:last-child span:last-child,
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein label:has(input[value="Nein"]) span:last-child {
    color: #ffffff !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja label:first-child span:last-child,
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja label:has(input[value="Ja"]) span:last-child {
    color: #ffffff !important;
}

/* Die Woerter AUSSEN sind im Schalter aufgegangen. */
.vlt-aroundhome-zeile .vlt-schalter-wort { display: none !important; }

/* ========================================================================
 * V2.9.810 - ZURUECK ZUR FAHRENDEN PILLE, NUR BREITER
 *
 * Christian zu 2.9.809: "Jetzt hab ich wieder ein Ja und Nein zum
 * Draufklicken. Ich wollte aber eine Pille haben, die sich nach rechts
 * schiebt oder nach links schiebt, so wie die Pille vorher war, nur
 * breiter. Nach rechts kippen für Ja, nach links kippen für Nein."
 *
 * Also kein Zwei-Felder-Look: Der Schalter ist wieder der klassische
 * Kippschalter mit heller Rinne und WEISSER Pille, die faehrt - nur ist
 * die Rinne jetzt 96 px breit, damit die Fahrt sichtbar ist. Die Woerter
 * stehen wieder AUSSEN: "Nein" links, "Ja" rechts (aus 2.9.808, samt
 * Fettung des gewaehlten Worts). Rinnenfarbe: blass = offen, dunkelgrau =
 * Nein, HEIM & HAUS Gruen = Ja. Bedienung bleibt: rechte Haelfte/Wort Ja
 * -> Ja, linke Haelfte/Wort Nein -> Nein.
 * ======================================================================== */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle {
    width: 96px !important;
    min-width: 96px !important;
    height: 34px !important;
    background: #e4e8ec !important;
    border: 1px solid #cbd2d9 !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen {
    background: #e4e8ec !important;
    border-color: #cbd2d9 !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein {
    background: #5b6862 !important;
    border-color: #4c5a53 !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja {
    background: #009039 !important;
    border-color: #009039 !important;
}

/* Die weisse Pille: faehrt links (Nein/offen) <-> rechts (Ja). */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle::after {
    width: 40px;
    height: 26px;
    top: 3px;
    left: 3px;
    border-radius: 999px;
    background: #ffffff;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transform: none;
    transition: transform .18s ease;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein::after {
    background: #ffffff;
    opacity: 1;
    transform: none;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after {
    background: #ffffff;
    opacity: 1;
    transform: translateX(48px);
}

/* Die Etiketten sind wieder unsichtbare Tippflaechen (wie vor 2.9.809). */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label span:last-child {
    display: none !important;
}

/* Die Woerter AUSSEN kommen zurueck: Nein links, Ja rechts. */
.vlt-aroundhome-zeile .vlt-schalter-wort {
    display: inline !important;
}

/* ========================================================================
 * V2.9.811 - DIE PILLE STARTET IN DER MITTE
 *
 * Christian: "Ich möchte gern, dass die Pille erst in der Mitte stehen
 * bleibt. Und ich kann die nach rechts switchen oder nach links switchen.
 * Solange die in der Mitte noch nicht rausbewegt ist, ist das Pflichtfeld
 * noch aktiviert. Wenn sie nach rechts oder links geschoben ist, dann ist
 * das Pflichtfeld beantwortet."
 *
 * Damit bekommt der dritte Zustand seine Stellung ZURUECK - diesmal ohne
 * das Wort "offen" (das hatte 2.9.763 die Mitarbeiter verwirrt), sondern
 * rein raeumlich: Mitte = noch keine Antwort. Der Zaehler und der rote
 * Rahmen beim Absenden arbeiten seit jeher genau so - jetzt zeigt es auch
 * die Pille. Rechnung: Innenbreite 94 px, Pille 40 px -> Mitte bei
 * x = 27, Start bei x = 3, also translateX(24px).
 * ======================================================================== */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after {
    transform: translateX(24px);
}

/* ========================================================================
 * V2.9.812 - ETWAS KLEINER, UND DIE MITTE WIRD EIN DUENNER STRICH
 *
 * Christian: "Den ganzen Button ein bisschen kleiner, nicht viel. Und die
 * Pille in der Mitte bitte kleiner, duenner machen, sodass man nicht das
 * Gefuehl hat, dass man da noch in irgendein Feld reinklicken kann."
 *
 * Also: Rinne 96x34 -> 86x30. Die fahrende Pille 36x22. Und im offenen
 * Zustand liegt in der Mitte nur noch ein schmaler grauer Strich (20x8,
 * ohne Schatten) - eine Marke, kein Knopf. Erst mit der Entscheidung
 * wird daraus die volle weisse Pille links oder rechts.
 * ======================================================================== */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle {
    width: 86px !important;
    min-width: 86px !important;
    height: 30px !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle::after {
    width: 36px;
    height: 22px;
    top: 3px;
    left: 3px;
    transition: transform .18s ease, width .18s ease, height .18s ease,
        top .18s ease, background .18s ease, box-shadow .18s ease;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after {
    transform: translateX(42px);
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after {
    width: 20px;
    height: 8px;
    top: 10px;
    background: #c3ccd3;
    box-shadow: none;
    transform: translateX(29px);
}

/* ========================================================================
 * V2.9.813 - ZURUECK ZUR 811er-GROESSE, DIE MITTE WIRD EIN SENKRECHTER GRIFF
 *
 * Christian zu 2.9.812: "So meinte ich es nicht. Mach es bitte wieder so
 * wie vorher, vorher war besser. Nur die Pille in der Mitte war ziemlich
 * breit - die bisschen schmaler machen, sodass sie wie ein senkrechter
 * Strich aussieht, aber nicht ganz so duenn: noch packbar, greifbar,
 * abgerundet."
 *
 * Also: Rinne wieder 96x34, fahrende Pille wieder 40x26. Und die Mitte
 * ist ein SENKRECHTER weisser Griff: 12 breit, volle 26 hoch, abgerundet,
 * mit Schatten - schmal genug, um keine Antwort zu behaupten, griffig
 * genug, um zum Schieben einzuladen. (Der flache Querstrich aus 2.9.812
 * war die falsche Richtung - senkrecht war gemeint.)
 * ======================================================================== */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle {
    width: 96px !important;
    min-width: 96px !important;
    height: 34px !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle::after {
    width: 40px;
    height: 26px;
    top: 3px;
    left: 3px;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after {
    transform: translateX(48px);
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after {
    width: 12px;
    height: 26px;
    top: 3px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transform: translateX(38px);
}

/* ========================================================================
 * V2.9.814 - DER GANZE SCHALTER EINE NUMMER KOMPAKTER
 *
 * Christian (nach Abnahme des senkrechten Griffs): "So ist es richtig.
 * Jetzt aber noch den kompletten Button etwas kleiner, bisschen
 * kompakter - der wirkt im Verhaeltnis zu allem anderen ein bisschen
 * zu gross."
 *
 * Rinne 96x34 -> 84x28, Pille 34x20, Griff 10x20. Rechnung: Innen 82,
 * Ja-Fahrt = 82-3-34 = 45, Start 3 -> translateX(42px); Griff mittig
 * bei (82-10)/2 = 36 -> translateX(33px).
 * ======================================================================== */
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle {
    width: 84px !important;
    min-width: 84px !important;
    height: 28px !important;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle::after {
    width: 34px;
    height: 20px;
    top: 3px;
    left: 3px;
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after {
    transform: translateX(42px);
}
#vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after {
    width: 10px;
    height: 20px;
    top: 3px;
    transform: translateX(33px);
}

/* ===================================================================
   2.10.1461 - Auftragsmaske am Handy: Kopfabstand und Feldhoehe

   Christian am 28.08.2026, mit zwei Fotos (Vorschau gegen echte App):
   "Die erste Zeile ist in Wirklichkeit noch ein bisschen verdeckt. Mir
   waer wichtig, wenn in die echte Umgebung ein bisschen runterrutscht,
   nicht an die Oberkante, weil die Nummer eins ist ja verdeckt. So wie
   es in der Vorschau ist, waer es perfekt. Und wenn moeglich haette ich
   gern die Eingabezellen ein wenig hoeher, die sind echt sehr schmal."

   Der Kopfabstand wird nicht mehr fest gesetzt, sondern in
   assets/js/order-form.js aus der wirklichen Hoehe der Kopfleiste
   gerechnet - siehe dort. Nur so stimmt er in jeder Umgebung: mit und
   ohne das orangefarbene Band, mit und ohne WordPress-Leiste, und auch
   wenn der gelbe Hinweis weggeklickt wird.

   Hier bleibt nur die Feldhoehe. Gemessen waren die Felder 40 Punkte
   hoch; 46 ist bequem zu treffen und laesst die Maske noch kurz genug.
   =================================================================== */
@media (max-width: 760px) {
    #vlt-order-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    #vlt-order-form select,
    .vlt-order-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    .vlt-order-form select {
        /* 2.10.1462: 11 Punkte Polster ergaben je nach Zeilenhoehe 44 bis 52 -
           die Felder standen unterschiedlich hoch. Mit 8 Punkten greift ueberall
           die Mindesthoehe und alle Felder sind gleich hoch. */
        min-height: 46px;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    #vlt-order-form textarea,
    .vlt-order-form textarea {
        min-height: 92px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ============================================================
   2.10.1468 - Christian: "Sobald ich eine Produktgruppe waehle,
   wandert die Zelle nach oben ... Das darf natuerlich nicht sein."
   Und: "die Schriften groesser da drin sind ueberall und die
   Zellen ein wenig hoeher."
   ------------------------------------------------------------
   1) Die Auftragszeile richtet ihre drei Spalten unten aus
      (align-items: end). Traegt eine Spalte zusaetzlich die graue
      Vollanzeige, wird diese Spalte hoeher - und ihr Eingabefeld
      rutscht nach oben. Gemessen im Rahmen 441 x 895: vorher alle
      drei Felder bei 1483, nach dem Einsetzen der Vollanzeige
      1498 / 1483 / 1497 - 15 Punkte Versatz.
      Die Vollanzeige wird deshalb aus dem Fluss genommen und unter
      das Feld gehaengt; Platz dafuer bekommt die Zeile nur dann,
      wenn es die Vollanzeige wirklich gibt.
   2) Schrift und Hoehe auf dem Handy: Feld 16 -> 18, Beschriftung
      12,5 -> 14,5, Mindesthoehe 46 -> 52. Der Platz reicht: die
      beiden breiten Spalten sind 191 Punkte breit, "12.500" misst
      bei 18px 55 Punkte.
   ============================================================ */
#vlt-order-form .vlt-contract-row .vlt-field,
.vlt-order-form .vlt-contract-row .vlt-field {
    position: relative;
}
#vlt-order-form .vlt-contract-row .vlt-vollanzeige,
.vlt-order-form .vlt-contract-row .vlt-vollanzeige {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 3px;
    pointer-events: none;
}
#vlt-order-form .vlt-contract-row:has(.vlt-vollanzeige),
.vlt-order-form .vlt-contract-row:has(.vlt-vollanzeige) {
    padding-bottom: 18px;
}

@media (max-width: 760px) {
    /* 2.10.1469 - Die Schriftgroesse musste hoeher gewichtet werden:
       eine aeltere Regel (@media max-width 980) setzt 16px mit
       !important und traegt mehr :not-Bedingungen, gewinnt also
       trotz spaeterer Stelle. Gemessen: 16px statt 18px. */
    body #vlt-order-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body #vlt-order-form select,
    body #vlt-order-form textarea,
    body .vlt-order-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body .vlt-order-form select,
    body .vlt-order-form textarea {
        font-size: 18px !important;
    }
    #vlt-order-form .vlt-field > label,
    .vlt-order-form .vlt-field > label,
    #vlt-order-form fieldset > legend,
    .vlt-order-form fieldset > legend {
        font-size: 14.5px !important;
    }
    #vlt-order-form .vlt-vollanzeige,
    .vlt-order-form .vlt-vollanzeige {
        font-size: 13px !important;
    }
    body #vlt-order-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body #vlt-order-form select,
    body .vlt-order-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body .vlt-order-form select {
        min-height: 52px !important;
        height: auto !important;
    }
    body #vlt-order-form textarea,
    body .vlt-order-form textarea {
        min-height: 104px !important;
        height: auto !important;
    }
    /* Der Loesch-Knopf ist 18 Punkte breit und sitzt 8 vom Rand;
       40 Punkte Polster rechts waren zu viel - in der schmalen
       Stueckzahl-Spalte (80 breit) blieben davon 28 nutzbar. */
    #vlt-order-form .vlt-contract-row input,
    .vlt-order-form .vlt-contract-row input {
        padding-right: 30px !important;
    }
}

/* ============================================================
   2.10.1471 - Christian, mit Foto: "Neben Strasse fehlt jetzt die
   Hausnummer. Die ist jetzt darunter gesetzt worden. Die Hausnummer
   bitte genauso breit wie jetzt wieder neben Strasse packen, dann
   lieber die Zelle mit der Strasse kleiner machen." Und: "Alles das,
   was Du jetzt vergroessert hast in den Zellen, muss auch mitgehen."
   ------------------------------------------------------------
   Ursache des Umbruchs: .vlt-street-split ist ein Flex-Kasten mit
   flex-wrap: wrap, und die Strassen-Huelle laeuft mit flex-basis auto.
   Die Grundbreite ist damit die Eigenbreite des Eingabefeldes - und
   die haengt an der Schriftgroesse. Gemessen nach 2.10.1469:
   Grundbreite 529 Punkte bei 392 Punkten Platz, also Umbruch.
   Jetzt startet die Strasse bei 0 und darf schrumpfen; die Hausnummer
   behaelt ihre 84 Punkte.
   ============================================================ */
@media (max-width: 760px) {
    body #vlt-order-form .vlt-street-split,
    body .vlt-order-form .vlt-street-split {
        flex-wrap: nowrap !important;
    }
    body #vlt-order-form .vlt-street-split > *:first-child,
    body .vlt-order-form .vlt-street-split > *:first-child {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
    }
    body #vlt-order-form .vlt-street-split > *:last-child,
    body .vlt-order-form .vlt-street-split > *:last-child {
        flex: 0 0 84px !important;
        width: 84px !important;
        min-width: 84px !important;
    }

    /* Die Bedienteile wachsen mit den Feldern mit. Gemessen vorher:
       Schalter 62 x 21, Ja/Nein 13,5px, Anzahl-Knoepfe 28 hoch,
       "Mehr Auftraege" 30 hoch bei 13px. */
    body #vlt-order-form .vlt-aroundhome-toggle,
    body .vlt-order-form .vlt-aroundhome-toggle {
        height: 40px !important;
    }
    /* 2.10.1473 - Christian: "Die Knoepfe von Aroundhome und von
       Abweichender Lieferanschrift stehen nicht mehr mittig, die
       stehen irgendwie nach links gedrallt."
       Die beiden Haelften der Pille haben eine feste Eigenbreite
       (gemessen 47,3 je Haelfte). In die verbreiterte Pille passen
       aber nur 96 - 6 Polster = 90 - der Rest lief rechts unter den
       abgeschnittenen Rand, der Knopf sass links. Jetzt teilen sich
       die beiden Haelften die Pille genau. Die Schrift bleibt
       unberuehrt: in der Pille steht sie bewusst auf 0, die Woerter
       Nein/Ja stehen daneben. */
    body #vlt-order-form#vlt-order-form .vlt-aroundhome-toggle label,
    body .vlt-order-form.vlt-order-form .vlt-aroundhome-toggle label {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    body #vlt-order-form .vlt-schalter-wort,
    body .vlt-order-form .vlt-schalter-wort {
        font-size: 16px !important;
    }
    body #vlt-order-form .vlt-count-box,
    body .vlt-order-form .vlt-count-box {
        min-height: 52px !important;
        font-size: 18px !important;
    }
    body #vlt-order-form .vlt-count-more,
    body .vlt-order-form .vlt-count-more {
        min-height: 46px !important;
        font-size: 16px !important;
    }
    body #vlt-order-form .vlt-clear-field,
    body .vlt-order-form .vlt-clear-field {
        font-size: 26px !important;
    }
    body #vlt-order-form .vlt-scan-umschalter,
    body #vlt-order-form .vlt-scan-umschalter__knopf,
    body .vlt-order-form .vlt-scan-umschalter,
    body .vlt-order-form .vlt-scan-umschalter__knopf {
        font-size: 16px !important;
    }
    body #vlt-order-form .vlt-submit,
    body .vlt-order-form .vlt-submit {
        min-height: 56px !important;
        font-size: 18px !important;
    }
}

/* ============================================================
   2.10.1472 - Nachtrag zu 1471: der Ja/Nein-Schalter ist nicht
   mitgewachsen. Gemessen: 84 x 28 statt der gewuenschten Groesse.
   Ursache: die Regeln fuer den Schalter tragen 'body.vlt-form-...'
   davor und sind damit genauer als eine Regel mit blossem 'body'.
   Deshalb hier die Kennung doppelt - mehr Kennungen schlagen mehr
   Klassen. Probe am lebenden Objekt: 96 x 34, die beiden Haelften
   fuellen die Pille weiterhin gleichmaessig.
   ============================================================ */
@media (max-width: 760px) {
    /* 2.10.1474 - Christian: "Die Knoepfe stehen nicht mehr mittig,
       die stehen irgendwie nach links gedrallt."
       Nachgesehen: der weisse Knopf ist kein eigenes Element, sondern
       .vlt-aroundhome-toggle::after mit fester Breite (gemessen 10
       Punkte, left: 3px). Wird nur die Pille breiter, bleibt der Knopf
       stehen und klebt links. Deshalb behaelt die Pille ihre 84 x 28
       und wird als Ganzes um ein Fuenftel vergroessert - so wandert
       der Knopf mit, und das Bild bleibt genau wie vorher, nur groesser.
       Die 16,8 Punkte, die sie dabei breiter wird, holt der Rand. */
    body #vlt-order-form#vlt-order-form .vlt-aroundhome-toggle,
    body .vlt-order-form.vlt-order-form .vlt-aroundhome-toggle {
        width: 84px !important;
        height: 28px !important;
        transform: scale(1.2);
        transform-origin: center center;
        margin-left: 9px !important;
        margin-right: 9px !important;
    }
}

/* ============================================================
   2.10.1473 - Christian: "Die Eingabezellen bei Montage und
   Kommentar sind auch noch sehr niedrig. Bitte genau die gleiche
   Hoehe anpassen."
   Gemessen: Hoehe stimmt bereits (Auswahlfelder 52, Textfeld 104),
   die Schrift war aber bei 16 haengen geblieben - dieselbe
   Genauigkeitsfalle wie in Messfalle 78. Mit doppelter Kennung.
   ============================================================ */
@media (max-width: 760px) {
    body #vlt-order-form#vlt-order-form select,
    body #vlt-order-form#vlt-order-form textarea,
    body .vlt-order-form.vlt-order-form select,
    body .vlt-order-form.vlt-order-form textarea {
        font-size: 18px !important;
    }
    body #vlt-order-form#vlt-order-form select,
    body .vlt-order-form.vlt-order-form select {
        min-height: 52px !important;
        height: auto !important;
    }
    body #vlt-order-form#vlt-order-form textarea,
    body .vlt-order-form.vlt-order-form textarea {
        min-height: 104px !important;
        height: auto !important;
    }
}

/* ============================================================
   2.10.1476 - Christian, mit Foto vom iPhone: die beiden
   Auswahlfelder bei "Ungefaehrer Montagetermin" sind sichtbar
   niedriger als die uebrigen Zellen, obwohl im Pruefrahmen fuer
   beide 52 Punkte gemessen wurden.
   ------------------------------------------------------------
   Safari auf dem iPhone bildet die Hoehe eines Auswahlfeldes aus
   Schrift und Innenpolster und laesst min-height dabei aussen vor.
   Deshalb hier zusaetzlich das Polster gesetzt - das respektiert
   Safari - und die Zeilenhoehe festgelegt. Am nativen Erscheinungs-
   bild wird bewusst nichts geaendert, sonst verschwindet der Pfeil.
   14 oben + 14 unten + 18px Schrift x 1,25 ergeben rund 51 Punkte,
   also dieselbe Hoehe wie die Eingabefelder.
   ============================================================ */
@media (max-width: 760px) {
    body #vlt-order-form#vlt-order-form select,
    body .vlt-order-form.vlt-order-form select {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        line-height: 1.25 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   2.10.1478 - Christian: "Es gibt immer noch den Sprung."
   ------------------------------------------------------------
   Auf seinem iPhone gemessen (Melder):
     121ms  Polster 121   Kopf endet 183   erste Zeile 197
     421ms  Polster  91   Kopf endet 183   erste Zeile 167
     829ms  Polster 121   Kopf endet 183   erste Zeile 197

   Die Huelle traegt transition: all. Jede Aenderung des oberen
   Polsters wird also weich gefahren - und genau diese Bewegung
   sieht Christian als Sprung. Im Pruefrahmen sind dabei sogar
   Zwischenbilder messbar (91 -> 20 -> 61 -> 87), die es als
   gesetzte Werte nie gab.

   Ein Polster ist eine Layout-Groesse, keine Verzierung. Es wird
   beim Laden einmal gestellt und darf dabei nicht wandern.
   ============================================================ */
body .vlt-order-shell,
body #vlt-order-form {
    transition: none !important;
}

/* ============================================================
   2.10.1481 - Christian: "Wenn jetzt noch Abbrechen und Absenden
   ein wenig hoeher gestaltet wird, damit man die Knoepfe besser
   packen kann."
   Gemessen vorher: beide 40 Punkte hoch, Polster 13/13, Schrift 15
   - waehrend die Eingabezellen inzwischen 52 hoch sind. Jetzt 56,
   also eine Spur hoeher als die Zellen: 18 + 18 Polster und 17px
   Schrift ergeben rund 55, die Mindesthoehe hebt auf 56.
   ============================================================ */
@media (max-width: 760px) {
    body .vlt-submit,
    body .vlt-cancel {
        min-height: 56px !important;
        height: auto !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        font-size: 17px !important;
    }
}

/* V2.10.1638: Herkunft des Kunden - drei Knoepfe nebeneinander. */
.vlt-herkunft-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.vlt-herkunft-knoepfe label{flex:1 1 96px;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid #dfe8e1;border-radius:12px;padding:11px 8px;font-size:14px;font-weight:600;color:#173f27;background:#fff;cursor:pointer;text-align:center;line-height:1.2}
.vlt-herkunft-knoepfe input{position:absolute;opacity:0;width:0;height:0}
.vlt-herkunft-knoepfe label:has(input:checked),.vlt-herkunft-knoepfe label.is-gewaehlt{background:#eef4ff;border-color:#3b82f6;color:inherit}
.vlt-herkunft-knoepfe input:focus-visible + span{outline:2px solid #3b82f6;outline-offset:3px}