div.leftelement
{
  padding: 0px 20px 0px 0px;
  margin: 0px;
    float: left;
  max-width: 600px;
}
div.rightelement
{
  padding: 0px 20px 0px 0px;
  margin: 0px;
  float: left;
  max-width: 600px;
}
.txtcorner{
padding: 20px;
  border: 1px #76b6e3 solid;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  margin-bottom: 30px;
}

div.main-bottom.card {
 border: none;
}
div.main-bottom.card .card-body {
  padding: 0px 0px 0px 0px;
  margin: 0px;
}
div.hellblau
 {
  background-color: #ceedfb;
  padding: 30px 15px 10px 30px;
border-radius: 30px;
  
}
div.hellblau1
 {
 /* background-color: #dff7eb; */ 
   background-color: #8ccdeb47;
  padding: 30px 15px 30px 30px;
  border-radius: 30px;
  float: left;
   margin-bottom: 40px;
}

.navbar-toggler {
font-size: 30px;
}

.container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
  color: rgb(11, 84, 123);
  text-decoration: none;
  position: relative;
}

.container-header .mod-list li.active > a {
  text-decoration: underline;
   color: /* rgb(20, 35, 90);*/ rgb(191, 5, 5);
}

.myButton {
	/* background:linear-gradient(to bottom, #9fb0cc 5%, #476e9e 100%);
	background-color:#9fb0cc;
	border-radius:28px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:12px 52px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
    margin-top: 20px; */
  background: linear-gradient(to bottom, #8dceec 5%, #0b4779 100%);
    background-color: rgba(0, 0, 0, 0);
  background-color: #7bbbdb;
  border-radius: 28px;
  border: 1px solid #124e7f;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 16px;
  padding: 10px 40px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #0c487a;
  margin-top: 20px;
}
.myButton:hover {
	/* background:linear-gradient(to bottom, #476e9e 5%, #9fb0cc 100%);
	background-color:#476e9e; */
  color:#ffffff;
}
.myButton:hover {
	background:linear-gradient(to bottom, #0b4779 5%, #8dceec 100%);
	background-color:#7bbbdb; 
  color:#ffffff;
}
.myButton:active {
	position:relative;
	top:1px;
}

        
.roundcorner {
  -webkit-border-radius:30px;
  -moz-border-radius: 30px;
  border-radius:30px;
  float: right;
}
.roundcorner1 {
  -webkit-border-radius:30px;
  -moz-border-radius: 30px;
  border-radius:30px;
}
.main-top.card.roundcorner img {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
.stepitem
 {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex:none;  
   flex-direction: row;
  flex-wrap: nowrap;
  gap: 36px;
  height: min-content;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.txt {
padding-top: 0px;
  margin-top: -30px;
}
.dot {
  aspect-ratio: 1 / 1;
  background-color: var(--token-8455157c-421a-4745-98ee-2ec3d82404f4, #aac3e1);
  border-radius: 4px;
  flex: none;
  height: var(--framer-aspect-ratio-supported, 18px);
  overflow: hidden;
  position: absolute;
  width: 18px;
  will-change: var(--framer-will-change-override, transform);
}
.Sideline {
background-color: #aac3e1;
  flex:1 0 0px;
  height: 100%;
  overflow:auto;
  position: absolute;
  width: 1px;
  left: 8px;
}
.card-body {
  padding:0px 0px 25px 0px;
  margin:0px;
}
.main-top.card {
  background: #fff;
   padding:0px;
  margin:0px;
  border: none;
}


.main-top card p {
  padding:0px;
  margin:0px;
}


/* Grundsätzliche Template Farben und Einstellungen */

:root {
--cassiopeia-color-primary: #3e8ed0;
  --cassiopeia-color-link: #345588;
  --cassiopeia-color-hover: #477499;
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 500;
    --cassiopeia-font-weight-normal: 400;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
/* Schriftgrösse und Farbe */
    --body-font-size: 1.2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #575555;
    --body-bg: #ffffff;
}


/* Schrift  */

body {
      font-family: 'Roboto', sans-serif;
}

/* Der Seitenkopf  */

.header {
  background: #FFFFFF;
}
.container-header .mod-menu {
  color: #ae5454;
  list-style: none;
}
.container-header .navbar-brand img {
  max-width: 300px;
  height: auto;
}
/* Das Dropdown-Menu im Menu  .metismenu.mod-menu .mm-collapse ein */

.metismenu.mod-menu .mm-collapse {
  background: #475BAF;
}

/* Die Links im Dropdown Menu   */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #000;
}

/* 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.borderblue {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background: none; 
/*  border: 2px solid #c1dafb;
   border-radius: 15px;  */
}
.card.borderblue .card-header
{
  background: none;
    border: 0px ;
/*    border-radius: 15px;
  padding-top: 15px;  */
}

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

.main-top.card {
   background: #fff;
}


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

h1 {
  color: rgb(54, 54, 54);
/*   text-shadow: 2px 2px 8px rgba(150, 150, 150, 1); */
/*   color: rgba(119,9,121,1);*/
}
 h1, .h1 {
   /* text-align: center; */
    margin-bottom: 20px;
   font-size: 2.65rem;
  }
h1.left {
  text-align: left;
  margin-bottom: 20px;
  font-size: 2.65rem;
}
h2 {
  color: rgb(7, 25, 89);
font-size: 2.55rem;
  font-weight: 400;
}
h3 {
color: rgb(20, 35, 90);
  font-size: 1.30rem;
  font-weight: 500;
}
div.item-content h6, div.item-content .h6 {
color: rgb(20, 35, 90);
  font-weight: 400;
  line-height: 2.5;
}

/* 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: rgba(119,9,121,1);
}

/* 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: rgba(0,212,255,1);
} 

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


.rechts.item-image {
  border: 1px solid #aebed6;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
  float: right;
  margin-left: 20px;
}
.rechts.item-image img {

-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
  float: right;
}

/*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 {
 /*    background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); */
background: ffffff;
}

.com-content-category-blog.blog .blog-item {
  flex-direction: column;
  padding: .5em .5em 1em;
  display: flex;
  overflow: hidden;
/*  border: 2px solid #c1dafb;
  border-radius: 15px;  */
}
.com-content-category-blog__items.blog-items.items-leading .blog-item{
  border: none;
}