190 lines
3.4 KiB
CSS
190 lines
3.4 KiB
CSS
.hero {
|
||
background: var(--color-background-linear);
|
||
padding-block: var(--space-16);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inner {
|
||
max-width: var(--container-width);
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-4);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.decoration {
|
||
position: absolute;
|
||
top: var(--space-8);
|
||
right: var(--space-8);
|
||
display: none;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
gap: var(--space-3);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.dot {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: var(--radius-full);
|
||
background-color: var(--color-accent);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.heading {
|
||
color: var(--color-heading);
|
||
max-width: 24ch;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.lead {
|
||
margin-top: var(--space-3);
|
||
font-size: var(--font-size-base);
|
||
max-width: 60ch;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* --- Form Section --- */
|
||
.formSection {
|
||
padding-block: var(--space-16);
|
||
}
|
||
|
||
.formInner {
|
||
max-width: var(--container-width);
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border-radius: var(--space-2);
|
||
padding: var(--space-2) var(--space-2) var(--space-2) 0;
|
||
}
|
||
|
||
/* Links: kein eigener Hintergrund - bleibt leer/weiß */
|
||
.formPanel {
|
||
padding: var(--space-8) var(--space-6) var(--space-6);
|
||
}
|
||
|
||
/*
|
||
Rechts: Hintergrundbild mit dunklem Verlauf zur Lesbarkeit.
|
||
Inhalt wird als Flex-Column mit space-between verteilt:
|
||
Überschrift oben links, Kontaktdaten unten links.
|
||
*/
|
||
.infoPanel {
|
||
position: relative;
|
||
background-image:
|
||
linear-gradient(
|
||
180deg,
|
||
rgb(0 0 0 / 35%) 0%,
|
||
rgb(0 0 0 / 20%) 45%,
|
||
rgb(0 0 0 / 65%) 100%
|
||
),
|
||
url("/images/contact.jpg");
|
||
background-size: cover;
|
||
background-position: center;
|
||
padding: var(--space-8) var(--space-6) var(--space-6);
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-height: 420px;
|
||
border-radius: var(--space-2);
|
||
}
|
||
|
||
.infoHeading {
|
||
color: #fff;
|
||
max-width: 20ch;
|
||
}
|
||
|
||
.infoList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.infoItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.infoLabel {
|
||
font-size: var(--font-size-small, 0.875rem);
|
||
font-weight: var(--font-weight-medium);
|
||
color: rgb(255 255 255 / 80%);
|
||
}
|
||
|
||
.infoValue {
|
||
font-size: var(--font-size-base);
|
||
font-weight: var(--font-weight-medium);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a.infoValue:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Tablet: 768px – 50/50 Aufteilung */
|
||
@media (min-width: 768px) {
|
||
.hero,
|
||
.formSection {
|
||
padding-block: var(--space-24);
|
||
}
|
||
|
||
.decoration {
|
||
display: grid;
|
||
top: -24px;
|
||
}
|
||
|
||
.dot {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.formInner {
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
background: var(--color-background-linear);
|
||
}
|
||
|
||
.formPanel {
|
||
width: 50%;
|
||
padding: var(--space-8);
|
||
}
|
||
|
||
.infoPanel {
|
||
width: 50%;
|
||
padding: var(--space-10) var(--space-8) var(--space-8);
|
||
min-height: 480px;
|
||
}
|
||
}
|
||
|
||
/* Desktop: 1024px – zurück auf 40/60 */
|
||
@media (min-width: 1024px) {
|
||
.hero {
|
||
padding-block: var(--space-36);
|
||
}
|
||
|
||
.decoration {
|
||
top: -42px;
|
||
}
|
||
|
||
.formPanel {
|
||
width: 40%;
|
||
padding: var(--space-10);
|
||
}
|
||
|
||
.infoPanel {
|
||
width: 60%;
|
||
padding: var(--space-12) var(--space-10) var(--space-10);
|
||
min-height: 560px;
|
||
}
|
||
}
|