/* ==========================================================================
   Kontakt – nur, was es außerhalb dieser Seite nicht gibt.
   Kontaktbereich (.kontakt, .kontaktdaten), Formular, Meldungen (.alert) und .faq
   stehen in main.css, weil die Startseite sie mitbenutzt.
   ========================================================================== */

/* Kontaktbereich auf Papier: Abschnittsüberschrift in Unterseitengröße (Konzept Unterseiten: H2 36 px) */
.kontaktbereich .kontakt h2 { font-size: var(--gr-h2); }
/* Zeilenlänge der Einleitung wie im Konzept (Startseite, Abschnitt 22: Umbruch bei rund 480 px) */
.kontakt__daten .lead { max-width: 30rem; }

/* Three compact steps under the contact details: the site's step pattern (violet numbers in the
   heading font, a rule above each step like the timeline on /office-pcs), in one column with the
   number beside the text. 24 px bold numbers count as large text (3:1 is enough for them). */
.kontakt-schritte__titel { display: block; margin-top: var(--a-10); }
.kontakt-schritte { display: grid; gap: var(--a-3); max-width: 30rem; margin-top: var(--a-3); }
.kontakt-schritte > li {
    display: flex;
    align-items: baseline;
    gap: var(--a-4);
    padding-top: var(--a-3);
    border-top: var(--rand-breite) solid var(--rand);
    font-weight: 600;
    line-height: 1.4;
    color: var(--tx);
}
.kontakt-schritte .schritt__nr { flex: none; min-width: 2.25rem; margin: 0; font-size: 1.5rem; }
/* The column only sticks beside the form (main.css) where it fits under the header whole (107 px
   from the top) with some room below; else the steps would hide behind the fold until the end of
   the form. With the steps it is about 680 px tall from 1100 px, but 700 to 860 px between 960 and
   1099 px, where address and service area wrap. A phone row (TELEFON) adds 80 to 100 px. */
@media (max-height: 51.99rem) {
    .kontaktbereich .kontakt > :first-child { position: static; }
}
@media (max-width: 1099px) and (max-height: 62.99rem) {
    .kontaktbereich .kontakt > :first-child { position: static; }
}
@media (max-height: 57.99rem) {
    .kontaktbereich:has(a[href^="tel:"]) .kontakt > :first-child { position: static; }
}
@media (max-width: 1099px) and (max-height: 68.99rem) {
    .kontaktbereich:has(a[href^="tel:"]) .kontakt > :first-child { position: static; }
}

/* Rückmeldung und Konfigurator-Hinweis oben in der Formularkarte (Karte hat 12 px Abstand) */
.kontakt__formular > .alert { margin-bottom: var(--a-2); }
.kontakt__formular > .alert:focus-visible { outline-offset: var(--fokus-abstand); }
.kontakt__uebernahme { margin-bottom: var(--a-1); }

/* Häufige Fragen auf Lavendel: Wo Text die Linien des Wabenmusters kreuzt, hätte --tx3 nur
   4,4:1 (#5B6172 auf #DFD3FB). --tx2 hält dort 7:1, auf der Fläche 8,5:1. */
.kontakt-fragen .faq dd,
.kontakt-fragen__mehr { color: var(--tx2); }
.kontakt-fragen__mehr { max-width: var(--text-max); margin-top: var(--a-10); }