@charset "utf-8";
/* CSS Document */

*{
font-size: 90%;
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}

html, body{
background-color: #2f2f2f;
height: 100%;
scroll-behavior: smooth;
}

body{
margin-top: 2.2em;
}

header{
background-color: #2f2f2f;
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, .8);
z-index: 3000;
}

.left{
text-align: left;
}

.center{
text-align: center;
}

.right{
text-align: right;
}

section{
max-width: 100%;
position: relative;
scroll-margin-top: 7em;
padding: 4em 0;
}

main{
background-color: #fff;
}

.wrapper{
margin: 0 auto;
width: 1080px;
max-width: 100%;
}

#logo{
text-size: 4em;
text-align: center;
padding: .2em;
border: 2px solid #af783c;
max-width: 10em;
}

.video-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; }

/* Responsive YouTube 
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }*/

/*.video-container {
position: relative;
padding-bottom: 56.25%;  16:9 
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/

h1{
margin: .5em;
text-transform: uppercase;
color: #000;
font-size: 2.6em;
}

hr{
border: 1px solid #af783c;
margin: 0 0 3em 0;
}

h2{
margin: .5em;
color: #000;
font-size: 1.6em;
}

p, main li{
margin: .5em;
font-size: 1.6em;
color: gray;
text-align: justify;
text-justify: inter-word; /* oder inter-character für bestimmte Sprachen */
}

main li{
margin-left: 2em;
text-align: justify;
text-justify: none;
}

a{
color: #af783c;
text-decoration: none;
}

/* Flex Container */
.flex-container {
display: flex;
flex-wrap: wrap;  /* Ermöglicht das Umwickeln bei kleinen Bildschirmen */
justify-content: space-between;  /* Verteilung der Items */
gap: 0;  /* Abstand zwischen den Items */
max-width: 100%;
}

.flex-item15 {
padding: .6em .3em;
width: 16%;  /* Jedes Item hat 48% der Breite, sodass etwas Platz dazwischen bleibt */
}

.flex-item25 {
padding: .6em .3em;
width: 24.6%;  /* Jedes Item hat 48% der Breite, sodass etwas Platz dazwischen bleibt */
}

.flex-item30 {
padding: .6em .3em;
width: 33%;  /* Jedes Item hat 48% der Breite, sodass etwas Platz dazwischen bleibt */
}

/* Flex Items */
.flex-item50 {
padding: 0 3em;
width: 50%;  /* Jedes Item hat 48% der Breite, sodass etwas Platz dazwischen bleibt */
}

.flex-item100 {
padding: 0 3em;
width: 100%;  /* Jedes Item hat 48% der Breite, sodass etwas Platz dazwischen bleibt */
}

/* Responsives Verhalten */
@media (max-width: 768px) {
  .flex-item50 {
    width: 100%;  /* Auf kleineren Bildschirmen werden die Items 100% breit */
  }
}

img{
max-width: 100%;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
box-shadow 0.5s ease, 
filter 0.5s ease; /* sanfte Animation */
cursor: pointer;
transform-origin: center center; /* Zoom von der Bildmitte */
will-change: transform; /* Performanceoptimierung */
}

img.zoom-hover:hover {
transform: scale(1.08) translateY(-2px); /* leichtes Zoomen + Heben */
box-shadow: 0 12px 24px rgba(0,0,0,0.35); /* leichter Tiefeneffekt */
filter: brightness(1.05); /* minimal aufgehellt */
}

.thumb{
width: 100%;
}

footer{
background-color: #2f2f2f;
color: white;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8); 
}

footer.li.a, address{
color: gray;
text-size: 2em;
text-align: center;
}

address{
padding: .5em;
border: 2px solid #af783c;
}

button{
text-align: center;
color: #fff;
padding: .5em;
margin: 1em;
background-color: #af783c;
border: none;
border-radius: .5em;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
cursor: pointer;
}