/*---------------------------------------*/
/* Fonts */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Regular.woff2') format('woff2'),
       url('fonts/EBGaramond-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Bold.woff2') format('woff2'),
       url('fonts/EBGaramond-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}


/*---------------------------------------*/
/* Basis */


html, body {
  overflow-x: hidden;
  max-width: 100%;
}



body {
  margin: 0.3rem;
  padding: 0;
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.6;
  color: lightgrey;
  background-color: #fdfdf9; 
/*
  background: url('../bilder/hintergrund_small20.jpg') no-repeat center center fixed;
  background-size: cover;
*/
}



/* für iOS: damit das Hintergrundbild statisch ist (ja, Apple nervt)*/
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: url('../bilder/hintergrund_small20.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

main {
    background: rgba(0,0,0,0.7);
    padding: 20px;
    max-width: 900px;
    min-width: 0;
    margin: auto;
    /*flex-shrink: 1;*/
} 

small {
    font-size: 11px;
    font-style: italic;
}
rot {
    font-size: 11px;
    font-style: italic;
    color: red;
}

/*---------------------------------------*/
/* Bilder */

img {
  width: 50%; /*width-Angaben im img/html-Attribut werden überschrieben*/
  height: auto;
}

.img-flex {
  width: unset;
  max-width: 100%;
}
.img-auto {
  width: auto;
  max-width: 100%;
}
.img-full { width: 100%;}
.img-large { width: 75%;}
.img-small { width: 30%;}
  



/*
@media (max-width: 768px) { 
  img {
    width: 70%;  
  }
}
*/
/*
@media (min-width: 50em) {
  img {
    width: 25%;
  }
}
*/

/*---------------------------------------*/
/* Überschriften etwas stärker gewichtet */
h1, h2, h3 {
  font-family: 'EB Garamond', serif;
  font-weight: 700; /* Bold für klare Akzente */
  letter-spacing: 0.5px;
  margin-bottom: 1rem;

  /*damit die überschrift beim anklicken im TOC nicht von der navbar verdeckt wird: */
  scroll-margin-top: 80px; 
}



/*---------------------------------------*/
/* Absatztext */
p {
  font-weight: 400;
  margin-bottom: 1.2rem;
}

/*---------------------------------------*/
/* Listen-Elemente */
ul {
 /*list-style-type: "✦ ";*/
 list-style-type: square;
 /*list-style-type: "♪ ";*/
}


/*---------------------------------------*/
/* Links */
a:link {color: sandybrown;}
a:visited{color: tan;}
a:hover   { background-color: Tan; color: sienna; }
a:active {color: #800000;}

/*---------------------------------------*/
/* Links */
figcaption {
  font-size: 0.75em;      /* kleiner als Fließtext */
  color: #ccc;            /* optional, hellere Farbe */
  margin-top: 0.1em;      /* Abstand zum Bild */
  font-style: italic;     /* optional: kursiv */
}

/*---------------------------------------*/
/*---------------------------------------*/
/* Inhaltsverzeichnis */

/* Page container für mehrere Spalten TOC  */
.page-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
}


.toc {
  position: relative;
  background-image: url('../bilder/zither_vanitas.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 1em 1.5em;
  max-width: 600px;
  font-size: 0.95em;
  margin-top: 0.3em;
}

/* Abdunkel-Overlay */
.toc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);  /* Helligkeit hier anpassen */
  z-index: 0;
}

/* Inhalt bleibt über dem Overlay */
.toc > * {
  position: relative;
  z-index: 1;
}


.toc h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #cd853f;
}
.toc h2.highlight {
  color: gold;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.toc li {
  margin: 0.3em 0;
}
.toc a {
  /*color: lemonchiffon;*/
  /*color: chocolate;*/
  color: BurlyWood;
  text-decoration: none;
  transition: color 0.2s;
}
.toc a:hover {
  color: #fff;
  text-decoration: underline;
}
/* Unterebenen eingerückt */
.toc ul ul {
  padding-left: 1.5em; /* Einrückung */
  /*border-left: 2px solid rgba(255,255,255,0.2);*/ /* optische Führungslinie */
  margin-top: 0.3em;
  font-size: 0.75em;
}
/* --- Große Bildschirme --- */
@media (min-width: 1000px) {
  .page-container {
    flex-direction: row;        /* TOC und Content nebeneinander */
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
  }
  .toc {
    position: sticky;           /* bleibt beim Scrollen sichtbar */
    top: 6em;                   /* Abstand zum oberen Rand */
    align-self: flex-start;     /* nicht mitwachsen mit Main */
    width: 250px;
    min-width: 220px;
    max-height: 90vh;           /* nicht höher als der Bildschirm */
    overflow-y: auto;           /* scrollbar, falls sehr lang */
    margin: 0;
  }
  main {
    flex: 1;
    margin-left: 2em;
    margin-top: 0.3em;
    background: rgba(0,0,0,0.8);   /* Transparenz 0,8 */
    padding: 1.5em;
  }
}
.toc:empty {
  display: none;
}
.toc:empty + main {
  margin: 0 auto;
  max-width: 900px;
  margin-top: 0.3em;
}

/*---------------------------------------*/
/*---------------------------------------*/


/*---------------------------------------*/
/* Scroll-to-top-Button */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;               /* unsichtbar, bis gescrollt wird */
  background-color: rgba(0,0,0,0.6);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  font-size: 22px;
  text-align: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s, opacity 0.3s;

  /* NEU: für perfekte Zentrierung */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#scrollTopBtn:hover {
  background-color: rgba(255,255,255,0.2);
}
/*---------------------------------------*/

/*---------------------------------------*/
/* Navigation Container */
    nav.navbar {
      background: rgba(0,0,0,0.9);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

/* Hauptmenü */
    .navbar > .menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-around;
    }

    .navbar > .menu > li {
      position: relative;
    }

    .navbar a, .drop-label {
      display: block;
      padding: 14px 20px;
      color: white;
      text-decoration: none;
      cursor: pointer;
    }

    .navbar a:hover, .drop-label:hover {
      background: #444;
      color: peru;
    }
    .navbar a.active {
        background: #444;
        color: peru;
        font-weight: bold;
    }
    .navbar .drop-label.active {
        background: #444;
        color: peru;
        font-weight: bold;
    }


/* Untermenüs standardmäßig ausblenden */
    .submenu {
      display: none;
      list-style: none;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(69,69,69,0.95);
      min-width: 300px;
    }

    .submenu li a {
      padding: 10px 15px;
      text-align: left;
    }

   /* Desktop: Hover öffnet Dropdown */
    @media (min-width: 769px) {
      .dropdown:hover > .submenu {
        display: block;
      }
    }



/* Hamburger Menü */
    .hamburger {
      display: none;
      font-size: 28px;
      padding: 12px 16px;
      cursor: pointer;
      background: rgba(0,0,0,0.1);
      color: white;
    }

    #menu-toggle, .drop-toggle {
      display: none; /* Versteckte Checkboxen */
    }


/* Mobile Styles */
    @media (max-width: 768px) {
      .navbar > .menu {
        flex-direction: column;
        display: none;
      }

      #menu-toggle:checked + .hamburger + .menu {
        display: flex;
      }

      .hamburger {
        display: block;
      }

      /* Submenu auf mobile: statisch + klickbar */
      .submenu {
        position: static;
        background: rgba(69,69,69,0.8);
      }

      .drop-toggle:checked ~ .submenu {
        display: flex;
        flex-direction: column;
      }

      .drop-label::after {
        content: " ▾";
        float: right;
      }
    }
/*---------------------------------------*/

/* Form */
form {
      max-width: 500px;
      /*margin: 0 auto;*/
      margin-left: 0 auto;
      background: tan;
      padding: 2rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

input,
textarea {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.3rem;
  margin-right: 1rem;
  border: 1px solid #ccc;
  font-size: 1rem;
  box-sizing: border-box
}

button {
  margin-top: 1.5rem;
  padding: 0.8rem 1.2rem;
  border: none;
  background-color: peru;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: saddlebrown;
}

.privacy {
  font-size: 0.9rem;
  margin-top: 1rem;
  color: #555;
}



/*---------------------------------------*/
/* Bildereihe */

.bilderreihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 3 gleich breite Spalten */
  gap: 10px; /* Abstand zwischen den Bildern */
  margin: auto;
}

.bilderreihe img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

@media (max-width: 800px) {
  .bilderreihe {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.bilderreihe2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  
}

.bilderreihe2 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}





/*---------------------------------------*/
/* Scroll-Gallery  */


/* Der Gallery-Wrapper dient eigentlich dazu, das Gallery-Element zu isolieren.
 * das display:flex Element führt dazum dass der text nicht umbricht.
 * Funktioniert aber nich nicht.
 */

.gallery-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  display: block; /* ganz wichtig: kein Flex, kein Inline-Flex */
}


.scroll-gallery {
  display: flex;
  overflow-x: scroll; 
  flex: none;
  scroll-snap-type: x mandatory; 
  gap: 10px;
  padding: 10px;
  scroll-behavior: smooth; 
  scrollbar-width: thick;
  scrollbar-color: red wheat;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.7);
  margin-top: 10px;
  margin-bottom: 100px;
}

.scroll-gallery figure {
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-align: center;
  margin: 0;
  color: #ccc;
  /*width: min(600px, 90vw);*/
}

.scroll-gallery figcaption {
  font-size: 0.9em;
  font-weight: bold;
  margin-top: 5px;
  color: cornsilk;
}
.scroll-gallery::-webkit-scrollbar {
  height: 16px;
}
.scroll-gallery::-webkit-scrollbar-thumb {
  background: peru;
  border-radius: 4px;
}
.scroll-gallery::-webkit-scrollbar-thumb:hover {
  background: sienna;
}

.scroll-gallery img {
  flex: 0 0 auto;
  width: 100%;
  /*max-width: min(600px, 90vw);*/
  max-width: 200px; 
  border-radius: 10px;
  object-fit: cover;
  scroll-snap-align: center;
  transition: transform 0.3s;
}


.scroll-gallery img:hover {
  transform: scale(1.5);  
  cursor: pointer;
}
/*
@media (max-width: 768px) {
  .scroll-gallery figure {
        width: 90vw;  
  }
}*/

/* Für Text-Umbruch */
/*
main p,
main li,
main h1, main h2, main h3,
main article {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
*/