body {
  font: 1em/150% arial, Arial, Helvetica, sans-serif;
  color: #404040;
  background-color: whitesmoke;
  margin-bottom: 0;
}
/* desktop schrift groesser */
@media (min-width: 1200px) {
    body {
        font-size: 1.125rem;
        line-height: 160%;
    }
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 500;
  color:  #404040;
  margin-bottom: 1rem;
}
h1 {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
}
.newsflash h1 {
    padding: .5rem 1rem .5rem 0;
    margin-bottom: 1rem;
    background-color: transparent;
    border-bottom: 0 none;
}
.newsflash h1::after {
    display: block;
    background-color: var(--cassiopeia-color-primary);
    content: " ";
    width: 8rem;
    height: 3px;
    margin: .75rem auto 0 0;
}
h2 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}
h3 {
    font-size: 1.25rem;
    font-weight: 600;
}
p + h3, ul + h3 {
  margin-top: 1.5rem;
}
h4, h5, h6 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: #404040;
}
a { text-decoration: none !important; }
p {
font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
}
blockquote::before {
    content: "» ";
}
blockquote::after{content: " «"; }
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 0.2em;
    margin-inline-start: 2em;
    margin-inline-end: 3em;
    font-size: 120% !important;
    line-height: 1.5;
    background-color: hsla(198,20%,78%,0.6);
border-left: 8px solid var(--bg-color-myblue);
padding: 0.6rem 1rem;
}
blockquote + figcaption {
    font-size: 90%;
    font-style: italic;
}
:root {
      --cassiopeia-color-primary: #003f63;
      --cassiopeia-color-link: #003f63;
      --cassiopeia-color-hover: #e20026;
      --cassiopeia-color-light: #efefef;
      --primary-rgb: 0, 63, 99;
      --bg-color-lightgrey: #a1bcc8;
      --bg-color-myblue: #a1bcc8;
      --bg-color-red: #e20026;
  }
  .btn-outline-primary {
    border-radius: 0;
    padding: .6rem 1.6rem;
    color: white;
    border-color: var(--cassiopeia-color-primary);
    background-color: var(--cassiopeia-color-primary);
}
.btn-outline-primary:hover {
    color: var(--cassiopeia-color-primary);
    border-color: var(--cassiopeia-color-primary);
    background-color: white;
}
.btn-outline-primary a {
    color: white;
    font-size: 1.25rem;
}
.btn-outline-primary:hover a {
    color: var(--cassiopeia-color-primary);
}
.maps-button {
    background-color: var(--bg-color-myblue);
    color: black;
    padding: 1rem 2rem;
    line-height: 2rem;
}

/* topbar */
.container-topbar {
    /*background-color: #003f63;*/
    background-color: var(--cassiopeia-color-primary);
    color: #fff;
    text-align: right;
	border-bottom: 5px solid var(--cassiopeia-color-hover);
}
.container-topbar a, .container-topbar a:hover {
    color: #fff;
}
.container-topbar a.btn-secondary {
    color: var(--cassiopeia-color-primary);
    border-radius: 8px;
}
.container-topbar a.btn-secondary:hover {
    color: var(--cassiopeia-color-hover);
}
/* roter button top */
.container-topbar a.btn-red {
    color: var(--cassiopeia-color-light);
    background-color: var(--bg-color-red);
    border-radius: 8px;
    border-color: var(--bg-color-red);
}
.container-topbar a.btn-red:hover {
    color: lightsteelblue;
}

/* weisser hintergrund im header */
.container-header {
    background-color: white;
    background-image: none;
    box-shadow: inset 0 5px 5px rgba(0,0,0,.03);
}
.container-header .navbar-toggler {
    color: #333;
    cursor: pointer;
    border: 1px solid #333;
}
/* blauer text */
.container-header .mod-menu {
    flex: 1 0 100%;
    /* padding-top: 60px; */
    margin: 0;
    color: var(--cassiopeia-color-primary);
    list-style: none;
}
.container-header .mod-menu li a:hover, .container-header .mod-menu li .nav-header:hover {
    color: #e20026 !important;
}
.metismenu.mod-menu .metismenu-item {
    padding-left: 0;
    padding-right: 2rem;
    padding-bottom: 0;
    vertical-align: text-bottom;

}
.metismenu.mod-menu .metismenu-item.active > a, .metismenu.mod-menu .metismenu-item.active > button, .metismenu.mod-menu .metismenu-item > a:hover, .metismenu.mod-menu .metismenu-item > button:hover {
  text-decoration: none;
}
.metismenu.mod-menu .metismenu-item.active, .metismenu.mod-menu .metismenu-item.active > button {
    color: var(--cassiopeia-color-hover);
}
.container-header .metismenu > li.level-1 > ul {
  min-width: 21rem;
  padding-bottom: 1rem;
}
.metismenu.mod-menu .metismenu-item.level-2 {
    padding-left: .5rem;
    /* padding-right: 5rem; */
    color: var(--cassiopeia-color-primary);
}
.metismenu.mod-menu .metismenu-item.level-2.active, .metismenu.mod-menu .metismenu-item.level-2.current > a, .metismenu-item.level-3.current a {
    color: var(--cassiopeia-color-hover);
}
.metismenu.mod-menu .metismenu-item, .metismenu.mod-menu .metismenu-item .nav-header {
    text-transform: uppercase !important;
}
.metismenu.mod-menu .metismenu-item > ul {
    margin-top: .5rem;
    margin-bottom: .5rem;
    background: rgba(255, 255, 255, 0.9);
}
.metismenu.mod-menu .metismenu-item.level-2 ul.mm-collapse {
    padding-bottom: .5rem;
    font-size: .875rem;
    padding-left: 20px;
}

/* split navigation horizontal */
.main-top.card {
    background-color: transparent;
    border: 0 none;
    margin: 0;
}
.main-top.card > .card-body {
    padding: 0;
}
.submenu {
    display: inline-block;
    width: 100%;
   padding-left: auto;
    padding-right: auto;
}
.submenu > li.nav-item {
    display: inline-block;
    margin: 0 1rem;
    padding: .5rem 1rem;
}
/* large screens only */
@media (min-width: 1200px) {
    .submenu {
        padding-right: 0;
    }
    .submenu > li.nav-item {
        margin-left: 0;
        margin-right: 0;
    }
}
.submenu li.active {
    color: white;
    background-color: var(--cassiopeia-color-primary);  /* blau */
}
.submenu li.active a {
    color: white;
    background-color: var(--cassiopeia-color-primary);  /* blau */
    /*padding: .5rem;*/
    text-decoration: none;
}
.container-banner nav {
    background-color: white;
 /*    background-color: #a1bcc8;  hellgrau */
}

/* subnav 3. ebene - links: vertical */
.sidebar-left.card {
    background-color: transparent;
    border: 0 none;
}
.sidebar-left.card .card-body {
    padding: 0;
}
.sidebar-left.card .card-body nav {
    padding-top: 0;
}
.sidebar-left #subnav-vertical {
        min-width: 80%;
}
.sidebar-left .navbar .nav > li {
    display: block;
    background-color: var(--bg-color-myblue);  /* hellblau */
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 3px;
    padding: 0;
    width: 100%;
    line-height: 3rem;
}
#subnav-vertical {
    margin: 0;
}
#subnav-vertical li a {
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
    text-decoration: none; 
    display: block;
    width: 100%;  
    /* text-transform: uppercase; */
}
#subnav-vertical li.active a, #subnav-vertical li.current a {
 color: white;
    background-color: var(--cassiopeia-color-primary);  /* blau */
    text-decoration: none; 
    display: block;
    width: 100%;  
}
#subnav-vertical a.zweizeilig {
    line-height: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* rechte Spalte */
.sidebar-right .card-body h4 {
    color:  var(--cassiopeia-color-primary);
    font-size: 1.5rem;
/*    line-height: 1rem; */
}

.sidebar-right.card {
    border-color: white;
    border-top: solid 3px var(--cassiopeia-color-primary);

}


.slider-container h3 {
    font-weight: normal;
    color: white
}
.slider-container .slide-text {
    padding-left: 1rem;
}
/* hide description for small devices */
.slide-desc {
    display: none;
}
@media (min-width: 700px) {
    .slide-desc {
        display: block;
    }
}
/* banner image */
.container-banner {
    background-color: white;
}
.container-banner .banner-overlay {
    width: 100%;
    height: auto;
    max-height: 350px;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top,50%;
    background-size: cover;
    position: relative;
}
.container-banner .banner-overlay .overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
    background-color: var(--bg-color-myblue);
    }
    
    .container-banner .banner-overlay .overlay img {
        margin: 0; padding: 0;
        height: 100%;
        max-height: 350px;
    }
 .container-banner .banner-overlay .overlay p {
    padding: 0;
    margin: 0;
 }
 .container-banner .random-image {
    background-color: var(--bg-color-myblue);
 }
 .container-banner .random-image > img {
    width: 100%;
    max-width: 2000px;
    height: auto;
 }

 /* start newsflash */
.mod-articlesnews-vertical .newsflash-item > figure > img {
  width: auto;
  max-width: 100%
}

ul.newsflash-horiz li {
    padding: 1rem;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(51,57,66,.1),0 2px 5px rgba(51,57,66,.08),0 5px 15px rgba(51,57,66,.08),inset 0 3px 0 var(--cassiopeia-color-primary);
}
ul.newsflash-horiz ul {
    padding-left: 0;
}

.newsflash-horiz li > ul li {
  padding: 0.25rem;
  border: 0 none;
  border-bottom: solid 1px #eee;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
  box-shadow: none;
}

/* vertical newsflash modul */
.newsflash-vert {
    max-width: 800px;
    background: transparent;
}
.newsflash-vert > li {
    border-bottom: solid 1px var(--bg-color-myblue);
    margin-bottom: 2rem;
}

/* startseite berufszweige */
ul.bz {
    padding-left: 0;
}
.bz li {
    list-style-type: none;
    display: inline-block;
    color: #fff;
    background-color: var(--cassiopeia-color-primary);
    margin: 5px 5px 5px 0;
    padding: 5px;
}
.bz li a {
    color: white;
    padding: 5px;
    text-decoration: none;
}
.bz > a:link, .bz > a:visited {
  color: #fff; background-color: var(--cassiopeia-color-primary);
}
.bz > a:hover {
  color: var(--bg-color-lightgrey);
}
.bz > a:active, .bz > a:focus {
  color: #fff; background-color: var(--cassiopeia-color-primary);
}

/* startseite quicklinks */
.ql {
  border: solid 0 var(--cassiopeia-color-primary);
  background-color: transparent;
  padding: 0;
  font-size: large;
}
.ql ul {
    list-style-type: none;
    padding-left: 0;
}
.ql ul li {
  display: block;
  line-height: 3rem;
  color: #555;
  background-color: white;
  margin: 5px 0;
  padding-left: 1rem;
  border-left: solid 5px var(--bg-color-myblue);
}
.ql a {
    font-weight: 500;
    display: block;
    width: 100%;
    height: 100%;
}
.ql a::after {
    display: inline-block;
    font-family: "bootstrap-icons"; 
    font-weight: bold; 
    font-size: 1rem;
    content: "\f101"; /* chevron-right */
    vertical-align: -.125em;
    padding-left: .5rem;
    white-space: nowrap;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

nav.mod-breadcrumbs__wrapper {
    margin-top: 0 !important;
    background: linear-gradient(120deg, whitesmoke 50%, #a1bcc8 100%);
    background: transparent;
}
.breadcrumb {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.card {
    border-radius: 0;
    background-color: rgba(255, 255, 255, .8);
}
.text-muted {
    font-size: 0.875rem;
}

/* inhalte sonstiges text */
.text h3, .text h2, p + h2, table + h2 {
    margin-top: 2rem;
}
.text table { margin-bottom: 2rem; }
.text td {
    border: solid 1px #505050;
    padding: 5px;
}
.text

/* links */
span.fa { padding-right: 0.25rem; }
footer a, .footer a {
    text-decoration: none;
}

a[href$=".pdf"] {
    background: url(../../../images/icons/pdf_24.png) no-repeat left center; 
    padding-left: 28px; border-bottom: none !important;
    padding-top: 4px;
    padding-bottom: 4px;
}

a[href]:not(:where(
  [href^="#"],[href^="/"],[href*="://bs-toelz-wor.de"],[href*="mailto"],[href*="tel"],.image-link
))::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 10px;
}

a[href^="mailto:"]::before {
    content: " \f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}

a[href^="tel:"]::before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}
/* home */
a[href$="./"]::before, a[href$="index.php"]::before, .home a::before, a.home::before {
    content: "\f015";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}
a[href^="#kontakt"]::before {
    content: "\f103";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px;
}
/* sidebar */
.container-sidebar-right {
    font-size: 1rem;
}
.container-sidebar-right .dl h4 {
    margin-bottom: 1rem;
}
.container-sidebar-right .dl ul {
    list-style-type: none;
    padding-left: 0;
}
.dl ul a {
    text-decoration: none;
    line-height: 2rem;
}

/* footer */
footer, .footer {
    background-image: none;
    color: lightgray;
    border-top: 5px solid var(--cassiopeia-color-hover);
    font-size: 0.875rem;
}
@media (min-width: 1200px) {
    footer, .footer {
        font-size: 1rem;
    }
}
footer h3 {
    color: lightgray;
    /*text-transform: uppercase;*/
    font-size: 1.25rem;
    font-weight: bold;
}

.container-footer-2 {
    border-top: solid 1px lightblue;
}

.container-footer-2 .mod-custom {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.container-footer-2 .mod-custom .links a {
    display: inline-block;
    margin: 0 20px 15px;
    color: var(--bg-color-lightgrey);
    text-transform: uppercase;
    transition: color 80ms ease-out;
}
.container-footer-2 .mod-custom .links a > i {
  font-size: 1.125rem;
  padding-right: 6px;

}
footer .links a:hover, footer .metismenu.mod-menu .metismenu-item a, footer .metismenu.mod-menu .metismenu-item.active a {
  color: var(--bg-color-lightgrey);
  font-size: .875rem;
}
footer .container-footer-2 {
    text-align: center;
}

/* 220321: blog aktuelles mit Bild (Abstand sonst bei schmalen screens!!!) */
.image-left .blog-item .item-image, .image-right .blog-item .item-image {
  flex: 1 0 auto;
}


/* blog layout ab 900px */
@media (min-width: 900px) {
    .blog .columns-1 .blog-item + figure.item-image {
        display: inline-block; max-width: 50%; 
    }
    .blog .columns-1 .blog-item .item-content {
        padding-left: 50px;
    }
}

/* page navigation */
.pagenavigation {
    border-top: solid 1px silver;
    margin-top: 2rem;
    padding-top: 1rem;
}

/* tabellen */
.item-page table td, .item-page table th {
border: solid 1px silver;
padding: 0.5rem 0;
word-wrap: break-all;
hyphens: auto;
overflow: auto;
}
.item-page table th {
    background-color: var(--cassiopeia-color-primary);
    color: white;
    font-weight: 500;
    }
.item-page table {
    margin-bottom: 2rem;
    max-width: 100%;
    border-spacing: 0;
}
/* etwas mehr abstand fuer groessere geraete */
@media (min-width: 450px) {
    .item-page table td, .item-page table th {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}


/* text im inhalt: maximale breite begrenzen */
.com-content-article__body p, .com-content-article__body ul {
    max-width: 680px;
}
.com-content-article__body p.bilder, .com-content-article__body p.image {
    max-width: 100% !important;
}
.com-content-article__body p a {
    white-space: nowrap;
}

/* fotos im inhalt */
.com-content-article__body p > img {
    margin: 0 .25rem .25rem 0;
}
.com-content-article__body figure {
    display: inline-block;
}

@media ( min-width: 720px ) {
	.com-content-article__body p.bilder > img {
		display: inline-block;
		max-width: 49%;
	}
}
/* download seite ohne dots */
.item-page_downloads ul {
    list-style-type: none !important;
    padding-left: 0;
    line-height: 2rem;
}
.item-page_downloads ul + h2 {
    margin-top: 2rem;
}

.logo-right img { float: right; }

/* fehlerseite */
.error_site .site-grid {
    background-image: url('../../../images/schule/berufsschule_sommer.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
.error_site footer {
    margin-top: 0 !important;
}

.offline_site .site-grid {
    width: 100%;
    height: 100vh;
    background-image: url('../../../images/schule/berufsschule_sommer.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

/* print styles */
@media print {
  body { 
    font-size: 12pt;
    color: #000000; 
  }
  .container-topbar, header, .container-banner, .container-sidebar-left, footer, #back-top {
    display: none;
  }
  .container-sidebar-right {
    position: relative;
    display: block;
    margin-top: 30px;
  }
  table {
    border-collapse: collapse;
    border: 1px solid #999; 
}
  th {
    color: #000;
    font-weight: bold;
  }
  th, td {
    border: 1px solid #999;
  }
}

/* sidebar-left on top of content for small devices */
@media (max-width: 990px) {
.site-grid {
    display: 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 .";
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 1em;
  }
}