@charset "utf-8";
/* LuO Hompage, 12.2021 (New template: Helix Ultimate) */
/*******************************************************/

/* --------- Genererelles Layout & Styling: ------- */

body { 
   background: linear-gradient(to right, hsla(180, 90%, 95%, 1) 0%,  hsla(100, 90%, 95%, 1) 50%,  hsla(60, 90%, 95%, 1) 100%);
}

#sp-top-bar {
   background: linear-gradient(to right, hsla(180, 90%, 98%, 1) 0%,  hsla(100, 90%, 98%, 1) 50%,  hsla(60, 90%, 98%, 1) 100%);
   height: 25px;
   padding: 0px;
   color: #000;
}
#sp-top-bar a { color: #324b9b; }
.sp-contact-info { float:right; }

#sp-intro { 
   background: linear-gradient(to right, hsla(180, 90%, 95%, 1) 0%,  hsla(100, 90%, 95%, 1) 50%,  hsla(60, 90%, 95%, 1) 100%);
   margin: 15px 0px 0px;
}
/* Introzeile in h1 geändert, wg. SEO: */
#sp-intro h1 { font-size: 24px;}
/* Zusätzlicher Responsive font-size für Introzeile: */
@media (max-width: 768px) {  #sp-intro h1 { font-size: 18px; } }
@media (max-width: 384px) {  #sp-intro h1 { font-size: 16px; } }

#sp-header {
  background: linear-gradient(to right, hsla(210, 70%, 75%, 0.8) 0%, hsla(150, 70%, 75%, 0.8) 25%,  hsla(100, 70%, 75%, 0.8) 50%, hsla(60, 60%, 70%, 0.8) 75%,  hsla(30, 70%, 75%, 0.8) 100%), url(/home/images/system/syspics/marble2.jpg) ;
}

#sp-logorowmobile {
   background-image: linear-gradient(to right, hsla(180, 90%, 94%, 0.85) 0%,  hsla(100, 90%, 94%, 0.85) 50%,  hsla(60, 90%, 94%, 0.85) 100%), url(/home/images/system/syspics/menschen2019.png);
   background-repeat: no-repeat, repeat-x;
   background-position: 0px 0px, 0px 14px;
   background-size: auto auto, auto 56px;
}
/* logorow-Klasse verwendet im Modul der Logo-Zeile: */
div.logorow { 
   width: 100%;
   max-height: 60px;
   margin: 0px auto 10px auto;
   padding: 0px;
   text-align:center;
   }
div.logorow img {
   display:inline-block;
   height: 100%;
   }
@media (max-width: 767px) {  div.logorow img { margin-right: 1%; }  }
@media (min-width: 768px) {  div.logorow img { margin-right: 2%; margin-left: 2%; }  }

#sp-menurow {
  background: linear-gradient(to right, hsla(210, 70%, 75%, 0.8) 0%, hsla(150, 70%, 75%, 0.8) 25%,  hsla(100, 70%, 75%, 0.8) 50%, hsla(60, 60%, 70%, 0.8) 75%,  hsla(30, 70%, 75%, 0.8) 100%), url(/home/images/system/syspics/marble2.jpg) ;
}
#sp-left div.sp-module, #sp-right div.sp-module {
	padding: 0px;
	border: none;
}

#sp-topimage {
  margin-top: 15px;
}

#sp-main-body {
  padding: 15px 0px;  
}

#sp-footer {
  background: linear-gradient(to right, hsla(210, 70%, 80%, 1) 0%, hsla(150, 70%, 80%, 1) 25%,  hsla(100, 70%, 80%, 1) 50%, hsla(60, 60%, 75%, 1) 75%,  hsla(30, 70%, 80%, 1) 100%);
  color: #000;
}
/* Hier aufpassen. Falls das auf manchen Geräten Probleme beim Hochscrollen gibt, wieder rausnehmen: */
#sp-footer {
  height: 60px;
  padding: 15px;
}
#sp-footer div.container-inner { padding: 0px; }


/* ------ Artikleliste ( Abstände, Alignement, Breite angepasst ) ----------- */
#sp-component .container-fluid {
    padding-right: 8px;
    padding-left: 8px;
  }
@media (min-width: 1400px) {
  #sp-component .container-fluid {
    padding-right: 50px;
    padding-left: 50px;
  }
}
@media (max-width: 575px) {
  #sp-component .container-fluid {
    padding-right: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 992px) {
   #sp-component .row>* {
      padding-right: calc(var(--bs-gutter-x) * .2);
      padding-left: calc(var(--bs-gutter-x) * .2);
   }
}

/* --------- Artikel und Text ----------- */

body, p, li, div, span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Angepasst an gewohnte helix3 Größen */
h5 { font-size: 14px; }
h4 { font-size: 18px; }
h3 { font-size: 22px; }
h2 { font-size: 26px; }
h1 { font-size: 30px; }

h1 span, h2 span, h3 span, h4 span, h5 span { font-size:1em;  line-height: 1em; }
/* sonst ändert <span> innerhalb header-tags (z.B. einfärben) die Schriftgröße */

div.article, div.article-details {
  margin-top: 0px; /* 10px; */
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #7090B0 !important;
  border-radius: 5px !important;
  padding: 15px!important;
  background-color: #FFF;
  min-height: 200px;  /* !? */
}
/*
div.article-details {
  padding: 15px 10px 5px 10px;
}   
*/
div.article h2, div.article-details h1, div.article-details h2 {
  text-align: center;
  font-weight: bold;
  font-size: 24px !important;
  color: #324b9b;
}

/* Listen mit größerem Zeilenabstand (MINT) */
ul.widelist li { padding-bottom:5px; }


/* -------- Verlinkungen ----------- */

/* Links in Artikeln unterstrichen, um sie besser von anderem blauen Text zu unterscheiden... */
div.article a, div.article-details a { text-decoration: underline; }
div.article a:hover, div.article-details a:hover { text-decoration: underline; }
div.article a:visited, div.article-details a:visited { text-decoration: underline; }
/* ... aber nicht in Buttons */
a.btn { text-decoration: none; }

/* pdf-Links in Artikeln werden nun automatisch mit einem entsprechenden Symbol ergänzt */
div.article a[href$=".pdf"]::after, div.article-details a[href$=".pdf"]::after { 
   content: "  \1F4C4";
   font-size: 85%;
   font-color: #F00000;
   display:inline-block;  /* wichtig */
   margin-left: 5px;
}
/* Dazu Klasse, um dies für einzelne Links abzuschalten: */
div.article a.nosymbol::after, div.article-details a.nosymbol::after { content: none; }


/* -----------  Menu ------------ */

.sp-megamenu-parent>li>a { line-height: 55px;  font-size: 16px; }

/* Dropdown der Menüpunkte mit individuellem Hintergrund, passend zum Farbverlauf der Menüleiste */
.sp-megamenu-parent .sp-menu-item:nth-child(1) .sp-dropdown-inner { background: hsl(165, 90%, 90%); }
.sp-megamenu-parent .sp-menu-item:nth-child(2) .sp-dropdown-inner { background: hsl(155, 90%, 90%); }
.sp-megamenu-parent .sp-menu-item:nth-child(3) .sp-dropdown-inner { background: hsl(135, 90%, 90%); }
.sp-megamenu-parent .sp-menu-item:nth-child(4) .sp-dropdown-inner { background: hsl(105, 90%, 90%); }

/* Farben für ausgewählte Menüpunkte */
a.ymenu { color: #d80 !important; }  /*  important, da es sonst von a:link überschrieben wird*/
a.rmenu { color: #e00 !important; font-weight: bold; !important;}
a.bmenu { font-weight: bold; !important; } 

/* Verhindern, dass die aufgeklappten Untermenüs abgeschnitten werden: */
@media (min-width: 992px) { #sp-main-body{  min-height: 480px }  }

/* Größerer Zeilenabstand für Untermenüpunkte in offcanvas */
.offcanvas-inner .menu-child li { line-height: 2; }

/* offcanvas Problem au iPads (s.d.) */
.offcanvas-menu span.menu-toggler::after {
   padding: 4px 8px;
}

/* ----------- Tabellen ------------ */
table td { padding: 5px; }

/* Für kleine Screens: Scrollbare Tabellen mit horizontalem Scrollbalken */
div.scrolltable  { overflow-x: auto; }
/* Macht es nun überflüssig, den scollbaren Tabellen feste Spaltenbreiten zu geben: */
div.scrolltable  table th { white-space: nowrap; }
div.scrolltable  table td { white-space: nowrap; }

/* Media-Queries für Scrollbalken: */
@media (min-width: 768px) {  .hide-gt-xs { display: none; }  }
@media (min-width: 992px) {  .hide-gt-sm { display: none; }  }

table.narrow td { line-height: 24px; padding: 0px 5px; }

/* Tabelle nur mit Linien zwischen den Spalten */
table.rowsep    { border-collapse: collapse; }
table.rowsep td {
   border: 1px solid #ccc;
   vertical-align:middle;
   border-left:0;
   border-right:0; 
   padding: 10px 0px;
}
table.rowsep tr:first-child td {  border-top: 0; }


/* ------------- Gimmicks ------------ */

/* Container mit Border und abgerundeten Ecken */
div.luoblock {
   width: 200px;
   margin: 15px;
   display: inline-block;
   background: #fff;
   text-align: center;
   border: 1px solid #349;
   border-radius: 5px;
   padding: 10px;
   vertical-align: top;
}
div.luoblock img {
   display: inline-block;
   text-align: center;
}
/* Kombinieren: class="eia luoblock" */
div.eia {
   background: #F8F8F8;
}

/* Zentrierte Container die responsiv umbrechen */
div.luogrid
{
  text-align: center;
  overflow-x: auto;
}
div.luogrid > div
{
	display: inline-block;
  	text-align: center;
}
div.luogrid > div > div
{
	display: inline-block;
}

/* Optisch hervorgehobene Links in Buttonform */
a.linkbutton {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none !important;
  background-color: #eee;
  color: black;
  padding: 5px 10px;
  border: 1px solid;
  border-color: #ccc #333 #333 #ccc;
  margin-bottom: 5px;
}
a.linkbutton:hover{
  border-color: #333 #ccc #ccc #333;
}

/* Border in RegularLabs Slider Style */ 
.sliderborder
{
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 8px 16px;
}


/* -------- Diverses ------------ */

/* Flusstext rechts von Bildern auf Smartphones ungünstig */
@media (min-width: 768px) {  .float-gt-xs { float: left; }  }
@media (min-width: 576px) {  .float-gt-xs4 { float: left; }  }
@media (max-width: 576px) {  .hide-mobile { display: none; }  }


/* fix pagination */
ul.pagination { flex-wrap: wrap; }




/****** Individuelle Artikel (joomla core hack, siehe Doku) *****/

/* TdoT und EIA */
div.luo453 {
    background: linear-gradient(to right, hsla(180, 90%, 95%, 1) 0%,  hsla(100, 90%, 95%, 1) 50%,  hsla(60, 90%, 95%, 1) 100%);
	min-height: 375px;
}
div.luo424 {
	background: linear-gradient(to right, hsla(60, 90%, 95%, 1) 0%,  hsla(100, 90%, 95%, 1) 50%,  hsla(180, 90%, 95%, 1) 100%);
	min-height: 375px;
}

div.luo515 { 
	background-color: #FBFEE8;
}  /* Gelber Hintergrund - Ins Template verfrachten*/

div.luo000 { 
	background-color: #D4F1F6;
}  /* Hellblauer Hintergrund */

div.luo323 h2, div.luo323 h1 { 
	color: #cc3300;
}  /* Rote Überschrift - Beachten: h1 und h2 (article-detail & article) */  

div.luo117 { 
	background-color: hsla(0, 100%, 100%, 0.6);
}  /* Demnächst-Kasten */

div.luo89, div.luo125, div.luo146, div.luo250 {
	background-color: transparent;
	border: none !important;
}  /*  Ohne Hintergrund: MINT-Blog,  Kalender,  SuS aktiv,  'Zum Archiv'  */