:root {
    --page-bg: #FFF;
    --text: #1F475D;
    --link: #006A7B;
    --mint: #E5F1F3;
    --mintLight: #F6F9F9;
    --gray: #5D5B5B;
    --line: #00364A;
}

/* mobile font sizes
15px        88%     header top
17px        100%
25px        147%    h2
35px        200%    h1
 */

html {font-size: 10px}
body {font-family: 'Martel Sans', sans-serif;font-size: 17px;color: var(--text);background-color: var(--page-bg);line-height: 1.6em}
html.noScroll, html.noScroll body {margin: 0; height: 100%; overflow: hidden}
html.noScroll #main, html.noScroll #footer {opacity: 0}
#container {padding-top: 1.4em;min-height: calc(100vh - (270px + 550px))}
/* global frame */
#header .inside, #stage .inside, #main .inside, #footer .inside {width: 80%;margin-left: auto;margin-right: auto;max-width: 1300px}

/* header / breadcrumbs */
#header {height: 270px;box-shadow: 0 3px 6px #00000029;position: relative;left: 0;width: 100%;z-index: 10;background-color: var(--page-bg);transition: height .3s}
#header.fixed {position: fixed;height: 160px}
#header.fixed #topBar {height: 0;overflow: hidden}
#header.fixed #maeMM-trigger {margin-top: 0}
#header.fixed #logo {margin-top: 10px}
#header .inside {height: 100%;position: relative}
#topBar {position: relative;height: 36px;line-height: 36px;font-size: 88%;font-weight: 200;text-align: center;transition: height .3s}
#topBar a {color: var(--page-bg);text-decoration: none}
#topBarBg {background-color: var(--text);z-index: 1}
#topBar .icon {position: relative;z-index: 2;display: inline-block;padding-left: 28px;background-position: left center;background-size: 22px auto;background-repeat: no-repeat}
#headerSearch {background-image: url("../images/lgh/lupe.png");margin-right: 30px}
#headerLogin {background-image: url("../images/lgh/login.png")}
#logo {display: block;width: 240px;height: 90px;margin: 30px auto 0 auto;background-image: url("../images/lgh/logo_LGH_2024.png");background-size: contain}
.bread {margin-bottom: 1.4em;color: var(--gray);font-size: 88%;font-weight: 200}
.bread li {display: inline-block}
.bread a {color: var(--gray);text-decoration: none}
.bread a:hover {text-decoration: underline}
.bread li:after {content: '/';display: inline-block;margin: 0 .4em}
.bread li:last-child:after {display: none}

/* desktop navi */
#mainNav {position: relative;margin-top: 50px}
#mainNav a {text-decoration: none;color: var(--text)}
#mainNav ul.level-1  {display: flex;justify-content: space-between}
#mainNav li.level-1 > a {font-size: 88%}
#mainNav li.level-1.trail > a, #mainNav li.opened.level-1 > a {text-decoration: underline;text-underline-offset: 6px}
#mainNav.hasOpenedLi li.level-1.trail:not(.opened) > a {text-decoration: none}
#mainNav li.level-1 > a:hover {color: var(--link)}
#mainNav li.opened ul {display: block}
#mainNav ul.level-3 {display: none !important;}
#mainNav ul.level-2 {display: none;position: absolute;z-index: 2;font-size: 88%;padding: 40px 0;left: 0;right: 0;top: 50px;background-color: var(--page-bg);height: calc(100vh - 305px)}
#mainNav ul.level-2:before {position: absolute;content: '';background-color: var(--page-bg);left: -10vw;width: 100vw;top: 0;height: 100%}
#mainNav ul.level-2 li {position: relative;z-index: 2;font-weight: 200;width: 37%;padding: .5em 8px;margin-right: 20px;margin-top: -1px;border-bottom: solid var(--text) 1px;border-top: solid var(--text) 1px}
#mainNav .doFloat ul.level-2 li {float: left;}
#mainNav ul.level-2 li.active, #mainNav ul.level-2 li.trail {font-weight: bold}
#mainNav ul.level-2 a:hover {text-decoration: underline}
#mainNav ul.level-2 .closeNav {position: absolute;z-index: 2;right: 0;top: 52px;font-weight: 200;height: 32px;line-height: 32px;padding-right: 40px;background-image: url("../images/lgh/closeX.png");background-position: right center;background-repeat: no-repeat;background-size: 26px 26px}

/* mobile navi */
#maeMM-trigger {position: relative;width: 35px;margin: 43px auto 0 auto;right: unset}
#maeMM-trigger .bar {background-color: var(--text);height: 3px;border-radius: 2px;margin: 8px 0}
#maeMM-trigger.theX {display: none}
#maeMM .headerWrapper, #maeMM .wrapper {margin-right: 0}
#maeMM .headerWrapper {font-weight: bold}
#maeMM a {color: var(--text);background: var(--page-bg);border-bottom: solid #444 1px}  /* menu items */
#maeMM a:not(.top):hover, #maeMM.parentToggles a.top:hover {background: var(--mint);}   /* menu item hover */
#maeMM a:focus {background-color: var(--page-bg)}
#maeMM .wrapper {background: var(--page-bg)}                                            /* background beneath menu items */
#maeMM .maeBtn {background: var(--page-bg);}                                            /* nav buttons */
#maeMM .maeBtn:hover, #maeMM .maeBtn:focus {background: var(--mint)}                    /* nav buttons hovered */
#maeMM a .inside {border-color: var(--text)}                                            /* nav button symbol color and size */
#maeMM .close:before, #maeMM .close:after {background: var(--text)}                     /* close button symbol color */
#maeMM .opener, #maeMM .close, #maeMM a .back {border-color: #444}                      /* nav button border */
#maeMM a.hasBack, #maeMM a.heading {border-bottom-color: #ccc}
#maeMM a .inside {top: 7px}

/* basic styles */
a {color: var(--link);text-decoration: underline}
a.outerLink {display: block;text-decoration: none;color: inherit;transition: all .3s}
a.outerLink:hover {transform: scale(1.05)}
a:hover {text-decoration: none}
strong, b {font-weight: bold}
em, i {font-style: italic}
.inline {display: inline !important;}
p {margin-bottom: 1em}
.elText ul, .elText ol, .elTeaser ul, .elTeaser ol, .elXteacher ul {margin: 0 0 1.5em 1em}
.elText li, .elTeaser li, .elXteacher li {list-style-type: disc;list-style-position: outside;margin-bottom: .5em}
.elText ol li {list-style-type: decimal}
a[href^="mailto:"], a[href^="tel:"], span.fax {display: inline-block;padding-left: 1.4em;background-size: 1em auto;background-position: left .3em;background-repeat: no-repeat}
a[href^="mailto:"] {background-image: url("../images/lgh/icon-mail.png")}
a[href^="tel:"] {background-image: url("../images/lgh/icon-tel.png")}
span.fax {background-image: url("../images/lgh/icon-fax.png")}
.elMargin {content:'';height: 3em}
.elMargin.large {content:'';height: 6em}
.elMargin.lined {content:'';height: 3em;border-bottom: solid var(--line) 2px;margin-bottom: 3em}
.elTeaser {margin-bottom: 1em}
.elTeaser .textBox {margin-top: 10px;background-color: var(--mint);padding: 20px 30px}
.image_container {position: relative}
.image_container.float_left, .image_container.float_right {float: none}
figcaption {position: relative}
figcaption .source {position: absolute;bottom: 100%;color: var(--page-bg);font-size: 70%;line-height: 1.2em;padding: 10px;background-color: rgba(0,0,0,.3);font-weight: 200}
figcaption .description {font-size: 80%;line-height: 1.2em;padding: .4em 0}
figcaption .source:before {content: '© '}
#stage figcaption .description, .listItem figcaption .description, .elTeaser figcaption .description, .elImageGallery figcaption .description {display: none}
button, .button, input[type=submit] {display: inline-block;background-color: var(--link);color: var(--page-bg);text-decoration: none;padding: .4em 1em .2em 1em;border-radius: 10px;transition: all .3s;text-align: center;}
a.button {width: 100%}
button:hover, .button:hover, input[type=submit]:hover {background-color: var(--line);transition-duration: unset}
.elImage {margin-bottom: 1em}
#stage .elImage {margin-bottom: 0}
.elXquote {margin-top: 3em;position: relative}
.elXquote .wrapper {padding-right: 10px;border-right: solid #097989 17px}
.elXquote .content {background-color: #F5F5F5;}
.elXquote .text {padding: 1em 1.5em}
.elXquote strong {font-family: "Martel", serif;font-weight: 200;font-size: 130%;line-height: 1.4em}
.elXquote em {display: block;font-family: "Martel Sans", serif;color: #707070;font-size: 70%;font-weight: 400;line-height: 1.4em}
.elXquote:after {display: block;content: '';position: absolute;width: 100px;height: 100px;left: 2.5em;top: -60px;background-image: url("../images/lgh/quote.png");background-size: contain;background-repeat: no-repeat}
.numList .elText {padding-top: 120px;margin-bottom: 3em;position: relative;}
.numList .elText .num {position: absolute;left: 0;top: 0;font-weight: bold;font-size: 500%;font-family: "Martel", serif;color: var(--mint);line-height: 100px;border-left: solid #097989 9px;height: 100px;padding-left: 10px}
.numList .elText .num .txt {position: absolute;left: 8px;bottom: 0;height: 1em}

/* News / Events */
.listItem {margin-bottom: 2em}
.listItem .image_container {margin-bottom: 2em}
.elXnewsList .listItem .image_container {margin-bottom: 0}
.elXnewsList .listItem .content {padding: 2em 1em 1em 1em;background-color: var(--mintLight)}
.elXnewsList .listItem.arch {background-color: var(--mintLight)}
.elXnewsList .listItem.arch .image_container {margin: 2em 0 0 0}
p.date {font-size: 88%;font-weight: 200;margin: .5em 0;}
.elNewsDetails h1, .elEventDetails h1 {margin-top: 50px}
h2.sub2 {color: #658692;font-size: 130%}
.feFilter {margin-bottom: 2em}

/* image map */
.mapArea {transition: transform .3s}
.mapArea:hover {transform: scale(1.15)}
.mapdesc {margin-bottom: 30px;position: relative;height: 3em;}
.mapdesc .image_container {position: absolute;left: 15px;top: 0;height: 100%;overflow: hidden}
.mapdesc img {height: 100%;width: auto}
.mapdesc p {background-color: var(--mint);height: 100%;padding-left: 5.5em;background-position: 98% center;background-size: 30px 37px;background-repeat: no-repeat}
.mapdesc a {font-family: "Martel", serif;font-weight: bold;font-size: 110%;display: inline-block;text-decoration: none;padding-top: .7em}
.mapdesc.mensa p {background-image: url("../images/lgh/map/icon-mensa.png")}
.mapdesc.sozial p {background-image: url("../images/lgh/map/icon-star.png")}
.mapdesc.schule p {background-image: url("../images/lgh/map/icon-book.png")}
.mapdesc.halle p {background-image: url("../images/lgh/map/icon-sport.png")}
.mapdesc.girls p {background-image: url("../images/lgh/map/icon-girls.png")}
.mapdesc.boys p {background-image: url("../images/lgh/map/icon-boys.png")}
.elImageMap.girls .mapArea.girls {background-image: url("../images/lgh/map/icon-girls-active.png") !important}
.elImageMap.boys .mapArea.boys {background-image: url("../images/lgh/map/icon-boys-active.png") !important}
.elImageMap.mensa .mapArea.mensa {background-image: url("../images/lgh/map/icon-mensa-active.png") !important}
.elImageMap.sozial .mapArea.sozial {background-image: url("../images/lgh/map/icon-star-active.png") !important}
.elImageMap.schule .mapArea.schule {background-image: url("../images/lgh/map/icon-book-active.png") !important}
.elImageMap.halle .mapArea.halle {background-image: url("../images/lgh/map/icon-sport-active.png") !important}
.elImageMap.museum .mapArea.museum,
.elImageMap.tennis .mapArea.tennis,
.elImageMap.basketball .mapArea.basketball,
.elImageMap.beachvolley .mapArea.beachvolley,
.elImageMap.kompetenz .mapArea.kompetenz,
.elImageMap.guests .mapArea.guests {filter: brightness(180%)}

h1, h2 {font-family: "Martel", serif;font-weight: bold;line-height: 1.4em}
h1 {font-size: 200%;margin-bottom: 35px}
h1:after, h2:after {display: block;content: '';height: 2px;background-color: var(--line);margin-top: 25px}
h2 {font-size: 150%;margin-bottom: 35px}
.elXnewsList h2, .elTeaser h2, .elNewsDetails h2, .elEventList h2, .searchResult h2, .elXteacher h2 {margin-bottom: 0}
.numList h2 {margin-bottom: .5em}
.elXnewsList h2:after, .elTeaser h2:after, .elNewsDetails h2:after, .elEventList h2:after, .elXquote h2:after, .numList h2:after, .elWrapper.mint h2:after, .searchResult h2:after, .elXteacher h2:after {display: none}
.elXquote h2 {margin: .5em 0}
.elXimageTeaser {overflow: hidden;margin-bottom: 30px}
.elXimageTeaser a {display: block;position: relative}
.elXimageTeaser .hoverImg {position: absolute;top: 100%;opacity: 0;transition: top .5s ease-in-out, opacity .5s ease-in-out;}
.elXimageTeaser:hover .hoverImg {top: 0;opacity: 1}
.elXimageTeaser .title {position: absolute;text-align: center;left: 0;right: 0;bottom: 10%;transition: all .5s}
.elXimageTeaser:hover .title {color: var(--page-bg)}
.mintRight .envelope {background-color: var(--mint);padding: 2em 0 1em 3em;position: relative}
.mintRight.light .envelope {background-color: var(--mintLight)}
.mintRight .envelope:after {display: block;content: '';position: absolute;background-color: var(--mint);left: 100%;top: 0;bottom: 0;right: -5000px}
.mintRight.light .envelope:after {background-color: var(--mintLight)}
.elWrapper.mint .envelope {background-color: var(--mint);padding: 1.5em;overflow: hidden}
.elWrapper.mint h2 {margin-bottom: 20px}
.elWrapper.mint .elText p, .download .description, .elDownload .size, .elDownload .description {font-size: 88%;font-weight: 200;line-height: 1.6em}
.elImageGallery .image_container {margin-bottom: 30px}
p.download {border: solid var(--link) 1px;border-radius: 10px;padding: .5em .5em .5em 70px;background-image: url("../images/lgh/icon-download.png");background-size: 30px auto;background-position: 20px center;background-repeat: no-repeat}
.elAccordion {background-color: var(--mint);overflow: hidden;margin-bottom: 8px}
.accoTransparent .elAccordion {background-color: transparent} /* für Inhalte-Beispielseite von vk */
.accoTransparent .elAccordion .title {background-color: var(--mint)}
.elAccordion .title {font-weight: bold;padding: 8px 60px 8px 15px;position: relative}
.elAccordion .title:after {position: absolute;display: block;content: '';width: 14px;height: 14px;border: solid var(--link) 2px;top: 15px;transform: rotate(45deg);right: 30px;border-left: none;border-top: none;transition: transform .3s, top .3s}
.elAccordion.opened .title:after {transform: rotate(225deg);top: 20px}
.elAccordion .content {padding: 10px 15px 0 15px;border-top: solid var(--line) 2px}
.elAddress {margin-bottom: 30px}
.elAddress a {text-decoration: none;color: var(--text);display: inline-block;margin-top: 10px}
.elAddress a:hover {opacity: .7}
.elAddress .adrZipCode, .elAddress .adrCity {display: inline-block;margin-right: .5em}
.adrFax a[href^="tel:"] {background-image: url("../images/lgh/icon-fax.png")}
span.hit {background-color: var(--mint)}

/* slider */
.flexslider {border: none;margin-bottom: 0}
.flex-control-nav {bottom: 15px}
.flex-control-nav li {margin: 0 3px}
.flex-control-paging li a {background-color: transparent;border: solid #fff 1px}
.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {background-color: #fff}
.flex-direction-nav a {width: 20px;height: 20px;border: solid #fff 2px;border-left: none;border-bottom: none;transform: rotate(45deg);z-index: 1;margin-top: -10px}
.flex-direction-nav a:before {color: transparent;text-shadow: none;}
.flex-direction-nav a.flex-prev {transform: rotate(225deg);left: 5vw !important;}
.flex-direction-nav a.flex-next {right: 5vw !important;}

/* lehrer */
.elXteacher {margin-bottom: 30px}
.elXteacher .content {background-color: var(--mintLight);padding: 20px 0}
.elXteacher .aboveImage {padding: 5px 12px;border-bottom: solid var(--line) 2px;margin-bottom: 12px}
.elXteacher .otherBlocks {padding: 0 12px;}
.elXteacher .otherBlocks, .elXteacher .imageAndSubjects {overflow-wrap: break-word}
.elXteacher .image_container {margin-bottom: 35px}
.elXteacher .subjectsDesktop {display: none}
.elXteacher .rubrik {margin-bottom: 1em}
.elXteacher li {margin-bottom: 0}
.elXteacher .content, .elXteacher .envelope {height: 100%}

/* form */
select {width: auto;border: solid var(--line) 2px;border-radius: 10px;padding-top: 3px;padding-bottom: 3px;margin-right: .5em;margin-bottom: .5em}
.pagination li {display: inline-block;margin-right: .7em}
.pagination li:last-child {margin-right: 0}
.pagination .pageInput input {width: 3em;text-align: center;padding: 0;height: 2em}
.pagination .pageinfo {text-align: center}
.pagination .controls {text-align: center}
.pagination:after {display: block;content: '';clear: both}
.clear {clear: both}
input:focus, input:focus-visible {outline: none;}
fieldset {padding: 1em;border: solid var(--line) 2px;border-radius: 10px;margin-bottom: 2em}
legend {padding: 2px 8px;background-color: var(--mint)}
.radioWrapper {display: inline-block;margin-right: 2em}
.filter-form {margin: 2em 0}

/* footer */
#footer {position: relative;background-color: #E2E2E3;color: var(--gray);text-align: center;font-size: 88%;padding: 50px 0 30px 0;margin-top: 100px;}
#footer a {color: var(--gray);text-decoration: none}
#footer a:hover {opacity: .8}
#footer img.social {display: inline-block;height: 32px;width: auto;margin-right: .5em}
#footer:before {position: absolute;content: '';width: 215px;height: 67px;top: -51px;left: 50%;transform: translateX(-50%);background-image: url("../images/lgh/footerLogo.png");background-size: contain;background-repeat: no-repeat;background-position: center center}
#footer .partners {text-align: center;margin-top: 34px}
#footer .partners a {display: inline-block;margin-right: 1em}
#footer .partners a:last-child {margin-right: 0}
#footer .partners img {height: 25px;width: auto}

/* --> BOOTSTRAP media query bodies ---------------------------------------------------------------------*/
/* sm Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .image_container.float_left {float: left;margin: 0 1em 1em 0;max-width: 50%}
    .image_container.float_right {float: right;margin: 0 0 1em 1em;max-width: 50%}
    #footer .partners img {height: 35px}
    .pagination .pageinfo {float: right;line-height: 2em;text-align: left}
    .pagination .controls {float: left;line-height: 2em;text-align: left}
    a.button {width: auto}
    .elXteacher .aboveImage {padding: 5px 20px;border-bottom: none}
    .elXteacher .aboveImage:after {display: block;content:'';height: 2px;background-color: var(--line)}
    .elXteacher .imageAndSubjects {padding: 0 20px;float: left;width: 40%}
    .elXteacher .subjectsDesktop {display: block}
    .elXteacher .subjectsMobile {display: none}
    .elXteacher .otherBlocks {float: right;width: 60%;padding: 0 20px 0 0}
}

/* md Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .mapdesc {height: 5em}
    .mapdesc p {padding-left: 9em;background-size: 40px 50px}
    .mapdesc a {padding-top: 1.4em}
    .elXnewsList:not(.colNews) .listItem .image_container {float: left;width: 33%}
    .elXnewsList:not(.colNews) .listItem .content {float: right;width: 64%}
    .numList .elText {padding-left: 25%;padding-top: 0;border-left: solid #097989 17px}
    .numList .elText .num {left: 20px;bottom: 0;top: unset;border: none;height: auto;padding-left: 0;line-height: 1em}
    .numList .elText .num .txt {left: 0}
    .flex-direction-nav a {width: 30px;height: 30px;border-width: 4px;margin-top: -15px}
}

/* lg Large devices (landscape tablet, 992px and up) */
@media (min-width: 992px) {
    body {font-size: 20px}
    #topBar {text-align: right}
    #logo {width: 360px;height: 138px;margin: 30px auto 0 auto}
    #header {height: 305px}
    #header.fixed {height: 240px}
    #header.fixed #logo {margin-top: 10px}
    #container {min-height: calc(100vh - (305px + 490px))}
    #footer {text-align: left;padding: 70px 0 40px 0}
    #footer img.social {height: 40px}
    #footer:before {width: 266px;height: 83px}
    #footer .partners {margin-top: 55px;font-size: 150%}
    #footer .partners img {height: 57px}
    .imgDescRight .image_container {width: 66.67%}
    .imgDescRight figcaption .description {position: absolute;left: calc(100% + 20px);bottom: 0;width: 25vw}
}

/* xl Extra large devices (Notebook, 1200px and up) */
@media (min-width: 1200px) {
    #mainNav li.level-1 > a {font-size: 100%}
    .flex-direction-nav a {width: 40px;height: 40px;border-width: 5px;margin-top: -20px}
    .numList .elText {padding-left: 20%}
    .numList .elText .num {left: 30px}
}

/* xxl Extra extra large devices (Desktops, 1400px and up) */
@media (min-width: 1400px) {
    /* body {font-size: 23px} */
}

/* .inside reaches max-width of 1300px */
@media (min-width: 1625px) {
    #mainNav ul.level-2:before {left: calc((100vw - 1300px) / -2)}
}
/* <-- BOOTSTRAP media query bodies ---------------------------------------------------------------------*/