/*
 * Zentrales Buttonsystem fuer alle Website- und Adminmodule.
 * Optik aus Orthopaedie-Rosenheim.css (.button) uebernommen:
 * rechteckig, vollflaechige Akzentfarbe, weisse Schrift, 40px, Versalien.
 * Jede Website liefert ihre eigene Akzentfarbe ueber --color-main.
 * Spezialsteuerungen (.subbutton, Mengenregler, Passwortauge usw.)
 * behalten ihre funktional notwendigen Abmessungen.
 */
:root {
	--site-button-color: var(--color-main, #009933);
	--site-button-color-hover: var(--site-button-color); /* Sicherer Fallback; color-mix dunkelt themenabhaengig ab */
	--site-button-height: 40px;
	--site-button-min-width: 180px; /* Kompaktbedienung bleibt moeglich; .button selbst hat 220px */
	--site-button-radius: 0px;
	--site-button-soft: rgba(0, 0, 0, .08);
	--site-button-selected: rgba(0, 0, 0, .14);
	--site-button-disabled: #aaa;
}

/* 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 transparent;
	border-radius: var(--site-button-radius);
	background: var(--site-button-color);
	color: #fff;
	font-family: Poppins, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color .2s ease, border-color .2s 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-color-hover);
	box-shadow: none;
}

@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--site-button-color-hover: color-mix(in srgb, var(--site-button-color) 65%, black);
		--site-button-soft: color-mix(in srgb, var(--site-button-color) 14%, transparent);
		--site-button-selected: color-mix(in srgb, var(--site-button-color) 28%, white);
		--site-button-disabled: color-mix(in srgb, var(--site-button-color) 45%, white);
	}
}

.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: 0 14px !important;
	border: 2px solid transparent !important;
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-color) !important;
	background-image: none !important;
	background-clip: border-box !important; /* Kunden-CSS nutzt sonst content-box und erzeugt weisse Innenraender */
	box-shadow: none !important;
	color: #fff !important;
	font-family: Poppins, Arial, sans-serif !important;
	font-size: var(--button-font-size, 17px) !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: anywhere;
	transform: none !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
	cursor: pointer;
}

/* Klassische Website-Buttons: dieselben 220 x 40px wie im Kunden-CSS. */
.button {
	width: 220px !important;
}

/* Shopbuttons duerfen weiterhin responsiv wachsen; keine starre 220px-Breite. */
.shop_button {
	min-width: 0;
}

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 {
	border-color: transparent !important;
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-color-hover) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-weight: 600 !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 {
	border-color: var(--site-button-color) !important;
	box-shadow: inset 0 0 0 2px #fff !important;
}

/* 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: 0 14px;
	border: 2px solid transparent;
	border-radius: var(--site-button-radius);
	background: var(--site-button-color);
	color: #fff;
	font-family: Poppins, Arial, sans-serif;
	font-size: var(--button-font-size, 17px);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.2;
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s 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-color-hover);
	color: #fff;
	box-shadow: none;
}

.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: 2px 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: transparent !important;
	border-radius: var(--site-button-radius) !important;
	background: var(--site-button-disabled) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: not-allowed !important;
	filter: none !important;
	opacity: 1;
}

/* 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;
}

/* Kompakte Shopbuttons behalten ihre Funktion und Groesse, verwenden aber
   dieselbe Outline-Optik wie die uebrigen Website-/Adminaktionen. */
header #wrap_header_area > form.shop-header-tools .hcart {
	border: 2px solid var(--site-button-color) !important;
	border-radius: 999px !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--site-button-color-dark) !important;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .12) !important;
	transform: none !important;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

header #wrap_header_area > form.shop-header-tools .hcart:hover,
header #wrap_header_area > form.shop-header-tools .hcart:focus {
	border-radius: 999px !important;
	background: var(--site-button-soft) !important;
	background-image: none !important;
	color: var(--site-button-color-dark) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
	transform: none !important;
}

/* Die dreiteilige Shop-Mengensteuerung ist ein zusammenhaengender
   Kombi-Button: Rahmen und Pillenform gehoeren dem Wrapper, nicht den
   Segmenten. So bleiben Loeschen / Anzahl / Plus verbunden wie im Beispielshop. */
.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: 50% !important;
	background: #fff !important;
	color: var(--site-button-color) !important;
	font-size: 14px !important;
	letter-spacing: normal;
	box-shadow: none !important;
	transform: translateY(-50%) !important;
}

.toggle-password:hover,
.toggle-password:focus {
	border-radius: 50% !important;
	background: var(--site-button-soft) !important;
	color: var(--site-button-color) !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: 1px solid var(--site-button-color) !important;
	border-radius: 5px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--site-form-text, #555) !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color .18s ease, border-color .18s ease !important;
}

.day-button:hover,
.day-button:focus,
.select-button:hover,
.select-button:focus {
	border-radius: 5px !important;
	background: var(--site-button-soft) !important;
	box-shadow: none !important;
	color: var(--site-form-text, #555) !important;
}

.day-button.selected,
.select-button.selected {
	border-radius: 5px !important;
	background: var(--site-button-selected) !important;
	box-shadow: none !important;
	color: var(--site-form-text, #555) !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: 50% !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: 50% !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;
	}
}

/* ================================================================
   Gezielte Ausnahmen fuer Kontakt, Kalender und CMS-Spezialbuttons.
   Die allgemeinen Website-Buttons behalten das zentrale Design.
   ================================================================ */

/* Kontakt: die fuenf Links sind eine Liste, keine frei verteilten
   Buttons. Gleiche Geometrie, sauberer Abstand, kein Textumbruch.
   Die alten Kunden-CSS-Offsets (left:-60px) werden nur hier ersetzt. */
body[id="Kontakt"] #kont-inner-wrap > ul {
    box-sizing: border-box;
    width: 220px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
body[id="Kontakt"] #kont-inner-wrap > ul > li {
    box-sizing: border-box;
    display: block;
    margin: 0 0 3px;
    padding: 0;
    list-style: none;
    line-height: normal;
}
body[id="Kontakt"] #kont-inner-wrap > ul > li > a.button {
    box-sizing: border-box !important;
    position: static !important;
    left: auto !important;
    display: flex !important;
    width: 220px !important;
    max-width: 100%;
    min-width: 0;
    height: 40px !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 5px !important;
    font-size: 15px !important;
    letter-spacing: .3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    text-align: center !important;
}
@media (max-width: 480px) {
    body[id="Kontakt"] #kont-inner-wrap > ul,
    body[id="Kontakt"] #kont-inner-wrap > ul > li > a.button {
        width: 100% !important;
    }
}

/* Terminkalender: kleine Navigation statt auffaelliger Rundbuttons.
   Die Pfeile werden im Original-Markup ueber Font Awesome gesetzt. */
body[id="Online_Termine"] .calendar-header button,
body[id="Online_Termine"] .calendar-header #prevMonth,
body[id="Online_Termine"] .calendar-header #nextMonth {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--site-button-color) !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
}
body[id="Online_Termine"] .calendar-header button:hover:not(:disabled),
body[id="Online_Termine"] .calendar-header button:focus-visible:not(:disabled) {
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--site-button-soft) !important;
    box-shadow: none !important;
    color: var(--site-button-color) !important;
}
body[id="Online_Termine"] .calendar-header button:disabled {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #777 !important;
    opacity: .4;
    cursor: default;
}

/* CMS: ein Icon zum Upload darf nicht wie eine grosse Aktion wirken.
   Nur das nachgewiesene .hbutton.group2 im Verzeichniseditor. */
body[id="Administration"] #maincont_inner a.hbutton.group2 {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
    font-size: 13px !important;
    letter-spacing: normal !important;
}
body[id="Administration"] #maincont_inner a.hbutton.group2 .fa {
    font-size: 13px !important;
    line-height: 1 !important;
}

/* jQuery-UI: Close-Icon sitzt in der Dialog-Titelleiste und ist
   keine primaere 40px-Aktion. Funktion und Position bleiben erhalten. */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: -12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--site-button-color) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff !important;
    overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus-visible {
    background: var(--site-button-color-hover) !important;
    box-shadow: none !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close > .ui-icon,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close > .ui-button-icon-primary,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close > .ui-button-text {
    display: none !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    content: "\00d7";
    display: block;
    font: 19px/1 Arial, Helvetica, sans-serif;
    color: #fff;
}

/* ========================================================================
   Feinabstimmung 3: Admin-Benutzeraktionen und jQuery-UI-Dialogkreuz.
   Das Standardbuttondesign sowie Kontakt-/Terminkalender bleiben unveraendert.
   ======================================================================== */

/* Die beiden Aktionsbeschriftungen in "Benutzer und Rechte" duerfen weder
   abgeschnitten werden noch durch die generelle 220px-Breite umbrechen. */
#admin-users-page .admin-users-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
#admin-users-page .admin-users-actions > .button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    width: max-content !important;
    min-width: min(240px, 100%);
    max-width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    letter-spacing: .25px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
}

/* jQuery-UI setzt bei dem Titelbar-Button haeufig text-indent:-9999px;
   das hatte auch unser CSS-generiertes X aus dem sichtbaren Bereich geschoben. */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    text-indent: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 2;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    content: "\00d7" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block !important;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    color: #fff !important;
    opacity: 1 !important;
    font: 700 19px/1 Arial, Helvetica, sans-serif !important;
    text-indent: 0 !important;
    text-align: center;
    visibility: visible !important;
}