* {
	color:           #C5C5C5;
	font:            1em Arial, Helvetica, sans-serif;
	margin:          0;
	padding:         0;
	text-decoration: none;
	}

html, body {
	background-color: #161617;
	height:           100%;
	width:            100%;
	}

header {
	background-color: #161617;
	border-bottom:    0.5px solid darkgrey;
	padding:          0.25em;
	}

#start {
	color:       #C5C5C5;
	float:       left;
	font-size:   2.25em;
	font-weight: bold;
	text-align:  left;
	}

#start2 {
	color:        #C5C5C5;
	float:        right;
	font-size:    1.5em;
	font-weight:  bold;
	margin-right: 0.4em;
	margin-top:   0.3em;
	text-align:   right;
	}

#start2 a {
	color:       #C5C5C5;
	font-weight: bold;
	text-align:  right;
	}

#start2 a:hover {
	color:       #739099;
	font-weight: bold;
	text-align:  right;
	}

#start3 {
	color:        #C5C5C5;
	float:        right;
	font-size:    1.5em;
	font-weight:  bold;
	margin-right: 0.4em;
	text-align:   right;
	}

article {
	align-content:    flex-start;
	background-color: #2B2B2B;
	display:          grid;
	flex:             7;
	justify-content:  center;
	margin-bottom:    35px;
	padding:          0.5em;
	}

footer {
	background-color: #161617;
	border-top:       0.5px solid darkgrey;
	bottom:           0;
	padding:          0.5em;
	position:         fixed;
	text-align:       center;
	width:            100%;
	}

footer a {
	color:       #C5C5C5;
	font-weight: bold;
	}

footer a:hover {
	color:       #739099;
	font-weight: bold;
	}

img {vertical-align: middle;}

hr {border: 1px solid #2B2B2B;}

h1 {
	font-size:   2em;
	font-weight: bold;
	}

h2 {
	font-size:    1.5em;
	font-weight:  bold;
	margin:       0.75em 0 0.75em 0;
	padding-left: 0.1em;
	}

h3 {
	font-size:    1.2em;
	font-weight:  bold;
	padding-left: 0.1em;
	}

article a {
	color:           #C5C5C5;
	font-weight:     bold;
	text-decoration: none;
	}

article a:hover {
	color:           #739099;
	font-weight:     bold;
	text-decoration: none;
	}

b {
	font-weight:   bold;
	padding-right: 0.3em;
	}

p {margin: 0.5em 0.2em;}

td {
	background-color: #161617;
	border:           1px solid #C5C5C5;
	border-radius:    4px;
	padding:          3px;
	text-align:       center;
	}

table {
	background-color: #2B2B2B;
	width:            1000px;
	}

input, select {
	background-color: grey;
	color:            #161617;
	}

textarea {
	background-color: grey;
	color:            #161617;
	height:           10em;
	width:            100%;
	}

nav {
	background-color: #616161;
	border-right:     0.5px solid darkgrey;
	flex:             1;
	padding:          0.25em;
	}

nav li {
	align-items:     center;
	color:           #C5C5C5;
	display:         flex;
	font-size:       1.1em;
	height:          2.5em;
	justify-content: center;
	margin:          1px 0;
	position:        relative;
	text-align:      center;
	text-decoration: none;
	}

nav b {
	color:       #C5C5C5;
	font-weight: bold;
	margin-left: 3px;
	}

nav li a {
	align-items:     center;
	border-radius:   4px;
	color:           #C5C5C5;
	display:         flex;
	font-weight:     bold;
	height:          2.5em;
	justify-content: center;
	position:        relative;
	width:           100%;
	}

nav li a:hover, #selected {
	background-color: darkgrey;
	color:            #161617;
	font-weight:      bold;
	}

#agb li {
	color:     #C5C5C5;
	font-size: 1.1em;
	margin:    0.1em 1.7em;
	}

#datenschutz li {
	color:     #C5C5C5;
	font-size: 1.1em;
	margin:    0.1em 1.7em;
	}

#status {
	align-items:      center;
	background-color: #161617;
	border:           1px solid #C5C5C5;
	border-radius:    4px;
	display:          flex;
	height:           2.5em;
	justify-content:  center;
	margin:           0 2px;
	position:         relative;
	text-align:       center;
	width:            994px;
	}

#adresse {
	align-items:      center;
	background-color: #161617;
	border:           1px solid #C5C5C5;
	border-radius:    4px;
	display:          flex;
	height:           7em;
	justify-content:  center;
	margin:           0 2px;
	position:         relative;
	text-align:       center;
	width:            994px;
	}

#normal {
	align-items:      center;
	background-color: #2B2B2B;
	border:           1px solid #C5C5C5;
	border-radius:    4px;
	display:          flex;
	height:           2em;
	justify-content:  center;
	margin:           auto 0.4em;
	padding-left:     0.3em;
	padding-right:    0.3em;
	position:         relative;
	text-align:       center;
	}

#aktuellerstatus {
	align-items:      center;
	background-color: #008000;
	border:           1px solid #C5C5C5;
	border-radius:    4px;
	color:            #000000;
	display:          flex;
	height:           2em;
	justify-content:  center;
	margin:           auto 0.4em;
	padding-left:     0.3em;
	padding-right:    0.3em;
	position:         relative;
	text-align:       center;
	}

#white, #white img {
	background-color: white;
	height:           80px;
	min-width:        50px;
	width:            auto;
	}

#tracking {
	margin: 0.5em;
	width:  204px;
	}

#wrapper {
	display:        flex;
	flex-direction: column;
	height:         100%;
	min-height:     100%;
	}

#mehrspaltig {
	background-color: #161617;
	display:          flex;
	flex:             1;
	flex-direction:   row;
	}

#formular {
	background-color: #161617;
	border:           2px solid #161617;
	border-radius:    4px;
	padding:          0.3em;
	}

#breit {
	width: 1300px;
	}

#center {
	float:      left;
	text-align: left;
	}

#right {
	margin-right: 1.2em;
	text-align:   right;
	}

#ON, #RUNNING, #UPDATE, #NEU, #DONE {
	color:       #008000;
	font-weight: bold;
	}

#ERROR, #FEHLER, #GELOSCHT, #INIT {
	color:       #FF0000;
	font-weight: bold;
	}

#STOP, #OFF, #STARTING, #WAITING {
	color:       #FFFF00;
	font-weight: bold;
	}

#INFO {
	color:       #739099;
	font-weight: bold;
	}

#logobo {
	background-color:    #66CCFF;
	background-image:    url("bo_schriftzug.png");
	background-position: center;
	background-repeat:   no-repeat;
	border:              1px solid #66CCFF;
	border-radius:       4px;
	width:               104px;
	}

#logobo2 {
	background-color:    #66CCFF;
	background-image:    url("bo_schriftzug.png");
	background-position: center;
	background-repeat:   no-repeat;
	border:              1px solid #66CCFF;
	border-radius:       4px;
	}

#logobl {
	background-image:    url("bl_schriftzug_weiß.png");
	background-position: center;
	background-repeat:   no-repeat;
	width:               104px;
	}

#logobl2 {
	background-image:    url("bl_schriftzug_weiß.png");
	background-position: center;
	background-repeat:   no-repeat;
	}

#logobs {
	background-color:    #66CCFF;
	background-image:    url("bs_logo.png");
	background-position: center;
	background-repeat:   no-repeat;
	border:              1px solid #66CCFF;
	border-radius:       4px;
	width:               104px;
	}

#logobs2 {
	background-image:    url("bs_logo.png");
	background-position: center;
	background-repeat:   no-repeat;
	}

.blau {
	background-color: #739099;
	border:           1px solid blue;
	border-radius:    4px;
	color:            #161617;
	font-size:        1.1em;
	margin:           0.25em 0.0em;
	padding:          1em;
	width:            calc(1000px - 2em);
	}

.unpassend {
	background-color: #161617;
	border:           1px solid darkgrey;
	border-radius:    4px;
	color:            #C5C5C5;
	font-size:        1.1em;
	margin-left:      2px;
	padding:          1em;
	width:            959px;
	}

.fehler {
	background-color: #FF0000;
	border:           1px solid #8B0000;
	border-radius:    4px;
	color:            #C5C5C5;
	font-size:        1.0em;
	font-weight:      bold;
	margin:           0.25em 0.0em;
	padding:          1em;
	width:            calc(1000px - 2em);
	}

.rot input {
	background-color: #FF0000;
	border:           1px solid #8B0000;
	border-radius:    4px;
	color:            #C5C5C5;
	font-size:        1.0em;
	font-weight:      bold;
	margin:           0.1em;
	padding:          0.2em;
	}

.rot input:hover {
	background-color: orange;
	border:           1px solid #8B0000;
	border-radius:    4px;
	color:            #161617;
	font-size:        1.0em;
	font-weight:      bold;
	margin:           0.1em;
	padding:          0.2em;
	}

.icongross {
	height:         25px;
	margin-right:   6px;
	vertical-align: middle;
	width:          25px;
	}

.iconklein {
	height:         20px;
	margin-right:   6px;
	vertical-align: bottom;
	width:          20px;
	}

.logo {
	float:          left;
	height:         40px;
	margin-right:   0.3em;
	margin-top:     0.0em;
	vertical-align: middle;
	width:          82px;
	}

#consumerkey {width: 350px;}

#consumersecret {width: 350px;}

#tokenvalue {width: 350px;}

#tokensecret {width: 350px;}

#bo_key {width: 625px;}

.balken-container {
	border:         1px solid #FFFFFF;
	border-radius:  4px;
	box-shadow:     0 1px 3px rgba(0, 0, 0, 0.1);
	box-sizing:     border-box;
	display:        table-cell;
	height:         18px;
	overflow:       hidden;
	position:       relative;
	vertical-align: middle;
	}

.balken-fuellung {
	align-items:     center;
	animation:       ladeBalken 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	bottom:          0;
	box-shadow:      inset 0 0 2px rgba(0, 0, 0, 0.15);
	display:         flex;
	justify-content: flex-end;
	left:            0;
	position:        absolute;
	top:             0;
	}

/* Das grafisch abgehobene Ende (Ihr optimierter Verlauf) */
.balken-fuellung::after {
	background: linear-gradient(to right,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.6) 70%,
	rgba(255, 255, 255, 0) 100%
	            );
	bottom:     0;
	content:    "";
	position:   absolute;
	right:      -2px;
	top:        0;
	width:      8px;
	}

/* Die korrigierte Animation (Ansteuerung über Breite für perfekte Kanten) */
@keyframes ladeBalken {
	from {
		width: 0; /* Startet sauber bei Null */
		}
	to {
		width: var(--ziel-breite); /* Erlaubt dem Balken, exakt bis an die vorgegebene PHP-Breite auszufahren */
		}
	}

/* Der Hauptcontainer im TD-Feld */
.chart-container {
	align-items:      flex-end; /* Richtet die Balken am Boden aus */
	background-color: #161617;
	border-radius:    8px;
	box-sizing:       border-box;
	display:          flex;
	height:           200px; /* Feste Höhe des gesamten Diagramms */
	justify-content:  space-between;
	padding:          20px 10px 10px 10px;
	}

/* Ein einzelner Tag (Balken + Beschriftung) */
.chart-column {
	align-items:    center;
	display:        flex;
	flex:           1;
	flex-direction: column;
	height:         100%;
	}

/* Der Bereich über dem Text, in dem der Balken wächst */
.chart-bar-wrapper {
	align-items: flex-end;
	box-sizing:  border-box;
	display:     flex;
	height:      85%; /* Platz für den Balken */
	padding:     0 10px;
	width:       100%;
	}

/* Der eigentliche farbige Balken */
.chart-bar {
	border-radius: 4px 4px 0 0; /* Oben abgerundet */
	cursor:        pointer;
	position:      relative;
	transition:    height 0.3s ease; /* Schöner Animationseffekt */
	width:         100%;
	}

/* Effekt beim Drüberfahren */
.chart-bar:hover {
	filter: brightness(0.9);
	}

/* Der Zahlenwert im/über dem Balken */
.chart-value {
	color:       #C5C5C5;
	font-size:   11px;
	font-weight: bold;
	left:        50%;
	position:    absolute;
	top:         -20px; /* Platziert die Zahl direkt über dem Balken */
	transform:   translateX(-50%);
	white-space: nowrap;
	}

/* Die Wochentags-Beschriftung ganz unten */
.chart-label {
	color:       #C5C5C5;
	font-size:   12px; /* Etwas kleiner für die langen Namen */
	font-weight: 500;
	height:      15%;
	margin-top:  8px;
	white-space: nowrap; /* Verhindert hässliche Zeilenumbrüche bei "Donnerstag" */
	}

.chart-title {
	border-left:   4px solid #4CAF50; /* Ein kleiner grüner Akzent-Strich links neben der Schrift */
	color:         #C5C5C5;
	display:       block;
	font-size:     16px;
	font-weight:   bold;
	margin-bottom: 12px;
	padding-left:  5px;
	}