/* === GENERELLES === */
@import url(https://fonts.googleapis.com/css?family=Raleway);
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
    margin: 0; font-size: calc(16px + (28-16)*((100vw-320px) / (1600-320)));
    background-color: #fff;
      margin: 0;
        min-height: 100vh;

}


* {
    box-sizing: border-box;
}



/* === GRID-SYSTEM === */

.container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    font-family:"open sans", 'Roboto', sans-serif;
    
  }
  
  .row::after {
    content: "";
    clear: both;
    display: block;
  }
  
  [class*='col-'] {
    float: left;
    min-height: 1px;
    padding: .8rem;
  }
  
  .col-1 { width: 16.666%; }
  .col-2 { width: 33.333%; }
  .col-3 { width: 50%;     }
  .col-4 { width: 66.666%; }
  .col-6 { width: 100%;    }
  
  @media (max-width: 1024px) {
  
    .col-1 { width: 33.333%; }
  
  }
  
  @media (max-width: 768px) {
  
    .col-1 { width: 50%;  }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
    .col-4 { width: 100%; }
  
  }
  
  @media (max-width: 480px) {
  
    .col-1 { width: 100%; }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
    .col-4 { width: 100%; }
  
  }


  

.toggle, [id^=drop] {
display: none;
}

a { text-decoration: none; background-color: transparent;}

a:link,a:visited {
color:#47273c;
text-align:left;
text-decoration:underline;

}
a:hover,a:active {
color:#47273c;
text-align:left;text-decoration:none;
background: #e5f23e;
}

/* NAV */
nav {
  background: #bbc628;
  color: #000000;
  background-color: #f4f5f6;
  border:#45484B
}

/* Hamburger */
.menu-toggle {
  display: none;
  font-size: 26px;
  padding: 15px 20px;
  cursor: pointer;
}

/* Hauptmenü */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 3px;
  
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 15px 20px;
  color: #000;
  text-decoration: none !important;
}

nav a:hover {
  background: #e5f23e !important;
}

/* Untermenü */
nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #e5f23e;
  min-width: 180px;
  flex-direction: column;
}

nav li:hover ul {
  display: block;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  nav ul {
    flex-direction: column;
    display: none;
  }

  nav ul.active {
    display: flex;
  }

  nav li ul {
    position: static;
    display: none;
  }

  nav li.open ul {
    display: flex;
  }
}a 



h1{padding-right:10%;text-align:right;
color:#6b720b;
font-family:"open sans", 'Roboto', sans-serif;
}
h2{
color:#6b720b;
font-size:1.3em;padding-right:10%;
font-family:"open sans", 'Roboto', sans-serif;
text-align:right;font-weight:500;
}
h3{
text-align:left;
color:#000;
font-size:1.5em;
font-family:"open sans", 'Roboto', sans-serif;
font-weight:200;
margin-bottom: 1%;margin-top: 5%;
}

h4{
text-align:left;
color:#000;
font-size:1.5em;
font-family:"open sans", 'Roboto', sans-serif;
font-weight:200;
margin-bottom: 1%;margin-top: 5%;


}
h5{
color:#df0a1f;
font-size:1.6em;
font-weight:200;
font-family:"open sans", 'Roboto', sans-serif;
text-align:left;margin-bottom:3%;
line-height:160%;margin-right:5%;
}
h6{
color:#484940!important;
font-size:1em;
font-family:"open sans", 'Roboto', sans-serif;
text-align:center;
margin-bottom:4%;
}

p{
color:#646464;
font-size:1em;
font-family:"open sans", 'Roboto', sans-serif;
text-align:left;margin-bottom:3%;
line-height:160%;margin-right:0%;
margin-top:4%;background-color: transparent;
}
p.border {
border-left:4px solid #98ad37;
padding-left: 2%;


}
.kursiv{
font-style:italic;
}


img {
max-width: 100%;
height: auto;
}

.bild_rechts {
float:right;
margin-right:0%;
margin-left:0%;
padding:0px;
border-right:1px solid #bbc628;
width: 100%;
}
.bilderrahmen_rechts {
float:right;
margin-right:0%;
margin-left:4%;
padding:4px;
border:1px solid #ccc;
}
.bilderrahmen_links {
float:left;
margin-right:4%;
margin-left:0%;
padding:4px;
border:1px solid #ccc;

}
.bilderrahmen_mitte {
  margin:auto;
  padding:4px;
  border:1px solid #ccc;}
  /* Overlay */
#cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 16px;
}

/* Modal */
.cookie-modal {
  background: #ffffff;
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Title */
.cookie-modal h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
}

/* Text */
.cookie-modal p {
  font-size: 15px;
  line-height: 1.5;
  color: #555;
  margin-bottom: 24px;
}

/* Buttons */
.cookie-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
}

/* Dark buttons */
.btn.primary,
.btn.secondary {
  background: #2f3437;
  color: #ffffff;
}

/* Light button */
.btn.light {
  background: #eef1f2;
  color: #000;
}

/* Hover */
.btn:hover {
  opacity: 0.9;
}

/* Mobile optimization */
@media (max-width: 480px) {
  .cookie-modal {
    padding: 20px;
  }
}
h1{padding-right:10%;text-align:right;
color:rgb(208, 219, 49);
font-family:"open sans", 'Roboto', sans-serif;
font-weight: 200;
}
.gradient-box {
    padding: 10px;
    background: linear-gradient(
        135deg,
        #f4f5f6,
        #ffffff,
        #f4f5f6
    );
    border-radius: 16px;
    background-size: 300% 300%;
        animation: gradientMove 45s ease infinite;
        font-family: Inter, sans-serif;
}
  @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }}
        
.button-outline{
            border: 1px solid grey;
            background-color: transparent;
            border-radius: 3px;
            padding: 3px;
            
        }
    .img_menu{
           
            padding: 2px;
            padding-left: 20px; 
             animation: soft 6s ease-in-out infinite;   
            
        }    
        @keyframes soft {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(3px, -3px); }
  100% { transform: translate(0, 0); }
}


.img_bewegt  {
           
            padding: 2px;
            padding-left: 20px;
             animation: float 4s ease-in-out infinite;   
            
        } 
        @keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.img_swing  {padding: 2px;
            padding-left: 20px;
           
           animation: swing 6s ease-in-out infinite;
  transform-origin: center bottom;
        } 
        @keyframes swing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(-10deg); }
  75%  { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}