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 }
.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 }
.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 }

/* chatties open window für iframe, embed und video */   
body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0px;
            padding: 0px;
        }

        .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: 90%; /* 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: 1300px; /* youtube videos über htm datei */
            height: 800px;
            max-height: 80vh;
  }

        .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: 5px;
            padding: 8px 8px; /* Button als auch preview Rahmen - höhe / breite*/
            font-size: 14px;
            background-color: #101010; /* farbe hintergrund */
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;

  /* cursor: pointer;*/
           /* border: 0px solid #ddd;*/
           /* border-radius: 1px;*/
           /* padding: 5px; */
           /* transition: transform 5.2s 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);
        }
/* chatties open window für iframe, embed und video */