/*!
Theme Name: kasel
Theme URI: http://underscores.me/
Author: Manuel Michaelis
Author URI: http://www.innsites.de
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kasel
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

kasel is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
font-weight
thin            100
Light           300
Regular         400
Medium          500
Bold            700
Extra-Bold      800
Black           900

rgba(255, 0, 0, 0.2) red 
rgba(0, 255, 0, 0.2) green 
rgba(0, 0, 255, 0.2) blue 
rgba(255, 255, 0, 0.2) yellow 
rgba(0, 0, 0, 0.2) grey 
--------------------------------------------------------------*/
@import url(css/normalize.css );
/*@import url(css/jquery.bxslider.css );*/
@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap');
@import url(fonts/fontawesome/css/all.css);
@import url(css/custom-styles.css);

/* ==================================================
	TYPO
================================================== */
h1{
    font-size: 1.5vw;
    font-weight:400;
}
.site-title a, .site-description{
    font-size: 1.5vw;
    font-weight:400;
    color: var(--primaer);
    font-weight: bold;
}
.hintergrundbild{
    background-size: cover;
    background-position: center center;
    background-repeat:no-repeat;
}
p, li {
    font-family: 'Yantramanav';
    font-size: 1.4vw;
    font-weight:400;
}

body,
button,
input,
select,
textarea {
	font-family: 'Open Sans', sans-serif;
	color: #404040;
	font-size: 14px;
	font-size: 1.4rem;
    font-size: 1.4vw;
	line-height: 1.5;
}
/* ==================================================
	STRUKTUR
================================================== */
#page {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
#content {
  flex-grow: 1;
}
/* ++++++++++++++ HEADER +++++++++++++++ */
#masthead{
    display: flex;
    
	width: 100%;
    height:14vw;
    padding: 0 6vw;
    background-image: url(images/header-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
}
.site-branding{
	display: flex;
    flex-wrap: wrap;
    align-items:flex-end;
	width: 100%;
}
.logo{
    display: flex;
    justify-content: flex-start;
    width: 80%;
}
.social{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
    color: var(--siebte);
    font-weight: bold;
    /*order: 2;*/
    margin-left: auto;
    margin-bottom: auto;
    padding-top: 2vw;
}
.iconxxx{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3vw;
    aspect-ratio: 1 / 1;
    font-family: 'Font Awesome 5 Brands';
    font-size: 2vw;
    color: var(--siebte) !important;
    border-radius: 0.5vw;
    background: var(--fuenfte);
}
.site-title{
    margin: 0 !important;
}
.site-description{
    margin: 0 !important;
    color: var(--primaer);
    font-weight: bold;
}
/* ============================================
    NAVIGATION
================================================ */

.main-navigation {
	display: block;
	width: 100%;
    padding-top: 0.5vw;
}
.main-navigation ul {
	display: flex;
    justify-content: space-between;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation ul li a{
	padding: 0 2%;
	color: var(--dritte);
    font-family: 'Yantramanav';
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    white-space: nowrap;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a,
.main-navigation li{
    font-size: 100%;
	display: block;
    font-weight: 400;
    font-style: normal;
	text-decoration: none;
    text-transform: uppercase;
}
.main-navigation a:hover{
    color: var(--primaer);!important;
}
.main-navigation .current_page_item a{
    color: var(--primaer)
}
/*SUB MENU */
.main-navigation ul ul {
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 1vw 0 0 ;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}
.main-navigation ul ul  li{
    padding: 0.5vw;
    background: white;
    border-bottom: 1px solid silver;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 300px;
}
.main-navigation .menu-item-has-children::after {
    content: "\f0dd";
    font-family: "FontAwesome";
    color: var(--dritte);
    position: absolute;
    top: -0.5vw;
    right: -2vw;
  }
  .main-navigation .current-menu-parent::after {
    content: "\f0dd";
    font-family: "FontAwesome";
    color: var(--primaer);
    position: absolute;
    top: -0.5vw;
    right: -2vw;
  }
.main-navigation .current_page_item .sub-menu a{
    color: var(--dritte);
}
.current-menu-parent a,
.sub-menu .current-menu-item a{
    color: var(--primaer) !important;
}
.sub-menu a{
    color: var(--dritte)  !important;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}
.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}

/* Fancy Link */
.main-navigation ul li a {
    text-decoration: none;
    
    position: relative;
  }
  
  .main-navigation ul li a::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right;
            transform-origin: right;
    transition: -webkit-transform 250ms ease-in;
    transition: transform 250ms ease-in;
    transition: transform 250ms ease-in, -webkit-transform 250ms ease-in;
  }
  
  .main-navigation ul li a:hover::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
/* ++++++++++++++ INHALT +++++++++++++++ */
#primary {
  display: flex;
  flex-direction: column;
  min-height: 70.4vh;
  border-top: 1px solid var(--vierte);
}
#main {
  flex-grow: 1;
	padding: 2vw 0;
}
/* ++++++++++++++ SEITEN +++++++++++++++ */
.entry-title{display: none;}
.entry-content{
    margin:0;
    padding: 0 16vw;
}
.bg {background-size: cover;}
/* ++++++++++++++ SONDERAKTION +++++++++++++++ */
.sonder{
    background: url(images/bg-1.jpg);
    background-repeat: no-repeat;
	background-position: center right; 
    background-size: canvas;
}
/* ++++++++++++++ PRAXISZEITEN +++++++++++++++ */
.timeline{
	display: flex;
    justify-content:center;
    border-top:1px solid var(--dritte);
    border-bottom:1px solid var(--dritte);
    padding: 2% 0
}
.timebox{
    text-align:center;
padding: 0 2%
}
/* ++++++++++++++ CONTACTFORM 7 +++++++++++++++ */
 
.zeile p{
    display: flex;
    flex-direction: column;
}.wpcf7-submit{
    font-size: 1.5vw !important;
    width: 100%;
    background: var(--primaer) !important;
    color: white !important;
}
.wpcf7-form{
    width:80%;
    margin: 0 auto;
    background: var(--sechste);
}
.wpcf7-form-control-wrap{
    display: flex;
    flex-direction: column;
    justify-content:center;
    margin-bottom: 2vw;
}
/* ===========================================================
				Headline
   =========================================================== */
   .h1-3{
    display:block;
    width: 100%;
    font-size:2vw;
   }
/* ===========================================================
				Bild-Text-Box
   =========================================================== */
   .bild-text-box{
    display: flex;
    width: 100%;
    border: 6px solid var(--siebte);
    border-radius: 5px;
    margin-top: 2vw;
}
.bildbox{
    flex: 2;
    aspect-ratio: 1 / 1;
    background-position: center !important;
    background-size:cover !important;
    background-repeat: no-repeat !important;
}
.textbox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 5;
    padding: 1rem 10%;
}
/* ===========================================================
				Bild-Text
   =========================================================== */
   .bild-text{
    display: flex;
    width: 100%;
    margin-top: 2vw;
}
.bildbox2{
    flex:2;
}
.textbox2{
    flex: 5;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0.5vw;
}
/* ===========================================================
				Accordion
   =========================================================== */
.accordion{
	margin: 0;
  }
  .accordion-title {
	box-shadow: 0 1px 3px #666666 !important;
	cursor: pointer;
	width: 100% !important;
	background-color: #fee191 !important;
	border: 0.2rem solid #fed55f !important;
	color: #ab2524 !important;
	padding: 0.5rem !important;
  }


  .closed > .accordion-title::before {
	position: relative;
	content: "\f078";
	font-family: "FontAwesome";
	margin: 0 2rem;
  }
  .open > .accordion-title::before {
	position: relative;
	content: "\f077";
	font-family: "FontAwesome";
	margin: 0 2rem;
  }
  
  .su-spoiler-content {
	background: white !important;
	color: var(--dritte) !important;
    cursor: default;
  }
  .su-spoiler-title{
    font-size: 1.5vw !important;
  }
/* ===========================================================
				FUSSZEILE
   =========================================================== */
#colophon{
    position: relative;
    width: 100%;
    background: var(--fuenfte);
    /*padding: 0 22.5% 0.5rem 22.5%;*/
}
#colophon a{text-decoration: none;}
.site-info{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    color: black;
    margin: 0 1rem 0 1rem;
    padding-bottom: 0.5rem;
}
.site-info a{color: black;}
.site-info a:hover{color: var(--achte);}

.block{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: space-evenly;
    width: 30%;
}
.name p{
    font-weight: bold !important;
}
.emergency{
    display: flex;
    flex-direction: column;
    width: 36%;
    color: black !important;
    padding: 0 3%;
    background: var(--sechste) !important;
}
.notfall::before {
    content: "\f071";
    font-family: "FontAwesome";
    display: block;
    text-align: center;
    font-size: 300%;
}

.zeiten img{
    width: 60%;
    height: auto;
    margin-bottom: 0;
  }
  .zeiten .termin:hover{
    background: #e6e6e6 !important;
  }
  .adr .fa, .adr .far, .adr .fas{
    margin-right: 0.5vw;
    color: var(--primaer);
  }
  .line{
    display: flex;
    justify-content:space-between;
    width: 100%;
    margin: 2vw 0;
    border-top: 1px solid silver;
    padding-top: 1rem;
}
/* **************************************************
	MOBILE Navigation
************************************************** */
body { 
    -webkit-animation: bugfix infinite 1s; 
    animation: bugfix infinite 1s; 
  }
  @keyframes bugfix { 
    from { padding: 0; } 
    to { padding: 0; } 
  }
  
  /* weiter */
  #mobilemenue{
      position:relative;
      display: none;
      width: 100%;
      height: auto;
      margin: 0 auto;
      z-index: 12000;
  }
  #mobilemenue li{
      background:#f4f6fc;
  }
  #mobilemenue a{
      display: block;
      font-size: 90%;
      color: var(--dritte);
      padding: 0.25rem;
  }
  #button {
      display: none;
  }
  label { 
    cursor: pointer;
    user-select: none;
  }
  #mobilemenue label {
      position: relative;
      width: 100%;
      height: 6rem;
      margin-bottom: 0;
      background-color: transparent;
      width:100% !important;
      text-align: right;
  }
  #mobilemenue label:after {
      position: relative;
      content: "\2261";
      font-size: 3vw;
      font-weight: 400;
      color: var(--dritte);
      left: 4vw;
      }
  #mobilemenue label:before {
      position: relative;
      content: "Navigation";
      font-size: 150%;
      font-weight: 400;
      color: var(--dkblau);
      left: 2vw;
      }
  .oben{
      position: absolute;
      width: auto;
      left: -500px;
      top:5rem;
      transition: all .5s ease-in-out;
      -webkit-transition: all .5s ease-in-out;
      background: var(--hlblau);
      margin-top: 1rem;
      padding: 0.5rem;
      border-radius: 0.5rem;;
  }
  .oben ul{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      list-style: none;
      margin: 0;
      padding-left: 0;
      width: auto;
  }
  .oben ul li:last-child{
      margin-bottom:0
  }
  .oben ul ul li{
      border-bottom: 1px solid var(--dkblau);
  }
  .oben ul ul li:last-child{
      border-bottom: 0px solid var(--dkblau);
  }
  .oben ul li a{
      font-weight: bold;
      color: var(--dkblau)!important;
      text-decoration: none;
  }
  .oben ul li a:hover{
      color: var(--hlgruen) !important;
  }
  .oben .sub-menu{
      margin-left: 0.5rem !important;
  }
  input:checked ~ .oben {
      left: 2vw;
  }
/* ==================================================
	RESIZE
================================================== */
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}
.menu-toggle {
		display: none;
	}
#button, .mobile {display: none;}
@media screen and (max-width: 1024px) {
	.site-branding{padding: 0 10vw;}
	.main-navigation {display: none;}
    #mobilemenue{
        display: block;
    }
}
.entry-content{
    margin:0;
    padding: 0;
}

#colophon{
    padding: 0.5rem 5%;
}
@media screen and (max-width: 880px) {
	#primary-mobile,
	#primary-mobile ul{flex-direction: column;}
	#primary-mobile{padding-left: 40%;}
	#primary-mobile li{background: var(--siebte);}
	#primary-mobile ul{padding-left: 10%;}
	
}
@media screen and (max-width: 767px) {
    #page {
        width: 100vw;
      }
      #content{
        padding: 0 2vw;
      }
    #colophon{
        padding: 0.5rem 0;
    }
    .site-info{
        flex-direction: column;
        margin: 0;
    }
    .block{
        width: 100%;
        text-align: center;
    }
    .emergency {
        width: 100%;
        color: black !important;
        padding: 0 0;
        margin-top: 3rem;
        padding-bottom: 2rem;
      }
    .emergency ul{
        list-style:none;
        margin: 0;
        padding: 0;
    }
    .emergency li{
        margin: 0;
    }
    .f-box{
        text-align: center;
        padding: 1vw 0;
    }
    .line{flex-direction:column;}
    #custom_html-2, #custom_html-3, #custom_html-4{
    width: 100%;
    }
    .h1-3{
        font-size:3vw;
       }
}

@media screen and (max-width: 500px) {

    p, li {
        font-family: 'Yantramanav';
        font-size: 3vw;
        font-weight:400;
    }
    
    body,
    button,
    input,
    select,
    textarea {
        font-family: 'Open Sans', sans-serif;
        color: #404040;
        font-size: 14px;
        font-size: 1.4rem;
        font-size: 3vw;
        line-height: 1.5;
    }
    .su-spoiler-title,
    .site-description,
    .site-title a {
        font-size: 3vw !important;
      }
      .bild-text{
        flex-direction: column-reverse !important;
      }
      .bildbox2,
      .textbox2{
        flex: 1;
      }
      .bildbox2{
        margin-top: 2rem;
      }
      .h1-3{
        font-size:4vw;
       }
  }
}