/* basics */ /*
	dimensions & colours	
*/
/*
	sets defauls for basic elements
*/
* {
  margin: 0;
  padding: 0;
  font-family: "Lato", tahoma;
  box-sizing: border-box;
}

body {
  position: relative;
  overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin-bottom: 32px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  transition: color, background-color 300ms;
}

img {
  max-width: 100%;
}

input,
textarea {
  transition: 300ms;
}

/*
	override wordpress defaults
*/
.wp-block-columns,
.wp-block-image {
  margin-bottom: 0;
}

img {
  height: auto;
}

/*
	layout shit:
	- sections and containers
	- collumns
	- basic dimensions
	- helpers
*/
.container {
  width: 100%;
  max-width: 1240px;
  margin: 32px auto 0;
  padding: 16px;
}

#topbar > .container,
#header > .container {
  max-width: 1240px;
}

/* columns */
.container {
  position: relative;
  overflow: hidden;
}
.container .col-2,
.container .col-3,
.container .col-4,
.container .col-5,
.container .col-6,
.container .col-8,
.container .col-10,
.container .col-12 {
  float: left;
  padding: 16px;
}
.container .col-12 {
  width: 100%;
}
.container .col-10 {
  width: 83.33%;
}
.container .col-8 {
  width: 66.66%;
}
.container .col-6 {
  width: 50%;
}
.container .col-5 {
  width: 41.66%;
}
.container .col-4 {
  width: 33.33%;
}
.container .col-3 {
  width: 25%;
}
.container .col-2 {
  width: 16.66%;
}
.container .float-left {
  float: left;
  overflow: hidden;
}
.container .float-right {
  float: right;
  overflow: hidden;
}

/* helper */
.invis {
  display: none;
  visibility: hidden;
}

.is-fixed {
  position: fixed !important;
}

.is-bottom {
  top: auto;
  bottom: 0;
}

.vertical-center {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.extra-padding-bot-128 {
  padding-bottom: 128px !important;
}

.extra-padding-bot-96 {
  padding-bottom: 96px !important;
}

.extra-padding-bot-64 {
  padding-bottom: 64px !important;
}

.extra-padding-bot-32 {
  padding-bottom: 32px !important;
}

.extra-padding {
  padding: 64px;
}

.extra-padding-left-col {
  padding: 64px 32px 64px 64px;
}

.extra-padding-right-col {
  padding: 64px 64px 64px 0;
}

.invisible {
  display: none;
  visibility: hidden;
}

/* grid container */
.grid-container-2,
.grid-container-3,
.grid-container-4,
.grid-container-5,
.grid-container-6 {
  display: grid;
  gap: 16px 16px;
  padding: 16px;
}
.grid-container-2 > *,
.grid-container-3 > *,
.grid-container-4 > *,
.grid-container-5 > *,
.grid-container-6 > * {
  display: block;
  padding: 16px;
}

.grid-container-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-container-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-container-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-container-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-container-6 {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1024px) {
  .grid-container-5 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-container-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  .grid-container-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-container-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-container-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .grid-container-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-container-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-container-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-container-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 320px) {
  .grid-container-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-container-3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-container-4 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-container-5 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-container-6 {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* arrows */
.arrow-right,
.arrow-left,
.arrow-up,
.arrow-down {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 8px;
}

.arrow-huge {
  border-width: 0 8px 8px 0;
}

.arrow-right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow-left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.arrow-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* site specific */
/*
	dump new shit here, sort later
*/
/* ### fonts ################################################### */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/Lato-Regular.ttf);
  src: local("Lato-Regular"), local("Lato-Regular"), url(../fonts/Lato-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Lato-Bold.ttf);
  src: local("Lato-Bold"), local("Lato-Bold"), url(../fonts/Lato-Bold.ttf) format("truetype");
}
/* ### constants ############################################### */
/* ### layout ################################################## */
body {
  min-height: 100vh;
  position: relative;
  background-color: #eee;
}

h1 {
  font-size: 36px;
}

/* ### header ################################################## */
#contact-bar,
#topbar {
  width: 100%;
}
#contact-bar .container,
#topbar .container {
  margin: 0 auto;
  padding: 0 16px;
  overflow: visible;
}

#topbar {
  border-bottom: 24px solid #cc0000;
  text-align: center;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
#topbar .container {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
#topbar .container #logo-container {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  vertical-align: bottom;
}
#topbar .container #logo-container #logo-link {
  padding: 32px 16px;
  display: block;
  overflow: hidden;
}
#topbar .container #logo-container #logo-link #logo,
#topbar .container #logo-container #logo-link #logo-sub {
  display: block;
  margin: 0 auto;
}
#topbar .container #logo-container #logo-link #logo-sub {
  padding-left: 290px;
}

/* ### content ############################################################ */
#content {
  min-height: calc(100vh - 288px);
}
#content > .container {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
#content > .container > #content-wrap > * {
  padding: 16px;
  margin: 0 auto;
  max-width: 1240px;
}
#content > .container > #content-wrap ul {
  list-style: inside;
}
#content > .container > #content-wrap > .fullwidth {
  max-width: 100%;
}
#content > .container > #content-wrap > .fullwidth > img {
  padding-top: 0;
}
#content > .container > #content-wrap > .fullwidth > * {
  padding: 16px 0;
}
#content > .container > #content-wrap > .fullwidth > * > * {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
#content > .container > #content-wrap p {
  line-height: 1.35em;
}
#content > .container > #content-wrap .has-large-font-size:first-child {
  margin-top: 16px;
}

/* ### footer ############################################################ */
#footer {
  color: #444;
  text-align: center;
}
#footer .container {
  margin: 0 auto;
  padding: 0;
}
#footer .menu * {
  display: inline-block;
}
#footer .menu ul {
  margin: 0;
}
#footer .menu a {
  color: #444;
  margin-left: 12px;
  font-size: 14px;
}
#footer .menu a:hover {
  color: #000;
}
#footer #copyright {
  display: block;
  margin-top: 16px;
  color: gray;
  font-size: 12px;
}
#footer .admin_link.kundenberater {
  color: #cc0000;
  font-weight: bold;
}

#footer a.ktrl_selected {
  background-color: #45818e;
  color: #eae6ae;
}

/* ### probeabohinweise ##################################################### */
.probeabohinweis {
  height: 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.probeabohinweis > .probeabohinweis_inner {
  /*position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c3c4c7; */
  text-align: center;
  display: block;
}
.probeabohinweis > .probeabohinweis_inner a {
  color: #cc0000;
  font-weight: bold;
}
.probeabohinweis > .probeabohinweis_inner a:hover {
  color: #ee1100;
}

.close-button {
  background-image: url("../img/close-cross-black.png");
  background-size: contain;
  display: inline-block;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
}

/* ### login / logout #################################################### */
.login a {
  color: #444;
  font-weight: bold;
}
.login a:hover {
  color: #000;
}
.login h1 > a {
  background-image: url("../img/header_logo.png");
  background-size: contain;
  height: 70px;
  width: auto;
  position: relative;
}
.login h1 > a:after {
  position: absolute;
  background-image: url("../img/einfachnursingen.png");
  background-size: contain;
  content: "yo";
  width: 160px;
  height: 30px;
  bottom: 0;
  right: 24px;
}
.login #wp-submit {
  background-color: #444;
  border: 0;
}
.login #wp-submit:hover {
  background-color: #cc0000;
}
.login .dashicons {
  color: #444;
}
.login .message {
  border-color: #cc0000;
}
.login #nav,
.login .forgetmenot {
  display: none;
  visibility: hidden;
}
.login #login form p.submit,
.login #backtoblog {
  text-align: center;
}
.login #login form p.submit > a,
.login #backtoblog > a {
  color: #cc0000;
  transition: color 300ms;
}
.login #login form p.submit > a:hover,
.login #backtoblog > a:hover {
  color: #000;
}
.login .button-primary {
  float: none;
  margin: 0;
}
.login .privacy-policy-page-link {
  margin: 0;
}

#logout_container {
  /* .white_container ?*/
}
#logout_container .button.loginout {
  background-color: #444;
}
#logout_container .button.loginout:hover {
  background-color: #cc0000;
}

/* ### white_box ######################################################### */
#content > .container > #content-wrap .white_box,
#content > .container > #content-wrap .white_box_large {
  max-width: 386px;
  margin: 32px auto;
  padding: 32px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c3c4c7;
  text-align: center;
}

@media (max-width: 418px) {
  #content > .container > #content-wrap .white_box {
    margin: 32px;
  }
}
#content > .container > #content-wrap .white_box_large {
  max-width: 764px !important;
}

@media (max-width: 796px) {
  #content > .container > #content-wrap .white_box_large {
    margin: 32px;
  }
}
/* ### buttons ########################################################### */
a.button,
p.button > a {
  font-weight: bold;
  display: inline-block;
  word-wrap: break-word;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 16px 32px;
  color: #fff;
  transition: background-color 300ms;
  background-color: #134f5c;
  box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.33);
}
a.button:hover, a.button.ktrl_selected,
p.button > a:hover,
p.button > a.ktrl_selected {
  background-color: #45818e;
}
a.button.ktrl_selected,
p.button > a.ktrl_selected {
  border-color: #eae6ae;
}

/* ### tiles ############################################################# */
.tiles {
  margin: 0 auto;
  padding: 32px;
  gap: 16px;
}
.tiles > * {
  border-radius: 10px;
}

/* ### startseite ######################################################## */
.category-menu {
  max-width: 768px !important;
  padding: 64px 32px !important;
  gap: 32px;
}
.category-menu > * {
  position: relative;
  text-align: center;
  border: 2px solid #03588c;
  color: #03588c;
  font-weight: bold;
  font-size: 24px;
  margin: 0 !important;
  /* padding: 56.25% 5px 0; */
  padding: 88px 5px 0;
  box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.33);
  transition: background-color 300ms;
  background-color: #fff;
}
.category-menu > *:hover, .category-menu > *.ktrl_selected {
  color: #020873;
  background-color: #eae6ae;
  transition: 300ms;
  transition-property: color, background-color;
}
.category-menu > * > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 8px;
}

/* ### archives ########################################################## */
.archive #topbar {
  display: none;
  visibility: hidden;
}
.archive h1 {
  text-align: center;
  margin: 32px 0 0;
}
.archive #content {
  min-height: calc(100vh - 111px);
}

.tiles .lied {
  display: block;
  position: relative;
  background-color: #d9d9d9;
  cursor: pointer;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #888;
  transition: background-color 300ms;
  animation: fadeInAnimation ease 500ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tiles .lied > .lied_img {
  max-width: none;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 300ms;
  vertical-align: bottom;
}
.tiles .lied.disabled {
  filter: grayscale(100%);
  border: 1px solid #ccc;
  cursor: auto;
}
.tiles .lied.disabled > .lied_img {
  opacity: 0.8;
}
.tiles .lied:hover:not(.disabled), .tiles .lied.ktrl_selected {
  background-color: #eec900;
}
.tiles .lied:hover:not(.disabled) > .lied_img, .tiles .lied.ktrl_selected > .lied_img {
  /*transform: scale(1.1);*/
}

.archive_back_container {
  text-align: center;
  margin-top: 32px;
}

/* ### fixed buttons ##################################################### */
#scrollToTop,
#backToStart {
  border-radius: 10px;
  border: 2px solid transparent;
  transition: background-color, opacity 300ms;
  box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.33);
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 999;
}
#scrollToTop.goInvis,
#backToStart.goInvis {
  opacity: 0;
  pointer-events: none;
}
#scrollToTop.ktrl_selected,
#backToStart.ktrl_selected {
  border-color: #eae6ae;
}
#scrollToTop:after,
#backToStart:after {
  content: " ";
  display: inline-block;
  position: absolute;
  border: solid #fff;
  border-width: 0 8px 8px 0;
  padding: 8px;
}

#scrollToTop {
  position: fixed;
  right: 32px;
  bottom: 35px;
  background-color: #134f5c;
}
#scrollToTop:hover, #scrollToTop.ktrl_selected {
  background-color: #45818e;
}
#scrollToTop:after {
  transform: rotate(-135deg);
  top: 17px;
  left: 10px;
}

#backToStart {
  position: absolute;
  top: 32px;
  left: 16px;
  background-color: #cc0000;
}
#backToStart:hover, #backToStart.ktrl_selected {
  background-color: #ee1100;
}
#backToStart:after {
  transform: rotate(135deg);
  top: 12px;
  left: 16px;
}

/* ### player ############################################################ */
#player_container {
  width: 100vw;
  max-width: 100%;
  position: relative;
  display: none;
  visibility: hidden;
  cursor: none;
}
#player_container.player_active {
  display: block;
  visibility: visible;
}
#player_container video,
#player_container .player_button,
#player_container input {
  cursor: none;
}
#player_container .button_container,
#player_container #timeline {
  display: none;
  visibility: hidden;
}
#player_container.controls_visible video,
#player_container.controls_visible .player_button,
#player_container.controls_visible input {
  cursor: pointer;
}
#player_container.controls_visible .button_container,
#player_container.controls_visible #timeline {
  display: block;
  visibility: visible;
}
#player_container #player {
  position: absolute;
  width: 100vw;
  max-width: 100%;
  max-height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#player_container #player video {
  width: 100%;
  max-height: 100vh;
}
#player_container #player .button_container {
  position: absolute;
  top: 16px;
  left: 16px;
  /*#play_button, 
  #back_button {
  	position: relative;
  	width: 48px;
  	padding: 0;
  	top: 5px;

  	> span {
  		position: relative;
  		display: inline-block;
  		top: -2px;
  		font-size: 32px;
  	}
  }

  #back_button > span {
  	top: -3px;
  }*/
}
#player_container #player .button_container .player_button {
  position: relative;
  display: inline-block;
  text-align: center;
  color: white;
  line-height: 48px;
  height: 48px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 12px;
  background-color: rgba(43, 51, 63, 0.7);
  border: 2px solid white;
  border-radius: 10px;
  transition: color 300ms;
}
#player_container #player .button_container .player_button:hover, #player_container #player .button_container .player_button.ktrl_selected {
  background-color: rgba(83, 91, 113, 0.7);
}
#player_container #player .button_container .player_button.ktrl_selected {
  border-color: #eae6ae;
}
#player_container #player .button_container #play_button,
#player_container #player .button_container #back_button {
  width: 48px;
  background-size: 70%;
  background-position: center center;
  background-repeat: no-repeat;
}
#player_container #player .button_container #play_button {
  background-image: url("../img/play1.png");
}
#player_container #player .button_container #back_button {
  background-image: url("../img/back2.png");
}
#player_container #player #timeline {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
}

/* ### front page ######################################################## */
.home p > a {
  color: #444;
  font-weight: bold;
  transition: color, background-color 300ms;
}
.home p > a:hover {
  color: #000;
}
.home .button > a {
  background-color: #cc0000;
  color: #fff !important;
}
.home .button > a:hover {
  background-color: #ee1100;
}

/* ### ERRORS ############################################################ */
.error404 #content-wrap {
  text-align: center;
}
.error404 #content-wrap h1 {
  font-size: 36px;
}
.error404 #content-wrap .backtostart {
  display: inline-block;
  margin-top: 16px;
}

#js_warning {
  text-align: center;
  background-color: #fff;
  border: 4px solid #cc0000;
  margin-top: 32px !important;
}

/* ### 1024 ############################################################## */
/* ### 768 ############################################################### */
@media (max-width: 768px) {
  #player_container #player .button_container .player_button {
    font-size: 12px;
    line-height: 32px;
    height: 32px;
  }
  #player_container #player .button_container #play_button,
  #player_container #player .button_container #back_button {
    width: 32px;
  }
  #backToStart {
    top: 86px;
  }
}
/* ### 512 ############################################################### */
@media (max-width: 512px) {
  #logo-sub {
    padding-left: 0 !important;
  }
  .button {
    max-width: 100%;
    margin: 0 16px 18px;
  }
  .category-menu {
    gap: 16px;
    padding: 32px 16px !important;
  }
  .category-menu > * {
    font-size: 16px;
    padding: 75px 5px 0;
  }
  .tiles {
    padding: 16px;
  }
  p {
    margin-bottom: 16px;
  }
  p.has-large-font-size {
    font-size: 24px !important;
  }
  p.has-medium-font-size {
    font-size: 16px !important;
  }
  #content > .container > #content-wrap .white_box_large {
    margin: 16px;
    padding: 16px;
  }
  .login form,
  .login h1 {
    margin: 16px;
  }
}
/* ### 320 ############################################################### */
@media (max-width: 320px) {
  #speed_button_100,
  #speed_button_95,
  #speed_button_90 {
    display: none;
    visibility: hidden;
  }
  #content > .container > #content-wrap p {
    font-size: 12px;
  }
  .button {
    padding: 8px !important;
  }
}