/*
 * 2024.08.31: Version 7
 */

/*
 * Global variables
 */

:root {
       font-size: 16px; /* To prevent instability and even though it is the default value! */

       --nav-text-color: #ffffff;
       --nav-dropdown-color: #000000;
       --nav-dropdown-bg-color: #ffffff;
       --nav-height: 70px;
       --portrait-height: 100px;
       --rule-color: #A3A3A3;
       --font-color: #575757;
       --background-color-layout: #707070;
       --background-color-box: #f9f9f9;
       --background-color-click-box: #e0e0e0;
       --background-burger-color: #ffffff;
       --text-column-color:#333333;
       --h5-color:#57427d;
}

body {
	padding: 0;
	margin: 0;
}

body, html {
    font-family: Arial, Helvetica, sans-serif; /* web safe font and fallback font */
    font-size: clamp(0.8rem, 0.5vw, 1rem); /* Dynamic font size */
    line-height: 1.7;
    color: var(--font-color);
    box-sizing: border-box; /* easier calculate box size, border and padding doesnt matter */
    min-height: 100vh;
}

/*
 * Basic document layout elements
 */

main {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
    padding: 2rem;
    min-height: 100%;
}

article {
    max-width: 1000px;
    margin: 0 auto;
    font-size: clamp(0.8rem, 0.5vw, 1rem); /* Dynamic font size */
     
}

header {
    position: fixed; /* permanent visible header */
    top: 0; left: 0; right: 0;
    background-color: var(--background-color-layout);
    color: var(--nav-text-color);
    padding: 0.0em; /* identical default size */
    text-transform: capitalize; /* first character of each word to uppercase */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

footer {
    background-color: var(--background-color-layout);
    color: var(--nav-text-color);
    text-align: center;
    margin-top: auto;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
    background-color: var(--rule-color);
    color: var(--rule-color);
    opacity: 0.5;
}

div.vspace {
   height:20px;
}

/*
 * Headings 
 */

h1 {
    font-size: clamp(0.9rem, 1.5vw, 1.5rem); /* Dynamic font size */ 
     font-style: italic;
}

h2 {
    font-size: clamp(0.9rem, 1.5vw, 1.5rem); /* Dynamic font size */ 
   
    
}

h3 {
    font-size: clamp(0.75rem, 1.3vw, 1.1rem); /* Dynamic font size */ 
    
}
h4 {
    font-size: clamp(0.6rem, 1.0vw, 1.0rem); /* Dynamic font size */ 
      color: var(--h5-color);

}
h5 {
    font-size: clamp(0.6rem, 1.0vw, 1.0rem); /* Dynamic font size */ 
   

}

.content-list-row h2, h3 {
    margin-top: 0;
}

.text-content h2 {
    margin-top: 0;
    font-size: clamp(0.9rem, 1.5vw, 1.5rem); /* Dynamic font size */ 
}

.text-content h3 {
    margin-top: 0;
    font-size: clamp(1rem, 1.0vw, 1.3rem); /* Dynamic font size */ 
}

/*
 * Tables
 */

th > h3, th > h4, th > h5 {
    margin-top: 0; 
    font-size: clamp(0.75rem, 1.3vw, 1.1rem);;
}

td > h3, td > h4, td > h5 {
    margin-top: 0; 
    font-size: clamp(0.75rem, 1.2vw, 1.0rem);
   
}

th {
    text-align: left;
 
}

td {
    text-align: left;
    vertical-align: top;
    padding-left: 1em;
}

/*
 * Text container including 3 text columns (document index.html and produkte.html)
 */

div.text-container{
         display: flex;
         flex-wrap: wrap;
	 gap: 30px;
	 max-width: 100%; /* Maximum width of the container, customizable */
         margin: 0 auto; /* Centers the container */
}

div.text-column{
  flex: 1 1 calc(30.333% - 14px);
  max-width: calc(33.333% - 14px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box; 
  /*min-width: calc(33.333% - 20px);*/
  padding: 1em;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  background-color: var(--background-color-box);
}

.text-column h2 {
  margin-top: 0;
  color: var(--text-column-color);
  font-size: clamp(0.9rem, 1.0vw, 1.2rem); 
}

.text-column p {
  color: var(--text-column-color);
  line-height: 1.6;
  flex-grow: 1; /* Grows the text section and moves the box down */
}

.text-column p.tiny {
  color: var(--text-column-color);
  line-height: 1.6;
  margin-bottom: 0px; /* check! */
  flex-grow: 0; /* Grows the text section and moves the box down */
}

/*
 * Start: Container contains 3 columns list (document projektleitung.html)
 */

.content-list-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.content-list-column, .content-list-column-2 {
  display: flex;
  flex-direction: column;
  background-color: var(--background-color-box);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-list-row {
  margin-bottom: 20px;
}

/* Style for the first two columns */
.content-list-column:nth-child(1),
.content-list-column:nth-child(2) {
  display: grid;
  grid-template-rows: auto auto auto;
}

.content-list-column-text {
  padding: 0.5em;
  margin: 0;
  list-style: none;
}

/*
 * End: Container contains list (document projektleitung.html)
 */

/*
 * Start: Container contains 2 columns list (document machinelearning.html)
 */

.content-list-container-2 {
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
}

/* Stil für die ersten beiden Spalten */
.content-list-column-2:nth-child(1) {
  display: grid;
  grid-template-rows: auto auto;
}

/*
 * End: Container contains 2 columns list (document machinelearning.html)
 */

/*
 * Start: Container contains 3 tables (document wirueberuns.html)
 */

.table-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between tables */
  
}

.table-wrapper {
  flex: 1;
  min-width: calc(33.333% - 20px); /* Width for each column taking into account the spacing */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  background-color: var(--background-color-box);
  
}

table {
  width: 100%;
  border-collapse: collapse;
  
}

table, th, td {
  border: 0px solid #ddd;
  
}

th, td {
  padding: 8px; 
  text-align: left;
  
}


/*
 * Clickable box (used in index.html) 
 */

.bottom-box {
  margin-top: auto; /* Schiebt die Box an das Ende der Spalte */
  padding: 1em;
  background-color: var(--background-color-click-box);
  border-radius: 4px;
  width: 5em;
  text-align: center;
}

.bottom-box > a {
	text-decoration: none;
  padding: 0em;
}

/*
 * Text distributed across three columns (index.html, kontakt.html,...) 
 */

div.text-content{
	padding: 1rem;
        background: transparent;
	border-top: 1px solid var(--rule-color);
	-moz-column-count: 3; /* Firefox */
	-webkit-column-count: 3; /* Safari and Chrome */
	column-count: 3;	
	-moz-column-gap: 1rem; /* Firefox */
	-webkit-column-gap: 1rem; /* Safari and Chrome */
	column-gap: 1rem;	
	-moz-column-rule: 1px solid var(--rule-color); /* Firefox */
	-webkit-column-rule: 1px solid var(--rule-color); /* Safari and Chrome */
	column-rule: 1px solid var(--rule-color);
}

/*
 * Image styles (logo and portrait)
 */

img {
  width: auto;
  max-height: var(--nav-height);
  display: block;
}

img.portrait {
  width: auto;
  max-height: var(--portrait-height);
  display: block;
}

/*
 * Navigation including hamburger
 */

nav {
	position: fixed;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	height: var(--nav-height);
	padding: 0;
        background-color: var(--background-color-layout);
}
nav .logo {
	padding: 0;
	margin: 0;
}
nav .logo-text {
	position: absolute;
	top: 0;
	left: 100px;
	font-size: clamp(1.2rem,2.5vw,3rem); /* Fluid typography: clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */
        font-weight: bold;
	line-height: var(--nav-height);
	color: var(--nav-text-color);
}
nav .nav-menu {
	position: absolute;
	right: 1.5em;
	top: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}
nav .nav-item {
	display: inline-block;
}
nav .nav-item > a, nav .nav-item-content > a {
	display: inline-block;
	padding: 0 0 0 1.5em; /* Just a left padding, get the button close to link */
	line-height: var(--nav-height);
	font-size: clamp(1.2rem,3.0vw,1.5rem); /* Fluid typography: clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */
	color: var(--nav-text-color);
	text-decoration: none;
}
nav .dropdown {
	position: relative;
}
.dropdown-button {
        cursor: pointer;
	border-radius: 4px;
}
nav .dropdown button::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	border-top: .3em solid #000;
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}
nav .dropdown.show button::after {
	transform: rotate(180deg);
}
nav .dropdown-menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: .5em 0;
	margin-top: -.5em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: .5em;
	background-color: var(--nav-dropdown-bg-color);
	white-space: nowrap; /* Prevents line breaks within the dropdown */
	width: auto;/* Automatically adjusts the width to the content */ 
	}
nav .dropdown.show .dropdown-menu {
	display: inline-block;
}
nav .dropdown-item {
	display: block;
	padding: 0 0.5em;
	font-size: clamp(0.5rem,1.2vw,0.8rem); /* Fluid typography: clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */
	color: var(--nav-dropdown-color);
	line-height: 2;
	text-decoration: none;
	white-space: nowrap; /* Prevents line breaks within the dropdown */
	width: auto; /* Automatically adjusts the width to the content */ 
	overflow: hidden; /* Prevents text from overflowing */ 
        text-overflow: ellipsis; /* Displays "..." if the text is too long */ 
}
nav .btn-hamburger {
	display: none;
	position: absolute;
	right: 1.5em;
	top: 50%;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	outline: none;
	transform: translateY(-50%);
}
nav .btn-hamburger span {
	display: block;
	width: 30px;
	height: 4px;
	background-color: var(--background-burger-color);
	margin: 6px;
	border-radius: 2px;
	transition: .3s ease-in-out;
}
nav .btn-hamburger span:nth-child(4),
nav .btn-hamburger span:nth-child(5) {
	position: absolute;
	top: 10px;
	opacity: .5;
}
nav .btn-hamburger span:nth-child(4) {
	transform: rotate(45deg) scale(0);
}
nav .btn-hamburger span:nth-child(5) {
	transform: rotate(-45deg) scale(0);
}
nav.opened .btn-hamburger span:nth-child(4) {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}
nav.opened .btn-hamburger span:nth-child(5) {
	opacity: 1;
	transform: rotate(-45deg) scale(1);
}
nav.opened .btn-hamburger span:nth-child(1),
nav.opened .btn-hamburger span:nth-child(2),
nav.opened .btn-hamburger span:nth-child(3) {
	opacity: 0;
}
/*
 * Only one Breakpoint
 */
@media screen and (max-width: 768px) {
	nav .nav-menu {
		position: fixed;
		left: 0;
		right: 0;
		top: 70px;
		bottom: 100%;
		display: flex;
		flex-direction: column;
		list-style-type: none;
                padding: 0;
		justify-content: start;
                background-color: var(--background-color-layout);
		transition: bottom .5s ease-in-out;
		overflow: hidden;
		width: 300px;
	}
	nav.opened .nav-menu {
		bottom: 0;
	}
	nav .nav-item-content {
                display: flex;
                align-items: center;
		justify-content: space-between;
		padding: 0 2rem 0 0rem;
        }
	nav .nav-item > a, nav .nav-item-content > a {
		display: block;
	        font-size: clamp(1.2rem,3vw,3rem); /* Fluid typography: clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */
	}
	nav .dropdown-menu {
		position: relative;
		top: 0;
		margin: 0 1.5em;
	}
        nav .dropdown-item {
	        font-size: clamp(0.8rem,3vw,3rem); /* Fluid typography: clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */
	}
	nav .btn-hamburger {
		display: block;
	}
	nav .logo-text {
	        font-size: clamp(1.2rem,4.5vw,4rem); /* Fluid typography: clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */
        }
        h1 {
                font-size: clamp(1.2rem, 4.5vw, 4rem);  /* Dynamic font size */
                margin-left: 0; 
       }
       div.text-content{
	        -moz-column-count: 1; /* Firefox */
	        -webkit-column-count: 1; /* Safari and Chrome */
	        column-count: 1;	
        }
	div.text-column {
              flex-basis: 100%;
              max-width: 100%;
        }
	/*
         * Container contains list (document projektleitung.html)
         */

	.content-list-container, .content-list-container-2 {
              grid-template-columns: 1fr;
        }
  
        .content-list-column,
        .content-list-column:nth-child(1),
        .content-list-column:nth-child(2),
        .content-list-column-2,
        .content-list-column-2:nth-child(1),	{
             display: block;
        }
  
        .content-list-column:nth-child(3),
        .content-list-column-2:nth-child(2) {
             grid-column: auto;
        }

	/*
         * Container contains 3 tables (document wirueberuns.html)
         */

	 .table-wrapper {
             min-width: 100%; /* Full width for each table */
         }


}