@import url('genericons/genericons.css');

@font-face {
        font-family: "Roboto";
        font-display: swap;
        src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
        font-family: "Roboto Thin";
        font-display: swap;
        src: url("../fonts/Roboto-Thin.ttf");
}

@font-face {
        font-family: "Roboto Thin Italic";
        font-display: swap;
        src: url("../fonts/Roboto-ThinItalic.ttf");
}

@font-face {
        font-family: "Roboto Light";
        font-display: swap;
        src: url("../fonts/Roboto-Light.ttf");
}

@font-face {
        font-family: "Roboto Light Italic";
        font-display: swap;
        src: url("../fonts/Roboto-LightItalic.ttf");
}

@font-face {
        font-family: "Roboto Medium";
        font-display: swap;
        src: url("../fonts/Roboto-Medium.ttf");
}

@font-face {
        font-family: "Roboto Medium Italic";
        font-display: swap;
        src: url("../fonts/Roboto-MediumItalic.ttf");
}

@font-face {
        font-family: "Roboto Bold";
        font-display: swap;
        src: url("../fonts/Roboto-Bold.ttf");
}


body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  hyphens: auto;
}

img {
/*  width: 100%;*/
	 max-width: 100%;
         height: auto;
}

section.bild img {
	min-width: 500px;
	overflow-x : scroll;
}

.image-left img {
	min-width: auto !important;
}

a {
  color: #d1232a;
  font-weight: 400;
  text-decoration: none;
}

  a:active,
  a:focus,
  a:hover {
	background-color: #d1232a;
	color: white !important;
  }
		
hr {
  width: 80%;
  margin-top: 50px;
  margin-bottom: 50px;
}

h1 {
  text-transform: uppercase;
  font-family: "Roboto Bold", "Helvetica", "sans-serif";
  font-weight: 500;
  font-size: 24px;
  color: #d1232a;
  padding-bottom: 0;
}

  h2 {
	text-transform: uppercase;
	font-family: "Roboto Medium", "Helvetica", "sans-serif";
	font-weight: 500;
	font-size: 20px;
	color: #d1232a;
	padding-bottom: 0;
	padding-top: 0.5em;
  }
	
  h3 {
	text-transform: uppercase;
	font-family: "Roboto Medium", "Helvetica", "sans-serif";
	font-weight: 400;
	font-size: 20px;
	color: #d1232a;
	padding-top: 1em;
  }		


h4 {
	font-family: "Roboto Light", "Helvetica", "sans-serif";
	font-weight: 300;
	font-size: 24px;
	color: #d1232a;
}

h5 {
	font-family: "Roboto Light", "Helvetica", "sans-serif";
	font-size: 1.5em;
        font-weight: bold;
        padding: 0.5em 0 0 0.5em;
        margin-bottom: 0;
}

p {
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	word-break: break-word;

	  /* Adds a hyphen where the word breaks, if supported (No Blink) */
	  -ms-hyphens: auto;
	  -moz-hyphens: auto;
	  -webkit-hyphens: auto;
	  hyphens: auto;
	font-weight: 300;
}

ul li,
ol li {
       margin-left: 2em;
}

.rot {
	color: #d1232a !important;
}

.rot figcaption {
	color: black !important;
}

a.rot:hover,
a.rot:active,
section.rot a:hover,
section.rot a:active { 
        background-color: #d1232a !important;
        color: white !important;
}


.gelb {
        color: #ff9900 !important;
}

.gelb figcaption {
        color: black !important;
}

section.gelb a {
	color: #ff9900 !important;
}

a.gelb:hover,
a.gelb:active,
section.gelb a:hover,
section.gelb a:active {
	background-color: #ff9900 !important;
	color: white !important;
}

.gruen {
        color: #60a174 !important;
}

.gruen figcaption {
        color: black !important;
}

section.gruen a {
	color: #60a174 !important;
}

a.gruen:hover,
a.gruen:active,
section.gruen a:hover,
section.gruen a:active {
	background-color: #60a174;
	color: white !important;
}

.blau {
        color: #0088b7 !important;
}

.blau figcaption {
        color: black !important;
}

section.blau a {
	color: #0088b7 !important;
}

a.blau:hover,
a.blau:active,
section.blau a:hover,
section.blau a:active {
	background-color: #0088b7;
	color: white !important;
}

.lila {
        color: #88426d !important;
}

.lila figcaption {
        color: black !important;
}

section.lila a {
	color: #88426d !important;
}

a.lila:hover,
a.lila:active,
section.lila a:hover,
section.lila a:active {
	background-color: #88426d;
	color: white !important;
}
		

/*
                Micro-Clearfix-Hack
                nicolasgallagher.com/micro-clearfix-hack/
        */
        .cf:before, .cf:after { content: " "; display: table; }
        .cf:after, .clear { clear: both; }


.headlines {
  margin-bottom: 20px;
}
  .headlines h1, .headlines h2 {
    margin: 0;
  }
  .headlines h1 {
    font-family: "Roboto Medium", "Helvetica", "sans-serif";
    font-weight: 500;
  }
  .headlines.center{
    text-align: center;
  }

p {
  font-size: 16px;
  line-height: 26px;
  font-family: "Roboto Light", "Helvetica", "sans-serif";
  font-weight: 300;

 -moz-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

figure {
	margin-top: 0;
}

div#startseite {
  margin: -80px 0 100px 0;
}

div#folgeseite {
	margin: 140px 0 0 0;
}

.skip {
	position:absolute;
        top:0;
        left:-9999px;
}

.askip {
        position:absolute;
        top:0;
 	left:-9999px;
}

.skip .askip:focus, .skip .askip:active {
	width: 130px;
        position: absolute;
        left: 9999px;
        margin-left: 600px;
        padding: 5px 5px 5px 15px;
	z-index: 10;
}


div.kasten {
	position: absolute;
	bottom: 0;
        right: 0;
/*	width: 280px;*/
	height: 28px;
        color: #d1232a !important;
	margin: 0;
}	

ul.kasten {
	height: 28px;
	float: right;	
	padding: 0.75em 0.5em;
	margin: 0;
}

ul.kasten li {
	float: left;
	padding: 2px 10px;
	margin: 0;
	font-weight: normal;
}

ul.kasten li a {	
	padding: 0.2em 0;
	color:  #d1232a !important;
}

a.genericon-download {
         content: '\f440';
         font-size: 16px;
         color: white !important;
}


a.genericon-facebook {
         content: '\f203';
         font-size: 16px;
         color: white !important;
}

a.genericon-twitter {
          content: '\f202';
          font-size: 16px;
          color: white !important;
}

a.genericon-googleplus {
          content: '\f206';
          font-size: 16px;
          color: white !important;
}

a.genericon-linkedin {
          content: '\f207';
          font-size: 16px;
          color: white !important;
}

span.genericon-next {
	content: '\429';
	font-size: 20px;
	color: black !important;
	padding-top: 0.4em;
}

section#vorwort {
	margin: 20px 0;
}

section {
	margin: 1.5em 0 0 0;
}

section li {
	list-style-position: outside;
	margin-left: 1.5em;	
	font-size: 16px;
	font-family: "Roboto Light", "Helvetica", "sans-serif";
	font-weight: 300;
}

section ul li {
	list-style-type: disc;
}

section ul li::marker {
	color: #d1232a;
	font-size: 1.3em;
}

.schwarz {
        color: black !important;
}

.gruen li::marker {
	color: #60a174;
}

.gelb li::marker {
	color: #ff9900;
}

.blau li::marker {
	color: #0088b7;
}

.lila li::marker {
	color: #88426d;
}

.float_right {
	float: right;
}

main {
	position: relative;
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	padding-bottom: 2em;
}

main div.person {
        max-width: 280px;
        min-height: 460px;
        float: left;
        margin-right: 2em;
	margin-bottom: 1em;
	text-align: center;
}

main div.person figure {
	margin: 0;
	max-width: 150px;
	padding-left: 65px;
}

main div.person p {
	padding: 0;
	margin: 0;
}

main div.person .titel {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	padding-top: 0;
	min-height: 35px;
}

main div.person .italic {
	font-style: italic;
	padding-bottom: 1em;
	text-align: center;
	min-height: 80px;
}

main div.person .text {
	text-align: left;
	padding: 0.5em;
	min-height: 150px;
}

main div.person p.present {
         display: block;
         margin-top: 0.75em;
}

.text-intro {
  padding-right: 50px;
}
  .text-intro p {
    font-size: 19px;
    line-height: 30px;
    font-family: "Roboto Light", "Helvetica", "sans-serif";
    font-weight: 300;
  }

.logo {
  width: 180px;
  padding: 15px 0 0 0; 
}


#header {
  display: flex;
  height: 380px;
  background-image: url('../images/header.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  padding: 200px 0 100px 0;
  margin: 0;
}
  #header .container {
    align-self: center;
  }
  .header-text {
    display: block;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 50px;
  }

  .headerschrift1 {
	color: #000;
	font-family: "Roboto Bold", "Helvetica", "sans-serif";
	font-weight: 500;
	font-size: 42px;
	text-transform: uppercase;
	padding-bottom: 0;
	line-height: 1.2;
	letter-spacing: -.1rem;
  }

  .headerschrift2 {
	font-size: 32px;
	font-weight: 400;
	margin: 0;
	padding-top: 0;
	color: #d1232a;
	letter-spacing: -.1rem;
  }

#footer {
  background-color: #d1232a;
  color: #fff;
  padding: 75px 0 75px 0;
  margin: 0;
}

#footer.gelb {
	background-color: #ff9900 !important;
	color: #fff !important;
}

#footer.gruen {
        background-color: #60a174 !important;
        color: #fff !important;
}

#footer.blau {
        background-color: #0088b7 !important;
        color: #fff !important;
}

#footer.lila {
        background-color: #88426d !important;
        color: #fff !important;
}

  #footer .logo {
    padding: 0;
  }
  #footer ul {
    list-style-type: disc;
  }
    #footer ul li {
	list-style-type: none;
	list-style-image: none;
    }
      #footer ul li a {
        color: #fff;
        text-decoration: none;
      }

	#footer a:hover,
	#footer a:active {
		background-color: #f2f2f2 !important;
		color: #000 !important;
	}


section.grey {
	padding: 2em;
	background-color: #f3f3f3;
}

section.keinabstand {
	margin-top: 0 !important;
}

.two-columns-text {
  column-count: 2;
}

.row.video {
  margin-bottom: 50px;
}

.slick-slide {
  margin: 0 15px 0 15px;
}

.slick-dots li button:before {
    font-size: 16px;
    line-height: 50px;
    color: #d1232a;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #d1232a;
}


section.subnavigation {
  	margin: 0;
	padding-top: 20px;
}

.breadcrumbs {
  font-size: 16px;
}

.subnavigation-article {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
  .subnavigation-article button {
    border: 0;
    padding: 0;
    font-size: 16px;
    margin: 0;
  }
    .subnavigation-article button:hover {
      color: #d1232a;
    }

.subnavigation-article a.schrift {
	display: none;
}

.subnavigation-article a.genericon-next {
	content: '\f429';
	font-size: 36px;
}

.subnavigation-article a.genericon-previous {
        content: '\f430';
        font-size: 36px;
	margin-left: -0.25em;
}

section.footnotes {
  padding-top: 0;
}
  section.footnotes p {
    font-size: 14px;
	line-height: 18px;
	margin-bottom: 0.5em;
  }
  section.footnotes hr {
    width: 100%;
    margin: 25px 0;
  }

div#footnotes {
	margin-top: -290px;
	margin-bottom: 310px;
}

.recommendation {
  line-height: 0;
  padding-bottom: 20px;
}
  .recommendation span {
    display: block;
    background-color: #d1232a;
    padding: 15px 10px 15px 10px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    line-height: 20px;
height: 50px;
  }
    .recommendation span:hover {
      background-color: #a91d23;
    }
    .recommendation span a {
      color: #fff;
      text-decoration: none;
    }


.image-right .image-container {

}

.image-left .image-container {

}

figure.center {
	margin-left: auto;
        margin-right: auto;
	width: 70%;
}

figcaption {
	font-size: 0.8em;
	font-weight: bold;
	font-style: italic;
}

figcaption.top p {
	padding-bottom: 0;
	margin-bottom: 10px;
}

figcaption.top,
figcaption.bottom {
	font-style: normal;
	font-size: 0.9em;
}

figcaption .text-right {
	text-align: right !important;
}

figcaption .text-center {
        text-align: center !important;
	padding-bottom: 0.5em;
}

figure a:active,
figure a:hover {
	text-transform: none;
	background-color: transparent;
}

/* Responsive Youtube */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: auto;
	max-width: 100%;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Navigation */

  section.navigation {
    margin: 0;
  }

  .navigation {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    position: fixed;
    width: 100vw;
    z-index: 3;
    top: 0;
  }

    .navigation .container {
    }

    .navigation ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      background-color: #fff;
    }

      .navigation ul li {
        margin-bottom: 0;
	list-style-type: none;
	list-style-image: none;
      }

        .navigation li a {
          display: block;
          padding: 20px 20px;
          color: #000;
          font-weight: 300;
          text-decoration: none;
        }


    .navigation li a:hover,
    .navigation .menu-btn:hover,
	.navigation li a:focus,
	.navigation .menu-btn:hover {
      color: #d1232a !important;
	background-color: transparent !important;
	font-weight: bold;
    }

	
	.navigation li a:focus,
	.navigation li a:active {
      color: #d1232a;
	font-weight: 400; 
    }


    .navigation .logo {
      display: block;
/*      float: left;*/
      font-size: 2em;
/*      padding: 20px 20px;*/
	padding: 10px 0 0 20px;
      padding-left: 0;
      text-decoration: none;
    }


/* menu */

.navigation .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;

}

/* menu icon */

.navigation .menu-icon {
  cursor: pointer;
 display: block;
/*  float: left;*/
/*  padding: 55px 0px;*/
padding-bottom: 20px;
padding-top: 30px;
padding-left: 20px;
  position: relative;
  user-select: none;
    align-self: center;

}

.navigation .menu-icon .navicon {
  background: #d1232a;
  display: block;
  height: 4px;
  position: relative;
  transition: background .2s ease-out;
  width: 35px;
}

.navigation .menu-icon .navicon:before,
.navigation .menu-icon .navicon:after {
  background: #d1232a;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.navigation .menu-icon .navicon:before {
  top: 9px;
}

.navigation .menu-icon .navicon:after {
  top: -9px;
}

/* menu btn */

.navigation .menu-btn {
  display: none;
}

.navigation .menu-btn:checked ~ .menu {
  max-height: 400px;
}

.navigation .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.navigation .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.navigation .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

ul.menu li:nth-child(2),
ul.menu li:nth-child(3),
ul.menu li:nth-child(4) {
	position: relative;
}

.navigation .untermenu {
	margin: 0;
	position: absolute;
	bottom: -2em; 
	left: 6em;
	visibility: hidden;
	display: inline-block;
	z-index: 10000;
	width: 120px;
}

.navigation .untermenu li {
	padding-top: 0.5em;
	padding-left: 0.75em !important;
}

.navigation .untermenu a {
	color: black !important;
	padding: 0 !important;
}

.navigation .untermenu a.active {
	border-bottom: 1px solid #d1232a !important;
}

ul.menu li:nth-child(2):hover > ul {
	visibility: visible;
}



ul.menu li:nth-child(3):hover > ul,
ul.menu li:nth-child(4):hover > ul {
	visibility: visible;
	bottom: 0;
}

table.t_design {
/*	border: 1px solid white;*/
        width: 100%;
}

table.t_design tr {
	background-color: #f2f2f2;
	margin-bottom: 0.5em;	
}

table.t_design td {
	padding: 0.5em 1em;
	border: 1px solid white;
        hyphens: auto;
}

table.t_design td p
table.t_design td ul li, {
	margin-bottom: 0.5em !important;
	
}

table.t_design td ul {
	margin-bottom: 0.5em;
}

table.t_design td ul ul {
	margin-top: 0.5em;
}

table.zwei td.spalte1,
table.drei td.spalte1 {
	width: 20% !important;
}

table.zwei td {
	width: 80%;
}

table.drei  td {
	width: 35%;
}

table.vier td {
	width: 25%;
}

table.t_mobile td.spalte1 {
        width: 40% !important;
}

table.t_mobile td {
	width: 60%;
}

table.layout {
	table-layout: fixed;
}

table.t-mobile td.spalte1_halb {
	width: 50% !important;
}

table.t_matrix {
	display: none;
}

.spalte1 {
	color: white !important;
}

table.t_design tr.rot,
table.t_design td.rot {
	background-color: #d1232a !important;
	color: white !important;
}

table.t_design td.rot,
table.t_design td.gelb,
table.t_design td.gruen,
table.t_design td.blau,
table.t_design td.lila {
	font-weight: bold;
}

table.t_design tr.gelb,
table.t_design td.gelb {
        background-color: #ff9900 !important;
        color: white !important;
}

table.t_design tr.gruen,
table.t_design td.gruen {
        background-color: #60a174 !important;
        color: white !important;
}

table.t_design tr.blau,
table.t_design td.blau {
        background-color: #0088b7 !important;
        color: white !important;
}

table.t_design tr.lila,
table.t_design td.lila {
        background-color: #88426d !important;
        color: white !important;
}

table.t_design caption {
	color: #000 !important;
	text-align: left;
	font-size: 14px;
	font-weight: 300;	
}

table.t_design caption p {
	margin-bottom: 0;
}

table.t_zweispalten tr.linie_rot td {
	border-top: 2px solid #d1232a !important;
}

table.t_zweispalten tr.linie_gelb td {
        border-top: 2px solid #ff9900 !important;
}

table.t_zweispalten tr.linie_gruen td {
        border-top: 2px solid #60a174 !important;
}

table.t_zweispalten tr.linie_blau td {
        border-top: 2px solid #0088b7 !important;
}

table.t_zweispalten tr.linie_lila td {
        border-top: 2px solid #88426d !important;
}


table.t_zweispalten td {
	vertical-align: top !important;
}

table.t_zweispalten td:first-child {
	font-weight: bold;
	width: 40%;
}

table.t_zweispalten tr.linie_rot:last-child td {
	border-bottom: 2px solid #d1232a !important;
}

table.t_zweispalten tr.linie_gelb:last-child td {
        border-bottom: 2px solid #ff9900 !important;
}

table.t_zweispalten tr.linie_gruen:last-child td {
        border-bottom: 2px solid #60a174 !important;
}

table.t_zweispalten tr.linie_blau:last-child td {
        border-bottom: 2px solid #0088b7 !important;
}

table.t_zweispalten tr.linie_lila:last-child td {
        border-bottom: 2px solid #88426d !important;
}

table.t_zweispalten tr.linie_rot td a {
        color: #d1232a !important;
}

table.t_zweispalten tr.linie_rot td a:active,
table.t_zweispalten tr.linie_rot td a:hover {
        background-color: #d1232a !important;
        color: white !important;
}

table.t_zweispalten tr.linie_gelb td a {
        color: #ff9900 !important;
}

table.t_zweispalten tr.linie_gelb td a:active,
table.t_zweispalten tr.linie_gelb td a:hover {
        background-color: #ff9900 !important;
        color: white !important;
}

table.t_zweispalten tr.linie_gruen td a {
        color: #60a174 !important;
}

table.t_zweispalten tr.linie_gruen td a:active,
table.t_zweispalten tr.linie_gruen td a:hover {
        background-color: #60a174 !important;
        color: white !important;
}

table.t_zweispalten tr.linie_blau td a {
        color: #0088b7 !important;
}

table.t_zweispalten tr.linie_blau td a:active,
table.t_zweispalten tr.linie_blau td a:hover {
        background-color: #0088b7 !important;
        color: white !important;
}


table.t_zweispalten tr.linie_lila td a {
	color: #88426d !important;
}

table.t_zweispalten tr.linie_lila td a:active,
table.t_zweispalten tr.linie_lila td a:hover {
	background-color: #88426d !important;
	color: white !important;
}

table.t_zweispalten p {
        margin-bottom: 0 !important;
}

div.beitragvon {
	display: flex;
	justify-content: flex-start;
	width: 30%;
}

div.beitragvon figure {
	width: 4%;
	margin: 0;
	padding: 1.7em 20px 0 0;	
	display: flex;
}

div.beitragvon div.image {
        flex-shrink: 0;
}

div.beitragvon img {
	width: 4%;
}

div.beitragvon p {
	font-size: 0.8em;
}

div.h1_flex {
	display: flex;
	flex-direction: column;
}

div.h1_grafik {
	display: flex;
}

div.h1_grafik h1 {
	font-size: 1.6em !important;
	padding-left: 0.5em;
	width: 85%;
}

div.h1_grafik figure {
	width: 35px;
	margin: 0;
	padding: 0;
	display: flex;
}

div.h1_grafik div.image {
	flex-shrink: 0;
}

div.h1_grafik figure img {
	width: 30%;
}

div.zusatztext {
	display: flex;
	width: 100%;
	align-self: center;
}

div.zusatztext figure {
	margin: 0;
	padding: 0;
	padding-right: 0.5em;
	width: 20px;
	text-align: right;
	display: flex;
}

div.zusatztext div.pin {
	flex-shrink: 0;
} 

div.zusatztext figure img {
	width: 50%;
}

div.zusatztext p {
	padding-left: 1em;
	font-weight: bold;
	font-size: 1em;
}

figure.vorwort {
	float: none;
}

.einklappen {
	margin-top: -40px;
}

section.buchcover {
	margin: 60px 0;
}

.buchcover h2 {
	font-size: 20px;
	margin-left: 10px;
}	

.buchcover h3 {
        font-size: 18px;
	padding-top: 0 !important;
}

.buchcover h2 span.buch {
	display: block;
	margin-bottom: 10px;
}

.buchcover figure {
	margin-left: 10px !important;
}

div#matomo-opt-out input[type=checkbox] {
	opacity: 1;
	position: relative;
	margin-right: 0.5em;
}

div#matomo-opt-out label {
	display: inline;
}


/* Switch Nav Icon */

@media (min-width: 1024px) {

	main {
		width: 80%;
	}

	h1,
	h4 {
		font-size: 38px;
	}

	h2 {
		font-size: 24px;
	}

	.navigation ul {
			overflow: visible;
	}

  .navigation li {
    float: left;
  }
  .navigation li a {
    padding: 50px 15px;
  }

	.navigation .container {
		display: flex;
		width: 100% !important;
	}
	
	.navigation .logo {
		width: 15%;
		display: inline-block;
		float: none;
	}

	.navigation .menu {
		width: 75%;
		max-height: none;
	}

	.navigation .menu li {
		margin-left: 0 !important;
	}

	div#folgeseite {
		margin-top: 140px !important;
	}

 /* .navigation .menu {
    clear: none;
    float: right;
    max-height: none;
  }*/
  .navigation .menu-icon {
    display: none;
  }

  	.navigation .untermenu {
		bottom: 1.2em;
		width: 300px;
		height: 2em;
	}

	.navigation #buch2 {
		width: 180px !important;
	}

	.navigation .untermenu ul {
		list-style-position: inside;
	}

	.navigation .untermenu li {
		margin-top: 0 !important;
		padding-top: 0 !important;
		max-height: 1em !important;
	}

	ul.menu li:nth-child(2):hover > ul,
	ul.menu li:nth-child(2):focus > ul,	
	ul.menu li:nth-child(2):active > ul,
	ul.menu li:nth-child(3):hover > ul,
	ul.menu li:nth-child(3):focus > ul,
	ul.menu li:nth-child(3):active > ul,
	ul.menu li:nth-child(4):hover > ul,
        ul.menu li:nth-child(4):focus > ul,
        ul.menu li:nth-child(4):active > ul {
        	left: 0.5em;
		bottom: 1.2em;

	}

	div.h1_flex {
		flex-direction: row;
	}

	div.h1_grafik {
		width: 70%;
	}

	div.zusatztext {
		width: 30%;
	}

	.einklappen {
                margin-right: 300px;
        }

	.buchcover h2 {
        	display: flex;
	}

	.buchcover h2 span.buch {
        	width: 10%;
	}


}




/* Accordion styles */

label {
  margin-bottom: 0;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tabs {
  overflow: hidden;
/*  margin-top: 25px;*/
	margin-top: 0;
	margin-bottom: 1em;
}

.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  padding-left: 25px;
  font-weight: bold;
  font-size: 24px;
  cursor: pointer;
  margin-bottom: 10px;
}

.tab-label-rot {
	 color: #d1232a;
}

.tab-label-gelb {
         color: #ff9900;
}

.tab-label-lila {
         color: #88426d;
}

.tab-label-gruen {
         color: #60a174;
}

.tab-label-blau {
         color: #0088b7;
}


  .tab-label-rot:hover {
    background: #d1232a;
	color: #fff;
  }

.tab-label-gelb:hover {
    background: #ff9900;
	color: #fff;
  }

.tab-label-gruen:hover {
    background: #60a174;
	color: #fff;
  }

.tab-label-blau:hover {
    background: #0088b7;
	color: #fff;
  }

.tab-label-lila:hover {
    background: #88426d;
	color: #fff;
  }


  .tab-label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all .35s;
    font-size: 35px;
    line-height: 35px;
  }
.tab-content {
  max-height: 0;
  padding: 0 !important;
  color: #2c3e50;
  background: white;
  transition: all .45s;
}
.tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #d1232a;
  cursor: pointer;
}
  .tab-close:hover {
    background: #a91d23;
  }

input:checked + .tab-label-rot {
  background: #a91d23 !important;
  color: #fff !important;
}

input:checked + .tab-label-gelb {
	background: #cc7a00 !important;
	color: #fff !important;
}

input:checked + .tab-label-gruen {
        background: #4c815d !important;
	color: #fff !important;
}

input:checked + .tab-label-blau {
        background: #006d92 !important;
	color: #fff !important;
}

input:checked + .tab-label-lila {
        background: #6d3557 !important;
	color: #fff !important;
}

input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
input:checked ~ .tab-content {
/*  max-height: 100vh;*/
	max-height: 100%;
  padding: 1em;
}

.tab-article {
  background-color: #f6f6f6;
  padding: 20px;
  padding-left: 25px;
  margin-bottom: 10px;
  display: flex;
  border-bottom: 10px solid #fff;
}
  .tab-article .headlines {
    flex: 1;
    margin: 0;
    align-self: center;
  }
  .tab-article h3 {
    color: #000;
    font-size: 24px;
    font-weight: 300;
    text-transform: none;
  }
  .tab-article h2 {
    color: #000;
    font-size: 18px;
    line-height: 18px;
    font-style: italic;
    font-weight: 200;
    margin-top: 5px;
  }
  .tab-article .buttons {
    align-self: center;
  }
  .tab-article .buttons button {
    border: 0;
    font-size: 18px;
    margin: 0;
    height: 50px;
    text-transform: none;
    color: #000;
  }
/*  .tab-article .buttons button.button-rot:hover {
    color: #d1232a;
  }

.tab-article .buttons button.button-gelb:hover {
    color: #ff9900;
  }

.tab-article .buttons button.button-gruen:hover {
    color: #60a174;
  }

.tab-article .buttons button.button-blau:hover {
    color: #0088b7;
  }

.tab-article .buttons button.button-lila:hover {
    color: #88426d;
  }*/

.tab-article .buttons button.button-rot a {
	color: #d1232a !important;
}

.tab-article .buttons button.button-gelb a {
        color: #ff9900 !important;
}

.tab-article .buttons button.button-gruen a {
        color: #60a174 !important;
}

.tab-article .buttons button.button-blau a {
        color: #0088b7 !important;
}

.tab-article .buttons button.button-lila a {
        color: #88426d !important;
}

.tab-article .buttons button.button-rot a:hover,
.tab-article .buttons button.button-rot a:focus,
.tab-article .buttons button.button-rot a:active {
	background-color: #d1232a !important;
	color: #fff !important;
}

.tab-article .buttons button.button-gelb a:hover,
.tab-article .buttons button.button-gelb a:focus,
.tab-article .buttons button.button-gelb a:active {
        background-color: #ff9900 !important;
        color: #fff !important;
}

.tab-article .buttons button.button-gruen a:hover,
.tab-article .buttons button.button-gruen a:focus,
.tab-article .buttons button.button-gruen a:active  {
        background-color: #60a174 !important;
        color: #fff !important;
}

.tab-article .buttons button.button-blau a:hover,
.tab-article .buttons button.button-blau a:focus,
.tab-article .buttons button.button-blau a:active {
        background-color: #0088b7 !important;
        color: #fff !important;
}

.tab-article .buttons button.button-lila a:hover,
.tab-article .buttons button.button-lila a:focus,
.tab-article .buttons button.button-lila a:active {
        background-color: #88426d !important;
        color: #fff !important;
}

.tab-article .catname {
	font-size: 18px;
	font-weight: 300;
}

.tab-article .artname {
        font-size: 18px;
        font-weight: 300;
	color: #000;
}
	
  /* Larger than mobile */
  @media (min-width: 660px) {

	.navigation .logo {
		float: left;
		padding: 20px 0 0 20px;
	}

	.navigation .menu-icon {
		float: right;
	}

	div.kasten {
		width: 280px;
	}

	div#folgeseite {
		margin-top: 100px;
	}

	section.subnavigation {
		padding-top: 0;
	}
	
	table.t_matrix {
		display: block;
	}

	table.t_mobile {
		display: none;
	}

	figure.vorwort {
        	float: right;
	}

}

  /* Smaller than phablet (also point when grid becomes active) */
  @media (max-width: 550px) {
    h1 {
      font-size: 28px;
    }

    #header {
      height: auto;
      margin: 0;
      padding-top: 120px;
      padding-bottom: 0;
    }
    #header .container {
      width: 100%;
    }
      #header .container h1 {
        font-size: 24px;
      }
    #header .container h2 {
      font-size: 18px;
    }
    .header-text {
      padding: 30px;
    }
    .two-columns-text {
      column-count: 1;
    }
    .subnavigation-article button {
      font-size: 12px;
/*	width: 100px;*/
    }
    .tab-label {
      font-size: 20px
    }
   /* .tab-article .buttons {
      flex-direction: row;
    }*/
    .tab-article .buttons button {
      text-align: right;
      height: 35px;
    }

	.tab-article {
		flex-direction: column;
	}

    .container	 {
      width: 90%
    }
    #footer .row {
      display: flex;
      flex-direction: column;
    }
    #footer .logo {
      width: 80%;
      padding: 0 20px 0 20px;
    }
    #footer .four.columns {
      padding: 35px 20px 20px 20px;
    }

  }

  /* Larger than tablet */
  @media (max-width: 770px) {
    .video-container {
      margin-bottom: 25px;
    }
    #footer .row {
	  display: flex;
    }
    #footer .logo {
      padding-right: 25px;
    }
    .navigation-footer {
      display: none;
    }
    .text-intro {
      padding: 0;
    }
    .buttons {
      align-self: center;
      display: flex;
    }
    .buttons button {
      padding: 0 15px;
    }
    .tab-article .headlines {
      flex: auto;
    }
	
	main div.person .italic {
                min-height: 0;
        }

	figure.center {
		width: 100%;
	}

	div.beitragvon {
		width: 80%;
	}	  
}

  /* Larger than desktop */
  @media (min-width: 1000px) {

}

  /* Larger than Desktop HD */
  @media (min-width: 1200px) {}

@media (min-width: 550px) {
	
	div.zweispalten {
		display: flex;
	}

	div.spalte {
		width: 50%;
		display: flex;
		flex-direction: column;
	}	
	
	div.spalte:first-child {
		padding-right: 20px;
	}

	div.spaltenueberschrift {
		min-height: 60px;
	}

	div.spaltenueberschrift p {
		margin-bottom: 0 !important;
	}
}

@media (min-width: 400px) {
	
/*	.navigation .menu-icon {

	  float: right;
	  padding: 55px 10px;
	}*/

	.subnavigation-article a.schrift {
		display: inline;
	}	
}