/************************************************************************************/ /* 6KA Softwareentwicklung und Digitalisierung */ /* https://6ka-digital.com */ /* */ /* main-contact.css v1.0.0 - 20.05.2026 */ /************************************************************************************/ @layer layout { .contact-page { padding-top: var(--header-height-large); background: var(--primary-grey7); } .contact-layout { display: grid; grid-template-columns: minmax(2rem, 13.3vw) minmax(0, 1fr) minmax(20rem, 28.5vw); min-height: 42rem; } .contact-left { background: var(--primary-grey7); } .contact-main { min-width: 0; background: var(--primary-white); padding: 4.5rem 5rem 4rem 4rem; } .contact-section { max-width: 48rem; min-width: 0; margin: 0 0 2.5rem 0; } .contact-form { max-width: 48rem; min-width: 0; display: grid; gap: 1.15rem; margin: 1.5rem 0 0 0; } @media (max-width: 1024px) { .contact-layout { grid-template-columns: 1fr; } .contact-left { display: none; } .contact-main { padding: 3rem 2rem 3rem 3rem; } } @media (max-width: 639.98px) { .contact-main { padding: 2.5rem 1.5rem 3rem 2.5rem; } } } @layer components { .contact-kicker { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem 0; color: var(--primary-green3); font-size: 1.2rem; font-weight: 500; letter-spacing: .02em; } .contact-kicker::before { content: ""; width: 3rem; height: 3px; background-color: var(--primary-green); flex-shrink: 0; } .contact-title { margin: 0 0 1.5rem 0; color: var(--primary-blue3); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; font-weight: 700; } .contact-intro { max-width: 46rem; margin: 0; color: var(--primary-grey6); line-height: 1.6; } .contact-divider { width: 100%; max-width: 48rem; height: 2px; margin: 2rem 0 2.5rem 0; background: var(--primary-green4); } .contact-heading { margin: 0 0 .8rem 0; color: var(--primary-blue3); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.25; font-weight: 700; } .contact-section p { margin: 0 0 1rem 0; color: var(--primary-grey2); line-height: 1.65; } /* DOC: Kontakt-Informationsblock im oberen Bereich */ .contact-info-section { margin: 0 0 2.5rem 0; max-width: 48rem; } .contact-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .contact-info-company { margin: 0 0 1.5rem 0; color: var(--primary-blue3); line-height: 1.4; font-weight: 700; } .contact-info-name { font-size: 1.25rem; } .contact-info-sub { font-size: 1.1rem; color: var(--primary-green3); } .contact-info-desc { font-size: 1rem; font-weight: 400; } .contact-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } .contact-info-block { display: flex; flex-direction: column; min-width: 0; } .contact-address { margin: 0 0 1.25rem 0; color: var(--primary-grey2); font-style: normal; line-height: 1.6; } .contact-links-group { color: var(--primary-grey2); line-height: 1.7; } .contact-info-region { margin: 0 0 0.4rem 0; color: var(--primary-green3); font-size: 1rem; font-weight: 700; } .contact-mt-15 { margin-top: 1.5rem; } .contact-inline-note { display: none; } .imprint-block-contact { margin: 0; color: var(--primary-black); line-height: 2; font-style: normal; font-size: 1.6; } .contact-reveal-btn { padding-left: 0; border: none; background-color: var(--primary-white); font-size: .9rem; font-weight: 500; cursor: pointer; color: var(--primary-brown); } a.mail-link, a.phone-link { font-size: 1rem; font-weight: 400; color: var(--primary-black); background: none; text-decoration: none; padding: 0; } a.mail-link:hover, a.phone-link:hover { text-decoration: underline; text-underline-offset: 0.3rem; } .mail-link, .page-link, .phone-link { display: inline-flex; align-items: center; } .mail-link::before, .page-link::before, .phone-link::before { content: ""; margin-right: .5rem; width: 1.6rem; height: 1.6rem; background-image: url(icons/symbPhone7E9C1E.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .mail-link::before { background-image: url(icons/symbMail7E9C1E.svg); } .page-link::before { background-image: url(icons/symbPage7E9C1E.svg); } .contact-link { color: var(--primary-blue4); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; } .contact-link:hover, .contact-link:focus-visible { color: var(--primary-green3); text-decoration: none; } /* DOC: Formularkomponenten */ .contact-form-section { padding-top: .5rem; } .contact-form-field-first { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .contact-form-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .contact-form-field label { color: var(--primary-black); font-size: 1.1rem; font-weight: 500; line-height: 1.45; } .contact-required { color: var(--primary-red); font-size: 1rem; font-weight: 500; } .contact-optional { color: var(--primary-grey3); font-size: 1rem; font-weight: 400; } .contact-form-field input, .contact-form-field select, .contact-form-field textarea { width: 100%; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--primary-grey4); border-top: none; background: var(--primary-grey7); color: var(--primary-grey2); font: inherit; line-height: 1.4; } .contact-form-field textarea { min-height: 10rem; resize: vertical; } .contact-form-field input:focus, .contact-form-field select:focus, .contact-form-field textarea:focus { outline: 2px solid var(--primary-green4); outline-offset: 1px; border-color: var(--primary-green); } .contact-form-field input[aria-invalid="true"], .contact-form-field select[aria-invalid="true"], .contact-form-field textarea[aria-invalid="true"]{ background-color: var(--primary-green2); } .contact-form-error { min-height: 1rem; color: var(--primary-red3); font-size: .9rem; line-height: 1.35; } .contact-check-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .8rem; align-items: start; margin: .25rem 0 0 0; } .contact-check-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0 0; } .contact-check-row label { color: var(--primary-grey2); line-height: 1.55; } .contact-disclaimer { margin: 1rem 0 0 0; padding: 1.25rem; background-color: var(--primary-green2); border-left: 3px solid var(--primary-green); font-size: 0.9rem; } .contact-disclaimer p { margin: 0; line-height: 1.5; } .contact-submit { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 3.25rem; margin: 1.5rem 0 0 0; padding: .2rem 2rem; border: 0; background: var(--primary-green3); color: var(--primary-white); font: inherit; font-weight: 700; cursor: pointer; } .contact-submit:hover, .contact-submit:focus-visible { background: var(--primary-green); } @media (max-width: 639.98px) { .contact-kicker { font-size: 1rem; } .contact-submit { width: 100%; } } @media (max-width: 1199.98px) { .contact-info-grid { grid-template-columns: 1fr; gap: 2rem; } } }