/* =========================================================
   VARIABLES
   ========================================================= */

   :root{

    --bg:#08080d;

    --panel:#181626;
    --panel2:#11101a;

    --border:#5a52a8;
    --borderGlow:#8f84ff;

    --text:#eeccff;
    --textSoft:#d2d7ff;

    --accent:#9d8cff;

    --shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 18px rgba(110,120,255,.12);

    --glow: 0 0 12px rgba(143,132,255,.25);
}

/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

/* 🔥 FIX: KEIN BODY SCROLL MEHR */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  background: var(--bg);
  color: var(--text);

  overflow: hidden; /* wichtig: App-Layout */
}

hr {
  display: block;
  padding: 0 0 0 0;
  margin: 0.5em 0 0.5em 0;
  height: 1px;
  border: 0;
  border-top: 1px solid #34316b;
}

ul {

  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  padding-left: 1.5rem;

  list-style-type: disc;

}

ul ul {

  padding-left: 1.5rem;

  list-style-type: circle;

}

ul ul ul {

  padding-left: 1.5rem;

  list-style-type: square;

}

li {

  margin-bottom: 0.3rem;

  line-height: 1.5;

}

li > ul {

  margin-top: 0.3rem;

}

a {
  color: #c7d2ff;
  text-decoration: underline;
}

a:hover {
  color: #ffffff;
  background-color: #5a53a3;
  text-decoration: underline;
}

a:visited {
  color: #d7b8ff;
}

a:active {
  color: #ffe082;
}


/* =========================================================
   TOP BAR (FIXED HEIGHT)
   ========================================================= */

#id_top_bar_chapters {
  height: 12dvh;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 1rem;

  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* =========================================================
   MAIN LAYOUT (FULL HEIGHT APP)
   ========================================================= */

#layout {
  display: flex;

  height: calc(100dvh - 12dvh); /* exakt Resthöhe */

  overflow: hidden; /* wichtig */

}

.cls_image_container figure {
  margin: 1em 0;
  text-align: center;
}

.cls_image_container figure img {
  display: block;

  /* Bild skalieren */
  max-width: 100%;
  max-height: 600px;

  width: auto;
  height: auto;

  /* Bild zentrieren */
  margin: 0 auto;

  object-fit: contain;
}

.cls_image_container figure figcaption {
  margin-top: 0.5em;

  text-align: center;

  font-size: 0.9em;
  color: #DDDDDD;
}

.cls_list_container figure figcaption {

  text-align: center;
  
  color: #ffff88;
}

.cls_list_container figure pre code {

  font-size: 0.7em;
  
}

/* =========================================================
   LEFT SIDEBAR (SCROLL INSIDE)
   ========================================================= */

#id_left_side_bar_container {
  flex: 0 0 220px;

  background: var(--panel);
  border-right: 1px solid var(--border);

  height: 100%;

  overflow-y: auto; /* 🔥 SCROLL HIER */

  padding: 1rem;
}


#id_left_side_bar_container h2{

  color:var(--accent2);

  margin-bottom:18px;

  border-bottom:2px solid #3a376c;

  padding-bottom:8px;
}

.cls_info_card{

  background:#0f1018;

  border:2px solid #403b7f;

  margin-bottom:8px;

  padding:14px;

  border-radius:6px;

  color:#edf1ff;

  overflow-x: hidden;

  box-shadow:
      inset 0 0 10px rgba(120,130,255,0.08);
}

.cls_info_card:hover{

  overflow-x: visible;

}

/* =========================================================
   MAIN CONTENT (SCROLL INSIDE)
   ========================================================= */

#id_main_content_container {
  flex: 1 1 auto;
  min-width: 0;

  height: 100%;

  overflow-y: auto; /* 🔥 SCROLL HIER */

  padding: 2rem;
  line-height:1.9;

  background: var(--bg);
}

/* =========================================================
   RIGHT NAVIGATION (FIXED PANEL)
   ========================================================= */

#subNavigation {
  flex: 0 0 90px;

  height: 100%;

  background: var(--panel);
  border-left: 1px solid var(--border);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  padding: 0.75rem 0.25rem;
}

/* =========================================================
   CHAPTER BUTTONS
   ========================================================= */

   .cls_chapter_button{

    flex:0 0 auto;

    background:#433d7d;

    border:2px solid #9f96ff;

    color:#ffffff;

    padding:4px 4px 4px 4px;
    margin:4px 4px 4px 4px;
    min-width: 5vw;

    cursor:pointer;

    text-transform:uppercase;

    font-weight:bold;

    font-size: 2.0dvh;

    letter-spacing:1px;

    border-radius:2px;

    box-shadow:var(--shadow);

    transition:0.15s;
}

.cls_chapter_button:hover{

    background:#5b52a8;

    transform:translateY(-2px);
}


/* =========================================================
   CHAPTER ARROWS
   ========================================================= */

   .navArrow{

    width:52px;
    height:52px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#433d7d;

    border:2px solid #9f96ff;

    color:white;

    font-size:24px;

    font-weight:bold;

    box-shadow:var(--shadow);

    transition:0.15s;
}

/* =========================================================
   FONT SIZE ARROWS
   ========================================================= */


   .cls_font_size_control_button{

    width:4dvh;
    height:4dvh;

    margin: 1dvh;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#433d7d;

    border:2px solid #9f96ff;

    color:white;

    font-size:2.0dvh;

    font-weight:bold;

    box-shadow:var(--shadow);

    transition:0.15s;
}

/* =========================================================
   DOT NAVIGATION
   ========================================================= */

#id_nav_dots {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.35rem;

  overflow: visible;
}

.cls_sub_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* DOT */
.cls_sub_button {
  width: 14px;
  height: 14px;

  border-radius: 50%;

  border: 2px solid var(--accent);
  background: var(--panel2);

  cursor: pointer;

  box-shadow: inset 0 0 0 2px rgba(120,110,255,.08);

  transition: transform 0.12s ease;
}

.cls_sub_button:hover {
  transform: scale(1.25);
}

.cls_sub_button_active {
  background: var(--accent);
  transform: scale(1.15);
}

/* =========================================================
   LABELS (OVERLAY - SAFE WITH SCROLL LAYOUT)
   ========================================================= */

.cls_sub_label {
  position: fixed;
  right: 100px;
  z-index: 9999;

  max-width: 220px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--textSoft);

  padding: 6px 10px;
  border-radius: 6px;

  font-size: 13px;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.12s ease;

  box-shadow: var(--shadow);
}

.cls_sub_item:hover .cls_sub_label,
.cls_sub_button:focus + .cls_sub_label {
  opacity: 1;
}

/* =========================================================
   CONTENT STYLING
   ========================================================= */

#id_sub_chapter_content {
  margin-bottom: 1rem;
}

@media (orientation: portrait) {

  #id_sub_chapter_content {
    
    font-size: 24px;
  }

}

@media (orientation: landscape) {

  #id_sub_chapter_content {
    font-size: 22px;
  }

}

#id_sub_header_title {
  opacity: 0.8;
  margin-bottom: 1rem;
}

/* =========================================================
   FILE BROWSER LINK
   ========================================================= */

 /* Datei-Explorer Container */
 .cls_extra_link{
  display:flex;
  align-items:center;
  display: inline-block;

  padding:4px 4px 4px 4px;
  margin:4px 4px 4px 4px;

  background:
      linear-gradient(
          180deg,
          var(--panel),
          var(--panel2)
      );

  border:2px solid var(--border);
  border-radius:4px;

  box-shadow:
      var(--shadow),
      var(--pixel);

  transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
}

/* Hover für Container */
.cls_extra_link:hover{
  transform:translateY(-2px);

  border-color:var(--borderGlow);

  box-shadow:
      0 0 0 2px #000,
      0 0 0 4px var(--borderGlow),
      0 0 3px rgba(143,132,255,0.35),
      var(--pixel);
}

/* Link */
.cls_extra_link a{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:10px;

  color:var(--text);

  text-decoration:none;

  font-family:"Segoe UI", sans-serif;
  font-size:12px;

  transition:
      color 0.25s ease,
      text-shadow 0.25s ease;
}

/* Hover Link */
.cls_extra_link a:hover{
  color:var(--accent2);

  text-shadow:
      0 0 8px rgba(110,167,255,0.45);
}

/* Animierte Unterstreichung */
.cls_extra_link a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-5px;

  width:0%;
  height:2px;

  background:
      linear-gradient(
          90deg,
          var(--accent),
          var(--accent2)
      );

  box-shadow:
      0 0 8px rgba(110,167,255,0.45);

  transition:width 0.3s ease;
}

.cls_extra_link a:hover::after{
  width:100%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

  #id_left_side_bar_container {
    flex: 0 0 160px;
  }

  #subNavigation {
    flex: 0 0 70px;
  }

  #id_top_bar_chapters {
    
    height: 18dvh;
    
  }

  #layout {
  
    height: calc(100dvh - 18dvh);
  
  }

  .cls_info_card{

    font-size: 12px;
  }

  @media (orientation: portrait) {

    #id_sub_chapter_content {
      
      font-size: 22px;

    }
  
  }

  @media (orientation: landscape) {

    #id_sub_chapter_content {
      font-size: 20px;
    }

  }

  
}

@media (max-width: 768px) {

  #layout {
    flex-direction: column;
    height: calc(100dvh - 12dvh); /* exakt Resthöhe */
  }

  #id_left_side_bar_container {
    display: none;
  }

  #subNavigation {
    flex-direction: row;
    width: 100%;
    height: auto;

    border-left: none;
    border-top: 1px solid var(--border);

    justify-content: space-around;
  }

  #id_main_content_container {
    width: 100vw;
    height: auto;
    overflow-y: auto;
  }

  #id_top_bar_chapters {

    height: 14dvh;
    
  }

  #layout {
  
    height: calc(100dvh - 14dvh);
  
  }

  .cls_info_card{

    font-size: 10px;
  }

  @media (orientation: portrait) {

    #id_sub_chapter_content {
      
      font-size: 20px;

    }
  
  }

  @media (orientation: landscape) {

    #id_sub_chapter_content {
      font-size: 18px;
    }

  }


}

@media (max-width: 500px) {

  #id_top_bar_chapters {

    height: 22dvh;
    
  }

  #layout {
  
    height: calc(100dvh - 22dvh); /* exakt Resthöhe */
  
  }

  .cls_info_card{

    font-size: 9px;
  }

  @media (orientation: portrait) {

    #id_sub_chapter_content {
      
      font-size: 18px;

    }
  
  }

  @media (orientation: landscape) {

    #id_sub_chapter_content {
      font-size: 16px;
    }

  }

}

@media (pointer: coarse) {
  /* Wahrscheinlich Touchscreen */

  #layout {
  
    height: calc(100dvh - 20dvh); /* exakt Resthöhe */
    padding-bottom: 4dvh;
  }
  
  #id_left_side_bar_container {

    border-bottom: 5px solid var(--border);

  }

  #id_main_content_container {

    border-bottom: 5px solid var(--border);

  }

  #subNavigation {

    border-bottom: 5px solid var(--border);

  }

}