.slideshow-container {
            width: 100%;
            height: 96%;
			
			border-radius: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .dots {
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
            text-align: center;
        }
        
        .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: rgba(255, 255, 255, 0.6); /* Weiß mit 70% Deckkraft */
            border: 2px solid rgba(97, 115, 133, 1); /* #617385 mit 70% Deckkraft */
            border-radius: 50%;
            cursor: pointer;
        }
        
        .dot.active {
            background-color: rgba(97, 115, 133, 0.7); /* #617385 mit 90% Deckkraft */
            border-color: rgba(97, 115, 133, 1); /* #617385 mit 90% Deckkraft */
        }
        
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 10px;
            background: rgba(0,0,0,0.3);
            border: none;
            z-index: 10;
        }
        
        .next {
            right: 0;
        }



body { 
			overflow: hidden;
			font-family: "Open Sans", sans-serif;
		}
a {text-decoration: none; color: #617385;}
h1 {  margin: 0px; padding: 0px; font-size: 200%;}
        #map {
            width: 97%;
			height: 97%;  
        }
tr{
font-weight: 300;
font-size: 180%; 
}
td{
font-weight: 200;
font-size: 80%; 
}
li{
font-weight: 400;
font-size: 180%; 
padding-left: 15px; /* Innenabstand */
}
li::marker {
  color: #617385;
}
.left-float {
  float: left;
}
.right-float {
  float: right;
}

@font-face {
  font-family: 'Italianno';
  font-style: normal;
  font-weight: 400;
  src: url(https://was-geht-ruegen.de/layout/Italianno.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://was-geht-ruegen.de/layout/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.image-container {
  width: 500px; /* Breite des Containers */
  border: 2px solid #617385; /* Rahmen */
  border-radius: 10px;
  padding: 5px; /* Innenabstand */
  margin: 5px;
}

.image-container img {
  max-width: 100%; /* Bild passt sich an Container an */
  height: auto; /* Seitenverhältnis beibehalten */
  display: block; /* Bild wird als Blockelement behandelt */
  margin: 0 auto; /* Bild zentriert */
  border-radius: 10px;
}

.image-description {
  text-align: center; /* Text zentriert */
  margin-top: 10px; /* Abstand vom Bild */
  font-weight: 200; 
  font-size: 80%;
  color: #617385;
}
.article01{
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
font-weight: 100; 
font-size: 150%;
}
.article01 title{
color: #617385;
font-weight: 400; 
font-size: 180%;
}
.article01 span{
font-weight: 400;
font-size: 130%; 
}
.grid_shadow{
border-radius: 10px;

}

.grid_main00 {
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  
  grid-template-rows: 12% 40% 40% 8%;
  grid-template-columns: 13% 12% 13% 12% 12% 13% 12% 13%;
 
  grid-template-areas:  
    "nav01 head02 head02 head02 head02 head02 head02 head03"
	"nav01 middle01 middle01 middle02 middle02 middle03 middle03 middle03"
	"nav01 middle01 middle01 middle02 middle02 middle03 middle03 middle03"
    "bottom01 bottom01 bottom02 bottom02 bottom03 bottom03 bottom04 bottom04" 
}
.grid_ortschaft {
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  
  grid-template-rows: 12% 40% 40% 8%;
  grid-template-columns: 13% 12% 13% 12% 12% 13% 12% 13%;
 
  grid-template-areas:  
    "nav01 head02 head02 head02 head02 head02 head02 head03"
	"nav01 middle01 middle01 middle01 middle02 middle02 middle03 middle03"
	"nav01 middle01 middle01 middle01 middle02 middle02 middle04 middle04"
    "bottom01 bottom01 bottom02 bottom02 bottom03 bottom03 bottom04 bottom04" 
}
.grid_article {
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  
  grid-template-rows: 12% 40% 40% 8%;
  grid-template-columns: 13% 12% 13% 12% 12% 13% 12% 13%;
 
  grid-template-areas:  
    "nav01 head02 head02 head02 head02 head02 head02 head03"
	"nav01 middle01 middle01 middle01 middle01 middle01 middle02 middle02"
	"nav01 middle01 middle01 middle01 middle01 middle01 middle03 middle03"
    "bottom01 bottom01 bottom02 bottom02 bottom03 bottom03 bottom04 bottom04" 
}
.head01 {
grid-area: head01;
margin-bottom: 0px;
padding: 0px;
background-color: #ffffff;
}
.head02 {
grid-area: head02;
margin-bottom: 0px;
padding-left: 3%;
background-color: #ffffff;
color: #000000; 
font-weight: bold; 
font-size: 130%;
text-align: left;
}
.head03 {
grid-area: head03;
margin-bottom: 0px;
padding: 0px;
background-color: #ffffff;
}
.nav01 {
grid-area: nav01;
margin: 0px;
padding: 0px;
overflow: auto;
background-color: #ffffff;
}
.middle01 {
grid-area: middle01;
width: 100%;
height: 100%;  
margin: 0px;
padding: 0px;
overflow: hidden;
position: relative;
background-color: #ffffff;
}
.middle02 {
grid-area: middle02;
margin: 0px;
padding: 0px;
overflow: auto;
background-color: #ffffff;
}
.middle03 {
grid-area: middle03;

margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #ffffff;
}
.middle04 {
grid-area: middle04;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #ffffff;
}
.bottom01 {
grid-area: bottom01;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.bottom02 {
grid-area: bottom02;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.bottom03 {
grid-area: bottom03;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.bottom04 {
grid-area: bottom04;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}







.navbar {
  width: 100%;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
   position: relative;
   transform: translate(-150%);
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 60px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
 
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 0px;
  right: 35px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}