/****************************************************************************************
 *** Responsive-Schicht der Touchscreen-Kasse (Handys und Tablets im Hochkantformat)
 ***
 *** Diese Datei wird in lib/components/HtmlEntityMobil.php als LETZTES Stylesheet
 *** geladen und ueberschreibt das feste 1024x768-Layout ausschliesslich innerhalb
 *** von Media-Queries:
 ***
 ***   - @media (max-width: 1023px)  Basis-Schicht: fluider Container, Tablets hochkant
 ***   - @media (max-width: 767px)   Handy-Schicht: gestapeltes Layout, Bottom-Sheets
 ***
 *** Ab 1024px Viewport-Breite (Kassen-Terminals, 1366er-Tablets quer) greift KEINE
 *** Regel dieser Datei - das Desktop-Layout bleibt unveraendert.
 ***
 *** Konventionen:
 ***   - Keine Farb-/Verlaufs-Deklarationen auf Selektoren, die von den Skins
 ***     (touchscreenSilverSkin.css / touchscreenGreenSkin.css) gestylt werden,
 ***     da diese Datei NACH den Skins laedt und sie sonst uebersteuern wuerde.
 ***   - !important nur dort, wo JS oder serverseitiges HTML Inline-Styles setzt
 ***     (siehe Kommentar an der jeweiligen Regel).
 ***   - display niemals auf Elementen ueberschreiben, deren Sichtbarkeit per JS
 ***     (jQuery show/hide bzw. xmlSetClass) ueber Inline-display gesteuert wird.
 ***   - Die Klassen body.respo-* werden von js/touchscreen/responsive.js gesetzt.
 ***
 *** ACHTUNG - konkurrierende Portrait-Regeln:
 *** Manche Installationen tragen in css/touchscreen/cashpoint/cashpoint.css einen
 *** eigenen Block "@media only screen and (orientation: portrait)" (frueherer Ansatz
 *** fuer Hochkant). Der greift auf dem Handy ZUSAETZLICH zu dieser Schicht und setzt
 *** u.a. top:74px auf #kassenskin_numpad und .kassenskin_right_box sowie top:340px auf
 *** .kassenskin_mittelspalte. Da cashpoint.css frueher laedt, gewinnt diese Datei zwar
 *** bei gleichen Eigenschaften - aber nicht gesetzte Eigenschaften schlagen durch:
 *** ein fremdes top zusammen mit unserem bottom spannt einen fixierten Container ueber
 *** den halben Bildschirm auf. Deshalb werden top/height bei den fixierten Elementen
 *** hier IMMER ausdruecklich gesetzt, auch wenn der Wert "auto" ist.
 ****************************************************************************************/

/****************************************************************************************
 *** Basis-Schicht: alle Viewports unter 1024px (Tablets hochkant + Handys)
 ****************************************************************************************/
@media only screen and (max-width: 1023px) {

	/* Tatsaechliche Hoehe der Infoleiste des Tisches; responsive.js misst sie
	   nach (der Text braucht im schmalen Container mehrere Zeilen) */
	:root {
		--respo-info-h: 30px;
	}

	/*******************************************
	 *** Grundgeruest: Container wird fluid
	 *******************************************/
	html, body {
		height: 100%;
	}
	body {
		margin: 0;
		overflow: hidden;
	}
	#touchscreenContainer {
		width: 100%;
		height: 100vh;
		height: 100dvh;
	}

	/*******************************************
	 *** Header: Zeitstempel ausblenden,
	 *** Menue-Icons rechts horizontal scrollbar
	 *******************************************/
	/* Das Original setzt .header_timestamp absolut auf margin-left: 410px -
	   im schmalen Container liegt diese Position auf dem Logo. Datum und
	   Uhrzeit stehen ohnehin unten links in #touchscreenStatusTime, deshalb
	   entfaellt der Zeitstempel hier komplett und das Logo bleibt frei.
	   display ist hier unbedenklich: basics.js schreibt ueber UR_Start() nur
	   Text in #header_date/#header_time und steuert keine Sichtbarkeit. */
	.header_timestamp {
		display: none;
	}
	.workbenchHeaderMenu {
		max-width: calc(100% - 190px);
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.workbenchHeaderMenu > div {
		display: inline-block;
		white-space: nowrap;
	}

	/*******************************************
	 *** Statuszeile: flexibel statt table-cell
	 *******************************************/
	#touchscreenStatus {
		display: flex;
		overflow: hidden;
	}
	.touchscreenStatusField {
		display: block;
		min-width: 0;
		flex: 0 1 auto;
		line-height: 21px;
	}
	#touchscreenStatusInfo {
		flex: 1 1 auto;
	}
	#touchscreenStatusTime {
		width: auto;
		flex: 0 0 auto;
	}

	/*******************************************
	 *** Popups: an den Viewport statt an die
	 *** festen Container-Masse (width/height:inherit) koppeln
	 *******************************************/
	.popupBackgroundDiv,
	#inactiveDiv {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
	}
	/* Lade-Box zentrieren (Original: festes margin-top 320px) */
	#ajaxloaderInactiveDiv {
		width: min(400px, 92vw);
		margin-top: calc(50vh - 75px);
	}
	#serverErrorContentDiv {
		width: min(660px, 94vw);
		overflow: hidden;
	}
	#serverErrorLeftDiv {
		width: 130px;
	}
	#serverErrorMiddleDiv {
		width: calc(100% - 150px);
	}
	/* #serverErrorButtons und .serverErrorBackButton holen ihre Breite per
	   width:inherit aus dem Mittelteil. Im Original ist das ein absoluter Wert
	   (410px) und wird sauber durchgereicht; sobald der Mittelteil fluid rechnet,
	   erbt jede Ebene den Ausdruck und loest ihn neu auf - der Button schrumpft
	   dadurch bis auf 0. Deshalb hier explizite Breiten. */
	#serverErrorButtons {
		width: 100%;
	}
	.serverErrorBackButton {
		width: 140px;
	}
	.alertContentDiv {
		width: min(550px, 92vw);
	}
	#paymentProviderInfoDiv {
		width: min(400px, 92vw);
	}

	/*******************************************
	 *** Bildschirmtastatur: fluide Breite,
	 *** Tastenfeld unten statt fest bei top:428px
	 *******************************************/
	.ui-keyboard-preview-wrapper {
		top: 15px;
	}
	.ui-keyboard-preview {
		width: calc(100% - 20px);
		margin-left: 10px;
		left: 0;
	}
	.ui-keyboard-keyset {
		top: auto;
		bottom: 30px;
		height: auto;
		padding: 4px 0;
	}
	.ui-keyboard-button {
		min-width: calc((100vw - 30px) / 12);
		height: 52px;
		line-height: 20px;
		font-size: 17px;
		margin: 1px;
	}
	.ui-keyboard-space {
		width: 40vw;
	}

	/*******************************************
	 *** Numpad: fluide Tabelle statt 320x340
	 *******************************************/
	.numpad_rahmen {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 0 auto;
	}
	.numpad_number, .numpad_number_aktiv, .numpad_number_inactive,
	.numpad_sign, .numpad_sign_aktiv, .numpad_sign_inaktiv,
	.numpad_zero, .numpad_ok, .numpad_ok_aktiv {
		width: auto;
	}
	.numpad_number, .numpad_number_aktiv, .numpad_number_inactive {
		padding: 10px;
		font-size: 22px;
	}
	.numpad_ok, .numpad_ok_aktiv {
		padding: 12px;
		font-size: 22px;
	}
	#numpad_eingabe {
		width: calc(100% - 4px);
	}
	.numpad_multiplikatoranzeige {
		width: 50px;
	}

	/*******************************************
	 *** Raster-Buttons: Die Original-Buttons rechnen content-box
	 *** (2px Rahmen je Seite kommt zur calc-Breite HINZU) - fuer die
	 *** prozentualen Raster auf border-box umstellen, damit die
	 *** Spaltenzahl exakt aufgeht
	 *******************************************/
	.workbench_button, .workbench_button_small,
	.workbench_button_kellner, .workbench_button_kellner_small,
	.workbench_button_cashpoint_type,
	.table_button, .table_button_red,
	.kategorie_button, .hauptkategorie_button, .unterkategorie_button, .hauptkategorie_xxl_button,
	.article_button,
	.kellnerfunction_button,
	.tablefunction_button, .tablefunction_button_red, .tablefunction_cancellation_reasen_button,
	.tablefunction_merge_button,
	.checkout_button, .checkout_guest_button, .checkout_okay_button,
	.cashpoint_finish_button, .cashpoint_finish_button_small {
		box-sizing: border-box;
	}

	/*******************************************
	 *** Workbench: Uebersichten volle Breite,
	 *** Buttons prozentual statt fester Pixel
	 *******************************************/
	#workbenchInfo {
		font-size: 16px;
		height: auto;
		min-height: 20px;
		padding: 6px 10px;
	}
	#facilityOverview, #outletOverview, #cashpointOverview,
	#kellnerOverview, #tableOverview {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.workbench_button, .workbench_button_small {
		width: calc(25% - 10px);
		height: 90px;
	}
	.workbench_button_kellner, .workbench_button_kellner_small {
		width: calc(50% - 10px);
		height: 80px;
	}
	.table_button, .table_button_red {
		width: calc(25% - 10px);
	}
	/* Buttonzeile der Tischuebersicht: Inline width:180px der DivTableOverviewButton ueberschreiben */
	#workbenchButtons {
		display: flex;
		gap: 5px;
	}
	#workbenchButtons .dialog_button {
		width: auto !important;
		flex: 1 1 0;
		float: none;
		margin: 5px 0 0 0;
	}
	/* Kellner-Funktionsbuttons (X-/Z-Abschlag, Trinkgeld) */
	#kellnerbuttonslayer {
		height: auto;
	}
	.kellnerfunction_button {
		width: 100%;
		max-width: 298px;
	}

	/*******************************************
	 *** Kassentyp-Auswahl (Hybridkasse) und Funktionsseite
	 *******************************************/
	#cashpointTypeContent {
		width: 100%;
	}
	.workbench_button_cashpoint_type {
		width: calc(100% - 20px);
		max-width: 450px;
		height: 170px;
		margin: 15px 10px 0 10px;
	}
	#cashpointTypeParkedTables {
		width: calc(100% - 20px);
		padding-left: 20px;
	}
	#checkoutFinishButtonsContent {
		width: 100%;
		max-width: 600px;
	}
	.cashpoint_finish_button {
		width: calc(100% - 20px);
		max-width: 500px;
	}
	.cashpoint_finish_button_small {
		width: calc(50% - 25px);
		max-width: 228px;
	}

	/*******************************************
	 *** Tisch-/Kellnerfunktionen: Rahmen fluid,
	 *** feste 590px-Hoehe durch Resthoehe ersetzen
	 *******************************************/
	.tablefunctionData {
		height: calc(100% - 60px);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tablefunction_button, .tablefunction_button_red {
		width: calc(50% - 15px);
		max-width: 335px;
	}
	.tablefunction_merge_button {
		width: min(400px, calc(100% - 20px));
	}
	.tablefunction_cancellation_reasen_button {
		width: calc(50% - 15px);
		max-width: 285px;
	}
	/* Tischsuche: Zeilen behalten Mindestbreite, Rahmen scrollt horizontal
	   (die Restspalte .searchTableInfo = calc(100% - 511px) wuerde sonst negativ) */
	#searchTableStep2Content, #trinkgeldStep2Content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.searchTableRow {
		min-width: 640px;
	}
	/* Positionen umbuchen: zwei 285px-Spalten + Pfeile fluid verteilen */
	.umbuchenPositionsContent {
		width: calc(100% - 20px);
		padding: 10px;
	}
	.umbuchenPositions {
		width: calc(50% - 45px);
		max-width: 450px;
	}
	.umbuchenPositionsArrows {
		width: 70px;
	}
	.positionsUmbuchenPopup {
		top: 15vh;
		left: 50%;
		transform: translateX(-50%);
		width: min(468px, 92vw);
	}
	/* Eingabefelder (DivInputField350 setzt height/font-size inline) */
	.inputFieldPanel350 {
		width: min(350px, calc(100vw - 60px));
	}
	.inputLotteryCode {
		width: min(350px, calc(100vw - 60px));
	}
	/* Trinkgeld-Erfolgsmeldung: absolute Offsets aufheben */
	#trinkgeldStep3Message2 {
		position: static;
		width: auto;
		height: auto;
		margin: 20px;
	}
	/* X-Abschlag: feste 300/200px-Zellen prozentual */
	.abschlag_header, .abschlag_lable {
		width: 45%;
	}
	.abschlag_amount {
		width: 30%;
	}

	/*******************************************
	 *** Checkout: feste Tabellen-/Contentbreiten fluid
	 *******************************************/
	.checkout_dialog_content {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.checkout_dialog_header {
		padding: 15px 5px 15px 15px;
	}
	.checkout_dialog_data {
		width: calc(100% - 15px);
		padding-left: 15px;
	}
	/* Inline height:360px (ohne Hausbons) ueberschreiben */
	#checkout_external_paymethod_table {
		width: 100%;
		max-height: none;
		height: auto !important;
	}
	.checkout_button {
		width: calc(50% - 12px);
		max-width: 280px;
	}
	.checkout_guest_button {
		width: calc(50% - 12px);
		max-width: 280px;
	}
	/* Inline height:580px bzw. 430px ueberschreiben */
	#checkout_hotel_guests_content {
		height: calc(100% - 10px) !important;
	}
	#checkout_hausbons_content {
		height: calc(100% - 10px) !important;
	}
	#checkout_reduction_buttons {
		width: 100%;
		margin-top: 20px;
	}
	.checkout_summary_content {
		width: min(650px, calc(100vw - 44px));
	}
	.checkout_paymethod_info {
		position: static;
		float: left;
		width: calc(100% - 15px);
		height: auto;
		padding-left: 15px;
	}
	/* Teilzahlungen: absolute 350px-Box in den Fluss holen */
	.checkout_part_payments {
		position: relative;
		top: 0;
		right: 0;
		float: right;
		width: min(350px, 60vw);
	}
	/* Gangfolge-Details: feste 568px-Hoehe durch Resthoehe ersetzen */
	#gangfolge_details_liste {
		height: auto;
		bottom: 60px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*******************************************
	 *** Infoleiste des Tisches: Hoehe folgt dem Text
	 *******************************************/
	/* Das Original gibt der Leiste feste 25px. Im schmalen Container passt der
	   Inhalt (Vorgang, Kellner, Oeffnungszeit) nicht mehr in eine Zeile und wird
	   unten abgeschnitten. Sie waechst deshalb mit dem Text; die tatsaechliche
	   Hoehe misst responsive.js in --respo-info-h, damit der Arbeitsbereich
	   darunter exakt anschliesst (das Original rechnet mit festen 30px). */
	#kassenskin_infoleiste {
		height: auto;
		min-height: 20px;
		padding-bottom: 4px;
		line-height: 15px;
	}
	#kassenskin_cashpoint {
		height: calc(100% - var(--respo-info-h));
	}

	/*******************************************
	 *** Kassenansicht: Artikelbereich als Flex-Spalte statt
	 *** JS-berechneter Inline-Hoehe (articleView.js setzt height
	 *** in px inline -> !important noetig; die statische calc-Formel
	 *** stimmt nicht mehr, sobald Kategorien mehrzeilig umbrechen).
	 *** display der Kategorie-Contents NICHT anfassen (categoryView.js liest es).
	 *******************************************/
	#kassenskin_article_overview {
		display: flex;
		flex-direction: column;
		height: calc(100% - 45px);
	}
	/* Die Kategorie-Leisten umbrechen hier mehrzeilig (im Original scrollen sie
	   waagerecht ueber Blaetter-Pfeile). Bei vielen Kategorien fressen sie sonst
	   den Artikelbereich auf - beobachtet mit 8 Haupt- und 10 Unterkategorien:
	   210px + 280px, fuer die Artikel blieben 155px. Deshalb je Leiste hoechstens
	   zwei Zeilen, darueber hinaus wird senkrecht gescrollt.
	   overflow statt Hoehenbegrenzung am Elternelement, damit die Auswahl
	   vollstaendig erreichbar bleibt. */
	.kassenskin_hauptkategorien, .kassenskin_unterkategorien {
		flex: 0 0 auto;
		max-height: 148px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Der innere Content ist im Original height:100% + overflow:hidden. Mit der
	   Hoehenbegrenzung oben wuerde er einfach mitschrumpfen und die restlichen
	   Kategorien abschneiden, ohne dass etwas scrollt - sie waeren unerreichbar.
	   Er muss seine natuerliche Hoehe behalten, damit die Leiste scrollen kann. */
	.kassenskin_hauptkategorien .categoryContent,
	.kassenskin_unterkategorien .categoryContent {
		height: auto;
		overflow: visible;
	}
	.kassenskin_article {
		flex: 1 1 auto;
		width: auto;
		height: auto !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/****************************************************************************************
 *** Handy-Schicht: Viewports unter 768px (Smartphones hochkant)
 ****************************************************************************************/
@media only screen and (max-width: 767px) {

	/*******************************************
	 *** Masse des Handy-Layouts. --respo-numpad-h und --respo-bar-bottom
	 *** werden von responsive.js aus den tatsaechlichen Elementhoehen
	 *** nachgezogen; die Werte hier sind die Startwerte.
	 *******************************************/
	:root {
		--respo-header-h: 44px;
		--respo-status-h: 25px;
		--respo-bar-h: 46px;
		--respo-numpad-h: 290px;
		--respo-bar-bottom: 25px;
	}

	/*******************************************
	 *** Header und Statuszeile kompakt
	 *******************************************/
	#touchscreenHeader {
		height: 44px;
		background-size: auto 44px;
	}
	#workbenchlayer {
		height: calc(100% - 44px - 25px);
	}
	.workbenchHeaderMenu {
		max-width: calc(100% - 140px);
	}
	/* Outlet- und Kassenname in der Statuszeile ausblenden (Platz) */
	#touchscreenStatusOutlet, #touchscreenStatusCashpoint {
		display: none;
	}

	/*******************************************
	 *** Workbench: Buttons im 2er-/3er-Raster
	 *******************************************/
	.workbench_button, .workbench_button_small,
	.workbench_button_kellner, .workbench_button_kellner_small {
		width: calc(50% - 10px);
	}
	.table_button, .table_button_red {
		width: calc(33.333% - 10px);
	}
	.browserScrollbarDiv {
		width: 44px;
	}
	.pfeil_button_ob_big, .pfeil_button_un_big,
	.pfeil_button_ob_big_inac, .pfeil_button_un_big_inac {
		background-size: 44px 44px;
		width: 44px;
		height: 44px;
	}

	/* Die gesamte Workbench scrollt als Ganzes: Hoehenketten aufloesen,
	   damit Uebersicht, Buttonzeile und Kellner-Funktionsbuttons
	   untereinander im Scrollfluss liegen */
	#workbenchlayer {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#workbenchContent {
		height: auto;
		min-height: 100%;
	}
	#workbenchLeftContainer, #workbenchData {
		height: auto;
	}
	#facilityOverview, #outletOverview, #cashpointOverview,
	#kellnerOverview, #tableOverview {
		width: 100%;
		height: auto;
		min-height: 150px;
	}
	#workbenchButtons {
		position: static;
		float: left;
		width: 100%;
	}
	#workbenchRightContainer {
		position: relative;
		float: left;
		width: 100%;
		height: auto;
		bottom: auto;
		right: auto;
	}
	.kellnerfunction_button {
		max-width: none;
	}
	/* Tisch-/Kellnerfunktionen haengen an der Hoehenkette des Containers;
	   im Scrollfluss bekommen sie eine Viewport-basierte Hoehe */
	#tablefunctions, #kellnerfunctions {
		position: relative;
		float: left;
		height: calc(100vh - 200px);
		height: calc(100dvh - 200px);
	}

	/* Numpad im Workbench-Modus: fest unten ueber der Statuszeile;
	   der Inhalt der Workbench weicht per padding aus (Klassen setzt responsive.js) */
	body.respo-numpad-visible.respo-numpad-workbench #kassenskin_numpad {
		position: fixed;
		left: 0;
		right: 0;
		top: auto; /* zwingend, siehe Hinweis zu Portrait-Regeln im Dateikopf */
		bottom: var(--respo-status-h);
		width: 100%;
		height: auto;
		padding: 4px 0;
		background-color: rgba(187, 187, 187, 0.97);
		z-index: 940;
		box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.35);
	}
	body.respo-numpad-visible.respo-numpad-workbench #workbenchlayer {
		height: calc(100% - var(--respo-header-h) - var(--respo-status-h) - var(--respo-numpad-h));
	}

	/*******************************************
	 *** Kassenansicht: schmale Quickfunction-Spalte,
	 *** Positionsliste und Numpad als Bottom-Sheets
	 *******************************************/
	#kassenskin_left_box {
		width: 100%;
	}
	#kassenskin_infoleiste {
		font-size: 12px;
	}
	.kassenskin_quickfunction {
		z-index: 500; /* unter den Bottom-Sheets (Original 999) */
	}
	.kassenskin_quickfunction_column {
		width: 74px;
	}
	#kassenskin_quickfunction_right {
		width: 150px;
	}
	/* top/height ausdruecklich zuruecksetzen: manche Installationen tragen in
	   cashpoint.css einen eigenen @media(orientation: portrait)-Block, der die
	   Mittelspalte um 340px nach unten schiebt (frueherer Hochkant-Ansatz).
	   Er greift auf dem Handy zusaetzlich zu dieser Schicht - siehe Hinweis im
	   Dateikopf zu konkurrierenden Portrait-Regeln. */
	.kassenskin_mittelspalte {
		left: 74px;
		top: 0;
		width: calc(100% - 74px);
		height: 100%;
	}
	#kassenskin_quickfunction_left {
		height: 100%;
	}
	.quickfunction_button {
		width: 66px;
		height: 52px;
		margin: 4px 0 3px 3px;
	}
	.quickfunction_button_right {
		width: 142px;
	}
	.quickfunction_button_text {
		font-size: 11px;
		bottom: 12px;
	}
	/* Grosse Aktions-Buttons: feste bottom-Offsets ans kleinere Raster anpassen */
	#quickfunction_button_parken, #quickfunction_button_pay {
		height: 90px;
		bottom: 148px;
	}
	#quickfunction_button_cancel {
		height: 52px;
		bottom: 92px;
	}
	#quickfunction_button_booking, #quickfunction_button_pay_lite {
		height: 88px;
		bottom: 0;
	}

	.kategorie_button {
		width: calc(33.333% - 10px);
		min-width: 0;
	}
	.hauptkategorie_xxl_button {
		width: calc(66.666% - 10px);
	}
	.article_button {
		width: calc(33.333% - 8px);
		margin: 0 8px 8px 0;
	}
	/* Blaetter-Pfeile der Artikel: natives Scrollen ersetzt sie
	   (!important, weil articleView.js sie per jQuery .show() einblendet) */
	.kassenskin_article_scrollbar {
		display: none !important;
	}
	.kassenskin_article_gangfolge {
		max-width: calc(100% - 10px);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Die Kassenansicht endet oberhalb der Fussleiste, damit diese die
	   Blaetter-/Gangfolge-Leiste am unteren Rand nicht verdeckt */
	body.respo-cashpoint-open #kassenskinlayer {
		height: calc(100% - var(--respo-status-h) - var(--respo-bar-h));
	}

	/* Positionsliste (Bon): Bottom-Sheet, per Klasse respo-bon-open sichtbar.
	   Die Hoehe ist gedeckelt, damit das Sheet nie unter den Header rutscht */
	.kassenskin_right_box {
		position: fixed;
		left: 0;
		right: 0;
		top: auto; /* zwingend, siehe Hinweis zu Portrait-Regeln im Dateikopf */
		bottom: var(--respo-status-h);
		float: none;
		width: 100%;
		height: min(58vh, calc(100vh - var(--respo-header-h) - var(--respo-status-h) - var(--respo-bar-h)));
		height: min(58dvh, calc(100dvh - var(--respo-header-h) - var(--respo-status-h) - var(--respo-bar-h)));
		background-color: #f2f2f2;
		z-index: 930;
		box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.4);
		transform: translateY(calc(100% + 30px));
		transition: transform 0.25s ease;
	}
	body.respo-bon-open .kassenskin_right_box {
		transform: none;
	}
	.position_table {
		width: 100%;
		height: 100% !important; /* Original reserviert 340px fuers Numpad */
	}
	/* Unsichtbare Messzeile der Positionsliste: Das Original parkt sie mit
	   top:-500px ausserhalb des Bildschirms - als Kind des jetzt fixierten
	   Sheets landet sie mitten im Bild. visibility statt Versatz, damit
	   positionView.js weiterhin ihre Hoehe messen kann (display:none nicht!) */
	#position_table_void_row {
		visibility: hidden;
	}
	.position_table_content {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.position_table_cell {
		max-width: none;
	}
	/* Blaetter-Pfeile des Bons ausblenden, Summe bleibt. Der Groessen-Umschalter
	   (#position_table_resize) bleibt sichtbar: nur die grosse Darstellung zeigt
	   die Kuechenmonitor-Icons ("serviert" markieren, positionView.js) */
	#position_table_scroll_up, #position_table_scroll_down {
		display: none !important;
	}

	/* Numpad in der Kasse und im Checkout: Bottom-Sheet per Klasse respo-numpad-open */
	body.respo-numpad-kasse #kassenskin_numpad,
	body.respo-numpad-checkout #kassenskin_numpad {
		position: fixed;
		left: 0;
		right: 0;
		top: auto; /* zwingend, siehe Hinweis zu Portrait-Regeln im Dateikopf */
		bottom: var(--respo-status-h);
		width: 100%;
		height: auto;
		padding: 4px 0;
		background-color: rgba(187, 187, 187, 0.97);
		z-index: 950;
		box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.35);
		transform: translateY(calc(100% + 30px));
		transition: transform 0.25s ease;
	}
	body.respo-numpad-open.respo-numpad-kasse #kassenskin_numpad,
	body.respo-numpad-open.respo-numpad-checkout #kassenskin_numpad {
		transform: none;
	}
	/* Sind Bon UND Numpad geoeffnet (Trinkgeld/Auslage, Position angetippt ->
	   Preis/Menge/erneut buchen), stapelt sich der Bon ueber dem Numpad:
	   Bestelluebersicht oben, Numpad unten, Fussleiste darueber */
	body.respo-bon-open.respo-numpad-open .kassenskin_right_box {
		bottom: calc(var(--respo-status-h) + var(--respo-numpad-h));
		height: min(58vh, calc(100vh - var(--respo-header-h) - var(--respo-status-h) - var(--respo-numpad-h) - var(--respo-bar-h)));
		height: min(58dvh, calc(100dvh - var(--respo-header-h) - var(--respo-status-h) - var(--respo-numpad-h) - var(--respo-bar-h)));
	}

	/*******************************************
	 *** Eingabe-Dialoge der Kasse als Popup
	 *******************************************/
	/* Diese Dialoge liegen im Original in der Mittelspalte und brauchen alle das
	   Numpad. Auf dem Handy funktioniert das dort nicht: "Storno am Tisch" wird
	   aus einer Position der Bestelluebersicht heraus geoeffnet und verschwindet
	   dahinter, und bei beiden verdeckt das aufgezogene Numpad-Sheet die
	   Buttonzeile am unteren Rand des Dialogs. Sie liegen deshalb als Popup ueber
	   allem, direkt oberhalb der Fussleiste und damit oberhalb des Numpads.
	   responsive.js oeffnet dazu das Numpad (siehe observeNumpad) und schliesst
	   beim Storno die Bestelluebersicht (siehe observeCancelOnTable).
	   Wichtig: display wird NICHT angefasst - die Dialoge steuern ihre
	   Sichtbarkeit per jQuery show/hide ueber Inline-display. */
	#cancel_on_table_dialog,
	#change_tablenumber_dialog,
	body:not(.respo-partial-split) #partial_table_dialog {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc(var(--respo-bar-bottom) + var(--respo-bar-h) + 8px);
		width: auto;
		height: auto;
		float: none;
		border-radius: 6px;
		background-color: #fff;
		box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
		z-index: 975;
		transition: bottom 0.25s ease;
	}
	#cancel_on_table_dialog .kassenskin_mittelspalte_dialog,
	#cancel_on_table_dialog .kassenskin_mittelspalte_content,
	#change_tablenumber_dialog .kassenskin_mittelspalte_dialog,
	#change_tablenumber_dialog .tablefunctionContent,
	body:not(.respo-partial-split) #partial_table_new_tablenumber,
	body:not(.respo-partial-split) #partial_table_dialog .tablefunctionContent {
		width: 100%;
		height: auto;
		float: none;
		margin-top: 0;
	}
	#cancel_on_table_dialog .kassenskin_mittelspalte_content_header,
	#change_tablenumber_dialog .kassenskin_mittelspalte_content_header,
	#partial_table_dialog .kassenskin_mittelspalte_content_header {
		padding: 14px 14px 4px 14px;
		font-size: 17px;
		text-align: center;
	}
	#cancel_on_table_dialog .inputField350,
	#change_tablenumber_dialog .inputField350,
	#partial_table_dialog .inputField350 {
		height: auto;
		padding: 8px 0 12px 0;
	}
	/* Die Buttonzeile ist im Original absolut am unteren Rand des Dialogs
	   verankert - im Popup mit automatischer Hoehe muss sie in den Fluss.
	   Flex statt float: .dialog_button rechnet content-box (150px + Rahmen),
	   eine Prozentbreite wuerde dadurch umbrechen */
	#cancel_on_table_dialog .kassenskin_dialog_buttons,
	#change_tablenumber_dialog .kassenskin_dialog_buttons,
	body:not(.respo-partial-split) #partial_table_dialog .kassenskin_dialog_buttons {
		display: flex;
		gap: 8px;
		position: static;
		width: auto;
		height: auto;
		padding: 8px;
	}
	#cancel_on_table_dialog .dialog_button,
	#change_tablenumber_dialog .dialog_button,
	body:not(.respo-partial-split) #partial_table_dialog .dialog_button {
		flex: 1 1 0;
		width: auto;
		margin: 0;
		float: none;
	}

	/*******************************************
	 *** Meldungen (Fehler, Ja/Nein) als Karte
	 *******************************************/
	/* Im Original ist die Meldung eine 550px breite Box, mittig im abgedunkelten
	   Vollbild-Layer. Auf dem Handy ergibt die Breite zusammen mit den 15px
	   Innenabstand (content-box!) genau die Viewport-Breite - ein randloses
	   weisses Band. Sie wird deshalb wie die Eingabe-Dialoge dargestellt:
	   eingerueckte Karte, in der Kassenansicht oberhalb der Fussleiste und damit
	   ueber dem Numpad, mit dem der Kellner gerade arbeitet.
	   display wird NICHT angefasst - AlertDialog/ConfirmDialog steuern die
	   Sichtbarkeit des umgebenden Layers per jQuery show/hide. */
	.alertContentDiv {
		box-sizing: border-box;
		width: calc(100% - 16px);
		max-width: 550px;
		border-radius: 6px;
	}
	.alertHeader {
		height: auto;
		margin: 0 0 8px 0;
		font-size: 17px;
		line-height: 20px;
	}
	.alertMessage {
		min-height: 0;
		margin: 0 0 12px 0;
	}
	.alertButtons {
		height: auto;
	}
	body.respo-cashpoint-open #alertDialogDiv .alertContentDiv,
	body.respo-cashpoint-open #confirmDialogDiv .alertContentDiv {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc(var(--respo-bar-bottom) + var(--respo-bar-h) + 8px);
		width: auto;
		box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	}

	/* Der Verbindungsfehler ("Probleme beim Verbindungsaufbau...") hat eigenes
	   Markup: Netzwerk-Icon links, Meldung und Button rechts daneben. Das Icon
	   kostet 170px, die der Meldung auf dem Handy fehlen - es entfaellt hier,
	   der Textteil bekommt die volle Breite. Darstellung und Position sonst wie
	   bei Alert/Confirm. */
	#serverErrorLeftDiv {
		display: none;
	}
	#serverErrorMiddleDiv {
		float: none;
		width: 100%;
	}
	#serverErrorContentDiv {
		box-sizing: border-box;
		width: calc(100% - 16px);
		max-width: 660px;
		min-height: 0;
		padding: 12px;
		border-radius: 6px;
	}
	#serverErrorMessage {
		min-height: 0;
	}
	body.respo-cashpoint-open #serverErrorDialogDiv #serverErrorContentDiv {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc(var(--respo-bar-bottom) + var(--respo-bar-h) + 8px);
		width: auto;
		box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	}

	/*******************************************
	 *** Tisch teilen: beide Bestellungen uebereinander
	 *******************************************/
	/* Im Original stehen die Positionen des Tisches rechts und die des
	   Teiltisches in der Mittelspalte nebeneinander - auf dem Handy passt das
	   nicht. Stattdessen liegen beide Listen in gleicher Darstellung
	   uebereinander: oben der Tisch, unten die Teilrechnung. Ein Tipp auf eine
	   Zeile schiebt sie in die jeweils andere Liste (die Logik dafuer bringt die
	   Kasse bereits mit: PositionView -> movePosition, PartialTablePositionView
	   -> deletePosition).
	   Links bleiben 74px fuer die Quickfunction-Spalte frei - ueber sie laufen
	   Bezahlen, Buchen und Abbrechen, die PartialTableDialog.openDialog umbelegt.
	   Die Fussleiste entfaellt hier: der Bon ist fest eingeblendet und das
	   Numpad wird erst im zweiten Schritt (Tischnummer) gebraucht. */
	/* Spezifitaet muss die Einblend-Regel body.respo-cashpoint-open #respoSheetBar schlagen */
	body.respo-cashpoint-open.respo-partial-split #respoSheetBar,
	body.respo-cashpoint-open.respo-partial-split #respoSheetBackdrop {
		display: none;
	}
	/* Die obere Haelfte wird als Flex-Spalte aufgebaut - genau wie die untere,
	   damit beide gleich aussehen und die eingefuegte Ueberschrift in der
	   Hoehenrechnung beruecksichtigt wird (height:100% der Positionsliste
	   wuesste nichts von ihr und wuerde nach unten ueberstehen) */
	body.respo-partial-split .kassenskin_right_box {
		display: flex;
		flex-direction: column;
		left: 74px;
		right: 0;
		width: auto; /* sonst gewinnt width:100% der Sheet-Regel und die Liste ragt rechts hinaus */
		/* Der Kassen-Header ist in der Kassenansicht ausgeblendet (Inline-display
		   aus CashpointDialog) - die Aufteilung beginnt daher direkt unter der
		   Infoleiste, nicht unter dem Header */
		top: var(--respo-info-h);
		bottom: auto;
		height: calc((100vh - var(--respo-info-h) - var(--respo-status-h)) / 2);
		height: calc((100dvh - var(--respo-info-h) - var(--respo-status-h)) / 2);
		transform: none;
		box-shadow: none;
		border-bottom: 3px solid darkslategray;
	}
	body.respo-partial-split #partial_table_dialog {
		position: fixed;
		left: 74px;
		right: 0;
		top: calc(var(--respo-info-h) + (100vh - var(--respo-info-h) - var(--respo-status-h)) / 2);
		top: calc(var(--respo-info-h) + (100dvh - var(--respo-info-h) - var(--respo-status-h)) / 2);
		bottom: var(--respo-status-h);
		width: auto;
		height: auto;
		float: none;
		background-color: #f2f2f2;
		z-index: 935;
	}
	/* Flex ist hier vertraeglich mit jQuery show/hide: .hide() setzt Inline-none
	   (gewinnt), .show() entfernt den Inline-Wert wieder und laesst flex greifen */
	body.respo-partial-split #partial_table_position_list {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	body.respo-partial-split #partial_table_position_table_content {
		flex: 1 1 auto;
		width: auto;
		height: auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	body.respo-partial-split #partial_table_position_header,
	body.respo-partial-split #partial_table_position_buttons {
		flex: 0 0 auto;
	}
	/* Der Hinweistext der unteren Liste kommt aus dem Server-HTML und ist lang -
	   im geteilten Layout kompakt halten, damit Platz fuer Positionen bleibt */
	body.respo-partial-split #partial_table_position_header {
		max-height: 42px;
		padding: 3px 6px;
		font-size: 11px;
		line-height: 13px;
		overflow: hidden;
	}
	/* Die Summenzeile ist im Original absolut am unteren Rand verankert - in der
	   Flex-Spalte muss sie als letztes Element in den Fluss. relative statt
	   static: die Blaetter-/Groessen-Icons darin sind absolut positioniert und
	   brauchen die Zeile weiterhin als Bezugsrahmen, sonst rutschen sie auf den
	   Betrag */
	body.respo-partial-split #partial_table_position_buttons,
	body.respo-partial-split .kassenskin_right_box .position_table_buttons {
		position: relative;
		width: auto;
		flex: 0 0 auto;
	}
	/* Die Blaetter-Pfeile der Teilrechnung ersetzt natives Scrollen (das Pendant
	   der oberen Liste ist bereits ausgeblendet) */
	body.respo-partial-split #partial_table_scroll_up,
	body.respo-partial-split #partial_table_scroll_down {
		display: none !important;
	}
	/* Der Groessen-Umschalter der oberen Liste (Inline left:85px) liegt in der
	   schmalen Summenzeile auf dem Betrag. Beim Teilen erzwingt
	   PartialTableDialog ohnehin die grosse Darstellung - hier also ausblenden */
	body.respo-partial-split #position_table_resize {
		display: none !important;
	}
	/* Die Teilrechnung stellt ihre Positionen im Original zweispaltig dar
	   (calc(100% / 2 - 1px)) - auf dem Handy gehoert jede Position in eine
	   eigene Zeile, damit beide Haelften gleich aussehen */
	body.respo-partial-split .partial_table_position_table_cell {
		width: calc(100% - 1px);
	}
	/* Aktionszeile der Teilrechnung (erzeugt responsive.js). Im Original laufen
	   Abbrechen/Zahlen/Buchen ausschliesslich ueber die schmale
	   Quickfunction-Spalte - im geteilten Layout gehoeren sie sichtbar an die
	   Liste, auf die sie sich beziehen. */
	#respoPartialButtons {
		display: none;
	}
	body.respo-partial-split #respoPartialButtons {
		display: flex;
		gap: 6px;
		flex: 0 0 auto;
		padding: 6px;
		background-color: inherit;
	}
	body.respo-partial-split #respoPartialButtons .dialog_button {
		flex: 1 1 0;
		width: auto;
		margin: 0;
		float: none;
	}
	body.respo-partial-split .kassenskin_right_box .position_table {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		height: auto !important;
		min-height: 0;
	}
	body.respo-partial-split .kassenskin_right_box .position_table_content {
		flex: 1 1 auto;
		height: auto !important;
		min-height: 0;
	}
	/* Die Mengenabfrage beim Teilen ueber beide Listen legen */
	body.respo-partial-split #positionsUmbuchenPopup {
		position: fixed;
		top: 20%;
		z-index: 980;
	}

	/*******************************************
	 *** Checkout auf dem Handy: einspaltig
	 *******************************************/
	.checkout_button, .checkout_guest_button {
		width: calc(100% - 12px);
		max-width: 340px;
	}
	.checkout_okay_button {
		width: min(400px, calc(100% - 20px));
	}
	.checkout_summary_paymethod_description {
		width: 40%;
	}
	.checkout_summary_paymethod_value {
		width: 60%;
	}
	#checkout_summary_okay_button_div {
		position: static;
		margin: 25px 0 15px 0;
	}
	.checkout_part_payments {
		float: left;
		width: calc(100% - 20px);
		margin-top: 5px;
	}
	.checkout_dialog_header {
		font-size: 16px;
	}

	/*******************************************
	 *** Tischfunktionen auf dem Handy
	 *******************************************/
	#tablefunctions, #kellnerfunctions {
		width: calc(100% - 10px);
	}
	.tablefunction_button, .tablefunction_button_red,
	.tablefunction_cancellation_reasen_button {
		width: calc(100% - 10px);
		max-width: 335px;
	}
	/* Positionen umbuchen: Spalten uebereinander stapeln */
	.umbuchenPositions {
		width: 100%;
		max-width: none;
		height: 220px;
	}
	.umbuchenPositionsArrows {
		width: 100%;
		padding: 5px 0;
		text-align: center;
	}
	.umbuchenPositionsArrows > div {
		display: inline-block;
		float: none;
	}
	/* Retoure: Stornogrund-Checkbox in den Fluss holen */
	#retoureStep3Checkbox {
		position: static;
		margin: 10px 0 0 10px;
	}
	/* Grosse Eingabefelder kompakter (Inline height:100px/font-size:72px -> !important) */
	.inputFieldPanel350 {
		height: 70px !important;
		font-size: 48px !important;
	}
	.inputFieldSuffix {
		font-size: 32px;
	}

	/*******************************************
	 *** Numpad-Tasten etwas kompakter
	 *******************************************/
	.numpad_rahmen {
		max-width: 360px;
	}
	.numpad_number, .numpad_number_aktiv, .numpad_number_inactive {
		padding: 8px;
		font-size: 20px;
	}
	.numpad_ok, .numpad_ok_aktiv {
		padding: 10px;
		font-size: 20px;
	}
}

/****************************************************************************************
 *** Bedienelemente der Bottom-Sheets (von responsive.js erzeugt): die Fussleiste mit
 *** den Umschaltern fuer Bestelluebersicht und Numpad sowie der Hintergrund-Schleier.
 *** Nur auf Handys in der Kassenansicht sichtbar.
 ****************************************************************************************/
#respoSheetBar {
	display: none;
}
#respoSheetBackdrop {
	display: none;
}
#respoToastStack {
	display: none;
}
@media only screen and (max-width: 767px) {

	/* Fussleiste: liegt bei geschlossenen Sheets direkt ueber der Statuszeile und
	   wandert beim Oeffnen eines Sheets an dessen Oberkante (Position berechnet
	   responsive.js in --respo-bar-bottom). Sie bleibt dadurch immer erreichbar -
	   beide Sheets lassen sich unabhaengig voneinander oeffnen und schliessen. */
	body.respo-cashpoint-open #respoSheetBar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--respo-bar-bottom);
		height: var(--respo-bar-h);
		background-color: darkslategray;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.35);
		z-index: 960;
		transition: bottom 0.25s ease;
		-webkit-user-select: none;
		user-select: none;
	}
	#respoSheetBar .respoSheetButton {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(var(--respo-bar-h) - 10px);
		margin: 5px 3px;
		padding: 0 10px;
		border-top: 2px solid #9cf;
		border-left: 2px solid #9cf;
		border-right: 2px solid #369;
		border-bottom: 2px solid #369;
		background-image: linear-gradient(180deg, #8AB4D3, #4775A2);
		color: #fff;
		font-family: tahoma, arial, sans-serif;
		font-size: 14px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
	}
	#respoSheetBar #respoBonButton {
		flex: 1 1 auto;
		margin-left: 5px;
	}
	#respoSheetBar #respoNumpadButton {
		flex: 0 0 84px;
		margin-right: 5px;
	}
	/* Geoeffnetes Sheet: der zugehoerige Umschalter wird gedrueckt dargestellt */
	body.respo-bon-open #respoSheetBar #respoBonButton,
	body.respo-numpad-open #respoSheetBar #respoNumpadButton {
		border-top: 2px solid #369;
		border-left: 2px solid #369;
		border-right: 2px solid #9cf;
		border-bottom: 2px solid #9cf;
		background-image: linear-gradient(180deg, #4775A2, #8AB4D3);
	}
	/* Numpad-Umschalter nicht anzeigen, solange das Numpad gar nicht aktiv ist */
	body.respo-numpad-workbench #respoSheetBar #respoNumpadButton,
	body:not(.respo-numpad-visible) #respoSheetBar #respoNumpadButton {
		display: none;
	}

	/* Buchungs-Quittungen: Stapel direkt ueber der Fussleiste. Jede neu erfasste
	   Position bekommt eine eigene Zeile mit eigener Standzeit; neue Zeilen
	   kommen unten dazu, aeltere wandern nach oben und blenden zuerst aus.
	   Dadurch stehen zwei Buchungen desselben Artikels kurz untereinander -
	   eine versehentliche Doppelbuchung ist damit auf einen Blick erkennbar
	   (eine einzelne, ersetzte Quittung saehe bei beiden Faellen gleich aus).
	   Der Stapel ist unten verankert (bottom gesetzt, height: auto) und waechst
	   deshalb von selbst nach oben.
	   pointer-events: none ist zwingend, sonst schlucken die Quittungen Taps
	   auf die darunter liegenden Artikel-Buttons. */
	body.respo-cashpoint-open #respoToastStack {
		display: block;
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: calc(var(--respo-bar-bottom) + var(--respo-bar-h) + 8px);
		pointer-events: none;
		z-index: 970;
		transition: bottom 0.25s ease;
	}
	#respoToastStack .respoToastItem {
		margin-top: 4px;
		padding: 8px 12px;
		border-radius: 6px;
		background-color: rgba(47, 79, 79, 0.95);
		color: #fff;
		font-family: tahoma, arial, sans-serif;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	#respoToastStack .respoToastItem.respoToastItemVisible {
		opacity: 1;
		transform: none;
	}

	/* Halbtransparenter Schleier hinter der geoeffneten Bestelluebersicht.
	   Beim Numpad bewusst NICHT: dort werden Menge/Suchbegriff eingetippt und
	   danach ein Artikel angetippt - die Artikelflaeche muss bedienbar bleiben. */
	body.respo-cashpoint-open.respo-bon-open #respoSheetBackdrop {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		background: rgba(0, 0, 0, 0.35);
		z-index: 920;
	}
}