body {background-color:#000;}

#radio {margin-left:10px;margin-top:36px;}

/* Uhr */
/* Basis-Stile */
.logooff {
    margin-left: 27px;
    margin-top: -6px;
    width: 390px;
    height: auto;
}

#uhr {
    float: inline-start;
    margin-left: 435px;
}

/* Media Queries */

/* Für große Desktops (ab 1200px) */
@media screen and (min-width: 1200px) {
    /* Basis-Stile bleiben unverändert */
}

/* Für Laptops (zwischen 992px und 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .logooff {
        width: 340px; /* Etwas kleinere Breite */
    }
    
    #uhr {
        margin-left: 380px; /* Angepasster Abstand */
    }
}

/* Für Tablets (zwischen 768px und 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .logooff {
        width: 250px; /* Noch kleinere Breite */
		margin-left: 27px;
		margin-top: 8px;
    }
    
    #uhr {
        float: inline-start;
        margin-left: 280px;
    }
}

/* Für Smartphones (unterhalb von 768px) */
@media screen and (max-width: 767px) {
    .logooff {
        width: 250px;
		margin-left: 27px;
		margin-top: 8px;
    }
    
    #uhr {
        float: inline-start;
        margin-left: 280px;
    }
}



#heading {width:1900px;}

/* Check_Box */
font-weight
input {margin-top:7px;margin-left:-6px;}

.logout_bild  {
	margin-right:10px;
	margin-top:-19px;
	margin-left:10px;
	height:30px;
	width:37px;float:right;
}

input[type="checkbox"]#check_status1 {
    -moz-appearance: None;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-image: url(images_logout/unchecked2.png);
    background-size: 16px 16px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Middle;
}

input[type="checkbox"]#check_status1:checked {
    background-image: url(images_logout/checked2.png);
}

input[type="checkbox"]#check_status2 {
    -moz-appearance: None;
    -webkit-appearance: none;
    width: 34px;
    height: 20px;
    background-image: url(images_logout/unchecked3.png);
    background-size: 34px 20px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Middle;margin-top:3px;
}

input[type="checkbox"]#check_status2:checked {
    background-image: url(images_logout/checked3.png);
}

input[type="checkbox"]#check_status3 {
    -moz-appearance: None;
    -webkit-appearance: none;
    width: 34px;
    height: 20px;
    background-image: url(images_logout/unchecked4.png);
    background-size: 34px 20px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Middle;margin-top:3px;
}

input[type="checkbox"]#check_status3:checked {
    background-image: url(images_logout/checked4.png);
}

input[type="checkbox"]#check_status4 {
    -moz-appearance: None;
    -webkit-appearance: none;
    width: 44px;
    height: 27px;
    background-image: url(images_logout/unchecked5.png);
    background-size: 44px 27px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Middle;margin-top:0px;margin-left:1px;float:left
}

input[type="checkbox"]#check_status4:checked {
    background-image: url(images_logout/checked5.png);
}

input[type="checkbox"]#check_status5 {
    -moz-appearance: None;
    -webkit-appearance: none;
    width: 44px;
    height: 30px;
    background-image: url(images_logout/unchecked6.png);
    background-size: 44px 30px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Middle;margin-top:0px;margin-left:-2px;float:left
}

input[type="checkbox"]#check_status5:hover {
    -moz-appearance: None;
    -webkit-appearance: none;
    width: 44px;
    height: 30px;
    background-image: url(images_logout/unchecked6_hover.png);
    background-size: 44px 30px;
    background-position: Center Center;
    border: none;
    outline: none;
    vertical-align: Middle;margin-top:0px;margin-left:-2px;float:left
}

input[type="checkbox"]#check_status5:checked {
    background-image: url(images_logout/checked6.png);
}
/* Check_Box ENDE */







::-webkit-scrollbar {
  background: #000;
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #000;
}

::-webkit-scrollbar-thumb:hover {
  background: #000;
}
/* Scrollbar Handle ENDE */

/* Content Container */
.content_container {
    background-color: #000;
    padding-left: 20px;
	padding-right: 20px;
    font-family: Arial, sans-serif;
	width:65%;/* 850px */
	margin-left:14.7%;/* 20px */    margin-top: -108px;
}
.content_container_tools {
    background-color: #000000;
    padding: 20px;
    font-family: Arial, sans-serif;
	width:97%;
	margin-left:20px;
}

.heading_h1 {
    color: #ff9900;
    font-size: 28px;
    margin-bottom: 20px;
}

.heading_h2 {
    color: #66ccff;
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.heading_h3 {
    color: #0dffbe;
    font-size: 19px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.heading_h4 {
    color: #a4f800;
    font-size: 17px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.text_content {
    color: #fff6f2;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.list_privacy {
    color: #ffbf00;
    font-size: 16px;
    line-height: 1.6;
    margin-left: 20px;
    margin-bottom: 15px;
}

.list_privacy li {
    margin-bottom: 10px;
}

.list_privacy strong {
    color: #ff6600;
}

.list_privacy_green {
    color: #ffbf00;
    font-size: 16px;
    line-height: 1.6;
    margin-left: 20px;
    margin-bottom: 15px;
}

.list_privacy_green li {
    margin-bottom: 10px;
}

.list_privacy_green strong {
    color: #20ff52;
}

.list_privacy_light_orange {
    color: #ffbf00;
    font-size: 16px;
    line-height: 1.6;
    margin-left: 20px;
    margin-bottom: 15px;
}

.list_privacy_light_orange li {
    margin-bottom: 10px;
}

.list_privacy_light_orange strong {
    color: #ff8f00;
}

/* CSS Code */
.script_css strong {margin-left: 12px;}

.script_css {background-color:#33185f;color:#00aaff;padding:5px 10px 5px 10px;border-radius:20px 20px 0px 0px;}

.pre_css {background-color:#251145;color:#7aaeff;padding:20px 20px 20px 20px;border-radius:0px 0px 20px 20px;margin-top: -5px;font-size: 16px;}


/* HTML Code */
.script_html strong {margin-left: 12px;}

.script_html {background-color:#4f1f09;color:#ffa341;padding:5px 10px 5px 10px;border-radius:20px 20px 0px 0px;}

.pre_html {background-color:#3b1706;color:#ffca00;padding:20px 20px 20px 20px;border-radius:0px 0px 20px 20px;margin-top: -5px;font-size: 16px;}


/* PHP Code */
.script_php strong {margin-left: 12px;}

.script_php {background-color:#530912;color:#ffa341;padding:5px 10px 5px 10px;border-radius:20px 20px 0px 0px;}

.pre_php {background-color:#3b060d;color:#ffca00;padding:20px 20px 20px 20px;border-radius:0px 0px 20px 20px;margin-top: -5px;font-size: 16px;}


/* JAVA Code */
.script_java strong {margin-left: 12px;}

.script_java {background-color:#4b0946;color:#ffa341;padding:5px 10px 5px 10px;border-radius:20px 20px 0px 0px;}

.pre_java {background-color:#3b0637;color:#ffca00;padding:20px 20px 20px 20px;border-radius:0px 0px 20px 20px;margin-top: -5px;font-size: 16px;}

/* Tooltip */
.copy-tooltip {
    display: none;
    position: absolute;
    background: #000;
    color: #ff0;
    padding: 5px 10px;
    font-size: 14px;
    z-index: 1001;
    pointer-events: none;
}

/* Zentrierte Benachrichtigung */
.copy-notification {
    position: fixed;
    top: 50%; /* Vertikal zentrieren */
    left: 50%; /* Horizontal zentrieren */
    transform: translate(-50%, -50%); /* Exaktes Zentrieren */
    background: #020;
    color: #ff0;
    padding: 15px 30px;
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    opacity: 1;
    transition: opacity 0.3s;
    text-align: center;
    min-width: 200px;
}

/* Kopierbarer Text */
.copyable_text {
    cursor: pointer;margin-top:-20px;margin-bottom:-40px;
}

.extern_link {
    color: #ffee00;
	text-decoration:none;
}

.extern_link:hover {
    color: #ffa939;
	text-decoration:none;
}

.intern_link {
    color: #a6ff00;
	text-decoration:none;
}

.intern_link:hover {
    color: #ffa939;
	text-decoration:none;
}

.list_item {
    padding-left: 40px;
    position: relative;
	color:#c3ff66;
}

.list_item::before {
    content: "➤";
    position: absolute;
    left: 0;
	color:#ff0;
	top:-3px;
}

.list_item_blue_green {
    padding-left: 40px;
    position: relative;
	color:#fbff55;
}

.list_item_blue_green::before {
    content: "➤";
    position: absolute;
    left: 0;
	color:#608cff;
	top:-3px;
}





/* Footer */

.footer_main {
    background-color: #1c1c45;
    padding: 20px 0;
    margin-top: 50px;
}

.footer_content {
    margin: 0 auto;
    text-align: center;
}

.footer_nav {
    margin-bottom: 15px;
}

.footer_link {
    color: #b0b0b0;
    text-decoration: none;
    margin: 0 10px;
    font-size: 18px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.footer_link:hover {
    color: #ffffff;
}

.footer_copyright {
    color: #808080;
    font-size: 16px;
}

.copyright_text {
    color: #0f0; /* Helles Grün für den Text */
}

.copyright_year {
    color: #ff0; /* Gelb für die Jahreszahlen */
}

.impressum_text {color:#fff;line-height:1.9;font-size:18px;}

.span_TextStyle_1 {color:#a1abff;}


/* TOC Styles */

#toc-container {
  position: relative;
  padding-top: 30px;
  margin-top: 10px;
  margin-left:4px;
  margin-bottom:-10px;
}

.toc-toggle-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.toc-toggle {
  border: none;
  padding: 5px;
  cursor: pointer;
  background-color: #004eaf;
  color: #ff0;
  border-radius: 5px;
}

.toc-toggle:hover {
  background-color: #6c6300;
}

.toc-container[data-open="true"] .toc-toggle {
  background-color: #050;
  color:#ff0;
}

.toc-container[data-open="true"] .toc-toggle:hover {
  background-color: #6c6300;
  color:#fff;
}

#toc_BG {
  background-color: #061406;
  display: none; /* Standardmäßig ausgeblendet */
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #6c8f00;
}

#toc-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.toc-list a {
  text-decoration: none;
}

.toc-list li:nth-child(odd) a {
  color: #fff574 !important;
}

.toc-list li:nth-child(even) a {
  color: #ffc63f !important;
}

.toc-list li:nth-child(odd) a:hover {
  color: #ff0 !important;
  background-color:#050;
  display:block;
}

.toc-list li:nth-child(even) a:hover {
  color: #ff0 !important;
  background-color:#050;
  display:block;
}

.toc-list a:hover {
  text-decoration: none;
}

.toc-list a:active {
  color: #FF0000 !important;
}

.toc-list li {
  margin-bottom: 15px;
  white-space: nowrap;
}

.toc-list li:last-child {
  margin-bottom: 0;
}



/* Back to Top */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  /* display: none; */ /* Standardmäßig ausgeblendet */
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #ffba13;
}

/* Content Images */

.content_Images {
  float: left;
  height: 250px;
  width: auto;
  margin-top:24px;
  margin-right: 15px;
}

.content_Images_Sub {
  float: left;
  height: 250px;
  width: auto;
  margin-top:24px;
  margin-right: 15px;
}

/* Allgemeine Textauswahl */

::selection {
    color: #fff;
    background: #a93f3f;
}

/* Spezifische Textauswahl für Überschriften */
h1::selection {
    color: #fff;
    background: #660000;
}

h2::selection {
    color: #fff;
    background: #3498db;
}

h3::selection {
    color: #fff;
    background: #f88000;
}

h4::selection {
    color: #fff;
    background: #27ae60;
}

/* Textauswahl für Links */
a::selection {
    color: #fff;
    background: #f39c12;
}




/* Laufleiste */
/* Scrollbar-Styling für Webkit-Browser (Chrome, Edge, Opera) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #3d0300 0.00%, #471d00 46.86%, #4d3000 100.00%);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a600ff4d 0.00%, #ffbb004d 100.00%);
    border-radius: 8px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff00006b 0.00%, #ff00e16b 100.00%);
}

::-webkit-scrollbar-button:single-button {
    /* background-color: #ffffff; */
    display: block;
    border-style: solid;
    height: 13px;
    width: 16px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #ff0000 transparent;
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 8px 8px 0 8px;
    border-color: #ff9500 transparent transparent transparent;
}


/* Suche Tag Kategorie */

.tags-kategorien {
    margin: 20px 15.7%;
}

.tags-container, .kategorien-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tags-container h3, .kategorien-container h3 {
    margin: 0 10px 0 0;
    font-size: 1em; /* Anpassen der Schriftgröße nach Bedarf */
    white-space: nowrap;
	color: #ffb300;
}

.tags-list, .kategorien-list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.tags-list li, .kategorien-list li {
    margin-right: 10px;
    margin-bottom: 5px;
}

.tags-list a, .kategorien-list a {
    display: inline-block;
    text-decoration: none;
    color: #fffb37;
    background-color: #6d0a00;
    padding: 0px 5px;
    border-radius: 3px;
    line-height: 1.5;
}

.tags-list a:hover, .kategorien-list a:hover {
    background-color: #0047b1;
    color: #fff;
}

/* Spoiler Content */

.SpoilerCollapsibleContainer {
  width: 100%;
  margin: 10px 0;
}

.SpoilerCollapsibleHeader {
  background-color: #431717;
  color: #0f0;
  padding: 6px;
  cursor: pointer;
  display: flex;
  transition: background-color 0.3s;
}

.SpoilerCollapsibleContainer.active .SpoilerCollapsibleHeader {
  background-color: #4f2c00; /* Blau im geöffneten Zustand */
}

.SpoilerCollapsibleHeader:hover {
  background-color: #4f2c00;
}

.SpoilerCollapsibleContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #190404;
  border: 1px solid #000;
  border-top: none;
}

.SpoilerText {color: #ffb300;margin-left:20px;margin-right:20px;}

.SpoilerCollapsibleContainer.active .SpoilerCollapsibleContent {
  max-height: 1500px;
}

.SpoilerTitle {
  color: #ff0;
  font-weight:700;
  margin-left:30px;
}

.SpoilerToggleText_Open {
  color: #0f0;
  cursor: pointer;
  font-weight:700;
  margin-left: 25px;
}

.SpoilerToggleText_Close {
  color: #d26d00;
  cursor: pointer;
  font-weight:700;
  margin-left: 25px;
}
.video {width:500px;}


/* Tabellen */

.tab_list_1 {
    display: grid;
    grid-template-columns: max-content; /* 1 Spalte */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_2 {
    display: grid;
    grid-template-columns: max-content max-content; /* 2 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_3 {
    display: grid;
    grid-template-columns: max-content max-content max-content; /* 3 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_4 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content; /* 4 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_5 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content; /* 5 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_6 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content; /* 6 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_7 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content; 				  /* 7 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_8 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content; 				 /* 8 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_9 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content; 				/* 9 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

.tab_list_10 {
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content; 	/* 10 Spalten */
    grid-auto-rows: 25px;
    grid-column-gap: 7px;
    grid-row-gap: 1px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
}

/* Header-Styles */

.header1 {
    font-size: 17px;
    font-weight: 700;
    color: #edeeff;
    background-color: #2d348b;
    padding-left: 10px;
    padding-right: 14px;
}

.header2 {
    font-size: 17px;
    font-weight: 700;
    color: #f6ebff;
    background-color: #5a3478;
    padding-left: 10px;
    padding-right: 14px;
}

.header3 {
    font-size: 17px;
    font-weight: 700;
    color: #ffe9fd;
    background-color: #73336c;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header4 {
    font-size: 17px;
    font-weight: 700;
    color: #ffeaf6;
    background-color: #783459;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header5 {
    font-size: 17px;
    font-weight: 700;
    color: #ffedea;
    background-color: #783e34;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header6 {
    font-size: 17px;
    font-weight: 700;
    color: #fff4ea;
    background-color: #6b4a2f;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header7 {
    font-size: 17px;
    font-weight: 700;
    color: #fff9ea;
    background-color: #61522b;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header8 {
    font-size: 17px;
    font-weight: 700;
    color: #faffe8;
    background-color: #464f23;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header9 {
    font-size: 17px;
    font-weight: 700;
    color: #e6fff7;
    background-color: #1f473a;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

.header10 {
    font-size: 17px;
    font-weight: 700;
    color: #e3f7ff;
    background-color: #254855;  /* Neue Header-Farbe */
    padding-left: 10px;
    padding-right: 14px;
}

/* Entrys-Styles */

.entry1 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #e4e6ff;
    background-color: #3e48c3;
	padding-left: 10px;
	padding-right: 14px;
}

.entry2 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #ecd2ff;
    background-color: #77449d;
	padding-left: 10px;
	padding-right: 14px;
}

.entry3 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #ffdafb;
    background-color: #9d4594;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry4 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #ffe4f3;
    background-color: #9d4575;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry5 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #ffe6e2;
    background-color: #9d5145;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry6 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #ffe7d3;
    background-color: #9d6c45;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry7 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #fff7e0;
    background-color: #967f42;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry8 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #f8ffde;
    background-color: #6a7834;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry9 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #ddfff4;
    background-color: #347862;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

.entry10 {
	font-family:Dejavu Sans;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
    color: #d0f3ff;
    background-color: #346678;  /* Neue Spalten-Farbe */
	padding-left: 10px;
	padding-right: 14px;
}

/* Gemeinsame Styles */

.header1, .header2, .header3, .header4, .header5, .header6, .header7, .header8, .header9, .header10 {
    box-sizing: border-box;
    background-clip: padding-box;
    min-width: max-content;
}

.entry1, .entrys2, .entry3, .entry4, .entry5, .entry6, .entry7, .entry8, .entry9, .entry10 {
    box-sizing: border-box;
    background-clip: padding-box;
    min-width: max-content;
    width: 100%;
}


/* Video Player */

.ToolBar {padding-top:75px;}



/* Video-Container ohne feste Positionierung */
.videoContainer {
    max-width: 500px; /* Standardbreite */
    position: relative;
    cursor: pointer;
    /* Margin und sonstige Positionierung entfallen */
}

/* Standardbreite des Videos */
.video {
    width: 100%; /* Nimmt die Breite des Containers an */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: block;
}

/* ==========================================================================
   * Neue CSS-Regeln ab hier
   ========================================================================== */

/* Steuerung */
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Anordnung von oben nach unten */
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.video-controls.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Obere Steuerung */
.top-controls {
    display: flex;
    justify-content: space-between; /* Zeit und Buttons verteilen */
    align-items: center; /* Vertikale Ausrichtung */
    margin-bottom: 5px; /* Abstand zur Fortschrittsanzeige */
}

/* Buttons */
.buttons {
    display: flex;
    gap: 8px; /* Abstand zwischen den Buttons */
}

button {
    background: #ff4081;
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
    font-size: 16px;
}

/* Fortschrittsanzeige */
.progress {
    flex-grow: 1;
    height: 8px;
    background: #ff9900;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #004eff;
    width: 0%;
    transition: width 0.1s linear;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ff0196;
    width: var(--cache-width, 0%);
    transition: width 0.3s linear;
    z-index: 2;
}

/* Lautstärke-Anzeige */
.volume-display {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 15px;
    display: none;
    z-index: 10;
    min-width: 120px;
    text-align: center;
    pointer-events: none;
}

.volume-bar {
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
    position: relative;
}

.volume-bar-inner {
    height: 100%;
    background: #ff4081;
    width: 0%;
    border-radius: 3px;
    transition: width 0.1s linear;
}

/* **NEU: Vollbild-Stile** */
.videoContainer:-webkit-full-screen {
    width: 100%;
    max-width: none;
}

.videoContainer:-moz-full-screen {
    width: 100%;
    max-width: none;
}

.videoContainer:full-screen {
    width: 100%;
    max-width: none;
}

.videoContainer:-webkit-full-screen .video {
    width: 100%;
    height: 100%;
}

.videoContainer:-moz-full-screen .video {
    width: 100%;
    height: 100%;
}

.videoContainer:full-screen .video {
    width: 100%;
    height: 100%;
}

.videoContainer:-webkit-full-screen .video-controls {
    width: 100%;
}

.videoContainer:-moz-full-screen .video-controls {
    width: 100%;
}

.videoContainer:full-screen .video-controls {
    width: 100%;
}


.play-pause {
    background-color:#000;
    color:#ff3d01;
    border: 1px solid #000;
    font-weight:700;
}

.stop {
    background-color:#000;
    color:#ff3d01;
    border: 1px solid #000;
    font-weight:700;
}

.mute {
    background-color:#000;
    border: 1px solid #000;
    font-weight:700;
}

.vol-inc {
    background-color:#000;
    border: 1px solid #000;
    font-weight:700;
}

.vol-dec {
    background-color:#000;
    border: 1px solid #000;
    font-weight:700;
}

.fs {
    background-color:#000;
    color:#0f0;
    border: 1px solid #000;
    font-weight:700;
}


.play-pause:hover {
    background-color:#000;
    color:#01f6ff;
    border: 1px solid #000;
    font-weight:700;
}

.stop:hover {
    background-color:#000;
    color:#01f6ff;
    border: 1px solid #000;
    font-weight:700;
}

.mute:hover {
    background-color:#000;
    color:#01f6ff;
    border: 1px solid #000;
    font-weight:700;
}

.vol-inc:hover {
    background-color:#000;
    color:#01f6ff;
    border: 1px solid #000;
    font-weight:700;
}

.vol-dec:hover {
    background-color:#000;
    color:#01f6ff;
    border: 1px solid #000;
    font-weight:700;
}

.fs:hover {
    background-color:#000;
    color:#01f6ff;
    border: 1px solid #000;
    font-weight:700;
}

.current-time {
    color: #ff0;
    font-size: 14px;
    margin: 0 5px;
}

.duration {
    color: #01f6ff;
    font-size: 14px;
    margin: 0 5px;
}

/* Stelle sicher, dass der videoContainer im Vollbildmodus die volle Breite einnimmt */
.videoContainer:-webkit-full-screen {
    width: 100%;
    max-width: none;
}

.videoContainer:-moz-full-screen {
    width: 100%;
    max-width: none;
}

.videoContainer:full-screen {
    width: 100%;
    max-width: none;
}

/* Stelle sicher, dass die Steuerung im Vollbildmodus sichtbar ist */
.videoContainer:-webkit-full-screen .video-controls-container {
    position: fixed; /* Oder absolute, je nach Bedarf */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2147483647; /* Höchstmögliche Zahl, um sicherzustellen, dass sie über allem liegt */
    width: 100%;
}

.videoContainer:-moz-full-screen .video-controls-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2147483647;
    width: 100%;
}

.videoContainer:full-screen .video-controls-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2147483647;
    width: 100%;
}

/* Stelle sicher, dass die Fortschrittsanzeige im Vollbildmodus sichtbar ist */
.videoContainer:-webkit-full-screen .progress-container {
    width: 100%; /* Stelle sicher, dass sie die volle Breite einnimmt */
}

.videoContainer:-moz-full-screen .progress-container {
    width: 100%;
}

.videoContainer:full-screen .progress-container {
    width: 100%;
}

.video-controls-container.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}


/* Playlist */

.head_1 {
  position: relative;
}

.playlist-sidebar {
  position: absolute;
  left: 100%;         /* Rechts neben dem Öffner */
  top: 0;
  width: 500px;
  background: #0c081d;
  color: #71a1e0;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 5000;
  margin-left: 8px;
  border-radius: 0 8px 8px 8px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

/* Wenn die Klasse .fullscreen am Body ist, wird das Menü oben links als Overlay angezeigt */
body.fullscreen .playlist-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 500px;
  max-height: 90vh;
  margin-left: 0;
  border-radius: 0 0 8px 0;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
  z-index: 9999;
}

.playlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist-item {
  padding: 1px 11px;
  cursor: pointer;
  border-bottom: 1px solid #3e448b;
  transition: background 0.2s;
}

.playlist-item.active {
  background: #3f1f7d;
  color: #ffd700;
}

.playlist-item:hover {
  background: #3f4481;
  color: #33eeff;
}