body {
grid-template-rows: auto;
grid-template-columns: 100%;
}
main {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas:
"titel-dienstleistung"
"text-dienstleistung"
"titel-besonders"
"text-besonders"
"titel-vergütung"
"text-vergütung";
font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1250 - 320)));
font-weight: 100;
z-index: 0;
background-image: url("bilder/b-m-dv-aus.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin-top: 10vh;
padding-top: 10vh;
}

section {
display: flex;
justify-content: center;
align-items: center;
gap: calc(20px + (100 - 20) * ((100vw - 320px) / (2250 - 320)));
flex-wrap: wrap;
margin-top: 5vh;
margin-bottom: 7.5vh;
}

.card-1, .card-2, .card-3{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 3vw;
color: var(--textfarbe-1);
border: 4px solid var(--hintergrund-8);
border-radius: 20px;
}
.card-2, .card-3 {
text-align: center;
width: calc(200px + (375 - 200) * ((100vw - 320px) / (1200 - 320)));
height: calc(135px + (225 - 135) * ((100vw - 320px) / (1200 - 320)));
font-size: 50%;
}
.card-1 {
display: table;
width: calc(175px + (300 - 175) * ((100vw - 320px) / (1200 - 320)));
height: calc(150px + (300 - 150) * ((100vw - 320px) / (1200 - 320)));
background-color: var(--hintergrund-8);
}
.card-2 {
background-color: rgb(201, 211, 143);
}
.card-3 {
height: calc(160px + (265 - 135) * ((100vw - 320px) / (1200 - 320)));
background-color: rgb(190, 216, 198);
}
.angebot-titel {
text-align: left;
margin: 5vh 0 0 10vw;
padding: 1.5%;
padding-left: 15%;
color: var(--textfarbe-1);
font-size: calc(10px + (50 - 10) * ((100vw - 320px) / (1800 - 320)));
font-weight: 500;
border: 3px, solid, var(--hintergrund-1);
z-index: 0;
}
.angebot-text {
text-align: justify;
margin: -15vh 7.5vw 2vh 7.5vw;
padding: 5%;
padding-top: 20vh;
background-color: rgba(17, 8, 8, 0.85);
color: var(--textfarbe-2) ;
font-size: 100%;
line-height: 175%;
}
.zeilenhöhe {
margin-top: 1em;
}
.schlagwort {
margin-bottom: 20px; 
font-weight: 700; 
text-transform: uppercase;  
}
.usp {
text-transform: uppercase;
font-size: 200%;
font-weight: 700;
}
.usp-text-klein {
text-transform: none;
font-size: 80%;
font-weight: 500;
line-height: .5;
}
.liste-angebot {
padding-left: 40px;   
text-align: left;
}
.ziffer-angebot {
font-size: 150%;
font-weight: 550;
padding-left: 0%;
margin-left: -2%;
}

a.link-text {
text-decoration: none;
color: var(--textfarbe-);
font-weight: 900;
letter-spacing: normal;
}
a.link-text:hover {
color: var(--textfarbe-2);
font-weight: 900;
}

#bild-header {
grid-area: bild-header; 
background-color: var(--hintergrund-1);

}
#titel-dienstleistung, #titel-besonders, #titel-vergütung {
margin: 10vh 15% 2vh -12.5%;
}
#titel-dienstleistung {
grid-area: titel-dienstleistung;
margin-top: 10vh;
background-color: rgb(122, 14, 14);
background-color: var(--hintergrund-8);
text-transform: uppercase;
}
#titel-besonders {
grid-area: titel-besonders;
background-color: rgb(201, 211, 143);
color: var(--textfarbe-1);
}
#titel-vergütung {
grid-area: titel-vergütung;
background-color: rgb(190, 216, 198);
}
#text-dienstleistung {
grid-area: text-dienstleistung;
color: var(--hintergrund-8);
}
#text-besonders {
grid-area: text-besonders;
color: rgb(201, 211, 143);
}
#text-vergütung {
grid-area: text-vergütung;
color: rgb(190, 216, 198);
}