*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/*--------------------------------------------------------------
# Body Style
--------------------------------------------------------------*/
html,
body {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
}

body {
    position: relative; /* Wichtig für das Pseudo-Element */
    background: #ebf0f3;
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt horizontal */
    font-size: 16px;
    line-height: 1.7;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 1;
    overflow-y: auto; /* Aktiviert das Scrollen des Inhalts */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background: rgb(2,133,68);
background: linear-gradient(267deg, rgba(2,133,68,1) 0%, rgba(1,98,51,1) 100%);
    z-index: -1;
}

/* Zentriertes Container-Element */
.cont {
    display: flex;
    flex-direction: column; /* Ermöglicht vertikales Layout */
    align-items: center; /* Zentriert den Inhalt horizontal */
    width: 100%;
    max-width: 70em;
    padding: 1em;
    margin-top: 0; /* Stellt sicher, dass der Container oben startet */
    background-color: transparent;
    opacity: 0.9;
    z-index: 1;
}

/* Optional: Wrapper für zentrales Layout */
.wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}


/* bodoni-moda-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'BodoniModa';
  font-style: normal;
  font-weight: 400;
  src: url('../font/bodonimoda.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*--------------------------------------------------------------
# allgemeiner Style 
--------------------------------------------------------------*/
a {
    color: #fff;
    text-decoration: none;
}

a:link,
a:visited,
a:active {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color: #ccc;
}

:hover {
    transition: color 0.2s ease 0s
}

p {
    line-height: 1.61em;
    font-weight: 300;
    font-size: 1em
}

iframe {
    border: 0
}

article,
aside,
figure,
footer,
header,
hgroup,
section {
    display: block;
    /* hyphens */
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   
}

article.content
{
  text-shadow: 0 0 6px #555;  
}

input[type=checkbox],
input[type=radio] {
    vertical-align: baseline
}

span {
    font-style: inherit;
    font-weight: inherit
}

fieldset {
    border: none
}

.noborder {
    border:none
}

/*--------------------------------------------------------------
# Überschriften Style
--------------------------------------------------------------*/
h1,
h2,
h3 {
    font-weight: 400;
    font-family: 'BodoniModa';
    margin:0;
    opacity: 0.7;
    hyphens:none;
}

h1, #websitename {
    font-size: 2em;
    line-height: 1.3;
    margin-bottom: 1.25em;
}

h2 {
    font-size: 2em;
    line-height: 1.3;
    margin-bottom: 1.25em;
}

h3 {
    font-size: 1.625em;
    margin-bottom: 1.25em;
    line-height: 1.3em;
}

#websitename {
    font-size: 3.75em;
    font-weight: bold;
    text-shadow: 0 0 2px #fff,
        -1px -1px 0 hsl(80, 70%, 35%),
        -2px -2px 1px hsl(80, 70%, 35%),
        -2px -2px 2px hsl(80, 10%, 15%)
}
/*--------------------------------------------------------------
#  Syntax
--------------------------------------------------------------*/
hr {
    border: none;
    border-top: .111em #333 dotted;
    max-width: 100%;
    margin: .278em
}

.leftcontentimage {
    float: left;
    margin: 0.25em
}

.rightcontentimage {
    float: right;
    margin: 0.25em
}

.alignleft {
    text-align: left
}

.aligncenter {
    text-align: center
}

.alignright {
    text-align: right
}

.alignjustify {
    text-align: justify
}

.highlight {
    padding: .059em;
    background: #dd0000;
    color: #fff
}

.unorderedlist,
.orderedlist {
    margin-left: 1.471em
}
/*--------------------------------------------------------------
# tabelle
--------------------------------------------------------------*/
table.contenttable {
    width: 100%;
    height: auto;
    border: .059em solid #444444;
    border-collapse: collapse;
    padding: .294em
}

th.contenttable {
    border: .059em solid #444444;
    background: linear-gradient(to bottom, #444444, #fff);
    text-align: center;
    padding: .294em
}

td.contenttable1,
td.contenttable2 {
    border: .059em solid #444444;
    text-align: center;
    padding: .294em
}
/*--------------------------------------------------------------
# sitemap / # search results / # tableofcontents
--------------------------------------------------------------*/
.sitemap {
/*    padding: 0 0 .588em 0.778em */
}

.result-list-header {
    display: block;
	font-size: 1.8em;
    margin: 1.176em .882em .588em 0;
    padding-bottom: .118em;
    color: #212529;
    border-bottom: 1px #444444 solid
}

.result-list-item {
    padding-bottom: .294em;
    padding-left: 2.5em;
    list-style-type: none
}

.sitemap a, .searchmap a, .tableofcontents a {
    text-decoration: none;
    color: #212529
}

.sitemap a:hover, .searchmap a:hover, .tableofcontents a:hover {
    color: #30a5ff
}
/*--------------------------------------------------------------
# bilder
--------------------------------------------------------------*/
img {
    border: 1px solid #444444;
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 3px;
    -webkit-box-shadow: 3px 5px 8px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 5px 8px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 5px 8px 0px rgba(0, 0, 0, 0.75)
}

.contentimage {
    display: inline-block;
    max-width: 100%
}

span.imagesubtitle {
    display: block;
    font-size: .706em;
    color: #444444;
    line-height: .824em;
    text-align: center
}

img.leftcontentimage {
    max-width: 14.706em
}

span.leftcontentimage {
    float: left;
    max-width: 14.706em;
    margin: .235em .588em .588em 0
}

img.rightcontentimage {
    max-width: 14.706em
}

span.rightcontentimage {
    float: right;
    max-width: 14.706em;
    margin: .235em 0 .588em .588em
}
/*--------------------------------------------------------------
#  Gallery
--------------------------------------------------------------*/
.gallerymenu,
.gallerynumbermenu {
    display: block;
    text-align: center;
    padding: 0 10px 5px 10px
}

.gallerymenu,
.gallerynumbermenu>li {
    display: inline-block
}

.gallerytd {
    width: 200px; /* Festgelegte Breite */
    height: 200px; /* Festgelegte Höhe */
    overflow: hidden; /* Verhindert, dass das Bild überläuft */
    float: left; /* Lässt die Container nebeneinander schweben */
    margin-right: 10px;
    margin-bottom: 10px;
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zoomt das Bild, um den Container zu füllen */
}


/*--------------------------------------------------------------
# Searchfield
--------------------------------------------------------------*/
.searchform {
  width: 100%;
  position: relative;
  display: flex;
}

.searchtextfield {
  width: 100%;
  border: 2px solid #fff;
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: none;
  background-color:transparent;
}

.searchtextfield:focus{
  color: #000;
  background-color:#fff;
}

.searchbutton {
  width: 40px;
  height: 36px;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23000000' d='M13.22 14.63a8 8 0 1 1 1.41-1.41l4.29 4.29a1 1 0 1 1-1.41 1.41l-4.29-4.29zm-.66-2.07a6 6 0 1 0-8.49-8.49 6 6 0 0 0 8.49 8.49z'></path></svg>");
background-repeat: no-repeat;
background-position: center
}   
/*--------------------------------------------------------------
# Page Style
--------------------------------------------------------------*/
.header {
    padding: 1.25em;
    min-height: 15.625em;
    text-align: right;
    background: none;
    color: #212529;
    width:100%;
}

.header img {
    display: inline-block;
    box-shadow: none;
    border: none
}

.topBar {
    display: flex;
    background-color: #333
}

.main-row {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 120em;
    margin: 0 auto
}
/*--------------------------------------------------------------
# Sidebar / Nav Style
--------------------------------------------------------------*/
.side {
    height: 100%;
    min-width: 280px;
    margin: 0;
   /* padding: 1.25em*/
}

nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 1
}
# mainmenu {}
--------------------------------------------------------------*/
.mainmenu {
    margin: 0;
    padding: 0
}

.mainmenu-item {
    display: block;
    width: 100%;
    margin: 0
}

.mainmenu-item a {
    padding: 0.444em 0.889em;
    border-bottom: 1px solid #ebf0f3;
    text-decoration: none
    color:#fff;
}

.mainmenu-item a:hover {
        color: #73a7cf;
    
}

a.menu {
    display: none;
    /* display:block; für 1.Ebene*/
    color: #DD0000;
    text-decoration: none
}

a.menu:hover {
    color: #DD0000;
}

a.menuactive {
    display: none;
    /* display:block; für 1.Ebene*/
    font-weight: bold;
    color: #DD0000;
    text-decoration: none
}

a.menuactive:hover {
    color: #DD0000;
}
/*--------------------------------------------------------------
# submenu {}
--------------------------------------------------------------*/
ul.submenu {
    margin: 0em;
    padding: 0em;
}

li.submenu {
    margin: 0em;
    padding: 0em;
    list-style-type: none
}

a.submenu {
    display: block;
    color: #333;
}

a.submenu:hover {
    color: #000!Important;
    background-color:#fff;
    opacity: 0.5;
}

a.submenuactive {
    display: block;
    font-weight: bold;
    color: #000!Important;
    background-color:#fff;
    opacity: 0.7;
}

a.submenuactive:hover {
    color: #73a7cf;
}
/*--------------------------------------------------------------
# detailmenu {}
--------------------------------------------------------------*/
.detailmenu {
    margin: 0;
    padding: 0;
    margin-top:5em;
}

.detailmenu-item {
    width: 100%;
    margin: 0;
    padding: 0;
    padding-left: .625em;
    list-style-type: none
}

.detailmenu-item a {
    text-decoration: none;
    color: #fff;
}
/*--------------------------------------------------------------
# Hamburger Button Checkbox
--------------------------------------------------------------*/
.dropdown input[type=checkbox] {
    display: none
}
/*--------------------------------------------------------------
# Content Style
--------------------------------------------------------------*/
.main {
    flex: 3 1 0%;
    margin: 0;
    padding: 1.25em;
    /* overflow: hidden; */
}

.panel {
    height: 100% !important;
    min-height: 5em;
   /* background-color: #fff;*/
    border: .063em solid transparent;
    border-radius: .25em;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

}

.panel-body {
    /*padding: .625em;*/
    color:#fff;

}

.main .panel-body {
    padding: .625em;
 /*   min-height: 100vh */
}

.panel-heading {
    padding: .625em .938em;
    border-bottom: .063em solid transparent;
    border-top-left-radius: .188em;
    border-top-right-radius: .188em
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    color: inherit
}

.panel-title>a {
    color: inherit
}

.panel-footer {
    padding: .625em .938em;
    background-color: #f5f5f5;
    border-top: .063em solid #ddd;
    border-bottom-right-radius: .188em;
    border-bottom-left-radius: .188em
}
/*--------------------------------------------------------------
# Footer Style
--------------------------------------------------------------*/
.footer {
    padding: 1.25em;
    bottom: 0;
    text-align: center;
    /*background: #444444;*/
    color: #ffffff;
    width:100%;
    border-radius: .25em;
    font-size: 0.8em;
    opacity: 0.3;
}
/* -------------------------------------- */
/* ---------- max-width 768px ----------- */
/* -------------------------------------- */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px

    }

body::before {
    filter: blur(0px);
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.6); /* Hellere Überlagerung für leicht „verschwommene“ Optik */
    }




    .main-row,
    .navbar {
        flex-direction: column
    }

    .panel {
        min-height: 2.667em
    }

    h1 {
        font-size: 2.2em
    }

    h2 {
        font-size: 1.9em
    }

    h3 {
        font-size: 1.425em
    }

    .header h1 {
        font-size: 3.333em
    }
    
    .main
    {
      padding-top 1.25em;
      padding-left: 0;
      padding-right: 0;
      padding-bottom:1.25em;
        
    }
    
    .submenu, .submenuactive
    {
    font-size:large;
    }
    
    .detailmenu
    {
    margin-top:0.2em;
    }

article {
    font-size: 1.2em;
}


/*--------------------------------------------------------------
# Hamburger Button 
--------------------------------------------------------------*/
.side {
    position: absolute;
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 1s cubic-bezier(.325, 1, .22, 1);
}

.dropdown input[type=checkbox]:checked ~ .side {
    position: relative;
    height: auto;
    opacity: 1;
    max-height: 500px;
    transition: all 1s cubic-bezier(.5, 1, .22, 1)
}

.hamburger {
    display: block;
    position: absolute;
    top: 18px;
    right: 13px;
    height: 27px;
    width: 27px;
    cursor: pointer;
    transition: all 1s cubic-bezier(.19, 1, .22, 1)
    color:#fff;
    background-color:none;
}

.line {
    position: absolute;
    display: block;
    background: #ffffff;
    width: 22px;
    height: 3px;
    border-radius: 1px;
    left: 0;
    transition: all .6s cubic-bezier(.5, .1, 0, 1.2)
}

.line1 {
    top: 0
}

.line2 {
    top: 7px;
    width: 18px;
    transform: translateX(2px);
    -webkit-transform: translateX(2px)
}

.line3 {
    top: 14px
}

input[type=checkbox]:checked ~ label .line1 {
    top: 0px;
    width: 24px;
    transform: translateX(-11px) rotate(-45deg) translateY(12px)
}

input[type=checkbox]:checked ~ label .line2 {
    opacity: 0
}

input[type=checkbox]:checked ~ label .line3 {
    top: 14px;
    width: 24px;
    transform: translateX(-8px) rotate(45deg) translateY(-8px)
}
}
/* -------------------------------------- */
/* ---------- max-width 550px ----------- */
/* -------------------------------------- */
@media only screen and (max-width: 550px) {
    body {
        font-size: 14px
    }

    .header h1 {
        font-size: 2.857em
    }
}