/* --- 1. Standard-Eigenschaften (für Firefox) --- */
html {
  /* Schmale Scrollbar: auto | thin | none */
  scrollbar-width: 20px; 
  /* Farbe: thumb-Farbe track-Farbe */
  scrollbar-color: black #f3f4f6;
    visibility: visible;
}

/* --- 2. Webkit-Eigenschaften (für Chrome, Edge, Safari) --- */

/* Die Breite der Scrollbar */
::-webkit-scrollbar {
  width: 100px; /* Vertikale Scrollbar */
  height: 50px; /* Horizontale Scrollbar */
  visibility: visible;
}

/* Die Schiene (Hintergrund des Scrollbalkens) */
::-webkit-scrollbar-track {
  background: white; /* Helles Grau */
  border-radius: 8px;
  width: 20px;
    visibility: visible;
}

/* Der ziehbare Griff (Daumen) */
::-webkit-scrollbar-thumb {
  background: white; /* Blau */
  border-radius: 8px;
  border: 2px solid #f3f4f6; /* Optional: Abstand zum Track */
  visibility: visible;
}

/* Der Griff beim Darüberfahren (Hover) */
::-webkit-scrollbar-thumb:hover {
  background: black; /* Dunkleres Blau */
    visibility: visible;
}

.copy-btn {
  margin-top:10px;
  border: none;
  background: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
    transition: transform 0.15s ease, color 0.3s ease;
}

.copy-btn.erfolg {
    color: green;
    transform: scale(1.35);
}

.werke {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: bolder;
  text-align: center;

}
/* =========================================================
   BASIS
========================================================= */
.container {
  border: 2px solid black;
}
.flex-container {
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.floated-block { 
  float: left;
   width: 300px;
  padding: 20px 40px;
}
body {
  /* cursor: default; */
  word-wrap: break-word;
}
h1 {
  font-size: 2em;
  margin: 0;
}
h2 {
  font-size: 1.5em;
}
h3 {
    font-size: 1em;
  margin: 0;
}
h4 {
  font-style: italic;
  color: white;
  font-size: 1em;
margin: 10px 0 0 0;
}
h5 {
  color: white;
  font-size: 1em;
  margin: 0 0 -15px 30px;
}
h6 {
    font-size: 1.3em;
    margin: -9px 0 -9px 10px;
}
.ha6{
      font-size: 1.em;
    margin: -6px 0 0 -5;
}
a {
  text-decoration: none;
  color: #555555; 
cursor: pointer !important;
}
.links {
background-color: #f1f1f1;
  padding: 0 5px;
  border-radius: 30px;
}
.links:hover {
  background-color: #d3d3d3;;

}
p {
  margin: 0;
}
.text-div2 ul li a:hover {
  background-color: grey;
  border-radius: 20px;
  box-decoration-break: clone;
  padding: 0 10px;
  margin-left: -10px;
}
.register ul li a:hover {
  background-color: rgb(193, 193, 193);
  border-radius: 20px;
  box-decoration-break: clone;
  padding: 0 10px;
  margin-left: -10px;
}
.text-div2 ul li a {
  color: white;
}
nav ul li a:hover {
  background-color: rgb(193, 193, 193);
  border-radius: 20px;
}
.text-overlay {
  font-size: 1.1em;
  /* top: 308px; */
  position: relative;
  font-weight: bolder;
  color: white;
  background-color: black;
  text-align: center;
  margin: auto;
  width: 300px;
  display: inline-block;
  box-sizing: border-box; /* Sorgt dafür, dass Padding die 300px nicht vergrößert */
  padding: 5px 0;         /* Gibt dem Text oben und unten etwas schwarzen Raum */
}
  .bild-links {
    float: left;
margin: 10px;
width: 155px;
  }
img {
  /* display: block; */
  height: auto;
}
.bimg {
    cursor: zoom-in;
    width: 100%;
      width: 100% !important;     /* Zwingt das Bild, sich der Containerbreite anzupassen */
  max-width: 100% !important; /* Verhindert das Herausragen nach rechts */
  height: auto !important;    /* Hält das Seitenverhältnis absolut stabil */
  display: block;
}
/* =========================================================
   HEADER
========================================================= */

.header {
  display: flex;
  position: relative;
}

.quotation {
  font-size: 1.5em;
  font-style: italic;
  overflow: auto;
  margin-top: 5px;
  margin-left: 41px;
}

button {
  cursor: pointer;
  background-color: white;
  color: rgb(118, 117, 117);
font-size: 20px;

}
.homeButton {
  font-size: 1.3em;
  background-color: #dfdfdf;
  color: rgba(30, 30, 30, 0.5);
  padding: 5px 10px;
  display: block;
  border-radius: 48%;
  float: left;
  margin-right: 20px;
  /* position: fixed; */
}
.quelle {
  font-size: smaller;
  font-style: normal;
}



/* =========================================================
   GALLERIEN
========================================================= */
.gallery {
  position: relative; 
}
.gallery,
.gallery2,
.gallery3 {
  display: flex;
  gap: 5px;
  max-width: 100%;
}
      .gallery img {
        width: 100%; 
        height: auto; 
          text-align: center;
  font-size: 3em;
  margin: auto;
      }

.gallery2 img,
.gallery3 img {
  width: 100%;       /* Nimmt die volle Breite der Figure-Box ein */
  max-width: 300px;  /* Verhindert das Überdehnen (Ihr HTML-Wert) */
  height: auto;
  display: block;    /* Entfernt den unschönen kleinen Whitespace unter Bildern */
  margin: 0 auto;
}        
.gallery {
margin-bottom: 30px;
}      
.gallery2 {
  margin: 50px 0;
  align-items: center; /* Zentriert die Texte vertikal perfekt zum Bild */
}
.gallery3 {
  display: flex;
  flex-direction: row;
  gap: 3%;
  margin: 1% 5%;
}
.gallery3 img {
width: 100%;
  margin-bottom: 25%;
  cursor: default;
  margin-top: 10px;
}
.gallery5 {
  display: flex;
  gap: 15%;
  margin: 1% 15%;
}

.column {
  width: max-content;
}



/* =========================================================
   IMAGE CONTAINER
========================================================= */
/* .image-container a:hover {
background-color: green;
  border-radius: 20px;
  padding: 0 5px;
  margin-left: -5px;} */
.image-container {
  float: left;
  position: relative;
  overflow: visible;
  height: 500px;
}
.image-container2 {
/*float: left; */
overflow: visible;
  max-width: 100%;
  box-sizing: border-box;
}
.image-container3 {
  float: left;
  position: relative;
  overflow: visible;
}
.image-container4 a {
  display: inline-block; /* Verhält sich wie Text, behält aber feste Breiten bei */
  max-width: 200px;      /* Gleicher Wert wie beim Bild oben */
  vertical-align: top; 
}
/* Nur das Coverbild */
.image-container {
  float: left;
  position: relative;
  overflow: visible;
  height: 500px;
}
.image-container > a > img {
  width: 100%;
  max-width: 300px;
  border: 5px solid #222;
  /* cursor: pointer; */
}
.image-container li {
  font-size: 1.2vw;
  color: white;
  margin-left: 25%;
  margin-bottom: 0;
  width: max-content;
}
.image-container ul {
  padding-left: 0%;
  padding-top: 13%;
  margin-top: 23%;
  margin-left: 60%;
  overflow: unset;
}
/* =========================================================
   BUTTONS
========================================================= */

.btn {
  font-family: "Bree Serif", serif;
  background-color: lightgrey;
  font-size: 25px;
  padding: 10px 8px;
  border: none;
  cursor: pointer;
  color: black;
}
.btn2 {
font-size: 20px;
  padding: 4px 8px;
  border: none;
  cursor: pointer;
  border-radius: 18px;
}
.btn4 {
font-size: 20px;
  padding: 2px 8px;
  border: none;
  cursor: pointer;
  border-radius: 18px;
  background-color: #e9e9ed;
  width: fit-content;
  display: inline-block;
  text-align: left;
    background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;       /* Füllt den Container perfekt aus */
  display: block;
}
.btn3 {
  position: relative;
  left: 38%;
  background-color: lightgrey;
  font-size: 1vw;
  padding: 4px 8px;
  border: none;
  cursor: pointer;
  border-radius: 18px;
  top: -1.3%;
  color: black;
}
.button {
  background-color:transparent ;
}
.buttons {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.buttonsDown {
  text-align: center;
  margin-bottom: 20px;
}
.ueberschrift {
  font-size: 4em;
  font-weight: bolder;
  text-align: center;
}
.text-div {
  display: none;
  position: absolute;
  top: 100%; /* direkt unter dem Menüpunkt */
  left: 10px;
  z-index: 1000; /* damit es über anderem Inhalt liegt */
}
.text-div2 {
  display: none; 
  position: absolute;
  left: 0;
  top: 5%;
  color: white;
}
/* =========================================================
   OVERLAY (text-div3)
========================================================= */

/* .text-div3 {
   display: none;
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 4px;
  box-sizing: border-box;
  z-index: 10;
} */
 .text-div3 {
  z-index: 10;
} 

.text-div33 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}
.text-div4 {
background-color: lightgray;
  margin-top: 50px;
  margin-left: 160px;
  padding: 10px;
  font-size: 20px;
  width: max-content;
  z-index: 100;
  cursor: default;
}
.text-div5 {
background-color: lightgray;
  margin-top: 50px;
  margin-left: 380px;
  padding: 10px;
  font-size: 25px;
  width: max-content;
  z-index: 100;
}
    .langabsatz {
      margin-bottom: 0.5em;
    }
    .note {
      font: 0.8em serif;
    }
    .textcontainer {
  font: 1.5em serif;
  /* height: 200px; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  clear: both; 
      }     
    .langtext {
  max-width: 33em;
      }
.info {
display: none;
  position: relative;
  background: rgba(150, 150, 150, 0.9);
  padding: 16px;
  color: white;
  top: -450px !important;
  font-size: 20px;
  /* width: max-content;  deaktiviert, damit Kurzmachen Inhalt sitzt, wo alle Inahlte sitzen*/ 
  height: max-content;
  border: medium solid black;
  overflow-y: scroll;
}
.info2 {
display: none;
  position: relative;
  background: rgba(150, 150, 150, 0.9);
  padding: 16px;
  color: white;
  top: -450px !important;
  font-size: 20px;
  /* width: max-content;  deaktiviert, damit Kurzmachen Inhalt sitzt, wo alle Inahlte sitzen*/ 
  height: max-content;
  border: medium solid black;
  /* overflow-y: scroll; */
}
.text-div3.info2 {
  position: absolute;  /* Bleibt schwerelos, damit die kleinen Bilder nicht rutschen */
  top: 50px !important;
  left: 10px;
  
  /* HIER IST DIE RETTUNG: */
  width: auto;         /* Die Box wird nur so breit, wie der längste Text (z.B. der Verlagsname) */
  height: auto;        /* Die Box wird nur so hoch, wie die Zeilen Text untereinander brauchen */
  
  box-sizing: border-box;
  /* Ihr restlicher Code wie background: rgba..., padding etc. bleibt einfach stehen */
}


      .infoSammel {
display: none;
  position: relative;
  background: rgba(150, 150, 150, 0.9);
  padding: 16px;
  color: white;
  top: -450px !important;
  font-size: 20px;
  /* width: max-content;  deaktiviert, damit Kurzmachen Inhalt sitzt, wo alle Inahlte sitzen*/ 
  height: max-content;
  border: medium solid black;
  max-height: 400px;
  overflow-y: scroll;
}
.infoSammel33 {
  background: rgba(150, 150, 150, 0.95);
  color: white;
  font-size: 17.8px;
  height: 320px;
  left: 50%;
  transform: translateX(-50%);
}
/* Standardmäßig ist das Div sichtbar, außer es hat die Klasse .versteckt */
.infoSammelInhalt {
  position: relative;
  background: rgba(150, 150, 150, 0.9);
  padding: 16px;
  color: white;
  font-size: 20px;
  /* height: max-content; */
  border: medium solid black;
  max-height: 325px;
  overflow-y: scroll;
}

/* Diese Klasse steuert das Ausblenden */
.versteckt {
  display: none !important;
}

.infoUeber {
display: none;
  position: relative;
  background: rgba(150, 150, 150, 0.9);
  padding: 16px;
  color: white;
  top: -450px !important;
  font-size: 20px;
  /* width: max-content;  deaktiviert, damit Kurzmachen Inhalt sitzt, wo alle Inahlte sitzen*/ 
  height: max-content;
  border: medium solid black;
  overflow-y: scroll;
}
.infoPosLit {
display: none;
  position: absolute; /*statt relative*/
  background: rgba(150, 150, 150, 1);
  padding: 16px;
  color: white;
top: 40px !important;
  font-size: 20px;
  width: max-content;
  /* height: max-content; */
  border: medium solid black;
  margin-left: 0px;
}
.infoGallery {
  background-color: #969696e6;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  color: white;
}
/* allgemeiner Infotext */
.info5 {
    position: absolute;
    top: 0;
    width: max-content;
    max-width: 350px;

    display: none;   /* wird durch show() ein-/ausgeblendet */
    z-index: 100;
}
.infoPDF {
  display: none;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  padding: 1px;
  color: white;
  top: -180% !important;
  font-size: 20px;
  width: 524px;
  border: medium solid black;
}
.infoPDF2 {
  display: none;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  padding: 1px;
  color: white;
  top: -330px !important;
  font-size: 20px;
  width: 360px;
  border: medium solid black;
  margin-left:-40px;
}
.infoPDF3 {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    padding: 1px;
    color: white;
    top: -0% !important;
    /* font-size: 20px; */
    /* width: 524px; */
    /* border: medium solid black; */
    left: 0px;
}
.infoPDF4 {
    display: none;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  padding: 1px;
  color: white;
  top: -180% !important;
  font-size: 20px;
  width: fit-content;
  border: medium solid black;
  margin-left: auto;
  margin-right: auto;
}
.infoReihe {
  display: none;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  padding: 1px;
  color: white;
  top: -100% !important;
  font-size: 20px;
  width: 524px;
  border: medium solid black;
}
.einzelbild {
  top: 0;
  left: -25px;
  padding: 1px;
  width: 300px;
  height:auto;
}
.kreuz {
 position: absolute;
    top: 90px;
        right: 20px;
    z-index: 999;
    background: transparent;

    border: none;
    /* border-radius: 4px; */
    /* padding: 10px 20px; */
    font-weight: bolder;
    font-family: sans-serif;
    cursor: pointer;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); */
    font-size: 20px;


    color: white;
}
/* Overlay-Bilder dürfen NICHT global skaliert werden */
.text-div3 img {
  height: 100%;
  width: auto;
  max-width: none;
}
.einzelbild img {
  top: 0;
  padding: 1px;
  /* width: 420px; */
  height: 625px;
  max-width: 100%;            /* Verhindert, dass Pop-up-Bilder auf kleinen Handys ausbrechen */
  height: auto;
  position: absolute;
  left: -5px;
}
.miniBild {
  max-width: 20px!important;
  height: auto;
}
.text-div1 img {
  height: 100%;
  width: auto;
  max-width: none;
}
.text-div2 img {
  height: 100%;
  width: auto;
  max-width: none;
}
.text {
color: white;
  font-weight: bold;
  font-size: 10pt;
  margin: 4px 0 0 0;
  text-align: left;
  width: 65px;
  display: inline-block;
}
/* PDF */
.pdf-frame {
  height: 100%;
  width: auto;
  border: none;
}

/* =========================================================
   TEXT
========================================================= */

.title {
  text-align: center;
  font-size: 3em;
  margin: auto;
  flex: 1; /* Gibt beiden Textteilen den gleichen Platz links und rechts */
}

.hint {
  font-weight: bold;
  color: green;
  font-size: 31px;
  text-align: center;
  margin: 20px;
  z-index: 1;
  position: relative;
}

/* =========================================================
   NAVIGATION
========================================================= */

nav {
  background-color: lightgrey;
}

nav ul {
  padding: 0;
  margin-left: 20px;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul ul {
  display: flex;
  flex-direction: column;
  background-color: lightgray;
  width: max-content;
  font-size: 20px;
}

nav ul ul li {
  display: block;
  margin: 5px 10px;
}

nav a {
  display: block;
  padding: 0 10px;
  line-height: 30px;
  border-radius: 20px;
  /* margin-left: 10px; */
}
/* =========================================================
   SONSTIGES
========================================================= */

.audio {
  /* display: flex; */
  justify-content: center;
}

.register {
  background-image: url("Bilder/Hamburg2.png");
  padding: 25px;
  font-size: 2em;
  color: rgba(30, 30, 30, 0.5);
  max-height: 400px;
  overflow: scroll;
}

.mehrspaltig {
  font-size: 2em;
  font-weight: bold;
  columns: 10 20em;
  column-span: none;
  column-gap: 1.5em;
  column-rule: solid gray 2px;
  padding: 10px;
  /* text-align: justify; */
  hyphens: auto;
}
.zitat {
  font-style: italic;
  font-weight: bolder;
}
figure {
  position: relative;
  margin: 0;
  display: inline-flex;    /* Schrumpft die Box exakt auf die Bildbreite zusammen */
  flex-direction: column;  /* Zwingt Bild, Audio und Text untereinander */
  align-items: center;
  /* width: 300px;            Fixiert die Breite exakt auf Ihre Bildgröße */
}
figure audio {
  width: 100%;
  margin-top: 5px;         /* Kleiner, sauberer Abstand direkt unter dem Bild */
}
/* Bilder auf der linken Galerieseite */
.figure.left .infoGallery {
    right: 100%;
    margin-right: 10px;
       left: auto;
}
/* Bilder auf der rechten Galerieseite */
.figure.right .infoGallery {
    left: 100%;
    margin-left: 10px;
    right: auto;
}

strong {
  color:grey;
}
.sort-controls {
  display: flex;
  justify-content: center; /* Schiebt alle Elemente zusammen in die Mitte */
  align-items: center;     /* Zentriert die Elemente vertikal */
  gap: 2.5em;               /* Bestimmt den genauen Abstand zwischen Buttons und Titel */
  width: 100%;             /* Nutzt weiterhin die gesamte Seitenbreite */
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.sort-controls button {
 font-size: clamp(0.9rem, 3.5vw, 1.3rem);
  padding: 0.35em 1em; 
  background-color: #d3d3d3;
  color: rgba(30, 30, 30, 0.5);
  /* padding: 5px 15px; */
  display: block;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;          /* Verhindert, dass die Buttons bei wenig Platz gequetscht werden */
}

.sort-controls .registerName {
  margin: 0;               /* Entfernt Standard-Abstände von h2 */
  text-align: center;
  /* flex-grow wurde entfernt, damit das h2 nicht mehr den ganzen Platz einnimmt */
}

.sort-controls button.active {
  background: #bbb;
  color: rgba(30, 30, 30, 0.8);
  cursor: default;
}
.tooltip {
position: relative;
  /* text-align: center;
  margin-left: auto;
  margin-right: auto; */
}

.tooltip .tooltiptext {
visibility: hidden;
  width: max-content;
  background-color: #cfcccc;
  color: #000;
  text-align: center;
  border-radius: 20px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 39.5%;
  font-size: 0.7em;
  font-weight: lighter;

  /* margin-left: -60px; */
  /* margin-left: auto;
  margin-right: auto; */
  opacity: 0;
  transition: opacity 0.3s;
  height: max-content;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
/* margin-left: inherit;
  margin-right: inherit; */
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.pulse {
animation: pulse 7s infinite;
  margin-left: auto;
  margin-right: auto;
        }
                @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
.pulse2 {
animation: none;
 } 
.seo-hidden-headline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* span {
  font-size: 0.7em;
  font-style: italic;
} */
 span {
  font-size: 1.7em;
}
.caption {
 font-size: clamp(1em, 1.5vw, 2em);
  margin-left: 20px
}
.gallery-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 1. Text | 2. Bild/Audio | 3. Text */
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
}

/* Die H1 verhält sich jetzt unauffällig, liefert aber den Text */
.gallery-headline {
  display: contents; /* WICHTIG: Löst die H1 als Box auf, sodass die Spans direkt ins Grid rutschen */
  font-weight: normal;
}

.title-part {
  display: block;
  line-height: 1.2;
}
/* Steuerung der Reihenfolge im Grid (flexibel verschiebbar) */
.title-part:first-of-type {
  text-align: center;
  grid-column: 1; /* Erster Text ganz links */
  grid-row: 1;
}

.audio-container {
  display: flex;
  flex-direction: column;
  align-items: centopter;
  text-align: center;
  grid-column: 2; /* Bild/Audio genau in die Mitte */
  grid-row: 1;
}

.audio-container img {
  display: block;
  margin-bottom: 10px;
}

.title-part:last-of-type {
  text-align: center;
  grid-column: 3; /* Zweiter Text ganz rechts */
  grid-row: 1;
}

/* REAKTIONSFÄHIG (RESPONSIVE) für Smartphones */
/* REAKTIONSFÄHIG (RESPONSIVE) für kleinere Bildschirme */
@media (max-width: 1050px) { /* Höherer Wert, damit es früher sauber umspringt */
  .gallery-container {
    display: flex;
    flex-direction: column; /* Stapelt die Elemente sauber untereinander */
    align-items: center;
    text-align: center;
    gap: 15px;
  }
  
  /* Reihenfolge festlegen (order): */
  .title-part:first-of-type {
    text-align: center;
    order: 1; /* Autor springt nach GANZ OBEN */
    margin: 10px 0 0 0;
    font-size: 1.4em; /* Optional: Auf Handys leicht anpassen */
  }
  
  .audio-container {
    order: 2; /* Bild und Audio landen in der MITTE */
  }
  
  .title-part:last-of-type {
    text-align: center;
    order: 3; /* Buchtitel springt nach GANZ UNTEN */
    margin: 0 0 10px 0;
    font-size: 1.4em;
  }
  .einzelbild {
  max-height: 80vh;        /* Begrenzt die Höhe auf maximal 80% der Bildschirmhöhe */
  overflow-y: auto;        /* Zeigt automatisch einen vertikalen Scrollbalken, wenn nötig */
  -webkit-overflow-scrolling: touch; /* Sorgt für butterweiches Scrollen auf dem iPad/iOS */
}
.kreuz {
    top: 30px;
    right:110px;
    font-size: 40px;
    color: black;
}
  .infoReihe .bild-reihe {
    flex-direction: column; 
    gap: 15px; /* Abstand zwischen den Bildern, wenn sie untereinander stehen */
  
  }

  /* Damit die Bilder auf dem Handy nicht riesig werden, begrenzen wir ihre Breite */
  .infoReihe .bild-reihe img {
    max-width: 90%; /* Verhindert das Rausfliegen rechts */
    height: auto;
  }
    .text-div3.infoReihe {
    background: transparent !important; /* Entfernt jegliche Hintergrundfarbe */
    box-shadow: none !important;       /* Entfernt eventuelle Schatten, die schwarz wirken */
  }
}
@media screen and (max-width: 750px) {
  .gallery2 {
    flex-direction: column;
    text-align: center;
    margin: auto;
    gap: 20px; /* Gibt den Blöcken auf dem Handy etwas Luft zum Atmen */
  }
  .infoReihe .bild-reihe {
    flex-direction: column; 
    gap: 15px; /* Abstand zwischen den Bildern, wenn sie untereinander stehen */
        display: block !important; 
  }

  /* Damit die Bilder auf dem Handy nicht riesig werden, begrenzen wir ihre Breite */
  .infoReihe .bild-reihe img {
    width: 100% !important;   /* Zwingt das Bild auf 100% Smartphone-Breite */
    max-width: 100% !important;
    height: auto;
    margin-bottom: 15px;      /* Abstand nach unten zum nächsten Bild */
  }
    .text-div3.infoReihe {
    background: transparent !important; /* Entfernt jegliche Hintergrundfarbe */
    box-shadow: none !important;       /* Entfernt eventuelle Schatten, die schwarz wirken */
        width: 100% !important;
    max-width: 100%;
  }
}
.listenpunkt {
  display: flex;
  align-items: center;
  font-size: inherit;
}
/* 1. Die schwarze Box passt sich jetzt millimetergenau an die Bilder an */
/* 1. Die schwarze Box für den PC */
/* 1. Die schwarze Box darf auf dem PC breit genug für 2 Bilder werden */
/* 1. Die schwarze Box schwebt frei und bricht aus dem engen Container aus */
.text-div3.infoReihe {
    position: relative;
    left: 0;
    /* width: 1640px !important; */
    /* max-width: 95vw; */
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    box-sizing: border-box;
    z-index: 999;
    bottom: auto;
}

/* 2. Die Flexbox ordnet die Bilder nebeneinander an */
.bild-reihe {
  display: flex;
  flex-wrap: wrap;          /* Erlaubt den Umbruch ab dem 3. Bild */
  gap: 20px;
  width: max-content;
}

/* 3. Jedes Bild behält seine riesige Pracht */
.bild-reihe img {
  width: 300px;             /* Deine perfekte PC-Lesegröße */
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}
/* Der Container für die kleinen Bilder direkt unter dem großen Bild */
.kleine-bilder-reihe {
  display: flex;
  justify-content: space-between; /* Verteilt die Bilder gleichmäßig von links nach rechts */
  gap: 6px;                       /* Der Abstand zwischen den kleinen Bildern */
  width: 100%;                    /* Nutzt exakt 100% der Breite des großen Bildes darüber */
  margin-top: 8px;                /* Ein kleiner, sauberer Abstand nach oben zum Hauptbild */
}

/* Die Links um die Bilder herum */
.kleine-bilder-reihe a {
  flex: 1;                        /* Der Zauberbefehl: Teilt den Platz perfekt auf (egal ob 3, 4 oder 5 Bilder) */
  display: block;
}

/* Die Bilder selbst */
.kleine-bilder-reihe img {
  width: 100%;                    /* Jedes Bild füllt seinen berechneten Link-Platz voll aus */
  height: auto;                   /* Behält das korrekte Seitenverhältnis bei */
  display: block;
}
/* 1. Wir nehmen dem Button im Image-Container jegliches inneres Passepartout weg */
.image-container button {
  background: none;         /* Entfernt eventuelle Hintergrundfarben des Buttons */
  border: none;             /* Entfernt Standard-Rahmen */
  padding: 0;               /* Setzt das innere Passepartout radikal auf 0 */
  margin: 0;                /* Entfernt äußere Abstände */
  width: 100%;              /* Der Button nutzt die volle Breite des Containers */
  cursor: pointer;          /* Zeigt weiterhin die klickbare Hand an */
  display: block;           /* Verhindert unsichtbare Abstände um den Button */
}

/* 2. Wir zwingen das große Bild, die Box komplett und lückenlos auszufüllen */
.image-container .bimg {
  width: 100%;              /* Das Bild dehnt sich bis zum Rand der Box aus */
  height: auto;             /* Proportionale Höhe */
  display: block;           /* Ganz wichtig: Löscht den kleinen weißen Spalt UNTER dem Bild */
  margin: 0;                /* Keine eigenen Abstände */
}
.pdf-header {
  text-align: center;
}
.pdf-item {
  font-size: 50px;
  margin: 80px;
  border: none;
}