/*
|--------------------------------------------------------------------------
| 2026-10-27
| Author: Claude
| Neuanlage (Kontakt R1). Gestaltung des Kontaktformulars, hell und
| dunkel (.vt-kontakt--hell / .vt-kontakt--dunkel). Präfix vt-kontakt-.
|
| Farben nach claude/gestaltung-inhaltsseiten.md, Kontraste geprüft:
|   Feldrahmen hell #6e83a0 auf Weiß 3,88:1 (Nicht-Text ≥ 3:1)
|   Feldrahmen dunkel #4a90d9 auf #12233e 4,7:1
|   Hilfetext hell #5a6a82 auf Weiß 5,5:1, dunkel #a9b7cc 7,7:1
|   Links hell #1658a8, dunkel #6fb3ff (7,2:1)
| Button: zentrale Komponente .vt-btn (vt-liveconfig, vt-buttons.css).
| Breite und Achse bestimmt der umgebende Rahmen (Seite oder Popup).
|--------------------------------------------------------------------------
*/

.vt-kontakt {
    --vt-kontakt-text: #34445e;
    --vt-kontakt-titel: #0b1730;
    --vt-kontakt-leise: #5a6a82;
    --vt-kontakt-link: #1658a8;
    --vt-kontakt-feld: #ffffff;
    --vt-kontakt-rahmen: #6e83a0;
    --vt-kontakt-rahmen-hover: #1d8ff0;
    --vt-kontakt-fokus: #1d8ff0;
    --vt-kontakt-flaeche: #f5f8fc;
    --vt-kontakt-linie: #d4e2f2;
    --vt-kontakt-akzent: #1764c4;
    --vt-kontakt-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235a6a82' stroke-width='2.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    color: var(--vt-kontakt-text);
    font-size: 17px;
    line-height: 1.5;
}

.vt-kontakt--dunkel {
    --vt-kontakt-text: #d5deeb;
    --vt-kontakt-titel: #ffffff;
    --vt-kontakt-leise: #a9b7cc;
    --vt-kontakt-link: #6fb3ff;
    --vt-kontakt-feld: #0e1c33;
    --vt-kontakt-rahmen: #4a90d9;
    --vt-kontakt-rahmen-hover: #6fb3ff;
    --vt-kontakt-fokus: #6fb3ff;
    --vt-kontakt-flaeche: #172c4f;
    --vt-kontakt-linie: #2a4673;
    --vt-kontakt-akzent: #4a90d9;
    --vt-kontakt-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a9b7cc' stroke-width='2.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.vt-kontakt *,
.vt-kontakt *::before,
.vt-kontakt *::after {
    box-sizing: border-box;
}

.vt-kontakt__form {
    margin: 0;
}

.vt-kontakt a {
    color: var(--vt-kontakt-link);
    text-decoration: underline;
}

.vt-kontakt a:hover,
.vt-kontakt a:focus {
    color: var(--vt-kontakt-titel);
}

.vt-kontakt__pflicht-hinweis {
    margin: 0 0 20px;
    color: var(--vt-kontakt-leise);
    font-size: 15px;
}

/* Raster: zwei Spalten ab 600px, Gruppen und Felder untereinander */
.vt-kontakt__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 16px;
}

@media (min-width: 600px) {
    .vt-kontakt__raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vt-kontakt__feld {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.vt-kontakt__feld--radio {
    grid-column: 1 / -1;
}

.vt-kontakt__label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--vt-kontakt-titel);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.vt-kontakt__optional {
    color: var(--vt-kontakt-leise);
    font-size: 14px;
    font-weight: 400;
}

.vt-kontakt__optional[hidden] {
    display: none;
}

.vt-kontakt .vt-kontakt__eingabe {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--vt-kontakt-rahmen);
    border-radius: var(--vt-radius-small, 10px);
    background-color: var(--vt-kontakt-feld);
    color: var(--vt-kontakt-titel);
    font: inherit;
    font-size: 16px;               /* verhindert Zoom auf iOS */
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s ease;
}

.vt-kontakt select.vt-kontakt__eingabe {
    padding-right: 40px;
    appearance: none;
    background-image: var(--vt-kontakt-pfeil);
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    cursor: pointer;
}

.vt-kontakt .vt-kontakt__eingabe--text {
    min-height: 140px;
    resize: vertical;
}

.vt-kontakt .vt-kontakt__eingabe:hover {
    border-color: var(--vt-kontakt-rahmen-hover);
}

.vt-kontakt .vt-kontakt__eingabe:focus,
.vt-kontakt .vt-kontakt__eingabe:focus-visible {
    border-color: var(--vt-kontakt-fokus);
    outline: 3px solid var(--vt-kontakt-fokus);
    outline-offset: 1px;
}

.vt-kontakt__hilfe {
    margin: 6px 0 0;
    color: var(--vt-kontakt-leise);
    font-size: 14px;
}

/* Anliegen eingeklappt */
.vt-kontakt__kurz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--vt-kontakt-linie);
    border-radius: var(--vt-radius-small, 10px);
    background-color: var(--vt-kontakt-flaeche);
}

.vt-kontakt__kurz[hidden],
.vt-kontakt__feld[hidden] {
    display: none;
}

.vt-kontakt__kurz-text {
    margin: 0;
    color: var(--vt-kontakt-titel);
    font-size: 16px;
}

.vt-kontakt__kurz-label {
    color: var(--vt-kontakt-leise);
}

/* R3b 2026-10-28: „ändern“ als Umriss-Knopf (.vt-btn--secondary-on-light),
   niedriger als der Standard. Höhere Spezifität gegen Theme-Knopfregeln
   (Großbuchstaben, Rahmen). Alte Textlink-Regeln:
.vt-kontakt .vt-kontakt__aendern { margin-left: auto; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--vt-kontakt-link); font: inherit; font-size: 16px; font-weight: 500; text-decoration: underline; cursor: pointer; }
.vt-kontakt .vt-kontakt__aendern:focus-visible { outline: 3px solid var(--vt-kontakt-fokus); outline-offset: 2px; border-radius: 4px; }
*/

.vt-kontakt .vt-kontakt__kurz .vt-kontakt__kurz-text {
    margin: 0;
}

.vt-kontakt .vt-kontakt__kurz .vt-btn.vt-kontakt__aendern {
    width: auto;
    min-height: 40px;
    margin: 0 0 0 auto;
    padding: 0 18px;
    border-radius: var(--vt-radius-button, 20px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
}

.vt-kontakt .vt-kontakt__kurz .vt-btn.vt-kontakt__aendern:focus-visible {
    outline: 3px solid var(--vt-kontakt-fokus);
    outline-offset: 2px;
}

/* Gruppen je Anliegen */
.vt-kontakt__gruppe {
    min-width: 0;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
}

.vt-kontakt__legende {
    margin: 0 0 12px;
    padding: 0;
    color: var(--vt-kontakt-titel);
    font-size: 16px;
    font-weight: 700;
}

/* Mit JavaScript: nur aktive Gruppe, Legende nur für Screenreader */
.vt-kontakt--js .vt-kontakt__gruppe[data-aktiv="0"] {
    display: none;
}

.vt-kontakt--js .vt-kontakt__legende {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.vt-kontakt__hinweis {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--vt-kontakt-akzent);
    background-color: var(--vt-kontakt-flaeche);
    font-size: 16px;
}

/* Radio und Checkbox */
.vt-kontakt__optionen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.vt-kontakt__option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--vt-kontakt-titel);
    font-size: 16px;
    cursor: pointer;
}

.vt-kontakt input[type="radio"],
.vt-kontakt input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--vt-kontakt-akzent);
    cursor: pointer;
}

.vt-kontakt input[type="radio"]:focus-visible,
.vt-kontakt input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--vt-kontakt-fokus);
    outline-offset: 2px;
}

.vt-kontakt__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 24px;
    font-size: 16px;
}

.vt-kontakt__check input {
    margin-top: 3px;
}

.vt-kontakt__check label {
    color: var(--vt-kontakt-text);
    cursor: pointer;
}

/* Absenden */
.vt-kontakt__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.vt-kontakt__antwort {
    margin: 0;
    color: var(--vt-kontakt-leise);
    font-size: 15px;
}

.vt-kontakt__status {
    margin: 16px 0 0;
    color: var(--vt-kontakt-titel);
    font-size: 16px;
    font-weight: 500;
}

.vt-kontakt__status:empty {
    display: none;
}

.vt-kontakt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .vt-kontakt .vt-kontakt__eingabe { transition: none; }
}


/* --------------------------------------------------------------
   R1c 2026-10-28 (Sichtprüfung Klaus 27.10., 05:03 und 20:24)
   Fokus und Hover machen den Rahmen STÄRKER, nie heller:
   hell  Rahmen #6e83a0 → Hover #1764c4 → Fokus #0b3a7a, 2px
   dunkel Rahmen #4a90d9 → Hover #8cc4ff → Fokus #ffffff, 2px
   Ein Rahmen (Umriss liegt auf dem Feldrand), Theme-Schatten aus.
   Vorläufig hier; wandert mit der globalen Feld-CSS
   (03-components/vt-form-inputfield.css, Abstimmung offen).
-------------------------------------------------------------- */

.vt-kontakt {
    --vt-kontakt-rahmen-hover: #1764c4;
    --vt-kontakt-fokus: #0b3a7a;
}

.vt-kontakt--dunkel {
    --vt-kontakt-rahmen-hover: #8cc4ff;
    --vt-kontakt-fokus: #ffffff;
}

.vt-kontakt .vt-kontakt__eingabe:focus,
.vt-kontakt .vt-kontakt__eingabe:focus-visible {
    border-color: var(--vt-kontakt-fokus);
    outline: 1px solid var(--vt-kontakt-fokus);
    outline-offset: 0;
    box-shadow: none;
}


/* --------------------------------------------------------------
   R1d 2026-10-28 (Messung Klaus 09:05)
   Textfelder (Vorname, Nachname, Firma, Adresse) verloren den
   Fokus-Umriss: eine Inline-Regel
     .woocommerce-js input[type="text"]:focus { outline-style: unset; … }
   hat Spezifität (0,3,1) und schlägt (0,3,0). Höhere Spezifität
   (0,4,0) über den Formular-Rahmen, ohne !important. Damit gleich
   wie Telefon und Nachricht.
-------------------------------------------------------------- */

.vt-kontakt .vt-kontakt__form .vt-kontakt__eingabe:focus,
.vt-kontakt .vt-kontakt__form .vt-kontakt__eingabe:focus-visible {
    border-style: solid;
    border-width: 1px;
    border-color: var(--vt-kontakt-fokus);
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--vt-kontakt-fokus);
    outline-offset: 0;
    box-shadow: none;
}


/* --------------------------------------------------------------
   R2 2026-10-28: Absenden, Fehler, Hinweise, Erfolgsmeldung
   Fehlerfarbe hell #b42318 (6,6:1 auf Weiß), dunkel #ff9b8f
   (7,7:1 auf #12233e).
-------------------------------------------------------------- */

.vt-kontakt {
    --vt-kontakt-fehler: #b42318;
    --vt-kontakt-fehler-flaeche: #fef3f2;
}

.vt-kontakt--dunkel {
    --vt-kontakt-fehler: #ff9b8f;
    --vt-kontakt-fehler-flaeche: #2a1d2e;
}

.vt-kontakt__form[hidden],
.vt-kontakt__erfolg[hidden],
.vt-kontakt__fehlerliste[hidden] {
    display: none;
}

/* Fangfeld: außerhalb des Bildes (nicht display:none) */
.vt-kontakt .vt-kontakt__fang {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Ohne JavaScript kein Absenden (Rechenaufgabe), Hinweis statt Knopf */
.vt-kontakt:not(.vt-kontakt--js) .vt-kontakt__aktionen {
    display: none;
}

.vt-kontakt__ohne-js {
    margin: 0;
    padding: 12px 16px;
    border-left: 3px solid var(--vt-kontakt-akzent);
    background-color: var(--vt-kontakt-flaeche);
    font-size: 16px;
}

/* Fehler am Feld */
.vt-kontakt .vt-kontakt__fehler-text {
    margin: 6px 0 0;
    color: var(--vt-kontakt-fehler);
    font-size: 15px;
    font-weight: 500;
}

.vt-kontakt .vt-kontakt__form .vt-kontakt__eingabe[aria-invalid="true"] {
    border-color: var(--vt-kontakt-fehler);
}

/* Fehlerliste oben */
.vt-kontakt .vt-kontakt__fehlerliste {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid var(--vt-kontakt-fehler);
    border-left-width: 4px;
    border-radius: var(--vt-radius-small, 10px);
    background-color: var(--vt-kontakt-fehler-flaeche);
}

.vt-kontakt .vt-kontakt__fehlerliste:focus-visible {
    outline: 2px solid var(--vt-kontakt-fokus);
    outline-offset: 2px;
}

.vt-kontakt .vt-kontakt__fehlerliste-titel {
    margin: 0 0 6px;
    color: var(--vt-kontakt-titel);
    font-weight: 700;
}

.vt-kontakt .vt-kontakt__fehlerliste ul {
    margin: 0;
    padding-left: 20px;
}

.vt-kontakt .vt-kontakt__fehlerliste a {
    color: var(--vt-kontakt-fehler);
}

/* Hinweis nach dem Absenden */
.vt-kontakt .vt-kontakt__status--hinweis,
.vt-kontakt .vt-kontakt__status--fehler {
    padding: 12px 16px;
    border-left: 3px solid var(--vt-kontakt-fehler);
    background-color: var(--vt-kontakt-fehler-flaeche);
}

.vt-kontakt .vt-kontakt__senden[aria-busy="true"] {
    cursor: progress;
    opacity: .8;
}

/* Erfolgsmeldung (ersetzt das Formular) */
.vt-kontakt .vt-kontakt__erfolg {
    padding: 28px 32px;
    border: 1px solid var(--vt-kontakt-linie);
    border-left: 4px solid var(--vt-kontakt-akzent);
    border-radius: var(--vt-radius-small, 10px);
    background-color: var(--vt-kontakt-flaeche);
    color: var(--vt-kontakt-text);
}

.vt-kontakt .vt-kontakt__erfolg:focus {
    outline: none;
}

.vt-kontakt .vt-kontakt__erfolg:focus-visible {
    outline: 2px solid var(--vt-kontakt-fokus);
    outline-offset: 2px;
}

.vt-kontakt .vt-kontakt__erfolg-titel {
    margin: 0 0 16px;
    color: var(--vt-kontakt-titel);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
}

.vt-kontakt .vt-kontakt__erfolg p {
    margin: 0 0 12px;
}

.vt-kontakt .vt-kontakt__erfolg-daten {
    padding-left: 12px;
    border-left: 2px solid var(--vt-kontakt-linie);
    color: var(--vt-kontakt-titel);
    font-weight: 500;
}

.vt-kontakt .vt-kontakt__erfolg .vt-kontakt__erfolg-korrektur {
    margin: 16px 0 0;
}

/* R2b 2026-10-28: Textlink-Stil für „Angaben korrigieren“ entfällt, jetzt .vt-btn.
.vt-kontakt .vt-kontakt__korrigieren {
    padding: 0;
    border: 0;
    background: none;
    color: var(--vt-kontakt-link);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.vt-kontakt .vt-kontakt__korrigieren:focus-visible {
    outline: 2px solid var(--vt-kontakt-fokus);
    outline-offset: 2px;
    border-radius: 3px;
}
*/

@media (max-width: 767px) {
    .vt-kontakt .vt-kontakt__erfolg { padding: 22px 20px; }
}

/* Fehlertext am Datenschutz-Häkchen unter den Satz, nicht daneben */
.vt-kontakt .vt-kontakt__check {
    flex-wrap: wrap;
}

.vt-kontakt .vt-kontakt__check label {
    flex: 1 1 0;
    min-width: 0;
}

.vt-kontakt .vt-kontakt__check .vt-kontakt__fehler-text {
    flex: 0 0 100%;
    margin-left: 32px;
}


/* --------------------------------------------------------------
   R2b 2026-10-28 (Sichtprüfung Klaus 11:44)
   - Überschrift der Erfolgsmeldung: Theme setzt h3 in Großbuchstaben
     → normal.
   - „Angaben korrigieren“ ist jetzt .vt-btn--secondary-on-light
     (zentrale Komponente vt-buttons.css), Abstand zum Satz darüber.
     Dunkel: Umriss-Variante für dunklen Grund.
-------------------------------------------------------------- */

.vt-kontakt .vt-kontakt__erfolg .vt-kontakt__erfolg-titel {
    text-transform: none;
    letter-spacing: normal;
}

.vt-kontakt .vt-kontakt__erfolg .vt-kontakt__erfolg-korrektur {
    margin: 16px 0 12px;
}

.vt-kontakt--dunkel .vt-btn.vt-btn--secondary-on-light {
    border-color: rgba(94, 169, 255, .55);
    color: #cfe6ff;
}

.vt-kontakt--dunkel .vt-btn.vt-btn--secondary-on-light:hover,
.vt-kontakt--dunkel .vt-btn.vt-btn--secondary-on-light:focus-visible {
    background-color: rgba(12, 35, 77, .55);
    border-color: rgb(34, 138, 232);
    color: #ffffff;
}