* 

{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body 

{

  height: 100vh;

  display: flex;

  flex-direction: column;

  font-family: Verdana, sans-serif;

  font-size : 1rem;

  line-height : 1.5;

  color: #333;

  background-color: #f7f9fc;

}



/* ---- header ----*/



header 

{

  position:fixed;

  top:0px;

  left:0px;

  width:100%;

  height: 60px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  color : #FFFFFF;

  background-color: #FFFFFF;

  border-bottom: 1px solid #BBBBBB;

  box-sizing: border-box;

  z-index:100;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hier wird der Schatten hinzugefügt */

}



header .position-left 

{

  text-align: left; 

  padding-left: 6px;

}



header .position-right 

{

  font-size: 14px;

  text-align: right; 

  padding-right: 6px;

}



header button {

  display: inline-block;

  padding: 12px 24px;

  font-size: 16px;

  font-weight: bold;

  color: white;

  background-color: #FF6A00;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.3s ease-in-out;

  text-decoration: none;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



header button:hover {

  background-color: #e65c00;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}



header button:active {

  background-color: #cc5200;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  transform: scale(0.98);

}









/* ---- main fullwidth ---- */



main.fullwidth 

{

  flex: 1;

  display:flex;

  justify-content: center;

  align-items: center;

  background-color: #FFFFFF;

}



main.fullwidth .courses

{

  padding: 20px;

  width : 400px;

  text-align: center;

  background-color: white;

  border: 1px solid #ccc;

  border-radius: 5px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

	

main.fullwidth .courses_title

{

  font-weight: bold;

  font-size: 16px;

  text-align: center;

  padding: 20px;

  

}



main.fullwidth a.course

{

  font-weight: bold;

  font-size: 16px;

  line-height : 26px;

  text-align: left;

  padding: 5px;

  background-color: #f0f0f0;

}



main.fullwidth h1,h2,h3

{

  color: #555555;

  padding-bottom: 5px;

}

		

main.fullwidth .login_form 

{

  padding: 20px;

  width : 400px;

  text-align: center;

  background-color: white;

  border: 1px solid #ccc;

  border-radius: 5px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



main.fullwidth .login_form input 

{

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 3px;

}



main.fullwidth .login_form button 

{

width: 100%;

padding: 10px;

margin:10px 0;

background-color: #FF6A00;

color: white;

border: none;

border-radius: 3px;

cursor: pointer;

}



main.fullwidth .login_form button:hover 

{

  background-color: #DB5700;

}



main.fullwidth .login_form button.disabled 

{

  background-color: #888888;

}



main.fullwidth .login_form p

{

  padding : 6px;

}



main.fullwidth .login_form p.error

{

  color : #FF0000;

}



main.fullwidth .login_form p.success

{

  color : #00AA00;

}



main.fullwidth .login_form a

{

  text-decoration: none;

  color: #333333;

}



main.fullwidth .login_form a:hover

{

  color: #999999;

}



/* ---- main form ---- */



main.form 

{

  position:fixed;

  top:100px;

  left:40px;

  right:200px;

  bottom: 40px; 

  overflow-y: auto;

  background-color: #FFFFFF; 

  padding: 10px;

  margin : 5px;

  border: 1px solid #ccc;  

}



main.form .page_title

{

  font-weight: bold;

  font-size: 18px;

  text-align: left;

  padding: 5px;

  background-color: #f0f0f0;

}



main.form .page_subtitle

{

  font-weight: bold;

  font-size: 14px;

  text-align: left;

  padding: 5px;

  background-color: #f0f0f0;

  margin: 6px 0 2px 0;

}



main.form h1 

{

  font-weight: bold;

  font-size: 22px;

  text-align: left;

  padding-top: 5px;

  padding-bottom: 5px;

}



main.form h2 

{

  font-weight: bold;

  font-size: 20px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.form h3 

{

  font-weight: bold;

  font-size: 18px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.form h4 

{

  font-weight: bold;

  font-size: 16px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.form h5 

{

  font-weight: bold;

  font-size: 14px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.form h6 

{

  font-weight: bold;

  font-size: 12px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.form ul 

{

  padding-left:20px;

}



main.form .form2 

 {

   display: grid;

   grid-template-columns: 120px auto;

   align-items: start;

   justify-content: stretch; 

   padding-top:15px; 

   font-size:14px;

}



main.form label 

{

  grid-column: span 1;

  margin: 0px;

  font-weight: bold;

  color: #555;

  text-align: left;

  padding-left:4px;

  padding-top:4px;

}



main.form .image_upload

{

	  display: block;

  grid-column: span 1;

  padding: 6px;

  margin: 0 0 10px 0;

  border: 1px solid #ccc;

  border-radius: 4px;

  width: 100%;

  box-sizing: border-box;

  font-size: 0.9rem;

  font-family:monospace;

  background-color:#FFFFFF;

}



main.form .image_container

{

	display: grid;

    grid-template-columns: repeat(auto-fit, 120px);

    gap: 20px;

  padding: 6px;

  margin: 20px 0 10px 0;

  border: 1px solid #ccc;

  border-radius: 4px;

  width: 100%;

  box-sizing: border-box;

  font-size: 0.9rem;

  font-family:monospace;

  background-color:#FFFFFF;

    

}



main.form input[type="text"],

          input[type="date"],

          input[type="email"],

		  select,

		  textarea

{

  display: block;

  grid-column: span 1;

  padding: 6px;

  margin: 0 0 10px 0;

  border: 1px solid #ccc;

  border-radius: 4px;

  width: 100%;

  box-sizing: border-box;

  font-size: 0.9rem;

  font-family:monospace;

  background-color:#FFFFFF;

}



main.form .button_small

{

width: 100%;

padding: 4px;

background-color: #FF6A00;

color: white;

border: none;

border-radius: 3px;

cursor: pointer;

grid-column: span 2;

margin-bottom : 10px;

}



main.form .button_small:hover 

{

  background-color: #e65c00;

}



main.form .button_small:active 

{

  background-color: #cc5200;

}





main.form .table

{

   display: grid;

   grid-template-columns: auto;

   column-gap: 0px;

   row-gap: 5px;

   align-items: start;

   justify-content: stretch; 

   padding-top:5px; 

   font-size:14px;

   margin:0px;

}





main.form .table_2s_1

{

   display: grid;

   grid-template-columns: 28px 28px auto;

   column-gap: 0px;

   row-gap: 5px;

   align-items: start;

   justify-content: stretch; 

   padding-top:5px; 

   font-size:14px;

   margin:0px;

}



main.form .table_2s_4

{

   display: grid;

   grid-template-columns: 28px 28px auto auto auto auto;

   column-gap: 0px;

   row-gap: 5px;

   align-items: start;

   justify-content: stretch; 

   padding-top:5px; 

   font-size:14px;

   margin:0px;

}



main.form .table_4s_1

{

   display: grid;

   grid-template-columns: 28px 28px 28px 28px auto;

   column-gap: 0px;

   row-gap: 5px;

   align-items: start;

   justify-content: stretch; 

   padding-top:5px; 

   font-size:14px;

   margin:0px;

}



main.form .tablecell

{

  height:26px;

  font-family:monospace;

  font-weight: bold;

  font-size: 14px;

  text-align: left;

  margin-bottom: 1px; 

  padding: 0 2px; 

  display: flex; 

  align-items: center; 

  justify-content: flex-start; 

  background-color: #F2F6FB; 

  border-radius: 1px;

}



main.form .tablecell.white

{

  background-color: #FFFFFF; 

}





main.form .tablebutton

{

  display: flex;

  align-items: center;

  justify-content: flex-start;

  background-color: #F2F6FB;

  border: 1px solid #ccc;

  padding: 2px;

  margin-top : 0px;

  border-radius: 4px;

  text-decoration: none;

  color: #444444;

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease;

}



main.form .tablebutton:hover

{

  background-color: #eaeaea;

  border: 1px solid #666666;

}



main.form .tablebutton:active

{

  background-color: #999999;

}



main.form .tablebutton img 

{  

  width: 16px;

  height: 16px;

}



/* ---- aside right  ---- */



aside.right 

{

  position:fixed;

  top:100px;

  left: calc(100% - 200px);

  width: 150px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  background-color: #FFFFFF;

  padding: 10px;

  margin : 5px;

  border: 1px solid #ccc;  

  

}



aside.right a, aside.right button 

{

  display: flex;

  align-items: center;

  justify-content: flex-start;

  background-color: #f7f9fc;

  color: #333;

  text-decoration : 0px;

  border: 1px solid #ccc;

  padding: 8px;

  font-size: 12px;

  border-radius: 4px;

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease;

}



aside.right a:hover, aside.right button:hover

{

  background-color: #eaeaea;

  color: #000;

}



aside.right a:active, aside.right button:active

{

  background-color: #999999;

  color: #000;

}



aside.right button:disabled, main.form button:disabled

{

  background-color: #f7f9fc;

  color: #999999;

  cursor: not-allowed;

}



aside.right a span

{

  margin-top: 3px;

  margin-left: 10px;

}



aside.right button span  

{

  margin-left: 10px;

}



aside.right a img, aside.right button img

{  

  margin-top: 2px;

  width: 16px;

  height: 16px;

}





/* ---- main course ---- */



main.course 

{

  position:fixed;

  top:100px;

  left:450px;

  right:40px;

  bottom: 40px; 

  overflow-y: auto;

  background-color: #fefefe; 

  padding: 10px;

  margin : 5px;

  border: 1px solid #ccc;  

  font-size : 14px;

}



main.course .page_header

{

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 10px;

  padding: 5px;

  background-color: #f0f0f0;

  padding-left: 10px;

  align-items: center; 

}



main.course .page_link_container

{

  display: flex; 

  align-items: center; 

  gap: 10px;

}



main.course a.page_link

{

	padding : 10px 0px 10px 0px;

	color : #444444;

}



main.course a.page_link:hover

{

	color : #111111;

	font-weight : bold;

}



main.course .text_course

{

  font-weight: bold;

  font-size: 16px;

  text-align: left;	

}



main.course .right_btn 

{	

    right: 4px;

    top: 4px;

    cursor: pointer;

    background-color: #FF6A00;

    color: white;

    border: none;

    padding: 5px 10px;

    border-radius: 3px;

}



main.course .right_btn:hover 

{

    background-color: #e65c00;

}



main.course .page_content

{

	margin : 10px 10px 10px 4px;

}



main.course p 

{

  padding-top : 5px;

  padding-bottom : 5px;

}



main.course .ql-align-center 

{

  text-align: center; 

}



main.course .ql-align-right 

{

    text-align: right;

 }



main.course .ql-align-justify 

{

    text-align: justify;

 }

  

main.course .ql-code-block-container {

	

  counter-reset: line;

  background-color:#fafafa;

  padding:4px;

  border-style:dotted;

  border-width:1px;

  border-color:#555555;

  font-family:monospace;

  margin-top:10px;

  margin-bottom:10px;

}



main.course .ql-code-block {

	white-space: pre-wrap;

  counter-increment: line;

  font-weight:bold;

  line-height:1.5em;  

}





main.course .ql-code-block::before {

  content: counter(line);

  display: inline-block;

  width: 2em; /* Fixed width */

  border-right: 1px solid #999999;

  padding: 0 .5em;

  margin-right: .5em;

  color: #888;

  -webkit-user-select: none;

  

}

 

main.course img

{

  margin-top:10px;

  margin-bottom:10px;

}

 

  

main.course h1 

{

  font-weight: bold;

  font-size: 22px;

  text-align: left;

  padding-top: 5px;

  padding-bottom: 5px;

}



main.course h2 

{

  font-weight: bold;

  font-size: 20px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.course h3 

{

  font-weight: bold;

  font-size: 18px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.course h4 

{

  font-weight: bold;

  font-size: 16px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.course h5 

{

  font-weight: bold;

  font-size: 14px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.course h6 

{

  font-weight: bold;

  font-size: 12px;

  text-align: left;

  padding-top: 15px;

  padding-bottom: 5px;

}



main.course img 

{

  max-width: 80%; 

  height: auto; 

}



/* ---- aside left  ---- */



aside.left 

{

  position:fixed;

  top:100px;

  left: 40px;

  width: 400px;

  display: flex;

  flex-direction: column;

  gap: 3px;

  background-color: #FFFFFF;

  padding: 10px;

  margin : 5px;

  border: 1px solid #ccc;  

  bottom: 40px;

  overflow-y: auto;

  font-size:0.8rem;

}



aside.left .menu_course

{

	cursor: pointer;

	font-weight: bold;

	display: block;

	padding: 10px;

	background: #eaeaea;

	border-radius: 1px;

	color:#222222;

	text-decoration : none;

	

}



aside.left .menu_modul

{

	cursor: pointer;

	font-weight: bold;

	display: block;

	padding: 10px;

	background: #f6f6f6;

	border-radius: 1px;

	color:#444444;

	text-decoration : none;

	

}



aside.left .menu_modul_selected

{

	background: #f0f0f0;

}



aside.left .menu_modul:hover

{

	background: #f0f0f0;

}



aside.left .menu_lesson

{

	cursor: pointer;

	font-weight: bold;

	display: block;

	padding: 4px;

	background: #fafafa;

	border-radius: 1px;

	color:#444444;

	text-decoration : none;

	margin-left : 20px;

}



aside.left .menu_lesson_selected

{

	background: #f4f4f4;

}



aside.left .menu_lesson:hover

{

	background: #f4f4f4;

}



aside.left .menu_page

{

	cursor: pointer;

	

	padding: 2px;

	color:#666666;

	text-decoration : none;

	margin-left : 20px;

	

	    display: flex;          /* Flexbox-Layout aktivieren */

    align-items: center;   /* Elemente vertikal zentrieren */

    gap: 8px;              /* Abstand zwischen Bild und Text */





}



aside.left .menu_page_selected

{

	font-weight : bold;

	color: #444444;

}



aside.left .menu_page:hover

{

	color: #444444;

	font-weight : bold;

}





/* ---- main course_overview ---- */



main.course_overview

{

  position:fixed;

  top:100px;

  left:450px;

  right:40px;

  bottom: 40px; 

  overflow-y: auto;

  background-color: #FFFFFF; 

  padding: 10px;

  margin : 5px;

  border: 1px solid #ccc;  

  font-size : 14px;

}



main.course_overview .course_container 

{

	width: calc(100%-480px);

	margin: 20px auto;

	border: 1px solid #ccc;

	border-radius: 2px;

	padding: 10px;

	background: #f9f9f9;

}



main.course_overview .modul_container

{



}



main.course_overview .modul_toggle_btn 

{

	cursor: pointer;

	font-weight: bold;

	display: block;

	padding: 8px;

	background: #ccc;

	border-radius: 2px;

	margin: 5px 0;

}



main.course_overview .modul_toggle_btn:hover 

{

    background: #bbb;

}



main.course_overview .lesson_container

{

	margin-left:20px;

}



main.course_overview .lesson_toggle_btn 

{

	cursor: pointer;

	font-weight: bold;

	display: block;

	padding: 8px;

	background: #eee;

	border-radius: 2px;

	margin: 5px 0;

	position:relative;

}



main.course_overview .lesson_toggle_btn:hover 

{

    background: #ddd;

}



main.course_overview .lesson_right_btn 

{	

	position: absolute;

    right: 4px; /* Abstand vom rechten Rand */

    top: 50%; /* Vertikal zentrieren */

    transform: translateY(-50%);

    cursor: pointer;

    background-color: #FF6A00;

    color: white;

    border: none;

    padding: 5px 10px;

    border-radius: 3px;

}



main.course_overview .lesson_right_btn:hover 

{

    background-color: #e65c00;

}



main.course_overview .page_container

{

 	cursor: pointer;

	

	padding: 2px;

	color:#666666;

	text-decoration : none;

	margin-left : 3px;

	

	    display: flex;          /* Flexbox-Layout aktivieren */

    align-items: center;   /* Elemente vertikal zentrieren */

    gap: 8px;              /* Abstand zwischen Bild und Text */







}



main.course_overview .page_container:hover

{

 	font-weight:bold;

}



main.course_overview .inhalt 

{

	max-height: 0;

	overflow: hidden;

	transition: max-height 0.3s ease-out;

}



main.course_overview .pfeil 

{

	display: inline-block;

	transition: transform 0.3s;

	color:#888888;

}



main.course_overview .rotated 

{

	transform: rotate(90deg);

}



/* ---- aside course_overview  ---- */



aside.course_overview 

{

  position:fixed;

  top:100px;

  left: 40px;

  width: 400px;

  height : 400px;

  margin : 5px;

  padding : 0px;

  border: 1px solid #ccc;  

  border-radius: 20px;

  

}



aside.course_overview img

{

  

  border-radius: 20px;

    width: 398px;

  height : 398px;



}





/* ---- main home ---- */



main.home

{

	position:fixed;

	top:40px;

	left:0px;

	right:0px;

	bottom: 0px; 

	overflow-y: auto;

	background-color: #FFFFFF; 

	padding: 10px;

	margin : 5px;

	font-size : 14px;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	min-height: 100vh;

}



main.home .title_image img {

    max-width: 100%;

    height: auto;

    display: block; /* Entfernt zusätzlichen Leerraum unter dem Bild */

    margin: 0 auto; /* Zentriert das Bild, falls es kleiner als der Container ist */

}



main.home .title_image

{

	text-align: center;

    margin:0px 40px 40px 40px;

}



main.home .card-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

    padding: 20px;

    max-width: 1200px;

    width: 100%;

    /* To center the grid itself if it doesn't fill the max-width */

    margin-left: auto;

    margin-right: auto;

    justify-items: center; /* This will center the cards within their grid cells */

}



main.home .card {

    background-color: #fff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Remove the fixed width here */

    text-decoration: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Optional: If you want to ensure the card itself doesn't stretch beyond 250px but still centers */

    max-width: 250px;

}

	

main.home .card:hover 

{

    transform: scale(1.05); 

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 

}



main.home .card img 

{

	width: 250px;

	height:140px;

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

}



main.home .card-content 

{

	padding: 15px;

}



main.home .card-content h3 

{

	margin: 0;

	font-size: 1.2em;

	color: #333;

}

		

main.home .card-content h4 

{

	margin: 0;

	font-size: 1em;

	color: #333;

}

main.home .card-content p 

{

	margin: 10px 0 0;

	font-size: 0.9em;

	color: #666;

}