*,
*::before,
*::after {
	/* margin: 0;
	padding: 0; */
	box-sizing: border-box;

	--dt--color--purple: #874393;
	--dt--color--green: #02c3a4;
	--dt--color--grayblue: #7f9da9;
	--dt--color--graylight1: #f5f5f5;
	--dt--color--graylight2: #e2e2e2;
	--dt--color--gray: gray;
	--dt--color--greenblue: #093c4f;
	--dt--color--orange: #ff7669;
	--dt--color--red: #e74c3c;
	--dt--color--blue: #227bbf;
	/* --dt--color--button: #1a5d75;
	--dt--color--button_hover: #093c4f; */
	/*MZ: Menü farben für die NAV -> Prüfen ob alle verwendet werden */
	--dt--color--button: #02c3a4;
	--dt--color--button_hover: #019d87;	
	--dt--color--button_text: #fff;	
	--dt--font-family: 'Trebuchet','Trebuchet MS',Helvetica,Arial,Lucida,sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

/* HTML Tags */
html, body {
	font-family: var(--dt--font-family) !important;
	margin: 0;
	padding: 0;
	overflow: hidden; /* verhindert Scrollen der ganzen Seite */
	background-color: #ecf0f5;
	color: #1e1e2f;
}

hr {
	/* margin-bottom: 2rem; */
	color: inherit;
	border: 0;
	border-top: 1px solid;
	opacity: 0.25;
}

hr.noborder {
	border: none;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-weight: 600;
	line-height: 1.2;
}

h1, .h1 {
	font-size: calc(1.375rem + 1vw);
}
@media (min-width: 1200px) {
	h1, .h1 {
		font-size: 2.0rem;
	}
}

h2, .h2 {
	font-size: calc(1.325rem + 0.6vw);
}
@media (min-width: 1200px) {
	h2, .h2 {
		font-size: 1.75rem;
	}
}

h3, .h3 {
	font-size: calc(1.3rem + 0.4vw);
}
@media (min-width: 1200px) {
	h3, .h3 {
		font-size: 1.5rem;
	}
}

h4, .h4 {
	font-size: calc(1.275rem + 0.2vw);
}
@media (min-width: 1200px) {
	h4, .h4 {
		font-size: 1.25rem;
	}
}

h5, .h5 {
	font-size: 1.0rem;
}

h6, .h6 {
	font-size: 0.75rem;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Text formats */
.text-lowercase {
	text-transform: lowercase !important;
}

.text-uppercase {
	text-transform: uppercase !important;
}

.text-capitalize {
	text-transform: capitalize !important;
}


/* Container */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
	--dt-gutter-x: 1.5rem;
  --dt-gutter-y: 0;
	width: 100%;
	margin-left:auto;
	margin-right: auto;
	/* border: 1px solid red; */
}

@media (min-width: 576px) {
	.container-sm, .container {
		max-width: 540px;
	}
}
@media (min-width: 768px) {
	.container-md, .container-sm, .container {
		max-width: 720px;
	}
}
@media (min-width: 992px) {
	.container-lg, .container-md, .container-sm, .container {
		max-width: 960px;
	}
}
/* @media (min-width: 1200px) {
	.container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1140px;
	}
}
@media (min-width: 1400px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1320px;
	}
} */
.container-sticky {
	height: 100vh;
	display: flex; 
	flex-direction: column;
}


/* Grid system */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--dt-gutter-y));
	margin-right: calc(-0.5 * var(--dt-gutter-x));
	margin-left: calc(-0.5 * var(--dt-gutter-x));
}
.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--dt-gutter-x) * 0.5);
	padding-left: calc(var(--dt-gutter-x) * 0.5);
	margin-top: var(--dt-gutter-y);
}

.col {
	flex: 1 0 0;
}

.row-cols-auto > * {
	flex: 0 0 auto;
	width: auto;
}

.row-cols-1 > * {
	flex: 0 0 auto;
	width: 100%;
}

.row-cols-2 > * {
	flex: 0 0 auto;
	width: 50%;
}

.row-cols-3 > * {
	flex: 0 0 auto;
	width: 33.33333333%;
}

.row-cols-4 > * {
	flex: 0 0 auto;
	width: 25%;
}

.row-cols-5 > * {
	flex: 0 0 auto;
	width: 20%;
}

.row-cols-6 > * {
	flex: 0 0 auto;
	width: 16.66666667%;
}

.col-auto {
	flex: 0 0 auto;
	width: auto;
}

.col-1 {
	flex: 0 0 auto;
	width: 8.33333333%;
}

.col-2 {
	flex: 0 0 auto;
	width: 16.66666667%;
}

.col-3 {
	flex: 0 0 auto;
	width: 25%;
}

.col-4 {
	flex: 0 0 auto;
	width: 33.33333333%;
}

.col-5 {
	flex: 0 0 auto;
	width: 41.66666667%;
}

.col-6 {
	flex: 0 0 auto;
	width: 50%;
}

.col-7 {
	flex: 0 0 auto;
	width: 58.33333333%;
}

.col-8 {
	flex: 0 0 auto;
	width: 66.66666667%;
}

.col-9 {
	flex: 0 0 auto;
	width: 75%;
}

.col-10 {
	flex: 0 0 auto;
	width: 83.33333333%;
}

.col-11 {
	flex: 0 0 auto;
	width: 91.66666667%;
}

.col-12 {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 576px) {
	.col-sm {
		flex: 1 0 0;
	}
	.row-cols-sm-auto > * {
		flex: 0 0 auto;
		width: auto;
	}
	.row-cols-sm-1 > * {
		flex: 0 0 auto;
		width: 100%;
	}
	.row-cols-sm-2 > * {
		flex: 0 0 auto;
		width: 50%;
	}
	.row-cols-sm-3 > * {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.row-cols-sm-4 > * {
		flex: 0 0 auto;
		width: 25%;
	}
	.row-cols-sm-5 > * {
		flex: 0 0 auto;
		width: 20%;
	}
	.row-cols-sm-6 > * {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-sm-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-sm-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-sm-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-sm-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-sm-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-sm-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-sm-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-sm-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-sm-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-sm-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-sm-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-sm-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.col-md {
		flex: 1 0 0;
	}
	.row-cols-md-auto > * {
		flex: 0 0 auto;
		width: auto;
	}
	.row-cols-md-1 > * {
		flex: 0 0 auto;
		width: 100%;
	}
	.row-cols-md-2 > * {
		flex: 0 0 auto;
		width: 50%;
	}
	.row-cols-md-3 > * {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.row-cols-md-4 > * {
		flex: 0 0 auto;
		width: 25%;
	}
	.row-cols-md-5 > * {
		flex: 0 0 auto;
		width: 20%;
	}
	.row-cols-md-6 > * {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-md-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-md-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-md-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-md-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-md-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-md-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-md-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-md-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-md-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-md-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-md-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-md-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-md-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 992px) {
	.col-lg {
		flex: 1 0 0;
	}
	.row-cols-lg-auto > * {
		flex: 0 0 auto;
		width: auto;
	}
	.row-cols-lg-1 > * {
		flex: 0 0 auto;
		width: 100%;
	}
	.row-cols-lg-2 > * {
		flex: 0 0 auto;
		width: 50%;
	}
	.row-cols-lg-3 > * {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.row-cols-lg-4 > * {
		flex: 0 0 auto;
		width: 25%;
	}
	.row-cols-lg-5 > * {
		flex: 0 0 auto;
		width: 20%;
	}
	.row-cols-lg-6 > * {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-lg-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-lg-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-lg-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-lg-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-lg-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-lg-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-lg-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-lg-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-lg-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-lg-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-lg-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-lg-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-lg-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.col-xl {
		flex: 1 0 0;
	}
	.row-cols-xl-auto > * {
		flex: 0 0 auto;
		width: auto;
	}
	.row-cols-xl-1 > * {
		flex: 0 0 auto;
		width: 100%;
	}
	.row-cols-xl-2 > * {
		flex: 0 0 auto;
		width: 50%;
	}
	.row-cols-xl-3 > * {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.row-cols-xl-4 > * {
		flex: 0 0 auto;
		width: 25%;
	}
	.row-cols-xl-5 > * {
		flex: 0 0 auto;
		width: 20%;
	}
	.row-cols-xl-6 > * {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-xl-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-xl-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-xl-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-xl-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-xl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-xl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-xl-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-xl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-xl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-xl-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-xl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-xl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-xl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 1400px) {
	.col-xxl {
		flex: 1 0 0;
	}
	.row-cols-xxl-auto > * {
		flex: 0 0 auto;
		width: auto;
	}
	.row-cols-xxl-1 > * {
		flex: 0 0 auto;
		width: 100%;
	}
	.row-cols-xxl-2 > * {
		flex: 0 0 auto;
		width: 50%;
	}
	.row-cols-xxl-3 > * {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.row-cols-xxl-4 > * {
		flex: 0 0 auto;
		width: 25%;
	}
	.row-cols-xxl-5 > * {
		flex: 0 0 auto;
		width: 20%;
	}
	.row-cols-xxl-6 > * {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-xxl-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-xxl-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-xxl-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-xxl-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-xxl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-xxl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-xxl-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-xxl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-xxl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-xxl-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-xxl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-xxl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-xxl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}


/* Visibility */
.d-none {
	display: none;
}

.d-block {
	display: block;
}

.d-inline {
	display: inline;
}

.fade-out {
	opacity: 0;
	transition: opacity 0.4s ease;
}


/* Colors */
.bg-white {
	background: #ffffff !important;
}

.bg-darkblue {
	background: #1e1e2f !important;
}

.bg-diatec {
	background-color: var(--dt--color--green) !important;
}

.bg-t1day {
	background-color: var(--dt--color--purple) !important;
}


/* Border and shadow */
.rounded-shadow {
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


/* Width and hight */
.w-fit {
	width: fit-content;
}

.w-100 {
	width: 100%;
}


/* Semantic elements */
nav {
	position: sticky;
	top: 0;
	height: 60px;
	background-color: #183D4E;
	padding: 0.25rem 1rem;
	z-index: 1000;
	display: flex;
	justify-content: center;  
	align-items: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	gap: 2rem;
}

main {
	flex: 1; 			
	overflow-y: auto;	
}


/* MZ: section um eine Class erweitern, damit eine zweite Section nicht die gleichen Einstellungen bekommen */
section {
	margin: 2rem auto;
	padding: 2rem;
}

section .section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

form label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.form-row {
	display: flex;
	flex-direction: column; 
	gap: 1rem;
}

form .form-group {
	padding: 1.5rem;
	background-color: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	margin-bottom: 1rem;
}

input,
textarea,
select {
	font-family: var(--dt--font-family);
	width: 100%; 
	margin: 5px 0 5px 0; 
	padding: 10px;
	border: 1px solid #ccc;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	border-radius: 0.4rem;
	outline: 2px solid transparent;
	transition:
		border-color 0.8s ease,
		outline-color 0.8s ease,
		outline-width 0.8s ease;
}

select.filter {
	appearance: none;
	background: none;
	width: 100%;
	max-width: 200px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: #0a3c50;
	outline-color: var(--dt--color--green);
	outline-width: 2px;
}

fieldset {
	border-width: 2px ;
	border-color: var(--dt--color--green);
	border-radius: 10px;
	padding: 1rem 1rem;
}

.fieldset-red {
	border-color: var(--dt--color--red);
}

.fieldset-purble {
	border-color: var(--dt--color--purple);
}


fieldset legend {
	padding: 0 1rem;
	font-weight: 600;
}


/* Forms elements */
.draganddrop {
	margin: 1rem auto;
	border: 2px dashed #ccc;
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	background-color: #f9f9f9;
	cursor: pointer;
	transition: background-color 0.3s;
}

.draganddrop:hover {
	border-color: #02c3a4;
	background-color: #f0fffb;
}

.switch {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 20px;
}	

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}	

.switch-slider {
	position: absolute;
	cursor: pointer;
	background-color: #ccc;
	border-radius: 34px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background-color 0.3s;
}	

.switch-slider:before {
	content: "";
	position: absolute;
	height: 16px; 
	width: 16px; 
	left: 2px;
	bottom: 2px;
	background-color: white;
	border-radius: 50%;
	transition: transform 0.3s;
}	

.switch input:checked + .switch-slider:before {
	transform: translateX(18px); 
}	

.switch input:checked + .switch-slider {
	background-color: var(--dt--color--green);
}	

.switch-red input:checked + .switch-slider {
	background-color: var(--dt--color--red);
}	

.switch-purple input:checked + .switch-slider {
	background-color: var(--dt--color--purple);
}	


/* Buttons */
button {
	font-family: var(--dt--font-family) !important;
}

.btn {
	font-size: 0.9rem;
	padding: 0.6rem 1.2rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;	
	color: var(--dt--color--button_text);
}


.btn-small {
	font-size: 0.7rem;
	padding: 0.5rem 1.0rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;	
	color: var(--dt--color--button_text);
}

.btn-disabled {
	background: var(--dt--color--gray);
	cursor: not-allowed;
	text-decoration: none;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;	
	color: var(--dt--color--button_text);
}


.btn-default {
	background: var(--dt--color--button);
	/* color: #000; */
}

.btn-default:hover {
	background: var(--dt--color--button_hover);
	/* color: #fff; */
}

.btn-gray {
	background-color: #a0a0a0;
	color: #fff;
}
.btn-gray:hover {
	background-color: #616161;
}

.btn-red {
	background: #e74c3c;
	color: #fff;
	cursor: pointer;
}

.btn-red:hover {
	background: #c0392b;
}

.btn-noborder {
	border: none;
	cursor: pointer;
}

/* Modal */
.modal-backdrop{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease;
}

.modal-backdrop.show{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.modal-box{
	background:#fff;
	max-width:520px;
	width:92%;
	padding:20px;
	border-radius:12px;
	box-shadow:0 10px 30px rgba(0,0,0,.2);
	margin-top:150px;
	position:relative;
	transform: translateY(-40px);
	opacity: 0;
	transition: transform .4s ease, opacity .4s ease;
}

.modal-backdrop.show .modal-box{
	transform: translateY(0);
	opacity: 1;
}

.modal-box h2{
	margin: 0 0 10px;
	font-size: 1.5em;
}

.modal-box p{
	margin: 20px 0 10px;
}

@media (prefers-reduced-motion: reduce){ /* (Optional) Weniger Bewegung für Nutzer mit Motion-Reduktion */
	.modal-backdrop, .modal-box{
		transition: none;
	}
}

.modal-actions{
	display:flex;
	gap:8px;
	justify-content:flex-end;
	margin-top:18px;
}

.body.modal-open, body.modal-open {
  overflow: hidden;
}

.modal-close{
	position:absolute;
	top:20px;
	right:15px;
	border:0;
	color: #666666;
	background:transparent;
	font-size:30px;
	line-height:1;
	cursor:pointer;
}


/* Accordion */
.accordion-trigger{
	border: none;
	cursor:pointer;
}

.accordion-panel{
	padding: 10px;
	overflow: hidden; 
	opacity:0;
	transform:
		translateY(-4px);
	transition: 
		opacity .5s ease, 
		transform .5s ease;
}

.accordion-panel[data-open="true"]{
	opacity:1; 
}

.accordion-trigger[aria-expanded="true"] .chevron{
	 transform: rotate(180deg);
}

.chevron{
	width:22px;
	height:22px;
	flex:0 0 22px;
	transition: 
		transform .5s cubic-bezier(.2,.7,.2,1);
	opacity:.9;
}


/* Cards */
.card {
	display: flex;
	justify-content: space-between;
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
	align-items: center;
	border-radius: 10px;
	gap: 1rem;
	background-color: #f7f9fa;
	border: 1px solid #c6c9ca;
	border-left: 6px solid #787f81;
}

.card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card-action {
	display: flex;
	flex-direction: column;
}


/* Lists */
.list-group {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin-top: 1rem;
}

.list-group-item {
	margin-bottom: 0.5rem;
}


.list-group-content {
	display: flex;
	background: #f5f5f5;
	padding: 1rem;
	border-radius: 6px;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
}

.list-group-info {
	display: flex;	
	align-items: center; 
	gap: 1.5rem;
}


/* MZ: Später löschen wenn alle durch FS ersetzt sind */
.list-group-info.editable {
	width: 100%; 
	padding: 10px; 
	background: #d0ebde;
	border-radius: 6px;
	border: 1px solid #ccc;
	outline: 2px solid transparent;
	transition:
		border-color 0.8s ease,
		outline-color 0.8s ease,
		outline-width 0.8s ease;
}

.list-group-info.editable:hover {
	border-color: #0a3c50;
	background: #bbf1d7;
	outline-color: var(--dt--color--green);
	outline-width: 2px
}

.list-group-action {
	display: flex;
	gap: 0.5rem;
}


/* Sublist editing  MZ: NAMEN FINDEN ANSTELLE VON FS*/
.fs-group {
	margin-bottom: 1rem;
}

.fs-group-item {
	/* background: #f5f5f5; */
	/* padding: 10px;
	border-radius: 6px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: 0.75rem;
}

.fs-group-info {
	display: flex;	
	/* align-items: center;  */
	gap: 1.5rem;
	width: 100%; 
	padding: 10px; 
	background: #d0ebde;
	border-radius: 6px;
	border: 1px solid #ccc;
	outline: 2px solid transparent;
	transition:
		border-color 0.8s ease,
		outline-color 0.8s ease,
		outline-width 0.8s ease;
}

.fs-group-info.fs-col {
	/* align-items: left !important; */
	flex-direction: column;
	gap: 0.25rem;
}

.fs-group-info:hover {
	border-color: #0a3c50;
	background: #bbf1d7;
	outline-color: var(--dt--color--green);
	outline-width: 2px
}

.fs-group-action {
	display: flex;
	gap: 0.5rem;
}


/* Boxes */
.box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9fc; 
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.box-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
}


/* Badged */
.badge {
	padding: 0.2rem 0.7rem;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	font-weight: bold;
	user-select: none;

}

.badge-blue { 
	background-color: #30c5ff1a;
	color: #30c5ff;
	border: 1px solid #30c5ff4d;
}

.badge-green { 
	background-color: rgba(0, 199, 129, 0.1);
	color: rgb(0, 199, 129);
	border: 1px solid rgba(0, 199, 129, 0.3);
}

.badge-pruble { 
	background-color: rgba(123, 104, 238, 0.1);
	color: rgb(123, 104, 238);
	border: 1px solid rgba(123, 104, 238, 0.3); 
}

.badge .remove-btn {
  background: none;
  border: none;
  color: #c0392b;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}

.badge .remove-btn::after {
	content: '\2BBF'; 
}


/* Chip similar badge */
.chip{
	display:inline-flex; 
	align-items:center; gap:6px;
	font-size:12px; 
	font-weight:600; 
	color:#0b1319;
	background: linear-gradient(180deg, #4dd4a6, #32bf93);
	padding:6px 10px; 
	border-radius:999px; 
	border:1px solid rgba(0,0,0,.1);
}


/* HTML Navigation */
.navgroup-logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

.navlogo {
	height: 40px;
	flex-shrink: 0;
}

.navlogo-text,
.navlogo-subtext {
	color: #56BBA5;
	font-weight: bold;
	line-height: 0.8;
}

.navlogo-text {
	font-size: 1.5rem;
}

.navlogo-subtext {
	font-size: 0.8rem;
	transform: translateY(+0.15em);
}

.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0;
	gap: 2rem;
}

.nav-container {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 auto;          
	padding: 0;
	gap: 1rem;
}

.nav-item {
	position: relative;
	list-style: none;
	display: flex;
	align-items: center;
}

.nav-item > a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 500;
	padding: 0.5rem 0;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.nav-item > a::after {
	/* content: '\25BE'; *//* Pfeil nach unten */
	content: '\2B9F'; 
	font-size: 0.8rem;
	display: inline-block;
	transform: translateY(1px);
	opacity: 0.6;
}

.nav-item:not(:has(.nav-dropdown)) > a::after {
	content: none;
}

.nav-item:hover > a {
	/* color: #00bcd4; */
	color: var(--dt--color--button);
}

.nav-item.disabled a {
	pointer-events: none;
	color: gray;
	opacity: 0.6;
	cursor: default;
}

.nav-item.disabled .nav-dropdown {
	display: none !important;
}

.nav-item.has-dropdown > a {
	pointer-events: none;
	cursor: default;
}

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--dt--color--button);
	display: flex;
	flex-direction: column;
	min-width: 160px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-dropdown a {
	padding: 0.75rem 1rem;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.3s;
}

.nav-dropdown a:hover {
	background-color: #047c68;
	background-color: var(--dt--color--button_hover);
}

.nav-dropdown a.disabled {
	pointer-events: none;
	color: gray;
	opacity: 0.6;
	cursor: default;
}

.nav-item:hover .nav-dropdown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.navgroup-button {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
}


/* HTML Footer */
footer {
	flex-shrink: 0;
	background-color: #2B3843;
	color: #ccc;
	text-align: center;
	padding: 0.5rem 2rem;
	font-size: 0.9rem;
	box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2); /* Schatten NACH OBEN */
}


/* Debug Box */
#debugBox {
	position: fixed;
	top: 7rem;
	left: 2rem;
	background: rgba(10, 20, 30, 0.85);
	color: #00ffc3;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	text-align: left;
	padding: 0.6rem 1rem;
	border: 1px solid #00ffc3;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,255,200,0.3);
	z-index: 9999;
	cursor: move;
	user-select: none;
	display: none;
}

.debug-label {
	font-weight: bold;
	margin-right: 0.4rem;
	color: #57fff1;
}

































	.event-tabs {
	/* max-width: 800px; */
	margin: 0 auto;
	background: transparent;
	border-radius: 10px;
	padding: 1rem;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/*Später seperat in CSS weil es nur die Eventseite betrifft*/

/* VERSION 1
.tab-buttons {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.tab-button {
	padding: 0.5rem 1.5rem;
	background-color: #e0e0e0;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.3s;
}

.tab-button.active {
	background-color: #02fccb;
	color: #000;
}  

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}
ENDE VERSION 1 */

/* VERSION 2*/
.tab-buttons {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #ccc;
	margin-bottom: 1rem;
}

.tab-button {
	background-color: #ddd;
	border: 1px solid #ccc;
	border-bottom: none;
	padding: 0.4rem 1.2rem;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	position: relative;
	top: 2px;
}

.tab-button[data-tab="diatec"].active {
	background-color: var(--dt--color--green);
	color: #000;
}

.tab-button[data-tab="t1day"].active {
	background-color: var(--dt--color--purple);
	color: #fff;
}

.tab-content {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

.tab-wrapper {
	position: relative;
	min-height: 300px; /* Platz reservieren für Inhalte */
}

.tab-content.active {
	opacity: 1;
	visibility: visible;
	position: relative;
}
/* END VERSION 2*/