body {
  font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.navbar-default {
	margin: 0;
}

.section0 {
	background-color: #fff;
	color: #000;
	font-size: 14px;
	padding: 40px 10px; 
}

.section1 {
	background-color: #26b3f3;
	color: #fff;
	font-size: 14px;
	padding: 40px 10px;
}

.section2 {
	background-color: #093e56;
	color: #fff;
	font-size: 14px;
	padding: 40px 10px;
}

.anmeldecode {
	font-size:1.2em;
	margin-bottom:1em;
}

#login {
	width:40%; 
	margin-top:100px;
	margin-left:auto; 
	margin-right:auto;
}

#login input, submit {
	width:60%;
	height:30%;
	font-size:3.0vh;
}


.footer {
	background-color: #4D4D4D;
	color: #fff;
	font-size: 13px;
	position: fixed;
	padding: 10px;
	bottom: 0;
	left: 0;
	right: 0;
}

h1 {
	font-size:1.5em;
}

h2 {
	font-size:1.4em;
}

h3 {
	font-size:1.3em;
}

h4 {
	font-size:1.2em;
	padding: 0.5em;
  background-color: #336699;
  color: white;
	margin-top:0px;
  margin-bottom:2em;
}

td, th {
	padding: 0.8em;
	/*color:#333;*/
	font-size:0.9em;
	text-align:right;
}

th {
	border-bottom:1px solid black;	
}

tfoot td {
	border-top:1px solid black;	
	font-weight:bold;
}

label {
	display:inline-block; 
	color:#999; 
	float:left; 
	width:120px; 
	text-align:right; 
	padding-top:2px; 
	padding-right:15px; 
	margin:0 0 0 5px;
}

legend .dark-mode {
  color: #e0e0e0;
}

input, select, textarea {
	width:260px;	
	margin-bottom:10px;
}

.btn-primary {
	background-color:#336699;
}

.fehler {
	color:#F00;
}


/* PDF-Symbol vor Links anzeigen */
a.pdf {
	background: transparent url(../images/icon_pdf.png) center left no-repeat;
	padding-left:20px;
}

a {
  color:#336699;
}

a:hover {
  text-decoration:none;
  filter: contrast(200%);
}

/* Schaltflächen bei Betragsfeldern ausblenden */
/* Für Chrome, Safari, Edge und Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Für Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


#scrollToTop {
    position: fixed !important;
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;

    width: 42px;
    height: 42px;
    z-index: 1050;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.75);
    color: #555;

    font-size: 18px;

    opacity: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    transition:
        opacity 0.3s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#scrollToTop.show {
    display: flex;
    opacity: 0.8;
}

#scrollToTop:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    transform: translateY(-2px);
}

/* Dark Mode */
html.dark-mode {
background-color: #1f1f1f !important;
}

.dark-mode a {
  color:#64b1ffb6;
}

body, .navbar, .dropdown-menu, .well, .panel, input, select, textarea {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Styles */
.dark-mode, body.dark-mode {
  background-color: #1f1f1f !important;
  color: #e0e0e0 !important;
}

body.dark-mode .section0,
body.dark-mode .container,
body.dark-mode .well,
body.dark-mode .panel {
  background-color: #1f1f1f !important;
  color: #e0e0e0 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode p {
  color: #f1f1f1 !important;
}

/* Navbar Dark Mode */
body.dark-mode .navbar-default {
  background-color: #1f1f1f !important;
  border-color: #333 !important;
  box-shadow: 0 1px 2px rgb(225, 224, 224);
}



body.dark-mode .navbar-default .navbar-brand,
body.dark-mode .navbar-default .navbar-nav > li > a {
  color: #b0b0b0 !important;
}

body.dark-mode .navbar-default .navbar-nav > li > a:hover,
body.dark-mode .navbar-default .navbar-nav > li > a:focus,
body.dark-mode .navbar-default .navbar-nav > .active > a,
body.dark-mode .navbar-default .navbar-nav > .active > a:hover,
body.dark-mode .navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff !important;
  background-color: #2a2a2a !important;
}

/* Dropdown Menu Dark Mode */
body.dark-mode .dropdown-menu {
  background-color: #1f1f1f !important;
  border-color: #333 !important;
}

body.dark-mode .dropdown-menu > li > a {
  color: #b0b0b0 !important;
}

body.dark-mode .dropdown-menu > li > a:hover,
body.dark-mode .dropdown-menu > li > a:focus {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Buttons in Dark Mode */
body.dark-mode .button,
body.dark-mode .btn-default {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

body.dark-mode .button:hover,
body.dark-mode .btn-default:hover {
  background-color: #3d3d3d !important;
  color: #ffffff !important;
}

/* Tabellen & Zebra-Muster im Light Mode */
.table > tbody > tr:nth-child(even),
table tbody tr:nth-child(even) {
  background-color: #F4F4F4; /* Sehr dezentes Grau für helle Tabellen */
}

/* Tabellen & Zebra-Muster im Dark Mode */
body.dark-mode table,
body.dark-mode .table {
  color: #e0e0e0 !important;
  background-color: #1a1a1a !important; /* Haupt-Hintergrund für dunkle Tabellen */
}

body.dark-mode .table > tbody > tr:nth-child(even),
body.dark-mode table tbody tr:nth-child(even) {
  background-color: #242424 !important; /* Etwas helleres Dunkelgrau für abwechselnde Zeilen */
}

body.dark-mode .table > tbody > tr:nth-child(odd),
body.dark-mode table tbody tr:nth-child(odd) {
  background-color: #1a1a1a !important;
}

body.dark-mode .table > thead > tr > th,
body.dark-mode .table > tbody > tr > td,
body.dark-mode table th,
body.dark-mode table td {
  border-color: #333333 !important; /* Dezente dunkle Trennlinien */
}

/* Optional: Hover-Effekt für Tabellenzeilen */
.table > tbody > tr:hover,
table tbody tr:hover {
  background-color: #f1f1f1;
}

body.dark-mode .table > tbody > tr:hover,
body.dark-mode table tbody tr:hover {
  background-color: #2e2e2e !important;
}

body.dark-mode .form-control {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

/* Toggle Button Style */
.dark-mode-toggle {
  background: none;
  border: none;
  color: #777;
  padding: 15px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.dark-mode-toggle:hover { color: #333; }
body.dark-mode .dark-mode-toggle { color: #b0b0b0; }
body.dark-mode .dark-mode-toggle:hover { color: #fff; }

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding:0.3em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

/* Fokus-Zustand (Light Mode) */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #66afea;
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
  outline: 0;
}

/* ==========================================
    Formular-Styling (Dark Mode)
    ========================================== */
/* Input-Felder, Dropdowns & Textareas */
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="date"],
body.dark-mode select,
body.dark-mode textarea {
  background-color: #1e232a !important; /* Angenehmes, dunkles Anthrazit */
  color: #f0f3f6 !important;            /* Hoher Textkontrast */
  border: 1px solid #3d444d !important;   /* Dezente Umrandung */
  padding:0.3em;
  
}

/* Platzhalter-Text (Placeholder) */
body.dark-mode ::placeholder {
  color: #8b949e !important;
  opacity: 1;
}

body.dark-mode :-ms-input-placeholder {
  color: #8b949e !important;
}

/* Fokus-Zustand im Dark Mode */
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.3) !important;
  background-color: #22272e !important;
}

/* Readonly / Disabled Felder */
body.dark-mode .form-control[disabled],
body.dark-mode .form-control[readonly],
body.dark-mode input[disabled],
body.dark-mode select[disabled],
body.dark-mode textarea[disabled] {
  background-color: #161b22 !important;
  color: #6e7681 !important;
  border-color: #30363d !important;
}

/* Select-Optionen (Dropdown-Liste) */
body.dark-mode select option {
  background-color: #1e232a !important;
  color: #f0f3f6 !important;
}

/* Input Groups (z.B. Buttons neben Feldern / Addons) */
body.dark-mode .input-group-addon {
  background-color: #2d333b !important;
  color: #adbac7 !important;
  border-color: #3d444d !important;
}

/* Checkboxen & Radiobuttons */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
  accent-color: #58a6ff; /* Moderne Browser färben den Haken/Punkt blau */
  filter: invert(80%) hue-rotate(180deg); /* Fallback für ältere Browser */
}

/* Primäre und Sekundäre Buttons im Dark Mode */
body.dark-mode .btn-primary {
  background-color: #1f6feb !important;
  border-color: #388bfd !important;
  color: #ffffff !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
  background-color: #388bfd !important;
  border-color: #58a6ff !important;
}

body.dark-mode .btn-success {
  background-color: #238636 !important;
  border-color: #2ea043 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-success:hover {
  background-color: #2ea043 !important;
}

/* Rote Farbe ersetzen */
body.dark-mode [style*="color:red"],
body.dark-mode [style*="color: red"],
body.dark-mode [style*="color:#ff0000"],
body.dark-mode [style*="color:#F00"],
body.dark-mode [style*="color: #ff0000"] {
color: rgb(255, 110, 110) !important;
}

.dark-mode .sweet-alert {
  background-color: #1e232a;
 
}

.dark-mode .sweet-alert button {
  color:black;
}