@font-face {
    font-family: Arial;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Arial.ttf'); /* IE9 Compat Modes */
    src: local('Arial'),
         
         url('../fonts/Arial.ttf') format('truetype'), /* Safari, Android, iOS */
         
  }
body {
margin: 0!important;
width:100vw;
min-height:100vh;
background-image: url('../img/23oW.jpg');
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
background-attachment: fixed; 
text-align:center;
font-family:arial;
}
h1 {
text-align:center;
color:#ffffff;
font-size:4vw;
font-family: 'Arial';
margin:0!important;
margin-top:3vh!important;
text-shadow: 0 -1px 1px #000000, 0 1px 1px #1f43a5;
font-weight:bold!important;

}
h2 {
text-align:center;
color:#ffffff;
font-size:3vw;
font-family: 'Arial';
margin-top:0.5vh;
font-weight:bold!important;
}
h3 {
font-size:3.5vw;
}
h4 {
font-size:2.5vw;
}
h5 {
font-size:1vw;
}
#facebook {
position:absolute;
right:8vw;
top:5vh;
width:2%;
height:auto;
border-radius:45%;
}
#facebookkontakt {
width:5%;
height:auto;
vertical-align:middle;
}
#mbmcookie {position: fixed; bottom: 0; background: black; color:white; padding: 20px;font-size: 14px; font-family: verdana;width:98vw;height:auto;border:1px solid white;border-radius:7px;box-shadow:inset 0 0 10px 0 gray;}

#mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; margin-bottom:2px;border-radius: 5px;border:1px solid white; font-weight: bold; float: right;}

#mbmcookie a.button:hover {background-color: black;color:white;border:1px solid white}

#mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;color:white;}
#logo_adresse {
width:11vw!important;
height:auto;
}
#mobile_galery {
display:none!important;
}
.figure figcaption {
font-size:2vw;
}
.topnav {
background-color: #1f43a5;
overflow: hidden;
width:85%;
margin-left:auto;
margin-right:auto;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
text-align: center;
padding: 0.6vw 0.8vw;
text-decoration: none;
font-size: 1.2vw;
width:8vw;
color:white;
}

/* Add an active class to highlight the current page */
.active {
background-color: white;
color: black!important;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 1.4vw;
border: none;
outline: none;
color: white;
padding: 0.6vw 0.8vw;
background-color: inherit;
font-family: inherit;
margin: 0;
width:8vw;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 0.6vw 0.8vw;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover {
width:8vw;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
width:10vw;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
#logo_startseite {
width:20%;
height:auto;
}
#logo {
text-align:center;

}
#logo img {
width:50%;
height:auto;
}

#limesserver {
text-align:center;

}
#limesserver img {
width:50%;
height:auto;
}
#alles {
width:100vw;
text-align:center;
}
#oben {
width:110vw;
height:auto;
margin-top:2vh;
}
#links {
width:15%;
height:10vh;
position:absolute;
top:0;
left:0;
}
#links img {
width:100%;
height:auto;
}
#telefon {
width:auto;
position:absolute;
left:20vw;
top:3vh;

}

#seite {
width:100vw;
text-align:center;
min-height:40vh;

}
#galerie {
width:90%;
height:30vh;
text-align:center!important;
margin-left:17%;
margin-right:auto;
margin-bottom:2vh;

}
#galerie img {
height:90%;
width:80%;
border-radius:30%;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
.startseite {
float:left;
width:10%;
height:60%;
margin:1vw;


}
.startseite figcaption {
color:white;
font-weight:bold;
font-size:1.5vw;
}
.startseite {
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-o-transition: transform 0.8s;
-ms-transition: transform 0.8s;
}
.startseite:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
}
.figure img {
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-o-transition: transform 0.8s;
-ms-transition: transform 0.8s;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;

}
.figure img:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
}
#rechts {
font-size:2vw;
margin-right:auto;
margin-left:auto;
}
#rechts img {
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-o-transition: transform 0.8s;
-ms-transition: transform 0.8s;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;

}
#rechts img:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
}
#linksbild {
font-size:2vw;
margin-left:auto;
margin-right:auto;
}
#linksbild img {
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-o-transition: transform 0.8s;
-ms-transition: transform 0.8s;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;

}
#linksbild img:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
}
#begruessung {
width:68vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:1.3vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#begruessung_kontakt {
width:68vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:1.9vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#begruessung_startseite {
width:68vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:1.3vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#begruessung_ueberuns {
width:68vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:1.3vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#begruessung ul {
text-align:left;
}
#maps {
width:80%;
height:50%;
margin-top:5vh;
margin-left:auto;
margin-right:auto;
margin-bottom:5vh;
}
iframe {
height:100%;
width:100%;
}
table {
width:45vw;
color:white;
margin-left:auto;
margin-right:auto;
font-size:1.4vw;

}
.bezeichnung {
font-size:1.4vw!important;
}
table td {

font-size:1.4vw;
padding:1vw;
text-align:left;
text-shadow:2px 2px 2px #0A0A0A;

}
table td a {
color:rgba(255,255,255,.7);
text-decoration:none;
text-shadow:2px 2px 2px #0A0A0A;

}
optgroup {
background-color: pink;
}

select {
width: 18vw; 
font-size:1.4vw;
font-family: inherit;
font-weight: 300;
border-radius:5px;
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea { 

font-family: inherit;
font-weight: 200;
width: 100%; min-width: 100%; 
box-sizing: border-box;
padding: 0.3vw;
outline: none;
border-radius:5px;
font-size:1.4vw;
}
input[type="submit"] {
padding: 5px 12px; 
font-family: Roboto, sans-serif;
font-weight: 300;
font-size:1.4vw;
color: white;
border: 1px solid silver;
background-color:green;
border-radius: 20px;
}

input[type="submit"]:hover {

cursor:pointer;
color:green;
background-color: white;
}
#unterstrichen {
text-decoration:underline;
font-size:1.5vw;
}
#impressum {
font-size:1.5vw;
color:white;
}
#Nachrichten {
font-size:2.0vw;
color:#ffffff;
font-weight:bold;
}
#impressum a {
color:white;
text-decoration:none;
}
a active {
color:black;
}
a {
color:black;
font-weight:bold;
}
#grid_container {
width:100%;
display:grid;
margin:0!important;
grid-template-columns: 33% 33% 33%;
}
.grid_item {
text-align:center;
height:auto;
padding:2.5vw;
vertical-align:middle;
}

#partner_text {
text-align:left!important;
height:60vh;
}
.figure {
width:23%;
height:auto;
display:inline-block;
}

.accordion {
margin: 10px;
padding: 15px;
display: flex;
width: 80%;
max-width: 1440px;
height: 15rem;
}

.accordion-item {
height: 100%;
border-radius: 1rem;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
flex: 1;
transition: flex 600ms cubic-bezier(0.25, 0.4, 0.45, 1.4);
}

.accordion-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}

.accordion-item:hover {
flex: 4;

}


@media only screen and (max-width: 1023px) {

h1 {
font-size:8vw;
margin-top:5vh!important;
text-shadow: none;
font-family: 'Arial'!important;
}
h2 {
font-size:5vw;
font-family: 'Arial'!important;


}
h3 {
font-size:5vw;
}
h4 {
font-size:4vw;
}
#facebook {
position:absolute;
right:5vw;
top:8vh;
width:10%;
height:auto;
}
#oben {
width:100vw;
height:10vh;
margin-top:2vh;
}
#logo_adresse {
height:10vh!important;
}
.figure {
width:60%;

}
#grid_container {
width:100%;
display:block;

}
.grid_item {
text-align:center;
height:auto;
padding:2.5vw;
}
.figure figcaption {
font-size:3vw!important;
}
figcaption {
font-size:3vw;
}
.active {
background-color:#1f43a5;
color:white!important;
}
.dropdown-content {
color:white!important;
background-color:#1f43a5;
}
.dropdown-content a {
color:white!important;
padding:1vw;
}
.dropdown-content a:active {
background-color:#1f43a5!important;
}
.topnav {
width:100vw;
height:auto;

}
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a {
font-size:5vw;
}
.topnav a.icon {
float: right;
display: block;
font-size:3vw;
padding:1vw!important;

}
.icon {
position:absolute!important;
top:0!important;
right:0!important;
font-size:6.5vw!important;
background-color:#1f43a5;
color:white!important;
padding-top:1vh!important;
border: 1px solid black;

}
/* Vollbreite für das responsive Menü */
.topnav.responsive {
    position: relative;
    width: 100vw;             /* volle Viewport-Breite */
    left: 0;                  /* sicherstellen, dass es links startet */
    background-color: #1f43a5;
    z-index: 999;
}

/* Alle Links im Menü */
.topnav.responsive a {
    display: block;
    width: 100%;              /* volle Breite */
    box-sizing: border-box;   /* Padding wird mit einbezogen */
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #555;
    background-color: #1f43a5;
    color: white;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left;
padding-top:1vh!important;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
font-size:5vw;
font-weight:bold;
}

#links {
display:none;
}



#begruessung {
margin-top:5vh;
width:90vw;
font-size:3.5vw;
padding-left:2vw;
padding-right:2vw;

}
#begruessung_startseite {

width:90vw;
font-size:3.5vw!important;
padding-left:2vw;
padding-right:2vw;
width:90vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:1.3vw;
padding-top:3vh;
padding-bottom:3vh;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#unterstrichen {
font-size:4.5vw;
}
#galerie {
display:none;
}
#impressum {
font-size:3.5vw;
}
table {
width:90%;
color:white;
margin-left:auto;
margin-right:auto;
font-size:3.5vw;

}

.bezeichnung {
font-size:3.5vw!important;
}
table td {

font-size:3.5vw;
padding:1vw;
text-align:left;
text-shadow:2px 2px 2px #0A0A0A;

}
table td a {
color:rgba(255,255,255,.7);
text-decoration:none;
text-shadow:2px 2px 2px #0A0A0A;

}
optgroup {
background-color: pink;
}

select {
width: auto; 
font-size:3.5vw;
font-family: inherit;
font-weight: 300;
border-radius:5px;
}
#telefon {
position:absolute;
left:10vw!important;
top:5vh!important;

}
input[type="text"],
input[type="email"],
input[type="search"],
textarea { 

font-family: inherit;
font-weight: 200;
width: 100%; min-width: 100%; 
box-sizing: border-box;
padding: 0.3vw;
outline: none;
border-radius:5px;
font-size:3.5vw;
}
input[type="submit"] {
padding: 5px 12px; 
font-family: Roboto, sans-serif;
font-weight: 300;
font-size:3.5vw;
color: white;
border: 1px solid silver;
background-color:green;
border-radius: 20px;
}

input[type="submit"]:hover {

cursor:pointer;
color:green;
background-color: white;
}
#logo img {
width:50vw;
height:auto;
}
#logo a {
font-size:3.5vw;
}
#begruessung_kontakt {
width: 100vw;
margin-top:5vh;
background:#1f43a5;
color:white;
font-size:3vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#begruessung_umgebung {
margin-top:5vh;
width:90vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:3vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#begruessung_partner {
margin-top:5vh;
width:90vw;
background:#1f43a5;
color:white;
margin-right:auto;
margin-left:auto;
font-size:3vw;
padding-top:3vh;
padding-bottom:3vh;
padding-left:2vw;
padding-right:2vw;
font-weight:bold;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
}
#limesserver img {
width:50vw;
height:auto;

}
#limesserver a {
font-size:3.5vw;
}
#danke {
margin-top:40vh;
}
#fehler {
margin-top:40vh;
}
#maps {
width:70%;
height:20%;
margin-top:5vh;
margin-left:auto;
margin-right:auto;
margin-bottom:5vh;
}
iframe {
width:100%;
height:100%;
}
.startseite figcaption {
display:none;
}
.startseite {
display:inline-block;
}
.startseite img {
border-radius:0!important;
height:100%!important;
width:auto!important;
}
#rechts {
float:none;
text-align:center;
}
#rechts img {
margin-left:auto;
margin-right:auto;
}
#rechts figcaption {
font-size:5vw!important;
}
#linksbild {
float:none;
text-align:center;
}	
#linksbild img {
margin-left:auto;
margin-right:auto;
}
#linksbild figcaption {
font-size:5vw!important;
}
#video {
width:100%;
height:30vh;
}

#mobile_galery {
width:100%;
display:block!important;
text-align:center;
margin-top:5vh;
}	
#mobile_galery img {
width:95%;
height:auto;
border-radius:50%;
}

/* Standardwerte für große Bildschirme */
.accordion {
margin: 10px;
padding: 15px;
display: flex;
width: 80%;
max-width: 1440px;
height: 15rem;
overflow: hidden; /* Verhindert Scrollen bei Hover */
}

.accordion-item {
height: 100%;
border-radius: 1rem;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
flex: 1;
transition: flex 600ms cubic-bezier(0.25, 0.4, 0.45, 1.4);
position: relative; /* Um das Bild korrekt zu platzieren */
overflow: hidden;
}

.accordion-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
}

.accordion-item:hover {
flex: 4;
}

/* Responsive Verhalten für Tablets (max-width: 768px) */
@media (max-width: 768px) {
.accordion {
height: 12rem; /* Geringere Höhe für Tablets */
}
.accordion-item {
flex: 1; /* Flex bleibt erhalten, aber die Höhe wird reduziert */
}
}

/* Responsive Verhalten für Smartphones (max-width: 480px) */
@media (max-width: 480px) {
.accordion {
height: 10rem; /* Noch kleinere Höhe für Smartphones */
}

.accordion-item {
flex: 1; /* Keine Änderung im Layout, nur die Höhe wird angepasst */
}
}

.accordion-item:hover {
flex: 10; /* Weniger starkes Wachstum auf kleineren Bildschirmen */
}


/* Stil für das Dropdown-Menü */
.dropdown {
position: relative;
display: inline-block;
}

/* Das Dropdown-Menü ist standardmäßig versteckt */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;  /* Sicherstellen, dass Dropdown sichtbar ist */
left: 0;  /* Positionierung rechts neben dem Menüpunkt */
top: 0;
margin-left: 0px; /* Abstand vom Hauptlink */
}

/* Links im Dropdown-Menü */
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
color: black;
}

/* Hover-Effekt für Links im Dropdown */
.dropdown-content a:hover {
background-color: #ddd;
}

/* Dropdown-Button, wenn angeklickt (optional) */
.dropdown-toggle:focus {
outline: none;
}

/* Sicherstellen, dass Hauptlink sichtbar bleibt */
.dropdown-toggle {
z-index: 2;
}

}

@media screen and (max-width: 600px) {
  /* Alle Menüeinträge ausblenden */
  .topnav a {
      display: none;
  }

  /* Hamburger-Icon sichtbar machen */
  .topnav .icon {
      display: block;
      font-size: 6.5vw;
      background-color: #1f43a5;
      color: white;
      padding: 10px;
      border: 1px solid black;
      cursor: pointer;
  }

  /* Sobald die Klasse "responsive" hinzugefügt wird, alle Links sichtbar machen */
  .topnav.responsive {
      position: relative;
  }

  .topnav.responsive a {
      display: block;
      text-align: left;
      padding: 12px;
      border-bottom: 1px solid #555;
      background-color: #222;
      animation: fadeIn 0.5s ease-in-out;
  }

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

  /* Dropdown-Menüs */
  .topnav.responsive .dropdown {
      display: block;
      position: relative;
      
  }

  .topnav.responsive .dropdown-content {
      display: none; /* Standardmäßig ausblenden */
      background-color: #444;
      padding-left: 10px;
      position: relative;
  }

  /* Wenn das Dropdown aktiv ist, Inhalt anzeigen */
  .topnav.responsive .dropdown-content.show {
      display: block !important;

  }

      /* Unterpunkte im Burger-Menü sichtbar */
      .topnav.responsive .dropdown-content a {
        display: block !important;
        padding: 10px;
        color: white;
        text-decoration: none;
        border-bottom: 1px solid #555;
    }
 
}

/* ---------------- Galerie Responsive ---------------- */

/* Desktop (Standard) = 5 Spalten */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  width: 85%;               /* exakt wie .topnav */
  margin: 0 auto;
  padding: 20px 0;
}

/* Tablet Ansicht (max. 1024px) = 3 Spalten */
@media (max-width: 1024px) {
  .gallery-container {
    grid-template-columns: repeat(3, 1fr);
    width: 90%;             /* etwas breiter für Tablets */
  }
}

/* Smartphone Ansicht (bis 600px) = 2 Spalten */
@media screen and (max-width: 600px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 95% !important;
  }
  .gallery-item {
    width: 100%;
  }
  .gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
  }
}
.share-buttons {
  position: absolute;
  top: 1vw;
  right: 1vw;
  display: flex;
  gap: 0.5vw;
  z-index: 10;
}

.share-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;
  height: 2.5vw;
  background: #ffffff;
  color: #1f43a5;
  border-radius: 50%;
  font-size: 1.2vw;
  text-decoration: none;
  transition: all 0.3s;
}

.share-buttons a:hover {
  background-color: #1f43a5;
  color: white;
}

.share-buttons a::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%; 
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 0.3vw 0.6vw;
  border-radius: 4px;
  font-size: 0.8vw;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.share-buttons a:hover::after {
  opacity: 1;
}
#social-container img.social-icon {
  width: 30px;   /* neue Breite der Icons */
  height: 30px;  /* neue Höhe der Icons */
}
.videothek {
  text-align: center;
  margin: 60px auto;
  max-width: 1300px;
  padding: 0 20px;
}

.videothek-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #222;
  font-weight: 700;
  transition: color 0.3s ease;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 30px;
}

.video-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-title {
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  color: #333;
  background: #f9f9f9;
  transition: background 0.3s ease, color 0.3s ease;
}

/* 🌙 Darkmode */
@media (prefers-color-scheme: dark) {
  .videothek-title {
    color: #eee;
  }

  .video-card {
    background: #1e1e1e;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  }

  .video-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.8);
  }

  .video-title {
    background: #2a2a2a;
    color: #ddd;
  }
}







.ppt-container {
  width: 68vw;       /* gleiche Breite wie Begrüßung */
  height: auto;
  aspect-ratio: 16 / 9;  /* erzwingt das Seitenverhältnis */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.ppt-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}




.ppt-mobile-link {
  text-align: center;
  font-size: 1rem; /* Desktop */
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .ppt-mobile-link {
    font-size: 1.5rem; /* etwas größer auf mobilen Geräten */
  }
}




.gallery {
  display: grid;
  grid-template-columns: auto 1fr; /* linke Spalte flexibel, rechte größer */
  gap: 15px;
  align-items: start;
}

/* Linke Spalte: normale Größe */
.left-column img {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.left-column img:hover {
  transform: scale(1.05);
}

/* Rechte Spalte: größer */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.right-column img {
  width: 100%;
  max-width: 500px; /* größer als linke Spalte */
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.right-column img:hover {
  transform: scale(1.05);
}

/* Optional: Lightbox-Anpassungen bleiben unverändert */




/* Modal Hintergrund */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.5); 
}

/* Modal Inhalt */
.modal-content {
  background-color: #1f43a5;
  margin: 15% auto; 
  padding: 20px;
  border-radius: 10px;
  width: 60%;
  color: white;
  text-align: center;
}

/* Schließen-Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* Button „Spenden“ */
#spendenBtnBonn {
  padding: 10px 20px;
  font-size: 1.2vw;
  background-color: green;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#spendenBtnBonn:hover {
  background-color: darkgreen;
}
/* Mobile Ansicht: Spenden-Button größer */
@media screen and (max-width: 600px) {
  #spendenBtnBonn {
    font-size: 5vw;  /* Schriftgröße auf mobilen Geräten anpassen */
    padding: 12px 24px; /* optional: etwas größere Fläche zum Tippen */
  }
}

/* News Ticker - transparent, pausierbar */
#Nachrichten, #Nachrichten .news-ticker {
    background: transparent !important;
    padding: 0;
}

.news-ticker {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.news-ticker p {
    display: inline-block;
    padding-left: 0; /* Text startet sofort sichtbar */
    animation: scrollNews 15s linear infinite; /* Geschwindigkeit anpassen */
    font-weight: bold;
    color: #ffffff;
    animation-play-state: running; /* Hover-Pause */
}

.news-ticker:hover p {
    animation-play-state: paused;
}

/* Keyframes für flüssiges Scrollen */
@keyframes scrollNews {
    0% { transform: translateX(100%); }    /* Start rechts außerhalb */
    100% { transform: translateX(-100%); } /* Ende links außerhalb */
}

/* Responsive für Mobilgeräte */
@media (max-width: 768px) {
    .news-ticker p { font-size: 0.9rem; }
}