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

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

<div class="navbar-brand">
	<a class="brand-logo" href="/">
	<img loading="eager" decoding="async" src="https://wix-tutorial2.rneuhoff.de/images/Logofertig1.jpg"
    
	alt="WIX Tutorial" width="700" heigt="150"> </a>
<div>

/* ------LOGO -----------------------------*/
/* Nur das Logo formatieren */
.brand-logo img {
  width: 100%;
  height: 75px;
  float: right;
  padding: 75px;
  margin: 50px;
}

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


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

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

/* Links in der Sidebar */
.mod-list li a {
    color: darkblue !important;
    font-weight: bold;
    font-size: 16px;
}

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