/* Die Site FK-Asyl wird mit dem Standard Joomla! Templatte Cassiopeia entwickelt.    */
/* Modifikationen sind in dieser Datei "user.css" realisiert, die als letzte CSS Datei angezogen wird*/
/* M. Knoch 21.12.2022                                                               */

/* Die Breite der Seite auf 1000px beschränken      */
body {
max-width: 1050px;
margin-right: auto;
margin-left: auto;
}  


/* Hintergrundfarbe des gesamten Headers auf weiß  */
.container-header {
   background-color: #ffffff;
   background-image: none;
}

.container-footer {
   background-color: #ffffff;
   background-image: none;
   color: #1a0dab;
}

.footer  {
  margin-top: 0;
}

p {
  margin-bottom: 0.5rem;
}

/* alle Tabellen mit waagerechten Strichen    */
th, td {  
  border-bottom: 1px solid #333;
}

/* Cassiopeia einige Farben und Größen anpassen    */
:root {
  --cassiopeia-color-primary: #1a0dab;   /*Ein ewtas dunkles Blau     */
  --cassiopeia-color-link: #1a0dab;
  --cassiopeia-color-hover: #0088cc;
  --cassiopeia-font-family-body: "Roboto", sans-serif;
  --cassiopeia-font-family-headings: "Roboto", sans-serif;
  --cassiopeia-font-weight-headings: 400;
  
    --body-font-size: 1.1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;    
}

/*  sorry, aber ich habe noch nicht verstanden, über welche Variable die
    Schriftfarben der Überschriften gesetzt werden können                  */
/* Farbe und Schriftart für Überschriften */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 5px 0;
    color: #1a0dab;   /*das geliebte etwas dunkles Blau     */
	text-rendering: optimizelegibility;
}

/* Ich habe keine heading-font-size gefunden. klappt das so hart verdrahtet? */
h1, h2 {
   font-size: 24px;
}

/* cassiopeia definiert Fett als bolder      */
b, strong {
  font-weight: bold;
}

/* Größe und Farben für Listen */
.com-content-article__body li {
	font-size: 16px;
	line-height: 22px;
    color: #cc0066;
}

/* den Platz im Kopf (senkrecht) etwas einschränken und mit Trennstrichen versehen  */
/*  da ist allerdings guter Rat teuer!                                              */
.mod-custom .banner-overlay  {   /* das hier hilft jedenfalls nichts    */
  height: 40vh;
}

/* horizontales Menu  blauer  Text       */            
.container-header .mod-menu {
   justify-content: center;  
   color: #0088cc;
   padding: 0;
}      

/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  padding: 3px 5px;
  color: #0088cc;
}

/* On hover there should be a gray background*/
.container-header .mod-menu a:hover {
  background-color: #eee;
}

/* den Platzverbrauch im Kopf reduzieren              */
.container-header .grid-child  {
  padding: 1px;  
}

/*  den aktivenn Menueintrag invers darstellen           */
.metismenu-item.active > a  {
  	background: #000066 !important;
    color:#FFF   !important;

}

/* aus template.min.css bekommen alle Referenzen immer einen Unterstrich  */
/* ich möchte den Unterstrich erst beim hover haben.  */
a[href]  {
  text-decoration: none;
}

a[href]:hover   {
  text-decoration: underline;
}

/* Die Boxen auf der Home Page sollen nicht so viel Platz verbrauchen.   */
.boxed .blog-item .item-content   {
  padding: 2px;
} 

div.item-content > article > p  {
  margin-bottom: 0.1em;
}

/* die zweite Zeile (mehr lesen) bitte nicht so üppig   */
div.item-content > article > p:nth-child(2)  {
  line-height: 0.7em;
}

div.item-content > article > p > a {
  font-size: 1rem;
}


/* Das Menu etwas aufhübschen                                 */
/* We need to change the color of the Hamburger Menu because white on white is not good */
.container-header .navbar-toggler {
  color: #0088cc;
  border: 1px solid #0088cc;
}

/* Menu nicht so hoch                     */
.container-header .container-nav  {
  padding: 1px;
}

footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: row;
/*  justify-content: space-between;   */
  align-items: left;
}


/*  News Flash Modul : Zeilen etwas knapper    */
.newsflash-item  {
  line-height: 1.0;
}

/* Banner über die ganze Seite */
/* Vorgehen nach https://www.joominator.de/de/banner-anzeigen-cassiopeia */
/* Die Klasse "fka-logo" wird unter "Erweitert / CSS Klasse Modul" im Modul angezogen und im HTML Element für das angezeigte Bild angegeben*/

.fka-logo.item-image {
  text-align: center;
/*    min-width: 100%;
  height: 200px;   */
}  

/*.fka-top {
    min-width: 100%;
} */ 

/* der Versuch, um das ganze einen Rahmen zu simulieren  */
/* selbst mit einem schächeren Grau ist das Quark mit Sahne  
.site-grid {
    background-color: #75a3a3;
}

.header {
    background-color: #75a3a3;
}

.grid-child {
    padding: 3px 15px;   
    background-color: white;
}

.footer {
    background-color: #75a3a3;
    background-image: none;
}                                                   */