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




/* override css topbar */


.container-topbar {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 10px;
}

.topbar-left,
.topbar-right {
    flex: 1;
    font-size: 14px;
    color: #868995;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.topbar-left {
    justify-content: flex-start;
  padding: 0;
}

.topbar-right {
    justify-content: flex-end;
}

.topbar-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.topbar-menu li {
    display: inline-block;
}

.topbar-menu a {
    text-decoration: none;
    color: #868995;
}

.topbar-menu a:hover {
    color: #ffffff;
}


/* ende override css topbar */


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

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
















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/Schule/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-hm-1::before,
ul.mod-menu a.my-icon-hm-2::before,
ul.mod-menu a.my-icon-hm-3::before,
ul.mod-menu a.my-icon-hm-4::before,
ul.mod-menu a.my-icon-hm-5::before {
    content: "";
    display: inline-block;
    width: 45px;
    height: 45px;
    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-hm-1::before {
    background-image: url('https://schule-teichgarten.de/images/Schule/hauptmenue/konzept3.svg');
}

ul.mod-menu a.my-icon-hm-2::before {
    background-image: url('https://schule-teichgarten.de/images/Schule/hauptmenue/schule1.svg');
}

ul.mod-menu a.my-icon-hm-3::before {
    background-image: url('https://schule-teichgarten.de/images/Schule/hauptmenue/klasse1.svg');
}

ul.mod-menu a.my-icon-hm-4::before {
    background-image: url('https://schule-teichgarten.de/images/Schule/hauptmenue/konzept2.svg');
}

ul.mod-menu a.my-icon-hm-5::before {
    background-image: url('https://schule-teichgarten.de/images/Schule/hauptmenue/koepfe.svg');
}

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

    ul.mod-menu a.my-icon-hm-1::before,
    ul.mod-menu a.my-icon-hm-2::before,
    ul.mod-menu a.my-icon-hm-3::before,
    ul.mod-menu a.my-icon-hm-4::before,
    ul.mod-menu a.my-icon-hm-5::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 */
background-color: #0000;

}

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





/* ---------- menü lehrkräfte kategorien ------------*/
.filter-menu ul {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Abstand zwischen den Menüpunkten */
    list-style: none;
    padding: 0;
}

.filter-menu li {
    display: inline-block;
}


/* ---------- ende - menü lehrkräfte kategorien ------------*/
  
}









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: 1px 1px 4px rgba(150, 150, 150, 0.8);
  text-transform: none;
  
  }

h3 {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #ffffff;
  margin-bottom: 15px;
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  text-transform: none;
  
  }

.sidebar-left h3 {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #fff;
  margin-bottom: 15px;
  padding: 5px 10px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  text-transform: uppercase;
  background-color: #f3594c;
  
  }





/* Ü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;
    }

.page-header h1
{
  font-size: 28px;
  font-weight: normal;
  line-height: 40px;
  border-bottom: 3px solid #f3594c;
  border-bottom-color: rgb(243, 89, 76);
  margin-bottom: 25px;
  padding-top: 0;
}







.sidebar-left h5 {
  font-family: 'Roboto Condensed', Arial, serif !important;
  color: #fff;
  margin-bottom: 15px;
  padding: 5px 10px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  text-transform: uppercase;
  background-color: #f3594c;
  
  }




/* News-Bilder-Slider */
/* --- 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;
}


/* Einheitliche Bildhöhe im Banner-Slider */
.container-banner.full-width .carousel-item img {
    height: 500px;            /* Fixe Höhe für alle Bilder */
    width: 100%;              /* Bild passt sich Containerbreite an */
    object-fit: cover;        /* Zuschneiden statt verzerren */
    display: block;
    border-radius: 0.25rem;   /* Optional: leicht abgerundete Ecken */
}





.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 {
    font-weight: 400;
	line-height: 40px;
	font-size: 30px;
    text-align: right;
    margin-right: 15px;
    color: #39c27f;
}

.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: #39c27f;
}

/* --- 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;
}







/* 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 */

/* Basisstil für alle Bilder in Artikeln und Galerien */
.blog-featured .gallery img,
.blog-featured .blog-item img,
.gallery img {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 70%;
  height: auto;
  border-radius: 5px;
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
}

/* Hover-Effekt */
.blog-featured .gallery img:hover,
.blog-featured .blog-item img:hover,
.gallery img:hover {
  cursor: zoom-in;
}

/* Vergrößertes Bild */
.blog-featured .gallery img.enlarged,
.blog-featured .blog-item img.enlarged,
.gallery img.enlarged {
transform: scale(1.5); /* Vergrößerung */
  z-index: 999;
  position: relative;
  cursor: zoom-out;
  
  
  
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
  .blog-featured .gallery img.enlarged,
  .blog-featured .blog-item img.enlarged,
  .gallery img.enlarged {
    transform: scale(1.5); /* Leicht reduzierte Vergrößerung auf mobilen Geräten */
  }
}


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

/* Bildgruppen automatisch nebeneinander anzeigen */
img + img {
  margin-left: 1rem;
}


































/*  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://schule-teichgarten.de/media/templates/site/cassiopeia_child_schule_teichgarten/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://schule-teichgarten.de/media/templates/site/cassiopeia_child_schule_teichgarten/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ü */
  }


/* 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 */
}
















/* 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.
*/





  
  
---------------------------------------
 


/*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;
}