@charset "UTF-8";
/* seiten.css - Bausteine der einzelnen Seiten
   Reines CSS ohne Build-Schritt. Eingebunden in id_head.php; nach
   Aenderungen dort $cssVersion hochzaehlen. Farben und Schrift als
   Variablen (--rot, --gold ...) stehen oben in basis.css. */

/* ==================================================================
   Seitenbausteine (Start, Leistungen, Aktionen …)
   ================================================================== */
/* Scroll-Hinweis auf der Startbuehne
   ------------------------------------------------------------------
   Stilisierte Maus mit wanderndem Scrollrad, darunter der Hinweistext
   und ein nachziehender Pfeil. Ersetzt den frueheren Button
   "WAS ICH BEKOMME" und fuehrt weiterhin auf #firstblock. */
.scrollmaus {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 26px 10px 10px;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease;
}
.scrollmaus:hover {
  transform: translateY(4px);
}
.scrollmaus__body {
  position: relative;
  width: 48px;
  height: 80px;
  border: 3px solid #fff;
  border-radius: 26px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  animation: scrollmausHeben 2.8s ease-in-out infinite;
}
/* das Scrollrad wandert von oben nach unten und blendet dabei aus */
.scrollmaus__rad {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 6px;
  height: 13px;
  margin-left: -3px;
  border-radius: 3px;
  background-color: #ce1a3b;
  box-shadow: 0 0 10px rgba(161, 20, 46, 0.9);
  animation: scrollmausRad 2.8s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
/* Pfeilspitze aus zwei Kanten, wie bei den uebrigen Buttons */
.scrollmaus__pfeil {
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  opacity: .8;
  animation: scrollmausPfeil 2.8s ease-in-out infinite;
}
@keyframes scrollmausRad {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  55% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(30px);
    opacity: 0;
  }
}
@keyframes scrollmausHeben {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
@keyframes scrollmausPfeil {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: .45;
  }
  50% {
    transform: rotate(45deg) translate(3px, 3px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scrollmaus,
  .scrollmaus__body,
  .scrollmaus__rad,
  .scrollmaus__pfeil {
    animation: none;
    transition: none;
  }
  .scrollmaus__rad {
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .scrollmaus__body {
    width: 40px;
    height: 66px;
  }
}
.buehne-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 90px 0 30px 0;
  width: 100%;
}
.buehne-start h1,
.buehne-start .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.2em;
  color: var(--rot);
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-start h2 {
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  font-size: 80px;
  color: var(--rot);
  letter-spacing: 4px;
  line-height: 1.1em;
}
.buehne-start span {
  color: #ffffff;
  font-weight: normal;
  font-size: 40px;
}
.buehne-personal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  width: 100%;
}
.buehne-personal h1,
.buehne-personal .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: .8em;
  color: #000000;
  letter-spacing: 4px;
  line-height: 1.3em;
}
.buehne-personal h2 {
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--rot);
  letter-spacing: 4px;
  line-height: 1.1em;
  font-size: 2.8em;
}
.buehne-personal h3 {
  text-transform: uppercase;
  font-size: 1.4em;
  margin-bottom: 20px;
  display: inline-block;
}
.wrap-txt-onimage {
  position: relative;
  margin-top: -150px;
}
.wrap-txt-onimage img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 8px solid #fff;
}
.txt-onimage {
  position: absolute;
  padding: 20px;
  font-size: 1.2em;
  background-color: #fff;
  bottom: -30px;
  right: 30px;
  width: 64%;
}
.fourbox img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.fourbox strong {
  margin-top: 10px;
  font-weight: 600;
  font-size: 1.0em;
  line-height: 1.1em;
  margin-bottom: 10px;
}
.imagebeetweentxt {
  margin-top: -120px;
}
.imagebeetweentxt img {
  width: 100%;
  border: 14px solid #fff;
}
.bottom-divider {
  display: block;
  position: absolute;
  pointer-events: none;
  width: 100%;
  left: 0;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNDFweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik02NDAgMTM5TDAgMHYxNDBoMTI4MFYwTDY0MCAxMzl6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 100% 180px;
  bottom: 0;
  height: 180px;
  z-index: 1;
  transform: scale(1, 1);
}
.bottom-divider.divider-isred {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNDFweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNhMTE0MmUiPjxwYXRoIGQ9Ik02NDAgMTM5TDAgMHYxNDBoMTI4MFYwTDY0MCAxMzl6Ii8+PC9nPjwvc3ZnPg==);
}
.top-divider {
  display: block;
  position: absolute;
  pointer-events: none;
  width: 100%;
  left: 0;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNTNweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik02NDAgMTQwTDEyODAgMEgweiIvPjwvZz48L3N2Zz4=);
  background-size: 100% 120px;
  top: 0;
  height: 120px;
  z-index: 1;
  transform: scale(-1, 1);
}
.topred-divider {
  display: block;
  position: absolute;
  pointer-events: none;
  width: 100%;
  left: 0;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNBMTE0MkUiPjxwYXRoIGQ9Ik02NDAgMTQwTDEyODAgMEgweiIvPjwvZz48L3N2Zz4=);
  background-size: 100% 500px;
  top: 0;
  height: 500px;
  z-index: 1;
  transform: scale(1, 1);
}
.special-divider {
  display: block;
  position: absolute;
  pointer-events: none;
  width: 100%;
  left: 0;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNBMTE0MkUiPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAwIDAgMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgMzAgMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgNjAgMCA2MHoiLz48L2c+PC9zdmc+);
  background-size: 100% 100px;
  bottom: 0;
  height: 100px;
  z-index: 1;
  transform: scale(1, 1);
}
.mitgliedbox {
  border: 1px solid #ccc;
  background-color: #ffffff;
  padding: 25px;
  display: inline-flex;
  flex-direction: column;
}
.mitgliedbox h2 {
  margin-top: 35px;
  color: var(--rot);
  text-transform: uppercase;
}
.bestseller {
  background-color: var(--gold);
  padding: 8px 10px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 10%;
  color: #fff;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  border-radius: 0 0 10px 10px;
  width: 80%;
  text-align: center;
}
.wrap-number {
  padding: 20px 10px 60px 10px;
  transition: all .5s ease;
}
.wrap-number h3 {
  margin: 20px 0;
  font-weight: 700;
}
.wrap-number:hover {
  transform: scale(1.05) !important;
}
.mabig:hover {
  transform: scale(1.05) !important;
  transition: all .5s ease;
}
.datenschutzwrapper {
  font-size: .8em;
  word-break: break-word;
}
.datenschutzwrapper p {
  margin-bottom: 20px;
  line-height: 1.5em;
}
.datenschutzwrapper h3 {
  color: var(--rot);
  line-height: 1.4em;
}
.number-circle {
  font-weight: 700;
  font-size: 30px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #C3C3C3;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 10px #dddddd;
  transition: background-color 300ms ease 0ms, background-image 300ms ease 0ms;
  margin: 0 auto;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
  .secondstartbox {
    margin-top: 80px;
  }
  .mitgliedbox {
    padding: 20px 10px;
  }
  .buehne-start {
    padding: 50px 0 30px 0;
  }
  .buehne-start h1,
  .buehne-start .is-h1 {
    font-size: 0.9em;
    color: var(--rot);
    letter-spacing: 2px;
    line-height: 1.3em;
  }
  .buehne-start h2 {
    font-size: 60px;
    color: var(--rot);
    letter-spacing: 4px;
    line-height: 1.1em;
  }
  .buehne-start span {
    font-size: 25px;
  }
  .buehne-personal {
    padding: 30px 0;
    width: 100%;
  }
  .buehne-personal h1,
  .buehne-personal .is-h1 {
    font-size: .6em;
    color: #000000;
    letter-spacing: 2px;
    line-height: 1.3em;
  }
  .buehne-personal h2 {
    color: var(--rot);
    letter-spacing: 4px;
    line-height: 1.1em;
    font-size: 2.1em;
  }
  .buehne-personal h3 {
    text-transform: uppercase;
    font-size: .9em;
    margin-bottom: 20px;
    display: inline-block;
  }
  .wrap-txt-onimage.leftwrapbox {
    margin-top: -150px;
  }
  .wrap-txt-onimage.rightwrapbox {
    margin-top: 0;
  }
  .txt-onimage {
    padding: 10px 15px;
    font-size: 1.0em;
    bottom: -50px;
    right: 5%;
    width: 90%;
  }
  .fourbox strong {
    font-size: .7em;
  }
  .imagebeetweentxt {
    margin-top: 0;
  }
}
/* Aufzaehlung in der Datenschutzerklaerung */
.datenschutzliste {
  margin: 10px 0 15px 20px;
  padding: 0;
  line-height: 1.6em;
}
.datenschutzliste li {
  margin-bottom: 8px;
}


/* Startseite: Abschnitt mit abgedunkeltem Studiofoto */
.bg-studio-dunkel {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%), url("../images/710.jpg");
  background-size: cover;
}

/* ==================================================================
   Seite Bewerbung
   ================================================================== */
.buehne-aktion {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0;
  width: 100%;
}
.buehne-aktion h1,
.buehne-aktion .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.2em;
  color: var(--rot);
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-aktion h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2.8em;
  color: #fff;
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-bewerbung {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  width: 100%;
}
.buehne-bewerbung h1,
.buehne-bewerbung .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.2em;
  color: var(--rot);
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-bewerbung h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3.6em;
  color: #fff;
  letter-spacing: 8px;
  line-height: 1.3em;
}
.benefitbox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.benefitbox img {
  width: 60px;
  height: 60px;
  margin-right: 30px;
}
.fullparalax {
  min-height: 600px;
  background-color: #ccc;
}
.bg-paralax {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 14%, rgba(50, 50, 50, 0.3) 100%), url(../images/bewerbung/kraft.jpg) !important;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}
.content-paralax {
  display: flex;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.fullbgstripe {
  position: relative;
}
.fullbgstripe img {
  width: 100%;
  display: block;
}
.content-fullbgstripe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.is-parabewerbung h2 {
  font-size: 2.1em;
  font-weight: 300;
  letter-spacing: 10px;
}
.is-parabewerbung h3 {
  font-size: 4em;
  font-weight: 900;
  letter-spacing: 10px;
}
/* Zwischenband mit zentrierter Ueberschrift (Bewerbung, Personal
   Training, Aktionen). is-weiss: weisse Schrift, is-gross: mehr Luft. */
.content-trenner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 40px 0;
}
.content-trenner.is-weiss {
  color: #fff;
}
.content-trenner.is-gross {
  padding: 80px 0;
}
.content-trenner-kk {
  display: flex;
  color: #333;
  text-align: center;
  flex-direction: column;
  padding: 30px 0 10px 0;
  align-items: center;
  justify-content: center;
  position: relative;
}
ul.kkassenlist {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.kkassenlist li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  text-transform: uppercase;
  color: var(--blau);
  background-color: orange;
  text-align: center;
  justify-content: center;
  width: 21%;
}
@media (max-width: 768px) {
  .benefitbox {
    margin-bottom: 35px;
  }
  ul.kkassenlist li {
    width: 48%;
  }
  .buehne-aktion {
    padding: 60px 0;
  }
  .buehne-aktion h1,
  .buehne-aktion .is-h1 {
    font-size: .9em;
    letter-spacing: 4px;
    line-height: 1.4em;
  }
  .buehne-aktion h2 {
    font-weight: 800;
    font-size: 1.8em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .buehne-bewerbung {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    width: 100%;
  }
  .buehne-bewerbung h1,
  .buehne-bewerbung .is-h1 {
    font-size: .9em;
    letter-spacing: 4px;
    line-height: 1.4em;
  }
  .buehne-bewerbung h2 {
    font-weight: 800;
    font-size: 2.1em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .is-parabewerbung h2 {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: 10px;
  }
  .is-parabewerbung h3 {
    text-align: center;
    font-size: 3.2em;
    font-weight: 900;
    letter-spacing: 10px;
  }
}


.bg-dual {
  background-image: url("../images/bewerbung/dual.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* ==================================================================
   Zweispalter, Anker-Übersichten, Aufklapper
   ================================================================== */
.buehne-wellness {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  width: 100%;
}
.buehne-wellness h1,
.buehne-wellness .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.1em;
  color: var(--rot);
  letter-spacing: 4px;
  line-height: 1.3em;
}
.buehne-wellness h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3.6em;
  color: #fff;
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-kraftaktiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  width: 100%;
}
.buehne-kraftaktiv h1,
.buehne-kraftaktiv .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.2em;
  color: var(--rot);
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-kraftaktiv h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3.2em;
  color: #fff;
  letter-spacing: 8px;
  line-height: 1.3em;
}
.buehne-praevention {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  width: 100%;
}
.buehne-praevention h1,
.buehne-praevention .is-h1 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.1em;
  color: var(--rot);
  letter-spacing: 4px;
  line-height: 1.3em;
}
.buehne-praevention h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3.2em;
  color: #fff;
  letter-spacing: 8px;
  line-height: 1.3em;
}
.is-reverse-two .col01 {
  order: 2;
}
.is-reverse-two .col02 {
  order: 1;
}
.headlinewrapper {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
}
.headlinewrapper span {
  color: var(--blau);
  font-size: .9em;
}
.headlinewrapper strong {
  color: var(--rot);
  font-size: .9em;
  margin-bottom: 20px;
}
.headlinewrapper h2 {
  color: var(--blau);
  font-size: 1.6em;
}
.headlinewrapper h3 {
  color: var(--blau);
  font-size: 1.2em;
  font-weight: 300;
  margin-bottom: 15px;
}
.is-twocolimage img {
  width: 100%;
}
a.bildankerwrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  color: var(--blau);
}
a.bildankerwrapper img {
  width: 100%;
}
a.bildankerwrapper h4,
a.bildankerwrapper .is-h4 {
  margin-top: -10px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1em;
}
a.bildankerwrapper p {
  font-size: .7em;
}
ul.checklist {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
}
ul.checklist li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: var(--blau);
}
ul.checklist li:before {
  content: "";
  background-image: url("../images/check-black.svg");
  background-size: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #cdfaa3;
  margin-right: 14px;
}
ul.checklist.is-wellness li:before {
  background-color: #fdf5f3;
}
ul.checklist.is-reddot li:before {
  background-image: url("../images/check-white.svg");
  background-color: var(--rot);
}
.togglewrapper {
  margin: 20px 0 30px 0;
}
.toggle-item {
  margin-bottom: 15px;
  border: 1px solid transparent;
}
.toggle-header {
  /* frueher <h5>, jetzt <h4> - Groesse bleibt wie gehabt */
  font-size: .83em;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e5fcd0;
  color: #333;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.5s ease;
  position: relative;
  text-transform: uppercase;
  border: 1px solid #ddd;
}
.toggle-header.is-wellness {
  background-color: #fdf5f3;
}
.toggle-header.is-grey {
  background-color: var(--grau-hell);
}
.toggle-header::after {
  content: '+';
  position: absolute;
  right: 15px;
  font-size: 20px;
  transition: all 0.5s ease;
}
.toggle-header.open {
  background-color: var(--grau-hell);
  color: #333;
  border: none;
}
.toggle-header.open::after {
  content: '-';
}
.toggle-content {
  padding: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  background-color: var(--grau-hell);
  max-height: 0;
  font-size: .8em;
  line-height: 1.8em;
}
.toggle-content.is-open {
  transition: all 0.5s ease;
  overflow: auto;
  padding: 15px;
  border-top: none;
  max-height: 2000px;
}
.toggle-item.open {
  border: 1px solid #ddd;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
  .is-reverse-two .col01 {
    order: 1;
  }
  .is-reverse-two .col02 {
    order: 2;
  }
  a.bildankerwrapper h4,
  a.bildankerwrapper .is-h4 {
    font-size: .7em;
  }
  a.bildankerwrapper p {
    display: none;
  }
  .buehne-kraftaktiv {
    padding: 30px 0;
  }
  .buehne-kraftaktiv h1,
  .buehne-kraftaktiv .is-h1 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .buehne-kraftaktiv h2 {
    font-size: 2.4em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .buehne-kraftaktiv h3 {
    font-size: 1.2em;
    line-height: 1.3em;
  }
  .buehne-praevention {
    padding: 30px 0;
  }
  .buehne-praevention h1,
  .buehne-praevention .is-h1 {
    font-size: 0.9em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .buehne-praevention h2 {
    font-size: 1.8em;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1.3em;
  }
  .buehne-wellness {
    padding: 30px 0;
  }
  .buehne-wellness h1,
  .buehne-wellness .is-h1 {
    font-size: 0.9em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .buehne-wellness h2 {
    font-size: 2.1em;
    letter-spacing: 4px;
    line-height: 1.3em;
  }
  .buehne-wellness h3 {
    font-size: 1.0em;
    line-height: 1.3em;
  }
}


/* ==================================================================
   Formulare
   ================================================================== */
.kontaktformularwrapper {
  border: 1px solid #ccc;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: var(--grau-hell);
}
.kontaktformularwrapper strong {
  font-size: .9em;
  display: inline-block;
  margin-bottom: 10px;
}
.einverstaendniswrapper {
  /* <span> statt <div>: ein <label> darf keine Block-Elemente enthalten */
  display: block;
  font-size: .8em;
  padding: 10px;
  margin: 10px 0 20px 0;
  line-height: 1.4em;
  border: 1px solid #ccc;
  background-color: #dddddd;
}
.einverstaendniswrapper input {
  float: left;
  width: auto;
  margin-top: 3px;
  margin-right: 6px;
}
.input-row {
  display: flex;
  margin-bottom: 10px;
  align-items: stretch;
}
.input-row label {
  border: 1px solid #ccc;
  min-width: 170px;
  background-color: #ddd;
  display: block;
  padding: 6px 12px;
  font-size: .9em;
}
.input-row input,
.input-row select,
.input-row textarea {
  border: 1px solid #ccc;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
label {
  display: block;
}
select {
  border: 1px solid #ccc;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
input,
textarea {
  border: 1px solid #ccc;
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
}
.error {
  color: red;
  margin-top: 10px;
}
/* Nur die Absende-Buttons der Formulare. Vorher galt das fuer jeden
   <button> der Seite - also auch fuer den Burger, die Schaltflaechen im
   Cookie-Hinweis und die des Kontaktkastens. */
form button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
form button:hover {
  background-color: #45a049;
}
/* Wird von PHP nur nach erfolgreichem Versand ausgegeben */
.success-message {
  color: green;
  font-size: 18px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .input-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  .input-row label {
    border: 1px solid #ccc;
    min-width: 100%;
    background-color: #ddd;
    display: block;
    padding: 2px 12px;
    font-size: .8em;
  }
}
/* Spamschutz: Feld liegt ausserhalb des sichtbaren Bereichs.
   Kein display:none - manche Bots ueberspringen genau das. */
.formular-honigtopf {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.einverstaendnistxt {
  display: block;
}
/* Hinweistext zu Preisen im Fuss */
.footer-hinweis {
  padding: 20px;
  color: #999;
  font-size: .85em;
  line-height: 1.4em;
}
/* Mehrfachauswahl untereinander, Haken links (Kraft-Aktiv) */
.auswahl-zeile {
  display: flex;
  margin-bottom: 20px;
}
.auswahl-zeile input[type="checkbox"] {
  width: 40px;
}
form button.is-rechts {
  float: right;
}
/* Einwilligung als graue Box mit Haken links (3-Personen-Deal) */
.einwilligung-box {
  margin-top: 40px;
  padding: 15px 10px;
  border: 1px solid #ccc;
  background-color: #ddd;
  font-size: .8em;
  line-height: 1.4em;
}
.einwilligung-box label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}
.einwilligung-box input[type="checkbox"] {
  width: auto;
  max-width: 30px;
  min-height: 24px;
  margin-top: 3px;
}


/* ==================================================================
   Aktionsseiten
   ================================================================== */
/* Jede Aktion hat ihre eigenen zwei Farben. Standard: Petrol/Kupfer.
   Eine Aktionsseite ueberschreibt sie ueber eine Klasse am <body>,
   z. B. <body class="aktion-3pd">. Navigation und Fuss faerben sich
   ueber $pagetitle = "aktionsseite" mit. */
:root {
  --aktion-farbe: #247c92;
  --aktion-farbe-dunkel: #ab6949;
}

.aktion-3pd {
  --aktion-farbe: #e30c19;
  --aktion-farbe-dunkel: #b60f1d;
}

.aktion-3pd .aktion-buehne {
  display: flex;
  background-image: url("../images/aktion/bg-rosa.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.aktion-logo {
  width: 80%;
  margin-bottom: 30px;
}

.aktion-stoerer {
  width: 260px;
}

h1.aktion-farbe,
h2.aktion-farbe,
.aktion-farbe {
  color: var(--aktion-farbe);
}

.aktion-farbe-dunkel {
  color: var(--aktion-farbe-dunkel);
}

/* Buttons in Aktionsfarbe - auch beim Hover, wie zuvor */
a.mainbtn.aktion-btn,
a.mainbtn.aktion-btn:hover {
  background-color: var(--aktion-farbe-dunkel);
}

a.mainbtn.aktion-btn-hell,
a.mainbtn.aktion-btn-hell:hover {
  background-color: var(--aktion-farbe);
}

.aktion-band {
  background-color: var(--aktion-farbe);
  color: #fff;
}

ul.is-aktionsdot li:before {
  background-image: url("../images/check-white.svg");
  background-color: var(--aktion-farbe);
}
ul.kkassenlist li {
  color: var(--aktion-farbe);
  background-color: #eee;
  border-radius: 10px;
}
.content-trenner-kk {
  color: #fff !important;
}
footer.aktionsseite {
  background-color: var(--aktion-farbe);
}
footer.aktionsseite a.mainbtn {
  background-color: var(--aktion-farbe);
}
footer.aktionsseite a.mainbtn:hover {
  background-color: var(--aktion-farbe-dunkel);
}
nav.aktionsseite {
  background-color: var(--aktion-farbe);
}
nav.aktionsseite ul li a:hover {
  background-color: var(--aktion-farbe-dunkel);
}
.aktionbenefitcolumn {
  align-items: flex-start;
}
.aktionbenefitbox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.aktionbenefitbox img {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  margin-right: 20px;
}
.aktionbenefitbox h4,
.aktionbenefitbox .is-h4 {
  color: var(--aktion-farbe);
  margin-bottom: 2px;
  line-height: 1.4em;
}
.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 20px;
}
.checkbox-group label,
.radio-group label {
  display: flex;
  align-items: center;
  font-weight: 400;
  gap: 8px;
  background-color: #f6f6f6;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 130px;
}
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
  width: auto;
  min-height: 24px;
}
.checkbox-group label:hover,
.radio-group label:hover {
  background-color: #eaeaea;
  border-color: var(--aktion-farbe);
}
.mehrfach {
  color: #000;
  font-size: .75em;
  font-weight: normal;
  margin-left: 10px;
}
.formhead {
  color: var(--aktion-farbe);
  margin-top: 40px;
  font-size: 1.1em;
}
@media (max-width: 768px) {
  .aktionbenefitbox {
    flex-direction: column;
    justify-content: center;
    margin-bottom: 60px;
    font-size: .95em;
  }
  .aktionbenefitbox img {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .benefitcontent {
    text-align: center;
  }
  .aktionbenefitbox h4,
  .aktionbenefitbox .is-h4 {
    font-size: 1.0em;
  }
}