/* ============================================
   Gerd Tragner - Physiotherapie & Mentaltraining
   Statisches Grundgerüst (1:1-Nachbau der WordPress-Seite)
   Farben/Schrift exakt von der Live-Seite übernommen
   ============================================ */


/* Habibi lokal eingebunden (statt Google Fonts, DSGVO) – Quelle: @fontsource/habibi, SIL OFL */
/* habibi-latin-ext-400-normal */
@font-face {
  font-family: 'Habibi';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/habibi-latin-ext-400-normal.woff2) format('woff2'), url(/assets/fonts/habibi-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* habibi-latin-400-normal */
@font-face {
  font-family: 'Habibi';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/habibi-latin-400-normal.woff2) format('woff2'), url(/assets/fonts/habibi-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --color-accent: #e99b3e;        /* Button-/Footer-Orange (exakt aus Theme-CSS) */
  --color-accent-dark: #db8319;   /* Button-Hover (exakt aus Theme-CSS) */
  --color-link: #e68c3c;          /* Fließtext-Link-Orange (exakt aus Theme-CSS) */
  --color-active: #55bced;        /* Hellblau, Nav-Hover/aktive Seite (exakt) */
  --color-text: #444444;
  --color-text-light: #555555;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f7;
  --font-main: "Habibi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max-width: 1170px;
}

* {
  box-sizing: border-box;
}



body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg-alt);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

b,
strong {
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  color: var(--color-link);
  text-decoration: none;
}

/* ===== Scroll-Einblend-Animationen (wie WOW.js/animate.css im Original) ===== */
@keyframes slideInUp {
  from { transform: translate3d(0, 40px, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translate3d(-40px, 0, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.reveal-init {
  opacity: 0;
}

.reveal-init.slideInUp {
  animation: slideInUp 0.8s ease forwards;
}

.reveal-init.slideInLeft {
  animation: slideInLeft 0.8s ease forwards;
}

/* WOW.js + animate.css wie im Original */
.wow.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.wow.animated.slideInUp { animation-name: acSlideInUp; }
.wow.animated.slideInLeft { animation-name: acSlideInLeft; }

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1;
    animation: none !important;
  }
}

/* Bootstrap-3-Container 1:1 wie im Original-Theme (feste Stufen, 15px Padding) */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ===== Header / Navigation =====
   1:1 nach den HealthFlex-Theme-Regeln (.header, .logo, .menu_container).
   Startseite: transparent und absolut über dem Hero (.header.transparent).
   Unterseiten: statisch mit #f7f7f7-Hintergrund. */
.site-header {
  position: relative;
  z-index: 11;
  background-color: var(--color-bg-alt);
  color: #555;
  min-height: 30px;
  transition: transform 0.3s ease-in-out;
}

.has-hero-slider .site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
}

.site-header .container {
  position: relative;
}

.site-header .container::after {
  content: "";
  display: table;
  clear: both;
}

.site-header .logo {
  display: inline-block;
  margin: 20px 0;
  line-height: 1em;
  vertical-align: top;
}

.site-header .logo img {
  display: inline;
  vertical-align: middle;
  width: auto;
  max-height: 70px;
}

.main-nav {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translate(0, -50%);
  z-index: 100;
  background: transparent;
}

.main-nav .close-menu {
  display: none;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > ul > li {
  float: left;
  position: relative;
  text-align: left;
}

.main-nav a {
  display: block;
  padding: 10px 15px;
  font-size: 16px;
  line-height: 1em;
  font-weight: 400;
  color: var(--color-text);
  background-color: transparent;
}

.main-nav a:hover,
.main-nav a:active,
.main-nav a:focus,
.main-nav a.active {
  color: var(--color-active);
}

.main-nav li.has-sub > a {
  padding: 10px 25px 10px 15px;
}

.main-nav li.has-sub > a::after {
  content: "\2023";
  font-family: Arial, sans-serif;
  font-size: 20px;
  position: absolute;
  top: 15px;
  right: 8px;
  transform: rotate(90deg);
  color: var(--color-text);
  width: 13px;
  height: 13px;
  line-height: 13px;
  overflow: hidden;
  opacity: 0.5;
}

.main-nav li.has-sub:hover > a::after {
  opacity: 1;
}

.main-nav .sub-menu {
  position: absolute;
  top: 23px;
  left: -25px;
  z-index: 30;
  min-height: 40px;
  padding: 38px 0;
  margin: 0;
  background-color: var(--color-bg-alt);
  border-bottom: 4px solid var(--color-active);
  visibility: hidden;
  opacity: 0;
}

.main-nav .sub-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 10px);
  transition: 100ms ease-in-out;
}

.main-nav .sub-menu li {
  display: block;
  position: relative;
  width: 100%;
}

.main-nav .sub-menu a {
  padding: 7px 40px;
  font-size: 14px;
  line-height: 1em;
  white-space: nowrap;
  color: var(--color-text);
}

.main-nav .sub-menu li:hover > a {
  background: var(--color-active);
  color: var(--color-bg-alt);
}

.menu-toggle {
  display: none;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .main-nav > ul > li > a { padding: 10px; }
  .main-nav > ul > li.has-sub > a { padding: 10px 19px 10px 10px; }
  .main-nav > ul > li.has-sub > a::after { right: 6px; }
}

/* Mobile (<=991px): Off-Canvas-Panel rechts, die ganze Seite schiebt sich
   um 250px nach links (wie .collapsed im Original-Theme). */
@media (max-width: 991px) {
  .site-header .logo { margin: 14px 0; }
  .site-header .logo img { max-height: 60px; }

  .menu-toggle {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%);
    width: 80px;
    margin: 0;
    padding: 15px 30px 15px 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-text);
    text-align: right;
    font-family: inherit;
    font-size: 13px;
    line-height: 1em;
  }

  .menu-toggle::after {
    content: "\2261";
    display: block;
    position: absolute;
    font-size: 40px;
    top: 13px;
    right: -5px;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    transform: translate(250px, 0);
    background-color: var(--color-bg-alt);
    padding: 88px 0;
    border-left: 1px solid #ccc;
    overflow: auto;
  }

  .main-nav .close-menu {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    cursor: pointer;
    color: var(--color-text);
    font-size: 30px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
  }

  .main-nav > ul {
    border-top: 1px solid #ccc;
  }

  .main-nav li,
  .main-nav > ul > li {
    display: block;
    float: none;
    border-bottom: 1px solid #ccc;
  }

  .main-nav .sub-menu {
    position: relative;
    top: 0;
    left: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    transform: translate(0, -30px);
  }

  .main-nav .sub-menu.show {
    height: auto;
    transform: translate(0, 0);
  }

  .main-nav .sub-menu li:last-child {
    border-bottom: 1px solid #ccc;
  }

  .main-nav .sub-menu a {
    padding: 15px 20px;
  }

  body > * {
    transition: transform 0.3s ease-in-out;
  }

  body.nav-open > *:not(.back-to-top) {
    transform: translate(-250px, 0);
  }
}

@media (max-width: 767px) {
  .site-header .logo { margin: 10px 0; }
  .site-header .logo img { max-height: 50px; }
}

/* ===== Hero-Slider (nur Startseite) =====
   1:1 nach Owl Carousel + HealthFlex-Theme (.head_panel .slider_wrapper):
   horizontaler Slide, Caption-Box mit 30%-Schwarzfilm, 7px-Trenner unter .t2,
   Sprite-Pfeile (slider-arrows.png), Owl-Default-Dots. */
.hero-slider {
  position: relative;
  height: 400px;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}

/* Exakte Höhen aus .transparent_header .stretchy_wrapper.ratio_slider */
@media (min-width: 480px) { .hero-slider { height: 460px; } }
@media (min-width: 768px) { .hero-slider { height: 720px; } }
@media (min-width: 1900px) { .hero-slider { height: 0; padding-bottom: 40%; } }

.hero-stage-outer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-stage {
  display: flex;
  height: 100%;
  will-change: transform;
  touch-action: pan-y;
}

.hero-item {
  flex: 0 0 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
}

.hero-item .container {
  height: 100%;
  position: relative;
}

.hero-slider .caption {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 50%;
  text-align: left;
}

.hero-slider .caption.caption-right {
  left: auto;
  right: 0;
}

.hero-slider .inner {
  position: relative;
  padding: 42px;
  color: #fff;
}

.hero-slider .inner::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.hero-slider .inner > * {
  position: relative;
}

.hero-slider .inner.hide {
  display: none;
}

.hero-slider .inner.play-left {
  animation: acSlideInLeft 1s both;
}

.hero-slider .inner.play-up {
  animation: acSlideInUp 1s both;
}

/* animate.css-Originale (slideInLeft / slideInUp) */
@keyframes acSlideInLeft {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes acSlideInUp {
  from { transform: translate3d(0, 100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}

.hero-slider .t1 {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2em;
}

.hero-slider .t2 {
  display: inline-block;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.2em;
}

.hero-slider .t2::after {
  content: "";
  display: block;
  border-bottom: 7px solid var(--color-accent);
  margin: 12px 0;
}

@media (min-width: 480px) {
  .hero-slider .t1 { font-size: 56px; }
  .hero-slider .t2 { font-size: 30px; }
}

.hero-slider .desc {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.4em;
}

@media (max-width: 480px) {
  .hero-slider .desc { display: none; }
}

@media (max-width: 991px) {
  .hero-slider .caption,
  .hero-slider .caption.caption-left { left: 5%; width: 90%; }
  .hero-slider .caption.caption-right { left: auto; right: 5%; width: 90%; }
}

.hero-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0;
  z-index: 2;
}

.hero-nav button {
  position: absolute;
  top: 0;
  width: 44px;
  height: 50px;
  padding: 0;
  margin: 0;
  border: 0;
  transform: translate(0, -50%);
  opacity: 0.3;
  overflow: hidden;
  cursor: pointer;
  background: transparent url("/assets/images/slider-arrows.png") no-repeat;
  color: transparent;
  font-size: 14px;
}

.hero-nav button:hover {
  opacity: 1;
}

.hero-nav .hero-prev {
  left: 0;
  text-indent: -20000px;
  background-position: 0 0;
}

.hero-nav .hero-next {
  right: 0;
  text-indent: 20000px;
  background-position: -44px 0;
}

@media (max-width: 767px) {
  .hero-nav { visibility: hidden; }
}

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 0;
  z-index: 2;
}

.hero-dots button {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  vertical-align: top;
}

.hero-dots button span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #d6d6d6;
  border-radius: 30px;
  transition: opacity 200ms;
}

.hero-dots button.active span,
.hero-dots button:hover span {
  background: #869791;
}

/* ===== Seiten-Banner (Unterseiten) ===== */
.page-banner {
  background: var(--color-accent);
  color: #fff;
  padding: 32px 15px;
  text-align: left;
}

.page-banner h1 {
  font-size: 31.2px;
  font-weight: 900;
  margin: 0 0 1px;
}

.page-banner p {
  margin: 0;
  opacity: 0.95;
}

/* ===== Karten-Banner (nur Kontakt-Seite, echte Google-Maps-Einbettung) ===== */
.map-banner {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: #e5e3df;
}

.map-embed,
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-banner-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.map-banner-title h1 {
  color: #fff;
  font-size: 31.2px;
  font-weight: 900;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Button-Werte 1:1 aus dem echten Theme-CSS (.btn / .btn-primary) */
.btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff !important;
  border: 0;
  padding: 8px 24px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 100px;
}

.btn:hover,
.btn:focus,
.btn:active {
  background: var(--color-accent-dark);
  color: #fff !important;
}

/* ===== WPBakery/HealthFlex-Grundbausteine (1:1 aus dem Theme) =====
   .vc-section = ".main > section", .section-header = ".section_header",
   .wpb-el = ".wpb_content_element", .wpb-text = ".wpb_text_column" */
/* margin 0 -15px wie ".vc_row" im Original: Sektion ragt je 15px über den
   Bildschirmrand hinaus (abgeschnitten) – mobil dadurch 345px statt 315px Text */
.vc-section {
  position: relative;
  margin: 0 -15px;
  background-color: var(--color-bg-alt);
  padding: 128px 0;
}

.vc-section.no-bottom-padding {
  padding-bottom: 0;
}

@media (max-width: 480px) {
  .vc-section { padding-top: 64px; padding-bottom: 64px; }
  .vc-section.no-bottom-padding { padding-bottom: 0; }
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.row::before,
.row::after {
  content: " ";
  display: table;
}

.row::after {
  clear: both;
}

@media (max-width: 991px) {
  .vc-section .row { margin-left: 0; margin-right: 0; }
}

[class*="col-sm-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  [class*="col-sm-"] { float: left; }
  .col-sm-4 { width: 33.33333333%; }
  .col-sm-8 { width: 66.66666667%; }
  .col-sm-12 { width: 100%; }
  .col-sm-offset-2 { margin-left: 16.66666667%; }
}

.text-center {
  text-align: center;
}

.section-header {
  position: relative;
  margin: 0 0 42.6667px;
}

.section-header h2 {
  margin: 0 0 1px;
  line-height: 1.1;
}

.section-header p {
  margin-bottom: 0;
}

.section-header h2 + p {
  margin-top: 5px;
  font-size: 18px;
}

.section-header.fancy h2 {
  font-size: 39px;
  font-weight: 900;
}

.section-header.fancy p {
  font-weight: normal;
}

@media (max-width: 480px) {
  .section-header.fancy h2 { font-size: 31.2px; }
}

.wpb-el {
  margin-bottom: 32px;
}

.wpb-text + .wpb-el {
  position: relative;
  margin-top: -7px;
}

.wpb-text p {
  margin: 0 0 10px;
}

.wpb-text p:last-child {
  margin-bottom: 0;
}

/* Textmarker-Unterstrich unter Fließtext-Links (Inline-CSS der Live-Seite) */
p:not(.social):not(.contact_detail) > a:not(.btn) {
  position: relative;
}

p:not(.social):not(.contact_detail) > a:not(.btn)::after {
  border-bottom-style: solid;
  border-bottom-width: 8px;
  border-color: inherit;
  bottom: 1px;
  content: "";
  display: inline-block;
  left: 0;
  opacity: 0.2;
  position: absolute;
  width: 100%;
  transition: bottom 0.1s ease-in-out;
}

p:not(.social):not(.contact_detail) > a:not(.btn):hover::after {
  bottom: 3px;
}

/* ===== Section basics ===== */
section {
  padding: 64px 0;
}

/* Auf der echten Seite ist der Hintergrund durchgehend #f7f7f7 (kein weißer Wechsel) */
section.alt {
  background: transparent;
}

h2 {
  font-size: 39px;
  font-weight: 900;
  color: var(--color-text);
  margin: 22px 0 11px;
  line-height: 1.2;
}

h2 .accent-text {
  color: var(--color-link);
}

@media (max-width: 768px) {
  h2 {
    font-size: 31.2px;
  }
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ===== Two-column text+image row (z.B. Mentaltraining "Wir versuchen gemeinsam") ===== */
.two-col {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin: 30px 0;
}

.two-col > div {
  flex: 1 1 50%;
  min-width: 0;
}

.two-col img {
  width: 100%;
  max-width: 300px;
  border: 10px solid #eee;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .two-col {
    flex-direction: column;
  }
}

/* ===== Pricing-Plan Balken (Mentaltraining) ===== */
.pricing-plans {
  margin: 30px 0;
}

.plan {
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
}

.plan-title {
  background: var(--color-link);
  padding: 30px;
}

.plan-title h3 {
  margin: 0 0 6px;
  font-size: 33px;
  font-weight: 900;
  color: #fff;
}

.plan-title p {
  margin: 0;
  color: #fff;
}

.plan-price {
  background: var(--color-link);
  padding: 10px 30px;
  font-size: 30px;
  font-weight: 800;
}

.plan.accent .plan-title,
.plan.accent .plan-price {
  background: var(--color-accent);
}

/* ===== Leistungs-Karten (".folded_section" + ".teaser_box" im Original) =====
   Dreiecks-Spitzen per Border-Trick: Breite = Spaltenbreite - 4px (per JS wie
   im Theme), 25px hoch, abwechselnd downhill/uphill. "Mehr"-Button liegt
   unsichtbar unter der Karte und fährt beim Hover hoch. */
.folded-section {
  padding: 64px 0 0;
  background-color: transparent;
  transform: translate(0, 0);
  z-index: 1;
}

.folded-section [class*="col-sm-"] {
  padding-left: 0;
  padding-right: 0;
  color: #fff;
}

.folded-section .dark-col { background-color: #2b609b; border-color: #2b609b; }
.folded-section .secondary-col { background-color: #55bced; border-color: #55bced; }

.folded-section .sep-top,
.folded-section .sep-bottom {
  background-color: inherit;
  border-color: inherit;
  border-style: solid;
  border-width: 3px;
}

.folded-section .sep-top::after,
.folded-section .sep-bottom::after {
  content: "";
  position: absolute;
  z-index: 9;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 25px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: inherit;
}

.folded-section .sep-top::after {
  top: -24px;
  border-right-color: inherit;
  border-left-color: inherit;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.folded-section .sep-bottom::after {
  bottom: -24px;
  border-top-color: inherit;
  border-bottom-color: inherit;
  border-left-color: transparent;
  border-right-color: transparent;
}

.folded-section .downhill .sep-top::after { left: 0; }
.folded-section .uphill .sep-top::after { right: 0; transform: rotateY(180deg); }
.folded-section .downhill .sep-bottom::after { left: 0; transform: rotateY(180deg); }
.folded-section .uphill .sep-bottom::after { right: 0; }

.teaser-box {
  position: relative;
  overflow: hidden;
  padding: 30px 20px;
  margin-bottom: 32px;
  text-align: center;
}

.teaser-box .figure {
  display: block;
}

.teaser-box .figure a {
  color: #f0edf1;
}

.secondary-col .teaser-box .figure a {
  color: #fff;
}

.teaser-box .figure img {
  display: inline;
  vertical-align: middle;
}

.teaser-box .content {
  padding: 25px 20px;
  transition: 100ms ease-in-out;
}

.teaser-box .hgroup {
  position: relative;
  margin: 0;
}

.teaser-box .hgroup h4 {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}

.teaser-box .hgroup p {
  font-size: 13px;
  margin: 0;
  color: #fff;
}

.teaser-box .link {
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  z-index: 2;
  text-align: center;
  transition: 100ms ease-in-out;
}

.teaser-box .link > a {
  min-width: 80px;
  cursor: pointer;
}

.teaser-box:hover .link {
  bottom: 0;
}

.teaser-box:hover .content {
  padding: 20px 20px 30px;
}

.btn.btn-xs {
  padding: 4px 10px;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .folded-section .sep-top,
  .folded-section .sep-bottom { display: none; }
  .teaser-box {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ===== Referenzen (".skincolored_section" + Owl-Testimonial-Slider) ===== */
.skincolored-section {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.skincolored-section a,
.skincolored-section a:hover {
  color: #fff;
}

.section-header h2 {
  color: inherit;
}

.aligncenter {
  display: block;
  margin: 0 auto;
  clear: both;
}

.testimonial ul.slides {
  list-style: none;
  padding: 0 0 0 1em;
  margin: 0 0 10px;
}

.testimonial li {
  font-size: 18px;
  line-height: 1.5;
}

.testimonial li p {
  margin: 0 0 10px;
}

.testimonial .name {
  font-style: italic;
  font-size: 15px;
  margin-top: 30px;
}

.testimonial-slider img {
  width: auto;
}

.t-stage-outer {
  position: relative;
  overflow: hidden;
}

.t-stage {
  display: flex;
  align-items: flex-start;
  touch-action: pan-y;
  user-select: none;
}

.t-stage > li {
  flex: 0 0 100%;
  min-width: 0;
}

.t-dots {
  margin-top: 10px;
  text-align: center;
  line-height: 0;
}

.t-dots button {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  vertical-align: top;
}

.t-dots button span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #fff;
  border-radius: 30px;
  transition: opacity 200ms;
}

.t-dots button.active span,
.t-dots button:hover span {
  background: var(--color-active);
}

/* ===== CTA: zwei graue Dreiecke ragen von oben in die orange Fläche
   (".sep_angled_negative_top" im Original, Sektion dort 15px breiter) ===== */
.sep-angled-negative-top::before,
.sep-angled-negative-top::after {
  content: "";
  position: absolute;
  top: -31px;
  z-index: 9;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 0 0 50vw;
  border-color: transparent var(--color-bg-alt);
}

.sep-angled-negative-top::before { left: 0; }
.sep-angled-negative-top::after { right: 0; transform: rotateY(180deg); }

.empty-space {
  display: block;
}

/* ===== Lists of services (Physiotherapie-Seite) =====
   1:1 Original-Struktur: jeder Leistungsblock hat ein eigenes Hintergrundfoto
   links/rechts (abwechselnd) und eine weiße Text-Karte daneben. */
.service-photo-block {
  display: flex;
  flex-wrap: wrap;
  min-height: 420px;
}

.service-photo-block.reverse {
  flex-direction: row-reverse;
}

.service-photo {
  flex: 1 1 55%;
  min-height: 320px;
  background-size: cover;
  background-position: center;
}

.service-text {
  flex: 1 1 45%;
  background: #fff;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-text > p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin: 0 0 6px;
}

.service-text > h2 + p {
  font-size: 1rem;
  margin: 16px 0;
}

.service-text ul {
  margin: 16px 0;
  padding-left: 20px;
}

.service-text li {
  margin-bottom: 6px;
}

.service-text .btn {
  align-self: flex-start;
}

@media (max-width: 800px) {
  .service-photo-block,
  .service-photo-block.reverse {
    flex-direction: column;
  }

  .service-photo {
    min-height: 220px;
  }

  .service-text {
    padding: 36px 20px;
  }
}

/* ===== Steps (Weg zur Physiotherapie) ===== */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 780px;
  margin: 40px 0;
}

.step h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}

.weg-layout {
  align-items: flex-start;
}

.weg-layout > div:last-child {
  position: sticky;
  top: 90px;
}

/* ===== Kleiner Bild-Karussell (z.B. "Der Weg zur Physiotherapie") ===== */
.image-carousel {
  overflow: hidden;
  border: 1px solid #e5e5e5;
}

.image-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

.image-carousel-track img {
  flex: 0 0 50%;
  width: 50%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .weg-layout > div:last-child {
    position: static;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.gallery.portrait {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .gallery,
  .gallery.portrait {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Über mich ===== */
.about-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: start;
}

.about-card {
  background: #eaeaea;
  padding: 30px 40px;
  text-align: center;
}

.about-card h3 {
  color: #323232;
  font-size: 24px;
  margin: 0 0 15px;
}

.about-card img {
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  max-width: 100%;
}

.about-card p {
  color: #323232;
  margin: 15px 0 0;
}

/* ===== Kontakt (Text links, rundes Foto rechts) ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: start;
}

.contact-grid .contact-photo {
  text-align: center;
}

.contact-grid .contact-photo img {
  max-width: 100%;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Parallax-Bildabschnitt mit Farbfilm (z.B. "Komm vorbei!") ===== */
.parallax-cta {
  position: relative;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  padding: 128px 0;
  text-align: center;
  color: #fff;
}

.parallax-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(62, 179, 235, 0.3);
}

.parallax-cta .container {
  position: relative;
  z-index: 1;
}

.parallax-cta h2 {
  color: #fff;
  font-size: 39px;
}

.parallax-cta p {
  color: #fff;
  font-size: 18px;
}

@media (max-width: 600px) {
  .parallax-cta {
    background-attachment: scroll;
    padding: 70px 0;
  }
}

/* ===== Kontakt / Praxis / Footer contact info ===== */
.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 30px;
}

.contact-info a {
  color: inherit;
}

.contact-info .item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-grid .contact-info {
  display: block;
  margin-top: 20px;
}

.contact-grid .contact-info .item {
  display: block;
  margin-bottom: 10px;
}

/* ===== Footer (1:1 nach "footer" + ".pl_about_us_widget" im Theme) ===== */
.site-footer {
  position: relative;
  z-index: 9;
  background-color: var(--color-link);
  border-color: var(--color-link);
  color: #fff;
  padding: 100px 0;
}

/* Spitze oben (".sep_angled_positive_top"): zwei 32px-Dreiecke ab der Mitte */
.site-footer .separator-top {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: inherit;
  border-color: inherit;
}

.site-footer .separator-top::before,
.site-footer .separator-top::after {
  content: "";
  position: absolute;
  top: -31px;
  z-index: 9;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32px 0 0 50vw;
  border-color: inherit;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.site-footer .separator-top::before { left: 49.99%; }
.site-footer .separator-top::after { right: 49.99%; transform: rotateY(180deg); }

.site-footer a,
.site-footer a:hover {
  color: #fff;
}

.site-footer .widget {
  position: relative;
  margin: 15px 0;
}

.about-widget {
  text-align: center;
}

.about-widget p {
  margin: 0 0 21px;
}

/* Logo-Absatz ohne Unterlängen-Lücke (wie in der live gerenderten Seite) */
.about-widget p:first-child img {
  display: inline;
  vertical-align: top;
}

/* Original: vertical-align: 15%. Die Live-Seite rendert im Quirks-Mode ohne
   Zeilen-Strut, wodurch die Anhebung dort keine sichtbare Wirkung hat – im
   Standard-Modus daher bewusst ohne Anhebung (pixelgleich zur Live-Ansicht). */
.about-widget p span {
  display: inline;
  margin: 0 0 0 3px;
}

.about-widget p.contact_detail {
  display: inline-block;
  margin: 5px 10px;
  line-height: 1.1em;
}

.about-widget p.social {
  margin: 5px 0;
}

/* Ab 768px stehen die drei Kontaktangaben in einer Zeile; dort ist die Zeile
   live (Quirks-Mode) 0,5px höher – Ausgleich nur für diesen Fall */
@media (min-width: 768px) {
  .about-widget p.social { margin-top: 5.453px; }
}

.about-widget .lead {
  font-size: 17px;
  font-weight: normal;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .about-widget .lead { font-size: 22.5px; }
}

.copyright {
  position: relative;
  padding: 15px 0;
  font-size: 14px;
  background-color: var(--color-accent);
  color: #fff;
}

/* 30%-Farbfilm wie ".skincolored_section.transparent_film" */
.copyright-film::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(230, 143, 39, 0.3);
}

.copyright-film > * {
  position: relative;
}

.copyright a,
.copyright a:hover {
  color: #fff;
}

.text-right {
  text-align: right;
}

@media (min-width: 768px) {
  .col-sm-6 { width: 50%; }
}

@media (min-width: 992px) {
  .col-md-12 { float: left; width: 100%; }
}

.col-md-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 767px) {
  .copyright div { text-align: center; }
}

@media (max-width: 860px) {
  .page-banner {
    padding: 28px 16px;
  }
}

/* ===== "Nach oben"-Button (wie im Original unten rechts) ===== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(50, 50, 50, 0.85);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* Kein Textmarker-Balken unter verlinkten Bildern (z. B. Referenz-Foto) */
p:not(.social):not(.contact_detail) > a:not(.btn):has(> img)::after {
  display: none;
}

/* =====================================================================
   WordPress/HealthFlex-Basis für die Unterseiten (Original-Klassennamen,
   Regeln 1:1 aus style-4f384125a2.css, Bootstrap 3 und js_composer.css)
   ===================================================================== */
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 1em; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); }

.main { position: relative; z-index: 9; }

.skincolored_section,
.main .skincolored_section {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.skincolored_section a,
.skincolored_section a:hover { color: #fff; }

.white_section,
.main .white_section {
  background-color: #fff;
  border-color: #fff;
  color: #555;
}
.white_section a,
.white_section a:hover { color: var(--color-accent); }

.main h1 { font-size: 39px; font-weight: 400; line-height: 1.1; margin: 22px 0 11px; }
.main h2 { font-size: 27px; font-weight: 400; line-height: 1.1; margin: 22px 0 11px; }
.main h3 { font-size: 24px; font-weight: 400; line-height: 1.1; margin: 22px 0 11px; }
.main h4 { font-size: 18px; font-weight: 400; line-height: 1.1; margin: 22px 0 11px; }
@media (max-width: 991px) {
  .main h1 { font-size: 36px; }
  .main h2 { font-size: 25px; }
  .main h3 { font-size: 22px; }
  .main h4 { font-size: 17px; }
}
@media (max-width: 767px) {
  .main h1 { font-size: 32px; }
  .main h2 { font-size: 22px; }
  .main h3 { font-size: 20px; }
  .main h4 { font-size: 15px; }
}

.page_title_in_content { margin-bottom: 42px; }
.page_title_in_content .section_header { margin: 32px 0 !important; }

.section_header { position: relative; margin: 0 0 42.6667px; }
.section_header h1,
.section_header h2,
.section_header h3 { margin: 0 0 1px; }
.section_header p { margin-bottom: 0; }
.section_header h2 + p { margin-top: 5px; font-size: 18px; }
.section_header.fancy h1,
.section_header.fancy h2 { font-size: 39px; font-weight: 900; }
.section_header.fancy p { font-weight: normal; }
@media (max-width: 480px) {
  .section_header.fancy h1,
  .section_header.fancy h2 { font-size: 31.2px; }
}

.main > section {
  position: relative;
  background-color: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 128px;
  padding-bottom: 128px;
}
@media (max-width: 480px) {
  .main > section { padding-top: 64px; padding-bottom: 64px; }
}
.main[class*="_section"] section { background-color: transparent; }
.main > section.no_padding { padding-top: 0; padding-bottom: 0; }
.no_padding { padding: 0 !important; }
.main > section.no_top_padding { padding-top: 0; }
.main > section.no_bottom_padding { padding-bottom: 0; }
.page_title_in_content + section { padding-top: 0 !important; }
.main > section.full_width > .container { width: 100%; }
.main > section div[class*="col-"] {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.main > section.no_cols_padding div[class*="col-"] { padding-left: 0; padding-right: 0; }

.vc_row { margin-left: -15px; margin-right: -15px; }
.vc_row::before, .vc_row::after { content: " "; display: table; }
.vc_row::after { clear: both; }
@media (max-width: 991px) {
  .vc_row .row { margin-left: 0; margin-right: 0; }
}
@media (min-width: 768px) {
  .vcenter div[class*="col-"] {
    display: inline-block;
    vertical-align: middle;
    float: none;
    margin-right: -4px;
  }
}

.boxed_plus { padding: 30px 40px !important; }
.boxed { padding: 30px 20px !important; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.wpb_content_element { margin-bottom: 32px; }
.wpb_text_column + .wpb_content_element { position: relative; margin-top: -7px; }
.wpb_text_column :last-child,
.wpb_text_column p:last-child { margin-bottom: 0; }
.vc_empty_space { display: block; }

@media (max-width: 767px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }

/* Bootstrap-3-Raster (zusätzliche Spalten) */
[class*="col-md-"], [class*="col-lg-"], [class*="col-xs-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-3 { width: 25%; }
  .col-sm-5 { width: 41.66666667%; }
  .col-sm-7 { width: 58.33333333%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-offset-1 { margin-left: 8.33333333%; }
}
@media (min-width: 992px) {
  [class*="col-md-"] { float: left; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333333%; }
  .col-md-5 { width: 41.66666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33333333%; }
  .col-md-8 { width: 66.66666667%; }
  .col-md-9 { width: 75%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
  [class*="col-lg-"] { float: left; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333333%; }
  .col-lg-5 { width: 41.66666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333333%; }
  .col-lg-8 { width: 66.66666667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-12 { width: 100%; }
  .col-lg-push-4 { left: 33.33333333%; }
  .col-lg-pull-1 { right: 8.33333333%; }
  .col-lg-pull-7 { right: 58.33333333%; }
}

.wpb_text_column .wpb_wrapper h3,
.wpb_text_column .wpb_wrapper h4 { margin-top: 0; }
.wpb_text_column .wpb_wrapper p + h4 { margin-top: 22px; }

/* WPBakery-Bildkarussell (vc_carousel.min.css) */
.vc_clearfix::before, .vc_clearfix::after { content: " "; display: table; }
.vc_clearfix::after { clear: both; }
.vc_images_carousel { position: relative; }
.vc_images_carousel .vc_carousel-inner { position: relative; overflow: hidden; width: 100%; }
.vc_images_carousel .vc_carousel-slideline { position: relative; overflow: hidden; }
.vc_images_carousel .vc_carousel-slideline-inner { left: 0; position: relative; width: 100%; }
.vc_images_carousel .vc_carousel-slideline-inner.vc_transition { transition: left 0.5s; }
.vc_images_carousel .vc_carousel-slideline-inner > .vc_item { float: left; visibility: hidden; }
.vc_images_carousel.vc_per-view-more .vc_carousel-slideline-inner > .vc_item > .vc_inner { margin: 0 10px; }
.vc_images_carousel.vc_build .vc_carousel-slideline-inner > .vc_item { visibility: visible; }
.vc_images_carousel img { display: inline; vertical-align: middle; }

/* Trennlinie (js_composer vc_separator) */
.vc_separator { display: flex; flex-flow: row; align-items: center; }
.vc_separator .vc_sep_holder { height: 1px; position: relative; flex: 1 1 auto; min-width: 10%; }
.vc_separator .vc_sep_holder .vc_sep_line { height: 1px; border-top: 1px solid #ebebeb; display: block; position: relative; top: 1px; width: 100%; }
.vc_separator.vc_separator_no_text:not(.vc_sep_shadow) .vc_sep_holder_l { width: 100%; }
.vc_separator.vc_separator_no_text:not(.vc_sep_shadow) .vc_sep_holder_r { display: none; }
.vc_sep_width_100 { width: 100%; }
.vc_sep_pos_align_center { margin-left: auto; margin-right: auto; }
.vc_separator .vc_sep_line { border-color: inherit !important; }

/* Einzelbild (js_composer wpb_single_image) */
figure { margin: 0; }
.wpb_single_image img { height: auto; max-width: 100%; vertical-align: top; display: inline; }
.wpb_single_image .vc_single_image-wrapper { display: inline-block; vertical-align: top; max-width: 100%; }
.wpb_single_image.vc_align_center { text-align: center; }
.wpb_single_image .vc_figure { display: inline-block; vertical-align: top; margin: 0; max-width: 100%; }

.hidden { display: none !important; }
small { font-size: 85%; }

.dark_section,
.main .dark_section,
div[class*="_section"] .dark_section {
  background-color: var(--color-link);
  border-color: var(--color-link);
  color: #fff;
}
div[class*="_section"] .skincolored_section {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Preisblöcke (".pricing_plan" im Theme) */
.pricing_plan { position: relative; }
.pricing_plan:hover { box-shadow: rgba(0, 0, 0, 0.15) 0 0 32px; }
.pricing_plan .plan_title { padding: 30px; }
.pricing_plan .plan_title h3 { font-size: 2.2em; font-weight: 900; margin: 0; padding: 0; position: relative; }
.pricing_plan .plan_title p { margin: 0; }
.pricing_plan .the_price { padding: 10px 30px; font-size: 30px; font-weight: 800; }
.pricing_plan .the_price small { font-size: 14px; margin-left: 6px; font-weight: 400; }
.pricing_plan .the_offerings { padding: 30px; line-height: 2em; }
@media (max-width: 767px) {
  .pricing_plan { max-width: 360px; margin: 0 auto 20px !important; }
  .pricing_plan h3 { font-size: 1.5em; }
}

.light_section,
.main .light_section {
  background-color: #e5e5e5;
  border-color: #e5e5e5;
  color: #323232;
}
.secondary_section,
.main .secondary_section {
  background-color: var(--color-active);
  border-color: var(--color-active);
  color: #fff;
}
.secondary_section a,
.secondary_section a:hover { color: #fff; }
.transparent,
.transparent_film { background-color: transparent !important; }
.transparent_film > * { position: relative; }
.transparent_film::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(247, 247, 247, 0.3);
}
.secondary_section.transparent_film::before { background-color: rgba(62, 179, 235, 0.3); }

/* Rundes Foto mit leichtem Schatten (vc_box_shadow_circle) */
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle,
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle img {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px;
}

/* Spitze nach unten am Sektionsende (".sep_angled_positive_bottom") */
.separator_bottom > .separator_bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background-color: inherit;
  border-color: inherit;
}
.sep_angled_positive_bottom .separator_bottom::before,
.sep_angled_positive_bottom .separator_bottom::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: inherit;
  border-width: 32px 0 0 50vw;
  position: absolute;
  z-index: 9;
  bottom: -31px;
  border-left-color: transparent;
  border-right-color: transparent;
}
.sep_angled_positive_bottom .separator_bottom::before { right: 49.8%; }
.sep_angled_positive_bottom .separator_bottom::after { left: 50%; transform: rotateY(180deg); }

/* Überschriften erben die Textfarbe ihres Bereichs (Bootstrap: color inherit) */
.main h1, .main h2, .main h3, .main h4, .main h5, .main h6 { color: inherit; }

.wpb_single_image.vc_align_left { text-align: left; }
.wpb_single_image.vc_align_right { text-align: right; }

/* Kopfbereich mit Karte (".head_panel" + ".map" im Theme). Live ist die Google-
   Karte mangels API-Schlüssel defekt; hier eine funktionierende Einbettung in
   exakt derselben Größe. */
.head_panel { position: relative; }
.map { position: relative; height: 480px !important; background: #e5e3df; }
@media (max-width: 991px) { .map { height: 280px !important; } }
@media (max-width: 767px) { .map { height: 180px !important; } }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.head_panel .hgroup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.head_panel .hgroup .title { position: relative; }
.head_panel h1 { font-size: 39px; }
@media (max-width: 991px) { .head_panel h1 { font-size: 36px; } }
@media (max-width: 767px) { .head_panel h1 { font-size: 32px; } }
.head_panel .hgroup .title h1,
.head_panel .hgroup .title.transparent_film h1 {
  font-weight: normal;
  line-height: 1.1;
  margin: 0;
  padding: 26px 0 20px;
}
.head_panel .hgroup .subtitle { position: relative; z-index: 1; padding: 10px 0; }
.head_panel .hgroup .subtitle p { font-size: 18px; margin: 0; line-height: 1.1em; }
.skincolored_section.transparent_film::before { background-color: rgba(230, 143, 39, 0.3); }
.head_panel .transparent_film::before { pointer-events: none; }

/* Kontaktdaten im Inhalt (".pl_about_us_widget" ohne Footer-Sonderregeln) */
.pl_about_us_widget p { margin-bottom: 21px; }
/* line-height: 0 gleicht den Quirks-Mode der Live-Seite aus (angehobene Zeile
   vergrößert dort den Zeilenabstand nicht) */
.pl_about_us_widget p span { display: inline; margin: 0 0 0 3px; vertical-align: 15%; line-height: 0; }
.pl_about_us_widget p span a,
.pl_about_us_widget p span a:hover { color: var(--color-link); }
.pl_about_us_widget p.contact_detail { margin: 0; line-height: 1.1em; }
.pl_about_us_widget p.social { margin: 5px 0; }

/* Abstands-Ausgleiche zwischen WPBakery-Elementen (style-4f384125a2.css) */
.wpb_text_column .wpb_wrapper h2 { margin-top: 0; }
.wpb_content_element + .vc_separator { position: relative; margin-top: -5px; }
.vc_separator + .wpb_content_element { position: relative; margin-top: -7px; }
.vc_separator + .wpb_text_column { position: relative; margin-top: -12px; }
.wpb_text_column + .vc_separator { position: relative; margin-top: -11px; }

/* 404-Seite: Fotokopf mit diagonalem Titelreiter (HealthFlex ".full_width_photo") */
.full_width_photo {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 380px;
  width: 100%;
}
@media (max-width: 991px) { .full_width_photo { min-height: 280px; } }
@media (max-width: 767px) { .full_width_photo { min-height: 180px; } }
.head_panel .hgroup .title.diagonal-bgcolor-trans {
  margin: 30px 0 0;
  background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 15%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 1600px) {
  .head_panel .hgroup .title.diagonal-bgcolor-trans {
    background: linear-gradient(to right, #e5e5e5 25%, #e5e5e5 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (min-width: 2250px) {
  .head_panel .hgroup .title.diagonal-bgcolor-trans {
    background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 33%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 0) 100%);
  }
}
.head_panel .hgroup .title.diagonal-bgcolor-trans h1 {
  padding: 19px 30px 0 0;
  display: inline-block;
  position: relative;
  background-color: #e5e5e5;
  color: #323232;
  min-width: 200px;
  z-index: 2;
}
.head_panel .hgroup .title.diagonal-bgcolor-trans h1::after {
  background: linear-gradient(to right top, #e5e5e5 0%, #e5e5e5 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
  content: "";
  width: 72px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -72px;
}
.head_panel .hgroup .subtitle.body-bg_section { background: #e5e5e5; color: #323232; }
@media (min-width: 480px) {
  .head_panel .hgroup .subtitle.body-bg_section::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #e5e5e5 transparent;
    border-width: 64px 0 0 100vw;
    bottom: -63px;
    left: 0;
    position: absolute;
    z-index: 9;
    transform: rotateY(180deg);
  }
}
.sidebar_off { padding-top: 64px !important; }
.centered { text-align: center !important; }
.section_header.elegant h2 { font-size: 39px; font-weight: 500; margin: 0 0 8px; }
.section_header.elegant p { font-weight: 300; letter-spacing: 1px; text-transform: uppercase; line-height: 1em; }
.section_header.elegant h2 + p { font-size: 16px; }
.form-control {
  display: block;
  width: 100%;
  font-family: inherit;
  background-color: var(--color-bg-alt);
  border: 1px solid #ddd;
  border-radius: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  padding: 7px 22px 6px;
  appearance: none;
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset, rgba(102, 175, 233, 0.6) 0 0 8px;
}
@media (min-width: 992px) { .col-md-offset-2 { margin-left: 16.66666667%; } }
button.btn { font-family: inherit; cursor: pointer; }
/* Quirks-Mode der Live-Seite gibt Formularen 1em Abstand nach unten */
.search_form form { margin: 0 0 1em; }