/************************************************************************************/ /* 6KA Softwareentwicklung und Digitalisierung */ /* https://6ka-digital.com */ /* landing-home.css v1.0.5 - 11.05.2026 */ /************************************************************************************/ @layer layout { /* content.htm */ /***************/ .landing-home { padding-top: var(--header-height-large); background: var(--primary-white); } .landing-hero { background: linear-gradient(90deg, var(--primary-grey7) 0%, var(--primary-white) 48%, var(--primary-blue3) 48%, var(--primary-blue3) 100%); border-bottom: 1px solid var(--primary-grey8); } .landing-hero__content { width: 100%; max-width: none; margin: 0; display: grid; grid-template-columns: 48% 52%; min-height: auto; } .landing-hero__text { /*padding: 5rem 4rem 2rem 4rem; */ padding: 5rem 4rem 2rem max(4rem, calc((100vw - 1440px) / 2 + 4rem));} .landing-hero__visual { color: var(--primary-white); } .landing-services { width: 100%; max-width: 1440px; margin: 2rem auto 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--primary-white); } .landing-service-card { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 2rem 2.5rem 2rem 2.5rem; margin: 1rem; background: var(--primary-white); border: 1px solid var(--primary-grey8); min-width: 0; position: relative; } .landing-service-card__head { display: flex; align-items: center; gap: 1rem; margin: 0; padding: 0; text-align: left; } .landing-service-card__icon { display: block; width: 3rem; height: auto; flex: 0 0 auto; } .landing-service-card__head h2 { margin: 0; padding: 0; font-size: 1.3rem; color: var(--primary-blue3); } .landing-bottom { max-width: 1424px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem; } @media (max-width: 767.98px) { .landing-hero__text { padding: 5rem 3rem 2rem 3rem; } } } @layer components { .landing-kicker-answer, .landing-kicker-form, .landing-kicker { display: flex; align-items: center; gap: 1rem; color: var(--primary-green3); font-weight: 500; font-size: 1.1rem; letter-spacing: 0.02em; } .landing-kicker-answer { color: var(--primary-green4); } .landing-kicker-form { color: var(--primary-green4);} .landing-kicker-form::before, .landing-kicker::before { content: ""; width: 3rem; height: 3px; background-color: var(--primary-green); flex-shrink: 0; } .landing-kicker-answer::before { content: ""; width: 3rem; height: 3px; background-color: var(--primary-green4); flex-shrink: 0; } .landing-kicker-form::before { background-color: var(--primary-green4); } .landing-hero__title { font-size: clamp(2.2rem, 2.6vw + 0.5rem, 2.8rem); line-height: 1.25; color: var(--primary-blue3); margin: 1.5rem 0; } .landing-hero__intro { max-width: 36rem; font-size: 1.15rem; font-weight: 500; line-height: 1.7; } .landing-hero__actions { display: flex; gap: 1.5rem; margin-top: 2rem; } .landing-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .2rem 2rem; text-decoration: none; text-align: center; font-weight: 400; } .landing-button--primary { background: var(--primary-blue3); color: var(--primary-white); } .landing-button--secondary { border: 1px solid var(--primary-blue3); color: var(--primary-blue3); background: var(--primary-white); } .landing-contact-box { border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); padding: 2rem 3rem 3rem 3rem; } .landing-service-card__link { margin-top: auto; color: var(--primary-green); font-weight: 700; text-decoration: none; } .landing-service-card__link:hover, .landing-service-card__link:focus-visible { color: var(--primary-blue3); text-underline-offset: 0.3rem; text-decoration: underline; } .landing-bottom__info { background: var(--primary-white); border: 1px solid var(--primary-grey8); padding: 2rem 3rem 3rem 3rem; } .landing-bottom__info span { color: var(--primary-green); } .landing-bottom-infolist { list-style: none; margin: 0; padding: 0; } .landing-bottom-infolist li { position: relative; line-height: 1.6; padding: 0 0 1rem 1rem; } .landing-bottom-infolist .landing-bottom-infolist-head { color: var(--primary-blue3); font-weight: 700; } .landing-bottom-infolist li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .38rem; height: .38rem; background: var(--primary-green); } .landing-contact-box { background: var(--primary-blue3); color: var(--primary-white); } .landing-contact-box .landing-contact-box-title { font-weight: 400; } .landing-contact-box .landing-contact-box-title-answer { font-weight: 500; text-transform: uppercase; font-size: 1.2rem; } .waas-layout { display: grid; grid-template-rows: 1fr 9.5rem; width: 100%; height: 100%; min-height: 100%; } .waas-layout-top { display: grid; grid-template-columns: minmax(10rem, clamp(11rem, 20vw, 19rem)) 1fr; min-height: 0; } .waas-layout-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 9.51rem; } .waas-layout-box { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 1rem; color: var(--primary-white); font-weight: 700; text-align: center; } .waas-layout-bottom .waas-layout-box { flex-direction: column; justify-content: flex-start; gap: .25rem; padding-top: 1.50rem; } .waas-layout-icon { width: clamp(1.75rem, 2.3vw, 2.4rem); height: auto; flex: 0 0 auto; transform: scale(1.35); transform-origin: center center; } .waas-layout-text { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; max-width: 16rem; overflow-wrap: normal; word-break: normal; font-weight: 400; hyphens: none; line-height: 1.35; } .waas-layout-text a { color: var(--primary-white); text-decoration: none; } .waas-layout-text a:hover { color: var(--primary-green4); } .waas-layout-box--one { background: var(--primary-blue3); flex-direction: column; align-items: flex-start; justify-content: center; padding: 2rem 2rem 2rem 2.5rem; text-align: left;} .waas-layout-box--two { background: var(--primary-blue3); padding: 0; overflow: hidden; position: relative; } .waas-layout-box--three { background: rgb(255, 255, 255, 0.15); border-right: 1px solid rgb(255, 255, 255, .2); } .waas-layout-box--four { background: rgb(255, 255, 255, 0.15); border-right: 1px solid rgb(255, 255, 255, .2); } .waas-layout-box--five { background: rgb(255, 255, 255, 0.15); } .waas-layout-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .waas-layout-image-text { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; margin: 0; color: var(--primary-white); font-size: clamp(1rem, 0.45vw + 0.7rem, 1.25rem); line-height: 1.45; font-weight: 500; text-shadow: 0 2px 10px rgba(0,0,0,0.45); z-index: 2; } .waas-layout-kicker { margin: 0; color: var(--primary-green4); font-size: clamp(0.75rem, 0.45vw + 0.55rem, 0.95rem); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .waas-layout-title { display: grid; gap: 0.15rem; margin: 0.75rem 0 0; color: var(--primary-white); font-size: clamp(1rem, 0.9vw + 0.55rem, 1.55rem); line-height: 1.35; font-weight: 500; align-items: center; } .waas-layout-title span { display: block; padding: 0 0 .8rem 0; } .landing-contact-form { display: grid; gap: 1.15rem; margin-top: 1.5rem; } .landing-form-field-first { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .landing-form-field { display: flex; flex-direction: column; gap: .15rem; } .landing-form-field label { color: var(--primary-green4); font-size: .9rem; font-weight: 700; } .landing-form-field input, .landing-form-field textarea { width: 100%; padding: .45rem .5rem; border: 1px solid var(--primary-grey8); background: var(--primary-blue3); color: var(--primary-green4); font: inherit; } .landing-form-field textarea { resize: vertical; min-height: 8rem; } .landing-form-field input:focus, .landing-form-field textarea:focus { outline: 1px solid var(--primary-green4); outline-offset: 1px; background: var(--primary-white); border-color: var(--primary-green); color: var(--primary-blue3)} .landing-form-field input.has-error, .landing-form-field textarea.has-error { border-color: var(--primary-orange); background: #fff8ef; } .landing-form-required-sign { color: var(--primary-orange2); padding-left: .1rem; } .landing-form-error { min-height: 1rem; color: var(--primary-orange2); font-size: .95rem; } .landing-contact-form__submit { width: 100%; border: 0; background: var(--primary-green3); color: var(--primary-white); cursor: pointer; } .landing-contact-form__submit:hover, .landing-contact-form__submit:focus-visible { background: var(--primary-green); } .landing-form-note { margin: 0; color: var(--primary-white); font-size: 1rem; font-weight: 300; line-height: 1.45; opacity: .9; } .landing-form-note a { color: var(--primary-green4); text-decoration: underline; } .landing-form-note a:hover, .landing-form-note a:focus-visible { color: var(--primary-white); } .phone-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; white-space: nowrap; text-underline-offset: 0.4rem; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; color: inherit; } .phone-link:hover, .phone-link:focus-visible { color: var(--primary-green4); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.5rem; transition: color 0.3s ease, text-underline-offset 0.3s ease; } .phone-link::before { content: ""; display: block; width: 1.6rem; height: 1.6rem; background-image: url(icons/symbPhoneFFFFFF.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .phone-link:hover::before, .phone-link:focus-visible::before { background-image: url(icons/symbPhoneC8DD81.svg); } @media (max-width: 1199.98px) { .waas-layout { grid-template-rows: 1fr auto; } .waas-layout-bottom { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(3.67rem, auto)); min-height: 11.01rem; border-top: 1px solid rgb(255, 255, 255, .2); } .waas-layout-bottom .waas-layout-box { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; justify-content: initial; gap: 0; min-height: 3.67rem; max-height: none; padding: 0 1rem; text-align: left; } .waas-layout-icon { justify-self: start; width: 1.35rem; max-height: 1.35rem; } .waas-layout-text { justify-content: flex-start; max-width: none; width: 100%; line-height: 1.25; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; } .waas-layout-top { grid-template-columns: 1fr; grid-template-rows: auto auto; } .waas-layout-box--one { order: 2; padding: 1rem 1.25rem; } .waas-layout-box--two { order: 1; } .waas-layout-title { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; font-size: clamp(0.95rem, 1vw + 0.45rem, 1.3rem); line-height: 1.35; } .waas-layout-title span { text-align: center; } .waas-layout-box--three { background: rgb(255, 255, 255, 0.15); border-right: none; border-bottom: 1px solid rgb(255, 255, 255, .2); } .waas-layout-box--four { background: rgb(255, 255, 255, 0.15); border-right: none; border-bottom: 1px solid rgb(255, 255, 255, .2); } .waas-layout-image { object-fit: contain; object-position: center center; } .waas-layout-image-text { left: 1.5rem; right: 1.5rem; bottom: 0.9rem; font-size: 1rem; } .landing-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-kicker-form { font-size: .8rem;} } @media (max-width: 1024px) { .landing-kicker { font-size: .9rem;} } @media (max-width: 900px) { .landing-hero { background: var(--primary-grey7); } .landing-hero__content, .landing-bottom { grid-template-columns: 1fr; } .landing-hero__visual { background: var(--primary-blue3); } .landing-hero__actions { flex-direction: column; } .landing-kicker-form { font-size: 1rem;} } @media (max-width: 639.98px) { .landing-services { grid-template-columns: 1fr; } .landing-kicker-form { font-size: .8rem;} } @media (max-width: 419.98px) { .waas-layout { grid-template-rows: 1fr auto; } .waas-layout-icon { margin-top: 0.1rem; width: 1.15rem; max-height: 1.15rem; } .waas-layout-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } .waas-layout-title { grid-template-columns: repeat(2, minmax(0, 1fr)); } .waas-layout-title span:nth-child(1) { display: none; } .landing-kicker-form { font-size: .9rem;} .landing-kicker-form::before { width: 3rem; } .landing-contact-box .landing-contact-box-title { font-size: 1.8rem; } } }