@charset "UTF-8";

:root {

	--main-color:#ffc000;
	--main-color-light:#ffd75e;
  --main-color-extralight: #e4daf7;
	--bg-color:#fff;
  --body-bg:linear-gradient(to bottom left, #ad33ff, #1d66dc);
  --body-bg-uni:#8746ff;
	--bg-color-light:rgba(255, 255, 255,.6);
	--bg-color-dark:rgba(0, 0, 0,.2);
  --bg-contrast:#c07dff;
  --bg-contrast-light:#5c85ff;
  --bg-contrast-dark:#d5d9df;
	--hdbar-color:#5c33c277;
	--spacer-color:#5c33c244;
  --footer-color:#4c3587;
  --gradient-loader:linear-gradient(130deg, #c9c9c9, #ffffff, #c9c9c9);

  --scrollbar1:#aeb2b8;
  --scrollbar2:#e1dcd9;
	--font-color:#fff;
	--titel-color:#111;
  --titel-bg:rgba(255, 255, 255, 1);
  --titel-box-hover:#fff;

	--png-invert:0;
	--png-invert-reverse:1;
  --color-opacity:1;
  --border-radius:8px;

  --toast-success:#00c520;
  --toast-error:#eb213c;
  --toast-note:#777979;

  --bg-community:#d6f4dc;
  --bg-wetter:#58aeff;

  --social-fb:#599afd;
  --social-fb-light:#d6edff;
  --social-wa:#34dd80;
  --social-wa-light:#c5ffca;
  --social-pt:#ff7696;
  --social-pt-light:#ffe6ec;
  --social-em:#efc743;
  --social-em-light:#fff2c8;


}

[data-theme="dark"] {

	--main-color:#ff863a;
	--main-color-light:#b16332;
  --main-color-extralight: #f7edda;
	--bg-color:#122232;
	--bg-color-light:rgba(22, 27, 34,.7);
	--bg-contrast:#0E1B28;
  --bg-contrast-light:#393d4d;
  --bg-contrast-dark:#4b5064;
	--hdbar-color:#122232;
	--header-bg:#1B2B3A;
  --gradient-loader:linear-gradient(130deg, #161b22, #2a2e36, #161b22);

  --scrollbar1:#45474e;
  --scrollbar2:#1B2B3A;
	--font-color:#ccc;
	--titel-color:#ddd;
  --titel-bg:#122232;
  --titel-box-hover:#1B2B3A;

  --social-fb:#0e3e69;
  --social-wa:#0b421b;
  --social-pt:#5c1a2a;
  --social-em:#392307;
  
	--png-invert:1;
	--png-invert-reverse:0;
  --color-opacity:.75;

}









/* Layout Basics */

html, body, button, input, textarea {
	font-family:Inter, Arial, sans-serif;
  font-weight:400;
	font-size:10px;
}
html {
	box-sizing:border-box;
	min-height:101%;
	max-width:100%;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
  cursor:default;
	overflow-x:hidden;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:inherit; }
::selection { background:var(--main-color-light); }

*[contenteditable] { cursor:text; }
*[contenteditable]:focus { background:var(--main-color-extralight);outline:4px solid var(--main-color-extralight); }
*[contenteditable]:hover { outline:4px solid var(--main-color-extralight); }

body {
  text-rendering:optimizelegibility;
	letter-spacing:0.056rem;
	color:var(--font-color);
	margin:0;
	padding:0;
	background:var(--body-bg);
  background-attachment: fixed;
	max-width:100%;
	overflow-x:hidden;
}
@media all and (max-width:640px) {
	body {
		margin-top:60px;
	}
	html {
    font-size:9.5px;
	}
}
article, details, footer, header, main, menu, nav, section {
	display:block;
  max-width:100%;
}
audio, video {
	display:inline-block;
}
audio:not([controls]) {
	display:none;
	height:0;
}
button, input {
	overflow:visible;
}
button, select {
	text-transform:none;
}
textarea {
	overflow:auto;
}
[type="checkbox"],
[type="radio"] {
	box-sizing:border-box;
	padding:0;
}
hr {
	box-sizing:content-box;
	height:0;
	overflow:visible;
}
[disabled],
.disabled {
  cursor:default;
  opacity:.75;
  pointer-events:none;
}
a {
	outline:0;
	text-decoration:none;
	color:var(--font-color);
}
a:hover, a:focus, a:active {
	outline-width:0;
	text-decoration:underline;
  text-underline-position:under;
  text-decoration-thickness:1px;
}
.txtlink {
	text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--main-color-light);
}
.txtlink:hover, .txtlink:focus {
	text-decoration:none;
  background-color:var(--main-color-light);
  outline:2px solid var(--main-color-light);
  border-radius:6px;
}
b {
	font-weight:700 !important;
}
p {
  margin:0;
  font-size:1.5rem;
}
form {
	display:inline;
}
img, svg, picture, video {
	vertical-align:middle;
	border-style:none;
  border:0;
}
svg:not(:root) {
	overflow:hidden;
}







/* Grid */

/* Artikel Frontseite */

.f1-grid { display:grid; gap:10px; grid-template-areas: "a1" "a2" "a3" "w" "k"; }
.f1 { grid-row: span 3; }

.f2-grid { display:grid; gap:10px; }
.f3-grid { display:grid; gap:10px; }

@media (min-width:640px) {
  .f1-grid { grid-template-columns: repeat(2,1fr); gap:20px; grid-template-areas: "a1 a1" "a2 a3" "w k"; }
  .f2-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
  .f3-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
}
@media (min-width:1000px) {
  .f1-grid { grid-template-columns: repeat(3,1fr); grid-template-areas: "a1 a1 k" "a1 a1 k" "a1 a1 k" "a1 a1 k" "a1 a1 k" "a1 a1 k" "a2 a3 w" "a2 a3 w" "a2 a3 w"; }
  .f2-grid { grid-template-columns: repeat(4,1fr); }
  .f3-grid { grid-template-columns: repeat(3,1fr); margin-top:-10px; }
  .span-sm { grid-row: span 2; }
  .span-lg { grid-row: span 4; }
  .span-xl { grid-row: span 5; }
}



/* Unterseiten */

.s2-grid { display:grid; }
@media (min-width:1000px) {
  .s2-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-bottom:20px; }
  .s2-lg { grid-column: span 2; }
}
.s2-grid.tbl { display:grid; grid-template-columns: repeat(2,1fr); gap:0px; }
.s2-grid.tbl div { padding:4px 6px; background:var(--bg-color); margin-top:10px; }
.s2-grid.tbl div:nth-child(odd) p { opacity:.7; }

.s3-grid { display:grid; grid-template-columns: repeat(1,1fr); gap:0px; margin-bottom:0px; }
  @media (min-width:1000px) {
    .s3-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:20px; }
    .s3-grid.fp { gap:40px; }
    .s3-lg { grid-column: span 2; }
}

.s4-grid { display:grid; grid-template-columns: repeat(1,1fr); gap:20px; margin-bottom:20px; }
  @media (min-width:1000px) {
    .s4-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-bottom:20px; }
    .s4-lg { grid-column: span 2; }
    .s4-xl { grid-column: span 3; }
}

.s5-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin:20px; }
  @media (min-width:1000px) {
    .s5-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:20px; margin:0 15px 20px 15px; }
    .s5-lg { grid-column: span 2; }
    .s5-xl { grid-column: span 3; }
}

.s7-grid { display:grid; grid-template-columns: repeat(7,1fr); gap:0; margin-bottom:10px; }
.s7-lg { grid-column: span 4; }
.s7-xl { grid-column: span 6; }


.mgrid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(30%,1fr));
  grid-auto-rows: 30px;
  margin-bottom:30px;
}
.mgrid.fp {
  display: grid;
  grid-template-columns:1fr;
  grid-gap: 20px;
  margin-bottom:20px;
}
@media all and (max-width:640px) {
    .mgrid {
        grid-template-columns:1fr;
        grid-gap: 20px;
        margin-bottom:20px;
    }
}




/* Layout Allgemein */



.ccbx {
  background:var(--bg-color);
  padding:12px;
  transition:all 0.4s;
}
.ccbx div .btoe,
.ccbx .gradient-load,
.ccbx .gradient-load img,
.ccbx center .flogo {
  transition:all 0.4s;
}
.ccbx div .btoe {
  transform-origin: bottom right;
}
.ccbx:hover {
  box-shadow:1px 6px 15px 1px rgba(0,0,0,0.15);
}
.ccbx:hover .gradient-load {
  scale:1.02;
  translate:0 -1px;
}
.ccbx:hover center .flogo {
  scale:1.4;
}
.ccbx:hover div .btoe {
  background:var(--bg-color) !important;
  color:var(--font-color);
  scale:1.06;
}
.ccbx:hover .gradient-load img {
  filter:brightness(110%);
}
.ccbx.nopd {
  margin:10px 0 !important;
}
@media all and (max-width:640px) {
  .ccbx {
    margin:0 10px;
  }
}


.nfbx {
  background:var(--bg-contrast);padding:25px 20px 30px 20px;margin-bottom:10px;font-size:1.7rem;transition:all 0.3s;
}
.nfbx.link:hover {
  text-decoration:none;background:var(--bg-contrast-dark);scale:1.04;
}
.nfbx span {
  display:block;font-size:2.2rem;font-weight:400;opacity:.5;margin-bottom:20px;
}
.nfbx span img {
  width:28px;height:28px;margin:-5px 5px 0 0;opacity:.9;filter:invert(var(--png-invert));
}

@media all and (min-width:640px) {
.addbtn {
  float:right;
}
}
@media all and (max-width:640px) {
.addbtn {
  display:block;
  width:100%;
  text-align: center;
  padding-top:10px;
  margin-bottom:-50px;
}
}

.cont {
  position:relative;
	margin:30px auto;
  padding:0 15px;
	min-width:300px;
	max-width:1200px;
  font-size:1.6rem;
	text-align:left;
}
.maincont {
  margin-top:100px;
}
.innercont {
  padding-top:10px;
}
.innercont.zt {
  margin-top:40px;
}
.innercont h1 {
  padding-bottom:20px;
  font-size:3rem;
  font-weight:500;
  text-align:center;
}
.innercont h1.inverse {
  color:#fff;
  opacity:0.9;
}
@media all and (max-width:640px) {
	.cont {
    margin:10px auto;
		padding:0 !important;
	}
  .innercont {
    margin-top:70px;
  }
  .innercont.zt {
    margin-top:40px;
  }
  .innercont.lmg {
    margin-top:20px;
  }
	#slider-mobile {
		margin:0 15px 0 15px !important;
	}
}

.innercont-menu a {
  padding:8px 9px 8px 5px;
  border-radius:6px;
}
.innercont-menu img {
  width:24px;
  height:24px;
  margin:-2px 5px 0 0;
  filter:invert(var(--png-invert));
}
.innercont-menu a:hover {
  background:rgba(125,125,125,.08);
}
.innercont-menu a.active {
  font-weight:700;
  background:rgba(125,125,125,.08);
}
.innermenu {
  display:grid;
}
@media all and (max-width:640px) {
  .innermenu {
    grid-template-columns: repeat(2,1fr);
  }
  .innercont-menu a {
    padding:6px 6px 6px 4px;
    font-size:1.2rem;
  }
  .innercont-menu img {
    width:20px;
    height:20px;
  }
}

.breadcrumbs {
  margin:0 0 20px 0;font-size:1.4rem;opacity:.7;
}
.breadcrumbs div {
  align-items:center;
  border-radius:6px;
  display:inline-block;
  font-size:1.4rem;
  max-width:100%;
  padding:5px 8px 3px 8px;
  height:26px;
  margin-bottom:6px;
  text-decoration:none;
  vertical-align:baseline;
  cursor:pointer;
  white-space: nowrap;
}
.breadcrumbs div a {
  text-decoration:none;
}
.breadcrumbs div:hover {
  background:rgba(200,200,200,.4);
}
.breadcrumbs div img {
  width:15px;height:15px;margin-top:-3px;filter:invert(var(--png-invert));opacity:.6;
}
.breadcrumbs span {
  opacity:.4;
}

.breadcrumbs.invert, .breadcrumbs.invert div a {
  color:#fff !important;
}
.breadcrumbs.invert div img {
  filter:invert(1);opacity:.8;
}









.form-steps {
  display: block;
  width: 100%;
  position: relative;
  margin: 40px 0;
}
.form-steps:after {
  content: "";
  display: table;
  clear: both;
}
.form-steps__item {
  padding: 0;
  position: relative;
  display: block;
  float: left;
  width: 25%;
  text-align: center;
}
.form-steps__item-content {
  display: inline-block;
}
.form-steps__item-icon {
  background: var(--bg-contrast-dark);
  color: #fff;
  display: block;
  border-radius: 100%;
  text-align: center;
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin: 0 auto 5px auto;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
}
.form-steps__item-text {
  font-size: 11px;
  color: var(--bg-contrast-dark);
  font-weight: 500;
}
.form-steps__item-line {
  display: inline-block;
  height: 3px;
  width: 100%;
  background: var(--bg-contrast-dark);
  position: absolute;
  left: -50%;
  top: 12px;
  z-index: 1;
}
.form-steps__item--active .form-steps__item-icon {
  background: var(--main-color);
  color: #fff;
}
.form-steps__item--active .form-steps__item-text {
  color: var(--main-color);
}
.form-steps__item--active .form-steps__item-line {
  background: linear-gradient(to left, var(--main-color) 30%, var(--toast-success) 70%);
}
.form-steps__item--completed .form-steps__item-text {
  color: var(--toast-success);
}
.form-steps__item--completed .form-steps__item-icon {
  background: var(--toast-success);
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkuMTIgNyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuMTIgMS4wNkw4LjA2IDAgMy4xOCA0Ljg4IDEuMDYgMi43NiAwIDMuODIgMy4xOCA3bDUuOTQtNS45NHoiLz48L3N2Zz4=);
  color: transparent;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  width: 25px;
  height: 25px;
  line-height: 25px;
}
.form-steps__item--completed .form-steps__item-line {
  background: var(--toast-success);
}


.rubtitel {
  display:block;
  font-size:2.2rem;
  font-weight:400;
  margin:50px 0 30px 0;
  text-align:center;
}
.rubtitel b {
  display:block;
  font-size:2.5rem;
  font-weight:400;
  margin:0 0 10px 0;
  text-align:center;
}

.subtitel {
display:block;
font-size:3.5rem;
font-weight:500;
margin:70px 0 30px 0;
text-align:center;
}

@media all and (max-width:640px) {
  .rubtitel {
    margin:80px 10px 30px 10px;
  }
}









.katbox {
  display:block;position:relative;background:#ffffff33;height:130px;border-radius:40px;text-align:center;overflow:hidden;
  transition: all 400ms ease-out;
}
.katbox img {
  height:50px;filter:invert(1);margin-top:14px;
  translate:8px 0;
  transition: all 500ms ease-out;
}
.katbox img:last-child {
  translate:0 0;
}
.katbox img.si {
  translate:-8px 0;
}
.katbox .kattitel {
  position:absolute;bottom:0;left:0;padding:5px 30px;width:100%;height:55px;border-radius:30px 30px 40px 40px;
  text-align:center;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  background:#00000011;
  transition: all 300ms ease-out;
}
.katbox .katanz {
  position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;
  text-align:center;font-weight:500;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  background:#00000022;opacity:.6;
  transition: all 400ms ease-out;
}

.katbox.k1 .kattitel {   background:rgba(135, 206, 235, 0.3); }
.katbox.k2 .kattitel {   background:rgba(210, 180, 140, 0.3); }
.katbox.k3 .kattitel {   background:rgba(216, 191, 216, 0.3); }
.katbox.k4 .kattitel {   background:rgba(169, 169, 169, 0.3); }
.katbox.k5 .kattitel {   background:rgba(144, 238, 144, 0.3); }
.katbox.k6 .kattitel {   background:rgba(255, 182, 193, 0.3); }
.katbox.k7 .kattitel {   background:rgba(175, 238, 238, 0.3); }
.katbox.k8 .kattitel {   background:rgba(173, 216, 230, 0.3); }
.katbox.k9 .kattitel {   background:rgba(240, 230, 140, 0.3); }
.katbox.k10 .kattitel {   background:rgba(255, 218, 185, 0.3); }
.katbox.k11 .kattitel {   background:rgba(255, 228, 181, 0.4); }
.katbox.k12 .kattitel {   background:rgba(255, 160, 122, 0.3); }

.katbox:hover {
  border-radius:54px;
  scale:1.1;
  background:#ffffff44;
  background:var(--bg-contrast-light);
  box-shadow: #d685ff44 0 0 30px;
}

.katbox:hover.k1, .quizkat.k1  {   background:rgba(135, 206, 235, 0.8); }
.katbox:hover.k2, .quizkat.k2 {   background:rgba(210, 180, 140, 0.8); }
.katbox:hover.k3, .quizkat.k3 {   background:rgba(216, 191, 216, 0.8); }
.katbox:hover.k4, .quizkat.k4 {   background:rgba(169, 169, 169, 0.8); }
.katbox:hover.k5, .quizkat.k5 {   background:rgba(144, 238, 144, 0.7); }
.katbox:hover.k6, .quizkat.k6 {   background:rgba(255, 182, 193, 0.8); }
.katbox:hover.k7, .quizkat.k7 {   background:rgba(175, 238, 238, 0.6); }
.katbox:hover.k8, .quizkat.k8 {   background:rgba(173, 216, 230, 0.8); }
.katbox:hover.k9, .quizkat.k9 {   background:rgba(240, 230, 140, 0.8); }
.katbox:hover.k10, .quizkat.k10 {   background:rgba(255, 218, 185, 0.8); }
.katbox:hover.k11, .quizkat.k11 {   background:rgba(255, 228, 181, 0.7); }
.katbox:hover.k12, .quizkat.k12 {   background:rgba(255, 160, 122, 0.8); }

.katbox:hover img {
  animation: navani 1s infinite;
}
.katbox:hover img.si {
  animation: navani 1s infinite 500ms;
}
.katbox:hover .kattitel {
  background:#00000000;
  bottom:8px;
  scale:1.1;
}
.katbox .fi, .katbox .si {
  border-radius:50%;padding:3px;
}
.katbox:hover .fi, .katbox:hover .si {
  background:#ff000044;border-radius:50%;
}
.katbox:hover img.fi {
  translate:4px 0;
}
.katbox:hover img.si {
  translate:-4px 0;
}


@media all and (max-width:640px) {
  .katbox {
    height:100px;border-radius:30px;
  }
  .katbox img {
    height:40px;margin-top:8px;
  }
  .katbox .kattitel {
    height:45px;
    font-size:1.4rem;
    border-radius:30px;
  }
}





.quizbox {
  display:block;position:relative;height:250px;overflow:hidden;
  transition: all 400ms ease-out;
}

.quizbox img {
  object-fit:cover;border-radius:22px;margin:15px;width:calc(100% - 30px);height:calc(100% - 30px);
  transition: all 300ms ease-out;
}

.quizbox .quiztitel {
  position:absolute;width:calc(100% - 10px);bottom:20px;left:0;padding:15px 20px;color:#333;font-size:1.6rem;font-weight:500;z-index:1;
  background:var(--bg-color-light);backdrop-filter:blur(6px);text-shadow: #fff 0 0 15px;text-align:center;
  border-radius:20px;margin:5px;line-height:2.1rem;
  transition: all 400ms ease-out;
}
.quizbox .quiztitel span {
  display:inline-block;font-size:1.8rem;font-weight:700;margin-bottom:3px;
}
.quizbox .quiztitel:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(109, 165, 255, 0.55), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-size: 400% 100%;
  border-radius:20px;
  transition: all 1000ms ease;
}

.quizbox .quizfragen {
  position:absolute;top:0;right:0;border-radius:30px;padding:6px 8px 11px 8px;margin:20px;font-size:2.2rem;font-weight:500;background:#00000022;backdrop-filter:blur(10px);text-align:center;
  transition: all 400ms ease-out;
}
.quizbox .quizfragen span {
  display:block;font-size:1.1rem;font-weight:400;margin-top:-2px;
}

.quizbox .quizgespielt {
  display:none;
  position:absolute;top:0;left:30px;border-radius:30px;padding:6px 12px 6px 16px;margin:20px;font-size:1.2rem;font-weight:500;background:#00c520bb;backdrop-filter:blur(10px);text-align:left;line-height:1.4rem;
  transition: all 400ms ease-out;
}
.quizbox .quizgespielt b {
  display:block;font-weight:400 !important;font-size:1.1rem;
}
.quizbox .quizgespielt img {
  position:absolute;top:0;left:-30px;width:40px;height:40px;margin:0;
  background:#00c520;backdrop-filter:blur(10px);border-radius:30px;
}

.quizbox .quizstarten {
  position:absolute;bottom:-40px;
  background:var(--main-color);color:#222;padding:7px 24px 8px 24px;margin:4px;border-radius:20px;font-size:1.35rem;font-weight:500;
  left:50%;translate:-50% 0;
  transition: all 600ms ease-out;
}
.quizbox .quizstarten img {
  width:10px;height:10px;margin:-2px 5px 0 0;
}


.quizbox:hover .quiztitel:after {
  background-position: 100% 0;
}
.quizbox:hover img {
  scale:1.04;filter:brightness(110%) saturate(120%);border-radius:30px;
}
.quizbox:hover .quiztitel {
  background:var(--bg-color);
  text-shadow:none;
  translate:0 -32px;
  scale:.95;
}
.quizbox:hover .quizfragen {
  translate:-3px 5px;
}
.quizbox:hover .quizkat {
  translate:10px 10px;
  scale:1.7;
}

.quizbox:hover .quizstarten {
  bottom:14px;
  animation: btnani 2s infinite;
}
@keyframes btnani {
  0% { scale:1; }
  50% { scale:1.1; }
  100% { scale:1; }
}



@media all and (max-width:640px) {
  .quizbox {
    height:230px;
    margin:2px 5px;
  }
}




.subtxt {
  max-width:650px;margin:0 auto 50px auto;text-align:center;line-height:2.3rem;opacity:.7;font-size:1.7rem;
}
.subtxt.sm {
  max-width:650px;margin:0 auto 20px auto;text-align:center;line-height:2.3rem;opacity:.7;font-size:1.6rem;
  background:#00000022;padding:10px 20px 30px 20px;border-radius:20px;
}

@media all and (max-width:640px) {
  .subtxt {
    margin:0 15px 30px 15px;
  }
}


.introtxt {
  padding-right:50px;padding-top:35px;line-height:2.3rem;margin:15px;
}
.introtxt b {
  display:block;font-size:2.2rem;margin-bottom:5px;font-weight:400 !important;
  border-radius:24px;
}
.introtxt span {
  display:block;font-size:1.7rem;margin-bottom:25px;opacity:.7;
  padding:5px 0;
}

.introimg {
  text-align:center;
  background-image: url('../../images/introbg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius:40px;
  margin:15px;
}
.introimg img {
  width:250px;margin:60px 0 40px 0;animation: inimgani 5s infinite;
  filter:drop-shadow(0 0 8px #2a1854);
}
@keyframes inimgani {
  0% { scale:1; }
  50% { scale:1.2;rotate:-8deg;  }
  100% { scale:1; }
}


@media all and (max-width:640px) {
  .introtxt {
    padding:0 20px;
    margin-top:0px;
  }
  .introimg {
    border-radius:0;
    margin:-20px 0 0 0;
  }
}






.glow {
  position: relative ;
  z-index: 1;
}

.glow:before {
  position: absolute;
  content: "";
  top: -3px;
  left: -10px;
  height: calc(100% + 6px);
  width: calc(100% + 20px);
  border-radius: 40%;
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  background: linear-gradient(
    45deg,
    #ff5656,
    #ff8f34,
    #f7f200,
    #48ff00,
    #00ffd5,
    #1c86ff,
    #ba53ff,
    #ff41d6,
    #ff3a3a
  );
  background-size: 400%;
  transition: opacity 0.3s ease-in-out;
  animation: btnanimate 8s linear infinite;
}

.glow:hover:before {
  opacity: 0.3;
}

.glow:active {
  background: none;
}

.glow:active:before {
  filter: blur(0px);
}

@keyframes btnanimate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}








#quiz {
  min-height:700px;
  border-radius:50px;
}





#quiz-container, #ergebnis-container {
  text-align:center;
}
.antwort-btn {
  display: block;
  margin: 10px 0;
}
#naechste-btn {
  margin: 20px 0 40px;
}




#quiz-container #aufloesung {
  color:#a2c2e4;
}
#quiz-container #aufloesung span {
  display:block;
  text-align:center;
  padding:30px 0;
  margin:20px auto;
  width:300px;
  font-size:1.8rem;
  font-weight:500;
  border-radius:50px;
  animation: btnani 2s infinite;
}
.antwort_ja {
  background:#00c520;
  color:#fff;
}
.antwort_nein {
  background:#f76047;
  color:#fff;
}
.quiz_start {
  background:var(--bg-contrast-light);
  color:#fff;
}
#quiz-container #aufloesung img {
  width:60px;
  height:60px;
  margin-top:-15px;
  animation: btnani 1s infinite;
}

.richtigeantwort {
  display:inline-block;
  max-width:500px;
  margin:3px auto 0 auto;
  padding:4px 20px;
  border-radius:20px;
  background:#ffffff22;
  color:#fff;
}


.bisherrichtig_txt {
  display:inline-block;
  font-size:1.3rem;
  color:#a2c2e4;
  margin-bottom:10px;
  animation: btnani 2s infinite;
}



#quiz-container #frage .fragecounter {
  display:inline-block;
  font-size:1.3rem;
  color:#a2c2e4;
  margin-bottom:15px;
}
#quiz-container #frage .fragecounter b {
  display:inline-block;
  text-align:center;
  background:#ffffff22;
  color:#fff;
  padding:1px;
  width:18px;
  margin:0 3px;
  border-radius:50%;
  max-width:500px;
  scale:1.4;
}
#quiz-container #frage h2 {
  display:block;
  text-align:center;
  max-width:700px;
  font-size:2.2rem;
  font-weight:500;
  margin:0 auto 30px auto;
  padding:10px 20px 20px 20px;
  border-radius:20px;
  background:#ffffff22;
}

.quiz_antworten {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width:500px;
  width: 100%;
  margin: auto;
}
.quiz_antworten button {
  all:unset;
  position:relative;
  display:block;
  cursor:pointer;
  text-align:left;
  font-size:1.9rem;
  padding:8px 30px 8px 44px;
  margin-top:15px;
  background:#ffffff77;
  background:#ffdb6e;
  color:#222;
  border:none;
  border-radius:20px;
  transition: all 400ms ease-out;
}
.quiz_antworten button span {
  display:inline-block;
  position:absolute;
  top:8px;left:0;
  margin:0 8px;
  width:23px;
  height:23px;
  border-radius:50%;
  text-align:center;
  font-size:1.9rem;
  font-weight:700;
  opacity:.4;
  background:#ffffffee;
  color:#000;
  transition: all 200ms ease-out;
}
.quiz_antworten button:hover {
  scale:1.1;
  background:#ffffffbb;
}
.quiz_antworten button:hover span {
  rotate:360deg;
  scale:1.5;
  opacity:1;
  color:var(--bg-contrast-light);
}

@media all and (max-width:640px) {
  .quiz_antworten {
    padding:0 20px;
  }
  #aufloesung {
    padding:20px;
  }
}




.smlinks {
  max-width:500px;
  margin:0 auto;
}
.smlinks a {
  display:block;
  text-align:center;
  font-size:1.4rem;
  background-color: #ffffff22;
  padding:20px 15px;
  margin-top:10px;
  border-radius:40px;
  text-decoration:none;
  transition: all 400ms ease-in-out;
}
.smlinks a img {
  width:60px;
  height:60px;
  margin-bottom:5px;
}
.smlinks a:hover {
  scale:1.1;
  filter:saturate(140%);
}

@media all and (max-width:640px) {
  .smlinks {
    margin:0 80px;
  }
}





#countdown-container {
  text-align: center;
  display:none;
}
.countdown-number {
  width: 120px;
  height: 120px;
  line-height: 120px;
  font-size: 60px;
  color: white;
  border-radius: 50%;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease-in-out;
}

.red {
  background-color: #f76047;
  animation: countdown-beat0 2s linear forwards;
}

.orange {
  background-color: #fab000;
  animation: countdown-beat1 2s linear forwards;
}

.green {
  background-color: #00c520;
  animation: countdown-beat2 2s linear forwards;
}
@keyframes countdown-beat0 {
0% {
  scale:1;
  rotate:0;
}
50% {
  scale:1;
  rotate:360deg;
}
55% {
  scale:1.4;
}
60% {
  scale:1;
}
100% {
  scale:1;
}
}
@keyframes countdown-beat1 {
0% {
  scale:1;
  rotate:360deg;
}
5% {
  scale:1.4;
  rotate:0;
}
10% {
  scale:1;
}
100% {
  scale:1;
}
}
@keyframes countdown-beat2 {
0% {
  scale:1;
  rotate:-360deg;
}
5% {
  scale:1.4;
  rotate:0;
}
10% {
  scale:1;
}
90% {
  scale:1;
}
100% {
  scale:0;
}
}











.progress-container {
  width: 100%;
  max-width:500px;
  background-color: #f76047;
  border-radius: 25px;
  margin: 20px auto 10px auto;
  height: 25px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  background-color: #00c520;
  padding:3px 5px 0 5px;
  transition: width 2s ease-out;
}






.bisher-container {
  width:150px;
  border-radius: 5px;
  margin: 20px auto 0px auto;
  height: 15px;
  overflow: hidden;
}

.bisher-bar {
  height: 100%;
  width: 100%;
  transition: width 2s ease-out;
}










#countdown {
  font-size: 2rem;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:0px;
  max-width:400px;
  margin:30px auto 0 auto;
}
#countdown #seconds {
  display:inline-block;
  width:30px;
  text-align:right;
  font-weight:500;
}
#countdown #decimals {
  display:inline-block;
  width:30px;
  text-align:left;
  opacity:.6;
}
#countdown .countdown_verbleibend {
  font-size:1.5rem;
  color:#a2c2e4;
  display: flex;
  align-items: center;
  justify-content: center;
}
#countdown .jokerbtns {
  margin-top:-3px;
}
#countdown .jokerbtns button {
  border-radius:50%;border:0;outline:0;cursor:pointer;background:#ffffff44;
  transition: all 200ms ease-in-out;
}
#countdown .jokerbtns button:hover:not(:disabled) {
  scale:1.2;background:#ffffff66;
}
#countdown .jokerbtns button:hover:not(:disabled) img {
  animation: btnani 1s infinite;
}
#countdown .jokerbtns button:disabled {
  opacity:.4;background:#f76047;scale:.9;
}
#countdown .jokerbtns img {
  width:44px;height:44px;padding:6px;filter:invert(1);
}
#countdown .countdown_txt {
  display:inline-block;
  margin:3px 0 20px 0;
  padding:4px 20px;
  border-radius:20px;
  background:#ffffff22;
}
#countdown .countdown_txt img {
  width:26px;
  height:26px;
  margin:-3px -7px 0 0;
  filter:brightness(500%);
  opacity:.6;
}
.zeitkritisch {
  background:#f76047 !important;
  animation: countdown-beat 2s infinite;
}
@keyframes countdown-beat {
0% { scale:1; }
30% { scale:1; }
40% { scale:.9; }
50% { scale:1.1; }
60% { scale:1; }
70% { scale:.9; }
80% { scale:1.1; }
90% { scale:1; }
100% { scale:1; }
}



@media all and (max-width:640px) {
  #countdown {
    position:fixed;
    bottom:0;
    width:100%;
    padding:0 5px 5px 5px;
    background:var(--footer-color);
    z-index:999;
  }
  #quiz-container #frage h2 {
    padding:20px;
    border-radius:0;
    margin:0 auto 10px auto;
    font-size:1.7rem;
  }
  }






@keyframes confetti-slow {
0% {
  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
}
100% {
  transform: translate3d(25px, 140vh, 0) rotateX(360deg) rotateY(180deg);
}
}
@keyframes confetti-medium {
0% {
  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
}
100% {
  transform: translate3d(100px, 140vh, 0) rotateX(100deg) rotateY(360deg);
}
}
@keyframes confetti-fast {
0% {
  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
}
100% {
  transform: translate3d(-50px, 140vh, 0) rotateX(10deg) rotateY(250deg);
}
}


.confetti {
position: absolute;
top: -10px;
border-radius: 0%;
}
.confetti--animation-slow {
animation: confetti-slow 2.5s linear 1 forwards;
}
.confetti--animation-medium {
animation: confetti-medium 2.25s linear 1 forwards;
}
.confetti--animation-fast {
animation: confetti-fast 2s linear 1 forwards;
}


















#qrcode {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 380px;
  display: none;
  background-color: var(--body-bg-uni);
  padding: 20px 40px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  text-align:center;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 999;
}
















.hr-text {
  position: relative;
  margin:25px 0 10px 0;
  outline: 0;
  border: 0;
  color: #fff;
  font-size:1.3rem;
  font-weight:700;
  text-align: center;
  height: 1.5em;
  opacity:.8;
}

.box-header {
  font-size:1.8rem;
  padding:5px 0 12px 20px;
}
.box-cont {
  background:var(--bg-color);
  background:#ffffffdd;
  color:#222;
  padding:20px;
  margin-bottom:30px;
  border-radius:20px;
}
.box-cont a {
  color:#222;
}
.box-cont.invert {
  background:var(--bg-contrast);
}
.box-cont p, .box-cont ul {
  font-size:1.65rem;
	line-height:2.5rem;
  margin-bottom:15px;
}
.box-cont ul {
  margin-left:20px;
}
.box-cont p:last-child {
  margin-bottom:0;
}
@media all and (max-width:640px) {
  .box-header {
    font-size:1.7rem;
    text-align:center;
    padding:5px 0 10px 0;
  }
  .box-cont {
    margin:0 10px 30px 10px;
    padding:15px;
  }
  .box-cont p, .box-cont ul {
    font-size:1.5rem;
    line-height:2.4rem;
  }
}


.autor-pic {
  width:35px;
  height:35px;
  margin-right:10px;
  border-radius:50%;
  border:2px solid var(--bg-color);
  outline:3px solid var(--main-color);
}
.emailbtn {
  width:26px;
  height:26px;
  margin:-1px 0 0 5px;
  filter:invert(var(--png-invert));
  opacity:.8;
  background:#eee;
  border-radius:50%;
  padding:5px;
}

#snackbar {
  visibility: hidden;
  min-width: 400px;
  margin-left: -200px;
  font-size:1.7rem;
  font-weight:700;
  color: #fff;
  text-align: center;
  border-radius: var(--border-radius);
  padding: 16px;
  position: fixed;
  z-index:999;
  left: 50%;
  bottom: 150px;
}
#snackbar svg {
  margin:-2px 4px 0 0;
}
#snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 3.7s;
}
@media all and (max-width:640px) {
  #snackbar {
    border-radius:0;
    padding:30px 16px;
    font-size:1.5rem;
  }
}

@keyframes fadein {
  from {bottom: 0; opacity: 0; scale:.1;}
  to {bottom: 150px; opacity: 1; scale:1;}
}
@keyframes fadeout {
  from {bottom: 150px; opacity: 1; scale:1;}
  to {bottom: 0; opacity: 0; scale:.1;}
}

.toast-box-success {
  padding:20px;
  color:#fff;
  border-radius:4px;
  margin-bottom:40px;
  background: var(--toast-success);
}
.toast-box-error {
  padding:20px;
  color:#fff;
  border-radius:4px;
  margin-bottom:40px;
  background: var(--toast-error);
}
.toast-box-success b, .toast-box-error b {
  font-size:2rem;
}


/* Benachrichtigungsmenü */

.nmenu {
  position:fixed;
  display:none;
  z-index:5;
  transform:translate(-220px,40px);
  width:300px;
  max-height:50%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-color:var(--scrollbar1) var(--scrollbar2);
  scrollbar-width:thin;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scroll:touch;
  text-align:left;
  font-size:1.3rem;
  border-radius:var(--border-radius);
  background-color:var(--body-bg-uni);
  border:1px solid rgba(0,0,0,.07);
  box-shadow:2px 8px 10px 1px rgba(0,0,0,0.2);
}
.nmenu.nbottom {
  bottom:0;
  right:30px;
  height:500px;
  width:500px;
  max-width:50%;
  transform:translate(0,0);
  border-radius:var(--border-radius) var(--border-radius) 0 0;
}
.nmenu::-webkit-scrollbar {
	width:8px;
	background-color:var(--scrollbar2);
}
.nmenu::-webkit-scrollbar-button {
	height:0px;
}
.nmenu::-webkit-scrollbar-thumb {
	background-color:var(--scrollbar1);
}
.nmenu span {
  display:block;
  padding:15px 15px 10px 15px;
  font-size:1.5rem;
  font-weight:500;
}
.nmenu span.non {
  display:block;
  padding:15px 15px 25px 15px;
  border-top:1px solid rgba(100,100,100,.2);
  font-size:1.2rem;
  font-weight:normal;
  font-style:italic;
}
.nmenu a {
  display:block;
  min-height:60px;
  padding:10px 20px 10px 15px;
  border-top:1px solid rgba(100,100,100,.2);
  cursor:pointer;
  text-decoration:none;
}
.ntxt {
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nmenu a:last-child {
  border-bottom:1px solid rgba(100,100,100,.2);
}
.nmenu a.neu {
  background-color:rgba(255, 0, 25, 0.08);
}
.nmenu a img {
  float:left;
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:50%;
  margin-right:8px;
  margin-bottom:8px;
}
.userico-nmenu-txt {
  display:inline;
  float:left;
  width:41px;
  height:41px;
  border-radius:50%;
  margin-right:8px;
  text-align:center;
  padding-top:10px;
  font-size:1.8rem;
  font-weight:500;
  background-color:var(--main-color);
  color:#000;
}
.nmenu a img.nmm {
  border-radius:var(--border-radius);
}
.nmenu p {
  display:block;
  text-align:center;
}
.nmenu a span {
  display:block;
  opacity:.3;
  padding:4px 0 2px 0;
  font-size:1.1rem;
}
@media all and (min-width:640px) {
  .nmenu a:hover {
    background-color:var(--bg-contrast);
  }
}
@media all and (max-width:640px) {
  .nmenu {
    max-height:100%;
    width:100%;
    height:100%;
    transform:none;
    padding-top:70px;
    bottom:0;
    background-color:var(--body-bg-uni);
    border-radius:0;
    box-shadow:none;
  }
  .nmenu a {
    padding-right:50px;
  }
}




/* Quiz */

.quiz_antwort_btn {
  cursor:pointer;
  background:var(--main-color);
  border-radius:var(--border-radius);
  padding:15px;
  font-size:1.8rem;
  color:#fff;
  margin-bottom:10px;
  line-height:1.05;
  transition:all 500ms;
}
.quiz_antwort_btn span {
  display:inline-block;
  text-align:center;
  border-radius:50%;
  height:22px;
  width:22px;
  margin-right:10px;
  border:2px solid #fff;
  opacity:.5;
  transition:all 1s;
}
.quiz_antwort_btn div {
  float:right;
  padding:5px 8px;
  border-radius:20px;
  color:#222222;
  font-size:1.2rem;
  font-weight:700;
  background: var(--bg-color);
  opacity:0;
  display:none;
}
@media all and (min-width:640px) {
  .quiz_antwort_btn:hover {
    background:var(--main-color-light);
  }
  .quiz_antwort_btn:hover span {
    background:#fff;
    transform:scale(1.3);
    opacity:.7;
  }
}
@media all and (max-width:640px) {
  .antwort-btn {
    font-size:1.6rem !important;
  }
}


#main {
  transition: background 500ms ease-in-out;
}


/* Layout Events */

.event-details {
  display: flex;
  flex-wrap: wrap;
  padding:28px 10px 10px 15px;
  border-radius:var(--border-radius);
  background-color:var(--bg-color);
}
.event-details img {
  width:36px;
  height:36px;
  margin:-6px 0 6px 0;
}
.event-details div {
  font-size:2.2rem;
  margin-bottom:10px;
}
.event-details div:nth-child(even) {
  width:85%;
}
.event-details div:nth-child(odd) {
  width:15%;
}

.kalbtns {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:20px 0;
  grid-template-areas:
    ". ."
    ". ."
    ". .";
}
.kalbtns div a {
cursor:pointer;background-color:var(--bg-color);padding:6px;font-size:1.3rem;
}
.kalbtns div a img {
width:28px;height:28px;margin:-1px 4px 0 0;
}

#artikelAsight {
  align-self:start;
  position:-webkit-sticky;
  position:sticky;
  top:15px;
  padding-top:45px;
}

.eventcont p {
	font-size:1.9rem;
	line-height:3.1rem;
  margin-bottom:20px;
}
.eventcont h3 {
  display:block;
  font-size:2.3rem;
  font-weight:700;
	line-height:3rem;
  margin:45px 10px 25px 0;
}
.event .pretitel {
  opacity:.6;
}
.event h1 {
	font-size:4.3rem;
	line-height:5.3rem;
	font-weight:700;
	margin:10px 60px 20px 0;
  color:var(--titel-color);
}
#map {
  margin:30px 0;
  height:300px;
  border-radius:var(--border-radius);
  -webkit-user-select: none;
  user-select:none;
}
@media all and (min-width:640px) {
  .eventbild {
    margin-top:14px !important;
  }
  .eventcont {
    margin:0 0 20px 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media all and (max-width:640px) {
  .event-details, .kalbtns {
    border-radius:0;
  }
  #artikelAsight {
    padding-top:0;
  }
  .event .pretitel {
    margin-left:0;
  }
  .event h1 {
    font-size:2.9rem;
    line-height:3.6rem;
    font-weight:700;
    margin:10px 20px 20px 0px;
  }
  #map {
    margin:20px 10px;
  }
}



/* Layout Artikel */

.pretitel {
	font-size:1.8rem;
  margin-top:25px;
  text-transform:uppercase;
}
.pretitel span {
  padding-right:15px;
}
.pretitel img {
	opacity:.5;
  width:20px;
  height:20px;
  margin:-5px 1px 0 0;
  filter:invert(var(--png-invert));
}
.artikel h1 {
	font-size:4.3rem;
	line-height:5.3rem;
	opacity:.9;
	font-weight:700;
	margin:10px 60px 20px 0;
  color:var(--titel-color);
}
.artikel h2 {
	font-size:2.4rem;
	line-height:3.4rem;
	font-weight:400;
	margin:25px 60px 30px 0;
}
.artikelinfo img {
  display:inline-block;
  width:24px;
  height:24px;
  margin-right:3px;
  margin-top:-2px;
  filter:none;
}
.artikeltags {
  margin-top:40px;
  line-height:normal;
}

#afbdiv {
  margin-top:40px;
  height:60px;
  text-align:center;
  font-size:1.3rem;
}
.artikelfeedback {
  text-align:center;
  font-size:1.3rem;
  line-height:1.5rem;
}
.artikelfeedback div {
  margin-top:10px;
}
.artikelfeedback div button span img {
  width:26px;height:26px;margin:-2px 5px 0 0;opacity:var(--color-opacity);
}

.artikelcont {
	margin:40px 80px 20px 0;
	font-size:1.9rem;
	line-height:3.1rem;
  margin-bottom:20px;
}
.artikelcont h3 {
  display:block;
  font-size:2.3rem;
  font-weight:700;
	line-height:3rem;
  margin:45px 10px 25px 0;
}
.artikelcont p {
	font-size:1.9rem;
	line-height:3.1rem;
  margin-bottom:20px;
}
.bild {
	margin:0;
  overflow:hidden;
}
.bild img {
  pointer-events:none;
	width:100%;
  aspect-ratio: 13/8;
  object-fit:cover;
}
.bildinfo {
  display:none;position:absolute;bottom:0;right:0;padding:4px 35px 8px 12px;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(4px);border-top-left-radius:var(--border-radius);cursor:pointer;z-index:1;
}
.bildinfo_link {
  position:absolute;
  cursor:pointer;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  width:20px;
  height:20px;
  bottom:5px;
  right:5px;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  outline:0 solid rgba(255,255,255,.5);
  transition: all 0.2s ease-out;
  z-index:2;
}
.bildinfo_link img {
  width:20px;
  height:20px;
  padding:2px;
  opacity:.6;
}

.kipowered {
  margin-top:20px;font-size:1rem;text-align:left;background:var(--main-color-extralight);padding:5px;border-radius:var(--border-radius);
}
.kipowered img {
  margin-top:2px;width:44px;height:44px;float:left;margin:-1px 3px 0 0;
}
.kipowered a {
  display:inline-block;font-weight:700;text-decoration:underline;margin-bottom:3px;opacity:.8;font-size:1.1rem;
}

.bildsub {
	font-size:1.4rem;
	line-height:2.1rem;
	margin:9px 0 0 0;
  opacity:.5;
}
.bildcopyr {
	font-size:1rem;
  margin-top:5px;
	opacity:.4;
}
.bildsub a {
	text-decoration:none;
	color:#9e8569;
}

.artikelcontainer {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 80px minmax(10px, 1fr);
}

.buttonbar {
  margin-top:-25px;
  margin-bottom:40px;
}
.buttonbar div {
  display:inline-block;
  cursor:pointer;
  background-color:var(--bg-contrast);
  border-radius:50%;
  width:38px;
  height:38px;
  padding: 9px 8px;
  transition: all 0.3s ease-in-out;
	z-index:1;
  filter:brightness(99%);
}
.buttonbar .fb:hover { background-color:var(--social-fb); filter:brightness(1); }
.buttonbar .fb:hover img { filter:invert(1); }
.buttonbar .pt:hover { background-color:var(--social-pt); filter:brightness(1); }
.buttonbar .pt:hover img { filter:invert(1); }
.buttonbar .wa:hover { background-color:var(--social-wa); filter:brightness(1); }
.buttonbar .wa:hover img { filter:invert(1); }
.buttonbar img {
  width:22px;
  height:22px;
  opacity:.3;
  filter:invert(var(--png-invert));
  transition: all 0.2s ease-in-out;
}
@media all and (min-width:640px) {
  .buttonbar div:hover {
    scale:1.1;
  }
  .buttonbar div:hover img {
    opacity:1;
  }
}
#anzkom {
  position:absolute;
  opacity:.9;
  margin:-10px 0 0 20px;
  font-size:1rem;
  padding:2px 3px;
  height:16px;
  aspect-ratio:1;
  width:auto;
  border-radius:8px;
  text-align:center;
  color:#fff;
  background:var(--main-color);
}
.buttonbar-mobile {
	position:fixed;
  display:none;
	border:0;
	padding:0;
	height:44px;
  right:63px;
	bottom:10px;
	filter:drop-shadow(2px 2px 3px rgba(10, 10, 10, 0.2));
	z-index:1;
}
.buttonbar-mobile-flex {
  display:flex;
}
.buttonbar-mobile div div {
  cursor:pointer;
  background-color:var(--main-color-light);
  width:44px;
  height:44px;
  padding:12px;
  border-radius:50%;
  margin:0 4px;
}

.buttonbar-mobile .fb { background-color:var(--social-fb); }
.buttonbar-mobile .pt { background-color:var(--social-pt); }
.buttonbar-mobile .wa { background-color:var(--social-wa); }
.buttonbar-mobile .em { background-color:var(--social-em); }

.buttonbar-mobile img {
  width:20px;
  height:20px;
  opacity:.6;
  margin-top:0;
  filter:invert(var(--png-invert));
}
#anzkom-mobile {
  position:absolute;
  height:17px;
  width:auto;
  margin:18px 0 0 15px;
  text-align:center;
  font-size:1.1rem;
  font-weight:500;
  color:var(--font-color);
  color:#fff;
  opacity:.9;
  padding:2px 3px;
  border-radius:8px;
  background:var(--main-color);
}

.kommentarcontainer {
  margin-bottom:50px;
}
.kommentare-anz {
  font-size:1.7rem;
  font-weight:500;
  margin:45px 0 15px 0;
}
.kommentare-anz select {
  float:right;
  margin-top:-6px;
}
.kommentare-anz select option {
  font-size: 1.2em;
}
.kommentarbox {
  margin-top:50px;
  padding:25px 30px;
  background-color:var(--bg-contrast);
  border-radius:var(--border-radius);
}
.antwortbox {
  display:none;
  background-color:var(--toast-success);
  margin-top:10px;
  padding:25px 30px;
  border-radius:6px;
}
.kommentar-element {
  margin-top:20px;
  padding-top:30px;
  border-top:2px solid var(--bg-contrast);
}
.kommentar-cont {
  margin-left:45px;
}
.kommentar-cont p {
  display:inline-block;
  margin:4px 0;
  font-size:1.7rem;
  line-height:2.2rem;
  padding:10px 25px 10px 10px;
  max-height:250px;
  overflow-y:auto;
  word-wrap: break-word;
}

.antwpfeil {
  position:absolute;rotate:180deg;translate:-24px -6px;height:28px;width:28px;opacity:.1;filter:invert(var(--png-invert));display:none;
}
.neuer-kommentar {
  display:none;
}
.kommentar-textarea {
  margin-top:15px;font-size:1.5rem;min-width:100%;width:100%;min-height:100px;max-height:300px;margin-bottom:10px;
}
.reactbox {
  margin-left:6px;
  font-size:1.25rem;
}
.reactbox button {
  all:unset;
  width:45px;
  cursor:pointer;
  text-decoration:none;
  color:var(--font-color);
}
.reactbox button:last-child {
  width:120px;
  margin-left:10px;
}
.reactbox span {
  opacity:.6;
  transition: all 0.3s ease-in-out;
}
@media all and (min-width:640px) {
.reactbox button:hover img {
  opacity:.5 !important;
  scale:1.1;
}
}
.reactbox img {
  opacity:0.15;
  filter:invert(var(--png-invert));
  margin-right:2px;
  width:24px;
  height:24px;
  transition: all 0.3s ease-in-out;
}
.reactbox img.color {
  filter:invert(0);
  transition: all 0.5s ease-in-out;
}
.reactbox button:nth-child(2) img {
  margin-right:4px;
}



.userbox {
  padding:0 10px;
  font-size:1.5rem;
  border-radius:6px;
}
.userbox span {
  display:inline-block;
  margin-left:11px;
  opacity:.8;
  font-weight:700;
}
.userbox span:last-child {
  opacity:.4;
  font-size:1.2rem;
  font-weight:400;
}
.useravatar-txt {
  float:left;
  display:block;
  width:32px;
  height:32px;
  background-color:var(--main-color-light);
  border-radius:50%;
  text-align:center;
  color:#fff;
  font-size:1.3rem;
  font-weight:500;
  padding:8px 0 0 1px;
  margin-top:-8px;
}
.useravatar {
  float:left;
  border-radius:50%;
  width:32px;
  height:32px;
  margin-top:-8px;
}


.userbox.big {
  padding:0;
  font-size:1.6rem;
}
.userbox.big .useravatar {
  width:80px;
  height:80px;
}
.userbox.big .useravatar-txt {
  width:80px;
  height:80px;
  font-size:3rem;
  padding:22px 0 0 1px;
}




.artikel-mehr {
  font-size:1.7rem;
  font-weight:500;
  margin:30px 0 15px 0;
}

blockquote {
  color: var(--main-color);
  width: 70%;
  margin: 50px 20% 45px 15%;
}
blockquote p {
  font-weight:700;
  font-size:2.1rem !important;
}
blockquote p::before {
  content: "“";
  font-size: 7rem;
  margin: 1rem 0 0 -5rem;
  position: absolute;
  opacity: 0.5;
}
blockquote cite {
  font-size: 1.6rem;
  font-style:normal;
}

@media all and (min-width:640px) {
  .kommentar-cont p {
    max-width:90%;
  }
}
@media all and (max-width:900px) {
  blockquote {
    width:90%;
    margin:50px 30px 50px 40px;
  }
  .artikelcontainer {
      grid-template-columns: 1fr;
  }
  .buttonbar {
    background-color:var(--bg-color);
    opacity:1;
    padding:20px 0 10px 0;
    transform:translate(0,-5px);
  }
	.bild {
		margin-top:-12px;
    border-radius:0 0 var(--border-radius) var(--border-radius);
	}
	.bildsub {
    font-size:1.3rem;
    line-height:1.6rem;
    margin:5px 20px 0 20px;
	}
	.bildcopyr {
    margin:5px 20px 0 20px;
	}
	.pretitel {
    font-size:1.4rem;
		margin:25px 20px 0 20px;
	}
  .artikelinfo {
    padding:10px 30px 20px 30px;
    text-align:center;
  }
  .artikeltags {
    text-align:center;
  }
	.artikel h1 {
		font-size:2.9rem;
    line-height:3.6rem;
    opacity:.8;
    font-weight:700;
		margin:10px 20px 20px 20px;
	}
	.artikel h2 {
    font-size:2.2rem;
    line-height:3.1rem;
    font-weight:400;
    margin:20px 20px 25px 20px;
	}
	.artikelcont {
		font-size:1.7rem;
    line-height:2.3rem;
		margin:0px 20px 20px 20px;
	}
  .kommentare-anz {
    margin-left:20px;
    margin-right:20px;
  }
  .artikel-mehr {
    padding-left:20px;
  }
  .kommentarbox {
    margin-top: 50px;
    padding:25px 20px;
    background-color:var(--bg-contrast);
    border-radius:0;
  }
  .kommentar-element {
    padding-right:20px;
  }
  .userbox span:last-child {
    float:right;
  }
}









/* Footer */

#footer {
  padding: 3% 0 70px 0;
  margin-top:60px;
	background:var(--footer-color);
  -webkit-user-select:none;
  user-select:none;
}
#footer_inner {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:15px;
	margin:0px auto;
	max-width:1200px;
	font-size:1.4rem;
	padding:0px 15px 0px 15px !important;
}
@media all and (max-width:900px) {
  #footer {
    padding: 5% 0 70px 0;
  }
	#footer_inner {
		text-align:center;
    grid-template-columns: 1fr 1fr;
	}
}
@media all and (max-width:640px) {
	#footer_inner {
		text-align:center;
    grid-template-columns: 1fr;
	}
}
.footer_title {
	margin:40px 0px 20px 0px;
	color:#fff;
	font-size:1.5rem;
	font-weight:400;
	text-transform:uppercase;
  opacity:.65;
}
.footer_copy {
  margin:5px 0;
  text-align:center;
  color:#fff;
  font-size:1.3rem;
  opacity:.2;
}
.footer_copy .heart {
  width:15px;
  height:15px;
  filter:invert(1);
  margin:-1px 3px 0 3px;
  opacity:.7;
  animation: heartbeat 2s linear infinite;
}
@keyframes heartbeat {
	0% { scale:1; }
	5% { scale:1.35; rotate:-6deg; opacity:.9; }
	20% { scale:.8; }
	25% { scale:1.35; rotate:6deg; opacity:.9; }
	40% { scale:1; }
}

.footer_logo {
  margin-top:40px;
  text-align:center;
}
.footer_logo a img {
  height:38px;
  opacity:.5;
  transition: all 0.3s ease-in-out;
}
.footer_logo a img:hover {
  scale:1.05;
  opacity:1;
}
.rub-footer {
  display:block;
  width:-moz-fit-content;
  width:fit-content;
	font-weight:500;
  padding: 6px 9px 6px 6px;
	color:#fff;
  opacity:.8;
}
.rub-footer img {
  width:24px;
  height:24px;
	margin:-1px 5px 0 0;
  transition: all 0.2s ease-in-out;
}
.rub-footer img.social-link {
  filter:none;
	width:28px;
	height:28px;
	margin:0 5px 0 0;
}
.rub-footer:hover, .rub-footer:hover img.social-link {
  opacity:1;
}
.rub-footer:hover img, .rub-footer:hover img.social-link {
  scale:1.1;
}
.social-counter {
  font-size:1.3rem;
  margin-top:3px;
  color:#fff;
  opacity:.5;
  padding-top:9px;
  font-weight:400;
}
.rub-social-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:-8px;
}
@media all and (max-width:900px) {
	.rub-footer {
    display:block;
    width:100%;
		text-align:center;
	}
  .rub-footer img.social-link {
    filter:none;
    width:50px;
    height:50px;
    margin:0 0 8px 0;
  }
  .social-counter {
    font-size:1.4rem;
    padding-top:2px;
  }
  .social-counter div {
    font-size:1.1rem;
    padding-top:2px;
  }
  .rub-social-m {
    width:33%;
    float:left;
    font-size:1.4rem;
    margin-top:-10px;
    margin-bottom:30px;
    padding:0 !important;
    text-align:center;
  }
}

.chip {
  align-items:center;
  color:var(--font-color);
  display:inline-block;
  font-size:1.4rem;
  max-width:100%;
  padding:5px 8px 3px 8px;
  height:26px;
  margin-bottom:5px;
  text-decoration:none;
  vertical-align:baseline;
  transition: all 100ms ease-in-out;
  cursor:pointer;
  white-space: nowrap;
  opacity:.8;
}
.chip.footer {
  opacity:.7;
  border-radius: 3px;
  background:var(--bg-contrast-dark);
}
.chip span {
  font-weight:500;
  color:var(--main-color);
}
.chip img {
  width:18px;
  height:18px;
  margin:-2px 2px 0 0;
  opacity:.8;
  filter:invert(var(--png-invert));
}
.chip:hover,
.chip:focus {
  opacity:1;
  scale:1.05;
  text-decoration:none;
  background:var(--bg-contrast);
}
.chip.nolink:hover,
.chip.nolink:focus {
  opacity:.8;
  cursor:auto;
  background:transparent;
}








/* Theme Switcher */

.theme-switch-wrapper {
	margin-top:15px;
}
.theme-switch-wrapper img {
	opacity:.5;
  margin:-5px 1px 5px 1px;
  width:14px;
  height:14px;
  filter:invert(var(--png-invert));
}
.theme-switch, .theme-switch2 {
	display:inline-block;
	height:18px;
	position:relative;
	width:35px;
}
.theme-switch input, .theme-switch2 input {
	display:none;
}
.slider, .slider-mobile {
	background-color:var(--bg-contrast-dark);
	bottom:0;
	cursor:pointer;
	left:0;
	position:absolute;
	right:0;
	top:0;
	transition:.4s;
}
.slider:hover, .slider-mobile:hover {
	background-color:#8c9599;
}
.slider:before, .slider-mobile:before {
	background-color:#fff;
	bottom:4px;
	content:"";
	height:10px;
	left:4px;
	position:absolute;
	transition:.4s;
	width:10px;
}
input:checked + .slider { background-color:#69757a; }
input:checked + .slider:hover { background-color:#8e8e8e; }
input:checked + .slider:before { transform:translateX(16px); }
input:checked + .slider-mobile { background-color:#69757a; }
input:checked + .slider-mobile:hover { background-color:#8e8e8e; }
input:checked + .slider-mobile:before { transform:translateX(16px); }
.slider.round, .slider-mobile.round { border-radius:18px; }
.slider.round:before, .slider-mobile.round:before {border-radius:50%; }









/* Mobile: User Button */

#modLoginFloat {
	position:fixed;
	border:0;
	padding:0;
	cursor:pointer;
	width:44px;
	height:44px;
	bottom:10px;
	left:15px;
	background-color:var(--main-color);
	border-radius:50px;
	text-align:center;
	filter:drop-shadow(2px 2px 3px rgba(10, 10, 10, 0.2));
	z-index:1;
}

.modLoginFloatTop {
	position:fixed;
  display:none;
	padding:0;
	width:100%;
	bottom:55px;
	left:15px;
	filter:drop-shadow(2px 2px 3px rgba(10, 10, 10, 0.2));
	z-index:1;
}
.modLoginFloatTop button {
	border:0;
  display:block;
  cursor:pointer;
	background-color:var(--main-color-light);
  width:44px;
  height:44px;
  padding:12px;
  border-radius:50%;
  margin:6px 0;
}
.modLoginFloatTop img {
  width:20px;
  height:20px;
  opacity:.6;
}

#modShare {
  position:absolute;
  display:none;
  bottom:50px;
  right:0px;
}
#modShare div {
  margin-top:6px;
}
#modShare div img {
  opacity:.9;
  margin-top:0;
}


/* Scroll-to-Top Button */

#scroll {
  position:fixed;
  right:15px;
  bottom:10px;
  cursor:pointer;
  width:44px;
  height:44px;
  display:none;
  border-radius:50%;
  z-index:1;
  background-color:var(--main-color);
  filter:drop-shadow(2px 2px 3px rgba(10, 10, 10, 0.2));
  transition: bottom 0.3s;
}
#scroll img {
  width:22px;
  height:22px;
  margin:11px;
}









/* Benachrichtigungen + Nachrichten */

.bnms {
  position:absolute;
  font-size:1rem;
  padding:2px;
  width:16px;height:16px;
  border-radius:50%;
  color:#000;
  background:var(--bg-contrast);
  background:var(--main-color);
  text-align:center;
  font-weight:bold;
  z-index:1;
  margin:15px 0 0 25px;
  opacity:.9;
}
.bnms-pulse {
  color:#fff !important;
  background:rgb(255,55,0) !important;
  animation: pulse_counter 2s infinite;
}
@keyframes pulse_counter {
  0% {
    box-shadow: 0 0 0 0 rgba(239,0,0,0);
  }
  25% {
    box-shadow: 0 0 0 4px rgba(255,55,0,.2); opacity:1;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239,0,0,0);
  }
}







/* Navigation */

.sticky {
	position:fixed;
  width:100%;
  max-width:800px;
  height:45px;
	top:0;
  left:50%;
  transform: translateX(-50%);
  padding-top:2px;
  border-radius: 0 0 20px 20px;
  background:var(--hdbar-color);
  backdrop-filter: blur(6px);
  font-size:1.2rem !important;
}
.sticky li a, .sticky-sub a {
  font-size:1.2rem !important;
  margin:0 3px !important;
}
.sticky li a {
  padding-top:7px !important;
  padding-bottom:7px !important;
	transition:all 0.2s ease-in-out;
}
.sticky .navicon {
	height:20px;
	width:20px;
	margin:-3px 4px 0px 0px;
}
@keyframes animation_navlogo {
	0% { transform: rotateX(-80deg) translateX(-10px); }
	100% { transform: rotateX(0deg); }
}
@media all and (min-width:1000px) {
  .navlogo {
    display:inline-block !important;
  }
  .sticky .navlogo a {
    visibility:visible;
  }
  .sticky .navlogo img {
    display:inline;
    animation: 400ms ease-in-out animation_navlogo;
  }
}
@media all and (min-width:640px) {
  .sticky-sub {
    position:fixed;
    transform:translateY(0px) !important;
    top:44px;
  }
  .sticky-suchbox {
    scale:0.7;
    position:fixed;
    transform:translateY(0px) !important;
    margin:0 5vw !important;
  }
  .sticky-suchbox-sub {
    top:80px;
  }
}
#suchbox_below {
  margin-top:-30px;
}

.navlogo {
  display:none;
  transition: all 0.3s ease-in-out;
}
.navlogo a {
  visibility:hidden;
}
.navlogo img {
  height:25px;
  margin-top:-6px;
  display:none;
}
.navburger {
	float:right;
  font-size:.8rem;
  width:48px;height:48px;
  padding-top:9px;
  margin-top:-10px;
  border-radius:50%;
	transition:all 0.2s ease-in-out;
}
.navburger::after {
  content:'Menü';
}
.navburger .line {
	padding:0 !important;
	width:20px;
	height:3px !important;
	background-color:var(--font-color) !important;
	margin:3px auto;
  opacity:.7;
	transition:all 0.8s ease-in-out;
}
.navburger.is-active { height:42px;width:42px;padding-top:10px;margin:-5px 3px 0 3px; }
.navburger.is-active::after { content:''; }
.navburger.is-active .line:nth-child(2){ opacity:0; }
.navburger.is-active .line:nth-child(1){ transform:translateY(6px) rotate(225deg); }
.navburger.is-active .line:nth-child(3){ transform:translateY(-6px) rotate(-225deg); }
.navigator {
	z-index:2;
}

.navicon {
	height:22px;
	width:22px;
	margin:-3px 5px 0px 0px;
}
.navicon.mehr {
  margin-top:-2px;
  transition: all 0.2s ease-in-out;
}
.rotico {
  rotate:-180deg;
}
@media all and (max-width:900px) {
.navicon {
	margin-left:20px !important;
	margin-right:10px !important;
}}
#nav-top {
	position:fixed;
	top:0px;
	width:100%;
	margin:0px !important;
	padding:0px !important;
	z-index:999;
}
#nav-trigger {
	display:none;
	filter:drop-shadow(0px 6px 2px hsla(0, 0%, 0%, 0.1));
}
#nav-trigger span {
	display:block;
	height:48px;
	padding:10px;
	background:var(--header-bg);
	cursor:pointer;
	text-transform:uppercase;
	text-align:center;
}
nav {
	text-align:center;
  -webkit-user-select: none;
  user-select: none;
  position:absolute;
  width:100%;
}
nav#nav-main ul {
	list-style-type:none;
	margin:0;
	padding:5px 0 0 0;
}
nav#nav-main li {
	display:inline-block;
	margin:0;
	padding:0;
}
nav#nav-main a, nav#nav-sub a {
	text-decoration:none;
	color:var(--font-color);
  background:var(--hdbar-color);
	display:block;
	padding:8px 16px 6px 14px;
	margin:5px;
	font-size:1.4rem;
  font-weight:500;
	text-transform:uppercase;
  white-space:nowrap;
  position:relative;
  border-radius:20px;
  transition: all 300ms ease-in-out;
}
nav#nav-sub a {
	font-size:1.4rem;
  border-radius: var(--border-radius);
}
nav#nav-sub .navicon {
	height:20px;
	width:20px;
	margin:-3px 2px 0px 0px;
}
nav#nav-main a:hover {
  background:var(--bg-contrast-light);
  scale:1.1;
  filter:drop-shadow(#9a8dff99 0 0 10px);
}
nav#nav-main a:hover img {
  z-index: 3;
  animation: navani 1s infinite;
}
@keyframes navani {
  0% { scale:1; }
  50% { scale:1.1; rotate:-10deg; }
  100% { scale:1; }
}

nav#nav-mobile {
	display:none;
  position:absolute;
  width:300px;
  right:0;
}
nav#nav-mobile ul {
	filter:drop-shadow(-4px 6px 2px hsla(0, 0%, 0%, 0.1));
	display:none;
	list-style-type:none;
  margin-top:0;
  border-radius:0 0 0 20px;
  overflow:hidden;
}
nav#nav-mobile li {
	display:block;
	width:100%;
  padding:15px 5px 0 5px;
  grid-column:span 2;
}
nav#nav-mobile span {
	display:block;
	width:100%;
  text-align:center;
}
nav#nav-mobile .navicon {
	height:28px;
	width:28px;
  margin:10px 0 2px 0 !important;
  padding:0;
}
nav#nav-mobile .navpoint a {
	text-decoration:none;
	text-align:left;
	color:var(--font-color);
	display:block;
	font-size:1.3rem;
	font-weight:500;
  text-align:center;
  height:60px;
}
@media all and (max-width:900px) {
  .navmg {
    display:grid;
    grid-template-columns: repeat(6,1fr);
    gap:0;
    border-bottom-left-radius:var(--border-radius);
    padding:0 5px 5px 5px;
    background:var(--bg-contrast-light);
   }
   nav#nav-mobile li {
     grid-column:span 3;
   }
   .menu-link {
    grid-column:span 3 !important;
   }
   .menu-link a {
     display:block;
     text-align:left;
     font-size:1.4rem;
     padding:3px 0;
     margin-left:5px;
     text-align:center;
   }
   .menu-link a img {
     width:16px;
     height:16px;
     margin:0 5px;
     filter:invert(var(--png-invert));
     opacity:.8;
   }
   #nav-trigger {
    display:block;
   }
   nav#nav-main {
    display:none;
   }
   nav#nav-mobile {
    display:block;
   }
}










/* Sub Navigation */

.subrub {
  margin-bottom:20px;
  display:flex;
  flex-direction:row;
}
.subrub_text {
  margin-bottom:25px;
  font-size:1.8rem;
}
.subrub a, .subrub span {
  display:block;
  font-size:2.5rem;
  font-weight:700;
}
.subrub .nxtico {
  width:22px;
  height:22px;
  margin:-3px 15px 0 5px;
  filter:invert(var(--png-invert));
  opacity:.6;
  scale:.9;
  transition: all 0.4s ease-in-out;
}

.submenu {
  margin:0;
}
.submenu a {
  display:inline-block;
	border-radius:14px;
	background-color:var(--bg-contrast);
	margin:1px 3px;
	padding:6px 10px;
	color:var(--font-color);
	font-size:1.3rem;
  opacity:.7;
  font-weight:400;
	text-decoration:none;
}
.sminvert a {
	background-color:var(--bg-color);
}
@media all and (min-width:640px) {
  .submenu a:hover {
    opacity:1;
    outline:3px solid var(--bg-contrast);
  }
  .subrub a:hover .nxtico {
    margin:-3px 10px 0 10px;
    opacity:.9;
    scale:1;
  }
  .sminvert a:hover {
    outline:3px solid var(--bg-color);
  }
}
.submenu-aktiv {
	outline:3px solid var(--bg-contrast) !important;
	border-radius:24px !important;
  opacity:1 !important;
	font-weight:500;
  margin-right:6px !important;
}
.sminvert .submenu-aktiv {
	outline:3px solid var(--bg-color) !important;
}
@media all and (max-width:640px) {
  .subrub {
    flex-direction:column;
    margin:30px 10px 20px 10px;
  }
  .subrub_text {
    margin:0 10px 25px 10px;
  }
  .submenu {
    width:107%;
    height:42px;
    overflow:hidden;
    margin-left:-4%;
    -webkit-mask-image: linear-gradient(to right, transparent 2%, black 5%, black 95%, transparent 99%);
    mask-image: linear-gradient(to right, transparent 2%, black 5%, black 95%, transparent 99%);
  }
  .submenu a:first-child {
    margin-left:5%;
  }
  .submenu2 {
    height:70px;
    padding:4px 20px 0 0;
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hide;
    -webkit-overflow-scrolling:touch;
  }
}
.dropbtn-subnav {
	cursor:pointer;
}
.dropbtn-subnav img {
  height:14px;
  width:14px;
  opacity:.7;
  filter:invert(var(--png-invert));
}
.dropdown-subnav {
	position:relative;
	display:inline-block;
}
.dropdown-subnav-content {
	display:none;
	position:absolute;
  z-index:1;
  text-align:center;
  border-radius:0 0 var(--border-radius) var(--border-radius);
  margin:5px 3px;
  width:205px;
  translate:-70px 0;
  padding:5px 5px 15px 5px;
	background-color:var(--bg-color-light);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter: blur(6px);
	filter:drop-shadow(-4px 4px 2px hsla(0, 0%, 0%, 0.1));
}
.dropdown-subnav-content a {
	display:inline-block;
	padding:8px;
  margin-top:5px;
	border:0;
  border-radius:24px;
}
.dropdown-subnav-content a:hover {
	border:0;
}
.show {display:block;}





/* Header */

.header {
	padding-top:5px;
	padding-bottom:5px;
}
.headergrid {
  max-width:1200px;
  margin:0px auto;
  padding:25px 15px 15px 15px;
	display:grid;
  grid-template-columns: 250px 1fr 250px;
  gap:0px;
  -webkit-user-select: none;
  user-select: none;
}
.logo {
	max-width:100%;
	height:70px;
  transition: all 0.3s ease-in-out;
}
.logo.up {
  animation: lg1 4s infinite;
}
@keyframes lg1 {
  0% { scale:1; }
  50% { scale:1; rotate:0; }
  55% { scale:.9; rotate:7deg; }
  58% { scale:1.1; rotate:-10deg; }
  65% { scale:.9; rotate:10deg; }
  68% { scale:1.1; rotate:0; }
  75% { scale:1;  }
  100% { scale:1; }
}
.logo.dn {
  animation: lg2 4s infinite;
}
@keyframes lg2 {
  0% { scale:1; }
  50% { scale:1; }
  53% { scale:1; }
  56% { scale:.95; }
  63% { scale:1; }
  66% { scale:.95; }
  73% { scale:1; }
  100% { scale:1; }
}
.logolink:hover .logo.up {
  filter:brightness(110%) hue-rotate(-5deg) saturate(150%) drop-shadow(#d67fff 0 0 20px);
}
.logolink:hover .logo.dn {
  filter:blur(1px);
  opacity:.8;
}
.logo-mobile {
	text-align:center;
	height:35px;
	margin-top:-7px;
}
.headerleft {
	text-align:left;
	padding-top:20px;
}
.headerleft div {
  font-size:1.2rem;
}
.headerlogo {
	text-align:center;
	padding-top:3px;
}
.headerright {
	text-align:right;
	padding-top:11px;
}

.userico-hd {
  border-radius:50%;
  padding:5px;
  width:35px;
  height:35px;
}
.userico-hd-lgdin {
  border-radius:50%;
  width:35px;
  height:35px;
}
.userico-hd-txt {
  font-size:1.8rem;
  font-weight:500;
  color:#000;
}

@media all and (max-width:640px) {
  header {
    background:var(--body-bg-uni);
    box-shadow: #00000044 0 0 20px;
  }
}






/* Footerbar */

@media all and (max-width:900px) {
  #footerbar {
    position:fixed;
    display:none;
    bottom:-60px;
    z-index:1;
    height:55px;
    width:100%;
    transition: all 400ms ease-out;
  }
  #footerbar span {
    display:flex;
    justify-content: center;
  }
  #footerbar a {
    font-size:.9rem;
    color:#fff;
    display:block;
    text-decoration:none;
    text-align:center;
    width:15%;
    height:65px;
    margin:0 2px;
    padding-top:8px;
    border-radius: 28px 28px 0 0;
    rotate:-4deg;
  }
  #footerbar b {
    display:block;
    font-weight:500 !important;
  }
  #footerbar a img {
    width:28px;
    height:28px;
    margin-bottom:2px;
    filter:invert(1);
  }
}











/* Full-Width Boxen */

.box-newsletter {
	padding:20px;
  margin-top:40px;
	color:#fff;
  background:var(--main-color);
}
.box-events {
	padding:5px 0 10px 0;
  margin-top:40px;
	background:var(--bg-events-uni);
}
.box-grau {
	padding:5px 0 40px 0;
  margin-top:20px;
	background:var(--hdbar-color);
	background:var(--spacer-color);
}
.box-weiss {
	padding:5px 0 10px 0;
  margin-top:40px;
	background:var(--bg-color);
}
















/* Preispläne */

#price {
  text-align: center;
  margin-top:-20px;
}

.plan {
  display: inline-block;
  margin: 10px 1% 30px 1%;
}

.plan-inner {
  margin: 0 auto;
  min-width: 280px;
  max-width: 100%;
  position:relative;
}

.entry-title {
  background: #53CFE9;
  height: 90px;
  position: relative;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
}

.entry-title>h3 {
  background: #20BADA;
  font-size: 16px;
  padding: 8px 0;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

.entry-title .price {
  position: absolute;
  bottom: -25px;
  background: #20BADA;
  height: 70px;
  width: 170px;
  margin: 0 auto;
  left: 0;
  right: 0;
  overflow: hidden;
  border-radius: 50px;
  border: 5px solid var(--bg-color);
  line-height: 60px;
  font-size: 20px;
  rotate:-3deg;
}
.entry-title .price span {
  font-size: 14px;
  rotate:-3deg;
}

.entry-content ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.entry-content li {
  border-bottom: 1px solid var(--bg-contrast-dark);
  background: var(--bg-color);
  font-size: 1.3rem;
  padding: 10px 0;
}

.entry-content li img {
  width:12px;height:12px;
  margin:-2px 3px 0 0;
}

.entry-content li:first-child {
  padding-top:40px;
  margin-top:-30px;
}

.entry-content li:last-child {
  border: none;
  padding-bottom:20px;
}

.basic .entry-title {
  background: #43c69899;
}

.basic .entry-title > h3 {
  background: #43c698;
}

.basic .price {
  background: #43c698;
}

.plus .entry-title {
  background: #3772aa99;
}

.plus .entry-title > h3 {
  background: #3772aa;
}

.plus .price {
  background: #3772aa;
}

.premium .entry-title > h3 {
  background: #DD4B5E;
}

.premium .entry-title {
  background: #DD4B5E99;
}

.premium .price {
  background: #DD4B5E;
}







.max-lines-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.max-lines-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.max-lines-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.max-lines-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}






/* Suchbox */

.suchfeld {
  text-align:center;
}
.suchinput {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  width: 300px;
  height: 44px;
  padding-left: 25px;
  background: url('../../images/ico_down.svg') no-repeat right 14px center/1.4em, linear-gradient(to left, rgba(255, 255, 255, .55) 50px, var(--bg-color) 50px);
  color: var(--font-color);
  font-size:1.8rem;
  border-radius: 20px;
  cursor: pointer;
}
.suchinput.wbg {
  background: url('../../images/ico_down.svg') no-repeat right 14px center/1.4em, linear-gradient(to left, rgba(100, 100, 100, .15) 50px, var(--bg-contrast) 50px);
}
.suchinput option {
  background-color: var(--bg-color);
}
.suchdata {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  width: 350px;
  height: 44px;
  padding-left: 25px;
  background: url('../../images/ico_nav_events.svg') no-repeat right 64px center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.55) 100px, var(--bg-color) 50px);
  color: var(--font-color);
  font-size:1.8rem;
  cursor: pointer;
}
#suchbox {
  padding:50px 30px 15px 30px;
  margin:-25px 0 25px 0;
  border-radius:0 0 var(--border-radius) var(--border-radius);
  border-top:1px solid var(--bg-contrast);
	filter:drop-shadow(0px 7px 3px rgba(0, 0, 0, 0.07));
	z-index:1;
  transform-origin: center center;
  translate:0 -30px;
	transition:all 0.6s ease-out;
}
#suchbox div div div label {
  position:absolute;font-size:1.2rem;font-weight:700;margin:4px 0 0 25px;
}
#suchbox div div .suchfeld {
  display:inline-block;width:300px;
}
#suchbox div div {
  text-align:center;
}
@media all and (max-width:640px) {
  #suchform select {
    scale:0.9;
    margin:-5px 0 -5px 0;
  }
  #suchbox {
    padding:35px 0 13px 0;
    margin:10px;
    border-radius:0 0 var(--border-radius) var(--border-radius);
  }
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-vlear-button,
input[type="date"]::calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}





/* Front Layout */

.box-wetter {
  background:#9fd2f3;
  min-height:250px;
  padding:0 7px;
  margin-bottom:10px;
  cursor:pointer;
  position: relative;
  overflow:hidden;
}
.box-wetter .bw1 {
  float:left;width:38%;text-align:center;margin:10px 6px 0 5px;
}
.box-wetter .bw1 img {
  width:50px;height:50px;margin:-35px 5px 0 -10px;filter:invert(1) brightness(200);
}
.bwx img {
  width:150px;height:150px;margin:50px 0 0 0;filter:invert(1) brightness(200);
}
.box-wetter .bw1 span {
  font-weight:400;font-size:5.8rem;letter-spacing:-3px;color:#fff;
}
.box-wetter .bw1 span span {
  font-weight:400;font-size:4rem;vertical-align:0.35em;
}
.box-wetter .bw2 {
  padding-top:12px;
}
.box-wetter .bw2 span {
  font-size:1.5rem;font-weight:700;color:#222;background-color: hsla(0, 0%, 100%, 0.8);padding: 2px 4px 2px 4px;
}
.box-wetter .bw3 {
  margin-top:7px;
}
.box-wetter .bw3 span {
  font-size:1.1rem;font-weight:500;color:#222;background-color: hsla(0, 0%, 100%, 0.8);padding: 2px 4px 2px 4px;margin-right:3px;
}
.box-wetter .bw3 span img {
  margin:-2px 0 0 -2px;width:16px;height:16px;opacity:.9;
}
.box-wetter .bw4 {
  margin-top:2px;margin-bottom:19px;
}
.box-wetter .bw4 span {
  font-size:1.1rem;font-weight:500;color:#222;background-color: hsla(0, 0%, 100%, 0.8);padding: 2px 4px 2px 4px;
}
.box-wetter .bw4 span img {
  margin-top:-2px;width:16px;height:16px;opacity:.9;
}
.box-wetter img {
  pointer-events:none;
}
.box-wetter a {
	display:block;
	text-decoration:none;
}
@media all and (min-width:640px) {
	.box-wetter {
    margin-bottom:0;
	}
}
.wetter-tabs {
  display:flex;
  flex-direction:row;
  padding:0px 2px 0px 2px;
}
.wetter-tab {
  width:16.666%;
  text-align:center;
  z-index:0;
  transition: all 300ms ease-in-out;
}
.wetter-tab .wt {
  margin:-8px 2px 4px 2px;
}
.wetter-tab .wt1 {
  padding:2px 0 3px 0;font-weight:700;font-size:1rem;color:#444;
}
.wetter-tab .wt2 {
  font-weight:500;color:#fff;font-size:1.8rem;margin:-5px 0 3px 0;
}
.wetter-tab .wt3 {
  font-weight:400;color:#fff;font-size:1.1rem;padding:2px 0 5px 0;
  
}
.wetter-tab .wt3 img {
  width:18px;height:18px;margin:-3px 0px 0 0;padding:0;
}
.wetter-tab img {
  width:100%;
  padding:4px 12px;
  filter:invert(1) brightness(200);
}
#fctt {
  position:absolute;display:none;top:80px;width:100%;z-index:1;text-align:center;
}
#fctt span {
  display:inline-block;padding:5px 10px;background:rgba(50, 50, 50, 0.9);color:#fff;font-size:1.3rem;
}


@media all and (min-width:640px) {

  .artikelblock-klein:hover {
    background-color:var(--bg-contrast);
    outline:8px solid var(--bg-contrast);
  }
  .artikelblock-klein:hover .box-img-klein {
    scale:1.06;
  }
}
.artikel-a {
	text-decoration:none;
	display:block;
	overflow:hidden;
  border-radius: var(--border-radius);
}
@media all and (max-width:640px) {
  .artikel-a { margin:0 10px; }
}

.titel-cont {
  max-width:600px;
  margin:10px 10px 8px 0;
	transition:all 0.3s;
}

.fronttop, .subfronttop { height:300px !important; }
@media all and (min-width:1000px) {
  .fronttop { height:425px !important; }
  .subfronttop { height:380px !important; }
  .fronttoptitel { font-size: 2.8rem !important; }
}

.card .wrapper {
	cursor:pointer;
	position:relative;
	overflow:hidden;
  margin:0 !important;
}
@media all and (min-width:640px) {
  .card .wrapper:hover .titel-cont {
    translate: 0 -5px;
  }
}
.card .data {
	background:linear-gradient(to top, rgba(35, 35, 35, .9) 0%, rgba(35, 35, 35, 0) 95%);
	position:absolute;
	bottom:0;
	width:100%;
	transition:all 0.6s;
}
.card .data .content {
	position:relative;
	z-index:1;
}
.rubrik-medium {
	text-transform:uppercase;
	margin:10px 0px 0px 0px;
	padding:4px 5px 3px 15px;
	color:#fff;
	font-size:1.2rem;
	font-weight:400;
}
.rubrik {
	text-transform:uppercase;
	margin:10px 0px 0px 10px;
	padding:4px 10px 3px 10px;
	font-size:1.2rem;
	font-weight:700;
	background-color:var(--main-color);
	color:#fff;
}
.rubrik-add {
	text-transform:uppercase;
	margin:10px 0px 0px 5px;
	padding:4px 7px 3px 7px;
	font-size:1.2rem;
	font-weight:400;
	background-color:rgba(50, 50, 50, 0.7);
	color:#fff;
}
.rubrik-add img, .rubrik-klein-add img {
  width:12px;height:12px;margin:-2px 3px 0 0;filter:invert(1);
}
.datum-add, .corner-add {
  position:absolute;
  display:inline-flex;
  text-align:center;
	margin:10px 0 0 20px;
	color:#222;
	font-size:2.8rem;
	font-weight:400;
  animation: floating 4s ease infinite;
}
@keyframes floating {
  0% { scale:1; }
  50% { scale:.9;  }
  100% { scale:1;  }
}

.corner-add.live div {
  border-radius:6px;
  font-size:1.4rem
}

.corner-add.quiz img {
  width:34px;height:34px;
  filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
}
.corner-add.quiz span {
  display:block;
  background:var(--bg-color-light);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:9px;border-radius:var(--border-radius);font-size:1.3rem;font-weight:500;
  filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.2));
}
.datum-add div {
  width:60px;
	background-color:rgba(255, 255, 255, 0.85);
  padding-bottom:2px;
  border-radius:var(--border-radius);
}
.datum-add div.bis {
  width:inherit;
  background-color:transparent;
  color:#fff;
  margin:15px 10px 0 10px;
}
.datum-add div span {
  display:block;
	padding:3px 0 2px 0;
  margin-bottom:2px;
  color:#fff;
	background-color:#f23d5b;
  font-size:1.2rem;
  font-weight:700;
  border-radius:var(--border-radius) var(--border-radius) 0 0;
}
.datum-add-small {
  display:inline-block;
  color:#fff;
	font-size:1.8rem;
	background-color:var(--rubrik-events);
  padding:1px 4px;
  margin:4px 0 10px 0;
  border-radius:var(--border-radius);
  opacity:.9;
}
.add2 {
	padding-left:0 !important;
}
.rubrik-live {
	animation-name:animation_blink;
	animation-timing-function:linear;
	animation-duration:2s; 
	animation-iteration-count:infinite;
	text-transform:uppercase;
	margin:10px 0px 0px 0px;
	padding:4px 7px 3px 7px;
	color:#fff;
	font-size:1.2rem;
	font-weight:500;
	background-color:hsla(0, 100%, 48%, 0.9);
}
.live-pulse {
  display:inline-block;width:8px;height:8px;margin:-2px 4px 0 0;border-radius:50%;background:#fff;vertical-align:middle;
}

@media all and (max-width:640px) {
  .rubrik, .rubrik-medium, .rubrik-add, .rubrik-live { font-size:1.1rem; }
}

.card .titel {
	margin:0 10px 10px 10px;
}
.card .text {
	height:59px;
  text-align:center;
	font-size:1.4rem;
  scale:.5;
	transition:all 0.4s;
}
.box-artikel .wrapper:hover .menu-content span {
	transform:translate(-50%, -10px);
	opacity:1;
}
.box-artikel .data {
	transform:translateY(59px);
}
.box-artikel .titel {
  color:var(--titel-color);
  font-size:2rem;
  text-decoration:none;
  font-weight:700;
  line-height:150%;
  word-break:break-word;
  margin-left:10px;
  padding:1px 9px;
  background:var(--titel-bg);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.box-img {
  pointer-events:none;position:absolute;width:100%;height:250px;object-fit:cover;object-position:center;
}
.box-img-klein {
  pointer-events:none;width:106px;height:106px;object-fit:cover;object-position:center;
}

.pretitel-line {
  padding-top:6px;white-space:nowrap;overflow:hidden;
}

.wrapper-klein {
  width:106px;height:106px;overflow:hidden;float:left;margin:0 10px 0 0;
}
.artikelblock-klein {
	padding-right:15px;
	display:block;
	cursor:pointer;
	height:106px;
	overflow:hidden;
	border-radius:var(--border-radius);
	transition:all 0.2s ease-in-out;
  background:var(--titel-box-hover);
  text-decoration:none !important;
  filter:drop-shadow(0px 0px 0px rgba(22, 27, 34, 0.15));
  outline:0 solid transparent;
}
.artikelblock-klein .box-img-klein {
	transition:all 0.2s ease-in-out;
}

.artikelblock-medium {
	display:block;
	cursor:pointer;
	overflow:hidden;
  border-radius:var(--border-radius);
}
.artikelblock-medium-content {
	padding:5px 15px 10px 15px !important;
}

.artikelblock-klein img {
  pointer-events:none;
}

.artikelblock-titel {
	margin-top:5px;
	font-weight:700;
	color:var(--titel-color);
	text-decoration:none;
  line-height:130%;
}
.artikelblock-titel.klein {
	font-size:1.6rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 3;
}
.artikelblock-titel.medium {
	font-size:1.7rem;
}
@media all and (max-width:640px) {
  .artikelblock-titel.medium, .artikelblock-titel.klein {
    font-size:1.7rem;
  }
  .artikelblock-medium {
    margin:0 10px;
    border-top-right-radius:var(--border-radius);
    border-top-left-radius:var(--border-radius);
  }
	.artikelblock-klein {
		margin:0 10px;
	}
  .artikelblock-klein div:first-of-type {
    border-radius:var(--border-radius);
  }
	.artikelblock-klein:first-child {
		margin-top:-20px;
	}
	.artikelblock-klein {
    border-radius:var(--border-radius);
	}
}

.rubrik-klein-live {
	animation-name:animation_blink;
	animation-timing-function:ease-in;
	animation-duration:2s; 
	animation-iteration-count:infinite;
	text-transform:uppercase;
	margin-right:10px;
	color:#fff;
	font-size:1.1rem;
	font-weight:500;
  background-color:#eee;
  padding:2px 4px 2px 4px;
  border-radius:3px;
}
.rubrik-klein-add img {
  float:inherit;
	filter:invert(var(--png-invert));
	opacity:.3;
}

@keyframes animation_blink {
	0% { background-color:hsla(0, 100%, 48%, 1); }
	20% { background-color:hsla(0, 100%, 48%, .7); }
	50% { background-color:hsla(0, 100%, 48%, 0.4); }
	80% { background-color:hsla(0, 100%, 48%, .7); }
	100% { background-color:hsla(0, 100%, 48%, 1); }
}

.rubrik-klein-add {
	text-transform:uppercase;
	margin-right:10px;
	color:#999;
	font-size:1.1rem;
	font-weight:500;
}
.rubrik-klein {
	margin-right:10px;
	color:var(--main-color);
	text-transform:uppercase;
	font-size:1.2rem;
	font-weight:500;
}




/* Tab Boxen */

.box-tab-container {
  margin-bottom:10px;margin-top:-48px;border-bottom:2px solid var(--bg-contrast);
}
.box-tab {
  display:inline-block;background:var(--bg-contrast);padding:10px;margin-bottom:0px;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:1.4rem;font-weight:500;translate:0 0;transition:all 0.2s ease-in-out;
}
.box-tab img {
  width:16px;height:16px;margin:-3px 3px 0 0;filter:invert(var(--png-invert));
}
.box-tab.inaktiv {
  opacity:.7;padding:8px 10px 8px 10px;cursor:pointer;
}
.box-tab.inaktiv:hover {
  opacity:1;padding:10px;
}
.mgmknr {
  position:relative;margin-bottom:-28px;outline:2px solid var(--bg-color);background:var(--main-color);color:#eee;text-align:center;padding-top:5px;width:28px;height:28px;border-bottom-right-radius:var(--border-radius);border-top-left-radius:var(--border-radius);
}
@media screen and (max-width:640px) {
  .box-tab-container {
    margin:15px 10px 10px 10px;
  }
}

.box::-webkit-scrollbar {
	width:8px;
	background-color:var(--scrollbar2);
}
.box::-webkit-scrollbar-button {
	height:0px;
}
.box::-webkit-scrollbar-thumb {
	background-color:var(--scrollbar1);
}
.box {
	margin:0 0 20px 0;
}
.box.mgmk {
  height:545px;
}
@media all and (min-width:640px) {
.box {
  padding:10px 0;
  margin:-10px 0 0 0;
	overflow-y:auto;
	scrollbar-color:var(--scrollbar1) var(--scrollbar2);
  scrollbar-width:thin;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scroll:touch;
}
.box.km {
	height:474px;
}
.box.mgmk {
  height:389px;
}
}









/* Lazy Loading */

.gradient-load {
    background: var(--gradient-loader);
    background-size: 200% 200%;
    animation: gradientload 1s ease infinite;
}
@keyframes gradientload { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}




/* Buttons */

.btn-bg-main span,
.btn-bg-main:before {
  background:var(--main-color);
  color:#222;
}

.btn-bg-blau span,
.btn-bg-blau:before {
  background: #58aeff;
  background: linear-gradient(to top right, #58aeff 20%, #7abfff 100%);
}


.btn-bg-white span,
.btn-bg-white:before {
  font-size:1.3rem !important;
  padding: 5px 10px 4px 10px !important;
  background: var(--bg-contrast);
  vertical-align: middle;
  color:var(--font-color);
}
.btn-bg-white2 span,
.btn-bg-white2:before {
  font-size:1.3rem !important;
  padding: 5px 10px 4px 10px !important;
  background: var(--bg-color);
  vertical-align: middle;
  color:var(--font-color);
}



.hoi-button {
  display: inline-block;
  all:unset;
  cursor:pointer;
  color: #fff;
  position: relative;
}
.hoi-button i {
  margin-top: -1px;
  margin-right: 20px;
  font-size: 1.265em;
  vertical-align: middle;
}
.hoi-button span {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 20px;
  font-size: 1.4rem;
  font-weight:500;
  position: relative;
  will-change: transform, filter;
  transform-style: preserve-3d;
  transition: all 0.3s ease-out;
}
.hoi-button span img {
  width:14px;height:14px;margin:-1px 5px 0 0;
  transition: all 0.3s ease-out;
}
.hoi-button:focus, .hoi-button:active {
  color: #fff;
}
.hoi-button:hover {
  color: #fff;
}
.hoi-button:hover span {
  filter: brightness(1.05) contrast(1.05);
  transform: scale(0.95);
}
.btn-bg-white2.hoi-button:hover span {
  filter: inherit;
  background: var(--bg-contrast);
  transform: scale(0.95);
}
.hoi-button:hover span img {
  rotate:-135deg !important;
  scale:1.4;
}

.file-upload, .file-upload-logo {
	position: relative;
	display: block;
  margin-top:20px;
}
.file-upload__input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 1;
  width: 0;
  height: 100%;
  opacity: 0;
}


/* Buttons Alt */

.btn {
  display:inline-block;
  border:0;
  border-radius:6px;
  white-space:nowrap;
  margin-top:.5rem;
  cursor:pointer;
  padding:.6rem 2.5rem;
  font-size:1.4rem;
  color:#fff;
  transition: all 0.2s ease-in-out;
	background-color:var(--main-color);
}
.btn:hover,
.btn:focus {
	transform:scale(1.05);
  text-decoration:none;
}
.btn-nh:hover,
.btn-nh:focus {
	transform:none;
  box-shadow:none;
}
.btn:active {
	transform:scale(0.95);
}
.btn.btn-newsletter {
	background-color:var(--main-color);
}
.btn.btn-aktuell {
	background-color:var(--rubrik-aktuell);
}
.btn.btn-magazin {
	background-color:var(--rubrik-magazin);
}
.btn.btn-events {
	background-color:var(--rubrik-events);
}
.btn.btn-quiz {
	background-color:var(--rubrik-quiz);
}
.btn.btn-monstory {
	background-color:var(--rubrik-monstory);
}
.btn.btn-wetter {
	background-color:#4285c9;
}
.btn.btn-light {
  background-color:var(--bg-contrast);
  color:var(--font-color);
}
.btn.btn-white {
  padding:.4rem 1.5rem .3rem 1.5rem;
  background-color:var(--bg-color);
  color:var(--font-color);
}
.btn.btn-link {
  background:transparent;
  border-color:transparent;
  color:#333;
}
.btn.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link:active {
  background:#f4f4f4;
  color:#333;
}
.btn-link-hd {
  display:flex;
  background:var(--bg-contrast-light);
  border:7px solid transparent;
  color:#fff;
  font-size:1.2rem;
  font-weight:500;
  padding:2px;
  border-radius:50% !important;
  width:38px;height:38px;
  cursor:pointer;
  justify-content:center;
  padding-top:2px;
  margin-top:6px;
  margin-left:6px;
}
.btn-link-hd.muted {
  opacity: 0.5;
}
.btn-link-hd img {
  filter:invert(1);width:20px;height:20px;
  transition: all 0.2s ease-out;
}
.btn-link-hd-color img {
  transition: all 0.4s ease-out;
}
.btn-link-hd-color {
  background:var(--main-color);
  border:5px solid var(--main-color);
  padding:2px;
  border-radius:50% !important;
  width:48px;height:48px;
  margin-left:7px;
  cursor:pointer;
  transition: all 0.2s ease-out;
}
.btn-link-hd:hover {
  background:var(--bg-contrast);
  filter:drop-shadow(#f2a0ffcc 0 0 10px);
}
.btn-link-hd:hover img, .btn-link-hd-color:hover img {
  scale:1.2;
}
.btn-link-hd-color:hover {
  background:var(--main-color-light);
  border:5px solid var(--main-color-light);
  filter:drop-shadow(#ffe043cc 0 0 10px);
}
.btn.btn-sm {
  border-radius:1.5rem;
  font-size:1.3rem;
  height:2.4rem;
  line-height:1.4rem;
  padding:.6rem 1rem;
}
.btn.btn-lg {
  font-size:1.6rem;
  height:3rem;
  padding:.6rem 1rem;
}
.btn-link {
  all:unset;
  background:transparent;
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.btn-link:hover {
  border-bottom:2px solid var(--font-color);
}

@media screen and (max-width:640px) {
  .hoi-button span {
    padding: 7px 30px;
  }
}








/* Formulare */


input, select, option {
  color:#222 !important;
}


.input-wrapper {
  position: relative;
}
.input-wrapper .form-input::placeholder {
  color: transparent;
}
.input-wrapper .form-input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

.input-wrapper .label {
  position: absolute;
  display:block;
  font-size:1.5rem;
  top: 7px;
  left: 9px;
  color:#777;
  padding:3px 6px;
  border-radius:.5rem;
  background:var(--bg-color);
  pointer-events: none;
  transform-origin: left center;
  transition: transform 250ms;
}

.input-wrapper .form-input:focus + .label,
.input-wrapper .form-input:not(:placeholder-shown) + .label {
  transform: translateY(-19px) scale(0.6);
  padding:4px 8px;
  border:0px solid var(--bg-contrast-dark);
  background:var(--main-color-extralight);
}


@media screen and (max-width:640px) {
.cism {
  display:block;text-align:center;
}
}

.form-group:not(:last-child) {
  margin-top:1rem;
  margin-bottom:1rem;
}
.form-input {
  background:var(--bg-color);
  color:var(--font-color);
  background-image:none;
  border:1px solid var(--bg-contrast-dark);
  border-radius:var(--border-radius);
  display:block;
  font-size:1.4rem;
  height:3.2rem;
  line-height:1.6rem;
  max-width:100%;
  outline:0;
  padding:19px 10px 16px 10px;
  position:relative;
  width:100%;
}
.form-input.mail-input {
  background:var(--bg-color) url(data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%203334%203334%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%22%3E%3Cpath%20d%3D%22M2916.67%2C1111.11l-494.556%2C274.753c-275.722%2C153.178%20-413.583%2C229.775%20-559.583%2C259.803c-129.222%2C26.569%20-262.5%2C26.569%20-391.722%2C-0c-145.995%2C-30.028%20-283.857%2C-106.625%20-559.584%2C-259.803l-494.555%2C-274.753m444.444%2C1527.78l1611.11%2C-0c155.57%2C-0%20233.361%2C-0%20292.778%2C-30.278c52.264%2C-26.625%2094.764%2C-69.125%20121.389%2C-121.389c30.278%2C-59.416%2030.278%2C-137.208%2030.278%2C-292.778l-0%2C-1055.56c-0%2C-155.57%20-0%2C-233.356%20-30.278%2C-292.775c-26.625%2C-52.268%20-69.125%2C-94.763%20-121.389%2C-121.393c-59.417%2C-30.277%20-137.208%2C-30.277%20-292.778%2C-30.277l-1611.11%2C0c-155.569%2C0%20-233.355%2C0%20-292.775%2C30.277c-52.268%2C26.63%20-94.762%2C69.125%20-121.393%2C121.393c-30.276%2C59.419%20-30.276%2C137.204%20-30.276%2C292.775l-0%2C1055.56c-0%2C155.57%20-0%2C233.362%2030.276%2C292.778c26.631%2C52.264%2069.125%2C94.764%20121.393%2C121.389c59.42%2C30.278%20137.204%2C30.278%20292.775%2C30.278Z%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23777%3Bstroke-width%3A208.33px%3B%22%2F%3E%3C%2Fsvg%3E) no-repeat left 1rem center / 2rem 2rem;
  padding-left:3.5rem;
}
.form-input.user-input {
  background:var(--bg-color) url(data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%203334%203334%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%22%3E%3Cpath%20d%3D%22M1690.21%2C1666.67c326.355%2C-0%20590.924%2C-264.566%20590.924%2C-590.924c-0%2C-326.358%20-264.569%2C-590.924%20-590.924%2C-590.924c-326.356%2C0%20-590.921%2C264.566%20-590.921%2C590.924c-0%2C326.358%20264.565%2C590.924%20590.921%2C590.924Z%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23777%3Bstroke-width%3A220.83px%3B%22%2F%3E%3Cpath%20d%3D%22M603.004%2C2848.51c67.41%2C-232.446%20206.582%2C-437.626%20397.621%2C-586.208c191.037%2C-148.582%20424.159%2C-232.966%20666.042%2C-241.085c486.921%2C-0%20901.749%2C343.918%201063.66%2C827.293%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23777%3Bstroke-width%3A220.83px%3B%22%2F%3E%3C%2Fsvg%3E) no-repeat left 1rem center / 2rem 2rem;
  padding-left:3.5rem;
}
.form-input.pass-input {
  background:var(--bg-color) url(data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%203334%203334%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%22%3E%3Cpath%20d%3D%22M442.333%2C2156.4c-0%2C-346.29%20-0%2C-519.436%20107.58%2C-627.018c107.579%2C-107.582%20280.726%2C-107.582%20627.02%2C-107.582l979.467%2C-0c346.291%2C-0%20519.436%2C-0%20627.018%2C107.582c107.582%2C107.582%20107.582%2C280.728%20107.582%2C627.018c0%2C346.291%200%2C519.436%20-107.582%2C627.018c-107.582%2C107.582%20-280.727%2C107.582%20-627.018%2C107.582l-979.467%2C0c-346.294%2C0%20-519.441%2C0%20-627.02%2C-107.582c-107.58%2C-107.582%20-107.58%2C-280.727%20-107.58%2C-627.018Z%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23777%3Bstroke-width%3A208.33px%3B%22%2F%3E%3Cpath%20d%3D%22M932.066%2C1421.8l0%2C-244.867c0%2C-405.708%20328.892%2C-734.6%20734.601%2C-734.6c405.707%2C-0%20734.6%2C328.892%20734.6%2C734.6l-0%2C244.867%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23777%3Bstroke-width%3A208.33px%3Bstroke-linecap%3Around%3B%22%2F%3E%3Cpath%20d%3D%22M1176.93%2C2156.4l1.102%2C0m487.53%2C0l1.102%2C0m488.631%2C0l1.102%2C0%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23777%3Bstroke-width%3A291.67px%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%22%2F%3E%3C%2Fsvg%3E) no-repeat left 1rem center / 2rem 2rem;
  padding-left:3.5rem;
}
.form-input.euro-input {
  background:var(--bg-color) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xOSA3LjExMTExQzE3Ljc3NSA1LjIxODY0IDE1Ljg1NTYgNCAxMy42OTc5IDRDOS45OTg3NSA0IDcgNy41ODE3MiA3IDEyQzcgMTYuNDE4MyA5Ljk5ODc1IDIwIDEzLjY5NzkgMjBDMTUuODU1NiAyMCAxNy43NzUgMTguNzgxNCAxOSAxNi44ODg5TTUgMTBIMTRNNSAxNEgxNCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+) no-repeat left 1rem center / 2rem 2rem;
  padding-left:3.5rem;
}
.form-input.ja-input {
  background:#dbffce url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0zODItMjQwIDE1NC00NjhsNTctNTcgMTcxIDE3MSAzNjctMzY3IDU3IDU3LTQyNCA0MjR6IiBmaWxsPSIjMDBjNTIwIi8+PC9zdmc+) no-repeat left 1rem center / 2rem 2.5rem;
  padding-left:3.5rem;
}
.form-input.nein-input {
  background:#ffe2ce url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yNTYtMmUyLTU2LTU2IDIyNC0yMjQtMjI0LTIyNCA1Ni01NiAyMjQgMjI0IDIyNC0yMjQgNTYgNTYtMjI0IDIyNCAyMjQgMjI0LTU2IDU2LTIyNC0yMjQtMjI0IDIyNHoiIGZpbGw9IiNlYjIxM2MiLz48L3N2Zz4=) no-repeat left 1rem center / 2rem 2.5rem;
  padding-left:3.5rem;
}
.form-input.noborder {
  border:0;
}
.form-input:focus, .form-select:focus {
  outline: 1px solid #d685ff;
  box-shadow: #db94ff 0 0 30px;
}
.form-input[disabled] {
  opacity:.6;
}
.form-input.input-sm {
  height:2.4rem;
  padding:.3rem .6rem;
}
.form-input.input-lg {
  border-radius:.4rem;
  font-size:1.6rem;
  height:4.2rem;
  line-height:2rem;
  padding:1rem .8rem;
}
.form-input.input-inline {
  display:inline-block;
  vertical-align:middle;
  width:auto;
}
.form-label {
  display:block;
  line-height:1.6rem;
  margin-bottom:.5rem;
}
.form-select {
  background:var(--bg-color);
  color:var(--font-color);
  border:0;
  font-size:1.4rem;
  line-height:1.6rem;
  outline:0;
  padding:10px 6px;
  vertical-align:middle;

}
.form-select.select-sm {
  border-radius:.2rem;
  font-size:1.2rem;
  height:2.4rem;
  padding:.4rem 2rem .4rem .6rem;
}
.form-select.select-lg {
  font-size:1.6rem;
  height:4.2rem;
  line-height:2rem;
  padding:1rem 2.4rem 1rem .8rem;
}
.form-checkbox input,
.form-radio input,
.form-switch input {
  clip:rect(0, 0, 0, 0);
  height:.1rem;
  margin:-.1rem;
  overflow:hidden;
  position:absolute;
  width:.1rem;
}
.form-checkbox,
.form-radio {
  cursor:pointer;
  display:inline-block;
  line-height:1.8rem;
  padding:.3rem 2rem;
  position:relative;
}
.form-checkbox .form-icon,
.form-radio .form-icon {
  border:.1rem solid #c5c5c5;
  display:inline-block;
  font-size:1.4rem;
  height:1.4rem;
  left:0;
  line-height:2.4rem;
  outline:none;
  padding:0;
  position:absolute;
  top:.5rem;
  transition:all .15s ease;
  vertical-align:top;
  width:1.4rem;
}
.form-checkbox:hover .form-icon,
.form-radio:hover .form-icon {
  border-color:#929292;
}
.form-checkbox input:focus + .form-icon,
.form-radio input:focus + .form-icon {
  border-color:var(--main-color);
}
.form-checkbox input:checked + .form-icon,
.form-radio input:checked + .form-icon {
  background:var(--main-color);
  border-color:var(--main-color);
}
.form-checkbox input:active + .form-icon,
.form-radio input:active + .form-icon {
  background:#efefef;
}
.form-checkbox .form-icon {
  border-radius:.2rem;
}
.form-checkbox input:checked + .form-icon::after {
  background-clip:padding-box;
  border:.2rem solid #fff;
  border-left-width:0;
  border-top-width:0;
  content:"";
  height:1rem;
  left:50%;
  margin-left:-.3rem;
  margin-top:-.6rem;
  position:absolute;
  top:50%;
  transform:rotate(45deg);
  width:.6rem;
}
.form-checkbox input:indeterminate + .form-icon {
  background:var(--main-color);
  border-color:var(--main-color);
}
.form-checkbox input:indeterminate + .form-icon::after {
  background:#fff;
  content:"";
  height:.2rem;
  left:50%;
  margin-left:-.4rem;
  margin-top:-.1rem;
  position:absolute;
  top:50%;
  width:.8rem;
}
.form-radio .form-icon {
  border-radius:.7rem;
}
.form-radio input:checked + .form-icon::after {
  background:#fff;
  border-radius:.2rem;
  content:"";
  height:.4rem;
  left:50%;
  margin-left:-.2rem;
  margin-top:-.2rem;
  position:absolute;
  top:50%;
  width:.4rem;
}
.form-switch {
  cursor:pointer;
  display:inline-block;
  line-height:2rem;
  margin-top:2px;
  padding:.3rem 2rem .3rem 3.6rem;
  position:relative;
}
.form-switch .form-icon {
  background:#c5c5c5;
  background-clip:padding-box;
  border:.1rem solid #c5c5c5;
  border-radius:.9rem;
  display:inline-block;
  height:1.8rem;
  left:0;
  line-height:2.6rem;
  outline:none;
  padding:0;
  position:absolute;
  top:.4rem;
  vertical-align:top;
  width:3rem;
}
.form-switch .form-icon::after {
  background:#fff;
  border-radius:50%;
  content:"";
  display:block;
  height:1.2rem;
  margin:2px;
  left:0;
  position:absolute;
  top:0;
  transition:left .15s ease;
  width:1.2rem;
}
.form-switch input:checked + .form-icon {
  background:var(--main-color);
  border-color:var(--main-color);
}
.form-switch input:checked + .form-icon::after {
  left:1.2rem;
}
.form-switch input:active + .form-icon::after {
  background:#efefef;
}
.input-group {
  display:flex;
}
.input-group .input-group-addon {
  background:#f9f9f9;
  border:.1rem solid #c5c5c5;
  border-radius:.3rem;
  line-height:1.6rem;
  padding:.7rem .8rem;
}
.input-group .input-group-addon.addon-sm {
  font-size:1.2rem;
  padding:.3rem .6rem;
}
.input-group .input-group-addon.addon-lg {
  font-size:1.6rem;
  line-height:2rem;
  padding:1rem .8rem;
}
.input-group .input-group-addon,
.input-group .input-group-btn {
  flex:1 0 auto;
}
.input-group .form-input:focus,
.input-group .input-group-addon:focus,
.input-group .input-group-btn:focus {
  z-index:99;
}










/* Responsive Hide + Show */

@media screen and (min-width:900px) {
  .hide-lg {
	display:none !important;
  }
}
@media screen and (max-width:900px) {
  .show-lg {
	display:none !important;
  }
  .newline-sm {
	display:block !important;
  }
}





/* Tooltips */

.tooltip {
  position:relative;
  z-index:3;
}
.tooltip::after {
  border-radius:1em;
  background:var(--main-color-light);
  bottom:100%;
  color:#fff;
  content:attr(data-tooltip);
  display:block;
  font-size:1.2rem;
  left:50%;
  max-width:100rem;
  opacity:0;
  overflow:hidden;
  margin-top:4px;
  padding:.5rem 1rem;
  pointer-events:none;
  position:absolute;
  text-overflow:ellipsis;
  transform:translate(-50%, 0);
  transition:all 200ms ease;
  z-index:1;
}
.tooltip:hover::after {
  opacity:1;
  transform:translate(-50%, -5px);
}
.tooltip.tooltip-right::after {
  background:rgba(85, 85, 85, .95);
  font-size:1rem;
  bottom:50%;
  left:100%;
  transform:translate(-20%, 50%);
}
.tooltip.tooltip-right:hover::after {
  transform:translate(3px, 50%);
}
.tooltip.tooltip-bottom::after {
  bottom:auto;
  color:var(--font-color);
  top:100%;
  background:transparent;
  transform:translate(-50%, -50%);
}
.tooltip.tooltip-bottom:hover::after {
  transform:translate(-50%, 5px);
  opacity:.8;
}
.tooltip.tooltip-left::after {
  bottom:50%;
  left:auto;
  right:100%;
  transform:translate(0, 50%);
}
.tooltip.tooltip-left:hover::after {
  transform:translate(-.5rem, 50%);
}









/* Nice Modal */

.hoimodal-overlay{display:none;z-index:99;position:fixed;left:0;top:0;overflow-y:auto;background-color:rgba(0,0,0,0.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.hoimodal-wrap-modal-content{display:none;}
.hoimodal-window{position:relative;max-height:70vh;overflow-y:auto;display:none;-webkit-user-select:none;user-select:none;background:var(--body-bg-uni);z-index:99;background-position:center center;background-repeat:no-repeat;background-image:url(../../images/ico_loading.svg);background-size:40px;border-radius:0;box-shadow:0 0 20px 0 rgba(0,0,0,0.5)}
.hoimodal-close-button{cursor:pointer;background-image:url(../../images/ico_close.svg);background-size:70% 70%;background-repeat:no-repeat;background-position:center center;border:0;margin:8px 8px 0 0;width:24px;height:24px;border-radius:50%;padding:4px;position:absolute;right:10px;top:10px;z-index:9;}
.hoimodal-close-button:hover{scale:1.1;}

.closebtn {
  float:right;width:24px;height:24px;margin:10px 12px 0 0;background:var(--body-bg-uni);border-radius:50%;padding:4px;cursor:pointer;
}
.closebtn:hover {
  scale:1.1;
}








/* Event Slider */

.sliderbox {
	margin:-20px 10px 0 10px;
  border-radius:var(--border-radius);
}
@media (max-width:740px) {
  .sliderbox {
    margin:-25px 0 0 0;
  }
  .sliderbox a div {
    margin:0 5px;
  }
}
.hoislider-enabled {
  position:relative;
}
.hoislider-enabled:focus { outline: none; }
.hoislider-viewport {
  overflow:hidden;
  position:relative;
  height:100%;
}
.hoislider-slider {
  position:absolute;
  width:100%;
  height:100%;
}
.hoislider-button {
  position:absolute;
  background:hsla(0, 0%, 100%, 0.75);
  border:none;
  color:#333;
}
.hoislider-button:hover {
  background:white;
  cursor:pointer;
}
.hoislider-button:focus {
  outline:none;
  box-shadow:0 0 0 5px #19F;
}
.hoislider-button:active {
  opacity:.6;
}
.hoislider-button:disabled {
  opacity:.3;
  cursor:auto;
  pointer-events:none;
}
.hoislider-button-icon {
  fill:currentColor;
}
.hoislider-prev-next-button {
  top:50%;
  padding:20px;
  width:40px;
  height:40px;
  border-radius:50%;
  transform:translateY(-50%);
}
.hoislider-prev-next-button.previous { left: -35px; }
.hoislider-prev-next-button.next { right: -35px; }
.hoislider-prev-next-button .hoislider-button-icon {
  position: absolute;
  left:30%;
  top:30%;
  width:40%;
  height:40%;
}
.hoislider-page-dots {
  display:none;
}

@media all and (max-width:640px) {
  .carousel {
    -webkit-mask-image: linear-gradient(to right, transparent -10%, black 5%, black 95%, transparent 110%);
    mask-image: linear-gradient(to right, transparent -10%, black 5%, black 95%, transparent 110%);
  }
  .carousel-cell {
    width:80%;
    counter-increment:carousel-cell;
    padding:20px 0;
  }
  .hoislider-prev-next-button.previous {
    display:none;
  }
  .hoislider-prev-next-button.next {
    display:none;
  }
}
@media all and (min-width:640px) {
  .carousel-cell {
    width:50%;
    counter-increment:carousel-cell;
    padding:20px 0;
  }
}
@media all and (min-width:1100px) {
  .carousel-cell {
    width:25%;
    counter-increment:carousel-cell;
    padding:20px 0;
  }
}










/* hoimap Map */

.hoimap-control-attribution,
.hoimap-bar,
.hoimap-pane {
  z-index: 0 !important;
}

.hoimap-pane,
.hoimap-tile,
.hoimap-marker-icon,
.hoimap-marker-shadow,
.hoimap-tile-container,
.hoimap-pane > svg,
.hoimap-pane > canvas,
.hoimap-zoom-box,
.hoimap-image-layer,
.hoimap-layer {
	position: absolute;
	left: 0;
	top: 0;
}
.hoimap-container {
	overflow: hidden;
}
.hoimap-tile,
.hoimap-marker-icon {
	-webkit-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
}
.hoimap-tile::selection {
	background: transparent;
}
.hoimap-safari .hoimap-tile {
	image-rendering: -webkit-optimize-contrast;
}
.hoimap-safari .hoimap-tile-container {
	width: 1600px;
	height: 1600px;
  transform-origin: 0 0;
}
.hoimap-marker-icon {
	display: block;
}
.hoimap-container .hoimap-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
}
.hoimap-container .hoimap-marker-pane img,
.hoimap-container .hoimap-shadow-pane img,
.hoimap-container .hoimap-tile-pane img,
.hoimap-container img.hoimap-image-layer,
.hoimap-container .hoimap-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
}

.hoimap-container img.hoimap-tile {
	mix-blend-mode: plus-lighter;
}

.hoimap-container.hoimap-touch-zoom {
	touch-action: pan-x pan-y;
}
.hoimap-container.hoimap-touch-drag {
	touch-action: none;
	touch-action: pinch-zoom;
}
.hoimap-container.hoimap-touch-drag.hoimap-touch-zoom {
	touch-action: none;
}
.hoimap-container {
	-webkit-tap-highlight-color: transparent;
}
.hoimap-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.hoimap-tile {
	filter: inherit;
	visibility: hidden;
}
.hoimap-tile-loaded {
	visibility: inherit;
}
.hoimap-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
}
.hoimap-overlay-pane svg {
  -webkit-user-select: none;
  user-select: none;
}

.hoimap-pane         { z-index: 400; }
.hoimap-tile-pane    { z-index: 200; }
.hoimap-overlay-pane { z-index: 400; }
.hoimap-shadow-pane  { z-index: 500; }
.hoimap-marker-pane  { z-index: 600; }
.hoimap-tooltip-pane   { z-index: 650; }
.hoimap-popup-pane   { z-index: 700; }
.hoimap-map-pane canvas { z-index: 100; }
.hoimap-map-pane svg    { z-index: 200; }
.hoimap-vml-shape {
	width: 1px;
	height: 1px;
}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
}

.hoimap-control {
	position: relative;
	pointer-events: visiblePainted;
	pointer-events: auto;
}
.hoimap-top,
.hoimap-bottom {
	position: absolute;
	pointer-events: none;
}
.hoimap-top {
	top: 0;
}
.hoimap-right {
	right: 0;
}
.hoimap-bottom {
	bottom: 0;
}
.hoimap-left {
	left: 0;
}
.hoimap-control {
	float: left;
	clear: both;
}
.hoimap-right .hoimap-control {
	float: right;
}
.hoimap-top .hoimap-control {
	margin-top: 10px;
}
.hoimap-bottom .hoimap-control {
	margin-bottom: 0;
}
.hoimap-left .hoimap-control {
	margin-left: 10px;
}
.hoimap-right .hoimap-control {
	margin-right: 0;
}

.hoimap-fade-anim .hoimap-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
}
.hoimap-fade-anim .hoimap-map-pane .hoimap-popup {
	opacity: 1;
}
.hoimap-zoom-animated {
	transform-origin: 0 0;
}
svg.hoimap-zoom-animated {
	will-change: transform;
}

.hoimap-zoom-anim .hoimap-zoom-animated {
	transition:transform 0.25s cubic-bezier(0,0,0.25,1);
}
.hoimap-zoom-anim .hoimap-tile,
.hoimap-pan-anim .hoimap-tile {
	transition: none;
}

.hoimap-zoom-anim .hoimap-zoom-hide {
	visibility: hidden;
}

.hoimap-interactive {
	cursor: pointer;
}
.hoimap-grab {
	cursor: -webkit-grab;
	cursor:         grab;
}
.hoimap-crosshair,
.hoimap-crosshair .hoimap-interactive {
	cursor: crosshair;
}
.hoimap-popup-pane,
.hoimap-control {
	cursor: auto;
}
.hoimap-dragging .hoimap-grab,
.hoimap-dragging .hoimap-grab .hoimap-interactive,
.hoimap-dragging .hoimap-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:         grabbing;
}

.hoimap-marker-icon,
.hoimap-image-layer,
.hoimap-pane > svg path,
.hoimap-tile-container {
	pointer-events: none;
}

.hoimap-marker-icon.hoimap-interactive,
.hoimap-image-layer.hoimap-interactive,
.hoimap-pane > svg path.hoimap-interactive,
svg.hoimap-image-layer.hoimap-interactive path {
	pointer-events: visiblePainted;
	pointer-events: auto;
}

  
.hoimap-container {
  font-family:Inter, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
}
  

.hoimap-bar a {
	background-color: var(--main-color);
  margin-bottom:7px;
	width: 32px;
	height: 32px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
  border-radius:50%;
  border:2px solid #fff;
}
.hoimap-bar a,
.hoimap-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}
.hoimap-bar a:hover,
.hoimap-bar a:focus {
	background-color: var(--main-color-light);
}
.hoimap-bar a.hoimap-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
}

.hoimap-control-zoom-in,
.hoimap-control-zoom-out {
  text-indent: 1px;
}
  
.hoimap-touch .hoimap-control-zoom-in, .hoimap-touch .hoimap-control-zoom-out  {
  font-size: 22px;
}
  
    
.hoimap-control-attribution {
  text-align:right;
}
.hoimap-control-attribution span {
	background: rgba(255, 255, 255, 0.5);
	margin: 0;
  display:block;
}
.hoimap-control-attribution img {
  height:14px;
  margin:-1px 5px 0 0;
}
.hoimap-control-attribution span {
  display:inline-block;
	padding: 3px 5px;
	color: #666;
  font-size: 0.8rem;
	line-height: 1.4;
  border-radius: px 0 0 0;
}
.hoimap-control-attribution a {
	text-decoration: none;
  color: #666;
}
.hoimap-control-attribution a:hover,
.hoimap-control-attribution a:focus {
	text-decoration: underline;
}


.hoimap-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 10px;
}
.hoimap-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 6px;
}
.hoimap-popup-content {
	margin: 10px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
}
.hoimap-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
}
.hoimap-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
}
.hoimap-popup-content-wrapper {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(22, 27, 34, 0.5);
}
.hoimap-container a.hoimap-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
}
.hoimap-container a.hoimap-popup-close-button:hover,
.hoimap-container a.hoimap-popup-close-button:focus {
	color: #585858;
}
.hoimap-popup-scrolled {
	overflow: auto;
}



@media print {
	.hoimap-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
}