@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');

}  
  



@font-face {
  font-family: 'OpenSans';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('open-sans.ttf') format('truetype'),
   url('open-sans.ttf') format('embedded-opentype'); 
  font-display: swap;
}


@font-face {
  font-family: 'Roboto';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('roboto.ttf') format('truetype'),
   url('roboto.ttf') format('embedded-opentype'); 
  font-display: swap;
}


@font-face {
  font-family: 'LobsterTwo';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('LobsterTwo-Regular.ttf') format('truetype'),
   url('LobsterTwo-Regular.ttf') format('embedded-opentype'); 
  font-display: swap;
}








*
{
margin: 0;
padding: 0;
border: none;
outline: none;
}
html {
	scroll-behavior: smooth;
}
body {
  		font-family: 'OpenSans';  hyphens: auto;
background-color:#f0f1eb;


}


ul,li {margin-left:20px;}



header {background-color:#f0f1eb;  border-bottom: 1px solid #525f32; display:flex; align-items:center; justify-content:center; position:fixed; top:0px; left:0px; right:0px; height:120px; z-index:10;}
header img {margin: 0 20px; height:clamp(60px,6vw,130px);}
footer {color:#FEFEFE; background-color:#525f32; display:flex; align-items:flex-start; justify-content:center;}
footer a{color:#fff;}
.block {display:inline-block; margin:5px 15px;}
.block b {text-transform: uppercase; font-size:18px;}
.blocks {display:flex; align-items:center; justify-content:center; margin:5px 1px; height:100px; min-width:30px;}

video, .bild {
	object-fit: cover;
	height: 100vh;
	width: 100vw;
	z-index: -9999;
	position: fixed;
	top: 0;
	left: 0;
	}







.fichten {position:relative; width:100vw; margin-top:-11vw; z-index:9;}
.dunkel {background:#f0f1eb;}




/* 1. Der Container (bleibt gleich) */
.image-container {
margin-top:120px;
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  background:#f0f1eb;
}

/* 2. Das Bild (bleibt gleich) */
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* 3. Das Text-Overlay (angepasst) */
.text-overlay {
  position: absolute;
  font-family: 'LobsterTwo';  hyphens: auto;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: left;
  width: 90%;
  padding: 0; 

  /* --- ÄNDERUNG: Textschatten statt Hintergrund --- */
  /* Mehrere Schatten für maximale Lesbarkeit kombinieren */
  text-shadow: 
    0px 0px 5px rgba(0, 0, 0, 1), /* Scharfer Kern */
    0px 0px 10px rgba(0, 0, 0, 1), /* Mittelhart */
    0px 0px 15px rgba(0, 0, 0, 0.8), /* Weich */
    2px 2px 3px rgba(0, 0, 0, 0.5); /* Leichte Verschiebung */

  /* --- HINZUGEFÜGT: Animation --- */
  animation-name: flyInFromLeft; /* Name der Keyframes-Definition */
  animation-duration: 1s;        /* Dauer der Animation */
  animation-timing-function: ease-out; /* Startet schnell, endet sanft */
  animation-fill-mode: forwards; /* Behält die Endposition bei */
  opacity: 0;                    /* Startet unsichtbar */
}

/* --- HINZUGEFÜGT: Keyframes für die Animation --- */
@keyframes flyInFromLeft {
  from {
    opacity: 0;
    /* Startposition: 100px weiter links und leicht nach oben korrigiert wegen translate */
    transform: translate(-100px, -50%) translateX(-100px); 
  }
  to {
    opacity: 1;
    /* Endposition: Perfekt zentriert */
    transform: translate(-50%, -50%);
  }
}

.text-overlay h3 {font-size:clamp(24px,3.7vw,3.7vw);}
.text-overlay h2 {font-size:clamp(30px,4.6vw,4.6vw);}
.text-overlay p {font-size:clamp(18px,2vw,2vw);}
.text-overlay a {font-size:clamp(18px,2vw,2vw); text-align:left;  width:auto; display:flex; justify-content:flex-start;}

/* Section */
section {max-width:1500px; margin:0 auto;}
section h2 {color:#525f32; text-align:center;  text-transform: uppercase;}
section h1 {color:#3f3e2f; text-align:center;}
section p {color:#3f3e2f; text-align:justify;}



hr {

    border: none;               
    height: 50px;               
    background-image: url('layout/trenner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;   
            
}


/* figure card */

a  {  text-decoration:none;}
a .card:hover .card-icon {transition:all 1s; background:#d7a249; }

/* Die Hauptbox */
.card {
  width: 300px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert die Elemente horizontal */
  overflow: hidden; /* Sorgt dafür, dass das Bild oben die Ecken abrundet */
  margin: 20px;
  position: relative;
}

/* Das Bild oben */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Das runde Icon in der Mitte */
.card-icon {
  width: 50px;
  height: 50px;
  background-color: #525f32; /* Hintergrundfarbe des Icons */
  color: white;              /* Icon-Farbe */
  border-radius: 50%;        /* Macht die Box perfekt rund */
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  /* Der Trick für die Platzierung: */
  margin-top: -25px;         /* Genau die Hälfte der Höhe, um es nach oben zu ziehen */
  border: 4px solid #ffffff; /* Weißer Rahmen, um es sauber vom Bild zu trennen */
  z-index: 2;                /* Schiebt das Icon über das Bild */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Der Textbereich unten */
.card-caption {
  padding: 20px;
  text-align: center;
}



a .card-caption h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  text-decoration:none;
  color:#525f32;
  
}

a .card-caption p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
    text-decoration:none;
	color:#3f3e2f;;
}



.button,.buttonstart {display:flex; justify-content:center; align-items:center; font-size:clamp(14px,2vw,25px); color:#525f32; text-decoration:none;}
.button:hover,.buttonstart:hover { color:#d7a249; transition:1s all;}
.button:hover .icon,.buttonstart:hover .icon {  background-color: #d7a249; transition:1s all;}


@media screen and (max-width: 1000px) {
	.button {flex-direction:column;}
	header {height:90px;}
	header img {margin: 0 5px;}
	.text-overlay {top:50%;}
	.image-container {margin-top:90px;}
}



/* Das runde Icon in der Mitte */
.icon {
  width: 50px;
  height: 50px;
  background-color: #525f32; /* Hintergrundfarbe des Icons */
  color: white;              /* Icon-Farbe */
  border-radius: 50%;        /* Macht die Box perfekt rund */
  display: flex;
  justify-content: center;
  align-items: center;
  

  border: 4px solid #ffffff; /* Weißer Rahmen, um es sauber vom Bild zu trennen */
  z-index: 2;                /* Schiebt das Icon über das Bild */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* article */
article {
  column-count: 2;
  column-gap: 40px;
  max-width:1500px;
  margin:0 auto;
  color:#3f3e2f;
  padding:1px 10px;
}

/* Auf dem Handy zurück auf 1 Spalte */
@media (max-width: 800px) {
  article {
    column-count: 1;
  }
}


article h2 {  color:#525f32;}





/* ~~~~~~~~~~~~~~ Material ~~~~~~~~ */

.material {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  color: #fff;
  font-size:30px;
}

.materialgross {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  color: #fff;
  font-size:60px;
}


.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #e3e3e3;
  text-decoraion:none;
  position:sticky;
  top:32px;
  margin-right:10px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {transition: 2s all; color:rgba(200,200,200,0.5); transform: rotate(360deg);}


.materialbutton {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 40px;
  width:48px; height:48px;
  color:#fff;
cursor:pointer;
 margin:0 auto;
	transition:2s all;
background:#398ccb;
	overflow:hidden;
	border: thin solid white;
	border-radius:50%;
	 display:flex;	justify-content : center;
	 display:flex; justify-content: center; align-items:center;
}
.materialbutton:hover {
	background:#000;
	transition:all 1.5s;
	transform: rotate(360deg);
	
}

	@media screen and (max-width: 800px) {
		.materialbutton{	 font-size: 30px;  width:38px; height:38px;}

		
	}







/* ~~~~~~~~ Datenschutz und Impressum ~~~~~~~~ */

#datenschutztext,#impressumtext,#kontakttext{
	position:fixed;
	overflow:auto;
	background: rgba(81,94,48,0.7);
	color:#ebba8a;
	border-radius:10px;
	border: 1px solid #fff;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}

 


#datenschutztext p,#impressumtext p,#kontakttext p{color:#fefefe;}
#datenschutztext h1,#impressumtext h1,#kontakttext h1{color:#fefefe;}
#datenschutztext h2,#impressumtext h2,#kontakttext h2{color:#fefefe;}
#datenschutztext a, #impressumtext a,#kontakttext a{text-decoration:none; color:#fefefe;}
#datenschutztext:hover,#impressumtext:hover,#kontakttext:hover{background: rgba(81,94,48,0.95);}
#datenschutztext:target,#impressumtext:target,#kontakttext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}

@media screen and (max-width: 800px) {
	#datenschutztext:target,#impressumtext:target,#kontakttext:target{top:10px; width:90%; height:90%; 	padding:10px; margin-left:-49%;}
}

/* ~~~~~~~~~~~~ hover-text ~~~~~~~~~~~~~~~~~~ */

.hover-text {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  position:relative;
}





.hover-text::before {
  content: attr(data-text);
position:absolute;
  background-color: #398ccb;
  width: fit-content;
  color: #000;
  padding: 0.4rem 1rem;
  top: -10px;
  right: -200px;
 
  font-size: 1rem;
  opacity: 0;
  transform: translateY(20%);
  transition: all .3s ease-in-out;
}

.hover-text[data-text]:not([data-text=""])::before {
  opacity: 0; 
}

.hover-text[data-text]:not([data-text=""]):hover::before {
  opacity: 1; 
  transform: translateY(0%);
}



@media screen and (max-width: 900px) {
	.hover-text {  font-size: 12px; padding:1px;}
}



/* ~~~~~~~~~~~ WebsiteEditor Styles ~~~~~~ */

figure.image {margin:0 auto;}

.image-style-align-left {width:55%; float:left; position:relative; height: auto;  padding: 10px 10px 10px 0;}
.image-style-align-right {width:55%; float:right; position:relative; height: auto; padding: 10px 0 10px 10px;}

figure.image-style-block-align-left {position:relative; display:inline-block; float:left; padding:5px;}


figure.image-style-block-align-left img{height:300px; width:auto;}

figure.image-style-block-align-right {display:inline-block; float:right; padding:5px;}
figure.image-style-block-align-right img{height:300px; width:auto;}

		figure.image-style-align-right img { 	border-top-left-radius: 5%; 	border-bottom-left-radius: 5%;}
		figure.image-style-align-left img { 	border-top-right-radius: 5%; 	border-bottom-right-radius: 5%;}

img.image_resized {height:auto;  display:inline-block;}
.image img{width:100%; height:auto;}  
img.darken {mix-blend-mode: darken;}

figure.table { margin:0 20px 0 20px;}
figure table {width:100%;}


.bildbox {
align-items:center;background-color:#ddd;display:flex;justify-content:space-around;width:calc (100% - 40px);}





/* ~~~~~~~~~~~~~~ BildSlider ~~~~~~~~~~~~~ */
.sliderbox {text-align:left; display:flex; justify-content:center; align-items:center; padding:10px; max-width:1500px;  margin:0 auto; text-align:left;}
.textbox {width:70%;}

.bildslider {
	width: 30vw;
	height: 20vw;
	position: relative;
	overflow: hidden;
background:#eee;
	margin-right:15px;
	float: left;
}

@media(max-width: 800px)
{
.bildslider {display:block; margin:15px; width:calc(100vw - 60px); height: calc(66.66vw - 40px);}
.sliderbox {display:block;}
}

.bildslider > * {
	position: absolute; 
	top:100%; left:0; right:0;
	width:100%;
	height:100%;
	object-fit:contain;
	animation: 12s slider infinite ease-in-out;
}

@keyframes slider {
	0%   { top: 100%; }
	5%   { top: 0% }
	33.4%   { top: 0% }
	38.4%   { top: -100% }
	100% { top: -100%;}
}

.bildslider > *:nth-child(1) { animation-delay: 0s }
.bildslider > *:nth-child(2) { animation-delay: 4s }
.bildslider > *:nth-child(3) { animation-delay: 8s }