html{
overflow-x: hidden;
}
 /*  CLASSIC BANNER */
.container-banner .banner-overlay {
    height: max(300px, 50vh);
}
@media (min-width: 768px) {
    .container-banner .banner-overlay {
        height: max(300px, 45vh);
    }
}
@media (min-width: 992px) {
    .container-banner .banner-overlay {
        height: max(300px, 40vh);
    }
}
@media (min-width: 1200px) {
    .container-banner .banner-overlay {
        height: max(300px, 35vh);
    }
}

:root {
	--cassiopeia-font-family-body: "Segoe Print", sans-serif;
    --cassiopeia-font-family-headings: "Segoe Print", sans-serif;
	--cassiopeia-color-link: #ffffff;
	--cassiopeia-color-hover: #1D7989;
}

	
.back-to-top-link {
        color: #888888 !important;
    }

/* Das Dropdown-Menu im Menu färbst du mit der Klasse .metismenu.mod-menu .mm-collapse ein */

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

/* Die Links im Dropdown Menu musst du dann auch einzeln ansteuern */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #000000;
}

/* Die Links im Dropdown Menu musst du dann auch einzeln ansteuern */
.metismenu.mod-menu .mm-collapse .metismenu-item a:hover {
    font-weight: bold;
	color: #1D7989;
}

@font-face { font-family: 'Segoe Print'; src: url('../font/segoe_print.eot'); src: url('../font/segoe_print.eot?#iefix') format('embedded-opentype'), url('../font/segoe_print.svg#Segoe Print') format('svg'), url('../font/segoe_print.woff') format('woff'), url('../font/segoe_print.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Honey Script Light'; src: url('../fonthoney/honey_script_light.eot'); src: url('../fonthoney/honey_script_light.eot?#iefix') format('embedded-opentype'), url('../fonthoney/honey_script_light.svg#Honey Script Light') format('svg'), url('../fonthoney/honey_script_light.woff') format('woff'), url('../fonthoney/honey_script_light.ttf') format('truetype'); font-weight: normal; font-style: normal;}

body{
	 background-color: transparent;
      font-family: 'Segoe Print', sans-serif;
      font-size: 1.10rem;	  
}
h1 {
   font-family: 'Segoe Print', normal;
	   font-size: 2.30rem;
	   color: #fff;
	 }
h2 {
   font-family: 'Segoe Print', normal;
	   font-size: 1.30rem;
	   color: #fff;
	 }
h3 {
   font-family: 'Segoe Print', normal;
	   font-size: 0.90rem;
	   color: #fff;
	 }
h4 {
   font-family: 'Segoe Print', normal;
	   font-size: 1.70rem;
	   color: green;
	 }
h5 {
  color: midnightblue;
  background-color: white;
  border: 1px solid;
  margin: 0;
  padding: 0;
	 }
h6 {
   font-family: 'Segoe Print', normal;
	   font-size: 1.00rem;
	   font-weight: bold;
	   color: orange;
	 }
	 
.weiss {
  color: green;
}

.weiss strong {
	 color: #3b3b3b;
	 font-style: italic;
}

.writing1 {
	font-family: 'Shadows Into Light', normal;
	   font-size: 2.900rem;
	   color: #D7A676;
	   font-style: italic;
	 }

.writing2 {
	font-family: 'Honey Script Light', normal;
   font-size: 2.900rem;
   color: #D7A676;
}

.writing4 {
	 font-family: 'Segoe Print', normal;
	   font-size: 1.10rem;
	   color: green;
	 }

.bannerbox {
  width: auto;
  color: green;
  background-color: #AFCBD1;
  border:  2px solid red;
  border-radius: 0 1em 1em 0;
  margin:  10px auto;
  padding: 2em;
}
	 
 .box {
  width: auto;
  color: orange;
  background-color: lightyellow;
  border:  2px solid red;
  border-radius: 1em 11em 3em 1em;
  margin:  10px auto;
  padding: 2em;
}
	 
.rundcontainer {
	border-radius: 15px; /* Hier kannst du den Wert anpassen, um die Rundung zu ändern */
    border: 3px solid #888; /* Optional: Eine Rahmenfarbe hinzufügen */
	background-color: #fff; /* Optional: Hintergrundfarbe hinzufügen */
  padding: 10px;
  width: 90%;
  height: auto;
  overflow: hidden;
}

 .header {
    background: #AFCBD1;
	 background-image:  linear-gradient(135deg, orange 5%, #AFCBD1);
}
	
  /*  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
*/

/* .header {
     background-image: url('../images/doppelfuss-gross.jpg');
	/* background: #F8F8FF; */
}
*/

.offcanvas.show {
background-color: #1D7989;
/* background-color: var(--cassiopeia-color-primary-thead); */
}
.offcanvas-header > *:only-child {
margin-left: auto;
}

.boxer {
  width: auto;
  color: green;
  background-color: lightyellow;
  border:  2px solid red;
  border-radius: 0 1em 1em 1em;
  margin:  5px;
  padding: 5px;
  display: inline-block;
}

.freeform {
	width: auto;
	font-weight: bold;
    color: orange;
	border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
	background-color: lightyellow;
	border:  3px solid green;
	margin:  7px;
    padding: 3px;
    display: inline-block;
/*	width:200px;
	height:200px; */
}

.freebox {
	width: auto;
	font-weight: bold;
    color: orange;
	border-radius : 10px 25% 20px;
	background-color: lightyellow;
	border:  3px solid red;
	margin:  3px;
    padding: 3px;
    display: inline-block;
}

.freecontainer {
	width: auto;
    color: green;
	border-radius : 10px 25% 20px;
	background-color: lightyellow;
	border:  2px solid red;
	margin:  5px;
    padding: 5px;
    display: inline-block;
}

/* First the Grid 
.galerie-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 0.5rem;
  justify-items: left;
  margin: 0;
  padding: 0;
}
*/
/* The Picture Frame #ffdd00; 
.galerie-frame {
  padding: .3rem;
  font-size: 1.2rem;
  text-align: center;
  background-color: #9ACCFF;
  color: #000000;
}
*/

/*
.galerie-frame {
  color: green;
  background-color: lightyellow;
  border:  2px solid red;
  border-radius: 0 1em 1em 1em;
 /* margin:  10px auto; */
/*  padding: .3rem;
  font-size: 1.2rem;
 }
 */
 
/* The Images 
.galerie-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.galerie-img:hover {
  opacity: .7;
}
*/

.grid {
	--columns: 7;
	--gaps: calc(var(--columns) - 1 );
	--space: calc(100% - var(--gaps) * var(--unit));
	--columnWidth: calc(var(--space) / var(--columns));
	display: flex;
	flex-wrap: wrap;
	gap: var(--unit);
}

.cell {
	width: var(--columnWidth);
	height: 50px;
	background-color: var(--me-color);
}

.foxer {
  width: auto;
  color: green;
  background-color: lightyellow;
  border:  2px solid red;
  border-radius: 0 1em 1em 1em;
  margin:  5px;
  padding: 5px;
  display: inline-block;
}

.fox {
  width: 290px;
  height: auto;
  background-color: black;
  /* Startzustand: leichte Rundung */
  border-radius: 30px;
  /* Animation definieren */
  transition: border-radius 0.5s ease-in-out;
}

.fox:hover {
  /* Zielzustand: kreisrund */
  border-radius: 50%;
}

.footer, [dir=rtl] .footer{
color: var(--cassiopeia-color-text-footer);
background-color: transparent;
background-image: none;
background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-footer) 0%, var(--cassiopeia-color-hover-footer) 100%);
}

.mod-footer {
background-color: transparent;
text-align: center;
}

@media (min-width: 360px) {
	html::before {
    content: ' ';
    display: block;
 /* hier den Pfad zu deinem Hintergrundbild einsetzen */
    background-image: url(../images/wellenreiter.jpg);
 /*   background: #1D7989; */
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* Das hier ist sehr wichtig! */
}

html, body {
height:100%;
 background-attachment: scroll;
}
}
/* Media Query - CSS */
@media (max-width: 575.98px) {
.image-alternate.image-left .blog-item:nth-of-type(2n+1) .item-image {
margin-right: 0;
margin-left: 0;
order: 0;
}
.container-top-c > .card, .container-top-c > .card:last-child{
padding: 80px 0;
}
}

@media (min-width: 576px) {
	html::before {
    content: ' ';
    display: block;
    /* hier den Pfad zu deinem Hintergrundbild einsetzen */
      background-image: url(../images/wellenreiter.jpg);
 /*   background: #1D7989; */
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* Das hier ist sehr wichtig! */
}

html, body {
height:100%;
 background-attachment: fixed;
}
}
@media (min-width: 768px) {
	html::before {
    content: ' ';
    display: block;
    /* hier den Pfad zu deinem Hintergrundbild einsetzen */
      background-image: url(../images/wellenreiter.jpg);
 /*   background: #1D7989; */
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* Das hier ist sehr wichtig! */
}

html, body {
height:100%;
 background-attachment: fixed;
}
}
@media (max-width: 991.98px) {
.offcanvas .metismenu.mod-menu .metismenu-item > ul {
position: relative;
width: 100%;
margin-top: 1rem;
box-shadow: none;
}

@media (min-width: 992px) {
	html::before {
    content: ' ';
    display: block;
    /* hier den Pfad zu deinem Hintergrundbild einsetzen */
      background-image: url(../images/wellenreiter.jpg);
 /*   background: #1D7989; */
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* Das hier ist sehr wichtig! */
}

html, body {
height:100%;
 background-attachment: fixed;
}

@media (min-width: 1200px) {
h3, .h3 {
font-size: 1.3rem;
html::before {
    content: ' ';
    display: block;
    /* hier den Pfad zu deinem Hintergrundbild einsetzen */
      background-image: url(../images/wellenreiter.jpg);
 /*   background: #1D7989; */
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* Das hier ist sehr wichtig! */
}

html, body {
height:100%;
 background-attachment: fixed;
}

}