:root {
    --backg-color: #300000;
	--blue-color: #10233B;
    --bluelessdark-color: #153D64;
    --phred-color: #c00000;
    --reading-color: #fdfdfd;
    --headerfooter-backcolor:#E6F9FE;  /* f2f2f0 */ 
    --headerfooter-fontcolor:#000000; 
    --gold: #FFD700;
  }

html,
body { margin: 0;  font-family: Arial; font-size: 1rem; line-height: 1.5; height: 100%; 
    display: flex; flex-direction: column; overflow: hidden;
   background:var(--blue-color);
}
  a, b,i, strong,span,em,p {margin: 0; padding: 0;}

/* main container */  
main { position: relative; width: 100%; max-width: 850px; margin-top:60px; margin-left: max(360px, calc((100% - 850px) / 2)); min-width: 0; 
background: var(--reading-color);padding-top: 20px ; padding-left: 48px; padding-right: 42px; overflow-y: auto; flex-grow: 1; flex-shrink: 1;}

* { margin-left: 0px; margin-right: 0px;  padding-left: 10; box-sizing: border-box;}
#mainContent { display: none; padding: 5px;}
/* floatingBox */ 
#floatingBox { padding: 16px; border-radius: 10px; color: #c0c0c0; font-weight: bold; background: linear-gradient(to bottom,var(--bluelessdark-color), #308281); 
    background-blend-mode: overlay; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow:
    inset 0 0 30px #000000,
    inset 0 0 20px #00ffff,
    0 0 8px #ffffff; position: absolute; top: 100px; left: 30px; width: 300px; min-height: 400px; overflow: auto; z-index: 999;
    display: block;}
#floatingBox a,#floatingBox a:visited  {
  color: #ffffff;
  text-decoration: underline;
}
#floatingBox a:hover {
  text-decoration: underline;
 text-decoration: underline;background-color:inherit; color: #00ffff; 
}

/* navigation - header */ 
.navbar { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; 
    justify-content: center; 
    background:  var(--headerfooter-backcolor); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    height: 80px; border-bottom: #000 1px solid; z-index: 1000; /* Ensures it's above other elements */
    padding-top:15px;  padding-bottom:15px;  padding-left: 200px; padding-right: 100px;
}
.logo { display: flex; align-items: center; font-size: 1.5em; font-weight: bold;}
.logo { position: absolute; left: 5px;  }
.nav-links {display: flex; gap: 5px; flex-wrap: wrap; width: 100%; justify-content: center;  }
.nav-links a { text-decoration: none; color: #000; font-weight: 500; font-size: 1.2em; padding: 0px;}
.nav-links a:hover { color: #c00000; background:  var(--headerfooter-backcolor);}
 img.nav-links {    vertical-align: middle;    width: 48px;    height: 48px;    position: relative;    top: -12px;     margin-right: 0px;  }

.separator {padding: 0 0px;}
a.imgh img:last-child {
    display: none;  
  }
  a.imgh:hover img:last-child {
    display: block;  
  }
  a.imgh:hover img:first-child {
    display: none;  
  }


/* footer */ 
.footer { width: 100%; height: 40px; background-color: var(--headerfooter-backcolor); padding: 10px; border-top: #000 1px solid; z-index: 1000;}
.top-arrow-btn { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(90deg, #c00000, #ff0000); border: none; padding: 10px 15px; border-radius: 50%; color: white; font-size: 1.5em; cursor: pointer; display: none; /* Hide initially */
    z-index: 1000; transition: opacity 0.3s ease;}
.top-arrow-btn:hover {opacity: 0.9;}

/* Links & Absätze allgemein */
a,p { font-size: 1rem;}
/* Überschriften mit skalierbaren Größen */
h1 { font-size: clamp(1.25rem, 3vw, 1.667rem); color: #222222; font-weight: bold; line-height: 1.3; margin: 1.0m 0 0.75em 0;}
h2 { font-size: clamp(1.125rem, 2.5vw, 1.333rem); color: #333333; font-weight: bold; line-height: 1.35; margin: 1.25em 0 0.75em 0;}
h3 { font-size: clamp(1rem, 2vw, 1.167rem); color: #444444; font-weight: bold; line-height: 1.4; margin: 1em 0 0.5em 0;}
h4 { font-size: clamp(0.9375rem, 1.8vw, 1rem); color: #555555; font-weight: bold; line-height: 1.4; margin: 1em 0 0.5em 0;}
h5 { font-size: clamp(0.9375rem, 1.6vw, 1rem); color: #666666; font-style: italic; font-weight: normal; line-height: 1.4; margin: 0.75em 0 0.5em 0;}
h6 { font-size: clamp(0.875rem, 1.5vw, 0.917rem); color: #595959; font-style: italic; font-weight: normal; line-height: 1.4; margin: 0.5em 0 0.5em 0;}

.lighthint { color: #7f7e7e; font-size: 0.8em; font-weight: normal; line-height: 1.2;margin-bottom:0px ; }

a { text-decoration: underline; color: inherit;  }
a:hover { text-decoration: underline;background-color: #666666; color: white; }
a.nothing { text-decoration: none; color: inherit;  }
a.nothing:hover { text-decoration: none; background-color: transparent; color: inherit; } 

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); 
    white-space: nowrap;
  }
  /* djin list elements  */
  .djin-list,.djin-list ul{list-style:none;padding-left:1.5em;margin:0}
  .djin-list>li::before{content:"■";color:#C00000;font-size:1.2em;display:inline-block;width:1.5em;margin-left:-1.5em}
  .djin-list>li>ul>li::before{content:"●";color:#C00000;font-size:1.1em;display:inline-block;width:1.5em;margin-left:-1.5em}
  .djin-list>li>ul>li>ul>li::before{content:"□";color:#C00000;font-size:1em;display:inline-block;width:1.5em;margin-left:-1.5em}
  .djin-list>li>ul>li>ul>li>ul>li::before{content:"○";color:#C00000;font-size:0.95em;display:inline-block;width:1.5em;margin-left:-1.5em}

.djheading, .djheading h1,.djheading h2,.djheading h3,.djheading h4,.djheading h5,.djheading h6 { color: #c00000;}

.r-float {    float: left;    margin: 0 10px 10px 0;}
.clearfloat {   clear: both;}
span.tab { margin-left: 0px;}
span.big { font-size: 1.4em; font-weight: bold;}
a.presentedby {
  font-size: 0.75em;
  font-weight: normal;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
}
a.presentedby:hover {
  color: var(--phred-color);
  background-color: transparent;
}
a.important { text-decoration: underline;font-size: 1.25em;font-weight: bold;  color: #215C98;  }
a.semi { text-decoration: underline;font-size: inherit;font-weight: bold;  color: #215C98;  }
a.important:hover,a.semi:hover  { text-decoration: underline;background-color:inherit; color: #c00000; }

div.border table, div.border th, div.border td {  border: 1px solid black;  border-collapse: collapse;}
div.border th, div.border td {  padding-left: 5px;  padding-right: 5px;}

.fett { font-weight: bold;}
.phred { color: #c00000; }
.phredbold { color: #c00000;font-weight: bold; }
.selectclick a { padding: 0px; margin:0px; color: #000; text-decoration: underline; font-weight: bold; font-size: 1.0em;}
.selectclick a:hover { color: #c00000; text-decoration: underline;background-color: transparent ;}
.menu-toggle { display: none; font-size: 1.8em; background: none; border: none; cursor: pointer;  margin-left: auto; }
.mobile-menu {display: none;flex-direction: column;padding: 5px 0; font-size: 1.0em;background: #ffffff; color: white; position: absolute;min-width: 160px;
    max-width: 100%;
    right: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);text-align: right;top: 80px;
    }
.mobile-menu a { padding: 6px 10px;text-decoration: none; color: black; line-height: 1.0;
        font-size: 1em; margin: 0; display: block;}        
.mobile-menu a:hover { background: darkgray;}


  .floattr-img { float: left; margin-right: 40px; max-width: 100%; height: auto; display: block; }
  .floattl-img { float: right; margin-left: 20px; max-width: 100%; height: auto; display: block; }



/* Media adjustments */
@media (max-width: 600px)
 {
    .floattr-img {float: none;display: block;margin: 0 auto 20px auto;}
    .floattl-img {float: none;display: block;margin: 0 auto 20px auto;}
  }

  @media (max-width: 48em)
  {
    .nav-links { display: none; }
    .menu-toggle { display: block; }
    .mobile-menu.open { display: flex; }
    main { max-width: 100%; padding-left: 5%; padding-right: 5%; }
    .dropdown-menu { position: static; display: none; }
    .dropdown.active .dropdown-menu { display: block; }
  }


@media (max-width: 1210px) { main { margin-left: auto; margin-right: auto;}#floatingBox { display: none !important; }}

/* dropdowns + menu  */


div.dropdown { position: relative;display: block; padding: 3px; font-size: 1.0em; width: auto;}
.mobile-dropdown-extra{    font-size: 1.0em;}
/* Nachfolgend der anchor für das toggeln */
.dropdown-toggle { text-decoration: none; color: #000; font-weight: 500; font-size: 1.0em;    
padding: 3px 0px; margin: 0;    line-height: 1.1; cursor: pointer; display: block;}

.dropdown-menu { position: absolute; top: 100%; left: 0; background: #ffffff; list-style: none; padding: 0;   right: 0;  left: auto;
 margin: 0; display: none; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.9); z-index: 1001; min-width: 100%; width: max-content; max-width: 90vw; /* für Mobilgeräte */
    white-space: nowrap;}

.dropdown-menu li {width:100%; margin: 0;}
.dropdown-menu a {
    padding: 6px 12px; line-height: 1.4;
    font-size: 1.0em; font-weight: 500; display: block; width: 100%; box-sizing: border-box; white-space: nowrap; color: black; text-decoration: none;}
.content-menu a {  line-height: 0.8rem;  font-size: 0.8em; }
.dropdown-menu.content-menu {
  /* bei line-height:1.4 und padding 6px oben+unten ≈ 2rem Höhe */
  max-height: calc(1.5rem * 5);
  overflow-y: auto;
}

.dropdown-menu li a:hover {
    background: #f2f2f2;
    /* color: white; */
}
/* Show dropdown on click */
.dropdown.active .dropdown-menu {
    display: block;
}

/* --- Submenu Styling --- */
.has-submenu { position: relative;}
.submenu { display: none; position: absolute; top: 0; left: 100%; background: #ffffff; list-style: none; padding: 5px 0; margin: 0; min-width: 160px; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); z-index: 1002;}
.has-submenu.active > .submenu { display: block;}
.submenu li a { display: block; padding: 6px 12px; white-space: nowrap; color: black; text-decoration: none; font-size: 0.95em;}
.submenu li a:hover {    background-color: var(--bluelessdark-color); color: white;}


/* chatgpt divs  */
div.chatgpt { border: 2px solid var(--backg-color); padding: 10px; margin-bottom: 10px; }
div.djin { border: 2px solid #c00000; padding: 10px; margin-bottom: 10px; min-height: 60px;}

/* Fullscreen Video Container */
#videoContainer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: black; display: flex; justify-content: center; align-items: center; z-index: 1000;}
video { width: 100vw; height: 100vh; object-fit: contain; background-color: black;}