body.frontend { 
	font-size:1em;
	font-family: Arial, Helvetica, sans-serif;
	-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; 
	-webkit-touch-callout: none; -webkit-text-size-adjust: none;
}
body.frontend div#breadcrumb, body.frontend div.th, body.frontend div#legals, body.frontend div#poweredby, body.frontend div.price { 
	-webkit-hyphens: none; -ms-hyphens: none; hyphens: none;
}
body.frontend #main { max-width:700px; margin-left:auto; margin-right:auto; background-color:white; margin-bottom:50px }
body.frontend div#logo, body.frontend div#seating { width:100%; margin-left:auto; margin-right:auto; max-width:900px; margin-bottom:20px; }
body.frontend div#logo img, body.frontend div#seating img { width:100% }

/* ---------- Breite im Shop ----------
   Der Warenkorb ist 900px breit: Kopf, Inhalt und Fusszeile gemeinsam, es gibt
   also keine zweite Begrenzung darunter. body.Basket kommt aus dem Controller
   (frontend.html:117), die Regeln greifen deshalb nur im Shop.

   Die beiden Saalplaene duerfen darueber hinauswachsen, hoechstens bis 1050px.
   Beide bekommen schlicht die 1050: keiner von ihnen hat eine eigene Breite,
   nach der sich der Rahmen richten koennte. Der SVG-Plan skaliert auf das, was
   er bekommt, und der tabellarische rollt seit dem Umbau auf das Gitter in
   seinem eigenen Rahmen (.sm-scroll in event-fe.html).

   Ein width:fit-content stand hier zwischendurch, damit der Rahmen mit der
   Zahl der Spalten waechst. Das ging nicht auf: fit-content misst die
   natuerliche Breite des Inhalts, und die bestimmt die Tabelle. Der
   Rollrahmen kam nie zum Zug, stattdessen schob ein grosser Saal die ganze
   Seite nach rechts hinaus.

   Die Klassen svgplan und tableplan setzen die beiden Vorlagen ueber
   #{set bodyclass:… /}; beide laufen unter derselben Action (Basket.event)
   und waeren sonst nicht zu unterscheiden. */
body.Basket #main { max-width:900px }

body.Basket.svgplan #main,
body.Basket.tableplan #main { max-width:1050px }

/* Auf den Saalplanseiten duerfen Logo und Bestuhlungsblock die volle Breite
   nutzen; sonst blieben sie bei den 900px aus Zeile 12 und die Beschreibung
   ueber dem Plan waere gegenueber Ueberschrift und Plan eingerueckt. Das Bild
   der Bestuhlung behaelt seine bisherige Breite. */
body.Basket.svgplan div#logo,
body.Basket.tableplan div#logo,
body.Basket.svgplan div#seating,
body.Basket.tableplan div#seating { max-width:none }

body.Basket.svgplan div#seating #seating-img,
body.Basket.tableplan div#seating #seating-img { max-width:900px }

p.error {
	background: #f44336;
	color:#fff!important;
	font-size:1em;
	padding:10px;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}

#footer { font-size:0.9em }
#footer a { text-decoration:none }
#footer a:hover { text-decoration:underline } 
#footer #poweredby { opacity: 0.6; white-space: nowrap;} 



.Frontend.events #main { padding-top:12px }
.Frontend.events .th { padding: 8px 2px}
.Frontend.events .day{ width:50px }
.Frontend.events .thumbnail{width:25vw; max-width:150px;}
.Frontend.events .date { width:110px }
.Frontend.events .datethumb { width:14vw; max-width:110px }
.Frontend.events .time { width:70px }
.Frontend.events .buy { width:90px }
.Frontend.events .event.nothumb { border-top: 1px solid silver }


body.Frontend.events div.w3-row.event div.w3-col.thumb,
body.Frontend.events div.w3-row.event div.w3-rest.thumb,
body.Frontend.events div.w3-row.event div.w3-cell.thumb { height:150px; vertical-align:middle  } 
body.Frontend.events .thumbnail img {max-width:110px}
body.Frontend.events .eventTitle thumb {padding-right: 15px;}

body.Frontend.events div.w3-row.event.thumb:not(.first) {border-top:solid 1px silver}
body.Frontend.events .w3-row.thumb {margin-bottom: 10px}



.Frontend.events .w3-col, 
.Frontend.events .w3-rest { padding:4px; }
.Frontend.events .mobile { display:none }
.Frontend.events .buy button { cursor:pointer; /*font-size:0.9em;*/ }
.Frontend.events i.cart-icon { cursor:pointer; font-size:1.5em; }
.Frontend.events i.cart-icon.buy { color:green }
.Frontend.events i.cart-icon.sold { color:red }
.Frontend.events a { text-decoration:none; }
.Frontend.events #pagination { margin-top:26px; }
.Frontend.events #pagination a { display:block; padding:10px 16px; margin:10px; border:1px solid silver}
.Frontend.events #pagination a:hover { font-weight:bold; }
.Frontend.events #pagination a.active { background-color: silver }
.Frontend.events .event .subtitle {font-style: italic}

.event table#seating-mobile:not(.sm-grid) img {margin-bottom:0!important;}

.Frontend.workshops .date { width:110px }
.Frontend.workshops .dates { width:80px }
.workshops button {hyphens: none!important;}


/* ---------- Auswahlfelder auf Höhe der Textfelder ----------
   w3.css gibt .w3-input ein padding von 8px rundum, .w3-select aber nur
   9px oben und unten und keines an den Seiten. Zusätzlich zeichnet das
   Betriebssystem ein unverändertes <select> in eigener Höhe - auf macOS
   deutlich flacher als ein Textfeld. Deshalb appearance:none und dieselben
   Maße wie beim Textfeld; den Pfeil liefern wir dann selbst.
   Rechts mehr Polster, damit der Text nicht unter dem Pfeil liegt. */
body.frontend select.w3-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 30px 8px 12px;
	font: inherit;
	line-height: 1.4;
	color: inherit;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 6px;
}

/* Ein deaktiviertes Feld soll nicht nach Knopf aussehen. */
body.frontend select.w3-select[disabled] { background-image: none; color: #777 }

button.tktbtn { padding:4px!important; min-width:60px }
#calendar div.event-info { }

div.w3-modal-content header { background-color: #dedddd }
div.category div.items:last-child, 
div.event-addons div.items div.w3-row:last-child ,
div.category div.l10px:last-child
{margin-bottom:6px}
body.Basket.payment div.ticket:first-child, body.Basket.customer div.ticket:first-child  {margin-top:0px;}

.StripeElement, div.stripe { background-color:white }

/*SVG-Saalplan*/
.remote{
	display:flex;
	flex-direction:column;
	width:40px;
	position:absolute;
	z-index:1;
	}
.remote img {box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 1px;
	cursor:pointer;
	}
.remote img:first-child{margin:5px 0}
	

.Frontend.events span.eventTitle {font-size:1.7em;/*font-weight: bold;*/}

/*tabelariascher Saalplan*/
 body.event table#seating-mobile:not(.sm-grid) tbody td  {
			text-align: center!important;
			vertical-align: middle!important	
		}
		
/*tabelarischer Saalplan bei großen Displays*/
@media screen and (min-width: 431px) {	
table#seating-mobile:not(.sm-grid) tbody td {width:30px!important;height:30px!important;min-width:18px; min-height:18px}
table#seating-mobile:not(.sm-grid) tbody td img {width:70%!important;;max-width:24px}
}
			
/*tabelarischer Saalplan bei kleinen Displays*/
@media screen and (max-width: 430px) {
	table#seating-mobile:not(.sm-grid) tbody td {width:20px!important;height:20px!important; min-width:18px; min-height:18px}
	}
	
@media screen and (max-width: 600px) {
	
	/* #breadcrumb div:not(.active){display:none} */
	.Frontend.events .day { display:none }
	.Frontend.events .thumbnail{width:21vw; max-width:130px;}
	.Frontend.events .date.thumb {width: 12vw; min-width:55px}
	.Frontend.events .date {width:110px}
	.Frontend.events .time { display:none }
	.Frontend.events .desktop { display:none }
	.Frontend.events .mobile { display:block }	
	.Frontend.events .dd { display:block; font-size: 2.4em; margin-top:-8px; margin-right:-6px }
	.Frontend.events .dd.thumb {font-size: 2.0em;}
	
	.Frontend.events .mY div:nth-child(1) { font-size: 1.0em }
	.Frontend.events .mY div:nth-child(2) { font-size: 0.8em; margin-top:-2px }
	.Frontend.events i.cart-icon { font-size:2.4em; }
	
	.frontend.payment div.shipment { margin-bottom: 18px}
	
	#breadcrumb div { text-align:left }

	button.tktbtn{padding:8px!important}
	div.formbuttons input[type=button]:not(:first-child){margin-top:5px}
	div.shipment:not(:first-child){margin-top:12px}

	div.category div.w3-half:nth-child(2) div.th {background-color:transparent!important;border-top:1px solid silver;color:black }
	div.voucherprice {position: relative;top:-25px;}
	
	.sidebar {max-width:100%!important}

	.thumbnail img {width:19vw}

.Frontend.events span.eventTitle {font-size:1.1em;font-weight:bold}		
}

@media screen and (max-width: 430px) {
	.Frontend.events span.eventTitle {font-weight:bold}	
	/*body.Frontend.events div.w3-row.event div.w3-rest {font-size:80%}}*/
}

/*
@media screen and (max-width: 350px)
#seatin-img img {
width: 8vw;
}
*/

@media screen and (max-width: 350px) {
	* {font-size: 4.2vw;}
	.Frontend.events .date.thumb {width: 14vw; min-width:15px}
	.Frontend.events .date {width: 21vw;}
	.Frontend.events .dd {font-size: 5.4vw;margin-top: 0px;margin-right:6px}
	.Frontend.events .buy {width: 22vw;text-align: right;}
	h3 {font-size: 18px;}
	h2 {font-size: 25px;}
	body.frontend.events h2 {font-size: 20px;}
	.Frontend.events #pagination a {padding: 5px 9px;}
	button.tktbtn {padding: 1vw !important;}
	.hide-smaller{display:none}
	body.Shop.payment .input, body.Shop.customer .input, body.Shop.order .input   { width: 20px;}
	/*img {width:8vw}*/
}

td:hover div.infobox{ display:block; }
div.infobox{
	display:none;
	position:absolute;
	background-color:white;
	border:solid 2px grey;
	padding:5px;
	margin-top:-55px;
	margin-left:45px;
	font-size:8pt;
	text-align:left;
	z-index:199;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

body.frontend i.green { color:green; border:0px }
body.frontend i.red { color:red; border:0px }

/*Checkbox + Radiobox Stylen*/

/* Customize the label (the container) */
.container, .blockcontainer {
  position: relative;
  padding:0 15px 0 20px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.blockcontainer {
	display: block;
}

/* Hide the browser's default checkbox */
.container input:not(.visible), .blockcontainer input:not(.visible) {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #fff;
  border:solid 1px silver;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark, .blockcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark, .blockcontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after, .blockcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after, .blockcontainer .checkmark:after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Create a custom radio button */
.radiocheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .radiocheckmark, .blockcontainer:hover input ~ .radiocheckmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .radiocheckmark, .blockcontainer input:checked ~ .radiocheckmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiocheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .radiocheckmark:after, .blockcontainer input:checked ~ .radiocheckmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .radiocheckmark:after, .blockcontainer .radiocheckmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Die Regeln zum tabellarischen Saalplan oben gelten seit dem 13.10.2026 nur
   noch fuer Plaene ohne .sm-grid: feste Zellenmasse mit !important und
   font-size:0 wuerden das Gitter aus seatmap.css zerlegen. Die mobile Fassung
   nutzt jetzt dieses Gitter, deshalb der :not(.sm-grid)-Vorbehalt. */