@charset "utf-8";
/* CSS Document */

:root {
    --cassiopeia-color-primary: #f9fafb;
    --cassiopeia-color-link: #f9fafb;
    --cassiopeia-color-hover: #f9fafb;
}


/* ------LOGO -----------------------------*/
<div class="navbar-brand" style="text-align: center;">
    <a class="brand-logo" href="/">
        <img loading="eager" decoding="async" src="https://wp-astra-elementor.rneuhoff.de/images/sample-data/my-logo.jpg"
        alt="WP-ASTRA-ELEMENTOR" 
    </a>
</div> 

.brand-logo img {
    max-width: 100%; /* Bild passt sich der Breite an */
    height: auto; /* Höhe bleibt proportional */
}


/* HEADER */

</div>

hr {
  border: none;
  height: 1px;
  background-color: darkgrey;
}


img {
    height: 75%;
    max-width: 100%;
    padding: 0px;
	margin: 0px;
}



/* Bilder mit 10px Abstand --------------
img {
    margin: 10px;
}
*/


/* MENÜZEILE MAIN-MENU -------------------*/
.container-header .mod-menu {
    color: black;
    flex: 1 0 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    background-color: #e1f9ed;  /* hellgrün */	
}

/* Main Menu 2. Zeile*/
.mod-menu {
  font-size: 16px;
  text-transform: uppercase;
}

/* Breadcrumb */
.breadcrumb {
 	background-color: black;
 	font-size: 16px;
  	color: white;
  	font-weight: bold;
}

.breadcrumb-item.active {
  color: white;  
}

.a breadcrumbs_item.breadcrumb-item.active {
  color: black;  
}

.breadcrumb-item.active {
  color: white;
}

.a breadcrumbs_item.breadcrumb-item.active {
  color: #f9fafb;
}



/* ------Ueberschrift Sidebar in dunkel gruen-----*/

	
/* Überschrift Sidebar */
.card-header {
    color: #0b7b5a;
    font-weight: bold;
    font-size: 22px;
}

/* Links in der Sidebar */
.mod-list li a {
    color: darkblue !important;
    font-size: 16px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); /* Schatten nach rechts und unten */
}

/* Hintergrundfarbe Sidebar */
.card-body {  
  background-color: white;
}

/* ------Ueberschrift allgemein -rot- -----*/
/* Überschrift h1 */
h1  {
    /* font-size: calc(1.0rem + 1.5vw); */
    font-size: calc(1.2rem + 1.0vw);
    color: red;
    font-weight: bold;
}

/* Überschrift h2 */
h2  {
    /* font-size: calc(1.375rem + 1.5vw); */
    font-size: calc(1.0rem + 1.0vw);
    color: red;
    font-weight: bold;
}

/* Überschrift h3 */
h3  {
    /* font-size: calc(1.375rem + 1.5vw); */
    font-size: calc(0.9rem + 1.0vw);
    color: red;
    font-weight: bold;
}


/* Menuinträge Sidebar ---------------------*/
/*Normale Farbe -schwarz- */
.mod-articles-category-title {
    font-weight: bold;
    font-size: 14px;
    color: black;
  }
  
/* Farbe gruen bei HOVER */
  .mod-articles-category-title:hover {
    font-weight: bold;
    color: green;
  }
  
/* Farbe dunkelgruen bei besuchten Links */
  .mod-articles-category-title:visited {
    font-weight: bold;
    color: darkgreen;
  }
  
 /* Farbe dunkel-orange bei aktiven Links */
  .mod-articles-category-title:active {
    font-weight: bold;
    color: darkorange;
  }
  
 /* Farbe orange, wenn sich Cursor auf Link befindet */
  .mod-articles-category-title:focus {
    font-weight: bold;
    color: orange;
  }

  /* Website eigene Formatierungen --------------*/
  /* Formatierung fuer einen Aushand auf Webseite */
  p.bodytext a {
    color: darkblue;
    font-weight: bold;
    font-size: 16px;
  }

  /* Formatierung fuer den Vermittlungsabsatz auf der Webseite ---*/
  p a[href^="mailto:"] {
    color: darkblue;
    font-weight: bold;
    font-size: 16px;
  }



/* Blaettern von Seite zu Seite -----------------------------------*/
.page-link {
    background-color: green;
    color: white!Important;
    border: 1px solid #dfe3e7;
    border-color: black
    
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-link, .page-link:hover {
    color: white!Important;
    background-color: darkgreen;
}

/* FOOTER -------------------------------------------------------*/ 

/* Hintergrundfarbe und Schriftfarbe */
.container-footer {
    background-color: lightgray;
    color: white;
    text-align: left;
  }
  
  /* Groesse des Footers */
  .container-footer {
    height: 600px;
    max-width: 120%;
  } 
  
  /* Schriftgroesse und Buchstaben-Grossschreibung */
  .container-footer {
    font-size: 8px;
    /* text-transform: uppercase; */
  }
  
  /* Menueintraege horizontal */
  .mod-menu_dropdown-metismenu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: lightgray;
  }
  
  /* Entfernen der Aufzählungspunkte */
  .mod-list {
    list-style-type: none;
  }
  
  /* Zusätzlicher Abstand zwischen den Menüeinträgen */
  .mod-menu_dropdown-metismenu li {
    margin-bottom: 5px;
  }
  
<style>
.float-video {
    float: left;
    margin: 10px 10px 10px 0;
}
</style>

<style>
    .system-pagebreak {
        font-weight: bold;
        color: blue;
    }
</style>
 
<style>
    .flex-column .flex-row{
        font-weight: bold;
        color: blue;
    }
</style>

<style>
    div.py-1 {
        font-weight: bold;
        color: blue;
    }
</style>

.btn-primary {
  btn-color: yellow;
}

.btn-primary {
  background-color: darkgreen !important;
}


/* Schriftgrüße allgemein 16px und schwarze Schriftfarbe -------*/
body {
    font-family: Arial, sans-serif;	
    font-size: 18px !important;
    color: black;
}


.mod-menu {
   margin-top: -0px !Important; /* Setzt den oberen Abstand des mod-menu-Moduls auf 0 */
}

.container-header {
   margin-bottom: 0px; /* Reduziert den unteren Abstand des Container-Headers um 50px */
}

Tolino 
/* Links zu Beiträgen auf der Seite '/
.toclink{
    color: black !important;
    text-decoration: none;
}
  
.card-color{
  color: black!important;
}
  
/* CSS-Code für blaue Links */
a {
  color: blue;
}

.j-category-name {
  display: none;
}


.pathway {
  color: black;
  display: none;
}

.system-pagebreak a {
  color: green;
}

#system-readmore {
  display: block;
}

.toclink {
  color: blue!important;
}

a.post-link {
  color: blue!important;
  text-decoration: none;
}

a.post-link:hover {
  color: darkred;
  text-decoration: none;
}

a {
  color: blue!Important;
  text-decoration: none;
}

a:hover {
  color: darkred!Important;
  text-decoration: none;
}

/* Joomla responsiv machen */
/* Mobile Geräte */
@media only screen and (max-width: 767px !Important) 

/* Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px !Important) 

/* Desktops */
@media only screen and (min-width: 992px !Important)
  
/* Überschrift Seitenumbruch-Menü */
  .card-body <h2 Beitraege</h2>

 /* header.css */

.header {
  height: calc(100vh - 156px);
}

.container {
    width: 100%;
    max-width: 1200px; /* Begrenze die maximale Breite des Containers */
    margin: 0 auto; /* Zentriere den Container horizontal */
}
}


/* CSS für Desktop-Ansicht */
@media (min-width: 768px) {
    .navbar-nav {
        /* Hier können Sie Desktop-Styling anpassen */
    }
}

/* CSS für Tablet-Ansicht */
@media (max-width: 767px) {
    .navbar-nav {
        /* Hier können Sie das Menü für Tablets anpassen */
    }
}

/* CSS für Mobilansicht */
@media (max-width: 480px) {
    .navbar-nav {
        /* Hier können Sie das Menü für Mobilgeräte anpassen */
    }
}

/* Zwischenlinie in dunkelgrau */
hr {
  border: none;
  height: 5px;
  background-color: black;
}

.mod-menu .nav-item {
    display: inline-block !important; /* Menüpunkte nebeneinander anzeigen */
    margin-right: 15px; /* Abstand zwischen den Menüpunkten */
  color: red;
}

.container-nav .mod-menu .nav-item {
    display: inline-block !important;
    margin-right: 15px;
    color: red !important; /* Textfarbe auf rot setzen */
}
.mod-menu .nav-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    display: inline-block !important; /* Menüpunkte nebeneinander anzeigen */
    margin-right: 15px; /* Abstand zwischen den Menüpunkten */
  color: red;
  }

.header a  {
    color: #004d00; /* Dunkelgrün */
    font-size: 36px; /* Schriftgröße */
    font-weight: bold; /* Fett */
    text-align: center; /* Zentriert */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Schatten nach rechts und unten */
}

.jce-editor .format-label:before {
    content: "Format"; /* Übersetzung für Format */
}
.jce-editor .font-size-label:before {
    content: "Schriftgröße"; /* Übersetzung für Schriftgröße */
}
.jce-editor .style-label:before {
    content: "Stilauswahl"; /* Übersetzung für Stilauswahl */
}
.jce-editor .font-label:before {
    content: "Schriftart"; /* Übersetzung für Schriftart */
}