.rsce-compare-box {
width: 100%;
box-sizing: border-box;
background-color: #115ca0;
padding-top: 0 !important;
padding-bottom: 24px;
}
.rsce-compare-box .compare-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (min-width: 768px) {
.rsce-compare-box {
background-color: transparent;
padding-top: 5rem !important;
margin-bottom: 50px;
}
.rsce-compare-box .compare-content {
padding-left: 0;
padding-right: 0;
}
}
.rsce-compare-box .compare-image {
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.rsce-compare-box .compare-image {
box-shadow: 0px 4px 34px 10px rgba(23, 59, 91, 0.21);
border-radius: 16px;
}
}
@media (max-width: 767px) {
.rsce-compare-box .compare-image:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40%; /* wie weit der Fade gehen soll */
background: linear-gradient(
to bottom,
white 0%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
}
}
.rsce-compare-box .compare-headlines .headline {
font-style: normal;
color: #ffffff;
margin-top: 0;
font-weight: 600;
font-size: 20px;
line-height: 26px;
}
@media (min-width: 768px) {
.rsce-compare-box .compare-headlines .headline {
color: #3b3b3b;
font-weight: 600;
font-size: 32px;
line-height: 42px;
}
}
@media (min-width: 1201px) {
.rsce-compare-box .compare-top {
flex-direction: row;
align-items: center;
}
.rsce-compare-box .compare-headlines {
flex: 1;
}
.rsce-compare-box .compare-tarife {
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.rsce-compare-box .tarif-box {
flex: 1 1 45%;
min-width: auto;
}
}
.rsce-compare-box {
display: flex;
gap: 2rem;
flex-wrap: wrap;
align-items: stretch;
}
@media (min-width: 1201px) {
.rsce-compare-box {
flex-wrap: nowrap;
}
}
.compare-image {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
.compare-image img {
top: 0;
left: 0;
width: 100%;
max-height: 190px;
object-fit: cover;
}
@media (min-width: 1201px) {
.compare-image img {
position: absolute;
height: 100%;
max-height: none;
max-height: 300px;
}
}
media .compare-content {
flex: 0 0 100%;
}
/* Desktop: 1/3 – 2/3 Aufteilung */
@media (min-width: 1201px) {
.compare-image {
flex: 0 0 33.3333%;
}
.compare-content {
flex: 0 0 calc(100% - 2rem);
}
}
/* Container */
.rsce-compare-box .compare-table {
display: flex;
flex-direction: column;
width: 100%;
}
/* Zeilen */
.rsce-compare-box .compare-row {
display: flex;
}
/* Zellen */
.rsce-compare-box .compare-cell {
flex: 1;
text-align: center;
padding: 10px 14px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 18px;
background: #fff;
color: #3b3b3b;
position: relative;
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 768px) {
}
.rsce-compare-box .compare-cell .price {
color: #0275de;
}
.rsce-compare-box .compare-row.header .compare-cell h2 + p {
font-size: 1.25em;
line-height: 1.4;
}
.rsce-compare-box .compare-cell:first-of-type {
text-align: left;
display: flex;
justify-content: flex-start;
padding: 10px 0 !important;
min-width: 150px;
background: transparent;
}
@media (max-width: 768px) {
.rsce-compare-box .compare-cell.header-cell div {
padding: 4px 12px;
background: #0275de;
border-radius: 12px;
font-style: normal;
color: #ffffff;
width: 100%;
}
}
@media (min-width: 768px) {
.rsce-compare-box * {
/*border: 1px solid #59c7fb; */
}
.rsce-compare-box .compare-cell:not(:first-of-type) {
background: #ffffff !important;
z-index: 1;
border: none;
transition: transform 0.2s ease;
padding: 20px;
position: relative;
}
.rsce-compare-box .compare-row:not(:last-of-type) .compare-cell {
border-bottom: 2px solid #f6f6f6 !important;
}
.rsce-compare-box .compare-cell.premium:not(:first-of-type) {
border-right: 1px solid #fadd4a;
border-left: 1px solid #fadd4a;
}
.rsce-compare-box
.compare-row:not(:last-of-type)
.compare-cell:first-of-type {
border-bottom: 2px solid #ffffff !important;
}
.rsce-compare-box .compare-row .gap {
width: 50px;
border-bottom: 2px solid #ffffff;
}
.rsce-compare-box .compare-row:nth-of-type(1) .gap,
.rsce-compare-box .compare-row:nth-of-type(2) .gap,
.rsce-compare-box .compare-row:nth-of-type(9) .gap,
.rsce-compare-box .compare-row:nth-of-type(11) .gap {
border-bottom: none !important;
}
.rsce-compare-box .compare-row:nth-of-type(2) .compare-cell,
.rsce-compare-box .compare-row:nth-of-type(9) .compare-cell,
.rsce-compare-box .compare-row:nth-of-type(1) .compare-cell:first-of-type,
.rsce-compare-box .compare-row:nth-of-type(2) .compare-cell:first-of-type,
.rsce-compare-box .compare-row:nth-of-type(9) .compare-cell:first-of-type {
border-bottom: none !important;
}
.rsce-compare-box .compare-cell.header-cell:not(:first-of-type) div {
padding: 12px;
background: #2b88dc;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
font-style: normal;
color: #ffffff;
width: 100%;
top: 0;
position: absolute;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.02em;
}
.rsce-compare-box .compare-cell.header-cell.premium:not(:first-of-type) div {
background: #fadd4a;
color: #4a3e0d;
}
.rsce-compare-box .compare-cell.header-cell {
border-left: none;
border-right: none;
z-index: 1;
}
.rsce-compare-box .compare-cell.header-cell:first-of-type > div:first-child {
position: absolute;
top: 0;
}
/* Untere Zellen */
.rsce-compare-box .compare-row:last-child .compare-cell:not(:first-of-type) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.rsce-compare-box
.compare-row:last-child
.compare-cell.premium:not(:first-of-type) {
border: 1px solid #fadd4a;
border-top: none;
}
.rsce-compare-box
.compare-row:last-child
.compare-cell.premium:not(:first-of-type)
a.btn {
background-color: #fadd4a;
color: #4a3e0d !important;
border-color: #fadd4a;
}
}
.rsce-compare-box .compare-tarife .compare-cell.green::before {
content: "";
background-image: url('data:image/svg+xml,');
}
.rsce-compare-box .compare-tarife .compare-cell.blue::before {
background-image: url('data:image/svg+xml,');
}
.rsce-compare-box .compare-tarife .compare-cell.gold::before {
background-image: url('data:image/svg+xml,');
}
@media (max-width: 767px) {
.rsce-compare-box .compare-tarife .compare-cell.green::before,
.rsce-compare-box .compare-tarife .compare-cell.blue::before,
.rsce-compare-box .compare-tarife .compare-cell.gold::before {
width: 22px;
height: 29px;
content: "";
margin-right: 5px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-size: contain;
}
}
@media (max-width: 400px) {
.rsce-compare-box .compare-tarife .compare-cell.green::before,
.rsce-compare-box .compare-tarife .compare-cell.blue::before,
.rsce-compare-box .compare-tarife .compare-cell.gold::before {
display: none;
}
}
.rsce-compare-box .compare-tarife a.btn {
width: 100%;
}
.rsce-compare-box .compare-tarife a.btn:hover {
background: #0f65b5; /* dunklerer Blauton */
transition: background 0.3s ease;
}
.rsce-compare-box .premium-badge {
position: absolute;
width: calc(100% + 20px);
background: #fadb3f;
margin-left: -20px;
margin-right: -20px;
border-radius: 8px;
padding: 6px 24px;
z-index: 10;
color: #4a3e0d;
}
@media (min-width: 768px) {
.rsce-compare-box .compare-cell {
padding: 10px 24px;
}
.rsce-compare-box .compare-cell.premium:has(.premium-badge) {
padding-top: 25px;
padding-bottom: 30px;
}
.rsce-compare-box .compare-tarife {
display: block;
}
.rsce-compare-box .compare-tarife a.btn {
background: #1377d2;
color: #ffffff;
}
.rsce-compare-box .compare-tarife a.btn svg path {
stroke: #ffffff;
}
.rsce-compare-box .compare-tarife a.btn:hover {
background: #0f65b5; /* dunklerer Blauton */
transition: background 0.3s ease;
}
}
@media (max-width: 767px) {
.rsce-compare-box .gap {
display: none;
}
.rsce-compare-box .compare-image:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40%;
background: linear-gradient(to top, #115ca0, rgba(5, 117, 222, 0));
pointer-events: none;
}
.container-xxl:has(.rsce-compare-box) {
padding-left: 0 !important;
padding-right: 0 !important;
}
.rsce-compare-box .compare-row {
margin-bottom: 10px;
}
.rsce-compare-box .compare-row.header .compare-cell:nth-child(n + 2) {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.rsce-compare-box .compare-row {
display: flex;
gap: 12px;
}
.rsce-compare-box .compare-row.header .header-cell {
padding: 0;
background: inherit !important;
}
/* Unsere Carcare Tarif */
.rsce-compare-box .compare-row.header .header-cell:first-child {
font-weight: 600;
font-size: 20px;
line-height: 26px;
}
.rsce-compare-box .compare-cell {
background: linear-gradient(
92.03deg,
rgba(56, 136, 209, 0.44) 62.87%,
rgba(48, 112, 172, 0.44) 111.42%,
rgba(56, 136, 209, 0) 111.42%
);
border-radius: 4px;
width: 100%;
padding: 16px 15px !important;
}
.rsce-compare-box .compare-cell:has(span) {
padding: 5px 15px !important;
}
.rsce-compare-box .compare-cell:has(+ .premium-headline) {
margin-bottom: 25px;
}
.rsce-compare-box .compare-cell.premium-headline:before {
content: "KUNDENLIEBLING";
position: absolute;
top: -30px;
left: 0;
font-weight: 700;
color: #fadb3f;
font-size: 11px;
letter-spacing: 3%;
}
.rsce-compare-box .compare-row.header .compare-cell:first-child,
.rsce-compare-box .compare-row:not(.header) .compare-cell:first-child {
grid-column: 1 / span 3;
justify-content: flex-start;
background: inherit !important;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.rsce-compare-box .compare-cell:first-of-type {
padding-left: 0 !important;
}
.rsce-compare-box .compare-row:not(.header) {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.rsce-compare-box .compare-row:not(.header) .compare-cell:nth-child(n + 2) {
display: block;
justify-content: center;
align-items: center;
max-height: 50px;
}
.rsce-compare-box .compare-row .compare-cell,
.rsce-compare-box .compare-cell span {
color: #ffffff !important;
}
.rsce-compare-box .compare-cell span {
font-weight: 400;
font-size: 12px;
line-height: 16px;
margin-bottom: 5px;
display: block;
color: #ffffff;
}
.rsce-compare-box .compare-cell span.price {
font-weight: 600;
font-size: 16px;
line-height: 21px;
}
.rsce-compare-box .compare-cell span.yellow {
color: #ffdd79 !important;
}
.rsce-compare-box .compare-cell span.yellow:after {
display: none;
}
.rsce-compare-box .compare-tarife a.btn {
margin-left: 0;
width: 100%;
}
.rsce-compare-box .compare-tarife a.btn svg {
display: none;
}
.rsce-compare-box .compare-row .compare-cell:nth-child(2) {
border-left: 8px solid #d1b563 !important;
}
.rsce-compare-box .compare-row .compare-cell:nth-child(3) {
border-left: 8px solid #4386e2 !important;
}
.rsce-compare-box .compare-row .compare-cell:nth-child(4) {
border-left: 8px solid #35a5c1 !important;
}
.rsce-compare-box .compare-row:has(.gap) .compare-cell:nth-child(4) {
border-left: 8px solid #4386e2;
}
.rsce-compare-box .compare-row:has(.gap) .compare-cell:nth-child(6) {
border-left: 8px solid #35a5c1 !important;
}
}
.rsce-compare-box .headline {
font-weight: 600;
font-size: 20px;
line-height: 26px;
color: #ffffff;
}
@media (min-width: 768px) {
.rsce-compare-box .headline {
font-size: 24px;
line-height: 31px;
color: #3b3b3b;
margin: 0;
}
}
@media (max-width: 767px) {
.rsce-compare-box .headline {
margin-bottom: 6px;
}
}
.rsce-compare-box .topHeadline {
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.06em;
color: #cfe8ff;
margin: 0;
}
@media (min-width: 768px) {
.rsce-compare-box .topHeadline {
font-weight: 700;
font-size: 16px;
line-height: 21px;
color: #0275de;
letter-spacing: 0.06em;
}
}
.icons-container-text {
margin-top: 15px;
color: #ffffff;
}
.icons-container {
color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.icons-container .icon-box {
width: calc(50% - 8px);
display: flex;
align-items: center;
gap: 8px;
}
.icons-container .icon-box .icon {
background: linear-gradient(
92.03deg,
rgba(56, 136, 209, 0.44) 62.87%,
rgba(48, 112, 172, 0.44) 111.42%,
rgba(56, 136, 209, 0) 111.42%
);
border-radius: 4px;
width: 34px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
}
.icons-container .text {
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #ffffff;
}
/* neue desktop variante */
.compare-columns {
display: flex;
}
.compare-column {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
flex: 1;
}
.compare-column.labels {
flex: 0 0 260px; /* Breite der linken Spalte */
box-shadow: none; /* Labels brauchen keinen Schatten */
}
.compare-column.labels .tarif-content > div {
font-weight: 400;
}
.tarif-content > div {
margin-bottom: 12px;
height: 90px;
}
.compare-columns {
display: flex;
align-items: stretch;
max-width: 1410px;
width: 100%;
}
/* Jede Spalte */
.compare-column {
background: #fff;
padding: 0;
border-radius: 12px;
box-shadow: 0px 4px 24px 2px #151a2912;
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
position: relative;
padding-top: 120px;
}
/* Label-Spalte ohne Shadow */
.compare-column.labels {
box-shadow: none;
flex: 0 0 20%;
background: none;
}
@media (min-width: 1200px) {
.compare-column.labels {
flex: 0 0 370px;
}
}
.compare-column.labels .tarif-header {
padding-top: 0;
padding-left: 0;
position: absolute;
top: 0;
padding-right: 10px;
}
.compare-column.gap {
flex: 0 0 3%;
box-shadow: none;
border-color: #ffffff;
background: transparent;
}
@media (min-width: 1200px) {
.compare-column.gap {
flex: 0 0 64px;
}
}
.compare-column .badge-content {
margin-left: 12px;
margin-right: 12px;
}
/* Header */
.tarif-header {
font-size: 18px;
font-weight: 700;
position: absolute;
}
.tarif-header .topHeadline {
text-align: left;
}
.tarif-header .headline {
text-align: left;
font-weight: 600;
font-size: 24px;
line-height: 31px;
color: #3b3b3b;
margin-bottom: 0;
}
/* Content = Zeilencontainer */
.tarif-content {
display: flex;
flex-direction: column;
}
/* Jede einzelne Zeile */
.tarif-content > div,
.tarif-content > a {
border-bottom: 2px solid #e5e5e5;
min-height: 52px;
display: flex;
align-items: center;
text-align: left;
font-weight: 600;
font-size: 18px;
line-height: 24px;
color: #3b3b3b;
margin: 0;
}
.price {
color: #0275de;
}
.tarif-content > div:last-child,
.tarif-content > a:last-child,
.tarif-content > div:nth-last-child(2),
.tarif-content > a:nth-last-child(2) .tarif-content > div:nth-last-child(3),
.tarif-content > a:nth-last-child(3) {
border-bottom: none;
}
.compare-column:not(.labels) .tarif-content > div {
justify-content: center;
}
@media (min-width: 768px) {
.compare-column:not(.labels) .tarif-content > div {
font-weight: 600;
font-size: 18px;
line-height: 24px;
color: #646567;
}
}
.compare-column:not(.labels) .tarif-content > div:last-of-type {
align-items: baseline;
height: auto;
padding-bottom: 24px;
}
.compare-column.labels .tarif-content > div,
.compare-column.gap .tarif-content > div {
border-color: #ffffff;
}
.compare-column.labels .tarif-content > div {
padding-left: 0;
padding-right: 8px;
}
@media (min-width: 768px) {
.compare-column.labels .tarif-content > div {
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #3b3b3b;
}
}
.compare-column.premium {
border: 4px solid #fadd4a;
margin-top: -4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.compare-column.basis .tarif-header,
.compare-column.premium .tarif-header,
.compare-column.kompakt .tarif-header {
padding: 12px 6px;
background: #2b88dc;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
font-style: normal;
color: #ffffff;
width: 100%;
top: 0;
position: absolute;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.02em;
}
.compare-column.premium .tarif-header {
background: #fadd4a;
color: #4a3e0d;
font-weight: 700;
top: -4px;
}
.compare-column.premium .btn-primary {
background-color: #fadd4a;
color: #584a0f !important;
border-color: #fadd4a;
}
.compare-column a.btn-primary {
width: 100%;
margin: 0 24px;
border-radius: 8px !important;
padding: 6px 8px;
}
.compare-column .premium-badge {
position: absolute;
background: #fadb3f;
box-shadow: 0px 4px 4px 0px #dbdbdb40;
border-radius: 8px;
padding: 6px 24px;
z-index: 10;
color: #4a3e0d;
font-weight: 600;
font-size: 20px;
line-height: 26px;
top: 68px;
left: 5px;
width: calc(100% + 30px);
}
.rsce-compare-box a.btn-light {
font-weight: 600;
font-size: 18px;
line-height: 24px;
color: #115ca1;
font-weight: 600;
padding: 10px;
}
.rsce-compare-box a.btn-light span {
margin-bottom: 6px;
}