body {
	background-color: #101010;	
}



/* kein horizontales scrollen auf Hauptseite */
**body {
 overflow-x: hidden; /* Hide scrollbars */
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}


:root{
  scrollbar-face-color: rgb(164,158,158); /* Firefox 63 compatibility */
  scrollbar-track-color: rgb(53,53,53); /* Firefox 63 compatibility */
  scrollbar-color: rgb(164,158,158) rgb(34,34,34);
  scrollbar-width: thin;
}

   
.block12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: justify; word-spacing: normal }
.block14 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: justify; word-spacing: normal }
.links12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; letter-spacing: normal; text-align: left; word-spacing: normal }
.mitte10 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mitte12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mitte14 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.lesen10 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }     
.lesen12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }     
.lesen14 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }     
.mitte16 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mitte20 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mitte30 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 30px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mitte34 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 34px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mitte38 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 38px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }
.mittetitel24 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing: normal; text-align: center; word-spacing: normal }

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0px; /* muss auf 0 sonst zu weite abstände zwischen div container */
            padding: 0px; /* muss auf 0 sonst ränder auf der gesamten Seite */
        }

        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .lightbox.active {
            visibility: visible;
            opacity: 1;
        }

  .lightbox-content {
    max-width: 100%; /* Für responsive Design */
    max-height: 90%;
   
    background: black;
    padding: 1px; /*rahmendrumherum*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 5.5);
    border-radius: 10px;
    position: relative;
}

        .lightbox-content iframe {
            width: 1200px; /* youtube videos über htm datei */
            height: 980px;
            max-height: 90vh;
  }

        .lightbox-content img {
            width: 100%;
            height: auto;
            max-height: 80vh;
  }
        .lightbox-content video {
         width: 580px; /* Feste Breite / hier gilt nur für echte Videos vom Server */
         height: 335px; /* Feste Höhe */
                        max-height: 80vh;
        }

        .preview {
            margin: 10px;
/*            width: 257px; wenn aktiviert tötet die Bildpreview */
            font-family: Arial, Helvetica, sans-serif;
            padding: 4px 4px; /* Button als auch preview Rahmen - höhe / breite*/
            box-shadow: 0 4px 10px rgba(0, 0, 0, 5.5);
            font-size: 14px;
            background-color: #101010;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
 
 .preview2 {
            margin: 10px;
            width: 257px;
            font-family: Arial, Helvetica, sans-serif;
            padding: 4px 4px; /* Button als auch preview Rahmen - höhe / breite*/
            box-shadow: 0 4px 10px rgba(0, 0, 0, 5.5);
            font-size: 14px;
            background-color: #101010;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }      
.preview:hover {
transform: scale(1.00);
        }
   </style>