/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #sidebyside {
    padding: 50px 0;
  }
  #sidebyside .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  #sidebyside .content {
    order: 2;
    margin: auto;
    margin-top: 4.6875em;
    max-width: 38.1875em;
  }
  #sidebyside .content h2 {
    font-size: 3em;
    margin-bottom: 0.875em;
  }
  #sidebyside .content p {
    margin-bottom: 1.11111111em;
  }
  #sidebyside .content ul {
    padding-left: 1.25em;
    margin-bottom: 1.25em;
  }
  #sidebyside .content ul li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #sidebyside .content ul li img {
    margin-right: 0.625em;
    margin-top: 0.22222222em;
  }
  #sidebyside .content .button-solid {
    margin-top: 1.78571429em;
  }
  #sidebyside .image-box {
    display: block;
    position: relative;
    margin: auto;
    width: 38.1875em;
    height: 53.8125em;
    font-size: min(1.4vw, 1em);
  }
  #sidebyside .image-box:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: var(--primary);
    opacity: 1;
    top: 2.5em;
    left: -2.5em;
  }
  #sidebyside .image-box:after {
    content: '';
    position: absolute;
    display: block;
    height: 32.25em;
    width: 28.75em;
    background: url("/images/content-circles.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    top: -14.125em;
    right: -6.8125em;
    z-index: -1;
  }
  #sidebyside .image-box img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Inbetween */
@media only screen and (min-width: 666px) {
  #sidebyside {
    padding: 6.25em 0;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1300px) {
  #sidebyside {
    padding: 9.375em 0;
  }
  #sidebyside .container {
    max-width: 86.9375em;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #sidebyside .content {
    margin: 0;
    width: 60%;
  }
  #sidebyside .image-box {
    margin: 0;
    margin-right: 10.625em;
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #sidebyside-reverse {
    padding: 50px 0;
  }
  #sidebyside-reverse .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  #sidebyside-reverse .content {
    order: 2;
    margin: auto;
    margin-top: 4.6875em;
    max-width: 38.1875em;
  }
  #sidebyside-reverse .content h2 {
    font-size: 3em;
    margin-bottom: 0.875em;
  }
  #sidebyside-reverse .content p {
    margin-bottom: 1.11111111em;
  }
  #sidebyside-reverse .content ul {
    padding-left: 1.25em;
    margin-bottom: 1.25em;
  }
  #sidebyside-reverse .content ul li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #sidebyside-reverse .content ul li img {
    margin-right: 0.625em;
    margin-top: 0.22222222em;
  }
  #sidebyside-reverse .content .button-solid {
    margin-top: 1.78571429em;
  }
  #sidebyside-reverse .image-box {
    display: block;
    position: relative;
    margin: auto;
    width: 38.1875em;
    height: 53.8125em;
    font-size: min(1.4vw, 1em);
  }
  #sidebyside-reverse .image-box:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: var(--primary);
    opacity: 1;
    top: 2.5em;
    left: -2.5em;
  }
  #sidebyside-reverse .image-box:after {
    content: '';
    position: absolute;
    display: block;
    height: 32.25em;
    width: 28.75em;
    background: url("/images/content-circles.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    top: -14.125em;
    right: -6.8125em;
    z-index: -1;
  }
  #sidebyside-reverse .image-box img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Inbetween */
@media only screen and (min-width: 666px) {
  #sidebyside-reverse {
    padding: 6.25em 0;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1300px) {
  #sidebyside-reverse {
    padding: 9.375em 0;
  }
  #sidebyside-reverse .container {
    max-width: 86.9375em;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #sidebyside-reverse .content {
    margin: 0;
    width: 60%;
    order: 1;
  }
  #sidebyside-reverse .image-box {
    margin: 0;
    margin-left: 10.625em;
    order: 2;
  }
  #sidebyside-reverse .image-box:before {
    left: auto;
    right: -2.5em;
  }
  #sidebyside-reverse .image-box:after {
    right: auto;
    left: -6.8125em;
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #cta {
    position: relative;
    padding: 3.125em 0;
  }
  #cta:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    font-weight: 900;
    font-size: min(9vw, 3em);
    line-height: 1.20833333;
    color: #fff;
    position: relative;
    margin-bottom: 0.75em;
    text-align: center;
  }
  #cta p {
    color: #fff;
    text-align: center;
    opacity: 1;
    margin: auto;
    margin-bottom: 2em;
    width: 96%;
    max-width: 33.22222222em;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #cta {
    padding: 10.5em 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25em;
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    content: '';
    position: absolute;
    display: block;
    height: 69.25em;
    width: 125em;
    background: url("../images/cta-squares.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -3;
  }
  #cta .container {
    width: 90.0625%;
    margin: auto;
  }
  #cta picture {
    width: 90.0625%;
    left: 50%;
    transform: translateX(-50%);
  }
  #cta picture:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .7;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #cta:after {
    display: none;
  }
}
/* ==== Reviews im "Bewertungsportal"-Stil ===================== */

/* Karte / Container */
#reviews .review{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 12px rgba(0,0,0,.04);
  border-radius:10px;
  padding:16px 18px;
  margin:16px 0;
}

/* Avatar wieder sichtbar und als runder Badge */
#reviews .review .profile{
  display:block !important;
  width:44px; height:44px;
  border-radius:50%;
  background:#0b6cff0d;           /* dezenter Aqua-Ring */
  padding:6px;                     /* etwas Luft um das SVG */
  object-fit:cover;
}

/* Content-Spalte */
#reviews .review picture + p,
#reviews .review .star-group{
  width:100%;
}

/* Kopfzeile (Name/Desc links, Verifiziert rechts) */
#reviews .review .star-group{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:none;                 /* alte Linie entfernen */
  padding-top:0;
  margin-top:0;
  gap:12px;
}

/* Linke Seite in der Kopfzeile: Name + Desc im Block */
#reviews .review .star-group .name{
  display:block;
  font-weight:700;
  color:#0e1726;
  line-height:1.2;
}
#reviews .review .star-group .desc{
  display:block;
  margin-top:2px;
  font-weight:400;
  color:#667085;                   /* dezentes Grau */
  font-size:.92em;
}

/* Rechte Seite: Verifiziert-Badge via ::after */
#reviews .review .star-group::after{
  content:"Verifiziert";
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85em;
  font-weight:600;
  color:#155e3b;
  background:#e7f6ee;
  border:1px solid #c7ead9;
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
}
/* kleines Shield-Icon vor dem Text */
#reviews .review .star-group::after{
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23155e3b'><path d='M12 2l7 3v6c0 5-3.4 9.4-7 11-3.6-1.6-7-6-7-11V5l7-3zm-1 12l6-6-1.4-1.4L11 11.2 8.4 8.6 7 10l4 4z'/></svg>");
}
#reviews .review .star-group::after{
  background-image: var(--icon);
  background-repeat:no-repeat;
  background-size:14px 14px;
  background-position:8px center;
  padding-left:28px;               /* Platz fürs Icon */
}

/* Sterne-Zeile unter die Kopfzeile setzen */
#reviews .review .star-group picture{
  order: 1;                        /* rechts vom Namen bleibt Badge */
  display:none;                    /* wir blenden das alte PNG aus … */
}
/* … und ersetzen es durch echte Sterne als Text (★★★★★) */
#reviews .review .star-group::before{
  content:"★★★★★";
  color:#f59e0b;                   /* Goldgelb */
  letter-spacing:1px;
  font-size:1rem;
  font-weight:700;
  margin-top:6px;
  display:block;
}

/* Text der Bewertung */
#reviews .review p{
  margin-top:10px;
  margin-bottom:0;
  font-size:1.02rem;
  line-height:1.6;
  color:#0e1726;
}
/* ==== Reviews im "Bewertungsportal"-Stil ===================== */

/* Karte / Container */
#reviews .review{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 12px rgba(0,0,0,.04);
  border-radius:10px;
  padding:16px 18px;
  margin:16px 0;
}

/* Avatar wieder sichtbar und als runder Badge */
#reviews .review .profile{
  display:block !important;
  width:44px; height:44px;
  border-radius:50%;
  background:#0b6cff0d;           /* dezenter Aqua-Ring */
  padding:6px;                     /* etwas Luft um das SVG */
  object-fit:cover;
}

/* Content-Spalte */
#reviews .review picture + p,
#reviews .review .star-group{
  width:100%;
}

/* Kopfzeile (Name/Desc links, Verifiziert rechts) */
#reviews .review .star-group{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:none;                 /* alte Linie entfernen */
  padding-top:0;
  margin-top:0;
  gap:12px;
}

/* Linke Seite in der Kopfzeile: Name + Desc im Block */
#reviews .review .star-group .name{
  display:block;
  font-weight:700;
  color:#0e1726;
  line-height:1.2;
}
#reviews .review .star-group .desc{
  display:block;
  margin-top:2px;
  font-weight:400;
  color:#667085;                   /* dezentes Grau */
  font-size:.92em;
}

/* Rechte Seite: Verifiziert-Badge via ::after */
#reviews .review .star-group::after{
  content:"Verifiziert";
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85em;
  font-weight:600;
  color:#155e3b;
  background:#e7f6ee;
  border:1px solid #c7ead9;
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
}
/* kleines Shield-Icon vor dem Text */
#reviews .review .star-group::after{
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23155e3b'><path d='M12 2l7 3v6c0 5-3.4 9.4-7 11-3.6-1.6-7-6-7-11V5l7-3zm-1 12l6-6-1.4-1.4L11 11.2 8.4 8.6 7 10l4 4z'/></svg>");
}
#reviews .review .star-group::after{
  background-image: var(--icon);
  background-repeat:no-repeat;
  background-size:14px 14px;
  background-position:8px center;
  padding-left:28px;               /* Platz fürs Icon */
}

/* Sterne-Zeile unter die Kopfzeile setzen */
#reviews .review .star-group picture{
  order: 1;                        /* rechts vom Namen bleibt Badge */
  display:none;                    /* wir blenden das alte PNG aus … */
}
/* … und ersetzen es durch echte Sterne als Text (★★★★★) */
#reviews .review .star-group::before{
  content:"★★★★★";
  color:#f59e0b;                   /* Goldgelb */
  letter-spacing:1px;
  font-size:1rem;
  font-weight:700;
  margin-top:6px;
  display:block;
}

/* Text der Bewertung */
#reviews .review p{
  margin-top:10px;
  margin-bottom:0;
  font-size:1.02rem;
  line-height:1.6;
  color:#0e1726;
}

/* Responsive: auf kleineren Screens alles mittig untereinander */
@media (max-width: 640px){
  #reviews .review{
    flex-direction:column;
    text-align:center;
    padding:18px 16px 20px;
  }
  #reviews .review .star-group{
    flex-direction:column;
    gap:6px;
  }
  #reviews .review .profile{
    margin:0 auto 6px;
  }
  #reviews .review p{
    margin-top:12px;
  }
}