/* ======================================================
   1. RESET & BASIS
   ====================================================== */

html {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 100%;
  box-sizing: border-box;
  height: 100vh;
}

*, ::before, ::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #F0F0F0;
  padding: 3px;
  font-size: 100%;
  height: 100vh;
}


/* ======================================================
   2. LAYOUT
   ====================================================== */

#inhalt {
  background-color: #D9FFFF;
  color: black;
  height: 45em;
}

#schatten {
  width: 100%;
  background: url(bilder/schattenwurf-grau-v.png) repeat-x;
  height: 6px;
}

.kopfbereich {
  padding: 5px;
  min-width: 100%;
  background: url(bilder/header-backgr.jpg) repeat-x left top;
  font-family: Calibri;
  font-size:1.6em;
  font-size:1.6rem;
  margin-bottom: 4px;
  border-radius: 5px;
  color: white;
  overflow: auto;
}

.steuerung {
  width: 100%;
  background-color: lightgrey;
}

.foot {
  width: 100%;
  margin-top: 10px;
  padding-left: 10px;
  background-color: lightgrey;
  border: 1px solid darkgrey;
  border-radius: 5px;
  font-size: 0.9em;
}

.box1_blue { /* Menüeintrag */
  border:2px solid darkblue;
  border-radius:5px;
  font-weight:bold;
  width:9.5%;
  min-width:6em;
  float:left;
  background-color:white;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.box1_lgrey {
  border:2px solid darkgrey;
  border-radius:3px;
  padding-left:5px;
  padding-right:5px;
  font-size:1.1em;
  width:100%;
  background-color:lightgrey;
  font-family:calibri, arial, "lucida console", sans-serif; /* Schriftart */
}

.show_box {
  border:0;
  padding:5px;
  width:100%;
}
 
.show_div {
  width:100%;
  border:2px solid darkgrey;
  background-color:#EAEAEA;
  font-family:Calibri;
}

.show_darkdiv {
  width:100%;
  border:2px solid darkgrey;
  background-color:darkgrey;
  font-family:Calibri;
}

.show_head {
  width:100%;
  border:2px solid darkgrey;
  background-color:darkgrey;
  color:white;
  font-size:1.2em;
  font-family:Calibri;
}

.div_greybox {
  margin:2px;
  background-color:lightgrey;
  padding:3px;
}

.greybox {
  margin:2px;
  padding:1px;
  border:1px solid darkgrey;
  background-color:lightgrey;
  border-radius:3px;
  overflow:hidden;
}

.fieldset0{
  border:0;
  margin:0;
  background-color:lightgrey;
  width:100%;
}

.scrollarea {
  flex: 1;                /* füllt den restlichen vertikalen Platz */
  overflow-y: auto;       /* vertikales Scrollen */
  overflow-x: hidden;     /* horizontales Scrollen verhindern */
/*  background: #fff;	*/
  box-sizing: border-box;
  width: 100%;            /* volle Breite */
/*  max-height: 80vh;	*/
}

.flex_part {				/*	reicht die flex Eigenschaft vom übergeordneten an den untergeordneten Bereich durch */
  border:0;
  width:100%;
  flex:1;					/*	Restbereich wird gefüllt */
  display:flex;				/*	die nächste Ebene wird als flex eingestellt */
  flex-direction:column;	/*	vertikale Aufteilung der Ebene */
  overflow:hidden;			/*	verhindert das Scrollen auf dieser Ebene */
}

/* ======================================================
   3. TABELLEN
   ====================================================== */

.blueTable {
  background-color: darkblue;
  width: 100%;
  border: 0;
  border-spacing: 0;
  table-layout: fixed;
}

.greyTable {
  background-color: lightgrey;
  width: 100%;
  border: 0;
  border-spacing: 0;
  table-layout: fixed;
}

.tableHead {
  background-color: lightblue;
//  color: white;
  font-weight: bold;
  border: 1px solid lightgrey;
}

.tableHead th {
  overflow: hidden;
}

.sortable,
.data-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-family: Calibri, sans-serif;
/*  display:flex;			*/			/*	diese Vorgaben zerstören die table fixed Aufteilung der Spaltenbreiten!	*/
/*  flex-direction:column;	*/
}

.data-table th,
.data-table td {
  border: 1px solid grey;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1em;
}

.data-table thead {
/*  display: table;	*/	/*	das zerstört die table layout:fixed Struktur!! */
  background-color: lightblue;
  color: white;
}

.sortable tbody tr:hover,
.data-table tbody tr:hover {
  background-color: #e0e7ff;
}

.sortable tbody tr:nth-child(odd),
.data-table tbody tr:nth-child(odd) {
    border:1px solid lightgrey;
    background-color: #fbfbfb;
}

.sortable tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) {
    border:1px solid lightgrey;
    background-color: #f0f0f0;
}

.sortable tbody td,
.data-table tbody td {
    border:1px solid darkgrey;
}

.data-table th {
  background-color: #dddddd;
}

.tr_show {
  width:100%;
  font-size:1.0em;
}

.td0{
  border:0;
  background-color:#EEEEEE;
  padding:0;
  overflow:hidden;
}

.td1{
  background-color:#EEEEEE;
  border:1px solid #DDDDDD;
  padding:0;
  overflow:hidden;
}

.tdb1{
  background-color:#EFEFEF;
  border:1px solid darkgrey;
  padding:0;
  overflow:hidden;
}

.tdi{
  background-color:#EFEFEF;
  border:0;
  padding:0;
  overflow:hidden;
}

.data-table thead th,
.th-sticky {
  background-color:darkgrey;
  color:white;
  font-weight:bold;
  border:1px solid lightgrey;
  overflow:hidden;
  font-size:1.0em;
  position: sticky;  /* nächsthöheres Element muss max-height haben und overflow-y:auto oder scroll */
  top: 0;
  z-index: 3;     /* damit die Kopfzeile über dem Inhalt sichtbar bleibt */
}

.data-table tfoot {
    background-color: darkgrey;
    color: white;
}

.data-table tfoot td {
    background-color: darkgrey;
    color: white;
    font-weight: bold;
    border: 1px solid lightgrey;
    overflow: hidden;
    font-size: 0.8em;
}

.data-table tbody {
/*    display: block;  */
  overflow-y: auto;
}

.data-table tbody tr {
/*    display: table;  */
  width: 100%;
}

.data-table tbody tr:nth-child(odd) {
    border:1px solid lightgrey;
    background-color: #f0f0f0;
}

.data-table tbody tr:nth-child(even) {
    border:1px solid lightgrey;
    background-color: #d0d0d0;
}

.data-table th {
  background-color: #dddddd;
}

/* .data-table td.cell-red {
    background-color: red;
    color: white;
    font-weight: bold;
} */

.data-table td.cell-smaller {
    font-size:0.8em;
}

/* ======================================================
   4. BUTTONS
   ====================================================== */

.button {
  background-color: #23308E;
  color: white;
  font-size: 0.9em;
  font-size: 0.9rem;
  padding: 1px;
}

.button_i {
  border: 1px solid lightgrey;
  padding: 0;
  width: 100%;
  border-radius: 3px;
  font-size: 11px;
  color: black;
}

.button_i:hover,
.button_i:focus {
  border: 1px solid black;
  padding: 0;
  width: 100%;
  border-radius: 3px;
  font-size: 11px;
  color: white;
}

.buttonb {
  border:2px solid #707070;
  border-radius:3px;
  background-color: #D1F0FE;
  background: linear-gradient(to bottom, white, #F1F1F1);
  padding:2px;
  font-weight:bold;
  font-size:1.1em;
  font-size:1.1rem;
  width:100%;
  max-width:250px;
}

.buttonb:hover {
  border:2px solid #213489;
  background-color: #F1F1F1;
  background: linear-gradient(to bottom, #F1F1F1, #D1F0FE);
  padding:2px;
  font-weight:bold;
  width:100%;
  max-width:250px;
}

.buttonb:focus {
  border:2px solid darkgreen;
  cursor:not-allowed;
  background-color: #F1F1F1;
  background: linear-gradient(to bottom, #F1F1F1, #C1D0DE);
  padding:2px;
  font-weight:bold;
  color:darkgrey;
  width:100%;
  max-width:250px;
}

.buttonshow {
  border:1px solid #707070;
  border-radius:3px;
  background-color: #EAEAEA;
  background: linear-gradient(to bottom, white, #F1F1F1);
  color: #AAA;
  font-size:1.2em;
  font-size:1.2rem;
  font-style:italic;
  width:100%;
  max-width:250px;
}

/* ======================================================
   5. SUBMIT
   ====================================================== */

.submit_grey {
  width:100%;
  max-width:250px;
  font-weight:bold;
  font-size:1.1em;
  font-size:1.1rem;
  background-color:grey;
  border:1px solid grey;
  border-radius:5px;
  padding:2px;
  color:white;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_grey:hover {
  background-color:green;
  color:white;
}

.submit_lblue {
  width:100%;
  max-width:250px;
  font-size:0.7em;
  font-size:0.7rem;
  background-color:white;
  border-radius:5px;
  padding:2px;
  color:blue;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_lgreen {
  width:100%;
  max-width:250px;
  font-size:1.0em;
  font-size:1.0rem;
  background-color:lightgreen;
  border:1px solid lightgreen;
  border-radius:5px;
  padding:2px;
  color:black;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_lgreen:hover {
  background-color:green;
  color:white;
}

.submit_lgrey {
  width:100%;
  max-width:250px;
  font-size:0.7em;
  font-size:0.7rem;
  background-color:#f1f1f1;
  border-radius:5px;
  padding:2px;
  color:grey;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_lgrey:hover {
  background-color:black;
  color:white;
}

.submit_lwhite {
  width:100%;
  max-width:250px;
  font-size:0.7em;
  font-size:0.7rem;
  background-color:white;
  border-radius:5px;
  padding:2px;
  color:black;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_lwhite:hover {
  background-color:black;
  color:white;
}

.submit_lwhite100 {		/* ohne max-width Begrenzung */
  width:100%;
  font-size:0.7em;
  font-size:0.7rem;
  background-color:white;
  border-radius:5px;
  padding:2px;
  color:black;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_lwhite100:hover {
  background-color:black;
  color:white;
}

.submit_red {
  width:100%;
  max-width:250px;
  font-weight:bold;
  font-size:1.0em;
  font-size:1.0rem;
  background-color:#FFEEEE;
  border:1px solid red;
  border-radius:5px;
  padding:2px;
  color:red;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_red:hover {
  background-color:red;
  color:white;
}

.submit_white {
  width:100%;
  max-width:250px;
  font-weight:bold;
  font-size:1.0em;
  font-size:1.0rem;
  background-color:white;
  border:1px solid black;
  border-radius:5px;
  padding:2px;
  color:black;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_white:hover {
  background-color:black;
  color:white;
}

.submit_white100 {		/* ohne max-width Begrenzung */
  width:100%;
  font-weight:bold;
  font-size:1.0em;
  font-size:1.0rem;
  background-color:white;
  border:1px solid black;
  border-radius:5px;
  padding:2px;
  color:black;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_white100:hover {
  background-color:black;
  color:white;
}

.submit_yellow {
  width:100%;
  max-width:250px;
  font-weight:bold;
  font-size:1.0em;
  font-size:1.0rem;
  background-color:#FFFFAA;
  border:1px solid black;
  border-radius:5px;
  padding:2px;
  color:black;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_yellow:hover{
  background-color:black;
  color:#FFFFAA;
}

.submit_green {
  width:100%;
  max-width:250px;
  font-weight:bold;
  font-size:1.0em;
  font-size:1.0rem;
  background-color:white;
  border:1px solid green;
  border-radius:5px;
  padding:2px;
  color:green;
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

.submit_green:hover {
  background-color:green;
  color:white;
}


/* ======================================================
   6. INPUTS
   ====================================================== */

.emptyinput {
  border: 1px solid #EAEAEA;
  background-color: #F8F8F8;
  width: 100%;
}

.emptyinput:hover {
  border: 1px solid grey;
  background-color: #F8F8F8;
  width: 100%;
}

.emptyinput:focus {
  border: 1px solid blue;
  background-color: white;
  width: 100%;
}

.input {
  border: 1px solid #EAEAEA;
  background-color: white;
  width: 100%;
}

.input:hover {
  border:1px solid grey;
  width:100%;
  background-color:white;
}

.input:focus {
  border: 1px solid blue;
  background-color: white;
  width: 100%;
}

.prioinput {
  border:1px solid lightgrey;
  background-color:white;
  font-weight:bold;
  font-size:1.00em;
  font-size:1.00rem;
  min-width:100%;
  padding:3px;
  border-radius:8px;
}

.prioinput:hover {
  border:1px solid grey;
  background-color:white;
  font-weight:bold;
  font-size:1.00em;
}

.prioinput:focus {
  border:1px solid blue;
  background-color:white;
  font-weight:bold;
  font-size:1.00em;
}

.emptyprioinput {
  border:1px solid lightgrey;
  width:100%;
  background-color:#F8F8F8;
  font-size:1.05em;
}

.emptyprioinput:hover {
  border:1px solid grey;
  width:100%;
  background-color:#F8F8F8;
  font-size:1.05em;
}

.emptyprioinput:focus {
  border:1px solid blue;
  width:100%;
  background-color:white;
  font-size:1.05em;
}

.errorinput {
  border:1px solid red;
  background-color:red;
  color:white;
  font-weight:bold;
  font-size:1.00em;
  width:100%;
}

.warninginput {
  border:1px solid black;
  background-color:yellow;
  font-weight:bold;
  font-size:1.0em;
  width:100%;
}

/* Checkbox unsichtbar machen */
.toggle-input {
	display: none;
}

/* Standard-Icon (aus) */
.toggle-label .fa-toggle-off {
	color: red;
}

/* Wenn Checkbox angehakt → anderes Icon (an) */
.toggle-input:checked + .toggle-label .fa-toggle-off {
	display: none;
}
.toggle-input:checked + .toggle-label .fa-toggle-on {
	display: inline;
	color: darkblue;
}

/* Standardmäßig "an"-Icon verstecken */
.toggle-label .fa-toggle-on {
	display: none;
}

/* Optik */
.toggle-label {
	font-size: 1rem;
	cursor: pointer;
	user-select: none;
}

/* ======================================================
   7. BOXEN
   ====================================================== */

.infobox {
  border:0;
  background-color:lightgrey;
  width:100%;
  overflow:hidden;
  white-space: nowrap;
  font-size:1.0em;
}
 
.infobox_b1 {
  border:1px solid darkgrey;
  background-color:lightgrey;
  width:100%;
  overflow:hidden;
  white-space: nowrap;
  padding-left:3px;
  font-size:1.0em;
}

.infobox_b1_bold {
  border:1px solid darkgrey;
  background-color:lightgrey;
  width:100%;
  overflow:hidden;
  white-space: nowrap;
  padding-left:3px;
  font-size:1.0em;
  font-weight:bold;
}

.infobox_blue {
  margin-top:2px;
  margin-bottom:2px;
  border:2px solid darkblue;
  border-radius:5px;
  color:darkblue;
  background-color:lightblue;
  width:100%;
  font-size:1.0em;
  font-family:Calibri;
}

.warnbox_red {
  margin-top:2px;
  margin-bottom:2px;
  border:2px solid red;
  border-radius:5px;
  color:red;
  background-color:lightgrey;
  width:100%;
  font-size:1.0em;
  font-weight:bold;
  font-family:Calibri;
}

.show {
  border:1px solid lightgrey;
  background-color:#E8E8E8;
  width:100%;
  overflow:hidden;
  white-space: nowrap;
}

.show:hover,
.show:focus {
  border:1px solid grey;
  background-color:#E8E8E8;
}

.xshow {
  border:1px solid lightgrey;
  background-color:#F8F8F8;
  width:100%;
  overflow:hidden;
  white-space: nowrap;
}

.xshow:hover,
.xshow:focus {
  border:1px solid grey;
  background-color:#F8F8F8;
}

.section {
  flex: 1;                  /* Jeder Abschnitt gleich breit */
  padding: 2px;
  text-align: center;
}


/* ======================================================
   8. UTILITIES
   ====================================================== */

.hidden { display: none; }

.red {
  color: white;
  background-color: red;
  font-weight: bold;
}

.div_float {
  border:0;
  margin:0;
  padding:0;
  display: inline-block;
}

.fileContainer {
  overflow: hidden;
  position: relative;
}
.fileContainer [type=file] {
  cursor: inherit;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  background-color: white;
  width:450px;
  top: 0;
}

.card {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	overflow: hidden;
	font-family: Arial, sans-serif;
	background-color: #fff;
	transition: transform 0.2s ease;
}

/* Hover-Effekt */
.card:hover {
	transform: scale(1.02);
}

/* Bildbereich */
.card img {
	height: auto;
	display: block;
}

/* Textbereich */
.card-content {
	text-decoration: none;
	padding: 15px;
}

/* Link als Blockelement */
.card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Überschrift */
.card-title {
	font-size: 1.0em;
	font-weight: bold;
	margin-bottom: 8px;
	color: #333;
}

/* Beschreibungstext */
.card-text {
	font-size: 0.9em;
	color: #555;
	line-height: 1.4;
}

.kachel {
	margin:0.5em;
	width:18em;
	width:18rem;
	height:7.5em;
	height:7.5rem;
	padding:5px;
	font-size:1.0em;
	font-size:1.0rem;
	float:left;
}

.kachelkopf {
	overflow:auto;
	background-color:lightblue;
	padding:3px;
	border-radius:8px;
}

.gruppe {
	border:1px solid darkgrey;
	border-radius:8px;
	margin:5px;
}

.gruppenkopf {
	font-weight:bold;
	font-size:1.1em;
	font-size:1.1rem;
	color:white;
	background-color:darkblue;
	border-radius:7px;
	padding:5px;
}

button.big-div {
	display: block;
	min-width: 100%;
	height: 7.1em;
	height: 7.1rem;
	border: 1px solid darkgrey;
	background-color: white;
	cursor: pointer;
	text-align: center;
	padding: 8px;
	border-radius:8px;
	font-size: 1.0em;
	font-size:1.0rem;
}
button.big-div:hover {
	background-color: darkgreen;
	color: white;
}

/* Bild füllt gegebenen Rahmen komplett aus, wird dafür zugeschnitten */
.bild-cover {
	border: 1px solid #333; /* Rahmenfarbe und -stärke */
	overflow: hidden;   /* Bildteile außerhalb des Rahmens ausblenden */
	display: flex;      /* Zentrierung */
	align-items: center;
	justify-content: center;
	background-color: #f0f0f0; /* Hintergrundfarbe */
}

/* Bild anpassen */
.bild-cover img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover; /* Bild füllt den Rahmen aus, ohne Verzerrung */
}

/* Bild füllt gegebenen Rahmen komplett aus, wird dafür zugeschnitten */
.bild-contain {
	border: 1px solid darkgrey; /* Rahmenfarbe und -stärke */
	overflow: hidden;   /* Bildteile außerhalb des Rahmens ausblenden */
	display: flex;      /* Zentrierung */
	align-items: center;
	justify-content: center;
	background-color: #f0f0f0; /* Hintergrundfarbe */
}

/* Bild anpassen */
.bild-contain img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Bild wird komplett in den Rahmen eingepaßt, ohne Verzerrung */
}

.upload-area {
    border: 2px dashed #4CAF50;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    background: white;
    cursor: pointer;
    transition: background 0.3s;
}

.upload-area.dragover {
    background: #e8f5e9;
 

.upload-area p {
    margin: 0;
    font-size: 16px;
    color: #555;
}

#fileInput {
    display: none;
}

#preview {
    margin-top: 20px;
    max-width: 200px;
    display: none;
    border-radius: 5px;
  }

.progress-container {
    margin-top: 15px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    display: none;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #4CAF50;
    transition: width 0.3s;
}