:root {
--color-primary: #2563eb;
--color-dark: #575656;
--color-light: #f3f4f6;
--color-white: #ffffff;
--shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.08);
--radius: 14px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: system-ui, sans-serif;
background: var(--color-light);
color: var(--color-dark);
}
a {
color: inherit;
}
h1 {
font-size: clamp(2.3rem, 4vw, 3.2rem);
font-weight: 800;
margin: 0 0 16px;
line-height: 1.1;
}
h2 {
font-size: 2rem;
margin: 0 0 20px;
font-weight: 700;
}
h3 {
font-size: 1.25rem;
margin: 0 0 12px;
font-weight: 700;
}
.site-main {
display: block;
}
.page-section { max-width: 85%;
margin: 0 auto;
text-align: center;
}
.page-section .wp-block-post-title {
display: none;
}
.page-section--center {
text-align: center;
max-width: 60%;
margin-top: 45px;
}
.page-section--compact {
padding: 50px 20px;
} .grid {
display: grid;
gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid--4 {
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
} .card,
.card-beratung {
background: var(--color-white);
border-radius: var(--radius);
padding: 25px;
display: flex;
flex-direction: column;
gap: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.card-beratung {
gap: unset;
}
.card:hover,
.card-beratung:hover {
transform: translateY(-6px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
} .button {
display: inline-block;
background: var(--color-primary);
color: white;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
margin-top: 10px;
font-weight: 700;
}
.button:hover {
background: #1d4ed8;
}
.card-image {
width: 100%;
height: 170px;
object-fit: cover;
border-radius: calc(var(--radius) - 4px);
} .faq-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.faq-list li {
background: white;
border-radius: 12px;
padding: 18px 20px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
margin-bottom: 12px;
} .quote {
background: white;
border-radius: var(--radius);
padding: 30px 26px;
box-shadow: var(--shadow-soft);
margin: 0 auto;
max-width: 900px;
}
.quote p {
margin: 0;
font-size: 1.05rem;
line-height: 1.8;
}
.quote-author {
margin-top: 16px;
color: rgba(17, 24, 39, 0.8);
font-weight: 800;
} .wp-block-image {
margin: auto;
position: relative;
overflow: hidden;
border-radius: 30px;
max-width: 85%;
}
.wp-block-image img {
width: 100%;
height: auto;
display: block;
} .page-section--center .section-kicker,
.page-section .section-kicker {
margin: 0 auto 0;
color: #00597b;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.1px;
text-transform: uppercase;
line-height: 1.1;
}
.page-section--center h2,
.page-section h2 {
font-size: clamp(2rem, 2.55vw, 3.4rem);
margin: 0 0 25px;
}
.page-section--center .section-subtitle,
.page-section .section-subtitle {
margin: 0 0 50px;
font-size: 1.3rem;
line-height: 1.2;
} .startseitenbild {
aspect-ratio: 16 / 8;
}
.seitenbild {
max-width: 100%;;
}
.seitenbild img {
object-fit: cover;
object-position: center;
aspect-ratio: 16 / 8;
max-width: 100%;
transform: scale(1.7) translateX(-155px) translateY(90px);
}
.galerie {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
align-items: stretch; }
.wp-block-columns.galerie .wp-block-column,
.galerie > .blocks-gallery-item,
.galerie > .blocks-gallery-image,
.galerie > .item {
display: flex;
flex-direction: column;
align-self: stretch;
} .galerie > .wp-block-column {
width: 100% !important;
flex-basis: 100% !important;
}
.item {
overflow: hidden;
break-inside: avoid;
margin: 0 !important;
max-width: 100%;
border-radius: 20px; height: 100%;
}
.item img,
.wp-block-gallery .blocks-gallery-item img,
.blocks-gallery-grid .blocks-gallery-item img,
.galerie img {
width: 100%;
height: 100%;
display: block;
object-fit: cover; } .galerie,
.wp-block-gallery,
.blocks-gallery-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
grid-auto-rows: auto !important;
align-items: start !important;
}
.galerie > *,
.wp-block-gallery .blocks-gallery-item,
.wp-block-gallery .blocks-gallery-image,
.blocks-gallery-grid .blocks-gallery-item,
.blocks-gallery-grid .blocks-gallery-image {
align-self: start !important;
height: auto !important;
max-width: 100% !important;
}
.galerie img,
.wp-block-gallery .blocks-gallery-item img,
.wp-block-gallery .blocks-gallery-image img,
.blocks-gallery-grid .blocks-gallery-item img,
.blocks-gallery-grid .blocks-gallery-image img {
width: 100% !important;
object-fit: cover !important;
}
@media (max-width: 1600px) {
.page-section--center {
max-width: 85%;
}
}
@media (max-width: 980px) {
.page-section {
max-width: calc(100% - 48px);
}
.page-section--center {
max-width: calc(100% - 48px);
margin-top: 36px;
}
.page-section--compact {
padding: 36px 0;
}
.page-section--center .section-kicker,
.page-section .section-kicker {
font-size: 18px;
}
.page-section--center h2,
.page-section h2 {
margin-bottom: 18px;
}
.page-section--center .section-subtitle,
.page-section .section-subtitle {
margin-bottom: 34px;
font-size: 1.08rem;
line-height: 1.45;
}
.startseitenbild {
max-width: calc(100% - 48px);
border-radius: 22px;
}
.grid,
.grid--4 {
gap: 18px;
grid-template-columns: 1fr;
}
.card {
padding: 20px;
}
.card-image {
height: 220px;
}
.quote {
padding: 22px 18px;
}
.quote p {
font-size: 1rem;
line-height: 1.65;
}
.seitenbild img {
aspect-ratio: auto;
transform: none;
}
}
@media (max-width: 781px) {
h1 {
font-size: clamp(2rem, 11vw, 2.8rem);
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.12rem;
}
.page-section {
max-width: calc(100% - 32px);
}
.page-section--center {
max-width: calc(100% - 32px);
margin-top: 28px;
}
.page-section--center .section-kicker,
.page-section .section-kicker {
font-size: 16px;
line-height: 1.2;
}
.page-section--center .section-subtitle,
.page-section .section-subtitle {
margin-bottom: 28px;
font-size: 1rem;
}
.button {
width: 100%;
text-align: center;
}
.card-image {
height: 190px;
}
}
@media (max-width: 480px) {
.page-section--center h2,
.page-section h2 {
hyphens: auto;
overflow-wrap: break-word;
}
}