/*
	Terminbuchung (Easy Appointments)

	Wird nur auf der Buchungsseite geladen, siehe wwz_eaBuchungAssets() in
	includes/easy-appointments.php. Die Datei haengt dort per Abhaengigkeit hinter
	dem Stylesheet des Plugins - alles hier drin gewinnt also gegen dessen Regeln,
	ohne dass !important noetig waere.

	Die Klassennamen stammen aus dem Plugin: .ea-bootstrap ist der Rahmen,
	.ea-new-ui kommt im neuen Oberflaechenmodus dazu, .step sind die Schritte,
	.custom-field die selbst angelegten Felder, label.error die Fehlermeldung von
	jQuery Validate.
*/

/* Farbwelt --------------------------------------------------------------

	Das Plugin bringt ein kraeftiges Blau mit: #2563eb als Akzent, #1d4ed8 beim
	Ueberfahren, #eff6ff als heller Grund und dazu Schatten in rgba(37,99,235,…).
	Das passt nicht zum Shop, der durchgehend mit #212638 arbeitet.

	Ersetzt wird nach dieser Zuordnung:

	    #2563eb              -> #212638   Akzent, wie Kopfbalken und Schaltflaechen
	    #1d4ed8              -> #333a56   Ueberfahren. Beim Plugin wird die Farbe dabei
	                                      DUNKLER; bei unserem fast schwarzen Ton ginge
	                                      das nicht, deshalb hier eine Spur heller.
	    #eff6ff              -> #eff0f4   heller Grund, der Seitenhintergrund des Shops
	    rgba(37,99,235,…)    -> rgba(33,38,56,…)   Schatten, Deckung unveraendert

	Die Selektoren sind aus eafront-bootstrap-new-ui.css uebernommen, damit die
	Spezifitaet passt - einige des Plugins sind hoch (.ea-bootstrap.ea-bootstrap …).
	Geaendert werden nur Farben, keine Masse.

	Anzupassen waere das hier, wenn ein Plugin-Update neue blaue Stellen bringt.
	Aufspueren mit:
	    grep -oE '#2563eb|#1d4ed8|#eff6ff|rgba\( *37, *99, *235' <plugin>/css/eafront-bootstrap-new-ui.css

	Die eingebauten Variablen --ea-accent und Verwandte helfen nicht weiter: Sie sind
	zwar definiert, werden aber in keiner einzigen Regel benutzt.
------------------------------------------------------------------------- */

/* Schrift.

	Anders als bei den Farben sind die Variablen hier nicht bloss Zierde: Das
	Stylesheet des Plugins greift an zwanzig Stellen darauf zu. Ein Ueberschreiben
	an dieser einen Stelle genuegt deshalb.

	Das Plugin setzt eine Serifenschrift fuer Ueberschriften ("Source Serif 4") und
	die Systemschriften fuer den Rest. Beides weicht vom Shop ab, der durchgehend
	Open Sans verwendet - dieselbe Schreibweise samt Rueckfallschriften wie in der
	style.css, damit es sich nicht auseinanderentwickelt.

	Derselbe Selektor wie im Plugin (eafront-bootstrap-new-ui.css:13-14). Bei
	gleicher Spezifitaet gewinnt, was spaeter geladen wird - und diese Datei haengt
	hinter dem Stylesheet des Plugins. */
.ea-new-ui,
.ea-bootstrap.ea-new-ui {
	--ea-sans:"Open Sans", Arial, sans-serif;
	--ea-serif:"Open Sans", Arial, sans-serif;
}

/* Aufteilung der Eingabefelder ------------------------------------------

	Das Plugin stellt die Felder im neuen Oberflaechenmodus in ein Raster mit
	ZWEI Spalten (eafront-bootstrap-new-ui.css:762-768). Bei unseren Feldern
	geht das nicht auf: "E-Mail" und "E-Mail Bestaetigung" landen nebeneinander
	und laden zum fluechtigen Vergleich ein, und der lange Datenschutzhinweis
	quetscht sich in eine halbe Spalte, in der fast jedes Wort umbricht.

	Eine Spalte, volle Breite. Die Regeln des Plugins, die einzelne Elemente
	ueber beide Spalten ziehen (grid-column: 1 / -1), stoeren dabei nicht -
	bei einer Spalte bedeuten sie dasselbe. */
.ea-new-ui .step.final .ea_hide_show {
	grid-template-columns:1fr;
}

/* Das leere Platzhalter-Label ueber den Kaestchen.

	Das Plugin setzt vor jedes Kaestchen (Einwilligung, Datenschutz) ein
	<label class="col-sm-4 control-label">&nbsp;</label>. Im alten Layout hielt
	das die linke Spalte frei; im neuen stehen die Beschriftungen ueber den
	Feldern, und uebrig bleibt eine leere Zeile ueber jedem Kaestchen.

	Erkennbar sind diese Platzhalter daran, dass sie als einzige control-label
	kein for-Attribut tragen - sie gehoeren zu keinem Feld. */
.ea-new-ui .step.final .form-group > label.control-label:not([for]) {
	display:none;
}

/* Die leere Schaltflaechenzeile unter dem Formular.

	Das Plugin baut seine Knoepfe im neuen Modus per JavaScript in eine eigene
	Leiste und blendet die aus der Vorlage per display:none aus - die leere
	Huelle bleibt aber als Rasterzelle stehen und traegt deren Abstand.

	:has() steht bewusst allein in einer eigenen Regel: Kennt ein Browser den
	Selektor nicht, faellt genau diese Regel weg und sonst nichts. Das Plugin
	selbst arbeitet an dieser Stelle ebenfalls damit (Zeile 93). */
.ea-new-ui .step.final .ea_hide_show > .form-group:has(> .ea-actions-group) {
	display:none;
}

/* Bootstrap-Reste des Elternthemes ausgleichen ---------------------------

	Customizr bringt ein eigenes Bootstrap mit, und zwar ohne Abgrenzung auf
	einen eigenen Rahmen. Dessen Rasterklassen greifen deshalb auch hier:

	    @media (min-width: 576px) {
	        .col-sm-8 { flex:0 0 66.666667%; max-width:66.666667%; }
	    }

	Entscheidend ist die max-width. Das Plugin versucht dasselbe bereits
	(eafront-bootstrap-new-ui.css:808-812), setzt dort aber nur width - und eine
	width kommt gegen eine max-width nicht an, gleich wie schwer sie waere. Es
	ist also kein Streit ums Gewicht, sondern die falsche Eigenschaft. Deshalb
	blieben Felder und Datenschutzhinweis bei zwei Dritteln der Breite stehen.

	Kein !important noetig: Die Regel des Themes traegt eine einzige Klasse,
	diese hier drei. Dass die Regel in einer Media Query steht, aendert an ihrem
	Gewicht nichts.

	VORSICHT bei flex-basis: Die 66,667% des Themes sind als Breite gemeint,
	wirken hier aber als HOEHE. Das Plugin richtet die .form-group naemlich als
	Spalte aus (flex-direction:column), und in dieser Richtung ist die Basis die
	Hoehe. Folgenlos bleibt das nur, weil die Angabe in Prozent gegen eine
	Containerhoehe laeuft, die es nicht gibt. Wer hier 100% einsetzt, um die
	Breite zu erzwingen, gibt jedem Feld die volle Hoehe des Formulars - genau
	so am 06.09.2026 passiert. Die Basis gehoert deshalb auf ihren
	Ausgangswert auto zurueck, die Breite regelt allein die max-width.

	Mit dem Umstieg auf ein Block-Theme faellt die Ursache weg. Dann diesen
	Abschnitt zur Probe abschalten: Steht das Formular ohne ihn richtig, kann er
	ersatzlos raus. Der Rest der Datei ist davon unberuehrt. */
.ea-new-ui .step.final .col-sm-4,
.ea-new-ui .step.final .col-sm-8,
.ea-new-ui .step.final .col-sm-12 {
	flex:0 1 auto;
	max-width:100%;
}

/* Kaestchen und Text nebeneinander, der Text ueber die ganze Restbreite.

	Als Raster und nicht als Flexbox: 1fr zwingt die zweite Spalte, den
	verbleibenden Platz auszufuellen. Eine Flexbox haette den Text nur so breit
	gemacht, wie er von sich aus sein will.

	position:static holt das Kaestchen aus der absoluten Lage zurueck in den
	Textfluss - erst dadurch wird es zu einer Rasterspalte. Die Einrueckung, die
	es in der absoluten Lage brauchte, faellt damit weg. */
.ea-new-ui .step.final .checkbox,
.ea-new-ui .step.final .checkbox > label {
	padding-left:0;
}

.ea-new-ui .step.final .checkbox > label {
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:start;
	gap:0.6em;
	width:100%;
	margin:0;
}

.ea-new-ui .step.final .checkbox input[type="checkbox"] {
	position:static;
	float:none;
	/* An der ersten Textzeile ausgerichtet statt an deren Oberkante */
	margin:0.3em 0 0 0;
}

/* Auswahlfelder und Eingaben im Fokus */
.ea-new-ui .ea-field-group select:focus,
.ea-new-ui .step.final .form-control:focus,
.ea-new-ui #ea_customer_search:focus,
.ea-new-ui select#ea_customer_search:focus,
.ea-new-ui .select2-container--default.select2-container--open .select2-selection--single,
.ea-new-ui .select2-container--default.select2-container--focus .select2-selection--single {
	border-color:#212638;
	box-shadow:0 0 0 3px rgba(33,38,56,0.12);
}

/* Ecken -----------------------------------------------------------------

	Der Shop arbeitet durchgehend mit rechten Winkeln, das Plugin rundet an 29
	Stellen ab: 21-mal im Stylesheet (8px, 6px, 10px, 12px, 14px), viermal
	direkt am Element in booking.overview.tpl.php und viermal aus dem
	JavaScript heraus.

	Anders als bei den Farben werden die Stellen hier nicht einzeln
	nachgezogen. Die Ansage ist ueberall dieselbe - keine Rundung -, und eine
	Sammelregel bleibt richtig, wenn ein Plugin-Update neue hinzufuegt. Bei den
	Farben ging das nicht, dort ist jede Stelle eine eigene Entscheidung.

	!important ist hier unvermeidlich: Acht der Rundungen stehen direkt am
	Element beziehungsweise werden per JavaScript gesetzt, und dagegen kommt
	kein Stylesheet an.

	Ausgenommen sind die beiden Ladeanzeigen und der Haken nach der Buchung:
	Das sind Kreise, keine gerundeten Kaesten. Ohne die Ausnahme wuerden
	daraus Quadrate. Erkannt werden sie am Wert 50%. */
.ea-bootstrap,
.ea-bootstrap *,
.ea-bootstrap *::before,
.ea-bootstrap *::after {
	border-radius:0 !important;
}

.ea-bootstrap #ea-loader::after,
.ea-bootstrap .ea-btn-spinner,
.ea-bootstrap [style*="border-radius: 50%"] {
	border-radius:50% !important;
}

/* Beschreibung der Leistung, mit farbigem Balken links */
.ea-new-ui #ea-service-description {
	border-left:4px solid #212638;
}

/* Der heutige Tag im Kalender */
.ea-new-ui .ui-datepicker td.ui-datepicker-current-day a,
.ea-new-ui .ui-datepicker .ui-datepicker-current-day a {
	background-color:#212638;
	box-shadow:0 4px 12px rgba(33,38,56,0.26);
}

/* Zeitfenster beim Ueberfahren */
.ea-bootstrap .time-value:not(.time-disabled):not(.selected-time):hover,
.ea-new-ui .time-value:not(.time-disabled):not(.selected-time):hover,
.ea-bootstrap.ea-new-ui .time-value:not(.time-disabled):not(.selected-time):hover,
.time-row .time-value:not(.time-disabled):not(.selected-time):hover,
.time.well .time-value:not(.time-disabled):not(.selected-time):hover,
.time.well-lg .time-value:not(.time-disabled):not(.selected-time):hover,
a.time-value:not(.time-disabled):not(.selected-time):hover,
a.time-value:not(.time-disabled):not(.selected-time):focus {
	background:#eff0f4;
	background-color:#eff0f4;
	border-color:#212638;
	/* Dunkel statt Ueberfahr-Ton: Das ist Text auf hellem Grund, da zaehlt Lesbarkeit */
	color:#212638;
	box-shadow:0 4px 12px rgba(33,38,56,0.16);
}

/* Das gewaehlte Zeitfenster */
.ea-bootstrap.ea-bootstrap .time-value.selected-time,
.ea-bootstrap.ea-bootstrap .selected-time,
.ea-bootstrap .time-value.selected-time,
.ea-new-ui .time-value.selected-time,
.ea-bootstrap .selected-time,
.ea-new-ui .selected-time,
.time-value.selected-time,
a.time-value.selected-time,
.selected-time {
	background-color:#212638;
	border:1px solid #212638;
	border-color:#212638;
	box-shadow:0 4px 14px rgba(33,38,56,0.35);
}

/* Vorschlagslisten */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"],
ul.ui-autocomplete.ui-menu .ui-menu-item:hover,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus {
	background:#eff0f4;
	color:#212638;
}

/* Ladeanzeige */
#ea-loader::after,
.ea-new-ui #ea-loader::after {
	border:3px solid rgba(33,38,56,0.18);
	border-top-color:#212638;
}

/* "Neuen Termin buchen" auf der Seite nach der Buchung.

   !important notgedrungen: Das Plugin schreibt die Farbe direkt ans Element
   (booking.overview.tpl.php:132), und dagegen kommt eine Regel aus einem
   Stylesheet sonst nicht an. Die eckigen Ecken bekommt der Knopf ueber die
   Sammelregel im Abschnitt "Ecken" weiter oben.

   Unberuehrt bleiben Form und Masse. */
.ea-button-book-again {
	background:#212638 !important;
	box-shadow:0 2px 4px rgba(33,38,56,0.2) !important;
}

.ea-button-book-again:hover,
.ea-button-book-again:focus {
	background:#333a56 !important;
}

/* Rahmen ---------------------------------------------------------------- */

.ea-bootstrap {
	margin:0 auto 2em auto;
}

/* Das Plugin fasst das Formular als schwebende Karte auf: weisser Grund,
   Rahmen und ein weicher Schatten (eafront-bootstrap-new-ui.css:33-44). Auf der
   Seite steht es aber ohnehin allein, ein zweiter Rahmen um den Inhalt bringt
   nichts.

   Den INNEREN Container befreit das Plugin selbst davon (:74-78) - uebrig
   blieb der aeussere, den der Shortcode ausgibt. Beide Schreibweisen stehen
   hier, weil die Klasse ea-new-ui erst im Browser dazukommt. */
.ea-bootstrap.bootstrap,
.ea-bootstrap.ea-new-ui {
	border:none;
	box-shadow:none;
}

/* Die Ueberschrift "Termin buchen", die das Plugin im neuen Modus per
   JavaScript ueber das Formular setzt (js/frontend-bootstrap.js:200). Die Seite
   hat bereits eine eigene Ueberschrift, zweimal dasselbe braucht es nicht.

   Der Eintrag dafuer bleibt in wwz_eaEnglischeTexte() stehen: Er kostet nichts
   und die Uebersetzung waere sofort wieder da, falls die Zeile hier entfaellt. */
.ea-bootstrap .ea-booking-title {
	display:none;
}

/* Felder ---------------------------------------------------------------- */

.ea-bootstrap .form-control {
	padding:5px;
}

/* Fehlermeldungen ------------------------------------------------------- */

/* Das Plugin faerbt den Text nur rot. Hier bekommt er denselben Anstrich wie
   die Fehlermeldungen der Bestellformulare (.error in der style.css). */
.ea-bootstrap label.error {
	display:block;
	width:100%;
	margin:0.25em 0 0 0;
	color:firebrick;
	font-size:0.9em;
}

.ea-bootstrap input.error,
.ea-bootstrap select.error,
.ea-bootstrap textarea.error {
	border-color:firebrick;
}

/* Schaltflaechen -------------------------------------------------------- */

/* .ea-btn kommt vom Plugin, das Aussehen von der .wwz-button-Regel der
   style.css - beide Schreibweisen zeigen damit denselben Knopf.

   .ea-new-ui steht mit in der Liste, weil das Plugin die Absende-Schaltflaeche
   ueber genau diesen Selektor einfaerbt (.ea-new-ui .ea-submit). Ohne ihn bliebe
   sie blau, waehrend die uebrigen Knoepfe dunkel waeren. */
.ea-bootstrap .ea-btn,
.ea-bootstrap .ea-submit,
.ea-bootstrap .booking-button,
.ea-new-ui .ea-submit,
.ea-new-ui .booking-button {
	display:inline-block;
	background:#212638;
	color:#ffffff;
	padding:1em;
	margin:10px 10px 10px 0;
	border:1px solid #212638;
	border-radius:0px;
	line-height:1.2em;
	text-transform:none;
	letter-spacing:initial;
	box-shadow:0 6px 16px rgba(33,38,56,0.26);
}

/* Beim Ueberfahren eine Spur heller. Das Plugin geht hier ins Dunklere, was bei
   #212638 kaum noch sichtbar waere. */
.ea-bootstrap .ea-btn:hover,
.ea-bootstrap .ea-btn:focus,
.ea-bootstrap .ea-btn:active,
.ea-new-ui .ea-submit:hover:not(:disabled),
.ea-new-ui .booking-button:hover:not(:disabled) {
	background:#333a56;
	border-color:#333a56;
	color:#ffffff;
	box-shadow:0 6px 16px rgba(33,38,56,0.35);
}

/* Hinweis, wenn schon ein Termin gebucht ist ---------------------------- */

/* Ausgegeben von wwz_eaHinweisBestehenderTermin() an Stelle des Formulars. */
.wwz-booking-hinweis {
	border-color:#212638;
	border-style:solid;
	border-width:0 0 3px 0;
	padding:1em;
	margin:1em 0 2em 0;
	background:#ffffff;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
}

.wwz-booking-hinweis p:last-child {
	margin-bottom:0;
}

/* Kontaktzeilen absetzen, damit sie als Handlungsanweisung ins Auge fallen */
.wwz-booking-hinweis .wwz-booking-kontakt {
	padding-top:0.75em;
	border-top:1px solid #dddddd;
	line-height:1.8em;
}

/* Rueckmeldung nach einer Absage. Andere Farbe als der Sperrhinweis: Hier ist
   nichts zu klaeren, es geht direkt weiter mit dem Formular darunter. */
.wwz-booking-hinweis-erfolg {
	border-color:#3d7a4f;
}

/* Die Absage-Schaltflaeche im Hinweis. .wwz-button aus der style.css bringt
   ringsum 10px Aussenabstand mit - links weg, damit sie am Text ausgerichtet ist. */
.wwz-booking-hinweis .wwz-button {
	margin-left:0;
}

/* Schmale Schirme ------------------------------------------------------- */

/* Die Leiste am Fuss traegt links den gewaehlten Termin und rechts die beiden
   Schaltflaechen. Auf dem Telefon bleiben dem Text davon nur ein paar
   Zentimeter, und aus "Di. 15 Sep., 14:30 - 120 min" werden vier Zeilen.

   Die Leiste selbst darf schon umbrechen (flex-wrap:wrap), nur nimmt sich der
   Text nie genug Platz dafuer: Das Plugin gibt ihm flex:1, er fuellt also nur
   die Luecke. Mit einer Basis von 100% belegt er die erste Zeile allein, die
   Schaltflaechen ruecken darunter.

   Hier ist die Basis tatsaechlich die Breite - anders als bei den Feldern
   weiter oben, denn diese Leiste ist als Zeile ausgerichtet, nicht als
   Spalte. */
@media (max-width: 767px) {
	.ea-new-ui .ea-summary-text {
		flex:0 0 100%;
	}
}