@font-face {
	  font-family: 'Noto Serif';
	  src: url('fonts/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype');
	  font-weight: 100 900;
	  font-style: normal;
	}
	
	@font-face {
	  font-family: 'Noto Serif';
	  src: url('fonts/NotoSerif-Italic-VariableFont_wdth,wght.ttf') format('truetype');
	  font-weight: 100 900;
	  font-style: italic;
	}	
		
	@page { size: 21cm 29.7cm; margin: 2cm }
	p { line-height: 90%;  margin: 2px; background: transparent;  }
	a:link { color: #000080; text-decoration: none  }
	html, body {
  height: 100%;
  margin: 0;
	}

		 
     h1{
         color: #333;
         
     }

     ul {
        /*list-style: none;  entfernt Standardpunkte */
         padding: 0;
     }

     ul li {
         background-color: #FFFFFF;
         margin-bottom: 10px;
         padding: 7px 10px;
         border-radius: 8px;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         position: relative;
         padding-left: 10px;
         font-size: 20px;
     }

     ul li::before {
         position: absolute;
         left: 10px;
         top: 50%;
        /* transform: translateY(-50%);*/
     }
     body {
		  display: flex;
		  flex-direction: column;
		  min-height: 100vh; /* gesamte Höhe des Fensters */
		  margin: 0;
		  background-color:beige;
		  font-family: 'Noto Serif', serif;
		}
		main {
		  flex: 1; /* füllt den verfügbaren Platz */
		}
		.content {
		  flex: 1;
		}
		footer {
		  background: #ddd;
		  text-align: center;
		  padding: 10px;
		 }
		
		.rund:hover {
		  opacity: 0.8;
		}
		
		.rund {
		  width: 12vw;         /* Größe */
		  height: auto;
		  border-radius: 50%;   /* macht es rund */
		  object-fit: cover;    /* Bild passt sich an */
		}
		
		  h2 {
	    text-align: center;
	    margin-top: 30px;
	  }
		/* Container zentriert beides gemeinsam */
		.galerie-container {
		 max-width: 80%;
	    margin: 30px auto;
		 padding: 0;
		}
		
		/* Überschrift zentriert innerhalb des Containers */
		.galerie-container h2 {
		  text-align: center;
		  margin: 20px 0 10px 0;
		}	
	
	  /* --- Galerie-Raster --- */
	  .galerie {
	  	 display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	    gap: 10px;

	    padding: 0 10px;
	    flex: 1; margin-left: 5%; margin-top: 3%; width: 80%; font-size: 14pt; line-height: 100%; text-align: left;
	    
	  }
	
	  .galerie img {
	    width: 100%;
	    height: 140px;
	    object-fit: cover;
	    border-radius: 8px;
	    cursor: pointer;
	    transition: transform 0.2s;
	    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	  }
	
	  .galerie img:hover {
	    transform: scale(1.05);
	  }
	
	  /* --- Lightbox --- */
	  .lightbox {
	    display: none;
	    position: fixed;
	    z-index: 999;
	    padding-top: 40px;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0,0,0,0.9);
	  }
	
	  .lightbox:target {
	    display: block;
	  }
	
	  .lightbox img {
	    display: block;
	    margin: auto;
	    max-width: 90%;
	    max-height: 80vh;
	    border-radius: 10px;
	    box-shadow: 0 0 20px rgba(255,255,255,0.3);
	  }
	
	  /* Schließen-Button */
	  .close {
	    position: absolute;
	    top: 15px;
	    right: 35px;
	    color: white;
	    font-size: 40px;
	    font-weight: bold;
	    text-decoration: none;
	  }
	
	  .close:hover {
	    color: yellow;
	  }
	
	  /* Navigation */
	  .nav {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    color: white;
	    font-size: 60px;
	    text-decoration: none;
	    font-weight: bold;
	    padding: 10px;
	    user-select: none;
	  }
	
	  .nav:hover {
	    color: yellow;
	  }
	
	  .prev { left: 20px; }
	  .next { right: 20px; }
	  
	  .unterschrift {
		  font-size: 1.2em;
		  color: white;
		  margin-top: 15px;
		  line-height: 1.5; 
		}
		
		.tooltip a {
		  position: relative;
		  display: inline-block;
		}
				
		/* Der Tooltip-Text selbst */
		.tooltip .tooltiptext {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  background: rgba(255, 255, 255, 0.7);
		  color: black;
		  padding: 0.6rem 1rem;
		  border-radius: 6px;
		  text-align: center;
		  opacity: 0;
		  transition: opacity 0.3s ease;
		  pointer-events: none; /* Maus bleibt beim Bild */
		}

		/* Sichtbar beim Hover oder Fokus */
		.tooltip:hover .tooltiptext,
		.tooltip:focus-within .tooltiptext {
		  opacity: 1;
		}