/*!
Theme Name: InnPress A
Theme URI: http://underscores.me/
Author: Manuel Michaelis
Author URI: http://www.innsites.de
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: innpress-a
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.
InnPress 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:
---------------------------------------------------------------- */
/*@import 'https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Noto+Serif:400,700';*/
@import url(//www.innsites.de/wp-content/themes/innpress-a/css/wp.css);
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css');

/* ============================================
    CUSTOM PROPERTIES
================================================ */
:root {
  --gruen: #8bc93a;
  --hlgruen: #b7cc8f;
  --dkblau: #005478;
  --hlblau: #b2c7d0;
  --bgblau: #a2d3e8;
  --grau1:#607c89;
  --bggrau:rgba(232, 245, 251, 0.5);
  --text:#333333;
  --rot:#8d004c;
}
/* ============================================
    BARRIEREFREI
================================================ */
.a11y-toolbar{
    display: none;
}
.responsivevoice-button{
    position: absolute;
    left:2.5%;
	cursor: pointer;
}
.zeno_font_resizer span {
  display: flex !important;
  width: 100% !important;
  justify-content: space-around;
}
.zeno_font_resizer a{
    color: black !important;
}
.text-box a{
    width: auto;
    background-color: var(--dkblau);
    color: white !important;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 3px 10px;
}
.acc-trigger {
    position: relative;
    float: left;
    width: 17.9rem;
    height: 3.8rem;
    display: block;
    background-color: var(--dkblau);
    margin-top: 3px;
    padding-left: 3rem;
    padding-top: 0.8rem;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }

.acc-trigger a{
    font-size: 100%;
    display: block;
    font-weight: 700; 
}
#button {
    display: none;
}
label { 
  cursor: pointer;
  user-select: none;
}
.acc-trigger label {
    position: relative;
    margin-bottom: 0;
    text-align: left;
}
.acc-trigger label:after {
    position: absolute;
    top: -0.5rem;
    right: -7.1rem;
    display: block;
    content: "";
    background: url("//www.innsites.de/wp-content/themes/innpress-a/images/icon-acc.png") no-repeat;
    background-size:contain;
    width: 3rem;
    height: 3rem;
    }
.acc-trigger label:before {
    position: relative;
    content: "ANPASSEN";
    color: white;
    left: 2vw;
    }
.oben-acc{
    position: absolute;
    width: 17.9rem;
    left: -500px;
    top:5rem;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    background: white;
    margin-top: 1rem;
    padding: 0.5rem;
    border: 3px solid var(--dkblau);
    border-radius: 0.5rem;;
}
.oben-acc ul{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding-left: 0;
    width: auto;
}
.oben-acc ul li:last-child{
    margin-bottom:0
}
.oben-acc ul ul li{
    border-bottom: 1px solid var(--dkblau);
}
.oben-acc ul ul li:last-child{
    border-bottom: 0px solid var(--dkblau);
}
.oben-acc ul li a{
    font-weight: bold;
    color: var(--dkblau)!important;
    text-decoration: none;
}
.oben-acc ul li a:hover{
    color: var(--hlgruen) !important;
}
.oben-acc .sub-menu{
    margin-left: 0.5rem !important;
}
input:checked ~ .oben-acc {
    left: 0.5vw;
}
.sidelink{
    letter-spacing: 0;
    color: black;
}
.textwidget{
    hyphens: auto; 
}
#secondary{
    display: none;
}
#flexcol {
  flex-direction: column;
  align-items: center;
}
.footerbox {
  width: 80%;
}

/* ============================================
    TYPO
================================================ */
body,
button,
input,
select,
optgroup,
textarea {
	font-size: 1rem;
	line-height: 1.5;
}
body {
    height: 100% !important;
    font-size: clamp(1.5rem, 1.5vw, 1.5rem);
    font-family: 'Noto', -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--text);
}
h1{font-size: 200%;}
h2{font-size: 180%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}
h6{font-size: 80%;}
h1, h2, h3, h4,h5,h6{
    color: var(--dkblau);
    font-family: 'Noto Sans', sans-serif;
}
ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: square;
    list-style-image: url('//www.innsites.de/wp-content/themes/innpress-a/images/bullit.png');
}
ul li{
    margin-bottom: 1vw;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0.5vw;
	margin-left: 1.5em;
}
/* Links
--------------------------------------------- */
a {
	color: var(--gruen)
}

a:visited {
	color: var(--gruen);
}

a:hover,
a:focus,
a:active {
	color: var(--gruen)
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* ===============================================
    STRUKTUR
=============================================== */
/*body{
    background:url("//www.innsites.de/wp-content/themes/innpress-a/images/background.jpg");
    background-position:top left;
	background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-color: var(--bggrau);
}*/
#masthead{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background: var(--dkblau);
    padding: 0 30%;
}
#page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}
#site-navigation{
    display: flex;
}
/*.breadcrumb{
    display: flex;
    height:2rem;
}
.sidebox{
    position:fixed;
    right:1vw;
    top:20rem;
}*/
#content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width:60rem;
    padding: 3vw 0;
    margin: 0 auto;
}
.entry-title{
    display: block ;
}
/*.entry-header1{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 26%;
    flex-grow: 1;
}
*/
.entry-title1 {
    width:auto;
    text-align: left;
    font-family: 'Noto Sans', sans-serif;
    font-size: 200%;
    color: #219296;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 3vw !important;
}
#primary{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#colophon{
    width: 100%;
    min-height: 5rem;
    background: var(--dkblau);
    padding: 1rem 30%;
}
/* ===========================================================
				HEADER
   =========================================================== */

.site-branding{
    display: flex;
    width: 100%; 
    height: auto;
}
.lef{
    width: 13.5%;
}
.custom-logo{
    margin: 1rem 0;
    width: 8vw;
    height: auto;
}

.rig{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 86%;
}
.headline{
    display: flex;
    flex: 1;
}
.site-title{
    width:100%;
    text-align: right;
}
.site-title {
    font-family: 'Noto Sans', sans-serif;
    font-weight: bold;
    font-size: 1.5vw;
    margin: 1rem 0 0 0;
}
.site-title a {
    color: rgba(255,255,255,1) !important;
    text-decoration: none;
}
.site-description{
    width: 35%;
    text-align: left;
    margin:0 !important;
}
.site-description {
    font-weight: bold;
    font-size: 3vw;
    color: rgba(255,255,255,0.8) !important;
	-webkit-filter: blur(0.2vw);
	-moz-filter: blur(0.2vw);
	filter: blur(0.2vw);
 	opacity: 0.3;
    display: none;
}
.anfang{width: 65%;
    text-align: right;
    font-size: 2vw;
    font-weight: bold;
    padding-top: 1.5%;
    display: none;
}
.anfang ul{
    display: flex;
    justify-content:flex-end;
    margin: 0;
}
.anfang ul li{
	list-style: none;
	text-shadow: none;
	color: white;
	margin-left: 0.7rem;
	animation: animate 1s infinite linear
  }
@keyframes animate
{
	0%
	{color: white;opacity: 0.3;}
	18%
	{color: white;opacity: 0.31;
	-webkit-filter: blur(0.1vw);
	-moz-filter: blur(0.1vw);
	filter: blur(0.1vw);
	}
	27%
	{opacity: 0.33;}
	30%
	{opacity: 0.27;}
	35%
	{opacity: 0.3;}
	70%
	{opacity: 0.31;
	-webkit-filter: blur(0.05vw);
	-moz-filter: blur(0.05vw);
	filter: blur(0.05vw);
	}
	85%
	{opacity: 0.33;}
	90%
	{opacity: 0.31;}
	100%
	{opacity: 0.27;}
}
.anfang ul li:nth-cild(1){
	animation-delay: .1s;
}
.anfang ul li:nth-cild(2){
	animation-delay: .27s;
}
.anfang ul li:nth-cild(3){
	animation-delay: .23s;
}
.anfang ul li:nth-cild(4){
	animation-delay: .25s;
}
#site-navigation{
    width:100%;
}
.breadcrumb {
    font-size: 80%;
    padding-left: 1rem;
}
.breadcrumb a{
    color: var(--dkblau) !important;
}
/* ===============================================
    NAVIGATION
=============================================== */
.main-navigation {
	display: block;
	width: 100%;
}
.main-navigation ul {
	display: flex;
    justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation ul li {
	position: relative;
    margin-right: 1vw;
    /*padding: 1vw;*/
}
.main-navigation ul li a{
    width: 100% !important;
    text-align: center;
}
.main-navigation ul li:last-child{
    margin-right: 0;
}
.main-navigation a,
.main-navigation li{
    font-size: 100%;
	display: block;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.1vw;
    color: white;
	text-decoration: none;
    white-space: nowrap;
}
.main-navigation a:hover{
    text-decoration: underline !important;
}
.main-navigation ul ul {
    display: flex;
    flex-direction: column;
    background-color: var(--hlgruen);
   /* padding: 1rem 0;*/
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	/*top: 75%;*/
	left: -999em;
    /*left:0;*/
	z-index: 99999;
    margin-left: -3.5%;
}
.main-navigation ul ul  li{
    padding: 0.5rem 1rem;
    border-bottom: 1px solid white;
    margin: 0;
}
.main-navigation ul ul li:last-child{
    border-bottom: 0px solid white;
}
.main-navigation ul ul li a{
    color: white;
    text-align: left
}
.main-navigation .current-menu-parent{
    background-color: var(--hlgruen);
    padding:1%;
}

.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;
}

.main-navigation ul ul a {
	width: auto;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}
/* ===============================================
    ARTIKEL
=============================================== */
.artikel .entry-title,
.artikel .entry-meta,
.artikel .entry-footer{
    display: block;
}
#primary .post{
    order: 2 !important;
}
#primary .post-navigation{
    order: 1 !important;
}
/* ===============================================
    PRINT
=============================================== */
.print-field{
    display: flex;
    flex-wrap: wrap;
    padding: 1vw;
}
.print-header{
    width: 100%;
}
.print-surround {
    display: flex;
    flex: 1;
}
.print-ex{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}
.printbild{
    width: 90%;
    height: auto;
}
.print-descr{
    display: flex;
    flex-direction: column;
    width: 90%;
    height: auto;
    font-family: 'Allerta', sans-serif;
    font-size: 80%;
    letter-spacing: 0rem;
    color: #005576;
    hyphens: auto;
    padding: 2.5%;
    margin-top: 1vw;
    background-color: rgba(192,192,192,0.8);
}
/* ===============================================
    SEITEN
=============================================== */
.entry-content{
    padding: 0 1vw;
}
.h1-3{
    display: inline-block;
    width: 100%
}
.freitext, .h1-3, .bild-text-box, .printbox{
    margin-bottom: 1vw;
}
/* ===============================================
    GALERIE
=============================================== 
.galerie{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1vw;
}

.setcard{
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    background: rgba(255,100,100,0.5);
}
.werk{
    height: 100%;
}
.setcard .image{
    height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; 
}
.info{
    position: relative;
    background: silver;
    padding: 1rem;
    margin-top:2rem;
}
.close{
    position: absolute;
    bottom:0;
    right:0;
    z-index: 10000;
    width: 2rem;
    height: 2rem;
    background: red;
    right: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close::after{
    content: 'X';
    color:white;
    font-weight: bold;
    
}
*/
/* ===========================================================
				Home
   =========================================================== */
.reviews {
  margin-top: 4rem;
  margin-bottom: 2rem;
}
.txtquadrat{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: stretch;
    width:100%;
}
.surround {
    display: flex;
    flex-direction: column;
    margin:auto 0;
}
.text-box{
    display: flex;
    flex-direction: column;
    /*justify-content:space-evenly;
    width: calc(100%/5);*/
    width:100%;
    height: auto;
    /*aspect-ratio: 1 / 1;*/
    hyphens: auto;
    padding: 1rem;
}
.text-box p{
    margin: 0;
}
/* ===========================================================
				Abspann
   =========================================================== */
   .abspann{
    display: flex;
    width: 100%;
    justify-content: space-between;
   }
   .abspann-l, .abspann-r{
    width: 49%;
   }
/* ===========================================================
				Bild-Text-Box
   =========================================================== */
.bild-text-box{
    display: flex;
    width: 100%;
    /*border: 6px solid;
    border-radius: 5px;*/
}
.bildbox{
    flex: 1;
    /*aspect-ratio: 1 / 1;*/
    background-position: center !important;
    background-size:contain !important;
    background-repeat: no-repeat !important;
}
.textbox{
    display: flex;
    flex-direction: column;
    /*align-items: center;
    justify-content: center;*/
    flex: 1;
    padding: 1rem;
    align-content : flex-end
}
/* ===========================================================
				FUSSZEILE
   =========================================================== */

#colophon a{
    text-decoration: none;
}
.site-info{
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    width: 100%;
    color: white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    margin: 1rem 0;
    padding-bottom: 1rem;
}
.site-info a{
    color: white;
}
.f-box{
    min-width: 18%;
    text-align: center;
    white-space: normal;
    margin: 1rem 1rem 0 0;
}
.fa{
    font-size: 150%;
    margin-right: 1rem;
}
#flexcol{
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    width: 100%;
}
.footerbox{
    flex-basis:50%;
    color: white;
    font-size: 90%;
}
.footerbox h2{
    color:white;
    margin-bottom: 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: 17%;
      height: auto;
      */margin: 0 auto;*/
      z-index: 12000;
      display:block;
      background-color: var(--dkblau);
  }
  #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: 10rem !important;
      height: 16rem;
      margin-bottom: 0;
      text-align: left;
  }
  #mobilemenue label:after {
      position: absolute;
      top: -0.25rem;
      right: -5rem;
      display: block;
      content: "";
      background: url("//www.innsites.de/wp-content/themes/innpress-a/images/icon-acc.png") no-repeat;
      background-size:contain;
      width: 25px;
      height: 25px;
      }
  #mobilemenue label:before {
      position: relative;
      content: "xxx";
      font-size: 150%;
      font-weight: 400;
      color: white;
      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: 0.5vw;
  }
/* 
/* ============================================
    MOBILE ENDGERÄTE
================================================ */
.menu-toggle{
    display: none;
}
body { 
  -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}
/* ++++++++++ mobile-netzwerk ++++++++++ */
#site-navigation-small{
	position: relative;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
#button {
	display: none;
}
#site-navigation-small label { 
	cursor: pointer;
	user-select: none;
}
#site-navigation-small label {
	position: relative;
	display: block;
	width: 100%;
	height: 3rem;
	margin-bottom: 1rem;
	background:rgba(255,255,255,0.4);/*white*/
	border-bottom: 0.1rem solid #536476 ;
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#site-navigation-small label:after {
	position: absolute;
	content: "\2261  NAVIGATION";
	font-size: 120%;
	font-weight: normal;
	color: #536476 ;
	letter-spacing: 0.15rem;
	line-height: 180%;
	left: 2rem;
}
input:checked ~ .oben2 {
      display: block;
}
@media screen and (max-width: 1785px) {
    .f-box {
        min-width: 30%;
    }

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

    #content {
        flex-direction: column;
        padding: 3vw 10%;
    }
    .freitext, .h1-3, .bild-text-box, .printbox{
    margin-bottom: 2vw;
    }
    .entry-header1{
        flex-grow: 0;
    }
    .entry-title1 {
        width:100%;
        text-align: left;
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        font-size: 200%;
        margin-bottom: 3vw !important;
    }
   .print-descr{
    flex-direction: column;
   }
    #colophon{
    padding: 1rem 3%;
    }

}
@media screen and (max-width: 680px) {
    #masthead {
        padding: 0 3% !important;
    }
    #content {
        width: 100%;
        padding: 3vw 3%;
    }
    .entry-title1 {
        font-size: 4vw;
    }
    #colophon {
        padding: 1rem 3%;
    }

}
@media screen and (max-width: 648px) {
    .freitext, .h1-3, .bild-text-box, .printbox{
    margin-bottom: 4vw;
    }
    .surround {
        flex-direction: column;
    }

}
@media screen and (max-width: 560px) {
    .site-branding {
        flex-direction: column;
    }
    .lef, .rig{
        width: 100%;
    }
    .custom-logo{
        width:10vw;
        margin: 1rem 50%;
    }
    .menu-header-menue-container {
      width: 100%;
    }
    .main-navigation ul {
      justify-content: space-between;
      width: 100%;
    }
    .main-navigation ul ul{
        position: absolute;
        width: 90vw;
    }
    .main-navigation ul ul li a{
        font-size: 90%;
    }
    #flexcol {
        flex-direction: column;
    }

}