*{
    box-sizing: border-box; /*NECCESSARY???*/
    /*font-family: National Park, Ubuntu, Arial, sans-serif;*/
}
:root{
  color: --var(--text-color);
  background: var(--bg-color);
}
body{
    --bg-color: white;
    --text-color: black;
    margin: 0;
    font-family: National Park, Arial, sans-serif;
    /* background: linear-gradient(180deg,#f6f8ff 0%,var(--bg) 100%); */
    /*padding: 28px;*/
    color: --var(--text-color);
    background: var(--bg-color);
    --red: rgb(246, 0, 0);
    --green: rgb(0, 226, 0);
    --blue: rgb(0, 166, 255);
    --yellow: rgb(255, 255, 0);
    --orange: rgb(255, 145, 0);
    --lila: rgb(136, 0, 255);
    --pink: rgb(231, 0, 231);
    --dark-green: rgb(0, 160, 0);
    --neon-green: rgb(45, 255, 3); /*rgb(4, 255, 0)*/

    --red-hover: rgb(246, 0, 0, 0.700);
    --green-hover: rgb(0, 226, 0, 0.700);
    --blue-hover: rgb(0, 166, 255, 0.700);
    --yellow-hover: rgb(255, 255, 0, 0.700);
    --orange-hover: rgb(255, 145, 0, 0.700);
    --lila-hover: rgb(136, 0, 255, 0.700);
    --pink-hover: rgb(231, 0, 231, 0.700);
    --dark-green-hover: rgba(0, 160, 0, 0.700);

    --red-active: rgb(246, 0, 0, 0.500);
    --green-active: rgb(0, 226, 0, 0.500);
    --blue-active: rgb(0, 166, 255, 0.500);
    --yellow-active: rgb(255, 255, 0, 0.500);
    --orange-active: rgb(255, 145, 0, 0.500);
    --lila-active: rgb(136, 0, 255, 0.500);
    --pink-active: rgb(231, 0, 231, 0.500);
    --dark-green-active: rgb(0, 160, 0, 0.500);

    --rad1: 5px;
    --rad2: 10px;
    --pad: 7px;
    --brd:3px solid black;
    --font10: 10px;
    --font15: 15px;
    --font20: 20px;
    
    --input: rgb(229, 229, 229);
    --input-focus: rgb(240, 240, 240);
    --input-hover: #dcdcdc;

    --border: grey;

    --shadow: rgba(0, 0, 0, 0.1) 0px 0px 12px 10px;
  }
h1{
  color: var(--text-color);
}
h2{
  color: var(--text-color);
}
h3{
  color: var(--text-color);
}
h4{
  color: var(--text-color);
}
h5{
  color: var(--text-color);
}
h6{
  color: var(--text-color);
}
div{
  color: var(--text-color);
}

.embed{
  color: var(--text-color);
  background-color: var(--green);
  cursor: pointer;
}
main input{
  color: var(--text-color);
  background: var(--bg-color);
}
main textarea{
  color: var(--text-color);
  cursor: pointer;
  background: var(--input);
}

input:focus-within{
  outline: none;
}
textarea:focus-within{
  outline: none;
}


#title{
  text-align: center;
  padding: 40px;
  font-size: 50px;
  margin: 0px;
}

#h1{
  text-decoration: none;
  color: black;
  margin: 0px;
}

.navbar{
    background: black;
    color: white;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar a:hover{
  color: var(--green);
}
.navbar button:hover{
  color: var(--green);
}

nav.fixed{

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: #222;
}

.menü{
    position: relative;
    display: inline-block;
}
.menü:hover .dropdown{
    display: block;
}
.menü button{
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 20px;
}
.menü button:hover {
  transition: 0.3s;
    /* background: rgba(128, 128, 128, 0.4); */
  }

.rechts .btn{
    padding-right: 10px;
    padding-left: 10px;
}

/* Drehung von Pfeilen*/
.menü button .icon {
    display: inline-block;
    transition: transform 0.3s ease; /* weiche Drehung */
}

  
.menü:hover button .icon {
    transform: rotate(90deg);
}

.btn{
    font-family: National Park, Ubuntu, Arial, sans-serif;
}
/*Dropdown*/

.dropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: black;
    overflow: hidden;
    background-color: black;
    
}


.dropdown a{
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: transform 0.3s ease;
    
}

.dropdown a:hover {
    transition: 0.3s;
    /* background: rgba(128, 128, 128, 0.6); */
  }
#dropdown7 a:hover{
  background: rgba(128, 128, 128, 0.4);
}
#dropdown1{
    width: 114.367px
}
#dropdown2{
    width: 179.8px
}
#dropdown3{
    width: 189.75px
}
#dropdown4{
    width: 241.133px
}
#dropdown5{
    width: fit-content;
    transform: translateX(-3px);
}
#dropdown6{
    width: fit-content;
    transform: translateX(-32px);
}
#dropdown7{
    width: 70px
}
#dropdown8{
  width: 123.65px;
}

/*Flaggenbilder*/

.flags{
  width: 50px;
}
#dropdown7 {
    align-items: center;
    justify-content: center;
    text-align:center;
}

/* -- search bar -- */
#searchBtn {
  color: rgb(75, 74, 73); /*var(--text-color) / black */
  margin: 0px;
  padding: 0px;
}
#searchBtn:hover {
  color: var(--green);
}
.search:hover{
  background-color: var(--input-hover);
}
.search {
    --padding: 10px;
                
    width: max-content;
    display: flex;
    align-items: center;
    padding: var(--padding);
    border-radius: 50px;
    background: hsl(0, 0%, 92%);
    transition: background 0.3s, box-shadow 0.3s;
    transform: translateY(-2px);
}
.search:focus-within{
    background: #f1f1f1;
    box-shadow: 0 0 2px black;
}
.search-input{
    font-size: 16px;
    font-family: National Park, Arial, sans-serif;
    color: #333333;
    margin-left: var(--padding);
    outline: none;
    border: none;
    background: transparent;
}

.search-input::placeholder{
    color: rgba(0,0,0,0.4);
}

.search-input::placeholder:hover{
  color: var(--green);
}
#results{
    position:absolute;
    background-color: #333;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: translateY(-2px);
    transform: translateX(17px);
    margin: 0px;
}

footer{
  height: 50px;
  text-align: center;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.close{
  cursor: pointer;
  display: inline-block;
  z-index: 9999;
}
.close:hover{
  color:var(--red);
}
/*------------------------------------------------------------ INPUT SECTION -------------------------------------------------------------*/

#inputsection input{
    font-size: var(--font15);
    font-family: National Park, Ubuntu, Arial, sans-serif;
    cursor: pointer;
    border: none;
    border-radius: var(--rad2);
}

input::file-selector-button{
    border: none;
    font-family: National Park, Ubuntu, Arial, sans-serif;
    background: var(--green);
    padding: var(--pad);
    border-radius: var(--rad2);
    color: var(--text-color);
}
input::file-selector-button:hover{
  background: var(--green-hover);
}
input::file-selector-button:active{
  background: var(--green-active);
}


#process-btn{
    font-size: var(--font15);
    font-family: National Park, Ubuntu, Arial, sans-serif;
    background-color: var(--blue);
    border: none;
    padding: var(--pad);
    border-radius: var(--rad2);
    cursor: pointer;
    margin-top: 5px;
}
#process-btn:hover{
    background-color: var(--blue-hover);
}

#process-btn:active{
  background-color: var(--blue-active);
}

.audiouploadbox{
    width: fit-content;
  }
#images-upload{
  margin-top: 5px;
}
#clear{
  border: none;
    font-family: National Park, Ubuntu, Arial, sans-serif;
    background: transparent;
    padding: var(--pad);
    border-radius: var(--rad2); 
    margin-top: 5px;
}
#clear:hover{
  background: opacity 0.87;
}
#clear:hover{
  background: opacity 0.75;
}
#inputsection button{
  cursor: pointer;
}
  #inputsection{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .kasten{
    padding-left: 24px;
    padding-right: 24px;
    box-shadow: var(--shadow);
    border-radius: var(--rad2);
    height: 250px;
    width: 24%;
    background-color: var(--bg-color);
  }
.textuploadbox{
  display: flex;
  flex-direction: column;
}
/*------------------------------------------------------------------PLAYER------------------------------------------------------------*/
/*
  /*YouTube*/

#video-container iframe {
  width: 100%;
  max-width: 560px;
  height: 315px;
  position: absolute;
} 
    
#video-container {
  position: sticky;
  right: 0px;
  bottom: 40px;
  height: 315px;
  width: 560px;
  float: right;
}

#closeVideoBtn{
  position: sticky;
  right: 10px;
  bottom: 340px;
  float: right;
  background: transparent;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--text-color);
  transition: color 0.2s;
  z-index: 9999;
}
#closeVideoBtn:hover {
  color: var(--red);
}
#embed-btn{
    border: none;
    font-family: National Park, Ubuntu, Arial, sans-serif;
    background: var(--green);
    padding: var(--pad);
    border-radius: var(--rad2);
    font-size: var(--font15);
    cursor: pointer;
}
#embed-btn:hover{
  background-color: var(--green-hover);
}
#embed-btn:active{
  background-color: var(--green-active);
}    
#youtube-link{
  background: var(--input); 
  padding: var(--pad);
}
#youtube-link:hover{
  box-shadow: var(--input-shadow);
}
#youtube-link:focus-within{
  background: var(--input-focus); /*rgb(242, 242, 242)*/
  box-shadow: var(--input-shadow);
}
#loadBtn{
  border: none;
    font-family: National Park, Ubuntu, Arial, sans-serif;
    background: var(--green);
    padding: var(--pad);
    border-radius: var(--rad2);
    font-size: var(--font15);
    cursor: pointer;
}
#loadBtn:hover{
  background-color: var(--green-hover);
}
#loadBtn:active{
  background-color: var(--green-active);
} 
#audioLink{
  background: var(--input); /*rgb(229, 229, 229)*/
  padding: var(--pad);
}
#audioLink:focus-within{
  background: var(--input-focus);
  box-shadow: var(--input-shadow);
}
#audioLink:hover{
  box-shadow: var(--input-shadow);
}
#playerContainer{
  position: sticky;
  right: 0px;
  bottom: 40px;
  height: 352px;
  width: 560px;
  float: right;
}

#closeMusicBtn{
  position: sticky;
  right: 10px;
  bottom: 370px;
  float: right;
  background: transparent;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--text-color);
  transition: color 0.2s;
}
#closeMusicBtn:hover {
  color: var(--red);
}

/*---------------------------------------------------------------TEXTINPUTFELD--------------------------------------------------------------------*/

#text-input{
    background-color: var(--bg-color);
    font-size: var(--font15);
    font-family: National Park, Ubuntu, Arial, sans-serif;
    font-weight: bold;
    width: 100%;
    display: block;
    border-color: var(--border);
    border-radius: 5px;
    padding:5px;
    margin-right: 20px;
    direction: rtl; /*ARABISCH*/
}

#submitText{
    font-size: 20px;
    font-weight: bold;
    font-family: National Park, Ubuntu, Arial, sans-serif;
    border: none;
    background-color: var(--green);
    border-radius: var(--rad1);
    padding: var(--pad);
    text-align: center;
    width: 100%;
    cursor: pointer;
}
#submitText:hover{
    background-color: var(--green-hover);
    font-weight: bold;
}
#submitText:active{
    background-color: var(--green-active);
    font-weight: bold;
    color: rgb(210, 210, 210);
}

/*----------------------------------------------------------- READING SECTION ------------------------------------------------------------*/

/*----------------------------------------------------------- ORIGINALSATZ ------------------------------------------------------------*/
.reader{
    margin: 20px;
    
}
  
#output {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    direction: rtl;
}

.container{
max-width: 100vw;
margin: 0 auto;
}
.story-card{
background:var(--card);
padding:18px;
border-radius:12px;
box-shadow:var(--shadow);
margin-top:18px;
}

.sentence {
font-size:1.4rem;
line-height:1.6;
direction: rtl; /* wichtig für arabisch */
text-align: right;
margin: 18px 0 6px;
display: block;
user-select: none;
cursor: pointer; /* Satz ist klickbar (für Satz-Übersetzungen) */
padding: 6px;
border-radius: 8px;
}
.sentence:hover{ background: rgba(11,92,255,0.03); }

.tokens {
display: inline-block; /* damit RTL korrekt bleibt */
}

.token {
display: inline-block;
/*margin: 0 6px;*/
vertical-align: middle;
position: relative; /* für das mini-popup unter Wörter */
}

.word {
  cursor: pointer;
  /*padding: 3px 6px;*/
  border-radius: 6px;
  transition: background .12s, transform .06s;
  display: inline-block;
  margin: 3px;
  padding: 0px 5px;
  border-radius: 6px;
  background: rgb(4, 255, 0);
  cursor: pointer;
  transition: background 0.3s;
  color: black;
  user-select: text;
}
.word:active{ transform: translateY(1px); 
    background: rgba(11,92,255,0.12);
    box-shadow: 0 1px 0 rgba(11,92,255,0.06) inset;
}

  
  .word:hover {
    background: hsla(119, 100%, 50%, 0.4);
  }

  
.punct {
pointer-events: none; /* Satzzeichen nicht anklickbar */
color: var(--muted);
margin: 0 2px;
}

/*----------------------------------------------------------------MINIBOX--------------------------------------------------*/

/* Mini-Box unter jedem Wort (erscheint bei Wort-Klick) */
.mini {
display: none;
position: absolute;
right: 0; /* RTL: rechtsbündig unter dem Wort */
top: calc(100% + 8px);
/* min-width: 110px; */
/* max-*/width: fit-content; 
padding: 8px 10px;
border-radius: 8px;
background: var(--bg-color);
border: 1px solid rgba(12,20,40,0.06);
box-shadow: 0 8px 22px rgba(12,20,40,0.08);
/* text-align: right; */
z-index: 500;
font-size: 0.95rem;
/* direction: rtl; */
}
.mini.visible { display: block; width: 200px;}

.mini .arab { font-weight: 700; font-size: 1rem; color: black; text-align: right; direction: rtl;}
.mini .de { font-size: 0.9rem; color: var(--muted); margin-top:6px; text-align: left; direction: ltr; font-weight: normal;}
.input-label{
  text-align: left;
  font-weight:normal;
}
.translation-input-box {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 8px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  direction: ltr;
}

.translation-input {
  padding: 6px;
  border: 1px solid #bbb;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  text-align: left;
  direction: ltr;
  font-family: National Park, Ubuntu, Arial, sans-serif;
}

.save-btn, .cancel-btn {
  padding: 4px 8px;
  margin-top: 4px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: National Park, Ubuntu, Arial, sans-serif;
  font-size: 13px;
}

.save-btn {
  background: var(--green);
  color: var(--text-color);
  font-family: National Park, Ubuntu, Arial, sans-serif;
}

.cancel-btn {
  background: #ccc;
  font-family: National Park, Ubuntu, Arial, sans-serif;
}


/*---------------------------------------------- TRANSLATEBUTTON-------------------------------------------------*/

#tbBox{
  display: flex;
  flex-direction: row;
  overflow: scroll;
  direction: ltr;
  margin: 5px 0;
}

.translatebutton{
  font-family: National Park, Ubuntu, Arial, sans-serif;
    border: none;
    background-color: rgb(0, 255, 0);
    cursor: pointer;
    border-radius: 5px;
    margin: 0 2px;
    width: fit-content;
}
.translatebutton:hover{
    background-color: rgba(0, 255, 0, 0.500);
    box-shadow: 2 2 2;
}
.translatebutton:active{
    color: white;
    background-color: rgba(0, 255, 0, 0.500);
}


#reversoconj{
  font-family: National Park, Ubuntu, Arial, sans-serif;
    border: none;
    background-color: rgb(0, 255, 0);
    cursor: pointer;
    border-radius: 5px;
    margin: 0 2px;
    width: fit-content;
    text-align: left;
    direction: ltr;
}
#reversoconj:hover{
    background-color: rgba(0, 255, 0, 0.500);
    box-shadow: 2 2 2;
}
#reversoconj:active{
    color: white;
    background-color: rgba(0, 255, 0, 0.500);
}

/*------------------------------------------------------------------------SATZÜBERSETZUNGEN------------------------------------------------*/

/* Übersetzungsboxen (Satzebene) */
.translation {
  margin: 8px 0 0;
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: var(--bg-color);
  border: 1px solid rgba(12,20,40,0.04);
  box-shadow: 0 6px 18px rgba(12,20,40,0.03);
  position: relative;
  overflow: hidden;
  /*justify-content: flex-end; WICHTIG FÜR RECHTSBINDUNG*/
  display: flex; /*WICHTIG FÜR RECHTSBINDUNG*/
  flex-direction: row; /*WICHTIG FÜR RECHTSBINDUNG*/

}

.translation.literal{
  margin: 8px 0 0;
padding: 10px 12px 12px;
border-radius: 10px;
background: var(--bg-color);
border: 1px solid rgba(12,20,40,0.04);
box-shadow: 0 6px 18px rgba(12,20,40,0.03);
position: relative;
overflow: hidden;
justify-content: flex-start;
display: flex; /*WICHTIG FÜR RECHTSBINDUNG*/
flex-direction: row; /*WICHTIG FÜR RECHTSBINDUNG*/

}
/*Vllt zwischen den 2 Containern unterschiedliche Klassen anwenden, um die Rechtsbindung im im-Kontext-Satz aufzuheben*/

.translation .close {
position: absolute;
top:8px;
right:8px;
border: none;
background: transparent;
font-size: 16px;
cursor: pointer;
color: var(--muted);
padding:4px;
line-height: 1;
}
.translation .close:hover{ color: #222; }

/* Wort-für-Wort: nur deutsche Wörter, rechtsgebunden */
.literal-row {
display: flex;
flex-direction: row;
gap: 8px;
justify-content: flex-end; /*rechtsgebunden*/
direction: rtl; /* Reihenfolge rechts->links */
flex-wrap: wrap;
position: relative;
}
.literal-block {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center; /* Text im Block in der Mitte */
  background: linear-gradient(180deg, rgba(12,20,40,0.02), rgba(12,20,40,0.01));
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--text-color);
  direction: ltr;
}
.literal-block:hover {
  background-color: rgba(12,20,40,0.03);
}
.literal-de {
font-size: 0.95rem;
color: var(--text-color);
opacity: 0.95;
}


.literal-dropdown {
  width: fit-content;;
  text-align: center; /* Text im Block in der Mitte */
  background: transparent;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--text-color);
  direction: ltr;
  border: none;
  font-family: National Park, Arial, sans-serif;
}
.literal-dropdown:hover {
  background-color: transparent;
  color: var(--green);
  
}

.select.literal-option {
  font-family: National Park, Arial, sans-serif;
  
}

/* Kontextübersetzung */
.context {
font-size: 1rem;
color: var(--text-color);
line-height: 1.5;
padding-top: 8px;
text-align: left; /* deutsche Satzübersetzung linksbündig lesen */
direction: ltr;
}

/* kleine Anleitung */
.hint {
margin-top:10px;
font-size:0.9rem;
color:var(--muted);
}


@media (max-width:640px){
.literal-block{ min-width:44px;padding:6px 8px }
.sentence{ font-size:1.18rem }
.mini{ right: -6px; left: auto; min-width: 100px; }
.mini .de{ text-align: left; direction: ltr; }
}


.widget {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
  }
  .widget:hover {
    background: #f5f5f5;
  }
  
  .widget {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
  }
  
  .widget:hover {
    background: #f9f9f9;
  }
  
  .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
.delete-btn {
  background: transparent;
  border: none;
  color: var(--red);
  font-size: 1.2em;
  cursor: pointer;
  transition: color 0.2s;
}

.delete-btn:hover {
  color: var(--red);
}


.translation .close:hover{
  color: var(--red);
}
  
  /*----------------------------------------------------------------AUDIOABSPIELER-------------------------------------------------*/

  .player{
    width:min(550px,94vw);
    background:linear-gradient(180deg, var(--bg-color), var(--bg-color));
    border-radius:18px;
    padding:28px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:center;
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,0.03);
    position: sticky;
    float: left;
    left: 0px;
    bottom: 40px;
  }

  .meta{
    display:flex;flex-direction:column;gap:18px;
  }

  .title{font-size:20px;font-weight:600}
  .artist{color:var(--muted);font-size:13px}

  /* big central control */
  .controls{display:flex;align-items:center;gap:18px;width:482px;}
  .Button{
    width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid rgba(255,255,255,0.03);cursor:pointer;box-shadow: 0 6px 18px rgba(2,6,23,0.5);user-select:none
  }
  .Button:active{transform:translateY(1px)}
  .Button svg{width:24px;height:24px}

  .time{font-feature-settings: 'tnum' 1; color:var(--muted);font-size:13px;min-width:58px;text-align:center}

  /* progress bar */
  .progress-wrap{width:100%;padding:12px 0,}
  .progress{
    height:14px;border-radius:999px;background:linear-gradient(90deg, var(--green), rgba(255,255,255,0.02));position:relative;overflow:hidden;display:block;cursor:pointer;user-select:none
  }
  .progress .buffer{
    position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left center;transform:scaleX(0);opacity:0.6;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  }
  .progress .fill{
    position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left center;transform:scaleX(0);border-radius:999px;box-shadow: 0 6px 20px rgba(12,22,60,0.35), inset 0 -6px 20px rgba(0,0,0,0.2);background:linear-gradient(90deg,var(--accent1),var(--accent2));will-change:transform
  }

  .right{
    display:flex;flex-direction:column;gap:10px;align-items:stretch
  }

  .visual{
    height:88px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,0.02)
  }

  .volume{display:flex;align-items:center;gap:10px}
  .volume input{width:100px}

  /* responsive */
/* @media (max-width:760px){                         
    .player{grid-template-columns:1fr;}
    .controls{justify-content:space-between}
  } 
  */
  #volandspeed{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
  }
  .close-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
  }
  .close-btn:hover {
    color: var(--red);
  }

  /*PHRASES*/
/*token*/
  .phrase {
    background-color: #b3e5fc;
    border-radius: 5px;
    padding: 0 10px;
    transition: background-color 0.3s;
    /* padding-bottom: 10px; */
    margin: 0 5px;
  }
  
  .phrase:hover {
    background-color: #81d4fa;
  }
/*Übersetzung*/
  .phrase-translation {
    font-family: "Raleway", sans-serif;
    font-size: 1rem;
    color: #333;
    background: #e0f7fa;
    border-left: 3px solid #0288d1;
    padding: 5px 8px;
    margin: 4px 5px;
    border : 1px solid #81d4fa;
    direction : ltr;
    border-radius : 6px;
    box-shadow : 0 2px 6px rgba(0,0,0,0.1);
  }

.phrase-arab{
   direction: rtl; 
   direction: ltr;
   unicode-bidi: isolate;
}

.phrase-de{
  text-align: left;
}


  /*Sticky bar*/

  #bottomMenu button{
    font-family: National Park;
  }

  #fontsize{
    display:flex;
    font-weight: bold;
    padding: 3px;
  }

  #translation-controls {
   width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 3px;
    z-index: 9999;
  }
  
  /* #translation-controls button {
    padding: 6px 12px;
    border: none;
    background: #eaeaea;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    font-family: National Park, Arial, sans-serif;
  }

 #translation-controls button:hover {
    background: #dcdcdc;
  } */
  
   /* --- Container des ausklappbaren Menüs --- */
   #bottomMenu {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    background: var(--bg-color); /*#333*/
    color: var(--text-color);
    overflow: hidden;
    transition: 30px 0.3s ease;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    
}

/* Menü ist eingeklappt */
#bottomMenu.collapsed {
    max-height: 36px;  /* nur der Pfeil sichtbar */
    right: 0;
    width: 50px;
}

/* Menü ist ausgeklappt */
#bottomMenu.expanded {
    max-height: 400px; /* genug groß für Inhalt */
    display:flex;
    flex-direction: row-reverse;
}

#bottomMenu.expanded #menuHeader{
  color: var(--green);
  right: 0;
  width: 50px;
}
#bottomMenu.expanded #menuHeader:hover{
  color: var(--red);
}

/* --- Header-Bereich (mit Pfeil) --- */
#menuHeader {
  background: var(--bg-color); /*#222*/
  color: var(--text-color);
  padding: 2px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  /* height: 36px; */
  width: 50px;
}
#menuHeader:hover{
  color: var(--green);
}

/* --- Inhalt --- */
#menuContent {
    padding: 15px;
}


/*SIDEBAR*/
#sidebar {
  position: fixed;
  top: 0;
  right: -280px;  /* versteckt */
  width: 280px;
  height: 100vh;
  background: var(--bg-color); /*#333*/
  color: var(--text-color);
  padding: 20px;
  transition: right 0.3s ease;
  box-sizing: border-box;
  overflow: scroll;
  z-index: 9999;
}
  
  #sidebar.open {
      right: 0;       /* sichtbar */
  }
  .dialects{
    color: var(--green);
  }
  .dialects:hover{
    color: var(--green-hover);
  }
  .dialects:active{
    color: var(--green-active);
  }
  /* Toggle-Button */
  /* #toggleBtn {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 10px 15px;
      cursor: pointer;
  } */
  
  /* Close-Button in der Sidebar */
  #closeBtn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    left: 15px;
}
#closeBtn:hover{
  color: var(--red);
}
  
  /*-- blocks and ranks --*/
a{
  text-decoration: none;
  color: var(--text-color);
}
.chapters{
  border:24px black;
  border-radius:15px;
  height: 240px;
  display: inline-block;
  width: 160px;
  cursor: pointer;
  margin-right: 10px;
  overflow: scroll;
  color: blacK;
  background-image: url("../../block2.png");
  background-size: contain;
  position: relative;
}
.chapterlist{
  text-decoration: none;
  padding: 0;
  text-align: center;
  margin: 0;
}
.chapterlist li{
  list-style-type: none;
  padding: 15px;
  background-color: hsla(0, 0%, 60%, 0.5)
}
.chapterlist li:hover{
  background-color: hsla(0, 0%, 60%)
}
.chapterlist li:active{
  background-color: hsl(0, 0%, 50%);
}
.blocks{
  border:24px black;
  border-radius:15px;
  background-color: hsl(0, 0%, 60%);
  height: 240px;
  display: inline-block;
  width: 160px;
  /* margin: 10px; */
  align-content: flex-end;
  cursor: pointer;
  margin-right: 10px;
  background-image: url("../../block2.png");
  background-size: contain;
}
.blocks:hover{
  opacity:0.7;
}

.blocks:active{
  opacity: 0.4;
}

.blockbottom{
  color: black;
  background-color: hsl(0, 0%, 90%);
  padding: 10px;
  height: 30%;
  border-bottom-right-radius: 15px; 
  border-bottom-left-radius: 15px; 
  font-size: 14px;
}
.blockbottom2{
  color: black;
  background-color: hsl(0, 0%, 90%);
  padding: 10px;
  height: 30%;
  border-bottom-right-radius: 15px; 
  border-bottom-left-radius: 15px; 
  font-size: 14px;
  position: sticky;
  bottom:0;
}
.ranks{
  overflow:clip;
}

#material{
  margin:0px;
}
.subheading{
  /* margin: 20px; */
  
}
.subheading h1{
  color: var(--text-color);
}
.blockranks{
  height: fit-content;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* margin: 10px; */
}




/*resizer*/

#resizer {
  width: 5px;
  background: #aaa;
  cursor: ew-resize;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
height: 4000px;
}



html, #title {
  height: 100%;
  margin: 0;
}

#title {
  /* Starte mit einem diagonalen Gradient */
  background: linear-gradient(135deg, #009f9a, #a5e228, #009f9a);
  background-size: 300% 300%; /* größerer Bereich für Bewegung */
  animation: wave 10s ease-in-out infinite;
  color: #043;
}

@keyframes wave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#clear{
  background-color: var(--red);
}

.theme{
  cursor: pointer;
  padding: 0px 5px;
  width: 100px;
}
.theme:hover{
  opacity: 0.8;
}
.theme:active{
  opacity: 0.6;

}

.theme-light {
  --text-color: rgb(0, 0, 0);
  --bg-color: white;
  --green: rgb(0, 226, 0);
}

.theme-dark {
  --text-color: white; /*rgb(0, 226, 0)*/
  --bg-color: #202020 ; 
  /* --green: black;
  --green-hover: rgb(0, 0, 0, 0.9);
  --green-active: rgb(0, 0, 0, 0.8); */
  --input: black;
  --input-focus: ;
  --input-hover: ;
  --shadow: rgba(255, 255, 255, 0.05) 0px 0px 12px 10px;
  --red: rgb(255, 0, 0);
  --border: rgba(255, 255, 255, 0.20);
}

#modes{
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.down{
  background-color: var(--input);
  color: var(--text-color);
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  transition: 0.2s;
}
.down:hover{
  background-color: var(--input-hover);

}
.down:active{
  background-color: var(--input-focus);

}

.trdiv{
border-radius: 10px;
background-color:hsl(0, 0%, 90%);
padding: 5px;
}

.trdiv:hover{
background-color:hsl(0, 0%, 85%);

}