/* Gemeinsame Struktur / Layout aller Themes */

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

html, body {
	height: 100%;
	width:  100%;
	}

header {
	padding: 0.25em;
	}

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

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

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

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

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

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

footer {
	bottom:     0;
	padding:    0.5em;
	position:   fixed;
	text-align: center;
	width:      100%;
	}

footer a {
	font-weight: bold;
	}

footer a:hover {
	font-weight: bold;
	}

img {
	vertical-align: middle;
	}

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 {
	font-weight:     bold;
	text-decoration: none;
	}

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

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

p {
	margin: 0.5em 0.2em;
	}

td {
	border-radius: 4px;
	padding:       3px;
	text-align:    center;
	}

table {
	width: 1000px;
	}

textarea {
	height: 10em;
	width:  100%;
	}

nav {
	flex:    1;
	padding: 0.25em;
	}

nav li {
	align-items:     center;
	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 {
	font-weight: bold;
	margin-left: 3px;
	}

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

nav li a:hover, #selected {
	font-weight: bold;
	}

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

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

#status {
	align-items:     center;
	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;
	border-radius:   4px;
	display:         flex;
	height:          7em;
	justify-content: center;
	margin:          0 2px;
	position:        relative;
	text-align:      center;
	width:           994px;
	}

#normal, #aktuellerstatus {
	align-items:     center;
	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;
	}

#white, #white img {
	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 {
	display:        flex;
	flex:           1;
	flex-direction: row;
	}

#formular {
	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 {
	font-weight: bold;
	}

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

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

#INFO {
	font-weight: bold;
	}

#logobo {
	border-radius: 4px;
	width:         104px;
	}

#logobo2 {
	border-radius: 4px;
	}

#logobl {
	width: 104px;
	}

#logobs {
	border-radius: 4px;
	width:         104px;
	}

#logobs2 {
	border-radius: 4px;
	}

.blau {
	border-radius: 4px;
	font-size:     1.1em;
	margin:        0.25em 0.0em;
	padding:       1em;
	width:         calc(1000px - 2em);
	}

.unpassend {
	border-radius: 4px;
	font-size:     1.1em;
	margin-left:   2px;
	padding:       1em;
	width:         959px;
	}

.fehler {
	border-radius: 4px;
	font-size:     1.0em;
	font-weight:   bold;
	margin:        0.25em 0.0em;
	padding:       1em;
	width:         calc(1000px - 2em);
	}

.rot input {
	border-radius: 4px;
	font-size:     1.0em;
	font-weight:   bold;
	margin:        0.1em;
	padding:       0.2em;
	}

.rot input:hover {
	border-radius: 4px;
	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-radius:  4px;
	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;
	display:         flex;
	justify-content: flex-end;
	left:            0;
	position:        absolute;
	top:             0;
	}

.balken-fuellung::after {
	bottom:   0;
	content:  "";
	position: absolute;
	right:    -2px;
	top:      0;
	width:    8px;
	}

@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 */
		}
	}

.chart-container {
	align-items:     flex-end;
	border-radius:   8px;
	box-sizing:      border-box;
	display:         flex;
	height:          200px;
	justify-content: space-between;
	padding:         20px 10px 10px 10px;
	}

.chart-column {
	align-items:    center;
	display:        flex;
	flex:           1;
	flex-direction: column;
	height:         100%;
	}

.chart-bar-wrapper {
	align-items: flex-end;
	box-sizing:  border-box;
	display:     flex;
	height:      85%;
	padding:     0 10px;
	width:       100%;
	}

.chart-bar {
	border-radius: 4px 4px 0 0;
	cursor:        pointer;
	position:      relative;
	transition:    height 0.3s ease;
	width:         100%;
	}

.chart-bar:hover {
	filter: brightness(0.9);
	}

.chart-value {
	font-size:   11px;
	font-weight: bold;
	left:        50%;
	position:    absolute;
	top:         -20px;
	transform:   translateX(-50%);
	white-space: nowrap;
	}

.chart-label {
	font-size:   12px;
	font-weight: 500;
	height:      15%;
	margin-top:  8px;
	white-space: nowrap;
	}

.chart-title {
	display:       block;
	font-size:     16px;
	font-weight:   bold;
	margin-bottom: 12px;
	padding-left:  5px;
	}

#picker {
	border-radius: 4px;
	box-sizing:    border-box;
	padding:       1em;
	width:         1000px;
	}

#picker-kopf {
	align-items:     center;
	display:         flex;
	justify-content: space-between;
	}

#picker-bestellung h3 {
	margin:  0 0 0.3em 0;
	padding: 0;
	}

#picker-bestellung p {
	margin: 0;
	}

#picker-status {
	font-weight: bold;
	margin-left: 2em;
	white-space: nowrap;
	}

#picker-fortschritt {
	padding: 0.75em 0;
	}

#picker-fortschritt-balken {
	align-items:   center;
	border-radius: 4px;
	display:       flex;
	height:        24px; /* Erhöht von 12px für bessere Lesbarkeit und Kompaktheit */
	overflow:      hidden;
	position:      relative; /* Zwingend erforderlich für die absolute Zentrierung der Zahl */
	width:         100%;
	}

#picker-position {
	font-size:      0.95em;
	font-weight:    bold;
	left:           0;
	margin-bottom:  0; /* Überschreibt das alte Margin-Bottom */
	pointer-events: none; /* Verhindert, dass Text-Markierungen das Klicken stören */
	position:       absolute; /* Löst die Zahl vom Balkenfluss */
	text-align:     center;
	width:          100%;
	z-index:        2; /* Setzt die Zahl über den wachsenden Balken */
	}

#picker-fortschritt-wert {
	height:     100%;
	transition: width 0.2s ease;
	width:      0;
	z-index:    1; /* Bleibt unter der Zahl */
	}

/* Hauptbereich: Linker Block (Bild+Link), rechte Spalte (Details) */
#picker-artikel {
	box-sizing:            border-box;
	display:               grid;
	gap:                   2em;
	grid-template-columns: 275px 1fr; /* Der linke Block bekommt feste 275px */
	min-height:            450px;
	width:                 100%;
	}

/* Container, der Bild und Link untereinander hält */
#picker-links-block {
	align-items:    center;
	display:        flex;
	flex-direction: column;
	gap:            12px; /* Abstand zwischen der Bild-Box und dem Link darunter */
	width:          275px;
	}

/* Bild-Box bleibt im Original-Design (wieder voll auf das Bild fokussiert) */
#picker-bild {
	align-items:     center;
	border-radius:   4px;
	box-sizing:      border-box;
	display:         flex;
	height:          275px;
	justify-content: center;
	padding:         0.5em;
	width:           275px;
	}

#picker-artikelbild {
	max-height: 100%;
	max-width:  100%;
	}

/* Dein BL-Link bleibt zentriert, bekommt aber Flex-Freiheit */
#picker-bl-link {
	flex:            1;
	font-size:       1.1em;
	font-weight:     bold;
	text-align:      center;
	text-decoration: none;
	}

/* Die Detail-Tabelle rechts neben dem Bild */
#picker-details {
	align-content:         start; /* Drückt die Zeilen nach oben */
	align-items:           center;
	display:               grid;
	gap:                   0.8em 1.5em; /* Etwas kompakterer Abstand für vertikalen Platz */
	grid-template-columns: max-content 1fr;
	}

#picker-artikelnummer {
	font-size:     2em;
	font-weight:   bold;
	margin-bottom: 0.5em;
	margin-top:    0.2em;
	}

/* Texte behalten ihre 2m-Distanz-Größe, sind aber linksbündig zum Label */
#picker-farbname,
#picker-zustand,
#picker-remarks {
	font-size:   3.6em;
	font-weight: bold;
	line-height: 1.1;
	text-align:  left;
	}

#picker-historie {
	font-size:   2em;
	line-height: 1.1;
	text-align:  left;
	}

/* Die Mengen-Box bricht aus und zentriert die drei Blöcke */
#picker-mengen {
	display:         flex;
	grid-column:     1 / -1;
	justify-content: center;
	width:           100%;
	}

/* Damit die Inputs sauber wachsen können, geben wir den übergeordneten Blöcken mehr Freiheit */
.picker-menge-block {
	flex:       1; /* Erlaubt den 3 Blöcken, sich den Platz unten gleichmäßig zu teilen */
	text-align: center;
	}

/* Verhindert, dass Firefox und Chrome unerwünschte Pfeile einblenden und die Box starr aufblähen */
.picker-menge-input::-webkit-outer-spin-button,
.picker-menge-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin:             0;
	}

.picker-menge-input {
	-moz-appearance: textfield; /* Deaktiviert die Pfeile in Firefox */
	/* Jetzt können wir die maximale Breite für ein knackiges Design reduzieren */
	border-radius:   4px;
	box-sizing:      border-box;
	font-size:       4em;
	font-weight:     bold;
	max-width:       160px; /* Von 220px auf 160px gesenkt – absolut ausreichend für 4 Stellen ohne Pfeile */
	min-width:       2ch;
	padding:         0.1em 0.1em;
	text-align:      center;
	width:           100%;
	}

/* Das gesperrte Feld soll sich beim Drüberfahren wie Text verhalten */
.picker-menge-input:disabled {
	cursor: default;
	}

/* Labels stehen nun LINKS vor dem Text */
.picker-label {
	font-size:   1em;
	font-weight: bold;
	text-align:  center;
	}

/* Auch die Meldung darf über die volle Breite gehen */
#picker-meldung {
	grid-column: 1 / -1;
	text-align:  center;
	}

#picker-navigation {
	align-items:     center; /* Zentriert Buttons und BL-Link vertikal zueinander */
	display:         flex;
	justify-content: space-between;
	padding:         1em 0 0 0;
	width:           100%;
	}

#picker-navigation button {
	border-radius: 4px;
	cursor:        pointer;
	font-size:     1.1em;
	font-weight:   bold;
	min-width:     220px; /* Leicht erhöht, damit Text + Bild sauber Platz haben */
	padding:       0.4em 0.8em; /* Vertikal kompakter durch die Bildhöhe */
	}

#picker-navigation button:disabled {
	cursor:  default;
	opacity: 0.4;
	}

#picker-loading {
	padding:    2em;
	text-align: center;
	}

/* Hilfs-Strukturen für die Anordnung im Button */
.btn-content {
	align-items:     center;
	display:         flex;
	gap:             12px;
	justify-content: center;
	width:           100%;
	}

.btn-mini-bild {
	align-items:     center;
	border-radius:   3px;
	box-sizing:      border-box;
	display:         flex;
	height:          45px;
	justify-content: center;
	overflow:        hidden;
	padding:         2px;
	}

.btn-mini-bild img {
	max-height: 100%;
	max-width:  100%;
	object-fit: contain;
	}

/* Falls kein Bild da ist (Anfang/Ende), bleibt die Box unsichtbar aber hält den Platz */
.btn-mini-bild img[src=""],
.btn-mini-bild img:not([src]) {
	opacity: 0;
	}

#picker-start {
	border-radius: 4px;
	box-sizing:    border-box;
	padding:       1em;
	width:         1000px;
	}

#picker-start h2 {
	margin-top: 0;
	}

#picker-start > p {
	margin-bottom: 1.25em;
	}

#picker-start-bestellungen {
	display:        flex;
	flex-direction: column;
	gap:            0.5em;
	}

.picker-start-bestellung {
	align-items:   center;
	border-radius: 4px;
	box-sizing:    border-box;
	cursor:        pointer;
	display:       flex;
	min-height:    60px;
	padding:       0.75em 1em;
	transition:    border-color 0.15s ease,
	               background-color 0.15s ease;
	width:         100%;
	}

.picker-start-bestellung input[type="checkbox"] {
	cursor:       pointer;
	height:       22px;
	margin-right: 1em;
	width:        22px;
	}

.picker-start-bestellung-info {
	align-items:     center;
	display:         flex;
	justify-content: space-between;
	width:           100%;
	}

.picker-start-bestellung-info strong {
	font-size: 1.1em;
	}

.picker-start-bestellung-info > span {
	opacity: 0.8;
	}

#picker-start-zusammenfassung {
	font-weight: bold;
	margin-top:  1em;
	padding-top: 1em;
	}

#picker-start-meldung {
	font-weight: bold;
	margin:      0.75em 0;
	min-height:  1.2em;
	}

#picker-start-button {
	border-radius: 4px;
	cursor:        pointer;
	font-size:     1.1em;
	font-weight:   bold;
	padding:       0.75em 1.5em;
	}

#picker-start-button:hover {
	filter: brightness(1.1);
	}

#picker-start-button:disabled {
	cursor:  default;
	opacity: 0.4;
	}

/* Styling für die Sortier-Zeile im Picker-Look */
.picker-start-sort-row {
	align-items: center;
	display:     flex;
	}

.picker-sort-icon {
	align-items:     center;
	display:         flex;
	font-size:       16px;
	justify-content: center;
	margin-right:    1em;
	width:           21px; /* Entspricht etwa der Breite der Checkbox */
	}

/* Das Select-Feld dezent anpassen */
#picker-sortierung {
	-webkit-appearance:  none;
	appearance:          none;
	background-position: right 6px center;
	background-repeat:   no-repeat;
	background-size:     12px;
	border-radius:       4px;
	border-style:        solid;
	border-width:        1px;
	cursor:              pointer;
	font-size:           13px;
	font-weight:         500;
	outline:             none;
	padding:             4px 24px 4px 8px;
	}

/* Farbakzente: hell */
/* Nach basic.css laden. */

* {
	color: #000000;
	}

html, body {
	background-color: #FFFFCC;
	}

header {
	background-color: #FFFFCC;
	border-bottom:    0.5px solid #5D4037;
	}

#start {
	color: #000000;
	}

#start2 {
	color: #000000;
	}

#start2 a {
	color: #000000;
	}

#start2 a:hover {
	color: #5D4037;
	}

#start3 {
	color: #000000;
	}

article {
	background-color: #D4A373;
	}

footer {
	background-color: #FFFFCC;
	border-top:       0.5px solid #5D4037;
	}

footer a {
	color: #000000;
	}

footer a:hover {
	color: #5D4037;
	}

nav hr {
	border: 1px solid #D4A373;
	}

article a {
	color: #000000;
	}

article a:hover {
	color: #5D4037;
	}

td {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	}

table {
	background-color: #D4A373;
	}

input, select {
	background-color: #FFFFFF;
	border:           1px solid #D4A373;
	color:            #5D4037;
	}

textarea {
	background-color: #FFFFFF;
	border:           1px solid #D4A373;
	color:            #5D4037;
	}

nav {
	background-color: #3E2723;
	border-right:     0.5px solid #5D4037;
	color:            #FFFFCC;
	}

nav b {
	color: #FFFFCC;
	}

nav li {
	color: #FFFFCC;
	}

nav li a {
	color: #FFFFCC;
	}

nav li a:hover, #selected {
	background-color: #5D4037;
	color:            #C97D16;
	}

#agb li {
	color: #000000;
	}

#datenschutz li {
	color: #000000;
	}

#status {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	}

#adresse {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	}

#normal {
	background-color: #D4A373;
	border:           1px solid #5D4037;
	}

#aktuellerstatus {
	background-color: #4CAF50;
	border:           1px solid #5D4037;
	color:            #000000;
	}

#white, #white img {
	background-color: #FFFFFF;
	}

#black, #black img {
	background-color: #000000;
	}

#mehrspaltig {
	background-color: #FFFFCC;
	}

#formular {
	background-color: #FFFFCC;
	border:           2px solid #FFFFCC;
	}

#ON, #RUNNING, #UPDATE, #NEU, #DONE {
	color: #008000;
	}

#ERROR, #FEHLER, #GELOSCHT, #INIT {
	color: #FF0000;
	}

#STOP, #OFF, #STARTING, #WAITING {
	color: #D68A00;
	}

#INFO {
	color: #0066FF;
	}

#logobo {
	background-color:    #66CCFF;
	background-image:    url("bo_schriftzug.png");
	background-position: center;
	background-repeat:   no-repeat;
	}

#logobo2 {
	background-color:    #66CCFF;
	background-image:    url("bo_schriftzug.png");
	background-position: center;
	background-repeat:   no-repeat;
	}

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

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

#logobs {
	background-color:    #36434D;
	background-image:    url("bs_logo.png");
	background-position: center;
	background-repeat:   no-repeat;
	}

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

.blau {
	background-color: #0066FF;
	border:           1px solid #0000FF;
	color:            #FFFFCC;
	}

.unpassend {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	color:            #000000;
	}

.fehler {
	background-color: #FF0000;
	border:           1px solid #8B0000;
	color:            #000000;
	}

.rot input {
	background-color: #FF0000;
	border:           1px solid #8B0000;
	color:            #000000;
	}

.rot input:hover {
	background-color: orange;
	border:           1px solid #8B0000;
	color:            #FFFFCC;
	}

.balken-container {
	border:     1px solid #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

.balken-fuellung {
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.15);
	}

.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%
	            );
	}

.chart-container {
	background-color: #FFFFCC;
	}

.chart-value {
	color: #000000;
	}

.chart-label {
	color: #000000;
	}

.chart-title {
	border-left: 4px solid #4CAF50;
	color:       #000000;
	}

#picker {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	}

#picker-fortschritt-balken {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	}

#picker-fortschritt-wert {
	background-color: #D4A373;
	}

#picker-bild, #picker-bild-historie {
	background-color: #FFFFFF;
	border:           1px solid #5D4037;
	}

#picker-gepackte-menge {
	border: 2px solid #D4A373;
	}

#picker-navigation {
	background-color: transparent;
	border:           0;
	border-top:       1px solid #5D4037;
	}

#picker-navigation button {
	border: 1px solid #5D4037;
	}

#picker-zurueck, #picker-weiter {
	background-color: #FFFFFF;
	color:            #000000;
	}

#picker-start {
	background-color: #FFFFCC;
	border:           1px solid #5D4037;
	}

.picker-start-bestellung {
	background-color: #FFFFCC;
	border:           1px solid #D4A373;
	}

.picker-start-bestellung:hover {
	border-color: #5D4037;
	}

.picker-start-bestellung:has(input:checked) {
	background-color: #D4A373;
	border-color:     #5D4037;
	}

#picker-start-zusammenfassung {
	border-top: 1px solid #D4A373;
	}

#picker-start-meldung {
	color: #FF0000;
	}

#picker-start-button, .picker-start-sort-row {
	background-color: #D4A373;
	border:           1px solid #5D4037;
	color:            #000000;
	}

/* Farbliche Anpassung für das Select-Feld */
#picker-sortierung {
	background-color: #FFFFCC;
	border-color:     #5D4037;
	color:            #000000;
	}

/* Einheitlicher Rahmen für alle Inputs */
.picker-menge-input {
	border: 2px solid #D4A373;
	color:  #000000;
	}

/* Optischer Zustand für das gesperrte "Bestellt"-Feld */
.picker-menge-input:disabled {
	background-color: #E2E8F0; /* Disables Grau, das signalisiert: Hier kann man nichts tippen */
	border-color:     #CBD5E1;
	color:            #64748B;
	}

#picker-position {
	color:       #000000;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Verhindert Kontrastprobleme an der Farbgrenze */
	}