/* ***********************************************

Property: 	Carl-August-Heckscher-Schule
Domain: 	- www.heckscher-schule.de -
Author: 	Internet Agentur Scherer
Author URI: 	https://www.ia-scherer.de

*********************************************** */

/* roboto-condensed-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-condensed-v27-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-condensed-v27-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/roboto-condensed-v27-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/roboto-condensed-v27-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v27-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v27-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v27-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-condensed-v27-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-condensed-v27-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-condensed-v27-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/roboto-condensed-v27-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v27-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-condensed-v27-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/roboto-condensed-v27-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-condensed-v27-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-condensed-v27-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ***********************************************
	GENERAL
*********************************************** */

:root {
  --white: #ffffff;
  --schrift: #747474;
  --orange: #f7931f;
  --hellgrau: #e7e7e9;
  --dunkelgrau: #808285;
  --footer-p: #121212;
}

body {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--schrift);
}

.orange {
  border: none;
  height: 2px;
  background-color: var(--orange);
  margin: 2rem 0;
}

.com-content-article.item-page a {
 color: var(--schrift);
 text-decoration: none;
 transition: color .5s ease-in-out;
}

.com-content-article.item-page a:hover {
  color: var(--orange);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
 font-family: 'Roboto Condensed';
}

h1, .h1 {
 font-size: 1.3rem;
 font-style: normal;
 font-weight: 700;
 color: var(--schrift);
}

.h1-heading {
  display:inline-flex;         
  align-items:center;
  gap:0.5rem;
  margin:0;
}

.h1-heading::before{
  content:"";
  width:32px;
  height:32px;
  flex:0 0 32px;
  background:url("../images/heckscher-schule-icon.webp") no-repeat center / contain;
}

.h1-heading-center-container {
  text-align: center;
}

.h1-heading-center {
  display:inline-flex;       
  align-items:center;
  gap:0.5rem;
  margin:0;
}

.h1-heading-center::before{
  content:"";
  width:32px;
  height:32px;
  flex:0 0 32px;
  background:url("../images/heckscher-schule-icon.webp") no-repeat center / contain;
}


h2, .h2 {
 font-size: 1.2rem;
 font-style: normal;
 font-weight: 700;
 color: var(--schrift);
}

.h2-heading {
  display:inline-flex;         
  align-items:center;
  gap:0.4rem;
  margin:0;
}

.h2-heading::before{
  content:"";
  width:22px;
  height:22px;
  flex:0 0 22px;
  background:url("../images/heckscher-schule-icon.webp") no-repeat center / contain;
}


h3, .h3 {
 font-size: 1.1rem;
 font-style: normal;
 font-weight: 400;
 color: var(--schrift);
}

h4, .h4 {
 font-size: 1.1rem;
 font-style: normal;
 font-weight: 400;
 color: var(--dunkelgrau);
}


p, .p {
 font-family: 'Roboto Condensed';
 hyphens: auto;
}

ul {
list-style-type: disc;
}

li::marker {
 color: var(--orange);
}

.site-grid {
 margin-top: 5rem;
 margin-bottom: 5rem;
}

/* ***********************************************
	Site - Reihenfolge Position Sidebar-left 
*********************************************** */

@media (max-width: 991px) {
    .site-grid {
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a  top-a  top-a  top-a  ."
            ". top-b  top-b  top-b  top-b  ."
            ". side-l side-l side-l side-l ."
            ". comp   comp   comp   comp   ."
            ". side-r side-r side-r side-r ."
            ". bot-a  bot-a  bot-a  bot-a  ."
            ". bot-b  bot-b  bot-b  bot-b  ."
    }
}

/* ***********************************************
	Navigation
*********************************************** */

.navbar-toggler.navbar-toggler-right {
 margin: 0 auto;
}

.navbar-toggler {
 color: #fff;
 border: 1px solid #fff;
}

.metismenu.mod-menu .metismenu-item>a {
 margin: 0 auto;
}


/* ***********************************************
	Bilder
*********************************************** */

img.heckscher {
 border-radius: 20px;
 border: 1px solid var(--orange);
}

img.flyer {
 border-radius: 20px;
 border: 1px solid var(--schrift);
}


/* ***********************************************
	HEADER
*********************************************** */

.container-header {
 background-color: #fff !important;
 background-image: none !important;

}

.container-headerimage {
 max-width: 1320px;
 margin: 0 auto;
}

.container-nav {
 max-width: 1320px;
 margin: 0 auto;
 background-color: var(--schrift);
 border-radius: 0 0 30px 30px;
}

.metismenu.mod-menu .metismenu-item {
 font-size: 1.3rem;
 line-height: 1.3;
}


.metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>a:hover, .metismenu.mod-menu .metismenu-item.active>a {
  color: var(--white);
  text-decoration: none;
  transition: color .5s ease-in-out;
}

/* Ober- und Unterstrich Active */

.metismenu.mod-menu .metismenu-item.active > a {
  position: relative;
  text-decoration: none;
  padding: .1em 0;
}

.metismenu.mod-menu .metismenu-item.active > a::before,
.metismenu.mod-menu .metismenu-item.active > a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--white);
}

.metismenu.mod-menu .metismenu-item.active > a::before {  top: 0; }    /* Oberstrich  */
.metismenu.mod-menu .metismenu-item.active > a::after { bottom: 0; }  /* Unterstrich */

.metismenu.mod-menu .metismenu-item>a:hover {
  color: var(--white);
  text-decoration: none;
  transition: color .5s ease-in-out;
}

.metismenu.mod-menu .metismenu-item.active > a {
  color: var(--white);
  text-decoration: none;
}

/* Ober- und Unterstrich Zwischennavigation Schule */

body.itemid-109 .metismenu-item.item-102 a,
body.itemid-110 .metismenu-item.item-102 a,
body.itemid-111 .metismenu-item.item-102 a,
body.itemid-112 .metismenu-item.item-102 a,
body.itemid-122 .metismenu-item.item-102 a,
body.itemid-113 .metismenu-item.item-102 a,
body.itemid-114 .metismenu-item.item-102 a {
  position: relative;
  text-decoration: none;
  padding: .1em 0;
}

body.itemid-109 .metismenu-item.item-102 > a::before,
body.itemid-109 .metismenu-item.item-102 > a::after,
body.itemid-110 .metismenu-item.item-102 > a::before,
body.itemid-110 .metismenu-item.item-102 > a::after,
body.itemid-111 .metismenu-item.item-102 > a::before,
body.itemid-111 .metismenu-item.item-102 > a::after,
body.itemid-112 .metismenu-item.item-102 > a::before,
body.itemid-112 .metismenu-item.item-102 > a::after,
body.itemid-122 .metismenu-item.item-102 > a::before,
body.itemid-122 .metismenu-item.item-102 > a::after,
body.itemid-113 .metismenu-item.item-102 > a::before,
body.itemid-113 .metismenu-item.item-102 > a::after,
body.itemid-114 .metismenu-item.item-102 > a::before,
body.itemid-114 .metismenu-item.item-102 > a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--white);
}

body.itemid-109 .metismenu-item.item-102 > a,
body.itemid-110 .metismenu-item.item-102 > a,
body.itemid-111 .metismenu-item.item-102 > a,
body.itemid-112 .metismenu-item.item-102 > a,
body.itemid-122 .metismenu-item.item-102 > a,
body.itemid-113 .metismenu-item.item-102 > a,
body.itemid-114 .metismenu-item.item-102 > a {
  color: var(--white);
  text-decoration: none;
}

body.itemid-109 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-109 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-110 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-110 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-111 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-111 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-112 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-112 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-122 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-122 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-113 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-113 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-114 .metismenu-item.item-102 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-114 .metismenu-item.item-102 > a::after { bottom: 0; }  /* Unterstrich */


/* Ober- und Unterstrich Zwischennavigation Beratungszentrum */

body.itemid-115 .metismenu-item.item-103 a,
body.itemid-116 .metismenu-item.item-103 a {
  position: relative;
  text-decoration: none;
  padding: .1em 0;
}

body.itemid-115 .metismenu-item.item-103 > a::before,
body.itemid-115 .metismenu-item.item-103 > a::after,
body.itemid-116 .metismenu-item.item-103 > a::before,
body.itemid-116 .metismenu-item.item-103 > a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--white);
}

body.itemid-115 .metismenu-item.item-103 > a,
body.itemid-116 .metismenu-item.item-103 > a, {
  color: var(--white);
  text-decoration: none;
}

body.itemid-115 .metismenu-item.item-103 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-115 .metismenu-item.item-103 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-116 .metismenu-item.item-103 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-116 .metismenu-item.item-103 > a::after { bottom: 0; }  /* Unterstrich */

/* Ober- und Unterstrich Zwischennavigation Beratungszentrum */

body.itemid-118 .metismenu-item.item-104 a,
body.itemid-120 .metismenu-item.item-104 a {
  position: relative;
  text-decoration: none;
  padding: .1em 0;
}

body.itemid-118 .metismenu-item.item-104 > a::before,
body.itemid-118 .metismenu-item.item-104 > a::after,
body.itemid-120 .metismenu-item.item-104 > a::before,
body.itemid-120 .metismenu-item.item-104 > a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--white);
}

body.itemid-118 .metismenu-item.item-104 > a,
body.itemid-120 .metismenu-item.item-104 > a, {
  color: var(--white);
  text-decoration: none;
}

body.itemid-118 .metismenu-item.item-104 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-118 .metismenu-item.item-104 > a::after { bottom: 0; }  /* Unterstrich */
body.itemid-120 .metismenu-item.item-104 > a::before {  top: 0; }    /* Oberstrich  */
body.itemid-120 .metismenu-item.item-104 > a::after { bottom: 0; }  /* Unterstrich */





.container-nav .mod-menu {
  justify-content: center;
}

.container-headerlogo {
 max-width: 1320px;
 margin: 0 auto;
}

.header-logo {
 position: absolute;
 z-index: 10;
 width: 40%;
 top: 0px;
 left: 30px;
}

/* ***********************************************
	SIDEBAR
*********************************************** */

.container-sidebar-left .card {
 border-radius: 10px 10px 0 0 !important;
}

.sidebar-left .card-header {
 background-color: var(--schrift);
 border-radius: 10px 10px 10px 10px;
}

.sidebar-left h3.card-header {
  color: var(--white);
  font-size: 1.3rem;
  text-align: center;
  border: 1px solid var(--schrift);
  border-radius: 10px 10px 0 0;
  border-bottom: 0px;
}

.regular .card-body {
  color: var(--schrift);
  background-color: var(--white);
  border: 1px solid var(--schrift);
  border-radius: 0 0 10px 10px;
  padding: 2px;
}

.regular .card-body p {
  color: var(--schrift);
  margin-top: 1rem;
  padding: 2px;
}

.regular .card-body a {
 color: var(--schrift);
 text-decoration: none;
 transition: color .5s ease-in-out;
}

.regular .card-body a:hover {
  color: var(--orange);
}




/* ***********************************************
	SIDEBAR-NAVIGATION
*********************************************** */

.container-sidebar-left .card {
 --card-spacer-x: 0rem;
 --card-spacer-y: 0rem;
}

.container-sidebar-left .card {
 --card-border-width: 0;
 --card-border-color: #fff;
}

.container-sidebar-left .card-body {
  color: var(--schrift);
  background-color: var(--white);
  border: 1px solid var(--schrift);
  border-radius: 0 0 10px 10px;
  padding: 2px;
}


.container-sidebar-left .mod-list li {
 background-color: var(--white);
 border-radius: 5px;
 margin-left: 1rem;
 border-bottom: 2px solid #fff;
}

.container-sidebar-left .mod-list li a {
 display: inline-block;
 color: var(--schrift);
 width: 100%;
 height: 100%;
  text-decoration: none;
  background-image: linear-gradient(#747474, #747474);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .3s;

}

.container-sidebar-left .mod-list li a:hover {
 text-decoration: underline;
 color: var(--schrift);
}

.container-sidebar-left .mod-list li.current a {
 text-decoration: underline;
 color: var(--schrift);
}




/* ***********************************************
	ACCORDION
*********************************************** */




/* ***********************************************
	FOOTER
*********************************************** */

.footer {
 background-color: #fff;
 background-image: none;
 margin-top: 1em;
}

.footer .grid-child  {
  font-size: 1rem;
 color: var(--footer-p);
 background-color: var(--orange);
 border-radius: 30px 30px 0 0;
 padding: 0.5rem 0.5em;
}

.footer .grid-child a {
  color: var(--footer-p);
  transition: color .5s ease-in-out;
}


.footer .grid-child a:hover {
  color: var(--white);
  transition: color .5s ease-in-out;
}

.footer .grid-child .mod-custom {
 margin: 0 1.5rem 0 1.5rem;
}

.footer .grid-child .mod-custom p {
 margin-bottom: 0rem;
}