/**
 * Der Onboarding-Kasten.
 *
 * ENTWORFEN GEGEN GEMESSENE THEMES, nicht gegen Annahmen. Was ein schlichtes
 * <div> im Inhaltsbereich bei 1280px Fensterbreite wirklich bekommt:
 *
 *                        Divi 4.27.4          Twenty Twenty-Four
 *   Breite               754px                620px  (is-layout-constrained)
 *   Schriftgroesse       14px                 16.8px
 *   Textfarbe            #666666              #111111
 *   Seitenhintergrund    #ffffff              #f9f9f9
 *   html-Schriftgroesse  16px                 16px
 *   Formularfelder       Browser-Vorgabe      Browser-Vorgabe
 *   box-sizing (input)   border-box           content-box
 *
 * Daraus folgt jede Regel hier:
 *
 *   - MAX-WIDTH, NIE MIN-WIDTH. 34rem (544px) passt in beide Spalten, auch in
 *     die schmalere von Twenty Twenty-Four. Eine Mindestbreite erzwaenge dort
 *     seitliches Scrollen.
 *   - SCHRIFTGROESSE AUSDRUECKLICH. Zwischen den beiden Themes liegen 20 %;
 *     ohne eigene Angabe waere derselbe Kasten unter Divi merklich kleiner.
 *     `rem` ist die sichere Einheit — die Wurzel steht in beiden auf 16px, die
 *     Koerperschrift nicht.
 *   - FARBE UND FLAECHE AUSDRUECKLICH. Divi vererbt ein helles Grau in den
 *     Kasten; auf weissem Grund liest sich das blass. Und der Kasten braucht
 *     seine eigene Flaeche, weil der Seitenhintergrund einmal weiss und einmal
 *     grau ist.
 *   - BOX-SIZING SELBST SETZEN. Divi stellt Formularfelder auf border-box,
 *     Twenty Twenty-Four laesst sie auf content-box: dasselbe Feld waere sonst
 *     unterschiedlich breit. Gesetzt wird es nur INNERHALB des Kastens.
 *   - FORMULARFELDER GANZ GESTALTEN. Beide Themes lassen sie bei der
 *     Browser-Vorgabe (13,3px, graue Knoepfe, keine Rundung) — es gibt hier
 *     nichts, worauf man aufbauen koennte.
 *
 * Gestylt wird ausschliesslich der Kasten. Kein Selektor greift ausserhalb von
 * `.equipper-onboarding`, keiner setzt `!important`, und keiner fasst das Theme
 * an. Wir kaempfen nicht um die Seite, wir moeblieren ein Zimmer darin.
 *
 * Die Farben kommen aus den Design-Variablen des Plugins (der Kasten traegt
 * dafuer zusaetzlich die Klasse `equipper`, an die das Design-Feld seine Werte
 * haengt). Die Vorgaben hier greifen, solange niemand etwas eingestellt hat.
 *
 * @package Equipper
 */

/*
 * ZWEI KLASSEN IM SELEKTOR, und das ist kein Schmuck. Twenty Twenty-Four legt
 * ueber seine „constrained layout"-Regel eine eigene max-width auf jedes direkte
 * Kind des Inhalts — mit derselben Gewichtung wie eine einzelne Klasse. Bei
 * Gleichstand entscheidet die Reihenfolge im Dokument, und die haengt davon ab,
 * wann welches Stylesheet ausgegeben wird: gemessen hat dort das Theme gewonnen,
 * der Kasten war 620px statt der vorgesehenen 544px breit. Unter Divi galten
 * meine 544px. Zwei Themes, zwei verschiedene Breiten, ohne dass es jemand
 * entschieden haette.
 *
 * `.equipper.equipper-onboarding` wiegt schwerer und macht die Breite wieder zu
 * einer Entscheidung. Der Kasten traegt beide Klassen wirklich — das ist kein
 * verdoppelter Selektor als Trick, sondern der Knoten, wie er dasteht. Ein
 * `!important` waere hier das falsche Werkzeug: es naehme dem Theme auch die
 * Faelle weg, in denen es recht haben soll.
 */
.equipper.equipper-onboarding {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

.equipper-onboarding {
	/* Vorgaben — vom Design-Feld ueberschrieben, wenn es etwas zu sagen hat. */
	--equipper-onb-primary: var( --equipper-primary, #8e0082 );
	--equipper-onb-on-primary: var( --equipper-on-primary, #ffffff );
	--equipper-onb-text: var( --equipper-text, #1f1420 );
	--equipper-onb-muted: var( --equipper-muted, #6b6b6b );
	--equipper-onb-surface: var( --equipper-surface, #ffffff );
	--equipper-onb-border: var( --equipper-border, #e7dbe6 );

	max-width: 34rem;
	margin: 1.5rem auto;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --equipper-onb-text );
	text-align: left;
}

/* Nur im Kasten — draussen bleibt alles, wie das Theme es haelt. */
.equipper-onboarding,
.equipper-onboarding *,
.equipper-onboarding *::before,
.equipper-onboarding *::after {
	box-sizing: border-box;
}

.equipper-onboarding__card {
	background: var( --equipper-onb-surface );
	border: 1px solid var( --equipper-onb-border );
	border-radius: 14px;
	padding: 1.75rem 1.75rem 1.5rem;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.06 );
}

/*
 * KEINE font-family — mit Absicht. Groesse, Farbe und Abstand bestimmt der
 * Kasten, die Schriftart bleibt die des Themes: unter Twenty Twenty-Four steht
 * hier die Serifenschrift des Themes, unter Divi dessen Open Sans. Genau so
 * soll es sein — der Kasten gehoert auf DIESE Website, nicht auf alle.
 */
.equipper-onboarding__title {
	margin: 0 0 0.85rem;
	font-size: 1.35rem;
	line-height: 1.3;
	color: var( --equipper-onb-primary );
}

.equipper-onboarding__card p {
	margin: 0 0 0.9rem;
}

.equipper-onboarding__card p:last-child {
	margin-bottom: 0;
}

/* --- Formularfelder ---------------------------------------------------- */

.equipper-onboarding__field {
	display: block;
	margin: 0 0 1rem;
}

.equipper-onboarding__field label {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.equipper-onboarding__field input {
	display: block;
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid #d7cdd6;
	border-radius: 8px;
	background: #ffffff;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var( --equipper-onb-text );
}

.equipper-onboarding__field input[readonly] {
	background: #f4eef4;
	color: var( --equipper-onb-muted );
}

/*
 * GLEICHE HOEHE OHNE FESTE HOEHE. Ein `height: 44px` sitzt nur so lange, wie die
 * Schrift dieselbe bleibt — und die ist es nicht: gemessene 14px unter Divi
 * gegen 16,8px unter Twenty Twenty-Four. Die Hoehe entsteht deshalb aus
 * Zeilenhoehe plus Polster, und beides ist hier ausdruecklich gesetzt. `height:
 * auto` raeumt eine Vorgabe ab, die manche Themes den Feldern mitgeben; es gilt
 * nur INNERHALB des Kastens.
 */
.equipper-onboarding__field input {
	height: auto;
	min-height: 0;
	max-width: 100%;
	margin: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

/* Ein Feld, das gerade beanstandet wurde. */
.equipper-onboarding__field--error input {
	border-color: #c0392b;
}

.equipper-onboarding__field--error label {
	color: #c0392b;
}

.equipper-onboarding__error {
	margin: 0 0 0.9rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #e8b4ad;
	border-left: 4px solid #c0392b;
	border-radius: 8px;
	background: #fdf3f2;
	color: #8f2c1f;
	font-weight: 600;
}

/*
 * DIE LIVE-AUSKUNFT (O5). Sie sitzt zwischen Feld und Hinweis und traegt dieselbe
 * Schriftgroesse wie der Hinweis — sie ist eine Nebenbemerkung, keine Meldung.
 * Leer nimmt sie keinen Platz ein: ohne JavaScript bleibt das Feld genau so, wie
 * es in O4 aussah.
 */
.equipper-onboarding__status {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
	color: var( --equipper-onb-muted );
	min-height: 0;
}

.equipper-onboarding__status:empty {
	display: none;
}

.equipper-onboarding__status--frei {
	color: #1e7a3c;
}

.equipper-onboarding__status--belegt,
.equipper-onboarding__status--ungueltig {
	color: #c0392b;
}

/*
 * DER VORSCHLAG (O5b). Ein Knopf, der wie ein Link aussieht: er sitzt mitten im
 * Satz, und ein Kasten mitten im Satz waere ein Fremdkoerper. Als <button>
 * ausgezeichnet und nicht als <a>, weil er keine Adresse aufruft, sondern das
 * Feld fuellt — die Tastatur erreicht ihn dadurch von sich aus, und ein
 * Screenreader nennt ihn als Knopf.
 *
 * Erbt Schriftgroesse und -art vom Statusfeld, damit er nicht aus der Zeile
 * springt.
 */
.equipper-onboarding__suggest {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.equipper-onboarding__suggest:focus-visible {
	outline: 2px solid var( --equipper-onb-primary );
	outline-offset: 2px;
}

.equipper-onboarding__hint {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var( --equipper-onb-muted );
}

/* --- Knoepfe ----------------------------------------------------------- */

.equipper-onboarding__btn {
	display: inline-block;
	/* 44px Mindesthoehe: mit dem Finger treffbar (BFSG). */
	min-height: 2.75rem;
	padding: 0.65rem 1.15rem;
	border: 1px solid var( --equipper-onb-primary );
	border-radius: 10px;
	background: var( --equipper-onb-surface );
	color: var( --equipper-onb-primary );
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.equipper-onboarding__btn:hover,
.equipper-onboarding__btn:focus {
	text-decoration: none;
}

.equipper-onboarding__btn--primary {
	background: var( --equipper-onb-primary );
	color: var( --equipper-onb-on-primary );
}

.equipper-onboarding__btn--quiet {
	border-color: var( --equipper-onb-border );
	color: var( --equipper-onb-muted );
}

/* Sichtbar, wohin die Tastatur zeigt — ohne die Maus zu stoeren. */
.equipper-onboarding__btn:focus-visible,
.equipper-onboarding__field input:focus-visible {
	outline: 2px solid var( --equipper-onb-primary );
	outline-offset: 2px;
}

/* --- Annehmen und Ablehnen nebeneinander -------------------------------- */

.equipper-onboarding__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin-top: 1.1rem;
}

.equipper-onboarding__actions form {
	margin: 0;
}

.equipper-onboarding__form {
	margin: 1.1rem 0 0;
}

.equipper-onboarding__aside {
	margin: 1.25rem 0 0.4rem;
	font-size: 0.9rem;
	color: var( --equipper-onb-muted );
}

/* --- Schmale Fenster ---------------------------------------------------- */

@media ( max-width: 30rem ) {

	.equipper-onboarding {
		margin: 1rem auto;
	}

	.equipper-onboarding__card {
		padding: 1.25rem 1.1rem 1.1rem;
		border-radius: 12px;
	}

	.equipper-onboarding__actions .equipper-onboarding__btn {
		width: 100%;
	}
}