/*
 * Zentrales Buttonsystem fuer alle Website- und Adminmodule.
 * Kundenspezifisches, kantiges Federation-Design. Kompaktsteuerungen behalten
 * ihre noetige Geometrie; ihre Ecken folgen demselben zentralen Radius.
 */
:root {
	--site-button-color: var(--color-main, #009933);
	--site-button-color-dark: var(--color-main, #009933);
	--site-button-height: 44px;
	--site-button-min-width: 180px;
	--site-button-radius: 4px;
	--site-button-soft: rgba(11, 42, 74, .14);
	--site-button-selected: rgba(11, 42, 74, .26);
}

/* Freie Standardbuttons im Termin-Admin folgen denselben zentralen Tokens.
   Fachliche Farbkennzeichnungen wie .danger bleiben als Status erkennbar. */
body[id="tadmin"] button:not(.danger),
body[id="tadmin"] button:not(.danger):hover,
body[id="tadmin"] button:not(.danger):focus,
body[id="iedit"] button,
body[id="iedit"] button:hover,
body[id="iedit"] button:focus {
	box-sizing: border-box;
	border: 2px solid var(--site-button-color);
	border-radius: var(--site-button-radius);
	background: #fff;
	color: var(--site-button-color-dark);
	font-family: inherit;
	font-weight: 700;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body[id="tadmin"] button:not(.danger):hover,
body[id="tadmin"] button:not(.danger):focus,
body[id="iedit"] button:hover,
body[id="iedit"] button:focus {
	background: var(--site-button-soft);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--site-button-soft: color-mix(in srgb, var(--site-button-color) 14%, transparent);
		--site-button-selected: color-mix(in srgb, var(--site-button-color) 26%, transparent);
	}
}

.button,
.shop_button,
.hbutton,
.withdrawal-submit,
.withdrawal-secondary-button,
.toggle-password,
.ui-dialog-buttonpane button.ui-button {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto !important;
	min-width: var(--site-button-min-width);
	max-width: 100%;
	height: auto !important;
	min-height: var(--site-button-height);
	margin-top: 0;
	padding: 10px 18px !important;
	border: 2px solid var(--site-button-color) !important;
	border-radius: var(--site-button-radius) !important;
	background: #fff !important;
	background-image: none !important;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
	color: var(--site-button-color-dark) !important;
	font-family: inherit !important;
	font-size: var(--button-font-size, 14px) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal;
	overflow-wrap: anywhere;
	transform: none !important;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
	cursor: pointer;
}

input.button {
	display: inline-block !important;
}

.button:hover,
.button:focus,
.shop_button:hover,
.shop_button:focus,
.hbutton:hover,
.hbutton:focus,
.withdrawal-submit:hover,
.withdrawal-submit:focus,
.withdrawal-secondary-button:hover,
.withdrawal-secondary-button:focus,
.toggle-password:hover,
.toggle-password:focus,
.ui-dialog-buttonpane button.ui-button:hover,
.ui-dialog-buttonpane button.ui-button:focus {
	width: auto !important;
	border-color: var(--site-button-color) !important;
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-soft) !important;
	background-image: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	color: var(--site-button-color-dark) !important;
	font-weight: 700 !important;
	transform: none !important;
}

.button:active,
.shop_button:active,
.hbutton:active,
.withdrawal-submit:active,
.withdrawal-secondary-button:active,
.toggle-password:active,
.ui-dialog-buttonpane button.ui-button:active {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22);
}

/* Der Widerruf hat im Kundenfork bewusst eine rote Primaeraktion. Die
   generische Outline-Regel darf sie nicht in einen weissen Button wandeln. */
.withdrawal-submit {
	border-color: var(--fed-red, #9b111e) !important;
	background: var(--fed-red, #9b111e) !important;
	color: #fff !important;
	text-transform: uppercase;
}

.withdrawal-submit:hover,
.withdrawal-submit:focus {
	border-color: var(--fed-red, #9b111e) !important;
	background: #fff !important;
	color: var(--fed-red, #9b111e) !important;
}

.withdrawal-secondary-button {
	background: rgba(11, 42, 74, .12) !important;
	color: var(--site-button-color-dark) !important;
	text-transform: uppercase;
}

/* Auch die in CMS-/Editoroberflaechen direkt als <button> ausgegebenen Aktionen
   erhalten die zentrale Gestaltung, selbst wenn sie keine .button-Klasse tragen. */
body[id="Administration"] #maincont_inner button:not(.subbutton),
body[id="shopadmin"] #maincont_inner button:not(.subbutton),
#showdown_wrap button:not(.subbutton) {
	box-sizing: border-box;
	min-height: var(--site-button-height);
	padding: 10px 18px;
	border: 2px solid var(--site-button-color);
	border-radius: var(--site-button-radius);
	background: #fff;
	color: var(--site-button-color-dark);
	font-family: inherit;
	font-size: var(--button-font-size, 14px);
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body[id="Administration"] #maincont_inner button:not(.subbutton):hover,
body[id="Administration"] #maincont_inner button:not(.subbutton):focus,
body[id="shopadmin"] #maincont_inner button:not(.subbutton):hover,
body[id="shopadmin"] #maincont_inner button:not(.subbutton):focus,
#showdown_wrap button:not(.subbutton):hover,
#showdown_wrap button:not(.subbutton):focus {
	background: var(--site-button-soft);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.button:focus-visible,
.shop_button:focus-visible,
.hbutton:focus-visible,
.withdrawal-submit:focus-visible,
.withdrawal-secondary-button:focus-visible,
.toggle-password:focus-visible,
.ui-dialog-buttonpane button.ui-button:focus-visible {
	outline: 3px solid var(--site-button-color);
	outline-offset: 2px;
}

.button[disabled],
.button[disabled]:hover,
.button[disabled]:focus,
.shop_button[disabled],
.shop_button[disabled]:hover,
.shop_button[disabled]:focus,
.withdrawal-submit[disabled],
.withdrawal-secondary-button[disabled],
.ui-dialog-buttonpane button.ui-button[disabled] {
	border-color: #9aa1a8 !important;
	background: #eef0f2 !important;
	background-image: none !important;
	box-shadow: none;
	color: #656b72 !important;
	cursor: not-allowed !important;
	filter: none !important;
	opacity: .72;
}

/* Kleine CMS-Iconaktionen (z. B. Datei-Upload) bleiben kompakt, gehoeren aber
   visuell zum selben Buttonsystem. */
.hbutton {
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
}

/* Die Shopseiten verwenden den neuen Header-Markup. Start- und Bildseiten
   verwenden noch den kundeneigenen Header aus last-custom.css. Die neue
   Struktur hier optisch exakt an diese dunkle Icon-Gruppe angleichen. */
header #wrap_header_area > form.shop-header-tools,
header #wrap_header_area > form.shop-header-tools--multilang {
	position: fixed;
	top: 8px;
	right: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(10, 18, 28, .22);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

header #wrap_header_area > form.shop-header-tools .hcart {
	position: static;
	min-width: 32px;
	min-height: 0;
	height: 32px;
	padding: 0 11px !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .10) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 19px;
	transform: none !important;
}

header #wrap_header_area > form.shop-header-tools .hcart:hover,
header #wrap_header_area > form.shop-header-tools .hcart:focus {
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .18) !important;
	box-shadow: none !important;
	color: #fff !important;
	transform: none !important;
}

header #wrap_header_area > form.shop-header-tools .shop-language-tools {
	display: inline-flex;
	gap: 6px;
}

header #wrap_header_area > form.shop-header-tools .shop-lang-switch,
header #wrap_header_area > form.shop-header-tools .shop-lang-switch.spact {
	position: static;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #c83a46;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
	transform: none;
}

header #wrap_header_area > form.shop-header-tools .shop-lang-switch.spact {
	border-color: rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .88);
	font-weight: 600;
	text-transform: lowercase;
}

header #wrap_header_area > form.shop-header-tools .shop-lang-switch:not(.spact):hover,
header #wrap_header_area > form.shop-header-tools .shop-lang-switch:not(.spact):focus {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(178, 30, 43, .82);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transform: translateY(-1px);
}

header #wrap_header_area > form.shop-header-tools #item_nb {
	position: absolute;
	top: -5px;
	right: -9px;
	left: auto;
	width: 16px;
	min-width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #b21e2b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 10px;
}

@media (max-width: 640px) {
	header #wrap_header_area > form.shop-header-tools,
	header #wrap_header_area > form.shop-header-tools--multilang {
		right: 10px;
		padding: 5px 6px;
	}

	header #wrap_header_area > form.shop-header-tools .hcart,
	header #wrap_header_area > form.shop-header-tools .shop-lang-switch,
	header #wrap_header_area > form.shop-header-tools .shop-lang-switch.spact {
		min-width: 30px;
		height: 28px;
		padding: 0 5px !important;
		font-size: 10px;
	}

	header #wrap_header_area > form.shop-header-tools .hcart { font-size: 15px; }
	header #wrap_header_area > form.shop-header-tools #item_nb {
		top: -2px;
		right: -5px;
		width: 10px;
		min-width: 10px;
		height: 10px;
		font-size: 8px;
	}
}

/* Die dreiteilige Shop-Mengensteuerung bleibt ein zusammenhaengender
   Kombi-Button: Die Aussenecken gehoeren dem Wrapper, nie den Segmenten. */
.shop-qty-control {
	border-radius: var(--site-button-radius);
}

/* Der kundenspezifische Warenkorb-Button behaelt seine Funktion und Groesse,
   bekommt aber dieselben kantigen Ecken wie die uebrigen Shopaktionen. */
.subbutton,
.subbutton:hover,
.subbutton:focus {
	border-radius: var(--site-button-radius) !important;
}

.shop-qty-control > button:not(.subbutton) {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--site-button-color-dark) !important;
	transform: none !important;
}

.shop-qty-control > button:not(.subbutton):hover,
.shop-qty-control > button:not(.subbutton):focus {
	border-radius: 0 !important;
	background: var(--site-button-soft) !important;
	box-shadow: none !important;
}

.shop-qty-control > button:not(.subbutton):focus-visible {
	outline: 2px solid var(--site-button-color);
	outline-offset: -3px;
}

.shop-qty-control > .shop-qty-left,
.shop-qty-control > .shop-custom-delete {
	border-right: 1px solid var(--shop-main-border, var(--site-button-color)) !important;
}

.shop-qty-control > .shop-qty-plus,
.shop-qty-control > .shop-custom-plus {
	border-left: 1px solid var(--shop-main-border, var(--site-button-color)) !important;
}

.shop-qty-control > button:not(.subbutton):disabled,
.shop-qty-control > button:not(.subbutton)[aria-disabled="true"] {
	background: #eef0f2 !important;
	color: #656b72 !important;
	cursor: not-allowed !important;
	opacity: .72;
}

/* Das Passwortauge bleibt kompakt im Feld, verwendet aber dieselbe Farbe und
   denselben Fokus-/Hoverzustand wie die uebrigen Website- und Adminbuttons. */
.toggle-password {
	position: absolute;
	top: 35%;
	right: 10px;
	width: 30px;
	min-width: 30px;
	height: 30px;
	min-height: 30px;
	padding: 0 !important;
	border-width: 1px !important;
	border-radius: var(--site-button-radius) !important;
	background: #fff !important;
	box-shadow: none !important;
	transform: translateY(-50%) !important;
}

.toggle-password:hover,
.toggle-password:focus {
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-soft) !important;
	box-shadow: none !important;
}

.button .fa,
.shop_button .fa {
	position: static !important;
	float: none !important;
	font-size: 17px;
	line-height: 1;
}

/* Vom Markdown-Editor erzeugte jQuery-UI-Dialogbuttons tragen keine .button-Klasse. */
.ui-dialog-buttonpane .ui-dialog-buttonset {
	display: flex;
	gap: 12px;
	width: 100%;
}

.ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button {
	flex: 1 1 0;
	margin: 0;
}

/* Termin-Auswahlfelder gehoeren zur selben Designsprache, behalten aber ihre
   fachlich notwendige flexible Breite und ihren Auswahlzustand. */
.day-button,
.select-button {
	border: 2px solid var(--site-button-color) !important;
	border-radius: var(--site-button-radius) !important;
	background: #fff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	color: var(--site-button-color-dark) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.day-button:hover,
.day-button:focus,
.select-button:hover,
.select-button:focus {
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-soft) !important;
	box-shadow: 0 3px 9px rgba(0, 0, 0, .12);
	color: var(--site-button-color-dark) !important;
}

.day-button.selected,
.select-button.selected {
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-selected) !important;
	box-shadow: 0 3px 9px rgba(0, 0, 0, .14);
	color: var(--site-button-color-dark) !important;
}

.calendar-header button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 2px solid var(--site-button-color) !important;
	border-radius: var(--site-button-radius) !important;
	background: #fff !important;
	color: var(--site-button-color-dark) !important;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.calendar-header button:hover,
.calendar-header button:focus {
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-soft) !important;
	box-shadow: 0 3px 9px rgba(0, 0, 0, .14);
	color: var(--site-button-color-dark) !important;
}

.calendar-header button[disabled] {
	border-color: #9aa1a8 !important;
	background: #eef0f2 !important;
	box-shadow: none;
	color: #656b72 !important;
	cursor: not-allowed;
	opacity: .72;
}

.summary-area .inner-part:last-child {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.summary-area .inner-part:last-child > form {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.summary-area .basket-payment-availability,
.summary-area #pp-error {
	grid-column: 1 / -1;
}

.summary-area .shop_button,
.summary-area .paypal-submit-wrap,
.summary-area .paypal-submit-wrap .shop_button {
	width: 100% !important;
	min-width: 0;
}

@media (max-width: 700px) {
	.summary-area .inner-part:last-child,
	.summary-area .inner-part:last-child > form {
		grid-template-columns: minmax(0, 1fr);
	}

	.summary-area .shop_button,
	.summary-area .paypal-submit-wrap {
		float: none;
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	.button,
	.button:hover,
	.button:focus,
	.shop_button,
	.shop_button:hover,
	.shop_button:focus,
	.withdrawal-submit,
	.withdrawal-submit:hover,
	.withdrawal-submit:focus,
	.withdrawal-secondary-button,
		.withdrawal-secondary-button:hover,
		.withdrawal-secondary-button:focus {
		width: 100% !important;
		min-width: 0;
	}
}