
/*  */
/* 
*/
.toggle-body {
border-bottom: 0.3125rem solid #e6e6e6;
padding-bottom: 1.3125rem !important;
}

.text ol, .text ul {
margin-left: 2.25rem;
}

.contact-box {
background-color: #f2f2f2 !important;
border-radius: 0.5rem !important;
padding: 1.25rem !important;
}

.margin-top {
margin-top: 1.875rem !important;
}

.normal-text {
font-weight: 300 !important ;
}

.fett-text {
font-weight: 700 !important ;
}

.rechts {
float: right;
width: 5rem;
text-align: right;
}

.lila {
color: #721B8F !important;
}

.weiss {
color: #ffffff !important;
}

.kit-green {
color: #00876C !important;
}

.green {
color: #77a200 !important;
}

.yellow {
color: #ffd500 !important;
}

.white {
color: #bdbdbd !important;
}

.red {
color: #BF0000 !important;
}

.brown {
color: #a7822e !important;
}

.facebook  {
color: #4664aa !important;
}

.black {
color: #000000 !important;
}

.blue {
color: #4664AA !Important;
}

.purple {
color: #a3107c !important;
}

.cyan {
color: #079ede !important;
}

.gray {
color: #404040 !important;
}

.padding {
padding-left: 0.5rem;
}

.large {
margin-top: 1.875rem !important;
font-weight: 700;
font-size: 2.5rem;
line-height: 1.2;
}

.middle {
margin-top: 1.875rem !important;
font-weight: 500;
font-size: 1.875rem;
line-height: 1.2;
}

p.no-prespace {
margin-top: 0.3rem !important;
}

div.paragraph {
-webkit-column-break-inside: avoid !important;
-moz-column-break-inside: avoid !important;
break-inside: avoid !important;
}

div.paragraph p:nth-child(1n+2){
margin-top: 1.875rem ;
}

div.paragraph h4:nth-child(1n+2){
margin-top: 1.875rem !important;
}

div.paragraph h5:nth-child(1n+2){
margin-top: 1.875rem !important;
}

div.paragraph h6:nth-child(1n+2){
margin-top: 1.875rem !important;
}

div.paragraph ul{
margin-top: 1.875rem !important;
}

div.paragraph ol{
margin-top: 1.875rem !important;
counter-resent: none !important;
}

div.paragraph table {
margin-top: 1.875rem !important;
}

div.paragraph div.smallprint {
margin-top: 1rem !important;
}

.durchgestrichen {
text-decoration: line-through;
text-decoration-style: double;
}

.no_underline {
text-decoration: none !important;
color: #ffffff;
font-size: 1.5rem !important;
text-transform: uppercase !important;
}

.no-underline {
text-decoration: none !important;
}

.no-underline:hover {
text-decoration: underline !important;
}

.head_lebenslagen {
display:grid;
width: 100%;
grid-template-columns: 2fr 1fr;
}

.left_text {
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
align-self: flex-start;
grid-row: 1 / span 3;
grid-column: 1 / span 1;
margin-right: 2rem;
}

.box1 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
position: right !important;
width: 100%;
}

.box2 {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
position: right !important;
width: 100%;
margin-top: 0.2785em !important;
}

.box3 {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
position: right !important;
width: 100%;
margin-top: 0.2785em !important;
}

.box_blue {
background-color: #4664aa;
}

.box_lightblue {
background-color: #079ede;
}

.box_green {
background-color: #77a200;
}

#no_underline {
position: right !important;
padding: 2.1875rem 1rem 0.75rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 1.5rem !important;
font-weight: 300 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
}

a.no_underline:hover {
color: #ffffff !important;
}

.smallprint {
font-size: 0.7em !important;
line-height: 1.7;
}

.smallprint p:nth-child(1n+2) {
margin-top: 0.7rem !important;
}

div.toggle-head h3.heading::before {
font-family: "kit-icons";
content: "\e921\e921";
color: #00876C;
font-size: 0.75rem;
padding: 0.3rem 0.7rem 0rem 0.2rem;
vertical-align: top;
display: inline-block;
}

.service-tile .headline {
font-size: 2rem !important;
}

.news-element .headline + p {
margin-top: -1rem !important;
}

p.zsb-intro-text {
margin-top: 1rem !important;
}

.red-box {
border-color: red;
border-style: dotted;
border-width: thick;
border-radius: 0.5rem;
background-color: #fcd4d4;
padding: 1.25rem;
}

.float {
float: left;
color: red;
padding-right: 2rem;
margin-top: 0.5rem;
}


/*** bunte Headerboxen ***/

#blau-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 2.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #4664aa;
margin-top: 1.5rem;
}

#blau-headline::after {
border-bottom: 0rem !important;
}

#gelb-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #000000;
font-size: 2.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #ffd500;
margin-top: 1.5rem;
}

#gelb-headline::after {
border-bottom: 0rem !important;
}

#grau-headline {
position: right !important;
padding: 2rem 2.5rem 1.5rem 2rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
font-size: 2.1rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
background-color: #e5e5e5;
color: #404040;
margin-top: 1.5rem;
}

#grau-headline::after {
border-bottom: 0rem !important;
}

#gruen-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 2.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #77a200;
margin-top: 1.5rem;
}

#gruen-headline::after {
border-bottom: 0rem !important;
}

#red-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 2.4rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #BF0000;
margin-top: 1.5rem;
}

#red-headline::after {
border-bottom: 0rem !important;
}

#kit-gruen-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 2.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #00876C;
margin-top: 1.5rem;
}

#kit-gruen-headline::after {
border-bottom: 0rem !important;
}

#lila-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 2.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #721B8F;
margin-top: 1.5rem;
}

#lila-headline::after {
border-bottom: 0rem !important;
}


/*** kleine Headerbox ***/

#kleine-headline {
padding: 1.075rem 0.4rem 0rem 0.8rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 1.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 55px;
display: flex;
/** background-color: #079ede; **/
background-color: #00876C;
margin-top: 2.3rem;
margin-bottom: -0.65rem;
}

#kleine-headline::after {
border-bottom: 0rem !important;
}


/*** Infowoche ***/

.infowoche-header {
margin-top: 1.875rem !important;
font-weight: 500;
font-size: 1.375rem;
line-height: 1.2;
}

.infowoche-list {
margin-left: 2rem !important;
margin-top: 0.7rem !important;
line-height: 1.2;
color: #4664aa;
}

a.infowoche-link {
color: #4664aa !important;
}

.infowoche-smallprint {
font-size: 0.875em !important;
line-height: 1.7;
}

#infowoche-headline {
position: right !important;
padding: 2.1875rem 2rem 1.5rem;
border-top-right-radius: 0.4em;
border-bottom-left-radius: 0.4em;
text-decoration: none !important;
color: #ffffff;
font-size: 2.4rem !important;
font-weight: 400 !important;
text-transform: uppercase !important;
align-self: flex-end !important;
min-height: 75px;
display: flex;
background-color: #079ede;
}

#infowoche-headline::after {
border-bottom: 0rem !important;
}


/*** Steckbrief ***/

.grid-steckbrief {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.7rem;
    justify-items: start;
}

.intro {
    grid-column-start: 1;
    grid-colum-end: 2;
    justify-self: start;
    align-self: start;
}

.main {
    grid-column-start: 2;
    grid-column-end: span 3;
    justify-self: start;
    align-self: start;
}

div.main {
    line-height: 1.7 !important;
    color: #404040 !important;
}

.nowrap-steckbrief {
    white-space: nowrap;
}

.nowrap-steckbrief:not(.underline)::after {
    transition: transform .7s, -webkit-transform .7s;
    transform-origin: left;
    transform: translateX(0) scaleX(1);
    opacity: 1;
    content: '';
    display: block;
    width: 6.25rem;
    max-width: 100%;
    margin-top: 0.15em;
    border-bottom: 0.3125rem solid #e6e6e6;
}

.steckbrief {
    color: #404040 !important;
    font-weight: 700;
    font-size: 1.525rem;
    line-height: 1.18;
}

.no-background {
    background-color: #ffffff !important;
}


.intro2 {
    grid-column-start: 1;
    grid-colum-end: 2;
    grid-row-start: 3;
    grid-row-end: span2;
    justify-self: start;
    align-self: start;
}

.main2 {
    grid-column-start: 2;
    grid-column-end: span 3;
    justify-self: start;
    align-self: start;
}

div.main2 {
    line-height: 1.7 !important;
    color: #404040 !important;
}

.steckbrief2 {
    color: #404040 !important;
    font-weight: 700;
    font-size: 1.400rem;
    line-height: 1.88;
    margin-bottom: 2rem !important;
}


/*** Öffnungszeiten ***/

.grid-oeffnungszeiten {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: minmax(1fr 2fr) minmax(1fr 4fr);
    grid-template-rows: auto;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.7rem;
    justify-items: start;
}

.off-intro {
    grid-column-start: 1;
    grid-colum-end: 2;
    justify-self: start;
    align-self: start;
}

.off-main {
    grid-column-start: 2;
    grid-column-end: 3;
    justify-self: start;
    align-self: start;
}

div.off-main {
    line-height: 1.7 !important;
    color: #404040 !important;
}

.nowrap-oeffnungszeiten {
    white-space: nowrap;
}

.nowrap-oeffnungszeiten:not(.underline)::after {
    transition: transform .7s, -webkit-transform .7s;
    transform-origin: left;
    transform: translateX(0) scaleX(1);
    opacity: 1;
    content: '';
    display: block;
    width: 6.25rem;
    max-width: 100%;
    margin-top: 0.15em;
    border-bottom: 0.3125rem solid #e6e6e6;
}

.oeffnungszeiten {
    color: #404040 !important;
    font-weight: 700;
    font-size: 1.525rem;
    padding-right: 2rem;
}
 

/*** Tables ***/

table.kaskade {
font-size: 1.4rem;
font-weight: 700;
}

table.kaskade .kaskade {
background-color: #ffffff !important;
}

table.sport {
border: 1px solid black !important;
border-collapse: collapse;
}

table.sport tr {
border: 1px solid black !important;
border-collapse: collapse;
}

table.sport td {
border: 1px solid black !important;
border-collapse: collapse;
}

table.sport .sportgrau {
border: 1px solid black !important;
border-collapse: collapse;
background-color: #f2f2f2 !important;
}

table.sport .sportwhite {
border: 1px solid black !important;
border-collapse: collapse;
background-color: #ffffff !important;
}

table.lehramt {
border: 1px solid black !important;
border-collapse: collapse;
padding: 5px;
}
table.lehramt tr {
border: 1px solid black !important;
border-collapse: collapse;
padding: 5px;
}
table.lehramt td {
border: 1px solid black !important;
border-collapse: collapse;
padding: 5px;
}

div.hinweis {
border-width: 5px;
border-style: solid;
border-color: #bf0000 !important;
padding: 0.7rem;
}


/*** Tooltip ***/

.tooltip_popup {
position: relative;
display: inline-block;
}

.tooltip_popup_text {
visibility: hidden;
}

.tooltip_popup .tooltip_popup_text {
width: 100%;
background-color: #555;
color: #fff;
text-align: left;
padding: 1.5rem;
border-radius: 0.4rem;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -50%;
margin-bottom: -1.5rem;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip_popup .tooltip_popup_text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.9rem;
border-width: 0.9rem;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.tooltip_popup:hover .tooltip_popup_text {
visibility: visible;
opacity: 1;
}

/*** Tooltip Amtliche Bekanntmachungen***/

.tooltipAMT_popup {
position: relative;
display: inline-block;
}

.tooltipAMT_popup_text {
visibility: hidden;
}

.tooltipAMT_popup .tooltipAMT_popup_text {
width: 200%;
background-color: #555;
color: #fff;
text-align: left;
padding: 1.5rem;
border-radius: 0.4rem;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80%;
margin-bottom: 1.2rem;
opacity: 0;
transition: opacity 0.3s;
}

.tooltipAMT_popup:hover .tooltipAMT_popup_text {
visibility: visible;
opacity: 1;
}


/*** Tooltip Kaskaden***/

.kaskade_popup {
position: relative;
display: inline-block;
}

.kaskade_popup_text {
visibility: hidden;
}

.kaskade_popup .kaskade_popup_text {
width: 400px;
background-color: #555;
color: #fff;
text-align: left;
padding: 1.5rem;
border-radius: 0.4rem;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -50%;
margin-bottom: -1.5rem;
opacity: 0;
transition: opacity 0.3s;
}

.kaskade_popup .kaskade_popup_text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.9rem;
border-width: 0.9rem;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.kaskade_popup:hover .kaskade_popup_text {
visibility: visible;
opacity: 1;
}


/*** Tooltip Amtliche Bekanntmachungen***/

.tooltip_amt {
position: relative;
display: inline-block;
}

.tooltip_amt_text {
visibility: hidden;
}

.tooltip_amt .tooltip_amt_text {
width: 140%;
background-color: #555;
color: #fff;
text-align: left;
padding: 0.8rem;
border-radius: 0.4rem;
font-size: 1rem !important;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -50%;
margin-bottom: 0.7rem;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip_amt .tooltip_amt_text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.9rem;
border-width: 0.9rem;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.tooltip_amt:hover .tooltip_amt_text {
visibility: visible;
opacity: 1;
}

/*** Zitat ***/

.grid-zitat {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% auto 5%;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.7rem;
    justify-items: start;
}

.zitat-left {
    grid-column-start: 1;
    grid-colum-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: start;
    align-self: start;
}

div.zitat-left {
    width: 100%;
    margin-top: 0.15em;
    margin-right: 1rem;
    text-align: center;
}

.zitat-main {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    justify-self: start;
    align-self: start;
}

.zitat-right {
    grid-column-start: 3;
    grid-colum-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    justify-self: start;
    align-self: start;
}

div.zitat-right {
    width: 100%;
    margin-top: 0.15em;
    margin-right: 1rem;
    text-align: center;
}

.zitat-left p{
    margin-bottom: -1.875rem !important;
}

.zitat-main p {
    font-size: 1.25rem;
    line-height: 1.4 !important;
    margin-top: 1.875rem !important;
}

.zitat-main ul {
    margin-top: 1.875rem !important;
}


/*** Bewerbungsportal ***/

.grid-bewerbung {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.7rem;
    justify-items: start;
}

.bewerbung-intro {
    grid-column-start: 1;
    grid-colum-end: 2;
    justify-self: start;
    align-self: start;
}

div.bewerbung-intro {
    width: 100%;
    margin-top: 0.15em;
    margin-right: 1rem;
    text-align: center;
    font-size: 0.7em !important;
    line-height: 1.2rem !important;
}

.bewerbung-main {
    grid-column-start: 2;
    grid-column-end: span 3;
    justify-self: start;
    align-self: start;
}

div.bewerbung-main {
    line-height: 1.3 !important;
    color: #404040 !important;
    weight: 900 !important;
    font-size: 1.2rem !important;
    margin-top: 0.7rem;
}

div.bewerbung-main a {
    font-size: 1.5 rem;
    text-decoration: none !important;
}

div.bewerbung-main a:hover {
    text-decoration: underline !important;
}

/*** Bewerbungsportal BZM ***/

.bzm-offen {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUwNy4yIDUwNy4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MDcuMiA1MDcuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGNpcmNsZSBzdHlsZT0iZmlsbDojMzJCQTdDOyIgY3g9IjI1My42IiBjeT0iMjUzLjYiIHI9IjI1My42Ii8+DQo8cGF0aCBzdHlsZT0iZmlsbDojMEFBMDZFOyIgZD0iTTE4OC44LDM2OGwxMzAuNCwxMzAuNGMxMDgtMjguOCwxODgtMTI3LjIsMTg4LTI0NC44YzAtMi40LDAtNC44LDAtNy4yTDQwNC44LDE1MkwxODguOCwzNjh6Ii8+DQo8Zz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTI2MCwzMTAuNGMxMS4yLDExLjIsMTEuMiwzMC40LDAsNDEuNmwtMjMuMiwyMy4yYy0xMS4yLDExLjItMzAuNCwxMS4yLTQxLjYsMEw5My42LDI3Mi44DQoJCWMtMTEuMi0xMS4yLTExLjItMzAuNCwwLTQxLjZsMjMuMi0yMy4yYzExLjItMTEuMiwzMC40LTExLjIsNDEuNiwwTDI2MCwzMTAuNHoiLz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTM0OC44LDEzMy42YzExLjItMTEuMiwzMC40LTExLjIsNDEuNiwwbDIzLjIsMjMuMmMxMS4yLDExLjIsMTEuMiwzMC40LDAsNDEuNmwtMTc2LDE3NS4yDQoJCWMtMTEuMiwxMS4yLTMwLjQsMTEuMi00MS42LDBsLTIzLjItMjMuMmMtMTEuMi0xMS4yLTExLjItMzAuNCwwLTQxLjZMMzQ4LjgsMTMzLjZ6Ii8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==");
 width: 7.5rem;
 height: 4.5rem;
 background-size: 100% 100%;
 margin: auto;
 margin-bottom: 0.7rem;
 margin-top: 1 rem;
}

.bzm-zu {
 background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDI5NyAyOTciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5NyAyOTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8Zz4NCgkJCTxnPg0KCQkJCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0MwMzkyQjsiIGN4PSIxNDguNSIgY3k9IjE0OC41IiByPSIxNDguNSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiM5MzE1MTU7IiBkPSJNMjIzLjUzLDg2LjU4MUw4NS4zNDQsMjIyLjI5Mmw3NC4yOTMsNzQuMjkzYzczLjEzNS01LjQyMywxMzEuNTI1LTYzLjgxMywxMzYuOTQ4LTEzNi45NDgNCgkJTDIyMy41Myw4Ni41ODF6Ii8+DQoJPHBvbHlnb24gc3R5bGU9ImZpbGw6I0VDRjBGMTsiIHBvaW50cz0iMjMxLjgyMyw5NC44NzUgMjAyLjEyNSw2NS4xNzcgMTQ4LjUsMTE4LjgwMiA5NC44NzUsNjUuMTc3IDY1LjE3Nyw5NC44NzUgMTE4LjgwMiwxNDguNSANCgkJNjUuMTc3LDIwMi4xMjUgOTQuODc1LDIzMS44MjMgMTQ4LjUsMTc4LjE5OCAyMDIuMTI1LDIzMS44MjMgMjMxLjgyMywyMDIuMTI1IDE3OC4xOTgsMTQ4LjUgCSIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=");
 width: 7.5rem;
 height: 4.5rem;
 background-size: 100% 100%;
 margin: auto;
 margin-bottom: 0.7rem;
 margin-top: 1 rem;
}

/** Organigramm **/

  .top_box_org {
            align-content: center;
            margin: auto;
            padding: 0.5rem 2rem;
            text-align: center;
            width: 25%;
            border: 0.15rem solid #464646;
            border-radius: 0rem 0.5rem 0rem 0.5rem;
            background: #009682;
            color: white;
           }
        .grid_top_org{
            display: grid;
            grid-template-columns: [left] 45% [middle] 10%  [right] 45%;
            grid-template-rows: auto;
            colump-gap: 4rem;
        }
        .grid_left_org{
            grid-column-start: 1;
            grid-column-end: 2;
            justify-self: end;
        }
        .grid_middle_org{
            grid-column-start: 2;
            grid-column-end: 3;
        }
        .grid_right_org{
            grid-column-start: 3;
            grid-column-end: 4;
            justify-self: start;
        }
        .small_box_org{
            margin: 1rem;
            padding: 0.5rem 5rem;
            width: 90%;
            text-align: center;
            border: 0.05rem solid #464646;
            border-radius: 0rem 0.5rem 0rem 0.5rem;
            background: #d9efec;
        }
        .grid_org{
            display: grid;
            grid-template-columns: [SGE] 25% [STU] 25%  [LPO] 25% [ZSB] 25%;
            grid-template-rows: 1;
            grid-template-areas: "SGE STU LPO ZSB";
            colump-gap: 4rem;
                   }
        .SGE_org{
            grid-area: SGE;
            grid-column-start: 1;
            grid-column-end: 2;
        }
        .STU_org{
            grid-area: STU;
            grid-column-start: 2;
            grid-column-end: 3;
        }
        .LPO_org{
            grid-area: LPO;
        }
        .ZSB_org{
            grid-area: ZSB;
        }
        .top2_box_org {
            align-content: center;
            margin: 1rem;
            padding: 0.5rem;
            text-align: center;
            border: 0.15rem solid #464646;
            border-radius: 0rem 0.5rem 0rem 0.5rem;
            background: #009682;
            color: white;
           }
        .bottom_box_org{
            align-content: center;
            margin: 1rem;
            padding: 0.5rem;
            text-align: center;
            border: 0.05rem solid #464646;
            border-radius: 0rem 0.5rem 0rem 0.5rem;
            background: #d9efec;
}

.line_org{
border-left: 0.05rem solid #464646;
height: 2rem;
margin: -1rem 0rem -1rem 50%;
}

.linelong_org{
border-left: 0.05rem solid #464646;
height: 7.7rem;
margin: -1.95rem 0rem -1.8rem 0rem;
position: absolute;
left: 50%;
}

.rightline_org{
border-right: 0.05rem solid #464646;
height: 2rem;
margin: -2rem 85% -1rem 0rem;
}

.leftline_org{
border-left: 0.05rem solid #464646;
height: 2rem;
margin: -2rem 0rem -1rem 85%;
}

.vline_org{
border-top: 0.05rem solid #464646;
margin: -1rem 12.5% -2.65rem 12.5%;
}

[data-tooltip] {
  position: relative;
  cursor: pointer;
}
[data-tooltip]:before,
[data-tooltip]:after {
  line-height: 1;
  font-size: .9em;
  pointer-events: none;
  position: absolute;
  box-sizing: border-box;
  display: none;
  opacity: 0;
}
[data-tooltip]:before {
  content: "";
  border: 5px solid transparent;
  z-index: 100;
}
[data-tooltip]:after {
  content: attr(data-tooltip);
  text-align: center;
  min-width: 12rem;
  max-width: 14rem;
  white-space: normal;
  text-overflow: ellipsis;
  padding: 6px 8px;
  border-radius: 3px;
  background: #404040;
  color: #FFFFFF;
  z-index: 99;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  opacity: 1;
}
[data-tooltip]:not([data-flow])::before,
[data-tooltip][data-flow="top"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #404040;
}
[data-tooltip]:not([data-flow])::after,
[data-tooltip][data-flow="top"]::after {
  bottom: calc(100% + 5px);
}
[data-tooltip]:not([data-flow])::before, [tooltip]:not([data-flow])::after,
[data-tooltip][data-flow="top"]::before,
[data-tooltip][data-flow="top"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, -4px);
          transform: translate(-50%, -4px);
}
[data-tooltip][data-flow="bottom"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #404040;
}
[data-tooltip][data-flow="bottom"]::after {
  top: calc(100% + 5px);
}
[data-tooltip][data-flow="bottom"]::before, [data-tooltip][data-flow="bottom"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, 8px);
          transform: translate(-50%, 8px);
}
[data-tooltip][data-flow="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #404040;
  left: calc(0em - 5px);
  -webkit-transform: translate(-8px, -50%);
          transform: translate(-8px, -50%);
}
[data-tooltip][data-flow="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  -webkit-transform: translate(-8px, -50%);
          transform: translate(-8px, -50%);
}
[data-tooltip][data-flow="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #404040;
  right: calc(0em - 5px);
  -webkit-transform: translate(8px, -50%);
          transform: translate(8px, -50%);
}
[data-tooltip][data-flow="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  -webkit-transform: translate(8px, -50%);
          transform: translate(8px, -50%);
}
[data-tooltip=""]::after, [data-tooltip=""]::before {
  display: none !important;
}
 
/*  */