/* == CSS for formulare.schweizer-allee.de   == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == == */

/* font */
body {
	font-family: 'Brix Sans', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
}

/* CSS normalize */
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* TODO: fix hyphens */
html {
	line-height: 1.15;                         /* Correct the default line height in all browsers                       */
	-webkit-text-size-adjust: 100%;            /* Prevent adjustments of font size after orientation changes in iOS     */
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  -ms-hyphenate-limit-chars: 10 4 4;
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}
body{margin:0}
/*main{display:block}*/
h1{font-size:2em;margin:.67em 0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}
template{display:none}
[hidden]{display:none}
/* end of normalize */

/* general
body {
	position: relative;
}*/

main {
	margin-top: 150px;
	margin-bottom: 50px;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: #216078;
  text-decoration: none;
}
/* end of general */

/* front-page specific */
p.main-description {
  font-size: 1.5rem;
  margin-bottom: 40px;
}

div.kurs-liste > div {
	margin-bottom: 30px;
}

div.background-image {
  height: 100%;
	min-height: 300px;
	padding-top: 20px;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: -2;
  border-radius: 5px;
}
div.background-image::before {
  content: ' ';
  background-color: rgba(3, 3, 3, 0.55);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
}
div#wpi {
  background-image: url('https://schweizer-allee.de/wp-content/uploads/2019/05/Latein.jpg');
}
div#wpii {
  background-image: url('https://schweizer-allee.de/wp-content/uploads/2019/06/WPII.jpg');
}
div#nachmittagsprogramm {
  background-image: url('https://schweizer-allee.de/wp-content/uploads/2019/08/orchestra-2098877_1920.jpg');
}
div#foerderkurse {
  background-image: url('https://schweizer-allee.de/wp-content/uploads/2019/08/startup-594090_1920.jpg');

}

h2.kurs-heading {
  padding: 25px 10px 30px 10px;
  color: #d7d7d7;
  z-index: 2;
}
main a:hover h2 {
  color: #d56a5b;
}
/* end of front-page */

img {
  width: 100%;
}

/*==============================================================================================================================*/
/*=== style copied from schweizer-allee.de ===============================================================================================*/
/*==============================================================================================================================*/


/***   Header Bar   ***/


#masthead {
	height: 100px;          	                             /* Height of the header in expanded state (not scrolled)     */
  width: 100%;
  top: 0;          	                                     /* Ignore the body top padding                               */
	background-color: #e5e5e5;
  position: fixed;
  -webkit-transition-property: height;                   /* | Transition to and from the collaped state (scrolled)    */
  transition-property: height;                           /* |                                                         */
  -webkit-transition-duration: .5s;                      /* |                                                         */
  transition-duration: .5s;                              /* |                                                         */
  -webkit-transition-delay: .25s;                        /* |                                                         */
  transition-delay: .25s;                                /* |                                                         */

  z-index: 700;
}

body.admin-bar #masthead {
  top: 30px;                                             /* Move down header if admin-bar is shown                    */
}

/* TODO: media queries don't work */
@media only screen and (max-width: 782px) {              /* admin-bar is bigger on mobile devices                     */
  body.admin-bar #masthead {
    top: 46px;
  }
}
@media only screen and (max-width: 600px) {              /* admin-bar disapears on scrolling so header must stick to top */
  body.admin-bar.scrolled #masthead {
    top: 0px;
  }
}


/***   LOGO   ***/

.logo-container {                                        /* Container for the logo on and slightly below the header   */
  width: 120px;
  background-color: #e5e5e5;
  padding: 15px 15px 5px 15px;
  border-radius: 5px;
  display: block;
  position: absolute;
  left: 0;
  top: 15px;
  -webkit-transition: top 1s;                            /* | Transition for hover animation (enter)                  */
  transition: top 1s;                                    /* |                                                         */
}

.logo-container:hover {
  top: 25px;                                             /* Move down the conteiner on hover                          */
  -webkit-transition: top .5s;                           /* | Transition for hover animation (leave)                  */
  transition: top .5s;                                   /* |                                                         */
}

.logo-text-version {
  line-height: 60px;
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
  font-size: 1rem;
}

.logo-text-version br {
  display: none;                                         /* Do not break by default (Desktop)                         */
}

.logo-text-version a {
  color: var(--night-black) !important;
}

body.scrolled .logo-container {
  top: -150px;
  -webkit-transition-delay: .25s;
  transition-delay: .25s;
}

body.scrolled .logo-text-version {
  opacity: 1;
  -webkit-transition-delay: .5s;
	transition-delay: .5s;
}


/*= footer =*/

footer.site-footer {
  background-color: #d56a5b;
}
footer .container {
  padding: 0;
}

ul#footer-social-buttons {
  display: inline-block;
  padding: 0;
  padding-top: 20px;
	padding-bottom: 20px;
  margin: 0;
}

ul#footer-social-buttons li {
  float: left;
  list-style: none;
  padding-right: 30px;
}

ul#footer-social-buttons img {
  height: 18px;
}

ul#footer-menu {
  display: inline-block;
  padding: 0;
  margin: 0;
	padding-top: 35px;
}
.menu-footer-menue-container {
  display: inline-block;
  float: right;
}

ul#footer-menu li {
  float: right;
  list-style: none;
  padding-left: 30px;
  font-size: .9rem;
}

ul#footer-menu a {
  color: #373533;
  text-decoration: none;
}
ul#footer-menu a:hover {
  color: #575553;
}

@media only screen and (max-width: 767.98px) {
  .site-footer ul#footer-menu {
    padding-top: 0px;
  }
  .site-footer ul#footer-menu li {
    padding-top: 20px;
  }
}

@media only screen and (max-width: 575.98px) { /*gives the whole footer a padding on the sides on mobile */
  .site-footer .padding-on-xs {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.header-links {
  font-size: .8em;
  float: right;
  position: absolute;
  top: 40px;
  right: 0px;
  transition: top ease-in-out 0.3s 0.3s;
  -webkit-transition: top ease-in-out 0.3s 0.3s;
}
.header-links a {
  margin-left: 30px;
}

.header-container {
  margin-left: 43px;
  margin-right: 60px;
  width: calc(100% - 103px);
}

body.scrolled #masthead {
  height: 60px;
  border-bottom: 1px solid #c5c5c5;
}

body.scrolled .header-links {
	top: 20px;
}

/* sticky footer*/
/* sticky footer with flexbox
   https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3*/
    html, body {
     height: 100% !important;
    }
    body {
     display: flex !important;
     flex-direction: column !important;
    }
    main {
     flex: 1 0 auto !important;
    }
    footer {
     flex-shrink: 0 !important;
    }


/* card redesign*/

a:hover .kurs-description, div.card:hover .kurs-description {
	color: #000000 !important;
}
img.formulare-card-cover {
	z-index: 1;
}
img.geschlossen-tag {
	display: none;
}
a.backend-link:hover {
	color: black !important;
}

.closed-formular-card a {
	cursor: not-allowed;
}
.closed-formular-card a:hover div.card-header h2 {
	color: #000000 !important;
}
.closed-formular-card img.formulare-card-cover {
	filter: grayscale(1);
}
.closed-formular-card img.geschlossen-tag {
	display: block;
	position: absolute;
	left: 10%;
	top: 20%;
	width: 80%;
	z-index: 2;
}