/*
|--------------------------------------------------------------------------
| 2026-11-02
| Author: Claude
| Änderung (Kontakt R4): Achse, Bänder, Überschrift, Textlink und
| Abschluss-Band zentral (vt-axis.css, vt-band.css, vt-textlink.css).
| Hier bleiben Farben je Farbschema, Spalten, Karte, Telefonzeile und
| die Zeile mit den Abschluss-Links.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-27
| Author: Claude
| Neuanlage (Kontakt R1), Variante C ([vt-kontakt]). Ersetzt die Kopie
| von vt-referenzen.css (Inhalt im Backup von R1).
|
| Präfix vt-seite-kontakt-. Achse und Bänder vorläufig seitenlokal wie
| vt-refs-* (Referenzen); Auslagerung nach vt-axis.css folgt gemeinsam.
| Das Formular selbst gestaltet das Plugin VisionThinks-Kontakt
| (vt-kontakt.css).
|--------------------------------------------------------------------------
*/


/* --------------------------------------------------------------
   Farben je Farbschema. R4: Achse → 01-foundation/vt-axis.css
-------------------------------------------------------------- */

.vt-seite-kontakt {
    --vt-seite-kontakt-band: #ffffff;
    --vt-seite-kontakt-text: #34445e;
    --vt-seite-kontakt-titel: #0b1730;
    --vt-seite-kontakt-link: #1658a8;
    --vt-seite-kontakt-karte: #f5f8fc;
    --vt-seite-kontakt-linie: #d4e2f2;
    --vt-seite-kontakt-abschluss: #12264a;

    width: 100%;
}

.vt-seite-kontakt--dunkel {
    --vt-seite-kontakt-band: #12233e;
    --vt-seite-kontakt-text: #d5deeb;
    --vt-seite-kontakt-titel: #ffffff;
    --vt-seite-kontakt-link: #6fb3ff;
    --vt-seite-kontakt-karte: #172c4f;
    --vt-seite-kontakt-linie: #2a4673;
    --vt-seite-kontakt-abschluss: #0b1730;
}

/* R4: Bänder → 02-layout/vt-band.css (.vt-band--hell / --dunkel / --abschluss) */

.vt-seite-kontakt a {
    color: var(--vt-seite-kontakt-link);
}

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


/* --------------------------------------------------------------
   Hauptband: Formular links, Spalte rechts
-------------------------------------------------------------- */

.vt-seite-kontakt .vt-seite-kontakt__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

@media (min-width: 1025px) {
    .vt-seite-kontakt .vt-seite-kontakt__spalten {
        grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
        gap: 56px;
        align-items: start;
    }

    .vt-seite-kontakt .vt-seite-kontakt__mobil {
        display: none;
    }
}

/* R4: Überschrift → .vt-band__title; auf dunkel weiß */
.vt-seite-kontakt--dunkel .vt-band__title {
    color: #ffffff;
}

/* R4: Fließtext auf dunkel weiter gedämpft (#d5deeb statt Weiß aus .vt-band--dunkel) */
.vt-seite-kontakt--dunkel .vt-seite-kontakt__haupt {
    color: var(--vt-seite-kontakt-text);
}

.vt-seite-kontakt .vt-seite-kontakt__mobil {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--vt-seite-kontakt-linie);
    border-radius: var(--vt-radius-small, 10px);
    background-color: var(--vt-seite-kontakt-karte);
    font-size: 17px;
}

.vt-seite-kontakt .vt-seite-kontakt__mobil a {
    font-weight: 700;
    text-decoration: none;
}

.vt-seite-kontakt .vt-seite-kontakt__karte {
    padding: 32px;
    border: 1px solid var(--vt-seite-kontakt-linie);
    border-radius: var(--vt-radius-card, 20px);
    background-color: var(--vt-seite-kontakt-karte);
}

.vt-seite-kontakt .vt-seite-kontakt__zwischentitel {
    margin: 0 0 12px;
    color: var(--vt-seite-kontakt-titel);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

.vt-seite-kontakt .vt-seite-kontakt__telefon {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 700;
}

.vt-seite-kontakt .vt-seite-kontakt__telefon a {
    color: var(--vt-seite-kontakt-titel);
    text-decoration: none;
}

.vt-seite-kontakt .vt-seite-kontakt__text,
.vt-seite-kontakt .vt-seite-kontakt__adresse {
    margin: 0 0 10px;
    font-size: 17px;
    font-style: normal;
    line-height: 1.65;
}

.vt-seite-kontakt .vt-seite-kontakt__linie {
    height: 0;
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--vt-seite-kontakt-linie);
    background: none;
}

.vt-seite-kontakt .vt-seite-kontakt__mehr {
    margin: 14px 0 0;
}

/* R4: Textlink → 03-components/vt-textlink.css (.vt-textlink) */


/* --------------------------------------------------------------
   Abschluss: Band → .vt-band--abschluss (R4); hier nur die Link-Zeile
-------------------------------------------------------------- */

.vt-seite-kontakt .vt-seite-kontakt__abschluss {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
}

.vt-seite-kontakt .vt-seite-kontakt__abschluss-punkt {
    margin: 0;
    font-size: 17px;
}



/* --------------------------------------------------------------
   Mobil
-------------------------------------------------------------- */

@media (max-width: 767px) {
    .vt-seite-kontakt .vt-seite-kontakt__karte { padding: 24px 20px; }
    .vt-seite-kontakt .vt-seite-kontakt__spalten { gap: 32px; }
}