/* Einfach-Modus: Leiste oben rechts (Anmelden, Seite bearbeiten, Bildergalerie, Hilfe, App, Abmelden), seit 1.5.0 auch die
 * Marke „Entwurf“ im Menü der Website. Für alle Besucher, deshalb klein. */

/* ---------- Leiste oben rechts ---------- */

.emwp-konto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.2;
}

/* Ohne Stil-Vorlage im Kopf (oder ohne JavaScript) steht die Leiste als eigene Zeile ganz oben rechts auf der Seite.
 * Sie liegt nicht über der Seite und verdeckt deshalb bei keinem Theme das Menü oder den Seitentitel. */
.emwp-konto:not(.im-kopf) {
	position: relative;
	z-index: 99990;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
}

/* Rückfall für Themes ohne wp_body_open: Dann kommt die Leiste erst am Ende der Seite und bleibt fest oben rechts. */
.emwp-konto.ist-fest:not(.im-kopf) {
	position: fixed;
	top: 12px;
	right: 12px;
	width: auto;
	padding: 0;
}

.admin-bar .emwp-konto.ist-fest:not(.im-kopf) {
	top: 44px;
}

.emwp-konto.im-kopf {
	margin-left: auto;
	padding: 12px 0;
}

/* Alle Knöpfe gleich hoch, auch bei Themes ohne allgemeines „box-sizing: border-box“ (S2-09). */
.emwp-konto .emwp-konto-link,
.emwp-konto .emwp-konto-knopf {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid #C9D1D8;
	border-radius: 999px;
	background: #FFFFFF;
	color: #1F2A33;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
}

.emwp-konto .emwp-konto-link:hover,
.emwp-konto .emwp-konto-link:focus-visible {
	border-color: #1F2A33;
	color: #1F2A33;
}

/* „Seite bearbeiten“ in der Hauptfarbe der Website (CSS-Variablen aus dem Kern). */
.emwp-konto .emwp-konto-knopf {
	border-color: var(--emwp-akzent, #2F7D6B);
	background: var(--emwp-akzent, #2F7D6B);
	color: #FFFFFF;
}

.emwp-konto .emwp-konto-knopf:hover,
.emwp-konto .emwp-konto-knopf:focus-visible {
	border-color: var(--emwp-akzent-dunkel, #25665A);
	background: var(--emwp-akzent-dunkel, #25665A);
	color: #FFFFFF;
}

.emwp-konto .emwp-konto-link:focus-visible,
.emwp-konto .emwp-konto-knopf:focus-visible {
	outline: 3px solid #1F2A33;
	outline-offset: 2px;
}

/* „Seite veröffentlichen“ (seit 1.5.0): nur auf Entwürfen, in Bernstein, damit man es nicht mit „Seite bearbeiten“
 * verwechselt. */
.emwp-konto .emwp-konto-freigabe {
	border-color: #B7791F;
	background: #FDF3D7;
	color: #5C3B00;
}

.emwp-konto .emwp-konto-freigabe:hover,
.emwp-konto .emwp-konto-freigabe:focus-visible {
	border-color: #5C3B00;
	background: #FBE7AE;
	color: #5C3B00;
}

.emwp-konto [hidden] {
	display: none;
}

/* Menü der Website (seit 1.5.0): Marke „Entwurf“ an Seiten, die Besucher noch nicht sehen. Nur wer die Seite bearbeiten
 * darf, bekommt sie. „span.“ davor, sonst setzt OceanWP mit „.dropdown-menu *“ Abstand und Rand auf 0. */
span.emwp-eb-entwurf-marke {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border: 1px solid #B7791F;
	border-radius: 999px;
	background: #FDF3D7;
	color: #5C3B00;
	font: 700 12px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}

/* „Menü“ gibt es am Handy, wenn es mehr als zwei weitere Knöpfe gibt (konto.js setzt dann hat-menue), und am Computer,
 * wenn die Knöpfe nicht in eine Zeile passen (ist-eng). */
.emwp-konto .emwp-konto-menue {
	display: none;
}

.emwp-konto.hat-menue.ist-eng .emwp-konto-menue {
	display: inline-flex;
}

.emwp-konto.hat-menue.ist-eng .emwp-konto-menue[aria-expanded="true"] {
	border-color: #1F2A33;
	background: #1F2A33;
	color: #FFFFFF;
}

.emwp-konto.hat-menue.ist-eng:not(.ist-offen) > .emwp-konto-weiter {
	display: none;
}

.emwp-konto.hat-menue.ist-eng.ist-offen > .emwp-konto-weiter {
	flex: 1 1 100%;
	justify-content: flex-start;
	min-height: 48px;
	border-radius: 14px;
}

@media (max-width: 781px) {
	/* Im Menü am Handy sind die Spalten schmal: kleinere Marke, damit sie meist neben dem Namen bleibt. */
	span.emwp-eb-entwurf-marke {
		margin-left: 4px;
		padding: 0 5px;
		font-size: 11px;
	}

	.emwp-konto.im-kopf {
		flex: 1 1 100%;
		padding: 0 0 12px;
	}

	.emwp-konto .emwp-konto-link,
	.emwp-konto .emwp-konto-knopf {
		padding: 8px 12px;
		font-size: 14px;
	}

	.emwp-konto.hat-menue .emwp-konto-menue {
		display: inline-flex;
	}

	.emwp-konto.hat-menue .emwp-konto-menue[aria-expanded="true"] {
		border-color: #1F2A33;
		background: #1F2A33;
		color: #FFFFFF;
	}

	.emwp-konto.hat-menue:not(.ist-offen) > .emwp-konto-weiter {
		display: none;
	}

	/* Aufgeklappt: die übrigen Knöpfe untereinander, groß genug für den Finger. */
	.emwp-konto.hat-menue.ist-offen > .emwp-konto-weiter {
		flex: 1 1 100%;
		justify-content: flex-start;
		min-height: 48px;
		border-radius: 14px;
	}
}

@media print {
	.emwp-konto {
		display: none !important;
	}
}