section.block-20-paketvergleich {
position: relative;
overflow: hidden;
padding: 13rem 0 14rem;
margin: 4rem 0;
background-color: #024667;
background-image:
radial-gradient(circle at 20% 15%, rgba(2, 106, 149, 0.85) 0%, transparent 45%),
radial-gradient(circle at 85% 90%, rgba(43, 123, 176, 0.55) 0%, transparent 40%);
}
section.block-20-paketvergleich::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.12;
background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1.4px);
background-size: 34px 34px;
}
section.block-20-paketvergleich .welle {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 70px;
display: block;
}
section.block-20-paketvergleich .welleOben { top: 0; }
section.block-20-paketvergleich .welleUnten { bottom: 0; }
section.block-20-paketvergleich .container { position: relative; } section.block-20-paketvergleich .kopfBereich {
max-width: 68rem;
margin: 0 auto 5.5rem;
text-align: center;
}
section.block-20-paketvergleich .kicker {
margin-bottom: 1.2rem;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #bd0e2a;
}
section.block-20-paketvergleich .kopfBereich h2 { color: #fff; }
section.block-20-paketvergleich .einleitung {
margin-top: 1.5rem;
font-size: 1.8rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
} section.block-20-paketvergleich .paketKarte {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 3.2rem;
border-radius: 2.4rem;
background: rgba(255, 255, 255, 0.96);
transition: transform 0.3s ease;
}
section.block-20-paketvergleich .paketKarte:hover { transform: translateY(-4px); }
section.block-20-paketvergleich .paketKarte.istHervorgehoben {
background: #fff;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}
@media (min-width: 992px) {
section.block-20-paketvergleich .paketKarte.istHervorgehoben {
transform: translateY(-1.6rem) scale(1.03);
}
section.block-20-paketvergleich .paketKarte.istHervorgehoben:hover {
transform: translateY(-2rem) scale(1.03);
}
}
section.block-20-paketvergleich .paketBadge {
position: absolute;
top: -1.2rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1.6rem;
border-radius: 99px;
background: #bd0e2a;
color: #fff;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
section.block-20-paketvergleich .paketIcon {
display: flex;
align-items: center;
justify-content: center;
width: 5.6rem;
height: 5.6rem;
border-radius: 50%;
background: #024667;
color: #fff;
box-shadow: 0 0 0 4px rgba(2, 70, 103, 0.12);
}
section.block-20-paketvergleich .istHervorgehoben .paketIcon {
background: #bd0e2a;
box-shadow: 0 0 0 4px rgba(189, 14, 42, 0.15);
}
section.block-20-paketvergleich .paketIcon svg { width: 2.4rem; height: 2.4rem; }
section.block-20-paketvergleich .paketName {
margin: 2rem 0 0;
color: #024667;
}
section.block-20-paketvergleich .paketPreis {
margin: 1.2rem 0 0;
font-size: 4.4rem;
font-weight: 800;
line-height: 1;
color: #2b2f33;
}
section.block-20-paketvergleich .paketEinheit {
font-size: 1.6rem;
font-weight: 500;
color: rgba(43, 47, 51, 0.6);
}
section.block-20-paketvergleich .paketEinmalig {
margin: 0.8rem 0 0;
font-size: 1.4rem;
font-weight: 600;
color: #bd0e2a;
}
section.block-20-paketvergleich .paketTrenner {
height: 1px;
margin: 2.4rem 0;
background: rgba(2, 70, 103, 0.1);
}
section.block-20-paketvergleich .paketLeistung {
margin: 0;
font-size: 1.5rem;
line-height: 1.6;
color: rgba(43, 47, 51, 0.8);
}
section.block-20-paketvergleich .paketFuerWen {
display: flex;
align-items: flex-start;
gap: 0.8rem;
margin-top: 2rem;
margin-bottom: 3rem;
padding: 1.6rem;
border-radius: 1.6rem;
background: #eef3f7;
}
section.block-20-paketvergleich .paketFuerWen svg {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
margin-top: 0.3rem;
color: #bd0e2a;
}
section.block-20-paketvergleich .paketFuerWen p {
margin: 0;
font-size: 1.4rem;
line-height: 1.55;
color: rgba(43, 47, 51, 0.75);
}
section.block-20-paketvergleich .paketKarte .ctaBtn { margin-top: auto; }
section.block-20-paketvergleich .paketFussnote {
margin: 4rem auto 0;
max-width: 68rem;
text-align: center;
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 991px) {
section.block-20-paketvergleich { padding: 11rem 0 12rem; }
section.block-20-paketvergleich .paketKarte.istHervorgehoben { transform: none; }
}