:root {
  --cassiopeia-color-primary: #1d377f;
  --cassiopeia-color-hover: #334a98;
  --cassiopeia-color-link: #1d377f;
}




/* css topbar */

.container-topbar {
    max-width: 1320px;
    background: #fff;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleine Bildschirme */
}

.menu-horizontal li {
    display: inline-block;
    font-size: 12px;
    color: #868995;
    text-decoration: none;
  
}

.menu-horizontal a {
    font-size: 12px;
    color: #868995;
    text-decoration: none;
}

.menu-horizontal a:hover {
    color: #0f151d;
}

/* Individuelle Module */
.mod-custom.custom{
margin-top: 0px;
  
}

/* ende css topbar */


i._access-icon._access {

    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  

    background-image: url('/images/ICON/barrierefrei.svg'); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    display: inline-block;
    width: 50px;
    height: 50px;

    transform: none !important;
}















/* Farben Abstände für alle Modulcontainer */

/* Einheitliche Abstände für alle Modulpositionen */
.container-sidebar-left,
.container-component,
.container-top-a,
.container-top-b,
.container-main-top,
.container-main-bottom,
.container-offcanvas
 {
    background-color: #ffffff !important;
    padding: 15px; /* Einheitlicher Innenabstand */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Optional: Falls ein maximales Layout definiert werden soll */
}

/* Abstand zwischen Banner und Sidebar-Left (grün) */
.container-banner {
    margin-bottom: 15px; /* Einheitlicher Abstand nach unten */
    background: transparent !important; /* Entfernt die weiße Hintergrundfarbe */
    padding-bottom: 15px; /* Einheitlicher Innenabstand */ 
  
}

/* Banner-Inhalt bleibt mit weißem Hintergrund */
#banner-content {
    background: white;
    padding: 15px;
}

/* Abstand zwischen bottom-a und container-main (orange) */
.container-bottom-a {
    margin-top: 15px; /* Einheitlicher Abstand nach oben */
}

/* Sicherstellen, dass alle Container gleich ausgerichtet sind */
.container-sidebar-left,
.container-component,
.container-top-a,
.container-top-b,
.container-main-top,
.container-main-bottom,
.container-bottom-a {
    display: flex;    
  box-sizing: border-box; /* Stellt sicher, dass Padding/Margin korrekt berechnet werden */
}

/* ---------- ende ---------Farben Abstände für alle Modulcontainer */





/* Topbar Container: Einheitliche Abstände links und rechts */
.container-topbar {
    max-width: 1320px; /* Passe die Breite an dein Design an */
    margin: 0 auto; /* Zentriere den Container */
    padding-left: 0px; /* Abstand links */
    padding-right: 10px; /* Abstand rechts */  
}

/* Navigation innerhalb der Topbar */
ul.mod-menu {
    padding: 0; /* Entfernt unnötige Padding-Werte */
    margin: 0; /* Entfernt unnötige Margin-Werte */  
}



/* Anpassung Haupt-Menuepunkte */
ul.mod-menu a.my-icon-home::before,
ul.mod-menu a.my-icon-ue::before,
ul.mod-menu a.my-icon-eltern-schueler::before,
ul.mod-menu a.my-icon-schulleben::before,
ul.mod-menu a.my-icon-beruf::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: contain;
    margin-right: 5px; /* Abstand zur Schrift */
    vertical-align: middle; /* Vertikale Ausrichtung zur Schrift */
}

/* Icons für jeden Menüpunkt */

ul.mod-menu a.my-icon-home::before {
    background-image: url('https://werla-schladen.de/images/Schule/hauptmenue/home.svg');
}

ul.mod-menu a.my-icon-ue::before {
    background-image: url('https://werla-schladen.de/images/Schule/hauptmenue/ueber-uns-icon.svg');
}

ul.mod-menu a.my-icon-eltern-schueler::before {
    background-image: url('https://werla-schladen.de/images/Schule/hauptmenue/eltern-schueler.svg');
}

ul.mod-menu a.my-icon-schulleben::before {
    background-image: url('https://werla-schladen.de/images/Schule/hauptmenue/schulleben.svg');
}

ul.mod-menu a.my-icon-beruf::before {
    background-image: url('https://werla-schladen.de/images/Schule/hauptmenue/berufsorientierung.svg');
}

/* Ausblenden der Icons auf kleinen Bildschirmen */
@media (max-width: 768px) {

    ul.mod-menu a.my-icon-home::before,
    ul.mod-menu a.my-icon-ue::before,
    ul.mod-menu a.my-icon-eltern-schueler::before,
    ul.mod-menu a.my-icon-schulleben::before,
    ul.mod-menu a.my-icon-beruf::before {
        display: none;
    }
}


.container-header .container-nav {
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2em;
  padding-bottom: 2em;
}



/* Anpassung Hamburger-Menue*/
.container-header .navbar-toggler {
  color: #334a98;
  cursor: pointer;
  border: 2px solid #334a98;
  border-radius: none;
}


/* Menü - Topbar - Hamburger-Menue*/
.container-header nav {
  margin-top: .5em;
  margin-left: 10px;
  padding: 0;
}

/* Ende Anpassung Hamburger-Menue*/


/* Das Dropdown-Menu im Menu färbst du mit der Klasse 
.metismenu.mod-menu .mm-collapse ein 

top nav menu--------
*/

.metismenu.mod-menu.topnav {
    background: #fff; /* Hintergrundfarbe des Menüs */
    max-width: 1320px; /* Begrenzung der Breite */
    
   
   margin: 0 auto; /* Zentriert den Container */
   text-align: right; /* Richtet die Inhalte innerhalb des Containers rechts aus */
    }

.metismenu.mod-menu.topnav > li > a {
    font-size: 14px;
    color: #868995;
    text-decoration: none;
}

.metismenu.mod-menu.topnav > li > a:hover {
    color: #1d377f; /* Hover-Farbe */
}
/* ----------- ende topnav ------- */


/* breadcrumb kategorie ausblenden
.breadcrumb li a[href*="category"] {
    display: none;
  }
*/
.breadcrumb {
    font-size: 12px; /* Schriftgröße der Breadcrumb-Navigation */
}



.px-3 {
  padding-left: 0 !important;
  padding-right: 1rem !important;
}
/* ende- breadcrumb padding left entfernen ---- */

/* ---------- responsive pagination ------------*/
.pagination {
	flex-wrap: wrap;
	gap: 1em 0;
}

/* ---------- pagination ende------------*/


h1 {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #474747;
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 28px;
  line-height: 30px;
  font-weight: normal;
  text-shadow: 0px 0px 0px rgba(150, 150, 150, 0.8);
  text-transform: none;
    }



h2 {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #666666;
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  text-shadow: 0px 0px 0px rgba(150, 150, 150, 0.8);
  text-transform: none;
    }




h3 {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #474747;
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  text-shadow: 1px 1px 4px rgba(150, 150, 150, 0.6);
  text-transform: none;
  
  }


/* Überschrift der Beiträge */
.item-title {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #474747;
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  text-shadow: 1px 1px 4px rgba(150, 150, 150, 0.6);
  text-transform: none;
    }





/* --- Banner Carousel: Controls ausblenden --- */
.carousel-control-prev,
.carousel-control-next {
    display: none !important;
}

/* --- Container-Banner --- */
.container-banner.full-width {
    max-width: 1320px;
    margin: 0 auto; /* Zentriert den Banner */
    padding: 15px;
    margin-bottom: 15px;
    background-color: #ffffff !important;
}



  
}

/* --- Carousel in Container zentrieren --- */
.container-banner.full-width .carousel {
    margin: 0 auto;
}

/* --- Carousel-Items und Bilder --- */
.carousel-item {
    text-align: left;
    padding: 10px;
}

.carousel-item img {
    width: 100%;             /* Volle Breite innerhalb des Items */
    height: auto;            /* Höhe passt sich an */
    max-width: 1280px;       /* Verhindert zu große Bilder */
    max-height: 512px;       /* Begrenzte maximale Höhe */
    object-fit: cover;       /* Sauberer Zuschnitt ohne Verzerrung */
}

/* --- Einheitliche Bild-Höhen auf kleineren Bildschirmen --- */
@media (max-width: 768px) {
    .carousel-item img {
        height: 500px;       /* Feste Höhe für Tablets */
        object-fit: cover;   /* Sorgt dafür, dass das Bild zentriert beschnitten wird */
    }
}

@media (max-width: 480px) {
    .carousel-item img {
        height: 300px;       /* Feste Höhe für Smartphones */
        object-fit: cover;
    }
}

/* --- Carousel Caption (rechts ausgerichtet) --- */
.carousel-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    text-align: right;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px;
}


.carousel-caption h2.carousel-title {
    text-align: right;
    margin-right: 15px;
  color: #334a98;
}

.carousel-caption h5,
.carousel-caption p {
    color: #333;
    margin: 0 15px 10px 0;
}

/* --- Carousel Indicators --- */
.carousel-indicators li {
    background-color: #333;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: #354a91;
}

/* --- Carousel Fade Transition --- */
.carousel-fade .carousel-item {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

/* --- Optional: Newsflash Carousel Override --- */
#newsflashCarousel img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}















/*  Schrift auf der Seite nutzen: Auf Google findest du auch 
die CSS Anweisung für die Nutzung der Schrift. Wenn du diese in 
das body element einfügst dann wird die Schrift auf der ganzen 
Webseite genutzt. */

body 

{


background-image: url(https://werla-schladen.de/media/templates/site/cassiopeia_child_werla_schladen/images/bg.png);)
font-family: 'Roboto', sans-serif;
margin: 0 auto; /* Zentrierung auf der Seite */
padding: 0px; /* Innenabstand */


  

  
}

/* Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst 
diese also mit .header an */

.header {
   background-image: url(https://werla-schladen.de/media/templates/site/cassiopeia_child_werla_schladen/images/bg.png);)
  background-color: #ffffff; /* Verwende background-color für die Farbe */
   border: none;  
}

.container-header {
  z-index: 10;
  background-color: #ffffff;
  position: relative;
  }

.container-header .mod-menu {
  color: #868995; /* Textfarbe Haupt-Menü */
  }


/* gleiche bildgroessen in top-a Top3Beitraege*/
figure img {
  height: 350px;
  object-fit: cover;
  width: 100%;
  display: block;
}






















/* Farben für modulposition bottom a*/
.grid-child.container-bottom-a {
    background-color: #404c52; /* Dunkelgrauer Hintergrund */
	color: #ffffff; /* Inhalte */
    padding: 40px; /* Optional: Innenabstand */
	}
	
	
	.grid-child.container-bottom-a a {
    color: #ffffff; /* Weiße Farbe für Links */
    text-decoration: none; /* Optional: Entfernt Unterstreichung */
}

.grid-child.container-bottom-a a:hover {
    color: #cccccc; /* Optional: Hellere Farbe beim Hovern */
}
	


/* Anpassungen für modulposition main-top*/
.main-top-drei {
	background-color: none; /* blauer Hintergrund */
	color: #ffffff; /* Inhalte */
    padding: 20px; /* Optional: Innenabstand */
	}

.main-top-drei a {
    color: #ffffff; /* Weiße Farbe für Links */
    text-decoration: none; /* Optional: Entfernt Unterstreichung */
}

.mod-articles-item {
  flex-direction: column;
  display: flex;
  padding: 20px;
  color: #ffffff; /* Inhalte */
  background-color: #334a98;
}

.mod-articles-item a {
    color: #ffffff; /* Weiße Farbe für Links */
    text-decoration: none; /* Optional: Entfernt Unterstreichung */
}

/* vergrößerung articelbild bei mouseover */


.left.item-image img {
  transition: transform 0.3s ease-in-out;
}

.left.item-image:hover img {
  transform: scale(1.1);
}



/*gallery-ersatz in den Beiträgen (bei )mouseover */

.com-content-article__body p img {
    max-width: 150px;
    height: auto;
    transition: transform 0.6s ease-in-out;
    border-radius: 5px;
    object-fit: cover;
}

.com-content-article__body p img:hover {
    transform: scale(4.3);
    transform-origin: center top;
  position: relative;
    z-index: 1000;
}


/* Media Query für Smartphones (bis 768px Breite) */
@media (max-width: 768px) {
    .com-content-article__body p img:hover {
        transform: scale(2.1); /* Weniger stark zoomen auf kleinen Displays */
    }
}


/*ende -- - vergrößerung articelbild bei mouseover */






/* Module haben die Klasse card, man steuert sie also mit .card an 
- wenn du nur ein bestimmtes Modul ansteuern willst, kannst du dem Modul 
in den Einstellungen eine eigene CSS Klasse geben und dann damit ansteuern  */

.card {
	
	border: none; 
	border-radius: 0;
	background-color: transparent; /* Hintergrund des Elements ist transparent */
  /*box-shadow: 6px 2px 9px 0px rgba(0,0,0,0.8);
	-webkit-box-shadow: 6px 2px 9px 0px rgba(0,0,0,0.8);
	-moz-box-shadow: 6px 2px 9px 0px rgba(0,0,0,0.8);/


}

/* Module sind auf verschiedenen Modulpositionen im Cassiopeia Template 
bekommen 
dann die Module zusätzlich zu card auch die Position als Klassennamen, 
zum Beispiel main-top - wenn du also alle Module auf Main Top ändern 
möchtest, nimmst du .main-top.card */



.topbar.card {
   background-color: #000000;
   border-radius: 0;
   
   }

.main-top.card {
   background: #cccccc;
   border-radius: 0;
}


/* Überschriften sind html Elemente, die Hauptüberschrift ist eine h1, dann kommt h2, h3, h4 usw. Ein html Element steuerst du an indem du einfach den Namen davorschreibst */



/* In Joomla haben die meisten Buttons die Klasse btn-primary - 
im Element Inspektor kannst du nachsehen ob der Button, den du 
einfärben willst wirklich diese Farbe hat.
*/

.btn-primary {
  background: #2d4491;
}

/* Wenn du etwas einfärben möchtest, nur wenn man mit der 
Maus drüber fährt dann schreibst du :hover dahinter
*/

.btn-primary:hover {
  background: #334a98;
} 

/* In Joomla haben alle Beitragsbilder die Klasse item-image, wenn 
du nur ein bestimmtes Bild einsteuern möchtest, dann muss du dem Bild im 
Beitrag eine eigene CSS Klasse geben.
*/

.item-image {
  border: 0px solid #ff0000;
}


/*Laufen dir auf der Webseite icons über den Weg kannst du diese einzeln einfärben*/

.icon-user {
  
}

/* oder du färbst mit dieser besonderen Anweisung alle Icon ein*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
  color: #403678;
}


/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an */



  
  .footer {
    color: #cccccc;
}