/* -------------------- general -------------------- */

:root{
   --main-color: #228822;
   --second-color: #FFFFFF;
   --main-hover-color: color: #22CC22;
   --second-hover-color: color: #AAAAAA;
   --main-background: #FFFFFF;
   --main-background-semitrans: #FFFFFFE0;
   --second-background:  #228822;
   --second-background-semitrans: #228822E0;
   --lowResolution: 1200px;
   --headerHeight: 5rem;
   --footerHeight: 3rem;
   --linkColor: #165c4d;
}

* {
   border-width: 0;
   border-style: solid;
   border-color: #FFFFFF;
}

html {
   line-height: 1.5;
   tab-size:4;
   text-size-adjust: 100%;
   font-feature-settings:normal;
   font-variation-settings:normal;
   -webkit-tap-highlight-color:transparent;
   -webkit-text-size-adjust: 100%;
   -moz-tab-size:4;
   margin: 0;  
   padding: 0;
   box-sizing: border-box;
   font-size: clamp(8px, 1vw / 2 + 6px, 40px);
}

*, *:before, *:after {
   box-sizing: inherit;
}

.normalLink {
   color: var( --linkColor );
   text-decoration: underline;
}

.normalLink:hover {
   filter: brightness(1.6);
}


/* -------------------- body -------------------- */

body {
   width: 100%;
   height: 100%;
   font-family: 'Arial', sans-serif;
   margin: 0;  
   padding: 0;
   overflow: hidden;    
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
   display: none;
   width: 0px;
   height: 0px;
}


/* -------------------- header -------------------- */

header {
   width: 100%;
   height: var(--headerHeight);
   background-color: var( --main-background );
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 1rem;
   padding-right: 1rem;
   color: var( --main-color );
}

.headerImageContainer {
   width: auto;
   height: 100%;
   padding: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
}

.headerImageContainer img {
   width: auto;
   height: 80%;
}


/* -------------------- debug div -------------------- */

.debugContainer {
   position: fixed;
   top: calc(100vh / 2 - 10rem);
   left: calc(100vw / 2 - 10rem);
   z-index: 1000;
   width: 25rem;
   height: 20rem;
   background-color: rgb(164, 12, 4);
   color: var(--second-color);
   pointer-events: none;
   display: none;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
   border-radius: 1rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   font-size: 1.5rem;
   font-family: 'Arial', sans-serif;
   text-align: left;
   line-height: 1.5;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.debugContainer table {
   width: 100%;
}
.debugContainer table tr {
   width: 100%;
}
.debugContainer table tr td:first-child {
   text-align: left;
}
.debugContainer table tr td:nth-child(2) {
   text-align: right;
}


/* -------------------- navigation -------------------- */

nav {
   display: flex;
   justify-content: space-between;
   height: 100%;
   align-items: center;
   font-size: 1.2rem;
}

nav ul {
   display: flex;
   gap: 2rem;
   list-style-type: none;
   border-width: 0;
   border-style: none;
   padding: 10px;
}

nav ul li:hover {
   filter: brightness(1.4);
}

nav button {
   background: none;
   border: none;
   color: grey;
   font-size: 3rem;
   cursor: pointer;
   display: none;
}


@media (max-width: 1200px) {
   nav {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      align-items: end;
   }
   
   nav ul {
      display: none; /* wird durch butten umgeschaltet */
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
      font-size: 1.5rem;
      gap: 5px;
      list-style-type: none;
      border-width: 0;
      border-style: none;
      background-color: var( --second-background );
      border-radius: 10px;
      color: var( --second-color );
   }
   
   nav ul li:hover {
      filter: brightness(0.6);
   }

   nav button {
       display: flex;
   }

   .navListActive {
      display: flex;
   }
}


/* -------------------- main -------------------- */

main {
   width: 100%;
   height: 100vh; 
   padding-top: 5rem;
   background-image: url("images/baeume1.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}


/* -------------------- section -------------------- */

section {
   scroll-margin-top: var(--footerHeight); 
   background-color: var( --main-background-semitrans );
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 5%;
   padding-bottom: 5%;
   border-radius: 20px;
   color: var(--main-color);
   position: relative;
}

.sectionImageRight
{
   width: 30%;  
   height: auto; 
   margin-left: 3rem;
   margin-bottom: 2rem;
   float: right;
}

.sectionImageLeft
{
   width: 30%;  
   height: auto; 
   margin-right: 3rem;
   margin-bottom: 2rem;
   float: left;
}


/* -------------------- footer -------------------- */

footer {
   width: 100%;
   height: var(--footerHeight);
   background-color: var( --second-background );
   position: fixed;
   bottom: 0px;
   left: 0px;
   z-index: 1000;
   color: var( --second-color );
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.1rem;
   gap: 2rem;
}


/* -------------------- bernardo -------------------- */

#bernardo {
   position: fixed;
   bottom: var(--footerHeight);
   right: 0;
   margin: 10px;         /* optionaler Abstand vom Rand */
   display: flex;
   flex-direction: column;
   align-items: end;
   color: white;
   font-weight: 100;
}


/* -------------------- details -------------------- */

details {
   margin-top: 0px;
   margin-bottom: 10px;  
   margin-left: 0px;
   margin-right: 0px;
} 

details summary {
   cursor: pointer;
   padding-left: 0.5rem;
   margin-bottom: 0.2rem;
   height: 4.5rem;
   background: var( --second-background );
   position: relative;
   border-radius: 0.3rem;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   color: var( --second-color );
   font-size: 1.5rem;
}

details summary::before {
   content: "►"; 
   margin-right: 1rem;
   margin-left: 1rem; 
   font-size: 1.2rem;
}

details summary:hover {
   filter: brightness(1.2); 
}

details[open] summary {
   filter: brightness(1.2); 
} 

details[open] summary::before {
   content: "▼"; 
   margin-right: 1rem;
   margin-left: 1rem;   
   font-size: 1.2rem;
}

details > summary > * {
   display: inline-flex;
}

details p {
   margin-left: 3rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-right: 1rem;
   padding: 0;
   font-size: 1.5rem;
}

.fade-in-leftUp {
   opacity: 0;
   transform: translateY(-2rem) translateX(4rem); /* Offset zum Ziel */
   transition: opacity 1s ease-in, transform 1.5s ease-out; /* Weiche Übergänge */
}
.fade-in-rightUp {
   opacity: 0;
   transform: translateY(-2rem) translateX(-4rem); /* Offset zum Ziel */
   transition: opacity 1s ease-in, transform 1.5s ease-out; /* Weiche Übergänge */
}
.fade-in-rightUp.visible {
   opacity: 1;
   transform: translateX(0px) translateY(0px); /* Überschrift bewegt zum Ziel */
} 
.fade-in-leftUp.visible {
   opacity: 1;
   transform: translateX(0px) translateY(0px); /* Überschrift bewegt sich zum Ziel */
} 
        
#Start {
   position: relative;
   inset: 0;
   display: flex;  
   flex-direction: column;    
   justify-content: center;
   align-items: center; 
   width: 100%;
   height: calc( 100vh - var(--headerHeight) - var(--footerHeight));
   background-color: transparent;
   color: var( --second-color)
}

/* -------------------- scroll container -------------------- */

#ScrollContainer 
{
   overflow-y: scroll;
   height: 100%;
   width: 80%; 
   margin-left: 10%;
   margin-right: 10%;
   scroll-behavior: smooth;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge Legacy */
}
  

/* -------------------- colors -------------------- */

.main-color 
{
   color: var( --main-color );
}   
.second-color 
{
   color: var( --second-color );
} 
   
.transparentDummy
{
   height: var(--footerHeight); 
   width: 100%;
   background-color: transparent;
}

#map
{
   width: 50%;
   aspect-ratio: 1 / 1;
   min-height: 10rem;
}

@media (max-width: 1200px) 
{
   #map 
   {
      width: 100%;
   }
}


/* -------------------- slideshow -------------------- */

#slideshow1OuterContainer
{
   float: right;
   width: 30%;
   height: auto;
   margin-left: 3rem;
   margin-bottom: 2rem;
   display: flex; /* Sorgt dafür, dass der innere Container die Bildgröße annimmt */
   align-items: flex-start; /* Bild bleibt oben */
}

#slideshow2OuterContainer
{
   float: left;
   width: 30%;
   height: auto;
   margin-right: 3rem;
   margin-bottom: 2rem;
   display: flex; /* Sorgt dafür, dass der innere Container die Bildgröße annimmt */
   align-items: flex-start; /* Bild bleibt oben */
}

@media (max-width: 1200px) 
{
   #slideshow2OuterContainer, 
   #slideshow1OuterContainer
   {
      width: 40%;
   }
}

/* -------------------- Anfahrt und Kontakt -------------------- */

#AnfahrtUndKontakt
{
   display: flex;  
   flex-direction: row; 
   justify-content: space-between;   
}

@media (max-width: 1200px) 
{
   #AnfahrtUndKontakt 
   {
      display: flex;  
      flex-direction: column; 
      justify-content: center;
      align-items: center;
      gap: 2rem;
   }
}

/* -------------------- tables -------------------- */

.tableType-1
{
   margin-top: 1rem;
   text-align: justify;
   hyphens: auto;
}

.tableType-1 td:first-child
{
   font-size: 1.5rem;
   vertical-align: top; 
   padding-left: 1rem;
}

.tableType-1 td:nth-child(2)
{
   font-size: 1.5rem;
   vertical-align: top; 
   padding-left: 2rem;
   text-align: justify;
   hyphens: auto;
}

/* -------------------- link grid -------------------- */

.responsiveLinkGrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
   gap: 1rem;
 }
 
 .responsiveLinkGrid > div {
   padding: 1rem;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
   gap: 1rem;
}

.responsiveLinkGrid > div a{
   hyphens: none;
}
.responsiveLinkGrid > div a span{
   text-wrap: nowrap;
}

.responsiveLinkGrid > div div:first-child
{
   flex: 1;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
   text-align: center;
   min-width: 7rem;
}

.responsiveLinkGrid > div div:nth-child(2)
{
   flex: 4;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-content: center;
   text-align: center;
   flex-wrap: nowrap;
}

.linkImage
{
   max-width: 6rem;  
   width: 100%;
   height: auto; 
   margin: 0.5rem;
   padding: 0.5rem;
   background-color: var( --second-background );
   border-radius: 0.5rem;
}

.linkImage2
{
   max-width: 6rem;  
   height: auto; 
   margin: 0.5rem;
   border-radius: 0.5rem;
}
 
 /* Umschalten auf 1 Spalte bei kleinerer Breite */
 @media (max-width: 1400px) {
   .responsiveLinkGrid {
     grid-template-columns: 1fr; /* 1 Spalte */
   }
 }

 .osmOsteobalanceButton{
   background-color: var(--second-background-semitrans);  /* Hintergrundfarbe */
   padding: 0.25rem;          /* Innenabstand */
   font-size: 1.5rem;             /* Schriftgröße */
   border: 2px solid var(--second-background);   /* Rahmen */
   border-radius: 5px;          /* Abgerundete Ecken */
   text-align: center;          /* Text zentrieren */
   user-select: none;           /* Kein Text markieren beim Klicken */
   box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Schlagschatten */
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
}

.osmOsteobalanceButton:hover{
   filter: brightness(1.4); /* 20% heller */
}

 .osmOsteobalanceButton button{
   background-color: transparent;  /* Hintergrundfarbe */
   color: white;               /* Textfarbe */
}