#top .row-container {
   max-width: 60%;
}

/* -- 
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list{
  width: 720px;
border: solid 2px red;
}
--- */

/* *** Viarete *** */

/* -- Website Seitenbreite (Lösung 1) --- */
body{
  max-width: 720px;
  margin:0 auto;
  overflow-y: scroll; /* Verhindert das Hin- und Her der Seite bei Menüechsel (Scrollbalken) */ 
  /*background-color: #fcfcfc;*/  /* Sehr helles Grau */
}


/* -- Website Beeinflusst die Seitenbreite im Bereich content --- */ 
body.wrapper-fluid .site-grid {
  grid-gap: 0 1em;
}

/* -- Website Seitenbreite -Lösung 2 -- !! Die ganze Website rutscht nach links
.container-header, .site-grid, .container-footer {
  width: 720px;
  margin: 0 auto;
}
--- */

/* -- Website Footer --- */
.footer {
  margin-top: 1em;
  color: grey;
  /*background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));*/
  background-image: none;
  background-image: unset;
  background-color: #B0E0E6;
  /*border: solid 3px blue;*/
max-heigth: 50 px;
}

/* *** Videoeinbettung ******************************************* */

/* -- Videoeinbettung responsiv machen  -- */
.hh-iframe-container-responsiv {
  position: relative;
  overflow: hidden;
  /*max-width: 800 px; Bringt nichts */
  /*width: 100%;*/
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.hh-iframe-responsiv {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* *** Videoeinbettung *** (Ende) **************************************** */


.hh-zitatrahmen{
  border: solid 1px grey;
  padding: 12px;
  background-color: #f6f6f6;
  word-wrap: break-word; /* Lässt zusammenhängenden Text (z.B. einen Link) fließen. */
}

/* *** container-header *************************** */

/* -- Header (ganze Seitenbreite) - Überschreibt den Standardhintergrund mit weiß */
/* -- Wichtig, wenn Seiten-Breite verkleinert wirdd- ggfs. die Hintergrundfarbe ändern -- */
.container-header {
 background-image: none;
background-color: white;
/* padding: 0px; keine Bedeutung */
/*margin-top: 4px; /* z.B. bei schmaler Ansicht */*/
/* border: solid 2px red;*/
}

/* -- Menü  Schriftfarbe -- */
.container-header .mod-menu{
  color: #0088cc; /* blau */
/*margin: 0px 0px 0px 0px;*/
/*padding: 0px 0px 0px 0px;*/
/* border: solid 1px green;*/
}

/*   */
.grid-child.container-nav{
/* border: solid 2px magenta; */
}

/*   */
.container-nav{
  background-color: #B0E0E6; /* hellblau*/
/*padding-bottom: 0px;*/
  margin-top: 2px;
  border-top-left-radius: 8px; /* z.B. bei schmaler Ansicht */
  border-top-right-radius: 8px; /* z.B. bei schmaler Ansicht */
  /* border: solid 2px blue;*/
}


/* -- Sorgt dafür, dass Suchen und Einloggen nebeneinander stehen -- */
.container-search {
  display: flex;
/*margin: 0px; Ohne Bedeutung */
/*padding:0px; Ohne Bedeutung */
/*border: solid 1px blue;*/
}

/* *** container-header (E) *************************** */


/* - Bloglayout - Einleitungssatz --- Erster Beitrag --- */
.com-content-category-blog__items.blog-items.items-leading {
  margin-top: 0px;
  margin-bottom: 3px;
/*border: dotted 2px red;*/
}

/* - Bloglayout - Einleitungssatz --- */
.com-content-category-blog__item.blog-item p {
  margin-top: 0px;
  margin-bottom: 1px;
/*border: solid 1px blue;*/
}

/* - Bloglayout -  Oberste Ebene - Reduziert den Abstand zwischen --- */
.com-content-category-blog__description.category-desc p{
  margin-top: 0px;
  margin-bottom: 3px;
  /*border: solid 1px blue;*/
}

/* - Bloglayout: Abstand zwischen den gelisteten (Beitrags-)Titeln+Einleitungssatz ---  */
.blog-items {
    grid-gap: 5px;    /*.5em;*/
/* border: solid 1px black;*/
} 


/* - Beitragskategorie-Layout - Einleitungssatz (K) - Abstand in Listenansicht */
.com-content-categories__description.category-desc p{
  margin-top: 0px;
  margin-bottom: 2px;
/*border: solid 2px black;*/
}


/* HH - Positioniert Titel und Bild -- Wird zweimal genutzt  -- */               
/* -- In: /com_content/category/blog_item.php       -- Betrifft: Beitrag Titel und Einleitungsbild -- */
/* -- In: /com_content/categories/default-items.php -- Betrifft: Kategorie Titel und Bild -- */
.hh-content-intro_image{
  float:left;
  padding-right:12px;
/*border: solid 1px red;*/
}

/* -- HH ---  */
/* --- HH Einleitungsbild | als Beitrag-css oder als div-css ---  */
.hh-einleitungsbild{
float: left;
margin: 6px 12px 0px 0px;
border-radius: 18px;
/*border: 1px solid blue;*/
/*padding 22px;*/
}

/* --- HH Beitragsbild links | als Beitrag-css oder als div-css ---  */
.hh-beitragsbild {
float: left;
margin: 6px 12px 0px 0px;
border-radius: 18px;
/*border: 1px solid red;*/
}


/* --- Beseitigt die untere Linie zwischen Beschreibung (K) und nächstem Titel (K) */
.com-content-categories__item{
  border: 0px;
/*margin: 0px; Ohne Bedeutung */
/*padding:0px; Ohne Bedeutung */
}

/* --- Allgemeines -------------------------------- */

/* Betrifft alle Titel außer Beitragstitel -- */
.com-content-categories__item-title {
  font-weight:bold;
  font-size:16px;
  /*border: solid 2px red;*/
}

/* Betrifft Seitenüberschrift -- */
h1 {
  font-size:16px;
  margin-top: 0px;
  margin-bottom: 2px;
  font-weight: bold;
}


/* Betrifft Beitragstitel -- */
h2 {
  font-size:16px;
  margin-top: 0px;
  margin-bottom: 2px;
  font-weight: bold;
}

/* Betrifft Titel "Unterkategorien" -- */
h3 {
  font-size:16px;
  margin-top: 0px;
  margin-bottom: 2px;
  font-weight: bold;
}

a:link, a:visited {
   text-decoration: none;
}

a:hover {
  background-color: #eee;
  border-radius: 6px;
  padding: 0px 6px 0px 6px;
  margin: none;
  color: #0088cc;
}

/* -- breadcrumb ---------------------------*/

.breadcrumb-item+.breadcrumb-item:before {
    content: var(--breadcrumb-divider,"|");
}


/* -- Diverses ------------------------------ */

/* -- Kategorientitel: etwas davor setzen 
.item-title::before {
  content: "!!!";
  display: inline-block;
  position: relative;
  top: calc(-0.1 * 1em);
  vertical-align: middle;
  height: calc(4px + 0.7em);
  margin-right: calc(5px + 0.2em);
  border-left: calc(5px + 0.1em) solid #01978c; 
} 
--- */