/* -------------------- Allgemein BEGINN -------------------- */

body {
  background-color: var(--bg-body);
  color: var(--color-text);
  font-size: 18px;
  font-family: futura-pt, sans-serif; /*Für Fließtext immer die Futura PT nehmen*/
  font-weight: 400;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
  font-family: leander-script-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: leander-script-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}
h1.underline, h2.underline {
  padding: 30px 0 8px;
  position: relative;
}
h1.underline:after,h2.underline:after {
  content: "";
  position: absolute;
  left: 72px;
  bottom: 0;
  width: 150px;
  height: 10px;
  z-index: 0;
  transform: skew(-25deg) translateX(-50%);
  background: linear-gradient(45deg, #fed061 0%, #d7ab59 25%, #91642e 50%, #c38d3a 75%, #754a27 100%);
  background-size: 400% 400%;
  animation: gradient-bg 6s ease infinite;
  border-radius: 50px 0px 50px 50px;
}
@keyframes gradient-bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
} 
.fs-normal {
  font-family: futura-pt, sans-serif;
  font-weight: 300;
  font-style: italic;
}
a {
  color: #c38d3a;
  text-decoration: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
a:hover {
  color: #91642e;
}
.shadow-bottom {
  height: 280px;
  position:relative;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow:0 10px 10px rgba(0, 0, 0, 0.5);
}
.shadow-bottom:after {
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
  box-shadow:0 0 40px rgba(0,0,0,0.8);
  bottom:0px;
  left:10%;
  right:10%;
  width:80%;
  height:50%;
  -moz-border-radius:100%;
  border-radius:100%;
}
@media (min-width: 992px) {
.shadow-bottom {
  height: 600px;
  position:relative;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow:0 10px 10px rgba(0, 0, 0, 0.5);
}
.shadow-bottom:after {
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
  box-shadow:0 0 40px rgba(0,0,0,0.8);
  bottom:0px;
  left:10%;
  right:10%;
  width:80%;
  height:50%;
  -moz-border-radius:100%;
  border-radius:100%;
}
}
.margin-top {
  margin-top: 0px;
}
.margin-top2 {
  margin-top: 0px;
}
.margin-y {
  margin: 0px;
}
.padding-bottom {
  padding-bottom: 0px;
}
@media (min-width: 992px) {
  .margin-top {
    margin-top: 150px;
  }
  .margin-top2 {
    margin-top: 150px;
  }
  .margin-y {
    margin: 150px 0px;
  }
  .padding-bottom {
    padding-bottom: 150px !important;
  }
}
.table > :not(caption) > * > * {
  padding: 1rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 0px;
  color: var(--color-text);
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.flip {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
img {
  filter: var(--img-filter);
}
img[src$=".svg"], img[src$=".icon.svg"] {
  filter: none;
}
.mapsiframe {
  border: 4px solid #fff;
  width: 100%;
  filter: var(--mapsiframe-filter);
}
.icon-footer {
  font-size: 2.7em;
  padding: 0.2em 0em;
  width: 1.2em;
}
.quicklinks-icon {
  justify-content: center;
}
@media (min-width: 992px) {
  .quicklinks-icon {
    justify-content: flex-start;
  }
}

/* -------------------- Allgemein ENDE -------------------- */



/* -------------------- Color BEGINN -------------------- */

.color-01 {
  color: #c38d3a; /*gold mittel*/
}
.color-02 {
  color: #91642e; /*gold dunkel*/
}
.color-03 {
  color: #d7ab59; /*gold hell*/
}
.color-04 {
  color: #000; /*schwarz*/
}
.color-05 {
  color: #fff; /*weiß*/
}
.color-06 {
  background-image: linear-gradient(45deg, #fed061 0%, #d7ab59 25%, #91642e 50%, #c38d3a 75%, #754a27 100%); /*Verlauf gold*/
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-color-01 {
  background-color: #c38d3a; /*gold mittel*/
}
.bg-color-02 {
  background-color: #91642e; /*gold dunkel*/
}
.bg-color-03 {
  background-color: #d7ab59; /*gold hell*/
}
.bg-color-04 {
  background-color: #000; /*schwarz*/
}
.bg-color-05 {
  background-color: #fff; /*weiß*/
}
.bg-color-06 {
  background-image: linear-gradient(45deg, #fed061 0%, #d7ab59 25%, #91642e 50%, #c38d3a 75%, #754a27 100%); /*Verlauf gold*/
}
.bg-color-07 {
  background-color: rgba(0,0,0,0.05); /*schwarz 0.05%*/
}
.bg-color-10 {
  background: var(--bg-preview1-mobile);
}
.bg-color-11 {
  background: var(--bg-preview2-mobile);
}
@media (min-width: 1200px) {
  .bg-color-10 {
    background: var(--bg-preview1);
  }
  .bg-color-11 {
    background: var(--bg-preview2);
  }
}

/* -------------------- Color ENDE -------------------- */


/* -------------------- Control Center Barrierefreiheit ANFANG -------------------- */
.button-control-center {
  position: fixed;
  bottom: 1.2em;
  left: 1.2em;
  cursor: pointer;
  z-index: 1998;
}
@media (max-width: 991px) {
	.button-control-center {
		bottom: 0.8em;
		left: 0.8em;
	}
}
.button-control-center svg {
	border: 3px solid #fff;
	border-radius: 2em;
	width: 1.5em;
	height: 1.5em;
	background: #fff;
	color: var(--color-akzent);
	outline: 3px solid #000;
	margin: 3px;
}
.access-panel {
	position: fixed;
	bottom: 5.6em;
	left: 1.2em;
	width: 350px;
	background: var(--bg-access-panel);
	border-radius: 0.2em;
	box-shadow: var(--access-panel-bs);
	z-index: 9980;
}
.access-panel-headline {
	background: #3b3b3b;
	border-radius: 0.2em 0.2em 0em 0em;
}
.panel-button {
	background: var(--bg-panel-button);
	border-radius: 0.2em;
	/*cursor: pointer;*/
	padding: 1em 0em;
	width: 100%;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.panel-button:hover {
	background: #c7c7c7;
}
.access-panel-close-button {
	background: #fff;
	color: #0c1520;
	border-radius: 0.2em;
	padding: 0.2em 0.5em;
}
.access-panel-close-button:hover {
	background: #E4E4E4;
	color: #0c1520;
}
.access-panel-auswahl span {
	font-size: 0.8em;
	color: var(--color-text);
}
.access-panel-auswahl svg {
	width: 1.4em;
	height: 1.4em;
	color: var(--color-text);
}
.icon-active {
  display: none;
}

/* Start Style Bedienhilfen */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9990;
  backdrop-filter: none;
}
body.font-large {
	font-size: 1.3em !important;
}
body.line-spacing {
	line-height: 1.8 !important;
}
body.underline-links a {
	text-decoration: underline !important;
}
/* Standard-Cursor für alle Elemente */
body.cursor-big * {
  cursor: var(--cursor-color) 10 0, auto;
}
body.cursor-big *[style*="position:fixed"],
body.cursor-big *[style*="position: fixed"],
body.cursor-big .fixed {
  cursor: var(--cursor-color) 10 0, auto;
}
/* Cursor für klickbare Elemente */
body.cursor-big a,
body.cursor-big a *,

body.cursor-big button,
body.cursor-big button *,

body.cursor-big [role="button"],
body.cursor-big [role="button"] *,

body.cursor-big label,
body.cursor-big label * {
  cursor: var(--cursor-pointer) 20 0, pointer;
}
body.no-images img {
	opacity: 0 !important;
}
@media (max-width: 991px) {
	body.no-images img {
		display: none;
	}
}
body.no-images * {
	background-image: none !important;
}
#readline {
  position: fixed;
  top: 0;
  height: 2px;
  width: 100vw;
  background: var(--color-readline);
  z-index: 999999;
  pointer-events: none;
  transition: top 0.1s linear;
  display: none;
}
body.readline #readline {
	display: block;
}
/* Tooltip für Icon */
.accessicon-tooltip {
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	background-color: var(--access-icon-tooltip-color);
	color: var(--access-icon-tooltip-text);
	text-align: center;
	border-radius: 5px;
	padding: 0.6em 1.2em;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 2000;
	margin-left: 1em;
	font-size: 0.88em;
	width: 180px;
}
.accessicon-tooltip::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%;
	border-width: 8px;
	border-style: solid;
	border-color: transparent var(--access-icon-tooltip-color) transparent transparent;
	transform: translateY(-50%);
}
.button-control-center:hover .accessicon-tooltip {
	visibility: visible;
	opacity: 1;
}
/* Ende Style Bedienhilfen */
/* --------------------- Control Center Barrierefreiheit ENDE --------------------- */


/* -------------------- Background IMG BEGINN -------------------- */

.bg-logo-icon {
  background-image: var(--bg-logo-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
}
.bg-content {
  background-image: var(--bg-content);
  background-size: cover;
  background-position: top;
}
.bg-dentallabor {
  background-image: var(--bg-dental);
  background-size: cover;
  background-position: center;
}
.bg-kostenvoranschlag {
  background-image: var(--bg-kosten);
  background-size: cover;
  background-position: center;
}
.bg-kontakt {
  background-image: var(--bg-kontakt);
  background-size: cover;
  background-position: center;
}
.bg-footer {
  background-image: var(--bg-footer);
  background-size: cover;
  background-position: bottom;
}
.bg-footer-end {
  background-image: url("");
  background-size: cover;
}

/* -------------------- Background IMG ENDE -------------------- */



/* -------------------- Parallax BEGINN -------------------- */

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* -------------------- Parallax ENDE -------------------- */



/* -------------------- Border BEGINN -------------------- */

.border-top {
  border-top: 5px solid #000 !important;
}
.border-bottom {
  border-bottom: 5px solid #000 !important;
}
.border-left {
  border-left: 5px solid #000 !important;
}
.border-right {
  border-right: 5px solid #000 !important;
}

/* -------------------- Border ENDE -------------------- */



/* -------------------- Scroll Top BEGINN -------------------- */

.scroll-top {
  display: none !important;
  color: #fff;
  font-weight: bold;
  background-color: rgba(43, 43, 43, 0.60);
  right: 35px;
  bottom: 4%;
  position: fixed;
  transition: all .35s;
  box-shadow: 1px 0px 2px #333;
  font-size: 0.7rem;
  z-index: 9;
}
.scroll-top:hover {
  color: #1D1D1B;
  text-decoration: none;
}
@media (min-width: 992px) {
  .scroll-top {
    display: block !important;
  }
}

/* -------------------- Scroll Top ENDE -------------------- */



/* -------------------- Top Info BEGINN -------------------- */

.top-info {
  color: var(--color-text);
}
.wrappertinfo {
  display: inline-flex;
  margin: 0.5em 0em 0.5em 0em;
}
.wrapinner {
  display: inline-flex;
  font-size: 0.8em;
  text-align: start;
  color: var(--color-text);
}
.wrapinner a {
  color: var(--color-text);
}
.wrapinner a:hover {
  color: #d7ab59;
}
.wrapout {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.5em;
}
.tinfoicon {
  display: inline-flex;
  align-items: center;
}
.icon {
  font-size: 3em;
  width: 1em;
}
@media (min-width: 992px) {
  .wrappertinfo {
    display: inline-flex;
  }
  .wrapinner {
    display: inline-flex;
    font-size: 1em;
  }
  .wrapout {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.5em;
  }
  .tinfoicon {
    display: inline-flex;
    align-items: center;
  }
  .icon {
    font-size: 4em;
  }
}
.tinfo {
  display: flex;
  place-content: center space-around;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 992px) {
  .tinfo {
    display: flex;
    flex-direction: row;
    place-content: center space-evenly;
    align-items: center;
    justify-content: flex-start;
  }
}

/* -------------------- Top Info ENDE -------------------- */



/* -------------------- hr style BEGINN -------------------- */

.hr-style {
  background-image: url(../images/border.svg);
  background-size: contain;
  width: 100%;
  height: 10px !important;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  opacity: 1;
}

/* -------------------- hr style ENDE -------------------- */



/* -------------------- Öffnungszeiten Tabelle BEGINN -------------------- */

.table {
  border-color: #989898;
}
.table .table {
  background-color: transparent;
  color: var(--color-text);
}
.table-success, .table-success > th, .table-success > td {
  background-color: #c38d3a;
  color: var(--color-text);
  font-weight: 400;
}
.table-sm > :not(caption) > * > * {
  padding: 0.25rem 1rem;
}

/* -------------------- Öffnungszeiten Tabelle ENDE -------------------- */



/* -------------------- Datenschutz Button BEGINN -------------------- */

.btn-success {
  color: #000;
  background-image: linear-gradient(45deg, #c38d3a 0%, #c38d3a 25%, #c38d3a 50%, #c38d3a 75%, #c38d3a 100%);
  border-color: #fff;
}
.btn-success:hover {
  color: #c38d3a;
  background-image: linear-gradient(45deg, #000 0%, #000 25%, #000 50%, #000 75%, #000 100%);
  border-color: #fff;
}
.btn-check:focus + .btn-success, .btn-success:focus {
  color: #c38d3a;
  background-image: linear-gradient(45deg, #000 0%, #000 25%, #000 50%, #000 75%, #000 100%) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 .25rem rgba(176,158,128,0.50) !important;
}
.btn-check:active + .btn-success, .btn-check:checked + .btn-success, .btn-success.active, .btn-success:active, .show > .btn-success.dropdown-toggle {
  color: #c38d3a;
  background-image: linear-gradient(45deg, #000 0%, #000 25%, #000 50%, #000 75%, #000 100%);
  border-color: #fff;
}
.btn-check:active + .btn-success:focus, .btn-check:checked + .btn-success:focus, .btn-success.active:focus, .btn-success:active:focus, .show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 .25rem rgba(176,158,128,0.50);
}
.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-image: linear-gradient(45deg, #000 0%, #000 25%, #000 50%, #000 75%, #000 100%);
  border-color: #fff;
}

/* -------------------- Datenschutz Button ENDE -------------------- */



/* -------------------- Effekte BEGINN -------------------- */

.tada {
  -webkit-animation: tada 4s ease-in;
  animation: tada 4s ease-in;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
.zoom {
  -webkit-animation: zoom 4s ease-in;
  animation: zoom 4s ease-in;
}
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* -------------------- Effekte ENDE -------------------- */



/* -------------------- Image Grid BEGINN -------------------- */ 

.first-img {
  width: 90%;
  height: auto;
  float: right;
  object-fit: cover;
}
.second-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.third-img {
  width: 100%;
  height: 650px;
  object-fit: cover;
}
@media (max-width: 992px) {
  .first-img {
    width: 100%;
  }
  .third-img {
    width: 100%;
    height: auto;
  }
} 

/* -------------------- Image Grid ENDE -------------------- */ 



/* -------------------- Shake-it BEGINN -------------------- */

.shake-it1 {
  opacity: 1;
}
.shake-it1.active {
  opacity: 1;
}
.active.shake-it1 {
  color: #c38d3a;
  animation: shakeit1 4s ease;
  animation-delay: 1s;
}
@keyframes shakeit1 {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1.5) rotate(-5deg);
  }
  25% {
    transform: scale(1.5) rotate(5deg);
  }
  30% {
    transform: scale(1.5) rotate(-3deg);
  }
  35% {
    transform: scale(1.5) rotate(2deg);
  }
  40% {
    transform: scale(1.5) rotate(0);
  }
}
.shake-it2 {
  opacity: 1;
}
.shake-it2.active {
  opacity: 1;
}
.active.shake-it2 {
  color: #c38d3a;
  animation: shakeit2 4s ease;
  animation-delay: 3s;
}
@keyframes shakeit2 {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1.5) rotate(-5deg);
  }
  25% {
    transform: scale(1.5) rotate(5deg);
  }
  30% {
    transform: scale(1.5) rotate(-3deg);
  }
  35% {
    transform: scale(1.5) rotate(2deg);
  }
  40% {
    transform: scale(1.5) rotate(0);
  }
}
.shake-it3 {
  opacity: 1;
}
.shake-it3.active {
  opacity: 1;
}
.active.shake-it3 {
  color: #c38d3a;
  animation: shakeit3 4s ease;
  animation-delay: 5s;
}
@keyframes shakeit3 {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1.5) rotate(-5deg);
  }
  25% {
    transform: scale(1.5) rotate(5deg);
  }
  30% {
    transform: scale(1.5) rotate(-3deg);
  }
  35% {
    transform: scale(1.5) rotate(2deg);
  }
  40% {
    transform: scale(1.5) rotate(0);
  }
}
.shake-it4 {
  opacity: 1;
}
.shake-it4.active {
  opacity: 1;
}
.active.shake-it4 {
  color: #c38d3a;
  animation: shakeit4 4s ease;
  animation-delay: 7s;
}
@keyframes shakeit4 {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.5);
  }
  20% {
    transform: scale(1.5) rotate(-5deg);
  }
  25% {
    transform: scale(1.5) rotate(5deg);
  }
  30% {
    transform: scale(1.5) rotate(-3deg);
  }
  35% {
    transform: scale(1.5) rotate(2deg);
  }
  40% {
    transform: scale(1.5) rotate(0);
  }
}

/* -------------------- Shake-it ENDE -------------------- */



/* -------------------- Flip-IMG Effekt BEGINN -------------------- */

.flip-boxes {
  justify-content: center;
}

.flip-box {
  display: flex;
  align-content: stretch;
  min-height: 300px;
  flex-wrap: wrap;
  position: relative;
  border: 10px solid transparent;
  padding: 0;
  border-top: 0;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.flip-box:hover .back {
  transform: rotateY(0deg);
  z-index: 10;
}
.flip-box:hover .front {
  transform: rotateY(180deg);
  z-index: -1;
}
.flip-box .back, .flip-box .front {
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #007555;
  display: flex;
  justify-content: center;
  align-content: center;
  flex: 0 0 100%;
  -webkit-transition: all 1s cubic-bezier(0.5, 1, 0.5, 1);
  transition: all 1s cubic-bezier(0.5, 1.3, 0.5, 1.3);
  transform-style: preserve-3d;
}
.flip-box .back {
  background-image: url("../images/partner/001--208270802.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
  transform: rotateY(-180deg);
}
.flip-box .back:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 15px solid transparent;
  border-bottom-color: white;
  border-left-color: white;
}
.flip-box .back a {
  color: #007555;
}
.flip-box .back a:hover {
  color: #ffbf00;
}
.flip-box .front {
  z-index: 10;
}
.flip-box .front .content {
  font-size: 1.5rem;
}
.flip-box .front:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border: 15px solid #cecece;
  border-bottom-color: white;
  border-right-color: white;
}
.flip-box .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}

/* -------------------- Flip-IMG Effekt ENDE -------------------- */



/* -------------------- Fraescenter BEGINN -------------------- */

#fraescenter img {
  max-width: 100%;
  height: 300px;
  object-fit: cover;
}
#fraescenter .card {
  position: relative;
  background: #000;
  width: 100%;
  height: auto;
  border-radius: 6px;
  padding: 2rem;
  color: #aaa;
  box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2), 0 0 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
#fraescenter .card-img-container {
  margin: -2rem -2rem 1rem -2rem;
}
#fraescenter .card-line {
  opacity: 0;
}
#fraescenter .card-line.active {
  opacity: 0;
}
#fraescenter .active.card-line {
  opacity: 0;
  animation: LinieFadeIn 0.8s 0.8s forwards ease-in;
}
#fraescenter .card-img {
  opacity: 0;
}
#fraescenter .card-img.active {
  opacity: 0;
}
#fraescenter .active.card-img {
  opacity: 0;
  animation: ImgFadeIn 0.8s 1.4s forwards;
}
#fraescenter .card-content {
  opacity: 0;
}
#fraescenter .card-content.active {
  opacity: 0;
}
#fraescenter .active.card-content {
  margin-top: 2rem;
  opacity: 0;
  animation: InhaltFadeIn 0.8s 1.6s forwards;
}
#fraescenter .card-svg {
  position: absolute;
  left: 0;
  top: 130px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
#fraescenter .card-svg {
  top: 0px;
}	
}
@media (min-width: 992px) and (max-width: 1199.98px) {
#fraescenter .card-svg {
  top: 180px;
}
}
@keyframes LinieFadeIn {
  0% {
    opacity: 0;
    d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
    stroke: #fff;
  }
  50% {
    opacity: 1;
    d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
    stroke: #d7ab59;
  }
  100% {
    opacity: 1;
    d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
    stroke: #c38d3a;
  }
}
@keyframes InhaltFadeIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes ImgFadeIn {
  0% {
    transform: translate(-0.5rem, -0.5rem) scale(1.05);
    opacity: 0;
    filter: blur(2px);
  }
  50% {
    opacity: 1;
    filter: blur(2px);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* -------------------- Fraescenter ENDE -------------------- */



/* -------------------- Inviewport img BEGINN -------------------- */

[data-inviewport] img {
	width: 100%;
	height: 600px;
	object-fit: contain;
	top: 0;
	left: 0;
	opacity: 1;
}
[data-inviewport="zoomout1"] { 
  transition: all 10s ease;
  transform: scale(1.3);
}
[data-inviewport="zoomout1"].is-inViewport { 
  transform: scale(1);
}
[data-inviewport="zoomout"] { 
  transition: all 10s ease;
  transform: scale(0.5);
}
[data-inviewport="zoomout"].is-inViewport { 
  transform: scale(1);
}
.container-inviewport {
	padding: 0;
	overflow: hidden;
	height: 600px;
}

/* -------------------- Inviewport img ENDE -------------------- */



/* -------------------- Social Media BEGINN -------------------- */

.effect:nth-child(2) {
  margin-top: 50px;
}
.effect .buttons {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.effect a:last-child {
  margin-right: 0px;
}
.effect a {
  text-decoration: none !important;
  color: #fff;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-right: 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
}
.effect a i {
  position: relative;
  z-index: 3;
}
.effect a.fb {
  background-color: #3b5998;
}
.effect a.insta {
  background: linear-gradient(35deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}
.effect a.linked {
  background-color: #0a66c2;
}
.effect a.tik {
  background-color: #000;
}
.effect.social-media a {
  transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s;
}
.effect.social-media a i {
  transition: transform 0.2s linear 0s;
}
.effect.social-media a:hover {
  transform: rotate(-90deg);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  color: #fff;
}
.effect.social-media a:hover svg {
  transform: rotate(90deg) !important;
}

/* -------------------- Social Media ENDE -------------------- */



/* -------------------- Effekte BEGINN -------------------- */

.tada1 {
  -webkit-animation: tada1 2s ease;
  animation: tada1 2s ease;
  animation-delay: 2s;
}
@-webkit-keyframes tada1 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada1 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.tada2 {
  -webkit-animation: tada2 2s ease;
  animation: tada2 2s ease;
  animation-delay: 4s;
}
@-webkit-keyframes tada2 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada2 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
.tada3 {
  -webkit-animation: tada1 2s ease;
  animation: tada1 2s ease;
  animation-delay: 6s;
}
@-webkit-keyframes tada1 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada1 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.tada4 {
  -webkit-animation: tada2 2s ease;
  animation: tada2 2s ease;
  animation-delay: 8s;
}
@-webkit-keyframes tada2 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada2 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
.tada5 {
  -webkit-animation: tada1 2s ease;
  animation: tada1 2s ease;
  animation-delay: 10s;
}
@-webkit-keyframes tada1 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada1 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.tada6 {
  -webkit-animation: tada2 2s ease;
  animation: tada2 2s ease;
  animation-delay: 12s;
}
@-webkit-keyframes tada2 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada2 {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

/* -------------------- Effekte ENDE -------------------- */


/* -------------------- List Vorteile BEGINN -------------------- */

.ollist {
  list-style: none;
  counter-reset: cardCount;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
}
.ollist li {
  counter-increment: cardCount;
  display: flex;
  color: var(--color-text);
  --arrowClipSize: 1.5rem;
  margin-top: 1rem;
}
.ollist li::before {
  content: counter(cardCount, decimal-leading-zero);
  background-image: linear-gradient(45deg, #fed061 0%, #d7ab59 25%, #91642e 50%, #c38d3a 75%, #754a27 100%); 
  color: var(--bg-body);
  font-size: 2em;
  font-weight: 700;
  transform: translateY(calc(-1 * 1rem));
  margin-right: calc(-1 * 1rem);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 0.5em;
}
.ollist li .content {
  background-color: var(--bg-body);
  --inlinePadding: 1em;
  --boxPadding: 0.5em;
  display: grid;
  padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize)) var(--boxPadding) calc(var(--inlinePadding) + 1rem);
  grid-template-areas:
    "icon title"
    "icon text";
  gap: 0.25em 1em;
  clip-path: polygon(0 0, calc(100% - var(--arrowClipSize)) 0, 100% 50%, calc(100% - var(--arrowClipSize)) 100%, calc(100% - var(--arrowClipSize)) calc(100% + 1rem), 0 calc(100% + 1rem));
  position: relative;
  min-width: 0rem;
}
@media (min-width: 992px) {
.ollist li .content {
  background-color: var(--bg-body);
  --inlinePadding: 1em;
  --boxPadding: 0.5em;
  display: grid;
  padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize)) var(--boxPadding) calc(var(--inlinePadding) + 1rem);
  grid-template-areas:
    "icon title"
    "icon text";
  gap: 0.25em 1em;
  clip-path: polygon(0 0, calc(100% - var(--arrowClipSize)) 0, 100% 50%, calc(100% - var(--arrowClipSize)) 100%, calc(100% - var(--arrowClipSize)) calc(100% + 1rem), 0 calc(100% + 1rem));
  position: relative;
}
}
.ollist li .content::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #808080;
  left: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: brightness(0.75);
}
.ollist li .content::after {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
  left: 0;
  top: 100%;
}
.ollist li .content .text {
  grid-area: text;
}


/* -------------------- List Vorteile BEGINN -------------------- */



/* -------------------- Anwendung BEGINN -------------------- */

.anwendung .container {
  width: 100%;
  height: 310px;
  background-color: var(--bg-anwendung);
  border-radius: 25px;
  text-align: center;
}

.anwendung .anwendung-btns .btn,
.anwendung .anwendung-btns .btn:before,
.anwendung .anwendung-btns .btn svg {
  transition: all 0.35s;
  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.anwendung .anwendung-btns .btn:before {
  top: 90%;
  left: -110%;
}
.anwendung .anwendung-btns .btn svg {
  transform: scale(0.8);
}
.anwendung .anwendung-btns .btn.icon:before {
  background-image: linear-gradient(45deg, #fed061 0%, #d7ab59 25%, #91642e 50%, #c38d3a 75%, #754a27 100%); 
}
.anwendung .anwendung-btns .btn.icon svg {
  color: linear-gradient(45deg, #fed061 0%, #d7ab59 25%, #91642e 50%, #c38d3a 75%, #754a27 100%); 
}
.anwendung:focus.anwendung-btns .btn:before ,
.anwendung:hover .anwendung-btns .btn:before {
  top: -10%;
  left: -10%;
}
.anwendung:focus .anwendung-btns .btn svg,
.anwendung:hover .anwendung-btns .btn svg {
  color: var(--color-review);
  transform: scale(1);
}
.anwendung .anwendung-btns {
  height: 90px;
  margin: auto;
  font-size: 0;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.anwendung .anwendung-btns .btn {
  display: inline-flex;
  background-color: var(--bg-body);
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;
}
.anwendung .anwendung-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  transform: rotate(10deg);
}
.anwendung .anwendung-btns .btn svg {
  font-size: 3rem;
  margin: auto;
}
.plus-effect svg {
  animation: puls 3s infinite;
  transition: 3s infinite;
  color: #80c41c;
}
@keyframes puls {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.btn-outline-primary {
    color: #2e58a6 !important;
    border-color: #2e58a6 !important;
}
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #2e58a6 !important;
}

/* -------------------- Anwendung ENDE -------------------- */

/* -------------------- Cookie Modal Styling ANFANG -------------------- */
.cookieModalBrandIcon {
	width: 60px;
	height: 60px;
	background: #ffffff;
	border-radius: 3em;
	padding: 0.6em;
	display: flex;
}
@media (max-width: 767px) {
	#cookieModal .modal-body {
		font-size: 0.72em;
	}
}
#cookieModal .modal-content {
	background-color: var(--bg-modal-content);
	color: var(--modal-content-text-color);
	border-radius: 0.5em;
}
#cookieModal .modal-header {
	background-color: var(--modal-header-bg);
	color: var(--modal-header-text-color);
}
#cookieModal .modal-footer {
	background-color: var(--modal-footer-bg);
}
#cookieModal a {
	color: var(--color-akzent);
	text-decoration: underline;
}
#cookieModal a:hover {
	opacity: 0.9;
}
/* Blur zum Modal Backdrop hinzufügen */
body:has(#cookieModal.show) .modal-backdrop {
	opacity: 1 !important;
	background-color: rgba(0,0,0,.35) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
#a11yOpenBtnInModal {
	height: fit-content;
	width: fit-content;
	padding: 0;
	margin: 0;
	border: none;
	background-color: transparent;
	font-size: 1.5em;
	color: #fff;
}
.consent-placeholder {
	background-color: var(--placeholder-background);
	padding: 1em;
	border: 1px solid #cfcfcf;
	border-radius: 0.2em;
}
.btn-custom-reject {
	background-color: #cdcdcd;
}
.btn-custom-reject:hover, .btn-custom-reject:focus {
	background-color: #ADADAD;
}
.btn-custom-accept {
	background-color: var(--color-btn-custom-accept-normal);
	color: #fff;
}
.btn-custom-accept:hover, .btn-custom-accept:focus {
	background-color: var(--color-btn-custom-accept-hover);
	color: #fff;
}
.consent-icons {
	background-color: var(--bg-consent-icons);
	border-radius: 0.2em;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.24);
}
.consent-icons svg {
	font-size: 1.6em;
}
.consent-icons p {
	font-size: 0.75em;
	margin: 0;
}
.icontrenner {
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ccc;
}

.abschnitt {
  scroll-margin-top: 300px!important;
}