/* ==========================================================================
   pretix-Widget im Seitendesign
   --------------------------------------------------------------------------
   Das Widget bringt sein eigenes Stylesheet mit (Bootstrap-Erbe: Lila,
   runde Ecken, 14px-Systembuttons). Hier wird es auf die Gestaltung der
   Seite gezogen: Jost/Poppins, Anthrazit #242434, eckige Kanten, und die
   Schaltflaechen tragen dieselbe Farbe wie die Buttons der Seite - gefuellt
   im Markenrot #e83338, im Hover auf Kupfer #bd9576 umlaufend.

   Zwei Punkte zur Robustheit:

   1. Jede Regel hat eine Klasse mehr als die pretix-Regel, die sie
      ueberschreibt. Das ist hier nicht Kosmetik, sondern noetig: Das
      eigentliche Widget-Stylesheet (Handle pretix-widget-frontend, aus
      wp-content/uploads/pretix-widget/cache/) wird NACH dieser Datei
      geladen. Bei gleicher Spezifitaet gewinnt also pretix, nicht wir.
      Achtung bei der Terminliste - dort arbeitet pretix selbst mit vier
      Klassen (.pretix-widget.pretix-widget-mobile .…-entry .…-entry-date),
      weshalb die Regeln dafuer zusaetzlich ein body davor tragen.
   2. Was das Widget im Overlay laedt (Warenkorb, Kasse), liegt in einem
      iframe auf pretix.eu und ist von hier aus nicht erreichbar. Das wird
      im pretix-Backend unter Einstellungen > Shop-Design gesetzt.
   ========================================================================== */

/* Die pretix-Farben stehen im Plugin-Stylesheet auf :root. Sie hier auf
   body zu setzen statt auf :root ist Absicht: body liegt in der Vererbungs-
   kette naeher am Widget und gewinnt damit unabhaengig davon, welches
   Stylesheet zuerst geladen wird.

   Die Skala steht auf dem Markenrot #e83338 - dieselbe Umstellung wie in
   css/pretix-shop-backend.css, damit Widget und Shop dieselbe Primaerfarbe
   haben (sichtbar etwa an Fokusrahmen). Bis zum 2026-09-21 stand hier
   #242434; damals war das Rot den Schaltflaechen vorbehalten.

   Das Widget-Stylesheet nutzt acht Toene dieser Gruppe. Die drei unteren
   waren bisher nicht ueberschrieben und standen deshalb weiter auf pretix'
   Violett - zu sehen erst, wenn ein Termin den Zustand "nicht verfuegbar"
   annimmt. Weil das derzeit auf keinen Termin zutrifft, ist es niemandem
   aufgefallen.

   Die beiden unteren Toene faerben allerdings nichts mehr: Der Zustand, an
   dem sie haengen, bekommt weiter unten ein neutrales Grau (Abschnitt
   "Verfuegbarkeits-Kennzeichnung"). Sie stehen hier nur noch, damit die
   Gruppe vollstaendig ist und kein Violett zurueckkommt, falls pretix sie
   spaeter an anderer Stelle einsetzt. */
body {
	--pretix-brand-primary: #e83338;
	--pretix-brand-primary-darken-5: #e83338;   /* Rahmen Grundzustand */
	--pretix-brand-primary-darken-10: #bd9576;  /* Buttonflaeche im Hover */
	--pretix-brand-primary-darken-15: #bd9576;  /* Links im Hover */
	--pretix-brand-primary-darken-17: #bd9576;  /* Buttonrahmen im Hover */
	--pretix-brand-primary-darken-30: #750d10;  /* Rahmen im Fokus; ohne
	                                               Wirkung, solange die
	                                               Buttonregel border: 0
	                                               setzt */
	--pretix-brand-primary-tint-90: #fdebeb;    /* Flaeche "nicht verfuegbar" */
	--pretix-brand-primary-shade-42: #871e20;   /* Schrift "nicht verfuegbar" */

	--pretix-border-radius-base: 0;
	--pretix-border-radius-large: 0;
	--pretix-border-radius-small: 0;

	/* Tokens der Seite, aus Theme und Customizer uebernommen. */
	--pp-ink: #101020;
	--pp-ink-soft: #3a3a3b;
	--pp-ink-muted: #82828a;
	--pp-button: #242434;          /* nur noch neutrale Bedienelemente */
	--pp-accent: #bd9576;
	--pp-line: rgba(16, 16, 32, .12);
	--pp-line-warm: rgba(189, 149, 118, .45);
	--pp-tint-warm: rgba(189, 149, 118, .08);
	--pp-tint-neutral: rgba(16, 16, 32, .06);  /* Zustand ohne Signal */

	/* Masse der Buttons der Seite (.wp-block-button__link), abgemessen an
	   "Ticket sichern" im Hero und "Auf der Karte zeigen": Jost 13.6px,
	   Zeilenhoehe 29.75px, 7px/38px Innenabstand, kein Rahmen - zusammen
	   44px hoch.

	   Die Fuellfarbe ist --pp-brand. Sie steht in style.css auf :root und
	   wird von dort geerbt; hier wiederholt wuerde sie an zwei Stellen
	   gepflegt und liefe mit der Zeit auseinander. Deshalb bindet
	   functions.php diese Datei mit 'child-style' als Abhaengigkeit ein -
	   ohne style.css gaebe es die Farbe nicht. */
	--pp-button-font-size: 13.6px;
	--pp-button-line-height: 29.75px;
	--pp-button-padding: 7px 38px;

	/* Dauer der Farbwechsel, wie auf der uebrigen Seite (style.css). */
	--pp-button-transition: var(--pp-hover-duration, .25s) ease-in-out;
	}

/* --------------------------------------------------------------------------
   Rahmen und Grundtypografie
   -------------------------------------------------------------------------- */

/* Ohne Rahmen und ohne Innenabstand: Der Inhalt steht damit auf denselben
   Kanten wie Ueberschrift und Adresse darueber, statt in einem eigenen
   Kasten zu sitzen. 148px min-height reichen dem Ladespinner (128px), damit
   die Seite beim Nachladen des Widgets nicht springt. */
.pretix-widget-wrapper .pretix-widget {
	margin: 24px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	min-height: 148px;
	color: var(--pp-ink-soft);
	font-size: 16px;
	line-height: 1.6;
	}

.pretix-widget-wrapper .pretix-widget a {
	color: var(--pp-ink);
	text-decoration: none;
	}

.pretix-widget-wrapper .pretix-widget a:hover,
.pretix-widget-wrapper .pretix-widget a:focus {
	color: var(--pp-accent);
	text-decoration: none;
	}

/* pretix rueckt Spalten und Texte um zusaetzliche 15px ein. Die faellt weg,
   damit Trennlinien, Ueberschriften und Artikelzeilen auf einer Kante stehen -
   derselben, auf der auch die Ueberschrift der Spalte steht. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-info-col,
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-price-col,
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-availability-col,
.pretix-widget-wrapper .pretix-widget .pretix-widget-category-description,
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-description,
.pretix-widget-wrapper .pretix-widget .pretix-widget-voucher-text,
.pretix-widget-wrapper .pretix-widget .pretix-widget-voucher-input-wrap,
.pretix-widget-wrapper .pretix-widget .pretix-widget-voucher-button-wrap,
.pretix-widget-wrapper .pretix-widget h3 {
	padding-left: 0;
	padding-right: 0;
	}

/* --------------------------------------------------------------------------
   Terminliste
   -------------------------------------------------------------------------- */

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list {
	padding: 0;
	}

/* pretix stellt Name, Datum und Button in eine Flex-Zeile nebeneinander.
   display: block loest die Zeile auf - die drei Angaben stapeln sich dann in
   der Reihenfolge, in der sie im Markup stehen. Zentriert wie Ueberschrift
   und Adresse darueber. */
body .pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry {
	display: block;
	padding: 10px 0 24px;
	border-top: 1px solid var(--pp-line);
	color: var(--pp-ink-soft);
	text-align: center;
	transition: background-color .2s;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry:first-of-type {
	border-top: 0;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry:hover,
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry:active,
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry:focus {
	background: var(--pp-tint-warm);
	}

/* Der Produktname traegt jetzt die Schrift der h2 der Seite: Poppins,
   2.618rem (dieselbe Stufe wie "Sei dabei!" darueber), halbfett. Damit er
   wirklich wie eine Ueberschrift liest, fallen Versalien und Sperrung weg -
   die h2 der Seite hat beides auch nicht.

   width: auto ist noetig, weil das Widget zwei Betriebsarten hat: In der
   schmalen (Klasse pretix-widget-mobile) laufen die Spalten ohnehin ueber die
   volle Breite, in der breiten gibt pretix dem Namen feste 50%. Ohne die
   Ruecknahme zentriert sich der Name dann in der linken Haelfte statt im
   Widget - und weil die Klasse je nach Platz kommt und geht, faellt das erst
   in bestimmten Breiten auf. */
body .pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-name {
	display: block;
	width: auto;
	padding: 0;
	text-align: center;
	color: var(--pp-ink);
	font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 2.618rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	}

/* Das Datum bekommt die Schrift des Fliesstextes der Seite ("Frankfurter
   Str. 1, Altstadt, ..."): Jost in 1rem, normal, Zeilenhoehe 1.75. Die Farbe
   steht explizit da, damit das Datum beim Hover nicht die Linkfarbe des
   umgebenden a-Elements uebernimmt - hervorgehoben wird nur der Titel. */
body .pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-date {
	display: block;
	width: auto;
	margin-top: 10px;
	padding: 0;
	text-align: center;
	color: var(--pp-ink-soft);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry:hover .pretix-widget-event-list-entry-name,
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry:focus .pretix-widget-event-list-entry-name {
	color: var(--pp-accent);
	}

/* pretix gibt der Aktionsspalte feste 50% und schiebt sie mit margin-left:auto
   nach rechts. Beides weg, damit der Button unter dem Datum steht und mittig
   sitzt. */
body .pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability {
	display: block;
	width: auto;
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
	}

/* --------------------------------------------------------------------------
   Verfuegbarkeits-Kennzeichnung
   --------------------------------------------------------------------------
   Die Zustaende bleiben unterscheidbar: gruen (buchbar) bekommt das Aussehen
   der Seitenbuttons, orange (wenige Plaetze) und rot (ausgebucht) behalten
   ihre Signalfarben und werden nur in Form und Schrift angeglichen.

   "Ausgebucht" ist bei pretix ein rot getoentes Label und liegt damit nahe
   am Markenrot der gefuellten Buttons. Verwechselt wird beides trotzdem
   nicht: Das Label bleibt blass hinterlegt mit dunkelroter Schrift, der
   Button ist flaechig rot mit weisser Schrift.
   -------------------------------------------------------------------------- */

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability span {
	display: inline-block;
	max-width: 100%;
	padding: var(--pp-button-padding);
	border-width: 0;
	border-radius: 0;
	font-size: var(--pp-button-font-size);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: var(--pp-button-line-height);
	text-transform: uppercase;
	transition: var(--pp-button-transition);
	}

/* Der farbige Balken am linken Rand des Labels ist pretix-Optik und faellt weg. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability span:before {
	display: none;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-availability-green {
	--status-bg-color: var(--pp-brand);
	--status-text-color: #fff;
	--status-border-color: var(--pp-brand);
	}

/* Wie bei den Buttons der Seite: im Hover laeuft die Flaeche auf Kupfer um.
   Die Schrift bleibt weiss, es wechselt also nur die Flaeche. Der ganze
   Termineintrag ist der Link - der Wechsel passiert daher, sobald die Maus
   irgendwo auf dem Eintrag steht, nicht erst ueber dem Button. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-availability-green:hover,
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-availability-green:focus {
	--status-bg-color: var(--pp-accent);
	--status-text-color: #fff;
	--status-border-color: var(--pp-accent);
	}

/* Der vierte Zustand neben gruen, orange und rot: pretix vergibt ihn, wenn
   zu einem Termin keine Verfuegbarkeitsfarbe gemeldet wird (in der Antwort
   des Widgets steht dann availability.color: "none"). Bei pretix ist er in
   der Primaerfarbe gehalten - frueher Violett und damit von "Ausgebucht"
   gut zu unterscheiden, seit der Umstellung oben aber ein Rot, das neben
   dem roten "Ausgebucht" nicht mehr als eigener Zustand zu lesen waere.

   Er bekommt deshalb ein neutrales Grau. Das passt auch besser zur Sache:
   Gruen, Orange und Rot sind Aussagen ueber die Verfuegbarkeit, dieser
   Zustand ist das Fehlen einer Aussage - und Grau ist die einzige Farbe
   hier, die nichts behauptet.

   Die Schrift steht in --pp-ink-soft statt in --pp-ink-muted: Das Label ist
   12px in gesperrten Versalien, und Muted haette auf der grauen Flaeche nur
   rund 3,4:1 erreicht. So sind es rund 10:1. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-availability-none,
.pretix-widget-wrapper .pretix-widget .pretix-widget-day-availability-none {
	--status-bg-color: var(--pp-tint-neutral);
	--status-text-color: var(--pp-ink-soft);
	--status-border-color: var(--pp-line);
	}

/* --------------------------------------------------------------------------
   Shop-Ansicht (nach Klick auf einen Termin)
   -------------------------------------------------------------------------- */

/* Titel und Datum sind dieselbe Angabe wie im Termineintrag davor - nur eine
   Ebene tiefer. Sie bekommen deshalb dieselbe Schrift: Poppins in gemischter
   Schreibweise fuer den Titel, Jost fuer das Datum. Vorher stand der Titel
   hier in gesperrten Versalien und einer Stufe, die kleiner war als die
   Artikelueberschrift darunter - beim Aufklappen wechselte der Titel damit
   Groesse, Schnitt und Schreibweise auf einmal.

   Eine Stufe kleiner als in der Liste (1.931rem statt 2.618rem): Dort ist der
   Titel das einzige, worauf man klicken kann, hier steht er ueber einer
   Auswahl und soll ihr nicht die Aufmerksamkeit nehmen. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-header strong {
	display: block;
	padding: 0;
	color: var(--pp-ink);
	font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.931rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-details {
	padding-top: 10px;
	color: var(--pp-ink-soft);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.75;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-form > form {
	margin-top: 22px;
	border-top: 1px solid var(--pp-line);
	}

/* Der Hinweis auf einen bereits angelegten Warenkorb ("Sie haben einen
   aktiven Warenkorb fuer diese Veranstaltung ..."). pretix stellt ihn in
   sein Info-Blau: 2px Rahmen in #5f9cd4, Text in #2b69a2. Beides kommt aus
   der Variablengruppe --pretix-brand-info, die neben --pretix-brand-primary
   steht und von der Umstellung ganz oben deshalb unberuehrt bleibt.

   Rahmen und Farbe fallen hier weg, statt die Variablen umzubiegen: Der
   Hinweis ist weder Fehler noch Warnung, sondern eine Nebenbemerkung, und
   der Kasten steht ohnehin schon unter der Linie des Formulars. Der Text
   bekommt damit die Farbe des Fliesstextes, die Aufmerksamkeit traegt der
   rote Button "Kauf fortsetzen" rechts daneben.

   Ohne Rahmen und Innenabstand beginnt der Text auf der Kante der
   Artikelzeilen darunter - vorher stand er 12px eingerueckt. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-info-message {
	margin: 16px 0;
	padding: 0;
	border: 0;
	color: var(--pp-ink-soft);
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-row {
	padding: 18px 0;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-title {
	color: var(--pp-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-meta,
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-description {
	margin-top: 4px;
	color: var(--pp-ink-muted);
	font-size: 14px;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-price-col {
	color: var(--pp-ink);
	font-size: 16px;
	}

.pretix-widget-wrapper .pretix-widget h3 {
	color: var(--pp-ink);
	font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-category-name {
	color: var(--pp-ink);
	font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	}

/* Die einzige Kategorie des Shops heisst "VivArt Events" - genauso wie der
   Veranstalter, dessen Name im Kopf des Widgets schon steht. Eine
   Ueberschrift, die nur einen einzigen Abschnitt ueberschreibt und dabei
   nichts Neues sagt, faellt weg.

   Der Selektor nimmt sie nur zurueck, solange es bei einer Kategorie bleibt:
   :has() prueft, ob auf eine .pretix-widget-category eine zweite folgt.
   Kommt spaeter eine hinzu ("Getraenke", "Workshops"), tragen beide ihren
   Namen wieder - dann trennen die Ueberschriften tatsaechlich etwas, und die
   Regel darueber gestaltet sie. Browser ohne :has() verwerfen den Selektor
   und zeigen den Namen; das ist der Zustand von vorher. */
.pretix-widget-wrapper .pretix-widget:not(:has(.pretix-widget-category ~ .pretix-widget-category)) .pretix-widget-category-name {
	display: none;
	}

/* Der Abschnitt oben nimmt allen Spalten der Artikelzeile die 15px
   Innenabstand, mit denen pretix arbeitet. Fuer Preis- und Mengenspalte war
   das zu viel des Guten: Der Preis ist rechtsbuendig, die Mengenwahl steht
   direkt daneben - ohne Innenabstand stossen beide ohne eine Luecke
   aneinander ("EUR 50,00" klebte am Minus-Knopf). Der Preis bekommt den
   Abstand deshalb zurueck, aber nur nach rechts: Links bleibt die Spalte auf
   der Kante der uebrigen Zeilen. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-price-col {
	padding-right: 24px;
	}

/* Unterhalb von 800px Breite stellt pretix die Artikelzeile um - das Widget
   misst sich selbst per ResizeObserver und setzt dann .pretix-widget-mobile,
   es geht also um die Breite des Widgets, nicht die des Fensters. Titel und
   Verfuegbarkeit nehmen dann die volle Breite, Preis und Mengenwahl ruecken
   darunter in je eine Haelfte.

   Dabei entsteht der Versatz: Der Preis behaelt seine Rechtsbuendigkeit und
   steht damit am rechten Rand seiner Haelfte, also mitten im Widget, mit
   einer grossen Luecke zur Mengenwahl daneben. Und weil die Preiszeile 26px
   hoch ist, die Mengenwahl aber 46px, und beide mit der Oberkante
   aneinandersitzen, liegt der Preis ausserdem rund 10px zu hoch.

   Deshalb hier: Der Preis rueckt an die linke Kante, also unter den Titel
   und auf die Kante der uebrigen Zeilen; den Abstand nach rechts braucht er
   dort nicht mehr. Beide Spalten bekommen die Hoehe der Mengenwahl und
   zentrieren ihren Inhalt darin - Preis und Mengenwahl stehen damit auf
   einer Mittellinie, an den beiden Enden der Zeile.

   justify-content: center haelt die Mitte fuer die Faelle ohne Mengenwahl
   ("Ausverkauft", "Nicht mehr verfuegbar"), in denen pretix den Text
   zentriert. Die Mengenwahl selbst bleibt davon unberuehrt: Ihr
   margin-left: auto (siehe weiter unten) zieht sie weiterhin nach rechts. */
.pretix-widget-wrapper .pretix-widget.pretix-widget-mobile .pretix-widget-item-price-col,
.pretix-widget-wrapper .pretix-widget.pretix-widget-mobile .pretix-widget-item-availability-col {
	display: flex;
	align-items: center;
	min-height: 46px;  /* Hoehe der Mengenwahl, siehe weiter unten */
	}

.pretix-widget-wrapper .pretix-widget.pretix-widget-mobile .pretix-widget-item-price-col {
	padding-right: 0;
	text-align: left;
	}

.pretix-widget-wrapper .pretix-widget.pretix-widget-mobile .pretix-widget-item-availability-col {
	justify-content: center;
	}

/* Die 5px, mit denen pretix die beiden Zeilen trennt, sind unter der nun
   46px hohen Preiszeile zu knapp - die Zeile haengt sonst am Text darueber. */
.pretix-widget-wrapper .pretix-widget.pretix-widget-mobile .pretix-widget-item-info-col {
	margin-bottom: 10px;
	}

/* --------------------------------------------------------------------------
   Buttons, Mengenwahl und Eingabefelder
   -------------------------------------------------------------------------- */

/* Hauptbutton ("Anmelden" / "In den Warenkorb") exakt wie die Buttons der
   Seite: flaechig im Markenrot, weisse Versalien, kein Rahmen - und im Hover
   laeuft die Flaeche auf Kupfer um. */
.pretix-widget-wrapper .pretix-widget button,
.pretix-widget-wrapper .pretix-widget input[type="button"],
.pretix-widget-wrapper .pretix-widget a.pretix-widget-button {
	padding: var(--pp-button-padding);
	border: 0;
	border-radius: 0;
	background-color: var(--pp-brand);
	color: #fff;
	font-family: inherit;
	font-size: var(--pp-button-font-size);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: var(--pp-button-line-height);
	text-transform: uppercase;
	transition: var(--pp-button-transition);
	}

.pretix-widget-wrapper .pretix-widget button:hover,
.pretix-widget-wrapper .pretix-widget input[type="button"]:hover,
.pretix-widget-wrapper .pretix-widget a.pretix-widget-button:hover,
.pretix-widget-wrapper .pretix-widget button:focus,
.pretix-widget-wrapper .pretix-widget input[type="button"]:focus,
.pretix-widget-wrapper .pretix-widget a.pretix-widget-button:focus {
	background-color: var(--pp-accent);
	color: #fff;
	}

/* pretix stellt den Absendebutton in eine Spalte von 25% Breite, die es mit
   margin-left: 75% nach rechts schiebt, und zieht den Button darin auf die
   volle Breite. In der Schmalansicht wird daraus die volle Widget-Breite -
   der Button ist dann so breit wie der Inhalt darueber und liest sich nicht
   mehr als Button, sondern als Balken.

   Hier bekommt die Zeile die volle Breite und der Button seine natuerliche:
   so breit wie seine Beschriftung plus Innenabstand, mittig unter den
   Artikeln - dieselbe Mitte, auf der auch Titel und Datum darueber stehen.
   Die Breitenangabe braucht das zusaetzliche body, weil pretix hier mit
   zwei Klassen arbeitet und die Regel sonst nur gleich stark waere. */
body .pretix-widget-wrapper .pretix-widget .pretix-widget-action {
	width: 100%;
	margin: 10px 0 20px;
	padding: 0;
	text-align: center;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-action button {
	width: auto;
	max-width: 100%;
	}

/* Plus und Minus der Mengenwahl bleiben neutral - sie sind Bedienelemente
   des Feldes daneben und sollen dem Hauptbutton nicht die Aufmerksamkeit
   nehmen. */
.pretix-widget-wrapper .pretix-widget button.pretix-widget-btn-default,
.pretix-widget-wrapper .pretix-widget input[type="button"].pretix-widget-btn-default {
	border: 1px solid var(--pp-line);
	background-color: #fff;
	color: var(--pp-ink);
	font-size: 16px;
	letter-spacing: 0;
	}

/* :focus steht mit dabei, damit ein angeklicktes Plus oder Minus nicht die
   Farbe der Hauptbuttons annimmt - die Regel weiter oben faerbt jeden
   fokussierten Button im Widget kupfern, und ohne diese Zeile bliebe der
   Knopf nach dem Klick kupfern stehen. */
.pretix-widget-wrapper .pretix-widget button.pretix-widget-btn-default:hover,
.pretix-widget-wrapper .pretix-widget button.pretix-widget-btn-default:focus,
.pretix-widget-wrapper .pretix-widget input[type="button"].pretix-widget-btn-default:hover,
.pretix-widget-wrapper .pretix-widget input[type="button"].pretix-widget-btn-default:focus {
	border-color: var(--pp-button);
	background-color: var(--pp-button);
	color: #fff;
	}

/* pretix gibt der Mengenwahl die ganze Breite ihrer Spalte - ein Viertel der
   Widget-Breite, in der Schmalansicht die Haelfte. Fuer eine einstellige Zahl
   ist das ein sehr grosses Feld, und die Gruppe wirkt dadurch wie das
   Hauptelement der Zeile.

   Sie wird deshalb nur so breit wie noetig (fit-content) und rueckt mit
   margin-left: auto an den rechten Rand - auf dieselbe Kante wie der Preis
   darueber. max-width haelt sie in sehr schmalen Spalten im Rahmen. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-group {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	}

/* Alle drei Felder gleich hoch. box-sizing ist noetig, weil die Hoehe sonst
   je nach Element unterschiedlich mit Innenabstand und Rahmen verrechnet
   wird - der Knopf waere dann ein bis zwei Pixel hoeher als das Feld. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-group button,
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-group input {
	height: 46px;
	min-height: 46px;
	box-sizing: border-box;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-dec,
.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-inc {
	width: 46px;
	padding: 0;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-multiple {
	width: 64px;
	}

.pretix-widget-wrapper .pretix-widget input[type="text"],
.pretix-widget-wrapper .pretix-widget input[type="number"],
.pretix-widget-wrapper .pretix-widget select {
	min-height: 46px;
	border: 1px solid var(--pp-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--pp-ink);
	font-family: inherit;
	font-size: 15px;
	letter-spacing: .5px;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-item-count-group button {
	min-height: 46px;
	}

/* --------------------------------------------------------------------------
   Zurueck-Link und pretix-Hinweis
   -------------------------------------------------------------------------- */

.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-back,
.pretix-widget-wrapper .pretix-widget .pretix-widget-back {
	padding-bottom: 14px;
	text-align: left;
	}

/* "Anderen Termin auswaehlen" ist das einzige Bedienelement ueber dem
   Titel und war in Grau und 12px kaum als Weg zurueck zu erkennen. Es
   bekommt deshalb die Tonlage der Artikeltitel: Anthrazit, halbfett, eine
   Stufe groesser. Die gesperrten Versalien bleiben - so liest es sich wie
   die uebrigen kleinen Navigationszeilen der Seite und nicht wie eine
   zweite Ueberschrift.

   inline-block nimmt pretix' display: block zurueck: Als Block laege der
   Klickbereich ueber die volle Breite des Widgets, obwohl nur die knapp
   30 Zeichen Text danach aussehen. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-back a,
.pretix-widget-wrapper .pretix-widget .pretix-widget-back a {
	display: inline-block;
	color: var(--pp-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	}

/* pretix faerbt Links im Hover ueber .pretix-widget a:hover - zwei Klassen,
   die Regel darueber hat drei und gewinnt auch im Hover. Ohne diesen
   Nachtrag bliebe der Link beim Ueberfahren unveraendert. */
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-back a:hover,
.pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-back a:focus,
.pretix-widget-wrapper .pretix-widget .pretix-widget-back a:hover,
.pretix-widget-wrapper .pretix-widget .pretix-widget-back a:focus {
	color: var(--pp-accent);
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-attribution {
	padding: 16px 0 10px;
	border-top: 1px solid var(--pp-line);
	color: var(--pp-ink-muted);
	font-size: 11px;
	letter-spacing: 1px;
	}

.pretix-widget-wrapper .pretix-widget .pretix-widget-attribution a {
	color: var(--pp-ink-muted);
	}

/* --------------------------------------------------------------------------
   Overlay, in dem die Kasse geoeffnet wird
   --------------------------------------------------------------------------
   Nur der Rahmen ist von hier aus gestaltbar, der Inhalt kommt als iframe
   von pretix.eu.
   -------------------------------------------------------------------------- */

body .pretix-widget-frame-holder::backdrop,
body .pretix-widget-lightbox-holder::backdrop,
body .pretix-widget-alert-holder::backdrop {
	background: rgba(16, 16, 32, .8);
	}

body .pretix-widget-frame-inner,
body .pretix-widget-lightbox-inner,
body .pretix-widget-alert-box {
	border-radius: 0;
	box-shadow: 0 18px 60px rgba(16, 16, 32, .35);
	}

body .pretix-widget-frame-close button,
body .pretix-widget-lightbox-close button {
	border-radius: 0;
	background: var(--pp-button);
	}

body .pretix-widget-frame-close button:hover,
body .pretix-widget-lightbox-close button:hover {
	background: var(--pp-accent);
	}

/* --------------------------------------------------------------------------
   Schmale Spalten und Smartphones
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

	/* Eine Stufe kleiner (h3 der Seite): 2.618rem sind auf dem Smartphone zu
	   gross, der Produktname bricht sonst in drei Zeilen. */
	body .pretix-widget-wrapper .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-name {
		font-size: 1.931rem;
		}

	/* Dieselbe Stufe wie in der Liste, eine Groesse kleiner. */
	.pretix-widget-wrapper .pretix-widget .pretix-widget-event-header strong {
		font-size: 1.618rem;
		}

	/* Auf dem Telefon stehen Preis und Mengenwahl je in einer halben Spalte -
	   der Abstand dazwischen darf kleiner ausfallen als am Desktop, sonst
	   bleibt fuer den Preis kaum Platz. */
	.pretix-widget-wrapper .pretix-widget .pretix-widget-item-price-col {
		padding-right: 14px;
		}

	}