:root {
    /* colors */
    --lightest: hsl(75, 15%, 98%);
    --lighter: hsl(75, 15%, 90%);
    --light: hsl(75, 15%, 85%);
    --middle: hsl(75, 15%, 75%); 
    --dark: hsl(75, 15%, 65%);
    --darkest: hsl(75, 15%, 50%);
    --font_color: hsl(75, 30%, 15%);
    --font_lighter: hsl(75, 10%, 40%);

    --special_lightest: hsl(270, 20%, 98%);
    --special_lighter: hsl(270, 15%, 90%);
    --special_light: hsl(270, 15%, 85%);
    --special_middle: hsl(270, 15%, 75%); 
    --special_dark: hsl(270, 15%, 65%);
    --special_darkest: hsl(270, 15%, 50%);
    --special_attraction_light: hsl(43, 78%, 67%);
    --orange: hsl(22, 91%, 64%);

    --lightred: hsl(40, 100%, 70%);
    --midred: hsl(12, 100%, 50%);
    --darkred: hsl(12, 60%, 40%);

    --lightblue: hsl(270, 40%, 65%);
    --midblue: hsl(272, 34%, 39%);
    --darkblue: hsl(270, 100%, 10%);

    --attraction_light: hsl(0, 20%, 50%);
    --attraction_dark: hsl(0, 100%, 10%);

    /* font-sizes */

    --font-normal: 22px;
    --font-smaller: calc(var(--font-normal)*0.75);
    --font-smallest: calc(var(--font-normal)*0.60);
    --font-biggest: calc(var(--font-normal) * 1.2);
   
}

/* fonts */
@font-face {
    font-family: Quattrocento-sans-thin;
    src: url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-300.woff2), 
        url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-300italic.woff2);
}
@font-face {
    font-family: Quattrocento-sans-regular;
    src: url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-regular.woff2),
        url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-italic.woff2);
}
@font-face {
    font-family: Quattrocento-sans-bolder;
    src: url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-500.woff2), 
    url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-500italic.woff2);
}
@font-face {
    font-family: Quattrocento-sans-boldest;
    src: url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-800.woff2), 
        url(/fonts/open-sans-v40-greek_latin/open-sans-v40-greek_latin-800italic.woff2);
}


body {
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}



/* Header */
/***************************************************/
/***************************************************/
/***************************************************

im Header nebeneinander:
Deko
Menü (Punkte untereinander)
Div id = "us" (ueberschrift Durander)

| img  |____Menu__|                Durander |       
|      |__________|                         | 
|      |__________|                         | 

*/

nav {
    display: grid;
    grid-template-columns: 20% 10% auto;
}

#main_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#main_menu a {
    display: block;
    text-decoration: none;
    padding:2px;
    font-size: 12px;
    font-family: 'Caudex', serif;
    margin: 0;
}

main {
    min-height: 100vh;
}

footer {
    display: grid;
    grid-template-columns: 15% 85%;
    margin:0;
    height: 50px;
    
}
footer div p {
    padding-left: 20px;
    padding-top: 10px;
}

/* #working_desk  */
/***************************************************/
/* for external reader on textsammlungen*/
/* and internal for author 


| file-menu |                 book-page |
|           |           = text_content  |

*/

#working_desk {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 30% 70%;
    min-height: 700px;
}


#file_menu ul {
    padding: 0;
    margin: 0;
}
#file_menu li {
    margin-bottom: 5px;
}
#file_menu ul>ul li {
    padding-left: 5%;
}
#file_menu ul>ul>ul li {
    padding-left: 8%;
}
#file_menu ul>ul>ul>ul li {
    padding-left: 12%;
}
#file_menu ul>ul>ul>ul>ul li {
    padding-left: 15%;
}
#file_menu ul>ul>ul>ul>ul>ul li {
    padding-left: 18%;
}
#file_menu ul>ul, 
#file_menu ul>ul>ul, 
#file_menu ul>ul>ul>ul, 
#file_menu ul>ul>ul>ul>ul {
    display: none;
}

.click_dir {
    padding: 2%;
}
.click_file {
    padding: 1.5%;
}

#file_menu li {
    cursor: pointer;
}

.visible {
    display: block !important;
}

/* .book-page */
/***************************************************/

/*
__________________________________
| txt_box                 |  img  |
|_________________________|       |
| toggle_sign_box         |       |
|_________________________|       |
| translatio_box          |       |
|_________________________|       |
| user_made_comments      |       |
|_________________________|       |


*/

/* .book-page entspricht
#textcontent (ersteres in textsammlungen.php,
letzteres in working_area.php fuer Vorschau) 
*/

#book-page, #textcontent {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 5%;
}

#text_section {
    order: 1; 
    width: 100%;
    flex-grow: 2;
    overflow: hidden;
}

#bildercontainer {
    order: 2;
    max-width: 20%;
    align-self: flex-start;
    object-fit: contain;
    overflow: hidden;
    
}
#bildercontainer img {
    width: 90%;
}

#hashtags_section {
    order: 3;
    flex-grow: 2;
    width: 100%;
}

.toggle_target,
.toggle_target + .txt_box {
    margin-top: 1.2em;
}
.translatio_box, .user_made_comments {
    display: none;
}

.suggestionList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Three columns */
}

.checkbox_wrapper {
    white-space: nowrap;
}
.checkbox_wrapper>div {
    display: inline-block;
}


/* TEXT FORMATATION */
/***************************************************/
/***************************************************/
/***************************************************/

p {
    tab-size: 30;
}

.klein_p {
    width: 80%;
}
.translatio_box {
    font-family: 'Quattrocento-sans-thin';
    font-size: var(--font-smaller);
}
dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.8em;
	row-gap: 0.1em;
	margin: 0;
}

dt, dd {
	display: block;        /* or inline-block, but block is safer in grids */
	min-height: 1em;       /* set minimum height for filled cells */
	margin: 0;
}

dt:empty,
dd:empty {
	min-height: 0.7em;       /* give more space to empty cells */
	background: #f8f8f8;   /* optional: for debugging visibility */
}

.toggle_sign {
  cursor: pointer;
  margin-left: 1em;
}

h1 + h2,
h1 + p {
    margin-top: 5px;
}
h2 + h3,
h2 + .intro,
.locus + h3,
.locus + .intro,
.locus2 + h3,
.locus2 + .intro {
    margin-top: 8px;
} 
.locus + .locus2 {
    margin-top: 5px;
}

h2 + p,
h2 + ul,
h2 + dl,
.origo + .translata,
.translata + .origo,
.locus + *:not(.locus, .locus2, .intro),
.locus2 + *:not(.locus, .locus2, .intro),
.intro + *:not(.locus, .locus2, .intro) {
    margin-top: 1.5em;
}

p + h1,
dl + h1,
ul + h1 {
    margin-top: 1.5em;
}




.for_Ue + .for_Ue {
    margin: 0px;
}

ul + .klein_p,
p.klein_p + p:not(.klein_p),
p.klein_p + dl.klein_p,
.for_Ue + p:not(.for_Ue),
p:not(.klein_p) + .klein_p,
p:not(.textus) + .textus,
.textus + p,
#text_section p + #text_section ul,
#text_section p + #text_section dl,
dl + p,
dl + dl {
   
    margin-top: 1.3em;
}
.klein_p + .klein_p {
    margin-top: 0;
}

#text_section ul {
  list-style-type: square;
  list-style-position: outside;
  padding-left: 1em; /* ensures space for bullets */
  margin: 0;
}

#text_section li {
  padding-left: 0;         /* don't need extra padding */
  text-indent: 0;          /* remove negative indent */
}

button {
    height: 30px;
    width: 8%;
    font-size: 12px;
}


/* FONTS and Font-SIZES */
/***************************************************/
/***************************************************/
/***************************************************/

h1,h2,p {
    margin: 0px;
    padding: 0px;
}

h1 {
    font-family: 'Quattrocento-sans-regular';
    font-size: var(--font-biggest);
    font-weight: 500;
}
h2,
.locus {
    font-family: 'Quattrocento-sans-thin';
    font-size: var(--font-smaller);
}
h3, 
.intro, 
.locus2 {
    font-family: 'Quattrocento-sans-thin';
    font-size: var(--font-smallest);
}
.toggle_target h1 {
    font-size: calc((var(--font-biggest) *0.75));
}
.toggle_target h2,
.toggle_target .locus,
.toggle_target .locus2,
.toggle_target h3,
.toggle_target .intro  {
    font-size: calc((var(--font-smaller) *0.8));
}

.for_Ue {
    font-family: "Times New Roman", Times, serif;
    font-size: var(--font-normal);
}



.klein_p, .textus {
    font-family: 'Quattrocento-sans-thin';
    color: var(--font_lighter);
    font-size: var(--font-smallest);
}
.klein_p b {
    font-size: calc(var(--smallest)+10);
    font-weight: 200;
    font-family: 'Times New Roman', Times, serif;
}
dl.klein_p b {
    font-family: 'Courier New', Courier, monospace;
}

.toggle_target .origo {
    font-size: var(--font-smaller);
}

.origo {
    font-family: 'Times New Roman', Times, serif;
}
.txt_box .translata {
    font-size: var(--font-smaller);
    max-width: 70%;
}
.toggle_target .translata
 {
    font-family: 'Quattrocento-sans-thin';
    font-size: var(--font-smallest);
    max-width: 70%;
}


a {
    /* font-family: 'Thasadith', sans-serif; */
    text-decoration: none;
}


/* SCROLL */
/************************************************/
/***************************************************/
/***************************************************/


/* width */
::-webkit-scrollbar {
width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
background: var(--lightest); 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: var(--light); 
}